/* /@fs/app/packages/brand/src/logo.css */
.app-logo {
  --app-logo-background: var(--openbot-logo-production);
  --app-logo-eye: var(--openbot-logo-production-eye);
  position: relative;
  display: inline-block;
  overflow: hidden;
  border-radius: var(--openbot-radius-logo);
  isolation: isolate;
}

.app-logo[data-interactive="true"]:focus {
  outline: none;
}

.app-logo[data-interactive="true"]:focus-visible {
  box-shadow: inset 0 0 0 2px var(--openbot-text-primary);
}

.app-logo[data-variant="dev"] {
  --app-logo-background: var(--openbot-logo-dev);
  --app-logo-eye: var(--openbot-logo-eye);
}

.app-logo[data-variant="preview"] {
  --app-logo-background: var(--openbot-logo-preview);
  --app-logo-eye: var(--openbot-logo-eye);
}

.app-logo-background {
  fill: var(--app-logo-background);
}

.app-logo-eye {
  fill: none;
  stroke: var(--app-logo-eye);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 9.5px;
  pointer-events: none;
  transform-box: view-box;
}

.app-logo-eye-motion {
  pointer-events: none;
  /* `--app-logo-eye-squint` half closes both eyes for a moment. The blink animates the eyes inside. */
  transform: translate(var(--app-logo-eye-x, 0%), var(--app-logo-eye-y, 0%)) scaleY(var(--app-logo-eye-squint, 1));
  transform-origin: center;
  transition: transform var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1);
}

.app-logo-eye-left {
  transform-origin: 28.7% 48.7%;
}

.app-logo-eye-right {
  transform-origin: 71.2% 48.8%;
}

.app-logo[data-animation="blink"] .app-logo-eye {
  animation: app-logo-blink 4.8s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

.app-logo[data-animation="look-around"] .app-logo-eye {
  animation: app-logo-look-around 6s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

.app-logo[data-animation="surprised"] .app-logo-eye {
  animation: app-logo-surprised 5.4s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

.app-logo[data-click-reaction="wink"] .app-logo-eye-left {
  animation: app-logo-wink-left 360ms cubic-bezier(0.23, 1, 0.32, 1) both;
}

.app-logo[data-click-reaction="wink"] .app-logo-eye-right {
  animation: app-logo-wink-right 360ms cubic-bezier(0.23, 1, 0.32, 1) both;
}

.app-logo[data-easter-egg="party"] .app-logo-background {
  animation: app-logo-party-colors 1.2s cubic-bezier(0.77, 0, 0.175, 1) both;
}

.app-logo[data-easter-egg="party"] .app-logo-eye-left {
  animation: app-logo-party-left 1.2s cubic-bezier(0.77, 0, 0.175, 1) both;
}

.app-logo[data-easter-egg="party"] .app-logo-eye-right {
  animation: app-logo-party-right 1.2s cubic-bezier(0.77, 0, 0.175, 1) both;
}

@keyframes app-logo-blink {
  0%,
  44%,
  48%,
  100% {
    transform: scaleY(1);
  }

  46% {
    transform: scaleY(0.08);
  }
}

@keyframes app-logo-look-around {
  0%,
  30%,
  47%,
  64%,
  100% {
    transform: translateX(0);
  }

  35%,
  42% {
    transform: translateX(-3.5%);
  }

  52%,
  59% {
    transform: translateX(3.5%);
  }
}

@keyframes app-logo-surprised {
  0%,
  40%,
  56%,
  100% {
    transform: translateY(0) scale(1);
  }

  44%,
  51% {
    transform: translateY(-1.5%) scaleX(0.94) scaleY(1.12);
  }
}

@keyframes app-logo-wink-left {
  0%,
  100% {
    transform: scaleY(1);
  }

  38%,
  58% {
    transform: scaleY(0.08);
  }
}

@keyframes app-logo-wink-right {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  48% {
    transform: translateY(-1%) scaleX(0.96) scaleY(1.08);
  }
}

@keyframes app-logo-party-colors {
  0%,
  100% {
    fill: var(--app-logo-background);
  }

  22% {
    fill: var(--openbot-logo-dev);
  }

  48% {
    fill: var(--openbot-logo-preview);
  }

  74% {
    fill: var(--openbot-logo-production);
  }
}

@keyframes app-logo-party-left {
  0%,
  100% {
    transform: translate(0) rotate(0);
  }

  25% {
    transform: translateY(-6%) rotate(-8deg);
  }

  50% {
    transform: translate(4%, 2%) rotate(8deg);
  }

  75% {
    transform: translate(-4%, -2%) rotate(-4deg);
  }
}

@keyframes app-logo-party-right {
  0%,
  100% {
    transform: translate(0) rotate(0);
  }

  25% {
    transform: translateY(6%) rotate(8deg);
  }

  50% {
    transform: translate(-4%, -2%) rotate(-8deg);
  }

  75% {
    transform: translate(4%, 2%) rotate(4deg);
  }
}

@media (hover: hover) and (pointer: fine) {
  .app-logo[data-interactive="true"] {
    cursor: pointer;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-logo[data-animation] .app-logo-eye,
  .app-logo[data-click-reaction] .app-logo-eye,
  .app-logo[data-easter-egg] .app-logo-eye,
  .app-logo[data-easter-egg] .app-logo-background {
    animation: none;
    transform: none;
  }

  .app-logo-eye-motion {
    transition: none;
    transform: none;
  }
}


/* /src/styles.css */
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties;
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-cyrillic-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-cyrillic-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-greek-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-greek-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-vietnamese-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-cyrillic-ext-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-cyrillic-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-greek-ext-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-greek-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-vietnamese-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-latin-ext-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-latin-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
      "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
      "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring:where(:not(iframe)) {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .\!visible {
    visibility: visible !important;
  }
  .visible {
    visibility: visible;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .static {
    position: static;
  }
  .isolate {
    isolation: isolate;
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .block {
    display: block;
  }
  .contents {
    display: contents;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .table {
    display: table;
  }
  .flex-grow {
    flex-grow: 1;
  }
  .grow {
    flex-grow: 1;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .resize {
    resize: both;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .lowercase {
    text-transform: lowercase;
  }
  .ring {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
}
:root {
  --openbot-provider-current: currentcolor;
  --openbot-bg-native-canvas: #141414;
  --openbot-bg-native-sidebar: #141414;
  --openbot-bg-sheet: #141414;
  --openbot-bg-grouped: #212121;
  --openbot-text-grouped-secondary: #96969b;
  --openbot-border-grouped: #333335;
  --openbot-radius-grouped: 16px;
  --openbot-bg-chrome-glass: rgba(38, 38, 40, 0.96);
  --openbot-border-chrome-glass: rgba(255, 255, 255, 0.08);
  --openbot-bg-chrome-blur: rgba(26, 26, 28, 0.62);
  --openbot-bg-canvas: #1a1a1a;
  --openbot-bg-canvas-clear: rgba(26, 26, 26, 0);
  --openbot-bg-sidebar: #1a1a1a;
  --openbot-marketplace-detail-bg: #111111;
  --openbot-bg-surface: #212121;
  --openbot-bg-surface-raised: #242424;
  --openbot-bg-control: #212121;
  --openbot-bg-control-hover: #242424;
  --openbot-bg-control-active: #2a2a2a;
  --openbot-tabs-bar-bg: #212121;
  --openbot-tabs-pill-bg: #2a2a2a;
  --openbot-bg-overlay: rgba(26, 26, 26, 0.92);
  --openbot-dialog-overlay: rgba(0, 0, 0, 0.1);
  --openbot-dialog-ring: rgba(255, 255, 255, 0.1);
  --openbot-bg-glass: rgba(33, 33, 33, 0.76);
  --openbot-glass-surface: rgba(255, 255, 255, 0.07);
  --openbot-glass-surface-hover: rgba(255, 255, 255, 0.11);
  --openbot-glass-border: rgba(255, 255, 255, 0.18);
  --openbot-glass-highlight: rgba(255, 255, 255, 0.12);
  --openbot-glass-shadow: rgba(0, 0, 0, 0.28);
  --openbot-hero-grid-line: rgba(214, 173, 242, 0.09);
  --openbot-price-metal-high: #4c4c4c;
  --openbot-price-metal-core: #1f1f1f;
  --openbot-price-metal-low: #343434;
  --openbot-price-sheen-cool: rgba(150, 196, 255, 0.92);
  --openbot-price-sheen-light: rgba(240, 244, 250, 0.98);
  --openbot-price-sheen-warm: rgba(255, 184, 132, 0.94);
  --openbot-price-sheen-cool-soft: rgba(150, 196, 255, 0.26);
  --openbot-price-sheen-warm-soft: rgba(255, 184, 132, 0.28);
  --openbot-price-sheen-cool-clear: rgba(150, 196, 255, 0);
  --openbot-price-sheen-warm-clear: rgba(255, 184, 132, 0);
  --openbot-price-rim: rgba(255, 255, 255, 0.28);
  --openbot-price-rim-under: rgba(255, 255, 255, 0.1);
  --openbot-price-glow: rgba(180, 200, 255, 0.22);
  --openbot-bg-host-inset: #101216;
  --openbot-bg-notch: #000000;
  --openbot-mask-solid: #000000;
  --openbot-transparent: rgba(0, 0, 0, 0);
  --openbot-drawer-scrim: #000000;
  --openbot-scroll-edge-overlay: rgba(0, 0, 0, 0.72);
  --openbot-queue-surface: var(--openbot-bg-surface);
  --openbot-queue-border: var(--openbot-border-strong);
  --openbot-queue-text: var(--openbot-text-primary);
  --openbot-queue-action: var(--openbot-text-muted);
  --openbot-border: rgba(255, 255, 255, 0.035);
  --openbot-border-strong: rgba(255, 255, 255, 0.045);
  --openbot-image-outline: rgba(255, 255, 255, 0.1);
  --openbot-border-focus: rgba(0, 124, 247, 0.72);
  --openbot-text-primary: #ffffff;
  --openbot-text-on-light: #141414;
  --openbot-surface-light: #f0f0f0;
  --openbot-action: #f0f0f0;
  --openbot-action-foreground: #141414;
  --openbot-qr-background: #ffffff;
  --openbot-onboarding-desktop-mist: #dbe9ff;
  --openbot-onboarding-desktop-blue: #7eb4f2;
  --openbot-onboarding-desktop-indigo: #6f7de8;
  --openbot-sound-warm-back: #d95926;
  --openbot-sound-warm-ink: #f2c46b;
  --openbot-sound-mech-back: #1f1f1f;
  --openbot-sound-mech-ink: #dbe9ff;
  --openbot-sound-bubble-back: #5b5fe0;
  --openbot-sound-bubble-ink: #8bdee8;
  --openbot-sound-press-back: #ff1e5e;
  --openbot-sound-press-ink: #ffd8a8;
  --openbot-sound-off-back: #212121;
  --openbot-sound-off-ink: #4c4c4c;
  --openbot-onboarding-window: #f3f5f8;
  --openbot-text-secondary: #dcdcdc;
  --openbot-text-muted: #979797;
  --openbot-text-dim: #6a6a6a;
  --openbot-text-readable: rgba(255, 255, 255, 0.52);
  --openbot-text-muted-on-light: rgba(20, 20, 20, 0.52);
  --openbot-text-dim-on-light: rgba(20, 20, 20, 0.36);
  --openbot-download-card-muted: rgba(20, 20, 20, 0.68);
  --openbot-download-card-chip: rgba(20, 20, 20, 0.1);
  --openbot-download-card-border: rgba(20, 20, 20, 0.16);
  --openbot-download-card-focus: rgba(242, 242, 242, 0.86);
  --openbot-text-placeholder: #bfbfbf;
  --openbot-text-on-accent: #ffffff;
  --openbot-text-on-status: #07130c;
  --openbot-accent: #007cf7;
  --openbot-accent-hover: #1f8fff;
  --openbot-accent-text: #42a0ff;
  --openbot-accent-soft: rgba(0, 124, 247, 0.16);
  --openbot-accent-strong: rgba(0, 124, 247, 0.34);
  --openbot-settings-text-muted: rgba(255, 255, 255, 0.59);
  --openbot-provider-codex: var(--openbot-text-primary);
  --openbot-provider-claude: #d97757;
  --openbot-provider-grok: var(--openbot-text-primary);
  --openbot-provider-antigravity: #8e75b2;
  --openbot-chart-series-codex: #d6adf2;
  --openbot-chart-series-claude: var(--openbot-provider-claude);
  --openbot-chart-series-grok: #6bc7d9;
  --openbot-chart-series-other: var(--openbot-text-muted);
  --openbot-chart-storage-workspaces: #3987e5;
  --openbot-chart-storage-files: #d95926;
  --openbot-chart-storage-chats: #199e70;
  --openbot-chart-storage-downloads: #9085e9;
  --openbot-chart-storage-runtimes: #c98500;
  --openbot-chart-storage-app: var(--openbot-text-dim);
  --openbot-logo-production: #d6adf2;
  --openbot-logo-eye: #040007;
  --openbot-logo-production-eye: var(--openbot-logo-eye);
  --openbot-logo-dev: #e3b866;
  --openbot-logo-preview: #61c985;
  --openbot-unread-surface: #74b9ff;
  --openbot-unread-text: #07131f;
  --openbot-success: #31cf76;
  --openbot-success-text: #31cf76;
  --openbot-warning-text: #ff9412;
  --openbot-danger-text: #ff6069;
  --openbot-success-soft: rgba(49, 207, 118, 0.12);
  --openbot-success-wash: rgba(49, 207, 118, 0.045);
  --openbot-warning: #ff9412;
  --openbot-warning-soft: rgba(255, 148, 18, 0.12);
  --openbot-question-option: #6bc7d9;
  --openbot-question-option-soft: rgba(107, 199, 217, 0.14);
  --openbot-question-option-hover: rgba(107, 199, 217, 0.2);
  --openbot-question-option-pressed: rgba(107, 199, 217, 0.26);
  --openbot-island-identity-name: var(--openbot-text-primary);
  --openbot-question-badge-text: #8bdee8;
  --openbot-question-badge-soft: rgba(107, 199, 217, 0.16);
  --openbot-message-badge-text: #91c8ff;
  --openbot-message-badge-soft: rgba(116, 185, 255, 0.16);
  --openbot-badge-new: #ff1e5e;
  --openbot-badge-new-soft: rgba(255, 30, 94, 0.16);
  --openbot-beam-teal: var(--openbot-file-teal);
  --openbot-beam-blue: var(--openbot-accent-text);
  --openbot-beam-pink: var(--openbot-file-pink);
  --openbot-approval-badge-soft: rgba(255, 148, 18, 0.18);
  --openbot-danger: #fd2f3b;
  --openbot-danger-hover: #fd5d67;
  --openbot-danger-soft: rgba(253, 47, 59, 0.16);
  --openbot-danger-soft-hover: rgba(253, 47, 59, 0.28);
  --openbot-danger-focus: rgba(253, 47, 59, 0.4);
  --openbot-danger-border: rgba(253, 47, 59, 0.5);
  --openbot-file-blue: #74b9ff;
  --openbot-file-blue-soft: rgba(116, 185, 255, 0.14);
  --openbot-file-yellow: #ff9412;
  --openbot-file-yellow-soft: rgba(255, 148, 18, 0.12);
  --openbot-file-orange: #f0a06a;
  --openbot-file-orange-soft: rgba(240, 160, 106, 0.14);
  --openbot-file-teal: #6bc7d9;
  --openbot-file-teal-soft: rgba(107, 199, 217, 0.14);
  --openbot-file-green: #31cf76;
  --openbot-file-green-soft: rgba(49, 207, 118, 0.12);
  --openbot-file-red: #fd2f3b;
  --openbot-file-red-soft: rgba(253, 47, 59, 0.16);
  --openbot-file-pink: #d98ac9;
  --openbot-file-pink-soft: rgba(217, 138, 201, 0.14);
  --openbot-file-default: #42a0ff;
  --openbot-file-default-soft: rgba(0, 124, 247, 0.14);
  --openbot-data-table-border: #303030;
  --openbot-data-table-header-text: #a1a1a1;
  --openbot-data-table-text: #f5f5f5;
  --openbot-data-table-outer-border: rgba(255, 255, 255, 0);
  --openbot-data-table-ring: rgba(255, 255, 255, 0.12);
  --openbot-shadow-popover-ambient: rgba(0, 0, 0, 0.1);
  --openbot-shadow-dialog: rgba(0, 0, 0, 0.48);
  --openbot-shadow-dynamic-island: rgba(0, 0, 0, 0.6);
  --openbot-shadow-ring: rgba(228, 228, 228, 0.04);
  --openbot-border-on-light: rgba(20, 20, 20, 0.14);
  --openbot-hover: rgba(255, 255, 255, 0.06);
  --openbot-font-sans: "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --openbot-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
  --openbot-text-sm: 12px;
  --openbot-text-md: 13px;
  --openbot-text-lg: 14px;
  --openbot-text-xl: 16px;
  --openbot-text-2xl: 18px;
  --openbot-text-3xl: 24px;
  --openbot-leading-sm: 16px;
  --openbot-leading-md: 18px;
  --openbot-leading-lg: 20px;
  --openbot-leading-xl: 22px;
  --openbot-leading-2xl: 24px;
  --openbot-leading-3xl: 30px;
  --openbot-text-display: 32px;
  --openbot-text-usage-total: clamp(2rem, 5cqi, 3.5rem);
  --openbot-leading-display: 38px;
  --openbot-text-hero: clamp(3rem, 8vw, 6.5rem);
  --openbot-glyph-xs: 7px;
  --openbot-glyph-sm: 8px;
  --openbot-weight-regular: 400;
  --openbot-weight-medium: 500;
  --openbot-weight-semibold: 600;
  --openbot-weight-bold: 700;
  --openbot-tracking-tight: -0.1px;
  --openbot-tracking-normal: 0;
  --openbot-tracking-wide: 0.02em;
  --openbot-space-0-5: 2px;
  --openbot-space-1: 4px;
  --openbot-space-1-5: 6px;
  --openbot-space-2: 8px;
  --openbot-space-3: 12px;
  --openbot-space-4: 16px;
  --openbot-space-6: 24px;
  --openbot-space-8: 32px;
  --openbot-scrollbar-size: 8px;
  --openbot-radius-xs: 4px;
  --openbot-radius-sm: 6px;
  --openbot-radius-md: 8px;
  --openbot-radius-lg: 12px;
  --openbot-radius-card: 14px;
  --openbot-radius-xl: 20px;
  --openbot-radius-bubble: 22px;
  --openbot-radius-bubble-inset: calc(var(--openbot-radius-bubble) - var(--openbot-space-3) - 1px);
  --openbot-radius-modal: 30px;
  --openbot-radius-media-preview: calc(var(--openbot-radius-lg) - 1px);
  --openbot-radius-pill: 999px;
  --openbot-radius-logo: 20%;
  --openbot-control-xs: 24px;
  --openbot-control-sm: 28px;
  --openbot-control-md: 32px;
  --openbot-control-lg: 36px;
  --openbot-control-xl: 40px;
  --openbot-switch-width: 36px;
  --openbot-switch-height: 20px;
  --openbot-switch-thumb: 16px;
  --openbot-switch-inset: 2px;
  --openbot-switch-sm-width: 24px;
  --openbot-switch-sm-height: 14px;
  --openbot-switch-sm-thumb: 12px;
  --openbot-switch-sm-inset: 1px;
  --openbot-icon-stroke: 1.5;
  --openbot-icon-xs: 12px;
  --openbot-icon-sm: 14px;
  --openbot-icon-md: 16px;
  --openbot-icon-lg: 20px;
  --openbot-chat-entry-gap: var(--openbot-space-3);
  --openbot-chat-marker-gap: var(--openbot-space-1);
  --openbot-chat-marker-height: var(--openbot-control-xs);
  --openbot-chat-marker-avatar: var(--openbot-icon-md);
  --openbot-chat-marker-width: 680px;
  --openbot-duration-fast: 120ms;
  --openbot-duration-hover: 0ms;
  --openbot-duration-dialog: 100ms;
  --openbot-duration-normal: 160ms;
  --openbot-duration-slow: 200ms;
  --openbot-duration-overlay: 240ms;
  --openbot-duration-toast-enter: 340ms;
  --openbot-duration-toast-exit: 220ms;
  --openbot-duration-island-content: 340ms;
  --openbot-duration-island-content-exit: 220ms;
  --openbot-agent-activity-exit-delay: 500ms;
  --openbot-loading-indicator-delay: 400ms;
  --openbot-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --openbot-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --openbot-shadow-raised: 0 12px 32px var(--openbot-shadow-popover-ambient);
  --openbot-shadow-card: 0 0 0 transparent;
  --openbot-shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.48);
  --openbot-focus-ring: 0 0 0 3px var(--openbot-accent-soft);
  --openbot-layer-dropdown: 40;
  --openbot-layer-popover: 60;
  --openbot-layer-dialog: 100;
  --openbot-layer-dialog-host: calc(var(--openbot-layer-dialog) + var(--openbot-layer-popover));
  --openbot-layer-toast: 120;
  --openbot-layer-tooltip: 240;
}
[data-provider] {
  --openbot-provider-current: currentcolor;
}
[data-provider="codex"] {
  --openbot-provider-current: var(--openbot-provider-codex);
}
[data-provider="claude"] {
  --openbot-provider-current: var(--openbot-provider-claude);
}
[data-provider="grok"] {
  --openbot-provider-current: var(--openbot-provider-grok);
}
[data-provider="opencode"] {
  --openbot-provider-current: var(--openbot-text-primary);
}
[data-provider="antigravity"] {
  --openbot-provider-current: var(--openbot-provider-antigravity);
}
[data-provider="cursor"] {
  --openbot-provider-current: var(--openbot-text-primary);
}
[data-provider="cline"] {
  --openbot-provider-current: var(--openbot-text-primary);
}
[data-provider="acp"] {
  --openbot-provider-current: var(--openbot-text-primary);
}
:root {
  --stagger-dur: 500ms;
  --stagger-distance: 12px;
  --stagger-stagger: 40ms;
  --stagger-blur: 3px;
  --stagger-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
.t-stagger-line {
  display: block;
  opacity: 0;
  transform: translateY(var(--stagger-distance));
  filter: blur(var(--stagger-blur));
  transition: opacity var(--stagger-dur) var(--stagger-ease), transform var(--stagger-dur) var(--stagger-ease), filter var(--stagger-dur) var(--stagger-ease);
  will-change: transform, opacity, filter;
}
.t-stagger-line--2 {
  transition-delay: var(--stagger-stagger);
}
.t-stagger-line--3 {
  transition-delay: calc(var(--stagger-stagger) * 2);
}
.t-stagger.is-shown .t-stagger-line {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
@media (prefers-reduced-motion: reduce) {
  .t-stagger-line {
    transition: none !important;
  }
}
@font-face {
  font-family: "Inter Variable Fallback";
  src: local("Arial"), local("ArialMT");
  size-adjust: 107.12%;
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Variable Fallback";
  font-weight: 600 900;
  src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 107.12%;
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
}
:root {
  color-scheme: dark;
  --openbot-font-sans: "Inter Variable", "Inter Variable Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pulse-dur: 1000ms;
  --pulse-count: 1;
  --pulse-min: 0.5;
  --reveal-dur: 240ms;
  --reveal-blur: 2px;
  --reveal-ease: ease-in-out;
}
* {
  box-sizing: border-box;
}
html {
  background: var(--openbot-bg-canvas);
}
body {
  min-height: 100vh;
  margin: 0;
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
  font-synthesis: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}
html:not(:has(.web-app)) {
  min-width: 320px;
  scroll-behavior: smooth;
}
body:not(:has(.web-app)) {
  min-width: 320px;
}
a {
  color: inherit;
  text-decoration: none;
}
@keyframes landing-hero-in {
  from {
    transform: translateY(var(--stagger-distance));
    filter: blur(var(--stagger-blur));
  }
}
.landing-hero-line {
  animation: landing-hero-in var(--stagger-dur) var(--stagger-ease) both;
  animation-delay: calc(var(--landing-hero-line, 0) * var(--stagger-stagger));
}
.landing-actions.landing-hero-line {
  animation-duration: 400ms;
  animation-delay: var(--stagger-stagger);
}
@media (prefers-reduced-motion: reduce) {
  .landing-hero-line {
    animation: none;
  }
}
.t-skel {
  position: relative;
}
.t-skel-skeleton, .t-skel-content {
  position: absolute;
  inset: 0;
}
.t-skel-skeleton {
  z-index: 1;
  opacity: 1;
  filter: blur(0);
  transition: opacity var(--reveal-dur) var(--reveal-ease), filter var(--reveal-dur) var(--reveal-ease);
}
.t-skel-content {
  z-index: 2;
  opacity: 0;
  filter: blur(var(--reveal-blur));
  transition: opacity var(--reveal-dur) var(--reveal-ease), filter var(--reveal-dur) var(--reveal-ease);
}
.t-skel.is-revealed .t-skel-skeleton {
  opacity: 0;
  filter: blur(var(--reveal-blur));
}
.t-skel.is-revealed .t-skel-content {
  opacity: 1;
  filter: blur(0);
}
.t-skel.is-resetting .t-skel-skeleton, .t-skel.is-resetting .t-skel-content {
  transition: none;
}
.t-skel-skeleton.is-pulsing > * {
  animation: t-skel-pulse var(--pulse-dur) ease-in-out var(--pulse-count);
}
@keyframes t-skel-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: var(--pulse-min);
  }
}
@media (prefers-reduced-motion: reduce) {
  .t-skel-skeleton, .t-skel-content {
    transition: none;
  }
  .t-skel-skeleton.is-pulsing > * {
    animation: none;
  }
}
.landing-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.landing-page {
  min-height: 100vh;
  overflow: clip;
}
.landing-header {
  position: relative;
  z-index: 40;
  width: min(100%, 1280px);
  min-height: 76px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  margin: 0 auto;
  padding: 18px clamp(20px, 4vw, 48px);
}
.landing-brand {
  min-width: 0;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--openbot-radius-md);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.landing-brand:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--openbot-accent-strong);
}
.landing-brand-logo {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
}
.site-nav {
  --site-nav-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --site-nav-duration: 460ms;
  --site-nav-quick: 300ms;
  --site-nav-blur: 8px;
  --site-nav-offset: 10px;
  --site-nav-radius: 18px;
  --site-nav-hairline: rgba(255, 255, 255, 0.07);
  --site-nav-hover: rgba(255, 255, 255, 0.05);
  position: relative;
}
.site-nav-track {
  display: flex;
  padding: 4px;
  border-radius: var(--openbot-radius-pill);
  background: rgba(255, 255, 255, 0.025);
  box-shadow: 0 0 0 1px var(--site-nav-hairline), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.site-nav-list {
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav-pill {
  position: absolute;
  top: 4px;
  left: 4px;
  width: var(--site-nav-pill-width, 0);
  height: calc(100% - 8px);
  border-radius: var(--openbot-radius-pill);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 1px 2px rgba(0, 0, 0, 0.32);
  opacity: 0;
  pointer-events: none;
  transform: translateX(var(--site-nav-pill-x, 0));
  transition: transform var(--site-nav-quick) var(--site-nav-ease), width var(--site-nav-quick) var(--site-nav-ease), opacity var(--openbot-duration-normal) ease;
}
.site-nav-pill[data-shown] {
  opacity: 1;
}
.site-nav-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 11px 0 14px;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  background: transparent;
  color: var(--openbot-text-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--openbot-duration-normal) ease;
}
.site-nav-trigger[aria-expanded="true"], .site-nav-trigger[aria-current="page"] {
  color: var(--openbot-text-primary);
}
.site-nav-trigger:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px var(--openbot-accent-strong);
}
.site-nav-link {
  padding: 0 14px;
}
.site-nav-chevron {
  width: 12px;
  height: 12px;
  opacity: 0.55;
  transition: transform var(--site-nav-duration) var(--site-nav-ease), opacity var(--openbot-duration-normal) ease;
}
.site-nav-trigger[aria-expanded="true"] .site-nav-chevron {
  opacity: 1;
  transform: rotate(180deg);
}
.site-nav-surface {
  position: absolute;
  top: calc(100% + var(--site-nav-offset));
  left: 0;
  width: var(--site-nav-surface-width, 0);
  height: var(--site-nav-surface-height, 0);
  border-radius: var(--site-nav-radius);
  background: rgba(22, 22, 22, 0.8);
  box-shadow: 0 0 0 1px var(--site-nav-hairline), inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 8px 16px -8px rgba(0, 0, 0, 0.5), 0 28px 56px -16px rgba(0, 0, 0, 0.64);
  backdrop-filter: blur(40px) saturate(180%);
  opacity: 0;
  pointer-events: none;
  transform: translateX(var(--site-nav-surface-x, 0)) translateY(-6px) scale(0.96);
  transform-origin: var(--site-nav-surface-origin, 50%) top;
  transition: opacity 200ms ease, transform 240ms var(--site-nav-ease), width var(--site-nav-duration) var(--site-nav-ease), height var(--site-nav-duration) var(--site-nav-ease);
}
.site-nav[data-state="open"] .site-nav-surface {
  opacity: 1;
  transform: translateX(var(--site-nav-surface-x, 0)) translateY(0) scale(1);
  transition: opacity 240ms ease, transform var(--site-nav-duration) var(--site-nav-ease), width var(--site-nav-duration) var(--site-nav-ease), height var(--site-nav-duration) var(--site-nav-ease);
}
.site-nav-pill[data-instant], .site-nav-surface[data-instant] {
  transition: none;
}
.site-nav-panel {
  --site-nav-shift: 0px;
  --site-nav-rise: 0px;
  position: absolute;
  top: calc(100% + var(--site-nav-offset));
  left: 0;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
}
.site-nav-panel[data-state="open"] {
  opacity: 1;
  visibility: visible;
}
.site-nav-panel[data-state="open"]::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: calc(var(--site-nav-offset) + 6px);
}
.site-nav-panel[data-motion] {
  will-change: opacity, transform, filter;
}
.site-nav-panel[data-motion="from-start"], .site-nav-panel[data-motion="to-start"] {
  --site-nav-shift: -40px;
}
.site-nav-panel[data-motion="from-end"], .site-nav-panel[data-motion="to-end"] {
  --site-nav-shift: 40px;
}
.site-nav-panel[data-motion="enter"] {
  --site-nav-rise: -6px;
  animation: site-nav-panel-enter 420ms var(--site-nav-ease) 30ms both;
}
.site-nav-panel[data-motion="exit"] {
  --site-nav-rise: -4px;
  animation: site-nav-panel-leave 200ms cubic-bezier(0.4, 0, 1, 1) both;
}
.site-nav-panel[data-motion="from-start"], .site-nav-panel[data-motion="from-end"] {
  animation: site-nav-panel-enter var(--site-nav-duration) var(--site-nav-ease) both;
}
.site-nav-panel[data-motion="to-start"], .site-nav-panel[data-motion="to-end"] {
  animation: site-nav-panel-leave var(--site-nav-quick) var(--site-nav-ease) both;
}
@keyframes site-nav-panel-enter {
  from {
    opacity: 0;
    filter: blur(var(--site-nav-blur));
    transform: translate(var(--site-nav-shift), var(--site-nav-rise));
  }
}
@keyframes site-nav-panel-leave {
  from {
    opacity: 1;
    visibility: visible;
  }
  to {
    opacity: 0;
    visibility: hidden;
    filter: blur(var(--site-nav-blur));
    transform: translate(var(--site-nav-shift), var(--site-nav-rise));
  }
}
.site-panel {
  width: 580px;
  display: flex;
  flex-direction: column;
  padding: 8px;
}
.site-panel[data-kind="plugins"] {
  width: 540px;
}
.site-panel a:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px var(--openbot-accent-strong);
}
.site-panel-body {
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  gap: 6px;
}
.site-panel-feature {
  position: relative;
  min-height: 204px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding: 14px;
  border-radius: 12px;
  isolation: isolate;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.site-panel-feature-art {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--site-panel-art);
  transition: transform 700ms var(--site-nav-ease, var(--openbot-ease-out));
  will-change: transform;
}
.site-panel-feature::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0) 70%);
}
.site-panel-feature-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 8px;
  border-radius: var(--openbot-radius-pill);
  background: rgba(0, 0, 0, 0.44);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  color: var(--openbot-text-primary);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}
.site-panel-feature-copy, .site-panel-row-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.site-panel-feature-title {
  display: -webkit-box;
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  text-wrap: balance;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.site-panel-meta {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: 12px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.site-panel-feature .site-panel-meta {
  color: rgba(255, 255, 255, 0.72);
}
.site-panel-list, .site-panel-plugins {
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-panel-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.site-panel-plugins {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
}
.site-panel-row, .site-panel-plugin {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 12px;
  transition: background-color var(--openbot-duration-normal) ease;
}
.site-panel-row-art, .site-panel-plugin-mark {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 10px;
  background: var(--site-panel-art);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  transition: transform var(--site-nav-duration, 340ms) var(--site-nav-ease, var(--openbot-ease-out));
}
.site-panel-plugin-mark {
  display: grid;
  place-items: center;
  color: var(--openbot-text-primary);
}
.site-panel-plugin-logo {
  width: 20px;
  height: 20px;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
}
.site-panel-plugin-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
}
.site-panel-row-title {
  display: -webkit-box;
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.site-panel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 8px -8px -8px;
  padding: 12px 18px;
  border-top: 1px solid var(--site-nav-hairline, rgba(255, 255, 255, 0.07));
  border-radius: 0 0 var(--site-nav-radius, 18px) var(--site-nav-radius, 18px);
  background: rgba(255, 255, 255, 0.02);
}
.site-panel-summary {
  min-width: 0;
  color: var(--openbot-text-muted);
  font-size: 12px;
}
.site-panel-index {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  margin: -6px -10px;
  padding: 6px 10px;
  border-radius: var(--openbot-radius-pill);
  color: var(--openbot-text-primary);
  font-size: 12.5px;
  font-weight: 500;
  transition: background-color var(--openbot-duration-normal) ease;
}
.site-panel-index svg {
  width: 14px;
  height: 14px;
  transition: transform var(--openbot-duration-slow) var(--openbot-ease-out);
}
.site-header-actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
}
.site-menu-button, .site-sheet {
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  .site-nav-trigger:hover {
    color: var(--openbot-text-primary);
  }
  .site-panel-row:hover, .site-panel-plugin:hover, .site-panel-index:hover {
    background: var(--site-nav-hover, rgba(255, 255, 255, 0.05));
  }
  .site-panel-feature:hover .site-panel-feature-art {
    transform: scale(1.06);
  }
  .site-panel-row:hover .site-panel-row-art, .site-panel-plugin:hover .site-panel-plugin-mark {
    transform: scale(1.06);
  }
  .site-panel-index:hover svg {
    transform: translateX(3px);
  }
}
@media (min-width: 901px) and (max-width: 1040px) {
  .site-header-actions > .site-header-community {
    display: none;
  }
}
@media (max-width: 900px) {
  .landing-header {
    display: flex;
    justify-content: space-between;
  }
  .site-nav, .site-header-actions > .site-header-secondary {
    display: none;
  }
  .site-menu-button {
    position: relative;
    width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: var(--openbot-radius-pill);
    background: rgba(255, 255, 255, 0.04);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
    color: var(--openbot-text-primary);
    cursor: pointer;
  }
  .site-menu-button:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--openbot-accent-strong);
  }
  .site-menu-button-line {
    position: absolute;
    width: 15px;
    height: 1.5px;
    border-radius: 1px;
    background: currentColor;
    transform: translateY(-3.5px);
    transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .site-menu-button-line + .site-menu-button-line {
    transform: translateY(3.5px);
  }
  .site-menu-button[aria-expanded="true"] .site-menu-button-line {
    transform: rotate(45deg);
  }
  .site-menu-button[aria-expanded="true"] .site-menu-button-line + .site-menu-button-line {
    transform: rotate(-45deg);
  }
  .site-sheet {
    position: fixed;
    inset: 0;
    z-index: -1;
    display: block;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 84px 16px 32px;
    background: rgba(20, 20, 20, 0.88);
    opacity: 0;
    visibility: hidden;
    backdrop-filter: blur(32px) saturate(160%);
    transition: opacity 220ms ease, visibility 0s linear 220ms;
  }
  .site-sheet[data-state="open"] {
    opacity: 1;
    visibility: visible;
    transition: opacity 260ms ease;
  }
  .site-sheet-content {
    max-width: 560px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin: 0 auto;
  }
  .site-sheet-section, .site-sheet-actions {
    opacity: 0;
    filter: blur(6px);
    transform: translateY(-12px);
    transition: opacity 200ms ease, filter 200ms ease, transform 200ms ease;
  }
  .site-sheet[data-state="open"] .site-sheet-section, .site-sheet[data-state="open"] .site-sheet-actions {
    opacity: 1;
    filter: none;
    transform: none;
    transition: opacity 380ms ease, filter 460ms cubic-bezier(0.32, 0.72, 0, 1), transform 560ms cubic-bezier(0.32, 0.72, 0, 1);
    transition-delay: calc(var(--site-sheet-index) * 50ms + 40ms);
  }
  .site-sheet-heading {
    margin: 0 0 8px 6px;
    color: var(--openbot-text-dim);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .site-sheet .site-panel {
    width: auto;
    padding: 6px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.03);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07);
  }
  .site-sheet .site-panel-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .site-sheet .site-panel-feature {
    min-height: 132px;
  }
  .site-sheet .site-panel-footer {
    margin: 6px -6px -6px;
  }
  .site-sheet-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-radius: 18px;
    background: var(--openbot-text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--openbot-text-primary) 3%, transparent);
    }
    box-shadow: 0 0 0 1px var(--openbot-text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 1px color-mix(in srgb, var(--openbot-text-primary) 7%, transparent);
    }
    color: var(--openbot-text-primary);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
  }
  .site-sheet-link svg {
    width: 16px;
    height: 16px;
    color: var(--openbot-text-muted);
  }
  .site-sheet-link:focus-visible {
    outline: 2px solid var(--openbot-border-focus);
    outline-offset: 2px;
  }
  .site-sheet-actions {
    display: flex;
    gap: 8px;
  }
  html[data-site-sheet-open] {
    overflow: hidden;
    scrollbar-gutter: stable;
  }
}
@media (max-width: 480px) {
  .site-sheet .site-panel-plugins {
    grid-template-columns: minmax(0, 1fr);
  }
}
.landing-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.landing-button {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--openbot-radius-pill);
  font: inherit;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: background-color var(--openbot-duration-normal) ease, border-color var(--openbot-duration-normal) ease, color var(--openbot-duration-normal) ease, transform var(--openbot-duration-fast) var(--openbot-ease-out);
}
.landing-button::before {
  content: "";
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  background: currentColor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}
.landing-button[data-icon="download"]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 3h2v10.17l3.59-3.58L18 11l-6 6-6-6 1.41-1.41L11 13.17V3Zm-6 16h14v2H5v-2Z'/%3E%3C/svg%3E");
}
.landing-button[data-icon="contact"]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3h16a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H9l-5 3v-3a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z'/%3E%3C/svg%3E");
}
.landing-button[data-icon="github"]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.58 2 12.23c0 4.52 2.87 8.35 6.84 9.71.5.1.68-.22.68-.49 0-.24-.01-1.05-.01-1.91-2.78.62-3.37-1.21-3.37-1.21-.45-1.18-1.11-1.49-1.11-1.49-.91-.64.07-.62.07-.62 1 .07 1.53 1.05 1.53 1.05.89 1.56 2.34 1.11 2.91.85.09-.66.35-1.11.63-1.36-2.22-.26-4.56-1.14-4.56-5.06 0-1.12.39-2.03 1.03-2.75-.1-.26-.45-1.3.1-2.71 0 0 .84-.28 2.75 1.05A9.38 9.38 0 0 1 12 6.95a9.4 9.4 0 0 1 2.5.35c1.91-1.33 2.75-1.05 2.75-1.05.55 1.41.2 2.45.1 2.71.64.72 1.03 1.63 1.03 2.75 0 3.93-2.35 4.8-4.58 5.05.36.32.68.94.68 1.9 0 1.37-.01 2.47-.01 2.81 0 .27.18.59.69.49A10.25 10.25 0 0 0 22 12.23C22 6.58 17.52 2 12 2Z'/%3E%3C/svg%3E");
}
.landing-button[data-icon="open"]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3h7v7h-2V6.41l-8.29 8.3-1.42-1.42L17.59 5H14V3ZM5 5h6v2H5v12h12v-6h2v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Z'/%3E%3C/svg%3E");
}
.landing-button[data-icon="arrow-right"]::before {
  order: 1;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.17 5 11.76 6.41 16.34 11H4v2h12.34l-4.58 4.59L13.17 19l7-7-7-7Z'/%3E%3C/svg%3E");
}
.join-card {
  width: min(100%, 520px);
  display: grid;
  justify-items: center;
  border: 1px solid var(--openbot-border-strong);
  border-radius: 24px;
  background: var(--openbot-bg-sidebar);
  padding: clamp(32px, 7vw, 56px);
  text-align: center;
  box-shadow: 0 24px 80px var(--openbot-glass-shadow);
}
.join-card-signal {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
}
.join-card-signal span {
  height: 1px;
  background: var(--openbot-border-strong);
}
.join-card-signal i {
  width: 7px;
  height: 7px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-logo-production);
  box-shadow: 0 0 0 6px var(--openbot-accent-strong);
}
.join-card-logo {
  width: 64px;
  height: 64px;
  margin-bottom: 22px;
}
.join-card-eyebrow {
  margin: 0 0 10px;
  color: var(--openbot-logo-production);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.join-card h1 {
  margin: 0;
  font-size: clamp(30px, 6vw, 42px);
  line-height: 1.05;
  letter-spacing: -0.04em;
}
.join-card-copy {
  max-width: 420px;
  margin: 18px 0 0;
  color: var(--openbot-text-secondary);
  font-size: 16px;
  line-height: 1.55;
}
.join-card-actions {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 30px;
}
.join-card-actions-single {
  grid-template-columns: auto;
  justify-content: center;
}
.join-card-error {
  margin: 26px 0 0;
  color: var(--openbot-text-primary);
}
.join-card-note {
  margin: 24px 0 0;
  color: var(--openbot-text-muted);
  font-size: 12px;
  line-height: 1.5;
}
.join-card-status-empty {
  margin: 0;
}
@media (max-width: 520px) {
  .join-card-actions {
    grid-template-columns: 1fr;
  }
}
.landing-button-sm {
  height: 38px;
  gap: 7px;
  padding: 0 17px;
  font-size: 13px;
}
.landing-button-md {
  height: 42px;
  gap: 8px;
  padding: 0 20px;
  font-size: 14px;
}
.landing-button-lg {
  height: 48px;
  gap: 9px;
  padding: 0 24px;
  font-size: 15px;
}
.landing-button-primary {
  background: var(--openbot-surface-light);
  color: var(--openbot-text-on-light);
}
.landing-button-secondary {
  border-color: var(--openbot-border-strong);
  background: transparent;
  color: var(--openbot-text-secondary);
}
.landing-button-glass {
  border-color: var(--openbot-glass-border);
  background: var(--openbot-glass-surface);
  box-shadow: inset 0 1px 0 var(--openbot-glass-highlight), 0 10px 30px -18px var(--openbot-glass-shadow);
  color: var(--openbot-text-primary);
}
.landing-button:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--openbot-accent-strong);
}
.landing-button:active {
  transform: scale(0.97);
}
.landing-hero {
  width: min(100%, 1280px);
  position: relative;
  isolation: isolate;
  margin: 0 auto;
  padding: clamp(60px, 8vw, 112px) clamp(20px, 4vw, 48px) 72px;
}
.landing-hero-grid {
  position: absolute;
  z-index: 0;
  inset: 0 auto 0 50%;
  width: 100vw;
  pointer-events: none;
  background-image: linear-gradient(90deg, var(--openbot-hero-grid-line) 1px, var(--openbot-transparent) 1px), linear-gradient(var(--openbot-hero-grid-line) 1px, var(--openbot-transparent) 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(80% 62% at 50% 40%, var(--openbot-mask-solid) 40%, var(--openbot-transparent) 100%);
  transform: translateX(-50%);
}
.landing-hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.landing-availability {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 28px;
  padding: 4px 12px 4px 4px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-sidebar);
  color: var(--openbot-text-secondary);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
}
.landing-availability-new {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-surface-light);
  color: var(--openbot-text-on-light);
  font-family: var(--openbot-font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.landing-availability-copy {
  color: var(--openbot-text-muted);
}
.landing-availability-platform {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--openbot-text-primary);
}
.landing-availability-platform svg {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
}
.landing-availability-separator {
  color: var(--openbot-text-dim);
}
.landing-availability-divider {
  width: 1px;
  height: 12px;
  margin-inline: 2px;
  background: var(--openbot-border-strong);
}
.landing-title {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-hero);
  font-weight: 500;
  letter-spacing: -0.065em;
  line-height: 0.96;
}
.landing-hero-logo {
  width: 0.82em;
  height: 0.82em;
  flex: 0 0 auto;
  margin-inline: 0.22em 0.14em;
  transform: translateY(0.04em);
}
.landing-description {
  max-width: 720px;
  margin: 30px 0 0;
  color: var(--openbot-text-secondary);
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.55;
  text-wrap: pretty;
}
.landing-provider {
  display: inline-flex;
  align-items: center;
  gap: 0.28em;
  color: var(--openbot-text-primary);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  vertical-align: -0.04em;
}
.landing-provider-item {
  white-space: nowrap;
}
.landing-provider-logo {
  width: 0.84em;
  height: 0.84em;
  flex: 0 0 auto;
  overflow: visible;
  fill: var(--openbot-provider-current);
}
.landing-actions {
  margin-top: 32px;
}
.landing-download-selector {
  position: relative;
  z-index: 3;
  display: inline-flex;
  justify-content: center;
}
.landing-download-split {
  height: 48px;
  display: inline-flex;
  align-items: stretch;
  overflow: hidden;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-surface-light);
  color: var(--openbot-text-on-light);
}
.landing-download-primary {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 18px 0 22px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: opacity var(--openbot-duration-normal) ease;
}
.landing-download-primary svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
.landing-download-primary[data-state="coming-soon"] {
  color: var(--openbot-download-card-muted);
}
.landing-download-trigger {
  width: 45px;
  min-width: 45px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--openbot-download-card-border);
  background: transparent;
  color: currentColor;
  font: inherit;
  transition: opacity var(--openbot-duration-normal) ease;
}
.landing-download-trigger svg {
  width: 13px;
  height: 13px;
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.landing-download-trigger[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.landing-download-primary:focus-visible, .landing-download-trigger:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--openbot-logo-production);
  outline-offset: -3px;
}
.landing-download-menu {
  width: min(288px, calc(100vw - 32px));
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-sidebar);
  box-shadow: 0 18px 48px -24px var(--openbot-mask-solid);
  color: var(--openbot-text-primary);
  transform: translateX(-50%);
  animation: landing-download-menu-enter var(--openbot-duration-normal) var(--openbot-ease-out) both;
}
.landing-download-menu-item {
  min-height: 42px;
  width: 100%;
  display: grid;
  grid-template-columns: 17px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0 11px;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  color: var(--openbot-text-secondary);
  font: inherit;
  font-size: 13px;
  text-align: left;
  transition: background-color var(--openbot-duration-fast) ease, color var(--openbot-duration-fast) ease;
}
.landing-download-menu-item svg {
  width: 15px;
  height: 15px;
  justify-self: center;
}
.landing-download-menu-item span {
  overflow: hidden;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.landing-download-menu-item small {
  color: var(--openbot-text-muted);
  font-family: var(--openbot-font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.landing-download-menu-item[data-selected="true"] {
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-primary);
}
.landing-download-menu-item:focus-visible {
  outline: 2px solid var(--openbot-logo-production);
  outline-offset: -2px;
}
.landing-download-menu-separator {
  height: 1px;
  margin: 4px 5px;
  border: 0;
  background: var(--openbot-border-strong);
}
.landing-download-menu-label {
  padding: 6px 11px 4px;
  color: var(--openbot-text-muted);
  text-align: left;
  font-family: var(--openbot-font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.landing-preview {
  aspect-ratio: 16 / 10;
  width: 100%;
  position: relative;
  z-index: 1;
  isolation: isolate;
  max-height: 760px;
  margin-top: clamp(68px, 9vw, 112px);
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-sidebar);
  box-shadow: 0 28px 90px -42px var(--openbot-mask-solid), inset 0 1px var(--openbot-glass-highlight);
}
.landing-preview::before {
  position: absolute;
  z-index: -1;
  inset: -42px -24px -30px;
  background: radial-gradient(ellipse at 50% 48%, var(--openbot-accent-strong), var(--openbot-transparent) 68%);
  content: "";
  filter: blur(22px);
  opacity: 0.82;
  pointer-events: none;
}
.landing-preview-window-controls {
  position: absolute;
  z-index: 3;
  top: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.landing-preview-window-controls i {
  display: block;
  width: 12px;
  height: 12px;
  border: 0.5px solid rgba(0, 0, 0, 0.18);
  border-radius: var(--openbot-radius-pill);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14);
}
.landing-preview-window-controls i:nth-child(1) {
  background: #ff5f57;
}
.landing-preview-window-controls i:nth-child(2) {
  background: #febc2e;
}
.landing-preview-window-controls i:nth-child(3) {
  background: #28c840;
}
.landing-preview-stage {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: calc(var(--openbot-radius-lg) - 1px);
  background: var(--openbot-bg-canvas);
}
.landing-preview-placeholder {
  overflow: hidden;
  border-radius: calc(var(--openbot-radius-lg) - 1px);
  background: var(--openbot-bg-canvas);
}
.landing-app-preview iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  background: var(--openbot-bg-canvas);
}
.landing-download {
  scroll-margin-top: 24px;
  color: var(--openbot-text-primary);
}
.landing-download-inner {
  width: min(100%, 1280px);
  margin: 0 auto;
  padding: clamp(96px, 10vw, 144px) clamp(20px, 4vw, 48px) clamp(36px, 5vw, 64px);
}
.landing-download-heading {
  max-width: 720px;
}
.landing-download-heading h2 {
  margin: 0;
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 1;
}
.landing-download-heading p {
  max-width: 620px;
  margin: 22px 0 0;
  color: var(--openbot-text-secondary);
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.55;
  text-wrap: pretty;
}
.landing-download-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: clamp(48px, 6vw, 72px);
}
.landing-download-card {
  min-width: 0;
  min-height: 430px;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 2.6vw, 34px);
  border: 1px solid var(--openbot-download-card-border);
  border-radius: 20px;
  color: var(--openbot-text-on-light);
}
.landing-download-card[data-download-platform="macos"] {
  background: var(--openbot-logo-production);
}
.landing-download-card[data-download-platform="windows"] {
  background: var(--openbot-logo-preview);
}
.landing-download-card[data-download-platform="linux"] {
  background: var(--openbot-logo-dev);
}
.landing-page {
  --download-ios-color: #74b9ff;
  --download-android-color: #ee9a7d;
}
.landing-download-card[data-download-platform="ios"] {
  background: var(--download-ios-color);
}
.landing-download-card[data-download-platform="android"] {
  background: var(--download-android-color);
}
.landing-download-grid-mobile {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 18px;
}
.landing-download-grid-mobile .landing-download-card {
  min-height: 320px;
}
.landing-download-card[data-state="available"] {
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out), box-shadow var(--openbot-duration-normal) ease;
}
.landing-download-card:focus-visible {
  outline: 3px solid var(--openbot-download-card-focus);
  outline-offset: 3px;
}
.landing-download-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.landing-download-platform-logo {
  width: clamp(76px, 7vw, 96px);
  height: clamp(76px, 7vw, 96px);
  flex: 0 0 auto;
}
.landing-download-status {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border: 1px solid var(--openbot-download-card-border);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-download-card-chip);
  font-family: var(--openbot-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.landing-download-card-copy {
  margin-top: auto;
}
.landing-download-card-copy h3 {
  margin: 0;
  font-size: clamp(29px, 3vw, 38px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
}
.landing-download-card-copy p {
  margin: 14px 0 0;
  color: var(--openbot-download-card-muted);
  font-size: 14px;
  line-height: 1.5;
}
.landing-download-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 28px;
  font-size: 14px;
  font-weight: 600;
}
.landing-download-arrow {
  width: 15px;
  height: 15px;
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.landing-download-heading[data-revealed="false"], .landing-download-card[data-revealed="false"] {
  opacity: 0;
}
.landing-download-heading[data-revealed="true"], .landing-download-card[data-revealed="true"] {
  animation: landing-download-reveal 760ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.landing-download-card:nth-child(2)[data-revealed="true"] {
  animation-delay: 90ms;
}
.landing-download-card:nth-child(3)[data-revealed="true"] {
  animation-delay: 180ms;
}
.landing-pricing {
  color: var(--openbot-text-primary);
}
.landing-pricing-inner {
  width: min(100%, 1280px);
  margin: 0 auto;
  padding: clamp(96px, 10vw, 144px) clamp(20px, 4vw, 48px) clamp(24px, 4vw, 48px);
  text-align: center;
}
.landing-pricing-eyebrow {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: clamp(16px, 1.8vw, 19px);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.4;
}
.landing-pricing-amount {
  position: relative;
  isolation: isolate;
  margin: clamp(8px, 1.5vw, 20px) 0 clamp(28px, 4vw, 48px);
  font-size: clamp(8rem, 30vw, 22rem);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 0.9;
  color: transparent;
  background-image: linear-gradient( 180deg, var(--openbot-price-sheen-cool-clear) 36%, var(--openbot-price-sheen-cool-soft) 44%, var(--openbot-price-sheen-cool) 47.5%, var(--openbot-price-sheen-light) 50%, var(--openbot-price-sheen-warm) 52.5%, var(--openbot-price-sheen-warm-soft) 56%, var(--openbot-price-sheen-warm-clear) 64% ), linear-gradient( 180deg, var(--openbot-price-metal-high) 0%, var(--openbot-price-metal-core) 16%, var(--openbot-price-metal-core) 84%, var(--openbot-price-metal-low) 100% );
  background-repeat: no-repeat;
  background-size: 100% 200%, 100% 100%;
  background-position: 0 50%, 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  --price-bevel: drop-shadow(0 -1px 0 var(--openbot-price-rim)) drop-shadow(0 1px 0 var(--openbot-price-rim-under));
  filter: var(--price-bevel);
}
.landing-pricing-amount::before {
  content: attr(data-amount);
  position: absolute;
  inset: 0;
  z-index: -1;
  color: var(--openbot-price-glow);
  filter: blur(clamp(24px, 4vw, 56px));
}
.landing-pricing-note {
  max-width: 560px;
  margin: 0 auto;
  color: var(--openbot-text-secondary);
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.55;
  text-wrap: balance;
}
.landing-pricing-compare {
  margin: 20px 0 0;
  font-size: 15px;
  line-height: 1.5;
}
.landing-pricing-compare a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--openbot-text-secondary);
  text-decoration: none;
  transition: color 160ms ease;
}
.landing-pricing-compare a:hover, .landing-pricing-compare a:focus-visible {
  color: var(--openbot-text-primary);
}
.landing-pricing-compare-arrow {
  width: 16px;
  height: 16px;
  transition: transform 160ms ease;
}
.landing-pricing-compare a:hover .landing-pricing-compare-arrow {
  transform: translateX(2px);
}
.landing-pricing [data-revealed="false"] {
  opacity: 0;
}
.landing-pricing-eyebrow[data-revealed="true"], .landing-pricing-note[data-revealed="true"], .landing-pricing-compare[data-revealed="true"] {
  animation: landing-download-reveal 760ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.landing-pricing-note[data-revealed="true"] {
  animation-delay: 320ms;
}
.landing-pricing-compare[data-revealed="true"] {
  animation-delay: 440ms;
}
.landing-pricing-amount[data-revealed="true"] {
  animation: landing-price-enter 1200ms cubic-bezier(0.22, 1, 0.36, 1) 60ms backwards, landing-price-sheen 14s ease-in-out 1260ms infinite alternate;
}
.landing-section {
  --landing-card-border: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --landing-card-border: color-mix(in srgb, var(--openbot-text-primary) 8%, transparent);
  }
  --landing-card-border-hover: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --landing-card-border-hover: color-mix(in srgb, var(--openbot-text-primary) 16%, transparent);
  }
  --landing-card-fill: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --landing-card-fill: color-mix(in srgb, var(--openbot-text-primary) 5%, transparent);
  }
  color: var(--openbot-text-primary);
}
.landing-section-inner {
  width: min(100%, 1280px);
  margin: 0 auto;
  padding: clamp(96px, 10vw, 144px) clamp(20px, 4vw, 48px) 0;
}
.landing-section-heading {
  max-width: 720px;
}
.landing-section-heading :is(h1, h2) {
  margin: 0;
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 1;
}
.landing-section-heading p {
  max-width: 620px;
  margin: 22px 0 0;
  color: var(--openbot-text-secondary);
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.55;
  text-wrap: pretty;
}
.landing-features-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 16px;
  margin: clamp(48px, 6vw, 72px) 0 0;
  padding: 0;
  list-style: none;
}
.landing-section svg[data-provider] {
  color: var(--openbot-provider-current);
  fill: currentColor;
}
.landing-section svg[data-provider="antigravity"] {
  fill: url(#landing-gemini-gradient);
}
.landing-paint-servers {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.landing-feature {
  position: relative;
  min-width: 0;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--landing-card-border);
  border-radius: 28px;
  background: var(--openbot-bg-surface);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 6%);
  transition: border-color 200ms ease, background-color 200ms ease;
}
.landing-feature:hover {
  border-color: var(--landing-card-border-hover);
  background: var(--openbot-bg-surface-raised);
}
.landing-feature[data-feature="team"] {
  grid-column: 1 / 8;
  grid-row: 1 / 3;
}
.landing-feature[data-feature="providers"] {
  grid-column: 8 / 13;
  grid-row: 1;
}
.landing-feature[data-feature="local"] {
  grid-column: 8 / 13;
  grid-row: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  grid-template-areas: "copy visual";
  border-color: var(--openbot-download-card-border);
  background: var(--openbot-logo-production);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 30%);
  color: var(--openbot-text-on-light);
}
.landing-feature[data-feature="persist"] {
  grid-column: 1 / 6;
  grid-row: 3;
}
.landing-feature[data-feature="browser"] {
  grid-column: 6 / 10;
  grid-row: 3;
}
.landing-feature[data-feature="queue"] {
  grid-column: 10 / 13;
  grid-row: 3;
}
.landing-feature-visual {
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 32px 32px 0;
}
.landing-feature-copy {
  padding: 28px 32px 32px;
}
.landing-feature h3 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.15;
}
.landing-feature p {
  max-width: 44ch;
  margin: 10px 0 0;
  color: var(--openbot-text-secondary);
  font-size: 15px;
  line-height: 1.6;
  text-wrap: pretty;
}
.landing-feature[data-feature="local"] p {
  color: var(--openbot-download-card-muted);
}
.landing-feature-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: currentColor;
  @supports (color: color-mix(in lab, red, red)) {
    text-decoration-color: color-mix(in srgb, currentColor 38%, var(--openbot-transparent));
  }
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--openbot-duration-normal) ease;
}
.landing-feature-link:hover {
  color: var(--openbot-text-primary);
  text-decoration-color: currentColor;
}
.landing-window {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--landing-card-border);
  background: var(--openbot-bg-canvas);
  box-shadow: 0 24px 60px rgb(0 0 0 / 28%);
}
.landing-window-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--landing-card-border);
}
.landing-feature[data-feature="team"] .landing-feature-visual {
  display: flex;
  padding: 36px 0 0 36px;
}
.landing-team-window {
  flex: 1;
  margin-right: -24px;
  border-radius: 20px 0 0;
  mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent);
}
.landing-team-channel {
  font-size: 15px;
  font-weight: 600;
}
.landing-team-hash {
  margin-right: 6px;
  color: var(--openbot-text-muted);
  font-weight: 400;
}
.landing-team-stack {
  display: flex;
  margin-left: auto;
  padding-right: 24px;
}
.landing-team-stack > * + * {
  margin-left: -4px;
}
.landing-team {
  display: grid;
  gap: 20px;
  margin: 0;
  padding: 22px 28px 40px 22px;
  list-style: none;
}
.landing-team-message {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.landing-feature .landing-team-avatar {
  --landing-team-avatar-size: 46px;
  flex: none;
  display: grid;
  place-items: center;
  width: var(--landing-team-avatar-size);
  height: var(--landing-team-avatar-size);
  border-radius: var(--openbot-radius-pill);
}
.landing-feature .landing-team-avatar-small {
  --landing-team-avatar-size: 28px;
  box-shadow: 0 0 0 2px var(--openbot-bg-canvas);
  background: var(--openbot-bg-surface-raised);
}
.landing-feature .landing-team-avatar:empty {
  background: var(--landing-card-fill);
}
.landing-feature .landing-team-avatar > svg {
  display: block;
  width: 128%;
  height: 128%;
  overflow: visible;
  translate: 0 calc(var(--landing-team-avatar-size) * -0.14);
}
.landing-team-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding-top: 2px;
}
.landing-team-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.landing-team-name {
  font-size: 14px;
  font-weight: 600;
}
.landing-team-time {
  color: var(--openbot-text-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.landing-team-text {
  color: var(--openbot-text-secondary);
  font-size: 15px;
  line-height: 1.5;
}
.landing-team-system {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--openbot-text-muted);
  font-size: 12px;
  font-weight: 500;
}
.landing-team-system::before, .landing-team-system::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--landing-card-border);
}
.landing-team-next {
  display: grid;
}
.landing-team-next > * {
  grid-area: 1 / 1;
  transition: opacity 260ms ease, transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}
.landing-team-typing {
  display: inline-flex;
  align-self: start;
  justify-self: start;
  gap: 4px;
  margin-left: 60px;
  padding: 12px 14px;
  border-radius: var(--openbot-radius-pill);
  background: var(--landing-card-fill);
}
.landing-team-typing span {
  width: 6px;
  height: 6px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-muted);
  animation: landing-typing 1200ms ease-in-out infinite;
}
.landing-team-typing span:nth-child(2) {
  animation-delay: 150ms;
}
.landing-team-typing span:nth-child(3) {
  animation-delay: 300ms;
}
.landing-team-reply {
  opacity: 0;
  transform: translateY(10px);
}
.landing-feature[data-feature="team"]:hover .landing-team-typing {
  opacity: 0;
  transform: scale(0.85);
}
.landing-feature[data-feature="team"]:hover .landing-team-reply {
  opacity: 1;
  transform: none;
  transition-delay: 120ms;
}
.landing-feature[data-feature="providers"] .landing-feature-visual {
  padding: 36px 0 0;
}
.landing-marquee {
  width: 100%;
  display: grid;
  gap: 12px;
  padding-block: 4px;
  mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
}
.landing-marquee-row {
  min-width: 0;
  overflow-x: clip;
}
.landing-marquee-track {
  display: flex;
  gap: 10px;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: landing-marquee 36s linear infinite;
}
.landing-marquee-row + .landing-marquee-row .landing-marquee-track {
  animation-direction: reverse;
}
.landing-feature[data-feature="providers"]:hover .landing-marquee-track {
  animation-play-state: paused;
}
.landing-provider-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px 10px 12px;
  border: 1px solid var(--landing-card-border);
  border-radius: var(--openbot-radius-pill);
  background: var(--landing-card-fill);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}
.landing-provider-pill:hover {
  border-color: var(--openbot-provider-current);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--openbot-provider-current) 55%, transparent);
  }
  background: var(--openbot-provider-current);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-provider-current) 12%, transparent);
  }
  transform: translateY(-2px);
}
.landing-provider-pill-logo {
  width: 20px;
  height: 20px;
}
.landing-feature[data-feature="local"] .landing-feature-visual {
  grid-area: visual;
  align-self: end;
  display: block;
  place-items: normal;
  padding: 32px 0 0;
}
.landing-feature[data-feature="local"] .landing-feature-copy {
  grid-area: copy;
  align-self: end;
}
.landing-local-window {
  border-color: var(--openbot-download-card-border);
  border-right: 0;
  border-bottom: 0;
  border-radius: 16px 0 0;
  background: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-primary) 42%, transparent);
  }
  box-shadow: 0 20px 44px var(--openbot-text-on-light);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 20px 44px color-mix(in srgb, var(--openbot-text-on-light) 18%, transparent);
  }
}
.landing-local-window .landing-window-bar {
  padding: 11px 16px;
  border-bottom-color: var(--openbot-download-card-border);
}
.landing-local-title {
  font-size: 13px;
  font-weight: 600;
}
.landing-lock {
  width: 16px;
  height: 16px;
  margin-left: auto;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.landing-feature[data-feature="local"]:hover .landing-lock-shackle {
  animation: landing-lock-click 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
.landing-local-files {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 8px;
  list-style: none;
}
.landing-local-files li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 140ms ease;
}
.landing-local-files li:hover {
  background: var(--openbot-download-card-chip);
}
.landing-local-folder {
  flex: none;
  width: 17px;
  height: 17px;
  color: var(--openbot-download-card-muted);
}
.landing-feature[data-feature="persist"] .landing-feature-visual {
  place-items: end stretch;
}
.landing-persist-window {
  border-radius: 16px;
}
.landing-persist-window .landing-window-bar {
  gap: 10px;
  padding: 10px 12px 10px 14px;
}
.landing-persist-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 6px 10px 6px 9px;
  border: 1px solid var(--landing-card-border);
  border-radius: 10px;
  background: var(--landing-card-fill);
}
.landing-persist-swap {
  display: grid;
  overflow: hidden;
}
.landing-persist-provider {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: opacity 220ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.landing-persist-provider + .landing-persist-provider {
  opacity: 0;
  transform: translateY(100%);
}
.landing-feature[data-feature="persist"]:hover .landing-persist-provider {
  opacity: 0;
  transform: translateY(-100%);
}
.landing-feature[data-feature="persist"]:hover .landing-persist-provider + .landing-persist-provider {
  opacity: 1;
  transform: none;
}
.landing-persist-logo {
  flex: none;
  width: 14px;
  height: 14px;
}
.landing-persist-chevron {
  width: 14px;
  height: 14px;
  color: var(--openbot-text-muted);
}
.landing-persist-thread {
  height: 178px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 14px;
  margin: 0;
  padding: 16px 16px 18px;
  overflow: hidden;
  list-style: none;
  mask-image: linear-gradient(to bottom, transparent, #000 28px);
}
.landing-persist-request {
  align-self: flex-end;
  max-width: 85%;
  padding: 9px 14px;
  border-radius: 16px 16px 4px;
  background: var(--openbot-bg-surface-raised);
  font-size: 14px;
  line-height: 1.45;
}
.landing-persist-reply {
  display: grid;
  gap: 4px;
}
.landing-persist-reply .landing-team-text {
  font-size: 14px;
}
.landing-persist-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
}
.landing-persist-meta .landing-team-time {
  font-weight: 400;
}
.landing-persist-later {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: -14px;
  opacity: 0;
  transition: grid-template-rows 420ms cubic-bezier(0.22, 1, 0.36, 1), margin-top 420ms cubic-bezier(0.22, 1, 0.36, 1), opacity 260ms ease;
}
.landing-persist-later > ul {
  min-height: 0;
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
}
.landing-feature[data-feature="persist"]:hover .landing-persist-later {
  grid-template-rows: 1fr;
  margin-top: 0;
  opacity: 1;
  transition-delay: 160ms;
}
.landing-feature[data-feature="browser"] .landing-feature-visual {
  place-items: end stretch;
}
.landing-browser {
  position: relative;
  border-radius: 16px;
}
.landing-browser-tabs {
  display: flex;
  height: 34px;
  align-items: flex-end;
  gap: 2px;
  padding: 0 8px;
}
.landing-browser-tab {
  position: relative;
  display: flex;
  min-width: 0;
  width: 148px;
  height: 28px;
  flex: 0 1 148px;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  border-radius: 8px 8px 0 0;
  color: var(--openbot-text-muted);
  font-size: 12px;
}
.landing-browser-tab[data-controlled] {
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-primary);
}
.landing-browser-tab-title {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.landing-browser-tab > svg, .landing-browser-new svg {
  flex: none;
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.5;
}
.landing-browser-new {
  display: grid;
  width: 24px;
  height: 28px;
  place-items: center;
  color: var(--openbot-text-muted);
}
.landing-browser-control {
  display: grid;
  flex: none;
  color: var(--openbot-accent-text);
}
.landing-browser-control svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}
.landing-browser-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-muted);
}
.landing-browser-toolbar svg {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
}
.landing-browser-address {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  margin-left: 4px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-secondary);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.landing-browser-page {
  display: grid;
  justify-items: start;
  padding: 18px 20px 22px;
  background: var(--openbot-text-primary);
  color: var(--openbot-text-on-light);
}
.landing-browser-heading {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.landing-browser-label {
  margin-top: 12px;
  color: var(--openbot-text-on-light);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--openbot-text-on-light) 60%, transparent);
  }
  font-size: 11px;
  font-weight: 500;
}
.landing-browser-input {
  display: flex;
  align-items: center;
  width: 100%;
  height: 32px;
  margin-top: 5px;
  padding: 0 10px;
  border: 1px solid var(--openbot-text-on-light);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--openbot-text-on-light) 18%, transparent);
  }
  border-radius: 8px;
  font-size: 13px;
  transition: border-color 160ms ease;
}
.landing-browser-typed {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.landing-browser-caret {
  width: 1px;
  height: 15px;
  margin-left: 1px;
  background: currentColor;
  opacity: 0;
}
.landing-browser-submit {
  margin-top: 12px;
  padding: 7px 14px;
  border-radius: 8px;
  background: var(--openbot-text-on-light);
  color: var(--openbot-text-primary);
  font-size: 12px;
  font-weight: 600;
  transition: transform 140ms ease, opacity 140ms ease;
}
.landing-feature[data-feature="browser"]:hover .landing-browser-input {
  border-color: var(--openbot-text-on-light);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--openbot-text-on-light) 55%, transparent);
  }
}
.landing-feature[data-feature="browser"]:hover .landing-browser-typed {
  max-width: 16ch;
  transition: max-width 900ms steps(15) 200ms;
}
.landing-feature[data-feature="browser"]:hover .landing-browser-caret {
  animation: landing-caret 1s steps(1) infinite;
}
.landing-feature[data-feature="browser"]:hover .landing-browser-submit {
  animation: landing-press 240ms ease 1200ms;
}
.landing-feature[data-feature="queue"] .landing-feature-visual {
  place-items: end stretch;
}
.landing-queue {
  min-width: 0;
  min-height: 186px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.landing-queue-panel {
  position: relative;
  margin: 0 10px -14px;
  padding: 6px 5px 19px;
  border: 1px solid var(--openbot-queue-border);
  border-radius: 14px;
  background: var(--openbot-queue-surface);
}
.landing-queue-hold {
  display: block;
  overflow: hidden;
  padding: 0 8px 4px 9px;
  color: var(--openbot-text-muted);
  font-size: 12px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.landing-queue-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.landing-queue-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 29px;
  padding: 0 4px 0 8px;
  border-radius: 8px;
  color: var(--openbot-text-secondary);
  font-size: 13px;
  transition: background 140ms ease;
}
.landing-queue-row:hover {
  background: var(--openbot-bg-surface-raised);
}
.landing-queue-row svg {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.4;
}
.landing-queue-row > svg {
  color: var(--openbot-text-muted);
}
.landing-queue-text {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.landing-queue-actions {
  position: absolute;
  inset: 0 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px 0 24px;
  border-radius: 0 8px 8px 0;
  background: linear-gradient(to right, transparent, var(--openbot-bg-surface-raised) 20px);
  color: var(--openbot-text-muted);
  opacity: 0;
  transition: opacity 140ms ease;
}
.landing-queue-row:hover .landing-queue-actions {
  opacity: 1;
}
.landing-queue-steer {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--openbot-text-secondary);
  font-size: 12px;
  font-weight: 500;
}
.landing-queue-added {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 360ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease;
}
.landing-queue-added > .landing-queue-row {
  min-height: 0;
  height: auto;
  overflow: hidden;
}
.landing-queue-added > .landing-queue-row > * {
  margin-block: 6.5px;
}
.landing-feature[data-feature="queue"]:hover .landing-queue-added {
  grid-template-rows: 1fr;
  opacity: 1;
  transition-delay: 180ms;
}
.landing-queue-composer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 10px 14px;
  border: 1px solid var(--landing-card-border);
  border-radius: 16px;
  background: var(--openbot-bg-canvas);
  box-shadow: 0 18px 44px rgb(0 0 0 / 28%);
}
.landing-queue-input {
  min-width: 0;
  flex: 1;
  display: grid;
  font-size: 14px;
}
.landing-queue-input > * {
  grid-area: 1 / 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: opacity 200ms ease, transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.landing-queue-placeholder {
  color: var(--openbot-text-muted);
  opacity: 0;
}
.landing-feature[data-feature="queue"]:hover .landing-queue-draft {
  opacity: 0;
  transform: translateY(-10px);
}
.landing-feature[data-feature="queue"]:hover .landing-queue-placeholder {
  opacity: 1;
  transition-delay: 200ms;
}
.landing-queue-send {
  display: grid;
  width: 28px;
  height: 28px;
  flex: none;
  place-items: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-primary);
  color: var(--openbot-text-on-light);
  transition: transform 140ms ease, opacity 200ms ease;
}
.landing-queue-send-icon {
  width: 15px;
  height: 15px;
  rotate: -90deg;
}
.landing-feature[data-feature="queue"]:hover .landing-queue-send {
  opacity: 0.4;
  transform: scale(0.9);
}
.landing-faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
  gap: clamp(40px, 6vw, 96px);
}
.landing-faq-heading {
  position: sticky;
  top: 96px;
}
.landing-faq-contact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 28px;
  color: var(--openbot-text-primary);
  font-size: 15px;
  font-weight: 500;
  transition: color 160ms ease;
}
.landing-faq-contact:hover, .landing-faq-contact:focus-visible {
  color: var(--openbot-logo-production);
}
.landing-faq-contact-icon {
  width: 16px;
  height: 16px;
}
.landing-compare-links {
  margin-top: clamp(72px, 8vw, 112px);
}
.landing-compare-links h3 {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: 15px;
  font-weight: 500;
}
.landing-compare-links ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.landing-compare-links a {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--landing-card-border);
  border-radius: 18px;
  background: var(--openbot-bg-surface);
  font-size: 15px;
  font-weight: 500;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.landing-compare-links a:hover, .landing-compare-links a:focus-visible {
  border-color: var(--landing-card-border-hover);
  background: var(--openbot-bg-surface-raised);
}
.landing-compare-art {
  position: relative;
  display: flex;
  height: 92px;
  flex: none;
  align-items: center;
  justify-content: center;
}
.landing-compare-marks {
  position: relative;
  display: flex;
  pointer-events: none;
}
.landing-compare-mark {
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-canvas);
  box-shadow: 0 4px 14px rgb(0 0 0 / 24%);
}
.landing-compare-mark-rival {
  margin-left: -8px;
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-primary);
}
.landing-compare-label {
  min-width: 0;
  padding: 16px 44px 18px 20px;
}
.landing-compare-arrow {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 16px;
  height: 16px;
  color: var(--openbot-text-muted);
  transition: color 160ms ease, transform 160ms ease;
}
.landing-compare-links a:hover .landing-compare-arrow {
  color: var(--openbot-text-primary);
  transform: translateX(2px);
}
.landing-section[data-revealed="false"] :is(.landing-section-heading, .landing-feature, .compare-faq-item, .landing-compare-links li) {
  opacity: 0;
}
.landing-section[data-revealed="true"] :is(.landing-section-heading, .landing-feature, .compare-faq-item, .landing-compare-links li) {
  animation: landing-download-reveal 720ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(120ms + var(--landing-index, 0) * 80ms);
}
.landing-section[data-revealed="true"] .landing-section-heading {
  animation-delay: 0ms;
}
@media (max-width: 1100px) {
  .landing-features-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .landing-feature[data-feature] {
    grid-column: span 3;
    grid-row: auto;
  }
  .landing-feature:is([data-feature="team"], [data-feature="local"]) {
    grid-column: 1 / -1;
  }
  .landing-feature[data-feature="team"] .landing-feature-visual {
    min-height: 400px;
  }
  .landing-compare-links ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .landing-section-inner {
    padding: 88px 16px 0;
  }
  .landing-features-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .landing-feature[data-feature] {
    grid-column: auto;
  }
  .landing-feature[data-feature="team"] .landing-feature-visual {
    min-height: 360px;
    padding: 24px 0 0 20px;
  }
  .landing-feature-copy {
    padding: 24px 24px 28px;
  }
  .landing-marquee-row + .landing-marquee-row {
    display: none;
  }
  .landing-feature[data-feature="local"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "visual" "copy";
  }
  .landing-feature[data-feature="local"] .landing-feature-visual {
    padding: 24px 0 0 24px;
  }
  .landing-faq-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .landing-faq-heading {
    position: static;
  }
}
@media (max-width: 600px) {
  .landing-compare-links ul {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .landing-compare-links a {
    flex-direction: row;
    align-items: center;
  }
  .landing-compare-art {
    width: 96px;
    height: 64px;
  }
  .landing-compare-mark {
    width: 34px;
    height: 34px;
    padding: 7px;
  }
  .landing-compare-label {
    flex: 1;
    padding: 0 44px 0 16px;
  }
  .landing-compare-arrow {
    bottom: auto;
  }
}
.landing-footer {
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
}
.landing-footer-inner {
  width: min(100%, 1280px);
  margin: 0 auto;
  padding: clamp(53px, 5.6vw, 78px) clamp(20px, 4vw, 48px) 32px;
}
.landing-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(480px, 1.2fr);
  gap: clamp(56px, 8vw, 112px);
}
.landing-footer-brand {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.landing-footer-lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border-radius: var(--openbot-radius-md);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.landing-footer-lockup:focus-visible, .landing-footer-cta:focus-visible, .landing-footer-social:focus-visible, .landing-footer-column a:focus-visible, .landing-footer-meta a:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--openbot-accent-strong);
}
.landing-footer-logo {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
}
.landing-footer-description {
  max-width: 560px;
  margin: 32px 0 0;
  color: var(--openbot-text-primary);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.18;
  text-wrap: balance;
}
.landing-footer-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 28px;
  border-radius: var(--openbot-radius-md);
  color: var(--openbot-text-primary);
  font-size: 14px;
  font-weight: 500;
}
.landing-footer-cta svg, .landing-footer-meta a svg {
  width: 14px;
  height: 14px;
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.landing-footer-socials {
  display: flex;
  gap: 7px;
  margin-top: 32px;
}
.landing-footer-social {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-sidebar);
  color: var(--openbot-text-muted);
  transition: background-color var(--openbot-duration-normal) ease, color var(--openbot-duration-normal) ease;
}
.landing-footer-social svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.landing-footer-columns {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px);
  padding-top: 7px;
}
.landing-footer-column h2 {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.landing-footer-column ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.landing-footer-column a {
  border-radius: 4px;
  color: var(--openbot-text-secondary);
  font-size: 14px;
  transition: color var(--openbot-duration-normal) ease;
}
.landing-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: clamp(53px, 6.3vw, 84px);
  padding-top: 24px;
  border-top: 1px solid var(--openbot-border);
  color: var(--openbot-text-muted);
  font-size: 12px;
}
.landing-footer-bottom p {
  margin: 0;
}
.landing-footer-meta {
  display: flex;
  align-items: center;
  gap: 24px;
}
.landing-footer-meta a, .landing-footer-made {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.landing-footer-meta a {
  border-radius: 4px;
  transition: color var(--openbot-duration-normal) ease;
}
.landing-footer-availability {
  width: 7px;
  height: 7px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-logo-preview);
}
.landing-footer-made {
  font-family: var(--openbot-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.landing-footer-made svg {
  width: 14px;
  height: 14px;
  fill: var(--openbot-logo-production);
  color: var(--openbot-logo-production);
  animation: landing-footer-heart 1.8s ease-in-out infinite;
}
.landing-footer [data-revealed="false"] {
  opacity: 0;
}
.landing-footer [data-revealed="true"] {
  animation: landing-footer-reveal 900ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.landing-footer-columns[data-revealed="true"] {
  animation-delay: 120ms;
}
.landing-footer-bottom[data-revealed="true"] {
  animation-delay: 220ms;
}
.landing-glow {
  width: 100%;
  height: 55vh;
  min-height: 360px;
  overflow: hidden;
  pointer-events: none;
}
.landing-glow-rise {
  width: 100%;
  height: 100%;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--landing-glow-rise-ms, 1100ms) cubic-bezier(0.16, 1, 0.3, 1);
}
.landing-glow-svg {
  width: 100%;
  height: 100%;
  display: block;
}
@keyframes landing-footer-reveal {
  from {
    opacity: 0;
    filter: blur(6px);
    transform: translate3d(0, 6px, 0);
  }
  to {
    opacity: 1;
    filter: blur(0.001px);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes landing-marquee {
  to {
    transform: translateX(calc(-50% - 5px));
  }
}
@keyframes landing-lock-click {
  40% {
    transform: translateY(-3px);
  }
  75% {
    transform: translateY(1px);
  }
}
@keyframes landing-press {
  50% {
    opacity: 0.85;
    transform: scale(0.94);
  }
}
@keyframes landing-caret {
  50% {
    opacity: 1;
  }
}
@keyframes landing-typing {
  0%, 60%, 100% {
    opacity: 0.35;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-3px);
  }
}
@keyframes landing-download-reveal {
  from {
    opacity: 0;
    filter: blur(6px);
    transform: translate3d(0, 10px, 0);
  }
  to {
    opacity: 1;
    filter: blur(0.001px);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes landing-price-enter {
  from {
    opacity: 0;
    transform: scale(0.94) translate3d(0, 16px, 0);
    filter: blur(16px) var(--price-bevel);
    background-position: 0 0%, 0 0;
  }
  to {
    opacity: 1;
    transform: scale(1) translate3d(0, 0, 0);
    filter: blur(0.001px) var(--price-bevel);
    background-position: 0 42%, 0 0;
  }
}
@keyframes landing-price-sheen {
  from {
    background-position: 0 42%, 0 0;
  }
  to {
    background-position: 0 58%, 0 0;
  }
}
@keyframes landing-footer-heart {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.84);
  }
}
[data-enter] {
  animation: landing-enter var(--openbot-duration-overlay) var(--openbot-ease-out) both;
}
[data-enter="header"] {
  animation-name: landing-header-enter;
  animation-fill-mode: backwards;
}
[data-enter="preview"] {
  animation-delay: 110ms;
}
@keyframes landing-header-enter {
  from {
    transform: translateY(10px);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes landing-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes landing-download-menu-enter {
  from {
    opacity: 0;
    transform: translate(-50%, -4px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
@media (hover: hover) and (pointer: fine) {
  .landing-button {
    cursor: pointer;
  }
  .landing-button-primary:hover {
    background: var(--openbot-text-primary);
  }
  .landing-download-primary[data-state="available"]:hover, .landing-download-trigger:hover {
    opacity: 0.78;
  }
  .landing-download-trigger, .landing-download-menu-item {
    cursor: pointer;
  }
  .landing-download-menu-item:hover {
    background: var(--openbot-bg-surface);
    color: var(--openbot-text-primary);
  }
  .landing-button-secondary:hover {
    border-color: var(--openbot-text-dim);
    background: var(--openbot-bg-control-hover);
    color: var(--openbot-text-primary);
  }
  .landing-button-glass:hover {
    border-color: var(--openbot-glass-highlight);
    background: var(--openbot-glass-surface-hover);
    box-shadow: inset 0 1px 0 var(--openbot-glass-border), 0 14px 36px -18px var(--openbot-glass-shadow);
  }
  .landing-footer-cta:hover span {
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  .landing-download-card[data-state="available"]:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 44px -28px var(--openbot-text-on-light);
  }
  .landing-download-card[data-state="available"]:hover .landing-download-arrow {
    transform: translate(2px, -2px);
  }
  .landing-footer-social:hover {
    background: var(--openbot-bg-surface);
    color: var(--openbot-text-primary);
  }
  .landing-footer-column a:hover, .landing-footer-meta a:hover {
    color: var(--openbot-text-primary);
  }
}
@media (max-width: 900px) {
  .site-sheet-actions > .landing-button {
    flex: 1 1 0;
    height: 44px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-nav-pill, .site-nav-chevron, .site-panel-feature-art, .site-panel-plugin-mark, .site-panel-index svg, .site-menu-button-line {
    transition: none;
  }
  .site-nav-surface, .site-nav[data-state="open"] .site-nav-surface {
    transform: translateX(var(--site-nav-surface-x, 0));
    transition: opacity 160ms ease;
  }
  .site-nav-panel[data-motion] {
    --site-nav-shift: 0px;
    --site-nav-rise: 0px;
  }
  .site-sheet .site-sheet-section, .site-sheet .site-sheet-actions, .site-sheet[data-state="open"] .site-sheet-section, .site-sheet[data-state="open"] .site-sheet-actions {
    filter: none;
    transform: none;
    transition: opacity 200ms ease;
  }
}
@media (max-width: 959px) {
  .landing-preview {
    aspect-ratio: auto;
    height: 620px;
    max-height: none;
  }
  .landing-download-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .landing-download-card[data-download-platform="linux"] {
    min-height: 260px;
    grid-column: 1 / -1;
  }
}
@media (max-width: 840px) {
  .landing-footer-grid {
    grid-template-columns: 1fr;
  }
  .landing-footer-columns {
    max-width: 760px;
  }
  .landing-footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media (max-width: 640px) {
  .landing-header {
    min-height: 68px;
    flex-wrap: wrap;
    gap: 12px;
    row-gap: 10px;
    padding: 15px 16px;
  }
  .landing-brand {
    flex-shrink: 0;
    gap: 8px;
    font-size: 15px;
  }
  .landing-brand-logo {
    width: 25px;
    height: 25px;
  }
  .landing-hero {
    padding: 60px 16px 48px;
  }
  .landing-hero-grid {
    background-size: 36px 36px;
    mask-image: radial-gradient(100% 66% at 50% 36%, var(--openbot-mask-solid) 34%, var(--openbot-transparent) 100%);
  }
  .landing-description {
    margin-top: 24px;
    font-size: 16px;
    line-height: 1.5;
  }
  .landing-actions {
    width: 100%;
    flex-direction: column;
    margin-top: 28px;
  }
  .landing-actions .landing-button {
    width: min(100%, 320px);
  }
  .landing-download-selector, .landing-download-split {
    width: min(100%, 320px);
  }
  .landing-download-primary {
    flex: 1;
  }
  .landing-download-menu {
    width: 100%;
  }
  .landing-download-selector[data-open="true"] + .landing-button {
    visibility: hidden;
  }
  .landing-availability {
    margin-bottom: 24px;
    gap: 6px;
    padding: 3px 9px 3px 3px;
    font-size: 10px;
  }
  .landing-availability-new {
    min-height: 23px;
    padding-inline: 7px;
    font-size: 8px;
  }
  .landing-availability-copy {
    display: none;
  }
  .landing-availability-platform {
    gap: 3px;
  }
  .landing-availability-platform svg {
    width: 11px;
    height: 11px;
  }
  .landing-preview {
    height: 590px;
    margin-top: 64px;
  }
  .landing-preview-window-controls {
    display: none;
  }
  .landing-pricing-inner {
    padding: 88px 16px 24px;
  }
  .landing-download-inner {
    padding: 88px 16px 32px;
  }
  .landing-download-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 42px;
  }
  .landing-download-grid-mobile {
    margin-top: 14px;
  }
  .landing-download-card, .landing-download-card[data-download-platform="linux"] {
    min-height: 360px;
    grid-column: auto;
    padding: 26px;
  }
  .landing-download-grid-mobile .landing-download-card {
    min-height: 300px;
  }
  .landing-footer-inner {
    padding: 72px 16px 28px;
  }
  .landing-footer-grid {
    gap: 64px;
  }
  .landing-footer-description {
    font-size: 25px;
  }
  .landing-footer-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }
  .landing-footer-bottom {
    margin-top: 72px;
  }
  .landing-footer-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }
  .landing-glow {
    min-height: 300px;
  }
}
@media (max-width: 400px) {
  .landing-availability {
    gap: 4px;
  }
  .landing-availability-divider {
    margin-inline: 1px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto;
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
  }
  .landing-footer [data-revealed] {
    opacity: 1;
    animation: none;
  }
  .landing-download [data-revealed] {
    opacity: 1;
    animation: none;
  }
  .landing-pricing [data-revealed] {
    opacity: 1;
    animation: none;
  }
  .landing-section[data-revealed] :is(.landing-section-heading, .landing-feature, .compare-faq-item, .landing-compare-links li) {
    opacity: 1;
    animation: none;
  }
  .landing-marquee-track, .landing-team-typing span, .landing-feature[data-feature="local"]:hover .landing-lock-shackle, .landing-feature[data-feature="browser"]:hover :is(.landing-browser-caret, .landing-browser-submit) {
    animation: none;
  }
  .landing-footer-made svg {
    animation: none;
  }
  .landing-glow-rise {
    transform: scaleY(1);
    transition: none;
  }
}
.landing-network {
  overflow: hidden;
}
.landing-network-stage {
  --landing-network-top: 30%;
  position: relative;
  height: clamp(620px, calc(100svh - 24px), 920px);
  margin-top: clamp(64px, 8vw, 120px);
}
.landing-network-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  --landing-network-mask: linear-gradient(
      to bottom,
      transparent var(--landing-network-top),
      var(--openbot-mask-solid) calc(var(--landing-network-top) + 96px),
      var(--openbot-mask-solid) calc(100% - 120px),
      transparent
    ),
    radial-gradient(ellipse 72% 78% at 50% 55%, var(--openbot-mask-solid) 60%, transparent 100%);
  -webkit-mask-image: var(--landing-network-mask);
  -webkit-mask-composite: source-in;
  mask-image: var(--landing-network-mask);
  mask-composite: intersect;
}
.landing-network-heading {
  position: relative;
  margin-inline: auto;
  padding: 0 clamp(20px, 4vw, 48px);
  text-align: center;
}
.landing-network-heading .landing-network-description {
  margin-inline: auto;
}
.landing-network[data-playing="false"] :is(.landing-network-word, .landing-network-description) {
  opacity: 0;
}
.landing-network[data-playing="true"] .landing-network-word {
  animation: landing-network-word 640ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(var(--landing-network-word) * 90ms);
}
.landing-network[data-playing="true"] .landing-network-description {
  animation: landing-download-reveal 720ms cubic-bezier(0.22, 1, 0.36, 1) 560ms backwards;
}
@media (prefers-reduced-motion: reduce) {
  .landing-network[data-playing="true"] :is(.landing-network-word, .landing-network-description) {
    animation: none;
  }
}
@keyframes landing-network-word {
  from {
    opacity: 0;
    color: var(--openbot-text-muted);
    filter: blur(var(--reveal-blur));
  }
  55% {
    color: var(--openbot-text-muted);
  }
}
.landing-network-marks {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.landing-teams {
  --landing-teams-top: 96px;
  --landing-teams-step: 64px;
}
.landing-teams [data-offer="servers"] {
  --landing-teams-color: var(--openbot-logo-production);
}
.landing-teams [data-offer="environments"] {
  --landing-teams-color: var(--openbot-logo-preview);
}
.landing-teams [data-offer="integrations"] {
  --landing-teams-color: var(--openbot-logo-dev);
}
.landing-teams [data-offer="support"] {
  --landing-teams-color: var(--download-ios-color);
}
.landing-teams-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 96px);
}
.landing-teams-aside {
  position: sticky;
  top: var(--landing-teams-top);
  align-self: start;
}
.landing-teams-title {
  text-wrap: balance;
}
.landing-section-heading .landing-teams-statement {
  margin-top: 20px;
  color: var(--openbot-text-primary);
  font-size: clamp(19px, 1.8vw, 22px);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.landing-section-heading .landing-teams-description {
  max-width: 36ch;
  margin-top: 10px;
}
.landing-teams-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.landing-teams-progress {
  display: grid;
  margin: 48px 0 0;
  padding: 0;
  border-left: 1px solid var(--landing-card-border);
  list-style: none;
}
.landing-teams-progress-item {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 10px 0 10px 20px;
  color: var(--openbot-text-muted);
  font-size: 14px;
  font-weight: 500;
  transition: color var(--openbot-duration-normal) ease;
}
.landing-teams-progress-item::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: -1px;
  width: 2px;
  border-radius: var(--openbot-radius-pill);
  background: var(--landing-teams-color);
  scale: 1 0;
  transition: scale var(--openbot-duration-normal) var(--openbot-ease-out);
}
.landing-teams-progress-item[data-active] {
  color: var(--openbot-text-primary);
}
.landing-teams-progress-item[data-active]::before {
  scale: 1 1;
}
.landing-teams-progress-number {
  font-family: var(--openbot-font-mono);
  font-size: 11px;
  font-weight: 600;
}
.landing-teams-stack {
  display: grid;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.landing-teams-card {
  position: sticky;
  top: calc(var(--landing-teams-top) + var(--landing-teams-card) * var(--landing-teams-step));
  isolation: isolate;
  min-height: 380px;
  display: grid;
  grid-template-rows: var(--landing-teams-step) 1fr auto;
  overflow: hidden;
  padding: 0 clamp(26px, 3vw, 40px) clamp(26px, 3vw, 40px);
  border: 1px solid var(--openbot-download-card-border);
  border-radius: 28px;
  background: var(--landing-teams-color);
  box-shadow: 0 -20px 40px -28px rgb(0 0 0 / 70%);
  color: var(--openbot-text-on-light);
  transform-origin: top center;
  scale: calc(1 - var(--landing-teams-covered, 0) * 0.05);
  filter: brightness(calc(1 - var(--landing-teams-covered, 0) * 0.22));
}
.landing-teams-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: linear-gradient(var(--openbot-text-on-light) 1px, transparent 1px), linear-gradient(90deg, var(--openbot-text-on-light) 1px, transparent 1px);
  @supports (color: color-mix(in lab, red, red)) {
    background-image: linear-gradient(color-mix(in srgb, var(--openbot-text-on-light) 7%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--openbot-text-on-light) 7%, transparent) 1px, transparent 1px);
  }
  background-position: -1px -1px;
  background-size: 28px 28px;
  mask-image: radial-gradient( 120% 100% at 85% 25%, var(--openbot-mask-solid) 15%, var(--openbot-mask-solid) 100% );
  @supports (color: color-mix(in lab, red, red)) {
    mask-image: radial-gradient( 120% 100% at 85% 25%, var(--openbot-mask-solid) 15%, color-mix(in srgb, var(--openbot-mask-solid) 35%, transparent) 100% );
  }
  pointer-events: none;
}
.landing-teams-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.landing-teams-card-number {
  font-family: var(--openbot-font-mono);
  font-size: 12px;
  font-weight: 600;
  opacity: 0.6;
}
.landing-teams-card-icon {
  position: absolute;
  z-index: -1;
  top: calc(var(--landing-teams-step) + 4px);
  right: clamp(26px, 3vw, 40px);
  width: clamp(130px, 15vw, 200px);
  height: clamp(130px, 15vw, 200px);
  stroke-width: 0.75;
  opacity: 0.85;
}
.landing-teams-card-copy {
  grid-row: 3;
}
.landing-teams-card-title {
  max-width: 12ch;
  margin: 0;
  font-size: clamp(34px, 4vw, 56px);
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 0.98;
  text-wrap: balance;
}
.landing-teams-card-description {
  max-width: 34ch;
  margin: 16px 0 0;
  color: var(--openbot-download-card-muted);
  font-size: 16px;
  line-height: 1.5;
  text-wrap: pretty;
}
@media (prefers-reduced-motion: reduce) {
  .landing-teams-card {
    scale: none;
  }
  .landing-teams-progress-item, .landing-teams-progress-item::before {
    transition: none;
  }
}
@media (max-width: 900px) {
  .landing-teams {
    --landing-teams-top: 16px;
    --landing-teams-step: 52px;
  }
  .landing-teams-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .landing-teams-aside {
    position: static;
  }
  .landing-teams-progress {
    display: none;
  }
  .landing-teams-stack {
    gap: 16px;
  }
  .landing-teams-card {
    min-height: 320px;
    border-radius: 24px;
  }
  .landing-teams-card-icon {
    width: 110px;
    height: 110px;
    stroke-width: 0.9;
  }
}
.teams-page {
  --landing-card-border: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --landing-card-border: color-mix(in srgb, var(--openbot-text-primary) 8%, transparent);
  }
  --landing-card-border-hover: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --landing-card-border-hover: color-mix(in srgb, var(--openbot-text-primary) 16%, transparent);
  }
  --landing-card-fill: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --landing-card-fill: color-mix(in srgb, var(--openbot-text-primary) 5%, transparent);
  }
  --teams-soft-grid: linear-gradient(var(--openbot-text-on-light) 1px, transparent 1px),
    linear-gradient(90deg, var(--openbot-text-on-light) 1px, transparent 1px);
  @supports (color: color-mix(in lab, red, red)) {
    --teams-soft-grid: linear-gradient(color-mix(in srgb, var(--openbot-text-on-light) 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--openbot-text-on-light) 7%, transparent) 1px, transparent 1px);
  }
  color: var(--openbot-text-primary);
}
.teams-page .teams-main {
  padding-bottom: 0;
}
.teams-page [data-setup="local"], .teams-page [data-tile="0"], .teams-page [data-cursor="0"] {
  --teams-color: var(--openbot-logo-production);
}
.teams-page [data-setup="managed"], .teams-page [data-tile="1"], .teams-page [data-cursor="1"] {
  --teams-color: var(--openbot-logo-preview);
}
.teams-page [data-setup="custom"], .teams-page [data-tile="2"], .teams-page [data-cursor="2"] {
  --teams-color: var(--openbot-logo-dev);
}
.teams-page [data-tile="3"] {
  --teams-color: var(--download-ios-color);
}
.teams-page .teams-section {
  position: relative;
  isolation: isolate;
  width: min(100%, 1280px);
  margin: 0 auto;
  padding: clamp(96px, 10vw, 144px) clamp(20px, 4vw, 48px) 0;
}
.teams-page .teams-heading {
  max-width: 760px;
}
.teams-page .teams-heading-center {
  margin-inline: auto;
  text-align: center;
}
.teams-page .teams-heading h2 {
  margin: 0;
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 1;
  text-wrap: balance;
}
.teams-page .teams-heading p {
  max-width: 560px;
  margin: 22px 0 0;
  color: var(--openbot-text-secondary);
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.55;
  text-wrap: pretty;
}
.teams-page .teams-heading-center p {
  margin-inline: auto;
}
.teams-page .teams-help {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 16px;
  margin: 32px 0 0;
  color: var(--openbot-text-secondary);
  font-size: 16px;
}
.teams-page .teams-section[data-revealed="false"] > * {
  opacity: 0;
}
.teams-page .teams-section[data-revealed="true"] > * {
  animation: landing-download-reveal 720ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.teams-page .teams-section[data-revealed="true"] > :nth-child(2) {
  animation-delay: 120ms;
}
.teams-page .teams-section[data-revealed="true"] > :nth-child(3) {
  animation-delay: 240ms;
}
@property --teams-pill-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.teams-page .teams-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 28px;
  padding: 5px 14px 5px 6px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-sidebar);
  color: var(--openbot-text-secondary);
  font-size: 12px;
  font-weight: 500;
}
.teams-page .teams-pill::before, .teams-page .teams-pill::after {
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient( from var(--teams-pill-angle), transparent 0deg 190deg, var(--openbot-logo-production) 250deg, var(--openbot-logo-preview) 295deg, var(--openbot-logo-dev) 340deg, transparent 360deg );
  content: "";
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  animation: teams-pill-turn 5s linear infinite;
}
.teams-page .teams-pill::after {
  inset: -3px;
  padding: 3px;
  filter: blur(6px);
  opacity: 0.7;
}
.teams-page .teams-pill-dots {
  display: inline-flex;
}
.teams-page .teams-pill-dots span {
  width: 16px;
  height: 16px;
  border: 2px solid var(--openbot-bg-sidebar);
  border-radius: var(--openbot-radius-pill);
  background: var(--teams-color);
  animation: teams-pill-hop 2.8s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
.teams-page .teams-pill-dots span + span {
  margin-left: -6px;
}
.teams-page .teams-pill-dots span:nth-child(2) {
  animation-delay: 140ms;
}
.teams-page .teams-pill-dots span:nth-child(3) {
  animation-delay: 280ms;
}
.teams-page .teams-pill-label {
  background: linear-gradient( 100deg, var(--openbot-text-secondary) 42%, var(--openbot-text-primary) 50%, var(--openbot-text-secondary) 58% ) 0 0 / 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: teams-pill-sheen 5s ease-in-out infinite;
}
@keyframes teams-pill-turn {
  to {
    --teams-pill-angle: 360deg;
  }
}
@keyframes teams-pill-hop {
  0%, 30%, 100% {
    transform: none;
  }
  12% {
    transform: translateY(-4px) scale(1.12);
  }
}
@keyframes teams-pill-sheen {
  0% {
    background-position: 100% 0;
  }
  45%, 100% {
    background-position: 0 0;
  }
}
.teams-page .teams-hero {
  padding-bottom: 24px;
}
.teams-page .teams-title {
  max-width: 17ch;
  margin: 0;
  font-size: clamp(46px, 7.2vw, 104px);
  font-weight: 500;
  letter-spacing: -0.06em;
  line-height: 0.95;
  text-wrap: balance;
}
.teams-page .teams-setups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: clamp(48px, 6vw, 72px) 0 0;
  padding: 0;
  list-style: none;
}
.teams-page .teams-setup {
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 440px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: clamp(26px, 2.6vw, 34px);
  border: 1px solid var(--openbot-download-card-border);
  border-radius: 28px;
  background: var(--teams-color);
  color: var(--openbot-text-on-light);
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.teams-page .teams-setup::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: var(--teams-soft-grid);
  background-size: 28px 28px;
  mask-image: radial-gradient(90% 70% at 20% 15%, var(--openbot-mask-solid) 10%, transparent 100%);
  pointer-events: none;
}
.teams-page .teams-setup:hover {
  transform: translateY(-6px);
}
.teams-page .teams-setup-icon {
  width: clamp(76px, 7vw, 96px);
  height: clamp(76px, 7vw, 96px);
  stroke-width: 1;
}
.teams-page .teams-setup .landing-download-card-copy h3 {
  text-wrap: balance;
}
.teams-page .teams-setup .landing-download-card-copy p {
  font-size: 15px;
  text-wrap: pretty;
}
.teams-page .teams-bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.teams-page .teams-tile {
  min-width: 0;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--landing-card-border);
  border-radius: 28px;
  background: var(--openbot-bg-surface);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 6%);
  transition: border-color 200ms ease, background-color 200ms ease;
}
.teams-page .teams-tile:hover {
  border-color: var(--landing-card-border-hover);
  background: var(--openbot-bg-surface-raised);
}
.teams-page .teams-tile[data-tile="0"] {
  grid-column: 1 / 8;
}
.teams-page .teams-tile[data-tile="1"] {
  grid-column: 8 / 13;
}
.teams-page .teams-tile[data-tile="2"] {
  grid-column: 1 / 6;
}
.teams-page .teams-tile[data-tile="3"] {
  grid-column: 6 / 13;
}
.teams-page .teams-tile-art {
  position: relative;
  flex: 1;
  min-height: 170px;
  display: grid;
  place-items: center;
  background: radial-gradient(50% 70% at 50% 60%, var(--teams-color), transparent 70%), linear-gradient(90deg, var(--openbot-hero-grid-line) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(var(--openbot-hero-grid-line) 1px, transparent 1px) 0 0 / 32px 32px;
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient(50% 70% at 50% 60%, color-mix(in srgb, var(--teams-color) 22%, transparent), transparent 70%), linear-gradient(90deg, var(--openbot-hero-grid-line) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(var(--openbot-hero-grid-line) 1px, transparent 1px) 0 0 / 32px 32px;
  }
  mask-image: linear-gradient(var(--openbot-mask-solid) 55%, transparent);
}
.teams-page .teams-tile-art svg {
  width: 88px;
  height: 88px;
  padding: 20px;
  border: 1px solid var(--openbot-download-card-border);
  border-radius: 24px;
  background: var(--teams-color);
  box-shadow: 0 20px 50px -18px var(--teams-color);
  color: var(--openbot-text-on-light);
  stroke-width: 1.6;
  transition: transform 400ms var(--openbot-ease-out);
}
.teams-page .teams-tile:hover .teams-tile-art svg {
  transform: translateY(-6px) rotate(-4deg);
}
.teams-page .teams-tile-copy {
  padding: 8px 32px 32px;
}
.teams-page .teams-tile-copy h2 {
  margin: 0;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.15;
}
.teams-page .teams-tile-copy p {
  max-width: 48ch;
  margin: 10px 0 0;
  color: var(--openbot-text-secondary);
  font-size: 15px;
  line-height: 1.6;
  text-wrap: pretty;
}
.teams-page .teams-timeline {
  position: relative;
  margin: clamp(56px, 7vw, 88px) 0 0;
}
.teams-page .teams-timeline-line {
  position: absolute;
  top: 27px;
  right: 10%;
  left: 10%;
  height: 2px;
  background: var(--landing-card-border-hover);
  pointer-events: none;
}
.teams-page .teams-timeline-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient( 90deg, var(--openbot-logo-production), var(--openbot-logo-preview), var(--openbot-logo-dev), var(--download-ios-color) );
  transform-origin: left;
}
.teams-page .teams-timeline-spark {
  position: absolute;
  top: 50%;
  left: 0;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--openbot-text-primary);
  box-shadow: 0 0 10px 3px var(--openbot-logo-preview), 0 0 36px 12px var(--openbot-logo-production);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 10px 3px color-mix(in srgb, var(--openbot-logo-preview) 80%, transparent), 0 0 36px 12px color-mix(in srgb, var(--openbot-logo-production) 45%, transparent);
  }
  opacity: 0;
}
.teams-page .teams-timeline-spark::before {
  position: absolute;
  top: 50%;
  right: 50%;
  width: 160px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--openbot-text-primary));
  content: "";
  translate: 0 -50%;
}
.teams-page .teams-timeline-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.teams-page .teams-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.teams-page .teams-step-node {
  position: relative;
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border-radius: 50%;
  background: var(--teams-color);
  box-shadow: 0 0 0 10px var(--openbot-bg-canvas), 0 0 36px 6px var(--teams-color);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 10px var(--openbot-bg-canvas), 0 0 36px 6px color-mix(in srgb, var(--teams-color) 40%, transparent);
  }
  color: var(--openbot-text-on-light);
}
.teams-page .teams-step-node::after {
  position: absolute;
  inset: 0;
  border: 2px solid var(--teams-color);
  border-radius: 50%;
  content: "";
  opacity: 0;
}
.teams-page .teams-step-node svg {
  width: 24px;
  height: 24px;
}
.teams-page .teams-step-number {
  margin: 26px 0 0;
  color: var(--openbot-text-muted);
  font-family: var(--openbot-font-mono);
  font-size: 12px;
  font-weight: 600;
}
.teams-page .teams-step-title {
  max-width: 16ch;
  margin: 10px 0 0;
  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.25;
  text-wrap: balance;
}
.teams-page [data-play="false"] .teams-timeline-fill {
  transform: scaleX(0);
}
.teams-page [data-play="false"] .teams-step-node {
  background: var(--openbot-bg-surface-raised);
  box-shadow: 0 0 0 10px var(--openbot-bg-canvas);
  color: transparent;
  transform: scale(0.5);
}
.teams-page [data-play="false"] :is(.teams-step-number, .teams-step-title) {
  opacity: 0;
}
.teams-page [data-play="true"] .teams-timeline-fill {
  animation: teams-timeline-fill 2000ms linear 200ms backwards;
}
.teams-page [data-play="true"] .teams-timeline-spark {
  animation: teams-timeline-spark-x 2000ms linear 200ms both;
}
.teams-page [data-play="true"] .teams-step-node {
  animation: teams-step-pop 760ms cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
  animation-delay: calc(200ms + var(--teams-index) * 500ms);
}
.teams-page [data-play="true"] .teams-step-node::after {
  animation: teams-step-burst 900ms ease-out forwards;
  animation-delay: calc(200ms + var(--teams-index) * 500ms);
}
.teams-page [data-play="true"] :is(.teams-step-number, .teams-step-title) {
  animation: landing-download-reveal 720ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(320ms + var(--teams-index) * 500ms);
}
@keyframes teams-timeline-fill {
  from {
    transform: scaleX(0);
  }
}
@keyframes teams-timeline-spark-x {
  from {
    left: 0;
    opacity: 0;
  }
  6%, 94% {
    opacity: 1;
  }
  to {
    left: 100%;
    opacity: 0;
  }
}
@keyframes teams-step-pop {
  from {
    background: var(--openbot-bg-surface-raised);
    box-shadow: 0 0 0 10px var(--openbot-bg-canvas);
    color: transparent;
    transform: scale(0.5);
  }
  55% {
    transform: scale(1.22);
  }
}
@keyframes teams-step-burst {
  from {
    opacity: 0.9;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(2.4);
  }
}
.teams-page .teams-marquee {
  display: grid;
  gap: 16px;
  margin: clamp(48px, 6vw, 72px) calc(clamp(20px, 4vw, 48px) * -1) 0;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.teams-page .teams-marquee-row {
  overflow: hidden;
}
.teams-page [data-revealed="false"] .teams-marquee-row {
  opacity: 0;
}
.teams-page [data-revealed="true"] .teams-marquee-row {
  animation: landing-download-reveal 720ms cubic-bezier(0.22, 1, 0.36, 1) 200ms backwards;
}
.teams-page [data-revealed="true"] .teams-marquee-row[data-row="1"] {
  animation-delay: 340ms;
}
.teams-page .teams-marquee-track {
  display: flex;
  width: max-content;
  animation: teams-marquee-scroll 48s linear infinite;
}
.teams-page .teams-marquee-row[data-row="1"] .teams-marquee-track {
  animation-direction: reverse;
  animation-duration: 40s;
}
.teams-page .teams-marquee-row:hover .teams-marquee-track {
  animation-play-state: paused;
}
.teams-page .teams-marquee-group {
  display: flex;
  gap: 16px;
  padding-right: 16px;
}
.teams-page .teams-chip {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 12px 28px 12px 12px;
  border: 1px solid var(--landing-card-border);
  border-radius: var(--openbot-radius-pill);
  background: var(--landing-card-fill);
  color: var(--openbot-text-secondary);
  font-size: clamp(17px, 1.6vw, 21px);
  white-space: nowrap;
  transition: border-color var(--openbot-duration-normal) var(--openbot-ease-out), background-color var(--openbot-duration-normal) var(--openbot-ease-out);
}
.teams-page .teams-chip:hover {
  border-color: var(--teams-color);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--teams-color) 50%, transparent);
  }
  background: var(--teams-color);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--teams-color) 12%, transparent);
  }
}
.teams-page .teams-chip strong {
  color: var(--openbot-text-primary);
  font-weight: 600;
}
.teams-page .teams-chip-icon {
  display: grid;
  width: 48px;
  height: 48px;
  flex: none;
  place-items: center;
  border-radius: 50%;
  background: var(--teams-color);
  color: var(--openbot-text-on-light);
}
.teams-page .teams-chip-icon svg {
  width: 22px;
  height: 22px;
}
@keyframes teams-marquee-scroll {
  to {
    transform: translateX(-50%);
  }
}
.teams-page .teams-closing {
  display: grid;
  justify-items: center;
  gap: 36px;
  padding-bottom: clamp(80px, 9vw, 128px);
  text-align: center;
}
.teams-page .teams-closing h2 {
  position: relative;
  z-index: 1;
  max-width: 16ch;
  margin: 0;
  font-size: clamp(40px, 6vw, 84px);
  font-weight: 500;
  letter-spacing: -0.06em;
  line-height: 0.98;
  text-wrap: balance;
}
.teams-page .teams-closing-spot {
  --openbot-hero-grid-line: var(--openbot-logo-preview);
  @supports (color: color-mix(in lab, red, red)) {
    --openbot-hero-grid-line: color-mix(in srgb, var(--openbot-logo-preview) 60%, transparent);
  }
  mask-image: radial-gradient( 220px circle at var(--teams-x, -999px) var(--teams-y, -999px), var(--openbot-mask-solid), var(--openbot-transparent) );
}
.teams-page .teams-closing-word {
  --teams-on: clamp(0, calc((var(--teams-progress, 0) * (var(--teams-count) + 3) - var(--teams-word)) / 3), 1);
  --teams-ease: calc(var(--teams-on) * var(--teams-on) * (3 - 2 * var(--teams-on)));
  display: inline-block;
  opacity: calc(0.4 + var(--teams-ease) * 0.6);
  filter: blur(calc((1 - var(--teams-ease)) * 6px));
  transform: translateY(calc((1 - var(--teams-ease)) * 0.16em));
}
.teams-page .teams-closing-word[data-accent] {
  background: linear-gradient(100deg, var(--openbot-logo-production), var(--openbot-logo-preview));
  background-clip: text;
  color: transparent;
}
.teams-page .teams-closing-action {
  --teams-rise: clamp(0, calc((var(--teams-progress, 0) - 0.7) / 0.3), 1);
  position: relative;
  z-index: 1;
  transform: translateY(calc((1 - var(--teams-rise)) * 14px)) scale(calc(0.97 + var(--teams-rise) * 0.03));
}
.teams-page .teams-closing-action::before {
  position: absolute;
  inset: -8px -14px;
  z-index: -1;
  border-radius: var(--openbot-radius-pill);
  background: linear-gradient( 100deg, var(--openbot-logo-production), var(--openbot-logo-preview) 50%, var(--openbot-logo-dev) );
  content: "";
  filter: blur(18px);
  opacity: 0;
  scale: 0.85;
  transition: opacity 1200ms var(--openbot-ease-out), scale 1200ms var(--openbot-ease-out);
}
.teams-page .teams-closing[data-done="true"] .teams-closing-action::before {
  opacity: 0.5;
  scale: 1;
  animation: teams-closing-breathe 4.8s ease-in-out 1200ms infinite alternate;
}
@keyframes teams-closing-breathe {
  from {
    opacity: 0.5;
    scale: 1;
  }
  to {
    opacity: 0.22;
    scale: 1.08;
  }
}
.teams-page .teams-avatar {
  --teams-avatar-size: 0.7em;
  flex: none;
  display: grid;
  place-items: center;
  width: var(--teams-avatar-size);
  height: var(--teams-avatar-size);
  border-radius: var(--openbot-radius-pill);
}
.teams-page .teams-avatar:empty {
  background: var(--landing-card-fill);
}
.teams-page .teams-avatar > svg {
  display: block;
  width: 128%;
  height: 128%;
  overflow: visible;
  translate: 0 calc(var(--teams-avatar-size) * -0.14);
}
.teams-page .teams-title-keep {
  white-space: nowrap;
}
.teams-page .teams-title-team {
  display: inline-flex;
  vertical-align: -0.26em;
}
.teams-page .teams-title-team > * + * {
  margin-left: -0.06em;
}
.teams-page .teams-cursors {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
}
.teams-page .teams-cursor {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: flex-start;
  opacity: 0;
  transition: opacity 400ms ease;
  will-change: transform;
}
.teams-page .teams-cursor[data-placed] {
  opacity: 1;
}
.teams-page .teams-cursor-arrow {
  width: 30px;
  height: 30px;
  fill: var(--teams-color);
  stroke: var(--openbot-bg-canvas);
  stroke-width: 1.5;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 4px rgb(0 0 0 / 35%));
  transform: rotate(var(--teams-lean, 0deg));
  transform-origin: 4px 3px;
}
.teams-page .teams-cursor-name {
  margin: 22px 0 0 -6px;
  padding: 6px 13px;
  border-radius: var(--openbot-radius-pill);
  background: var(--teams-color);
  box-shadow: 0 4px 12px rgb(0 0 0 / 25%);
  color: var(--openbot-text-on-light);
  font-size: 14px;
  font-weight: 600;
}
@media (max-width: 900px) {
  .teams-page .teams-setups {
    grid-template-columns: minmax(0, 1fr);
  }
  .teams-page .teams-setup {
    min-height: 320px;
    border-radius: 24px;
  }
  .teams-page .teams-tile[data-tile] {
    grid-column: 1 / -1;
  }
  .teams-page .teams-chip {
    gap: 12px;
    padding: 8px 20px 8px 8px;
  }
  .teams-page .teams-chip-icon {
    width: 38px;
    height: 38px;
  }
  .teams-page .teams-timeline-track {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .teams-page .teams-timeline-line {
    top: 28px;
    right: auto;
    bottom: 28px;
    left: 27px;
    width: 2px;
    height: auto;
  }
  .teams-page .teams-timeline-fill {
    background: linear-gradient( 180deg, var(--openbot-logo-production), var(--openbot-logo-preview), var(--openbot-logo-dev), var(--download-ios-color) );
    transform-origin: top;
  }
  .teams-page [data-play="false"] .teams-timeline-fill {
    transform: scaleY(0);
  }
  .teams-page .teams-timeline-spark {
    top: 0;
    left: 50%;
    margin: -6px 0 0 -6px;
  }
  .teams-page .teams-timeline-spark::before {
    top: auto;
    right: auto;
    bottom: 50%;
    left: 50%;
    width: 2px;
    height: 120px;
    background: linear-gradient(180deg, transparent, var(--openbot-text-primary));
    translate: -50% 0;
  }
  .teams-page [data-play="true"] .teams-timeline-fill {
    animation-name: teams-timeline-fill-y;
  }
  .teams-page [data-play="true"] .teams-timeline-spark {
    animation-name: teams-timeline-spark-y;
  }
  .teams-page .teams-step {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: center;
    column-gap: 20px;
    text-align: left;
  }
  .teams-page .teams-step-node {
    grid-row: 1 / 3;
  }
  .teams-page .teams-step-number {
    align-self: end;
    margin: 0;
  }
  .teams-page .teams-step-title {
    align-self: start;
    max-width: none;
    margin: 4px 0 0;
  }
  .teams-page .teams-cursors {
    display: none;
  }
}
@keyframes teams-timeline-fill-y {
  from {
    transform: scaleY(0);
  }
}
@keyframes teams-timeline-spark-y {
  from {
    top: 0;
    opacity: 0;
  }
  6%, 94% {
    opacity: 1;
  }
  to {
    top: 100%;
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .teams-page .teams-pill::before, .teams-page .teams-pill::after, .teams-page .teams-pill-dots span, .teams-page .teams-pill-label, .teams-page .teams-section[data-revealed="true"] > *, .teams-page .teams-timeline *, .teams-page .teams-timeline *::after {
    animation: none;
  }
  .teams-page .teams-setup, .teams-page .teams-tile-art svg, .teams-page .teams-timeline * {
    transition: none;
  }
  .teams-page .teams-closing-action::before {
    transition: none;
  }
  .teams-page [data-revealed="true"] .teams-marquee-row, .teams-page .teams-closing[data-done="true"] .teams-closing-action::before {
    animation: none;
  }
  .teams-page .teams-marquee {
    mask-image: none;
  }
  .teams-page .teams-marquee-track {
    width: auto;
    animation: none;
  }
  .teams-page .teams-marquee-group {
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 16px;
  }
  .teams-page .teams-marquee-group + .teams-marquee-group, .teams-page .teams-marquee-group > :nth-child(n + 4) {
    display: none;
  }
  .teams-page .teams-marquee-row[data-row="1"] .teams-marquee-group > :nth-child(n + 3) {
    display: none;
  }
  .teams-page .teams-chip {
    white-space: normal;
  }
}
.post-main {
  padding: clamp(17px, 2.8vw, 34px) 0 clamp(50px, 6.3vw, 84px);
}
.post-container {
  width: min(100%, 1280px);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}
.post-meta {
  display: block;
  color: var(--openbot-text-dim);
  font-size: 13px;
  line-height: 1.4;
}
.post-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 7px;
}
.post-featured {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  margin-top: clamp(28px, 3.5vw, 50px);
}
.post-featured-copy {
  min-width: 0;
}
.post-featured-title {
  margin: 12px 0 0;
  font-size: clamp(30px, 3.4vw, 50px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.05;
  text-wrap: balance;
}
.post-featured-description {
  max-width: 46ch;
  margin: 16px 0 0;
  color: var(--openbot-text-muted);
  font-size: 15px;
  line-height: 1.6;
}
.post-featured-title a::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
}
.post-featured-action {
  position: relative;
  z-index: 2;
  margin-top: 26px;
}
.post-featured-art, .post-card-art, .post-article-art, .plugin-card-art, .plugin-prompts-card {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--openbot-border-strong);
  pointer-events: none;
}
.post-featured-art {
  aspect-ratio: 19 / 10;
  border-radius: 16px;
}
.post-card-art {
  aspect-ratio: 2 / 1;
  border-radius: 12px;
}
.post-article-art {
  aspect-ratio: 21 / 9;
  margin-top: clamp(28px, 3.5vw, 44px);
  border-radius: 14px;
}
.plugin-card-art {
  aspect-ratio: 4 / 3;
  border-radius: 12px;
}
.post-gradient {
  position: absolute;
  inset: 0;
  isolation: isolate;
  overflow: hidden;
  border-radius: inherit;
  background-position: center;
  background-size: cover;
}
.post-gradient > canvas {
  border-radius: inherit;
  opacity: 0;
  transition: opacity var(--openbot-duration-slow) var(--openbot-ease-out);
}
.post-gradient[data-shader="live"] > canvas {
  opacity: 1;
}
.post-featured-art-title, .post-card-art-title {
  position: relative;
  pointer-events: none;
  padding: clamp(18px, 2.6vw, 40px);
  color: var(--openbot-text-primary);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.12;
  text-align: center;
  text-wrap: balance;
}
.post-featured-art-title {
  font-size: clamp(24px, 3.2vw, 44px);
}
.post-card-art-title {
  font-size: clamp(15px, 1.4vw, 19px);
}
.post-grid-section {
  margin-top: clamp(56px, 7vw, 96px);
}
.post-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 26px);
}
.post-card {
  min-width: 0;
  display: block;
}
.post-card:focus-visible {
  border-radius: 24px;
  outline: 3px solid var(--openbot-border-focus);
  outline-offset: 4px;
}
.post-card .post-meta {
  margin-top: 14px;
}
.post-card-byline {
  row-gap: 1px;
}
.post-card-title {
  margin: 6px 0 0;
  color: var(--openbot-text-secondary);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.35;
  transition: color var(--openbot-duration-normal) ease;
}
.post-grid-section[data-revealed="false"] .post-card, .post-more[data-revealed="false"] .post-card {
  opacity: 0;
}
.post-grid-section[data-revealed="true"] .post-card, .post-more[data-revealed="true"] .post-card {
  animation: landing-download-reveal 720ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(var(--post-card-index, 0) * 80ms);
}
[data-enter="post-copy"], [data-enter="post-art"], [data-enter="post-prose"] {
  animation-name: landing-download-reveal;
  animation-duration: 720ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: backwards;
}
[data-enter="post-copy"] {
  animation-delay: 60ms;
}
[data-enter="post-art"] {
  animation-delay: 160ms;
}
[data-enter="post-prose"] {
  animation-delay: 260ms;
}
.post-article-body {
  max-width: 820px;
}
.post-article-header {
  margin-top: clamp(20px, 3vw, 36px);
}
.post-article-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--openbot-text-muted);
  font-size: 13px;
  transition: color var(--openbot-duration-normal) ease;
}
.post-article-back::before {
  content: "\2190";
}
.post-article-title {
  margin: 18px 0 0;
  font-size: clamp(32px, 4.2vw, 54px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.04;
  text-wrap: balance;
}
.post-article-standfirst {
  margin: 18px 0 0;
  color: var(--openbot-text-secondary);
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.55;
}
.post-article-byline {
  margin: 18px 0 0;
}
.post-prose {
  margin-top: clamp(32px, 4vw, 48px);
  color: var(--openbot-text-secondary);
  font-size: 17px;
  line-height: 1.7;
}
.post-prose p {
  margin: 0 0 20px;
}
.post-prose h2 {
  margin: 40px 0 14px;
  color: var(--openbot-text-primary);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.2;
}
.post-prose h3 {
  margin: 32px 0 12px;
  color: var(--openbot-text-primary);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.post-prose ul, .post-prose ol {
  margin: 0 0 20px;
  padding-left: 22px;
}
.post-prose ul {
  list-style: disc;
}
.post-prose ol {
  list-style: decimal;
}
.post-prose li {
  margin: 0 0 8px;
}
.post-prose strong {
  color: var(--openbot-text-primary);
  font-weight: 600;
}
.post-prose a {
  color: var(--openbot-accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.post-prose code {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--openbot-bg-surface);
  font-family: var(--openbot-font-mono);
  font-size: 0.9em;
}
.post-prose pre {
  margin: 0 0 24px;
  padding: 16px 18px;
  overflow-x: auto;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
  font-size: 14px;
  line-height: 1.6;
}
.post-prose pre code {
  padding: 0;
  border-radius: 0;
  background: none;
  font-size: inherit;
}
.post-prose kbd {
  padding: 2px 7px;
  border: 1px solid var(--openbot-border-strong);
  border-bottom-width: 2px;
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
  font-size: 0.85em;
}
.post-prose hr {
  margin: 40px 0;
  border: 0;
  border-top: 1px solid var(--openbot-border-strong);
}
.post-prose table {
  width: 100%;
  margin: 0 0 24px;
  border-collapse: collapse;
  font-size: 15px;
}
.post-prose th, .post-prose td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--openbot-border-strong);
  text-align: left;
  vertical-align: top;
}
.post-prose th {
  color: var(--openbot-text-primary);
  font-weight: 600;
}
.post-prose blockquote {
  margin: 24px 0;
  padding-left: 18px;
  border-left: 2px solid var(--openbot-border-strong);
  color: var(--openbot-text-muted);
}
.post-prose > :last-child {
  margin-bottom: 0;
}
.post-prose img, .post-prose video {
  max-width: 100%;
  height: auto;
}
.post-figure {
  margin: 32px 0;
}
.post-figure picture {
  display: block;
}
.post-media {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-surface);
}
.post-mount {
  position: relative;
  isolation: isolate;
  display: grid;
  overflow: hidden;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-card);
  padding: clamp(14px, 4.5%, 52px);
}
.post-mount[data-pad="tight"] {
  padding: clamp(12px, 3.5%, 36px);
}
.post-mount[data-pad="roomy"] {
  padding: clamp(22px, 7%, 72px);
}
.post-mount .post-media {
  position: relative;
  z-index: 1;
  border-color: var(--openbot-border);
  border-radius: 9px;
  box-shadow: var(--openbot-shadow-overlay);
}
.post-figure-caption {
  margin-top: 12px;
  color: var(--openbot-text-muted);
  font-size: 14px;
  line-height: 1.5;
}
.post-more {
  margin-top: clamp(64px, 8vw, 104px);
}
.post-more-title {
  margin: 0 0 clamp(22px, 2.6vw, 32px);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 600;
  letter-spacing: -0.035em;
}
.post-more[data-revealed="false"] .post-more-title {
  opacity: 0;
}
.post-more[data-revealed="true"] .post-more-title {
  animation: landing-download-reveal 720ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.agent-honeycomb {
  --agent-honeycomb-tile: 84px;
  --agent-honeycomb-gap: 6px;
  --agent-honeycomb-height: calc(var(--agent-honeycomb-tile) / 0.866);
  display: flex;
  flex: none;
  flex-direction: column;
}
.agent-honeycomb-row {
  display: flex;
  gap: var(--agent-honeycomb-gap);
}
.agent-honeycomb-row + .agent-honeycomb-row {
  margin-top: calc((var(--agent-honeycomb-tile) + var(--agent-honeycomb-gap)) * 0.866 - var(--agent-honeycomb-height));
}
.agent-honeycomb-row:nth-of-type(even) {
  translate: calc((var(--agent-honeycomb-tile) + var(--agent-honeycomb-gap)) / 2) 0;
}
.agent-honeycomb-cell {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: var(--agent-honeycomb-tile);
  height: var(--agent-honeycomb-height);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
@supports (clip-path: shape(from 0 0, line to 100% 100%)) {
  .agent-honeycomb-cell {
    clip-path: shape( from 55% 2.5%, line to 95% 22.5%, curve to 100% 30% with 100% 25%, line to 100% 70%, curve to 95% 77.5% with 100% 75%, line to 55% 97.5%, curve to 45% 97.5% with 50% 100%, line to 5% 77.5%, curve to 0% 70% with 0% 75%, line to 0% 30%, curve to 5% 22.5% with 0% 25%, line to 45% 2.5%, curve to 55% 2.5% with 50% 0%, close );
  }
}
.agent-honeycomb-art {
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  filter: grayscale(0.35);
}
.agent-honeycomb-cell > .agent-honeycomb-avatar {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--agent-honeycomb-height) * 1.75);
  height: calc(var(--agent-honeycomb-height) * 1.75);
  translate: -50% -50%;
}
.agent-honeycomb-cell > .agent-honeycomb-avatar > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  scale: 0.86 1;
}
.post-cta {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 620px;
  margin-top: clamp(64px, 8vw, 104px);
  overflow: hidden;
  text-align: center;
}
.post-cta-comb {
  position: absolute;
  inset: 0;
  overflow: hidden;
  mask-image: linear-gradient( var(--openbot-transparent), var(--openbot-mask-solid) 14%, var(--openbot-mask-solid) 86%, var(--openbot-transparent) );
}
.post-cta-comb > .agent-honeycomb {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: calc(-50% - (var(--agent-honeycomb-tile) + var(--agent-honeycomb-gap)) / 4) -50%;
}
.post-cta-veil {
  position: absolute;
  inset: 0;
  background: var(--openbot-bg-canvas);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-bg-canvas) 62%, var(--openbot-transparent));
  }
  backdrop-filter: blur(16px);
  mask-image: radial-gradient(720px 340px at 50% 50%, var(--openbot-mask-solid) 50%, var(--openbot-transparent) 100%);
  pointer-events: none;
}
.post-cta-copy {
  position: relative;
}
@media (min-width: 1920px) {
  .post-cta-comb {
    mask-image: linear-gradient( var(--openbot-transparent), var(--openbot-mask-solid) 14%, var(--openbot-mask-solid) 86%, var(--openbot-transparent) ), linear-gradient( 90deg, var(--openbot-transparent) calc(50% - 960px), var(--openbot-mask-solid) calc(50% - 810px), var(--openbot-mask-solid) calc(50% + 810px), var(--openbot-transparent) calc(50% + 960px) );
    mask-composite: intersect;
  }
}
@media (max-width: 760px) {
  .post-cta {
    min-height: 680px;
  }
  .post-cta-comb > .agent-honeycomb {
    --agent-honeycomb-tile: 60px;
    --agent-honeycomb-gap: 5px;
  }
  .post-cta-veil {
    mask-image: radial-gradient(340px 400px at 50% 50%, var(--openbot-mask-solid) 55%, var(--openbot-transparent) 100%);
  }
}
.post-cta-title {
  margin: 0;
  font-size: clamp(34px, 4.6vw, 56px);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 1.04;
  text-wrap: balance;
}
.post-cta-description {
  max-width: 580px;
  margin: 20px auto 0;
  color: var(--openbot-text-secondary);
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.55;
  text-wrap: pretty;
}
.post-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: clamp(28px, 3.5vw, 40px);
}
.post-cta[data-revealed="false"] .post-cta-title, .post-cta[data-revealed="false"] .post-cta-description, .post-cta[data-revealed="false"] .post-cta-actions {
  opacity: 0;
}
.post-cta[data-revealed="true"] .post-cta-title, .post-cta[data-revealed="true"] .post-cta-description, .post-cta[data-revealed="true"] .post-cta-actions {
  animation: landing-download-reveal 880ms cubic-bezier(0.4, 0.18, 0.28, 1) backwards;
}
.post-cta[data-revealed="true"] .post-cta-description {
  animation-delay: 170ms;
}
.post-cta[data-revealed="true"] .post-cta-actions {
  animation-delay: 340ms;
}
@media (max-width: 1080px) {
  .post-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .post-featured {
    grid-template-columns: minmax(0, 1fr);
  }
  .post-featured-art {
    order: -1;
  }
}
@media (max-width: 560px) {
  .post-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (hover: hover) and (pointer: fine) {
  .post-featured, .post-card {
    cursor: pointer;
  }
  .post-featured-art-title, .post-card-art-title {
    transform: scale(1);
    transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
    will-change: transform;
  }
  .post-card:hover .post-card-art-title {
    transform: scale(1.06);
  }
  .post-featured:hover .post-featured-art-title {
    transform: scale(1.04);
  }
  .post-card:hover .post-card-title, .post-article-back:hover {
    color: var(--openbot-text-primary);
  }
  .post-featured-title a:hover {
    color: var(--openbot-text-secondary);
  }
}
@media (prefers-reduced-motion: reduce) {
  .post-grid-section[data-revealed] .post-card, .post-more[data-revealed] .post-card, .post-more[data-revealed] .post-more-title {
    opacity: 1;
    animation: none;
  }
  [data-enter="post-copy"], [data-enter="post-art"], [data-enter="post-prose"], .post-cta[data-revealed] .post-cta-title, .post-cta[data-revealed] .post-cta-description, .post-cta[data-revealed] .post-cta-actions {
    opacity: 1;
    animation: none;
  }
  .post-card-art, .post-card-art-title, .post-featured-art-title {
    transition: none;
    transform: none;
  }
}
.reading-progress {
  --reading-accent: var(--openbot-logo-production);
  --reading-track: rgba(255, 255, 255, 0.1);
  --reading-glow: var(--reading-accent);
  @supports (color: color-mix(in lab, red, red)) {
    --reading-glow: color-mix(in srgb, var(--reading-accent) 60%, transparent);
  }
  --reading-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --reading-duration: 460ms;
  --reading-quick: 300ms;
  --reading-blur: 8px;
}
.reading-progress-line {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 60;
  height: 2px;
  background: linear-gradient(90deg, var(--reading-accent), var(--reading-accent));
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(90deg, color-mix(in srgb, var(--reading-accent) 25%, transparent), var(--reading-accent));
  }
  box-shadow: 0 0 12px var(--reading-glow);
  opacity: 0;
  pointer-events: none;
  transform: scaleX(var(--reading-progress, 0));
  transform-origin: left center;
  transition: opacity 240ms ease;
}
.reading-progress[data-visible="true"] .reading-progress-line {
  opacity: 1;
}
.reading-progress-rail {
  display: none;
}
@media (min-width: 1200px) {
  .reading-progress-line {
    display: none;
  }
  .reading-progress-rail {
    position: fixed;
    top: 50%;
    right: 12px;
    z-index: 30;
    width: 280px;
    height: min(64vh, 600px);
    display: flex;
    flex-direction: column;
    padding: 14px 0;
    opacity: 0;
    pointer-events: none;
    transform: translate(8px, -50%);
    transition: opacity 300ms ease, transform var(--reading-duration) var(--reading-ease);
  }
  .reading-progress[data-visible="true"] .reading-progress-rail, .reading-progress-rail:focus-within {
    opacity: 1;
    transform: translate(0, -50%);
  }
  .reading-progress-rail:hover, .reading-progress-rail:focus-within {
    pointer-events: auto;
  }
  .reading-progress-surface {
    position: absolute;
    inset: -64px -12px -64px -64px;
    background: linear-gradient( to left, var(--openbot-bg-canvas) 0%, var(--openbot-bg-canvas) 55%, transparent 100% );
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient( to left, var(--openbot-bg-canvas) 0%, color-mix(in srgb, var(--openbot-bg-canvas) 92%, transparent) 55%, transparent 100% );
    }
    mask-image: linear-gradient(to bottom, transparent, #000 64px, #000 calc(100% - 64px), transparent);
    opacity: 0;
    transition: opacity 200ms ease;
  }
  .reading-progress-eyebrow {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin: 0 0 12px;
    padding: 0 20px 0 18px;
    color: var(--openbot-text-dim);
    font-family: var(--openbot-font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 200ms ease;
  }
  .reading-progress-count {
    color: var(--reading-accent);
    font-variant-numeric: tabular-nums;
  }
  .reading-progress-list {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .reading-progress-item {
    flex-basis: 0;
    min-height: 22px;
    display: flex;
  }
  .reading-progress-link {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: 14px;
    padding-left: 18px;
    color: var(--openbot-text-muted);
    text-decoration: none;
    outline: none;
  }
  .reading-progress-item[data-state="read"] .reading-progress-link {
    color: var(--openbot-text-secondary);
  }
  .reading-progress-item[data-state="active"] .reading-progress-link, .reading-progress-link:hover, .reading-progress-link:focus-visible {
    color: var(--openbot-text-primary);
  }
  .reading-progress-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    margin-top: -3px;
    font-size: 12.5px;
    line-height: 18px;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0;
    filter: blur(var(--reading-blur));
    transform: translateX(8px);
    transition: color 200ms ease, opacity 200ms ease, filter 200ms ease, transform 240ms var(--reading-ease);
  }
  .reading-progress-link:focus-visible .reading-progress-label {
    text-decoration: underline;
    text-decoration-color: var(--reading-accent);
    text-underline-offset: 4px;
  }
  .reading-progress-bar {
    position: relative;
    width: 20px;
    flex: none;
    padding-bottom: 4px;
  }
  .reading-progress[data-visible="true"] .reading-progress-bar {
    pointer-events: auto;
  }
  .reading-progress-bar::before, .reading-progress-fill {
    content: "";
    position: absolute;
    top: 0;
    right: 9px;
    bottom: 4px;
    width: 2px;
    border-radius: 2px;
    transition: width 300ms var(--reading-ease), right 300ms var(--reading-ease), background-color 300ms ease;
  }
  .reading-progress-bar::before {
    background: var(--reading-track);
  }
  .reading-progress-fill {
    background: var(--reading-accent);
    transform: scaleY(var(--reading-fill, 0));
    transform-origin: top center;
  }
  .reading-progress-item[data-state="active"] .reading-progress-bar::before, .reading-progress-item[data-state="active"] .reading-progress-fill {
    right: 8.5px;
    width: 3px;
  }
  .reading-progress-item[data-state="active"] .reading-progress-fill {
    box-shadow: 0 0 10px var(--reading-glow);
  }
  .reading-progress-item[data-state="active"] .reading-progress-bar::after {
    content: "";
    position: absolute;
    top: calc((100% - 4px) * var(--reading-fill, 0));
    right: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--reading-accent);
    box-shadow: 0 0 0 3px var(--reading-accent), 0 0 12px var(--reading-glow);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--reading-accent) 18%, transparent), 0 0 12px var(--reading-glow);
    }
    transform: translateY(-50%);
  }
  .reading-progress-rail:hover .reading-progress-surface, .reading-progress-rail:focus-within .reading-progress-surface {
    opacity: 1;
    transition: opacity 240ms ease;
  }
  .reading-progress-rail:hover .reading-progress-eyebrow, .reading-progress-rail:focus-within .reading-progress-eyebrow {
    opacity: 1;
  }
  .reading-progress-rail:hover .reading-progress-label, .reading-progress-rail:focus-within .reading-progress-label {
    opacity: 1;
    filter: blur(0);
    transform: none;
    transition: color 200ms ease, opacity var(--reading-quick) ease calc(var(--reading-index, 0) * 18ms), filter var(--reading-quick) ease calc(var(--reading-index, 0) * 18ms), transform var(--reading-duration) var(--reading-ease) calc(var(--reading-index, 0) * 18ms);
  }
}
@media (prefers-reduced-motion: reduce) {
  .reading-progress[data-visible] .reading-progress-line, .reading-progress[data-visible] .reading-progress-rail, .reading-progress[data-visible] .reading-progress-rail *, .reading-progress[data-visible] .reading-progress-rail *::before, .reading-progress[data-visible] .reading-progress-rail *::after {
    transition: none;
  }
}
.post-article-body h2, .compare-article h2, .compare-roundup-list > li {
  scroll-margin-top: 32px;
}
.compare-page [data-side="openbot"] {
  --compare-accent: var(--openbot-logo-production);
}
.compare-page :is([data-side="rival"], [data-side="a"], [data-side="b"]) {
  --compare-accent: var(--openbot-text-muted);
}
.compare-article {
  width: min(100%, 1160px);
}
.compare-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  margin-top: clamp(20px, 3vw, 36px);
}
.compare-hero-copy {
  min-width: 0;
}
.compare-eyebrow {
  margin: 22px 0 0;
  color: var(--openbot-text-dim);
  font-family: var(--openbot-font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.compare-title {
  margin: 12px 0 0;
  font-size: clamp(32px, 4vw, 54px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.04;
  text-wrap: balance;
}
.compare-nowrap {
  white-space: nowrap;
}
.compare-standfirst {
  max-width: 48ch;
  margin: 18px 0 0;
  color: var(--openbot-text-secondary);
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.55;
}
.compare-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 7px;
  margin-top: 20px;
}
.compare-meta a, .compare-sources-note a {
  color: var(--openbot-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--openbot-duration-normal) ease;
}
.compare-stage {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 19 / 10;
  overflow: hidden;
  border: 1px solid var(--openbot-border-strong);
  border-radius: 16px;
  pointer-events: none;
  animation: compare-rise 720ms cubic-bezier(0.22, 1, 0.36, 1) 160ms backwards;
}
.compare-stage-art {
  animation: compare-fade 900ms cubic-bezier(0.22, 1, 0.36, 1) 160ms backwards;
}
.compare-marks {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: clamp(20px, 2.4vw, 32px) clamp(22px, 3vw, 40px);
  border-radius: 20px;
  background: rgba(14, 14, 18, 0.26);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
  animation: compare-plate-in 800ms cubic-bezier(0.22, 1, 0.36, 1) 320ms backwards;
}
.compare-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: clamp(96px, 9vw, 128px);
  color: var(--openbot-text-primary);
  animation: compare-mark-in 800ms cubic-bezier(0.22, 1, 0.36, 1) 420ms backwards;
}
.compare-mark:last-child {
  --compare-from: 10px;
}
.compare-mark-logo {
  width: clamp(44px, 5vw, 68px);
  height: clamp(44px, 5vw, 68px);
}
.compare-mark-rival {
  color: var(--openbot-text-primary);
}
.compare-mark-name {
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(13px, 1.1vw, 15px);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.compare-vs {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  gap: 8px;
  margin-inline: clamp(14px, 2.2vw, 32px);
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.compare-vs::before, .compare-vs::after {
  flex: 1;
  width: 1px;
  background: rgba(255, 255, 255, 0.2);
  content: "";
}
@keyframes compare-plate-in {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(0.98);
  }
}
@keyframes compare-mark-in {
  from {
    opacity: 0;
    transform: translate3d(var(--compare-from, -10px), 0, 0);
  }
}
@keyframes compare-rise {
  from {
    border-color: var(--openbot-transparent);
    transform: translate3d(0, 16px, 0);
  }
}
@keyframes compare-fade {
  from {
    opacity: 0;
  }
}
.compare-section {
  margin-top: clamp(56px, 7vw, 96px);
}
.compare-heading {
  margin: 0;
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.15;
  text-wrap: balance;
}
.compare-answer-text {
  max-width: 62ch;
  margin: 16px 0 0;
  color: var(--openbot-text-secondary);
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.55;
}
.compare-glance-summary {
  margin: 10px 0 0;
  color: var(--openbot-text-muted);
  font-size: 15px;
}
.compare-plans-lead {
  max-width: 62ch;
  margin: 14px 0 0;
  color: var(--openbot-text-secondary);
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.6;
}
.compare-plans-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.compare-plan:last-child:nth-child(3n + 1) {
  grid-column: 1 / -1;
}
.compare-plan:last-child:nth-child(3n + 2) {
  grid-column: span 2;
}
.compare-plan {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  column-gap: 14px;
  row-gap: 3px;
  padding: 16px 18px;
  border: 1px solid var(--openbot-border);
  border-radius: 14px;
  background: var(--openbot-bg-surface);
}
.compare-plan[data-highlighted] {
  border-color: var(--openbot-logo-production);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--openbot-logo-production) 34%, var(--openbot-border));
  }
  background: radial-gradient( 120% 90% at 0% 0%, var(--openbot-logo-production), var(--openbot-transparent) 62% ), var(--openbot-bg-surface);
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient( 120% 90% at 0% 0%, color-mix(in srgb, var(--openbot-logo-production) 10%, var(--openbot-transparent)), var(--openbot-transparent) 62% ), var(--openbot-bg-surface);
  }
}
.compare-plan-logo-frame {
  display: grid;
  grid-row: span 2;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.compare-plan-logo {
  width: 20px;
  height: 20px;
  overflow: visible;
  fill: var(--openbot-provider-current);
}
.compare-plan-logo-custom {
  fill: none;
  color: var(--openbot-text-primary);
}
.compare-plan-name {
  align-self: end;
  color: var(--openbot-text-primary);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.compare-plan-text {
  color: var(--openbot-text-muted);
  font-size: 13.5px;
  line-height: 1.45;
}
.compare-plans-rival {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 18px 0 0;
  color: var(--openbot-text-muted);
  font-size: 15px;
  line-height: 1.5;
}
.compare-plans-rival strong {
  color: var(--openbot-text-secondary);
  font-weight: 600;
}
.compare-plans-rival-logo {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 0.12em;
}
.compare-intro {
  max-width: 62ch;
  margin: clamp(56px, 7vw, 96px) auto 0;
  color: var(--openbot-text-secondary);
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.7;
  text-align: center;
  text-wrap: pretty;
}
.compare-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
  margin-top: 22px;
}
.compare-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: clamp(20px, 2.2vw, 28px);
  border: 1px solid var(--openbot-border);
  border-radius: 16px;
  background: radial-gradient( 120% 80% at 0% 0%, var(--compare-accent), var(--openbot-transparent) 60% ), var(--openbot-bg-surface);
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient( 120% 80% at 0% 0%, color-mix(in srgb, var(--compare-accent) 9%, var(--openbot-transparent)), var(--openbot-transparent) 60% ), var(--openbot-bg-surface);
  }
}
.compare-card[data-better] {
  border-color: var(--compare-accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--compare-accent) 34%, var(--openbot-border));
  }
  background: radial-gradient( 120% 90% at 0% 0%, var(--compare-accent), var(--openbot-transparent) 62% ), var(--openbot-bg-surface);
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient( 120% 90% at 0% 0%, color-mix(in srgb, var(--compare-accent) 16%, var(--openbot-transparent)), var(--openbot-transparent) 62% ), var(--openbot-bg-surface);
  }
}
.compare-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: clamp(20px, 2.2vw, 28px);
  width: 44px;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: var(--compare-accent);
  opacity: 0.8;
}
.compare-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 12px;
}
.compare-card-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.compare-side-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.compare-side-logo {
  width: 22px;
  height: 22px;
}
.compare-card-text {
  margin: 14px 0 0;
  color: var(--openbot-text-secondary);
  font-size: 15px;
  line-height: 1.65;
}
.compare-choice-list {
  display: grid;
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  color: var(--openbot-text-secondary);
  font-size: 15px;
  line-height: 1.5;
}
.compare-choice-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.compare-choice-check {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 0.15em;
  color: var(--openbot-success);
  stroke-width: 2.6;
}
.compare-choice-dot {
  flex: none;
  width: 6px;
  height: 6px;
  margin: 0.6em 5px 0;
  border-radius: 50%;
  background: var(--openbot-text-dim);
}
.compare-better-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 8px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-success) 14%, var(--openbot-transparent));
  }
  box-shadow: inset 0 0 0 1px var(--openbot-success);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--openbot-success) 30%, var(--openbot-transparent));
  }
  color: var(--openbot-success-text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
}
.compare-better-badge-icon {
  width: 13px;
  height: 13px;
  stroke-width: 2.8;
}
.compare-table-frame {
  margin-top: 22px;
  overflow-x: auto;
  border: 1px solid var(--openbot-border);
  border-radius: 16px;
  background: var(--openbot-bg-surface);
}
.compare-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
  text-align: left;
}
.compare-table th, .compare-table td {
  padding: 16px clamp(14px, 1.8vw, 22px);
  vertical-align: top;
}
.compare-table thead th {
  border-bottom: 1px solid var(--openbot-border-strong);
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-primary);
  font-size: 14px;
  font-weight: 600;
}
.compare-table thead th:first-child {
  width: 24%;
}
.compare-table-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.compare-table-logo {
  width: 22px;
  height: 22px;
}
.compare-table thead th[data-side="openbot"] {
  box-shadow: inset 0 2px 0 var(--compare-accent);
}
.compare-table [data-side="openbot"] {
  background: var(--compare-accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--compare-accent) 5%, var(--openbot-transparent));
  }
}
.compare-table td[data-better] {
  color: var(--openbot-text-primary);
}
.compare-better-mark {
  display: grid;
  float: left;
  place-items: center;
  width: 20px;
  height: 20px;
  margin: 1px 9px 0 0;
  border-radius: 50%;
  background: var(--openbot-success);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-success) 18%, var(--openbot-transparent));
  }
  color: var(--openbot-success);
}
.compare-better-icon {
  width: 12px;
  height: 12px;
  stroke-width: 3;
}
.compare-table tbody tr + tr {
  border-top: 1px solid var(--openbot-border);
}
.compare-table tbody th {
  color: var(--openbot-text-primary);
  font-weight: 500;
}
.compare-table td {
  color: var(--openbot-text-secondary);
}
.compare-topic {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
}
.compare-topic-icon {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--openbot-text-muted);
}
.compare-faq-list {
  interpolate-size: allow-keywords;
  margin-top: 18px;
  border-top: 1px solid var(--openbot-border);
}
.compare-faq-item {
  border-bottom: 1px solid var(--openbot-border);
}
.compare-faq-item::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size var(--openbot-duration-normal) var(--openbot-ease-out), content-visibility var(--openbot-duration-normal) allow-discrete;
}
.compare-faq-item[open]::details-content {
  block-size: auto;
}
.compare-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 2px;
  cursor: pointer;
  color: var(--openbot-text-primary);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.015em;
  list-style: none;
}
.compare-faq-question::-webkit-details-marker {
  display: none;
}
.compare-faq-question:focus-visible {
  border-radius: 8px;
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}
.compare-faq-chevron {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--openbot-text-muted);
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.compare-faq-item[open] .compare-faq-chevron {
  transform: rotate(180deg);
}
.compare-faq-answer {
  max-width: 70ch;
  margin: 0;
  padding: 0 2px 20px;
  color: var(--openbot-text-secondary);
  font-size: 15px;
  line-height: 1.65;
}
.landing-faq-body .compare-faq-list {
  margin-top: 0;
}
.landing-faq-body .compare-faq-question {
  padding: 24px 2px;
  font-size: 18px;
}
.landing-faq-body .compare-faq-answer {
  padding-bottom: 24px;
  font-size: 16px;
}
.compare-sources-note {
  max-width: 68ch;
  margin: 14px 0 0;
  color: var(--openbot-text-muted);
  font-size: 14px;
  line-height: 1.6;
}
.compare-sources-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 24px;
  margin: 18px 0 0;
  padding: 0;
}
.compare-sources-list a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--openbot-text-secondary);
  font-size: 14px;
  transition: color var(--openbot-duration-normal) ease;
}
.compare-sources-icon {
  width: 14px;
  height: 14px;
  color: var(--openbot-text-dim);
}
.compare-roundup-disclosure {
  max-width: 62ch;
  margin: 12px 0 0;
  color: var(--openbot-text-muted);
  font-size: 14px;
  line-height: 1.6;
}
.compare-roundup-table {
  min-width: 880px;
}
.compare-roundup-table thead th:first-child {
  width: 16%;
}
.compare-roundup-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.compare-roundup-rank {
  color: var(--openbot-text-muted);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.compare-roundup-best {
  margin: 10px 0 0;
  color: var(--openbot-text-primary);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
}
.compare-roundup-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.compare-roundup-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--openbot-logo-production);
  font-size: 14px;
  font-weight: 500;
}
.compare-roundup-link-icon {
  width: 14px;
  height: 14px;
  transition: transform var(--openbot-duration-normal) ease;
}
.compare-bench-table tr[data-agent="claude-code"] {
  --compare-bench-fill: var(--openbot-chart-storage-files);
}
.compare-bench-table tr[data-agent="codex"] {
  --compare-bench-fill: var(--openbot-chart-storage-workspaces);
}
.compare-bench-table tr[data-agent="devin"] {
  --compare-bench-fill: var(--openbot-chart-storage-chats);
}
.compare-bench-table tr[data-agent="antigravity"] {
  --compare-bench-fill: var(--openbot-chart-storage-downloads);
}
.compare-bench-takeaway {
  max-width: 62ch;
  margin: 14px 0 0;
  color: var(--openbot-text-secondary);
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.6;
}
.compare-bench-table {
  min-width: 680px;
}
.compare-bench-table thead th:first-child {
  width: 34%;
}
.compare-bench-table td, .compare-bench-table th {
  vertical-align: middle;
}
.compare-bench-hint {
  display: block;
  color: var(--openbot-text-dim);
  font-size: 12px;
  font-weight: 400;
}
.compare-bench-agent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.compare-bench-agent .compare-table-logo {
  flex: none;
  margin-top: 1px;
  color: var(--openbot-text-primary);
}
.compare-bench-name {
  display: block;
  color: var(--openbot-text-primary);
  font-weight: 600;
}
.compare-bench-model, .compare-bench-note {
  display: block;
  color: var(--openbot-text-muted);
  font-size: 13px;
  font-weight: 400;
}
.compare-bench-note {
  color: var(--openbot-text-dim);
}
.compare-bench-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}
.compare-bench-bar {
  flex: none;
  width: calc(var(--compare-bench-share) * (100% - 64px));
  min-width: 2px;
  height: 14px;
  border-radius: 0 4px 4px 0;
  background: var(--compare-bench-fill);
}
.compare-bench-value {
  flex: none;
  color: var(--openbot-text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.compare-bench-credit {
  max-width: 68ch;
  margin: 14px 0 0;
  color: var(--openbot-text-muted);
  font-size: 14px;
  line-height: 1.6;
}
.compare-bench-credit a {
  color: var(--openbot-text-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.compare-section[data-revealed="false"] > *, .compare-section[data-revealed="false"] .compare-table tbody tr, .compare-section[data-revealed="false"] .compare-plan, .compare-section[data-revealed="false"] .compare-roundup-list > li, .compare-section[data-revealed="false"] .compare-faq-item {
  opacity: 0;
}
.compare-section[data-revealed="true"] > * {
  animation: landing-download-reveal 720ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.compare-section[data-revealed="true"] > :nth-child(2) {
  animation-delay: 90ms;
}
.compare-section[data-revealed="true"] > :nth-child(n + 3) {
  animation-delay: 180ms;
}
.compare-section[data-revealed="true"] .compare-pair > :nth-child(2) {
  animation: landing-download-reveal 720ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: 200ms;
}
.compare-section[data-revealed="true"] .compare-table tbody tr, .compare-section[data-revealed="true"] .compare-plan, .compare-section[data-revealed="true"] .compare-roundup-list > li, .compare-section[data-revealed="true"] .compare-faq-item {
  animation: landing-download-reveal 620ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(160ms + var(--compare-index, 0) * 70ms);
}
.compare-index-hero {
  position: relative;
  isolation: isolate;
  padding: clamp(28px, 5vw, 72px) 0 clamp(8px, 2vw, 24px);
  text-align: center;
}
.compare-index-hero .landing-hero-grid {
  z-index: -1;
}
.compare-index-hero .compare-eyebrow {
  margin-top: 0;
}
.compare-index-title {
  margin: 12px 0 0;
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1.02;
}
.compare-index-description {
  max-width: 56ch;
  margin: 18px auto 0;
  color: var(--openbot-text-secondary);
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.55;
}
.compare-index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 560px));
  justify-content: center;
  gap: clamp(18px, 2vw, 26px);
  margin-top: clamp(32px, 4vw, 56px);
}
.compare-index-card {
  display: block;
  min-width: 0;
}
.compare-index-card:focus-visible {
  border-radius: 20px;
  outline: 3px solid var(--openbot-border-focus);
  outline-offset: 4px;
}
.compare-index-art {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 19 / 10;
  overflow: hidden;
  border: 1px solid var(--openbot-border-strong);
  border-radius: 14px;
  pointer-events: none;
}
.compare-marks-small {
  padding: clamp(16px, 1.8vw, 24px) clamp(18px, 2.2vw, 28px);
  border-radius: 16px;
}
.compare-marks-small .compare-mark {
  min-width: clamp(56px, 6vw, 80px);
}
.compare-marks-small .compare-vs {
  margin-inline: clamp(10px, 1.6vw, 22px);
}
.compare-marks-small .compare-mark-logo {
  width: clamp(32px, 3.4vw, 44px);
  height: clamp(32px, 3.4vw, 44px);
}
.compare-mark-row {
  grid-template-columns: repeat(7, auto);
  gap: clamp(10px, 1.6vw, 20px);
}
.compare-mark-row .compare-mark {
  --compare-from: 0px;
  min-width: 0;
}
.compare-mark-row .compare-mark-logo {
  width: clamp(26px, 3.2vw, 44px);
  height: clamp(26px, 3.2vw, 44px);
}
.compare-mark-row.compare-marks-small {
  gap: clamp(8px, 1vw, 12px);
}
.compare-mark-row.compare-marks-small .compare-mark-logo {
  width: clamp(20px, 2vw, 26px);
  height: clamp(20px, 2vw, 26px);
}
.compare-index-copy {
  padding: 16px 2px 0;
}
.compare-index-card-title {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: clamp(18px, 1.7vw, 22px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.25;
}
.compare-index-card-description {
  margin: 8px 0 0;
  color: var(--openbot-text-muted);
  font-size: 15px;
  line-height: 1.55;
}
.compare-index-card-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  color: var(--openbot-text-secondary);
  font-size: 14px;
  font-weight: 500;
}
.compare-index-card-arrow {
  width: 15px;
  height: 15px;
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.compare-index-grid[data-revealed="false"] .compare-index-card :is(.post-gradient, .compare-marks), .compare-index-grid[data-revealed="false"] .compare-index-copy {
  opacity: 0;
}
.compare-index-grid[data-revealed="true"] .compare-index-card {
  --compare-delay: calc(160ms + var(--compare-index, 0) * 80ms);
  animation: compare-rise 720ms cubic-bezier(0.22, 1, 0.36, 1) var(--compare-delay) backwards;
}
.compare-index-grid[data-revealed="true"] .compare-index-card :is(.post-gradient, .compare-marks), .compare-index-grid[data-revealed="true"] .compare-index-copy {
  animation: compare-fade 720ms cubic-bezier(0.22, 1, 0.36, 1) var(--compare-delay) backwards;
}
@media (max-width: 900px) {
  .compare-hero {
    grid-template-columns: minmax(0, 1fr);
  }
  .compare-plans-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .compare-plan:last-child:is(:nth-child(3n + 1), :nth-child(3n + 2)) {
    grid-column: auto;
  }
  .compare-plan:last-child:nth-child(2n + 1) {
    grid-column: 1 / -1;
  }
}
@media (max-width: 640px) {
  .compare-plans-grid {
    gap: 10px;
  }
  .compare-plan {
    grid-template-columns: minmax(0, 1fr);
    padding: 14px;
  }
  .compare-plan-logo-frame {
    grid-row: auto;
    margin-bottom: 10px;
  }
  .compare-pair, .compare-sources-list, .compare-index-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .compare-table {
    display: block;
    min-width: 0;
    font-size: 14px;
  }
  .compare-table thead, .compare-table tbody {
    display: block;
  }
  .compare-table tr {
    display: grid;
    grid-template-columns: var(--compare-table-columns, repeat(2, minmax(0, 1fr)));
  }
  .compare-table thead th:first-child {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    padding: 0;
  }
  .compare-table th, .compare-table td {
    padding: 12px 14px;
  }
  .compare-table tbody th {
    grid-column: 1 / -1;
    padding-bottom: 2px;
  }
  .compare-table td {
    padding-top: 6px;
  }
  .compare-mark {
    min-width: 0;
    gap: 8px;
  }
  .compare-bench-table {
    --compare-table-columns: repeat(3, minmax(0, 1fr));
  }
  .compare-bench-table thead th {
    font-size: 13px;
  }
  .compare-bench-cell {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 6px;
  }
  .compare-bench-bar {
    width: calc(var(--compare-bench-share) * 100%);
  }
  .compare-roundup-table, .compare-roundup-table :is(thead, tbody, tr) {
    display: revert;
  }
  .compare-roundup-table {
    min-width: 720px;
  }
  .compare-roundup-table thead th:first-child {
    position: static;
    width: 16%;
    height: auto;
    overflow: visible;
    clip-path: none;
    padding: 12px 14px;
  }
  .compare-roundup-table tbody th {
    padding-bottom: 12px;
  }
  .compare-roundup-list {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (hover: hover) and (pointer: fine) {
  .compare-meta a:hover, .compare-sources-note a:hover, .compare-sources-list a:hover {
    color: var(--openbot-text-primary);
  }
  .compare-faq-question:hover .compare-faq-chevron {
    color: var(--openbot-text-primary);
  }
  .compare-roundup-links a:hover .compare-roundup-link-icon {
    transform: translateX(2px);
  }
  .compare-index-card:hover .compare-index-card-arrow {
    transform: translateX(3px);
  }
  .compare-index-card:hover .compare-index-card-title {
    color: var(--openbot-text-secondary);
  }
}
@media (prefers-reduced-motion: reduce) {
  .compare-stage, .compare-stage-art, .compare-marks, .compare-mark, .compare-section[data-revealed] > *, .compare-section[data-revealed] .compare-pair > :nth-child(n), .compare-section[data-revealed] .compare-table tbody tr, .compare-section[data-revealed] .compare-plan, .compare-section[data-revealed] .compare-roundup-list > li, .compare-section[data-revealed] .compare-faq-item, .compare-index-grid[data-revealed] .compare-index-card, .compare-index-grid[data-revealed] .compare-index-card :is(.post-gradient, .compare-marks), .compare-index-grid[data-revealed] .compare-index-copy {
    opacity: 1;
    animation: none;
  }
  .compare-faq-item::details-content, .compare-faq-chevron, .compare-roundup-link-icon, .compare-index-card-arrow {
    transition: none;
  }
}
.provider-mark-frame {
  display: grid;
  place-items: center;
}
.provider-mark-logo {
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: var(--openbot-provider-current);
}
.provider-mark-custom {
  width: 78%;
  height: 78%;
  fill: none;
  color: var(--openbot-text-primary);
}
.compare-page :is(.provider-step-text, .provider-table td) code {
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
  font-size: 0.88em;
}
.provider-steps {
  display: grid;
  gap: 12px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: provider-step;
}
.provider-step {
  position: relative;
  padding: 18px 20px 18px 64px;
  border: 1px solid var(--openbot-border);
  border-radius: 14px;
  background: var(--openbot-bg-surface);
  counter-increment: provider-step;
}
.provider-step::before {
  position: absolute;
  top: 18px;
  left: 20px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--openbot-logo-production);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-logo-production) 16%, var(--openbot-transparent));
  }
  color: var(--openbot-text-primary);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  content: counter(provider-step);
}
.provider-step-title {
  margin: 3px 0 0;
  color: var(--openbot-text-primary);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.provider-step-text {
  max-width: 68ch;
  margin: 8px 0 0;
  color: var(--openbot-text-secondary);
  font-size: 15px;
  line-height: 1.6;
}
.provider-step-links, .provider-related-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.provider-step-links a, .provider-related-list a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--openbot-logo-production);
  font-size: 14px;
  font-weight: 500;
}
.provider-related-list {
  flex-direction: column;
  margin-top: 18px;
}
.provider-related-list a {
  display: inline;
  font-size: 15px;
}
.provider-related-arrow {
  display: inline-block;
  margin-left: 6px;
  vertical-align: -2px;
}
.provider-step-arrow {
  width: 14px;
  height: 14px;
  transition: transform var(--openbot-duration-normal) ease;
}
.provider-adds-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.provider-add {
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid var(--openbot-border);
  border-radius: 14px;
  background: var(--openbot-bg-surface);
}
.provider-add:first-child {
  border-color: var(--openbot-logo-production);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--openbot-logo-production) 34%, var(--openbot-border));
  }
  background: radial-gradient( 120% 90% at 0% 0%, var(--openbot-logo-production), var(--openbot-transparent) 62% ), var(--openbot-bg-surface);
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient( 120% 90% at 0% 0%, color-mix(in srgb, var(--openbot-logo-production) 10%, var(--openbot-transparent)), var(--openbot-transparent) 62% ), var(--openbot-bg-surface);
  }
}
.provider-add-icon {
  width: 22px;
  height: 22px;
  color: var(--openbot-text-primary);
}
.provider-add-title {
  margin: 14px 0 0;
  color: var(--openbot-text-primary);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.provider-add-text {
  margin: 6px 0 0;
  color: var(--openbot-text-muted);
  font-size: 14px;
  line-height: 1.55;
}
@media (min-width: 641px) {
  .provider-table thead th:is(:first-child, :nth-child(2)) {
    width: 26%;
  }
}
.compare-section[data-revealed="false"] :is(.provider-step, .provider-add) {
  opacity: 0;
}
.compare-section[data-revealed="true"] .provider-step, .compare-section[data-revealed="true"] .provider-add {
  animation: landing-download-reveal 620ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(160ms + var(--compare-index, 0) * 70ms);
}
.provider-step:nth-child(2) {
  --compare-index: 1;
}
.provider-step:nth-child(3) {
  --compare-index: 2;
}
@media (max-width: 900px) {
  .provider-adds-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .provider-adds-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .provider-step {
    padding: 16px 16px 16px 56px;
  }
  .provider-step::before {
    top: 16px;
    left: 16px;
  }
}
@media (hover: hover) and (pointer: fine) {
  .provider-step-links a:hover .provider-step-arrow, .provider-related-list a:hover .provider-step-arrow {
    transform: translateX(3px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .compare-section[data-revealed] .provider-step, .compare-section[data-revealed] .provider-add {
    opacity: 1;
    animation: none;
  }
  .provider-step-arrow {
    transition: none;
  }
}
.plugin-intro {
  margin-top: clamp(28px, 3.5vw, 50px);
}
.plugin-intro-title {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: clamp(30px, 3.4vw, 40px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.plugin-grid-section {
  margin-top: clamp(32px, 4vw, 48px);
}
.plugin-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 26px);
}
.plugin-card {
  display: block;
  min-width: 0;
  text-decoration: none;
}
.plugin-card:focus-visible {
  border-radius: 24px;
  outline: 3px solid var(--openbot-border-focus);
  outline-offset: 4px;
}
.plugin-logo {
  position: relative;
  pointer-events: none;
  color: var(--openbot-text-primary);
  filter: drop-shadow(0 1px 6px rgb(0 0 0 / 35%));
}
.plugin-card-logo {
  width: auto;
  max-width: 58%;
  height: 20%;
}
.plugin-card-logo.plugin-logo-upright {
  height: 34%;
}
.plugin-card-icon {
  position: relative;
  height: 40%;
  border-radius: var(--openbot-radius-logo);
  box-shadow: 0 2px 12px rgb(0 0 0 / 35%);
  pointer-events: none;
}
.plugin-logo-letter {
  display: grid;
  place-items: center;
  font-size: clamp(34px, 3.8vw, 48px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}
.plugin-card-meta, .plugin-card-headline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.plugin-card-meta {
  margin-top: 14px;
  color: var(--openbot-text-dim);
  font-size: 12px;
}
.plugin-card-version {
  flex: none;
  letter-spacing: var(--openbot-tracking-wide);
}
.plugin-card-publisher, .plugin-card-tagline {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.plugin-card-tagline {
  text-align: right;
}
.plugin-filters {
  margin-inline: 0;
  border: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: clamp(20px, 2.4vw, 30px);
}
.plugin-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.plugin-tag {
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface);
  padding: 5px 11px;
  color: var(--openbot-text-dim);
  font-size: 12px;
  letter-spacing: var(--openbot-tracking-wide);
  line-height: 1.2;
  white-space: nowrap;
}
.plugin-tag-button {
  height: 38px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
  background: transparent;
  padding: 0 17px;
  color: var(--openbot-text-secondary);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--openbot-tracking-wide);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--openbot-duration-normal) ease, background-color var(--openbot-duration-normal) ease, color var(--openbot-duration-normal) ease, transform var(--openbot-duration-fast) var(--openbot-ease-out);
}
.plugin-tag-button[aria-pressed="true"] {
  border-color: var(--openbot-surface-light);
  background: var(--openbot-surface-light);
  color: var(--openbot-text-on-light);
}
.plugin-tag-button:active {
  transform: scale(0.97);
}
.plugin-tag-button:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--openbot-accent-strong);
}
.plugin-empty {
  margin: 0;
  color: var(--openbot-text-dim);
  font-size: 14px;
}
.plugin-card-headline {
  margin-top: 5px;
}
.plugin-card-title {
  flex: none;
  color: var(--openbot-text-secondary);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.35;
  transition: color var(--openbot-duration-normal) ease;
}
.plugin-card-tagline {
  color: var(--openbot-text-dim);
  font-size: 13px;
}
.plugin-grid-section[data-revealed="false"] .plugin-card {
  opacity: 0;
}
.plugin-grid-section[data-revealed="true"] .plugin-card {
  animation: landing-download-reveal 720ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(var(--plugin-card-index, 0) * 80ms);
}
.plugin-hero-logo {
  width: auto;
  max-width: 44%;
  height: 26%;
}
.plugin-hero-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
  margin-top: 18px;
}
.plugin-hero-row .post-article-title {
  min-width: 0;
  margin-top: 0;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.1;
}
.plugin-hero-heading {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 20px);
  min-width: 0;
}
.plugin-hero-text {
  min-width: 0;
}
.plugin-hero-standfirst {
  margin-top: 4px;
  font-size: clamp(14px, 1.3vw, 16px);
  line-height: 1.4;
}
.plugin-hero-mark {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: clamp(56px, 6vw, 76px);
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--openbot-glass-border);
  border-radius: var(--openbot-radius-logo);
  background: var(--openbot-glass-surface);
  pointer-events: none;
}
.plugin-hero-mark-icon {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.plugin-hero-mark:has(.plugin-hero-mark-icon) {
  border-color: transparent;
  background: none;
}
.plugin-hero-mark-logo {
  width: auto;
  max-width: 64%;
  height: 32%;
}
.plugin-actions-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}
.plugin-dialog {
  width: min(380px, calc(100vw - 32px));
  margin: auto;
  padding: 22px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-sidebar);
  box-shadow: var(--openbot-shadow-overlay);
  color: var(--openbot-text-primary);
  animation: plugin-dialog-enter var(--openbot-duration-overlay) var(--openbot-ease-out) both;
}
@keyframes plugin-dialog-enter {
  from {
    opacity: 0;
    transform: scale(0.97) translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.plugin-dialog::backdrop {
  background: var(--openbot-dialog-overlay);
  backdrop-filter: blur(6px);
}
.plugin-dialog-title {
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
}
.plugin-dialog-copy {
  margin: 8px 0 0;
  color: var(--openbot-text-dim);
  font-size: 14px;
  line-height: 1.55;
}
.plugin-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}
.plugin-dialog-dismiss {
  margin: 0;
  padding: 6px 10px;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  background: none;
  color: var(--openbot-text-dim);
  font: inherit;
  font-size: 13px;
  transition: color var(--openbot-duration-fast) ease;
}
.plugin-dialog-dismiss:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--openbot-accent-strong);
}
.plugin-body {
  margin-top: clamp(32px, 4vw, 48px);
}
.plugin-description {
  margin: 0;
  color: var(--openbot-text-readable);
  font-size: 17px;
  line-height: 1.7;
}
.plugin-section {
  margin-top: clamp(32px, 4vw, 48px);
}
@property --agent-share-accent {
  syntax: "<color>";
  inherits: true;
  initial-value: #8a8f98;
}
.agent-share-page {
  transition: --agent-share-accent 600ms ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--openbot-bg-canvas);
}
.agent-share-main {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: clamp(12px, 3vh, 40px) 16px 24px;
}
.agent-share-card {
  position: relative;
  z-index: 1;
  width: min(100%, 520px);
  overflow: hidden;
  border: 1px solid var(--openbot-glass-border);
  border-radius: 28px;
  background: var(--openbot-bg-surface);
  box-shadow: 0 40px 120px -40px var(--agent-share-accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 40px 120px -40px color-mix(in srgb, var(--agent-share-accent) 45%, transparent);
  }
}
.agent-share-hero {
  position: relative;
  display: grid;
  place-items: center;
  height: clamp(160px, 26vh, 236px);
  overflow: hidden;
  background: radial-gradient(70% 90% at 18% 0%, var(--agent-share-accent), transparent 70%), radial-gradient( 60% 80% at 85% 100%, var(--agent-share-accent), transparent 70% ), radial-gradient(45% 60% at 50% 55%, var(--agent-share-accent), transparent 75%), linear-gradient( 160deg, var(--agent-share-accent), var(--agent-share-accent) );
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient(70% 90% at 18% 0%, color-mix(in srgb, var(--agent-share-accent) 30%, transparent), transparent 70%), radial-gradient( 60% 80% at 85% 100%, color-mix(in srgb, var(--agent-share-accent) 55%, transparent), transparent 70% ), radial-gradient(45% 60% at 50% 55%, color-mix(in srgb, var(--agent-share-accent) 40%, transparent), transparent 75%), linear-gradient( 160deg, color-mix(in srgb, var(--agent-share-accent) 18%, #101012), color-mix(in srgb, var(--agent-share-accent) 34%, #141416) );
  }
}
.agent-share-hero::after {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  content: "";
  mix-blend-mode: overlay;
  opacity: 0.35;
  pointer-events: none;
}
.agent-share-hero .agent-share-avatar {
  --agent-share-avatar-size: clamp(100px, 16vh, 140px);
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--agent-share-avatar-size);
  height: var(--agent-share-avatar-size);
  border-radius: var(--openbot-radius-pill);
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.35));
}
.agent-share-hero .agent-share-avatar > svg {
  display: block;
  width: 128%;
  height: 128%;
  overflow: visible;
  translate: 0 calc(var(--agent-share-avatar-size) * -0.14);
}
.agent-share-hero .agent-share-avatar.agent-avatar-custom {
  overflow: hidden;
  box-shadow: 0 0 0 4px color-mix(in srgb, #ffffff 12%, transparent);
}
.agent-share-hero .agent-share-avatar.agent-avatar-custom img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.agent-share-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 22px clamp(20px, 5vw, 40px) 26px;
  text-align: center;
}
.agent-share-name {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: clamp(26px, 4vw, 30px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.agent-share-creator {
  margin: 4px 0 0;
  color: var(--openbot-text-secondary);
  font-size: 15px;
}
.agent-share-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.agent-share-tags > li {
  padding: 3px 10px;
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-secondary);
  font-size: 12px;
}
.agent-share-description {
  display: -webkit-box;
  margin: 14px 0 0;
  overflow: hidden;
  color: var(--openbot-text-secondary);
  font-size: 16px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
.agent-share-instructions {
  width: 100%;
  margin: 14px 0 0;
  color: var(--openbot-text-secondary);
  font-size: 16px;
  line-height: 1.55;
  text-align: start;
  overflow-wrap: anywhere;
}
.agent-share-instructions > :not(:first-child) {
  margin-top: 12px;
}
.agent-share-instructions-text {
  white-space: pre-wrap;
}
.agent-share-instructions .message-markdown-heading {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
}
.agent-share-instructions .message-markdown-heading:is([data-level="1"], [data-level="2"]) {
  font-size: 19px;
}
.agent-share-instructions * + .message-markdown-heading {
  margin-top: 20px;
}
.agent-share-instructions :is(ul, ol) {
  padding-left: 22px;
}
.agent-share-instructions ul {
  list-style: disc;
}
.agent-share-instructions ul ul {
  list-style: circle;
}
.agent-share-instructions ol {
  list-style: decimal;
}
.agent-share-instructions li + li, .agent-share-instructions li > :is(ul, ol) {
  margin-top: 4px;
}
.agent-share-instructions strong {
  color: var(--openbot-text-primary);
  font-weight: 600;
}
.agent-share-instructions code {
  font-family: var(--openbot-font-mono);
  font-size: 0.9em;
}
.agent-share-instructions .message-link {
  color: var(--openbot-text-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.agent-share-instructions .message-link-icon {
  position: relative;
  display: inline-flex;
  width: 14px;
  height: 14px;
  margin-right: 4px;
  vertical-align: -2px;
}
.agent-share-instructions .message-link-icon :is(svg, img) {
  position: absolute;
  inset: 0;
  width: 14px;
  height: 14px;
}
.agent-share-more {
  margin-top: 4px;
  padding: 2px 8px;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: none;
  color: var(--openbot-text-muted);
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.agent-share-more:hover {
  color: var(--openbot-text-primary);
}
.agent-share-divider {
  width: 100%;
  height: 1px;
  margin: 18px 0 0;
  border: 0;
  background: var(--openbot-border-grouped);
}
.agent-share-notice {
  margin: 12px 0 0;
  color: var(--openbot-text-dim);
  font-size: 12px;
  line-height: 1.5;
}
.agent-share-action {
  margin-top: 14px;
}
.agent-share-action .plugin-actions-row {
  justify-content: center;
}
.agent-share-fallback {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: 14px;
  text-align: center;
}
.agent-share-fallback a {
  color: var(--openbot-text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.plugin-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  color: var(--openbot-text-primary);
  font-size: 15px;
  font-weight: 500;
}
.plugin-section-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding-inline: 6px;
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-glass-surface);
  color: var(--openbot-text-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.plugin-prompts-card {
  border-radius: 14px;
  padding: clamp(16px, 2.4vw, 24px);
}
.plugin-prompts {
  position: relative;
  pointer-events: auto;
  width: min(100%, 520px);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.plugin-rows {
  overflow: hidden;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-surface);
}
.plugin-prompt {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-canvas);
  padding: 12px;
  color: var(--openbot-text-secondary);
  font-size: 15px;
  line-height: 1.5;
}
.plugin-prompt-chip {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-glass-surface);
  padding: 3px 10px 3px 6px;
  color: var(--openbot-text-primary);
  font-size: 13px;
}
.plugin-prompt-mark {
  width: auto;
  max-width: 56px;
  height: 14px;
  font-size: 12px;
  filter: none;
}
.plugin-prompt-text {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.plugin-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px 14px;
  color: var(--openbot-text-secondary);
  font-size: 14px;
  line-height: 1.55;
}
.plugin-rows > .plugin-row + .plugin-row {
  border-top: 1px solid var(--openbot-border-strong);
}
.plugin-row-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 32px;
  height: 32px;
  overflow: hidden;
  border: 1px solid var(--openbot-glass-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-glass-surface);
  padding: 5px;
  color: var(--openbot-accent-text);
}
.plugin-row-icon svg {
  width: 16px;
  height: 16px;
}
.plugin-icon {
  display: block;
  aspect-ratio: 1;
  object-fit: cover;
}
.plugin-row-icon .plugin-icon {
  width: 100%;
  height: 100%;
}
.plugin-row-icon:has(.plugin-icon) {
  border-color: transparent;
  background: none;
  padding: 0;
}
.plugin-prompt-icon {
  width: 14px;
  height: 14px;
  border-radius: 4px;
}
.plugin-row-text {
  min-width: 0;
}
.plugin-row-title {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: 14px;
  font-weight: 500;
}
.plugin-row-copy {
  margin: 2px 0 0;
  color: var(--openbot-text-dim);
  font-size: 13px;
  line-height: 1.55;
}
.plugin-facts {
  margin: 0;
  display: grid;
  gap: 0;
}
.plugin-fact {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 16px;
  padding: 11px 0;
  border-top: 1px solid var(--openbot-glass-surface);
  font-size: 14px;
}
.plugin-fact dt {
  color: var(--openbot-text-dim);
}
.plugin-fact dd {
  margin: 0;
  min-width: 0;
  color: var(--openbot-text-secondary);
  overflow-wrap: anywhere;
}
.plugin-fact-link {
  color: var(--openbot-text-secondary);
  text-decoration: none;
  transition: color var(--openbot-duration-normal) ease;
}
@media (max-width: 900px) {
  .plugin-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .plugin-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .plugin-fact {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
  }
}
@media (hover: hover) and (pointer: fine) {
  .plugin-card, .plugin-dialog-dismiss {
    cursor: pointer;
  }
  .plugin-card-logo, .plugin-card-icon {
    transform: scale(1);
    transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
    will-change: transform;
  }
  .plugin-tag-button:hover:not([aria-pressed="true"]) {
    border-color: var(--openbot-text-dim);
    background: var(--openbot-bg-control-hover);
    color: var(--openbot-text-primary);
  }
  .plugin-tag-button[aria-pressed="true"]:hover {
    background: var(--openbot-text-primary);
  }
  .plugin-card:hover .plugin-card-logo, .plugin-card:hover .plugin-card-icon {
    transform: scale(1.06);
  }
  .plugin-card:hover .plugin-card-title, .plugin-dialog-dismiss:hover, .plugin-fact-link:hover {
    color: var(--openbot-text-primary);
  }
}
@media (prefers-reduced-motion: reduce) {
  .plugin-grid-section[data-revealed] .plugin-card {
    opacity: 1;
    animation: none;
  }
  .plugin-card, .plugin-card-title, .plugin-card-art, .plugin-fact-link {
    transition: none;
  }
  .plugin-card-logo, .plugin-card-icon, .plugin-tag-button {
    transition: none;
    transform: none;
  }
  .plugin-dialog {
    animation: none;
  }
}
.not-found-main {
  position: relative;
  isolation: isolate;
  width: min(100%, 1280px);
  display: grid;
  justify-items: center;
  margin: 0 auto;
  padding: clamp(40px, 7vw, 88px) clamp(20px, 4vw, 48px) 96px;
  text-align: center;
}
.not-found-grid {
  mask-image: radial-gradient(60% 55% at 50% 30%, var(--openbot-mask-solid) 30%, var(--openbot-transparent) 100%);
}
.not-found-searchlight {
  position: absolute;
  z-index: -1;
  top: -80px;
  left: 50%;
  width: min(760px, 120vw);
  aspect-ratio: 1;
  margin-left: calc(min(760px, 120vw) / -2);
  pointer-events: none;
  background: radial-gradient( closest-side, var(--openbot-logo-production), var(--openbot-transparent) );
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient( closest-side, color-mix(in srgb, var(--openbot-logo-production) 22%, var(--openbot-transparent)), var(--openbot-transparent) );
  }
  animation: not-found-sweep 9s ease-in-out infinite alternate;
}
.not-found-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.08em;
  font-size: clamp(112px, 24vw, 248px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.06em;
  user-select: none;
}
.not-found-digit, .not-found-bot {
  animation: not-found-drop 900ms var(--openbot-ease-out) both, not-found-float 6s ease-in-out 900ms infinite;
}
.not-found-digit {
  background-image: linear-gradient( 180deg, var(--openbot-text-primary) 25%, var(--openbot-logo-production) );
  @supports (color: color-mix(in lab, red, red)) {
    background-image: linear-gradient( 180deg, var(--openbot-text-primary) 25%, color-mix(in srgb, var(--openbot-logo-production) 70%, var(--openbot-transparent)) );
  }
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--openbot-transparent);
}
.not-found-bot {
  position: relative;
  width: 0.74em;
  height: 0.74em;
  margin: 0 0.06em;
  animation-delay: 120ms, 120ms;
}
.not-found-digit:last-child {
  animation: not-found-drop 900ms var(--openbot-ease-out) 240ms both, not-found-float 6s ease-in-out -3s infinite, not-found-flicker 7s linear 2s infinite;
}
.not-found-bot-logo {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 24%;
  pointer-events: none;
  filter: drop-shadow(0 0 48px var(--openbot-logo-production));
  @supports (color: color-mix(in lab, red, red)) {
    filter: drop-shadow(0 0 48px color-mix(in srgb, var(--openbot-logo-production) 45%, var(--openbot-transparent)));
  }
  animation: not-found-tilt 6s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
.not-found-stage[data-tracking="true"] .not-found-bot-logo {
  animation: none;
}
.not-found-bot-shadow {
  position: absolute;
  left: 12%;
  bottom: -0.2em;
  width: 76%;
  height: 0.07em;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--openbot-scroll-edge-overlay), var(--openbot-transparent));
  animation: not-found-shadow 6s ease-in-out 900ms infinite;
}
.not-found-copy {
  display: grid;
  justify-items: center;
  margin-top: clamp(28px, 5vw, 48px);
  animation: landing-enter 700ms var(--openbot-ease-out) 420ms both;
}
.not-found-eyebrow {
  margin: 0 0 12px;
  color: var(--openbot-logo-production);
  font-family: var(--openbot-font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.not-found-title {
  margin: 0;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.04em;
}
.not-found-description {
  max-width: 460px;
  margin: 16px 0 0;
  color: var(--openbot-text-secondary);
  font-size: 16px;
  line-height: 1.55;
}
.not-found-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}
.not-found-terminal {
  width: min(100%, 540px);
  margin-top: 48px;
  overflow: hidden;
  border: 1px solid var(--openbot-glass-border);
  border-radius: 14px;
  background: var(--openbot-bg-glass);
  box-shadow: 0 24px 80px var(--openbot-glass-shadow);
  backdrop-filter: blur(12px);
  text-align: left;
  animation: landing-enter 700ms var(--openbot-ease-out) 560ms both;
}
.not-found-terminal-bar {
  display: flex;
  gap: 6px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--openbot-glass-surface);
}
.not-found-terminal-bar i {
  width: 9px;
  height: 9px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-glass-surface-hover);
}
.not-found-terminal-lines {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 16px 18px 18px;
  list-style: none;
  color: var(--openbot-text-secondary);
  font-family: var(--openbot-font-mono);
  font-size: 13px;
  line-height: 1.5;
}
.not-found-line {
  overflow-wrap: anywhere;
  animation: not-found-type 480ms steps(24, end) calc(1100ms + var(--line) * 560ms) both;
}
.not-found-prompt, .not-found-arrow {
  color: var(--openbot-logo-production);
}
.not-found-path {
  color: var(--openbot-text-primary);
}
.not-found-result {
  color: var(--openbot-text-dim);
}
.not-found-line-error {
  color: var(--openbot-danger-text);
}
.not-found-caret {
  display: inline-block;
  width: 0.55em;
  height: 1.1em;
  margin-left: 4px;
  vertical-align: text-bottom;
  background: var(--openbot-text-secondary);
  animation: not-found-caret 1s steps(1, end) infinite;
}
.not-found-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
}
.not-found-link {
  padding: 7px 14px;
  border: 1px solid var(--openbot-glass-border);
  border-radius: var(--openbot-radius-pill);
  color: var(--openbot-text-muted);
  font-size: 13px;
  transition: color var(--openbot-duration-normal) ease, background-color var(--openbot-duration-normal) ease, border-color var(--openbot-duration-normal) ease;
  animation: landing-enter 500ms var(--openbot-ease-out) calc(3900ms + var(--link) * 70ms) both;
}
.not-found-link:hover {
  border-color: var(--openbot-glass-highlight);
  background: var(--openbot-glass-surface);
  color: var(--openbot-text-primary);
}
.not-found-link:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}
@keyframes not-found-drop {
  from {
    opacity: 0;
    transform: translateY(-0.4em) scale(0.9);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes not-found-float {
  0%, 100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -0.05em;
  }
}
@keyframes not-found-shadow {
  0%, 100% {
    opacity: 1;
    scale: 1;
  }
  50% {
    opacity: 0.5;
    scale: 0.8;
  }
}
@keyframes not-found-tilt {
  0%, 30%, 47%, 64%, 100% {
    rotate: 0deg;
  }
  35%, 42% {
    rotate: -7deg;
  }
  52%, 59% {
    rotate: 7deg;
  }
}
@keyframes not-found-flicker {
  0%, 70%, 73%, 76%, 100% {
    opacity: 1;
  }
  71%, 74.5% {
    opacity: 0.25;
  }
}
@keyframes not-found-sweep {
  from {
    translate: -34% 0;
  }
  to {
    translate: 34% 8%;
  }
}
@keyframes not-found-type {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0);
  }
}
@keyframes not-found-caret {
  50% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .not-found-searchlight, .not-found-digit, .not-found-digit:last-child, .not-found-bot, .not-found-bot-logo, .not-found-bot-shadow, .not-found-copy, .not-found-terminal, .not-found-line, .not-found-caret, .not-found-link {
    animation: none;
  }
  .not-found-link {
    transition: none;
  }
}
.changelog-page {
  --changelog-hairline: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --changelog-hairline: color-mix(in srgb, var(--openbot-text-primary) 8%, transparent);
  }
  --changelog-scroll-offset: 24px;
  --changelog-swap-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --changelog-swap-duration: 460ms;
  --changelog-swap-quick: 300ms;
}
.changelog-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: clamp(320px, 38vw, 460px);
  margin-top: clamp(4px, 1vw, 12px);
}
.changelog-hero-art {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  border-radius: 24px;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, var(--openbot-mask-solid) 40%, transparent 100%);
  mask-image: linear-gradient(to bottom, var(--openbot-mask-solid) 40%, transparent 100%);
}
.changelog-hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient( 100deg, var(--openbot-bg-canvas) 0%, var(--openbot-bg-canvas) 55%, transparent 80% );
  @supports (color: color-mix(in lab, red, red)) {
    background-image: linear-gradient( 100deg, color-mix(in srgb, var(--openbot-bg-canvas) 62%, transparent) 0%, color-mix(in srgb, var(--openbot-bg-canvas) 18%, transparent) 55%, transparent 80% );
  }
}
.changelog-hero-copy {
  max-width: 760px;
  padding: clamp(40px, 6vw, 72px) clamp(24px, 4vw, 56px) clamp(40px, 5vw, 64px);
}
.changelog-eyebrow {
  margin: 0;
  color: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--openbot-text-primary) 76%, transparent);
  }
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.changelog-title {
  margin: 12px 0 0;
  color: var(--openbot-text-primary);
  font-size: clamp(38px, 5.6vw, 72px);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1;
  text-wrap: balance;
}
.changelog-lede {
  max-width: 54ch;
  margin: 18px 0 0;
  color: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--openbot-text-primary) 80%, transparent);
  }
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.55;
  text-wrap: pretty;
}
.changelog-latest {
  padding: 0 clamp(24px, 4vw, 56px) 20px;
  border-bottom: 1px solid var(--changelog-hairline);
}
.changelog-latest-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}
.changelog-latest-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.changelog-latest-text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: 14px;
}
.changelog-latest-dot {
  position: relative;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success);
}
.changelog-latest-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--openbot-success);
  animation: changelog-pulse 2.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
@keyframes changelog-pulse {
  from {
    opacity: 0.6;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(3.2);
  }
}
.changelog-latest-version {
  border-radius: var(--openbot-radius-xs);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
  font-weight: 500;
  text-decoration: none;
}
.changelog-latest-version:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}
.changelog-latest-date {
  color: var(--openbot-text-dim);
}
.changelog-layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  align-items: start;
  gap: clamp(40px, 6vw, 96px);
  margin-top: clamp(36px, 4.5vw, 64px);
  scroll-margin-top: var(--changelog-scroll-offset);
}
.changelog-swap {
  position: relative;
  min-width: 0;
}
.changelog-swap-panel[data-motion] {
  --site-nav-blur: 8px;
  --site-nav-rise: 0px;
  will-change: opacity, transform, filter;
}
.changelog-swap-panel[data-motion="from-start"], .changelog-swap-panel[data-motion="to-start"] {
  --site-nav-shift: -40px;
}
.changelog-swap-panel[data-motion="from-end"], .changelog-swap-panel[data-motion="to-end"] {
  --site-nav-shift: 40px;
}
.changelog-swap-panel[data-motion="from-start"], .changelog-swap-panel[data-motion="from-end"] {
  animation: site-nav-panel-enter var(--changelog-swap-duration) var(--changelog-swap-ease) both;
}
.changelog-swap-panel[data-motion="to-start"], .changelog-swap-panel[data-motion="to-end"] {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  max-height: 100dvh;
  overflow: clip;
  pointer-events: none;
  animation: site-nav-panel-leave var(--changelog-swap-quick) var(--changelog-swap-ease) both;
}
.changelog-platforms {
  margin: 0 0 22px;
}
.changelog-platforms-track {
  position: relative;
  display: inline-flex;
  padding: 3px;
  border-radius: var(--openbot-radius-pill);
  background: rgba(255, 255, 255, 0.025);
  box-shadow: 0 0 0 1px var(--changelog-hairline), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.changelog-platforms-track::before {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: var(--changelog-pill-width, 0);
  border-radius: var(--openbot-radius-pill);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 1px 2px rgba(0, 0, 0, 0.32);
  opacity: 0;
  pointer-events: none;
  transform: translateX(var(--changelog-pill-x, 0));
}
.changelog-platforms-track[data-ready]::before {
  opacity: 1;
  transition: transform var(--changelog-swap-quick) var(--changelog-swap-ease), width var(--changelog-swap-quick) var(--changelog-swap-ease);
}
.changelog-platform {
  position: relative;
  z-index: 1;
  padding: 5px 12px;
  border-radius: var(--openbot-radius-pill);
  color: var(--openbot-text-muted);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--openbot-duration-normal) ease;
}
.changelog-platform[aria-current="page"] {
  color: var(--openbot-text-primary);
}
.changelog-platforms-track:not([data-ready]) .changelog-platform[aria-current="page"] {
  background: rgba(255, 255, 255, 0.08);
}
.changelog-platform:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px var(--openbot-accent-strong);
}
.changelog-index {
  position: sticky;
  top: var(--changelog-scroll-offset);
}
.changelog-index-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 14px;
  color: var(--openbot-text-dim);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.changelog-index-count {
  color: var(--openbot-text-muted);
  font-family: var(--openbot-font-mono);
  font-weight: 500;
  letter-spacing: 0;
}
.changelog-index-scroll {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-height: calc(100dvh - var(--changelog-scroll-offset) * 2 - 96px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 0 24px;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient( to bottom, transparent, var(--openbot-mask-solid) 12px, var(--openbot-mask-solid) calc(100% - 32px), transparent );
  mask-image: linear-gradient( to bottom, transparent, var(--openbot-mask-solid) 12px, var(--openbot-mask-solid) calc(100% - 32px), transparent );
}
.changelog-index-scroll::-webkit-scrollbar {
  display: none;
}
.changelog-index-month-label {
  margin: 0 0 6px 14px;
  color: var(--openbot-text-dim);
  font-size: 12px;
  font-weight: 500;
}
.changelog-index-list {
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--changelog-hairline);
  list-style: none;
}
.changelog-index-link {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 10px 6px 14px;
  border-radius: 0 var(--openbot-radius-sm) var(--openbot-radius-sm) 0;
  color: var(--openbot-text-dim);
  font-size: 13px;
  text-decoration: none;
  transition: color var(--openbot-duration-normal) ease;
}
.changelog-index-link::before {
  content: "";
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: -1px;
  width: 2px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-primary);
  opacity: 0;
  transform: scaleY(0.3);
  transition: opacity var(--openbot-duration-normal) ease, transform 320ms var(--openbot-ease-out);
}
.changelog-index-link[aria-current="true"] {
  color: var(--openbot-text-primary);
}
.changelog-index-link[aria-current="true"]::before {
  opacity: 1;
  transform: none;
}
.changelog-index-link:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: -2px;
}
.changelog-index-version {
  font-family: var(--openbot-font-mono);
  font-variant-numeric: tabular-nums;
}
.changelog-index-date {
  color: var(--openbot-text-dim);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.changelog-releases {
  min-width: 0;
  max-width: 780px;
}
.changelog-release {
  padding: clamp(36px, 4.5vw, 56px) 0;
  border-top: 1px solid var(--changelog-hairline);
  scroll-margin-top: var(--changelog-scroll-offset);
}
.changelog-release:first-child {
  padding-top: 0;
  border-top: 0;
}
.changelog-release[data-revealed="false"] {
  opacity: 0;
}
.changelog-release[data-revealed="true"] {
  animation: landing-download-reveal 720ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.changelog-release-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: var(--openbot-text-dim);
  font-size: 13px;
}
.changelog-release-badge {
  padding: 2px 8px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success-soft);
  color: var(--openbot-success-text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.changelog-stores {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}
.changelog-store {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: var(--openbot-radius-pill);
  box-shadow: inset 0 0 0 1px var(--changelog-hairline);
  color: var(--openbot-text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.changelog-store-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success);
}
.changelog-store-detail {
  color: var(--openbot-text-dim);
  font-weight: 500;
}
.changelog-store[data-state="review"] {
  background: var(--openbot-warning-soft);
  box-shadow: none;
  color: var(--openbot-warning-text);
}
.changelog-store[data-state="review"] .changelog-store-dot {
  background: currentColor;
  opacity: 0.6;
}
.changelog-store[data-state="review"] .changelog-store-detail {
  color: inherit;
}
.changelog-release-title {
  margin: 8px 0 0;
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.15;
}
.changelog-release-anchor {
  border-radius: var(--openbot-radius-sm);
  color: var(--openbot-text-primary);
  text-decoration: none;
}
.changelog-release-anchor::after {
  content: "#";
  margin-left: 10px;
  color: var(--openbot-text-dim);
  font-weight: 400;
  opacity: 0;
  transition: opacity var(--openbot-duration-normal) ease;
}
.changelog-release-anchor:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 4px;
}
.changelog-release-version {
  color: var(--openbot-text-muted);
  font-weight: 500;
  transition: color var(--openbot-duration-normal) ease;
}
.changelog-release-intro {
  max-width: 68ch;
  margin: 16px 0 0;
  color: var(--openbot-text-secondary);
  font-size: 15px;
  line-height: 1.65;
}
.changelog-code {
  padding: 1px 6px;
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-surface);
  box-shadow: inset 0 0 0 1px var(--changelog-hairline);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
  font-size: 0.86em;
  overflow-wrap: anywhere;
}
.changelog-strong {
  color: var(--openbot-text-primary);
  font-weight: 600;
}
.changelog-link {
  border-radius: var(--openbot-radius-xs);
  color: var(--openbot-accent-text);
  text-decoration: none;
}
.changelog-link:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}
.changelog-notice {
  margin-top: 24px;
  padding: 16px 18px 18px;
  border-radius: var(--openbot-radius-card);
  background-image: linear-gradient( 180deg, var(--openbot-warning-soft), var(--openbot-warning) );
  @supports (color: color-mix(in lab, red, red)) {
    background-image: linear-gradient( 180deg, var(--openbot-warning-soft), color-mix(in srgb, var(--openbot-warning) 3%, transparent) );
  }
  box-shadow: inset 0 0 0 1px var(--openbot-warning);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--openbot-warning) 26%, transparent);
  }
}
.changelog-notice-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--openbot-warning-text);
  font-size: 13px;
  font-weight: 600;
}
.changelog-notice-mark {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-warning);
  color: var(--openbot-text-on-light);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.changelog-notice-list {
  display: grid;
  gap: 10px;
  margin: 10px 0 0;
  padding: 0 0 0 28px;
  list-style: none;
}
.changelog-notice-item {
  color: var(--openbot-text-secondary);
  font-size: 15px;
  line-height: 1.6;
}
.changelog-notice .changelog-strong {
  color: var(--openbot-text-primary);
  font-weight: 500;
}
.changelog-group {
  --changelog-tone: var(--openbot-text-muted);
  margin-top: 28px;
}
.changelog-group[data-type="added"] {
  --changelog-tone: var(--openbot-logo-production);
}
.changelog-group[data-type="changed"] {
  --changelog-tone: var(--openbot-accent-text);
}
.changelog-group[data-type="fixed"] {
  --changelog-tone: var(--openbot-success-text);
}
.changelog-group[data-type="removed"], .changelog-group[data-type="security"], .changelog-group[data-type="deprecated"] {
  --changelog-tone: var(--openbot-warning-text);
}
.changelog-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  color: var(--changelog-tone);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.changelog-group-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--openbot-radius-pill);
  background: var(--changelog-tone);
  box-shadow: 0 0 10px var(--changelog-tone);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 10px color-mix(in srgb, var(--changelog-tone) 70%, transparent);
  }
}
.changelog-group-count {
  padding: 1px 7px;
  border-radius: var(--openbot-radius-pill);
  background: var(--changelog-tone);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--changelog-tone) 12%, transparent);
  }
  font-family: var(--openbot-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
}
.changelog-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.changelog-item {
  position: relative;
  padding-left: 22px;
  color: var(--openbot-text-secondary);
  font-size: 15px;
  line-height: 1.6;
  text-wrap: pretty;
}
.changelog-item::before {
  content: "";
  position: absolute;
  top: 0.8em;
  left: 4px;
  width: 8px;
  height: 1px;
  background: var(--changelog-tone);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--changelog-tone) 70%, transparent);
  }
}
@media (max-width: 959px) {
  .changelog-page {
    --changelog-scroll-offset: 72px;
  }
  .changelog-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    margin-top: 0;
    scroll-margin-top: 0;
  }
  .changelog-platforms {
    margin: 0 0 12px;
    padding: 0 clamp(20px, 4vw, 48px);
  }
  .changelog-index {
    z-index: 5;
    top: 0;
    margin: 0 calc(clamp(20px, 4vw, 48px) * -1);
    padding: 12px 0;
    border-bottom: 1px solid var(--changelog-hairline);
    background: var(--openbot-bg-canvas);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--openbot-bg-canvas) 86%, transparent);
    }
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
  }
  .changelog-index-title, .changelog-index-month-label {
    display: none;
  }
  .changelog-index-scroll {
    flex-direction: row;
    gap: 6px;
    max-height: none;
    overflow: auto hidden;
    padding: 0 clamp(20px, 4vw, 48px);
    -webkit-mask-image: linear-gradient( to right, transparent, var(--openbot-mask-solid) 16px, var(--openbot-mask-solid) calc(100% - 32px), transparent );
    mask-image: linear-gradient( to right, transparent, var(--openbot-mask-solid) 16px, var(--openbot-mask-solid) calc(100% - 32px), transparent );
  }
  .changelog-index-month, .changelog-index-list {
    display: contents;
  }
  .changelog-index-item {
    flex: 0 0 auto;
  }
  .changelog-index-link {
    padding: 6px 12px;
    border-radius: var(--openbot-radius-pill);
    box-shadow: inset 0 0 0 1px var(--changelog-hairline);
    transition: color var(--openbot-duration-normal) ease, background-color var(--openbot-duration-normal) ease;
  }
  .changelog-index-link::before, .changelog-index-date {
    display: none;
  }
  .changelog-index-link[aria-current="true"] {
    background: var(--openbot-action);
    color: var(--openbot-action-foreground);
  }
  .changelog-latest {
    padding-right: 0;
    padding-left: 0;
  }
  .changelog-hero-copy {
    padding-right: clamp(20px, 4vw, 32px);
    padding-left: clamp(20px, 4vw, 32px);
  }
  .changelog-hero-art {
    border-radius: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .changelog-latest-dot::after {
    animation: none;
    opacity: 0;
  }
  .changelog-swap-panel[data-motion] {
    animation: none;
  }
  .changelog-platforms-track[data-ready]::before, .changelog-platform {
    transition: none;
  }
  .changelog-release[data-revealed="true"] {
    animation: none;
  }
  .changelog-index-link, .changelog-index-link::before, .changelog-release-anchor::after, .changelog-release-version {
    transition: none;
  }
}
@media (hover: hover) and (pointer: fine) {
  .changelog-index-link:hover, .changelog-platform:not([aria-current="page"]):hover {
    color: var(--openbot-text-secondary);
  }
  .changelog-release-anchor:hover .changelog-release-version {
    color: var(--openbot-text-secondary);
  }
  .changelog-release-anchor:hover::after {
    opacity: 1;
  }
  .changelog-latest-version:hover, .changelog-link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}
.download-main {
  width: min(100%, 1280px);
  margin: 0 auto;
  padding: clamp(12px, 2vw, 24px) clamp(20px, 4vw, 48px) clamp(64px, 8vw, 112px);
}
.download-main[data-download-platform="macos"], .download-main [data-download-platform="macos"] {
  --download-color: var(--openbot-logo-production);
}
.download-main[data-download-platform="windows"], .download-main [data-download-platform="windows"] {
  --download-color: var(--openbot-logo-preview);
}
.download-main[data-download-platform="linux"], .download-main [data-download-platform="linux"] {
  --download-color: var(--openbot-logo-dev);
}
.download-main[data-download-platform="ios"], .download-main [data-download-platform="ios"] {
  --download-color: var(--download-ios-color);
}
.download-main[data-download-platform="android"], .download-main [data-download-platform="android"] {
  --download-color: var(--download-android-color);
}
.download-panel, .download-hub-card, .download-system-card {
  border: 1px solid var(--openbot-download-card-border);
  background: var(--download-color);
  color: var(--openbot-text-on-light);
}
.download-panel {
  overflow: hidden;
  border-radius: 28px;
}
.download-panel-body {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  padding: clamp(24px, 4.4vw, 60px) clamp(24px, 4.4vw, 60px) clamp(36px, 5vw, 68px);
}
.download-panel-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--openbot-radius-pill);
  color: var(--openbot-download-card-muted);
  font-size: 14px;
  font-weight: 500;
  transition: color var(--openbot-duration-normal) ease;
}
.download-panel-back-icon {
  width: 16px;
  height: 16px;
  transform: scaleX(-1);
}
.download-panel-title {
  margin: clamp(36px, 5vw, 64px) 0 0;
  font-size: clamp(46px, 7.4vw, 104px);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 0.94;
  text-wrap: balance;
}
.download-panel-intro {
  max-width: 50ch;
  margin: clamp(20px, 2.4vw, 28px) 0 0;
  color: var(--openbot-download-card-muted);
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.5;
}
.download-panel-installers {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 28px;
  margin: clamp(32px, 4vw, 44px) 0 0;
  padding: 0;
  list-style: none;
}
.download-panel-installers li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.download-panel-installer-detail {
  padding-left: 4px;
  color: var(--openbot-download-card-muted);
  font-size: 13px;
}
.download-panel-logo {
  width: clamp(120px, 17vw, 232px);
  height: clamp(120px, 17vw, 232px);
}
.download-panel-specs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--openbot-download-card-border);
}
.download-panel-specs > div {
  min-width: 0;
  padding: 20px clamp(20px, 2.4vw, 32px) 24px;
}
.download-panel-specs > div + div {
  border-left: 1px solid var(--openbot-download-card-border);
}
.download-panel-specs dt, .download-hub-card-specs dt {
  color: var(--openbot-download-card-muted);
  font-size: 13px;
}
.download-panel-specs dd {
  margin: 6px 0 0;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.35;
}
.download-installer-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 24px 0 20px;
  border: 1px solid var(--openbot-text-on-light);
  border-radius: var(--openbot-radius-pill);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: background-color var(--openbot-duration-normal) ease, color var(--openbot-duration-normal) ease, transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.download-installer-button[data-variant="primary"] {
  background: var(--openbot-text-on-light);
  color: var(--download-color);
}
.download-installer-button[data-variant="secondary"] {
  background: var(--openbot-download-card-chip);
  color: var(--openbot-text-on-light);
}
.download-installer-icon {
  width: 18px;
  height: 18px;
  flex: none;
}
.download-installer-button:focus-visible, .download-panel-back:focus-visible, .download-hub-card-link:focus-visible, .download-system-card:focus-visible {
  outline: 3px solid var(--openbot-download-card-focus);
  outline-offset: 3px;
}
.download-rows {
  margin-top: clamp(56px, 8vw, 104px);
}
.download-row {
  display: grid;
  grid-template-columns: minmax(180px, 300px) minmax(0, 1fr);
  gap: 24px clamp(32px, 5vw, 80px);
  padding: clamp(36px, 4.5vw, 56px) 0;
  border-top: 1px solid var(--openbot-border);
}
.download-row > * {
  min-width: 0;
  max-width: 760px;
}
.download-row-title {
  margin: 0;
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.1;
  text-wrap: balance;
}
.download-steps {
  display: grid;
  margin: 0;
  padding: 0;
  counter-reset: download-step;
  list-style: none;
}
.download-steps > li {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 20px;
  padding-bottom: 32px;
  counter-increment: download-step;
}
.download-steps > li:last-child {
  padding-bottom: 0;
}
.download-steps > li::before {
  content: counter(download-step);
  grid-row: 1 / span 2;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--download-color, var(--openbot-border-strong));
  border-radius: 50%;
  background: var(--openbot-bg-canvas);
  color: var(--download-color, var(--openbot-text-primary));
  font-size: 15px;
  font-weight: 500;
}
.download-steps > li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 48px;
  bottom: 8px;
  left: 19.5px;
  width: 1px;
  background: var(--openbot-border-strong);
}
.download-steps p {
  grid-column: 2;
  margin: 8px 0 0;
  color: var(--openbot-text-secondary);
  font-size: 16px;
  line-height: 1.6;
}
.download-command {
  grid-column: 2;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  margin-top: 14px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
}
.download-command pre {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow-x: auto;
  padding: 15px 18px;
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
  font-size: 13px;
  line-height: 1.65;
}
.download-command-copy {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  margin: 9px 9px 9px 0;
  padding: 0 12px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
  background: transparent;
  color: var(--openbot-text-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--openbot-duration-normal) ease, color var(--openbot-duration-normal) ease;
}
.download-command-copy[data-state="copied"] {
  color: var(--openbot-text-primary);
}
.download-command-copy:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}
.download-command-copy-icon {
  width: 14px;
  height: 14px;
}
.download-notes {
  margin: 0;
  padding: 0;
  list-style: none;
}
.download-notes li {
  position: relative;
  padding: 0 0 18px 24px;
  color: var(--openbot-text-secondary);
  font-size: 16px;
  line-height: 1.6;
}
.download-notes li + li {
  padding-top: 18px;
  border-top: 1px solid var(--openbot-border);
}
.download-notes li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--download-color, var(--openbot-text-dim));
}
.download-notes li + li::before {
  top: calc(18px + 0.62em);
}
.compare-faq-list.download-faq {
  margin-top: -18px;
  border-top: 0;
}
.download-system-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.download-system-card {
  min-height: 108px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  border-radius: 20px;
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.download-system-card-logo {
  width: 44px;
  height: 44px;
  flex: none;
}
.download-system-card-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.download-system-card-name {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.03em;
}
.download-system-card-detail {
  color: var(--openbot-download-card-muted);
  font-size: 13px;
  line-height: 1.4;
}
.download-system-card-arrow, .download-hub-card-link-icon {
  width: 16px;
  height: 16px;
  flex: none;
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.download-system-card-arrow {
  margin-left: auto;
}
.download-resources {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 28px;
  color: var(--openbot-text-muted);
  font-size: 14px;
}
.download-resources a {
  text-decoration: underline;
  text-decoration-color: var(--openbot-border-strong);
  text-underline-offset: 3px;
}
.download-hub-hero {
  padding-bottom: clamp(48px, 6vw, 80px);
}
.download-hub-intro {
  margin-bottom: clamp(28px, 3.4vw, 40px);
}
.download-hub-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.download-hub-card {
  min-width: 0;
  min-height: 540px;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 2.6vw, 34px);
  border-radius: 24px;
}
.download-hub-cards-mobile {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 18px;
}
.download-hub-cards-mobile .download-hub-card {
  min-height: 460px;
}
.download-hub-card-logo {
  width: clamp(80px, 7.4vw, 104px);
  height: clamp(80px, 7.4vw, 104px);
}
.download-hub-card-name {
  margin: auto 0 0;
  padding-top: 40px;
  font-size: clamp(36px, 3.6vw, 50px);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 1;
}
.download-hub-card-specs {
  margin: 22px 0 0;
}
.download-hub-card-specs > div {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--openbot-download-card-border);
  font-size: 14px;
  line-height: 1.4;
}
.download-hub-card-specs dd {
  margin: 0;
  font-weight: 500;
}
.download-hub-card-installers {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.download-hub-card .download-installer-button {
  height: 46px;
  padding: 0 20px 0 16px;
  font-size: 14px;
}
.download-hub-card-link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 22px;
  border-radius: var(--openbot-radius-xs);
  font-size: 14px;
  font-weight: 500;
}
.download-main > .download-resources {
  margin-top: 32px;
}
@media (hover: hover) and (pointer: fine) {
  .download-installer-button:hover {
    transform: translateY(-1px);
  }
  .download-installer-button[data-variant="secondary"]:hover {
    background: var(--openbot-download-card-border);
  }
  .download-panel-back:hover {
    color: var(--openbot-text-on-light);
  }
  .download-system-card:hover {
    transform: translateY(-3px);
  }
  .download-system-card:hover .download-system-card-arrow, .download-hub-card-link:hover .download-hub-card-link-icon {
    transform: translateX(3px);
  }
  .download-command-copy:hover {
    background: var(--openbot-bg-control-hover);
    color: var(--openbot-text-primary);
  }
  .download-resources a:hover {
    color: var(--openbot-text-primary);
  }
}
@media (prefers-reduced-motion: reduce) {
  .download-installer-button, .download-system-card, .download-system-card-arrow, .download-hub-card-link-icon {
    transition: none;
  }
  .download-installer-button:hover, .download-system-card:hover, .download-system-card:hover .download-system-card-arrow, .download-hub-card-link:hover .download-hub-card-link-icon {
    transform: none;
  }
}
@media (max-width: 960px) {
  .download-hub-cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .download-hub-card, .download-hub-cards-mobile .download-hub-card {
    min-height: 0;
  }
  .download-row {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 720px) {
  .download-panel-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .download-panel-logo {
    position: absolute;
    top: 20px;
    right: 22px;
    width: 52px;
    height: 52px;
  }
  .download-panel-specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .download-panel-specs > div:nth-child(odd) {
    border-left: 0;
  }
  .download-panel-specs > div:nth-child(n + 3) {
    border-top: 1px solid var(--openbot-download-card-border);
  }
  .download-system-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}
.landing-download-pages {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 28px;
  color: var(--openbot-text-muted);
  font-size: 14px;
}
.landing-download-pages-mobile {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-left: 4px;
  padding-left: 20px;
  border-left: 1px solid var(--openbot-border-strong);
}
.landing-download-pages a {
  color: var(--openbot-text-primary);
  text-decoration: underline;
  text-decoration-color: var(--openbot-border-strong);
  text-underline-offset: 3px;
}
.contact-section {
  --contact-fill: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --contact-fill: color-mix(in srgb, var(--openbot-text-primary) 5%, transparent);
  }
  --contact-border: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --contact-border: color-mix(in srgb, var(--openbot-text-primary) 8%, transparent);
  }
  --contact-border-hover: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --contact-border-hover: color-mix(in srgb, var(--openbot-text-primary) 48%, transparent);
  }
}
.contact-card {
  border: 1px solid var(--contact-border);
  border-radius: 28px;
  background: var(--contact-fill);
  padding: clamp(20px, 3vw, 36px);
}
.contact-form {
  display: grid;
  gap: 20px;
}
.contact-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.contact-field {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.contact-field-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  line-height: 20px;
}
.contact-field-head label {
  flex: 0 0 auto;
  color: var(--openbot-text-primary);
  font-size: 14px;
  font-weight: 500;
}
.contact-optional, .contact-error {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contact-optional {
  color: var(--openbot-text-muted);
}
.contact-error {
  color: var(--openbot-danger-text);
}
.contact-field :is(input, textarea, select) {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-canvas);
  padding: 12px 14px;
  color: var(--openbot-text-primary);
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
  transition: border-color var(--openbot-duration-normal) ease, box-shadow var(--openbot-duration-normal) ease;
}
.contact-field textarea {
  resize: vertical;
}
.contact-field textarea::placeholder {
  color: var(--openbot-text-placeholder);
}
.contact-field :is(input, textarea, select):hover {
  border-color: var(--contact-border-hover);
}
.contact-field :is(input, textarea, select):focus-visible {
  outline: 0;
  border-color: var(--openbot-border-focus);
  box-shadow: 0 0 0 3px var(--openbot-accent-strong);
}
.contact-field input[readonly] {
  border-color: var(--contact-border);
  background: transparent;
  color: var(--openbot-text-secondary);
}
.contact-field [aria-invalid="true"] {
  border-color: var(--openbot-danger-border);
}
.contact-field [aria-invalid="true"]:focus-visible {
  box-shadow: 0 0 0 3px var(--openbot-danger-focus);
}
.contact-select {
  position: relative;
}
.contact-select select {
  appearance: none;
  padding-right: 40px;
}
.contact-select-icon {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 16px;
  height: 16px;
  color: var(--openbot-text-secondary);
  pointer-events: none;
  transform: translateY(-50%);
}
.contact-count {
  justify-self: end;
  color: var(--openbot-text-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.contact-submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}
.contact-submit button:disabled {
  opacity: 0.6;
  cursor: progress;
}
.contact-privacy {
  flex: 1 1 240px;
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: 13px;
  line-height: 1.5;
}
.contact-privacy a {
  color: var(--openbot-text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.contact-privacy.contact-failed {
  color: var(--openbot-danger-text);
}
.contact-sent {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: clamp(24px, 4vw, 48px) 0;
  text-align: center;
}
.contact-sent-mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success-soft);
  color: var(--openbot-success-text);
}
.contact-sent-mark svg {
  width: 22px;
  height: 22px;
}
.contact-sent h2 {
  margin: 8px 0 0;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.03em;
}
.contact-sent p {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: 15px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.contact-sent strong {
  color: var(--openbot-text-primary);
  font-weight: 500;
}
.contact-text-button {
  margin-top: 8px;
  border: 0;
  background: none;
  padding: 6px 0;
  color: var(--openbot-text-primary);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}
.contact-text-button:hover, .contact-text-button:focus-visible {
  color: var(--openbot-logo-production);
}
.contact-channels {
  display: grid;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--openbot-border);
}
.contact-channels li {
  border-bottom: 1px solid var(--openbot-border);
}
.contact-channels a {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  font-size: 15px;
}
.contact-channel-label {
  font-weight: 500;
}
.contact-channel-detail {
  overflow: hidden;
  color: var(--openbot-text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contact-channel-icon {
  width: 16px;
  height: 16px;
  color: var(--openbot-text-muted);
  transition: color var(--openbot-duration-normal) ease, transform var(--openbot-duration-fast) ease;
}
.contact-channels a:hover .contact-channel-icon, .contact-channels a:focus-visible .contact-channel-icon {
  color: var(--openbot-text-primary);
  transform: translate(2px, -2px);
}
@media (max-width: 640px) {
  .contact-row {
    grid-template-columns: minmax(0, 1fr);
  }
}
.agent-share-page > .landing-footer {
  align-self: stretch;
}
.agent-share-gone-copy {
  margin: 12px 0 0;
  color: var(--openbot-text-secondary);
  font-size: 16px;
  line-height: 1.55;
}
.agent-share-gone-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
}
.transactional-main {
  min-height: min(78dvh, 820px);
  display: grid;
  place-items: center;
  padding: clamp(32px, 6vw, 72px) 16px clamp(48px, 8vw, 96px);
  background: radial-gradient(circle at 50% 42%, var(--openbot-accent-strong), var(--openbot-transparent) 38%);
}
.transactional-card[data-layout="form"] {
  width: min(100%, 640px);
  justify-items: stretch;
  text-align: start;
}
.transactional-form-heading {
  margin-bottom: 28px;
}
.transactional-form-heading .join-card-copy {
  max-width: none;
  margin-top: 12px;
}
.transactional-card .landing-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.transactional-card .landing-button:disabled:active {
  transform: none;
}
.transactional-provider {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.transactional-provider-mark {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}
.transactional-notes {
  display: grid;
  gap: 6px;
  margin: 24px 0 0;
  padding: 0;
  color: var(--openbot-text-muted);
  font-size: 12px;
  line-height: 1.5;
  list-style: none;
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    :root, :host {
      --agent-share-accent: #8a8f98;
    }
    *, ::before, ::after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --teams-pill-angle: 0deg;
    }
  }
}


/* /@fs//app/node_modules/@fontsource-variable/inter/index.css */
/* inter-cyrillic-ext-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-cyrillic-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* inter-cyrillic-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-cyrillic-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* inter-greek-ext-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-greek-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+1F00-1FFF;
}

/* inter-greek-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-greek-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* inter-vietnamese-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-vietnamese-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* inter-latin-ext-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* inter-latin-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* /@fs//app/node_modules/@fontsource-variable/inter/wght-italic.css */
/* inter-cyrillic-ext-wght-italic */
@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-cyrillic-ext-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* inter-cyrillic-wght-italic */
@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-cyrillic-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* inter-greek-ext-wght-italic */
@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-greek-ext-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+1F00-1FFF;
}

/* inter-greek-wght-italic */
@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-greek-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* inter-vietnamese-wght-italic */
@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-vietnamese-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* inter-latin-ext-wght-italic */
@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-latin-ext-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* inter-latin-wght-italic */
@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-latin-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* /@fs//app/node_modules/tailwindcss/index.css */
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
      "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
      "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring:where(:not(iframe)) {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .\!visible {
    visibility: visible !important;
  }
  .visible {
    visibility: visible;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .static {
    position: static;
  }
  .isolate {
    isolation: isolate;
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .block {
    display: block;
  }
  .contents {
    display: contents;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .table {
    display: table;
  }
  .flex-grow {
    flex-grow: 1;
  }
  .grow {
    flex-grow: 1;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .resize {
    resize: both;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .lowercase {
    text-transform: lowercase;
  }
  .ring {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
    }
  }
}


/* /@fs//app/packages/ui/src/stagger.css */
:root {
  --stagger-dur: 500ms;
  --stagger-distance: 12px;
  --stagger-stagger: 40ms;
  --stagger-blur: 3px;
  --stagger-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Lines start translated down + blurred + invisible; .is-shown
   on the parent flips them to their resting state. The second
   line's transition-delay holds it back by --stagger-stagger
   so the eye lands on the headline first. */
.t-stagger-line {
  display: block;
  opacity: 0;
  transform: translateY(var(--stagger-distance));
  filter: blur(var(--stagger-blur));
  transition:
    opacity var(--stagger-dur) var(--stagger-ease),
    transform var(--stagger-dur) var(--stagger-ease),
    filter var(--stagger-dur) var(--stagger-ease);
  will-change: transform, opacity, filter;
}
.t-stagger-line--2 {
  transition-delay: var(--stagger-stagger);
}
.t-stagger-line--3 {
  transition-delay: calc(var(--stagger-stagger) * 2);
}

.t-stagger.is-shown .t-stagger-line {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  .t-stagger-line {
    transition: none !important;
  }
}


/* /@fs//app/packages/brand/src/tokens.css */
/*
 * Every --openbot-* token in the product is written here, once. The desktop
 * renderer, the public web app and the mobile app all @import this file; none of
 * them declares a token of its own. That was not true until recently - the same
 * names lived in three files that no single commit had ever touched together, so
 * the web palette was a frozen snapshot of a desktop palette that had moved on by
 * two hundred tokens, and a token added for one surface was simply absent on the
 * other two. Keep this file the only declaration site.
 *
 * The values here are the base, always-dark palette. Mobile is the one surface
 * with a light theme; it layers tokens-native.css on top of this file.
 */

:root {
  --openbot-provider-current: currentcolor;
  /* Main screen canvas and drawer, used by the native app. */
  --openbot-bg-native-canvas: #141414;
  --openbot-bg-native-sidebar: #141414;
  /* Grouped sheet surfaces, used by the native app. */
  --openbot-bg-sheet: #141414;
  --openbot-bg-grouped: #212121;
  --openbot-text-grouped-secondary: #96969b;
  --openbot-border-grouped: #333335;
  --openbot-radius-grouped: 16px;
  /* The milky chrome of the native app where it has no Liquid Glass: the search field and bar buttons. */
  --openbot-bg-chrome-glass: rgba(38, 38, 40, 0.96);
  --openbot-border-chrome-glass: rgba(255, 255, 255, 0.08);
  /* The fill of that chrome over a real blur, lighter than the solid glass. */
  --openbot-bg-chrome-blur: rgba(26, 26, 28, 0.62);

  /* Neutral color system. Keep UI colors here, not in components. */
  --openbot-bg-canvas: #1a1a1a;
  --openbot-bg-canvas-clear: rgba(26, 26, 26, 0);
  --openbot-bg-sidebar: #1a1a1a;
  --openbot-marketplace-detail-bg: #111111;
  --openbot-bg-surface: #212121;
  --openbot-bg-surface-raised: #242424;
  --openbot-bg-control: #212121;
  --openbot-bg-control-hover: #242424;
  --openbot-bg-control-active: #2a2a2a;
  --openbot-tabs-bar-bg: #212121;
  --openbot-tabs-pill-bg: #2a2a2a;
  --openbot-bg-overlay: rgba(26, 26, 26, 0.92);
  --openbot-dialog-overlay: rgba(0, 0, 0, 0.1);
  --openbot-dialog-ring: rgba(255, 255, 255, 0.1);
  --openbot-bg-glass: rgba(33, 33, 33, 0.76);

  /* Landing-page glass surfaces. Public web only, but declared here so the
     next person to reach for a translucent panel finds one already named. */
  --openbot-glass-surface: rgba(255, 255, 255, 0.07);
  --openbot-glass-surface-hover: rgba(255, 255, 255, 0.11);
  --openbot-glass-border: rgba(255, 255, 255, 0.18);
  --openbot-glass-highlight: rgba(255, 255, 255, 0.12);
  --openbot-glass-shadow: rgba(0, 0, 0, 0.28);
  --openbot-hero-grid-line: rgba(214, 173, 242, 0.09);

  /* The landing price figure, and nothing else: a dark glass "$0" lit by one soft
     iridescent band. These are a material, not aliases of the neutral palette -
     the body sits a shade either side of the canvas so the glyph reads as a solid
     object, and the band is the only warm/cool pair on the page. */
  --openbot-price-metal-high: #4c4c4c;
  --openbot-price-metal-core: #1f1f1f;
  --openbot-price-metal-low: #343434;
  --openbot-price-sheen-cool: rgba(150, 196, 255, 0.92);
  --openbot-price-sheen-light: rgba(240, 244, 250, 0.98);
  --openbot-price-sheen-warm: rgba(255, 184, 132, 0.94);
  /* The band has to fade out through its own hue. Fading to --openbot-transparent
     would interpolate towards transparent *black* and leave a dirty grey halo
     above and below the light. */
  --openbot-price-sheen-cool-soft: rgba(150, 196, 255, 0.26);
  --openbot-price-sheen-warm-soft: rgba(255, 184, 132, 0.28);
  --openbot-price-sheen-cool-clear: rgba(150, 196, 255, 0);
  --openbot-price-sheen-warm-clear: rgba(255, 184, 132, 0);
  --openbot-price-rim: rgba(255, 255, 255, 0.28);
  --openbot-price-rim-under: rgba(255, 255, 255, 0.1);
  --openbot-price-glow: rgba(180, 200, 255, 0.22);
  --openbot-bg-host-inset: #101216;
  --openbot-bg-notch: #000000;
  --openbot-mask-solid: #000000;
  --openbot-transparent: rgba(0, 0, 0, 0);
  --openbot-drawer-scrim: #000000;
  --openbot-scroll-edge-overlay: rgba(0, 0, 0, 0.72);
  --openbot-queue-surface: var(--openbot-bg-surface);
  --openbot-queue-border: var(--openbot-border-strong);
  --openbot-queue-text: var(--openbot-text-primary);
  --openbot-queue-action: var(--openbot-text-muted);
  --openbot-border: rgba(255, 255, 255, 0.035);
  --openbot-border-strong: rgba(255, 255, 255, 0.045);
  --openbot-image-outline: rgba(255, 255, 255, 0.1);
  --openbot-border-focus: rgba(0, 124, 247, 0.72);
  --openbot-text-primary: #ffffff;
  --openbot-text-on-light: #141414;
  --openbot-surface-light: #f0f0f0;
  /* Not a duplicate of surface-light/text-on-light: tokens-native.css swaps this pair
     between the mobile light and dark themes, so it is the high-contrast button that
     inverts with the theme. Only mobile's uniwind mapping reads it. */
  --openbot-action: #f0f0f0;
  --openbot-action-foreground: #141414;
  --openbot-qr-background: #ffffff;
  --openbot-onboarding-desktop-mist: #dbe9ff;
  --openbot-onboarding-desktop-blue: #7eb4f2;
  --openbot-onboarding-desktop-indigo: #6f7de8;
  /* The dither tiles of the sound theme picker: a back and an ink color for each sound theme. */
  --openbot-sound-warm-back: #d95926;
  --openbot-sound-warm-ink: #f2c46b;
  --openbot-sound-mech-back: #1f1f1f;
  --openbot-sound-mech-ink: #dbe9ff;
  --openbot-sound-bubble-back: #5b5fe0;
  --openbot-sound-bubble-ink: #8bdee8;
  --openbot-sound-press-back: #ff1e5e;
  --openbot-sound-press-ink: #ffd8a8;
  --openbot-sound-off-back: #212121;
  --openbot-sound-off-ink: #4c4c4c;
  --openbot-onboarding-window: #f3f5f8;
  --openbot-text-secondary: #dcdcdc;
  --openbot-text-muted: #979797;
  --openbot-text-dim: #6a6a6a;
  --openbot-text-readable: rgba(255, 255, 255, 0.52);
  --openbot-text-muted-on-light: rgba(20, 20, 20, 0.52);
  --openbot-text-dim-on-light: rgba(20, 20, 20, 0.36);
  --openbot-download-card-muted: rgba(20, 20, 20, 0.68);
  --openbot-download-card-chip: rgba(20, 20, 20, 0.1);
  --openbot-download-card-border: rgba(20, 20, 20, 0.16);
  --openbot-download-card-focus: rgba(242, 242, 242, 0.86);
  --openbot-text-placeholder: #bfbfbf;
  --openbot-text-on-accent: #ffffff;
  --openbot-text-on-status: #07130c;
  /* Hue 210, sampled from the reference UIs rather than picked: their status dot is
     #007cf7 and their link and section headings are #42a0ff, both hue 210. The palette
     sat at hue 206, which reads cyan next to them, and accent-text was 71% light,
     which reads washed out. */
  --openbot-accent: #007cf7;
  --openbot-accent-hover: #1f8fff;
  --openbot-accent-text: #42a0ff;
  --openbot-accent-soft: rgba(0, 124, 247, 0.16);
  --openbot-accent-strong: rgba(0, 124, 247, 0.34);
  --openbot-settings-text-muted: rgba(255, 255, 255, 0.59);
  --openbot-provider-codex: var(--openbot-text-primary);
  --openbot-provider-claude: #d97757;
  --openbot-provider-grok: var(--openbot-text-primary);
  /* The Gemini brand colour that Simple Icons gives. */
  --openbot-provider-antigravity: #8e75b2;
  /* A chart series needs a hue of its own: the logo colours above give codex and grok the
     same white, which no reader can tell apart in two overlaid areas. Validated together
     with the dataviz skill's checker -
     node scripts/validate_palette.js "#d6adf2,#d97757,#6bc7d9" --mode dark --surface "#1a1a1a"
     - for colour-vision separation and contrast on the canvas. */
  --openbot-chart-series-codex: #d6adf2;
  --openbot-chart-series-claude: var(--openbot-provider-claude);
  --openbot-chart-series-grok: #6bc7d9;
  --openbot-chart-series-other: var(--openbot-text-muted);
  /* The storage bar: five hues in this fixed order, then neutral app data. Validated with
     node scripts/validate_palette.js "#3987e5,#d95926,#199e70,#9085e9,#c98500" --mode dark --surface "#1a1a1a"
     and again on #212121. */
  --openbot-chart-storage-workspaces: #3987e5;
  --openbot-chart-storage-files: #d95926;
  --openbot-chart-storage-chats: #199e70;
  --openbot-chart-storage-downloads: #9085e9;
  --openbot-chart-storage-runtimes: #c98500;
  --openbot-chart-storage-app: var(--openbot-text-dim);
  --openbot-logo-production: #d6adf2;
  --openbot-logo-eye: #040007;
  /* The eyes of the release logo. The logo color setting changes it with `--openbot-logo-production`;
     a dev or preview logo keeps `--openbot-logo-eye`. */
  --openbot-logo-production-eye: var(--openbot-logo-eye);
  /* The build colors of the logo match the app icons in `build/icon-*.png`, so the Dock, the app
     and the Dynamic Island show one color for each build. They are brand colors, not status
     colors: a change to warning or success does not change them. */
  --openbot-logo-dev: #e3b866;
  --openbot-logo-preview: #61c985;
  --openbot-unread-surface: #74b9ff;
  --openbot-unread-text: #07131f;
  /* The last hue that had not been retuned with the rest. #61c985 was OKLCH chroma
     0.139 while accent, warning and danger now average 0.205, so green was the one
     family member that still read as a disabled tint beside them. Matching 0.205 is
     not possible: sRGB tops out at 0.195 along this hue, and that ceiling value
     (#00d271) is a neon with no headroom, which every renderer clips differently.
     0.180 is the usable step, and lightness is held at the old 0.756 so contrast on
     the canvas is unchanged at 8.5:1 and no text legibility moves. */
  --openbot-success: #31cf76;
  /* Status text sits on neutral surfaces; status fills have separate contrast needs. */
  --openbot-success-text: #31cf76;
  --openbot-warning-text: #ff9412;
  --openbot-danger-text: #ff6069;
  --openbot-success-soft: rgba(49, 207, 118, 0.12);
  --openbot-success-wash: rgba(49, 207, 118, 0.045);
  /* Both warning marks in the reference measure hue 33 at full saturation (#ff9917 on
     the triangle, #ff9412 on the heading). The palette's #e3b866 was a desaturated gold
     at hue 39, which reads as a disabled state rather than as something needing attention. */
  --openbot-warning: #ff9412;
  --openbot-warning-soft: rgba(255, 148, 18, 0.12);
  --openbot-question-option: #6bc7d9;
  --openbot-question-option-soft: rgba(107, 199, 217, 0.14);
  --openbot-question-option-hover: rgba(107, 199, 217, 0.2);
  --openbot-question-option-pressed: rgba(107, 199, 217, 0.26);
  --openbot-island-identity-name: var(--openbot-text-primary);
  --openbot-question-badge-text: #8bdee8;
  --openbot-question-badge-soft: rgba(107, 199, 217, 0.16);
  --openbot-message-badge-text: #91c8ff;
  --openbot-message-badge-soft: rgba(116, 185, 255, 0.16);
  /* The "new thing is available" pill. It is deliberately not --openbot-accent: an
     announcement is not an action. */
  --openbot-badge-new: #ff1e5e;
  --openbot-badge-new-soft: rgba(255, 30, 94, 0.16);
  /* The moving border of an offer, such as the hosted server offer: teal, blue, then pink. */
  --openbot-beam-teal: var(--openbot-file-teal);
  --openbot-beam-blue: var(--openbot-accent-text);
  --openbot-beam-pink: var(--openbot-file-pink);
  --openbot-approval-badge-soft: rgba(255, 148, 18, 0.18);
  /* One red. The palette carried four families - danger (#e47d75), danger-strong
     (#ff4058), settings-danger (#eb4145) and button-destructive (oklch, #ff6467) -
     all between hue 352 and 359, i.e. the same red at four saturations, and the
     settings family existed only to re-override button-destructive inside one modal.
     #fd2f3b is the reference's count badge. The five steps below are roles, not
     shades: solid fill, its hover, tinted fill, its hover, ring, border. */
  --openbot-danger: #fd2f3b;
  --openbot-danger-hover: #fd5d67;
  --openbot-danger-soft: rgba(253, 47, 59, 0.16);
  --openbot-danger-soft-hover: rgba(253, 47, 59, 0.28);
  --openbot-danger-focus: rgba(253, 47, 59, 0.4);
  --openbot-danger-border: rgba(253, 47, 59, 0.5);
  /* Literal values: the mobile themes repeat these in tokens-native.css, where var() resolves to
   * nothing. They equal warning, question-option, success, danger and accent-text. */
  --openbot-file-blue: #74b9ff;
  --openbot-file-blue-soft: rgba(116, 185, 255, 0.14);
  --openbot-file-yellow: #ff9412;
  --openbot-file-yellow-soft: rgba(255, 148, 18, 0.12);
  --openbot-file-orange: #f0a06a;
  --openbot-file-orange-soft: rgba(240, 160, 106, 0.14);
  --openbot-file-teal: #6bc7d9;
  --openbot-file-teal-soft: rgba(107, 199, 217, 0.14);
  --openbot-file-green: #31cf76;
  --openbot-file-green-soft: rgba(49, 207, 118, 0.12);
  --openbot-file-red: #fd2f3b;
  --openbot-file-red-soft: rgba(253, 47, 59, 0.16);
  --openbot-file-pink: #d98ac9;
  --openbot-file-pink-soft: rgba(217, 138, 201, 0.14);
  --openbot-file-default: #42a0ff;
  --openbot-file-default-soft: rgba(0, 124, 247, 0.14);
  --openbot-data-table-border: #303030;
  --openbot-data-table-header-text: #a1a1a1;
  --openbot-data-table-text: #f5f5f5;
  --openbot-data-table-outer-border: rgba(255, 255, 255, 0);
  --openbot-data-table-ring: rgba(255, 255, 255, 0.12);
  --openbot-shadow-popover-ambient: rgba(0, 0, 0, 0.1);
  --openbot-shadow-dialog: rgba(0, 0, 0, 0.48);
  --openbot-shadow-dynamic-island: rgba(0, 0, 0, 0.6);
  --openbot-shadow-ring: rgba(228, 228, 228, 0.04);
  --openbot-border-on-light: rgba(20, 20, 20, 0.14);
  --openbot-hover: rgba(255, 255, 255, 0.06);
  --openbot-font-sans: "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --openbot-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
  /* Six steps, one line-height each, named for the step it pairs with. The scale had
   * sixteen sizes and eight line-heights, four of them a single call site, which is how
   * an 11px size ended up paired with a 26px line-height. scripts/ui-foundation-check.ts
   * holds "untokenized font-size" at zero, so a size that is not here has nowhere to go. */
  --openbot-text-sm: 12px;
  --openbot-text-md: 13px;
  --openbot-text-lg: 14px;
  --openbot-text-xl: 16px;
  --openbot-text-2xl: 18px;
  --openbot-text-3xl: 24px;
  --openbot-leading-sm: 16px;
  --openbot-leading-md: 18px;
  --openbot-leading-lg: 20px;
  --openbot-leading-xl: 22px;
  --openbot-leading-2xl: 24px;
  --openbot-leading-3xl: 30px;

  /* Not scale steps, and named for their surface so they do not read as one. Three
   * full-bleed screens (login wordmark, first-run setup, onboarding) and the public
   * landing page carry type above 24px; .landing-hero-logo is sized in em off
   * --openbot-text-hero, so that token is layout, not just type. */
  --openbot-text-display: 32px;
  --openbot-text-usage-total: clamp(2rem, 5cqi, 3.5rem);
  --openbot-leading-display: 38px;
  --openbot-text-hero: clamp(3rem, 8vw, 6.5rem);

  /* Glyphs, not copy: a file-extension string inside a fixed 16-24px chip. Below the
   * scale's floor because the container is fixed, not because the text is small. Outside
   * the text-* namespace so text-* means exactly the six steps above. */
  --openbot-glyph-xs: 7px;
  --openbot-glyph-sm: 8px;

  --openbot-weight-regular: 400;
  --openbot-weight-medium: 500;
  --openbot-weight-semibold: 600;
  --openbot-weight-bold: 700;
  --openbot-tracking-tight: -0.1px;
  --openbot-tracking-normal: 0;
  --openbot-tracking-wide: 0.02em;
  --openbot-space-0-5: 2px;
  --openbot-space-1: 4px;
  --openbot-space-1-5: 6px;
  --openbot-space-2: 8px;
  --openbot-space-3: 12px;
  --openbot-space-4: 16px;
  --openbot-space-6: 24px;
  --openbot-space-8: 32px;
  --openbot-scrollbar-size: 8px;
  --openbot-radius-xs: 4px;
  --openbot-radius-sm: 6px;
  --openbot-radius-md: 8px;
  --openbot-radius-lg: 12px;
  --openbot-radius-card: 14px;
  --openbot-radius-xl: 20px;
  --openbot-radius-bubble: 22px;
  --openbot-radius-bubble-inset: calc(var(--openbot-radius-bubble) - var(--openbot-space-3) - 1px);
  --openbot-radius-modal: 30px;
  --openbot-radius-media-preview: calc(var(--openbot-radius-lg) - 1px);
  --openbot-radius-pill: 999px;
  --openbot-radius-logo: 20%;
  --openbot-control-xs: 24px;
  --openbot-control-sm: 28px;
  --openbot-control-md: 32px;
  --openbot-control-lg: 36px;
  --openbot-control-xl: 40px;
  /* The switch follows the same compact pill proportions across desktop and web.
   * Keep its geometry named so the motion code can measure the same inset and travel
   * that CSS paints. */
  --openbot-switch-width: 36px;
  --openbot-switch-height: 20px;
  --openbot-switch-thumb: 16px;
  --openbot-switch-inset: 2px;
  --openbot-switch-sm-width: 24px;
  --openbot-switch-sm-height: 14px;
  --openbot-switch-sm-thumb: 12px;
  --openbot-switch-sm-inset: 1px;
  /* Unitless on purpose. Lucide icons carry viewBox="0 0 24 24", so CSS stroke-width
   * resolves in user units, not px: a literal 1px paints 1 * (16/24) = 0.67 device px at
   * the 16px default size and reads blurry. 1.5 user units is the 1px the design asks for.
   *
   * Which is also why three kinds of SVG keep a weight of their own rather than reading
   * this: the hand-written icons under src/renderer/src/features draw on a 16- or 20-unit
   * viewBox, so the same number paints a different device weight there; the onboarding
   * computer is a drawing, not an icon; and the checkbox tick would come out at 0.75
   * device px inside its 12px box. Every lucide icon in the renderer reads this token. */
  --openbot-icon-stroke: 1.5;
  --openbot-icon-xs: 12px;
  --openbot-icon-sm: 14px;
  --openbot-icon-md: 16px;
  --openbot-icon-lg: 20px;
  --openbot-chat-entry-gap: var(--openbot-space-3);
  --openbot-chat-marker-gap: var(--openbot-space-1);
  --openbot-chat-marker-height: var(--openbot-control-xs);
  --openbot-chat-marker-avatar: var(--openbot-icon-md);
  /* Keep container-relative calculations at the CSS use site for native consumers. */
  --openbot-chat-marker-width: 680px;
  --openbot-duration-fast: 120ms;
  --openbot-duration-hover: 0ms;
  --openbot-duration-dialog: 100ms;
  --openbot-duration-normal: 160ms;
  --openbot-duration-slow: 200ms;
  --openbot-duration-overlay: 240ms;
  --openbot-duration-toast-enter: 340ms;
  --openbot-duration-toast-exit: 220ms;
  --openbot-duration-island-content: 340ms;
  --openbot-duration-island-content-exit: 220ms;
  --openbot-agent-activity-exit-delay: 500ms;
  /* A loading indicator waits this long, so a fast answer replaces it before it shows. */
  --openbot-loading-indicator-delay: 400ms;
  --openbot-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --openbot-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --openbot-shadow-raised: 0 12px 32px var(--openbot-shadow-popover-ambient);
  --openbot-shadow-card: 0 0 0 transparent;
  --openbot-shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.48);
  --openbot-focus-ring: 0 0 0 3px var(--openbot-accent-soft);
  --openbot-layer-dropdown: 40;
  --openbot-layer-popover: 60;
  --openbot-layer-dialog: 100;
  /* A dialog that opens other surfaces over itself, such as the marketplace. Its own menus take
     one above it, and a dialog it opens takes two, so the order is stated once here instead of
     being re-derived by arithmetic at each surface - where a tie is decided by insertion order,
     and the surface opened last wins only by accident. */
  --openbot-layer-dialog-host: calc(var(--openbot-layer-dialog) + var(--openbot-layer-popover));
  --openbot-layer-toast: 120;
  /* A tooltip names the control under the pointer. It shows above every other layer, also above
     a dialog or a menu that holds the control. */
  --openbot-layer-tooltip: 240;
}

/* Every surface that paints a provider - the picker mark, the update toast and its progress bar,
   the usage icon, the account picker, the landing page - used to carry one rule per provider per
   surface, so a new provider meant ten new rules across five stylesheets before it had a colour.
   These rules are the only place a provider id meets its colour; a surface writes
   `data-provider` on the element and reads `--openbot-provider-current`. A provider with no rule
   here falls back to the current text colour rather than to another provider's brand. */
[data-provider] {
  --openbot-provider-current: currentcolor;
}

[data-provider="codex"] {
  --openbot-provider-current: var(--openbot-provider-codex);
}

[data-provider="claude"] {
  --openbot-provider-current: var(--openbot-provider-claude);
}

[data-provider="grok"] {
  --openbot-provider-current: var(--openbot-provider-grok);
}

[data-provider="opencode"] {
  --openbot-provider-current: var(--openbot-text-primary);
}

[data-provider="antigravity"] {
  --openbot-provider-current: var(--openbot-provider-antigravity);
}

[data-provider="cursor"] {
  --openbot-provider-current: var(--openbot-text-primary);
}

[data-provider="cline"] {
  --openbot-provider-current: var(--openbot-text-primary);
}

[data-provider="acp"] {
  --openbot-provider-current: var(--openbot-text-primary);
}


/* /@fs//app/apps/auth-api/src/components/content/ArticleMedia.stories.css */
/* Story-only. The in-article mount stays on `.post-mount`; this is the product-shot
   treatment from the marketing frame: the card gradient is the whole stage, and the
   screenshot sits on it with room around it. */

.story-product-shot {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: clamp(28px, 8vw, 96px);
  overflow: hidden;
  background: var(--openbot-bg-canvas);
}

.story-product-shot-window {
  position: relative;
  z-index: 1;
  width: min(100%, 1080px);
  height: auto;
  border-radius: 16px;
  outline: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.18),
    0 8px 24px rgba(0, 0, 0, 0.28),
    0 28px 64px rgba(0, 0, 0, 0.38);
}


/* /@fs/app/src/renderer/src/features/web-client/web-client.css */
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties;
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-cyrillic-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-cyrillic-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-greek-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-greek-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-vietnamese-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-cyrillic-ext-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-cyrillic-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-greek-ext-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-greek-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-vietnamese-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-latin-ext-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-latin-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
      "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
      "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --spacing: 0.25rem;
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring:where(:not(iframe)) {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .\!visible {
    visibility: visible !important;
  }
  .collapse {
    visibility: collapse;
  }
  .invisible {
    visibility: hidden;
  }
  .visible {
    visibility: visible;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .static {
    position: static;
  }
  .sticky {
    position: sticky;
  }
  .isolate {
    isolation: isolate;
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .block {
    display: block;
  }
  .contents {
    display: contents;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .table {
    display: table;
  }
  .size-3 {
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
  }
  .size-4 {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }
  .size-\[14px\] {
    width: 14px;
    height: 14px;
  }
  .size-\[18px\] {
    width: 18px;
    height: 18px;
  }
  .shrink {
    flex-shrink: 1;
  }
  .flex-grow {
    flex-grow: 1;
  }
  .grow {
    flex-grow: 1;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .resize {
    resize: both;
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .fill-current {
    fill: currentcolor;
  }
  .fill-none {
    fill: none;
  }
  .stroke-current {
    stroke: currentcolor;
  }
  .lowercase {
    text-transform: lowercase;
  }
  .ring {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .backdrop-filter {
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }
  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }
}
:root {
  --openbot-provider-current: currentcolor;
  --openbot-bg-native-canvas: #141414;
  --openbot-bg-native-sidebar: #141414;
  --openbot-bg-sheet: #141414;
  --openbot-bg-grouped: #212121;
  --openbot-text-grouped-secondary: #96969b;
  --openbot-border-grouped: #333335;
  --openbot-radius-grouped: 16px;
  --openbot-bg-chrome-glass: rgba(38, 38, 40, 0.96);
  --openbot-border-chrome-glass: rgba(255, 255, 255, 0.08);
  --openbot-bg-chrome-blur: rgba(26, 26, 28, 0.62);
  --openbot-bg-canvas: #1a1a1a;
  --openbot-bg-canvas-clear: rgba(26, 26, 26, 0);
  --openbot-bg-sidebar: #1a1a1a;
  --openbot-marketplace-detail-bg: #111111;
  --openbot-bg-surface: #212121;
  --openbot-bg-surface-raised: #242424;
  --openbot-bg-control: #212121;
  --openbot-bg-control-hover: #242424;
  --openbot-bg-control-active: #2a2a2a;
  --openbot-tabs-bar-bg: #212121;
  --openbot-tabs-pill-bg: #2a2a2a;
  --openbot-bg-overlay: rgba(26, 26, 26, 0.92);
  --openbot-dialog-overlay: rgba(0, 0, 0, 0.1);
  --openbot-dialog-ring: rgba(255, 255, 255, 0.1);
  --openbot-bg-glass: rgba(33, 33, 33, 0.76);
  --openbot-glass-surface: rgba(255, 255, 255, 0.07);
  --openbot-glass-surface-hover: rgba(255, 255, 255, 0.11);
  --openbot-glass-border: rgba(255, 255, 255, 0.18);
  --openbot-glass-highlight: rgba(255, 255, 255, 0.12);
  --openbot-glass-shadow: rgba(0, 0, 0, 0.28);
  --openbot-hero-grid-line: rgba(214, 173, 242, 0.09);
  --openbot-price-metal-high: #4c4c4c;
  --openbot-price-metal-core: #1f1f1f;
  --openbot-price-metal-low: #343434;
  --openbot-price-sheen-cool: rgba(150, 196, 255, 0.92);
  --openbot-price-sheen-light: rgba(240, 244, 250, 0.98);
  --openbot-price-sheen-warm: rgba(255, 184, 132, 0.94);
  --openbot-price-sheen-cool-soft: rgba(150, 196, 255, 0.26);
  --openbot-price-sheen-warm-soft: rgba(255, 184, 132, 0.28);
  --openbot-price-sheen-cool-clear: rgba(150, 196, 255, 0);
  --openbot-price-sheen-warm-clear: rgba(255, 184, 132, 0);
  --openbot-price-rim: rgba(255, 255, 255, 0.28);
  --openbot-price-rim-under: rgba(255, 255, 255, 0.1);
  --openbot-price-glow: rgba(180, 200, 255, 0.22);
  --openbot-bg-host-inset: #101216;
  --openbot-bg-notch: #000000;
  --openbot-mask-solid: #000000;
  --openbot-transparent: rgba(0, 0, 0, 0);
  --openbot-drawer-scrim: #000000;
  --openbot-scroll-edge-overlay: rgba(0, 0, 0, 0.72);
  --openbot-queue-surface: var(--openbot-bg-surface);
  --openbot-queue-border: var(--openbot-border-strong);
  --openbot-queue-text: var(--openbot-text-primary);
  --openbot-queue-action: var(--openbot-text-muted);
  --openbot-border: rgba(255, 255, 255, 0.035);
  --openbot-border-strong: rgba(255, 255, 255, 0.045);
  --openbot-image-outline: rgba(255, 255, 255, 0.1);
  --openbot-border-focus: rgba(0, 124, 247, 0.72);
  --openbot-text-primary: #ffffff;
  --openbot-text-on-light: #141414;
  --openbot-surface-light: #f0f0f0;
  --openbot-action: #f0f0f0;
  --openbot-action-foreground: #141414;
  --openbot-qr-background: #ffffff;
  --openbot-onboarding-desktop-mist: #dbe9ff;
  --openbot-onboarding-desktop-blue: #7eb4f2;
  --openbot-onboarding-desktop-indigo: #6f7de8;
  --openbot-sound-warm-back: #d95926;
  --openbot-sound-warm-ink: #f2c46b;
  --openbot-sound-mech-back: #1f1f1f;
  --openbot-sound-mech-ink: #dbe9ff;
  --openbot-sound-bubble-back: #5b5fe0;
  --openbot-sound-bubble-ink: #8bdee8;
  --openbot-sound-press-back: #ff1e5e;
  --openbot-sound-press-ink: #ffd8a8;
  --openbot-sound-off-back: #212121;
  --openbot-sound-off-ink: #4c4c4c;
  --openbot-onboarding-window: #f3f5f8;
  --openbot-text-secondary: #dcdcdc;
  --openbot-text-muted: #979797;
  --openbot-text-dim: #6a6a6a;
  --openbot-text-readable: rgba(255, 255, 255, 0.52);
  --openbot-text-muted-on-light: rgba(20, 20, 20, 0.52);
  --openbot-text-dim-on-light: rgba(20, 20, 20, 0.36);
  --openbot-download-card-muted: rgba(20, 20, 20, 0.68);
  --openbot-download-card-chip: rgba(20, 20, 20, 0.1);
  --openbot-download-card-border: rgba(20, 20, 20, 0.16);
  --openbot-download-card-focus: rgba(242, 242, 242, 0.86);
  --openbot-text-placeholder: #bfbfbf;
  --openbot-text-on-accent: #ffffff;
  --openbot-text-on-status: #07130c;
  --openbot-accent: #007cf7;
  --openbot-accent-hover: #1f8fff;
  --openbot-accent-text: #42a0ff;
  --openbot-accent-soft: rgba(0, 124, 247, 0.16);
  --openbot-accent-strong: rgba(0, 124, 247, 0.34);
  --openbot-settings-text-muted: rgba(255, 255, 255, 0.59);
  --openbot-provider-codex: var(--openbot-text-primary);
  --openbot-provider-claude: #d97757;
  --openbot-provider-grok: var(--openbot-text-primary);
  --openbot-provider-antigravity: #8e75b2;
  --openbot-chart-series-codex: #d6adf2;
  --openbot-chart-series-claude: var(--openbot-provider-claude);
  --openbot-chart-series-grok: #6bc7d9;
  --openbot-chart-series-other: var(--openbot-text-muted);
  --openbot-chart-storage-workspaces: #3987e5;
  --openbot-chart-storage-files: #d95926;
  --openbot-chart-storage-chats: #199e70;
  --openbot-chart-storage-downloads: #9085e9;
  --openbot-chart-storage-runtimes: #c98500;
  --openbot-chart-storage-app: var(--openbot-text-dim);
  --openbot-logo-production: #d6adf2;
  --openbot-logo-eye: #040007;
  --openbot-logo-production-eye: var(--openbot-logo-eye);
  --openbot-logo-dev: #e3b866;
  --openbot-logo-preview: #61c985;
  --openbot-unread-surface: #74b9ff;
  --openbot-unread-text: #07131f;
  --openbot-success: #31cf76;
  --openbot-success-text: #31cf76;
  --openbot-warning-text: #ff9412;
  --openbot-danger-text: #ff6069;
  --openbot-success-soft: rgba(49, 207, 118, 0.12);
  --openbot-success-wash: rgba(49, 207, 118, 0.045);
  --openbot-warning: #ff9412;
  --openbot-warning-soft: rgba(255, 148, 18, 0.12);
  --openbot-question-option: #6bc7d9;
  --openbot-question-option-soft: rgba(107, 199, 217, 0.14);
  --openbot-question-option-hover: rgba(107, 199, 217, 0.2);
  --openbot-question-option-pressed: rgba(107, 199, 217, 0.26);
  --openbot-island-identity-name: var(--openbot-text-primary);
  --openbot-question-badge-text: #8bdee8;
  --openbot-question-badge-soft: rgba(107, 199, 217, 0.16);
  --openbot-message-badge-text: #91c8ff;
  --openbot-message-badge-soft: rgba(116, 185, 255, 0.16);
  --openbot-badge-new: #ff1e5e;
  --openbot-badge-new-soft: rgba(255, 30, 94, 0.16);
  --openbot-beam-teal: var(--openbot-file-teal);
  --openbot-beam-blue: var(--openbot-accent-text);
  --openbot-beam-pink: var(--openbot-file-pink);
  --openbot-approval-badge-soft: rgba(255, 148, 18, 0.18);
  --openbot-danger: #fd2f3b;
  --openbot-danger-hover: #fd5d67;
  --openbot-danger-soft: rgba(253, 47, 59, 0.16);
  --openbot-danger-soft-hover: rgba(253, 47, 59, 0.28);
  --openbot-danger-focus: rgba(253, 47, 59, 0.4);
  --openbot-danger-border: rgba(253, 47, 59, 0.5);
  --openbot-file-blue: #74b9ff;
  --openbot-file-blue-soft: rgba(116, 185, 255, 0.14);
  --openbot-file-yellow: #ff9412;
  --openbot-file-yellow-soft: rgba(255, 148, 18, 0.12);
  --openbot-file-orange: #f0a06a;
  --openbot-file-orange-soft: rgba(240, 160, 106, 0.14);
  --openbot-file-teal: #6bc7d9;
  --openbot-file-teal-soft: rgba(107, 199, 217, 0.14);
  --openbot-file-green: #31cf76;
  --openbot-file-green-soft: rgba(49, 207, 118, 0.12);
  --openbot-file-red: #fd2f3b;
  --openbot-file-red-soft: rgba(253, 47, 59, 0.16);
  --openbot-file-pink: #d98ac9;
  --openbot-file-pink-soft: rgba(217, 138, 201, 0.14);
  --openbot-file-default: #42a0ff;
  --openbot-file-default-soft: rgba(0, 124, 247, 0.14);
  --openbot-data-table-border: #303030;
  --openbot-data-table-header-text: #a1a1a1;
  --openbot-data-table-text: #f5f5f5;
  --openbot-data-table-outer-border: rgba(255, 255, 255, 0);
  --openbot-data-table-ring: rgba(255, 255, 255, 0.12);
  --openbot-shadow-popover-ambient: rgba(0, 0, 0, 0.1);
  --openbot-shadow-dialog: rgba(0, 0, 0, 0.48);
  --openbot-shadow-dynamic-island: rgba(0, 0, 0, 0.6);
  --openbot-shadow-ring: rgba(228, 228, 228, 0.04);
  --openbot-border-on-light: rgba(20, 20, 20, 0.14);
  --openbot-hover: rgba(255, 255, 255, 0.06);
  --openbot-font-sans: "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --openbot-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
  --openbot-text-sm: 12px;
  --openbot-text-md: 13px;
  --openbot-text-lg: 14px;
  --openbot-text-xl: 16px;
  --openbot-text-2xl: 18px;
  --openbot-text-3xl: 24px;
  --openbot-leading-sm: 16px;
  --openbot-leading-md: 18px;
  --openbot-leading-lg: 20px;
  --openbot-leading-xl: 22px;
  --openbot-leading-2xl: 24px;
  --openbot-leading-3xl: 30px;
  --openbot-text-display: 32px;
  --openbot-text-usage-total: clamp(2rem, 5cqi, 3.5rem);
  --openbot-leading-display: 38px;
  --openbot-text-hero: clamp(3rem, 8vw, 6.5rem);
  --openbot-glyph-xs: 7px;
  --openbot-glyph-sm: 8px;
  --openbot-weight-regular: 400;
  --openbot-weight-medium: 500;
  --openbot-weight-semibold: 600;
  --openbot-weight-bold: 700;
  --openbot-tracking-tight: -0.1px;
  --openbot-tracking-normal: 0;
  --openbot-tracking-wide: 0.02em;
  --openbot-space-0-5: 2px;
  --openbot-space-1: 4px;
  --openbot-space-1-5: 6px;
  --openbot-space-2: 8px;
  --openbot-space-3: 12px;
  --openbot-space-4: 16px;
  --openbot-space-6: 24px;
  --openbot-space-8: 32px;
  --openbot-scrollbar-size: 8px;
  --openbot-radius-xs: 4px;
  --openbot-radius-sm: 6px;
  --openbot-radius-md: 8px;
  --openbot-radius-lg: 12px;
  --openbot-radius-card: 14px;
  --openbot-radius-xl: 20px;
  --openbot-radius-bubble: 22px;
  --openbot-radius-bubble-inset: calc(var(--openbot-radius-bubble) - var(--openbot-space-3) - 1px);
  --openbot-radius-modal: 30px;
  --openbot-radius-media-preview: calc(var(--openbot-radius-lg) - 1px);
  --openbot-radius-pill: 999px;
  --openbot-radius-logo: 20%;
  --openbot-control-xs: 24px;
  --openbot-control-sm: 28px;
  --openbot-control-md: 32px;
  --openbot-control-lg: 36px;
  --openbot-control-xl: 40px;
  --openbot-switch-width: 36px;
  --openbot-switch-height: 20px;
  --openbot-switch-thumb: 16px;
  --openbot-switch-inset: 2px;
  --openbot-switch-sm-width: 24px;
  --openbot-switch-sm-height: 14px;
  --openbot-switch-sm-thumb: 12px;
  --openbot-switch-sm-inset: 1px;
  --openbot-icon-stroke: 1.5;
  --openbot-icon-xs: 12px;
  --openbot-icon-sm: 14px;
  --openbot-icon-md: 16px;
  --openbot-icon-lg: 20px;
  --openbot-chat-entry-gap: var(--openbot-space-3);
  --openbot-chat-marker-gap: var(--openbot-space-1);
  --openbot-chat-marker-height: var(--openbot-control-xs);
  --openbot-chat-marker-avatar: var(--openbot-icon-md);
  --openbot-chat-marker-width: 680px;
  --openbot-duration-fast: 120ms;
  --openbot-duration-hover: 0ms;
  --openbot-duration-dialog: 100ms;
  --openbot-duration-normal: 160ms;
  --openbot-duration-slow: 200ms;
  --openbot-duration-overlay: 240ms;
  --openbot-duration-toast-enter: 340ms;
  --openbot-duration-toast-exit: 220ms;
  --openbot-duration-island-content: 340ms;
  --openbot-duration-island-content-exit: 220ms;
  --openbot-agent-activity-exit-delay: 500ms;
  --openbot-loading-indicator-delay: 400ms;
  --openbot-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --openbot-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --openbot-shadow-raised: 0 12px 32px var(--openbot-shadow-popover-ambient);
  --openbot-shadow-card: 0 0 0 transparent;
  --openbot-shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.48);
  --openbot-focus-ring: 0 0 0 3px var(--openbot-accent-soft);
  --openbot-layer-dropdown: 40;
  --openbot-layer-popover: 60;
  --openbot-layer-dialog: 100;
  --openbot-layer-dialog-host: calc(var(--openbot-layer-dialog) + var(--openbot-layer-popover));
  --openbot-layer-toast: 120;
  --openbot-layer-tooltip: 240;
}
[data-provider] {
  --openbot-provider-current: currentcolor;
}
[data-provider="codex"] {
  --openbot-provider-current: var(--openbot-provider-codex);
}
[data-provider="claude"] {
  --openbot-provider-current: var(--openbot-provider-claude);
}
[data-provider="grok"] {
  --openbot-provider-current: var(--openbot-provider-grok);
}
[data-provider="opencode"] {
  --openbot-provider-current: var(--openbot-text-primary);
}
[data-provider="antigravity"] {
  --openbot-provider-current: var(--openbot-provider-antigravity);
}
[data-provider="cursor"] {
  --openbot-provider-current: var(--openbot-text-primary);
}
[data-provider="cline"] {
  --openbot-provider-current: var(--openbot-text-primary);
}
[data-provider="acp"] {
  --openbot-provider-current: var(--openbot-text-primary);
}
.app-logo {
  --app-logo-background: var(--openbot-logo-production);
  --app-logo-eye: var(--openbot-logo-production-eye);
  position: relative;
  display: inline-block;
  overflow: hidden;
  border-radius: var(--openbot-radius-logo);
  isolation: isolate;
}
.app-logo[data-interactive="true"]:focus {
  outline: none;
}
.app-logo[data-interactive="true"]:focus-visible {
  box-shadow: inset 0 0 0 2px var(--openbot-text-primary);
}
.app-logo[data-variant="dev"] {
  --app-logo-background: var(--openbot-logo-dev);
  --app-logo-eye: var(--openbot-logo-eye);
}
.app-logo[data-variant="preview"] {
  --app-logo-background: var(--openbot-logo-preview);
  --app-logo-eye: var(--openbot-logo-eye);
}
.app-logo-background {
  fill: var(--app-logo-background);
}
.app-logo-eye {
  fill: none;
  stroke: var(--app-logo-eye);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 9.5px;
  pointer-events: none;
  transform-box: view-box;
}
.app-logo-eye-motion {
  pointer-events: none;
  transform: translate(var(--app-logo-eye-x, 0%), var(--app-logo-eye-y, 0%)) scaleY(var(--app-logo-eye-squint, 1));
  transform-origin: center;
  transition: transform var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1);
}
.app-logo-eye-left {
  transform-origin: 28.7% 48.7%;
}
.app-logo-eye-right {
  transform-origin: 71.2% 48.8%;
}
.app-logo[data-animation="blink"] .app-logo-eye {
  animation: app-logo-blink 4.8s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
.app-logo[data-animation="look-around"] .app-logo-eye {
  animation: app-logo-look-around 6s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
.app-logo[data-animation="surprised"] .app-logo-eye {
  animation: app-logo-surprised 5.4s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
.app-logo[data-click-reaction="wink"] .app-logo-eye-left {
  animation: app-logo-wink-left 360ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.app-logo[data-click-reaction="wink"] .app-logo-eye-right {
  animation: app-logo-wink-right 360ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.app-logo[data-easter-egg="party"] .app-logo-background {
  animation: app-logo-party-colors 1.2s cubic-bezier(0.77, 0, 0.175, 1) both;
}
.app-logo[data-easter-egg="party"] .app-logo-eye-left {
  animation: app-logo-party-left 1.2s cubic-bezier(0.77, 0, 0.175, 1) both;
}
.app-logo[data-easter-egg="party"] .app-logo-eye-right {
  animation: app-logo-party-right 1.2s cubic-bezier(0.77, 0, 0.175, 1) both;
}
@keyframes app-logo-blink {
  0%, 44%, 48%, 100% {
    transform: scaleY(1);
  }
  46% {
    transform: scaleY(0.08);
  }
}
@keyframes app-logo-look-around {
  0%, 30%, 47%, 64%, 100% {
    transform: translateX(0);
  }
  35%, 42% {
    transform: translateX(-3.5%);
  }
  52%, 59% {
    transform: translateX(3.5%);
  }
}
@keyframes app-logo-surprised {
  0%, 40%, 56%, 100% {
    transform: translateY(0) scale(1);
  }
  44%, 51% {
    transform: translateY(-1.5%) scaleX(0.94) scaleY(1.12);
  }
}
@keyframes app-logo-wink-left {
  0%, 100% {
    transform: scaleY(1);
  }
  38%, 58% {
    transform: scaleY(0.08);
  }
}
@keyframes app-logo-wink-right {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  48% {
    transform: translateY(-1%) scaleX(0.96) scaleY(1.08);
  }
}
@keyframes app-logo-party-colors {
  0%, 100% {
    fill: var(--app-logo-background);
  }
  22% {
    fill: var(--openbot-logo-dev);
  }
  48% {
    fill: var(--openbot-logo-preview);
  }
  74% {
    fill: var(--openbot-logo-production);
  }
}
@keyframes app-logo-party-left {
  0%, 100% {
    transform: translate(0) rotate(0);
  }
  25% {
    transform: translateY(-6%) rotate(-8deg);
  }
  50% {
    transform: translate(4%, 2%) rotate(8deg);
  }
  75% {
    transform: translate(-4%, -2%) rotate(-4deg);
  }
}
@keyframes app-logo-party-right {
  0%, 100% {
    transform: translate(0) rotate(0);
  }
  25% {
    transform: translateY(6%) rotate(8deg);
  }
  50% {
    transform: translate(-4%, -2%) rotate(-8deg);
  }
  75% {
    transform: translate(4%, 2%) rotate(4deg);
  }
}
@media (hover: hover) and (pointer: fine) {
  .app-logo[data-interactive="true"] {
    cursor: pointer;
  }
}
@media (prefers-reduced-motion: reduce) {
  .app-logo[data-animation] .app-logo-eye, .app-logo[data-click-reaction] .app-logo-eye, .app-logo[data-easter-egg] .app-logo-eye, .app-logo[data-easter-egg] .app-logo-background {
    animation: none;
    transform: none;
  }
  .app-logo-eye-motion {
    transition: none;
    transform: none;
  }
}
:where(.ui-text, .ui-heading) {
  margin: 0;
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
}
.ui-server-gradient-logo {
  width: var(--server-gradient-logo-size, 40px);
  height: var(--server-gradient-logo-size, 40px);
  display: block;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: var(--server-gradient-logo-radius, var(--openbot-radius-lg));
  background-color: var(--server-gradient-base);
  background-image: var(--server-gradient-layers);
  background-repeat: no-repeat;
  outline: 1px solid var(--openbot-image-outline);
  outline-offset: -1px;
}
:where(.ui-text)[data-tone="secondary"], :where(.ui-heading)[data-tone="secondary"] {
  color: var(--openbot-text-secondary);
}
:where(.ui-text)[data-tone="muted"], :where(.ui-heading)[data-tone="muted"] {
  color: var(--openbot-text-muted);
}
:where(.ui-text, .ui-heading)[data-tone="danger"] {
  color: var(--openbot-danger);
}
:where(.ui-text, .ui-heading)[data-tone="success"] {
  color: var(--openbot-success);
}
:where(.ui-text, .ui-heading)[data-tone="warning"] {
  color: var(--openbot-warning);
}
:where(.ui-text)[data-variant="caption"] {
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-sm);
}
:where(.ui-text)[data-variant="label-sm"] {
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
}
:where(.ui-text)[data-variant="label"] {
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
}
:where(.ui-text)[data-variant="body-sm"] {
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-md);
}
:where(.ui-text)[data-variant="body"] {
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-lg);
}
:where(.ui-heading)[data-size="sm"] {
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
:where(.ui-heading)[data-size="md"] {
  font-size: var(--openbot-text-xl);
  line-height: var(--openbot-leading-xl);
}
:where(.ui-heading)[data-size="lg"] {
  font-size: var(--openbot-text-2xl);
  line-height: var(--openbot-leading-2xl);
}
:where(.ui-heading) {
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: var(--openbot-tracking-tight);
}
.ui-text-truncate {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:where(.ui-button) {
  min-width: 0;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-1-5);
  border: 1px solid transparent;
  border-radius: var(--openbot-radius-md);
  padding: 0 var(--openbot-space-4);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: 1;
  text-decoration: none;
  user-select: none;
  white-space: nowrap;
  transition: background-color var(--openbot-duration-hover) ease, border-color var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease, box-shadow var(--openbot-duration-hover) ease, opacity var(--openbot-duration-hover) ease;
}
.ui-button {
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-medium);
}
:where(.ui-button-size-xs) {
  height: var(--openbot-control-xs);
  padding-inline: var(--openbot-space-2);
  font-size: var(--openbot-text-sm);
}
:where(.ui-button-size-sm) {
  height: var(--openbot-control-md);
  padding-inline: var(--openbot-space-3);
  font-size: var(--openbot-text-sm);
}
:where(.ui-button-size-default) {
  height: var(--openbot-control-lg);
}
:where(.ui-button-size-lg) {
  height: var(--openbot-control-xl);
  padding-inline: var(--openbot-space-6);
}
:where(.ui-button-variant-default) {
  background: var(--openbot-surface-light);
  color: var(--openbot-text-on-light);
}
:where(.ui-button-variant-outline) {
  border-color: var(--openbot-border);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-secondary);
}
:where(.ui-button-variant-secondary) {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}
:where(.ui-button-variant-ghost) {
  background: transparent;
  color: var(--openbot-text-muted);
}
:where(.ui-button-variant-destructive) {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
}
:where(.ui-button-variant-destructive-ghost) {
  background: transparent;
  color: var(--openbot-text-muted);
}
:where(.ui-button-variant-link) {
  height: auto;
  border-radius: var(--openbot-radius-xs);
  background: transparent;
  padding: 0;
  color: var(--openbot-text-primary);
  text-underline-offset: 4px;
}
@media (hover: hover) and (pointer: fine) and (min-width: 601px) {
  :where(.ui-button-variant-default):hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-surface-light);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--openbot-surface-light) 82%, transparent);
    }
  }
  :where(.ui-button-variant-outline):hover:not(:disabled):not([data-disabled]), :where(.ui-button-variant-ghost):hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-bg-control-hover);
    color: var(--openbot-text-primary);
  }
  :where(.ui-button-variant-secondary):hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-bg-control-active);
  }
  :where(.ui-button-variant-destructive):hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-danger-soft-hover);
    color: var(--openbot-danger);
  }
  :where(.ui-button-variant-destructive-ghost):hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-danger-soft);
    color: var(--openbot-danger);
  }
  :where(.ui-button-variant-link):hover:not(:disabled):not([data-disabled]) {
    text-decoration: underline;
  }
}
:where(.ui-button-variant-outline, .ui-button-variant-secondary, .ui-button-variant-ghost)[aria-expanded="true"] {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}
:where(.ui-button):focus-visible {
  outline: 0;
  box-shadow: var(--openbot-focus-ring);
}
:where(.ui-button-variant-destructive):focus-visible {
  border-color: var(--openbot-danger-focus);
}
:where(.ui-button-variant-destructive, .ui-button-variant-destructive-ghost):focus-visible {
  box-shadow: 0 0 0 3px var(--openbot-danger-focus);
}
:where(.ui-button)[aria-invalid="true"] {
  border-color: var(--openbot-danger-border);
  box-shadow: 0 0 0 3px var(--openbot-danger-focus);
}
:where(.ui-button):disabled, :where(.ui-button)[data-disabled] {
  cursor: default;
  opacity: 0.42;
  pointer-events: none;
}
.ui-button-full {
  width: 100%;
}
:where(.ui-icon-button) {
  padding: 0;
}
:where(.ui-button-size-icon-xs) {
  width: var(--openbot-control-xs);
  height: var(--openbot-control-xs);
  padding: 0;
}
:where(.ui-button-size-icon-sm) {
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  padding: 0;
}
:where(.ui-button-size-icon) {
  width: var(--openbot-control-lg);
  height: var(--openbot-control-lg);
  padding: 0;
}
:where(.ui-button-size-icon-lg) {
  width: var(--openbot-control-xl);
  height: var(--openbot-control-xl);
  padding: 0;
}
:where(.ui-icon-button) svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
:where(.ui-button-size-icon-xs) svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.ui-removable-image {
  position: relative;
}
.ui-image-remove-button {
  position: absolute;
  z-index: 1;
  top: -8px;
  right: -8px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface-raised);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-bg-surface-raised) 72%, transparent);
  }
  backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  opacity: 0;
  scale: 0.9;
  transition: opacity var(--openbot-duration-hover) ease, scale var(--openbot-duration-hover) ease, background-color var(--openbot-duration-hover) ease;
}
.ui-removable-image:hover > .ui-image-remove-button, .ui-removable-image:focus-within > .ui-image-remove-button {
  opacity: 1;
  scale: 1;
}
@media (hover: none) {
  .ui-image-remove-button {
    opacity: 1;
    scale: 1;
  }
}
:where(.z-badge) {
  width: fit-content;
  height: 22px;
  min-width: 0;
  display: inline-flex;
  overflow: hidden;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-1);
  border: 1px solid transparent;
  border-radius: var(--openbot-radius-pill);
  padding: var(--openbot-space-0-5) var(--openbot-space-2);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
  transition: border-color var(--openbot-duration-fast) var(--openbot-ease-out), background-color var(--openbot-duration-fast) var(--openbot-ease-out), color var(--openbot-duration-fast) var(--openbot-ease-out);
  white-space: nowrap;
}
:where(.z-badge) > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
:where(.z-badge) > svg {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  pointer-events: none;
}
:where(.z-badge):has(> [data-icon="inline-start"]) {
  padding-left: var(--openbot-space-1-5);
}
:where(.z-badge):has(> [data-icon="inline-end"]) {
  padding-right: var(--openbot-space-1-5);
}
:where(.z-badge-variant-default) {
  background: var(--openbot-accent);
  color: var(--openbot-text-primary);
}
:where(.z-badge-variant-secondary) {
  background: var(--openbot-bg-control);
  color: var(--openbot-text-secondary);
}
:where(.z-badge-variant-outline) {
  border-color: var(--openbot-border-strong);
  background: transparent;
  color: var(--openbot-text-secondary);
}
:where(.z-badge-variant-ghost) {
  background: transparent;
  color: var(--openbot-text-secondary);
}
:where(.z-badge-variant-link) {
  background: transparent;
  color: var(--openbot-accent-text);
  text-decoration: underline;
  text-underline-offset: 4px;
}
:where(.z-badge-variant-primary-light) {
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
}
:where(.z-badge-variant-success-light) {
  background: var(--openbot-success-soft);
  color: var(--openbot-success);
}
:where(.z-badge-variant-warning-light) {
  background: var(--openbot-warning-soft);
  color: var(--openbot-warning);
}
:where(.z-badge-variant-destructive), :where(.z-badge-variant-destructive-light) {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
}
:where(.z-badge-variant-new) {
  background: var(--openbot-badge-new-soft);
  color: var(--openbot-badge-new);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: 0.01em;
}
:where(.z-badge-variant-info-light) {
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
}
:where(.z-badge-variant-primary-outline) {
  border-color: var(--openbot-border-strong);
  background: transparent;
  color: var(--openbot-accent-text);
}
:where(.z-badge-variant-success-outline) {
  border-color: var(--openbot-border-strong);
  background: transparent;
  color: var(--openbot-success);
}
:where(.z-badge-variant-warning-outline) {
  border-color: var(--openbot-border-strong);
  background: transparent;
  color: var(--openbot-warning);
}
:where(.z-badge-variant-destructive-outline) {
  border-color: var(--openbot-border-strong);
  background: transparent;
  color: var(--openbot-danger);
}
:where(.z-badge-variant-info-outline) {
  border-color: var(--openbot-border-strong);
  background: transparent;
  color: var(--openbot-accent-text);
}
:where(.ui-glyph-20) {
  stroke-width: calc(var(--openbot-icon-stroke) * 20 / 24);
}
:where(.ui-glyph-16) {
  stroke-width: calc(var(--openbot-icon-stroke) * 16 / 24);
}
:where(.ui-checkbox) {
  position: relative;
  display: inline-flex;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
}
.ui-checkbox-input {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
}
.ui-checkbox-visual {
  display: inline-flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-bg-control);
  color: transparent;
}
.ui-checkbox-input:checked + .ui-checkbox-visual {
  border-color: var(--openbot-accent);
  background: var(--openbot-accent);
  color: var(--openbot-text-primary);
}
.ui-checkbox-input:focus-visible + .ui-checkbox-visual {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}
.ui-checkbox-visual svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  stroke-width: 2.5;
}
:where(.ui-input, .ui-textarea, .ui-native-select) {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  outline: 0;
  background: var(--openbot-bg-control);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  transition: background-color var(--openbot-duration-hover) ease, border-color var(--openbot-duration-hover) ease, box-shadow var(--openbot-duration-hover) ease;
}
:where(.ui-input, .ui-native-select)[data-size="sm"] {
  height: var(--openbot-control-sm);
  padding-inline: var(--openbot-space-2);
}
:where(.ui-input, .ui-native-select)[data-size="md"] {
  height: var(--openbot-control-md);
  padding-inline: var(--openbot-space-3);
}
:where(.ui-input, .ui-native-select)[data-size="lg"] {
  height: var(--openbot-control-lg);
  padding-inline: var(--openbot-space-3);
}
:where(.ui-textarea) {
  min-height: 76px;
  resize: vertical;
  padding: var(--openbot-space-2) var(--openbot-space-3);
}
:where(.ui-textarea)::-webkit-resizer {
  background-color: var(--openbot-bg-control);
  background-image: linear-gradient( 135deg, transparent 46%, var(--openbot-text-muted) 46% 50%, transparent 50% 62%, var(--openbot-text-muted) 62% 66%, transparent 66% );
  background-repeat: no-repeat;
  background-position: 100% 100%;
  background-size: 50% 50%;
}
:where(.ui-input, .ui-textarea)::placeholder {
  color: var(--openbot-text-placeholder);
}
:where(.ui-input, .ui-textarea, .ui-native-select):focus-visible {
  border-color: var(--openbot-border-focus);
  box-shadow: var(--openbot-focus-ring);
}
:where(.ui-input, .ui-textarea, .ui-native-select)[aria-invalid="true"] {
  border-color: var(--openbot-danger);
}
:where(.ui-input, .ui-textarea, .ui-native-select):disabled {
  cursor: not-allowed;
  opacity: 0.42;
}
.ui-select {
  width: 100%;
  min-width: 0;
}
.ui-select-trigger {
  width: 100%;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-1-5);
  cursor: pointer;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  outline: 0;
  background: transparent;
  padding: var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-2) 10px;
  box-shadow: 0 1px 2px var(--openbot-shadow-popover-ambient);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  text-align: left;
  transition: background-color var(--openbot-duration-hover) ease, border-color var(--openbot-duration-hover) ease, box-shadow var(--openbot-duration-hover) ease;
}
.ui-select-trigger[data-size="sm"] {
  height: var(--openbot-control-md);
  font-size: var(--openbot-text-sm);
}
.ui-select-trigger[data-size="md"] {
  height: var(--openbot-control-lg);
}
.ui-select-trigger[data-expanded] {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-hover);
}
.ui-select .ui-select-trigger:focus-visible {
  border-color: var(--openbot-border-strong);
  outline: 0;
  box-shadow: 0 0 0 3px var(--openbot-hover);
}
.ui-select-trigger[data-disabled] {
  cursor: not-allowed;
  opacity: 0.42;
}
.ui-select-trigger[aria-invalid="true"] {
  border-color: var(--openbot-danger);
  box-shadow: 0 0 0 3px var(--openbot-danger-soft);
}
@media (hover: hover) and (pointer: fine) {
  .ui-select-trigger:hover:not([data-disabled]) {
    background: var(--openbot-hover);
  }
}
.ui-select-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-select-trigger-icon {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: var(--openbot-text-muted);
}
.ui-select-trigger-icon svg {
  width: 100%;
  height: 100%;
}
.ui-select-content {
  z-index: var(--openbot-layer-popover);
  max-height: 320px;
  min-width: 144px;
  overflow: hidden auto;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface-raised);
  box-shadow: 0 4px 6px -1px var(--openbot-shadow-popover-ambient), 0 2px 4px -2px var(--openbot-shadow-popover-ambient), 0 0 0 1px var(--openbot-border-strong);
  color: var(--openbot-text-primary);
  transform-origin: var(--kb-select-content-transform-origin);
  animation: ui-select-content-in var(--openbot-duration-dialog) var(--openbot-ease-out) both;
}
.ui-select-listbox {
  margin: 0;
  padding: var(--openbot-space-1);
  outline: 0;
}
.ui-select-item {
  position: relative;
  display: flex;
  align-items: center;
  cursor: default;
  user-select: none;
  border-radius: var(--openbot-radius-sm);
  outline: 0;
  padding: var(--openbot-space-1-5) var(--openbot-space-8) var(--openbot-space-1-5) var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  transition: background-color var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease;
}
.ui-select-item[data-highlighted] {
  background: var(--openbot-hover);
  color: var(--openbot-text-primary);
}
.ui-select-item[data-selected] {
  background: transparent;
  color: var(--openbot-text-primary);
}
.ui-select-item[data-selected][data-highlighted] {
  background: var(--openbot-hover);
}
.ui-select-item[data-disabled] {
  pointer-events: none;
  opacity: 0.42;
}
.ui-select-item-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-select-item-indicator {
  position: absolute;
  right: var(--openbot-space-2);
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
}
.ui-select-item-indicator svg {
  width: 100%;
  height: 100%;
}
@keyframes ui-select-content-in {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ui-select-content {
    animation-name: ui-select-content-fade-in;
  }
}
@keyframes ui-select-content-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.ui-field {
  display: grid;
  gap: var(--openbot-space-1-5);
}
.ui-label {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
}
.ui-field-required, .ui-field-error {
  color: var(--openbot-danger);
}
.ui-field-required {
  margin-left: var(--openbot-space-0-5);
}
.ui-field-description, .ui-field-error {
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.ui-field-description {
  color: var(--openbot-text-muted);
}
.ui-switch {
  --ui-switch-thumb-size: var(--openbot-switch-thumb);
  --ui-switch-inset: var(--openbot-switch-inset);
  --ui-switch-travel: calc(var(--openbot-switch-width) - var(--ui-switch-thumb-size) - (var(--ui-switch-inset) * 2));
  position: relative;
  z-index: 0;
  width: var(--openbot-switch-width);
  height: var(--openbot-switch-height);
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  outline: none;
  background: var(--openbot-bg-control);
  box-shadow: inset 0 0 0 1px var(--openbot-border-strong), 0 1px 2px var(--openbot-shadow-ring);
  transition: background-color var(--openbot-duration-hover) ease, box-shadow var(--openbot-duration-hover) ease, opacity var(--openbot-duration-hover) ease;
}
.ui-switch[data-size="sm"] {
  --ui-switch-thumb-size: var(--openbot-switch-sm-thumb);
  --ui-switch-inset: var(--openbot-switch-sm-inset);
  --ui-switch-travel: calc(var(--openbot-switch-sm-width) - var(--ui-switch-thumb-size) - (var(--ui-switch-inset) * 2));
  width: var(--openbot-switch-sm-width);
  height: var(--openbot-switch-sm-height);
}
.ui-switch[data-checked] {
  background: var(--openbot-surface-light);
}
.ui-switch[data-invalid] {
  box-shadow: 0 0 0 3px var(--openbot-danger-focus);
}
.ui-switch:not([data-pointer-focus]):has(.ui-switch-input:focus-visible) {
  box-shadow: var(--openbot-focus-ring);
}
.ui-switch[data-invalid]:not([data-pointer-focus]):has(.ui-switch-input:focus-visible) {
  box-shadow: 0 0 0 3px var(--openbot-danger-focus);
}
.ui-switch-field {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
}
.ui-switch-copy {
  min-width: 0;
  display: grid;
  gap: var(--openbot-space-0-5);
}
.ui-switch-label {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
  cursor: pointer;
}
.ui-switch-description {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.ui-switch-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.ui-switch-control {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: inherit;
  cursor: pointer;
}
.ui-switch-control[data-dragging] {
  cursor: grabbing;
}
.ui-switch-thumb {
  position: absolute;
  top: 50%;
  left: 0;
  width: var(--ui-switch-thumb-size);
  height: var(--ui-switch-thumb-size);
  display: block;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-primary);
  box-shadow: 0 1px 2px var(--openbot-shadow-ring);
  transform: translate3d( calc(var(--ui-switch-inset) + (var(--ui-switch-position, 0) * var(--ui-switch-travel))), -50%, 0 ) scale(var(--ui-switch-scale-x, 1), var(--ui-switch-scale-y, 1));
  transform-origin: center;
  will-change: transform;
  transition: background-color var(--openbot-duration-fast) var(--openbot-ease-out);
}
.ui-switch-thumb[data-checked] {
  background: var(--openbot-text-on-light);
}
.ui-slider-field {
  width: 100%;
  display: grid;
  gap: var(--openbot-space-1-5);
}
.ui-slider-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--openbot-space-3);
}
.ui-slider-label {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
}
.ui-slider-value {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  line-height: var(--openbot-leading-sm);
}
.ui-slider-description {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.ui-slider-track {
  position: relative;
  height: 4px;
  margin-block: var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-border-strong);
  cursor: pointer;
}
.ui-slider-track::before {
  content: "";
  position: absolute;
  inset: -10px 0;
}
.ui-slider-fill {
  position: absolute;
  height: 100%;
  border-radius: inherit;
  background: var(--openbot-text-secondary);
}
.ui-slider-thumb {
  top: calc(50% - (var(--openbot-switch-thumb) / 2));
  width: var(--openbot-switch-thumb);
  height: var(--openbot-switch-thumb);
  display: block;
  border-radius: var(--openbot-radius-pill);
  outline: none;
  background: var(--openbot-text-primary);
  box-shadow: 0 1px 2px var(--openbot-shadow-ring);
  cursor: grab;
}
.ui-slider-thumb:focus-visible {
  box-shadow: var(--openbot-focus-ring);
}
.ui-slider-thumb[data-dragging] {
  cursor: grabbing;
}
.ui-seek-slider {
  display: flex;
  touch-action: none;
}
.ui-seek-slider-track {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.ui-seek-slider-picture {
  display: flex;
}
.ui-seek-slider[data-disabled] .ui-seek-slider-track {
  cursor: default;
}
.ui-seek-slider-thumb {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  display: block;
  border-radius: var(--openbot-radius-pill);
  outline: none;
  background: var(--openbot-text-primary);
  opacity: 0;
}
.ui-seek-slider-track:hover .ui-seek-slider-thumb, .ui-seek-slider-thumb:focus-visible, .ui-seek-slider-thumb[data-dragging] {
  opacity: 1;
}
.ui-seek-slider-thumb:focus-visible {
  box-shadow: var(--openbot-focus-ring);
}
.ui-slider-field[data-disabled] {
  opacity: 0.5;
}
.ui-slider-field[data-disabled] .ui-slider-track, .ui-slider-field[data-disabled] .ui-slider-thumb {
  cursor: not-allowed;
}
.ui-switch[data-disabled] {
  opacity: 0.5;
}
.ui-switch[data-disabled] .ui-switch-control {
  cursor: not-allowed;
}
.ui-card {
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-surface);
}
.ui-item-group {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-surface);
}
.ui-item-group[data-surface="subtle"] {
  background: var(--openbot-bg-control);
}
.ui-item-group > :not(:first-child) {
  border-top: 1px solid var(--openbot-border);
}
.ui-item {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  padding-inline: var(--openbot-space-4);
}
.ui-item[data-size="compact"] {
  min-height: 52px;
  padding-block: var(--openbot-space-2);
}
.ui-item[data-size="default"] {
  min-height: 64px;
  padding-block: var(--openbot-space-3);
}
.ui-item[data-size="spacious"] {
  min-height: 72px;
  padding-block: var(--openbot-space-4);
}
.ui-item-media, .ui-item-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}
.ui-item-media {
  color: var(--openbot-text-muted);
}
.ui-item-content {
  min-width: 0;
  display: grid;
  flex: 1 1 auto;
  gap: var(--openbot-space-0-5);
}
.ui-item-title {
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-item-description {
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-item-actions {
  justify-content: flex-end;
  gap: var(--openbot-space-2);
}
.ui-item.ui-dynamic-island-identity {
  min-width: 0;
  width: 100%;
  min-height: 43px;
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: 0;
}
.dynamic-island-external .ui-dynamic-island-identity {
  grid-template-columns: 38px minmax(0, 1fr) auto;
}
.ui-dynamic-island-identity-avatar {
  width: 35px;
  height: 35px;
}
.dynamic-island-external .ui-dynamic-island-identity-avatar {
  width: 38px;
  height: 38px;
}
.ui-dynamic-island-identity-copy {
  gap: 2px;
}
.ui-dynamic-island-identity-title {
  display: flex;
  align-items: baseline;
  gap: var(--openbot-space-1);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-sm);
}
.ui-dynamic-island-identity-name {
  min-width: 0;
  max-width: 26ch;
  overflow: hidden;
  flex: 0 1 auto;
  color: var(--openbot-island-identity-name);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-dynamic-island-identity-status {
  flex: 0 0 auto;
  color: var(--openbot-text-secondary);
}
.ui-dynamic-island-identity-description {
  display: -webkit-box;
  overflow: hidden;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-sm);
  overflow-wrap: anywhere;
  text-wrap: pretty;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.ui-dynamic-island-identity-trailing {
  align-self: start;
  padding-top: 2px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  line-height: var(--openbot-leading-sm);
  white-space: nowrap;
}
.ui-questionnaire {
  min-width: 0;
  display: grid;
  gap: var(--openbot-space-3);
}
.ui-questionnaire-progress {
  color: var(--openbot-text-muted);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  line-height: var(--openbot-leading-sm);
}
.ui-questionnaire-item {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}
.ui-questionnaire-title {
  width: 100%;
  padding: 0;
  color: var(--openbot-text-primary);
}
.ui-questionnaire-description {
  margin: 0;
  color: var(--openbot-text-muted);
}
.ui-questionnaire-choices {
  min-width: 0;
  display: grid;
}
.ui-questionnaire-choice {
  position: relative;
  min-width: 0;
  display: block;
  cursor: pointer;
  outline: 0;
}
.ui-questionnaire-choice[data-disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}
.ui-questionnaire-choice-input {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: inherit;
  opacity: 0;
}
.ui-questionnaire-choice:focus-within {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: -2px;
}
.ui-questionnaire-error {
  margin: 0;
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.ui-questionnaire-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.ui-settings-section {
  display: grid;
  gap: var(--openbot-space-2);
}
.ui-settings-section-header {
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  padding-inline: var(--openbot-space-1);
}
.ui-settings-section-copy {
  min-width: 0;
  display: grid;
  gap: var(--openbot-space-1);
}
.ui-settings-section-heading {
  font-weight: var(--openbot-weight-regular);
}
.ui-settings-section-description {
  display: block;
}
.ui-settings-section-actions {
  min-width: 0;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--openbot-space-2);
}
.ui-qr-code {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-qr-background);
}
.ui-qr-code > * {
  grid-area: 1 / 1;
}
.ui-qr-code > img {
  width: 100%;
  height: 100%;
  display: block;
}
.ui-qr-code-mark {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  color: var(--openbot-text-on-light);
  visibility: hidden;
}
.ui-qr-code-mark[data-ready] {
  visibility: visible;
}
.ui-alert {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-3);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  padding: var(--openbot-space-3) var(--openbot-space-4);
  color: var(--openbot-text-muted);
}
.ui-alert[data-tone="success"] {
  border-color: var(--openbot-success-soft);
  background: var(--openbot-success-wash);
  color: var(--openbot-success);
}
.ui-alert[data-tone="warning"] {
  border-color: var(--openbot-warning-soft);
  background: var(--openbot-warning-soft);
  color: var(--openbot-warning);
}
.ui-alert[data-tone="danger"] {
  border-color: var(--openbot-danger-soft);
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
}
.ui-alert-icon {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}
.ui-alert-icon svg {
  width: 100%;
  height: 100%;
}
.ui-alert-content {
  min-width: 0;
  display: grid;
  gap: var(--openbot-space-0-5);
}
.ui-alert-title {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
}
.ui-alert-description {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.ui-alert[data-tone] .ui-alert-description {
  color: var(--openbot-text-secondary);
}
.ui-alert-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
}
.ui-progress {
  width: 100%;
}
.ui-progress-track {
  width: 100%;
  height: 3px;
  overflow: hidden;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-border-strong);
}
.ui-progress-fill {
  width: var(--kb-progress-fill-width, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--openbot-text-secondary);
  transition: width var(--openbot-duration-normal) var(--openbot-ease-out);
}
.ui-progress-fill[data-indeterminate] {
  width: 35%;
  animation: ui-progress-travel 1.4s var(--openbot-ease-in-out) infinite;
  transition: none;
}
@keyframes ui-progress-travel {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(286%);
  }
}
.ui-radial-progress {
  --ui-radial-progress-color: var(--openbot-accent);
  position: relative;
  display: grid;
  width: 104px;
  aspect-ratio: 1;
  place-items: center;
  color: var(--ui-radial-progress-color);
}
.ui-radial-progress[data-tone="warning"] {
  --ui-radial-progress-color: var(--openbot-warning);
}
.ui-radial-progress[data-tone="danger"] {
  --ui-radial-progress-color: var(--openbot-danger);
}
.ui-radial-progress-chart {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ui-radial-progress-track, .ui-radial-progress-indicator {
  fill: none;
}
.ui-radial-progress-track {
  stroke: var(--openbot-border-strong);
}
.ui-radial-progress-indicator {
  stroke: currentcolor;
  stroke-linecap: butt;
  transition: stroke-dasharray var(--openbot-duration-normal) var(--openbot-ease-out), stroke-dashoffset var(--openbot-duration-normal) var(--openbot-ease-out);
}
.ui-radial-progress-indicator[data-linecap="round"] {
  stroke-linecap: round;
}
.ui-radial-progress-content {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  color: var(--openbot-text-primary);
}
.ui-toaster[data-sonner-toaster][data-sonner-theme="dark"] {
  z-index: var(--openbot-layer-toast);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
  --normal-bg: var(--openbot-bg-surface-raised);
  --normal-bg-hover: var(--openbot-bg-control-hover);
  --normal-border: var(--openbot-border);
  --normal-border-hover: var(--openbot-border-focus);
  --normal-text: var(--openbot-text-primary);
  --border-radius: var(--openbot-radius-lg);
}
.ui-toaster [data-sonner-toast][data-styled="true"] {
  --ui-toast-tone: transparent;
  --ui-toast-motion-duration: var(--openbot-duration-toast-enter);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 0;
  row-gap: var(--openbot-space-2);
  min-height: var(--openbot-control-xl);
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border-color: transparent;
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface-raised);
  box-shadow: 0 0 0 1px var(--openbot-border), var(--openbot-shadow-raised);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  transition: transform var(--ui-toast-motion-duration) var(--openbot-ease-out), opacity var(--ui-toast-motion-duration) var(--openbot-ease-out), height var(--ui-toast-motion-duration) var(--openbot-ease-out), box-shadow var(--openbot-duration-normal) ease;
}
.ui-toaster [data-sonner-toast][data-styled="true"][data-removed="true"] {
  --ui-toast-motion-duration: var(--openbot-duration-toast-exit);
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-content] {
  grid-area: 1 / 2 / 2 / -1;
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-button] {
  grid-row: 2;
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-cancel] {
  grid-column: 2;
  justify-self: end;
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-action] {
  grid-column: 3;
}
.ui-toaster.ui-toaster-closeable [data-sonner-toast][data-styled="true"] [data-content], .ui-toaster [data-sonner-toast][data-styled="true"]:has([data-close-button]) [data-content] {
  padding-right: var(--openbot-space-6);
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-title] {
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-description] {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-wrap: pretty;
}
.ui-error-reference {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
  margin-top: var(--openbot-space-0-5);
  color: var(--openbot-text-muted);
}
.ui-error-reference-code {
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-xs);
  line-height: var(--openbot-leading-sm);
  user-select: text;
  overflow-wrap: anywhere;
}
.ui-toaster [data-sonner-toast][data-type="success"] {
  --ui-toast-tone: var(--openbot-success);
}
.ui-toaster [data-sonner-toast][data-type="info"] {
  --ui-toast-tone: var(--openbot-accent-text);
}
.ui-toaster [data-sonner-toast][data-type="warning"] {
  --ui-toast-tone: var(--openbot-warning);
}
.ui-toaster [data-sonner-toast][data-type="error"] {
  --ui-toast-tone: var(--openbot-danger);
}
.ui-toaster [data-sonner-toast][data-type="loading"] {
  --ui-toast-tone: var(--openbot-text-muted);
}
.ui-toaster [data-sonner-toast][data-type="success"] [data-icon], .ui-toaster [data-sonner-toast][data-type="info"] [data-icon], .ui-toaster [data-sonner-toast][data-type="warning"] [data-icon], .ui-toaster [data-sonner-toast][data-type="error"] [data-icon], .ui-toaster [data-sonner-toast][data-type="loading"] [data-icon] {
  color: var(--ui-toast-tone);
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-icon] {
  grid-area: 1 / 1;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  margin: 1px var(--openbot-space-3) 0 0;
}
.ui-toast-icon {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: var(--openbot-icon-stroke);
}
.ui-toast-loading-icon {
  animation: ui-spin 720ms linear infinite;
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-button] {
  height: var(--openbot-control-md);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control-hover);
  box-shadow: inset 0 0 0 1px var(--openbot-border);
  padding-inline: var(--openbot-space-3);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  transition: background-color var(--openbot-duration-normal) ease, color var(--openbot-duration-normal) ease, transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-cancel] {
  background: transparent;
  color: var(--openbot-text-secondary);
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-button]:focus-visible, .ui-toaster [data-sonner-toast]:focus-visible {
  outline: 0;
  box-shadow: var(--openbot-focus-ring);
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-close-button]:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 1px var(--openbot-border-strong), 0 0 0 2px var(--openbot-border-strong);
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-close-button] {
  top: var(--openbot-space-1);
  right: var(--openbot-space-1);
  left: auto;
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  color: var(--openbot-text-muted);
  pointer-events: auto;
  opacity: 1;
  transform: scale(1);
  transition: background-color var(--openbot-duration-normal) ease, box-shadow var(--openbot-duration-normal) ease, color var(--openbot-duration-normal) ease, opacity var(--openbot-duration-normal) ease, transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-close-button]::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--openbot-control-xl);
  height: var(--openbot-control-xl);
  content: "";
  transform: translate(-50%, -50%);
}
@media (hover: hover) and (pointer: fine) {
  .ui-toaster [data-sonner-toast][data-styled="true"] [data-close-button] {
    pointer-events: none;
    opacity: 0;
  }
  .ui-toaster [data-sonner-toast][data-styled="true"]:hover [data-close-button], .ui-toaster [data-sonner-toast][data-styled="true"]:focus-within [data-close-button], .ui-toaster [data-sonner-toast][data-styled="true"] [data-close-button]:focus-visible {
    pointer-events: auto;
    opacity: 1;
  }
  .ui-toaster [data-sonner-toast][data-styled="true"] [data-button]:hover {
    background: var(--openbot-bg-control-active);
  }
  .ui-toaster [data-sonner-toast][data-styled="true"] [data-close-button]:hover:not(:focus-visible) {
    background: var(--openbot-danger-soft);
    color: var(--openbot-danger);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ui-progress-fill, .ui-radial-progress-indicator {
    animation: none;
    transition: none;
  }
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-button]:active {
  transform: scale(0.96);
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-close-button]:active {
  transform: scale(0.96);
}
.ui-separator[data-orientation="horizontal"] {
  width: 100%;
  height: 1px;
  background: var(--openbot-border);
}
.ui-separator[data-orientation="vertical"] {
  width: 1px;
  height: 100%;
  background: var(--openbot-border);
}
.ui-spinner {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  display: inline-block;
  flex: 0 0 auto;
  border: 1.5px solid var(--openbot-border-strong);
  border-top-color: currentColor;
  border-radius: var(--openbot-radius-pill);
  animation: ui-spin 720ms linear infinite;
}
.ui-spinner[data-size="sm"] {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.ui-spinner[data-size="lg"] {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
}
@keyframes ui-spin {
  to {
    transform: rotate(360deg);
  }
}
.ui-skeleton {
  min-height: var(--openbot-leading-md);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-control-hover);
  animation: ui-skeleton-pulse 1.2s ease-in-out infinite;
}
@keyframes ui-skeleton-pulse {
  50% {
    opacity: 0.56;
  }
}
.ui-kbd {
  min-width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-bg-control);
  padding-inline: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  line-height: 1;
}
.ui-tooltip {
  position: relative;
  z-index: var(--openbot-layer-tooltip);
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-canvas);
  box-shadow: 0 0 0 1px var(--openbot-border-strong), var(--openbot-shadow-raised);
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-sm);
  opacity: 1;
  pointer-events: none;
  transform: translateY(0) scale(1);
  transform-origin: bottom center;
  transition: opacity var(--openbot-duration-fast) ease, transform var(--openbot-duration-fast) var(--openbot-ease-out);
  @starting-style {
    opacity: 0;
    transform: translateY(2px) scale(0.96);
  }
}
.ui-tooltip::after {
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 8px;
  height: 8px;
  background: var(--openbot-bg-canvas);
  box-shadow: 1px 1px 0 var(--openbot-border-strong);
  content: "";
  transform: translateX(-50%) rotate(45deg);
}
.ui-tooltip[data-placement="bottom"] {
  transform-origin: top center;
}
.ui-tooltip[data-placement="bottom"]::after {
  top: -4px;
  bottom: auto;
  box-shadow: -1px -1px 0 var(--openbot-border-strong);
}
.ui-tooltip:is([data-placement="left"], [data-placement="right"])::after {
  top: 50%;
  bottom: auto;
}
.ui-tooltip[data-placement="left"] {
  transform-origin: center right;
}
.ui-tooltip[data-placement="left"]::after {
  right: -4px;
  left: auto;
  box-shadow: 1px -1px 0 var(--openbot-border-strong);
  transform: translateY(-50%) rotate(45deg);
}
.ui-tooltip[data-placement="right"] {
  transform-origin: center left;
}
.ui-tooltip[data-placement="right"]::after {
  left: -4px;
  box-shadow: -1px 1px 0 var(--openbot-border-strong);
  transform: translateY(-50%) rotate(45deg);
}
@media (prefers-reduced-motion: reduce) {
  .ui-button, .ui-switch, .ui-switch-thumb, .ui-tooltip {
    transition-property: background-color, border-color, color, opacity;
  }
  .ui-spinner, .ui-skeleton {
    animation-duration: 1.8s;
  }
  .ui-toaster [data-sonner-toast], .ui-toaster [data-sonner-toast] > * {
    transition-duration: 0.01ms;
  }
  .ui-toast-loading-icon {
    animation: none;
  }
}
.ui-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--openbot-layer-dialog);
  display: grid;
  place-items: center;
  padding: var(--openbot-space-6);
  background: var(--openbot-dialog-overlay);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: ui-dialog-overlay-in var(--openbot-duration-overlay) var(--openbot-ease-out);
  -webkit-app-region: no-drag;
}
.ui-dialog-content {
  border: 0;
  border-radius: var(--openbot-radius-card);
  box-shadow: 0 0 0 1px var(--openbot-dialog-ring);
}
.ui-dialog-content[data-dialog-surface="unstyled"] {
  border-radius: 0;
  box-shadow: none;
}
.ui-stable-label {
  display: inline-grid;
}
.ui-stable-label-text, .ui-stable-label-sizer {
  grid-area: 1 / 1;
}
.ui-stable-label-sizer {
  visibility: hidden;
}
.ui-confirm-dialog-overlay {
  z-index: calc(var(--openbot-layer-dialog-host) + 2);
}
.ui-dialog-content.ui-confirm-dialog {
  width: min(460px, 100%);
  max-height: calc(100dvh - 2 * var(--openbot-space-6));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  outline: 0;
  border-radius: var(--openbot-radius-xl);
  background: var(--openbot-bg-sidebar);
  color: var(--openbot-text-primary);
  border: 1px solid var(--openbot-dialog-ring);
  box-shadow: none;
  animation: ui-confirm-dialog-in var(--openbot-duration-slow) var(--openbot-ease-out);
}
.ui-confirm-dialog-main {
  min-height: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--openbot-space-4);
  overflow-y: auto;
  padding: var(--openbot-space-6);
}
.ui-confirm-dialog-icon {
  width: var(--openbot-control-xl);
  height: var(--openbot-control-xl);
  display: grid;
  place-items: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-secondary);
}
.ui-confirm-dialog-icon svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  stroke-width: var(--openbot-icon-stroke);
}
.ui-confirm-dialog[data-tone="destructive"] .ui-confirm-dialog-icon {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger-text);
}
.ui-confirm-dialog-media {
  display: grid;
  place-items: center;
}
.ui-confirm-dialog-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
  padding-top: var(--openbot-space-1-5);
}
.ui-confirm-dialog-title {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-xl);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-xl);
  letter-spacing: var(--openbot-tracking-tight);
  overflow-wrap: anywhere;
}
.ui-confirm-dialog-description {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
.ui-confirm-dialog-body {
  margin-top: var(--openbot-space-1);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.ui-confirm-dialog-body :where(ul, ol) {
  display: grid;
  gap: var(--openbot-space-1);
  margin: 0;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-3) var(--openbot-space-4) var(--openbot-space-3) var(--openbot-space-8);
  list-style: disc;
}
.ui-confirm-dialog-body :where(ol) {
  list-style: decimal;
}
.ui-confirm-dialog-body :where(li)::marker {
  color: var(--openbot-text-dim);
}
.ui-confirm-dialog-error.ui-alert {
  margin-top: var(--openbot-space-1);
  padding: var(--openbot-space-2) var(--openbot-space-3);
}
.ui-confirm-dialog-error .ui-alert-icon {
  color: var(--openbot-danger-text);
}
.ui-confirm-dialog-actions {
  display: flex;
  flex: 0 0 auto;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
  border-top: 1px solid var(--openbot-dialog-ring);
  padding: var(--openbot-space-4) var(--openbot-space-6);
}
.ui-confirm-dialog-actions .ui-button svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: var(--openbot-icon-stroke);
}
.ui-confirm-dialog-confirm.ui-button-variant-destructive {
  color: var(--openbot-danger-text);
}
@media (hover: hover) and (pointer: fine) {
  .ui-confirm-dialog-confirm.ui-button-variant-destructive:hover:not(:disabled):not([data-disabled]) {
    color: var(--openbot-danger-text);
  }
}
.ui-confirm-dialog-actions .ui-button:active:not(:disabled):not([data-disabled]) {
  transform: scale(0.97);
}
@keyframes ui-dialog-overlay-in {
  from {
    opacity: 0;
  }
}
@keyframes ui-confirm-dialog-in {
  from {
    opacity: 0;
    transform: scale(0.97) translateY(4px);
  }
}
@media (max-width: 560px) {
  .ui-confirm-dialog-overlay {
    padding: var(--openbot-space-3);
  }
  .ui-dialog-content.ui-confirm-dialog {
    max-height: calc(100dvh - 2 * var(--openbot-space-3));
  }
  .ui-confirm-dialog-main {
    padding: var(--openbot-space-4);
  }
  .ui-confirm-dialog-actions {
    padding: var(--openbot-space-3) var(--openbot-space-4);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ui-dialog-content.ui-confirm-dialog {
    animation-name: ui-dialog-overlay-in;
  }
  .ui-confirm-dialog-actions .ui-button:active {
    transform: none;
  }
}
.ui-bubble-group {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--openbot-space-2);
}
.ui-bubble {
  position: relative;
  display: flex;
  width: fit-content;
  min-width: 0;
  max-width: min(80%, 720px);
  flex-direction: column;
  align-self: flex-start;
  gap: var(--openbot-space-1);
  color: var(--openbot-text-primary);
}
.ui-bubble[data-align="end"] {
  align-self: flex-end;
}
.ui-bubble-content {
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--openbot-radius-bubble);
  padding: 8px 12px;
  font-size: var(--openbot-text-lg);
  line-height: 1.625;
  overflow-wrap: anywhere;
  transition: border-color var(--openbot-duration-hover) ease, background var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease;
}
button.ui-bubble-content, a.ui-bubble-content {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  transition: color var(--openbot-duration-hover) ease;
}
button.ui-bubble-content {
  cursor: pointer;
}
.ui-bubble-variant-default {
  color: var(--openbot-text-on-light);
}
.ui-bubble-variant-default > .ui-bubble-content {
  background: var(--openbot-surface-light);
}
.ui-bubble-variant-default .message-reply-context {
  border-left-color: var(--openbot-text-muted-on-light);
  color: var(--openbot-text-on-light);
}
.ui-bubble-variant-secondary > .ui-bubble-content {
  background: var(--openbot-bg-surface-raised);
}
.ui-bubble-variant-muted > .ui-bubble-content {
  background: var(--openbot-bg-surface);
}
.ui-bubble-variant-tinted {
  color: var(--openbot-accent-text);
}
.ui-bubble-variant-tinted > .ui-bubble-content {
  border-color: var(--openbot-accent-strong);
  background: var(--openbot-accent-soft);
}
.ui-bubble-variant-outline > .ui-bubble-content {
  border-color: var(--openbot-border-strong);
  background: transparent;
}
.ui-bubble-variant-ghost {
  width: fit-content;
  max-width: 100%;
  border-color: transparent;
  background: transparent;
}
.ui-bubble-variant-ghost > .ui-bubble-content {
  width: fit-content;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.ui-bubble-variant-destructive {
  color: var(--openbot-danger);
}
.ui-bubble-variant-destructive > .ui-bubble-content {
  border-color: var(--openbot-danger-border);
  background: var(--openbot-danger-soft);
}
.ui-bubble-reactions {
  position: absolute;
  z-index: 1;
  display: flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: var(--openbot-space-1);
  border: 0;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface);
  padding: 2px 6px;
  box-shadow: 0 0 0 3px var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
  white-space: nowrap;
  transition: background var(--openbot-duration-hover) ease, box-shadow var(--openbot-duration-hover) ease;
}
.ui-bubble-reactions:has(button) {
  padding: 0;
}
.ui-bubble-reactions-side-top {
  top: 0;
  translate: 0 -75%;
}
.ui-bubble-reactions-side-bottom {
  bottom: 0;
  translate: 0 75%;
}
.ui-bubble-reactions-align-start {
  left: var(--openbot-space-3);
}
.ui-bubble-reactions-align-end {
  right: var(--openbot-space-3);
}
.ui-bubble-reaction-overflow {
  color: var(--openbot-text-primary);
  font: inherit;
}
.ui-marker {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
}
.ui-marker-content {
  display: flex;
  min-width: 0;
  align-items: center;
}
.ui-marker-icon {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
}
.ui-message-group {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--openbot-space-1);
}
.ui-message {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: flex-end;
  gap: var(--openbot-space-2);
}
.ui-message[data-align="end"] {
  flex-direction: row-reverse;
}
.ui-message-avatar {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  align-self: flex-end;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
}
.ui-message-content {
  display: flex;
  width: 100%;
  min-width: 0;
  max-width: 720px;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--openbot-space-1);
  overflow-wrap: anywhere;
}
.ui-message[data-align="end"] > .ui-message-content {
  align-items: flex-end;
}
.ui-message-header, .ui-message-footer {
  display: flex;
  max-width: 100%;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: 0 var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
}
.ui-message[data-align="end"] .ui-message-footer {
  justify-content: flex-end;
}
.ui-toast-layer {
  pointer-events: auto;
}
.otp-input {
  display: grid;
  gap: 10px;
  justify-items: center;
}
.otp-input-fieldset {
  position: relative;
  width: max-content;
  max-width: 100%;
  margin: 0;
  border: 0;
  padding: 0;
}
.otp-input .otp-input-native {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 0;
  color: transparent;
  caret-color: transparent;
  cursor: text;
  opacity: 0;
}
.otp-input .otp-input-native:focus {
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
}
.otp-input-slots {
  --otp-slot-size: 34px;
  --otp-slot-height: 50px;
  --otp-slot-gap: 6px;
  --otp-group-gap: 8px;
  position: relative;
  display: flex;
  gap: var(--otp-slot-gap);
}
.otp-input-slot, .otp-input-focus-ring {
  width: var(--otp-slot-size);
  height: var(--otp-slot-height);
  border-radius: var(--openbot-radius-md);
}
.otp-input-slot {
  position: relative;
  display: grid;
  flex: 0 0 var(--otp-slot-size);
  place-items: center;
  border: 1px solid var(--otp-slot-border, var(--openbot-border-strong));
  background: var(--otp-slot-background, var(--openbot-bg-control));
  box-shadow: var(--otp-slot-shadow, none);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-xl);
  font-weight: var(--openbot-weight-semibold);
  line-height: 1;
  transition: border-color var(--openbot-duration-hover) ease, background-color var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease;
}
.otp-input-slot[data-filled="true"] {
  background: var(--otp-slot-filled-background, var(--otp-slot-background, var(--openbot-bg-control)));
}
.otp-input-slot[data-group-start="true"] {
  margin-left: var(--otp-group-gap);
}
.otp-input-focus-ring {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  border: 1px solid var(--openbot-border-focus);
  box-shadow: var(--openbot-focus-ring);
  opacity: 0;
  pointer-events: none;
  transform: translateX( calc(var(--otp-active-index) * (var(--otp-slot-size) + var(--otp-slot-gap)) + var(--otp-group-offset)) );
  transition: transform var(--openbot-duration-hover) var(--openbot-ease-out), opacity var(--openbot-duration-hover) ease;
}
.otp-input-focus-ring[data-visible="true"] {
  opacity: 1;
}
.otp-input-character {
  position: relative;
  z-index: 1;
  animation: otp-character-enter var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.otp-input-caret {
  position: absolute;
  z-index: 2;
  top: calc((var(--otp-slot-height) - 24px) / 2);
  left: 50%;
  width: 1px;
  height: 24px;
  background: var(--openbot-text-primary);
  animation: otp-caret-blink 1s steps(1, end) infinite;
  transform: translateX(-50%);
}
.otp-input-caret[data-trailing="true"] {
  margin-left: 7px;
}
.otp-input[data-size="compact"] {
  container-type: inline-size;
  justify-items: start;
}
.otp-input[data-size="compact"] .otp-input-slots {
  --otp-slot-height: 48px;
  --otp-slot-gap: var(--openbot-space-2);
  --otp-group-gap: 14px;
  --otp-slot-size: min(
    var(--openbot-control-xl),
    calc((100cqw - (var(--otp-length) - 1) * var(--otp-slot-gap) - var(--otp-group-gap)) / var(--otp-length))
  );
}
.otp-input[data-status="verifying"] .otp-input-slot {
  color: var(--openbot-text-secondary);
}
.otp-input[data-status="error"] .otp-input-slot {
  border-color: var(--openbot-danger);
  background: var(--openbot-danger-soft);
}
.otp-input[data-status="error"] .otp-input-focus-ring {
  border-color: var(--openbot-danger);
  box-shadow: 0 0 0 3px var(--openbot-danger-soft);
}
.otp-input[data-status="success"] .otp-input-slot {
  border-color: var(--openbot-success);
  background: var(--openbot-success-soft);
  color: var(--openbot-success);
}
.otp-input-success {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  overflow: visible;
  color: var(--openbot-success);
}
.otp-input-success path {
  fill: none;
  stroke: currentcolor;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  animation: otp-check-draw 350ms var(--openbot-duration-fast) var(--openbot-ease-out) forwards;
}
.otp-input-message {
  min-height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 17px;
  text-align: center;
}
.otp-input[data-status="error"] .otp-input-message {
  color: var(--openbot-danger);
}
.otp-input[data-status="success"] .otp-input-message {
  color: var(--openbot-success);
}
.otp-input[data-size="compact"] .otp-input-message {
  justify-content: flex-start;
  text-align: start;
}
@keyframes otp-character-enter {
  from {
    filter: blur(2px);
    opacity: 0;
    transform: translateY(9px);
  }
}
@keyframes otp-check-draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes otp-caret-blink {
  50% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .otp-input-slot, .otp-input-focus-ring {
    transition: none;
  }
  .otp-input-character, .otp-input-caret, .otp-input-success path {
    animation: none;
  }
  .otp-input-success path {
    stroke-dashoffset: 0;
  }
}
@keyframes t-digit-pop-in {
  0% {
    transform: translate( calc(var(--digit-distance) * var(--digit-dir-x)), calc(var(--digit-distance) * var(--digit-dir-y)) );
    opacity: 0;
    filter: blur(var(--digit-blur));
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
    filter: blur(0);
  }
}
.t-digit-group {
  display: inline-flex;
  align-items: baseline;
}
.t-digit {
  display: inline-block;
  will-change: transform, opacity, filter;
}
.t-digit-group.is-animating .t-digit {
  animation: t-digit-pop-in var(--digit-dur) var(--digit-ease) both;
}
.t-digit-group.is-animating .t-digit[data-stagger="1"] {
  animation-delay: var(--digit-stagger);
}
.t-digit-group.is-animating .t-digit[data-stagger="2"] {
  animation-delay: calc(var(--digit-stagger) * 2);
}
@media (prefers-reduced-motion: reduce) {
  .t-digit-group .t-digit {
    animation: none !important;
  }
}
.t-input {
  transition: border-color var(--openbot-duration-normal) ease-out;
  will-change: transform;
}
.t-input.is-error {
  transition: border-color var(--revert-dur, 280ms) ease-out;
}
.t-error-msg {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--revert-dur, 280ms) ease-out, visibility 0s linear var(--revert-dur, 280ms);
}
.t-input-wrap.is-error .t-error-msg {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--revert-dur, 280ms) ease-out, visibility 0s linear 0s;
}
.t-input.is-shaking {
  animation: t-input-shake calc(var(--shake-dur-a) * 2 + var(--shake-dur-b) * 2) linear;
}
@keyframes t-input-shake {
  0% {
    transform: translateX(0);
    animation-timing-function: var(--shake-ease);
  }
  28.57% {
    transform: translateX(var(--shake-distance));
    animation-timing-function: var(--shake-ease);
  }
  57.14% {
    transform: translateX(calc(var(--shake-distance) * -1));
    animation-timing-function: var(--shake-ease);
  }
  78.57% {
    transform: translateX(var(--shake-overshoot));
    animation-timing-function: var(--shake-ease);
  }
  100% {
    transform: translateX(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .t-input {
    animation: none !important;
    transform: none !important;
  }
}
.t-modal {
  transform-origin: center;
  transform: scale(var(--modal-scale));
  opacity: 0;
  pointer-events: none;
  transition: transform var(--modal-open-dur) var(--modal-ease), opacity var(--modal-open-dur) var(--modal-ease);
  will-change: transform, opacity;
}
.t-modal.is-open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
.t-modal.is-closing {
  transform: scale(var(--modal-scale-close));
  opacity: 0;
  pointer-events: none;
  transition: transform var(--modal-close-dur) var(--modal-ease), opacity var(--modal-close-dur) var(--modal-ease);
}
@media (prefers-reduced-motion: reduce) {
  .t-modal {
    transition: none !important;
  }
}
.t-page-slide {
  position: relative;
}
.t-page-slide .t-page[data-page-id="1"] {
  --t-page-from-x: calc(var(--page-slide-distance) * -1);
}
.t-page-slide .t-page[data-page-id="2"] {
  --t-page-from-x: var(--page-slide-distance);
}
.t-page-slide .t-page {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateX(calc(var(--t-page-from-x, 0px) * var(--page-exit-enabled)));
  filter: blur(calc(var(--page-blur) * var(--page-exit-enabled)));
  transition: opacity var(--page-fade-dur) var(--page-fade-ease), transform var(--page-slide-dur) var(--page-slide-ease), filter var(--page-slide-dur) var(--page-slide-ease);
  will-change: opacity, transform, filter;
}
.t-page-slide[data-page="1"] .t-page[data-page-id="1"], .t-page-slide[data-page="2"] .t-page[data-page-id="2"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
  filter: blur(0);
  transition-delay: var(--page-stagger);
}
@media (prefers-reduced-motion: reduce) {
  .t-page-slide .t-page {
    transition: none !important;
  }
}
.t-text-swap {
  display: inline-block;
  transform: translateY(0);
  filter: blur(0);
  opacity: 1;
  transition: transform var(--text-swap-dur) var(--text-swap-ease), filter var(--text-swap-dur) var(--text-swap-ease), opacity var(--text-swap-dur) var(--text-swap-ease);
  will-change: transform, filter, opacity;
}
.t-text-swap.is-exit {
  transform: translateY(calc(var(--text-swap-translate-y) * -1));
  filter: blur(var(--text-swap-blur));
  opacity: 0;
}
.t-text-swap.is-enter-start {
  transform: translateY(var(--text-swap-translate-y));
  filter: blur(var(--text-swap-blur));
  opacity: 0;
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .t-text-swap {
    transition: none !important;
  }
}
.t-resize {
  transition: width var(--resize-dur) var(--resize-ease), height var(--resize-dur) var(--resize-ease);
  will-change: width, height;
}
@media (prefers-reduced-motion: reduce) {
  .t-resize {
    transition: none !important;
  }
}
.t-panel-slide {
  transform: translate(var(--panel-translate-x), var(--panel-translate-y));
  opacity: 0;
  filter: blur(var(--panel-blur));
  pointer-events: none;
  transition: transform var(--panel-close-dur) var(--panel-ease), opacity var(--panel-close-dur) var(--panel-ease), filter var(--panel-close-dur) var(--panel-ease);
  will-change: transform, opacity, filter;
}
.t-panel-slide[data-open="true"] {
  transform: translate(0, 0);
  opacity: 1;
  filter: blur(0);
  pointer-events: auto;
  transition: transform var(--panel-open-dur) var(--panel-ease), opacity var(--panel-open-dur) var(--panel-ease), filter var(--panel-open-dur) var(--panel-ease);
}
@media (prefers-reduced-motion: reduce) {
  .t-panel-slide {
    transition: none !important;
  }
}
.t-acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--acc-collapse) var(--acc-ease);
}
.t-acc[data-open="true"] .t-acc-panel {
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--acc-expand) var(--acc-ease);
}
.t-acc-panel-inner {
  overflow: hidden;
  opacity: 0;
  filter: blur(2px);
  transition: opacity var(--acc-collapse) var(--acc-ease), filter var(--acc-collapse) var(--acc-ease);
}
.t-acc[data-open="true"] .t-acc-panel-inner {
  opacity: 1;
  filter: blur(0);
  transition: opacity var(--acc-expand) var(--acc-ease), filter var(--acc-expand) var(--acc-ease);
}
@media (prefers-reduced-motion: reduce) {
  .t-acc-panel, .t-acc-panel-inner {
    transition: none !important;
  }
}
.ui-sliding-tabs {
  --sliding-tabs-duration: 250ms;
  --sliding-tabs-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-tabs-bar-bg);
  box-shadow: inset 0 0 0 1px var(--openbot-border);
  padding: 3px;
}
.ui-sliding-tabs-trigger {
  position: relative;
  z-index: 1;
  height: var(--openbot-control-sm);
  appearance: none;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  outline: 0;
  background: transparent;
  padding: 4px var(--openbot-space-3);
  color: var(--openbot-text-muted);
  font: inherit;
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-sm);
  font-weight: var(--openbot-weight-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--sliding-tabs-duration) var(--sliding-tabs-ease);
}
.ui-sliding-tabs-trigger[aria-selected="true"], .ui-sliding-tabs-trigger:not([aria-selected="true"]):hover {
  color: var(--openbot-text-primary);
}
.ui-sliding-tabs-trigger:focus-visible {
  box-shadow: var(--openbot-focus-ring);
}
.ui-sliding-tabs-trigger:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}
.ui-sliding-tabs-pill {
  position: absolute;
  top: 3px;
  left: 0;
  z-index: 0;
  width: 0;
  height: var(--openbot-control-sm);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-tabs-pill-bg);
  pointer-events: none;
  transition: transform var(--sliding-tabs-duration) var(--sliding-tabs-ease), width var(--sliding-tabs-duration) var(--sliding-tabs-ease);
  will-change: transform, width;
}
.ui-sliding-tabs-pill:is([data-initializing], [data-resizing]) {
  transition: none;
}
.ui-sliding-tabs-content-slot {
  --sliding-tabs-content-duration: 150ms;
  --sliding-tabs-content-distance: 4px;
  --sliding-tabs-content-blur: 2px;
  min-width: 0;
  display: grid;
}
.ui-sliding-tabs-content {
  min-width: 0;
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  filter: blur(var(--sliding-tabs-content-blur));
  transform: translateY(var(--sliding-tabs-content-distance));
  pointer-events: none;
  transition: transform var(--sliding-tabs-content-duration) ease-in-out, filter var(--sliding-tabs-content-duration) ease-in-out, opacity var(--sliding-tabs-content-duration) ease-in-out, visibility 0s linear var(--sliding-tabs-content-duration);
  will-change: transform, filter, opacity;
}
.ui-sliding-tabs-content[data-selected] {
  opacity: 1;
  visibility: visible;
  filter: blur(0);
  transform: translateY(0);
  pointer-events: auto;
  transition: transform var(--sliding-tabs-content-duration) ease-in-out, filter var(--sliding-tabs-content-duration) ease-in-out, opacity var(--sliding-tabs-content-duration) ease-in-out, visibility 0s linear;
}
@media (prefers-reduced-motion: reduce) {
  .ui-sliding-tabs-pill, .ui-sliding-tabs-trigger, .ui-sliding-tabs-content {
    transition: none;
  }
}
:root {
  --ui-menu-radius: var(--openbot-radius-card);
  --ui-menu-padding: var(--openbot-space-1-5);
  --ui-menu-item-radius: calc(var(--ui-menu-radius) - var(--ui-menu-padding) + var(--openbot-space-0-5));
  --ui-menu-inset: calc(var(--openbot-space-2) + var(--openbot-space-0-5));
  --ui-menu-bg: var(--openbot-bg-sheet);
  --ui-menu-edge: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --ui-menu-edge: color-mix(in srgb, var(--openbot-text-primary) 11%, transparent);
  }
  --ui-menu-highlight: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --ui-menu-highlight: color-mix(in srgb, var(--openbot-text-primary) 5%, transparent);
  }
  --ui-menu-shadow: var(--openbot-bg-notch);
  @supports (color: color-mix(in lab, red, red)) {
    --ui-menu-shadow: color-mix(in srgb, var(--openbot-bg-notch) 45%, transparent);
  }
  --ui-menu-item-hover: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --ui-menu-item-hover: color-mix(in srgb, var(--openbot-text-primary) 6%, transparent);
  }
  --ui-menu-row-highlight: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --ui-menu-row-highlight: color-mix(in srgb, var(--openbot-text-primary) 6%, var(--ui-menu-bg));
  }
  --ui-menu-panel-shadow: inset 0 1px 0 var(--ui-menu-highlight), 0 0 0 1px var(--ui-menu-edge), 0 4px 6px -1px var(--ui-menu-shadow),
    0 2px 4px -2px var(--ui-menu-shadow);
  --ui-menu-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ui-menu-duration: 150ms;
  --ui-submenu-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ui-submenu-duration: var(--openbot-duration-slow);
}
.ui-popover-menu-surface {
  border: 0;
  border-radius: var(--openbot-radius-md);
  outline: 0;
  background: var(--openbot-bg-control);
  box-shadow: 0 0 0 1px var(--openbot-border), 0 4px 6px -1px var(--openbot-shadow-popover-ambient), 0 2px 4px -2px var(--openbot-shadow-popover-ambient);
  color: var(--openbot-text-primary);
}
.ui-action-menu {
  position: relative;
  z-index: var(--openbot-layer-popover);
  width: max-content;
  min-width: 192px;
  max-width: min(288px, calc(100vw - var(--openbot-space-4)));
  overflow: hidden;
  border: 0;
  border-radius: var(--ui-menu-radius);
  outline: 0;
  background: var(--ui-menu-bg);
  box-shadow: var(--ui-menu-panel-shadow);
  padding: var(--ui-menu-padding);
  color: var(--openbot-text-primary);
  transform-origin: var(--kb-menu-content-transform-origin, var(--kb-popover-content-transform-origin));
  animation: ui-menu-in var(--ui-menu-duration) var(--ui-menu-ease) both;
}
.ui-action-menu:not([data-expanded]) {
  animation: ui-menu-out var(--ui-menu-duration) var(--ui-menu-ease) both;
}
.ui-action-menu[aria-labelledby*="sub-trigger"] {
  animation-duration: var(--ui-submenu-duration);
  animation-timing-function: var(--ui-submenu-ease);
}
.ui-action-menu:not([data-menu-layout="grid"]) :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]) {
  display: flex;
  width: 100%;
  height: var(--openbot-control-md);
  min-height: var(--openbot-control-md);
  align-items: center;
  justify-content: flex-start;
  gap: var(--openbot-space-2);
  border: 0;
  border-radius: var(--ui-menu-item-radius);
  outline: 0;
  background: transparent;
  padding: var(--openbot-space-1-5) var(--ui-menu-inset);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-lg);
  text-align: left;
  white-space: nowrap;
  transition: background-color var(--openbot-duration-hover) var(--openbot-ease-out), color var(--openbot-duration-hover) var(--openbot-ease-out);
}
.ui-action-menu:not([data-menu-layout="grid"]) :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]) > span:not(:has(svg), .ui-menu-trailing) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui-action-menu:not([data-menu-layout="grid"]) :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]):is( :hover, :focus-visible, [data-highlighted], [aria-expanded="true"] ) {
  background: var(--ui-menu-item-hover);
  color: var(--openbot-text-primary);
}
.ui-action-menu:not([data-menu-layout="grid"]) :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"])[data-disabled] {
  color: var(--openbot-text-muted);
  cursor: default;
  opacity: 0.45;
}
.ui-action-menu:not([data-menu-layout="grid"]) :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]) > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  color: var(--openbot-text-secondary);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ui-action-menu:not([data-menu-layout="grid"]) :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]) > svg:not(.ui-glyph-20, .ui-glyph-16) {
  stroke-width: var(--openbot-icon-stroke);
}
.ui-action-menu > hr, .ui-action-menu [role="separator"] {
  height: 1px;
  margin: var(--ui-menu-padding) calc(var(--ui-menu-padding) * -1);
  border: 0;
  background: var(--openbot-border);
}
.ui-action-menu:not([data-menu-layout="grid"]) :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]).ui-action-menu-danger, .ui-action-menu:not([data-menu-layout="grid"]) :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]).ui-action-menu-danger > svg {
  color: var(--openbot-danger);
}
.ui-action-menu:not([data-menu-layout="grid"]) :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]).ui-action-menu-danger:is( :hover, :focus-visible, [data-highlighted] ) {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
}
.ui-menu-label {
  padding: var(--openbot-space-1-5) var(--ui-menu-inset);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.ui-menu-check {
  display: grid;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--openbot-text-primary) 22%, transparent);
  }
  border-radius: var(--openbot-radius-pill);
  transition: background-color var(--ui-menu-duration) ease-out, border-color var(--ui-menu-duration) ease-out;
}
.ui-menu-check[data-checked] {
  border-color: transparent;
  background: var(--openbot-text-primary);
}
.ui-action-menu:not([data-menu-layout="grid"]) :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]) > .ui-menu-check > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke: var(--ui-menu-bg);
  stroke-width: 2.5;
}
.ui-menu-trailing {
  margin-left: auto;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.ui-action-menu:not([data-menu-layout="grid"]) :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]) > svg.ui-menu-trailing {
  color: var(--openbot-text-muted);
}
.ui-action-menu .agent-context-icon {
  color: var(--openbot-text-muted);
}
.ui-action-menu .agent-context-icon > * {
  fill: currentColor;
  fill-opacity: 0;
}
.ui-action-menu [class~="lucide-chart-area"] > path:first-child, .ui-action-menu [class~="lucide-bell-off"] > path:nth-child(3), .ui-action-menu [class~="lucide-app-window"] > path, .ui-action-menu [class~="lucide-bot"] > *, .ui-action-menu [class~="lucide-calendar-clock"] > * {
  fill: none;
}
.ui-action-menu :is(:hover, [data-highlighted], [aria-expanded="true"]) > .agent-context-icon {
  color: var(--openbot-text-primary);
}
.ui-action-menu :is(:hover, [data-highlighted], [aria-expanded="true"]) > .agent-context-icon > * {
  fill-opacity: 1;
}
.ui-action-menu :is(:hover, [data-highlighted], [aria-expanded="true"]) > [class~="lucide-app-window"] > path, .ui-action-menu :is(:hover, [data-highlighted], [aria-expanded="true"]) > .ui-glyph-20:has(> rect + rect + circle) > circle {
  fill: var(--ui-menu-row-highlight);
  stroke: var(--ui-menu-row-highlight);
}
.ui-motion-tooltip-trigger {
  display: flex;
}
.ui-motion-tooltip {
  z-index: var(--openbot-layer-tooltip);
  transform-origin: var(--kb-tooltip-content-transform-origin);
  animation: ui-menu-in var(--ui-submenu-duration) var(--ui-submenu-ease) both;
}
.ui-motion-tooltip:not([data-expanded]) {
  animation: ui-menu-out var(--ui-submenu-duration) var(--ui-submenu-ease) both;
}
.ui-motion-tooltip:is([data-menu-hold], [data-menu-moving], [data-menu-swap-out]) {
  overflow: hidden;
}
.ui-motion-tooltip-label {
  overflow: hidden;
  max-width: min(240px, calc(100vw - var(--openbot-space-4)));
  border-radius: var(--openbot-radius-md);
  background: var(--ui-menu-bg);
  box-shadow: var(--ui-menu-panel-shadow);
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
  overflow-wrap: anywhere;
  pointer-events: none;
}
.ui-motion-tooltip-label > span {
  display: block;
}
.ui-action-menu:is([data-menu-hold], [data-menu-swap-in], [data-menu-swap-out]), .ui-motion-tooltip:is([data-menu-hold], [data-menu-swap-in], [data-menu-swap-out]) {
  animation: none;
}
.ui-action-menu[data-menu-handoff], .ui-motion-tooltip[data-menu-handoff] {
  animation: none;
  opacity: 0;
}
.ui-action-menu[data-menu-swap-out], .ui-motion-tooltip[data-menu-swap-out] {
  background: transparent;
  box-shadow: none;
}
@keyframes ui-menu-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
}
@keyframes ui-menu-out {
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ui-action-menu, .ui-action-menu:not([data-expanded]), .ui-motion-tooltip, .ui-motion-tooltip:not([data-expanded]) {
    animation: none;
  }
  .ui-menu-check {
    transition: none;
  }
}
.dynamic-island {
  --dynamic-island-notch-width: 192px;
  --dynamic-island-notch-height: 32px;
  --dynamic-island-compact-width: 268px;
  --dynamic-island-expanded-width: 420px;
  --dynamic-island-hover-width-growth: 32px;
  --dynamic-island-hover-height-growth: 8px;
  --dynamic-island-hover-hit-top: 6px;
  --dynamic-island-hover-hit-bottom: 6px;
  --dynamic-island-hover-retention-bottom: 6px;
  --dynamic-island-hover-retention-inline-growth: 24px;
  --dynamic-island-shoulder-size: 6px;
  --dynamic-island-expanded-shoulder-size: 19px;
  --dynamic-island-bottom-radius: 14px;
  --dynamic-island-external-compact-radius: 16px;
  --dynamic-island-external-expanded-radius: 24px;
  --dynamic-island-shared-duration: 450ms;
  --dynamic-island-shared-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  display: flex;
  width: min(var(--dynamic-island-expanded-width), calc(100vw - var(--openbot-space-6)));
  height: fit-content;
  align-items: flex-start;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--openbot-text-primary);
  filter: drop-shadow(0 0 0 transparent);
  pointer-events: none;
  transition: filter var(--openbot-duration-normal) var(--openbot-ease-out);
}
.dynamic-island-shell {
  position: relative;
  display: block;
  width: fit-content;
  height: fit-content;
  overflow: clip;
  contain: layout paint;
  isolation: isolate;
  pointer-events: auto;
}
.dynamic-island[data-layout-state="expanded"] {
  --dynamic-island-shared-duration: 420ms;
  --dynamic-island-shoulder-size: 19px;
  --dynamic-island-bottom-radius: 24px;
}
.dynamic-island[data-layout-state="expanded"], .dynamic-island[data-hovered="true"] {
  filter: drop-shadow(0 0 10px var(--openbot-shadow-dynamic-island));
}
.dynamic-island-shell[data-resizing] {
  will-change: width, height;
}
.dynamic-island-size-target {
  position: relative;
  left: 50%;
  width: min(var(--dynamic-island-compact-width), calc(100vw - var(--openbot-space-6)));
  min-height: var(--dynamic-island-notch-height);
  transform: translateX(-50%);
}
.dynamic-island[data-layout-state="compact"][data-hovered="true"] .dynamic-island-size-target {
  width: min( calc(var(--dynamic-island-compact-width) + var(--dynamic-island-hover-width-growth)), calc(100vw - var(--openbot-space-6)) );
  min-height: calc(var(--dynamic-island-notch-height) + var(--dynamic-island-hover-height-growth));
}
.dynamic-island[data-layout-state="expanded"] .dynamic-island-size-target {
  width: min(var(--dynamic-island-expanded-width), calc(100vw - var(--openbot-space-6)));
  padding-top: var(--dynamic-island-notch-height);
}
.dynamic-island-silhouette {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
}
.dynamic-island-silhouette-body {
  position: absolute;
  inset: 0 var(--dynamic-island-shoulder-size);
  border-radius: 0 0 var(--dynamic-island-bottom-radius) var(--dynamic-island-bottom-radius);
  background: var(--openbot-bg-notch);
  box-shadow: inset 0 -1px 0 var(--openbot-shadow-ring);
  transition: box-shadow var(--openbot-duration-normal) var(--openbot-ease-out);
}
.dynamic-island-shoulder {
  position: absolute;
  top: 0;
  width: var(--dynamic-island-shoulder-size);
  height: var(--dynamic-island-shoulder-size);
  overflow: visible;
}
.dynamic-island-shoulder path {
  fill: var(--openbot-bg-notch);
}
.dynamic-island-shoulder-leading {
  left: 0;
}
.dynamic-island-shoulder-trailing {
  right: 0;
}
.dynamic-island-toggle {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  width: min(var(--dynamic-island-compact-width), calc(100vw - var(--openbot-space-6)));
  height: var(--dynamic-island-notch-height);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  border: 0;
  border-radius: inherit;
  background: transparent;
  padding: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  outline: none;
  transform: translateX(-50%);
}
.dynamic-island[data-pointer-toggle="false"] .dynamic-island-toggle {
  cursor: default;
}
.dynamic-island .dynamic-island-toggle:focus-visible {
  outline: none;
}
.dynamic-island-notch-safe-zone {
  width: var(--dynamic-island-notch-width);
  height: var(--dynamic-island-notch-height);
  pointer-events: none;
}
.dynamic-island-ear {
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  color: var(--openbot-text-secondary);
  transition: color var(--openbot-duration-normal) var(--openbot-ease-out);
}
.dynamic-island-ear-leading {
  justify-content: flex-end;
  padding-right: var(--openbot-space-2);
}
.dynamic-island-ear-trailing {
  justify-content: flex-start;
  padding-left: var(--openbot-space-2);
}
.dynamic-island:not(.dynamic-island-external):not(.dynamic-island-status) .dynamic-island-ear-leading {
  padding-right: 6px;
}
.dynamic-island-ear-content {
  position: relative;
  z-index: 3;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: center;
  transition: color var(--openbot-duration-normal) var(--openbot-ease-out), filter var(--openbot-duration-slow) var(--openbot-ease-out), opacity var(--openbot-duration-island-content) cubic-bezier(0.22, 1.08, 0.36, 1), transform var(--openbot-duration-island-content) cubic-bezier(0.22, 1.08, 0.36, 1);
}
.dynamic-island-shell[data-compact-resize] .dynamic-island-ear-content {
  filter: blur(calc(0.4px * var(--dynamic-island-compact-motion, 1)));
}
.dynamic-island-hover-content {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: center;
}
.dynamic-island-status .dynamic-island-hover-leading {
  width: 100%;
}
.dynamic-island-toggle:hover .dynamic-island-ear, .dynamic-island-toggle:focus-visible .dynamic-island-ear {
  color: var(--openbot-text-primary);
}
.dynamic-island-trailing-content {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  justify-content: center;
}
.dynamic-island-trailing-compact {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--openbot-duration-island-content) cubic-bezier(0.22, 1.08, 0.36, 1), transform var(--openbot-duration-island-content) cubic-bezier(0.22, 1.08, 0.36, 1);
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1);
}
.dynamic-island-status .dynamic-island-trailing-compact {
  right: auto;
  left: 0;
  justify-content: flex-start;
  transform-origin: left center;
}
.dynamic-island-external.dynamic-island-status .dynamic-island-trailing-compact {
  right: 0;
  left: auto;
  justify-content: flex-end;
  transform-origin: right center;
}
.dynamic-island[data-layout-state="expanded"] .dynamic-island-trailing-compact {
  pointer-events: none;
  opacity: 0;
  filter: none;
  transform: scale(0.92);
  transition-duration: var(--openbot-duration-island-content-exit);
  transition-timing-function: var(--dynamic-island-shared-ease);
}
.dynamic-island-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: var(--openbot-space-2) var(--openbot-space-4) var(--openbot-space-4);
}
.dynamic-island-panel[data-phase="leaving"] {
  position: absolute;
  top: var(--dynamic-island-notch-height);
  left: 50%;
  transform: translateX(-50%);
}
.dynamic-island-panel[data-phase="exiting"], .dynamic-island-panel[data-phase="leaving"] {
  pointer-events: none;
}
.dynamic-island-panel[data-phase="leaving"] {
  width: min(var(--dynamic-island-expanded-width), calc(100vw - var(--openbot-space-6)));
}
.dynamic-island-content {
  opacity: 1;
  filter: none;
  transform: scale(1);
  transform-origin: top center;
}
.dynamic-island[data-shared-leading="true"] .dynamic-island-ear-leading .dynamic-island-ear-content {
  opacity: 1;
  filter: none;
  transition: color var(--openbot-duration-normal) var(--openbot-ease-out), opacity var(--openbot-duration-island-content-exit) var(--dynamic-island-shared-ease);
}
.dynamic-island:not([data-shared-leading="true"])[data-layout-state="expanded"] .dynamic-island-ear-leading .dynamic-island-ear-content {
  opacity: 0;
  filter: none;
  transform: scale(0.92);
  transition-duration: var(--openbot-duration-normal), var(--openbot-duration-island-content-exit), var(--openbot-duration-island-content-exit);
  transition-timing-function: var(--openbot-ease-out), var(--dynamic-island-shared-ease), var(--dynamic-island-shared-ease);
}
.dynamic-island[data-layout-state="expanded"] .dynamic-island-ear-trailing .dynamic-island-ear-content {
  opacity: 1;
  filter: none;
  transform: none;
}
.dynamic-island-status .dynamic-island-trailing-compact {
  transform: scale(1);
  transition: opacity var(--openbot-duration-island-content) var(--dynamic-island-shared-ease);
}
.dynamic-island-status[data-layout-state="expanded"] .dynamic-island-trailing-compact {
  opacity: 0;
  transform: scale(1);
}
.dynamic-island-status .dynamic-island-trailing-content {
  transform-origin: left center;
}
.dynamic-island-status .dynamic-island-trailing-compact, .dynamic-island-status .dynamic-island-hover-trailing, .dynamic-island-status .dynamic-island-mode-swap[data-island-mode-slot="compact-trailing"] {
  width: max-content;
}
.dynamic-island-external.dynamic-island-status .dynamic-island-trailing-content {
  transform-origin: right center;
}
.dynamic-island-panel-wide {
  --dynamic-island-expanded-width: 590px;
}
.dynamic-island-idle .dynamic-island-ear-trailing {
  color: var(--openbot-text-primary);
  transition: none;
}
.dynamic-island.dynamic-island-idle:not(.dynamic-island-external) .dynamic-island-ear-leading {
  justify-content: flex-start;
  padding-right: 0;
  padding-left: var(--openbot-space-4);
}
.dynamic-island.dynamic-island-idle:not(.dynamic-island-external) .dynamic-island-ear-trailing {
  justify-content: flex-end;
  padding-right: var(--openbot-space-4);
  padding-left: 0;
}
.dynamic-island-hover-zone {
  position: absolute;
  top: calc(-1 * var(--dynamic-island-hover-hit-top));
  left: 50%;
  display: none;
  width: min(var(--dynamic-island-compact-width), calc(100vw - var(--openbot-space-6)));
  height: calc( var(--dynamic-island-notch-height) + var(--dynamic-island-hover-hit-top) + var(--dynamic-island-hover-hit-bottom) );
  pointer-events: auto;
  transform: translateX(-50%);
}
.dynamic-island[data-layout-state="compact"] > .dynamic-island-hover-zone {
  display: block;
}
.dynamic-island[data-layout-state="compact"][data-hovered="true"] > .dynamic-island-hover-zone {
  width: min( calc( var(--dynamic-island-compact-width) + var(--dynamic-island-hover-width-growth) + var(--dynamic-island-hover-retention-inline-growth) ), calc(100vw - var(--openbot-space-6)) );
  height: calc( var(--dynamic-island-notch-height) + var(--dynamic-island-hover-height-growth) + var(--dynamic-island-hover-hit-top) + var(--dynamic-island-hover-retention-bottom) );
}
.dynamic-island-status:not(.dynamic-island-external) .dynamic-island-ear-leading {
  justify-content: flex-start;
  padding-right: 0;
  padding-left: 12px;
}
.dynamic-island-status:not(.dynamic-island-external) .dynamic-island-ear-trailing {
  justify-content: flex-end;
  padding-right: 12px;
  padding-left: 0;
}
.dynamic-island-status:not(.dynamic-island-external) .dynamic-island-trailing-compact {
  right: 0;
  left: auto;
  justify-content: flex-end;
  transform-origin: right center;
}
.dynamic-island-status:not(.dynamic-island-external) .dynamic-island-trailing-content {
  transform-origin: right center;
}
.openbot-dynamic-island[data-layout-state="expanded"] .dynamic-island-panel, .openbot-dynamic-island .dynamic-island-panel[data-phase="exiting"], .openbot-dynamic-island .dynamic-island-panel[data-phase="leaving"] {
  padding: 14px calc(var(--dynamic-island-expanded-shoulder-size) + 20px) 20px;
}
.dynamic-island-external.openbot-dynamic-island[data-layout-state="expanded"] .dynamic-island-panel, .dynamic-island-external.openbot-dynamic-island .dynamic-island-panel[data-phase="exiting"], .dynamic-island-external.openbot-dynamic-island .dynamic-island-panel[data-phase="leaving"] {
  padding: 14px 20px 20px;
}
.openbot-dynamic-island.dynamic-island-working[data-layout-state="expanded"] .dynamic-island-panel, .openbot-dynamic-island.dynamic-island-working .dynamic-island-panel[data-phase="exiting"], .openbot-dynamic-island.dynamic-island-working .dynamic-island-panel[data-phase="leaving"] {
  padding-bottom: 14px;
}
.dynamic-island-external {
  --dynamic-island-notch-width: 16px;
  --dynamic-island-compact-width: 212px;
  --dynamic-island-external-inline-inset: 6px;
  padding-top: var(--dynamic-island-hover-hit-top);
}
.dynamic-island-external .dynamic-island-shoulder {
  display: none;
}
.dynamic-island-external .dynamic-island-silhouette {
  border-radius: var(--dynamic-island-external-compact-radius);
  background: var(--openbot-bg-notch);
  box-shadow: inset 0 -1px 0 var(--openbot-shadow-ring);
}
.dynamic-island-external .dynamic-island-silhouette-body {
  display: none;
}
.dynamic-island-external[data-layout-state="expanded"] .dynamic-island-silhouette {
  border-radius: var(--dynamic-island-external-expanded-radius);
}
.dynamic-island-shell:has(.dynamic-island-toggle:focus-visible) .dynamic-island-silhouette-body, .dynamic-island-external .dynamic-island-shell:has(.dynamic-island-toggle:focus-visible) .dynamic-island-silhouette {
  box-shadow: inset var(--openbot-focus-ring), inset 0 -1px 0 var(--openbot-shadow-ring);
}
.dynamic-island-external > .dynamic-island-hover-zone {
  top: 0;
}
.dynamic-island-external .dynamic-island-toggle {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-inline: var(--dynamic-island-external-inline-inset);
}
.dynamic-island-external .dynamic-island-notch-safe-zone {
  display: none;
}
.dynamic-island-external .dynamic-island-ear-leading {
  position: relative;
  left: 0;
  justify-content: flex-start;
  padding-right: 0;
}
.dynamic-island-external .dynamic-island-ear-trailing {
  justify-content: flex-end;
  padding-left: 0;
}
.dynamic-island-external.dynamic-island-panel-wide {
  --dynamic-island-expanded-width: 552px;
}
.dynamic-island-external.dynamic-island-status .dynamic-island-ear-leading {
  left: 0;
  justify-content: flex-start;
  padding-right: 0;
  padding-left: 0;
}
html:has(.dynamic-island-surface), body:has(.dynamic-island-surface), #root:has(.dynamic-island-surface) {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
}
.dynamic-island-surface {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  background: transparent;
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
  user-select: none;
}
.openbot-dynamic-island-transition-root {
  display: contents;
}
.dynamic-island-mode-swap {
  position: relative;
  min-width: 0;
  display: inline-grid;
  align-items: center;
}
.dynamic-island-mode-swap-block {
  width: 100%;
  display: grid;
  align-items: stretch;
}
.dynamic-island-mode-layer {
  min-width: 0;
  display: inline-flex;
  grid-area: 1 / 1;
  align-items: center;
  transform-origin: center;
}
.dynamic-island-mode-swap-block > .dynamic-island-mode-layer {
  width: 100%;
  display: block;
}
.dynamic-island-mode-layer-outgoing {
  position: absolute;
  z-index: 1;
  top: 0;
  pointer-events: none;
}
.dynamic-island-mode-swap[data-island-mode-slot="compact-leading"] > .dynamic-island-mode-layer-outgoing {
  right: 0;
}
.dynamic-island-external .dynamic-island-mode-swap[data-island-mode-slot="compact-leading"] > .dynamic-island-mode-layer-outgoing {
  right: auto;
  left: 0;
}
.dynamic-island-mode-swap[data-island-mode-slot="compact-trailing"] > .dynamic-island-mode-layer-outgoing {
  left: 0;
}
.dynamic-island-external .dynamic-island-mode-swap[data-island-mode-slot="compact-trailing"] > .dynamic-island-mode-layer-outgoing {
  right: 0;
  left: auto;
}
.dynamic-island-mode-swap-block > .dynamic-island-mode-layer-outgoing {
  inset: 0;
}
.openbot-dynamic-island-transition-root[data-mode-transitioning="true"] .dynamic-island-mode-layer {
  will-change: opacity, transform;
}
.openbot-dynamic-island-transition-root[data-mode-transitioning="true"] .dynamic-island-mode-layer[data-island-mode-layer="incoming"] {
  opacity: 0;
  transform: none;
}
.openbot-dynamic-island-transition-root[data-mode-transitioning="true"] .dynamic-island-mode-swap[data-island-mode-slot="expanded"] > .dynamic-island-mode-layer[data-island-mode-layer="incoming"] {
  transform: scale(0.965);
}
.openbot-dynamic-island-transition-root[data-mode-transitioning="true"] .dynamic-island[data-layout-state="expanded"] .dynamic-island-mode-swap[data-island-mode-slot="compact-leading"] > .dynamic-island-mode-layer[data-island-mode-layer="incoming"] {
  transform: none;
}
.openbot-dynamic-island-transition-root[data-mode-transitioning="true"] .dynamic-island-mode-layer[data-island-mode-layer="incoming"] [data-island-motion-content] {
  filter: blur(4px);
}
.dynamic-island-surface-anchor {
  width: fit-content;
  height: fit-content;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
}
.dynamic-island-surface-logo {
  width: 100%;
  height: 100%;
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-xs);
  transition: border-radius var(--openbot-duration-slow) var(--openbot-ease-out), filter var(--openbot-duration-slow) var(--openbot-ease-out), scale var(--openbot-duration-slow) var(--openbot-ease-out);
}
.dynamic-island-shell[data-compact-resize] .dynamic-island-surface-logo {
  --app-logo-eye-squint: calc(1 - 0.45 * var(--dynamic-island-compact-motion, 1));
  filter: blur(calc(0.8px * var(--dynamic-island-compact-motion, 1)));
  scale: calc(1 - 0.03 * var(--dynamic-island-compact-motion, 1));
}
.dynamic-island-shell[data-compact-motion="large"] .dynamic-island-surface-logo {
  border-radius: var(--openbot-radius-sm);
}
.dynamic-island-external.dynamic-island-idle .dynamic-island-surface-logo {
  transform: translateX(4px);
}
.dynamic-island-surface-leading-anchor {
  position: relative;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
}
.dynamic-island-idle .dynamic-island-trailing-content {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.dynamic-island-surface-idle-greeting {
  position: relative;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  display: block;
  flex: 0 0 auto;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  font-size: var(--openbot-text-xl);
  line-height: 1;
  transition: opacity var(--openbot-duration-slow) var(--openbot-ease-out), scale var(--openbot-duration-slow) var(--openbot-ease-out);
}
.dynamic-island-shell[data-compact-resize] .dynamic-island-surface-idle-greeting {
  opacity: calc(1 - 0.1 * var(--dynamic-island-compact-motion, 1));
}
.dynamic-island-shell[data-compact-settled] .dynamic-island-surface-idle-greeting {
  animation: dynamic-island-greeting-pop 600ms var(--dynamic-island-greeting-pop-ease);
}
.dynamic-island-shell {
  --dynamic-island-greeting-pop-ease: linear(
    0,
    0.571 4.2%,
    1.01 8.3%,
    1.306 12.5%,
    1.467 16.7%,
    1.517 20.8%,
    1.485 25.0%,
    1.403 29.2%,
    1.297 33.3%,
    1.188 37.5%,
    1.09 41.7%,
    1.013 45.8%,
    0.96 50.0%,
    0.928 54.2%,
    0.916 58.3%,
    0.919 62.5%,
    0.931 66.7%,
    0.947 70.8%,
    0.965 75.0%,
    0.982 79.2%,
    0.995 83.3%,
    1.005 87.5%,
    1.011 91.7%,
    1.013 95.8%,
    1
  );
}
@keyframes dynamic-island-greeting-pop {
  from {
    opacity: 0.9;
    scale: 0.98;
    rotate: -1deg;
  }
  to {
    opacity: 1;
    scale: 1;
    rotate: 0deg;
  }
}
.dynamic-island-surface-idle-greeting-layer {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 600ms var(--openbot-ease-in-out), scale 650ms var(--openbot-ease-in-out), filter 600ms var(--openbot-ease-in-out);
}
@media (prefers-reduced-motion: no-preference) {
  .dynamic-island-surface-idle-greeting-layer:not([data-active]) {
    scale: 0.88;
    filter: blur(2px);
  }
}
.dynamic-island-external.dynamic-island-idle .dynamic-island-surface-idle-greeting-layer {
  transform: translateX(-6px);
}
.dynamic-island-surface-idle-greeting[data-active-slot="0"] .dynamic-island-surface-idle-greeting-layer:first-child, .dynamic-island-surface-idle-greeting[data-active-slot="1"] .dynamic-island-surface-idle-greeting-layer:last-child {
  opacity: 1;
}
.dynamic-island-surface-idle-greeting-layer {
  perspective: 60px;
}
.dynamic-island-surface-idle-greeting-card {
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
}
.dynamic-island-surface-idle-greeting-face {
  grid-area: 1 / 1;
  backface-visibility: hidden;
}
.dynamic-island-surface-idle-greeting-face-back {
  transform: rotateY(180deg);
}
.dynamic-island-surface-idle-greeting-face:has(.dynamic-island-surface-idle-greeting-sparkle) {
  display: grid;
}
.dynamic-island-surface-idle-greeting-sparkle {
  grid-area: 1 / 1;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}
.dynamic-island-surface-idle-greeting-sparkle-large {
  transform-origin: 60% 48%;
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cpath%20d='M60%207.9Q70.3%2036.0%2094.2%2048Q70.3%2060.0%2060%2088.1Q49.7%2060.0%2025.8%2048Q49.7%2036.0%2060%207.9Z'/%3E%3C/svg%3E");
}
.dynamic-island-surface-idle-greeting-sparkle-upper {
  transform-origin: 24% 28%;
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cpath%20d='M24%207.4Q28.2%2021.8%2038.2%2028Q28.2%2034.2%2024%2048.6Q19.8%2034.2%209.8%2028Q19.8%2021.8%2024%207.4Z'/%3E%3C/svg%3E");
}
.dynamic-island-surface-idle-greeting-sparkle-lower {
  transform-origin: 36% 70%;
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cpath%20d='M36%2051.1Q40.8%2064.3%2051.9%2070Q40.8%2075.7%2036%2088.9Q31.2%2075.7%2020.1%2070Q31.2%2064.3%2036%2051.1Z'/%3E%3C/svg%3E");
}
.dynamic-island-surface-avatar-stack {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.dynamic-island-surface-avatar-stack-item {
  display: inline-flex;
  flex: 0 0 auto;
}
.dynamic-island-surface-avatar-stack > :not(:first-child) {
  margin-left: -6px;
}
.dynamic-island-surface-avatar-stack > * {
  transform: translate3d(0, 0, 0);
  transform-origin: center;
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out), transform 450ms var(--dynamic-island-shared-ease);
}
.dynamic-island-surface-avatar {
  --agent-avatar-optical-offset: -3px;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border: 1px solid var(--openbot-bg-notch);
  border-radius: var(--openbot-radius-pill);
}
.dynamic-island-surface-compact-identity {
  white-space: nowrap;
}
.dynamic-island-surface-compact-name {
  position: absolute;
  top: 50%;
  left: calc(100% + var(--openbot-space-1-5));
  width: max-content;
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-sm);
  text-align: left;
  text-overflow: ellipsis;
  transform: translateY(-50%);
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}
.dynamic-island-surface-status-badge {
  font-weight: var(--openbot-weight-semibold);
}
.dynamic-island-surface-status-badge-label {
  min-width: 0;
  display: inline-block;
  overflow: hidden;
}
.dynamic-island-surface-status-badge-icon {
  stroke-width: var(--openbot-icon-stroke);
}
.dynamic-island-surface-question-badge {
  background: var(--openbot-question-badge-soft);
  color: var(--openbot-question-badge-text);
}
.dynamic-island-surface-message-badge {
  background: var(--openbot-message-badge-soft);
  color: var(--openbot-message-badge-text);
}
.dynamic-island-surface-working-badge .ui-spinner {
  border-color: var(--openbot-success-soft);
  border-top-color: currentColor;
}
.dynamic-island[data-layout-state="expanded"] .dynamic-island-surface-compact-name {
  opacity: 0;
}
.dynamic-island-surface-leading-anchor .dynamic-island-surface-avatar {
  width: 100%;
  height: 100%;
}
.dynamic-island-surface-avatar-stack .dynamic-island-surface-avatar {
  width: 20px;
  height: 20px;
}
.dynamic-island-working[data-state="expanded"] .dynamic-island-surface-avatar-stack > * {
  transition-duration: var(--openbot-duration-fast), var(--dynamic-island-shared-duration);
}
.dynamic-island-working[data-state="expanded"] .dynamic-island-surface-avatar-stack > :nth-child(2) {
  transform: translate3d(-14px, 28.75px, 0);
}
.dynamic-island-working[data-state="expanded"] .dynamic-island-surface-avatar-stack > :nth-child(3) {
  transform: translate3d(-28px, 57.5px, 0);
}
@media (prefers-reduced-motion: reduce) {
  .dynamic-island-surface-avatar-stack > * {
    transition-duration: var(--openbot-duration-hover);
  }
}
.dynamic-island-surface-approval-badge {
  background: var(--openbot-approval-badge-soft);
  color: var(--openbot-warning);
}
.dynamic-island-surface-takeover-badge {
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
}
.dynamic-island-surface-content-swap {
  min-width: 0;
  display: flex;
}
.dynamic-island-surface-content-swap[data-swap-phase="update"] {
  animation: dynamic-island-surface-swap var(--text-swap-dur) var(--text-swap-ease) both;
}
.dynamic-island-surface-compact-swap {
  align-items: center;
}
.dynamic-island-surface-panel {
  display: grid;
  gap: 10px;
}
.dynamic-island-surface-list {
  display: grid;
  gap: 2px;
}
.dynamic-island-surface-row {
  min-width: 0;
  width: calc(100% + 2 * var(--openbot-space-2));
  height: auto;
  min-height: 44px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: var(--openbot-space-2);
  margin-inline: calc(-1 * var(--openbot-space-2));
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  color: inherit;
  cursor: pointer;
  font: inherit;
  outline: none;
  text-align: left;
  transition: background-color var(--openbot-duration-normal) var(--openbot-ease-out), transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.dynamic-island-surface-row .dynamic-island-surface-avatar, .dynamic-island-surface-working-avatar-slot {
  width: 32px;
  height: 32px;
}
@media (hover: hover) and (pointer: fine) {
  .dynamic-island-surface-row:hover {
    background: var(--openbot-hover);
  }
}
.dynamic-island-surface-row:active {
  transform: scale(0.98);
}
.dynamic-island-surface-row:focus-visible {
  background: var(--openbot-hover);
  box-shadow: inset 0 0 0 1px var(--openbot-border-focus), 0 0 0 3px var(--openbot-accent-soft);
}
.dynamic-island-surface-row-group {
  position: relative;
  min-width: 0;
}
.dynamic-island-surface-row-group:has(.dynamic-island-surface-row-stop) .dynamic-island-surface-row {
  padding-right: calc(var(--openbot-control-sm) + var(--openbot-space-2));
}
.dynamic-island-surface-row-stop {
  position: absolute;
  top: 50%;
  right: 0;
  color: var(--openbot-text-muted);
  transform: translateY(-50%);
}
@media (hover: hover) and (pointer: fine) {
  .dynamic-island-surface-row-stop:hover {
    color: var(--openbot-danger-text);
  }
}
.dynamic-island-surface-row-copy {
  min-width: 0;
  width: 100%;
  display: grid;
  gap: 1px;
}
.dynamic-island-surface-row strong {
  overflow: hidden;
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dynamic-island-surface-row small {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dynamic-island-message-first-panel {
  display: grid;
  gap: var(--openbot-space-3);
}
.dynamic-island-message-first-unread {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
  font-variant-numeric: tabular-nums;
  line-height: var(--openbot-leading-sm);
}
.dynamic-island-message-first-footer {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  border-top: 1px solid var(--openbot-border);
  padding-top: var(--openbot-space-2);
}
.dynamic-island-message-first-footer .ui-button {
  min-width: 92px;
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.dynamic-island-message-first-footer .ui-button:active {
  transform: scale(0.96);
}
.dynamic-island-message-first-footer svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.dynamic-island-surface-attention-panel {
  gap: var(--openbot-space-3);
}
.dynamic-island-reply {
  position: relative;
  min-width: 0;
  display: grid;
  gap: var(--openbot-space-1-5);
  margin: 0;
}
.dynamic-island-reply .dynamic-island-reply-input {
  height: var(--openbot-control-md);
  border-color: var(--openbot-border);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-hover);
  padding-right: calc(var(--openbot-control-md) + var(--openbot-space-1));
  padding-left: var(--openbot-space-3);
  font-size: var(--openbot-text-sm);
  user-select: text;
}
.dynamic-island-reply .dynamic-island-reply-input:focus-visible {
  border-color: var(--openbot-border-focus);
}
.dynamic-island-reply-send {
  position: absolute;
  top: calc((var(--openbot-control-md) - var(--openbot-control-xs)) / 2);
  right: calc((var(--openbot-control-md) - var(--openbot-control-xs)) / 2);
  border-radius: var(--openbot-radius-pill);
}
.dynamic-island-reply-send svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.dynamic-island-surface-question-step .dynamic-island-reply {
  margin-top: 6px;
}
.dynamic-island-surface-request-copy {
  min-width: 0;
  width: 100%;
  display: grid;
  gap: var(--openbot-space-2);
}
.dynamic-island-surface-command {
  min-width: 0;
  display: grid;
  gap: 3px;
  border-left: 1px solid var(--openbot-warning);
  padding: 2px 0 2px 10px;
}
.dynamic-island-surface-command-meta {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.dynamic-island-surface-command-meta small, .dynamic-island-surface-command-meta span {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dynamic-island-surface-command-meta small {
  flex: 0 0 auto;
}
.dynamic-island-surface-command-meta span {
  min-width: 0;
  text-align: right;
}
.dynamic-island-surface-command code {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dynamic-island-surface-context-line {
  min-width: 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--openbot-space-2);
  align-items: baseline;
}
.dynamic-island-surface-context-line small, .dynamic-island-surface-more {
  color: var(--openbot-text-dim);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
div.dynamic-island-surface-context-line span {
  overflow: hidden;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dynamic-island-surface-question-options {
  min-width: 0;
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dynamic-island-surface-question-options > li {
  min-width: 0;
}
.dynamic-island-surface-question-options button {
  width: 100%;
  min-height: 48px;
  min-width: 0;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: var(--openbot-space-2);
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-question-option-soft);
  padding: 7px 10px;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  outline: none;
  transition: background-color var(--openbot-duration-fast) var(--openbot-ease-out), transform var(--openbot-duration-fast) var(--openbot-ease-out);
}
.dynamic-island-surface-question-option-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.dynamic-island-surface-question-option-copy strong, .dynamic-island-surface-question-option-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dynamic-island-surface-question-option-copy strong {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
}
.dynamic-island-surface-question-option-copy small {
  min-width: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.dynamic-island-surface-question-option-index {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-question-option-hover);
  color: var(--openbot-question-option);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
@media (hover: hover) and (pointer: fine) {
  .dynamic-island-surface-question-options button:hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-question-option-hover);
  }
}
.dynamic-island-surface-question-options button:active:not(:disabled):not([data-disabled]) {
  background: var(--openbot-question-option-pressed);
  transform: scale(0.96);
}
.dynamic-island-surface-question-options button:focus-visible {
  box-shadow: inset 0 0 0 1px var(--openbot-question-option), 0 0 0 3px var(--openbot-question-option-soft);
}
.dynamic-island-surface-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-1);
  border-top: 1px solid var(--openbot-border);
  padding-top: var(--openbot-space-2);
}
.dynamic-island-surface-action-error {
  min-width: 0;
  margin: 0 auto 0 0;
  flex: 1 1 auto;
  align-self: center;
  color: var(--openbot-danger-text);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.dynamic-island-surface-actions svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.dynamic-island-surface-attention-panel .ui-button {
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.dynamic-island-surface-attention-panel .ui-button:active {
  transform: scale(0.96);
}
.dynamic-island-surface-question-panel {
  gap: 10px;
}
.dynamic-island-surface-question-progress {
  display: inline-flex;
  align-items: baseline;
  padding-top: 2px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  line-height: var(--openbot-leading-sm);
  white-space: nowrap;
}
.dynamic-island-surface-question-progress-stack {
  position: relative;
  width: 1.5em;
  display: inline-grid;
  overflow: hidden;
  text-align: right;
}
.dynamic-island-surface-question-progress-digit {
  grid-area: 1 / 1;
  display: inline-block;
  text-align: right;
  will-change: transform, opacity, filter;
}
.dynamic-island-surface-question-progress-digit.is-outgoing {
  position: absolute;
  inset: 0;
}
.dynamic-island-surface-question-step {
  width: 100%;
  min-width: 0;
}
.dynamic-island-surface-question-actions {
  align-items: center;
}
.dynamic-island-surface-question-actions .dynamic-island-surface-more {
  margin-right: auto;
}
.dynamic-island-surface-animated-row {
  animation: dynamic-island-surface-row-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}
.dynamic-island-surface-row-group:nth-child(2) .dynamic-island-surface-animated-row {
  animation-delay: 40ms;
}
.dynamic-island-surface-row-group:nth-child(3) .dynamic-island-surface-animated-row {
  animation-delay: 80ms;
}
@keyframes dynamic-island-surface-swap {
  from {
    opacity: 0;
    filter: blur(var(--text-swap-blur));
    transform: translateY(calc(var(--text-swap-translate-y) * -1)) scale(0.98);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}
@keyframes dynamic-island-surface-row-in {
  from {
    opacity: 0;
    filter: blur(var(--text-swap-blur));
    transform: translateY(var(--text-swap-translate-y)) scale(0.98);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}
.sidebar-mobile-app {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: var(--openbot-space-2);
  margin: var(--openbot-space-2) var(--openbot-space-3);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  padding: var(--openbot-space-3);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.sidebar-mobile-app-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-2);
}
.sidebar-mobile-app-header > strong {
  overflow: hidden;
  font-weight: var(--openbot-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-mobile-app-icon {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  color: var(--openbot-text-secondary);
}
.sidebar-mobile-app-dismiss {
  margin-right: calc(var(--openbot-space-1) * -1);
  color: var(--openbot-text-muted);
}
.sidebar-mobile-app-body {
  margin: 0;
  color: var(--openbot-text-muted);
}
.sidebar-mobile-app > .ui-button {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-community-actions {
  display: flex;
  gap: var(--openbot-space-1-5);
}
.sidebar-community-actions > .ui-button:first-child {
  flex: 1 1 auto;
  min-width: 0;
}
.sidebar-community-mark {
  flex: 0 0 auto;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
* {
  box-sizing: border-box;
}
html, body, #root {
  width: 100%;
  height: 100%;
  min-width: 0;
  margin: 0;
  overflow: hidden;
}
body {
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
  -webkit-font-smoothing: antialiased;
}
button, input, textarea {
  font: inherit;
}
.account-login-screen, .initial-setup-screen {
  position: absolute;
  z-index: var(--openbot-layer-dialog);
  inset: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow-y: auto;
  -webkit-app-region: drag;
}
.account-login-screen {
  padding: 32px 24px;
  background: var(--openbot-bg-canvas);
}
.initial-setup-screen {
  padding: 52px 24px 32px;
  background: radial-gradient(circle at 50% 18%, var(--openbot-hover), transparent 34%), var(--openbot-bg-canvas);
}
.account-login-shell {
  width: min(100%, 360px);
  display: flex;
  flex-direction: column;
  -webkit-app-region: no-drag;
}
.account-login-brand-lockup {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 24px;
  margin-bottom: 42px;
}
.account-login-logo {
  display: block;
  width: 80px;
  height: 80px;
}
.account-login-wordmark {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-display);
  font-weight: 620;
  letter-spacing: -0.015em;
  line-height: var(--openbot-leading-display);
}
.account-login {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: center;
}
.account-login h1 {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-3xl);
  font-weight: 580;
  letter-spacing: -0.035em;
  line-height: 30px;
}
.account-login-description {
  margin: 8px 0 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-lg);
  line-height: 21px;
}
.account-login-description strong {
  color: var(--openbot-text-primary);
  font-weight: 560;
}
.account-login-error {
  margin: 0;
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
  line-height: 17px;
  text-align: left;
}
.account-login > .account-login-error {
  margin-top: 18px;
}
.account-login-loader {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 28px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
}
.account-login-spinner, .account-login-button-spinner {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  border: 1.5px solid var(--openbot-border-strong);
  border-top-color: currentColor;
  border-radius: var(--openbot-radius-pill);
  animation: account-login-spin 900ms linear infinite;
}
.account-login-button-spinner {
  width: 13px;
  height: 13px;
}
.account-login-primary {
  width: 100%;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-surface-light);
  color: var(--openbot-text-on-light);
  font-size: var(--openbot-text-md);
  font-weight: 650;
  transition: background-color var(--openbot-duration-hover) ease, border-color var(--openbot-duration-hover) ease, transform var(--openbot-duration-fast) cubic-bezier(0.23, 1, 0.32, 1);
}
.account-login > .account-login-primary {
  margin-top: 30px;
}
@keyframes account-login-spin {
  to {
    transform: rotate(360deg);
  }
}
.account-login-form {
  width: 100%;
  display: grid;
  gap: 12px;
  margin-top: 24px;
}
.account-login-local-data {
  margin: 4px 0 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 17px;
  text-align: center;
  text-wrap: balance;
}
.account-login-local-data svg {
  display: inline-block;
  margin-right: 6px;
  vertical-align: -2px;
}
.account-login-email-field {
  display: grid;
  gap: 12px;
}
.account-login-form input:not(.otp-input-native) {
  width: 100%;
  height: 44px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  outline: 0;
  background: var(--openbot-bg-control);
  padding: 0 12px;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  transition: border-color var(--openbot-duration-hover) ease, background-color var(--openbot-duration-hover) ease, box-shadow var(--openbot-duration-hover) ease;
}
.account-login-form input:not(.otp-input-native):focus {
  border-color: var(--openbot-border-focus);
  background: var(--openbot-bg-surface);
  box-shadow: 0 0 0 3px var(--openbot-accent-soft);
}
.account-login-form input:not(.otp-input-native)[aria-invalid="true"] {
  border-color: var(--openbot-danger);
}
.account-login-form input:not(.otp-input-native)::placeholder {
  color: var(--openbot-text-placeholder);
}
.account-login-field-error {
  height: 16px;
  overflow: hidden;
  margin: -2px 0 0;
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-login-form input:not(.otp-input-native).t-input.is-error {
  border-color: var(--openbot-danger);
}
.account-login-primary:disabled, .account-login-primary[aria-disabled="true"], .account-login-code-action:disabled, .account-login-code-action[aria-disabled="true"] {
  cursor: default;
  opacity: 0.48;
}
.account-login-code-actions {
  width: 100%;
  min-height: var(--openbot-control-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.account-login-code-action {
  width: auto;
}
.account-login-code-action-change {
  justify-content: flex-start;
}
.account-login-code-action-resend {
  justify-content: flex-end;
}
.account-login-development-code {
  margin: 0;
  color: var(--openbot-warning);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--openbot-text-sm);
  line-height: 16px;
  text-align: left;
}
@media (hover: hover) and (pointer: fine) {
  .account-login-primary:hover:not(:disabled, [aria-disabled="true"]) {
    background: var(--openbot-text-primary);
  }
  .account-login-form input:not(.otp-input-native):hover:not(:focus) {
    border-color: var(--openbot-border-strong);
    background: var(--openbot-bg-surface);
  }
}
.account-login-primary:active:not(:disabled, [aria-disabled="true"]) {
  transform: scale(0.98);
}
.initial-setup {
  width: min(100%, 620px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  -webkit-app-region: no-drag;
}
.initial-setup-header {
  max-width: 560px;
}
.initial-setup-account-row {
  min-height: 28px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
}
.initial-setup-account {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.initial-setup-account i {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success);
  box-shadow: 0 0 0 3px var(--openbot-success-soft);
}
.initial-setup-signout, .initial-setup-back {
  border: 0;
  background: transparent;
  color: var(--openbot-text-muted);
}
.initial-setup-signout {
  margin-left: 2px;
  padding: 5px 7px;
  font-size: var(--openbot-text-sm);
}
.initial-setup-signout:hover, .initial-setup-back:hover {
  color: var(--openbot-text-secondary);
}
.initial-setup-back {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  margin-right: 3px;
  border-radius: var(--openbot-radius-pill);
  padding: 0;
}
.initial-setup-back:hover {
  background: var(--openbot-hover);
}
.initial-setup-back svg {
  width: 18px;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}
.initial-setup-eyebrow {
  margin: 0 0 9px;
  color: var(--text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.initial-setup h1 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--openbot-text-display);
  font-weight: 560;
  letter-spacing: -0.035em;
  line-height: 1.1;
}
.initial-setup-intro {
  max-width: 540px;
  margin: 12px 0 0;
  color: var(--text-secondary);
  font-size: var(--openbot-text-lg);
  line-height: 1.55;
}
.setup-route-list {
  display: grid;
  gap: 10px;
  margin-top: 30px;
  padding: 0;
  list-style: none;
}
.setup-route-button {
  width: 100%;
  min-height: 96px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 15px;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-canvas);
  padding: 15px 17px;
  color: var(--openbot-text-primary);
  text-align: left;
  transition: border-color var(--openbot-duration-hover) ease, background-color var(--openbot-duration-hover) ease, transform var(--openbot-duration-hover) ease;
}
.setup-route-button:hover {
  border-color: var(--openbot-text-dim);
  background: var(--openbot-bg-sidebar);
  transform: translateY(-1px);
}
.setup-route-button:active {
  transform: translateY(0);
  transition-duration: var(--openbot-duration-hover), var(--openbot-duration-hover), var(--openbot-duration-fast);
}
.setup-route-icon {
  position: relative;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-hover);
  color: var(--openbot-text-secondary);
}
.setup-route-icon svg {
  width: 23px;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}
.setup-route-icon i {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--openbot-bg-canvas);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
}
.setup-route-icon-local i {
  background: var(--openbot-success);
}
.setup-route-copy {
  display: grid;
  gap: 4px;
}
.setup-route-copy strong {
  font-size: var(--openbot-text-lg);
  font-weight: 600;
}
.setup-route-copy small {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 17px;
}
.setup-route-arrow {
  width: 19px;
  fill: none;
  stroke: var(--openbot-text-muted);
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--openbot-duration-hover) ease;
}
.setup-route-button:hover .setup-route-arrow {
  transform: translateX(2px);
}
.setup-local-content {
  margin-top: 28px;
}
.setup-remote-form {
  display: grid;
  gap: 15px;
  margin-top: 28px;
}
.setup-remote-form label {
  display: grid;
  gap: 7px;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: 560;
}
.setup-remote-form input, .setup-remote-form textarea {
  width: 100%;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  outline: 0;
  background: var(--openbot-bg-canvas);
  padding: 11px 12px;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: 18px;
  resize: none;
}
.setup-remote-form input {
  min-height: 43px;
}
.setup-remote-form input:focus, .setup-remote-form textarea:focus {
  border-color: var(--openbot-text-dim);
  background: var(--openbot-bg-sidebar);
}
.setup-remote-form input::placeholder, .setup-remote-form textarea::placeholder {
  color: var(--openbot-text-dim);
}
.setup-remote-note {
  margin: -2px 1px 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
}
.setup-remote-change {
  width: fit-content;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.setup-remote-change:hover:not(:disabled) {
  color: var(--openbot-text-secondary);
}
.provider-picker {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}
.provider-picker-standalone {
  margin-top: 24px;
}
.setup-local-content .provider-picker-standalone {
  margin-top: 0;
}
.provider-picker-label {
  margin-bottom: 7px;
  padding: 0;
  color: var(--text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: 560;
}
.provider-picker-heading {
  display: flex;
  min-height: 25px;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  margin-bottom: 7px;
}
.provider-picker-heading .provider-picker-label {
  margin-bottom: 0;
}
.ui-button.provider-picker-refresh {
  min-height: 25px;
  gap: var(--openbot-space-1);
  border-radius: var(--openbot-radius-md);
  color: var(--openbot-text-muted);
  padding-inline: var(--openbot-space-2);
}
.ui-button.provider-picker-refresh:hover:not(:disabled, [aria-disabled="true"]) {
  color: var(--openbot-text-primary);
}
.provider-picker-list {
  overflow: hidden;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-sidebar);
}
.provider-picker-option {
  min-height: 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  color: var(--text-primary);
}
.provider-picker-option-selection {
  min-width: 0;
  min-height: 44px;
  display: grid;
  grid-template-columns: 16px 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0 8px 12px;
  cursor: pointer;
}
.provider-picker-option + .provider-picker-option, .provider-picker-option-custom {
  border-top: 1px solid var(--openbot-border);
}
.provider-picker-option:hover:not(.provider-picker-option-unavailable), .provider-picker-option:focus-within {
  background: var(--openbot-hover);
}
.provider-picker-option-selected {
  background: var(--openbot-hover);
}
.provider-picker-option-unavailable {
  color: var(--openbot-text-muted);
}
.provider-picker-option-unavailable .provider-picker-option-selection {
  cursor: default;
}
.provider-picker-option-selectable-unavailable .provider-picker-option-selection {
  cursor: pointer;
}
.provider-picker-option-selectable-unavailable:hover {
  background: var(--openbot-hover);
}
.provider-picker-option input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--openbot-text-primary);
}
.provider-picker-actions {
  display: flex;
  align-items: center;
}
.ui-button.provider-picker-install {
  min-width: 58px;
  min-height: 28px;
  margin-right: 8px;
  border-radius: var(--openbot-radius-md);
  padding-inline: 9px;
}
.ui-button.provider-picker-connect {
  background: var(--openbot-accent);
  color: var(--openbot-text-primary);
}
@media (hover: hover) and (pointer: fine) {
  .ui-button.provider-picker-connect:hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-accent-hover);
  }
}
.provider-picker-logo {
  width: 18px;
  height: 18px;
  overflow: visible;
  fill: var(--openbot-provider-current);
}
.provider-picker-custom-mark {
  width: 18px;
  height: 18px;
  grid-column: 2;
  color: var(--openbot-text-secondary);
  stroke-width: var(--openbot-icon-stroke);
}
.provider-picker-option-unavailable .provider-picker-logo, .provider-picker-option-unavailable .provider-picker-custom-mark {
  opacity: 0.44;
}
.provider-picker-option-runtime {
  color: var(--openbot-text-primary);
}
.provider-picker-option-runtime .provider-picker-logo {
  opacity: 1;
}
.provider-picker-identity {
  display: grid;
  min-width: 0;
}
.provider-picker-name, .provider-picker-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.provider-picker-name {
  font-size: var(--openbot-text-md);
  font-weight: 530;
  line-height: 18px;
}
.provider-picker-email {
  color: var(--text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 15px;
}
.provider-picker-check-error {
  overflow: hidden;
  color: var(--openbot-warning);
  font-size: var(--openbot-text-sm);
  line-height: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.provider-picker-status-message {
  overflow: visible;
  white-space: normal;
}
.provider-picker-check-error.provider-picker-used-by {
  grid-column: 1 / -1;
  overflow: visible;
  margin-top: -6px;
  padding: 0 0 8px 66px;
  white-space: normal;
}
.provider-picker-option-selected .provider-picker-email {
  color: var(--openbot-text-readable);
}
.provider-picker-add-account svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.provider-picker-accounts {
  grid-column: 1 / -1;
  display: grid;
  gap: 4px;
  margin-top: -6px;
  padding: 0 0 8px 66px;
}
.provider-picker-account-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.provider-picker-account {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}
.provider-picker-account + .provider-picker-account {
  border-top: 1px solid var(--openbot-border);
}
.provider-picker-account-copy {
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  gap: 2px;
}
.provider-picker-account .provider-picker-check-error {
  white-space: normal;
}
.provider-picker-account-rename {
  max-width: 220px;
}
.provider-picker-state {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.provider-picker-version {
  overflow: hidden;
  color: var(--text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.provider-picker-option-selected .provider-picker-version {
  color: var(--openbot-text-readable);
}
.provider-picker-status {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
  white-space: nowrap;
}
.provider-picker-custom-count {
  color: var(--text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
  white-space: nowrap;
}
.ui-button.provider-picker-custom-count {
  min-height: 28px;
  margin-right: 8px;
  border-radius: var(--openbot-radius-md);
  padding-inline: 9px;
  color: var(--text-muted);
  font-size: var(--openbot-text-sm);
}
.provider-picker-status-available {
  color: var(--openbot-success);
}
.provider-picker-status-sign-in-required, .provider-picker-status-outdated, .provider-picker-status-update-available {
  color: var(--openbot-warning);
}
.provider-picker-status-ready {
  color: var(--openbot-success);
}
.provider-picker-status-download-error {
  color: var(--openbot-danger);
}
.provider-picker-status-finishing {
  color: var(--openbot-warning);
}
.provider-picker-status-not-installed, .provider-picker-status-checking, .provider-picker-status-error {
  color: var(--openbot-text-muted);
}
.provider-picker-status i {
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-dim);
}
.provider-picker-status-available i {
  background: var(--openbot-success);
}
.provider-picker-status-sign-in-required i, .provider-picker-status-outdated i, .provider-picker-status-update-available i {
  background: var(--openbot-warning);
}
.provider-picker-status-not-installed i, .provider-picker-status-checking i, .provider-picker-status-error i {
  background: var(--openbot-text-dim);
}
.provider-picker-hint {
  margin: 7px 0 0;
  color: var(--text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
}
.provider-picker-footer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  margin-top: 7px;
}
.provider-picker-footer .provider-picker-hint {
  margin: 0;
}
.ui-button.provider-picker-more {
  flex: 0 0 auto;
  gap: var(--openbot-space-1-5);
  margin-inline-start: auto;
  margin-inline-end: calc(var(--openbot-space-2) * -1);
}
.provider-picker-logo-stack {
  position: relative;
  z-index: 0;
  display: inline-flex;
}
.provider-picker-logo-stack-mark {
  position: relative;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control-active);
  box-shadow: 0 0 0 2px var(--openbot-bg-canvas);
}
.provider-picker-logo-stack-mark + .provider-picker-logo-stack-mark {
  z-index: -1;
  margin-inline-start: -4px;
}
.provider-picker-logo-stack-mark .provider-picker-logo {
  width: 12px;
  height: 12px;
}
.custom-provider-backdrop.provider-more-backdrop {
  align-items: start;
  padding-top: min(14vh, 120px);
}
.custom-provider-dialog.provider-more-dialog {
  width: min(400px, 100%);
  max-height: min(600px, calc(100dvh - min(14vh, 120px) - var(--openbot-space-6)));
  padding: var(--openbot-space-2);
}
.provider-more-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-3);
}
.provider-more-title {
  margin: 0;
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
}
.ui-input.provider-more-search {
  flex-shrink: 0;
  margin: var(--openbot-space-1) 0 var(--openbot-space-2);
}
.provider-more-search::-webkit-search-cancel-button {
  appearance: none;
}
.provider-more-list {
  min-height: 0;
  overflow-y: auto;
}
.ui-button.provider-more-row {
  width: 100%;
  height: auto;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  justify-content: stretch;
  align-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  border: 0;
  border-radius: var(--openbot-radius-md);
  color: inherit;
  font: inherit;
  line-height: normal;
  text-align: left;
  white-space: normal;
}
.ui-button.provider-more-row:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: -2px;
}
.provider-more-row .provider-picker-custom-mark {
  grid-column: auto;
}
.provider-more-divider {
  height: 1px;
  margin: var(--openbot-space-1) var(--openbot-space-3);
  border: 0;
  background: var(--openbot-border);
}
.provider-more-empty {
  margin: 0;
  padding: var(--openbot-space-2) var(--openbot-space-3);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.initial-setup-error {
  margin: 12px 2px 0;
  color: var(--openbot-danger);
  font-size: var(--openbot-text-md);
  line-height: 1.45;
}
.initial-setup-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 20px;
}
.initial-setup-save {
  min-height: 40px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  padding: 12px 18px;
  font-size: var(--openbot-text-md);
  font-weight: 620;
  min-width: 180px;
  background: var(--openbot-text-primary);
  color: var(--openbot-bg-sidebar);
  transition: transform var(--openbot-duration-normal) ease, background var(--openbot-duration-hover) ease;
}
.initial-setup-save:hover:not(:disabled) {
  background: var(--openbot-text-primary);
}
.initial-setup-save:disabled {
  cursor: default;
  opacity: 0.48;
}
.initial-setup-save:active:not(:disabled) {
  transform: scale(0.992);
}
@media (max-width: 620px) {
  .initial-setup-screen {
    place-items: start center;
    padding: 52px 18px 24px;
  }
  .account-login-screen {
    padding-inline: 18px;
  }
  .initial-setup-actions, .initial-setup-save {
    width: 100%;
  }
  .initial-setup-actions {
    flex-direction: column-reverse;
  }
  .setup-route-button {
    grid-template-columns: 42px minmax(0, 1fr) 18px;
    gap: 12px;
    padding-inline: 13px;
  }
  .setup-route-icon {
    width: 42px;
    height: 42px;
  }
  .initial-setup-account {
    max-width: 55vw;
  }
}
@media (max-width: 480px) {
  .account-login-screen {
    padding: 40px 20px;
  }
  .account-login-brand-lockup {
    margin-bottom: 24px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .account-login, .initial-setup {
    animation: setup-enter var(--openbot-duration-overlay) cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
  .account-login[data-transition="forward"] .account-login-title, .account-login[data-transition="forward"] .account-login-description {
    animation: account-login-copy-forward var(--openbot-duration-overlay) var(--openbot-ease-out) both;
  }
  .account-login[data-transition="back"] .account-login-title, .account-login[data-transition="back"] .account-login-description {
    animation: account-login-copy-back var(--openbot-duration-overlay) var(--openbot-ease-out) both;
  }
  .account-login[data-transition] .account-login-description {
    animation-delay: 18ms;
  }
  .account-login[data-transition="forward"] .account-login-form[data-auth-panel="code"] {
    animation: account-login-panel-forward var(--openbot-duration-overlay) 32ms var(--openbot-ease-out) both;
  }
  .account-login[data-transition="back"] .account-login-form[data-auth-panel="email"] {
    animation: account-login-panel-back var(--openbot-duration-overlay) 32ms var(--openbot-ease-out) both;
  }
  @keyframes setup-enter {
    from {
      opacity: 0;
      transform: translateY(6px);
    }
  }
  @keyframes account-login-copy-forward {
    from {
      filter: blur(4px);
      opacity: 0;
      transform: translateX(10px);
    }
  }
  @keyframes account-login-copy-back {
    from {
      filter: blur(4px);
      opacity: 0;
      transform: translateX(-10px);
    }
  }
  @keyframes account-login-panel-forward {
    from {
      filter: blur(6px);
      opacity: 0;
      transform: translateX(16px) scale(0.985);
    }
  }
  @keyframes account-login-panel-back {
    from {
      filter: blur(6px);
      opacity: 0;
      transform: translateX(-16px) scale(0.985);
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .account-login-spinner, .approval-card {
    animation: none;
  }
  .account-login[data-transition] .account-login-title, .account-login[data-transition] .account-login-description, .account-login[data-transition] .account-login-form[data-auth-panel] {
    animation: none;
  }
}
button {
  cursor: pointer;
}
button:not(.ui-button):focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}
::selection {
  background: var(--openbot-accent-strong);
}
::-webkit-scrollbar {
  width: 0;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-border-strong);
  background-clip: padding-box;
}
.scroll-fade-top:not(.scroll-fade-bottom) {
  -webkit-mask-image: linear-gradient( to bottom, transparent 0, var(--openbot-text-primary) 18px, var(--openbot-text-primary) 100% );
  mask-image: linear-gradient( to bottom, transparent 0, var(--openbot-text-primary) 18px, var(--openbot-text-primary) 100% );
}
.scroll-fade-bottom:not(.scroll-fade-top) {
  -webkit-mask-image: linear-gradient( to bottom, var(--openbot-text-primary) 0, var(--openbot-text-primary) calc(100% - 18px), transparent 100% );
  mask-image: linear-gradient( to bottom, var(--openbot-text-primary) 0, var(--openbot-text-primary) calc(100% - 18px), transparent 100% );
}
.scroll-fade-top.scroll-fade-bottom {
  -webkit-mask-image: linear-gradient( to bottom, transparent 0, var(--openbot-text-primary) 18px, var(--openbot-text-primary) calc(100% - 18px), transparent 100% );
  mask-image: linear-gradient( to bottom, transparent 0, var(--openbot-text-primary) 18px, var(--openbot-text-primary) calc(100% - 18px), transparent 100% );
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
body, .account-login-screen, .initial-setup-screen, .app-frame, .conversation-panel, .direct-conversation {
  background: var(--openbot-bg-canvas);
}
.panel-edge, .direct-conversation-header, .remote-desktop-header, .settings-panel, .browser-panel, .remote-desktop-workspace, .provider-picker-list {
  border-color: var(--openbot-border);
}
.search-field, .composer, .direct-composer, .settings-field input, .settings-field textarea, .settings-field select, .setup-remote-form input, .setup-remote-form textarea, .account-login-form input {
  border-color: var(--openbot-border);
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-primary);
}
.search-field:focus-within, .composer:focus-within, .direct-composer:focus-within, .settings-field input:focus, .settings-field textarea:focus, .settings-field select:focus, .setup-remote-form input:focus, .setup-remote-form textarea:focus, .account-login-form input:focus {
  border-color: var(--openbot-border-focus);
  background: var(--openbot-bg-surface-raised);
}
.search-field input::placeholder, .composer-editor-placeholder, .direct-composer textarea::placeholder, .settings-field input::placeholder, .settings-field textarea::placeholder, .setup-remote-form input::placeholder, .setup-remote-form textarea::placeholder, .account-login-form input::placeholder {
  color: var(--openbot-text-placeholder);
}
.provider-picker-option-selected, .provider-model-option-selected {
  border-color: var(--openbot-border-focus);
  background: var(--openbot-accent-soft);
  color: var(--openbot-text-primary);
}
.provider-picker-option, .provider-model-option {
  border-color: var(--openbot-border);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-secondary);
}
.provider-picker-option:hover:not(.provider-picker-option-unavailable), .provider-picker-option:focus-within, .provider-model-option:hover, .provider-model-option:focus-visible {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}
.voice-button, .voice-button-active, .initial-setup-save, .account-login-primary {
  background: var(--openbot-surface-light);
  color: var(--openbot-text-on-light);
}
.voice-button:hover, .voice-button-active:hover, .initial-setup-save:hover:not(:disabled), .account-login-primary:hover:not(:disabled, [aria-disabled="true"]) {
  background: var(--openbot-text-primary);
  color: var(--openbot-text-on-light);
}
.remote-desktop-overlay > button, .remote-desktop-overlay > button:hover {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}
.remote-desktop-overlay > button:hover {
  background: var(--openbot-bg-control-active);
}
.account-login-error, .initial-setup-error {
  border-color: var(--openbot-danger-soft);
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
}
.setup-route-button, .setup-route-icon, .setup-remote-form input, .setup-remote-form textarea {
  border-color: var(--openbot-border);
  background: var(--openbot-bg-surface);
}
.setup-route-button:hover, .setup-route-button:focus-visible {
  border-color: var(--openbot-border-focus);
  background: var(--openbot-bg-surface-raised);
}
.setup-route-icon-local i, .provider-picker-status-available i {
  color: var(--openbot-success);
}
.account-login-development-code, .provider-picker-status-sign-in-required i, .provider-picker-status-outdated i {
  color: var(--openbot-warning);
}
.app-loading {
  --app-loading-exit-delay: 0ms;
  --app-loading-play: running;
  --app-loading-at: 0s;
  position: absolute;
  z-index: var(--openbot-layer-dialog);
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--openbot-bg-canvas);
  -webkit-app-region: drag;
}
.app-loading-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.app-loading-row {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  padding-top: 48px;
}
.app-loading-agent {
  position: relative;
  width: 56px;
  height: 56px;
}
.app-loading-agent::after {
  position: absolute;
  z-index: -1;
  bottom: -8px;
  left: 50%;
  width: 70%;
  height: 8px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-muted);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-muted) 24%, transparent);
  }
  content: "";
  transform: translateX(-50%);
}
.app-loading-body {
  position: relative;
  width: 100%;
  height: 100%;
  transform-origin: 50% 100%;
}
.app-loading-bot {
  display: block;
  width: 100%;
  height: 100%;
}
.app-loading[data-scrub] {
  --app-loading-play: paused;
}
.app-loading-snore {
  position: absolute;
  top: 13px;
  left: 37px;
  transition: opacity var(--openbot-duration-normal) var(--openbot-ease-out);
}
.app-loading:not([data-phase="loading"]) .app-loading-snore {
  opacity: 0;
}
.app-loading-z {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 9px;
  height: 9px;
  scale: calc(0.7 + var(--app-loading-z-index) * 0.15);
  translate: calc(var(--app-loading-z-index) * 6px) calc(var(--app-loading-z-index) * -9px);
}
.app-loading-z-mark {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: var(--openbot-text-muted);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2px;
}
.app-loading-status {
  min-height: 20px;
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
}
.app-loading-line {
  display: block;
}
.app-loading:not([data-phase="loading"]) {
  pointer-events: none;
  -webkit-app-region: no-drag;
  animation: app-loading-exit var(--openbot-duration-overlay) var(--openbot-ease-in-out) var(--app-loading-exit-delay) forwards;
}
@media (prefers-reduced-motion: no-preference) {
  .app-loading[data-phase="exit"] {
    --app-loading-exit-delay: 760ms;
  }
  .app-loading-stage {
    animation: app-loading-enter var(--openbot-duration-overlay) var(--openbot-ease-out) calc(250ms - var(--app-loading-at)) both var(--app-loading-play);
  }
  .app-loading-agent:not([data-sleeper]) .app-loading-body {
    animation: app-loading-hop var(--app-loading-wave) var(--openbot-ease-in-out) calc(var(--app-loading-index) * var(--app-loading-stagger) - var(--app-loading-at)) infinite var(--app-loading-play);
  }
  .app-loading-agent:not([data-sleeper])::after {
    animation: app-loading-shadow var(--app-loading-wave) var(--openbot-ease-in-out) calc(var(--app-loading-index) * var(--app-loading-stagger) - var(--app-loading-at)) infinite var(--app-loading-play);
  }
  .app-loading-agent[data-sleeper] .app-loading-body {
    animation: app-loading-breathe 1.8s var(--openbot-ease-in-out) calc(0s - var(--app-loading-at)) infinite alternate var(--app-loading-play);
  }
  .app-loading-z {
    --app-loading-z-delay: calc(var(--app-loading-z-index) * 1.2s - var(--app-loading-at));
    opacity: 0;
    animation: app-loading-z-rise 3.6s cubic-bezier(0.33, 0.1, 0.4, 1) var(--app-loading-z-delay) infinite var(--app-loading-play), app-loading-z-fade 3.6s linear var(--app-loading-z-delay) infinite var(--app-loading-play);
  }
  .app-loading-z-mark {
    animation: app-loading-z-sway 0.9s var(--openbot-ease-in-out) var(--app-loading-z-delay) infinite alternate var(--app-loading-play);
  }
  .app-loading-line {
    animation: app-loading-line-in 280ms var(--openbot-ease-out);
  }
  .app-loading[data-scrub] .app-loading-line {
    animation: none;
  }
  .app-loading[data-phase="exit"] .app-loading-body {
    animation: app-loading-leap 640ms var(--openbot-ease-in-out) calc(var(--app-loading-index, 0) * 70ms) forwards;
  }
  .app-loading[data-phase="exit"] [data-sleeper] .app-loading-body {
    animation: app-loading-breathe 1.8s var(--openbot-ease-in-out) calc(0s - var(--app-loading-at)) infinite alternate, app-loading-drift 720ms cubic-bezier(0.5, 0, 0.9, 0.5) 200ms forwards;
  }
  .app-loading[data-phase="exit"] .app-loading-agent::after {
    animation: app-loading-shadow-out 320ms var(--openbot-ease-out) calc(var(--app-loading-index, 0) * 70ms + 120ms) forwards;
  }
  .app-loading[data-phase="exit"] [data-sleeper]::after {
    animation-delay: 480ms;
  }
  .app-loading:not([data-phase="loading"]) .app-loading-status {
    animation: app-loading-fade 200ms var(--openbot-ease-out) forwards;
  }
}
@keyframes app-loading-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}
@keyframes app-loading-hop {
  0%, 78%, 100% {
    transform: translateY(0) scale(1, 1);
  }
  10% {
    transform: translateY(0) scale(1.14, 0.86);
  }
  28% {
    transform: translateY(-30px) scale(0.9, 1.1);
  }
  44% {
    transform: translateY(-40px) scale(1, 1);
  }
  62% {
    transform: translateY(0) scale(0.94, 1.06);
  }
  68% {
    transform: translateY(0) scale(1.16, 0.84);
  }
}
@keyframes app-loading-shadow {
  0%, 62%, 100% {
    opacity: 1;
    transform: translateX(-50%) scaleX(1);
  }
  68% {
    transform: translateX(-50%) scaleX(1.15);
  }
  44% {
    opacity: 0.45;
    transform: translateX(-50%) scaleX(0.55);
  }
}
@keyframes app-loading-breathe {
  from {
    transform: scale(1, 1);
  }
  to {
    transform: scale(0.97, 1.04) rotate(-1.5deg);
  }
}
@keyframes app-loading-drift {
  from {
    opacity: 1;
    translate: 0 0;
  }
  60% {
    opacity: 1;
  }
  to {
    opacity: 0;
    translate: 0 -40vh;
  }
}
@keyframes app-loading-z-rise {
  from {
    scale: 0.45;
    translate: 0 0;
  }
  to {
    scale: 1.1;
    translate: 12px -30px;
  }
}
@keyframes app-loading-z-fade {
  0%, 100% {
    opacity: 0;
  }
  18%, 60% {
    opacity: 1;
  }
}
@keyframes app-loading-z-sway {
  from {
    transform: translateX(-2px) rotate(-14deg);
  }
  to {
    transform: translateX(2px) rotate(12deg);
  }
}
@keyframes app-loading-line-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
@keyframes app-loading-leap {
  0% {
    transform: translateY(0) scale(1, 1);
  }
  25% {
    transform: translateY(0) scale(1.2, 0.8);
  }
  45% {
    opacity: 1;
    transform: translateY(-40px) scale(0.85, 1.2);
  }
  100% {
    opacity: 0;
    transform: translateY(-70vh) scale(0.85, 1.2);
  }
}
@keyframes app-loading-shadow-out {
  to {
    opacity: 0;
    transform: translateX(-50%) scaleX(0.3);
  }
}
@keyframes app-loading-fade {
  to {
    opacity: 0;
  }
}
@keyframes app-loading-exit {
  to {
    opacity: 0;
  }
}
.server-connection-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3);
  background: var(--openbot-bg-canvas);
  border-bottom: 1px solid var(--openbot-border);
}
.server-connection-notice p {
  margin: 0;
}
.server-connection-detail {
  color: var(--openbot-text-muted);
  font-variant-numeric: tabular-nums;
  text-wrap: pretty;
}
.server-connection-actions {
  display: flex;
  gap: var(--openbot-space-2);
  -webkit-app-region: no-drag;
}
.server-connection-content {
  position: relative;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.server-connection-content[hidden] {
  display: none;
}
.language-wheel-shell {
  width: min(100%, 360px);
  min-height: 100%;
  margin-inline: auto;
  padding: var(--openbot-space-8) var(--openbot-space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-3);
  -webkit-app-region: no-drag;
}
.language-wheel-shell .account-login-brand-lockup {
  margin-bottom: var(--openbot-space-4);
}
.language-wheel-title {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.language-wheel-frame {
  position: relative;
  width: 100%;
}
.language-wheel-arrows {
  position: absolute;
  top: 50%;
  left: calc(100% + var(--openbot-space-2));
  translate: 0 -50%;
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
}
.language-wheel-arrows svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
}
.language-wheel {
  --row: 44px;
  position: relative;
  width: 100%;
  height: calc(var(--row) * 5);
  overflow: clip;
  cursor: grab;
  touch-action: none;
  user-select: none;
  mask-image: linear-gradient( transparent, var(--openbot-text-primary) 30%, var(--openbot-text-primary) 70%, transparent );
}
.language-wheel[data-dragging] {
  cursor: grabbing;
}
.language-wheel::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: calc(var(--row) * 2);
  height: var(--row);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-grouped);
}
.language-wheel:has(:focus-visible)::before {
  box-shadow: inset 0 0 0 1px var(--openbot-border-focus), var(--openbot-focus-ring);
}
.language-wheel-track {
  position: relative;
  height: 100%;
}
.language-wheel-item {
  position: absolute;
  inset-inline: 0;
  top: calc(var(--row) * 2);
  height: var(--row);
  translate: 0 calc(var(--offset) * var(--row));
  opacity: max(0, 1 - var(--distance) * 0.35);
  transition: translate var(--openbot-duration-overlay) var(--openbot-ease-out), opacity var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.language-wheel-label {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-3xl);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: -0.03em;
  line-height: 1;
  cursor: inherit;
}
.language-wheel-name {
  display: flex;
  align-items: center;
  gap: 0.4em;
  scale: max(0.6, 1 - var(--distance) * 0.2);
  transition: scale var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.language-wheel[data-dragging] :is(.language-wheel-item, .language-wheel-name) {
  transition: none;
}
.language-wheel-flag {
  scale: 0.9;
  letter-spacing: 0;
}
.language-wheel-continue {
  width: min(100%, 288px);
  min-height: 44px;
  margin-top: var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
}
.language-wheel-continue svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  transition: translate var(--openbot-duration-normal) var(--openbot-ease-out);
}
.language-wheel-continue:hover:not(:disabled) {
  background: var(--openbot-surface-light);
}
.language-wheel-continue:is(:hover, :focus-visible):not(:disabled) svg {
  translate: var(--openbot-space-1) 0;
}
.language-wheel-continue:active:not(:disabled) svg {
  translate: var(--openbot-space-2) 0;
}
@media (prefers-reduced-motion: reduce) {
  .language-wheel-item, .language-wheel-name, .language-wheel-continue svg {
    transition: none;
  }
}
.onboarding-screen {
  position: absolute;
  z-index: var(--openbot-layer-dialog);
  inset: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow-y: auto;
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
  -webkit-app-region: drag;
}
.onboarding-shell {
  width: min(100%, 680px);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 52px 24px;
  -webkit-app-region: no-drag;
}
.onboarding-progress {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  margin-bottom: 20px;
}
.onboarding-progress span {
  width: 6px;
  height: 6px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-border-strong);
  transition: width var(--openbot-duration-normal) var(--openbot-ease-out), background-color var(--openbot-duration-normal) ease;
}
.onboarding-progress span.is-complete {
  background: var(--openbot-text-muted);
}
.onboarding-progress span.is-active {
  width: 22px;
  background: var(--openbot-text-primary);
}
.onboarding-step {
  width: 100%;
  display: flex;
  justify-content: center;
}
.onboarding-panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.onboarding-panel h1 {
  max-width: 620px;
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-display);
  font-weight: var(--openbot-weight-medium);
  letter-spacing: -0.045em;
  line-height: 1.12;
}
.onboarding-description {
  max-width: 560px;
  margin: 10px 0 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-lg);
  line-height: 1.45;
}
.onboarding-computer-visual svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.onboarding-provider {
  width: min(100%, 480px);
  margin-top: 26px;
  text-align: left;
}
.onboarding-provider .provider-picker-standalone {
  margin-top: 0;
}
.onboarding-provider .provider-picker-label {
  color: var(--openbot-text-secondary);
}
.onboarding-provider .provider-picker-heading {
  padding-inline: 1px;
}
.onboarding-provider .provider-picker-list {
  background: var(--openbot-bg-control);
}
.onboarding-provider .provider-picker-hint {
  color: var(--openbot-text-muted);
}
.onboarding-computer-visual {
  position: relative;
  width: min(100%, 400px);
  margin-top: 20px;
}
.onboarding-computer-stop-mist, .onboarding-computer-highlight-start {
  stop-color: var(--openbot-onboarding-desktop-mist);
}
.onboarding-computer-stop-blue, .onboarding-computer-highlight-end {
  stop-color: var(--openbot-onboarding-desktop-blue);
}
.onboarding-computer-stop-indigo {
  stop-color: var(--openbot-onboarding-desktop-indigo);
}
.onboarding-computer-highlight-start {
  stop-opacity: 0.92;
}
.onboarding-computer-highlight-end {
  stop-opacity: 0;
}
.onboarding-computer-desktop {
  stroke: var(--openbot-border-on-light);
  stroke-width: 1;
  filter: drop-shadow(0 16px 22px var(--openbot-shadow-popover-ambient));
}
.onboarding-computer-desktop-highlight {
  pointer-events: none;
}
.onboarding-computer-desktop-beam {
  fill: var(--openbot-onboarding-desktop-mist);
  opacity: 0.16;
  pointer-events: none;
}
.onboarding-computer-window-shadow {
  fill: var(--openbot-shadow-dialog);
  opacity: 0.46;
}
.onboarding-computer-window {
  transform-box: fill-box;
  transform-origin: center;
  animation: onboarding-computer-window-drag 4.6s var(--openbot-ease-in-out) infinite;
}
.onboarding-computer-window-body {
  fill: var(--openbot-onboarding-window);
  stroke: var(--openbot-border-on-light);
  stroke-width: 1;
}
.onboarding-computer-window-bar, .onboarding-computer-window-bar-fill {
  fill: var(--openbot-text-muted-on-light);
  opacity: 0.24;
}
.onboarding-computer-window-bar {
  stroke: var(--openbot-border-on-light);
  stroke-width: 1;
}
.onboarding-computer-window-pane {
  fill: var(--openbot-text-dim-on-light);
  opacity: 0.18;
}
.onboarding-computer-window-card {
  fill: var(--openbot-text-dim-on-light);
  opacity: 0.24;
}
.onboarding-computer-window-line {
  fill: var(--openbot-text-dim-on-light);
  opacity: 0.54;
}
.onboarding-computer-window-line-short {
  opacity: 0.44;
}
.onboarding-computer-dot-danger {
  fill: var(--openbot-danger);
}
.onboarding-computer-dot-warning {
  fill: var(--openbot-warning);
}
.onboarding-computer-dot-success {
  fill: var(--openbot-success);
}
.onboarding-computer-cursor {
  transform-box: fill-box;
  transform-origin: 0 0;
  animation: onboarding-computer-cursor-drag 4.6s var(--openbot-ease-in-out) infinite;
}
.onboarding-computer-cursor path {
  fill: var(--openbot-text-on-light);
  stroke: var(--openbot-onboarding-window);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  filter: drop-shadow(0 2px 3px var(--openbot-shadow-popover-ambient));
  paint-order: stroke fill;
}
.onboarding-computer-avatar {
  position: absolute;
  z-index: 1;
  top: 40%;
  left: 73%;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  pointer-events: none;
  animation: onboarding-computer-avatar-drag 4.6s var(--openbot-ease-in-out) infinite;
}
.onboarding-computer-avatar .agent-avatar {
  width: 34px;
  height: 34px;
}
.onboarding-computer-avatar .agent-avatar > svg {
  width: 128%;
  height: 128%;
  filter: drop-shadow(0 2px 4px var(--openbot-shadow-popover-ambient));
}
@keyframes onboarding-computer-window-drag {
  0%, 34% {
    transform: translate(0, 0);
  }
  56%, 78% {
    transform: translate(18px, 8px);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes onboarding-computer-cursor-drag {
  0%, 8% {
    opacity: 0;
    transform: translate(352px, 190px) scale(0.68);
  }
  18%, 32% {
    opacity: 1;
    transform: translate(282px, 72px) scale(0.76);
  }
  38% {
    opacity: 1;
    transform: translate(282px, 72px) scale(0.71);
  }
  56%, 70% {
    opacity: 1;
    transform: translate(300px, 80px) scale(0.71);
  }
  78% {
    opacity: 1;
    transform: translate(300px, 80px) scale(0.76);
  }
  92%, 100% {
    opacity: 0;
    transform: translate(352px, 190px) scale(0.68);
  }
}
@keyframes onboarding-computer-avatar-drag {
  0%, 8% {
    opacity: 0;
    transform: translate(68px, 112px) scale(0.88);
  }
  18%, 32% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  38% {
    opacity: 1;
    transform: translate(0, 0) scale(0.94);
  }
  56%, 70% {
    opacity: 1;
    transform: translate(18px, 8px) scale(0.94);
  }
  78% {
    opacity: 1;
    transform: translate(18px, 8px) scale(1);
  }
  92%, 100% {
    opacity: 0;
    transform: translate(68px, 112px) scale(0.88);
  }
}
.onboarding-error {
  width: min(100%, 480px);
  margin: 12px 0 0;
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
  line-height: 1.45;
  text-align: center;
}
.onboarding-actions {
  width: min(100%, 288px);
  display: grid;
  gap: var(--openbot-space-2);
  margin-top: 22px;
}
.onboarding-screen[data-step="computer"] .onboarding-actions {
  margin-top: 16px;
}
.onboarding-actions .ui-button {
  width: 100%;
  min-height: 44px;
  border-radius: var(--openbot-radius-pill);
}
.onboarding-next {
  order: -1;
}
.onboarding-next-reason {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 1.45;
  text-align: center;
}
@media (max-width: 620px) {
  .onboarding-shell {
    padding: 48px 18px;
  }
  .onboarding-panel h1 {
    font-size: var(--openbot-text-3xl);
  }
  .onboarding-description {
    font-size: var(--openbot-text-md);
  }
  .onboarding-computer-visual {
    width: min(100%, 320px);
    margin-top: 16px;
  }
  .onboarding-computer-avatar {
    width: 30px;
    height: 30px;
  }
  .onboarding-computer-avatar .agent-avatar {
    width: 30px;
    height: 30px;
  }
}
@media (max-width: 460px) {
  .onboarding-provider .provider-picker-option-selection {
    grid-template-columns: 16px 18px minmax(0, 1fr);
  }
  .onboarding-provider .provider-picker-state {
    grid-column: 3;
    justify-self: start;
  }
  .onboarding-computer-visual {
    width: min(100%, 320px);
    margin-top: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .onboarding-progress span, .onboarding-computer-window, .onboarding-computer-cursor, .onboarding-computer-avatar {
    animation: none;
    transition: none;
  }
  .onboarding-computer-window {
    transform: translate(18px, 8px);
  }
  .onboarding-computer-cursor {
    opacity: 1;
    transform: translate(300px, 80px) scale(0.76);
  }
  .onboarding-computer-avatar {
    opacity: 1;
    transform: translate(18px, 8px);
  }
}
:is(.onboarding-provider, .setup-local-content) .provider-picker-list {
  overflow: visible;
}
:is(.onboarding-provider, .setup-local-content) .provider-picker-list > :first-child, :is(.onboarding-provider, .setup-local-content) .provider-picker-list > :first-child > .provider-picker-option:first-child {
  border-top-left-radius: calc(var(--openbot-radius-md) - 1px);
  border-top-right-radius: calc(var(--openbot-radius-md) - 1px);
}
:is(.onboarding-provider, .setup-local-content) .provider-picker-list > :last-child, :is(.onboarding-provider, .setup-local-content) .provider-picker-list > :last-child > .provider-picker-option:last-child {
  border-bottom-left-radius: calc(var(--openbot-radius-md) - 1px);
  border-bottom-right-radius: calc(var(--openbot-radius-md) - 1px);
}
:is(.onboarding-provider, .setup-local-content) .provider-picker-option-with-callout {
  position: relative;
}
.provider-picker-callout {
  position: absolute;
  right: calc(100% + 10px);
  bottom: 50%;
  width: 150px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--openbot-onboarding-desktop-indigo);
  pointer-events: none;
  animation: provider-picker-callout-in 420ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.provider-picker-callout-title {
  font-size: var(--openbot-text-md);
  font-weight: 620;
  line-height: 18px;
}
.provider-picker-callout-detail {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
}
.provider-picker-callout-arrow {
  width: 92px;
  height: 40px;
  align-self: flex-end;
  margin-top: 2px;
  margin-bottom: -10px;
}
@keyframes provider-picker-callout-in {
  from {
    opacity: 0;
  }
}
.provider-picker-callout-end {
  right: auto;
  left: calc(100% + 10px);
  align-items: flex-end;
  text-align: right;
}
.provider-picker-callout-end .provider-picker-callout-arrow {
  align-self: flex-start;
  transform: scaleX(-1);
}
@media (prefers-reduced-motion: reduce) {
  .provider-picker-callout {
    animation: none;
  }
}
@media (max-width: 860px) {
  .provider-picker-callout {
    display: none;
  }
}
@media (max-width: 960px) {
  .setup-local-content .provider-picker-callout {
    display: none;
  }
}
.server-onboarding-screen {
  position: fixed;
}
.server-onboarding-close {
  position: absolute;
  top: 12px;
  right: 12px;
  -webkit-app-region: no-drag;
}
.first-run-screen[data-step="choose"] .onboarding-shell {
  width: min(100%, 960px);
}
.first-run-screen .onboarding-shell > .onboarding-step {
  view-transition-name: first-run-step;
}
.first-run-screen .onboarding-shell > .onboarding-progress {
  view-transition-name: first-run-progress;
}
.first-run-screen .onboarding-shell > .onboarding-actions {
  view-transition-name: first-run-actions;
}
::view-transition-group(first-run-step), ::view-transition-group(first-run-progress), ::view-transition-group(first-run-actions) {
  animation-duration: 440ms;
  animation-timing-function: var(--openbot-ease-out);
}
::view-transition-old(first-run-step), ::view-transition-new(first-run-step) {
  inset-inline-start: 50%;
  inline-size: auto;
  translate: -50% 0;
}
html:active-view-transition-type(step)::view-transition-old(first-run-step) {
  animation: first-run-step-out 220ms var(--openbot-ease-out) both;
}
html:active-view-transition-type(step)::view-transition-new(first-run-step) {
  animation: first-run-step-in 440ms var(--openbot-ease-out) 40ms both;
}
::view-transition-old(first-run-progress):not(:only-child) {
  animation: none;
  opacity: 0;
}
::view-transition-new(first-run-progress):not(:only-child) {
  animation: none;
}
::view-transition-new(first-run-progress):only-child, ::view-transition-new(first-run-actions):only-child {
  animation: first-run-step-rise 440ms var(--openbot-ease-out) 40ms both;
}
::view-transition-old(first-run-actions), ::view-transition-old(first-run-progress):only-child {
  animation: first-run-blur-out 220ms var(--openbot-ease-out) both;
}
::view-transition-new(first-run-actions):not(:only-child) {
  animation: first-run-blur-in 440ms var(--openbot-ease-out) 40ms both;
}
html:active-view-transition-type(open)::view-transition-old(*) {
  animation: first-run-open-out 320ms var(--openbot-ease-out) both;
}
html:active-view-transition-type(open)::view-transition-new(*) {
  animation: first-run-open-in 520ms var(--openbot-ease-out) 60ms both;
}
@keyframes first-run-step-out {
  to {
    opacity: 0;
    filter: blur(6px);
  }
}
@keyframes first-run-step-in {
  from {
    opacity: 0;
    filter: blur(6px);
  }
}
@keyframes first-run-step-rise {
  from {
    opacity: 0;
    filter: blur(4px);
  }
}
@keyframes first-run-blur-out {
  to {
    opacity: 0;
    filter: blur(8px);
  }
}
@keyframes first-run-blur-in {
  from {
    opacity: 0;
    filter: blur(8px);
  }
}
@keyframes first-run-open-out {
  to {
    opacity: 0;
    filter: blur(8px);
  }
}
@keyframes first-run-open-in {
  from {
    opacity: 0;
    filter: blur(6px);
  }
}
.first-run-choice {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.first-run-choice-team {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-3);
  margin-bottom: 40px;
}
.first-run-choice-avatar {
  width: 52px;
  height: 52px;
  flex: none;
  animation: first-run-rise var(--openbot-duration-overlay) var(--openbot-ease-out) both;
}
.first-run-choice-avatar:nth-child(1), .first-run-choice-avatar:nth-child(7) {
  width: 40px;
  height: 40px;
  transform: translateY(24px);
}
.first-run-choice-avatar:nth-child(2), .first-run-choice-avatar:nth-child(6) {
  transform: translateY(8px);
}
.first-run-choice-avatar:nth-child(3), .first-run-choice-avatar:nth-child(5) {
  width: 68px;
  height: 68px;
}
.first-run-choice-avatar:nth-child(4) {
  width: 104px;
  height: 104px;
  transform: translateY(-12px);
}
.first-run-choice-avatar:nth-child(2) {
  animation-delay: calc(var(--openbot-duration-fast) * 1);
}
.first-run-choice-avatar:nth-child(3) {
  animation-delay: calc(var(--openbot-duration-fast) * 2);
}
.first-run-choice-avatar:nth-child(4) {
  animation-delay: calc(var(--openbot-duration-fast) * 3);
}
.first-run-choice-avatar:nth-child(5) {
  animation-delay: calc(var(--openbot-duration-fast) * 4);
}
.first-run-choice-avatar:nth-child(6) {
  animation-delay: calc(var(--openbot-duration-fast) * 5);
}
.first-run-choice-avatar:nth-child(7) {
  animation-delay: calc(var(--openbot-duration-fast) * 6);
}
.first-run-choice-title {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-hero);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: -0.055em;
  line-height: 1;
  text-wrap: balance;
}
.first-run-choice .onboarding-description {
  margin-top: var(--openbot-space-4);
}
.first-run-choice-rows {
  width: min(100%, 440px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-top: var(--openbot-space-8);
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-grouped);
  background: var(--openbot-bg-grouped);
}
.first-run-choice-rows .first-run-choice-row {
  height: auto;
  min-height: 64px;
  justify-content: flex-start;
  gap: var(--openbot-space-3);
  border-radius: 0;
  padding: var(--openbot-space-3) var(--openbot-space-4);
  text-align: left;
  white-space: normal;
}
.first-run-choice-rows .first-run-choice-row + .first-run-choice-row {
  border-top-color: var(--openbot-border-grouped);
}
.first-run-choice-row-text {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-sm);
}
.first-run-choice-row-text strong {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.first-run-choice-logos {
  display: flex;
  gap: 6px;
}
.first-run-choice-logo {
  width: 16px;
  height: 16px;
  overflow: visible;
  fill: var(--openbot-provider-current);
}
.first-run-choice-row-chevron {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--openbot-text-dim);
}
.first-run-choice-reason {
  margin-top: var(--openbot-space-3);
}
@keyframes first-run-rise {
  from {
    opacity: 0;
    translate: 0 16px;
  }
}
@media (max-width: 760px) {
  .first-run-choice-team {
    gap: var(--openbot-space-1-5);
  }
  .first-run-choice-avatar:nth-child(1), .first-run-choice-avatar:nth-child(7) {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .first-run-choice-avatar {
    animation: none;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .first-run-choice-avatar, .first-run-launch-avatar {
    --first-run-spring: linear(
      0,
      0.035 2.1%,
      0.281 6.7%,
      0.723 12.9%,
      0.938 16.7%,
      1.077 21%,
      1.149 24.3%,
      1.163 27%,
      1.154 29.9%,
      1.129 32.8%,
      1.051 39.6%,
      1.017 43.1%,
      0.977 51%,
      0.974 53.8%,
      0.975 57.1%,
      0.997 69.8%,
      1.003 76.9%,
      1
    );
    transition: scale 560ms var(--first-run-spring);
  }
  .first-run-choice-avatar:hover, .first-run-launch-member:hover .first-run-launch-avatar {
    scale: 1.12;
  }
  .first-run-choice-avatar:active, .first-run-launch-member:active .first-run-launch-avatar {
    scale: 0.9;
    transition-duration: var(--openbot-duration-fast);
    transition-timing-function: var(--openbot-ease-out);
  }
}
.first-run-launch {
  --first-run-launch-accent: var(--openbot-logo-production);
  position: absolute;
  z-index: var(--openbot-layer-dialog);
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--openbot-bg-canvas);
  -webkit-app-region: drag;
}
.first-run-launch[data-variant="dev"] {
  --first-run-launch-accent: var(--openbot-logo-dev);
}
.first-run-launch[data-variant="preview"] {
  --first-run-launch-accent: var(--openbot-logo-preview);
}
.first-run-launch-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.first-run-launch-team {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-3);
}
.first-run-launch-member {
  display: grid;
  flex: none;
}
.first-run-launch-avatar {
  width: 52px;
  height: 52px;
}
.first-run-launch-member:nth-child(1), .first-run-launch-member:nth-child(7) {
  translate: 0 24px;
}
.first-run-launch-member:nth-child(1) .first-run-launch-avatar, .first-run-launch-member:nth-child(7) .first-run-launch-avatar {
  width: 40px;
  height: 40px;
}
.first-run-launch-member:nth-child(2), .first-run-launch-member:nth-child(6) {
  translate: 0 8px;
}
.first-run-launch-member:nth-child(3) .first-run-launch-avatar, .first-run-launch-member:nth-child(5) .first-run-launch-avatar {
  width: 68px;
  height: 68px;
}
.first-run-launch-member:nth-child(4) {
  translate: 0 -12px;
}
.first-run-launch-member:nth-child(4) .first-run-launch-avatar {
  width: 104px;
  height: 104px;
}
.first-run-launch-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.first-run-launch-scribble {
  display: block;
  width: 112px;
  height: 14px;
  overflow: visible;
}
.first-run-launch-scribble polyline {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4px;
}
.first-run-launch-track {
  stroke: var(--first-run-launch-accent);
  @supports (color: color-mix(in lab, red, red)) {
    stroke: color-mix(in srgb, var(--first-run-launch-accent) 18%, transparent);
  }
}
.first-run-launch-fill {
  stroke: var(--first-run-launch-accent);
  stroke-dasharray: 1 1;
  stroke-dashoffset: calc(1 - var(--first-run-launch-percent));
  transition: stroke-dashoffset var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.first-run-launch-label {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
}
@media (max-width: 760px) {
  .first-run-launch-team {
    gap: var(--openbot-space-1-5);
  }
  .first-run-launch-member:nth-child(1), .first-run-launch-member:nth-child(7) {
    display: none;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .first-run-launch-avatar {
    animation: first-run-launch-hop 1.8s var(--openbot-ease-in-out) infinite;
  }
  .first-run-launch-member:nth-child(2) .first-run-launch-avatar {
    animation-delay: 120ms;
  }
  .first-run-launch-member:nth-child(3) .first-run-launch-avatar {
    animation-delay: 240ms;
  }
  .first-run-launch-member:nth-child(4) .first-run-launch-avatar {
    animation-delay: 360ms;
  }
  .first-run-launch-member:nth-child(5) .first-run-launch-avatar {
    animation-delay: 480ms;
  }
  .first-run-launch-member:nth-child(6) .first-run-launch-avatar {
    animation-delay: 600ms;
  }
  .first-run-launch-member:nth-child(7) .first-run-launch-avatar {
    animation-delay: 720ms;
  }
  .first-run-launch-progress[data-known="false"] .first-run-launch-fill {
    stroke-dasharray: 0.35 1.2;
    transition: none;
    animation: first-run-launch-scribble 1.8s var(--openbot-ease-in-out) infinite;
  }
}
@keyframes first-run-launch-hop {
  0%, 36%, 100% {
    transform: translateY(0);
  }
  16% {
    transform: translateY(-12px);
  }
}
@keyframes first-run-launch-scribble {
  from {
    stroke-dashoffset: 0.35;
  }
  to {
    stroke-dashoffset: -1.2;
  }
}
.setup-read-error-actions {
  justify-content: center;
  margin-top: var(--openbot-space-3);
}
.startup-splash {
  position: absolute;
  z-index: var(--openbot-layer-dialog);
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--openbot-bg-canvas);
  -webkit-app-region: drag;
}
.startup-splash-logo {
  display: block;
  width: 96px;
  height: 96px;
  animation: startup-splash-in var(--openbot-duration-overlay) var(--openbot-ease-out) backwards;
}
.startup-splash[data-phase="exit"] {
  pointer-events: none;
  -webkit-app-region: no-drag;
  animation: startup-splash-exit var(--openbot-duration-overlay) var(--openbot-ease-in-out) forwards;
}
@media (prefers-reduced-motion: no-preference) {
  .startup-splash-logo .app-logo-eye {
    stroke-dasharray: var(--splash-eye-length) calc(var(--splash-eye-length) + 24px);
    animation: startup-splash-eye-draw 480ms var(--openbot-ease-in-out) 160ms backwards, app-logo-blink 4.8s var(--openbot-ease-in-out) 1s infinite;
  }
}
@keyframes startup-splash-in {
  from {
    opacity: 0;
  }
}
@keyframes startup-splash-eye-draw {
  from {
    stroke-dashoffset: calc(var(--splash-eye-length) + 12px);
  }
  to {
    stroke-dashoffset: 0px;
  }
}
@keyframes startup-splash-exit {
  to {
    opacity: 0;
  }
}
.first-agent-setup-panel {
  height: 100%;
  min-height: 0;
  color: var(--openbot-text-primary);
}
.first-agent-setup-header {
  display: flex;
  height: 38px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--openbot-border);
  padding: 0 var(--openbot-space-3);
}
.first-agent-header-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-1-5);
}
.first-agent-header-identity .agent-avatar {
  --agent-avatar-optical-offset: -2px;
  width: 18px;
  height: 18px;
}
.first-agent-header-identity h1 {
  overflow: hidden;
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.first-agent-setup-content {
  display: grid;
  min-width: 0;
  min-height: 0;
  flex: 1;
  grid-template-rows: minmax(min-content, 1fr) auto;
  overflow-y: auto;
}
.first-agent-editor {
  display: grid;
  width: min(420px, calc(100% - 48px));
  align-content: center;
  justify-self: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-6) 0;
}
.first-agent-live-avatar {
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  justify-self: center;
  margin-bottom: var(--openbot-space-1);
  translate: 0 calc(0px - var(--openbot-space-2));
}
.first-agent-live-avatar .agent-avatar {
  width: 72px;
  height: 72px;
}
.first-agent-avatar-fieldset {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}
.first-agent-color-options, .first-agent-face-options {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-1);
}
.first-agent-face-options {
  gap: var(--openbot-space-0-5);
}
.ui-button.first-agent-color-choice, .ui-button.first-agent-face-choice {
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-color: transparent;
  background: transparent;
  padding: 0;
  border-radius: var(--openbot-radius-md);
}
.ui-button.first-agent-face-choice {
  display: grid;
  width: 33px;
  height: 33px;
  flex-basis: 33px;
  place-items: center;
  padding: 0;
}
.ui-button.first-agent-color-choice {
  border-radius: var(--openbot-radius-pill);
}
.ui-button.first-agent-color-choice:hover:not(:disabled), .ui-button.first-agent-face-choice:hover:not(:disabled) {
  background: var(--openbot-hover);
}
.first-agent-color-choice[aria-pressed="true"], .first-agent-face-choice[aria-pressed="true"] {
  border-color: var(--openbot-accent-text);
  box-shadow: 0 0 0 2px var(--openbot-accent-soft);
}
.first-agent-color-swatch {
  display: block;
  width: 18px;
  height: 18px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
}
.first-agent-face-choice .agent-avatar {
  --agent-avatar-optical-offset: -3.25px;
  width: 24px;
  height: 24px;
}
.first-agent-fields {
  display: grid;
  gap: var(--openbot-space-3);
  margin-top: var(--openbot-space-1);
}
.first-agent-fields .ui-textarea {
  field-sizing: content;
  min-height: 64px;
  max-height: 240px;
  overflow-y: auto;
}
.ui-button.first-agent-submit {
  min-width: 132px;
}
.first-agent-fields .provider-model-trigger-field {
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
  box-shadow: none;
}
.first-agent-fields .provider-model-trigger-field:hover:not(:disabled), .first-agent-fields .provider-model-trigger-field[aria-expanded="true"] {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-control);
}
.first-agent-fields .provider-model-trigger-field:active:not(:disabled) {
  transform: none;
}
.first-agent-fields .provider-model-trigger-field:focus-visible {
  border-color: var(--openbot-border-focus);
  outline: none;
  box-shadow: var(--openbot-focus-ring);
}
.first-agent-submit-actions {
  display: flex;
  justify-content: center;
  margin-top: var(--openbot-space-1);
}
.first-agent-error {
  margin: 0;
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-align: center;
}
.first-agent-suggestions {
  min-width: 0;
  padding: 0 var(--openbot-space-6) var(--openbot-space-4);
}
.first-agent-suggestions > h2 {
  margin: 0 0 var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
}
.first-agent-suggestion-viewport {
  position: relative;
  min-width: 0;
}
.first-agent-suggestion-viewport::before, .first-agent-suggestion-viewport::after {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: var(--openbot-space-1);
  width: 48px;
  opacity: 0;
  pointer-events: none;
  content: "";
  transition: opacity var(--openbot-duration-normal) var(--openbot-ease-out);
}
.first-agent-suggestion-viewport::before {
  left: 0;
  background: linear-gradient(to right, var(--openbot-bg-canvas), transparent);
}
.first-agent-suggestion-viewport::after {
  right: 0;
  background: linear-gradient(to left, var(--openbot-bg-canvas), transparent);
}
.first-agent-suggestion-viewport.can-scroll-back::before, .first-agent-suggestion-viewport.can-scroll-forward::after {
  opacity: 1;
}
.first-agent-suggestion-list {
  display: flex;
  min-width: 0;
  gap: var(--openbot-space-3);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  margin: 0;
  padding: 1px 1px var(--openbot-space-1);
  list-style: none;
  scrollbar-width: none;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}
.first-agent-suggestion-list::-webkit-scrollbar {
  display: none;
}
.first-agent-suggestion-item {
  width: 256px;
  flex: 0 0 256px;
  margin: 0;
}
.ui-button.first-agent-suggestion-card {
  width: 100%;
  height: 112px;
  justify-content: flex-start;
  gap: var(--openbot-space-4);
  border-color: var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: transparent;
  padding: var(--openbot-space-4);
  cursor: grab;
  text-align: left;
  white-space: normal;
  transition: border-color var(--openbot-duration-hover) var(--openbot-ease-out), background-color var(--openbot-duration-hover) var(--openbot-ease-out);
}
.ui-button.first-agent-suggestion-card:hover:not(:disabled) {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-hover);
}
.first-agent-suggestion-card[aria-pressed="true"] {
  border-color: var(--openbot-accent);
  background: var(--openbot-accent-soft);
}
.first-agent-suggestion-viewport.is-dragging, .first-agent-suggestion-viewport.is-dragging .first-agent-suggestion-list, .first-agent-suggestion-viewport.is-dragging .first-agent-suggestion-card {
  cursor: grabbing;
}
.first-agent-suggestion-card .agent-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
}
.first-agent-suggestion-card > span:last-child {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-1);
}
.first-agent-suggestion-card strong, .first-agent-suggestion-card small {
  display: block;
}
.first-agent-suggestion-card strong {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-xl);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-xl);
}
.first-agent-suggestion-card small {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-md);
}
@media (max-width: 800px) {
  .first-agent-editor {
    width: min(400px, calc(100% - 32px));
    padding-block: var(--openbot-space-4);
  }
  .first-agent-live-avatar, .first-agent-live-avatar .agent-avatar {
    width: 62px;
    height: 62px;
  }
  .first-agent-face-options {
    gap: var(--openbot-space-0-5);
    flex-wrap: wrap;
  }
  .first-agent-suggestions {
    padding-inline: var(--openbot-space-4);
  }
  .first-agent-suggestion-item {
    width: min(256px, calc(100vw - 64px));
    flex-basis: min(256px, calc(100vw - 64px));
  }
}
@media (prefers-reduced-motion: reduce) {
  .first-agent-color-choice, .first-agent-face-choice {
    transition: none;
  }
  .first-agent-suggestion-viewport .ui-button.first-agent-suggestion-card {
    transition: none;
  }
  .first-agent-suggestion-viewport::before, .first-agent-suggestion-viewport::after {
    transition: none;
  }
}
.app-frame {
  --left-header-height: 38px;
  --server-rail-width: 64px;
  position: relative;
  display: grid;
  container-type: inline-size;
  width: 100%;
  height: 100%;
  margin: 0;
  grid-template-columns: var(--left-panel-width, 280px) 0 minmax(0, 1fr);
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--openbot-bg-canvas);
  box-shadow: none;
  transition: grid-template-columns var(--panel-resize-duration, var(--openbot-duration-overlay)) cubic-bezier(0.32, 0.72, 0, 1);
}
.app-frame-with-server-rail {
  grid-template-columns: var(--server-rail-width) var(--left-panel-width, 280px) 0 minmax(0, 1fr);
}
.app-frame-platform-darwin {
  --server-rail-width: 72px;
}
.remote-compatibility-screen {
  display: flex;
  min-width: 0;
  min-height: 0;
  grid-column: 3;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: var(--openbot-space-6);
}
.app-frame-with-server-rail .remote-compatibility-screen {
  grid-column: 4;
}
.remote-compatibility-alert, .remote-compatibility-details {
  width: min(100%, 520px);
}
.remote-compatibility-details {
  display: grid;
  margin: 0;
}
.remote-compatibility-details > div {
  display: flex;
  justify-content: space-between;
  gap: var(--openbot-space-4);
  border-bottom: 1px solid var(--openbot-border);
  padding: var(--openbot-space-2) 0;
}
.remote-compatibility-details dt {
  color: var(--openbot-text-muted);
}
.remote-compatibility-details dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.global-search-dialog {
  position: fixed;
  z-index: calc(var(--openbot-layer-dialog) + 1);
  top: 112px;
  left: 50%;
  display: flex;
  width: min(640px, calc(100vw - 48px));
  max-height: calc(100dvh - 136px);
  flex-direction: column;
  overflow: hidden;
  outline: 0;
  background: var(--openbot-bg-control);
  box-shadow: 0 0 0 1px var(--openbot-dialog-ring), var(--openbot-shadow-dialog);
  color: var(--openbot-text-primary);
  transform: translateX(-50%);
  transform-origin: 50% 0;
  animation: global-search-in var(--openbot-duration-normal) var(--openbot-ease-out);
}
.global-search-dialog[data-closing] {
  animation: global-search-out var(--openbot-duration-fast) var(--openbot-ease-out) both;
}
@keyframes global-search-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-4px) scale(0.98);
  }
}
@keyframes global-search-out {
  to {
    opacity: 0;
    transform: translateX(-50%) scale(0.98);
  }
}
.global-search-control {
  display: flex;
  height: 48px;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--openbot-space-2);
  border-bottom: 1px solid var(--openbot-border);
  padding: 0 var(--openbot-space-2) 0 var(--openbot-space-4);
  color: var(--openbot-text-muted);
}
.global-search-control > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.global-search-control .global-search-input {
  min-width: 0;
  height: 100%;
  flex: 1;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
.global-search-control .global-search-input:focus {
  border: 0;
  outline: 0;
  box-shadow: none;
}
.global-search-control .global-search-input::placeholder {
  color: var(--openbot-text-muted);
}
.global-search-filters {
  flex: 0 0 auto;
}
.global-search-filters [role="tablist"] {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--openbot-space-0-5);
}
.global-search-filters [role="tab"] {
  position: relative;
  z-index: 1;
  height: var(--openbot-control-xs);
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  padding: 0 var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-family: inherit;
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
  transition: color var(--openbot-duration-normal) var(--openbot-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .global-search-filters [role="tab"]:hover {
    color: var(--openbot-text-secondary);
  }
}
.global-search-filters [role="tab"][data-selected] {
  color: var(--openbot-text-primary);
}
.global-search-filter-pill {
  position: absolute;
  top: 0;
  left: 0;
  height: var(--openbot-control-xs);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-control-active);
  pointer-events: none;
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out), width var(--openbot-duration-normal) var(--openbot-ease-out);
}
.global-search-filter-pill:is([data-initializing], [data-resizing]) {
  transition: none;
}
.global-search-filters [role="tab"]:focus-visible {
  outline: 0;
  box-shadow: var(--openbot-focus-ring);
}
.global-search-results {
  position: relative;
  inset: auto;
  width: 100%;
  max-height: min(400px, calc(100dvh - 240px));
  overflow-y: auto;
  background: transparent;
  padding: var(--openbot-space-1-5);
  transform: none;
  scrollbar-width: none;
  scroll-padding-block: var(--openbot-space-4);
  transition: height var(--openbot-duration-normal) var(--openbot-ease-out);
}
.global-search-results[data-instant] {
  transition: none;
}
.global-search-dialog [data-popper-positioner] {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  transform: none !important;
}
.global-search-results::-webkit-scrollbar {
  display: none;
}
.global-search-results [role="listbox"] {
  position: relative;
  outline: 0;
}
.global-search-results [role="listbox"] > [data-index] {
  position: absolute;
  right: 0;
  left: 0;
}
.global-search-section {
  display: flex;
  height: var(--openbot-control-sm);
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 var(--openbot-space-2) var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
}
.global-search-section[data-spaced] {
  height: calc(var(--openbot-control-sm) + var(--openbot-space-1-5));
}
.global-search-section-count {
  font-variant-numeric: tabular-nums;
}
.global-search-highlight {
  position: absolute;
  top: 0;
  right: var(--openbot-space-1-5);
  left: var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-control-active);
  pointer-events: none;
  transition: transform var(--openbot-duration-fast) var(--openbot-ease-out), height var(--openbot-duration-fast) var(--openbot-ease-out);
}
.global-search-highlight[data-instant] {
  transition: none;
}
.global-search-result {
  display: flex;
  min-height: var(--openbot-control-lg);
  align-items: center;
  gap: var(--openbot-space-2);
  border-radius: var(--openbot-radius-sm);
  padding: 0 var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  cursor: default;
  outline: 0;
}
.global-search-avatar.agent-avatar {
  --agent-avatar-optical-offset: -1px;
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  flex: 0 0 auto;
}
.global-search-icon {
  display: grid;
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  flex: 0 0 auto;
  place-items: center;
  color: var(--openbot-text-muted);
}
.global-search-icon > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: var(--openbot-icon-stroke);
}
.global-search-result-title, .global-search-result-detail {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.global-search-result-title {
  max-width: 40%;
  flex: 0 1 auto;
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}
.global-search-result-detail {
  flex: 1;
  color: var(--openbot-text-muted);
}
.global-search-result-author {
  flex: 0 0 auto;
  color: var(--openbot-text-secondary);
}
.global-search-result-time {
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
.global-search-match {
  background: transparent;
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}
.global-search-result .global-search-result-enter {
  flex: 0 0 auto;
  border: 0;
  background: var(--openbot-bg-control-hover);
  opacity: 0;
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}
.global-search-result[data-highlighted] .global-search-result-enter, .global-search-results [role="listbox"]:not(:has(.global-search-result[data-highlighted])) .global-search-result[data-first] .global-search-result-enter {
  opacity: 1;
}
.global-search-status, .global-search-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.global-search-status {
  min-height: var(--openbot-control-lg);
  animation: global-search-fade-in var(--openbot-duration-normal) var(--openbot-ease-out) var(--openbot-duration-fast) both;
}
.global-search-empty, .global-search-results:not(:has(.global-search-result)) .global-search-status {
  min-height: 96px;
}
.global-search-empty {
  animation: global-search-fade-in var(--openbot-duration-normal) var(--openbot-ease-out) both;
}
@keyframes global-search-fade-in {
  from {
    opacity: 0;
  }
}
.global-search-footer {
  display: flex;
  height: var(--openbot-control-lg);
  flex: 0 0 auto;
  align-items: center;
  gap: var(--openbot-space-4);
  border-top: 1px solid var(--openbot-border);
  padding: 0 var(--openbot-space-4);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.global-search-hint {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  white-space: nowrap;
}
.global-search-hint .ui-kbd {
  border: 0;
  background: var(--openbot-bg-control-active);
}
.global-search-footer .ui-kbd, .global-search-result .global-search-result-enter {
  font-family: var(--openbot-font-sans);
  font-weight: var(--openbot-weight-medium);
}
.global-search-footer .ui-kbd > svg, .global-search-result .global-search-result-enter > svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  stroke-width: calc(var(--openbot-icon-stroke) * 4 / 3);
}
.global-search-hint .ui-kbd + .ui-kbd {
  margin-left: calc(var(--openbot-space-0-5) * -1);
}
@media (max-width: 640px) {
  .global-search-dialog {
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 124px);
  }
  .global-search-control {
    height: auto;
    flex-wrap: wrap;
    row-gap: 0;
  }
  .global-search-control .global-search-input {
    height: 48px;
  }
  .global-search-filters {
    min-width: 0;
    flex-basis: 100%;
    overflow-x: auto;
    padding-block: var(--openbot-space-1) var(--openbot-space-2);
    scrollbar-width: none;
  }
  .global-search-footer, .global-search-result .global-search-result-enter {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .global-search-dialog, .global-search-empty {
    animation: none;
  }
  .global-search-status {
    animation-duration: 0s;
  }
  .global-search-filter-pill, .global-search-highlight, .global-search-results {
    transition: none;
  }
}
.server-rail {
  --server-rail-inline-padding: 7px;
  position: relative;
  z-index: 45;
  display: flex;
  min-width: var(--server-rail-width);
  flex-direction: column;
  justify-content: space-between;
  padding: 42px var(--server-rail-inline-padding) calc(9px + 52px);
  background: var(--openbot-bg-sidebar);
  -webkit-app-region: drag;
}
.server-rail::before {
  position: absolute;
  top: calc(var(--left-header-height) - 1px);
  right: 0;
  left: 0;
  height: 1px;
  background: var(--openbot-border);
  content: "";
  pointer-events: none;
}
.server-rail::after {
  position: absolute;
  top: var(--left-header-height);
  right: 0;
  bottom: 0;
  width: clamp(0.5px, 0.05123cqw, 1px);
  background: var(--openbot-border);
  content: "";
  pointer-events: none;
}
.server-rail-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  width: calc(100% + var(--server-rail-inline-padding) + var(--server-rail-inline-padding));
  min-height: 0;
  flex: 1 1 auto;
  margin-inline: calc(-1 * var(--server-rail-inline-padding));
  padding-inline: var(--server-rail-inline-padding);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.server-rail-list::-webkit-scrollbar {
  display: none;
}
.server-rail-tooltip-trigger {
  display: flex;
}
.server-rail-remote-list {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.server-rail-server-item {
  --server-rail-drag-step: 0;
  position: relative;
  display: flex;
  width: 100%;
  justify-content: center;
  opacity: 1;
  transform: translate3d(0, calc(var(--server-rail-drag-step) * 54px), 0);
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out), opacity var(--openbot-duration-normal) var(--openbot-ease-out);
}
.server-rail-server-item .server-rail-button {
  cursor: grab;
}
.server-rail-server-item-dragging {
  z-index: 1;
  opacity: 0.55;
}
.server-rail-drag-preview {
  position: fixed;
  z-index: var(--openbot-layer-dropdown);
  box-sizing: border-box;
  margin: 0;
  list-style: none;
  opacity: 0.96;
  pointer-events: none;
  transform: none;
  transition: none;
}
.server-rail-server-item-dragging .server-rail-button, .server-rail-remote-list[data-dragging] {
  cursor: grabbing;
}
.server-rail-remote-list[data-dragging] .server-rail-server-item {
  will-change: transform;
}
.server-rail-button {
  position: relative;
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  place-items: center;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--openbot-text-secondary);
  cursor: pointer;
  -webkit-app-region: no-drag;
}
@media (hover: hover) and (pointer: fine) {
  .ui-button.server-rail-button.ui-button-variant-outline:hover:not(:disabled) {
    background: transparent;
    color: var(--openbot-text-secondary);
  }
}
.server-rail-monogram {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: 740;
  letter-spacing: -0.02em;
}
.server-rail-logo {
  width: 40px;
  height: 40px;
  display: block;
  border-radius: var(--openbot-radius-lg);
  object-fit: cover;
  outline: 1px solid var(--openbot-image-outline);
  outline-offset: -1px;
}
.server-rail-mark {
  position: absolute;
  top: 50%;
  left: -7px;
  width: 3px;
  height: 0;
  border-radius: 0 var(--openbot-radius-xs) var(--openbot-radius-xs) 0;
  background: var(--openbot-text-primary);
  opacity: 0;
  transform: translateY(-50%);
  transition: height var(--openbot-duration-hover) var(--openbot-ease-out), opacity var(--openbot-duration-hover) ease;
}
.server-rail-button[aria-pressed="true"] .server-rail-mark {
  height: 26px;
  opacity: 1;
}
.server-rail-button[aria-pressed="false"]:hover .server-rail-mark {
  height: 12px;
  opacity: 1;
}
.server-rail-action .server-rail-monogram {
  border-style: dashed;
  background: transparent;
  color: var(--openbot-accent-text);
  font-size: var(--openbot-text-2xl);
  font-weight: 400;
}
.server-rail-action svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--openbot-icon-stroke);
}
.server-rail-tooltip {
  z-index: var(--openbot-layer-tooltip);
  max-width: min(240px, calc(100vw - 16px));
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-surface-raised);
  box-shadow: var(--openbot-shadow-raised);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-md);
  overflow-wrap: anywhere;
  pointer-events: none;
}
.server-rail-tooltip::before {
  position: absolute;
  top: 50%;
  left: -6px;
  width: 6px;
  height: 12px;
  background: var(--openbot-bg-surface-raised);
  clip-path: polygon(100% 0, 100% 100%, 0 50%);
  content: "";
  transform: translateY(-50%);
}
@media (max-width: 800px) {
  .app-frame-with-server-rail {
    --server-rail-width: 56px;
  }
  .app-frame-platform-darwin {
    --server-rail-width: 72px;
  }
  .server-rail {
    --server-rail-inline-padding: 5px;
  }
}
.panel-resizer {
  position: relative;
  z-index: 40;
  display: flex;
  width: 16px;
  height: 100%;
  align-items: center;
  justify-content: center;
  margin: 0;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: col-resize;
  touch-action: none;
  transform: translateX(-50%);
  user-select: none;
  -webkit-app-region: no-drag;
}
.panel-resizer::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  pointer-events: none;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--openbot-text-dim) 50%, transparent);
  content: "";
  opacity: 0;
  transform: translateX(-50%);
}
.panel-resizer:hover::after, .panel-resizer:focus-visible::after, .panel-resizer-active::after {
  opacity: 1;
}
.panel-resizer:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 1px var(--openbot-border-strong);
}
html.panel-resizing {
  --panel-resize-duration: 0ms;
  cursor: col-resize;
  user-select: none;
}
.right-panel-resizer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  height: auto;
}
.app-frame > * {
  min-height: 0;
}
.panel-edge {
  border-right: clamp(0.5px, 0.05123cqw, 1px) solid var(--openbot-border);
}
.window-drag {
  -webkit-app-region: drag;
}
.no-drag, button, input, textarea {
  -webkit-app-region: no-drag;
}
.sidebar {
  display: flex;
  min-width: 0;
  overflow: hidden;
  flex-direction: column;
  background: var(--openbot-bg-sidebar);
  color: var(--openbot-text-primary);
  container-type: inline-size;
}
.sidebar-topbar {
  display: flex;
  height: var(--left-header-height);
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  border-bottom: 1px solid var(--openbot-border);
  padding: 2px 3px 0 10px;
}
@media (min-width: 721px) {
  .app-frame-edge > .server-rail {
    background: var(--openbot-bg-native-sidebar);
  }
  .app-frame-edge > .server-rail::before, .app-frame-edge > .server-rail::after {
    content: none;
  }
  .app-frame-edge > .sidebar {
    position: relative;
    isolation: isolate;
    border-right: 0;
  }
  .app-frame-edge > .sidebar::before {
    position: absolute;
    z-index: -1;
    content: "";
    pointer-events: none;
  }
  .app-frame-edge .sidebar-topbar {
    border-bottom: 0;
  }
  .app-frame-edge .sidebar-search-wrap {
    padding-top: 11px;
  }
  .app-frame-edge .sidebar-compact-search {
    top: 11px;
  }
  .app-frame-edge .conversation-panel, .app-frame-edge .direct-conversation {
    isolation: isolate;
  }
  .app-frame-edge .conversation-header, .app-frame-edge .first-agent-setup-header {
    border-bottom: 0;
    background: transparent;
  }
  .app-frame-edge .diagram-view-header {
    border-bottom: 0;
    background: transparent;
  }
  .app-frame-edge .diagram-view-body {
    overflow: hidden;
    background: var(--openbot-bg-canvas);
  }
  .app-frame-edge .header-panel-toggle[aria-expanded="true"]:not(.computer-button-agent-active, .side-panel-toggle) {
    border-color: var(--openbot-border-strong);
    background: var(--openbot-bg-control-hover);
    color: var(--openbot-text-primary);
  }
  .app-frame-edge .direct-conversation-header {
    height: var(--left-header-height);
    border-bottom: 0;
    background: transparent;
  }
  .app-frame-edge .direct-conversation-person .person-avatar {
    width: 26px;
    height: 26px;
  }
  .app-frame-edge .remote-compatibility-screen {
    background: linear-gradient(var(--openbot-border-strong), var(--openbot-border-strong)) 0 calc(var(--left-header-height) - 1px) / 100% 1px no-repeat, linear-gradient(var(--openbot-bg-native-sidebar), var(--openbot-bg-native-sidebar)) 0 0 / 100% var(--left-header-height) no-repeat;
  }
  .app-frame-edge .settings-panel, .app-frame-edge .browser-panel {
    isolation: isolate;
  }
  .app-frame-edge .settings-panel::before, .app-frame-edge .browser-panel::before {
    position: absolute;
    z-index: -1;
    content: "";
    pointer-events: none;
  }
  .app-frame-edge .settings-panel-header, .app-frame-edge .file-preview-header, .app-frame-edge .browser-preview-header {
    height: var(--left-header-height);
    border-bottom: 0;
    background: transparent;
  }
}
.sidebar-server-name {
  min-width: 0;
  max-width: 100%;
  height: var(--openbot-control-sm);
  overflow: hidden;
  flex: 0 1 auto;
  justify-content: flex-start;
  gap: var(--openbot-space-1-5);
  margin-right: auto;
  border-radius: var(--openbot-radius-pill);
  padding: 0 var(--openbot-space-2) 0 var(--openbot-space-1);
  color: var(--openbot-text-primary);
  cursor: pointer;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-md);
  opacity: 1;
  text-align: left;
  transition: background-color var(--openbot-duration-hover) ease, border-color var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease, box-shadow var(--openbot-duration-hover) ease, opacity var(--openbot-duration-fast) ease;
}
.sidebar-server-name[aria-expanded="true"] {
  background: var(--ui-menu-item-hover);
}
.sidebar-server-name > .sidebar-server-name-mark {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
}
.sidebar-server-name-mark[data-entering] {
  animation: sidebar-server-mark-in 420ms cubic-bezier(0.34, 1.36, 0.64, 1) both;
}
.sidebar-server-name-label {
  min-width: 0;
  flex: 0 1 auto;
  white-space: nowrap;
}
.sidebar-server-name-label > span:not(.ui-swap-leaving) {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-server-name > .sidebar-server-name-chevron {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
}
.sidebar-server-name > .sidebar-server-name-sleep {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
}
.sidebar-server-name > .sidebar-server-name-sleep[data-state="waking"] {
  color: var(--openbot-accent);
  animation: server-sleep-waking 1200ms ease-in-out infinite;
}
@keyframes sidebar-server-mark-in {
  from {
    opacity: 0;
    scale: 0.6;
    filter: blur(2px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar-server-name-mark[data-entering] {
    animation: none;
  }
}
.app-frame-platform-darwin:not(.app-frame-with-server-rail, .web-app-frame) .sidebar-topbar {
  padding-left: 78px;
}
.app-frame-platform-darwin:not(.app-frame-with-server-rail, .web-app-frame) .sidebar-compact .sidebar-topbar {
  height: calc(var(--left-header-height) + 36px);
  align-items: flex-end;
  justify-content: center;
  padding: 0 0 2px;
}
.app-frame-platform-darwin:not(.app-frame-with-server-rail, .web-app-frame) .sidebar-compact .sidebar-server-name, .app-frame-platform-darwin:not(.app-frame-with-server-rail, .web-app-frame) .sidebar-compact .sidebar-new-button {
  display: none;
}
.app-frame-platform-darwin:not(.app-frame-with-server-rail, .web-app-frame) .sidebar-compact .sidebar-toggle-button {
  transform: none;
}
.app-frame-platform-darwin:not(.app-frame-with-server-rail, .web-app-frame) .sidebar-compact .sidebar-toggle-button:active {
  transform: scale(0.96);
}
.server-menu {
  min-width: 240px;
  max-width: 300px;
  max-height: min(520px, calc(100dvh - 16px), var(--kb-popper-content-available-height, 520px));
  overflow-y: auto;
}
.server-menu-row {
  gap: var(--openbot-space-2);
}
.server-menu-mark {
  position: relative;
  display: grid;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  overflow: hidden;
  place-items: center;
  border-radius: var(--openbot-radius-pill);
}
.server-menu-mark::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--openbot-text-primary) 12%, transparent);
  }
  content: "";
}
.server-menu-mark > * {
  width: 100%;
  height: 100%;
}
.server-menu-name {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.server-menu-muted {
  flex: 0 0 auto;
  color: var(--openbot-text-secondary);
}
.server-menu-sleep {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-muted);
}
.server-menu-sleep[data-state="waking"] {
  background: var(--openbot-accent);
  animation: server-sleep-waking 1200ms ease-in-out infinite;
}
.server-menu .server-menu-layout-chevron {
  margin-left: 0;
}
.ui-action-menu .server-menu-add {
  color: var(--openbot-text-secondary);
}
.ui-action-menu .server-menu-add:is(:hover, [data-highlighted]) {
  color: var(--openbot-text-primary);
}
.server-menu-add-circle {
  display: grid;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  place-items: center;
  border: 1px dashed var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px dashed color-mix(in srgb, var(--openbot-text-primary) 30%, transparent);
  }
  border-radius: var(--openbot-radius-pill);
}
.ui-action-menu .server-menu-add-circle > svg {
  width: var(--ui-menu-inset);
  height: var(--ui-menu-inset);
  stroke-width: 2.5;
}
.ui-action-menu .server-menu-add:is(:hover, [data-highlighted]) .server-menu-add-circle {
  border-color: transparent;
  background: var(--openbot-text-primary);
}
.ui-action-menu .server-menu-add:is(:hover, [data-highlighted]) .server-menu-add-circle > svg {
  color: var(--ui-menu-bg);
}
.sidebar-topbar-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 3px;
}
.sidebar-icon-button {
  position: relative;
  z-index: 2;
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  color: var(--openbot-text-muted);
  pointer-events: auto;
  cursor: pointer;
  -webkit-app-region: no-drag;
  transition: background-color var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease, opacity var(--openbot-duration-normal) ease, transform var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1);
}
.sidebar-icon-button:hover {
  background: var(--openbot-border);
  color: var(--openbot-text-primary);
}
.sidebar-icon-button:active {
  transform: scale(0.96);
}
.sidebar-icon-button:focus-visible {
  outline: 1px solid var(--openbot-text-muted);
  outline-offset: 1px;
}
.header-panel-toggle {
  position: relative;
  z-index: 2;
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  color: var(--openbot-text-muted);
  pointer-events: auto;
  cursor: pointer;
  -webkit-app-region: no-drag;
  transition: border-color var(--openbot-duration-hover) ease, background-color var(--openbot-duration-hover) ease, box-shadow var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease, transform var(--openbot-duration-fast) cubic-bezier(0.23, 1, 0.32, 1);
}
.header-panel-toggle:hover {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-hover);
  color: var(--openbot-text-primary);
}
.header-panel-toggle:active {
  transform: scale(0.92);
  transition-duration: var(--openbot-duration-fast);
}
.header-panel-toggle:focus-visible {
  outline: 1px solid var(--openbot-text-muted);
  outline-offset: 1px;
}
.sidebar-toggle-icon {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sidebar-marketplace-button > svg {
  width: 18px;
  height: 18px;
  stroke-width: var(--openbot-icon-stroke);
}
.sidebar-update-button, .sidebar-update-button:hover {
  color: var(--openbot-accent-text);
}
.sidebar-update-button > svg {
  width: 18px;
  height: 18px;
  stroke-width: var(--openbot-icon-stroke);
}
.sidebar-search-wrap {
  position: relative;
  padding: 8px 12px 6px;
}
.sidebar-search-trigger {
  width: 100%;
  justify-content: flex-start;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-regular);
  line-height: 18px;
  cursor: pointer;
}
.sidebar-search-trigger:hover:not(:disabled) {
  border-color: var(--openbot-text-dim);
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-dim);
}
.sidebar-search-placeholder {
  color: var(--openbot-text-muted);
}
.sidebar-compact-search {
  position: absolute;
  inset: 8px 12px 6px;
  display: grid;
  height: 32px;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  color: var(--openbot-text-muted);
  opacity: 0;
  pointer-events: none;
  transform: translateX(6px) scale(0.96);
  cursor: pointer;
  transition: background-color var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease, opacity var(--openbot-duration-fast) ease, transform var(--openbot-duration-slow) cubic-bezier(0.32, 0.72, 0, 1);
}
.sidebar-compact-search:hover {
  background: var(--openbot-hover);
  color: var(--openbot-text-primary);
}
.sidebar-compact-search:active {
  transform: scale(0.96);
}
.search-field {
  display: flex;
  height: 32px;
  align-items: center;
  gap: 8px;
  border: 0.5px solid var(--openbot-border);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-hover);
  padding: 0 9px;
  color: var(--openbot-text-dim);
  opacity: 1;
  transform: translateX(0);
  transition: border-color var(--openbot-duration-hover) ease, background-color var(--openbot-duration-hover) ease, box-shadow var(--openbot-duration-hover) ease, opacity var(--openbot-duration-fast) ease, transform var(--openbot-duration-slow) cubic-bezier(0.32, 0.72, 0, 1);
}
.search-field:focus-within {
  border-color: var(--openbot-text-dim);
  background: var(--openbot-bg-surface);
}
.search-field:has(input:focus-visible) {
  box-shadow: var(--openbot-focus-ring);
}
.search-field input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: 18px;
}
.search-field input::placeholder {
  color: var(--openbot-text-muted);
}
.agent-list {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 4px 12px 0;
  scrollbar-width: none;
}
.agent-list::-webkit-scrollbar {
  display: none;
}
.agent-list-content {
  position: relative;
}
.sidebar-list-context-trigger {
  min-height: 76px;
  flex: 1 0 76px;
}
.sidebar-chat-group + .sidebar-chat-group {
  margin-top: 6px;
  transition: margin-top var(--panel-resize-duration, var(--openbot-duration-overlay)) cubic-bezier(0.32, 0.72, 0, 1);
}
.sidebar-section, .sidebar-agent-item, .sidebar-person-item, .sidebar-pinned-item {
  --sidebar-drag-x: 0px;
  --sidebar-drag-y: 0px;
}
.sidebar-drag-shifting {
  will-change: transform;
}
.sidebar-section {
  position: relative;
  border-radius: var(--openbot-radius-md);
  opacity: 1;
  transform: translate3d(var(--sidebar-drag-x), var(--sidebar-drag-y), 0);
  transition-property: background-color, box-shadow, opacity, transform;
  transition-duration: var(--openbot-duration-fast);
  transition-timing-function: ease-out;
}
.sidebar-section-agent-drop-target {
  background: var(--openbot-accent-soft);
  box-shadow: inset 0 0 0 1px var(--openbot-accent-strong);
}
.sidebar-section-drop-before::before, .sidebar-section-drop-after::after {
  position: absolute;
  z-index: 3;
  right: 7px;
  left: 7px;
  height: 2px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent-text);
  box-shadow: 0 0 0 1px var(--openbot-bg-sidebar);
  content: "";
  pointer-events: none;
}
.sidebar-section-drop-before::before {
  top: -4px;
}
.sidebar-section-drop-after::after {
  bottom: -4px;
}
.sidebar-section-dragging {
  opacity: 0;
  transition: none;
  will-change: transform;
}
.sidebar-section-dragging * {
  animation-play-state: paused;
}
.sidebar-chat-group > header {
  display: flex;
  height: 32px;
  overflow: hidden;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  opacity: 1;
  transform: translateY(0);
  transition: height var(--panel-resize-duration, var(--openbot-duration-overlay)) cubic-bezier(0.32, 0.72, 0, 1), opacity var(--openbot-duration-fast) ease, transform var(--openbot-duration-slow) cubic-bezier(0.32, 0.72, 0, 1);
}
.sidebar-section-drag-handle, .sidebar-agent-item .agent-row, .sidebar-person-item .person-row {
  cursor: grab;
  touch-action: pan-y;
}
.agent-list[data-sidebar-dragging], .agent-list[data-sidebar-dragging] .sidebar-section-drag-handle, .agent-list[data-sidebar-dragging] .sidebar-section-toggle, .agent-list[data-sidebar-dragging] .agent-row, .agent-list[data-sidebar-dragging] .person-row {
  cursor: grabbing;
}
.agent-list[data-sidebar-dragging="chat"] .sidebar-section-toggle, .agent-list[data-sidebar-dragging="person"] .sidebar-section-toggle {
  pointer-events: none;
}
.agent-list[data-sidebar-dragging] .sidebar-section-toggle:hover, .agent-list[data-sidebar-dragging] .sidebar-section-toggle:focus-visible {
  background: transparent;
  color: var(--openbot-text-readable);
}
.agent-list[data-sidebar-dragging] .sidebar-section-toggle:hover .sidebar-section-chevron, .agent-list[data-sidebar-dragging] .sidebar-section-toggle:focus-visible .sidebar-section-chevron {
  opacity: 0;
}
.sidebar-section-toggle {
  display: flex;
  width: 100%;
  min-width: 0;
  height: 32px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-radius: var(--openbot-radius-md);
  padding: 0 7px;
  background: transparent;
  color: var(--openbot-text-readable);
  transition-property: color;
  transition-duration: var(--openbot-duration-hover);
  transition-timing-function: ease-out;
}
.sidebar-section-toggle:hover, .sidebar-section-toggle:focus-visible {
  background: transparent;
  color: var(--openbot-text-secondary);
}
.sidebar-section-toggle[aria-expanded="true"] {
  background: transparent;
}
.sidebar-section-toggle:active {
  scale: 0.96;
}
.sidebar-section-name {
  min-width: 0;
  overflow: hidden;
  font-size: var(--openbot-text-sm);
  font-weight: 400;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-section-chevron {
  flex: 0 0 auto;
  opacity: 0;
  transform: rotate(0deg);
  transition: opacity var(--openbot-duration-hover) ease-out, transform var(--openbot-duration-fast) var(--openbot-ease-out);
}
.sidebar-section-toggle:hover .sidebar-section-chevron, .sidebar-section-toggle:focus-visible .sidebar-section-chevron {
  opacity: 1;
}
.sidebar-section-chevron-collapsed {
  transform: rotate(-90deg);
}
.sidebar-section-collapse {
  display: grid;
  opacity: 1;
  grid-template-rows: 1fr;
  transition-property: grid-template-rows, opacity;
  transition-duration: var(--openbot-duration-normal), var(--openbot-duration-fast);
  transition-timing-function: var(--openbot-ease-out), ease-out;
}
.sidebar-section-collapse[data-collapsed] {
  opacity: 0;
  grid-template-rows: 0fr;
}
.sidebar-section-body {
  min-height: 0;
  overflow: hidden;
}
.sidebar-section-editor-wrap {
  position: relative;
  width: 100%;
}
.sidebar-waiting-group {
  border-bottom: 1px solid var(--openbot-border);
  padding-bottom: var(--openbot-space-2);
}
.sidebar-waiting-group-name {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
  margin: 0;
  padding: 0 7px;
  color: var(--openbot-text-readable);
  font-size: var(--openbot-text-sm);
  font-weight: 400;
  line-height: 16px;
  white-space: nowrap;
}
.sidebar-waiting-group-count {
  display: inline-grid;
  min-width: 16px;
  height: 16px;
  place-items: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-warning);
  padding: 0 4px;
  color: var(--openbot-bg-sidebar);
  font-size: var(--openbot-text-sm);
  font-weight: 650;
}
.sidebar-hidden-group-count {
  margin-inline-start: var(--openbot-space-1);
  font-variant-numeric: tabular-nums;
}
.sidebar-chat-group > .sidebar-section-editor-wrap {
  height: 36px;
}
.sidebar-section-editor {
  width: 100%;
  height: 36px;
  border-color: var(--openbot-border-focus);
  border-radius: var(--openbot-radius-md);
  padding: 0 32px 0 8px;
  background: var(--openbot-bg-control);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
}
.sidebar-section-editor[aria-invalid="true"] {
  border-color: var(--openbot-danger);
}
.sidebar-section-editor-chevron {
  position: absolute;
  top: 50%;
  right: 9px;
  color: var(--openbot-text-muted);
  pointer-events: none;
  transform: translateY(-50%);
}
.sidebar-section-draft {
  min-height: 36px;
}
.sidebar-agent-drag-preview, .sidebar-person-drag-preview, .sidebar-section-drag-preview {
  position: fixed;
  z-index: var(--openbot-layer-dropdown);
  box-sizing: border-box;
  margin: 0;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface-raised);
  box-shadow: var(--openbot-shadow-raised);
  opacity: 0.96;
  pointer-events: none;
  transform: none;
  transition: none;
}
.sidebar-agent-drag-preview *, .sidebar-person-drag-preview *, .sidebar-section-drag-preview * {
  animation: none;
  transition: none;
}
.sidebar-section-drag-preview.sidebar-section-toggle {
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-secondary);
}
.agent-row.sidebar-agent-drag-preview {
  background: var(--openbot-bg-surface-raised);
  transition: none;
}
.agent-row.sidebar-person-drag-preview {
  background: var(--openbot-bg-surface-raised);
  transition: none;
}
.agent-row.sidebar-agent-drag-preview *, .agent-row.sidebar-person-drag-preview * {
  animation: none;
  transition: none;
}
.sidebar-agent-item {
  position: relative;
  transform: translate3d(var(--sidebar-drag-x), var(--sidebar-drag-y), 0);
  transition: transform var(--openbot-duration-fast) var(--openbot-ease-out);
}
.sidebar-agent-item + .sidebar-agent-item {
  margin-top: 4px;
}
.sidebar-agent-item-dragging {
  will-change: transform;
}
.agent-list[data-sidebar-dragging="chat"] .sidebar-agent-item {
  transition: none;
  will-change: transform;
}
.agent-list[data-sidebar-dragging="person"] .sidebar-person-item {
  will-change: transform;
}
.sidebar-agent-item-dragging {
  z-index: 1;
  opacity: 0;
  transition: none;
}
.sidebar-person-item-dragging {
  pointer-events: none;
}
.sidebar-agent-row-dragging * {
  animation-play-state: paused;
}
.sidebar-agent-row-dragging {
  opacity: 0;
  transition: none;
}
.sidebar-person-item {
  position: relative;
  transform: translate3d(var(--sidebar-drag-x), var(--sidebar-drag-y), 0);
  transition: transform var(--openbot-duration-fast) var(--openbot-ease-out);
}
.sidebar-person-item + .sidebar-person-item {
  margin-top: 4px;
}
.sidebar-person-item-dragging {
  will-change: transform;
}
.sidebar-person-item-dragging .person-row * {
  animation-play-state: paused;
}
.sidebar-person-item-dragging .person-row {
  opacity: 0;
  transition: none;
}
.sidebar-pinned-group-agent-drop-target {
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-accent-soft);
  box-shadow: inset 0 0 0 1px var(--openbot-accent-strong);
}
.sidebar-pinned-group.sidebar-pinned-group-empty-target {
  display: grid;
  z-index: 4;
  width: 100%;
  grid-template-rows: 1fr;
  padding: 0;
  opacity: 1;
}
.sidebar-pinned-group-empty-target .sidebar-pinned-list {
  width: 100%;
  min-height: 0;
  padding: 4px 0 2px;
  overflow: hidden;
}
.sidebar-pinned-empty-drop {
  display: flex;
  width: 100%;
  height: 104px;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--openbot-border-strong);
  border-radius: var(--openbot-radius-lg);
  background: transparent;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 20px;
  list-style: none;
  transition: border-color var(--openbot-duration-fast) ease-out, background-color var(--openbot-duration-fast) ease-out, color var(--openbot-duration-fast) ease-out;
}
.sidebar-pinned-group-empty-target.sidebar-pinned-group-agent-drop-target {
  background: transparent;
  box-shadow: none;
}
.sidebar-pinned-group-empty-target.sidebar-pinned-group-agent-drop-target .sidebar-pinned-empty-drop {
  border-color: var(--openbot-accent-strong);
  background: var(--openbot-accent-soft);
  color: var(--openbot-text-primary);
}
.sidebar-pinned-group {
  padding: 4px 0 2px;
}
.sidebar-pinned-list {
  box-sizing: border-box;
  display: flex;
  width: min(236px, 100%);
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: center;
  margin: 0 auto;
  gap: 8px;
  list-style: none;
  padding: 2px;
}
.sidebar-pinned-item {
  position: relative;
  width: 72px;
  flex: 0 0 72px;
  opacity: 1;
  transform: translate3d(var(--sidebar-drag-x), var(--sidebar-drag-y), 0);
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.agent-row.sidebar-pinned-row {
  width: 72px;
  height: 94px;
  min-height: 94px;
  flex-direction: column;
  justify-content: flex-start;
  gap: 4px;
  padding: 4px 2px;
  cursor: grab;
  text-align: center;
}
.sidebar-pinned-row:active {
  transform: scale(0.96);
}
.agent-row.sidebar-pinned-row .sidebar-pinned-avatar {
  width: 48px;
  height: 48px;
  flex-basis: 48px;
}
.agent-row.sidebar-pinned-row .agent-avatar, .agent-row.sidebar-pinned-row.person-row .person-avatar {
  width: 48px;
  height: 48px;
}
.sidebar-pinned-copy {
  display: flex;
  width: 100%;
  min-height: 34px;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
}
.sidebar-pinned-name {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: 450;
  line-height: 16px;
  text-align: center;
  text-overflow: ellipsis;
  text-wrap: pretty;
  white-space: nowrap;
}
.sidebar-pinned-title {
  box-sizing: border-box;
  max-width: 100%;
  height: 18px;
  min-height: 18px;
  flex: 0 0 16px;
  border-color: var(--openbot-border);
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-hover);
  padding: 0 var(--openbot-space-1);
  color: var(--openbot-text-readable);
  font-weight: 400;
}
.sidebar-pinned-title > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-pinned-item-dragging {
  z-index: 1;
  opacity: 0;
}
.sidebar-pinned-list[data-dragging], .sidebar-pinned-item-dragging .sidebar-pinned-row {
  cursor: grabbing;
}
.sidebar-pinned-list[data-dragging] .sidebar-pinned-item {
  will-change: transform;
}
.sidebar-pinned-drag-preview {
  position: fixed;
  z-index: var(--openbot-layer-dropdown);
  box-sizing: border-box;
  margin: 0;
  list-style: none;
  opacity: 0.96;
  pointer-events: none;
  transform: none;
  transition: none;
}
.person-avatar {
  position: relative;
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--openbot-radius-md);
  color: var(--openbot-success);
  font-size: var(--openbot-text-sm);
  font-weight: 680;
  letter-spacing: 0.02em;
}
.person-avatar > img, .person-avatar > .person-avatar-generated {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.person-avatar > img {
  object-fit: cover;
}
.person-avatar > i {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--openbot-bg-sidebar);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control-hover);
}
.person-avatar.online > i {
  background: var(--openbot-success);
}
.person-avatar.large {
  width: 48px;
  height: 48px;
  border-radius: var(--openbot-radius-lg);
  font-size: var(--openbot-text-md);
}
.person-row .person-avatar {
  width: 34px;
  height: 34px;
}
.person-unread-badge {
  position: absolute;
  z-index: 2;
  right: -4px;
  bottom: -3px;
  display: grid;
  min-width: 17px;
  height: 17px;
  place-items: center;
  border: 2px solid var(--openbot-bg-sidebar);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-primary);
  padding: 0 3px;
  color: var(--openbot-bg-sidebar);
  font-size: var(--openbot-text-sm);
  font-weight: 680;
}
.agent-row {
  display: flex;
  width: 100%;
  height: 54px;
  min-height: 54px;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  padding: 8px;
  color: inherit;
  text-align: left;
  transition: background-color var(--openbot-duration-hover) ease, border-color var(--openbot-duration-hover) ease, transform var(--openbot-duration-normal) ease;
}
.agent-row + .agent-row {
  margin-top: 4px;
}
.agent-row:hover {
  background: var(--openbot-hover);
}
.agent-row:active {
  transform: scale(0.99);
}
.agent-row-active {
  background: var(--openbot-bg-surface);
}
.agent-row-avatar {
  position: relative;
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  transform: translateX(0);
  transition: transform var(--panel-resize-duration, var(--openbot-duration-overlay)) cubic-bezier(0.32, 0.72, 0, 1);
}
.sidebar-agent-item-user-hidden .agent-row-avatar {
  opacity: 0.5;
  filter: grayscale(1);
}
.agent-row-agent-status {
  position: absolute;
  z-index: 1;
  right: -5px;
  bottom: -3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--openbot-bg-sidebar);
  box-shadow: 0 1px 3px var(--openbot-shadow-popover-ambient);
  pointer-events: none;
}
.agent-row-active .agent-row-agent-status {
  border-color: var(--openbot-bg-control);
}
.agent-row-agent-status-working {
  width: 24px;
  height: 16px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-secondary);
}
.agent-row-thinking-dots {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.agent-row-thinking-dots i {
  width: 3px;
  height: 3px;
  border-radius: var(--openbot-radius-pill);
  background: currentColor;
  --typing-dot-travel: -1px;
  animation: typing-dot-pulse 900ms ease-in-out infinite;
}
.agent-row-thinking-dots i:nth-child(2) {
  animation-delay: var(--openbot-duration-fast);
}
.agent-row-thinking-dots i:nth-child(3) {
  animation-delay: var(--openbot-duration-overlay);
}
.agent-row-agent-status-responded {
  width: 16px;
  height: 16px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success);
  color: var(--openbot-success);
}
.agent-row-agent-status-responded svg {
  width: 10px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--openbot-icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.agent-row-agent-status-unread {
  min-width: 16px;
  height: 16px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-primary);
  padding: 0 3px;
  color: var(--openbot-bg-sidebar);
  font-size: var(--openbot-text-sm);
  font-weight: 650;
  line-height: 12px;
}
.agent-row-agent-status-routine, .agent-row-agent-status-limited {
  width: 16px;
  height: 16px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-secondary);
}
.agent-row-agent-status-routine svg, .agent-row-agent-status-limited svg {
  width: 10px;
  height: 10px;
}
.agent-row-agent-status-routine-failed {
  color: var(--openbot-danger);
}
.agent-row-agent-status-waiting {
  width: 18px;
  height: 18px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-warning);
  color: var(--openbot-bg-sidebar);
}
.agent-row-agent-status-waiting svg {
  width: 11px;
  height: 11px;
}
.agent-row-wait-chip {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 3px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-warning-soft);
  padding: 1px 7px 1px 5px;
  color: var(--openbot-warning-text);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  line-height: 16px;
  white-space: nowrap;
}
.agent-row-wait-chip svg {
  width: 11px;
  height: 11px;
}
.sidebar-agent-tooltip-trigger {
  display: block;
}
.sidebar-wait-tooltip {
  z-index: var(--openbot-layer-tooltip);
  display: grid;
  max-width: min(260px, calc(100vw - 16px));
  gap: 2px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-surface-raised);
  box-shadow: var(--openbot-shadow-raised);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  pointer-events: none;
}
.sidebar-wait-tooltip-title {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  color: var(--openbot-warning-text);
  font-weight: var(--openbot-weight-semibold);
}
.sidebar-wait-tooltip-title svg {
  width: 14px;
  height: 14px;
}
.sidebar-wait-tooltip-detail {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow-wrap: anywhere;
}
.sidebar-wait-tooltip-hint {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.agent-row-agent-status-entering {
  animation: sidebar-reply-in var(--openbot-duration-overlay) cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes typing-dot-pulse {
  0%, 60%, 100% {
    opacity: 0.34;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(var(--typing-dot-travel, -2px));
  }
}
@keyframes sidebar-reply-in {
  from {
    opacity: 0;
    transform: scale(0.55);
  }
}
.agent-context-submenu-chevron {
  margin-left: auto;
  color: var(--openbot-text-muted);
}
.agent-context-submenu {
  max-height: min(520px, calc(100vh - 16px));
  overflow-y: auto;
}
@keyframes agent-context-in {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(-3px);
  }
}
.agent-avatar {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  color: currentColor;
  overflow: visible;
}
.agent-avatar > svg {
  display: block;
  width: 128%;
  height: 128%;
  overflow: visible;
  translate: var(--agent-avatar-optical-offset-x, 0) var(--agent-avatar-optical-offset, 0);
}
.agent-avatar-custom {
  overflow: hidden;
  background: var(--openbot-hover);
  box-shadow: inset 0 0 0 1px var(--openbot-border);
}
.agent-avatar-custom > img, .composer-mention-avatar > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.agent-avatar[data-avatar="image"]:is([data-mood="working"], [data-mood="connecting"]) {
  position: relative;
  overflow: visible;
}
.agent-avatar[data-avatar="image"]:is([data-mood="working"], [data-mood="connecting"]) > img {
  border-radius: var(--openbot-radius-pill);
}
.agent-avatar[data-breathe] {
  animation: agent-avatar-breathe 2.6s ease-in-out infinite;
}
@keyframes agent-avatar-breathe {
  0%, 100% {
    scale: calc(1 - var(--agent-avatar-breathe, 0));
  }
  50% {
    scale: calc(1 + var(--agent-avatar-breathe, 0));
  }
}
.agent-avatar[data-mood="waiting"] {
  filter: drop-shadow(0 0 3px var(--openbot-accent));
}
.agent-avatar[data-mood="failed"] {
  filter: drop-shadow(0 0 3px var(--openbot-danger));
}
.agent-avatar[data-mood="asleep"] {
  opacity: 0.6;
}
@media (prefers-reduced-motion: reduce) {
  .agent-avatar[data-breathe] {
    animation: none;
  }
}
.agent-avatar > .agent-avatar-arcs {
  position: absolute;
  inset: -29%;
  width: auto;
  height: auto;
  overflow: visible;
  translate: none;
}
.agent-row .agent-avatar {
  --agent-avatar-optical-offset: -4px;
  width: 36px;
  height: 36px;
}
.person-row .person-avatar {
  width: 36px;
  height: 36px;
}
.avatar-editor {
  position: relative;
  z-index: var(--openbot-layer-popover);
  width: min(284px, calc(var(--settings-panel-width, 296px) - 30px));
  max-width: calc(100vw - 24px);
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-overlay);
  box-shadow: 0 22px 60px var(--openbot-bg-overlay), 0 3px 12px var(--openbot-shadow-popover-ambient), inset 0 1px var(--openbot-hover);
  backdrop-filter: blur(18px);
  transform-origin: var(--kb-popover-content-transform-origin);
  animation: avatar-editor-in var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1) both;
}
@keyframes avatar-editor-in {
  from {
    opacity: 0;
    transform: translateY(-5px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.avatar-editor-divider {
  height: 1px;
  background: var(--openbot-border);
}
.avatar-editor-heading {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px 3px 13px;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: 590;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.avatar-editor-heading > span {
  white-space: nowrap;
}
.avatar-editor-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}
.avatar-editor-actions button {
  min-height: 40px;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  padding: 0 9px;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: 540;
  transition-property: scale, background-color, color;
  transition-duration: var(--openbot-duration-normal), var(--openbot-duration-hover), var(--openbot-duration-hover);
  transition-timing-function: ease-out;
}
.avatar-editor-actions .ui-icon-button {
  width: var(--openbot-control-xl);
  padding: 0;
}
.avatar-editor-actions button:hover {
  background: var(--openbot-hover);
  color: var(--openbot-text-primary);
}
.avatar-editor-actions button:disabled, .avatar-image-upload:disabled {
  cursor: wait;
  opacity: 0.58;
}
.avatar-image-upload {
  display: grid;
  width: calc(100% - 20px);
  min-height: 64px;
  align-items: center;
  margin: 4px 10px 12px;
  border: 1px dashed var(--openbot-border-strong);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-hover);
  padding: 9px;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 11px;
  color: var(--openbot-text-primary);
  text-align: left;
  transition: border-color var(--openbot-duration-hover) ease, background-color var(--openbot-duration-hover) ease, transform var(--openbot-duration-normal) ease;
}
.avatar-image-upload:hover:not(:disabled) {
  border-color: var(--openbot-success);
  background: var(--openbot-success-soft);
}
.avatar-image-upload:active:not(:disabled) {
  transform: scale(0.985);
}
.avatar-image-upload-active {
  border-style: solid;
  border-color: var(--openbot-border-strong);
}
.avatar-image-upload-preview {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  overflow: hidden;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-hover);
  color: var(--openbot-text-muted);
}
.avatar-image-upload-preview > svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: var(--openbot-icon-stroke);
}
.avatar-image-upload-preview .agent-avatar {
  width: 42px;
  height: 42px;
}
.avatar-image-upload strong, .avatar-image-upload small {
  display: block;
  white-space: normal;
  text-wrap: pretty;
}
.avatar-image-upload strong {
  margin-bottom: 3px;
  font-size: var(--openbot-text-sm);
  font-weight: 580;
}
.avatar-image-upload small {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 14px;
}
.avatar-editor-actions button:active, .avatar-face-choice:active, .avatar-color-choice:active {
  scale: 0.96;
}
.avatar-face-grid {
  display: grid;
  min-width: 0;
  margin: 0;
  border: 0;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 7px 10px 12px;
}
.avatar-face-choice, .avatar-color-choice {
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  color: var(--openbot-text-secondary);
  transition-property: scale, background-color, box-shadow;
  transition-duration: var(--openbot-duration-normal), var(--openbot-duration-hover), var(--openbot-duration-hover);
  transition-timing-function: ease-out;
}
.avatar-face-choice {
  width: 100%;
  height: 48px;
}
.avatar-face-choice:hover, .avatar-color-choice:hover {
  background: var(--openbot-hover);
}
.avatar-choice-selected {
  background: var(--openbot-border);
  box-shadow: inset 0 0 0 1px var(--openbot-text-muted), 0 1px 3px var(--openbot-shadow-popover-ambient);
}
.avatar-face-choice .agent-avatar {
  width: 34px;
  height: 34px;
}
.avatar-color-grid {
  display: grid;
  min-width: 0;
  margin: 0;
  border: 0;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 5px;
  padding: 4px 10px 12px;
}
.avatar-color-choice {
  width: 100%;
  height: 40px;
}
.avatar-color-swatch {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: var(--openbot-radius-pill);
  box-shadow: inset 0 0 0 1px var(--openbot-border-strong);
}
.avatar-color-swatch-auto {
  display: grid;
  place-items: center;
  border: 1px dashed var(--openbot-text-muted);
  background: transparent;
  box-shadow: none;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: 650;
}
.conversation-title .agent-avatar {
  --agent-avatar-optical-offset: -2px;
  width: 18px;
  height: 18px;
}
.agent-row-copy {
  min-width: 0;
  flex: 1;
  opacity: 1;
  transform: translateX(0);
  transition: opacity var(--openbot-duration-fast) ease, transform var(--openbot-duration-slow) cubic-bezier(0.32, 0.72, 0, 1);
}
.agent-row-heading {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.agent-row-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  overflow: hidden;
}
.agent-row-title:has(.agent-role-badge) {
  --agent-role-badge-collapsed-width: calc(2ch + 9px);
  display: grid;
  grid-template-columns: fit-content(calc(100% - var(--agent-role-badge-collapsed-width) - 5px)) minmax(var(--agent-role-badge-collapsed-width), 1fr);
}
.agent-row-name {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 3px;
  overflow: hidden;
}
.agent-row-access {
  display: inline-flex;
  flex: none;
  color: var(--openbot-text-muted);
}
.agent-row-access svg {
  width: 12px;
  height: 12px;
}
.agent-row-title strong, .person-row .agent-row-heading strong, .channel-row .agent-row-heading strong {
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  line-height: 20px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-role-badge {
  min-width: 0;
  max-width: 100%;
  height: 18px;
  min-height: 18px;
  overflow: hidden;
  flex: 0 1 auto;
  justify-self: start;
  border: 0.5px solid var(--openbot-border);
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-hover);
  padding: 2px 4px;
  color: var(--openbot-text-readable);
  font-size: var(--openbot-text-sm);
  font-weight: 400;
  line-height: 16px;
  white-space: nowrap;
}
.agent-role-badge > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-row-time, .person-row .agent-row-heading > span, .channel-row .agent-row-time {
  min-width: 0;
  flex: 0 0 auto;
  color: var(--openbot-text-readable);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
  white-space: nowrap;
}
@container (max-width: 210px) {
  .agent-row-time, .person-row .agent-row-heading > span, .channel-row .agent-row-time {
    display: none;
  }
}
.agent-row-preview {
  display: block;
  margin-top: 0;
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar:not(.sidebar-compact) .agent-row {
  width: calc(100% + var(--openbot-space-2));
  margin-inline: calc(var(--openbot-space-1) * -1);
}
.sidebar:not(.sidebar-compact) .sidebar-section-body .agent-row {
  width: 100%;
  margin-inline: 0;
}
.sidebar:not(.sidebar-compact) .sidebar-waiting-group .agent-row {
  width: 100%;
  margin-inline: 0;
}
.sidebar-waiting-group .sidebar-agent-item .agent-row {
  cursor: default;
}
.sidebar:not(.sidebar-compact) .sidebar-pinned-row.agent-row {
  width: 72px;
  margin-inline: 0;
}
.empty-search {
  margin: 32px 0;
  color: var(--openbot-text-readable);
  font-size: var(--openbot-text-md);
  text-align: center;
}
.sidebar-first-agent-state {
  display: flex;
  min-height: 100%;
  flex-direction: column;
}
.ui-button.sidebar-first-agent-action {
  flex: 0 0 auto;
}
.account-usage-popover {
  position: relative;
  z-index: var(--openbot-layer-tooltip);
  display: grid;
  width: min(300px, calc(100vw - var(--openbot-space-4)));
  max-height: min(60vh, 420px);
  overflow: auto;
  padding: var(--openbot-space-2);
  gap: var(--openbot-space-2);
  opacity: 1;
  transform: translateY(0) scale(1);
  transform-origin: var(--kb-popover-content-transform-origin);
  transition: opacity var(--openbot-duration-fast) ease, transform var(--openbot-duration-fast) var(--openbot-ease-out);
  @starting-style {
    opacity: 0;
    transform: translateY(4px) scale(0.98);
  }
}
.account-usage-popover-header, .account-usage-popover-heading {
  display: flex;
  align-items: center;
}
.account-usage-popover-header {
  justify-content: space-between;
}
.account-usage-popover-heading {
  min-width: 0;
  padding-inline-start: var(--openbot-space-1);
  gap: var(--openbot-space-2);
}
.account-usage-popover-heading > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  color: var(--openbot-text-primary);
  stroke-width: var(--openbot-icon-stroke);
}
.account-usage-popover-title {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-md);
}
.account-usage-providers {
  display: grid;
  margin: 0;
  padding: 0;
  grid-template-columns: auto max-content minmax(0, 1fr) max-content max-content;
  column-gap: var(--openbot-space-2);
  row-gap: var(--openbot-space-1);
  list-style: none;
}
.account-usage-provider {
  display: grid;
  min-width: 0;
  align-items: center;
  border-radius: var(--openbot-radius-md);
  padding: var(--openbot-space-1);
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  row-gap: var(--openbot-space-1);
}
.account-usage-provider > .account-usage-provider-name {
  grid-column: 2 / -1;
}
.account-usage-provider-logo {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  overflow: visible;
  fill: var(--openbot-provider-current);
}
.account-usage-provider-copy {
  display: grid;
  min-width: 0;
  grid-column: 2 / 4;
}
.account-usage-provider-name {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-usage-provider-meta {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-usage-provider-remaining {
  grid-column: 4 / -1;
  justify-self: end;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: var(--openbot-leading-sm);
  white-space: nowrap;
}
.account-usage-windows, .account-usage-window {
  display: grid;
  min-width: 0;
  grid-template-columns: subgrid;
}
.account-usage-windows {
  grid-column: 2 / -1;
  row-gap: var(--openbot-space-1);
}
.account-usage-window {
  --account-usage-window-tone: var(--openbot-text-secondary);
  align-items: center;
  grid-column: 1 / -1;
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.account-usage-window[data-usage-tone="warning"] {
  --account-usage-window-tone: var(--openbot-warning);
}
.account-usage-window[data-usage-tone="critical"] {
  --account-usage-window-tone: var(--openbot-danger);
}
.account-usage-window-label, .account-usage-window-reset {
  color: var(--openbot-text-muted);
  white-space: nowrap;
}
.account-usage-window-reset {
  text-align: right;
}
.account-usage-window-bar {
  display: block;
  height: 4px;
  overflow: hidden;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-border);
}
.account-usage-window-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--account-usage-window-tone);
}
.account-usage-window-remaining {
  color: var(--openbot-text-primary);
  font-variant-numeric: tabular-nums;
  font-weight: var(--openbot-weight-semibold);
  text-align: right;
}
.account-usage-window:not([data-usage-tone="neutral"]) .account-usage-window-remaining {
  color: var(--account-usage-window-tone);
}
.account-usage-empty {
  margin: 0;
  padding: var(--openbot-space-2) var(--openbot-space-1);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.account-usage-refresh.ui-button {
  position: relative;
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-md);
  color: var(--openbot-text-muted);
}
.account-usage-refresh.ui-button::before {
  position: absolute;
  inset: calc(0px - var(--openbot-space-1));
  content: "";
}
.account-usage-refresh > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: var(--openbot-icon-stroke);
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.account-usage-refresh > svg.icon-spinning {
  animation-duration: 600ms;
}
.account-usage-popover-error {
  margin: 0;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-danger-soft);
  padding: var(--openbot-space-2);
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.sidebar-compact .sidebar-topbar {
  padding-inline: 12px;
}
.sidebar-compact .sidebar-server-name {
  opacity: 0;
  pointer-events: none;
}
.sidebar-compact .sidebar-new-button {
  opacity: 0;
  pointer-events: none;
  transform: translateX(6px) scale(0.92);
}
.sidebar-compact .sidebar-toggle-button {
  transform: translateX(13px);
}
.sidebar-compact .sidebar-toggle-button:active {
  transform: translateX(13px) scale(0.96);
}
.sidebar-compact .sidebar-search-wrap {
  padding-inline: 12px;
}
.sidebar-compact .search-field {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-8px);
}
.sidebar-compact .sidebar-compact-search {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1);
  transition-delay: 55ms;
}
.sidebar-compact .agent-list {
  padding-inline: 12px;
}
.sidebar-compact .sidebar-chat-group {
  position: relative;
}
.sidebar-compact .sidebar-chat-group + .sidebar-chat-group {
  margin-top: 4px;
}
.sidebar-compact .sidebar-chat-group > header {
  height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  white-space: nowrap;
}
.sidebar-compact .agent-row {
  padding-inline: 8px;
}
.sidebar-compact .agent-row-avatar {
  transform: translateX(6px);
}
.sidebar-compact .agent-row.sidebar-pinned-row {
  width: 60px;
  height: 60px;
  min-height: 60px;
  padding: 6px;
}
.sidebar-compact .sidebar-pinned-item {
  width: 60px;
  flex-basis: 60px;
}
.sidebar-compact .agent-row.sidebar-pinned-row .sidebar-pinned-avatar {
  transform: none;
}
.sidebar-compact .sidebar-pinned-copy {
  display: none;
}
.sidebar-compact .agent-row-copy {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-8px);
}
.agent-tasks-row {
  display: grid;
  width: 100%;
  height: var(--openbot-control-md);
  align-items: center;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  padding: 0 var(--openbot-space-2);
  grid-template-columns: 16px minmax(0, 1fr) auto;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  letter-spacing: -0.01em;
  text-align: left;
  transition: background-color var(--openbot-duration-hover) ease;
}
.agent-tasks-row:hover:not(:disabled) {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}
.agent-tasks-row:disabled {
  cursor: default;
  opacity: 0.45;
}
.agent-tasks-row:focus-visible {
  outline: 0;
  background: var(--openbot-bg-control-hover);
  box-shadow: inset 0 0 0 1px var(--openbot-border-strong);
}
.agent-tasks-row small {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.agent-tasks-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--openbot-icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--openbot-text-primary);
}
.icon-spinning {
  animation: account-update-spin 800ms linear infinite;
}
@keyframes account-update-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .server-rail-mark, .server-rail-server-item, .sidebar-section, .sidebar-pinned-item {
    transition: none;
  }
  .sidebar-section-chevron, .sidebar-section-collapse, .sidebar-section-toggle, .sidebar-pinned-group-empty-target, .sidebar-pinned-empty-drop {
    transition: none;
  }
  .account-usage-popover {
    transform: none;
    transition: opacity var(--openbot-duration-fast) ease;
    @starting-style {
      opacity: 0;
      transform: none;
    }
  }
  .account-usage-refresh > svg {
    transition: none;
  }
  .account-usage-refresh:hover:not(:disabled) > svg {
    transform: none;
  }
  .icon-spinning {
    animation-duration: 1.6s;
  }
}
.server-rail, .sidebar {
  background: var(--openbot-bg-sidebar);
}
.server-rail-monogram, .server-rail-action .server-rail-monogram {
  border-color: var(--openbot-border);
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-secondary);
}
.person-avatar.online > i {
  background: var(--openbot-success);
}
.sidebar-icon-button:hover, .header-panel-toggle:hover, .browser-toolbar-button:hover:not(:disabled), .message-action-button:hover, .message-action-button:focus-visible, .message-action-button[aria-expanded="true"], .reaction-picker-row button:hover, .reaction-picker-row button:focus-visible, .reaction-picker-row button[aria-checked="true"], .composer-button:hover, .composer-attachment > button:hover, .agent-tasks-row:hover, .agent-context-menu button:hover, .agent-context-menu button:focus-visible {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}
.sidebar-icon-button:active, .header-panel-toggle:active, .agent-row:active, .composer-button:active, .voice-button:active, .settings-panel-nav-button:active {
  transform: scale(0.97);
}
.agent-row:hover {
  background: var(--openbot-bg-control);
}
.agent-list[data-sidebar-dragging] .agent-row:hover {
  background: transparent;
}
.agent-list[data-sidebar-dragging] .agent-row.agent-row-active, .agent-list[data-sidebar-dragging] .agent-row.agent-row-active:hover {
  background: var(--openbot-bg-surface);
}
.settings-panel-content {
  color: var(--openbot-text-primary);
}
.agent-settings-notifications, .provider-model-panel, .provider-model-rail, .avatar-editor {
  border-color: var(--openbot-border);
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-primary);
}
.choice-key, .composer-mention-token, .remote-desktop-empty-mark {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-secondary);
}
.server-rail-muted {
  position: absolute;
  right: 0;
  bottom: 0;
  color: var(--openbot-text-secondary);
  background: var(--openbot-bg-sidebar);
  border-radius: var(--openbot-radius-sm);
}
@keyframes server-sleep-waking {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}
@media (prefers-reduced-motion: reduce) {
  .server-menu-sleep[data-state="waking"], .sidebar-server-name > .sidebar-server-name-sleep[data-state="waking"] {
    animation: none;
  }
}
.ui-action-menu:not([data-menu-layout="grid"]) .server-rail-menu-detail-item {
  height: auto;
}
.server-rail-menu-label {
  display: flex;
  flex-direction: column;
}
.server-rail-menu-detail {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.sidebar-view-switch {
  padding: 2px 12px 6px;
}
.sidebar-view-tabs.ui-sliding-tabs {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sidebar-view-tab.ui-sliding-tabs-trigger {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-1);
  overflow: hidden;
  padding-inline: var(--openbot-space-1);
  font-size: var(--openbot-text-sm);
  white-space: nowrap;
}
.sidebar-view-tab svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: none;
}
.account-update-island {
  --panel-open-dur: calc(var(--openbot-duration-slow) + var(--openbot-duration-slow));
  --panel-close-dur: calc(var(--openbot-duration-slow) + var(--openbot-duration-normal));
  --panel-translate-y: calc(100% - var(--openbot-space-3));
  --panel-blur: var(--openbot-space-0-5);
  --panel-ease: var(--openbot-ease-out);
  --text-swap-dur: var(--openbot-duration-normal);
  --text-swap-translate-y: var(--openbot-space-1);
  --text-swap-blur: var(--openbot-space-0-5);
  --text-swap-ease: var(--openbot-ease-in-out);
  --digit-dur: var(--openbot-duration-slow);
  --digit-distance: var(--openbot-space-1);
  --digit-stagger: calc(var(--openbot-duration-fast) - var(--openbot-duration-dialog));
  --digit-blur: var(--openbot-space-0-5);
  --digit-ease: var(--openbot-ease-out);
  --digit-dir-x: 0;
  --digit-dir-y: 1;
  position: absolute;
  z-index: 0;
  right: var(--openbot-space-4);
  bottom: var(--openbot-control-xl);
  left: var(--openbot-space-4);
  display: grid;
  min-height: calc(var(--openbot-control-xl) + var(--openbot-radius-card));
  align-items: center;
  border: 0;
  border-radius: var(--openbot-radius-lg) var(--openbot-radius-lg) var(--openbot-radius-md) var(--openbot-radius-md);
  background: var(--openbot-accent-strong);
  box-shadow: 0 0 0 1px var(--openbot-accent-soft);
  -webkit-backdrop-filter: blur(var(--openbot-space-3));
  backdrop-filter: blur(var(--openbot-space-3));
  padding: calc(var(--openbot-space-1) + 1px) var(--openbot-space-1-5) calc(var(--openbot-space-4) + var(--openbot-space-1) - 1px);
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--openbot-space-2);
  color: var(--openbot-accent-text);
  -webkit-font-smoothing: antialiased;
}
.account-update-island.t-panel-slide {
  transform: translateY(var(--panel-translate-y));
  opacity: 0;
  filter: blur(var(--panel-blur));
  pointer-events: none;
  transition: transform var(--panel-close-dur) var(--panel-ease), opacity var(--panel-close-dur) var(--panel-ease), filter var(--panel-close-dur) var(--panel-ease);
  will-change: transform, opacity, filter;
}
.account-update-island.t-panel-slide[data-open="true"] {
  transform: translateY(0);
  opacity: 1;
  filter: blur(0);
  pointer-events: auto;
  transition: transform var(--panel-open-dur) var(--panel-ease), opacity var(--panel-open-dur) var(--panel-ease), filter var(--panel-open-dur) var(--panel-ease);
}
@starting-style {
  .account-update-island.t-panel-slide[data-open="true"] {
    transform: translateY(var(--panel-translate-y));
    opacity: 0;
    filter: blur(var(--panel-blur));
  }
}
.account-update-island__copy {
  min-width: 0;
}
.account-update-island__copy strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--openbot-accent-text);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-sm);
  white-space: nowrap;
}
.account-update-island .t-update-text-swap {
  display: inline-grid;
}
.account-update-island .t-update-text-swap > [data-text] {
  grid-area: 1 / 1;
  transform: translateY(0);
  opacity: 1;
  filter: blur(0);
  transition: transform var(--text-swap-dur) var(--text-swap-ease), filter var(--text-swap-dur) var(--text-swap-ease), opacity var(--text-swap-dur) var(--text-swap-ease);
  will-change: transform, filter, opacity;
}
.account-update-island .t-update-text-swap:is([data-state="available"], [data-state="action"]) > [data-text]:is([data-text="ready"], [data-text="progress"], [data-text="error"]) {
  transform: translateY(var(--text-swap-translate-y));
  opacity: 0;
  filter: blur(var(--text-swap-blur));
}
.account-update-island .t-update-text-swap:is([data-state="ready"], [data-state="progress"]) > [data-text]:is([data-text="available"], [data-text="action"], [data-text="error"]) {
  transform: translateY(calc(var(--text-swap-translate-y) * -1));
  opacity: 0;
  filter: blur(var(--text-swap-blur));
}
.account-update-island .t-update-text-swap[data-state="error"] > [data-text]:not([data-text="error"]) {
  transform: translateY(calc(var(--text-swap-translate-y) * -1));
  opacity: 0;
  filter: blur(var(--text-swap-blur));
}
.account-update-island__action-shell {
  position: relative;
  display: grid;
  min-width: calc( var(--openbot-control-xl) + var(--openbot-control-xl) + var(--openbot-space-6) + var(--openbot-space-1) );
  flex-shrink: 0;
}
.account-update-island__action.ui-button {
  width: 100%;
  height: var(--openbot-control-sm);
  min-height: var(--openbot-control-sm);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-surface-light);
  box-shadow: 0 1px 2px var(--openbot-shadow-popover-ambient);
  padding: 0 var(--openbot-space-3) 0 var(--openbot-space-2);
  color: var(--openbot-text-on-light);
  transition: box-shadow var(--openbot-duration-normal) var(--openbot-ease-out), transform var(--openbot-duration-fast) var(--openbot-ease-out);
}
.account-update-island__action.ui-button::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% + var(--openbot-space-4));
  min-width: var(--openbot-control-xl);
  height: var(--openbot-control-xl);
  transform: translate(-50%, -50%);
  content: "";
}
.account-update-island__action.ui-button:disabled {
  cursor: progress;
  opacity: 1;
}
.account-update-island__action-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-1-5);
}
.account-update-island__action-label {
  min-width: calc(var(--openbot-control-xl) + var(--openbot-space-3));
  color: var(--openbot-text-on-light);
  font-weight: var(--openbot-weight-semibold);
  text-align: left;
}
.account-update-island__progress-value {
  display: inline-grid;
  align-items: baseline;
  grid-template-columns: 3ch max-content;
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.account-update-island__progress-digits {
  display: inline-flex;
  justify-content: flex-end;
}
.account-update-island__progress-suffix, .account-update-island__busy-label {
  display: inline-block;
}
@keyframes account-update-digit-pop-in {
  0% {
    transform: translate( calc(var(--digit-distance) * var(--digit-dir-x)), calc(var(--digit-distance) * var(--digit-dir-y)) );
    opacity: 0.4;
    filter: blur(var(--digit-blur));
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
    filter: blur(0);
  }
}
.account-update-island__progress-value .t-digit {
  display: inline-block;
  will-change: transform, opacity, filter;
}
.account-update-island__progress-digits.is-animating .t-digit {
  animation: account-update-digit-pop-in var(--digit-dur) var(--digit-ease) both;
}
.account-update-island__progress-digits.is-animating .t-digit[data-stagger="1"] {
  animation-delay: var(--digit-stagger);
}
.account-update-island__progress-digits.is-animating .t-digit[data-stagger="2"] {
  animation-delay: calc(var(--digit-stagger) * 2);
}
.account-update-island__action-shell[data-downloading="true"] .account-update-island__action-label {
  min-width: var(--openbot-control-md);
  text-align: center;
}
.account-update-island__action-shell[data-downloading="true"] .account-update-island__action.ui-button {
  padding-inline: var(--openbot-space-2);
}
.account-update-island__icon.t-icon-swap {
  --icon-swap-dur: var(--openbot-duration-overlay);
  --icon-swap-blur: var(--openbot-space-0-5);
  --icon-swap-start-scale: 0.25;
  --icon-swap-ease: var(--openbot-ease-in-out);
  position: relative;
  display: inline-grid;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  place-items: center;
}
.account-update-island__icon.t-icon-swap .t-icon {
  position: relative;
  top: 1px;
  display: grid;
  grid-area: 1 / 1;
  place-items: center;
  transition: opacity var(--icon-swap-dur) var(--icon-swap-ease), filter var(--icon-swap-dur) var(--icon-swap-ease), transform var(--icon-swap-dur) var(--icon-swap-ease);
  will-change: opacity, filter, transform;
}
.account-update-island__icon.t-icon-swap svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.account-update-island__icon.t-icon-swap .ui-spinner {
  border-color: var(--openbot-text-dim-on-light);
  border-top-color: currentColor;
}
.account-update-island__icon.t-icon-swap[data-state="a"] .t-icon[data-icon="a"], .account-update-island__icon.t-icon-swap[data-state="b"] .t-icon[data-icon="b"] {
  transform: scale(1);
  opacity: 1;
  filter: blur(0);
}
.account-update-island__icon.t-icon-swap[data-state="a"] .t-icon[data-icon="b"], .account-update-island__icon.t-icon-swap[data-state="b"] .t-icon[data-icon="a"] {
  transform: scale(var(--icon-swap-start-scale));
  opacity: 0;
  filter: blur(var(--icon-swap-blur));
}
.account-update-island__action.ui-button:active:not(:disabled):not([data-disabled]) {
  transform: scale(0.96);
}
@media (hover: hover) and (pointer: fine) {
  .account-update-island__action.ui-button:hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-surface-light);
    box-shadow: 0 0 0 1px var(--openbot-text-dim-on-light), 0 1px 2px var(--openbot-shadow-popover-ambient);
    color: var(--openbot-text-on-light);
  }
}
@media (prefers-reduced-motion: reduce) {
  .account-update-island.t-panel-slide, .account-update-island__action.ui-button, .account-update-island__icon.t-icon-swap .t-icon, .account-update-island .t-update-text-swap > [data-text] {
    transition: none;
  }
  .account-update-island__progress-value .t-digit {
    animation: none;
  }
}
.sidebar-update-island > .account-update-island {
  position: relative;
  inset: auto;
  min-height: 0;
  margin: var(--openbot-space-2) var(--openbot-space-3) var(--openbot-space-3);
  border-radius: var(--openbot-radius-lg);
  padding: var(--openbot-space-1-5) var(--openbot-space-1-5) var(--openbot-space-1-5) var(--openbot-space-3);
}
.join-server-backdrop {
  animation: join-server-backdrop-in var(--modal-open-dur) var(--modal-ease) both;
  will-change: opacity;
}
.join-server-backdrop[data-motion="closing"] {
  animation: join-server-backdrop-out var(--modal-close-dur) var(--modal-ease) both;
}
.join-server-dialog {
  position: relative;
  width: min(420px, 100%);
  max-height: calc(100dvh - 48px);
  overflow: hidden;
  outline: 0;
  border-radius: var(--openbot-radius-xl);
  background: var(--openbot-bg-sidebar);
  color: var(--openbot-text-primary);
  box-shadow: 0 0 0 1px var(--openbot-border-strong), 0 24px 64px var(--openbot-shadow-dialog);
}
.join-server-close {
  position: absolute;
  top: var(--openbot-space-6);
  right: var(--openbot-space-6);
  z-index: 2;
  color: var(--openbot-text-muted);
}
.join-server-content {
  width: 100%;
  max-height: inherit;
  overflow-y: auto;
  padding: 32px;
}
.join-server-pages {
  --join-server-reference: 0px;
  width: 100%;
  height: 336px;
  overflow: hidden;
  transition: height var(--page-slide-dur) var(--page-slide-ease);
}
.join-server-pages[data-reference] {
  --join-server-reference: calc(var(--openbot-control-xs) + var(--openbot-space-0-5));
}
.join-server-pages[data-page="1"][data-preview-error] {
  height: calc(356px + var(--join-server-reference));
}
.join-server-pages[data-page="2"] {
  height: 292px;
}
.join-server-pages[data-page="2"][data-error] {
  height: calc(364px + var(--join-server-reference));
}
.join-server-page {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--openbot-space-4) + var(--openbot-space-1));
  margin: 0;
}
.join-server-header {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.join-server-header-entry {
  gap: var(--openbot-space-2);
  padding-inline: calc(var(--openbot-space-4) + var(--openbot-space-1));
}
.join-server-header-entry .ui-heading {
  font-size: var(--openbot-text-3xl);
  font-weight: var(--openbot-weight-bold);
  line-height: var(--openbot-leading-3xl);
}
.join-server-header-entry .ui-text {
  font-size: var(--openbot-text-lg);
}
.join-server-header-verified {
  gap: var(--openbot-space-2);
  padding-inline: var(--openbot-space-2);
}
.join-server-header .ui-text {
  max-width: 296px;
  line-height: var(--openbot-leading-sm);
}
.join-server-entry-logo {
  --app-logo-background: var(--openbot-surface-light);
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  margin-bottom: var(--openbot-space-4);
  border-radius: var(--openbot-radius-xl);
  box-shadow: 0 12px 28px var(--openbot-shadow-dialog), inset 0 1px 0 var(--openbot-border-strong);
}
.join-server-field {
  gap: var(--openbot-space-2);
}
.join-server-link-input.ui-input {
  height: var(--openbot-control-xl);
  background: var(--openbot-bg-control);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
}
.join-server-link-input.ui-input:focus-visible {
  outline: none;
  box-shadow: none;
}
.join-server-link-input.ui-input.is-error {
  border-color: var(--openbot-danger);
}
.join-server-field .ui-field-error {
  min-height: var(--openbot-leading-sm);
}
.join-server-identity-logo {
  --app-logo-background: var(--openbot-surface-light);
  width: 88px;
  height: 88px;
  flex: 0 0 auto;
  margin-bottom: var(--openbot-space-6);
  border-radius: var(--openbot-radius-modal);
  box-shadow: 0 16px 36px var(--openbot-shadow-dialog), inset 0 1px 0 var(--openbot-border-strong);
}
.join-server-invite-eyebrow {
  margin-bottom: 2px;
  font-size: var(--openbot-text-lg);
}
.join-server-header-verified .ui-heading {
  font-size: var(--openbot-text-3xl);
  font-weight: var(--openbot-weight-bold);
  line-height: var(--openbot-leading-3xl);
}
.join-server-hostname.ui-text {
  max-width: 260px;
  color: var(--openbot-text-muted);
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-lg);
}
.join-server-alert.ui-alert {
  align-self: start;
  padding-block: var(--openbot-space-2);
}
.join-server-alert .ui-alert-description {
  white-space: normal;
}
.join-server-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--openbot-space-2);
  margin-top: auto;
}
.join-server-actions .ui-button {
  width: 100%;
}
.join-server-actions-verified {
  gap: var(--openbot-space-1);
}
.join-server-preview {
  display: grid;
  gap: var(--openbot-space-3);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-4);
}
.join-server-preview-signal {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.join-server-preview-signal i, .join-server-preview-signal span {
  display: block;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success);
}
.join-server-preview-signal i {
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 4px var(--openbot-success-soft);
}
.join-server-preview-signal span {
  width: 42px;
  height: 1px;
  opacity: 0.52;
}
.join-server-preview-heading {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.join-server-verified {
  color: var(--openbot-success);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.join-server-preview-heading strong, .join-server-preview-heading small, .join-server-preview dd {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.join-server-preview-heading strong {
  font-size: var(--openbot-text-lg);
}
.join-server-preview-heading small, .join-server-preview dt, .join-server-preview p {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.join-server-preview dl {
  display: grid;
  gap: var(--openbot-space-2);
  margin: 0;
}
.join-server-preview dl div {
  min-width: 0;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: var(--openbot-space-2);
}
.join-server-preview dd {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.join-server-preview p {
  margin: 0;
  line-height: var(--openbot-leading-sm);
}
@keyframes join-server-backdrop-in {
  from {
    opacity: 0;
  }
}
@keyframes join-server-backdrop-out {
  to {
    opacity: 0;
  }
}
@media (max-width: 560px) {
  .join-server-backdrop {
    padding: var(--openbot-space-3);
  }
  .join-server-dialog {
    width: 100%;
    max-height: calc(100dvh - 24px);
  }
  .join-server-close {
    top: var(--openbot-space-3);
    right: var(--openbot-space-3);
  }
  .join-server-content {
    padding: var(--openbot-space-6);
  }
  .join-server-pages {
    height: 348px;
  }
  .join-server-pages[data-page="1"][data-preview-error] {
    height: calc(368px + var(--join-server-reference));
  }
  .join-server-pages[data-page="2"] {
    height: 304px;
  }
  .join-server-pages[data-page="2"][data-error] {
    height: calc(376px + var(--join-server-reference));
  }
}
@media (prefers-reduced-motion: reduce) {
  .join-server-backdrop {
    animation: none;
  }
  .join-server-pages {
    transition: none;
  }
}
.add-server-dialog {
  width: min(460px, 100%);
  transition: width var(--openbot-duration-normal) var(--openbot-ease-out);
}
.add-server-dialog[data-step="pricing"] {
  width: min(calc(760px + var(--add-server-extra-price-chars, 0) * 48px), 100%);
}
.add-server-step {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-6);
  margin: 0;
  animation: add-server-step-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}
.add-server-step .ui-heading:focus {
  outline: none;
}
.add-server-pricing {
  gap: var(--openbot-space-4);
}
.add-server-dialog[data-step="pricing"] .join-server-content {
  padding: var(--openbot-space-6);
}
.add-server-limit.ui-alert {
  align-self: stretch;
}
.add-server-intro {
  gap: var(--openbot-space-2);
  padding-block: var(--openbot-space-2);
}
.add-server-intro .ui-heading, .add-server-intro .ui-text {
  margin: 0;
  text-wrap: balance;
}
.add-server-intro .ui-heading {
  padding-inline: calc(var(--openbot-control-md) + var(--openbot-space-2));
  font-size: var(--openbot-text-3xl);
  font-weight: var(--openbot-weight-bold);
  line-height: var(--openbot-leading-3xl);
  letter-spacing: var(--openbot-tracking-tight);
}
.add-server-intro .ui-text {
  max-width: 560px;
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
.add-server-bar {
  position: relative;
  min-height: var(--openbot-control-md);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-2);
  padding-inline: calc(var(--openbot-control-md) + var(--openbot-space-2));
}
.add-server-bar .hosted-currency {
  position: absolute;
  top: 50%;
  left: 0;
  width: auto;
  flex: 0 0 auto;
  transform: translateY(-50%);
}
.hosted-billing {
  --hosted-billing-ease: cubic-bezier(0.34, 1.36, 0.64, 1);
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 3px;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-canvas);
}
.hosted-billing::before {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control-active);
  box-shadow: inset 0 0 0 1px var(--openbot-border);
  transition: transform 300ms var(--hosted-billing-ease);
}
.hosted-billing[data-billing="yearly"]::before {
  transform: translateX(100%);
}
.hosted-billing-option {
  position: relative;
  z-index: 1;
  display: flex;
}
.hosted-billing-control {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-1) var(--openbot-space-4);
  border-radius: var(--openbot-radius-pill);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--openbot-duration-normal) var(--openbot-ease-out);
}
.hosted-billing-control[data-checked] {
  color: var(--openbot-text-primary);
}
.hosted-billing-option:has(:focus-visible) .hosted-billing-control {
  box-shadow: var(--openbot-focus-ring);
}
.hosted-billing-save {
  padding: 0 var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-md);
  transition: color var(--openbot-duration-overlay) var(--openbot-ease-out), background-color var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.hosted-billing[data-billing="yearly"] .hosted-billing-save {
  background: var(--openbot-success-soft);
  color: var(--openbot-success-text);
  animation: hosted-billing-save-pop 300ms var(--hosted-billing-ease) 80ms both;
}
.hosted-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-canvas);
  list-style: none;
}
.hosted-plan {
  position: relative;
  isolation: isolate;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: var(--openbot-space-6);
  transition: opacity var(--openbot-duration-overlay) var(--openbot-ease-out), background-color var(--openbot-duration-normal) var(--openbot-ease-out);
  animation: hosted-plan-in var(--openbot-duration-overlay) var(--openbot-ease-out) calc(var(--plan-index) * 40ms + 60ms) backwards;
}
.hosted-plan + .hosted-plan {
  border-left: 1px solid var(--openbot-border);
}
.hosted-plan[data-recommended] {
  background: var(--openbot-bg-surface);
}
.hosted-plan[data-dimmed] {
  opacity: 0.5;
}
.hosted-plan[data-recommended]::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--openbot-accent), var(--openbot-warning), transparent);
  opacity: 0.8;
  pointer-events: none;
}
.hosted-plan[data-recommended]::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  height: 50%;
  background: linear-gradient(90deg, var(--openbot-accent), var(--openbot-warning));
  opacity: 0.22;
  mask-image: radial-gradient(90% 100% at 50% 100%, var(--openbot-text-primary), transparent);
  pointer-events: none;
  transition: opacity var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.hosted-plan-head {
  height: var(--openbot-control-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.hosted-plan-name {
  margin: 0;
  color: var(--openbot-accent-text);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
}
.hosted-plan-badge {
  border-color: transparent;
  background: var(--openbot-surface-light);
  color: var(--openbot-text-on-light);
}
.hosted-plan-price {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin: var(--openbot-space-4) 0 0;
}
.hosted-plan-was {
  display: grid;
  grid-template-columns: 0fr;
  align-self: center;
  opacity: 0;
  transition: grid-template-columns var(--openbot-duration-overlay) var(--openbot-ease-out), opacity var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.hosted-plan-was[data-shown] {
  grid-template-columns: 1fr;
  opacity: 1;
}
.hosted-plan-was-inner {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.hosted-plan-was s {
  display: inline-block;
  margin-right: var(--openbot-space-2);
  color: var(--openbot-text-dim);
  font-size: var(--openbot-text-xl);
  line-height: var(--openbot-leading-xl);
  font-variant-numeric: tabular-nums;
  text-decoration-thickness: 1px;
}
.hosted-plan-now {
  display: flex;
  align-items: flex-start;
  white-space: nowrap;
}
.hosted-plan-amount {
  --digit-distance: 12px;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-display);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-display);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.hosted-plan-period {
  white-space: nowrap;
  margin-left: var(--openbot-space-1);
  padding-top: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.hosted-plan-billed {
  display: flex;
  flex-wrap: wrap;
  margin: var(--openbot-space-1) 0 0;
  color: var(--openbot-text-dim);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  animation: add-server-step-in var(--openbot-duration-overlay) var(--openbot-ease-out) both;
}
.hosted-plan-billed-total {
  white-space: nowrap;
}
.hosted-plan-saving {
  color: var(--openbot-success-text);
  white-space: nowrap;
}
.hosted-plan-saving::before {
  content: "\00b7" / "";
  margin: 0 var(--openbot-space-1);
  color: var(--openbot-text-dim);
}
.hosted-plan-summary {
  margin: var(--openbot-space-4) 0 var(--openbot-space-6);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.hosted-plan-choose.ui-button {
  margin-top: auto;
}
.hosted-plan-facts {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
  margin: var(--openbot-space-6) 0 0;
  padding: var(--openbot-space-4) 0 0;
  border-top: 1px dashed var(--openbot-border);
  list-style: none;
}
.hosted-plan-facts li {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.hosted-plan-facts svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  transition: color var(--openbot-duration-normal) var(--openbot-ease-out);
}
.add-server-custom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-4);
  padding: 0 var(--openbot-space-1);
}
.add-server-custom-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.add-server-custom-text .ui-text {
  margin: 0;
}
.add-server-custom .ui-button {
  flex: 0 0 auto;
}
.add-server-join {
  margin: 0;
  text-align: center;
}
.add-server-progress {
  align-items: stretch;
  gap: var(--openbot-space-6);
}
.add-server-progress .join-server-header {
  gap: var(--openbot-space-2);
}
.add-server-ring {
  position: relative;
  width: 96px;
  height: 96px;
  margin: var(--openbot-space-2) auto 0;
  display: grid;
  place-items: center;
}
.add-server-ring-segments {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke-width: 4;
  transform: rotate(-90deg);
}
.add-server-ring-segment circle {
  stroke-dasharray: 30.33 100;
  transition: stroke-dasharray var(--openbot-duration-normal) var(--openbot-ease-out), stroke-dashoffset var(--openbot-duration-slow) var(--openbot-ease-out), stroke var(--openbot-duration-slow) var(--openbot-ease-out);
}
.add-server-ring-segment:nth-child(1) circle {
  stroke-dashoffset: -1.5;
}
.add-server-ring-segment:nth-child(2) circle {
  stroke-dashoffset: -34.83;
}
.add-server-ring-segment:nth-child(3) circle {
  stroke-dashoffset: -68.17;
}
.add-server-ring-track {
  stroke: var(--openbot-border);
}
.add-server-ring-segment .add-server-ring-fill {
  stroke: var(--openbot-accent);
}
.add-server-ring-segment[data-state="pending"] .add-server-ring-fill {
  stroke-dasharray: 0 100;
}
.add-server-ring-segment[data-state="active"] .add-server-ring-fill {
  --add-server-step-creep: 20s;
  stroke-dasharray: 27.3 100;
  transition: stroke-dasharray var(--add-server-step-creep) cubic-bezier(0.05, 0.7, 0.1, 1);
  animation: add-server-segment-breathe 1.6s var(--openbot-ease-in-out) infinite alternate;
  @starting-style {
    stroke-dasharray: 0 100;
  }
}
.add-server-ring-segment[data-state="failed"] .add-server-ring-fill {
  stroke: var(--openbot-danger);
}
.add-server-progress[data-status="ready"] .add-server-ring-segment circle {
  stroke-dasharray: 33.4 100;
  stroke: var(--openbot-success);
}
.add-server-progress[data-status="ready"] .add-server-ring-segment:nth-child(1) circle {
  stroke-dashoffset: 0;
}
.add-server-progress[data-status="ready"] .add-server-ring-segment:nth-child(2) circle {
  stroke-dashoffset: -33.33;
}
.add-server-progress[data-status="ready"] .add-server-ring-segment:nth-child(3) circle {
  stroke-dashoffset: -66.67;
}
.add-server-ring-core {
  position: relative;
  width: 72px;
  height: 72px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--openbot-space-1);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface);
  box-shadow: inset 0 0 0 1px var(--openbot-border);
  transition: opacity var(--openbot-duration-normal) var(--openbot-ease-out), transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.add-server-light {
  position: relative;
  width: 42px;
  height: 13px;
  border: 1px solid var(--openbot-text-dim);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--openbot-text-dim) 55%, transparent);
  }
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-sidebar);
}
.add-server-light::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  width: 16px;
  height: 1px;
  background: var(--openbot-text-dim);
}
.add-server-light::after {
  content: "";
  position: absolute;
  top: 3.5px;
  right: 4px;
  width: 4px;
  height: 4px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-dim);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-dim) 55%, transparent);
  }
  transition: background var(--openbot-duration-normal) var(--openbot-ease-out), box-shadow var(--openbot-duration-normal) var(--openbot-ease-out);
}
.add-server-light[data-state="active"]::after {
  background: var(--openbot-accent);
  box-shadow: 0 0 6px var(--openbot-accent);
  animation: add-server-light-flicker 1.3s steps(1, end) infinite;
}
.add-server-light[data-state="done"]::after {
  background: var(--openbot-success);
  box-shadow: 0 0 6px var(--openbot-success);
}
.add-server-light[data-state="failed"]::after {
  background: var(--openbot-danger);
  box-shadow: 0 0 6px var(--openbot-danger);
}
.add-server-progress:is([data-status="ready"], [data-status="error"]) .add-server-ring-core {
  opacity: 0;
  transform: scale(0.7);
}
.add-server-ring-result {
  position: absolute;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success);
  color: var(--openbot-text-on-accent);
  animation: add-server-pop var(--openbot-duration-overlay) var(--openbot-ease-out) var(--openbot-duration-normal) both;
}
.add-server-ring-result[data-tone="danger"] {
  background: var(--openbot-danger);
}
.add-server-ring-result svg {
  width: 32px;
  height: 32px;
}
.add-server-ring-result svg path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: add-server-check-draw var(--openbot-duration-slow) var(--openbot-ease-out) var(--openbot-duration-slow) forwards;
}
.add-server-ticker {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  animation: add-server-detail-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}
.add-server-confetti {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.add-server-confetti i {
  position: absolute;
  top: var(--confetti-origin-y);
  left: var(--confetti-origin-x);
  width: 7px;
  height: 12px;
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-accent);
  opacity: 0;
  animation: add-server-confetti var(--confetti-duration) var(--openbot-ease-out) var(--confetti-delay) both;
}
.add-server-confetti i:nth-child(5n + 1) {
  background: var(--openbot-success);
}
.add-server-confetti i:nth-child(5n + 2) {
  background: var(--openbot-warning);
}
.add-server-confetti i:nth-child(5n + 3) {
  background: var(--openbot-danger);
}
.add-server-confetti i:nth-child(5n + 4) {
  background: var(--openbot-accent-text);
}
.add-server-confetti i:nth-child(3n) {
  width: 8px;
  height: 8px;
  border-radius: var(--openbot-radius-pill);
}
@keyframes add-server-confetti {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.3) rotate(0deg);
  }
  30% {
    opacity: 1;
    transform: translate(calc(-50% + var(--confetti-x)), calc(-50% + var(--confetti-y))) rotate(calc(var(--confetti-spin) / 2)) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--confetti-x) * 1.15), calc(-50% + var(--confetti-y) + 360px)) rotate(var(--confetti-spin)) scale(0.9);
  }
}
@keyframes hosted-billing-save-pop {
  50% {
    transform: scale(1.1);
  }
}
@keyframes hosted-plan-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}
@keyframes add-server-step-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}
@keyframes add-server-pop {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
}
@keyframes add-server-check-draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes add-server-light-flicker {
  0%, 22%, 34%, 58%, 64%, 88% {
    opacity: 1;
  }
  18%, 30%, 54%, 61%, 84% {
    opacity: 0.25;
  }
}
@keyframes add-server-segment-breathe {
  to {
    opacity: 0.55;
  }
}
@keyframes add-server-detail-in {
  from {
    opacity: 0;
    transform: translateY(8px);
    filter: blur(2px);
  }
}
@media (hover: hover) {
  .hosted-plan:not([data-recommended]):hover {
    background: var(--openbot-bg-surface);
  }
  .hosted-plan[data-recommended]:hover::after {
    opacity: 0.3;
  }
  .hosted-plan:hover .hosted-plan-facts svg {
    color: var(--openbot-text-secondary);
  }
}
@media (max-width: 720px) {
  .hosted-plans {
    grid-template-columns: minmax(0, 1fr);
  }
  .hosted-plan + .hosted-plan {
    border-top: 1px solid var(--openbot-border);
    border-left: 0;
  }
}
@media (max-width: 560px) {
  .add-server-intro .ui-heading {
    font-size: var(--openbot-text-2xl);
    line-height: var(--openbot-leading-2xl);
  }
  .add-server-intro .ui-text {
    font-size: var(--openbot-text-md);
    line-height: var(--openbot-leading-md);
  }
  .add-server-bar {
    padding: calc(var(--openbot-control-md) + var(--openbot-space-1)) 0 0;
  }
  .add-server-bar .hosted-billing {
    flex: 1;
  }
  .add-server-bar .hosted-currency {
    top: 0;
    transform: none;
  }
  .add-server-custom {
    flex-direction: column;
    align-items: stretch;
  }
  .add-server-limit.ui-alert {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }
  .add-server-limit .ui-alert-actions {
    grid-column: 2;
    justify-content: flex-start;
  }
}
@media (prefers-reduced-motion: reduce) {
  .add-server-dialog, .hosted-billing::before, .hosted-billing-control, .hosted-billing-save, .hosted-plan, .hosted-plan-was, .add-server-progress[data-status] .add-server-ring-segment circle, .add-server-progress[data-status] .add-server-ring-core {
    transition: none;
  }
  .add-server-step, .hosted-billing[data-billing="yearly"] .hosted-billing-save, .hosted-plan, .hosted-plan-billed, .add-server-ring-result, .add-server-light[data-state]::after, .add-server-ring-segment[data-state] .add-server-ring-fill, .add-server-ticker {
    animation: none;
  }
  .add-server-ring-result svg path {
    stroke-dashoffset: 0;
    animation: none;
  }
  .add-server-confetti {
    display: none;
  }
}
.hosted-upsell-notice {
  flex: none;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  margin-top: var(--openbot-space-3);
  padding: var(--openbot-space-3);
}
.hosted-upsell-notice .ui-alert-icon {
  width: var(--openbot-space-8);
  height: var(--openbot-space-8);
  padding: var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-md);
  background: linear-gradient(135deg, var(--openbot-beam-blue), var(--openbot-beam-pink));
  color: var(--openbot-text-on-accent);
}
.hosted-upsell-notice .ui-alert-title {
  text-wrap: balance;
}
.hosted-upsell-notice .ui-alert-actions {
  justify-content: flex-start;
  margin-top: var(--openbot-space-2);
}
@property --hosted-upsell-beam-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.hosted-upsell-beam {
  position: relative;
  border-color: transparent;
  background: radial-gradient(120% 140% at 0% 0%, var(--openbot-beam-blue), transparent 60%), var(--openbot-bg-surface-raised);
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--openbot-beam-blue) 12%, transparent), transparent 60%), var(--openbot-bg-surface-raised);
  }
}
.hosted-upsell-beam::before, .hosted-upsell-beam-glow > span {
  position: absolute;
  border-radius: inherit;
  content: "";
  pointer-events: none;
  mask: linear-gradient(currentColor 0 0) content-box exclude, linear-gradient(currentColor 0 0);
  animation: hosted-upsell-beam-turn 6s linear infinite;
}
.hosted-upsell-beam::before {
  inset: 0;
  padding: 1px;
  background: conic-gradient( from var(--hosted-upsell-beam-angle), var(--openbot-beam-blue) 0deg, var(--openbot-beam-blue) 180deg, var(--openbot-beam-teal) 240deg, var(--openbot-beam-blue) 290deg, var(--openbot-beam-pink) 330deg, var(--openbot-beam-blue) 360deg );
  @supports (color: color-mix(in lab, red, red)) {
    background: conic-gradient( from var(--hosted-upsell-beam-angle), color-mix(in srgb, var(--openbot-beam-blue) 18%, transparent) 0deg, color-mix(in srgb, var(--openbot-beam-blue) 18%, transparent) 180deg, var(--openbot-beam-teal) 240deg, var(--openbot-beam-blue) 290deg, var(--openbot-beam-pink) 330deg, color-mix(in srgb, var(--openbot-beam-blue) 18%, transparent) 360deg );
  }
}
.hosted-upsell-beam-glow {
  position: absolute;
  inset: calc(-1 * var(--openbot-space-3));
  border-radius: inherit;
  filter: blur(6px);
  opacity: 0.5;
  pointer-events: none;
}
.hosted-upsell-beam-glow > span {
  inset: var(--openbot-space-3);
  padding: 2px;
  background: conic-gradient( from var(--hosted-upsell-beam-angle), transparent 0deg, transparent 210deg, var(--openbot-beam-teal) 250deg, var(--openbot-beam-blue) 290deg, var(--openbot-beam-pink) 330deg, transparent 360deg );
}
@keyframes hosted-upsell-beam-turn {
  to {
    --hosted-upsell-beam-angle: 360deg;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hosted-upsell-beam::before, .hosted-upsell-beam-glow > span {
    animation: none;
  }
}
.hosted-upsell-modal {
  width: min(420px, 100%);
  display: grid;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-6);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-modal);
  outline: 0;
  color: var(--openbot-text-primary);
  background: var(--openbot-bg-sidebar);
}
.hosted-upsell-modal .hosted-upsell-modal-title {
  margin: 0;
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-lg);
  text-wrap: balance;
}
.hosted-upsell-modal .hosted-upsell-modal-description {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-wrap: pretty;
}
.hosted-upsell-modal .hosted-upsell-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
  margin-top: var(--openbot-space-3);
}
.hosted-upsell-modal .hosted-upsell-scene {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: var(--openbot-space-4);
  padding: var(--openbot-space-6) var(--openbot-space-2) var(--openbot-space-4);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
}
.hosted-upsell-modal .hosted-upsell-device {
  display: grid;
  justify-items: center;
  align-content: end;
  gap: var(--openbot-space-3);
  margin: 0;
}
.hosted-upsell-modal .hosted-upsell-device figcaption {
  display: grid;
  justify-items: center;
  gap: var(--openbot-space-1-5);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.hosted-upsell-modal .hosted-upsell-laptop {
  display: grid;
  justify-items: center;
}
.hosted-upsell-modal .hosted-upsell-laptop-lid {
  width: 88px;
  height: 58px;
  padding: 4px;
  border: 2px solid var(--openbot-border-strong);
  border-bottom: 0;
  border-radius: var(--openbot-radius-sm) var(--openbot-radius-sm) 0 0;
  transform-origin: bottom;
  animation: hosted-upsell-lid 5s ease-in-out infinite;
}
.hosted-upsell-modal .hosted-upsell-laptop-screen {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: var(--openbot-radius-xs);
  color: var(--openbot-text-secondary);
  background: var(--openbot-bg-control);
}
.hosted-upsell-modal .hosted-upsell-laptop-screen svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  animation: hosted-upsell-shown-open 5s ease-in-out infinite;
}
.hosted-upsell-modal .hosted-upsell-laptop-base {
  width: 108px;
  height: 6px;
  border-radius: 0 0 var(--openbot-radius-sm) var(--openbot-radius-sm);
  background: var(--openbot-border-strong);
}
.hosted-upsell-modal .hosted-upsell-rack {
  width: 64px;
  display: grid;
  gap: 4px;
}
.hosted-upsell-modal .hosted-upsell-rack span {
  position: relative;
  height: 18px;
  border: 2px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-sm);
}
.hosted-upsell-modal .hosted-upsell-rack span::after {
  position: absolute;
  top: 50%;
  right: 6px;
  width: 5px;
  height: 5px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success);
  transform: translateY(-50%);
  animation: hosted-upsell-light 1.6s ease-in-out infinite;
  content: "";
}
.hosted-upsell-modal .hosted-upsell-rack span:nth-child(2)::after {
  animation-delay: 0.5s;
}
.hosted-upsell-modal .hosted-upsell-rack span:nth-child(3)::after {
  animation-delay: 1s;
}
.hosted-upsell-modal .hosted-upsell-status {
  display: grid;
  justify-items: center;
  font-weight: var(--openbot-weight-medium);
}
.hosted-upsell-modal .hosted-upsell-status > span {
  grid-area: 1 / 1;
  padding: 2px var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
  white-space: nowrap;
}
.hosted-upsell-modal .hosted-upsell-status .hosted-upsell-status-on {
  color: var(--openbot-success-text);
  background: var(--openbot-success);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-success) 16%, transparent);
  }
}
.hosted-upsell-modal .hosted-upsell-status .hosted-upsell-status-off {
  color: var(--openbot-warning-text);
  background: var(--openbot-warning-text);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-warning-text) 14%, transparent);
  }
}
.hosted-upsell-modal .hosted-upsell-status-flip .hosted-upsell-status-on {
  animation: hosted-upsell-shown-open 5s ease-in-out infinite;
}
.hosted-upsell-modal .hosted-upsell-status-flip .hosted-upsell-status-off {
  animation: hosted-upsell-shown-closed 5s ease-in-out infinite;
}
@keyframes hosted-upsell-lid {
  0%, 25% {
    transform: scaleY(1);
  }
  40%, 85% {
    transform: scaleY(0.08);
  }
  100% {
    transform: scaleY(1);
  }
}
@keyframes hosted-upsell-shown-open {
  0%, 30% {
    opacity: 1;
  }
  38%, 88% {
    opacity: 0;
  }
  96%, 100% {
    opacity: 1;
  }
}
@keyframes hosted-upsell-shown-closed {
  0%, 30% {
    opacity: 0;
  }
  38%, 88% {
    opacity: 1;
  }
  96%, 100% {
    opacity: 0;
  }
}
@keyframes hosted-upsell-light {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hosted-upsell-modal .hosted-upsell-laptop-lid, .hosted-upsell-modal .hosted-upsell-laptop-screen svg, .hosted-upsell-modal .hosted-upsell-rack span::after, .hosted-upsell-modal .hosted-upsell-status-flip .hosted-upsell-status-on, .hosted-upsell-modal .hosted-upsell-status-flip .hosted-upsell-status-off {
    animation: none;
  }
  .hosted-upsell-modal .hosted-upsell-laptop-lid {
    transform: scaleY(0.08);
  }
  .hosted-upsell-modal .hosted-upsell-laptop-screen svg, .hosted-upsell-modal .hosted-upsell-status-flip .hosted-upsell-status-on {
    opacity: 0;
  }
}
.hosted-upsell-offline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--openbot-space-2);
  margin: var(--openbot-space-1) 0 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.app-loading .hosted-upsell-offline {
  justify-content: center;
}
.restart-server-steps {
  display: grid;
  gap: var(--openbot-space-1);
  margin: 0;
  padding: var(--openbot-space-2) var(--openbot-space-3);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  list-style: none;
}
.restart-server-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--openbot-space-3);
  padding-block: var(--openbot-space-1-5);
}
.restart-server-step-icon {
  display: grid;
  place-items: center;
  width: var(--openbot-icon-lg);
  height: var(--openbot-leading-md);
  color: var(--openbot-text-dim);
}
.restart-server-step-icon svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.restart-server-step[data-status="done"] .restart-server-step-icon {
  color: var(--openbot-success-text);
}
.restart-server-step[data-status="failed"] .restart-server-step-icon {
  color: var(--openbot-danger-text);
}
.restart-server-step-text {
  display: grid;
  min-width: 0;
}
.restart-server-step-label {
  overflow-wrap: anywhere;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
}
.restart-server-step[data-status="pending"] .restart-server-step-label, .restart-server-step-detail {
  color: var(--openbot-text-muted);
}
.restart-server-step-detail {
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.server-status-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  margin: var(--openbot-space-3) 0 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
.server-update-dialog-body {
  display: grid;
  gap: var(--openbot-space-3);
}
.server-update-step-progress {
  margin-top: var(--openbot-space-1-5);
}
.server-update-step-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-2);
  margin-top: var(--openbot-space-2);
}
.settings-panel {
  --settings-panel-section-gap: 25px;
  position: absolute;
  z-index: 15;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  width: var(--settings-panel-width, 296px);
  flex-direction: column;
  border-left: 1px solid var(--openbot-border);
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
  animation: settings-panel-in var(--openbot-duration-slow) cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.settings-panel-header {
  display: grid;
  height: 39px;
  flex: 0 0 auto;
  grid-template-columns: 32px 1fr 32px;
  align-items: center;
  border-bottom: 1px solid var(--openbot-border);
  padding: 0 10px;
}
.settings-panel-header h2 {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}
.settings-panel-nav-button {
  position: relative;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  padding: 0;
  background: transparent;
  color: var(--openbot-text-secondary);
  transition: background-color var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease, transform var(--openbot-duration-fast) ease;
}
.settings-panel-nav-button::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  content: "";
  transform: translate(-50%, -50%);
}
.settings-panel-nav-button > svg {
  width: 16px;
  height: 16px;
}
.settings-panel-nav-button:hover {
  background: var(--openbot-hover);
  color: var(--openbot-text-primary);
}
.settings-back-icon {
  transform: translateX(-0.5px);
}
.settings-panel-content {
  min-height: 0;
  overflow-y: auto;
  padding: 24px 15px 28px;
}
.settings-field {
  display: block;
  margin: 0 0 17px;
}
.settings-field > span {
  display: block;
  margin: 0 0 6px 8px;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  line-height: 18px;
}
.settings-field input, .settings-field textarea, .settings-field select {
  display: block;
  width: 100%;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  outline: 0;
  background: var(--openbot-shadow-popover-ambient);
  padding: 10px 11px;
  color: var(--openbot-text-primary);
  caret-color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  line-height: 19px;
  transition: border-color var(--openbot-duration-hover) ease, background var(--openbot-duration-hover) ease;
}
.settings-field input, .settings-field select {
  height: 38px;
}
.settings-field select {
  appearance: none;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--openbot-text-secondary) 50%), linear-gradient(135deg, var(--openbot-text-secondary) 50%, transparent 50%);
  background-position: calc(100% - 16px) 16px, calc(100% - 11px) 16px;
  background-repeat: no-repeat;
  background-size: 5px 5px, 5px 5px;
  padding-right: 32px;
}
.settings-field select option {
  background: var(--openbot-bg-control);
  color: var(--openbot-text-primary);
}
.settings-field textarea {
  field-sizing: content;
  min-height: 88px;
  max-height: 240px;
  overflow-y: auto;
}
.settings-field .settings-instructions-input {
  field-sizing: fixed;
  height: 120px;
  min-height: 120px;
  max-height: 120px;
  resize: none;
}
.settings-field input::placeholder, .settings-field textarea::placeholder {
  color: var(--openbot-text-muted);
}
.settings-field input:focus, .settings-field textarea:focus, .settings-field select:focus {
  border-color: var(--openbot-text-muted);
  background: var(--openbot-shadow-popover-ambient);
}
.settings-field input:focus-visible, .settings-field textarea:focus-visible, .settings-field select:focus-visible {
  outline: none;
}
.settings-link-group {
  display: grid;
  width: 100%;
  margin: 7px 0 22px;
  border-top: 1px solid var(--openbot-border);
  border-bottom: 1px solid var(--openbot-border);
}
.settings-link {
  width: 100%;
  min-height: 42px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-3);
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 var(--openbot-space-1);
  text-align: left;
  transition: none;
}
.settings-link + .settings-link {
  border-top: 1px solid var(--openbot-border);
}
.settings-link-label {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.settings-link-icon {
  display: grid;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  place-items: center;
  color: var(--openbot-text-secondary);
}
.settings-link-icon > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.settings-link-value {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
.settings-link-value svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
@media (hover: hover) and (pointer: fine) {
  .settings-link-group .settings-link:hover {
    background: var(--openbot-hover);
    color: var(--openbot-text-primary);
  }
  .settings-link:hover .settings-link-value {
    color: var(--openbot-text-secondary);
  }
}
.settings-link-section {
  display: grid;
  gap: var(--openbot-space-1-5);
}
.settings-link-section-title {
  margin: 0 0 0 var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
}
.settings-link-group-inset {
  margin: 0;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface);
}
.settings-link-group-inset > * + * {
  border-top: 1px solid var(--openbot-border);
}
.settings-link-group-inset > :first-child, .settings-link-group-inset > :first-child > button {
  border-top-left-radius: calc(var(--openbot-radius-md) - 1px);
  border-top-right-radius: calc(var(--openbot-radius-md) - 1px);
}
.settings-link-group-inset > :last-child, .settings-link-group-inset > :last-child > button {
  border-bottom-left-radius: calc(var(--openbot-radius-md) - 1px);
  border-bottom-right-radius: calc(var(--openbot-radius-md) - 1px);
}
.settings-link-group-inset .settings-link {
  min-height: 40px;
  gap: var(--openbot-space-2);
  padding: 0 var(--openbot-space-3);
}
.provider-code-login-backdrop {
  z-index: calc(var(--openbot-layer-dialog) + 1);
}
.provider-code-login-dialog {
  position: relative;
  width: min(420px, 100%);
  max-height: calc(100dvh - var(--openbot-space-6) * 2);
  overflow-y: auto;
  outline: 0;
  border-radius: var(--openbot-radius-xl);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-6);
  color: var(--openbot-text-primary);
  animation: provider-code-login-dialog-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}
.provider-code-login-dialog[data-page] {
  width: min(720px, 100%);
}
.provider-code-login-header {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  padding-right: var(--openbot-space-8);
}
.provider-code-login-title {
  margin: 0;
  font-size: var(--openbot-text-xl);
  line-height: var(--openbot-leading-xl);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: var(--openbot-tracking-tight);
}
.provider-code-login-description {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.provider-code-login-body {
  display: flex;
  flex-direction: column;
  margin-top: var(--openbot-space-6);
}
.provider-code-login-pending {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-8) 0;
  text-align: center;
}
.provider-code-login-code {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-4);
}
.provider-code-login-steps {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  margin: 0;
  padding-left: var(--openbot-space-4);
  list-style: decimal;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  align-self: stretch;
}
.provider-code-login-url {
  display: inline-flex;
  height: auto;
  gap: var(--openbot-space-1-5);
  padding: 0;
}
.provider-code-login-url > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.provider-code-login-value {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  align-self: stretch;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  padding: var(--openbot-space-3) var(--openbot-space-4);
}
.provider-code-login-copy > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.provider-code-login-digits {
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-2xl);
  line-height: var(--openbot-leading-2xl);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: var(--openbot-tracking-wide);
}
.provider-code-login-paste {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-3);
  align-self: stretch;
}
.provider-code-login-expiry {
  margin: 0;
  text-align: center;
}
.provider-use-app-actions {
  flex-direction: row;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
}
.provider-code-login-close {
  position: absolute;
  top: var(--openbot-space-3);
  right: var(--openbot-space-3);
}
@keyframes provider-code-login-dialog-in {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
}
@font-face {
  font-display: block;
  font-family: KaTeX_AMS;
  font-style: normal;
  font-weight: 400;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_AMS-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_AMS-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_AMS-Regular.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Caligraphic;
  font-style: normal;
  font-weight: 700;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Bold.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Bold.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Bold.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Caligraphic;
  font-style: normal;
  font-weight: 400;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Regular.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Fraktur;
  font-style: normal;
  font-weight: 700;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Fraktur-Bold.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Fraktur-Bold.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Fraktur-Bold.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Fraktur;
  font-style: normal;
  font-weight: 400;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Fraktur-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Fraktur-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Fraktur-Regular.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Main;
  font-style: normal;
  font-weight: 700;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-Bold.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-Bold.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-Bold.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Main;
  font-style: italic;
  font-weight: 700;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-BoldItalic.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-BoldItalic.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-BoldItalic.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Main;
  font-style: italic;
  font-weight: 400;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-Italic.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-Italic.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-Italic.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Main;
  font-style: normal;
  font-weight: 400;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-Regular.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Math;
  font-style: italic;
  font-weight: 700;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Math-BoldItalic.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Math-BoldItalic.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Math-BoldItalic.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Math;
  font-style: italic;
  font-weight: 400;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Math-Italic.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Math-Italic.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Math-Italic.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: "KaTeX_SansSerif";
  font-style: normal;
  font-weight: 700;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_SansSerif-Bold.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_SansSerif-Bold.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_SansSerif-Bold.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: "KaTeX_SansSerif";
  font-style: italic;
  font-weight: 400;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_SansSerif-Italic.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_SansSerif-Italic.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_SansSerif-Italic.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: "KaTeX_SansSerif";
  font-style: normal;
  font-weight: 400;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_SansSerif-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_SansSerif-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_SansSerif-Regular.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Script;
  font-style: normal;
  font-weight: 400;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Script-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Script-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Script-Regular.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Size1;
  font-style: normal;
  font-weight: 400;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size1-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size1-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size1-Regular.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Size2;
  font-style: normal;
  font-weight: 400;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size2-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size2-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size2-Regular.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Size3;
  font-style: normal;
  font-weight: 400;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size3-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size3-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size3-Regular.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Size4;
  font-style: normal;
  font-weight: 400;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size4-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size4-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size4-Regular.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Typewriter;
  font-style: normal;
  font-weight: 400;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Typewriter-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Typewriter-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Typewriter-Regular.ttf) format("truetype");
}
.katex {
  font: normal 1.21em KaTeX_Main,Times New Roman,serif;
  line-height: 1.2;
  position: relative;
  text-indent: 0;
  text-rendering: auto;
}
.katex * {
  -ms-high-contrast-adjust: none !important;
  border-color: currentColor;
}
.katex .katex-version:after {
  content: "0.18.9";
}
.katex .katex-mathml {
  border: 0;
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.katex .katex-html>.katex-newline {
  display: block;
}
.katex .katex-base {
  position: relative;
  white-space: nowrap;
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
}
.katex .katex-base,.katex .katex-strut {
  display: inline-block;
}
.katex .textbf {
  font-weight: 700;
}
.katex .textit {
  font-style: italic;
}
.katex .textrm {
  font-family: KaTeX_Main;
}
.katex .textsf {
  font-family: KaTeX_SansSerif;
}
.katex .texttt {
  font-family: KaTeX_Typewriter;
}
.katex .mathnormal {
  font-family: KaTeX_Math;
  font-style: italic;
}
.katex .mathit {
  font-family: KaTeX_Main;
  font-style: italic;
}
.katex .mathrm {
  font-style: normal;
}
.katex .mathbf {
  font-family: KaTeX_Main;
  font-weight: 700;
}
.katex .boldsymbol {
  font-family: KaTeX_Math;
  font-style: italic;
  font-weight: 700;
}
.katex .amsrm,.katex .mathbb,.katex .textbb {
  font-family: KaTeX_AMS;
}
.katex .mathcal {
  font-family: KaTeX_Caligraphic;
}
.katex .mathfrak,.katex .textfrak {
  font-family: KaTeX_Fraktur;
}
.katex .mathboldfrak,.katex .textboldfrak {
  font-family: KaTeX_Fraktur;
  font-weight: 700;
}
.katex .mathtt {
  font-family: KaTeX_Typewriter;
}
.katex .mathscr,.katex .textscr {
  font-family: KaTeX_Script;
}
.katex .mathsf,.katex .textsf {
  font-family: KaTeX_SansSerif;
}
.katex .mathboldsf,.katex .textboldsf {
  font-family: KaTeX_SansSerif;
  font-weight: 700;
}
.katex .mathitsf,.katex .mathsfit,.katex .textitsf {
  font-family: KaTeX_SansSerif;
  font-style: italic;
}
.katex .mainrm {
  font-family: KaTeX_Main;
  font-style: normal;
}
.katex .vlist-t {
  border-collapse: collapse;
  display: inline-table;
  table-layout: fixed;
}
.katex .vlist-r {
  display: table-row;
}
.katex .vlist {
  display: table-cell;
  position: relative;
  vertical-align: bottom;
}
.katex .vlist>span {
  display: block;
  height: 0;
  position: relative;
}
.katex .vlist>span>span {
  display: inline-block;
}
.katex .vlist>span>.pstrut {
  overflow: hidden;
  width: 0;
}
.katex .vlist-t2 {
  margin-right: -2px;
}
.katex .vlist-s {
  display: table-cell;
  font-size: 1px;
  min-width: 2px;
  vertical-align: bottom;
  width: 2px;
}
.katex .katex-vbox {
  align-items: baseline;
  display: inline-flex;
  flex-direction: column;
}
.katex .katex-thinbox {
  display: inline-flex;
  flex-direction: row;
  max-width: 0;
  width: 0;
}
.katex .msupsub {
  text-align: left;
}
.katex .mfrac>span>span {
  text-align: center;
}
.katex .mfrac .frac-line {
  border-bottom-style: solid;
  display: inline-block;
  width: 100%;
}
.katex .katex-hdashline,.katex .katex-hline,.katex .katex-overline .overline-line,.katex .katex-rule,.katex .katex-underline .underline-line,.katex .mfrac .frac-line {
  min-height: 1px;
}
.katex .mspace {
  display: inline-block;
}
.katex .katex-smash {
  display: inline;
  line-height: 0;
}
.katex .clap,.katex .llap,.katex .rlap {
  position: relative;
  width: 0;
}
.katex .clap>.katex-inner,.katex .llap>.katex-inner,.katex .rlap>.katex-inner {
  position: absolute;
}
.katex .clap>.katex-fix,.katex .llap>.katex-fix,.katex .rlap>.katex-fix {
  display: inline-block;
}
.katex .llap>.katex-inner {
  right: 0;
}
.katex .clap>.katex-inner,.katex .rlap>.katex-inner {
  left: 0;
}
.katex .clap>.katex-inner>span {
  margin-left: -50%;
  margin-right: 50%;
}
.katex .katex-rule {
  border: 0 solid;
  display: inline-block;
  position: relative;
}
.katex .katex-hline,.katex .katex-overline .overline-line,.katex .katex-underline .underline-line {
  border-bottom-style: solid;
  display: inline-block;
  width: 100%;
}
.katex .katex-hdashline {
  border-bottom-style: dashed;
  display: inline-block;
  width: 100%;
}
.katex .sqrt>.katex-root {
  margin-left: .2777777778em;
  margin-right: -.5555555556em;
}
.katex .fontsize-ensurer.reset-size1.size1,.katex .katex-sizing.reset-size1.size1 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size1.size2,.katex .katex-sizing.reset-size1.size2 {
  font-size: 1.2em;
}
.katex .fontsize-ensurer.reset-size1.size3,.katex .katex-sizing.reset-size1.size3 {
  font-size: 1.4em;
}
.katex .fontsize-ensurer.reset-size1.size4,.katex .katex-sizing.reset-size1.size4 {
  font-size: 1.6em;
}
.katex .fontsize-ensurer.reset-size1.size5,.katex .katex-sizing.reset-size1.size5 {
  font-size: 1.8em;
}
.katex .fontsize-ensurer.reset-size1.size6,.katex .katex-sizing.reset-size1.size6 {
  font-size: 2em;
}
.katex .fontsize-ensurer.reset-size1.size7,.katex .katex-sizing.reset-size1.size7 {
  font-size: 2.4em;
}
.katex .fontsize-ensurer.reset-size1.size8,.katex .katex-sizing.reset-size1.size8 {
  font-size: 2.88em;
}
.katex .fontsize-ensurer.reset-size1.size9,.katex .katex-sizing.reset-size1.size9 {
  font-size: 3.456em;
}
.katex .fontsize-ensurer.reset-size1.size10,.katex .katex-sizing.reset-size1.size10 {
  font-size: 4.148em;
}
.katex .fontsize-ensurer.reset-size1.size11,.katex .katex-sizing.reset-size1.size11 {
  font-size: 4.976em;
}
.katex .fontsize-ensurer.reset-size2.size1,.katex .katex-sizing.reset-size2.size1 {
  font-size: .8333333333em;
}
.katex .fontsize-ensurer.reset-size2.size2,.katex .katex-sizing.reset-size2.size2 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size2.size3,.katex .katex-sizing.reset-size2.size3 {
  font-size: 1.1666666667em;
}
.katex .fontsize-ensurer.reset-size2.size4,.katex .katex-sizing.reset-size2.size4 {
  font-size: 1.3333333333em;
}
.katex .fontsize-ensurer.reset-size2.size5,.katex .katex-sizing.reset-size2.size5 {
  font-size: 1.5em;
}
.katex .fontsize-ensurer.reset-size2.size6,.katex .katex-sizing.reset-size2.size6 {
  font-size: 1.6666666667em;
}
.katex .fontsize-ensurer.reset-size2.size7,.katex .katex-sizing.reset-size2.size7 {
  font-size: 2em;
}
.katex .fontsize-ensurer.reset-size2.size8,.katex .katex-sizing.reset-size2.size8 {
  font-size: 2.4em;
}
.katex .fontsize-ensurer.reset-size2.size9,.katex .katex-sizing.reset-size2.size9 {
  font-size: 2.88em;
}
.katex .fontsize-ensurer.reset-size2.size10,.katex .katex-sizing.reset-size2.size10 {
  font-size: 3.4566666667em;
}
.katex .fontsize-ensurer.reset-size2.size11,.katex .katex-sizing.reset-size2.size11 {
  font-size: 4.1466666667em;
}
.katex .fontsize-ensurer.reset-size3.size1,.katex .katex-sizing.reset-size3.size1 {
  font-size: .7142857143em;
}
.katex .fontsize-ensurer.reset-size3.size2,.katex .katex-sizing.reset-size3.size2 {
  font-size: .8571428571em;
}
.katex .fontsize-ensurer.reset-size3.size3,.katex .katex-sizing.reset-size3.size3 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size3.size4,.katex .katex-sizing.reset-size3.size4 {
  font-size: 1.1428571429em;
}
.katex .fontsize-ensurer.reset-size3.size5,.katex .katex-sizing.reset-size3.size5 {
  font-size: 1.2857142857em;
}
.katex .fontsize-ensurer.reset-size3.size6,.katex .katex-sizing.reset-size3.size6 {
  font-size: 1.4285714286em;
}
.katex .fontsize-ensurer.reset-size3.size7,.katex .katex-sizing.reset-size3.size7 {
  font-size: 1.7142857143em;
}
.katex .fontsize-ensurer.reset-size3.size8,.katex .katex-sizing.reset-size3.size8 {
  font-size: 2.0571428571em;
}
.katex .fontsize-ensurer.reset-size3.size9,.katex .katex-sizing.reset-size3.size9 {
  font-size: 2.4685714286em;
}
.katex .fontsize-ensurer.reset-size3.size10,.katex .katex-sizing.reset-size3.size10 {
  font-size: 2.9628571429em;
}
.katex .fontsize-ensurer.reset-size3.size11,.katex .katex-sizing.reset-size3.size11 {
  font-size: 3.5542857143em;
}
.katex .fontsize-ensurer.reset-size4.size1,.katex .katex-sizing.reset-size4.size1 {
  font-size: .625em;
}
.katex .fontsize-ensurer.reset-size4.size2,.katex .katex-sizing.reset-size4.size2 {
  font-size: .75em;
}
.katex .fontsize-ensurer.reset-size4.size3,.katex .katex-sizing.reset-size4.size3 {
  font-size: .875em;
}
.katex .fontsize-ensurer.reset-size4.size4,.katex .katex-sizing.reset-size4.size4 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size4.size5,.katex .katex-sizing.reset-size4.size5 {
  font-size: 1.125em;
}
.katex .fontsize-ensurer.reset-size4.size6,.katex .katex-sizing.reset-size4.size6 {
  font-size: 1.25em;
}
.katex .fontsize-ensurer.reset-size4.size7,.katex .katex-sizing.reset-size4.size7 {
  font-size: 1.5em;
}
.katex .fontsize-ensurer.reset-size4.size8,.katex .katex-sizing.reset-size4.size8 {
  font-size: 1.8em;
}
.katex .fontsize-ensurer.reset-size4.size9,.katex .katex-sizing.reset-size4.size9 {
  font-size: 2.16em;
}
.katex .fontsize-ensurer.reset-size4.size10,.katex .katex-sizing.reset-size4.size10 {
  font-size: 2.5925em;
}
.katex .fontsize-ensurer.reset-size4.size11,.katex .katex-sizing.reset-size4.size11 {
  font-size: 3.11em;
}
.katex .fontsize-ensurer.reset-size5.size1,.katex .katex-sizing.reset-size5.size1 {
  font-size: .5555555556em;
}
.katex .fontsize-ensurer.reset-size5.size2,.katex .katex-sizing.reset-size5.size2 {
  font-size: .6666666667em;
}
.katex .fontsize-ensurer.reset-size5.size3,.katex .katex-sizing.reset-size5.size3 {
  font-size: .7777777778em;
}
.katex .fontsize-ensurer.reset-size5.size4,.katex .katex-sizing.reset-size5.size4 {
  font-size: .8888888889em;
}
.katex .fontsize-ensurer.reset-size5.size5,.katex .katex-sizing.reset-size5.size5 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size5.size6,.katex .katex-sizing.reset-size5.size6 {
  font-size: 1.1111111111em;
}
.katex .fontsize-ensurer.reset-size5.size7,.katex .katex-sizing.reset-size5.size7 {
  font-size: 1.3333333333em;
}
.katex .fontsize-ensurer.reset-size5.size8,.katex .katex-sizing.reset-size5.size8 {
  font-size: 1.6em;
}
.katex .fontsize-ensurer.reset-size5.size9,.katex .katex-sizing.reset-size5.size9 {
  font-size: 1.92em;
}
.katex .fontsize-ensurer.reset-size5.size10,.katex .katex-sizing.reset-size5.size10 {
  font-size: 2.3044444444em;
}
.katex .fontsize-ensurer.reset-size5.size11,.katex .katex-sizing.reset-size5.size11 {
  font-size: 2.7644444444em;
}
.katex .fontsize-ensurer.reset-size6.size1,.katex .katex-sizing.reset-size6.size1 {
  font-size: .5em;
}
.katex .fontsize-ensurer.reset-size6.size2,.katex .katex-sizing.reset-size6.size2 {
  font-size: .6em;
}
.katex .fontsize-ensurer.reset-size6.size3,.katex .katex-sizing.reset-size6.size3 {
  font-size: .7em;
}
.katex .fontsize-ensurer.reset-size6.size4,.katex .katex-sizing.reset-size6.size4 {
  font-size: .8em;
}
.katex .fontsize-ensurer.reset-size6.size5,.katex .katex-sizing.reset-size6.size5 {
  font-size: .9em;
}
.katex .fontsize-ensurer.reset-size6.size6,.katex .katex-sizing.reset-size6.size6 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size6.size7,.katex .katex-sizing.reset-size6.size7 {
  font-size: 1.2em;
}
.katex .fontsize-ensurer.reset-size6.size8,.katex .katex-sizing.reset-size6.size8 {
  font-size: 1.44em;
}
.katex .fontsize-ensurer.reset-size6.size9,.katex .katex-sizing.reset-size6.size9 {
  font-size: 1.728em;
}
.katex .fontsize-ensurer.reset-size6.size10,.katex .katex-sizing.reset-size6.size10 {
  font-size: 2.074em;
}
.katex .fontsize-ensurer.reset-size6.size11,.katex .katex-sizing.reset-size6.size11 {
  font-size: 2.488em;
}
.katex .fontsize-ensurer.reset-size7.size1,.katex .katex-sizing.reset-size7.size1 {
  font-size: .4166666667em;
}
.katex .fontsize-ensurer.reset-size7.size2,.katex .katex-sizing.reset-size7.size2 {
  font-size: .5em;
}
.katex .fontsize-ensurer.reset-size7.size3,.katex .katex-sizing.reset-size7.size3 {
  font-size: .5833333333em;
}
.katex .fontsize-ensurer.reset-size7.size4,.katex .katex-sizing.reset-size7.size4 {
  font-size: .6666666667em;
}
.katex .fontsize-ensurer.reset-size7.size5,.katex .katex-sizing.reset-size7.size5 {
  font-size: .75em;
}
.katex .fontsize-ensurer.reset-size7.size6,.katex .katex-sizing.reset-size7.size6 {
  font-size: .8333333333em;
}
.katex .fontsize-ensurer.reset-size7.size7,.katex .katex-sizing.reset-size7.size7 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size7.size8,.katex .katex-sizing.reset-size7.size8 {
  font-size: 1.2em;
}
.katex .fontsize-ensurer.reset-size7.size9,.katex .katex-sizing.reset-size7.size9 {
  font-size: 1.44em;
}
.katex .fontsize-ensurer.reset-size7.size10,.katex .katex-sizing.reset-size7.size10 {
  font-size: 1.7283333333em;
}
.katex .fontsize-ensurer.reset-size7.size11,.katex .katex-sizing.reset-size7.size11 {
  font-size: 2.0733333333em;
}
.katex .fontsize-ensurer.reset-size8.size1,.katex .katex-sizing.reset-size8.size1 {
  font-size: .3472222222em;
}
.katex .fontsize-ensurer.reset-size8.size2,.katex .katex-sizing.reset-size8.size2 {
  font-size: .4166666667em;
}
.katex .fontsize-ensurer.reset-size8.size3,.katex .katex-sizing.reset-size8.size3 {
  font-size: .4861111111em;
}
.katex .fontsize-ensurer.reset-size8.size4,.katex .katex-sizing.reset-size8.size4 {
  font-size: .5555555556em;
}
.katex .fontsize-ensurer.reset-size8.size5,.katex .katex-sizing.reset-size8.size5 {
  font-size: .625em;
}
.katex .fontsize-ensurer.reset-size8.size6,.katex .katex-sizing.reset-size8.size6 {
  font-size: .6944444444em;
}
.katex .fontsize-ensurer.reset-size8.size7,.katex .katex-sizing.reset-size8.size7 {
  font-size: .8333333333em;
}
.katex .fontsize-ensurer.reset-size8.size8,.katex .katex-sizing.reset-size8.size8 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size8.size9,.katex .katex-sizing.reset-size8.size9 {
  font-size: 1.2em;
}
.katex .fontsize-ensurer.reset-size8.size10,.katex .katex-sizing.reset-size8.size10 {
  font-size: 1.4402777778em;
}
.katex .fontsize-ensurer.reset-size8.size11,.katex .katex-sizing.reset-size8.size11 {
  font-size: 1.7277777778em;
}
.katex .fontsize-ensurer.reset-size9.size1,.katex .katex-sizing.reset-size9.size1 {
  font-size: .2893518519em;
}
.katex .fontsize-ensurer.reset-size9.size2,.katex .katex-sizing.reset-size9.size2 {
  font-size: .3472222222em;
}
.katex .fontsize-ensurer.reset-size9.size3,.katex .katex-sizing.reset-size9.size3 {
  font-size: .4050925926em;
}
.katex .fontsize-ensurer.reset-size9.size4,.katex .katex-sizing.reset-size9.size4 {
  font-size: .462962963em;
}
.katex .fontsize-ensurer.reset-size9.size5,.katex .katex-sizing.reset-size9.size5 {
  font-size: .5208333333em;
}
.katex .fontsize-ensurer.reset-size9.size6,.katex .katex-sizing.reset-size9.size6 {
  font-size: .5787037037em;
}
.katex .fontsize-ensurer.reset-size9.size7,.katex .katex-sizing.reset-size9.size7 {
  font-size: .6944444444em;
}
.katex .fontsize-ensurer.reset-size9.size8,.katex .katex-sizing.reset-size9.size8 {
  font-size: .8333333333em;
}
.katex .fontsize-ensurer.reset-size9.size9,.katex .katex-sizing.reset-size9.size9 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size9.size10,.katex .katex-sizing.reset-size9.size10 {
  font-size: 1.2002314815em;
}
.katex .fontsize-ensurer.reset-size9.size11,.katex .katex-sizing.reset-size9.size11 {
  font-size: 1.4398148148em;
}
.katex .fontsize-ensurer.reset-size10.size1,.katex .katex-sizing.reset-size10.size1 {
  font-size: .2410800386em;
}
.katex .fontsize-ensurer.reset-size10.size2,.katex .katex-sizing.reset-size10.size2 {
  font-size: .2892960463em;
}
.katex .fontsize-ensurer.reset-size10.size3,.katex .katex-sizing.reset-size10.size3 {
  font-size: .337512054em;
}
.katex .fontsize-ensurer.reset-size10.size4,.katex .katex-sizing.reset-size10.size4 {
  font-size: .3857280617em;
}
.katex .fontsize-ensurer.reset-size10.size5,.katex .katex-sizing.reset-size10.size5 {
  font-size: .4339440694em;
}
.katex .fontsize-ensurer.reset-size10.size6,.katex .katex-sizing.reset-size10.size6 {
  font-size: .4821600771em;
}
.katex .fontsize-ensurer.reset-size10.size7,.katex .katex-sizing.reset-size10.size7 {
  font-size: .5785920926em;
}
.katex .fontsize-ensurer.reset-size10.size8,.katex .katex-sizing.reset-size10.size8 {
  font-size: .6943105111em;
}
.katex .fontsize-ensurer.reset-size10.size9,.katex .katex-sizing.reset-size10.size9 {
  font-size: .8331726133em;
}
.katex .fontsize-ensurer.reset-size10.size10,.katex .katex-sizing.reset-size10.size10 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size10.size11,.katex .katex-sizing.reset-size10.size11 {
  font-size: 1.1996142719em;
}
.katex .fontsize-ensurer.reset-size11.size1,.katex .katex-sizing.reset-size11.size1 {
  font-size: .2009646302em;
}
.katex .fontsize-ensurer.reset-size11.size2,.katex .katex-sizing.reset-size11.size2 {
  font-size: .2411575563em;
}
.katex .fontsize-ensurer.reset-size11.size3,.katex .katex-sizing.reset-size11.size3 {
  font-size: .2813504823em;
}
.katex .fontsize-ensurer.reset-size11.size4,.katex .katex-sizing.reset-size11.size4 {
  font-size: .3215434084em;
}
.katex .fontsize-ensurer.reset-size11.size5,.katex .katex-sizing.reset-size11.size5 {
  font-size: .3617363344em;
}
.katex .fontsize-ensurer.reset-size11.size6,.katex .katex-sizing.reset-size11.size6 {
  font-size: .4019292605em;
}
.katex .fontsize-ensurer.reset-size11.size7,.katex .katex-sizing.reset-size11.size7 {
  font-size: .4823151125em;
}
.katex .fontsize-ensurer.reset-size11.size8,.katex .katex-sizing.reset-size11.size8 {
  font-size: .578778135em;
}
.katex .fontsize-ensurer.reset-size11.size9,.katex .katex-sizing.reset-size11.size9 {
  font-size: .6945337621em;
}
.katex .fontsize-ensurer.reset-size11.size10,.katex .katex-sizing.reset-size11.size10 {
  font-size: .8336012862em;
}
.katex .fontsize-ensurer.reset-size11.size11,.katex .katex-sizing.reset-size11.size11 {
  font-size: 1em;
}
.katex .delimsizing.size1 {
  font-family: KaTeX_Size1;
}
.katex .delimsizing.size2 {
  font-family: KaTeX_Size2;
}
.katex .delimsizing.size3 {
  font-family: KaTeX_Size3;
}
.katex .delimsizing.size4 {
  font-family: KaTeX_Size4;
}
.katex .delimsizing.mult .delim-size1>span {
  font-family: KaTeX_Size1;
}
.katex .delimsizing.mult .delim-size4>span {
  font-family: KaTeX_Size4;
}
.katex .nulldelimiter {
  display: inline-block;
  width: .12em;
}
.katex .delimcenter,.katex .op-symbol {
  position: relative;
}
.katex .op-symbol.small-op {
  font-family: KaTeX_Size1;
}
.katex .op-symbol.large-op {
  font-family: KaTeX_Size2;
}
.katex .katex-accent>.vlist-t,.katex .op-limits>.vlist-t {
  text-align: center;
}
.katex .katex-accent .accent-body {
  position: relative;
}
.katex .katex-accent .accent-body:not(.accent-full) {
  width: 0;
}
.katex .katex-overlay {
  display: block;
}
.katex .mtable .vertical-separator {
  display: inline-block;
  min-width: 1px;
}
.katex .mtable .arraycolsep {
  display: inline-block;
}
.katex .mtable .col-align-c>.vlist-t {
  text-align: center;
}
.katex .mtable .col-align-l>.vlist-t {
  text-align: left;
}
.katex .mtable .col-align-r>.vlist-t {
  text-align: right;
}
.katex .svg-align {
  text-align: left;
}
.katex svg {
  fill: currentColor;
  stroke: currentColor;
  display: block;
  height: inherit;
  position: absolute;
  width: 100%;
}
.katex svg path {
  stroke: none;
}
.katex svg {
  fill-rule: nonzero;
  fill-opacity: 1;
  stroke-width: 1;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-miterlimit: 4;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  stroke-opacity: 1;
}
.katex img {
  border-style: none;
  max-height: none;
  max-width: none;
  min-height: 0;
  min-width: 0;
}
.katex .katex-stretchy {
  display: block;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.katex .katex-stretchy:after,.katex .katex-stretchy:before {
  content: "";
}
.katex .hide-tail {
  overflow: hidden;
  position: relative;
  width: 100%;
}
.katex .halfarrow-left {
  left: 0;
  overflow: hidden;
  position: absolute;
  width: 50.2%;
}
.katex .halfarrow-right {
  overflow: hidden;
  position: absolute;
  right: 0;
  width: 50.2%;
}
.katex .brace-left {
  left: 0;
  overflow: hidden;
  position: absolute;
  width: 25.1%;
}
.katex .brace-center {
  left: 25%;
  overflow: hidden;
  position: absolute;
  width: 50%;
}
.katex .brace-right {
  overflow: hidden;
  position: absolute;
  right: 0;
  width: 25.1%;
}
.katex .x-arrow-pad {
  padding: 0 .5em;
}
.katex .cd-arrow-pad {
  padding: 0 .55556em 0 .27778em;
}
.katex .mover,.katex .munder,.katex .x-arrow {
  text-align: center;
}
.katex .boxpad {
  padding: 0 .3em;
}
.katex .fbox,.katex .fcolorbox {
  border: .04em solid;
  box-sizing: border-box;
}
.katex .cancel-pad {
  padding: 0 .2em;
}
.katex .cancel-lap {
  margin-left: -.2em;
  margin-right: -.2em;
}
.katex .katex-sout {
  border-bottom-style: solid;
  border-bottom-width: .08em;
}
.katex .angl {
  border-right: .049em solid;
  border-top: .049em solid;
  box-sizing: border-box;
  margin-right: .03889em;
}
.katex .anglpad {
  padding: 0 .03889em;
}
.katex .reflectbox {
  display: inline-block;
  transform: scaleX(-1);
}
.katex .eqn-num:before {
  content: "(" counter(katexEqnNo) ")";
  counter-increment: katexEqnNo;
}
.katex .mml-eqn-num:before {
  content: "(" counter(mmlEqnNo) ")";
  counter-increment: mmlEqnNo;
}
.katex .mtr-glue {
  width: 50%;
}
.katex .cd-vert-arrow {
  display: inline-block;
  position: relative;
}
.katex .cd-label-left {
  display: inline-block;
  position: absolute;
  right: calc(50% + .3em);
  text-align: left;
}
.katex .cd-label-right {
  display: inline-block;
  left: calc(50% + .3em);
  position: absolute;
  text-align: right;
}
.katex-display {
  display: block;
  margin: 1em 0;
  text-align: center;
}
.katex-display>.katex {
  display: block;
  text-align: center;
  white-space: nowrap;
}
.katex-display>.katex>.katex-html {
  display: block;
  position: relative;
}
.katex-display>.katex>.katex-html>.katex-tag {
  position: absolute;
  right: 0;
}
.katex-display.leqno>.katex>.katex-html>.katex-tag {
  left: 0;
  right: auto;
}
.katex-display.fleqn>.katex {
  padding-left: 2em;
  text-align: left;
}
body {
  counter-reset: katexEqnNo mmlEqnNo;
}
.conversation-panel {
  position: relative;
  display: flex;
  grid-column: 3;
  grid-row: 1;
  min-width: 0;
  flex-direction: column;
  background: var(--openbot-bg-canvas);
  transition: padding-right var(--panel-resize-duration, var(--openbot-duration-overlay)) cubic-bezier(0.22, 1, 0.36, 1);
}
.direct-conversation {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 0;
  grid-column: 3;
  grid-row: 1;
  flex-direction: column;
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
}
.app-frame-with-server-rail .direct-conversation {
  grid-column: 4;
}
.direct-conversation-header {
  display: flex;
  height: 46px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--openbot-hover);
  padding: 0 14px;
}
.direct-conversation-person {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}
.direct-conversation-person .person-avatar {
  --agent-avatar-optical-offset: -8px;
  width: 30px;
  height: 30px;
  border-radius: var(--openbot-radius-md);
}
.direct-conversation-person .person-avatar > i {
  display: none;
}
.direct-conversation-person h1 {
  overflow: hidden;
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: 560;
  line-height: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.direct-conversation-person div > span {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 11px;
}
.direct-conversation-person div > span i {
  width: 5px;
  height: 5px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control-hover);
}
.direct-conversation-person div > span.online {
  color: var(--openbot-success);
}
.direct-conversation-person div > span.online i {
  background: var(--openbot-success);
}
.direct-private-label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--openbot-text-readable);
  font-size: var(--openbot-text-sm);
}
.direct-private-label svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}
.direct-message-list {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  padding: 22px max(18px, calc((100% - 760px) / 2)) 28px;
}
.direct-conversation-state, .direct-conversation-empty {
  display: grid;
  min-height: 100%;
  place-content: center;
  justify-items: center;
  color: var(--openbot-text-muted);
  text-align: center;
}
.direct-conversation-empty h2 {
  margin: 14px 0 4px;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-xl);
  font-weight: 560;
}
.direct-conversation-empty p {
  max-width: 290px;
  margin: 0;
  font-size: var(--openbot-text-sm);
  line-height: 17px;
}
.direct-message-list .ui-message-group {
  gap: 0;
}
.direct-message > .ui-message-content {
  max-width: min(560px, 78%);
}
.direct-message .ui-bubble {
  max-width: 100%;
}
.direct-message .ui-bubble-content {
  font-size: var(--openbot-text-md);
  line-height: 19px;
  white-space: pre-wrap;
}
.direct-message time {
  color: var(--openbot-text-readable);
  font-size: var(--openbot-text-sm);
}
.direct-message .ui-message-footer {
  padding: 0 2px;
}
.direct-composer-wrap {
  flex: 0 0 auto;
  padding: 0 max(18px, calc((100% - 760px) / 2)) 16px;
}
.direct-typing-indicator {
  display: flex;
  min-height: 20px;
  align-items: center;
  gap: 7px;
  padding: 0 10px 4px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.direct-message-error {
  margin: 0 8px 6px;
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
}
.direct-composer {
  display: flex;
  min-height: 46px;
  align-items: flex-end;
  gap: 8px;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  padding: 6px 7px 6px 13px;
  box-shadow: 0 8px 25px var(--openbot-shadow-popover-ambient);
}
.direct-composer:focus-within {
  border-color: var(--openbot-border-strong);
}
.direct-composer textarea {
  min-width: 0;
  min-height: 32px;
  max-height: 130px;
  flex: 1;
  resize: none;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 6px 0;
  color: var(--openbot-text-primary);
  font: inherit;
  font-size: var(--openbot-text-md);
  line-height: 20px;
}
.direct-composer textarea::placeholder {
  color: var(--openbot-text-muted);
}
.direct-composer > button {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-success);
  color: var(--openbot-success);
  font-size: var(--openbot-text-xl);
  font-weight: 650;
}
.direct-composer > button:disabled {
  background: var(--openbot-border);
  color: var(--openbot-text-dim);
}
.app-frame-with-server-rail .conversation-panel {
  grid-column: 4;
}
.conversation-header {
  display: flex;
  height: 38px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  border-bottom: 0;
  padding: 0 12px 0 8px;
  background: transparent;
}
.conversation-heading-group {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}
.chat-search {
  position: absolute;
  z-index: 13;
  top: 19px;
  right: 16px;
  display: flex;
  width: min(308px, calc(100% - 32px));
  height: 34px;
  align-items: center;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  box-shadow: var(--openbot-shadow-raised);
  color: var(--openbot-text-muted);
}
.chat-search-icon {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  margin-left: 11px;
  stroke-width: var(--openbot-icon-stroke);
}
.chat-search .chat-search-input {
  min-width: 0;
  height: var(--openbot-control-md);
  flex: 1;
  border: 0;
  background: transparent;
  padding: 0 8px;
  box-shadow: none;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
}
.chat-search .chat-search-input:focus {
  border: 0;
  box-shadow: none;
  outline: 0;
}
.chat-search-input::-webkit-search-cancel-button {
  display: none;
}
.chat-search-position {
  min-width: 38px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.chat-search-separator {
  width: 1px;
  height: 20px;
  flex: 0 0 auto;
  background: var(--openbot-border);
}
.chat-search .chat-search-button {
  width: 26px;
  height: var(--openbot-control-md);
  flex: 0 0 auto;
  border: 0;
  border-radius: inherit;
  padding: 0;
}
.chat-search-button svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: var(--openbot-icon-stroke);
}
.chat-search .chat-search-close {
  margin-right: 3px;
}
::highlight(openbot-chat-search-results) {
  background: var(--openbot-accent-soft);
}
::highlight(openbot-chat-search-current) {
  background: var(--openbot-warning);
  color: var(--openbot-text-on-light);
}
.conversation-title[aria-label="View agent settings"]:hover {
  color: var(--openbot-text-primary);
}
.browser-panel {
  position: absolute;
  z-index: 14;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  width: var(--browser-panel-width, 380px);
  flex-direction: column;
  border-left: 1px solid var(--openbot-border);
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
  transition: border-color var(--openbot-duration-slow) ease, box-shadow var(--openbot-duration-slow) ease;
}
.file-preview-panel.t-panel-slide {
  --panel-translate-x: 24px;
  --panel-translate-y: 0px;
  transition: transform var(--panel-close-dur) var(--panel-ease), opacity var(--panel-close-dur) var(--panel-ease), filter var(--panel-close-dur) var(--panel-ease), border-color var(--openbot-duration-slow) ease, box-shadow var(--openbot-duration-slow) ease;
}
.file-preview-panel.t-panel-slide[data-open="true"] {
  transition: transform var(--panel-open-dur) var(--panel-ease), opacity var(--panel-open-dur) var(--panel-ease), filter var(--panel-open-dur) var(--panel-ease), border-color var(--openbot-duration-slow) ease, box-shadow var(--openbot-duration-slow) ease;
}
.file-preview-header {
  display: flex;
  height: 39px;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--openbot-border);
  padding: 0 7px 0 11px;
}
.file-preview-header h2 {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-preview-copy svg {
  width: 15px;
  height: 15px;
  stroke-width: 2;
}
.file-preview-file-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  stroke-width: var(--openbot-icon-stroke);
}
.file-preview-content {
  min-height: 0;
  flex: 1;
  overflow: auto;
  background: var(--openbot-bg-canvas);
}
.markdown-file-preview {
  min-width: 0;
}
.file-preview-markdown {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 26px 48px;
  color: var(--openbot-text-primary);
  overflow-wrap: anywhere;
}
.file-preview-markdown > .message-markdown {
  font-size: var(--openbot-text-md);
  line-height: 1.6;
}
.file-preview-markdown-status {
  min-width: 0;
  margin: 0;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface);
  padding: 18px 20px;
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  line-height: 1.55;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.file-preview-text {
  min-width: min-content;
  min-height: 100%;
  margin: 0;
  padding: 18px 20px 48px;
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  line-height: 1.55;
  tab-size: 2;
  white-space: pre;
}
.file-preview-text-wrap {
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.file-preview-image-wrap {
  display: grid;
  min-height: 100%;
  padding: 20px;
  place-items: center;
}
.file-preview-image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.file-preview-pdf {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--openbot-bg-canvas);
}
.file-preview-audio {
  display: block;
  width: calc(100% - 40px);
  margin: 20px;
}
.file-preview-video {
  display: block;
  width: 100%;
  max-height: 100%;
  background: var(--openbot-bg-canvas);
  object-fit: contain;
}
.file-preview-spreadsheet {
  min-width: 0;
  min-height: 100%;
  padding: 20px;
  color: var(--openbot-text-primary);
}
.file-preview-spreadsheet-status {
  margin: 0;
  color: var(--openbot-text-muted);
  font-family: var(--openbot-font-mono);
  white-space: pre-wrap;
}
.file-preview-spreadsheet-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  overflow-x: auto;
}
.file-preview-spreadsheet-tabs button {
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-control);
  padding: 6px 10px;
  color: var(--openbot-text-muted);
  white-space: nowrap;
}
.file-preview-spreadsheet-tabs button[aria-pressed="true"] {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-primary);
}
.file-preview-spreadsheet-table-wrap {
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface);
}
.file-preview-spreadsheet-table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: var(--openbot-text-sm);
}
.file-preview-spreadsheet-table caption {
  padding: 10px 12px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-align: left;
}
.file-preview-spreadsheet-table th, .file-preview-spreadsheet-table td {
  border-top: 1px solid var(--openbot-border);
  border-right: 1px solid var(--openbot-border);
  padding: 8px 12px;
  text-align: left;
  white-space: pre;
}
.file-preview-spreadsheet-table th {
  background: var(--openbot-bg-control);
  font-weight: 600;
}
.file-preview-spreadsheet-table td:last-child, .file-preview-spreadsheet-table th:last-child {
  border-right: 0;
}
.file-preview-spreadsheet-note {
  margin: 10px 0 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.file-preview-unsupported {
  display: grid;
  min-height: 100%;
  place-content: center;
  justify-items: center;
  gap: 8px;
  padding: 24px;
  color: var(--openbot-text-muted);
  text-align: center;
}
.file-preview-unsupported > svg {
  width: 28px;
  height: 28px;
  margin-bottom: 4px;
}
.file-preview-unsupported strong {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
}
.file-preview-unsupported span {
  max-width: 260px;
  font-size: var(--openbot-text-sm);
  line-height: 1.45;
}
.file-preview-unsupported button {
  margin-top: 6px;
}
.file-preview-truncated {
  position: sticky;
  bottom: 0;
  margin: 0;
  border-top: 1px solid var(--openbot-border);
  background: var(--openbot-bg-control);
  padding: 7px 12px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-align: center;
}
.browser-pip-window {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
}
.browser-pip-surface {
  width: 100%;
  height: 100%;
}
.file-preview-folder {
  display: grid;
  margin: 0;
  padding: 8px;
  list-style: none;
}
.file-preview-folder-entry {
  display: grid;
  width: 100%;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  justify-content: stretch;
  padding: 6px 10px;
  font-size: var(--openbot-text-sm);
  text-align: left;
}
.file-preview-folder-name {
  overflow: hidden;
  color: var(--openbot-text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-preview-folder-meta {
  color: var(--openbot-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.file-preview-folder-empty {
  margin: 0;
  padding: 24px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-align: center;
}
.conversation-panel.browser-panel-active {
  padding-right: var(--browser-panel-width, 380px);
}
.remote-desktop-workspace {
  position: fixed;
  z-index: var(--openbot-layer-toast);
  inset: 0;
  display: flex;
  min-width: 0;
  flex-direction: column;
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity var(--openbot-duration-fast) cubic-bezier(0.2, 0, 0, 1), visibility 0s linear var(--openbot-duration-fast);
}
.remote-desktop-workspace-visible {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0s;
}
.remote-desktop-workspace:focus {
  outline: none;
}
.remote-desktop-header {
  display: flex;
  height: 38px;
  min-height: 38px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  border-bottom: 1px solid var(--openbot-border);
  padding: 0 8px 0 0;
  background: var(--openbot-bg-sidebar);
}
.remote-desktop-workspace-darwin .remote-desktop-header {
  padding-left: 84px;
}
.remote-desktop-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  flex: 0 1 auto;
  justify-content: flex-end;
  gap: 4px;
  margin-left: auto;
  white-space: nowrap;
}
.remote-desktop-display-controls {
  min-width: 0;
  display: flex;
  flex: 0 1 168px;
  align-items: center;
}
.remote-desktop-back-button, .remote-desktop-disconnect-button {
  flex: 0 0 auto;
}
.remote-desktop-disconnect-button {
  color: var(--openbot-text-muted);
}
.remote-desktop-disconnect-button:hover:not(:disabled, [aria-disabled="true"]), .remote-desktop-disconnect-button:focus-visible:not(:disabled, [aria-disabled="true"]) {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
}
.remote-desktop-stage {
  position: relative;
  min-height: 0;
  flex: 1;
  overflow: hidden;
  background: var(--openbot-accent);
}
.remote-desktop-viewer, .remote-desktop-viewer > div {
  width: 100%;
  height: 100%;
}
.remote-desktop-viewer {
  overflow: hidden;
  display: block;
  object-fit: contain;
}
.remote-desktop-display-select {
  width: min(168px, 22vw);
  min-width: 112px;
  flex: 0 1 168px;
  font-size: var(--openbot-text-sm);
}
.remote-desktop-display-select-content {
  z-index: calc(var(--openbot-layer-toast) + 1);
}
.remote-desktop-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
  background: var(--openbot-bg-overlay);
  padding: 24px;
  text-align: center;
}
.remote-desktop-overlay strong {
  max-width: 330px;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: 600;
}
.remote-desktop-connecting-avatar {
  width: 56px;
  height: 56px;
  margin-bottom: 5px;
  filter: drop-shadow(0 8px 18px var(--openbot-accent-soft));
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity var(--openbot-duration-overlay) var(--openbot-ease-out), transform var(--openbot-duration-overlay) var(--openbot-ease-out);
  will-change: opacity, transform;
}
@starting-style {
  .remote-desktop-connecting-avatar {
    opacity: 0;
    transform: translateY(4px) scale(0.96);
  }
}
.remote-desktop-overlay > span:not(.ui-spinner):not(.remote-desktop-empty-mark) {
  max-width: 330px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
}
.remote-desktop-empty-mark {
  display: grid;
  width: 38px;
  height: 38px;
  margin-bottom: 5px;
  place-items: center;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-hover);
  color: var(--openbot-text-muted);
}
.remote-desktop-empty-mark svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}
.remote-desktop-overlay > button {
  height: 34px;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-border);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: 600;
}
.remote-desktop-overlay > button:hover {
  background: var(--openbot-border-strong);
}
.remote-desktop-overlay > button {
  min-width: 92px;
  margin-top: 5px;
  padding: 0 13px;
}
.remote-desktop-button-dot {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 5px;
  height: 5px;
  border: 1px solid var(--openbot-bg-sidebar);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success);
}
.browser-pip-controls-document, .browser-pip-controls-document body, .browser-pip-controls-document #root {
  background: transparent;
}
.browser-pip-hover-controls {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  padding: 4px;
  opacity: 0;
  transition: opacity var(--openbot-duration-fast) ease;
  -webkit-app-region: drag;
}
.browser-pip-hover-controls:hover, .browser-pip-hover-controls:focus-within, .browser-pip-window-hover .browser-pip-hover-controls {
  opacity: 1;
}
.browser-pip-hover-button {
  display: grid;
  width: 20px;
  height: 22px;
  flex: 0 0 20px;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  padding: 0;
  background: var(--openbot-bg-overlay);
  color: var(--openbot-text-secondary);
  -webkit-app-region: no-drag;
}
.browser-pip-hover-button:hover {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}
.browser-pip-hover-button .browser-toolbar-icon {
  width: 12px;
  height: 12px;
}
.browser-pip-hover-button:active {
  transform: scale(0.96);
  transition: transform var(--openbot-duration-fast) cubic-bezier(0.23, 1, 0.32, 1);
}
.browser-tab-control-icon {
  width: 12px;
  height: 12px;
  overflow: visible;
  fill: currentColor;
}
.browser-toolbar-button {
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--openbot-text-muted);
}
.browser-toolbar-button:hover:not(:disabled) {
  background: var(--openbot-border);
  color: var(--openbot-text-primary);
}
.browser-toolbar-button {
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  border-radius: var(--openbot-radius-sm);
}
.browser-toolbar-button:disabled {
  color: var(--openbot-text-dim);
  cursor: default;
}
.browser-toolbar-icon {
  width: 15px;
  height: 15px;
}
.browser-recording-status, .browser-diagnostic-status {
  display: inline-flex;
  height: 24px;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  border-radius: var(--openbot-radius-sm);
  padding: 0 5px;
  font-size: var(--openbot-text-sm);
  line-height: 1;
}
.browser-recording-status {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
}
.browser-diagnostic-status {
  background: var(--openbot-warning-soft);
  color: var(--openbot-warning);
}
.browser-recording-status svg, .browser-diagnostic-status svg {
  width: 12px;
  height: 12px;
}
.browser-surface {
  position: relative;
  min-height: 0;
  flex: 1;
  overflow: hidden;
  background: var(--openbot-bg-canvas);
}
.browser-live-view {
  position: absolute;
  inset: 0;
}
.browser-live-view canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.browser-empty-state {
  display: grid;
  height: 100%;
  place-content: center;
  gap: 5px;
  color: var(--openbot-text-muted);
  text-align: center;
}
.browser-empty-state strong {
  font-size: var(--openbot-text-lg);
  font-weight: 600;
}
.browser-empty-state span {
  font-size: var(--openbot-text-sm);
}
.agent-settings-avatar-picker {
  position: relative;
  z-index: 30;
  display: grid;
  width: 62px;
  height: 62px;
  margin: var(--openbot-space-2) auto var(--openbot-space-4);
  place-items: center;
}
.agent-settings-avatar {
  position: relative;
  display: grid;
  width: 62px;
  height: 62px;
  margin: 0;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  background: transparent;
}
.agent-settings-avatar .agent-avatar {
  --agent-avatar-optical-offset: calc(62px * -0.14);
  width: 62px;
  height: 62px;
}
.agent-settings-avatar .agent-avatar > svg {
  width: 128%;
  height: 128%;
}
.agent-settings-avatar:hover {
  filter: brightness(1.08);
}
.agent-settings-avatar-badge {
  position: absolute;
  right: -4px;
  bottom: -4px;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 3px solid var(--openbot-bg-canvas);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-primary);
}
.agent-settings-avatar-badge-icon {
  width: 11px;
  height: 11px;
}
.agent-routines-overlay {
  position: absolute;
  z-index: 2;
  top: 39px;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-y: auto;
  background: var(--openbot-bg-canvas);
}
.agent-routines-settings {
  min-height: 100%;
  padding: 12px 15px 28px;
}
.agent-routines-list, .agent-routine-run-list {
  display: grid;
}
.agent-routines-list {
  gap: 0;
}
.agent-routine-list-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px;
  align-items: center;
}
.agent-routine-row {
  display: grid;
  width: 100%;
  min-height: 48px;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  padding: 5px 7px;
  text-align: left;
  transition: border-color var(--openbot-duration-hover) ease, background-color var(--openbot-duration-hover) ease;
}
.agent-routine-row:focus-visible {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-hover);
}
.agent-routine-row > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 2px;
}
.agent-routine-row strong, .agent-routine-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-routine-row strong {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: 500;
}
.agent-routine-row small, .agent-routines-empty {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.agent-routine-action-buttons svg {
  width: 15px;
  height: 15px;
}
.agent-routine-status-icon-active, .agent-routine-status-icon-paused {
  display: grid;
  place-items: center;
}
.agent-routine-status-icon-active {
  color: var(--openbot-success);
}
.agent-routine-status-icon-paused {
  color: var(--openbot-text-muted);
}
.agent-routine-status-icon-active > svg, .agent-routine-status-icon-paused > svg {
  width: 14px;
  height: 14px;
  stroke-width: var(--openbot-icon-stroke);
}
@media (hover: hover) and (pointer: fine) {
  .agent-routine-row:hover {
    border-color: var(--openbot-border);
    background: var(--openbot-hover);
  }
}
.agent-routine-editor-actions {
  display: grid;
  gap: 11px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--openbot-border);
  padding-bottom: 16px;
}
.agent-routine-active-toggle, .agent-routine-action-buttons, .agent-routine-run-row {
  display: flex;
  align-items: center;
}
.agent-routine-active-toggle {
  justify-content: space-between;
}
.agent-routine-active-toggle > span {
  display: grid;
  gap: 2px;
}
.agent-routine-active-toggle strong {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
}
.agent-routine-active-toggle small {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.agent-routine-action-buttons {
  flex-wrap: wrap;
  gap: 7px;
}
.agent-routine-action-buttons button {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
  padding: 7px 9px;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.agent-routine-action-buttons button:hover:not(:disabled) {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}
.agent-routine-when, .agent-routine-history {
  margin-top: 24px;
}
.agent-routine-history {
  border-top: 1px solid var(--openbot-border);
  padding-top: 20px;
}
.agent-routine-run-list {
  margin-top: 10px;
}
.agent-routine-run-row {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  gap: 9px;
  border-bottom: 1px solid var(--openbot-border);
  padding: 9px 2px;
}
.agent-routines-overlay {
  top: 0;
  overflow: hidden;
}
.agent-routines-settings {
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
}
.agent-routines-header {
  width: 100%;
}
.agent-routines-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-0-5);
}
.agent-routines-body {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  padding: 14px 15px 28px;
  scrollbar-width: none;
}
.agent-routines-body::-webkit-scrollbar {
  display: none;
}
.agent-routine-editor {
  display: grid;
  gap: 14px;
}
.agent-routine-editor > .settings-field {
  margin-bottom: 0;
}
.agent-routine-editor-actions {
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  border: 0;
  padding: 0;
}
.agent-routine-active-toggle {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
}
.ui-switch-field.agent-routine-active-toggle {
  width: auto;
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.agent-routine-active-toggle .ui-switch-label {
  font-size: var(--openbot-text-sm);
  font-weight: inherit;
}
.agent-routine-action-buttons {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 7px;
}
.agent-routine-action-buttons button {
  min-height: 32px;
  border-radius: var(--openbot-radius-md);
  padding-inline: 11px;
  font-size: var(--openbot-text-sm);
}
.agent-routine-action-buttons .ui-button-variant-destructive {
  border-color: transparent;
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
}
.agent-routine-action-buttons .ui-button-variant-default {
  border-color: transparent;
  background: var(--openbot-surface-light);
  color: var(--openbot-text-on-light);
}
@media (hover: hover) and (pointer: fine) {
  .agent-routine-action-buttons .ui-button-variant-destructive:hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-danger-soft-hover);
    color: var(--openbot-danger);
  }
  .agent-routine-action-buttons .ui-button-variant-default:hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-surface-light);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--openbot-surface-light) 82%, transparent);
    }
    color: var(--openbot-text-on-light);
  }
}
.agent-routine-instruction-field textarea {
  height: 158px;
  min-height: 158px;
  max-height: 158px;
  overflow-y: auto;
  resize: none;
}
.agent-routine-history {
  margin-top: 2px;
}
.agent-routine-when {
  margin-top: 0;
}
.agent-routine-when h3, .agent-routine-history h3 {
  margin: 0 0 var(--openbot-space-1-5) var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  font-weight: inherit;
  line-height: var(--openbot-leading-md);
}
.agent-routine-event-filter {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) auto;
  align-items: center;
  gap: var(--openbot-space-2);
}
.agent-routine-history {
  border: 0;
  padding-top: 0;
}
.agent-routine-run-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-top: 0;
}
.agent-routine-run-row {
  display: flex;
  width: 100%;
  min-height: 32px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  padding: 5px var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  text-align: left;
}
.ui-button.agent-routine-run-link {
  cursor: pointer;
}
.agent-routine-run-text {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-wrap: wrap;
  gap: 0 var(--openbot-space-2);
  white-space: nowrap;
}
.agent-routine-run-note {
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-routine-history-error {
  margin-bottom: var(--openbot-space-2);
}
.agent-routine-run-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.agent-routine-delivery-row {
  display: flex;
  min-height: 28px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 var(--openbot-space-2) 5px;
  font-size: var(--openbot-text-sm);
}
.agent-routine-delivery-note {
  min-width: 0;
  color: var(--openbot-text-muted);
  overflow-wrap: anywhere;
  white-space: normal;
}
.agent-routine-delivery-failed, .agent-routine-delivery-uncertain {
  color: var(--openbot-warning);
}
@media (hover: hover) and (pointer: fine) {
  .ui-button.agent-routine-run-link:hover:not(:disabled) {
    background: var(--openbot-bg-control-hover);
  }
}
.agent-routine-run-icon {
  display: grid;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  place-items: center;
  color: var(--openbot-text-muted);
}
.agent-routine-run-icon > svg {
  width: 16px;
  height: 16px;
  stroke-width: var(--openbot-icon-stroke);
}
.agent-routine-run-icon-succeeded {
  color: var(--openbot-success);
}
.agent-routine-run-icon-failed {
  color: var(--openbot-danger);
}
.agent-routine-run-icon-needs-attention {
  color: var(--openbot-warning);
}
.agent-routine-run-icon-running, .agent-routine-run-icon-queued, .agent-routine-run-icon-interrupted, .agent-routine-run-icon-cancelled {
  color: var(--openbot-text-muted);
}
.agent-memories-overlay[data-closed] {
  animation: agent-dialog-overlay-out var(--openbot-duration-dialog) ease;
}
.agent-memories-modal {
  position: fixed;
  z-index: calc(var(--openbot-layer-dialog) + 1);
  top: 50%;
  left: 50%;
  width: min(560px, calc(100vw - 48px));
  height: min(456px, calc(100dvh - 48px));
  min-height: 320px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  outline: 0;
  background: var(--openbot-bg-control);
  color: var(--openbot-text-primary);
  transform: translate(-50%, -50%);
  transform-origin: center;
}
.agent-memories-header {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  border-bottom: 1px solid var(--openbot-border);
  padding: var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-3);
}
.agent-memories-heading {
  min-width: 0;
}
.agent-skills-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-1);
}
.agent-skills-parent {
  min-width: 0;
  height: auto;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--openbot-text-muted);
  padding: 0;
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-lg);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-skills-crumb {
  flex: 0 0 auto;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
}
.agent-skills-heading h2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-memories-heading h2 {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-lg);
}
.agent-memories-header-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--openbot-space-1);
}
.agent-memories-header-actions svg, .agent-memory-delete-button svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.agent-memories-add-button {
  color: var(--openbot-text-secondary);
}
.agent-memories-body {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: var(--openbot-space-2);
}
.agent-memory-composer {
  display: grid;
  gap: var(--openbot-space-2);
  margin: 0 0 var(--openbot-space-3);
  padding: var(--openbot-space-1) var(--openbot-space-1) 0;
}
.agent-memory-input {
  min-height: 64px;
  resize: none;
  border-color: var(--openbot-border);
  background: transparent;
}
.agent-memory-input:focus-visible {
  border-color: var(--openbot-border-strong);
  outline: 0;
  box-shadow: none;
}
.agent-memory-composer-actions, .agent-memory-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-1);
}
.agent-memory-inclusion-actions {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-1);
}
.agent-memory-list {
  min-height: 0;
  display: grid;
  grid-auto-rows: max-content;
  flex: 1;
  align-content: start;
  gap: var(--openbot-space-0-5);
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  scrollbar-width: none;
}
.agent-memory-row {
  min-height: 50px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--openbot-control-md) + var(--openbot-space-2));
  align-items: stretch;
  border-radius: var(--openbot-radius-md);
  overflow: hidden;
  background: transparent;
}
@media (hover: hover) and (pointer: fine) {
  .agent-memory-row:hover {
    background: var(--openbot-bg-control-hover);
  }
}
.agent-memory-row:has(.agent-memory-row-main:focus-visible) {
  background: var(--openbot-bg-control-active);
}
.agent-memory-row-main {
  min-width: 0;
  width: 100%;
  height: 100%;
  display: grid;
  align-content: center;
  justify-content: stretch;
  justify-items: start;
  gap: var(--openbot-space-1);
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  padding: var(--openbot-space-2) var(--openbot-space-3);
  color: inherit;
  font: inherit;
  text-align: left;
}
.agent-memory-row-main:focus-visible {
  box-shadow: none;
}
.agent-memory-row .agent-memory-row-main:hover {
  background: transparent;
}
.agent-memory-text {
  display: block;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  white-space: pre-wrap;
}
.agent-memory-meta {
  display: block;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.agent-memory-delete-button {
  align-self: center;
  align-items: center;
  justify-self: center;
  color: var(--openbot-text-muted);
}
.agent-memory-editor {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--openbot-space-2);
  background: transparent;
  padding: var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-2);
}
.agent-memory-row:has(.agent-memory-editor), .agent-memory-row:has(.agent-memory-editor):hover {
  background: transparent;
}
.agent-memory-state, .agent-memory-limit, .agent-memory-error {
  margin: var(--openbot-space-1);
  border-radius: var(--openbot-radius-md);
  padding: var(--openbot-space-3);
  font-size: var(--openbot-text-sm);
}
.agent-memory-state {
  min-height: 160px;
  display: grid;
  place-items: center;
  color: var(--openbot-text-muted);
  text-align: center;
}
.agent-memory-limit {
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-secondary);
}
.agent-memory-error {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
}
.shared-table-list {
  min-height: 0;
  display: grid;
  flex: 1;
  align-content: start;
  gap: var(--openbot-space-0-5);
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  scrollbar-width: none;
}
.shared-table-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
  padding: var(--openbot-space-2) var(--openbot-space-3);
}
.shared-table-main {
  min-width: 0;
  display: grid;
  gap: var(--openbot-space-1);
}
.shared-table-name {
  display: block;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-md);
}
.shared-table-confirm {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface);
  padding: var(--openbot-space-3);
}
.shared-table-confirm p {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.shared-table-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-1);
}
.agent-memories-footer {
  display: flex;
  min-height: 48px;
  align-items: center;
  padding: var(--openbot-space-2) var(--openbot-space-3) var(--openbot-space-3);
}
.agent-skill-empty {
  min-height: 160px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--openbot-space-3);
}
.agent-skill-empty .agent-memory-state {
  min-height: 0;
  padding: 0;
}
.agent-skill-rows {
  display: grid;
  align-content: start;
  gap: 2px;
}
.agent-skill-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--openbot-space-2);
  min-height: 56px;
  padding: var(--openbot-space-1) var(--openbot-space-2);
  border-radius: var(--openbot-radius-lg);
}
.agent-skill-open {
  min-width: 0;
  height: auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  justify-content: stretch;
  justify-items: stretch;
  align-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-1);
  color: inherit;
  text-align: left;
}
.agent-skill-open:hover {
  background: transparent;
}
@media (hover: hover) and (pointer: fine) {
  .agent-skill-row:hover {
    background: var(--openbot-bg-control-hover);
  }
}
.agent-skill-icon {
  width: 40px;
  height: 40px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  color: var(--openbot-accent-text);
}
.agent-skill-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.agent-skill-icon svg {
  width: 20px;
  height: 20px;
}
.agent-skill-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.agent-skill-title {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: var(--openbot-space-2);
}
.agent-skill-title strong {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-skill-row:has(.agent-skill-update) {
  grid-template-columns: minmax(0, 1fr) auto auto auto;
}
.ui-button.agent-skill-update {
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
  font-size: var(--openbot-text-sm);
}
.ui-button.agent-skill-update:hover:not(:disabled):not([data-disabled]), .ui-button.agent-skill-update:focus-visible {
  background: var(--openbot-accent-soft);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-accent-soft), var(--openbot-accent) 12%);
  }
  color: var(--openbot-accent-text);
}
.agent-skill-copy small {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-skill-row-disabled .agent-skill-title strong {
  color: var(--openbot-text-muted);
}
.agent-skill-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-secondary);
  opacity: 0;
  cursor: pointer;
}
.agent-skill-more svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.agent-skill-row:hover .agent-skill-more, .agent-skill-row:focus-within .agent-skill-more, .agent-skill-row:has([aria-expanded="true"]) .agent-skill-more {
  opacity: 1;
}
.agent-skill-menu {
  z-index: calc(var(--openbot-layer-dialog) + var(--openbot-layer-popover) + 1);
}
.agent-skills-modal .ui-switch[data-checked] {
  background: var(--openbot-accent);
}
.agent-skills-modal .ui-switch-thumb[data-checked] {
  background: var(--openbot-text-primary);
}
.agent-local-library, .agent-skill-detail {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: var(--openbot-space-4);
  overflow: auto;
  padding: var(--openbot-space-3);
  scrollbar-width: none;
}
.agent-local-library::-webkit-scrollbar, .agent-skill-detail::-webkit-scrollbar {
  display: none;
}
.agent-memories-modal[data-expanded] {
  animation: agent-dialog-content-in var(--openbot-duration-dialog) ease;
}
.agent-memories-modal[data-closed] {
  animation: agent-dialog-content-out var(--openbot-duration-dialog) ease;
}
@keyframes agent-dialog-overlay-out {
  to {
    opacity: 0;
  }
}
@keyframes agent-dialog-content-in {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
  }
}
@keyframes agent-dialog-content-out {
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
  }
}
@media (max-width: 520px) {
  .agent-memories-modal {
    width: calc(100vw - 24px);
    height: calc(100dvh - 24px);
  }
  .agent-memories-header {
    padding-left: var(--openbot-space-3);
  }
}
@media (prefers-reduced-motion: reduce) {
  .agent-memories-overlay, .agent-memories-modal {
    animation: none;
  }
}
.agent-settings-page {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
}
.agent-settings-page > .settings-field {
  margin: 0;
}
.agent-settings-switch-row {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  padding: 0 var(--openbot-space-3);
}
.agent-settings-switch-row > .settings-link-label {
  flex: 1 1 auto;
}
.agent-settings-runtime-rows .provider-model-trigger-field, .agent-settings-runtime-rows .agent-settings-runtime-row {
  width: 100%;
  height: auto;
  min-height: 40px;
  gap: var(--openbot-space-2);
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 var(--openbot-space-3);
  box-shadow: none;
  font-size: var(--openbot-text-md);
}
.agent-settings-runtime-rows .provider-model-trigger-field:hover:not(:disabled), .agent-settings-runtime-rows .provider-model-trigger-field[aria-expanded="true"], .agent-settings-runtime-rows .agent-settings-runtime-row[data-expanded] {
  background: var(--openbot-hover);
}
.agent-settings-runtime-rows .provider-model-trigger-field:focus-visible, .agent-settings-runtime-rows .ui-select .agent-settings-runtime-row:focus-visible {
  outline: 0;
  background: var(--openbot-hover);
  box-shadow: inset 0 0 0 1px var(--openbot-border-focus);
}
.agent-settings-runtime-rows .provider-model-trigger-field .provider-model-field-label, .agent-settings-runtime-label {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: 18px;
  text-align: left;
}
.agent-settings-runtime-rows .provider-model-trigger-field .provider-model-trigger-name, .agent-settings-runtime-row .ui-select-value {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
}
.agent-settings-runtime-row .ui-select-trigger-icon {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
@media (hover: hover) and (pointer: fine) {
  .agent-settings-runtime-rows .provider-model-trigger-field:hover .provider-model-trigger-name, .agent-settings-runtime-row:hover .ui-select-value {
    color: var(--openbot-text-secondary);
  }
}
.agent-settings-runtime-rows .provider-model-popover {
  width: var(--kb-popper-anchor-width);
  min-width: 0;
}
.agent-settings-runtime-path {
  display: grid;
  gap: 2px;
  padding: 11px var(--openbot-space-3);
}
.agent-settings-runtime-path > span:last-child {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 17px;
  overflow-wrap: anywhere;
  user-select: text;
}
.agent-settings-runtime-note {
  margin: 0;
  padding-inline: var(--openbot-space-1);
  text-wrap: pretty;
}
.agent-settings-save-error {
  margin: 0 var(--openbot-space-1);
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
}
.agent-settings-notifications {
  display: flex;
  min-height: 70px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-border);
  padding: 13px 12px;
}
.agent-settings-notifications > div {
  min-width: 0;
}
.agent-settings-notifications strong, .agent-settings-notifications span {
  display: block;
}
.agent-settings-notifications strong {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: 500;
  line-height: 18px;
}
.agent-settings-notifications div > span {
  max-width: 194px;
  margin-top: 2px;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: 15px;
}
.routine-trigger-row, .routine-weekday-strip, .routine-calendar-days {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}
:is(.routine-schedule-picker, .routine-popover, .routine-chip-select-content) :is(button, input, textarea):focus-visible {
  outline: 0;
}
:is(.routine-schedule-picker, .routine-popover) .ui-button:focus-visible {
  box-shadow: var(--openbot-focus-ring);
}
.routine-schedule-picker {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-1-5);
}
.routine-trigger-row {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: var(--openbot-space-2);
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-shadow-popover-ambient);
  padding: var(--openbot-space-1);
  transition: border-color var(--openbot-duration-hover) ease;
}
.routine-trigger-row:focus-within {
  border-color: var(--openbot-text-muted);
}
.routine-schedule-picker[data-density="card"] .routine-trigger-row {
  border: 0;
  background: none;
  padding: 0;
}
.routine-trigger-icon {
  display: inline-flex;
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
  color: var(--openbot-text-on-accent);
}
.routine-trigger-icon svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: 2;
}
.routine-schedule-picker[data-density="panel"] .routine-trigger-icon {
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
}
.routine-schedule-picker[data-density="card"] .routine-trigger-icon {
  display: none;
}
.routine-trigger-chips {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: var(--openbot-space-2);
  overflow: clip;
  overflow-clip-margin: var(--openbot-space-1);
}
.routine-trigger-phrase {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--openbot-space-2);
}
.routine-trigger-phrase-flexible {
  min-width: 0;
  flex-shrink: 1;
}
.routine-connector {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
.routine-chip-select {
  width: auto;
  flex: 0 0 auto;
}
.routine-chip-select-flexible {
  min-width: 0;
  flex-shrink: 1;
}
.routine-chip {
  display: inline-flex;
  height: var(--openbot-control-md);
  min-width: 0;
  max-width: 100%;
  align-items: center;
  gap: var(--openbot-space-1-5);
  cursor: pointer;
  border: 0;
  border-radius: var(--openbot-radius-md);
  outline: 0;
  background: var(--openbot-bg-control-active);
  padding: 0 var(--openbot-space-3);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
  white-space: nowrap;
  flex: 0 0 auto;
  transition: background-color var(--openbot-duration-hover) ease;
}
.routine-chip-flexible {
  flex-shrink: 1;
}
.routine-chip-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.routine-schedule-picker[data-density="panel"] .routine-chip {
  height: var(--openbot-control-sm);
  border-radius: var(--openbot-radius-xs);
}
.routine-schedule-picker[data-density="card"] .routine-chip {
  height: var(--openbot-control-sm);
  padding: 0 var(--openbot-space-2);
  font-size: var(--openbot-text-md);
}
.routine-chip:focus-visible {
  box-shadow: var(--openbot-focus-ring);
}
.routine-chip:is([aria-expanded="true"], [data-expanded]) {
  background: var(--openbot-bg-control-hover);
  box-shadow: 0 0 0 1px var(--openbot-border-strong);
}
.routine-chip:disabled, .routine-chip[data-disabled] {
  cursor: default;
  background: transparent;
  padding: 0;
  color: var(--openbot-text-secondary);
}
@media (hover: hover) and (pointer: fine) {
  .routine-chip:hover:not(:disabled, [data-disabled]) {
    background: var(--openbot-bg-control-hover);
    box-shadow: 0 0 0 1px var(--openbot-border-strong);
  }
}
.routine-chip-select-content {
  min-width: 160px;
}
.routine-chip-select-content .ui-select-item {
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
.routine-cron-input {
  min-width: 0;
  max-width: 220px;
  flex: 1 1 180px;
  font-family: var(--openbot-font-mono);
}
.routine-schedule-hint {
  margin: 0;
  padding-left: var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.routine-schedule-picker[data-density="card"] .routine-schedule-hint {
  padding-left: 0;
}
.routine-popover {
  z-index: var(--openbot-layer-popover);
  border-radius: var(--openbot-radius-lg);
  padding: var(--openbot-space-2);
}
.routine-weekday-strip {
  display: flex;
  gap: var(--openbot-space-1);
}
.routine-day-item {
  display: inline-flex;
}
.routine-day {
  display: inline-flex;
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  min-width: 0;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--openbot-radius-pill);
  padding: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.routine-day-item:has(:focus-visible) .routine-day {
  box-shadow: var(--openbot-focus-ring);
}
.routine-weekday-strip .routine-day {
  background: var(--openbot-bg-control-active);
}
@media (hover: hover) and (pointer: fine) {
  .routine-day:hover:not(:disabled, .routine-day-selected) {
    background: var(--openbot-hover);
    color: var(--openbot-text-primary);
  }
}
.routine-day.routine-day-selected, .routine-day.routine-day-selected:hover {
  background: var(--openbot-text-primary);
  color: var(--openbot-bg-canvas);
}
.routine-day.routine-day-selected:focus-visible {
  box-shadow: var(--openbot-focus-ring);
}
.routine-clock-input {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
}
.routine-clock-segment.ui-input {
  width: 48px;
  height: var(--openbot-control-lg);
  border: 0;
  background: var(--openbot-bg-control-active);
  padding: 0;
  font-size: var(--openbot-text-lg);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.routine-clock-segment.ui-input:focus-visible {
  box-shadow: var(--openbot-focus-ring);
}
.routine-clock-separator {
  color: var(--openbot-text-muted);
}
.routine-segmented {
  display: flex;
  margin-left: var(--openbot-space-1);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control-active);
  padding: var(--openbot-space-0-5);
}
.routine-segmented-control {
  display: inline-flex;
  height: calc(var(--openbot-control-lg) - 2 * var(--openbot-space-0-5));
  min-width: 44px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--openbot-radius-sm);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.routine-segmented-control label {
  cursor: pointer;
}
.routine-segmented-control[data-checked] {
  background: var(--openbot-text-primary);
  color: var(--openbot-bg-canvas);
}
.routine-segmented-item:has(:focus-visible) .routine-segmented-control {
  box-shadow: var(--openbot-focus-ring);
}
.routine-window-menu {
  display: grid;
  width: 240px;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-1);
}
.routine-window-options {
  display: grid;
  gap: var(--openbot-space-0-5);
}
.routine-window-repeat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  border-top: 1px solid var(--openbot-border);
  padding: var(--openbot-space-2) var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-3);
}
.routine-window-repeat-label {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
.routine-window-option-control {
  display: flex;
  min-height: var(--openbot-control-lg);
  align-items: center;
  gap: var(--openbot-space-2);
  cursor: pointer;
  border-radius: var(--openbot-radius-md);
  padding: var(--openbot-space-2) var(--openbot-space-3);
}
.routine-window-option-control[data-checked] {
  background: var(--openbot-hover);
}
.routine-window-option:has(:focus-visible) .routine-window-option-control {
  box-shadow: var(--openbot-focus-ring);
}
@media (hover: hover) and (pointer: fine) {
  .routine-window-option-control:hover {
    background: var(--openbot-hover);
  }
}
.routine-window-option-label {
  flex: 1;
  cursor: pointer;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
.routine-window-option-check {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
}
.routine-window-option-check svg {
  width: 100%;
  height: 100%;
}
.routine-window-range {
  display: grid;
  gap: var(--openbot-space-1-5);
  padding: var(--openbot-space-1) var(--openbot-space-3) var(--openbot-space-2);
}
.routine-window-range-times {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.routine-window-range-count {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.routine-calendar {
  display: grid;
  width: calc(7 * var(--openbot-control-md) + 6 * var(--openbot-space-0-5));
  gap: var(--openbot-space-1);
}
.routine-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--openbot-space-1);
}
.routine-calendar-title {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.routine-calendar-weekdays, .routine-calendar-days {
  display: grid;
  grid-template-columns: repeat(7, var(--openbot-control-md));
  gap: var(--openbot-space-0-5);
}
.routine-calendar-weekdays span {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-align: center;
}
.routine-calendar-day:focus-visible {
  box-shadow: var(--openbot-focus-ring);
}
.routine-calendar-day[aria-current="date"]:not(.routine-day-selected) {
  color: var(--openbot-accent-text);
}
.routine-calendar-day:disabled {
  cursor: default;
  opacity: 0.32;
}
.routine-schedule-picker:not([data-fit="roomy"]) .routine-trigger-chips {
  gap: var(--openbot-space-1-5);
}
.routine-schedule-picker:not([data-fit="roomy"]) .routine-trigger-phrase {
  gap: var(--openbot-space-1);
}
.routine-schedule-picker:not([data-fit="roomy"]) .routine-connector {
  font-size: var(--openbot-text-md);
}
.routine-schedule-picker[data-density="panel"]:not([data-fit="roomy"]) .routine-trigger-row {
  gap: var(--openbot-space-1-5);
}
.routine-schedule-picker[data-density="panel"]:not([data-fit="roomy"]) .routine-trigger-icon svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.routine-schedule-picker[data-density="panel"]:not([data-fit="roomy"]) .routine-chip {
  gap: var(--openbot-space-1);
  padding: 0 var(--openbot-space-2);
  font-size: var(--openbot-text-md);
}
.routine-schedule-picker[data-density="panel"]:is([data-fit="tight"], [data-fit="minimal"]) .routine-connector-optional {
  display: none;
}
.routine-schedule-picker[data-density="panel"]:is([data-fit="tight"], [data-fit="minimal"]) :is(.routine-trigger-row, .routine-trigger-chips) {
  gap: var(--openbot-space-1);
}
.routine-schedule-picker[data-density="panel"]:is([data-fit="tight"], [data-fit="minimal"]) .routine-trigger-icon {
  width: var(--openbot-control-xs);
  height: var(--openbot-control-xs);
  align-self: center;
}
.routine-schedule-picker[data-density="panel"]:is([data-fit="tight"], [data-fit="minimal"]) .routine-chip {
  padding: 0 var(--openbot-space-1-5);
}
.routine-schedule-picker[data-fit="minimal"] :is(.routine-trigger-icon, .routine-connector) {
  display: none;
}
.routine-schedule-picker[data-fit="minimal"] .routine-trigger-chips {
  gap: var(--openbot-space-1);
}
.routine-trigger-action {
  display: inline-flex;
  flex: 0 0 auto;
  align-self: center;
  margin-inline-start: calc(var(--openbot-space-1) * -1);
}
.routine-trigger-action:empty {
  display: none;
}
:is(.routine-trigger-row, .routine-trigger-card-header) .routine-trigger-action .ui-button {
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
  border-radius: var(--openbot-radius-xs);
}
.routine-trigger-card {
  display: grid;
  min-width: 0;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-shadow-popover-ambient);
}
.routine-trigger-card-header {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-3);
}
:is(.routine-trigger-card-header, .routine-trigger-menu) .routine-trigger-icon {
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
}
.routine-trigger-card-title {
  min-width: 0;
  flex: 1;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  text-box: trim-both ex alphabetic;
}
.routine-webhook-field {
  display: grid;
  min-height: calc(var(--openbot-control-sm) + var(--openbot-space-2) + 1px);
  grid-template-columns: minmax(84px, auto) minmax(0, 1fr) var(--openbot-control-sm);
  align-items: center;
  gap: var(--openbot-space-3);
  border: 0;
  border-top: 1px solid var(--openbot-border);
  margin: 0;
  background: none;
  padding: var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-3);
  color: inherit;
  font: inherit;
  text-align: left;
}
.routine-webhook-label {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  white-space: nowrap;
}
.routine-webhook-value {
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
code.routine-webhook-value {
  font-family: inherit;
}
code.routine-webhook-secret {
  padding-block: var(--openbot-space-1-5);
  font-family: var(--openbot-font-mono);
  overflow-wrap: anywhere;
  white-space: normal;
}
.routine-webhook-field > :last-child {
  justify-self: center;
}
.routine-webhook-field > .ui-icon-button {
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
}
.routine-webhook-field.routine-webhook-events-toggle {
  width: auto;
  min-width: 0;
  height: auto;
  justify-content: stretch;
  border-radius: 0 0 calc(var(--openbot-radius-md) - 1px) calc(var(--openbot-radius-md) - 1px);
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.routine-webhook-field.routine-webhook-events-toggle[aria-expanded="true"] {
  background: none;
}
.routine-webhook-field.routine-webhook-events-toggle:hover {
  background: var(--openbot-bg-control-hover);
}
.routine-webhook-events-toggle:focus-visible {
  outline: 0;
  box-shadow: var(--openbot-focus-ring);
}
.routine-webhook-events-toggle > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: var(--openbot-icon-stroke);
  color: var(--openbot-text-muted);
}
.ui-text.routine-webhook-value {
  white-space: normal;
}
.routine-webhook-note {
  padding: 0 var(--openbot-space-3) var(--openbot-space-2);
}
.routine-trigger-card-header + .routine-webhook-note {
  border-top: 1px solid var(--openbot-border);
  padding-top: var(--openbot-space-2);
}
.routine-webhook-secret-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.routine-webhook-events {
  display: grid;
  gap: var(--openbot-space-3);
  border-top: 1px solid var(--openbot-border);
  padding: var(--openbot-space-3);
}
.routine-webhook-events .settings-field {
  display: grid;
  margin: 0;
  gap: var(--openbot-space-1-5);
}
.routine-webhook-events .settings-field > span {
  margin: 0;
}
.routine-webhook-events .settings-field > .ui-text {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.routine-webhook-add-filter {
  justify-self: start;
  margin-left: calc(var(--openbot-space-2) * -1);
  padding-inline: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  font-weight: inherit;
}
.routine-webhook-filter-link {
  justify-self: start;
  margin: 0 0 var(--openbot-space-1) var(--openbot-space-1);
  padding-inline: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: inherit;
}
.routine-webhook-add-filter svg, .routine-webhook-filter-link svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.routine-trigger-menu {
  width: 300px;
  max-height: min(70vh, 560px);
  overflow-y: auto;
}
.routine-trigger-menu.ui-action-menu .routine-trigger-menu-item[role="menuitemradio"] {
  height: auto;
  padding-block: var(--openbot-space-1-5);
  gap: var(--openbot-space-3);
  white-space: normal;
}
.routine-trigger-menu-text {
  display: grid;
  min-width: 0;
  flex: 1;
}
.routine-trigger-menu-description {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.routine-trigger-menu.ui-action-menu .routine-trigger-menu-item > .routine-trigger-menu-check {
  color: var(--openbot-text-primary);
}
.routine-planner {
  container-type: inline-size;
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-4);
  color: var(--openbot-text-primary);
}
.routine-planner-header {
  display: grid;
  gap: var(--openbot-space-3);
}
.routine-planner-title {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
}
.routine-planner-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
}
.routine-planner-identity .ui-icon-button {
  margin-left: calc(-1 * var(--openbot-space-2));
}
.routine-planner-title h2 {
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
}
.routine-planner-title h2 span {
  color: var(--openbot-text-muted);
  font-weight: var(--openbot-weight-regular);
}
.routine-planner-title p, .routine-planner-note {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.routine-planner-toolbar {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.routine-planner-nav {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-1);
}
.routine-planner-range {
  margin-left: var(--openbot-space-2);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.routine-planner-clock-change {
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-warning-soft);
  padding: var(--openbot-space-1-5) var(--openbot-space-3);
  color: var(--openbot-warning-text);
  font-size: var(--openbot-text-sm);
}
.routine-planner-body {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
  align-items: start;
  gap: var(--openbot-space-4);
}
.routine-planner-grid {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-1);
}
.routine-planner-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.routine-planner-weekdays > * {
  padding-inline: calc(1px + var(--openbot-space-1-5));
}
.routine-planner-week {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--openbot-space-1);
}
.routine-planner-day {
  display: grid;
  min-width: 0;
  min-height: 12rem;
  align-content: start;
  gap: var(--openbot-space-1);
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  padding: var(--openbot-space-1-5);
}
.routine-planner-day[data-past] {
  background: var(--openbot-transparent);
}
.routine-planner-day[aria-current="date"] {
  border-color: var(--openbot-accent-strong);
}
.routine-planner-day-button.ui-button {
  width: 100%;
  justify-content: flex-start;
  gap: var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
}
.routine-planner-day-button strong {
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-semibold);
  font-variant-numeric: tabular-nums;
}
.routine-planner-day[aria-current="date"] .routine-planner-day-button strong {
  color: var(--openbot-accent-text);
}
.routine-planner-runs, .routine-planner-entries {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-0-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.routine-planner-status {
  display: grid;
  width: var(--openbot-space-4);
  height: var(--openbot-space-4);
  place-items: center;
}
.routine-planner-status > svg {
  width: var(--openbot-space-3);
  height: var(--openbot-space-3);
  stroke-width: 2;
}
.routine-planner-status-dot {
  width: var(--openbot-space-2);
  height: var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
}
.routine-planner-status[data-status="paused"] {
  color: var(--openbot-text-muted);
}
.routine-planner-status[data-status="failed"] {
  color: var(--openbot-danger-text);
}
.routine-planner-status[data-status="completed"] {
  color: var(--openbot-success-text);
}
.routine-planner-avatars {
  display: flex;
}
.routine-planner-avatar.agent-avatar {
  width: var(--openbot-space-4);
  height: var(--openbot-space-4);
}
.routine-planner-avatars .routine-planner-avatar + .routine-planner-avatar {
  margin-left: calc(var(--openbot-space-1-5) * -1);
}
.routine-planner-run.ui-button {
  display: grid;
  width: 100%;
  height: auto;
  min-height: var(--openbot-control-sm);
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "mark time avatars" "name name name";
  align-items: center;
  gap: var(--openbot-space-0-5) var(--openbot-space-1);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-1) var(--openbot-space-1-5);
  text-align: left;
  font-size: var(--openbot-text-sm);
}
.routine-planner-run .routine-planner-status {
  grid-area: mark;
}
.routine-planner-run-time {
  grid-area: time;
  color: var(--openbot-text-muted);
  font-variant-numeric: tabular-nums;
}
.routine-planner-run-name {
  display: -webkit-box;
  grid-area: name;
  min-width: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.3;
  overflow-wrap: break-word;
  white-space: normal;
}
.routine-planner-run .routine-planner-avatars {
  grid-area: avatars;
}
.routine-planner-run[data-status="paused"], .routine-planner-entry[data-status="paused"] {
  opacity: 0.6;
}
.routine-planner-run[data-status="paused"] {
  outline: 1px dashed var(--openbot-border-grouped);
  outline-offset: -1px;
  background: var(--openbot-transparent);
}
.routine-planner-run[data-status="failed"] {
  background: var(--openbot-danger-soft);
}
.routine-planner-run[data-status="completed"] .routine-planner-run-name {
  color: var(--openbot-text-muted);
}
.routine-planner-more.ui-button {
  justify-self: start;
  color: var(--openbot-text-muted);
}
.routine-planner[data-view="month"] .routine-planner-day {
  min-height: 7rem;
}
.routine-planner[data-view="month"] .routine-planner-day-button > span {
  display: none;
}
.routine-planner[data-view="month"] .routine-planner-run.ui-button {
  grid-template-columns: auto auto minmax(0, 1fr);
  grid-template-areas: "mark time name";
}
.routine-planner[data-view="month"] .routine-planner-run-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.routine-planner[data-view="month"] .routine-planner-run .routine-planner-avatars {
  display: none;
}
.routine-planner-day[data-outside] {
  border-color: var(--openbot-border);
  background: var(--openbot-transparent);
}
.routine-planner-day[data-outside] .routine-planner-day-button strong {
  color: var(--openbot-text-muted);
  font-weight: var(--openbot-weight-regular);
}
.routine-planner-upcoming, .routine-planner-day-view {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: var(--openbot-space-2);
}
.routine-planner-upcoming {
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-lg);
  padding: var(--openbot-space-3);
}
.routine-planner-upcoming h3, .routine-planner-hour h3 {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.routine-planner-hour {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  align-items: start;
  gap: var(--openbot-space-2);
  border-top: 1px solid var(--openbot-border-strong);
  padding-top: var(--openbot-space-2);
}
.routine-planner-hour h3 {
  padding-top: var(--openbot-space-2);
  font-variant-numeric: tabular-nums;
}
.routine-planner-entry {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-1);
}
.routine-planner-entry-main.ui-button {
  display: flex;
  min-width: 0;
  height: auto;
  flex: 1 1 auto;
  align-items: center;
  justify-content: flex-start;
  gap: var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  text-align: left;
}
.routine-planner-entry-text {
  display: grid;
  min-width: 0;
}
.routine-planner-entry-name, .routine-planner-entry-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.routine-planner-entry-name {
  font-size: var(--openbot-text-md);
}
.routine-planner-entry-meta {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
}
.routine-planner-entry[data-status="failed"] .routine-planner-entry-meta {
  color: var(--openbot-danger-text);
}
.routine-planner-entry-agents {
  display: flex;
  flex: 0 0 auto;
}
.routine-planner-agent .routine-planner-avatar.agent-avatar {
  width: var(--openbot-control-xs);
  height: var(--openbot-control-xs);
}
.routine-planner-empty {
  display: grid;
  justify-items: center;
  gap: var(--openbot-space-3);
  border: 1px dashed var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-lg);
  padding: var(--openbot-space-8) var(--openbot-space-4);
  color: var(--openbot-text-muted);
  text-align: center;
}
.routine-planner-empty > svg {
  width: var(--openbot-space-6);
  height: var(--openbot-space-6);
  stroke-width: var(--openbot-icon-stroke);
}
.routine-planner-skeleton-heading {
  height: var(--openbot-control-xs);
}
.routine-planner-skeleton-run {
  height: var(--openbot-control-md);
}
@container (max-width: 1160px) {
  .routine-planner-body {
    grid-template-columns: minmax(0, 1fr);
  }
}
@container (max-width: 920px) {
  .routine-planner-week {
    grid-template-columns: minmax(0, 1fr);
  }
  .routine-planner-day {
    min-height: 0;
    grid-template-columns: 5rem minmax(0, 1fr);
    align-items: start;
  }
  .routine-planner-day > :not(.routine-planner-day-heading) {
    grid-column: 2;
  }
  .routine-planner-loading .routine-planner-day {
    grid-template-columns: minmax(0, 1fr);
  }
  .routine-planner-loading .routine-planner-day > * {
    grid-column: 1;
  }
  .routine-planner-weekdays, .routine-planner-day[data-outside] {
    display: none;
  }
  .routine-planner[data-view="month"] .routine-planner-day {
    min-height: 0;
  }
  .routine-planner[data-view="month"] .routine-planner-day-button > span {
    display: inline;
  }
}
.chat-action-card :is(button, input, textarea):focus-visible {
  outline: 0;
}
.chat-action-card .ui-button:focus-visible {
  box-shadow: 0 0 0 1px var(--openbot-text-muted);
}
.chat-action-card.conversation-interaction-card {
  min-width: min(100%, 320px);
}
.chat-action-card {
  display: grid;
  width: fit-content;
  max-width: min(100%, 520px);
  gap: var(--openbot-space-3);
}
.chat-action-card-header {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
}
.chat-action-card-icon {
  display: inline-flex;
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
  color: var(--openbot-text-on-accent);
}
.chat-action-card-icon svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.chat-action-card-heading {
  display: grid;
  min-width: 0;
  flex: 1;
}
.chat-action-card-eyebrow {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.chat-action-card-title {
  overflow: hidden;
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-lg);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-action-card-open svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.chat-action-card-footer {
  display: flex;
  min-height: var(--openbot-leading-md);
  align-items: center;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.chat-action-card-footer-empty {
  min-height: 0;
  margin-top: calc(-1 * var(--openbot-space-3));
}
.chat-action-card-status {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
}
.chat-action-card-status svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.chat-action-card-footer-action {
  margin-left: auto;
}
.chat-action-card-error {
  color: var(--openbot-danger-text);
}
.chat-action-card-removed .chat-action-card-title {
  color: var(--openbot-text-muted);
  text-decoration: line-through;
}
.marketplace-suggestion.conversation-interaction-card {
  display: grid;
  container-type: inline-size;
  width: 100%;
  max-width: 520px;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3);
}
.marketplace-suggestion-header {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-3);
}
.marketplace-suggestion .marketplace-suggestion-icon {
  width: var(--openbot-control-lg);
  height: var(--openbot-control-lg);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-primary);
}
.marketplace-suggestion .marketplace-suggestion-icon img {
  border-radius: inherit;
}
.marketplace-suggestion-heading {
  display: grid;
  min-width: 0;
  flex: 1;
}
@container (max-width: 360px) {
  .marketplace-suggestion-header {
    flex-wrap: wrap;
  }
  .marketplace-suggestion-heading {
    flex-basis: calc(100% - var(--openbot-control-lg) - var(--openbot-control-md) - 2 * var(--openbot-space-3));
  }
  .marketplace-suggestion-action {
    order: 1;
    width: 100%;
  }
  .marketplace-suggestion-action > .ui-button {
    width: 100%;
  }
}
.marketplace-suggestion-title {
  overflow: hidden;
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.marketplace-suggestion .marketplace-suggestion-name {
  height: auto;
  padding: 0;
  color: inherit;
  font: inherit;
}
.marketplace-suggestion-description {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.marketplace-suggestion-action {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
}
.marketplace-suggestion-done[data-slot="badge"] {
  gap: var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-pill);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.marketplace-suggestion-done svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.marketplace-suggestion-unavailable {
  display: flex;
  margin: 0;
  gap: var(--openbot-space-2);
  border-top: 1px solid var(--openbot-border);
  padding-top: var(--openbot-space-3);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.marketplace-suggestion-unavailable svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  margin-top: var(--openbot-space-0-5);
  color: var(--openbot-text-muted);
}
.marketplace-suggestion-dismissed {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.backup-model-logo {
  display: inline-flex;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: none;
  align-items: center;
  justify-content: center;
}
.backup-model-logo svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  overflow: visible;
  fill: var(--openbot-provider-current);
}
.backup-model-option {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
}
.backup-models-page {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
}
.backup-models-intro {
  margin: 0;
  padding-inline: var(--openbot-space-1);
}
.backup-models-empty {
  margin: 0;
  padding: var(--openbot-space-2) var(--openbot-space-3);
}
.backup-models-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.backup-models-row {
  display: flex;
  min-height: 40px;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-1) var(--openbot-space-2) var(--openbot-space-1) var(--openbot-space-3);
}
.backup-models-number {
  width: var(--openbot-icon-sm);
  flex: none;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.backup-models-text {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}
.backup-models-name {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.backup-models-state {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.backup-models-row:not([data-state="ready"]) .backup-model-logo svg {
  opacity: 0.44;
}
.backup-models-row:not([data-state="ready"]) .backup-models-name {
  color: var(--openbot-text-muted);
  text-decoration: line-through;
}
.backup-models-actions {
  display: inline-flex;
  flex: none;
}
.usage-limit-ask-card {
  display: flex;
  max-width: 560px;
  flex-direction: column;
  gap: var(--openbot-space-3);
  margin: var(--openbot-space-4) 0 0;
}
.usage-limit-ask-body {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
}
.usage-limit-ask-select {
  max-width: 320px;
}
.usage-limit-ask-remember {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  cursor: pointer;
}
.usage-limit-ask-error {
  margin: 0;
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
}
.usage-limit-ask-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
}
.task-list {
  --task-list-glyph: var(--openbot-icon-sm);
  --task-list-ease: var(--openbot-ease-out);
  --task-list-open: 320ms;
  --task-list-close: 200ms;
  --task-list-close-ease: cubic-bezier(0.32, 0.08, 0.24, 1);
  --task-list-blur: 4px;
  --task-list-stagger: 28ms;
  box-sizing: border-box;
  width: min(100%, 448px);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
}
.task-list .task-list-header {
  display: flex;
  background: transparent;
  width: 100%;
  height: auto;
  align-items: center;
  justify-content: flex-start;
  gap: var(--openbot-space-3);
  border-radius: var(--openbot-radius-card);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-regular);
  padding: var(--openbot-space-3);
  text-align: left;
}
.task-list .task-list-header:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 1px var(--openbot-text-muted);
}
.task-list-summary-glyph {
  display: inline-flex;
  width: var(--task-list-glyph);
  height: var(--task-list-glyph);
  flex: 0 0 auto;
}
.task-list-donut {
  width: 100%;
  height: 100%;
}
.task-list-donut circle {
  stroke-width: 1.5;
}
.task-list-donut-track {
  stroke: var(--openbot-border-strong);
}
.task-list-donut-value {
  stroke: var(--openbot-text-primary);
  stroke-linecap: round;
  transition: stroke-dashoffset var(--openbot-duration-slow) var(--task-list-ease);
}
.task-list-title {
  display: grid;
  min-width: 0;
  flex: 1;
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.task-list-title-layer {
  overflow: hidden;
  min-width: 0;
  grid-area: 1 / 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: opacity var(--task-list-open) var(--task-list-ease), filter var(--task-list-open) var(--task-list-ease), transform var(--task-list-open) var(--task-list-ease);
}
.task-list-title-name {
  font-weight: var(--openbot-weight-semibold);
}
.task-list-title-task {
  font-weight: var(--openbot-weight-regular);
}
.task-list-title[data-showing="task"] .task-list-title-name, .task-list-title[data-showing="title"] .task-list-title-task {
  filter: blur(var(--task-list-blur));
  opacity: 0;
}
.task-list-title[data-showing="task"] .task-list-title-name {
  transform: translateY(calc(-1 * var(--openbot-space-1)));
}
.task-list-title[data-showing="title"] .task-list-title-task {
  transform: translateY(var(--openbot-space-1));
}
.task-list-title-task-text {
  animation: task-list-title-in var(--task-list-open) var(--task-list-ease);
}
.task-list-count {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-variant-numeric: tabular-nums;
  line-height: var(--openbot-leading-md);
}
.task-list-chevron {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  transform: rotate(-90deg);
  transition: transform var(--openbot-duration-normal) var(--task-list-ease);
}
.task-list[data-open] .task-list-chevron {
  transform: rotate(0deg);
}
.task-list-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--task-list-close) var(--task-list-close-ease);
}
.task-list[data-open] .task-list-panel {
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--task-list-open) var(--task-list-ease);
}
.task-list-items {
  display: grid;
  overflow: hidden;
  min-height: 0;
  margin: 0;
  padding: 0 var(--openbot-space-3);
  list-style: none;
  transition: padding var(--task-list-close) var(--task-list-close-ease);
}
.task-list[data-open] .task-list-items {
  padding-bottom: var(--openbot-space-3);
  transition: padding var(--task-list-open) var(--task-list-ease);
}
.task-list-item {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-0-5) 0;
  filter: blur(var(--task-list-blur));
  opacity: 0;
  transform: translateY(calc(-1 * var(--openbot-space-1))) scale(0.98);
  transform-origin: left top;
  transition: opacity var(--task-list-close) var(--task-list-close-ease), filter var(--task-list-close) var(--task-list-close-ease), transform var(--task-list-close) var(--task-list-close-ease);
}
.task-list[data-open] .task-list-item {
  filter: blur(0);
  opacity: 1;
  transform: none;
  transition: opacity var(--task-list-open) var(--task-list-ease), filter var(--task-list-open) var(--task-list-ease), transform var(--task-list-open) var(--task-list-ease);
  transition-delay: calc(min(var(--task-list-index, 0), 8) * var(--task-list-stagger));
}
.task-list-item-mark {
  display: inline-flex;
  width: var(--task-list-glyph);
  height: var(--openbot-leading-md);
  flex: 0 0 auto;
  align-items: center;
}
.task-list-item-label {
  position: relative;
  min-width: 0;
  flex: 1;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  transition: color var(--openbot-duration-normal) var(--task-list-ease);
}
.task-list-item[data-state="pending"] .task-list-item-label {
  color: var(--openbot-text-muted);
}
.task-list-item[data-state="done"] .task-list-item-label {
  color: var(--openbot-text-dim);
}
.task-list-item-text {
  position: relative;
}
.task-list-item-text::after {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--openbot-duration-slow) var(--task-list-ease);
}
.task-list-item[data-state="done"] .task-list-item-text::after {
  transform: scaleX(1);
}
.task-list-item[data-state="active"] .task-list-item-text, .task-list-title[data-showing="task"] .task-list-title-task-text {
  display: inline-block;
  color: var(--openbot-text-primary);
  animation: task-list-pulse 1.6s ease-in-out infinite;
  animation-play-state: var(--task-list-play-state, running);
}
.task-list-title[data-showing="task"] .task-list-title-task-text {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
  animation: task-list-title-in var(--task-list-open) var(--task-list-ease), task-list-pulse 1.6s ease-in-out infinite;
  animation-play-state: var(--task-list-play-state, running);
}
.task-list-item-progress {
  --digit-dur: var(--openbot-duration-overlay);
  --digit-distance: var(--openbot-space-1);
  --digit-blur: var(--openbot-space-0-5);
  --digit-stagger: 40ms;
  display: inline-flex;
  min-width: 4ch;
  flex: 0 0 auto;
  justify-content: flex-end;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  line-height: var(--openbot-leading-md);
  padding: 0 var(--openbot-space-1-5);
}
.task-list-mark {
  width: var(--task-list-glyph);
  height: var(--task-list-glyph);
  overflow: visible;
}
.task-list-mark circle, .task-list-mark path {
  transition: opacity var(--openbot-duration-normal) var(--task-list-ease), transform var(--openbot-duration-normal) var(--task-list-ease), stroke-dashoffset var(--openbot-duration-slow) var(--task-list-ease);
  transform-box: fill-box;
  transform-origin: center;
}
.task-list-mark-pending {
  opacity: 0;
  stroke: var(--openbot-text-dim);
  stroke-dasharray: 1.2 2;
  stroke-width: 1.5;
}
.task-list-mark-track {
  opacity: 0;
  stroke: var(--openbot-border-strong);
  stroke-width: 1.5;
}
.task-list-mark-arc {
  opacity: 0;
  stroke: var(--openbot-text-primary);
  stroke-dasharray: 12 100;
  stroke-linecap: round;
  stroke-width: 1.5;
}
.task-list-mark-fill {
  fill: var(--openbot-text-dim);
  opacity: 0;
  transform: scale(0.4);
}
.task-list-mark-check {
  stroke: var(--openbot-bg-canvas);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
}
.task-list-mark-cross {
  stroke: var(--openbot-bg-canvas);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
  stroke-width: 1.75;
}
.task-list-mark[data-state="pending"] .task-list-mark-pending, .task-list-mark[data-state="active"] .task-list-mark-track, .task-list-mark[data-state="active"] .task-list-mark-arc, .task-list-mark[data-state="done"] .task-list-mark-fill, .task-list-mark[data-state="failed"] .task-list-mark-fill {
  opacity: 1;
}
.task-list-mark[data-state="active"] {
  animation: task-list-turn 0.9s linear infinite;
  animation-play-state: var(--task-list-play-state, running);
}
.task-list-mark[data-state="done"] .task-list-mark-fill, .task-list-mark[data-state="failed"] .task-list-mark-fill {
  transform: scale(1);
}
.task-list-mark[data-state="failed"] .task-list-mark-fill {
  fill: var(--openbot-danger);
}
.task-list-mark[data-state="done"] .task-list-mark-check, .task-list-mark[data-state="failed"] .task-list-mark-cross {
  stroke-dashoffset: 0;
  transition-delay: var(--openbot-duration-fast);
}
@keyframes task-list-turn {
  to {
    transform: rotate(360deg);
  }
}
@keyframes task-list-title-in {
  from {
    filter: blur(var(--task-list-blur));
    opacity: 0;
    transform: translateY(var(--openbot-space-1));
  }
}
@keyframes task-list-pulse {
  50% {
    opacity: 0.6;
  }
}
.task-list:not([data-open]) .task-list-panel {
  --task-list-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .task-list-donut-value, .task-list-chevron, .task-list-panel, .task-list-items, .task-list-item, .task-list[data-open] .task-list-panel, .task-list[data-open] .task-list-items, .task-list[data-open] .task-list-item, .task-list-item-label, .task-list-title-layer, .task-list-item-text::after, .task-list-mark circle, .task-list-mark path {
    transition: none;
  }
  .task-list-mark[data-state="active"], .task-list-item[data-state="active"] .task-list-item-text, .task-list-title-task-text, .task-list-title[data-showing="task"] .task-list-title-task-text {
    animation: none;
  }
}
.subagents-elapsed {
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
.subagents-live {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.subagents-live-glyph {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: 0 0 auto;
  margin-top: 2px;
}
.subagents-live-text {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.subagents-live[data-state="failed"] {
  color: var(--openbot-danger-text);
}
.subagents-group {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: var(--openbot-space-1-5);
}
.subagents-group .subagents-group-header {
  display: flex;
  height: auto;
  align-self: flex-start;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-left: calc(-1 * var(--openbot-space-1-5));
  border-radius: var(--openbot-radius-sm);
  padding: var(--openbot-space-0-5) var(--openbot-space-1-5);
  color: inherit;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-md);
  text-align: left;
}
.subagents-group .subagents-group-header[aria-expanded="true"]:not(:hover) {
  background: transparent;
  color: inherit;
}
.subagents-group-chevron {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  color: var(--openbot-text-muted);
  transition: rotate var(--openbot-duration-fast) var(--openbot-ease-out);
}
.subagents-group-header[aria-expanded="true"] .subagents-group-chevron {
  rotate: 90deg;
}
@media (prefers-reduced-motion: reduce) {
  .subagents-group-chevron {
    transition: none;
  }
}
.subagents-group-title {
  font-weight: var(--openbot-weight-medium);
}
.subagents-progress {
  gap: var(--openbot-space-1-5);
  font-variant-numeric: tabular-nums;
}
.subagents-ring {
  width: var(--openbot-icon-xs);
}
.subagents-ring .ui-radial-progress-track, .subagents-ring .ui-radial-progress-indicator {
  stroke-width: 7;
}
.subagents-ring .ui-radial-progress-indicator {
  transition: stroke-dasharray var(--openbot-duration-slow) var(--openbot-ease-out);
}
.subagents-progress-failed {
  color: var(--openbot-danger-text);
}
@media (prefers-reduced-motion: reduce) {
  .subagents-ring .ui-radial-progress-indicator {
    transition: none;
  }
}
.subagents-list {
  display: flex;
  width: min(100%, 720px);
  flex-direction: column;
  margin: 0;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-canvas);
  padding: var(--openbot-space-1);
  list-style: none;
}
.subagents-list .subagents-row {
  display: grid;
  width: 100%;
  height: auto;
  align-items: start;
  grid-template-columns: var(--openbot-icon-sm) minmax(0, 1fr) auto auto;
  gap: 2px var(--openbot-space-2);
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  padding: var(--openbot-space-2);
  color: inherit;
  font-weight: var(--openbot-weight-regular);
  line-height: inherit;
  text-align: left;
  white-space: normal;
  cursor: pointer;
}
.subagents-list .subagents-row:hover {
  background: var(--openbot-hover);
}
.subagents-list .subagents-row.subagents-row-selected {
  background: var(--openbot-bg-surface);
}
.subagents-row:focus-visible {
  outline: 2px solid var(--openbot-focus-ring);
  outline-offset: -2px;
}
.subagents-row-copy, .subagents-row .subagents-live {
  display: contents;
}
.subagents-row-title {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.subagents-row .subagents-elapsed {
  line-height: var(--openbot-leading-md);
}
.subagents-row .subagents-live-glyph {
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  justify-self: center;
  margin-top: 0;
}
.subagents-row .subagents-live-text {
  grid-column: 2;
  grid-row: 2;
}
.subagents-row-chevron {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: 0 0 auto;
  margin-top: 4px;
  color: var(--openbot-text-muted);
  opacity: 0;
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}
.subagents-row:hover .subagents-row-chevron, .subagents-row:focus-visible .subagents-row-chevron, .subagents-row.subagents-row-selected .subagents-row-chevron {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .subagents-row-chevron {
    transition: none;
  }
}
.subagents-panel {
  overflow: hidden;
}
.subagents-panel-detail {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: var(--openbot-space-3);
  overflow-y: auto;
  padding: var(--openbot-space-4);
}
.subagents-panel-head {
  display: flex;
  align-items: flex-start;
  gap: var(--openbot-space-2);
}
.subagents-panel-head h3 {
  margin: 0;
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-lg);
  overflow-wrap: anywhere;
}
.subagents-panel-meta {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.subagents-steps {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
}
.subagents-prompt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  border-left: 2px solid var(--openbot-border-strong);
  padding-left: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.subagents-prompt-label {
  color: var(--openbot-text-muted);
  font-weight: var(--openbot-weight-medium);
}
.subagents-step-list {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.subagents-step {
  display: flex;
  align-items: flex-start;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  overflow-wrap: anywhere;
}
.subagents-step-glyph {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--openbot-text-muted);
}
.subagents-step[data-kind="thinking"] .subagents-step-text {
  color: var(--openbot-text-muted);
  font-style: italic;
}
.subagents-step[data-kind="text"] .subagents-step-text {
  color: var(--openbot-text-primary);
}
.subagents-step-text.agent-activity-label {
  -webkit-line-clamp: unset;
}
.subagents-error {
  display: flex;
  align-items: flex-start;
  gap: var(--openbot-space-2);
  margin: 0;
  color: var(--openbot-danger-text);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.subagents-error-icon {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: 0 0 auto;
  margin-top: 2px;
}
.subagents-status {
  display: inline-flex;
  width: var(--openbot-icon-sm);
  height: var(--openbot-leading-md);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}
.subagents-status-icon {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.subagents-status[data-state="running"] {
  color: var(--openbot-accent);
}
.subagents-status[data-state="running"] .subagents-status-icon {
  animation: ui-spin 1s linear infinite;
}
.subagents-status[data-state="completed"] {
  color: var(--openbot-success);
}
.subagents-status[data-state="failed"] {
  color: var(--openbot-danger);
}
.subagents-status[data-state="stopped"] {
  color: var(--openbot-text-muted);
}
@media (prefers-reduced-motion: reduce) {
  .subagents-status[data-state="running"] .subagents-status-icon {
    animation: none;
  }
}
.awaiting-replies {
  --awaiting-composer-overlap: 14px;
  position: relative;
  z-index: 9;
  width: auto;
  margin: 0 12px calc(-1 * var(--awaiting-composer-overlap));
  border-color: var(--openbot-queue-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-queue-surface);
  padding-bottom: var(--awaiting-composer-overlap);
  animation: queue-panel-in var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1) both;
}
.awaiting-replies.task-list .task-list-header {
  min-width: 0;
  flex: 1;
  border-radius: var(--openbot-radius-lg);
}
.awaiting-replies-bar {
  display: flex;
  align-items: center;
}
.awaiting-replies-dismiss {
  margin-right: var(--openbot-space-2);
  color: var(--openbot-text-muted);
}
.composer-wrap:has(.composer-attachment) .awaiting-replies:last-child {
  margin-bottom: 0;
}
.awaiting-replies-item {
  align-items: center;
}
.awaiting-replies-avatar {
  --agent-avatar-optical-offset: -1px;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
}
.awaiting-replies-text {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: baseline;
  gap: var(--openbot-space-2);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.awaiting-replies-name {
  flex: 0 0 auto;
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}
.awaiting-replies-preview {
  overflow: hidden;
  min-width: 0;
  color: var(--openbot-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.awaiting-replies-state {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-md);
}
.awaiting-replies-detail {
  color: var(--openbot-text-dim);
}
.awaiting-replies-item[data-state="failed"] .awaiting-replies-state-label {
  color: var(--openbot-danger-text);
}
.awaiting-replies-item[data-state="active"] .awaiting-replies-state-label {
  animation: task-list-pulse 1.6s ease-in-out infinite;
  animation-play-state: var(--task-list-play-state, running);
}
@media (prefers-reduced-motion: reduce) {
  .awaiting-replies {
    animation: none;
  }
  .awaiting-replies-item[data-state="active"] .awaiting-replies-state-label {
    animation: none;
  }
}
.open-waits .task-list-title-name {
  font-weight: var(--openbot-weight-medium);
}
.open-waits .task-list-count {
  color: var(--openbot-warning-text);
  font-size: var(--openbot-text-sm);
}
.open-waits-row {
  align-items: flex-start;
}
.open-waits-row-text {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: var(--openbot-space-0-5);
}
.open-waits-row-note {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.open-waits-row-meta {
  display: flex;
  min-width: 0;
  gap: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  white-space: nowrap;
}
.open-waits-row-request {
  overflow: hidden;
  min-width: 0;
  color: var(--openbot-text-dim);
  text-overflow: ellipsis;
}
[data-wait-state="woken"] .open-waits-row-state {
  color: var(--openbot-warning-text);
}
[data-wait-state="resuming"] .open-waits-row-state {
  color: var(--openbot-text-primary);
  animation: task-list-pulse 1.6s ease-in-out infinite;
  animation-play-state: var(--task-list-play-state, running);
}
@media (prefers-reduced-motion: reduce) {
  [data-wait-state="resuming"] .open-waits-row-state {
    animation: none;
  }
}
.open-waits-menu {
  flex: 0 0 auto;
  align-self: flex-start;
  color: var(--openbot-text-muted);
}
.conversation-title {
  display: flex;
  height: var(--openbot-control-sm);
  align-items: center;
  gap: 6px;
  border-radius: var(--openbot-radius-sm);
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 2px 4px;
  text-align: left;
  transition: background var(--openbot-duration-hover) ease;
}
.conversation-title:hover {
  background: var(--openbot-hover);
}
.conversation-title h1 {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0;
}
.conversation-access-lock {
  display: inline-flex;
  flex: none;
  color: var(--openbot-text-muted);
}
.conversation-access-lock svg {
  width: 14px;
  height: 14px;
}
.conversation-header-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}
.provider-model-picker {
  position: relative;
  min-width: 0;
}
.provider-model-trigger {
  display: flex;
  width: max-content;
  max-width: 240px;
  height: 28px;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-overlay);
  padding: 0 9px 0 8px;
  color: var(--openbot-text-primary);
  cursor: pointer;
  box-shadow: inset 0 1px var(--openbot-hover);
  transition: border-color var(--openbot-duration-hover) ease, background-color var(--openbot-duration-hover) ease, transform var(--openbot-duration-fast) cubic-bezier(0.23, 1, 0.32, 1);
}
.provider-model-trigger:hover:not(:disabled), .provider-model-trigger[aria-expanded="true"] {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-surface);
}
.provider-model-trigger:active:not(:disabled) {
  transform: scale(0.97);
}
.provider-model-trigger:focus-visible, .provider-model-rail-button:focus-visible, .provider-model-option:focus-visible {
  outline: 1px solid var(--openbot-accent);
  outline-offset: 1px;
}
.provider-model-trigger:disabled {
  opacity: 0.48;
  cursor: default;
}
.provider-model-trigger-value {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}
.provider-model-trigger-name {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  font-size: var(--openbot-text-md);
  font-weight: 470;
  line-height: 18px;
}
.provider-model-trigger-effort {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: 18px;
  white-space: nowrap;
}
.provider-model-trigger-effort::before {
  margin-right: var(--openbot-space-1-5);
  content: "·";
}
.provider-model-trigger:has(.provider-model-trigger-fast) {
  max-width: 296px;
}
.provider-model-trigger-fast svg {
  width: 12px;
  height: 12px;
  margin-right: var(--openbot-space-0-5);
  stroke-width: var(--openbot-icon-stroke);
}
.provider-model-trigger-account {
  min-width: 0;
  max-width: 160px;
  flex-shrink: 1;
  overflow: hidden;
}
.ui-swap {
  position: relative;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
}
.ui-swap > span, .ui-swap-digits {
  display: inline-block;
}
.ui-swap > .ui-swap-leaving {
  position: absolute;
  top: 0;
  left: 0;
}
.provider-model-trigger-value .ui-swap {
  overflow: visible;
}
.provider-model-trigger-name:not(.ui-swap) {
  overflow: hidden;
  text-overflow: ellipsis;
}
.provider-model-trigger-name > span:not(.ui-swap-leaving) {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}
.provider-model-trigger-name > .ui-swap-leaving {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.provider-model-trigger-mark {
  display: flex;
  flex: 0 0 auto;
}
.provider-model-trigger-mark[data-entering] {
  animation: provider-model-mark-in 420ms cubic-bezier(0.34, 1.36, 0.64, 1) both;
}
@keyframes provider-model-mark-in {
  from {
    opacity: 0;
    scale: 0.6;
    filter: blur(2px);
  }
}
.provider-model-picker-field {
  width: 100%;
}
.provider-model-trigger-field {
  width: 100%;
  max-width: none;
  height: 44px;
  gap: 8px;
  border: 0;
  border-radius: 0;
  background: var(--openbot-hover);
  padding: 0 11px 0 12px;
  box-shadow: none;
}
.provider-model-trigger-field:hover:not(:disabled), .provider-model-trigger-field[aria-expanded="true"] {
  border-color: transparent;
  background: var(--openbot-border);
}
.provider-model-trigger-field .provider-model-field-label {
  flex: 0 0 auto;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: 400;
  line-height: 17px;
}
.provider-model-trigger-field .provider-model-trigger-value {
  max-width: calc(100% - 84px);
  margin-left: auto;
  justify-content: flex-end;
}
.provider-model-mark {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  overflow: visible;
  fill: var(--openbot-provider-current);
}
.provider-model-mark-large {
  width: 19px;
  height: 19px;
  flex-basis: 19px;
}
.provider-model-chevron {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  fill: none;
  stroke: var(--openbot-text-muted);
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--openbot-duration-normal) ease;
}
.provider-model-trigger[aria-expanded="true"] .provider-model-chevron {
  transform: rotate(180deg);
}
.provider-model-popover {
  --provider-model-rail-bg: var(--openbot-bg-notch);
  @supports (color: color-mix(in lab, red, red)) {
    --provider-model-rail-bg: color-mix(in srgb, var(--openbot-bg-notch) 22%, var(--ui-menu-bg));
  }
  --provider-model-segment-radius: calc(var(--ui-menu-item-radius) - var(--openbot-space-0-5));
  position: relative;
  z-index: var(--openbot-layer-dropdown);
  width: min(360px, calc(100vw - 24px));
  min-height: 226px;
  overflow: hidden;
  border: 0;
  border-radius: var(--ui-menu-radius);
  background: var(--ui-menu-bg);
  color: var(--openbot-text-primary);
  box-shadow: var(--ui-menu-panel-shadow);
  transform-origin: var(--kb-popover-content-transform-origin);
  animation: ui-menu-in var(--ui-menu-duration) var(--ui-menu-ease) both;
}
.provider-model-popover:not([data-expanded]) {
  animation: ui-menu-out var(--ui-menu-duration) var(--ui-menu-ease) both;
}
.provider-model-layout {
  max-height: min(520px, calc(100dvh - 100px), var(--kb-popper-content-available-height, 520px));
  display: flex;
  width: 100%;
  min-height: inherit;
}
.provider-model-rail {
  display: flex;
  width: 52px;
  flex: 0 0 52px;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-1);
  border-right: 1px solid var(--openbot-border);
  background: var(--provider-model-rail-bg);
  padding: 9px 7px;
}
.provider-model-rail-tabs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-1);
}
.provider-model-rail-add {
  color: var(--openbot-text-muted);
}
.provider-model-rail-add:hover {
  color: var(--openbot-text-primary);
}
.provider-model-rail-tooltip-trigger {
  display: flex;
}
.provider-model-rail-tooltip {
  z-index: var(--openbot-layer-tooltip);
  display: flex;
  max-width: min(240px, calc(100vw - 16px));
  flex-direction: column;
  gap: var(--openbot-space-0-5);
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-surface-raised);
  box-shadow: var(--openbot-shadow-raised);
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-md);
  overflow-wrap: anywhere;
  pointer-events: none;
}
.provider-model-rail-tooltip small {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
}
.provider-model-rail-button {
  position: relative;
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  border: 0;
  border-radius: var(--ui-menu-item-radius);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: background-color var(--openbot-duration-hover) ease, opacity var(--openbot-duration-hover) ease;
}
.provider-model-rail-button:hover {
  background: var(--ui-menu-item-hover);
}
.provider-model-rail-button-selected {
  background: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-primary) 8%, transparent);
  }
  box-shadow: inset 0 0 0 1px var(--ui-menu-edge);
}
.provider-model-rail-button .provider-model-mark {
  opacity: 0.48;
}
.provider-model-rail-button:not(.provider-model-rail-button-selected, .provider-model-rail-button-unavailable):hover .provider-model-mark {
  opacity: 0.8;
}
.provider-model-rail-button-selected .provider-model-mark {
  fill: var(--openbot-text-primary);
  opacity: 1;
}
.provider-model-rail-button-unavailable .provider-model-mark {
  opacity: 0.28;
}
.provider-model-rail-button-unavailable:is(:hover, .provider-model-rail-button-selected) .provider-model-mark {
  opacity: 0.6;
}
.provider-model-rail-button:is( [data-state="not-installed"], [data-state="sign-in-required"], [data-state="outdated"], [data-state="error"] )::after {
  position: absolute;
  top: var(--openbot-space-1-5);
  right: var(--openbot-space-1-5);
  width: 6px;
  height: 6px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-muted);
  box-shadow: 0 0 0 2px var(--provider-model-rail-bg);
  content: "";
}
.provider-model-rail-button:is([data-state="sign-in-required"], [data-state="outdated"])::after {
  background: var(--openbot-warning);
}
.provider-model-rail-account {
  position: absolute;
  right: 2px;
  bottom: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control);
  box-shadow: 0 0 0 2px var(--provider-model-rail-bg);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.provider-model-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  flex: 1;
  padding: var(--ui-menu-padding);
}
.provider-model-panel:not([data-selected]) {
  display: none;
}
.provider-model-heading {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-1-5) 0 var(--openbot-space-2) var(--ui-menu-inset);
}
.provider-model-heading-text {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 4px;
}
.provider-model-heading .ui-button, .provider-model-empty .ui-button-variant-outline {
  border-color: transparent;
  border-radius: var(--ui-menu-item-radius);
  background: var(--ui-menu-item-hover);
  box-shadow: none;
  color: var(--openbot-text-primary);
}
.provider-model-heading .ui-button:hover, .provider-model-empty .ui-button-variant-outline:hover {
  background: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-primary) 10%, transparent);
  }
}
.provider-model-heading .ui-button svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.provider-model-heading strong, .provider-model-heading span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.provider-model-empty {
  display: grid;
  justify-items: start;
  gap: var(--openbot-space-2);
  margin-bottom: var(--ui-menu-padding);
  border: 0;
  border-radius: var(--ui-menu-item-radius);
  background: var(--ui-menu-item-hover);
  padding: var(--openbot-space-2) var(--ui-menu-inset);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: 18px;
}
.provider-model-heading strong {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: 620;
  line-height: 20px;
}
.provider-model-heading span {
  margin-top: 1px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
}
.provider-model-empty > .ui-progress {
  justify-self: stretch;
}
.provider-model-list {
  display: grid;
  gap: 0;
}
.provider-model-effort {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-1) 12px;
  margin: var(--ui-menu-padding) calc(var(--ui-menu-padding) * -1) 0;
  border-top: 1px solid var(--openbot-border);
  padding: var(--ui-menu-padding) var(--ui-menu-padding) 0 calc(var(--ui-menu-padding) + var(--ui-menu-inset));
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 17px;
}
.provider-model-effort + .provider-model-effort {
  margin-top: 0;
  border-top: 0;
  padding-top: var(--openbot-space-1);
}
.provider-model-effort > :first-child {
  display: flex;
  min-height: var(--openbot-control-md);
  align-items: center;
}
.provider-model-effort-select {
  width: 128px;
}
.provider-model-effort-segments {
  --provider-model-effort-duration: 250ms;
  --provider-model-effort-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  gap: var(--openbot-space-0-5);
  border-radius: var(--ui-menu-item-radius);
  background: var(--ui-menu-item-hover);
  padding: var(--openbot-space-0-5);
}
.provider-model-effort-segment {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}
.provider-model-effort-segment-control {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  min-width: 0;
  height: calc(var(--openbot-control-md) - 2 * var(--openbot-space-0-5));
  align-items: center;
  justify-content: center;
  border-radius: var(--provider-model-segment-radius);
  padding-inline: var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--provider-model-effort-duration) var(--provider-model-effort-ease);
}
.provider-model-effort-segment-control label {
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: inherit;
}
.provider-model-effort-segment-control:hover:not([data-disabled]), .provider-model-effort-segment-control[data-checked] {
  color: var(--openbot-text-primary);
}
.provider-model-effort-segment:has(:focus-visible) .provider-model-effort-segment-control {
  box-shadow: 0 0 0 1px var(--openbot-text-muted);
}
.provider-model-effort-segment-control[data-disabled] {
  opacity: 0.5;
  cursor: default;
}
.provider-model-effort-pill {
  position: absolute;
  top: var(--openbot-space-0-5);
  left: 0;
  z-index: 0;
  width: 0;
  height: calc(var(--openbot-control-md) - 2 * var(--openbot-space-0-5));
  border-radius: var(--provider-model-segment-radius);
  background: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-primary) 12%, transparent);
  }
  box-shadow: inset 0 1px 0 var(--ui-menu-highlight);
  pointer-events: none;
  transition: transform var(--provider-model-effort-duration) var(--provider-model-effort-ease), width var(--provider-model-effort-duration) var(--provider-model-effort-ease);
}
.provider-model-effort-pill[data-initializing] {
  transition: none;
}
.provider-model-effort-segments:has([data-disabled]) .provider-model-effort-pill {
  opacity: 0.5;
}
.provider-model-effort-select .ui-select-trigger {
  border-color: transparent;
  border-radius: var(--ui-menu-item-radius);
  background: var(--ui-menu-item-hover);
  box-shadow: none;
}
.provider-model-effort-select .ui-select-trigger:is(:hover, [data-expanded]) {
  background: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-primary) 10%, transparent);
  }
}
.provider-model-effort-content {
  border-radius: var(--ui-menu-radius);
  background: var(--ui-menu-bg);
  box-shadow: var(--ui-menu-panel-shadow);
  animation: ui-menu-in var(--ui-menu-duration) var(--ui-menu-ease) both;
}
.provider-model-effort-content .ui-select-listbox {
  padding: var(--ui-menu-padding);
}
.provider-model-effort-content .ui-select-item {
  border-radius: var(--ui-menu-item-radius);
  padding-block: var(--openbot-space-1-5);
  padding-left: var(--ui-menu-inset);
  font-size: var(--openbot-text-md);
}
.provider-model-effort-content .ui-select-item[data-highlighted] {
  background: var(--ui-menu-item-hover);
}
.provider-model-option {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 0;
  border-radius: var(--ui-menu-item-radius);
  background: transparent;
  padding: var(--openbot-space-1-5) var(--ui-menu-inset) var(--openbot-space-1-5) calc(var(--ui-menu-inset) + var(--openbot-icon-md) + var(--openbot-space-2));
  color: var(--openbot-text-primary);
  cursor: pointer;
  text-align: left;
  transition: background-color var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease;
}
.provider-model-option::before {
  position: absolute;
  top: 50%;
  left: var(--ui-menu-inset);
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  box-sizing: border-box;
  border: 1px solid var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--openbot-text-primary) 22%, transparent);
  }
  border-radius: var(--openbot-radius-pill);
  content: "";
  translate: 0 -50%;
  transition: background-color var(--ui-menu-duration) ease-out, border-color var(--ui-menu-duration) ease-out;
}
.provider-model-option-selected::before {
  border-color: transparent;
  background: var(--openbot-text-primary);
}
.provider-model-option:hover:not(:disabled), .provider-model-option:focus-visible {
  background: var(--ui-menu-item-hover);
}
.provider-model-option:disabled {
  color: var(--openbot-text-dim);
  cursor: not-allowed;
}
.provider-model-option-name {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}
.provider-model-option-name > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--openbot-text-md);
  line-height: 18px;
}
.provider-model-option-name small {
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-primary) 7%, transparent);
  }
  padding: 1px var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: 500;
  line-height: 15px;
}
.provider-model-check {
  position: absolute;
  top: 50%;
  left: calc(var(--ui-menu-inset) + (var(--openbot-icon-md) - var(--openbot-icon-sm)) / 2);
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  fill: none;
  stroke: var(--ui-menu-bg);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.5;
  translate: 0 -50%;
}
@media (max-width: 720px) {
  .provider-model-trigger:not(.provider-model-trigger-field) {
    max-width: 148px;
  }
  .provider-model-trigger-effort {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .provider-model-chevron, .provider-model-trigger, .provider-model-rail-button, .provider-model-option, .provider-model-option::before, .provider-model-effort-segment-control, .provider-model-effort-pill {
    transition: none;
  }
  .provider-model-popover, .provider-model-popover:not([data-expanded]), .provider-model-effort-content {
    animation: none;
  }
  .provider-model-trigger-mark[data-entering] {
    animation: none;
  }
}
.computer-button-agent-active {
  border-color: var(--openbot-accent);
  background: var(--openbot-accent-soft);
  box-shadow: 0 0 10px var(--openbot-accent-strong);
  color: var(--openbot-accent);
}
.computer-control-dot {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 5px;
  height: 5px;
  border: 1px solid var(--openbot-bg-canvas);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
  animation: browser-control-pulse 1.25s ease-in-out infinite;
}
.browser-toolbar-button:active:not(:disabled) {
  transform: scale(0.92);
  transition-duration: var(--openbot-duration-fast);
}
.conversation-scroll {
  min-height: 0;
  flex: 1;
  overflow-anchor: none;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 8px 12px var(--openbot-space-6);
}
.virtual-chat-list {
  position: relative;
  width: 100%;
}
.virtual-chat-row {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  padding-top: var(--openbot-chat-entry-gap);
}
.virtual-chat-row[data-grouped] {
  padding-top: var(--openbot-chat-marker-gap);
}
.virtual-chat-row > .chat-action-marker + .message-entry {
  margin-top: var(--openbot-chat-marker-gap);
}
.virtual-chat-list-static .virtual-chat-row {
  position: relative;
  inset: auto;
}
.virtual-chat-row[data-reply-flash] {
  isolation: isolate;
}
.virtual-chat-row[data-reply-flash]::before {
  position: absolute;
  z-index: -1;
  inset: var(--openbot-chat-entry-gap) -12px 0;
  background: var(--openbot-accent-soft);
  content: "";
  opacity: 0;
  pointer-events: none;
  animation: reply-flash 1.6s var(--openbot-ease-out);
}
.virtual-chat-row[data-grouped][data-reply-flash]::before {
  top: var(--openbot-chat-marker-gap);
}
@keyframes reply-flash {
  0%, 45% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.conversation-history-status {
  display: flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.scroll-to-latest {
  position: sticky;
  z-index: 3;
  top: calc(100% - 58px);
  left: 50%;
  display: flex;
  width: max-content;
  height: 44px;
  align-items: center;
  margin-bottom: -44px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface-raised);
  box-shadow: 0 8px 24px var(--openbot-shadow-popover-ambient), inset 0 0 0 1px var(--openbot-shadow-ring);
  color: var(--openbot-text-primary);
  transform: translateX(-50%);
  transition: background-color var(--openbot-duration-hover) ease;
}
.scroll-to-latest:is([data-new-messages], [data-reply-return]) {
  top: calc(100% - 50px);
  height: 36px;
  margin-bottom: -36px;
}
.scroll-to-latest[data-new-messages] {
  border-color: transparent;
  background: var(--openbot-unread-surface);
  color: var(--openbot-unread-text);
}
.scroll-to-latest-button {
  display: grid;
  width: 44px;
  height: 100%;
  place-items: center;
  border: 0;
  border-radius: inherit;
  background: none;
  color: inherit;
  transition: background-color var(--openbot-duration-hover) ease, transform var(--openbot-duration-fast) cubic-bezier(0.23, 1, 0.32, 1);
}
.scroll-to-latest:is([data-new-messages], [data-reply-return]) .scroll-to-latest-button {
  width: auto;
  grid-auto-flow: column;
  gap: var(--openbot-space-2);
  padding-inline: var(--openbot-space-1-5) var(--openbot-space-2);
}
.scroll-to-latest-count {
  font-size: var(--openbot-text-sm);
  font-weight: 620;
  white-space: nowrap;
}
.scroll-to-latest-dismiss {
  display: grid;
  height: 100%;
  place-items: center;
  border: 0;
  background: none;
  padding-inline: 0 var(--openbot-space-1-5);
  color: inherit;
  transition: transform var(--openbot-duration-fast) cubic-bezier(0.23, 1, 0.32, 1);
}
.scroll-to-latest-button svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}
.scroll-to-latest-dismiss svg {
  box-sizing: content-box;
  width: 14px;
  height: 14px;
  border-radius: var(--openbot-radius-pill);
  padding: var(--openbot-space-1);
  transition: background-color var(--openbot-duration-hover) ease;
}
.scroll-to-latest-button:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: -2px;
}
.scroll-to-latest-dismiss:focus-visible {
  outline: none;
}
.scroll-to-latest-dismiss:focus-visible svg {
  outline: 2px solid var(--openbot-border-focus);
}
.scroll-to-latest[data-new-messages] .scroll-to-latest-button:focus-visible {
  outline-color: var(--openbot-unread-text);
}
.scroll-to-latest[data-new-messages] .scroll-to-latest-dismiss:focus-visible svg {
  outline-color: var(--openbot-unread-text);
}
.scroll-to-latest-button .scroll-to-latest-reply-icon {
  width: 18px;
  height: 18px;
}
.scroll-to-latest-button:active, .scroll-to-latest-dismiss:active {
  transform: scale(0.96);
}
@media (hover: hover) and (pointer: fine) {
  .scroll-to-latest-button:hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-bg-control-active);
    color: inherit;
  }
  .scroll-to-latest-dismiss:hover:not(:disabled):not([data-disabled]) {
    background: none;
    color: inherit;
  }
  .scroll-to-latest-dismiss:hover svg {
    background: var(--openbot-bg-control-active);
  }
  .scroll-to-latest:is([data-new-messages], [data-reply-return]) .scroll-to-latest-button:hover:not(:disabled):not([data-disabled]) {
    background: none;
  }
  .scroll-to-latest[data-new-messages] .scroll-to-latest-dismiss:hover svg {
    background: var(--openbot-unread-text);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--openbot-unread-text) 18%, transparent);
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-to-latest, .scroll-to-latest-button, .scroll-to-latest-dismiss, .scroll-to-latest-dismiss svg {
    transition: none;
  }
  .scroll-to-latest-button:active, .scroll-to-latest-dismiss:active {
    transform: none;
  }
}
.unread-messages-banner {
  position: relative;
  display: flex;
  min-height: 32px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  border-radius: 0 0 var(--openbot-radius-md) var(--openbot-radius-md);
  background: var(--openbot-unread-surface);
  padding: 0 12px;
  color: var(--openbot-unread-text);
  font-size: var(--openbot-text-sm);
  font-weight: 620;
  line-height: 16px;
  transition: background-color var(--openbot-duration-hover) var(--openbot-ease-out);
}
.unread-messages-banner button {
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  color: inherit;
}
.unread-messages-jump {
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0 12px;
  font-size: var(--openbot-text-sm);
  font-weight: 620;
  line-height: 16px;
  text-align: left;
}
.unread-messages-mark-read {
  position: relative;
  z-index: 1;
  margin-left: auto;
  padding: 0;
  font-size: var(--openbot-text-sm);
  font-weight: 680;
  line-height: 14px;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: transform var(--openbot-duration-fast) cubic-bezier(0.23, 1, 0.32, 1);
}
.unread-messages-mark-read-label {
  display: inline-flex;
  align-items: center;
  border-radius: var(--openbot-radius-sm);
  padding: 3px 5px;
  transition: background-color var(--openbot-duration-hover) var(--openbot-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .unread-messages-banner:hover {
    background-color: var(--openbot-unread-surface);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--openbot-unread-surface) 88%, var(--openbot-unread-text));
    }
  }
  .unread-messages-banner .ui-button:hover:not(:disabled):not([data-disabled]) {
    background: transparent;
    color: var(--openbot-unread-text);
  }
  .unread-messages-banner .unread-messages-mark-read:hover:not(:disabled):not([data-disabled]) .unread-messages-mark-read-label {
    background: var(--openbot-unread-text);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--openbot-unread-text) 12%, transparent);
    }
  }
}
.unread-messages-banner button:focus-visible {
  outline: 2px solid var(--openbot-unread-text);
  outline-offset: 1px;
}
.unread-messages-mark-read:active:not(:disabled) {
  transform: scale(0.97);
}
.unread-messages-banner button:disabled {
  opacity: 0.55;
}
.unread-messages-divider {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  margin: var(--openbot-space-1) 0 var(--openbot-space-2);
  color: var(--openbot-unread-surface);
  font-size: var(--openbot-text-sm);
  font-weight: 720;
  letter-spacing: 0.08em;
  line-height: 12px;
}
.unread-messages-divider hr {
  width: 100%;
  height: 1px;
  flex: 1;
  border: 0;
  background: var(--openbot-unread-surface);
}
.unread-messages-divider span {
  flex: 0 0 auto;
}
.time-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 656px;
  height: 24px;
  margin: 0 auto;
  padding: 4px 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
  text-align: center;
}
.chat-scroll-rail {
  --chat-scroll-rail-accent: var(--openbot-text-muted);
  --chat-scroll-rail-track: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --chat-scroll-rail-track: color-mix(in srgb, var(--openbot-text-primary) 10%, transparent);
  }
  --chat-scroll-rail-glow: var(--chat-scroll-rail-accent);
  @supports (color: color-mix(in lab, red, red)) {
    --chat-scroll-rail-glow: color-mix(in srgb, var(--chat-scroll-rail-accent) 60%, transparent);
  }
  --chat-scroll-rail-ease: var(--openbot-ease-out);
  --chat-scroll-rail-duration: var(--openbot-duration-island-content);
  --chat-scroll-rail-quick: var(--openbot-duration-overlay);
  --chat-scroll-rail-blur: 8px;
  position: sticky;
  z-index: 3;
  top: 0;
  pointer-events: none;
}
.chat-scroll-rail-nav {
  position: absolute;
  top: 50%;
  right: calc(-1 * var(--chat-scroll-rail-inset, 0px));
  width: min(260px, 70%);
  height: min(64%, 600px);
  display: flex;
  flex-direction: column;
  padding: var(--openbot-space-3) 0;
  transform: translateY(-50%);
}
.chat-scroll-rail-nav:hover, .chat-scroll-rail-nav:has(:focus-visible) {
  pointer-events: auto;
}
.chat-scroll-rail-surface {
  position: absolute;
  inset: calc(-1 * var(--openbot-space-8)) 0 calc(-1 * var(--openbot-space-8)) calc(-2 * var(--openbot-space-8));
  background: var(--openbot-bg-canvas);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-bg-canvas) 80%, transparent);
  }
  mask-image: linear-gradient( to bottom, transparent, var(--openbot-text-primary) var(--openbot-space-8), var(--openbot-text-primary) calc(100% - var(--openbot-space-8)), transparent ), linear-gradient(to right, transparent, var(--openbot-text-primary) calc(2 * var(--openbot-space-8)));
  mask-composite: intersect;
  opacity: 0;
  transition: opacity var(--openbot-duration-slow) ease;
}
.chat-scroll-rail-eyebrow {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin: 0 0 var(--openbot-space-3);
  padding: 0 var(--openbot-space-4) 0 var(--openbot-space-4);
  color: var(--openbot-text-dim);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity var(--openbot-duration-slow) ease;
}
.chat-scroll-rail-count {
  --digit-dur: var(--openbot-duration-overlay);
  --digit-distance: var(--openbot-space-1);
  --digit-blur: var(--openbot-space-0-5);
  --digit-ease: var(--openbot-ease-out);
  color: var(--chat-scroll-rail-accent);
  font-variant-numeric: tabular-nums;
}
.chat-scroll-rail-track {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.chat-scroll-rail-list {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.chat-scroll-rail-item {
  flex-basis: 0;
  min-height: 22px;
  display: flex;
}
.chat-scroll-rail .chat-scroll-rail-link {
  flex: 1;
  min-width: 0;
  height: auto;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  gap: var(--openbot-space-3);
  padding: 0 0 0 var(--openbot-space-4);
  border: 0;
  border-radius: 0;
  color: var(--openbot-text-muted);
  font-weight: inherit;
  text-decoration: none;
  outline: none;
}
.chat-scroll-rail-item[data-state="read"] .chat-scroll-rail-link {
  color: var(--openbot-text-secondary);
}
.chat-scroll-rail-item[data-state="active"] .chat-scroll-rail-link, .chat-scroll-rail .chat-scroll-rail-link:hover, .chat-scroll-rail .chat-scroll-rail-link:focus-visible {
  color: var(--openbot-text-primary);
  text-decoration: none;
}
.chat-scroll-rail-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  margin-top: -3px;
  font-size: var(--openbot-text-sm);
  line-height: 18px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0;
  filter: blur(var(--chat-scroll-rail-blur));
  transform: translateX(var(--openbot-space-2));
  transition: color var(--openbot-duration-slow) ease, opacity var(--openbot-duration-slow) ease, filter var(--openbot-duration-slow) ease, transform var(--chat-scroll-rail-quick) var(--chat-scroll-rail-ease);
}
.chat-scroll-rail-link:focus-visible .chat-scroll-rail-label {
  text-decoration: underline;
  text-decoration-color: var(--chat-scroll-rail-accent);
  text-underline-offset: 4px;
}
.chat-scroll-rail-bar {
  position: relative;
  width: clamp(12px, var(--chat-scroll-rail-inset, 20px), 20px);
  flex: none;
  padding-bottom: var(--openbot-space-1);
}
.chat-scroll-rail .chat-scroll-rail-bar {
  pointer-events: auto;
}
.chat-scroll-rail-bar::before, .chat-scroll-rail-fill {
  content: "";
  position: absolute;
  top: 0;
  right: 5px;
  bottom: var(--openbot-space-1);
  width: 2px;
  border-radius: var(--openbot-radius-pill);
  transition: width var(--chat-scroll-rail-quick) var(--chat-scroll-rail-ease), right var(--chat-scroll-rail-quick) var(--chat-scroll-rail-ease), background-color var(--chat-scroll-rail-quick) ease;
}
.chat-scroll-rail-bar::before {
  background: var(--chat-scroll-rail-track);
}
.chat-scroll-rail-fill {
  background: var(--chat-scroll-rail-accent);
  transform: scaleY(var(--chat-scroll-rail-fill, 0));
  transform-origin: top center;
}
.chat-scroll-rail-item[data-state="active"] .chat-scroll-rail-bar::before, .chat-scroll-rail-item[data-state="active"] .chat-scroll-rail-fill {
  right: 4.5px;
  width: 3px;
}
.chat-scroll-rail-item[data-state="active"] .chat-scroll-rail-fill {
  box-shadow: 0 0 10px var(--chat-scroll-rail-glow);
}
.chat-scroll-rail-head {
  position: absolute;
  top: 0;
  right: 3px;
  width: 6px;
  height: 6px;
  border-radius: var(--openbot-radius-pill);
  background: var(--chat-scroll-rail-accent);
  box-shadow: 0 0 0 3px var(--chat-scroll-rail-accent), 0 0 12px var(--chat-scroll-rail-glow);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--chat-scroll-rail-accent) 18%, transparent), 0 0 12px var(--chat-scroll-rail-glow);
  }
  pointer-events: none;
  transform: translateY( calc( var(--chat-scroll-rail-head-top) + (var(--chat-scroll-rail-head-length) - var(--openbot-space-1)) * var(--chat-scroll-rail-fill, 0) - 50% ) );
}
.chat-scroll-rail-nav:hover .chat-scroll-rail-surface, .chat-scroll-rail-nav:has(:focus-visible) .chat-scroll-rail-surface {
  backdrop-filter: blur(var(--openbot-space-4));
  opacity: 1;
  transition: opacity var(--openbot-duration-overlay) ease;
}
.chat-scroll-rail-nav:hover .chat-scroll-rail-eyebrow, .chat-scroll-rail-nav:has(:focus-visible) .chat-scroll-rail-eyebrow {
  opacity: 1;
}
.chat-scroll-rail-nav:hover .chat-scroll-rail-label, .chat-scroll-rail-nav:has(:focus-visible) .chat-scroll-rail-label {
  --chat-scroll-rail-delay: calc(min(var(--chat-scroll-rail-index, 0), 12) * 18ms);
  opacity: 1;
  filter: blur(0);
  transform: none;
  transition: color var(--openbot-duration-slow) ease, opacity var(--chat-scroll-rail-quick) ease var(--chat-scroll-rail-delay), filter var(--chat-scroll-rail-quick) ease var(--chat-scroll-rail-delay), transform var(--chat-scroll-rail-duration) var(--chat-scroll-rail-ease) var(--chat-scroll-rail-delay);
}
@media (prefers-reduced-motion: reduce) {
  .chat-scroll-rail .chat-scroll-rail-nav *, .chat-scroll-rail .chat-scroll-rail-nav *::before, .chat-scroll-rail .chat-scroll-rail-nav *::after, .chat-scroll-rail-nav:hover .chat-scroll-rail-surface, .chat-scroll-rail-nav:has(:focus-visible) .chat-scroll-rail-surface, .chat-scroll-rail-nav:hover .chat-scroll-rail-label, .chat-scroll-rail-nav:has(:focus-visible) .chat-scroll-rail-label {
    transition: none;
  }
}
.message-entry {
  max-width: none;
}
.message-entry > .ui-message-content {
  max-width: 100%;
}
.message-action-row {
  display: flex;
  min-height: 24px;
  align-items: center;
  gap: var(--openbot-space-1);
  padding-inline: var(--openbot-space-1);
}
.message-entry-with-author {
  display: grid;
  grid-template-columns: calc(var(--openbot-space-6) + var(--openbot-space-1)) minmax(0, 1fr);
  column-gap: var(--openbot-space-2);
  row-gap: var(--openbot-space-1);
}
.message-entry-with-author > .ui-message-content {
  display: contents;
}
.message-entry-with-author .message-shell {
  grid-column: 2;
  grid-row: 2;
}
.message-entry-with-author .message-action-row {
  grid-column: 2;
  grid-row: 3;
}
.message-entry-with-author .ui-message-footer {
  grid-column: 2;
  grid-row: 4;
}
.message-author-avatar {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  overflow: visible;
  border: 0;
  background: transparent;
}
.message-author-avatar .agent-avatar {
  --agent-avatar-optical-offset: -3px;
  width: var(--openbot-space-6);
  height: var(--openbot-space-6);
}
.message-author-avatar-button {
  width: 100%;
  height: 100%;
  padding: 0;
}
.message-author-avatar-button:hover:not(:disabled):not([data-disabled]) {
  background: transparent;
}
.message-author-gutter {
  width: 28px;
  flex: 0 0 28px;
}
.message-author-name {
  grid-column: 2;
  grid-row: 1;
  padding-inline: var(--openbot-space-3);
  min-width: 0;
  color: var(--message-author-color, var(--openbot-text-muted));
  font-weight: var(--openbot-weight-regular);
  overflow-wrap: anywhere;
}
.message-author-name-button {
  height: auto;
  min-width: 0;
  margin-inline: calc(var(--openbot-space-1-5) * -1);
  padding: 0 var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-md);
  color: inherit;
  font: inherit;
  white-space: normal;
  text-align: start;
}
.message-author-name-button:hover:not(:disabled):not([data-disabled]), .message-author-name-button:focus-visible {
  background: var(--openbot-hover);
  color: inherit;
}
.message-entry-animated {
  animation: message-in var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1) both;
}
.message-entry-agent {
  width: 100%;
}
.message-shell {
  display: flex;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  gap: 5px;
}
.message-entry-user .message-shell {
  justify-content: flex-end;
}
.message-actions {
  position: relative;
  z-index: 4;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--openbot-duration-hover) ease;
}
.message-time {
  padding-inline: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--openbot-duration-hover) ease;
}
.message-author-name > .message-time {
  padding-inline: 0;
}
.message-entry-user .message-action-row > .message-time {
  order: -1;
}
.message-entry:hover .message-actions, .message-entry:focus-within .message-actions, .message-actions-open {
  opacity: 1;
  pointer-events: auto;
}
.message-entry:hover .message-time, .message-entry:focus-within .message-time, .message-entry:has(.message-actions-open) .message-time {
  opacity: 1;
}
@media (hover: none), (pointer: coarse) {
  .message-actions, .message-time {
    opacity: 1;
    pointer-events: auto;
  }
}
.message-entry-user .message-author-name {
  text-align: end;
}
.message-entry-user .message-author-name > .message-time {
  order: -1;
}
.ui-bubble.message-bubble-member > .ui-bubble-content {
  background: var(--message-author-color, var(--openbot-accent));
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix( in srgb, var(--message-author-color, var(--openbot-accent)) 22%, var(--openbot-bg-surface-raised) );
  }
}
.message-action-button {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  padding: 0;
  color: var(--openbot-text-muted);
  transition: background var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease;
}
.message-action-button:hover, .message-action-button:focus-visible, .message-action-button[aria-expanded="true"] {
  background: var(--openbot-border);
  color: var(--openbot-text-secondary);
  outline: none;
}
.message-action-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.message-action-button svg circle:not(:first-child), .message-action-button svg:has(circle:nth-child(3)) circle {
  fill: currentColor;
  stroke: none;
}
.message-action-popover-anchor {
  position: relative;
  display: grid;
  place-items: center;
}
.reaction-picker-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1px;
}
.reaction-picker-options {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1px;
}
.reaction-picker-more {
  margin-top: 3px;
  border-top: 1px solid var(--openbot-border);
  padding-top: 4px;
}
.reaction-picker-more .reaction-picker-options {
  display: grid;
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  grid-template-columns: repeat(8, minmax(0, 1fr));
}
.reaction-picker-more .reaction-picker-options [role="menuitemradio"] {
  width: 100%;
  min-width: 0;
}
.reaction-picker-row :is([role="menuitem"], [role="menuitemradio"]) {
  display: grid;
  width: 31px;
  height: 31px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  padding: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-xl);
  line-height: 1;
  transition: background var(--openbot-duration-hover) ease, transform var(--openbot-duration-hover) ease;
}
.reaction-picker-row :is([role="menuitem"], [role="menuitemradio"]):hover, .reaction-picker-row :is([role="menuitem"], [role="menuitemradio"]):focus-visible, .reaction-picker-row :is([role="menuitem"], [role="menuitemradio"])[data-highlighted], .reaction-picker-row [role="menuitemradio"][aria-checked="true"] {
  background: var(--openbot-border);
  outline: none;
  transform: scale(1.08);
}
.reaction-picker-row .reaction-more-button {
  color: var(--openbot-text-muted);
}
.reaction-more-button svg {
  width: 15px;
  height: 15px;
}
.message-reaction-pill {
  display: flex;
  min-width: 0;
  height: var(--openbot-icon-lg);
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  padding: 0;
  color: inherit;
  font-size: var(--openbot-text-lg);
  line-height: 1;
  transition: background var(--openbot-duration-hover) ease;
}
.message-entry:has(.message-reaction-anchor) > .ui-message-content {
  padding-bottom: var(--openbot-space-3);
}
.message-reaction-anchor .message-reaction-pill {
  gap: 2px;
  margin: 0;
  border-radius: inherit;
}
.ui-bubble-reactions.message-reaction-anchor {
  padding: 2px 6px;
}
.ui-bubble-reactions.message-reaction-anchor:has(> .message-reaction-pill:only-child) {
  width: var(--openbot-control-xs);
  padding-inline: 2px;
}
.ui-bubble-reactions.message-reaction-anchor:has(> .message-reaction-pill:only-child) > .message-reaction-pill {
  width: var(--openbot-icon-lg);
  border-radius: var(--openbot-radius-pill);
}
.message-reaction-anchor .ui-bubble-reaction-overflow {
  padding-right: 6px;
}
.message-reaction-pill:hover {
  background: var(--openbot-hover);
}
.message-reaction-pill-readonly:hover {
  background: transparent;
}
.message-reaction-anchor:has(.message-reaction-pill:focus-visible) {
  box-shadow: 0 0 0 3px var(--openbot-bg-canvas), 0 0 0 5px var(--openbot-border-focus);
}
.message-reaction-pill:focus-visible {
  outline: none;
}
.chat-action-entry-animated {
  width: 100%;
  animation: message-in var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1) both;
}
.agent-activity-slot[data-reserved="true"] {
  min-height: 44px;
}
.agent-activity-entry {
  width: 100%;
  display: grid;
  grid-template-rows: 1fr;
  pointer-events: none;
  transition: grid-template-rows var(--openbot-duration-overlay) var(--openbot-ease-out);
}
@starting-style {
  .agent-activity-entry {
    grid-template-rows: 0fr;
  }
}
.agent-activity-entry[data-state="exiting"] {
  grid-template-rows: 0fr;
}
.agent-activity-content {
  min-height: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  padding: 4px 0 8px 8px;
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  transition: opacity var(--openbot-duration-overlay) var(--openbot-ease-out), filter var(--openbot-duration-overlay) var(--openbot-ease-out), transform var(--openbot-duration-overlay) var(--openbot-ease-out);
  will-change: opacity, filter, transform;
}
@starting-style {
  .agent-activity-content {
    opacity: 0;
    filter: blur(2px);
    transform: translateY(4px);
  }
}
.agent-activity-entry[data-state="exiting"] .agent-activity-content {
  opacity: 0;
  filter: blur(2px);
  transform: translateY(2px);
}
.agent-activity-avatar {
  --agent-avatar-optical-offset: -2px;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  align-self: center;
  transform: translateY(0) scale(1);
  transition: transform var(--openbot-duration-overlay) var(--openbot-ease-out);
  will-change: transform;
}
@starting-style {
  .agent-activity-avatar {
    transform: translateY(3px) scale(0.96);
  }
}
.agent-activity-entry[data-state="exiting"] .agent-activity-avatar {
  transform: translateY(0) scale(0.98);
}
.agent-activity-label {
  display: -webkit-box;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  background: linear-gradient( 90deg, var(--openbot-text-primary) 0%, var(--openbot-text-primary) 30%, var(--openbot-text-muted) 45%, var(--openbot-text-muted) 55%, var(--openbot-text-primary) 70%, var(--openbot-text-primary) 100% );
  background-size: 300% 100%;
  background-clip: text;
  color: transparent;
  font-size: var(--openbot-text-sm);
  line-height: 20px;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: image-generation-shine 2.25s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
}
.agent-activity-elapsed {
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  line-height: 20px;
}
.chat-action-marker {
  width: min(var(--openbot-chat-marker-width), calc(100% - var(--openbot-space-6)));
  min-height: var(--openbot-chat-marker-height);
  justify-content: center;
  margin: 0 auto;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  letter-spacing: var(--openbot-tracking-normal);
  text-align: center;
}
.chat-action-marker-content {
  max-width: 100%;
  gap: var(--openbot-space-1);
}
.chat-action-marker-summary {
  --chat-action-history-open: 340ms;
  --chat-action-history-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --chat-action-history-close: 200ms;
  --chat-action-history-close-ease: cubic-bezier(0.32, 0.08, 0.24, 1);
  --chat-action-history-lift: 170ms;
  --chat-action-history-fade: 22px;
  --chat-action-history-entry: 260ms;
  --chat-action-history-stagger: 60ms;
  display: flex;
  min-width: 0;
  max-width: 100%;
  flex-direction: column;
  align-items: center;
}
.ui-button.chat-action-history-toggle {
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
}
.chat-action-history-toggle svg {
  transition: transform var(--chat-action-history-close) var(--openbot-ease-out);
}
.chat-action-history-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.chat-action-history-panel {
  display: grid;
  width: 100%;
  grid-template-rows: 1fr;
}
.chat-action-history-panel[data-state="open"] {
  animation: chat-action-history-open var(--chat-action-history-open) var(--chat-action-history-ease);
}
.chat-action-history-panel[data-state="closed"] {
  animation: chat-action-history-close var(--chat-action-history-close) var(--chat-action-history-close-ease) forwards;
}
@keyframes chat-action-history-open {
  from {
    grid-template-rows: 0fr;
  }
}
@keyframes chat-action-history-close {
  to {
    grid-template-rows: 0fr;
  }
}
.chat-action-history-panel[data-state="open"] .chat-action-history {
  animation: chat-action-history-settle var(--chat-action-history-open) var(--openbot-ease-out);
}
.chat-action-history-panel[data-state="closed"] .chat-action-history {
  animation: chat-action-history-lift var(--chat-action-history-lift) var(--openbot-ease-out) forwards;
}
@keyframes chat-action-history-settle {
  from {
    transform: translateY(-25%);
  }
}
@keyframes chat-action-history-lift {
  to {
    transform: translateY(-8%);
    opacity: 0;
  }
}
.chat-action-history-clip {
  min-height: 0;
  overflow: hidden;
}
.chat-action-history-panel[data-state="closed"] .chat-action-history-clip {
  -webkit-mask-image: linear-gradient( to bottom, var(--openbot-text-primary) calc(100% - var(--chat-action-history-fade)), transparent );
  mask-image: linear-gradient( to bottom, var(--openbot-text-primary) calc(100% - var(--chat-action-history-fade)), transparent );
}
.chat-action-history {
  box-sizing: border-box;
  display: grid;
  width: 100%;
  gap: var(--openbot-space-1);
  margin: var(--openbot-space-1) 0 0;
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  border-inline-start: 1px solid var(--openbot-border-grouped);
  list-style: none;
  text-align: left;
}
.chat-action-history-entry {
  display: grid;
  grid-template-columns: var(--openbot-icon-xs) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-1-5);
  color: var(--openbot-text-secondary);
}
.chat-action-history-panel[data-state="open"] .chat-action-history-entry {
  animation: chat-action-history-entry-in var(--chat-action-history-entry) var(--openbot-ease-out) backwards;
}
.chat-action-history-panel[data-state="open"] .chat-action-history-entry:nth-child(2) {
  animation-delay: var(--chat-action-history-stagger);
}
.chat-action-history-panel[data-state="open"] .chat-action-history-entry:nth-child(3) {
  animation-delay: calc(var(--chat-action-history-stagger) * 2);
}
.chat-action-history-panel[data-state="open"] .chat-action-history-entry:nth-child(n + 4) {
  animation-delay: calc(var(--chat-action-history-stagger) * 3);
}
@keyframes chat-action-history-entry-in {
  from {
    transform: translateX(calc(var(--openbot-space-1) * -1));
    opacity: 0;
    filter: blur(2px);
  }
}
.chat-action-history-entry time {
  color: var(--openbot-text-muted);
  white-space: nowrap;
}
.chat-action-history-icon, .chat-action-history-icon svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.chat-action-history-status-completed .chat-action-history-icon {
  color: var(--openbot-success);
}
.chat-action-history-status-failed .chat-action-history-icon, .chat-action-history-status-interrupted .chat-action-history-icon, .chat-action-history-status-cancelled .chat-action-history-icon {
  color: var(--openbot-danger);
}
.chat-action-history-status-needs-attention .chat-action-history-icon {
  color: var(--openbot-warning);
}
.chat-action-history-status-in-progress .chat-action-history-icon {
  color: var(--openbot-accent);
}
@media (prefers-reduced-motion: reduce) {
  .chat-action-history-panel, .chat-action-history, .chat-action-history-entry {
    animation: none;
  }
  .chat-action-history-toggle svg {
    transition: none;
  }
}
.chat-action-marker-label, .chat-action-marker-time {
  flex: 0 0 auto;
  white-space: nowrap;
}
.chat-action-marker-time {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.chat-action-target {
  box-sizing: border-box;
  display: inline-flex;
  min-width: 0;
  max-width: min(280px, 100%);
  height: auto;
  min-height: var(--openbot-chat-marker-height);
  flex: 0 1 auto;
  align-items: center;
  gap: var(--openbot-space-1);
  border: 0;
  border-radius: var(--openbot-radius-pill);
  background: transparent;
  padding: 0 var(--openbot-space-1-5);
  color: var(--openbot-text-secondary);
  font: inherit;
  line-height: inherit;
  outline: none;
  text-align: left;
  white-space: nowrap;
  transition: background-color var(--openbot-duration-hover) var(--openbot-ease-out), box-shadow var(--openbot-duration-hover) var(--openbot-ease-out), color var(--openbot-duration-hover) var(--openbot-ease-out), scale var(--openbot-duration-fast) var(--openbot-ease-out);
}
button.chat-action-target:hover, .chat-action-agent-menu-trigger:hover, .chat-action-agent-menu-trigger[aria-expanded="true"] {
  background: var(--openbot-bg-control-hover);
  box-shadow: 0 0 0 1px var(--openbot-border-strong);
  color: var(--openbot-text-primary);
}
button.chat-action-target:focus-visible, .chat-action-agent-menu-trigger:focus-visible {
  background: var(--openbot-bg-control-hover);
  box-shadow: var(--openbot-focus-ring);
  color: var(--openbot-text-primary);
}
button.chat-action-target:active, .chat-action-agent-menu-trigger:active {
  background: var(--openbot-bg-control-active);
  scale: 0.96;
}
.chat-action-target-unavailable {
  color: var(--openbot-text-muted);
}
.chat-action-marker-unavailable .chat-action-marker-label, .chat-action-marker-context-reset .chat-action-marker-label, .chat-action-marker-model-switch .chat-action-marker-label {
  padding-inline-end: var(--openbot-space-1-5);
}
.chat-action-target-name, .chat-action-target > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-action-target .ui-marker-icon, .chat-action-target .ui-marker-icon svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: 0 0 var(--openbot-icon-xs);
}
.chat-action-target .ui-marker-icon {
  translate: 0 -0.5px;
}
.chat-action-agent-avatar {
  --agent-avatar-optical-offset: -2px;
  position: relative;
  width: var(--openbot-chat-marker-avatar);
  height: var(--openbot-chat-marker-avatar);
  flex: 0 0 var(--openbot-chat-marker-avatar);
  border: 0;
  background: transparent;
  translate: 0 -0.5px;
}
.chat-action-marker-agent-message .chat-action-target {
  --chat-action-agent-color: var(--openbot-accent);
}
.chat-action-marker-agent-message button.chat-action-target:hover, .chat-action-marker-agent-message .chat-action-agent-menu-trigger:hover, .chat-action-marker-agent-message .chat-action-agent-menu-trigger[aria-expanded="true"] {
  background: var(--chat-action-agent-color);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--chat-action-agent-color) 16%, transparent);
  }
  box-shadow: none;
  color: var(--chat-action-agent-color);
}
.chat-action-marker-agent-message button.chat-action-target:focus-visible, .chat-action-marker-agent-message .chat-action-agent-menu-trigger:focus-visible {
  background: var(--chat-action-agent-color);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--chat-action-agent-color) 16%, transparent);
  }
  box-shadow: var(--openbot-focus-ring);
  color: var(--chat-action-agent-color);
}
.chat-action-marker-agent-message button.chat-action-target:active, .chat-action-marker-agent-message .chat-action-agent-menu-trigger:active {
  background: var(--chat-action-agent-color);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--chat-action-agent-color) 34%, transparent);
  }
  color: var(--openbot-text-primary);
}
.chat-action-target-status-in-progress .ui-marker-icon {
  color: var(--openbot-accent);
}
.chat-action-target-status-completed .ui-marker-icon {
  color: var(--openbot-success);
}
.chat-action-target-status-failed .ui-marker-icon, .chat-action-target-status-cancelled .ui-marker-icon, .chat-action-target-status-interrupted .ui-marker-icon {
  color: var(--openbot-danger);
}
.chat-action-target-status-needs-attention .ui-marker-icon {
  color: var(--openbot-warning);
}
.chat-action-target-status-in-progress .ui-marker-icon svg {
  animation: ui-spin 1s linear infinite;
}
.chat-action-avatar-stack {
  display: inline-flex;
  min-width: 0;
  height: var(--openbot-chat-marker-avatar);
  align-items: center;
}
.chat-action-avatar-stack .chat-action-agent-avatar + .chat-action-agent-avatar {
  margin-left: -6px;
}
.chat-action-group-list {
  padding-inline: 0;
  border-inline-start: 0;
  text-align: center;
}
.chat-action-group-list > .chat-action-history-entry {
  display: block;
}
.chat-action-group-list .chat-action-marker {
  width: 100%;
}
.chat-action-marker-routine-run-group > .chat-action-marker-summary > .chat-action-marker-content {
  flex-wrap: wrap;
  justify-content: center;
}
.chat-action-run-group-details {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--openbot-space-1);
}
.chat-action-run-group-count::before, .chat-action-run-group-time::before {
  content: "·" / "";
  margin-inline-end: var(--openbot-space-1);
}
.ui-action-menu.chat-action-agent-menu {
  min-width: 220px;
  max-width: min(320px, calc(100vw - var(--openbot-space-4)));
}
.ui-action-menu.chat-action-agent-menu .chat-action-agent-menu-item[role="menuitem"] {
  display: grid;
  align-items: center;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: var(--openbot-space-2);
}
.chat-action-agent-menu-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-action-agent-menu-item .chat-action-agent-avatar {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
}
.chat-action-agent-menu-status {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  white-space: nowrap;
}
.chat-action-attachments {
  margin-top: var(--openbot-space-2);
}
.chat-row-unavailable {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .chat-action-target-status-in-progress .ui-marker-icon svg {
    animation: none;
  }
}
.message-entry .ui-bubble {
  letter-spacing: -0.15px;
}
.message-entry-agent .ui-bubble {
  max-width: min(720px, 100%);
}
.message-entry-agent .ui-bubble:has(.choice-card) {
  width: min(500px, 100%);
  max-width: min(500px, 100%);
}
.message-entry-agent .ui-bubble:has(.image-generation) {
  width: min(420px, 100%);
  max-width: min(420px, 100%);
}
.message-entry-agent .ui-bubble:has(.image-gallery) {
  width: min(520px, 100%);
  max-width: min(520px, 100%);
}
.message-entry-agent .ui-bubble-variant-ghost:has( :is(.choice-card, .image-generation, .image-gallery, .message-code-block, .message-data-table-scroll) ) > .ui-bubble-content {
  width: 100%;
}
.image-generation {
  display: grid;
  min-width: 0;
  justify-items: start;
  gap: 14px;
}
.message-image-attachments {
  display: grid;
  min-width: 0;
  gap: 10px;
}
.image-generation-stage {
  position: relative;
  width: min(100%, 420px);
  overflow: hidden;
  aspect-ratio: var(--image-generation-ratio);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  isolation: isolate;
}
.image-generation-canvas, .image-generation-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.image-generation-canvas {
  overflow: hidden;
  background: var(--openbot-bg-control);
  opacity: 1;
  transition: opacity var(--openbot-duration-overlay) ease;
}
.image-generation-canvas-failed {
  display: grid;
  place-items: center;
}
.image-generation-ready .image-generation-canvas {
  opacity: 0;
}
.image-generation-ready .image-generation-glow {
  animation: none;
}
.image-generation-dots {
  position: absolute;
  inset: 2px;
  background-image: radial-gradient(circle, var(--openbot-text-muted) 0.7px, transparent 1.3px);
  background-repeat: space;
  background-size: 11px 11px;
  opacity: 0.22;
}
.image-generation-failure-mark {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 2px solid var(--openbot-danger);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-danger-soft);
  box-shadow: 0 0 0 5px var(--openbot-danger-soft);
  color: var(--openbot-danger);
}
.image-generation-failure-mark > svg {
  width: var(--openbot-control-xl);
  height: var(--openbot-control-xl);
  stroke-width: var(--openbot-icon-stroke);
}
.image-generation-glow {
  position: absolute;
  inset: 2px;
  background-image: radial-gradient(circle, var(--openbot-text-primary) 1.1px, transparent 1.6px);
  background-repeat: space;
  background-size: 11px 11px;
  -webkit-mask-image: radial-gradient(ellipse at center, var(--openbot-text-primary) 0%, transparent 60%), radial-gradient(ellipse at center, var(--openbot-text-primary) 0%, transparent 62%);
  mask-image: radial-gradient(ellipse at center, var(--openbot-text-primary) 0%, transparent 60%), radial-gradient(ellipse at center, var(--openbot-text-primary) 0%, transparent 62%);
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-size: 72% 62%, 52% 52%;
  mask-size: 72% 62%, 52% 52%;
  -webkit-mask-position: 16% 20%, 30% 32%;
  mask-position: 16% 20%, 30% 32%;
  animation: image-generation-morph 4.2s cubic-bezier(0.35, 1.55, 0.65, 1) infinite, image-generation-breathe 1.9s cubic-bezier(0.66, 0, 0.34, 1) infinite;
}
.image-generation-resolution {
  position: absolute;
  z-index: 1;
  top: 8px;
  right: 8px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface);
  padding: 2px 7px;
  color: var(--openbot-text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--openbot-text-sm);
  white-space: nowrap;
}
.image-generation-meta {
  display: flex;
  width: min(100%, 420px);
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
}
.image-generation-label {
  background: linear-gradient( 90deg, var(--openbot-text-primary) 0%, var(--openbot-text-primary) 30%, var(--openbot-text-muted) 45%, var(--openbot-text-muted) 55%, var(--openbot-text-primary) 70%, var(--openbot-text-primary) 100% );
  background-size: 300% 100%;
  background-clip: text;
  color: transparent;
  font-size: var(--openbot-text-lg);
  font-weight: 550;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.image-generation:not(.image-generation-ready, .image-generation-failed) .image-generation-label {
  animation: image-generation-shine 2.25s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
}
.image-generation-prompt {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.image-generation-error {
  max-width: 100%;
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
  line-height: 17px;
}
.image-generation-preview {
  display: block;
  border: 0;
  background: var(--openbot-bg-control);
  cursor: pointer;
  opacity: 0;
  padding: 0;
  transition: opacity var(--openbot-duration-overlay) ease;
}
.image-generation-preview-visible {
  opacity: 1;
}
.image-generation-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.image-generation-preview:focus-visible, .image-generation-hover-download:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}
.image-generation-hover-download {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  right: 10px;
  bottom: 10px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-glass);
  padding: 5px 10px;
  color: var(--openbot-text-primary);
  cursor: pointer;
  backdrop-filter: blur(12px) saturate(1.15);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  font-size: var(--openbot-text-sm);
  font-weight: 650;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: background-color var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease, border-color var(--openbot-duration-hover) ease, opacity var(--openbot-duration-hover) ease, transform var(--openbot-duration-hover) ease;
}
.image-generation-download-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}
.image-generation-stage:hover .image-generation-hover-download, .image-generation-stage:focus-within .image-generation-hover-download {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.image-generation-hover-download:hover {
  border-color: var(--openbot-border-focus);
  background: var(--openbot-bg-glass);
  color: var(--openbot-text-primary);
}
@keyframes image-generation-morph {
  0% {
    -webkit-mask-size: 52% 46%, 40% 40%;
    mask-size: 52% 46%, 40% 40%;
    -webkit-mask-position: 16% 20%, 30% 32%;
    mask-position: 16% 20%, 30% 32%;
  }
  25% {
    -webkit-mask-size: 46% 58%, 44% 38%;
    mask-size: 46% 58%, 44% 38%;
    -webkit-mask-position: 84% 16%, 66% 30%;
    mask-position: 84% 16%, 66% 30%;
  }
  50% {
    -webkit-mask-size: 60% 44%, 38% 46%;
    mask-size: 60% 44%, 38% 46%;
    -webkit-mask-position: 82% 84%, 62% 68%;
    mask-position: 82% 84%, 62% 68%;
  }
  75% {
    -webkit-mask-size: 48% 54%, 46% 40%;
    mask-size: 48% 54%, 46% 40%;
    -webkit-mask-position: 14% 82%, 34% 66%;
    mask-position: 14% 82%, 34% 66%;
  }
  100% {
    -webkit-mask-size: 52% 46%, 40% 40%;
    mask-size: 52% 46%, 40% 40%;
    -webkit-mask-position: 16% 20%, 30% 32%;
    mask-position: 16% 20%, 30% 32%;
  }
}
@keyframes image-generation-breathe {
  0%, 100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}
@keyframes image-generation-shine {
  0%, 18% {
    background-position: 100% 0;
  }
  82%, 100% {
    background-position: 0% 0;
  }
}
.message-entry-pending .message-shell {
  opacity: 0.7;
}
.pending-send-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--openbot-space-1);
}
.pending-send-status[data-state="failed"] .pending-send-label {
  color: var(--openbot-danger-text);
}
.pending-send-error {
  margin-inline-start: var(--openbot-space-2);
  overflow-wrap: anywhere;
}
.message-entry-user .ui-bubble {
  max-width: min(420px, 100%);
}
.message-copy {
  margin: 0;
  font-size: var(--openbot-text-lg);
  line-height: 20px;
  overflow-wrap: anywhere;
  white-space: pre-line;
  user-select: text;
}
.message-markdown {
  white-space: normal;
}
.message-markdown > *, .message-markdown :is(p, ul, ol, blockquote) {
  margin: 0;
}
.message-markdown > :not(:first-child) {
  margin-top: var(--openbot-space-3);
}
.message-markdown-heading {
  margin: 0;
  color: inherit;
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: var(--openbot-tracking-tight);
}
.message-markdown-heading[data-level="1"] {
  font-size: var(--openbot-text-2xl);
  line-height: var(--openbot-leading-2xl);
}
.message-markdown-heading[data-level="2"] {
  font-size: var(--openbot-text-xl);
  line-height: var(--openbot-leading-xl);
}
.message-markdown-heading:is([data-level="3"], [data-level="4"], [data-level="5"], [data-level="6"]) {
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
.message-markdown strong {
  font-weight: var(--openbot-weight-semibold);
}
.message-markdown del {
  color: var(--openbot-text-secondary);
}
.message-markdown :is(ul, ol) {
  padding-left: var(--openbot-space-6);
}
.message-markdown ul {
  list-style: disc;
}
.message-markdown ul ul {
  list-style: circle;
}
.message-markdown ol {
  list-style: decimal;
}
.message-markdown li + li, .message-markdown li > :is(ul, ol) {
  margin-top: var(--openbot-space-1);
}
.message-markdown-task {
  display: flex;
  align-items: flex-start;
  gap: var(--openbot-space-1-5);
  list-style: none;
}
.message-markdown-checkbox {
  margin-top: var(--openbot-space-1);
  opacity: 1;
}
.message-markdown blockquote {
  border-left: var(--openbot-space-0-5) solid var(--openbot-border-strong);
  padding-left: var(--openbot-space-3);
  color: var(--openbot-text-secondary);
}
.message-markdown blockquote > :not(:first-child) {
  margin-top: var(--openbot-space-2);
}
.message-markdown :not(pre) > code {
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-0-5) var(--openbot-space-1);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-md);
  white-space: break-spaces;
}
.message-markdown hr {
  height: 1px;
  border: 0;
  background: var(--openbot-border-strong);
}
.message-markdown-raw-html {
  display: block;
  color: var(--openbot-text-secondary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-md);
  white-space: pre-wrap;
}
.message-markdown-image {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 360px;
  border-radius: var(--openbot-radius-md);
  object-fit: contain;
}
.message-markdown-image-button {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  padding: 0;
  border-radius: var(--openbot-radius-md);
  cursor: zoom-in;
}
.message-markdown-image-button:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}
.message-markdown-table-scroll {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  border-radius: var(--openbot-radius-md);
  box-shadow: 0 0 0 1px var(--openbot-data-table-ring);
}
.message-markdown-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--openbot-bg-canvas);
  color: var(--openbot-data-table-text);
}
.message-markdown-table :is(th, td) {
  border-right: 1px solid var(--openbot-data-table-border);
  border-bottom: 1px solid var(--openbot-data-table-border);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  overflow-wrap: break-word;
  text-align: left;
  vertical-align: top;
}
.message-markdown-table th {
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-data-table-header-text);
  font-weight: var(--openbot-weight-medium);
}
.message-markdown-table :is(th, td):last-child {
  border-right: 0;
}
.message-markdown-table tbody tr:last-child td {
  border-bottom: 0;
}
.message-markdown-table [data-align="center"] {
  text-align: center;
}
.message-markdown-table [data-align="right"] {
  text-align: right;
}
::highlight(openbot-message-selection) {
  background: var(--openbot-accent-strong);
  color: inherit;
}
::highlight(openbot-quote-target) {
  background: var(--openbot-warning);
  color: var(--openbot-text-on-light);
}
.selection-highlight-layer {
  position: fixed;
  z-index: 18;
  inset: 0;
  pointer-events: none;
}
.selection-highlight-layer span {
  position: fixed;
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-accent-strong);
}
.selection-actions-layer {
  position: fixed;
  z-index: 25;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px) scale(0.97);
  transform-origin: 50% 0;
  transition: opacity var(--openbot-duration-slow) ease-out, transform var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1);
  will-change: top, left, transform;
}
.selection-actions-layer[data-placement="top"] {
  transform-origin: 50% 100%;
}
.selection-actions-layer[data-ready="true"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.selection-actions-bar {
  display: flex;
  max-width: calc(100vw - 24px);
  height: 36px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface-raised);
  padding: 4px;
  box-shadow: 0 14px 34px var(--openbot-shadow-popover-ambient), 0 3px 10px var(--openbot-shadow-popover-ambient), inset 0 0 0 1px var(--openbot-shadow-ring);
  color: var(--openbot-text-primary);
  transition: width var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1);
}
.selection-actions-content, .selection-actions-presets, .selection-actions-more-presets {
  display: flex;
  width: max-content;
  min-width: 0;
  align-items: center;
}
.selection-actions-content {
  height: 28px;
  flex: 0 0 auto;
  gap: 2px;
}
.selection-actions-form-shell {
  display: flex;
  min-width: 0;
  align-items: center;
  overflow: hidden;
  opacity: 1;
  transform: translateX(0);
  transition: max-width var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1), opacity var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1), transform var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1);
}
.selection-actions-form-shell-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-8px);
}
.selection-actions-form {
  display: flex;
  height: 28px;
  flex: 0 0 auto;
  align-items: center;
  overflow: hidden;
  transition: width var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1);
}
.selection-actions-form input {
  width: 100%;
  height: 28px;
  border: 0;
  background: transparent;
  padding: 0 10px 0 11px;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: 400;
  line-height: 28px;
  outline: 0;
}
.selection-actions-form input::placeholder {
  color: var(--openbot-text-muted);
}
.selection-actions-form input:focus-visible {
  outline: 0;
}
.selection-actions-presets {
  max-width: 224px;
  gap: 2px;
  overflow: hidden;
  opacity: 1;
  transform: translateX(0);
  transition: max-width var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1), opacity var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1), transform var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1);
}
.selection-actions-presets-hidden {
  max-width: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-8px);
}
.selection-actions-more-presets {
  max-width: 0;
  gap: 2px;
  margin-left: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1), opacity var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1), margin-left var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1);
}
.selection-actions-presets-expanded .selection-actions-more-presets {
  max-width: 262px;
  margin-left: 2px;
  opacity: 1;
}
.selection-actions-send-shell {
  display: flex;
  min-width: 0;
  max-width: 0;
  align-items: center;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.88);
  transition: max-width var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1), opacity var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1), transform var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1);
}
.selection-actions-send-shell-visible {
  max-width: 30px;
  opacity: 1;
  transform: scale(1);
}
.selection-actions-control, .selection-actions-icon-button, .selection-actions-send {
  display: inline-flex;
  height: 28px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  padding: 0;
  transition: background-color var(--openbot-duration-hover) ease, border-color var(--openbot-duration-hover) ease, box-shadow var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease, opacity var(--openbot-duration-hover) ease, transform var(--openbot-duration-normal) ease;
}
.selection-actions-control {
  gap: 4px;
  border: 1px solid transparent;
  background: transparent;
  padding: 0 9px;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: 430;
  white-space: nowrap;
}
.selection-actions-icon-button, .selection-actions-send {
  width: 28px;
}
.selection-actions-kbd {
  height: 18px;
  margin-left: 2px;
  font-size: var(--openbot-text-xs);
}
.selection-actions-icon-button {
  background: transparent;
  color: var(--openbot-text-secondary);
}
.selection-actions-send {
  background: var(--openbot-text-primary);
  color: var(--openbot-bg-canvas);
}
.selection-actions-control:active, .selection-actions-icon-button:active, .selection-actions-send:active {
  transform: scale(0.94);
}
.selection-actions-divider {
  width: 1px;
  height: 16px;
  flex: 0 0 auto;
  margin: 0 3px;
  background: var(--openbot-border-strong);
}
.selection-actions-more-divider {
  margin-left: 1px;
}
.selection-actions-expand svg {
  transition: transform var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1);
}
.selection-actions-expand[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.selection-actions-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.selection-actions-status, .selection-actions-error {
  display: inline-flex;
  height: 28px;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  font-size: var(--openbot-text-sm);
  white-space: nowrap;
}
.selection-actions-status {
  color: var(--openbot-text-secondary);
}
.selection-actions-error {
  color: var(--openbot-danger);
}
.selection-actions-spinner {
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--openbot-border-strong);
  border-top-color: var(--openbot-text-secondary);
  border-radius: var(--openbot-radius-pill);
  animation: selection-actions-spin 700ms linear infinite;
}
.message-selection-quote {
  max-width: 100%;
  max-height: 124px;
  overflow: auto;
  margin: 0;
  border-left: 2px solid var(--openbot-accent);
  border-radius: 0 var(--openbot-radius-sm) var(--openbot-radius-sm) 0;
  background: var(--openbot-bg-control);
  padding: 6px 8px;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: 17px;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
@media (hover: hover) and (pointer: fine) {
  .selection-actions-control:hover {
    border-color: var(--openbot-border-focus);
    background: var(--openbot-accent-strong);
    box-shadow: 0 0 0 1px var(--openbot-accent-soft);
    color: var(--openbot-text-primary);
  }
  .selection-actions-icon-button:hover {
    background: var(--openbot-bg-control-hover);
    color: var(--openbot-text-primary);
  }
  .selection-actions-send:hover {
    opacity: 0.9;
  }
}
@media (max-width: 480px) {
  .selection-actions-control {
    width: 28px;
    padding: 0;
  }
  .selection-actions-kbd {
    display: none;
  }
  .selection-actions-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .selection-actions-presets-expanded .selection-actions-more-presets {
    max-width: 88px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .selection-actions-layer, .selection-actions-bar, .selection-actions-form, .selection-actions-form-shell, .selection-actions-presets, .selection-actions-more-presets, .selection-actions-send-shell, .selection-actions-expand svg {
    transition: none;
  }
  .selection-actions-spinner {
    animation-duration: 1.4s;
  }
}
@keyframes selection-actions-spin {
  to {
    transform: rotate(360deg);
  }
}
.message-content-blocks {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: 10px;
}
.message-content-resize {
  min-width: 0;
}
.message-content-resize[data-resizing="true"], .agent-queue-panel-resize[data-resizing="true"] {
  overflow: hidden;
  will-change: height;
}
.t-stream-w {
  animation: t-stream-in var(--stream-fade) var(--stream-ease) both;
}
@keyframes t-stream-in {
  from {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .t-stream-w {
    animation: none;
  }
}
.message-entry-agent .ui-bubble:has(:is(.message-data-table-scroll, .message-code-block)) {
  width: min(720px, 100%);
  max-width: min(720px, 100%);
}
.message-entry-agent .ui-bubble:has(.message-data-table-scroll) > .ui-bubble-content {
  width: 100%;
}
.message-entry-agent .message-shell:has(.message-data-table-scroll) {
  align-items: flex-end;
}
.message-code-block {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
}
.message-code-header {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  border-bottom: 1px solid var(--openbot-border);
  background: var(--openbot-bg-control);
  padding: 4px 6px 4px 10px;
}
.message-code-heading {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.message-code-filename {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.message-code-language {
  flex: none;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-border);
  padding: 1px 6px;
  color: var(--openbot-text-readable);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: 16px;
}
.message-code-language:only-child {
  font-family: var(--openbot-font-mono);
}
:where(.ui-button).message-code-copy {
  position: relative;
  height: 26px;
  flex: none;
  gap: var(--openbot-space-1);
  border-radius: var(--openbot-radius-sm);
  padding-inline: 7px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
}
@media (hover: hover) and (pointer: fine) {
  :where(.ui-button).message-code-copy:hover:not(:disabled) {
    background: var(--openbot-bg-control-active);
    box-shadow: 0 0 0 1px var(--openbot-border-strong);
    color: var(--openbot-text-primary);
  }
}
:where(.ui-button).message-code-copy:active:not(:disabled) {
  transform: scale(0.96);
}
:where(.ui-button).message-code-copy::after {
  position: absolute;
  width: 40px;
  height: 40px;
  content: "";
}
.message-code-copy-icons {
  position: relative;
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  display: grid;
  place-items: center;
}
.message-code-copy-icons > span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  filter: blur(4px);
  scale: 0.25;
  transition: opacity var(--openbot-duration-slow) var(--openbot-ease-out), filter var(--openbot-duration-slow) var(--openbot-ease-out), scale var(--openbot-duration-slow) var(--openbot-ease-out);
}
.message-code-copy-icons > span[data-visible="true"] {
  opacity: 1;
  filter: blur(0);
  scale: 1;
}
.message-code-copy-icons svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}
.message-code-scroll {
  width: 100%;
  max-height: 420px;
  overflow: auto;
  margin: 0;
  background: var(--openbot-bg-sidebar);
  padding-block: 8px 10px;
  color: var(--openbot-text-secondary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  line-height: 19px;
  overscroll-behavior-x: contain;
  tab-size: 2;
}
.message-code-scroll:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: -2px;
}
.message-code-scroll > code {
  min-width: 100%;
  width: max-content;
  display: block;
  font: inherit;
}
.message-code-line {
  min-height: 19px;
  display: flex;
}
.message-code-line-number {
  width: 40px;
  flex: none;
  padding-right: 8px;
  color: var(--openbot-text-dim);
  font-size: var(--openbot-text-sm);
  text-align: right;
  user-select: none;
}
.message-code-line-source {
  min-width: 0;
  padding-right: 12px;
  white-space: pre;
}
.message-code-caret {
  width: 2px;
  height: 13px;
  display: inline-block;
  margin-left: 2px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
  transform: translateY(2px);
}
[data-code-token="cmnt"] {
  color: var(--openbot-text-dim);
  font-style: italic;
}
[data-code-token="kwd"], [data-code-token="section"] {
  color: var(--openbot-accent-text);
}
[data-code-token="str"], [data-code-token="insert"] {
  color: var(--openbot-success);
}
[data-code-token="num"], [data-code-token="bool"], [data-code-token="class"] {
  color: var(--openbot-warning);
}
[data-code-token="func"], [data-code-token="type"] {
  color: var(--openbot-text-primary);
}
[data-code-token="oper"], [data-code-token="esc"] {
  color: var(--openbot-text-muted);
}
[data-code-token="err"], [data-code-token="deleted"] {
  color: var(--openbot-danger);
}
@media (prefers-reduced-motion: reduce) {
  .message-code-copy-icons > span {
    transition: none;
  }
}
.message-data-table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-radius: var(--openbot-radius-lg);
  overscroll-behavior-inline: contain;
}
.message-data-table-frame {
  width: 100%;
  min-width: 0;
}
.message-data-table-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-1);
  margin-top: var(--openbot-space-1);
}
.message-data-table-scroll:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}
.message-data-table {
  width: 100%;
  min-width: calc(var(--message-data-table-columns) * 112px);
  overflow: hidden;
  border: 1px solid var(--openbot-data-table-outer-border);
  border-radius: var(--openbot-radius-lg);
  border-spacing: 0;
  background: var(--openbot-bg-surface-raised);
  box-shadow: 0 0 0 0.5px var(--openbot-data-table-ring);
  font-size: var(--openbot-text-md);
}
.message-data-table thead {
  color: var(--openbot-data-table-header-text);
  font-weight: 500;
}
.message-data-table tbody {
  background: var(--openbot-bg-canvas);
}
.message-data-table tbody tr:not(:last-child) td {
  border-bottom: 1px solid var(--openbot-data-table-border);
}
.message-data-table th, .message-data-table td {
  padding: 9px 12px;
  color: var(--openbot-data-table-text);
  font-weight: inherit;
  overflow-wrap: break-word;
  text-align: left;
  vertical-align: top;
}
.message-data-table thead th {
  border-bottom: 1px solid var(--openbot-data-table-border);
  padding-top: 7px;
  padding-bottom: 7px;
  color: var(--openbot-data-table-header-text);
}
.message-data-table th:not(:last-child), .message-data-table td:not(:last-child) {
  border-right: 1px solid var(--openbot-data-table-border);
}
:is(.message-data-table, .message-markdown-table) :is(th, td) :is(a, code) {
  overflow-wrap: anywhere;
}
.message-data-table [data-align="center"] {
  text-align: center;
}
.message-data-table [data-align="right"] {
  text-align: right;
}
.message-comparison-table-yes {
  color: var(--openbot-success);
}
.message-comparison-table-no {
  color: var(--openbot-data-table-header-text);
}
.message-link {
  border-radius: var(--openbot-radius-xs);
  color: inherit;
  font-weight: 560;
  text-decoration-color: var(--openbot-text-muted);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--openbot-duration-hover) ease, text-decoration-color var(--openbot-duration-hover) ease;
}
.message-link-icon {
  position: relative;
  display: inline-flex;
  width: 14px;
  height: 14px;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
  color: currentColor;
  vertical-align: -2px;
}
.message-link-icon img, .message-link-fallback {
  width: 14px;
  height: 14px;
}
.message-link-icon img {
  position: absolute;
  inset: 0;
  border-radius: var(--openbot-radius-xs);
  object-fit: contain;
}
.message-link-fallback {
  opacity: 0.72;
}
.message-link:hover {
  color: var(--openbot-text-primary);
  text-decoration-color: currentColor;
}
.message-link:focus-visible {
  outline: 2px solid var(--openbot-text-secondary);
  outline-offset: 2px;
}
.message-citation {
  position: relative;
  display: inline;
}
.message-citation-mark {
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  margin: 0 2px;
  border: 0;
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-bg-control-hover);
  padding: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  vertical-align: 4px;
  transition: background var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease;
}
.message-citation-mark:hover, .message-citation-mark:focus-visible {
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
}
.message-citation-mark:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}
.anchored-tooltip {
  position: fixed;
  z-index: var(--openbot-layer-tooltip);
  box-sizing: border-box;
  width: max-content;
  max-width: min(280px, calc(100vw - 16px));
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface-raised);
  padding: 6px 8px;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: 500;
  line-height: 15px;
  overflow-wrap: anywhere;
  pointer-events: none;
  text-align: left;
  white-space: normal;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--openbot-duration-fast) ease, transform var(--openbot-duration-fast) ease;
}
.anchored-tooltip[data-placement="bottom"] {
  transform: translateY(-4px);
}
.anchored-tooltip[data-ready="true"] {
  opacity: 1;
  transform: translateY(0);
}
.anchored-tooltip-light {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-surface-light);
  color: var(--openbot-text-on-light);
}
@media (prefers-reduced-motion: reduce) {
  .anchored-tooltip, .anchored-tooltip[data-placement="bottom"], .anchored-tooltip[data-ready="true"] {
    transform: none;
  }
}
.message-citation-footer {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  border-top: 1px solid var(--openbot-border);
  padding-top: 10px;
}
.message-citation-ref {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: 425;
  line-height: 18px;
  text-decoration: none;
}
.message-citation-ref .message-citation-mark {
  flex: 0 0 18px;
  margin: 0;
}
.message-citation-ref-label {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-weight: 550;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.message-citation-separator {
  color: var(--openbot-text-dim);
}
.message-citation-ref-host {
  color: var(--openbot-text-muted);
  white-space: nowrap;
}
.message-citation-arrow {
  display: flex;
  width: 14px;
  height: 14px;
  margin-left: -2px;
  color: var(--openbot-text-dim);
  opacity: 0;
  transform: rotate(45deg) translate(-1px, 1px);
  transition: color var(--openbot-duration-hover) ease, opacity var(--openbot-duration-hover) ease, transform var(--openbot-duration-hover) ease;
}
.message-citation-arrow svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}
.message-citation-ref:hover, .message-citation-ref:focus-visible {
  color: var(--openbot-text-secondary);
}
.message-citation-ref:hover .message-citation-arrow, .message-citation-ref:focus-visible .message-citation-arrow {
  color: var(--openbot-text-secondary);
  opacity: 1;
  transform: rotate(45deg) translate(0, 0);
}
.message-citation-ref:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 3px;
}
[data-slot="bubble"][data-author="user"] .message-citation-mark {
  background: var(--openbot-surface-light);
  color: var(--openbot-text-muted-on-light);
}
[data-slot="bubble"][data-author="user"] .message-citation-mark:hover, [data-slot="bubble"][data-author="user"] .message-citation-mark:focus-visible {
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent);
}
[data-slot="bubble"][data-author="user"] .message-citation-footer {
  border-top-color: var(--openbot-border-on-light);
}
[data-slot="bubble"][data-author="user"] .message-citation-ref-label {
  color: var(--openbot-text-on-light);
}
[data-slot="bubble"][data-author="user"] .message-citation-ref-host {
  color: var(--openbot-text-muted-on-light);
}
[data-slot="bubble"][data-author="user"] .message-citation-separator {
  color: var(--openbot-text-dim-on-light);
}
.message-reply-context {
  max-width: 360px;
  margin: -1px 0 7px;
  border-left: 2px solid var(--openbot-text-dim);
  padding-left: 8px;
  color: var(--openbot-text-secondary);
}
.message-reply-context span {
  display: block;
  margin-bottom: 1px;
  font-size: var(--openbot-text-sm);
  font-weight: 550;
  line-height: 14px;
}
.message-reply-context p {
  overflow: hidden;
  margin: 0;
  font-size: var(--openbot-text-sm);
  line-height: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-slot="bubble"][data-author="user"] .message-reply-context {
  border-left-color: var(--openbot-border-strong);
  color: var(--openbot-text-readable);
}
.message-reply-context[data-opens] {
  position: relative;
  transition: border-left-color var(--openbot-duration-hover) var(--openbot-ease-out);
}
.message-reply-context[data-loading] {
  display: grid;
  align-items: center;
  column-gap: var(--openbot-space-2);
  grid-template-columns: minmax(0, 1fr) auto;
}
.message-reply-context[data-opens]:hover {
  border-left-color: var(--openbot-accent);
}
.message-reply-context .message-reply-open, .message-reply-context .message-reply-open:hover:not(:disabled):not([data-disabled]) {
  position: absolute;
  z-index: 1;
  inset: 0 0 0 -2px;
  width: auto;
  height: auto;
  min-height: 0;
  border-radius: var(--openbot-radius-xs);
  background: none;
  padding: 0;
  cursor: pointer;
}
.message-reply-context .message-reply-open:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}
.message-reply-loading {
  width: 14px;
  height: 14px;
  grid-column: 2;
  grid-row: 1 / span 2;
  animation: message-reply-spin 0.8s linear infinite;
}
.message-reply-context[data-unavailable] {
  border-left-style: dashed;
}
.message-reply-unavailable {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
  margin: -1px 0 7px;
  font-size: var(--openbot-text-sm);
  line-height: 15px;
}
.message-reply-unavailable-icon {
  width: 13px;
  height: 13px;
  flex: none;
}
@keyframes message-reply-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .message-reply-loading {
    animation: none;
  }
}
[data-slot="bubble"][data-author="user"] .message-copy {
  font-size: var(--openbot-text-lg);
}
.message-tag-unavailable {
  display: inline-flex;
  height: 22px;
  align-items: center;
  gap: 4px;
  margin: 0 1px;
  border: 1px dashed var(--openbot-border-strong);
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  padding: 0 6px;
  color: var(--openbot-text-muted);
  font: inherit;
  line-height: 20px;
  vertical-align: middle;
  white-space: nowrap;
}
.message-agent-tag .agent-avatar {
  --agent-avatar-optical-offset: -2px;
  width: 16px;
  height: 16px;
}
.message-file-reference, .composer-file-reference {
  --file-reference-color: var(--openbot-file-default);
  --file-reference-soft: var(--openbot-file-default-soft);
  display: inline-flex;
  min-width: 0;
  max-width: min(240px, calc(100% - 8px));
  align-items: center;
  gap: 4px;
  margin: 0 1px;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  padding: 1px 6px 1px 3px;
  color: var(--file-reference-color);
  font: inherit;
  font-weight: 550;
  line-height: 20px;
  vertical-align: middle;
  white-space: nowrap;
  transition: background-color var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease;
}
.reference-chip.message-reference-chip, .message-file-reference {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: text;
}
:is(.message-data-table, .message-markdown-table) .message-file-reference {
  max-width: 240px;
}
:is( .message-file-reference, .composer-file-reference, .attachment-file-visual, .files-file-visual, .composer-attachment-preview )[data-file-tone="source"] {
  --file-reference-color: var(--openbot-file-blue);
  --file-reference-soft: var(--openbot-file-blue-soft);
}
:is( .message-file-reference, .composer-file-reference, .attachment-file-visual, .files-file-visual, .composer-attachment-preview )[data-file-tone="script"] {
  --file-reference-color: var(--openbot-file-yellow);
  --file-reference-soft: var(--openbot-file-yellow-soft);
}
:is( .message-file-reference, .composer-file-reference, .attachment-file-visual, .files-file-visual, .composer-attachment-preview )[data-file-tone="markup"] {
  --file-reference-color: var(--openbot-file-orange);
  --file-reference-soft: var(--openbot-file-orange-soft);
}
:is( .message-file-reference, .composer-file-reference, .attachment-file-visual, .files-file-visual, .composer-attachment-preview )[data-file-tone="style"] {
  --file-reference-color: var(--openbot-file-teal);
  --file-reference-soft: var(--openbot-file-teal-soft);
}
:is( .message-file-reference, .composer-file-reference, .attachment-file-visual, .files-file-visual, .composer-attachment-preview )[data-file-tone="data"] {
  --file-reference-color: var(--openbot-file-green);
  --file-reference-soft: var(--openbot-file-green-soft);
}
:is( .message-file-reference, .composer-file-reference, .attachment-file-visual, .files-file-visual, .composer-attachment-preview )[data-file-tone="document"] {
  --file-reference-color: var(--openbot-file-red);
  --file-reference-soft: var(--openbot-file-red-soft);
}
:is( .message-file-reference, .composer-file-reference, .attachment-file-visual, .files-file-visual, .composer-attachment-preview )[data-file-tone="media"] {
  --file-reference-color: var(--openbot-file-pink);
  --file-reference-soft: var(--openbot-file-pink-soft);
}
.inline-file-reference-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-button.message-file-reference {
  height: 22px;
  cursor: pointer;
}
.ui-button.message-file-reference:focus-visible, .composer-file-reference:focus-visible {
  outline: 2px solid var(--file-reference-color);
  outline-offset: 2px;
  box-shadow: none;
}
.attachment-reference-visual {
  display: inline-grid;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--openbot-radius-xs);
  background: var(--file-reference-soft);
  color: var(--file-reference-color);
}
.attachment-reference-visual[data-badge-length="3"] {
  width: 20px;
}
.attachment-reference-visual[data-badge-length="4"] {
  width: 24px;
}
.attachment-reference-visual > span {
  font-size: var(--openbot-glyph-sm);
  font-weight: 750;
  letter-spacing: -0.2px;
  line-height: 1;
}
.attachment-reference-visual[data-badge-length="4"] > span {
  font-size: var(--openbot-glyph-xs);
  letter-spacing: -0.4px;
}
.attachment-reference-visual > svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: calc(var(--openbot-icon-stroke) * 20 / 24);
}
[data-slot="bubble"][data-author="user"] .message-file-reference {
  color: var(--file-reference-color);
}
@media (hover: hover) and (pointer: fine) {
  .ui-button.message-file-reference:hover:not(:disabled), .composer-file-reference:hover {
    background-color: var(--file-reference-soft);
    color: var(--file-reference-color);
  }
}
@media (hover: none), (pointer: coarse) {
  .message-file-reference, .composer-file-reference {
    max-width: calc(100% - 8px);
  }
}
.message-error-label {
  margin: 0 0 var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.attachment-file-visual {
  --file-reference-color: var(--openbot-file-default);
  --file-reference-soft: var(--openbot-file-default-soft);
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border-radius: var(--openbot-radius-md);
  background: var(--file-reference-soft);
  color: var(--file-reference-color);
}
.attachment-file-visual svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}
.choice-card {
  display: grid;
  width: min(540px, 100%);
  gap: var(--openbot-space-4);
}
.choice-card-hint {
  margin: calc(-1 * var(--openbot-space-2)) 0 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
  overflow-wrap: anywhere;
}
.choice-options {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface);
}
.choice-option {
  display: flex;
  width: 100%;
  min-height: var(--openbot-control-xl);
  align-items: center;
  gap: var(--openbot-space-2);
  border: 0;
  border-bottom: 1px solid var(--openbot-border);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-lg);
  text-align: left;
  overflow-wrap: anywhere;
}
.choice-option-item:last-child .choice-option {
  border-bottom: 0;
}
.choice-option-item:not([data-disabled]) .choice-option:hover, .choice-option-selected {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}
.choice-option-item:focus-within .choice-option {
  outline: 1px solid var(--openbot-border-focus);
  outline-offset: -1px;
}
.choice-option-item[data-disabled] {
  opacity: 0.5;
}
.choice-key {
  display: grid;
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-muted);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
}
.choice-input {
  width: 100%;
  min-width: 0;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface);
  font-size: var(--openbot-text-lg);
}
.choice-input::placeholder {
  color: var(--openbot-text-muted);
}
.reference-chip.message-reference-chip .reference-chip-icon, .message-file-reference .attachment-reference-visual {
  display: inline-block;
  margin-right: var(--openbot-space-1);
  text-align: center;
  vertical-align: top;
  user-select: none;
}
.message-file-reference .attachment-reference-visual {
  margin-top: var(--openbot-space-0-5);
  font-size: var(--openbot-glyph-sm);
  line-height: var(--openbot-space-4);
}
.message-file-reference .attachment-reference-visual[data-badge-length="4"] {
  font-size: var(--openbot-glyph-xs);
}
.reference-chip.message-reference-chip .agent-avatar {
  display: inline-block;
  height: var(--openbot-space-4);
  vertical-align: top;
}
.message-file-reference .attachment-reference-visual > svg {
  display: inline;
  margin-top: var(--openbot-space-0-5);
  vertical-align: top;
}
.reference-chip.message-reference-chip .reference-chip-icon > svg, .reference-chip.message-reference-chip .agent-avatar > svg {
  display: inline;
  vertical-align: top;
}
.reference-chip.message-reference-chip .reference-chip-icon > svg.lucide {
  margin-top: var(--openbot-space-0-5);
}
.reference-chip.message-reference-chip .agent-avatar > svg {
  margin: -14% 0 0 -14%;
}
.reference-chip.message-reference-chip .reference-chip-name, .message-file-reference .inline-file-reference-name {
  display: inline;
}
.reference-chip.message-reference-chip > .sr-only {
  user-select: none;
}
.message-math-display {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}
.message-math-display > * {
  margin: 0;
  padding: var(--openbot-space-1) 0;
}
.message-code-actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--openbot-space-0-5);
}
.message-preview-expand svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.ui-sliding-tabs.message-preview-switch {
  gap: var(--openbot-space-0-5);
  padding: var(--openbot-space-0-5);
}
.message-preview-switch .ui-sliding-tabs-trigger {
  height: 22px;
  padding: 0 var(--openbot-space-2);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
}
.message-preview-switch .ui-sliding-tabs-pill {
  top: var(--openbot-space-0-5);
  height: 22px;
}
.message-preview-resize {
  overflow: hidden;
}
.message-preview-views {
  position: relative;
}
.message-preview-view:not([data-selected]) {
  position: absolute;
  inset: 0 0 auto;
}
.message-preview-body {
  width: 100%;
  display: grid;
  place-items: center;
  background: var(--openbot-bg-sidebar);
}
.message-preview-body[data-preview-kind="mermaid"] {
  max-height: 420px;
  overflow: auto;
  padding: var(--openbot-space-3);
  overscroll-behavior-x: contain;
}
.message-preview-frame {
  width: 100%;
  height: min(var(--message-preview-height, 160px), 420px);
  display: block;
  border: 0;
  background: var(--openbot-bg-sidebar);
}
.message-preview-diagram {
  max-width: 100%;
  height: auto;
  display: block;
}
.message-preview-status {
  margin: 0;
  padding: var(--openbot-space-6) var(--openbot-space-3);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.message-preview-failure {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  border-bottom: 1px solid var(--openbot-border);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-xs);
}
.message-preview-failure-detail {
  flex-basis: 100%;
  margin: 0;
  overflow-x: auto;
  font-family: var(--openbot-font-mono);
  white-space: pre;
}
.message-preview-backdrop {
  animation: none;
}
.message-preview-dialog {
  width: min(1100px, 100%);
  height: calc(100dvh - var(--openbot-space-6) * 2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  outline: 0;
  border-radius: var(--openbot-radius-xl);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-primary);
  transform-origin: 0 0;
}
.message-preview-dialog:not([data-shown]) {
  opacity: 0;
}
.message-preview-dialog-header {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-4);
  border-bottom: 1px solid var(--openbot-border);
}
.message-preview-dialog-title {
  margin: 0;
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
}
.message-preview-dialog-body {
  min-height: 0;
  flex: 1;
  display: grid;
  overflow: auto;
  background: var(--openbot-bg-sidebar);
}
.message-preview-dialog-body[data-preview-kind="mermaid"] {
  overflow: hidden;
}
.message-preview-canvas {
  position: relative;
  min-height: 0;
  overflow: hidden;
}
.message-preview-canvas-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  outline: 0;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.message-preview-canvas-viewport[data-dragging] {
  cursor: grabbing;
}
.message-preview-canvas-viewport:focus-visible {
  box-shadow: inset 0 0 0 2px var(--openbot-border-focus);
}
.message-preview-canvas-image {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  height: auto;
  opacity: 0;
  transform-origin: 0 0;
  -webkit-user-drag: none;
}
.message-preview-canvas-image[data-ready] {
  opacity: 1;
}
.message-preview-canvas-image[data-settling] {
  transition: transform var(--openbot-duration-slow) var(--openbot-ease-out), width var(--openbot-duration-slow) var(--openbot-ease-out);
}
.message-preview-zoom {
  position: absolute;
  bottom: var(--openbot-space-4);
  left: 50%;
  display: flex;
  align-items: center;
  gap: var(--openbot-space-0-5);
  translate: -50% 0;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-overlay);
  box-shadow: 0 0 0 1px var(--openbot-border);
  padding: var(--openbot-space-1);
}
.message-preview-zoom .ui-button {
  border-radius: var(--openbot-radius-pill);
}
:where(.ui-button).message-preview-zoom-level {
  min-width: 56px;
  font-variant-numeric: tabular-nums;
}
.message-preview-dialog-body .message-preview-frame {
  height: 100%;
}
.chat-visual-frame {
  width: 100%;
  min-width: 0;
  display: block;
  border: 0;
  background: transparent;
  color-scheme: dark;
}
.chat-visual-reply {
  max-width: 720px;
}
.chat-visual-frame-fill {
  box-sizing: border-box;
  height: 100%;
  padding: 12px 16px;
}
.chat-visual-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-xs);
}
.composer-wrap {
  position: relative;
  flex: 0 0 auto;
  padding: 0 var(--openbot-space-1-5) var(--openbot-space-1-5);
}
.team-typing-dots {
  display: flex;
  align-items: center;
  gap: 2px;
}
.team-typing-dots i {
  width: 3px;
  height: 3px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success);
  animation: typing-dot-pulse 900ms ease-in-out infinite;
}
.team-typing-dots i:nth-child(2) {
  animation-delay: var(--openbot-duration-fast);
}
.team-typing-dots i:nth-child(3) {
  animation-delay: var(--openbot-duration-overlay);
}
@media (prefers-reduced-motion: reduce) {
  .agent-row-thinking-dots i, .team-typing-dots i, .image-generation-dots, .image-generation-glow, .image-generation-canvas, .image-generation-preview, .image-generation-label,  .image-generation:not(.image-generation-ready, .image-generation-failed) .image-generation-label, .agent-activity-label {
    animation: none;
    transition: none;
  }
  .image-generation-hover-download {
    transition: none;
  }
}
@media (hover: none), (pointer: coarse) {
  .image-generation-hover-download {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
}
@media (max-width: 620px) {
  .message-entry-agent .ui-bubble:has(.image-generation) {
    width: 100%;
    max-width: 100%;
  }
  .image-generation-stage, .image-generation-meta {
    width: 100%;
  }
}
.composer-reply-preview {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 10px;
  margin: 0 10px 6px;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  padding: 6px 8px 6px 12px;
  box-shadow: 0 7px 22px var(--openbot-shadow-popover-ambient);
}
.composer-reply-preview > div {
  min-width: 0;
  flex: 1;
}
.composer-reply-preview span {
  display: block;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: 550;
  line-height: 14px;
}
.composer-reply-preview p {
  overflow: hidden;
  margin: 1px 0 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.composer-reply-preview > button {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  background: transparent;
  color: var(--openbot-text-muted);
}
.composer-reply-preview > button:hover {
  background: var(--openbot-border);
  color: var(--openbot-text-secondary);
}
.composer {
  position: relative;
  z-index: 11;
  display: grid;
  max-width: none;
  min-height: 96px;
  gap: 4px;
  margin: 0 auto;
  border: 0.5px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  padding: 10px;
  box-shadow: none;
  transition: border-color var(--openbot-duration-hover) var(--openbot-ease-out), box-shadow var(--openbot-duration-hover) var(--openbot-ease-out);
}
.composer[data-compact] {
  grid-template-columns: 28px minmax(0, 1fr) auto;
  min-height: 48px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
}
.composer:focus-within {
  border-color: var(--openbot-text-dim);
  box-shadow: 0 0 0 3px var(--openbot-hover);
}
.composer:has(.composer-editor-surface[aria-disabled="true"]) {
  border-color: var(--openbot-border);
}
.composer button:disabled, .composer-editor-surface[aria-disabled="true"] {
  cursor: default;
}
.composer-button, .dictation-button, .voice-button {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  padding: 0;
  background: var(--openbot-hover);
  color: var(--openbot-text-secondary);
  transition: background-color var(--openbot-duration-hover) var(--openbot-ease-out), color var(--openbot-duration-hover) var(--openbot-ease-out), transform var(--openbot-duration-fast) var(--openbot-ease-out);
}
.composer-button:hover {
  background: var(--openbot-border);
  color: var(--openbot-text-primary);
}
.composer-primary-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.voice-model-progress {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  white-space: nowrap;
}
.voice-morph {
  --voice-morph-duration: 600ms;
  --voice-morph-exit-duration: 360ms;
  --voice-morph-ease: linear(
    0,
    0.057 3.3%,
    0.199 6.7%,
    0.386 10%,
    0.587 13.3%,
    0.773 16.7%,
    0.93 20%,
    1.049 23.3%,
    1.128 26.7%,
    1.171 30%,
    1.183 33.3%,
    1.172 36.7%,
    1.146 40%,
    1.111 43.3%,
    1.075 46.7%,
    1.041 50%,
    1.012 53.3%,
    0.991 56.7%,
    0.976 60%,
    0.967 66.7%,
    0.974 73.3%,
    0.987 80%,
    0.998 86.7%,
    1.004 93.3%,
    1
  );
  --voice-bar-width: 152px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}
.voice-morph-filter {
  position: absolute;
  width: 0;
  height: 0;
}
.voice-morph-goo {
  position: absolute;
  inset: -12px;
  pointer-events: none;
}
.voice-morph-goo-bar {
  opacity: 0.06;
}
.voice-morph-bar, .voice-morph-send-blob, .voice-morph-finish-blob {
  position: absolute;
  top: 12px;
  height: 28px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-primary);
}
.voice-morph-bar {
  right: 46px;
  width: 28px;
  transition: width var(--voice-morph-exit-duration) var(--openbot-ease-out);
}
.voice-morph-send-blob, .voice-morph-finish-blob {
  right: 12px;
  width: 28px;
  opacity: 0;
  transition: opacity 0s linear var(--voice-morph-exit-duration);
}
.voice-morph-finish-blob {
  transform: scale(0.5);
  transition: transform var(--voice-morph-exit-duration) var(--openbot-ease-out), opacity 0s linear var(--voice-morph-exit-duration);
}
.voice-morph[data-recording] .voice-morph-bar {
  width: var(--voice-bar-width);
  transition: width var(--voice-morph-duration) var(--voice-morph-ease);
}
.voice-morph[data-recording] .voice-morph-send-blob {
  opacity: 1;
  transition: none;
}
.voice-morph[data-recording] .voice-morph-finish-blob {
  opacity: 1;
  transform: translateX(-34px) scale(0.8);
  transition: transform var(--voice-morph-duration) var(--voice-morph-ease);
}
.voice-morph-send {
  position: relative;
  display: flex;
}
.voice-morph-slot {
  position: relative;
  display: flex;
  width: 28px;
  height: 28px;
  justify-content: flex-end;
  transition: width var(--voice-morph-exit-duration) var(--openbot-ease-out);
}
.voice-morph[data-recording] .voice-morph-slot {
  width: var(--voice-bar-width);
  transition: width var(--voice-morph-duration) var(--voice-morph-ease);
}
.voice-morph .dictation-button {
  background: transparent;
}
.voice-recording-status {
  display: flex;
  width: 100%;
  min-width: 0;
  height: 28px;
  align-items: center;
  gap: 4px;
  margin: 0;
  border: 0;
  overflow: hidden;
  padding: 0 3px 0 12px;
  color: var(--openbot-text-secondary);
  animation: voice-morph-content-in var(--openbot-duration-slow) var(--openbot-ease-out) var(--openbot-duration-fast) both;
}
.voice-waveform {
  display: flex;
  min-width: 0;
  height: 20px;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, currentColor 24px);
}
.voice-waveform-track {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 3px;
}
.voice-waveform-dot {
  width: 3px;
  height: calc(3px + var(--voice-level, 0) * 15px);
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-pill);
  background: currentColor;
}
.voice-recording-cancel, .voice-recording-finish {
  display: grid;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  padding: 0;
  background: transparent;
  transition: background-color var(--openbot-duration-hover) var(--openbot-ease-out), color var(--openbot-duration-hover) var(--openbot-ease-out), transform var(--openbot-duration-fast) var(--openbot-ease-out);
}
.voice-recording-cancel {
  color: var(--openbot-text-secondary);
}
.voice-recording-finish {
  color: var(--openbot-bg-sidebar);
  animation: voice-morph-content-in var(--openbot-duration-slow) var(--openbot-ease-out) var(--openbot-duration-overlay) both;
}
.voice-morph .voice-recording-cancel:hover:not(:disabled) {
  background: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-primary) 10%, transparent);
  }
  color: var(--openbot-text-primary);
}
.voice-recording-cancel:active, .voice-recording-finish:active {
  transform: scale(0.94);
}
.voice-recording-cancel svg, .voice-recording-finish svg {
  width: 14px;
  height: 14px;
}
.voice-recording-finish svg {
  stroke-width: 3;
}
@keyframes voice-morph-content-in {
  from {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .voice-morph *, .voice-recording-status, .voice-recording-finish {
    transition: none;
    animation: none;
  }
}
.dictation-button:hover:not(:disabled) {
  background: var(--openbot-border);
  color: var(--openbot-text-primary);
}
.composer-button svg, .dictation-button svg, .voice-button svg {
  width: 16px;
  height: 16px;
}
.composer-spinner {
  animation: ui-spin 720ms linear infinite;
}
.voice-button {
  background: var(--openbot-text-primary);
  color: var(--openbot-bg-sidebar);
}
.voice-button-active {
  background: var(--openbot-text-primary);
  color: var(--openbot-bg-sidebar);
}
.voice-button:hover:not(:disabled), .voice-button.ui-button:hover:not(:disabled), .voice-morph .voice-recording-finish:hover:not(:disabled) {
  background: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-primary) 84%, var(--openbot-bg-sidebar));
  }
  color: var(--openbot-bg-sidebar);
}
.composer-input-label, .composer-editor-root {
  --composer-editor-max-height: max(48px, 33dvh);
}
.composer-input-label {
  display: flex;
  min-width: 0;
  min-height: 48px;
  max-height: var(--composer-editor-max-height);
  align-items: flex-end;
  cursor: text;
}
.composer-toolbar {
  display: flex;
  min-height: 28px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.composer[data-compact] .composer-input-label {
  grid-column: 2;
  grid-row: 1;
  min-height: 28px;
}
.composer[data-compact] .composer-toolbar {
  display: contents;
}
.composer[data-compact] .composer-toolbar > .composer-button {
  grid-column: 1;
  grid-row: 1;
}
.composer[data-compact] .composer-toolbar > .composer-primary-actions {
  grid-column: 3;
  grid-row: 1;
}
.composer[data-compact] .composer-editor-root, .composer[data-compact] .composer-editor-surface {
  min-height: 28px;
}
.composer[data-compact] .composer-editor-surface {
  padding: 4px 0;
}
.composer[data-compact] .composer-editor-placeholder {
  top: 4px;
  left: 0;
}
.composer[data-has-attachments] .composer-input-label, .composer[data-has-attachments] .composer-editor-root, .composer[data-has-attachments] .composer-editor-surface {
  min-height: 28px;
}
.composer[data-has-attachments] .composer-editor-surface {
  padding: 4px;
}
.composer[data-has-attachments] .composer-editor-placeholder {
  top: 4px;
}
.composer-editor-root {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  max-height: var(--composer-editor-max-height);
  cursor: text;
}
.composer-editor-surface {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  min-height: 48px;
  max-height: var(--composer-editor-max-height);
  margin: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  resize: none;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 2px 4px 8px;
  caret-color: var(--openbot-text-primary);
  color: var(--openbot-text-primary);
  cursor: text;
  font-size: var(--openbot-text-lg);
  line-height: 20px;
  white-space: pre-wrap;
  word-break: break-word;
  user-select: text;
}
.composer-editor-surface[aria-disabled="true"] {
  pointer-events: none;
}
.composer-editor-root[data-dictating] > [role="textbox"] {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.composer-dictation-draft {
  display: inline;
}
.composer-dictation-word {
  animation: composer-dictation-word-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
  transition: color var(--openbot-duration-slow) var(--openbot-ease-out);
}
.composer-dictation-word[data-interim] {
  color: var(--openbot-text-muted);
}
.composer-dictation-caret {
  display: inline-block;
  width: 2px;
  height: 16px;
  margin-left: 2px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
  vertical-align: -3px;
  animation: composer-dictation-caret 1s ease-in-out infinite;
}
.composer-dictation[data-final] .composer-dictation-caret {
  display: none;
}
@keyframes composer-dictation-word-in {
  from {
    opacity: 0;
    filter: blur(2px);
  }
}
@keyframes composer-dictation-caret {
  50% {
    opacity: 0.2;
  }
}
@media (prefers-reduced-motion: reduce) {
  .composer-dictation-word, .composer-dictation-caret {
    transition: none;
    animation: none;
  }
}
.composer-editor-placeholder {
  position: absolute;
  top: 2px;
  left: 4px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-lg);
  line-height: 20px;
  pointer-events: none;
  user-select: none;
}
.composer-editor-root[data-size="compact"], .composer-editor-root[data-size="compact"] .composer-editor-surface {
  min-height: 28px;
}
.composer-editor-root[data-size="compact"] .composer-editor-surface {
  padding: 4px 0;
}
.composer-editor-root[data-size="compact"] .composer-editor-placeholder {
  top: 4px;
  left: 0;
}
.composer-mention-token.composer-tag-unavailable {
  border: 1px dashed var(--openbot-border-strong);
  background: transparent;
  padding-left: var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
}
.composer-file-reference {
  height: 24px;
  cursor: pointer;
  user-select: none;
}
.mention-picker {
  --mention-picker-overlap: 14px;
  --mention-picker-side-inset: calc(var(--openbot-space-1-5) + 12px);
  --mention-picker-row-height: 29px;
  --mention-picker-gutter: 5px;
  --mention-picker-visible-rows: 7;
  position: absolute;
  z-index: 10;
  right: var(--mention-picker-side-inset);
  bottom: calc(var(--mention-picker-bottom, 0px) - var(--mention-picker-overlap));
  left: var(--mention-picker-side-inset);
  border: 1px solid var(--openbot-queue-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-queue-surface);
  padding-bottom: var(--mention-picker-overlap);
  color: var(--openbot-queue-text);
  box-shadow: none;
  transform-origin: bottom center;
  animation: mention-picker-in var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1) both;
}
.mention-picker-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  height: calc(var(--mention-picker-rows, 0) * var(--mention-picker-row-height) + 2 * var(--mention-picker-gutter));
  max-height: calc( var(--mention-picker-visible-rows) * var(--mention-picker-row-height) + 2 * var(--mention-picker-gutter) );
  overflow-y: auto;
  padding: var(--mention-picker-gutter);
  overscroll-behavior: contain;
  scrollbar-width: none;
  transition: height var(--openbot-duration-normal) var(--openbot-ease-out);
  will-change: height;
}
.mention-picker-list::-webkit-scrollbar {
  display: none;
}
@keyframes mention-picker-in {
  from {
    opacity: 0;
    transform: translateY(5px) scaleY(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}
.mention-picker-option {
  display: flex;
  width: 100%;
  height: var(--mention-picker-row-height);
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  padding: 0 8px;
  color: var(--openbot-queue-text);
  text-align: left;
}
.mention-picker-file-option .attachment-reference-visual {
  width: 20px;
  height: 20px;
}
.mention-picker-option:hover, .mention-picker-option-active {
  background: var(--openbot-hover);
}
.mention-picker-option .agent-avatar {
  --agent-avatar-optical-offset: -2px;
  width: 20px;
  height: 20px;
}
.mention-picker-skill-icon {
  display: grid;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  place-items: center;
  color: var(--openbot-queue-action);
}
.mention-picker-skill-icon > svg {
  width: 15px;
  height: 15px;
}
.mention-picker-option > strong {
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  font-size: var(--openbot-text-lg);
  font-weight: 500;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mention-picker-description {
  min-width: 0;
  flex: 1 1 0;
  overflow: hidden;
  color: var(--openbot-queue-action);
  font-size: var(--openbot-text-md);
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mention-picker-slug {
  flex: 0 0 auto;
  color: var(--openbot-queue-action);
  font-size: var(--openbot-text-md);
  line-height: 18px;
  white-space: nowrap;
}
.mention-picker-status {
  display: flex;
  height: calc(var(--mention-picker-row-height) + 2 * var(--mention-picker-gutter));
  align-items: center;
  margin: 0;
  padding: 0 calc(var(--mention-picker-gutter) + 8px);
  color: var(--openbot-queue-action);
  font-size: var(--openbot-text-md);
  line-height: 18px;
}
.mention-picker-badge {
  margin-left: auto;
  flex: 0 0 auto;
  color: var(--openbot-queue-action);
}
.composer-attachments {
  position: relative;
  z-index: 11;
  display: flex;
  width: 100%;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 2px 0 4px;
}
.composer-attachment {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
}
.composer-attachment[data-kind="image"] {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  padding: 0;
}
.composer-attachment[data-kind="file"] {
  width: 220px;
  max-width: 100%;
  height: 52px;
  gap: 10px;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  padding: 7px 12px 7px 8px;
}
.composer-attachment-copy {
  display: block;
  min-width: 0;
  flex: 1;
}
.composer-attachment-copy strong, .composer-attachment-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.composer-attachment-copy strong {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: 500;
  line-height: 16px;
}
.composer-attachment-copy small {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 14px;
}
.composer-attachment-preview {
  display: grid;
  width: 36px;
  height: 36px;
  overflow: hidden;
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--openbot-radius-md);
  background: var(--file-reference-soft, var(--openbot-hover));
  color: var(--file-reference-color, var(--openbot-text-muted));
  font-size: var(--openbot-text-sm);
  font-weight: 700;
  line-height: 1;
}
.composer-attachment[data-kind="image"] .composer-attachment-preview {
  width: 100%;
  height: 100%;
  border-radius: var(--openbot-radius-media-preview);
}
.composer-attachment-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.message-attachments {
  display: grid;
  width: min(100%, 256px);
  gap: 7px;
  margin-top: 10px;
}
.message-attachment {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px 40px;
  min-width: 0;
  min-height: 56px;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface-raised);
  padding: 7px;
  transition: background-color var(--openbot-duration-hover) ease, border-color var(--openbot-duration-hover) ease;
}
[data-slot="bubble"]:not([data-variant="ghost"]) > [data-slot="bubble-content"] > .message-attachments:last-child {
  margin-bottom: var(--openbot-space-1);
}
[data-slot="bubble"]:not([data-variant="ghost"]) > [data-slot="bubble-content"] > .message-attachments-group:last-child {
  margin-bottom: var(--openbot-space-1);
}
[data-slot="bubble"]:not([data-variant="ghost"]) > [data-slot="bubble-content"] > .message-attachments:last-child .message-attachment {
  border-radius: var(--openbot-radius-bubble-inset);
}
.message-attachments-group {
  display: grid;
  width: min(100%, 256px);
  margin-top: var(--openbot-space-2);
  gap: var(--openbot-space-1-5);
}
.message-attachments-group .message-attachments {
  width: 100%;
  margin-top: 0;
}
.ui-button.attachment-preview-button {
  width: 100%;
  height: 40px;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  border: 0;
  background: transparent;
  padding: 0;
  color: inherit;
  text-align: left;
}
.attachment-preview-button:disabled {
  cursor: default;
}
.attachment-file-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.attachment-file-copy {
  display: grid;
  min-width: 0;
  gap: 1px;
}
.message-attachment strong {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: 560;
  line-height: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.message-attachment small {
  color: var(--openbot-text-readable);
  font-size: var(--openbot-text-sm);
  line-height: 15px;
}
.attachment-open-button {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  padding: 0;
  color: var(--openbot-text-muted);
  transition: background-color var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease, transform var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1);
}
.attachment-open-button svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}
.attachment-open-button:focus-visible, .attachment-preview-button:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}
.attachment-open-button:active {
  transform: scale(0.96);
}
@media (hover: hover) and (pointer: fine) {
  .message-attachment:hover {
    border-color: var(--openbot-border-strong);
    background: var(--openbot-bg-control-hover);
  }
  .attachment-open-button:hover {
    background: var(--openbot-bg-control-active);
    color: var(--openbot-text-primary);
  }
}
.agent-queue-panel {
  --queue-row-height: 29px;
  --queue-composer-overlap: 14px;
  --queue-row-inset-start: 13px;
  --queue-row-inset-end: 8px;
  --queue-row-gutter: 5px;
  position: relative;
  z-index: 10;
  overflow: visible;
  margin: 0 12px calc(-1 * var(--queue-composer-overlap));
  border: 1px solid var(--openbot-queue-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-queue-surface);
  padding-bottom: var(--queue-composer-overlap);
  box-shadow: none;
  animation: queue-panel-in var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1) both;
}
.agent-queue-slot {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.agent-queue-slot[data-open="false"] {
  grid-template-rows: 0fr;
}
.agent-queue-slot-inner {
  min-height: 0;
  overflow: hidden;
}
.agent-queue-panel-resize {
  min-height: 0;
}
.agent-queue-hold {
  margin: 0;
  padding: var(--queue-row-gutter) var(--queue-row-inset-end) 0 var(--queue-row-inset-start);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.message-attachments-group:has(.attachment-media-player), .message-attachments:has(.attachment-media-player) {
  width: min(100%, 360px);
}
.attachment-media-player {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  min-width: 0;
  border-radius: var(--openbot-radius-md);
}
.message-attachment[data-media] {
  grid-template-columns: minmax(0, 1fr) var(--openbot-control-sm) var(--openbot-control-sm);
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-3);
}
.message-attachment[data-media] .attachment-file-visual {
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-muted);
}
.message-attachment[data-media] .attachment-file-visual svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.message-attachment[data-media] .attachment-open-button {
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
}
.message-attachment[data-media] .attachment-open-button svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.message-attachment[data-media="audio"] .attachment-media-player {
  height: var(--openbot-control-xl);
}
.image-gallery {
  position: relative;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.image-gallery-item {
  position: absolute;
}
.image-gallery-tile {
  display: grid;
  width: 100%;
  height: 100%;
  overflow: hidden;
  place-items: center;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
  padding: 0;
  color: var(--openbot-text-muted);
}
.image-gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.image-gallery-tile:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}
.image-gallery-tile-missing > svg {
  width: var(--openbot-space-6);
  height: var(--openbot-space-6);
}
@media (hover: hover) and (pointer: fine) {
  .image-gallery-tile:not(:disabled):hover img {
    transform: scale(1.03);
  }
}
.ui-dialog-overlay.image-lightbox-backdrop {
  background: var(--openbot-bg-overlay);
  animation: none;
}
.ui-dialog-content.image-lightbox {
  position: fixed;
  z-index: calc(var(--openbot-layer-dialog) + 1);
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  color: var(--openbot-text-primary);
  outline: none;
  -webkit-app-region: no-drag;
}
.image-lightbox-chrome {
  animation: image-lightbox-fade-in var(--openbot-duration-overlay) var(--openbot-ease-out);
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}
.image-lightbox[data-closing] .image-lightbox-chrome {
  opacity: 0;
}
.image-lightbox-toolbar {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3) var(--openbot-space-4);
}
.image-lightbox-caption {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: var(--openbot-space-2);
}
.image-lightbox-name {
  overflow: hidden;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.image-lightbox-position {
  flex: none;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
.image-lightbox-actions {
  display: flex;
  flex: none;
  gap: var(--openbot-space-1);
}
.image-lightbox-stage {
  position: relative;
  min-height: 0;
  touch-action: pan-y;
}
.image-lightbox-track {
  position: absolute;
  inset: 0;
  will-change: transform;
}
.image-lightbox-slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  padding: 0 calc(var(--openbot-space-8) * 2);
  transform: translateX(calc(var(--image-lightbox-slide) * 100%));
}
.image-lightbox-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--openbot-radius-md);
  user-select: none;
  will-change: transform;
}
.image-lightbox-image-pending {
  opacity: 0;
}
.image-lightbox-error {
  margin: 0;
  color: var(--openbot-text-muted);
}
.image-lightbox-step {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control);
}
.image-lightbox-step-previous {
  left: var(--openbot-space-4);
}
.image-lightbox-step-next {
  right: var(--openbot-space-4);
}
.image-lightbox-strip {
  position: relative;
  display: flex;
  overflow-x: auto;
  justify-content: safe center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-3) var(--openbot-space-4) var(--openbot-space-4);
  scrollbar-width: none;
}
.image-lightbox-thumb {
  flex: none;
  width: var(--openbot-control-xl);
  height: var(--openbot-control-xl);
  overflow: hidden;
  border-radius: var(--openbot-radius-sm);
  padding: 0;
  opacity: 0.5;
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}
.image-lightbox-thumb[aria-current="true"] {
  box-shadow: 0 0 0 2px var(--openbot-text-primary);
  opacity: 1;
}
.image-lightbox-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.image-lightbox-thumb:focus-visible, .image-lightbox-step:focus-visible, .image-lightbox-action:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .image-lightbox-thumb:hover {
    opacity: 1;
  }
}
@media (max-width: 640px) {
  .image-lightbox-slide {
    padding: 0;
  }
  .image-lightbox-step {
    display: none;
  }
}
@keyframes image-lightbox-fade-in {
  from {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .image-gallery-tile img, .image-lightbox-chrome, .image-lightbox-thumb {
    animation: none;
    transition: none;
  }
}
.composer-wrap:has(.composer-attachment) .agent-queue-panel {
  margin-bottom: 0;
}
.agent-queue-panel-list {
  max-height: calc(7 * var(--queue-row-height) + 2 * var(--queue-row-gutter));
  overflow-y: auto;
  padding: var(--queue-row-gutter) var(--queue-row-inset-end) var(--queue-row-gutter) var(--queue-row-inset-start);
  overscroll-behavior: contain;
}
.agent-queue-item {
  --queue-drag-step: 0;
  position: relative;
  display: grid;
  height: var(--queue-row-height);
  min-height: 0;
  min-width: 0;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  margin: 0;
  border: 0;
  padding: 0;
  border-radius: var(--openbot-radius-md);
  color: var(--openbot-queue-text);
  cursor: grab;
  outline: 0;
  transform: translate3d(0, calc(var(--queue-drag-step) * var(--queue-row-height)), 0);
  transition: height var(--openbot-duration-slow) var(--openbot-ease-out), opacity var(--openbot-duration-fast) ease, transform var(--openbot-duration-slow) var(--openbot-ease-out);
}
.agent-queue-item-entering {
  animation: queue-item-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}
.agent-queue-item-removing {
  height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, -4px, 0) scale(0.985);
  will-change: height, opacity, transform;
}
.agent-queue-panel-dragging .agent-queue-item {
  will-change: transform;
}
.agent-queue-item::before {
  position: absolute;
  z-index: 0;
  inset: 0 calc(var(--queue-row-gutter) - var(--queue-row-inset-end)) 0 calc(var(--queue-row-gutter) - var(--queue-row-inset-start));
  border-radius: var(--openbot-radius-md);
  background: transparent;
  content: "";
  pointer-events: none;
  transition: background-color var(--openbot-duration-hover) ease;
}
.agent-queue-item > * {
  position: relative;
  z-index: 1;
}
.agent-queue-item:hover, .agent-queue-item:focus-visible, .agent-queue-item-drag-over {
  z-index: 1;
}
.agent-queue-item:hover::before, .agent-queue-item:focus-visible::before {
  background: var(--openbot-hover);
}
.agent-queue-panel-dragging .agent-queue-item:not(.agent-queue-item-dragging):hover::before {
  background: transparent;
}
.agent-queue-item:focus-visible {
  box-shadow: 0 0 0 2px var(--openbot-border-focus);
}
.agent-queue-item-dragging {
  z-index: 0;
  cursor: grabbing;
  opacity: 0;
}
.agent-queue-item-dragging::before {
  background: transparent;
  box-shadow: none;
}
.agent-queue-drag-preview {
  position: fixed;
  z-index: var(--openbot-layer-dropdown);
  box-sizing: border-box;
  min-height: 31px;
  margin: 0;
  border: 1px solid var(--openbot-border-strong);
  background: var(--openbot-bg-surface-raised);
  box-shadow: var(--openbot-shadow-raised);
  opacity: 0.96;
  pointer-events: none;
  transform: none;
}
.agent-queue-drag-preview::before {
  display: none;
}
.agent-queue-item-steering {
  color: var(--openbot-text-muted);
}
.agent-queue-item-editing {
  color: var(--openbot-text-muted);
}
.agent-queue-editing-badge {
  flex: none;
  padding: 0 6px;
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 18px;
  white-space: nowrap;
}
.agent-queue-item-has-attachment {
  grid-template-columns: 14px 24px minmax(0, 1fr) auto;
}
.agent-queue-icon {
  display: grid;
  place-items: center;
  color: var(--openbot-queue-action);
}
.agent-queue-icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}
.agent-queue-attachment {
  display: grid;
  width: 24px;
  height: 24px;
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--openbot-queue-border);
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-bg-canvas);
  color: var(--openbot-queue-action);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-glyph-xs);
  line-height: 1;
}
.agent-queue-attachment img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.agent-queue-steer svg, .agent-queue-icon-button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}
.agent-queue-message {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: var(--openbot-text-lg);
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-queue-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--openbot-queue-action);
}
.agent-queue-steer, .agent-queue-icon-button {
  display: inline-flex;
  height: 26px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  padding: 0 4px;
  color: inherit;
  font-size: var(--openbot-text-lg);
  line-height: 18px;
  transition: background var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease;
}
.agent-queue-steer:hover:not(:disabled), .agent-queue-steer:focus-visible, .agent-queue-icon-button:hover:not(:disabled), .agent-queue-icon-button:focus-visible {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
  outline: 0;
}
.agent-queue-steer:disabled, .agent-queue-icon-button:disabled {
  cursor: default;
  opacity: 0.45;
}
.agent-queue-icon-button {
  width: 26px;
  padding: 0;
}
.agent-queue-icon-button.agent-queue-delete:hover:not(:disabled), .agent-queue-icon-button.agent-queue-delete:focus-visible {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
  opacity: 1;
}
@media (max-width: 620px) {
  .agent-queue-panel {
    margin-right: 2px;
    margin-left: 2px;
  }
  .agent-queue-steer {
    width: 26px;
    padding: 0;
  }
  .agent-queue-steer span {
    display: none;
  }
}
@keyframes queue-panel-in {
  from {
    opacity: 0;
    transform: translateY(5px) scale(0.995);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes queue-item-in {
  from {
    opacity: 0;
    transform: translate3d(0, -4px, 0) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}
.agent-tasks-mark {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  --task-list-glyph: 14px;
}
.agent-tasks-menu-title {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agent-task-chips {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--openbot-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.agent-task-chip-row {
  display: flex;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  gap: var(--openbot-space-1);
}
.agent-task-chip.ui-button {
  display: inline-flex;
  min-width: 0;
  max-width: min(100%, 560px);
  height: var(--openbot-control-md);
  align-items: center;
  gap: var(--openbot-space-2);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-pill);
  padding: 0 var(--openbot-space-2) 0 var(--openbot-space-3);
  font-weight: inherit;
  --task-list-glyph: 14px;
}
.agent-task-chip-title {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-task-chip-status {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-task-chip-chevron {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
}
.agent-task-chip-close.ui-button {
  display: grid;
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  color: var(--openbot-text-muted);
}
.agent-task-chip-close svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.agent-task-list {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--openbot-space-0-5);
  min-height: 0;
  overflow-y: auto;
  padding: var(--openbot-space-2);
}
.agent-task-list .agent-tasks-mark {
  width: 16px;
}
.agent-task-list-group {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-0-5);
  margin-top: var(--openbot-space-2);
}
.agent-task-list-day {
  margin: 0;
  padding: var(--openbot-space-1) var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: 500;
}
.agent-tasks-disclosure {
  color: var(--openbot-text-secondary);
}
.agent-tasks-disclosure .agent-tasks-icon {
  color: var(--openbot-text-muted);
  transition: transform var(--openbot-duration-fast) ease;
}
.agent-tasks-disclosure[aria-expanded="true"] .agent-tasks-icon {
  transform: rotate(90deg);
}
.agent-tasks-trigger-dot {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 5px;
  height: 5px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
}
.agent-tasks-panel .file-preview-header {
  --task-list-glyph: 16px;
}
.agent-tasks-panel-origin {
  margin: 0;
  padding: var(--openbot-space-3) var(--openbot-space-4) 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.agent-tasks-panel-queued {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  padding: 0 var(--openbot-space-4);
}
.agent-tasks-panel-queued-text {
  margin: 0;
  overflow: hidden;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-tasks-panel-note {
  margin: 0;
  border-top: 1px solid var(--openbot-border);
  padding: var(--openbot-space-3) var(--openbot-space-4);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.agent-tasks-panel .composer[data-compact] {
  grid-template-columns: minmax(0, 1fr) auto;
}
.agent-tasks-panel .composer[data-compact] > .composer-input-label {
  grid-column: 1;
}
.agent-tasks-panel .composer[data-compact] .composer-primary-actions {
  grid-column: 2;
}
@media (prefers-reduced-motion: reduce) {
  .agent-tasks-disclosure .agent-tasks-icon {
    transition: none;
  }
}
.side-question-empty {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-1-5);
  padding: var(--openbot-space-8) var(--openbot-space-4);
  text-align: center;
}
.side-question-empty > svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  margin-bottom: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  stroke-width: var(--openbot-icon-stroke);
}
.side-question-empty > strong {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  font-weight: 500;
}
.side-question-empty > p {
  max-width: 320px;
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.side-question-composer.composer[data-compact] {
  grid-template-columns: minmax(0, 1fr) auto;
}
.side-question-composer.composer[data-compact] > .composer-input-label {
  grid-column: 1;
}
.side-question-composer.composer[data-compact] .composer-primary-actions {
  grid-column: 2;
}
.speaking-bar {
  display: flex;
  width: min(560px, 100%);
  align-items: center;
  gap: var(--openbot-space-3);
  margin: 0 auto var(--openbot-space-2);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface-raised);
  box-shadow: var(--openbot-shadow-raised);
  padding: var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-2);
  animation: speaking-bar-in var(--openbot-duration-normal) var(--openbot-ease-out) both;
}
@keyframes speaking-bar-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}
.speaking-bar-avatar {
  --agent-avatar-optical-offset: calc(28px * -0.14);
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
}
.speaking-bar-waveform {
  max-width: 120px;
  flex: 0 0 auto;
  color: var(--openbot-accent);
}
.speaking-bar-caption {
  min-width: 0;
  flex: 1;
  margin: 0;
  overflow: hidden;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.voice-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: var(--openbot-space-4);
}
.voice-panel-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-0-5);
}
.voice-panel-name {
  margin: 0;
  font-size: var(--openbot-text-md);
  font-weight: 600;
}
.voice-panel-phase {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.voice-panel-stage {
  display: flex;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-8);
}
.voice-panel-presence {
  position: relative;
  display: grid;
  width: 140px;
  height: 140px;
  place-items: center;
  transform: scale(var(--voice-presence-scale, 1));
  transition: transform var(--openbot-duration-fast) linear, opacity var(--openbot-duration-normal) ease;
}
.voice-panel-presence::before {
  position: absolute;
  inset: -24px;
  border-radius: var(--openbot-radius-pill);
  background: radial-gradient(closest-side, var(--openbot-accent-soft), transparent);
  content: "";
  opacity: 0.5;
  transition: opacity var(--openbot-duration-normal) ease;
}
.voice-panel-presence[data-phase="speaking"]::before {
  opacity: 1;
}
.voice-panel-presence[data-phase="thinking"]::before {
  animation: voice-panel-think 1.6s var(--openbot-ease-in-out) infinite alternate;
}
@keyframes voice-panel-think {
  to {
    opacity: 0.15;
  }
}
.voice-panel-avatar {
  --agent-avatar-optical-offset: calc(112px * -0.14);
  position: relative;
  width: 112px;
  height: 112px;
}
.voice-panel-presence[data-muted] {
  opacity: 0.5;
}
.voice-panel-waveform {
  display: flex;
  width: 141px;
  color: var(--openbot-text-secondary);
  opacity: 0;
  transition: opacity var(--openbot-duration-normal) ease;
}
.voice-panel-waveform[data-phase] {
  opacity: 1;
}
.voice-panel-waveform[data-phase="speaking"] {
  color: var(--openbot-accent);
}
.voice-panel-captions {
  width: 100%;
  min-height: calc(var(--openbot-leading-xl) * 4);
  overflow-y: auto;
  text-align: center;
}
.voice-panel-caption {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-xl);
  line-height: var(--openbot-leading-xl);
}
.voice-panel-caption[data-empty] {
  color: var(--openbot-text-muted);
}
.voice-panel-error {
  color: var(--openbot-danger);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.voice-panel-controls {
  display: flex;
  justify-content: center;
  gap: var(--openbot-space-4);
}
.voice-panel-control {
  border-radius: var(--openbot-radius-pill);
  transition: background-color var(--openbot-duration-fast) ease, color var(--openbot-duration-fast) ease;
}
@media (prefers-reduced-motion: reduce) {
  .speaking-bar, .voice-panel-presence[data-phase="thinking"]::before {
    animation: none;
  }
  .voice-panel-presence {
    transform: none;
  }
}
.voice-player {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-top: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
}
.voice-player-toggle {
  flex: none;
  border-radius: var(--openbot-radius-pill);
}
.voice-player-toggle svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}
.voice-player-track {
  flex: none;
}
.voice-player-bars {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 24px;
}
.voice-player-bar {
  width: 2px;
  height: calc(3px + var(--voice-peak, 0) * 17px);
  border-radius: var(--openbot-radius-pill);
  background: currentColor;
  opacity: 0.45;
}
.voice-player-bar[data-played] {
  background: var(--openbot-accent);
  opacity: 1;
}
.voice-player-time {
  min-width: 3ch;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
.conversation-panel:has(.settings-panel) .conversation-header, .conversation-panel:has(.settings-panel) .conversation-scroll, .conversation-panel:has(.settings-panel) .composer-wrap {
  width: calc(100% - var(--settings-panel-width, 296px));
}
.conversation-panel:has(.settings-panel) .chat-search {
  right: calc(var(--settings-panel-width, 296px) + 16px);
  max-width: calc(100% - var(--settings-panel-width, 296px) - 32px);
}
.conversation-panel:has(#browser-side-panel) .chat-search, .conversation-panel:has(#file-preview-panel) .chat-search {
  right: calc(var(--browser-panel-width, 380px) + 16px);
  max-width: calc(100% - var(--browser-panel-width, 380px) - 32px);
}
.conversation-panel:has(#browser-side-panel) .conversation-header, .conversation-panel:has(#browser-side-panel) .conversation-scroll, .conversation-panel:has(#browser-side-panel) .composer-wrap, .conversation-panel:has(#file-preview-panel) .conversation-header, .conversation-panel:has(#file-preview-panel) .conversation-scroll, .conversation-panel:has(#file-preview-panel) .composer-wrap {
  width: 100%;
}
@keyframes message-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes agent-activity-dot {
  0%, 60%, 100% {
    opacity: 0.34;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-2px);
  }
}
@keyframes agent-picker-in {
  from {
    opacity: 0;
    transform: translateY(-3px) scale(0.995);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes settings-panel-in {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes browser-control-pulse {
  0%, 100% {
    opacity: 0.55;
    transform: scale(0.88);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}
@media (prefers-reduced-motion: reduce) {
  .browser-panel, .remote-desktop-workspace, .message-entry, .chat-action-entry-animated, .agent-activity-entry, .agent-activity-content, .agent-activity-avatar, .agent-row-thinking-dots i, .agent-row-agent-status-responded, .agent-row-agent-status-unread, .mention-picker, .mention-picker-list, .settings-panel {
    animation: none;
    transition: none;
  }
  .agent-activity-avatar, .agent-activity-entry[data-state="exiting"] .agent-activity-avatar {
    transform: none;
  }
  .agent-queue-item {
    animation: none;
    transition: none;
  }
  .agent-queue-panel {
    transition: none;
  }
  .agent-queue-slot {
    transition: none;
  }
  .agent-queue-panel-resize, .message-content-resize {
    will-change: auto;
  }
  .computer-control-dot {
    animation: none;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes modal-in {
  from {
    opacity: 0;
    transform: scale(0.97) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.attachment-drop-overlay {
  position: absolute;
  z-index: 60;
  inset: 12px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px dashed color-mix(in srgb, var(--accent) 70%, var(--openbot-text-primary));
  }
  border-radius: var(--openbot-radius-lg);
  background: var(--background);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--background) 38%, transparent);
  }
  color: var(--text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: 650;
  backdrop-filter: blur(3px);
  pointer-events: none;
}
.side-panel-header {
  position: absolute;
  z-index: 16;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
  width: var(--side-panel-width, 380px);
  height: var(--left-header-height, 38px);
  min-width: 0;
  padding: 0 var(--openbot-space-2);
  container: side-panel-header / inline-size;
}
.side-panel-header::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: var(--openbot-icon-lg);
  translate: 0 -50%;
  background: var(--openbot-border-strong);
  content: "";
  pointer-events: none;
}
.side-panel-tabs {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--openbot-space-1);
  min-width: 0;
}
.side-panel-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--openbot-space-0-5);
  color: var(--openbot-text-muted);
}
.side-panel-actions svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.side-panel-tab {
  position: relative;
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: var(--openbot-space-1-5);
  min-width: 0;
  height: var(--openbot-control-sm);
  padding: 0 var(--openbot-space-2) 0 var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-md);
  color: var(--openbot-text-secondary);
}
.side-panel-tab:hover {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}
.side-panel-tab[data-selected] {
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
}
.side-panel-tab + .side-panel-tab::before {
  position: absolute;
  top: 50%;
  left: calc(var(--openbot-space-1) / -2 - 0.5px);
  width: 1px;
  height: var(--openbot-icon-lg);
  translate: 0 -50%;
  background: var(--openbot-border-strong);
  content: "";
  pointer-events: none;
}
.side-panel-tab:is([data-selected], :hover)::before, .side-panel-tab:is([data-selected], :hover) + .side-panel-tab::before {
  opacity: 0;
}
.side-panel-tab-select {
  display: block;
  height: auto;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 0;
  cursor: pointer;
}
.side-panel-tab-select:hover:not(:disabled):not([data-disabled]) {
  background: transparent;
  color: inherit;
}
.side-panel-tab-close {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  padding: 0;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.side-panel-tab-icon, .side-panel-tab-x {
  grid-area: 1 / 1;
}
.side-panel-tab-icon {
  display: grid;
  opacity: 0.7;
}
.side-panel-tab-icon svg, .side-panel-tab-x {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.side-panel-tab-x {
  opacity: 0;
}
.side-panel-tab:is(:hover, :focus-within) .side-panel-tab-close {
  background: var(--openbot-bg-control-hover);
}
.side-panel-tab:is(:hover, :focus-within) .side-panel-tab-icon {
  opacity: 0;
}
.side-panel-tab:is(:hover, :focus-within) .side-panel-tab-x {
  opacity: 1;
}
.side-panel-tab-close:hover:not(:disabled):not([data-disabled]) {
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
}
.side-panel-tab-select:focus-visible {
  box-shadow: var(--openbot-focus-ring);
  outline: none;
}
@container side-panel-header (max-width: 480px) {
  .side-panel-tabs:has(> .side-panel-tab:nth-child(4)) {
    --side-panel-tabs-compact: 1;
  }
}
@container side-panel-header (max-width: 360px) {
  .side-panel-tabs:has(> .side-panel-tab:nth-child(3)) {
    --side-panel-tabs-compact: 1;
  }
}
@container style(--side-panel-tabs-compact: 1) {
  .side-panel-tab:not([data-selected]) {
    padding: 0 var(--openbot-space-1-5);
  }
  .side-panel-tab:not([data-selected]) .side-panel-tab-select {
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }
  .side-panel-tab:not([data-selected]) .side-panel-tab-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .side-panel-tab:not([data-selected], :focus-within) .side-panel-tab-close {
    background: transparent;
  }
  .side-panel-tab:not([data-selected], :focus-within) .side-panel-tab-icon {
    opacity: 0.7;
  }
  .side-panel-tab:not([data-selected], :focus-within) .side-panel-tab-x {
    opacity: 0;
  }
}
.side-panel-docked > :is(.browser-panel, .settings-panel) {
  top: var(--left-header-height, 38px);
}
.app-frame-edge .side-panel-docked > :is(.browser-panel, .settings-panel)::before {
  top: -1px;
}
.side-panel-docked :is(.side-panel-pane-header, .side-panel-pane-title, .side-panel-pane-close) {
  display: none;
}
.side-panel-docked .settings-panel-header > .side-panel-pane-close {
  display: inline-flex;
  visibility: hidden;
}
.side-panel-empty {
  justify-content: center;
}
.side-panel-launcher {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1-5);
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  padding: var(--openbot-space-6);
}
.side-panel-launch {
  justify-content: flex-start;
  gap: var(--openbot-space-3);
}
.side-panel-maximized > :is(.browser-panel, .settings-panel, .side-panel-header) {
  width: 100%;
}
.side-panel-maximized > .side-panel-header::before, .side-panel-maximized .right-panel-resizer {
  display: none;
}
.side-panel-maximized > :is(.conversation-header, .conversation-scroll, .composer-wrap) {
  visibility: hidden;
}
:is(.side-panel-launch, .side-panel-menu-item) svg {
  flex: none;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
}
.composer-notice {
  --notice-composer-overlap: 14px;
  --notice-inset: 6px;
  --notice-accent: var(--openbot-warning);
  --notice-surface: var(--openbot-warning-soft);
  position: relative;
  z-index: 10;
  display: flex;
  margin: 0 12px calc(-1 * var(--notice-composer-overlap));
  padding: var(--notice-inset) var(--notice-inset) calc(var(--notice-inset) + var(--notice-composer-overlap)) 12px;
  align-items: center;
  gap: 10px;
  border: none;
  border-radius: var(--openbot-radius-card);
  background: var(--notice-surface);
  animation: queue-panel-in var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1) both;
}
.composer-notice[data-tone="danger"] {
  --notice-accent: var(--openbot-danger-text);
  --notice-surface: var(--openbot-danger-soft);
}
.composer-notice:not(:has(.ui-button)) {
  --notice-inset: 8px;
  padding-right: 12px;
}
.composer-notice-icon {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--notice-accent);
}
.composer-notice .ui-button {
  border-color: transparent;
  background: var(--notice-accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--notice-accent) 14%, transparent);
  }
  color: var(--notice-accent);
}
@media (hover: hover) {
  .composer-notice .ui-button:hover:not(:disabled):not([data-disabled]) {
    background: var(--notice-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--notice-accent) 24%, transparent);
    }
    color: var(--notice-accent);
  }
}
.composer-notice-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 0;
}
.composer-notice-copy strong {
  color: var(--notice-accent);
  font-size: var(--openbot-text-sm);
  font-weight: 600;
  line-height: 1.35;
}
.composer-notice-copy p {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: 1.35;
}
.composer-notice-dismiss {
  flex: none;
  align-self: flex-start;
}
.composer-notice .composer-notice-dismiss {
  background: transparent;
  color: var(--notice-accent);
}
@media (hover: hover) {
  .composer-notice .composer-notice-dismiss:hover:not(:disabled):not([data-disabled]) {
    background: var(--notice-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--notice-accent) 18%, transparent);
    }
  }
}
.composer-notice .composer-notice-code-fallback {
  flex: none;
  border-color: var(--notice-accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--notice-accent) 45%, transparent);
  }
  background: transparent;
}
.context-meter-trigger {
  color: var(--openbot-text-muted);
}
.context-meter-ring {
  width: var(--openbot-icon-md);
}
.context-meter-ring .ui-radial-progress-track, .context-meter-ring .ui-radial-progress-indicator {
  stroke-width: 6;
}
.context-meter-ring[data-level="quiet"] {
  --ui-radial-progress-color: var(--openbot-text-dim);
}
.context-meter-ring[data-level="normal"] {
  --ui-radial-progress-color: var(--openbot-text-secondary);
}
.context-meter-ring[data-compacting] {
  --ui-radial-progress-color: var(--openbot-warning);
}
.context-meter-ring[data-compacting] .ui-radial-progress-chart {
  animation: ui-spin 900ms linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .context-meter-ring[data-compacting] .ui-radial-progress-chart {
    animation: none;
  }
}
.context-meter-popover {
  z-index: var(--openbot-layer-popover);
  display: flex;
  width: 280px;
  flex-direction: column;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3) var(--openbot-space-4) var(--openbot-space-4);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  transform-origin: var(--kb-popover-content-transform-origin);
  animation: ui-menu-in var(--ui-menu-duration) var(--ui-menu-ease) both;
}
.context-meter-popover:not([data-expanded]) {
  animation: ui-menu-out var(--ui-menu-duration) var(--ui-menu-ease) both;
}
@media (prefers-reduced-motion: reduce) {
  .context-meter-popover, .context-meter-popover:not([data-expanded]) {
    animation: none;
  }
}
.context-meter-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.context-meter-title {
  margin: 0;
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
}
.context-meter-percent {
  color: var(--openbot-text-secondary);
  font-variant-numeric: tabular-nums;
}
.context-meter-percent[data-level="warning"] {
  color: var(--openbot-warning-text);
}
.context-meter-percent[data-level="danger"] {
  color: var(--openbot-danger-text);
}
.context-meter-tokens, .context-meter-note {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.context-meter-footer {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1-5);
  margin: 0 calc(-1 * var(--openbot-space-4)) calc(-1 * var(--openbot-space-4));
  border-top: 1px solid var(--openbot-border);
  padding: var(--openbot-space-1-5);
}
.context-meter-new-chat {
  width: 100%;
  height: var(--openbot-control-md);
  justify-content: flex-start;
  gap: var(--openbot-space-2);
  border-radius: var(--ui-menu-item-radius);
  padding: 0 var(--ui-menu-inset);
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-regular);
}
.context-meter-new-chat:is(:hover, :focus-visible):not(:disabled) {
  background: var(--ui-menu-item-hover);
}
.context-meter-new-chat > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  color: var(--openbot-text-secondary);
}
.context-meter-tokens {
  margin-top: calc(-1 * var(--openbot-space-2));
  font-variant-numeric: tabular-nums;
}
.context-usage-bar {
  position: relative;
  display: flex;
  height: var(--openbot-space-2);
  gap: var(--openbot-space-0-5);
}
.context-usage-segment {
  min-width: var(--openbot-space-1);
  flex-basis: 0;
  border-radius: var(--openbot-radius-xs);
  background: var(--context-color);
}
.context-usage-segment[data-category="used"] {
  --context-color: var(--openbot-text-secondary);
}
.context-meter-popover:has(.context-meter-percent[data-level="warning"]) [data-category="used"] {
  --context-color: var(--openbot-warning);
}
.context-meter-popover:has(.context-meter-percent[data-level="danger"]) [data-category="used"] {
  --context-color: var(--openbot-danger);
}
.context-usage-segment[data-category="free"] {
  min-width: 0;
  background: var(--openbot-border);
}
.context-meter-popover [data-category="systemPrompt"] {
  --context-color: var(--openbot-chart-storage-workspaces);
}
.context-meter-popover [data-category="memoryFiles"] {
  --context-color: var(--openbot-chart-storage-chats);
}
.context-meter-popover [data-category="tools"] {
  --context-color: var(--openbot-chart-storage-downloads);
}
.context-meter-popover [data-category="skills"] {
  --context-color: var(--openbot-chart-storage-runtimes);
}
.context-meter-popover [data-category="toolResults"] {
  --context-color: var(--openbot-chart-storage-files);
}
.context-meter-popover [data-category="messages"] {
  --context-color: var(--openbot-text-secondary);
}
.context-meter-popover [data-category="other"] {
  --context-color: var(--openbot-text-dim);
}
.context-meter-popover .context-meter-category[data-category="free"] {
  --context-color: var(--openbot-border);
}
.context-meter-categories {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.context-meter-category {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-0-5) 0;
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.context-meter-swatch {
  width: var(--openbot-space-2);
  height: var(--openbot-space-2);
  align-self: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--context-color);
}
.context-meter-category-label {
  overflow: hidden;
  color: var(--openbot-text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.context-meter-category-tokens {
  color: var(--openbot-text-primary);
  font-variant-numeric: tabular-nums;
}
.context-usage-threshold {
  position: absolute;
  top: calc(-1 * var(--openbot-space-1));
  bottom: calc(-1 * var(--openbot-space-1));
  width: var(--openbot-space-0-5);
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-text-primary);
  transform: translateX(-50%);
}
.context-compaction-notice[data-tone="success"] {
  --notice-accent: var(--openbot-success-text);
  --notice-surface: var(--openbot-success-soft);
}
.context-compaction-notice[data-leaving] {
  animation: context-compaction-notice-out var(--openbot-duration-toast-exit) var(--openbot-ease-in-out) forwards;
}
@keyframes context-compaction-notice-out {
  to {
    opacity: 0;
    transform: translateY(100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .context-compaction-notice[data-leaving] {
    animation: context-compaction-notice-fade 1ms forwards;
  }
}
@keyframes context-compaction-notice-fade {
  to {
    opacity: 0;
  }
}
.context-compaction-notice .composer-notice-icon {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.context-compaction-notice-copy {
  min-width: 0;
  flex: 1;
  margin: 0;
  overflow: hidden;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.context-compaction-notice-copy strong {
  color: var(--notice-accent);
  font-weight: 600;
}
.context-compaction-notice:has(.composer-notice-dismiss) {
  --notice-inset: 8px;
}
.context-compaction-notice .composer-notice-dismiss {
  width: var(--openbot-control-xs);
  height: var(--openbot-control-xs);
  min-height: 0;
  margin-block: calc(-1 * var(--openbot-space-1));
  padding: 0;
  align-self: center;
}
.context-compaction-notice-percent {
  flex: none;
  color: var(--notice-accent);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}
.context-compaction-body {
  display: flex;
  min-width: 0;
  max-width: 100%;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-2);
}
.context-compaction-icon {
  display: inline-grid;
  place-items: center;
}
.context-compaction-icon svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.context-compaction-marker[data-status="completed"] .context-compaction-icon {
  color: var(--openbot-success-text);
}
.context-compaction-marker[data-status="failed"] .context-compaction-icon {
  color: var(--openbot-warning-text);
}
.context-compaction-marker .chat-action-marker-content {
  flex-wrap: wrap;
  justify-content: center;
  min-width: 0;
  white-space: normal;
}
.context-compaction-detail {
  white-space: normal;
}
.conversation-interaction-card {
  box-sizing: border-box;
  min-width: 0;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
  padding: var(--openbot-space-4);
}
.conversation-interaction-header {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--openbot-space-3);
}
.conversation-interaction-header > :is(strong, h2) {
  min-width: 0;
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-lg);
  overflow-wrap: anywhere;
}
.conversation-interaction-status[data-slot="badge"] {
  flex: 0 0 auto;
  gap: var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-md);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.conversation-interaction-status svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.conversation-interaction-spinner {
  animation: ui-spin 1s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .conversation-interaction-spinner {
    animation: none;
  }
}
.browser-takeover-card {
  display: flex;
  width: min(540px, 100%);
  margin: var(--openbot-space-3) 0 var(--openbot-space-6);
  flex-direction: column;
  gap: var(--openbot-space-4);
  animation: browser-takeover-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}
.browser-takeover-copy {
  margin-top: calc(-1 * var(--openbot-space-2));
  display: grid;
  gap: var(--openbot-space-1);
}
.browser-takeover-copy p {
  margin: 0;
  max-width: 54ch;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-md);
}
.browser-takeover-preview {
  min-width: 0;
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-canvas);
}
.browser-takeover-preview-bar {
  display: flex;
  height: var(--openbot-control-sm);
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-1-5);
  border-bottom: 1px solid var(--openbot-border);
  background: var(--openbot-bg-control);
  padding: 0 var(--openbot-space-3);
  color: var(--openbot-text-secondary);
}
.browser-takeover-preview-bar svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.browser-takeover-preview-bar span, .browser-takeover-preview-bar small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser-takeover-preview-bar span {
  min-width: 0;
  flex: 1;
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.browser-takeover-preview-bar small {
  max-width: 42%;
  color: var(--openbot-text-readable);
  font-size: var(--openbot-text-sm);
}
.browser-takeover-preview-viewport {
  display: grid;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  place-items: stretch;
  background: var(--openbot-bg-control);
}
.browser-takeover-preview-open.ui-button {
  display: grid;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.browser-takeover-preview-open > * {
  grid-area: 1 / 1;
}
.browser-takeover-preview-open-label {
  display: inline-flex;
  align-items: center;
  justify-self: center;
  align-self: center;
  gap: var(--openbot-space-1);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-canvas);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}
.browser-takeover-preview-open-label > svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  stroke-width: var(--openbot-icon-stroke);
}
.browser-takeover-preview-open:hover .browser-takeover-preview-open-label, .browser-takeover-preview-open:focus-visible .browser-takeover-preview-open-label {
  opacity: 1;
}
.browser-takeover-preview-viewport img, .browser-takeover-preview-skeleton {
  width: 100%;
  height: 100%;
}
.browser-takeover-preview-viewport img {
  display: block;
  object-fit: cover;
}
.browser-takeover-preview-fallback {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  padding: var(--openbot-space-6);
  text-align: center;
}
.browser-takeover-preview-fallback svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  margin-bottom: var(--openbot-space-1);
  stroke-width: var(--openbot-icon-stroke);
}
.browser-takeover-preview-fallback strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser-takeover-preview-fallback span {
  max-width: 100%;
  overflow: hidden;
  color: var(--openbot-text-readable);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser-takeover-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.browser-takeover-actions .ui-button {
  transition: transform var(--openbot-duration-fast) var(--openbot-ease-out);
}
.browser-takeover-actions .ui-button:active:not(:disabled) {
  transform: scale(0.97);
}
@keyframes browser-takeover-in {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.question-prompt-bubble.ui-bubble {
  width: min(540px, 100%);
  max-width: 100%;
}
.question-prompt-bubble > .ui-bubble-content {
  width: 100%;
  border-color: var(--openbot-border);
  background: var(--openbot-bg-canvas);
}
.question-prompt-complete {
  min-width: 0;
  display: grid;
  gap: var(--openbot-space-3);
}
.question-prompt-complete-header, .question-prompt-complete-status {
  display: flex;
  align-items: center;
}
.question-prompt-complete-header {
  min-width: 0;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  min-height: 24px;
}
.question-prompt-complete-status {
  min-width: 0;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-primary);
}
.question-prompt-complete-status svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  color: var(--openbot-success);
  stroke-width: var(--openbot-icon-stroke);
}
.question-prompt-complete:not([data-state="answered"]) .question-prompt-complete-status svg {
  color: var(--openbot-text-muted);
}
.question-prompt-complete-status strong {
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-lg);
  letter-spacing: var(--openbot-tracking-tight);
}
.question-prompt-complete-answers.ui-item-group {
  gap: var(--openbot-space-3);
  border: 0;
  border-radius: 0;
  background: transparent;
}
.question-prompt-complete-answers .ui-item {
  min-height: 0;
  border: 0;
  padding: 0;
}
.question-prompt-complete-answers .ui-item-title, .question-prompt-complete-answers .ui-item-description {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}
.question-prompt-complete-answers .ui-item-title {
  font-weight: var(--openbot-weight-regular);
}
.question-prompt-header {
  min-width: 0;
  min-height: var(--openbot-control-xs);
}
.question-prompt-header h2 {
  margin: 0;
  padding-top: var(--openbot-space-0-5);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-lg);
  letter-spacing: var(--openbot-tracking-tight);
}
.question-prompt-navigation {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-0-5);
}
.question-prompt-layout {
  position: relative;
  min-width: 0;
}
.question-prompt-navigation-root.ui-questionnaire {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--openbot-space-4);
}
.question-prompt-navigation-button.ui-button {
  width: 22px;
  height: 22px;
  min-height: 22px;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  background: transparent;
  padding: 0;
  color: var(--openbot-text-muted);
  transition: none;
}
.question-prompt-navigation-button.ui-button:hover:not(:disabled) {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}
.question-prompt-navigation-button.ui-button:focus-visible {
  background: var(--openbot-bg-control-hover);
  box-shadow: 0 0 0 1px var(--openbot-border-strong);
  color: var(--openbot-text-primary);
}
.question-prompt-navigation-button.ui-button:disabled {
  background: transparent;
  color: var(--openbot-text-dim);
  opacity: 0.52;
}
.question-prompt-navigation-button svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.question-prompt-navigation .ui-questionnaire-progress {
  min-width: 48px;
  padding-inline: var(--openbot-space-1);
  font-family: var(--openbot-font-sans);
  text-align: center;
}
.question-prompt-cancel {
  margin-left: var(--openbot-space-1);
}
.question-prompt-stage {
  min-width: 0;
  overflow: hidden;
  transition: height var(--page-slide-dur) var(--page-slide-ease);
}
.question-prompt-stage .question-prompt-page {
  bottom: auto;
  display: grid;
  gap: var(--openbot-space-3);
}
.question-prompt-stage:not([data-transitioning]) .question-prompt-page:not([aria-hidden="true"]) {
  position: relative;
}
.question-prompt-stage[data-preparing], .question-prompt-stage[data-preparing] .t-page {
  transition: none;
}
.question-prompt-options.ui-item-group {
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface);
}
.question-prompt-options > :is(.ui-questionnaire-choice, .question-prompt-custom-row) {
  transition: background-color var(--openbot-duration-hover) ease, box-shadow var(--openbot-duration-hover) ease;
}
.question-prompt-options > .ui-questionnaire-choice:hover:not([data-disabled]) {
  background: var(--openbot-bg-control-hover);
}
.question-prompt-options > .ui-questionnaire-choice:focus-within {
  outline: 1px solid var(--openbot-border-strong);
  outline-offset: -1px;
  background: var(--openbot-bg-control-hover);
}
.question-prompt-options > .ui-questionnaire-choice[data-checked] {
  background: var(--openbot-bg-control-active);
}
.question-prompt-options .ui-item {
  min-height: 48px;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-2) var(--openbot-space-3);
}
.question-prompt-options .ui-item-title, .question-prompt-options .ui-item-description {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
.question-prompt-options .ui-kbd {
  width: 20px;
  min-width: 20px;
  border-color: var(--openbot-border);
  background: var(--openbot-hover);
  color: var(--openbot-text-muted);
}
.question-prompt-options > .ui-questionnaire-choice[data-checked] .ui-kbd {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-secondary);
}
.question-prompt-choice-arrow {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  color: var(--openbot-text-muted);
  opacity: 0;
  transform: translateX(-3px);
  transition: opacity var(--openbot-duration-hover) ease, transform var(--openbot-duration-hover) var(--openbot-ease-out);
}
.question-prompt-choice-arrow svg {
  width: 100%;
  height: 100%;
  stroke-width: var(--openbot-icon-stroke);
}
.question-prompt-options > .ui-questionnaire-choice:is(:hover, :focus-within, [data-checked]) .question-prompt-choice-arrow {
  opacity: 1;
  transform: translateX(0);
}
.question-prompt-custom-row {
  min-width: 0;
  min-height: 44px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-1-5) var(--openbot-space-3);
}
.question-prompt-custom-row[data-selected] {
  background: var(--openbot-bg-control-active);
}
.question-prompt-custom-row:focus-within {
  background: var(--openbot-bg-control-hover);
  box-shadow: none;
}
.question-prompt-pencil {
  width: 20px;
  height: 20px;
  display: grid;
  align-self: center;
  place-items: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-hover);
  color: var(--openbot-text-muted);
}
.question-prompt-pencil svg {
  display: block;
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  transform: translateY(-0.5px);
}
.question-prompt-custom-row:focus-within .question-prompt-pencil {
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-secondary);
}
.question-prompt-custom-row .ui-questionnaire-input {
  width: 100%;
  min-height: 30px;
  border: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.question-prompt-custom-row .ui-questionnaire-input::placeholder {
  color: var(--openbot-text-muted);
}
.question-prompt-custom-row .ui-questionnaire-input:focus {
  outline: 0;
  box-shadow: none;
}
.question-prompt-inline-actions, .question-prompt-sending {
  display: flex;
  align-items: center;
}
.question-prompt-inline-actions {
  gap: var(--openbot-space-2);
}
.question-prompt-sending {
  gap: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  white-space: nowrap;
}
.question-prompt-inline-actions [data-slot="questionnaire-skip"] {
  min-height: 28px;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-pill);
  background: transparent;
  padding-inline: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
}
.question-prompt-inline-actions [data-slot="questionnaire-skip"]:hover:not(:disabled) {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}
.question-prompt-inline-actions [data-slot="questionnaire-skip"]:focus-visible {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-control-hover);
  box-shadow: 0 0 0 1px var(--openbot-border-strong);
  color: var(--openbot-text-primary);
}
.question-prompt-empty {
  min-width: 0;
  display: grid;
  gap: var(--openbot-space-0-5);
  padding: var(--openbot-space-1);
}
.question-prompt-empty strong {
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
}
.question-prompt-empty > span {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.question-prompt-history-entry {
  width: min(540px, 100%);
}
@media (max-width: 520px) {
  .question-prompt-bubble.ui-bubble {
    width: 100%;
  }
  .question-prompt-bubble > .ui-bubble-content {
    padding: var(--openbot-space-3);
  }
  .question-prompt-header {
    gap: var(--openbot-space-2);
  }
  .question-prompt-navigation .ui-questionnaire-progress {
    min-width: 42px;
    padding-inline: 0;
  }
  .question-prompt-sending {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}
@media (prefers-reduced-motion: reduce) {
  .question-prompt-stage {
    transition: none;
  }
}
.approval-card {
  display: flex;
  width: min(540px, 100%);
  margin: var(--openbot-space-3) 0 var(--openbot-space-6);
  flex-direction: column;
  gap: var(--openbot-space-4);
  animation: approval-card-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}
.approval-card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--openbot-space-2);
}
.approval-card-footer > :last-child {
  margin-inline-start: auto;
}
.approval-button {
  border-radius: var(--openbot-radius-pill);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-regular);
}
.approval-card-content {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-3);
}
.approval-card-content:empty {
  display: none;
}
.approval-command-block, .approval-detail-row, .approval-permissions {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface);
}
.approval-command-block code {
  display: block;
  overflow-x: auto;
  padding: var(--openbot-space-3);
  color: var(--openbot-text-secondary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-md);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.approval-cwd {
  border-bottom: 1px solid var(--openbot-border);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  color: var(--openbot-text-muted);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  overflow-wrap: anywhere;
}
.approval-detail-row {
  display: grid;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-3);
}
.approval-detail-label {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.approval-detail-row strong {
  color: var(--openbot-text-secondary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  overflow-wrap: anywhere;
}
.approval-permissions {
  display: grid;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-3);
}
.approval-permissions:empty {
  display: none;
}
.approval-permissions span {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  overflow-wrap: anywhere;
}
.approval-reason {
  margin: calc(-1 * var(--openbot-space-2)) 0 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
  overflow-wrap: anywhere;
}
@keyframes approval-card-in {
  from {
    opacity: 0;
    transform: translateY(5px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (max-width: 800px) {
  .direct-private-label {
    display: none;
  }
  .direct-message-list, .direct-composer-wrap {
    padding-right: 14px;
    padding-left: 14px;
  }
  .direct-message > .ui-message-content {
    max-width: 88%;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto;
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
  }
}
.ui-block-card {
  display: flex;
  max-width: 600px;
  flex-direction: column;
  gap: var(--openbot-space-3);
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-surface);
  transition: border-color var(--openbot-duration-slow) var(--openbot-ease-out);
}
.ui-block-card[data-danger] {
  border-color: var(--openbot-danger-border);
}
.ui-block-card[data-status="expired"], .ui-block-card[data-status="closed"] {
  color: var(--openbot-text-muted);
}
.ui-block-header {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--openbot-space-3);
}
.ui-block-heading {
  min-width: 0;
}
.ui-block-title {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-xl);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-xl);
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.ui-block-subtitle {
  margin: var(--openbot-space-0-5) 0 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.ui-block-status[data-slot="badge"] {
  flex: 0 0 auto;
  gap: var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-pill);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.ui-block-status svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.ui-block-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--openbot-space-3);
}
.ui-block-body:empty {
  display: none;
}
.ui-block-outcome {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
  margin: 0;
  padding: var(--openbot-space-2) var(--openbot-space-3);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-glass-surface);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.ui-block-outcome[data-status="answered"] {
  background: var(--openbot-success-soft);
  color: var(--openbot-success-text);
}
.ui-block-outcome svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
}
.ui-block-outcome-text {
  min-width: 0;
  overflow-wrap: anywhere;
}
.ui-block-footer {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.ui-block-error {
  min-width: 0;
  flex: 1 1 auto;
  margin: 0;
  color: var(--openbot-danger-text);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  overflow-wrap: anywhere;
}
.ui-block-skip {
  margin-inline-start: auto;
}
.ui-block-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--openbot-space-2);
}
.ui-block-actions-auto > button:last-of-type {
  margin-inline-start: auto;
}
.ui-block-confirm-step {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.ui-block-confirm-question {
  padding: 0;
  margin-bottom: var(--openbot-space-2);
  font-weight: var(--openbot-weight-medium);
}
.ui-block-hint, .ui-block-counter, .ui-block-sending {
  margin: 0;
  color: var(--openbot-text-dim);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.ui-block-sending {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
}
.ui-block-fields {
  display: grid;
  grid-template-columns: minmax(64px, max-content) minmax(0, 1fr);
  align-items: center;
  gap: var(--openbot-space-2) var(--openbot-space-3);
  margin: 0;
  font-size: var(--openbot-text-lg);
}
.ui-block-fields dt {
  color: var(--openbot-text-muted);
}
.ui-block-fields dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}
.ui-block-preview {
  position: relative;
  max-height: 6.5em;
  overflow: hidden;
  padding: var(--openbot-space-3);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-lg);
}
.ui-block-preview::after {
  position: absolute;
  inset: auto 0 0;
  height: 2.4em;
  background: linear-gradient(transparent, var(--openbot-bg-surface-raised));
  content: "";
  pointer-events: none;
}
.ui-block-preview-text {
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.ui-block-hold {
  position: relative;
  overflow: hidden;
  user-select: none;
  touch-action: none;
}
.ui-block-hold-fill {
  position: absolute;
  inset: 0;
  background: currentColor;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, currentColor 22%, transparent);
  }
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--openbot-duration-fast) var(--openbot-ease-out);
  pointer-events: none;
}
.ui-block-hold[data-holding] .ui-block-hold-fill {
  transform: scaleX(1);
  transition: transform var(--ui-block-hold-duration) linear;
}
.ui-block-hold-label {
  position: relative;
}
.ui-block-options {
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-card);
}
.ui-block-option {
  position: relative;
  display: grid;
  grid-template-columns: var(--openbot-control-xs) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3);
  cursor: pointer;
  transition: background var(--openbot-duration-fast) var(--openbot-ease-out);
}
.ui-block-option + .ui-block-option {
  border-top: 1px solid var(--openbot-border-strong);
}
.ui-block-option:hover {
  background: var(--openbot-hover);
}
.ui-block-option[data-checked] {
  background: var(--openbot-question-option-soft);
}
.ui-block-option[data-disabled] {
  cursor: default;
}
.ui-block-option[data-disabled]:not([data-checked]) {
  opacity: 0.5;
}
.ui-block-option:focus-within {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: -2px;
}
.ui-block-option .ui-block-option-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: inherit;
}
.ui-block-option-key {
  display: grid;
  width: var(--openbot-control-xs);
  height: var(--openbot-control-xs);
  place-items: center;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-muted);
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
}
.ui-block-option[data-checked] .ui-block-option-key {
  border-color: var(--openbot-question-option);
  background: var(--openbot-question-option);
  color: var(--openbot-text-on-light);
}
.ui-block-option-label {
  min-width: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-medium);
  overflow-wrap: anywhere;
}
.ui-block-option-meta {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-variant-numeric: tabular-nums;
}
.ui-block-quick {
  display: flex;
  max-width: 600px;
  flex-direction: column;
  gap: var(--openbot-space-2);
}
.ui-block-quick-title {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
}
.ui-block-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-2);
}
.ui-block-chip[data-faded] {
  opacity: 0.35;
}
.ui-block-chip[data-chosen] {
  border-color: var(--openbot-accent);
  background: var(--openbot-accent-soft);
  color: var(--openbot-text-primary);
  opacity: 1;
}
.ui-block-quick-text {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.ui-block-quick-text > :first-child {
  flex: 1 1 auto;
  min-width: 0;
}
.ui-block-form-fields {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--openbot-space-3);
}
.ui-block-field {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1-5);
}
.ui-block-field-label {
  padding: 0;
  margin-bottom: var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
}
.ui-block-required {
  margin-inline-start: var(--openbot-space-0-5);
  color: var(--openbot-danger-text);
}
.ui-block-field-error {
  margin: 0;
  color: var(--openbot-danger-text);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.ui-block-segmented {
  display: flex;
  gap: var(--openbot-space-0-5);
  padding: var(--openbot-space-0-5);
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface-raised);
}
.ui-block-segment {
  flex: 1 1 0;
  min-width: 0;
  color: var(--openbot-text-muted);
}
.ui-block-segment[aria-pressed="true"] {
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
}
@media (prefers-reduced-motion: reduce) {
  .ui-block-card, .ui-block-option, .ui-block-hold-fill {
    transition: none;
  }
}
.settings-panel, .browser-panel, .remote-desktop-workspace {
  background: var(--openbot-bg-canvas);
}
.composer-reply-preview {
  border-color: var(--openbot-border);
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-primary);
}
.message-reaction-pill {
  border-color: var(--openbot-border);
  background: transparent;
  color: var(--openbot-text-primary);
}
@media (hover: hover) and (pointer: fine) {
  .message-reaction-pill:not(.message-reaction-pill-readonly):hover {
    background: var(--openbot-hover);
  }
}
.composer, .direct-composer {
  background: var(--openbot-bg-surface);
}
.direct-composer > button:hover:not(:disabled) {
  background: var(--openbot-accent-hover);
}
.remote-desktop-stage, .remote-desktop-viewer {
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-secondary);
}
.remote-desktop-header {
  background: var(--openbot-bg-sidebar);
}
.voice-button:active, .voice-button-active:active {
  transform: scale(0.97);
}
.provider-model-search {
  height: var(--openbot-control-md);
  flex-shrink: 0;
  margin-bottom: var(--ui-menu-padding);
  border-color: transparent;
  border-radius: var(--ui-menu-item-radius);
  background: var(--ui-menu-item-hover);
  padding-inline: var(--ui-menu-inset);
  font-size: var(--openbot-text-md);
}
.provider-model-search:focus-visible {
  border-color: var(--ui-menu-edge);
}
.provider-model-scroll {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.provider-model-group {
  padding: var(--openbot-space-2) var(--ui-menu-inset) var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: 500;
}
.browser-preview-sidebar[hidden] {
  display: none;
}
.browser-preview-header {
  display: flex;
  height: var(--left-header-height, 38px);
  flex: 0 0 auto;
  align-items: center;
  gap: var(--openbot-space-1);
  padding: 0 var(--openbot-space-3);
  color: var(--openbot-text-secondary);
}
.browser-preview-header > span {
  flex: 1;
  font-size: var(--openbot-text-sm);
}
.browser-preview-header > .ui-button, .browser-preview-close {
  border-radius: var(--openbot-radius-sm);
}
.browser-preview-header > .ui-button:focus-visible, .browser-preview-close:focus-visible {
  outline: 1px solid var(--openbot-text-muted);
  outline-offset: 1px;
  box-shadow: none;
}
.browser-preview-sidebar .ui-button:active:not(:disabled):not([data-disabled]) {
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
}
.browser-preview-header > .ui-button > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.browser-preview-list {
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding: var(--openbot-space-2) var(--openbot-space-4) var(--openbot-space-4);
}
.browser-preview-list > .browser-empty-state {
  height: auto;
  justify-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-8) var(--openbot-space-4);
}
.browser-preview-list > .browser-empty-state > svg, .browser-preview-image > svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  color: var(--openbot-text-muted);
  stroke-width: var(--openbot-icon-stroke);
}
.browser-preview-list > .browser-empty-state > svg {
  margin-bottom: var(--openbot-space-1);
}
.browser-preview-list > .browser-empty-state > strong {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  font-weight: 500;
}
.browser-preview-list > .browser-empty-state > .ui-button {
  margin-top: var(--openbot-space-1);
}
.browser-preview-card {
  position: relative;
  margin-bottom: var(--openbot-space-4);
}
.browser-preview-open {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-1);
  color: var(--openbot-text-secondary);
  font-weight: 400;
}
.browser-preview-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-surface);
}
.browser-preview-image img, .browser-preview-loading {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.browser-preview-title {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--openbot-text-sm);
}
.browser-preview-open-label {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  line-height: 1;
  pointer-events: none;
  opacity: 0;
}
.browser-preview-open-label > svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  stroke-width: var(--openbot-icon-stroke);
}
.browser-preview-open:hover .browser-preview-open-label {
  opacity: 1;
}
.browser-preview-close {
  position: absolute;
  top: var(--openbot-space-2);
  right: var(--openbot-space-2);
  opacity: 0;
}
.browser-preview-close > svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  stroke-width: var(--openbot-icon-stroke);
}
.browser-preview-card:hover .browser-preview-close, .browser-preview-card:focus-within .browser-preview-close {
  opacity: 1;
}
.browser-secret-card {
  --otp-slot-border: var(--openbot-glass-border);
  --otp-slot-background: var(--openbot-glass-surface);
  --otp-slot-filled-background: var(--openbot-glass-surface-hover);
  --otp-slot-shadow: inset 0 1px 0 var(--openbot-glass-highlight);
  display: grid;
  gap: var(--openbot-space-4);
  color: var(--openbot-text-primary);
}
.browser-secret-card[data-variant="island"] {
  box-sizing: border-box;
  width: min(100%, 420px);
  min-width: 0;
  padding: var(--openbot-space-4);
  border: 1px solid var(--openbot-glass-border);
  border-radius: var(--openbot-radius-xl);
  background: var(--openbot-bg-glass);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-bg-glass), var(--openbot-bg-control) 60%);
  }
  box-shadow: var(--openbot-shadow-raised);
  backdrop-filter: blur(32px) saturate(1.4);
}
.browser-secret-header {
  display: flex;
  align-items: flex-start;
  gap: var(--openbot-space-3);
}
.browser-secret-close {
  flex: none;
  margin-left: auto;
}
.browser-secret-icon {
  display: grid;
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  flex: none;
  place-items: center;
  border: 1px solid var(--openbot-glass-border);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-glass-surface);
  box-shadow: inset 0 1px 0 var(--openbot-glass-highlight);
  color: var(--openbot-text-primary);
}
.browser-secret-glyph {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.browser-secret-heading {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-0-5);
}
.browser-secret-heading h2 {
  margin: 0;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
}
.browser-secret-heading p {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.browser-secret-origin {
  color: var(--openbot-text-secondary);
  font-weight: var(--openbot-weight-medium);
}
.browser-secret-code, .browser-secret-password {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-1-5);
}
:where(.browser-secret-password) > input {
  border-color: var(--openbot-glass-border);
  background: var(--openbot-glass-surface);
}
.browser-secret-error {
  margin: 0;
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
}
.browser-secret-footer {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
  padding-top: var(--openbot-space-3);
  border-top: 1px solid var(--openbot-glass-border);
}
.browser-secret-private {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.browser-secret-glyph-sm {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: none;
}
.browser-secret-card .browser-takeover-preview-viewport {
  width: 100%;
  max-height: 280px;
}
.browser-secret-card .browser-takeover-preview-viewport img {
  min-height: 0;
  object-fit: contain;
}
html:has(.browser-dock-surface), body:has(.browser-dock-surface), #root:has(.browser-dock-surface) {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
}
.browser-dock-surface {
  position: relative;
  width: 100%;
  height: 100%;
  background: transparent;
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
}
.browser-dock {
  position: absolute;
  bottom: var(--openbot-space-4);
  left: 50%;
  display: flex;
  width: min(640px, calc(100% - 2 * var(--openbot-space-6)));
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-2);
  isolation: isolate;
  translate: -50% 0;
}
.browser-dock-glass {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-0-5);
  border: 1px solid var(--openbot-glass-border);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-glass);
  box-shadow: var(--openbot-shadow-raised);
  backdrop-filter: blur(16px);
  color: var(--openbot-text-secondary);
}
.browser-dock-composer svg, .browser-dock-island-activity svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.browser-dock-island {
  position: relative;
  z-index: 4;
  box-sizing: border-box;
  max-width: 100%;
}
.browser-dock-island[data-budding] {
  z-index: 1;
}
.browser-dock-island:is([data-mode="reply"], [data-mode="secret"]) {
  width: 100%;
  border-radius: var(--openbot-radius-lg);
}
.browser-dock-island[data-mode="secret"] {
  width: min(100%, 420px);
  border-radius: var(--openbot-radius-xl);
  background: var(--openbot-bg-glass);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-bg-glass), var(--openbot-bg-control) 60%);
  }
  backdrop-filter: blur(32px) saturate(1.4);
}
.browser-dock-island-face {
  box-sizing: border-box;
  min-width: 0;
  flex: 1;
}
.browser-dock-island-face > .browser-secret-card {
  width: 100%;
  border: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
}
.browser-dock-island-activity {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  padding: var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-2);
  font-size: var(--openbot-text-sm);
  white-space: nowrap;
}
.browser-dock-island-leaving {
  pointer-events: none;
}
.browser-dock-island.browser-dock-island-ghost {
  position: absolute;
  z-index: 1;
  translate: -50% 0;
  pointer-events: none;
}
.browser-dock-spin {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: none;
  color: var(--openbot-text-muted);
  animation: ui-spin 1s linear infinite;
}
.browser-dock-status {
  display: inline-flex;
  min-width: 0;
  overflow: hidden;
  align-items: center;
  gap: var(--openbot-space-1-5);
}
.browser-dock-status > span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.browser-dock-handoff {
  flex: none;
  margin-left: auto;
  border-radius: var(--openbot-radius-pill);
}
.browser-dock-island-reply {
  display: grid;
  gap: var(--openbot-space-1-5);
  padding: var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-3) var(--openbot-space-3);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
}
.browser-dock-reply-header {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.browser-dock-reply-header > strong {
  font-weight: var(--openbot-weight-medium);
}
.browser-dock-reply-close {
  margin-left: auto;
}
.browser-dock-reply-body {
  max-height: 160px;
  padding-right: var(--openbot-space-1);
  overflow: auto;
  line-height: var(--openbot-leading-lg);
}
.browser-dock-reply-actions {
  display: flex;
  justify-content: flex-end;
}
.browser-dock-stack {
  display: flex;
  width: 100%;
  flex-direction: column;
}
.agent-queue-panel[data-variant="floating"] {
  margin-inline: var(--openbot-space-6);
  border-color: var(--openbot-glass-border);
  background: var(--openbot-bg-glass);
  backdrop-filter: blur(16px);
  animation: none;
}
.browser-dock-stack > .agent-queue-slot {
  transition-duration: var(--browser-dock-island-duration);
  transition-timing-function: var(--browser-dock-island-easing);
}
.browser-dock-composer {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-2);
}
.browser-dock-avatar {
  width: 20px;
  height: 20px;
  flex: none;
}
.browser-dock-editor {
  min-width: 0;
  flex: 1;
  color: var(--openbot-text-primary);
}
.agent-queue-panel[data-variant="floating"] .agent-queue-item[data-arriving] .agent-queue-message {
  visibility: hidden;
}
.browser-dock-morph {
  position: absolute;
  z-index: 1;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid var(--openbot-glass-border);
  background: var(--openbot-bg-glass);
  box-shadow: var(--openbot-shadow-raised);
  backdrop-filter: blur(16px);
  pointer-events: none;
}
.browser-dock-morph > .browser-dock-glass {
  position: absolute;
  top: 50%;
  left: 50%;
  border-color: transparent;
  animation: none;
  background: none;
  backdrop-filter: none;
  box-shadow: none;
  translate: -50% -50%;
}
.browser-dock-morph-text {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  overflow: hidden;
  color: var(--openbot-text-primary);
  pointer-events: none;
  text-overflow: ellipsis;
  transform-origin: left center;
  white-space: nowrap;
  will-change: transform, opacity;
}
.agent-queue-panel[data-variant="floating"] .agent-queue-actions {
  gap: var(--openbot-space-1);
}
.agent-queue-panel[data-variant="floating"] :is(.agent-queue-steer, .agent-queue-icon-button) {
  box-sizing: border-box;
  height: 24px;
  border: 1px solid var(--openbot-glass-border);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-glass-surface);
  box-shadow: inset 0 1px 0 var(--openbot-glass-highlight);
  backdrop-filter: blur(8px);
  color: var(--openbot-text-secondary);
  transition: background var(--openbot-duration-hover) ease, border-color var(--openbot-duration-hover) ease, box-shadow var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease, opacity var(--openbot-duration-hover) ease;
}
.agent-queue-panel[data-variant="floating"] .agent-queue-steer {
  padding: 0 var(--openbot-space-2) 0 var(--openbot-space-1-5);
  font-size: var(--openbot-text-sm);
}
.agent-queue-panel[data-variant="floating"] .agent-queue-icon-button {
  width: 24px;
}
.agent-queue-panel[data-variant="floating"] :is(.agent-queue-steer, .agent-queue-icon-button) svg {
  width: 14px;
  height: 14px;
}
.agent-queue-panel[data-variant="floating"] :is(.agent-queue-steer, .agent-queue-icon-button):is(:hover:not(:disabled), :focus-visible) {
  background: var(--openbot-glass-surface-hover);
  color: var(--openbot-text-primary);
}
.agent-queue-panel[data-variant="floating"] .agent-queue-icon-button.agent-queue-delete:is(:hover:not(:disabled), :focus-visible) {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
}
.agent-queue-panel[data-variant="floating"] :is(.agent-queue-steer, .agent-queue-icon-button):focus-visible {
  box-shadow: inset 0 1px 0 var(--openbot-glass-highlight), 0 0 0 2px var(--openbot-border-focus);
}
@media (hover: hover) {
  .agent-queue-panel[data-variant="floating"] .agent-queue-item:not(:hover, :focus-within) :is(.agent-queue-steer, .agent-queue-icon-button):not(:focus-visible) {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    color: var(--openbot-text-muted);
  }
}
@media (prefers-reduced-motion: reduce) {
  .browser-dock-stack > .agent-queue-slot {
    transition: none;
  }
}
body:has(.browser-full-view) .app-frame {
  isolation: isolate;
}
.browser-expanded-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--openbot-layer-dropdown) - 2);
}
.browser-full-view {
  --browser-full-edge: var(--openbot-space-1);
  --browser-full-top-height: 38px;
  position: fixed;
  z-index: calc(var(--openbot-layer-dropdown) - 1);
  inset: 0;
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  padding: 0 var(--browser-full-edge) var(--browser-full-edge);
  background: var(--openbot-bg-canvas);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-bg-canvas) 50%, var(--openbot-bg-notch));
  }
  color: var(--openbot-text-primary);
}
.browser-full-view[hidden], .browser-expanded-backdrop[hidden] {
  display: none;
}
.browser-full-top {
  display: flex;
  height: var(--browser-full-top-height);
  min-width: 0;
  flex: none;
  align-items: center;
  gap: var(--openbot-space-1);
  padding-inline: var(--openbot-space-1) 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.browser-full-top svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.browser-full-top-spacer {
  flex: 1;
}
.browser-full-view-mac-controls .browser-full-top {
  padding-inline-start: calc(82px - var(--browser-full-edge));
}
.browser-full-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-canvas);
}
.browser-full-browser {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}
.browser-full-alert {
  margin: var(--openbot-space-2) var(--openbot-space-2) 0;
}
.browser-full-surface {
  position: relative;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}
.browser-full-surface[data-live] {
  display: grid;
  place-items: center;
  container-type: size;
}
.browser-full-surface[data-live] .browser-live-view {
  position: relative;
  inset: auto;
  width: min( calc(100cqw - 2 * var(--openbot-space-3)), calc((100cqh - 2 * var(--openbot-space-3)) * var(--browser-frame-width, 16) / var(--browser-frame-height, 10)) );
  height: auto;
  aspect-ratio: var(--browser-frame-width, 16) / var(--browser-frame-height, 10);
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface);
}
.browser-full-owner-avatar {
  width: 16px;
  height: 16px;
  flex: none;
}
.browser-full-owner-acting {
  border-radius: var(--openbot-radius-pill);
  box-shadow: 0 0 0 1.5px var(--openbot-accent);
}
.browser-full-owner-globe {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: none;
  color: var(--openbot-text-muted);
}
.browser-full-chips {
  --browser-full-fade: calc(var(--openbot-space-8) * 2);
  position: relative;
  min-width: 0;
  flex: 0 1 auto;
  overflow-x: auto;
  padding: var(--openbot-space-0-5);
  scrollbar-width: none;
}
.browser-full-chips[data-fade-start] {
  mask-image: linear-gradient(to right, transparent, var(--openbot-text-primary) var(--browser-full-fade));
}
.browser-full-chips[data-fade-end] {
  mask-image: linear-gradient(to right, var(--openbot-text-primary) calc(100% - var(--browser-full-fade)), transparent);
}
.browser-full-chips[data-fade-start][data-fade-end] {
  mask-image: linear-gradient( to right, transparent, var(--openbot-text-primary) var(--browser-full-fade), var(--openbot-text-primary) calc(100% - var(--browser-full-fade)), transparent );
}
.browser-full-chip {
  min-width: 120px;
  max-width: 200px;
  flex: 0 1 200px;
  user-select: none;
  transition: flex-basis var(--openbot-duration-normal) var(--openbot-ease-out);
}
.browser-full-chips[data-frozen] .browser-full-chip {
  flex: 0 0 var(--browser-full-chip-frozen);
}
.browser-full-chips[data-dragging] {
  cursor: grabbing;
}
.browser-full-chips[data-dragging] .browser-full-chip {
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.browser-full-chips[data-dragging] .browser-full-chip[data-dragging] {
  z-index: 1;
  background: var(--openbot-bg-surface-raised);
  box-shadow: inset 0 0 0 1px var(--openbot-border-strong), var(--openbot-shadow-raised);
  transition: none;
}
.browser-full-chips[data-dragging] .browser-full-chip::before {
  opacity: 0;
}
.browser-full-hidden-tabs {
  max-width: 320px;
}
@media (prefers-reduced-motion: reduce) {
  .browser-full-chip, .browser-full-chips[data-dragging] .browser-full-chip {
    transition: none;
  }
}
.browser-full-spin {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: none;
  color: var(--openbot-text-muted);
  animation: ui-spin 1s linear infinite;
}
.browser-full-chip .side-panel-tab-select {
  min-width: 0;
  flex: 1;
  justify-content: flex-start;
}
.browser-full-chip .side-panel-tab-label {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-align: start;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser-full-address-row {
  display: flex;
  height: 44px;
  flex: none;
  align-items: center;
  gap: var(--openbot-space-0-5);
  padding-inline: var(--openbot-space-2);
  border-bottom: 1px solid var(--openbot-border);
  color: var(--openbot-text-secondary);
}
.browser-full-address-row svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.browser-full-capsule {
  position: relative;
  display: flex;
  min-width: 0;
  height: var(--openbot-control-md);
  flex: 1;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-inline: var(--openbot-space-1);
  padding-inline: var(--openbot-space-2) var(--openbot-space-1);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  transition: background-color var(--openbot-duration-normal) var(--openbot-ease-out), box-shadow var(--openbot-duration-normal) var(--openbot-ease-out);
}
.browser-full-capsule:focus-within {
  background: var(--openbot-bg-control-active);
  box-shadow: inset 0 0 0 1px var(--openbot-border-grouped);
}
.browser-full-capsule .browser-full-capsule-input {
  height: 100%;
  min-width: 0;
  flex: 1;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
}
.browser-full-capsule .browser-full-capsule-input:focus-visible {
  outline: none;
}
.browser-full-capsule .browser-full-capsule-input::selection {
  background: var(--openbot-accent-strong);
}
.browser-full-capsule-agent {
  display: grid;
  flex: none;
  place-items: center;
}
.browser-full-suggest {
  position: absolute;
  z-index: var(--openbot-layer-dropdown);
  top: calc(100% + var(--openbot-space-1));
  right: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  padding: var(--openbot-space-1);
  border-radius: var(--openbot-radius-lg);
}
.browser-full-suggest-row {
  display: flex;
  width: 100%;
  min-width: 0;
  height: var(--openbot-control-md);
  align-items: center;
  gap: var(--openbot-space-2);
  padding-inline: var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  text-align: start;
  cursor: default;
}
.browser-full-suggest-row:hover {
  background: var(--openbot-bg-control-hover);
}
.browser-full-suggest-row[aria-selected="true"] {
  background: var(--openbot-bg-control-active);
}
.browser-full-suggest-icon {
  display: grid;
  width: var(--openbot-icon-sm);
  flex: none;
  place-items: center;
  color: var(--openbot-text-muted);
}
.browser-full-suggest-title {
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser-full-suggest-detail {
  min-width: 0;
  flex: 0 100 auto;
  overflow: hidden;
  color: var(--openbot-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser-full-suggest-switch {
  flex: none;
  margin-inline-start: auto;
  padding: 0 var(--openbot-space-2);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-pill);
  color: var(--openbot-text-muted);
}
.browser-full-switch {
  min-width: 0;
  max-width: 100%;
  justify-content: flex-start;
  gap: var(--openbot-space-2);
}
.browser-full-switch-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser-full-switch-count {
  display: grid;
  min-width: 18px;
  height: 18px;
  flex: none;
  place-items: center;
  padding-inline: var(--openbot-space-1);
  border: 1.5px solid currentcolor;
  border-radius: var(--openbot-radius-sm);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.browser-full-switch-menu {
  display: flex;
  width: min(360px, calc(100vw - 2 * var(--openbot-space-3)));
  max-height: min(480px, 70dvh);
  flex-direction: column;
  padding: var(--openbot-space-1);
}
.browser-full-switch-list {
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}
.browser-full-switch-row {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-0-5);
}
.browser-full-switch-select {
  min-width: 0;
  height: auto;
  flex: 1;
  padding-block: var(--openbot-space-1-5);
}
.browser-full-switch-select[aria-current="true"] {
  background: var(--openbot-bg-control-active);
}
.browser-full-switch-close svg, .browser-full-switch-actions svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.browser-full-switch-text {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.browser-full-switch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-1);
  margin-top: var(--openbot-space-1);
  padding-top: var(--openbot-space-1);
  border-top: 1px solid var(--openbot-border);
}
@media (max-width: 720px) {
  .browser-full-surface[data-live] {
    place-items: start center;
    padding-top: var(--openbot-space-3);
  }
}
.channel-avatar {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  min-width: var(--openbot-space-8);
  height: var(--openbot-space-8);
  color: var(--openbot-text-muted);
}
.channel-avatar .agent-avatar {
  width: var(--openbot-space-8);
  height: var(--openbot-space-8);
  flex-shrink: 0;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface);
}
.channel-avatar:not(.channel-avatar-cluster) .agent-avatar + .agent-avatar {
  margin-left: calc(-1 * var(--openbot-space-4));
}
.channel-avatar-cluster {
  --channel-avatar-size: 36px;
  --channel-avatar-pitch: calc(var(--channel-avatar-size) * 0.44);
  --channel-avatar-face: calc(var(--channel-avatar-size) * 0.48);
  display: grid;
  grid-template: repeat(2, var(--channel-avatar-pitch)) / repeat(2, var(--channel-avatar-pitch));
  place-content: center;
  place-items: center;
  width: var(--channel-avatar-size);
  min-width: var(--channel-avatar-size);
  height: var(--channel-avatar-size);
}
.channel-avatar-cluster .agent-avatar {
  --agent-avatar-optical-offset: calc(var(--channel-avatar-face) * -0.14);
  width: var(--channel-avatar-face);
  height: var(--channel-avatar-face);
  background: none;
}
.channel-avatar-cluster > :only-child {
  --channel-avatar-face: var(--channel-avatar-size);
  grid-area: 1 / 1 / 3 / 3;
}
.channel-avatar-cluster > :first-child:nth-last-child(2), .channel-avatar-cluster > :first-child:nth-last-child(2) ~ * {
  grid-row: 1 / span 2;
}
.channel-avatar-cluster > :first-child:nth-last-child(3) ~ .agent-avatar:last-child {
  grid-column: 1 / span 2;
}
.agent-row.sidebar-pinned-row .channel-avatar-cluster {
  --channel-avatar-size: 48px;
}
.agent-row.sidebar-pinned-row .channel-avatar-cluster .agent-avatar {
  width: var(--channel-avatar-face);
  height: var(--channel-avatar-face);
}
.channel-avatar-count {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: 1;
  font-weight: var(--openbot-weight-semibold);
  font-variant-numeric: tabular-nums;
}
.channel-dialog-header, .channel-editor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.channel-dialog-header h2 {
  margin: 0;
  font-size: var(--openbot-text-xl);
  line-height: var(--openbot-leading-xl);
  font-weight: var(--openbot-weight-semibold);
}
.channel-empty {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-muted);
}
.channel-empty h2 {
  font-size: var(--openbot-text-2xl);
  color: var(--openbot-text-primary);
  margin: var(--openbot-space-2) 0 0;
}
.channel-empty p {
  margin: 0;
}
.channel-empty .channel-empty-title {
  color: var(--openbot-text-primary);
}
.channel-editor {
  display: block;
}
.channel-create-form {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-3);
}
.channel-members {
  display: flex;
  margin-top: var(--settings-panel-section-gap);
  flex-direction: column;
  gap: var(--openbot-space-1);
  min-width: 0;
}
.channel-members-title, .channel-members-note {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.channel-members-title {
  font-weight: var(--openbot-weight-regular);
}
.channel-member-list:is(.ui-item-group) {
  border: 0;
  overflow: visible;
  background: transparent;
}
.channel-member-list > :not(:first-child) {
  border-top: 0;
}
.channel-member:is(.ui-item), .channel-member-add {
  min-height: var(--openbot-control-lg);
  gap: var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
  padding-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-2);
}
.channel-member:hover, .channel-member-add:hover:not(:disabled) {
  background: var(--openbot-hover);
}
.channel-member .agent-avatar, .channel-member-menu .agent-avatar {
  --agent-avatar-optical-offset: -3.25px;
  width: var(--openbot-space-6);
  height: var(--openbot-space-6);
}
.channel-member .ui-item-title {
  font-weight: var(--openbot-weight-regular);
}
.channel-member-add {
  width: 100%;
  justify-content: flex-start;
  height: auto;
  line-height: var(--openbot-leading-md);
  text-align: left;
  cursor: pointer;
}
.channel-member-add > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  margin-inline: calc((var(--openbot-space-6) - var(--openbot-icon-md)) / 2);
}
.channel-member-add:disabled {
  cursor: default;
  opacity: 0.42;
}
.channel-member-menu {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  min-width: 220px;
  max-height: min( calc(var(--openbot-space-8) * 11), calc(100dvh - var(--openbot-space-4)), var(--kb-popper-content-available-height, 100dvh) );
  margin-inline-start: calc(var(--openbot-space-1) * -1);
}
.channel-member-menu .channel-member-search {
  flex: none;
}
.channel-member-menu .channel-member-search input::-webkit-search-cancel-button {
  display: none;
}
.channel-member-options {
  min-height: 0;
  overflow-y: auto;
  outline: 0;
  scrollbar-width: thin;
}
.channel-member-option {
  display: flex;
  min-height: var(--openbot-control-md);
  align-items: center;
  gap: var(--openbot-space-2);
  border-radius: var(--ui-menu-item-radius);
  outline: 0;
  padding: var(--openbot-space-1-5) var(--ui-menu-inset);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
  white-space: nowrap;
  cursor: default;
  transition: background-color var(--openbot-duration-hover) var(--openbot-ease-out);
}
.channel-member-option:is(:hover, :focus-visible) {
  background: var(--ui-menu-item-hover);
}
.channel-member-options:has(:focus-visible) .channel-member-option:hover:not(:focus-visible) {
  background: transparent;
}
.channel-member-menu-empty {
  margin: 0;
  padding: var(--openbot-space-3) var(--ui-menu-inset);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
@media (hover: hover) and (pointer: fine) {
  .channel-member-remove, .channel-lead-toggle[aria-pressed="false"] {
    opacity: 0;
    transition: opacity var(--openbot-duration-hover) var(--openbot-ease-out);
  }
  .channel-member:hover :is(.channel-member-remove, .channel-lead-toggle), :is(.channel-member-remove, .channel-lead-toggle):focus-visible {
    opacity: 1;
  }
}
.channel-picker {
  border: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.channel-picker legend {
  margin-bottom: var(--openbot-space-2);
}
.channel-picker-list {
  margin-top: var(--openbot-space-2);
  max-height: calc(var(--openbot-space-8) * 7);
  overflow: auto;
  scrollbar-width: none;
}
.channel-picker-list::-webkit-scrollbar {
  display: none;
}
.channel-picker-entry {
  padding: var(--openbot-space-2) 0;
  cursor: pointer;
}
.channel-editor-footer {
  padding-top: var(--openbot-space-3);
  border-top: 1px solid var(--openbot-border);
}
.channel-search-icon {
  width: var(--openbot-space-4);
  height: var(--openbot-space-4);
  color: var(--openbot-text-muted);
  flex-shrink: 0;
}
.channel-picker-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-6) var(--openbot-space-3);
  text-align: center;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.channel-picker-empty > svg {
  width: var(--openbot-space-6);
  height: var(--openbot-space-6);
  margin-bottom: var(--openbot-space-1);
}
.channel-picker-empty p {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
}
.channel-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--openbot-layer-dialog);
  display: grid;
  place-items: center;
  padding: var(--openbot-space-6);
}
.channel-create-dialog {
  --channel-dialog-inset: var(--openbot-space-4);
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(440px, 100%);
  max-height: calc(100dvh - 48px);
  overflow: hidden;
  outline: 0;
  background: var(--openbot-bg-surface);
}
.channel-create-dialog .channel-dialog-header {
  padding: var(--channel-dialog-inset);
}
.channel-create-dialog .channel-dialog-header .ui-button svg {
  width: var(--openbot-space-4);
  height: var(--openbot-space-4);
}
.channel-create-form {
  min-height: 0;
  gap: var(--openbot-space-4);
}
.channel-create-form > .ui-field, .channel-create-form > .ui-alert {
  margin-inline: var(--channel-dialog-inset);
}
.channel-create-form .channel-picker {
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: 0;
}
.channel-create-form .channel-picker legend {
  margin-inline: var(--channel-dialog-inset);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
}
.channel-create-form .channel-member-search {
  height: var(--openbot-control-lg);
  margin-inline: var(--channel-dialog-inset);
  padding-inline: var(--openbot-space-3);
  gap: var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
}
.channel-create-form .channel-member-search input::-webkit-search-cancel-button {
  display: none;
}
.channel-create-form .channel-picker-list {
  min-height: 0;
  max-height: calc(var(--openbot-space-8) * 11);
  margin-top: var(--openbot-space-2);
  padding: 0;
}
.channel-create-form .channel-picker-body {
  display: flex;
  flex-direction: column;
}
.channel-create-form .channel-picker-entry {
  display: block;
  padding: var(--openbot-space-2) var(--channel-dialog-inset);
  border-radius: 0;
  transition: background-color var(--openbot-duration-normal) var(--openbot-ease-out);
}
.channel-create-form .channel-picker-entry .channel-member:is(.ui-item) {
  min-height: 0;
  padding: 0;
  background: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .channel-create-form .channel-picker-entry {
    transition: none;
  }
}
.channel-create-form .channel-picker-entry:hover {
  background: var(--openbot-bg-control-hover);
}
.channel-create-form .channel-picker-entry:has(.ui-checkbox-input:checked) {
  background: var(--openbot-accent-soft);
}
.channel-create-form .channel-picker-entry .ui-item-content {
  display: flex;
  align-items: baseline;
  gap: var(--openbot-space-2);
  overflow: hidden;
}
.channel-create-form .channel-picker-entry .ui-item-title {
  flex: 0 0 auto;
  font-weight: var(--openbot-weight-regular);
}
.channel-create-form .channel-picker-entry .ui-item-description {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.channel-create-form .channel-editor-footer {
  justify-content: flex-end;
  padding: var(--channel-dialog-inset);
}
.channel-title .channel-avatar {
  min-width: 18px;
  height: 18px;
}
.channel-title .agent-avatar {
  --agent-avatar-optical-offset: -2px;
  width: 18px;
  height: 18px;
}
.channel-title .agent-avatar + .agent-avatar {
  margin-left: -8px;
}
.channel-header-copy {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: var(--openbot-space-2);
}
.channel-header-copy h1 {
  min-width: 0;
  overflow: hidden;
  flex: 0 1 auto;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.channel-header-title {
  min-width: 0;
  overflow: hidden;
  flex: 1 1 auto;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.channel-preview-notice {
  flex-shrink: 0;
  margin: 0;
  padding: var(--openbot-space-4);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-align: center;
}
.agent-activity-content.channel-activity-content {
  padding-left: var(--openbot-space-0-5);
}
.channel-activity-faces {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}
.channel-activity-faces .agent-activity-avatar + .agent-activity-avatar {
  margin-left: calc(-1 * var(--openbot-space-2));
}
.channel-paused-tasks {
  position: relative;
  max-height: 35dvh;
  overflow-y: auto;
  margin: calc(-1 * var(--openbot-space-6)) var(--openbot-space-3) calc(-1 * var(--openbot-radius-lg));
  border-radius: var(--openbot-radius-lg) var(--openbot-radius-lg) var(--openbot-radius-md) var(--openbot-radius-md);
  background: var(--openbot-accent-strong);
  box-shadow: 0 0 0 1px var(--openbot-accent-soft);
  -webkit-backdrop-filter: blur(var(--openbot-space-3));
  backdrop-filter: blur(var(--openbot-space-3));
  padding-bottom: var(--openbot-radius-lg);
  color: var(--openbot-accent-text);
}
.awaiting-replies + .channel-paused-tasks {
  z-index: 10;
  margin-top: 0;
}
.channel-paused-task {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-2);
  align-items: center;
  justify-content: space-between;
  padding: var(--openbot-space-2) var(--openbot-space-3);
}
.channel-paused-task + .channel-paused-task {
  border-top: 1px solid var(--openbot-accent-soft);
}
.channel-paused-task-reason {
  min-width: 0;
  flex: 1 1 24ch;
  margin: 0;
  overflow-wrap: anywhere;
  font-size: var(--openbot-text-sm);
}
.channel-paused-task-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-2);
  align-items: center;
}
.channel-paused-task-actions .ui-button {
  background: var(--openbot-surface-light);
  color: var(--openbot-text-on-light);
}
.channel-paused-task-actions .ui-button:hover {
  background: var(--openbot-surface-light);
  box-shadow: 0 0 0 1px var(--openbot-text-dim-on-light);
}
.diagram-view {
  display: flex;
  height: 100%;
  min-width: 0;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  background: var(--openbot-bg-canvas);
}
.diagram-flows-notice {
  align-items: center;
  justify-content: center;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
}
.diagram-view .agent-avatar {
  grid-template: 100% / 100%;
}
.diagram-view-header {
  display: flex;
  height: 38px;
  flex: none;
  align-items: center;
  gap: var(--openbot-space-1-5);
  border-bottom: 1px solid var(--openbot-border);
  padding: 0 var(--openbot-space-3);
}
.diagram-view .diagram-view-header .header-panel-toggle[aria-expanded="true"]:not(:hover) {
  border-color: transparent;
  background: transparent;
  color: var(--openbot-text-muted);
}
.diagram-view-icon {
  display: grid;
  width: 18px;
  height: 18px;
  flex: none;
  place-items: center;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
}
.diagram-view-avatar.agent-avatar {
  width: 18px;
  height: 18px;
}
.diagram-view-icon svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.diagram-view-title {
  max-width: 32ch;
  flex: none;
  overflow: hidden;
  margin: 0;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-regular);
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diagram-view-actions {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
  margin-left: auto;
}
.diagram-view-body {
  --diagram-inspector-width: 340px;
  position: relative;
  display: flex;
  min-height: 0;
  flex: 1;
  transition: padding-right var(--panel-resize-duration, var(--openbot-duration-overlay)) cubic-bezier(0.22, 1, 0.36, 1);
}
.diagram-view-body[data-inspector="open"] {
  padding-right: var(--diagram-inspector-width);
}
.diagram-view-chat {
  position: absolute;
  bottom: var(--openbot-space-4);
  left: var(--openbot-space-4);
  z-index: 2;
  width: min(360px, calc(100% - var(--openbot-space-8)));
  pointer-events: none;
}
.diagram-board {
  position: relative;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}
.diagram-board-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  outline: 0;
  background-color: var(--openbot-bg-canvas);
  background-image: radial-gradient(circle at 1px 1px, var(--openbot-border-strong) 1px, transparent 0);
  background-position: var(--diagram-grid-x) var(--diagram-grid-y);
  background-size: var(--diagram-grid-size) var(--diagram-grid-size);
  cursor: grab;
  touch-action: none;
}
.diagram-board-viewport:focus-visible {
  box-shadow: inset var(--openbot-focus-ring);
}
.diagram-board-viewport:is([data-panning], [data-dragging]) {
  cursor: grabbing;
}
.diagram-board-world {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
}
.diagram-board-world[data-settling] {
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.diagram-board-empty {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  max-width: 280px;
  gap: var(--openbot-space-1);
  translate: -50% -50%;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  pointer-events: none;
  text-align: center;
}
.diagram-board-empty strong {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
}
.diagram-board-empty p {
  margin: 0;
}
.diagram-board-menu-area {
  display: contents;
}
.diagram-canvas-menu-avatar.agent-avatar {
  width: 20px;
  height: 20px;
  grid-template: 100% / 100%;
}
.ui-action-menu.diagram-canvas-agents:not([data-menu-layout="grid"]) [role="menuitem"] {
  height: auto;
  gap: var(--openbot-space-3);
  padding-block: var(--openbot-space-2);
}
.diagram-canvas-menu-agent {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-0-5);
  line-height: var(--openbot-leading-md);
}
.diagram-canvas-menu-agent small {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diagram-new-agent {
  position: absolute;
  top: clamp(var(--openbot-space-2), var(--diagram-new-agent-y), calc(100% - 196px));
  left: clamp(var(--openbot-space-2), var(--diagram-new-agent-x), calc(100% - 288px));
  z-index: 3;
  display: grid;
  width: 280px;
  gap: var(--openbot-space-2);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-overlay);
  box-shadow: 0 0 0 1px var(--openbot-border), var(--openbot-shadow-overlay);
  backdrop-filter: blur(16px);
  padding: var(--openbot-space-3);
  font-size: var(--openbot-text-sm);
}
.diagram-new-agent-header {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  font-weight: var(--openbot-weight-medium);
  user-select: none;
}
.diagram-new-agent-avatar.agent-avatar {
  width: 24px;
  height: 24px;
  grid-template: 100% / 100%;
}
.diagram-new-agent .provider-model-trigger-field {
  height: var(--openbot-control-sm);
  min-height: var(--openbot-control-sm);
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
  box-shadow: none;
  padding-inline: var(--openbot-space-2);
  font-size: var(--openbot-text-sm);
}
.diagram-new-agent .provider-model-trigger-field:hover:not(:disabled), .diagram-new-agent .provider-model-trigger-field[aria-expanded="true"] {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-control);
}
.diagram-new-agent .provider-model-trigger-field:focus-visible {
  border-color: var(--openbot-border-focus);
  outline: none;
  box-shadow: var(--openbot-focus-ring);
}
.diagram-new-agent-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-1);
}
.diagram-board-zoom {
  position: absolute;
  right: var(--openbot-space-4);
  bottom: var(--openbot-space-4);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1-5);
}
.diagram-board-zoom .ui-button {
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-overlay);
  box-shadow: var(--openbot-shadow-raised);
}
.diagram-board-zoom .ui-button svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  color: var(--openbot-text-muted);
}
.diagram-board-zoom .ui-button:hover svg {
  color: var(--openbot-text-primary);
}
.diagram-board-status {
  position: absolute;
  top: calc(var(--openbot-space-4) + var(--openbot-control-sm) + var(--openbot-space-2));
  left: 50%;
  z-index: 2;
  max-width: min(420px, calc(100% - 320px));
  margin: 0;
  translate: -50% 0;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-overlay);
  box-shadow: 0 0 0 1px var(--openbot-border);
  padding: var(--openbot-space-1-5) var(--openbot-space-3);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  pointer-events: none;
  text-align: center;
}
.diagram-board-status:empty {
  display: none;
}
.diagram-board-status[data-tone="danger"] {
  box-shadow: 0 0 0 1px var(--openbot-danger-border);
  color: var(--openbot-danger-text);
}
.diagram-edges {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: visible;
  pointer-events: none;
}
.diagram-edge path, .diagram-edge-draft {
  fill: none;
}
.diagram-edge-hit {
  stroke: transparent;
  stroke-width: 16px;
  pointer-events: stroke;
  cursor: pointer;
}
.diagram-edge-line {
  stroke: var(--openbot-border-strong);
  stroke-width: 2px;
  stroke-linecap: round;
}
.diagram-edge[data-state="delivered"] .diagram-edge-line {
  stroke: var(--diagram-routine-color, var(--openbot-accent));
}
.diagram-edge[data-state="running"] .diagram-edge-line {
  stroke: var(--diagram-routine-color, var(--openbot-accent));
  stroke-dasharray: 6 6;
  animation: diagram-edge-flow 0.6s linear infinite;
}
.diagram-edge[data-routine-color][data-state="idle"] .diagram-edge-line {
  stroke: var(--diagram-routine-color);
  opacity: 0.6;
}
.diagram-edge:hover .diagram-edge-line, .diagram-edge[data-selected] .diagram-edge-line {
  stroke: var(--openbot-text-primary);
  stroke-width: 3px;
}
.diagram-edge .diagram-edge-arrow {
  fill: var(--openbot-text-muted);
}
.diagram-edge:is([data-state="delivered"], [data-state="running"]) .diagram-edge-arrow {
  fill: var(--diagram-routine-color, var(--openbot-accent));
}
.diagram-edge:hover .diagram-edge-arrow, .diagram-edge[data-selected] .diagram-edge-arrow {
  fill: var(--openbot-text-primary);
}
.diagram-edge[data-state="dimmed"] .diagram-edge-arrow {
  opacity: 0.3;
}
.diagram-edge[data-routine-color][data-state="idle"] .diagram-edge-arrow {
  fill: var(--diagram-routine-color);
  opacity: 0.6;
}
.diagram-edge-draft {
  stroke: var(--openbot-accent);
  stroke-width: 2px;
  stroke-dasharray: 6 6;
}
.diagram-edge-draft[data-target="invalid"] {
  stroke: var(--openbot-danger);
}
.diagram-edge-remove.ui-button {
  position: absolute;
  top: var(--diagram-edge-y);
  left: var(--diagram-edge-x);
  z-index: 1;
  translate: -50% -50%;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface-raised);
  box-shadow: 0 0 0 1px var(--openbot-border-strong);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}
.diagram-edge-remove.ui-button:is([data-selected], :focus-visible) {
  opacity: 1;
  pointer-events: auto;
}
@keyframes diagram-edge-flow {
  to {
    stroke-dashoffset: -12;
  }
}
.diagram-node {
  position: absolute;
  top: var(--diagram-node-y);
  left: var(--diagram-node-x);
  display: flex;
  width: var(--diagram-node-width);
  flex-direction: column;
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-surface-raised);
  box-shadow: 0 0 0 1px var(--openbot-border), var(--openbot-shadow-raised);
  cursor: grab;
  transition: box-shadow var(--openbot-duration-fast) var(--openbot-ease-out), opacity var(--openbot-duration-normal) var(--openbot-ease-out);
  user-select: none;
}
.diagram-node[data-status="running"] {
  box-shadow: 0 0 0 1px var(--openbot-accent), 0 0 0 5px var(--openbot-accent-soft);
}
.diagram-node[data-status="failed"] {
  box-shadow: 0 0 0 1px var(--openbot-danger-border), var(--openbot-shadow-raised);
}
.diagram-node[data-unreachable] {
  box-shadow: 0 0 0 1px var(--openbot-warning);
}
.diagram-node[data-selected] {
  box-shadow: 0 0 0 2px var(--openbot-accent), var(--openbot-shadow-raised);
}
.diagram-node-header {
  display: flex;
  height: 52px;
  align-items: center;
  gap: var(--openbot-space-1);
  border-bottom: 1px solid var(--openbot-border);
  padding: 0 var(--openbot-space-2) 0 var(--openbot-space-1);
}
.diagram-node-select.ui-button {
  height: 44px;
  min-width: 0;
  flex: 1;
  justify-content: flex-start;
  gap: var(--openbot-space-2);
  padding: 0 var(--openbot-space-1-5);
  background: transparent;
  cursor: inherit;
  text-align: left;
}
.diagram-node-avatar.agent-avatar {
  width: 28px;
  height: 28px;
}
.diagram-node-icon {
  display: grid;
  width: 28px;
  height: 28px;
  flex: none;
  place-items: center;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
}
.diagram-node-icon svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.diagram-node-heading {
  display: grid;
  min-width: 0;
}
.diagram-node-kicker {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diagram-node-name {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diagram-node-body {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-2) var(--openbot-space-3) var(--openbot-space-3);
}
.diagram-node-task, .diagram-node-schedule {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.diagram-node-schedule {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
}
.diagram-node-preview {
  display: flex;
  min-height: 64px;
  align-items: flex-start;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.diagram-node-preview[data-empty] {
  align-items: center;
  justify-content: center;
}
.diagram-node-preview p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  white-space: pre-line;
}
.diagram-node[data-status="failed"] .diagram-node-preview {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger-text);
}
.diagram-node-preview-empty {
  color: var(--openbot-text-placeholder);
}
.diagram-node-footer {
  display: flex;
  min-height: 24px;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.diagram-node-status {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.diagram-node-status svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
:is(.diagram-node-status, .diagram-inspector-step-status)[data-status="succeeded"] {
  color: var(--openbot-success-text);
}
:is(.diagram-node-status, .diagram-inspector-step-status)[data-status="failed"] {
  color: var(--openbot-danger-text);
}
:is(.diagram-node-status, .diagram-inspector-step-status)[data-status="running"] {
  color: var(--openbot-accent-text);
}
.diagram-node-status[data-status="unreachable"] {
  color: var(--openbot-warning-text);
}
.diagram-node-duration {
  color: var(--openbot-text-muted);
}
.diagram-node-duration::before {
  content: "·";
  margin-right: var(--openbot-space-1);
}
.diagram-node-remove.ui-button, .diagram-node-run.ui-button {
  flex: none;
  margin-inline-start: auto;
}
.diagram-node-run.ui-button svg, .diagram-view-actions .ui-button-size-xs svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.diagram-port.ui-button {
  position: absolute;
  top: 19px;
  z-index: 1;
  width: 14px;
  min-width: 14px;
  height: 14px;
  border: 2px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface-raised);
  padding: 0;
  cursor: crosshair;
  transition: scale var(--openbot-duration-fast) var(--openbot-ease-out), border-color var(--openbot-duration-fast) var(--openbot-ease-out), background-color var(--openbot-duration-fast) var(--openbot-ease-out);
}
.diagram-port.ui-button::before {
  position: absolute;
  inset: -8px;
  content: "";
}
.diagram-port-in.ui-button {
  left: -7px;
}
.diagram-port-out.ui-button {
  right: -7px;
}
.diagram-port.ui-button:hover, .diagram-port-out.ui-button[data-connecting], .diagram-port-in.ui-button[data-target="valid"] {
  scale: 1.25;
  border-color: var(--openbot-accent);
  background: var(--openbot-accent-soft);
}
.diagram-port-out.ui-button[data-connecting] {
  background: var(--openbot-accent);
}
.diagram-port-in.ui-button[data-target="invalid"] {
  border-color: var(--openbot-danger);
  opacity: 0.5;
}
.diagram-port.ui-button:disabled {
  opacity: 1;
  cursor: default;
}
[data-routine-color="0"] {
  --diagram-routine-color: var(--openbot-file-blue);
  --diagram-routine-soft: var(--openbot-file-blue-soft);
}
[data-routine-color="1"] {
  --diagram-routine-color: var(--openbot-file-green);
  --diagram-routine-soft: var(--openbot-file-green-soft);
}
[data-routine-color="2"] {
  --diagram-routine-color: var(--openbot-file-orange);
  --diagram-routine-soft: var(--openbot-file-orange-soft);
}
[data-routine-color="3"] {
  --diagram-routine-color: var(--openbot-file-pink);
  --diagram-routine-soft: var(--openbot-file-pink-soft);
}
[data-routine-color="4"] {
  --diagram-routine-color: var(--openbot-file-teal);
  --diagram-routine-soft: var(--openbot-file-teal-soft);
}
[data-routine-color="5"] {
  --diagram-routine-color: var(--openbot-file-yellow);
  --diagram-routine-soft: var(--openbot-file-yellow-soft);
}
.diagram-node[data-dimmed] {
  opacity: 0.4;
}
.diagram-node[data-dimmed]:is(:hover, :focus-within) {
  opacity: 0.8;
}
.diagram-edge[data-state="dimmed"] .diagram-edge-line {
  opacity: 0.3;
}
.diagram-node-routines {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.diagram-routine-chip.ui-button {
  height: 22px;
  gap: var(--openbot-space-1);
  border-radius: var(--openbot-radius-pill);
  background: var(--diagram-routine-soft);
  padding: 0 var(--openbot-space-2);
  color: var(--diagram-routine-color);
  font-size: var(--openbot-text-sm);
}
.diagram-routine-chip.ui-button[aria-pressed="true"] {
  box-shadow: inset 0 0 0 1px var(--diagram-routine-color);
}
.diagram-routine-chip.ui-button svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.diagram-routine-chip-name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diagram-routine-webhook {
  display: grid;
  gap: var(--openbot-space-2);
}
.diagram-routine-webhook-actions {
  display: flex;
  justify-content: flex-end;
}
.diagram-view-lens-bar {
  position: absolute;
  top: var(--openbot-space-4);
  left: 50%;
  z-index: 2;
  translate: -50% 0;
}
.diagram-view-lens-bar .ui-select-trigger {
  background: var(--openbot-bg-overlay);
  box-shadow: var(--openbot-shadow-raised);
}
.diagram-view-lens-trigger.ui-select-trigger {
  min-width: 120px;
  max-width: 280px;
}
.diagram-view-lens-option {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
}
.diagram-view-lens-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diagram-view-lens-option svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: none;
}
.diagram-view-lens-dot[data-all] {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--openbot-text-muted);
}
.diagram-view-lens-dot, .diagram-inspector-routine-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: var(--openbot-radius-pill);
  background: var(--diagram-routine-color);
}
.diagram-inspector-routine.ui-button[aria-pressed="true"] {
  background: var(--diagram-routine-soft);
}
.diagram-node[data-kind="routine"][data-firing] {
  box-shadow: 0 0 0 1px var(--diagram-routine-color), 0 0 0 5px var(--diagram-routine-soft);
}
.diagram-node[data-kind="routine"] .diagram-node-icon {
  background: var(--diagram-routine-soft);
  color: var(--diagram-routine-color);
}
.diagram-node[data-kind="routine"][data-firing] .diagram-node-icon {
  animation: diagram-routine-fire 1.2s var(--openbot-ease-in-out) infinite;
}
.diagram-routine-instruction {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  border-left: 2px solid var(--diagram-routine-color, var(--openbot-accent));
  padding-left: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.diagram-routine-week {
  --diagram-week-height: 40px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--openbot-space-1);
}
.diagram-routine-week[data-size="panel"] {
  --diagram-week-height: 72px;
}
.diagram-routine-day {
  display: grid;
  justify-items: center;
  gap: var(--openbot-space-1);
}
.diagram-routine-day-track {
  position: relative;
  width: 100%;
  height: var(--diagram-week-height);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-control);
}
.diagram-routine-day[data-weekend] .diagram-routine-day-track {
  background: var(--openbot-bg-control-hover);
}
.diagram-routine-day[data-today] .diagram-routine-day-track {
  box-shadow: inset 0 0 0 1px var(--openbot-accent);
}
.diagram-routine-day-track::after {
  position: absolute;
  top: 50%;
  right: 3px;
  left: 3px;
  height: 1px;
  background: var(--openbot-border);
  content: "";
}
.diagram-routine-tick {
  position: absolute;
  top: var(--diagram-tick-at);
  right: 3px;
  left: 3px;
  z-index: 1;
  height: 3px;
  translate: 0 -50%;
  border-radius: var(--openbot-radius-pill);
  background: var(--diagram-routine-color, var(--openbot-accent));
}
.diagram-routine-day-name {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 1;
}
.diagram-routine-day[data-today] .diagram-routine-day-name {
  color: var(--openbot-accent-text);
  font-weight: var(--openbot-weight-semibold);
}
.diagram-routine-dots {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.diagram-routine-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-border-strong);
}
.diagram-routine-dot[data-status="succeeded"] {
  background: var(--openbot-success);
}
.diagram-routine-dot[data-status="failed"] {
  background: var(--openbot-danger);
}
.diagram-routine-dot[data-status="running"] {
  background: var(--openbot-accent);
}
@keyframes diagram-routine-fire {
  50% {
    scale: 1.15;
  }
}
.diagram-inspector {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  width: var(--diagram-inspector-width);
  min-height: 0;
  flex-direction: column;
  border-left: 1px solid var(--openbot-border);
  background: var(--openbot-bg-surface);
}
.diagram-inspector-header {
  display: flex;
  min-height: 52px;
  align-items: center;
  gap: var(--openbot-space-2);
  border-bottom: 1px solid var(--openbot-border);
  padding: var(--openbot-space-2) var(--openbot-space-3);
}
.diagram-inspector-title {
  overflow: hidden;
  margin: 0;
  flex: 1;
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diagram-inspector-avatar.agent-avatar {
  width: 24px;
  height: 24px;
}
.diagram-inspector-body {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: var(--openbot-space-4);
  overflow-y: auto;
  padding: var(--openbot-space-4);
}
.diagram-inspector-run {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--openbot-space-1-5) var(--openbot-space-2);
  font-size: var(--openbot-text-md);
}
.diagram-inspector-muted, .diagram-inspector-empty {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
}
.diagram-inspector-section {
  display: grid;
  gap: var(--openbot-space-1-5);
}
.diagram-inspector-section p {
  margin: 0;
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.diagram-inspector-task.ui-textarea {
  min-height: 0;
  margin: calc(-1 * var(--openbot-space-1-5));
  border-color: transparent;
  background: transparent;
  padding: var(--openbot-space-1) var(--openbot-space-1-5);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  resize: none;
  field-sizing: content;
}
.diagram-inspector-task.ui-textarea:is(:hover, :focus-visible, :focus) {
  border-color: var(--openbot-border);
  background: var(--openbot-bg-control);
}
.diagram-inspector-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.diagram-inspector-section-title {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: var(--openbot-tracking-wide);
}
.diagram-inspector-text {
  max-height: 320px;
  overflow: auto;
  margin: 0;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.diagram-inspector-text[data-tone="danger"] {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger-text);
}
.diagram-inspector-steps {
  display: grid;
  gap: var(--openbot-space-0-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.diagram-inspector-step.ui-button {
  width: 100%;
  height: auto;
  justify-content: flex-start;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-2);
  text-align: left;
}
.diagram-inspector-step-number {
  display: grid;
  width: 20px;
  height: 20px;
  flex: none;
  place-items: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  font-weight: var(--openbot-weight-semibold);
}
.diagram-inspector-step-name {
  overflow: hidden;
  flex: 1;
  font-size: var(--openbot-text-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diagram-inspector-step-status {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
.diagram-inspector-times, .diagram-inspector-history {
  display: grid;
  gap: var(--openbot-space-1);
  margin: 0;
  padding: 0;
  font-size: var(--openbot-text-md);
  list-style: none;
}
.diagram-inspector-times li {
  color: var(--openbot-text-secondary);
}
.diagram-inspector-history li {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-2);
}
.diagram-inspector-history-time {
  overflow: hidden;
  color: var(--openbot-text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diagram-inspector-history-kind {
  color: var(--openbot-text-muted);
}
.diagram-inspector-history-kind::before {
  content: " · ";
}
.diagram-inspector-step-status svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.diagram-chat, .diagram-chat-launcher.ui-button {
  background: var(--openbot-bg-glass);
  box-shadow: 0 0 0 1px var(--openbot-glass-border), var(--openbot-shadow-overlay);
  backdrop-filter: blur(16px);
}
.diagram-chat-morph {
  --diagram-chat-open-duration: var(--openbot-duration-island-content);
  --diagram-chat-close-duration: var(--openbot-duration-island-content-exit);
  --diagram-chat-open-ease: cubic-bezier(0.34, 1.25, 0.64, 1);
  --diagram-chat-launcher-height: 36px;
  --diagram-chat-blur: 2px;
  display: grid;
  align-items: end;
}
.diagram-chat-morph > * {
  grid-area: 1 / 1;
}
.diagram-chat-launcher.ui-button {
  height: var(--diagram-chat-launcher-height);
  touch-action: none;
  justify-self: start;
  gap: var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
  padding-left: var(--openbot-space-1-5);
  pointer-events: auto;
  transition: opacity var(--diagram-chat-open-duration) var(--openbot-ease-out), filter var(--diagram-chat-open-duration) var(--openbot-ease-out), scale var(--diagram-chat-open-duration) var(--openbot-ease-out);
}
.diagram-chat-morph[data-open="true"] .diagram-chat-launcher.ui-button {
  scale: 0.97;
  filter: blur(var(--diagram-chat-blur));
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out), filter var(--openbot-duration-fast) var(--openbot-ease-out), scale var(--openbot-duration-fast) var(--openbot-ease-out);
}
.diagram-chat {
  display: flex;
  max-height: 340px;
  flex-direction: column;
  border-radius: var(--openbot-radius-xl);
  overflow: hidden;
  clip-path: inset(calc(100% - var(--diagram-chat-launcher-height)) 24% 0 0 round var(--openbot-radius-pill));
  opacity: 0;
  pointer-events: none;
  transition: clip-path var(--diagram-chat-close-duration) var(--openbot-ease-out), opacity var(--diagram-chat-close-duration) var(--openbot-ease-out);
}
.diagram-chat-morph[data-open="true"] .diagram-chat {
  clip-path: inset(-32px round 0);
  opacity: 1;
  pointer-events: auto;
  transition: clip-path var(--diagram-chat-open-duration) var(--diagram-chat-open-ease), opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}
.diagram-chat > * {
  filter: blur(var(--diagram-chat-blur));
  opacity: 0;
  translate: 0 var(--openbot-space-2);
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out), filter var(--openbot-duration-fast) var(--openbot-ease-out), translate var(--openbot-duration-fast) var(--openbot-ease-out);
}
.diagram-chat-morph[data-open="true"] .diagram-chat > * {
  filter: blur(0);
  opacity: 1;
  translate: 0 0;
  transition: opacity var(--diagram-chat-open-duration) var(--openbot-ease-out) var(--openbot-duration-fast), filter var(--diagram-chat-open-duration) var(--openbot-ease-out) var(--openbot-duration-fast), translate var(--diagram-chat-open-duration) var(--openbot-ease-out) var(--openbot-duration-fast);
}
.diagram-chat-avatar.agent-avatar {
  width: 24px;
  height: 24px;
}
.diagram-chat-header {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  cursor: grab;
  touch-action: none;
  border-bottom: 1px solid var(--openbot-border);
  padding: var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-3);
}
.diagram-chat-title {
  overflow: hidden;
  margin: 0;
  flex: 1;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diagram-chat-messages {
  display: flex;
  min-height: 96px;
  flex: 1;
  flex-direction: column;
  gap: var(--openbot-space-2);
  overflow-y: auto;
  padding: var(--openbot-space-3);
}
.diagram-chat-empty {
  margin: auto 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  text-align: center;
}
.diagram-chat-bubble {
  max-width: 88%;
  font-size: var(--openbot-text-md);
}
.diagram-chat-text {
  margin: 0;
  white-space: pre-wrap;
}
.diagram-chat-markdown {
  min-width: 0;
  font-size: var(--openbot-text-md);
}
.diagram-chat-changes {
  display: grid;
  gap: var(--openbot-space-1);
  margin: var(--openbot-space-2) 0 0;
  padding: 0;
  font-size: var(--openbot-text-sm);
  list-style: none;
}
.diagram-chat-changes li {
  display: flex;
  align-items: flex-start;
  gap: var(--openbot-space-1-5);
}
.diagram-chat-changes svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: none;
  margin-top: 2px;
  color: var(--openbot-success-text);
}
.diagram-chat-working {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.diagram-chat-composer.composer[data-compact] {
  grid-template-columns: minmax(0, 1fr) auto;
  margin: var(--openbot-space-2);
}
.diagram-chat-composer.composer[data-compact] > .composer-input-label {
  grid-column: 1;
}
@media (prefers-reduced-motion: reduce) {
  .diagram-edge[data-state="running"] .diagram-edge-line {
    animation: none;
  }
  .diagram-node[data-kind="routine"][data-firing] .diagram-node-icon {
    animation: none;
  }
  .diagram-chat-launcher.ui-button, .diagram-chat, .diagram-chat > *, .diagram-board-world[data-settling], .diagram-node, .diagram-port.ui-button, .diagram-edge-remove.ui-button {
    transition: none;
  }
}
.agent-usage-secondary, .agent-usage-footer {
  font-size: var(--openbot-text-sm);
  color: var(--openbot-text-muted);
}
.agent-usage-overview {
  display: grid;
  gap: var(--openbot-space-8);
}
.agent-usage-summary {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-8);
}
.agent-usage-hero {
  font-size: var(--openbot-text-usage-total);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  margin-bottom: var(--openbot-space-3);
}
.agent-usage-providers {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-6);
}
.agent-usage-provider-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-4);
  font-size: var(--openbot-text-lg);
}
.agent-usage-provider-heading > span {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.agent-usage-series-dot {
  width: var(--openbot-space-2);
  height: var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
  flex-shrink: 0;
}
.agent-usage-provider-heading strong {
  font-weight: 550;
  font-variant-numeric: tabular-nums;
}
.agent-usage-provider p {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  margin-top: var(--openbot-space-2);
}
.agent-usage-provider-icon {
  fill: var(--openbot-provider-current);
  width: var(--openbot-space-4);
  height: var(--openbot-space-4);
  flex-shrink: 0;
}
.agent-usage-trend {
  min-width: 0;
}
.agent-usage-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-4);
  margin-bottom: var(--openbot-space-4);
}
.agent-usage-totals {
  display: flex;
  flex-wrap: nowrap;
  gap: calc(var(--openbot-space-6) * 2);
  margin-top: var(--openbot-space-4);
  overflow: hidden;
}
.agent-usage-totals dt {
  font-size: var(--openbot-text-sm);
  color: var(--openbot-text-muted);
  margin-bottom: var(--openbot-space-1);
  white-space: nowrap;
}
.agent-usage-totals dd {
  margin: 0;
  font-size: var(--openbot-text-xl);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.agent-usage-table {
  overflow-x: auto;
}
.agent-usage-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--openbot-text-lg);
  font-variant-numeric: tabular-nums;
}
.agent-usage-table th, .agent-usage-table td {
  text-align: right;
  padding: var(--openbot-space-2) var(--openbot-space-3);
  border-bottom: 1px solid var(--openbot-border-strong);
  white-space: nowrap;
  font-weight: 400;
}
.agent-usage-table th:first-child {
  text-align: left;
  padding-left: 0;
  white-space: normal;
}
.agent-usage-table td:last-child {
  padding-right: 0;
}
.agent-usage-table thead th {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.agent-usage-table td {
  color: var(--openbot-text-secondary);
}
.agent-usage-model-name {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  overflow-wrap: anywhere;
  min-width: 10rem;
}
.agent-usage-footer {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-3);
  padding-bottom: var(--openbot-space-6);
}
.agent-usage-footer summary {
  cursor: pointer;
  width: fit-content;
}
.agent-usage-footer details p {
  margin-top: var(--openbot-space-3);
  max-width: 72ch;
  line-height: 1.6;
}
.app-frame-panes {
  display: contents;
}
.app-frame-panes > * {
  min-height: 0;
}
.app-frame-page-open .app-frame-panes {
  visibility: hidden;
  pointer-events: none;
}
.app-frame.app-frame-page-open .app-frame-panes * {
  visibility: hidden;
}
.window-page {
  z-index: 1;
  min-height: 0;
  overflow: hidden;
}
.agent-usage {
  container-type: inline-size;
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 0;
  height: 100%;
  flex-direction: column;
  color: var(--openbot-text-primary);
  background: var(--openbot-bg-canvas);
}
.agent-usage-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-4) var(--openbot-space-6);
  border-bottom: 1px solid var(--openbot-border);
}
.agent-usage-identity, .agent-usage-controls {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  min-width: 0;
}
.agent-usage-identity {
  flex-wrap: wrap;
}
.agent-usage-identity .ui-icon-button {
  margin-left: calc(-1 * var(--openbot-space-2));
}
.agent-usage-identity h2 {
  display: flex;
  gap: var(--openbot-space-3);
  font-size: var(--openbot-text-lg);
  color: var(--openbot-text-muted);
}
.agent-usage-identity h2 span:last-child {
  color: var(--openbot-text-primary);
  overflow-wrap: anywhere;
}
.agent-usage-controls {
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--openbot-space-3);
}
.agent-usage-body {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding: var(--openbot-space-6);
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-8);
}
.agent-usage h3 {
  font-size: var(--openbot-text-xl);
  font-weight: 550;
}
.agent-usage-notice {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  padding: var(--openbot-space-4);
  background: var(--openbot-bg-surface);
  border-radius: var(--openbot-radius-md);
}
.agent-usage-notice .ui-button {
  margin-top: var(--openbot-space-3);
}
.agent-usage-loading {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
}
.agent-usage-placeholder {
  height: 280px;
  margin-top: var(--openbot-space-6);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface);
}
@container (min-width: 850px) {
  .agent-usage-overview {
    grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.5fr);
    gap: calc(var(--openbot-space-6) * 2);
  }
  .agent-usage-body {
    padding: var(--openbot-space-8) calc(var(--openbot-space-6) * 2);
    gap: calc(var(--openbot-space-6) * 2);
  }
}
@container (max-width: 1000px) {
  .agent-usage-totals > div:nth-child(n + 7) {
    display: none;
  }
}
@container (max-width: 820px) {
  .agent-usage-totals > div:nth-child(n + 6) {
    display: none;
  }
}
@container (max-width: 660px) {
  .agent-usage-totals > div:nth-child(n + 5) {
    display: none;
  }
}
@container (max-width: 540px) {
  .agent-usage-totals > div:nth-child(n + 4) {
    display: none;
  }
}
@container (max-width: 400px) {
  .agent-usage-totals > div:nth-child(n + 3) {
    display: none;
  }
}
@container (max-width: 480px) {
  .agent-usage-hero {
    font-size: var(--openbot-text-display);
  }
  .agent-usage-body {
    padding: var(--openbot-space-4);
  }
  .agent-usage-header {
    padding: var(--openbot-space-3);
  }
  .agent-usage-controls {
    margin-left: 0;
    justify-content: flex-start;
  }
  .agent-usage-section-header {
    flex-wrap: wrap;
  }
}
.agent-usage-controls .ui-select {
  width: auto;
  flex-shrink: 0;
}
.agent-usage-controls .ui-select-trigger {
  width: max-content;
  border-color: var(--openbot-border);
  background: var(--openbot-bg-control);
  box-shadow: none;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.app-frame-panes.server-connection-workspace {
  position: relative;
  grid-column: -2 / -1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.server-connection-workspace > .app-loading {
  z-index: 1;
}
.server-connection-content > * {
  min-height: 0;
  flex: 1;
}
.schedule-pane {
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  background: var(--openbot-bg-canvas);
  padding: var(--openbot-space-4) var(--openbot-space-6) var(--openbot-space-6);
}
.tasks-page {
  display: flex;
  height: 100%;
  min-height: 0;
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
}
.tasks-page-scroll {
  min-width: 0;
  flex: 1;
  overflow-y: auto;
  padding: 0 var(--openbot-space-6) var(--openbot-space-8);
}
.tasks-page-column {
  display: flex;
  max-width: 36rem;
  flex-direction: column;
  gap: var(--openbot-space-1);
  margin: 0 auto;
}
.tasks-page-header {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-6) var(--openbot-space-2) var(--openbot-space-3);
}
.tasks-page-header .ui-icon-button {
  margin-left: calc(-1 * var(--openbot-space-2));
}
.tasks-page-header h2 {
  min-width: 0;
  flex: 1;
  margin: 0;
  font-size: var(--openbot-text-xl);
  font-weight: var(--openbot-weight-semibold);
}
.tasks-page-agent-option > span {
  flex: 1 1 auto;
}
.tasks-page-header h2 span {
  color: var(--openbot-text-muted);
  font-weight: var(--openbot-weight-regular);
}
.tasks-page-avatar.agent-avatar {
  --agent-avatar-optical-offset: -2px;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
.tasks-page-composer.composer-wrap {
  position: sticky;
  z-index: 3;
  top: 0;
  margin-bottom: var(--openbot-space-2);
  background: var(--openbot-bg-canvas);
  padding: var(--openbot-space-1) 0 0;
}
.tasks-page-composer .composer-notice {
  margin-bottom: var(--openbot-space-2);
}
.tasks-page-composer-agent {
  display: flex;
  min-width: 0;
  align-items: center;
}
.tasks-page-agent.ui-button {
  gap: var(--openbot-space-1-5);
  font-size: var(--openbot-text-sm);
  color: var(--openbot-text-secondary);
}
.tasks-page-composer-agent .tasks-page-agent.ui-button {
  margin-left: calc(-1 * var(--openbot-space-1));
}
.tasks-page-agent-face {
  display: flex;
  flex: 0 0 auto;
}
.tasks-page-agent-face[data-entering] {
  animation: tasks-page-face-in 420ms cubic-bezier(0.34, 1.36, 0.64, 1) both;
}
@keyframes tasks-page-face-in {
  from {
    opacity: 0;
    scale: 0.6;
    filter: blur(2px);
  }
}
.tasks-page-agent-chevron {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  color: var(--openbot-text-muted);
  transition: transform var(--openbot-duration-normal) ease;
}
.tasks-page-agent[aria-expanded="true"] .tasks-page-agent-chevron {
  transform: rotate(180deg);
}
.tasks-page-agent-check {
  color: var(--openbot-text-primary);
}
.tasks-page-took {
  display: flex;
  min-height: var(--openbot-control-sm);
  align-items: center;
  gap: var(--openbot-space-1-5);
  margin-bottom: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  animation: tasks-page-rise var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.tasks-page-took .ui-button-size-sm {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.tasks-page-took-agent {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  padding: 0 var(--openbot-space-1);
}
.tasks-page-took-text {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tasks-page-section {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-0-5);
}
.tasks-page-section + .tasks-page-section {
  margin-top: var(--openbot-space-4);
}
.tasks-page-section-heading {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  margin: 0;
  padding: var(--openbot-space-1) var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.tasks-page-count {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
  font-variant-numeric: tabular-nums;
}
.tasks-page-list {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-0-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.tasks-page-row.ui-button {
  display: grid;
  width: 100%;
  height: var(--openbot-control-lg);
  align-items: center;
  justify-content: stretch;
  grid-template-columns: 16px minmax(0, 1fr) auto auto;
  gap: var(--openbot-space-3);
  border-radius: var(--openbot-radius-md);
  padding: 0 var(--openbot-space-2);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-regular);
  text-align: left;
  --task-list-glyph: 14px;
}
.tasks-page-row[data-selected] {
  background: var(--openbot-bg-control-active);
}
.tasks-page-section[data-closed] .tasks-page-row:not([data-selected]) {
  opacity: 0.55;
}
.tasks-page-row-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tasks-page-status {
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tasks-page-status[data-tone="working"] {
  color: var(--openbot-text-secondary);
}
.tasks-page-status[data-tone="attention"] {
  color: var(--openbot-accent);
}
.tasks-page-status[data-tone="danger"] {
  color: var(--openbot-danger-text);
}
.tasks-page-show-all.ui-button {
  align-self: flex-start;
  color: var(--openbot-text-muted);
}
li[data-arrived] > .tasks-page-row {
  animation: tasks-page-arrive 1600ms var(--openbot-ease-out);
}
.tasks-page-side {
  position: relative;
  flex: 0 0 380px;
  overflow: hidden;
  transition: flex-basis var(--openbot-duration-overlay) var(--openbot-ease-out), opacity var(--openbot-duration-overlay) var(--openbot-ease-out);
}
@starting-style {
  .tasks-page-side {
    flex-basis: 0;
    opacity: 0.6;
  }
}
.tasks-page-side[data-closing] {
  flex-basis: 0;
  opacity: 0.6;
  transition-duration: var(--openbot-duration-slow);
  transition-timing-function: cubic-bezier(0.5, 0, 0.75, 0);
}
.tasks-page-side-content {
  position: absolute;
  inset: 0 auto 0 0;
  display: flex;
  width: 380px;
  --browser-panel-width: 100%;
}
.tasks-page-side-content > * {
  flex: 1;
  min-width: 0;
}
.tasks-page-side-content[data-entering] {
  animation: tasks-page-side-swap var(--openbot-duration-normal) var(--openbot-ease-out);
}
@keyframes tasks-page-side-swap {
  from {
    opacity: 0;
    transform: translateX(6px);
  }
}
@keyframes tasks-page-rise {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}
@keyframes tasks-page-arrive {
  from {
    background: var(--openbot-bg-control-active);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tasks-page-took, .tasks-page-agent-face[data-entering], li[data-arrived] > .tasks-page-row, .tasks-page-side-content[data-entering] {
    animation: none;
  }
  .tasks-page-side, .tasks-page-agent-chevron {
    transition: none;
  }
}
.ui-chart {
  width: 100%;
  height: 300px;
  min-width: 0;
  font-size: var(--openbot-text-sm);
}
.ui-chart-tooltip {
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-primary);
  padding: var(--openbot-space-3);
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
.ui-chart-tooltip-row {
  display: grid;
  grid-template-columns: var(--openbot-space-4) auto 1fr;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-top: var(--openbot-space-2);
}
.ui-chart-tooltip-value {
  text-align: right;
}
.ui-chart-tooltip-mark {
  display: flex;
  align-items: center;
}
.ui-chart-tooltip-total {
  border-top: 1px solid var(--openbot-border-strong);
  padding-top: var(--openbot-space-2);
  color: var(--openbot-text-muted);
}
.storage-usage {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
}
.storage-usage [data-group="workspaces"] {
  --storage-color: var(--openbot-chart-storage-workspaces);
}
.storage-usage [data-group="files"] {
  --storage-color: var(--openbot-chart-storage-files);
}
.storage-usage [data-group="chats"] {
  --storage-color: var(--openbot-chart-storage-chats);
}
.storage-usage [data-group="downloads"] {
  --storage-color: var(--openbot-chart-storage-downloads);
}
.storage-usage [data-group="runtimes"] {
  --storage-color: var(--openbot-chart-storage-runtimes);
}
.storage-usage [data-group="app"] {
  --storage-color: var(--openbot-chart-storage-app);
}
.storage-usage-bar {
  display: flex;
  height: 10px;
  gap: var(--openbot-space-0-5);
}
.storage-usage-segment {
  min-width: 4px;
  flex-basis: 0;
  border-radius: var(--openbot-radius-xs);
  background: var(--storage-color);
  transition: opacity var(--openbot-duration-fast) ease;
}
.storage-usage[data-hovering="true"] :is(.storage-usage-segment, .storage-usage-legend-row):not([data-active]) {
  opacity: 0.35;
}
.storage-usage-legend {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--openbot-space-1) var(--openbot-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.storage-usage-legend-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-1) 0;
  font-size: var(--openbot-text-md);
  transition: opacity var(--openbot-duration-fast) ease;
}
.storage-usage-swatch {
  width: var(--openbot-space-2);
  height: var(--openbot-space-2);
  align-self: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--storage-color);
}
.storage-usage-legend-label {
  overflow: hidden;
  color: var(--openbot-text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.storage-usage-legend-value {
  color: var(--openbot-text-primary);
  font-variant-numeric: tabular-nums;
}
.storage-usage-legend-percent {
  min-width: 4ch;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.storage-overview {
  container-type: inline-size;
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--openbot-space-8);
  color: var(--openbot-text-primary);
}
.storage-summary {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
}
.storage-summary-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--openbot-space-3);
}
.storage-summary-label {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.storage-summary-total {
  margin: var(--openbot-space-1) 0;
  font-size: var(--openbot-text-display);
  font-weight: var(--openbot-weight-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.storage-summary-total-skeleton {
  width: 140px;
  height: 36px;
  margin: var(--openbot-space-1) 0;
}
.storage-summary-caption {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.storage-message {
  display: flex;
  align-items: flex-start;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-grouped);
}
.storage-message-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--openbot-text-muted);
  stroke-width: var(--openbot-icon-stroke);
}
.storage-message[role="alert"] .storage-message-icon {
  color: var(--openbot-danger-text);
}
.storage-message-title {
  margin: 0;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.storage-message-description {
  margin: var(--openbot-space-0-5) 0 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.storage-section {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
}
.storage-section-heading-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--openbot-space-3);
}
.storage-section-heading {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
}
.storage-section-aside {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.storage-rows {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-grouped);
  list-style: none;
}
.storage-rows > li + li {
  border-top: 1px solid var(--openbot-border-grouped);
}
.storage-row.ui-button {
  display: flex;
  width: 100%;
  height: auto;
  min-height: 52px;
  align-items: center;
  justify-content: flex-start;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-2) var(--openbot-space-4);
  border-radius: 0;
  text-align: left;
  font-weight: var(--openbot-weight-regular);
}
.storage-row-avatar {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
}
.storage-row-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: var(--openbot-space-0-5);
}
.storage-row-title {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.storage-row-meta {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.storage-row-share {
  width: 96px;
  height: 6px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-hover);
}
.storage-row-share-fill {
  display: block;
  height: 100%;
  min-width: 4px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-muted);
}
.storage-row-size {
  display: flex;
  min-width: 72px;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-variant-numeric: tabular-nums;
}
.storage-row-percent {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.storage-row-chevron {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--openbot-text-dim);
  stroke-width: var(--openbot-icon-stroke);
}
.storage-cleanup-row {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-2) var(--openbot-space-4);
}
.storage-cleanup-row .storage-row-meta {
  white-space: normal;
}
.storage-subview-header {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.storage-subview-back > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.storage-subview-header h3 {
  margin: 0;
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
}
@container (max-width: 520px) {
  .storage-row-share {
    display: none;
  }
}
.file-list {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--openbot-space-3);
}
.file-list-toolbar {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.file-list-search {
  position: relative;
  min-width: 0;
  flex: 1;
}
.file-list-search-icon {
  position: absolute;
  top: 50%;
  left: var(--openbot-space-2);
  width: 14px;
  height: 14px;
  color: var(--openbot-text-muted);
  pointer-events: none;
  stroke-width: var(--openbot-icon-stroke);
  transform: translateY(-50%);
}
.file-list-search .file-list-search-input {
  width: 100%;
  padding-left: calc(var(--openbot-space-2) + 14px + var(--openbot-space-1-5));
}
.file-list-toolbar > .ui-select {
  width: auto;
  flex: 0 0 auto;
}
.file-list-sort {
  width: 120px;
}
.file-list[data-compact="true"] .file-list-sort {
  width: auto;
}
.file-list-filters {
  display: flex;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  flex-wrap: wrap;
  gap: var(--openbot-space-1);
}
.file-list[data-compact="true"] .file-list-filters {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.file-list-filter.ui-button {
  flex: 0 0 auto;
  gap: var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-pill);
  color: var(--openbot-text-muted);
}
.file-list-filter.ui-button[aria-pressed="true"] {
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
}
.file-list-filter-count {
  color: var(--openbot-text-muted);
  font-variant-numeric: tabular-nums;
}
.file-list-filter[aria-pressed="true"] .file-list-filter-count {
  color: var(--openbot-text-secondary);
}
.file-list-summary {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.file-list-group {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
}
.file-list-group + .file-list-group {
  margin-top: var(--openbot-space-2);
}
.file-list-group-heading {
  margin: 0;
  padding: 0 var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.file-list-rows {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-0-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.file-list-skeleton {
  height: 48px;
  border-radius: var(--openbot-radius-md);
}
.file-list-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-8) var(--openbot-space-4);
  text-align: center;
}
.file-list-message-icon {
  width: 20px;
  height: 20px;
  color: var(--openbot-danger-text);
  stroke-width: var(--openbot-icon-stroke);
}
.file-list-message-title {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.file-list-message-description {
  max-width: 320px;
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.file-row {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
  padding-right: var(--openbot-space-1);
  border-radius: var(--openbot-radius-md);
}
.file-row:hover, .file-row:focus-within {
  background: var(--openbot-hover);
}
.file-row-main.ui-button {
  display: flex;
  min-width: 0;
  height: auto;
  flex: 1;
  align-items: center;
  justify-content: flex-start;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  text-align: left;
  font-weight: var(--openbot-weight-regular);
}
.file-row-main.ui-button:hover {
  background: transparent;
}
.file-row-main.ui-button:disabled {
  opacity: 1;
}
.files-file-visual {
  --file-reference-color: var(--openbot-file-default);
  --file-reference-soft: var(--openbot-file-default-soft);
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border-radius: var(--openbot-radius-md);
  background: var(--file-reference-soft);
  color: var(--file-reference-color);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: 0.02em;
}
.files-file-visual[data-file-tone="document"] {
  color: var(--openbot-danger-text);
}
.files-file-visual[data-status="missing"], .files-file-visual[data-status="failed"] {
  opacity: 0.5;
}
.files-file-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.file-row-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: var(--openbot-space-0-5);
}
.file-row-name {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-row[data-status="missing"] .file-row-name {
  color: var(--openbot-text-muted);
  text-decoration: line-through;
  text-decoration-color: var(--openbot-text-dim);
}
.file-row-meta {
  display: flex;
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  white-space: pre;
}
.file-row-meta-part {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-row-meta-part:first-child {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}
.file-row-status {
  flex: 0 0 auto;
}
.file-row-status.z-badge-variant-destructive-light {
  color: var(--openbot-danger-text);
}
.file-row-menu-trigger {
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
}
.file-row-menu-trigger > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: var(--openbot-icon-stroke);
}
.files-button-icon {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.agent-files-view {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--openbot-bg-canvas);
}
.agent-files-body {
  container-type: inline-size;
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: var(--openbot-space-6);
  overflow-y: auto;
  padding: var(--openbot-space-4);
}
.agent-files-summary {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-3);
}
.agent-files-total-label {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.agent-files-total {
  margin: var(--openbot-space-0-5) 0 0;
  font-size: var(--openbot-text-3xl);
  font-weight: var(--openbot-weight-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.agent-files-total-skeleton {
  width: 96px;
  height: 28px;
  margin-top: var(--openbot-space-0-5);
}
.agent-files-tiles {
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-grouped);
}
.agent-files-tile {
  display: flex;
  min-height: 36px;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-2) var(--openbot-space-3);
}
.agent-files-tile + .agent-files-tile {
  border-top: 1px solid var(--openbot-border-grouped);
}
.agent-files-tile dt {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-1);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
}
.agent-files-tile-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-files-tile dd {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-variant-numeric: tabular-nums;
}
.agent-files-tile-action {
  flex: 0 0 auto;
  margin-block: calc(var(--openbot-space-1) * -1);
  color: var(--openbot-text-muted);
}
.agent-files-tile-skeleton {
  width: 64px;
  height: 18px;
}
.agent-files-section {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
}
.conversation-files-summary {
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
.conversation-files-content {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  padding: var(--openbot-space-3);
}
.agent-import-guide {
  display: flex;
  max-width: 560px;
  flex-direction: column;
  gap: var(--openbot-space-6);
}
.agent-import-intro {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1-5);
}
.agent-import-heading {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-xl);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: -0.01em;
}
.agent-import-lede {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: 1.5;
}
.agent-import-steps {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.agent-import-step {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: var(--openbot-space-4);
  padding-bottom: var(--openbot-space-6);
}
.agent-import-step:last-child {
  padding-bottom: 0;
}
.agent-import-step:not(:last-child)::before {
  position: absolute;
  top: 28px;
  bottom: 4px;
  left: 11.5px;
  width: 1px;
  background: var(--openbot-border-grouped);
  content: "";
}
.agent-import-marker {
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  font-weight: var(--openbot-weight-medium);
}
.agent-import-step-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--openbot-space-2);
  padding-top: 2px;
}
.agent-import-step-title {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.agent-import-step-note {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 1.45;
}
.agent-import-setup {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--openbot-space-3);
}
.agent-import-setup .ui-sliding-tabs-content-slot {
  width: 100%;
}
.agent-import-setup-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--openbot-space-2);
}
.agent-import-card {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-3);
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-grouped);
}
.agent-import-card-icon {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: none;
  color: var(--openbot-text-secondary);
  stroke-width: var(--openbot-icon-stroke);
}
.agent-import-card-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}
.agent-import-card-name {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.agent-import-card-meta {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-import-prompt {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-3);
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-grouped);
}
.agent-import-prompt-text {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-import-prompt svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.agent-import-card .ui-button svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.agent-import-picker.ui-button {
  display: flex;
  width: 100%;
  height: auto;
  min-height: 64px;
  align-items: center;
  justify-content: flex-start;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-grouped);
  text-align: left;
  font-weight: var(--openbot-weight-regular);
}
.agent-import-picker.ui-button:hover:not(:disabled, [aria-disabled="true"]) {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-control-hover);
}
.agent-import-picker-icon {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  flex: 0 0 auto;
  color: var(--openbot-text-secondary);
  stroke-width: var(--openbot-icon-stroke);
}
.agent-import-picker-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--openbot-space-0-5);
}
.agent-import-picker-title {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.agent-import-picker-meta {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.agent-import-row {
  display: flex;
  min-height: 52px;
  align-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3) var(--openbot-space-4);
}
label.agent-import-row {
  cursor: pointer;
}
label.agent-import-row:hover {
  background: var(--openbot-hover);
}
label.agent-import-row:has(input:disabled) {
  cursor: default;
}
.agent-import-row-note {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 1.4;
}
.agent-import-notes {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  margin: var(--openbot-space-1) 0 0;
  padding: 0;
  list-style: none;
}
.agent-import-done {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.agent-import-done-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  color: var(--openbot-success-text);
  stroke-width: var(--openbot-icon-stroke);
}
.agent-import-skipped-icon {
  color: var(--openbot-warning-text);
}
.agent-import-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
}
.agent-import-row-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-1);
}
.agent-import-name-hint {
  display: inline-flex;
  flex: none;
  color: var(--openbot-text-muted);
  border-radius: var(--openbot-radius-sm);
}
.agent-import-name-hint:hover, .agent-import-name-hint:focus-visible {
  color: var(--openbot-text-secondary);
}
.agent-import-name-hint svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  stroke-width: var(--openbot-icon-stroke);
}
.agent-import-members {
  display: flex;
  flex: none;
  width: 44px;
}
.agent-import-member-avatar {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: var(--openbot-radius-pill);
  box-shadow: 0 0 0 2px var(--openbot-bg-grouped);
}
.agent-import-member-avatar + .agent-import-member-avatar {
  margin-left: -11px;
}
.agent-import-channel-icon {
  width: 28px;
  height: var(--openbot-icon-md);
  flex: none;
  color: var(--openbot-text-secondary);
  stroke-width: var(--openbot-icon-stroke);
}
.instance-transfer {
  display: flex;
  max-width: 720px;
  flex-direction: column;
  gap: var(--openbot-space-4);
}
.instance-transfer-start {
  justify-content: flex-start;
}
.instance-transfer-back {
  align-self: flex-start;
  padding-inline: 0;
}
.instance-transfer-link {
  align-self: flex-start;
  padding-inline: 0;
}
.instance-transfer-chip {
  padding: 0 var(--openbot-space-1-5);
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-pill);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  white-space: nowrap;
}
.instance-transfer-flow {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  margin: 0;
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-lg);
  list-style: none;
}
.instance-transfer-flow-item {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-1-5);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  text-align: center;
}
.instance-transfer-flow-icon {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  color: var(--openbot-text-primary);
}
.instance-transfer-flow-arrow {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: none;
  color: var(--openbot-text-muted);
}
.instance-transfer-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--openbot-space-3);
}
.instance-transfer-tile {
  display: flex;
  height: auto;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-4);
  text-align: left;
  white-space: normal;
}
.instance-transfer-tile-icon {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  margin-bottom: var(--openbot-space-2);
}
.instance-transfer-tile-title {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.instance-transfer-tile-text {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
}
.instance-transfer-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--openbot-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.instance-transfer-summary-item {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
}
.instance-transfer-summary-icon {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: none;
  color: var(--openbot-text-muted);
}
.instance-transfer-not-moved {
  display: flex;
  align-items: flex-start;
  gap: var(--openbot-space-2);
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 1.45;
}
.instance-transfer-not-moved-icon {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: none;
  margin-top: 2px;
}
@media (max-width: 640px) {
  .instance-transfer-tiles, .instance-transfer-summary {
    grid-template-columns: minmax(0, 1fr);
  }
}
.settings-modal-tabs-root {
  display: contents;
}
.settings-modal {
  --openbot-bg-surface: var(--openbot-bg-control);
  --openbot-text-muted: var(--openbot-settings-text-muted);
  width: min(880px, calc(100vw - 48px));
  height: min(600px, calc(100dvh - 48px));
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  overflow: hidden;
  outline: none;
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
  transform-origin: center;
  animation: settings-modal-in var(--openbot-duration-overlay) var(--openbot-ease-out) both;
  will-change: transform, opacity;
}
.settings-modal-nav {
  display: grid;
  gap: var(--openbot-space-1);
}
.settings-modal-nav-item {
  position: relative;
  width: 100%;
  height: auto;
  min-height: var(--openbot-control-md);
  display: grid;
  grid-template-columns: var(--openbot-icon-md) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-2);
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  padding: 0 var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font: inherit;
  font-size: var(--openbot-text-md);
  text-align: left;
  transition: background-color var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease;
}
.settings-modal-nav-item svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: var(--openbot-icon-stroke);
}
.settings-modal-nav-item[aria-current="page"] {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}
.settings-modal-nav-item {
  cursor: pointer;
}
.settings-modal-nav-item:focus-visible {
  outline: 0;
  box-shadow: var(--openbot-focus-ring);
}
@media (hover: hover) and (pointer: fine) {
  .settings-modal-nav-item:not([aria-current="page"]):hover {
    background: var(--openbot-hover);
    color: var(--openbot-text-primary);
  }
}
.settings-modal-main {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--openbot-bg-canvas);
}
.settings-modal-footer {
  display: contents;
}
.settings-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--openbot-space-4);
  padding: var(--openbot-space-6) var(--openbot-space-6) var(--openbot-space-4);
}
.settings-modal-title {
  margin: 0;
  font-size: var(--openbot-text-2xl);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-2xl);
  letter-spacing: var(--openbot-tracking-tight);
}
.settings-modal-description {
  margin: var(--openbot-space-1) 0 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.settings-modal-scroll-frame {
  position: relative;
  min-height: 0;
  overflow: hidden;
}
.settings-modal-scroll-frame::before, .settings-modal-scroll-frame::after {
  position: absolute;
  right: var(--openbot-space-2);
  left: 0;
  z-index: 1;
  height: var(--openbot-space-8);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--openbot-duration-normal) ease;
  content: "";
}
.settings-modal-scroll-frame::before {
  top: 0;
  background: linear-gradient( to bottom, var(--openbot-bg-canvas) 0%, var(--openbot-bg-canvas) 28%, var(--openbot-bg-canvas-clear) 100% );
}
.settings-modal-scroll-frame::after {
  bottom: 0;
  background: linear-gradient( to top, var(--openbot-bg-canvas) 0%, var(--openbot-bg-canvas) 28%, var(--openbot-bg-canvas-clear) 100% );
}
.settings-modal-scroll-frame[data-scroll-up]::before, .settings-modal-scroll-frame[data-scroll-down]::after {
  opacity: 1;
}
.settings-modal-content {
  height: 100%;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: var(--openbot-space-6);
  overflow-y: auto;
  padding: 0 var(--openbot-space-6) calc(var(--openbot-space-6) + var(--settings-modal-floating-space, 0px));
  scrollbar-gutter: stable;
}
.settings-modal-tab-panel {
  display: grid;
  align-content: start;
  gap: var(--openbot-space-6);
  animation: settings-modal-tab-in var(--openbot-duration-fast) var(--openbot-ease-out) both;
  will-change: transform, opacity;
}
.settings-modal-tab-panel:not([data-selected]) {
  display: none;
}
.settings-modal-card:is(.ui-card, .ui-item-group) {
  width: 100%;
  display: grid;
  overflow: hidden;
  border: 0;
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  box-shadow: none;
}
.settings-modal-card.ui-card {
  padding: 0 var(--openbot-space-4);
}
.settings-modal-card > .ui-switch-field, .settings-modal-card > .ui-item {
  padding: var(--openbot-space-3) var(--openbot-space-4);
}
.settings-modal-row {
  min-height: 64px;
}
.settings-modal-card > .ui-switch-field {
  width: 100%;
  justify-content: space-between;
  padding: var(--openbot-space-3) var(--openbot-space-4);
}
.settings-modal-card > :not(:first-child) {
  position: relative;
  border-top: 0;
}
.settings-modal-card > :not(:first-child)::before {
  position: absolute;
  top: 0;
  right: var(--openbot-space-4);
  left: var(--openbot-space-4);
  height: 1px;
  background: var(--openbot-border);
  pointer-events: none;
  content: "";
}
.settings-modal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-4);
}
.settings-modal-row-title {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-lg);
}
.settings-modal :where(.ui-item-title, .ui-switch-label) {
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
.settings-modal :where(.ui-item-description, .ui-switch-description), .settings-modal :where(.ui-text)[data-variant="caption"] {
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.settings-modal .ui-item-description {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
.settings-modal :where(.ui-item-content, .ui-switch-copy) {
  gap: var(--openbot-space-0-5);
}
.settings-modal :where(.ui-button, .ui-input, .ui-textarea, .ui-native-select) {
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
.settings-modal :where(.ui-button-variant-default) {
  background: var(--openbot-accent);
  color: var(--openbot-text-primary);
}
.settings-modal :where(.ui-button-variant-outline, .ui-button-variant-secondary) {
  background: var(--openbot-bg-surface-raised);
}
.settings-modal :where(.ui-button-variant-destructive) {
  background: var(--openbot-danger);
  color: var(--openbot-text-primary);
}
.settings-modal .ui-switch[data-checked] {
  background: var(--openbot-accent);
}
.settings-modal .ui-switch-thumb[data-checked] {
  background: var(--openbot-text-primary);
}
@media (hover: hover) and (pointer: fine) {
  .settings-modal :where(.ui-button-variant-default):hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-accent-hover);
  }
  .settings-modal :where(.ui-button-variant-destructive):hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-danger-hover);
    color: var(--openbot-text-primary);
  }
}
:is(.app-settings-modal-shell, .server-settings-modal-shell).settings-modal {
  width: min(920px, calc(100vw - 48px));
  height: min(640px, calc(100dvh - 48px));
  grid-template-columns: 196px minmax(0, 1fr);
  border-radius: var(--openbot-radius-card);
  box-shadow: var(--openbot-shadow-raised), 0 0 0 1px var(--openbot-dialog-ring);
}
:is(.app-settings-modal-shell, .server-settings-modal-shell) .settings-modal-nav {
  gap: var(--openbot-space-1);
}
:is(.app-settings-modal-shell, .server-settings-modal-shell) .settings-modal-nav-item {
  min-height: var(--openbot-control-md);
  padding-inline: var(--openbot-space-3);
  font-size: var(--openbot-text-lg);
}
:is(.app-settings-modal-shell, .server-settings-modal-shell) .settings-modal-nav-item[data-selected] {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}
:is(.app-settings-modal-shell, .server-settings-modal-shell) .settings-modal-header {
  align-items: center;
  padding: var(--openbot-space-4) var(--openbot-space-4) var(--openbot-space-6) var(--openbot-space-8);
}
:is(.app-settings-modal-shell, .server-settings-modal-shell) .settings-modal-description {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
:is(.app-settings-modal-shell, .server-settings-modal-shell) .settings-modal-content {
  gap: var(--openbot-space-6);
  padding: 0 var(--openbot-space-8) calc(var(--openbot-space-8) + var(--settings-modal-floating-space, 0px));
}
:is(.app-settings-modal-shell, .server-settings-modal-shell) .settings-modal-tab-panel {
  gap: var(--openbot-space-6);
  animation: none;
  will-change: auto;
}
:is(.app-settings-modal-shell, .server-settings-modal-shell) .ui-settings-section {
  gap: var(--openbot-space-2);
}
:is(.app-settings-modal-shell, .server-settings-modal-shell) .ui-settings-section-header {
  padding-inline: 0;
}
:is(.app-settings-modal-shell, .server-settings-modal-shell) .ui-settings-section-heading {
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.provider-picker-embedded {
  border: 0;
}
.provider-picker-embedded .provider-picker-list {
  overflow: hidden;
  border: 0;
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
}
.provider-picker-embedded .provider-picker-option {
  position: relative;
  min-height: 64px;
  border: 0;
  background: transparent;
  padding: 0 var(--openbot-space-4);
}
.provider-picker-embedded .provider-picker-option-selection {
  min-height: 64px;
  padding: var(--openbot-space-3) 0;
}
.provider-picker-embedded .provider-picker-check-error.provider-picker-used-by {
  margin-top: calc(-1 * var(--openbot-space-4));
  padding: 0 0 var(--openbot-space-3) 54px;
}
.provider-picker-embedded .provider-picker-accounts {
  margin-top: calc(-1 * var(--openbot-space-2));
  padding: 0 0 var(--openbot-space-2) 54px;
}
.provider-picker-embedded .provider-picker-option + .provider-picker-option, .provider-picker-embedded .provider-picker-option-custom {
  border-top: 0;
}
.provider-picker-embedded .provider-picker-option + .provider-picker-option::before, .provider-picker-embedded .provider-picker-option-custom::before {
  position: absolute;
  top: 0;
  right: var(--openbot-space-4);
  left: var(--openbot-space-4);
  height: 1px;
  background: var(--openbot-border);
  pointer-events: none;
  content: "";
}
.provider-picker-embedded .provider-picker-actions {
  gap: var(--openbot-space-2);
}
.provider-picker-embedded .provider-picker-install, .provider-picker-embedded .provider-picker-custom-count {
  margin-right: 0;
}
.settings-modal .ui-button-variant-default.provider-picker-install:not(.provider-picker-connect) {
  background: var(--openbot-surface-light);
  color: var(--openbot-text-on-light);
}
@media (hover: hover) and (pointer: fine) {
  .settings-modal .ui-button-variant-default.provider-picker-install:not(.provider-picker-connect):hover:not(:disabled):not( [data-disabled] ) {
    background: var(--openbot-surface-light);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--openbot-surface-light) 82%, transparent);
    }
  }
}
.provider-picker-embedded .provider-picker-option:hover:not(.provider-picker-option-unavailable), .provider-picker-embedded .provider-picker-option:focus-within, .provider-picker-embedded .provider-picker-option-selected {
  background: var(--openbot-bg-control-hover);
}
.settings-modal .provider-picker-name {
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-lg);
}
.settings-modal :where(.provider-picker-email, .provider-picker-check-error) {
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.settings-modal .provider-picker-account .provider-picker-name {
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.settings-modal .provider-picker-account .provider-picker-email {
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.settings-modal .provider-picker-status {
  font-variant-numeric: tabular-nums;
}
.app-settings-modal-shell .settings-modal-select {
  width: 168px;
}
.app-settings-modal-shell .settings-modal-select .ui-select-trigger {
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-secondary);
}
.app-settings-modal-shell .settings-modal-update-track-select {
  width: 112px;
}
.app-settings-modal-shell .settings-modal-update-actions {
  flex-wrap: wrap;
}
.app-settings-modal-shell .settings-modal-update-status {
  text-wrap: pretty;
}
.app-settings-modal-shell .settings-modal-update-status-active {
  color: var(--openbot-accent);
}
.app-settings-modal-shell .settings-modal-error {
  color: var(--openbot-danger);
}
.settings-identity-name-row.ui-item, .settings-identity-image-row.ui-item {
  min-height: 72px;
}
.settings-identity-name-control {
  --settings-identity-error-duration: 280ms;
  position: relative;
  width: 220px;
  height: var(--openbot-control-md);
}
.settings-identity-name-input.ui-input {
  width: 100%;
  transition: border-color var(--openbot-duration-normal) ease-out;
  will-change: transform;
}
.settings-identity-name-input.is-shaking {
  animation: settings-identity-name-shake 280ms linear;
}
.settings-identity-name-error {
  position: absolute;
  top: calc(100% + var(--openbot-space-0-5));
  right: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--settings-identity-error-duration) ease-out, visibility 0s linear var(--settings-identity-error-duration);
}
.settings-identity-name-control[data-invalid] .settings-identity-name-error {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--settings-identity-error-duration) ease-out, visibility 0s linear;
}
.settings-identity-image-control {
  gap: var(--openbot-space-2);
}
.settings-identity-image-picker {
  position: relative;
  display: flex;
}
.settings-identity-image-trigger {
  position: relative;
  width: calc(var(--openbot-control-xl) + var(--openbot-space-2));
  height: calc(var(--openbot-control-xl) + var(--openbot-space-2));
  overflow: hidden;
}
.settings-modal-save-bar {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-4);
  border-top: 1px solid var(--openbot-border);
  background: var(--openbot-bg-surface);
  padding: var(--openbot-space-3) var(--openbot-space-6);
}
.settings-modal-save-actions {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
}
.settings-modal-readonly-value {
  min-width: 180px;
  max-width: 300px;
  overflow-wrap: anywhere;
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
  text-align: right;
  user-select: text;
}
.settings-modal-profile-photo-trigger {
  border-radius: var(--openbot-radius-pill);
}
.settings-modal-avatar {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-hover);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
}
.settings-modal-avatar > img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  outline: 1px solid var(--openbot-image-outline);
  outline-offset: -1px;
}
@keyframes settings-identity-name-shake {
  0%, 100% {
    transform: translateX(0);
  }
  28.57% {
    transform: translateX(6px);
  }
  57.14% {
    transform: translateX(-6px);
  }
  78.57% {
    transform: translateX(4px);
  }
}
@keyframes settings-modal-tab-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes settings-modal-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.965);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (max-width: 720px) {
  .settings-modal {
    width: calc(100vw - 24px);
    height: calc(100dvh - 24px);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  .settings-modal-nav {
    display: flex;
    overflow-x: auto;
  }
  .settings-modal-nav-item {
    width: auto;
    flex: 0 0 auto;
  }
  .settings-modal-header {
    padding: var(--openbot-space-4);
  }
  .settings-modal-content {
    gap: var(--openbot-space-4);
    padding: 0 var(--openbot-space-4) calc(var(--openbot-space-4) + var(--settings-modal-floating-space, 0px));
  }
  :is(.app-settings-modal-shell, .server-settings-modal-shell).settings-modal {
    width: calc(100vw - 24px);
    height: calc(100dvh - 24px);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  :is(.app-settings-modal-shell, .server-settings-modal-shell) .settings-modal-header {
    padding: var(--openbot-space-4);
  }
  :is(.app-settings-modal-shell, .server-settings-modal-shell) .settings-modal-content, :is(.app-settings-modal-shell, .server-settings-modal-shell) .settings-modal-tab-panel {
    gap: var(--openbot-space-6);
  }
  :is(.app-settings-modal-shell, .server-settings-modal-shell) .settings-modal-content {
    padding: 0 var(--openbot-space-4) var(--openbot-space-4);
  }
  .settings-identity-name-row, .settings-identity-image-row, .settings-modal-account-email-row {
    align-items: flex-start;
    flex-direction: column;
  }
  .settings-identity-name-control {
    width: min(320px, 100%);
    max-width: 320px;
    height: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--openbot-control-md) var(--openbot-leading-sm);
    align-items: stretch;
    row-gap: var(--openbot-space-0-5);
  }
  .settings-identity-name-error {
    position: static;
  }
  .settings-identity-image-control, .settings-modal-account-email-row .ui-item-actions {
    width: 100%;
    max-width: none;
    justify-content: space-between;
  }
  .settings-modal-readonly-value {
    min-width: 0;
    max-width: none;
    text-align: left;
  }
  .settings-modal-save-bar {
    padding-inline: var(--openbot-space-4);
  }
}
@media (max-width: 520px) {
  .settings-modal-save-bar {
    align-items: flex-start;
    flex-direction: column;
  }
  .settings-modal-save-actions {
    width: 100%;
    justify-content: flex-end;
  }
  .app-settings-modal-shell .settings-modal-row.ui-item {
    align-items: flex-start;
    flex-direction: column;
  }
  .app-settings-modal-shell .settings-modal-row .ui-item-actions, .app-settings-modal-shell :is(.settings-modal-select, .settings-modal-update-track-select) {
    width: 100%;
  }
  .app-settings-modal-shell .settings-modal-update-actions {
    justify-content: flex-end;
  }
}
@media (prefers-reduced-motion: reduce) {
  .settings-modal {
    animation: none;
  }
  .settings-modal-scroll-frame::before, .settings-modal-scroll-frame::after {
    transition: none;
  }
  .settings-modal-tab-panel {
    animation: none;
  }
  .settings-identity-name-input.is-shaking {
    animation: none;
    transform: none;
  }
}
.settings-panel .settings-identity-name-row {
  align-items: flex-start;
  flex-direction: column;
}
.settings-panel .settings-identity-name-control {
  width: 100%;
}
.settings-modal-crumbs {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.settings-modal .settings-modal-crumb-parent {
  min-width: 0;
  height: auto;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  color: var(--openbot-text-muted);
  margin-block: calc(-1 * var(--openbot-space-1) - 1px);
  margin-inline: calc(-1 * var(--openbot-space-2) - 1px);
  padding: var(--openbot-space-1) var(--openbot-space-2);
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .settings-modal .settings-modal-crumb-parent:hover:not(:disabled) {
    background: transparent;
    color: var(--openbot-text-primary);
  }
}
.settings-modal-crumb-separator {
  flex: 0 0 auto;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
}
.settings-modal-crumb-current {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-provider-section {
  display: grid;
  gap: var(--openbot-space-2);
}
.settings-dynamic-island-size > .ui-slider-field, .settings-dynamic-island-preview {
  padding: var(--openbot-space-3) var(--openbot-space-4);
}
.settings-dynamic-island-server-mark {
  --server-gradient-logo-size: 32px;
  --server-gradient-logo-radius: var(--openbot-radius-md);
}
.settings-dynamic-island-server-mark > img {
  width: 32px;
  height: 32px;
  border-radius: var(--openbot-radius-md);
}
.settings-dynamic-island-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--openbot-space-3);
}
.settings-dynamic-island-preview-display {
  min-width: 0;
  display: grid;
  gap: var(--openbot-space-1-5);
  margin: 0;
}
.settings-dynamic-island-preview-bar {
  height: 64px;
  display: flex;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-canvas);
  box-shadow: inset 0 0 0 1px var(--openbot-border);
}
.settings-dynamic-island-preview-fit {
  margin-top: 1px;
  display: flex;
  justify-content: center;
  transform-origin: top center;
  scale: var(--settings-dynamic-island-preview-scale, 1);
  transition: scale var(--openbot-duration-slow) var(--openbot-ease-out);
}
.settings-dynamic-island-preview-caption {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-align: center;
}
.settings-voice-key {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-top: var(--openbot-space-2);
}
.settings-voice-key > .ui-input {
  flex: 1;
  min-width: 0;
}
.settings-sound-theme-row {
  flex-wrap: wrap;
}
.settings-sound-theme-row > .sound-theme-picker {
  flex-basis: 100%;
}
.window-rail {
  display: flex;
  width: 52px;
  min-height: 0;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: calc(var(--left-header-height, 38px) + var(--openbot-space-1)) 0 var(--openbot-space-3);
  -webkit-app-region: drag;
}
.window-rail-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-1-5);
  -webkit-app-region: no-drag;
}
.window-rail-button {
  position: relative;
  display: flex;
  width: var(--openbot-control-lg);
  height: var(--openbot-control-lg);
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--openbot-radius-lg);
  background: transparent;
  padding: 0;
  color: var(--openbot-text-muted);
  font: inherit;
  cursor: pointer;
  -webkit-app-region: no-drag;
}
@media (hover: hover) and (pointer: fine) {
  .window-rail-button:hover {
    background: var(--openbot-bg-control-hover);
    color: var(--openbot-text-primary);
  }
}
.window-rail-button[aria-current="page"], .window-rail-button[aria-current="page"]:hover:not(:disabled):not([data-disabled]) {
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
}
.window-rail-button:focus-visible {
  outline: 0;
  box-shadow: var(--openbot-focus-ring);
}
.window-rail-button svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
}
.window-rail-notice {
  position: absolute;
  top: var(--openbot-space-1-5);
  right: var(--openbot-space-1-5);
  width: var(--openbot-space-2);
  height: var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-badge-new);
}
.window-rail-usage-card .account-usage-refresh {
  display: none;
}
.account-usage-popover.window-rail-usage-card {
  transition: none;
  transform-origin: var(--kb-tooltip-content-transform-origin);
}
.window-rail-button.window-rail-usage {
  border-radius: var(--openbot-radius-pill);
}
.window-rail-button .window-rail-usage-ring {
  position: absolute;
  inset: 1px;
  width: 34px;
  height: 34px;
  transform: rotate(-90deg);
}
.window-rail-button .window-rail-usage-logo {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  overflow: visible;
  fill: var(--openbot-provider-current);
}
.window-rail-usage-track {
  stroke: currentcolor;
  opacity: 0.15;
}
.window-rail-usage-arc {
  stroke: var(--openbot-success);
}
.window-rail-usage-arc[data-usage-tone="warning"] {
  stroke: var(--openbot-warning);
}
.window-rail-usage-arc[data-usage-tone="critical"] {
  stroke: var(--openbot-danger);
}
.app-window {
  --window-frame: var(--openbot-bg-canvas);
  @supports (color: color-mix(in lab, red, red)) {
    --window-frame: color-mix(in srgb, var(--openbot-bg-canvas) 50%, var(--openbot-bg-notch));
  }
  --window-edge: var(--openbot-space-1);
  --window-hairline-height: var(--openbot-icon-lg);
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 0;
  grid-template-columns: auto minmax(0, 1fr);
  background: var(--window-frame);
}
.app-window > .window-rail[hidden] {
  display: none;
}
.app-window > .app-frame {
  grid-column: -2;
}
@media (max-width: 720px) {
  .app-window > .window-rail {
    display: none;
  }
}
@media (min-width: 721px) {
  .app-window > .app-frame-edge > .sidebar:not(.sidebar-compact) .sidebar-topbar {
    position: relative;
  }
  .app-window > .app-frame-platform-darwin:not(.app-frame-with-server-rail) > .sidebar:not(.sidebar-compact) .sidebar-topbar {
    padding-left: var(--openbot-space-6);
  }
  .app-window > .app-frame-edge {
    position: relative;
    isolation: isolate;
    padding: 0 calc(var(--window-edge) + 1px) calc(var(--window-edge) + 1px) 0;
    background: var(--window-frame);
  }
  .app-window > .app-frame-edge::before {
    position: absolute;
    z-index: -1;
    inset: calc(var(--left-header-height) - 1px) var(--window-edge) var(--window-edge) 0;
    border: 1px solid var(--openbot-border);
    border-radius: var(--openbot-radius-card);
    background: var(--openbot-bg-canvas);
    content: "";
    pointer-events: none;
  }
  .app-window > .app-frame-edge.app-frame-with-server-rail::before {
    left: var(--server-rail-width);
  }
  .app-window > .app-frame-edge > .server-rail {
    background: var(--window-frame);
  }
  .app-window > .app-frame-edge > .sidebar, .app-window > .app-frame-edge :is(.conversation-panel, .direct-conversation, .diagram-view), .app-window > .app-frame-edge :is(.settings-panel, .browser-panel) {
    background: transparent;
  }
  .app-window > .app-frame-edge :is(.conversation-panel, .direct-conversation)::before {
    content: none;
  }
  .app-window > .app-frame-edge > .sidebar::before {
    inset: var(--left-header-height) 0 0 auto;
    width: 1px;
    border: 0;
    border-radius: 0;
    background: var(--openbot-border);
  }
  .app-window > .app-frame-edge > .sidebar:not(.sidebar-compact) .sidebar-topbar::after, .app-window > .app-frame-edge :is(.settings-panel, .browser-panel) > :is(.settings-panel-header, .file-preview-header, .browser-preview-header)::before {
    position: absolute;
    top: 50%;
    width: 1px;
    height: var(--window-hairline-height);
    translate: 0 -50%;
    background: var(--openbot-border-strong);
    content: "";
    pointer-events: none;
  }
  .app-window > .app-frame-edge > .sidebar:not(.sidebar-compact) .sidebar-topbar::after {
    right: 0;
  }
  .app-window > .app-frame-edge :is(.settings-panel, .browser-panel) {
    border-left: 0;
  }
  .app-window > .app-frame-edge :is(.settings-panel, .browser-panel)::before {
    inset: calc(var(--left-header-height) - 1px) auto 0 0;
    width: 1px;
    border: 0;
    border-radius: 0;
    background: var(--openbot-border);
  }
  .app-window > .app-frame-edge :is(.settings-panel, .browser-panel) > :is(.settings-panel-header, .file-preview-header, .browser-preview-header) {
    position: relative;
  }
  .app-window > .app-frame-edge :is(.settings-panel, .browser-panel) > :is(.settings-panel-header, .file-preview-header, .browser-preview-header)::before {
    left: 0;
  }
  .app-window > .app-frame-edge .side-panel-docked > :is(.settings-panel, .browser-panel)::before {
    top: 0;
  }
  .app-window > .app-frame-edge .side-panel-docked > :is(.settings-panel, .browser-panel) > :is(.settings-panel-header, .file-preview-header, .browser-preview-header)::before {
    content: none;
  }
  .app-window > .app-frame-edge .side-panel-maximized > :is(.settings-panel, .browser-panel) {
    border-bottom-right-radius: calc(var(--openbot-radius-card) - 1px);
    background: var(--openbot-bg-canvas);
  }
  .app-window > .app-frame-edge .diagram-view-body {
    border-top: 0;
    border-right: 0;
    border-radius: 0 0 calc(var(--openbot-radius-card) - 1px) 0;
  }
  .app-window > .app-frame-edge .conversation-header-actions {
    gap: var(--openbot-space-2);
  }
  .app-window > .app-frame-edge .conversation-header :is(.provider-model-trigger, .header-panel-toggle) {
    height: var(--openbot-control-sm);
    border-color: transparent;
    border-radius: var(--openbot-radius-md);
    background: transparent;
    box-shadow: none;
    color: var(--openbot-text-secondary);
  }
  .app-window > .app-frame-edge .conversation-header .header-panel-toggle {
    width: var(--openbot-control-sm);
    min-width: var(--openbot-control-sm);
    padding: 0;
    color: var(--openbot-text-muted);
  }
  @media (hover: hover) and (pointer: fine) {
    .app-window > .app-frame-edge .conversation-header :is(.provider-model-trigger, .header-panel-toggle):hover {
      border-color: transparent;
      background: var(--openbot-bg-control-hover);
      color: var(--openbot-text-primary);
    }
  }
  .app-window > .app-frame-edge .conversation-header :is(.provider-model-trigger, .header-panel-toggle):is([aria-expanded="true"], [data-expanded]):not( .computer-button-agent-active, .side-panel-toggle ) {
    border-color: transparent;
    background: var(--openbot-bg-control-active);
    color: var(--openbot-text-primary);
  }
  .app-window > .app-frame-edge .conversation-header-actions > .side-panel-toggle {
    position: relative;
    margin-left: calc(var(--openbot-space-2) + 1px);
    overflow: visible;
  }
  .app-window > .app-frame-edge .conversation-header-actions > .side-panel-toggle::before {
    position: absolute;
    top: 50%;
    left: calc(-1 * var(--openbot-space-2) - 1px);
    width: 1px;
    height: var(--window-hairline-height);
    translate: 0 -50%;
    background: var(--openbot-border-strong);
    content: "";
    pointer-events: none;
  }
  .app-frame-edge > .window-page > :is(.agent-usage, .schedule-pane, .tasks-page) {
    background: transparent;
  }
  .app-window > .app-frame-edge > .window-page .agent-usage-header, .app-window > .app-frame-edge > .window-page .routine-planner-title {
    flex: none;
    height: var(--left-header-height);
    flex-wrap: nowrap;
    padding: 0 var(--openbot-space-3);
    border-bottom: 0;
    -webkit-app-region: drag;
  }
  .app-window > .app-frame-edge > .window-page :is(.agent-usage-header, .routine-planner-title) > :is(.agent-usage-identity, .agent-usage-controls, .routine-planner-identity, p) {
    flex-wrap: nowrap;
    gap: var(--openbot-space-2);
    -webkit-app-region: no-drag;
  }
  .app-window > .app-frame-edge > .window-page :is(.agent-usage-identity, .routine-planner-identity) .ui-icon-button {
    margin-left: 0;
  }
  .app-window > .app-frame-edge > .window-page :is(.agent-usage-identity, .routine-planner-title) h2 {
    gap: var(--openbot-space-2);
    font-size: var(--openbot-text-md);
    font-weight: var(--openbot-weight-medium);
    white-space: nowrap;
    color: var(--openbot-text-primary);
  }
  .app-window > .app-frame-edge > .window-page :is(.agent-usage-identity, .routine-planner-identity) {
    overflow: hidden;
  }
  .app-window > .app-frame-edge > .window-page :is(.agent-usage-controls, .routine-planner-title > p) {
    flex: none;
  }
  .app-window > .app-frame-edge > .window-page :is(.agent-usage-header, .routine-planner-title) :is(.ui-select-trigger, .ui-icon-button) {
    height: var(--openbot-control-sm);
    border-color: transparent;
    border-radius: var(--openbot-radius-md);
    background: transparent;
    box-shadow: none;
    color: var(--openbot-text-secondary);
  }
  .app-window > .app-frame-edge > .window-page :is(.agent-usage-header, .routine-planner-title) .ui-icon-button {
    width: var(--openbot-control-sm);
  }
  @media (hover: hover) {
    .app-window > .app-frame-edge > .window-page :is(.agent-usage-header, .routine-planner-title) :is(.ui-select-trigger, .ui-icon-button):hover {
      background: var(--openbot-bg-control-hover);
      color: var(--openbot-text-primary);
    }
  }
  .app-window > .app-frame-edge > .window-page > .schedule-pane {
    padding: 0;
    overflow: hidden;
  }
  .app-window > .app-frame-edge > .window-page .routine-planner {
    height: 100%;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0;
  }
  .app-window > .app-frame-edge > .window-page .routine-planner-header {
    gap: 0;
  }
  .app-window > .app-frame-edge > .window-page .routine-planner-toolbar {
    padding: var(--openbot-space-4) var(--openbot-space-6) 0;
  }
  .app-window > .app-frame-edge > .window-page .routine-planner-body {
    min-height: 0;
    overflow-y: auto;
    padding: var(--openbot-space-4) var(--openbot-space-6) var(--openbot-space-6);
  }
  .app-window > .app-frame-edge > .window-page > .tasks-page {
    box-sizing: border-box;
    padding: var(--left-header-height) calc(var(--window-edge) + 1px) calc(var(--window-edge) + 1px) 0;
  }
  .app-window > .app-frame-edge > .window-page .tasks-page-header {
    position: absolute;
    top: 0;
    right: 0;
    left: var(--left-panel-width);
    height: var(--left-header-height);
    padding: 0 var(--openbot-space-3);
    -webkit-app-region: drag;
  }
  .app-window > .app-frame-edge > .window-page .tasks-page-header h2 {
    font-size: var(--openbot-text-md);
    font-weight: var(--openbot-weight-medium);
    white-space: nowrap;
  }
  .app-window > .app-frame-edge > .window-page .tasks-page-column {
    padding-top: var(--openbot-space-6);
  }
  .app-window > .app-frame-edge > .window-page .tasks-page-side {
    border-bottom-right-radius: calc(var(--openbot-radius-card) - 1px);
  }
  .app-frame-edge:not([data-window-page-kind="agents"]) > .window-page {
    position: absolute;
    grid-row: 1 / -1;
    grid-column: 1 / -1;
    inset: 0 0 0 1px;
  }
  .app-frame-edge[data-window-page-kind="settings"] > .window-page {
    top: var(--left-header-height);
  }
  .app-frame-edge[data-window-page-kind="titled"] > .window-page {
    pointer-events: none;
  }
  .app-frame-edge.app-frame-with-server-rail:not([data-window-page-kind="agents"]) > .window-page {
    left: calc(var(--server-rail-width) + 1px);
  }
  .app-frame-edge:not([data-window-page-kind="agents"]) > .sidebar > :not(.sidebar-topbar), .app-frame-edge:not([data-window-page-kind="agents"]) > .left-panel-resizer {
    visibility: hidden;
  }
  .app-frame-edge:not([data-window-page-kind="agents"]) > .sidebar .sidebar-new-button {
    display: none;
  }
  .app-frame-edge[data-window-page-kind="titled"] > .sidebar::before {
    display: none;
  }
  .app-window > .app-frame-edge[data-window-page-kind="titled"] > .window-page :is(.agent-usage-header, .routine-planner-title, .skills-marketplace-topbar) {
    margin-left: var(--left-panel-width);
  }
  .app-frame-edge[data-window-page-kind="titled"] > .window-page :is( .agent-usage-header, .routine-planner-title, .agent-usage-body, .routine-planner-toolbar, .routine-planner-body, .marketplace-crumbs, .skills-marketplace-body, .tasks-page-header, .tasks-page-scroll, .tasks-page-side ) {
    pointer-events: auto;
  }
  .app-window > .app-frame-edge > .window-page > .skills-marketplace-page {
    grid-template-rows: var(--left-header-height) minmax(0, 1fr);
  }
  .app-window > .app-frame-edge > .window-page .skills-marketplace-topbar {
    min-height: 0;
    padding: 0 var(--openbot-space-3);
    border-bottom: 0;
    -webkit-app-region: drag;
  }
  .app-window > .app-frame-edge > .window-page .marketplace-crumbs {
    flex: 0 1 auto;
    -webkit-app-region: no-drag;
  }
  .app-window > .app-frame-edge > .window-page .skills-marketplace-topbar .marketplace-title {
    font-size: var(--openbot-text-md);
    font-weight: var(--openbot-weight-medium);
    white-space: nowrap;
  }
  .app-window > .app-frame-edge > .window-page :is(.agent-usage-identity, .routine-planner-identity, .tasks-page-header) > .ui-icon-button, .app-window > .app-frame-edge > .window-page :is(.agent-usage-identity, .routine-planner-identity, .tasks-page-header) > h2 > span {
    display: none;
  }
  .app-frame-edge > .window-page :is(.agent-usage-identity, .routine-planner-identity, .tasks-page-header) h2:focus {
    outline: none;
  }
}
.settings-page {
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 0;
  grid-template-columns: max(var(--left-panel-width, 280px), 220px) minmax(0, 1fr);
}
.settings-page-nav {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  gap: var(--openbot-space-1);
  overflow: hidden;
  border-right: 1px solid var(--openbot-border);
  padding: var(--openbot-space-4) var(--openbot-space-3) 0;
}
.settings-page-sections, .settings-page-results {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  padding-bottom: var(--openbot-space-3);
}
.settings-page-title {
  margin: 0 0 var(--openbot-space-3);
  padding: 0 var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-lg);
}
.settings-page-title:focus {
  outline: none;
}
.settings-page-search {
  flex: none;
  border-radius: var(--openbot-radius-pill);
  padding: 0 var(--openbot-space-3);
}
.settings-page-search > svg {
  flex: none;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.settings-page-search input {
  height: 100%;
  padding: 0;
}
.settings-page-sections[hidden] {
  display: none;
}
.settings-page-empty {
  margin: var(--openbot-space-4) 0 var(--openbot-space-1);
  padding: 0 var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.settings-page-server {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
}
.settings-page-server .server-menu-mark {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.settings-page-nav-group .settings-modal-nav-item {
  padding-inline: var(--openbot-space-3);
}
.settings-page-nav-group .settings-modal-nav-item[data-selected] {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}
.settings-page-results {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-0-5);
  margin: var(--openbot-space-2) 0 0;
  padding-inline: 0;
  list-style: none;
}
.settings-page-result {
  display: flex;
  width: 100%;
  height: auto;
  flex-direction: column;
  align-items: stretch;
  gap: var(--openbot-space-0-5);
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .settings-page-result:hover {
    background: var(--openbot-bg-control-hover);
  }
}
.settings-page-result:focus-visible {
  outline: 0;
  box-shadow: var(--openbot-focus-ring);
}
.settings-page-result-section {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.settings-page-result-section svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.settings-page-result-title {
  overflow: hidden;
  padding-left: calc(var(--openbot-icon-sm) + var(--openbot-space-2));
  font-size: var(--openbot-text-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-page-content {
  position: relative;
  min-width: 0;
  min-height: 0;
}
.settings-page-content > .settings-modal.settings-modal-page {
  width: 100%;
  height: 100%;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  animation: none;
  will-change: auto;
}
.settings-page-content > .settings-modal-page > .settings-modal-main {
  background: transparent;
}
.settings-page-content > .settings-modal-page :is(.settings-modal-header, .settings-modal-content) {
  width: 100%;
  max-width: 784px;
  margin-inline: auto;
}
.settings-page-content [data-search-match] {
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control-active);
}
@media (max-width: 720px) {
  .settings-page {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  .settings-page-nav {
    border-right: 0;
    border-bottom: 1px solid var(--openbot-border);
    padding: var(--openbot-space-3) var(--openbot-space-3) 0;
  }
  .settings-page-title {
    margin-bottom: var(--openbot-space-2);
  }
  .settings-page-sections, .settings-page-results {
    max-height: 40dvh;
    padding-bottom: var(--openbot-space-2);
  }
}
.opencode-key-backdrop {
  z-index: calc(var(--openbot-layer-dialog) + 1);
}
.opencode-key-dialog {
  width: min(400px, 100%);
  max-height: calc(100dvh - var(--openbot-space-6) * 2);
  overflow-y: auto;
  outline: 0;
  border-radius: var(--openbot-radius-xl);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-6);
  color: var(--openbot-text-primary);
  animation: opencode-key-dialog-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}
.opencode-key-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--openbot-space-1);
}
.opencode-key-title {
  margin: 0;
  font-size: var(--openbot-text-xl);
  line-height: var(--openbot-leading-xl);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: var(--openbot-tracking-tight);
}
.opencode-key-description {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.opencode-key-status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success);
}
.opencode-key-form {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
  margin: var(--openbot-space-4) 0 0;
}
.opencode-key-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
}
@keyframes opencode-key-dialog-in {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
}
.settings-mobile-connect-code-collapse {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows var(--openbot-duration-overlay) var(--openbot-ease-out), opacity var(--openbot-duration-normal) ease-out;
}
@starting-style {
  .settings-mobile-connect-code-collapse {
    grid-template-rows: 0fr;
    opacity: 0;
  }
}
.settings-mobile-connect-code-collapse[data-collapsing] {
  grid-template-rows: 0fr;
  opacity: 0;
}
.settings-mobile-connect-code-collapse-body {
  min-height: 0;
  overflow: hidden;
}
.settings-mobile-connect-qr-stage {
  position: relative;
  flex: 0 0 auto;
}
.settings-mobile-connect-qr-stage .ui-qr-code {
  transition: opacity var(--openbot-duration-normal) ease-out, filter var(--openbot-duration-overlay) ease-out, transform var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.settings-mobile-connect-qr-stage[data-success] .ui-qr-code {
  opacity: 0.18;
  filter: blur(2px);
  transform: scale(0.97);
}
.settings-mobile-connect-success-mark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--openbot-success);
  animation: settings-mobile-connect-success-enter var(--openbot-duration-overlay) var(--openbot-ease-out) both;
}
.settings-mobile-connect-success-mark::before {
  position: absolute;
  width: 84px;
  height: 84px;
  border: 1px solid var(--openbot-success);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success-soft);
  content: "";
  animation: settings-mobile-connect-success-ring 600ms var(--openbot-ease-out) both;
}
.settings-mobile-connect-success-mark > svg {
  position: relative;
  width: 58px;
  height: 58px;
  padding: var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface-raised);
  filter: drop-shadow(0 6px 16px var(--openbot-shadow-popover-ambient));
  stroke-width: var(--openbot-icon-stroke);
  animation: settings-mobile-connect-success-pop 420ms var(--openbot-ease-out) both;
}
.settings-mobile-connect-success-mark > svg path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: settings-mobile-connect-check-draw 360ms var(--openbot-duration-fast) var(--openbot-ease-out) forwards;
}
.settings-mobile-connect-code-copy {
  max-width: 240px;
  display: grid;
  gap: var(--openbot-space-2);
}
.settings-mobile-connect-code-title {
  font-weight: var(--openbot-weight-semibold);
}
.settings-mobile-connect-expiry {
  color: var(--openbot-accent-text);
  font-variant-numeric: tabular-nums;
}
.settings-mobile-connect-success-title {
  color: var(--openbot-success);
}
.settings-mobile-connect-expired {
  min-height: 196px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  text-align: center;
}
.settings-mobile-connect-expired > svg {
  width: calc(var(--openbot-icon-lg) + var(--openbot-space-3));
  height: calc(var(--openbot-icon-lg) + var(--openbot-space-3));
  margin-bottom: var(--openbot-space-2);
}
.settings-mobile-devices {
  display: grid;
  gap: var(--openbot-space-3);
}
.settings-mobile-devices-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
}
.settings-mobile-devices-heading h3 {
  margin: 0;
  font-weight: var(--openbot-weight-medium);
}
.settings-mobile-devices-states {
  display: grid;
}
.settings-mobile-devices-state {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(-4px);
  transition: grid-template-rows var(--openbot-duration-overlay) var(--openbot-ease-out), opacity var(--openbot-duration-normal) ease-out, transform var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.settings-mobile-devices-state[data-expanded] {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: translateY(0);
}
.settings-mobile-devices-state-body {
  min-height: 0;
  overflow: hidden;
}
.settings-mobile-devices-empty {
  min-height: 88px;
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  padding: var(--openbot-space-4);
  color: var(--openbot-text-muted);
}
.settings-mobile-devices-empty > svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  flex: 0 0 auto;
}
.settings-mobile-devices-empty > div {
  display: grid;
  gap: var(--openbot-space-1);
}
.settings-mobile-devices-empty-title {
  color: var(--openbot-text-secondary);
  font-weight: var(--openbot-weight-medium);
}
.settings-mobile-devices-table-frame {
  overflow-x: auto;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
}
.settings-mobile-devices-table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.settings-mobile-devices-table th, .settings-mobile-devices-table td {
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border-bottom: 1px solid var(--openbot-border);
  text-align: left;
  white-space: nowrap;
}
.settings-mobile-devices-table th {
  color: var(--openbot-text-muted);
  font-weight: var(--openbot-weight-medium);
}
.settings-mobile-devices-table tbody tr:last-child td {
  border-bottom: 0;
}
.settings-mobile-device-name {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}
.settings-mobile-device-name svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  color: var(--openbot-text-muted);
}
.settings-mobile-devices-table td.settings-mobile-device-action {
  width: 1%;
  text-align: right;
}
@keyframes settings-mobile-connect-success-enter {
  from {
    opacity: 0;
  }
}
@keyframes settings-mobile-connect-success-ring {
  from {
    opacity: 0.8;
    transform: scale(0.72);
  }
  to {
    opacity: 0;
    transform: scale(1.35);
  }
}
@keyframes settings-mobile-connect-success-pop {
  from {
    opacity: 0;
    transform: scale(0.62) rotate(-8deg);
  }
  70% {
    transform: scale(1.08) rotate(1deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}
@keyframes settings-mobile-connect-check-draw {
  to {
    stroke-dashoffset: 0;
  }
}
@media (max-width: 720px) {
  .settings-mobile-connect-link-code {
    align-items: center;
    flex-direction: column;
    text-align: center;
  }
  .settings-mobile-connect-code-copy {
    max-width: 320px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .settings-mobile-connect-code-collapse, .settings-mobile-connect-qr-stage .ui-qr-code, .settings-mobile-devices-state {
    transition: none;
  }
  .settings-mobile-connect-success-mark, .settings-mobile-connect-success-mark::before, .settings-mobile-connect-success-mark > svg, .settings-mobile-connect-success-mark > svg path {
    animation: none;
  }
  .settings-mobile-connect-success-mark > svg path {
    stroke-dashoffset: 0;
  }
}
.settings-mobile-app-install {
  display: contents;
}
.settings-mobile-connect-step.ui-item-media {
  min-width: 24px;
  height: 24px;
  padding-inline: var(--openbot-space-1-5);
  display: inline-grid;
  flex: 0 0 auto;
  align-self: flex-start;
  place-items: center;
  margin-top: 1px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  font-weight: var(--openbot-weight-medium);
  line-height: 1;
}
.settings-mobile-connect-generate.ui-button {
  min-width: 160px;
}
.settings-mobile-connect-link {
  padding: var(--openbot-space-3) var(--openbot-space-4);
}
.settings-mobile-connect-link-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2) var(--openbot-space-4);
}
.settings-mobile-connect-link-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-2);
}
.settings-mobile-connect-link-reveal {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows var(--openbot-duration-overlay) var(--openbot-ease-out), opacity var(--openbot-duration-normal) ease-out;
}
.settings-mobile-connect-link-reveal[data-expanded] {
  grid-template-rows: 1fr;
  opacity: 1;
}
.settings-mobile-connect-link-code {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-6);
  padding-top: var(--openbot-space-4);
}
@media (prefers-reduced-motion: reduce) {
  .settings-mobile-connect-link-reveal {
    transition: none;
  }
}
.settings-mobile-app-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
}
.settings-mobile-app-tab > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
}
.settings-mobile-app-panels {
  position: relative;
  padding: var(--openbot-space-4);
}
.settings-mobile-app-panels::before {
  position: absolute;
  top: 0;
  right: var(--openbot-space-4);
  left: var(--openbot-space-4);
  height: 1px;
  background: var(--openbot-border);
  pointer-events: none;
  content: "";
}
.settings-mobile-app-panel {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-6);
}
.settings-mobile-app-qr {
  transform: scale(0.96);
  transition: transform var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.settings-mobile-app-panel[data-selected] .settings-mobile-app-qr {
  transform: scale(1);
}
.settings-mobile-app-qr .ui-qr-code-mark {
  gap: 3px;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity var(--openbot-duration-normal) ease-out, transform var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.settings-mobile-app-panel[data-selected] .settings-mobile-app-qr .ui-qr-code-mark {
  opacity: 1;
  transform: scale(1);
  transition-delay: var(--openbot-duration-fast);
}
.settings-mobile-app-qr-platform {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}
.settings-mobile-app-qr-link {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  color: var(--openbot-text-muted-on-light);
  stroke-width: 2.5;
  opacity: 0;
  transform: rotate(-45deg) scale(0.6);
  transition: opacity var(--openbot-duration-normal) ease-out, transform var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.settings-mobile-app-panel[data-selected] .settings-mobile-app-qr-link {
  opacity: 1;
  transform: rotate(0) scale(1);
  transition-delay: calc(var(--openbot-duration-fast) * 2);
}
.settings-mobile-app-qr-logo {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}
.settings-mobile-app-details {
  min-width: 0;
  display: grid;
  justify-items: start;
  gap: var(--openbot-space-2);
}
.settings-mobile-app-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--openbot-space-2);
}
.settings-mobile-app-title {
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-semibold);
}
.settings-mobile-app-steps {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-1-5);
  margin: var(--openbot-space-1) 0;
  padding-left: var(--openbot-space-4);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  list-style: decimal;
}
.settings-mobile-app-steps > li::marker {
  color: var(--openbot-text-dim);
  font-variant-numeric: tabular-nums;
}
.settings-mobile-app-copy > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.settings-mobile-device-platform {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.settings-mobile-device-platform > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
}
.settings-mobile-devices-list {
  display: grid;
  gap: var(--openbot-space-3);
}
.settings-mobile-devices-table tbody tr {
  transition: opacity var(--openbot-duration-overlay) var(--openbot-ease-out);
}
@starting-style {
  .settings-mobile-devices-table tbody tr {
    opacity: 0;
  }
}
@media (max-width: 720px) {
  .settings-mobile-app-panel {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media (prefers-reduced-motion: reduce) {
  .settings-mobile-app-qr, .settings-mobile-app-qr .ui-qr-code-mark, .settings-mobile-app-qr-link, .settings-mobile-devices-table tbody tr {
    transition: none;
  }
  .settings-mobile-app-qr, .settings-mobile-app-qr .ui-qr-code-mark, .settings-mobile-app-qr-link {
    transform: none;
  }
}
.hosted-sites-overview {
  display: grid;
  gap: var(--openbot-space-1);
}
.hosted-sites-list .hosted-sites-row {
  min-height: 72px;
  align-items: center;
}
.hosted-sites-list .ui-item-content {
  min-width: 0;
}
.hosted-sites-link.ui-button {
  width: min(100%, 320px);
  justify-content: flex-start;
  color: var(--openbot-accent-text);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-md);
  text-align: left;
}
.hosted-sites-link-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hosted-sites-actions {
  flex-wrap: nowrap;
  justify-content: flex-end;
}
@media (max-width: 700px) {
  .hosted-sites-list .hosted-sites-row {
    align-items: flex-start;
    flex-direction: column;
  }
  .hosted-sites-actions {
    width: 100%;
    justify-content: flex-start;
  }
  .hosted-sites-actions > .ui-button {
    flex: 1;
  }
}
.integration-logo-tile {
  --integration-tile: 36px;
  display: inline-grid;
  flex: none;
  width: var(--integration-tile);
  height: var(--integration-tile);
  place-items: center;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-primary);
}
.integration-logo-tile[data-size="lg"] {
  --integration-tile: 48px;
  border-radius: var(--openbot-radius-lg);
}
.integration-logo-tile > svg {
  width: 55%;
  height: 55%;
}
.integration-status {
  gap: var(--openbot-space-1);
}
.integration-status-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--openbot-radius-pill);
  background: currentColor;
}
.integration-status[data-status="unavailable"] .integration-status-dot {
  background: var(--openbot-transparent);
  box-shadow: inset 0 0 0 1px currentColor;
}
.integration-detail-header {
  display: flex;
  gap: var(--openbot-space-3);
  align-items: center;
}
.integration-detail-copy {
  display: grid;
  flex: 1;
  gap: var(--openbot-space-1);
  min-width: 0;
}
.integration-detail-title {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
}
.integration-detail-actions {
  display: flex;
  flex: none;
  gap: var(--openbot-space-2);
}
.integration-wizard {
  display: grid;
  gap: var(--openbot-space-4);
  padding: var(--openbot-space-6);
  border-radius: var(--openbot-radius-xl);
  background: var(--openbot-bg-sheet);
  box-shadow: var(--openbot-shadow-dialog);
}
.integration-wizard-head {
  display: grid;
  gap: var(--openbot-space-2);
  justify-items: center;
  text-align: center;
}
.integration-wizard-logos {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
  margin-bottom: var(--openbot-space-2);
}
.integration-wizard-app {
  width: 36px;
  height: 36px;
}
.integration-wizard-link {
  width: 40px;
  height: 2px;
  border-radius: var(--openbot-radius-pill);
  background: radial-gradient(circle, var(--openbot-accent) 0 1px, var(--openbot-transparent) 1.5px) 0 50% / 8px 2px repeat-x;
  animation: integration-wizard-flow 0.6s linear infinite;
}
@keyframes integration-wizard-flow {
  to {
    background-position-x: 8px;
  }
}
.integration-wizard-logos[data-link="connected"] .integration-wizard-link {
  background: var(--openbot-success);
  animation: none;
}
.integration-wizard-logos[data-link="broken"] .integration-wizard-link {
  background: radial-gradient(circle, var(--openbot-border-strong) 0 1px, var(--openbot-transparent) 1.5px) 0 50% / 8px 2px repeat-x;
  animation: none;
}
.integration-wizard-target {
  display: inline-grid;
  border-radius: var(--openbot-radius-md);
}
.integration-wizard-logos[data-link="connecting"] .integration-wizard-target {
  animation: integration-wizard-pulse 1.8s var(--openbot-ease-out) infinite;
}
.integration-wizard-logos[data-link="connected"] .integration-wizard-target {
  box-shadow: 0 0 0 3px var(--openbot-success);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--openbot-success) 30%, var(--openbot-transparent));
  }
}
@keyframes integration-wizard-pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--openbot-accent) 45%, var(--openbot-transparent));
  }
  100% {
    box-shadow: 0 0 0 8px var(--openbot-transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .integration-wizard-link, .integration-wizard-logos[data-link="connecting"] .integration-wizard-target {
    animation: none;
  }
}
.integration-wizard-body {
  display: grid;
  gap: var(--openbot-space-3);
}
.integration-wizard-foot {
  display: flex;
  gap: var(--openbot-space-2);
  justify-content: flex-end;
}
.integration-wizard-foot .ui-button > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.integration-dialog-backdrop {
  z-index: calc(var(--openbot-layer-dialog) + 1);
}
.integration-wizard-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: calc(var(--openbot-layer-dialog) + 1);
  width: min(440px, calc(100vw - var(--openbot-space-6) * 2));
  max-height: calc(100dvh - var(--openbot-space-6) * 2);
  overflow-y: auto;
  outline: 0;
  transform: translate(-50%, -50%);
}
.integration-wizard-dialog h2 {
  margin: 0;
}
.integration-dialog-close {
  position: absolute;
  top: var(--openbot-space-3);
  right: var(--openbot-space-3);
}
.integration-stepper {
  display: flex;
  align-items: center;
  margin: 0 0 var(--openbot-space-2);
  padding: 0;
  list-style: none;
}
.integration-step {
  display: flex;
  align-items: center;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.integration-step + .integration-step::before {
  display: block;
  width: 24px;
  height: 2px;
  margin-inline: var(--openbot-space-1);
  border-radius: var(--openbot-radius-pill);
  background: linear-gradient(to right, var(--openbot-success), var(--openbot-accent)) no-repeat, var(--openbot-border-strong);
  background-size: 0% 100%, auto;
  content: "";
}
.integration-step + .integration-step[data-state="current"]::before {
  background-size: 100% 100%, auto;
  animation: integration-step-fill 0.4s var(--openbot-ease-out);
}
.integration-step + .integration-step[data-state="done"]::before {
  background: linear-gradient(var(--openbot-success), var(--openbot-success)) no-repeat, var(--openbot-border-strong);
  background-size: 100% 100%, auto;
  animation: integration-step-fill 0.4s var(--openbot-ease-out);
}
@keyframes integration-step-fill {
  from {
    background-size: 0% 100%, auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .integration-step + .integration-step[data-state="current"]::before, .integration-step + .integration-step[data-state="done"]::before {
    animation: none;
  }
}
.integration-step-index {
  display: inline-grid;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  font-weight: var(--openbot-weight-medium);
  line-height: 1;
}
.integration-step[data-state="current"] {
  color: var(--openbot-text-primary);
}
.integration-step[data-state="current"] .integration-step-index {
  border-color: var(--openbot-accent);
  background: var(--openbot-accent);
  color: var(--openbot-text-on-accent);
}
.integration-step[data-state="done"] .integration-step-index {
  border-color: var(--openbot-success);
  color: var(--openbot-success);
}
.integrations-hub {
  display: grid;
  gap: var(--openbot-space-6);
}
.integrations-hub-row {
  position: relative;
  border-radius: var(--openbot-radius-md);
  transition: background-color var(--openbot-duration-hover) var(--openbot-ease-out);
}
.integrations-hub-row:has(> .integrations-hub-hitarea:hover) {
  background: var(--openbot-hover);
}
.integrations-hub-hitarea {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: var(--openbot-transparent);
  cursor: pointer;
  transition: none;
}
.integrations-hub-hitarea:hover:not(:disabled):not([data-disabled]) {
  background: var(--openbot-transparent);
}
.integrations-hub-hitarea:focus-visible {
  outline: 2px solid var(--openbot-accent-strong);
  outline-offset: -2px;
}
.integrations-hub-actions {
  gap: var(--openbot-space-3);
}
.integrations-hub-actions .ui-button {
  position: relative;
  z-index: 2;
}
.integrations-hub-chevron {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  margin: 0 var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
}
.integrations-hub-title {
  display: inline-flex;
  gap: var(--openbot-space-2);
  align-items: center;
}
.integrations-hub-summary[data-status="attention"] {
  color: var(--openbot-warning-text);
}
.integrations-face-stack {
  display: inline-flex;
  gap: var(--openbot-space-0-5);
  align-items: center;
}
.integrations-face-more {
  display: inline-grid;
  min-width: 24px;
  height: 24px;
  padding: 0 var(--openbot-space-1);
  place-items: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.integrations-agent-face {
  display: inline-block;
  flex: none;
  width: 32px;
  height: 32px;
}
.integrations-agent-face[data-size="sm"] {
  width: 24px;
  height: 24px;
}
.integrations-agent-face > * {
  width: 100%;
  height: 100%;
}
.github-connector {
  display: grid;
  gap: var(--openbot-space-6);
}
.github-connector-avatar {
  display: inline-grid;
  flex: none;
  width: 32px;
  height: 32px;
  place-items: center;
  overflow: hidden;
  border-radius: var(--openbot-radius-pill);
  background: linear-gradient(135deg, var(--openbot-accent-strong), var(--openbot-onboarding-desktop-indigo));
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
}
.github-connector-avatar > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.github-connector-line {
  padding: var(--openbot-space-3) var(--openbot-space-4);
}
.github-connector-line[data-tone="danger"] {
  color: var(--openbot-danger-text);
}
.github-connector-search {
  position: relative;
  display: flex;
  align-items: center;
  padding: var(--openbot-space-3) var(--openbot-space-4) var(--openbot-space-2);
}
.github-connector-search > svg {
  position: absolute;
  left: calc(var(--openbot-space-4) + var(--openbot-space-3));
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
  pointer-events: none;
}
.github-connector-search input {
  width: 100%;
  padding-left: calc(var(--openbot-space-3) * 2 + var(--openbot-icon-sm));
}
.github-connector-repository-list {
  display: grid;
  max-height: 260px;
  margin: 0;
  padding: 0 var(--openbot-space-2) var(--openbot-space-2);
  overflow-y: auto;
  list-style: none;
}
.github-connector-repository {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
  justify-content: space-between;
  min-height: 36px;
  padding: 0 var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
  transition: background-color var(--openbot-duration-fast) var(--openbot-ease-out);
}
.github-connector-repository:hover {
  background: var(--openbot-hover);
}
.github-connector-repository-name {
  min-width: 0;
}
.github-connector-repository-owner {
  color: var(--openbot-text-muted);
}
.github-connector-private {
  flex: none;
  gap: var(--openbot-space-1);
}
.github-connector-center {
  display: grid;
  min-height: 96px;
  place-items: center;
}
.github-connector-code {
  display: flex;
  gap: var(--openbot-space-1-5);
  justify-content: center;
}
.github-connector-code-char {
  display: inline-grid;
  width: 36px;
  height: 48px;
  place-items: center;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-xl);
  font-weight: var(--openbot-weight-semibold);
}
.github-connector-code-char[data-separator="true"] {
  width: 12px;
  border-color: var(--openbot-transparent);
  background: var(--openbot-transparent);
  color: var(--openbot-text-muted);
}
.github-connector-waiting {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
  justify-content: center;
}
.github-connector-done {
  display: flex;
  gap: var(--openbot-space-3);
  align-items: center;
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-success-wash);
}
.github-connector-done > div {
  display: grid;
  flex: 1;
}
.github-connector-effects {
  display: grid;
  margin: 0;
  padding: var(--openbot-space-1);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  list-style: none;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.github-connector-effects li {
  display: flex;
  gap: var(--openbot-space-3);
  align-items: center;
  padding: var(--openbot-space-2);
}
.github-connector-effects li + li {
  border-top: 1px solid var(--openbot-border);
}
.github-connector-effect-icon {
  display: inline-grid;
  flex: none;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-muted);
}
.github-connector-effect-icon > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.github-connector-effects li[data-tone="danger"] .github-connector-effect-icon {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger-text);
}
.github-connector-effects li[data-tone="success"] .github-connector-effect-icon {
  background: var(--openbot-success-soft);
  color: var(--openbot-success);
}
.github-connector-confirm.ui-button-variant-destructive {
  color: var(--openbot-danger-text);
}
.onepassword-connector {
  display: grid;
  gap: var(--openbot-space-6);
}
.onepassword-connector-link {
  justify-self: start;
  padding-inline: 0;
}
.onepassword-connector-token {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
}
.onepassword-connector-token > :first-child {
  flex: 1;
}
.onepassword-connector-step .ui-item-description {
  white-space: normal;
}
.onepassword-connector-step .ui-item-media {
  color: var(--openbot-text-muted);
}
.onepassword-connector-step[data-step="done"] .ui-item-media {
  color: var(--openbot-success);
}
.onepassword-connector-step[data-step="waiting"] .ui-item-title {
  color: var(--openbot-text-muted);
}
.slack-integration {
  display: grid;
  gap: var(--openbot-space-6);
}
.slack-integration-note {
  margin-top: var(--openbot-space-2);
}
.slack-integration-stack {
  display: grid;
  gap: var(--openbot-space-0-5);
  justify-items: start;
}
.slack-effects {
  display: grid;
  margin: 0;
  padding: var(--openbot-space-1);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  list-style: none;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.slack-effects li {
  display: flex;
  gap: var(--openbot-space-3);
  align-items: center;
  padding: var(--openbot-space-2);
}
.slack-effects li + li {
  border-top: 1px solid var(--openbot-border);
}
.slack-effect-icon {
  display: inline-grid;
  flex: none;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-muted);
}
.slack-effect-icon > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.slack-effects li[data-tone="danger"] .slack-effect-icon {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger-text);
}
.slack-effects li[data-tone="success"] .slack-effect-icon {
  background: var(--openbot-success-soft);
  color: var(--openbot-success);
}
.slack-checklist {
  display: grid;
  gap: var(--openbot-space-2);
  margin: 0;
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  list-style: none;
  font-size: var(--openbot-text-sm);
}
.slack-checklist li {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
}
.slack-checklist li[data-state="done"] {
  color: var(--openbot-text-secondary);
}
.slack-checklist li[data-state="done"] svg {
  color: var(--openbot-success);
}
.slack-checklist-dot {
  width: 14px;
  height: 14px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
}
.slack-waiting {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
  justify-content: center;
}
.slack-orchestrator-card {
  display: flex;
  gap: var(--openbot-space-3);
  align-items: center;
  padding: var(--openbot-space-3);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
}
.slack-orchestrator-model {
  display: grid;
  gap: var(--openbot-space-1);
}
.slack-roles {
  display: grid;
  max-height: 40vh;
  margin: 0;
  padding: var(--openbot-space-1);
  overflow-y: auto;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  list-style: none;
}
.slack-role-row {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
  padding: var(--openbot-space-1) var(--openbot-space-2);
  border-radius: var(--openbot-radius-sm);
  cursor: pointer;
}
.slack-role-row:hover {
  background: var(--openbot-bg-control-hover);
}
.slack-role-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hosted-servers-add {
  display: flex;
}
.hosted-servers-loading {
  display: grid;
  place-items: center;
  padding: var(--openbot-space-8);
  animation: hosted-servers-loading-in var(--openbot-duration-normal) var(--openbot-ease-out) var(--openbot-loading-indicator-delay) both;
}
@keyframes hosted-servers-loading-in {
  from {
    opacity: 0;
  }
}
.hosted-servers-list .hosted-servers-row {
  min-height: 64px;
  align-items: center;
}
.hosted-servers-list .ui-item-content {
  min-width: 0;
}
.hosted-servers-list .ui-item-title {
  gap: var(--openbot-space-2);
}
.hosted-servers-actions {
  flex-wrap: nowrap;
  justify-content: flex-end;
}
@media (max-width: 700px) {
  .hosted-servers-list .hosted-servers-row {
    align-items: flex-start;
    flex-direction: column;
  }
  .hosted-servers-actions {
    width: 100%;
    justify-content: flex-start;
  }
}
.profile-panel {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-6);
}
.profile-hero {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
}
.profile-hero-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(var(--openbot-space-8) * 1.75);
  aspect-ratio: 1;
  border-radius: var(--openbot-radius-pill);
  overflow: hidden;
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-hover);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
}
.profile-hero-avatar > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  outline: 1px solid var(--openbot-image-outline);
  outline-offset: -1px;
  border-radius: inherit;
}
.profile-hero-text {
  min-width: 0;
}
.profile-hero-text h3 {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--openbot-text-xl);
  font-weight: var(--openbot-weight-semibold);
  color: var(--openbot-text-primary);
}
.profile-hero-text p {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--openbot-text-sm);
  color: var(--openbot-text-secondary);
}
.profile-hero-actions {
  display: flex;
  flex: none;
  gap: var(--openbot-space-2);
  margin-inline-start: auto;
}
.profile-card {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-3);
  margin: 0;
  padding: var(--openbot-space-4);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
}
.profile-card.profile-facts, .profile-card.profile-ranking, .profile-card.profile-bars {
  row-gap: 0;
  padding: var(--openbot-space-1) var(--openbot-space-4);
}
.profile-activity-placeholder {
  align-items: flex-start;
}
.profile-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--openbot-space-4);
  align-items: start;
}
.profile-columns > .ui-settings-section {
  height: 100%;
  grid-template-rows: auto 1fr;
}
.profile-facts {
  display: flex;
  flex-direction: column;
  margin: 0;
}
.profile-facts > div, .profile-ranking li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  min-height: calc(var(--openbot-space-8) + var(--openbot-space-3));
  border-top: 1px solid var(--openbot-border);
  font-size: var(--openbot-text-sm);
}
.profile-facts > div:first-child, .profile-ranking li:first-child {
  border-top: 0;
}
.profile-facts dt {
  flex: none;
  color: var(--openbot-text-secondary);
  transition: color var(--openbot-duration-normal) var(--openbot-ease-out);
}
.profile-facts dd {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  min-width: 0;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}
.profile-ranking {
  list-style: none;
}
.profile-ranking li {
  justify-content: flex-start;
  color: var(--openbot-text-primary);
  transition: opacity var(--openbot-duration-normal) var(--openbot-ease-out);
}
.profile-ranking-avatar {
  width: var(--openbot-space-6);
  height: var(--openbot-space-6);
  flex: none;
}
.profile-ranking-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-ranking strong, .profile-bar-value {
  font-variant-numeric: tabular-nums;
  font-weight: var(--openbot-weight-medium);
}
.profile-bars {
  display: grid;
  grid-template-columns: fit-content(45%) 1fr auto;
  column-gap: var(--openbot-space-4);
  margin: 0;
  list-style: none;
}
.profile-bars li {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  min-height: calc(var(--openbot-space-8) + var(--openbot-space-1));
  font-size: var(--openbot-text-sm);
  color: var(--openbot-text-primary);
  transition: opacity var(--openbot-duration-normal) var(--openbot-ease-out);
}
.profile-bar-label {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  min-width: 0;
  white-space: nowrap;
}
.profile-bar-name {
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-bar-track {
  height: var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-primary) 7%, var(--openbot-transparent));
  }
  overflow: hidden;
}
.profile-bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
}
.profile-bar-value {
  text-align: end;
  color: var(--openbot-text-secondary);
}
.profile-heatmap {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1-5);
  min-width: 0;
}
.profile-heatmap-months, .profile-heatmap-grid {
  display: grid;
  grid-template-columns: repeat(var(--profile-columns), minmax(0, 1fr));
  column-gap: var(--openbot-space-0-5);
}
.profile-heatmap-months {
  font-size: var(--openbot-text-sm);
  color: var(--openbot-text-muted);
}
.profile-heatmap-months span {
  white-space: nowrap;
}
.profile-heatmap-grid {
  grid-template-rows: repeat(7, auto);
  grid-auto-flow: column;
  row-gap: var(--openbot-space-0-5);
}
.profile-heat-cell {
  display: block;
  aspect-ratio: 1;
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-primary) 7%, var(--openbot-transparent));
  }
}
.profile-heat-cell[data-empty] {
  background: var(--openbot-transparent);
}
.profile-heat-cell[data-level="1"] {
  background: var(--openbot-accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-accent) 32%, var(--openbot-transparent));
  }
}
.profile-heat-cell[data-level="2"] {
  background: var(--openbot-accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-accent) 55%, var(--openbot-transparent));
  }
}
.profile-heat-cell[data-level="3"] {
  background: var(--openbot-accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-accent) 78%, var(--openbot-transparent));
  }
}
.profile-heat-cell[data-level="4"] {
  background: var(--openbot-accent);
}
.profile-heatmap-grid .profile-heat-cell[data-active] {
  outline: 1px solid var(--openbot-text-primary);
  outline-offset: 1px;
}
.profile-heat-tooltip {
  position: fixed;
  z-index: var(--openbot-layer-toast);
  transform: translate(-50%, calc(-100% - var(--openbot-space-2)));
  pointer-events: none;
  white-space: nowrap;
  box-shadow: var(--openbot-shadow-raised);
}
.profile-heatmap-legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--openbot-space-1);
  font-size: var(--openbot-text-sm);
  color: var(--openbot-text-muted);
}
.profile-heatmap-legend .profile-heat-cell {
  width: var(--openbot-space-3);
}
.profile-dialog {
  width: min(880px, 100%);
  max-height: calc(100dvh - 2 * var(--openbot-space-6));
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
  overflow: auto;
  padding: var(--openbot-space-6);
  outline: 0;
  border-radius: var(--openbot-radius-xl);
  border: 1px solid var(--openbot-dialog-ring);
  background: var(--openbot-bg-sidebar);
  color: var(--openbot-text-primary);
}
.profile-dialog-header, .profile-dialog-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.profile-dialog-footer {
  justify-content: flex-end;
}
.profile-dialog-title {
  margin: 0;
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
}
.profile-share-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--openbot-radius-card);
  box-shadow: var(--openbot-shadow-card);
}
.profile-share-placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: 1200 / 690;
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-surface);
}
.profile-edit {
  width: min(440px, 100%);
}
.profile-edit-form {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
}
.profile-edit-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-2);
}
.profile-edit-photo .profile-edit-photo-trigger {
  width: calc(var(--openbot-space-8) * 2.5);
  height: calc(var(--openbot-space-8) * 2.5);
  overflow: visible;
}
.profile-edit-photo .profile-edit-avatar {
  font-size: var(--openbot-text-xl);
}
.profile-edit-photo-badge {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  display: grid;
  place-items: center;
  width: var(--openbot-space-6);
  height: var(--openbot-space-6);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-secondary);
}
.profile-edit-photo-badge > svg {
  width: var(--openbot-space-3);
  height: var(--openbot-space-3);
}
.profile-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: var(--openbot-space-2);
  margin: 0;
}
.profile-tile {
  --profile-step: calc(var(--openbot-duration-fast) / 3);
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-3);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  transition: background-color var(--openbot-duration-normal) var(--openbot-ease-out);
}
.profile-tile dt {
  font-size: var(--openbot-text-sm);
  color: var(--openbot-text-secondary);
}
.profile-tile dd {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-0-5);
  margin: 0;
}
.profile-tile strong {
  font-size: var(--openbot-text-2xl);
  font-weight: var(--openbot-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--openbot-text-primary);
}
.profile-tile dd > span {
  font-size: var(--openbot-text-sm);
  color: var(--openbot-text-muted);
}
.profile-tile:hover {
  background: linear-gradient(var(--openbot-hover), var(--openbot-hover)), var(--openbot-bg-surface);
}
.profile-tile-value {
  white-space: pre;
}
.profile-tile .profile-tile-value.is-animating .t-digit {
  animation-delay: calc( var(--profile-i, 0) * var(--profile-step) * 1.5 + var(--profile-c, 0) * var(--profile-step) / 2 );
}
.profile-facts > div:hover dt {
  color: var(--openbot-text-primary);
}
.profile-ranking:hover li:not(:hover), .profile-bars:hover li:not(:hover) {
  opacity: 0.45;
}
.profile-bars li:hover .profile-bar-value {
  color: var(--openbot-text-primary);
}
@media (prefers-reduced-motion: no-preference) {
  .profile-panel {
    --profile-step: calc(var(--openbot-duration-fast) / 3);
  }
  .profile-panel > * {
    animation: profile-rise var(--openbot-duration-toast-enter) var(--openbot-ease-out) backwards;
  }
  .profile-panel > :nth-child(2) {
    animation-delay: var(--profile-step);
  }
  .profile-panel > :nth-child(3) {
    animation-delay: calc(var(--profile-step) * 2);
  }
  .profile-panel > :nth-child(4) {
    animation-delay: calc(var(--profile-step) * 3);
  }
  .profile-panel > :nth-child(n + 5) {
    animation-delay: calc(var(--profile-step) * 4);
  }
  .profile-hero-avatar {
    animation: profile-pop var(--openbot-duration-toast-enter) var(--openbot-ease-out) backwards;
  }
  .profile-tile {
    transition: background-color var(--openbot-duration-normal) var(--openbot-ease-out), transform var(--openbot-duration-normal) var(--openbot-ease-out);
  }
  .profile-tile:hover {
    transform: translateY(calc(var(--openbot-space-0-5) * -1));
  }
  .profile-heatmap-grid .profile-heat-cell {
    animation: profile-cell-in var(--openbot-duration-overlay) var(--openbot-ease-out) backwards;
    animation-delay: calc(var(--profile-col, 0) * var(--openbot-duration-fast) / 15);
    transition: transform var(--openbot-duration-fast) var(--openbot-ease-out);
  }
  .profile-heatmap-grid .profile-heat-cell[data-active] {
    position: relative;
    z-index: 1;
    transform: scale(1.35);
  }
  .profile-heat-tooltip {
    animation: profile-tip-in var(--openbot-duration-normal) var(--openbot-ease-out) backwards;
    transition: left var(--openbot-duration-fast) var(--openbot-ease-out), top var(--openbot-duration-fast) var(--openbot-ease-out);
  }
  .profile-ranking li {
    animation: profile-slide-in var(--openbot-duration-toast-enter) var(--openbot-ease-out) backwards;
    animation-delay: calc(var(--openbot-duration-slow) + var(--profile-i, 0) * var(--profile-step));
  }
  .profile-ranking-avatar {
    transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
  }
  .profile-ranking li:hover .profile-ranking-avatar {
    transform: scale(1.12) rotate(-6deg);
  }
  .profile-bar-fill {
    transform-origin: left center;
    animation: profile-grow calc(var(--openbot-duration-overlay) * 2.5) var(--openbot-ease-out) backwards;
    animation-delay: calc(var(--openbot-duration-overlay) + var(--profile-i, 0) * var(--profile-step) * 2);
  }
  .profile-hero-actions svg {
    transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
  }
  .profile-hero-actions button:hover .profile-icon-share {
    transform: translateY(calc(var(--openbot-space-0-5) * -1));
  }
  .profile-hero-actions button:hover .profile-icon-edit {
    transform: rotate(-14deg);
  }
}
@keyframes profile-rise {
  from {
    opacity: 0;
    transform: translateY(var(--openbot-space-2));
  }
}
@keyframes profile-pop {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
}
@keyframes profile-cell-in {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
}
@keyframes profile-tip-in {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-100% - var(--openbot-space-1)));
  }
}
@keyframes profile-slide-in {
  from {
    opacity: 0;
    transform: translateX(calc(var(--openbot-space-2) * -1));
  }
}
@keyframes profile-grow {
  from {
    transform: scaleX(0);
  }
}
.computer-use-settings {
  display: grid;
  gap: var(--openbot-space-6);
}
.computer-use-card:is(.ui-item-group) {
  overflow: hidden;
}
.computer-use-permission-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-accent-soft);
}
.computer-use-permission-icon svg {
  width: 16px;
  height: 16px;
  color: var(--openbot-accent-text);
}
.computer-use-alert {
  margin-top: var(--openbot-space-3);
}
.computer-use-settings > .computer-use-alert:first-child, .computer-use-compact > .computer-use-alert:first-child {
  margin-top: 0;
}
.computer-use-loading .computer-use-row {
  min-height: 60px;
}
.computer-use-skeleton-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--openbot-radius-md);
}
.computer-use-skeleton-title {
  width: 128px;
  height: 12px;
}
.computer-use-skeleton-description {
  width: min(220px, 70%);
  height: 10px;
  margin-top: var(--openbot-space-2);
}
.computer-use-compact {
  width: min(100%, 520px);
  margin-top: var(--openbot-space-4);
  text-align: left;
}
.computer-use-compact-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  margin: 0 var(--openbot-space-1) var(--openbot-space-2);
}
.computer-use-compact-header h2 {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
}
.computer-use-compact-header p {
  margin: var(--openbot-space-0-5) 0 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.computer-use-compact-header > .ui-button {
  flex: 0 0 auto;
}
.computer-use-compact .computer-use-card {
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
}
.computer-use-compact .computer-use-row {
  min-height: 58px;
  padding: var(--openbot-space-2) var(--openbot-space-3);
}
.computer-use-compact .computer-use-row + .computer-use-row {
  border-top: 1px solid var(--openbot-border);
}
.computer-use-compact .ui-item-title {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.computer-use-compact .ui-item-description {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
@media (max-width: 640px) {
  .computer-use-row.ui-item {
    align-items: flex-start;
  }
  .computer-use-row .ui-item-actions {
    width: auto;
    padding-top: var(--openbot-space-1);
  }
}
.computer-use-recheck {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--openbot-space-2);
}
.computer-use-recheck .ui-button > svg, .computer-use-compact-header .ui-button > svg, .computer-use-alert .ui-button > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.computer-use-window-highlight {
  position: absolute;
  inset: 0;
  border-radius: var(--computer-use-window-radius);
  box-shadow: inset 0 0 0 2px var(--openbot-accent), inset 0 0 44px -4px var(--openbot-accent-strong), inset 0 0 120px -8px var(--openbot-accent-soft);
  pointer-events: none;
}
html:has(.computer-use-highlight-surface), body:has(.computer-use-highlight-surface), #root:has(.computer-use-highlight-surface) {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
}
.computer-use-highlight-surface {
  position: relative;
  width: 100%;
  height: 100%;
  background: transparent;
  pointer-events: none;
}
.computer-use-highlight-surface-frame {
  position: absolute;
  pointer-events: none;
}
.computer-use-agent-cursor {
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 24px;
  overflow: visible;
  fill: var(--openbot-accent);
  stroke: var(--openbot-text-on-accent);
  stroke-width: 5;
  paint-order: stroke fill;
  filter: drop-shadow(0 0 6px var(--openbot-accent-strong));
  pointer-events: none;
}
.computer-use-grant:is(.ui-button) {
  border-color: transparent;
  background: var(--openbot-accent);
  color: var(--openbot-text-on-accent);
}
@media (hover: hover) and (pointer: fine) and (min-width: 601px) {
  .computer-use-grant:is(.ui-button):hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-accent-hover);
  }
}
.computer-use-help {
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
  padding: 44px var(--openbot-space-4) var(--openbot-space-4);
  background: var(--openbot-bg-canvas);
  text-align: left;
}
.computer-use-help-header {
  display: flex;
  align-items: flex-start;
  gap: var(--openbot-space-3);
}
.computer-use-help-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-accent-soft);
}
.computer-use-help-icon svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  color: var(--openbot-accent-text);
  stroke-width: var(--openbot-icon-stroke);
}
.computer-use-help h1 {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
}
.computer-use-help-header p {
  margin: var(--openbot-space-0-5) 0 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.computer-use-help-steps {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
  margin: 0;
  padding-left: var(--openbot-space-4);
  list-style: decimal;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.computer-use-help-status {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.computer-use-help-status svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  color: var(--openbot-success);
  stroke-width: var(--openbot-icon-stroke);
}
.computer-use-help-status.is-error {
  color: var(--openbot-danger);
}
.computer-use-drag-card {
  position: relative;
  width: 210px;
  min-height: 94px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--openbot-space-1);
  align-self: center;
  box-sizing: border-box;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-primary);
  cursor: grab;
  -webkit-app-region: no-drag;
}
.computer-use-drag-card:hover {
  border-color: var(--openbot-accent-strong);
  background: var(--openbot-bg-control-hover);
}
.computer-use-drag-card:active, .computer-use-drag-card.is-dragging {
  cursor: grabbing;
}
.computer-use-drag-handle {
  position: absolute;
  top: var(--openbot-space-2);
  right: var(--openbot-space-2);
  color: var(--openbot-text-dim);
}
.computer-use-drag-handle svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.computer-use-drag-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
}
.computer-use-drag-icon img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}
.computer-use-drag-icon svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  color: var(--openbot-text-secondary);
}
.computer-use-drag-card strong {
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.computer-use-drag-card > span:last-child {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.computer-use-help-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
}
.server-settings-modal-shell .settings-modal-main {
  background: var(--openbot-bg-canvas);
}
.server-settings-modal-shell .settings-modal-scroll-frame::before {
  background: linear-gradient( to bottom, var(--openbot-bg-canvas) 0%, var(--openbot-bg-canvas) 28%, var(--openbot-bg-canvas-clear) 100% );
}
.server-settings-modal-shell .settings-modal-scroll-frame::after {
  background: linear-gradient( to top, var(--openbot-bg-canvas) 0%, var(--openbot-bg-canvas) 28%, var(--openbot-bg-canvas-clear) 100% );
}
.server-settings-panel {
  width: 100%;
  gap: var(--openbot-space-6);
  animation: none;
}
.server-settings-logo {
  width: 40px;
  height: 40px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: var(--openbot-tracking-wide);
}
.server-settings-logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  outline: 1px solid var(--openbot-image-outline);
  outline-offset: -1px;
}
.server-settings-logo-trigger {
  border-radius: var(--openbot-radius-md);
  color: var(--openbot-text-muted);
}
.server-settings-logo-trigger .server-settings-logo {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
  pointer-events: none;
}
.server-settings-logo-placeholder {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.server-settings-item-error {
  color: var(--openbot-danger);
}
.server-settings-readonly-name.ui-item {
  min-height: 72px;
}
.server-settings-publish-setting.ui-switch-field, .server-settings-mute-setting.ui-switch-field {
  min-height: 64px;
  padding: var(--openbot-space-3) var(--openbot-space-4);
  width: 100%;
  justify-content: space-between;
  gap: var(--openbot-space-6);
}
.server-settings-readonly-value {
  min-width: 180px;
  max-width: 300px;
  overflow-wrap: anywhere;
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
  text-align: right;
  user-select: text;
}
.server-settings-address-control.ui-button {
  width: 320px;
  height: var(--openbot-control-md);
  min-width: 0;
  flex-direction: row-reverse;
  justify-content: space-between;
  overflow: visible;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
  padding-inline: var(--openbot-space-3) var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  box-shadow: inset 0 0 0 1px var(--openbot-border);
}
.server-settings-address-control > span {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  font-family: var(--openbot-font-mono);
  font-weight: var(--openbot-weight-regular);
  text-align: left;
  text-overflow: ellipsis;
}
.server-settings-address-control > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.server-settings-private-badge {
  padding: var(--openbot-space-0-5) var(--openbot-space-1-5);
}
.server-settings-address-control[data-copied] {
  color: var(--openbot-success);
}
.server-settings-error-toast {
  position: absolute;
  right: var(--openbot-space-6);
  bottom: var(--openbot-space-6);
  left: var(--openbot-space-6);
  z-index: 3;
  box-shadow: 0 12px 32px var(--openbot-shadow-dialog);
}
.server-settings-error-toast[data-with-save-bar] {
  bottom: calc(60px + var(--openbot-space-3));
}
.server-settings-members-alert {
  border: 0;
  background: var(--openbot-bg-control);
}
.server-settings-members-title {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.server-settings-search {
  position: relative;
  width: 188px;
  flex: 0 0 auto;
}
.server-settings-search > svg {
  position: absolute;
  top: 50%;
  left: var(--openbot-space-3);
  z-index: 1;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
  pointer-events: none;
  transform: translateY(-50%);
}
.server-settings-search .ui-input {
  padding-left: var(--openbot-space-8);
}
.server-settings-invite-card.ui-card {
  border: 0;
  background: var(--openbot-bg-surface);
  padding: var(--openbot-space-4);
  box-shadow: none;
}
.server-settings-invite-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px auto;
  align-items: start;
  gap: var(--openbot-space-2);
}
.server-settings-invite-composer .ui-sliding-tabs-content-slot {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
}
.server-settings-invite-composer .ui-sliding-tabs-content:not([data-selected]) {
  position: absolute;
  inset: 0;
}
.server-settings-invite-mode-panel, .server-settings-invite-email-field, .server-settings-invite-email-field .ui-input {
  min-width: 0;
  width: 100%;
}
.server-settings-invite-email-field {
  position: relative;
  width: 22rem;
  max-width: 100%;
}
.server-settings-invite-email-field > .ui-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.server-settings-invite-link-input.ui-input {
  font-family: var(--openbot-font-mono);
  cursor: text;
}
.server-settings-invite-link-input.ui-input::placeholder {
  font-family: var(--openbot-font-sans);
}
.server-settings-invite-copy > span {
  min-width: 9ch;
  text-align: center;
}
.server-settings-invite-copy > svg, .server-settings-invite-new-link > svg, .server-settings-routine-feed-row .ui-button > svg, .server-settings-routine-feed-actions .ui-button > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.server-settings-invite-hint {
  display: block;
  margin-top: var(--openbot-space-2);
}
.server-settings-role-select {
  width: 100%;
}
.server-settings-invite-result {
  border: 0;
  background: var(--openbot-bg-surface-raised);
  margin-top: var(--openbot-space-3);
}
.server-settings-member-row[data-disabled] {
  background: var(--openbot-bg-control);
}
.server-settings-member-meta {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.server-settings-member-actions {
  min-width: 92px;
}
.server-settings-member-menu-trigger {
  position: relative;
}
.server-settings-member-menu-trigger::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  content: "";
  transform: translate(-50%, -50%);
}
.server-settings-member-menu-trigger svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.server-settings-empty-row .ui-item-content {
  text-align: center;
}
.server-settings-desktop-icon {
  width: 40px;
  height: 40px;
  justify-content: center;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-secondary);
}
.server-settings-desktop-icon svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
}
.server-settings-desktop-description {
  max-width: 360px;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
.server-settings-desktop-meta {
  max-width: 260px;
  display: grid;
  justify-items: end;
  gap: var(--openbot-space-1);
  text-align: right;
}
.server-settings-desktop-hint {
  max-width: 220px;
  text-align: right;
}
.server-settings-desktop-status {
  margin-top: var(--openbot-space-1);
}
@media (max-width: 720px) {
  .server-settings-address-setting, .server-settings-readonly-name {
    align-items: flex-start;
    flex-direction: column;
  }
  .server-settings-address-control, .server-settings-readonly-name .ui-item-actions {
    width: 100%;
    max-width: none;
    justify-content: space-between;
  }
  .server-settings-readonly-value {
    min-width: 0;
    max-width: none;
    text-align: left;
  }
  .server-settings-address-control {
    width: 100%;
  }
  .server-settings-error-toast {
    right: var(--openbot-space-4);
    left: var(--openbot-space-4);
  }
  .server-settings-invite-composer {
    grid-template-columns: minmax(0, 1fr) 118px;
  }
  .server-settings-invite-email-field {
    max-width: none;
  }
  .server-settings-invite-composer > .ui-button, .server-settings-invite-share {
    grid-column: 1 / -1;
  }
  .server-settings-desktop-card .ui-item {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .server-settings-desktop-meta, .server-settings-desktop-hint {
    max-width: none;
    margin-left: 52px;
    justify-items: start;
    text-align: left;
  }
}
@media (max-width: 520px) {
  :is(.server-settings-invite-section, .server-settings-members-section) .ui-settings-section-header {
    align-items: stretch;
    flex-direction: column;
  }
  .server-settings-invite-section .ui-settings-section-actions, .server-settings-members-section .ui-settings-section-actions, .server-settings-search {
    width: 100%;
  }
  .server-settings-member-row {
    flex-wrap: wrap;
  }
  .server-settings-member-actions {
    width: 100%;
    min-width: 0;
    justify-content: flex-end;
  }
  .server-settings-invite-composer {
    grid-template-columns: minmax(0, 1fr);
  }
  .server-settings-role-select, .server-settings-invite-composer > .ui-button, .server-settings-invite-share {
    width: 100%;
    grid-column: 1;
  }
}
.server-settings-invite-share {
  display: flex;
  gap: var(--openbot-space-1);
}
.server-settings-invite-share > .ui-button:last-child {
  animation: server-settings-invite-qr-in var(--openbot-duration-normal) var(--openbot-ease-out);
}
@keyframes server-settings-invite-qr-in {
  from {
    opacity: 0;
    transform: translateX(calc(-1 * var(--openbot-space-4)));
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.server-settings-invite-qr {
  animation: server-settings-invite-panel-in var(--openbot-duration-normal) var(--openbot-ease-out);
  transform-origin: top;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-4);
}
@media (prefers-reduced-motion: reduce) {
  .server-settings-invite-share > .ui-button:last-child {
    animation: none;
  }
}
@keyframes server-settings-invite-panel-in {
  from {
    opacity: 0;
    transform: translateY(calc(-1 * var(--openbot-space-3))) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .server-settings-invite-qr {
    animation: none;
  }
}
.server-settings-routine-feed-row {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.server-settings-routine-feed-agent {
  flex: none;
  width: auto;
}
.server-settings-routine-feed-row .ui-input {
  flex: 1;
  min-width: 0;
  font-family: var(--openbot-font-mono);
  cursor: text;
}
.server-settings-routine-feed-text {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
.server-settings-routine-feed-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-1);
}
.server-settings-routine-feed-loading {
  display: grid;
  place-items: center;
  padding: var(--openbot-space-6);
  animation: server-settings-routine-feed-loading-in var(--openbot-duration-normal) var(--openbot-ease-out) var(--openbot-loading-indicator-delay) both;
}
@keyframes server-settings-routine-feed-loading-in {
  from {
    opacity: 0;
  }
}
.server-settings-routine-feed-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.server-mcp-panel {
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  min-height: 100%;
}
.server-mcp-panel.t-page-slide .t-page {
  position: static;
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-6);
  min-width: 0;
}
@starting-style {
  .settings-modal .server-mcp-panel.t-page-slide .t-page[data-page-id] {
    opacity: 0;
    transform: translateX(var(--t-page-from-x));
    filter: blur(var(--page-blur));
  }
}
.server-mcp-section {
  min-width: 0;
}
.server-mcp-error {
  display: block;
  margin-bottom: var(--openbot-space-2);
}
.server-mcp-runtime-note {
  display: block;
  margin-bottom: var(--openbot-space-2);
}
.server-mcp-test-result {
  display: block;
  overflow-wrap: anywhere;
}
.server-mcp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-3);
  border: 1px dashed var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  padding: var(--openbot-space-8) var(--openbot-space-6);
  text-align: center;
}
.server-mcp-panel .ui-button > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.server-mcp-list {
  min-width: 0;
}
.server-mcp-row-icon {
  color: var(--openbot-text-muted);
}
.server-mcp-row[data-disabled] .server-mcp-row-icon, .server-mcp-row[data-disabled] .ui-item-content {
  opacity: 0.55;
}
.server-mcp-row-title {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  min-width: 0;
  flex-wrap: wrap;
}
.server-mcp-row-next {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-top: var(--openbot-space-1);
}
.server-mcp-row-menu {
  min-width: 180px;
}
.server-mcp-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--openbot-space-6);
  min-width: 0;
}
.server-mcp-transport-panel {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-6);
  min-width: 0;
}
.server-mcp-repeat {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
  min-width: 0;
  border: 0;
  margin: 0;
  padding: 0;
}
.server-mcp-repeat-legend {
  padding: 0;
}
.server-mcp-repeat-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-2);
}
.server-mcp-repeat-row-pair {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
}
.server-mcp-repeat-add {
  justify-content: center;
  width: 100%;
}
.server-mcp-callback {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  min-width: 0;
}
.server-mcp-callback-url {
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: var(--openbot-font-mono);
}
@media (max-width: 520px) {
  .server-mcp-repeat-row-pair {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .server-mcp-repeat-row-pair > .ui-input:first-child {
    grid-column: 1 / -1;
  }
}
.skills-marketplace-backdrop {
  z-index: var(--openbot-layer-dialog-host);
  padding: var(--openbot-space-4);
}
.skills-marketplace {
  --marketplace-inset: var(--openbot-space-6);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1040px, calc(100vw - 32px));
  height: min(704px, calc(100vh - 32px));
  overflow: hidden;
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-sidebar);
  color: var(--openbot-text-primary);
}
.skills-marketplace-page {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  .skills-marketplace {
    transition: opacity var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1), transform var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1);
  }
  .skills-marketplace[data-closed] {
    opacity: 0;
    transform: scale(0.98);
  }
}
.marketplace-menu {
  z-index: calc(var(--openbot-layer-dialog-host) + 1);
}
body:has(.skills-marketplace) :is(.integration-dialog-backdrop, .integration-wizard-dialog) {
  z-index: calc(var(--openbot-layer-dialog-host) + 1);
}
.skills-marketplace-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  min-height: 48px;
  padding: var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-2) var(--marketplace-inset);
  border-bottom: 1px solid var(--openbot-border);
}
.skills-marketplace-topbar-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--openbot-space-1);
}
.skills-marketplace-body {
  position: relative;
  overflow: auto;
  scrollbar-gutter: stable;
}
.marketplace-frame {
  padding: var(--openbot-space-6) var(--marketplace-inset) var(--openbot-space-8);
}
.skills-marketplace-error {
  position: sticky;
  bottom: var(--openbot-space-4);
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  width: fit-content;
  max-width: calc(100% - 32px);
  margin: 0 auto var(--openbot-space-4);
  padding: var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-3);
  border: 1px solid var(--openbot-danger);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
  color: var(--openbot-danger);
  box-shadow: 0 12px 32px var(--openbot-shadow-dialog);
}
.marketplace-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.marketplace-crumbs {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--openbot-space-2);
  min-width: 0;
}
.marketplace-title {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-lg);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.skills-marketplace .marketplace-crumb-parent {
  flex: 0 1 auto;
  min-width: 0;
  height: auto;
  margin-block: calc(-1 * var(--openbot-space-1));
  margin-inline: calc(-1 * var(--openbot-space-2) - 1px);
  padding: var(--openbot-space-1) var(--openbot-space-2);
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-lg);
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .skills-marketplace .marketplace-crumb-parent:hover:not(:disabled) {
    border-color: var(--openbot-border-strong);
    background: var(--openbot-bg-control-hover);
    color: var(--openbot-text-primary);
  }
}
.marketplace-crumb-separator {
  flex: 0 0 auto;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
}
.marketplace-title:focus, .skills-marketplace-body h3[tabindex="-1"]:focus {
  outline: none;
}
.marketplace-view, .marketplace-stack {
  display: grid;
  align-content: start;
  gap: var(--openbot-space-6);
  min-width: 0;
}
.marketplace-head {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-4);
}
.marketplace-head-actions {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  min-width: 0;
  max-width: 50%;
  gap: var(--openbot-space-1);
}
.marketplace-head-copy {
  display: grid;
  flex: 1;
  gap: var(--openbot-space-1);
  min-width: 0;
}
.marketplace-page-title {
  margin: 0;
  overflow-wrap: anywhere;
}
.marketplace-command {
  overflow-wrap: anywhere;
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
}
.marketplace-toolbar {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
}
.marketplace-search {
  position: relative;
  flex: 0 1 240px;
  min-width: 0;
  margin-left: auto;
}
.marketplace-count {
  margin-left: var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
  font-variant-numeric: tabular-nums;
}
.marketplace-install-menu {
  min-width: 220px;
}
.marketplace-install-trigger {
  min-width: 0;
  max-width: 100%;
}
.marketplace-install-trigger svg {
  flex: none;
}
.marketplace-install-label {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.marketplace-tab-slot {
  padding-top: var(--openbot-space-4);
}
.marketplace-block {
  display: grid;
  gap: var(--openbot-space-2);
}
.marketplace-block-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.marketplace-block-copy {
  display: grid;
  gap: var(--openbot-space-0-5);
  min-width: 0;
}
.marketplace-load-more {
  justify-self: center;
}
.marketplace-avatar {
  --marketplace-avatar-size: 20px;
  display: inline-grid;
  flex: none;
  width: var(--marketplace-avatar-size);
  height: var(--marketplace-avatar-size);
}
.marketplace-avatar[data-size="xs"] {
  --marketplace-avatar-size: 16px;
}
.marketplace-avatar[data-size="md"] {
  --marketplace-avatar-size: 40px;
}
.marketplace-avatar[data-size="lg"] {
  --marketplace-avatar-size: 48px;
}
.marketplace-avatar > .agent-avatar {
  --agent-avatar-optical-offset: calc(var(--marketplace-avatar-size) * -0.14);
  width: 100%;
  height: 100%;
}
.marketplace-skill-mark {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 20px;
  height: 20px;
  overflow: hidden;
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-muted);
}
.marketplace-skill-mark[data-size="row"] {
  width: 36px;
  height: 36px;
  border-radius: var(--openbot-radius-md);
}
.marketplace-skill-mark[data-size="md"] {
  width: 40px;
  height: 40px;
  border-radius: var(--openbot-radius-md);
}
.skills-marketplace-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  color: var(--openbot-accent-text);
}
.skills-marketplace-icon:has(img) {
  border: 0;
  background: transparent;
}
.skills-marketplace-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.skills-marketplace-icon svg {
  width: 20px;
  height: 20px;
}
.marketplace-skill-mark[data-kind="icon"] > img {
  width: 100%;
  height: 100%;
}
.marketplace-skill-mark[data-kind="none"] > * {
  width: 60%;
  height: 60%;
}
.skills-marketplace .integration-logo-tile > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.marketplace-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--openbot-space-3);
}
.marketplace-card {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-rows: auto 1fr auto;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-4);
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-grouped);
  transition: background var(--openbot-duration-fast) var(--openbot-ease-out);
}
.marketplace-card:hover:not(.marketplace-card-skeleton) {
  background: var(--openbot-bg-control-hover);
}
.marketplace-card-head {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  min-width: 0;
}
.marketplace-card-name {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}
.marketplace-card-action {
  position: relative;
  z-index: 2;
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  gap: var(--openbot-space-2);
  min-width: 0;
  max-width: 60%;
}
.marketplace-card-body {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--openbot-text-secondary);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.marketplace-card-foot {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  min-height: 16px;
  font-variant-numeric: tabular-nums;
}
.marketplace-hitarea {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: transparent;
}
.marketplace-hitarea:hover:not(:disabled) {
  background: transparent;
}
.marketplace-card-skeleton {
  grid-template-rows: auto auto auto;
}
.marketplace-skeleton-mark {
  width: 40px;
  height: 40px;
  border-radius: var(--openbot-radius-md);
}
.marketplace-skeleton-line {
  width: 100%;
  height: 12px;
}
.marketplace-skeleton-line:last-child {
  width: 60%;
}
.marketplace-done {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  color: var(--openbot-success-text);
  font-size: var(--openbot-text-sm);
  white-space: nowrap;
}
.marketplace-done > svg {
  width: 14px;
  height: 14px;
}
.marketplace-rows {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.marketplace-row {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  min-height: 52px;
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
}
.marketplace-row-copy {
  display: grid;
  flex: 1;
  gap: var(--openbot-space-0-5);
  min-width: 0;
  overflow-wrap: anywhere;
}
.marketplace-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: var(--openbot-space-8);
  align-items: start;
}
.marketplace-side {
  position: sticky;
  top: var(--openbot-space-6);
  padding-left: var(--openbot-space-6);
  border-left: 1px solid var(--openbot-border);
}
.marketplace-props {
  display: grid;
  gap: var(--openbot-space-0-5);
  margin: 0;
}
.marketplace-props > dd {
  margin: 0 0 var(--openbot-space-3);
}
.marketplace-props > dd:last-child {
  margin-bottom: 0;
}
.marketplace-info {
  grid-template-columns: minmax(120px, max-content) minmax(0, 1fr);
  column-gap: var(--openbot-space-6);
  row-gap: var(--openbot-space-2);
}
.marketplace-info > dd {
  margin: 0;
}
.skills-marketplace .marketplace-link {
  height: auto;
  padding: 0;
}
.marketplace-try {
  display: grid;
  gap: var(--openbot-space-2);
}
.skill-preview-card.marketplace-try-card {
  gap: var(--openbot-space-2);
}
.marketplace-try-card .skill-preview-request {
  width: min(100%, 560px);
  line-height: var(--openbot-space-6);
}
.marketplace-try-card .skill-preview-chip {
  margin-inline-end: var(--openbot-space-0-5);
  vertical-align: top;
}
.marketplace-try-card .reference-chip-icon > :is(img, svg) {
  width: 100%;
  height: 100%;
}
.marketplace-doc {
  min-width: 0;
  padding: var(--openbot-space-4) var(--openbot-space-6);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  font-size: var(--openbot-text-sm);
  overflow-wrap: anywhere;
}
.marketplace-doc > :first-child {
  margin-top: 0;
}
.marketplace-doc > :last-child {
  margin-bottom: 0;
}
.marketplace-app-page {
  width: min(100%, 720px);
  margin-inline: auto;
}
.marketplace-empty {
  display: grid;
  justify-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-8) var(--openbot-space-6);
  border: 1px dashed var(--openbot-border-strong);
  border-radius: var(--openbot-radius-card);
  text-align: center;
}
.marketplace-empty > p {
  max-width: 440px;
  margin: 0;
}
.marketplace-empty > .ui-button {
  margin-top: var(--openbot-space-2);
}
.marketplace-empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--openbot-space-2);
}
@media (max-width: 860px) {
  .skills-marketplace {
    --marketplace-inset: var(--openbot-space-4);
  }
  .marketplace-page {
    grid-template-columns: minmax(0, 1fr);
  }
  .marketplace-side {
    position: static;
    padding: var(--openbot-space-4) 0 0;
    border-top: 1px solid var(--openbot-border);
    border-left: 0;
  }
  .marketplace-head {
    flex-wrap: wrap;
  }
}
.skills-marketplace .ui-button > svg, .marketplace-search > svg {
  width: 16px;
  height: 16px;
}
.logo-color-grid {
  display: grid;
  grid-template-columns: repeat(5, 32px);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  gap: 4px;
}
.logo-color-choice {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  transition-property: scale, background-color, box-shadow;
  transition-duration: var(--openbot-duration-normal), var(--openbot-duration-hover), var(--openbot-duration-hover);
  transition-timing-function: ease-out;
}
.logo-color-choice:hover {
  background: var(--openbot-hover);
}
.logo-color-choice:active {
  scale: 0.96;
}
.logo-color-choice-selected {
  background: var(--openbot-border);
  box-shadow: inset 0 0 0 1px var(--openbot-text-muted), 0 1px 3px var(--openbot-shadow-popover-ambient);
}
.logo-color-swatch {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: var(--openbot-radius-pill);
  box-shadow: inset 0 0 0 1px var(--openbot-border-strong);
}
.sound-theme-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  width: 100%;
  min-width: 0;
  gap: var(--openbot-space-2);
}
.sound-theme-option {
  display: flex;
  min-width: 0;
}
.sound-theme-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: var(--openbot-space-1);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  box-shadow: inset 0 0 0 1px var(--openbot-border);
  text-align: left;
  cursor: pointer;
  transition-property: scale, background-color, box-shadow;
  transition-duration: var(--openbot-duration-normal), var(--openbot-duration-hover), var(--openbot-duration-normal);
  transition-timing-function: var(--openbot-ease-out);
}
.sound-theme-card:hover {
  background: var(--openbot-bg-control-hover);
}
.sound-theme-card:active {
  scale: 0.96;
}
.sound-theme-card[data-checked] {
  box-shadow: inset 0 0 0 1.5px var(--openbot-text-primary), 0 1px 3px var(--openbot-shadow-popover-ambient);
}
.sound-theme-card[data-popped][data-checked] {
  animation: sound-theme-pop var(--openbot-duration-toast-enter) var(--openbot-ease-out);
}
.sound-theme-option:has(:focus-visible) .sound-theme-card {
  box-shadow: var(--openbot-focus-ring);
}
.sound-theme-dither {
  --sound-theme-ink: var(--openbot-sound-off-ink);
  --sound-theme-back: var(--openbot-sound-off-back);
  position: relative;
  height: 56px;
  overflow: hidden;
  clip-path: inset(0 round var(--openbot-radius-md));
  border-radius: var(--openbot-radius-md);
  color: var(--sound-theme-ink);
  background-color: var(--sound-theme-back);
  background-image: radial-gradient(var(--sound-theme-ink) 1px, transparent 1.5px), linear-gradient(135deg, transparent, var(--sound-theme-ink));
  background-size: 4px 4px, 100% 100%;
  opacity: 0.72;
  filter: saturate(0.7);
  transition-property: opacity, filter;
  transition-duration: var(--openbot-duration-overlay);
  transition-timing-function: var(--openbot-ease-out);
}
.sound-theme-dither canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.sound-theme-card:hover .sound-theme-dither, .sound-theme-card[data-checked] .sound-theme-dither {
  opacity: 1;
  filter: none;
}
.sound-theme-dither[data-choice="default"] {
  --sound-theme-ink: var(--openbot-sound-warm-ink);
  --sound-theme-back: var(--openbot-sound-warm-back);
}
.sound-theme-dither[data-choice="mech"] {
  --sound-theme-ink: var(--openbot-sound-mech-ink);
  --sound-theme-back: var(--openbot-sound-mech-back);
}
.sound-theme-dither[data-choice="bubble"] {
  --sound-theme-ink: var(--openbot-sound-bubble-ink);
  --sound-theme-back: var(--openbot-sound-bubble-back);
}
.sound-theme-dither[data-choice="press"] {
  --sound-theme-ink: var(--openbot-sound-press-ink);
  --sound-theme-back: var(--openbot-sound-press-back);
}
.sound-theme-text {
  display: grid;
  min-width: 0;
  padding: var(--openbot-space-1-5) var(--openbot-space-1) var(--openbot-space-0-5);
}
.sound-theme-name {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: inherit;
}
.sound-theme-hint {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
@keyframes sound-theme-pop {
  0% {
    scale: 1;
  }
  35% {
    scale: 1.06;
    rotate: -1.5deg;
  }
  70% {
    scale: 0.98;
    rotate: 0.8deg;
  }
  100% {
    scale: 1;
    rotate: 0deg;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sound-theme-card[data-popped][data-checked] {
    animation: none;
  }
  .sound-theme-card:active {
    scale: 1;
  }
}
.mcp-connect-backdrop {
  z-index: calc(var(--openbot-layer-dialog-host) + 2);
}
.mcp-connect-dialog {
  position: relative;
  width: min(420px, 100%);
  max-height: calc(100dvh - var(--openbot-space-6) * 2);
  overflow-y: auto;
  outline: 0;
  border-radius: var(--openbot-radius-xl);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-6);
  color: var(--openbot-text-primary);
  animation: mcp-connect-dialog-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}
.mcp-connect-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-1);
}
.mcp-connect-close {
  position: absolute;
  top: var(--openbot-space-3);
  right: var(--openbot-space-3);
}
.mcp-connect-marks {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-3);
}
.mcp-connect-mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
}
.mcp-connect-mark .app-logo {
  width: 48px;
  height: 48px;
}
.mcp-connect-dots {
  width: 28px;
  height: 2px;
  background-image: radial-gradient(circle, var(--openbot-text-muted) 1px, transparent 1px);
  background-size: 7px 2px;
  animation: mcp-connect-dots-run 900ms linear infinite;
}
.mcp-connect-marks .mcp-connect-mark-icon {
  width: 48px;
  height: 48px;
  animation: mcp-connect-mark-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}
@media (prefers-reduced-motion: reduce) {
  .mcp-connect-dots, .mcp-connect-marks .mcp-connect-mark-icon {
    animation: none;
  }
}
.mcp-connect-title {
  display: block;
  margin: var(--openbot-space-3) 0 0;
  text-align: center;
  font-size: var(--openbot-text-xl);
  line-height: var(--openbot-leading-xl);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: var(--openbot-tracking-tight);
}
.mcp-connect-description {
  margin: 0;
  text-align: center;
  text-wrap: balance;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.mcp-connect-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-grouped);
}
.mcp-connect-row {
  position: relative;
  margin: 0;
  padding: var(--openbot-space-3);
}
.mcp-connect-row + .mcp-connect-row {
  border-top: 1px solid var(--openbot-border-grouped);
}
.mcp-local-heading {
  margin: 0;
  padding-right: var(--openbot-space-6);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-sm);
}
.mcp-local-steps {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
  margin: var(--openbot-space-2) 0 0;
  padding-left: var(--openbot-space-4);
  list-style: decimal;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.mcp-local-steps > li::marker {
  color: var(--openbot-text-muted);
}
.mcp-local-address {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.mcp-local-address > code {
  overflow-wrap: anywhere;
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
}
.mcp-connect-form {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
  margin: var(--openbot-space-4) 0 0;
}
.mcp-connect-docs {
  position: absolute;
  top: var(--openbot-space-3);
  right: var(--openbot-space-3);
  gap: var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.mcp-connect-primary {
  width: 100%;
}
.mcp-connect-docs > svg, .mcp-connect-primary > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.mcp-connect-status:empty {
  display: none;
}
.mcp-connect-privacy {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.mcp-connect-privacy svg {
  flex: none;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
}
@keyframes mcp-connect-dots-run {
  to {
    background-position-x: 7px;
  }
}
@keyframes mcp-connect-mark-in {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
}
@keyframes mcp-connect-dialog-in {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
}
.mcp-connect-dialog.mcp-sign-in-page-dialog, .mcp-connect-dialog[data-page] {
  width: min(720px, 100%);
}
.mcp-sign-in-page {
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
}
.mcp-sign-in-page-dialog .mcp-sign-in-page {
  margin-top: var(--openbot-space-4);
}
.mcp-sign-in-page-note {
  min-width: 0;
  margin: 0;
}
.mcp-sign-in-relay-open {
  margin-top: var(--openbot-space-4);
}
.mcp-sign-in-relay-form {
  margin-top: var(--openbot-space-4);
}
.mcp-sign-in-relay-row {
  display: flex;
  gap: var(--openbot-space-2);
}
.mcp-sign-in-relay-row > .ui-input {
  flex: 1;
  min-width: 0;
}
.mcp-sign-in-page-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  margin-top: var(--openbot-space-4);
}
.provider-update-toast-logo {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  overflow: visible;
  fill: var(--openbot-provider-current);
}
.provider-update-toast[data-sonner-toast][data-styled="true"] [data-action] {
  grid-row: 1;
  align-self: center;
}
.provider-update-toast[data-sonner-toast][data-styled="true"]:has(.provider-update-toast-action:not([data-idle="true"])) [data-content] {
  grid-column: 2;
}
.ui-toaster.ui-toaster-closeable .provider-update-toast[data-sonner-toast][data-styled="true"] [data-action], .ui-toaster .provider-update-toast[data-sonner-toast][data-styled="true"]:has([data-close-button]) [data-action] {
  margin-right: var(--openbot-space-6);
}
.ui-toaster [data-sonner-toast] [data-action]:has(.provider-update-toast-action[data-idle="true"]) {
  display: none;
}
.provider-update-toast[data-sonner-toast][data-styled="true"] [data-description]:has(.provider-update-toast-progress) {
  display: flex;
  flex-direction: column;
}
.provider-update-toast-line {
  display: block;
  min-width: 0;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.provider-update-toast-line[data-failed="true"] {
  display: -webkit-box;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
.provider-update-toast-line[data-failed="true"][data-expanded="true"] {
  display: block;
  -webkit-line-clamp: none;
  line-clamp: none;
}
.provider-update-toast .provider-update-toast-details {
  margin-top: var(--openbot-space-1);
  color: inherit;
  font-size: inherit;
  text-decoration: underline;
}
.provider-update-toast-progress {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  margin-top: var(--openbot-space-2);
}
.ui-toaster.ui-toaster-closeable .provider-update-toast .provider-update-toast-progress, .ui-toaster .provider-update-toast:has([data-close-button]) .provider-update-toast-progress {
  margin-right: calc(-1 * var(--openbot-space-6));
}
.provider-update-toast-bar {
  flex: 1;
  min-width: 0;
}
.provider-update-toast-bar[data-provider] .ui-progress-fill {
  background: var(--openbot-provider-current);
}
.provider-update-toast-percent {
  --digit-dur: var(--openbot-duration-fast);
  --digit-distance: var(--openbot-space-1);
  --digit-blur: 0px;
  --digit-ease: ease-out;
  display: inline-flex;
  justify-content: flex-end;
  width: 4ch;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
.custom-provider-dialog {
  display: flex;
  width: min(460px, 100%);
  max-height: calc(100dvh - 48px);
  flex-direction: column;
  overflow: hidden;
  outline: 0;
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-sidebar);
  color: var(--openbot-text-primary);
}
.custom-provider-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--openbot-space-3);
  border-bottom: 1px solid var(--openbot-border);
  padding: var(--openbot-space-4);
}
.custom-provider-mark {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
}
.custom-provider-title {
  min-width: 0;
  flex: 1;
}
.custom-provider-close {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-block-start: calc(var(--openbot-space-2) * -1);
  margin-inline-end: calc(var(--openbot-space-2) * -1);
  color: var(--openbot-text-muted);
}
.custom-provider-body {
  display: flex;
  min-height: 0;
  flex-direction: column;
}
.custom-provider-form {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: var(--openbot-space-4);
  overflow-y: auto;
  padding: var(--openbot-space-4);
}
.custom-provider-list {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: var(--openbot-space-4);
  overflow-y: auto;
  padding: var(--openbot-space-4);
}
.custom-provider-list-empty {
  padding: var(--openbot-space-4) 0;
  text-align: center;
}
.custom-provider-rows {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
}
.custom-provider-rows-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--openbot-space-3);
}
.custom-provider-row {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
}
.custom-provider-row-inputs {
  display: grid;
  align-items: center;
  gap: var(--openbot-space-2);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
}
.custom-provider-row-inputs.custom-provider-row-single {
  grid-template-columns: minmax(0, 1fr) auto;
}
.custom-provider-rows-error, .custom-provider-row-error, .custom-provider-submit-error {
  display: block;
}
.custom-provider-actions {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-2);
  border-top: 1px solid var(--openbot-border);
  padding: var(--openbot-space-4);
}
.custom-provider-actions .ui-button-variant-default {
  width: 100%;
}
.custom-provider-rows > .ui-button svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.custom-provider-rows-heading > .custom-provider-discover {
  margin-inline-start: auto;
}
.custom-provider-rows-heading > .custom-provider-discover + .custom-provider-rows-error {
  display: none;
}
.custom-provider-rows-heading > .custom-provider-discover svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.custom-provider-discovery-status {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.custom-provider-discovered {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--openbot-space-1);
  list-style: none;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
}
.custom-provider-discovered-row {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-1) var(--openbot-space-2);
  border-radius: var(--openbot-radius-sm);
  cursor: pointer;
}
.custom-provider-discovered-row:hover {
  background: var(--openbot-bg-control-hover);
}
.custom-provider-discovered-id {
  min-width: 0;
  overflow: hidden;
  font-family: var(--openbot-font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.custom-provider-preset-group {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
}
.custom-provider-presets {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.custom-provider-preset.ui-button {
  display: flex;
  width: 100%;
  height: auto;
  align-items: center;
  justify-content: flex-start;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  text-align: start;
  white-space: normal;
}
.custom-provider-preset-icon {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-secondary);
}
.custom-provider-preset > .custom-provider-preset-icon svg, .custom-provider-preset-chevron {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.custom-provider-preset-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 2px;
}
.custom-provider-preset-title {
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}
.custom-provider-preset-description {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
}
.custom-provider-preset-chevron {
  flex-shrink: 0;
  color: var(--openbot-text-muted);
}
.custom-acp-presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-2);
}
.custom-acp-code {
  overflow-wrap: anywhere;
}
.custom-acp-code input, input.custom-acp-code {
  font-family: var(--openbot-font-mono);
}
.detected-providers {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
  margin-top: var(--openbot-space-4);
}
.detected-providers-heading {
  display: flex;
  min-height: 24px;
  align-items: center;
  gap: var(--openbot-space-2);
}
.detected-providers-scanning {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
}
.ui-button.detected-providers-scan {
  gap: var(--openbot-space-1-5);
  margin-inline-start: auto;
  margin-inline-end: calc(var(--openbot-space-2) * -1);
}
.detected-providers-heading > .detected-providers-scan svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.detected-providers-icon {
  color: var(--openbot-text-secondary);
}
.detected-providers .detected-providers-icon > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.ui-button.detected-providers-show-hidden {
  align-self: flex-start;
  margin-inline-start: calc(var(--openbot-space-2) * -1);
}
.ui-button.custom-agents-copy-diagnostics {
  justify-self: start;
  margin-inline-start: calc(var(--openbot-space-2) * -1);
}
.detected-providers-settings {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
  margin-top: var(--openbot-space-3);
}
.acp-registry-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-2);
}
.acp-registry-form > .ui-field {
  flex-basis: 100%;
}
.acp-registry-entry.ui-item {
  flex-wrap: wrap;
}
.acp-registry-entry .ui-item-content {
  flex-basis: 180px;
}
.acp-registry-entry .ui-item-actions {
  min-width: 0;
  flex-shrink: 1;
  flex-wrap: wrap;
  margin-inline-start: auto;
}
.agent-template-dialog {
  position: relative;
  display: flex;
  width: min(420px, 100%);
  max-height: calc(100dvh - 48px);
  flex-direction: column;
  overflow: hidden;
  outline: 0;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-sidebar);
  color: var(--openbot-text-primary);
}
.agent-template-status {
  position: absolute;
  z-index: 1;
  inset-block-start: var(--openbot-space-3);
  inset-inline-start: var(--openbot-space-3);
}
.agent-template-corner-actions {
  position: absolute;
  z-index: 1;
  display: flex;
  gap: var(--openbot-space-1);
  inset-block-start: var(--openbot-space-2);
  inset-inline-end: var(--openbot-space-2);
  color: var(--openbot-text-muted);
}
.agent-template-body {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: var(--openbot-space-4);
  padding: var(--openbot-space-6) var(--openbot-space-4) var(--openbot-space-4);
}
.agent-template-scroll {
  overflow-y: auto;
}
.agent-template-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-1);
  text-align: center;
}
.agent-template-avatar {
  width: 72px;
  height: 72px;
  margin-block-end: var(--openbot-space-3);
}
.agent-template-name {
  overflow-wrap: anywhere;
}
.agent-template-description {
  display: -webkit-box;
  margin-block-start: var(--openbot-space-1);
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}
.agent-template-rows {
  display: grid;
  overflow: hidden;
  border-radius: var(--openbot-radius-grouped);
}
.agent-template-row {
  display: grid;
  width: 100%;
  height: auto;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-3);
  border-radius: 0;
  padding: var(--openbot-space-3) var(--openbot-space-4);
  text-align: start;
  color: var(--openbot-text-muted);
}
.agent-template-row + .agent-template-row {
  border-top: 1px solid var(--openbot-border-grouped);
}
.agent-template-row-copy {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-0-5);
}
.agent-template-row-title {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.agent-template-row-detail {
  overflow: hidden;
  color: var(--openbot-text-grouped-secondary);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-template-actions {
  display: flex;
  flex-shrink: 0;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
  border-top: 1px solid var(--openbot-border);
  padding: var(--openbot-space-3) var(--openbot-space-4);
}
.agent-template-copy {
  margin-inline-end: auto;
}
.agent-template-detail-header {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-block-start: calc(var(--openbot-space-2) * -1);
}
.agent-template-detail {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: var(--openbot-space-4);
  overflow-y: auto;
}
.agent-template-section {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
}
.agent-template-prose {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  overflow-wrap: anywhere;
}
.agent-template-prose .message-markdown-heading[data-level] {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
.agent-template-prose .message-markdown-heading:not([data-level="1"], [data-level="2"]) {
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.agent-template-list {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.agent-template-list > li {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-0-5);
}
.agent-template-skill-toggle {
  justify-content: flex-start;
  align-self: flex-start;
  gap: var(--openbot-space-1);
  margin-inline-start: calc(var(--openbot-space-2) * -1);
}
.agent-template-skill-text {
  max-height: 240px;
  margin: var(--openbot-space-1) 0 0;
  overflow: auto;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-3);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  white-space: pre-wrap;
}
.agent-delete-undo-toast-host {
  width: var(--width);
}
.agent-delete-undo-toast {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-3);
  overflow: hidden;
  padding: var(--openbot-space-3);
  padding-bottom: calc(var(--openbot-space-3) + var(--openbot-space-1));
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface-raised);
  box-shadow: 0 0 0 1px var(--openbot-border), var(--openbot-shadow-raised);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
}
.agent-delete-undo-toast-avatar {
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  width: 32px;
  height: 32px;
}
.agent-delete-undo-toast-text {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.agent-delete-undo-toast-title {
  overflow: hidden;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-delete-undo-toast-detail {
  overflow: hidden;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-delete-undo-toast-bar {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
}
.agent-delete-undo-toast-bar .ui-progress-track {
  border-radius: 0;
  background: transparent;
}
.agent-delete-undo-toast-bar .ui-progress-fill {
  background: var(--openbot-accent);
  transition-duration: var(--openbot-duration-fast);
  transition-timing-function: linear;
}
.whats-new-dialog {
  position: relative;
  display: flex;
  width: min(480px, 100%);
  max-height: min(640px, calc(100dvh - 2 * var(--openbot-space-6)));
  flex-direction: column;
  overflow: hidden;
  outline: 0;
  border-radius: var(--openbot-radius-xl);
  background: var(--openbot-bg-sidebar);
  color: var(--openbot-text-primary);
}
.whats-new-close {
  position: absolute;
  z-index: 1;
  inset-block-start: var(--openbot-space-3);
  inset-inline-end: var(--openbot-space-3);
  color: var(--openbot-text-muted);
}
.whats-new-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-8) var(--openbot-space-6) var(--openbot-space-4);
  text-align: center;
}
.whats-new-logo {
  --app-logo-background: var(--openbot-surface-light);
  width: 56px;
  height: 56px;
  margin-block-end: var(--openbot-space-3);
  border-radius: var(--openbot-radius-logo);
}
.whats-new-title {
  margin: 0;
  font-size: var(--openbot-text-2xl);
  font-weight: var(--openbot-weight-bold);
  line-height: var(--openbot-leading-2xl);
}
.whats-new-body {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--openbot-space-6);
  overflow-y: auto;
  padding: var(--openbot-space-2) var(--openbot-space-6) var(--openbot-space-6);
  border-block-start: 1px solid transparent;
}
.whats-new-body.scroll-fade-top {
  border-block-start-color: var(--openbot-border);
}
.whats-new-body.scroll-fade-bottom {
  mask-image: linear-gradient(to bottom, var(--openbot-text-primary) calc(100% - 32px), transparent);
}
.whats-new-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-2);
  padding-block: var(--openbot-space-6);
  text-align: center;
}
.whats-new-state .ui-button {
  margin-block-start: var(--openbot-space-2);
}
.whats-new-state-icon {
  width: 24px;
  height: 24px;
  color: var(--openbot-warning-text);
}
.whats-new-notice {
  padding: var(--openbot-space-3) var(--openbot-space-4) var(--openbot-space-4);
  border-radius: var(--openbot-radius-card);
  background-image: linear-gradient( 180deg, var(--openbot-warning-soft), var(--openbot-warning) );
  @supports (color: color-mix(in lab, red, red)) {
    background-image: linear-gradient( 180deg, var(--openbot-warning-soft), color-mix(in srgb, var(--openbot-warning) 3%, transparent) );
  }
  box-shadow: inset 0 0 0 1px var(--openbot-warning);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--openbot-warning) 26%, transparent);
  }
  --whats-new-tone: var(--openbot-warning-text);
}
.whats-new-notice-title {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin: 0 0 var(--openbot-space-2);
  color: var(--openbot-warning-text);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
}
.whats-new-notice-title svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
.whats-new-group {
  --whats-new-tone: var(--openbot-text-muted);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--openbot-space-3);
}
.whats-new-group[data-type="added"] {
  --whats-new-tone: var(--openbot-logo-production);
}
.whats-new-group[data-type="changed"] {
  --whats-new-tone: var(--openbot-accent-text);
}
.whats-new-group[data-type="fixed"] {
  --whats-new-tone: var(--openbot-success-text);
}
.whats-new-group-title {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin: 0;
  color: var(--whats-new-tone);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.whats-new-group-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--openbot-radius-pill);
  background: var(--whats-new-tone);
  box-shadow: 0 0 10px var(--whats-new-tone);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 10px color-mix(in srgb, var(--whats-new-tone) 70%, transparent);
  }
}
.whats-new-group-count {
  padding: 0 var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-pill);
  background: var(--whats-new-tone);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--whats-new-tone) 12%, transparent);
  }
  font-family: var(--openbot-font-mono);
  font-weight: var(--openbot-weight-medium);
  letter-spacing: 0;
}
.whats-new-list {
  display: grid;
  width: 100%;
  gap: var(--openbot-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.whats-new-item {
  position: relative;
  padding-inline-start: var(--openbot-space-6);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  text-wrap: pretty;
}
.whats-new-item-headline {
  display: block;
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}
.whats-new-item-detail {
  display: block;
  margin-block-start: var(--openbot-space-0-5);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.whats-new-item::before {
  content: "";
  position: absolute;
  inset-block-start: 0.75em;
  inset-inline-start: var(--openbot-space-1);
  width: 8px;
  height: 1px;
  background: var(--whats-new-tone);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--whats-new-tone) 70%, transparent);
  }
}
.whats-new-toggle {
  margin-inline-start: calc(-1 * var(--openbot-space-2));
  color: var(--openbot-text-muted);
}
.whats-new-actions .ui-button svg, .whats-new-toggle svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.whats-new-toggle svg {
  transition: transform var(--openbot-duration-fast) var(--openbot-ease-out);
}
.whats-new-toggle[data-expanded] svg {
  transform: rotate(180deg);
}
.whats-new-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border-block-start: 1px solid var(--openbot-border);
}
@media (max-width: 560px) {
  .whats-new-backdrop {
    padding: var(--openbot-space-3);
  }
  .whats-new-header {
    padding-inline: var(--openbot-space-4);
  }
  .whats-new-body {
    padding-inline: var(--openbot-space-4);
  }
}
@media (prefers-reduced-motion: reduce) {
  .whats-new-backdrop, .whats-new-toggle svg {
    animation: none;
    transition: none;
  }
}
.help-menu {
  width: 320px;
}
.help-menu .help-menu-news {
  gap: var(--openbot-space-3);
}
.help-menu-news-headline {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.help-menu-news .ui-menu-trailing {
  flex: none;
}
.billing-panel {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
}
.billing-loading {
  display: grid;
  place-items: center;
  padding: var(--openbot-space-8);
}
.billing-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--openbot-space-3);
  min-height: 32px;
}
.billing-toolbar .ui-button {
  max-width: 100%;
  height: auto;
  white-space: normal;
}
.billing-empty {
  padding: var(--openbot-space-6) var(--openbot-space-4);
  border: 1px dashed var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  text-align: center;
}
.billing-server-logo {
  width: 32px;
  height: 32px;
  border-radius: var(--openbot-radius-md);
}
.billing-server-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
}
.billing-server .ui-item-actions {
  gap: var(--openbot-space-2);
}
.billing-server-price {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.billing-dialog-backdrop {
  background: var(--openbot-bg-overlay);
}
.billing-dialog {
  position: relative;
  display: flex;
  width: min(640px, 100%);
  max-height: calc(100dvh - 2 * var(--openbot-space-6));
  flex-direction: column;
  overflow: hidden;
  outline: 0;
  border-radius: var(--openbot-radius-modal);
  background: var(--openbot-bg-sidebar);
  color: var(--openbot-text-primary);
}
.billing-dialog-close {
  position: absolute;
  z-index: 1;
  inset-block-start: var(--openbot-space-3);
  inset-inline-end: var(--openbot-space-3);
  color: var(--openbot-text-muted);
}
.billing-dialog-header {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-6) var(--openbot-space-6) var(--openbot-space-4);
}
.billing-dialog-header p {
  margin: 0;
}
.billing-dialog-title {
  margin: 0;
  font-size: var(--openbot-text-2xl);
  font-weight: var(--openbot-weight-bold);
  line-height: var(--openbot-leading-2xl);
}
.billing-dialog-body {
  min-height: 0;
  overflow-y: auto;
  padding: 0 var(--openbot-space-6) var(--openbot-space-6);
}
.billing-license {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-3);
}
@container (max-width: 560px) {
  .billing-license .ui-alert {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }
  .billing-license .ui-alert-actions {
    grid-column: 2;
    justify-content: flex-start;
  }
}
.billing-license-icon {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-secondary);
}
.billing-license-icon svg {
  width: 18px;
  height: 18px;
}
.billing-license-row .ui-item-actions {
  gap: var(--openbot-space-2);
}
.billing-license-buy {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3) var(--openbot-space-4);
}
.billing-license-buy-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
}
.billing-license-buy-users, .billing-license-buy-total {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
}
.billing-license-buy-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.billing-license-stepper {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
  margin: 0;
  border: 0;
  padding: 0;
}
.billing-license-stepper-value {
  min-width: 3ch;
  font-weight: var(--openbot-weight-semibold);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.billing-license-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-2);
}
.billing-license-link.ui-button {
  height: auto;
  padding: 0;
}
.billing-license-divider {
  width: 100%;
  margin: var(--openbot-space-2) 0;
  border: 0;
  border-top: 1px solid var(--openbot-border);
}
.billing-license-change {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-3);
}
.billing-license-quote {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
  border-top: 1px solid var(--openbot-border);
  padding-top: var(--openbot-space-3);
}
.billing-license-lines {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.billing-license-lines div {
  display: flex;
  justify-content: space-between;
  gap: var(--openbot-space-3);
}
.billing-license-lines dd {
  margin: 0;
  color: var(--openbot-text-primary);
  font-variant-numeric: tabular-nums;
}
.billing-license-total {
  display: flex;
  align-items: baseline;
  gap: var(--openbot-space-2);
  margin: 0;
}
.billing-license-total-amount {
  font-size: var(--openbot-text-2xl);
  font-weight: var(--openbot-weight-bold);
  font-variant-numeric: tabular-nums;
}
.billing-license-users {
  max-height: 320px;
  overflow-y: auto;
}
.reference-chip, .composer-mention-token {
  display: inline-flex;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  height: var(--openbot-space-6);
  align-items: center;
  justify-content: flex-start;
  gap: var(--openbot-space-1);
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-border);
  padding: var(--openbot-space-1) var(--openbot-space-1-5) var(--openbot-space-1) var(--openbot-space-1);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: 500;
  line-height: var(--openbot-space-4);
  vertical-align: middle;
  white-space: nowrap;
  text-decoration: none;
}
.reference-chip[data-kind="mcp"], .reference-chip[data-kind="plugin"], .reference-chip[data-kind="skill"] {
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
}
.reference-chip[data-kind="quote"] {
  max-width: min(240px, 100%);
  font-weight: 450;
}
.reference-chip[data-kind="agent"]:hover, button.reference-chip[data-kind="quote"]:hover {
  background: var(--openbot-border-strong);
  color: var(--openbot-text-primary);
}
.reference-chip .reference-chip-icon {
  display: inline-grid;
  width: var(--openbot-space-4);
  height: var(--openbot-space-4);
  flex: 0 0 var(--openbot-space-4);
  place-items: center;
  overflow: hidden;
  border-radius: var(--openbot-radius-xs);
  color: inherit;
}
.reference-chip-icon > img, .reference-chip-icon > svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
:is(.message-reference-chip, .composer-mention-token) .reference-chip-icon > svg.lucide {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  stroke-width: var(--openbot-icon-stroke);
}
.reference-chip-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
:root {
  --stagger-dur: 500ms;
  --stagger-distance: 12px;
  --stagger-stagger: 40ms;
  --stagger-blur: 3px;
  --stagger-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
.t-stagger-line {
  display: block;
  opacity: 0;
  transform: translateY(var(--stagger-distance));
  filter: blur(var(--stagger-blur));
  transition: opacity var(--stagger-dur) var(--stagger-ease), transform var(--stagger-dur) var(--stagger-ease), filter var(--stagger-dur) var(--stagger-ease);
  will-change: transform, opacity, filter;
}
.t-stagger-line--2 {
  transition-delay: var(--stagger-stagger);
}
.t-stagger-line--3 {
  transition-delay: calc(var(--stagger-stagger) * 2);
}
.t-stagger.is-shown .t-stagger-line {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
@media (prefers-reduced-motion: reduce) {
  .t-stagger-line {
    transition: none !important;
  }
}
.skill-preview {
  display: grid;
  gap: var(--openbot-space-6);
  min-width: 0;
}
.skill-preview-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: var(--openbot-space-3);
  row-gap: var(--openbot-space-3);
  align-items: center;
}
.skill-preview-heading .agent-skill-icon {
  grid-column: 1;
  align-self: center;
}
.skill-preview-name {
  grid-column: 2;
  min-width: 0;
}
.skill-preview-action {
  grid-column: 3;
  justify-self: end;
}
.skill-preview-summary {
  grid-column: 1 / -1;
}
.skill-preview-heading h2, .skill-preview-heading p, .skill-preview-request p {
  margin: 0;
}
.skill-preview-heading h2 {
  font-size: var(--openbot-text-2xl);
  font-weight: var(--openbot-weight-medium);
  overflow-wrap: anywhere;
}
.skill-preview-heading p, .skill-preview-description {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-lg);
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.skill-preview-heading .skill-preview-creator {
  margin-top: var(--openbot-space-1);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-md);
}
.skill-preview-card {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 160px;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--openbot-radius-xl);
  padding: var(--openbot-space-6);
}
.skill-preview-gradient, .skill-preview-gradient canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
  clip-path: inset(0 round var(--openbot-radius-xl));
}
.skill-preview-card > :not(.skill-preview-gradient) {
  position: relative;
}
.skill-preview-request {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  width: min(100%, 520px);
  min-width: 0;
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-canvas);
  padding: var(--openbot-space-3);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-lg);
  line-height: 1.5;
}
.skill-preview-request p {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.skill-preview-request .reference-chip {
  max-width: 100%;
}
.skill-preview-request button {
  flex-shrink: 0;
}
.skill-preview-unavailable {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
}
.skill-preview-description > :first-child {
  margin-top: 0;
}
.skill-preview-description > :last-child {
  margin-bottom: 0;
}
.skill-preview-request .ui-icon-button {
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-border);
}
.agent-skills-modal:has(.agent-skill-detail) {
  width: min(760px, calc(100vw - 32px));
  height: min(640px, calc(100dvh - 48px));
}
:root {
  --page-slide-dur: 250ms;
  --page-fade-dur: 250ms;
  --page-slide-distance: 8px;
  --page-blur: 3px;
  --page-stagger: 0ms;
  --page-exit-enabled: 1;
  --page-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --page-fade-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
.t-page-slide {
  position: relative;
}
.t-page-slide .t-page[data-page-id="1"] {
  --t-page-from-x: calc(var(--page-slide-distance) * -1);
}
.t-page-slide .t-page[data-page-id="2"] {
  --t-page-from-x: var(--page-slide-distance);
}
.t-page-slide .t-page {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateX(calc(var(--t-page-from-x, 0px) * var(--page-exit-enabled)));
  filter: blur(calc(var(--page-blur) * var(--page-exit-enabled)));
  transition: opacity var(--page-fade-dur) var(--page-fade-ease), transform var(--page-slide-dur) var(--page-slide-ease), filter var(--page-slide-dur) var(--page-slide-ease);
  will-change: opacity, transform, filter;
}
.t-page-slide[data-page="1"] .t-page[data-page-id="1"], .t-page-slide[data-page="2"] .t-page[data-page-id="2"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
  filter: blur(0);
  transition-delay: var(--page-stagger);
}
@media (prefers-reduced-motion: reduce) {
  .t-page-slide .t-page {
    transition: none !important;
  }
}
.agent-skills-pages {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
@starting-style {
  .agent-skills-pages.t-page-slide .t-page {
    opacity: 0;
    transform: translateX(var(--t-page-from-x));
    filter: blur(var(--page-blur));
  }
}
:root {
  --resize-dur: 300ms;
  --resize-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
.t-resize {
  transition: width var(--resize-dur) var(--resize-ease), height var(--resize-dur) var(--resize-ease);
  will-change: width, height;
}
@media (prefers-reduced-motion: reduce) {
  .t-resize {
    transition: none !important;
  }
}
.skill-preview-heading.t-stagger-line, .skill-preview-card.t-stagger-line {
  display: grid;
}
@starting-style {
  .skill-preview.t-stagger.is-shown .t-stagger-line {
    opacity: 0;
    transform: translateY(var(--stagger-distance));
    filter: blur(var(--stagger-blur));
  }
}
.skill-preview-request .skill-preview-chip {
  color: var(--skill-logo-color, var(--openbot-accent-text));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--skill-logo-color, var(--openbot-accent-text)), var(--openbot-text-primary) 35%);
  }
  background: var(--skill-logo-color, var(--openbot-accent-text));
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--skill-logo-color, var(--openbot-accent-text)) 18%, transparent);
  }
}
.agent-skills-tabs {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.agent-skills-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--openbot-space-2);
  flex-shrink: 0;
  margin: var(--openbot-space-3);
}
.agent-skills-tab-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.agent-local-skill-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-2);
}
.agent-skills-tab-slot {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
@starting-style {
  .agent-skills-tab-content[data-selected] {
    opacity: 0;
    transform: translateY(var(--sliding-tabs-content-distance));
    filter: blur(var(--sliding-tabs-content-blur));
  }
}
.agent-local-library:not(.agent-skill-detail) {
  gap: var(--openbot-space-0-5);
  padding: 0;
}
.agent-local-skill-row:has(.agent-skill-update) {
  grid-template-columns: minmax(0, 1fr) auto auto;
}
:root {
  color-scheme: dark;
  --background: var(--openbot-bg-canvas);
  --surface: var(--openbot-bg-surface);
  --border: var(--openbot-border);
  --text-primary: var(--openbot-text-primary);
  --text-secondary: var(--openbot-text-secondary);
  --text-muted: var(--openbot-text-muted);
  --accent: var(--openbot-accent);
  --danger: var(--openbot-danger);
  --digit-dur: 500ms;
  --digit-distance: 8px;
  --digit-stagger: 70ms;
  --digit-blur: 2px;
  --digit-ease: cubic-bezier(0.34, 1.45, 0.64, 1);
  --digit-dir-x: 0;
  --digit-dir-y: 1;
  --stream-gap: 40ms;
  --stream-fade: 300ms;
  --stream-catch-up: 400ms;
  --stream-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --text-swap-dur: 150ms;
  --text-swap-translate-y: 4px;
  --text-swap-blur: 2px;
  --text-swap-ease: ease-in-out;
  --modal-open-dur: 250ms;
  --modal-close-dur: 150ms;
  --modal-scale: 0.96;
  --modal-scale-close: 0.96;
  --modal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --page-slide-dur: 250ms;
  --page-fade-dur: 250ms;
  --page-slide-distance: 8px;
  --page-blur: 3px;
  --page-stagger: 0ms;
  --page-exit-enabled: 1;
  --page-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --page-fade-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --panel-open-dur: 400ms;
  --panel-close-dur: 350ms;
  --panel-translate-x: 0px;
  --panel-translate-y: 100px;
  --panel-blur: 2px;
  --panel-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --resize-dur: 300ms;
  --resize-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shake-distance: 6px;
  --shake-overshoot: 4px;
  --shake-dur-a: 80ms;
  --shake-dur-b: 60ms;
  --shake-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --revert-hold: 3000ms;
  --revert-dur: 280ms;
  --acc-expand: 250ms;
  --acc-collapse: 250ms;
  --acc-ease: cubic-bezier(0.22, 1, 0.36, 1);
  font-family: var(--openbot-font-sans);
  font-synthesis: none;
  text-rendering: geometricPrecision;
}
.web-app {
  min-width: 0;
  height: 100dvh;
  color: var(--openbot-text-primary);
  background: var(--openbot-bg-canvas);
}
.web-app-frame {
  min-width: 0;
  height: 100%;
}
.web-app-frame > .server-rail {
  padding-top: var(--openbot-space-3);
}
.web-app-frame > .server-rail::before {
  display: none;
}
.web-app-frame > .server-rail::after {
  top: 0;
}
.web-mobile-navigation {
  display: none;
}
@media (max-width: 720px) {
  .web-app-window {
    --web-mobile-navigation-height: 64px;
  }
  .web-app-window:has(> .web-app-frame[data-web-mobile-pane="workspace"]) > .window-rail {
    display: flex;
    padding-bottom: calc( var(--web-mobile-navigation-height) + env(safe-area-inset-bottom, 0px) + var(--openbot-space-3) );
  }
  .web-app-frame {
    --server-rail-width: 56px;
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: calc(var(--web-mobile-navigation-height) + env(safe-area-inset-bottom, 0px));
  }
  .web-app-frame[data-web-mobile-pane="conversation"] {
    grid-template-columns: minmax(0, 1fr);
  }
  .web-app-frame[data-web-mobile-pane="conversation"] > .server-rail, .web-app-frame[data-web-mobile-pane="conversation"] > .sidebar {
    display: none;
  }
  .web-app-frame > .left-panel-resizer {
    display: none;
  }
  .web-app-frame[data-web-mobile-pane="conversation"] .conversation-panel, .web-app-frame[data-web-mobile-pane="conversation"] .diagram-view, .web-app-frame[data-web-mobile-pane="conversation"] .remote-compatibility-screen {
    grid-column: 1;
    min-width: 0;
  }
  .web-app-frame[data-web-mobile-pane="workspace"] {
    grid-template-columns: 56px minmax(0, 1fr);
  }
  .web-app-frame[data-web-mobile-pane="workspace"] .conversation-panel, .web-app-frame[data-web-mobile-pane="workspace"] .diagram-view, .web-app-frame[data-web-mobile-pane="workspace"] .remote-compatibility-screen, .web-app-frame[data-web-mobile-pane="workspace"] > .server-connection-workspace {
    display: none;
  }
  .web-app-frame[data-web-mobile-pane="workspace"] > .server-rail {
    display: flex;
    grid-column: 1;
    grid-row: 1;
  }
  .web-app-frame[data-web-mobile-pane="workspace"] > .sidebar {
    display: flex;
    grid-column: 2;
    grid-row: 1;
    width: auto;
  }
  .web-app-frame[data-web-mobile-pane="workspace"]:not(.app-frame-with-server-rail) {
    grid-template-columns: minmax(0, 1fr);
  }
  .web-app-frame[data-web-mobile-pane="workspace"]:not(.app-frame-with-server-rail) > .sidebar {
    grid-column: 1;
  }
  .web-mobile-navigation {
    position: fixed;
    z-index: var(--openbot-layer-popover);
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    min-height: var(--web-mobile-navigation-height);
    align-items: center;
    justify-content: center;
    border-top: 1px solid var(--openbot-border);
    background: var(--openbot-bg-sidebar);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--openbot-bg-sidebar) 94%, transparent);
    }
    padding: var(--openbot-space-2) max(var(--openbot-space-3), env(safe-area-inset-left, 0px)) calc(var(--openbot-space-2) + env(safe-area-inset-bottom, 0px)) max(var(--openbot-space-3), env(safe-area-inset-right, 0px));
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
  }
  .web-mobile-navigation-list {
    display: grid;
    width: min(100%, 360px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--openbot-space-1);
  }
  .web-mobile-navigation-button {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: var(--openbot-space-2);
    border: 1px solid transparent;
    border-radius: var(--openbot-radius-lg);
    color: var(--openbot-text-muted);
    font-size: var(--openbot-text-sm);
    font-weight: var(--openbot-weight-semibold);
  }
  .web-mobile-navigation-button > svg {
    width: var(--openbot-icon-md);
    height: var(--openbot-icon-md);
    stroke-width: var(--openbot-icon-stroke);
  }
  .web-mobile-navigation-button[data-active="true"] {
    border-color: var(--openbot-border);
    background: var(--openbot-bg-control);
    color: var(--openbot-text-primary);
  }
  .web-app-frame[data-web-mobile-pane="conversation"] .conversation-header {
    padding-inline: var(--openbot-space-2);
  }
  .web-app-frame[data-web-mobile-pane="conversation"] .conversation-header-actions {
    gap: var(--openbot-space-1);
  }
  .web-app-frame[data-web-mobile-pane="conversation"] .conversation-header .provider-model-trigger {
    max-width: 132px;
  }
  .web-app-frame[data-web-mobile-pane="conversation"] .conversation-panel:has(.settings-panel) .settings-panel {
    width: 100%;
  }
  .web-app-frame[data-web-mobile-pane="conversation"] .conversation-panel.browser-panel-active {
    padding-right: 0;
  }
  .web-app-frame[data-web-mobile-pane="conversation"] .browser-panel {
    width: 100%;
    max-width: 100%;
  }
  .web-app .join-server-backdrop {
    padding: var(--openbot-space-3);
  }
  .web-app .join-server-content {
    padding: var(--openbot-space-6) var(--openbot-space-4);
  }
  .web-app .ui-dialog-content {
    max-width: calc(100vw - 24px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .web-mobile-navigation-button {
    transition: none;
  }
}
.web-connect.conversation-panel {
  display: grid;
  place-items: center;
  overflow-y: auto;
  padding: var(--openbot-space-8) var(--openbot-space-4);
}
.web-connect-card {
  display: flex;
  width: min(420px, 100%);
  flex-direction: column;
  gap: var(--openbot-space-6);
}
.web-connect-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-2);
  text-align: center;
}
.web-connect-header .ui-heading {
  font-size: var(--openbot-text-3xl);
  font-weight: var(--openbot-weight-bold);
  line-height: var(--openbot-leading-3xl);
}
.web-connect-header .ui-text {
  max-width: 340px;
  line-height: var(--openbot-leading-sm);
}
.web-connect-logo {
  --app-logo-background: var(--openbot-surface-light);
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  margin-bottom: var(--openbot-space-4);
  border-radius: var(--openbot-radius-xl);
  box-shadow: 0 12px 28px var(--openbot-shadow-dialog), inset 0 1px 0 var(--openbot-border-strong);
}
.web-connect-steps {
  display: grid;
  margin: 0;
  padding: var(--openbot-space-1);
  list-style: none;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
}
.web-connect-steps li {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-2) var(--openbot-space-3);
}
.web-connect-steps li + li {
  border-top: 1px solid var(--openbot-border);
}
.web-connect-steps .ui-text {
  min-width: 0;
  overflow-wrap: anywhere;
}
.web-connect-step-number {
  display: grid;
  width: var(--openbot-control-xs);
  height: var(--openbot-control-xs);
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
}
.web-connect-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-3);
}
.web-connect-primary-actions {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  gap: var(--openbot-space-2);
}
.web-connect-primary-actions .ui-button {
  min-width: 160px;
  flex: 1 1 0;
}
.web-connect-download.ui-button-variant-default, .web-connect-download.ui-button-variant-default:hover {
  color: var(--openbot-text-on-light);
}
.web-connect-download.ui-button-variant-outline {
  color: var(--openbot-text-secondary);
}
@media (hover: hover) and (pointer: fine) and (min-width: 601px) {
  .web-connect-download.ui-button-variant-outline:hover {
    color: var(--openbot-text-primary);
  }
}
.web-connect-hosted.ui-button {
  width: 100%;
}
.web-connect-refresh.ui-button {
  color: var(--openbot-text-muted);
}
.web-connect-hosted.ui-button svg, .web-connect-actions .ui-button svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.web-connect-refresh.ui-button svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-ease: initial;
      --hosted-upsell-beam-angle: 0deg;
    }
  }
}


/* /@fs//app/src/renderer/src/styles.css */
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties;
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-cyrillic-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-cyrillic-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-greek-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-greek-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-vietnamese-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-cyrillic-ext-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-cyrillic-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-greek-ext-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-greek-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-vietnamese-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-latin-ext-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-latin-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
      "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
      "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --spacing: 0.25rem;
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring:where(:not(iframe)) {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .\!visible {
    visibility: visible !important;
  }
  .collapse {
    visibility: collapse;
  }
  .invisible {
    visibility: hidden;
  }
  .visible {
    visibility: visible;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .static {
    position: static;
  }
  .sticky {
    position: sticky;
  }
  .isolate {
    isolation: isolate;
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .block {
    display: block;
  }
  .contents {
    display: contents;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .table {
    display: table;
  }
  .size-3 {
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
  }
  .size-4 {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }
  .size-\[14px\] {
    width: 14px;
    height: 14px;
  }
  .size-\[18px\] {
    width: 18px;
    height: 18px;
  }
  .shrink {
    flex-shrink: 1;
  }
  .flex-grow {
    flex-grow: 1;
  }
  .grow {
    flex-grow: 1;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .resize {
    resize: both;
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .fill-current {
    fill: currentcolor;
  }
  .fill-none {
    fill: none;
  }
  .stroke-current {
    stroke: currentcolor;
  }
  .lowercase {
    text-transform: lowercase;
  }
  .ring {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .backdrop-filter {
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }
  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }
}
:root {
  --openbot-provider-current: currentcolor;
  --openbot-bg-native-canvas: #141414;
  --openbot-bg-native-sidebar: #141414;
  --openbot-bg-sheet: #141414;
  --openbot-bg-grouped: #212121;
  --openbot-text-grouped-secondary: #96969b;
  --openbot-border-grouped: #333335;
  --openbot-radius-grouped: 16px;
  --openbot-bg-chrome-glass: rgba(38, 38, 40, 0.96);
  --openbot-border-chrome-glass: rgba(255, 255, 255, 0.08);
  --openbot-bg-chrome-blur: rgba(26, 26, 28, 0.62);
  --openbot-bg-canvas: #1a1a1a;
  --openbot-bg-canvas-clear: rgba(26, 26, 26, 0);
  --openbot-bg-sidebar: #1a1a1a;
  --openbot-marketplace-detail-bg: #111111;
  --openbot-bg-surface: #212121;
  --openbot-bg-surface-raised: #242424;
  --openbot-bg-control: #212121;
  --openbot-bg-control-hover: #242424;
  --openbot-bg-control-active: #2a2a2a;
  --openbot-tabs-bar-bg: #212121;
  --openbot-tabs-pill-bg: #2a2a2a;
  --openbot-bg-overlay: rgba(26, 26, 26, 0.92);
  --openbot-dialog-overlay: rgba(0, 0, 0, 0.1);
  --openbot-dialog-ring: rgba(255, 255, 255, 0.1);
  --openbot-bg-glass: rgba(33, 33, 33, 0.76);
  --openbot-glass-surface: rgba(255, 255, 255, 0.07);
  --openbot-glass-surface-hover: rgba(255, 255, 255, 0.11);
  --openbot-glass-border: rgba(255, 255, 255, 0.18);
  --openbot-glass-highlight: rgba(255, 255, 255, 0.12);
  --openbot-glass-shadow: rgba(0, 0, 0, 0.28);
  --openbot-hero-grid-line: rgba(214, 173, 242, 0.09);
  --openbot-price-metal-high: #4c4c4c;
  --openbot-price-metal-core: #1f1f1f;
  --openbot-price-metal-low: #343434;
  --openbot-price-sheen-cool: rgba(150, 196, 255, 0.92);
  --openbot-price-sheen-light: rgba(240, 244, 250, 0.98);
  --openbot-price-sheen-warm: rgba(255, 184, 132, 0.94);
  --openbot-price-sheen-cool-soft: rgba(150, 196, 255, 0.26);
  --openbot-price-sheen-warm-soft: rgba(255, 184, 132, 0.28);
  --openbot-price-sheen-cool-clear: rgba(150, 196, 255, 0);
  --openbot-price-sheen-warm-clear: rgba(255, 184, 132, 0);
  --openbot-price-rim: rgba(255, 255, 255, 0.28);
  --openbot-price-rim-under: rgba(255, 255, 255, 0.1);
  --openbot-price-glow: rgba(180, 200, 255, 0.22);
  --openbot-bg-host-inset: #101216;
  --openbot-bg-notch: #000000;
  --openbot-mask-solid: #000000;
  --openbot-transparent: rgba(0, 0, 0, 0);
  --openbot-drawer-scrim: #000000;
  --openbot-scroll-edge-overlay: rgba(0, 0, 0, 0.72);
  --openbot-queue-surface: var(--openbot-bg-surface);
  --openbot-queue-border: var(--openbot-border-strong);
  --openbot-queue-text: var(--openbot-text-primary);
  --openbot-queue-action: var(--openbot-text-muted);
  --openbot-border: rgba(255, 255, 255, 0.035);
  --openbot-border-strong: rgba(255, 255, 255, 0.045);
  --openbot-image-outline: rgba(255, 255, 255, 0.1);
  --openbot-border-focus: rgba(0, 124, 247, 0.72);
  --openbot-text-primary: #ffffff;
  --openbot-text-on-light: #141414;
  --openbot-surface-light: #f0f0f0;
  --openbot-action: #f0f0f0;
  --openbot-action-foreground: #141414;
  --openbot-qr-background: #ffffff;
  --openbot-onboarding-desktop-mist: #dbe9ff;
  --openbot-onboarding-desktop-blue: #7eb4f2;
  --openbot-onboarding-desktop-indigo: #6f7de8;
  --openbot-sound-warm-back: #d95926;
  --openbot-sound-warm-ink: #f2c46b;
  --openbot-sound-mech-back: #1f1f1f;
  --openbot-sound-mech-ink: #dbe9ff;
  --openbot-sound-bubble-back: #5b5fe0;
  --openbot-sound-bubble-ink: #8bdee8;
  --openbot-sound-press-back: #ff1e5e;
  --openbot-sound-press-ink: #ffd8a8;
  --openbot-sound-off-back: #212121;
  --openbot-sound-off-ink: #4c4c4c;
  --openbot-onboarding-window: #f3f5f8;
  --openbot-text-secondary: #dcdcdc;
  --openbot-text-muted: #979797;
  --openbot-text-dim: #6a6a6a;
  --openbot-text-readable: rgba(255, 255, 255, 0.52);
  --openbot-text-muted-on-light: rgba(20, 20, 20, 0.52);
  --openbot-text-dim-on-light: rgba(20, 20, 20, 0.36);
  --openbot-download-card-muted: rgba(20, 20, 20, 0.68);
  --openbot-download-card-chip: rgba(20, 20, 20, 0.1);
  --openbot-download-card-border: rgba(20, 20, 20, 0.16);
  --openbot-download-card-focus: rgba(242, 242, 242, 0.86);
  --openbot-text-placeholder: #bfbfbf;
  --openbot-text-on-accent: #ffffff;
  --openbot-text-on-status: #07130c;
  --openbot-accent: #007cf7;
  --openbot-accent-hover: #1f8fff;
  --openbot-accent-text: #42a0ff;
  --openbot-accent-soft: rgba(0, 124, 247, 0.16);
  --openbot-accent-strong: rgba(0, 124, 247, 0.34);
  --openbot-settings-text-muted: rgba(255, 255, 255, 0.59);
  --openbot-provider-codex: var(--openbot-text-primary);
  --openbot-provider-claude: #d97757;
  --openbot-provider-grok: var(--openbot-text-primary);
  --openbot-provider-antigravity: #8e75b2;
  --openbot-chart-series-codex: #d6adf2;
  --openbot-chart-series-claude: var(--openbot-provider-claude);
  --openbot-chart-series-grok: #6bc7d9;
  --openbot-chart-series-other: var(--openbot-text-muted);
  --openbot-chart-storage-workspaces: #3987e5;
  --openbot-chart-storage-files: #d95926;
  --openbot-chart-storage-chats: #199e70;
  --openbot-chart-storage-downloads: #9085e9;
  --openbot-chart-storage-runtimes: #c98500;
  --openbot-chart-storage-app: var(--openbot-text-dim);
  --openbot-logo-production: #d6adf2;
  --openbot-logo-eye: #040007;
  --openbot-logo-production-eye: var(--openbot-logo-eye);
  --openbot-logo-dev: #e3b866;
  --openbot-logo-preview: #61c985;
  --openbot-unread-surface: #74b9ff;
  --openbot-unread-text: #07131f;
  --openbot-success: #31cf76;
  --openbot-success-text: #31cf76;
  --openbot-warning-text: #ff9412;
  --openbot-danger-text: #ff6069;
  --openbot-success-soft: rgba(49, 207, 118, 0.12);
  --openbot-success-wash: rgba(49, 207, 118, 0.045);
  --openbot-warning: #ff9412;
  --openbot-warning-soft: rgba(255, 148, 18, 0.12);
  --openbot-question-option: #6bc7d9;
  --openbot-question-option-soft: rgba(107, 199, 217, 0.14);
  --openbot-question-option-hover: rgba(107, 199, 217, 0.2);
  --openbot-question-option-pressed: rgba(107, 199, 217, 0.26);
  --openbot-island-identity-name: var(--openbot-text-primary);
  --openbot-question-badge-text: #8bdee8;
  --openbot-question-badge-soft: rgba(107, 199, 217, 0.16);
  --openbot-message-badge-text: #91c8ff;
  --openbot-message-badge-soft: rgba(116, 185, 255, 0.16);
  --openbot-badge-new: #ff1e5e;
  --openbot-badge-new-soft: rgba(255, 30, 94, 0.16);
  --openbot-beam-teal: var(--openbot-file-teal);
  --openbot-beam-blue: var(--openbot-accent-text);
  --openbot-beam-pink: var(--openbot-file-pink);
  --openbot-approval-badge-soft: rgba(255, 148, 18, 0.18);
  --openbot-danger: #fd2f3b;
  --openbot-danger-hover: #fd5d67;
  --openbot-danger-soft: rgba(253, 47, 59, 0.16);
  --openbot-danger-soft-hover: rgba(253, 47, 59, 0.28);
  --openbot-danger-focus: rgba(253, 47, 59, 0.4);
  --openbot-danger-border: rgba(253, 47, 59, 0.5);
  --openbot-file-blue: #74b9ff;
  --openbot-file-blue-soft: rgba(116, 185, 255, 0.14);
  --openbot-file-yellow: #ff9412;
  --openbot-file-yellow-soft: rgba(255, 148, 18, 0.12);
  --openbot-file-orange: #f0a06a;
  --openbot-file-orange-soft: rgba(240, 160, 106, 0.14);
  --openbot-file-teal: #6bc7d9;
  --openbot-file-teal-soft: rgba(107, 199, 217, 0.14);
  --openbot-file-green: #31cf76;
  --openbot-file-green-soft: rgba(49, 207, 118, 0.12);
  --openbot-file-red: #fd2f3b;
  --openbot-file-red-soft: rgba(253, 47, 59, 0.16);
  --openbot-file-pink: #d98ac9;
  --openbot-file-pink-soft: rgba(217, 138, 201, 0.14);
  --openbot-file-default: #42a0ff;
  --openbot-file-default-soft: rgba(0, 124, 247, 0.14);
  --openbot-data-table-border: #303030;
  --openbot-data-table-header-text: #a1a1a1;
  --openbot-data-table-text: #f5f5f5;
  --openbot-data-table-outer-border: rgba(255, 255, 255, 0);
  --openbot-data-table-ring: rgba(255, 255, 255, 0.12);
  --openbot-shadow-popover-ambient: rgba(0, 0, 0, 0.1);
  --openbot-shadow-dialog: rgba(0, 0, 0, 0.48);
  --openbot-shadow-dynamic-island: rgba(0, 0, 0, 0.6);
  --openbot-shadow-ring: rgba(228, 228, 228, 0.04);
  --openbot-border-on-light: rgba(20, 20, 20, 0.14);
  --openbot-hover: rgba(255, 255, 255, 0.06);
  --openbot-font-sans: "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --openbot-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
  --openbot-text-sm: 12px;
  --openbot-text-md: 13px;
  --openbot-text-lg: 14px;
  --openbot-text-xl: 16px;
  --openbot-text-2xl: 18px;
  --openbot-text-3xl: 24px;
  --openbot-leading-sm: 16px;
  --openbot-leading-md: 18px;
  --openbot-leading-lg: 20px;
  --openbot-leading-xl: 22px;
  --openbot-leading-2xl: 24px;
  --openbot-leading-3xl: 30px;
  --openbot-text-display: 32px;
  --openbot-text-usage-total: clamp(2rem, 5cqi, 3.5rem);
  --openbot-leading-display: 38px;
  --openbot-text-hero: clamp(3rem, 8vw, 6.5rem);
  --openbot-glyph-xs: 7px;
  --openbot-glyph-sm: 8px;
  --openbot-weight-regular: 400;
  --openbot-weight-medium: 500;
  --openbot-weight-semibold: 600;
  --openbot-weight-bold: 700;
  --openbot-tracking-tight: -0.1px;
  --openbot-tracking-normal: 0;
  --openbot-tracking-wide: 0.02em;
  --openbot-space-0-5: 2px;
  --openbot-space-1: 4px;
  --openbot-space-1-5: 6px;
  --openbot-space-2: 8px;
  --openbot-space-3: 12px;
  --openbot-space-4: 16px;
  --openbot-space-6: 24px;
  --openbot-space-8: 32px;
  --openbot-scrollbar-size: 8px;
  --openbot-radius-xs: 4px;
  --openbot-radius-sm: 6px;
  --openbot-radius-md: 8px;
  --openbot-radius-lg: 12px;
  --openbot-radius-card: 14px;
  --openbot-radius-xl: 20px;
  --openbot-radius-bubble: 22px;
  --openbot-radius-bubble-inset: calc(var(--openbot-radius-bubble) - var(--openbot-space-3) - 1px);
  --openbot-radius-modal: 30px;
  --openbot-radius-media-preview: calc(var(--openbot-radius-lg) - 1px);
  --openbot-radius-pill: 999px;
  --openbot-radius-logo: 20%;
  --openbot-control-xs: 24px;
  --openbot-control-sm: 28px;
  --openbot-control-md: 32px;
  --openbot-control-lg: 36px;
  --openbot-control-xl: 40px;
  --openbot-switch-width: 36px;
  --openbot-switch-height: 20px;
  --openbot-switch-thumb: 16px;
  --openbot-switch-inset: 2px;
  --openbot-switch-sm-width: 24px;
  --openbot-switch-sm-height: 14px;
  --openbot-switch-sm-thumb: 12px;
  --openbot-switch-sm-inset: 1px;
  --openbot-icon-stroke: 1.5;
  --openbot-icon-xs: 12px;
  --openbot-icon-sm: 14px;
  --openbot-icon-md: 16px;
  --openbot-icon-lg: 20px;
  --openbot-chat-entry-gap: var(--openbot-space-3);
  --openbot-chat-marker-gap: var(--openbot-space-1);
  --openbot-chat-marker-height: var(--openbot-control-xs);
  --openbot-chat-marker-avatar: var(--openbot-icon-md);
  --openbot-chat-marker-width: 680px;
  --openbot-duration-fast: 120ms;
  --openbot-duration-hover: 0ms;
  --openbot-duration-dialog: 100ms;
  --openbot-duration-normal: 160ms;
  --openbot-duration-slow: 200ms;
  --openbot-duration-overlay: 240ms;
  --openbot-duration-toast-enter: 340ms;
  --openbot-duration-toast-exit: 220ms;
  --openbot-duration-island-content: 340ms;
  --openbot-duration-island-content-exit: 220ms;
  --openbot-agent-activity-exit-delay: 500ms;
  --openbot-loading-indicator-delay: 400ms;
  --openbot-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --openbot-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --openbot-shadow-raised: 0 12px 32px var(--openbot-shadow-popover-ambient);
  --openbot-shadow-card: 0 0 0 transparent;
  --openbot-shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.48);
  --openbot-focus-ring: 0 0 0 3px var(--openbot-accent-soft);
  --openbot-layer-dropdown: 40;
  --openbot-layer-popover: 60;
  --openbot-layer-dialog: 100;
  --openbot-layer-dialog-host: calc(var(--openbot-layer-dialog) + var(--openbot-layer-popover));
  --openbot-layer-toast: 120;
  --openbot-layer-tooltip: 240;
}
[data-provider] {
  --openbot-provider-current: currentcolor;
}
[data-provider="codex"] {
  --openbot-provider-current: var(--openbot-provider-codex);
}
[data-provider="claude"] {
  --openbot-provider-current: var(--openbot-provider-claude);
}
[data-provider="grok"] {
  --openbot-provider-current: var(--openbot-provider-grok);
}
[data-provider="opencode"] {
  --openbot-provider-current: var(--openbot-text-primary);
}
[data-provider="antigravity"] {
  --openbot-provider-current: var(--openbot-provider-antigravity);
}
[data-provider="cursor"] {
  --openbot-provider-current: var(--openbot-text-primary);
}
[data-provider="cline"] {
  --openbot-provider-current: var(--openbot-text-primary);
}
[data-provider="acp"] {
  --openbot-provider-current: var(--openbot-text-primary);
}
.app-logo {
  --app-logo-background: var(--openbot-logo-production);
  --app-logo-eye: var(--openbot-logo-production-eye);
  position: relative;
  display: inline-block;
  overflow: hidden;
  border-radius: var(--openbot-radius-logo);
  isolation: isolate;
}
.app-logo[data-interactive="true"]:focus {
  outline: none;
}
.app-logo[data-interactive="true"]:focus-visible {
  box-shadow: inset 0 0 0 2px var(--openbot-text-primary);
}
.app-logo[data-variant="dev"] {
  --app-logo-background: var(--openbot-logo-dev);
  --app-logo-eye: var(--openbot-logo-eye);
}
.app-logo[data-variant="preview"] {
  --app-logo-background: var(--openbot-logo-preview);
  --app-logo-eye: var(--openbot-logo-eye);
}
.app-logo-background {
  fill: var(--app-logo-background);
}
.app-logo-eye {
  fill: none;
  stroke: var(--app-logo-eye);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 9.5px;
  pointer-events: none;
  transform-box: view-box;
}
.app-logo-eye-motion {
  pointer-events: none;
  transform: translate(var(--app-logo-eye-x, 0%), var(--app-logo-eye-y, 0%)) scaleY(var(--app-logo-eye-squint, 1));
  transform-origin: center;
  transition: transform var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1);
}
.app-logo-eye-left {
  transform-origin: 28.7% 48.7%;
}
.app-logo-eye-right {
  transform-origin: 71.2% 48.8%;
}
.app-logo[data-animation="blink"] .app-logo-eye {
  animation: app-logo-blink 4.8s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
.app-logo[data-animation="look-around"] .app-logo-eye {
  animation: app-logo-look-around 6s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
.app-logo[data-animation="surprised"] .app-logo-eye {
  animation: app-logo-surprised 5.4s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
.app-logo[data-click-reaction="wink"] .app-logo-eye-left {
  animation: app-logo-wink-left 360ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.app-logo[data-click-reaction="wink"] .app-logo-eye-right {
  animation: app-logo-wink-right 360ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.app-logo[data-easter-egg="party"] .app-logo-background {
  animation: app-logo-party-colors 1.2s cubic-bezier(0.77, 0, 0.175, 1) both;
}
.app-logo[data-easter-egg="party"] .app-logo-eye-left {
  animation: app-logo-party-left 1.2s cubic-bezier(0.77, 0, 0.175, 1) both;
}
.app-logo[data-easter-egg="party"] .app-logo-eye-right {
  animation: app-logo-party-right 1.2s cubic-bezier(0.77, 0, 0.175, 1) both;
}
@keyframes app-logo-blink {
  0%, 44%, 48%, 100% {
    transform: scaleY(1);
  }
  46% {
    transform: scaleY(0.08);
  }
}
@keyframes app-logo-look-around {
  0%, 30%, 47%, 64%, 100% {
    transform: translateX(0);
  }
  35%, 42% {
    transform: translateX(-3.5%);
  }
  52%, 59% {
    transform: translateX(3.5%);
  }
}
@keyframes app-logo-surprised {
  0%, 40%, 56%, 100% {
    transform: translateY(0) scale(1);
  }
  44%, 51% {
    transform: translateY(-1.5%) scaleX(0.94) scaleY(1.12);
  }
}
@keyframes app-logo-wink-left {
  0%, 100% {
    transform: scaleY(1);
  }
  38%, 58% {
    transform: scaleY(0.08);
  }
}
@keyframes app-logo-wink-right {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  48% {
    transform: translateY(-1%) scaleX(0.96) scaleY(1.08);
  }
}
@keyframes app-logo-party-colors {
  0%, 100% {
    fill: var(--app-logo-background);
  }
  22% {
    fill: var(--openbot-logo-dev);
  }
  48% {
    fill: var(--openbot-logo-preview);
  }
  74% {
    fill: var(--openbot-logo-production);
  }
}
@keyframes app-logo-party-left {
  0%, 100% {
    transform: translate(0) rotate(0);
  }
  25% {
    transform: translateY(-6%) rotate(-8deg);
  }
  50% {
    transform: translate(4%, 2%) rotate(8deg);
  }
  75% {
    transform: translate(-4%, -2%) rotate(-4deg);
  }
}
@keyframes app-logo-party-right {
  0%, 100% {
    transform: translate(0) rotate(0);
  }
  25% {
    transform: translateY(6%) rotate(8deg);
  }
  50% {
    transform: translate(-4%, -2%) rotate(-8deg);
  }
  75% {
    transform: translate(4%, 2%) rotate(4deg);
  }
}
@media (hover: hover) and (pointer: fine) {
  .app-logo[data-interactive="true"] {
    cursor: pointer;
  }
}
@media (prefers-reduced-motion: reduce) {
  .app-logo[data-animation] .app-logo-eye, .app-logo[data-click-reaction] .app-logo-eye, .app-logo[data-easter-egg] .app-logo-eye, .app-logo[data-easter-egg] .app-logo-background {
    animation: none;
    transform: none;
  }
  .app-logo-eye-motion {
    transition: none;
    transform: none;
  }
}
:where(.ui-text, .ui-heading) {
  margin: 0;
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
}
.ui-server-gradient-logo {
  width: var(--server-gradient-logo-size, 40px);
  height: var(--server-gradient-logo-size, 40px);
  display: block;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: var(--server-gradient-logo-radius, var(--openbot-radius-lg));
  background-color: var(--server-gradient-base);
  background-image: var(--server-gradient-layers);
  background-repeat: no-repeat;
  outline: 1px solid var(--openbot-image-outline);
  outline-offset: -1px;
}
:where(.ui-text)[data-tone="secondary"], :where(.ui-heading)[data-tone="secondary"] {
  color: var(--openbot-text-secondary);
}
:where(.ui-text)[data-tone="muted"], :where(.ui-heading)[data-tone="muted"] {
  color: var(--openbot-text-muted);
}
:where(.ui-text, .ui-heading)[data-tone="danger"] {
  color: var(--openbot-danger);
}
:where(.ui-text, .ui-heading)[data-tone="success"] {
  color: var(--openbot-success);
}
:where(.ui-text, .ui-heading)[data-tone="warning"] {
  color: var(--openbot-warning);
}
:where(.ui-text)[data-variant="caption"] {
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-sm);
}
:where(.ui-text)[data-variant="label-sm"] {
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
}
:where(.ui-text)[data-variant="label"] {
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
}
:where(.ui-text)[data-variant="body-sm"] {
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-md);
}
:where(.ui-text)[data-variant="body"] {
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-lg);
}
:where(.ui-heading)[data-size="sm"] {
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
:where(.ui-heading)[data-size="md"] {
  font-size: var(--openbot-text-xl);
  line-height: var(--openbot-leading-xl);
}
:where(.ui-heading)[data-size="lg"] {
  font-size: var(--openbot-text-2xl);
  line-height: var(--openbot-leading-2xl);
}
:where(.ui-heading) {
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: var(--openbot-tracking-tight);
}
.ui-text-truncate {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:where(.ui-button) {
  min-width: 0;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-1-5);
  border: 1px solid transparent;
  border-radius: var(--openbot-radius-md);
  padding: 0 var(--openbot-space-4);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: 1;
  text-decoration: none;
  user-select: none;
  white-space: nowrap;
  transition: background-color var(--openbot-duration-hover) ease, border-color var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease, box-shadow var(--openbot-duration-hover) ease, opacity var(--openbot-duration-hover) ease;
}
.ui-button {
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-medium);
}
:where(.ui-button-size-xs) {
  height: var(--openbot-control-xs);
  padding-inline: var(--openbot-space-2);
  font-size: var(--openbot-text-sm);
}
:where(.ui-button-size-sm) {
  height: var(--openbot-control-md);
  padding-inline: var(--openbot-space-3);
  font-size: var(--openbot-text-sm);
}
:where(.ui-button-size-default) {
  height: var(--openbot-control-lg);
}
:where(.ui-button-size-lg) {
  height: var(--openbot-control-xl);
  padding-inline: var(--openbot-space-6);
}
:where(.ui-button-variant-default) {
  background: var(--openbot-surface-light);
  color: var(--openbot-text-on-light);
}
:where(.ui-button-variant-outline) {
  border-color: var(--openbot-border);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-secondary);
}
:where(.ui-button-variant-secondary) {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}
:where(.ui-button-variant-ghost) {
  background: transparent;
  color: var(--openbot-text-muted);
}
:where(.ui-button-variant-destructive) {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
}
:where(.ui-button-variant-destructive-ghost) {
  background: transparent;
  color: var(--openbot-text-muted);
}
:where(.ui-button-variant-link) {
  height: auto;
  border-radius: var(--openbot-radius-xs);
  background: transparent;
  padding: 0;
  color: var(--openbot-text-primary);
  text-underline-offset: 4px;
}
@media (hover: hover) and (pointer: fine) and (min-width: 601px) {
  :where(.ui-button-variant-default):hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-surface-light);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--openbot-surface-light) 82%, transparent);
    }
  }
  :where(.ui-button-variant-outline):hover:not(:disabled):not([data-disabled]), :where(.ui-button-variant-ghost):hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-bg-control-hover);
    color: var(--openbot-text-primary);
  }
  :where(.ui-button-variant-secondary):hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-bg-control-active);
  }
  :where(.ui-button-variant-destructive):hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-danger-soft-hover);
    color: var(--openbot-danger);
  }
  :where(.ui-button-variant-destructive-ghost):hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-danger-soft);
    color: var(--openbot-danger);
  }
  :where(.ui-button-variant-link):hover:not(:disabled):not([data-disabled]) {
    text-decoration: underline;
  }
}
:where(.ui-button-variant-outline, .ui-button-variant-secondary, .ui-button-variant-ghost)[aria-expanded="true"] {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}
:where(.ui-button):focus-visible {
  outline: 0;
  box-shadow: var(--openbot-focus-ring);
}
:where(.ui-button-variant-destructive):focus-visible {
  border-color: var(--openbot-danger-focus);
}
:where(.ui-button-variant-destructive, .ui-button-variant-destructive-ghost):focus-visible {
  box-shadow: 0 0 0 3px var(--openbot-danger-focus);
}
:where(.ui-button)[aria-invalid="true"] {
  border-color: var(--openbot-danger-border);
  box-shadow: 0 0 0 3px var(--openbot-danger-focus);
}
:where(.ui-button):disabled, :where(.ui-button)[data-disabled] {
  cursor: default;
  opacity: 0.42;
  pointer-events: none;
}
.ui-button-full {
  width: 100%;
}
:where(.ui-icon-button) {
  padding: 0;
}
:where(.ui-button-size-icon-xs) {
  width: var(--openbot-control-xs);
  height: var(--openbot-control-xs);
  padding: 0;
}
:where(.ui-button-size-icon-sm) {
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  padding: 0;
}
:where(.ui-button-size-icon) {
  width: var(--openbot-control-lg);
  height: var(--openbot-control-lg);
  padding: 0;
}
:where(.ui-button-size-icon-lg) {
  width: var(--openbot-control-xl);
  height: var(--openbot-control-xl);
  padding: 0;
}
:where(.ui-icon-button) svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
:where(.ui-button-size-icon-xs) svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.ui-removable-image {
  position: relative;
}
.ui-image-remove-button {
  position: absolute;
  z-index: 1;
  top: -8px;
  right: -8px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface-raised);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-bg-surface-raised) 72%, transparent);
  }
  backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  opacity: 0;
  scale: 0.9;
  transition: opacity var(--openbot-duration-hover) ease, scale var(--openbot-duration-hover) ease, background-color var(--openbot-duration-hover) ease;
}
.ui-removable-image:hover > .ui-image-remove-button, .ui-removable-image:focus-within > .ui-image-remove-button {
  opacity: 1;
  scale: 1;
}
@media (hover: none) {
  .ui-image-remove-button {
    opacity: 1;
    scale: 1;
  }
}
:where(.z-badge) {
  width: fit-content;
  height: 22px;
  min-width: 0;
  display: inline-flex;
  overflow: hidden;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-1);
  border: 1px solid transparent;
  border-radius: var(--openbot-radius-pill);
  padding: var(--openbot-space-0-5) var(--openbot-space-2);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
  transition: border-color var(--openbot-duration-fast) var(--openbot-ease-out), background-color var(--openbot-duration-fast) var(--openbot-ease-out), color var(--openbot-duration-fast) var(--openbot-ease-out);
  white-space: nowrap;
}
:where(.z-badge) > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
:where(.z-badge) > svg {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  pointer-events: none;
}
:where(.z-badge):has(> [data-icon="inline-start"]) {
  padding-left: var(--openbot-space-1-5);
}
:where(.z-badge):has(> [data-icon="inline-end"]) {
  padding-right: var(--openbot-space-1-5);
}
:where(.z-badge-variant-default) {
  background: var(--openbot-accent);
  color: var(--openbot-text-primary);
}
:where(.z-badge-variant-secondary) {
  background: var(--openbot-bg-control);
  color: var(--openbot-text-secondary);
}
:where(.z-badge-variant-outline) {
  border-color: var(--openbot-border-strong);
  background: transparent;
  color: var(--openbot-text-secondary);
}
:where(.z-badge-variant-ghost) {
  background: transparent;
  color: var(--openbot-text-secondary);
}
:where(.z-badge-variant-link) {
  background: transparent;
  color: var(--openbot-accent-text);
  text-decoration: underline;
  text-underline-offset: 4px;
}
:where(.z-badge-variant-primary-light) {
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
}
:where(.z-badge-variant-success-light) {
  background: var(--openbot-success-soft);
  color: var(--openbot-success);
}
:where(.z-badge-variant-warning-light) {
  background: var(--openbot-warning-soft);
  color: var(--openbot-warning);
}
:where(.z-badge-variant-destructive), :where(.z-badge-variant-destructive-light) {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
}
:where(.z-badge-variant-new) {
  background: var(--openbot-badge-new-soft);
  color: var(--openbot-badge-new);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: 0.01em;
}
:where(.z-badge-variant-info-light) {
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
}
:where(.z-badge-variant-primary-outline) {
  border-color: var(--openbot-border-strong);
  background: transparent;
  color: var(--openbot-accent-text);
}
:where(.z-badge-variant-success-outline) {
  border-color: var(--openbot-border-strong);
  background: transparent;
  color: var(--openbot-success);
}
:where(.z-badge-variant-warning-outline) {
  border-color: var(--openbot-border-strong);
  background: transparent;
  color: var(--openbot-warning);
}
:where(.z-badge-variant-destructive-outline) {
  border-color: var(--openbot-border-strong);
  background: transparent;
  color: var(--openbot-danger);
}
:where(.z-badge-variant-info-outline) {
  border-color: var(--openbot-border-strong);
  background: transparent;
  color: var(--openbot-accent-text);
}
:where(.ui-glyph-20) {
  stroke-width: calc(var(--openbot-icon-stroke) * 20 / 24);
}
:where(.ui-glyph-16) {
  stroke-width: calc(var(--openbot-icon-stroke) * 16 / 24);
}
:where(.ui-checkbox) {
  position: relative;
  display: inline-flex;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
}
.ui-checkbox-input {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
}
.ui-checkbox-visual {
  display: inline-flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-bg-control);
  color: transparent;
}
.ui-checkbox-input:checked + .ui-checkbox-visual {
  border-color: var(--openbot-accent);
  background: var(--openbot-accent);
  color: var(--openbot-text-primary);
}
.ui-checkbox-input:focus-visible + .ui-checkbox-visual {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}
.ui-checkbox-visual svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  stroke-width: 2.5;
}
:where(.ui-input, .ui-textarea, .ui-native-select) {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  outline: 0;
  background: var(--openbot-bg-control);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  transition: background-color var(--openbot-duration-hover) ease, border-color var(--openbot-duration-hover) ease, box-shadow var(--openbot-duration-hover) ease;
}
:where(.ui-input, .ui-native-select)[data-size="sm"] {
  height: var(--openbot-control-sm);
  padding-inline: var(--openbot-space-2);
}
:where(.ui-input, .ui-native-select)[data-size="md"] {
  height: var(--openbot-control-md);
  padding-inline: var(--openbot-space-3);
}
:where(.ui-input, .ui-native-select)[data-size="lg"] {
  height: var(--openbot-control-lg);
  padding-inline: var(--openbot-space-3);
}
:where(.ui-textarea) {
  min-height: 76px;
  resize: vertical;
  padding: var(--openbot-space-2) var(--openbot-space-3);
}
:where(.ui-textarea)::-webkit-resizer {
  background-color: var(--openbot-bg-control);
  background-image: linear-gradient( 135deg, transparent 46%, var(--openbot-text-muted) 46% 50%, transparent 50% 62%, var(--openbot-text-muted) 62% 66%, transparent 66% );
  background-repeat: no-repeat;
  background-position: 100% 100%;
  background-size: 50% 50%;
}
:where(.ui-input, .ui-textarea)::placeholder {
  color: var(--openbot-text-placeholder);
}
:where(.ui-input, .ui-textarea, .ui-native-select):focus-visible {
  border-color: var(--openbot-border-focus);
  box-shadow: var(--openbot-focus-ring);
}
:where(.ui-input, .ui-textarea, .ui-native-select)[aria-invalid="true"] {
  border-color: var(--openbot-danger);
}
:where(.ui-input, .ui-textarea, .ui-native-select):disabled {
  cursor: not-allowed;
  opacity: 0.42;
}
.ui-select {
  width: 100%;
  min-width: 0;
}
.ui-select-trigger {
  width: 100%;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-1-5);
  cursor: pointer;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  outline: 0;
  background: transparent;
  padding: var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-2) 10px;
  box-shadow: 0 1px 2px var(--openbot-shadow-popover-ambient);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  text-align: left;
  transition: background-color var(--openbot-duration-hover) ease, border-color var(--openbot-duration-hover) ease, box-shadow var(--openbot-duration-hover) ease;
}
.ui-select-trigger[data-size="sm"] {
  height: var(--openbot-control-md);
  font-size: var(--openbot-text-sm);
}
.ui-select-trigger[data-size="md"] {
  height: var(--openbot-control-lg);
}
.ui-select-trigger[data-expanded] {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-hover);
}
.ui-select .ui-select-trigger:focus-visible {
  border-color: var(--openbot-border-strong);
  outline: 0;
  box-shadow: 0 0 0 3px var(--openbot-hover);
}
.ui-select-trigger[data-disabled] {
  cursor: not-allowed;
  opacity: 0.42;
}
.ui-select-trigger[aria-invalid="true"] {
  border-color: var(--openbot-danger);
  box-shadow: 0 0 0 3px var(--openbot-danger-soft);
}
@media (hover: hover) and (pointer: fine) {
  .ui-select-trigger:hover:not([data-disabled]) {
    background: var(--openbot-hover);
  }
}
.ui-select-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-select-trigger-icon {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: var(--openbot-text-muted);
}
.ui-select-trigger-icon svg {
  width: 100%;
  height: 100%;
}
.ui-select-content {
  z-index: var(--openbot-layer-popover);
  max-height: 320px;
  min-width: 144px;
  overflow: hidden auto;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface-raised);
  box-shadow: 0 4px 6px -1px var(--openbot-shadow-popover-ambient), 0 2px 4px -2px var(--openbot-shadow-popover-ambient), 0 0 0 1px var(--openbot-border-strong);
  color: var(--openbot-text-primary);
  transform-origin: var(--kb-select-content-transform-origin);
  animation: ui-select-content-in var(--openbot-duration-dialog) var(--openbot-ease-out) both;
}
.ui-select-listbox {
  margin: 0;
  padding: var(--openbot-space-1);
  outline: 0;
}
.ui-select-item {
  position: relative;
  display: flex;
  align-items: center;
  cursor: default;
  user-select: none;
  border-radius: var(--openbot-radius-sm);
  outline: 0;
  padding: var(--openbot-space-1-5) var(--openbot-space-8) var(--openbot-space-1-5) var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  transition: background-color var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease;
}
.ui-select-item[data-highlighted] {
  background: var(--openbot-hover);
  color: var(--openbot-text-primary);
}
.ui-select-item[data-selected] {
  background: transparent;
  color: var(--openbot-text-primary);
}
.ui-select-item[data-selected][data-highlighted] {
  background: var(--openbot-hover);
}
.ui-select-item[data-disabled] {
  pointer-events: none;
  opacity: 0.42;
}
.ui-select-item-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-select-item-indicator {
  position: absolute;
  right: var(--openbot-space-2);
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
}
.ui-select-item-indicator svg {
  width: 100%;
  height: 100%;
}
@keyframes ui-select-content-in {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ui-select-content {
    animation-name: ui-select-content-fade-in;
  }
}
@keyframes ui-select-content-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.ui-field {
  display: grid;
  gap: var(--openbot-space-1-5);
}
.ui-label {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
}
.ui-field-required, .ui-field-error {
  color: var(--openbot-danger);
}
.ui-field-required {
  margin-left: var(--openbot-space-0-5);
}
.ui-field-description, .ui-field-error {
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.ui-field-description {
  color: var(--openbot-text-muted);
}
.ui-switch {
  --ui-switch-thumb-size: var(--openbot-switch-thumb);
  --ui-switch-inset: var(--openbot-switch-inset);
  --ui-switch-travel: calc(var(--openbot-switch-width) - var(--ui-switch-thumb-size) - (var(--ui-switch-inset) * 2));
  position: relative;
  z-index: 0;
  width: var(--openbot-switch-width);
  height: var(--openbot-switch-height);
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  outline: none;
  background: var(--openbot-bg-control);
  box-shadow: inset 0 0 0 1px var(--openbot-border-strong), 0 1px 2px var(--openbot-shadow-ring);
  transition: background-color var(--openbot-duration-hover) ease, box-shadow var(--openbot-duration-hover) ease, opacity var(--openbot-duration-hover) ease;
}
.ui-switch[data-size="sm"] {
  --ui-switch-thumb-size: var(--openbot-switch-sm-thumb);
  --ui-switch-inset: var(--openbot-switch-sm-inset);
  --ui-switch-travel: calc(var(--openbot-switch-sm-width) - var(--ui-switch-thumb-size) - (var(--ui-switch-inset) * 2));
  width: var(--openbot-switch-sm-width);
  height: var(--openbot-switch-sm-height);
}
.ui-switch[data-checked] {
  background: var(--openbot-surface-light);
}
.ui-switch[data-invalid] {
  box-shadow: 0 0 0 3px var(--openbot-danger-focus);
}
.ui-switch:not([data-pointer-focus]):has(.ui-switch-input:focus-visible) {
  box-shadow: var(--openbot-focus-ring);
}
.ui-switch[data-invalid]:not([data-pointer-focus]):has(.ui-switch-input:focus-visible) {
  box-shadow: 0 0 0 3px var(--openbot-danger-focus);
}
.ui-switch-field {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
}
.ui-switch-copy {
  min-width: 0;
  display: grid;
  gap: var(--openbot-space-0-5);
}
.ui-switch-label {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
  cursor: pointer;
}
.ui-switch-description {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.ui-switch-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.ui-switch-control {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: inherit;
  cursor: pointer;
}
.ui-switch-control[data-dragging] {
  cursor: grabbing;
}
.ui-switch-thumb {
  position: absolute;
  top: 50%;
  left: 0;
  width: var(--ui-switch-thumb-size);
  height: var(--ui-switch-thumb-size);
  display: block;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-primary);
  box-shadow: 0 1px 2px var(--openbot-shadow-ring);
  transform: translate3d( calc(var(--ui-switch-inset) + (var(--ui-switch-position, 0) * var(--ui-switch-travel))), -50%, 0 ) scale(var(--ui-switch-scale-x, 1), var(--ui-switch-scale-y, 1));
  transform-origin: center;
  will-change: transform;
  transition: background-color var(--openbot-duration-fast) var(--openbot-ease-out);
}
.ui-switch-thumb[data-checked] {
  background: var(--openbot-text-on-light);
}
.ui-slider-field {
  width: 100%;
  display: grid;
  gap: var(--openbot-space-1-5);
}
.ui-slider-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--openbot-space-3);
}
.ui-slider-label {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
}
.ui-slider-value {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  line-height: var(--openbot-leading-sm);
}
.ui-slider-description {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.ui-slider-track {
  position: relative;
  height: 4px;
  margin-block: var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-border-strong);
  cursor: pointer;
}
.ui-slider-track::before {
  content: "";
  position: absolute;
  inset: -10px 0;
}
.ui-slider-fill {
  position: absolute;
  height: 100%;
  border-radius: inherit;
  background: var(--openbot-text-secondary);
}
.ui-slider-thumb {
  top: calc(50% - (var(--openbot-switch-thumb) / 2));
  width: var(--openbot-switch-thumb);
  height: var(--openbot-switch-thumb);
  display: block;
  border-radius: var(--openbot-radius-pill);
  outline: none;
  background: var(--openbot-text-primary);
  box-shadow: 0 1px 2px var(--openbot-shadow-ring);
  cursor: grab;
}
.ui-slider-thumb:focus-visible {
  box-shadow: var(--openbot-focus-ring);
}
.ui-slider-thumb[data-dragging] {
  cursor: grabbing;
}
.ui-seek-slider {
  display: flex;
  touch-action: none;
}
.ui-seek-slider-track {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.ui-seek-slider-picture {
  display: flex;
}
.ui-seek-slider[data-disabled] .ui-seek-slider-track {
  cursor: default;
}
.ui-seek-slider-thumb {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  display: block;
  border-radius: var(--openbot-radius-pill);
  outline: none;
  background: var(--openbot-text-primary);
  opacity: 0;
}
.ui-seek-slider-track:hover .ui-seek-slider-thumb, .ui-seek-slider-thumb:focus-visible, .ui-seek-slider-thumb[data-dragging] {
  opacity: 1;
}
.ui-seek-slider-thumb:focus-visible {
  box-shadow: var(--openbot-focus-ring);
}
.ui-slider-field[data-disabled] {
  opacity: 0.5;
}
.ui-slider-field[data-disabled] .ui-slider-track, .ui-slider-field[data-disabled] .ui-slider-thumb {
  cursor: not-allowed;
}
.ui-switch[data-disabled] {
  opacity: 0.5;
}
.ui-switch[data-disabled] .ui-switch-control {
  cursor: not-allowed;
}
.ui-card {
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-surface);
}
.ui-item-group {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-surface);
}
.ui-item-group[data-surface="subtle"] {
  background: var(--openbot-bg-control);
}
.ui-item-group > :not(:first-child) {
  border-top: 1px solid var(--openbot-border);
}
.ui-item {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  padding-inline: var(--openbot-space-4);
}
.ui-item[data-size="compact"] {
  min-height: 52px;
  padding-block: var(--openbot-space-2);
}
.ui-item[data-size="default"] {
  min-height: 64px;
  padding-block: var(--openbot-space-3);
}
.ui-item[data-size="spacious"] {
  min-height: 72px;
  padding-block: var(--openbot-space-4);
}
.ui-item-media, .ui-item-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}
.ui-item-media {
  color: var(--openbot-text-muted);
}
.ui-item-content {
  min-width: 0;
  display: grid;
  flex: 1 1 auto;
  gap: var(--openbot-space-0-5);
}
.ui-item-title {
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-item-description {
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-item-actions {
  justify-content: flex-end;
  gap: var(--openbot-space-2);
}
.ui-item.ui-dynamic-island-identity {
  min-width: 0;
  width: 100%;
  min-height: 43px;
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: 0;
}
.dynamic-island-external .ui-dynamic-island-identity {
  grid-template-columns: 38px minmax(0, 1fr) auto;
}
.ui-dynamic-island-identity-avatar {
  width: 35px;
  height: 35px;
}
.dynamic-island-external .ui-dynamic-island-identity-avatar {
  width: 38px;
  height: 38px;
}
.ui-dynamic-island-identity-copy {
  gap: 2px;
}
.ui-dynamic-island-identity-title {
  display: flex;
  align-items: baseline;
  gap: var(--openbot-space-1);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-sm);
}
.ui-dynamic-island-identity-name {
  min-width: 0;
  max-width: 26ch;
  overflow: hidden;
  flex: 0 1 auto;
  color: var(--openbot-island-identity-name);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-dynamic-island-identity-status {
  flex: 0 0 auto;
  color: var(--openbot-text-secondary);
}
.ui-dynamic-island-identity-description {
  display: -webkit-box;
  overflow: hidden;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-sm);
  overflow-wrap: anywhere;
  text-wrap: pretty;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.ui-dynamic-island-identity-trailing {
  align-self: start;
  padding-top: 2px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  line-height: var(--openbot-leading-sm);
  white-space: nowrap;
}
.ui-questionnaire {
  min-width: 0;
  display: grid;
  gap: var(--openbot-space-3);
}
.ui-questionnaire-progress {
  color: var(--openbot-text-muted);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  line-height: var(--openbot-leading-sm);
}
.ui-questionnaire-item {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}
.ui-questionnaire-title {
  width: 100%;
  padding: 0;
  color: var(--openbot-text-primary);
}
.ui-questionnaire-description {
  margin: 0;
  color: var(--openbot-text-muted);
}
.ui-questionnaire-choices {
  min-width: 0;
  display: grid;
}
.ui-questionnaire-choice {
  position: relative;
  min-width: 0;
  display: block;
  cursor: pointer;
  outline: 0;
}
.ui-questionnaire-choice[data-disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}
.ui-questionnaire-choice-input {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: inherit;
  opacity: 0;
}
.ui-questionnaire-choice:focus-within {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: -2px;
}
.ui-questionnaire-error {
  margin: 0;
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.ui-questionnaire-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.ui-settings-section {
  display: grid;
  gap: var(--openbot-space-2);
}
.ui-settings-section-header {
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  padding-inline: var(--openbot-space-1);
}
.ui-settings-section-copy {
  min-width: 0;
  display: grid;
  gap: var(--openbot-space-1);
}
.ui-settings-section-heading {
  font-weight: var(--openbot-weight-regular);
}
.ui-settings-section-description {
  display: block;
}
.ui-settings-section-actions {
  min-width: 0;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--openbot-space-2);
}
.ui-qr-code {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-qr-background);
}
.ui-qr-code > * {
  grid-area: 1 / 1;
}
.ui-qr-code > img {
  width: 100%;
  height: 100%;
  display: block;
}
.ui-qr-code-mark {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  color: var(--openbot-text-on-light);
  visibility: hidden;
}
.ui-qr-code-mark[data-ready] {
  visibility: visible;
}
.ui-alert {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-3);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  padding: var(--openbot-space-3) var(--openbot-space-4);
  color: var(--openbot-text-muted);
}
.ui-alert[data-tone="success"] {
  border-color: var(--openbot-success-soft);
  background: var(--openbot-success-wash);
  color: var(--openbot-success);
}
.ui-alert[data-tone="warning"] {
  border-color: var(--openbot-warning-soft);
  background: var(--openbot-warning-soft);
  color: var(--openbot-warning);
}
.ui-alert[data-tone="danger"] {
  border-color: var(--openbot-danger-soft);
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
}
.ui-alert-icon {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}
.ui-alert-icon svg {
  width: 100%;
  height: 100%;
}
.ui-alert-content {
  min-width: 0;
  display: grid;
  gap: var(--openbot-space-0-5);
}
.ui-alert-title {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
}
.ui-alert-description {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.ui-alert[data-tone] .ui-alert-description {
  color: var(--openbot-text-secondary);
}
.ui-alert-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
}
.ui-progress {
  width: 100%;
}
.ui-progress-track {
  width: 100%;
  height: 3px;
  overflow: hidden;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-border-strong);
}
.ui-progress-fill {
  width: var(--kb-progress-fill-width, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--openbot-text-secondary);
  transition: width var(--openbot-duration-normal) var(--openbot-ease-out);
}
.ui-progress-fill[data-indeterminate] {
  width: 35%;
  animation: ui-progress-travel 1.4s var(--openbot-ease-in-out) infinite;
  transition: none;
}
@keyframes ui-progress-travel {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(286%);
  }
}
.ui-radial-progress {
  --ui-radial-progress-color: var(--openbot-accent);
  position: relative;
  display: grid;
  width: 104px;
  aspect-ratio: 1;
  place-items: center;
  color: var(--ui-radial-progress-color);
}
.ui-radial-progress[data-tone="warning"] {
  --ui-radial-progress-color: var(--openbot-warning);
}
.ui-radial-progress[data-tone="danger"] {
  --ui-radial-progress-color: var(--openbot-danger);
}
.ui-radial-progress-chart {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ui-radial-progress-track, .ui-radial-progress-indicator {
  fill: none;
}
.ui-radial-progress-track {
  stroke: var(--openbot-border-strong);
}
.ui-radial-progress-indicator {
  stroke: currentcolor;
  stroke-linecap: butt;
  transition: stroke-dasharray var(--openbot-duration-normal) var(--openbot-ease-out), stroke-dashoffset var(--openbot-duration-normal) var(--openbot-ease-out);
}
.ui-radial-progress-indicator[data-linecap="round"] {
  stroke-linecap: round;
}
.ui-radial-progress-content {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  color: var(--openbot-text-primary);
}
.ui-toaster[data-sonner-toaster][data-sonner-theme="dark"] {
  z-index: var(--openbot-layer-toast);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
  --normal-bg: var(--openbot-bg-surface-raised);
  --normal-bg-hover: var(--openbot-bg-control-hover);
  --normal-border: var(--openbot-border);
  --normal-border-hover: var(--openbot-border-focus);
  --normal-text: var(--openbot-text-primary);
  --border-radius: var(--openbot-radius-lg);
}
.ui-toaster [data-sonner-toast][data-styled="true"] {
  --ui-toast-tone: transparent;
  --ui-toast-motion-duration: var(--openbot-duration-toast-enter);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 0;
  row-gap: var(--openbot-space-2);
  min-height: var(--openbot-control-xl);
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border-color: transparent;
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface-raised);
  box-shadow: 0 0 0 1px var(--openbot-border), var(--openbot-shadow-raised);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  transition: transform var(--ui-toast-motion-duration) var(--openbot-ease-out), opacity var(--ui-toast-motion-duration) var(--openbot-ease-out), height var(--ui-toast-motion-duration) var(--openbot-ease-out), box-shadow var(--openbot-duration-normal) ease;
}
.ui-toaster [data-sonner-toast][data-styled="true"][data-removed="true"] {
  --ui-toast-motion-duration: var(--openbot-duration-toast-exit);
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-content] {
  grid-area: 1 / 2 / 2 / -1;
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-button] {
  grid-row: 2;
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-cancel] {
  grid-column: 2;
  justify-self: end;
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-action] {
  grid-column: 3;
}
.ui-toaster.ui-toaster-closeable [data-sonner-toast][data-styled="true"] [data-content], .ui-toaster [data-sonner-toast][data-styled="true"]:has([data-close-button]) [data-content] {
  padding-right: var(--openbot-space-6);
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-title] {
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-description] {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-wrap: pretty;
}
.ui-error-reference {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
  margin-top: var(--openbot-space-0-5);
  color: var(--openbot-text-muted);
}
.ui-error-reference-code {
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-xs);
  line-height: var(--openbot-leading-sm);
  user-select: text;
  overflow-wrap: anywhere;
}
.ui-toaster [data-sonner-toast][data-type="success"] {
  --ui-toast-tone: var(--openbot-success);
}
.ui-toaster [data-sonner-toast][data-type="info"] {
  --ui-toast-tone: var(--openbot-accent-text);
}
.ui-toaster [data-sonner-toast][data-type="warning"] {
  --ui-toast-tone: var(--openbot-warning);
}
.ui-toaster [data-sonner-toast][data-type="error"] {
  --ui-toast-tone: var(--openbot-danger);
}
.ui-toaster [data-sonner-toast][data-type="loading"] {
  --ui-toast-tone: var(--openbot-text-muted);
}
.ui-toaster [data-sonner-toast][data-type="success"] [data-icon], .ui-toaster [data-sonner-toast][data-type="info"] [data-icon], .ui-toaster [data-sonner-toast][data-type="warning"] [data-icon], .ui-toaster [data-sonner-toast][data-type="error"] [data-icon], .ui-toaster [data-sonner-toast][data-type="loading"] [data-icon] {
  color: var(--ui-toast-tone);
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-icon] {
  grid-area: 1 / 1;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  margin: 1px var(--openbot-space-3) 0 0;
}
.ui-toast-icon {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: var(--openbot-icon-stroke);
}
.ui-toast-loading-icon {
  animation: ui-spin 720ms linear infinite;
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-button] {
  height: var(--openbot-control-md);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control-hover);
  box-shadow: inset 0 0 0 1px var(--openbot-border);
  padding-inline: var(--openbot-space-3);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  transition: background-color var(--openbot-duration-normal) ease, color var(--openbot-duration-normal) ease, transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-cancel] {
  background: transparent;
  color: var(--openbot-text-secondary);
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-button]:focus-visible, .ui-toaster [data-sonner-toast]:focus-visible {
  outline: 0;
  box-shadow: var(--openbot-focus-ring);
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-close-button]:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 1px var(--openbot-border-strong), 0 0 0 2px var(--openbot-border-strong);
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-close-button] {
  top: var(--openbot-space-1);
  right: var(--openbot-space-1);
  left: auto;
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  color: var(--openbot-text-muted);
  pointer-events: auto;
  opacity: 1;
  transform: scale(1);
  transition: background-color var(--openbot-duration-normal) ease, box-shadow var(--openbot-duration-normal) ease, color var(--openbot-duration-normal) ease, opacity var(--openbot-duration-normal) ease, transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-close-button]::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--openbot-control-xl);
  height: var(--openbot-control-xl);
  content: "";
  transform: translate(-50%, -50%);
}
@media (hover: hover) and (pointer: fine) {
  .ui-toaster [data-sonner-toast][data-styled="true"] [data-close-button] {
    pointer-events: none;
    opacity: 0;
  }
  .ui-toaster [data-sonner-toast][data-styled="true"]:hover [data-close-button], .ui-toaster [data-sonner-toast][data-styled="true"]:focus-within [data-close-button], .ui-toaster [data-sonner-toast][data-styled="true"] [data-close-button]:focus-visible {
    pointer-events: auto;
    opacity: 1;
  }
  .ui-toaster [data-sonner-toast][data-styled="true"] [data-button]:hover {
    background: var(--openbot-bg-control-active);
  }
  .ui-toaster [data-sonner-toast][data-styled="true"] [data-close-button]:hover:not(:focus-visible) {
    background: var(--openbot-danger-soft);
    color: var(--openbot-danger);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ui-progress-fill, .ui-radial-progress-indicator {
    animation: none;
    transition: none;
  }
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-button]:active {
  transform: scale(0.96);
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-close-button]:active {
  transform: scale(0.96);
}
.ui-separator[data-orientation="horizontal"] {
  width: 100%;
  height: 1px;
  background: var(--openbot-border);
}
.ui-separator[data-orientation="vertical"] {
  width: 1px;
  height: 100%;
  background: var(--openbot-border);
}
.ui-spinner {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  display: inline-block;
  flex: 0 0 auto;
  border: 1.5px solid var(--openbot-border-strong);
  border-top-color: currentColor;
  border-radius: var(--openbot-radius-pill);
  animation: ui-spin 720ms linear infinite;
}
.ui-spinner[data-size="sm"] {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.ui-spinner[data-size="lg"] {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
}
@keyframes ui-spin {
  to {
    transform: rotate(360deg);
  }
}
.ui-skeleton {
  min-height: var(--openbot-leading-md);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-control-hover);
  animation: ui-skeleton-pulse 1.2s ease-in-out infinite;
}
@keyframes ui-skeleton-pulse {
  50% {
    opacity: 0.56;
  }
}
.ui-kbd {
  min-width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-bg-control);
  padding-inline: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  line-height: 1;
}
.ui-tooltip {
  position: relative;
  z-index: var(--openbot-layer-tooltip);
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-canvas);
  box-shadow: 0 0 0 1px var(--openbot-border-strong), var(--openbot-shadow-raised);
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-sm);
  opacity: 1;
  pointer-events: none;
  transform: translateY(0) scale(1);
  transform-origin: bottom center;
  transition: opacity var(--openbot-duration-fast) ease, transform var(--openbot-duration-fast) var(--openbot-ease-out);
  @starting-style {
    opacity: 0;
    transform: translateY(2px) scale(0.96);
  }
}
.ui-tooltip::after {
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 8px;
  height: 8px;
  background: var(--openbot-bg-canvas);
  box-shadow: 1px 1px 0 var(--openbot-border-strong);
  content: "";
  transform: translateX(-50%) rotate(45deg);
}
.ui-tooltip[data-placement="bottom"] {
  transform-origin: top center;
}
.ui-tooltip[data-placement="bottom"]::after {
  top: -4px;
  bottom: auto;
  box-shadow: -1px -1px 0 var(--openbot-border-strong);
}
.ui-tooltip:is([data-placement="left"], [data-placement="right"])::after {
  top: 50%;
  bottom: auto;
}
.ui-tooltip[data-placement="left"] {
  transform-origin: center right;
}
.ui-tooltip[data-placement="left"]::after {
  right: -4px;
  left: auto;
  box-shadow: 1px -1px 0 var(--openbot-border-strong);
  transform: translateY(-50%) rotate(45deg);
}
.ui-tooltip[data-placement="right"] {
  transform-origin: center left;
}
.ui-tooltip[data-placement="right"]::after {
  left: -4px;
  box-shadow: -1px 1px 0 var(--openbot-border-strong);
  transform: translateY(-50%) rotate(45deg);
}
@media (prefers-reduced-motion: reduce) {
  .ui-button, .ui-switch, .ui-switch-thumb, .ui-tooltip {
    transition-property: background-color, border-color, color, opacity;
  }
  .ui-spinner, .ui-skeleton {
    animation-duration: 1.8s;
  }
  .ui-toaster [data-sonner-toast], .ui-toaster [data-sonner-toast] > * {
    transition-duration: 0.01ms;
  }
  .ui-toast-loading-icon {
    animation: none;
  }
}
.ui-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--openbot-layer-dialog);
  display: grid;
  place-items: center;
  padding: var(--openbot-space-6);
  background: var(--openbot-dialog-overlay);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: ui-dialog-overlay-in var(--openbot-duration-overlay) var(--openbot-ease-out);
  -webkit-app-region: no-drag;
}
.ui-dialog-content {
  border: 0;
  border-radius: var(--openbot-radius-card);
  box-shadow: 0 0 0 1px var(--openbot-dialog-ring);
}
.ui-dialog-content[data-dialog-surface="unstyled"] {
  border-radius: 0;
  box-shadow: none;
}
.ui-stable-label {
  display: inline-grid;
}
.ui-stable-label-text, .ui-stable-label-sizer {
  grid-area: 1 / 1;
}
.ui-stable-label-sizer {
  visibility: hidden;
}
.ui-confirm-dialog-overlay {
  z-index: calc(var(--openbot-layer-dialog-host) + 2);
}
.ui-dialog-content.ui-confirm-dialog {
  width: min(460px, 100%);
  max-height: calc(100dvh - 2 * var(--openbot-space-6));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  outline: 0;
  border-radius: var(--openbot-radius-xl);
  background: var(--openbot-bg-sidebar);
  color: var(--openbot-text-primary);
  border: 1px solid var(--openbot-dialog-ring);
  box-shadow: none;
  animation: ui-confirm-dialog-in var(--openbot-duration-slow) var(--openbot-ease-out);
}
.ui-confirm-dialog-main {
  min-height: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--openbot-space-4);
  overflow-y: auto;
  padding: var(--openbot-space-6);
}
.ui-confirm-dialog-icon {
  width: var(--openbot-control-xl);
  height: var(--openbot-control-xl);
  display: grid;
  place-items: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-secondary);
}
.ui-confirm-dialog-icon svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  stroke-width: var(--openbot-icon-stroke);
}
.ui-confirm-dialog[data-tone="destructive"] .ui-confirm-dialog-icon {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger-text);
}
.ui-confirm-dialog-media {
  display: grid;
  place-items: center;
}
.ui-confirm-dialog-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
  padding-top: var(--openbot-space-1-5);
}
.ui-confirm-dialog-title {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-xl);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-xl);
  letter-spacing: var(--openbot-tracking-tight);
  overflow-wrap: anywhere;
}
.ui-confirm-dialog-description {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
.ui-confirm-dialog-body {
  margin-top: var(--openbot-space-1);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.ui-confirm-dialog-body :where(ul, ol) {
  display: grid;
  gap: var(--openbot-space-1);
  margin: 0;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-3) var(--openbot-space-4) var(--openbot-space-3) var(--openbot-space-8);
  list-style: disc;
}
.ui-confirm-dialog-body :where(ol) {
  list-style: decimal;
}
.ui-confirm-dialog-body :where(li)::marker {
  color: var(--openbot-text-dim);
}
.ui-confirm-dialog-error.ui-alert {
  margin-top: var(--openbot-space-1);
  padding: var(--openbot-space-2) var(--openbot-space-3);
}
.ui-confirm-dialog-error .ui-alert-icon {
  color: var(--openbot-danger-text);
}
.ui-confirm-dialog-actions {
  display: flex;
  flex: 0 0 auto;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
  border-top: 1px solid var(--openbot-dialog-ring);
  padding: var(--openbot-space-4) var(--openbot-space-6);
}
.ui-confirm-dialog-actions .ui-button svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: var(--openbot-icon-stroke);
}
.ui-confirm-dialog-confirm.ui-button-variant-destructive {
  color: var(--openbot-danger-text);
}
@media (hover: hover) and (pointer: fine) {
  .ui-confirm-dialog-confirm.ui-button-variant-destructive:hover:not(:disabled):not([data-disabled]) {
    color: var(--openbot-danger-text);
  }
}
.ui-confirm-dialog-actions .ui-button:active:not(:disabled):not([data-disabled]) {
  transform: scale(0.97);
}
@keyframes ui-dialog-overlay-in {
  from {
    opacity: 0;
  }
}
@keyframes ui-confirm-dialog-in {
  from {
    opacity: 0;
    transform: scale(0.97) translateY(4px);
  }
}
@media (max-width: 560px) {
  .ui-confirm-dialog-overlay {
    padding: var(--openbot-space-3);
  }
  .ui-dialog-content.ui-confirm-dialog {
    max-height: calc(100dvh - 2 * var(--openbot-space-3));
  }
  .ui-confirm-dialog-main {
    padding: var(--openbot-space-4);
  }
  .ui-confirm-dialog-actions {
    padding: var(--openbot-space-3) var(--openbot-space-4);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ui-dialog-content.ui-confirm-dialog {
    animation-name: ui-dialog-overlay-in;
  }
  .ui-confirm-dialog-actions .ui-button:active {
    transform: none;
  }
}
.ui-bubble-group {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--openbot-space-2);
}
.ui-bubble {
  position: relative;
  display: flex;
  width: fit-content;
  min-width: 0;
  max-width: min(80%, 720px);
  flex-direction: column;
  align-self: flex-start;
  gap: var(--openbot-space-1);
  color: var(--openbot-text-primary);
}
.ui-bubble[data-align="end"] {
  align-self: flex-end;
}
.ui-bubble-content {
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--openbot-radius-bubble);
  padding: 8px 12px;
  font-size: var(--openbot-text-lg);
  line-height: 1.625;
  overflow-wrap: anywhere;
  transition: border-color var(--openbot-duration-hover) ease, background var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease;
}
button.ui-bubble-content, a.ui-bubble-content {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  transition: color var(--openbot-duration-hover) ease;
}
button.ui-bubble-content {
  cursor: pointer;
}
.ui-bubble-variant-default {
  color: var(--openbot-text-on-light);
}
.ui-bubble-variant-default > .ui-bubble-content {
  background: var(--openbot-surface-light);
}
.ui-bubble-variant-default .message-reply-context {
  border-left-color: var(--openbot-text-muted-on-light);
  color: var(--openbot-text-on-light);
}
.ui-bubble-variant-secondary > .ui-bubble-content {
  background: var(--openbot-bg-surface-raised);
}
.ui-bubble-variant-muted > .ui-bubble-content {
  background: var(--openbot-bg-surface);
}
.ui-bubble-variant-tinted {
  color: var(--openbot-accent-text);
}
.ui-bubble-variant-tinted > .ui-bubble-content {
  border-color: var(--openbot-accent-strong);
  background: var(--openbot-accent-soft);
}
.ui-bubble-variant-outline > .ui-bubble-content {
  border-color: var(--openbot-border-strong);
  background: transparent;
}
.ui-bubble-variant-ghost {
  width: fit-content;
  max-width: 100%;
  border-color: transparent;
  background: transparent;
}
.ui-bubble-variant-ghost > .ui-bubble-content {
  width: fit-content;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.ui-bubble-variant-destructive {
  color: var(--openbot-danger);
}
.ui-bubble-variant-destructive > .ui-bubble-content {
  border-color: var(--openbot-danger-border);
  background: var(--openbot-danger-soft);
}
.ui-bubble-reactions {
  position: absolute;
  z-index: 1;
  display: flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: var(--openbot-space-1);
  border: 0;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface);
  padding: 2px 6px;
  box-shadow: 0 0 0 3px var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
  white-space: nowrap;
  transition: background var(--openbot-duration-hover) ease, box-shadow var(--openbot-duration-hover) ease;
}
.ui-bubble-reactions:has(button) {
  padding: 0;
}
.ui-bubble-reactions-side-top {
  top: 0;
  translate: 0 -75%;
}
.ui-bubble-reactions-side-bottom {
  bottom: 0;
  translate: 0 75%;
}
.ui-bubble-reactions-align-start {
  left: var(--openbot-space-3);
}
.ui-bubble-reactions-align-end {
  right: var(--openbot-space-3);
}
.ui-bubble-reaction-overflow {
  color: var(--openbot-text-primary);
  font: inherit;
}
.ui-marker {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
}
.ui-marker-content {
  display: flex;
  min-width: 0;
  align-items: center;
}
.ui-marker-icon {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
}
.ui-message-group {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--openbot-space-1);
}
.ui-message {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: flex-end;
  gap: var(--openbot-space-2);
}
.ui-message[data-align="end"] {
  flex-direction: row-reverse;
}
.ui-message-avatar {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  align-self: flex-end;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
}
.ui-message-content {
  display: flex;
  width: 100%;
  min-width: 0;
  max-width: 720px;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--openbot-space-1);
  overflow-wrap: anywhere;
}
.ui-message[data-align="end"] > .ui-message-content {
  align-items: flex-end;
}
.ui-message-header, .ui-message-footer {
  display: flex;
  max-width: 100%;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: 0 var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
}
.ui-message[data-align="end"] .ui-message-footer {
  justify-content: flex-end;
}
.ui-toast-layer {
  pointer-events: auto;
}
.otp-input {
  display: grid;
  gap: 10px;
  justify-items: center;
}
.otp-input-fieldset {
  position: relative;
  width: max-content;
  max-width: 100%;
  margin: 0;
  border: 0;
  padding: 0;
}
.otp-input .otp-input-native {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 0;
  color: transparent;
  caret-color: transparent;
  cursor: text;
  opacity: 0;
}
.otp-input .otp-input-native:focus {
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
}
.otp-input-slots {
  --otp-slot-size: 34px;
  --otp-slot-height: 50px;
  --otp-slot-gap: 6px;
  --otp-group-gap: 8px;
  position: relative;
  display: flex;
  gap: var(--otp-slot-gap);
}
.otp-input-slot, .otp-input-focus-ring {
  width: var(--otp-slot-size);
  height: var(--otp-slot-height);
  border-radius: var(--openbot-radius-md);
}
.otp-input-slot {
  position: relative;
  display: grid;
  flex: 0 0 var(--otp-slot-size);
  place-items: center;
  border: 1px solid var(--otp-slot-border, var(--openbot-border-strong));
  background: var(--otp-slot-background, var(--openbot-bg-control));
  box-shadow: var(--otp-slot-shadow, none);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-xl);
  font-weight: var(--openbot-weight-semibold);
  line-height: 1;
  transition: border-color var(--openbot-duration-hover) ease, background-color var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease;
}
.otp-input-slot[data-filled="true"] {
  background: var(--otp-slot-filled-background, var(--otp-slot-background, var(--openbot-bg-control)));
}
.otp-input-slot[data-group-start="true"] {
  margin-left: var(--otp-group-gap);
}
.otp-input-focus-ring {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  border: 1px solid var(--openbot-border-focus);
  box-shadow: var(--openbot-focus-ring);
  opacity: 0;
  pointer-events: none;
  transform: translateX( calc(var(--otp-active-index) * (var(--otp-slot-size) + var(--otp-slot-gap)) + var(--otp-group-offset)) );
  transition: transform var(--openbot-duration-hover) var(--openbot-ease-out), opacity var(--openbot-duration-hover) ease;
}
.otp-input-focus-ring[data-visible="true"] {
  opacity: 1;
}
.otp-input-character {
  position: relative;
  z-index: 1;
  animation: otp-character-enter var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.otp-input-caret {
  position: absolute;
  z-index: 2;
  top: calc((var(--otp-slot-height) - 24px) / 2);
  left: 50%;
  width: 1px;
  height: 24px;
  background: var(--openbot-text-primary);
  animation: otp-caret-blink 1s steps(1, end) infinite;
  transform: translateX(-50%);
}
.otp-input-caret[data-trailing="true"] {
  margin-left: 7px;
}
.otp-input[data-size="compact"] {
  container-type: inline-size;
  justify-items: start;
}
.otp-input[data-size="compact"] .otp-input-slots {
  --otp-slot-height: 48px;
  --otp-slot-gap: var(--openbot-space-2);
  --otp-group-gap: 14px;
  --otp-slot-size: min(
    var(--openbot-control-xl),
    calc((100cqw - (var(--otp-length) - 1) * var(--otp-slot-gap) - var(--otp-group-gap)) / var(--otp-length))
  );
}
.otp-input[data-status="verifying"] .otp-input-slot {
  color: var(--openbot-text-secondary);
}
.otp-input[data-status="error"] .otp-input-slot {
  border-color: var(--openbot-danger);
  background: var(--openbot-danger-soft);
}
.otp-input[data-status="error"] .otp-input-focus-ring {
  border-color: var(--openbot-danger);
  box-shadow: 0 0 0 3px var(--openbot-danger-soft);
}
.otp-input[data-status="success"] .otp-input-slot {
  border-color: var(--openbot-success);
  background: var(--openbot-success-soft);
  color: var(--openbot-success);
}
.otp-input-success {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  overflow: visible;
  color: var(--openbot-success);
}
.otp-input-success path {
  fill: none;
  stroke: currentcolor;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  animation: otp-check-draw 350ms var(--openbot-duration-fast) var(--openbot-ease-out) forwards;
}
.otp-input-message {
  min-height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 17px;
  text-align: center;
}
.otp-input[data-status="error"] .otp-input-message {
  color: var(--openbot-danger);
}
.otp-input[data-status="success"] .otp-input-message {
  color: var(--openbot-success);
}
.otp-input[data-size="compact"] .otp-input-message {
  justify-content: flex-start;
  text-align: start;
}
@keyframes otp-character-enter {
  from {
    filter: blur(2px);
    opacity: 0;
    transform: translateY(9px);
  }
}
@keyframes otp-check-draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes otp-caret-blink {
  50% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .otp-input-slot, .otp-input-focus-ring {
    transition: none;
  }
  .otp-input-character, .otp-input-caret, .otp-input-success path {
    animation: none;
  }
  .otp-input-success path {
    stroke-dashoffset: 0;
  }
}
@keyframes t-digit-pop-in {
  0% {
    transform: translate( calc(var(--digit-distance) * var(--digit-dir-x)), calc(var(--digit-distance) * var(--digit-dir-y)) );
    opacity: 0;
    filter: blur(var(--digit-blur));
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
    filter: blur(0);
  }
}
.t-digit-group {
  display: inline-flex;
  align-items: baseline;
}
.t-digit {
  display: inline-block;
  will-change: transform, opacity, filter;
}
.t-digit-group.is-animating .t-digit {
  animation: t-digit-pop-in var(--digit-dur) var(--digit-ease) both;
}
.t-digit-group.is-animating .t-digit[data-stagger="1"] {
  animation-delay: var(--digit-stagger);
}
.t-digit-group.is-animating .t-digit[data-stagger="2"] {
  animation-delay: calc(var(--digit-stagger) * 2);
}
@media (prefers-reduced-motion: reduce) {
  .t-digit-group .t-digit {
    animation: none !important;
  }
}
.t-input {
  transition: border-color var(--openbot-duration-normal) ease-out;
  will-change: transform;
}
.t-input.is-error {
  transition: border-color var(--revert-dur, 280ms) ease-out;
}
.t-error-msg {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--revert-dur, 280ms) ease-out, visibility 0s linear var(--revert-dur, 280ms);
}
.t-input-wrap.is-error .t-error-msg {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--revert-dur, 280ms) ease-out, visibility 0s linear 0s;
}
.t-input.is-shaking {
  animation: t-input-shake calc(var(--shake-dur-a) * 2 + var(--shake-dur-b) * 2) linear;
}
@keyframes t-input-shake {
  0% {
    transform: translateX(0);
    animation-timing-function: var(--shake-ease);
  }
  28.57% {
    transform: translateX(var(--shake-distance));
    animation-timing-function: var(--shake-ease);
  }
  57.14% {
    transform: translateX(calc(var(--shake-distance) * -1));
    animation-timing-function: var(--shake-ease);
  }
  78.57% {
    transform: translateX(var(--shake-overshoot));
    animation-timing-function: var(--shake-ease);
  }
  100% {
    transform: translateX(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .t-input {
    animation: none !important;
    transform: none !important;
  }
}
.t-modal {
  transform-origin: center;
  transform: scale(var(--modal-scale));
  opacity: 0;
  pointer-events: none;
  transition: transform var(--modal-open-dur) var(--modal-ease), opacity var(--modal-open-dur) var(--modal-ease);
  will-change: transform, opacity;
}
.t-modal.is-open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
.t-modal.is-closing {
  transform: scale(var(--modal-scale-close));
  opacity: 0;
  pointer-events: none;
  transition: transform var(--modal-close-dur) var(--modal-ease), opacity var(--modal-close-dur) var(--modal-ease);
}
@media (prefers-reduced-motion: reduce) {
  .t-modal {
    transition: none !important;
  }
}
.t-page-slide {
  position: relative;
}
.t-page-slide .t-page[data-page-id="1"] {
  --t-page-from-x: calc(var(--page-slide-distance) * -1);
}
.t-page-slide .t-page[data-page-id="2"] {
  --t-page-from-x: var(--page-slide-distance);
}
.t-page-slide .t-page {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateX(calc(var(--t-page-from-x, 0px) * var(--page-exit-enabled)));
  filter: blur(calc(var(--page-blur) * var(--page-exit-enabled)));
  transition: opacity var(--page-fade-dur) var(--page-fade-ease), transform var(--page-slide-dur) var(--page-slide-ease), filter var(--page-slide-dur) var(--page-slide-ease);
  will-change: opacity, transform, filter;
}
.t-page-slide[data-page="1"] .t-page[data-page-id="1"], .t-page-slide[data-page="2"] .t-page[data-page-id="2"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
  filter: blur(0);
  transition-delay: var(--page-stagger);
}
@media (prefers-reduced-motion: reduce) {
  .t-page-slide .t-page {
    transition: none !important;
  }
}
.t-text-swap {
  display: inline-block;
  transform: translateY(0);
  filter: blur(0);
  opacity: 1;
  transition: transform var(--text-swap-dur) var(--text-swap-ease), filter var(--text-swap-dur) var(--text-swap-ease), opacity var(--text-swap-dur) var(--text-swap-ease);
  will-change: transform, filter, opacity;
}
.t-text-swap.is-exit {
  transform: translateY(calc(var(--text-swap-translate-y) * -1));
  filter: blur(var(--text-swap-blur));
  opacity: 0;
}
.t-text-swap.is-enter-start {
  transform: translateY(var(--text-swap-translate-y));
  filter: blur(var(--text-swap-blur));
  opacity: 0;
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .t-text-swap {
    transition: none !important;
  }
}
.t-resize {
  transition: width var(--resize-dur) var(--resize-ease), height var(--resize-dur) var(--resize-ease);
  will-change: width, height;
}
@media (prefers-reduced-motion: reduce) {
  .t-resize {
    transition: none !important;
  }
}
.t-panel-slide {
  transform: translate(var(--panel-translate-x), var(--panel-translate-y));
  opacity: 0;
  filter: blur(var(--panel-blur));
  pointer-events: none;
  transition: transform var(--panel-close-dur) var(--panel-ease), opacity var(--panel-close-dur) var(--panel-ease), filter var(--panel-close-dur) var(--panel-ease);
  will-change: transform, opacity, filter;
}
.t-panel-slide[data-open="true"] {
  transform: translate(0, 0);
  opacity: 1;
  filter: blur(0);
  pointer-events: auto;
  transition: transform var(--panel-open-dur) var(--panel-ease), opacity var(--panel-open-dur) var(--panel-ease), filter var(--panel-open-dur) var(--panel-ease);
}
@media (prefers-reduced-motion: reduce) {
  .t-panel-slide {
    transition: none !important;
  }
}
.t-acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--acc-collapse) var(--acc-ease);
}
.t-acc[data-open="true"] .t-acc-panel {
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--acc-expand) var(--acc-ease);
}
.t-acc-panel-inner {
  overflow: hidden;
  opacity: 0;
  filter: blur(2px);
  transition: opacity var(--acc-collapse) var(--acc-ease), filter var(--acc-collapse) var(--acc-ease);
}
.t-acc[data-open="true"] .t-acc-panel-inner {
  opacity: 1;
  filter: blur(0);
  transition: opacity var(--acc-expand) var(--acc-ease), filter var(--acc-expand) var(--acc-ease);
}
@media (prefers-reduced-motion: reduce) {
  .t-acc-panel, .t-acc-panel-inner {
    transition: none !important;
  }
}
.ui-sliding-tabs {
  --sliding-tabs-duration: 250ms;
  --sliding-tabs-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-tabs-bar-bg);
  box-shadow: inset 0 0 0 1px var(--openbot-border);
  padding: 3px;
}
.ui-sliding-tabs-trigger {
  position: relative;
  z-index: 1;
  height: var(--openbot-control-sm);
  appearance: none;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  outline: 0;
  background: transparent;
  padding: 4px var(--openbot-space-3);
  color: var(--openbot-text-muted);
  font: inherit;
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-sm);
  font-weight: var(--openbot-weight-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--sliding-tabs-duration) var(--sliding-tabs-ease);
}
.ui-sliding-tabs-trigger[aria-selected="true"], .ui-sliding-tabs-trigger:not([aria-selected="true"]):hover {
  color: var(--openbot-text-primary);
}
.ui-sliding-tabs-trigger:focus-visible {
  box-shadow: var(--openbot-focus-ring);
}
.ui-sliding-tabs-trigger:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}
.ui-sliding-tabs-pill {
  position: absolute;
  top: 3px;
  left: 0;
  z-index: 0;
  width: 0;
  height: var(--openbot-control-sm);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-tabs-pill-bg);
  pointer-events: none;
  transition: transform var(--sliding-tabs-duration) var(--sliding-tabs-ease), width var(--sliding-tabs-duration) var(--sliding-tabs-ease);
  will-change: transform, width;
}
.ui-sliding-tabs-pill:is([data-initializing], [data-resizing]) {
  transition: none;
}
.ui-sliding-tabs-content-slot {
  --sliding-tabs-content-duration: 150ms;
  --sliding-tabs-content-distance: 4px;
  --sliding-tabs-content-blur: 2px;
  min-width: 0;
  display: grid;
}
.ui-sliding-tabs-content {
  min-width: 0;
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  filter: blur(var(--sliding-tabs-content-blur));
  transform: translateY(var(--sliding-tabs-content-distance));
  pointer-events: none;
  transition: transform var(--sliding-tabs-content-duration) ease-in-out, filter var(--sliding-tabs-content-duration) ease-in-out, opacity var(--sliding-tabs-content-duration) ease-in-out, visibility 0s linear var(--sliding-tabs-content-duration);
  will-change: transform, filter, opacity;
}
.ui-sliding-tabs-content[data-selected] {
  opacity: 1;
  visibility: visible;
  filter: blur(0);
  transform: translateY(0);
  pointer-events: auto;
  transition: transform var(--sliding-tabs-content-duration) ease-in-out, filter var(--sliding-tabs-content-duration) ease-in-out, opacity var(--sliding-tabs-content-duration) ease-in-out, visibility 0s linear;
}
@media (prefers-reduced-motion: reduce) {
  .ui-sliding-tabs-pill, .ui-sliding-tabs-trigger, .ui-sliding-tabs-content {
    transition: none;
  }
}
:root {
  --ui-menu-radius: var(--openbot-radius-card);
  --ui-menu-padding: var(--openbot-space-1-5);
  --ui-menu-item-radius: calc(var(--ui-menu-radius) - var(--ui-menu-padding) + var(--openbot-space-0-5));
  --ui-menu-inset: calc(var(--openbot-space-2) + var(--openbot-space-0-5));
  --ui-menu-bg: var(--openbot-bg-sheet);
  --ui-menu-edge: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --ui-menu-edge: color-mix(in srgb, var(--openbot-text-primary) 11%, transparent);
  }
  --ui-menu-highlight: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --ui-menu-highlight: color-mix(in srgb, var(--openbot-text-primary) 5%, transparent);
  }
  --ui-menu-shadow: var(--openbot-bg-notch);
  @supports (color: color-mix(in lab, red, red)) {
    --ui-menu-shadow: color-mix(in srgb, var(--openbot-bg-notch) 45%, transparent);
  }
  --ui-menu-item-hover: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --ui-menu-item-hover: color-mix(in srgb, var(--openbot-text-primary) 6%, transparent);
  }
  --ui-menu-row-highlight: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --ui-menu-row-highlight: color-mix(in srgb, var(--openbot-text-primary) 6%, var(--ui-menu-bg));
  }
  --ui-menu-panel-shadow: inset 0 1px 0 var(--ui-menu-highlight), 0 0 0 1px var(--ui-menu-edge), 0 4px 6px -1px var(--ui-menu-shadow),
    0 2px 4px -2px var(--ui-menu-shadow);
  --ui-menu-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ui-menu-duration: 150ms;
  --ui-submenu-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ui-submenu-duration: var(--openbot-duration-slow);
}
.ui-popover-menu-surface {
  border: 0;
  border-radius: var(--openbot-radius-md);
  outline: 0;
  background: var(--openbot-bg-control);
  box-shadow: 0 0 0 1px var(--openbot-border), 0 4px 6px -1px var(--openbot-shadow-popover-ambient), 0 2px 4px -2px var(--openbot-shadow-popover-ambient);
  color: var(--openbot-text-primary);
}
.ui-action-menu {
  position: relative;
  z-index: var(--openbot-layer-popover);
  width: max-content;
  min-width: 192px;
  max-width: min(288px, calc(100vw - var(--openbot-space-4)));
  overflow: hidden;
  border: 0;
  border-radius: var(--ui-menu-radius);
  outline: 0;
  background: var(--ui-menu-bg);
  box-shadow: var(--ui-menu-panel-shadow);
  padding: var(--ui-menu-padding);
  color: var(--openbot-text-primary);
  transform-origin: var(--kb-menu-content-transform-origin, var(--kb-popover-content-transform-origin));
  animation: ui-menu-in var(--ui-menu-duration) var(--ui-menu-ease) both;
}
.ui-action-menu:not([data-expanded]) {
  animation: ui-menu-out var(--ui-menu-duration) var(--ui-menu-ease) both;
}
.ui-action-menu[aria-labelledby*="sub-trigger"] {
  animation-duration: var(--ui-submenu-duration);
  animation-timing-function: var(--ui-submenu-ease);
}
.ui-action-menu:not([data-menu-layout="grid"]) :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]) {
  display: flex;
  width: 100%;
  height: var(--openbot-control-md);
  min-height: var(--openbot-control-md);
  align-items: center;
  justify-content: flex-start;
  gap: var(--openbot-space-2);
  border: 0;
  border-radius: var(--ui-menu-item-radius);
  outline: 0;
  background: transparent;
  padding: var(--openbot-space-1-5) var(--ui-menu-inset);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-lg);
  text-align: left;
  white-space: nowrap;
  transition: background-color var(--openbot-duration-hover) var(--openbot-ease-out), color var(--openbot-duration-hover) var(--openbot-ease-out);
}
.ui-action-menu:not([data-menu-layout="grid"]) :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]) > span:not(:has(svg), .ui-menu-trailing) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui-action-menu:not([data-menu-layout="grid"]) :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]):is( :hover, :focus-visible, [data-highlighted], [aria-expanded="true"] ) {
  background: var(--ui-menu-item-hover);
  color: var(--openbot-text-primary);
}
.ui-action-menu:not([data-menu-layout="grid"]) :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"])[data-disabled] {
  color: var(--openbot-text-muted);
  cursor: default;
  opacity: 0.45;
}
.ui-action-menu:not([data-menu-layout="grid"]) :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]) > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  color: var(--openbot-text-secondary);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ui-action-menu:not([data-menu-layout="grid"]) :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]) > svg:not(.ui-glyph-20, .ui-glyph-16) {
  stroke-width: var(--openbot-icon-stroke);
}
.ui-action-menu > hr, .ui-action-menu [role="separator"] {
  height: 1px;
  margin: var(--ui-menu-padding) calc(var(--ui-menu-padding) * -1);
  border: 0;
  background: var(--openbot-border);
}
.ui-action-menu:not([data-menu-layout="grid"]) :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]).ui-action-menu-danger, .ui-action-menu:not([data-menu-layout="grid"]) :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]).ui-action-menu-danger > svg {
  color: var(--openbot-danger);
}
.ui-action-menu:not([data-menu-layout="grid"]) :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]).ui-action-menu-danger:is( :hover, :focus-visible, [data-highlighted] ) {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
}
.ui-menu-label {
  padding: var(--openbot-space-1-5) var(--ui-menu-inset);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.ui-menu-check {
  display: grid;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--openbot-text-primary) 22%, transparent);
  }
  border-radius: var(--openbot-radius-pill);
  transition: background-color var(--ui-menu-duration) ease-out, border-color var(--ui-menu-duration) ease-out;
}
.ui-menu-check[data-checked] {
  border-color: transparent;
  background: var(--openbot-text-primary);
}
.ui-action-menu:not([data-menu-layout="grid"]) :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]) > .ui-menu-check > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke: var(--ui-menu-bg);
  stroke-width: 2.5;
}
.ui-menu-trailing {
  margin-left: auto;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.ui-action-menu:not([data-menu-layout="grid"]) :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]) > svg.ui-menu-trailing {
  color: var(--openbot-text-muted);
}
.ui-action-menu .agent-context-icon {
  color: var(--openbot-text-muted);
}
.ui-action-menu .agent-context-icon > * {
  fill: currentColor;
  fill-opacity: 0;
}
.ui-action-menu [class~="lucide-chart-area"] > path:first-child, .ui-action-menu [class~="lucide-bell-off"] > path:nth-child(3), .ui-action-menu [class~="lucide-app-window"] > path, .ui-action-menu [class~="lucide-bot"] > *, .ui-action-menu [class~="lucide-calendar-clock"] > * {
  fill: none;
}
.ui-action-menu :is(:hover, [data-highlighted], [aria-expanded="true"]) > .agent-context-icon {
  color: var(--openbot-text-primary);
}
.ui-action-menu :is(:hover, [data-highlighted], [aria-expanded="true"]) > .agent-context-icon > * {
  fill-opacity: 1;
}
.ui-action-menu :is(:hover, [data-highlighted], [aria-expanded="true"]) > [class~="lucide-app-window"] > path, .ui-action-menu :is(:hover, [data-highlighted], [aria-expanded="true"]) > .ui-glyph-20:has(> rect + rect + circle) > circle {
  fill: var(--ui-menu-row-highlight);
  stroke: var(--ui-menu-row-highlight);
}
.ui-motion-tooltip-trigger {
  display: flex;
}
.ui-motion-tooltip {
  z-index: var(--openbot-layer-tooltip);
  transform-origin: var(--kb-tooltip-content-transform-origin);
  animation: ui-menu-in var(--ui-submenu-duration) var(--ui-submenu-ease) both;
}
.ui-motion-tooltip:not([data-expanded]) {
  animation: ui-menu-out var(--ui-submenu-duration) var(--ui-submenu-ease) both;
}
.ui-motion-tooltip:is([data-menu-hold], [data-menu-moving], [data-menu-swap-out]) {
  overflow: hidden;
}
.ui-motion-tooltip-label {
  overflow: hidden;
  max-width: min(240px, calc(100vw - var(--openbot-space-4)));
  border-radius: var(--openbot-radius-md);
  background: var(--ui-menu-bg);
  box-shadow: var(--ui-menu-panel-shadow);
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
  overflow-wrap: anywhere;
  pointer-events: none;
}
.ui-motion-tooltip-label > span {
  display: block;
}
.ui-action-menu:is([data-menu-hold], [data-menu-swap-in], [data-menu-swap-out]), .ui-motion-tooltip:is([data-menu-hold], [data-menu-swap-in], [data-menu-swap-out]) {
  animation: none;
}
.ui-action-menu[data-menu-handoff], .ui-motion-tooltip[data-menu-handoff] {
  animation: none;
  opacity: 0;
}
.ui-action-menu[data-menu-swap-out], .ui-motion-tooltip[data-menu-swap-out] {
  background: transparent;
  box-shadow: none;
}
@keyframes ui-menu-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
}
@keyframes ui-menu-out {
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ui-action-menu, .ui-action-menu:not([data-expanded]), .ui-motion-tooltip, .ui-motion-tooltip:not([data-expanded]) {
    animation: none;
  }
  .ui-menu-check {
    transition: none;
  }
}
.dynamic-island {
  --dynamic-island-notch-width: 192px;
  --dynamic-island-notch-height: 32px;
  --dynamic-island-compact-width: 268px;
  --dynamic-island-expanded-width: 420px;
  --dynamic-island-hover-width-growth: 32px;
  --dynamic-island-hover-height-growth: 8px;
  --dynamic-island-hover-hit-top: 6px;
  --dynamic-island-hover-hit-bottom: 6px;
  --dynamic-island-hover-retention-bottom: 6px;
  --dynamic-island-hover-retention-inline-growth: 24px;
  --dynamic-island-shoulder-size: 6px;
  --dynamic-island-expanded-shoulder-size: 19px;
  --dynamic-island-bottom-radius: 14px;
  --dynamic-island-external-compact-radius: 16px;
  --dynamic-island-external-expanded-radius: 24px;
  --dynamic-island-shared-duration: 450ms;
  --dynamic-island-shared-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  display: flex;
  width: min(var(--dynamic-island-expanded-width), calc(100vw - var(--openbot-space-6)));
  height: fit-content;
  align-items: flex-start;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--openbot-text-primary);
  filter: drop-shadow(0 0 0 transparent);
  pointer-events: none;
  transition: filter var(--openbot-duration-normal) var(--openbot-ease-out);
}
.dynamic-island-shell {
  position: relative;
  display: block;
  width: fit-content;
  height: fit-content;
  overflow: clip;
  contain: layout paint;
  isolation: isolate;
  pointer-events: auto;
}
.dynamic-island[data-layout-state="expanded"] {
  --dynamic-island-shared-duration: 420ms;
  --dynamic-island-shoulder-size: 19px;
  --dynamic-island-bottom-radius: 24px;
}
.dynamic-island[data-layout-state="expanded"], .dynamic-island[data-hovered="true"] {
  filter: drop-shadow(0 0 10px var(--openbot-shadow-dynamic-island));
}
.dynamic-island-shell[data-resizing] {
  will-change: width, height;
}
.dynamic-island-size-target {
  position: relative;
  left: 50%;
  width: min(var(--dynamic-island-compact-width), calc(100vw - var(--openbot-space-6)));
  min-height: var(--dynamic-island-notch-height);
  transform: translateX(-50%);
}
.dynamic-island[data-layout-state="compact"][data-hovered="true"] .dynamic-island-size-target {
  width: min( calc(var(--dynamic-island-compact-width) + var(--dynamic-island-hover-width-growth)), calc(100vw - var(--openbot-space-6)) );
  min-height: calc(var(--dynamic-island-notch-height) + var(--dynamic-island-hover-height-growth));
}
.dynamic-island[data-layout-state="expanded"] .dynamic-island-size-target {
  width: min(var(--dynamic-island-expanded-width), calc(100vw - var(--openbot-space-6)));
  padding-top: var(--dynamic-island-notch-height);
}
.dynamic-island-silhouette {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
}
.dynamic-island-silhouette-body {
  position: absolute;
  inset: 0 var(--dynamic-island-shoulder-size);
  border-radius: 0 0 var(--dynamic-island-bottom-radius) var(--dynamic-island-bottom-radius);
  background: var(--openbot-bg-notch);
  box-shadow: inset 0 -1px 0 var(--openbot-shadow-ring);
  transition: box-shadow var(--openbot-duration-normal) var(--openbot-ease-out);
}
.dynamic-island-shoulder {
  position: absolute;
  top: 0;
  width: var(--dynamic-island-shoulder-size);
  height: var(--dynamic-island-shoulder-size);
  overflow: visible;
}
.dynamic-island-shoulder path {
  fill: var(--openbot-bg-notch);
}
.dynamic-island-shoulder-leading {
  left: 0;
}
.dynamic-island-shoulder-trailing {
  right: 0;
}
.dynamic-island-toggle {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  width: min(var(--dynamic-island-compact-width), calc(100vw - var(--openbot-space-6)));
  height: var(--dynamic-island-notch-height);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  border: 0;
  border-radius: inherit;
  background: transparent;
  padding: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  outline: none;
  transform: translateX(-50%);
}
.dynamic-island[data-pointer-toggle="false"] .dynamic-island-toggle {
  cursor: default;
}
.dynamic-island .dynamic-island-toggle:focus-visible {
  outline: none;
}
.dynamic-island-notch-safe-zone {
  width: var(--dynamic-island-notch-width);
  height: var(--dynamic-island-notch-height);
  pointer-events: none;
}
.dynamic-island-ear {
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  color: var(--openbot-text-secondary);
  transition: color var(--openbot-duration-normal) var(--openbot-ease-out);
}
.dynamic-island-ear-leading {
  justify-content: flex-end;
  padding-right: var(--openbot-space-2);
}
.dynamic-island-ear-trailing {
  justify-content: flex-start;
  padding-left: var(--openbot-space-2);
}
.dynamic-island:not(.dynamic-island-external):not(.dynamic-island-status) .dynamic-island-ear-leading {
  padding-right: 6px;
}
.dynamic-island-ear-content {
  position: relative;
  z-index: 3;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: center;
  transition: color var(--openbot-duration-normal) var(--openbot-ease-out), filter var(--openbot-duration-slow) var(--openbot-ease-out), opacity var(--openbot-duration-island-content) cubic-bezier(0.22, 1.08, 0.36, 1), transform var(--openbot-duration-island-content) cubic-bezier(0.22, 1.08, 0.36, 1);
}
.dynamic-island-shell[data-compact-resize] .dynamic-island-ear-content {
  filter: blur(calc(0.4px * var(--dynamic-island-compact-motion, 1)));
}
.dynamic-island-hover-content {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: center;
}
.dynamic-island-status .dynamic-island-hover-leading {
  width: 100%;
}
.dynamic-island-toggle:hover .dynamic-island-ear, .dynamic-island-toggle:focus-visible .dynamic-island-ear {
  color: var(--openbot-text-primary);
}
.dynamic-island-trailing-content {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  justify-content: center;
}
.dynamic-island-trailing-compact {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--openbot-duration-island-content) cubic-bezier(0.22, 1.08, 0.36, 1), transform var(--openbot-duration-island-content) cubic-bezier(0.22, 1.08, 0.36, 1);
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1);
}
.dynamic-island-status .dynamic-island-trailing-compact {
  right: auto;
  left: 0;
  justify-content: flex-start;
  transform-origin: left center;
}
.dynamic-island-external.dynamic-island-status .dynamic-island-trailing-compact {
  right: 0;
  left: auto;
  justify-content: flex-end;
  transform-origin: right center;
}
.dynamic-island[data-layout-state="expanded"] .dynamic-island-trailing-compact {
  pointer-events: none;
  opacity: 0;
  filter: none;
  transform: scale(0.92);
  transition-duration: var(--openbot-duration-island-content-exit);
  transition-timing-function: var(--dynamic-island-shared-ease);
}
.dynamic-island-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: var(--openbot-space-2) var(--openbot-space-4) var(--openbot-space-4);
}
.dynamic-island-panel[data-phase="leaving"] {
  position: absolute;
  top: var(--dynamic-island-notch-height);
  left: 50%;
  transform: translateX(-50%);
}
.dynamic-island-panel[data-phase="exiting"], .dynamic-island-panel[data-phase="leaving"] {
  pointer-events: none;
}
.dynamic-island-panel[data-phase="leaving"] {
  width: min(var(--dynamic-island-expanded-width), calc(100vw - var(--openbot-space-6)));
}
.dynamic-island-content {
  opacity: 1;
  filter: none;
  transform: scale(1);
  transform-origin: top center;
}
.dynamic-island[data-shared-leading="true"] .dynamic-island-ear-leading .dynamic-island-ear-content {
  opacity: 1;
  filter: none;
  transition: color var(--openbot-duration-normal) var(--openbot-ease-out), opacity var(--openbot-duration-island-content-exit) var(--dynamic-island-shared-ease);
}
.dynamic-island:not([data-shared-leading="true"])[data-layout-state="expanded"] .dynamic-island-ear-leading .dynamic-island-ear-content {
  opacity: 0;
  filter: none;
  transform: scale(0.92);
  transition-duration: var(--openbot-duration-normal), var(--openbot-duration-island-content-exit), var(--openbot-duration-island-content-exit);
  transition-timing-function: var(--openbot-ease-out), var(--dynamic-island-shared-ease), var(--dynamic-island-shared-ease);
}
.dynamic-island[data-layout-state="expanded"] .dynamic-island-ear-trailing .dynamic-island-ear-content {
  opacity: 1;
  filter: none;
  transform: none;
}
.dynamic-island-status .dynamic-island-trailing-compact {
  transform: scale(1);
  transition: opacity var(--openbot-duration-island-content) var(--dynamic-island-shared-ease);
}
.dynamic-island-status[data-layout-state="expanded"] .dynamic-island-trailing-compact {
  opacity: 0;
  transform: scale(1);
}
.dynamic-island-status .dynamic-island-trailing-content {
  transform-origin: left center;
}
.dynamic-island-status .dynamic-island-trailing-compact, .dynamic-island-status .dynamic-island-hover-trailing, .dynamic-island-status .dynamic-island-mode-swap[data-island-mode-slot="compact-trailing"] {
  width: max-content;
}
.dynamic-island-external.dynamic-island-status .dynamic-island-trailing-content {
  transform-origin: right center;
}
.dynamic-island-panel-wide {
  --dynamic-island-expanded-width: 590px;
}
.dynamic-island-idle .dynamic-island-ear-trailing {
  color: var(--openbot-text-primary);
  transition: none;
}
.dynamic-island.dynamic-island-idle:not(.dynamic-island-external) .dynamic-island-ear-leading {
  justify-content: flex-start;
  padding-right: 0;
  padding-left: var(--openbot-space-4);
}
.dynamic-island.dynamic-island-idle:not(.dynamic-island-external) .dynamic-island-ear-trailing {
  justify-content: flex-end;
  padding-right: var(--openbot-space-4);
  padding-left: 0;
}
.dynamic-island-hover-zone {
  position: absolute;
  top: calc(-1 * var(--dynamic-island-hover-hit-top));
  left: 50%;
  display: none;
  width: min(var(--dynamic-island-compact-width), calc(100vw - var(--openbot-space-6)));
  height: calc( var(--dynamic-island-notch-height) + var(--dynamic-island-hover-hit-top) + var(--dynamic-island-hover-hit-bottom) );
  pointer-events: auto;
  transform: translateX(-50%);
}
.dynamic-island[data-layout-state="compact"] > .dynamic-island-hover-zone {
  display: block;
}
.dynamic-island[data-layout-state="compact"][data-hovered="true"] > .dynamic-island-hover-zone {
  width: min( calc( var(--dynamic-island-compact-width) + var(--dynamic-island-hover-width-growth) + var(--dynamic-island-hover-retention-inline-growth) ), calc(100vw - var(--openbot-space-6)) );
  height: calc( var(--dynamic-island-notch-height) + var(--dynamic-island-hover-height-growth) + var(--dynamic-island-hover-hit-top) + var(--dynamic-island-hover-retention-bottom) );
}
.dynamic-island-status:not(.dynamic-island-external) .dynamic-island-ear-leading {
  justify-content: flex-start;
  padding-right: 0;
  padding-left: 12px;
}
.dynamic-island-status:not(.dynamic-island-external) .dynamic-island-ear-trailing {
  justify-content: flex-end;
  padding-right: 12px;
  padding-left: 0;
}
.dynamic-island-status:not(.dynamic-island-external) .dynamic-island-trailing-compact {
  right: 0;
  left: auto;
  justify-content: flex-end;
  transform-origin: right center;
}
.dynamic-island-status:not(.dynamic-island-external) .dynamic-island-trailing-content {
  transform-origin: right center;
}
.openbot-dynamic-island[data-layout-state="expanded"] .dynamic-island-panel, .openbot-dynamic-island .dynamic-island-panel[data-phase="exiting"], .openbot-dynamic-island .dynamic-island-panel[data-phase="leaving"] {
  padding: 14px calc(var(--dynamic-island-expanded-shoulder-size) + 20px) 20px;
}
.dynamic-island-external.openbot-dynamic-island[data-layout-state="expanded"] .dynamic-island-panel, .dynamic-island-external.openbot-dynamic-island .dynamic-island-panel[data-phase="exiting"], .dynamic-island-external.openbot-dynamic-island .dynamic-island-panel[data-phase="leaving"] {
  padding: 14px 20px 20px;
}
.openbot-dynamic-island.dynamic-island-working[data-layout-state="expanded"] .dynamic-island-panel, .openbot-dynamic-island.dynamic-island-working .dynamic-island-panel[data-phase="exiting"], .openbot-dynamic-island.dynamic-island-working .dynamic-island-panel[data-phase="leaving"] {
  padding-bottom: 14px;
}
.dynamic-island-external {
  --dynamic-island-notch-width: 16px;
  --dynamic-island-compact-width: 212px;
  --dynamic-island-external-inline-inset: 6px;
  padding-top: var(--dynamic-island-hover-hit-top);
}
.dynamic-island-external .dynamic-island-shoulder {
  display: none;
}
.dynamic-island-external .dynamic-island-silhouette {
  border-radius: var(--dynamic-island-external-compact-radius);
  background: var(--openbot-bg-notch);
  box-shadow: inset 0 -1px 0 var(--openbot-shadow-ring);
}
.dynamic-island-external .dynamic-island-silhouette-body {
  display: none;
}
.dynamic-island-external[data-layout-state="expanded"] .dynamic-island-silhouette {
  border-radius: var(--dynamic-island-external-expanded-radius);
}
.dynamic-island-shell:has(.dynamic-island-toggle:focus-visible) .dynamic-island-silhouette-body, .dynamic-island-external .dynamic-island-shell:has(.dynamic-island-toggle:focus-visible) .dynamic-island-silhouette {
  box-shadow: inset var(--openbot-focus-ring), inset 0 -1px 0 var(--openbot-shadow-ring);
}
.dynamic-island-external > .dynamic-island-hover-zone {
  top: 0;
}
.dynamic-island-external .dynamic-island-toggle {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-inline: var(--dynamic-island-external-inline-inset);
}
.dynamic-island-external .dynamic-island-notch-safe-zone {
  display: none;
}
.dynamic-island-external .dynamic-island-ear-leading {
  position: relative;
  left: 0;
  justify-content: flex-start;
  padding-right: 0;
}
.dynamic-island-external .dynamic-island-ear-trailing {
  justify-content: flex-end;
  padding-left: 0;
}
.dynamic-island-external.dynamic-island-panel-wide {
  --dynamic-island-expanded-width: 552px;
}
.dynamic-island-external.dynamic-island-status .dynamic-island-ear-leading {
  left: 0;
  justify-content: flex-start;
  padding-right: 0;
  padding-left: 0;
}
html:has(.dynamic-island-surface), body:has(.dynamic-island-surface), #root:has(.dynamic-island-surface) {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
}
.dynamic-island-surface {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  background: transparent;
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
  user-select: none;
}
.openbot-dynamic-island-transition-root {
  display: contents;
}
.dynamic-island-mode-swap {
  position: relative;
  min-width: 0;
  display: inline-grid;
  align-items: center;
}
.dynamic-island-mode-swap-block {
  width: 100%;
  display: grid;
  align-items: stretch;
}
.dynamic-island-mode-layer {
  min-width: 0;
  display: inline-flex;
  grid-area: 1 / 1;
  align-items: center;
  transform-origin: center;
}
.dynamic-island-mode-swap-block > .dynamic-island-mode-layer {
  width: 100%;
  display: block;
}
.dynamic-island-mode-layer-outgoing {
  position: absolute;
  z-index: 1;
  top: 0;
  pointer-events: none;
}
.dynamic-island-mode-swap[data-island-mode-slot="compact-leading"] > .dynamic-island-mode-layer-outgoing {
  right: 0;
}
.dynamic-island-external .dynamic-island-mode-swap[data-island-mode-slot="compact-leading"] > .dynamic-island-mode-layer-outgoing {
  right: auto;
  left: 0;
}
.dynamic-island-mode-swap[data-island-mode-slot="compact-trailing"] > .dynamic-island-mode-layer-outgoing {
  left: 0;
}
.dynamic-island-external .dynamic-island-mode-swap[data-island-mode-slot="compact-trailing"] > .dynamic-island-mode-layer-outgoing {
  right: 0;
  left: auto;
}
.dynamic-island-mode-swap-block > .dynamic-island-mode-layer-outgoing {
  inset: 0;
}
.openbot-dynamic-island-transition-root[data-mode-transitioning="true"] .dynamic-island-mode-layer {
  will-change: opacity, transform;
}
.openbot-dynamic-island-transition-root[data-mode-transitioning="true"] .dynamic-island-mode-layer[data-island-mode-layer="incoming"] {
  opacity: 0;
  transform: none;
}
.openbot-dynamic-island-transition-root[data-mode-transitioning="true"] .dynamic-island-mode-swap[data-island-mode-slot="expanded"] > .dynamic-island-mode-layer[data-island-mode-layer="incoming"] {
  transform: scale(0.965);
}
.openbot-dynamic-island-transition-root[data-mode-transitioning="true"] .dynamic-island[data-layout-state="expanded"] .dynamic-island-mode-swap[data-island-mode-slot="compact-leading"] > .dynamic-island-mode-layer[data-island-mode-layer="incoming"] {
  transform: none;
}
.openbot-dynamic-island-transition-root[data-mode-transitioning="true"] .dynamic-island-mode-layer[data-island-mode-layer="incoming"] [data-island-motion-content] {
  filter: blur(4px);
}
.dynamic-island-surface-anchor {
  width: fit-content;
  height: fit-content;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
}
.dynamic-island-surface-logo {
  width: 100%;
  height: 100%;
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-xs);
  transition: border-radius var(--openbot-duration-slow) var(--openbot-ease-out), filter var(--openbot-duration-slow) var(--openbot-ease-out), scale var(--openbot-duration-slow) var(--openbot-ease-out);
}
.dynamic-island-shell[data-compact-resize] .dynamic-island-surface-logo {
  --app-logo-eye-squint: calc(1 - 0.45 * var(--dynamic-island-compact-motion, 1));
  filter: blur(calc(0.8px * var(--dynamic-island-compact-motion, 1)));
  scale: calc(1 - 0.03 * var(--dynamic-island-compact-motion, 1));
}
.dynamic-island-shell[data-compact-motion="large"] .dynamic-island-surface-logo {
  border-radius: var(--openbot-radius-sm);
}
.dynamic-island-external.dynamic-island-idle .dynamic-island-surface-logo {
  transform: translateX(4px);
}
.dynamic-island-surface-leading-anchor {
  position: relative;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
}
.dynamic-island-idle .dynamic-island-trailing-content {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.dynamic-island-surface-idle-greeting {
  position: relative;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  display: block;
  flex: 0 0 auto;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  font-size: var(--openbot-text-xl);
  line-height: 1;
  transition: opacity var(--openbot-duration-slow) var(--openbot-ease-out), scale var(--openbot-duration-slow) var(--openbot-ease-out);
}
.dynamic-island-shell[data-compact-resize] .dynamic-island-surface-idle-greeting {
  opacity: calc(1 - 0.1 * var(--dynamic-island-compact-motion, 1));
}
.dynamic-island-shell[data-compact-settled] .dynamic-island-surface-idle-greeting {
  animation: dynamic-island-greeting-pop 600ms var(--dynamic-island-greeting-pop-ease);
}
.dynamic-island-shell {
  --dynamic-island-greeting-pop-ease: linear(
    0,
    0.571 4.2%,
    1.01 8.3%,
    1.306 12.5%,
    1.467 16.7%,
    1.517 20.8%,
    1.485 25.0%,
    1.403 29.2%,
    1.297 33.3%,
    1.188 37.5%,
    1.09 41.7%,
    1.013 45.8%,
    0.96 50.0%,
    0.928 54.2%,
    0.916 58.3%,
    0.919 62.5%,
    0.931 66.7%,
    0.947 70.8%,
    0.965 75.0%,
    0.982 79.2%,
    0.995 83.3%,
    1.005 87.5%,
    1.011 91.7%,
    1.013 95.8%,
    1
  );
}
@keyframes dynamic-island-greeting-pop {
  from {
    opacity: 0.9;
    scale: 0.98;
    rotate: -1deg;
  }
  to {
    opacity: 1;
    scale: 1;
    rotate: 0deg;
  }
}
.dynamic-island-surface-idle-greeting-layer {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 600ms var(--openbot-ease-in-out), scale 650ms var(--openbot-ease-in-out), filter 600ms var(--openbot-ease-in-out);
}
@media (prefers-reduced-motion: no-preference) {
  .dynamic-island-surface-idle-greeting-layer:not([data-active]) {
    scale: 0.88;
    filter: blur(2px);
  }
}
.dynamic-island-external.dynamic-island-idle .dynamic-island-surface-idle-greeting-layer {
  transform: translateX(-6px);
}
.dynamic-island-surface-idle-greeting[data-active-slot="0"] .dynamic-island-surface-idle-greeting-layer:first-child, .dynamic-island-surface-idle-greeting[data-active-slot="1"] .dynamic-island-surface-idle-greeting-layer:last-child {
  opacity: 1;
}
.dynamic-island-surface-idle-greeting-layer {
  perspective: 60px;
}
.dynamic-island-surface-idle-greeting-card {
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
}
.dynamic-island-surface-idle-greeting-face {
  grid-area: 1 / 1;
  backface-visibility: hidden;
}
.dynamic-island-surface-idle-greeting-face-back {
  transform: rotateY(180deg);
}
.dynamic-island-surface-idle-greeting-face:has(.dynamic-island-surface-idle-greeting-sparkle) {
  display: grid;
}
.dynamic-island-surface-idle-greeting-sparkle {
  grid-area: 1 / 1;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}
.dynamic-island-surface-idle-greeting-sparkle-large {
  transform-origin: 60% 48%;
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cpath%20d='M60%207.9Q70.3%2036.0%2094.2%2048Q70.3%2060.0%2060%2088.1Q49.7%2060.0%2025.8%2048Q49.7%2036.0%2060%207.9Z'/%3E%3C/svg%3E");
}
.dynamic-island-surface-idle-greeting-sparkle-upper {
  transform-origin: 24% 28%;
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cpath%20d='M24%207.4Q28.2%2021.8%2038.2%2028Q28.2%2034.2%2024%2048.6Q19.8%2034.2%209.8%2028Q19.8%2021.8%2024%207.4Z'/%3E%3C/svg%3E");
}
.dynamic-island-surface-idle-greeting-sparkle-lower {
  transform-origin: 36% 70%;
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cpath%20d='M36%2051.1Q40.8%2064.3%2051.9%2070Q40.8%2075.7%2036%2088.9Q31.2%2075.7%2020.1%2070Q31.2%2064.3%2036%2051.1Z'/%3E%3C/svg%3E");
}
.dynamic-island-surface-avatar-stack {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.dynamic-island-surface-avatar-stack-item {
  display: inline-flex;
  flex: 0 0 auto;
}
.dynamic-island-surface-avatar-stack > :not(:first-child) {
  margin-left: -6px;
}
.dynamic-island-surface-avatar-stack > * {
  transform: translate3d(0, 0, 0);
  transform-origin: center;
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out), transform 450ms var(--dynamic-island-shared-ease);
}
.dynamic-island-surface-avatar {
  --agent-avatar-optical-offset: -3px;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border: 1px solid var(--openbot-bg-notch);
  border-radius: var(--openbot-radius-pill);
}
.dynamic-island-surface-compact-identity {
  white-space: nowrap;
}
.dynamic-island-surface-compact-name {
  position: absolute;
  top: 50%;
  left: calc(100% + var(--openbot-space-1-5));
  width: max-content;
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-sm);
  text-align: left;
  text-overflow: ellipsis;
  transform: translateY(-50%);
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}
.dynamic-island-surface-status-badge {
  font-weight: var(--openbot-weight-semibold);
}
.dynamic-island-surface-status-badge-label {
  min-width: 0;
  display: inline-block;
  overflow: hidden;
}
.dynamic-island-surface-status-badge-icon {
  stroke-width: var(--openbot-icon-stroke);
}
.dynamic-island-surface-question-badge {
  background: var(--openbot-question-badge-soft);
  color: var(--openbot-question-badge-text);
}
.dynamic-island-surface-message-badge {
  background: var(--openbot-message-badge-soft);
  color: var(--openbot-message-badge-text);
}
.dynamic-island-surface-working-badge .ui-spinner {
  border-color: var(--openbot-success-soft);
  border-top-color: currentColor;
}
.dynamic-island[data-layout-state="expanded"] .dynamic-island-surface-compact-name {
  opacity: 0;
}
.dynamic-island-surface-leading-anchor .dynamic-island-surface-avatar {
  width: 100%;
  height: 100%;
}
.dynamic-island-surface-avatar-stack .dynamic-island-surface-avatar {
  width: 20px;
  height: 20px;
}
.dynamic-island-working[data-state="expanded"] .dynamic-island-surface-avatar-stack > * {
  transition-duration: var(--openbot-duration-fast), var(--dynamic-island-shared-duration);
}
.dynamic-island-working[data-state="expanded"] .dynamic-island-surface-avatar-stack > :nth-child(2) {
  transform: translate3d(-14px, 28.75px, 0);
}
.dynamic-island-working[data-state="expanded"] .dynamic-island-surface-avatar-stack > :nth-child(3) {
  transform: translate3d(-28px, 57.5px, 0);
}
@media (prefers-reduced-motion: reduce) {
  .dynamic-island-surface-avatar-stack > * {
    transition-duration: var(--openbot-duration-hover);
  }
}
.dynamic-island-surface-approval-badge {
  background: var(--openbot-approval-badge-soft);
  color: var(--openbot-warning);
}
.dynamic-island-surface-takeover-badge {
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
}
.dynamic-island-surface-content-swap {
  min-width: 0;
  display: flex;
}
.dynamic-island-surface-content-swap[data-swap-phase="update"] {
  animation: dynamic-island-surface-swap var(--text-swap-dur) var(--text-swap-ease) both;
}
.dynamic-island-surface-compact-swap {
  align-items: center;
}
.dynamic-island-surface-panel {
  display: grid;
  gap: 10px;
}
.dynamic-island-surface-list {
  display: grid;
  gap: 2px;
}
.dynamic-island-surface-row {
  min-width: 0;
  width: calc(100% + 2 * var(--openbot-space-2));
  height: auto;
  min-height: 44px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: var(--openbot-space-2);
  margin-inline: calc(-1 * var(--openbot-space-2));
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  color: inherit;
  cursor: pointer;
  font: inherit;
  outline: none;
  text-align: left;
  transition: background-color var(--openbot-duration-normal) var(--openbot-ease-out), transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.dynamic-island-surface-row .dynamic-island-surface-avatar, .dynamic-island-surface-working-avatar-slot {
  width: 32px;
  height: 32px;
}
@media (hover: hover) and (pointer: fine) {
  .dynamic-island-surface-row:hover {
    background: var(--openbot-hover);
  }
}
.dynamic-island-surface-row:active {
  transform: scale(0.98);
}
.dynamic-island-surface-row:focus-visible {
  background: var(--openbot-hover);
  box-shadow: inset 0 0 0 1px var(--openbot-border-focus), 0 0 0 3px var(--openbot-accent-soft);
}
.dynamic-island-surface-row-group {
  position: relative;
  min-width: 0;
}
.dynamic-island-surface-row-group:has(.dynamic-island-surface-row-stop) .dynamic-island-surface-row {
  padding-right: calc(var(--openbot-control-sm) + var(--openbot-space-2));
}
.dynamic-island-surface-row-stop {
  position: absolute;
  top: 50%;
  right: 0;
  color: var(--openbot-text-muted);
  transform: translateY(-50%);
}
@media (hover: hover) and (pointer: fine) {
  .dynamic-island-surface-row-stop:hover {
    color: var(--openbot-danger-text);
  }
}
.dynamic-island-surface-row-copy {
  min-width: 0;
  width: 100%;
  display: grid;
  gap: 1px;
}
.dynamic-island-surface-row strong {
  overflow: hidden;
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dynamic-island-surface-row small {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dynamic-island-message-first-panel {
  display: grid;
  gap: var(--openbot-space-3);
}
.dynamic-island-message-first-unread {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
  font-variant-numeric: tabular-nums;
  line-height: var(--openbot-leading-sm);
}
.dynamic-island-message-first-footer {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  border-top: 1px solid var(--openbot-border);
  padding-top: var(--openbot-space-2);
}
.dynamic-island-message-first-footer .ui-button {
  min-width: 92px;
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.dynamic-island-message-first-footer .ui-button:active {
  transform: scale(0.96);
}
.dynamic-island-message-first-footer svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.dynamic-island-surface-attention-panel {
  gap: var(--openbot-space-3);
}
.dynamic-island-reply {
  position: relative;
  min-width: 0;
  display: grid;
  gap: var(--openbot-space-1-5);
  margin: 0;
}
.dynamic-island-reply .dynamic-island-reply-input {
  height: var(--openbot-control-md);
  border-color: var(--openbot-border);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-hover);
  padding-right: calc(var(--openbot-control-md) + var(--openbot-space-1));
  padding-left: var(--openbot-space-3);
  font-size: var(--openbot-text-sm);
  user-select: text;
}
.dynamic-island-reply .dynamic-island-reply-input:focus-visible {
  border-color: var(--openbot-border-focus);
}
.dynamic-island-reply-send {
  position: absolute;
  top: calc((var(--openbot-control-md) - var(--openbot-control-xs)) / 2);
  right: calc((var(--openbot-control-md) - var(--openbot-control-xs)) / 2);
  border-radius: var(--openbot-radius-pill);
}
.dynamic-island-reply-send svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.dynamic-island-surface-question-step .dynamic-island-reply {
  margin-top: 6px;
}
.dynamic-island-surface-request-copy {
  min-width: 0;
  width: 100%;
  display: grid;
  gap: var(--openbot-space-2);
}
.dynamic-island-surface-command {
  min-width: 0;
  display: grid;
  gap: 3px;
  border-left: 1px solid var(--openbot-warning);
  padding: 2px 0 2px 10px;
}
.dynamic-island-surface-command-meta {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.dynamic-island-surface-command-meta small, .dynamic-island-surface-command-meta span {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dynamic-island-surface-command-meta small {
  flex: 0 0 auto;
}
.dynamic-island-surface-command-meta span {
  min-width: 0;
  text-align: right;
}
.dynamic-island-surface-command code {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dynamic-island-surface-context-line {
  min-width: 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--openbot-space-2);
  align-items: baseline;
}
.dynamic-island-surface-context-line small, .dynamic-island-surface-more {
  color: var(--openbot-text-dim);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
div.dynamic-island-surface-context-line span {
  overflow: hidden;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dynamic-island-surface-question-options {
  min-width: 0;
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dynamic-island-surface-question-options > li {
  min-width: 0;
}
.dynamic-island-surface-question-options button {
  width: 100%;
  min-height: 48px;
  min-width: 0;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: var(--openbot-space-2);
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-question-option-soft);
  padding: 7px 10px;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  outline: none;
  transition: background-color var(--openbot-duration-fast) var(--openbot-ease-out), transform var(--openbot-duration-fast) var(--openbot-ease-out);
}
.dynamic-island-surface-question-option-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.dynamic-island-surface-question-option-copy strong, .dynamic-island-surface-question-option-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dynamic-island-surface-question-option-copy strong {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
}
.dynamic-island-surface-question-option-copy small {
  min-width: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.dynamic-island-surface-question-option-index {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-question-option-hover);
  color: var(--openbot-question-option);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
@media (hover: hover) and (pointer: fine) {
  .dynamic-island-surface-question-options button:hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-question-option-hover);
  }
}
.dynamic-island-surface-question-options button:active:not(:disabled):not([data-disabled]) {
  background: var(--openbot-question-option-pressed);
  transform: scale(0.96);
}
.dynamic-island-surface-question-options button:focus-visible {
  box-shadow: inset 0 0 0 1px var(--openbot-question-option), 0 0 0 3px var(--openbot-question-option-soft);
}
.dynamic-island-surface-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-1);
  border-top: 1px solid var(--openbot-border);
  padding-top: var(--openbot-space-2);
}
.dynamic-island-surface-action-error {
  min-width: 0;
  margin: 0 auto 0 0;
  flex: 1 1 auto;
  align-self: center;
  color: var(--openbot-danger-text);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.dynamic-island-surface-actions svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.dynamic-island-surface-attention-panel .ui-button {
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.dynamic-island-surface-attention-panel .ui-button:active {
  transform: scale(0.96);
}
.dynamic-island-surface-question-panel {
  gap: 10px;
}
.dynamic-island-surface-question-progress {
  display: inline-flex;
  align-items: baseline;
  padding-top: 2px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  line-height: var(--openbot-leading-sm);
  white-space: nowrap;
}
.dynamic-island-surface-question-progress-stack {
  position: relative;
  width: 1.5em;
  display: inline-grid;
  overflow: hidden;
  text-align: right;
}
.dynamic-island-surface-question-progress-digit {
  grid-area: 1 / 1;
  display: inline-block;
  text-align: right;
  will-change: transform, opacity, filter;
}
.dynamic-island-surface-question-progress-digit.is-outgoing {
  position: absolute;
  inset: 0;
}
.dynamic-island-surface-question-step {
  width: 100%;
  min-width: 0;
}
.dynamic-island-surface-question-actions {
  align-items: center;
}
.dynamic-island-surface-question-actions .dynamic-island-surface-more {
  margin-right: auto;
}
.dynamic-island-surface-animated-row {
  animation: dynamic-island-surface-row-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}
.dynamic-island-surface-row-group:nth-child(2) .dynamic-island-surface-animated-row {
  animation-delay: 40ms;
}
.dynamic-island-surface-row-group:nth-child(3) .dynamic-island-surface-animated-row {
  animation-delay: 80ms;
}
@keyframes dynamic-island-surface-swap {
  from {
    opacity: 0;
    filter: blur(var(--text-swap-blur));
    transform: translateY(calc(var(--text-swap-translate-y) * -1)) scale(0.98);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}
@keyframes dynamic-island-surface-row-in {
  from {
    opacity: 0;
    filter: blur(var(--text-swap-blur));
    transform: translateY(var(--text-swap-translate-y)) scale(0.98);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}
.sidebar-mobile-app {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: var(--openbot-space-2);
  margin: var(--openbot-space-2) var(--openbot-space-3);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  padding: var(--openbot-space-3);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.sidebar-mobile-app-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-2);
}
.sidebar-mobile-app-header > strong {
  overflow: hidden;
  font-weight: var(--openbot-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-mobile-app-icon {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  color: var(--openbot-text-secondary);
}
.sidebar-mobile-app-dismiss {
  margin-right: calc(var(--openbot-space-1) * -1);
  color: var(--openbot-text-muted);
}
.sidebar-mobile-app-body {
  margin: 0;
  color: var(--openbot-text-muted);
}
.sidebar-mobile-app > .ui-button {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-community-actions {
  display: flex;
  gap: var(--openbot-space-1-5);
}
.sidebar-community-actions > .ui-button:first-child {
  flex: 1 1 auto;
  min-width: 0;
}
.sidebar-community-mark {
  flex: 0 0 auto;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
* {
  box-sizing: border-box;
}
html, body, #root {
  width: 100%;
  height: 100%;
  min-width: 0;
  margin: 0;
  overflow: hidden;
}
body {
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
  -webkit-font-smoothing: antialiased;
}
button, input, textarea {
  font: inherit;
}
.account-login-screen, .initial-setup-screen {
  position: absolute;
  z-index: var(--openbot-layer-dialog);
  inset: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow-y: auto;
  -webkit-app-region: drag;
}
.account-login-screen {
  padding: 32px 24px;
  background: var(--openbot-bg-canvas);
}
.initial-setup-screen {
  padding: 52px 24px 32px;
  background: radial-gradient(circle at 50% 18%, var(--openbot-hover), transparent 34%), var(--openbot-bg-canvas);
}
.account-login-shell {
  width: min(100%, 360px);
  display: flex;
  flex-direction: column;
  -webkit-app-region: no-drag;
}
.account-login-brand-lockup {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 24px;
  margin-bottom: 42px;
}
.account-login-logo {
  display: block;
  width: 80px;
  height: 80px;
}
.account-login-wordmark {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-display);
  font-weight: 620;
  letter-spacing: -0.015em;
  line-height: var(--openbot-leading-display);
}
.account-login {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: center;
}
.account-login h1 {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-3xl);
  font-weight: 580;
  letter-spacing: -0.035em;
  line-height: 30px;
}
.account-login-description {
  margin: 8px 0 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-lg);
  line-height: 21px;
}
.account-login-description strong {
  color: var(--openbot-text-primary);
  font-weight: 560;
}
.account-login-error {
  margin: 0;
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
  line-height: 17px;
  text-align: left;
}
.account-login > .account-login-error {
  margin-top: 18px;
}
.account-login-loader {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 28px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
}
.account-login-spinner, .account-login-button-spinner {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  border: 1.5px solid var(--openbot-border-strong);
  border-top-color: currentColor;
  border-radius: var(--openbot-radius-pill);
  animation: account-login-spin 900ms linear infinite;
}
.account-login-button-spinner {
  width: 13px;
  height: 13px;
}
.account-login-primary {
  width: 100%;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-surface-light);
  color: var(--openbot-text-on-light);
  font-size: var(--openbot-text-md);
  font-weight: 650;
  transition: background-color var(--openbot-duration-hover) ease, border-color var(--openbot-duration-hover) ease, transform var(--openbot-duration-fast) cubic-bezier(0.23, 1, 0.32, 1);
}
.account-login > .account-login-primary {
  margin-top: 30px;
}
@keyframes account-login-spin {
  to {
    transform: rotate(360deg);
  }
}
.account-login-form {
  width: 100%;
  display: grid;
  gap: 12px;
  margin-top: 24px;
}
.account-login-local-data {
  margin: 4px 0 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 17px;
  text-align: center;
  text-wrap: balance;
}
.account-login-local-data svg {
  display: inline-block;
  margin-right: 6px;
  vertical-align: -2px;
}
.account-login-email-field {
  display: grid;
  gap: 12px;
}
.account-login-form input:not(.otp-input-native) {
  width: 100%;
  height: 44px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  outline: 0;
  background: var(--openbot-bg-control);
  padding: 0 12px;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  transition: border-color var(--openbot-duration-hover) ease, background-color var(--openbot-duration-hover) ease, box-shadow var(--openbot-duration-hover) ease;
}
.account-login-form input:not(.otp-input-native):focus {
  border-color: var(--openbot-border-focus);
  background: var(--openbot-bg-surface);
  box-shadow: 0 0 0 3px var(--openbot-accent-soft);
}
.account-login-form input:not(.otp-input-native)[aria-invalid="true"] {
  border-color: var(--openbot-danger);
}
.account-login-form input:not(.otp-input-native)::placeholder {
  color: var(--openbot-text-placeholder);
}
.account-login-field-error {
  height: 16px;
  overflow: hidden;
  margin: -2px 0 0;
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-login-form input:not(.otp-input-native).t-input.is-error {
  border-color: var(--openbot-danger);
}
.account-login-primary:disabled, .account-login-primary[aria-disabled="true"], .account-login-code-action:disabled, .account-login-code-action[aria-disabled="true"] {
  cursor: default;
  opacity: 0.48;
}
.account-login-code-actions {
  width: 100%;
  min-height: var(--openbot-control-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.account-login-code-action {
  width: auto;
}
.account-login-code-action-change {
  justify-content: flex-start;
}
.account-login-code-action-resend {
  justify-content: flex-end;
}
.account-login-development-code {
  margin: 0;
  color: var(--openbot-warning);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--openbot-text-sm);
  line-height: 16px;
  text-align: left;
}
@media (hover: hover) and (pointer: fine) {
  .account-login-primary:hover:not(:disabled, [aria-disabled="true"]) {
    background: var(--openbot-text-primary);
  }
  .account-login-form input:not(.otp-input-native):hover:not(:focus) {
    border-color: var(--openbot-border-strong);
    background: var(--openbot-bg-surface);
  }
}
.account-login-primary:active:not(:disabled, [aria-disabled="true"]) {
  transform: scale(0.98);
}
.initial-setup {
  width: min(100%, 620px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  -webkit-app-region: no-drag;
}
.initial-setup-header {
  max-width: 560px;
}
.initial-setup-account-row {
  min-height: 28px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
}
.initial-setup-account {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.initial-setup-account i {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success);
  box-shadow: 0 0 0 3px var(--openbot-success-soft);
}
.initial-setup-signout, .initial-setup-back {
  border: 0;
  background: transparent;
  color: var(--openbot-text-muted);
}
.initial-setup-signout {
  margin-left: 2px;
  padding: 5px 7px;
  font-size: var(--openbot-text-sm);
}
.initial-setup-signout:hover, .initial-setup-back:hover {
  color: var(--openbot-text-secondary);
}
.initial-setup-back {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  margin-right: 3px;
  border-radius: var(--openbot-radius-pill);
  padding: 0;
}
.initial-setup-back:hover {
  background: var(--openbot-hover);
}
.initial-setup-back svg {
  width: 18px;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}
.initial-setup-eyebrow {
  margin: 0 0 9px;
  color: var(--text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.initial-setup h1 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--openbot-text-display);
  font-weight: 560;
  letter-spacing: -0.035em;
  line-height: 1.1;
}
.initial-setup-intro {
  max-width: 540px;
  margin: 12px 0 0;
  color: var(--text-secondary);
  font-size: var(--openbot-text-lg);
  line-height: 1.55;
}
.setup-route-list {
  display: grid;
  gap: 10px;
  margin-top: 30px;
  padding: 0;
  list-style: none;
}
.setup-route-button {
  width: 100%;
  min-height: 96px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 15px;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-canvas);
  padding: 15px 17px;
  color: var(--openbot-text-primary);
  text-align: left;
  transition: border-color var(--openbot-duration-hover) ease, background-color var(--openbot-duration-hover) ease, transform var(--openbot-duration-hover) ease;
}
.setup-route-button:hover {
  border-color: var(--openbot-text-dim);
  background: var(--openbot-bg-sidebar);
  transform: translateY(-1px);
}
.setup-route-button:active {
  transform: translateY(0);
  transition-duration: var(--openbot-duration-hover), var(--openbot-duration-hover), var(--openbot-duration-fast);
}
.setup-route-icon {
  position: relative;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-hover);
  color: var(--openbot-text-secondary);
}
.setup-route-icon svg {
  width: 23px;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}
.setup-route-icon i {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--openbot-bg-canvas);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
}
.setup-route-icon-local i {
  background: var(--openbot-success);
}
.setup-route-copy {
  display: grid;
  gap: 4px;
}
.setup-route-copy strong {
  font-size: var(--openbot-text-lg);
  font-weight: 600;
}
.setup-route-copy small {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 17px;
}
.setup-route-arrow {
  width: 19px;
  fill: none;
  stroke: var(--openbot-text-muted);
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--openbot-duration-hover) ease;
}
.setup-route-button:hover .setup-route-arrow {
  transform: translateX(2px);
}
.setup-local-content {
  margin-top: 28px;
}
.setup-remote-form {
  display: grid;
  gap: 15px;
  margin-top: 28px;
}
.setup-remote-form label {
  display: grid;
  gap: 7px;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: 560;
}
.setup-remote-form input, .setup-remote-form textarea {
  width: 100%;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  outline: 0;
  background: var(--openbot-bg-canvas);
  padding: 11px 12px;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: 18px;
  resize: none;
}
.setup-remote-form input {
  min-height: 43px;
}
.setup-remote-form input:focus, .setup-remote-form textarea:focus {
  border-color: var(--openbot-text-dim);
  background: var(--openbot-bg-sidebar);
}
.setup-remote-form input::placeholder, .setup-remote-form textarea::placeholder {
  color: var(--openbot-text-dim);
}
.setup-remote-note {
  margin: -2px 1px 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
}
.setup-remote-change {
  width: fit-content;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.setup-remote-change:hover:not(:disabled) {
  color: var(--openbot-text-secondary);
}
.provider-picker {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}
.provider-picker-standalone {
  margin-top: 24px;
}
.setup-local-content .provider-picker-standalone {
  margin-top: 0;
}
.provider-picker-label {
  margin-bottom: 7px;
  padding: 0;
  color: var(--text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: 560;
}
.provider-picker-heading {
  display: flex;
  min-height: 25px;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  margin-bottom: 7px;
}
.provider-picker-heading .provider-picker-label {
  margin-bottom: 0;
}
.ui-button.provider-picker-refresh {
  min-height: 25px;
  gap: var(--openbot-space-1);
  border-radius: var(--openbot-radius-md);
  color: var(--openbot-text-muted);
  padding-inline: var(--openbot-space-2);
}
.ui-button.provider-picker-refresh:hover:not(:disabled, [aria-disabled="true"]) {
  color: var(--openbot-text-primary);
}
.provider-picker-list {
  overflow: hidden;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-sidebar);
}
.provider-picker-option {
  min-height: 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  color: var(--text-primary);
}
.provider-picker-option-selection {
  min-width: 0;
  min-height: 44px;
  display: grid;
  grid-template-columns: 16px 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0 8px 12px;
  cursor: pointer;
}
.provider-picker-option + .provider-picker-option, .provider-picker-option-custom {
  border-top: 1px solid var(--openbot-border);
}
.provider-picker-option:hover:not(.provider-picker-option-unavailable), .provider-picker-option:focus-within {
  background: var(--openbot-hover);
}
.provider-picker-option-selected {
  background: var(--openbot-hover);
}
.provider-picker-option-unavailable {
  color: var(--openbot-text-muted);
}
.provider-picker-option-unavailable .provider-picker-option-selection {
  cursor: default;
}
.provider-picker-option-selectable-unavailable .provider-picker-option-selection {
  cursor: pointer;
}
.provider-picker-option-selectable-unavailable:hover {
  background: var(--openbot-hover);
}
.provider-picker-option input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--openbot-text-primary);
}
.provider-picker-actions {
  display: flex;
  align-items: center;
}
.ui-button.provider-picker-install {
  min-width: 58px;
  min-height: 28px;
  margin-right: 8px;
  border-radius: var(--openbot-radius-md);
  padding-inline: 9px;
}
.ui-button.provider-picker-connect {
  background: var(--openbot-accent);
  color: var(--openbot-text-primary);
}
@media (hover: hover) and (pointer: fine) {
  .ui-button.provider-picker-connect:hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-accent-hover);
  }
}
.provider-picker-logo {
  width: 18px;
  height: 18px;
  overflow: visible;
  fill: var(--openbot-provider-current);
}
.provider-picker-custom-mark {
  width: 18px;
  height: 18px;
  grid-column: 2;
  color: var(--openbot-text-secondary);
  stroke-width: var(--openbot-icon-stroke);
}
.provider-picker-option-unavailable .provider-picker-logo, .provider-picker-option-unavailable .provider-picker-custom-mark {
  opacity: 0.44;
}
.provider-picker-option-runtime {
  color: var(--openbot-text-primary);
}
.provider-picker-option-runtime .provider-picker-logo {
  opacity: 1;
}
.provider-picker-identity {
  display: grid;
  min-width: 0;
}
.provider-picker-name, .provider-picker-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.provider-picker-name {
  font-size: var(--openbot-text-md);
  font-weight: 530;
  line-height: 18px;
}
.provider-picker-email {
  color: var(--text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 15px;
}
.provider-picker-check-error {
  overflow: hidden;
  color: var(--openbot-warning);
  font-size: var(--openbot-text-sm);
  line-height: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.provider-picker-status-message {
  overflow: visible;
  white-space: normal;
}
.provider-picker-check-error.provider-picker-used-by {
  grid-column: 1 / -1;
  overflow: visible;
  margin-top: -6px;
  padding: 0 0 8px 66px;
  white-space: normal;
}
.provider-picker-option-selected .provider-picker-email {
  color: var(--openbot-text-readable);
}
.provider-picker-add-account svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.provider-picker-accounts {
  grid-column: 1 / -1;
  display: grid;
  gap: 4px;
  margin-top: -6px;
  padding: 0 0 8px 66px;
}
.provider-picker-account-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.provider-picker-account {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}
.provider-picker-account + .provider-picker-account {
  border-top: 1px solid var(--openbot-border);
}
.provider-picker-account-copy {
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  gap: 2px;
}
.provider-picker-account .provider-picker-check-error {
  white-space: normal;
}
.provider-picker-account-rename {
  max-width: 220px;
}
.provider-picker-state {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.provider-picker-version {
  overflow: hidden;
  color: var(--text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.provider-picker-option-selected .provider-picker-version {
  color: var(--openbot-text-readable);
}
.provider-picker-status {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
  white-space: nowrap;
}
.provider-picker-custom-count {
  color: var(--text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
  white-space: nowrap;
}
.ui-button.provider-picker-custom-count {
  min-height: 28px;
  margin-right: 8px;
  border-radius: var(--openbot-radius-md);
  padding-inline: 9px;
  color: var(--text-muted);
  font-size: var(--openbot-text-sm);
}
.provider-picker-status-available {
  color: var(--openbot-success);
}
.provider-picker-status-sign-in-required, .provider-picker-status-outdated, .provider-picker-status-update-available {
  color: var(--openbot-warning);
}
.provider-picker-status-ready {
  color: var(--openbot-success);
}
.provider-picker-status-download-error {
  color: var(--openbot-danger);
}
.provider-picker-status-finishing {
  color: var(--openbot-warning);
}
.provider-picker-status-not-installed, .provider-picker-status-checking, .provider-picker-status-error {
  color: var(--openbot-text-muted);
}
.provider-picker-status i {
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-dim);
}
.provider-picker-status-available i {
  background: var(--openbot-success);
}
.provider-picker-status-sign-in-required i, .provider-picker-status-outdated i, .provider-picker-status-update-available i {
  background: var(--openbot-warning);
}
.provider-picker-status-not-installed i, .provider-picker-status-checking i, .provider-picker-status-error i {
  background: var(--openbot-text-dim);
}
.provider-picker-hint {
  margin: 7px 0 0;
  color: var(--text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
}
.provider-picker-footer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  margin-top: 7px;
}
.provider-picker-footer .provider-picker-hint {
  margin: 0;
}
.ui-button.provider-picker-more {
  flex: 0 0 auto;
  gap: var(--openbot-space-1-5);
  margin-inline-start: auto;
  margin-inline-end: calc(var(--openbot-space-2) * -1);
}
.provider-picker-logo-stack {
  position: relative;
  z-index: 0;
  display: inline-flex;
}
.provider-picker-logo-stack-mark {
  position: relative;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control-active);
  box-shadow: 0 0 0 2px var(--openbot-bg-canvas);
}
.provider-picker-logo-stack-mark + .provider-picker-logo-stack-mark {
  z-index: -1;
  margin-inline-start: -4px;
}
.provider-picker-logo-stack-mark .provider-picker-logo {
  width: 12px;
  height: 12px;
}
.custom-provider-backdrop.provider-more-backdrop {
  align-items: start;
  padding-top: min(14vh, 120px);
}
.custom-provider-dialog.provider-more-dialog {
  width: min(400px, 100%);
  max-height: min(600px, calc(100dvh - min(14vh, 120px) - var(--openbot-space-6)));
  padding: var(--openbot-space-2);
}
.provider-more-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-3);
}
.provider-more-title {
  margin: 0;
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
}
.ui-input.provider-more-search {
  flex-shrink: 0;
  margin: var(--openbot-space-1) 0 var(--openbot-space-2);
}
.provider-more-search::-webkit-search-cancel-button {
  appearance: none;
}
.provider-more-list {
  min-height: 0;
  overflow-y: auto;
}
.ui-button.provider-more-row {
  width: 100%;
  height: auto;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  justify-content: stretch;
  align-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  border: 0;
  border-radius: var(--openbot-radius-md);
  color: inherit;
  font: inherit;
  line-height: normal;
  text-align: left;
  white-space: normal;
}
.ui-button.provider-more-row:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: -2px;
}
.provider-more-row .provider-picker-custom-mark {
  grid-column: auto;
}
.provider-more-divider {
  height: 1px;
  margin: var(--openbot-space-1) var(--openbot-space-3);
  border: 0;
  background: var(--openbot-border);
}
.provider-more-empty {
  margin: 0;
  padding: var(--openbot-space-2) var(--openbot-space-3);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.initial-setup-error {
  margin: 12px 2px 0;
  color: var(--openbot-danger);
  font-size: var(--openbot-text-md);
  line-height: 1.45;
}
.initial-setup-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 20px;
}
.initial-setup-save {
  min-height: 40px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  padding: 12px 18px;
  font-size: var(--openbot-text-md);
  font-weight: 620;
  min-width: 180px;
  background: var(--openbot-text-primary);
  color: var(--openbot-bg-sidebar);
  transition: transform var(--openbot-duration-normal) ease, background var(--openbot-duration-hover) ease;
}
.initial-setup-save:hover:not(:disabled) {
  background: var(--openbot-text-primary);
}
.initial-setup-save:disabled {
  cursor: default;
  opacity: 0.48;
}
.initial-setup-save:active:not(:disabled) {
  transform: scale(0.992);
}
@media (max-width: 620px) {
  .initial-setup-screen {
    place-items: start center;
    padding: 52px 18px 24px;
  }
  .account-login-screen {
    padding-inline: 18px;
  }
  .initial-setup-actions, .initial-setup-save {
    width: 100%;
  }
  .initial-setup-actions {
    flex-direction: column-reverse;
  }
  .setup-route-button {
    grid-template-columns: 42px minmax(0, 1fr) 18px;
    gap: 12px;
    padding-inline: 13px;
  }
  .setup-route-icon {
    width: 42px;
    height: 42px;
  }
  .initial-setup-account {
    max-width: 55vw;
  }
}
@media (max-width: 480px) {
  .account-login-screen {
    padding: 40px 20px;
  }
  .account-login-brand-lockup {
    margin-bottom: 24px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .account-login, .initial-setup {
    animation: setup-enter var(--openbot-duration-overlay) cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
  .account-login[data-transition="forward"] .account-login-title, .account-login[data-transition="forward"] .account-login-description {
    animation: account-login-copy-forward var(--openbot-duration-overlay) var(--openbot-ease-out) both;
  }
  .account-login[data-transition="back"] .account-login-title, .account-login[data-transition="back"] .account-login-description {
    animation: account-login-copy-back var(--openbot-duration-overlay) var(--openbot-ease-out) both;
  }
  .account-login[data-transition] .account-login-description {
    animation-delay: 18ms;
  }
  .account-login[data-transition="forward"] .account-login-form[data-auth-panel="code"] {
    animation: account-login-panel-forward var(--openbot-duration-overlay) 32ms var(--openbot-ease-out) both;
  }
  .account-login[data-transition="back"] .account-login-form[data-auth-panel="email"] {
    animation: account-login-panel-back var(--openbot-duration-overlay) 32ms var(--openbot-ease-out) both;
  }
  @keyframes setup-enter {
    from {
      opacity: 0;
      transform: translateY(6px);
    }
  }
  @keyframes account-login-copy-forward {
    from {
      filter: blur(4px);
      opacity: 0;
      transform: translateX(10px);
    }
  }
  @keyframes account-login-copy-back {
    from {
      filter: blur(4px);
      opacity: 0;
      transform: translateX(-10px);
    }
  }
  @keyframes account-login-panel-forward {
    from {
      filter: blur(6px);
      opacity: 0;
      transform: translateX(16px) scale(0.985);
    }
  }
  @keyframes account-login-panel-back {
    from {
      filter: blur(6px);
      opacity: 0;
      transform: translateX(-16px) scale(0.985);
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .account-login-spinner, .approval-card {
    animation: none;
  }
  .account-login[data-transition] .account-login-title, .account-login[data-transition] .account-login-description, .account-login[data-transition] .account-login-form[data-auth-panel] {
    animation: none;
  }
}
button {
  cursor: pointer;
}
button:not(.ui-button):focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}
::selection {
  background: var(--openbot-accent-strong);
}
::-webkit-scrollbar {
  width: 0;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-border-strong);
  background-clip: padding-box;
}
.scroll-fade-top:not(.scroll-fade-bottom) {
  -webkit-mask-image: linear-gradient( to bottom, transparent 0, var(--openbot-text-primary) 18px, var(--openbot-text-primary) 100% );
  mask-image: linear-gradient( to bottom, transparent 0, var(--openbot-text-primary) 18px, var(--openbot-text-primary) 100% );
}
.scroll-fade-bottom:not(.scroll-fade-top) {
  -webkit-mask-image: linear-gradient( to bottom, var(--openbot-text-primary) 0, var(--openbot-text-primary) calc(100% - 18px), transparent 100% );
  mask-image: linear-gradient( to bottom, var(--openbot-text-primary) 0, var(--openbot-text-primary) calc(100% - 18px), transparent 100% );
}
.scroll-fade-top.scroll-fade-bottom {
  -webkit-mask-image: linear-gradient( to bottom, transparent 0, var(--openbot-text-primary) 18px, var(--openbot-text-primary) calc(100% - 18px), transparent 100% );
  mask-image: linear-gradient( to bottom, transparent 0, var(--openbot-text-primary) 18px, var(--openbot-text-primary) calc(100% - 18px), transparent 100% );
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
body, .account-login-screen, .initial-setup-screen, .app-frame, .conversation-panel, .direct-conversation {
  background: var(--openbot-bg-canvas);
}
.panel-edge, .direct-conversation-header, .remote-desktop-header, .settings-panel, .browser-panel, .remote-desktop-workspace, .provider-picker-list {
  border-color: var(--openbot-border);
}
.search-field, .composer, .direct-composer, .settings-field input, .settings-field textarea, .settings-field select, .setup-remote-form input, .setup-remote-form textarea, .account-login-form input {
  border-color: var(--openbot-border);
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-primary);
}
.search-field:focus-within, .composer:focus-within, .direct-composer:focus-within, .settings-field input:focus, .settings-field textarea:focus, .settings-field select:focus, .setup-remote-form input:focus, .setup-remote-form textarea:focus, .account-login-form input:focus {
  border-color: var(--openbot-border-focus);
  background: var(--openbot-bg-surface-raised);
}
.search-field input::placeholder, .composer-editor-placeholder, .direct-composer textarea::placeholder, .settings-field input::placeholder, .settings-field textarea::placeholder, .setup-remote-form input::placeholder, .setup-remote-form textarea::placeholder, .account-login-form input::placeholder {
  color: var(--openbot-text-placeholder);
}
.provider-picker-option-selected, .provider-model-option-selected {
  border-color: var(--openbot-border-focus);
  background: var(--openbot-accent-soft);
  color: var(--openbot-text-primary);
}
.provider-picker-option, .provider-model-option {
  border-color: var(--openbot-border);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-secondary);
}
.provider-picker-option:hover:not(.provider-picker-option-unavailable), .provider-picker-option:focus-within, .provider-model-option:hover, .provider-model-option:focus-visible {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}
.voice-button, .voice-button-active, .initial-setup-save, .account-login-primary {
  background: var(--openbot-surface-light);
  color: var(--openbot-text-on-light);
}
.voice-button:hover, .voice-button-active:hover, .initial-setup-save:hover:not(:disabled), .account-login-primary:hover:not(:disabled, [aria-disabled="true"]) {
  background: var(--openbot-text-primary);
  color: var(--openbot-text-on-light);
}
.remote-desktop-overlay > button, .remote-desktop-overlay > button:hover {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}
.remote-desktop-overlay > button:hover {
  background: var(--openbot-bg-control-active);
}
.account-login-error, .initial-setup-error {
  border-color: var(--openbot-danger-soft);
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
}
.setup-route-button, .setup-route-icon, .setup-remote-form input, .setup-remote-form textarea {
  border-color: var(--openbot-border);
  background: var(--openbot-bg-surface);
}
.setup-route-button:hover, .setup-route-button:focus-visible {
  border-color: var(--openbot-border-focus);
  background: var(--openbot-bg-surface-raised);
}
.setup-route-icon-local i, .provider-picker-status-available i {
  color: var(--openbot-success);
}
.account-login-development-code, .provider-picker-status-sign-in-required i, .provider-picker-status-outdated i {
  color: var(--openbot-warning);
}
.app-loading {
  --app-loading-exit-delay: 0ms;
  --app-loading-play: running;
  --app-loading-at: 0s;
  position: absolute;
  z-index: var(--openbot-layer-dialog);
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--openbot-bg-canvas);
  -webkit-app-region: drag;
}
.app-loading-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.app-loading-row {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  padding-top: 48px;
}
.app-loading-agent {
  position: relative;
  width: 56px;
  height: 56px;
}
.app-loading-agent::after {
  position: absolute;
  z-index: -1;
  bottom: -8px;
  left: 50%;
  width: 70%;
  height: 8px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-muted);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-muted) 24%, transparent);
  }
  content: "";
  transform: translateX(-50%);
}
.app-loading-body {
  position: relative;
  width: 100%;
  height: 100%;
  transform-origin: 50% 100%;
}
.app-loading-bot {
  display: block;
  width: 100%;
  height: 100%;
}
.app-loading[data-scrub] {
  --app-loading-play: paused;
}
.app-loading-snore {
  position: absolute;
  top: 13px;
  left: 37px;
  transition: opacity var(--openbot-duration-normal) var(--openbot-ease-out);
}
.app-loading:not([data-phase="loading"]) .app-loading-snore {
  opacity: 0;
}
.app-loading-z {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 9px;
  height: 9px;
  scale: calc(0.7 + var(--app-loading-z-index) * 0.15);
  translate: calc(var(--app-loading-z-index) * 6px) calc(var(--app-loading-z-index) * -9px);
}
.app-loading-z-mark {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: var(--openbot-text-muted);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2px;
}
.app-loading-status {
  min-height: 20px;
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
}
.app-loading-line {
  display: block;
}
.app-loading:not([data-phase="loading"]) {
  pointer-events: none;
  -webkit-app-region: no-drag;
  animation: app-loading-exit var(--openbot-duration-overlay) var(--openbot-ease-in-out) var(--app-loading-exit-delay) forwards;
}
@media (prefers-reduced-motion: no-preference) {
  .app-loading[data-phase="exit"] {
    --app-loading-exit-delay: 760ms;
  }
  .app-loading-stage {
    animation: app-loading-enter var(--openbot-duration-overlay) var(--openbot-ease-out) calc(250ms - var(--app-loading-at)) both var(--app-loading-play);
  }
  .app-loading-agent:not([data-sleeper]) .app-loading-body {
    animation: app-loading-hop var(--app-loading-wave) var(--openbot-ease-in-out) calc(var(--app-loading-index) * var(--app-loading-stagger) - var(--app-loading-at)) infinite var(--app-loading-play);
  }
  .app-loading-agent:not([data-sleeper])::after {
    animation: app-loading-shadow var(--app-loading-wave) var(--openbot-ease-in-out) calc(var(--app-loading-index) * var(--app-loading-stagger) - var(--app-loading-at)) infinite var(--app-loading-play);
  }
  .app-loading-agent[data-sleeper] .app-loading-body {
    animation: app-loading-breathe 1.8s var(--openbot-ease-in-out) calc(0s - var(--app-loading-at)) infinite alternate var(--app-loading-play);
  }
  .app-loading-z {
    --app-loading-z-delay: calc(var(--app-loading-z-index) * 1.2s - var(--app-loading-at));
    opacity: 0;
    animation: app-loading-z-rise 3.6s cubic-bezier(0.33, 0.1, 0.4, 1) var(--app-loading-z-delay) infinite var(--app-loading-play), app-loading-z-fade 3.6s linear var(--app-loading-z-delay) infinite var(--app-loading-play);
  }
  .app-loading-z-mark {
    animation: app-loading-z-sway 0.9s var(--openbot-ease-in-out) var(--app-loading-z-delay) infinite alternate var(--app-loading-play);
  }
  .app-loading-line {
    animation: app-loading-line-in 280ms var(--openbot-ease-out);
  }
  .app-loading[data-scrub] .app-loading-line {
    animation: none;
  }
  .app-loading[data-phase="exit"] .app-loading-body {
    animation: app-loading-leap 640ms var(--openbot-ease-in-out) calc(var(--app-loading-index, 0) * 70ms) forwards;
  }
  .app-loading[data-phase="exit"] [data-sleeper] .app-loading-body {
    animation: app-loading-breathe 1.8s var(--openbot-ease-in-out) calc(0s - var(--app-loading-at)) infinite alternate, app-loading-drift 720ms cubic-bezier(0.5, 0, 0.9, 0.5) 200ms forwards;
  }
  .app-loading[data-phase="exit"] .app-loading-agent::after {
    animation: app-loading-shadow-out 320ms var(--openbot-ease-out) calc(var(--app-loading-index, 0) * 70ms + 120ms) forwards;
  }
  .app-loading[data-phase="exit"] [data-sleeper]::after {
    animation-delay: 480ms;
  }
  .app-loading:not([data-phase="loading"]) .app-loading-status {
    animation: app-loading-fade 200ms var(--openbot-ease-out) forwards;
  }
}
@keyframes app-loading-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}
@keyframes app-loading-hop {
  0%, 78%, 100% {
    transform: translateY(0) scale(1, 1);
  }
  10% {
    transform: translateY(0) scale(1.14, 0.86);
  }
  28% {
    transform: translateY(-30px) scale(0.9, 1.1);
  }
  44% {
    transform: translateY(-40px) scale(1, 1);
  }
  62% {
    transform: translateY(0) scale(0.94, 1.06);
  }
  68% {
    transform: translateY(0) scale(1.16, 0.84);
  }
}
@keyframes app-loading-shadow {
  0%, 62%, 100% {
    opacity: 1;
    transform: translateX(-50%) scaleX(1);
  }
  68% {
    transform: translateX(-50%) scaleX(1.15);
  }
  44% {
    opacity: 0.45;
    transform: translateX(-50%) scaleX(0.55);
  }
}
@keyframes app-loading-breathe {
  from {
    transform: scale(1, 1);
  }
  to {
    transform: scale(0.97, 1.04) rotate(-1.5deg);
  }
}
@keyframes app-loading-drift {
  from {
    opacity: 1;
    translate: 0 0;
  }
  60% {
    opacity: 1;
  }
  to {
    opacity: 0;
    translate: 0 -40vh;
  }
}
@keyframes app-loading-z-rise {
  from {
    scale: 0.45;
    translate: 0 0;
  }
  to {
    scale: 1.1;
    translate: 12px -30px;
  }
}
@keyframes app-loading-z-fade {
  0%, 100% {
    opacity: 0;
  }
  18%, 60% {
    opacity: 1;
  }
}
@keyframes app-loading-z-sway {
  from {
    transform: translateX(-2px) rotate(-14deg);
  }
  to {
    transform: translateX(2px) rotate(12deg);
  }
}
@keyframes app-loading-line-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
@keyframes app-loading-leap {
  0% {
    transform: translateY(0) scale(1, 1);
  }
  25% {
    transform: translateY(0) scale(1.2, 0.8);
  }
  45% {
    opacity: 1;
    transform: translateY(-40px) scale(0.85, 1.2);
  }
  100% {
    opacity: 0;
    transform: translateY(-70vh) scale(0.85, 1.2);
  }
}
@keyframes app-loading-shadow-out {
  to {
    opacity: 0;
    transform: translateX(-50%) scaleX(0.3);
  }
}
@keyframes app-loading-fade {
  to {
    opacity: 0;
  }
}
@keyframes app-loading-exit {
  to {
    opacity: 0;
  }
}
.server-connection-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3);
  background: var(--openbot-bg-canvas);
  border-bottom: 1px solid var(--openbot-border);
}
.server-connection-notice p {
  margin: 0;
}
.server-connection-detail {
  color: var(--openbot-text-muted);
  font-variant-numeric: tabular-nums;
  text-wrap: pretty;
}
.server-connection-actions {
  display: flex;
  gap: var(--openbot-space-2);
  -webkit-app-region: no-drag;
}
.server-connection-content {
  position: relative;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.server-connection-content[hidden] {
  display: none;
}
.language-wheel-shell {
  width: min(100%, 360px);
  min-height: 100%;
  margin-inline: auto;
  padding: var(--openbot-space-8) var(--openbot-space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-3);
  -webkit-app-region: no-drag;
}
.language-wheel-shell .account-login-brand-lockup {
  margin-bottom: var(--openbot-space-4);
}
.language-wheel-title {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.language-wheel-frame {
  position: relative;
  width: 100%;
}
.language-wheel-arrows {
  position: absolute;
  top: 50%;
  left: calc(100% + var(--openbot-space-2));
  translate: 0 -50%;
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
}
.language-wheel-arrows svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
}
.language-wheel {
  --row: 44px;
  position: relative;
  width: 100%;
  height: calc(var(--row) * 5);
  overflow: clip;
  cursor: grab;
  touch-action: none;
  user-select: none;
  mask-image: linear-gradient( transparent, var(--openbot-text-primary) 30%, var(--openbot-text-primary) 70%, transparent );
}
.language-wheel[data-dragging] {
  cursor: grabbing;
}
.language-wheel::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: calc(var(--row) * 2);
  height: var(--row);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-grouped);
}
.language-wheel:has(:focus-visible)::before {
  box-shadow: inset 0 0 0 1px var(--openbot-border-focus), var(--openbot-focus-ring);
}
.language-wheel-track {
  position: relative;
  height: 100%;
}
.language-wheel-item {
  position: absolute;
  inset-inline: 0;
  top: calc(var(--row) * 2);
  height: var(--row);
  translate: 0 calc(var(--offset) * var(--row));
  opacity: max(0, 1 - var(--distance) * 0.35);
  transition: translate var(--openbot-duration-overlay) var(--openbot-ease-out), opacity var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.language-wheel-label {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-3xl);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: -0.03em;
  line-height: 1;
  cursor: inherit;
}
.language-wheel-name {
  display: flex;
  align-items: center;
  gap: 0.4em;
  scale: max(0.6, 1 - var(--distance) * 0.2);
  transition: scale var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.language-wheel[data-dragging] :is(.language-wheel-item, .language-wheel-name) {
  transition: none;
}
.language-wheel-flag {
  scale: 0.9;
  letter-spacing: 0;
}
.language-wheel-continue {
  width: min(100%, 288px);
  min-height: 44px;
  margin-top: var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
}
.language-wheel-continue svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  transition: translate var(--openbot-duration-normal) var(--openbot-ease-out);
}
.language-wheel-continue:hover:not(:disabled) {
  background: var(--openbot-surface-light);
}
.language-wheel-continue:is(:hover, :focus-visible):not(:disabled) svg {
  translate: var(--openbot-space-1) 0;
}
.language-wheel-continue:active:not(:disabled) svg {
  translate: var(--openbot-space-2) 0;
}
@media (prefers-reduced-motion: reduce) {
  .language-wheel-item, .language-wheel-name, .language-wheel-continue svg {
    transition: none;
  }
}
.onboarding-screen {
  position: absolute;
  z-index: var(--openbot-layer-dialog);
  inset: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow-y: auto;
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
  -webkit-app-region: drag;
}
.onboarding-shell {
  width: min(100%, 680px);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 52px 24px;
  -webkit-app-region: no-drag;
}
.onboarding-progress {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  margin-bottom: 20px;
}
.onboarding-progress span {
  width: 6px;
  height: 6px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-border-strong);
  transition: width var(--openbot-duration-normal) var(--openbot-ease-out), background-color var(--openbot-duration-normal) ease;
}
.onboarding-progress span.is-complete {
  background: var(--openbot-text-muted);
}
.onboarding-progress span.is-active {
  width: 22px;
  background: var(--openbot-text-primary);
}
.onboarding-step {
  width: 100%;
  display: flex;
  justify-content: center;
}
.onboarding-panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.onboarding-panel h1 {
  max-width: 620px;
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-display);
  font-weight: var(--openbot-weight-medium);
  letter-spacing: -0.045em;
  line-height: 1.12;
}
.onboarding-description {
  max-width: 560px;
  margin: 10px 0 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-lg);
  line-height: 1.45;
}
.onboarding-computer-visual svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.onboarding-provider {
  width: min(100%, 480px);
  margin-top: 26px;
  text-align: left;
}
.onboarding-provider .provider-picker-standalone {
  margin-top: 0;
}
.onboarding-provider .provider-picker-label {
  color: var(--openbot-text-secondary);
}
.onboarding-provider .provider-picker-heading {
  padding-inline: 1px;
}
.onboarding-provider .provider-picker-list {
  background: var(--openbot-bg-control);
}
.onboarding-provider .provider-picker-hint {
  color: var(--openbot-text-muted);
}
.onboarding-computer-visual {
  position: relative;
  width: min(100%, 400px);
  margin-top: 20px;
}
.onboarding-computer-stop-mist, .onboarding-computer-highlight-start {
  stop-color: var(--openbot-onboarding-desktop-mist);
}
.onboarding-computer-stop-blue, .onboarding-computer-highlight-end {
  stop-color: var(--openbot-onboarding-desktop-blue);
}
.onboarding-computer-stop-indigo {
  stop-color: var(--openbot-onboarding-desktop-indigo);
}
.onboarding-computer-highlight-start {
  stop-opacity: 0.92;
}
.onboarding-computer-highlight-end {
  stop-opacity: 0;
}
.onboarding-computer-desktop {
  stroke: var(--openbot-border-on-light);
  stroke-width: 1;
  filter: drop-shadow(0 16px 22px var(--openbot-shadow-popover-ambient));
}
.onboarding-computer-desktop-highlight {
  pointer-events: none;
}
.onboarding-computer-desktop-beam {
  fill: var(--openbot-onboarding-desktop-mist);
  opacity: 0.16;
  pointer-events: none;
}
.onboarding-computer-window-shadow {
  fill: var(--openbot-shadow-dialog);
  opacity: 0.46;
}
.onboarding-computer-window {
  transform-box: fill-box;
  transform-origin: center;
  animation: onboarding-computer-window-drag 4.6s var(--openbot-ease-in-out) infinite;
}
.onboarding-computer-window-body {
  fill: var(--openbot-onboarding-window);
  stroke: var(--openbot-border-on-light);
  stroke-width: 1;
}
.onboarding-computer-window-bar, .onboarding-computer-window-bar-fill {
  fill: var(--openbot-text-muted-on-light);
  opacity: 0.24;
}
.onboarding-computer-window-bar {
  stroke: var(--openbot-border-on-light);
  stroke-width: 1;
}
.onboarding-computer-window-pane {
  fill: var(--openbot-text-dim-on-light);
  opacity: 0.18;
}
.onboarding-computer-window-card {
  fill: var(--openbot-text-dim-on-light);
  opacity: 0.24;
}
.onboarding-computer-window-line {
  fill: var(--openbot-text-dim-on-light);
  opacity: 0.54;
}
.onboarding-computer-window-line-short {
  opacity: 0.44;
}
.onboarding-computer-dot-danger {
  fill: var(--openbot-danger);
}
.onboarding-computer-dot-warning {
  fill: var(--openbot-warning);
}
.onboarding-computer-dot-success {
  fill: var(--openbot-success);
}
.onboarding-computer-cursor {
  transform-box: fill-box;
  transform-origin: 0 0;
  animation: onboarding-computer-cursor-drag 4.6s var(--openbot-ease-in-out) infinite;
}
.onboarding-computer-cursor path {
  fill: var(--openbot-text-on-light);
  stroke: var(--openbot-onboarding-window);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  filter: drop-shadow(0 2px 3px var(--openbot-shadow-popover-ambient));
  paint-order: stroke fill;
}
.onboarding-computer-avatar {
  position: absolute;
  z-index: 1;
  top: 40%;
  left: 73%;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  pointer-events: none;
  animation: onboarding-computer-avatar-drag 4.6s var(--openbot-ease-in-out) infinite;
}
.onboarding-computer-avatar .agent-avatar {
  width: 34px;
  height: 34px;
}
.onboarding-computer-avatar .agent-avatar > svg {
  width: 128%;
  height: 128%;
  filter: drop-shadow(0 2px 4px var(--openbot-shadow-popover-ambient));
}
@keyframes onboarding-computer-window-drag {
  0%, 34% {
    transform: translate(0, 0);
  }
  56%, 78% {
    transform: translate(18px, 8px);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes onboarding-computer-cursor-drag {
  0%, 8% {
    opacity: 0;
    transform: translate(352px, 190px) scale(0.68);
  }
  18%, 32% {
    opacity: 1;
    transform: translate(282px, 72px) scale(0.76);
  }
  38% {
    opacity: 1;
    transform: translate(282px, 72px) scale(0.71);
  }
  56%, 70% {
    opacity: 1;
    transform: translate(300px, 80px) scale(0.71);
  }
  78% {
    opacity: 1;
    transform: translate(300px, 80px) scale(0.76);
  }
  92%, 100% {
    opacity: 0;
    transform: translate(352px, 190px) scale(0.68);
  }
}
@keyframes onboarding-computer-avatar-drag {
  0%, 8% {
    opacity: 0;
    transform: translate(68px, 112px) scale(0.88);
  }
  18%, 32% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  38% {
    opacity: 1;
    transform: translate(0, 0) scale(0.94);
  }
  56%, 70% {
    opacity: 1;
    transform: translate(18px, 8px) scale(0.94);
  }
  78% {
    opacity: 1;
    transform: translate(18px, 8px) scale(1);
  }
  92%, 100% {
    opacity: 0;
    transform: translate(68px, 112px) scale(0.88);
  }
}
.onboarding-error {
  width: min(100%, 480px);
  margin: 12px 0 0;
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
  line-height: 1.45;
  text-align: center;
}
.onboarding-actions {
  width: min(100%, 288px);
  display: grid;
  gap: var(--openbot-space-2);
  margin-top: 22px;
}
.onboarding-screen[data-step="computer"] .onboarding-actions {
  margin-top: 16px;
}
.onboarding-actions .ui-button {
  width: 100%;
  min-height: 44px;
  border-radius: var(--openbot-radius-pill);
}
.onboarding-next {
  order: -1;
}
.onboarding-next-reason {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 1.45;
  text-align: center;
}
@media (max-width: 620px) {
  .onboarding-shell {
    padding: 48px 18px;
  }
  .onboarding-panel h1 {
    font-size: var(--openbot-text-3xl);
  }
  .onboarding-description {
    font-size: var(--openbot-text-md);
  }
  .onboarding-computer-visual {
    width: min(100%, 320px);
    margin-top: 16px;
  }
  .onboarding-computer-avatar {
    width: 30px;
    height: 30px;
  }
  .onboarding-computer-avatar .agent-avatar {
    width: 30px;
    height: 30px;
  }
}
@media (max-width: 460px) {
  .onboarding-provider .provider-picker-option-selection {
    grid-template-columns: 16px 18px minmax(0, 1fr);
  }
  .onboarding-provider .provider-picker-state {
    grid-column: 3;
    justify-self: start;
  }
  .onboarding-computer-visual {
    width: min(100%, 320px);
    margin-top: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .onboarding-progress span, .onboarding-computer-window, .onboarding-computer-cursor, .onboarding-computer-avatar {
    animation: none;
    transition: none;
  }
  .onboarding-computer-window {
    transform: translate(18px, 8px);
  }
  .onboarding-computer-cursor {
    opacity: 1;
    transform: translate(300px, 80px) scale(0.76);
  }
  .onboarding-computer-avatar {
    opacity: 1;
    transform: translate(18px, 8px);
  }
}
:is(.onboarding-provider, .setup-local-content) .provider-picker-list {
  overflow: visible;
}
:is(.onboarding-provider, .setup-local-content) .provider-picker-list > :first-child, :is(.onboarding-provider, .setup-local-content) .provider-picker-list > :first-child > .provider-picker-option:first-child {
  border-top-left-radius: calc(var(--openbot-radius-md) - 1px);
  border-top-right-radius: calc(var(--openbot-radius-md) - 1px);
}
:is(.onboarding-provider, .setup-local-content) .provider-picker-list > :last-child, :is(.onboarding-provider, .setup-local-content) .provider-picker-list > :last-child > .provider-picker-option:last-child {
  border-bottom-left-radius: calc(var(--openbot-radius-md) - 1px);
  border-bottom-right-radius: calc(var(--openbot-radius-md) - 1px);
}
:is(.onboarding-provider, .setup-local-content) .provider-picker-option-with-callout {
  position: relative;
}
.provider-picker-callout {
  position: absolute;
  right: calc(100% + 10px);
  bottom: 50%;
  width: 150px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--openbot-onboarding-desktop-indigo);
  pointer-events: none;
  animation: provider-picker-callout-in 420ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.provider-picker-callout-title {
  font-size: var(--openbot-text-md);
  font-weight: 620;
  line-height: 18px;
}
.provider-picker-callout-detail {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
}
.provider-picker-callout-arrow {
  width: 92px;
  height: 40px;
  align-self: flex-end;
  margin-top: 2px;
  margin-bottom: -10px;
}
@keyframes provider-picker-callout-in {
  from {
    opacity: 0;
  }
}
.provider-picker-callout-end {
  right: auto;
  left: calc(100% + 10px);
  align-items: flex-end;
  text-align: right;
}
.provider-picker-callout-end .provider-picker-callout-arrow {
  align-self: flex-start;
  transform: scaleX(-1);
}
@media (prefers-reduced-motion: reduce) {
  .provider-picker-callout {
    animation: none;
  }
}
@media (max-width: 860px) {
  .provider-picker-callout {
    display: none;
  }
}
@media (max-width: 960px) {
  .setup-local-content .provider-picker-callout {
    display: none;
  }
}
.server-onboarding-screen {
  position: fixed;
}
.server-onboarding-close {
  position: absolute;
  top: 12px;
  right: 12px;
  -webkit-app-region: no-drag;
}
.first-run-screen[data-step="choose"] .onboarding-shell {
  width: min(100%, 960px);
}
.first-run-screen .onboarding-shell > .onboarding-step {
  view-transition-name: first-run-step;
}
.first-run-screen .onboarding-shell > .onboarding-progress {
  view-transition-name: first-run-progress;
}
.first-run-screen .onboarding-shell > .onboarding-actions {
  view-transition-name: first-run-actions;
}
::view-transition-group(first-run-step), ::view-transition-group(first-run-progress), ::view-transition-group(first-run-actions) {
  animation-duration: 440ms;
  animation-timing-function: var(--openbot-ease-out);
}
::view-transition-old(first-run-step), ::view-transition-new(first-run-step) {
  inset-inline-start: 50%;
  inline-size: auto;
  translate: -50% 0;
}
html:active-view-transition-type(step)::view-transition-old(first-run-step) {
  animation: first-run-step-out 220ms var(--openbot-ease-out) both;
}
html:active-view-transition-type(step)::view-transition-new(first-run-step) {
  animation: first-run-step-in 440ms var(--openbot-ease-out) 40ms both;
}
::view-transition-old(first-run-progress):not(:only-child) {
  animation: none;
  opacity: 0;
}
::view-transition-new(first-run-progress):not(:only-child) {
  animation: none;
}
::view-transition-new(first-run-progress):only-child, ::view-transition-new(first-run-actions):only-child {
  animation: first-run-step-rise 440ms var(--openbot-ease-out) 40ms both;
}
::view-transition-old(first-run-actions), ::view-transition-old(first-run-progress):only-child {
  animation: first-run-blur-out 220ms var(--openbot-ease-out) both;
}
::view-transition-new(first-run-actions):not(:only-child) {
  animation: first-run-blur-in 440ms var(--openbot-ease-out) 40ms both;
}
html:active-view-transition-type(open)::view-transition-old(*) {
  animation: first-run-open-out 320ms var(--openbot-ease-out) both;
}
html:active-view-transition-type(open)::view-transition-new(*) {
  animation: first-run-open-in 520ms var(--openbot-ease-out) 60ms both;
}
@keyframes first-run-step-out {
  to {
    opacity: 0;
    filter: blur(6px);
  }
}
@keyframes first-run-step-in {
  from {
    opacity: 0;
    filter: blur(6px);
  }
}
@keyframes first-run-step-rise {
  from {
    opacity: 0;
    filter: blur(4px);
  }
}
@keyframes first-run-blur-out {
  to {
    opacity: 0;
    filter: blur(8px);
  }
}
@keyframes first-run-blur-in {
  from {
    opacity: 0;
    filter: blur(8px);
  }
}
@keyframes first-run-open-out {
  to {
    opacity: 0;
    filter: blur(8px);
  }
}
@keyframes first-run-open-in {
  from {
    opacity: 0;
    filter: blur(6px);
  }
}
.first-run-choice {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.first-run-choice-team {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-3);
  margin-bottom: 40px;
}
.first-run-choice-avatar {
  width: 52px;
  height: 52px;
  flex: none;
  animation: first-run-rise var(--openbot-duration-overlay) var(--openbot-ease-out) both;
}
.first-run-choice-avatar:nth-child(1), .first-run-choice-avatar:nth-child(7) {
  width: 40px;
  height: 40px;
  transform: translateY(24px);
}
.first-run-choice-avatar:nth-child(2), .first-run-choice-avatar:nth-child(6) {
  transform: translateY(8px);
}
.first-run-choice-avatar:nth-child(3), .first-run-choice-avatar:nth-child(5) {
  width: 68px;
  height: 68px;
}
.first-run-choice-avatar:nth-child(4) {
  width: 104px;
  height: 104px;
  transform: translateY(-12px);
}
.first-run-choice-avatar:nth-child(2) {
  animation-delay: calc(var(--openbot-duration-fast) * 1);
}
.first-run-choice-avatar:nth-child(3) {
  animation-delay: calc(var(--openbot-duration-fast) * 2);
}
.first-run-choice-avatar:nth-child(4) {
  animation-delay: calc(var(--openbot-duration-fast) * 3);
}
.first-run-choice-avatar:nth-child(5) {
  animation-delay: calc(var(--openbot-duration-fast) * 4);
}
.first-run-choice-avatar:nth-child(6) {
  animation-delay: calc(var(--openbot-duration-fast) * 5);
}
.first-run-choice-avatar:nth-child(7) {
  animation-delay: calc(var(--openbot-duration-fast) * 6);
}
.first-run-choice-title {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-hero);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: -0.055em;
  line-height: 1;
  text-wrap: balance;
}
.first-run-choice .onboarding-description {
  margin-top: var(--openbot-space-4);
}
.first-run-choice-rows {
  width: min(100%, 440px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-top: var(--openbot-space-8);
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-grouped);
  background: var(--openbot-bg-grouped);
}
.first-run-choice-rows .first-run-choice-row {
  height: auto;
  min-height: 64px;
  justify-content: flex-start;
  gap: var(--openbot-space-3);
  border-radius: 0;
  padding: var(--openbot-space-3) var(--openbot-space-4);
  text-align: left;
  white-space: normal;
}
.first-run-choice-rows .first-run-choice-row + .first-run-choice-row {
  border-top-color: var(--openbot-border-grouped);
}
.first-run-choice-row-text {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-sm);
}
.first-run-choice-row-text strong {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.first-run-choice-logos {
  display: flex;
  gap: 6px;
}
.first-run-choice-logo {
  width: 16px;
  height: 16px;
  overflow: visible;
  fill: var(--openbot-provider-current);
}
.first-run-choice-row-chevron {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--openbot-text-dim);
}
.first-run-choice-reason {
  margin-top: var(--openbot-space-3);
}
@keyframes first-run-rise {
  from {
    opacity: 0;
    translate: 0 16px;
  }
}
@media (max-width: 760px) {
  .first-run-choice-team {
    gap: var(--openbot-space-1-5);
  }
  .first-run-choice-avatar:nth-child(1), .first-run-choice-avatar:nth-child(7) {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .first-run-choice-avatar {
    animation: none;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .first-run-choice-avatar, .first-run-launch-avatar {
    --first-run-spring: linear(
      0,
      0.035 2.1%,
      0.281 6.7%,
      0.723 12.9%,
      0.938 16.7%,
      1.077 21%,
      1.149 24.3%,
      1.163 27%,
      1.154 29.9%,
      1.129 32.8%,
      1.051 39.6%,
      1.017 43.1%,
      0.977 51%,
      0.974 53.8%,
      0.975 57.1%,
      0.997 69.8%,
      1.003 76.9%,
      1
    );
    transition: scale 560ms var(--first-run-spring);
  }
  .first-run-choice-avatar:hover, .first-run-launch-member:hover .first-run-launch-avatar {
    scale: 1.12;
  }
  .first-run-choice-avatar:active, .first-run-launch-member:active .first-run-launch-avatar {
    scale: 0.9;
    transition-duration: var(--openbot-duration-fast);
    transition-timing-function: var(--openbot-ease-out);
  }
}
.first-run-launch {
  --first-run-launch-accent: var(--openbot-logo-production);
  position: absolute;
  z-index: var(--openbot-layer-dialog);
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--openbot-bg-canvas);
  -webkit-app-region: drag;
}
.first-run-launch[data-variant="dev"] {
  --first-run-launch-accent: var(--openbot-logo-dev);
}
.first-run-launch[data-variant="preview"] {
  --first-run-launch-accent: var(--openbot-logo-preview);
}
.first-run-launch-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.first-run-launch-team {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-3);
}
.first-run-launch-member {
  display: grid;
  flex: none;
}
.first-run-launch-avatar {
  width: 52px;
  height: 52px;
}
.first-run-launch-member:nth-child(1), .first-run-launch-member:nth-child(7) {
  translate: 0 24px;
}
.first-run-launch-member:nth-child(1) .first-run-launch-avatar, .first-run-launch-member:nth-child(7) .first-run-launch-avatar {
  width: 40px;
  height: 40px;
}
.first-run-launch-member:nth-child(2), .first-run-launch-member:nth-child(6) {
  translate: 0 8px;
}
.first-run-launch-member:nth-child(3) .first-run-launch-avatar, .first-run-launch-member:nth-child(5) .first-run-launch-avatar {
  width: 68px;
  height: 68px;
}
.first-run-launch-member:nth-child(4) {
  translate: 0 -12px;
}
.first-run-launch-member:nth-child(4) .first-run-launch-avatar {
  width: 104px;
  height: 104px;
}
.first-run-launch-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.first-run-launch-scribble {
  display: block;
  width: 112px;
  height: 14px;
  overflow: visible;
}
.first-run-launch-scribble polyline {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4px;
}
.first-run-launch-track {
  stroke: var(--first-run-launch-accent);
  @supports (color: color-mix(in lab, red, red)) {
    stroke: color-mix(in srgb, var(--first-run-launch-accent) 18%, transparent);
  }
}
.first-run-launch-fill {
  stroke: var(--first-run-launch-accent);
  stroke-dasharray: 1 1;
  stroke-dashoffset: calc(1 - var(--first-run-launch-percent));
  transition: stroke-dashoffset var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.first-run-launch-label {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
}
@media (max-width: 760px) {
  .first-run-launch-team {
    gap: var(--openbot-space-1-5);
  }
  .first-run-launch-member:nth-child(1), .first-run-launch-member:nth-child(7) {
    display: none;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .first-run-launch-avatar {
    animation: first-run-launch-hop 1.8s var(--openbot-ease-in-out) infinite;
  }
  .first-run-launch-member:nth-child(2) .first-run-launch-avatar {
    animation-delay: 120ms;
  }
  .first-run-launch-member:nth-child(3) .first-run-launch-avatar {
    animation-delay: 240ms;
  }
  .first-run-launch-member:nth-child(4) .first-run-launch-avatar {
    animation-delay: 360ms;
  }
  .first-run-launch-member:nth-child(5) .first-run-launch-avatar {
    animation-delay: 480ms;
  }
  .first-run-launch-member:nth-child(6) .first-run-launch-avatar {
    animation-delay: 600ms;
  }
  .first-run-launch-member:nth-child(7) .first-run-launch-avatar {
    animation-delay: 720ms;
  }
  .first-run-launch-progress[data-known="false"] .first-run-launch-fill {
    stroke-dasharray: 0.35 1.2;
    transition: none;
    animation: first-run-launch-scribble 1.8s var(--openbot-ease-in-out) infinite;
  }
}
@keyframes first-run-launch-hop {
  0%, 36%, 100% {
    transform: translateY(0);
  }
  16% {
    transform: translateY(-12px);
  }
}
@keyframes first-run-launch-scribble {
  from {
    stroke-dashoffset: 0.35;
  }
  to {
    stroke-dashoffset: -1.2;
  }
}
.setup-read-error-actions {
  justify-content: center;
  margin-top: var(--openbot-space-3);
}
.startup-splash {
  position: absolute;
  z-index: var(--openbot-layer-dialog);
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--openbot-bg-canvas);
  -webkit-app-region: drag;
}
.startup-splash-logo {
  display: block;
  width: 96px;
  height: 96px;
  animation: startup-splash-in var(--openbot-duration-overlay) var(--openbot-ease-out) backwards;
}
.startup-splash[data-phase="exit"] {
  pointer-events: none;
  -webkit-app-region: no-drag;
  animation: startup-splash-exit var(--openbot-duration-overlay) var(--openbot-ease-in-out) forwards;
}
@media (prefers-reduced-motion: no-preference) {
  .startup-splash-logo .app-logo-eye {
    stroke-dasharray: var(--splash-eye-length) calc(var(--splash-eye-length) + 24px);
    animation: startup-splash-eye-draw 480ms var(--openbot-ease-in-out) 160ms backwards, app-logo-blink 4.8s var(--openbot-ease-in-out) 1s infinite;
  }
}
@keyframes startup-splash-in {
  from {
    opacity: 0;
  }
}
@keyframes startup-splash-eye-draw {
  from {
    stroke-dashoffset: calc(var(--splash-eye-length) + 12px);
  }
  to {
    stroke-dashoffset: 0px;
  }
}
@keyframes startup-splash-exit {
  to {
    opacity: 0;
  }
}
.first-agent-setup-panel {
  height: 100%;
  min-height: 0;
  color: var(--openbot-text-primary);
}
.first-agent-setup-header {
  display: flex;
  height: 38px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--openbot-border);
  padding: 0 var(--openbot-space-3);
}
.first-agent-header-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-1-5);
}
.first-agent-header-identity .agent-avatar {
  --agent-avatar-optical-offset: -2px;
  width: 18px;
  height: 18px;
}
.first-agent-header-identity h1 {
  overflow: hidden;
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.first-agent-setup-content {
  display: grid;
  min-width: 0;
  min-height: 0;
  flex: 1;
  grid-template-rows: minmax(min-content, 1fr) auto;
  overflow-y: auto;
}
.first-agent-editor {
  display: grid;
  width: min(420px, calc(100% - 48px));
  align-content: center;
  justify-self: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-6) 0;
}
.first-agent-live-avatar {
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  justify-self: center;
  margin-bottom: var(--openbot-space-1);
  translate: 0 calc(0px - var(--openbot-space-2));
}
.first-agent-live-avatar .agent-avatar {
  width: 72px;
  height: 72px;
}
.first-agent-avatar-fieldset {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}
.first-agent-color-options, .first-agent-face-options {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-1);
}
.first-agent-face-options {
  gap: var(--openbot-space-0-5);
}
.ui-button.first-agent-color-choice, .ui-button.first-agent-face-choice {
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-color: transparent;
  background: transparent;
  padding: 0;
  border-radius: var(--openbot-radius-md);
}
.ui-button.first-agent-face-choice {
  display: grid;
  width: 33px;
  height: 33px;
  flex-basis: 33px;
  place-items: center;
  padding: 0;
}
.ui-button.first-agent-color-choice {
  border-radius: var(--openbot-radius-pill);
}
.ui-button.first-agent-color-choice:hover:not(:disabled), .ui-button.first-agent-face-choice:hover:not(:disabled) {
  background: var(--openbot-hover);
}
.first-agent-color-choice[aria-pressed="true"], .first-agent-face-choice[aria-pressed="true"] {
  border-color: var(--openbot-accent-text);
  box-shadow: 0 0 0 2px var(--openbot-accent-soft);
}
.first-agent-color-swatch {
  display: block;
  width: 18px;
  height: 18px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
}
.first-agent-face-choice .agent-avatar {
  --agent-avatar-optical-offset: -3.25px;
  width: 24px;
  height: 24px;
}
.first-agent-fields {
  display: grid;
  gap: var(--openbot-space-3);
  margin-top: var(--openbot-space-1);
}
.first-agent-fields .ui-textarea {
  field-sizing: content;
  min-height: 64px;
  max-height: 240px;
  overflow-y: auto;
}
.ui-button.first-agent-submit {
  min-width: 132px;
}
.first-agent-fields .provider-model-trigger-field {
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
  box-shadow: none;
}
.first-agent-fields .provider-model-trigger-field:hover:not(:disabled), .first-agent-fields .provider-model-trigger-field[aria-expanded="true"] {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-control);
}
.first-agent-fields .provider-model-trigger-field:active:not(:disabled) {
  transform: none;
}
.first-agent-fields .provider-model-trigger-field:focus-visible {
  border-color: var(--openbot-border-focus);
  outline: none;
  box-shadow: var(--openbot-focus-ring);
}
.first-agent-submit-actions {
  display: flex;
  justify-content: center;
  margin-top: var(--openbot-space-1);
}
.first-agent-error {
  margin: 0;
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-align: center;
}
.first-agent-suggestions {
  min-width: 0;
  padding: 0 var(--openbot-space-6) var(--openbot-space-4);
}
.first-agent-suggestions > h2 {
  margin: 0 0 var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
}
.first-agent-suggestion-viewport {
  position: relative;
  min-width: 0;
}
.first-agent-suggestion-viewport::before, .first-agent-suggestion-viewport::after {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: var(--openbot-space-1);
  width: 48px;
  opacity: 0;
  pointer-events: none;
  content: "";
  transition: opacity var(--openbot-duration-normal) var(--openbot-ease-out);
}
.first-agent-suggestion-viewport::before {
  left: 0;
  background: linear-gradient(to right, var(--openbot-bg-canvas), transparent);
}
.first-agent-suggestion-viewport::after {
  right: 0;
  background: linear-gradient(to left, var(--openbot-bg-canvas), transparent);
}
.first-agent-suggestion-viewport.can-scroll-back::before, .first-agent-suggestion-viewport.can-scroll-forward::after {
  opacity: 1;
}
.first-agent-suggestion-list {
  display: flex;
  min-width: 0;
  gap: var(--openbot-space-3);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  margin: 0;
  padding: 1px 1px var(--openbot-space-1);
  list-style: none;
  scrollbar-width: none;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}
.first-agent-suggestion-list::-webkit-scrollbar {
  display: none;
}
.first-agent-suggestion-item {
  width: 256px;
  flex: 0 0 256px;
  margin: 0;
}
.ui-button.first-agent-suggestion-card {
  width: 100%;
  height: 112px;
  justify-content: flex-start;
  gap: var(--openbot-space-4);
  border-color: var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: transparent;
  padding: var(--openbot-space-4);
  cursor: grab;
  text-align: left;
  white-space: normal;
  transition: border-color var(--openbot-duration-hover) var(--openbot-ease-out), background-color var(--openbot-duration-hover) var(--openbot-ease-out);
}
.ui-button.first-agent-suggestion-card:hover:not(:disabled) {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-hover);
}
.first-agent-suggestion-card[aria-pressed="true"] {
  border-color: var(--openbot-accent);
  background: var(--openbot-accent-soft);
}
.first-agent-suggestion-viewport.is-dragging, .first-agent-suggestion-viewport.is-dragging .first-agent-suggestion-list, .first-agent-suggestion-viewport.is-dragging .first-agent-suggestion-card {
  cursor: grabbing;
}
.first-agent-suggestion-card .agent-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
}
.first-agent-suggestion-card > span:last-child {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-1);
}
.first-agent-suggestion-card strong, .first-agent-suggestion-card small {
  display: block;
}
.first-agent-suggestion-card strong {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-xl);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-xl);
}
.first-agent-suggestion-card small {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-md);
}
@media (max-width: 800px) {
  .first-agent-editor {
    width: min(400px, calc(100% - 32px));
    padding-block: var(--openbot-space-4);
  }
  .first-agent-live-avatar, .first-agent-live-avatar .agent-avatar {
    width: 62px;
    height: 62px;
  }
  .first-agent-face-options {
    gap: var(--openbot-space-0-5);
    flex-wrap: wrap;
  }
  .first-agent-suggestions {
    padding-inline: var(--openbot-space-4);
  }
  .first-agent-suggestion-item {
    width: min(256px, calc(100vw - 64px));
    flex-basis: min(256px, calc(100vw - 64px));
  }
}
@media (prefers-reduced-motion: reduce) {
  .first-agent-color-choice, .first-agent-face-choice {
    transition: none;
  }
  .first-agent-suggestion-viewport .ui-button.first-agent-suggestion-card {
    transition: none;
  }
  .first-agent-suggestion-viewport::before, .first-agent-suggestion-viewport::after {
    transition: none;
  }
}
.app-frame {
  --left-header-height: 38px;
  --server-rail-width: 64px;
  position: relative;
  display: grid;
  container-type: inline-size;
  width: 100%;
  height: 100%;
  margin: 0;
  grid-template-columns: var(--left-panel-width, 280px) 0 minmax(0, 1fr);
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--openbot-bg-canvas);
  box-shadow: none;
  transition: grid-template-columns var(--panel-resize-duration, var(--openbot-duration-overlay)) cubic-bezier(0.32, 0.72, 0, 1);
}
.app-frame-with-server-rail {
  grid-template-columns: var(--server-rail-width) var(--left-panel-width, 280px) 0 minmax(0, 1fr);
}
.app-frame-platform-darwin {
  --server-rail-width: 72px;
}
.remote-compatibility-screen {
  display: flex;
  min-width: 0;
  min-height: 0;
  grid-column: 3;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: var(--openbot-space-6);
}
.app-frame-with-server-rail .remote-compatibility-screen {
  grid-column: 4;
}
.remote-compatibility-alert, .remote-compatibility-details {
  width: min(100%, 520px);
}
.remote-compatibility-details {
  display: grid;
  margin: 0;
}
.remote-compatibility-details > div {
  display: flex;
  justify-content: space-between;
  gap: var(--openbot-space-4);
  border-bottom: 1px solid var(--openbot-border);
  padding: var(--openbot-space-2) 0;
}
.remote-compatibility-details dt {
  color: var(--openbot-text-muted);
}
.remote-compatibility-details dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.global-search-dialog {
  position: fixed;
  z-index: calc(var(--openbot-layer-dialog) + 1);
  top: 112px;
  left: 50%;
  display: flex;
  width: min(640px, calc(100vw - 48px));
  max-height: calc(100dvh - 136px);
  flex-direction: column;
  overflow: hidden;
  outline: 0;
  background: var(--openbot-bg-control);
  box-shadow: 0 0 0 1px var(--openbot-dialog-ring), var(--openbot-shadow-dialog);
  color: var(--openbot-text-primary);
  transform: translateX(-50%);
  transform-origin: 50% 0;
  animation: global-search-in var(--openbot-duration-normal) var(--openbot-ease-out);
}
.global-search-dialog[data-closing] {
  animation: global-search-out var(--openbot-duration-fast) var(--openbot-ease-out) both;
}
@keyframes global-search-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-4px) scale(0.98);
  }
}
@keyframes global-search-out {
  to {
    opacity: 0;
    transform: translateX(-50%) scale(0.98);
  }
}
.global-search-control {
  display: flex;
  height: 48px;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--openbot-space-2);
  border-bottom: 1px solid var(--openbot-border);
  padding: 0 var(--openbot-space-2) 0 var(--openbot-space-4);
  color: var(--openbot-text-muted);
}
.global-search-control > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.global-search-control .global-search-input {
  min-width: 0;
  height: 100%;
  flex: 1;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
.global-search-control .global-search-input:focus {
  border: 0;
  outline: 0;
  box-shadow: none;
}
.global-search-control .global-search-input::placeholder {
  color: var(--openbot-text-muted);
}
.global-search-filters {
  flex: 0 0 auto;
}
.global-search-filters [role="tablist"] {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--openbot-space-0-5);
}
.global-search-filters [role="tab"] {
  position: relative;
  z-index: 1;
  height: var(--openbot-control-xs);
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  padding: 0 var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-family: inherit;
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
  transition: color var(--openbot-duration-normal) var(--openbot-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .global-search-filters [role="tab"]:hover {
    color: var(--openbot-text-secondary);
  }
}
.global-search-filters [role="tab"][data-selected] {
  color: var(--openbot-text-primary);
}
.global-search-filter-pill {
  position: absolute;
  top: 0;
  left: 0;
  height: var(--openbot-control-xs);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-control-active);
  pointer-events: none;
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out), width var(--openbot-duration-normal) var(--openbot-ease-out);
}
.global-search-filter-pill:is([data-initializing], [data-resizing]) {
  transition: none;
}
.global-search-filters [role="tab"]:focus-visible {
  outline: 0;
  box-shadow: var(--openbot-focus-ring);
}
.global-search-results {
  position: relative;
  inset: auto;
  width: 100%;
  max-height: min(400px, calc(100dvh - 240px));
  overflow-y: auto;
  background: transparent;
  padding: var(--openbot-space-1-5);
  transform: none;
  scrollbar-width: none;
  scroll-padding-block: var(--openbot-space-4);
  transition: height var(--openbot-duration-normal) var(--openbot-ease-out);
}
.global-search-results[data-instant] {
  transition: none;
}
.global-search-dialog [data-popper-positioner] {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  transform: none !important;
}
.global-search-results::-webkit-scrollbar {
  display: none;
}
.global-search-results [role="listbox"] {
  position: relative;
  outline: 0;
}
.global-search-results [role="listbox"] > [data-index] {
  position: absolute;
  right: 0;
  left: 0;
}
.global-search-section {
  display: flex;
  height: var(--openbot-control-sm);
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 var(--openbot-space-2) var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
}
.global-search-section[data-spaced] {
  height: calc(var(--openbot-control-sm) + var(--openbot-space-1-5));
}
.global-search-section-count {
  font-variant-numeric: tabular-nums;
}
.global-search-highlight {
  position: absolute;
  top: 0;
  right: var(--openbot-space-1-5);
  left: var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-control-active);
  pointer-events: none;
  transition: transform var(--openbot-duration-fast) var(--openbot-ease-out), height var(--openbot-duration-fast) var(--openbot-ease-out);
}
.global-search-highlight[data-instant] {
  transition: none;
}
.global-search-result {
  display: flex;
  min-height: var(--openbot-control-lg);
  align-items: center;
  gap: var(--openbot-space-2);
  border-radius: var(--openbot-radius-sm);
  padding: 0 var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  cursor: default;
  outline: 0;
}
.global-search-avatar.agent-avatar {
  --agent-avatar-optical-offset: -1px;
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  flex: 0 0 auto;
}
.global-search-icon {
  display: grid;
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  flex: 0 0 auto;
  place-items: center;
  color: var(--openbot-text-muted);
}
.global-search-icon > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: var(--openbot-icon-stroke);
}
.global-search-result-title, .global-search-result-detail {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.global-search-result-title {
  max-width: 40%;
  flex: 0 1 auto;
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}
.global-search-result-detail {
  flex: 1;
  color: var(--openbot-text-muted);
}
.global-search-result-author {
  flex: 0 0 auto;
  color: var(--openbot-text-secondary);
}
.global-search-result-time {
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
.global-search-match {
  background: transparent;
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}
.global-search-result .global-search-result-enter {
  flex: 0 0 auto;
  border: 0;
  background: var(--openbot-bg-control-hover);
  opacity: 0;
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}
.global-search-result[data-highlighted] .global-search-result-enter, .global-search-results [role="listbox"]:not(:has(.global-search-result[data-highlighted])) .global-search-result[data-first] .global-search-result-enter {
  opacity: 1;
}
.global-search-status, .global-search-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.global-search-status {
  min-height: var(--openbot-control-lg);
  animation: global-search-fade-in var(--openbot-duration-normal) var(--openbot-ease-out) var(--openbot-duration-fast) both;
}
.global-search-empty, .global-search-results:not(:has(.global-search-result)) .global-search-status {
  min-height: 96px;
}
.global-search-empty {
  animation: global-search-fade-in var(--openbot-duration-normal) var(--openbot-ease-out) both;
}
@keyframes global-search-fade-in {
  from {
    opacity: 0;
  }
}
.global-search-footer {
  display: flex;
  height: var(--openbot-control-lg);
  flex: 0 0 auto;
  align-items: center;
  gap: var(--openbot-space-4);
  border-top: 1px solid var(--openbot-border);
  padding: 0 var(--openbot-space-4);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.global-search-hint {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  white-space: nowrap;
}
.global-search-hint .ui-kbd {
  border: 0;
  background: var(--openbot-bg-control-active);
}
.global-search-footer .ui-kbd, .global-search-result .global-search-result-enter {
  font-family: var(--openbot-font-sans);
  font-weight: var(--openbot-weight-medium);
}
.global-search-footer .ui-kbd > svg, .global-search-result .global-search-result-enter > svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  stroke-width: calc(var(--openbot-icon-stroke) * 4 / 3);
}
.global-search-hint .ui-kbd + .ui-kbd {
  margin-left: calc(var(--openbot-space-0-5) * -1);
}
@media (max-width: 640px) {
  .global-search-dialog {
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 124px);
  }
  .global-search-control {
    height: auto;
    flex-wrap: wrap;
    row-gap: 0;
  }
  .global-search-control .global-search-input {
    height: 48px;
  }
  .global-search-filters {
    min-width: 0;
    flex-basis: 100%;
    overflow-x: auto;
    padding-block: var(--openbot-space-1) var(--openbot-space-2);
    scrollbar-width: none;
  }
  .global-search-footer, .global-search-result .global-search-result-enter {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .global-search-dialog, .global-search-empty {
    animation: none;
  }
  .global-search-status {
    animation-duration: 0s;
  }
  .global-search-filter-pill, .global-search-highlight, .global-search-results {
    transition: none;
  }
}
.server-rail {
  --server-rail-inline-padding: 7px;
  position: relative;
  z-index: 45;
  display: flex;
  min-width: var(--server-rail-width);
  flex-direction: column;
  justify-content: space-between;
  padding: 42px var(--server-rail-inline-padding) calc(9px + 52px);
  background: var(--openbot-bg-sidebar);
  -webkit-app-region: drag;
}
.server-rail::before {
  position: absolute;
  top: calc(var(--left-header-height) - 1px);
  right: 0;
  left: 0;
  height: 1px;
  background: var(--openbot-border);
  content: "";
  pointer-events: none;
}
.server-rail::after {
  position: absolute;
  top: var(--left-header-height);
  right: 0;
  bottom: 0;
  width: clamp(0.5px, 0.05123cqw, 1px);
  background: var(--openbot-border);
  content: "";
  pointer-events: none;
}
.server-rail-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  width: calc(100% + var(--server-rail-inline-padding) + var(--server-rail-inline-padding));
  min-height: 0;
  flex: 1 1 auto;
  margin-inline: calc(-1 * var(--server-rail-inline-padding));
  padding-inline: var(--server-rail-inline-padding);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.server-rail-list::-webkit-scrollbar {
  display: none;
}
.server-rail-tooltip-trigger {
  display: flex;
}
.server-rail-remote-list {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.server-rail-server-item {
  --server-rail-drag-step: 0;
  position: relative;
  display: flex;
  width: 100%;
  justify-content: center;
  opacity: 1;
  transform: translate3d(0, calc(var(--server-rail-drag-step) * 54px), 0);
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out), opacity var(--openbot-duration-normal) var(--openbot-ease-out);
}
.server-rail-server-item .server-rail-button {
  cursor: grab;
}
.server-rail-server-item-dragging {
  z-index: 1;
  opacity: 0.55;
}
.server-rail-drag-preview {
  position: fixed;
  z-index: var(--openbot-layer-dropdown);
  box-sizing: border-box;
  margin: 0;
  list-style: none;
  opacity: 0.96;
  pointer-events: none;
  transform: none;
  transition: none;
}
.server-rail-server-item-dragging .server-rail-button, .server-rail-remote-list[data-dragging] {
  cursor: grabbing;
}
.server-rail-remote-list[data-dragging] .server-rail-server-item {
  will-change: transform;
}
.server-rail-button {
  position: relative;
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  place-items: center;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--openbot-text-secondary);
  cursor: pointer;
  -webkit-app-region: no-drag;
}
@media (hover: hover) and (pointer: fine) {
  .ui-button.server-rail-button.ui-button-variant-outline:hover:not(:disabled) {
    background: transparent;
    color: var(--openbot-text-secondary);
  }
}
.server-rail-monogram {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: 740;
  letter-spacing: -0.02em;
}
.server-rail-logo {
  width: 40px;
  height: 40px;
  display: block;
  border-radius: var(--openbot-radius-lg);
  object-fit: cover;
  outline: 1px solid var(--openbot-image-outline);
  outline-offset: -1px;
}
.server-rail-mark {
  position: absolute;
  top: 50%;
  left: -7px;
  width: 3px;
  height: 0;
  border-radius: 0 var(--openbot-radius-xs) var(--openbot-radius-xs) 0;
  background: var(--openbot-text-primary);
  opacity: 0;
  transform: translateY(-50%);
  transition: height var(--openbot-duration-hover) var(--openbot-ease-out), opacity var(--openbot-duration-hover) ease;
}
.server-rail-button[aria-pressed="true"] .server-rail-mark {
  height: 26px;
  opacity: 1;
}
.server-rail-button[aria-pressed="false"]:hover .server-rail-mark {
  height: 12px;
  opacity: 1;
}
.server-rail-action .server-rail-monogram {
  border-style: dashed;
  background: transparent;
  color: var(--openbot-accent-text);
  font-size: var(--openbot-text-2xl);
  font-weight: 400;
}
.server-rail-action svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--openbot-icon-stroke);
}
.server-rail-tooltip {
  z-index: var(--openbot-layer-tooltip);
  max-width: min(240px, calc(100vw - 16px));
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-surface-raised);
  box-shadow: var(--openbot-shadow-raised);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-md);
  overflow-wrap: anywhere;
  pointer-events: none;
}
.server-rail-tooltip::before {
  position: absolute;
  top: 50%;
  left: -6px;
  width: 6px;
  height: 12px;
  background: var(--openbot-bg-surface-raised);
  clip-path: polygon(100% 0, 100% 100%, 0 50%);
  content: "";
  transform: translateY(-50%);
}
@media (max-width: 800px) {
  .app-frame-with-server-rail {
    --server-rail-width: 56px;
  }
  .app-frame-platform-darwin {
    --server-rail-width: 72px;
  }
  .server-rail {
    --server-rail-inline-padding: 5px;
  }
}
.panel-resizer {
  position: relative;
  z-index: 40;
  display: flex;
  width: 16px;
  height: 100%;
  align-items: center;
  justify-content: center;
  margin: 0;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: col-resize;
  touch-action: none;
  transform: translateX(-50%);
  user-select: none;
  -webkit-app-region: no-drag;
}
.panel-resizer::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  pointer-events: none;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--openbot-text-dim) 50%, transparent);
  content: "";
  opacity: 0;
  transform: translateX(-50%);
}
.panel-resizer:hover::after, .panel-resizer:focus-visible::after, .panel-resizer-active::after {
  opacity: 1;
}
.panel-resizer:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 1px var(--openbot-border-strong);
}
html.panel-resizing {
  --panel-resize-duration: 0ms;
  cursor: col-resize;
  user-select: none;
}
.right-panel-resizer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  height: auto;
}
.app-frame > * {
  min-height: 0;
}
.panel-edge {
  border-right: clamp(0.5px, 0.05123cqw, 1px) solid var(--openbot-border);
}
.window-drag {
  -webkit-app-region: drag;
}
.no-drag, button, input, textarea {
  -webkit-app-region: no-drag;
}
.sidebar {
  display: flex;
  min-width: 0;
  overflow: hidden;
  flex-direction: column;
  background: var(--openbot-bg-sidebar);
  color: var(--openbot-text-primary);
  container-type: inline-size;
}
.sidebar-topbar {
  display: flex;
  height: var(--left-header-height);
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  border-bottom: 1px solid var(--openbot-border);
  padding: 2px 3px 0 10px;
}
@media (min-width: 721px) {
  .app-frame-edge > .server-rail {
    background: var(--openbot-bg-native-sidebar);
  }
  .app-frame-edge > .server-rail::before, .app-frame-edge > .server-rail::after {
    content: none;
  }
  .app-frame-edge > .sidebar {
    position: relative;
    isolation: isolate;
    border-right: 0;
  }
  .app-frame-edge > .sidebar::before {
    position: absolute;
    z-index: -1;
    content: "";
    pointer-events: none;
  }
  .app-frame-edge .sidebar-topbar {
    border-bottom: 0;
  }
  .app-frame-edge .sidebar-search-wrap {
    padding-top: 11px;
  }
  .app-frame-edge .sidebar-compact-search {
    top: 11px;
  }
  .app-frame-edge .conversation-panel, .app-frame-edge .direct-conversation {
    isolation: isolate;
  }
  .app-frame-edge .conversation-header, .app-frame-edge .first-agent-setup-header {
    border-bottom: 0;
    background: transparent;
  }
  .app-frame-edge .diagram-view-header {
    border-bottom: 0;
    background: transparent;
  }
  .app-frame-edge .diagram-view-body {
    overflow: hidden;
    background: var(--openbot-bg-canvas);
  }
  .app-frame-edge .header-panel-toggle[aria-expanded="true"]:not(.computer-button-agent-active, .side-panel-toggle) {
    border-color: var(--openbot-border-strong);
    background: var(--openbot-bg-control-hover);
    color: var(--openbot-text-primary);
  }
  .app-frame-edge .direct-conversation-header {
    height: var(--left-header-height);
    border-bottom: 0;
    background: transparent;
  }
  .app-frame-edge .direct-conversation-person .person-avatar {
    width: 26px;
    height: 26px;
  }
  .app-frame-edge .remote-compatibility-screen {
    background: linear-gradient(var(--openbot-border-strong), var(--openbot-border-strong)) 0 calc(var(--left-header-height) - 1px) / 100% 1px no-repeat, linear-gradient(var(--openbot-bg-native-sidebar), var(--openbot-bg-native-sidebar)) 0 0 / 100% var(--left-header-height) no-repeat;
  }
  .app-frame-edge .settings-panel, .app-frame-edge .browser-panel {
    isolation: isolate;
  }
  .app-frame-edge .settings-panel::before, .app-frame-edge .browser-panel::before {
    position: absolute;
    z-index: -1;
    content: "";
    pointer-events: none;
  }
  .app-frame-edge .settings-panel-header, .app-frame-edge .file-preview-header, .app-frame-edge .browser-preview-header {
    height: var(--left-header-height);
    border-bottom: 0;
    background: transparent;
  }
}
.sidebar-server-name {
  min-width: 0;
  max-width: 100%;
  height: var(--openbot-control-sm);
  overflow: hidden;
  flex: 0 1 auto;
  justify-content: flex-start;
  gap: var(--openbot-space-1-5);
  margin-right: auto;
  border-radius: var(--openbot-radius-pill);
  padding: 0 var(--openbot-space-2) 0 var(--openbot-space-1);
  color: var(--openbot-text-primary);
  cursor: pointer;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-md);
  opacity: 1;
  text-align: left;
  transition: background-color var(--openbot-duration-hover) ease, border-color var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease, box-shadow var(--openbot-duration-hover) ease, opacity var(--openbot-duration-fast) ease;
}
.sidebar-server-name[aria-expanded="true"] {
  background: var(--ui-menu-item-hover);
}
.sidebar-server-name > .sidebar-server-name-mark {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
}
.sidebar-server-name-mark[data-entering] {
  animation: sidebar-server-mark-in 420ms cubic-bezier(0.34, 1.36, 0.64, 1) both;
}
.sidebar-server-name-label {
  min-width: 0;
  flex: 0 1 auto;
  white-space: nowrap;
}
.sidebar-server-name-label > span:not(.ui-swap-leaving) {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-server-name > .sidebar-server-name-chevron {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
}
.sidebar-server-name > .sidebar-server-name-sleep {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
}
.sidebar-server-name > .sidebar-server-name-sleep[data-state="waking"] {
  color: var(--openbot-accent);
  animation: server-sleep-waking 1200ms ease-in-out infinite;
}
@keyframes sidebar-server-mark-in {
  from {
    opacity: 0;
    scale: 0.6;
    filter: blur(2px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar-server-name-mark[data-entering] {
    animation: none;
  }
}
.app-frame-platform-darwin:not(.app-frame-with-server-rail, .web-app-frame) .sidebar-topbar {
  padding-left: 78px;
}
.app-frame-platform-darwin:not(.app-frame-with-server-rail, .web-app-frame) .sidebar-compact .sidebar-topbar {
  height: calc(var(--left-header-height) + 36px);
  align-items: flex-end;
  justify-content: center;
  padding: 0 0 2px;
}
.app-frame-platform-darwin:not(.app-frame-with-server-rail, .web-app-frame) .sidebar-compact .sidebar-server-name, .app-frame-platform-darwin:not(.app-frame-with-server-rail, .web-app-frame) .sidebar-compact .sidebar-new-button {
  display: none;
}
.app-frame-platform-darwin:not(.app-frame-with-server-rail, .web-app-frame) .sidebar-compact .sidebar-toggle-button {
  transform: none;
}
.app-frame-platform-darwin:not(.app-frame-with-server-rail, .web-app-frame) .sidebar-compact .sidebar-toggle-button:active {
  transform: scale(0.96);
}
.server-menu {
  min-width: 240px;
  max-width: 300px;
  max-height: min(520px, calc(100dvh - 16px), var(--kb-popper-content-available-height, 520px));
  overflow-y: auto;
}
.server-menu-row {
  gap: var(--openbot-space-2);
}
.server-menu-mark {
  position: relative;
  display: grid;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  overflow: hidden;
  place-items: center;
  border-radius: var(--openbot-radius-pill);
}
.server-menu-mark::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--openbot-text-primary) 12%, transparent);
  }
  content: "";
}
.server-menu-mark > * {
  width: 100%;
  height: 100%;
}
.server-menu-name {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.server-menu-muted {
  flex: 0 0 auto;
  color: var(--openbot-text-secondary);
}
.server-menu-sleep {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-muted);
}
.server-menu-sleep[data-state="waking"] {
  background: var(--openbot-accent);
  animation: server-sleep-waking 1200ms ease-in-out infinite;
}
.server-menu .server-menu-layout-chevron {
  margin-left: 0;
}
.ui-action-menu .server-menu-add {
  color: var(--openbot-text-secondary);
}
.ui-action-menu .server-menu-add:is(:hover, [data-highlighted]) {
  color: var(--openbot-text-primary);
}
.server-menu-add-circle {
  display: grid;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  place-items: center;
  border: 1px dashed var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px dashed color-mix(in srgb, var(--openbot-text-primary) 30%, transparent);
  }
  border-radius: var(--openbot-radius-pill);
}
.ui-action-menu .server-menu-add-circle > svg {
  width: var(--ui-menu-inset);
  height: var(--ui-menu-inset);
  stroke-width: 2.5;
}
.ui-action-menu .server-menu-add:is(:hover, [data-highlighted]) .server-menu-add-circle {
  border-color: transparent;
  background: var(--openbot-text-primary);
}
.ui-action-menu .server-menu-add:is(:hover, [data-highlighted]) .server-menu-add-circle > svg {
  color: var(--ui-menu-bg);
}
.sidebar-topbar-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 3px;
}
.sidebar-icon-button {
  position: relative;
  z-index: 2;
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  color: var(--openbot-text-muted);
  pointer-events: auto;
  cursor: pointer;
  -webkit-app-region: no-drag;
  transition: background-color var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease, opacity var(--openbot-duration-normal) ease, transform var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1);
}
.sidebar-icon-button:hover {
  background: var(--openbot-border);
  color: var(--openbot-text-primary);
}
.sidebar-icon-button:active {
  transform: scale(0.96);
}
.sidebar-icon-button:focus-visible {
  outline: 1px solid var(--openbot-text-muted);
  outline-offset: 1px;
}
.header-panel-toggle {
  position: relative;
  z-index: 2;
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  color: var(--openbot-text-muted);
  pointer-events: auto;
  cursor: pointer;
  -webkit-app-region: no-drag;
  transition: border-color var(--openbot-duration-hover) ease, background-color var(--openbot-duration-hover) ease, box-shadow var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease, transform var(--openbot-duration-fast) cubic-bezier(0.23, 1, 0.32, 1);
}
.header-panel-toggle:hover {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-hover);
  color: var(--openbot-text-primary);
}
.header-panel-toggle:active {
  transform: scale(0.92);
  transition-duration: var(--openbot-duration-fast);
}
.header-panel-toggle:focus-visible {
  outline: 1px solid var(--openbot-text-muted);
  outline-offset: 1px;
}
.sidebar-toggle-icon {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sidebar-marketplace-button > svg {
  width: 18px;
  height: 18px;
  stroke-width: var(--openbot-icon-stroke);
}
.sidebar-update-button, .sidebar-update-button:hover {
  color: var(--openbot-accent-text);
}
.sidebar-update-button > svg {
  width: 18px;
  height: 18px;
  stroke-width: var(--openbot-icon-stroke);
}
.sidebar-search-wrap {
  position: relative;
  padding: 8px 12px 6px;
}
.sidebar-search-trigger {
  width: 100%;
  justify-content: flex-start;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-regular);
  line-height: 18px;
  cursor: pointer;
}
.sidebar-search-trigger:hover:not(:disabled) {
  border-color: var(--openbot-text-dim);
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-dim);
}
.sidebar-search-placeholder {
  color: var(--openbot-text-muted);
}
.sidebar-compact-search {
  position: absolute;
  inset: 8px 12px 6px;
  display: grid;
  height: 32px;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  color: var(--openbot-text-muted);
  opacity: 0;
  pointer-events: none;
  transform: translateX(6px) scale(0.96);
  cursor: pointer;
  transition: background-color var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease, opacity var(--openbot-duration-fast) ease, transform var(--openbot-duration-slow) cubic-bezier(0.32, 0.72, 0, 1);
}
.sidebar-compact-search:hover {
  background: var(--openbot-hover);
  color: var(--openbot-text-primary);
}
.sidebar-compact-search:active {
  transform: scale(0.96);
}
.search-field {
  display: flex;
  height: 32px;
  align-items: center;
  gap: 8px;
  border: 0.5px solid var(--openbot-border);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-hover);
  padding: 0 9px;
  color: var(--openbot-text-dim);
  opacity: 1;
  transform: translateX(0);
  transition: border-color var(--openbot-duration-hover) ease, background-color var(--openbot-duration-hover) ease, box-shadow var(--openbot-duration-hover) ease, opacity var(--openbot-duration-fast) ease, transform var(--openbot-duration-slow) cubic-bezier(0.32, 0.72, 0, 1);
}
.search-field:focus-within {
  border-color: var(--openbot-text-dim);
  background: var(--openbot-bg-surface);
}
.search-field:has(input:focus-visible) {
  box-shadow: var(--openbot-focus-ring);
}
.search-field input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: 18px;
}
.search-field input::placeholder {
  color: var(--openbot-text-muted);
}
.agent-list {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 4px 12px 0;
  scrollbar-width: none;
}
.agent-list::-webkit-scrollbar {
  display: none;
}
.agent-list-content {
  position: relative;
}
.sidebar-list-context-trigger {
  min-height: 76px;
  flex: 1 0 76px;
}
.sidebar-chat-group + .sidebar-chat-group {
  margin-top: 6px;
  transition: margin-top var(--panel-resize-duration, var(--openbot-duration-overlay)) cubic-bezier(0.32, 0.72, 0, 1);
}
.sidebar-section, .sidebar-agent-item, .sidebar-person-item, .sidebar-pinned-item {
  --sidebar-drag-x: 0px;
  --sidebar-drag-y: 0px;
}
.sidebar-drag-shifting {
  will-change: transform;
}
.sidebar-section {
  position: relative;
  border-radius: var(--openbot-radius-md);
  opacity: 1;
  transform: translate3d(var(--sidebar-drag-x), var(--sidebar-drag-y), 0);
  transition-property: background-color, box-shadow, opacity, transform;
  transition-duration: var(--openbot-duration-fast);
  transition-timing-function: ease-out;
}
.sidebar-section-agent-drop-target {
  background: var(--openbot-accent-soft);
  box-shadow: inset 0 0 0 1px var(--openbot-accent-strong);
}
.sidebar-section-drop-before::before, .sidebar-section-drop-after::after {
  position: absolute;
  z-index: 3;
  right: 7px;
  left: 7px;
  height: 2px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent-text);
  box-shadow: 0 0 0 1px var(--openbot-bg-sidebar);
  content: "";
  pointer-events: none;
}
.sidebar-section-drop-before::before {
  top: -4px;
}
.sidebar-section-drop-after::after {
  bottom: -4px;
}
.sidebar-section-dragging {
  opacity: 0;
  transition: none;
  will-change: transform;
}
.sidebar-section-dragging * {
  animation-play-state: paused;
}
.sidebar-chat-group > header {
  display: flex;
  height: 32px;
  overflow: hidden;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  opacity: 1;
  transform: translateY(0);
  transition: height var(--panel-resize-duration, var(--openbot-duration-overlay)) cubic-bezier(0.32, 0.72, 0, 1), opacity var(--openbot-duration-fast) ease, transform var(--openbot-duration-slow) cubic-bezier(0.32, 0.72, 0, 1);
}
.sidebar-section-drag-handle, .sidebar-agent-item .agent-row, .sidebar-person-item .person-row {
  cursor: grab;
  touch-action: pan-y;
}
.agent-list[data-sidebar-dragging], .agent-list[data-sidebar-dragging] .sidebar-section-drag-handle, .agent-list[data-sidebar-dragging] .sidebar-section-toggle, .agent-list[data-sidebar-dragging] .agent-row, .agent-list[data-sidebar-dragging] .person-row {
  cursor: grabbing;
}
.agent-list[data-sidebar-dragging="chat"] .sidebar-section-toggle, .agent-list[data-sidebar-dragging="person"] .sidebar-section-toggle {
  pointer-events: none;
}
.agent-list[data-sidebar-dragging] .sidebar-section-toggle:hover, .agent-list[data-sidebar-dragging] .sidebar-section-toggle:focus-visible {
  background: transparent;
  color: var(--openbot-text-readable);
}
.agent-list[data-sidebar-dragging] .sidebar-section-toggle:hover .sidebar-section-chevron, .agent-list[data-sidebar-dragging] .sidebar-section-toggle:focus-visible .sidebar-section-chevron {
  opacity: 0;
}
.sidebar-section-toggle {
  display: flex;
  width: 100%;
  min-width: 0;
  height: 32px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-radius: var(--openbot-radius-md);
  padding: 0 7px;
  background: transparent;
  color: var(--openbot-text-readable);
  transition-property: color;
  transition-duration: var(--openbot-duration-hover);
  transition-timing-function: ease-out;
}
.sidebar-section-toggle:hover, .sidebar-section-toggle:focus-visible {
  background: transparent;
  color: var(--openbot-text-secondary);
}
.sidebar-section-toggle[aria-expanded="true"] {
  background: transparent;
}
.sidebar-section-toggle:active {
  scale: 0.96;
}
.sidebar-section-name {
  min-width: 0;
  overflow: hidden;
  font-size: var(--openbot-text-sm);
  font-weight: 400;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-section-chevron {
  flex: 0 0 auto;
  opacity: 0;
  transform: rotate(0deg);
  transition: opacity var(--openbot-duration-hover) ease-out, transform var(--openbot-duration-fast) var(--openbot-ease-out);
}
.sidebar-section-toggle:hover .sidebar-section-chevron, .sidebar-section-toggle:focus-visible .sidebar-section-chevron {
  opacity: 1;
}
.sidebar-section-chevron-collapsed {
  transform: rotate(-90deg);
}
.sidebar-section-collapse {
  display: grid;
  opacity: 1;
  grid-template-rows: 1fr;
  transition-property: grid-template-rows, opacity;
  transition-duration: var(--openbot-duration-normal), var(--openbot-duration-fast);
  transition-timing-function: var(--openbot-ease-out), ease-out;
}
.sidebar-section-collapse[data-collapsed] {
  opacity: 0;
  grid-template-rows: 0fr;
}
.sidebar-section-body {
  min-height: 0;
  overflow: hidden;
}
.sidebar-section-editor-wrap {
  position: relative;
  width: 100%;
}
.sidebar-waiting-group {
  border-bottom: 1px solid var(--openbot-border);
  padding-bottom: var(--openbot-space-2);
}
.sidebar-waiting-group-name {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
  margin: 0;
  padding: 0 7px;
  color: var(--openbot-text-readable);
  font-size: var(--openbot-text-sm);
  font-weight: 400;
  line-height: 16px;
  white-space: nowrap;
}
.sidebar-waiting-group-count {
  display: inline-grid;
  min-width: 16px;
  height: 16px;
  place-items: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-warning);
  padding: 0 4px;
  color: var(--openbot-bg-sidebar);
  font-size: var(--openbot-text-sm);
  font-weight: 650;
}
.sidebar-hidden-group-count {
  margin-inline-start: var(--openbot-space-1);
  font-variant-numeric: tabular-nums;
}
.sidebar-chat-group > .sidebar-section-editor-wrap {
  height: 36px;
}
.sidebar-section-editor {
  width: 100%;
  height: 36px;
  border-color: var(--openbot-border-focus);
  border-radius: var(--openbot-radius-md);
  padding: 0 32px 0 8px;
  background: var(--openbot-bg-control);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
}
.sidebar-section-editor[aria-invalid="true"] {
  border-color: var(--openbot-danger);
}
.sidebar-section-editor-chevron {
  position: absolute;
  top: 50%;
  right: 9px;
  color: var(--openbot-text-muted);
  pointer-events: none;
  transform: translateY(-50%);
}
.sidebar-section-draft {
  min-height: 36px;
}
.sidebar-agent-drag-preview, .sidebar-person-drag-preview, .sidebar-section-drag-preview {
  position: fixed;
  z-index: var(--openbot-layer-dropdown);
  box-sizing: border-box;
  margin: 0;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface-raised);
  box-shadow: var(--openbot-shadow-raised);
  opacity: 0.96;
  pointer-events: none;
  transform: none;
  transition: none;
}
.sidebar-agent-drag-preview *, .sidebar-person-drag-preview *, .sidebar-section-drag-preview * {
  animation: none;
  transition: none;
}
.sidebar-section-drag-preview.sidebar-section-toggle {
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-secondary);
}
.agent-row.sidebar-agent-drag-preview {
  background: var(--openbot-bg-surface-raised);
  transition: none;
}
.agent-row.sidebar-person-drag-preview {
  background: var(--openbot-bg-surface-raised);
  transition: none;
}
.agent-row.sidebar-agent-drag-preview *, .agent-row.sidebar-person-drag-preview * {
  animation: none;
  transition: none;
}
.sidebar-agent-item {
  position: relative;
  transform: translate3d(var(--sidebar-drag-x), var(--sidebar-drag-y), 0);
  transition: transform var(--openbot-duration-fast) var(--openbot-ease-out);
}
.sidebar-agent-item + .sidebar-agent-item {
  margin-top: 4px;
}
.sidebar-agent-item-dragging {
  will-change: transform;
}
.agent-list[data-sidebar-dragging="chat"] .sidebar-agent-item {
  transition: none;
  will-change: transform;
}
.agent-list[data-sidebar-dragging="person"] .sidebar-person-item {
  will-change: transform;
}
.sidebar-agent-item-dragging {
  z-index: 1;
  opacity: 0;
  transition: none;
}
.sidebar-person-item-dragging {
  pointer-events: none;
}
.sidebar-agent-row-dragging * {
  animation-play-state: paused;
}
.sidebar-agent-row-dragging {
  opacity: 0;
  transition: none;
}
.sidebar-person-item {
  position: relative;
  transform: translate3d(var(--sidebar-drag-x), var(--sidebar-drag-y), 0);
  transition: transform var(--openbot-duration-fast) var(--openbot-ease-out);
}
.sidebar-person-item + .sidebar-person-item {
  margin-top: 4px;
}
.sidebar-person-item-dragging {
  will-change: transform;
}
.sidebar-person-item-dragging .person-row * {
  animation-play-state: paused;
}
.sidebar-person-item-dragging .person-row {
  opacity: 0;
  transition: none;
}
.sidebar-pinned-group-agent-drop-target {
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-accent-soft);
  box-shadow: inset 0 0 0 1px var(--openbot-accent-strong);
}
.sidebar-pinned-group.sidebar-pinned-group-empty-target {
  display: grid;
  z-index: 4;
  width: 100%;
  grid-template-rows: 1fr;
  padding: 0;
  opacity: 1;
}
.sidebar-pinned-group-empty-target .sidebar-pinned-list {
  width: 100%;
  min-height: 0;
  padding: 4px 0 2px;
  overflow: hidden;
}
.sidebar-pinned-empty-drop {
  display: flex;
  width: 100%;
  height: 104px;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--openbot-border-strong);
  border-radius: var(--openbot-radius-lg);
  background: transparent;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 20px;
  list-style: none;
  transition: border-color var(--openbot-duration-fast) ease-out, background-color var(--openbot-duration-fast) ease-out, color var(--openbot-duration-fast) ease-out;
}
.sidebar-pinned-group-empty-target.sidebar-pinned-group-agent-drop-target {
  background: transparent;
  box-shadow: none;
}
.sidebar-pinned-group-empty-target.sidebar-pinned-group-agent-drop-target .sidebar-pinned-empty-drop {
  border-color: var(--openbot-accent-strong);
  background: var(--openbot-accent-soft);
  color: var(--openbot-text-primary);
}
.sidebar-pinned-group {
  padding: 4px 0 2px;
}
.sidebar-pinned-list {
  box-sizing: border-box;
  display: flex;
  width: min(236px, 100%);
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: center;
  margin: 0 auto;
  gap: 8px;
  list-style: none;
  padding: 2px;
}
.sidebar-pinned-item {
  position: relative;
  width: 72px;
  flex: 0 0 72px;
  opacity: 1;
  transform: translate3d(var(--sidebar-drag-x), var(--sidebar-drag-y), 0);
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.agent-row.sidebar-pinned-row {
  width: 72px;
  height: 94px;
  min-height: 94px;
  flex-direction: column;
  justify-content: flex-start;
  gap: 4px;
  padding: 4px 2px;
  cursor: grab;
  text-align: center;
}
.sidebar-pinned-row:active {
  transform: scale(0.96);
}
.agent-row.sidebar-pinned-row .sidebar-pinned-avatar {
  width: 48px;
  height: 48px;
  flex-basis: 48px;
}
.agent-row.sidebar-pinned-row .agent-avatar, .agent-row.sidebar-pinned-row.person-row .person-avatar {
  width: 48px;
  height: 48px;
}
.sidebar-pinned-copy {
  display: flex;
  width: 100%;
  min-height: 34px;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
}
.sidebar-pinned-name {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: 450;
  line-height: 16px;
  text-align: center;
  text-overflow: ellipsis;
  text-wrap: pretty;
  white-space: nowrap;
}
.sidebar-pinned-title {
  box-sizing: border-box;
  max-width: 100%;
  height: 18px;
  min-height: 18px;
  flex: 0 0 16px;
  border-color: var(--openbot-border);
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-hover);
  padding: 0 var(--openbot-space-1);
  color: var(--openbot-text-readable);
  font-weight: 400;
}
.sidebar-pinned-title > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-pinned-item-dragging {
  z-index: 1;
  opacity: 0;
}
.sidebar-pinned-list[data-dragging], .sidebar-pinned-item-dragging .sidebar-pinned-row {
  cursor: grabbing;
}
.sidebar-pinned-list[data-dragging] .sidebar-pinned-item {
  will-change: transform;
}
.sidebar-pinned-drag-preview {
  position: fixed;
  z-index: var(--openbot-layer-dropdown);
  box-sizing: border-box;
  margin: 0;
  list-style: none;
  opacity: 0.96;
  pointer-events: none;
  transform: none;
  transition: none;
}
.person-avatar {
  position: relative;
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--openbot-radius-md);
  color: var(--openbot-success);
  font-size: var(--openbot-text-sm);
  font-weight: 680;
  letter-spacing: 0.02em;
}
.person-avatar > img, .person-avatar > .person-avatar-generated {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.person-avatar > img {
  object-fit: cover;
}
.person-avatar > i {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--openbot-bg-sidebar);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control-hover);
}
.person-avatar.online > i {
  background: var(--openbot-success);
}
.person-avatar.large {
  width: 48px;
  height: 48px;
  border-radius: var(--openbot-radius-lg);
  font-size: var(--openbot-text-md);
}
.person-row .person-avatar {
  width: 34px;
  height: 34px;
}
.person-unread-badge {
  position: absolute;
  z-index: 2;
  right: -4px;
  bottom: -3px;
  display: grid;
  min-width: 17px;
  height: 17px;
  place-items: center;
  border: 2px solid var(--openbot-bg-sidebar);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-primary);
  padding: 0 3px;
  color: var(--openbot-bg-sidebar);
  font-size: var(--openbot-text-sm);
  font-weight: 680;
}
.agent-row {
  display: flex;
  width: 100%;
  height: 54px;
  min-height: 54px;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  padding: 8px;
  color: inherit;
  text-align: left;
  transition: background-color var(--openbot-duration-hover) ease, border-color var(--openbot-duration-hover) ease, transform var(--openbot-duration-normal) ease;
}
.agent-row + .agent-row {
  margin-top: 4px;
}
.agent-row:hover {
  background: var(--openbot-hover);
}
.agent-row:active {
  transform: scale(0.99);
}
.agent-row-active {
  background: var(--openbot-bg-surface);
}
.agent-row-avatar {
  position: relative;
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  transform: translateX(0);
  transition: transform var(--panel-resize-duration, var(--openbot-duration-overlay)) cubic-bezier(0.32, 0.72, 0, 1);
}
.sidebar-agent-item-user-hidden .agent-row-avatar {
  opacity: 0.5;
  filter: grayscale(1);
}
.agent-row-agent-status {
  position: absolute;
  z-index: 1;
  right: -5px;
  bottom: -3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--openbot-bg-sidebar);
  box-shadow: 0 1px 3px var(--openbot-shadow-popover-ambient);
  pointer-events: none;
}
.agent-row-active .agent-row-agent-status {
  border-color: var(--openbot-bg-control);
}
.agent-row-agent-status-working {
  width: 24px;
  height: 16px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-secondary);
}
.agent-row-thinking-dots {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.agent-row-thinking-dots i {
  width: 3px;
  height: 3px;
  border-radius: var(--openbot-radius-pill);
  background: currentColor;
  --typing-dot-travel: -1px;
  animation: typing-dot-pulse 900ms ease-in-out infinite;
}
.agent-row-thinking-dots i:nth-child(2) {
  animation-delay: var(--openbot-duration-fast);
}
.agent-row-thinking-dots i:nth-child(3) {
  animation-delay: var(--openbot-duration-overlay);
}
.agent-row-agent-status-responded {
  width: 16px;
  height: 16px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success);
  color: var(--openbot-success);
}
.agent-row-agent-status-responded svg {
  width: 10px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--openbot-icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.agent-row-agent-status-unread {
  min-width: 16px;
  height: 16px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-primary);
  padding: 0 3px;
  color: var(--openbot-bg-sidebar);
  font-size: var(--openbot-text-sm);
  font-weight: 650;
  line-height: 12px;
}
.agent-row-agent-status-routine, .agent-row-agent-status-limited {
  width: 16px;
  height: 16px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-secondary);
}
.agent-row-agent-status-routine svg, .agent-row-agent-status-limited svg {
  width: 10px;
  height: 10px;
}
.agent-row-agent-status-routine-failed {
  color: var(--openbot-danger);
}
.agent-row-agent-status-waiting {
  width: 18px;
  height: 18px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-warning);
  color: var(--openbot-bg-sidebar);
}
.agent-row-agent-status-waiting svg {
  width: 11px;
  height: 11px;
}
.agent-row-wait-chip {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 3px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-warning-soft);
  padding: 1px 7px 1px 5px;
  color: var(--openbot-warning-text);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  line-height: 16px;
  white-space: nowrap;
}
.agent-row-wait-chip svg {
  width: 11px;
  height: 11px;
}
.sidebar-agent-tooltip-trigger {
  display: block;
}
.sidebar-wait-tooltip {
  z-index: var(--openbot-layer-tooltip);
  display: grid;
  max-width: min(260px, calc(100vw - 16px));
  gap: 2px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-surface-raised);
  box-shadow: var(--openbot-shadow-raised);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  pointer-events: none;
}
.sidebar-wait-tooltip-title {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  color: var(--openbot-warning-text);
  font-weight: var(--openbot-weight-semibold);
}
.sidebar-wait-tooltip-title svg {
  width: 14px;
  height: 14px;
}
.sidebar-wait-tooltip-detail {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow-wrap: anywhere;
}
.sidebar-wait-tooltip-hint {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.agent-row-agent-status-entering {
  animation: sidebar-reply-in var(--openbot-duration-overlay) cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes typing-dot-pulse {
  0%, 60%, 100% {
    opacity: 0.34;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(var(--typing-dot-travel, -2px));
  }
}
@keyframes sidebar-reply-in {
  from {
    opacity: 0;
    transform: scale(0.55);
  }
}
.agent-context-submenu-chevron {
  margin-left: auto;
  color: var(--openbot-text-muted);
}
.agent-context-submenu {
  max-height: min(520px, calc(100vh - 16px));
  overflow-y: auto;
}
@keyframes agent-context-in {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(-3px);
  }
}
.agent-avatar {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  color: currentColor;
  overflow: visible;
}
.agent-avatar > svg {
  display: block;
  width: 128%;
  height: 128%;
  overflow: visible;
  translate: var(--agent-avatar-optical-offset-x, 0) var(--agent-avatar-optical-offset, 0);
}
.agent-avatar-custom {
  overflow: hidden;
  background: var(--openbot-hover);
  box-shadow: inset 0 0 0 1px var(--openbot-border);
}
.agent-avatar-custom > img, .composer-mention-avatar > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.agent-avatar[data-avatar="image"]:is([data-mood="working"], [data-mood="connecting"]) {
  position: relative;
  overflow: visible;
}
.agent-avatar[data-avatar="image"]:is([data-mood="working"], [data-mood="connecting"]) > img {
  border-radius: var(--openbot-radius-pill);
}
.agent-avatar[data-breathe] {
  animation: agent-avatar-breathe 2.6s ease-in-out infinite;
}
@keyframes agent-avatar-breathe {
  0%, 100% {
    scale: calc(1 - var(--agent-avatar-breathe, 0));
  }
  50% {
    scale: calc(1 + var(--agent-avatar-breathe, 0));
  }
}
.agent-avatar[data-mood="waiting"] {
  filter: drop-shadow(0 0 3px var(--openbot-accent));
}
.agent-avatar[data-mood="failed"] {
  filter: drop-shadow(0 0 3px var(--openbot-danger));
}
.agent-avatar[data-mood="asleep"] {
  opacity: 0.6;
}
@media (prefers-reduced-motion: reduce) {
  .agent-avatar[data-breathe] {
    animation: none;
  }
}
.agent-avatar > .agent-avatar-arcs {
  position: absolute;
  inset: -29%;
  width: auto;
  height: auto;
  overflow: visible;
  translate: none;
}
.agent-row .agent-avatar {
  --agent-avatar-optical-offset: -4px;
  width: 36px;
  height: 36px;
}
.person-row .person-avatar {
  width: 36px;
  height: 36px;
}
.avatar-editor {
  position: relative;
  z-index: var(--openbot-layer-popover);
  width: min(284px, calc(var(--settings-panel-width, 296px) - 30px));
  max-width: calc(100vw - 24px);
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-overlay);
  box-shadow: 0 22px 60px var(--openbot-bg-overlay), 0 3px 12px var(--openbot-shadow-popover-ambient), inset 0 1px var(--openbot-hover);
  backdrop-filter: blur(18px);
  transform-origin: var(--kb-popover-content-transform-origin);
  animation: avatar-editor-in var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1) both;
}
@keyframes avatar-editor-in {
  from {
    opacity: 0;
    transform: translateY(-5px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.avatar-editor-divider {
  height: 1px;
  background: var(--openbot-border);
}
.avatar-editor-heading {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px 3px 13px;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: 590;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.avatar-editor-heading > span {
  white-space: nowrap;
}
.avatar-editor-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}
.avatar-editor-actions button {
  min-height: 40px;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  padding: 0 9px;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: 540;
  transition-property: scale, background-color, color;
  transition-duration: var(--openbot-duration-normal), var(--openbot-duration-hover), var(--openbot-duration-hover);
  transition-timing-function: ease-out;
}
.avatar-editor-actions .ui-icon-button {
  width: var(--openbot-control-xl);
  padding: 0;
}
.avatar-editor-actions button:hover {
  background: var(--openbot-hover);
  color: var(--openbot-text-primary);
}
.avatar-editor-actions button:disabled, .avatar-image-upload:disabled {
  cursor: wait;
  opacity: 0.58;
}
.avatar-image-upload {
  display: grid;
  width: calc(100% - 20px);
  min-height: 64px;
  align-items: center;
  margin: 4px 10px 12px;
  border: 1px dashed var(--openbot-border-strong);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-hover);
  padding: 9px;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 11px;
  color: var(--openbot-text-primary);
  text-align: left;
  transition: border-color var(--openbot-duration-hover) ease, background-color var(--openbot-duration-hover) ease, transform var(--openbot-duration-normal) ease;
}
.avatar-image-upload:hover:not(:disabled) {
  border-color: var(--openbot-success);
  background: var(--openbot-success-soft);
}
.avatar-image-upload:active:not(:disabled) {
  transform: scale(0.985);
}
.avatar-image-upload-active {
  border-style: solid;
  border-color: var(--openbot-border-strong);
}
.avatar-image-upload-preview {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  overflow: hidden;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-hover);
  color: var(--openbot-text-muted);
}
.avatar-image-upload-preview > svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: var(--openbot-icon-stroke);
}
.avatar-image-upload-preview .agent-avatar {
  width: 42px;
  height: 42px;
}
.avatar-image-upload strong, .avatar-image-upload small {
  display: block;
  white-space: normal;
  text-wrap: pretty;
}
.avatar-image-upload strong {
  margin-bottom: 3px;
  font-size: var(--openbot-text-sm);
  font-weight: 580;
}
.avatar-image-upload small {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 14px;
}
.avatar-editor-actions button:active, .avatar-face-choice:active, .avatar-color-choice:active {
  scale: 0.96;
}
.avatar-face-grid {
  display: grid;
  min-width: 0;
  margin: 0;
  border: 0;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 7px 10px 12px;
}
.avatar-face-choice, .avatar-color-choice {
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  color: var(--openbot-text-secondary);
  transition-property: scale, background-color, box-shadow;
  transition-duration: var(--openbot-duration-normal), var(--openbot-duration-hover), var(--openbot-duration-hover);
  transition-timing-function: ease-out;
}
.avatar-face-choice {
  width: 100%;
  height: 48px;
}
.avatar-face-choice:hover, .avatar-color-choice:hover {
  background: var(--openbot-hover);
}
.avatar-choice-selected {
  background: var(--openbot-border);
  box-shadow: inset 0 0 0 1px var(--openbot-text-muted), 0 1px 3px var(--openbot-shadow-popover-ambient);
}
.avatar-face-choice .agent-avatar {
  width: 34px;
  height: 34px;
}
.avatar-color-grid {
  display: grid;
  min-width: 0;
  margin: 0;
  border: 0;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 5px;
  padding: 4px 10px 12px;
}
.avatar-color-choice {
  width: 100%;
  height: 40px;
}
.avatar-color-swatch {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: var(--openbot-radius-pill);
  box-shadow: inset 0 0 0 1px var(--openbot-border-strong);
}
.avatar-color-swatch-auto {
  display: grid;
  place-items: center;
  border: 1px dashed var(--openbot-text-muted);
  background: transparent;
  box-shadow: none;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: 650;
}
.conversation-title .agent-avatar {
  --agent-avatar-optical-offset: -2px;
  width: 18px;
  height: 18px;
}
.agent-row-copy {
  min-width: 0;
  flex: 1;
  opacity: 1;
  transform: translateX(0);
  transition: opacity var(--openbot-duration-fast) ease, transform var(--openbot-duration-slow) cubic-bezier(0.32, 0.72, 0, 1);
}
.agent-row-heading {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.agent-row-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  overflow: hidden;
}
.agent-row-title:has(.agent-role-badge) {
  --agent-role-badge-collapsed-width: calc(2ch + 9px);
  display: grid;
  grid-template-columns: fit-content(calc(100% - var(--agent-role-badge-collapsed-width) - 5px)) minmax(var(--agent-role-badge-collapsed-width), 1fr);
}
.agent-row-name {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 3px;
  overflow: hidden;
}
.agent-row-access {
  display: inline-flex;
  flex: none;
  color: var(--openbot-text-muted);
}
.agent-row-access svg {
  width: 12px;
  height: 12px;
}
.agent-row-title strong, .person-row .agent-row-heading strong, .channel-row .agent-row-heading strong {
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  line-height: 20px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-role-badge {
  min-width: 0;
  max-width: 100%;
  height: 18px;
  min-height: 18px;
  overflow: hidden;
  flex: 0 1 auto;
  justify-self: start;
  border: 0.5px solid var(--openbot-border);
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-hover);
  padding: 2px 4px;
  color: var(--openbot-text-readable);
  font-size: var(--openbot-text-sm);
  font-weight: 400;
  line-height: 16px;
  white-space: nowrap;
}
.agent-role-badge > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-row-time, .person-row .agent-row-heading > span, .channel-row .agent-row-time {
  min-width: 0;
  flex: 0 0 auto;
  color: var(--openbot-text-readable);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
  white-space: nowrap;
}
@container (max-width: 210px) {
  .agent-row-time, .person-row .agent-row-heading > span, .channel-row .agent-row-time {
    display: none;
  }
}
.agent-row-preview {
  display: block;
  margin-top: 0;
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar:not(.sidebar-compact) .agent-row {
  width: calc(100% + var(--openbot-space-2));
  margin-inline: calc(var(--openbot-space-1) * -1);
}
.sidebar:not(.sidebar-compact) .sidebar-section-body .agent-row {
  width: 100%;
  margin-inline: 0;
}
.sidebar:not(.sidebar-compact) .sidebar-waiting-group .agent-row {
  width: 100%;
  margin-inline: 0;
}
.sidebar-waiting-group .sidebar-agent-item .agent-row {
  cursor: default;
}
.sidebar:not(.sidebar-compact) .sidebar-pinned-row.agent-row {
  width: 72px;
  margin-inline: 0;
}
.empty-search {
  margin: 32px 0;
  color: var(--openbot-text-readable);
  font-size: var(--openbot-text-md);
  text-align: center;
}
.sidebar-first-agent-state {
  display: flex;
  min-height: 100%;
  flex-direction: column;
}
.ui-button.sidebar-first-agent-action {
  flex: 0 0 auto;
}
.account-usage-popover {
  position: relative;
  z-index: var(--openbot-layer-tooltip);
  display: grid;
  width: min(300px, calc(100vw - var(--openbot-space-4)));
  max-height: min(60vh, 420px);
  overflow: auto;
  padding: var(--openbot-space-2);
  gap: var(--openbot-space-2);
  opacity: 1;
  transform: translateY(0) scale(1);
  transform-origin: var(--kb-popover-content-transform-origin);
  transition: opacity var(--openbot-duration-fast) ease, transform var(--openbot-duration-fast) var(--openbot-ease-out);
  @starting-style {
    opacity: 0;
    transform: translateY(4px) scale(0.98);
  }
}
.account-usage-popover-header, .account-usage-popover-heading {
  display: flex;
  align-items: center;
}
.account-usage-popover-header {
  justify-content: space-between;
}
.account-usage-popover-heading {
  min-width: 0;
  padding-inline-start: var(--openbot-space-1);
  gap: var(--openbot-space-2);
}
.account-usage-popover-heading > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  color: var(--openbot-text-primary);
  stroke-width: var(--openbot-icon-stroke);
}
.account-usage-popover-title {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-md);
}
.account-usage-providers {
  display: grid;
  margin: 0;
  padding: 0;
  grid-template-columns: auto max-content minmax(0, 1fr) max-content max-content;
  column-gap: var(--openbot-space-2);
  row-gap: var(--openbot-space-1);
  list-style: none;
}
.account-usage-provider {
  display: grid;
  min-width: 0;
  align-items: center;
  border-radius: var(--openbot-radius-md);
  padding: var(--openbot-space-1);
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  row-gap: var(--openbot-space-1);
}
.account-usage-provider > .account-usage-provider-name {
  grid-column: 2 / -1;
}
.account-usage-provider-logo {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  overflow: visible;
  fill: var(--openbot-provider-current);
}
.account-usage-provider-copy {
  display: grid;
  min-width: 0;
  grid-column: 2 / 4;
}
.account-usage-provider-name {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-usage-provider-meta {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-usage-provider-remaining {
  grid-column: 4 / -1;
  justify-self: end;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: var(--openbot-leading-sm);
  white-space: nowrap;
}
.account-usage-windows, .account-usage-window {
  display: grid;
  min-width: 0;
  grid-template-columns: subgrid;
}
.account-usage-windows {
  grid-column: 2 / -1;
  row-gap: var(--openbot-space-1);
}
.account-usage-window {
  --account-usage-window-tone: var(--openbot-text-secondary);
  align-items: center;
  grid-column: 1 / -1;
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.account-usage-window[data-usage-tone="warning"] {
  --account-usage-window-tone: var(--openbot-warning);
}
.account-usage-window[data-usage-tone="critical"] {
  --account-usage-window-tone: var(--openbot-danger);
}
.account-usage-window-label, .account-usage-window-reset {
  color: var(--openbot-text-muted);
  white-space: nowrap;
}
.account-usage-window-reset {
  text-align: right;
}
.account-usage-window-bar {
  display: block;
  height: 4px;
  overflow: hidden;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-border);
}
.account-usage-window-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--account-usage-window-tone);
}
.account-usage-window-remaining {
  color: var(--openbot-text-primary);
  font-variant-numeric: tabular-nums;
  font-weight: var(--openbot-weight-semibold);
  text-align: right;
}
.account-usage-window:not([data-usage-tone="neutral"]) .account-usage-window-remaining {
  color: var(--account-usage-window-tone);
}
.account-usage-empty {
  margin: 0;
  padding: var(--openbot-space-2) var(--openbot-space-1);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.account-usage-refresh.ui-button {
  position: relative;
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-md);
  color: var(--openbot-text-muted);
}
.account-usage-refresh.ui-button::before {
  position: absolute;
  inset: calc(0px - var(--openbot-space-1));
  content: "";
}
.account-usage-refresh > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: var(--openbot-icon-stroke);
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.account-usage-refresh > svg.icon-spinning {
  animation-duration: 600ms;
}
.account-usage-popover-error {
  margin: 0;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-danger-soft);
  padding: var(--openbot-space-2);
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.sidebar-compact .sidebar-topbar {
  padding-inline: 12px;
}
.sidebar-compact .sidebar-server-name {
  opacity: 0;
  pointer-events: none;
}
.sidebar-compact .sidebar-new-button {
  opacity: 0;
  pointer-events: none;
  transform: translateX(6px) scale(0.92);
}
.sidebar-compact .sidebar-toggle-button {
  transform: translateX(13px);
}
.sidebar-compact .sidebar-toggle-button:active {
  transform: translateX(13px) scale(0.96);
}
.sidebar-compact .sidebar-search-wrap {
  padding-inline: 12px;
}
.sidebar-compact .search-field {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-8px);
}
.sidebar-compact .sidebar-compact-search {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1);
  transition-delay: 55ms;
}
.sidebar-compact .agent-list {
  padding-inline: 12px;
}
.sidebar-compact .sidebar-chat-group {
  position: relative;
}
.sidebar-compact .sidebar-chat-group + .sidebar-chat-group {
  margin-top: 4px;
}
.sidebar-compact .sidebar-chat-group > header {
  height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  white-space: nowrap;
}
.sidebar-compact .agent-row {
  padding-inline: 8px;
}
.sidebar-compact .agent-row-avatar {
  transform: translateX(6px);
}
.sidebar-compact .agent-row.sidebar-pinned-row {
  width: 60px;
  height: 60px;
  min-height: 60px;
  padding: 6px;
}
.sidebar-compact .sidebar-pinned-item {
  width: 60px;
  flex-basis: 60px;
}
.sidebar-compact .agent-row.sidebar-pinned-row .sidebar-pinned-avatar {
  transform: none;
}
.sidebar-compact .sidebar-pinned-copy {
  display: none;
}
.sidebar-compact .agent-row-copy {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-8px);
}
.agent-tasks-row {
  display: grid;
  width: 100%;
  height: var(--openbot-control-md);
  align-items: center;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  padding: 0 var(--openbot-space-2);
  grid-template-columns: 16px minmax(0, 1fr) auto;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  letter-spacing: -0.01em;
  text-align: left;
  transition: background-color var(--openbot-duration-hover) ease;
}
.agent-tasks-row:hover:not(:disabled) {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}
.agent-tasks-row:disabled {
  cursor: default;
  opacity: 0.45;
}
.agent-tasks-row:focus-visible {
  outline: 0;
  background: var(--openbot-bg-control-hover);
  box-shadow: inset 0 0 0 1px var(--openbot-border-strong);
}
.agent-tasks-row small {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.agent-tasks-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--openbot-icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--openbot-text-primary);
}
.icon-spinning {
  animation: account-update-spin 800ms linear infinite;
}
@keyframes account-update-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .server-rail-mark, .server-rail-server-item, .sidebar-section, .sidebar-pinned-item {
    transition: none;
  }
  .sidebar-section-chevron, .sidebar-section-collapse, .sidebar-section-toggle, .sidebar-pinned-group-empty-target, .sidebar-pinned-empty-drop {
    transition: none;
  }
  .account-usage-popover {
    transform: none;
    transition: opacity var(--openbot-duration-fast) ease;
    @starting-style {
      opacity: 0;
      transform: none;
    }
  }
  .account-usage-refresh > svg {
    transition: none;
  }
  .account-usage-refresh:hover:not(:disabled) > svg {
    transform: none;
  }
  .icon-spinning {
    animation-duration: 1.6s;
  }
}
.server-rail, .sidebar {
  background: var(--openbot-bg-sidebar);
}
.server-rail-monogram, .server-rail-action .server-rail-monogram {
  border-color: var(--openbot-border);
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-secondary);
}
.person-avatar.online > i {
  background: var(--openbot-success);
}
.sidebar-icon-button:hover, .header-panel-toggle:hover, .browser-toolbar-button:hover:not(:disabled), .message-action-button:hover, .message-action-button:focus-visible, .message-action-button[aria-expanded="true"], .reaction-picker-row button:hover, .reaction-picker-row button:focus-visible, .reaction-picker-row button[aria-checked="true"], .composer-button:hover, .composer-attachment > button:hover, .agent-tasks-row:hover, .agent-context-menu button:hover, .agent-context-menu button:focus-visible {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}
.sidebar-icon-button:active, .header-panel-toggle:active, .agent-row:active, .composer-button:active, .voice-button:active, .settings-panel-nav-button:active {
  transform: scale(0.97);
}
.agent-row:hover {
  background: var(--openbot-bg-control);
}
.agent-list[data-sidebar-dragging] .agent-row:hover {
  background: transparent;
}
.agent-list[data-sidebar-dragging] .agent-row.agent-row-active, .agent-list[data-sidebar-dragging] .agent-row.agent-row-active:hover {
  background: var(--openbot-bg-surface);
}
.settings-panel-content {
  color: var(--openbot-text-primary);
}
.agent-settings-notifications, .provider-model-panel, .provider-model-rail, .avatar-editor {
  border-color: var(--openbot-border);
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-primary);
}
.choice-key, .composer-mention-token, .remote-desktop-empty-mark {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-secondary);
}
.server-rail-muted {
  position: absolute;
  right: 0;
  bottom: 0;
  color: var(--openbot-text-secondary);
  background: var(--openbot-bg-sidebar);
  border-radius: var(--openbot-radius-sm);
}
@keyframes server-sleep-waking {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}
@media (prefers-reduced-motion: reduce) {
  .server-menu-sleep[data-state="waking"], .sidebar-server-name > .sidebar-server-name-sleep[data-state="waking"] {
    animation: none;
  }
}
.ui-action-menu:not([data-menu-layout="grid"]) .server-rail-menu-detail-item {
  height: auto;
}
.server-rail-menu-label {
  display: flex;
  flex-direction: column;
}
.server-rail-menu-detail {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.sidebar-view-switch {
  padding: 2px 12px 6px;
}
.sidebar-view-tabs.ui-sliding-tabs {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sidebar-view-tab.ui-sliding-tabs-trigger {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-1);
  overflow: hidden;
  padding-inline: var(--openbot-space-1);
  font-size: var(--openbot-text-sm);
  white-space: nowrap;
}
.sidebar-view-tab svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: none;
}
.account-update-island {
  --panel-open-dur: calc(var(--openbot-duration-slow) + var(--openbot-duration-slow));
  --panel-close-dur: calc(var(--openbot-duration-slow) + var(--openbot-duration-normal));
  --panel-translate-y: calc(100% - var(--openbot-space-3));
  --panel-blur: var(--openbot-space-0-5);
  --panel-ease: var(--openbot-ease-out);
  --text-swap-dur: var(--openbot-duration-normal);
  --text-swap-translate-y: var(--openbot-space-1);
  --text-swap-blur: var(--openbot-space-0-5);
  --text-swap-ease: var(--openbot-ease-in-out);
  --digit-dur: var(--openbot-duration-slow);
  --digit-distance: var(--openbot-space-1);
  --digit-stagger: calc(var(--openbot-duration-fast) - var(--openbot-duration-dialog));
  --digit-blur: var(--openbot-space-0-5);
  --digit-ease: var(--openbot-ease-out);
  --digit-dir-x: 0;
  --digit-dir-y: 1;
  position: absolute;
  z-index: 0;
  right: var(--openbot-space-4);
  bottom: var(--openbot-control-xl);
  left: var(--openbot-space-4);
  display: grid;
  min-height: calc(var(--openbot-control-xl) + var(--openbot-radius-card));
  align-items: center;
  border: 0;
  border-radius: var(--openbot-radius-lg) var(--openbot-radius-lg) var(--openbot-radius-md) var(--openbot-radius-md);
  background: var(--openbot-accent-strong);
  box-shadow: 0 0 0 1px var(--openbot-accent-soft);
  -webkit-backdrop-filter: blur(var(--openbot-space-3));
  backdrop-filter: blur(var(--openbot-space-3));
  padding: calc(var(--openbot-space-1) + 1px) var(--openbot-space-1-5) calc(var(--openbot-space-4) + var(--openbot-space-1) - 1px);
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--openbot-space-2);
  color: var(--openbot-accent-text);
  -webkit-font-smoothing: antialiased;
}
.account-update-island.t-panel-slide {
  transform: translateY(var(--panel-translate-y));
  opacity: 0;
  filter: blur(var(--panel-blur));
  pointer-events: none;
  transition: transform var(--panel-close-dur) var(--panel-ease), opacity var(--panel-close-dur) var(--panel-ease), filter var(--panel-close-dur) var(--panel-ease);
  will-change: transform, opacity, filter;
}
.account-update-island.t-panel-slide[data-open="true"] {
  transform: translateY(0);
  opacity: 1;
  filter: blur(0);
  pointer-events: auto;
  transition: transform var(--panel-open-dur) var(--panel-ease), opacity var(--panel-open-dur) var(--panel-ease), filter var(--panel-open-dur) var(--panel-ease);
}
@starting-style {
  .account-update-island.t-panel-slide[data-open="true"] {
    transform: translateY(var(--panel-translate-y));
    opacity: 0;
    filter: blur(var(--panel-blur));
  }
}
.account-update-island__copy {
  min-width: 0;
}
.account-update-island__copy strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--openbot-accent-text);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-sm);
  white-space: nowrap;
}
.account-update-island .t-update-text-swap {
  display: inline-grid;
}
.account-update-island .t-update-text-swap > [data-text] {
  grid-area: 1 / 1;
  transform: translateY(0);
  opacity: 1;
  filter: blur(0);
  transition: transform var(--text-swap-dur) var(--text-swap-ease), filter var(--text-swap-dur) var(--text-swap-ease), opacity var(--text-swap-dur) var(--text-swap-ease);
  will-change: transform, filter, opacity;
}
.account-update-island .t-update-text-swap:is([data-state="available"], [data-state="action"]) > [data-text]:is([data-text="ready"], [data-text="progress"], [data-text="error"]) {
  transform: translateY(var(--text-swap-translate-y));
  opacity: 0;
  filter: blur(var(--text-swap-blur));
}
.account-update-island .t-update-text-swap:is([data-state="ready"], [data-state="progress"]) > [data-text]:is([data-text="available"], [data-text="action"], [data-text="error"]) {
  transform: translateY(calc(var(--text-swap-translate-y) * -1));
  opacity: 0;
  filter: blur(var(--text-swap-blur));
}
.account-update-island .t-update-text-swap[data-state="error"] > [data-text]:not([data-text="error"]) {
  transform: translateY(calc(var(--text-swap-translate-y) * -1));
  opacity: 0;
  filter: blur(var(--text-swap-blur));
}
.account-update-island__action-shell {
  position: relative;
  display: grid;
  min-width: calc( var(--openbot-control-xl) + var(--openbot-control-xl) + var(--openbot-space-6) + var(--openbot-space-1) );
  flex-shrink: 0;
}
.account-update-island__action.ui-button {
  width: 100%;
  height: var(--openbot-control-sm);
  min-height: var(--openbot-control-sm);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-surface-light);
  box-shadow: 0 1px 2px var(--openbot-shadow-popover-ambient);
  padding: 0 var(--openbot-space-3) 0 var(--openbot-space-2);
  color: var(--openbot-text-on-light);
  transition: box-shadow var(--openbot-duration-normal) var(--openbot-ease-out), transform var(--openbot-duration-fast) var(--openbot-ease-out);
}
.account-update-island__action.ui-button::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% + var(--openbot-space-4));
  min-width: var(--openbot-control-xl);
  height: var(--openbot-control-xl);
  transform: translate(-50%, -50%);
  content: "";
}
.account-update-island__action.ui-button:disabled {
  cursor: progress;
  opacity: 1;
}
.account-update-island__action-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-1-5);
}
.account-update-island__action-label {
  min-width: calc(var(--openbot-control-xl) + var(--openbot-space-3));
  color: var(--openbot-text-on-light);
  font-weight: var(--openbot-weight-semibold);
  text-align: left;
}
.account-update-island__progress-value {
  display: inline-grid;
  align-items: baseline;
  grid-template-columns: 3ch max-content;
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.account-update-island__progress-digits {
  display: inline-flex;
  justify-content: flex-end;
}
.account-update-island__progress-suffix, .account-update-island__busy-label {
  display: inline-block;
}
@keyframes account-update-digit-pop-in {
  0% {
    transform: translate( calc(var(--digit-distance) * var(--digit-dir-x)), calc(var(--digit-distance) * var(--digit-dir-y)) );
    opacity: 0.4;
    filter: blur(var(--digit-blur));
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
    filter: blur(0);
  }
}
.account-update-island__progress-value .t-digit {
  display: inline-block;
  will-change: transform, opacity, filter;
}
.account-update-island__progress-digits.is-animating .t-digit {
  animation: account-update-digit-pop-in var(--digit-dur) var(--digit-ease) both;
}
.account-update-island__progress-digits.is-animating .t-digit[data-stagger="1"] {
  animation-delay: var(--digit-stagger);
}
.account-update-island__progress-digits.is-animating .t-digit[data-stagger="2"] {
  animation-delay: calc(var(--digit-stagger) * 2);
}
.account-update-island__action-shell[data-downloading="true"] .account-update-island__action-label {
  min-width: var(--openbot-control-md);
  text-align: center;
}
.account-update-island__action-shell[data-downloading="true"] .account-update-island__action.ui-button {
  padding-inline: var(--openbot-space-2);
}
.account-update-island__icon.t-icon-swap {
  --icon-swap-dur: var(--openbot-duration-overlay);
  --icon-swap-blur: var(--openbot-space-0-5);
  --icon-swap-start-scale: 0.25;
  --icon-swap-ease: var(--openbot-ease-in-out);
  position: relative;
  display: inline-grid;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  place-items: center;
}
.account-update-island__icon.t-icon-swap .t-icon {
  position: relative;
  top: 1px;
  display: grid;
  grid-area: 1 / 1;
  place-items: center;
  transition: opacity var(--icon-swap-dur) var(--icon-swap-ease), filter var(--icon-swap-dur) var(--icon-swap-ease), transform var(--icon-swap-dur) var(--icon-swap-ease);
  will-change: opacity, filter, transform;
}
.account-update-island__icon.t-icon-swap svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.account-update-island__icon.t-icon-swap .ui-spinner {
  border-color: var(--openbot-text-dim-on-light);
  border-top-color: currentColor;
}
.account-update-island__icon.t-icon-swap[data-state="a"] .t-icon[data-icon="a"], .account-update-island__icon.t-icon-swap[data-state="b"] .t-icon[data-icon="b"] {
  transform: scale(1);
  opacity: 1;
  filter: blur(0);
}
.account-update-island__icon.t-icon-swap[data-state="a"] .t-icon[data-icon="b"], .account-update-island__icon.t-icon-swap[data-state="b"] .t-icon[data-icon="a"] {
  transform: scale(var(--icon-swap-start-scale));
  opacity: 0;
  filter: blur(var(--icon-swap-blur));
}
.account-update-island__action.ui-button:active:not(:disabled):not([data-disabled]) {
  transform: scale(0.96);
}
@media (hover: hover) and (pointer: fine) {
  .account-update-island__action.ui-button:hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-surface-light);
    box-shadow: 0 0 0 1px var(--openbot-text-dim-on-light), 0 1px 2px var(--openbot-shadow-popover-ambient);
    color: var(--openbot-text-on-light);
  }
}
@media (prefers-reduced-motion: reduce) {
  .account-update-island.t-panel-slide, .account-update-island__action.ui-button, .account-update-island__icon.t-icon-swap .t-icon, .account-update-island .t-update-text-swap > [data-text] {
    transition: none;
  }
  .account-update-island__progress-value .t-digit {
    animation: none;
  }
}
.sidebar-update-island > .account-update-island {
  position: relative;
  inset: auto;
  min-height: 0;
  margin: var(--openbot-space-2) var(--openbot-space-3) var(--openbot-space-3);
  border-radius: var(--openbot-radius-lg);
  padding: var(--openbot-space-1-5) var(--openbot-space-1-5) var(--openbot-space-1-5) var(--openbot-space-3);
}
.join-server-backdrop {
  animation: join-server-backdrop-in var(--modal-open-dur) var(--modal-ease) both;
  will-change: opacity;
}
.join-server-backdrop[data-motion="closing"] {
  animation: join-server-backdrop-out var(--modal-close-dur) var(--modal-ease) both;
}
.join-server-dialog {
  position: relative;
  width: min(420px, 100%);
  max-height: calc(100dvh - 48px);
  overflow: hidden;
  outline: 0;
  border-radius: var(--openbot-radius-xl);
  background: var(--openbot-bg-sidebar);
  color: var(--openbot-text-primary);
  box-shadow: 0 0 0 1px var(--openbot-border-strong), 0 24px 64px var(--openbot-shadow-dialog);
}
.join-server-close {
  position: absolute;
  top: var(--openbot-space-6);
  right: var(--openbot-space-6);
  z-index: 2;
  color: var(--openbot-text-muted);
}
.join-server-content {
  width: 100%;
  max-height: inherit;
  overflow-y: auto;
  padding: 32px;
}
.join-server-pages {
  --join-server-reference: 0px;
  width: 100%;
  height: 336px;
  overflow: hidden;
  transition: height var(--page-slide-dur) var(--page-slide-ease);
}
.join-server-pages[data-reference] {
  --join-server-reference: calc(var(--openbot-control-xs) + var(--openbot-space-0-5));
}
.join-server-pages[data-page="1"][data-preview-error] {
  height: calc(356px + var(--join-server-reference));
}
.join-server-pages[data-page="2"] {
  height: 292px;
}
.join-server-pages[data-page="2"][data-error] {
  height: calc(364px + var(--join-server-reference));
}
.join-server-page {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--openbot-space-4) + var(--openbot-space-1));
  margin: 0;
}
.join-server-header {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.join-server-header-entry {
  gap: var(--openbot-space-2);
  padding-inline: calc(var(--openbot-space-4) + var(--openbot-space-1));
}
.join-server-header-entry .ui-heading {
  font-size: var(--openbot-text-3xl);
  font-weight: var(--openbot-weight-bold);
  line-height: var(--openbot-leading-3xl);
}
.join-server-header-entry .ui-text {
  font-size: var(--openbot-text-lg);
}
.join-server-header-verified {
  gap: var(--openbot-space-2);
  padding-inline: var(--openbot-space-2);
}
.join-server-header .ui-text {
  max-width: 296px;
  line-height: var(--openbot-leading-sm);
}
.join-server-entry-logo {
  --app-logo-background: var(--openbot-surface-light);
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  margin-bottom: var(--openbot-space-4);
  border-radius: var(--openbot-radius-xl);
  box-shadow: 0 12px 28px var(--openbot-shadow-dialog), inset 0 1px 0 var(--openbot-border-strong);
}
.join-server-field {
  gap: var(--openbot-space-2);
}
.join-server-link-input.ui-input {
  height: var(--openbot-control-xl);
  background: var(--openbot-bg-control);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
}
.join-server-link-input.ui-input:focus-visible {
  outline: none;
  box-shadow: none;
}
.join-server-link-input.ui-input.is-error {
  border-color: var(--openbot-danger);
}
.join-server-field .ui-field-error {
  min-height: var(--openbot-leading-sm);
}
.join-server-identity-logo {
  --app-logo-background: var(--openbot-surface-light);
  width: 88px;
  height: 88px;
  flex: 0 0 auto;
  margin-bottom: var(--openbot-space-6);
  border-radius: var(--openbot-radius-modal);
  box-shadow: 0 16px 36px var(--openbot-shadow-dialog), inset 0 1px 0 var(--openbot-border-strong);
}
.join-server-invite-eyebrow {
  margin-bottom: 2px;
  font-size: var(--openbot-text-lg);
}
.join-server-header-verified .ui-heading {
  font-size: var(--openbot-text-3xl);
  font-weight: var(--openbot-weight-bold);
  line-height: var(--openbot-leading-3xl);
}
.join-server-hostname.ui-text {
  max-width: 260px;
  color: var(--openbot-text-muted);
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-lg);
}
.join-server-alert.ui-alert {
  align-self: start;
  padding-block: var(--openbot-space-2);
}
.join-server-alert .ui-alert-description {
  white-space: normal;
}
.join-server-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--openbot-space-2);
  margin-top: auto;
}
.join-server-actions .ui-button {
  width: 100%;
}
.join-server-actions-verified {
  gap: var(--openbot-space-1);
}
.join-server-preview {
  display: grid;
  gap: var(--openbot-space-3);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-4);
}
.join-server-preview-signal {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.join-server-preview-signal i, .join-server-preview-signal span {
  display: block;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success);
}
.join-server-preview-signal i {
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 4px var(--openbot-success-soft);
}
.join-server-preview-signal span {
  width: 42px;
  height: 1px;
  opacity: 0.52;
}
.join-server-preview-heading {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.join-server-verified {
  color: var(--openbot-success);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.join-server-preview-heading strong, .join-server-preview-heading small, .join-server-preview dd {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.join-server-preview-heading strong {
  font-size: var(--openbot-text-lg);
}
.join-server-preview-heading small, .join-server-preview dt, .join-server-preview p {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.join-server-preview dl {
  display: grid;
  gap: var(--openbot-space-2);
  margin: 0;
}
.join-server-preview dl div {
  min-width: 0;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: var(--openbot-space-2);
}
.join-server-preview dd {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.join-server-preview p {
  margin: 0;
  line-height: var(--openbot-leading-sm);
}
@keyframes join-server-backdrop-in {
  from {
    opacity: 0;
  }
}
@keyframes join-server-backdrop-out {
  to {
    opacity: 0;
  }
}
@media (max-width: 560px) {
  .join-server-backdrop {
    padding: var(--openbot-space-3);
  }
  .join-server-dialog {
    width: 100%;
    max-height: calc(100dvh - 24px);
  }
  .join-server-close {
    top: var(--openbot-space-3);
    right: var(--openbot-space-3);
  }
  .join-server-content {
    padding: var(--openbot-space-6);
  }
  .join-server-pages {
    height: 348px;
  }
  .join-server-pages[data-page="1"][data-preview-error] {
    height: calc(368px + var(--join-server-reference));
  }
  .join-server-pages[data-page="2"] {
    height: 304px;
  }
  .join-server-pages[data-page="2"][data-error] {
    height: calc(376px + var(--join-server-reference));
  }
}
@media (prefers-reduced-motion: reduce) {
  .join-server-backdrop {
    animation: none;
  }
  .join-server-pages {
    transition: none;
  }
}
.add-server-dialog {
  width: min(460px, 100%);
  transition: width var(--openbot-duration-normal) var(--openbot-ease-out);
}
.add-server-dialog[data-step="pricing"] {
  width: min(calc(760px + var(--add-server-extra-price-chars, 0) * 48px), 100%);
}
.add-server-step {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-6);
  margin: 0;
  animation: add-server-step-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}
.add-server-step .ui-heading:focus {
  outline: none;
}
.add-server-pricing {
  gap: var(--openbot-space-4);
}
.add-server-dialog[data-step="pricing"] .join-server-content {
  padding: var(--openbot-space-6);
}
.add-server-limit.ui-alert {
  align-self: stretch;
}
.add-server-intro {
  gap: var(--openbot-space-2);
  padding-block: var(--openbot-space-2);
}
.add-server-intro .ui-heading, .add-server-intro .ui-text {
  margin: 0;
  text-wrap: balance;
}
.add-server-intro .ui-heading {
  padding-inline: calc(var(--openbot-control-md) + var(--openbot-space-2));
  font-size: var(--openbot-text-3xl);
  font-weight: var(--openbot-weight-bold);
  line-height: var(--openbot-leading-3xl);
  letter-spacing: var(--openbot-tracking-tight);
}
.add-server-intro .ui-text {
  max-width: 560px;
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
.add-server-bar {
  position: relative;
  min-height: var(--openbot-control-md);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-2);
  padding-inline: calc(var(--openbot-control-md) + var(--openbot-space-2));
}
.add-server-bar .hosted-currency {
  position: absolute;
  top: 50%;
  left: 0;
  width: auto;
  flex: 0 0 auto;
  transform: translateY(-50%);
}
.hosted-billing {
  --hosted-billing-ease: cubic-bezier(0.34, 1.36, 0.64, 1);
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 3px;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-canvas);
}
.hosted-billing::before {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control-active);
  box-shadow: inset 0 0 0 1px var(--openbot-border);
  transition: transform 300ms var(--hosted-billing-ease);
}
.hosted-billing[data-billing="yearly"]::before {
  transform: translateX(100%);
}
.hosted-billing-option {
  position: relative;
  z-index: 1;
  display: flex;
}
.hosted-billing-control {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-1) var(--openbot-space-4);
  border-radius: var(--openbot-radius-pill);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--openbot-duration-normal) var(--openbot-ease-out);
}
.hosted-billing-control[data-checked] {
  color: var(--openbot-text-primary);
}
.hosted-billing-option:has(:focus-visible) .hosted-billing-control {
  box-shadow: var(--openbot-focus-ring);
}
.hosted-billing-save {
  padding: 0 var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-md);
  transition: color var(--openbot-duration-overlay) var(--openbot-ease-out), background-color var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.hosted-billing[data-billing="yearly"] .hosted-billing-save {
  background: var(--openbot-success-soft);
  color: var(--openbot-success-text);
  animation: hosted-billing-save-pop 300ms var(--hosted-billing-ease) 80ms both;
}
.hosted-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-canvas);
  list-style: none;
}
.hosted-plan {
  position: relative;
  isolation: isolate;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: var(--openbot-space-6);
  transition: opacity var(--openbot-duration-overlay) var(--openbot-ease-out), background-color var(--openbot-duration-normal) var(--openbot-ease-out);
  animation: hosted-plan-in var(--openbot-duration-overlay) var(--openbot-ease-out) calc(var(--plan-index) * 40ms + 60ms) backwards;
}
.hosted-plan + .hosted-plan {
  border-left: 1px solid var(--openbot-border);
}
.hosted-plan[data-recommended] {
  background: var(--openbot-bg-surface);
}
.hosted-plan[data-dimmed] {
  opacity: 0.5;
}
.hosted-plan[data-recommended]::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--openbot-accent), var(--openbot-warning), transparent);
  opacity: 0.8;
  pointer-events: none;
}
.hosted-plan[data-recommended]::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  height: 50%;
  background: linear-gradient(90deg, var(--openbot-accent), var(--openbot-warning));
  opacity: 0.22;
  mask-image: radial-gradient(90% 100% at 50% 100%, var(--openbot-text-primary), transparent);
  pointer-events: none;
  transition: opacity var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.hosted-plan-head {
  height: var(--openbot-control-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.hosted-plan-name {
  margin: 0;
  color: var(--openbot-accent-text);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
}
.hosted-plan-badge {
  border-color: transparent;
  background: var(--openbot-surface-light);
  color: var(--openbot-text-on-light);
}
.hosted-plan-price {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin: var(--openbot-space-4) 0 0;
}
.hosted-plan-was {
  display: grid;
  grid-template-columns: 0fr;
  align-self: center;
  opacity: 0;
  transition: grid-template-columns var(--openbot-duration-overlay) var(--openbot-ease-out), opacity var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.hosted-plan-was[data-shown] {
  grid-template-columns: 1fr;
  opacity: 1;
}
.hosted-plan-was-inner {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.hosted-plan-was s {
  display: inline-block;
  margin-right: var(--openbot-space-2);
  color: var(--openbot-text-dim);
  font-size: var(--openbot-text-xl);
  line-height: var(--openbot-leading-xl);
  font-variant-numeric: tabular-nums;
  text-decoration-thickness: 1px;
}
.hosted-plan-now {
  display: flex;
  align-items: flex-start;
  white-space: nowrap;
}
.hosted-plan-amount {
  --digit-distance: 12px;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-display);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-display);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.hosted-plan-period {
  white-space: nowrap;
  margin-left: var(--openbot-space-1);
  padding-top: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.hosted-plan-billed {
  display: flex;
  flex-wrap: wrap;
  margin: var(--openbot-space-1) 0 0;
  color: var(--openbot-text-dim);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  animation: add-server-step-in var(--openbot-duration-overlay) var(--openbot-ease-out) both;
}
.hosted-plan-billed-total {
  white-space: nowrap;
}
.hosted-plan-saving {
  color: var(--openbot-success-text);
  white-space: nowrap;
}
.hosted-plan-saving::before {
  content: "\00b7" / "";
  margin: 0 var(--openbot-space-1);
  color: var(--openbot-text-dim);
}
.hosted-plan-summary {
  margin: var(--openbot-space-4) 0 var(--openbot-space-6);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.hosted-plan-choose.ui-button {
  margin-top: auto;
}
.hosted-plan-facts {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
  margin: var(--openbot-space-6) 0 0;
  padding: var(--openbot-space-4) 0 0;
  border-top: 1px dashed var(--openbot-border);
  list-style: none;
}
.hosted-plan-facts li {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.hosted-plan-facts svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  transition: color var(--openbot-duration-normal) var(--openbot-ease-out);
}
.add-server-custom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-4);
  padding: 0 var(--openbot-space-1);
}
.add-server-custom-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.add-server-custom-text .ui-text {
  margin: 0;
}
.add-server-custom .ui-button {
  flex: 0 0 auto;
}
.add-server-join {
  margin: 0;
  text-align: center;
}
.add-server-progress {
  align-items: stretch;
  gap: var(--openbot-space-6);
}
.add-server-progress .join-server-header {
  gap: var(--openbot-space-2);
}
.add-server-ring {
  position: relative;
  width: 96px;
  height: 96px;
  margin: var(--openbot-space-2) auto 0;
  display: grid;
  place-items: center;
}
.add-server-ring-segments {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke-width: 4;
  transform: rotate(-90deg);
}
.add-server-ring-segment circle {
  stroke-dasharray: 30.33 100;
  transition: stroke-dasharray var(--openbot-duration-normal) var(--openbot-ease-out), stroke-dashoffset var(--openbot-duration-slow) var(--openbot-ease-out), stroke var(--openbot-duration-slow) var(--openbot-ease-out);
}
.add-server-ring-segment:nth-child(1) circle {
  stroke-dashoffset: -1.5;
}
.add-server-ring-segment:nth-child(2) circle {
  stroke-dashoffset: -34.83;
}
.add-server-ring-segment:nth-child(3) circle {
  stroke-dashoffset: -68.17;
}
.add-server-ring-track {
  stroke: var(--openbot-border);
}
.add-server-ring-segment .add-server-ring-fill {
  stroke: var(--openbot-accent);
}
.add-server-ring-segment[data-state="pending"] .add-server-ring-fill {
  stroke-dasharray: 0 100;
}
.add-server-ring-segment[data-state="active"] .add-server-ring-fill {
  --add-server-step-creep: 20s;
  stroke-dasharray: 27.3 100;
  transition: stroke-dasharray var(--add-server-step-creep) cubic-bezier(0.05, 0.7, 0.1, 1);
  animation: add-server-segment-breathe 1.6s var(--openbot-ease-in-out) infinite alternate;
  @starting-style {
    stroke-dasharray: 0 100;
  }
}
.add-server-ring-segment[data-state="failed"] .add-server-ring-fill {
  stroke: var(--openbot-danger);
}
.add-server-progress[data-status="ready"] .add-server-ring-segment circle {
  stroke-dasharray: 33.4 100;
  stroke: var(--openbot-success);
}
.add-server-progress[data-status="ready"] .add-server-ring-segment:nth-child(1) circle {
  stroke-dashoffset: 0;
}
.add-server-progress[data-status="ready"] .add-server-ring-segment:nth-child(2) circle {
  stroke-dashoffset: -33.33;
}
.add-server-progress[data-status="ready"] .add-server-ring-segment:nth-child(3) circle {
  stroke-dashoffset: -66.67;
}
.add-server-ring-core {
  position: relative;
  width: 72px;
  height: 72px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--openbot-space-1);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface);
  box-shadow: inset 0 0 0 1px var(--openbot-border);
  transition: opacity var(--openbot-duration-normal) var(--openbot-ease-out), transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.add-server-light {
  position: relative;
  width: 42px;
  height: 13px;
  border: 1px solid var(--openbot-text-dim);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--openbot-text-dim) 55%, transparent);
  }
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-sidebar);
}
.add-server-light::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  width: 16px;
  height: 1px;
  background: var(--openbot-text-dim);
}
.add-server-light::after {
  content: "";
  position: absolute;
  top: 3.5px;
  right: 4px;
  width: 4px;
  height: 4px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-dim);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-dim) 55%, transparent);
  }
  transition: background var(--openbot-duration-normal) var(--openbot-ease-out), box-shadow var(--openbot-duration-normal) var(--openbot-ease-out);
}
.add-server-light[data-state="active"]::after {
  background: var(--openbot-accent);
  box-shadow: 0 0 6px var(--openbot-accent);
  animation: add-server-light-flicker 1.3s steps(1, end) infinite;
}
.add-server-light[data-state="done"]::after {
  background: var(--openbot-success);
  box-shadow: 0 0 6px var(--openbot-success);
}
.add-server-light[data-state="failed"]::after {
  background: var(--openbot-danger);
  box-shadow: 0 0 6px var(--openbot-danger);
}
.add-server-progress:is([data-status="ready"], [data-status="error"]) .add-server-ring-core {
  opacity: 0;
  transform: scale(0.7);
}
.add-server-ring-result {
  position: absolute;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success);
  color: var(--openbot-text-on-accent);
  animation: add-server-pop var(--openbot-duration-overlay) var(--openbot-ease-out) var(--openbot-duration-normal) both;
}
.add-server-ring-result[data-tone="danger"] {
  background: var(--openbot-danger);
}
.add-server-ring-result svg {
  width: 32px;
  height: 32px;
}
.add-server-ring-result svg path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: add-server-check-draw var(--openbot-duration-slow) var(--openbot-ease-out) var(--openbot-duration-slow) forwards;
}
.add-server-ticker {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  animation: add-server-detail-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}
.add-server-confetti {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.add-server-confetti i {
  position: absolute;
  top: var(--confetti-origin-y);
  left: var(--confetti-origin-x);
  width: 7px;
  height: 12px;
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-accent);
  opacity: 0;
  animation: add-server-confetti var(--confetti-duration) var(--openbot-ease-out) var(--confetti-delay) both;
}
.add-server-confetti i:nth-child(5n + 1) {
  background: var(--openbot-success);
}
.add-server-confetti i:nth-child(5n + 2) {
  background: var(--openbot-warning);
}
.add-server-confetti i:nth-child(5n + 3) {
  background: var(--openbot-danger);
}
.add-server-confetti i:nth-child(5n + 4) {
  background: var(--openbot-accent-text);
}
.add-server-confetti i:nth-child(3n) {
  width: 8px;
  height: 8px;
  border-radius: var(--openbot-radius-pill);
}
@keyframes add-server-confetti {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.3) rotate(0deg);
  }
  30% {
    opacity: 1;
    transform: translate(calc(-50% + var(--confetti-x)), calc(-50% + var(--confetti-y))) rotate(calc(var(--confetti-spin) / 2)) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--confetti-x) * 1.15), calc(-50% + var(--confetti-y) + 360px)) rotate(var(--confetti-spin)) scale(0.9);
  }
}
@keyframes hosted-billing-save-pop {
  50% {
    transform: scale(1.1);
  }
}
@keyframes hosted-plan-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}
@keyframes add-server-step-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}
@keyframes add-server-pop {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
}
@keyframes add-server-check-draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes add-server-light-flicker {
  0%, 22%, 34%, 58%, 64%, 88% {
    opacity: 1;
  }
  18%, 30%, 54%, 61%, 84% {
    opacity: 0.25;
  }
}
@keyframes add-server-segment-breathe {
  to {
    opacity: 0.55;
  }
}
@keyframes add-server-detail-in {
  from {
    opacity: 0;
    transform: translateY(8px);
    filter: blur(2px);
  }
}
@media (hover: hover) {
  .hosted-plan:not([data-recommended]):hover {
    background: var(--openbot-bg-surface);
  }
  .hosted-plan[data-recommended]:hover::after {
    opacity: 0.3;
  }
  .hosted-plan:hover .hosted-plan-facts svg {
    color: var(--openbot-text-secondary);
  }
}
@media (max-width: 720px) {
  .hosted-plans {
    grid-template-columns: minmax(0, 1fr);
  }
  .hosted-plan + .hosted-plan {
    border-top: 1px solid var(--openbot-border);
    border-left: 0;
  }
}
@media (max-width: 560px) {
  .add-server-intro .ui-heading {
    font-size: var(--openbot-text-2xl);
    line-height: var(--openbot-leading-2xl);
  }
  .add-server-intro .ui-text {
    font-size: var(--openbot-text-md);
    line-height: var(--openbot-leading-md);
  }
  .add-server-bar {
    padding: calc(var(--openbot-control-md) + var(--openbot-space-1)) 0 0;
  }
  .add-server-bar .hosted-billing {
    flex: 1;
  }
  .add-server-bar .hosted-currency {
    top: 0;
    transform: none;
  }
  .add-server-custom {
    flex-direction: column;
    align-items: stretch;
  }
  .add-server-limit.ui-alert {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }
  .add-server-limit .ui-alert-actions {
    grid-column: 2;
    justify-content: flex-start;
  }
}
@media (prefers-reduced-motion: reduce) {
  .add-server-dialog, .hosted-billing::before, .hosted-billing-control, .hosted-billing-save, .hosted-plan, .hosted-plan-was, .add-server-progress[data-status] .add-server-ring-segment circle, .add-server-progress[data-status] .add-server-ring-core {
    transition: none;
  }
  .add-server-step, .hosted-billing[data-billing="yearly"] .hosted-billing-save, .hosted-plan, .hosted-plan-billed, .add-server-ring-result, .add-server-light[data-state]::after, .add-server-ring-segment[data-state] .add-server-ring-fill, .add-server-ticker {
    animation: none;
  }
  .add-server-ring-result svg path {
    stroke-dashoffset: 0;
    animation: none;
  }
  .add-server-confetti {
    display: none;
  }
}
.hosted-upsell-notice {
  flex: none;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  margin-top: var(--openbot-space-3);
  padding: var(--openbot-space-3);
}
.hosted-upsell-notice .ui-alert-icon {
  width: var(--openbot-space-8);
  height: var(--openbot-space-8);
  padding: var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-md);
  background: linear-gradient(135deg, var(--openbot-beam-blue), var(--openbot-beam-pink));
  color: var(--openbot-text-on-accent);
}
.hosted-upsell-notice .ui-alert-title {
  text-wrap: balance;
}
.hosted-upsell-notice .ui-alert-actions {
  justify-content: flex-start;
  margin-top: var(--openbot-space-2);
}
@property --hosted-upsell-beam-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.hosted-upsell-beam {
  position: relative;
  border-color: transparent;
  background: radial-gradient(120% 140% at 0% 0%, var(--openbot-beam-blue), transparent 60%), var(--openbot-bg-surface-raised);
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--openbot-beam-blue) 12%, transparent), transparent 60%), var(--openbot-bg-surface-raised);
  }
}
.hosted-upsell-beam::before, .hosted-upsell-beam-glow > span {
  position: absolute;
  border-radius: inherit;
  content: "";
  pointer-events: none;
  mask: linear-gradient(currentColor 0 0) content-box exclude, linear-gradient(currentColor 0 0);
  animation: hosted-upsell-beam-turn 6s linear infinite;
}
.hosted-upsell-beam::before {
  inset: 0;
  padding: 1px;
  background: conic-gradient( from var(--hosted-upsell-beam-angle), var(--openbot-beam-blue) 0deg, var(--openbot-beam-blue) 180deg, var(--openbot-beam-teal) 240deg, var(--openbot-beam-blue) 290deg, var(--openbot-beam-pink) 330deg, var(--openbot-beam-blue) 360deg );
  @supports (color: color-mix(in lab, red, red)) {
    background: conic-gradient( from var(--hosted-upsell-beam-angle), color-mix(in srgb, var(--openbot-beam-blue) 18%, transparent) 0deg, color-mix(in srgb, var(--openbot-beam-blue) 18%, transparent) 180deg, var(--openbot-beam-teal) 240deg, var(--openbot-beam-blue) 290deg, var(--openbot-beam-pink) 330deg, color-mix(in srgb, var(--openbot-beam-blue) 18%, transparent) 360deg );
  }
}
.hosted-upsell-beam-glow {
  position: absolute;
  inset: calc(-1 * var(--openbot-space-3));
  border-radius: inherit;
  filter: blur(6px);
  opacity: 0.5;
  pointer-events: none;
}
.hosted-upsell-beam-glow > span {
  inset: var(--openbot-space-3);
  padding: 2px;
  background: conic-gradient( from var(--hosted-upsell-beam-angle), transparent 0deg, transparent 210deg, var(--openbot-beam-teal) 250deg, var(--openbot-beam-blue) 290deg, var(--openbot-beam-pink) 330deg, transparent 360deg );
}
@keyframes hosted-upsell-beam-turn {
  to {
    --hosted-upsell-beam-angle: 360deg;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hosted-upsell-beam::before, .hosted-upsell-beam-glow > span {
    animation: none;
  }
}
.hosted-upsell-modal {
  width: min(420px, 100%);
  display: grid;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-6);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-modal);
  outline: 0;
  color: var(--openbot-text-primary);
  background: var(--openbot-bg-sidebar);
}
.hosted-upsell-modal .hosted-upsell-modal-title {
  margin: 0;
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-lg);
  text-wrap: balance;
}
.hosted-upsell-modal .hosted-upsell-modal-description {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-wrap: pretty;
}
.hosted-upsell-modal .hosted-upsell-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
  margin-top: var(--openbot-space-3);
}
.hosted-upsell-modal .hosted-upsell-scene {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: var(--openbot-space-4);
  padding: var(--openbot-space-6) var(--openbot-space-2) var(--openbot-space-4);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
}
.hosted-upsell-modal .hosted-upsell-device {
  display: grid;
  justify-items: center;
  align-content: end;
  gap: var(--openbot-space-3);
  margin: 0;
}
.hosted-upsell-modal .hosted-upsell-device figcaption {
  display: grid;
  justify-items: center;
  gap: var(--openbot-space-1-5);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.hosted-upsell-modal .hosted-upsell-laptop {
  display: grid;
  justify-items: center;
}
.hosted-upsell-modal .hosted-upsell-laptop-lid {
  width: 88px;
  height: 58px;
  padding: 4px;
  border: 2px solid var(--openbot-border-strong);
  border-bottom: 0;
  border-radius: var(--openbot-radius-sm) var(--openbot-radius-sm) 0 0;
  transform-origin: bottom;
  animation: hosted-upsell-lid 5s ease-in-out infinite;
}
.hosted-upsell-modal .hosted-upsell-laptop-screen {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: var(--openbot-radius-xs);
  color: var(--openbot-text-secondary);
  background: var(--openbot-bg-control);
}
.hosted-upsell-modal .hosted-upsell-laptop-screen svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  animation: hosted-upsell-shown-open 5s ease-in-out infinite;
}
.hosted-upsell-modal .hosted-upsell-laptop-base {
  width: 108px;
  height: 6px;
  border-radius: 0 0 var(--openbot-radius-sm) var(--openbot-radius-sm);
  background: var(--openbot-border-strong);
}
.hosted-upsell-modal .hosted-upsell-rack {
  width: 64px;
  display: grid;
  gap: 4px;
}
.hosted-upsell-modal .hosted-upsell-rack span {
  position: relative;
  height: 18px;
  border: 2px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-sm);
}
.hosted-upsell-modal .hosted-upsell-rack span::after {
  position: absolute;
  top: 50%;
  right: 6px;
  width: 5px;
  height: 5px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success);
  transform: translateY(-50%);
  animation: hosted-upsell-light 1.6s ease-in-out infinite;
  content: "";
}
.hosted-upsell-modal .hosted-upsell-rack span:nth-child(2)::after {
  animation-delay: 0.5s;
}
.hosted-upsell-modal .hosted-upsell-rack span:nth-child(3)::after {
  animation-delay: 1s;
}
.hosted-upsell-modal .hosted-upsell-status {
  display: grid;
  justify-items: center;
  font-weight: var(--openbot-weight-medium);
}
.hosted-upsell-modal .hosted-upsell-status > span {
  grid-area: 1 / 1;
  padding: 2px var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
  white-space: nowrap;
}
.hosted-upsell-modal .hosted-upsell-status .hosted-upsell-status-on {
  color: var(--openbot-success-text);
  background: var(--openbot-success);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-success) 16%, transparent);
  }
}
.hosted-upsell-modal .hosted-upsell-status .hosted-upsell-status-off {
  color: var(--openbot-warning-text);
  background: var(--openbot-warning-text);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-warning-text) 14%, transparent);
  }
}
.hosted-upsell-modal .hosted-upsell-status-flip .hosted-upsell-status-on {
  animation: hosted-upsell-shown-open 5s ease-in-out infinite;
}
.hosted-upsell-modal .hosted-upsell-status-flip .hosted-upsell-status-off {
  animation: hosted-upsell-shown-closed 5s ease-in-out infinite;
}
@keyframes hosted-upsell-lid {
  0%, 25% {
    transform: scaleY(1);
  }
  40%, 85% {
    transform: scaleY(0.08);
  }
  100% {
    transform: scaleY(1);
  }
}
@keyframes hosted-upsell-shown-open {
  0%, 30% {
    opacity: 1;
  }
  38%, 88% {
    opacity: 0;
  }
  96%, 100% {
    opacity: 1;
  }
}
@keyframes hosted-upsell-shown-closed {
  0%, 30% {
    opacity: 0;
  }
  38%, 88% {
    opacity: 1;
  }
  96%, 100% {
    opacity: 0;
  }
}
@keyframes hosted-upsell-light {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hosted-upsell-modal .hosted-upsell-laptop-lid, .hosted-upsell-modal .hosted-upsell-laptop-screen svg, .hosted-upsell-modal .hosted-upsell-rack span::after, .hosted-upsell-modal .hosted-upsell-status-flip .hosted-upsell-status-on, .hosted-upsell-modal .hosted-upsell-status-flip .hosted-upsell-status-off {
    animation: none;
  }
  .hosted-upsell-modal .hosted-upsell-laptop-lid {
    transform: scaleY(0.08);
  }
  .hosted-upsell-modal .hosted-upsell-laptop-screen svg, .hosted-upsell-modal .hosted-upsell-status-flip .hosted-upsell-status-on {
    opacity: 0;
  }
}
.hosted-upsell-offline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--openbot-space-2);
  margin: var(--openbot-space-1) 0 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.app-loading .hosted-upsell-offline {
  justify-content: center;
}
.restart-server-steps {
  display: grid;
  gap: var(--openbot-space-1);
  margin: 0;
  padding: var(--openbot-space-2) var(--openbot-space-3);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  list-style: none;
}
.restart-server-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--openbot-space-3);
  padding-block: var(--openbot-space-1-5);
}
.restart-server-step-icon {
  display: grid;
  place-items: center;
  width: var(--openbot-icon-lg);
  height: var(--openbot-leading-md);
  color: var(--openbot-text-dim);
}
.restart-server-step-icon svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.restart-server-step[data-status="done"] .restart-server-step-icon {
  color: var(--openbot-success-text);
}
.restart-server-step[data-status="failed"] .restart-server-step-icon {
  color: var(--openbot-danger-text);
}
.restart-server-step-text {
  display: grid;
  min-width: 0;
}
.restart-server-step-label {
  overflow-wrap: anywhere;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
}
.restart-server-step[data-status="pending"] .restart-server-step-label, .restart-server-step-detail {
  color: var(--openbot-text-muted);
}
.restart-server-step-detail {
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.server-status-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  margin: var(--openbot-space-3) 0 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
.server-update-dialog-body {
  display: grid;
  gap: var(--openbot-space-3);
}
.server-update-step-progress {
  margin-top: var(--openbot-space-1-5);
}
.server-update-step-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-2);
  margin-top: var(--openbot-space-2);
}
.settings-panel {
  --settings-panel-section-gap: 25px;
  position: absolute;
  z-index: 15;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  width: var(--settings-panel-width, 296px);
  flex-direction: column;
  border-left: 1px solid var(--openbot-border);
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
  animation: settings-panel-in var(--openbot-duration-slow) cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.settings-panel-header {
  display: grid;
  height: 39px;
  flex: 0 0 auto;
  grid-template-columns: 32px 1fr 32px;
  align-items: center;
  border-bottom: 1px solid var(--openbot-border);
  padding: 0 10px;
}
.settings-panel-header h2 {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}
.settings-panel-nav-button {
  position: relative;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  padding: 0;
  background: transparent;
  color: var(--openbot-text-secondary);
  transition: background-color var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease, transform var(--openbot-duration-fast) ease;
}
.settings-panel-nav-button::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  content: "";
  transform: translate(-50%, -50%);
}
.settings-panel-nav-button > svg {
  width: 16px;
  height: 16px;
}
.settings-panel-nav-button:hover {
  background: var(--openbot-hover);
  color: var(--openbot-text-primary);
}
.settings-back-icon {
  transform: translateX(-0.5px);
}
.settings-panel-content {
  min-height: 0;
  overflow-y: auto;
  padding: 24px 15px 28px;
}
.settings-field {
  display: block;
  margin: 0 0 17px;
}
.settings-field > span {
  display: block;
  margin: 0 0 6px 8px;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  line-height: 18px;
}
.settings-field input, .settings-field textarea, .settings-field select {
  display: block;
  width: 100%;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  outline: 0;
  background: var(--openbot-shadow-popover-ambient);
  padding: 10px 11px;
  color: var(--openbot-text-primary);
  caret-color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  line-height: 19px;
  transition: border-color var(--openbot-duration-hover) ease, background var(--openbot-duration-hover) ease;
}
.settings-field input, .settings-field select {
  height: 38px;
}
.settings-field select {
  appearance: none;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--openbot-text-secondary) 50%), linear-gradient(135deg, var(--openbot-text-secondary) 50%, transparent 50%);
  background-position: calc(100% - 16px) 16px, calc(100% - 11px) 16px;
  background-repeat: no-repeat;
  background-size: 5px 5px, 5px 5px;
  padding-right: 32px;
}
.settings-field select option {
  background: var(--openbot-bg-control);
  color: var(--openbot-text-primary);
}
.settings-field textarea {
  field-sizing: content;
  min-height: 88px;
  max-height: 240px;
  overflow-y: auto;
}
.settings-field .settings-instructions-input {
  field-sizing: fixed;
  height: 120px;
  min-height: 120px;
  max-height: 120px;
  resize: none;
}
.settings-field input::placeholder, .settings-field textarea::placeholder {
  color: var(--openbot-text-muted);
}
.settings-field input:focus, .settings-field textarea:focus, .settings-field select:focus {
  border-color: var(--openbot-text-muted);
  background: var(--openbot-shadow-popover-ambient);
}
.settings-field input:focus-visible, .settings-field textarea:focus-visible, .settings-field select:focus-visible {
  outline: none;
}
.settings-link-group {
  display: grid;
  width: 100%;
  margin: 7px 0 22px;
  border-top: 1px solid var(--openbot-border);
  border-bottom: 1px solid var(--openbot-border);
}
.settings-link {
  width: 100%;
  min-height: 42px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-3);
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 var(--openbot-space-1);
  text-align: left;
  transition: none;
}
.settings-link + .settings-link {
  border-top: 1px solid var(--openbot-border);
}
.settings-link-label {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.settings-link-icon {
  display: grid;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  place-items: center;
  color: var(--openbot-text-secondary);
}
.settings-link-icon > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.settings-link-value {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
.settings-link-value svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
@media (hover: hover) and (pointer: fine) {
  .settings-link-group .settings-link:hover {
    background: var(--openbot-hover);
    color: var(--openbot-text-primary);
  }
  .settings-link:hover .settings-link-value {
    color: var(--openbot-text-secondary);
  }
}
.settings-link-section {
  display: grid;
  gap: var(--openbot-space-1-5);
}
.settings-link-section-title {
  margin: 0 0 0 var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
}
.settings-link-group-inset {
  margin: 0;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface);
}
.settings-link-group-inset > * + * {
  border-top: 1px solid var(--openbot-border);
}
.settings-link-group-inset > :first-child, .settings-link-group-inset > :first-child > button {
  border-top-left-radius: calc(var(--openbot-radius-md) - 1px);
  border-top-right-radius: calc(var(--openbot-radius-md) - 1px);
}
.settings-link-group-inset > :last-child, .settings-link-group-inset > :last-child > button {
  border-bottom-left-radius: calc(var(--openbot-radius-md) - 1px);
  border-bottom-right-radius: calc(var(--openbot-radius-md) - 1px);
}
.settings-link-group-inset .settings-link {
  min-height: 40px;
  gap: var(--openbot-space-2);
  padding: 0 var(--openbot-space-3);
}
.provider-code-login-backdrop {
  z-index: calc(var(--openbot-layer-dialog) + 1);
}
.provider-code-login-dialog {
  position: relative;
  width: min(420px, 100%);
  max-height: calc(100dvh - var(--openbot-space-6) * 2);
  overflow-y: auto;
  outline: 0;
  border-radius: var(--openbot-radius-xl);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-6);
  color: var(--openbot-text-primary);
  animation: provider-code-login-dialog-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}
.provider-code-login-dialog[data-page] {
  width: min(720px, 100%);
}
.provider-code-login-header {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  padding-right: var(--openbot-space-8);
}
.provider-code-login-title {
  margin: 0;
  font-size: var(--openbot-text-xl);
  line-height: var(--openbot-leading-xl);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: var(--openbot-tracking-tight);
}
.provider-code-login-description {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.provider-code-login-body {
  display: flex;
  flex-direction: column;
  margin-top: var(--openbot-space-6);
}
.provider-code-login-pending {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-8) 0;
  text-align: center;
}
.provider-code-login-code {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-4);
}
.provider-code-login-steps {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  margin: 0;
  padding-left: var(--openbot-space-4);
  list-style: decimal;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  align-self: stretch;
}
.provider-code-login-url {
  display: inline-flex;
  height: auto;
  gap: var(--openbot-space-1-5);
  padding: 0;
}
.provider-code-login-url > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.provider-code-login-value {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  align-self: stretch;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  padding: var(--openbot-space-3) var(--openbot-space-4);
}
.provider-code-login-copy > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.provider-code-login-digits {
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-2xl);
  line-height: var(--openbot-leading-2xl);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: var(--openbot-tracking-wide);
}
.provider-code-login-paste {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-3);
  align-self: stretch;
}
.provider-code-login-expiry {
  margin: 0;
  text-align: center;
}
.provider-use-app-actions {
  flex-direction: row;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
}
.provider-code-login-close {
  position: absolute;
  top: var(--openbot-space-3);
  right: var(--openbot-space-3);
}
@keyframes provider-code-login-dialog-in {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
}
@font-face {
  font-display: block;
  font-family: KaTeX_AMS;
  font-style: normal;
  font-weight: 400;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_AMS-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_AMS-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_AMS-Regular.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Caligraphic;
  font-style: normal;
  font-weight: 700;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Bold.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Bold.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Bold.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Caligraphic;
  font-style: normal;
  font-weight: 400;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Regular.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Fraktur;
  font-style: normal;
  font-weight: 700;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Fraktur-Bold.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Fraktur-Bold.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Fraktur-Bold.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Fraktur;
  font-style: normal;
  font-weight: 400;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Fraktur-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Fraktur-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Fraktur-Regular.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Main;
  font-style: normal;
  font-weight: 700;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-Bold.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-Bold.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-Bold.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Main;
  font-style: italic;
  font-weight: 700;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-BoldItalic.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-BoldItalic.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-BoldItalic.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Main;
  font-style: italic;
  font-weight: 400;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-Italic.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-Italic.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-Italic.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Main;
  font-style: normal;
  font-weight: 400;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-Regular.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Math;
  font-style: italic;
  font-weight: 700;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Math-BoldItalic.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Math-BoldItalic.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Math-BoldItalic.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Math;
  font-style: italic;
  font-weight: 400;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Math-Italic.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Math-Italic.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Math-Italic.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: "KaTeX_SansSerif";
  font-style: normal;
  font-weight: 700;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_SansSerif-Bold.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_SansSerif-Bold.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_SansSerif-Bold.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: "KaTeX_SansSerif";
  font-style: italic;
  font-weight: 400;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_SansSerif-Italic.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_SansSerif-Italic.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_SansSerif-Italic.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: "KaTeX_SansSerif";
  font-style: normal;
  font-weight: 400;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_SansSerif-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_SansSerif-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_SansSerif-Regular.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Script;
  font-style: normal;
  font-weight: 400;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Script-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Script-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Script-Regular.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Size1;
  font-style: normal;
  font-weight: 400;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size1-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size1-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size1-Regular.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Size2;
  font-style: normal;
  font-weight: 400;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size2-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size2-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size2-Regular.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Size3;
  font-style: normal;
  font-weight: 400;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size3-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size3-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size3-Regular.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Size4;
  font-style: normal;
  font-weight: 400;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size4-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size4-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size4-Regular.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Typewriter;
  font-style: normal;
  font-weight: 400;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Typewriter-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Typewriter-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Typewriter-Regular.ttf) format("truetype");
}
.katex {
  font: normal 1.21em KaTeX_Main,Times New Roman,serif;
  line-height: 1.2;
  position: relative;
  text-indent: 0;
  text-rendering: auto;
}
.katex * {
  -ms-high-contrast-adjust: none !important;
  border-color: currentColor;
}
.katex .katex-version:after {
  content: "0.18.9";
}
.katex .katex-mathml {
  border: 0;
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.katex .katex-html>.katex-newline {
  display: block;
}
.katex .katex-base {
  position: relative;
  white-space: nowrap;
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
}
.katex .katex-base,.katex .katex-strut {
  display: inline-block;
}
.katex .textbf {
  font-weight: 700;
}
.katex .textit {
  font-style: italic;
}
.katex .textrm {
  font-family: KaTeX_Main;
}
.katex .textsf {
  font-family: KaTeX_SansSerif;
}
.katex .texttt {
  font-family: KaTeX_Typewriter;
}
.katex .mathnormal {
  font-family: KaTeX_Math;
  font-style: italic;
}
.katex .mathit {
  font-family: KaTeX_Main;
  font-style: italic;
}
.katex .mathrm {
  font-style: normal;
}
.katex .mathbf {
  font-family: KaTeX_Main;
  font-weight: 700;
}
.katex .boldsymbol {
  font-family: KaTeX_Math;
  font-style: italic;
  font-weight: 700;
}
.katex .amsrm,.katex .mathbb,.katex .textbb {
  font-family: KaTeX_AMS;
}
.katex .mathcal {
  font-family: KaTeX_Caligraphic;
}
.katex .mathfrak,.katex .textfrak {
  font-family: KaTeX_Fraktur;
}
.katex .mathboldfrak,.katex .textboldfrak {
  font-family: KaTeX_Fraktur;
  font-weight: 700;
}
.katex .mathtt {
  font-family: KaTeX_Typewriter;
}
.katex .mathscr,.katex .textscr {
  font-family: KaTeX_Script;
}
.katex .mathsf,.katex .textsf {
  font-family: KaTeX_SansSerif;
}
.katex .mathboldsf,.katex .textboldsf {
  font-family: KaTeX_SansSerif;
  font-weight: 700;
}
.katex .mathitsf,.katex .mathsfit,.katex .textitsf {
  font-family: KaTeX_SansSerif;
  font-style: italic;
}
.katex .mainrm {
  font-family: KaTeX_Main;
  font-style: normal;
}
.katex .vlist-t {
  border-collapse: collapse;
  display: inline-table;
  table-layout: fixed;
}
.katex .vlist-r {
  display: table-row;
}
.katex .vlist {
  display: table-cell;
  position: relative;
  vertical-align: bottom;
}
.katex .vlist>span {
  display: block;
  height: 0;
  position: relative;
}
.katex .vlist>span>span {
  display: inline-block;
}
.katex .vlist>span>.pstrut {
  overflow: hidden;
  width: 0;
}
.katex .vlist-t2 {
  margin-right: -2px;
}
.katex .vlist-s {
  display: table-cell;
  font-size: 1px;
  min-width: 2px;
  vertical-align: bottom;
  width: 2px;
}
.katex .katex-vbox {
  align-items: baseline;
  display: inline-flex;
  flex-direction: column;
}
.katex .katex-thinbox {
  display: inline-flex;
  flex-direction: row;
  max-width: 0;
  width: 0;
}
.katex .msupsub {
  text-align: left;
}
.katex .mfrac>span>span {
  text-align: center;
}
.katex .mfrac .frac-line {
  border-bottom-style: solid;
  display: inline-block;
  width: 100%;
}
.katex .katex-hdashline,.katex .katex-hline,.katex .katex-overline .overline-line,.katex .katex-rule,.katex .katex-underline .underline-line,.katex .mfrac .frac-line {
  min-height: 1px;
}
.katex .mspace {
  display: inline-block;
}
.katex .katex-smash {
  display: inline;
  line-height: 0;
}
.katex .clap,.katex .llap,.katex .rlap {
  position: relative;
  width: 0;
}
.katex .clap>.katex-inner,.katex .llap>.katex-inner,.katex .rlap>.katex-inner {
  position: absolute;
}
.katex .clap>.katex-fix,.katex .llap>.katex-fix,.katex .rlap>.katex-fix {
  display: inline-block;
}
.katex .llap>.katex-inner {
  right: 0;
}
.katex .clap>.katex-inner,.katex .rlap>.katex-inner {
  left: 0;
}
.katex .clap>.katex-inner>span {
  margin-left: -50%;
  margin-right: 50%;
}
.katex .katex-rule {
  border: 0 solid;
  display: inline-block;
  position: relative;
}
.katex .katex-hline,.katex .katex-overline .overline-line,.katex .katex-underline .underline-line {
  border-bottom-style: solid;
  display: inline-block;
  width: 100%;
}
.katex .katex-hdashline {
  border-bottom-style: dashed;
  display: inline-block;
  width: 100%;
}
.katex .sqrt>.katex-root {
  margin-left: .2777777778em;
  margin-right: -.5555555556em;
}
.katex .fontsize-ensurer.reset-size1.size1,.katex .katex-sizing.reset-size1.size1 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size1.size2,.katex .katex-sizing.reset-size1.size2 {
  font-size: 1.2em;
}
.katex .fontsize-ensurer.reset-size1.size3,.katex .katex-sizing.reset-size1.size3 {
  font-size: 1.4em;
}
.katex .fontsize-ensurer.reset-size1.size4,.katex .katex-sizing.reset-size1.size4 {
  font-size: 1.6em;
}
.katex .fontsize-ensurer.reset-size1.size5,.katex .katex-sizing.reset-size1.size5 {
  font-size: 1.8em;
}
.katex .fontsize-ensurer.reset-size1.size6,.katex .katex-sizing.reset-size1.size6 {
  font-size: 2em;
}
.katex .fontsize-ensurer.reset-size1.size7,.katex .katex-sizing.reset-size1.size7 {
  font-size: 2.4em;
}
.katex .fontsize-ensurer.reset-size1.size8,.katex .katex-sizing.reset-size1.size8 {
  font-size: 2.88em;
}
.katex .fontsize-ensurer.reset-size1.size9,.katex .katex-sizing.reset-size1.size9 {
  font-size: 3.456em;
}
.katex .fontsize-ensurer.reset-size1.size10,.katex .katex-sizing.reset-size1.size10 {
  font-size: 4.148em;
}
.katex .fontsize-ensurer.reset-size1.size11,.katex .katex-sizing.reset-size1.size11 {
  font-size: 4.976em;
}
.katex .fontsize-ensurer.reset-size2.size1,.katex .katex-sizing.reset-size2.size1 {
  font-size: .8333333333em;
}
.katex .fontsize-ensurer.reset-size2.size2,.katex .katex-sizing.reset-size2.size2 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size2.size3,.katex .katex-sizing.reset-size2.size3 {
  font-size: 1.1666666667em;
}
.katex .fontsize-ensurer.reset-size2.size4,.katex .katex-sizing.reset-size2.size4 {
  font-size: 1.3333333333em;
}
.katex .fontsize-ensurer.reset-size2.size5,.katex .katex-sizing.reset-size2.size5 {
  font-size: 1.5em;
}
.katex .fontsize-ensurer.reset-size2.size6,.katex .katex-sizing.reset-size2.size6 {
  font-size: 1.6666666667em;
}
.katex .fontsize-ensurer.reset-size2.size7,.katex .katex-sizing.reset-size2.size7 {
  font-size: 2em;
}
.katex .fontsize-ensurer.reset-size2.size8,.katex .katex-sizing.reset-size2.size8 {
  font-size: 2.4em;
}
.katex .fontsize-ensurer.reset-size2.size9,.katex .katex-sizing.reset-size2.size9 {
  font-size: 2.88em;
}
.katex .fontsize-ensurer.reset-size2.size10,.katex .katex-sizing.reset-size2.size10 {
  font-size: 3.4566666667em;
}
.katex .fontsize-ensurer.reset-size2.size11,.katex .katex-sizing.reset-size2.size11 {
  font-size: 4.1466666667em;
}
.katex .fontsize-ensurer.reset-size3.size1,.katex .katex-sizing.reset-size3.size1 {
  font-size: .7142857143em;
}
.katex .fontsize-ensurer.reset-size3.size2,.katex .katex-sizing.reset-size3.size2 {
  font-size: .8571428571em;
}
.katex .fontsize-ensurer.reset-size3.size3,.katex .katex-sizing.reset-size3.size3 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size3.size4,.katex .katex-sizing.reset-size3.size4 {
  font-size: 1.1428571429em;
}
.katex .fontsize-ensurer.reset-size3.size5,.katex .katex-sizing.reset-size3.size5 {
  font-size: 1.2857142857em;
}
.katex .fontsize-ensurer.reset-size3.size6,.katex .katex-sizing.reset-size3.size6 {
  font-size: 1.4285714286em;
}
.katex .fontsize-ensurer.reset-size3.size7,.katex .katex-sizing.reset-size3.size7 {
  font-size: 1.7142857143em;
}
.katex .fontsize-ensurer.reset-size3.size8,.katex .katex-sizing.reset-size3.size8 {
  font-size: 2.0571428571em;
}
.katex .fontsize-ensurer.reset-size3.size9,.katex .katex-sizing.reset-size3.size9 {
  font-size: 2.4685714286em;
}
.katex .fontsize-ensurer.reset-size3.size10,.katex .katex-sizing.reset-size3.size10 {
  font-size: 2.9628571429em;
}
.katex .fontsize-ensurer.reset-size3.size11,.katex .katex-sizing.reset-size3.size11 {
  font-size: 3.5542857143em;
}
.katex .fontsize-ensurer.reset-size4.size1,.katex .katex-sizing.reset-size4.size1 {
  font-size: .625em;
}
.katex .fontsize-ensurer.reset-size4.size2,.katex .katex-sizing.reset-size4.size2 {
  font-size: .75em;
}
.katex .fontsize-ensurer.reset-size4.size3,.katex .katex-sizing.reset-size4.size3 {
  font-size: .875em;
}
.katex .fontsize-ensurer.reset-size4.size4,.katex .katex-sizing.reset-size4.size4 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size4.size5,.katex .katex-sizing.reset-size4.size5 {
  font-size: 1.125em;
}
.katex .fontsize-ensurer.reset-size4.size6,.katex .katex-sizing.reset-size4.size6 {
  font-size: 1.25em;
}
.katex .fontsize-ensurer.reset-size4.size7,.katex .katex-sizing.reset-size4.size7 {
  font-size: 1.5em;
}
.katex .fontsize-ensurer.reset-size4.size8,.katex .katex-sizing.reset-size4.size8 {
  font-size: 1.8em;
}
.katex .fontsize-ensurer.reset-size4.size9,.katex .katex-sizing.reset-size4.size9 {
  font-size: 2.16em;
}
.katex .fontsize-ensurer.reset-size4.size10,.katex .katex-sizing.reset-size4.size10 {
  font-size: 2.5925em;
}
.katex .fontsize-ensurer.reset-size4.size11,.katex .katex-sizing.reset-size4.size11 {
  font-size: 3.11em;
}
.katex .fontsize-ensurer.reset-size5.size1,.katex .katex-sizing.reset-size5.size1 {
  font-size: .5555555556em;
}
.katex .fontsize-ensurer.reset-size5.size2,.katex .katex-sizing.reset-size5.size2 {
  font-size: .6666666667em;
}
.katex .fontsize-ensurer.reset-size5.size3,.katex .katex-sizing.reset-size5.size3 {
  font-size: .7777777778em;
}
.katex .fontsize-ensurer.reset-size5.size4,.katex .katex-sizing.reset-size5.size4 {
  font-size: .8888888889em;
}
.katex .fontsize-ensurer.reset-size5.size5,.katex .katex-sizing.reset-size5.size5 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size5.size6,.katex .katex-sizing.reset-size5.size6 {
  font-size: 1.1111111111em;
}
.katex .fontsize-ensurer.reset-size5.size7,.katex .katex-sizing.reset-size5.size7 {
  font-size: 1.3333333333em;
}
.katex .fontsize-ensurer.reset-size5.size8,.katex .katex-sizing.reset-size5.size8 {
  font-size: 1.6em;
}
.katex .fontsize-ensurer.reset-size5.size9,.katex .katex-sizing.reset-size5.size9 {
  font-size: 1.92em;
}
.katex .fontsize-ensurer.reset-size5.size10,.katex .katex-sizing.reset-size5.size10 {
  font-size: 2.3044444444em;
}
.katex .fontsize-ensurer.reset-size5.size11,.katex .katex-sizing.reset-size5.size11 {
  font-size: 2.7644444444em;
}
.katex .fontsize-ensurer.reset-size6.size1,.katex .katex-sizing.reset-size6.size1 {
  font-size: .5em;
}
.katex .fontsize-ensurer.reset-size6.size2,.katex .katex-sizing.reset-size6.size2 {
  font-size: .6em;
}
.katex .fontsize-ensurer.reset-size6.size3,.katex .katex-sizing.reset-size6.size3 {
  font-size: .7em;
}
.katex .fontsize-ensurer.reset-size6.size4,.katex .katex-sizing.reset-size6.size4 {
  font-size: .8em;
}
.katex .fontsize-ensurer.reset-size6.size5,.katex .katex-sizing.reset-size6.size5 {
  font-size: .9em;
}
.katex .fontsize-ensurer.reset-size6.size6,.katex .katex-sizing.reset-size6.size6 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size6.size7,.katex .katex-sizing.reset-size6.size7 {
  font-size: 1.2em;
}
.katex .fontsize-ensurer.reset-size6.size8,.katex .katex-sizing.reset-size6.size8 {
  font-size: 1.44em;
}
.katex .fontsize-ensurer.reset-size6.size9,.katex .katex-sizing.reset-size6.size9 {
  font-size: 1.728em;
}
.katex .fontsize-ensurer.reset-size6.size10,.katex .katex-sizing.reset-size6.size10 {
  font-size: 2.074em;
}
.katex .fontsize-ensurer.reset-size6.size11,.katex .katex-sizing.reset-size6.size11 {
  font-size: 2.488em;
}
.katex .fontsize-ensurer.reset-size7.size1,.katex .katex-sizing.reset-size7.size1 {
  font-size: .4166666667em;
}
.katex .fontsize-ensurer.reset-size7.size2,.katex .katex-sizing.reset-size7.size2 {
  font-size: .5em;
}
.katex .fontsize-ensurer.reset-size7.size3,.katex .katex-sizing.reset-size7.size3 {
  font-size: .5833333333em;
}
.katex .fontsize-ensurer.reset-size7.size4,.katex .katex-sizing.reset-size7.size4 {
  font-size: .6666666667em;
}
.katex .fontsize-ensurer.reset-size7.size5,.katex .katex-sizing.reset-size7.size5 {
  font-size: .75em;
}
.katex .fontsize-ensurer.reset-size7.size6,.katex .katex-sizing.reset-size7.size6 {
  font-size: .8333333333em;
}
.katex .fontsize-ensurer.reset-size7.size7,.katex .katex-sizing.reset-size7.size7 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size7.size8,.katex .katex-sizing.reset-size7.size8 {
  font-size: 1.2em;
}
.katex .fontsize-ensurer.reset-size7.size9,.katex .katex-sizing.reset-size7.size9 {
  font-size: 1.44em;
}
.katex .fontsize-ensurer.reset-size7.size10,.katex .katex-sizing.reset-size7.size10 {
  font-size: 1.7283333333em;
}
.katex .fontsize-ensurer.reset-size7.size11,.katex .katex-sizing.reset-size7.size11 {
  font-size: 2.0733333333em;
}
.katex .fontsize-ensurer.reset-size8.size1,.katex .katex-sizing.reset-size8.size1 {
  font-size: .3472222222em;
}
.katex .fontsize-ensurer.reset-size8.size2,.katex .katex-sizing.reset-size8.size2 {
  font-size: .4166666667em;
}
.katex .fontsize-ensurer.reset-size8.size3,.katex .katex-sizing.reset-size8.size3 {
  font-size: .4861111111em;
}
.katex .fontsize-ensurer.reset-size8.size4,.katex .katex-sizing.reset-size8.size4 {
  font-size: .5555555556em;
}
.katex .fontsize-ensurer.reset-size8.size5,.katex .katex-sizing.reset-size8.size5 {
  font-size: .625em;
}
.katex .fontsize-ensurer.reset-size8.size6,.katex .katex-sizing.reset-size8.size6 {
  font-size: .6944444444em;
}
.katex .fontsize-ensurer.reset-size8.size7,.katex .katex-sizing.reset-size8.size7 {
  font-size: .8333333333em;
}
.katex .fontsize-ensurer.reset-size8.size8,.katex .katex-sizing.reset-size8.size8 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size8.size9,.katex .katex-sizing.reset-size8.size9 {
  font-size: 1.2em;
}
.katex .fontsize-ensurer.reset-size8.size10,.katex .katex-sizing.reset-size8.size10 {
  font-size: 1.4402777778em;
}
.katex .fontsize-ensurer.reset-size8.size11,.katex .katex-sizing.reset-size8.size11 {
  font-size: 1.7277777778em;
}
.katex .fontsize-ensurer.reset-size9.size1,.katex .katex-sizing.reset-size9.size1 {
  font-size: .2893518519em;
}
.katex .fontsize-ensurer.reset-size9.size2,.katex .katex-sizing.reset-size9.size2 {
  font-size: .3472222222em;
}
.katex .fontsize-ensurer.reset-size9.size3,.katex .katex-sizing.reset-size9.size3 {
  font-size: .4050925926em;
}
.katex .fontsize-ensurer.reset-size9.size4,.katex .katex-sizing.reset-size9.size4 {
  font-size: .462962963em;
}
.katex .fontsize-ensurer.reset-size9.size5,.katex .katex-sizing.reset-size9.size5 {
  font-size: .5208333333em;
}
.katex .fontsize-ensurer.reset-size9.size6,.katex .katex-sizing.reset-size9.size6 {
  font-size: .5787037037em;
}
.katex .fontsize-ensurer.reset-size9.size7,.katex .katex-sizing.reset-size9.size7 {
  font-size: .6944444444em;
}
.katex .fontsize-ensurer.reset-size9.size8,.katex .katex-sizing.reset-size9.size8 {
  font-size: .8333333333em;
}
.katex .fontsize-ensurer.reset-size9.size9,.katex .katex-sizing.reset-size9.size9 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size9.size10,.katex .katex-sizing.reset-size9.size10 {
  font-size: 1.2002314815em;
}
.katex .fontsize-ensurer.reset-size9.size11,.katex .katex-sizing.reset-size9.size11 {
  font-size: 1.4398148148em;
}
.katex .fontsize-ensurer.reset-size10.size1,.katex .katex-sizing.reset-size10.size1 {
  font-size: .2410800386em;
}
.katex .fontsize-ensurer.reset-size10.size2,.katex .katex-sizing.reset-size10.size2 {
  font-size: .2892960463em;
}
.katex .fontsize-ensurer.reset-size10.size3,.katex .katex-sizing.reset-size10.size3 {
  font-size: .337512054em;
}
.katex .fontsize-ensurer.reset-size10.size4,.katex .katex-sizing.reset-size10.size4 {
  font-size: .3857280617em;
}
.katex .fontsize-ensurer.reset-size10.size5,.katex .katex-sizing.reset-size10.size5 {
  font-size: .4339440694em;
}
.katex .fontsize-ensurer.reset-size10.size6,.katex .katex-sizing.reset-size10.size6 {
  font-size: .4821600771em;
}
.katex .fontsize-ensurer.reset-size10.size7,.katex .katex-sizing.reset-size10.size7 {
  font-size: .5785920926em;
}
.katex .fontsize-ensurer.reset-size10.size8,.katex .katex-sizing.reset-size10.size8 {
  font-size: .6943105111em;
}
.katex .fontsize-ensurer.reset-size10.size9,.katex .katex-sizing.reset-size10.size9 {
  font-size: .8331726133em;
}
.katex .fontsize-ensurer.reset-size10.size10,.katex .katex-sizing.reset-size10.size10 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size10.size11,.katex .katex-sizing.reset-size10.size11 {
  font-size: 1.1996142719em;
}
.katex .fontsize-ensurer.reset-size11.size1,.katex .katex-sizing.reset-size11.size1 {
  font-size: .2009646302em;
}
.katex .fontsize-ensurer.reset-size11.size2,.katex .katex-sizing.reset-size11.size2 {
  font-size: .2411575563em;
}
.katex .fontsize-ensurer.reset-size11.size3,.katex .katex-sizing.reset-size11.size3 {
  font-size: .2813504823em;
}
.katex .fontsize-ensurer.reset-size11.size4,.katex .katex-sizing.reset-size11.size4 {
  font-size: .3215434084em;
}
.katex .fontsize-ensurer.reset-size11.size5,.katex .katex-sizing.reset-size11.size5 {
  font-size: .3617363344em;
}
.katex .fontsize-ensurer.reset-size11.size6,.katex .katex-sizing.reset-size11.size6 {
  font-size: .4019292605em;
}
.katex .fontsize-ensurer.reset-size11.size7,.katex .katex-sizing.reset-size11.size7 {
  font-size: .4823151125em;
}
.katex .fontsize-ensurer.reset-size11.size8,.katex .katex-sizing.reset-size11.size8 {
  font-size: .578778135em;
}
.katex .fontsize-ensurer.reset-size11.size9,.katex .katex-sizing.reset-size11.size9 {
  font-size: .6945337621em;
}
.katex .fontsize-ensurer.reset-size11.size10,.katex .katex-sizing.reset-size11.size10 {
  font-size: .8336012862em;
}
.katex .fontsize-ensurer.reset-size11.size11,.katex .katex-sizing.reset-size11.size11 {
  font-size: 1em;
}
.katex .delimsizing.size1 {
  font-family: KaTeX_Size1;
}
.katex .delimsizing.size2 {
  font-family: KaTeX_Size2;
}
.katex .delimsizing.size3 {
  font-family: KaTeX_Size3;
}
.katex .delimsizing.size4 {
  font-family: KaTeX_Size4;
}
.katex .delimsizing.mult .delim-size1>span {
  font-family: KaTeX_Size1;
}
.katex .delimsizing.mult .delim-size4>span {
  font-family: KaTeX_Size4;
}
.katex .nulldelimiter {
  display: inline-block;
  width: .12em;
}
.katex .delimcenter,.katex .op-symbol {
  position: relative;
}
.katex .op-symbol.small-op {
  font-family: KaTeX_Size1;
}
.katex .op-symbol.large-op {
  font-family: KaTeX_Size2;
}
.katex .katex-accent>.vlist-t,.katex .op-limits>.vlist-t {
  text-align: center;
}
.katex .katex-accent .accent-body {
  position: relative;
}
.katex .katex-accent .accent-body:not(.accent-full) {
  width: 0;
}
.katex .katex-overlay {
  display: block;
}
.katex .mtable .vertical-separator {
  display: inline-block;
  min-width: 1px;
}
.katex .mtable .arraycolsep {
  display: inline-block;
}
.katex .mtable .col-align-c>.vlist-t {
  text-align: center;
}
.katex .mtable .col-align-l>.vlist-t {
  text-align: left;
}
.katex .mtable .col-align-r>.vlist-t {
  text-align: right;
}
.katex .svg-align {
  text-align: left;
}
.katex svg {
  fill: currentColor;
  stroke: currentColor;
  display: block;
  height: inherit;
  position: absolute;
  width: 100%;
}
.katex svg path {
  stroke: none;
}
.katex svg {
  fill-rule: nonzero;
  fill-opacity: 1;
  stroke-width: 1;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-miterlimit: 4;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  stroke-opacity: 1;
}
.katex img {
  border-style: none;
  max-height: none;
  max-width: none;
  min-height: 0;
  min-width: 0;
}
.katex .katex-stretchy {
  display: block;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.katex .katex-stretchy:after,.katex .katex-stretchy:before {
  content: "";
}
.katex .hide-tail {
  overflow: hidden;
  position: relative;
  width: 100%;
}
.katex .halfarrow-left {
  left: 0;
  overflow: hidden;
  position: absolute;
  width: 50.2%;
}
.katex .halfarrow-right {
  overflow: hidden;
  position: absolute;
  right: 0;
  width: 50.2%;
}
.katex .brace-left {
  left: 0;
  overflow: hidden;
  position: absolute;
  width: 25.1%;
}
.katex .brace-center {
  left: 25%;
  overflow: hidden;
  position: absolute;
  width: 50%;
}
.katex .brace-right {
  overflow: hidden;
  position: absolute;
  right: 0;
  width: 25.1%;
}
.katex .x-arrow-pad {
  padding: 0 .5em;
}
.katex .cd-arrow-pad {
  padding: 0 .55556em 0 .27778em;
}
.katex .mover,.katex .munder,.katex .x-arrow {
  text-align: center;
}
.katex .boxpad {
  padding: 0 .3em;
}
.katex .fbox,.katex .fcolorbox {
  border: .04em solid;
  box-sizing: border-box;
}
.katex .cancel-pad {
  padding: 0 .2em;
}
.katex .cancel-lap {
  margin-left: -.2em;
  margin-right: -.2em;
}
.katex .katex-sout {
  border-bottom-style: solid;
  border-bottom-width: .08em;
}
.katex .angl {
  border-right: .049em solid;
  border-top: .049em solid;
  box-sizing: border-box;
  margin-right: .03889em;
}
.katex .anglpad {
  padding: 0 .03889em;
}
.katex .reflectbox {
  display: inline-block;
  transform: scaleX(-1);
}
.katex .eqn-num:before {
  content: "(" counter(katexEqnNo) ")";
  counter-increment: katexEqnNo;
}
.katex .mml-eqn-num:before {
  content: "(" counter(mmlEqnNo) ")";
  counter-increment: mmlEqnNo;
}
.katex .mtr-glue {
  width: 50%;
}
.katex .cd-vert-arrow {
  display: inline-block;
  position: relative;
}
.katex .cd-label-left {
  display: inline-block;
  position: absolute;
  right: calc(50% + .3em);
  text-align: left;
}
.katex .cd-label-right {
  display: inline-block;
  left: calc(50% + .3em);
  position: absolute;
  text-align: right;
}
.katex-display {
  display: block;
  margin: 1em 0;
  text-align: center;
}
.katex-display>.katex {
  display: block;
  text-align: center;
  white-space: nowrap;
}
.katex-display>.katex>.katex-html {
  display: block;
  position: relative;
}
.katex-display>.katex>.katex-html>.katex-tag {
  position: absolute;
  right: 0;
}
.katex-display.leqno>.katex>.katex-html>.katex-tag {
  left: 0;
  right: auto;
}
.katex-display.fleqn>.katex {
  padding-left: 2em;
  text-align: left;
}
body {
  counter-reset: katexEqnNo mmlEqnNo;
}
.conversation-panel {
  position: relative;
  display: flex;
  grid-column: 3;
  grid-row: 1;
  min-width: 0;
  flex-direction: column;
  background: var(--openbot-bg-canvas);
  transition: padding-right var(--panel-resize-duration, var(--openbot-duration-overlay)) cubic-bezier(0.22, 1, 0.36, 1);
}
.direct-conversation {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 0;
  grid-column: 3;
  grid-row: 1;
  flex-direction: column;
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
}
.app-frame-with-server-rail .direct-conversation {
  grid-column: 4;
}
.direct-conversation-header {
  display: flex;
  height: 46px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--openbot-hover);
  padding: 0 14px;
}
.direct-conversation-person {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}
.direct-conversation-person .person-avatar {
  --agent-avatar-optical-offset: -8px;
  width: 30px;
  height: 30px;
  border-radius: var(--openbot-radius-md);
}
.direct-conversation-person .person-avatar > i {
  display: none;
}
.direct-conversation-person h1 {
  overflow: hidden;
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: 560;
  line-height: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.direct-conversation-person div > span {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 11px;
}
.direct-conversation-person div > span i {
  width: 5px;
  height: 5px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control-hover);
}
.direct-conversation-person div > span.online {
  color: var(--openbot-success);
}
.direct-conversation-person div > span.online i {
  background: var(--openbot-success);
}
.direct-private-label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--openbot-text-readable);
  font-size: var(--openbot-text-sm);
}
.direct-private-label svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}
.direct-message-list {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  padding: 22px max(18px, calc((100% - 760px) / 2)) 28px;
}
.direct-conversation-state, .direct-conversation-empty {
  display: grid;
  min-height: 100%;
  place-content: center;
  justify-items: center;
  color: var(--openbot-text-muted);
  text-align: center;
}
.direct-conversation-empty h2 {
  margin: 14px 0 4px;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-xl);
  font-weight: 560;
}
.direct-conversation-empty p {
  max-width: 290px;
  margin: 0;
  font-size: var(--openbot-text-sm);
  line-height: 17px;
}
.direct-message-list .ui-message-group {
  gap: 0;
}
.direct-message > .ui-message-content {
  max-width: min(560px, 78%);
}
.direct-message .ui-bubble {
  max-width: 100%;
}
.direct-message .ui-bubble-content {
  font-size: var(--openbot-text-md);
  line-height: 19px;
  white-space: pre-wrap;
}
.direct-message time {
  color: var(--openbot-text-readable);
  font-size: var(--openbot-text-sm);
}
.direct-message .ui-message-footer {
  padding: 0 2px;
}
.direct-composer-wrap {
  flex: 0 0 auto;
  padding: 0 max(18px, calc((100% - 760px) / 2)) 16px;
}
.direct-typing-indicator {
  display: flex;
  min-height: 20px;
  align-items: center;
  gap: 7px;
  padding: 0 10px 4px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.direct-message-error {
  margin: 0 8px 6px;
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
}
.direct-composer {
  display: flex;
  min-height: 46px;
  align-items: flex-end;
  gap: 8px;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  padding: 6px 7px 6px 13px;
  box-shadow: 0 8px 25px var(--openbot-shadow-popover-ambient);
}
.direct-composer:focus-within {
  border-color: var(--openbot-border-strong);
}
.direct-composer textarea {
  min-width: 0;
  min-height: 32px;
  max-height: 130px;
  flex: 1;
  resize: none;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 6px 0;
  color: var(--openbot-text-primary);
  font: inherit;
  font-size: var(--openbot-text-md);
  line-height: 20px;
}
.direct-composer textarea::placeholder {
  color: var(--openbot-text-muted);
}
.direct-composer > button {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-success);
  color: var(--openbot-success);
  font-size: var(--openbot-text-xl);
  font-weight: 650;
}
.direct-composer > button:disabled {
  background: var(--openbot-border);
  color: var(--openbot-text-dim);
}
.app-frame-with-server-rail .conversation-panel {
  grid-column: 4;
}
.conversation-header {
  display: flex;
  height: 38px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  border-bottom: 0;
  padding: 0 12px 0 8px;
  background: transparent;
}
.conversation-heading-group {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}
.chat-search {
  position: absolute;
  z-index: 13;
  top: 19px;
  right: 16px;
  display: flex;
  width: min(308px, calc(100% - 32px));
  height: 34px;
  align-items: center;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  box-shadow: var(--openbot-shadow-raised);
  color: var(--openbot-text-muted);
}
.chat-search-icon {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  margin-left: 11px;
  stroke-width: var(--openbot-icon-stroke);
}
.chat-search .chat-search-input {
  min-width: 0;
  height: var(--openbot-control-md);
  flex: 1;
  border: 0;
  background: transparent;
  padding: 0 8px;
  box-shadow: none;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
}
.chat-search .chat-search-input:focus {
  border: 0;
  box-shadow: none;
  outline: 0;
}
.chat-search-input::-webkit-search-cancel-button {
  display: none;
}
.chat-search-position {
  min-width: 38px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.chat-search-separator {
  width: 1px;
  height: 20px;
  flex: 0 0 auto;
  background: var(--openbot-border);
}
.chat-search .chat-search-button {
  width: 26px;
  height: var(--openbot-control-md);
  flex: 0 0 auto;
  border: 0;
  border-radius: inherit;
  padding: 0;
}
.chat-search-button svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: var(--openbot-icon-stroke);
}
.chat-search .chat-search-close {
  margin-right: 3px;
}
::highlight(openbot-chat-search-results) {
  background: var(--openbot-accent-soft);
}
::highlight(openbot-chat-search-current) {
  background: var(--openbot-warning);
  color: var(--openbot-text-on-light);
}
.conversation-title[aria-label="View agent settings"]:hover {
  color: var(--openbot-text-primary);
}
.browser-panel {
  position: absolute;
  z-index: 14;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  width: var(--browser-panel-width, 380px);
  flex-direction: column;
  border-left: 1px solid var(--openbot-border);
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
  transition: border-color var(--openbot-duration-slow) ease, box-shadow var(--openbot-duration-slow) ease;
}
.file-preview-panel.t-panel-slide {
  --panel-translate-x: 24px;
  --panel-translate-y: 0px;
  transition: transform var(--panel-close-dur) var(--panel-ease), opacity var(--panel-close-dur) var(--panel-ease), filter var(--panel-close-dur) var(--panel-ease), border-color var(--openbot-duration-slow) ease, box-shadow var(--openbot-duration-slow) ease;
}
.file-preview-panel.t-panel-slide[data-open="true"] {
  transition: transform var(--panel-open-dur) var(--panel-ease), opacity var(--panel-open-dur) var(--panel-ease), filter var(--panel-open-dur) var(--panel-ease), border-color var(--openbot-duration-slow) ease, box-shadow var(--openbot-duration-slow) ease;
}
.file-preview-header {
  display: flex;
  height: 39px;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--openbot-border);
  padding: 0 7px 0 11px;
}
.file-preview-header h2 {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-preview-copy svg {
  width: 15px;
  height: 15px;
  stroke-width: 2;
}
.file-preview-file-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  stroke-width: var(--openbot-icon-stroke);
}
.file-preview-content {
  min-height: 0;
  flex: 1;
  overflow: auto;
  background: var(--openbot-bg-canvas);
}
.markdown-file-preview {
  min-width: 0;
}
.file-preview-markdown {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 26px 48px;
  color: var(--openbot-text-primary);
  overflow-wrap: anywhere;
}
.file-preview-markdown > .message-markdown {
  font-size: var(--openbot-text-md);
  line-height: 1.6;
}
.file-preview-markdown-status {
  min-width: 0;
  margin: 0;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface);
  padding: 18px 20px;
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  line-height: 1.55;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.file-preview-text {
  min-width: min-content;
  min-height: 100%;
  margin: 0;
  padding: 18px 20px 48px;
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  line-height: 1.55;
  tab-size: 2;
  white-space: pre;
}
.file-preview-text-wrap {
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.file-preview-image-wrap {
  display: grid;
  min-height: 100%;
  padding: 20px;
  place-items: center;
}
.file-preview-image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.file-preview-pdf {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--openbot-bg-canvas);
}
.file-preview-audio {
  display: block;
  width: calc(100% - 40px);
  margin: 20px;
}
.file-preview-video {
  display: block;
  width: 100%;
  max-height: 100%;
  background: var(--openbot-bg-canvas);
  object-fit: contain;
}
.file-preview-spreadsheet {
  min-width: 0;
  min-height: 100%;
  padding: 20px;
  color: var(--openbot-text-primary);
}
.file-preview-spreadsheet-status {
  margin: 0;
  color: var(--openbot-text-muted);
  font-family: var(--openbot-font-mono);
  white-space: pre-wrap;
}
.file-preview-spreadsheet-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  overflow-x: auto;
}
.file-preview-spreadsheet-tabs button {
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-control);
  padding: 6px 10px;
  color: var(--openbot-text-muted);
  white-space: nowrap;
}
.file-preview-spreadsheet-tabs button[aria-pressed="true"] {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-primary);
}
.file-preview-spreadsheet-table-wrap {
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface);
}
.file-preview-spreadsheet-table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: var(--openbot-text-sm);
}
.file-preview-spreadsheet-table caption {
  padding: 10px 12px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-align: left;
}
.file-preview-spreadsheet-table th, .file-preview-spreadsheet-table td {
  border-top: 1px solid var(--openbot-border);
  border-right: 1px solid var(--openbot-border);
  padding: 8px 12px;
  text-align: left;
  white-space: pre;
}
.file-preview-spreadsheet-table th {
  background: var(--openbot-bg-control);
  font-weight: 600;
}
.file-preview-spreadsheet-table td:last-child, .file-preview-spreadsheet-table th:last-child {
  border-right: 0;
}
.file-preview-spreadsheet-note {
  margin: 10px 0 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.file-preview-unsupported {
  display: grid;
  min-height: 100%;
  place-content: center;
  justify-items: center;
  gap: 8px;
  padding: 24px;
  color: var(--openbot-text-muted);
  text-align: center;
}
.file-preview-unsupported > svg {
  width: 28px;
  height: 28px;
  margin-bottom: 4px;
}
.file-preview-unsupported strong {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
}
.file-preview-unsupported span {
  max-width: 260px;
  font-size: var(--openbot-text-sm);
  line-height: 1.45;
}
.file-preview-unsupported button {
  margin-top: 6px;
}
.file-preview-truncated {
  position: sticky;
  bottom: 0;
  margin: 0;
  border-top: 1px solid var(--openbot-border);
  background: var(--openbot-bg-control);
  padding: 7px 12px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-align: center;
}
.browser-pip-window {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
}
.browser-pip-surface {
  width: 100%;
  height: 100%;
}
.file-preview-folder {
  display: grid;
  margin: 0;
  padding: 8px;
  list-style: none;
}
.file-preview-folder-entry {
  display: grid;
  width: 100%;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  justify-content: stretch;
  padding: 6px 10px;
  font-size: var(--openbot-text-sm);
  text-align: left;
}
.file-preview-folder-name {
  overflow: hidden;
  color: var(--openbot-text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-preview-folder-meta {
  color: var(--openbot-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.file-preview-folder-empty {
  margin: 0;
  padding: 24px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-align: center;
}
.conversation-panel.browser-panel-active {
  padding-right: var(--browser-panel-width, 380px);
}
.remote-desktop-workspace {
  position: fixed;
  z-index: var(--openbot-layer-toast);
  inset: 0;
  display: flex;
  min-width: 0;
  flex-direction: column;
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity var(--openbot-duration-fast) cubic-bezier(0.2, 0, 0, 1), visibility 0s linear var(--openbot-duration-fast);
}
.remote-desktop-workspace-visible {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0s;
}
.remote-desktop-workspace:focus {
  outline: none;
}
.remote-desktop-header {
  display: flex;
  height: 38px;
  min-height: 38px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  border-bottom: 1px solid var(--openbot-border);
  padding: 0 8px 0 0;
  background: var(--openbot-bg-sidebar);
}
.remote-desktop-workspace-darwin .remote-desktop-header {
  padding-left: 84px;
}
.remote-desktop-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  flex: 0 1 auto;
  justify-content: flex-end;
  gap: 4px;
  margin-left: auto;
  white-space: nowrap;
}
.remote-desktop-display-controls {
  min-width: 0;
  display: flex;
  flex: 0 1 168px;
  align-items: center;
}
.remote-desktop-back-button, .remote-desktop-disconnect-button {
  flex: 0 0 auto;
}
.remote-desktop-disconnect-button {
  color: var(--openbot-text-muted);
}
.remote-desktop-disconnect-button:hover:not(:disabled, [aria-disabled="true"]), .remote-desktop-disconnect-button:focus-visible:not(:disabled, [aria-disabled="true"]) {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
}
.remote-desktop-stage {
  position: relative;
  min-height: 0;
  flex: 1;
  overflow: hidden;
  background: var(--openbot-accent);
}
.remote-desktop-viewer, .remote-desktop-viewer > div {
  width: 100%;
  height: 100%;
}
.remote-desktop-viewer {
  overflow: hidden;
  display: block;
  object-fit: contain;
}
.remote-desktop-display-select {
  width: min(168px, 22vw);
  min-width: 112px;
  flex: 0 1 168px;
  font-size: var(--openbot-text-sm);
}
.remote-desktop-display-select-content {
  z-index: calc(var(--openbot-layer-toast) + 1);
}
.remote-desktop-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
  background: var(--openbot-bg-overlay);
  padding: 24px;
  text-align: center;
}
.remote-desktop-overlay strong {
  max-width: 330px;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: 600;
}
.remote-desktop-connecting-avatar {
  width: 56px;
  height: 56px;
  margin-bottom: 5px;
  filter: drop-shadow(0 8px 18px var(--openbot-accent-soft));
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity var(--openbot-duration-overlay) var(--openbot-ease-out), transform var(--openbot-duration-overlay) var(--openbot-ease-out);
  will-change: opacity, transform;
}
@starting-style {
  .remote-desktop-connecting-avatar {
    opacity: 0;
    transform: translateY(4px) scale(0.96);
  }
}
.remote-desktop-overlay > span:not(.ui-spinner):not(.remote-desktop-empty-mark) {
  max-width: 330px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
}
.remote-desktop-empty-mark {
  display: grid;
  width: 38px;
  height: 38px;
  margin-bottom: 5px;
  place-items: center;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-hover);
  color: var(--openbot-text-muted);
}
.remote-desktop-empty-mark svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}
.remote-desktop-overlay > button {
  height: 34px;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-border);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: 600;
}
.remote-desktop-overlay > button:hover {
  background: var(--openbot-border-strong);
}
.remote-desktop-overlay > button {
  min-width: 92px;
  margin-top: 5px;
  padding: 0 13px;
}
.remote-desktop-button-dot {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 5px;
  height: 5px;
  border: 1px solid var(--openbot-bg-sidebar);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success);
}
.browser-pip-controls-document, .browser-pip-controls-document body, .browser-pip-controls-document #root {
  background: transparent;
}
.browser-pip-hover-controls {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  padding: 4px;
  opacity: 0;
  transition: opacity var(--openbot-duration-fast) ease;
  -webkit-app-region: drag;
}
.browser-pip-hover-controls:hover, .browser-pip-hover-controls:focus-within, .browser-pip-window-hover .browser-pip-hover-controls {
  opacity: 1;
}
.browser-pip-hover-button {
  display: grid;
  width: 20px;
  height: 22px;
  flex: 0 0 20px;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  padding: 0;
  background: var(--openbot-bg-overlay);
  color: var(--openbot-text-secondary);
  -webkit-app-region: no-drag;
}
.browser-pip-hover-button:hover {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}
.browser-pip-hover-button .browser-toolbar-icon {
  width: 12px;
  height: 12px;
}
.browser-pip-hover-button:active {
  transform: scale(0.96);
  transition: transform var(--openbot-duration-fast) cubic-bezier(0.23, 1, 0.32, 1);
}
.browser-tab-control-icon {
  width: 12px;
  height: 12px;
  overflow: visible;
  fill: currentColor;
}
.browser-toolbar-button {
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--openbot-text-muted);
}
.browser-toolbar-button:hover:not(:disabled) {
  background: var(--openbot-border);
  color: var(--openbot-text-primary);
}
.browser-toolbar-button {
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  border-radius: var(--openbot-radius-sm);
}
.browser-toolbar-button:disabled {
  color: var(--openbot-text-dim);
  cursor: default;
}
.browser-toolbar-icon {
  width: 15px;
  height: 15px;
}
.browser-recording-status, .browser-diagnostic-status {
  display: inline-flex;
  height: 24px;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  border-radius: var(--openbot-radius-sm);
  padding: 0 5px;
  font-size: var(--openbot-text-sm);
  line-height: 1;
}
.browser-recording-status {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
}
.browser-diagnostic-status {
  background: var(--openbot-warning-soft);
  color: var(--openbot-warning);
}
.browser-recording-status svg, .browser-diagnostic-status svg {
  width: 12px;
  height: 12px;
}
.browser-surface {
  position: relative;
  min-height: 0;
  flex: 1;
  overflow: hidden;
  background: var(--openbot-bg-canvas);
}
.browser-live-view {
  position: absolute;
  inset: 0;
}
.browser-live-view canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.browser-empty-state {
  display: grid;
  height: 100%;
  place-content: center;
  gap: 5px;
  color: var(--openbot-text-muted);
  text-align: center;
}
.browser-empty-state strong {
  font-size: var(--openbot-text-lg);
  font-weight: 600;
}
.browser-empty-state span {
  font-size: var(--openbot-text-sm);
}
.agent-settings-avatar-picker {
  position: relative;
  z-index: 30;
  display: grid;
  width: 62px;
  height: 62px;
  margin: var(--openbot-space-2) auto var(--openbot-space-4);
  place-items: center;
}
.agent-settings-avatar {
  position: relative;
  display: grid;
  width: 62px;
  height: 62px;
  margin: 0;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  background: transparent;
}
.agent-settings-avatar .agent-avatar {
  --agent-avatar-optical-offset: calc(62px * -0.14);
  width: 62px;
  height: 62px;
}
.agent-settings-avatar .agent-avatar > svg {
  width: 128%;
  height: 128%;
}
.agent-settings-avatar:hover {
  filter: brightness(1.08);
}
.agent-settings-avatar-badge {
  position: absolute;
  right: -4px;
  bottom: -4px;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 3px solid var(--openbot-bg-canvas);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-primary);
}
.agent-settings-avatar-badge-icon {
  width: 11px;
  height: 11px;
}
.agent-routines-overlay {
  position: absolute;
  z-index: 2;
  top: 39px;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-y: auto;
  background: var(--openbot-bg-canvas);
}
.agent-routines-settings {
  min-height: 100%;
  padding: 12px 15px 28px;
}
.agent-routines-list, .agent-routine-run-list {
  display: grid;
}
.agent-routines-list {
  gap: 0;
}
.agent-routine-list-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px;
  align-items: center;
}
.agent-routine-row {
  display: grid;
  width: 100%;
  min-height: 48px;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  padding: 5px 7px;
  text-align: left;
  transition: border-color var(--openbot-duration-hover) ease, background-color var(--openbot-duration-hover) ease;
}
.agent-routine-row:focus-visible {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-hover);
}
.agent-routine-row > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 2px;
}
.agent-routine-row strong, .agent-routine-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-routine-row strong {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: 500;
}
.agent-routine-row small, .agent-routines-empty {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.agent-routine-action-buttons svg {
  width: 15px;
  height: 15px;
}
.agent-routine-status-icon-active, .agent-routine-status-icon-paused {
  display: grid;
  place-items: center;
}
.agent-routine-status-icon-active {
  color: var(--openbot-success);
}
.agent-routine-status-icon-paused {
  color: var(--openbot-text-muted);
}
.agent-routine-status-icon-active > svg, .agent-routine-status-icon-paused > svg {
  width: 14px;
  height: 14px;
  stroke-width: var(--openbot-icon-stroke);
}
@media (hover: hover) and (pointer: fine) {
  .agent-routine-row:hover {
    border-color: var(--openbot-border);
    background: var(--openbot-hover);
  }
}
.agent-routine-editor-actions {
  display: grid;
  gap: 11px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--openbot-border);
  padding-bottom: 16px;
}
.agent-routine-active-toggle, .agent-routine-action-buttons, .agent-routine-run-row {
  display: flex;
  align-items: center;
}
.agent-routine-active-toggle {
  justify-content: space-between;
}
.agent-routine-active-toggle > span {
  display: grid;
  gap: 2px;
}
.agent-routine-active-toggle strong {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
}
.agent-routine-active-toggle small {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.agent-routine-action-buttons {
  flex-wrap: wrap;
  gap: 7px;
}
.agent-routine-action-buttons button {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
  padding: 7px 9px;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.agent-routine-action-buttons button:hover:not(:disabled) {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}
.agent-routine-when, .agent-routine-history {
  margin-top: 24px;
}
.agent-routine-history {
  border-top: 1px solid var(--openbot-border);
  padding-top: 20px;
}
.agent-routine-run-list {
  margin-top: 10px;
}
.agent-routine-run-row {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  gap: 9px;
  border-bottom: 1px solid var(--openbot-border);
  padding: 9px 2px;
}
.agent-routines-overlay {
  top: 0;
  overflow: hidden;
}
.agent-routines-settings {
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
}
.agent-routines-header {
  width: 100%;
}
.agent-routines-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-0-5);
}
.agent-routines-body {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  padding: 14px 15px 28px;
  scrollbar-width: none;
}
.agent-routines-body::-webkit-scrollbar {
  display: none;
}
.agent-routine-editor {
  display: grid;
  gap: 14px;
}
.agent-routine-editor > .settings-field {
  margin-bottom: 0;
}
.agent-routine-editor-actions {
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  border: 0;
  padding: 0;
}
.agent-routine-active-toggle {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
}
.ui-switch-field.agent-routine-active-toggle {
  width: auto;
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.agent-routine-active-toggle .ui-switch-label {
  font-size: var(--openbot-text-sm);
  font-weight: inherit;
}
.agent-routine-action-buttons {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 7px;
}
.agent-routine-action-buttons button {
  min-height: 32px;
  border-radius: var(--openbot-radius-md);
  padding-inline: 11px;
  font-size: var(--openbot-text-sm);
}
.agent-routine-action-buttons .ui-button-variant-destructive {
  border-color: transparent;
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
}
.agent-routine-action-buttons .ui-button-variant-default {
  border-color: transparent;
  background: var(--openbot-surface-light);
  color: var(--openbot-text-on-light);
}
@media (hover: hover) and (pointer: fine) {
  .agent-routine-action-buttons .ui-button-variant-destructive:hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-danger-soft-hover);
    color: var(--openbot-danger);
  }
  .agent-routine-action-buttons .ui-button-variant-default:hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-surface-light);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--openbot-surface-light) 82%, transparent);
    }
    color: var(--openbot-text-on-light);
  }
}
.agent-routine-instruction-field textarea {
  height: 158px;
  min-height: 158px;
  max-height: 158px;
  overflow-y: auto;
  resize: none;
}
.agent-routine-history {
  margin-top: 2px;
}
.agent-routine-when {
  margin-top: 0;
}
.agent-routine-when h3, .agent-routine-history h3 {
  margin: 0 0 var(--openbot-space-1-5) var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  font-weight: inherit;
  line-height: var(--openbot-leading-md);
}
.agent-routine-event-filter {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) auto;
  align-items: center;
  gap: var(--openbot-space-2);
}
.agent-routine-history {
  border: 0;
  padding-top: 0;
}
.agent-routine-run-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-top: 0;
}
.agent-routine-run-row {
  display: flex;
  width: 100%;
  min-height: 32px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  padding: 5px var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  text-align: left;
}
.ui-button.agent-routine-run-link {
  cursor: pointer;
}
.agent-routine-run-text {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-wrap: wrap;
  gap: 0 var(--openbot-space-2);
  white-space: nowrap;
}
.agent-routine-run-note {
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-routine-history-error {
  margin-bottom: var(--openbot-space-2);
}
.agent-routine-run-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.agent-routine-delivery-row {
  display: flex;
  min-height: 28px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 var(--openbot-space-2) 5px;
  font-size: var(--openbot-text-sm);
}
.agent-routine-delivery-note {
  min-width: 0;
  color: var(--openbot-text-muted);
  overflow-wrap: anywhere;
  white-space: normal;
}
.agent-routine-delivery-failed, .agent-routine-delivery-uncertain {
  color: var(--openbot-warning);
}
@media (hover: hover) and (pointer: fine) {
  .ui-button.agent-routine-run-link:hover:not(:disabled) {
    background: var(--openbot-bg-control-hover);
  }
}
.agent-routine-run-icon {
  display: grid;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  place-items: center;
  color: var(--openbot-text-muted);
}
.agent-routine-run-icon > svg {
  width: 16px;
  height: 16px;
  stroke-width: var(--openbot-icon-stroke);
}
.agent-routine-run-icon-succeeded {
  color: var(--openbot-success);
}
.agent-routine-run-icon-failed {
  color: var(--openbot-danger);
}
.agent-routine-run-icon-needs-attention {
  color: var(--openbot-warning);
}
.agent-routine-run-icon-running, .agent-routine-run-icon-queued, .agent-routine-run-icon-interrupted, .agent-routine-run-icon-cancelled {
  color: var(--openbot-text-muted);
}
.agent-memories-overlay[data-closed] {
  animation: agent-dialog-overlay-out var(--openbot-duration-dialog) ease;
}
.agent-memories-modal {
  position: fixed;
  z-index: calc(var(--openbot-layer-dialog) + 1);
  top: 50%;
  left: 50%;
  width: min(560px, calc(100vw - 48px));
  height: min(456px, calc(100dvh - 48px));
  min-height: 320px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  outline: 0;
  background: var(--openbot-bg-control);
  color: var(--openbot-text-primary);
  transform: translate(-50%, -50%);
  transform-origin: center;
}
.agent-memories-header {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  border-bottom: 1px solid var(--openbot-border);
  padding: var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-3);
}
.agent-memories-heading {
  min-width: 0;
}
.agent-skills-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-1);
}
.agent-skills-parent {
  min-width: 0;
  height: auto;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--openbot-text-muted);
  padding: 0;
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-lg);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-skills-crumb {
  flex: 0 0 auto;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
}
.agent-skills-heading h2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-memories-heading h2 {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-lg);
}
.agent-memories-header-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--openbot-space-1);
}
.agent-memories-header-actions svg, .agent-memory-delete-button svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.agent-memories-add-button {
  color: var(--openbot-text-secondary);
}
.agent-memories-body {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: var(--openbot-space-2);
}
.agent-memory-composer {
  display: grid;
  gap: var(--openbot-space-2);
  margin: 0 0 var(--openbot-space-3);
  padding: var(--openbot-space-1) var(--openbot-space-1) 0;
}
.agent-memory-input {
  min-height: 64px;
  resize: none;
  border-color: var(--openbot-border);
  background: transparent;
}
.agent-memory-input:focus-visible {
  border-color: var(--openbot-border-strong);
  outline: 0;
  box-shadow: none;
}
.agent-memory-composer-actions, .agent-memory-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-1);
}
.agent-memory-inclusion-actions {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-1);
}
.agent-memory-list {
  min-height: 0;
  display: grid;
  grid-auto-rows: max-content;
  flex: 1;
  align-content: start;
  gap: var(--openbot-space-0-5);
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  scrollbar-width: none;
}
.agent-memory-row {
  min-height: 50px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--openbot-control-md) + var(--openbot-space-2));
  align-items: stretch;
  border-radius: var(--openbot-radius-md);
  overflow: hidden;
  background: transparent;
}
@media (hover: hover) and (pointer: fine) {
  .agent-memory-row:hover {
    background: var(--openbot-bg-control-hover);
  }
}
.agent-memory-row:has(.agent-memory-row-main:focus-visible) {
  background: var(--openbot-bg-control-active);
}
.agent-memory-row-main {
  min-width: 0;
  width: 100%;
  height: 100%;
  display: grid;
  align-content: center;
  justify-content: stretch;
  justify-items: start;
  gap: var(--openbot-space-1);
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  padding: var(--openbot-space-2) var(--openbot-space-3);
  color: inherit;
  font: inherit;
  text-align: left;
}
.agent-memory-row-main:focus-visible {
  box-shadow: none;
}
.agent-memory-row .agent-memory-row-main:hover {
  background: transparent;
}
.agent-memory-text {
  display: block;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  white-space: pre-wrap;
}
.agent-memory-meta {
  display: block;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.agent-memory-delete-button {
  align-self: center;
  align-items: center;
  justify-self: center;
  color: var(--openbot-text-muted);
}
.agent-memory-editor {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--openbot-space-2);
  background: transparent;
  padding: var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-2);
}
.agent-memory-row:has(.agent-memory-editor), .agent-memory-row:has(.agent-memory-editor):hover {
  background: transparent;
}
.agent-memory-state, .agent-memory-limit, .agent-memory-error {
  margin: var(--openbot-space-1);
  border-radius: var(--openbot-radius-md);
  padding: var(--openbot-space-3);
  font-size: var(--openbot-text-sm);
}
.agent-memory-state {
  min-height: 160px;
  display: grid;
  place-items: center;
  color: var(--openbot-text-muted);
  text-align: center;
}
.agent-memory-limit {
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-secondary);
}
.agent-memory-error {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
}
.shared-table-list {
  min-height: 0;
  display: grid;
  flex: 1;
  align-content: start;
  gap: var(--openbot-space-0-5);
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  scrollbar-width: none;
}
.shared-table-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
  padding: var(--openbot-space-2) var(--openbot-space-3);
}
.shared-table-main {
  min-width: 0;
  display: grid;
  gap: var(--openbot-space-1);
}
.shared-table-name {
  display: block;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-md);
}
.shared-table-confirm {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface);
  padding: var(--openbot-space-3);
}
.shared-table-confirm p {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.shared-table-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-1);
}
.agent-memories-footer {
  display: flex;
  min-height: 48px;
  align-items: center;
  padding: var(--openbot-space-2) var(--openbot-space-3) var(--openbot-space-3);
}
.agent-skill-empty {
  min-height: 160px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--openbot-space-3);
}
.agent-skill-empty .agent-memory-state {
  min-height: 0;
  padding: 0;
}
.agent-skill-rows {
  display: grid;
  align-content: start;
  gap: 2px;
}
.agent-skill-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--openbot-space-2);
  min-height: 56px;
  padding: var(--openbot-space-1) var(--openbot-space-2);
  border-radius: var(--openbot-radius-lg);
}
.agent-skill-open {
  min-width: 0;
  height: auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  justify-content: stretch;
  justify-items: stretch;
  align-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-1);
  color: inherit;
  text-align: left;
}
.agent-skill-open:hover {
  background: transparent;
}
@media (hover: hover) and (pointer: fine) {
  .agent-skill-row:hover {
    background: var(--openbot-bg-control-hover);
  }
}
.agent-skill-icon {
  width: 40px;
  height: 40px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  color: var(--openbot-accent-text);
}
.agent-skill-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.agent-skill-icon svg {
  width: 20px;
  height: 20px;
}
.agent-skill-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.agent-skill-title {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: var(--openbot-space-2);
}
.agent-skill-title strong {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-skill-row:has(.agent-skill-update) {
  grid-template-columns: minmax(0, 1fr) auto auto auto;
}
.ui-button.agent-skill-update {
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
  font-size: var(--openbot-text-sm);
}
.ui-button.agent-skill-update:hover:not(:disabled):not([data-disabled]), .ui-button.agent-skill-update:focus-visible {
  background: var(--openbot-accent-soft);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-accent-soft), var(--openbot-accent) 12%);
  }
  color: var(--openbot-accent-text);
}
.agent-skill-copy small {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-skill-row-disabled .agent-skill-title strong {
  color: var(--openbot-text-muted);
}
.agent-skill-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-secondary);
  opacity: 0;
  cursor: pointer;
}
.agent-skill-more svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.agent-skill-row:hover .agent-skill-more, .agent-skill-row:focus-within .agent-skill-more, .agent-skill-row:has([aria-expanded="true"]) .agent-skill-more {
  opacity: 1;
}
.agent-skill-menu {
  z-index: calc(var(--openbot-layer-dialog) + var(--openbot-layer-popover) + 1);
}
.agent-skills-modal .ui-switch[data-checked] {
  background: var(--openbot-accent);
}
.agent-skills-modal .ui-switch-thumb[data-checked] {
  background: var(--openbot-text-primary);
}
.agent-local-library, .agent-skill-detail {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: var(--openbot-space-4);
  overflow: auto;
  padding: var(--openbot-space-3);
  scrollbar-width: none;
}
.agent-local-library::-webkit-scrollbar, .agent-skill-detail::-webkit-scrollbar {
  display: none;
}
.agent-memories-modal[data-expanded] {
  animation: agent-dialog-content-in var(--openbot-duration-dialog) ease;
}
.agent-memories-modal[data-closed] {
  animation: agent-dialog-content-out var(--openbot-duration-dialog) ease;
}
@keyframes agent-dialog-overlay-out {
  to {
    opacity: 0;
  }
}
@keyframes agent-dialog-content-in {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
  }
}
@keyframes agent-dialog-content-out {
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
  }
}
@media (max-width: 520px) {
  .agent-memories-modal {
    width: calc(100vw - 24px);
    height: calc(100dvh - 24px);
  }
  .agent-memories-header {
    padding-left: var(--openbot-space-3);
  }
}
@media (prefers-reduced-motion: reduce) {
  .agent-memories-overlay, .agent-memories-modal {
    animation: none;
  }
}
.agent-settings-page {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
}
.agent-settings-page > .settings-field {
  margin: 0;
}
.agent-settings-switch-row {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  padding: 0 var(--openbot-space-3);
}
.agent-settings-switch-row > .settings-link-label {
  flex: 1 1 auto;
}
.agent-settings-runtime-rows .provider-model-trigger-field, .agent-settings-runtime-rows .agent-settings-runtime-row {
  width: 100%;
  height: auto;
  min-height: 40px;
  gap: var(--openbot-space-2);
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 var(--openbot-space-3);
  box-shadow: none;
  font-size: var(--openbot-text-md);
}
.agent-settings-runtime-rows .provider-model-trigger-field:hover:not(:disabled), .agent-settings-runtime-rows .provider-model-trigger-field[aria-expanded="true"], .agent-settings-runtime-rows .agent-settings-runtime-row[data-expanded] {
  background: var(--openbot-hover);
}
.agent-settings-runtime-rows .provider-model-trigger-field:focus-visible, .agent-settings-runtime-rows .ui-select .agent-settings-runtime-row:focus-visible {
  outline: 0;
  background: var(--openbot-hover);
  box-shadow: inset 0 0 0 1px var(--openbot-border-focus);
}
.agent-settings-runtime-rows .provider-model-trigger-field .provider-model-field-label, .agent-settings-runtime-label {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: 18px;
  text-align: left;
}
.agent-settings-runtime-rows .provider-model-trigger-field .provider-model-trigger-name, .agent-settings-runtime-row .ui-select-value {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
}
.agent-settings-runtime-row .ui-select-trigger-icon {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
@media (hover: hover) and (pointer: fine) {
  .agent-settings-runtime-rows .provider-model-trigger-field:hover .provider-model-trigger-name, .agent-settings-runtime-row:hover .ui-select-value {
    color: var(--openbot-text-secondary);
  }
}
.agent-settings-runtime-rows .provider-model-popover {
  width: var(--kb-popper-anchor-width);
  min-width: 0;
}
.agent-settings-runtime-path {
  display: grid;
  gap: 2px;
  padding: 11px var(--openbot-space-3);
}
.agent-settings-runtime-path > span:last-child {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 17px;
  overflow-wrap: anywhere;
  user-select: text;
}
.agent-settings-runtime-note {
  margin: 0;
  padding-inline: var(--openbot-space-1);
  text-wrap: pretty;
}
.agent-settings-save-error {
  margin: 0 var(--openbot-space-1);
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
}
.agent-settings-notifications {
  display: flex;
  min-height: 70px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-border);
  padding: 13px 12px;
}
.agent-settings-notifications > div {
  min-width: 0;
}
.agent-settings-notifications strong, .agent-settings-notifications span {
  display: block;
}
.agent-settings-notifications strong {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: 500;
  line-height: 18px;
}
.agent-settings-notifications div > span {
  max-width: 194px;
  margin-top: 2px;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: 15px;
}
.routine-trigger-row, .routine-weekday-strip, .routine-calendar-days {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}
:is(.routine-schedule-picker, .routine-popover, .routine-chip-select-content) :is(button, input, textarea):focus-visible {
  outline: 0;
}
:is(.routine-schedule-picker, .routine-popover) .ui-button:focus-visible {
  box-shadow: var(--openbot-focus-ring);
}
.routine-schedule-picker {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-1-5);
}
.routine-trigger-row {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: var(--openbot-space-2);
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-shadow-popover-ambient);
  padding: var(--openbot-space-1);
  transition: border-color var(--openbot-duration-hover) ease;
}
.routine-trigger-row:focus-within {
  border-color: var(--openbot-text-muted);
}
.routine-schedule-picker[data-density="card"] .routine-trigger-row {
  border: 0;
  background: none;
  padding: 0;
}
.routine-trigger-icon {
  display: inline-flex;
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
  color: var(--openbot-text-on-accent);
}
.routine-trigger-icon svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: 2;
}
.routine-schedule-picker[data-density="panel"] .routine-trigger-icon {
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
}
.routine-schedule-picker[data-density="card"] .routine-trigger-icon {
  display: none;
}
.routine-trigger-chips {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: var(--openbot-space-2);
  overflow: clip;
  overflow-clip-margin: var(--openbot-space-1);
}
.routine-trigger-phrase {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--openbot-space-2);
}
.routine-trigger-phrase-flexible {
  min-width: 0;
  flex-shrink: 1;
}
.routine-connector {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
.routine-chip-select {
  width: auto;
  flex: 0 0 auto;
}
.routine-chip-select-flexible {
  min-width: 0;
  flex-shrink: 1;
}
.routine-chip {
  display: inline-flex;
  height: var(--openbot-control-md);
  min-width: 0;
  max-width: 100%;
  align-items: center;
  gap: var(--openbot-space-1-5);
  cursor: pointer;
  border: 0;
  border-radius: var(--openbot-radius-md);
  outline: 0;
  background: var(--openbot-bg-control-active);
  padding: 0 var(--openbot-space-3);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
  white-space: nowrap;
  flex: 0 0 auto;
  transition: background-color var(--openbot-duration-hover) ease;
}
.routine-chip-flexible {
  flex-shrink: 1;
}
.routine-chip-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.routine-schedule-picker[data-density="panel"] .routine-chip {
  height: var(--openbot-control-sm);
  border-radius: var(--openbot-radius-xs);
}
.routine-schedule-picker[data-density="card"] .routine-chip {
  height: var(--openbot-control-sm);
  padding: 0 var(--openbot-space-2);
  font-size: var(--openbot-text-md);
}
.routine-chip:focus-visible {
  box-shadow: var(--openbot-focus-ring);
}
.routine-chip:is([aria-expanded="true"], [data-expanded]) {
  background: var(--openbot-bg-control-hover);
  box-shadow: 0 0 0 1px var(--openbot-border-strong);
}
.routine-chip:disabled, .routine-chip[data-disabled] {
  cursor: default;
  background: transparent;
  padding: 0;
  color: var(--openbot-text-secondary);
}
@media (hover: hover) and (pointer: fine) {
  .routine-chip:hover:not(:disabled, [data-disabled]) {
    background: var(--openbot-bg-control-hover);
    box-shadow: 0 0 0 1px var(--openbot-border-strong);
  }
}
.routine-chip-select-content {
  min-width: 160px;
}
.routine-chip-select-content .ui-select-item {
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
.routine-cron-input {
  min-width: 0;
  max-width: 220px;
  flex: 1 1 180px;
  font-family: var(--openbot-font-mono);
}
.routine-schedule-hint {
  margin: 0;
  padding-left: var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.routine-schedule-picker[data-density="card"] .routine-schedule-hint {
  padding-left: 0;
}
.routine-popover {
  z-index: var(--openbot-layer-popover);
  border-radius: var(--openbot-radius-lg);
  padding: var(--openbot-space-2);
}
.routine-weekday-strip {
  display: flex;
  gap: var(--openbot-space-1);
}
.routine-day-item {
  display: inline-flex;
}
.routine-day {
  display: inline-flex;
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  min-width: 0;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--openbot-radius-pill);
  padding: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.routine-day-item:has(:focus-visible) .routine-day {
  box-shadow: var(--openbot-focus-ring);
}
.routine-weekday-strip .routine-day {
  background: var(--openbot-bg-control-active);
}
@media (hover: hover) and (pointer: fine) {
  .routine-day:hover:not(:disabled, .routine-day-selected) {
    background: var(--openbot-hover);
    color: var(--openbot-text-primary);
  }
}
.routine-day.routine-day-selected, .routine-day.routine-day-selected:hover {
  background: var(--openbot-text-primary);
  color: var(--openbot-bg-canvas);
}
.routine-day.routine-day-selected:focus-visible {
  box-shadow: var(--openbot-focus-ring);
}
.routine-clock-input {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
}
.routine-clock-segment.ui-input {
  width: 48px;
  height: var(--openbot-control-lg);
  border: 0;
  background: var(--openbot-bg-control-active);
  padding: 0;
  font-size: var(--openbot-text-lg);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.routine-clock-segment.ui-input:focus-visible {
  box-shadow: var(--openbot-focus-ring);
}
.routine-clock-separator {
  color: var(--openbot-text-muted);
}
.routine-segmented {
  display: flex;
  margin-left: var(--openbot-space-1);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control-active);
  padding: var(--openbot-space-0-5);
}
.routine-segmented-control {
  display: inline-flex;
  height: calc(var(--openbot-control-lg) - 2 * var(--openbot-space-0-5));
  min-width: 44px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--openbot-radius-sm);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.routine-segmented-control label {
  cursor: pointer;
}
.routine-segmented-control[data-checked] {
  background: var(--openbot-text-primary);
  color: var(--openbot-bg-canvas);
}
.routine-segmented-item:has(:focus-visible) .routine-segmented-control {
  box-shadow: var(--openbot-focus-ring);
}
.routine-window-menu {
  display: grid;
  width: 240px;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-1);
}
.routine-window-options {
  display: grid;
  gap: var(--openbot-space-0-5);
}
.routine-window-repeat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  border-top: 1px solid var(--openbot-border);
  padding: var(--openbot-space-2) var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-3);
}
.routine-window-repeat-label {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
.routine-window-option-control {
  display: flex;
  min-height: var(--openbot-control-lg);
  align-items: center;
  gap: var(--openbot-space-2);
  cursor: pointer;
  border-radius: var(--openbot-radius-md);
  padding: var(--openbot-space-2) var(--openbot-space-3);
}
.routine-window-option-control[data-checked] {
  background: var(--openbot-hover);
}
.routine-window-option:has(:focus-visible) .routine-window-option-control {
  box-shadow: var(--openbot-focus-ring);
}
@media (hover: hover) and (pointer: fine) {
  .routine-window-option-control:hover {
    background: var(--openbot-hover);
  }
}
.routine-window-option-label {
  flex: 1;
  cursor: pointer;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
.routine-window-option-check {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
}
.routine-window-option-check svg {
  width: 100%;
  height: 100%;
}
.routine-window-range {
  display: grid;
  gap: var(--openbot-space-1-5);
  padding: var(--openbot-space-1) var(--openbot-space-3) var(--openbot-space-2);
}
.routine-window-range-times {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.routine-window-range-count {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.routine-calendar {
  display: grid;
  width: calc(7 * var(--openbot-control-md) + 6 * var(--openbot-space-0-5));
  gap: var(--openbot-space-1);
}
.routine-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--openbot-space-1);
}
.routine-calendar-title {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.routine-calendar-weekdays, .routine-calendar-days {
  display: grid;
  grid-template-columns: repeat(7, var(--openbot-control-md));
  gap: var(--openbot-space-0-5);
}
.routine-calendar-weekdays span {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-align: center;
}
.routine-calendar-day:focus-visible {
  box-shadow: var(--openbot-focus-ring);
}
.routine-calendar-day[aria-current="date"]:not(.routine-day-selected) {
  color: var(--openbot-accent-text);
}
.routine-calendar-day:disabled {
  cursor: default;
  opacity: 0.32;
}
.routine-schedule-picker:not([data-fit="roomy"]) .routine-trigger-chips {
  gap: var(--openbot-space-1-5);
}
.routine-schedule-picker:not([data-fit="roomy"]) .routine-trigger-phrase {
  gap: var(--openbot-space-1);
}
.routine-schedule-picker:not([data-fit="roomy"]) .routine-connector {
  font-size: var(--openbot-text-md);
}
.routine-schedule-picker[data-density="panel"]:not([data-fit="roomy"]) .routine-trigger-row {
  gap: var(--openbot-space-1-5);
}
.routine-schedule-picker[data-density="panel"]:not([data-fit="roomy"]) .routine-trigger-icon svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.routine-schedule-picker[data-density="panel"]:not([data-fit="roomy"]) .routine-chip {
  gap: var(--openbot-space-1);
  padding: 0 var(--openbot-space-2);
  font-size: var(--openbot-text-md);
}
.routine-schedule-picker[data-density="panel"]:is([data-fit="tight"], [data-fit="minimal"]) .routine-connector-optional {
  display: none;
}
.routine-schedule-picker[data-density="panel"]:is([data-fit="tight"], [data-fit="minimal"]) :is(.routine-trigger-row, .routine-trigger-chips) {
  gap: var(--openbot-space-1);
}
.routine-schedule-picker[data-density="panel"]:is([data-fit="tight"], [data-fit="minimal"]) .routine-trigger-icon {
  width: var(--openbot-control-xs);
  height: var(--openbot-control-xs);
  align-self: center;
}
.routine-schedule-picker[data-density="panel"]:is([data-fit="tight"], [data-fit="minimal"]) .routine-chip {
  padding: 0 var(--openbot-space-1-5);
}
.routine-schedule-picker[data-fit="minimal"] :is(.routine-trigger-icon, .routine-connector) {
  display: none;
}
.routine-schedule-picker[data-fit="minimal"] .routine-trigger-chips {
  gap: var(--openbot-space-1);
}
.routine-trigger-action {
  display: inline-flex;
  flex: 0 0 auto;
  align-self: center;
  margin-inline-start: calc(var(--openbot-space-1) * -1);
}
.routine-trigger-action:empty {
  display: none;
}
:is(.routine-trigger-row, .routine-trigger-card-header) .routine-trigger-action .ui-button {
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
  border-radius: var(--openbot-radius-xs);
}
.routine-trigger-card {
  display: grid;
  min-width: 0;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-shadow-popover-ambient);
}
.routine-trigger-card-header {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-3);
}
:is(.routine-trigger-card-header, .routine-trigger-menu) .routine-trigger-icon {
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
}
.routine-trigger-card-title {
  min-width: 0;
  flex: 1;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  text-box: trim-both ex alphabetic;
}
.routine-webhook-field {
  display: grid;
  min-height: calc(var(--openbot-control-sm) + var(--openbot-space-2) + 1px);
  grid-template-columns: minmax(84px, auto) minmax(0, 1fr) var(--openbot-control-sm);
  align-items: center;
  gap: var(--openbot-space-3);
  border: 0;
  border-top: 1px solid var(--openbot-border);
  margin: 0;
  background: none;
  padding: var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-3);
  color: inherit;
  font: inherit;
  text-align: left;
}
.routine-webhook-label {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  white-space: nowrap;
}
.routine-webhook-value {
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
code.routine-webhook-value {
  font-family: inherit;
}
code.routine-webhook-secret {
  padding-block: var(--openbot-space-1-5);
  font-family: var(--openbot-font-mono);
  overflow-wrap: anywhere;
  white-space: normal;
}
.routine-webhook-field > :last-child {
  justify-self: center;
}
.routine-webhook-field > .ui-icon-button {
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
}
.routine-webhook-field.routine-webhook-events-toggle {
  width: auto;
  min-width: 0;
  height: auto;
  justify-content: stretch;
  border-radius: 0 0 calc(var(--openbot-radius-md) - 1px) calc(var(--openbot-radius-md) - 1px);
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.routine-webhook-field.routine-webhook-events-toggle[aria-expanded="true"] {
  background: none;
}
.routine-webhook-field.routine-webhook-events-toggle:hover {
  background: var(--openbot-bg-control-hover);
}
.routine-webhook-events-toggle:focus-visible {
  outline: 0;
  box-shadow: var(--openbot-focus-ring);
}
.routine-webhook-events-toggle > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: var(--openbot-icon-stroke);
  color: var(--openbot-text-muted);
}
.ui-text.routine-webhook-value {
  white-space: normal;
}
.routine-webhook-note {
  padding: 0 var(--openbot-space-3) var(--openbot-space-2);
}
.routine-trigger-card-header + .routine-webhook-note {
  border-top: 1px solid var(--openbot-border);
  padding-top: var(--openbot-space-2);
}
.routine-webhook-secret-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.routine-webhook-events {
  display: grid;
  gap: var(--openbot-space-3);
  border-top: 1px solid var(--openbot-border);
  padding: var(--openbot-space-3);
}
.routine-webhook-events .settings-field {
  display: grid;
  margin: 0;
  gap: var(--openbot-space-1-5);
}
.routine-webhook-events .settings-field > span {
  margin: 0;
}
.routine-webhook-events .settings-field > .ui-text {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.routine-webhook-add-filter {
  justify-self: start;
  margin-left: calc(var(--openbot-space-2) * -1);
  padding-inline: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  font-weight: inherit;
}
.routine-webhook-filter-link {
  justify-self: start;
  margin: 0 0 var(--openbot-space-1) var(--openbot-space-1);
  padding-inline: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: inherit;
}
.routine-webhook-add-filter svg, .routine-webhook-filter-link svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.routine-trigger-menu {
  width: 300px;
  max-height: min(70vh, 560px);
  overflow-y: auto;
}
.routine-trigger-menu.ui-action-menu .routine-trigger-menu-item[role="menuitemradio"] {
  height: auto;
  padding-block: var(--openbot-space-1-5);
  gap: var(--openbot-space-3);
  white-space: normal;
}
.routine-trigger-menu-text {
  display: grid;
  min-width: 0;
  flex: 1;
}
.routine-trigger-menu-description {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.routine-trigger-menu.ui-action-menu .routine-trigger-menu-item > .routine-trigger-menu-check {
  color: var(--openbot-text-primary);
}
.routine-planner {
  container-type: inline-size;
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-4);
  color: var(--openbot-text-primary);
}
.routine-planner-header {
  display: grid;
  gap: var(--openbot-space-3);
}
.routine-planner-title {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
}
.routine-planner-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
}
.routine-planner-identity .ui-icon-button {
  margin-left: calc(-1 * var(--openbot-space-2));
}
.routine-planner-title h2 {
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
}
.routine-planner-title h2 span {
  color: var(--openbot-text-muted);
  font-weight: var(--openbot-weight-regular);
}
.routine-planner-title p, .routine-planner-note {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.routine-planner-toolbar {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.routine-planner-nav {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-1);
}
.routine-planner-range {
  margin-left: var(--openbot-space-2);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.routine-planner-clock-change {
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-warning-soft);
  padding: var(--openbot-space-1-5) var(--openbot-space-3);
  color: var(--openbot-warning-text);
  font-size: var(--openbot-text-sm);
}
.routine-planner-body {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
  align-items: start;
  gap: var(--openbot-space-4);
}
.routine-planner-grid {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-1);
}
.routine-planner-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.routine-planner-weekdays > * {
  padding-inline: calc(1px + var(--openbot-space-1-5));
}
.routine-planner-week {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--openbot-space-1);
}
.routine-planner-day {
  display: grid;
  min-width: 0;
  min-height: 12rem;
  align-content: start;
  gap: var(--openbot-space-1);
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  padding: var(--openbot-space-1-5);
}
.routine-planner-day[data-past] {
  background: var(--openbot-transparent);
}
.routine-planner-day[aria-current="date"] {
  border-color: var(--openbot-accent-strong);
}
.routine-planner-day-button.ui-button {
  width: 100%;
  justify-content: flex-start;
  gap: var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
}
.routine-planner-day-button strong {
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-semibold);
  font-variant-numeric: tabular-nums;
}
.routine-planner-day[aria-current="date"] .routine-planner-day-button strong {
  color: var(--openbot-accent-text);
}
.routine-planner-runs, .routine-planner-entries {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-0-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.routine-planner-status {
  display: grid;
  width: var(--openbot-space-4);
  height: var(--openbot-space-4);
  place-items: center;
}
.routine-planner-status > svg {
  width: var(--openbot-space-3);
  height: var(--openbot-space-3);
  stroke-width: 2;
}
.routine-planner-status-dot {
  width: var(--openbot-space-2);
  height: var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
}
.routine-planner-status[data-status="paused"] {
  color: var(--openbot-text-muted);
}
.routine-planner-status[data-status="failed"] {
  color: var(--openbot-danger-text);
}
.routine-planner-status[data-status="completed"] {
  color: var(--openbot-success-text);
}
.routine-planner-avatars {
  display: flex;
}
.routine-planner-avatar.agent-avatar {
  width: var(--openbot-space-4);
  height: var(--openbot-space-4);
}
.routine-planner-avatars .routine-planner-avatar + .routine-planner-avatar {
  margin-left: calc(var(--openbot-space-1-5) * -1);
}
.routine-planner-run.ui-button {
  display: grid;
  width: 100%;
  height: auto;
  min-height: var(--openbot-control-sm);
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "mark time avatars" "name name name";
  align-items: center;
  gap: var(--openbot-space-0-5) var(--openbot-space-1);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-1) var(--openbot-space-1-5);
  text-align: left;
  font-size: var(--openbot-text-sm);
}
.routine-planner-run .routine-planner-status {
  grid-area: mark;
}
.routine-planner-run-time {
  grid-area: time;
  color: var(--openbot-text-muted);
  font-variant-numeric: tabular-nums;
}
.routine-planner-run-name {
  display: -webkit-box;
  grid-area: name;
  min-width: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.3;
  overflow-wrap: break-word;
  white-space: normal;
}
.routine-planner-run .routine-planner-avatars {
  grid-area: avatars;
}
.routine-planner-run[data-status="paused"], .routine-planner-entry[data-status="paused"] {
  opacity: 0.6;
}
.routine-planner-run[data-status="paused"] {
  outline: 1px dashed var(--openbot-border-grouped);
  outline-offset: -1px;
  background: var(--openbot-transparent);
}
.routine-planner-run[data-status="failed"] {
  background: var(--openbot-danger-soft);
}
.routine-planner-run[data-status="completed"] .routine-planner-run-name {
  color: var(--openbot-text-muted);
}
.routine-planner-more.ui-button {
  justify-self: start;
  color: var(--openbot-text-muted);
}
.routine-planner[data-view="month"] .routine-planner-day {
  min-height: 7rem;
}
.routine-planner[data-view="month"] .routine-planner-day-button > span {
  display: none;
}
.routine-planner[data-view="month"] .routine-planner-run.ui-button {
  grid-template-columns: auto auto minmax(0, 1fr);
  grid-template-areas: "mark time name";
}
.routine-planner[data-view="month"] .routine-planner-run-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.routine-planner[data-view="month"] .routine-planner-run .routine-planner-avatars {
  display: none;
}
.routine-planner-day[data-outside] {
  border-color: var(--openbot-border);
  background: var(--openbot-transparent);
}
.routine-planner-day[data-outside] .routine-planner-day-button strong {
  color: var(--openbot-text-muted);
  font-weight: var(--openbot-weight-regular);
}
.routine-planner-upcoming, .routine-planner-day-view {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: var(--openbot-space-2);
}
.routine-planner-upcoming {
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-lg);
  padding: var(--openbot-space-3);
}
.routine-planner-upcoming h3, .routine-planner-hour h3 {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.routine-planner-hour {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  align-items: start;
  gap: var(--openbot-space-2);
  border-top: 1px solid var(--openbot-border-strong);
  padding-top: var(--openbot-space-2);
}
.routine-planner-hour h3 {
  padding-top: var(--openbot-space-2);
  font-variant-numeric: tabular-nums;
}
.routine-planner-entry {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-1);
}
.routine-planner-entry-main.ui-button {
  display: flex;
  min-width: 0;
  height: auto;
  flex: 1 1 auto;
  align-items: center;
  justify-content: flex-start;
  gap: var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  text-align: left;
}
.routine-planner-entry-text {
  display: grid;
  min-width: 0;
}
.routine-planner-entry-name, .routine-planner-entry-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.routine-planner-entry-name {
  font-size: var(--openbot-text-md);
}
.routine-planner-entry-meta {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
}
.routine-planner-entry[data-status="failed"] .routine-planner-entry-meta {
  color: var(--openbot-danger-text);
}
.routine-planner-entry-agents {
  display: flex;
  flex: 0 0 auto;
}
.routine-planner-agent .routine-planner-avatar.agent-avatar {
  width: var(--openbot-control-xs);
  height: var(--openbot-control-xs);
}
.routine-planner-empty {
  display: grid;
  justify-items: center;
  gap: var(--openbot-space-3);
  border: 1px dashed var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-lg);
  padding: var(--openbot-space-8) var(--openbot-space-4);
  color: var(--openbot-text-muted);
  text-align: center;
}
.routine-planner-empty > svg {
  width: var(--openbot-space-6);
  height: var(--openbot-space-6);
  stroke-width: var(--openbot-icon-stroke);
}
.routine-planner-skeleton-heading {
  height: var(--openbot-control-xs);
}
.routine-planner-skeleton-run {
  height: var(--openbot-control-md);
}
@container (max-width: 1160px) {
  .routine-planner-body {
    grid-template-columns: minmax(0, 1fr);
  }
}
@container (max-width: 920px) {
  .routine-planner-week {
    grid-template-columns: minmax(0, 1fr);
  }
  .routine-planner-day {
    min-height: 0;
    grid-template-columns: 5rem minmax(0, 1fr);
    align-items: start;
  }
  .routine-planner-day > :not(.routine-planner-day-heading) {
    grid-column: 2;
  }
  .routine-planner-loading .routine-planner-day {
    grid-template-columns: minmax(0, 1fr);
  }
  .routine-planner-loading .routine-planner-day > * {
    grid-column: 1;
  }
  .routine-planner-weekdays, .routine-planner-day[data-outside] {
    display: none;
  }
  .routine-planner[data-view="month"] .routine-planner-day {
    min-height: 0;
  }
  .routine-planner[data-view="month"] .routine-planner-day-button > span {
    display: inline;
  }
}
.chat-action-card :is(button, input, textarea):focus-visible {
  outline: 0;
}
.chat-action-card .ui-button:focus-visible {
  box-shadow: 0 0 0 1px var(--openbot-text-muted);
}
.chat-action-card.conversation-interaction-card {
  min-width: min(100%, 320px);
}
.chat-action-card {
  display: grid;
  width: fit-content;
  max-width: min(100%, 520px);
  gap: var(--openbot-space-3);
}
.chat-action-card-header {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
}
.chat-action-card-icon {
  display: inline-flex;
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
  color: var(--openbot-text-on-accent);
}
.chat-action-card-icon svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.chat-action-card-heading {
  display: grid;
  min-width: 0;
  flex: 1;
}
.chat-action-card-eyebrow {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.chat-action-card-title {
  overflow: hidden;
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-lg);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-action-card-open svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.chat-action-card-footer {
  display: flex;
  min-height: var(--openbot-leading-md);
  align-items: center;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.chat-action-card-footer-empty {
  min-height: 0;
  margin-top: calc(-1 * var(--openbot-space-3));
}
.chat-action-card-status {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
}
.chat-action-card-status svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.chat-action-card-footer-action {
  margin-left: auto;
}
.chat-action-card-error {
  color: var(--openbot-danger-text);
}
.chat-action-card-removed .chat-action-card-title {
  color: var(--openbot-text-muted);
  text-decoration: line-through;
}
.marketplace-suggestion.conversation-interaction-card {
  display: grid;
  container-type: inline-size;
  width: 100%;
  max-width: 520px;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3);
}
.marketplace-suggestion-header {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-3);
}
.marketplace-suggestion .marketplace-suggestion-icon {
  width: var(--openbot-control-lg);
  height: var(--openbot-control-lg);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-primary);
}
.marketplace-suggestion .marketplace-suggestion-icon img {
  border-radius: inherit;
}
.marketplace-suggestion-heading {
  display: grid;
  min-width: 0;
  flex: 1;
}
@container (max-width: 360px) {
  .marketplace-suggestion-header {
    flex-wrap: wrap;
  }
  .marketplace-suggestion-heading {
    flex-basis: calc(100% - var(--openbot-control-lg) - var(--openbot-control-md) - 2 * var(--openbot-space-3));
  }
  .marketplace-suggestion-action {
    order: 1;
    width: 100%;
  }
  .marketplace-suggestion-action > .ui-button {
    width: 100%;
  }
}
.marketplace-suggestion-title {
  overflow: hidden;
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.marketplace-suggestion .marketplace-suggestion-name {
  height: auto;
  padding: 0;
  color: inherit;
  font: inherit;
}
.marketplace-suggestion-description {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.marketplace-suggestion-action {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
}
.marketplace-suggestion-done[data-slot="badge"] {
  gap: var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-pill);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.marketplace-suggestion-done svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.marketplace-suggestion-unavailable {
  display: flex;
  margin: 0;
  gap: var(--openbot-space-2);
  border-top: 1px solid var(--openbot-border);
  padding-top: var(--openbot-space-3);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.marketplace-suggestion-unavailable svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  margin-top: var(--openbot-space-0-5);
  color: var(--openbot-text-muted);
}
.marketplace-suggestion-dismissed {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.backup-model-logo {
  display: inline-flex;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: none;
  align-items: center;
  justify-content: center;
}
.backup-model-logo svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  overflow: visible;
  fill: var(--openbot-provider-current);
}
.backup-model-option {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
}
.backup-models-page {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
}
.backup-models-intro {
  margin: 0;
  padding-inline: var(--openbot-space-1);
}
.backup-models-empty {
  margin: 0;
  padding: var(--openbot-space-2) var(--openbot-space-3);
}
.backup-models-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.backup-models-row {
  display: flex;
  min-height: 40px;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-1) var(--openbot-space-2) var(--openbot-space-1) var(--openbot-space-3);
}
.backup-models-number {
  width: var(--openbot-icon-sm);
  flex: none;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.backup-models-text {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}
.backup-models-name {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.backup-models-state {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.backup-models-row:not([data-state="ready"]) .backup-model-logo svg {
  opacity: 0.44;
}
.backup-models-row:not([data-state="ready"]) .backup-models-name {
  color: var(--openbot-text-muted);
  text-decoration: line-through;
}
.backup-models-actions {
  display: inline-flex;
  flex: none;
}
.usage-limit-ask-card {
  display: flex;
  max-width: 560px;
  flex-direction: column;
  gap: var(--openbot-space-3);
  margin: var(--openbot-space-4) 0 0;
}
.usage-limit-ask-body {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
}
.usage-limit-ask-select {
  max-width: 320px;
}
.usage-limit-ask-remember {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  cursor: pointer;
}
.usage-limit-ask-error {
  margin: 0;
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
}
.usage-limit-ask-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
}
.task-list {
  --task-list-glyph: var(--openbot-icon-sm);
  --task-list-ease: var(--openbot-ease-out);
  --task-list-open: 320ms;
  --task-list-close: 200ms;
  --task-list-close-ease: cubic-bezier(0.32, 0.08, 0.24, 1);
  --task-list-blur: 4px;
  --task-list-stagger: 28ms;
  box-sizing: border-box;
  width: min(100%, 448px);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
}
.task-list .task-list-header {
  display: flex;
  background: transparent;
  width: 100%;
  height: auto;
  align-items: center;
  justify-content: flex-start;
  gap: var(--openbot-space-3);
  border-radius: var(--openbot-radius-card);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-regular);
  padding: var(--openbot-space-3);
  text-align: left;
}
.task-list .task-list-header:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 1px var(--openbot-text-muted);
}
.task-list-summary-glyph {
  display: inline-flex;
  width: var(--task-list-glyph);
  height: var(--task-list-glyph);
  flex: 0 0 auto;
}
.task-list-donut {
  width: 100%;
  height: 100%;
}
.task-list-donut circle {
  stroke-width: 1.5;
}
.task-list-donut-track {
  stroke: var(--openbot-border-strong);
}
.task-list-donut-value {
  stroke: var(--openbot-text-primary);
  stroke-linecap: round;
  transition: stroke-dashoffset var(--openbot-duration-slow) var(--task-list-ease);
}
.task-list-title {
  display: grid;
  min-width: 0;
  flex: 1;
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.task-list-title-layer {
  overflow: hidden;
  min-width: 0;
  grid-area: 1 / 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: opacity var(--task-list-open) var(--task-list-ease), filter var(--task-list-open) var(--task-list-ease), transform var(--task-list-open) var(--task-list-ease);
}
.task-list-title-name {
  font-weight: var(--openbot-weight-semibold);
}
.task-list-title-task {
  font-weight: var(--openbot-weight-regular);
}
.task-list-title[data-showing="task"] .task-list-title-name, .task-list-title[data-showing="title"] .task-list-title-task {
  filter: blur(var(--task-list-blur));
  opacity: 0;
}
.task-list-title[data-showing="task"] .task-list-title-name {
  transform: translateY(calc(-1 * var(--openbot-space-1)));
}
.task-list-title[data-showing="title"] .task-list-title-task {
  transform: translateY(var(--openbot-space-1));
}
.task-list-title-task-text {
  animation: task-list-title-in var(--task-list-open) var(--task-list-ease);
}
.task-list-count {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-variant-numeric: tabular-nums;
  line-height: var(--openbot-leading-md);
}
.task-list-chevron {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  transform: rotate(-90deg);
  transition: transform var(--openbot-duration-normal) var(--task-list-ease);
}
.task-list[data-open] .task-list-chevron {
  transform: rotate(0deg);
}
.task-list-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--task-list-close) var(--task-list-close-ease);
}
.task-list[data-open] .task-list-panel {
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--task-list-open) var(--task-list-ease);
}
.task-list-items {
  display: grid;
  overflow: hidden;
  min-height: 0;
  margin: 0;
  padding: 0 var(--openbot-space-3);
  list-style: none;
  transition: padding var(--task-list-close) var(--task-list-close-ease);
}
.task-list[data-open] .task-list-items {
  padding-bottom: var(--openbot-space-3);
  transition: padding var(--task-list-open) var(--task-list-ease);
}
.task-list-item {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-0-5) 0;
  filter: blur(var(--task-list-blur));
  opacity: 0;
  transform: translateY(calc(-1 * var(--openbot-space-1))) scale(0.98);
  transform-origin: left top;
  transition: opacity var(--task-list-close) var(--task-list-close-ease), filter var(--task-list-close) var(--task-list-close-ease), transform var(--task-list-close) var(--task-list-close-ease);
}
.task-list[data-open] .task-list-item {
  filter: blur(0);
  opacity: 1;
  transform: none;
  transition: opacity var(--task-list-open) var(--task-list-ease), filter var(--task-list-open) var(--task-list-ease), transform var(--task-list-open) var(--task-list-ease);
  transition-delay: calc(min(var(--task-list-index, 0), 8) * var(--task-list-stagger));
}
.task-list-item-mark {
  display: inline-flex;
  width: var(--task-list-glyph);
  height: var(--openbot-leading-md);
  flex: 0 0 auto;
  align-items: center;
}
.task-list-item-label {
  position: relative;
  min-width: 0;
  flex: 1;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  transition: color var(--openbot-duration-normal) var(--task-list-ease);
}
.task-list-item[data-state="pending"] .task-list-item-label {
  color: var(--openbot-text-muted);
}
.task-list-item[data-state="done"] .task-list-item-label {
  color: var(--openbot-text-dim);
}
.task-list-item-text {
  position: relative;
}
.task-list-item-text::after {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--openbot-duration-slow) var(--task-list-ease);
}
.task-list-item[data-state="done"] .task-list-item-text::after {
  transform: scaleX(1);
}
.task-list-item[data-state="active"] .task-list-item-text, .task-list-title[data-showing="task"] .task-list-title-task-text {
  display: inline-block;
  color: var(--openbot-text-primary);
  animation: task-list-pulse 1.6s ease-in-out infinite;
  animation-play-state: var(--task-list-play-state, running);
}
.task-list-title[data-showing="task"] .task-list-title-task-text {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
  animation: task-list-title-in var(--task-list-open) var(--task-list-ease), task-list-pulse 1.6s ease-in-out infinite;
  animation-play-state: var(--task-list-play-state, running);
}
.task-list-item-progress {
  --digit-dur: var(--openbot-duration-overlay);
  --digit-distance: var(--openbot-space-1);
  --digit-blur: var(--openbot-space-0-5);
  --digit-stagger: 40ms;
  display: inline-flex;
  min-width: 4ch;
  flex: 0 0 auto;
  justify-content: flex-end;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  line-height: var(--openbot-leading-md);
  padding: 0 var(--openbot-space-1-5);
}
.task-list-mark {
  width: var(--task-list-glyph);
  height: var(--task-list-glyph);
  overflow: visible;
}
.task-list-mark circle, .task-list-mark path {
  transition: opacity var(--openbot-duration-normal) var(--task-list-ease), transform var(--openbot-duration-normal) var(--task-list-ease), stroke-dashoffset var(--openbot-duration-slow) var(--task-list-ease);
  transform-box: fill-box;
  transform-origin: center;
}
.task-list-mark-pending {
  opacity: 0;
  stroke: var(--openbot-text-dim);
  stroke-dasharray: 1.2 2;
  stroke-width: 1.5;
}
.task-list-mark-track {
  opacity: 0;
  stroke: var(--openbot-border-strong);
  stroke-width: 1.5;
}
.task-list-mark-arc {
  opacity: 0;
  stroke: var(--openbot-text-primary);
  stroke-dasharray: 12 100;
  stroke-linecap: round;
  stroke-width: 1.5;
}
.task-list-mark-fill {
  fill: var(--openbot-text-dim);
  opacity: 0;
  transform: scale(0.4);
}
.task-list-mark-check {
  stroke: var(--openbot-bg-canvas);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
}
.task-list-mark-cross {
  stroke: var(--openbot-bg-canvas);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
  stroke-width: 1.75;
}
.task-list-mark[data-state="pending"] .task-list-mark-pending, .task-list-mark[data-state="active"] .task-list-mark-track, .task-list-mark[data-state="active"] .task-list-mark-arc, .task-list-mark[data-state="done"] .task-list-mark-fill, .task-list-mark[data-state="failed"] .task-list-mark-fill {
  opacity: 1;
}
.task-list-mark[data-state="active"] {
  animation: task-list-turn 0.9s linear infinite;
  animation-play-state: var(--task-list-play-state, running);
}
.task-list-mark[data-state="done"] .task-list-mark-fill, .task-list-mark[data-state="failed"] .task-list-mark-fill {
  transform: scale(1);
}
.task-list-mark[data-state="failed"] .task-list-mark-fill {
  fill: var(--openbot-danger);
}
.task-list-mark[data-state="done"] .task-list-mark-check, .task-list-mark[data-state="failed"] .task-list-mark-cross {
  stroke-dashoffset: 0;
  transition-delay: var(--openbot-duration-fast);
}
@keyframes task-list-turn {
  to {
    transform: rotate(360deg);
  }
}
@keyframes task-list-title-in {
  from {
    filter: blur(var(--task-list-blur));
    opacity: 0;
    transform: translateY(var(--openbot-space-1));
  }
}
@keyframes task-list-pulse {
  50% {
    opacity: 0.6;
  }
}
.task-list:not([data-open]) .task-list-panel {
  --task-list-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .task-list-donut-value, .task-list-chevron, .task-list-panel, .task-list-items, .task-list-item, .task-list[data-open] .task-list-panel, .task-list[data-open] .task-list-items, .task-list[data-open] .task-list-item, .task-list-item-label, .task-list-title-layer, .task-list-item-text::after, .task-list-mark circle, .task-list-mark path {
    transition: none;
  }
  .task-list-mark[data-state="active"], .task-list-item[data-state="active"] .task-list-item-text, .task-list-title-task-text, .task-list-title[data-showing="task"] .task-list-title-task-text {
    animation: none;
  }
}
.subagents-elapsed {
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
.subagents-live {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.subagents-live-glyph {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: 0 0 auto;
  margin-top: 2px;
}
.subagents-live-text {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.subagents-live[data-state="failed"] {
  color: var(--openbot-danger-text);
}
.subagents-group {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: var(--openbot-space-1-5);
}
.subagents-group .subagents-group-header {
  display: flex;
  height: auto;
  align-self: flex-start;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-left: calc(-1 * var(--openbot-space-1-5));
  border-radius: var(--openbot-radius-sm);
  padding: var(--openbot-space-0-5) var(--openbot-space-1-5);
  color: inherit;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-md);
  text-align: left;
}
.subagents-group .subagents-group-header[aria-expanded="true"]:not(:hover) {
  background: transparent;
  color: inherit;
}
.subagents-group-chevron {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  color: var(--openbot-text-muted);
  transition: rotate var(--openbot-duration-fast) var(--openbot-ease-out);
}
.subagents-group-header[aria-expanded="true"] .subagents-group-chevron {
  rotate: 90deg;
}
@media (prefers-reduced-motion: reduce) {
  .subagents-group-chevron {
    transition: none;
  }
}
.subagents-group-title {
  font-weight: var(--openbot-weight-medium);
}
.subagents-progress {
  gap: var(--openbot-space-1-5);
  font-variant-numeric: tabular-nums;
}
.subagents-ring {
  width: var(--openbot-icon-xs);
}
.subagents-ring .ui-radial-progress-track, .subagents-ring .ui-radial-progress-indicator {
  stroke-width: 7;
}
.subagents-ring .ui-radial-progress-indicator {
  transition: stroke-dasharray var(--openbot-duration-slow) var(--openbot-ease-out);
}
.subagents-progress-failed {
  color: var(--openbot-danger-text);
}
@media (prefers-reduced-motion: reduce) {
  .subagents-ring .ui-radial-progress-indicator {
    transition: none;
  }
}
.subagents-list {
  display: flex;
  width: min(100%, 720px);
  flex-direction: column;
  margin: 0;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-canvas);
  padding: var(--openbot-space-1);
  list-style: none;
}
.subagents-list .subagents-row {
  display: grid;
  width: 100%;
  height: auto;
  align-items: start;
  grid-template-columns: var(--openbot-icon-sm) minmax(0, 1fr) auto auto;
  gap: 2px var(--openbot-space-2);
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  padding: var(--openbot-space-2);
  color: inherit;
  font-weight: var(--openbot-weight-regular);
  line-height: inherit;
  text-align: left;
  white-space: normal;
  cursor: pointer;
}
.subagents-list .subagents-row:hover {
  background: var(--openbot-hover);
}
.subagents-list .subagents-row.subagents-row-selected {
  background: var(--openbot-bg-surface);
}
.subagents-row:focus-visible {
  outline: 2px solid var(--openbot-focus-ring);
  outline-offset: -2px;
}
.subagents-row-copy, .subagents-row .subagents-live {
  display: contents;
}
.subagents-row-title {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.subagents-row .subagents-elapsed {
  line-height: var(--openbot-leading-md);
}
.subagents-row .subagents-live-glyph {
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  justify-self: center;
  margin-top: 0;
}
.subagents-row .subagents-live-text {
  grid-column: 2;
  grid-row: 2;
}
.subagents-row-chevron {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: 0 0 auto;
  margin-top: 4px;
  color: var(--openbot-text-muted);
  opacity: 0;
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}
.subagents-row:hover .subagents-row-chevron, .subagents-row:focus-visible .subagents-row-chevron, .subagents-row.subagents-row-selected .subagents-row-chevron {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .subagents-row-chevron {
    transition: none;
  }
}
.subagents-panel {
  overflow: hidden;
}
.subagents-panel-detail {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: var(--openbot-space-3);
  overflow-y: auto;
  padding: var(--openbot-space-4);
}
.subagents-panel-head {
  display: flex;
  align-items: flex-start;
  gap: var(--openbot-space-2);
}
.subagents-panel-head h3 {
  margin: 0;
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-lg);
  overflow-wrap: anywhere;
}
.subagents-panel-meta {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.subagents-steps {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
}
.subagents-prompt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  border-left: 2px solid var(--openbot-border-strong);
  padding-left: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.subagents-prompt-label {
  color: var(--openbot-text-muted);
  font-weight: var(--openbot-weight-medium);
}
.subagents-step-list {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.subagents-step {
  display: flex;
  align-items: flex-start;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  overflow-wrap: anywhere;
}
.subagents-step-glyph {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--openbot-text-muted);
}
.subagents-step[data-kind="thinking"] .subagents-step-text {
  color: var(--openbot-text-muted);
  font-style: italic;
}
.subagents-step[data-kind="text"] .subagents-step-text {
  color: var(--openbot-text-primary);
}
.subagents-step-text.agent-activity-label {
  -webkit-line-clamp: unset;
}
.subagents-error {
  display: flex;
  align-items: flex-start;
  gap: var(--openbot-space-2);
  margin: 0;
  color: var(--openbot-danger-text);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.subagents-error-icon {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: 0 0 auto;
  margin-top: 2px;
}
.subagents-status {
  display: inline-flex;
  width: var(--openbot-icon-sm);
  height: var(--openbot-leading-md);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}
.subagents-status-icon {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.subagents-status[data-state="running"] {
  color: var(--openbot-accent);
}
.subagents-status[data-state="running"] .subagents-status-icon {
  animation: ui-spin 1s linear infinite;
}
.subagents-status[data-state="completed"] {
  color: var(--openbot-success);
}
.subagents-status[data-state="failed"] {
  color: var(--openbot-danger);
}
.subagents-status[data-state="stopped"] {
  color: var(--openbot-text-muted);
}
@media (prefers-reduced-motion: reduce) {
  .subagents-status[data-state="running"] .subagents-status-icon {
    animation: none;
  }
}
.awaiting-replies {
  --awaiting-composer-overlap: 14px;
  position: relative;
  z-index: 9;
  width: auto;
  margin: 0 12px calc(-1 * var(--awaiting-composer-overlap));
  border-color: var(--openbot-queue-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-queue-surface);
  padding-bottom: var(--awaiting-composer-overlap);
  animation: queue-panel-in var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1) both;
}
.awaiting-replies.task-list .task-list-header {
  min-width: 0;
  flex: 1;
  border-radius: var(--openbot-radius-lg);
}
.awaiting-replies-bar {
  display: flex;
  align-items: center;
}
.awaiting-replies-dismiss {
  margin-right: var(--openbot-space-2);
  color: var(--openbot-text-muted);
}
.composer-wrap:has(.composer-attachment) .awaiting-replies:last-child {
  margin-bottom: 0;
}
.awaiting-replies-item {
  align-items: center;
}
.awaiting-replies-avatar {
  --agent-avatar-optical-offset: -1px;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
}
.awaiting-replies-text {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: baseline;
  gap: var(--openbot-space-2);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.awaiting-replies-name {
  flex: 0 0 auto;
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}
.awaiting-replies-preview {
  overflow: hidden;
  min-width: 0;
  color: var(--openbot-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.awaiting-replies-state {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-md);
}
.awaiting-replies-detail {
  color: var(--openbot-text-dim);
}
.awaiting-replies-item[data-state="failed"] .awaiting-replies-state-label {
  color: var(--openbot-danger-text);
}
.awaiting-replies-item[data-state="active"] .awaiting-replies-state-label {
  animation: task-list-pulse 1.6s ease-in-out infinite;
  animation-play-state: var(--task-list-play-state, running);
}
@media (prefers-reduced-motion: reduce) {
  .awaiting-replies {
    animation: none;
  }
  .awaiting-replies-item[data-state="active"] .awaiting-replies-state-label {
    animation: none;
  }
}
.open-waits .task-list-title-name {
  font-weight: var(--openbot-weight-medium);
}
.open-waits .task-list-count {
  color: var(--openbot-warning-text);
  font-size: var(--openbot-text-sm);
}
.open-waits-row {
  align-items: flex-start;
}
.open-waits-row-text {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: var(--openbot-space-0-5);
}
.open-waits-row-note {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.open-waits-row-meta {
  display: flex;
  min-width: 0;
  gap: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  white-space: nowrap;
}
.open-waits-row-request {
  overflow: hidden;
  min-width: 0;
  color: var(--openbot-text-dim);
  text-overflow: ellipsis;
}
[data-wait-state="woken"] .open-waits-row-state {
  color: var(--openbot-warning-text);
}
[data-wait-state="resuming"] .open-waits-row-state {
  color: var(--openbot-text-primary);
  animation: task-list-pulse 1.6s ease-in-out infinite;
  animation-play-state: var(--task-list-play-state, running);
}
@media (prefers-reduced-motion: reduce) {
  [data-wait-state="resuming"] .open-waits-row-state {
    animation: none;
  }
}
.open-waits-menu {
  flex: 0 0 auto;
  align-self: flex-start;
  color: var(--openbot-text-muted);
}
.conversation-title {
  display: flex;
  height: var(--openbot-control-sm);
  align-items: center;
  gap: 6px;
  border-radius: var(--openbot-radius-sm);
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 2px 4px;
  text-align: left;
  transition: background var(--openbot-duration-hover) ease;
}
.conversation-title:hover {
  background: var(--openbot-hover);
}
.conversation-title h1 {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0;
}
.conversation-access-lock {
  display: inline-flex;
  flex: none;
  color: var(--openbot-text-muted);
}
.conversation-access-lock svg {
  width: 14px;
  height: 14px;
}
.conversation-header-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}
.provider-model-picker {
  position: relative;
  min-width: 0;
}
.provider-model-trigger {
  display: flex;
  width: max-content;
  max-width: 240px;
  height: 28px;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-overlay);
  padding: 0 9px 0 8px;
  color: var(--openbot-text-primary);
  cursor: pointer;
  box-shadow: inset 0 1px var(--openbot-hover);
  transition: border-color var(--openbot-duration-hover) ease, background-color var(--openbot-duration-hover) ease, transform var(--openbot-duration-fast) cubic-bezier(0.23, 1, 0.32, 1);
}
.provider-model-trigger:hover:not(:disabled), .provider-model-trigger[aria-expanded="true"] {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-surface);
}
.provider-model-trigger:active:not(:disabled) {
  transform: scale(0.97);
}
.provider-model-trigger:focus-visible, .provider-model-rail-button:focus-visible, .provider-model-option:focus-visible {
  outline: 1px solid var(--openbot-accent);
  outline-offset: 1px;
}
.provider-model-trigger:disabled {
  opacity: 0.48;
  cursor: default;
}
.provider-model-trigger-value {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}
.provider-model-trigger-name {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  font-size: var(--openbot-text-md);
  font-weight: 470;
  line-height: 18px;
}
.provider-model-trigger-effort {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: 18px;
  white-space: nowrap;
}
.provider-model-trigger-effort::before {
  margin-right: var(--openbot-space-1-5);
  content: "·";
}
.provider-model-trigger:has(.provider-model-trigger-fast) {
  max-width: 296px;
}
.provider-model-trigger-fast svg {
  width: 12px;
  height: 12px;
  margin-right: var(--openbot-space-0-5);
  stroke-width: var(--openbot-icon-stroke);
}
.provider-model-trigger-account {
  min-width: 0;
  max-width: 160px;
  flex-shrink: 1;
  overflow: hidden;
}
.ui-swap {
  position: relative;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
}
.ui-swap > span, .ui-swap-digits {
  display: inline-block;
}
.ui-swap > .ui-swap-leaving {
  position: absolute;
  top: 0;
  left: 0;
}
.provider-model-trigger-value .ui-swap {
  overflow: visible;
}
.provider-model-trigger-name:not(.ui-swap) {
  overflow: hidden;
  text-overflow: ellipsis;
}
.provider-model-trigger-name > span:not(.ui-swap-leaving) {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}
.provider-model-trigger-name > .ui-swap-leaving {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.provider-model-trigger-mark {
  display: flex;
  flex: 0 0 auto;
}
.provider-model-trigger-mark[data-entering] {
  animation: provider-model-mark-in 420ms cubic-bezier(0.34, 1.36, 0.64, 1) both;
}
@keyframes provider-model-mark-in {
  from {
    opacity: 0;
    scale: 0.6;
    filter: blur(2px);
  }
}
.provider-model-picker-field {
  width: 100%;
}
.provider-model-trigger-field {
  width: 100%;
  max-width: none;
  height: 44px;
  gap: 8px;
  border: 0;
  border-radius: 0;
  background: var(--openbot-hover);
  padding: 0 11px 0 12px;
  box-shadow: none;
}
.provider-model-trigger-field:hover:not(:disabled), .provider-model-trigger-field[aria-expanded="true"] {
  border-color: transparent;
  background: var(--openbot-border);
}
.provider-model-trigger-field .provider-model-field-label {
  flex: 0 0 auto;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: 400;
  line-height: 17px;
}
.provider-model-trigger-field .provider-model-trigger-value {
  max-width: calc(100% - 84px);
  margin-left: auto;
  justify-content: flex-end;
}
.provider-model-mark {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  overflow: visible;
  fill: var(--openbot-provider-current);
}
.provider-model-mark-large {
  width: 19px;
  height: 19px;
  flex-basis: 19px;
}
.provider-model-chevron {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  fill: none;
  stroke: var(--openbot-text-muted);
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--openbot-duration-normal) ease;
}
.provider-model-trigger[aria-expanded="true"] .provider-model-chevron {
  transform: rotate(180deg);
}
.provider-model-popover {
  --provider-model-rail-bg: var(--openbot-bg-notch);
  @supports (color: color-mix(in lab, red, red)) {
    --provider-model-rail-bg: color-mix(in srgb, var(--openbot-bg-notch) 22%, var(--ui-menu-bg));
  }
  --provider-model-segment-radius: calc(var(--ui-menu-item-radius) - var(--openbot-space-0-5));
  position: relative;
  z-index: var(--openbot-layer-dropdown);
  width: min(360px, calc(100vw - 24px));
  min-height: 226px;
  overflow: hidden;
  border: 0;
  border-radius: var(--ui-menu-radius);
  background: var(--ui-menu-bg);
  color: var(--openbot-text-primary);
  box-shadow: var(--ui-menu-panel-shadow);
  transform-origin: var(--kb-popover-content-transform-origin);
  animation: ui-menu-in var(--ui-menu-duration) var(--ui-menu-ease) both;
}
.provider-model-popover:not([data-expanded]) {
  animation: ui-menu-out var(--ui-menu-duration) var(--ui-menu-ease) both;
}
.provider-model-layout {
  max-height: min(520px, calc(100dvh - 100px), var(--kb-popper-content-available-height, 520px));
  display: flex;
  width: 100%;
  min-height: inherit;
}
.provider-model-rail {
  display: flex;
  width: 52px;
  flex: 0 0 52px;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-1);
  border-right: 1px solid var(--openbot-border);
  background: var(--provider-model-rail-bg);
  padding: 9px 7px;
}
.provider-model-rail-tabs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-1);
}
.provider-model-rail-add {
  color: var(--openbot-text-muted);
}
.provider-model-rail-add:hover {
  color: var(--openbot-text-primary);
}
.provider-model-rail-tooltip-trigger {
  display: flex;
}
.provider-model-rail-tooltip {
  z-index: var(--openbot-layer-tooltip);
  display: flex;
  max-width: min(240px, calc(100vw - 16px));
  flex-direction: column;
  gap: var(--openbot-space-0-5);
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-surface-raised);
  box-shadow: var(--openbot-shadow-raised);
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-md);
  overflow-wrap: anywhere;
  pointer-events: none;
}
.provider-model-rail-tooltip small {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
}
.provider-model-rail-button {
  position: relative;
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  border: 0;
  border-radius: var(--ui-menu-item-radius);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: background-color var(--openbot-duration-hover) ease, opacity var(--openbot-duration-hover) ease;
}
.provider-model-rail-button:hover {
  background: var(--ui-menu-item-hover);
}
.provider-model-rail-button-selected {
  background: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-primary) 8%, transparent);
  }
  box-shadow: inset 0 0 0 1px var(--ui-menu-edge);
}
.provider-model-rail-button .provider-model-mark {
  opacity: 0.48;
}
.provider-model-rail-button:not(.provider-model-rail-button-selected, .provider-model-rail-button-unavailable):hover .provider-model-mark {
  opacity: 0.8;
}
.provider-model-rail-button-selected .provider-model-mark {
  fill: var(--openbot-text-primary);
  opacity: 1;
}
.provider-model-rail-button-unavailable .provider-model-mark {
  opacity: 0.28;
}
.provider-model-rail-button-unavailable:is(:hover, .provider-model-rail-button-selected) .provider-model-mark {
  opacity: 0.6;
}
.provider-model-rail-button:is( [data-state="not-installed"], [data-state="sign-in-required"], [data-state="outdated"], [data-state="error"] )::after {
  position: absolute;
  top: var(--openbot-space-1-5);
  right: var(--openbot-space-1-5);
  width: 6px;
  height: 6px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-muted);
  box-shadow: 0 0 0 2px var(--provider-model-rail-bg);
  content: "";
}
.provider-model-rail-button:is([data-state="sign-in-required"], [data-state="outdated"])::after {
  background: var(--openbot-warning);
}
.provider-model-rail-account {
  position: absolute;
  right: 2px;
  bottom: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control);
  box-shadow: 0 0 0 2px var(--provider-model-rail-bg);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.provider-model-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  flex: 1;
  padding: var(--ui-menu-padding);
}
.provider-model-panel:not([data-selected]) {
  display: none;
}
.provider-model-heading {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-1-5) 0 var(--openbot-space-2) var(--ui-menu-inset);
}
.provider-model-heading-text {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 4px;
}
.provider-model-heading .ui-button, .provider-model-empty .ui-button-variant-outline {
  border-color: transparent;
  border-radius: var(--ui-menu-item-radius);
  background: var(--ui-menu-item-hover);
  box-shadow: none;
  color: var(--openbot-text-primary);
}
.provider-model-heading .ui-button:hover, .provider-model-empty .ui-button-variant-outline:hover {
  background: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-primary) 10%, transparent);
  }
}
.provider-model-heading .ui-button svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.provider-model-heading strong, .provider-model-heading span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.provider-model-empty {
  display: grid;
  justify-items: start;
  gap: var(--openbot-space-2);
  margin-bottom: var(--ui-menu-padding);
  border: 0;
  border-radius: var(--ui-menu-item-radius);
  background: var(--ui-menu-item-hover);
  padding: var(--openbot-space-2) var(--ui-menu-inset);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: 18px;
}
.provider-model-heading strong {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: 620;
  line-height: 20px;
}
.provider-model-heading span {
  margin-top: 1px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
}
.provider-model-empty > .ui-progress {
  justify-self: stretch;
}
.provider-model-list {
  display: grid;
  gap: 0;
}
.provider-model-effort {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-1) 12px;
  margin: var(--ui-menu-padding) calc(var(--ui-menu-padding) * -1) 0;
  border-top: 1px solid var(--openbot-border);
  padding: var(--ui-menu-padding) var(--ui-menu-padding) 0 calc(var(--ui-menu-padding) + var(--ui-menu-inset));
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 17px;
}
.provider-model-effort + .provider-model-effort {
  margin-top: 0;
  border-top: 0;
  padding-top: var(--openbot-space-1);
}
.provider-model-effort > :first-child {
  display: flex;
  min-height: var(--openbot-control-md);
  align-items: center;
}
.provider-model-effort-select {
  width: 128px;
}
.provider-model-effort-segments {
  --provider-model-effort-duration: 250ms;
  --provider-model-effort-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  gap: var(--openbot-space-0-5);
  border-radius: var(--ui-menu-item-radius);
  background: var(--ui-menu-item-hover);
  padding: var(--openbot-space-0-5);
}
.provider-model-effort-segment {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}
.provider-model-effort-segment-control {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  min-width: 0;
  height: calc(var(--openbot-control-md) - 2 * var(--openbot-space-0-5));
  align-items: center;
  justify-content: center;
  border-radius: var(--provider-model-segment-radius);
  padding-inline: var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--provider-model-effort-duration) var(--provider-model-effort-ease);
}
.provider-model-effort-segment-control label {
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: inherit;
}
.provider-model-effort-segment-control:hover:not([data-disabled]), .provider-model-effort-segment-control[data-checked] {
  color: var(--openbot-text-primary);
}
.provider-model-effort-segment:has(:focus-visible) .provider-model-effort-segment-control {
  box-shadow: 0 0 0 1px var(--openbot-text-muted);
}
.provider-model-effort-segment-control[data-disabled] {
  opacity: 0.5;
  cursor: default;
}
.provider-model-effort-pill {
  position: absolute;
  top: var(--openbot-space-0-5);
  left: 0;
  z-index: 0;
  width: 0;
  height: calc(var(--openbot-control-md) - 2 * var(--openbot-space-0-5));
  border-radius: var(--provider-model-segment-radius);
  background: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-primary) 12%, transparent);
  }
  box-shadow: inset 0 1px 0 var(--ui-menu-highlight);
  pointer-events: none;
  transition: transform var(--provider-model-effort-duration) var(--provider-model-effort-ease), width var(--provider-model-effort-duration) var(--provider-model-effort-ease);
}
.provider-model-effort-pill[data-initializing] {
  transition: none;
}
.provider-model-effort-segments:has([data-disabled]) .provider-model-effort-pill {
  opacity: 0.5;
}
.provider-model-effort-select .ui-select-trigger {
  border-color: transparent;
  border-radius: var(--ui-menu-item-radius);
  background: var(--ui-menu-item-hover);
  box-shadow: none;
}
.provider-model-effort-select .ui-select-trigger:is(:hover, [data-expanded]) {
  background: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-primary) 10%, transparent);
  }
}
.provider-model-effort-content {
  border-radius: var(--ui-menu-radius);
  background: var(--ui-menu-bg);
  box-shadow: var(--ui-menu-panel-shadow);
  animation: ui-menu-in var(--ui-menu-duration) var(--ui-menu-ease) both;
}
.provider-model-effort-content .ui-select-listbox {
  padding: var(--ui-menu-padding);
}
.provider-model-effort-content .ui-select-item {
  border-radius: var(--ui-menu-item-radius);
  padding-block: var(--openbot-space-1-5);
  padding-left: var(--ui-menu-inset);
  font-size: var(--openbot-text-md);
}
.provider-model-effort-content .ui-select-item[data-highlighted] {
  background: var(--ui-menu-item-hover);
}
.provider-model-option {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 0;
  border-radius: var(--ui-menu-item-radius);
  background: transparent;
  padding: var(--openbot-space-1-5) var(--ui-menu-inset) var(--openbot-space-1-5) calc(var(--ui-menu-inset) + var(--openbot-icon-md) + var(--openbot-space-2));
  color: var(--openbot-text-primary);
  cursor: pointer;
  text-align: left;
  transition: background-color var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease;
}
.provider-model-option::before {
  position: absolute;
  top: 50%;
  left: var(--ui-menu-inset);
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  box-sizing: border-box;
  border: 1px solid var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--openbot-text-primary) 22%, transparent);
  }
  border-radius: var(--openbot-radius-pill);
  content: "";
  translate: 0 -50%;
  transition: background-color var(--ui-menu-duration) ease-out, border-color var(--ui-menu-duration) ease-out;
}
.provider-model-option-selected::before {
  border-color: transparent;
  background: var(--openbot-text-primary);
}
.provider-model-option:hover:not(:disabled), .provider-model-option:focus-visible {
  background: var(--ui-menu-item-hover);
}
.provider-model-option:disabled {
  color: var(--openbot-text-dim);
  cursor: not-allowed;
}
.provider-model-option-name {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}
.provider-model-option-name > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--openbot-text-md);
  line-height: 18px;
}
.provider-model-option-name small {
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-primary) 7%, transparent);
  }
  padding: 1px var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: 500;
  line-height: 15px;
}
.provider-model-check {
  position: absolute;
  top: 50%;
  left: calc(var(--ui-menu-inset) + (var(--openbot-icon-md) - var(--openbot-icon-sm)) / 2);
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  fill: none;
  stroke: var(--ui-menu-bg);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.5;
  translate: 0 -50%;
}
@media (max-width: 720px) {
  .provider-model-trigger:not(.provider-model-trigger-field) {
    max-width: 148px;
  }
  .provider-model-trigger-effort {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .provider-model-chevron, .provider-model-trigger, .provider-model-rail-button, .provider-model-option, .provider-model-option::before, .provider-model-effort-segment-control, .provider-model-effort-pill {
    transition: none;
  }
  .provider-model-popover, .provider-model-popover:not([data-expanded]), .provider-model-effort-content {
    animation: none;
  }
  .provider-model-trigger-mark[data-entering] {
    animation: none;
  }
}
.computer-button-agent-active {
  border-color: var(--openbot-accent);
  background: var(--openbot-accent-soft);
  box-shadow: 0 0 10px var(--openbot-accent-strong);
  color: var(--openbot-accent);
}
.computer-control-dot {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 5px;
  height: 5px;
  border: 1px solid var(--openbot-bg-canvas);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
  animation: browser-control-pulse 1.25s ease-in-out infinite;
}
.browser-toolbar-button:active:not(:disabled) {
  transform: scale(0.92);
  transition-duration: var(--openbot-duration-fast);
}
.conversation-scroll {
  min-height: 0;
  flex: 1;
  overflow-anchor: none;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 8px 12px var(--openbot-space-6);
}
.virtual-chat-list {
  position: relative;
  width: 100%;
}
.virtual-chat-row {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  padding-top: var(--openbot-chat-entry-gap);
}
.virtual-chat-row[data-grouped] {
  padding-top: var(--openbot-chat-marker-gap);
}
.virtual-chat-row > .chat-action-marker + .message-entry {
  margin-top: var(--openbot-chat-marker-gap);
}
.virtual-chat-list-static .virtual-chat-row {
  position: relative;
  inset: auto;
}
.virtual-chat-row[data-reply-flash] {
  isolation: isolate;
}
.virtual-chat-row[data-reply-flash]::before {
  position: absolute;
  z-index: -1;
  inset: var(--openbot-chat-entry-gap) -12px 0;
  background: var(--openbot-accent-soft);
  content: "";
  opacity: 0;
  pointer-events: none;
  animation: reply-flash 1.6s var(--openbot-ease-out);
}
.virtual-chat-row[data-grouped][data-reply-flash]::before {
  top: var(--openbot-chat-marker-gap);
}
@keyframes reply-flash {
  0%, 45% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.conversation-history-status {
  display: flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.scroll-to-latest {
  position: sticky;
  z-index: 3;
  top: calc(100% - 58px);
  left: 50%;
  display: flex;
  width: max-content;
  height: 44px;
  align-items: center;
  margin-bottom: -44px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface-raised);
  box-shadow: 0 8px 24px var(--openbot-shadow-popover-ambient), inset 0 0 0 1px var(--openbot-shadow-ring);
  color: var(--openbot-text-primary);
  transform: translateX(-50%);
  transition: background-color var(--openbot-duration-hover) ease;
}
.scroll-to-latest:is([data-new-messages], [data-reply-return]) {
  top: calc(100% - 50px);
  height: 36px;
  margin-bottom: -36px;
}
.scroll-to-latest[data-new-messages] {
  border-color: transparent;
  background: var(--openbot-unread-surface);
  color: var(--openbot-unread-text);
}
.scroll-to-latest-button {
  display: grid;
  width: 44px;
  height: 100%;
  place-items: center;
  border: 0;
  border-radius: inherit;
  background: none;
  color: inherit;
  transition: background-color var(--openbot-duration-hover) ease, transform var(--openbot-duration-fast) cubic-bezier(0.23, 1, 0.32, 1);
}
.scroll-to-latest:is([data-new-messages], [data-reply-return]) .scroll-to-latest-button {
  width: auto;
  grid-auto-flow: column;
  gap: var(--openbot-space-2);
  padding-inline: var(--openbot-space-1-5) var(--openbot-space-2);
}
.scroll-to-latest-count {
  font-size: var(--openbot-text-sm);
  font-weight: 620;
  white-space: nowrap;
}
.scroll-to-latest-dismiss {
  display: grid;
  height: 100%;
  place-items: center;
  border: 0;
  background: none;
  padding-inline: 0 var(--openbot-space-1-5);
  color: inherit;
  transition: transform var(--openbot-duration-fast) cubic-bezier(0.23, 1, 0.32, 1);
}
.scroll-to-latest-button svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}
.scroll-to-latest-dismiss svg {
  box-sizing: content-box;
  width: 14px;
  height: 14px;
  border-radius: var(--openbot-radius-pill);
  padding: var(--openbot-space-1);
  transition: background-color var(--openbot-duration-hover) ease;
}
.scroll-to-latest-button:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: -2px;
}
.scroll-to-latest-dismiss:focus-visible {
  outline: none;
}
.scroll-to-latest-dismiss:focus-visible svg {
  outline: 2px solid var(--openbot-border-focus);
}
.scroll-to-latest[data-new-messages] .scroll-to-latest-button:focus-visible {
  outline-color: var(--openbot-unread-text);
}
.scroll-to-latest[data-new-messages] .scroll-to-latest-dismiss:focus-visible svg {
  outline-color: var(--openbot-unread-text);
}
.scroll-to-latest-button .scroll-to-latest-reply-icon {
  width: 18px;
  height: 18px;
}
.scroll-to-latest-button:active, .scroll-to-latest-dismiss:active {
  transform: scale(0.96);
}
@media (hover: hover) and (pointer: fine) {
  .scroll-to-latest-button:hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-bg-control-active);
    color: inherit;
  }
  .scroll-to-latest-dismiss:hover:not(:disabled):not([data-disabled]) {
    background: none;
    color: inherit;
  }
  .scroll-to-latest-dismiss:hover svg {
    background: var(--openbot-bg-control-active);
  }
  .scroll-to-latest:is([data-new-messages], [data-reply-return]) .scroll-to-latest-button:hover:not(:disabled):not([data-disabled]) {
    background: none;
  }
  .scroll-to-latest[data-new-messages] .scroll-to-latest-dismiss:hover svg {
    background: var(--openbot-unread-text);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--openbot-unread-text) 18%, transparent);
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-to-latest, .scroll-to-latest-button, .scroll-to-latest-dismiss, .scroll-to-latest-dismiss svg {
    transition: none;
  }
  .scroll-to-latest-button:active, .scroll-to-latest-dismiss:active {
    transform: none;
  }
}
.unread-messages-banner {
  position: relative;
  display: flex;
  min-height: 32px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  border-radius: 0 0 var(--openbot-radius-md) var(--openbot-radius-md);
  background: var(--openbot-unread-surface);
  padding: 0 12px;
  color: var(--openbot-unread-text);
  font-size: var(--openbot-text-sm);
  font-weight: 620;
  line-height: 16px;
  transition: background-color var(--openbot-duration-hover) var(--openbot-ease-out);
}
.unread-messages-banner button {
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  color: inherit;
}
.unread-messages-jump {
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0 12px;
  font-size: var(--openbot-text-sm);
  font-weight: 620;
  line-height: 16px;
  text-align: left;
}
.unread-messages-mark-read {
  position: relative;
  z-index: 1;
  margin-left: auto;
  padding: 0;
  font-size: var(--openbot-text-sm);
  font-weight: 680;
  line-height: 14px;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: transform var(--openbot-duration-fast) cubic-bezier(0.23, 1, 0.32, 1);
}
.unread-messages-mark-read-label {
  display: inline-flex;
  align-items: center;
  border-radius: var(--openbot-radius-sm);
  padding: 3px 5px;
  transition: background-color var(--openbot-duration-hover) var(--openbot-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .unread-messages-banner:hover {
    background-color: var(--openbot-unread-surface);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--openbot-unread-surface) 88%, var(--openbot-unread-text));
    }
  }
  .unread-messages-banner .ui-button:hover:not(:disabled):not([data-disabled]) {
    background: transparent;
    color: var(--openbot-unread-text);
  }
  .unread-messages-banner .unread-messages-mark-read:hover:not(:disabled):not([data-disabled]) .unread-messages-mark-read-label {
    background: var(--openbot-unread-text);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--openbot-unread-text) 12%, transparent);
    }
  }
}
.unread-messages-banner button:focus-visible {
  outline: 2px solid var(--openbot-unread-text);
  outline-offset: 1px;
}
.unread-messages-mark-read:active:not(:disabled) {
  transform: scale(0.97);
}
.unread-messages-banner button:disabled {
  opacity: 0.55;
}
.unread-messages-divider {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  margin: var(--openbot-space-1) 0 var(--openbot-space-2);
  color: var(--openbot-unread-surface);
  font-size: var(--openbot-text-sm);
  font-weight: 720;
  letter-spacing: 0.08em;
  line-height: 12px;
}
.unread-messages-divider hr {
  width: 100%;
  height: 1px;
  flex: 1;
  border: 0;
  background: var(--openbot-unread-surface);
}
.unread-messages-divider span {
  flex: 0 0 auto;
}
.time-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 656px;
  height: 24px;
  margin: 0 auto;
  padding: 4px 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
  text-align: center;
}
.chat-scroll-rail {
  --chat-scroll-rail-accent: var(--openbot-text-muted);
  --chat-scroll-rail-track: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --chat-scroll-rail-track: color-mix(in srgb, var(--openbot-text-primary) 10%, transparent);
  }
  --chat-scroll-rail-glow: var(--chat-scroll-rail-accent);
  @supports (color: color-mix(in lab, red, red)) {
    --chat-scroll-rail-glow: color-mix(in srgb, var(--chat-scroll-rail-accent) 60%, transparent);
  }
  --chat-scroll-rail-ease: var(--openbot-ease-out);
  --chat-scroll-rail-duration: var(--openbot-duration-island-content);
  --chat-scroll-rail-quick: var(--openbot-duration-overlay);
  --chat-scroll-rail-blur: 8px;
  position: sticky;
  z-index: 3;
  top: 0;
  pointer-events: none;
}
.chat-scroll-rail-nav {
  position: absolute;
  top: 50%;
  right: calc(-1 * var(--chat-scroll-rail-inset, 0px));
  width: min(260px, 70%);
  height: min(64%, 600px);
  display: flex;
  flex-direction: column;
  padding: var(--openbot-space-3) 0;
  transform: translateY(-50%);
}
.chat-scroll-rail-nav:hover, .chat-scroll-rail-nav:has(:focus-visible) {
  pointer-events: auto;
}
.chat-scroll-rail-surface {
  position: absolute;
  inset: calc(-1 * var(--openbot-space-8)) 0 calc(-1 * var(--openbot-space-8)) calc(-2 * var(--openbot-space-8));
  background: var(--openbot-bg-canvas);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-bg-canvas) 80%, transparent);
  }
  mask-image: linear-gradient( to bottom, transparent, var(--openbot-text-primary) var(--openbot-space-8), var(--openbot-text-primary) calc(100% - var(--openbot-space-8)), transparent ), linear-gradient(to right, transparent, var(--openbot-text-primary) calc(2 * var(--openbot-space-8)));
  mask-composite: intersect;
  opacity: 0;
  transition: opacity var(--openbot-duration-slow) ease;
}
.chat-scroll-rail-eyebrow {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin: 0 0 var(--openbot-space-3);
  padding: 0 var(--openbot-space-4) 0 var(--openbot-space-4);
  color: var(--openbot-text-dim);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity var(--openbot-duration-slow) ease;
}
.chat-scroll-rail-count {
  --digit-dur: var(--openbot-duration-overlay);
  --digit-distance: var(--openbot-space-1);
  --digit-blur: var(--openbot-space-0-5);
  --digit-ease: var(--openbot-ease-out);
  color: var(--chat-scroll-rail-accent);
  font-variant-numeric: tabular-nums;
}
.chat-scroll-rail-track {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.chat-scroll-rail-list {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.chat-scroll-rail-item {
  flex-basis: 0;
  min-height: 22px;
  display: flex;
}
.chat-scroll-rail .chat-scroll-rail-link {
  flex: 1;
  min-width: 0;
  height: auto;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  gap: var(--openbot-space-3);
  padding: 0 0 0 var(--openbot-space-4);
  border: 0;
  border-radius: 0;
  color: var(--openbot-text-muted);
  font-weight: inherit;
  text-decoration: none;
  outline: none;
}
.chat-scroll-rail-item[data-state="read"] .chat-scroll-rail-link {
  color: var(--openbot-text-secondary);
}
.chat-scroll-rail-item[data-state="active"] .chat-scroll-rail-link, .chat-scroll-rail .chat-scroll-rail-link:hover, .chat-scroll-rail .chat-scroll-rail-link:focus-visible {
  color: var(--openbot-text-primary);
  text-decoration: none;
}
.chat-scroll-rail-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  margin-top: -3px;
  font-size: var(--openbot-text-sm);
  line-height: 18px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0;
  filter: blur(var(--chat-scroll-rail-blur));
  transform: translateX(var(--openbot-space-2));
  transition: color var(--openbot-duration-slow) ease, opacity var(--openbot-duration-slow) ease, filter var(--openbot-duration-slow) ease, transform var(--chat-scroll-rail-quick) var(--chat-scroll-rail-ease);
}
.chat-scroll-rail-link:focus-visible .chat-scroll-rail-label {
  text-decoration: underline;
  text-decoration-color: var(--chat-scroll-rail-accent);
  text-underline-offset: 4px;
}
.chat-scroll-rail-bar {
  position: relative;
  width: clamp(12px, var(--chat-scroll-rail-inset, 20px), 20px);
  flex: none;
  padding-bottom: var(--openbot-space-1);
}
.chat-scroll-rail .chat-scroll-rail-bar {
  pointer-events: auto;
}
.chat-scroll-rail-bar::before, .chat-scroll-rail-fill {
  content: "";
  position: absolute;
  top: 0;
  right: 5px;
  bottom: var(--openbot-space-1);
  width: 2px;
  border-radius: var(--openbot-radius-pill);
  transition: width var(--chat-scroll-rail-quick) var(--chat-scroll-rail-ease), right var(--chat-scroll-rail-quick) var(--chat-scroll-rail-ease), background-color var(--chat-scroll-rail-quick) ease;
}
.chat-scroll-rail-bar::before {
  background: var(--chat-scroll-rail-track);
}
.chat-scroll-rail-fill {
  background: var(--chat-scroll-rail-accent);
  transform: scaleY(var(--chat-scroll-rail-fill, 0));
  transform-origin: top center;
}
.chat-scroll-rail-item[data-state="active"] .chat-scroll-rail-bar::before, .chat-scroll-rail-item[data-state="active"] .chat-scroll-rail-fill {
  right: 4.5px;
  width: 3px;
}
.chat-scroll-rail-item[data-state="active"] .chat-scroll-rail-fill {
  box-shadow: 0 0 10px var(--chat-scroll-rail-glow);
}
.chat-scroll-rail-head {
  position: absolute;
  top: 0;
  right: 3px;
  width: 6px;
  height: 6px;
  border-radius: var(--openbot-radius-pill);
  background: var(--chat-scroll-rail-accent);
  box-shadow: 0 0 0 3px var(--chat-scroll-rail-accent), 0 0 12px var(--chat-scroll-rail-glow);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--chat-scroll-rail-accent) 18%, transparent), 0 0 12px var(--chat-scroll-rail-glow);
  }
  pointer-events: none;
  transform: translateY( calc( var(--chat-scroll-rail-head-top) + (var(--chat-scroll-rail-head-length) - var(--openbot-space-1)) * var(--chat-scroll-rail-fill, 0) - 50% ) );
}
.chat-scroll-rail-nav:hover .chat-scroll-rail-surface, .chat-scroll-rail-nav:has(:focus-visible) .chat-scroll-rail-surface {
  backdrop-filter: blur(var(--openbot-space-4));
  opacity: 1;
  transition: opacity var(--openbot-duration-overlay) ease;
}
.chat-scroll-rail-nav:hover .chat-scroll-rail-eyebrow, .chat-scroll-rail-nav:has(:focus-visible) .chat-scroll-rail-eyebrow {
  opacity: 1;
}
.chat-scroll-rail-nav:hover .chat-scroll-rail-label, .chat-scroll-rail-nav:has(:focus-visible) .chat-scroll-rail-label {
  --chat-scroll-rail-delay: calc(min(var(--chat-scroll-rail-index, 0), 12) * 18ms);
  opacity: 1;
  filter: blur(0);
  transform: none;
  transition: color var(--openbot-duration-slow) ease, opacity var(--chat-scroll-rail-quick) ease var(--chat-scroll-rail-delay), filter var(--chat-scroll-rail-quick) ease var(--chat-scroll-rail-delay), transform var(--chat-scroll-rail-duration) var(--chat-scroll-rail-ease) var(--chat-scroll-rail-delay);
}
@media (prefers-reduced-motion: reduce) {
  .chat-scroll-rail .chat-scroll-rail-nav *, .chat-scroll-rail .chat-scroll-rail-nav *::before, .chat-scroll-rail .chat-scroll-rail-nav *::after, .chat-scroll-rail-nav:hover .chat-scroll-rail-surface, .chat-scroll-rail-nav:has(:focus-visible) .chat-scroll-rail-surface, .chat-scroll-rail-nav:hover .chat-scroll-rail-label, .chat-scroll-rail-nav:has(:focus-visible) .chat-scroll-rail-label {
    transition: none;
  }
}
.message-entry {
  max-width: none;
}
.message-entry > .ui-message-content {
  max-width: 100%;
}
.message-action-row {
  display: flex;
  min-height: 24px;
  align-items: center;
  gap: var(--openbot-space-1);
  padding-inline: var(--openbot-space-1);
}
.message-entry-with-author {
  display: grid;
  grid-template-columns: calc(var(--openbot-space-6) + var(--openbot-space-1)) minmax(0, 1fr);
  column-gap: var(--openbot-space-2);
  row-gap: var(--openbot-space-1);
}
.message-entry-with-author > .ui-message-content {
  display: contents;
}
.message-entry-with-author .message-shell {
  grid-column: 2;
  grid-row: 2;
}
.message-entry-with-author .message-action-row {
  grid-column: 2;
  grid-row: 3;
}
.message-entry-with-author .ui-message-footer {
  grid-column: 2;
  grid-row: 4;
}
.message-author-avatar {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  overflow: visible;
  border: 0;
  background: transparent;
}
.message-author-avatar .agent-avatar {
  --agent-avatar-optical-offset: -3px;
  width: var(--openbot-space-6);
  height: var(--openbot-space-6);
}
.message-author-avatar-button {
  width: 100%;
  height: 100%;
  padding: 0;
}
.message-author-avatar-button:hover:not(:disabled):not([data-disabled]) {
  background: transparent;
}
.message-author-gutter {
  width: 28px;
  flex: 0 0 28px;
}
.message-author-name {
  grid-column: 2;
  grid-row: 1;
  padding-inline: var(--openbot-space-3);
  min-width: 0;
  color: var(--message-author-color, var(--openbot-text-muted));
  font-weight: var(--openbot-weight-regular);
  overflow-wrap: anywhere;
}
.message-author-name-button {
  height: auto;
  min-width: 0;
  margin-inline: calc(var(--openbot-space-1-5) * -1);
  padding: 0 var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-md);
  color: inherit;
  font: inherit;
  white-space: normal;
  text-align: start;
}
.message-author-name-button:hover:not(:disabled):not([data-disabled]), .message-author-name-button:focus-visible {
  background: var(--openbot-hover);
  color: inherit;
}
.message-entry-animated {
  animation: message-in var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1) both;
}
.message-entry-agent {
  width: 100%;
}
.message-shell {
  display: flex;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  gap: 5px;
}
.message-entry-user .message-shell {
  justify-content: flex-end;
}
.message-actions {
  position: relative;
  z-index: 4;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--openbot-duration-hover) ease;
}
.message-time {
  padding-inline: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--openbot-duration-hover) ease;
}
.message-author-name > .message-time {
  padding-inline: 0;
}
.message-entry-user .message-action-row > .message-time {
  order: -1;
}
.message-entry:hover .message-actions, .message-entry:focus-within .message-actions, .message-actions-open {
  opacity: 1;
  pointer-events: auto;
}
.message-entry:hover .message-time, .message-entry:focus-within .message-time, .message-entry:has(.message-actions-open) .message-time {
  opacity: 1;
}
@media (hover: none), (pointer: coarse) {
  .message-actions, .message-time {
    opacity: 1;
    pointer-events: auto;
  }
}
.message-entry-user .message-author-name {
  text-align: end;
}
.message-entry-user .message-author-name > .message-time {
  order: -1;
}
.ui-bubble.message-bubble-member > .ui-bubble-content {
  background: var(--message-author-color, var(--openbot-accent));
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix( in srgb, var(--message-author-color, var(--openbot-accent)) 22%, var(--openbot-bg-surface-raised) );
  }
}
.message-action-button {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  padding: 0;
  color: var(--openbot-text-muted);
  transition: background var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease;
}
.message-action-button:hover, .message-action-button:focus-visible, .message-action-button[aria-expanded="true"] {
  background: var(--openbot-border);
  color: var(--openbot-text-secondary);
  outline: none;
}
.message-action-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.message-action-button svg circle:not(:first-child), .message-action-button svg:has(circle:nth-child(3)) circle {
  fill: currentColor;
  stroke: none;
}
.message-action-popover-anchor {
  position: relative;
  display: grid;
  place-items: center;
}
.reaction-picker-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1px;
}
.reaction-picker-options {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1px;
}
.reaction-picker-more {
  margin-top: 3px;
  border-top: 1px solid var(--openbot-border);
  padding-top: 4px;
}
.reaction-picker-more .reaction-picker-options {
  display: grid;
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  grid-template-columns: repeat(8, minmax(0, 1fr));
}
.reaction-picker-more .reaction-picker-options [role="menuitemradio"] {
  width: 100%;
  min-width: 0;
}
.reaction-picker-row :is([role="menuitem"], [role="menuitemradio"]) {
  display: grid;
  width: 31px;
  height: 31px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  padding: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-xl);
  line-height: 1;
  transition: background var(--openbot-duration-hover) ease, transform var(--openbot-duration-hover) ease;
}
.reaction-picker-row :is([role="menuitem"], [role="menuitemradio"]):hover, .reaction-picker-row :is([role="menuitem"], [role="menuitemradio"]):focus-visible, .reaction-picker-row :is([role="menuitem"], [role="menuitemradio"])[data-highlighted], .reaction-picker-row [role="menuitemradio"][aria-checked="true"] {
  background: var(--openbot-border);
  outline: none;
  transform: scale(1.08);
}
.reaction-picker-row .reaction-more-button {
  color: var(--openbot-text-muted);
}
.reaction-more-button svg {
  width: 15px;
  height: 15px;
}
.message-reaction-pill {
  display: flex;
  min-width: 0;
  height: var(--openbot-icon-lg);
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  padding: 0;
  color: inherit;
  font-size: var(--openbot-text-lg);
  line-height: 1;
  transition: background var(--openbot-duration-hover) ease;
}
.message-entry:has(.message-reaction-anchor) > .ui-message-content {
  padding-bottom: var(--openbot-space-3);
}
.message-reaction-anchor .message-reaction-pill {
  gap: 2px;
  margin: 0;
  border-radius: inherit;
}
.ui-bubble-reactions.message-reaction-anchor {
  padding: 2px 6px;
}
.ui-bubble-reactions.message-reaction-anchor:has(> .message-reaction-pill:only-child) {
  width: var(--openbot-control-xs);
  padding-inline: 2px;
}
.ui-bubble-reactions.message-reaction-anchor:has(> .message-reaction-pill:only-child) > .message-reaction-pill {
  width: var(--openbot-icon-lg);
  border-radius: var(--openbot-radius-pill);
}
.message-reaction-anchor .ui-bubble-reaction-overflow {
  padding-right: 6px;
}
.message-reaction-pill:hover {
  background: var(--openbot-hover);
}
.message-reaction-pill-readonly:hover {
  background: transparent;
}
.message-reaction-anchor:has(.message-reaction-pill:focus-visible) {
  box-shadow: 0 0 0 3px var(--openbot-bg-canvas), 0 0 0 5px var(--openbot-border-focus);
}
.message-reaction-pill:focus-visible {
  outline: none;
}
.chat-action-entry-animated {
  width: 100%;
  animation: message-in var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1) both;
}
.agent-activity-slot[data-reserved="true"] {
  min-height: 44px;
}
.agent-activity-entry {
  width: 100%;
  display: grid;
  grid-template-rows: 1fr;
  pointer-events: none;
  transition: grid-template-rows var(--openbot-duration-overlay) var(--openbot-ease-out);
}
@starting-style {
  .agent-activity-entry {
    grid-template-rows: 0fr;
  }
}
.agent-activity-entry[data-state="exiting"] {
  grid-template-rows: 0fr;
}
.agent-activity-content {
  min-height: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  padding: 4px 0 8px 8px;
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  transition: opacity var(--openbot-duration-overlay) var(--openbot-ease-out), filter var(--openbot-duration-overlay) var(--openbot-ease-out), transform var(--openbot-duration-overlay) var(--openbot-ease-out);
  will-change: opacity, filter, transform;
}
@starting-style {
  .agent-activity-content {
    opacity: 0;
    filter: blur(2px);
    transform: translateY(4px);
  }
}
.agent-activity-entry[data-state="exiting"] .agent-activity-content {
  opacity: 0;
  filter: blur(2px);
  transform: translateY(2px);
}
.agent-activity-avatar {
  --agent-avatar-optical-offset: -2px;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  align-self: center;
  transform: translateY(0) scale(1);
  transition: transform var(--openbot-duration-overlay) var(--openbot-ease-out);
  will-change: transform;
}
@starting-style {
  .agent-activity-avatar {
    transform: translateY(3px) scale(0.96);
  }
}
.agent-activity-entry[data-state="exiting"] .agent-activity-avatar {
  transform: translateY(0) scale(0.98);
}
.agent-activity-label {
  display: -webkit-box;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  background: linear-gradient( 90deg, var(--openbot-text-primary) 0%, var(--openbot-text-primary) 30%, var(--openbot-text-muted) 45%, var(--openbot-text-muted) 55%, var(--openbot-text-primary) 70%, var(--openbot-text-primary) 100% );
  background-size: 300% 100%;
  background-clip: text;
  color: transparent;
  font-size: var(--openbot-text-sm);
  line-height: 20px;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: image-generation-shine 2.25s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
}
.agent-activity-elapsed {
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  line-height: 20px;
}
.chat-action-marker {
  width: min(var(--openbot-chat-marker-width), calc(100% - var(--openbot-space-6)));
  min-height: var(--openbot-chat-marker-height);
  justify-content: center;
  margin: 0 auto;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  letter-spacing: var(--openbot-tracking-normal);
  text-align: center;
}
.chat-action-marker-content {
  max-width: 100%;
  gap: var(--openbot-space-1);
}
.chat-action-marker-summary {
  --chat-action-history-open: 340ms;
  --chat-action-history-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --chat-action-history-close: 200ms;
  --chat-action-history-close-ease: cubic-bezier(0.32, 0.08, 0.24, 1);
  --chat-action-history-lift: 170ms;
  --chat-action-history-fade: 22px;
  --chat-action-history-entry: 260ms;
  --chat-action-history-stagger: 60ms;
  display: flex;
  min-width: 0;
  max-width: 100%;
  flex-direction: column;
  align-items: center;
}
.ui-button.chat-action-history-toggle {
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
}
.chat-action-history-toggle svg {
  transition: transform var(--chat-action-history-close) var(--openbot-ease-out);
}
.chat-action-history-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.chat-action-history-panel {
  display: grid;
  width: 100%;
  grid-template-rows: 1fr;
}
.chat-action-history-panel[data-state="open"] {
  animation: chat-action-history-open var(--chat-action-history-open) var(--chat-action-history-ease);
}
.chat-action-history-panel[data-state="closed"] {
  animation: chat-action-history-close var(--chat-action-history-close) var(--chat-action-history-close-ease) forwards;
}
@keyframes chat-action-history-open {
  from {
    grid-template-rows: 0fr;
  }
}
@keyframes chat-action-history-close {
  to {
    grid-template-rows: 0fr;
  }
}
.chat-action-history-panel[data-state="open"] .chat-action-history {
  animation: chat-action-history-settle var(--chat-action-history-open) var(--openbot-ease-out);
}
.chat-action-history-panel[data-state="closed"] .chat-action-history {
  animation: chat-action-history-lift var(--chat-action-history-lift) var(--openbot-ease-out) forwards;
}
@keyframes chat-action-history-settle {
  from {
    transform: translateY(-25%);
  }
}
@keyframes chat-action-history-lift {
  to {
    transform: translateY(-8%);
    opacity: 0;
  }
}
.chat-action-history-clip {
  min-height: 0;
  overflow: hidden;
}
.chat-action-history-panel[data-state="closed"] .chat-action-history-clip {
  -webkit-mask-image: linear-gradient( to bottom, var(--openbot-text-primary) calc(100% - var(--chat-action-history-fade)), transparent );
  mask-image: linear-gradient( to bottom, var(--openbot-text-primary) calc(100% - var(--chat-action-history-fade)), transparent );
}
.chat-action-history {
  box-sizing: border-box;
  display: grid;
  width: 100%;
  gap: var(--openbot-space-1);
  margin: var(--openbot-space-1) 0 0;
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  border-inline-start: 1px solid var(--openbot-border-grouped);
  list-style: none;
  text-align: left;
}
.chat-action-history-entry {
  display: grid;
  grid-template-columns: var(--openbot-icon-xs) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-1-5);
  color: var(--openbot-text-secondary);
}
.chat-action-history-panel[data-state="open"] .chat-action-history-entry {
  animation: chat-action-history-entry-in var(--chat-action-history-entry) var(--openbot-ease-out) backwards;
}
.chat-action-history-panel[data-state="open"] .chat-action-history-entry:nth-child(2) {
  animation-delay: var(--chat-action-history-stagger);
}
.chat-action-history-panel[data-state="open"] .chat-action-history-entry:nth-child(3) {
  animation-delay: calc(var(--chat-action-history-stagger) * 2);
}
.chat-action-history-panel[data-state="open"] .chat-action-history-entry:nth-child(n + 4) {
  animation-delay: calc(var(--chat-action-history-stagger) * 3);
}
@keyframes chat-action-history-entry-in {
  from {
    transform: translateX(calc(var(--openbot-space-1) * -1));
    opacity: 0;
    filter: blur(2px);
  }
}
.chat-action-history-entry time {
  color: var(--openbot-text-muted);
  white-space: nowrap;
}
.chat-action-history-icon, .chat-action-history-icon svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.chat-action-history-status-completed .chat-action-history-icon {
  color: var(--openbot-success);
}
.chat-action-history-status-failed .chat-action-history-icon, .chat-action-history-status-interrupted .chat-action-history-icon, .chat-action-history-status-cancelled .chat-action-history-icon {
  color: var(--openbot-danger);
}
.chat-action-history-status-needs-attention .chat-action-history-icon {
  color: var(--openbot-warning);
}
.chat-action-history-status-in-progress .chat-action-history-icon {
  color: var(--openbot-accent);
}
@media (prefers-reduced-motion: reduce) {
  .chat-action-history-panel, .chat-action-history, .chat-action-history-entry {
    animation: none;
  }
  .chat-action-history-toggle svg {
    transition: none;
  }
}
.chat-action-marker-label, .chat-action-marker-time {
  flex: 0 0 auto;
  white-space: nowrap;
}
.chat-action-marker-time {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.chat-action-target {
  box-sizing: border-box;
  display: inline-flex;
  min-width: 0;
  max-width: min(280px, 100%);
  height: auto;
  min-height: var(--openbot-chat-marker-height);
  flex: 0 1 auto;
  align-items: center;
  gap: var(--openbot-space-1);
  border: 0;
  border-radius: var(--openbot-radius-pill);
  background: transparent;
  padding: 0 var(--openbot-space-1-5);
  color: var(--openbot-text-secondary);
  font: inherit;
  line-height: inherit;
  outline: none;
  text-align: left;
  white-space: nowrap;
  transition: background-color var(--openbot-duration-hover) var(--openbot-ease-out), box-shadow var(--openbot-duration-hover) var(--openbot-ease-out), color var(--openbot-duration-hover) var(--openbot-ease-out), scale var(--openbot-duration-fast) var(--openbot-ease-out);
}
button.chat-action-target:hover, .chat-action-agent-menu-trigger:hover, .chat-action-agent-menu-trigger[aria-expanded="true"] {
  background: var(--openbot-bg-control-hover);
  box-shadow: 0 0 0 1px var(--openbot-border-strong);
  color: var(--openbot-text-primary);
}
button.chat-action-target:focus-visible, .chat-action-agent-menu-trigger:focus-visible {
  background: var(--openbot-bg-control-hover);
  box-shadow: var(--openbot-focus-ring);
  color: var(--openbot-text-primary);
}
button.chat-action-target:active, .chat-action-agent-menu-trigger:active {
  background: var(--openbot-bg-control-active);
  scale: 0.96;
}
.chat-action-target-unavailable {
  color: var(--openbot-text-muted);
}
.chat-action-marker-unavailable .chat-action-marker-label, .chat-action-marker-context-reset .chat-action-marker-label, .chat-action-marker-model-switch .chat-action-marker-label {
  padding-inline-end: var(--openbot-space-1-5);
}
.chat-action-target-name, .chat-action-target > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-action-target .ui-marker-icon, .chat-action-target .ui-marker-icon svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: 0 0 var(--openbot-icon-xs);
}
.chat-action-target .ui-marker-icon {
  translate: 0 -0.5px;
}
.chat-action-agent-avatar {
  --agent-avatar-optical-offset: -2px;
  position: relative;
  width: var(--openbot-chat-marker-avatar);
  height: var(--openbot-chat-marker-avatar);
  flex: 0 0 var(--openbot-chat-marker-avatar);
  border: 0;
  background: transparent;
  translate: 0 -0.5px;
}
.chat-action-marker-agent-message .chat-action-target {
  --chat-action-agent-color: var(--openbot-accent);
}
.chat-action-marker-agent-message button.chat-action-target:hover, .chat-action-marker-agent-message .chat-action-agent-menu-trigger:hover, .chat-action-marker-agent-message .chat-action-agent-menu-trigger[aria-expanded="true"] {
  background: var(--chat-action-agent-color);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--chat-action-agent-color) 16%, transparent);
  }
  box-shadow: none;
  color: var(--chat-action-agent-color);
}
.chat-action-marker-agent-message button.chat-action-target:focus-visible, .chat-action-marker-agent-message .chat-action-agent-menu-trigger:focus-visible {
  background: var(--chat-action-agent-color);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--chat-action-agent-color) 16%, transparent);
  }
  box-shadow: var(--openbot-focus-ring);
  color: var(--chat-action-agent-color);
}
.chat-action-marker-agent-message button.chat-action-target:active, .chat-action-marker-agent-message .chat-action-agent-menu-trigger:active {
  background: var(--chat-action-agent-color);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--chat-action-agent-color) 34%, transparent);
  }
  color: var(--openbot-text-primary);
}
.chat-action-target-status-in-progress .ui-marker-icon {
  color: var(--openbot-accent);
}
.chat-action-target-status-completed .ui-marker-icon {
  color: var(--openbot-success);
}
.chat-action-target-status-failed .ui-marker-icon, .chat-action-target-status-cancelled .ui-marker-icon, .chat-action-target-status-interrupted .ui-marker-icon {
  color: var(--openbot-danger);
}
.chat-action-target-status-needs-attention .ui-marker-icon {
  color: var(--openbot-warning);
}
.chat-action-target-status-in-progress .ui-marker-icon svg {
  animation: ui-spin 1s linear infinite;
}
.chat-action-avatar-stack {
  display: inline-flex;
  min-width: 0;
  height: var(--openbot-chat-marker-avatar);
  align-items: center;
}
.chat-action-avatar-stack .chat-action-agent-avatar + .chat-action-agent-avatar {
  margin-left: -6px;
}
.chat-action-group-list {
  padding-inline: 0;
  border-inline-start: 0;
  text-align: center;
}
.chat-action-group-list > .chat-action-history-entry {
  display: block;
}
.chat-action-group-list .chat-action-marker {
  width: 100%;
}
.chat-action-marker-routine-run-group > .chat-action-marker-summary > .chat-action-marker-content {
  flex-wrap: wrap;
  justify-content: center;
}
.chat-action-run-group-details {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--openbot-space-1);
}
.chat-action-run-group-count::before, .chat-action-run-group-time::before {
  content: "·" / "";
  margin-inline-end: var(--openbot-space-1);
}
.ui-action-menu.chat-action-agent-menu {
  min-width: 220px;
  max-width: min(320px, calc(100vw - var(--openbot-space-4)));
}
.ui-action-menu.chat-action-agent-menu .chat-action-agent-menu-item[role="menuitem"] {
  display: grid;
  align-items: center;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: var(--openbot-space-2);
}
.chat-action-agent-menu-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-action-agent-menu-item .chat-action-agent-avatar {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
}
.chat-action-agent-menu-status {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  white-space: nowrap;
}
.chat-action-attachments {
  margin-top: var(--openbot-space-2);
}
.chat-row-unavailable {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .chat-action-target-status-in-progress .ui-marker-icon svg {
    animation: none;
  }
}
.message-entry .ui-bubble {
  letter-spacing: -0.15px;
}
.message-entry-agent .ui-bubble {
  max-width: min(720px, 100%);
}
.message-entry-agent .ui-bubble:has(.choice-card) {
  width: min(500px, 100%);
  max-width: min(500px, 100%);
}
.message-entry-agent .ui-bubble:has(.image-generation) {
  width: min(420px, 100%);
  max-width: min(420px, 100%);
}
.message-entry-agent .ui-bubble:has(.image-gallery) {
  width: min(520px, 100%);
  max-width: min(520px, 100%);
}
.message-entry-agent .ui-bubble-variant-ghost:has( :is(.choice-card, .image-generation, .image-gallery, .message-code-block, .message-data-table-scroll) ) > .ui-bubble-content {
  width: 100%;
}
.image-generation {
  display: grid;
  min-width: 0;
  justify-items: start;
  gap: 14px;
}
.message-image-attachments {
  display: grid;
  min-width: 0;
  gap: 10px;
}
.image-generation-stage {
  position: relative;
  width: min(100%, 420px);
  overflow: hidden;
  aspect-ratio: var(--image-generation-ratio);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  isolation: isolate;
}
.image-generation-canvas, .image-generation-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.image-generation-canvas {
  overflow: hidden;
  background: var(--openbot-bg-control);
  opacity: 1;
  transition: opacity var(--openbot-duration-overlay) ease;
}
.image-generation-canvas-failed {
  display: grid;
  place-items: center;
}
.image-generation-ready .image-generation-canvas {
  opacity: 0;
}
.image-generation-ready .image-generation-glow {
  animation: none;
}
.image-generation-dots {
  position: absolute;
  inset: 2px;
  background-image: radial-gradient(circle, var(--openbot-text-muted) 0.7px, transparent 1.3px);
  background-repeat: space;
  background-size: 11px 11px;
  opacity: 0.22;
}
.image-generation-failure-mark {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 2px solid var(--openbot-danger);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-danger-soft);
  box-shadow: 0 0 0 5px var(--openbot-danger-soft);
  color: var(--openbot-danger);
}
.image-generation-failure-mark > svg {
  width: var(--openbot-control-xl);
  height: var(--openbot-control-xl);
  stroke-width: var(--openbot-icon-stroke);
}
.image-generation-glow {
  position: absolute;
  inset: 2px;
  background-image: radial-gradient(circle, var(--openbot-text-primary) 1.1px, transparent 1.6px);
  background-repeat: space;
  background-size: 11px 11px;
  -webkit-mask-image: radial-gradient(ellipse at center, var(--openbot-text-primary) 0%, transparent 60%), radial-gradient(ellipse at center, var(--openbot-text-primary) 0%, transparent 62%);
  mask-image: radial-gradient(ellipse at center, var(--openbot-text-primary) 0%, transparent 60%), radial-gradient(ellipse at center, var(--openbot-text-primary) 0%, transparent 62%);
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-size: 72% 62%, 52% 52%;
  mask-size: 72% 62%, 52% 52%;
  -webkit-mask-position: 16% 20%, 30% 32%;
  mask-position: 16% 20%, 30% 32%;
  animation: image-generation-morph 4.2s cubic-bezier(0.35, 1.55, 0.65, 1) infinite, image-generation-breathe 1.9s cubic-bezier(0.66, 0, 0.34, 1) infinite;
}
.image-generation-resolution {
  position: absolute;
  z-index: 1;
  top: 8px;
  right: 8px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface);
  padding: 2px 7px;
  color: var(--openbot-text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--openbot-text-sm);
  white-space: nowrap;
}
.image-generation-meta {
  display: flex;
  width: min(100%, 420px);
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
}
.image-generation-label {
  background: linear-gradient( 90deg, var(--openbot-text-primary) 0%, var(--openbot-text-primary) 30%, var(--openbot-text-muted) 45%, var(--openbot-text-muted) 55%, var(--openbot-text-primary) 70%, var(--openbot-text-primary) 100% );
  background-size: 300% 100%;
  background-clip: text;
  color: transparent;
  font-size: var(--openbot-text-lg);
  font-weight: 550;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.image-generation:not(.image-generation-ready, .image-generation-failed) .image-generation-label {
  animation: image-generation-shine 2.25s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
}
.image-generation-prompt {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.image-generation-error {
  max-width: 100%;
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
  line-height: 17px;
}
.image-generation-preview {
  display: block;
  border: 0;
  background: var(--openbot-bg-control);
  cursor: pointer;
  opacity: 0;
  padding: 0;
  transition: opacity var(--openbot-duration-overlay) ease;
}
.image-generation-preview-visible {
  opacity: 1;
}
.image-generation-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.image-generation-preview:focus-visible, .image-generation-hover-download:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}
.image-generation-hover-download {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  right: 10px;
  bottom: 10px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-glass);
  padding: 5px 10px;
  color: var(--openbot-text-primary);
  cursor: pointer;
  backdrop-filter: blur(12px) saturate(1.15);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  font-size: var(--openbot-text-sm);
  font-weight: 650;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: background-color var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease, border-color var(--openbot-duration-hover) ease, opacity var(--openbot-duration-hover) ease, transform var(--openbot-duration-hover) ease;
}
.image-generation-download-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}
.image-generation-stage:hover .image-generation-hover-download, .image-generation-stage:focus-within .image-generation-hover-download {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.image-generation-hover-download:hover {
  border-color: var(--openbot-border-focus);
  background: var(--openbot-bg-glass);
  color: var(--openbot-text-primary);
}
@keyframes image-generation-morph {
  0% {
    -webkit-mask-size: 52% 46%, 40% 40%;
    mask-size: 52% 46%, 40% 40%;
    -webkit-mask-position: 16% 20%, 30% 32%;
    mask-position: 16% 20%, 30% 32%;
  }
  25% {
    -webkit-mask-size: 46% 58%, 44% 38%;
    mask-size: 46% 58%, 44% 38%;
    -webkit-mask-position: 84% 16%, 66% 30%;
    mask-position: 84% 16%, 66% 30%;
  }
  50% {
    -webkit-mask-size: 60% 44%, 38% 46%;
    mask-size: 60% 44%, 38% 46%;
    -webkit-mask-position: 82% 84%, 62% 68%;
    mask-position: 82% 84%, 62% 68%;
  }
  75% {
    -webkit-mask-size: 48% 54%, 46% 40%;
    mask-size: 48% 54%, 46% 40%;
    -webkit-mask-position: 14% 82%, 34% 66%;
    mask-position: 14% 82%, 34% 66%;
  }
  100% {
    -webkit-mask-size: 52% 46%, 40% 40%;
    mask-size: 52% 46%, 40% 40%;
    -webkit-mask-position: 16% 20%, 30% 32%;
    mask-position: 16% 20%, 30% 32%;
  }
}
@keyframes image-generation-breathe {
  0%, 100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}
@keyframes image-generation-shine {
  0%, 18% {
    background-position: 100% 0;
  }
  82%, 100% {
    background-position: 0% 0;
  }
}
.message-entry-pending .message-shell {
  opacity: 0.7;
}
.pending-send-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--openbot-space-1);
}
.pending-send-status[data-state="failed"] .pending-send-label {
  color: var(--openbot-danger-text);
}
.pending-send-error {
  margin-inline-start: var(--openbot-space-2);
  overflow-wrap: anywhere;
}
.message-entry-user .ui-bubble {
  max-width: min(420px, 100%);
}
.message-copy {
  margin: 0;
  font-size: var(--openbot-text-lg);
  line-height: 20px;
  overflow-wrap: anywhere;
  white-space: pre-line;
  user-select: text;
}
.message-markdown {
  white-space: normal;
}
.message-markdown > *, .message-markdown :is(p, ul, ol, blockquote) {
  margin: 0;
}
.message-markdown > :not(:first-child) {
  margin-top: var(--openbot-space-3);
}
.message-markdown-heading {
  margin: 0;
  color: inherit;
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: var(--openbot-tracking-tight);
}
.message-markdown-heading[data-level="1"] {
  font-size: var(--openbot-text-2xl);
  line-height: var(--openbot-leading-2xl);
}
.message-markdown-heading[data-level="2"] {
  font-size: var(--openbot-text-xl);
  line-height: var(--openbot-leading-xl);
}
.message-markdown-heading:is([data-level="3"], [data-level="4"], [data-level="5"], [data-level="6"]) {
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
.message-markdown strong {
  font-weight: var(--openbot-weight-semibold);
}
.message-markdown del {
  color: var(--openbot-text-secondary);
}
.message-markdown :is(ul, ol) {
  padding-left: var(--openbot-space-6);
}
.message-markdown ul {
  list-style: disc;
}
.message-markdown ul ul {
  list-style: circle;
}
.message-markdown ol {
  list-style: decimal;
}
.message-markdown li + li, .message-markdown li > :is(ul, ol) {
  margin-top: var(--openbot-space-1);
}
.message-markdown-task {
  display: flex;
  align-items: flex-start;
  gap: var(--openbot-space-1-5);
  list-style: none;
}
.message-markdown-checkbox {
  margin-top: var(--openbot-space-1);
  opacity: 1;
}
.message-markdown blockquote {
  border-left: var(--openbot-space-0-5) solid var(--openbot-border-strong);
  padding-left: var(--openbot-space-3);
  color: var(--openbot-text-secondary);
}
.message-markdown blockquote > :not(:first-child) {
  margin-top: var(--openbot-space-2);
}
.message-markdown :not(pre) > code {
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-0-5) var(--openbot-space-1);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-md);
  white-space: break-spaces;
}
.message-markdown hr {
  height: 1px;
  border: 0;
  background: var(--openbot-border-strong);
}
.message-markdown-raw-html {
  display: block;
  color: var(--openbot-text-secondary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-md);
  white-space: pre-wrap;
}
.message-markdown-image {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 360px;
  border-radius: var(--openbot-radius-md);
  object-fit: contain;
}
.message-markdown-image-button {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  padding: 0;
  border-radius: var(--openbot-radius-md);
  cursor: zoom-in;
}
.message-markdown-image-button:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}
.message-markdown-table-scroll {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  border-radius: var(--openbot-radius-md);
  box-shadow: 0 0 0 1px var(--openbot-data-table-ring);
}
.message-markdown-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--openbot-bg-canvas);
  color: var(--openbot-data-table-text);
}
.message-markdown-table :is(th, td) {
  border-right: 1px solid var(--openbot-data-table-border);
  border-bottom: 1px solid var(--openbot-data-table-border);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  overflow-wrap: break-word;
  text-align: left;
  vertical-align: top;
}
.message-markdown-table th {
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-data-table-header-text);
  font-weight: var(--openbot-weight-medium);
}
.message-markdown-table :is(th, td):last-child {
  border-right: 0;
}
.message-markdown-table tbody tr:last-child td {
  border-bottom: 0;
}
.message-markdown-table [data-align="center"] {
  text-align: center;
}
.message-markdown-table [data-align="right"] {
  text-align: right;
}
::highlight(openbot-message-selection) {
  background: var(--openbot-accent-strong);
  color: inherit;
}
::highlight(openbot-quote-target) {
  background: var(--openbot-warning);
  color: var(--openbot-text-on-light);
}
.selection-highlight-layer {
  position: fixed;
  z-index: 18;
  inset: 0;
  pointer-events: none;
}
.selection-highlight-layer span {
  position: fixed;
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-accent-strong);
}
.selection-actions-layer {
  position: fixed;
  z-index: 25;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px) scale(0.97);
  transform-origin: 50% 0;
  transition: opacity var(--openbot-duration-slow) ease-out, transform var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1);
  will-change: top, left, transform;
}
.selection-actions-layer[data-placement="top"] {
  transform-origin: 50% 100%;
}
.selection-actions-layer[data-ready="true"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.selection-actions-bar {
  display: flex;
  max-width: calc(100vw - 24px);
  height: 36px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface-raised);
  padding: 4px;
  box-shadow: 0 14px 34px var(--openbot-shadow-popover-ambient), 0 3px 10px var(--openbot-shadow-popover-ambient), inset 0 0 0 1px var(--openbot-shadow-ring);
  color: var(--openbot-text-primary);
  transition: width var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1);
}
.selection-actions-content, .selection-actions-presets, .selection-actions-more-presets {
  display: flex;
  width: max-content;
  min-width: 0;
  align-items: center;
}
.selection-actions-content {
  height: 28px;
  flex: 0 0 auto;
  gap: 2px;
}
.selection-actions-form-shell {
  display: flex;
  min-width: 0;
  align-items: center;
  overflow: hidden;
  opacity: 1;
  transform: translateX(0);
  transition: max-width var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1), opacity var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1), transform var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1);
}
.selection-actions-form-shell-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-8px);
}
.selection-actions-form {
  display: flex;
  height: 28px;
  flex: 0 0 auto;
  align-items: center;
  overflow: hidden;
  transition: width var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1);
}
.selection-actions-form input {
  width: 100%;
  height: 28px;
  border: 0;
  background: transparent;
  padding: 0 10px 0 11px;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: 400;
  line-height: 28px;
  outline: 0;
}
.selection-actions-form input::placeholder {
  color: var(--openbot-text-muted);
}
.selection-actions-form input:focus-visible {
  outline: 0;
}
.selection-actions-presets {
  max-width: 224px;
  gap: 2px;
  overflow: hidden;
  opacity: 1;
  transform: translateX(0);
  transition: max-width var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1), opacity var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1), transform var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1);
}
.selection-actions-presets-hidden {
  max-width: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-8px);
}
.selection-actions-more-presets {
  max-width: 0;
  gap: 2px;
  margin-left: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1), opacity var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1), margin-left var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1);
}
.selection-actions-presets-expanded .selection-actions-more-presets {
  max-width: 262px;
  margin-left: 2px;
  opacity: 1;
}
.selection-actions-send-shell {
  display: flex;
  min-width: 0;
  max-width: 0;
  align-items: center;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.88);
  transition: max-width var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1), opacity var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1), transform var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1);
}
.selection-actions-send-shell-visible {
  max-width: 30px;
  opacity: 1;
  transform: scale(1);
}
.selection-actions-control, .selection-actions-icon-button, .selection-actions-send {
  display: inline-flex;
  height: 28px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  padding: 0;
  transition: background-color var(--openbot-duration-hover) ease, border-color var(--openbot-duration-hover) ease, box-shadow var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease, opacity var(--openbot-duration-hover) ease, transform var(--openbot-duration-normal) ease;
}
.selection-actions-control {
  gap: 4px;
  border: 1px solid transparent;
  background: transparent;
  padding: 0 9px;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: 430;
  white-space: nowrap;
}
.selection-actions-icon-button, .selection-actions-send {
  width: 28px;
}
.selection-actions-kbd {
  height: 18px;
  margin-left: 2px;
  font-size: var(--openbot-text-xs);
}
.selection-actions-icon-button {
  background: transparent;
  color: var(--openbot-text-secondary);
}
.selection-actions-send {
  background: var(--openbot-text-primary);
  color: var(--openbot-bg-canvas);
}
.selection-actions-control:active, .selection-actions-icon-button:active, .selection-actions-send:active {
  transform: scale(0.94);
}
.selection-actions-divider {
  width: 1px;
  height: 16px;
  flex: 0 0 auto;
  margin: 0 3px;
  background: var(--openbot-border-strong);
}
.selection-actions-more-divider {
  margin-left: 1px;
}
.selection-actions-expand svg {
  transition: transform var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1);
}
.selection-actions-expand[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.selection-actions-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.selection-actions-status, .selection-actions-error {
  display: inline-flex;
  height: 28px;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  font-size: var(--openbot-text-sm);
  white-space: nowrap;
}
.selection-actions-status {
  color: var(--openbot-text-secondary);
}
.selection-actions-error {
  color: var(--openbot-danger);
}
.selection-actions-spinner {
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--openbot-border-strong);
  border-top-color: var(--openbot-text-secondary);
  border-radius: var(--openbot-radius-pill);
  animation: selection-actions-spin 700ms linear infinite;
}
.message-selection-quote {
  max-width: 100%;
  max-height: 124px;
  overflow: auto;
  margin: 0;
  border-left: 2px solid var(--openbot-accent);
  border-radius: 0 var(--openbot-radius-sm) var(--openbot-radius-sm) 0;
  background: var(--openbot-bg-control);
  padding: 6px 8px;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: 17px;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
@media (hover: hover) and (pointer: fine) {
  .selection-actions-control:hover {
    border-color: var(--openbot-border-focus);
    background: var(--openbot-accent-strong);
    box-shadow: 0 0 0 1px var(--openbot-accent-soft);
    color: var(--openbot-text-primary);
  }
  .selection-actions-icon-button:hover {
    background: var(--openbot-bg-control-hover);
    color: var(--openbot-text-primary);
  }
  .selection-actions-send:hover {
    opacity: 0.9;
  }
}
@media (max-width: 480px) {
  .selection-actions-control {
    width: 28px;
    padding: 0;
  }
  .selection-actions-kbd {
    display: none;
  }
  .selection-actions-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .selection-actions-presets-expanded .selection-actions-more-presets {
    max-width: 88px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .selection-actions-layer, .selection-actions-bar, .selection-actions-form, .selection-actions-form-shell, .selection-actions-presets, .selection-actions-more-presets, .selection-actions-send-shell, .selection-actions-expand svg {
    transition: none;
  }
  .selection-actions-spinner {
    animation-duration: 1.4s;
  }
}
@keyframes selection-actions-spin {
  to {
    transform: rotate(360deg);
  }
}
.message-content-blocks {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: 10px;
}
.message-content-resize {
  min-width: 0;
}
.message-content-resize[data-resizing="true"], .agent-queue-panel-resize[data-resizing="true"] {
  overflow: hidden;
  will-change: height;
}
.t-stream-w {
  animation: t-stream-in var(--stream-fade) var(--stream-ease) both;
}
@keyframes t-stream-in {
  from {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .t-stream-w {
    animation: none;
  }
}
.message-entry-agent .ui-bubble:has(:is(.message-data-table-scroll, .message-code-block)) {
  width: min(720px, 100%);
  max-width: min(720px, 100%);
}
.message-entry-agent .ui-bubble:has(.message-data-table-scroll) > .ui-bubble-content {
  width: 100%;
}
.message-entry-agent .message-shell:has(.message-data-table-scroll) {
  align-items: flex-end;
}
.message-code-block {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
}
.message-code-header {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  border-bottom: 1px solid var(--openbot-border);
  background: var(--openbot-bg-control);
  padding: 4px 6px 4px 10px;
}
.message-code-heading {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.message-code-filename {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.message-code-language {
  flex: none;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-border);
  padding: 1px 6px;
  color: var(--openbot-text-readable);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: 16px;
}
.message-code-language:only-child {
  font-family: var(--openbot-font-mono);
}
:where(.ui-button).message-code-copy {
  position: relative;
  height: 26px;
  flex: none;
  gap: var(--openbot-space-1);
  border-radius: var(--openbot-radius-sm);
  padding-inline: 7px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
}
@media (hover: hover) and (pointer: fine) {
  :where(.ui-button).message-code-copy:hover:not(:disabled) {
    background: var(--openbot-bg-control-active);
    box-shadow: 0 0 0 1px var(--openbot-border-strong);
    color: var(--openbot-text-primary);
  }
}
:where(.ui-button).message-code-copy:active:not(:disabled) {
  transform: scale(0.96);
}
:where(.ui-button).message-code-copy::after {
  position: absolute;
  width: 40px;
  height: 40px;
  content: "";
}
.message-code-copy-icons {
  position: relative;
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  display: grid;
  place-items: center;
}
.message-code-copy-icons > span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  filter: blur(4px);
  scale: 0.25;
  transition: opacity var(--openbot-duration-slow) var(--openbot-ease-out), filter var(--openbot-duration-slow) var(--openbot-ease-out), scale var(--openbot-duration-slow) var(--openbot-ease-out);
}
.message-code-copy-icons > span[data-visible="true"] {
  opacity: 1;
  filter: blur(0);
  scale: 1;
}
.message-code-copy-icons svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}
.message-code-scroll {
  width: 100%;
  max-height: 420px;
  overflow: auto;
  margin: 0;
  background: var(--openbot-bg-sidebar);
  padding-block: 8px 10px;
  color: var(--openbot-text-secondary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  line-height: 19px;
  overscroll-behavior-x: contain;
  tab-size: 2;
}
.message-code-scroll:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: -2px;
}
.message-code-scroll > code {
  min-width: 100%;
  width: max-content;
  display: block;
  font: inherit;
}
.message-code-line {
  min-height: 19px;
  display: flex;
}
.message-code-line-number {
  width: 40px;
  flex: none;
  padding-right: 8px;
  color: var(--openbot-text-dim);
  font-size: var(--openbot-text-sm);
  text-align: right;
  user-select: none;
}
.message-code-line-source {
  min-width: 0;
  padding-right: 12px;
  white-space: pre;
}
.message-code-caret {
  width: 2px;
  height: 13px;
  display: inline-block;
  margin-left: 2px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
  transform: translateY(2px);
}
[data-code-token="cmnt"] {
  color: var(--openbot-text-dim);
  font-style: italic;
}
[data-code-token="kwd"], [data-code-token="section"] {
  color: var(--openbot-accent-text);
}
[data-code-token="str"], [data-code-token="insert"] {
  color: var(--openbot-success);
}
[data-code-token="num"], [data-code-token="bool"], [data-code-token="class"] {
  color: var(--openbot-warning);
}
[data-code-token="func"], [data-code-token="type"] {
  color: var(--openbot-text-primary);
}
[data-code-token="oper"], [data-code-token="esc"] {
  color: var(--openbot-text-muted);
}
[data-code-token="err"], [data-code-token="deleted"] {
  color: var(--openbot-danger);
}
@media (prefers-reduced-motion: reduce) {
  .message-code-copy-icons > span {
    transition: none;
  }
}
.message-data-table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-radius: var(--openbot-radius-lg);
  overscroll-behavior-inline: contain;
}
.message-data-table-frame {
  width: 100%;
  min-width: 0;
}
.message-data-table-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-1);
  margin-top: var(--openbot-space-1);
}
.message-data-table-scroll:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}
.message-data-table {
  width: 100%;
  min-width: calc(var(--message-data-table-columns) * 112px);
  overflow: hidden;
  border: 1px solid var(--openbot-data-table-outer-border);
  border-radius: var(--openbot-radius-lg);
  border-spacing: 0;
  background: var(--openbot-bg-surface-raised);
  box-shadow: 0 0 0 0.5px var(--openbot-data-table-ring);
  font-size: var(--openbot-text-md);
}
.message-data-table thead {
  color: var(--openbot-data-table-header-text);
  font-weight: 500;
}
.message-data-table tbody {
  background: var(--openbot-bg-canvas);
}
.message-data-table tbody tr:not(:last-child) td {
  border-bottom: 1px solid var(--openbot-data-table-border);
}
.message-data-table th, .message-data-table td {
  padding: 9px 12px;
  color: var(--openbot-data-table-text);
  font-weight: inherit;
  overflow-wrap: break-word;
  text-align: left;
  vertical-align: top;
}
.message-data-table thead th {
  border-bottom: 1px solid var(--openbot-data-table-border);
  padding-top: 7px;
  padding-bottom: 7px;
  color: var(--openbot-data-table-header-text);
}
.message-data-table th:not(:last-child), .message-data-table td:not(:last-child) {
  border-right: 1px solid var(--openbot-data-table-border);
}
:is(.message-data-table, .message-markdown-table) :is(th, td) :is(a, code) {
  overflow-wrap: anywhere;
}
.message-data-table [data-align="center"] {
  text-align: center;
}
.message-data-table [data-align="right"] {
  text-align: right;
}
.message-comparison-table-yes {
  color: var(--openbot-success);
}
.message-comparison-table-no {
  color: var(--openbot-data-table-header-text);
}
.message-link {
  border-radius: var(--openbot-radius-xs);
  color: inherit;
  font-weight: 560;
  text-decoration-color: var(--openbot-text-muted);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--openbot-duration-hover) ease, text-decoration-color var(--openbot-duration-hover) ease;
}
.message-link-icon {
  position: relative;
  display: inline-flex;
  width: 14px;
  height: 14px;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
  color: currentColor;
  vertical-align: -2px;
}
.message-link-icon img, .message-link-fallback {
  width: 14px;
  height: 14px;
}
.message-link-icon img {
  position: absolute;
  inset: 0;
  border-radius: var(--openbot-radius-xs);
  object-fit: contain;
}
.message-link-fallback {
  opacity: 0.72;
}
.message-link:hover {
  color: var(--openbot-text-primary);
  text-decoration-color: currentColor;
}
.message-link:focus-visible {
  outline: 2px solid var(--openbot-text-secondary);
  outline-offset: 2px;
}
.message-citation {
  position: relative;
  display: inline;
}
.message-citation-mark {
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  margin: 0 2px;
  border: 0;
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-bg-control-hover);
  padding: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  vertical-align: 4px;
  transition: background var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease;
}
.message-citation-mark:hover, .message-citation-mark:focus-visible {
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
}
.message-citation-mark:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}
.anchored-tooltip {
  position: fixed;
  z-index: var(--openbot-layer-tooltip);
  box-sizing: border-box;
  width: max-content;
  max-width: min(280px, calc(100vw - 16px));
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface-raised);
  padding: 6px 8px;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: 500;
  line-height: 15px;
  overflow-wrap: anywhere;
  pointer-events: none;
  text-align: left;
  white-space: normal;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--openbot-duration-fast) ease, transform var(--openbot-duration-fast) ease;
}
.anchored-tooltip[data-placement="bottom"] {
  transform: translateY(-4px);
}
.anchored-tooltip[data-ready="true"] {
  opacity: 1;
  transform: translateY(0);
}
.anchored-tooltip-light {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-surface-light);
  color: var(--openbot-text-on-light);
}
@media (prefers-reduced-motion: reduce) {
  .anchored-tooltip, .anchored-tooltip[data-placement="bottom"], .anchored-tooltip[data-ready="true"] {
    transform: none;
  }
}
.message-citation-footer {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  border-top: 1px solid var(--openbot-border);
  padding-top: 10px;
}
.message-citation-ref {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: 425;
  line-height: 18px;
  text-decoration: none;
}
.message-citation-ref .message-citation-mark {
  flex: 0 0 18px;
  margin: 0;
}
.message-citation-ref-label {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-weight: 550;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.message-citation-separator {
  color: var(--openbot-text-dim);
}
.message-citation-ref-host {
  color: var(--openbot-text-muted);
  white-space: nowrap;
}
.message-citation-arrow {
  display: flex;
  width: 14px;
  height: 14px;
  margin-left: -2px;
  color: var(--openbot-text-dim);
  opacity: 0;
  transform: rotate(45deg) translate(-1px, 1px);
  transition: color var(--openbot-duration-hover) ease, opacity var(--openbot-duration-hover) ease, transform var(--openbot-duration-hover) ease;
}
.message-citation-arrow svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}
.message-citation-ref:hover, .message-citation-ref:focus-visible {
  color: var(--openbot-text-secondary);
}
.message-citation-ref:hover .message-citation-arrow, .message-citation-ref:focus-visible .message-citation-arrow {
  color: var(--openbot-text-secondary);
  opacity: 1;
  transform: rotate(45deg) translate(0, 0);
}
.message-citation-ref:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 3px;
}
[data-slot="bubble"][data-author="user"] .message-citation-mark {
  background: var(--openbot-surface-light);
  color: var(--openbot-text-muted-on-light);
}
[data-slot="bubble"][data-author="user"] .message-citation-mark:hover, [data-slot="bubble"][data-author="user"] .message-citation-mark:focus-visible {
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent);
}
[data-slot="bubble"][data-author="user"] .message-citation-footer {
  border-top-color: var(--openbot-border-on-light);
}
[data-slot="bubble"][data-author="user"] .message-citation-ref-label {
  color: var(--openbot-text-on-light);
}
[data-slot="bubble"][data-author="user"] .message-citation-ref-host {
  color: var(--openbot-text-muted-on-light);
}
[data-slot="bubble"][data-author="user"] .message-citation-separator {
  color: var(--openbot-text-dim-on-light);
}
.message-reply-context {
  max-width: 360px;
  margin: -1px 0 7px;
  border-left: 2px solid var(--openbot-text-dim);
  padding-left: 8px;
  color: var(--openbot-text-secondary);
}
.message-reply-context span {
  display: block;
  margin-bottom: 1px;
  font-size: var(--openbot-text-sm);
  font-weight: 550;
  line-height: 14px;
}
.message-reply-context p {
  overflow: hidden;
  margin: 0;
  font-size: var(--openbot-text-sm);
  line-height: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-slot="bubble"][data-author="user"] .message-reply-context {
  border-left-color: var(--openbot-border-strong);
  color: var(--openbot-text-readable);
}
.message-reply-context[data-opens] {
  position: relative;
  transition: border-left-color var(--openbot-duration-hover) var(--openbot-ease-out);
}
.message-reply-context[data-loading] {
  display: grid;
  align-items: center;
  column-gap: var(--openbot-space-2);
  grid-template-columns: minmax(0, 1fr) auto;
}
.message-reply-context[data-opens]:hover {
  border-left-color: var(--openbot-accent);
}
.message-reply-context .message-reply-open, .message-reply-context .message-reply-open:hover:not(:disabled):not([data-disabled]) {
  position: absolute;
  z-index: 1;
  inset: 0 0 0 -2px;
  width: auto;
  height: auto;
  min-height: 0;
  border-radius: var(--openbot-radius-xs);
  background: none;
  padding: 0;
  cursor: pointer;
}
.message-reply-context .message-reply-open:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}
.message-reply-loading {
  width: 14px;
  height: 14px;
  grid-column: 2;
  grid-row: 1 / span 2;
  animation: message-reply-spin 0.8s linear infinite;
}
.message-reply-context[data-unavailable] {
  border-left-style: dashed;
}
.message-reply-unavailable {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
  margin: -1px 0 7px;
  font-size: var(--openbot-text-sm);
  line-height: 15px;
}
.message-reply-unavailable-icon {
  width: 13px;
  height: 13px;
  flex: none;
}
@keyframes message-reply-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .message-reply-loading {
    animation: none;
  }
}
[data-slot="bubble"][data-author="user"] .message-copy {
  font-size: var(--openbot-text-lg);
}
.message-tag-unavailable {
  display: inline-flex;
  height: 22px;
  align-items: center;
  gap: 4px;
  margin: 0 1px;
  border: 1px dashed var(--openbot-border-strong);
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  padding: 0 6px;
  color: var(--openbot-text-muted);
  font: inherit;
  line-height: 20px;
  vertical-align: middle;
  white-space: nowrap;
}
.message-agent-tag .agent-avatar {
  --agent-avatar-optical-offset: -2px;
  width: 16px;
  height: 16px;
}
.message-file-reference, .composer-file-reference {
  --file-reference-color: var(--openbot-file-default);
  --file-reference-soft: var(--openbot-file-default-soft);
  display: inline-flex;
  min-width: 0;
  max-width: min(240px, calc(100% - 8px));
  align-items: center;
  gap: 4px;
  margin: 0 1px;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  padding: 1px 6px 1px 3px;
  color: var(--file-reference-color);
  font: inherit;
  font-weight: 550;
  line-height: 20px;
  vertical-align: middle;
  white-space: nowrap;
  transition: background-color var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease;
}
.reference-chip.message-reference-chip, .message-file-reference {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: text;
}
:is(.message-data-table, .message-markdown-table) .message-file-reference {
  max-width: 240px;
}
:is( .message-file-reference, .composer-file-reference, .attachment-file-visual, .files-file-visual, .composer-attachment-preview )[data-file-tone="source"] {
  --file-reference-color: var(--openbot-file-blue);
  --file-reference-soft: var(--openbot-file-blue-soft);
}
:is( .message-file-reference, .composer-file-reference, .attachment-file-visual, .files-file-visual, .composer-attachment-preview )[data-file-tone="script"] {
  --file-reference-color: var(--openbot-file-yellow);
  --file-reference-soft: var(--openbot-file-yellow-soft);
}
:is( .message-file-reference, .composer-file-reference, .attachment-file-visual, .files-file-visual, .composer-attachment-preview )[data-file-tone="markup"] {
  --file-reference-color: var(--openbot-file-orange);
  --file-reference-soft: var(--openbot-file-orange-soft);
}
:is( .message-file-reference, .composer-file-reference, .attachment-file-visual, .files-file-visual, .composer-attachment-preview )[data-file-tone="style"] {
  --file-reference-color: var(--openbot-file-teal);
  --file-reference-soft: var(--openbot-file-teal-soft);
}
:is( .message-file-reference, .composer-file-reference, .attachment-file-visual, .files-file-visual, .composer-attachment-preview )[data-file-tone="data"] {
  --file-reference-color: var(--openbot-file-green);
  --file-reference-soft: var(--openbot-file-green-soft);
}
:is( .message-file-reference, .composer-file-reference, .attachment-file-visual, .files-file-visual, .composer-attachment-preview )[data-file-tone="document"] {
  --file-reference-color: var(--openbot-file-red);
  --file-reference-soft: var(--openbot-file-red-soft);
}
:is( .message-file-reference, .composer-file-reference, .attachment-file-visual, .files-file-visual, .composer-attachment-preview )[data-file-tone="media"] {
  --file-reference-color: var(--openbot-file-pink);
  --file-reference-soft: var(--openbot-file-pink-soft);
}
.inline-file-reference-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-button.message-file-reference {
  height: 22px;
  cursor: pointer;
}
.ui-button.message-file-reference:focus-visible, .composer-file-reference:focus-visible {
  outline: 2px solid var(--file-reference-color);
  outline-offset: 2px;
  box-shadow: none;
}
.attachment-reference-visual {
  display: inline-grid;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--openbot-radius-xs);
  background: var(--file-reference-soft);
  color: var(--file-reference-color);
}
.attachment-reference-visual[data-badge-length="3"] {
  width: 20px;
}
.attachment-reference-visual[data-badge-length="4"] {
  width: 24px;
}
.attachment-reference-visual > span {
  font-size: var(--openbot-glyph-sm);
  font-weight: 750;
  letter-spacing: -0.2px;
  line-height: 1;
}
.attachment-reference-visual[data-badge-length="4"] > span {
  font-size: var(--openbot-glyph-xs);
  letter-spacing: -0.4px;
}
.attachment-reference-visual > svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: calc(var(--openbot-icon-stroke) * 20 / 24);
}
[data-slot="bubble"][data-author="user"] .message-file-reference {
  color: var(--file-reference-color);
}
@media (hover: hover) and (pointer: fine) {
  .ui-button.message-file-reference:hover:not(:disabled), .composer-file-reference:hover {
    background-color: var(--file-reference-soft);
    color: var(--file-reference-color);
  }
}
@media (hover: none), (pointer: coarse) {
  .message-file-reference, .composer-file-reference {
    max-width: calc(100% - 8px);
  }
}
.message-error-label {
  margin: 0 0 var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.attachment-file-visual {
  --file-reference-color: var(--openbot-file-default);
  --file-reference-soft: var(--openbot-file-default-soft);
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border-radius: var(--openbot-radius-md);
  background: var(--file-reference-soft);
  color: var(--file-reference-color);
}
.attachment-file-visual svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}
.choice-card {
  display: grid;
  width: min(540px, 100%);
  gap: var(--openbot-space-4);
}
.choice-card-hint {
  margin: calc(-1 * var(--openbot-space-2)) 0 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
  overflow-wrap: anywhere;
}
.choice-options {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface);
}
.choice-option {
  display: flex;
  width: 100%;
  min-height: var(--openbot-control-xl);
  align-items: center;
  gap: var(--openbot-space-2);
  border: 0;
  border-bottom: 1px solid var(--openbot-border);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-lg);
  text-align: left;
  overflow-wrap: anywhere;
}
.choice-option-item:last-child .choice-option {
  border-bottom: 0;
}
.choice-option-item:not([data-disabled]) .choice-option:hover, .choice-option-selected {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}
.choice-option-item:focus-within .choice-option {
  outline: 1px solid var(--openbot-border-focus);
  outline-offset: -1px;
}
.choice-option-item[data-disabled] {
  opacity: 0.5;
}
.choice-key {
  display: grid;
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-muted);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
}
.choice-input {
  width: 100%;
  min-width: 0;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface);
  font-size: var(--openbot-text-lg);
}
.choice-input::placeholder {
  color: var(--openbot-text-muted);
}
.reference-chip.message-reference-chip .reference-chip-icon, .message-file-reference .attachment-reference-visual {
  display: inline-block;
  margin-right: var(--openbot-space-1);
  text-align: center;
  vertical-align: top;
  user-select: none;
}
.message-file-reference .attachment-reference-visual {
  margin-top: var(--openbot-space-0-5);
  font-size: var(--openbot-glyph-sm);
  line-height: var(--openbot-space-4);
}
.message-file-reference .attachment-reference-visual[data-badge-length="4"] {
  font-size: var(--openbot-glyph-xs);
}
.reference-chip.message-reference-chip .agent-avatar {
  display: inline-block;
  height: var(--openbot-space-4);
  vertical-align: top;
}
.message-file-reference .attachment-reference-visual > svg {
  display: inline;
  margin-top: var(--openbot-space-0-5);
  vertical-align: top;
}
.reference-chip.message-reference-chip .reference-chip-icon > svg, .reference-chip.message-reference-chip .agent-avatar > svg {
  display: inline;
  vertical-align: top;
}
.reference-chip.message-reference-chip .reference-chip-icon > svg.lucide {
  margin-top: var(--openbot-space-0-5);
}
.reference-chip.message-reference-chip .agent-avatar > svg {
  margin: -14% 0 0 -14%;
}
.reference-chip.message-reference-chip .reference-chip-name, .message-file-reference .inline-file-reference-name {
  display: inline;
}
.reference-chip.message-reference-chip > .sr-only {
  user-select: none;
}
.message-math-display {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}
.message-math-display > * {
  margin: 0;
  padding: var(--openbot-space-1) 0;
}
.message-code-actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--openbot-space-0-5);
}
.message-preview-expand svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.ui-sliding-tabs.message-preview-switch {
  gap: var(--openbot-space-0-5);
  padding: var(--openbot-space-0-5);
}
.message-preview-switch .ui-sliding-tabs-trigger {
  height: 22px;
  padding: 0 var(--openbot-space-2);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
}
.message-preview-switch .ui-sliding-tabs-pill {
  top: var(--openbot-space-0-5);
  height: 22px;
}
.message-preview-resize {
  overflow: hidden;
}
.message-preview-views {
  position: relative;
}
.message-preview-view:not([data-selected]) {
  position: absolute;
  inset: 0 0 auto;
}
.message-preview-body {
  width: 100%;
  display: grid;
  place-items: center;
  background: var(--openbot-bg-sidebar);
}
.message-preview-body[data-preview-kind="mermaid"] {
  max-height: 420px;
  overflow: auto;
  padding: var(--openbot-space-3);
  overscroll-behavior-x: contain;
}
.message-preview-frame {
  width: 100%;
  height: min(var(--message-preview-height, 160px), 420px);
  display: block;
  border: 0;
  background: var(--openbot-bg-sidebar);
}
.message-preview-diagram {
  max-width: 100%;
  height: auto;
  display: block;
}
.message-preview-status {
  margin: 0;
  padding: var(--openbot-space-6) var(--openbot-space-3);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.message-preview-failure {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  border-bottom: 1px solid var(--openbot-border);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-xs);
}
.message-preview-failure-detail {
  flex-basis: 100%;
  margin: 0;
  overflow-x: auto;
  font-family: var(--openbot-font-mono);
  white-space: pre;
}
.message-preview-backdrop {
  animation: none;
}
.message-preview-dialog {
  width: min(1100px, 100%);
  height: calc(100dvh - var(--openbot-space-6) * 2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  outline: 0;
  border-radius: var(--openbot-radius-xl);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-primary);
  transform-origin: 0 0;
}
.message-preview-dialog:not([data-shown]) {
  opacity: 0;
}
.message-preview-dialog-header {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-4);
  border-bottom: 1px solid var(--openbot-border);
}
.message-preview-dialog-title {
  margin: 0;
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
}
.message-preview-dialog-body {
  min-height: 0;
  flex: 1;
  display: grid;
  overflow: auto;
  background: var(--openbot-bg-sidebar);
}
.message-preview-dialog-body[data-preview-kind="mermaid"] {
  overflow: hidden;
}
.message-preview-canvas {
  position: relative;
  min-height: 0;
  overflow: hidden;
}
.message-preview-canvas-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  outline: 0;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.message-preview-canvas-viewport[data-dragging] {
  cursor: grabbing;
}
.message-preview-canvas-viewport:focus-visible {
  box-shadow: inset 0 0 0 2px var(--openbot-border-focus);
}
.message-preview-canvas-image {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  height: auto;
  opacity: 0;
  transform-origin: 0 0;
  -webkit-user-drag: none;
}
.message-preview-canvas-image[data-ready] {
  opacity: 1;
}
.message-preview-canvas-image[data-settling] {
  transition: transform var(--openbot-duration-slow) var(--openbot-ease-out), width var(--openbot-duration-slow) var(--openbot-ease-out);
}
.message-preview-zoom {
  position: absolute;
  bottom: var(--openbot-space-4);
  left: 50%;
  display: flex;
  align-items: center;
  gap: var(--openbot-space-0-5);
  translate: -50% 0;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-overlay);
  box-shadow: 0 0 0 1px var(--openbot-border);
  padding: var(--openbot-space-1);
}
.message-preview-zoom .ui-button {
  border-radius: var(--openbot-radius-pill);
}
:where(.ui-button).message-preview-zoom-level {
  min-width: 56px;
  font-variant-numeric: tabular-nums;
}
.message-preview-dialog-body .message-preview-frame {
  height: 100%;
}
.chat-visual-frame {
  width: 100%;
  min-width: 0;
  display: block;
  border: 0;
  background: transparent;
  color-scheme: dark;
}
.chat-visual-reply {
  max-width: 720px;
}
.chat-visual-frame-fill {
  box-sizing: border-box;
  height: 100%;
  padding: 12px 16px;
}
.chat-visual-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-xs);
}
.composer-wrap {
  position: relative;
  flex: 0 0 auto;
  padding: 0 var(--openbot-space-1-5) var(--openbot-space-1-5);
}
.team-typing-dots {
  display: flex;
  align-items: center;
  gap: 2px;
}
.team-typing-dots i {
  width: 3px;
  height: 3px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success);
  animation: typing-dot-pulse 900ms ease-in-out infinite;
}
.team-typing-dots i:nth-child(2) {
  animation-delay: var(--openbot-duration-fast);
}
.team-typing-dots i:nth-child(3) {
  animation-delay: var(--openbot-duration-overlay);
}
@media (prefers-reduced-motion: reduce) {
  .agent-row-thinking-dots i, .team-typing-dots i, .image-generation-dots, .image-generation-glow, .image-generation-canvas, .image-generation-preview, .image-generation-label,  .image-generation:not(.image-generation-ready, .image-generation-failed) .image-generation-label, .agent-activity-label {
    animation: none;
    transition: none;
  }
  .image-generation-hover-download {
    transition: none;
  }
}
@media (hover: none), (pointer: coarse) {
  .image-generation-hover-download {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
}
@media (max-width: 620px) {
  .message-entry-agent .ui-bubble:has(.image-generation) {
    width: 100%;
    max-width: 100%;
  }
  .image-generation-stage, .image-generation-meta {
    width: 100%;
  }
}
.composer-reply-preview {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 10px;
  margin: 0 10px 6px;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  padding: 6px 8px 6px 12px;
  box-shadow: 0 7px 22px var(--openbot-shadow-popover-ambient);
}
.composer-reply-preview > div {
  min-width: 0;
  flex: 1;
}
.composer-reply-preview span {
  display: block;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: 550;
  line-height: 14px;
}
.composer-reply-preview p {
  overflow: hidden;
  margin: 1px 0 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.composer-reply-preview > button {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  background: transparent;
  color: var(--openbot-text-muted);
}
.composer-reply-preview > button:hover {
  background: var(--openbot-border);
  color: var(--openbot-text-secondary);
}
.composer {
  position: relative;
  z-index: 11;
  display: grid;
  max-width: none;
  min-height: 96px;
  gap: 4px;
  margin: 0 auto;
  border: 0.5px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  padding: 10px;
  box-shadow: none;
  transition: border-color var(--openbot-duration-hover) var(--openbot-ease-out), box-shadow var(--openbot-duration-hover) var(--openbot-ease-out);
}
.composer[data-compact] {
  grid-template-columns: 28px minmax(0, 1fr) auto;
  min-height: 48px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
}
.composer:focus-within {
  border-color: var(--openbot-text-dim);
  box-shadow: 0 0 0 3px var(--openbot-hover);
}
.composer:has(.composer-editor-surface[aria-disabled="true"]) {
  border-color: var(--openbot-border);
}
.composer button:disabled, .composer-editor-surface[aria-disabled="true"] {
  cursor: default;
}
.composer-button, .dictation-button, .voice-button {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  padding: 0;
  background: var(--openbot-hover);
  color: var(--openbot-text-secondary);
  transition: background-color var(--openbot-duration-hover) var(--openbot-ease-out), color var(--openbot-duration-hover) var(--openbot-ease-out), transform var(--openbot-duration-fast) var(--openbot-ease-out);
}
.composer-button:hover {
  background: var(--openbot-border);
  color: var(--openbot-text-primary);
}
.composer-primary-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.voice-model-progress {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  white-space: nowrap;
}
.voice-morph {
  --voice-morph-duration: 600ms;
  --voice-morph-exit-duration: 360ms;
  --voice-morph-ease: linear(
    0,
    0.057 3.3%,
    0.199 6.7%,
    0.386 10%,
    0.587 13.3%,
    0.773 16.7%,
    0.93 20%,
    1.049 23.3%,
    1.128 26.7%,
    1.171 30%,
    1.183 33.3%,
    1.172 36.7%,
    1.146 40%,
    1.111 43.3%,
    1.075 46.7%,
    1.041 50%,
    1.012 53.3%,
    0.991 56.7%,
    0.976 60%,
    0.967 66.7%,
    0.974 73.3%,
    0.987 80%,
    0.998 86.7%,
    1.004 93.3%,
    1
  );
  --voice-bar-width: 152px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}
.voice-morph-filter {
  position: absolute;
  width: 0;
  height: 0;
}
.voice-morph-goo {
  position: absolute;
  inset: -12px;
  pointer-events: none;
}
.voice-morph-goo-bar {
  opacity: 0.06;
}
.voice-morph-bar, .voice-morph-send-blob, .voice-morph-finish-blob {
  position: absolute;
  top: 12px;
  height: 28px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-primary);
}
.voice-morph-bar {
  right: 46px;
  width: 28px;
  transition: width var(--voice-morph-exit-duration) var(--openbot-ease-out);
}
.voice-morph-send-blob, .voice-morph-finish-blob {
  right: 12px;
  width: 28px;
  opacity: 0;
  transition: opacity 0s linear var(--voice-morph-exit-duration);
}
.voice-morph-finish-blob {
  transform: scale(0.5);
  transition: transform var(--voice-morph-exit-duration) var(--openbot-ease-out), opacity 0s linear var(--voice-morph-exit-duration);
}
.voice-morph[data-recording] .voice-morph-bar {
  width: var(--voice-bar-width);
  transition: width var(--voice-morph-duration) var(--voice-morph-ease);
}
.voice-morph[data-recording] .voice-morph-send-blob {
  opacity: 1;
  transition: none;
}
.voice-morph[data-recording] .voice-morph-finish-blob {
  opacity: 1;
  transform: translateX(-34px) scale(0.8);
  transition: transform var(--voice-morph-duration) var(--voice-morph-ease);
}
.voice-morph-send {
  position: relative;
  display: flex;
}
.voice-morph-slot {
  position: relative;
  display: flex;
  width: 28px;
  height: 28px;
  justify-content: flex-end;
  transition: width var(--voice-morph-exit-duration) var(--openbot-ease-out);
}
.voice-morph[data-recording] .voice-morph-slot {
  width: var(--voice-bar-width);
  transition: width var(--voice-morph-duration) var(--voice-morph-ease);
}
.voice-morph .dictation-button {
  background: transparent;
}
.voice-recording-status {
  display: flex;
  width: 100%;
  min-width: 0;
  height: 28px;
  align-items: center;
  gap: 4px;
  margin: 0;
  border: 0;
  overflow: hidden;
  padding: 0 3px 0 12px;
  color: var(--openbot-text-secondary);
  animation: voice-morph-content-in var(--openbot-duration-slow) var(--openbot-ease-out) var(--openbot-duration-fast) both;
}
.voice-waveform {
  display: flex;
  min-width: 0;
  height: 20px;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, currentColor 24px);
}
.voice-waveform-track {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 3px;
}
.voice-waveform-dot {
  width: 3px;
  height: calc(3px + var(--voice-level, 0) * 15px);
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-pill);
  background: currentColor;
}
.voice-recording-cancel, .voice-recording-finish {
  display: grid;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  padding: 0;
  background: transparent;
  transition: background-color var(--openbot-duration-hover) var(--openbot-ease-out), color var(--openbot-duration-hover) var(--openbot-ease-out), transform var(--openbot-duration-fast) var(--openbot-ease-out);
}
.voice-recording-cancel {
  color: var(--openbot-text-secondary);
}
.voice-recording-finish {
  color: var(--openbot-bg-sidebar);
  animation: voice-morph-content-in var(--openbot-duration-slow) var(--openbot-ease-out) var(--openbot-duration-overlay) both;
}
.voice-morph .voice-recording-cancel:hover:not(:disabled) {
  background: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-primary) 10%, transparent);
  }
  color: var(--openbot-text-primary);
}
.voice-recording-cancel:active, .voice-recording-finish:active {
  transform: scale(0.94);
}
.voice-recording-cancel svg, .voice-recording-finish svg {
  width: 14px;
  height: 14px;
}
.voice-recording-finish svg {
  stroke-width: 3;
}
@keyframes voice-morph-content-in {
  from {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .voice-morph *, .voice-recording-status, .voice-recording-finish {
    transition: none;
    animation: none;
  }
}
.dictation-button:hover:not(:disabled) {
  background: var(--openbot-border);
  color: var(--openbot-text-primary);
}
.composer-button svg, .dictation-button svg, .voice-button svg {
  width: 16px;
  height: 16px;
}
.composer-spinner {
  animation: ui-spin 720ms linear infinite;
}
.voice-button {
  background: var(--openbot-text-primary);
  color: var(--openbot-bg-sidebar);
}
.voice-button-active {
  background: var(--openbot-text-primary);
  color: var(--openbot-bg-sidebar);
}
.voice-button:hover:not(:disabled), .voice-button.ui-button:hover:not(:disabled), .voice-morph .voice-recording-finish:hover:not(:disabled) {
  background: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-primary) 84%, var(--openbot-bg-sidebar));
  }
  color: var(--openbot-bg-sidebar);
}
.composer-input-label, .composer-editor-root {
  --composer-editor-max-height: max(48px, 33dvh);
}
.composer-input-label {
  display: flex;
  min-width: 0;
  min-height: 48px;
  max-height: var(--composer-editor-max-height);
  align-items: flex-end;
  cursor: text;
}
.composer-toolbar {
  display: flex;
  min-height: 28px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.composer[data-compact] .composer-input-label {
  grid-column: 2;
  grid-row: 1;
  min-height: 28px;
}
.composer[data-compact] .composer-toolbar {
  display: contents;
}
.composer[data-compact] .composer-toolbar > .composer-button {
  grid-column: 1;
  grid-row: 1;
}
.composer[data-compact] .composer-toolbar > .composer-primary-actions {
  grid-column: 3;
  grid-row: 1;
}
.composer[data-compact] .composer-editor-root, .composer[data-compact] .composer-editor-surface {
  min-height: 28px;
}
.composer[data-compact] .composer-editor-surface {
  padding: 4px 0;
}
.composer[data-compact] .composer-editor-placeholder {
  top: 4px;
  left: 0;
}
.composer[data-has-attachments] .composer-input-label, .composer[data-has-attachments] .composer-editor-root, .composer[data-has-attachments] .composer-editor-surface {
  min-height: 28px;
}
.composer[data-has-attachments] .composer-editor-surface {
  padding: 4px;
}
.composer[data-has-attachments] .composer-editor-placeholder {
  top: 4px;
}
.composer-editor-root {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  max-height: var(--composer-editor-max-height);
  cursor: text;
}
.composer-editor-surface {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  min-height: 48px;
  max-height: var(--composer-editor-max-height);
  margin: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  resize: none;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 2px 4px 8px;
  caret-color: var(--openbot-text-primary);
  color: var(--openbot-text-primary);
  cursor: text;
  font-size: var(--openbot-text-lg);
  line-height: 20px;
  white-space: pre-wrap;
  word-break: break-word;
  user-select: text;
}
.composer-editor-surface[aria-disabled="true"] {
  pointer-events: none;
}
.composer-editor-root[data-dictating] > [role="textbox"] {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.composer-dictation-draft {
  display: inline;
}
.composer-dictation-word {
  animation: composer-dictation-word-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
  transition: color var(--openbot-duration-slow) var(--openbot-ease-out);
}
.composer-dictation-word[data-interim] {
  color: var(--openbot-text-muted);
}
.composer-dictation-caret {
  display: inline-block;
  width: 2px;
  height: 16px;
  margin-left: 2px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
  vertical-align: -3px;
  animation: composer-dictation-caret 1s ease-in-out infinite;
}
.composer-dictation[data-final] .composer-dictation-caret {
  display: none;
}
@keyframes composer-dictation-word-in {
  from {
    opacity: 0;
    filter: blur(2px);
  }
}
@keyframes composer-dictation-caret {
  50% {
    opacity: 0.2;
  }
}
@media (prefers-reduced-motion: reduce) {
  .composer-dictation-word, .composer-dictation-caret {
    transition: none;
    animation: none;
  }
}
.composer-editor-placeholder {
  position: absolute;
  top: 2px;
  left: 4px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-lg);
  line-height: 20px;
  pointer-events: none;
  user-select: none;
}
.composer-editor-root[data-size="compact"], .composer-editor-root[data-size="compact"] .composer-editor-surface {
  min-height: 28px;
}
.composer-editor-root[data-size="compact"] .composer-editor-surface {
  padding: 4px 0;
}
.composer-editor-root[data-size="compact"] .composer-editor-placeholder {
  top: 4px;
  left: 0;
}
.composer-mention-token.composer-tag-unavailable {
  border: 1px dashed var(--openbot-border-strong);
  background: transparent;
  padding-left: var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
}
.composer-file-reference {
  height: 24px;
  cursor: pointer;
  user-select: none;
}
.mention-picker {
  --mention-picker-overlap: 14px;
  --mention-picker-side-inset: calc(var(--openbot-space-1-5) + 12px);
  --mention-picker-row-height: 29px;
  --mention-picker-gutter: 5px;
  --mention-picker-visible-rows: 7;
  position: absolute;
  z-index: 10;
  right: var(--mention-picker-side-inset);
  bottom: calc(var(--mention-picker-bottom, 0px) - var(--mention-picker-overlap));
  left: var(--mention-picker-side-inset);
  border: 1px solid var(--openbot-queue-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-queue-surface);
  padding-bottom: var(--mention-picker-overlap);
  color: var(--openbot-queue-text);
  box-shadow: none;
  transform-origin: bottom center;
  animation: mention-picker-in var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1) both;
}
.mention-picker-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  height: calc(var(--mention-picker-rows, 0) * var(--mention-picker-row-height) + 2 * var(--mention-picker-gutter));
  max-height: calc( var(--mention-picker-visible-rows) * var(--mention-picker-row-height) + 2 * var(--mention-picker-gutter) );
  overflow-y: auto;
  padding: var(--mention-picker-gutter);
  overscroll-behavior: contain;
  scrollbar-width: none;
  transition: height var(--openbot-duration-normal) var(--openbot-ease-out);
  will-change: height;
}
.mention-picker-list::-webkit-scrollbar {
  display: none;
}
@keyframes mention-picker-in {
  from {
    opacity: 0;
    transform: translateY(5px) scaleY(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}
.mention-picker-option {
  display: flex;
  width: 100%;
  height: var(--mention-picker-row-height);
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  padding: 0 8px;
  color: var(--openbot-queue-text);
  text-align: left;
}
.mention-picker-file-option .attachment-reference-visual {
  width: 20px;
  height: 20px;
}
.mention-picker-option:hover, .mention-picker-option-active {
  background: var(--openbot-hover);
}
.mention-picker-option .agent-avatar {
  --agent-avatar-optical-offset: -2px;
  width: 20px;
  height: 20px;
}
.mention-picker-skill-icon {
  display: grid;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  place-items: center;
  color: var(--openbot-queue-action);
}
.mention-picker-skill-icon > svg {
  width: 15px;
  height: 15px;
}
.mention-picker-option > strong {
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  font-size: var(--openbot-text-lg);
  font-weight: 500;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mention-picker-description {
  min-width: 0;
  flex: 1 1 0;
  overflow: hidden;
  color: var(--openbot-queue-action);
  font-size: var(--openbot-text-md);
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mention-picker-slug {
  flex: 0 0 auto;
  color: var(--openbot-queue-action);
  font-size: var(--openbot-text-md);
  line-height: 18px;
  white-space: nowrap;
}
.mention-picker-status {
  display: flex;
  height: calc(var(--mention-picker-row-height) + 2 * var(--mention-picker-gutter));
  align-items: center;
  margin: 0;
  padding: 0 calc(var(--mention-picker-gutter) + 8px);
  color: var(--openbot-queue-action);
  font-size: var(--openbot-text-md);
  line-height: 18px;
}
.mention-picker-badge {
  margin-left: auto;
  flex: 0 0 auto;
  color: var(--openbot-queue-action);
}
.composer-attachments {
  position: relative;
  z-index: 11;
  display: flex;
  width: 100%;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 2px 0 4px;
}
.composer-attachment {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
}
.composer-attachment[data-kind="image"] {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  padding: 0;
}
.composer-attachment[data-kind="file"] {
  width: 220px;
  max-width: 100%;
  height: 52px;
  gap: 10px;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  padding: 7px 12px 7px 8px;
}
.composer-attachment-copy {
  display: block;
  min-width: 0;
  flex: 1;
}
.composer-attachment-copy strong, .composer-attachment-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.composer-attachment-copy strong {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: 500;
  line-height: 16px;
}
.composer-attachment-copy small {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 14px;
}
.composer-attachment-preview {
  display: grid;
  width: 36px;
  height: 36px;
  overflow: hidden;
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--openbot-radius-md);
  background: var(--file-reference-soft, var(--openbot-hover));
  color: var(--file-reference-color, var(--openbot-text-muted));
  font-size: var(--openbot-text-sm);
  font-weight: 700;
  line-height: 1;
}
.composer-attachment[data-kind="image"] .composer-attachment-preview {
  width: 100%;
  height: 100%;
  border-radius: var(--openbot-radius-media-preview);
}
.composer-attachment-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.message-attachments {
  display: grid;
  width: min(100%, 256px);
  gap: 7px;
  margin-top: 10px;
}
.message-attachment {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px 40px;
  min-width: 0;
  min-height: 56px;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface-raised);
  padding: 7px;
  transition: background-color var(--openbot-duration-hover) ease, border-color var(--openbot-duration-hover) ease;
}
[data-slot="bubble"]:not([data-variant="ghost"]) > [data-slot="bubble-content"] > .message-attachments:last-child {
  margin-bottom: var(--openbot-space-1);
}
[data-slot="bubble"]:not([data-variant="ghost"]) > [data-slot="bubble-content"] > .message-attachments-group:last-child {
  margin-bottom: var(--openbot-space-1);
}
[data-slot="bubble"]:not([data-variant="ghost"]) > [data-slot="bubble-content"] > .message-attachments:last-child .message-attachment {
  border-radius: var(--openbot-radius-bubble-inset);
}
.message-attachments-group {
  display: grid;
  width: min(100%, 256px);
  margin-top: var(--openbot-space-2);
  gap: var(--openbot-space-1-5);
}
.message-attachments-group .message-attachments {
  width: 100%;
  margin-top: 0;
}
.ui-button.attachment-preview-button {
  width: 100%;
  height: 40px;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  border: 0;
  background: transparent;
  padding: 0;
  color: inherit;
  text-align: left;
}
.attachment-preview-button:disabled {
  cursor: default;
}
.attachment-file-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.attachment-file-copy {
  display: grid;
  min-width: 0;
  gap: 1px;
}
.message-attachment strong {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: 560;
  line-height: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.message-attachment small {
  color: var(--openbot-text-readable);
  font-size: var(--openbot-text-sm);
  line-height: 15px;
}
.attachment-open-button {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  padding: 0;
  color: var(--openbot-text-muted);
  transition: background-color var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease, transform var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1);
}
.attachment-open-button svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}
.attachment-open-button:focus-visible, .attachment-preview-button:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}
.attachment-open-button:active {
  transform: scale(0.96);
}
@media (hover: hover) and (pointer: fine) {
  .message-attachment:hover {
    border-color: var(--openbot-border-strong);
    background: var(--openbot-bg-control-hover);
  }
  .attachment-open-button:hover {
    background: var(--openbot-bg-control-active);
    color: var(--openbot-text-primary);
  }
}
.agent-queue-panel {
  --queue-row-height: 29px;
  --queue-composer-overlap: 14px;
  --queue-row-inset-start: 13px;
  --queue-row-inset-end: 8px;
  --queue-row-gutter: 5px;
  position: relative;
  z-index: 10;
  overflow: visible;
  margin: 0 12px calc(-1 * var(--queue-composer-overlap));
  border: 1px solid var(--openbot-queue-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-queue-surface);
  padding-bottom: var(--queue-composer-overlap);
  box-shadow: none;
  animation: queue-panel-in var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1) both;
}
.agent-queue-slot {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.agent-queue-slot[data-open="false"] {
  grid-template-rows: 0fr;
}
.agent-queue-slot-inner {
  min-height: 0;
  overflow: hidden;
}
.agent-queue-panel-resize {
  min-height: 0;
}
.agent-queue-hold {
  margin: 0;
  padding: var(--queue-row-gutter) var(--queue-row-inset-end) 0 var(--queue-row-inset-start);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.message-attachments-group:has(.attachment-media-player), .message-attachments:has(.attachment-media-player) {
  width: min(100%, 360px);
}
.attachment-media-player {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  min-width: 0;
  border-radius: var(--openbot-radius-md);
}
.message-attachment[data-media] {
  grid-template-columns: minmax(0, 1fr) var(--openbot-control-sm) var(--openbot-control-sm);
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-3);
}
.message-attachment[data-media] .attachment-file-visual {
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-muted);
}
.message-attachment[data-media] .attachment-file-visual svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.message-attachment[data-media] .attachment-open-button {
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
}
.message-attachment[data-media] .attachment-open-button svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.message-attachment[data-media="audio"] .attachment-media-player {
  height: var(--openbot-control-xl);
}
.image-gallery {
  position: relative;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.image-gallery-item {
  position: absolute;
}
.image-gallery-tile {
  display: grid;
  width: 100%;
  height: 100%;
  overflow: hidden;
  place-items: center;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
  padding: 0;
  color: var(--openbot-text-muted);
}
.image-gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.image-gallery-tile:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}
.image-gallery-tile-missing > svg {
  width: var(--openbot-space-6);
  height: var(--openbot-space-6);
}
@media (hover: hover) and (pointer: fine) {
  .image-gallery-tile:not(:disabled):hover img {
    transform: scale(1.03);
  }
}
.ui-dialog-overlay.image-lightbox-backdrop {
  background: var(--openbot-bg-overlay);
  animation: none;
}
.ui-dialog-content.image-lightbox {
  position: fixed;
  z-index: calc(var(--openbot-layer-dialog) + 1);
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  color: var(--openbot-text-primary);
  outline: none;
  -webkit-app-region: no-drag;
}
.image-lightbox-chrome {
  animation: image-lightbox-fade-in var(--openbot-duration-overlay) var(--openbot-ease-out);
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}
.image-lightbox[data-closing] .image-lightbox-chrome {
  opacity: 0;
}
.image-lightbox-toolbar {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3) var(--openbot-space-4);
}
.image-lightbox-caption {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: var(--openbot-space-2);
}
.image-lightbox-name {
  overflow: hidden;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.image-lightbox-position {
  flex: none;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
.image-lightbox-actions {
  display: flex;
  flex: none;
  gap: var(--openbot-space-1);
}
.image-lightbox-stage {
  position: relative;
  min-height: 0;
  touch-action: pan-y;
}
.image-lightbox-track {
  position: absolute;
  inset: 0;
  will-change: transform;
}
.image-lightbox-slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  padding: 0 calc(var(--openbot-space-8) * 2);
  transform: translateX(calc(var(--image-lightbox-slide) * 100%));
}
.image-lightbox-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--openbot-radius-md);
  user-select: none;
  will-change: transform;
}
.image-lightbox-image-pending {
  opacity: 0;
}
.image-lightbox-error {
  margin: 0;
  color: var(--openbot-text-muted);
}
.image-lightbox-step {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control);
}
.image-lightbox-step-previous {
  left: var(--openbot-space-4);
}
.image-lightbox-step-next {
  right: var(--openbot-space-4);
}
.image-lightbox-strip {
  position: relative;
  display: flex;
  overflow-x: auto;
  justify-content: safe center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-3) var(--openbot-space-4) var(--openbot-space-4);
  scrollbar-width: none;
}
.image-lightbox-thumb {
  flex: none;
  width: var(--openbot-control-xl);
  height: var(--openbot-control-xl);
  overflow: hidden;
  border-radius: var(--openbot-radius-sm);
  padding: 0;
  opacity: 0.5;
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}
.image-lightbox-thumb[aria-current="true"] {
  box-shadow: 0 0 0 2px var(--openbot-text-primary);
  opacity: 1;
}
.image-lightbox-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.image-lightbox-thumb:focus-visible, .image-lightbox-step:focus-visible, .image-lightbox-action:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .image-lightbox-thumb:hover {
    opacity: 1;
  }
}
@media (max-width: 640px) {
  .image-lightbox-slide {
    padding: 0;
  }
  .image-lightbox-step {
    display: none;
  }
}
@keyframes image-lightbox-fade-in {
  from {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .image-gallery-tile img, .image-lightbox-chrome, .image-lightbox-thumb {
    animation: none;
    transition: none;
  }
}
.composer-wrap:has(.composer-attachment) .agent-queue-panel {
  margin-bottom: 0;
}
.agent-queue-panel-list {
  max-height: calc(7 * var(--queue-row-height) + 2 * var(--queue-row-gutter));
  overflow-y: auto;
  padding: var(--queue-row-gutter) var(--queue-row-inset-end) var(--queue-row-gutter) var(--queue-row-inset-start);
  overscroll-behavior: contain;
}
.agent-queue-item {
  --queue-drag-step: 0;
  position: relative;
  display: grid;
  height: var(--queue-row-height);
  min-height: 0;
  min-width: 0;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  margin: 0;
  border: 0;
  padding: 0;
  border-radius: var(--openbot-radius-md);
  color: var(--openbot-queue-text);
  cursor: grab;
  outline: 0;
  transform: translate3d(0, calc(var(--queue-drag-step) * var(--queue-row-height)), 0);
  transition: height var(--openbot-duration-slow) var(--openbot-ease-out), opacity var(--openbot-duration-fast) ease, transform var(--openbot-duration-slow) var(--openbot-ease-out);
}
.agent-queue-item-entering {
  animation: queue-item-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}
.agent-queue-item-removing {
  height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, -4px, 0) scale(0.985);
  will-change: height, opacity, transform;
}
.agent-queue-panel-dragging .agent-queue-item {
  will-change: transform;
}
.agent-queue-item::before {
  position: absolute;
  z-index: 0;
  inset: 0 calc(var(--queue-row-gutter) - var(--queue-row-inset-end)) 0 calc(var(--queue-row-gutter) - var(--queue-row-inset-start));
  border-radius: var(--openbot-radius-md);
  background: transparent;
  content: "";
  pointer-events: none;
  transition: background-color var(--openbot-duration-hover) ease;
}
.agent-queue-item > * {
  position: relative;
  z-index: 1;
}
.agent-queue-item:hover, .agent-queue-item:focus-visible, .agent-queue-item-drag-over {
  z-index: 1;
}
.agent-queue-item:hover::before, .agent-queue-item:focus-visible::before {
  background: var(--openbot-hover);
}
.agent-queue-panel-dragging .agent-queue-item:not(.agent-queue-item-dragging):hover::before {
  background: transparent;
}
.agent-queue-item:focus-visible {
  box-shadow: 0 0 0 2px var(--openbot-border-focus);
}
.agent-queue-item-dragging {
  z-index: 0;
  cursor: grabbing;
  opacity: 0;
}
.agent-queue-item-dragging::before {
  background: transparent;
  box-shadow: none;
}
.agent-queue-drag-preview {
  position: fixed;
  z-index: var(--openbot-layer-dropdown);
  box-sizing: border-box;
  min-height: 31px;
  margin: 0;
  border: 1px solid var(--openbot-border-strong);
  background: var(--openbot-bg-surface-raised);
  box-shadow: var(--openbot-shadow-raised);
  opacity: 0.96;
  pointer-events: none;
  transform: none;
}
.agent-queue-drag-preview::before {
  display: none;
}
.agent-queue-item-steering {
  color: var(--openbot-text-muted);
}
.agent-queue-item-editing {
  color: var(--openbot-text-muted);
}
.agent-queue-editing-badge {
  flex: none;
  padding: 0 6px;
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 18px;
  white-space: nowrap;
}
.agent-queue-item-has-attachment {
  grid-template-columns: 14px 24px minmax(0, 1fr) auto;
}
.agent-queue-icon {
  display: grid;
  place-items: center;
  color: var(--openbot-queue-action);
}
.agent-queue-icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}
.agent-queue-attachment {
  display: grid;
  width: 24px;
  height: 24px;
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--openbot-queue-border);
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-bg-canvas);
  color: var(--openbot-queue-action);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-glyph-xs);
  line-height: 1;
}
.agent-queue-attachment img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.agent-queue-steer svg, .agent-queue-icon-button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}
.agent-queue-message {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: var(--openbot-text-lg);
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-queue-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--openbot-queue-action);
}
.agent-queue-steer, .agent-queue-icon-button {
  display: inline-flex;
  height: 26px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  padding: 0 4px;
  color: inherit;
  font-size: var(--openbot-text-lg);
  line-height: 18px;
  transition: background var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease;
}
.agent-queue-steer:hover:not(:disabled), .agent-queue-steer:focus-visible, .agent-queue-icon-button:hover:not(:disabled), .agent-queue-icon-button:focus-visible {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
  outline: 0;
}
.agent-queue-steer:disabled, .agent-queue-icon-button:disabled {
  cursor: default;
  opacity: 0.45;
}
.agent-queue-icon-button {
  width: 26px;
  padding: 0;
}
.agent-queue-icon-button.agent-queue-delete:hover:not(:disabled), .agent-queue-icon-button.agent-queue-delete:focus-visible {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
  opacity: 1;
}
@media (max-width: 620px) {
  .agent-queue-panel {
    margin-right: 2px;
    margin-left: 2px;
  }
  .agent-queue-steer {
    width: 26px;
    padding: 0;
  }
  .agent-queue-steer span {
    display: none;
  }
}
@keyframes queue-panel-in {
  from {
    opacity: 0;
    transform: translateY(5px) scale(0.995);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes queue-item-in {
  from {
    opacity: 0;
    transform: translate3d(0, -4px, 0) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}
.agent-tasks-mark {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  --task-list-glyph: 14px;
}
.agent-tasks-menu-title {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agent-task-chips {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--openbot-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.agent-task-chip-row {
  display: flex;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  gap: var(--openbot-space-1);
}
.agent-task-chip.ui-button {
  display: inline-flex;
  min-width: 0;
  max-width: min(100%, 560px);
  height: var(--openbot-control-md);
  align-items: center;
  gap: var(--openbot-space-2);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-pill);
  padding: 0 var(--openbot-space-2) 0 var(--openbot-space-3);
  font-weight: inherit;
  --task-list-glyph: 14px;
}
.agent-task-chip-title {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-task-chip-status {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-task-chip-chevron {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
}
.agent-task-chip-close.ui-button {
  display: grid;
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  color: var(--openbot-text-muted);
}
.agent-task-chip-close svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.agent-task-list {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--openbot-space-0-5);
  min-height: 0;
  overflow-y: auto;
  padding: var(--openbot-space-2);
}
.agent-task-list .agent-tasks-mark {
  width: 16px;
}
.agent-task-list-group {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-0-5);
  margin-top: var(--openbot-space-2);
}
.agent-task-list-day {
  margin: 0;
  padding: var(--openbot-space-1) var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: 500;
}
.agent-tasks-disclosure {
  color: var(--openbot-text-secondary);
}
.agent-tasks-disclosure .agent-tasks-icon {
  color: var(--openbot-text-muted);
  transition: transform var(--openbot-duration-fast) ease;
}
.agent-tasks-disclosure[aria-expanded="true"] .agent-tasks-icon {
  transform: rotate(90deg);
}
.agent-tasks-trigger-dot {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 5px;
  height: 5px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
}
.agent-tasks-panel .file-preview-header {
  --task-list-glyph: 16px;
}
.agent-tasks-panel-origin {
  margin: 0;
  padding: var(--openbot-space-3) var(--openbot-space-4) 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.agent-tasks-panel-queued {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  padding: 0 var(--openbot-space-4);
}
.agent-tasks-panel-queued-text {
  margin: 0;
  overflow: hidden;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-tasks-panel-note {
  margin: 0;
  border-top: 1px solid var(--openbot-border);
  padding: var(--openbot-space-3) var(--openbot-space-4);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.agent-tasks-panel .composer[data-compact] {
  grid-template-columns: minmax(0, 1fr) auto;
}
.agent-tasks-panel .composer[data-compact] > .composer-input-label {
  grid-column: 1;
}
.agent-tasks-panel .composer[data-compact] .composer-primary-actions {
  grid-column: 2;
}
@media (prefers-reduced-motion: reduce) {
  .agent-tasks-disclosure .agent-tasks-icon {
    transition: none;
  }
}
.side-question-empty {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-1-5);
  padding: var(--openbot-space-8) var(--openbot-space-4);
  text-align: center;
}
.side-question-empty > svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  margin-bottom: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  stroke-width: var(--openbot-icon-stroke);
}
.side-question-empty > strong {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  font-weight: 500;
}
.side-question-empty > p {
  max-width: 320px;
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.side-question-composer.composer[data-compact] {
  grid-template-columns: minmax(0, 1fr) auto;
}
.side-question-composer.composer[data-compact] > .composer-input-label {
  grid-column: 1;
}
.side-question-composer.composer[data-compact] .composer-primary-actions {
  grid-column: 2;
}
.speaking-bar {
  display: flex;
  width: min(560px, 100%);
  align-items: center;
  gap: var(--openbot-space-3);
  margin: 0 auto var(--openbot-space-2);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface-raised);
  box-shadow: var(--openbot-shadow-raised);
  padding: var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-2);
  animation: speaking-bar-in var(--openbot-duration-normal) var(--openbot-ease-out) both;
}
@keyframes speaking-bar-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}
.speaking-bar-avatar {
  --agent-avatar-optical-offset: calc(28px * -0.14);
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
}
.speaking-bar-waveform {
  max-width: 120px;
  flex: 0 0 auto;
  color: var(--openbot-accent);
}
.speaking-bar-caption {
  min-width: 0;
  flex: 1;
  margin: 0;
  overflow: hidden;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.voice-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: var(--openbot-space-4);
}
.voice-panel-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-0-5);
}
.voice-panel-name {
  margin: 0;
  font-size: var(--openbot-text-md);
  font-weight: 600;
}
.voice-panel-phase {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.voice-panel-stage {
  display: flex;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-8);
}
.voice-panel-presence {
  position: relative;
  display: grid;
  width: 140px;
  height: 140px;
  place-items: center;
  transform: scale(var(--voice-presence-scale, 1));
  transition: transform var(--openbot-duration-fast) linear, opacity var(--openbot-duration-normal) ease;
}
.voice-panel-presence::before {
  position: absolute;
  inset: -24px;
  border-radius: var(--openbot-radius-pill);
  background: radial-gradient(closest-side, var(--openbot-accent-soft), transparent);
  content: "";
  opacity: 0.5;
  transition: opacity var(--openbot-duration-normal) ease;
}
.voice-panel-presence[data-phase="speaking"]::before {
  opacity: 1;
}
.voice-panel-presence[data-phase="thinking"]::before {
  animation: voice-panel-think 1.6s var(--openbot-ease-in-out) infinite alternate;
}
@keyframes voice-panel-think {
  to {
    opacity: 0.15;
  }
}
.voice-panel-avatar {
  --agent-avatar-optical-offset: calc(112px * -0.14);
  position: relative;
  width: 112px;
  height: 112px;
}
.voice-panel-presence[data-muted] {
  opacity: 0.5;
}
.voice-panel-waveform {
  display: flex;
  width: 141px;
  color: var(--openbot-text-secondary);
  opacity: 0;
  transition: opacity var(--openbot-duration-normal) ease;
}
.voice-panel-waveform[data-phase] {
  opacity: 1;
}
.voice-panel-waveform[data-phase="speaking"] {
  color: var(--openbot-accent);
}
.voice-panel-captions {
  width: 100%;
  min-height: calc(var(--openbot-leading-xl) * 4);
  overflow-y: auto;
  text-align: center;
}
.voice-panel-caption {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-xl);
  line-height: var(--openbot-leading-xl);
}
.voice-panel-caption[data-empty] {
  color: var(--openbot-text-muted);
}
.voice-panel-error {
  color: var(--openbot-danger);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.voice-panel-controls {
  display: flex;
  justify-content: center;
  gap: var(--openbot-space-4);
}
.voice-panel-control {
  border-radius: var(--openbot-radius-pill);
  transition: background-color var(--openbot-duration-fast) ease, color var(--openbot-duration-fast) ease;
}
@media (prefers-reduced-motion: reduce) {
  .speaking-bar, .voice-panel-presence[data-phase="thinking"]::before {
    animation: none;
  }
  .voice-panel-presence {
    transform: none;
  }
}
.voice-player {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-top: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
}
.voice-player-toggle {
  flex: none;
  border-radius: var(--openbot-radius-pill);
}
.voice-player-toggle svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}
.voice-player-track {
  flex: none;
}
.voice-player-bars {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 24px;
}
.voice-player-bar {
  width: 2px;
  height: calc(3px + var(--voice-peak, 0) * 17px);
  border-radius: var(--openbot-radius-pill);
  background: currentColor;
  opacity: 0.45;
}
.voice-player-bar[data-played] {
  background: var(--openbot-accent);
  opacity: 1;
}
.voice-player-time {
  min-width: 3ch;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
.conversation-panel:has(.settings-panel) .conversation-header, .conversation-panel:has(.settings-panel) .conversation-scroll, .conversation-panel:has(.settings-panel) .composer-wrap {
  width: calc(100% - var(--settings-panel-width, 296px));
}
.conversation-panel:has(.settings-panel) .chat-search {
  right: calc(var(--settings-panel-width, 296px) + 16px);
  max-width: calc(100% - var(--settings-panel-width, 296px) - 32px);
}
.conversation-panel:has(#browser-side-panel) .chat-search, .conversation-panel:has(#file-preview-panel) .chat-search {
  right: calc(var(--browser-panel-width, 380px) + 16px);
  max-width: calc(100% - var(--browser-panel-width, 380px) - 32px);
}
.conversation-panel:has(#browser-side-panel) .conversation-header, .conversation-panel:has(#browser-side-panel) .conversation-scroll, .conversation-panel:has(#browser-side-panel) .composer-wrap, .conversation-panel:has(#file-preview-panel) .conversation-header, .conversation-panel:has(#file-preview-panel) .conversation-scroll, .conversation-panel:has(#file-preview-panel) .composer-wrap {
  width: 100%;
}
@keyframes message-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes agent-activity-dot {
  0%, 60%, 100% {
    opacity: 0.34;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-2px);
  }
}
@keyframes agent-picker-in {
  from {
    opacity: 0;
    transform: translateY(-3px) scale(0.995);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes settings-panel-in {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes browser-control-pulse {
  0%, 100% {
    opacity: 0.55;
    transform: scale(0.88);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}
@media (prefers-reduced-motion: reduce) {
  .browser-panel, .remote-desktop-workspace, .message-entry, .chat-action-entry-animated, .agent-activity-entry, .agent-activity-content, .agent-activity-avatar, .agent-row-thinking-dots i, .agent-row-agent-status-responded, .agent-row-agent-status-unread, .mention-picker, .mention-picker-list, .settings-panel {
    animation: none;
    transition: none;
  }
  .agent-activity-avatar, .agent-activity-entry[data-state="exiting"] .agent-activity-avatar {
    transform: none;
  }
  .agent-queue-item {
    animation: none;
    transition: none;
  }
  .agent-queue-panel {
    transition: none;
  }
  .agent-queue-slot {
    transition: none;
  }
  .agent-queue-panel-resize, .message-content-resize {
    will-change: auto;
  }
  .computer-control-dot {
    animation: none;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes modal-in {
  from {
    opacity: 0;
    transform: scale(0.97) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.attachment-drop-overlay {
  position: absolute;
  z-index: 60;
  inset: 12px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px dashed color-mix(in srgb, var(--accent) 70%, var(--openbot-text-primary));
  }
  border-radius: var(--openbot-radius-lg);
  background: var(--background);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--background) 38%, transparent);
  }
  color: var(--text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: 650;
  backdrop-filter: blur(3px);
  pointer-events: none;
}
.side-panel-header {
  position: absolute;
  z-index: 16;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
  width: var(--side-panel-width, 380px);
  height: var(--left-header-height, 38px);
  min-width: 0;
  padding: 0 var(--openbot-space-2);
  container: side-panel-header / inline-size;
}
.side-panel-header::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: var(--openbot-icon-lg);
  translate: 0 -50%;
  background: var(--openbot-border-strong);
  content: "";
  pointer-events: none;
}
.side-panel-tabs {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--openbot-space-1);
  min-width: 0;
}
.side-panel-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--openbot-space-0-5);
  color: var(--openbot-text-muted);
}
.side-panel-actions svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.side-panel-tab {
  position: relative;
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: var(--openbot-space-1-5);
  min-width: 0;
  height: var(--openbot-control-sm);
  padding: 0 var(--openbot-space-2) 0 var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-md);
  color: var(--openbot-text-secondary);
}
.side-panel-tab:hover {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}
.side-panel-tab[data-selected] {
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
}
.side-panel-tab + .side-panel-tab::before {
  position: absolute;
  top: 50%;
  left: calc(var(--openbot-space-1) / -2 - 0.5px);
  width: 1px;
  height: var(--openbot-icon-lg);
  translate: 0 -50%;
  background: var(--openbot-border-strong);
  content: "";
  pointer-events: none;
}
.side-panel-tab:is([data-selected], :hover)::before, .side-panel-tab:is([data-selected], :hover) + .side-panel-tab::before {
  opacity: 0;
}
.side-panel-tab-select {
  display: block;
  height: auto;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 0;
  cursor: pointer;
}
.side-panel-tab-select:hover:not(:disabled):not([data-disabled]) {
  background: transparent;
  color: inherit;
}
.side-panel-tab-close {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  padding: 0;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.side-panel-tab-icon, .side-panel-tab-x {
  grid-area: 1 / 1;
}
.side-panel-tab-icon {
  display: grid;
  opacity: 0.7;
}
.side-panel-tab-icon svg, .side-panel-tab-x {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.side-panel-tab-x {
  opacity: 0;
}
.side-panel-tab:is(:hover, :focus-within) .side-panel-tab-close {
  background: var(--openbot-bg-control-hover);
}
.side-panel-tab:is(:hover, :focus-within) .side-panel-tab-icon {
  opacity: 0;
}
.side-panel-tab:is(:hover, :focus-within) .side-panel-tab-x {
  opacity: 1;
}
.side-panel-tab-close:hover:not(:disabled):not([data-disabled]) {
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
}
.side-panel-tab-select:focus-visible {
  box-shadow: var(--openbot-focus-ring);
  outline: none;
}
@container side-panel-header (max-width: 480px) {
  .side-panel-tabs:has(> .side-panel-tab:nth-child(4)) {
    --side-panel-tabs-compact: 1;
  }
}
@container side-panel-header (max-width: 360px) {
  .side-panel-tabs:has(> .side-panel-tab:nth-child(3)) {
    --side-panel-tabs-compact: 1;
  }
}
@container style(--side-panel-tabs-compact: 1) {
  .side-panel-tab:not([data-selected]) {
    padding: 0 var(--openbot-space-1-5);
  }
  .side-panel-tab:not([data-selected]) .side-panel-tab-select {
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }
  .side-panel-tab:not([data-selected]) .side-panel-tab-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .side-panel-tab:not([data-selected], :focus-within) .side-panel-tab-close {
    background: transparent;
  }
  .side-panel-tab:not([data-selected], :focus-within) .side-panel-tab-icon {
    opacity: 0.7;
  }
  .side-panel-tab:not([data-selected], :focus-within) .side-panel-tab-x {
    opacity: 0;
  }
}
.side-panel-docked > :is(.browser-panel, .settings-panel) {
  top: var(--left-header-height, 38px);
}
.app-frame-edge .side-panel-docked > :is(.browser-panel, .settings-panel)::before {
  top: -1px;
}
.side-panel-docked :is(.side-panel-pane-header, .side-panel-pane-title, .side-panel-pane-close) {
  display: none;
}
.side-panel-docked .settings-panel-header > .side-panel-pane-close {
  display: inline-flex;
  visibility: hidden;
}
.side-panel-empty {
  justify-content: center;
}
.side-panel-launcher {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1-5);
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  padding: var(--openbot-space-6);
}
.side-panel-launch {
  justify-content: flex-start;
  gap: var(--openbot-space-3);
}
.side-panel-maximized > :is(.browser-panel, .settings-panel, .side-panel-header) {
  width: 100%;
}
.side-panel-maximized > .side-panel-header::before, .side-panel-maximized .right-panel-resizer {
  display: none;
}
.side-panel-maximized > :is(.conversation-header, .conversation-scroll, .composer-wrap) {
  visibility: hidden;
}
:is(.side-panel-launch, .side-panel-menu-item) svg {
  flex: none;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
}
.composer-notice {
  --notice-composer-overlap: 14px;
  --notice-inset: 6px;
  --notice-accent: var(--openbot-warning);
  --notice-surface: var(--openbot-warning-soft);
  position: relative;
  z-index: 10;
  display: flex;
  margin: 0 12px calc(-1 * var(--notice-composer-overlap));
  padding: var(--notice-inset) var(--notice-inset) calc(var(--notice-inset) + var(--notice-composer-overlap)) 12px;
  align-items: center;
  gap: 10px;
  border: none;
  border-radius: var(--openbot-radius-card);
  background: var(--notice-surface);
  animation: queue-panel-in var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1) both;
}
.composer-notice[data-tone="danger"] {
  --notice-accent: var(--openbot-danger-text);
  --notice-surface: var(--openbot-danger-soft);
}
.composer-notice:not(:has(.ui-button)) {
  --notice-inset: 8px;
  padding-right: 12px;
}
.composer-notice-icon {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--notice-accent);
}
.composer-notice .ui-button {
  border-color: transparent;
  background: var(--notice-accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--notice-accent) 14%, transparent);
  }
  color: var(--notice-accent);
}
@media (hover: hover) {
  .composer-notice .ui-button:hover:not(:disabled):not([data-disabled]) {
    background: var(--notice-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--notice-accent) 24%, transparent);
    }
    color: var(--notice-accent);
  }
}
.composer-notice-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 0;
}
.composer-notice-copy strong {
  color: var(--notice-accent);
  font-size: var(--openbot-text-sm);
  font-weight: 600;
  line-height: 1.35;
}
.composer-notice-copy p {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: 1.35;
}
.composer-notice-dismiss {
  flex: none;
  align-self: flex-start;
}
.composer-notice .composer-notice-dismiss {
  background: transparent;
  color: var(--notice-accent);
}
@media (hover: hover) {
  .composer-notice .composer-notice-dismiss:hover:not(:disabled):not([data-disabled]) {
    background: var(--notice-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--notice-accent) 18%, transparent);
    }
  }
}
.composer-notice .composer-notice-code-fallback {
  flex: none;
  border-color: var(--notice-accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--notice-accent) 45%, transparent);
  }
  background: transparent;
}
.context-meter-trigger {
  color: var(--openbot-text-muted);
}
.context-meter-ring {
  width: var(--openbot-icon-md);
}
.context-meter-ring .ui-radial-progress-track, .context-meter-ring .ui-radial-progress-indicator {
  stroke-width: 6;
}
.context-meter-ring[data-level="quiet"] {
  --ui-radial-progress-color: var(--openbot-text-dim);
}
.context-meter-ring[data-level="normal"] {
  --ui-radial-progress-color: var(--openbot-text-secondary);
}
.context-meter-ring[data-compacting] {
  --ui-radial-progress-color: var(--openbot-warning);
}
.context-meter-ring[data-compacting] .ui-radial-progress-chart {
  animation: ui-spin 900ms linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .context-meter-ring[data-compacting] .ui-radial-progress-chart {
    animation: none;
  }
}
.context-meter-popover {
  z-index: var(--openbot-layer-popover);
  display: flex;
  width: 280px;
  flex-direction: column;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3) var(--openbot-space-4) var(--openbot-space-4);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  transform-origin: var(--kb-popover-content-transform-origin);
  animation: ui-menu-in var(--ui-menu-duration) var(--ui-menu-ease) both;
}
.context-meter-popover:not([data-expanded]) {
  animation: ui-menu-out var(--ui-menu-duration) var(--ui-menu-ease) both;
}
@media (prefers-reduced-motion: reduce) {
  .context-meter-popover, .context-meter-popover:not([data-expanded]) {
    animation: none;
  }
}
.context-meter-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.context-meter-title {
  margin: 0;
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
}
.context-meter-percent {
  color: var(--openbot-text-secondary);
  font-variant-numeric: tabular-nums;
}
.context-meter-percent[data-level="warning"] {
  color: var(--openbot-warning-text);
}
.context-meter-percent[data-level="danger"] {
  color: var(--openbot-danger-text);
}
.context-meter-tokens, .context-meter-note {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.context-meter-footer {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1-5);
  margin: 0 calc(-1 * var(--openbot-space-4)) calc(-1 * var(--openbot-space-4));
  border-top: 1px solid var(--openbot-border);
  padding: var(--openbot-space-1-5);
}
.context-meter-new-chat {
  width: 100%;
  height: var(--openbot-control-md);
  justify-content: flex-start;
  gap: var(--openbot-space-2);
  border-radius: var(--ui-menu-item-radius);
  padding: 0 var(--ui-menu-inset);
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-regular);
}
.context-meter-new-chat:is(:hover, :focus-visible):not(:disabled) {
  background: var(--ui-menu-item-hover);
}
.context-meter-new-chat > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  color: var(--openbot-text-secondary);
}
.context-meter-tokens {
  margin-top: calc(-1 * var(--openbot-space-2));
  font-variant-numeric: tabular-nums;
}
.context-usage-bar {
  position: relative;
  display: flex;
  height: var(--openbot-space-2);
  gap: var(--openbot-space-0-5);
}
.context-usage-segment {
  min-width: var(--openbot-space-1);
  flex-basis: 0;
  border-radius: var(--openbot-radius-xs);
  background: var(--context-color);
}
.context-usage-segment[data-category="used"] {
  --context-color: var(--openbot-text-secondary);
}
.context-meter-popover:has(.context-meter-percent[data-level="warning"]) [data-category="used"] {
  --context-color: var(--openbot-warning);
}
.context-meter-popover:has(.context-meter-percent[data-level="danger"]) [data-category="used"] {
  --context-color: var(--openbot-danger);
}
.context-usage-segment[data-category="free"] {
  min-width: 0;
  background: var(--openbot-border);
}
.context-meter-popover [data-category="systemPrompt"] {
  --context-color: var(--openbot-chart-storage-workspaces);
}
.context-meter-popover [data-category="memoryFiles"] {
  --context-color: var(--openbot-chart-storage-chats);
}
.context-meter-popover [data-category="tools"] {
  --context-color: var(--openbot-chart-storage-downloads);
}
.context-meter-popover [data-category="skills"] {
  --context-color: var(--openbot-chart-storage-runtimes);
}
.context-meter-popover [data-category="toolResults"] {
  --context-color: var(--openbot-chart-storage-files);
}
.context-meter-popover [data-category="messages"] {
  --context-color: var(--openbot-text-secondary);
}
.context-meter-popover [data-category="other"] {
  --context-color: var(--openbot-text-dim);
}
.context-meter-popover .context-meter-category[data-category="free"] {
  --context-color: var(--openbot-border);
}
.context-meter-categories {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.context-meter-category {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-0-5) 0;
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.context-meter-swatch {
  width: var(--openbot-space-2);
  height: var(--openbot-space-2);
  align-self: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--context-color);
}
.context-meter-category-label {
  overflow: hidden;
  color: var(--openbot-text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.context-meter-category-tokens {
  color: var(--openbot-text-primary);
  font-variant-numeric: tabular-nums;
}
.context-usage-threshold {
  position: absolute;
  top: calc(-1 * var(--openbot-space-1));
  bottom: calc(-1 * var(--openbot-space-1));
  width: var(--openbot-space-0-5);
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-text-primary);
  transform: translateX(-50%);
}
.context-compaction-notice[data-tone="success"] {
  --notice-accent: var(--openbot-success-text);
  --notice-surface: var(--openbot-success-soft);
}
.context-compaction-notice[data-leaving] {
  animation: context-compaction-notice-out var(--openbot-duration-toast-exit) var(--openbot-ease-in-out) forwards;
}
@keyframes context-compaction-notice-out {
  to {
    opacity: 0;
    transform: translateY(100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .context-compaction-notice[data-leaving] {
    animation: context-compaction-notice-fade 1ms forwards;
  }
}
@keyframes context-compaction-notice-fade {
  to {
    opacity: 0;
  }
}
.context-compaction-notice .composer-notice-icon {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.context-compaction-notice-copy {
  min-width: 0;
  flex: 1;
  margin: 0;
  overflow: hidden;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.context-compaction-notice-copy strong {
  color: var(--notice-accent);
  font-weight: 600;
}
.context-compaction-notice:has(.composer-notice-dismiss) {
  --notice-inset: 8px;
}
.context-compaction-notice .composer-notice-dismiss {
  width: var(--openbot-control-xs);
  height: var(--openbot-control-xs);
  min-height: 0;
  margin-block: calc(-1 * var(--openbot-space-1));
  padding: 0;
  align-self: center;
}
.context-compaction-notice-percent {
  flex: none;
  color: var(--notice-accent);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}
.context-compaction-body {
  display: flex;
  min-width: 0;
  max-width: 100%;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-2);
}
.context-compaction-icon {
  display: inline-grid;
  place-items: center;
}
.context-compaction-icon svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.context-compaction-marker[data-status="completed"] .context-compaction-icon {
  color: var(--openbot-success-text);
}
.context-compaction-marker[data-status="failed"] .context-compaction-icon {
  color: var(--openbot-warning-text);
}
.context-compaction-marker .chat-action-marker-content {
  flex-wrap: wrap;
  justify-content: center;
  min-width: 0;
  white-space: normal;
}
.context-compaction-detail {
  white-space: normal;
}
.conversation-interaction-card {
  box-sizing: border-box;
  min-width: 0;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
  padding: var(--openbot-space-4);
}
.conversation-interaction-header {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--openbot-space-3);
}
.conversation-interaction-header > :is(strong, h2) {
  min-width: 0;
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-lg);
  overflow-wrap: anywhere;
}
.conversation-interaction-status[data-slot="badge"] {
  flex: 0 0 auto;
  gap: var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-md);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.conversation-interaction-status svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.conversation-interaction-spinner {
  animation: ui-spin 1s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .conversation-interaction-spinner {
    animation: none;
  }
}
.browser-takeover-card {
  display: flex;
  width: min(540px, 100%);
  margin: var(--openbot-space-3) 0 var(--openbot-space-6);
  flex-direction: column;
  gap: var(--openbot-space-4);
  animation: browser-takeover-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}
.browser-takeover-copy {
  margin-top: calc(-1 * var(--openbot-space-2));
  display: grid;
  gap: var(--openbot-space-1);
}
.browser-takeover-copy p {
  margin: 0;
  max-width: 54ch;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-md);
}
.browser-takeover-preview {
  min-width: 0;
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-canvas);
}
.browser-takeover-preview-bar {
  display: flex;
  height: var(--openbot-control-sm);
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-1-5);
  border-bottom: 1px solid var(--openbot-border);
  background: var(--openbot-bg-control);
  padding: 0 var(--openbot-space-3);
  color: var(--openbot-text-secondary);
}
.browser-takeover-preview-bar svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.browser-takeover-preview-bar span, .browser-takeover-preview-bar small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser-takeover-preview-bar span {
  min-width: 0;
  flex: 1;
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.browser-takeover-preview-bar small {
  max-width: 42%;
  color: var(--openbot-text-readable);
  font-size: var(--openbot-text-sm);
}
.browser-takeover-preview-viewport {
  display: grid;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  place-items: stretch;
  background: var(--openbot-bg-control);
}
.browser-takeover-preview-open.ui-button {
  display: grid;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.browser-takeover-preview-open > * {
  grid-area: 1 / 1;
}
.browser-takeover-preview-open-label {
  display: inline-flex;
  align-items: center;
  justify-self: center;
  align-self: center;
  gap: var(--openbot-space-1);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-canvas);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}
.browser-takeover-preview-open-label > svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  stroke-width: var(--openbot-icon-stroke);
}
.browser-takeover-preview-open:hover .browser-takeover-preview-open-label, .browser-takeover-preview-open:focus-visible .browser-takeover-preview-open-label {
  opacity: 1;
}
.browser-takeover-preview-viewport img, .browser-takeover-preview-skeleton {
  width: 100%;
  height: 100%;
}
.browser-takeover-preview-viewport img {
  display: block;
  object-fit: cover;
}
.browser-takeover-preview-fallback {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  padding: var(--openbot-space-6);
  text-align: center;
}
.browser-takeover-preview-fallback svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  margin-bottom: var(--openbot-space-1);
  stroke-width: var(--openbot-icon-stroke);
}
.browser-takeover-preview-fallback strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser-takeover-preview-fallback span {
  max-width: 100%;
  overflow: hidden;
  color: var(--openbot-text-readable);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser-takeover-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.browser-takeover-actions .ui-button {
  transition: transform var(--openbot-duration-fast) var(--openbot-ease-out);
}
.browser-takeover-actions .ui-button:active:not(:disabled) {
  transform: scale(0.97);
}
@keyframes browser-takeover-in {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.question-prompt-bubble.ui-bubble {
  width: min(540px, 100%);
  max-width: 100%;
}
.question-prompt-bubble > .ui-bubble-content {
  width: 100%;
  border-color: var(--openbot-border);
  background: var(--openbot-bg-canvas);
}
.question-prompt-complete {
  min-width: 0;
  display: grid;
  gap: var(--openbot-space-3);
}
.question-prompt-complete-header, .question-prompt-complete-status {
  display: flex;
  align-items: center;
}
.question-prompt-complete-header {
  min-width: 0;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  min-height: 24px;
}
.question-prompt-complete-status {
  min-width: 0;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-primary);
}
.question-prompt-complete-status svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  color: var(--openbot-success);
  stroke-width: var(--openbot-icon-stroke);
}
.question-prompt-complete:not([data-state="answered"]) .question-prompt-complete-status svg {
  color: var(--openbot-text-muted);
}
.question-prompt-complete-status strong {
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-lg);
  letter-spacing: var(--openbot-tracking-tight);
}
.question-prompt-complete-answers.ui-item-group {
  gap: var(--openbot-space-3);
  border: 0;
  border-radius: 0;
  background: transparent;
}
.question-prompt-complete-answers .ui-item {
  min-height: 0;
  border: 0;
  padding: 0;
}
.question-prompt-complete-answers .ui-item-title, .question-prompt-complete-answers .ui-item-description {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}
.question-prompt-complete-answers .ui-item-title {
  font-weight: var(--openbot-weight-regular);
}
.question-prompt-header {
  min-width: 0;
  min-height: var(--openbot-control-xs);
}
.question-prompt-header h2 {
  margin: 0;
  padding-top: var(--openbot-space-0-5);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-lg);
  letter-spacing: var(--openbot-tracking-tight);
}
.question-prompt-navigation {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-0-5);
}
.question-prompt-layout {
  position: relative;
  min-width: 0;
}
.question-prompt-navigation-root.ui-questionnaire {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--openbot-space-4);
}
.question-prompt-navigation-button.ui-button {
  width: 22px;
  height: 22px;
  min-height: 22px;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  background: transparent;
  padding: 0;
  color: var(--openbot-text-muted);
  transition: none;
}
.question-prompt-navigation-button.ui-button:hover:not(:disabled) {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}
.question-prompt-navigation-button.ui-button:focus-visible {
  background: var(--openbot-bg-control-hover);
  box-shadow: 0 0 0 1px var(--openbot-border-strong);
  color: var(--openbot-text-primary);
}
.question-prompt-navigation-button.ui-button:disabled {
  background: transparent;
  color: var(--openbot-text-dim);
  opacity: 0.52;
}
.question-prompt-navigation-button svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.question-prompt-navigation .ui-questionnaire-progress {
  min-width: 48px;
  padding-inline: var(--openbot-space-1);
  font-family: var(--openbot-font-sans);
  text-align: center;
}
.question-prompt-cancel {
  margin-left: var(--openbot-space-1);
}
.question-prompt-stage {
  min-width: 0;
  overflow: hidden;
  transition: height var(--page-slide-dur) var(--page-slide-ease);
}
.question-prompt-stage .question-prompt-page {
  bottom: auto;
  display: grid;
  gap: var(--openbot-space-3);
}
.question-prompt-stage:not([data-transitioning]) .question-prompt-page:not([aria-hidden="true"]) {
  position: relative;
}
.question-prompt-stage[data-preparing], .question-prompt-stage[data-preparing] .t-page {
  transition: none;
}
.question-prompt-options.ui-item-group {
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface);
}
.question-prompt-options > :is(.ui-questionnaire-choice, .question-prompt-custom-row) {
  transition: background-color var(--openbot-duration-hover) ease, box-shadow var(--openbot-duration-hover) ease;
}
.question-prompt-options > .ui-questionnaire-choice:hover:not([data-disabled]) {
  background: var(--openbot-bg-control-hover);
}
.question-prompt-options > .ui-questionnaire-choice:focus-within {
  outline: 1px solid var(--openbot-border-strong);
  outline-offset: -1px;
  background: var(--openbot-bg-control-hover);
}
.question-prompt-options > .ui-questionnaire-choice[data-checked] {
  background: var(--openbot-bg-control-active);
}
.question-prompt-options .ui-item {
  min-height: 48px;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-2) var(--openbot-space-3);
}
.question-prompt-options .ui-item-title, .question-prompt-options .ui-item-description {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
.question-prompt-options .ui-kbd {
  width: 20px;
  min-width: 20px;
  border-color: var(--openbot-border);
  background: var(--openbot-hover);
  color: var(--openbot-text-muted);
}
.question-prompt-options > .ui-questionnaire-choice[data-checked] .ui-kbd {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-secondary);
}
.question-prompt-choice-arrow {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  color: var(--openbot-text-muted);
  opacity: 0;
  transform: translateX(-3px);
  transition: opacity var(--openbot-duration-hover) ease, transform var(--openbot-duration-hover) var(--openbot-ease-out);
}
.question-prompt-choice-arrow svg {
  width: 100%;
  height: 100%;
  stroke-width: var(--openbot-icon-stroke);
}
.question-prompt-options > .ui-questionnaire-choice:is(:hover, :focus-within, [data-checked]) .question-prompt-choice-arrow {
  opacity: 1;
  transform: translateX(0);
}
.question-prompt-custom-row {
  min-width: 0;
  min-height: 44px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-1-5) var(--openbot-space-3);
}
.question-prompt-custom-row[data-selected] {
  background: var(--openbot-bg-control-active);
}
.question-prompt-custom-row:focus-within {
  background: var(--openbot-bg-control-hover);
  box-shadow: none;
}
.question-prompt-pencil {
  width: 20px;
  height: 20px;
  display: grid;
  align-self: center;
  place-items: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-hover);
  color: var(--openbot-text-muted);
}
.question-prompt-pencil svg {
  display: block;
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  transform: translateY(-0.5px);
}
.question-prompt-custom-row:focus-within .question-prompt-pencil {
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-secondary);
}
.question-prompt-custom-row .ui-questionnaire-input {
  width: 100%;
  min-height: 30px;
  border: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.question-prompt-custom-row .ui-questionnaire-input::placeholder {
  color: var(--openbot-text-muted);
}
.question-prompt-custom-row .ui-questionnaire-input:focus {
  outline: 0;
  box-shadow: none;
}
.question-prompt-inline-actions, .question-prompt-sending {
  display: flex;
  align-items: center;
}
.question-prompt-inline-actions {
  gap: var(--openbot-space-2);
}
.question-prompt-sending {
  gap: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  white-space: nowrap;
}
.question-prompt-inline-actions [data-slot="questionnaire-skip"] {
  min-height: 28px;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-pill);
  background: transparent;
  padding-inline: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
}
.question-prompt-inline-actions [data-slot="questionnaire-skip"]:hover:not(:disabled) {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}
.question-prompt-inline-actions [data-slot="questionnaire-skip"]:focus-visible {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-control-hover);
  box-shadow: 0 0 0 1px var(--openbot-border-strong);
  color: var(--openbot-text-primary);
}
.question-prompt-empty {
  min-width: 0;
  display: grid;
  gap: var(--openbot-space-0-5);
  padding: var(--openbot-space-1);
}
.question-prompt-empty strong {
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
}
.question-prompt-empty > span {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.question-prompt-history-entry {
  width: min(540px, 100%);
}
@media (max-width: 520px) {
  .question-prompt-bubble.ui-bubble {
    width: 100%;
  }
  .question-prompt-bubble > .ui-bubble-content {
    padding: var(--openbot-space-3);
  }
  .question-prompt-header {
    gap: var(--openbot-space-2);
  }
  .question-prompt-navigation .ui-questionnaire-progress {
    min-width: 42px;
    padding-inline: 0;
  }
  .question-prompt-sending {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}
@media (prefers-reduced-motion: reduce) {
  .question-prompt-stage {
    transition: none;
  }
}
.approval-card {
  display: flex;
  width: min(540px, 100%);
  margin: var(--openbot-space-3) 0 var(--openbot-space-6);
  flex-direction: column;
  gap: var(--openbot-space-4);
  animation: approval-card-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}
.approval-card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--openbot-space-2);
}
.approval-card-footer > :last-child {
  margin-inline-start: auto;
}
.approval-button {
  border-radius: var(--openbot-radius-pill);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-regular);
}
.approval-card-content {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-3);
}
.approval-card-content:empty {
  display: none;
}
.approval-command-block, .approval-detail-row, .approval-permissions {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface);
}
.approval-command-block code {
  display: block;
  overflow-x: auto;
  padding: var(--openbot-space-3);
  color: var(--openbot-text-secondary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-md);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.approval-cwd {
  border-bottom: 1px solid var(--openbot-border);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  color: var(--openbot-text-muted);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  overflow-wrap: anywhere;
}
.approval-detail-row {
  display: grid;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-3);
}
.approval-detail-label {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.approval-detail-row strong {
  color: var(--openbot-text-secondary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  overflow-wrap: anywhere;
}
.approval-permissions {
  display: grid;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-3);
}
.approval-permissions:empty {
  display: none;
}
.approval-permissions span {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  overflow-wrap: anywhere;
}
.approval-reason {
  margin: calc(-1 * var(--openbot-space-2)) 0 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
  overflow-wrap: anywhere;
}
@keyframes approval-card-in {
  from {
    opacity: 0;
    transform: translateY(5px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (max-width: 800px) {
  .direct-private-label {
    display: none;
  }
  .direct-message-list, .direct-composer-wrap {
    padding-right: 14px;
    padding-left: 14px;
  }
  .direct-message > .ui-message-content {
    max-width: 88%;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto;
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
  }
}
.ui-block-card {
  display: flex;
  max-width: 600px;
  flex-direction: column;
  gap: var(--openbot-space-3);
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-surface);
  transition: border-color var(--openbot-duration-slow) var(--openbot-ease-out);
}
.ui-block-card[data-danger] {
  border-color: var(--openbot-danger-border);
}
.ui-block-card[data-status="expired"], .ui-block-card[data-status="closed"] {
  color: var(--openbot-text-muted);
}
.ui-block-header {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--openbot-space-3);
}
.ui-block-heading {
  min-width: 0;
}
.ui-block-title {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-xl);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-xl);
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.ui-block-subtitle {
  margin: var(--openbot-space-0-5) 0 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.ui-block-status[data-slot="badge"] {
  flex: 0 0 auto;
  gap: var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-pill);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.ui-block-status svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.ui-block-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--openbot-space-3);
}
.ui-block-body:empty {
  display: none;
}
.ui-block-outcome {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
  margin: 0;
  padding: var(--openbot-space-2) var(--openbot-space-3);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-glass-surface);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.ui-block-outcome[data-status="answered"] {
  background: var(--openbot-success-soft);
  color: var(--openbot-success-text);
}
.ui-block-outcome svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
}
.ui-block-outcome-text {
  min-width: 0;
  overflow-wrap: anywhere;
}
.ui-block-footer {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.ui-block-error {
  min-width: 0;
  flex: 1 1 auto;
  margin: 0;
  color: var(--openbot-danger-text);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  overflow-wrap: anywhere;
}
.ui-block-skip {
  margin-inline-start: auto;
}
.ui-block-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--openbot-space-2);
}
.ui-block-actions-auto > button:last-of-type {
  margin-inline-start: auto;
}
.ui-block-confirm-step {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.ui-block-confirm-question {
  padding: 0;
  margin-bottom: var(--openbot-space-2);
  font-weight: var(--openbot-weight-medium);
}
.ui-block-hint, .ui-block-counter, .ui-block-sending {
  margin: 0;
  color: var(--openbot-text-dim);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.ui-block-sending {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
}
.ui-block-fields {
  display: grid;
  grid-template-columns: minmax(64px, max-content) minmax(0, 1fr);
  align-items: center;
  gap: var(--openbot-space-2) var(--openbot-space-3);
  margin: 0;
  font-size: var(--openbot-text-lg);
}
.ui-block-fields dt {
  color: var(--openbot-text-muted);
}
.ui-block-fields dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}
.ui-block-preview {
  position: relative;
  max-height: 6.5em;
  overflow: hidden;
  padding: var(--openbot-space-3);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-lg);
}
.ui-block-preview::after {
  position: absolute;
  inset: auto 0 0;
  height: 2.4em;
  background: linear-gradient(transparent, var(--openbot-bg-surface-raised));
  content: "";
  pointer-events: none;
}
.ui-block-preview-text {
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.ui-block-hold {
  position: relative;
  overflow: hidden;
  user-select: none;
  touch-action: none;
}
.ui-block-hold-fill {
  position: absolute;
  inset: 0;
  background: currentColor;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, currentColor 22%, transparent);
  }
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--openbot-duration-fast) var(--openbot-ease-out);
  pointer-events: none;
}
.ui-block-hold[data-holding] .ui-block-hold-fill {
  transform: scaleX(1);
  transition: transform var(--ui-block-hold-duration) linear;
}
.ui-block-hold-label {
  position: relative;
}
.ui-block-options {
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-card);
}
.ui-block-option {
  position: relative;
  display: grid;
  grid-template-columns: var(--openbot-control-xs) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3);
  cursor: pointer;
  transition: background var(--openbot-duration-fast) var(--openbot-ease-out);
}
.ui-block-option + .ui-block-option {
  border-top: 1px solid var(--openbot-border-strong);
}
.ui-block-option:hover {
  background: var(--openbot-hover);
}
.ui-block-option[data-checked] {
  background: var(--openbot-question-option-soft);
}
.ui-block-option[data-disabled] {
  cursor: default;
}
.ui-block-option[data-disabled]:not([data-checked]) {
  opacity: 0.5;
}
.ui-block-option:focus-within {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: -2px;
}
.ui-block-option .ui-block-option-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: inherit;
}
.ui-block-option-key {
  display: grid;
  width: var(--openbot-control-xs);
  height: var(--openbot-control-xs);
  place-items: center;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-muted);
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
}
.ui-block-option[data-checked] .ui-block-option-key {
  border-color: var(--openbot-question-option);
  background: var(--openbot-question-option);
  color: var(--openbot-text-on-light);
}
.ui-block-option-label {
  min-width: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-medium);
  overflow-wrap: anywhere;
}
.ui-block-option-meta {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-variant-numeric: tabular-nums;
}
.ui-block-quick {
  display: flex;
  max-width: 600px;
  flex-direction: column;
  gap: var(--openbot-space-2);
}
.ui-block-quick-title {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
}
.ui-block-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-2);
}
.ui-block-chip[data-faded] {
  opacity: 0.35;
}
.ui-block-chip[data-chosen] {
  border-color: var(--openbot-accent);
  background: var(--openbot-accent-soft);
  color: var(--openbot-text-primary);
  opacity: 1;
}
.ui-block-quick-text {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.ui-block-quick-text > :first-child {
  flex: 1 1 auto;
  min-width: 0;
}
.ui-block-form-fields {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--openbot-space-3);
}
.ui-block-field {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1-5);
}
.ui-block-field-label {
  padding: 0;
  margin-bottom: var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
}
.ui-block-required {
  margin-inline-start: var(--openbot-space-0-5);
  color: var(--openbot-danger-text);
}
.ui-block-field-error {
  margin: 0;
  color: var(--openbot-danger-text);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.ui-block-segmented {
  display: flex;
  gap: var(--openbot-space-0-5);
  padding: var(--openbot-space-0-5);
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface-raised);
}
.ui-block-segment {
  flex: 1 1 0;
  min-width: 0;
  color: var(--openbot-text-muted);
}
.ui-block-segment[aria-pressed="true"] {
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
}
@media (prefers-reduced-motion: reduce) {
  .ui-block-card, .ui-block-option, .ui-block-hold-fill {
    transition: none;
  }
}
.settings-panel, .browser-panel, .remote-desktop-workspace {
  background: var(--openbot-bg-canvas);
}
.composer-reply-preview {
  border-color: var(--openbot-border);
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-primary);
}
.message-reaction-pill {
  border-color: var(--openbot-border);
  background: transparent;
  color: var(--openbot-text-primary);
}
@media (hover: hover) and (pointer: fine) {
  .message-reaction-pill:not(.message-reaction-pill-readonly):hover {
    background: var(--openbot-hover);
  }
}
.composer, .direct-composer {
  background: var(--openbot-bg-surface);
}
.direct-composer > button:hover:not(:disabled) {
  background: var(--openbot-accent-hover);
}
.remote-desktop-stage, .remote-desktop-viewer {
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-secondary);
}
.remote-desktop-header {
  background: var(--openbot-bg-sidebar);
}
.voice-button:active, .voice-button-active:active {
  transform: scale(0.97);
}
.provider-model-search {
  height: var(--openbot-control-md);
  flex-shrink: 0;
  margin-bottom: var(--ui-menu-padding);
  border-color: transparent;
  border-radius: var(--ui-menu-item-radius);
  background: var(--ui-menu-item-hover);
  padding-inline: var(--ui-menu-inset);
  font-size: var(--openbot-text-md);
}
.provider-model-search:focus-visible {
  border-color: var(--ui-menu-edge);
}
.provider-model-scroll {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.provider-model-group {
  padding: var(--openbot-space-2) var(--ui-menu-inset) var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: 500;
}
.browser-preview-sidebar[hidden] {
  display: none;
}
.browser-preview-header {
  display: flex;
  height: var(--left-header-height, 38px);
  flex: 0 0 auto;
  align-items: center;
  gap: var(--openbot-space-1);
  padding: 0 var(--openbot-space-3);
  color: var(--openbot-text-secondary);
}
.browser-preview-header > span {
  flex: 1;
  font-size: var(--openbot-text-sm);
}
.browser-preview-header > .ui-button, .browser-preview-close {
  border-radius: var(--openbot-radius-sm);
}
.browser-preview-header > .ui-button:focus-visible, .browser-preview-close:focus-visible {
  outline: 1px solid var(--openbot-text-muted);
  outline-offset: 1px;
  box-shadow: none;
}
.browser-preview-sidebar .ui-button:active:not(:disabled):not([data-disabled]) {
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
}
.browser-preview-header > .ui-button > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.browser-preview-list {
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding: var(--openbot-space-2) var(--openbot-space-4) var(--openbot-space-4);
}
.browser-preview-list > .browser-empty-state {
  height: auto;
  justify-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-8) var(--openbot-space-4);
}
.browser-preview-list > .browser-empty-state > svg, .browser-preview-image > svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  color: var(--openbot-text-muted);
  stroke-width: var(--openbot-icon-stroke);
}
.browser-preview-list > .browser-empty-state > svg {
  margin-bottom: var(--openbot-space-1);
}
.browser-preview-list > .browser-empty-state > strong {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  font-weight: 500;
}
.browser-preview-list > .browser-empty-state > .ui-button {
  margin-top: var(--openbot-space-1);
}
.browser-preview-card {
  position: relative;
  margin-bottom: var(--openbot-space-4);
}
.browser-preview-open {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-1);
  color: var(--openbot-text-secondary);
  font-weight: 400;
}
.browser-preview-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-surface);
}
.browser-preview-image img, .browser-preview-loading {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.browser-preview-title {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--openbot-text-sm);
}
.browser-preview-open-label {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  line-height: 1;
  pointer-events: none;
  opacity: 0;
}
.browser-preview-open-label > svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  stroke-width: var(--openbot-icon-stroke);
}
.browser-preview-open:hover .browser-preview-open-label {
  opacity: 1;
}
.browser-preview-close {
  position: absolute;
  top: var(--openbot-space-2);
  right: var(--openbot-space-2);
  opacity: 0;
}
.browser-preview-close > svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  stroke-width: var(--openbot-icon-stroke);
}
.browser-preview-card:hover .browser-preview-close, .browser-preview-card:focus-within .browser-preview-close {
  opacity: 1;
}
.browser-secret-card {
  --otp-slot-border: var(--openbot-glass-border);
  --otp-slot-background: var(--openbot-glass-surface);
  --otp-slot-filled-background: var(--openbot-glass-surface-hover);
  --otp-slot-shadow: inset 0 1px 0 var(--openbot-glass-highlight);
  display: grid;
  gap: var(--openbot-space-4);
  color: var(--openbot-text-primary);
}
.browser-secret-card[data-variant="island"] {
  box-sizing: border-box;
  width: min(100%, 420px);
  min-width: 0;
  padding: var(--openbot-space-4);
  border: 1px solid var(--openbot-glass-border);
  border-radius: var(--openbot-radius-xl);
  background: var(--openbot-bg-glass);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-bg-glass), var(--openbot-bg-control) 60%);
  }
  box-shadow: var(--openbot-shadow-raised);
  backdrop-filter: blur(32px) saturate(1.4);
}
.browser-secret-header {
  display: flex;
  align-items: flex-start;
  gap: var(--openbot-space-3);
}
.browser-secret-close {
  flex: none;
  margin-left: auto;
}
.browser-secret-icon {
  display: grid;
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  flex: none;
  place-items: center;
  border: 1px solid var(--openbot-glass-border);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-glass-surface);
  box-shadow: inset 0 1px 0 var(--openbot-glass-highlight);
  color: var(--openbot-text-primary);
}
.browser-secret-glyph {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.browser-secret-heading {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-0-5);
}
.browser-secret-heading h2 {
  margin: 0;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
}
.browser-secret-heading p {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.browser-secret-origin {
  color: var(--openbot-text-secondary);
  font-weight: var(--openbot-weight-medium);
}
.browser-secret-code, .browser-secret-password {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-1-5);
}
:where(.browser-secret-password) > input {
  border-color: var(--openbot-glass-border);
  background: var(--openbot-glass-surface);
}
.browser-secret-error {
  margin: 0;
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
}
.browser-secret-footer {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
  padding-top: var(--openbot-space-3);
  border-top: 1px solid var(--openbot-glass-border);
}
.browser-secret-private {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.browser-secret-glyph-sm {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: none;
}
.browser-secret-card .browser-takeover-preview-viewport {
  width: 100%;
  max-height: 280px;
}
.browser-secret-card .browser-takeover-preview-viewport img {
  min-height: 0;
  object-fit: contain;
}
html:has(.browser-dock-surface), body:has(.browser-dock-surface), #root:has(.browser-dock-surface) {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
}
.browser-dock-surface {
  position: relative;
  width: 100%;
  height: 100%;
  background: transparent;
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
}
.browser-dock {
  position: absolute;
  bottom: var(--openbot-space-4);
  left: 50%;
  display: flex;
  width: min(640px, calc(100% - 2 * var(--openbot-space-6)));
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-2);
  isolation: isolate;
  translate: -50% 0;
}
.browser-dock-glass {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-0-5);
  border: 1px solid var(--openbot-glass-border);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-glass);
  box-shadow: var(--openbot-shadow-raised);
  backdrop-filter: blur(16px);
  color: var(--openbot-text-secondary);
}
.browser-dock-composer svg, .browser-dock-island-activity svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.browser-dock-island {
  position: relative;
  z-index: 4;
  box-sizing: border-box;
  max-width: 100%;
}
.browser-dock-island[data-budding] {
  z-index: 1;
}
.browser-dock-island:is([data-mode="reply"], [data-mode="secret"]) {
  width: 100%;
  border-radius: var(--openbot-radius-lg);
}
.browser-dock-island[data-mode="secret"] {
  width: min(100%, 420px);
  border-radius: var(--openbot-radius-xl);
  background: var(--openbot-bg-glass);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-bg-glass), var(--openbot-bg-control) 60%);
  }
  backdrop-filter: blur(32px) saturate(1.4);
}
.browser-dock-island-face {
  box-sizing: border-box;
  min-width: 0;
  flex: 1;
}
.browser-dock-island-face > .browser-secret-card {
  width: 100%;
  border: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
}
.browser-dock-island-activity {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  padding: var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-2);
  font-size: var(--openbot-text-sm);
  white-space: nowrap;
}
.browser-dock-island-leaving {
  pointer-events: none;
}
.browser-dock-island.browser-dock-island-ghost {
  position: absolute;
  z-index: 1;
  translate: -50% 0;
  pointer-events: none;
}
.browser-dock-spin {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: none;
  color: var(--openbot-text-muted);
  animation: ui-spin 1s linear infinite;
}
.browser-dock-status {
  display: inline-flex;
  min-width: 0;
  overflow: hidden;
  align-items: center;
  gap: var(--openbot-space-1-5);
}
.browser-dock-status > span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.browser-dock-handoff {
  flex: none;
  margin-left: auto;
  border-radius: var(--openbot-radius-pill);
}
.browser-dock-island-reply {
  display: grid;
  gap: var(--openbot-space-1-5);
  padding: var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-3) var(--openbot-space-3);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
}
.browser-dock-reply-header {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.browser-dock-reply-header > strong {
  font-weight: var(--openbot-weight-medium);
}
.browser-dock-reply-close {
  margin-left: auto;
}
.browser-dock-reply-body {
  max-height: 160px;
  padding-right: var(--openbot-space-1);
  overflow: auto;
  line-height: var(--openbot-leading-lg);
}
.browser-dock-reply-actions {
  display: flex;
  justify-content: flex-end;
}
.browser-dock-stack {
  display: flex;
  width: 100%;
  flex-direction: column;
}
.agent-queue-panel[data-variant="floating"] {
  margin-inline: var(--openbot-space-6);
  border-color: var(--openbot-glass-border);
  background: var(--openbot-bg-glass);
  backdrop-filter: blur(16px);
  animation: none;
}
.browser-dock-stack > .agent-queue-slot {
  transition-duration: var(--browser-dock-island-duration);
  transition-timing-function: var(--browser-dock-island-easing);
}
.browser-dock-composer {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-2);
}
.browser-dock-avatar {
  width: 20px;
  height: 20px;
  flex: none;
}
.browser-dock-editor {
  min-width: 0;
  flex: 1;
  color: var(--openbot-text-primary);
}
.agent-queue-panel[data-variant="floating"] .agent-queue-item[data-arriving] .agent-queue-message {
  visibility: hidden;
}
.browser-dock-morph {
  position: absolute;
  z-index: 1;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid var(--openbot-glass-border);
  background: var(--openbot-bg-glass);
  box-shadow: var(--openbot-shadow-raised);
  backdrop-filter: blur(16px);
  pointer-events: none;
}
.browser-dock-morph > .browser-dock-glass {
  position: absolute;
  top: 50%;
  left: 50%;
  border-color: transparent;
  animation: none;
  background: none;
  backdrop-filter: none;
  box-shadow: none;
  translate: -50% -50%;
}
.browser-dock-morph-text {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  overflow: hidden;
  color: var(--openbot-text-primary);
  pointer-events: none;
  text-overflow: ellipsis;
  transform-origin: left center;
  white-space: nowrap;
  will-change: transform, opacity;
}
.agent-queue-panel[data-variant="floating"] .agent-queue-actions {
  gap: var(--openbot-space-1);
}
.agent-queue-panel[data-variant="floating"] :is(.agent-queue-steer, .agent-queue-icon-button) {
  box-sizing: border-box;
  height: 24px;
  border: 1px solid var(--openbot-glass-border);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-glass-surface);
  box-shadow: inset 0 1px 0 var(--openbot-glass-highlight);
  backdrop-filter: blur(8px);
  color: var(--openbot-text-secondary);
  transition: background var(--openbot-duration-hover) ease, border-color var(--openbot-duration-hover) ease, box-shadow var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease, opacity var(--openbot-duration-hover) ease;
}
.agent-queue-panel[data-variant="floating"] .agent-queue-steer {
  padding: 0 var(--openbot-space-2) 0 var(--openbot-space-1-5);
  font-size: var(--openbot-text-sm);
}
.agent-queue-panel[data-variant="floating"] .agent-queue-icon-button {
  width: 24px;
}
.agent-queue-panel[data-variant="floating"] :is(.agent-queue-steer, .agent-queue-icon-button) svg {
  width: 14px;
  height: 14px;
}
.agent-queue-panel[data-variant="floating"] :is(.agent-queue-steer, .agent-queue-icon-button):is(:hover:not(:disabled), :focus-visible) {
  background: var(--openbot-glass-surface-hover);
  color: var(--openbot-text-primary);
}
.agent-queue-panel[data-variant="floating"] .agent-queue-icon-button.agent-queue-delete:is(:hover:not(:disabled), :focus-visible) {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
}
.agent-queue-panel[data-variant="floating"] :is(.agent-queue-steer, .agent-queue-icon-button):focus-visible {
  box-shadow: inset 0 1px 0 var(--openbot-glass-highlight), 0 0 0 2px var(--openbot-border-focus);
}
@media (hover: hover) {
  .agent-queue-panel[data-variant="floating"] .agent-queue-item:not(:hover, :focus-within) :is(.agent-queue-steer, .agent-queue-icon-button):not(:focus-visible) {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    color: var(--openbot-text-muted);
  }
}
@media (prefers-reduced-motion: reduce) {
  .browser-dock-stack > .agent-queue-slot {
    transition: none;
  }
}
body:has(.browser-full-view) .app-frame {
  isolation: isolate;
}
.browser-expanded-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--openbot-layer-dropdown) - 2);
}
.browser-full-view {
  --browser-full-edge: var(--openbot-space-1);
  --browser-full-top-height: 38px;
  position: fixed;
  z-index: calc(var(--openbot-layer-dropdown) - 1);
  inset: 0;
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  padding: 0 var(--browser-full-edge) var(--browser-full-edge);
  background: var(--openbot-bg-canvas);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-bg-canvas) 50%, var(--openbot-bg-notch));
  }
  color: var(--openbot-text-primary);
}
.browser-full-view[hidden], .browser-expanded-backdrop[hidden] {
  display: none;
}
.browser-full-top {
  display: flex;
  height: var(--browser-full-top-height);
  min-width: 0;
  flex: none;
  align-items: center;
  gap: var(--openbot-space-1);
  padding-inline: var(--openbot-space-1) 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.browser-full-top svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.browser-full-top-spacer {
  flex: 1;
}
.browser-full-view-mac-controls .browser-full-top {
  padding-inline-start: calc(82px - var(--browser-full-edge));
}
.browser-full-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-canvas);
}
.browser-full-browser {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}
.browser-full-alert {
  margin: var(--openbot-space-2) var(--openbot-space-2) 0;
}
.browser-full-surface {
  position: relative;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}
.browser-full-surface[data-live] {
  display: grid;
  place-items: center;
  container-type: size;
}
.browser-full-surface[data-live] .browser-live-view {
  position: relative;
  inset: auto;
  width: min( calc(100cqw - 2 * var(--openbot-space-3)), calc((100cqh - 2 * var(--openbot-space-3)) * var(--browser-frame-width, 16) / var(--browser-frame-height, 10)) );
  height: auto;
  aspect-ratio: var(--browser-frame-width, 16) / var(--browser-frame-height, 10);
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface);
}
.browser-full-owner-avatar {
  width: 16px;
  height: 16px;
  flex: none;
}
.browser-full-owner-acting {
  border-radius: var(--openbot-radius-pill);
  box-shadow: 0 0 0 1.5px var(--openbot-accent);
}
.browser-full-owner-globe {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: none;
  color: var(--openbot-text-muted);
}
.browser-full-chips {
  --browser-full-fade: calc(var(--openbot-space-8) * 2);
  position: relative;
  min-width: 0;
  flex: 0 1 auto;
  overflow-x: auto;
  padding: var(--openbot-space-0-5);
  scrollbar-width: none;
}
.browser-full-chips[data-fade-start] {
  mask-image: linear-gradient(to right, transparent, var(--openbot-text-primary) var(--browser-full-fade));
}
.browser-full-chips[data-fade-end] {
  mask-image: linear-gradient(to right, var(--openbot-text-primary) calc(100% - var(--browser-full-fade)), transparent);
}
.browser-full-chips[data-fade-start][data-fade-end] {
  mask-image: linear-gradient( to right, transparent, var(--openbot-text-primary) var(--browser-full-fade), var(--openbot-text-primary) calc(100% - var(--browser-full-fade)), transparent );
}
.browser-full-chip {
  min-width: 120px;
  max-width: 200px;
  flex: 0 1 200px;
  user-select: none;
  transition: flex-basis var(--openbot-duration-normal) var(--openbot-ease-out);
}
.browser-full-chips[data-frozen] .browser-full-chip {
  flex: 0 0 var(--browser-full-chip-frozen);
}
.browser-full-chips[data-dragging] {
  cursor: grabbing;
}
.browser-full-chips[data-dragging] .browser-full-chip {
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.browser-full-chips[data-dragging] .browser-full-chip[data-dragging] {
  z-index: 1;
  background: var(--openbot-bg-surface-raised);
  box-shadow: inset 0 0 0 1px var(--openbot-border-strong), var(--openbot-shadow-raised);
  transition: none;
}
.browser-full-chips[data-dragging] .browser-full-chip::before {
  opacity: 0;
}
.browser-full-hidden-tabs {
  max-width: 320px;
}
@media (prefers-reduced-motion: reduce) {
  .browser-full-chip, .browser-full-chips[data-dragging] .browser-full-chip {
    transition: none;
  }
}
.browser-full-spin {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: none;
  color: var(--openbot-text-muted);
  animation: ui-spin 1s linear infinite;
}
.browser-full-chip .side-panel-tab-select {
  min-width: 0;
  flex: 1;
  justify-content: flex-start;
}
.browser-full-chip .side-panel-tab-label {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-align: start;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser-full-address-row {
  display: flex;
  height: 44px;
  flex: none;
  align-items: center;
  gap: var(--openbot-space-0-5);
  padding-inline: var(--openbot-space-2);
  border-bottom: 1px solid var(--openbot-border);
  color: var(--openbot-text-secondary);
}
.browser-full-address-row svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.browser-full-capsule {
  position: relative;
  display: flex;
  min-width: 0;
  height: var(--openbot-control-md);
  flex: 1;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-inline: var(--openbot-space-1);
  padding-inline: var(--openbot-space-2) var(--openbot-space-1);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  transition: background-color var(--openbot-duration-normal) var(--openbot-ease-out), box-shadow var(--openbot-duration-normal) var(--openbot-ease-out);
}
.browser-full-capsule:focus-within {
  background: var(--openbot-bg-control-active);
  box-shadow: inset 0 0 0 1px var(--openbot-border-grouped);
}
.browser-full-capsule .browser-full-capsule-input {
  height: 100%;
  min-width: 0;
  flex: 1;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
}
.browser-full-capsule .browser-full-capsule-input:focus-visible {
  outline: none;
}
.browser-full-capsule .browser-full-capsule-input::selection {
  background: var(--openbot-accent-strong);
}
.browser-full-capsule-agent {
  display: grid;
  flex: none;
  place-items: center;
}
.browser-full-suggest {
  position: absolute;
  z-index: var(--openbot-layer-dropdown);
  top: calc(100% + var(--openbot-space-1));
  right: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  padding: var(--openbot-space-1);
  border-radius: var(--openbot-radius-lg);
}
.browser-full-suggest-row {
  display: flex;
  width: 100%;
  min-width: 0;
  height: var(--openbot-control-md);
  align-items: center;
  gap: var(--openbot-space-2);
  padding-inline: var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  text-align: start;
  cursor: default;
}
.browser-full-suggest-row:hover {
  background: var(--openbot-bg-control-hover);
}
.browser-full-suggest-row[aria-selected="true"] {
  background: var(--openbot-bg-control-active);
}
.browser-full-suggest-icon {
  display: grid;
  width: var(--openbot-icon-sm);
  flex: none;
  place-items: center;
  color: var(--openbot-text-muted);
}
.browser-full-suggest-title {
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser-full-suggest-detail {
  min-width: 0;
  flex: 0 100 auto;
  overflow: hidden;
  color: var(--openbot-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser-full-suggest-switch {
  flex: none;
  margin-inline-start: auto;
  padding: 0 var(--openbot-space-2);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-pill);
  color: var(--openbot-text-muted);
}
.browser-full-switch {
  min-width: 0;
  max-width: 100%;
  justify-content: flex-start;
  gap: var(--openbot-space-2);
}
.browser-full-switch-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser-full-switch-count {
  display: grid;
  min-width: 18px;
  height: 18px;
  flex: none;
  place-items: center;
  padding-inline: var(--openbot-space-1);
  border: 1.5px solid currentcolor;
  border-radius: var(--openbot-radius-sm);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.browser-full-switch-menu {
  display: flex;
  width: min(360px, calc(100vw - 2 * var(--openbot-space-3)));
  max-height: min(480px, 70dvh);
  flex-direction: column;
  padding: var(--openbot-space-1);
}
.browser-full-switch-list {
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}
.browser-full-switch-row {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-0-5);
}
.browser-full-switch-select {
  min-width: 0;
  height: auto;
  flex: 1;
  padding-block: var(--openbot-space-1-5);
}
.browser-full-switch-select[aria-current="true"] {
  background: var(--openbot-bg-control-active);
}
.browser-full-switch-close svg, .browser-full-switch-actions svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.browser-full-switch-text {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.browser-full-switch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-1);
  margin-top: var(--openbot-space-1);
  padding-top: var(--openbot-space-1);
  border-top: 1px solid var(--openbot-border);
}
@media (max-width: 720px) {
  .browser-full-surface[data-live] {
    place-items: start center;
    padding-top: var(--openbot-space-3);
  }
}
.channel-avatar {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  min-width: var(--openbot-space-8);
  height: var(--openbot-space-8);
  color: var(--openbot-text-muted);
}
.channel-avatar .agent-avatar {
  width: var(--openbot-space-8);
  height: var(--openbot-space-8);
  flex-shrink: 0;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface);
}
.channel-avatar:not(.channel-avatar-cluster) .agent-avatar + .agent-avatar {
  margin-left: calc(-1 * var(--openbot-space-4));
}
.channel-avatar-cluster {
  --channel-avatar-size: 36px;
  --channel-avatar-pitch: calc(var(--channel-avatar-size) * 0.44);
  --channel-avatar-face: calc(var(--channel-avatar-size) * 0.48);
  display: grid;
  grid-template: repeat(2, var(--channel-avatar-pitch)) / repeat(2, var(--channel-avatar-pitch));
  place-content: center;
  place-items: center;
  width: var(--channel-avatar-size);
  min-width: var(--channel-avatar-size);
  height: var(--channel-avatar-size);
}
.channel-avatar-cluster .agent-avatar {
  --agent-avatar-optical-offset: calc(var(--channel-avatar-face) * -0.14);
  width: var(--channel-avatar-face);
  height: var(--channel-avatar-face);
  background: none;
}
.channel-avatar-cluster > :only-child {
  --channel-avatar-face: var(--channel-avatar-size);
  grid-area: 1 / 1 / 3 / 3;
}
.channel-avatar-cluster > :first-child:nth-last-child(2), .channel-avatar-cluster > :first-child:nth-last-child(2) ~ * {
  grid-row: 1 / span 2;
}
.channel-avatar-cluster > :first-child:nth-last-child(3) ~ .agent-avatar:last-child {
  grid-column: 1 / span 2;
}
.agent-row.sidebar-pinned-row .channel-avatar-cluster {
  --channel-avatar-size: 48px;
}
.agent-row.sidebar-pinned-row .channel-avatar-cluster .agent-avatar {
  width: var(--channel-avatar-face);
  height: var(--channel-avatar-face);
}
.channel-avatar-count {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: 1;
  font-weight: var(--openbot-weight-semibold);
  font-variant-numeric: tabular-nums;
}
.channel-dialog-header, .channel-editor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.channel-dialog-header h2 {
  margin: 0;
  font-size: var(--openbot-text-xl);
  line-height: var(--openbot-leading-xl);
  font-weight: var(--openbot-weight-semibold);
}
.channel-empty {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-muted);
}
.channel-empty h2 {
  font-size: var(--openbot-text-2xl);
  color: var(--openbot-text-primary);
  margin: var(--openbot-space-2) 0 0;
}
.channel-empty p {
  margin: 0;
}
.channel-empty .channel-empty-title {
  color: var(--openbot-text-primary);
}
.channel-editor {
  display: block;
}
.channel-create-form {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-3);
}
.channel-members {
  display: flex;
  margin-top: var(--settings-panel-section-gap);
  flex-direction: column;
  gap: var(--openbot-space-1);
  min-width: 0;
}
.channel-members-title, .channel-members-note {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.channel-members-title {
  font-weight: var(--openbot-weight-regular);
}
.channel-member-list:is(.ui-item-group) {
  border: 0;
  overflow: visible;
  background: transparent;
}
.channel-member-list > :not(:first-child) {
  border-top: 0;
}
.channel-member:is(.ui-item), .channel-member-add {
  min-height: var(--openbot-control-lg);
  gap: var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
  padding-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-2);
}
.channel-member:hover, .channel-member-add:hover:not(:disabled) {
  background: var(--openbot-hover);
}
.channel-member .agent-avatar, .channel-member-menu .agent-avatar {
  --agent-avatar-optical-offset: -3.25px;
  width: var(--openbot-space-6);
  height: var(--openbot-space-6);
}
.channel-member .ui-item-title {
  font-weight: var(--openbot-weight-regular);
}
.channel-member-add {
  width: 100%;
  justify-content: flex-start;
  height: auto;
  line-height: var(--openbot-leading-md);
  text-align: left;
  cursor: pointer;
}
.channel-member-add > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  margin-inline: calc((var(--openbot-space-6) - var(--openbot-icon-md)) / 2);
}
.channel-member-add:disabled {
  cursor: default;
  opacity: 0.42;
}
.channel-member-menu {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  min-width: 220px;
  max-height: min( calc(var(--openbot-space-8) * 11), calc(100dvh - var(--openbot-space-4)), var(--kb-popper-content-available-height, 100dvh) );
  margin-inline-start: calc(var(--openbot-space-1) * -1);
}
.channel-member-menu .channel-member-search {
  flex: none;
}
.channel-member-menu .channel-member-search input::-webkit-search-cancel-button {
  display: none;
}
.channel-member-options {
  min-height: 0;
  overflow-y: auto;
  outline: 0;
  scrollbar-width: thin;
}
.channel-member-option {
  display: flex;
  min-height: var(--openbot-control-md);
  align-items: center;
  gap: var(--openbot-space-2);
  border-radius: var(--ui-menu-item-radius);
  outline: 0;
  padding: var(--openbot-space-1-5) var(--ui-menu-inset);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
  white-space: nowrap;
  cursor: default;
  transition: background-color var(--openbot-duration-hover) var(--openbot-ease-out);
}
.channel-member-option:is(:hover, :focus-visible) {
  background: var(--ui-menu-item-hover);
}
.channel-member-options:has(:focus-visible) .channel-member-option:hover:not(:focus-visible) {
  background: transparent;
}
.channel-member-menu-empty {
  margin: 0;
  padding: var(--openbot-space-3) var(--ui-menu-inset);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
@media (hover: hover) and (pointer: fine) {
  .channel-member-remove, .channel-lead-toggle[aria-pressed="false"] {
    opacity: 0;
    transition: opacity var(--openbot-duration-hover) var(--openbot-ease-out);
  }
  .channel-member:hover :is(.channel-member-remove, .channel-lead-toggle), :is(.channel-member-remove, .channel-lead-toggle):focus-visible {
    opacity: 1;
  }
}
.channel-picker {
  border: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.channel-picker legend {
  margin-bottom: var(--openbot-space-2);
}
.channel-picker-list {
  margin-top: var(--openbot-space-2);
  max-height: calc(var(--openbot-space-8) * 7);
  overflow: auto;
  scrollbar-width: none;
}
.channel-picker-list::-webkit-scrollbar {
  display: none;
}
.channel-picker-entry {
  padding: var(--openbot-space-2) 0;
  cursor: pointer;
}
.channel-editor-footer {
  padding-top: var(--openbot-space-3);
  border-top: 1px solid var(--openbot-border);
}
.channel-search-icon {
  width: var(--openbot-space-4);
  height: var(--openbot-space-4);
  color: var(--openbot-text-muted);
  flex-shrink: 0;
}
.channel-picker-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-6) var(--openbot-space-3);
  text-align: center;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.channel-picker-empty > svg {
  width: var(--openbot-space-6);
  height: var(--openbot-space-6);
  margin-bottom: var(--openbot-space-1);
}
.channel-picker-empty p {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
}
.channel-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--openbot-layer-dialog);
  display: grid;
  place-items: center;
  padding: var(--openbot-space-6);
}
.channel-create-dialog {
  --channel-dialog-inset: var(--openbot-space-4);
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(440px, 100%);
  max-height: calc(100dvh - 48px);
  overflow: hidden;
  outline: 0;
  background: var(--openbot-bg-surface);
}
.channel-create-dialog .channel-dialog-header {
  padding: var(--channel-dialog-inset);
}
.channel-create-dialog .channel-dialog-header .ui-button svg {
  width: var(--openbot-space-4);
  height: var(--openbot-space-4);
}
.channel-create-form {
  min-height: 0;
  gap: var(--openbot-space-4);
}
.channel-create-form > .ui-field, .channel-create-form > .ui-alert {
  margin-inline: var(--channel-dialog-inset);
}
.channel-create-form .channel-picker {
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: 0;
}
.channel-create-form .channel-picker legend {
  margin-inline: var(--channel-dialog-inset);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
}
.channel-create-form .channel-member-search {
  height: var(--openbot-control-lg);
  margin-inline: var(--channel-dialog-inset);
  padding-inline: var(--openbot-space-3);
  gap: var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
}
.channel-create-form .channel-member-search input::-webkit-search-cancel-button {
  display: none;
}
.channel-create-form .channel-picker-list {
  min-height: 0;
  max-height: calc(var(--openbot-space-8) * 11);
  margin-top: var(--openbot-space-2);
  padding: 0;
}
.channel-create-form .channel-picker-body {
  display: flex;
  flex-direction: column;
}
.channel-create-form .channel-picker-entry {
  display: block;
  padding: var(--openbot-space-2) var(--channel-dialog-inset);
  border-radius: 0;
  transition: background-color var(--openbot-duration-normal) var(--openbot-ease-out);
}
.channel-create-form .channel-picker-entry .channel-member:is(.ui-item) {
  min-height: 0;
  padding: 0;
  background: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .channel-create-form .channel-picker-entry {
    transition: none;
  }
}
.channel-create-form .channel-picker-entry:hover {
  background: var(--openbot-bg-control-hover);
}
.channel-create-form .channel-picker-entry:has(.ui-checkbox-input:checked) {
  background: var(--openbot-accent-soft);
}
.channel-create-form .channel-picker-entry .ui-item-content {
  display: flex;
  align-items: baseline;
  gap: var(--openbot-space-2);
  overflow: hidden;
}
.channel-create-form .channel-picker-entry .ui-item-title {
  flex: 0 0 auto;
  font-weight: var(--openbot-weight-regular);
}
.channel-create-form .channel-picker-entry .ui-item-description {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.channel-create-form .channel-editor-footer {
  justify-content: flex-end;
  padding: var(--channel-dialog-inset);
}
.channel-title .channel-avatar {
  min-width: 18px;
  height: 18px;
}
.channel-title .agent-avatar {
  --agent-avatar-optical-offset: -2px;
  width: 18px;
  height: 18px;
}
.channel-title .agent-avatar + .agent-avatar {
  margin-left: -8px;
}
.channel-header-copy {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: var(--openbot-space-2);
}
.channel-header-copy h1 {
  min-width: 0;
  overflow: hidden;
  flex: 0 1 auto;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.channel-header-title {
  min-width: 0;
  overflow: hidden;
  flex: 1 1 auto;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.channel-preview-notice {
  flex-shrink: 0;
  margin: 0;
  padding: var(--openbot-space-4);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-align: center;
}
.agent-activity-content.channel-activity-content {
  padding-left: var(--openbot-space-0-5);
}
.channel-activity-faces {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}
.channel-activity-faces .agent-activity-avatar + .agent-activity-avatar {
  margin-left: calc(-1 * var(--openbot-space-2));
}
.channel-paused-tasks {
  position: relative;
  max-height: 35dvh;
  overflow-y: auto;
  margin: calc(-1 * var(--openbot-space-6)) var(--openbot-space-3) calc(-1 * var(--openbot-radius-lg));
  border-radius: var(--openbot-radius-lg) var(--openbot-radius-lg) var(--openbot-radius-md) var(--openbot-radius-md);
  background: var(--openbot-accent-strong);
  box-shadow: 0 0 0 1px var(--openbot-accent-soft);
  -webkit-backdrop-filter: blur(var(--openbot-space-3));
  backdrop-filter: blur(var(--openbot-space-3));
  padding-bottom: var(--openbot-radius-lg);
  color: var(--openbot-accent-text);
}
.awaiting-replies + .channel-paused-tasks {
  z-index: 10;
  margin-top: 0;
}
.channel-paused-task {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-2);
  align-items: center;
  justify-content: space-between;
  padding: var(--openbot-space-2) var(--openbot-space-3);
}
.channel-paused-task + .channel-paused-task {
  border-top: 1px solid var(--openbot-accent-soft);
}
.channel-paused-task-reason {
  min-width: 0;
  flex: 1 1 24ch;
  margin: 0;
  overflow-wrap: anywhere;
  font-size: var(--openbot-text-sm);
}
.channel-paused-task-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-2);
  align-items: center;
}
.channel-paused-task-actions .ui-button {
  background: var(--openbot-surface-light);
  color: var(--openbot-text-on-light);
}
.channel-paused-task-actions .ui-button:hover {
  background: var(--openbot-surface-light);
  box-shadow: 0 0 0 1px var(--openbot-text-dim-on-light);
}
.diagram-view {
  display: flex;
  height: 100%;
  min-width: 0;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  background: var(--openbot-bg-canvas);
}
.diagram-flows-notice {
  align-items: center;
  justify-content: center;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
}
.diagram-view .agent-avatar {
  grid-template: 100% / 100%;
}
.diagram-view-header {
  display: flex;
  height: 38px;
  flex: none;
  align-items: center;
  gap: var(--openbot-space-1-5);
  border-bottom: 1px solid var(--openbot-border);
  padding: 0 var(--openbot-space-3);
}
.diagram-view .diagram-view-header .header-panel-toggle[aria-expanded="true"]:not(:hover) {
  border-color: transparent;
  background: transparent;
  color: var(--openbot-text-muted);
}
.diagram-view-icon {
  display: grid;
  width: 18px;
  height: 18px;
  flex: none;
  place-items: center;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
}
.diagram-view-avatar.agent-avatar {
  width: 18px;
  height: 18px;
}
.diagram-view-icon svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.diagram-view-title {
  max-width: 32ch;
  flex: none;
  overflow: hidden;
  margin: 0;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-regular);
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diagram-view-actions {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
  margin-left: auto;
}
.diagram-view-body {
  --diagram-inspector-width: 340px;
  position: relative;
  display: flex;
  min-height: 0;
  flex: 1;
  transition: padding-right var(--panel-resize-duration, var(--openbot-duration-overlay)) cubic-bezier(0.22, 1, 0.36, 1);
}
.diagram-view-body[data-inspector="open"] {
  padding-right: var(--diagram-inspector-width);
}
.diagram-view-chat {
  position: absolute;
  bottom: var(--openbot-space-4);
  left: var(--openbot-space-4);
  z-index: 2;
  width: min(360px, calc(100% - var(--openbot-space-8)));
  pointer-events: none;
}
.diagram-board {
  position: relative;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}
.diagram-board-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  outline: 0;
  background-color: var(--openbot-bg-canvas);
  background-image: radial-gradient(circle at 1px 1px, var(--openbot-border-strong) 1px, transparent 0);
  background-position: var(--diagram-grid-x) var(--diagram-grid-y);
  background-size: var(--diagram-grid-size) var(--diagram-grid-size);
  cursor: grab;
  touch-action: none;
}
.diagram-board-viewport:focus-visible {
  box-shadow: inset var(--openbot-focus-ring);
}
.diagram-board-viewport:is([data-panning], [data-dragging]) {
  cursor: grabbing;
}
.diagram-board-world {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
}
.diagram-board-world[data-settling] {
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.diagram-board-empty {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  max-width: 280px;
  gap: var(--openbot-space-1);
  translate: -50% -50%;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  pointer-events: none;
  text-align: center;
}
.diagram-board-empty strong {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
}
.diagram-board-empty p {
  margin: 0;
}
.diagram-board-menu-area {
  display: contents;
}
.diagram-canvas-menu-avatar.agent-avatar {
  width: 20px;
  height: 20px;
  grid-template: 100% / 100%;
}
.ui-action-menu.diagram-canvas-agents:not([data-menu-layout="grid"]) [role="menuitem"] {
  height: auto;
  gap: var(--openbot-space-3);
  padding-block: var(--openbot-space-2);
}
.diagram-canvas-menu-agent {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-0-5);
  line-height: var(--openbot-leading-md);
}
.diagram-canvas-menu-agent small {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diagram-new-agent {
  position: absolute;
  top: clamp(var(--openbot-space-2), var(--diagram-new-agent-y), calc(100% - 196px));
  left: clamp(var(--openbot-space-2), var(--diagram-new-agent-x), calc(100% - 288px));
  z-index: 3;
  display: grid;
  width: 280px;
  gap: var(--openbot-space-2);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-overlay);
  box-shadow: 0 0 0 1px var(--openbot-border), var(--openbot-shadow-overlay);
  backdrop-filter: blur(16px);
  padding: var(--openbot-space-3);
  font-size: var(--openbot-text-sm);
}
.diagram-new-agent-header {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  font-weight: var(--openbot-weight-medium);
  user-select: none;
}
.diagram-new-agent-avatar.agent-avatar {
  width: 24px;
  height: 24px;
  grid-template: 100% / 100%;
}
.diagram-new-agent .provider-model-trigger-field {
  height: var(--openbot-control-sm);
  min-height: var(--openbot-control-sm);
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
  box-shadow: none;
  padding-inline: var(--openbot-space-2);
  font-size: var(--openbot-text-sm);
}
.diagram-new-agent .provider-model-trigger-field:hover:not(:disabled), .diagram-new-agent .provider-model-trigger-field[aria-expanded="true"] {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-control);
}
.diagram-new-agent .provider-model-trigger-field:focus-visible {
  border-color: var(--openbot-border-focus);
  outline: none;
  box-shadow: var(--openbot-focus-ring);
}
.diagram-new-agent-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-1);
}
.diagram-board-zoom {
  position: absolute;
  right: var(--openbot-space-4);
  bottom: var(--openbot-space-4);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1-5);
}
.diagram-board-zoom .ui-button {
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-overlay);
  box-shadow: var(--openbot-shadow-raised);
}
.diagram-board-zoom .ui-button svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  color: var(--openbot-text-muted);
}
.diagram-board-zoom .ui-button:hover svg {
  color: var(--openbot-text-primary);
}
.diagram-board-status {
  position: absolute;
  top: calc(var(--openbot-space-4) + var(--openbot-control-sm) + var(--openbot-space-2));
  left: 50%;
  z-index: 2;
  max-width: min(420px, calc(100% - 320px));
  margin: 0;
  translate: -50% 0;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-overlay);
  box-shadow: 0 0 0 1px var(--openbot-border);
  padding: var(--openbot-space-1-5) var(--openbot-space-3);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  pointer-events: none;
  text-align: center;
}
.diagram-board-status:empty {
  display: none;
}
.diagram-board-status[data-tone="danger"] {
  box-shadow: 0 0 0 1px var(--openbot-danger-border);
  color: var(--openbot-danger-text);
}
.diagram-edges {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: visible;
  pointer-events: none;
}
.diagram-edge path, .diagram-edge-draft {
  fill: none;
}
.diagram-edge-hit {
  stroke: transparent;
  stroke-width: 16px;
  pointer-events: stroke;
  cursor: pointer;
}
.diagram-edge-line {
  stroke: var(--openbot-border-strong);
  stroke-width: 2px;
  stroke-linecap: round;
}
.diagram-edge[data-state="delivered"] .diagram-edge-line {
  stroke: var(--diagram-routine-color, var(--openbot-accent));
}
.diagram-edge[data-state="running"] .diagram-edge-line {
  stroke: var(--diagram-routine-color, var(--openbot-accent));
  stroke-dasharray: 6 6;
  animation: diagram-edge-flow 0.6s linear infinite;
}
.diagram-edge[data-routine-color][data-state="idle"] .diagram-edge-line {
  stroke: var(--diagram-routine-color);
  opacity: 0.6;
}
.diagram-edge:hover .diagram-edge-line, .diagram-edge[data-selected] .diagram-edge-line {
  stroke: var(--openbot-text-primary);
  stroke-width: 3px;
}
.diagram-edge .diagram-edge-arrow {
  fill: var(--openbot-text-muted);
}
.diagram-edge:is([data-state="delivered"], [data-state="running"]) .diagram-edge-arrow {
  fill: var(--diagram-routine-color, var(--openbot-accent));
}
.diagram-edge:hover .diagram-edge-arrow, .diagram-edge[data-selected] .diagram-edge-arrow {
  fill: var(--openbot-text-primary);
}
.diagram-edge[data-state="dimmed"] .diagram-edge-arrow {
  opacity: 0.3;
}
.diagram-edge[data-routine-color][data-state="idle"] .diagram-edge-arrow {
  fill: var(--diagram-routine-color);
  opacity: 0.6;
}
.diagram-edge-draft {
  stroke: var(--openbot-accent);
  stroke-width: 2px;
  stroke-dasharray: 6 6;
}
.diagram-edge-draft[data-target="invalid"] {
  stroke: var(--openbot-danger);
}
.diagram-edge-remove.ui-button {
  position: absolute;
  top: var(--diagram-edge-y);
  left: var(--diagram-edge-x);
  z-index: 1;
  translate: -50% -50%;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface-raised);
  box-shadow: 0 0 0 1px var(--openbot-border-strong);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}
.diagram-edge-remove.ui-button:is([data-selected], :focus-visible) {
  opacity: 1;
  pointer-events: auto;
}
@keyframes diagram-edge-flow {
  to {
    stroke-dashoffset: -12;
  }
}
.diagram-node {
  position: absolute;
  top: var(--diagram-node-y);
  left: var(--diagram-node-x);
  display: flex;
  width: var(--diagram-node-width);
  flex-direction: column;
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-surface-raised);
  box-shadow: 0 0 0 1px var(--openbot-border), var(--openbot-shadow-raised);
  cursor: grab;
  transition: box-shadow var(--openbot-duration-fast) var(--openbot-ease-out), opacity var(--openbot-duration-normal) var(--openbot-ease-out);
  user-select: none;
}
.diagram-node[data-status="running"] {
  box-shadow: 0 0 0 1px var(--openbot-accent), 0 0 0 5px var(--openbot-accent-soft);
}
.diagram-node[data-status="failed"] {
  box-shadow: 0 0 0 1px var(--openbot-danger-border), var(--openbot-shadow-raised);
}
.diagram-node[data-unreachable] {
  box-shadow: 0 0 0 1px var(--openbot-warning);
}
.diagram-node[data-selected] {
  box-shadow: 0 0 0 2px var(--openbot-accent), var(--openbot-shadow-raised);
}
.diagram-node-header {
  display: flex;
  height: 52px;
  align-items: center;
  gap: var(--openbot-space-1);
  border-bottom: 1px solid var(--openbot-border);
  padding: 0 var(--openbot-space-2) 0 var(--openbot-space-1);
}
.diagram-node-select.ui-button {
  height: 44px;
  min-width: 0;
  flex: 1;
  justify-content: flex-start;
  gap: var(--openbot-space-2);
  padding: 0 var(--openbot-space-1-5);
  background: transparent;
  cursor: inherit;
  text-align: left;
}
.diagram-node-avatar.agent-avatar {
  width: 28px;
  height: 28px;
}
.diagram-node-icon {
  display: grid;
  width: 28px;
  height: 28px;
  flex: none;
  place-items: center;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
}
.diagram-node-icon svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.diagram-node-heading {
  display: grid;
  min-width: 0;
}
.diagram-node-kicker {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diagram-node-name {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diagram-node-body {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-2) var(--openbot-space-3) var(--openbot-space-3);
}
.diagram-node-task, .diagram-node-schedule {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.diagram-node-schedule {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
}
.diagram-node-preview {
  display: flex;
  min-height: 64px;
  align-items: flex-start;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.diagram-node-preview[data-empty] {
  align-items: center;
  justify-content: center;
}
.diagram-node-preview p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  white-space: pre-line;
}
.diagram-node[data-status="failed"] .diagram-node-preview {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger-text);
}
.diagram-node-preview-empty {
  color: var(--openbot-text-placeholder);
}
.diagram-node-footer {
  display: flex;
  min-height: 24px;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.diagram-node-status {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.diagram-node-status svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
:is(.diagram-node-status, .diagram-inspector-step-status)[data-status="succeeded"] {
  color: var(--openbot-success-text);
}
:is(.diagram-node-status, .diagram-inspector-step-status)[data-status="failed"] {
  color: var(--openbot-danger-text);
}
:is(.diagram-node-status, .diagram-inspector-step-status)[data-status="running"] {
  color: var(--openbot-accent-text);
}
.diagram-node-status[data-status="unreachable"] {
  color: var(--openbot-warning-text);
}
.diagram-node-duration {
  color: var(--openbot-text-muted);
}
.diagram-node-duration::before {
  content: "·";
  margin-right: var(--openbot-space-1);
}
.diagram-node-remove.ui-button, .diagram-node-run.ui-button {
  flex: none;
  margin-inline-start: auto;
}
.diagram-node-run.ui-button svg, .diagram-view-actions .ui-button-size-xs svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.diagram-port.ui-button {
  position: absolute;
  top: 19px;
  z-index: 1;
  width: 14px;
  min-width: 14px;
  height: 14px;
  border: 2px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface-raised);
  padding: 0;
  cursor: crosshair;
  transition: scale var(--openbot-duration-fast) var(--openbot-ease-out), border-color var(--openbot-duration-fast) var(--openbot-ease-out), background-color var(--openbot-duration-fast) var(--openbot-ease-out);
}
.diagram-port.ui-button::before {
  position: absolute;
  inset: -8px;
  content: "";
}
.diagram-port-in.ui-button {
  left: -7px;
}
.diagram-port-out.ui-button {
  right: -7px;
}
.diagram-port.ui-button:hover, .diagram-port-out.ui-button[data-connecting], .diagram-port-in.ui-button[data-target="valid"] {
  scale: 1.25;
  border-color: var(--openbot-accent);
  background: var(--openbot-accent-soft);
}
.diagram-port-out.ui-button[data-connecting] {
  background: var(--openbot-accent);
}
.diagram-port-in.ui-button[data-target="invalid"] {
  border-color: var(--openbot-danger);
  opacity: 0.5;
}
.diagram-port.ui-button:disabled {
  opacity: 1;
  cursor: default;
}
[data-routine-color="0"] {
  --diagram-routine-color: var(--openbot-file-blue);
  --diagram-routine-soft: var(--openbot-file-blue-soft);
}
[data-routine-color="1"] {
  --diagram-routine-color: var(--openbot-file-green);
  --diagram-routine-soft: var(--openbot-file-green-soft);
}
[data-routine-color="2"] {
  --diagram-routine-color: var(--openbot-file-orange);
  --diagram-routine-soft: var(--openbot-file-orange-soft);
}
[data-routine-color="3"] {
  --diagram-routine-color: var(--openbot-file-pink);
  --diagram-routine-soft: var(--openbot-file-pink-soft);
}
[data-routine-color="4"] {
  --diagram-routine-color: var(--openbot-file-teal);
  --diagram-routine-soft: var(--openbot-file-teal-soft);
}
[data-routine-color="5"] {
  --diagram-routine-color: var(--openbot-file-yellow);
  --diagram-routine-soft: var(--openbot-file-yellow-soft);
}
.diagram-node[data-dimmed] {
  opacity: 0.4;
}
.diagram-node[data-dimmed]:is(:hover, :focus-within) {
  opacity: 0.8;
}
.diagram-edge[data-state="dimmed"] .diagram-edge-line {
  opacity: 0.3;
}
.diagram-node-routines {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.diagram-routine-chip.ui-button {
  height: 22px;
  gap: var(--openbot-space-1);
  border-radius: var(--openbot-radius-pill);
  background: var(--diagram-routine-soft);
  padding: 0 var(--openbot-space-2);
  color: var(--diagram-routine-color);
  font-size: var(--openbot-text-sm);
}
.diagram-routine-chip.ui-button[aria-pressed="true"] {
  box-shadow: inset 0 0 0 1px var(--diagram-routine-color);
}
.diagram-routine-chip.ui-button svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.diagram-routine-chip-name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diagram-routine-webhook {
  display: grid;
  gap: var(--openbot-space-2);
}
.diagram-routine-webhook-actions {
  display: flex;
  justify-content: flex-end;
}
.diagram-view-lens-bar {
  position: absolute;
  top: var(--openbot-space-4);
  left: 50%;
  z-index: 2;
  translate: -50% 0;
}
.diagram-view-lens-bar .ui-select-trigger {
  background: var(--openbot-bg-overlay);
  box-shadow: var(--openbot-shadow-raised);
}
.diagram-view-lens-trigger.ui-select-trigger {
  min-width: 120px;
  max-width: 280px;
}
.diagram-view-lens-option {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
}
.diagram-view-lens-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diagram-view-lens-option svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: none;
}
.diagram-view-lens-dot[data-all] {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--openbot-text-muted);
}
.diagram-view-lens-dot, .diagram-inspector-routine-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: var(--openbot-radius-pill);
  background: var(--diagram-routine-color);
}
.diagram-inspector-routine.ui-button[aria-pressed="true"] {
  background: var(--diagram-routine-soft);
}
.diagram-node[data-kind="routine"][data-firing] {
  box-shadow: 0 0 0 1px var(--diagram-routine-color), 0 0 0 5px var(--diagram-routine-soft);
}
.diagram-node[data-kind="routine"] .diagram-node-icon {
  background: var(--diagram-routine-soft);
  color: var(--diagram-routine-color);
}
.diagram-node[data-kind="routine"][data-firing] .diagram-node-icon {
  animation: diagram-routine-fire 1.2s var(--openbot-ease-in-out) infinite;
}
.diagram-routine-instruction {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  border-left: 2px solid var(--diagram-routine-color, var(--openbot-accent));
  padding-left: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.diagram-routine-week {
  --diagram-week-height: 40px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--openbot-space-1);
}
.diagram-routine-week[data-size="panel"] {
  --diagram-week-height: 72px;
}
.diagram-routine-day {
  display: grid;
  justify-items: center;
  gap: var(--openbot-space-1);
}
.diagram-routine-day-track {
  position: relative;
  width: 100%;
  height: var(--diagram-week-height);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-control);
}
.diagram-routine-day[data-weekend] .diagram-routine-day-track {
  background: var(--openbot-bg-control-hover);
}
.diagram-routine-day[data-today] .diagram-routine-day-track {
  box-shadow: inset 0 0 0 1px var(--openbot-accent);
}
.diagram-routine-day-track::after {
  position: absolute;
  top: 50%;
  right: 3px;
  left: 3px;
  height: 1px;
  background: var(--openbot-border);
  content: "";
}
.diagram-routine-tick {
  position: absolute;
  top: var(--diagram-tick-at);
  right: 3px;
  left: 3px;
  z-index: 1;
  height: 3px;
  translate: 0 -50%;
  border-radius: var(--openbot-radius-pill);
  background: var(--diagram-routine-color, var(--openbot-accent));
}
.diagram-routine-day-name {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 1;
}
.diagram-routine-day[data-today] .diagram-routine-day-name {
  color: var(--openbot-accent-text);
  font-weight: var(--openbot-weight-semibold);
}
.diagram-routine-dots {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.diagram-routine-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-border-strong);
}
.diagram-routine-dot[data-status="succeeded"] {
  background: var(--openbot-success);
}
.diagram-routine-dot[data-status="failed"] {
  background: var(--openbot-danger);
}
.diagram-routine-dot[data-status="running"] {
  background: var(--openbot-accent);
}
@keyframes diagram-routine-fire {
  50% {
    scale: 1.15;
  }
}
.diagram-inspector {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  width: var(--diagram-inspector-width);
  min-height: 0;
  flex-direction: column;
  border-left: 1px solid var(--openbot-border);
  background: var(--openbot-bg-surface);
}
.diagram-inspector-header {
  display: flex;
  min-height: 52px;
  align-items: center;
  gap: var(--openbot-space-2);
  border-bottom: 1px solid var(--openbot-border);
  padding: var(--openbot-space-2) var(--openbot-space-3);
}
.diagram-inspector-title {
  overflow: hidden;
  margin: 0;
  flex: 1;
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diagram-inspector-avatar.agent-avatar {
  width: 24px;
  height: 24px;
}
.diagram-inspector-body {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: var(--openbot-space-4);
  overflow-y: auto;
  padding: var(--openbot-space-4);
}
.diagram-inspector-run {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--openbot-space-1-5) var(--openbot-space-2);
  font-size: var(--openbot-text-md);
}
.diagram-inspector-muted, .diagram-inspector-empty {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
}
.diagram-inspector-section {
  display: grid;
  gap: var(--openbot-space-1-5);
}
.diagram-inspector-section p {
  margin: 0;
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.diagram-inspector-task.ui-textarea {
  min-height: 0;
  margin: calc(-1 * var(--openbot-space-1-5));
  border-color: transparent;
  background: transparent;
  padding: var(--openbot-space-1) var(--openbot-space-1-5);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  resize: none;
  field-sizing: content;
}
.diagram-inspector-task.ui-textarea:is(:hover, :focus-visible, :focus) {
  border-color: var(--openbot-border);
  background: var(--openbot-bg-control);
}
.diagram-inspector-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.diagram-inspector-section-title {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: var(--openbot-tracking-wide);
}
.diagram-inspector-text {
  max-height: 320px;
  overflow: auto;
  margin: 0;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.diagram-inspector-text[data-tone="danger"] {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger-text);
}
.diagram-inspector-steps {
  display: grid;
  gap: var(--openbot-space-0-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.diagram-inspector-step.ui-button {
  width: 100%;
  height: auto;
  justify-content: flex-start;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-2);
  text-align: left;
}
.diagram-inspector-step-number {
  display: grid;
  width: 20px;
  height: 20px;
  flex: none;
  place-items: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  font-weight: var(--openbot-weight-semibold);
}
.diagram-inspector-step-name {
  overflow: hidden;
  flex: 1;
  font-size: var(--openbot-text-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diagram-inspector-step-status {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
.diagram-inspector-times, .diagram-inspector-history {
  display: grid;
  gap: var(--openbot-space-1);
  margin: 0;
  padding: 0;
  font-size: var(--openbot-text-md);
  list-style: none;
}
.diagram-inspector-times li {
  color: var(--openbot-text-secondary);
}
.diagram-inspector-history li {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-2);
}
.diagram-inspector-history-time {
  overflow: hidden;
  color: var(--openbot-text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diagram-inspector-history-kind {
  color: var(--openbot-text-muted);
}
.diagram-inspector-history-kind::before {
  content: " · ";
}
.diagram-inspector-step-status svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.diagram-chat, .diagram-chat-launcher.ui-button {
  background: var(--openbot-bg-glass);
  box-shadow: 0 0 0 1px var(--openbot-glass-border), var(--openbot-shadow-overlay);
  backdrop-filter: blur(16px);
}
.diagram-chat-morph {
  --diagram-chat-open-duration: var(--openbot-duration-island-content);
  --diagram-chat-close-duration: var(--openbot-duration-island-content-exit);
  --diagram-chat-open-ease: cubic-bezier(0.34, 1.25, 0.64, 1);
  --diagram-chat-launcher-height: 36px;
  --diagram-chat-blur: 2px;
  display: grid;
  align-items: end;
}
.diagram-chat-morph > * {
  grid-area: 1 / 1;
}
.diagram-chat-launcher.ui-button {
  height: var(--diagram-chat-launcher-height);
  touch-action: none;
  justify-self: start;
  gap: var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
  padding-left: var(--openbot-space-1-5);
  pointer-events: auto;
  transition: opacity var(--diagram-chat-open-duration) var(--openbot-ease-out), filter var(--diagram-chat-open-duration) var(--openbot-ease-out), scale var(--diagram-chat-open-duration) var(--openbot-ease-out);
}
.diagram-chat-morph[data-open="true"] .diagram-chat-launcher.ui-button {
  scale: 0.97;
  filter: blur(var(--diagram-chat-blur));
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out), filter var(--openbot-duration-fast) var(--openbot-ease-out), scale var(--openbot-duration-fast) var(--openbot-ease-out);
}
.diagram-chat {
  display: flex;
  max-height: 340px;
  flex-direction: column;
  border-radius: var(--openbot-radius-xl);
  overflow: hidden;
  clip-path: inset(calc(100% - var(--diagram-chat-launcher-height)) 24% 0 0 round var(--openbot-radius-pill));
  opacity: 0;
  pointer-events: none;
  transition: clip-path var(--diagram-chat-close-duration) var(--openbot-ease-out), opacity var(--diagram-chat-close-duration) var(--openbot-ease-out);
}
.diagram-chat-morph[data-open="true"] .diagram-chat {
  clip-path: inset(-32px round 0);
  opacity: 1;
  pointer-events: auto;
  transition: clip-path var(--diagram-chat-open-duration) var(--diagram-chat-open-ease), opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}
.diagram-chat > * {
  filter: blur(var(--diagram-chat-blur));
  opacity: 0;
  translate: 0 var(--openbot-space-2);
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out), filter var(--openbot-duration-fast) var(--openbot-ease-out), translate var(--openbot-duration-fast) var(--openbot-ease-out);
}
.diagram-chat-morph[data-open="true"] .diagram-chat > * {
  filter: blur(0);
  opacity: 1;
  translate: 0 0;
  transition: opacity var(--diagram-chat-open-duration) var(--openbot-ease-out) var(--openbot-duration-fast), filter var(--diagram-chat-open-duration) var(--openbot-ease-out) var(--openbot-duration-fast), translate var(--diagram-chat-open-duration) var(--openbot-ease-out) var(--openbot-duration-fast);
}
.diagram-chat-avatar.agent-avatar {
  width: 24px;
  height: 24px;
}
.diagram-chat-header {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  cursor: grab;
  touch-action: none;
  border-bottom: 1px solid var(--openbot-border);
  padding: var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-3);
}
.diagram-chat-title {
  overflow: hidden;
  margin: 0;
  flex: 1;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diagram-chat-messages {
  display: flex;
  min-height: 96px;
  flex: 1;
  flex-direction: column;
  gap: var(--openbot-space-2);
  overflow-y: auto;
  padding: var(--openbot-space-3);
}
.diagram-chat-empty {
  margin: auto 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  text-align: center;
}
.diagram-chat-bubble {
  max-width: 88%;
  font-size: var(--openbot-text-md);
}
.diagram-chat-text {
  margin: 0;
  white-space: pre-wrap;
}
.diagram-chat-markdown {
  min-width: 0;
  font-size: var(--openbot-text-md);
}
.diagram-chat-changes {
  display: grid;
  gap: var(--openbot-space-1);
  margin: var(--openbot-space-2) 0 0;
  padding: 0;
  font-size: var(--openbot-text-sm);
  list-style: none;
}
.diagram-chat-changes li {
  display: flex;
  align-items: flex-start;
  gap: var(--openbot-space-1-5);
}
.diagram-chat-changes svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: none;
  margin-top: 2px;
  color: var(--openbot-success-text);
}
.diagram-chat-working {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.diagram-chat-composer.composer[data-compact] {
  grid-template-columns: minmax(0, 1fr) auto;
  margin: var(--openbot-space-2);
}
.diagram-chat-composer.composer[data-compact] > .composer-input-label {
  grid-column: 1;
}
@media (prefers-reduced-motion: reduce) {
  .diagram-edge[data-state="running"] .diagram-edge-line {
    animation: none;
  }
  .diagram-node[data-kind="routine"][data-firing] .diagram-node-icon {
    animation: none;
  }
  .diagram-chat-launcher.ui-button, .diagram-chat, .diagram-chat > *, .diagram-board-world[data-settling], .diagram-node, .diagram-port.ui-button, .diagram-edge-remove.ui-button {
    transition: none;
  }
}
.agent-usage-secondary, .agent-usage-footer {
  font-size: var(--openbot-text-sm);
  color: var(--openbot-text-muted);
}
.agent-usage-overview {
  display: grid;
  gap: var(--openbot-space-8);
}
.agent-usage-summary {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-8);
}
.agent-usage-hero {
  font-size: var(--openbot-text-usage-total);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  margin-bottom: var(--openbot-space-3);
}
.agent-usage-providers {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-6);
}
.agent-usage-provider-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-4);
  font-size: var(--openbot-text-lg);
}
.agent-usage-provider-heading > span {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.agent-usage-series-dot {
  width: var(--openbot-space-2);
  height: var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
  flex-shrink: 0;
}
.agent-usage-provider-heading strong {
  font-weight: 550;
  font-variant-numeric: tabular-nums;
}
.agent-usage-provider p {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  margin-top: var(--openbot-space-2);
}
.agent-usage-provider-icon {
  fill: var(--openbot-provider-current);
  width: var(--openbot-space-4);
  height: var(--openbot-space-4);
  flex-shrink: 0;
}
.agent-usage-trend {
  min-width: 0;
}
.agent-usage-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-4);
  margin-bottom: var(--openbot-space-4);
}
.agent-usage-totals {
  display: flex;
  flex-wrap: nowrap;
  gap: calc(var(--openbot-space-6) * 2);
  margin-top: var(--openbot-space-4);
  overflow: hidden;
}
.agent-usage-totals dt {
  font-size: var(--openbot-text-sm);
  color: var(--openbot-text-muted);
  margin-bottom: var(--openbot-space-1);
  white-space: nowrap;
}
.agent-usage-totals dd {
  margin: 0;
  font-size: var(--openbot-text-xl);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.agent-usage-table {
  overflow-x: auto;
}
.agent-usage-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--openbot-text-lg);
  font-variant-numeric: tabular-nums;
}
.agent-usage-table th, .agent-usage-table td {
  text-align: right;
  padding: var(--openbot-space-2) var(--openbot-space-3);
  border-bottom: 1px solid var(--openbot-border-strong);
  white-space: nowrap;
  font-weight: 400;
}
.agent-usage-table th:first-child {
  text-align: left;
  padding-left: 0;
  white-space: normal;
}
.agent-usage-table td:last-child {
  padding-right: 0;
}
.agent-usage-table thead th {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.agent-usage-table td {
  color: var(--openbot-text-secondary);
}
.agent-usage-model-name {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  overflow-wrap: anywhere;
  min-width: 10rem;
}
.agent-usage-footer {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-3);
  padding-bottom: var(--openbot-space-6);
}
.agent-usage-footer summary {
  cursor: pointer;
  width: fit-content;
}
.agent-usage-footer details p {
  margin-top: var(--openbot-space-3);
  max-width: 72ch;
  line-height: 1.6;
}
.app-frame-panes {
  display: contents;
}
.app-frame-panes > * {
  min-height: 0;
}
.app-frame-page-open .app-frame-panes {
  visibility: hidden;
  pointer-events: none;
}
.app-frame.app-frame-page-open .app-frame-panes * {
  visibility: hidden;
}
.window-page {
  z-index: 1;
  min-height: 0;
  overflow: hidden;
}
.agent-usage {
  container-type: inline-size;
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 0;
  height: 100%;
  flex-direction: column;
  color: var(--openbot-text-primary);
  background: var(--openbot-bg-canvas);
}
.agent-usage-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-4) var(--openbot-space-6);
  border-bottom: 1px solid var(--openbot-border);
}
.agent-usage-identity, .agent-usage-controls {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  min-width: 0;
}
.agent-usage-identity {
  flex-wrap: wrap;
}
.agent-usage-identity .ui-icon-button {
  margin-left: calc(-1 * var(--openbot-space-2));
}
.agent-usage-identity h2 {
  display: flex;
  gap: var(--openbot-space-3);
  font-size: var(--openbot-text-lg);
  color: var(--openbot-text-muted);
}
.agent-usage-identity h2 span:last-child {
  color: var(--openbot-text-primary);
  overflow-wrap: anywhere;
}
.agent-usage-controls {
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--openbot-space-3);
}
.agent-usage-body {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding: var(--openbot-space-6);
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-8);
}
.agent-usage h3 {
  font-size: var(--openbot-text-xl);
  font-weight: 550;
}
.agent-usage-notice {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  padding: var(--openbot-space-4);
  background: var(--openbot-bg-surface);
  border-radius: var(--openbot-radius-md);
}
.agent-usage-notice .ui-button {
  margin-top: var(--openbot-space-3);
}
.agent-usage-loading {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
}
.agent-usage-placeholder {
  height: 280px;
  margin-top: var(--openbot-space-6);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface);
}
@container (min-width: 850px) {
  .agent-usage-overview {
    grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.5fr);
    gap: calc(var(--openbot-space-6) * 2);
  }
  .agent-usage-body {
    padding: var(--openbot-space-8) calc(var(--openbot-space-6) * 2);
    gap: calc(var(--openbot-space-6) * 2);
  }
}
@container (max-width: 1000px) {
  .agent-usage-totals > div:nth-child(n + 7) {
    display: none;
  }
}
@container (max-width: 820px) {
  .agent-usage-totals > div:nth-child(n + 6) {
    display: none;
  }
}
@container (max-width: 660px) {
  .agent-usage-totals > div:nth-child(n + 5) {
    display: none;
  }
}
@container (max-width: 540px) {
  .agent-usage-totals > div:nth-child(n + 4) {
    display: none;
  }
}
@container (max-width: 400px) {
  .agent-usage-totals > div:nth-child(n + 3) {
    display: none;
  }
}
@container (max-width: 480px) {
  .agent-usage-hero {
    font-size: var(--openbot-text-display);
  }
  .agent-usage-body {
    padding: var(--openbot-space-4);
  }
  .agent-usage-header {
    padding: var(--openbot-space-3);
  }
  .agent-usage-controls {
    margin-left: 0;
    justify-content: flex-start;
  }
  .agent-usage-section-header {
    flex-wrap: wrap;
  }
}
.agent-usage-controls .ui-select {
  width: auto;
  flex-shrink: 0;
}
.agent-usage-controls .ui-select-trigger {
  width: max-content;
  border-color: var(--openbot-border);
  background: var(--openbot-bg-control);
  box-shadow: none;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.app-frame-panes.server-connection-workspace {
  position: relative;
  grid-column: -2 / -1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.server-connection-workspace > .app-loading {
  z-index: 1;
}
.server-connection-content > * {
  min-height: 0;
  flex: 1;
}
.schedule-pane {
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  background: var(--openbot-bg-canvas);
  padding: var(--openbot-space-4) var(--openbot-space-6) var(--openbot-space-6);
}
.tasks-page {
  display: flex;
  height: 100%;
  min-height: 0;
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
}
.tasks-page-scroll {
  min-width: 0;
  flex: 1;
  overflow-y: auto;
  padding: 0 var(--openbot-space-6) var(--openbot-space-8);
}
.tasks-page-column {
  display: flex;
  max-width: 36rem;
  flex-direction: column;
  gap: var(--openbot-space-1);
  margin: 0 auto;
}
.tasks-page-header {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-6) var(--openbot-space-2) var(--openbot-space-3);
}
.tasks-page-header .ui-icon-button {
  margin-left: calc(-1 * var(--openbot-space-2));
}
.tasks-page-header h2 {
  min-width: 0;
  flex: 1;
  margin: 0;
  font-size: var(--openbot-text-xl);
  font-weight: var(--openbot-weight-semibold);
}
.tasks-page-agent-option > span {
  flex: 1 1 auto;
}
.tasks-page-header h2 span {
  color: var(--openbot-text-muted);
  font-weight: var(--openbot-weight-regular);
}
.tasks-page-avatar.agent-avatar {
  --agent-avatar-optical-offset: -2px;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
.tasks-page-composer.composer-wrap {
  position: sticky;
  z-index: 3;
  top: 0;
  margin-bottom: var(--openbot-space-2);
  background: var(--openbot-bg-canvas);
  padding: var(--openbot-space-1) 0 0;
}
.tasks-page-composer .composer-notice {
  margin-bottom: var(--openbot-space-2);
}
.tasks-page-composer-agent {
  display: flex;
  min-width: 0;
  align-items: center;
}
.tasks-page-agent.ui-button {
  gap: var(--openbot-space-1-5);
  font-size: var(--openbot-text-sm);
  color: var(--openbot-text-secondary);
}
.tasks-page-composer-agent .tasks-page-agent.ui-button {
  margin-left: calc(-1 * var(--openbot-space-1));
}
.tasks-page-agent-face {
  display: flex;
  flex: 0 0 auto;
}
.tasks-page-agent-face[data-entering] {
  animation: tasks-page-face-in 420ms cubic-bezier(0.34, 1.36, 0.64, 1) both;
}
@keyframes tasks-page-face-in {
  from {
    opacity: 0;
    scale: 0.6;
    filter: blur(2px);
  }
}
.tasks-page-agent-chevron {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  color: var(--openbot-text-muted);
  transition: transform var(--openbot-duration-normal) ease;
}
.tasks-page-agent[aria-expanded="true"] .tasks-page-agent-chevron {
  transform: rotate(180deg);
}
.tasks-page-agent-check {
  color: var(--openbot-text-primary);
}
.tasks-page-took {
  display: flex;
  min-height: var(--openbot-control-sm);
  align-items: center;
  gap: var(--openbot-space-1-5);
  margin-bottom: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  animation: tasks-page-rise var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.tasks-page-took .ui-button-size-sm {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.tasks-page-took-agent {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  padding: 0 var(--openbot-space-1);
}
.tasks-page-took-text {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tasks-page-section {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-0-5);
}
.tasks-page-section + .tasks-page-section {
  margin-top: var(--openbot-space-4);
}
.tasks-page-section-heading {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  margin: 0;
  padding: var(--openbot-space-1) var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.tasks-page-count {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
  font-variant-numeric: tabular-nums;
}
.tasks-page-list {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-0-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.tasks-page-row.ui-button {
  display: grid;
  width: 100%;
  height: var(--openbot-control-lg);
  align-items: center;
  justify-content: stretch;
  grid-template-columns: 16px minmax(0, 1fr) auto auto;
  gap: var(--openbot-space-3);
  border-radius: var(--openbot-radius-md);
  padding: 0 var(--openbot-space-2);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-regular);
  text-align: left;
  --task-list-glyph: 14px;
}
.tasks-page-row[data-selected] {
  background: var(--openbot-bg-control-active);
}
.tasks-page-section[data-closed] .tasks-page-row:not([data-selected]) {
  opacity: 0.55;
}
.tasks-page-row-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tasks-page-status {
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tasks-page-status[data-tone="working"] {
  color: var(--openbot-text-secondary);
}
.tasks-page-status[data-tone="attention"] {
  color: var(--openbot-accent);
}
.tasks-page-status[data-tone="danger"] {
  color: var(--openbot-danger-text);
}
.tasks-page-show-all.ui-button {
  align-self: flex-start;
  color: var(--openbot-text-muted);
}
li[data-arrived] > .tasks-page-row {
  animation: tasks-page-arrive 1600ms var(--openbot-ease-out);
}
.tasks-page-side {
  position: relative;
  flex: 0 0 380px;
  overflow: hidden;
  transition: flex-basis var(--openbot-duration-overlay) var(--openbot-ease-out), opacity var(--openbot-duration-overlay) var(--openbot-ease-out);
}
@starting-style {
  .tasks-page-side {
    flex-basis: 0;
    opacity: 0.6;
  }
}
.tasks-page-side[data-closing] {
  flex-basis: 0;
  opacity: 0.6;
  transition-duration: var(--openbot-duration-slow);
  transition-timing-function: cubic-bezier(0.5, 0, 0.75, 0);
}
.tasks-page-side-content {
  position: absolute;
  inset: 0 auto 0 0;
  display: flex;
  width: 380px;
  --browser-panel-width: 100%;
}
.tasks-page-side-content > * {
  flex: 1;
  min-width: 0;
}
.tasks-page-side-content[data-entering] {
  animation: tasks-page-side-swap var(--openbot-duration-normal) var(--openbot-ease-out);
}
@keyframes tasks-page-side-swap {
  from {
    opacity: 0;
    transform: translateX(6px);
  }
}
@keyframes tasks-page-rise {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}
@keyframes tasks-page-arrive {
  from {
    background: var(--openbot-bg-control-active);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tasks-page-took, .tasks-page-agent-face[data-entering], li[data-arrived] > .tasks-page-row, .tasks-page-side-content[data-entering] {
    animation: none;
  }
  .tasks-page-side, .tasks-page-agent-chevron {
    transition: none;
  }
}
.ui-chart {
  width: 100%;
  height: 300px;
  min-width: 0;
  font-size: var(--openbot-text-sm);
}
.ui-chart-tooltip {
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-primary);
  padding: var(--openbot-space-3);
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
.ui-chart-tooltip-row {
  display: grid;
  grid-template-columns: var(--openbot-space-4) auto 1fr;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-top: var(--openbot-space-2);
}
.ui-chart-tooltip-value {
  text-align: right;
}
.ui-chart-tooltip-mark {
  display: flex;
  align-items: center;
}
.ui-chart-tooltip-total {
  border-top: 1px solid var(--openbot-border-strong);
  padding-top: var(--openbot-space-2);
  color: var(--openbot-text-muted);
}
.storage-usage {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
}
.storage-usage [data-group="workspaces"] {
  --storage-color: var(--openbot-chart-storage-workspaces);
}
.storage-usage [data-group="files"] {
  --storage-color: var(--openbot-chart-storage-files);
}
.storage-usage [data-group="chats"] {
  --storage-color: var(--openbot-chart-storage-chats);
}
.storage-usage [data-group="downloads"] {
  --storage-color: var(--openbot-chart-storage-downloads);
}
.storage-usage [data-group="runtimes"] {
  --storage-color: var(--openbot-chart-storage-runtimes);
}
.storage-usage [data-group="app"] {
  --storage-color: var(--openbot-chart-storage-app);
}
.storage-usage-bar {
  display: flex;
  height: 10px;
  gap: var(--openbot-space-0-5);
}
.storage-usage-segment {
  min-width: 4px;
  flex-basis: 0;
  border-radius: var(--openbot-radius-xs);
  background: var(--storage-color);
  transition: opacity var(--openbot-duration-fast) ease;
}
.storage-usage[data-hovering="true"] :is(.storage-usage-segment, .storage-usage-legend-row):not([data-active]) {
  opacity: 0.35;
}
.storage-usage-legend {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--openbot-space-1) var(--openbot-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.storage-usage-legend-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-1) 0;
  font-size: var(--openbot-text-md);
  transition: opacity var(--openbot-duration-fast) ease;
}
.storage-usage-swatch {
  width: var(--openbot-space-2);
  height: var(--openbot-space-2);
  align-self: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--storage-color);
}
.storage-usage-legend-label {
  overflow: hidden;
  color: var(--openbot-text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.storage-usage-legend-value {
  color: var(--openbot-text-primary);
  font-variant-numeric: tabular-nums;
}
.storage-usage-legend-percent {
  min-width: 4ch;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.storage-overview {
  container-type: inline-size;
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--openbot-space-8);
  color: var(--openbot-text-primary);
}
.storage-summary {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
}
.storage-summary-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--openbot-space-3);
}
.storage-summary-label {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.storage-summary-total {
  margin: var(--openbot-space-1) 0;
  font-size: var(--openbot-text-display);
  font-weight: var(--openbot-weight-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.storage-summary-total-skeleton {
  width: 140px;
  height: 36px;
  margin: var(--openbot-space-1) 0;
}
.storage-summary-caption {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.storage-message {
  display: flex;
  align-items: flex-start;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-grouped);
}
.storage-message-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--openbot-text-muted);
  stroke-width: var(--openbot-icon-stroke);
}
.storage-message[role="alert"] .storage-message-icon {
  color: var(--openbot-danger-text);
}
.storage-message-title {
  margin: 0;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.storage-message-description {
  margin: var(--openbot-space-0-5) 0 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.storage-section {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
}
.storage-section-heading-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--openbot-space-3);
}
.storage-section-heading {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
}
.storage-section-aside {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.storage-rows {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-grouped);
  list-style: none;
}
.storage-rows > li + li {
  border-top: 1px solid var(--openbot-border-grouped);
}
.storage-row.ui-button {
  display: flex;
  width: 100%;
  height: auto;
  min-height: 52px;
  align-items: center;
  justify-content: flex-start;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-2) var(--openbot-space-4);
  border-radius: 0;
  text-align: left;
  font-weight: var(--openbot-weight-regular);
}
.storage-row-avatar {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
}
.storage-row-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: var(--openbot-space-0-5);
}
.storage-row-title {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.storage-row-meta {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.storage-row-share {
  width: 96px;
  height: 6px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-hover);
}
.storage-row-share-fill {
  display: block;
  height: 100%;
  min-width: 4px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-muted);
}
.storage-row-size {
  display: flex;
  min-width: 72px;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-variant-numeric: tabular-nums;
}
.storage-row-percent {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.storage-row-chevron {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--openbot-text-dim);
  stroke-width: var(--openbot-icon-stroke);
}
.storage-cleanup-row {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-2) var(--openbot-space-4);
}
.storage-cleanup-row .storage-row-meta {
  white-space: normal;
}
.storage-subview-header {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.storage-subview-back > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.storage-subview-header h3 {
  margin: 0;
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
}
@container (max-width: 520px) {
  .storage-row-share {
    display: none;
  }
}
.file-list {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--openbot-space-3);
}
.file-list-toolbar {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.file-list-search {
  position: relative;
  min-width: 0;
  flex: 1;
}
.file-list-search-icon {
  position: absolute;
  top: 50%;
  left: var(--openbot-space-2);
  width: 14px;
  height: 14px;
  color: var(--openbot-text-muted);
  pointer-events: none;
  stroke-width: var(--openbot-icon-stroke);
  transform: translateY(-50%);
}
.file-list-search .file-list-search-input {
  width: 100%;
  padding-left: calc(var(--openbot-space-2) + 14px + var(--openbot-space-1-5));
}
.file-list-toolbar > .ui-select {
  width: auto;
  flex: 0 0 auto;
}
.file-list-sort {
  width: 120px;
}
.file-list[data-compact="true"] .file-list-sort {
  width: auto;
}
.file-list-filters {
  display: flex;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  flex-wrap: wrap;
  gap: var(--openbot-space-1);
}
.file-list[data-compact="true"] .file-list-filters {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.file-list-filter.ui-button {
  flex: 0 0 auto;
  gap: var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-pill);
  color: var(--openbot-text-muted);
}
.file-list-filter.ui-button[aria-pressed="true"] {
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
}
.file-list-filter-count {
  color: var(--openbot-text-muted);
  font-variant-numeric: tabular-nums;
}
.file-list-filter[aria-pressed="true"] .file-list-filter-count {
  color: var(--openbot-text-secondary);
}
.file-list-summary {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.file-list-group {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
}
.file-list-group + .file-list-group {
  margin-top: var(--openbot-space-2);
}
.file-list-group-heading {
  margin: 0;
  padding: 0 var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.file-list-rows {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-0-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.file-list-skeleton {
  height: 48px;
  border-radius: var(--openbot-radius-md);
}
.file-list-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-8) var(--openbot-space-4);
  text-align: center;
}
.file-list-message-icon {
  width: 20px;
  height: 20px;
  color: var(--openbot-danger-text);
  stroke-width: var(--openbot-icon-stroke);
}
.file-list-message-title {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.file-list-message-description {
  max-width: 320px;
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.file-row {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
  padding-right: var(--openbot-space-1);
  border-radius: var(--openbot-radius-md);
}
.file-row:hover, .file-row:focus-within {
  background: var(--openbot-hover);
}
.file-row-main.ui-button {
  display: flex;
  min-width: 0;
  height: auto;
  flex: 1;
  align-items: center;
  justify-content: flex-start;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  text-align: left;
  font-weight: var(--openbot-weight-regular);
}
.file-row-main.ui-button:hover {
  background: transparent;
}
.file-row-main.ui-button:disabled {
  opacity: 1;
}
.files-file-visual {
  --file-reference-color: var(--openbot-file-default);
  --file-reference-soft: var(--openbot-file-default-soft);
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border-radius: var(--openbot-radius-md);
  background: var(--file-reference-soft);
  color: var(--file-reference-color);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: 0.02em;
}
.files-file-visual[data-file-tone="document"] {
  color: var(--openbot-danger-text);
}
.files-file-visual[data-status="missing"], .files-file-visual[data-status="failed"] {
  opacity: 0.5;
}
.files-file-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.file-row-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: var(--openbot-space-0-5);
}
.file-row-name {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-row[data-status="missing"] .file-row-name {
  color: var(--openbot-text-muted);
  text-decoration: line-through;
  text-decoration-color: var(--openbot-text-dim);
}
.file-row-meta {
  display: flex;
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  white-space: pre;
}
.file-row-meta-part {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-row-meta-part:first-child {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}
.file-row-status {
  flex: 0 0 auto;
}
.file-row-status.z-badge-variant-destructive-light {
  color: var(--openbot-danger-text);
}
.file-row-menu-trigger {
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
}
.file-row-menu-trigger > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: var(--openbot-icon-stroke);
}
.files-button-icon {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.agent-files-view {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--openbot-bg-canvas);
}
.agent-files-body {
  container-type: inline-size;
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: var(--openbot-space-6);
  overflow-y: auto;
  padding: var(--openbot-space-4);
}
.agent-files-summary {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-3);
}
.agent-files-total-label {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.agent-files-total {
  margin: var(--openbot-space-0-5) 0 0;
  font-size: var(--openbot-text-3xl);
  font-weight: var(--openbot-weight-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.agent-files-total-skeleton {
  width: 96px;
  height: 28px;
  margin-top: var(--openbot-space-0-5);
}
.agent-files-tiles {
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-grouped);
}
.agent-files-tile {
  display: flex;
  min-height: 36px;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-2) var(--openbot-space-3);
}
.agent-files-tile + .agent-files-tile {
  border-top: 1px solid var(--openbot-border-grouped);
}
.agent-files-tile dt {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-1);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
}
.agent-files-tile-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-files-tile dd {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-variant-numeric: tabular-nums;
}
.agent-files-tile-action {
  flex: 0 0 auto;
  margin-block: calc(var(--openbot-space-1) * -1);
  color: var(--openbot-text-muted);
}
.agent-files-tile-skeleton {
  width: 64px;
  height: 18px;
}
.agent-files-section {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
}
.conversation-files-summary {
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
.conversation-files-content {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  padding: var(--openbot-space-3);
}
.agent-import-guide {
  display: flex;
  max-width: 560px;
  flex-direction: column;
  gap: var(--openbot-space-6);
}
.agent-import-intro {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1-5);
}
.agent-import-heading {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-xl);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: -0.01em;
}
.agent-import-lede {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: 1.5;
}
.agent-import-steps {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.agent-import-step {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: var(--openbot-space-4);
  padding-bottom: var(--openbot-space-6);
}
.agent-import-step:last-child {
  padding-bottom: 0;
}
.agent-import-step:not(:last-child)::before {
  position: absolute;
  top: 28px;
  bottom: 4px;
  left: 11.5px;
  width: 1px;
  background: var(--openbot-border-grouped);
  content: "";
}
.agent-import-marker {
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  font-weight: var(--openbot-weight-medium);
}
.agent-import-step-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--openbot-space-2);
  padding-top: 2px;
}
.agent-import-step-title {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.agent-import-step-note {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 1.45;
}
.agent-import-setup {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--openbot-space-3);
}
.agent-import-setup .ui-sliding-tabs-content-slot {
  width: 100%;
}
.agent-import-setup-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--openbot-space-2);
}
.agent-import-card {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-3);
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-grouped);
}
.agent-import-card-icon {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: none;
  color: var(--openbot-text-secondary);
  stroke-width: var(--openbot-icon-stroke);
}
.agent-import-card-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}
.agent-import-card-name {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.agent-import-card-meta {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-import-prompt {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-3);
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-grouped);
}
.agent-import-prompt-text {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-import-prompt svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.agent-import-card .ui-button svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.agent-import-picker.ui-button {
  display: flex;
  width: 100%;
  height: auto;
  min-height: 64px;
  align-items: center;
  justify-content: flex-start;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-grouped);
  text-align: left;
  font-weight: var(--openbot-weight-regular);
}
.agent-import-picker.ui-button:hover:not(:disabled, [aria-disabled="true"]) {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-control-hover);
}
.agent-import-picker-icon {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  flex: 0 0 auto;
  color: var(--openbot-text-secondary);
  stroke-width: var(--openbot-icon-stroke);
}
.agent-import-picker-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--openbot-space-0-5);
}
.agent-import-picker-title {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.agent-import-picker-meta {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.agent-import-row {
  display: flex;
  min-height: 52px;
  align-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3) var(--openbot-space-4);
}
label.agent-import-row {
  cursor: pointer;
}
label.agent-import-row:hover {
  background: var(--openbot-hover);
}
label.agent-import-row:has(input:disabled) {
  cursor: default;
}
.agent-import-row-note {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 1.4;
}
.agent-import-notes {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  margin: var(--openbot-space-1) 0 0;
  padding: 0;
  list-style: none;
}
.agent-import-done {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.agent-import-done-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  color: var(--openbot-success-text);
  stroke-width: var(--openbot-icon-stroke);
}
.agent-import-skipped-icon {
  color: var(--openbot-warning-text);
}
.agent-import-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
}
.agent-import-row-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-1);
}
.agent-import-name-hint {
  display: inline-flex;
  flex: none;
  color: var(--openbot-text-muted);
  border-radius: var(--openbot-radius-sm);
}
.agent-import-name-hint:hover, .agent-import-name-hint:focus-visible {
  color: var(--openbot-text-secondary);
}
.agent-import-name-hint svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  stroke-width: var(--openbot-icon-stroke);
}
.agent-import-members {
  display: flex;
  flex: none;
  width: 44px;
}
.agent-import-member-avatar {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: var(--openbot-radius-pill);
  box-shadow: 0 0 0 2px var(--openbot-bg-grouped);
}
.agent-import-member-avatar + .agent-import-member-avatar {
  margin-left: -11px;
}
.agent-import-channel-icon {
  width: 28px;
  height: var(--openbot-icon-md);
  flex: none;
  color: var(--openbot-text-secondary);
  stroke-width: var(--openbot-icon-stroke);
}
.instance-transfer {
  display: flex;
  max-width: 720px;
  flex-direction: column;
  gap: var(--openbot-space-4);
}
.instance-transfer-start {
  justify-content: flex-start;
}
.instance-transfer-back {
  align-self: flex-start;
  padding-inline: 0;
}
.instance-transfer-link {
  align-self: flex-start;
  padding-inline: 0;
}
.instance-transfer-chip {
  padding: 0 var(--openbot-space-1-5);
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-pill);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  white-space: nowrap;
}
.instance-transfer-flow {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  margin: 0;
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-lg);
  list-style: none;
}
.instance-transfer-flow-item {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-1-5);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  text-align: center;
}
.instance-transfer-flow-icon {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  color: var(--openbot-text-primary);
}
.instance-transfer-flow-arrow {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: none;
  color: var(--openbot-text-muted);
}
.instance-transfer-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--openbot-space-3);
}
.instance-transfer-tile {
  display: flex;
  height: auto;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-4);
  text-align: left;
  white-space: normal;
}
.instance-transfer-tile-icon {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  margin-bottom: var(--openbot-space-2);
}
.instance-transfer-tile-title {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.instance-transfer-tile-text {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
}
.instance-transfer-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--openbot-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.instance-transfer-summary-item {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
}
.instance-transfer-summary-icon {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: none;
  color: var(--openbot-text-muted);
}
.instance-transfer-not-moved {
  display: flex;
  align-items: flex-start;
  gap: var(--openbot-space-2);
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 1.45;
}
.instance-transfer-not-moved-icon {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: none;
  margin-top: 2px;
}
@media (max-width: 640px) {
  .instance-transfer-tiles, .instance-transfer-summary {
    grid-template-columns: minmax(0, 1fr);
  }
}
.settings-modal-tabs-root {
  display: contents;
}
.settings-modal {
  --openbot-bg-surface: var(--openbot-bg-control);
  --openbot-text-muted: var(--openbot-settings-text-muted);
  width: min(880px, calc(100vw - 48px));
  height: min(600px, calc(100dvh - 48px));
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  overflow: hidden;
  outline: none;
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
  transform-origin: center;
  animation: settings-modal-in var(--openbot-duration-overlay) var(--openbot-ease-out) both;
  will-change: transform, opacity;
}
.settings-modal-nav {
  display: grid;
  gap: var(--openbot-space-1);
}
.settings-modal-nav-item {
  position: relative;
  width: 100%;
  height: auto;
  min-height: var(--openbot-control-md);
  display: grid;
  grid-template-columns: var(--openbot-icon-md) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-2);
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  padding: 0 var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font: inherit;
  font-size: var(--openbot-text-md);
  text-align: left;
  transition: background-color var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease;
}
.settings-modal-nav-item svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: var(--openbot-icon-stroke);
}
.settings-modal-nav-item[aria-current="page"] {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}
.settings-modal-nav-item {
  cursor: pointer;
}
.settings-modal-nav-item:focus-visible {
  outline: 0;
  box-shadow: var(--openbot-focus-ring);
}
@media (hover: hover) and (pointer: fine) {
  .settings-modal-nav-item:not([aria-current="page"]):hover {
    background: var(--openbot-hover);
    color: var(--openbot-text-primary);
  }
}
.settings-modal-main {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--openbot-bg-canvas);
}
.settings-modal-footer {
  display: contents;
}
.settings-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--openbot-space-4);
  padding: var(--openbot-space-6) var(--openbot-space-6) var(--openbot-space-4);
}
.settings-modal-title {
  margin: 0;
  font-size: var(--openbot-text-2xl);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-2xl);
  letter-spacing: var(--openbot-tracking-tight);
}
.settings-modal-description {
  margin: var(--openbot-space-1) 0 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.settings-modal-scroll-frame {
  position: relative;
  min-height: 0;
  overflow: hidden;
}
.settings-modal-scroll-frame::before, .settings-modal-scroll-frame::after {
  position: absolute;
  right: var(--openbot-space-2);
  left: 0;
  z-index: 1;
  height: var(--openbot-space-8);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--openbot-duration-normal) ease;
  content: "";
}
.settings-modal-scroll-frame::before {
  top: 0;
  background: linear-gradient( to bottom, var(--openbot-bg-canvas) 0%, var(--openbot-bg-canvas) 28%, var(--openbot-bg-canvas-clear) 100% );
}
.settings-modal-scroll-frame::after {
  bottom: 0;
  background: linear-gradient( to top, var(--openbot-bg-canvas) 0%, var(--openbot-bg-canvas) 28%, var(--openbot-bg-canvas-clear) 100% );
}
.settings-modal-scroll-frame[data-scroll-up]::before, .settings-modal-scroll-frame[data-scroll-down]::after {
  opacity: 1;
}
.settings-modal-content {
  height: 100%;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: var(--openbot-space-6);
  overflow-y: auto;
  padding: 0 var(--openbot-space-6) calc(var(--openbot-space-6) + var(--settings-modal-floating-space, 0px));
  scrollbar-gutter: stable;
}
.settings-modal-tab-panel {
  display: grid;
  align-content: start;
  gap: var(--openbot-space-6);
  animation: settings-modal-tab-in var(--openbot-duration-fast) var(--openbot-ease-out) both;
  will-change: transform, opacity;
}
.settings-modal-tab-panel:not([data-selected]) {
  display: none;
}
.settings-modal-card:is(.ui-card, .ui-item-group) {
  width: 100%;
  display: grid;
  overflow: hidden;
  border: 0;
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  box-shadow: none;
}
.settings-modal-card.ui-card {
  padding: 0 var(--openbot-space-4);
}
.settings-modal-card > .ui-switch-field, .settings-modal-card > .ui-item {
  padding: var(--openbot-space-3) var(--openbot-space-4);
}
.settings-modal-row {
  min-height: 64px;
}
.settings-modal-card > .ui-switch-field {
  width: 100%;
  justify-content: space-between;
  padding: var(--openbot-space-3) var(--openbot-space-4);
}
.settings-modal-card > :not(:first-child) {
  position: relative;
  border-top: 0;
}
.settings-modal-card > :not(:first-child)::before {
  position: absolute;
  top: 0;
  right: var(--openbot-space-4);
  left: var(--openbot-space-4);
  height: 1px;
  background: var(--openbot-border);
  pointer-events: none;
  content: "";
}
.settings-modal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-4);
}
.settings-modal-row-title {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-lg);
}
.settings-modal :where(.ui-item-title, .ui-switch-label) {
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
.settings-modal :where(.ui-item-description, .ui-switch-description), .settings-modal :where(.ui-text)[data-variant="caption"] {
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.settings-modal .ui-item-description {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
.settings-modal :where(.ui-item-content, .ui-switch-copy) {
  gap: var(--openbot-space-0-5);
}
.settings-modal :where(.ui-button, .ui-input, .ui-textarea, .ui-native-select) {
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
.settings-modal :where(.ui-button-variant-default) {
  background: var(--openbot-accent);
  color: var(--openbot-text-primary);
}
.settings-modal :where(.ui-button-variant-outline, .ui-button-variant-secondary) {
  background: var(--openbot-bg-surface-raised);
}
.settings-modal :where(.ui-button-variant-destructive) {
  background: var(--openbot-danger);
  color: var(--openbot-text-primary);
}
.settings-modal .ui-switch[data-checked] {
  background: var(--openbot-accent);
}
.settings-modal .ui-switch-thumb[data-checked] {
  background: var(--openbot-text-primary);
}
@media (hover: hover) and (pointer: fine) {
  .settings-modal :where(.ui-button-variant-default):hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-accent-hover);
  }
  .settings-modal :where(.ui-button-variant-destructive):hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-danger-hover);
    color: var(--openbot-text-primary);
  }
}
:is(.app-settings-modal-shell, .server-settings-modal-shell).settings-modal {
  width: min(920px, calc(100vw - 48px));
  height: min(640px, calc(100dvh - 48px));
  grid-template-columns: 196px minmax(0, 1fr);
  border-radius: var(--openbot-radius-card);
  box-shadow: var(--openbot-shadow-raised), 0 0 0 1px var(--openbot-dialog-ring);
}
:is(.app-settings-modal-shell, .server-settings-modal-shell) .settings-modal-nav {
  gap: var(--openbot-space-1);
}
:is(.app-settings-modal-shell, .server-settings-modal-shell) .settings-modal-nav-item {
  min-height: var(--openbot-control-md);
  padding-inline: var(--openbot-space-3);
  font-size: var(--openbot-text-lg);
}
:is(.app-settings-modal-shell, .server-settings-modal-shell) .settings-modal-nav-item[data-selected] {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}
:is(.app-settings-modal-shell, .server-settings-modal-shell) .settings-modal-header {
  align-items: center;
  padding: var(--openbot-space-4) var(--openbot-space-4) var(--openbot-space-6) var(--openbot-space-8);
}
:is(.app-settings-modal-shell, .server-settings-modal-shell) .settings-modal-description {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
:is(.app-settings-modal-shell, .server-settings-modal-shell) .settings-modal-content {
  gap: var(--openbot-space-6);
  padding: 0 var(--openbot-space-8) calc(var(--openbot-space-8) + var(--settings-modal-floating-space, 0px));
}
:is(.app-settings-modal-shell, .server-settings-modal-shell) .settings-modal-tab-panel {
  gap: var(--openbot-space-6);
  animation: none;
  will-change: auto;
}
:is(.app-settings-modal-shell, .server-settings-modal-shell) .ui-settings-section {
  gap: var(--openbot-space-2);
}
:is(.app-settings-modal-shell, .server-settings-modal-shell) .ui-settings-section-header {
  padding-inline: 0;
}
:is(.app-settings-modal-shell, .server-settings-modal-shell) .ui-settings-section-heading {
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.provider-picker-embedded {
  border: 0;
}
.provider-picker-embedded .provider-picker-list {
  overflow: hidden;
  border: 0;
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
}
.provider-picker-embedded .provider-picker-option {
  position: relative;
  min-height: 64px;
  border: 0;
  background: transparent;
  padding: 0 var(--openbot-space-4);
}
.provider-picker-embedded .provider-picker-option-selection {
  min-height: 64px;
  padding: var(--openbot-space-3) 0;
}
.provider-picker-embedded .provider-picker-check-error.provider-picker-used-by {
  margin-top: calc(-1 * var(--openbot-space-4));
  padding: 0 0 var(--openbot-space-3) 54px;
}
.provider-picker-embedded .provider-picker-accounts {
  margin-top: calc(-1 * var(--openbot-space-2));
  padding: 0 0 var(--openbot-space-2) 54px;
}
.provider-picker-embedded .provider-picker-option + .provider-picker-option, .provider-picker-embedded .provider-picker-option-custom {
  border-top: 0;
}
.provider-picker-embedded .provider-picker-option + .provider-picker-option::before, .provider-picker-embedded .provider-picker-option-custom::before {
  position: absolute;
  top: 0;
  right: var(--openbot-space-4);
  left: var(--openbot-space-4);
  height: 1px;
  background: var(--openbot-border);
  pointer-events: none;
  content: "";
}
.provider-picker-embedded .provider-picker-actions {
  gap: var(--openbot-space-2);
}
.provider-picker-embedded .provider-picker-install, .provider-picker-embedded .provider-picker-custom-count {
  margin-right: 0;
}
.settings-modal .ui-button-variant-default.provider-picker-install:not(.provider-picker-connect) {
  background: var(--openbot-surface-light);
  color: var(--openbot-text-on-light);
}
@media (hover: hover) and (pointer: fine) {
  .settings-modal .ui-button-variant-default.provider-picker-install:not(.provider-picker-connect):hover:not(:disabled):not( [data-disabled] ) {
    background: var(--openbot-surface-light);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--openbot-surface-light) 82%, transparent);
    }
  }
}
.provider-picker-embedded .provider-picker-option:hover:not(.provider-picker-option-unavailable), .provider-picker-embedded .provider-picker-option:focus-within, .provider-picker-embedded .provider-picker-option-selected {
  background: var(--openbot-bg-control-hover);
}
.settings-modal .provider-picker-name {
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-lg);
}
.settings-modal :where(.provider-picker-email, .provider-picker-check-error) {
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.settings-modal .provider-picker-account .provider-picker-name {
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.settings-modal .provider-picker-account .provider-picker-email {
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.settings-modal .provider-picker-status {
  font-variant-numeric: tabular-nums;
}
.app-settings-modal-shell .settings-modal-select {
  width: 168px;
}
.app-settings-modal-shell .settings-modal-select .ui-select-trigger {
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-secondary);
}
.app-settings-modal-shell .settings-modal-update-track-select {
  width: 112px;
}
.app-settings-modal-shell .settings-modal-update-actions {
  flex-wrap: wrap;
}
.app-settings-modal-shell .settings-modal-update-status {
  text-wrap: pretty;
}
.app-settings-modal-shell .settings-modal-update-status-active {
  color: var(--openbot-accent);
}
.app-settings-modal-shell .settings-modal-error {
  color: var(--openbot-danger);
}
.settings-identity-name-row.ui-item, .settings-identity-image-row.ui-item {
  min-height: 72px;
}
.settings-identity-name-control {
  --settings-identity-error-duration: 280ms;
  position: relative;
  width: 220px;
  height: var(--openbot-control-md);
}
.settings-identity-name-input.ui-input {
  width: 100%;
  transition: border-color var(--openbot-duration-normal) ease-out;
  will-change: transform;
}
.settings-identity-name-input.is-shaking {
  animation: settings-identity-name-shake 280ms linear;
}
.settings-identity-name-error {
  position: absolute;
  top: calc(100% + var(--openbot-space-0-5));
  right: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--settings-identity-error-duration) ease-out, visibility 0s linear var(--settings-identity-error-duration);
}
.settings-identity-name-control[data-invalid] .settings-identity-name-error {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--settings-identity-error-duration) ease-out, visibility 0s linear;
}
.settings-identity-image-control {
  gap: var(--openbot-space-2);
}
.settings-identity-image-picker {
  position: relative;
  display: flex;
}
.settings-identity-image-trigger {
  position: relative;
  width: calc(var(--openbot-control-xl) + var(--openbot-space-2));
  height: calc(var(--openbot-control-xl) + var(--openbot-space-2));
  overflow: hidden;
}
.settings-modal-save-bar {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-4);
  border-top: 1px solid var(--openbot-border);
  background: var(--openbot-bg-surface);
  padding: var(--openbot-space-3) var(--openbot-space-6);
}
.settings-modal-save-actions {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
}
.settings-modal-readonly-value {
  min-width: 180px;
  max-width: 300px;
  overflow-wrap: anywhere;
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
  text-align: right;
  user-select: text;
}
.settings-modal-profile-photo-trigger {
  border-radius: var(--openbot-radius-pill);
}
.settings-modal-avatar {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-hover);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
}
.settings-modal-avatar > img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  outline: 1px solid var(--openbot-image-outline);
  outline-offset: -1px;
}
@keyframes settings-identity-name-shake {
  0%, 100% {
    transform: translateX(0);
  }
  28.57% {
    transform: translateX(6px);
  }
  57.14% {
    transform: translateX(-6px);
  }
  78.57% {
    transform: translateX(4px);
  }
}
@keyframes settings-modal-tab-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes settings-modal-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.965);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (max-width: 720px) {
  .settings-modal {
    width: calc(100vw - 24px);
    height: calc(100dvh - 24px);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  .settings-modal-nav {
    display: flex;
    overflow-x: auto;
  }
  .settings-modal-nav-item {
    width: auto;
    flex: 0 0 auto;
  }
  .settings-modal-header {
    padding: var(--openbot-space-4);
  }
  .settings-modal-content {
    gap: var(--openbot-space-4);
    padding: 0 var(--openbot-space-4) calc(var(--openbot-space-4) + var(--settings-modal-floating-space, 0px));
  }
  :is(.app-settings-modal-shell, .server-settings-modal-shell).settings-modal {
    width: calc(100vw - 24px);
    height: calc(100dvh - 24px);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  :is(.app-settings-modal-shell, .server-settings-modal-shell) .settings-modal-header {
    padding: var(--openbot-space-4);
  }
  :is(.app-settings-modal-shell, .server-settings-modal-shell) .settings-modal-content, :is(.app-settings-modal-shell, .server-settings-modal-shell) .settings-modal-tab-panel {
    gap: var(--openbot-space-6);
  }
  :is(.app-settings-modal-shell, .server-settings-modal-shell) .settings-modal-content {
    padding: 0 var(--openbot-space-4) var(--openbot-space-4);
  }
  .settings-identity-name-row, .settings-identity-image-row, .settings-modal-account-email-row {
    align-items: flex-start;
    flex-direction: column;
  }
  .settings-identity-name-control {
    width: min(320px, 100%);
    max-width: 320px;
    height: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--openbot-control-md) var(--openbot-leading-sm);
    align-items: stretch;
    row-gap: var(--openbot-space-0-5);
  }
  .settings-identity-name-error {
    position: static;
  }
  .settings-identity-image-control, .settings-modal-account-email-row .ui-item-actions {
    width: 100%;
    max-width: none;
    justify-content: space-between;
  }
  .settings-modal-readonly-value {
    min-width: 0;
    max-width: none;
    text-align: left;
  }
  .settings-modal-save-bar {
    padding-inline: var(--openbot-space-4);
  }
}
@media (max-width: 520px) {
  .settings-modal-save-bar {
    align-items: flex-start;
    flex-direction: column;
  }
  .settings-modal-save-actions {
    width: 100%;
    justify-content: flex-end;
  }
  .app-settings-modal-shell .settings-modal-row.ui-item {
    align-items: flex-start;
    flex-direction: column;
  }
  .app-settings-modal-shell .settings-modal-row .ui-item-actions, .app-settings-modal-shell :is(.settings-modal-select, .settings-modal-update-track-select) {
    width: 100%;
  }
  .app-settings-modal-shell .settings-modal-update-actions {
    justify-content: flex-end;
  }
}
@media (prefers-reduced-motion: reduce) {
  .settings-modal {
    animation: none;
  }
  .settings-modal-scroll-frame::before, .settings-modal-scroll-frame::after {
    transition: none;
  }
  .settings-modal-tab-panel {
    animation: none;
  }
  .settings-identity-name-input.is-shaking {
    animation: none;
    transform: none;
  }
}
.settings-panel .settings-identity-name-row {
  align-items: flex-start;
  flex-direction: column;
}
.settings-panel .settings-identity-name-control {
  width: 100%;
}
.settings-modal-crumbs {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.settings-modal .settings-modal-crumb-parent {
  min-width: 0;
  height: auto;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  color: var(--openbot-text-muted);
  margin-block: calc(-1 * var(--openbot-space-1) - 1px);
  margin-inline: calc(-1 * var(--openbot-space-2) - 1px);
  padding: var(--openbot-space-1) var(--openbot-space-2);
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .settings-modal .settings-modal-crumb-parent:hover:not(:disabled) {
    background: transparent;
    color: var(--openbot-text-primary);
  }
}
.settings-modal-crumb-separator {
  flex: 0 0 auto;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
}
.settings-modal-crumb-current {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-provider-section {
  display: grid;
  gap: var(--openbot-space-2);
}
.settings-dynamic-island-size > .ui-slider-field, .settings-dynamic-island-preview {
  padding: var(--openbot-space-3) var(--openbot-space-4);
}
.settings-dynamic-island-server-mark {
  --server-gradient-logo-size: 32px;
  --server-gradient-logo-radius: var(--openbot-radius-md);
}
.settings-dynamic-island-server-mark > img {
  width: 32px;
  height: 32px;
  border-radius: var(--openbot-radius-md);
}
.settings-dynamic-island-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--openbot-space-3);
}
.settings-dynamic-island-preview-display {
  min-width: 0;
  display: grid;
  gap: var(--openbot-space-1-5);
  margin: 0;
}
.settings-dynamic-island-preview-bar {
  height: 64px;
  display: flex;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-canvas);
  box-shadow: inset 0 0 0 1px var(--openbot-border);
}
.settings-dynamic-island-preview-fit {
  margin-top: 1px;
  display: flex;
  justify-content: center;
  transform-origin: top center;
  scale: var(--settings-dynamic-island-preview-scale, 1);
  transition: scale var(--openbot-duration-slow) var(--openbot-ease-out);
}
.settings-dynamic-island-preview-caption {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-align: center;
}
.settings-voice-key {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-top: var(--openbot-space-2);
}
.settings-voice-key > .ui-input {
  flex: 1;
  min-width: 0;
}
.settings-sound-theme-row {
  flex-wrap: wrap;
}
.settings-sound-theme-row > .sound-theme-picker {
  flex-basis: 100%;
}
.window-rail {
  display: flex;
  width: 52px;
  min-height: 0;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: calc(var(--left-header-height, 38px) + var(--openbot-space-1)) 0 var(--openbot-space-3);
  -webkit-app-region: drag;
}
.window-rail-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-1-5);
  -webkit-app-region: no-drag;
}
.window-rail-button {
  position: relative;
  display: flex;
  width: var(--openbot-control-lg);
  height: var(--openbot-control-lg);
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--openbot-radius-lg);
  background: transparent;
  padding: 0;
  color: var(--openbot-text-muted);
  font: inherit;
  cursor: pointer;
  -webkit-app-region: no-drag;
}
@media (hover: hover) and (pointer: fine) {
  .window-rail-button:hover {
    background: var(--openbot-bg-control-hover);
    color: var(--openbot-text-primary);
  }
}
.window-rail-button[aria-current="page"], .window-rail-button[aria-current="page"]:hover:not(:disabled):not([data-disabled]) {
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
}
.window-rail-button:focus-visible {
  outline: 0;
  box-shadow: var(--openbot-focus-ring);
}
.window-rail-button svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
}
.window-rail-notice {
  position: absolute;
  top: var(--openbot-space-1-5);
  right: var(--openbot-space-1-5);
  width: var(--openbot-space-2);
  height: var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-badge-new);
}
.window-rail-usage-card .account-usage-refresh {
  display: none;
}
.account-usage-popover.window-rail-usage-card {
  transition: none;
  transform-origin: var(--kb-tooltip-content-transform-origin);
}
.window-rail-button.window-rail-usage {
  border-radius: var(--openbot-radius-pill);
}
.window-rail-button .window-rail-usage-ring {
  position: absolute;
  inset: 1px;
  width: 34px;
  height: 34px;
  transform: rotate(-90deg);
}
.window-rail-button .window-rail-usage-logo {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  overflow: visible;
  fill: var(--openbot-provider-current);
}
.window-rail-usage-track {
  stroke: currentcolor;
  opacity: 0.15;
}
.window-rail-usage-arc {
  stroke: var(--openbot-success);
}
.window-rail-usage-arc[data-usage-tone="warning"] {
  stroke: var(--openbot-warning);
}
.window-rail-usage-arc[data-usage-tone="critical"] {
  stroke: var(--openbot-danger);
}
.app-window {
  --window-frame: var(--openbot-bg-canvas);
  @supports (color: color-mix(in lab, red, red)) {
    --window-frame: color-mix(in srgb, var(--openbot-bg-canvas) 50%, var(--openbot-bg-notch));
  }
  --window-edge: var(--openbot-space-1);
  --window-hairline-height: var(--openbot-icon-lg);
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 0;
  grid-template-columns: auto minmax(0, 1fr);
  background: var(--window-frame);
}
.app-window > .window-rail[hidden] {
  display: none;
}
.app-window > .app-frame {
  grid-column: -2;
}
@media (max-width: 720px) {
  .app-window > .window-rail {
    display: none;
  }
}
@media (min-width: 721px) {
  .app-window > .app-frame-edge > .sidebar:not(.sidebar-compact) .sidebar-topbar {
    position: relative;
  }
  .app-window > .app-frame-platform-darwin:not(.app-frame-with-server-rail) > .sidebar:not(.sidebar-compact) .sidebar-topbar {
    padding-left: var(--openbot-space-6);
  }
  .app-window > .app-frame-edge {
    position: relative;
    isolation: isolate;
    padding: 0 calc(var(--window-edge) + 1px) calc(var(--window-edge) + 1px) 0;
    background: var(--window-frame);
  }
  .app-window > .app-frame-edge::before {
    position: absolute;
    z-index: -1;
    inset: calc(var(--left-header-height) - 1px) var(--window-edge) var(--window-edge) 0;
    border: 1px solid var(--openbot-border);
    border-radius: var(--openbot-radius-card);
    background: var(--openbot-bg-canvas);
    content: "";
    pointer-events: none;
  }
  .app-window > .app-frame-edge.app-frame-with-server-rail::before {
    left: var(--server-rail-width);
  }
  .app-window > .app-frame-edge > .server-rail {
    background: var(--window-frame);
  }
  .app-window > .app-frame-edge > .sidebar, .app-window > .app-frame-edge :is(.conversation-panel, .direct-conversation, .diagram-view), .app-window > .app-frame-edge :is(.settings-panel, .browser-panel) {
    background: transparent;
  }
  .app-window > .app-frame-edge :is(.conversation-panel, .direct-conversation)::before {
    content: none;
  }
  .app-window > .app-frame-edge > .sidebar::before {
    inset: var(--left-header-height) 0 0 auto;
    width: 1px;
    border: 0;
    border-radius: 0;
    background: var(--openbot-border);
  }
  .app-window > .app-frame-edge > .sidebar:not(.sidebar-compact) .sidebar-topbar::after, .app-window > .app-frame-edge :is(.settings-panel, .browser-panel) > :is(.settings-panel-header, .file-preview-header, .browser-preview-header)::before {
    position: absolute;
    top: 50%;
    width: 1px;
    height: var(--window-hairline-height);
    translate: 0 -50%;
    background: var(--openbot-border-strong);
    content: "";
    pointer-events: none;
  }
  .app-window > .app-frame-edge > .sidebar:not(.sidebar-compact) .sidebar-topbar::after {
    right: 0;
  }
  .app-window > .app-frame-edge :is(.settings-panel, .browser-panel) {
    border-left: 0;
  }
  .app-window > .app-frame-edge :is(.settings-panel, .browser-panel)::before {
    inset: calc(var(--left-header-height) - 1px) auto 0 0;
    width: 1px;
    border: 0;
    border-radius: 0;
    background: var(--openbot-border);
  }
  .app-window > .app-frame-edge :is(.settings-panel, .browser-panel) > :is(.settings-panel-header, .file-preview-header, .browser-preview-header) {
    position: relative;
  }
  .app-window > .app-frame-edge :is(.settings-panel, .browser-panel) > :is(.settings-panel-header, .file-preview-header, .browser-preview-header)::before {
    left: 0;
  }
  .app-window > .app-frame-edge .side-panel-docked > :is(.settings-panel, .browser-panel)::before {
    top: 0;
  }
  .app-window > .app-frame-edge .side-panel-docked > :is(.settings-panel, .browser-panel) > :is(.settings-panel-header, .file-preview-header, .browser-preview-header)::before {
    content: none;
  }
  .app-window > .app-frame-edge .side-panel-maximized > :is(.settings-panel, .browser-panel) {
    border-bottom-right-radius: calc(var(--openbot-radius-card) - 1px);
    background: var(--openbot-bg-canvas);
  }
  .app-window > .app-frame-edge .diagram-view-body {
    border-top: 0;
    border-right: 0;
    border-radius: 0 0 calc(var(--openbot-radius-card) - 1px) 0;
  }
  .app-window > .app-frame-edge .conversation-header-actions {
    gap: var(--openbot-space-2);
  }
  .app-window > .app-frame-edge .conversation-header :is(.provider-model-trigger, .header-panel-toggle) {
    height: var(--openbot-control-sm);
    border-color: transparent;
    border-radius: var(--openbot-radius-md);
    background: transparent;
    box-shadow: none;
    color: var(--openbot-text-secondary);
  }
  .app-window > .app-frame-edge .conversation-header .header-panel-toggle {
    width: var(--openbot-control-sm);
    min-width: var(--openbot-control-sm);
    padding: 0;
    color: var(--openbot-text-muted);
  }
  @media (hover: hover) and (pointer: fine) {
    .app-window > .app-frame-edge .conversation-header :is(.provider-model-trigger, .header-panel-toggle):hover {
      border-color: transparent;
      background: var(--openbot-bg-control-hover);
      color: var(--openbot-text-primary);
    }
  }
  .app-window > .app-frame-edge .conversation-header :is(.provider-model-trigger, .header-panel-toggle):is([aria-expanded="true"], [data-expanded]):not( .computer-button-agent-active, .side-panel-toggle ) {
    border-color: transparent;
    background: var(--openbot-bg-control-active);
    color: var(--openbot-text-primary);
  }
  .app-window > .app-frame-edge .conversation-header-actions > .side-panel-toggle {
    position: relative;
    margin-left: calc(var(--openbot-space-2) + 1px);
    overflow: visible;
  }
  .app-window > .app-frame-edge .conversation-header-actions > .side-panel-toggle::before {
    position: absolute;
    top: 50%;
    left: calc(-1 * var(--openbot-space-2) - 1px);
    width: 1px;
    height: var(--window-hairline-height);
    translate: 0 -50%;
    background: var(--openbot-border-strong);
    content: "";
    pointer-events: none;
  }
  .app-frame-edge > .window-page > :is(.agent-usage, .schedule-pane, .tasks-page) {
    background: transparent;
  }
  .app-window > .app-frame-edge > .window-page .agent-usage-header, .app-window > .app-frame-edge > .window-page .routine-planner-title {
    flex: none;
    height: var(--left-header-height);
    flex-wrap: nowrap;
    padding: 0 var(--openbot-space-3);
    border-bottom: 0;
    -webkit-app-region: drag;
  }
  .app-window > .app-frame-edge > .window-page :is(.agent-usage-header, .routine-planner-title) > :is(.agent-usage-identity, .agent-usage-controls, .routine-planner-identity, p) {
    flex-wrap: nowrap;
    gap: var(--openbot-space-2);
    -webkit-app-region: no-drag;
  }
  .app-window > .app-frame-edge > .window-page :is(.agent-usage-identity, .routine-planner-identity) .ui-icon-button {
    margin-left: 0;
  }
  .app-window > .app-frame-edge > .window-page :is(.agent-usage-identity, .routine-planner-title) h2 {
    gap: var(--openbot-space-2);
    font-size: var(--openbot-text-md);
    font-weight: var(--openbot-weight-medium);
    white-space: nowrap;
    color: var(--openbot-text-primary);
  }
  .app-window > .app-frame-edge > .window-page :is(.agent-usage-identity, .routine-planner-identity) {
    overflow: hidden;
  }
  .app-window > .app-frame-edge > .window-page :is(.agent-usage-controls, .routine-planner-title > p) {
    flex: none;
  }
  .app-window > .app-frame-edge > .window-page :is(.agent-usage-header, .routine-planner-title) :is(.ui-select-trigger, .ui-icon-button) {
    height: var(--openbot-control-sm);
    border-color: transparent;
    border-radius: var(--openbot-radius-md);
    background: transparent;
    box-shadow: none;
    color: var(--openbot-text-secondary);
  }
  .app-window > .app-frame-edge > .window-page :is(.agent-usage-header, .routine-planner-title) .ui-icon-button {
    width: var(--openbot-control-sm);
  }
  @media (hover: hover) {
    .app-window > .app-frame-edge > .window-page :is(.agent-usage-header, .routine-planner-title) :is(.ui-select-trigger, .ui-icon-button):hover {
      background: var(--openbot-bg-control-hover);
      color: var(--openbot-text-primary);
    }
  }
  .app-window > .app-frame-edge > .window-page > .schedule-pane {
    padding: 0;
    overflow: hidden;
  }
  .app-window > .app-frame-edge > .window-page .routine-planner {
    height: 100%;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0;
  }
  .app-window > .app-frame-edge > .window-page .routine-planner-header {
    gap: 0;
  }
  .app-window > .app-frame-edge > .window-page .routine-planner-toolbar {
    padding: var(--openbot-space-4) var(--openbot-space-6) 0;
  }
  .app-window > .app-frame-edge > .window-page .routine-planner-body {
    min-height: 0;
    overflow-y: auto;
    padding: var(--openbot-space-4) var(--openbot-space-6) var(--openbot-space-6);
  }
  .app-window > .app-frame-edge > .window-page > .tasks-page {
    box-sizing: border-box;
    padding: var(--left-header-height) calc(var(--window-edge) + 1px) calc(var(--window-edge) + 1px) 0;
  }
  .app-window > .app-frame-edge > .window-page .tasks-page-header {
    position: absolute;
    top: 0;
    right: 0;
    left: var(--left-panel-width);
    height: var(--left-header-height);
    padding: 0 var(--openbot-space-3);
    -webkit-app-region: drag;
  }
  .app-window > .app-frame-edge > .window-page .tasks-page-header h2 {
    font-size: var(--openbot-text-md);
    font-weight: var(--openbot-weight-medium);
    white-space: nowrap;
  }
  .app-window > .app-frame-edge > .window-page .tasks-page-column {
    padding-top: var(--openbot-space-6);
  }
  .app-window > .app-frame-edge > .window-page .tasks-page-side {
    border-bottom-right-radius: calc(var(--openbot-radius-card) - 1px);
  }
  .app-frame-edge:not([data-window-page-kind="agents"]) > .window-page {
    position: absolute;
    grid-row: 1 / -1;
    grid-column: 1 / -1;
    inset: 0 0 0 1px;
  }
  .app-frame-edge[data-window-page-kind="settings"] > .window-page {
    top: var(--left-header-height);
  }
  .app-frame-edge[data-window-page-kind="titled"] > .window-page {
    pointer-events: none;
  }
  .app-frame-edge.app-frame-with-server-rail:not([data-window-page-kind="agents"]) > .window-page {
    left: calc(var(--server-rail-width) + 1px);
  }
  .app-frame-edge:not([data-window-page-kind="agents"]) > .sidebar > :not(.sidebar-topbar), .app-frame-edge:not([data-window-page-kind="agents"]) > .left-panel-resizer {
    visibility: hidden;
  }
  .app-frame-edge:not([data-window-page-kind="agents"]) > .sidebar .sidebar-new-button {
    display: none;
  }
  .app-frame-edge[data-window-page-kind="titled"] > .sidebar::before {
    display: none;
  }
  .app-window > .app-frame-edge[data-window-page-kind="titled"] > .window-page :is(.agent-usage-header, .routine-planner-title, .skills-marketplace-topbar) {
    margin-left: var(--left-panel-width);
  }
  .app-frame-edge[data-window-page-kind="titled"] > .window-page :is( .agent-usage-header, .routine-planner-title, .agent-usage-body, .routine-planner-toolbar, .routine-planner-body, .marketplace-crumbs, .skills-marketplace-body, .tasks-page-header, .tasks-page-scroll, .tasks-page-side ) {
    pointer-events: auto;
  }
  .app-window > .app-frame-edge > .window-page > .skills-marketplace-page {
    grid-template-rows: var(--left-header-height) minmax(0, 1fr);
  }
  .app-window > .app-frame-edge > .window-page .skills-marketplace-topbar {
    min-height: 0;
    padding: 0 var(--openbot-space-3);
    border-bottom: 0;
    -webkit-app-region: drag;
  }
  .app-window > .app-frame-edge > .window-page .marketplace-crumbs {
    flex: 0 1 auto;
    -webkit-app-region: no-drag;
  }
  .app-window > .app-frame-edge > .window-page .skills-marketplace-topbar .marketplace-title {
    font-size: var(--openbot-text-md);
    font-weight: var(--openbot-weight-medium);
    white-space: nowrap;
  }
  .app-window > .app-frame-edge > .window-page :is(.agent-usage-identity, .routine-planner-identity, .tasks-page-header) > .ui-icon-button, .app-window > .app-frame-edge > .window-page :is(.agent-usage-identity, .routine-planner-identity, .tasks-page-header) > h2 > span {
    display: none;
  }
  .app-frame-edge > .window-page :is(.agent-usage-identity, .routine-planner-identity, .tasks-page-header) h2:focus {
    outline: none;
  }
}
.settings-page {
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 0;
  grid-template-columns: max(var(--left-panel-width, 280px), 220px) minmax(0, 1fr);
}
.settings-page-nav {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  gap: var(--openbot-space-1);
  overflow: hidden;
  border-right: 1px solid var(--openbot-border);
  padding: var(--openbot-space-4) var(--openbot-space-3) 0;
}
.settings-page-sections, .settings-page-results {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  padding-bottom: var(--openbot-space-3);
}
.settings-page-title {
  margin: 0 0 var(--openbot-space-3);
  padding: 0 var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-lg);
}
.settings-page-title:focus {
  outline: none;
}
.settings-page-search {
  flex: none;
  border-radius: var(--openbot-radius-pill);
  padding: 0 var(--openbot-space-3);
}
.settings-page-search > svg {
  flex: none;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.settings-page-search input {
  height: 100%;
  padding: 0;
}
.settings-page-sections[hidden] {
  display: none;
}
.settings-page-empty {
  margin: var(--openbot-space-4) 0 var(--openbot-space-1);
  padding: 0 var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.settings-page-server {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
}
.settings-page-server .server-menu-mark {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.settings-page-nav-group .settings-modal-nav-item {
  padding-inline: var(--openbot-space-3);
}
.settings-page-nav-group .settings-modal-nav-item[data-selected] {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}
.settings-page-results {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-0-5);
  margin: var(--openbot-space-2) 0 0;
  padding-inline: 0;
  list-style: none;
}
.settings-page-result {
  display: flex;
  width: 100%;
  height: auto;
  flex-direction: column;
  align-items: stretch;
  gap: var(--openbot-space-0-5);
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .settings-page-result:hover {
    background: var(--openbot-bg-control-hover);
  }
}
.settings-page-result:focus-visible {
  outline: 0;
  box-shadow: var(--openbot-focus-ring);
}
.settings-page-result-section {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.settings-page-result-section svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.settings-page-result-title {
  overflow: hidden;
  padding-left: calc(var(--openbot-icon-sm) + var(--openbot-space-2));
  font-size: var(--openbot-text-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-page-content {
  position: relative;
  min-width: 0;
  min-height: 0;
}
.settings-page-content > .settings-modal.settings-modal-page {
  width: 100%;
  height: 100%;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  animation: none;
  will-change: auto;
}
.settings-page-content > .settings-modal-page > .settings-modal-main {
  background: transparent;
}
.settings-page-content > .settings-modal-page :is(.settings-modal-header, .settings-modal-content) {
  width: 100%;
  max-width: 784px;
  margin-inline: auto;
}
.settings-page-content [data-search-match] {
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control-active);
}
@media (max-width: 720px) {
  .settings-page {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  .settings-page-nav {
    border-right: 0;
    border-bottom: 1px solid var(--openbot-border);
    padding: var(--openbot-space-3) var(--openbot-space-3) 0;
  }
  .settings-page-title {
    margin-bottom: var(--openbot-space-2);
  }
  .settings-page-sections, .settings-page-results {
    max-height: 40dvh;
    padding-bottom: var(--openbot-space-2);
  }
}
.opencode-key-backdrop {
  z-index: calc(var(--openbot-layer-dialog) + 1);
}
.opencode-key-dialog {
  width: min(400px, 100%);
  max-height: calc(100dvh - var(--openbot-space-6) * 2);
  overflow-y: auto;
  outline: 0;
  border-radius: var(--openbot-radius-xl);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-6);
  color: var(--openbot-text-primary);
  animation: opencode-key-dialog-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}
.opencode-key-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--openbot-space-1);
}
.opencode-key-title {
  margin: 0;
  font-size: var(--openbot-text-xl);
  line-height: var(--openbot-leading-xl);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: var(--openbot-tracking-tight);
}
.opencode-key-description {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.opencode-key-status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success);
}
.opencode-key-form {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
  margin: var(--openbot-space-4) 0 0;
}
.opencode-key-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
}
@keyframes opencode-key-dialog-in {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
}
.settings-mobile-connect-code-collapse {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows var(--openbot-duration-overlay) var(--openbot-ease-out), opacity var(--openbot-duration-normal) ease-out;
}
@starting-style {
  .settings-mobile-connect-code-collapse {
    grid-template-rows: 0fr;
    opacity: 0;
  }
}
.settings-mobile-connect-code-collapse[data-collapsing] {
  grid-template-rows: 0fr;
  opacity: 0;
}
.settings-mobile-connect-code-collapse-body {
  min-height: 0;
  overflow: hidden;
}
.settings-mobile-connect-qr-stage {
  position: relative;
  flex: 0 0 auto;
}
.settings-mobile-connect-qr-stage .ui-qr-code {
  transition: opacity var(--openbot-duration-normal) ease-out, filter var(--openbot-duration-overlay) ease-out, transform var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.settings-mobile-connect-qr-stage[data-success] .ui-qr-code {
  opacity: 0.18;
  filter: blur(2px);
  transform: scale(0.97);
}
.settings-mobile-connect-success-mark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--openbot-success);
  animation: settings-mobile-connect-success-enter var(--openbot-duration-overlay) var(--openbot-ease-out) both;
}
.settings-mobile-connect-success-mark::before {
  position: absolute;
  width: 84px;
  height: 84px;
  border: 1px solid var(--openbot-success);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success-soft);
  content: "";
  animation: settings-mobile-connect-success-ring 600ms var(--openbot-ease-out) both;
}
.settings-mobile-connect-success-mark > svg {
  position: relative;
  width: 58px;
  height: 58px;
  padding: var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface-raised);
  filter: drop-shadow(0 6px 16px var(--openbot-shadow-popover-ambient));
  stroke-width: var(--openbot-icon-stroke);
  animation: settings-mobile-connect-success-pop 420ms var(--openbot-ease-out) both;
}
.settings-mobile-connect-success-mark > svg path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: settings-mobile-connect-check-draw 360ms var(--openbot-duration-fast) var(--openbot-ease-out) forwards;
}
.settings-mobile-connect-code-copy {
  max-width: 240px;
  display: grid;
  gap: var(--openbot-space-2);
}
.settings-mobile-connect-code-title {
  font-weight: var(--openbot-weight-semibold);
}
.settings-mobile-connect-expiry {
  color: var(--openbot-accent-text);
  font-variant-numeric: tabular-nums;
}
.settings-mobile-connect-success-title {
  color: var(--openbot-success);
}
.settings-mobile-connect-expired {
  min-height: 196px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  text-align: center;
}
.settings-mobile-connect-expired > svg {
  width: calc(var(--openbot-icon-lg) + var(--openbot-space-3));
  height: calc(var(--openbot-icon-lg) + var(--openbot-space-3));
  margin-bottom: var(--openbot-space-2);
}
.settings-mobile-devices {
  display: grid;
  gap: var(--openbot-space-3);
}
.settings-mobile-devices-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
}
.settings-mobile-devices-heading h3 {
  margin: 0;
  font-weight: var(--openbot-weight-medium);
}
.settings-mobile-devices-states {
  display: grid;
}
.settings-mobile-devices-state {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(-4px);
  transition: grid-template-rows var(--openbot-duration-overlay) var(--openbot-ease-out), opacity var(--openbot-duration-normal) ease-out, transform var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.settings-mobile-devices-state[data-expanded] {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: translateY(0);
}
.settings-mobile-devices-state-body {
  min-height: 0;
  overflow: hidden;
}
.settings-mobile-devices-empty {
  min-height: 88px;
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  padding: var(--openbot-space-4);
  color: var(--openbot-text-muted);
}
.settings-mobile-devices-empty > svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  flex: 0 0 auto;
}
.settings-mobile-devices-empty > div {
  display: grid;
  gap: var(--openbot-space-1);
}
.settings-mobile-devices-empty-title {
  color: var(--openbot-text-secondary);
  font-weight: var(--openbot-weight-medium);
}
.settings-mobile-devices-table-frame {
  overflow-x: auto;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
}
.settings-mobile-devices-table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.settings-mobile-devices-table th, .settings-mobile-devices-table td {
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border-bottom: 1px solid var(--openbot-border);
  text-align: left;
  white-space: nowrap;
}
.settings-mobile-devices-table th {
  color: var(--openbot-text-muted);
  font-weight: var(--openbot-weight-medium);
}
.settings-mobile-devices-table tbody tr:last-child td {
  border-bottom: 0;
}
.settings-mobile-device-name {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}
.settings-mobile-device-name svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  color: var(--openbot-text-muted);
}
.settings-mobile-devices-table td.settings-mobile-device-action {
  width: 1%;
  text-align: right;
}
@keyframes settings-mobile-connect-success-enter {
  from {
    opacity: 0;
  }
}
@keyframes settings-mobile-connect-success-ring {
  from {
    opacity: 0.8;
    transform: scale(0.72);
  }
  to {
    opacity: 0;
    transform: scale(1.35);
  }
}
@keyframes settings-mobile-connect-success-pop {
  from {
    opacity: 0;
    transform: scale(0.62) rotate(-8deg);
  }
  70% {
    transform: scale(1.08) rotate(1deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}
@keyframes settings-mobile-connect-check-draw {
  to {
    stroke-dashoffset: 0;
  }
}
@media (max-width: 720px) {
  .settings-mobile-connect-link-code {
    align-items: center;
    flex-direction: column;
    text-align: center;
  }
  .settings-mobile-connect-code-copy {
    max-width: 320px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .settings-mobile-connect-code-collapse, .settings-mobile-connect-qr-stage .ui-qr-code, .settings-mobile-devices-state {
    transition: none;
  }
  .settings-mobile-connect-success-mark, .settings-mobile-connect-success-mark::before, .settings-mobile-connect-success-mark > svg, .settings-mobile-connect-success-mark > svg path {
    animation: none;
  }
  .settings-mobile-connect-success-mark > svg path {
    stroke-dashoffset: 0;
  }
}
.settings-mobile-app-install {
  display: contents;
}
.settings-mobile-connect-step.ui-item-media {
  min-width: 24px;
  height: 24px;
  padding-inline: var(--openbot-space-1-5);
  display: inline-grid;
  flex: 0 0 auto;
  align-self: flex-start;
  place-items: center;
  margin-top: 1px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  font-weight: var(--openbot-weight-medium);
  line-height: 1;
}
.settings-mobile-connect-generate.ui-button {
  min-width: 160px;
}
.settings-mobile-connect-link {
  padding: var(--openbot-space-3) var(--openbot-space-4);
}
.settings-mobile-connect-link-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2) var(--openbot-space-4);
}
.settings-mobile-connect-link-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-2);
}
.settings-mobile-connect-link-reveal {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows var(--openbot-duration-overlay) var(--openbot-ease-out), opacity var(--openbot-duration-normal) ease-out;
}
.settings-mobile-connect-link-reveal[data-expanded] {
  grid-template-rows: 1fr;
  opacity: 1;
}
.settings-mobile-connect-link-code {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-6);
  padding-top: var(--openbot-space-4);
}
@media (prefers-reduced-motion: reduce) {
  .settings-mobile-connect-link-reveal {
    transition: none;
  }
}
.settings-mobile-app-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
}
.settings-mobile-app-tab > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
}
.settings-mobile-app-panels {
  position: relative;
  padding: var(--openbot-space-4);
}
.settings-mobile-app-panels::before {
  position: absolute;
  top: 0;
  right: var(--openbot-space-4);
  left: var(--openbot-space-4);
  height: 1px;
  background: var(--openbot-border);
  pointer-events: none;
  content: "";
}
.settings-mobile-app-panel {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-6);
}
.settings-mobile-app-qr {
  transform: scale(0.96);
  transition: transform var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.settings-mobile-app-panel[data-selected] .settings-mobile-app-qr {
  transform: scale(1);
}
.settings-mobile-app-qr .ui-qr-code-mark {
  gap: 3px;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity var(--openbot-duration-normal) ease-out, transform var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.settings-mobile-app-panel[data-selected] .settings-mobile-app-qr .ui-qr-code-mark {
  opacity: 1;
  transform: scale(1);
  transition-delay: var(--openbot-duration-fast);
}
.settings-mobile-app-qr-platform {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}
.settings-mobile-app-qr-link {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  color: var(--openbot-text-muted-on-light);
  stroke-width: 2.5;
  opacity: 0;
  transform: rotate(-45deg) scale(0.6);
  transition: opacity var(--openbot-duration-normal) ease-out, transform var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.settings-mobile-app-panel[data-selected] .settings-mobile-app-qr-link {
  opacity: 1;
  transform: rotate(0) scale(1);
  transition-delay: calc(var(--openbot-duration-fast) * 2);
}
.settings-mobile-app-qr-logo {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}
.settings-mobile-app-details {
  min-width: 0;
  display: grid;
  justify-items: start;
  gap: var(--openbot-space-2);
}
.settings-mobile-app-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--openbot-space-2);
}
.settings-mobile-app-title {
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-semibold);
}
.settings-mobile-app-steps {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-1-5);
  margin: var(--openbot-space-1) 0;
  padding-left: var(--openbot-space-4);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  list-style: decimal;
}
.settings-mobile-app-steps > li::marker {
  color: var(--openbot-text-dim);
  font-variant-numeric: tabular-nums;
}
.settings-mobile-app-copy > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.settings-mobile-device-platform {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.settings-mobile-device-platform > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
}
.settings-mobile-devices-list {
  display: grid;
  gap: var(--openbot-space-3);
}
.settings-mobile-devices-table tbody tr {
  transition: opacity var(--openbot-duration-overlay) var(--openbot-ease-out);
}
@starting-style {
  .settings-mobile-devices-table tbody tr {
    opacity: 0;
  }
}
@media (max-width: 720px) {
  .settings-mobile-app-panel {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media (prefers-reduced-motion: reduce) {
  .settings-mobile-app-qr, .settings-mobile-app-qr .ui-qr-code-mark, .settings-mobile-app-qr-link, .settings-mobile-devices-table tbody tr {
    transition: none;
  }
  .settings-mobile-app-qr, .settings-mobile-app-qr .ui-qr-code-mark, .settings-mobile-app-qr-link {
    transform: none;
  }
}
.hosted-sites-overview {
  display: grid;
  gap: var(--openbot-space-1);
}
.hosted-sites-list .hosted-sites-row {
  min-height: 72px;
  align-items: center;
}
.hosted-sites-list .ui-item-content {
  min-width: 0;
}
.hosted-sites-link.ui-button {
  width: min(100%, 320px);
  justify-content: flex-start;
  color: var(--openbot-accent-text);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-md);
  text-align: left;
}
.hosted-sites-link-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hosted-sites-actions {
  flex-wrap: nowrap;
  justify-content: flex-end;
}
@media (max-width: 700px) {
  .hosted-sites-list .hosted-sites-row {
    align-items: flex-start;
    flex-direction: column;
  }
  .hosted-sites-actions {
    width: 100%;
    justify-content: flex-start;
  }
  .hosted-sites-actions > .ui-button {
    flex: 1;
  }
}
.integration-logo-tile {
  --integration-tile: 36px;
  display: inline-grid;
  flex: none;
  width: var(--integration-tile);
  height: var(--integration-tile);
  place-items: center;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-primary);
}
.integration-logo-tile[data-size="lg"] {
  --integration-tile: 48px;
  border-radius: var(--openbot-radius-lg);
}
.integration-logo-tile > svg {
  width: 55%;
  height: 55%;
}
.integration-status {
  gap: var(--openbot-space-1);
}
.integration-status-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--openbot-radius-pill);
  background: currentColor;
}
.integration-status[data-status="unavailable"] .integration-status-dot {
  background: var(--openbot-transparent);
  box-shadow: inset 0 0 0 1px currentColor;
}
.integration-detail-header {
  display: flex;
  gap: var(--openbot-space-3);
  align-items: center;
}
.integration-detail-copy {
  display: grid;
  flex: 1;
  gap: var(--openbot-space-1);
  min-width: 0;
}
.integration-detail-title {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
}
.integration-detail-actions {
  display: flex;
  flex: none;
  gap: var(--openbot-space-2);
}
.integration-wizard {
  display: grid;
  gap: var(--openbot-space-4);
  padding: var(--openbot-space-6);
  border-radius: var(--openbot-radius-xl);
  background: var(--openbot-bg-sheet);
  box-shadow: var(--openbot-shadow-dialog);
}
.integration-wizard-head {
  display: grid;
  gap: var(--openbot-space-2);
  justify-items: center;
  text-align: center;
}
.integration-wizard-logos {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
  margin-bottom: var(--openbot-space-2);
}
.integration-wizard-app {
  width: 36px;
  height: 36px;
}
.integration-wizard-link {
  width: 40px;
  height: 2px;
  border-radius: var(--openbot-radius-pill);
  background: radial-gradient(circle, var(--openbot-accent) 0 1px, var(--openbot-transparent) 1.5px) 0 50% / 8px 2px repeat-x;
  animation: integration-wizard-flow 0.6s linear infinite;
}
@keyframes integration-wizard-flow {
  to {
    background-position-x: 8px;
  }
}
.integration-wizard-logos[data-link="connected"] .integration-wizard-link {
  background: var(--openbot-success);
  animation: none;
}
.integration-wizard-logos[data-link="broken"] .integration-wizard-link {
  background: radial-gradient(circle, var(--openbot-border-strong) 0 1px, var(--openbot-transparent) 1.5px) 0 50% / 8px 2px repeat-x;
  animation: none;
}
.integration-wizard-target {
  display: inline-grid;
  border-radius: var(--openbot-radius-md);
}
.integration-wizard-logos[data-link="connecting"] .integration-wizard-target {
  animation: integration-wizard-pulse 1.8s var(--openbot-ease-out) infinite;
}
.integration-wizard-logos[data-link="connected"] .integration-wizard-target {
  box-shadow: 0 0 0 3px var(--openbot-success);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--openbot-success) 30%, var(--openbot-transparent));
  }
}
@keyframes integration-wizard-pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--openbot-accent) 45%, var(--openbot-transparent));
  }
  100% {
    box-shadow: 0 0 0 8px var(--openbot-transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .integration-wizard-link, .integration-wizard-logos[data-link="connecting"] .integration-wizard-target {
    animation: none;
  }
}
.integration-wizard-body {
  display: grid;
  gap: var(--openbot-space-3);
}
.integration-wizard-foot {
  display: flex;
  gap: var(--openbot-space-2);
  justify-content: flex-end;
}
.integration-wizard-foot .ui-button > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.integration-dialog-backdrop {
  z-index: calc(var(--openbot-layer-dialog) + 1);
}
.integration-wizard-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: calc(var(--openbot-layer-dialog) + 1);
  width: min(440px, calc(100vw - var(--openbot-space-6) * 2));
  max-height: calc(100dvh - var(--openbot-space-6) * 2);
  overflow-y: auto;
  outline: 0;
  transform: translate(-50%, -50%);
}
.integration-wizard-dialog h2 {
  margin: 0;
}
.integration-dialog-close {
  position: absolute;
  top: var(--openbot-space-3);
  right: var(--openbot-space-3);
}
.integration-stepper {
  display: flex;
  align-items: center;
  margin: 0 0 var(--openbot-space-2);
  padding: 0;
  list-style: none;
}
.integration-step {
  display: flex;
  align-items: center;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.integration-step + .integration-step::before {
  display: block;
  width: 24px;
  height: 2px;
  margin-inline: var(--openbot-space-1);
  border-radius: var(--openbot-radius-pill);
  background: linear-gradient(to right, var(--openbot-success), var(--openbot-accent)) no-repeat, var(--openbot-border-strong);
  background-size: 0% 100%, auto;
  content: "";
}
.integration-step + .integration-step[data-state="current"]::before {
  background-size: 100% 100%, auto;
  animation: integration-step-fill 0.4s var(--openbot-ease-out);
}
.integration-step + .integration-step[data-state="done"]::before {
  background: linear-gradient(var(--openbot-success), var(--openbot-success)) no-repeat, var(--openbot-border-strong);
  background-size: 100% 100%, auto;
  animation: integration-step-fill 0.4s var(--openbot-ease-out);
}
@keyframes integration-step-fill {
  from {
    background-size: 0% 100%, auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .integration-step + .integration-step[data-state="current"]::before, .integration-step + .integration-step[data-state="done"]::before {
    animation: none;
  }
}
.integration-step-index {
  display: inline-grid;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  font-weight: var(--openbot-weight-medium);
  line-height: 1;
}
.integration-step[data-state="current"] {
  color: var(--openbot-text-primary);
}
.integration-step[data-state="current"] .integration-step-index {
  border-color: var(--openbot-accent);
  background: var(--openbot-accent);
  color: var(--openbot-text-on-accent);
}
.integration-step[data-state="done"] .integration-step-index {
  border-color: var(--openbot-success);
  color: var(--openbot-success);
}
.integrations-hub {
  display: grid;
  gap: var(--openbot-space-6);
}
.integrations-hub-row {
  position: relative;
  border-radius: var(--openbot-radius-md);
  transition: background-color var(--openbot-duration-hover) var(--openbot-ease-out);
}
.integrations-hub-row:has(> .integrations-hub-hitarea:hover) {
  background: var(--openbot-hover);
}
.integrations-hub-hitarea {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: var(--openbot-transparent);
  cursor: pointer;
  transition: none;
}
.integrations-hub-hitarea:hover:not(:disabled):not([data-disabled]) {
  background: var(--openbot-transparent);
}
.integrations-hub-hitarea:focus-visible {
  outline: 2px solid var(--openbot-accent-strong);
  outline-offset: -2px;
}
.integrations-hub-actions {
  gap: var(--openbot-space-3);
}
.integrations-hub-actions .ui-button {
  position: relative;
  z-index: 2;
}
.integrations-hub-chevron {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  margin: 0 var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
}
.integrations-hub-title {
  display: inline-flex;
  gap: var(--openbot-space-2);
  align-items: center;
}
.integrations-hub-summary[data-status="attention"] {
  color: var(--openbot-warning-text);
}
.integrations-face-stack {
  display: inline-flex;
  gap: var(--openbot-space-0-5);
  align-items: center;
}
.integrations-face-more {
  display: inline-grid;
  min-width: 24px;
  height: 24px;
  padding: 0 var(--openbot-space-1);
  place-items: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.integrations-agent-face {
  display: inline-block;
  flex: none;
  width: 32px;
  height: 32px;
}
.integrations-agent-face[data-size="sm"] {
  width: 24px;
  height: 24px;
}
.integrations-agent-face > * {
  width: 100%;
  height: 100%;
}
.github-connector {
  display: grid;
  gap: var(--openbot-space-6);
}
.github-connector-avatar {
  display: inline-grid;
  flex: none;
  width: 32px;
  height: 32px;
  place-items: center;
  overflow: hidden;
  border-radius: var(--openbot-radius-pill);
  background: linear-gradient(135deg, var(--openbot-accent-strong), var(--openbot-onboarding-desktop-indigo));
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
}
.github-connector-avatar > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.github-connector-line {
  padding: var(--openbot-space-3) var(--openbot-space-4);
}
.github-connector-line[data-tone="danger"] {
  color: var(--openbot-danger-text);
}
.github-connector-search {
  position: relative;
  display: flex;
  align-items: center;
  padding: var(--openbot-space-3) var(--openbot-space-4) var(--openbot-space-2);
}
.github-connector-search > svg {
  position: absolute;
  left: calc(var(--openbot-space-4) + var(--openbot-space-3));
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
  pointer-events: none;
}
.github-connector-search input {
  width: 100%;
  padding-left: calc(var(--openbot-space-3) * 2 + var(--openbot-icon-sm));
}
.github-connector-repository-list {
  display: grid;
  max-height: 260px;
  margin: 0;
  padding: 0 var(--openbot-space-2) var(--openbot-space-2);
  overflow-y: auto;
  list-style: none;
}
.github-connector-repository {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
  justify-content: space-between;
  min-height: 36px;
  padding: 0 var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
  transition: background-color var(--openbot-duration-fast) var(--openbot-ease-out);
}
.github-connector-repository:hover {
  background: var(--openbot-hover);
}
.github-connector-repository-name {
  min-width: 0;
}
.github-connector-repository-owner {
  color: var(--openbot-text-muted);
}
.github-connector-private {
  flex: none;
  gap: var(--openbot-space-1);
}
.github-connector-center {
  display: grid;
  min-height: 96px;
  place-items: center;
}
.github-connector-code {
  display: flex;
  gap: var(--openbot-space-1-5);
  justify-content: center;
}
.github-connector-code-char {
  display: inline-grid;
  width: 36px;
  height: 48px;
  place-items: center;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-xl);
  font-weight: var(--openbot-weight-semibold);
}
.github-connector-code-char[data-separator="true"] {
  width: 12px;
  border-color: var(--openbot-transparent);
  background: var(--openbot-transparent);
  color: var(--openbot-text-muted);
}
.github-connector-waiting {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
  justify-content: center;
}
.github-connector-done {
  display: flex;
  gap: var(--openbot-space-3);
  align-items: center;
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-success-wash);
}
.github-connector-done > div {
  display: grid;
  flex: 1;
}
.github-connector-effects {
  display: grid;
  margin: 0;
  padding: var(--openbot-space-1);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  list-style: none;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.github-connector-effects li {
  display: flex;
  gap: var(--openbot-space-3);
  align-items: center;
  padding: var(--openbot-space-2);
}
.github-connector-effects li + li {
  border-top: 1px solid var(--openbot-border);
}
.github-connector-effect-icon {
  display: inline-grid;
  flex: none;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-muted);
}
.github-connector-effect-icon > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.github-connector-effects li[data-tone="danger"] .github-connector-effect-icon {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger-text);
}
.github-connector-effects li[data-tone="success"] .github-connector-effect-icon {
  background: var(--openbot-success-soft);
  color: var(--openbot-success);
}
.github-connector-confirm.ui-button-variant-destructive {
  color: var(--openbot-danger-text);
}
.onepassword-connector {
  display: grid;
  gap: var(--openbot-space-6);
}
.onepassword-connector-link {
  justify-self: start;
  padding-inline: 0;
}
.onepassword-connector-token {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
}
.onepassword-connector-token > :first-child {
  flex: 1;
}
.onepassword-connector-step .ui-item-description {
  white-space: normal;
}
.onepassword-connector-step .ui-item-media {
  color: var(--openbot-text-muted);
}
.onepassword-connector-step[data-step="done"] .ui-item-media {
  color: var(--openbot-success);
}
.onepassword-connector-step[data-step="waiting"] .ui-item-title {
  color: var(--openbot-text-muted);
}
.slack-integration {
  display: grid;
  gap: var(--openbot-space-6);
}
.slack-integration-note {
  margin-top: var(--openbot-space-2);
}
.slack-integration-stack {
  display: grid;
  gap: var(--openbot-space-0-5);
  justify-items: start;
}
.slack-effects {
  display: grid;
  margin: 0;
  padding: var(--openbot-space-1);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  list-style: none;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.slack-effects li {
  display: flex;
  gap: var(--openbot-space-3);
  align-items: center;
  padding: var(--openbot-space-2);
}
.slack-effects li + li {
  border-top: 1px solid var(--openbot-border);
}
.slack-effect-icon {
  display: inline-grid;
  flex: none;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-muted);
}
.slack-effect-icon > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.slack-effects li[data-tone="danger"] .slack-effect-icon {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger-text);
}
.slack-effects li[data-tone="success"] .slack-effect-icon {
  background: var(--openbot-success-soft);
  color: var(--openbot-success);
}
.slack-checklist {
  display: grid;
  gap: var(--openbot-space-2);
  margin: 0;
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  list-style: none;
  font-size: var(--openbot-text-sm);
}
.slack-checklist li {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
}
.slack-checklist li[data-state="done"] {
  color: var(--openbot-text-secondary);
}
.slack-checklist li[data-state="done"] svg {
  color: var(--openbot-success);
}
.slack-checklist-dot {
  width: 14px;
  height: 14px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
}
.slack-waiting {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
  justify-content: center;
}
.slack-orchestrator-card {
  display: flex;
  gap: var(--openbot-space-3);
  align-items: center;
  padding: var(--openbot-space-3);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
}
.slack-orchestrator-model {
  display: grid;
  gap: var(--openbot-space-1);
}
.slack-roles {
  display: grid;
  max-height: 40vh;
  margin: 0;
  padding: var(--openbot-space-1);
  overflow-y: auto;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  list-style: none;
}
.slack-role-row {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
  padding: var(--openbot-space-1) var(--openbot-space-2);
  border-radius: var(--openbot-radius-sm);
  cursor: pointer;
}
.slack-role-row:hover {
  background: var(--openbot-bg-control-hover);
}
.slack-role-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hosted-servers-add {
  display: flex;
}
.hosted-servers-loading {
  display: grid;
  place-items: center;
  padding: var(--openbot-space-8);
  animation: hosted-servers-loading-in var(--openbot-duration-normal) var(--openbot-ease-out) var(--openbot-loading-indicator-delay) both;
}
@keyframes hosted-servers-loading-in {
  from {
    opacity: 0;
  }
}
.hosted-servers-list .hosted-servers-row {
  min-height: 64px;
  align-items: center;
}
.hosted-servers-list .ui-item-content {
  min-width: 0;
}
.hosted-servers-list .ui-item-title {
  gap: var(--openbot-space-2);
}
.hosted-servers-actions {
  flex-wrap: nowrap;
  justify-content: flex-end;
}
@media (max-width: 700px) {
  .hosted-servers-list .hosted-servers-row {
    align-items: flex-start;
    flex-direction: column;
  }
  .hosted-servers-actions {
    width: 100%;
    justify-content: flex-start;
  }
}
.profile-panel {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-6);
}
.profile-hero {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
}
.profile-hero-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(var(--openbot-space-8) * 1.75);
  aspect-ratio: 1;
  border-radius: var(--openbot-radius-pill);
  overflow: hidden;
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-hover);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
}
.profile-hero-avatar > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  outline: 1px solid var(--openbot-image-outline);
  outline-offset: -1px;
  border-radius: inherit;
}
.profile-hero-text {
  min-width: 0;
}
.profile-hero-text h3 {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--openbot-text-xl);
  font-weight: var(--openbot-weight-semibold);
  color: var(--openbot-text-primary);
}
.profile-hero-text p {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--openbot-text-sm);
  color: var(--openbot-text-secondary);
}
.profile-hero-actions {
  display: flex;
  flex: none;
  gap: var(--openbot-space-2);
  margin-inline-start: auto;
}
.profile-card {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-3);
  margin: 0;
  padding: var(--openbot-space-4);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
}
.profile-card.profile-facts, .profile-card.profile-ranking, .profile-card.profile-bars {
  row-gap: 0;
  padding: var(--openbot-space-1) var(--openbot-space-4);
}
.profile-activity-placeholder {
  align-items: flex-start;
}
.profile-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--openbot-space-4);
  align-items: start;
}
.profile-columns > .ui-settings-section {
  height: 100%;
  grid-template-rows: auto 1fr;
}
.profile-facts {
  display: flex;
  flex-direction: column;
  margin: 0;
}
.profile-facts > div, .profile-ranking li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  min-height: calc(var(--openbot-space-8) + var(--openbot-space-3));
  border-top: 1px solid var(--openbot-border);
  font-size: var(--openbot-text-sm);
}
.profile-facts > div:first-child, .profile-ranking li:first-child {
  border-top: 0;
}
.profile-facts dt {
  flex: none;
  color: var(--openbot-text-secondary);
  transition: color var(--openbot-duration-normal) var(--openbot-ease-out);
}
.profile-facts dd {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  min-width: 0;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}
.profile-ranking {
  list-style: none;
}
.profile-ranking li {
  justify-content: flex-start;
  color: var(--openbot-text-primary);
  transition: opacity var(--openbot-duration-normal) var(--openbot-ease-out);
}
.profile-ranking-avatar {
  width: var(--openbot-space-6);
  height: var(--openbot-space-6);
  flex: none;
}
.profile-ranking-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-ranking strong, .profile-bar-value {
  font-variant-numeric: tabular-nums;
  font-weight: var(--openbot-weight-medium);
}
.profile-bars {
  display: grid;
  grid-template-columns: fit-content(45%) 1fr auto;
  column-gap: var(--openbot-space-4);
  margin: 0;
  list-style: none;
}
.profile-bars li {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  min-height: calc(var(--openbot-space-8) + var(--openbot-space-1));
  font-size: var(--openbot-text-sm);
  color: var(--openbot-text-primary);
  transition: opacity var(--openbot-duration-normal) var(--openbot-ease-out);
}
.profile-bar-label {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  min-width: 0;
  white-space: nowrap;
}
.profile-bar-name {
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-bar-track {
  height: var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-primary) 7%, var(--openbot-transparent));
  }
  overflow: hidden;
}
.profile-bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
}
.profile-bar-value {
  text-align: end;
  color: var(--openbot-text-secondary);
}
.profile-heatmap {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1-5);
  min-width: 0;
}
.profile-heatmap-months, .profile-heatmap-grid {
  display: grid;
  grid-template-columns: repeat(var(--profile-columns), minmax(0, 1fr));
  column-gap: var(--openbot-space-0-5);
}
.profile-heatmap-months {
  font-size: var(--openbot-text-sm);
  color: var(--openbot-text-muted);
}
.profile-heatmap-months span {
  white-space: nowrap;
}
.profile-heatmap-grid {
  grid-template-rows: repeat(7, auto);
  grid-auto-flow: column;
  row-gap: var(--openbot-space-0-5);
}
.profile-heat-cell {
  display: block;
  aspect-ratio: 1;
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-primary) 7%, var(--openbot-transparent));
  }
}
.profile-heat-cell[data-empty] {
  background: var(--openbot-transparent);
}
.profile-heat-cell[data-level="1"] {
  background: var(--openbot-accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-accent) 32%, var(--openbot-transparent));
  }
}
.profile-heat-cell[data-level="2"] {
  background: var(--openbot-accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-accent) 55%, var(--openbot-transparent));
  }
}
.profile-heat-cell[data-level="3"] {
  background: var(--openbot-accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-accent) 78%, var(--openbot-transparent));
  }
}
.profile-heat-cell[data-level="4"] {
  background: var(--openbot-accent);
}
.profile-heatmap-grid .profile-heat-cell[data-active] {
  outline: 1px solid var(--openbot-text-primary);
  outline-offset: 1px;
}
.profile-heat-tooltip {
  position: fixed;
  z-index: var(--openbot-layer-toast);
  transform: translate(-50%, calc(-100% - var(--openbot-space-2)));
  pointer-events: none;
  white-space: nowrap;
  box-shadow: var(--openbot-shadow-raised);
}
.profile-heatmap-legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--openbot-space-1);
  font-size: var(--openbot-text-sm);
  color: var(--openbot-text-muted);
}
.profile-heatmap-legend .profile-heat-cell {
  width: var(--openbot-space-3);
}
.profile-dialog {
  width: min(880px, 100%);
  max-height: calc(100dvh - 2 * var(--openbot-space-6));
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
  overflow: auto;
  padding: var(--openbot-space-6);
  outline: 0;
  border-radius: var(--openbot-radius-xl);
  border: 1px solid var(--openbot-dialog-ring);
  background: var(--openbot-bg-sidebar);
  color: var(--openbot-text-primary);
}
.profile-dialog-header, .profile-dialog-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.profile-dialog-footer {
  justify-content: flex-end;
}
.profile-dialog-title {
  margin: 0;
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
}
.profile-share-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--openbot-radius-card);
  box-shadow: var(--openbot-shadow-card);
}
.profile-share-placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: 1200 / 690;
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-surface);
}
.profile-edit {
  width: min(440px, 100%);
}
.profile-edit-form {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
}
.profile-edit-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-2);
}
.profile-edit-photo .profile-edit-photo-trigger {
  width: calc(var(--openbot-space-8) * 2.5);
  height: calc(var(--openbot-space-8) * 2.5);
  overflow: visible;
}
.profile-edit-photo .profile-edit-avatar {
  font-size: var(--openbot-text-xl);
}
.profile-edit-photo-badge {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  display: grid;
  place-items: center;
  width: var(--openbot-space-6);
  height: var(--openbot-space-6);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-secondary);
}
.profile-edit-photo-badge > svg {
  width: var(--openbot-space-3);
  height: var(--openbot-space-3);
}
.profile-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: var(--openbot-space-2);
  margin: 0;
}
.profile-tile {
  --profile-step: calc(var(--openbot-duration-fast) / 3);
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-3);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  transition: background-color var(--openbot-duration-normal) var(--openbot-ease-out);
}
.profile-tile dt {
  font-size: var(--openbot-text-sm);
  color: var(--openbot-text-secondary);
}
.profile-tile dd {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-0-5);
  margin: 0;
}
.profile-tile strong {
  font-size: var(--openbot-text-2xl);
  font-weight: var(--openbot-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--openbot-text-primary);
}
.profile-tile dd > span {
  font-size: var(--openbot-text-sm);
  color: var(--openbot-text-muted);
}
.profile-tile:hover {
  background: linear-gradient(var(--openbot-hover), var(--openbot-hover)), var(--openbot-bg-surface);
}
.profile-tile-value {
  white-space: pre;
}
.profile-tile .profile-tile-value.is-animating .t-digit {
  animation-delay: calc( var(--profile-i, 0) * var(--profile-step) * 1.5 + var(--profile-c, 0) * var(--profile-step) / 2 );
}
.profile-facts > div:hover dt {
  color: var(--openbot-text-primary);
}
.profile-ranking:hover li:not(:hover), .profile-bars:hover li:not(:hover) {
  opacity: 0.45;
}
.profile-bars li:hover .profile-bar-value {
  color: var(--openbot-text-primary);
}
@media (prefers-reduced-motion: no-preference) {
  .profile-panel {
    --profile-step: calc(var(--openbot-duration-fast) / 3);
  }
  .profile-panel > * {
    animation: profile-rise var(--openbot-duration-toast-enter) var(--openbot-ease-out) backwards;
  }
  .profile-panel > :nth-child(2) {
    animation-delay: var(--profile-step);
  }
  .profile-panel > :nth-child(3) {
    animation-delay: calc(var(--profile-step) * 2);
  }
  .profile-panel > :nth-child(4) {
    animation-delay: calc(var(--profile-step) * 3);
  }
  .profile-panel > :nth-child(n + 5) {
    animation-delay: calc(var(--profile-step) * 4);
  }
  .profile-hero-avatar {
    animation: profile-pop var(--openbot-duration-toast-enter) var(--openbot-ease-out) backwards;
  }
  .profile-tile {
    transition: background-color var(--openbot-duration-normal) var(--openbot-ease-out), transform var(--openbot-duration-normal) var(--openbot-ease-out);
  }
  .profile-tile:hover {
    transform: translateY(calc(var(--openbot-space-0-5) * -1));
  }
  .profile-heatmap-grid .profile-heat-cell {
    animation: profile-cell-in var(--openbot-duration-overlay) var(--openbot-ease-out) backwards;
    animation-delay: calc(var(--profile-col, 0) * var(--openbot-duration-fast) / 15);
    transition: transform var(--openbot-duration-fast) var(--openbot-ease-out);
  }
  .profile-heatmap-grid .profile-heat-cell[data-active] {
    position: relative;
    z-index: 1;
    transform: scale(1.35);
  }
  .profile-heat-tooltip {
    animation: profile-tip-in var(--openbot-duration-normal) var(--openbot-ease-out) backwards;
    transition: left var(--openbot-duration-fast) var(--openbot-ease-out), top var(--openbot-duration-fast) var(--openbot-ease-out);
  }
  .profile-ranking li {
    animation: profile-slide-in var(--openbot-duration-toast-enter) var(--openbot-ease-out) backwards;
    animation-delay: calc(var(--openbot-duration-slow) + var(--profile-i, 0) * var(--profile-step));
  }
  .profile-ranking-avatar {
    transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
  }
  .profile-ranking li:hover .profile-ranking-avatar {
    transform: scale(1.12) rotate(-6deg);
  }
  .profile-bar-fill {
    transform-origin: left center;
    animation: profile-grow calc(var(--openbot-duration-overlay) * 2.5) var(--openbot-ease-out) backwards;
    animation-delay: calc(var(--openbot-duration-overlay) + var(--profile-i, 0) * var(--profile-step) * 2);
  }
  .profile-hero-actions svg {
    transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
  }
  .profile-hero-actions button:hover .profile-icon-share {
    transform: translateY(calc(var(--openbot-space-0-5) * -1));
  }
  .profile-hero-actions button:hover .profile-icon-edit {
    transform: rotate(-14deg);
  }
}
@keyframes profile-rise {
  from {
    opacity: 0;
    transform: translateY(var(--openbot-space-2));
  }
}
@keyframes profile-pop {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
}
@keyframes profile-cell-in {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
}
@keyframes profile-tip-in {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-100% - var(--openbot-space-1)));
  }
}
@keyframes profile-slide-in {
  from {
    opacity: 0;
    transform: translateX(calc(var(--openbot-space-2) * -1));
  }
}
@keyframes profile-grow {
  from {
    transform: scaleX(0);
  }
}
.computer-use-settings {
  display: grid;
  gap: var(--openbot-space-6);
}
.computer-use-card:is(.ui-item-group) {
  overflow: hidden;
}
.computer-use-permission-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-accent-soft);
}
.computer-use-permission-icon svg {
  width: 16px;
  height: 16px;
  color: var(--openbot-accent-text);
}
.computer-use-alert {
  margin-top: var(--openbot-space-3);
}
.computer-use-settings > .computer-use-alert:first-child, .computer-use-compact > .computer-use-alert:first-child {
  margin-top: 0;
}
.computer-use-loading .computer-use-row {
  min-height: 60px;
}
.computer-use-skeleton-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--openbot-radius-md);
}
.computer-use-skeleton-title {
  width: 128px;
  height: 12px;
}
.computer-use-skeleton-description {
  width: min(220px, 70%);
  height: 10px;
  margin-top: var(--openbot-space-2);
}
.computer-use-compact {
  width: min(100%, 520px);
  margin-top: var(--openbot-space-4);
  text-align: left;
}
.computer-use-compact-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  margin: 0 var(--openbot-space-1) var(--openbot-space-2);
}
.computer-use-compact-header h2 {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
}
.computer-use-compact-header p {
  margin: var(--openbot-space-0-5) 0 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.computer-use-compact-header > .ui-button {
  flex: 0 0 auto;
}
.computer-use-compact .computer-use-card {
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
}
.computer-use-compact .computer-use-row {
  min-height: 58px;
  padding: var(--openbot-space-2) var(--openbot-space-3);
}
.computer-use-compact .computer-use-row + .computer-use-row {
  border-top: 1px solid var(--openbot-border);
}
.computer-use-compact .ui-item-title {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.computer-use-compact .ui-item-description {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
@media (max-width: 640px) {
  .computer-use-row.ui-item {
    align-items: flex-start;
  }
  .computer-use-row .ui-item-actions {
    width: auto;
    padding-top: var(--openbot-space-1);
  }
}
.computer-use-recheck {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--openbot-space-2);
}
.computer-use-recheck .ui-button > svg, .computer-use-compact-header .ui-button > svg, .computer-use-alert .ui-button > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.computer-use-window-highlight {
  position: absolute;
  inset: 0;
  border-radius: var(--computer-use-window-radius);
  box-shadow: inset 0 0 0 2px var(--openbot-accent), inset 0 0 44px -4px var(--openbot-accent-strong), inset 0 0 120px -8px var(--openbot-accent-soft);
  pointer-events: none;
}
html:has(.computer-use-highlight-surface), body:has(.computer-use-highlight-surface), #root:has(.computer-use-highlight-surface) {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
}
.computer-use-highlight-surface {
  position: relative;
  width: 100%;
  height: 100%;
  background: transparent;
  pointer-events: none;
}
.computer-use-highlight-surface-frame {
  position: absolute;
  pointer-events: none;
}
.computer-use-agent-cursor {
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 24px;
  overflow: visible;
  fill: var(--openbot-accent);
  stroke: var(--openbot-text-on-accent);
  stroke-width: 5;
  paint-order: stroke fill;
  filter: drop-shadow(0 0 6px var(--openbot-accent-strong));
  pointer-events: none;
}
.computer-use-grant:is(.ui-button) {
  border-color: transparent;
  background: var(--openbot-accent);
  color: var(--openbot-text-on-accent);
}
@media (hover: hover) and (pointer: fine) and (min-width: 601px) {
  .computer-use-grant:is(.ui-button):hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-accent-hover);
  }
}
.computer-use-help {
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
  padding: 44px var(--openbot-space-4) var(--openbot-space-4);
  background: var(--openbot-bg-canvas);
  text-align: left;
}
.computer-use-help-header {
  display: flex;
  align-items: flex-start;
  gap: var(--openbot-space-3);
}
.computer-use-help-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-accent-soft);
}
.computer-use-help-icon svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  color: var(--openbot-accent-text);
  stroke-width: var(--openbot-icon-stroke);
}
.computer-use-help h1 {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
}
.computer-use-help-header p {
  margin: var(--openbot-space-0-5) 0 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.computer-use-help-steps {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
  margin: 0;
  padding-left: var(--openbot-space-4);
  list-style: decimal;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.computer-use-help-status {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.computer-use-help-status svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  color: var(--openbot-success);
  stroke-width: var(--openbot-icon-stroke);
}
.computer-use-help-status.is-error {
  color: var(--openbot-danger);
}
.computer-use-drag-card {
  position: relative;
  width: 210px;
  min-height: 94px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--openbot-space-1);
  align-self: center;
  box-sizing: border-box;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-primary);
  cursor: grab;
  -webkit-app-region: no-drag;
}
.computer-use-drag-card:hover {
  border-color: var(--openbot-accent-strong);
  background: var(--openbot-bg-control-hover);
}
.computer-use-drag-card:active, .computer-use-drag-card.is-dragging {
  cursor: grabbing;
}
.computer-use-drag-handle {
  position: absolute;
  top: var(--openbot-space-2);
  right: var(--openbot-space-2);
  color: var(--openbot-text-dim);
}
.computer-use-drag-handle svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.computer-use-drag-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
}
.computer-use-drag-icon img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}
.computer-use-drag-icon svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  color: var(--openbot-text-secondary);
}
.computer-use-drag-card strong {
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.computer-use-drag-card > span:last-child {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.computer-use-help-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
}
.server-settings-modal-shell .settings-modal-main {
  background: var(--openbot-bg-canvas);
}
.server-settings-modal-shell .settings-modal-scroll-frame::before {
  background: linear-gradient( to bottom, var(--openbot-bg-canvas) 0%, var(--openbot-bg-canvas) 28%, var(--openbot-bg-canvas-clear) 100% );
}
.server-settings-modal-shell .settings-modal-scroll-frame::after {
  background: linear-gradient( to top, var(--openbot-bg-canvas) 0%, var(--openbot-bg-canvas) 28%, var(--openbot-bg-canvas-clear) 100% );
}
.server-settings-panel {
  width: 100%;
  gap: var(--openbot-space-6);
  animation: none;
}
.server-settings-logo {
  width: 40px;
  height: 40px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: var(--openbot-tracking-wide);
}
.server-settings-logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  outline: 1px solid var(--openbot-image-outline);
  outline-offset: -1px;
}
.server-settings-logo-trigger {
  border-radius: var(--openbot-radius-md);
  color: var(--openbot-text-muted);
}
.server-settings-logo-trigger .server-settings-logo {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
  pointer-events: none;
}
.server-settings-logo-placeholder {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.server-settings-item-error {
  color: var(--openbot-danger);
}
.server-settings-readonly-name.ui-item {
  min-height: 72px;
}
.server-settings-publish-setting.ui-switch-field, .server-settings-mute-setting.ui-switch-field {
  min-height: 64px;
  padding: var(--openbot-space-3) var(--openbot-space-4);
  width: 100%;
  justify-content: space-between;
  gap: var(--openbot-space-6);
}
.server-settings-readonly-value {
  min-width: 180px;
  max-width: 300px;
  overflow-wrap: anywhere;
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
  text-align: right;
  user-select: text;
}
.server-settings-address-control.ui-button {
  width: 320px;
  height: var(--openbot-control-md);
  min-width: 0;
  flex-direction: row-reverse;
  justify-content: space-between;
  overflow: visible;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
  padding-inline: var(--openbot-space-3) var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  box-shadow: inset 0 0 0 1px var(--openbot-border);
}
.server-settings-address-control > span {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  font-family: var(--openbot-font-mono);
  font-weight: var(--openbot-weight-regular);
  text-align: left;
  text-overflow: ellipsis;
}
.server-settings-address-control > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.server-settings-private-badge {
  padding: var(--openbot-space-0-5) var(--openbot-space-1-5);
}
.server-settings-address-control[data-copied] {
  color: var(--openbot-success);
}
.server-settings-error-toast {
  position: absolute;
  right: var(--openbot-space-6);
  bottom: var(--openbot-space-6);
  left: var(--openbot-space-6);
  z-index: 3;
  box-shadow: 0 12px 32px var(--openbot-shadow-dialog);
}
.server-settings-error-toast[data-with-save-bar] {
  bottom: calc(60px + var(--openbot-space-3));
}
.server-settings-members-alert {
  border: 0;
  background: var(--openbot-bg-control);
}
.server-settings-members-title {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.server-settings-search {
  position: relative;
  width: 188px;
  flex: 0 0 auto;
}
.server-settings-search > svg {
  position: absolute;
  top: 50%;
  left: var(--openbot-space-3);
  z-index: 1;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
  pointer-events: none;
  transform: translateY(-50%);
}
.server-settings-search .ui-input {
  padding-left: var(--openbot-space-8);
}
.server-settings-invite-card.ui-card {
  border: 0;
  background: var(--openbot-bg-surface);
  padding: var(--openbot-space-4);
  box-shadow: none;
}
.server-settings-invite-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px auto;
  align-items: start;
  gap: var(--openbot-space-2);
}
.server-settings-invite-composer .ui-sliding-tabs-content-slot {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
}
.server-settings-invite-composer .ui-sliding-tabs-content:not([data-selected]) {
  position: absolute;
  inset: 0;
}
.server-settings-invite-mode-panel, .server-settings-invite-email-field, .server-settings-invite-email-field .ui-input {
  min-width: 0;
  width: 100%;
}
.server-settings-invite-email-field {
  position: relative;
  width: 22rem;
  max-width: 100%;
}
.server-settings-invite-email-field > .ui-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.server-settings-invite-link-input.ui-input {
  font-family: var(--openbot-font-mono);
  cursor: text;
}
.server-settings-invite-link-input.ui-input::placeholder {
  font-family: var(--openbot-font-sans);
}
.server-settings-invite-copy > span {
  min-width: 9ch;
  text-align: center;
}
.server-settings-invite-copy > svg, .server-settings-invite-new-link > svg, .server-settings-routine-feed-row .ui-button > svg, .server-settings-routine-feed-actions .ui-button > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.server-settings-invite-hint {
  display: block;
  margin-top: var(--openbot-space-2);
}
.server-settings-role-select {
  width: 100%;
}
.server-settings-invite-result {
  border: 0;
  background: var(--openbot-bg-surface-raised);
  margin-top: var(--openbot-space-3);
}
.server-settings-member-row[data-disabled] {
  background: var(--openbot-bg-control);
}
.server-settings-member-meta {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.server-settings-member-actions {
  min-width: 92px;
}
.server-settings-member-menu-trigger {
  position: relative;
}
.server-settings-member-menu-trigger::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  content: "";
  transform: translate(-50%, -50%);
}
.server-settings-member-menu-trigger svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.server-settings-empty-row .ui-item-content {
  text-align: center;
}
.server-settings-desktop-icon {
  width: 40px;
  height: 40px;
  justify-content: center;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-secondary);
}
.server-settings-desktop-icon svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
}
.server-settings-desktop-description {
  max-width: 360px;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
.server-settings-desktop-meta {
  max-width: 260px;
  display: grid;
  justify-items: end;
  gap: var(--openbot-space-1);
  text-align: right;
}
.server-settings-desktop-hint {
  max-width: 220px;
  text-align: right;
}
.server-settings-desktop-status {
  margin-top: var(--openbot-space-1);
}
@media (max-width: 720px) {
  .server-settings-address-setting, .server-settings-readonly-name {
    align-items: flex-start;
    flex-direction: column;
  }
  .server-settings-address-control, .server-settings-readonly-name .ui-item-actions {
    width: 100%;
    max-width: none;
    justify-content: space-between;
  }
  .server-settings-readonly-value {
    min-width: 0;
    max-width: none;
    text-align: left;
  }
  .server-settings-address-control {
    width: 100%;
  }
  .server-settings-error-toast {
    right: var(--openbot-space-4);
    left: var(--openbot-space-4);
  }
  .server-settings-invite-composer {
    grid-template-columns: minmax(0, 1fr) 118px;
  }
  .server-settings-invite-email-field {
    max-width: none;
  }
  .server-settings-invite-composer > .ui-button, .server-settings-invite-share {
    grid-column: 1 / -1;
  }
  .server-settings-desktop-card .ui-item {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .server-settings-desktop-meta, .server-settings-desktop-hint {
    max-width: none;
    margin-left: 52px;
    justify-items: start;
    text-align: left;
  }
}
@media (max-width: 520px) {
  :is(.server-settings-invite-section, .server-settings-members-section) .ui-settings-section-header {
    align-items: stretch;
    flex-direction: column;
  }
  .server-settings-invite-section .ui-settings-section-actions, .server-settings-members-section .ui-settings-section-actions, .server-settings-search {
    width: 100%;
  }
  .server-settings-member-row {
    flex-wrap: wrap;
  }
  .server-settings-member-actions {
    width: 100%;
    min-width: 0;
    justify-content: flex-end;
  }
  .server-settings-invite-composer {
    grid-template-columns: minmax(0, 1fr);
  }
  .server-settings-role-select, .server-settings-invite-composer > .ui-button, .server-settings-invite-share {
    width: 100%;
    grid-column: 1;
  }
}
.server-settings-invite-share {
  display: flex;
  gap: var(--openbot-space-1);
}
.server-settings-invite-share > .ui-button:last-child {
  animation: server-settings-invite-qr-in var(--openbot-duration-normal) var(--openbot-ease-out);
}
@keyframes server-settings-invite-qr-in {
  from {
    opacity: 0;
    transform: translateX(calc(-1 * var(--openbot-space-4)));
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.server-settings-invite-qr {
  animation: server-settings-invite-panel-in var(--openbot-duration-normal) var(--openbot-ease-out);
  transform-origin: top;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-4);
}
@media (prefers-reduced-motion: reduce) {
  .server-settings-invite-share > .ui-button:last-child {
    animation: none;
  }
}
@keyframes server-settings-invite-panel-in {
  from {
    opacity: 0;
    transform: translateY(calc(-1 * var(--openbot-space-3))) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .server-settings-invite-qr {
    animation: none;
  }
}
.server-settings-routine-feed-row {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.server-settings-routine-feed-agent {
  flex: none;
  width: auto;
}
.server-settings-routine-feed-row .ui-input {
  flex: 1;
  min-width: 0;
  font-family: var(--openbot-font-mono);
  cursor: text;
}
.server-settings-routine-feed-text {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
.server-settings-routine-feed-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-1);
}
.server-settings-routine-feed-loading {
  display: grid;
  place-items: center;
  padding: var(--openbot-space-6);
  animation: server-settings-routine-feed-loading-in var(--openbot-duration-normal) var(--openbot-ease-out) var(--openbot-loading-indicator-delay) both;
}
@keyframes server-settings-routine-feed-loading-in {
  from {
    opacity: 0;
  }
}
.server-settings-routine-feed-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.server-mcp-panel {
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  min-height: 100%;
}
.server-mcp-panel.t-page-slide .t-page {
  position: static;
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-6);
  min-width: 0;
}
@starting-style {
  .settings-modal .server-mcp-panel.t-page-slide .t-page[data-page-id] {
    opacity: 0;
    transform: translateX(var(--t-page-from-x));
    filter: blur(var(--page-blur));
  }
}
.server-mcp-section {
  min-width: 0;
}
.server-mcp-error {
  display: block;
  margin-bottom: var(--openbot-space-2);
}
.server-mcp-runtime-note {
  display: block;
  margin-bottom: var(--openbot-space-2);
}
.server-mcp-test-result {
  display: block;
  overflow-wrap: anywhere;
}
.server-mcp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-3);
  border: 1px dashed var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  padding: var(--openbot-space-8) var(--openbot-space-6);
  text-align: center;
}
.server-mcp-panel .ui-button > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.server-mcp-list {
  min-width: 0;
}
.server-mcp-row-icon {
  color: var(--openbot-text-muted);
}
.server-mcp-row[data-disabled] .server-mcp-row-icon, .server-mcp-row[data-disabled] .ui-item-content {
  opacity: 0.55;
}
.server-mcp-row-title {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  min-width: 0;
  flex-wrap: wrap;
}
.server-mcp-row-next {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-top: var(--openbot-space-1);
}
.server-mcp-row-menu {
  min-width: 180px;
}
.server-mcp-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--openbot-space-6);
  min-width: 0;
}
.server-mcp-transport-panel {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-6);
  min-width: 0;
}
.server-mcp-repeat {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
  min-width: 0;
  border: 0;
  margin: 0;
  padding: 0;
}
.server-mcp-repeat-legend {
  padding: 0;
}
.server-mcp-repeat-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-2);
}
.server-mcp-repeat-row-pair {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
}
.server-mcp-repeat-add {
  justify-content: center;
  width: 100%;
}
.server-mcp-callback {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  min-width: 0;
}
.server-mcp-callback-url {
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: var(--openbot-font-mono);
}
@media (max-width: 520px) {
  .server-mcp-repeat-row-pair {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .server-mcp-repeat-row-pair > .ui-input:first-child {
    grid-column: 1 / -1;
  }
}
.skills-marketplace-backdrop {
  z-index: var(--openbot-layer-dialog-host);
  padding: var(--openbot-space-4);
}
.skills-marketplace {
  --marketplace-inset: var(--openbot-space-6);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1040px, calc(100vw - 32px));
  height: min(704px, calc(100vh - 32px));
  overflow: hidden;
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-sidebar);
  color: var(--openbot-text-primary);
}
.skills-marketplace-page {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  .skills-marketplace {
    transition: opacity var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1), transform var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1);
  }
  .skills-marketplace[data-closed] {
    opacity: 0;
    transform: scale(0.98);
  }
}
.marketplace-menu {
  z-index: calc(var(--openbot-layer-dialog-host) + 1);
}
body:has(.skills-marketplace) :is(.integration-dialog-backdrop, .integration-wizard-dialog) {
  z-index: calc(var(--openbot-layer-dialog-host) + 1);
}
.skills-marketplace-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  min-height: 48px;
  padding: var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-2) var(--marketplace-inset);
  border-bottom: 1px solid var(--openbot-border);
}
.skills-marketplace-topbar-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--openbot-space-1);
}
.skills-marketplace-body {
  position: relative;
  overflow: auto;
  scrollbar-gutter: stable;
}
.marketplace-frame {
  padding: var(--openbot-space-6) var(--marketplace-inset) var(--openbot-space-8);
}
.skills-marketplace-error {
  position: sticky;
  bottom: var(--openbot-space-4);
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  width: fit-content;
  max-width: calc(100% - 32px);
  margin: 0 auto var(--openbot-space-4);
  padding: var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-3);
  border: 1px solid var(--openbot-danger);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
  color: var(--openbot-danger);
  box-shadow: 0 12px 32px var(--openbot-shadow-dialog);
}
.marketplace-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.marketplace-crumbs {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--openbot-space-2);
  min-width: 0;
}
.marketplace-title {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-lg);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.skills-marketplace .marketplace-crumb-parent {
  flex: 0 1 auto;
  min-width: 0;
  height: auto;
  margin-block: calc(-1 * var(--openbot-space-1));
  margin-inline: calc(-1 * var(--openbot-space-2) - 1px);
  padding: var(--openbot-space-1) var(--openbot-space-2);
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-lg);
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .skills-marketplace .marketplace-crumb-parent:hover:not(:disabled) {
    border-color: var(--openbot-border-strong);
    background: var(--openbot-bg-control-hover);
    color: var(--openbot-text-primary);
  }
}
.marketplace-crumb-separator {
  flex: 0 0 auto;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
}
.marketplace-title:focus, .skills-marketplace-body h3[tabindex="-1"]:focus {
  outline: none;
}
.marketplace-view, .marketplace-stack {
  display: grid;
  align-content: start;
  gap: var(--openbot-space-6);
  min-width: 0;
}
.marketplace-head {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-4);
}
.marketplace-head-actions {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  min-width: 0;
  max-width: 50%;
  gap: var(--openbot-space-1);
}
.marketplace-head-copy {
  display: grid;
  flex: 1;
  gap: var(--openbot-space-1);
  min-width: 0;
}
.marketplace-page-title {
  margin: 0;
  overflow-wrap: anywhere;
}
.marketplace-command {
  overflow-wrap: anywhere;
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
}
.marketplace-toolbar {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
}
.marketplace-search {
  position: relative;
  flex: 0 1 240px;
  min-width: 0;
  margin-left: auto;
}
.marketplace-count {
  margin-left: var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
  font-variant-numeric: tabular-nums;
}
.marketplace-install-menu {
  min-width: 220px;
}
.marketplace-install-trigger {
  min-width: 0;
  max-width: 100%;
}
.marketplace-install-trigger svg {
  flex: none;
}
.marketplace-install-label {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.marketplace-tab-slot {
  padding-top: var(--openbot-space-4);
}
.marketplace-block {
  display: grid;
  gap: var(--openbot-space-2);
}
.marketplace-block-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.marketplace-block-copy {
  display: grid;
  gap: var(--openbot-space-0-5);
  min-width: 0;
}
.marketplace-load-more {
  justify-self: center;
}
.marketplace-avatar {
  --marketplace-avatar-size: 20px;
  display: inline-grid;
  flex: none;
  width: var(--marketplace-avatar-size);
  height: var(--marketplace-avatar-size);
}
.marketplace-avatar[data-size="xs"] {
  --marketplace-avatar-size: 16px;
}
.marketplace-avatar[data-size="md"] {
  --marketplace-avatar-size: 40px;
}
.marketplace-avatar[data-size="lg"] {
  --marketplace-avatar-size: 48px;
}
.marketplace-avatar > .agent-avatar {
  --agent-avatar-optical-offset: calc(var(--marketplace-avatar-size) * -0.14);
  width: 100%;
  height: 100%;
}
.marketplace-skill-mark {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 20px;
  height: 20px;
  overflow: hidden;
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-muted);
}
.marketplace-skill-mark[data-size="row"] {
  width: 36px;
  height: 36px;
  border-radius: var(--openbot-radius-md);
}
.marketplace-skill-mark[data-size="md"] {
  width: 40px;
  height: 40px;
  border-radius: var(--openbot-radius-md);
}
.skills-marketplace-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  color: var(--openbot-accent-text);
}
.skills-marketplace-icon:has(img) {
  border: 0;
  background: transparent;
}
.skills-marketplace-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.skills-marketplace-icon svg {
  width: 20px;
  height: 20px;
}
.marketplace-skill-mark[data-kind="icon"] > img {
  width: 100%;
  height: 100%;
}
.marketplace-skill-mark[data-kind="none"] > * {
  width: 60%;
  height: 60%;
}
.skills-marketplace .integration-logo-tile > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.marketplace-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--openbot-space-3);
}
.marketplace-card {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-rows: auto 1fr auto;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-4);
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-grouped);
  transition: background var(--openbot-duration-fast) var(--openbot-ease-out);
}
.marketplace-card:hover:not(.marketplace-card-skeleton) {
  background: var(--openbot-bg-control-hover);
}
.marketplace-card-head {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  min-width: 0;
}
.marketplace-card-name {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}
.marketplace-card-action {
  position: relative;
  z-index: 2;
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  gap: var(--openbot-space-2);
  min-width: 0;
  max-width: 60%;
}
.marketplace-card-body {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--openbot-text-secondary);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.marketplace-card-foot {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  min-height: 16px;
  font-variant-numeric: tabular-nums;
}
.marketplace-hitarea {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: transparent;
}
.marketplace-hitarea:hover:not(:disabled) {
  background: transparent;
}
.marketplace-card-skeleton {
  grid-template-rows: auto auto auto;
}
.marketplace-skeleton-mark {
  width: 40px;
  height: 40px;
  border-radius: var(--openbot-radius-md);
}
.marketplace-skeleton-line {
  width: 100%;
  height: 12px;
}
.marketplace-skeleton-line:last-child {
  width: 60%;
}
.marketplace-done {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  color: var(--openbot-success-text);
  font-size: var(--openbot-text-sm);
  white-space: nowrap;
}
.marketplace-done > svg {
  width: 14px;
  height: 14px;
}
.marketplace-rows {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.marketplace-row {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  min-height: 52px;
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
}
.marketplace-row-copy {
  display: grid;
  flex: 1;
  gap: var(--openbot-space-0-5);
  min-width: 0;
  overflow-wrap: anywhere;
}
.marketplace-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: var(--openbot-space-8);
  align-items: start;
}
.marketplace-side {
  position: sticky;
  top: var(--openbot-space-6);
  padding-left: var(--openbot-space-6);
  border-left: 1px solid var(--openbot-border);
}
.marketplace-props {
  display: grid;
  gap: var(--openbot-space-0-5);
  margin: 0;
}
.marketplace-props > dd {
  margin: 0 0 var(--openbot-space-3);
}
.marketplace-props > dd:last-child {
  margin-bottom: 0;
}
.marketplace-info {
  grid-template-columns: minmax(120px, max-content) minmax(0, 1fr);
  column-gap: var(--openbot-space-6);
  row-gap: var(--openbot-space-2);
}
.marketplace-info > dd {
  margin: 0;
}
.skills-marketplace .marketplace-link {
  height: auto;
  padding: 0;
}
.marketplace-try {
  display: grid;
  gap: var(--openbot-space-2);
}
.skill-preview-card.marketplace-try-card {
  gap: var(--openbot-space-2);
}
.marketplace-try-card .skill-preview-request {
  width: min(100%, 560px);
  line-height: var(--openbot-space-6);
}
.marketplace-try-card .skill-preview-chip {
  margin-inline-end: var(--openbot-space-0-5);
  vertical-align: top;
}
.marketplace-try-card .reference-chip-icon > :is(img, svg) {
  width: 100%;
  height: 100%;
}
.marketplace-doc {
  min-width: 0;
  padding: var(--openbot-space-4) var(--openbot-space-6);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  font-size: var(--openbot-text-sm);
  overflow-wrap: anywhere;
}
.marketplace-doc > :first-child {
  margin-top: 0;
}
.marketplace-doc > :last-child {
  margin-bottom: 0;
}
.marketplace-app-page {
  width: min(100%, 720px);
  margin-inline: auto;
}
.marketplace-empty {
  display: grid;
  justify-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-8) var(--openbot-space-6);
  border: 1px dashed var(--openbot-border-strong);
  border-radius: var(--openbot-radius-card);
  text-align: center;
}
.marketplace-empty > p {
  max-width: 440px;
  margin: 0;
}
.marketplace-empty > .ui-button {
  margin-top: var(--openbot-space-2);
}
.marketplace-empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--openbot-space-2);
}
@media (max-width: 860px) {
  .skills-marketplace {
    --marketplace-inset: var(--openbot-space-4);
  }
  .marketplace-page {
    grid-template-columns: minmax(0, 1fr);
  }
  .marketplace-side {
    position: static;
    padding: var(--openbot-space-4) 0 0;
    border-top: 1px solid var(--openbot-border);
    border-left: 0;
  }
  .marketplace-head {
    flex-wrap: wrap;
  }
}
.skills-marketplace .ui-button > svg, .marketplace-search > svg {
  width: 16px;
  height: 16px;
}
.logo-color-grid {
  display: grid;
  grid-template-columns: repeat(5, 32px);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  gap: 4px;
}
.logo-color-choice {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  transition-property: scale, background-color, box-shadow;
  transition-duration: var(--openbot-duration-normal), var(--openbot-duration-hover), var(--openbot-duration-hover);
  transition-timing-function: ease-out;
}
.logo-color-choice:hover {
  background: var(--openbot-hover);
}
.logo-color-choice:active {
  scale: 0.96;
}
.logo-color-choice-selected {
  background: var(--openbot-border);
  box-shadow: inset 0 0 0 1px var(--openbot-text-muted), 0 1px 3px var(--openbot-shadow-popover-ambient);
}
.logo-color-swatch {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: var(--openbot-radius-pill);
  box-shadow: inset 0 0 0 1px var(--openbot-border-strong);
}
.sound-theme-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  width: 100%;
  min-width: 0;
  gap: var(--openbot-space-2);
}
.sound-theme-option {
  display: flex;
  min-width: 0;
}
.sound-theme-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: var(--openbot-space-1);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  box-shadow: inset 0 0 0 1px var(--openbot-border);
  text-align: left;
  cursor: pointer;
  transition-property: scale, background-color, box-shadow;
  transition-duration: var(--openbot-duration-normal), var(--openbot-duration-hover), var(--openbot-duration-normal);
  transition-timing-function: var(--openbot-ease-out);
}
.sound-theme-card:hover {
  background: var(--openbot-bg-control-hover);
}
.sound-theme-card:active {
  scale: 0.96;
}
.sound-theme-card[data-checked] {
  box-shadow: inset 0 0 0 1.5px var(--openbot-text-primary), 0 1px 3px var(--openbot-shadow-popover-ambient);
}
.sound-theme-card[data-popped][data-checked] {
  animation: sound-theme-pop var(--openbot-duration-toast-enter) var(--openbot-ease-out);
}
.sound-theme-option:has(:focus-visible) .sound-theme-card {
  box-shadow: var(--openbot-focus-ring);
}
.sound-theme-dither {
  --sound-theme-ink: var(--openbot-sound-off-ink);
  --sound-theme-back: var(--openbot-sound-off-back);
  position: relative;
  height: 56px;
  overflow: hidden;
  clip-path: inset(0 round var(--openbot-radius-md));
  border-radius: var(--openbot-radius-md);
  color: var(--sound-theme-ink);
  background-color: var(--sound-theme-back);
  background-image: radial-gradient(var(--sound-theme-ink) 1px, transparent 1.5px), linear-gradient(135deg, transparent, var(--sound-theme-ink));
  background-size: 4px 4px, 100% 100%;
  opacity: 0.72;
  filter: saturate(0.7);
  transition-property: opacity, filter;
  transition-duration: var(--openbot-duration-overlay);
  transition-timing-function: var(--openbot-ease-out);
}
.sound-theme-dither canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.sound-theme-card:hover .sound-theme-dither, .sound-theme-card[data-checked] .sound-theme-dither {
  opacity: 1;
  filter: none;
}
.sound-theme-dither[data-choice="default"] {
  --sound-theme-ink: var(--openbot-sound-warm-ink);
  --sound-theme-back: var(--openbot-sound-warm-back);
}
.sound-theme-dither[data-choice="mech"] {
  --sound-theme-ink: var(--openbot-sound-mech-ink);
  --sound-theme-back: var(--openbot-sound-mech-back);
}
.sound-theme-dither[data-choice="bubble"] {
  --sound-theme-ink: var(--openbot-sound-bubble-ink);
  --sound-theme-back: var(--openbot-sound-bubble-back);
}
.sound-theme-dither[data-choice="press"] {
  --sound-theme-ink: var(--openbot-sound-press-ink);
  --sound-theme-back: var(--openbot-sound-press-back);
}
.sound-theme-text {
  display: grid;
  min-width: 0;
  padding: var(--openbot-space-1-5) var(--openbot-space-1) var(--openbot-space-0-5);
}
.sound-theme-name {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: inherit;
}
.sound-theme-hint {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
@keyframes sound-theme-pop {
  0% {
    scale: 1;
  }
  35% {
    scale: 1.06;
    rotate: -1.5deg;
  }
  70% {
    scale: 0.98;
    rotate: 0.8deg;
  }
  100% {
    scale: 1;
    rotate: 0deg;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sound-theme-card[data-popped][data-checked] {
    animation: none;
  }
  .sound-theme-card:active {
    scale: 1;
  }
}
.mcp-connect-backdrop {
  z-index: calc(var(--openbot-layer-dialog-host) + 2);
}
.mcp-connect-dialog {
  position: relative;
  width: min(420px, 100%);
  max-height: calc(100dvh - var(--openbot-space-6) * 2);
  overflow-y: auto;
  outline: 0;
  border-radius: var(--openbot-radius-xl);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-6);
  color: var(--openbot-text-primary);
  animation: mcp-connect-dialog-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}
.mcp-connect-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-1);
}
.mcp-connect-close {
  position: absolute;
  top: var(--openbot-space-3);
  right: var(--openbot-space-3);
}
.mcp-connect-marks {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-3);
}
.mcp-connect-mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
}
.mcp-connect-mark .app-logo {
  width: 48px;
  height: 48px;
}
.mcp-connect-dots {
  width: 28px;
  height: 2px;
  background-image: radial-gradient(circle, var(--openbot-text-muted) 1px, transparent 1px);
  background-size: 7px 2px;
  animation: mcp-connect-dots-run 900ms linear infinite;
}
.mcp-connect-marks .mcp-connect-mark-icon {
  width: 48px;
  height: 48px;
  animation: mcp-connect-mark-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}
@media (prefers-reduced-motion: reduce) {
  .mcp-connect-dots, .mcp-connect-marks .mcp-connect-mark-icon {
    animation: none;
  }
}
.mcp-connect-title {
  display: block;
  margin: var(--openbot-space-3) 0 0;
  text-align: center;
  font-size: var(--openbot-text-xl);
  line-height: var(--openbot-leading-xl);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: var(--openbot-tracking-tight);
}
.mcp-connect-description {
  margin: 0;
  text-align: center;
  text-wrap: balance;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.mcp-connect-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-grouped);
}
.mcp-connect-row {
  position: relative;
  margin: 0;
  padding: var(--openbot-space-3);
}
.mcp-connect-row + .mcp-connect-row {
  border-top: 1px solid var(--openbot-border-grouped);
}
.mcp-local-heading {
  margin: 0;
  padding-right: var(--openbot-space-6);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-sm);
}
.mcp-local-steps {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
  margin: var(--openbot-space-2) 0 0;
  padding-left: var(--openbot-space-4);
  list-style: decimal;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.mcp-local-steps > li::marker {
  color: var(--openbot-text-muted);
}
.mcp-local-address {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.mcp-local-address > code {
  overflow-wrap: anywhere;
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
}
.mcp-connect-form {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
  margin: var(--openbot-space-4) 0 0;
}
.mcp-connect-docs {
  position: absolute;
  top: var(--openbot-space-3);
  right: var(--openbot-space-3);
  gap: var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.mcp-connect-primary {
  width: 100%;
}
.mcp-connect-docs > svg, .mcp-connect-primary > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.mcp-connect-status:empty {
  display: none;
}
.mcp-connect-privacy {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.mcp-connect-privacy svg {
  flex: none;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
}
@keyframes mcp-connect-dots-run {
  to {
    background-position-x: 7px;
  }
}
@keyframes mcp-connect-mark-in {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
}
@keyframes mcp-connect-dialog-in {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
}
.mcp-connect-dialog.mcp-sign-in-page-dialog, .mcp-connect-dialog[data-page] {
  width: min(720px, 100%);
}
.mcp-sign-in-page {
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
}
.mcp-sign-in-page-dialog .mcp-sign-in-page {
  margin-top: var(--openbot-space-4);
}
.mcp-sign-in-page-note {
  min-width: 0;
  margin: 0;
}
.mcp-sign-in-relay-open {
  margin-top: var(--openbot-space-4);
}
.mcp-sign-in-relay-form {
  margin-top: var(--openbot-space-4);
}
.mcp-sign-in-relay-row {
  display: flex;
  gap: var(--openbot-space-2);
}
.mcp-sign-in-relay-row > .ui-input {
  flex: 1;
  min-width: 0;
}
.mcp-sign-in-page-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  margin-top: var(--openbot-space-4);
}
.provider-update-toast-logo {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  overflow: visible;
  fill: var(--openbot-provider-current);
}
.provider-update-toast[data-sonner-toast][data-styled="true"] [data-action] {
  grid-row: 1;
  align-self: center;
}
.provider-update-toast[data-sonner-toast][data-styled="true"]:has(.provider-update-toast-action:not([data-idle="true"])) [data-content] {
  grid-column: 2;
}
.ui-toaster.ui-toaster-closeable .provider-update-toast[data-sonner-toast][data-styled="true"] [data-action], .ui-toaster .provider-update-toast[data-sonner-toast][data-styled="true"]:has([data-close-button]) [data-action] {
  margin-right: var(--openbot-space-6);
}
.ui-toaster [data-sonner-toast] [data-action]:has(.provider-update-toast-action[data-idle="true"]) {
  display: none;
}
.provider-update-toast[data-sonner-toast][data-styled="true"] [data-description]:has(.provider-update-toast-progress) {
  display: flex;
  flex-direction: column;
}
.provider-update-toast-line {
  display: block;
  min-width: 0;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.provider-update-toast-line[data-failed="true"] {
  display: -webkit-box;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
.provider-update-toast-line[data-failed="true"][data-expanded="true"] {
  display: block;
  -webkit-line-clamp: none;
  line-clamp: none;
}
.provider-update-toast .provider-update-toast-details {
  margin-top: var(--openbot-space-1);
  color: inherit;
  font-size: inherit;
  text-decoration: underline;
}
.provider-update-toast-progress {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  margin-top: var(--openbot-space-2);
}
.ui-toaster.ui-toaster-closeable .provider-update-toast .provider-update-toast-progress, .ui-toaster .provider-update-toast:has([data-close-button]) .provider-update-toast-progress {
  margin-right: calc(-1 * var(--openbot-space-6));
}
.provider-update-toast-bar {
  flex: 1;
  min-width: 0;
}
.provider-update-toast-bar[data-provider] .ui-progress-fill {
  background: var(--openbot-provider-current);
}
.provider-update-toast-percent {
  --digit-dur: var(--openbot-duration-fast);
  --digit-distance: var(--openbot-space-1);
  --digit-blur: 0px;
  --digit-ease: ease-out;
  display: inline-flex;
  justify-content: flex-end;
  width: 4ch;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
.custom-provider-dialog {
  display: flex;
  width: min(460px, 100%);
  max-height: calc(100dvh - 48px);
  flex-direction: column;
  overflow: hidden;
  outline: 0;
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-sidebar);
  color: var(--openbot-text-primary);
}
.custom-provider-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--openbot-space-3);
  border-bottom: 1px solid var(--openbot-border);
  padding: var(--openbot-space-4);
}
.custom-provider-mark {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
}
.custom-provider-title {
  min-width: 0;
  flex: 1;
}
.custom-provider-close {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-block-start: calc(var(--openbot-space-2) * -1);
  margin-inline-end: calc(var(--openbot-space-2) * -1);
  color: var(--openbot-text-muted);
}
.custom-provider-body {
  display: flex;
  min-height: 0;
  flex-direction: column;
}
.custom-provider-form {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: var(--openbot-space-4);
  overflow-y: auto;
  padding: var(--openbot-space-4);
}
.custom-provider-list {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: var(--openbot-space-4);
  overflow-y: auto;
  padding: var(--openbot-space-4);
}
.custom-provider-list-empty {
  padding: var(--openbot-space-4) 0;
  text-align: center;
}
.custom-provider-rows {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
}
.custom-provider-rows-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--openbot-space-3);
}
.custom-provider-row {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
}
.custom-provider-row-inputs {
  display: grid;
  align-items: center;
  gap: var(--openbot-space-2);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
}
.custom-provider-row-inputs.custom-provider-row-single {
  grid-template-columns: minmax(0, 1fr) auto;
}
.custom-provider-rows-error, .custom-provider-row-error, .custom-provider-submit-error {
  display: block;
}
.custom-provider-actions {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-2);
  border-top: 1px solid var(--openbot-border);
  padding: var(--openbot-space-4);
}
.custom-provider-actions .ui-button-variant-default {
  width: 100%;
}
.custom-provider-rows > .ui-button svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.custom-provider-rows-heading > .custom-provider-discover {
  margin-inline-start: auto;
}
.custom-provider-rows-heading > .custom-provider-discover + .custom-provider-rows-error {
  display: none;
}
.custom-provider-rows-heading > .custom-provider-discover svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.custom-provider-discovery-status {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.custom-provider-discovered {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--openbot-space-1);
  list-style: none;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
}
.custom-provider-discovered-row {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-1) var(--openbot-space-2);
  border-radius: var(--openbot-radius-sm);
  cursor: pointer;
}
.custom-provider-discovered-row:hover {
  background: var(--openbot-bg-control-hover);
}
.custom-provider-discovered-id {
  min-width: 0;
  overflow: hidden;
  font-family: var(--openbot-font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.custom-provider-preset-group {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
}
.custom-provider-presets {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.custom-provider-preset.ui-button {
  display: flex;
  width: 100%;
  height: auto;
  align-items: center;
  justify-content: flex-start;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  text-align: start;
  white-space: normal;
}
.custom-provider-preset-icon {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-secondary);
}
.custom-provider-preset > .custom-provider-preset-icon svg, .custom-provider-preset-chevron {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.custom-provider-preset-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 2px;
}
.custom-provider-preset-title {
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}
.custom-provider-preset-description {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
}
.custom-provider-preset-chevron {
  flex-shrink: 0;
  color: var(--openbot-text-muted);
}
.custom-acp-presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-2);
}
.custom-acp-code {
  overflow-wrap: anywhere;
}
.custom-acp-code input, input.custom-acp-code {
  font-family: var(--openbot-font-mono);
}
.detected-providers {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
  margin-top: var(--openbot-space-4);
}
.detected-providers-heading {
  display: flex;
  min-height: 24px;
  align-items: center;
  gap: var(--openbot-space-2);
}
.detected-providers-scanning {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
}
.ui-button.detected-providers-scan {
  gap: var(--openbot-space-1-5);
  margin-inline-start: auto;
  margin-inline-end: calc(var(--openbot-space-2) * -1);
}
.detected-providers-heading > .detected-providers-scan svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.detected-providers-icon {
  color: var(--openbot-text-secondary);
}
.detected-providers .detected-providers-icon > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.ui-button.detected-providers-show-hidden {
  align-self: flex-start;
  margin-inline-start: calc(var(--openbot-space-2) * -1);
}
.ui-button.custom-agents-copy-diagnostics {
  justify-self: start;
  margin-inline-start: calc(var(--openbot-space-2) * -1);
}
.detected-providers-settings {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
  margin-top: var(--openbot-space-3);
}
.acp-registry-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-2);
}
.acp-registry-form > .ui-field {
  flex-basis: 100%;
}
.acp-registry-entry.ui-item {
  flex-wrap: wrap;
}
.acp-registry-entry .ui-item-content {
  flex-basis: 180px;
}
.acp-registry-entry .ui-item-actions {
  min-width: 0;
  flex-shrink: 1;
  flex-wrap: wrap;
  margin-inline-start: auto;
}
.agent-template-dialog {
  position: relative;
  display: flex;
  width: min(420px, 100%);
  max-height: calc(100dvh - 48px);
  flex-direction: column;
  overflow: hidden;
  outline: 0;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-sidebar);
  color: var(--openbot-text-primary);
}
.agent-template-status {
  position: absolute;
  z-index: 1;
  inset-block-start: var(--openbot-space-3);
  inset-inline-start: var(--openbot-space-3);
}
.agent-template-corner-actions {
  position: absolute;
  z-index: 1;
  display: flex;
  gap: var(--openbot-space-1);
  inset-block-start: var(--openbot-space-2);
  inset-inline-end: var(--openbot-space-2);
  color: var(--openbot-text-muted);
}
.agent-template-body {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: var(--openbot-space-4);
  padding: var(--openbot-space-6) var(--openbot-space-4) var(--openbot-space-4);
}
.agent-template-scroll {
  overflow-y: auto;
}
.agent-template-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-1);
  text-align: center;
}
.agent-template-avatar {
  width: 72px;
  height: 72px;
  margin-block-end: var(--openbot-space-3);
}
.agent-template-name {
  overflow-wrap: anywhere;
}
.agent-template-description {
  display: -webkit-box;
  margin-block-start: var(--openbot-space-1);
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}
.agent-template-rows {
  display: grid;
  overflow: hidden;
  border-radius: var(--openbot-radius-grouped);
}
.agent-template-row {
  display: grid;
  width: 100%;
  height: auto;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-3);
  border-radius: 0;
  padding: var(--openbot-space-3) var(--openbot-space-4);
  text-align: start;
  color: var(--openbot-text-muted);
}
.agent-template-row + .agent-template-row {
  border-top: 1px solid var(--openbot-border-grouped);
}
.agent-template-row-copy {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-0-5);
}
.agent-template-row-title {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.agent-template-row-detail {
  overflow: hidden;
  color: var(--openbot-text-grouped-secondary);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-template-actions {
  display: flex;
  flex-shrink: 0;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
  border-top: 1px solid var(--openbot-border);
  padding: var(--openbot-space-3) var(--openbot-space-4);
}
.agent-template-copy {
  margin-inline-end: auto;
}
.agent-template-detail-header {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-block-start: calc(var(--openbot-space-2) * -1);
}
.agent-template-detail {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: var(--openbot-space-4);
  overflow-y: auto;
}
.agent-template-section {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
}
.agent-template-prose {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  overflow-wrap: anywhere;
}
.agent-template-prose .message-markdown-heading[data-level] {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
.agent-template-prose .message-markdown-heading:not([data-level="1"], [data-level="2"]) {
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.agent-template-list {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.agent-template-list > li {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-0-5);
}
.agent-template-skill-toggle {
  justify-content: flex-start;
  align-self: flex-start;
  gap: var(--openbot-space-1);
  margin-inline-start: calc(var(--openbot-space-2) * -1);
}
.agent-template-skill-text {
  max-height: 240px;
  margin: var(--openbot-space-1) 0 0;
  overflow: auto;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-3);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  white-space: pre-wrap;
}
.agent-delete-undo-toast-host {
  width: var(--width);
}
.agent-delete-undo-toast {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-3);
  overflow: hidden;
  padding: var(--openbot-space-3);
  padding-bottom: calc(var(--openbot-space-3) + var(--openbot-space-1));
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface-raised);
  box-shadow: 0 0 0 1px var(--openbot-border), var(--openbot-shadow-raised);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
}
.agent-delete-undo-toast-avatar {
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  width: 32px;
  height: 32px;
}
.agent-delete-undo-toast-text {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.agent-delete-undo-toast-title {
  overflow: hidden;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-delete-undo-toast-detail {
  overflow: hidden;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-delete-undo-toast-bar {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
}
.agent-delete-undo-toast-bar .ui-progress-track {
  border-radius: 0;
  background: transparent;
}
.agent-delete-undo-toast-bar .ui-progress-fill {
  background: var(--openbot-accent);
  transition-duration: var(--openbot-duration-fast);
  transition-timing-function: linear;
}
.whats-new-dialog {
  position: relative;
  display: flex;
  width: min(480px, 100%);
  max-height: min(640px, calc(100dvh - 2 * var(--openbot-space-6)));
  flex-direction: column;
  overflow: hidden;
  outline: 0;
  border-radius: var(--openbot-radius-xl);
  background: var(--openbot-bg-sidebar);
  color: var(--openbot-text-primary);
}
.whats-new-close {
  position: absolute;
  z-index: 1;
  inset-block-start: var(--openbot-space-3);
  inset-inline-end: var(--openbot-space-3);
  color: var(--openbot-text-muted);
}
.whats-new-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-8) var(--openbot-space-6) var(--openbot-space-4);
  text-align: center;
}
.whats-new-logo {
  --app-logo-background: var(--openbot-surface-light);
  width: 56px;
  height: 56px;
  margin-block-end: var(--openbot-space-3);
  border-radius: var(--openbot-radius-logo);
}
.whats-new-title {
  margin: 0;
  font-size: var(--openbot-text-2xl);
  font-weight: var(--openbot-weight-bold);
  line-height: var(--openbot-leading-2xl);
}
.whats-new-body {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--openbot-space-6);
  overflow-y: auto;
  padding: var(--openbot-space-2) var(--openbot-space-6) var(--openbot-space-6);
  border-block-start: 1px solid transparent;
}
.whats-new-body.scroll-fade-top {
  border-block-start-color: var(--openbot-border);
}
.whats-new-body.scroll-fade-bottom {
  mask-image: linear-gradient(to bottom, var(--openbot-text-primary) calc(100% - 32px), transparent);
}
.whats-new-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-2);
  padding-block: var(--openbot-space-6);
  text-align: center;
}
.whats-new-state .ui-button {
  margin-block-start: var(--openbot-space-2);
}
.whats-new-state-icon {
  width: 24px;
  height: 24px;
  color: var(--openbot-warning-text);
}
.whats-new-notice {
  padding: var(--openbot-space-3) var(--openbot-space-4) var(--openbot-space-4);
  border-radius: var(--openbot-radius-card);
  background-image: linear-gradient( 180deg, var(--openbot-warning-soft), var(--openbot-warning) );
  @supports (color: color-mix(in lab, red, red)) {
    background-image: linear-gradient( 180deg, var(--openbot-warning-soft), color-mix(in srgb, var(--openbot-warning) 3%, transparent) );
  }
  box-shadow: inset 0 0 0 1px var(--openbot-warning);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--openbot-warning) 26%, transparent);
  }
  --whats-new-tone: var(--openbot-warning-text);
}
.whats-new-notice-title {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin: 0 0 var(--openbot-space-2);
  color: var(--openbot-warning-text);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
}
.whats-new-notice-title svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
.whats-new-group {
  --whats-new-tone: var(--openbot-text-muted);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--openbot-space-3);
}
.whats-new-group[data-type="added"] {
  --whats-new-tone: var(--openbot-logo-production);
}
.whats-new-group[data-type="changed"] {
  --whats-new-tone: var(--openbot-accent-text);
}
.whats-new-group[data-type="fixed"] {
  --whats-new-tone: var(--openbot-success-text);
}
.whats-new-group-title {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin: 0;
  color: var(--whats-new-tone);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.whats-new-group-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--openbot-radius-pill);
  background: var(--whats-new-tone);
  box-shadow: 0 0 10px var(--whats-new-tone);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 10px color-mix(in srgb, var(--whats-new-tone) 70%, transparent);
  }
}
.whats-new-group-count {
  padding: 0 var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-pill);
  background: var(--whats-new-tone);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--whats-new-tone) 12%, transparent);
  }
  font-family: var(--openbot-font-mono);
  font-weight: var(--openbot-weight-medium);
  letter-spacing: 0;
}
.whats-new-list {
  display: grid;
  width: 100%;
  gap: var(--openbot-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.whats-new-item {
  position: relative;
  padding-inline-start: var(--openbot-space-6);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  text-wrap: pretty;
}
.whats-new-item-headline {
  display: block;
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}
.whats-new-item-detail {
  display: block;
  margin-block-start: var(--openbot-space-0-5);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.whats-new-item::before {
  content: "";
  position: absolute;
  inset-block-start: 0.75em;
  inset-inline-start: var(--openbot-space-1);
  width: 8px;
  height: 1px;
  background: var(--whats-new-tone);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--whats-new-tone) 70%, transparent);
  }
}
.whats-new-toggle {
  margin-inline-start: calc(-1 * var(--openbot-space-2));
  color: var(--openbot-text-muted);
}
.whats-new-actions .ui-button svg, .whats-new-toggle svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.whats-new-toggle svg {
  transition: transform var(--openbot-duration-fast) var(--openbot-ease-out);
}
.whats-new-toggle[data-expanded] svg {
  transform: rotate(180deg);
}
.whats-new-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border-block-start: 1px solid var(--openbot-border);
}
@media (max-width: 560px) {
  .whats-new-backdrop {
    padding: var(--openbot-space-3);
  }
  .whats-new-header {
    padding-inline: var(--openbot-space-4);
  }
  .whats-new-body {
    padding-inline: var(--openbot-space-4);
  }
}
@media (prefers-reduced-motion: reduce) {
  .whats-new-backdrop, .whats-new-toggle svg {
    animation: none;
    transition: none;
  }
}
.help-menu {
  width: 320px;
}
.help-menu .help-menu-news {
  gap: var(--openbot-space-3);
}
.help-menu-news-headline {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.help-menu-news .ui-menu-trailing {
  flex: none;
}
.billing-panel {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
}
.billing-loading {
  display: grid;
  place-items: center;
  padding: var(--openbot-space-8);
}
.billing-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--openbot-space-3);
  min-height: 32px;
}
.billing-toolbar .ui-button {
  max-width: 100%;
  height: auto;
  white-space: normal;
}
.billing-empty {
  padding: var(--openbot-space-6) var(--openbot-space-4);
  border: 1px dashed var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  text-align: center;
}
.billing-server-logo {
  width: 32px;
  height: 32px;
  border-radius: var(--openbot-radius-md);
}
.billing-server-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
}
.billing-server .ui-item-actions {
  gap: var(--openbot-space-2);
}
.billing-server-price {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.billing-dialog-backdrop {
  background: var(--openbot-bg-overlay);
}
.billing-dialog {
  position: relative;
  display: flex;
  width: min(640px, 100%);
  max-height: calc(100dvh - 2 * var(--openbot-space-6));
  flex-direction: column;
  overflow: hidden;
  outline: 0;
  border-radius: var(--openbot-radius-modal);
  background: var(--openbot-bg-sidebar);
  color: var(--openbot-text-primary);
}
.billing-dialog-close {
  position: absolute;
  z-index: 1;
  inset-block-start: var(--openbot-space-3);
  inset-inline-end: var(--openbot-space-3);
  color: var(--openbot-text-muted);
}
.billing-dialog-header {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-6) var(--openbot-space-6) var(--openbot-space-4);
}
.billing-dialog-header p {
  margin: 0;
}
.billing-dialog-title {
  margin: 0;
  font-size: var(--openbot-text-2xl);
  font-weight: var(--openbot-weight-bold);
  line-height: var(--openbot-leading-2xl);
}
.billing-dialog-body {
  min-height: 0;
  overflow-y: auto;
  padding: 0 var(--openbot-space-6) var(--openbot-space-6);
}
.billing-license {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-3);
}
@container (max-width: 560px) {
  .billing-license .ui-alert {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }
  .billing-license .ui-alert-actions {
    grid-column: 2;
    justify-content: flex-start;
  }
}
.billing-license-icon {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-secondary);
}
.billing-license-icon svg {
  width: 18px;
  height: 18px;
}
.billing-license-row .ui-item-actions {
  gap: var(--openbot-space-2);
}
.billing-license-buy {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3) var(--openbot-space-4);
}
.billing-license-buy-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
}
.billing-license-buy-users, .billing-license-buy-total {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
}
.billing-license-buy-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.billing-license-stepper {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
  margin: 0;
  border: 0;
  padding: 0;
}
.billing-license-stepper-value {
  min-width: 3ch;
  font-weight: var(--openbot-weight-semibold);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.billing-license-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-2);
}
.billing-license-link.ui-button {
  height: auto;
  padding: 0;
}
.billing-license-divider {
  width: 100%;
  margin: var(--openbot-space-2) 0;
  border: 0;
  border-top: 1px solid var(--openbot-border);
}
.billing-license-change {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-3);
}
.billing-license-quote {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
  border-top: 1px solid var(--openbot-border);
  padding-top: var(--openbot-space-3);
}
.billing-license-lines {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.billing-license-lines div {
  display: flex;
  justify-content: space-between;
  gap: var(--openbot-space-3);
}
.billing-license-lines dd {
  margin: 0;
  color: var(--openbot-text-primary);
  font-variant-numeric: tabular-nums;
}
.billing-license-total {
  display: flex;
  align-items: baseline;
  gap: var(--openbot-space-2);
  margin: 0;
}
.billing-license-total-amount {
  font-size: var(--openbot-text-2xl);
  font-weight: var(--openbot-weight-bold);
  font-variant-numeric: tabular-nums;
}
.billing-license-users {
  max-height: 320px;
  overflow-y: auto;
}
.reference-chip, .composer-mention-token {
  display: inline-flex;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  height: var(--openbot-space-6);
  align-items: center;
  justify-content: flex-start;
  gap: var(--openbot-space-1);
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-border);
  padding: var(--openbot-space-1) var(--openbot-space-1-5) var(--openbot-space-1) var(--openbot-space-1);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: 500;
  line-height: var(--openbot-space-4);
  vertical-align: middle;
  white-space: nowrap;
  text-decoration: none;
}
.reference-chip[data-kind="mcp"], .reference-chip[data-kind="plugin"], .reference-chip[data-kind="skill"] {
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
}
.reference-chip[data-kind="quote"] {
  max-width: min(240px, 100%);
  font-weight: 450;
}
.reference-chip[data-kind="agent"]:hover, button.reference-chip[data-kind="quote"]:hover {
  background: var(--openbot-border-strong);
  color: var(--openbot-text-primary);
}
.reference-chip .reference-chip-icon {
  display: inline-grid;
  width: var(--openbot-space-4);
  height: var(--openbot-space-4);
  flex: 0 0 var(--openbot-space-4);
  place-items: center;
  overflow: hidden;
  border-radius: var(--openbot-radius-xs);
  color: inherit;
}
.reference-chip-icon > img, .reference-chip-icon > svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
:is(.message-reference-chip, .composer-mention-token) .reference-chip-icon > svg.lucide {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  stroke-width: var(--openbot-icon-stroke);
}
.reference-chip-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
:root {
  --stagger-dur: 500ms;
  --stagger-distance: 12px;
  --stagger-stagger: 40ms;
  --stagger-blur: 3px;
  --stagger-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
.t-stagger-line {
  display: block;
  opacity: 0;
  transform: translateY(var(--stagger-distance));
  filter: blur(var(--stagger-blur));
  transition: opacity var(--stagger-dur) var(--stagger-ease), transform var(--stagger-dur) var(--stagger-ease), filter var(--stagger-dur) var(--stagger-ease);
  will-change: transform, opacity, filter;
}
.t-stagger-line--2 {
  transition-delay: var(--stagger-stagger);
}
.t-stagger-line--3 {
  transition-delay: calc(var(--stagger-stagger) * 2);
}
.t-stagger.is-shown .t-stagger-line {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
@media (prefers-reduced-motion: reduce) {
  .t-stagger-line {
    transition: none !important;
  }
}
.skill-preview {
  display: grid;
  gap: var(--openbot-space-6);
  min-width: 0;
}
.skill-preview-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: var(--openbot-space-3);
  row-gap: var(--openbot-space-3);
  align-items: center;
}
.skill-preview-heading .agent-skill-icon {
  grid-column: 1;
  align-self: center;
}
.skill-preview-name {
  grid-column: 2;
  min-width: 0;
}
.skill-preview-action {
  grid-column: 3;
  justify-self: end;
}
.skill-preview-summary {
  grid-column: 1 / -1;
}
.skill-preview-heading h2, .skill-preview-heading p, .skill-preview-request p {
  margin: 0;
}
.skill-preview-heading h2 {
  font-size: var(--openbot-text-2xl);
  font-weight: var(--openbot-weight-medium);
  overflow-wrap: anywhere;
}
.skill-preview-heading p, .skill-preview-description {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-lg);
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.skill-preview-heading .skill-preview-creator {
  margin-top: var(--openbot-space-1);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-md);
}
.skill-preview-card {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 160px;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--openbot-radius-xl);
  padding: var(--openbot-space-6);
}
.skill-preview-gradient, .skill-preview-gradient canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
  clip-path: inset(0 round var(--openbot-radius-xl));
}
.skill-preview-card > :not(.skill-preview-gradient) {
  position: relative;
}
.skill-preview-request {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  width: min(100%, 520px);
  min-width: 0;
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-canvas);
  padding: var(--openbot-space-3);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-lg);
  line-height: 1.5;
}
.skill-preview-request p {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.skill-preview-request .reference-chip {
  max-width: 100%;
}
.skill-preview-request button {
  flex-shrink: 0;
}
.skill-preview-unavailable {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
}
.skill-preview-description > :first-child {
  margin-top: 0;
}
.skill-preview-description > :last-child {
  margin-bottom: 0;
}
.skill-preview-request .ui-icon-button {
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-border);
}
.agent-skills-modal:has(.agent-skill-detail) {
  width: min(760px, calc(100vw - 32px));
  height: min(640px, calc(100dvh - 48px));
}
:root {
  --page-slide-dur: 250ms;
  --page-fade-dur: 250ms;
  --page-slide-distance: 8px;
  --page-blur: 3px;
  --page-stagger: 0ms;
  --page-exit-enabled: 1;
  --page-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --page-fade-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
.t-page-slide {
  position: relative;
}
.t-page-slide .t-page[data-page-id="1"] {
  --t-page-from-x: calc(var(--page-slide-distance) * -1);
}
.t-page-slide .t-page[data-page-id="2"] {
  --t-page-from-x: var(--page-slide-distance);
}
.t-page-slide .t-page {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateX(calc(var(--t-page-from-x, 0px) * var(--page-exit-enabled)));
  filter: blur(calc(var(--page-blur) * var(--page-exit-enabled)));
  transition: opacity var(--page-fade-dur) var(--page-fade-ease), transform var(--page-slide-dur) var(--page-slide-ease), filter var(--page-slide-dur) var(--page-slide-ease);
  will-change: opacity, transform, filter;
}
.t-page-slide[data-page="1"] .t-page[data-page-id="1"], .t-page-slide[data-page="2"] .t-page[data-page-id="2"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
  filter: blur(0);
  transition-delay: var(--page-stagger);
}
@media (prefers-reduced-motion: reduce) {
  .t-page-slide .t-page {
    transition: none !important;
  }
}
.agent-skills-pages {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
@starting-style {
  .agent-skills-pages.t-page-slide .t-page {
    opacity: 0;
    transform: translateX(var(--t-page-from-x));
    filter: blur(var(--page-blur));
  }
}
:root {
  --resize-dur: 300ms;
  --resize-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
.t-resize {
  transition: width var(--resize-dur) var(--resize-ease), height var(--resize-dur) var(--resize-ease);
  will-change: width, height;
}
@media (prefers-reduced-motion: reduce) {
  .t-resize {
    transition: none !important;
  }
}
.skill-preview-heading.t-stagger-line, .skill-preview-card.t-stagger-line {
  display: grid;
}
@starting-style {
  .skill-preview.t-stagger.is-shown .t-stagger-line {
    opacity: 0;
    transform: translateY(var(--stagger-distance));
    filter: blur(var(--stagger-blur));
  }
}
.skill-preview-request .skill-preview-chip {
  color: var(--skill-logo-color, var(--openbot-accent-text));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--skill-logo-color, var(--openbot-accent-text)), var(--openbot-text-primary) 35%);
  }
  background: var(--skill-logo-color, var(--openbot-accent-text));
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--skill-logo-color, var(--openbot-accent-text)) 18%, transparent);
  }
}
.agent-skills-tabs {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.agent-skills-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--openbot-space-2);
  flex-shrink: 0;
  margin: var(--openbot-space-3);
}
.agent-skills-tab-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.agent-local-skill-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-2);
}
.agent-skills-tab-slot {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
@starting-style {
  .agent-skills-tab-content[data-selected] {
    opacity: 0;
    transform: translateY(var(--sliding-tabs-content-distance));
    filter: blur(var(--sliding-tabs-content-blur));
  }
}
.agent-local-library:not(.agent-skill-detail) {
  gap: var(--openbot-space-0-5);
  padding: 0;
}
.agent-local-skill-row:has(.agent-skill-update) {
  grid-template-columns: minmax(0, 1fr) auto auto;
}
:root {
  color-scheme: dark;
  --background: var(--openbot-bg-canvas);
  --surface: var(--openbot-bg-surface);
  --border: var(--openbot-border);
  --text-primary: var(--openbot-text-primary);
  --text-secondary: var(--openbot-text-secondary);
  --text-muted: var(--openbot-text-muted);
  --accent: var(--openbot-accent);
  --danger: var(--openbot-danger);
  --digit-dur: 500ms;
  --digit-distance: 8px;
  --digit-stagger: 70ms;
  --digit-blur: 2px;
  --digit-ease: cubic-bezier(0.34, 1.45, 0.64, 1);
  --digit-dir-x: 0;
  --digit-dir-y: 1;
  --stream-gap: 40ms;
  --stream-fade: 300ms;
  --stream-catch-up: 400ms;
  --stream-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --text-swap-dur: 150ms;
  --text-swap-translate-y: 4px;
  --text-swap-blur: 2px;
  --text-swap-ease: ease-in-out;
  --modal-open-dur: 250ms;
  --modal-close-dur: 150ms;
  --modal-scale: 0.96;
  --modal-scale-close: 0.96;
  --modal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --page-slide-dur: 250ms;
  --page-fade-dur: 250ms;
  --page-slide-distance: 8px;
  --page-blur: 3px;
  --page-stagger: 0ms;
  --page-exit-enabled: 1;
  --page-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --page-fade-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --panel-open-dur: 400ms;
  --panel-close-dur: 350ms;
  --panel-translate-x: 0px;
  --panel-translate-y: 100px;
  --panel-blur: 2px;
  --panel-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --resize-dur: 300ms;
  --resize-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shake-distance: 6px;
  --shake-overshoot: 4px;
  --shake-dur-a: 80ms;
  --shake-dur-b: 60ms;
  --shake-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --revert-hold: 3000ms;
  --revert-dur: 280ms;
  --acc-expand: 250ms;
  --acc-collapse: 250ms;
  --acc-ease: cubic-bezier(0.22, 1, 0.36, 1);
  font-family: var(--openbot-font-sans);
  font-synthesis: none;
  text-rendering: geometricPrecision;
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-ease: initial;
      --hosted-upsell-beam-angle: 0deg;
    }
  }
}


/* /@fs//app/packages/brand/src/logo.css */
.app-logo {
  --app-logo-background: var(--openbot-logo-production);
  --app-logo-eye: var(--openbot-logo-production-eye);
  position: relative;
  display: inline-block;
  overflow: hidden;
  border-radius: var(--openbot-radius-logo);
  isolation: isolate;
}

.app-logo[data-interactive="true"]:focus {
  outline: none;
}

.app-logo[data-interactive="true"]:focus-visible {
  box-shadow: inset 0 0 0 2px var(--openbot-text-primary);
}

.app-logo[data-variant="dev"] {
  --app-logo-background: var(--openbot-logo-dev);
  --app-logo-eye: var(--openbot-logo-eye);
}

.app-logo[data-variant="preview"] {
  --app-logo-background: var(--openbot-logo-preview);
  --app-logo-eye: var(--openbot-logo-eye);
}

.app-logo-background {
  fill: var(--app-logo-background);
}

.app-logo-eye {
  fill: none;
  stroke: var(--app-logo-eye);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 9.5px;
  pointer-events: none;
  transform-box: view-box;
}

.app-logo-eye-motion {
  pointer-events: none;
  /* `--app-logo-eye-squint` half closes both eyes for a moment. The blink animates the eyes inside. */
  transform: translate(var(--app-logo-eye-x, 0%), var(--app-logo-eye-y, 0%)) scaleY(var(--app-logo-eye-squint, 1));
  transform-origin: center;
  transition: transform var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1);
}

.app-logo-eye-left {
  transform-origin: 28.7% 48.7%;
}

.app-logo-eye-right {
  transform-origin: 71.2% 48.8%;
}

.app-logo[data-animation="blink"] .app-logo-eye {
  animation: app-logo-blink 4.8s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

.app-logo[data-animation="look-around"] .app-logo-eye {
  animation: app-logo-look-around 6s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

.app-logo[data-animation="surprised"] .app-logo-eye {
  animation: app-logo-surprised 5.4s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

.app-logo[data-click-reaction="wink"] .app-logo-eye-left {
  animation: app-logo-wink-left 360ms cubic-bezier(0.23, 1, 0.32, 1) both;
}

.app-logo[data-click-reaction="wink"] .app-logo-eye-right {
  animation: app-logo-wink-right 360ms cubic-bezier(0.23, 1, 0.32, 1) both;
}

.app-logo[data-easter-egg="party"] .app-logo-background {
  animation: app-logo-party-colors 1.2s cubic-bezier(0.77, 0, 0.175, 1) both;
}

.app-logo[data-easter-egg="party"] .app-logo-eye-left {
  animation: app-logo-party-left 1.2s cubic-bezier(0.77, 0, 0.175, 1) both;
}

.app-logo[data-easter-egg="party"] .app-logo-eye-right {
  animation: app-logo-party-right 1.2s cubic-bezier(0.77, 0, 0.175, 1) both;
}

@keyframes app-logo-blink {
  0%,
  44%,
  48%,
  100% {
    transform: scaleY(1);
  }

  46% {
    transform: scaleY(0.08);
  }
}

@keyframes app-logo-look-around {
  0%,
  30%,
  47%,
  64%,
  100% {
    transform: translateX(0);
  }

  35%,
  42% {
    transform: translateX(-3.5%);
  }

  52%,
  59% {
    transform: translateX(3.5%);
  }
}

@keyframes app-logo-surprised {
  0%,
  40%,
  56%,
  100% {
    transform: translateY(0) scale(1);
  }

  44%,
  51% {
    transform: translateY(-1.5%) scaleX(0.94) scaleY(1.12);
  }
}

@keyframes app-logo-wink-left {
  0%,
  100% {
    transform: scaleY(1);
  }

  38%,
  58% {
    transform: scaleY(0.08);
  }
}

@keyframes app-logo-wink-right {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  48% {
    transform: translateY(-1%) scaleX(0.96) scaleY(1.08);
  }
}

@keyframes app-logo-party-colors {
  0%,
  100% {
    fill: var(--app-logo-background);
  }

  22% {
    fill: var(--openbot-logo-dev);
  }

  48% {
    fill: var(--openbot-logo-preview);
  }

  74% {
    fill: var(--openbot-logo-production);
  }
}

@keyframes app-logo-party-left {
  0%,
  100% {
    transform: translate(0) rotate(0);
  }

  25% {
    transform: translateY(-6%) rotate(-8deg);
  }

  50% {
    transform: translate(4%, 2%) rotate(8deg);
  }

  75% {
    transform: translate(-4%, -2%) rotate(-4deg);
  }
}

@keyframes app-logo-party-right {
  0%,
  100% {
    transform: translate(0) rotate(0);
  }

  25% {
    transform: translateY(6%) rotate(8deg);
  }

  50% {
    transform: translate(-4%, -2%) rotate(-8deg);
  }

  75% {
    transform: translate(4%, 2%) rotate(4deg);
  }
}

@media (hover: hover) and (pointer: fine) {
  .app-logo[data-interactive="true"] {
    cursor: pointer;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-logo[data-animation] .app-logo-eye,
  .app-logo[data-click-reaction] .app-logo-eye,
  .app-logo[data-easter-egg] .app-logo-eye,
  .app-logo[data-easter-egg] .app-logo-background {
    animation: none;
    transform: none;
  }

  .app-logo-eye-motion {
    transition: none;
    transform: none;
  }
}


/* /@fs//app/packages/ui/src/styles/primitives.css */
:where(.ui-text, .ui-heading) {
  margin: 0;
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
}

.ui-server-gradient-logo {
  width: var(--server-gradient-logo-size, 40px);
  height: var(--server-gradient-logo-size, 40px);
  display: block;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: var(--server-gradient-logo-radius, var(--openbot-radius-lg));
  background-color: var(--server-gradient-base);
  background-image: var(--server-gradient-layers);
  background-repeat: no-repeat;
  outline: 1px solid var(--openbot-image-outline);
  outline-offset: -1px;
}

:where(.ui-text)[data-tone="secondary"],
:where(.ui-heading)[data-tone="secondary"] {
  color: var(--openbot-text-secondary);
}

:where(.ui-text)[data-tone="muted"],
:where(.ui-heading)[data-tone="muted"] {
  color: var(--openbot-text-muted);
}

:where(.ui-text, .ui-heading)[data-tone="danger"] {
  color: var(--openbot-danger);
}

:where(.ui-text, .ui-heading)[data-tone="success"] {
  color: var(--openbot-success);
}

:where(.ui-text, .ui-heading)[data-tone="warning"] {
  color: var(--openbot-warning);
}

:where(.ui-text)[data-variant="caption"] {
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-sm);
}

:where(.ui-text)[data-variant="label-sm"] {
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
}

:where(.ui-text)[data-variant="label"] {
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
}

:where(.ui-text)[data-variant="body-sm"] {
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-md);
}

:where(.ui-text)[data-variant="body"] {
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-lg);
}

:where(.ui-heading)[data-size="sm"] {
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}

:where(.ui-heading)[data-size="md"] {
  font-size: var(--openbot-text-xl);
  line-height: var(--openbot-leading-xl);
}

:where(.ui-heading)[data-size="lg"] {
  font-size: var(--openbot-text-2xl);
  line-height: var(--openbot-leading-2xl);
}

:where(.ui-heading) {
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: var(--openbot-tracking-tight);
}

.ui-text-truncate {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:where(.ui-button) {
  min-width: 0;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-1-5);
  border: 1px solid transparent;
  border-radius: var(--openbot-radius-md);
  padding: 0 var(--openbot-space-4);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: 1;
  text-decoration: none;
  user-select: none;
  white-space: nowrap;
  transition:
    background-color var(--openbot-duration-hover) ease,
    border-color var(--openbot-duration-hover) ease,
    color var(--openbot-duration-hover) ease,
    box-shadow var(--openbot-duration-hover) ease,
    opacity var(--openbot-duration-hover) ease;
}

.ui-button {
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-medium);
}

:where(.ui-button-size-xs) {
  height: var(--openbot-control-xs);
  padding-inline: var(--openbot-space-2);
  font-size: var(--openbot-text-sm);
}

:where(.ui-button-size-sm) {
  height: var(--openbot-control-md);
  padding-inline: var(--openbot-space-3);
  font-size: var(--openbot-text-sm);
}

:where(.ui-button-size-default) {
  height: var(--openbot-control-lg);
}

:where(.ui-button-size-lg) {
  height: var(--openbot-control-xl);
  padding-inline: var(--openbot-space-6);
}

:where(.ui-button-variant-default) {
  background: var(--openbot-surface-light);
  color: var(--openbot-text-on-light);
}

:where(.ui-button-variant-outline) {
  border-color: var(--openbot-border);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-secondary);
}

:where(.ui-button-variant-secondary) {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}

:where(.ui-button-variant-ghost) {
  background: transparent;
  color: var(--openbot-text-muted);
}

:where(.ui-button-variant-destructive) {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
}

:where(.ui-button-variant-destructive-ghost) {
  background: transparent;
  color: var(--openbot-text-muted);
}

:where(.ui-button-variant-link) {
  height: auto;
  border-radius: var(--openbot-radius-xs);
  background: transparent;
  padding: 0;
  color: var(--openbot-text-primary);
  text-underline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) and (min-width: 601px) {
  :where(.ui-button-variant-default):hover:not(:disabled):not([data-disabled]) {
    background: color-mix(in srgb, var(--openbot-surface-light) 82%, transparent);
  }

  :where(.ui-button-variant-outline):hover:not(:disabled):not([data-disabled]),
  :where(.ui-button-variant-ghost):hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-bg-control-hover);
    color: var(--openbot-text-primary);
  }

  :where(.ui-button-variant-secondary):hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-bg-control-active);
  }

  :where(.ui-button-variant-destructive):hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-danger-soft-hover);
    color: var(--openbot-danger);
  }

  :where(.ui-button-variant-destructive-ghost):hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-danger-soft);
    color: var(--openbot-danger);
  }

  :where(.ui-button-variant-link):hover:not(:disabled):not([data-disabled]) {
    text-decoration: underline;
  }
}

:where(.ui-button-variant-outline, .ui-button-variant-secondary, .ui-button-variant-ghost)[aria-expanded="true"] {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}

:where(.ui-button):focus-visible {
  outline: 0;
  box-shadow: var(--openbot-focus-ring);
}

:where(.ui-button-variant-destructive):focus-visible {
  border-color: var(--openbot-danger-focus);
}

:where(.ui-button-variant-destructive, .ui-button-variant-destructive-ghost):focus-visible {
  box-shadow: 0 0 0 3px var(--openbot-danger-focus);
}

:where(.ui-button)[aria-invalid="true"] {
  border-color: var(--openbot-danger-border);
  box-shadow: 0 0 0 3px var(--openbot-danger-focus);
}

:where(.ui-button):disabled,
:where(.ui-button)[data-disabled] {
  cursor: default;
  opacity: 0.42;
  pointer-events: none;
}

.ui-button-full {
  width: 100%;
}

:where(.ui-icon-button) {
  padding: 0;
}

:where(.ui-button-size-icon-xs) {
  width: var(--openbot-control-xs);
  height: var(--openbot-control-xs);
  padding: 0;
}

:where(.ui-button-size-icon-sm) {
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  padding: 0;
}

:where(.ui-button-size-icon) {
  width: var(--openbot-control-lg);
  height: var(--openbot-control-lg);
  padding: 0;
}

:where(.ui-button-size-icon-lg) {
  width: var(--openbot-control-xl);
  height: var(--openbot-control-xl);
  padding: 0;
}

:where(.ui-icon-button) svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}

:where(.ui-button-size-icon-xs) svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

.ui-removable-image {
  position: relative;
}

.ui-image-remove-button {
  position: absolute;
  z-index: 1;
  top: -8px;
  right: -8px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
  background: color-mix(in srgb, var(--openbot-bg-surface-raised) 72%, transparent);
  backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  opacity: 0;
  scale: 0.9;
  transition:
    opacity var(--openbot-duration-hover) ease,
    scale var(--openbot-duration-hover) ease,
    background-color var(--openbot-duration-hover) ease;
}

.ui-removable-image:hover > .ui-image-remove-button,
.ui-removable-image:focus-within > .ui-image-remove-button {
  opacity: 1;
  scale: 1;
}

@media (hover: none) {
  .ui-image-remove-button {
    opacity: 1;
    scale: 1;
  }
}

:where(.z-badge) {
  width: fit-content;
  height: 22px;
  min-width: 0;
  display: inline-flex;
  overflow: hidden;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-1);
  border: 1px solid transparent;
  border-radius: var(--openbot-radius-pill);
  padding: var(--openbot-space-0-5) var(--openbot-space-2);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
  transition:
    border-color var(--openbot-duration-fast) var(--openbot-ease-out),
    background-color var(--openbot-duration-fast) var(--openbot-ease-out),
    color var(--openbot-duration-fast) var(--openbot-ease-out);
  white-space: nowrap;
}

:where(.z-badge) > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

:where(.z-badge) > svg {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  pointer-events: none;
}

:where(.z-badge):has(> [data-icon="inline-start"]) {
  padding-left: var(--openbot-space-1-5);
}

:where(.z-badge):has(> [data-icon="inline-end"]) {
  padding-right: var(--openbot-space-1-5);
}

:where(.z-badge-variant-default) {
  background: var(--openbot-accent);
  color: var(--openbot-text-primary);
}

:where(.z-badge-variant-secondary) {
  background: var(--openbot-bg-control);
  color: var(--openbot-text-secondary);
}

:where(.z-badge-variant-outline) {
  border-color: var(--openbot-border-strong);
  background: transparent;
  color: var(--openbot-text-secondary);
}

:where(.z-badge-variant-ghost) {
  background: transparent;
  color: var(--openbot-text-secondary);
}

:where(.z-badge-variant-link) {
  background: transparent;
  color: var(--openbot-accent-text);
  text-decoration: underline;
  text-underline-offset: 4px;
}

:where(.z-badge-variant-primary-light) {
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
}

:where(.z-badge-variant-success-light) {
  background: var(--openbot-success-soft);
  color: var(--openbot-success);
}

:where(.z-badge-variant-warning-light) {
  background: var(--openbot-warning-soft);
  color: var(--openbot-warning);
}

:where(.z-badge-variant-destructive),
:where(.z-badge-variant-destructive-light) {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
}

/* The design's "New" chip. Not a --openbot-success or --openbot-accent variant: an
 * announcement that something is newly available is neither a report that something
 * succeeded nor an action the user can take. The heavier weight and the open tracking
 * are part of the look, which is why this variant sets them and the others do not. */
:where(.z-badge-variant-new) {
  background: var(--openbot-badge-new-soft);
  color: var(--openbot-badge-new);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: 0.01em;
}

:where(.z-badge-variant-info-light) {
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
}

:where(.z-badge-variant-primary-outline) {
  border-color: var(--openbot-border-strong);
  background: transparent;
  color: var(--openbot-accent-text);
}

:where(.z-badge-variant-success-outline) {
  border-color: var(--openbot-border-strong);
  background: transparent;
  color: var(--openbot-success);
}

:where(.z-badge-variant-warning-outline) {
  border-color: var(--openbot-border-strong);
  background: transparent;
  color: var(--openbot-warning);
}

:where(.z-badge-variant-destructive-outline) {
  border-color: var(--openbot-border-strong);
  background: transparent;
  color: var(--openbot-danger);
}

:where(.z-badge-variant-info-outline) {
  border-color: var(--openbot-border-strong);
  background: transparent;
  color: var(--openbot-accent-text);
}

/* The hand-drawn SVGs, which are on a 20-unit viewBox where lucide's is 24. Feeding them
 * --openbot-icon-stroke raw would paint them 20% heavier than every lucide icon beside
 * them, so it is scaled to the smaller grid instead. These carried 1.35 to 1.6 by hand
 * before, i.e. 1.08 to 1.43 device px against lucide's 1.0. */
:where(.ui-glyph-20) {
  stroke-width: calc(var(--openbot-icon-stroke) * 20 / 24);
}

:where(.ui-glyph-16) {
  stroke-width: calc(var(--openbot-icon-stroke) * 16 / 24);
}

:where(.ui-checkbox) {
  position: relative;
  display: inline-flex;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
}

.ui-checkbox-input {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
}

.ui-checkbox-visual {
  display: inline-flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-bg-control);
  color: transparent;
}

.ui-checkbox-input:checked + .ui-checkbox-visual {
  border-color: var(--openbot-accent);
  background: var(--openbot-accent);
  color: var(--openbot-text-primary);
}

.ui-checkbox-input:focus-visible + .ui-checkbox-visual {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}

.ui-checkbox-visual svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  /* Heavier than --openbot-icon-stroke deliberately: a tick is a state indicator, and the
   * shared weight paints 0.75 device px inside this 12px box. */
  stroke-width: 2.5;
}

:where(.ui-input, .ui-textarea, .ui-native-select) {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  outline: 0;
  background: var(--openbot-bg-control);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  transition:
    background-color var(--openbot-duration-hover) ease,
    border-color var(--openbot-duration-hover) ease,
    box-shadow var(--openbot-duration-hover) ease;
}

:where(.ui-input, .ui-native-select)[data-size="sm"] {
  height: var(--openbot-control-sm);
  padding-inline: var(--openbot-space-2);
}

:where(.ui-input, .ui-native-select)[data-size="md"] {
  height: var(--openbot-control-md);
  padding-inline: var(--openbot-space-3);
}

:where(.ui-input, .ui-native-select)[data-size="lg"] {
  height: var(--openbot-control-lg);
  padding-inline: var(--openbot-space-3);
}

:where(.ui-textarea) {
  min-height: 76px;
  resize: vertical;
  padding: var(--openbot-space-2) var(--openbot-space-3);
}

:where(.ui-textarea)::-webkit-resizer {
  background-color: var(--openbot-bg-control);
  background-image: linear-gradient(
    135deg,
    transparent 46%,
    var(--openbot-text-muted) 46% 50%,
    transparent 50% 62%,
    var(--openbot-text-muted) 62% 66%,
    transparent 66%
  );
  background-repeat: no-repeat;
  background-position: 100% 100%;
  background-size: 50% 50%;
}

:where(.ui-input, .ui-textarea)::placeholder {
  color: var(--openbot-text-placeholder);
}

:where(.ui-input, .ui-textarea, .ui-native-select):focus-visible {
  border-color: var(--openbot-border-focus);
  box-shadow: var(--openbot-focus-ring);
}

:where(.ui-input, .ui-textarea, .ui-native-select)[aria-invalid="true"] {
  border-color: var(--openbot-danger);
}

:where(.ui-input, .ui-textarea, .ui-native-select):disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.ui-select {
  width: 100%;
  min-width: 0;
}

.ui-select-trigger {
  width: 100%;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-1-5);
  cursor: pointer;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  outline: 0;
  background: transparent;
  padding: var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-2) 10px;
  box-shadow: 0 1px 2px var(--openbot-shadow-popover-ambient);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  text-align: left;
  transition:
    background-color var(--openbot-duration-hover) ease,
    border-color var(--openbot-duration-hover) ease,
    box-shadow var(--openbot-duration-hover) ease;
}

.ui-select-trigger[data-size="sm"] {
  height: var(--openbot-control-md);
  font-size: var(--openbot-text-sm);
}

.ui-select-trigger[data-size="md"] {
  height: var(--openbot-control-lg);
}

.ui-select-trigger[data-expanded] {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-hover);
}

.ui-select .ui-select-trigger:focus-visible {
  border-color: var(--openbot-border-strong);
  outline: 0;
  box-shadow: 0 0 0 3px var(--openbot-hover);
}

.ui-select-trigger[data-disabled] {
  cursor: not-allowed;
  opacity: 0.42;
}

.ui-select-trigger[aria-invalid="true"] {
  border-color: var(--openbot-danger);
  box-shadow: 0 0 0 3px var(--openbot-danger-soft);
}

@media (hover: hover) and (pointer: fine) {
  .ui-select-trigger:hover:not([data-disabled]) {
    background: var(--openbot-hover);
  }
}

.ui-select-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-select-trigger-icon {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: var(--openbot-text-muted);
}

.ui-select-trigger-icon svg {
  width: 100%;
  height: 100%;
}

.ui-select-content {
  z-index: var(--openbot-layer-popover);
  max-height: 320px;
  min-width: 144px;
  overflow: hidden auto;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface-raised);
  box-shadow:
    0 4px 6px -1px var(--openbot-shadow-popover-ambient),
    0 2px 4px -2px var(--openbot-shadow-popover-ambient),
    0 0 0 1px var(--openbot-border-strong);
  color: var(--openbot-text-primary);
  transform-origin: var(--kb-select-content-transform-origin);
  animation: ui-select-content-in var(--openbot-duration-dialog) var(--openbot-ease-out) both;
}

.ui-select-listbox {
  margin: 0;
  padding: var(--openbot-space-1);
  outline: 0;
}

.ui-select-item {
  position: relative;
  display: flex;
  align-items: center;
  cursor: default;
  user-select: none;
  border-radius: var(--openbot-radius-sm);
  outline: 0;
  padding: var(--openbot-space-1-5) var(--openbot-space-8) var(--openbot-space-1-5) var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  transition:
    background-color var(--openbot-duration-hover) ease,
    color var(--openbot-duration-hover) ease;
}

.ui-select-item[data-highlighted] {
  background: var(--openbot-hover);
  color: var(--openbot-text-primary);
}

.ui-select-item[data-selected] {
  background: transparent;
  color: var(--openbot-text-primary);
}

.ui-select-item[data-selected][data-highlighted] {
  background: var(--openbot-hover);
}

.ui-select-item[data-disabled] {
  pointer-events: none;
  opacity: 0.42;
}

.ui-select-item-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-select-item-indicator {
  position: absolute;
  right: var(--openbot-space-2);
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
}

.ui-select-item-indicator svg {
  width: 100%;
  height: 100%;
}

@keyframes ui-select-content-in {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui-select-content {
    animation-name: ui-select-content-fade-in;
  }
}

@keyframes ui-select-content-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.ui-field {
  display: grid;
  gap: var(--openbot-space-1-5);
}

.ui-label {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
}

.ui-field-required,
.ui-field-error {
  color: var(--openbot-danger);
}

.ui-field-required {
  margin-left: var(--openbot-space-0-5);
}

.ui-field-description,
.ui-field-error {
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.ui-field-description {
  color: var(--openbot-text-muted);
}

.ui-switch {
  --ui-switch-thumb-size: var(--openbot-switch-thumb);
  --ui-switch-inset: var(--openbot-switch-inset);
  --ui-switch-travel: calc(var(--openbot-switch-width) - var(--ui-switch-thumb-size) - (var(--ui-switch-inset) * 2));
  position: relative;
  z-index: 0;
  width: var(--openbot-switch-width);
  height: var(--openbot-switch-height);
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  outline: none;
  background: var(--openbot-bg-control);
  box-shadow:
    inset 0 0 0 1px var(--openbot-border-strong),
    0 1px 2px var(--openbot-shadow-ring);
  transition:
    background-color var(--openbot-duration-hover) ease,
    box-shadow var(--openbot-duration-hover) ease,
    opacity var(--openbot-duration-hover) ease;
}

.ui-switch[data-size="sm"] {
  --ui-switch-thumb-size: var(--openbot-switch-sm-thumb);
  --ui-switch-inset: var(--openbot-switch-sm-inset);
  --ui-switch-travel: calc(var(--openbot-switch-sm-width) - var(--ui-switch-thumb-size) - (var(--ui-switch-inset) * 2));
  width: var(--openbot-switch-sm-width);
  height: var(--openbot-switch-sm-height);
}

.ui-switch[data-checked] {
  background: var(--openbot-surface-light);
}

.ui-switch[data-invalid] {
  box-shadow: 0 0 0 3px var(--openbot-danger-focus);
}

.ui-switch:not([data-pointer-focus]):has(.ui-switch-input:focus-visible) {
  box-shadow: var(--openbot-focus-ring);
}

.ui-switch[data-invalid]:not([data-pointer-focus]):has(.ui-switch-input:focus-visible) {
  box-shadow: 0 0 0 3px var(--openbot-danger-focus);
}

.ui-switch-field {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
}

.ui-switch-copy {
  min-width: 0;
  display: grid;
  gap: var(--openbot-space-0-5);
}

.ui-switch-label {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
  cursor: pointer;
}

.ui-switch-description {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.ui-switch-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.ui-switch-control {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: inherit;
  cursor: pointer;
}

.ui-switch-control[data-dragging] {
  cursor: grabbing;
}

.ui-switch-thumb {
  position: absolute;
  top: 50%;
  left: 0;
  width: var(--ui-switch-thumb-size);
  height: var(--ui-switch-thumb-size);
  display: block;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-primary);
  box-shadow: 0 1px 2px var(--openbot-shadow-ring);
  transform: translate3d(
      calc(var(--ui-switch-inset) + (var(--ui-switch-position, 0) * var(--ui-switch-travel))),
      -50%,
      0
    )
    scale(var(--ui-switch-scale-x, 1), var(--ui-switch-scale-y, 1));
  transform-origin: center;
  will-change: transform;
  transition: background-color var(--openbot-duration-fast) var(--openbot-ease-out);
}

.ui-switch-thumb[data-checked] {
  background: var(--openbot-text-on-light);
}

.ui-slider-field {
  width: 100%;
  display: grid;
  gap: var(--openbot-space-1-5);
}

.ui-slider-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--openbot-space-3);
}

.ui-slider-label {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
}

.ui-slider-value {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  line-height: var(--openbot-leading-sm);
}

.ui-slider-description {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.ui-slider-track {
  position: relative;
  height: 4px;
  margin-block: var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-border-strong);
  cursor: pointer;
}

/* The drawn track is 4px high, too thin to hit. A press on this area belongs to the track, so it
   still sets the value from the pointer position and starts a drag. */
.ui-slider-track::before {
  content: "";
  position: absolute;
  inset: -10px 0;
}

/* Kobalte places the fill and the thumb with inline `left`/`right` percentages. */
.ui-slider-fill {
  position: absolute;
  height: 100%;
  border-radius: inherit;
  background: var(--openbot-text-secondary);
}

/* Kobalte owns the inline `transform` that centres the thumb on its value, so the vertical centring
   uses `top` instead. */
.ui-slider-thumb {
  top: calc(50% - (var(--openbot-switch-thumb) / 2));
  width: var(--openbot-switch-thumb);
  height: var(--openbot-switch-thumb);
  display: block;
  border-radius: var(--openbot-radius-pill);
  outline: none;
  background: var(--openbot-text-primary);
  box-shadow: 0 1px 2px var(--openbot-shadow-ring);
  cursor: grab;
}

.ui-slider-thumb:focus-visible {
  box-shadow: var(--openbot-focus-ring);
}

.ui-slider-thumb[data-dragging] {
  cursor: grabbing;
}

/* The seek slider draws its picture on the track; the playhead shows on hover, focus and drag. */
.ui-seek-slider {
  display: flex;
  touch-action: none;
}

.ui-seek-slider-track {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.ui-seek-slider-picture {
  display: flex;
}

.ui-seek-slider[data-disabled] .ui-seek-slider-track {
  cursor: default;
}

.ui-seek-slider-thumb {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  display: block;
  border-radius: var(--openbot-radius-pill);
  outline: none;
  background: var(--openbot-text-primary);
  opacity: 0;
}

.ui-seek-slider-track:hover .ui-seek-slider-thumb,
.ui-seek-slider-thumb:focus-visible,
.ui-seek-slider-thumb[data-dragging] {
  opacity: 1;
}

.ui-seek-slider-thumb:focus-visible {
  box-shadow: var(--openbot-focus-ring);
}

.ui-slider-field[data-disabled] {
  opacity: 0.5;
}

.ui-slider-field[data-disabled] .ui-slider-track,
.ui-slider-field[data-disabled] .ui-slider-thumb {
  cursor: not-allowed;
}

.ui-switch[data-disabled] {
  opacity: 0.5;
}

.ui-switch[data-disabled] .ui-switch-control {
  cursor: not-allowed;
}

.ui-card {
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-surface);
}

.ui-item-group {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-surface);
}

.ui-item-group[data-surface="subtle"] {
  background: var(--openbot-bg-control);
}

.ui-item-group > :not(:first-child) {
  border-top: 1px solid var(--openbot-border);
}

.ui-item {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  padding-inline: var(--openbot-space-4);
}

.ui-item[data-size="compact"] {
  min-height: 52px;
  padding-block: var(--openbot-space-2);
}

.ui-item[data-size="default"] {
  min-height: 64px;
  padding-block: var(--openbot-space-3);
}

.ui-item[data-size="spacious"] {
  min-height: 72px;
  padding-block: var(--openbot-space-4);
}

.ui-item-media,
.ui-item-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}

.ui-item-media {
  color: var(--openbot-text-muted);
}

.ui-item-content {
  min-width: 0;
  display: grid;
  flex: 1 1 auto;
  gap: var(--openbot-space-0-5);
}

.ui-item-title {
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-item-description {
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-item-actions {
  justify-content: flex-end;
  gap: var(--openbot-space-2);
}

.ui-item.ui-dynamic-island-identity {
  min-width: 0;
  width: 100%;
  min-height: 43px;
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: 0;
}

.dynamic-island-external .ui-dynamic-island-identity {
  grid-template-columns: 38px minmax(0, 1fr) auto;
}

.ui-dynamic-island-identity-avatar {
  width: 35px;
  height: 35px;
}

.dynamic-island-external .ui-dynamic-island-identity-avatar {
  width: 38px;
  height: 38px;
}

.ui-dynamic-island-identity-copy {
  gap: 2px;
}

.ui-dynamic-island-identity-title {
  display: flex;
  align-items: baseline;
  gap: var(--openbot-space-1);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-sm);
}

.ui-dynamic-island-identity-name {
  min-width: 0;
  max-width: 26ch;
  overflow: hidden;
  flex: 0 1 auto;
  color: var(--openbot-island-identity-name);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-dynamic-island-identity-status {
  flex: 0 0 auto;
  color: var(--openbot-text-secondary);
}

.ui-dynamic-island-identity-description {
  display: -webkit-box;
  overflow: hidden;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-sm);
  overflow-wrap: anywhere;
  text-wrap: pretty;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.ui-dynamic-island-identity-trailing {
  align-self: start;
  padding-top: 2px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  line-height: var(--openbot-leading-sm);
  white-space: nowrap;
}

.ui-questionnaire {
  min-width: 0;
  display: grid;
  gap: var(--openbot-space-3);
}

.ui-questionnaire-progress {
  color: var(--openbot-text-muted);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  line-height: var(--openbot-leading-sm);
}

.ui-questionnaire-item {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

.ui-questionnaire-title {
  width: 100%;
  padding: 0;
  color: var(--openbot-text-primary);
}

.ui-questionnaire-description {
  margin: 0;
  color: var(--openbot-text-muted);
}

.ui-questionnaire-choices {
  min-width: 0;
  display: grid;
}

.ui-questionnaire-choice {
  position: relative;
  min-width: 0;
  display: block;
  cursor: pointer;
  outline: 0;
}

.ui-questionnaire-choice[data-disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}

.ui-questionnaire-choice-input {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: inherit;
  opacity: 0;
}

.ui-questionnaire-choice:focus-within {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: -2px;
}

.ui-questionnaire-error {
  margin: 0;
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.ui-questionnaire-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}

.ui-settings-section {
  display: grid;
  gap: var(--openbot-space-2);
}

.ui-settings-section-header {
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  padding-inline: var(--openbot-space-1);
}

.ui-settings-section-copy {
  min-width: 0;
  display: grid;
  gap: var(--openbot-space-1);
}

.ui-settings-section-heading {
  font-weight: var(--openbot-weight-regular);
}

.ui-settings-section-description {
  display: block;
}

.ui-settings-section-actions {
  min-width: 0;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--openbot-space-2);
}

.ui-qr-code {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-qr-background);
}

.ui-qr-code > * {
  grid-area: 1 / 1;
}

.ui-qr-code > img {
  width: 100%;
  height: 100%;
  display: block;
}

/* The logos sit in a hole that the code leaves clear, so no module is cut at their edge. They show
   once the code is drawn around them. */
.ui-qr-code-mark {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  color: var(--openbot-text-on-light);
  visibility: hidden;
}

.ui-qr-code-mark[data-ready] {
  visibility: visible;
}

.ui-alert {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-3);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  padding: var(--openbot-space-3) var(--openbot-space-4);
  color: var(--openbot-text-muted);
}

.ui-alert[data-tone="success"] {
  border-color: var(--openbot-success-soft);
  background: var(--openbot-success-wash);
  color: var(--openbot-success);
}

.ui-alert[data-tone="warning"] {
  border-color: var(--openbot-warning-soft);
  background: var(--openbot-warning-soft);
  color: var(--openbot-warning);
}

.ui-alert[data-tone="danger"] {
  border-color: var(--openbot-danger-soft);
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
}

.ui-alert-icon {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}

.ui-alert-icon svg {
  width: 100%;
  height: 100%;
}

.ui-alert-content {
  min-width: 0;
  display: grid;
  gap: var(--openbot-space-0-5);
}

.ui-alert-title {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
}

.ui-alert-description {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

/* A toned alert puts a wash over whatever is behind it, which lifts the background towards the
   muted text colour and leaves this line under 4.5:1 on a panel. The tone carries the meaning;
   the description only has to be readable. */
.ui-alert[data-tone] .ui-alert-description {
  color: var(--openbot-text-secondary);
}

.ui-alert-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
}

.ui-progress {
  width: 100%;
}

.ui-progress-track {
  width: 100%;
  height: 3px;
  overflow: hidden;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-border-strong);
}

/* Kobalte reports the value as a custom property and leaves the width to us, so a fill without this
   line is a full bar at every value. */
.ui-progress-fill {
  width: var(--kb-progress-fill-width, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--openbot-text-secondary);
  transition: width var(--openbot-duration-normal) var(--openbot-ease-out);
}

/* An operation with no measurable end reports that it is still running, rather than sitting at a
   number. Kobalte publishes no width for one, so the fill is a short bar that travels the track. */
.ui-progress-fill[data-indeterminate] {
  width: 35%;
  animation: ui-progress-travel 1.4s var(--openbot-ease-in-out) infinite;
  transition: none;
}

@keyframes ui-progress-travel {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(286%);
  }
}

.ui-radial-progress {
  --ui-radial-progress-color: var(--openbot-accent);

  position: relative;
  display: grid;
  width: 104px;
  aspect-ratio: 1;
  place-items: center;
  color: var(--ui-radial-progress-color);
}

.ui-radial-progress[data-tone="warning"] {
  --ui-radial-progress-color: var(--openbot-warning);
}

.ui-radial-progress[data-tone="danger"] {
  --ui-radial-progress-color: var(--openbot-danger);
}

.ui-radial-progress-chart {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ui-radial-progress-track,
.ui-radial-progress-indicator {
  fill: none;
}

.ui-radial-progress-track {
  stroke: var(--openbot-border-strong);
}

.ui-radial-progress-indicator {
  stroke: currentcolor;
  stroke-linecap: butt;
  transition:
    stroke-dasharray var(--openbot-duration-normal) var(--openbot-ease-out),
    stroke-dashoffset var(--openbot-duration-normal) var(--openbot-ease-out);
}

.ui-radial-progress-indicator[data-linecap="round"] {
  stroke-linecap: round;
}

.ui-radial-progress-content {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  color: var(--openbot-text-primary);
}

.ui-toaster[data-sonner-toaster][data-sonner-theme="dark"] {
  z-index: var(--openbot-layer-toast);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
  --normal-bg: var(--openbot-bg-surface-raised);
  --normal-bg-hover: var(--openbot-bg-control-hover);
  --normal-border: var(--openbot-border);
  --normal-border-hover: var(--openbot-border-focus);
  --normal-text: var(--openbot-text-primary);
  --border-radius: var(--openbot-radius-lg);
}

/* Three columns and two rows: the mark, the words, and an action row under them. Sonner lays the
   toast out as one flex line, which works until an action is present — the button then sits between
   the description and the close control, and the description wraps early around it. Placing the
   action on its own row gives the words the full width and puts the button where a reader looks for
   it last. The columns are laid out by hand rather than by auto-placement because a toast without an
   icon renders no `[data-icon]` element at all. */
.ui-toaster [data-sonner-toast][data-styled="true"] {
  --ui-toast-tone: transparent;
  --ui-toast-motion-duration: var(--openbot-duration-toast-enter);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 0;
  row-gap: var(--openbot-space-2);
  min-height: var(--openbot-control-xl);
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border-color: transparent;
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface-raised);
  box-shadow:
    0 0 0 1px var(--openbot-border),
    var(--openbot-shadow-raised);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  transition:
    transform var(--ui-toast-motion-duration) var(--openbot-ease-out),
    opacity var(--ui-toast-motion-duration) var(--openbot-ease-out),
    height var(--ui-toast-motion-duration) var(--openbot-ease-out),
    box-shadow var(--openbot-duration-normal) ease;
}

.ui-toaster [data-sonner-toast][data-styled="true"][data-removed="true"] {
  --ui-toast-motion-duration: var(--openbot-duration-toast-exit);
}

.ui-toaster [data-sonner-toast][data-styled="true"] [data-content] {
  grid-area: 1 / 2 / 2 / -1;
}

.ui-toaster [data-sonner-toast][data-styled="true"] [data-button] {
  grid-row: 2;
}

.ui-toaster [data-sonner-toast][data-styled="true"] [data-cancel] {
  grid-column: 2;
  justify-self: end;
}

.ui-toaster [data-sonner-toast][data-styled="true"] [data-action] {
  grid-column: 3;
}

/* The close control floats over the top right corner, so only the words have to keep clear of it.
   Reserving the room on the toast instead left a hole beside every action button, which is visible
   even while the control itself is hidden. */
.ui-toaster.ui-toaster-closeable [data-sonner-toast][data-styled="true"] [data-content],
.ui-toaster [data-sonner-toast][data-styled="true"]:has([data-close-button]) [data-content] {
  padding-right: var(--openbot-space-6);
}

.ui-toaster [data-sonner-toast][data-styled="true"] [data-title] {
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
}

.ui-toaster [data-sonner-toast][data-styled="true"] [data-description] {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-wrap: pretty;
}

.ui-error-reference {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
  margin-top: var(--openbot-space-0-5);
  color: var(--openbot-text-muted);
}

.ui-error-reference-code {
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-xs);
  line-height: var(--openbot-leading-sm);
  user-select: text;
  overflow-wrap: anywhere;
}

.ui-toaster [data-sonner-toast][data-type="success"] {
  --ui-toast-tone: var(--openbot-success);
}

.ui-toaster [data-sonner-toast][data-type="info"] {
  --ui-toast-tone: var(--openbot-accent-text);
}

.ui-toaster [data-sonner-toast][data-type="warning"] {
  --ui-toast-tone: var(--openbot-warning);
}

.ui-toaster [data-sonner-toast][data-type="error"] {
  --ui-toast-tone: var(--openbot-danger);
}

.ui-toaster [data-sonner-toast][data-type="loading"] {
  --ui-toast-tone: var(--openbot-text-muted);
}

.ui-toaster [data-sonner-toast][data-type="success"] [data-icon],
.ui-toaster [data-sonner-toast][data-type="info"] [data-icon],
.ui-toaster [data-sonner-toast][data-type="warning"] [data-icon],
.ui-toaster [data-sonner-toast][data-type="error"] [data-icon],
.ui-toaster [data-sonner-toast][data-type="loading"] [data-icon] {
  color: var(--ui-toast-tone);
}

.ui-toaster [data-sonner-toast][data-styled="true"] [data-icon] {
  grid-area: 1 / 1;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  /* The column gap is zero so that a toast with no icon starts its text at the padding edge. The
     space between the mark and the words is this margin instead. */
  margin: 1px var(--openbot-space-3) 0 0;
}

.ui-toast-icon {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: var(--openbot-icon-stroke);
}

.ui-toast-loading-icon {
  animation: ui-spin 720ms linear infinite;
}

.ui-toaster [data-sonner-toast][data-styled="true"] [data-button] {
  height: var(--openbot-control-md);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control-hover);
  box-shadow: inset 0 0 0 1px var(--openbot-border);
  padding-inline: var(--openbot-space-3);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  transition:
    background-color var(--openbot-duration-normal) ease,
    color var(--openbot-duration-normal) ease,
    transform var(--openbot-duration-normal) var(--openbot-ease-out);
}

.ui-toaster [data-sonner-toast][data-styled="true"] [data-cancel] {
  background: transparent;
  color: var(--openbot-text-secondary);
}

.ui-toaster [data-sonner-toast][data-styled="true"] [data-button]:focus-visible,
.ui-toaster [data-sonner-toast]:focus-visible {
  outline: 0;
  box-shadow: var(--openbot-focus-ring);
}

.ui-toaster [data-sonner-toast][data-styled="true"] [data-close-button]:focus-visible {
  outline: 0;
  box-shadow:
    inset 0 0 0 1px var(--openbot-border-strong),
    0 0 0 2px var(--openbot-border-strong);
}

.ui-toaster [data-sonner-toast][data-styled="true"] [data-close-button] {
  top: var(--openbot-space-1);
  right: var(--openbot-space-1);
  left: auto;
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  color: var(--openbot-text-muted);
  pointer-events: auto;
  opacity: 1;
  transform: scale(1);
  transition:
    background-color var(--openbot-duration-normal) ease,
    box-shadow var(--openbot-duration-normal) ease,
    color var(--openbot-duration-normal) ease,
    opacity var(--openbot-duration-normal) ease,
    transform var(--openbot-duration-normal) var(--openbot-ease-out);
}

.ui-toaster [data-sonner-toast][data-styled="true"] [data-close-button]::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--openbot-control-xl);
  height: var(--openbot-control-xl);
  content: "";
  transform: translate(-50%, -50%);
}

@media (hover: hover) and (pointer: fine) {
  .ui-toaster [data-sonner-toast][data-styled="true"] [data-close-button] {
    pointer-events: none;
    opacity: 0;
  }

  .ui-toaster [data-sonner-toast][data-styled="true"]:hover [data-close-button],
  .ui-toaster [data-sonner-toast][data-styled="true"]:focus-within [data-close-button],
  .ui-toaster [data-sonner-toast][data-styled="true"] [data-close-button]:focus-visible {
    pointer-events: auto;
    opacity: 1;
  }

  .ui-toaster [data-sonner-toast][data-styled="true"] [data-button]:hover {
    background: var(--openbot-bg-control-active);
  }

  .ui-toaster [data-sonner-toast][data-styled="true"] [data-close-button]:hover:not(:focus-visible) {
    background: var(--openbot-danger-soft);
    color: var(--openbot-danger);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui-progress-fill,
  .ui-radial-progress-indicator {
    animation: none;
    transition: none;
  }
}

.ui-toaster [data-sonner-toast][data-styled="true"] [data-button]:active {
  transform: scale(0.96);
}

.ui-toaster [data-sonner-toast][data-styled="true"] [data-close-button]:active {
  transform: scale(0.96);
}

.ui-separator[data-orientation="horizontal"] {
  width: 100%;
  height: 1px;
  background: var(--openbot-border);
}

.ui-separator[data-orientation="vertical"] {
  width: 1px;
  height: 100%;
  background: var(--openbot-border);
}

.ui-spinner {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  display: inline-block;
  flex: 0 0 auto;
  border: 1.5px solid var(--openbot-border-strong);
  border-top-color: currentColor;
  border-radius: var(--openbot-radius-pill);
  animation: ui-spin 720ms linear infinite;
}

.ui-spinner[data-size="sm"] {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}

.ui-spinner[data-size="lg"] {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
}

@keyframes ui-spin {
  to {
    transform: rotate(360deg);
  }
}

.ui-skeleton {
  min-height: var(--openbot-leading-md);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-control-hover);
  animation: ui-skeleton-pulse 1.2s ease-in-out infinite;
}

@keyframes ui-skeleton-pulse {
  50% {
    opacity: 0.56;
  }
}

.ui-kbd {
  min-width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-bg-control);
  padding-inline: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  line-height: 1;
}

.ui-tooltip {
  position: relative;
  z-index: var(--openbot-layer-tooltip);
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-canvas);
  box-shadow:
    0 0 0 1px var(--openbot-border-strong),
    var(--openbot-shadow-raised);
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-sm);
  opacity: 1;
  pointer-events: none;
  transform: translateY(0) scale(1);
  transform-origin: bottom center;
  transition:
    opacity var(--openbot-duration-fast) ease,
    transform var(--openbot-duration-fast) var(--openbot-ease-out);

  @starting-style {
    opacity: 0;
    transform: translateY(2px) scale(0.96);
  }
}

.ui-tooltip::after {
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 8px;
  height: 8px;
  background: var(--openbot-bg-canvas);
  box-shadow: 1px 1px 0 var(--openbot-border-strong);
  content: "";
  transform: translateX(-50%) rotate(45deg);
}

/* A tooltip without space above its control goes to another side. The arrow then points to the
   control from that side. */
.ui-tooltip[data-placement="bottom"] {
  transform-origin: top center;
}

.ui-tooltip[data-placement="bottom"]::after {
  top: -4px;
  bottom: auto;
  box-shadow: -1px -1px 0 var(--openbot-border-strong);
}

.ui-tooltip:is([data-placement="left"], [data-placement="right"])::after {
  top: 50%;
  bottom: auto;
}

.ui-tooltip[data-placement="left"] {
  transform-origin: center right;
}

.ui-tooltip[data-placement="left"]::after {
  right: -4px;
  left: auto;
  box-shadow: 1px -1px 0 var(--openbot-border-strong);
  transform: translateY(-50%) rotate(45deg);
}

.ui-tooltip[data-placement="right"] {
  transform-origin: center left;
}

.ui-tooltip[data-placement="right"]::after {
  left: -4px;
  box-shadow: -1px 1px 0 var(--openbot-border-strong);
  transform: translateY(-50%) rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  .ui-button,
  .ui-switch,
  .ui-switch-thumb,
  .ui-tooltip {
    transition-property: background-color, border-color, color, opacity;
  }

  .ui-spinner,
  .ui-skeleton {
    animation-duration: 1.8s;
  }

  .ui-toaster [data-sonner-toast],
  .ui-toaster [data-sonner-toast] > * {
    transition-duration: 0.01ms;
  }

  .ui-toast-loading-icon {
    animation: none;
  }
}
/* The one dialog overlay. Each Dialog.Overlay and AlertDialog.Overlay has this class. It covers the
 * window on the dialog layer, centers the dialog that it holds, and fades in. A dialog changes only
 * what is different for it, such as a nested layer. */
.ui-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--openbot-layer-dialog);
  display: grid;
  place-items: center;
  padding: var(--openbot-space-6);
  background: var(--openbot-dialog-overlay);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: ui-dialog-overlay-in var(--openbot-duration-overlay) var(--openbot-ease-out);
  /* The window swallows mouse events over a `-webkit-app-region: drag` area, such as the server rail
   * and the window headers, and hands them to the window manager instead. A click there while a
   * dialog was open started a window drag and never reached this overlay, so that side of the window
   * could not dismiss the dialog. The overlay takes the region back for as long as it is on screen. */
  -webkit-app-region: no-drag;
}

.ui-dialog-content {
  border: 0;
  border-radius: var(--openbot-radius-card);
  box-shadow: 0 0 0 1px var(--openbot-dialog-ring);
}

.ui-dialog-content[data-dialog-surface="unstyled"] {
  border-radius: 0;
  box-shadow: none;
}

/* `StableLabel`: all texts share one grid cell, so the widest one sets the width. */
.ui-stable-label {
  display: inline-grid;
}

.ui-stable-label-text,
.ui-stable-label-sizer {
  grid-area: 1 / 1;
}

.ui-stable-label-sizer {
  visibility: hidden;
}

/* The standard confirmation: the icon beside a left-aligned title and description, and the actions
 * on a footer below a divider. The surface has a thin border and no shadow.
 * A confirmation always answers the surface that opened it, so it takes the top nested dialog step:
 * it also opens over the marketplace and skills modals on `--openbot-layer-dialog-host`. */
.ui-confirm-dialog-overlay {
  z-index: calc(var(--openbot-layer-dialog-host) + 2);
}

.ui-dialog-content.ui-confirm-dialog {
  width: min(460px, 100%);
  max-height: calc(100dvh - 2 * var(--openbot-space-6));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  outline: 0;
  border-radius: var(--openbot-radius-xl);
  background: var(--openbot-bg-sidebar);
  color: var(--openbot-text-primary);
  border: 1px solid var(--openbot-dialog-ring);
  box-shadow: none;
  animation: ui-confirm-dialog-in var(--openbot-duration-slow) var(--openbot-ease-out);
}

.ui-confirm-dialog-main {
  min-height: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--openbot-space-4);
  overflow-y: auto;
  padding: var(--openbot-space-6);
}

.ui-confirm-dialog-icon {
  width: var(--openbot-control-xl);
  height: var(--openbot-control-xl);
  display: grid;
  place-items: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-secondary);
}

.ui-confirm-dialog-icon svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  stroke-width: var(--openbot-icon-stroke);
}

.ui-confirm-dialog[data-tone="destructive"] .ui-confirm-dialog-icon {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger-text);
}

.ui-confirm-dialog-media {
  display: grid;
  place-items: center;
}

.ui-confirm-dialog-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
  padding-top: var(--openbot-space-1-5);
}

.ui-confirm-dialog-title {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-xl);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-xl);
  letter-spacing: var(--openbot-tracking-tight);
  overflow-wrap: anywhere;
}

.ui-confirm-dialog-description {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}

.ui-confirm-dialog-body {
  margin-top: var(--openbot-space-1);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}

.ui-confirm-dialog-body :where(ul, ol) {
  display: grid;
  gap: var(--openbot-space-1);
  margin: 0;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-3) var(--openbot-space-4) var(--openbot-space-3) var(--openbot-space-8);
  list-style: disc;
}

.ui-confirm-dialog-body :where(ol) {
  list-style: decimal;
}

.ui-confirm-dialog-body :where(li)::marker {
  color: var(--openbot-text-dim);
}

.ui-confirm-dialog-error.ui-alert {
  margin-top: var(--openbot-space-1);
  padding: var(--openbot-space-2) var(--openbot-space-3);
}

.ui-confirm-dialog-error .ui-alert-icon {
  color: var(--openbot-danger-text);
}

.ui-confirm-dialog-actions {
  display: flex;
  flex: 0 0 auto;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
  border-top: 1px solid var(--openbot-dialog-ring);
  padding: var(--openbot-space-4) var(--openbot-space-6);
}

.ui-confirm-dialog-actions .ui-button svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: var(--openbot-icon-stroke);
}

/* Status text on a tinted fill reads the text step of its colour: the solid danger step measures
 * 3.7:1 on its own soft fill, under the 4.5:1 a label needs. */
.ui-confirm-dialog-confirm.ui-button-variant-destructive {
  color: var(--openbot-danger-text);
}

@media (hover: hover) and (pointer: fine) {
  .ui-confirm-dialog-confirm.ui-button-variant-destructive:hover:not(:disabled):not([data-disabled]) {
    color: var(--openbot-danger-text);
  }
}

.ui-confirm-dialog-actions .ui-button:active:not(:disabled):not([data-disabled]) {
  transform: scale(0.97);
}

@keyframes ui-dialog-overlay-in {
  from {
    opacity: 0;
  }
}

@keyframes ui-confirm-dialog-in {
  from {
    opacity: 0;
    transform: scale(0.97) translateY(4px);
  }
}

@media (max-width: 560px) {
  .ui-confirm-dialog-overlay {
    padding: var(--openbot-space-3);
  }

  .ui-dialog-content.ui-confirm-dialog {
    max-height: calc(100dvh - 2 * var(--openbot-space-3));
  }

  .ui-confirm-dialog-main {
    padding: var(--openbot-space-4);
  }

  .ui-confirm-dialog-actions {
    padding: var(--openbot-space-3) var(--openbot-space-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui-dialog-content.ui-confirm-dialog {
    animation-name: ui-dialog-overlay-in;
  }

  .ui-confirm-dialog-actions .ui-button:active {
    transform: none;
  }
}
.ui-bubble-group {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--openbot-space-2);
}

.ui-bubble {
  position: relative;
  display: flex;
  width: fit-content;
  min-width: 0;
  max-width: min(80%, 720px);
  flex-direction: column;
  align-self: flex-start;
  gap: var(--openbot-space-1);
  color: var(--openbot-text-primary);
}

.ui-bubble[data-align="end"] {
  align-self: flex-end;
}

.ui-bubble-content {
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--openbot-radius-bubble);
  padding: 8px 12px;
  font-size: var(--openbot-text-lg);
  line-height: 1.625;
  overflow-wrap: anywhere;
  transition:
    border-color var(--openbot-duration-hover) ease,
    background var(--openbot-duration-hover) ease,
    color var(--openbot-duration-hover) ease;
}

button.ui-bubble-content,
a.ui-bubble-content {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  transition: color var(--openbot-duration-hover) ease;
}

button.ui-bubble-content {
  cursor: pointer;
}

.ui-bubble-variant-default {
  color: var(--openbot-text-on-light);
}

.ui-bubble-variant-default > .ui-bubble-content {
  background: var(--openbot-surface-light);
}

.ui-bubble-variant-default .message-reply-context {
  border-left-color: var(--openbot-text-muted-on-light);
  color: var(--openbot-text-on-light);
}

.ui-bubble-variant-secondary > .ui-bubble-content {
  background: var(--openbot-bg-surface-raised);
}

.ui-bubble-variant-muted > .ui-bubble-content {
  background: var(--openbot-bg-surface);
}

.ui-bubble-variant-tinted {
  color: var(--openbot-accent-text);
}

.ui-bubble-variant-tinted > .ui-bubble-content {
  border-color: var(--openbot-accent-strong);
  background: var(--openbot-accent-soft);
}

.ui-bubble-variant-outline > .ui-bubble-content {
  border-color: var(--openbot-border-strong);
  background: transparent;
}

.ui-bubble-variant-ghost {
  width: fit-content;
  max-width: 100%;
  border-color: transparent;
  background: transparent;
}

.ui-bubble-variant-ghost > .ui-bubble-content {
  width: fit-content;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.ui-bubble-variant-destructive {
  color: var(--openbot-danger);
}

.ui-bubble-variant-destructive > .ui-bubble-content {
  border-color: var(--openbot-danger-border);
  background: var(--openbot-danger-soft);
}

.ui-bubble-reactions {
  position: absolute;
  z-index: 1;
  display: flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: var(--openbot-space-1);
  border: 0;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface);
  padding: 2px 6px;
  box-shadow: 0 0 0 3px var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
  white-space: nowrap;
  transition:
    background var(--openbot-duration-hover) ease,
    box-shadow var(--openbot-duration-hover) ease;
}

.ui-bubble-reactions:has(button) {
  padding: 0;
}

.ui-bubble-reactions-side-top {
  top: 0;
  translate: 0 -75%;
}

.ui-bubble-reactions-side-bottom {
  bottom: 0;
  translate: 0 75%;
}

.ui-bubble-reactions-align-start {
  left: var(--openbot-space-3);
}

.ui-bubble-reactions-align-end {
  right: var(--openbot-space-3);
}

.ui-bubble-reaction-overflow {
  color: var(--openbot-text-primary);
  font: inherit;
}

.ui-marker {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
}

.ui-marker-content {
  display: flex;
  min-width: 0;
  align-items: center;
}

.ui-marker-icon {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
}

.ui-message-group {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--openbot-space-1);
}

.ui-message {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: flex-end;
  gap: var(--openbot-space-2);
}

.ui-message[data-align="end"] {
  flex-direction: row-reverse;
}

.ui-message-avatar {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  align-self: flex-end;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
}

.ui-message-content {
  display: flex;
  width: 100%;
  min-width: 0;
  max-width: 720px;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--openbot-space-1);
  overflow-wrap: anywhere;
}

.ui-message[data-align="end"] > .ui-message-content {
  align-items: flex-end;
}

.ui-message-header,
.ui-message-footer {
  display: flex;
  max-width: 100%;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: 0 var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
}

.ui-message[data-align="end"] .ui-message-footer {
  justify-content: flex-end;
}

/* Keep notification actions usable while a Kobalte modal blocks the page. */
.ui-toast-layer {
  pointer-events: auto;
}


/* /@fs//app/packages/ui/src/features/account/otp-input.css */
.otp-input {
  display: grid;
  gap: 10px;
  justify-items: center;
}

.otp-input-fieldset {
  position: relative;
  width: max-content;
  max-width: 100%;
  margin: 0;
  border: 0;
  padding: 0;
}

.otp-input .otp-input-native {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 0;
  color: transparent;
  caret-color: transparent;
  cursor: text;
  opacity: 0;
}

.otp-input .otp-input-native:focus {
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
}

.otp-input-slots {
  --otp-slot-size: 34px;
  --otp-slot-height: 50px;
  --otp-slot-gap: 6px;
  --otp-group-gap: 8px;

  position: relative;
  display: flex;
  gap: var(--otp-slot-gap);
}

.otp-input-slot,
.otp-input-focus-ring {
  width: var(--otp-slot-size);
  height: var(--otp-slot-height);
  border-radius: var(--openbot-radius-md);
}

/* A surface can set the slots with `--otp-slot-border`, `--otp-slot-background`,
   `--otp-slot-filled-background` and `--otp-slot-shadow`. The error and success states keep their colours. */
.otp-input-slot {
  position: relative;
  display: grid;
  flex: 0 0 var(--otp-slot-size);
  place-items: center;
  border: 1px solid var(--otp-slot-border, var(--openbot-border-strong));
  background: var(--otp-slot-background, var(--openbot-bg-control));
  box-shadow: var(--otp-slot-shadow, none);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-xl);
  font-weight: var(--openbot-weight-semibold);
  line-height: 1;
  transition:
    border-color var(--openbot-duration-hover) ease,
    background-color var(--openbot-duration-hover) ease,
    color var(--openbot-duration-hover) ease;
}

.otp-input-slot[data-filled="true"] {
  background: var(--otp-slot-filled-background, var(--otp-slot-background, var(--openbot-bg-control)));
}

.otp-input-slot[data-group-start="true"] {
  margin-left: var(--otp-group-gap);
}

.otp-input-focus-ring {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  border: 1px solid var(--openbot-border-focus);
  box-shadow: var(--openbot-focus-ring);
  opacity: 0;
  pointer-events: none;
  transform: translateX(
    calc(var(--otp-active-index) * (var(--otp-slot-size) + var(--otp-slot-gap)) + var(--otp-group-offset))
  );
  transition:
    transform var(--openbot-duration-hover) var(--openbot-ease-out),
    opacity var(--openbot-duration-hover) ease;
}

.otp-input-focus-ring[data-visible="true"] {
  opacity: 1;
}

.otp-input-character {
  position: relative;
  z-index: 1;
  animation: otp-character-enter var(--openbot-duration-overlay) var(--openbot-ease-out);
}

.otp-input-caret {
  position: absolute;
  z-index: 2;
  /* Centred in the slot: 13px down in the default 50px slot. */
  top: calc((var(--otp-slot-height) - 24px) / 2);
  left: 50%;
  width: 1px;
  height: 24px;
  background: var(--openbot-text-primary);
  animation: otp-caret-blink 1s steps(1, end) infinite;
  transform: translateX(-50%);
}

.otp-input-caret[data-trailing="true"] {
  margin-left: 7px;
}

/* The compact code fits the width of its card, so that a long code does not push the card wider. */
.otp-input[data-size="compact"] {
  container-type: inline-size;
  justify-items: start;
}

.otp-input[data-size="compact"] .otp-input-slots {
  --otp-slot-height: 48px;
  --otp-slot-gap: var(--openbot-space-2);
  --otp-group-gap: 14px;
  --otp-slot-size: min(
    var(--openbot-control-xl),
    calc((100cqw - (var(--otp-length) - 1) * var(--otp-slot-gap) - var(--otp-group-gap)) / var(--otp-length))
  );
}

.otp-input[data-status="verifying"] .otp-input-slot {
  color: var(--openbot-text-secondary);
}

.otp-input[data-status="error"] .otp-input-slot {
  border-color: var(--openbot-danger);
  background: var(--openbot-danger-soft);
}

.otp-input[data-status="error"] .otp-input-focus-ring {
  border-color: var(--openbot-danger);
  box-shadow: 0 0 0 3px var(--openbot-danger-soft);
}

.otp-input[data-status="success"] .otp-input-slot {
  border-color: var(--openbot-success);
  background: var(--openbot-success-soft);
  color: var(--openbot-success);
}

.otp-input-success {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  overflow: visible;
  color: var(--openbot-success);
}

.otp-input-success path {
  fill: none;
  stroke: currentcolor;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* Heavier than the shared glyph scale on purpose: this tick is drawn by animation and
   * reads as a confirmation, the same exception the badge tick takes. */
  stroke-width: 2;
  animation: otp-check-draw 350ms var(--openbot-duration-fast) var(--openbot-ease-out) forwards;
}

.otp-input-message {
  min-height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 17px;
  text-align: center;
}

.otp-input[data-status="error"] .otp-input-message {
  color: var(--openbot-danger);
}

.otp-input[data-status="success"] .otp-input-message {
  color: var(--openbot-success);
}

.otp-input[data-size="compact"] .otp-input-message {
  justify-content: flex-start;
  text-align: start;
}

@keyframes otp-character-enter {
  from {
    filter: blur(2px);
    opacity: 0;
    transform: translateY(9px);
  }
}

@keyframes otp-check-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes otp-caret-blink {
  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .otp-input-slot,
  .otp-input-focus-ring {
    transition: none;
  }
  .otp-input-character,
  .otp-input-caret,
  .otp-input-success path {
    animation: none;
  }
  .otp-input-success path {
    stroke-dashoffset: 0;
  }
}


/* /@fs//app/packages/ui/src/styles/action-menu.css */
/* The menu panel sits on the same color as the sidebar and the conversation panel. A light edge, a
 * top highlight and a deep shadow lift it from them. */
:root {
  --ui-menu-radius: var(--openbot-radius-card);
  --ui-menu-padding: var(--openbot-space-1-5);
  --ui-menu-item-radius: calc(var(--ui-menu-radius) - var(--ui-menu-padding) + var(--openbot-space-0-5));
  --ui-menu-inset: calc(var(--openbot-space-2) + var(--openbot-space-0-5));
  --ui-menu-bg: var(--openbot-bg-sheet);
  --ui-menu-edge: color-mix(in srgb, var(--openbot-text-primary) 11%, transparent);
  --ui-menu-highlight: color-mix(in srgb, var(--openbot-text-primary) 5%, transparent);
  --ui-menu-shadow: color-mix(in srgb, var(--openbot-bg-notch) 45%, transparent);
  --ui-menu-item-hover: color-mix(in srgb, var(--openbot-text-primary) 6%, transparent);
  /* The highlighted row as one opaque color, for the parts of an icon that are cut out of its fill. */
  --ui-menu-row-highlight: color-mix(in srgb, var(--openbot-text-primary) 6%, var(--ui-menu-bg));
  --ui-menu-panel-shadow:
    inset 0 1px 0 var(--ui-menu-highlight), 0 0 0 1px var(--ui-menu-edge), 0 4px 6px -1px var(--ui-menu-shadow),
    0 2px 4px -2px var(--ui-menu-shadow);
  --ui-menu-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ui-menu-duration: 150ms;
  /* A submenu opens and closes slower than the root menu, on a softer curve. */
  --ui-submenu-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ui-submenu-duration: var(--openbot-duration-slow);
}

.ui-popover-menu-surface {
  border: 0;
  border-radius: var(--openbot-radius-md);
  outline: 0;
  background: var(--openbot-bg-control);
  box-shadow:
    0 0 0 1px var(--openbot-border),
    0 4px 6px -1px var(--openbot-shadow-popover-ambient),
    0 2px 4px -2px var(--openbot-shadow-popover-ambient);
  color: var(--openbot-text-primary);
}

.ui-action-menu {
  position: relative;
  z-index: var(--openbot-layer-popover);
  width: max-content;
  min-width: 192px;
  max-width: min(288px, calc(100vw - var(--openbot-space-4)));
  overflow: hidden;
  border: 0;
  border-radius: var(--ui-menu-radius);
  outline: 0;
  background: var(--ui-menu-bg);
  box-shadow: var(--ui-menu-panel-shadow);
  padding: var(--ui-menu-padding);
  color: var(--openbot-text-primary);
  transform-origin: var(--kb-menu-content-transform-origin, var(--kb-popover-content-transform-origin));
  animation: ui-menu-in var(--ui-menu-duration) var(--ui-menu-ease) both;
}

/* Kobalte removes a closed menu at once. The copy that menu-motion.tsx leaves in its place has no
 * data-expanded, and plays this exit. */
.ui-action-menu:not([data-expanded]) {
  animation: ui-menu-out var(--ui-menu-duration) var(--ui-menu-ease) both;
}

/* Kobalte labels a submenu with the id of its sub-trigger. The exit copy keeps the label. */
.ui-action-menu[aria-labelledby*="sub-trigger"] {
  animation-duration: var(--ui-submenu-duration);
  animation-timing-function: var(--ui-submenu-ease);
}

.ui-action-menu:not([data-menu-layout="grid"])
  :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]) {
  display: flex;
  width: 100%;
  height: var(--openbot-control-md);
  min-height: var(--openbot-control-md);
  align-items: center;
  justify-content: flex-start;
  gap: var(--openbot-space-2);
  border: 0;
  border-radius: var(--ui-menu-item-radius);
  outline: 0;
  background: transparent;
  padding: var(--openbot-space-1-5) var(--ui-menu-inset);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-lg);
  text-align: left;
  white-space: nowrap;
  transition:
    background-color var(--openbot-duration-hover) var(--openbot-ease-out),
    color var(--openbot-duration-hover) var(--openbot-ease-out);
}

/* A long translated label ends with an ellipsis instead of a hard cut. */
.ui-action-menu:not([data-menu-layout="grid"])
  :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"])
  > span:not(:has(svg), .ui-menu-trailing) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui-action-menu:not([data-menu-layout="grid"])
  :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]):is(
    :hover,
    :focus-visible,
    [data-highlighted],
    [aria-expanded="true"]
  ) {
  background: var(--ui-menu-item-hover);
  color: var(--openbot-text-primary);
}

.ui-action-menu:not([data-menu-layout="grid"])
  :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"])[data-disabled] {
  color: var(--openbot-text-muted);
  cursor: default;
  opacity: 0.45;
}

.ui-action-menu:not([data-menu-layout="grid"])
  :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"])
  > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  /* fill and stroke belong here beside the colour and the weight: this rule owns how a
   * menu icon paints. Lucide sets both as attributes, so every menu built out of the
   * barrel looked right and hid the gap - until a hand-drawn SVG landed in one and took
   * the SVG defaults instead, painting itself as an opaque filled shape with no outline. */
  fill: none;
  stroke: currentColor;
  color: var(--openbot-text-secondary);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Lucide ships stroke-width="2" as an attribute, so the weight has to be set here to tame
 * it - but this selector outranks the zero-specificity :where(.ui-glyph-*) classes, and
 * setting it unconditionally would undo their viewBox scaling for any hand-drawn icon in
 * a menu. They are excluded and keep the weight their own grid asks for. */
.ui-action-menu:not([data-menu-layout="grid"])
  :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"])
  > svg:not(.ui-glyph-20, .ui-glyph-16) {
  stroke-width: var(--openbot-icon-stroke);
}

/* The separator runs to both edges of the panel. */
.ui-action-menu > hr,
.ui-action-menu [role="separator"] {
  height: 1px;
  margin: var(--ui-menu-padding) calc(var(--ui-menu-padding) * -1);
  border: 0;
  background: var(--openbot-border);
}

.ui-action-menu:not([data-menu-layout="grid"])
  :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]).ui-action-menu-danger,
.ui-action-menu:not([data-menu-layout="grid"])
  :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]).ui-action-menu-danger
  > svg {
  color: var(--openbot-danger);
}

.ui-action-menu:not([data-menu-layout="grid"])
  :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]).ui-action-menu-danger:is(
    :hover,
    :focus-visible,
    [data-highlighted]
  ) {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
}

/* A heading inside a menu. Each item still names itself, so the heading is aria-hidden. */
.ui-menu-label {
  padding: var(--openbot-space-1-5) var(--ui-menu-inset);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

/* The check of a selected item: a filled circle on the left, an empty ring when not selected. */
.ui-menu-check {
  display: grid;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--openbot-text-primary) 22%, transparent);
  border-radius: var(--openbot-radius-pill);
  transition:
    background-color var(--ui-menu-duration) ease-out,
    border-color var(--ui-menu-duration) ease-out;
}

.ui-menu-check[data-checked] {
  border-color: transparent;
  background: var(--openbot-text-primary);
}

.ui-action-menu:not([data-menu-layout="grid"])
  :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"])
  > .ui-menu-check
  > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke: var(--ui-menu-bg);
  stroke-width: 2.5;
}

/* A value or a shortcut at the end of an item. */
.ui-menu-trailing {
  margin-left: auto;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

.ui-action-menu:not([data-menu-layout="grid"])
  :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"])
  > svg.ui-menu-trailing {
  color: var(--openbot-text-muted);
}

/* Item icons are muted outlines at rest. On the highlighted row they take the text color and fill in.
 * The swap has no transition. Only the closed shapes fill: open lines stay outlines, and details
 * take the row color, so they are cut out of the fill as in a solid icon set. */
.ui-action-menu .agent-context-icon {
  color: var(--openbot-text-muted);
}

.ui-action-menu .agent-context-icon > * {
  fill: currentColor;
  fill-opacity: 0;
}

.ui-action-menu [class~="lucide-chart-area"] > path:first-child,
.ui-action-menu [class~="lucide-bell-off"] > path:nth-child(3),
.ui-action-menu [class~="lucide-app-window"] > path,
.ui-action-menu [class~="lucide-bot"] > *,
.ui-action-menu [class~="lucide-calendar-clock"] > * {
  fill: none;
}

.ui-action-menu :is(:hover, [data-highlighted], [aria-expanded="true"]) > .agent-context-icon {
  color: var(--openbot-text-primary);
}

.ui-action-menu :is(:hover, [data-highlighted], [aria-expanded="true"]) > .agent-context-icon > * {
  fill-opacity: 1;
}

/* Cut-outs: the window bar, and the lights on the server racks. */
.ui-action-menu :is(:hover, [data-highlighted], [aria-expanded="true"]) > [class~="lucide-app-window"] > path,
.ui-action-menu
  :is(:hover, [data-highlighted], [aria-expanded="true"])
  > .ui-glyph-20:has(> rect + rect + circle)
  > circle {
  fill: var(--ui-menu-row-highlight);
  stroke: var(--ui-menu-row-highlight);
}

/* A tooltip that opens and closes with the motion of a submenu, and moves to the next trigger of its
 * group. menu-motion.tsx leaves the copy that plays the exit. */
.ui-motion-tooltip-trigger {
  display: flex;
}

.ui-motion-tooltip {
  z-index: var(--openbot-layer-tooltip);
  transform-origin: var(--kb-tooltip-content-transform-origin);
  animation: ui-menu-in var(--ui-submenu-duration) var(--ui-submenu-ease) both;
}

.ui-motion-tooltip:not([data-expanded]) {
  animation: ui-menu-out var(--ui-submenu-duration) var(--ui-submenu-ease) both;
}

/* While the panel moves, its size changes and its content stays as it is: no scroll bar shows. */
.ui-motion-tooltip:is([data-menu-hold], [data-menu-moving], [data-menu-swap-out]) {
  overflow: hidden;
}

/* A tooltip that is a label, such as the name of a rail button, on the surface of a menu panel. */
.ui-motion-tooltip-label {
  overflow: hidden;
  max-width: min(240px, calc(100vw - var(--openbot-space-4)));
  border-radius: var(--openbot-radius-md);
  background: var(--ui-menu-bg);
  box-shadow: var(--ui-menu-panel-shadow);
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
  overflow-wrap: anywhere;
  pointer-events: none;
}

.ui-motion-tooltip-label > span {
  display: block;
}

/* States that menu-motion.tsx sets while a copy waits for the next submenu or tooltip, or while
 * one of them moves to the place of the next one. */
.ui-action-menu:is([data-menu-hold], [data-menu-swap-in], [data-menu-swap-out]),
.ui-motion-tooltip:is([data-menu-hold], [data-menu-swap-in], [data-menu-swap-out]) {
  animation: none;
}

.ui-action-menu[data-menu-handoff],
.ui-motion-tooltip[data-menu-handoff] {
  animation: none;
  opacity: 0;
}

.ui-action-menu[data-menu-swap-out],
.ui-motion-tooltip[data-menu-swap-out] {
  background: transparent;
  box-shadow: none;
}

@keyframes ui-menu-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
}

@keyframes ui-menu-out {
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui-action-menu,
  .ui-action-menu:not([data-expanded]),
  .ui-motion-tooltip,
  .ui-motion-tooltip:not([data-expanded]) {
    animation: none;
  }

  .ui-menu-check {
    transition: none;
  }
}


/* /@fs//app/packages/ui/src/styles/sliding-tabs.css */
.ui-sliding-tabs {
  --sliding-tabs-duration: 250ms;
  --sliding-tabs-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-tabs-bar-bg);
  /* The bar wears the chip body and outline of the other controls, so a row of them reads as one
     family. The outline is an inset shadow because Kobalte places the pill from the trigger's
     offset, which a real border would shift. */
  box-shadow: inset 0 0 0 1px var(--openbot-border);
  padding: 3px;
}

.ui-sliding-tabs-trigger {
  position: relative;
  z-index: 1;
  height: var(--openbot-control-sm);
  appearance: none;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  outline: 0;
  background: transparent;
  padding: 4px var(--openbot-space-3);
  color: var(--openbot-text-muted);
  font: inherit;
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-sm);
  font-weight: var(--openbot-weight-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--sliding-tabs-duration) var(--sliding-tabs-ease);
}

.ui-sliding-tabs-trigger[aria-selected="true"],
.ui-sliding-tabs-trigger:not([aria-selected="true"]):hover {
  color: var(--openbot-text-primary);
}

.ui-sliding-tabs-trigger:focus-visible {
  box-shadow: var(--openbot-focus-ring);
}

.ui-sliding-tabs-trigger:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.ui-sliding-tabs-pill {
  position: absolute;
  top: 3px;
  left: 0;
  z-index: 0;
  width: 0;
  height: var(--openbot-control-sm);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-tabs-pill-bg);
  pointer-events: none;
  transition:
    transform var(--sliding-tabs-duration) var(--sliding-tabs-ease),
    width var(--sliding-tabs-duration) var(--sliding-tabs-ease);
  will-change: transform, width;
}

.ui-sliding-tabs-pill:is([data-initializing], [data-resizing]) {
  transition: none;
}

.ui-sliding-tabs-content-slot {
  --sliding-tabs-content-duration: 150ms;
  --sliding-tabs-content-distance: 4px;
  --sliding-tabs-content-blur: 2px;
  min-width: 0;
  display: grid;
}

.ui-sliding-tabs-content {
  min-width: 0;
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  filter: blur(var(--sliding-tabs-content-blur));
  transform: translateY(var(--sliding-tabs-content-distance));
  pointer-events: none;
  transition:
    transform var(--sliding-tabs-content-duration) ease-in-out,
    filter var(--sliding-tabs-content-duration) ease-in-out,
    opacity var(--sliding-tabs-content-duration) ease-in-out,
    visibility 0s linear var(--sliding-tabs-content-duration);
  will-change: transform, filter, opacity;
}

.ui-sliding-tabs-content[data-selected] {
  opacity: 1;
  visibility: visible;
  filter: blur(0);
  transform: translateY(0);
  pointer-events: auto;
  transition:
    transform var(--sliding-tabs-content-duration) ease-in-out,
    filter var(--sliding-tabs-content-duration) ease-in-out,
    opacity var(--sliding-tabs-content-duration) ease-in-out,
    visibility 0s linear;
}

@media (prefers-reduced-motion: reduce) {
  .ui-sliding-tabs-pill,
  .ui-sliding-tabs-trigger,
  .ui-sliding-tabs-content {
    transition: none;
  }
}


/* /@fs//app/src/renderer/src/styles/transitions.css */
/* biome-ignore-all lint/complexity/noImportantStyles: transitions.dev reduced-motion guards require cascade precedence. */
@keyframes t-digit-pop-in {
  0% {
    transform: translate(
      calc(var(--digit-distance) * var(--digit-dir-x)),
      calc(var(--digit-distance) * var(--digit-dir-y))
    );
    opacity: 0;
    filter: blur(var(--digit-blur));
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
    filter: blur(0);
  }
}

.t-digit-group {
  display: inline-flex;
  align-items: baseline;
}
.t-digit {
  display: inline-block;
  will-change: transform, opacity, filter;
}
.t-digit-group.is-animating .t-digit {
  animation: t-digit-pop-in var(--digit-dur) var(--digit-ease) both;
}
.t-digit-group.is-animating .t-digit[data-stagger="1"] {
  animation-delay: var(--digit-stagger);
}
.t-digit-group.is-animating .t-digit[data-stagger="2"] {
  animation-delay: calc(var(--digit-stagger) * 2);
}

@media (prefers-reduced-motion: reduce) {
  .t-digit-group .t-digit {
    animation: none !important;
  }
}

/* Border-color tween. Define your input's default / focused
   / error border-color in your own component CSS — this rule
   only owns the interpolation. Use a constant border-width
   across states so the tween never shifts inner content. */
.t-input {
  transition: border-color var(--openbot-duration-normal) ease-out;
  will-change: transform;
}
.t-input.is-error {
  /* Error border auto-reverts on the hold timer, so the
     fade-out uses the slower revert duration (matches the
     message fade). */
  transition: border-color var(--revert-dur, 280ms) ease-out;
}

/* Error message reveal. Visibility is delayed by --revert-dur
   on hide so the message stays painted for the full opacity
   fade-out. Entering .is-error drops the delay to 0 so the
   message becomes visible immediately. */
.t-error-msg {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--revert-dur, 280ms) ease-out,
    visibility 0s linear var(--revert-dur, 280ms);
}
.t-input-wrap.is-error .t-error-msg {
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--revert-dur, 280ms) ease-out,
    visibility 0s linear 0s;
}

/* Multi-segment keyframe with per-stop easing so each leg
   of the shake follows its own cubic-bezier independently.
   %-stops are cumulative durations as a fraction of the
   total (80, 60, 80, 60 = 280ms): 28.57%, 57.14%, 78.57%,
   100%. Recompute if any segment duration changes. */
.t-input.is-shaking {
  animation: t-input-shake calc(var(--shake-dur-a) * 2 + var(--shake-dur-b) * 2) linear;
}
@keyframes t-input-shake {
  0% {
    transform: translateX(0);
    animation-timing-function: var(--shake-ease);
  }
  28.57% {
    transform: translateX(var(--shake-distance));
    animation-timing-function: var(--shake-ease);
  }
  57.14% {
    transform: translateX(calc(var(--shake-distance) * -1));
    animation-timing-function: var(--shake-ease);
  }
  78.57% {
    transform: translateX(var(--shake-overshoot));
    animation-timing-function: var(--shake-ease);
  }
  100% {
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .t-input {
    animation: none !important;
    transform: none !important;
  }
}

.t-modal {
  transform-origin: center;
  transform: scale(var(--modal-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--modal-open-dur) var(--modal-ease),
    opacity var(--modal-open-dur) var(--modal-ease);
  will-change: transform, opacity;
}
.t-modal.is-open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
.t-modal.is-closing {
  transform: scale(var(--modal-scale-close));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--modal-close-dur) var(--modal-ease),
    opacity var(--modal-close-dur) var(--modal-ease);
}

@media (prefers-reduced-motion: reduce) {
  .t-modal {
    transition: none !important;
  }
}

.t-page-slide {
  position: relative;
}
.t-page-slide .t-page[data-page-id="1"] {
  --t-page-from-x: calc(var(--page-slide-distance) * -1);
}
.t-page-slide .t-page[data-page-id="2"] {
  --t-page-from-x: var(--page-slide-distance);
}
.t-page-slide .t-page {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateX(calc(var(--t-page-from-x, 0px) * var(--page-exit-enabled)));
  filter: blur(calc(var(--page-blur) * var(--page-exit-enabled)));
  transition:
    opacity var(--page-fade-dur) var(--page-fade-ease),
    transform var(--page-slide-dur) var(--page-slide-ease),
    filter var(--page-slide-dur) var(--page-slide-ease);
  will-change: opacity, transform, filter;
}
.t-page-slide[data-page="1"] .t-page[data-page-id="1"],
.t-page-slide[data-page="2"] .t-page[data-page-id="2"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
  filter: blur(0);
  transition-delay: var(--page-stagger);
}

@media (prefers-reduced-motion: reduce) {
  .t-page-slide .t-page {
    transition: none !important;
  }
}

.t-text-swap {
  display: inline-block;
  transform: translateY(0);
  filter: blur(0);
  opacity: 1;
  transition:
    transform var(--text-swap-dur) var(--text-swap-ease),
    filter var(--text-swap-dur) var(--text-swap-ease),
    opacity var(--text-swap-dur) var(--text-swap-ease);
  will-change: transform, filter, opacity;
}
.t-text-swap.is-exit {
  transform: translateY(calc(var(--text-swap-translate-y) * -1));
  filter: blur(var(--text-swap-blur));
  opacity: 0;
}
.t-text-swap.is-enter-start {
  transform: translateY(var(--text-swap-translate-y));
  filter: blur(var(--text-swap-blur));
  opacity: 0;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .t-text-swap {
    transition: none !important;
  }
}

.t-resize {
  transition:
    width var(--resize-dur) var(--resize-ease),
    height var(--resize-dur) var(--resize-ease);
  will-change: width, height;
}

@media (prefers-reduced-motion: reduce) {
  .t-resize {
    transition: none !important;
  }
}

/* Panel reveal. The snippet travels on Y. A panel that enters from a side
   edge sets --panel-translate-x and zeroes --panel-translate-y, so the same
   duration, ease, and cross-blur read as a full open on either axis. */
.t-panel-slide {
  transform: translate(var(--panel-translate-x), var(--panel-translate-y));
  opacity: 0;
  filter: blur(var(--panel-blur));
  pointer-events: none;
  transition:
    transform var(--panel-close-dur) var(--panel-ease),
    opacity var(--panel-close-dur) var(--panel-ease),
    filter var(--panel-close-dur) var(--panel-ease);
  will-change: transform, opacity, filter;
}
.t-panel-slide[data-open="true"] {
  transform: translate(0, 0);
  opacity: 1;
  filter: blur(0);
  pointer-events: auto;
  transition:
    transform var(--panel-open-dur) var(--panel-ease),
    opacity var(--panel-open-dur) var(--panel-ease),
    filter var(--panel-open-dur) var(--panel-ease);
}

@media (prefers-reduced-motion: reduce) {
  .t-panel-slide {
    transition: none !important;
  }
}

/* Accordion expand. grid-template-rows 0fr → 1fr gives a clean height animation
   with no JS measurement; the inner element clips overflow. */
.t-acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--acc-collapse) var(--acc-ease);
}
.t-acc[data-open="true"] .t-acc-panel {
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--acc-expand) var(--acc-ease);
}
.t-acc-panel-inner {
  overflow: hidden;
  opacity: 0;
  filter: blur(2px);
  transition:
    opacity var(--acc-collapse) var(--acc-ease),
    filter var(--acc-collapse) var(--acc-ease);
}
.t-acc[data-open="true"] .t-acc-panel-inner {
  opacity: 1;
  filter: blur(0);
  transition:
    opacity var(--acc-expand) var(--acc-ease),
    filter var(--acc-expand) var(--acc-ease);
}

@media (prefers-reduced-motion: reduce) {
  .t-acc-panel,
  .t-acc-panel-inner {
    transition: none !important;
  }
}


/* /@fs//app/packages/ui/src/features/dynamic-island/dynamic-island.css */
.dynamic-island {
  --dynamic-island-notch-width: 192px;
  --dynamic-island-notch-height: 32px;
  --dynamic-island-compact-width: 268px;
  --dynamic-island-expanded-width: 420px;
  --dynamic-island-hover-width-growth: 32px;
  --dynamic-island-hover-height-growth: 8px;
  --dynamic-island-hover-hit-top: 6px;
  --dynamic-island-hover-hit-bottom: 6px;
  --dynamic-island-hover-retention-bottom: 6px;
  --dynamic-island-hover-retention-inline-growth: 24px;
  --dynamic-island-shoulder-size: 6px;
  --dynamic-island-expanded-shoulder-size: 19px;
  --dynamic-island-bottom-radius: 14px;
  --dynamic-island-external-compact-radius: 16px;
  --dynamic-island-external-expanded-radius: 24px;
  --dynamic-island-shared-duration: 450ms;
  --dynamic-island-shared-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  display: flex;
  width: min(var(--dynamic-island-expanded-width), calc(100vw - var(--openbot-space-6)));
  height: fit-content;
  align-items: flex-start;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--openbot-text-primary);
  filter: drop-shadow(0 0 0 transparent);
  pointer-events: none;
  transition: filter var(--openbot-duration-normal) var(--openbot-ease-out);
}

.dynamic-island-shell {
  position: relative;
  display: block;
  width: fit-content;
  height: fit-content;
  overflow: clip;
  contain: layout paint;
  isolation: isolate;
  pointer-events: auto;
}

.dynamic-island[data-layout-state="expanded"] {
  --dynamic-island-shared-duration: 420ms;
  --dynamic-island-shoulder-size: 19px;
  --dynamic-island-bottom-radius: 24px;
}

.dynamic-island[data-layout-state="expanded"],
.dynamic-island[data-hovered="true"] {
  filter: drop-shadow(0 0 10px var(--openbot-shadow-dynamic-island));
}

.dynamic-island-shell[data-resizing] {
  will-change: width, height;
}

.dynamic-island-size-target {
  position: relative;
  left: 50%;
  width: min(var(--dynamic-island-compact-width), calc(100vw - var(--openbot-space-6)));
  min-height: var(--dynamic-island-notch-height);
  transform: translateX(-50%);
}

.dynamic-island[data-layout-state="compact"][data-hovered="true"] .dynamic-island-size-target {
  width: min(
    calc(var(--dynamic-island-compact-width) + var(--dynamic-island-hover-width-growth)),
    calc(100vw - var(--openbot-space-6))
  );
  min-height: calc(var(--dynamic-island-notch-height) + var(--dynamic-island-hover-height-growth));
}

.dynamic-island[data-layout-state="expanded"] .dynamic-island-size-target {
  width: min(var(--dynamic-island-expanded-width), calc(100vw - var(--openbot-space-6)));
  padding-top: var(--dynamic-island-notch-height);
}

/* The body and two shoulders reproduce the concave top corners of a physical MacBook notch. */
.dynamic-island-silhouette {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
}

.dynamic-island-silhouette-body {
  position: absolute;
  inset: 0 var(--dynamic-island-shoulder-size);
  border-radius: 0 0 var(--dynamic-island-bottom-radius) var(--dynamic-island-bottom-radius);
  background: var(--openbot-bg-notch);
  box-shadow: inset 0 -1px 0 var(--openbot-shadow-ring);
  transition: box-shadow var(--openbot-duration-normal) var(--openbot-ease-out);
}

.dynamic-island-shoulder {
  position: absolute;
  top: 0;
  width: var(--dynamic-island-shoulder-size);
  height: var(--dynamic-island-shoulder-size);
  overflow: visible;
}

.dynamic-island-shoulder path {
  fill: var(--openbot-bg-notch);
}

.dynamic-island-shoulder-leading {
  left: 0;
}

.dynamic-island-shoulder-trailing {
  right: 0;
}

.dynamic-island-toggle {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  width: min(var(--dynamic-island-compact-width), calc(100vw - var(--openbot-space-6)));
  height: var(--dynamic-island-notch-height);
  display: grid;
  /* The ears share the width that is left: a fixed floor here pushed the trailing ear out of a
     narrow island. The width limits keep each ear wide enough for its content. The middle track
     takes the safe zone's width, so a resize can move the zone on the surface's spring. */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  border: 0;
  border-radius: inherit;
  background: transparent;
  padding: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  outline: none;
  transform: translateX(-50%);
}

.dynamic-island[data-pointer-toggle="false"] .dynamic-island-toggle {
  cursor: default;
}

.dynamic-island .dynamic-island-toggle:focus-visible {
  outline: none;
}

.dynamic-island-notch-safe-zone {
  width: var(--dynamic-island-notch-width);
  height: var(--dynamic-island-notch-height);
  pointer-events: none;
}

.dynamic-island-ear {
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  color: var(--openbot-text-secondary);
  transition: color var(--openbot-duration-normal) var(--openbot-ease-out);
}

.dynamic-island-ear-leading {
  justify-content: flex-end;
  padding-right: var(--openbot-space-2);
}

.dynamic-island-ear-trailing {
  justify-content: flex-start;
  padding-left: var(--openbot-space-2);
}

.dynamic-island:not(.dynamic-island-external):not(.dynamic-island-status) .dynamic-island-ear-leading {
  padding-right: 6px;
}

.dynamic-island-ear-content {
  position: relative;
  z-index: 3;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: center;
  transition:
    color var(--openbot-duration-normal) var(--openbot-ease-out),
    filter var(--openbot-duration-slow) var(--openbot-ease-out),
    opacity var(--openbot-duration-island-content) cubic-bezier(0.22, 1.08, 0.36, 1),
    transform var(--openbot-duration-island-content) cubic-bezier(0.22, 1.08, 0.36, 1);
}

/* The compact content blurs a little while it moves with the surface, as much as the move is large.
   The blur bridges the old and the new place, and a transition keeps it interruptible. */
.dynamic-island-shell[data-compact-resize] .dynamic-island-ear-content {
  filter: blur(calc(0.4px * var(--dynamic-island-compact-motion, 1)));
}

.dynamic-island-hover-content {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: center;
}

.dynamic-island-status .dynamic-island-hover-leading {
  width: 100%;
}

.dynamic-island-toggle:hover .dynamic-island-ear,
.dynamic-island-toggle:focus-visible .dynamic-island-ear {
  color: var(--openbot-text-primary);
}

.dynamic-island-trailing-content {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  justify-content: center;
}

.dynamic-island-trailing-compact {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    opacity var(--openbot-duration-island-content) cubic-bezier(0.22, 1.08, 0.36, 1),
    transform var(--openbot-duration-island-content) cubic-bezier(0.22, 1.08, 0.36, 1);
}

.dynamic-island-trailing-compact {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1);
}

.dynamic-island-status .dynamic-island-trailing-compact {
  right: auto;
  left: 0;
  justify-content: flex-start;
  transform-origin: left center;
}

.dynamic-island-external.dynamic-island-status .dynamic-island-trailing-compact {
  right: 0;
  left: auto;
  justify-content: flex-end;
  transform-origin: right center;
}

/* The hidden badge moves onto the end of a panel row, so it must not take a press from a row button. */
.dynamic-island[data-layout-state="expanded"] .dynamic-island-trailing-compact {
  pointer-events: none;
  opacity: 0;
  filter: none;
  transform: scale(0.92);
  transition-duration: var(--openbot-duration-island-content-exit);
  transition-timing-function: var(--dynamic-island-shared-ease);
}

.dynamic-island-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: var(--openbot-space-2) var(--openbot-space-4) var(--openbot-space-4);
}

.dynamic-island-panel[data-phase="leaving"] {
  position: absolute;
  top: var(--dynamic-island-notch-height);
  left: 50%;
  transform: translateX(-50%);
}

.dynamic-island-panel[data-phase="exiting"],
.dynamic-island-panel[data-phase="leaving"] {
  pointer-events: none;
}

.dynamic-island-panel[data-phase="leaving"] {
  width: min(var(--dynamic-island-expanded-width), calc(100vw - var(--openbot-space-6)));
}

.dynamic-island-content {
  opacity: 1;
  filter: none;
  transform: scale(1);
  transform-origin: top center;
}

/* The shell and content use separate, asymmetric springs. */
.dynamic-island[data-shared-leading="true"] .dynamic-island-ear-leading .dynamic-island-ear-content {
  opacity: 1;
  filter: none;
  transition:
    color var(--openbot-duration-normal) var(--openbot-ease-out),
    opacity var(--openbot-duration-island-content-exit) var(--dynamic-island-shared-ease);
}

.dynamic-island:not([data-shared-leading="true"])[data-layout-state="expanded"]
  .dynamic-island-ear-leading
  .dynamic-island-ear-content {
  opacity: 0;
  filter: none;
  transform: scale(0.92);
  transition-duration:
    var(--openbot-duration-normal), var(--openbot-duration-island-content-exit),
    var(--openbot-duration-island-content-exit);
  transition-timing-function:
    var(--openbot-ease-out), var(--dynamic-island-shared-ease), var(--dynamic-island-shared-ease);
}

.dynamic-island[data-layout-state="expanded"] .dynamic-island-ear-trailing .dynamic-island-ear-content {
  opacity: 1;
  filter: none;
  transform: none;
}

.dynamic-island-status .dynamic-island-trailing-compact {
  transform: scale(1);
  transition: opacity var(--openbot-duration-island-content) var(--dynamic-island-shared-ease);
}

.dynamic-island-status[data-layout-state="expanded"] .dynamic-island-trailing-compact {
  opacity: 0;
  transform: scale(1);
}

.dynamic-island-status .dynamic-island-trailing-content {
  transform-origin: left center;
}

.dynamic-island-status .dynamic-island-trailing-compact,
.dynamic-island-status .dynamic-island-hover-trailing,
.dynamic-island-status .dynamic-island-mode-swap[data-island-mode-slot="compact-trailing"] {
  width: max-content;
}

.dynamic-island-external.dynamic-island-status .dynamic-island-trailing-content {
  transform-origin: right center;
}

.dynamic-island-panel-wide {
  --dynamic-island-expanded-width: 590px;
}

.dynamic-island-idle .dynamic-island-ear-trailing {
  color: var(--openbot-text-primary);
  transition: none;
}

/* Beside a notch, the logo and the greeting keep the same inset from the outer edges. Only the
   space between them changes with the island width. */
.dynamic-island.dynamic-island-idle:not(.dynamic-island-external) .dynamic-island-ear-leading {
  justify-content: flex-start;
  padding-right: 0;
  padding-left: var(--openbot-space-4);
}

.dynamic-island.dynamic-island-idle:not(.dynamic-island-external) .dynamic-island-ear-trailing {
  justify-content: flex-end;
  padding-right: var(--openbot-space-4);
  padding-left: 0;
}

.dynamic-island-hover-zone {
  position: absolute;
  top: calc(-1 * var(--dynamic-island-hover-hit-top));
  left: 50%;
  display: none;
  /* Acquiring the island takes no more room than the island shows: an ear reads as part of the
     notch, so a wider zone would only take the menu bar beside it away from the mouse. The band
     below is `--dynamic-island-hover-hit-bottom`, which stays inside the menu bar - taller than the
     notch on every notched MacBook - rather than reaching into the window under it. The retention
     zone below is the generous one, and it only applies once the pointer is already on the
     island. */
  width: min(var(--dynamic-island-compact-width), calc(100vw - var(--openbot-space-6)));
  height: calc(
    var(--dynamic-island-notch-height) +
    var(--dynamic-island-hover-hit-top) +
    var(--dynamic-island-hover-hit-bottom)
  );
  pointer-events: auto;
  transform: translateX(-50%);
}

.dynamic-island[data-layout-state="compact"] > .dynamic-island-hover-zone {
  display: block;
}

.dynamic-island[data-layout-state="compact"][data-hovered="true"] > .dynamic-island-hover-zone {
  width: min(
    calc(
      var(--dynamic-island-compact-width) +
      var(--dynamic-island-hover-width-growth) +
      var(--dynamic-island-hover-retention-inline-growth)
    ),
    calc(100vw - var(--openbot-space-6))
  );
  height: calc(
    var(--dynamic-island-notch-height) +
    var(--dynamic-island-hover-height-growth) +
    var(--dynamic-island-hover-hit-top) +
    var(--dynamic-island-hover-retention-bottom)
  );
}

.dynamic-island-status:not(.dynamic-island-external) .dynamic-island-ear-leading {
  justify-content: flex-start;
  padding-right: 0;
  padding-left: 12px;
}

.dynamic-island-status:not(.dynamic-island-external) .dynamic-island-ear-trailing {
  justify-content: flex-end;
  padding-right: 12px;
  padding-left: 0;
}

.dynamic-island-status:not(.dynamic-island-external) .dynamic-island-trailing-compact {
  right: 0;
  left: auto;
  justify-content: flex-end;
  transform-origin: right center;
}

.dynamic-island-status:not(.dynamic-island-external) .dynamic-island-trailing-content {
  transform-origin: right center;
}

.openbot-dynamic-island[data-layout-state="expanded"] .dynamic-island-panel,
.openbot-dynamic-island .dynamic-island-panel[data-phase="exiting"],
.openbot-dynamic-island .dynamic-island-panel[data-phase="leaving"] {
  padding: 14px calc(var(--dynamic-island-expanded-shoulder-size) + 20px) 20px;
}

.dynamic-island-external.openbot-dynamic-island[data-layout-state="expanded"] .dynamic-island-panel,
.dynamic-island-external.openbot-dynamic-island .dynamic-island-panel[data-phase="exiting"],
.dynamic-island-external.openbot-dynamic-island .dynamic-island-panel[data-phase="leaving"] {
  padding: 14px 20px 20px;
}

.openbot-dynamic-island.dynamic-island-working[data-layout-state="expanded"] .dynamic-island-panel,
.openbot-dynamic-island.dynamic-island-working .dynamic-island-panel[data-phase="exiting"],
.openbot-dynamic-island.dynamic-island-working .dynamic-island-panel[data-phase="leaving"] {
  padding-bottom: 14px;
}

/* External displays use a detached capsule because there is no physical notch to join. */
.dynamic-island-external {
  --dynamic-island-notch-width: 16px;
  --dynamic-island-compact-width: 212px;
  --dynamic-island-external-inline-inset: 6px;
  padding-top: var(--dynamic-island-hover-hit-top);
}

.dynamic-island-external .dynamic-island-shoulder {
  display: none;
}

.dynamic-island-external .dynamic-island-silhouette {
  border-radius: var(--dynamic-island-external-compact-radius);
  background: var(--openbot-bg-notch);
  box-shadow: inset 0 -1px 0 var(--openbot-shadow-ring);
}

.dynamic-island-external .dynamic-island-silhouette-body {
  display: none;
}

.dynamic-island-external[data-layout-state="expanded"] .dynamic-island-silhouette {
  border-radius: var(--dynamic-island-external-expanded-radius);
}

/* Keyboard focus on the toggle draws the shared focus ring on the island outline. The shell clips
   its content, so the ring is inset: a ring outside the outline would be cut off. */
.dynamic-island-shell:has(.dynamic-island-toggle:focus-visible) .dynamic-island-silhouette-body,
.dynamic-island-external .dynamic-island-shell:has(.dynamic-island-toggle:focus-visible) .dynamic-island-silhouette {
  box-shadow:
    inset var(--openbot-focus-ring),
    inset 0 -1px 0 var(--openbot-shadow-ring);
}

.dynamic-island-external > .dynamic-island-hover-zone {
  top: 0;
}

.dynamic-island-external .dynamic-island-toggle {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-inline: var(--dynamic-island-external-inline-inset);
}

.dynamic-island-external .dynamic-island-notch-safe-zone {
  display: none;
}

.dynamic-island-external .dynamic-island-ear-leading {
  position: relative;
  left: 0;
  justify-content: flex-start;
  padding-right: 0;
}

.dynamic-island-external .dynamic-island-ear-trailing {
  justify-content: flex-end;
  padding-left: 0;
}

.dynamic-island-external.dynamic-island-panel-wide {
  --dynamic-island-expanded-width: 552px;
}

.dynamic-island-external.dynamic-island-status .dynamic-island-ear-leading {
  left: 0;
  justify-content: flex-start;
  padding-right: 0;
  padding-left: 0;
}


/* /@fs//app/packages/ui/src/features/dynamic-island/dynamic-island-surface.css */
html:has(.dynamic-island-surface),
body:has(.dynamic-island-surface),
#root:has(.dynamic-island-surface) {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
}

.dynamic-island-surface {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  background: transparent;
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
  user-select: none;
}

.openbot-dynamic-island-transition-root {
  display: contents;
}

.dynamic-island-mode-swap {
  position: relative;
  min-width: 0;
  display: inline-grid;
  align-items: center;
}

.dynamic-island-mode-swap-block {
  width: 100%;
  display: grid;
  align-items: stretch;
}

.dynamic-island-mode-layer {
  min-width: 0;
  display: inline-flex;
  grid-area: 1 / 1;
  align-items: center;
  transform-origin: center;
}

.dynamic-island-mode-swap-block > .dynamic-island-mode-layer {
  width: 100%;
  display: block;
}

.dynamic-island-mode-layer-outgoing {
  position: absolute;
  z-index: 1;
  top: 0;
  pointer-events: none;
}

.dynamic-island-mode-swap[data-island-mode-slot="compact-leading"] > .dynamic-island-mode-layer-outgoing {
  right: 0;
}

.dynamic-island-external
  .dynamic-island-mode-swap[data-island-mode-slot="compact-leading"]
  > .dynamic-island-mode-layer-outgoing {
  right: auto;
  left: 0;
}

.dynamic-island-mode-swap[data-island-mode-slot="compact-trailing"] > .dynamic-island-mode-layer-outgoing {
  left: 0;
}

.dynamic-island-external
  .dynamic-island-mode-swap[data-island-mode-slot="compact-trailing"]
  > .dynamic-island-mode-layer-outgoing {
  right: 0;
  left: auto;
}

.dynamic-island-mode-swap-block > .dynamic-island-mode-layer-outgoing {
  inset: 0;
}

.openbot-dynamic-island-transition-root[data-mode-transitioning="true"] .dynamic-island-mode-layer {
  will-change: opacity, transform;
}

.openbot-dynamic-island-transition-root[data-mode-transitioning="true"]
  .dynamic-island-mode-layer[data-island-mode-layer="incoming"] {
  opacity: 0;
  transform: none;
}

.openbot-dynamic-island-transition-root[data-mode-transitioning="true"]
  .dynamic-island-mode-swap[data-island-mode-slot="expanded"]
  > .dynamic-island-mode-layer[data-island-mode-layer="incoming"] {
  transform: scale(0.965);
}

.openbot-dynamic-island-transition-root[data-mode-transitioning="true"]
  .dynamic-island[data-layout-state="expanded"]
  .dynamic-island-mode-swap[data-island-mode-slot="compact-leading"]
  > .dynamic-island-mode-layer[data-island-mode-layer="incoming"] {
  transform: none;
}

.openbot-dynamic-island-transition-root[data-mode-transitioning="true"]
  .dynamic-island-mode-layer[data-island-mode-layer="incoming"]
  [data-island-motion-content] {
  filter: blur(4px);
}

.dynamic-island-surface-anchor {
  width: fit-content;
  height: fit-content;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
}

.dynamic-island-surface-logo {
  width: 100%;
  height: 100%;
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-xs);
  transition:
    border-radius var(--openbot-duration-slow) var(--openbot-ease-out),
    filter var(--openbot-duration-slow) var(--openbot-ease-out),
    scale var(--openbot-duration-slow) var(--openbot-ease-out);
}

/* While the island moves, the logo blurs more than the ear around it, so it reads as a shape in
   motion, gets a little smaller, and half closes its eyes. All three follow the size of the move
   (`--dynamic-island-compact-motion`, 0 to 1): a slow slider step barely changes the logo, and a
   large move changes it in full. A large move also rounds its corners a little. These are
   transitions, not a keyframe pulse, so they are interruptible and a drag keeps one steady state.
   The logo is sharp and square again as the island settles. The squint scales the eye group, not
   the eyes, so the blink keeps running. */
.dynamic-island-shell[data-compact-resize] .dynamic-island-surface-logo {
  --app-logo-eye-squint: calc(1 - 0.45 * var(--dynamic-island-compact-motion, 1));
  filter: blur(calc(0.8px * var(--dynamic-island-compact-motion, 1)));
  scale: calc(1 - 0.03 * var(--dynamic-island-compact-motion, 1));
}

.dynamic-island-shell[data-compact-motion="large"] .dynamic-island-surface-logo {
  border-radius: var(--openbot-radius-sm);
}

.dynamic-island-external.dynamic-island-idle .dynamic-island-surface-logo {
  transform: translateX(4px);
}

.dynamic-island-surface-leading-anchor {
  position: relative;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
}

/* The idle greeting is a little larger than the 14px trailing slot of a status. */
.dynamic-island-idle .dynamic-island-trailing-content {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}

.dynamic-island-surface-idle-greeting {
  position: relative;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  display: block;
  flex: 0 0 auto;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  font-size: var(--openbot-text-xl);
  line-height: 1;
  transition:
    opacity var(--openbot-duration-slow) var(--openbot-ease-out),
    scale var(--openbot-duration-slow) var(--openbot-ease-out);
}

/* While the island moves, the greeting gets a little fainter, as much as the move is large. When
   a large move lands, it pops: a short overshoot with a small tilt each way, then rest. A small move,
   such as one slow slider step, has no pop, so a slow drag stays quiet. */
.dynamic-island-shell[data-compact-resize] .dynamic-island-surface-idle-greeting {
  opacity: calc(1 - 0.1 * var(--dynamic-island-compact-motion, 1));
}

.dynamic-island-shell[data-compact-settled] .dynamic-island-surface-idle-greeting {
  animation: dynamic-island-greeting-pop 600ms var(--dynamic-island-greeting-pop-ease);
}

/* One damped spring (damping 0.5, response 0.4s, with a push), sampled, so the pop is one smooth
   overshoot to about 1.01 and back, not a curve per keyframe. The tilt rides the same spring. */
.dynamic-island-shell {
  --dynamic-island-greeting-pop-ease: linear(
    0,
    0.571 4.2%,
    1.01 8.3%,
    1.306 12.5%,
    1.467 16.7%,
    1.517 20.8%,
    1.485 25.0%,
    1.403 29.2%,
    1.297 33.3%,
    1.188 37.5%,
    1.09 41.7%,
    1.013 45.8%,
    0.96 50.0%,
    0.928 54.2%,
    0.916 58.3%,
    0.919 62.5%,
    0.931 66.7%,
    0.947 70.8%,
    0.965 75.0%,
    0.982 79.2%,
    0.995 83.3%,
    1.005 87.5%,
    1.011 91.7%,
    1.013 95.8%,
    1
  );
}

@keyframes dynamic-island-greeting-pop {
  from {
    opacity: 0.9;
    scale: 0.98;
    rotate: -1deg;
  }

  to {
    opacity: 1;
    scale: 1;
    rotate: 0deg;
  }
}

/* One greeting hands over to the next: the old one shrinks a little and blurs as it fades, and the
   new one comes out of the blur, so the two read as one change. */
.dynamic-island-surface-idle-greeting-layer {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transition:
    opacity 600ms var(--openbot-ease-in-out),
    scale 650ms var(--openbot-ease-in-out),
    filter 600ms var(--openbot-ease-in-out);
}

@media (prefers-reduced-motion: no-preference) {
  .dynamic-island-surface-idle-greeting-layer:not([data-active]) {
    scale: 0.88;
    filter: blur(2px);
  }
}

/* Mirrors the logo: its 20px box sits 10px from the left edge, this 16px box sits 6px from the right. */
.dynamic-island-external.dynamic-island-idle .dynamic-island-surface-idle-greeting-layer {
  transform: translateX(-6px);
}

.dynamic-island-surface-idle-greeting[data-active-slot="0"] .dynamic-island-surface-idle-greeting-layer:first-child,
.dynamic-island-surface-idle-greeting[data-active-slot="1"] .dynamic-island-surface-idle-greeting-layer:last-child {
  opacity: 1;
}

/* Each greeting is a small 3D card with a front and a back face. `idle-greeting-motion.ts` moves it
   once as it shows: it turns the wave, the smile and the raised hands, and lights up and twinkles
   each sparkle. Reduce motion turns the motions off, so the front face stays. */
.dynamic-island-surface-idle-greeting-layer {
  perspective: 60px;
}

.dynamic-island-surface-idle-greeting-card {
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
}

.dynamic-island-surface-idle-greeting-face {
  grid-area: 1 / 1;
  backface-visibility: hidden;
}

.dynamic-island-surface-idle-greeting-face-back {
  transform: rotateY(180deg);
}

/* Each copy of the sparkles glyph shows one star, through a star-shaped mask a little larger than the
   star. The transform origin is the star's centre, so it twinkles in place. */
.dynamic-island-surface-idle-greeting-face:has(.dynamic-island-surface-idle-greeting-sparkle) {
  display: grid;
}

.dynamic-island-surface-idle-greeting-sparkle {
  grid-area: 1 / 1;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}

.dynamic-island-surface-idle-greeting-sparkle-large {
  transform-origin: 60% 48%;
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cpath%20d='M60%207.9Q70.3%2036.0%2094.2%2048Q70.3%2060.0%2060%2088.1Q49.7%2060.0%2025.8%2048Q49.7%2036.0%2060%207.9Z'/%3E%3C/svg%3E");
}

.dynamic-island-surface-idle-greeting-sparkle-upper {
  transform-origin: 24% 28%;
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cpath%20d='M24%207.4Q28.2%2021.8%2038.2%2028Q28.2%2034.2%2024%2048.6Q19.8%2034.2%209.8%2028Q19.8%2021.8%2024%207.4Z'/%3E%3C/svg%3E");
}

.dynamic-island-surface-idle-greeting-sparkle-lower {
  transform-origin: 36% 70%;
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cpath%20d='M36%2051.1Q40.8%2064.3%2051.9%2070Q40.8%2075.7%2036%2088.9Q31.2%2075.7%2020.1%2070Q31.2%2064.3%2036%2051.1Z'/%3E%3C/svg%3E");
}

.dynamic-island-surface-avatar-stack {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.dynamic-island-surface-avatar-stack-item {
  display: inline-flex;
  flex: 0 0 auto;
}

.dynamic-island-surface-avatar-stack > :not(:first-child) {
  margin-left: -6px;
}

.dynamic-island-surface-avatar-stack > * {
  transform: translate3d(0, 0, 0);
  transform-origin: center;
  transition:
    opacity var(--openbot-duration-fast) var(--openbot-ease-out),
    transform 450ms var(--dynamic-island-shared-ease);
}

.dynamic-island-surface-avatar {
  --agent-avatar-optical-offset: -3px;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border: 1px solid var(--openbot-bg-notch);
  border-radius: var(--openbot-radius-pill);
}

.dynamic-island-surface-compact-identity {
  white-space: nowrap;
}

.dynamic-island-surface-compact-name {
  position: absolute;
  top: 50%;
  left: calc(100% + var(--openbot-space-1-5));
  width: max-content;
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-sm);
  text-align: left;
  text-overflow: ellipsis;
  transform: translateY(-50%);
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}

.dynamic-island-surface-status-badge {
  font-weight: var(--openbot-weight-semibold);
}

.dynamic-island-surface-status-badge-label {
  min-width: 0;
  display: inline-block;
  overflow: hidden;
}

.dynamic-island-surface-status-badge-icon {
  stroke-width: var(--openbot-icon-stroke);
}

.dynamic-island-surface-question-badge {
  background: var(--openbot-question-badge-soft);
  color: var(--openbot-question-badge-text);
}

.dynamic-island-surface-message-badge {
  background: var(--openbot-message-badge-soft);
  color: var(--openbot-message-badge-text);
}

.dynamic-island-surface-working-badge .ui-spinner {
  border-color: var(--openbot-success-soft);
  border-top-color: currentColor;
}

.dynamic-island[data-layout-state="expanded"] .dynamic-island-surface-compact-name {
  opacity: 0;
}

.dynamic-island-surface-leading-anchor .dynamic-island-surface-avatar {
  width: 100%;
  height: 100%;
}

.dynamic-island-surface-avatar-stack .dynamic-island-surface-avatar {
  width: 20px;
  height: 20px;
}

.dynamic-island-working[data-state="expanded"] .dynamic-island-surface-avatar-stack > * {
  transition-duration: var(--openbot-duration-fast), var(--dynamic-island-shared-duration);
}

.dynamic-island-working[data-state="expanded"] .dynamic-island-surface-avatar-stack > :nth-child(2) {
  transform: translate3d(-14px, 28.75px, 0);
}

.dynamic-island-working[data-state="expanded"] .dynamic-island-surface-avatar-stack > :nth-child(3) {
  transform: translate3d(-28px, 57.5px, 0);
}

@media (prefers-reduced-motion: reduce) {
  .dynamic-island-surface-avatar-stack > * {
    transition-duration: var(--openbot-duration-hover);
  }
}

.dynamic-island-surface-approval-badge {
  background: var(--openbot-approval-badge-soft);
  color: var(--openbot-warning);
}

.dynamic-island-surface-takeover-badge {
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
}

.dynamic-island-surface-content-swap {
  min-width: 0;
  display: flex;
}

.dynamic-island-surface-content-swap[data-swap-phase="update"] {
  animation: dynamic-island-surface-swap var(--text-swap-dur) var(--text-swap-ease) both;
}

.dynamic-island-surface-compact-swap {
  align-items: center;
}

.dynamic-island-surface-panel {
  display: grid;
  gap: 10px;
}

.dynamic-island-surface-list {
  display: grid;
  gap: 2px;
}

.dynamic-island-surface-row {
  min-width: 0;
  width: calc(100% + 2 * var(--openbot-space-2));
  height: auto;
  min-height: 44px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: var(--openbot-space-2);
  margin-inline: calc(-1 * var(--openbot-space-2));
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  color: inherit;
  cursor: pointer;
  font: inherit;
  outline: none;
  text-align: left;
  transition:
    background-color var(--openbot-duration-normal) var(--openbot-ease-out),
    transform var(--openbot-duration-normal) var(--openbot-ease-out);
}

.dynamic-island-surface-row .dynamic-island-surface-avatar,
.dynamic-island-surface-working-avatar-slot {
  width: 32px;
  height: 32px;
}

@media (hover: hover) and (pointer: fine) {
  .dynamic-island-surface-row:hover {
    background: var(--openbot-hover);
  }
}

.dynamic-island-surface-row:active {
  transform: scale(0.98);
}

.dynamic-island-surface-row:focus-visible {
  background: var(--openbot-hover);
  box-shadow:
    inset 0 0 0 1px var(--openbot-border-focus),
    0 0 0 3px var(--openbot-accent-soft);
}

.dynamic-island-surface-row-group {
  position: relative;
  min-width: 0;
}

/* The stop button sits over the end of the row, so the row keeps the place the avatars move to. */
.dynamic-island-surface-row-group:has(.dynamic-island-surface-row-stop) .dynamic-island-surface-row {
  padding-right: calc(var(--openbot-control-sm) + var(--openbot-space-2));
}

.dynamic-island-surface-row-stop {
  position: absolute;
  top: 50%;
  right: 0;
  color: var(--openbot-text-muted);
  transform: translateY(-50%);
}

@media (hover: hover) and (pointer: fine) {
  .dynamic-island-surface-row-stop:hover {
    color: var(--openbot-danger-text);
  }
}

.dynamic-island-surface-row-copy {
  min-width: 0;
  width: 100%;
  display: grid;
  gap: 1px;
}

.dynamic-island-surface-row strong {
  overflow: hidden;
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dynamic-island-surface-row small {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dynamic-island-message-first-panel {
  display: grid;
  gap: var(--openbot-space-3);
}

.dynamic-island-message-first-unread {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
  font-variant-numeric: tabular-nums;
  line-height: var(--openbot-leading-sm);
}

.dynamic-island-message-first-footer {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  border-top: 1px solid var(--openbot-border);
  padding-top: var(--openbot-space-2);
}

.dynamic-island-message-first-footer .ui-button {
  min-width: 92px;
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}

.dynamic-island-message-first-footer .ui-button:active {
  transform: scale(0.96);
}

.dynamic-island-message-first-footer svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}

.dynamic-island-surface-attention-panel {
  gap: var(--openbot-space-3);
}

.dynamic-island-reply {
  position: relative;
  min-width: 0;
  display: grid;
  gap: var(--openbot-space-1-5);
  margin: 0;
}

.dynamic-island-reply .dynamic-island-reply-input {
  height: var(--openbot-control-md);
  border-color: var(--openbot-border);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-hover);
  padding-right: calc(var(--openbot-control-md) + var(--openbot-space-1));
  padding-left: var(--openbot-space-3);
  font-size: var(--openbot-text-sm);
  user-select: text;
}

.dynamic-island-reply .dynamic-island-reply-input:focus-visible {
  border-color: var(--openbot-border-focus);
}

.dynamic-island-reply-send {
  position: absolute;
  top: calc((var(--openbot-control-md) - var(--openbot-control-xs)) / 2);
  right: calc((var(--openbot-control-md) - var(--openbot-control-xs)) / 2);
  border-radius: var(--openbot-radius-pill);
}

.dynamic-island-reply-send svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}

.dynamic-island-surface-question-step .dynamic-island-reply {
  margin-top: 6px;
}

.dynamic-island-surface-request-copy {
  min-width: 0;
  width: 100%;
  display: grid;
  gap: var(--openbot-space-2);
}

.dynamic-island-surface-command {
  min-width: 0;
  display: grid;
  gap: 3px;
  border-left: 1px solid var(--openbot-warning);
  padding: 2px 0 2px 10px;
}

.dynamic-island-surface-command-meta {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}

.dynamic-island-surface-command-meta small,
.dynamic-island-surface-command-meta span {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dynamic-island-surface-command-meta small {
  flex: 0 0 auto;
}

.dynamic-island-surface-command-meta span {
  min-width: 0;
  text-align: right;
}

.dynamic-island-surface-command code {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dynamic-island-surface-context-line {
  min-width: 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--openbot-space-2);
  align-items: baseline;
}

.dynamic-island-surface-context-line small,
.dynamic-island-surface-more {
  color: var(--openbot-text-dim);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

div.dynamic-island-surface-context-line span {
  overflow: hidden;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dynamic-island-surface-question-options {
  min-width: 0;
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dynamic-island-surface-question-options > li {
  min-width: 0;
}

.dynamic-island-surface-question-options button {
  width: 100%;
  min-height: 48px;
  min-width: 0;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: var(--openbot-space-2);
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-question-option-soft);
  padding: 7px 10px;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  outline: none;
  transition:
    background-color var(--openbot-duration-fast) var(--openbot-ease-out),
    transform var(--openbot-duration-fast) var(--openbot-ease-out);
}

.dynamic-island-surface-question-option-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.dynamic-island-surface-question-option-copy strong,
.dynamic-island-surface-question-option-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dynamic-island-surface-question-option-copy strong {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
}

.dynamic-island-surface-question-option-copy small {
  min-width: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.dynamic-island-surface-question-option-index {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-question-option-hover);
  color: var(--openbot-question-option);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

@media (hover: hover) and (pointer: fine) {
  .dynamic-island-surface-question-options button:hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-question-option-hover);
  }
}

.dynamic-island-surface-question-options button:active:not(:disabled):not([data-disabled]) {
  background: var(--openbot-question-option-pressed);
  transform: scale(0.96);
}

.dynamic-island-surface-question-options button:focus-visible {
  box-shadow:
    inset 0 0 0 1px var(--openbot-question-option),
    0 0 0 3px var(--openbot-question-option-soft);
}

.dynamic-island-surface-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-1);
  border-top: 1px solid var(--openbot-border);
  padding-top: var(--openbot-space-2);
}

.dynamic-island-surface-action-error {
  min-width: 0;
  margin: 0 auto 0 0;
  flex: 1 1 auto;
  align-self: center;
  color: var(--openbot-danger-text);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.dynamic-island-surface-actions svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}

.dynamic-island-surface-attention-panel .ui-button {
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}

.dynamic-island-surface-attention-panel .ui-button:active {
  transform: scale(0.96);
}

.dynamic-island-surface-question-panel {
  gap: 10px;
}

.dynamic-island-surface-question-progress {
  display: inline-flex;
  align-items: baseline;
  padding-top: 2px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  line-height: var(--openbot-leading-sm);
  white-space: nowrap;
}

.dynamic-island-surface-question-progress-stack {
  position: relative;
  width: 1.5em;
  display: inline-grid;
  overflow: hidden;
  text-align: right;
}

.dynamic-island-surface-question-progress-digit {
  grid-area: 1 / 1;
  display: inline-block;
  text-align: right;
  will-change: transform, opacity, filter;
}

.dynamic-island-surface-question-progress-digit.is-outgoing {
  position: absolute;
  inset: 0;
}

.dynamic-island-surface-question-step {
  width: 100%;
  min-width: 0;
}

.dynamic-island-surface-question-actions {
  align-items: center;
}

.dynamic-island-surface-question-actions .dynamic-island-surface-more {
  margin-right: auto;
}

.dynamic-island-surface-animated-row {
  animation: dynamic-island-surface-row-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}

.dynamic-island-surface-row-group:nth-child(2) .dynamic-island-surface-animated-row {
  animation-delay: 40ms;
}

.dynamic-island-surface-row-group:nth-child(3) .dynamic-island-surface-animated-row {
  animation-delay: 80ms;
}

@keyframes dynamic-island-surface-swap {
  from {
    opacity: 0;
    filter: blur(var(--text-swap-blur));
    transform: translateY(calc(var(--text-swap-translate-y) * -1)) scale(0.98);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}

@keyframes dynamic-island-surface-row-in {
  from {
    opacity: 0;
    filter: blur(var(--text-swap-blur));
    transform: translateY(var(--text-swap-translate-y)) scale(0.98);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}


/* /@fs//app/packages/ui/src/features/sidebar/sidebar-mobile-app.css */
/* The mobile app announcement at the bottom of the sidebar. It is a quiet
 * surface card rather than an accent one: an announcement is not an action. The body text and the
 * button use the full card width, so a narrow sidebar wraps the text instead of making a thin
 * column beside the icon. */
.sidebar-mobile-app {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: var(--openbot-space-2);
  margin: var(--openbot-space-2) var(--openbot-space-3);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  padding: var(--openbot-space-3);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.sidebar-mobile-app-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-2);
}

.sidebar-mobile-app-header > strong {
  overflow: hidden;
  font-weight: var(--openbot-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-mobile-app-icon {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  color: var(--openbot-text-secondary);
}

.sidebar-mobile-app-dismiss {
  margin-right: calc(var(--openbot-space-1) * -1);
  color: var(--openbot-text-muted);
}

.sidebar-mobile-app-body {
  margin: 0;
  color: var(--openbot-text-muted);
}

.sidebar-mobile-app > .ui-button {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The community invitation uses the same card. Discord takes the free width; X is an icon button. */
.sidebar-community-actions {
  display: flex;
  gap: var(--openbot-space-1-5);
}

.sidebar-community-actions > .ui-button:first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.sidebar-community-mark {
  flex: 0 0 auto;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}


/* /@fs//app/src/renderer/src/styles/base.css */
* {
  box-sizing: border-box;
}

html,
body,
#root {
  width: 100%;
  height: 100%;
  min-width: 0;
  margin: 0;
  overflow: hidden;
}

body {
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
  -webkit-font-smoothing: antialiased;
}

button,
input,
textarea {
  font: inherit;
}


/* /@fs//app/packages/ui/src/features/sidebar/sidebar-views.css */
/* The switch over the sidebar list, and the rows of the diagrams view. */

.sidebar-view-switch {
  padding: 2px 12px 6px;
}

.sidebar-view-tabs.ui-sliding-tabs {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sidebar-view-tab.ui-sliding-tabs-trigger {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-1);
  overflow: hidden;
  padding-inline: var(--openbot-space-1);
  font-size: var(--openbot-text-sm);
  white-space: nowrap;
}

.sidebar-view-tab svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: none;
}


/* /@fs//app/src/renderer/src/styles/app-shell.css */
/**
 * The one stylesheet that did not move into a feature directory, deliberately.
 *
 * Its last few hundred lines are a theme layer, not app-shell content: fourteen
 * grouped rules assign the palette to selectors from every domain at once, and
 * some of those selectors - .message-action-button,
 * .composer-button, .choice-card - are not even declared in this file. Splitting
 * the sidebar or remote-desktop rules out means either duplicating those
 * declarations into a second file, which is the one thing the shared palette
 * exists to prevent, or leaving them here while their domain's own rules move
 * past them. The second is not theoretical: .sidebar-icon-button:hover is
 * declared twice at equal specificity, once here and once in the theme block, so
 * moving the first past the second silently turns the hover background from
 * --openbot-bg-control-hover into --openbot-border. Nothing in tsc, vitest or
 * check:ui sees that.
 *
 * If you want the sidebar rules in features/sidebar/, lift the theme layer out
 * first - into its own sheet that loads last, for every domain - and the split
 * becomes mechanical. Until then this file stays whole, and
 * noDescendingSpecificity stays off for it in biome.json because its source
 * order is load-bearing.
 */

.app-frame {
  --left-header-height: 38px;
  --server-rail-width: 64px;

  position: relative;
  display: grid;
  container-type: inline-size;
  width: 100%;
  height: 100%;
  margin: 0;
  grid-template-columns: var(--left-panel-width, 280px) 0 minmax(0, 1fr);
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--openbot-bg-canvas);
  box-shadow: none;
  transition: grid-template-columns var(--panel-resize-duration, var(--openbot-duration-overlay))
    cubic-bezier(0.32, 0.72, 0, 1);
}

.app-frame-with-server-rail {
  grid-template-columns: var(--server-rail-width) var(--left-panel-width, 280px) 0 minmax(0, 1fr);
}

.app-frame-platform-darwin {
  --server-rail-width: 72px;
}

.remote-compatibility-screen {
  display: flex;
  min-width: 0;
  min-height: 0;
  grid-column: 3;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: var(--openbot-space-6);
}

.app-frame-with-server-rail .remote-compatibility-screen {
  grid-column: 4;
}

.remote-compatibility-alert,
.remote-compatibility-details {
  width: min(100%, 520px);
}

.remote-compatibility-details {
  display: grid;
  margin: 0;
}

.remote-compatibility-details > div {
  display: flex;
  justify-content: space-between;
  gap: var(--openbot-space-4);
  border-bottom: 1px solid var(--openbot-border);
  padding: var(--openbot-space-2) 0;
}

.remote-compatibility-details dt {
  color: var(--openbot-text-muted);
}

.remote-compatibility-details dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.global-search-dialog {
  position: fixed;
  z-index: calc(var(--openbot-layer-dialog) + 1);
  /* A fixed top keeps the input and filters still when the result list changes height, and clears toasts. */
  top: 112px;
  left: 50%;
  display: flex;
  width: min(640px, calc(100vw - 48px));
  max-height: calc(100dvh - 136px);
  flex-direction: column;
  overflow: hidden;
  outline: 0;
  background: var(--openbot-bg-control);
  box-shadow:
    0 0 0 1px var(--openbot-dialog-ring),
    var(--openbot-shadow-dialog);
  color: var(--openbot-text-primary);
  transform: translateX(-50%);
  transform-origin: 50% 0;
  animation: global-search-in var(--openbot-duration-normal) var(--openbot-ease-out);
}

/* The inert copy that global-search-motion.ts leaves when the search closes. */
.global-search-dialog[data-closing] {
  animation: global-search-out var(--openbot-duration-fast) var(--openbot-ease-out) both;
}

@keyframes global-search-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-4px) scale(0.98);
  }
}

@keyframes global-search-out {
  to {
    opacity: 0;
    transform: translateX(-50%) scale(0.98);
  }
}

.global-search-control {
  display: flex;
  height: 48px;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--openbot-space-2);
  border-bottom: 1px solid var(--openbot-border);
  padding: 0 var(--openbot-space-2) 0 var(--openbot-space-4);
  color: var(--openbot-text-muted);
}

.global-search-control > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}

.global-search-control .global-search-input {
  min-width: 0;
  height: 100%;
  flex: 1;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}

.global-search-control .global-search-input:focus {
  border: 0;
  outline: 0;
  box-shadow: none;
}

.global-search-control .global-search-input::placeholder {
  color: var(--openbot-text-muted);
}

.global-search-filters {
  flex: 0 0 auto;
}

.global-search-filters [role="tablist"] {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--openbot-space-0-5);
}

.global-search-filters [role="tab"] {
  position: relative;
  z-index: 1;
  height: var(--openbot-control-xs);
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  padding: 0 var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-family: inherit;
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
  transition: color var(--openbot-duration-normal) var(--openbot-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .global-search-filters [role="tab"]:hover {
    color: var(--openbot-text-secondary);
  }
}

.global-search-filters [role="tab"][data-selected] {
  color: var(--openbot-text-primary);
}

/* Kobalte places the pill under the selected filter; it slides when the filter changes. */
.global-search-filter-pill {
  position: absolute;
  top: 0;
  left: 0;
  height: var(--openbot-control-xs);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-control-active);
  pointer-events: none;
  transition:
    transform var(--openbot-duration-normal) var(--openbot-ease-out),
    width var(--openbot-duration-normal) var(--openbot-ease-out);
}

.global-search-filter-pill:is([data-initializing], [data-resizing]) {
  transition: none;
}

.global-search-filters [role="tab"]:focus-visible {
  outline: 0;
  box-shadow: var(--openbot-focus-ring);
}

.global-search-results {
  position: relative;
  inset: auto;
  width: 100%;
  max-height: min(400px, calc(100dvh - 240px));
  overflow-y: auto;
  background: transparent;
  padding: var(--openbot-space-1-5);
  transform: none;
  scrollbar-width: none;
  /* A key press scrolls the active row clear of the scroll fade. */
  scroll-padding-block: var(--openbot-space-4);
  /* global-search-motion.ts sets the height from the content, so the dialog resizes smoothly. */
  transition: height var(--openbot-duration-normal) var(--openbot-ease-out);
}

.global-search-results[data-instant] {
  transition: none;
}

.global-search-dialog [data-popper-positioner] {
  /* biome-ignore lint/complexity/noImportantStyles: Kobalte's positioner uses an inline declaration. */
  position: relative !important;
  /* biome-ignore lint/complexity/noImportantStyles: Kobalte's positioner uses inline coordinates. */
  inset: auto !important;
  /* biome-ignore lint/complexity/noImportantStyles: Kobalte's positioner uses an inline anchor width. */
  width: 100% !important;
  /* biome-ignore lint/complexity/noImportantStyles: Kobalte's positioner uses an inline minimum width. */
  min-width: 0 !important;
  /* biome-ignore lint/complexity/noImportantStyles: Kobalte's positioner uses an inline popper transform. */
  transform: none !important;
}

.global-search-results::-webkit-scrollbar {
  display: none;
}

/* A virtual list: a spacer gives the listbox its full height, and each rendered row has its place. */
.global-search-results [role="listbox"] {
  position: relative;
  outline: 0;
}

.global-search-results [role="listbox"] > [data-index] {
  position: absolute;
  right: 0;
  left: 0;
}

.global-search-section {
  display: flex;
  height: var(--openbot-control-sm);
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 var(--openbot-space-2) var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
}

/* Height, not a margin: the virtual list measures the row box. */
.global-search-section[data-spaced] {
  height: calc(var(--openbot-control-sm) + var(--openbot-space-1-5));
}

.global-search-section-count {
  font-variant-numeric: tabular-nums;
}

/* One highlight slides under the active row. global-search-motion.ts gives its place and height. */
.global-search-highlight {
  position: absolute;
  top: 0;
  right: var(--openbot-space-1-5);
  left: var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-control-active);
  pointer-events: none;
  transition:
    transform var(--openbot-duration-fast) var(--openbot-ease-out),
    height var(--openbot-duration-fast) var(--openbot-ease-out);
}

.global-search-highlight[data-instant] {
  transition: none;
}

.global-search-result {
  display: flex;
  min-height: var(--openbot-control-lg);
  align-items: center;
  gap: var(--openbot-space-2);
  border-radius: var(--openbot-radius-sm);
  padding: 0 var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  cursor: default;
  outline: 0;
}

.global-search-avatar.agent-avatar {
  --agent-avatar-optical-offset: -1px;

  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  flex: 0 0 auto;
}

/* Rows with no agent (channels, files, commands) show an icon in the same slot as the avatar. */
.global-search-icon {
  display: grid;
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  flex: 0 0 auto;
  place-items: center;
  color: var(--openbot-text-muted);
}

.global-search-icon > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: var(--openbot-icon-stroke);
}

.global-search-result-title,
.global-search-result-detail {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.global-search-result-title {
  max-width: 40%;
  flex: 0 1 auto;
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}

.global-search-result-detail {
  flex: 1;
  color: var(--openbot-text-muted);
}

.global-search-result-author {
  flex: 0 0 auto;
  color: var(--openbot-text-secondary);
}

.global-search-result-time {
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}

.global-search-match {
  background: transparent;
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}

/* Every row keeps the space of the hint, so the time does not move when the highlight moves. */
.global-search-result .global-search-result-enter {
  flex: 0 0 auto;
  border: 0;
  background: var(--openbot-bg-control-hover);
  opacity: 0;
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}

.global-search-result[data-highlighted] .global-search-result-enter,
.global-search-results
  [role="listbox"]:not(:has(.global-search-result[data-highlighted]))
  .global-search-result[data-first]
  .global-search-result-enter {
  opacity: 1;
}

.global-search-status,
.global-search-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}

/* A fast search ends before the delay, so the spinner does not flash. */
.global-search-status {
  min-height: var(--openbot-control-lg);
  animation: global-search-fade-in var(--openbot-duration-normal) var(--openbot-ease-out) var(--openbot-duration-fast)
    both;
}

.global-search-empty,
.global-search-results:not(:has(.global-search-result)) .global-search-status {
  /* With no rows, "Searching…" and "No results" have one height, so the dialog does not jump. */
  min-height: 96px;
}

.global-search-empty {
  animation: global-search-fade-in var(--openbot-duration-normal) var(--openbot-ease-out) both;
}

@keyframes global-search-fade-in {
  from {
    opacity: 0;
  }
}

.global-search-footer {
  display: flex;
  height: var(--openbot-control-lg);
  flex: 0 0 auto;
  align-items: center;
  gap: var(--openbot-space-4);
  border-top: 1px solid var(--openbot-border);
  padding: 0 var(--openbot-space-4);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.global-search-hint {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  white-space: nowrap;
}

.global-search-hint .ui-kbd {
  border: 0;
  background: var(--openbot-bg-control-active);
}

/* Key glyphs such as ↑ and ⌘ render small in most fonts, so keys show icons and the text keys use
   the interface font. Both then have the same visual size. */
.global-search-footer .ui-kbd,
.global-search-result .global-search-result-enter {
  font-family: var(--openbot-font-sans);
  font-weight: var(--openbot-weight-medium);
}

.global-search-footer .ui-kbd > svg,
.global-search-result .global-search-result-enter > svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  /* At 12px the usual stroke draws under 1px, which is fainter than the key text beside it. */
  stroke-width: calc(var(--openbot-icon-stroke) * 4 / 3);
}

.global-search-hint .ui-kbd + .ui-kbd {
  margin-left: calc(var(--openbot-space-0-5) * -1);
}

@media (max-width: 640px) {
  .global-search-dialog {
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 124px);
  }

  /* The filters go to their own row, so the input keeps the full width. */
  .global-search-control {
    height: auto;
    flex-wrap: wrap;
    row-gap: 0;
  }

  .global-search-control .global-search-input {
    height: 48px;
  }

  .global-search-filters {
    min-width: 0;
    flex-basis: 100%;
    overflow-x: auto;
    padding-block: var(--openbot-space-1) var(--openbot-space-2);
    scrollbar-width: none;
  }

  .global-search-footer,
  .global-search-result .global-search-result-enter {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .global-search-dialog,
  .global-search-empty {
    animation: none;
  }

  /* Keep the delay: a fast search still shows no status. */
  .global-search-status {
    animation-duration: 0s;
  }

  .global-search-filter-pill,
  .global-search-highlight,
  .global-search-results {
    transition: none;
  }
}

.server-rail {
  --server-rail-inline-padding: 7px;

  position: relative;
  z-index: 45;
  display: flex;
  min-width: var(--server-rail-width);
  flex-direction: column;
  justify-content: space-between;
  padding: 42px var(--server-rail-inline-padding) calc(9px + 52px);
  background: var(--openbot-bg-sidebar);
  -webkit-app-region: drag;
}

.server-rail::before {
  position: absolute;
  top: calc(var(--left-header-height) - 1px);
  right: 0;
  left: 0;
  height: 1px;
  background: var(--openbot-border);
  content: "";
  pointer-events: none;
}

.server-rail::after {
  position: absolute;
  top: var(--left-header-height);
  right: 0;
  bottom: 0;
  width: clamp(0.5px, 0.05123cqw, 1px);
  background: var(--openbot-border);
  content: "";
  pointer-events: none;
}

.server-rail-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.server-rail-list {
  box-sizing: border-box;
  width: calc(100% + var(--server-rail-inline-padding) + var(--server-rail-inline-padding));
  min-height: 0;
  flex: 1 1 auto;
  margin-inline: calc(-1 * var(--server-rail-inline-padding));
  padding-inline: var(--server-rail-inline-padding);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.server-rail-list::-webkit-scrollbar {
  display: none;
}

.server-rail-tooltip-trigger {
  display: flex;
}

.server-rail-remote-list {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.server-rail-server-item {
  --server-rail-drag-step: 0;

  position: relative;
  display: flex;
  width: 100%;
  justify-content: center;
  opacity: 1;
  transform: translate3d(0, calc(var(--server-rail-drag-step) * 54px), 0);
  transition:
    transform var(--openbot-duration-normal) var(--openbot-ease-out),
    opacity var(--openbot-duration-normal) var(--openbot-ease-out);
}

.server-rail-server-item .server-rail-button {
  cursor: grab;
}

.server-rail-server-item-dragging {
  z-index: 1;
  opacity: 0.55;
}

.server-rail-drag-preview {
  position: fixed;
  z-index: var(--openbot-layer-dropdown);
  box-sizing: border-box;
  margin: 0;
  list-style: none;
  opacity: 0.96;
  pointer-events: none;
  transform: none;
  transition: none;
}

.server-rail-server-item-dragging .server-rail-button,
.server-rail-remote-list[data-dragging] {
  cursor: grabbing;
}

.server-rail-remote-list[data-dragging] .server-rail-server-item {
  will-change: transform;
}

.server-rail-button {
  position: relative;
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  place-items: center;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--openbot-text-secondary);
  cursor: pointer;
  -webkit-app-region: no-drag;
}

@media (hover: hover) and (pointer: fine) {
  .ui-button.server-rail-button.ui-button-variant-outline:hover:not(:disabled) {
    background: transparent;
    color: var(--openbot-text-secondary);
  }
}

.server-rail-monogram {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: 740;
  letter-spacing: -0.02em;
}

.server-rail-logo {
  width: 40px;
  height: 40px;
  display: block;
  border-radius: var(--openbot-radius-lg);
  object-fit: cover;
  outline: 1px solid var(--openbot-image-outline);
  outline-offset: -1px;
}

.server-rail-mark {
  position: absolute;
  top: 50%;
  left: -7px;
  width: 3px;
  height: 0;
  border-radius: 0 var(--openbot-radius-xs) var(--openbot-radius-xs) 0;
  background: var(--openbot-text-primary);
  opacity: 0;
  transform: translateY(-50%);
  transition:
    height var(--openbot-duration-hover) var(--openbot-ease-out),
    opacity var(--openbot-duration-hover) ease;
}

.server-rail-button[aria-pressed="true"] .server-rail-mark {
  height: 26px;
  opacity: 1;
}

.server-rail-button[aria-pressed="false"]:hover .server-rail-mark {
  height: 12px;
  opacity: 1;
}

.server-rail-action .server-rail-monogram {
  border-style: dashed;
  background: transparent;
  color: var(--openbot-accent-text);
  font-size: var(--openbot-text-2xl);
  font-weight: 400;
}

.server-rail-action svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--openbot-icon-stroke);
}

.server-rail-tooltip {
  z-index: var(--openbot-layer-tooltip);
  max-width: min(240px, calc(100vw - 16px));
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-surface-raised);
  box-shadow: var(--openbot-shadow-raised);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-md);
  overflow-wrap: anywhere;
  pointer-events: none;
}

.server-rail-tooltip::before {
  position: absolute;
  top: 50%;
  left: -6px;
  width: 6px;
  height: 12px;
  background: var(--openbot-bg-surface-raised);
  clip-path: polygon(100% 0, 100% 100%, 0 50%);
  content: "";
  transform: translateY(-50%);
}

@media (max-width: 800px) {
  .app-frame-with-server-rail {
    --server-rail-width: 56px;
  }
  .app-frame-platform-darwin {
    --server-rail-width: 72px;
  }
  .server-rail {
    --server-rail-inline-padding: 5px;
  }
}

.panel-resizer {
  position: relative;
  z-index: 40;
  display: flex;
  width: 16px;
  height: 100%;
  align-items: center;
  justify-content: center;
  margin: 0;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: col-resize;
  touch-action: none;
  transform: translateX(-50%);
  user-select: none;
  -webkit-app-region: no-drag;
}

.panel-resizer::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  pointer-events: none;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--openbot-text-dim) 50%, transparent);
  content: "";
  opacity: 0;
  transform: translateX(-50%);
}

.panel-resizer:hover::after,
.panel-resizer:focus-visible::after,
.panel-resizer-active::after {
  opacity: 1;
}

.panel-resizer:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 1px var(--openbot-border-strong);
}

html.panel-resizing {
  --panel-resize-duration: 0ms;

  cursor: col-resize;
  user-select: none;
}

.right-panel-resizer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  height: auto;
}

.app-frame > * {
  min-height: 0;
}

.panel-edge {
  border-right: clamp(0.5px, 0.05123cqw, 1px) solid var(--openbot-border);
}

.window-drag {
  -webkit-app-region: drag;
}

.no-drag,
button,
input,
textarea {
  -webkit-app-region: no-drag;
}

.sidebar {
  display: flex;
  min-width: 0;
  overflow: hidden;
  flex-direction: column;
  background: var(--openbot-bg-sidebar);
  color: var(--openbot-text-primary);
  container-type: inline-size;
}

.sidebar-topbar {
  display: flex;
  height: var(--left-header-height);
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  border-bottom: 1px solid var(--openbot-border);
  padding: 2px 3px 0 10px;
}

/* The frame edge. The top row of the sidebar, the chat and the side panel has no line of its own: the
 * window card in `window.css` draws the lines, the surfaces and the rounded corners. The theme layer at
 * the end of this file also sets the server rail background, so the selector carries the frame class
 * to win. */
@media (min-width: 721px) {
  .app-frame-edge > .server-rail {
    background: var(--openbot-bg-native-sidebar);
  }

  .app-frame-edge > .server-rail::before,
  .app-frame-edge > .server-rail::after {
    content: none;
  }

  .app-frame-edge > .sidebar {
    position: relative;
    isolation: isolate;
    border-right: 0;
  }

  .app-frame-edge > .sidebar::before {
    position: absolute;
    z-index: -1;
    content: "";
    pointer-events: none;
  }

  .app-frame-edge .sidebar-topbar {
    border-bottom: 0;
  }

  /* The search sits as far below the panel's top line as it sits in from the side line, which
   * keeps its corner clear of the panel's rounded one. */
  .app-frame-edge .sidebar-search-wrap {
    padding-top: 11px;
  }

  .app-frame-edge .sidebar-compact-search {
    top: 11px;
  }

  .app-frame-edge .conversation-panel,
  .app-frame-edge .direct-conversation {
    isolation: isolate;
  }

  /* The window card draws the top line. */
  .app-frame-edge .conversation-header,
  .app-frame-edge .first-agent-setup-header {
    border-bottom: 0;
    background: transparent;
  }

  /* The routine canvas is in the same card under the same top row. Its board paints its own background. */
  .app-frame-edge .diagram-view-header {
    border-bottom: 0;
    background: transparent;
  }

  .app-frame-edge .diagram-view-body {
    overflow: hidden;
    background: var(--openbot-bg-canvas);
  }

  /* An open panel's toggle. The faint fill it has elsewhere disappears on the edge, so it takes the
   * ghost button's open fill. An agent at the controls keeps its accent. The side panel toggle has no
   * fill: the panel shows next to it. */
  .app-frame-edge .header-panel-toggle[aria-expanded="true"]:not(.computer-button-agent-active, .side-panel-toggle) {
    border-color: var(--openbot-border-strong);
    background: var(--openbot-bg-control-hover);
    color: var(--openbot-text-primary);
  }

  /* A direct conversation's header is taller on its own, so its line would miss the panel's. */
  .app-frame-edge .direct-conversation-header {
    height: var(--left-header-height);
    border-bottom: 0;
    background: transparent;
  }

  .app-frame-edge .direct-conversation-person .person-avatar {
    width: 26px;
    height: 26px;
  }

  /* The compatibility screen has no header, so it paints the top row and its line itself. */
  .app-frame-edge .remote-compatibility-screen {
    background:
      linear-gradient(var(--openbot-border-strong), var(--openbot-border-strong)) 0
      calc(var(--left-header-height) - 1px) / 100% 1px no-repeat,
      linear-gradient(var(--openbot-bg-native-sidebar), var(--openbot-bg-native-sidebar)) 0 0 / 100%
      var(--left-header-height) no-repeat;
  }

  /* A side panel is the right part of the window card. Its pseudo-element is the line to the chat. */
  .app-frame-edge .settings-panel,
  .app-frame-edge .browser-panel {
    isolation: isolate;
  }

  .app-frame-edge .settings-panel::before,
  .app-frame-edge .browser-panel::before {
    position: absolute;
    z-index: -1;
    content: "";
    pointer-events: none;
  }

  /* A side panel's header continues the top row at the chat header's height, so the lines meet. The
   * window card draws the line. */
  .app-frame-edge .settings-panel-header,
  .app-frame-edge .file-preview-header,
  .app-frame-edge .browser-preview-header {
    height: var(--left-header-height);
    border-bottom: 0;
    background: transparent;
  }
}

.sidebar-server-name {
  min-width: 0;
  max-width: 100%;
  height: var(--openbot-control-sm);
  overflow: hidden;
  flex: 0 1 auto;
  justify-content: flex-start;
  gap: var(--openbot-space-1-5);
  margin-right: auto;
  border-radius: var(--openbot-radius-pill);
  padding: 0 var(--openbot-space-2) 0 var(--openbot-space-1);
  color: var(--openbot-text-primary);
  cursor: pointer;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-md);
  opacity: 1;
  text-align: left;
  transition:
    background-color var(--openbot-duration-hover) ease,
    border-color var(--openbot-duration-hover) ease,
    color var(--openbot-duration-hover) ease,
    box-shadow var(--openbot-duration-hover) ease,
    opacity var(--openbot-duration-fast) ease;
}

.sidebar-server-name[aria-expanded="true"] {
  background: var(--ui-menu-item-hover);
}

.sidebar-server-name > .sidebar-server-name-mark {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
}

/* The logo of a newly selected server springs in. */
.sidebar-server-name-mark[data-entering] {
  animation: sidebar-server-mark-in 420ms cubic-bezier(0.34, 1.36, 0.64, 1) both;
}

/* No overflow clip here: the old name blurs out past the box. The name itself ends in an ellipsis. */
.sidebar-server-name-label {
  min-width: 0;
  flex: 0 1 auto;
  white-space: nowrap;
}

.sidebar-server-name-label > span:not(.ui-swap-leaving) {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-server-name > .sidebar-server-name-chevron {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
}

/* A hosted server that sleeps because nobody used it, or that wakes. The view stays usable. */
.sidebar-server-name > .sidebar-server-name-sleep {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
}

.sidebar-server-name > .sidebar-server-name-sleep[data-state="waking"] {
  color: var(--openbot-accent);
  animation: server-sleep-waking 1200ms ease-in-out infinite;
}

@keyframes sidebar-server-mark-in {
  from {
    opacity: 0;
    scale: 0.6;
    filter: blur(2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar-server-name-mark[data-entering] {
    animation: none;
  }
}

/* The server menu view has no rail, so the server name moves right of the macOS traffic lights. The web
 * frame uses the macOS geometry but has no traffic lights, so these rules skip it. */
.app-frame-platform-darwin:not(.app-frame-with-server-rail, .web-app-frame) .sidebar-topbar {
  padding-left: 78px;
}

/* A compact sidebar is too narrow for the traffic lights and the expand button in one row, and the
 * menu view has no rail to hold the traffic lights. The button moves to its own row under them, over
 * the search button. */
.app-frame-platform-darwin:not(.app-frame-with-server-rail, .web-app-frame) .sidebar-compact .sidebar-topbar {
  height: calc(var(--left-header-height) + 36px);
  align-items: flex-end;
  justify-content: center;
  padding: 0 0 2px;
}

.app-frame-platform-darwin:not(.app-frame-with-server-rail, .web-app-frame) .sidebar-compact .sidebar-server-name,
.app-frame-platform-darwin:not(.app-frame-with-server-rail, .web-app-frame) .sidebar-compact .sidebar-new-button {
  display: none;
}

.app-frame-platform-darwin:not(.app-frame-with-server-rail, .web-app-frame) .sidebar-compact .sidebar-toggle-button {
  transform: none;
}

.app-frame-platform-darwin:not(.app-frame-with-server-rail, .web-app-frame)
  .sidebar-compact
  .sidebar-toggle-button:active {
  transform: scale(0.96);
}

.server-menu {
  min-width: 240px;
  max-width: 300px;
  max-height: min(520px, calc(100dvh - 16px), var(--kb-popper-content-available-height, 520px));
  overflow-y: auto;
}

.server-menu-row {
  gap: var(--openbot-space-2);
}

.server-menu-mark {
  position: relative;
  display: grid;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  overflow: hidden;
  place-items: center;
  border-radius: var(--openbot-radius-pill);
}

.server-menu-mark::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--openbot-text-primary) 12%, transparent);
  content: "";
}

.server-menu-mark > * {
  width: 100%;
  height: 100%;
}

.server-menu-name {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.server-menu-muted {
  flex: 0 0 auto;
  color: var(--openbot-text-secondary);
}

.server-menu-sleep {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-muted);
}

.server-menu-sleep[data-state="waking"] {
  background: var(--openbot-accent);
  animation: server-sleep-waking 1200ms ease-in-out infinite;
}

.server-menu .server-menu-layout-chevron {
  margin-left: 0;
}

/* The add item: a dashed circle that fills in on the highlighted row, with the plus cut out of it. */
.ui-action-menu .server-menu-add {
  color: var(--openbot-text-secondary);
}

.ui-action-menu .server-menu-add:is(:hover, [data-highlighted]) {
  color: var(--openbot-text-primary);
}

.server-menu-add-circle {
  display: grid;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  place-items: center;
  border: 1px dashed color-mix(in srgb, var(--openbot-text-primary) 30%, transparent);
  border-radius: var(--openbot-radius-pill);
}

.ui-action-menu .server-menu-add-circle > svg {
  width: var(--ui-menu-inset);
  height: var(--ui-menu-inset);
  stroke-width: 2.5;
}

.ui-action-menu .server-menu-add:is(:hover, [data-highlighted]) .server-menu-add-circle {
  border-color: transparent;
  background: var(--openbot-text-primary);
}

.ui-action-menu .server-menu-add:is(:hover, [data-highlighted]) .server-menu-add-circle > svg {
  color: var(--ui-menu-bg);
}

.sidebar-topbar-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 3px;
}

.sidebar-icon-button {
  position: relative;
  z-index: 2;
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  color: var(--openbot-text-muted);
  pointer-events: auto;
  cursor: pointer;
  -webkit-app-region: no-drag;
  transition:
    background-color var(--openbot-duration-hover) ease,
    color var(--openbot-duration-hover) ease,
    opacity var(--openbot-duration-normal) ease,
    transform var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1);
}

.sidebar-icon-button:hover {
  background: var(--openbot-border);
  color: var(--openbot-text-primary);
}

.sidebar-icon-button:active {
  transform: scale(0.96);
}

.sidebar-icon-button:focus-visible {
  outline: 1px solid var(--openbot-text-muted);
  outline-offset: 1px;
}

.header-panel-toggle {
  position: relative;
  z-index: 2;
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  color: var(--openbot-text-muted);
  pointer-events: auto;
  cursor: pointer;
  -webkit-app-region: no-drag;
  transition:
    border-color var(--openbot-duration-hover) ease,
    background-color var(--openbot-duration-hover) ease,
    box-shadow var(--openbot-duration-hover) ease,
    color var(--openbot-duration-hover) ease,
    transform var(--openbot-duration-fast) cubic-bezier(0.23, 1, 0.32, 1);
}

.header-panel-toggle:hover {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-hover);
  color: var(--openbot-text-primary);
}

.header-panel-toggle:active {
  transform: scale(0.92);
  transition-duration: var(--openbot-duration-fast);
}

.header-panel-toggle:focus-visible {
  outline: 1px solid var(--openbot-text-muted);
  outline-offset: 1px;
}

.sidebar-toggle-icon {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sidebar-marketplace-button > svg {
  width: 18px;
  height: 18px;
  stroke-width: var(--openbot-icon-stroke);
}

.sidebar-update-button,
.sidebar-update-button:hover {
  color: var(--openbot-accent-text);
}

.sidebar-update-button > svg {
  width: 18px;
  height: 18px;
  stroke-width: var(--openbot-icon-stroke);
}

.sidebar-search-wrap {
  position: relative;
  padding: 8px 12px 6px;
}

/* The field opens the global search, so it is a button drawn as the search field. */
.sidebar-search-trigger {
  width: 100%;
  justify-content: flex-start;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-regular);
  line-height: 18px;
  cursor: pointer;
}

.sidebar-search-trigger:hover:not(:disabled) {
  border-color: var(--openbot-text-dim);
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-dim);
}

.sidebar-search-placeholder {
  color: var(--openbot-text-muted);
}

.sidebar-compact-search {
  position: absolute;
  inset: 8px 12px 6px;
  display: grid;
  height: 32px;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  color: var(--openbot-text-muted);
  opacity: 0;
  pointer-events: none;
  transform: translateX(6px) scale(0.96);
  cursor: pointer;
  transition:
    background-color var(--openbot-duration-hover) ease,
    color var(--openbot-duration-hover) ease,
    opacity var(--openbot-duration-fast) ease,
    transform var(--openbot-duration-slow) cubic-bezier(0.32, 0.72, 0, 1);
}

.sidebar-compact-search:hover {
  background: var(--openbot-hover);
  color: var(--openbot-text-primary);
}

.sidebar-compact-search:active {
  transform: scale(0.96);
}

.search-field {
  display: flex;
  height: 32px;
  align-items: center;
  gap: 8px;
  border: 0.5px solid var(--openbot-border);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-hover);
  padding: 0 9px;
  color: var(--openbot-text-dim);
  opacity: 1;
  transform: translateX(0);
  transition:
    border-color var(--openbot-duration-hover) ease,
    background-color var(--openbot-duration-hover) ease,
    box-shadow var(--openbot-duration-hover) ease,
    opacity var(--openbot-duration-fast) ease,
    transform var(--openbot-duration-slow) cubic-bezier(0.32, 0.72, 0, 1);
}

.search-field:focus-within {
  border-color: var(--openbot-text-dim);
  background: var(--openbot-bg-surface);
}

.search-field:has(input:focus-visible) {
  box-shadow: var(--openbot-focus-ring);
}

.search-field input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: 18px;
}

.search-field input::placeholder {
  color: var(--openbot-text-muted);
}

.agent-list {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 4px 12px 0;
  scrollbar-width: none;
}

.agent-list::-webkit-scrollbar {
  display: none;
}

.agent-list-content {
  position: relative;
}

.sidebar-list-context-trigger {
  min-height: 76px;
  flex: 1 0 76px;
}

.sidebar-chat-group + .sidebar-chat-group {
  margin-top: 6px;
  transition: margin-top var(--panel-resize-duration, var(--openbot-duration-overlay)) cubic-bezier(0.32, 0.72, 0, 1);
}

/**
 * The one drag offset transport. Every row that a drag pushes out of the way - a section, an agent,
 * a person, a pinned tile - writes this pair inline and translates by it, so there is one name to
 * grep and one computation behind it.
 *
 * The reset below is not cosmetic. Custom properties inherit, and agent and person rows sit inside
 * a section that can be shifting itself; without a declaration of their own they would inherit its
 * offset and move twice. Each row's inline style still wins over this reset.
 */
.sidebar-section,
.sidebar-agent-item,
.sidebar-person-item,
.sidebar-pinned-item {
  --sidebar-drag-x: 0px;
  --sidebar-drag-y: 0px;
}

/** Only the rows actually in motion get a layer; the shifting class is toggled per offset. */
.sidebar-drag-shifting {
  will-change: transform;
}

.sidebar-section {
  position: relative;
  border-radius: var(--openbot-radius-md);
  opacity: 1;
  transform: translate3d(var(--sidebar-drag-x), var(--sidebar-drag-y), 0);
  transition-property: background-color, box-shadow, opacity, transform;
  transition-duration: var(--openbot-duration-fast);
  transition-timing-function: ease-out;
}

.sidebar-section-agent-drop-target {
  background: var(--openbot-accent-soft);
  box-shadow: inset 0 0 0 1px var(--openbot-accent-strong);
}

.sidebar-section-drop-before::before,
.sidebar-section-drop-after::after {
  position: absolute;
  z-index: 3;
  right: 7px;
  left: 7px;
  height: 2px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent-text);
  box-shadow: 0 0 0 1px var(--openbot-bg-sidebar);
  content: "";
  pointer-events: none;
}

.sidebar-section-drop-before::before {
  top: -4px;
}

.sidebar-section-drop-after::after {
  bottom: -4px;
}

/* The dragged header keeps pointer events: Chromium ends a native drag at once when its source
 * stops taking them. */
.sidebar-section-dragging {
  opacity: 0;
  transition: none;
}

.sidebar-section-dragging {
  will-change: transform;
}

.sidebar-section-dragging * {
  animation-play-state: paused;
}

.sidebar-chat-group > header {
  display: flex;
  height: 32px;
  overflow: hidden;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  opacity: 1;
  transform: translateY(0);
  transition:
    height var(--panel-resize-duration, var(--openbot-duration-overlay)) cubic-bezier(0.32, 0.72, 0, 1),
    opacity var(--openbot-duration-fast) ease,
    transform var(--openbot-duration-slow) cubic-bezier(0.32, 0.72, 0, 1);
}

.sidebar-section-drag-handle,
.sidebar-agent-item .agent-row,
.sidebar-person-item .person-row {
  cursor: grab;
  touch-action: pan-y;
}

.agent-list[data-sidebar-dragging],
.agent-list[data-sidebar-dragging] .sidebar-section-drag-handle,
.agent-list[data-sidebar-dragging] .sidebar-section-toggle,
.agent-list[data-sidebar-dragging] .agent-row,
.agent-list[data-sidebar-dragging] .person-row {
  cursor: grabbing;
}

.agent-list[data-sidebar-dragging="chat"] .sidebar-section-toggle,
.agent-list[data-sidebar-dragging="person"] .sidebar-section-toggle {
  pointer-events: none;
}

.agent-list[data-sidebar-dragging] .sidebar-section-toggle:hover,
.agent-list[data-sidebar-dragging] .sidebar-section-toggle:focus-visible {
  background: transparent;
  color: var(--openbot-text-readable);
}

.agent-list[data-sidebar-dragging] .sidebar-section-toggle:hover .sidebar-section-chevron,
.agent-list[data-sidebar-dragging] .sidebar-section-toggle:focus-visible .sidebar-section-chevron {
  opacity: 0;
}

.sidebar-section-toggle {
  display: flex;
  width: 100%;
  min-width: 0;
  height: 32px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-radius: var(--openbot-radius-md);
  padding: 0 7px;
  background: transparent;
  color: var(--openbot-text-readable);
  transition-property: color;
  transition-duration: var(--openbot-duration-hover);
  transition-timing-function: ease-out;
}

.sidebar-section-toggle:hover,
.sidebar-section-toggle:focus-visible {
  background: transparent;
  color: var(--openbot-text-secondary);
}

.sidebar-section-toggle[aria-expanded="true"] {
  background: transparent;
}

.sidebar-section-toggle:active {
  scale: 0.96;
}

.sidebar-section-name {
  min-width: 0;
  overflow: hidden;
  font-size: var(--openbot-text-sm);
  font-weight: 400;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-section-chevron {
  flex: 0 0 auto;
  opacity: 0;
  transform: rotate(0deg);
  transition:
    opacity var(--openbot-duration-hover) ease-out,
    transform var(--openbot-duration-fast) var(--openbot-ease-out);
}

.sidebar-section-toggle:hover .sidebar-section-chevron,
.sidebar-section-toggle:focus-visible .sidebar-section-chevron {
  opacity: 1;
}

.sidebar-section-chevron-collapsed {
  transform: rotate(-90deg);
}

.sidebar-section-collapse {
  display: grid;
  opacity: 1;
  grid-template-rows: 1fr;
  transition-property: grid-template-rows, opacity;
  transition-duration: var(--openbot-duration-normal), var(--openbot-duration-fast);
  transition-timing-function: var(--openbot-ease-out), ease-out;
}

.sidebar-section-collapse[data-collapsed] {
  opacity: 0;
  grid-template-rows: 0fr;
}

.sidebar-section-body {
  min-height: 0;
  overflow: hidden;
}

.sidebar-section-editor-wrap {
  position: relative;
  width: 100%;
}

/* "Needs you" is not a section, so its heading is plain text with a count, and a rule ends it. */
.sidebar-waiting-group {
  border-bottom: 1px solid var(--openbot-border);
  padding-bottom: var(--openbot-space-2);
}

.sidebar-waiting-group-name {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
  margin: 0;
  padding: 0 7px;
  color: var(--openbot-text-readable);
  font-size: var(--openbot-text-sm);
  font-weight: 400;
  line-height: 16px;
  white-space: nowrap;
}

.sidebar-waiting-group-count {
  display: inline-grid;
  min-width: 16px;
  height: 16px;
  place-items: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-warning);
  padding: 0 4px;
  color: var(--openbot-bg-sidebar);
  font-size: var(--openbot-text-sm);
  font-weight: 650;
}

.sidebar-hidden-group-count {
  margin-inline-start: var(--openbot-space-1);
  font-variant-numeric: tabular-nums;
}

.sidebar-chat-group > .sidebar-section-editor-wrap {
  height: 36px;
}

.sidebar-section-editor {
  width: 100%;
  height: 36px;
  border-color: var(--openbot-border-focus);
  border-radius: var(--openbot-radius-md);
  padding: 0 32px 0 8px;
  background: var(--openbot-bg-control);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
}

.sidebar-section-editor[aria-invalid="true"] {
  border-color: var(--openbot-danger);
}

.sidebar-section-editor-chevron {
  position: absolute;
  top: 50%;
  right: 9px;
  color: var(--openbot-text-muted);
  pointer-events: none;
  transform: translateY(-50%);
}

.sidebar-section-draft {
  min-height: 36px;
}

.sidebar-agent-drag-preview,
.sidebar-person-drag-preview,
.sidebar-section-drag-preview {
  position: fixed;
  z-index: var(--openbot-layer-dropdown);
  box-sizing: border-box;
  margin: 0;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface-raised);
  box-shadow: var(--openbot-shadow-raised);
  opacity: 0.96;
  pointer-events: none;
  transform: none;
  transition: none;
}

.sidebar-agent-drag-preview *,
.sidebar-person-drag-preview *,
.sidebar-section-drag-preview * {
  animation: none;
  transition: none;
}

.sidebar-section-drag-preview.sidebar-section-toggle {
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-secondary);
}

.agent-row.sidebar-agent-drag-preview {
  background: var(--openbot-bg-surface-raised);
  transition: none;
}

.agent-row.sidebar-person-drag-preview {
  background: var(--openbot-bg-surface-raised);
  transition: none;
}

.agent-row.sidebar-agent-drag-preview *,
.agent-row.sidebar-person-drag-preview * {
  animation: none;
  transition: none;
}

.sidebar-agent-item {
  position: relative;
  transform: translate3d(var(--sidebar-drag-x), var(--sidebar-drag-y), 0);
  transition: transform var(--openbot-duration-fast) var(--openbot-ease-out);
}

.sidebar-agent-item + .sidebar-agent-item {
  margin-top: 4px;
}

.sidebar-agent-item-dragging {
  will-change: transform;
}

.agent-list[data-sidebar-dragging="chat"] .sidebar-agent-item {
  transition: none;
  will-change: transform;
}

.agent-list[data-sidebar-dragging="person"] .sidebar-person-item {
  will-change: transform;
}

.sidebar-agent-item-dragging {
  z-index: 1;
  opacity: 0;
  transition: none;
}

.sidebar-person-item-dragging {
  pointer-events: none;
}

.sidebar-agent-row-dragging * {
  animation-play-state: paused;
}

.sidebar-agent-row-dragging {
  opacity: 0;
  transition: none;
}

.sidebar-person-item {
  position: relative;
  transform: translate3d(var(--sidebar-drag-x), var(--sidebar-drag-y), 0);
  transition: transform var(--openbot-duration-fast) var(--openbot-ease-out);
}

.sidebar-person-item + .sidebar-person-item {
  margin-top: 4px;
}

.sidebar-person-item-dragging {
  will-change: transform;
}

.sidebar-person-item-dragging .person-row * {
  animation-play-state: paused;
}

.sidebar-person-item-dragging .person-row {
  opacity: 0;
  transition: none;
}

.sidebar-pinned-group-agent-drop-target {
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-accent-soft);
  box-shadow: inset 0 0 0 1px var(--openbot-accent-strong);
}

.sidebar-pinned-group.sidebar-pinned-group-empty-target {
  display: grid;
  z-index: 4;
  width: 100%;
  grid-template-rows: 1fr;
  padding: 0;
  opacity: 1;
}

.sidebar-pinned-group-empty-target .sidebar-pinned-list {
  width: 100%;
  min-height: 0;
  padding: 4px 0 2px;
  overflow: hidden;
}

.sidebar-pinned-empty-drop {
  display: flex;
  width: 100%;
  height: 104px;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--openbot-border-strong);
  border-radius: var(--openbot-radius-lg);
  background: transparent;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 20px;
  list-style: none;
  transition:
    border-color var(--openbot-duration-fast) ease-out,
    background-color var(--openbot-duration-fast) ease-out,
    color var(--openbot-duration-fast) ease-out;
}

.sidebar-pinned-group-empty-target.sidebar-pinned-group-agent-drop-target {
  background: transparent;
  box-shadow: none;
}

.sidebar-pinned-group-empty-target.sidebar-pinned-group-agent-drop-target .sidebar-pinned-empty-drop {
  border-color: var(--openbot-accent-strong);
  background: var(--openbot-accent-soft);
  color: var(--openbot-text-primary);
}

.sidebar-pinned-group {
  padding: 4px 0 2px;
}

.sidebar-pinned-list {
  box-sizing: border-box;
  display: flex;
  width: min(236px, 100%);
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: center;
  margin: 0 auto;
  gap: 8px;
  list-style: none;
  padding: 2px;
}

.sidebar-pinned-item {
  position: relative;
  width: 72px;
  flex: 0 0 72px;
  opacity: 1;
  transform: translate3d(var(--sidebar-drag-x), var(--sidebar-drag-y), 0);
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}

.agent-row.sidebar-pinned-row {
  width: 72px;
  height: 94px;
  min-height: 94px;
  flex-direction: column;
  justify-content: flex-start;
  gap: 4px;
  padding: 4px 2px;
  cursor: grab;
  text-align: center;
}

.sidebar-pinned-row:active {
  transform: scale(0.96);
}

.agent-row.sidebar-pinned-row .sidebar-pinned-avatar {
  width: 48px;
  height: 48px;
  flex-basis: 48px;
}

.agent-row.sidebar-pinned-row .agent-avatar,
.agent-row.sidebar-pinned-row.person-row .person-avatar {
  width: 48px;
  height: 48px;
}

.sidebar-pinned-copy {
  display: flex;
  width: 100%;
  min-height: 34px;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
}

.sidebar-pinned-name {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: 450;
  line-height: 16px;
  text-align: center;
  text-overflow: ellipsis;
  text-wrap: pretty;
  white-space: nowrap;
}

.sidebar-pinned-title {
  box-sizing: border-box;
  max-width: 100%;
  height: 18px;
  min-height: 18px;
  flex: 0 0 16px;
  border-color: var(--openbot-border);
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-hover);
  padding: 0 var(--openbot-space-1);
  color: var(--openbot-text-readable);
  font-weight: 400;
}

.sidebar-pinned-title > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-pinned-item-dragging {
  z-index: 1;
  opacity: 0;
}

.sidebar-pinned-list[data-dragging],
.sidebar-pinned-item-dragging .sidebar-pinned-row {
  cursor: grabbing;
}

.sidebar-pinned-list[data-dragging] .sidebar-pinned-item {
  will-change: transform;
}

.sidebar-pinned-drag-preview {
  position: fixed;
  z-index: var(--openbot-layer-dropdown);
  box-sizing: border-box;
  margin: 0;
  list-style: none;
  opacity: 0.96;
  pointer-events: none;
  transform: none;
  transition: none;
}

.person-avatar {
  position: relative;
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--openbot-radius-md);
  color: var(--openbot-success);
  font-size: var(--openbot-text-sm);
  font-weight: 680;
  letter-spacing: 0.02em;
}

.person-avatar > img,
.person-avatar > .person-avatar-generated {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.person-avatar > img {
  object-fit: cover;
}

.person-avatar > i {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--openbot-bg-sidebar);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control-hover);
}

.person-avatar.online > i {
  background: var(--openbot-success);
}

.person-avatar.large {
  width: 48px;
  height: 48px;
  border-radius: var(--openbot-radius-lg);
  font-size: var(--openbot-text-md);
}

.person-row .person-avatar {
  width: 34px;
  height: 34px;
}

.person-unread-badge {
  position: absolute;
  z-index: 2;
  right: -4px;
  bottom: -3px;
  display: grid;
  min-width: 17px;
  height: 17px;
  place-items: center;
  border: 2px solid var(--openbot-bg-sidebar);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-primary);
  padding: 0 3px;
  color: var(--openbot-bg-sidebar);
  font-size: var(--openbot-text-sm);
  font-weight: 680;
}

.agent-row {
  display: flex;
  width: 100%;
  height: 54px;
  min-height: 54px;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  padding: 8px;
  color: inherit;
  text-align: left;
  transition:
    background-color var(--openbot-duration-hover) ease,
    border-color var(--openbot-duration-hover) ease,
    transform var(--openbot-duration-normal) ease;
}

.agent-row + .agent-row {
  margin-top: 4px;
}

.agent-row:hover {
  background: var(--openbot-hover);
}

.agent-row:active {
  transform: scale(0.99);
}

.agent-row-active {
  background: var(--openbot-bg-surface);
}

.agent-row-avatar {
  position: relative;
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  transform: translateX(0);
  transition: transform var(--panel-resize-duration, var(--openbot-duration-overlay)) cubic-bezier(0.32, 0.72, 0, 1);
}

/* A hidden agent sleeps, so its face is faded and has no colour. */
.sidebar-agent-item-user-hidden .agent-row-avatar {
  opacity: 0.5;
  filter: grayscale(1);
}

.agent-row-agent-status {
  position: absolute;
  z-index: 1;
  right: -5px;
  bottom: -3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--openbot-bg-sidebar);
  box-shadow: 0 1px 3px var(--openbot-shadow-popover-ambient);
  pointer-events: none;
}

.agent-row-active .agent-row-agent-status {
  border-color: var(--openbot-bg-control);
}

.agent-row-agent-status-working {
  width: 24px;
  height: 16px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-secondary);
}

.agent-row-thinking-dots {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.agent-row-thinking-dots i {
  width: 3px;
  height: 3px;
  border-radius: var(--openbot-radius-pill);
  background: currentColor;
  --typing-dot-travel: -1px;
  animation: typing-dot-pulse 900ms ease-in-out infinite;
}

.agent-row-thinking-dots i:nth-child(2) {
  animation-delay: var(--openbot-duration-fast);
}

.agent-row-thinking-dots i:nth-child(3) {
  animation-delay: var(--openbot-duration-overlay);
}

.agent-row-agent-status-responded {
  width: 16px;
  height: 16px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success);
  color: var(--openbot-success);
}

.agent-row-agent-status-responded svg {
  width: 10px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--openbot-icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.agent-row-agent-status-unread {
  min-width: 16px;
  height: 16px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-primary);
  padding: 0 3px;
  color: var(--openbot-bg-sidebar);
  font-size: var(--openbot-text-sm);
  font-weight: 650;
  line-height: 12px;
}

.agent-row-agent-status-routine,
.agent-row-agent-status-limited {
  width: 16px;
  height: 16px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-secondary);
}

.agent-row-agent-status-routine svg,
.agent-row-agent-status-limited svg {
  width: 10px;
  height: 10px;
}

.agent-row-agent-status-routine-failed {
  color: var(--openbot-danger);
}

/* An agent that waits for the user: amber, and a little larger than the routine marks, so it is
   the first badge the eye finds in a busy list. */
.agent-row-agent-status-waiting {
  width: 18px;
  height: 18px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-warning);
  color: var(--openbot-bg-sidebar);
}

.agent-row-agent-status-waiting svg {
  width: 11px;
  height: 11px;
}

/* The action chip takes the time slot: the time does not matter while the agent waits. */
.agent-row-wait-chip {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 3px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-warning-soft);
  padding: 1px 7px 1px 5px;
  color: var(--openbot-warning-text);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  line-height: 16px;
  white-space: nowrap;
}

.agent-row-wait-chip svg {
  width: 11px;
  height: 11px;
}

/* The tooltip anchors to this wrapper, so it needs a box of its own. */
.sidebar-agent-tooltip-trigger {
  display: block;
}

.sidebar-wait-tooltip {
  z-index: var(--openbot-layer-tooltip);
  display: grid;
  max-width: min(260px, calc(100vw - 16px));
  gap: 2px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-surface-raised);
  box-shadow: var(--openbot-shadow-raised);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  pointer-events: none;
}

.sidebar-wait-tooltip-title {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  color: var(--openbot-warning-text);
  font-weight: var(--openbot-weight-semibold);
}

.sidebar-wait-tooltip-title svg {
  width: 14px;
  height: 14px;
}

.sidebar-wait-tooltip-detail {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow-wrap: anywhere;
}

.sidebar-wait-tooltip-hint {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

.agent-row-agent-status-entering {
  animation: sidebar-reply-in var(--openbot-duration-overlay) cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes typing-dot-pulse {
  0%,
  60%,
  100% {
    opacity: 0.34;
    transform: translateY(0);
  }

  30% {
    opacity: 1;
    transform: translateY(var(--typing-dot-travel, -2px));
  }
}

@keyframes sidebar-reply-in {
  from {
    opacity: 0;
    transform: scale(0.55);
  }
}

.agent-context-submenu-chevron {
  margin-left: auto;
  color: var(--openbot-text-muted);
}

.agent-context-submenu {
  max-height: min(520px, calc(100vh - 16px));
  overflow-y: auto;
}

@keyframes agent-context-in {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(-3px);
  }
}

.agent-avatar {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  color: currentColor;
  overflow: visible;
}

.agent-avatar > svg {
  display: block;
  width: 128%;
  height: 128%;
  overflow: visible;
  translate: var(--agent-avatar-optical-offset-x, 0) var(--agent-avatar-optical-offset, 0);
}

.agent-avatar-custom {
  overflow: hidden;
  background: var(--openbot-hover);
  box-shadow: inset 0 0 0 1px var(--openbot-border);
}

.agent-avatar-custom > img,
.composer-mention-avatar > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A mood that flies rings. They sit outside the circle, so the parent stops
   clipping and the image rounds itself instead. */
.agent-avatar[data-avatar="image"]:is([data-mood="working"], [data-mood="connecting"]) {
  position: relative;
  overflow: visible;
}

.agent-avatar[data-avatar="image"]:is([data-mood="working"], [data-mood="connecting"]) > img {
  border-radius: var(--openbot-radius-pill);
}

/* Breathing, as a scale on the whole avatar. It is deliberately not a silhouette
   edit: the shape an agent is recognised by has to survive every mood, so the
   only thing allowed to move here is the box the shape is drawn in. The amplitude
   comes from the mood table, and 0 - every mood but `working` - holds still. */
.agent-avatar[data-breathe] {
  animation: agent-avatar-breathe 2.6s ease-in-out infinite;
}

@keyframes agent-avatar-breathe {
  0%,
  100% {
    scale: calc(1 - var(--agent-avatar-breathe, 0));
  }

  50% {
    scale: calc(1 + var(--agent-avatar-breathe, 0));
  }
}

/* The mood glow. It reads before the face does at sidebar sizes, and it never
   touches the Bloub's own colour, which is identity and comes from the seed. */
.agent-avatar[data-mood="waiting"] {
  filter: drop-shadow(0 0 3px var(--openbot-accent));
}

.agent-avatar[data-mood="failed"] {
  filter: drop-shadow(0 0 3px var(--openbot-danger));
}

.agent-avatar[data-mood="asleep"] {
  opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
  .agent-avatar[data-breathe] {
    animation: none;
  }
}

/* The rings reach 1.4 ball radii, which is the margin the Bloub viewBox carries
   past its body: 316 units drawn over the 200 the image fills, so the layer is
   158% of the avatar box and sits (158% - 100%) / 2 outside it on each side. */
.agent-avatar > .agent-avatar-arcs {
  position: absolute;
  inset: -29%;
  width: auto;
  height: auto;
  overflow: visible;
  translate: none;
}

.agent-row .agent-avatar {
  --agent-avatar-optical-offset: -4px;

  width: 36px;
  height: 36px;
}

.person-row .person-avatar {
  width: 36px;
  height: 36px;
}

.avatar-editor {
  position: relative;
  z-index: var(--openbot-layer-popover);
  width: min(284px, calc(var(--settings-panel-width, 296px) - 30px));
  max-width: calc(100vw - 24px);
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-overlay);
  box-shadow:
    0 22px 60px var(--openbot-bg-overlay),
    0 3px 12px var(--openbot-shadow-popover-ambient),
    inset 0 1px var(--openbot-hover);
  backdrop-filter: blur(18px);
  transform-origin: var(--kb-popover-content-transform-origin);
  animation: avatar-editor-in var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1) both;
}

@keyframes avatar-editor-in {
  from {
    opacity: 0;
    transform: translateY(-5px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.avatar-editor-divider {
  height: 1px;
  background: var(--openbot-border);
}

.avatar-editor-heading {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px 3px 13px;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: 590;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.avatar-editor-heading > span {
  white-space: nowrap;
}

.avatar-editor-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

.avatar-editor-actions button {
  min-height: 40px;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  padding: 0 9px;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: 540;
  transition-property: scale, background-color, color;
  transition-duration: var(--openbot-duration-normal), var(--openbot-duration-hover), var(--openbot-duration-hover);
  transition-timing-function: ease-out;
}

.avatar-editor-actions .ui-icon-button {
  width: var(--openbot-control-xl);
  padding: 0;
}

.avatar-editor-actions button:hover {
  background: var(--openbot-hover);
  color: var(--openbot-text-primary);
}

.avatar-editor-actions button:disabled,
.avatar-image-upload:disabled {
  cursor: wait;
  opacity: 0.58;
}

.avatar-image-upload {
  display: grid;
  width: calc(100% - 20px);
  min-height: 64px;
  align-items: center;
  margin: 4px 10px 12px;
  border: 1px dashed var(--openbot-border-strong);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-hover);
  padding: 9px;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 11px;
  color: var(--openbot-text-primary);
  text-align: left;
  transition:
    border-color var(--openbot-duration-hover) ease,
    background-color var(--openbot-duration-hover) ease,
    transform var(--openbot-duration-normal) ease;
}

.avatar-image-upload:hover:not(:disabled) {
  border-color: var(--openbot-success);
  background: var(--openbot-success-soft);
}

.avatar-image-upload:active:not(:disabled) {
  transform: scale(0.985);
}

.avatar-image-upload-active {
  border-style: solid;
  border-color: var(--openbot-border-strong);
}

.avatar-image-upload-preview {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  overflow: hidden;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-hover);
  color: var(--openbot-text-muted);
}

.avatar-image-upload-preview > svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: var(--openbot-icon-stroke);
}

.avatar-image-upload-preview .agent-avatar {
  width: 42px;
  height: 42px;
}

.avatar-image-upload strong,
.avatar-image-upload small {
  display: block;
  white-space: normal;
  text-wrap: pretty;
}

.avatar-image-upload strong {
  margin-bottom: 3px;
  font-size: var(--openbot-text-sm);
  font-weight: 580;
}

.avatar-image-upload small {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 14px;
}

.avatar-editor-actions button:active,
.avatar-face-choice:active,
.avatar-color-choice:active {
  scale: 0.96;
}

.avatar-face-grid {
  display: grid;
  min-width: 0;
  margin: 0;
  border: 0;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 7px 10px 12px;
}

.avatar-face-choice,
.avatar-color-choice {
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  color: var(--openbot-text-secondary);
  transition-property: scale, background-color, box-shadow;
  transition-duration: var(--openbot-duration-normal), var(--openbot-duration-hover), var(--openbot-duration-hover);
  transition-timing-function: ease-out;
}

.avatar-face-choice {
  width: 100%;
  height: 48px;
}

.avatar-face-choice:hover,
.avatar-color-choice:hover {
  background: var(--openbot-hover);
}

.avatar-choice-selected {
  background: var(--openbot-border);
  box-shadow:
    inset 0 0 0 1px var(--openbot-text-muted),
    0 1px 3px var(--openbot-shadow-popover-ambient);
}

.avatar-face-choice .agent-avatar {
  width: 34px;
  height: 34px;
}

.avatar-color-grid {
  display: grid;
  min-width: 0;
  margin: 0;
  border: 0;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 5px;
  padding: 4px 10px 12px;
}

.avatar-color-choice {
  width: 100%;
  height: 40px;
}

.avatar-color-swatch {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: var(--openbot-radius-pill);
  box-shadow: inset 0 0 0 1px var(--openbot-border-strong);
}

.avatar-color-swatch-auto {
  display: grid;
  place-items: center;
  border: 1px dashed var(--openbot-text-muted);
  background: transparent;
  box-shadow: none;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: 650;
}

.conversation-title .agent-avatar {
  --agent-avatar-optical-offset: -2px;

  width: 18px;
  height: 18px;
}

.agent-row-copy {
  min-width: 0;
  flex: 1;
  opacity: 1;
  transform: translateX(0);
  transition:
    opacity var(--openbot-duration-fast) ease,
    transform var(--openbot-duration-slow) cubic-bezier(0.32, 0.72, 0, 1);
}

.agent-row-heading {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.agent-row-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  overflow: hidden;
}

.agent-row-title:has(.agent-role-badge) {
  --agent-role-badge-collapsed-width: calc(2ch + 9px);

  display: grid;
  grid-template-columns:
    fit-content(calc(100% - var(--agent-role-badge-collapsed-width) - 5px))
    minmax(var(--agent-role-badge-collapsed-width), 1fr);
}

.agent-row-name {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 3px;
  overflow: hidden;
}

.agent-row-access {
  display: inline-flex;
  flex: none;
  color: var(--openbot-text-muted);
}

.agent-row-access svg {
  width: 12px;
  height: 12px;
}

.agent-row-title strong,
.person-row .agent-row-heading strong,
.channel-row .agent-row-heading strong {
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  line-height: 20px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-role-badge {
  min-width: 0;
  max-width: 100%;
  height: 18px;
  min-height: 18px;
  overflow: hidden;
  flex: 0 1 auto;
  justify-self: start;
  border: 0.5px solid var(--openbot-border);
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-hover);
  padding: 2px 4px;
  color: var(--openbot-text-readable);
  font-size: var(--openbot-text-sm);
  font-weight: 400;
  line-height: 16px;
  white-space: nowrap;
}

.agent-role-badge > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-row-time,
.person-row .agent-row-heading > span,
.channel-row .agent-row-time {
  min-width: 0;
  flex: 0 0 auto;
  color: var(--openbot-text-readable);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
  white-space: nowrap;
}

/* Narrow panel: name and badge win over time and date. The time element keeps
   no reserved width, so long names get the space instead of truncating to a
   few characters beside a date. */
@container (max-width: 210px) {
  .agent-row-time,
  .person-row .agent-row-heading > span,
  .channel-row .agent-row-time {
    display: none;
  }
}

.agent-row-preview {
  display: block;
  margin-top: 0;
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The reference list extends agent tiles beyond the chat-list inset while the
   shared row anatomy supplies its 54px row and 36px avatar proportions. */
.sidebar:not(.sidebar-compact) .agent-row {
  width: calc(100% + var(--openbot-space-2));
  margin-inline: calc(var(--openbot-space-1) * -1);
}

.sidebar:not(.sidebar-compact) .sidebar-section-body .agent-row {
  width: 100%;
  margin-inline: 0;
}

.sidebar:not(.sidebar-compact) .sidebar-waiting-group .agent-row {
  width: 100%;
  margin-inline: 0;
}

/* A waiting row does not drag, so it does not show the grab cursor. */
.sidebar-waiting-group .sidebar-agent-item .agent-row {
  cursor: default;
}

.sidebar:not(.sidebar-compact) .sidebar-pinned-row.agent-row {
  width: 72px;
  margin-inline: 0;
}

.empty-search {
  margin: 32px 0;
  color: var(--openbot-text-readable);
  font-size: var(--openbot-text-md);
  text-align: center;
}

.sidebar-first-agent-state {
  display: flex;
  min-height: 100%;
  flex-direction: column;
}

.ui-button.sidebar-first-agent-action {
  flex: 0 0 auto;
}

.account-usage-popover {
  position: relative;
  z-index: var(--openbot-layer-tooltip);
  display: grid;
  width: min(300px, calc(100vw - var(--openbot-space-4)));
  max-height: min(60vh, 420px);
  overflow: auto;
  padding: var(--openbot-space-2);
  gap: var(--openbot-space-2);
  opacity: 1;
  transform: translateY(0) scale(1);
  transform-origin: var(--kb-popover-content-transform-origin);
  transition:
    opacity var(--openbot-duration-fast) ease,
    transform var(--openbot-duration-fast) var(--openbot-ease-out);

  @starting-style {
    opacity: 0;
    transform: translateY(4px) scale(0.98);
  }
}

.account-usage-popover-header,
.account-usage-popover-heading {
  display: flex;
  align-items: center;
}

.account-usage-popover-header {
  justify-content: space-between;
}

.account-usage-popover-heading {
  min-width: 0;
  /* Match the horizontal padding of a provider row, so the gauge icon lines up
     with the provider logos below it. */
  padding-inline-start: var(--openbot-space-1);
  gap: var(--openbot-space-2);
}

.account-usage-popover-heading > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  color: var(--openbot-text-primary);
  stroke-width: var(--openbot-icon-stroke);
}

.account-usage-popover-title {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-md);
}

/* Columns: logo, window label, bar, percent left, reset countdown. Each provider row and each
   window row is a subgrid, so the bars line up across providers. */
.account-usage-providers {
  display: grid;
  margin: 0;
  padding: 0;
  grid-template-columns: auto max-content minmax(0, 1fr) max-content max-content;
  column-gap: var(--openbot-space-2);
  row-gap: var(--openbot-space-1);
  list-style: none;
}

.account-usage-provider {
  display: grid;
  min-width: 0;
  align-items: center;
  border-radius: var(--openbot-radius-md);
  padding: var(--openbot-space-1);
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  row-gap: var(--openbot-space-1);
}

.account-usage-provider > .account-usage-provider-name {
  grid-column: 2 / -1;
}

.account-usage-provider-logo {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  overflow: visible;
  fill: var(--openbot-provider-current);
}

.account-usage-provider-copy {
  display: grid;
  min-width: 0;
  grid-column: 2 / 4;
}

.account-usage-provider-name {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-usage-provider-meta {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-usage-provider-remaining {
  grid-column: 4 / -1;
  justify-self: end;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: var(--openbot-leading-sm);
  white-space: nowrap;
}

.account-usage-windows,
.account-usage-window {
  display: grid;
  min-width: 0;
  grid-template-columns: subgrid;
}

.account-usage-windows {
  grid-column: 2 / -1;
  row-gap: var(--openbot-space-1);
}

.account-usage-window {
  --account-usage-window-tone: var(--openbot-text-secondary);

  align-items: center;
  grid-column: 1 / -1;
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.account-usage-window[data-usage-tone="warning"] {
  --account-usage-window-tone: var(--openbot-warning);
}

.account-usage-window[data-usage-tone="critical"] {
  --account-usage-window-tone: var(--openbot-danger);
}

.account-usage-window-label,
.account-usage-window-reset {
  color: var(--openbot-text-muted);
  white-space: nowrap;
}

.account-usage-window-reset {
  text-align: right;
}

.account-usage-window-bar {
  display: block;
  height: 4px;
  overflow: hidden;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-border);
}

.account-usage-window-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--account-usage-window-tone);
}

.account-usage-window-remaining {
  color: var(--openbot-text-primary);
  font-variant-numeric: tabular-nums;
  font-weight: var(--openbot-weight-semibold);
  text-align: right;
}

.account-usage-window:not([data-usage-tone="neutral"]) .account-usage-window-remaining {
  color: var(--account-usage-window-tone);
}

.account-usage-empty {
  margin: 0;
  padding: var(--openbot-space-2) var(--openbot-space-1);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.account-usage-refresh.ui-button {
  position: relative;
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-md);
  color: var(--openbot-text-muted);
}

.account-usage-refresh.ui-button::before {
  position: absolute;
  inset: calc(0px - var(--openbot-space-1));
  content: "";
}

.account-usage-refresh > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: var(--openbot-icon-stroke);
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}

.account-usage-refresh > svg.icon-spinning {
  animation-duration: 600ms;
}

.account-usage-popover-error {
  margin: 0;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-danger-soft);
  padding: var(--openbot-space-2);
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.sidebar-compact .sidebar-topbar {
  padding-inline: 12px;
}

.sidebar-compact .sidebar-server-name {
  opacity: 0;
  pointer-events: none;
}

.sidebar-compact .sidebar-new-button {
  opacity: 0;
  pointer-events: none;
  transform: translateX(6px) scale(0.92);
}

.sidebar-compact .sidebar-toggle-button {
  transform: translateX(13px);
}

.sidebar-compact .sidebar-toggle-button:active {
  transform: translateX(13px) scale(0.96);
}

.sidebar-compact .sidebar-search-wrap {
  padding-inline: 12px;
}

.sidebar-compact .search-field {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-8px);
}

.sidebar-compact .sidebar-compact-search {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1);
  transition-delay: 55ms;
}

.sidebar-compact .agent-list {
  padding-inline: 12px;
}

.sidebar-compact .sidebar-chat-group {
  position: relative;
}

.sidebar-compact .sidebar-chat-group + .sidebar-chat-group {
  margin-top: 4px;
}

.sidebar-compact .sidebar-chat-group > header {
  height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  white-space: nowrap;
}

.sidebar-compact .agent-row {
  padding-inline: 8px;
}

.sidebar-compact .agent-row-avatar {
  transform: translateX(6px);
}

.sidebar-compact .agent-row.sidebar-pinned-row {
  width: 60px;
  height: 60px;
  min-height: 60px;
  padding: 6px;
}

.sidebar-compact .sidebar-pinned-item {
  width: 60px;
  flex-basis: 60px;
}

.sidebar-compact .agent-row.sidebar-pinned-row .sidebar-pinned-avatar {
  transform: none;
}

.sidebar-compact .sidebar-pinned-copy {
  display: none;
}

.sidebar-compact .agent-row-copy {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-8px);
}

.agent-tasks-row {
  display: grid;
  width: 100%;
  height: var(--openbot-control-md);
  align-items: center;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  padding: 0 var(--openbot-space-2);
  grid-template-columns: 16px minmax(0, 1fr) auto;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  letter-spacing: -0.01em;
  text-align: left;
  transition: background-color var(--openbot-duration-hover) ease;
}

.agent-tasks-row:hover:not(:disabled) {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}

.agent-tasks-row:disabled {
  cursor: default;
  opacity: 0.45;
}

.agent-tasks-row:focus-visible {
  outline: 0;
  background: var(--openbot-bg-control-hover);
  box-shadow: inset 0 0 0 1px var(--openbot-border-strong);
}

.agent-tasks-row small {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.agent-tasks-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--openbot-icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--openbot-text-primary);
}

.icon-spinning {
  animation: account-update-spin 800ms linear infinite;
}

@keyframes account-update-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .server-rail-mark,
  .server-rail-server-item,
  .sidebar-section,
  .sidebar-pinned-item {
    transition: none;
  }

  .sidebar-section-chevron,
  .sidebar-section-collapse,
  .sidebar-section-toggle,
  .sidebar-pinned-group-empty-target,
  .sidebar-pinned-empty-drop {
    transition: none;
  }

  .account-usage-popover {
    transform: none;
    transition: opacity var(--openbot-duration-fast) ease;

    @starting-style {
      opacity: 0;
      transform: none;
    }
  }

  .account-usage-refresh > svg {
    transition: none;
  }

  .account-usage-refresh:hover:not(:disabled) > svg {
    transform: none;
  }

  .icon-spinning {
    animation-duration: 1.6s;
  }
}

.server-rail,
.sidebar {
  background: var(--openbot-bg-sidebar);
}

.server-rail-monogram,
.server-rail-action .server-rail-monogram {
  border-color: var(--openbot-border);
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-secondary);
}

.person-avatar.online > i {
  background: var(--openbot-success);
}

.sidebar-icon-button:hover,
.header-panel-toggle:hover,
.browser-toolbar-button:hover:not(:disabled),
.message-action-button:hover,
.message-action-button:focus-visible,
.message-action-button[aria-expanded="true"],
.reaction-picker-row button:hover,
.reaction-picker-row button:focus-visible,
.reaction-picker-row button[aria-checked="true"],
.composer-button:hover,
.composer-attachment > button:hover,
.agent-tasks-row:hover,
.agent-context-menu button:hover,
.agent-context-menu button:focus-visible {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}

.sidebar-icon-button:active,
.header-panel-toggle:active,
.agent-row:active,
.composer-button:active,
.voice-button:active,
.settings-panel-nav-button:active {
  transform: scale(0.97);
}

.agent-row:hover {
  background: var(--openbot-bg-control);
}

.agent-list[data-sidebar-dragging] .agent-row:hover {
  background: transparent;
}

.agent-list[data-sidebar-dragging] .agent-row.agent-row-active,
.agent-list[data-sidebar-dragging] .agent-row.agent-row-active:hover {
  background: var(--openbot-bg-surface);
}

.settings-panel-content {
  color: var(--openbot-text-primary);
}

.agent-settings-notifications,
.provider-model-panel,
.provider-model-rail,
.avatar-editor {
  border-color: var(--openbot-border);
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-primary);
}

.choice-key,
.composer-mention-token,
.remote-desktop-empty-mark {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-secondary);
}
.server-rail-muted {
  position: absolute;
  right: 0;
  bottom: 0;
  color: var(--openbot-text-secondary);
  background: var(--openbot-bg-sidebar);
  border-radius: var(--openbot-radius-sm);
}

/* A hosted server that sleeps for no use: muted. One that wakes after the user's input: a pulsing accent. */
@keyframes server-sleep-waking {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.35;
  }
}

@media (prefers-reduced-motion: reduce) {
  .server-menu-sleep[data-state="waking"],
  .sidebar-server-name > .sidebar-server-name-sleep[data-state="waking"] {
    animation: none;
  }
}

/* A server menu item with a second line, such as "Muted until 14:30", like Discord's. */
.ui-action-menu:not([data-menu-layout="grid"]) .server-rail-menu-detail-item {
  height: auto;
}

.server-rail-menu-label {
  display: flex;
  flex-direction: column;
}

.server-rail-menu-detail {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}


/* /@fs//app/packages/ui/src/features/agents/first-agent-setup.css */
.first-agent-setup-panel {
  height: 100%;
  min-height: 0;
  color: var(--openbot-text-primary);
}

.first-agent-setup-header {
  display: flex;
  height: 38px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--openbot-border);
  padding: 0 var(--openbot-space-3);
}

.first-agent-header-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-1-5);
}

.first-agent-header-identity .agent-avatar {
  --agent-avatar-optical-offset: -2px;

  width: 18px;
  height: 18px;
}

.first-agent-header-identity h1 {
  overflow: hidden;
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.first-agent-setup-content {
  display: grid;
  min-width: 0;
  min-height: 0;
  flex: 1;
  grid-template-rows: minmax(min-content, 1fr) auto;
  overflow-y: auto;
}

.first-agent-editor {
  display: grid;
  width: min(420px, calc(100% - 48px));
  align-content: center;
  justify-self: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-6) 0;
}

.first-agent-live-avatar {
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  justify-self: center;
  margin-bottom: var(--openbot-space-1);
  translate: 0 calc(0px - var(--openbot-space-2));
}

.first-agent-live-avatar .agent-avatar {
  width: 72px;
  height: 72px;
}

.first-agent-avatar-fieldset {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

.first-agent-color-options,
.first-agent-face-options {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-1);
}

.first-agent-face-options {
  gap: var(--openbot-space-0-5);
}

.ui-button.first-agent-color-choice,
.ui-button.first-agent-face-choice {
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-color: transparent;
  background: transparent;
  padding: 0;
  border-radius: var(--openbot-radius-md);
}

.ui-button.first-agent-face-choice {
  display: grid;
  width: 33px;
  height: 33px;
  flex-basis: 33px;
  place-items: center;
  padding: 0;
}

.ui-button.first-agent-color-choice {
  border-radius: var(--openbot-radius-pill);
}

.ui-button.first-agent-color-choice:hover:not(:disabled),
.ui-button.first-agent-face-choice:hover:not(:disabled) {
  background: var(--openbot-hover);
}

.first-agent-color-choice[aria-pressed="true"],
.first-agent-face-choice[aria-pressed="true"] {
  border-color: var(--openbot-accent-text);
  box-shadow: 0 0 0 2px var(--openbot-accent-soft);
}

.first-agent-color-swatch {
  display: block;
  width: 18px;
  height: 18px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
}

.first-agent-face-choice .agent-avatar {
  --agent-avatar-optical-offset: -3.25px;

  width: 24px;
  height: 24px;
}

.first-agent-fields {
  display: grid;
  gap: var(--openbot-space-3);
  margin-top: var(--openbot-space-1);
}

.first-agent-fields .ui-textarea {
  field-sizing: content;
  min-height: 64px;
  max-height: 240px;
  overflow-y: auto;
}

.ui-button.first-agent-submit {
  min-width: 132px;
}

/*
 * The model picker in this form reads as a form control, like the inputs above it: the same
 * border, radius and background, and no press-down scale, so opening it never moves it.
 */
.first-agent-fields .provider-model-trigger-field {
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
  box-shadow: none;
}

.first-agent-fields .provider-model-trigger-field:hover:not(:disabled),
.first-agent-fields .provider-model-trigger-field[aria-expanded="true"] {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-control);
}

.first-agent-fields .provider-model-trigger-field:active:not(:disabled) {
  transform: none;
}

.first-agent-fields .provider-model-trigger-field:focus-visible {
  border-color: var(--openbot-border-focus);
  outline: none;
  box-shadow: var(--openbot-focus-ring);
}

.first-agent-submit-actions {
  display: flex;
  justify-content: center;
  margin-top: var(--openbot-space-1);
}

.first-agent-error {
  margin: 0;
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-align: center;
}

.first-agent-suggestions {
  min-width: 0;
  padding: 0 var(--openbot-space-6) var(--openbot-space-4);
}

.first-agent-suggestions > h2 {
  margin: 0 0 var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
}

.first-agent-suggestion-viewport {
  position: relative;
  min-width: 0;
}

.first-agent-suggestion-viewport::before,
.first-agent-suggestion-viewport::after {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: var(--openbot-space-1);
  width: 48px;
  opacity: 0;
  pointer-events: none;
  content: "";
  transition: opacity var(--openbot-duration-normal) var(--openbot-ease-out);
}

.first-agent-suggestion-viewport::before {
  left: 0;
  background: linear-gradient(to right, var(--openbot-bg-canvas), transparent);
}

.first-agent-suggestion-viewport::after {
  right: 0;
  background: linear-gradient(to left, var(--openbot-bg-canvas), transparent);
}

.first-agent-suggestion-viewport.can-scroll-back::before,
.first-agent-suggestion-viewport.can-scroll-forward::after {
  opacity: 1;
}

.first-agent-suggestion-list {
  display: flex;
  min-width: 0;
  gap: var(--openbot-space-3);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  margin: 0;
  padding: 1px 1px var(--openbot-space-1);
  list-style: none;
  scrollbar-width: none;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.first-agent-suggestion-list::-webkit-scrollbar {
  display: none;
}

.first-agent-suggestion-item {
  width: 256px;
  flex: 0 0 256px;
  margin: 0;
}

.ui-button.first-agent-suggestion-card {
  width: 100%;
  height: 112px;
  justify-content: flex-start;
  gap: var(--openbot-space-4);
  border-color: var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: transparent;
  padding: var(--openbot-space-4);
  cursor: grab;
  text-align: left;
  white-space: normal;
  transition:
    border-color var(--openbot-duration-hover) var(--openbot-ease-out),
    background-color var(--openbot-duration-hover) var(--openbot-ease-out);
}

.ui-button.first-agent-suggestion-card:hover:not(:disabled) {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-hover);
}

.first-agent-suggestion-card[aria-pressed="true"] {
  border-color: var(--openbot-accent);
  background: var(--openbot-accent-soft);
}

.first-agent-suggestion-viewport.is-dragging,
.first-agent-suggestion-viewport.is-dragging .first-agent-suggestion-list,
.first-agent-suggestion-viewport.is-dragging .first-agent-suggestion-card {
  cursor: grabbing;
}

.first-agent-suggestion-card .agent-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
}

.first-agent-suggestion-card > span:last-child {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-1);
}

.first-agent-suggestion-card strong,
.first-agent-suggestion-card small {
  display: block;
}

.first-agent-suggestion-card strong {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-xl);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-xl);
}

.first-agent-suggestion-card small {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-md);
}

@media (max-width: 800px) {
  .first-agent-editor {
    width: min(400px, calc(100% - 32px));
    padding-block: var(--openbot-space-4);
  }

  .first-agent-live-avatar,
  .first-agent-live-avatar .agent-avatar {
    width: 62px;
    height: 62px;
  }

  .first-agent-face-options {
    gap: var(--openbot-space-0-5);
    flex-wrap: wrap;
  }

  .first-agent-suggestions {
    padding-inline: var(--openbot-space-4);
  }

  .first-agent-suggestion-item {
    width: min(256px, calc(100vw - 64px));
    flex-basis: min(256px, calc(100vw - 64px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .first-agent-color-choice,
  .first-agent-face-choice {
    transition: none;
  }

  .first-agent-suggestion-viewport .ui-button.first-agent-suggestion-card {
    transition: none;
  }

  .first-agent-suggestion-viewport::before,
  .first-agent-suggestion-viewport::after {
    transition: none;
  }
}


/* /@fs//app/src/renderer/src/features/startup/startup-splash.css */
/*
 * The desktop startup splash. The logo fades in and each eye is drawn as one pen stroke. The logo then
 * blinks until the app is ready, and the splash fades out.
 */

.startup-splash {
  position: absolute;
  z-index: var(--openbot-layer-dialog);
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--openbot-bg-canvas);
  -webkit-app-region: drag;
}

.startup-splash-logo {
  display: block;
  width: 96px;
  height: 96px;
  animation: startup-splash-in var(--openbot-duration-overlay) var(--openbot-ease-out) backwards;
}

/* The fade also runs with reduced motion: its animationend removes the splash. */
.startup-splash[data-phase="exit"] {
  pointer-events: none;
  -webkit-app-region: no-drag;
  animation: startup-splash-exit var(--openbot-duration-overlay) var(--openbot-ease-in-out) forwards;
}

@media (prefers-reduced-motion: no-preference) {
  /* Both eyes use the longer stroke's length, so they draw at the same time. */
  .startup-splash-logo .app-logo-eye {
    stroke-dasharray: var(--splash-eye-length) calc(var(--splash-eye-length) + 24px);
    animation:
      startup-splash-eye-draw 480ms var(--openbot-ease-in-out) 160ms backwards,
      app-logo-blink 4.8s var(--openbot-ease-in-out) 1s infinite;
  }
}

@keyframes startup-splash-in {
  from {
    opacity: 0;
  }
}

@keyframes startup-splash-eye-draw {
  from {
    stroke-dashoffset: calc(var(--splash-eye-length) + 12px);
  }
  to {
    stroke-dashoffset: 0px;
  }
}

@keyframes startup-splash-exit {
  to {
    opacity: 0;
  }
}


/* /@fs//app/src/renderer/src/features/onboarding/onboarding.css */
.onboarding-screen {
  position: absolute;
  z-index: var(--openbot-layer-dialog);
  inset: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow-y: auto;
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
  -webkit-app-region: drag;
}

.onboarding-shell {
  width: min(100%, 680px);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 52px 24px;
  -webkit-app-region: no-drag;
}

.onboarding-progress {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  margin-bottom: 20px;
}

.onboarding-progress span {
  width: 6px;
  height: 6px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-border-strong);
  transition:
    width var(--openbot-duration-normal) var(--openbot-ease-out),
    background-color var(--openbot-duration-normal) ease;
}

.onboarding-progress span.is-complete {
  background: var(--openbot-text-muted);
}

.onboarding-progress span.is-active {
  width: 22px;
  background: var(--openbot-text-primary);
}

.onboarding-step {
  width: 100%;
  display: flex;
  justify-content: center;
}

.onboarding-panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.onboarding-panel h1 {
  max-width: 620px;
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-display);
  font-weight: var(--openbot-weight-medium);
  letter-spacing: -0.045em;
  line-height: 1.12;
}

.onboarding-description {
  max-width: 560px;
  margin: 10px 0 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-lg);
  line-height: 1.45;
}

.onboarding-computer-visual svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.onboarding-provider {
  width: min(100%, 480px);
  margin-top: 26px;
  text-align: left;
}

.onboarding-provider .provider-picker-standalone {
  margin-top: 0;
}

.onboarding-provider .provider-picker-label {
  color: var(--openbot-text-secondary);
}

.onboarding-provider .provider-picker-heading {
  padding-inline: 1px;
}

.onboarding-provider .provider-picker-list {
  background: var(--openbot-bg-control);
}

.onboarding-provider .provider-picker-hint {
  color: var(--openbot-text-muted);
}

.onboarding-computer-visual {
  position: relative;
  width: min(100%, 400px);
  margin-top: 20px;
}

.onboarding-computer-stop-mist,
.onboarding-computer-highlight-start {
  stop-color: var(--openbot-onboarding-desktop-mist);
}

.onboarding-computer-stop-blue,
.onboarding-computer-highlight-end {
  stop-color: var(--openbot-onboarding-desktop-blue);
}

.onboarding-computer-stop-indigo {
  stop-color: var(--openbot-onboarding-desktop-indigo);
}

.onboarding-computer-highlight-start {
  stop-opacity: 0.92;
}

.onboarding-computer-highlight-end {
  stop-opacity: 0;
}

.onboarding-computer-desktop {
  stroke: var(--openbot-border-on-light);
  stroke-width: 1;
  filter: drop-shadow(0 16px 22px var(--openbot-shadow-popover-ambient));
}

.onboarding-computer-desktop-highlight {
  pointer-events: none;
}

.onboarding-computer-desktop-beam {
  fill: var(--openbot-onboarding-desktop-mist);
  opacity: 0.16;
  pointer-events: none;
}

.onboarding-computer-window-shadow {
  fill: var(--openbot-shadow-dialog);
  opacity: 0.46;
}

.onboarding-computer-window {
  transform-box: fill-box;
  transform-origin: center;
  animation: onboarding-computer-window-drag 4.6s var(--openbot-ease-in-out) infinite;
}

.onboarding-computer-window-body {
  fill: var(--openbot-onboarding-window);
  stroke: var(--openbot-border-on-light);
  stroke-width: 1;
}

.onboarding-computer-window-bar,
.onboarding-computer-window-bar-fill {
  fill: var(--openbot-text-muted-on-light);
  opacity: 0.24;
}

.onboarding-computer-window-bar {
  stroke: var(--openbot-border-on-light);
  stroke-width: 1;
}

.onboarding-computer-window-pane {
  fill: var(--openbot-text-dim-on-light);
  opacity: 0.18;
}

.onboarding-computer-window-card {
  fill: var(--openbot-text-dim-on-light);
  opacity: 0.24;
}

.onboarding-computer-window-line {
  fill: var(--openbot-text-dim-on-light);
  opacity: 0.54;
}

.onboarding-computer-window-line-short {
  opacity: 0.44;
}

.onboarding-computer-dot-danger {
  fill: var(--openbot-danger);
}

.onboarding-computer-dot-warning {
  fill: var(--openbot-warning);
}

.onboarding-computer-dot-success {
  fill: var(--openbot-success);
}

.onboarding-computer-cursor {
  transform-box: fill-box;
  transform-origin: 0 0;
  animation: onboarding-computer-cursor-drag 4.6s var(--openbot-ease-in-out) infinite;
}

.onboarding-computer-cursor path {
  fill: var(--openbot-text-on-light);
  stroke: var(--openbot-onboarding-window);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  filter: drop-shadow(0 2px 3px var(--openbot-shadow-popover-ambient));
  paint-order: stroke fill;
}

.onboarding-computer-avatar {
  position: absolute;
  z-index: 1;
  top: 40%;
  left: 73%;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  pointer-events: none;
  animation: onboarding-computer-avatar-drag 4.6s var(--openbot-ease-in-out) infinite;
}

.onboarding-computer-avatar .agent-avatar {
  width: 34px;
  height: 34px;
}

.onboarding-computer-avatar .agent-avatar > svg {
  width: 128%;
  height: 128%;
  filter: drop-shadow(0 2px 4px var(--openbot-shadow-popover-ambient));
}

@keyframes onboarding-computer-window-drag {
  0%,
  34% {
    transform: translate(0, 0);
  }

  56%,
  78% {
    transform: translate(18px, 8px);
  }

  100% {
    transform: translate(0, 0);
  }
}

@keyframes onboarding-computer-cursor-drag {
  0%,
  8% {
    opacity: 0;
    transform: translate(352px, 190px) scale(0.68);
  }

  18%,
  32% {
    opacity: 1;
    transform: translate(282px, 72px) scale(0.76);
  }

  38% {
    opacity: 1;
    transform: translate(282px, 72px) scale(0.71);
  }

  56%,
  70% {
    opacity: 1;
    transform: translate(300px, 80px) scale(0.71);
  }

  78% {
    opacity: 1;
    transform: translate(300px, 80px) scale(0.76);
  }

  92%,
  100% {
    opacity: 0;
    transform: translate(352px, 190px) scale(0.68);
  }
}

@keyframes onboarding-computer-avatar-drag {
  0%,
  8% {
    opacity: 0;
    transform: translate(68px, 112px) scale(0.88);
  }

  18%,
  32% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }

  38% {
    opacity: 1;
    transform: translate(0, 0) scale(0.94);
  }

  56%,
  70% {
    opacity: 1;
    transform: translate(18px, 8px) scale(0.94);
  }

  78% {
    opacity: 1;
    transform: translate(18px, 8px) scale(1);
  }

  92%,
  100% {
    opacity: 0;
    transform: translate(68px, 112px) scale(0.88);
  }
}

.onboarding-error {
  width: min(100%, 480px);
  margin: 12px 0 0;
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
  line-height: 1.45;
  text-align: center;
}

.onboarding-actions {
  width: min(100%, 288px);
  display: grid;
  gap: var(--openbot-space-2);
  margin-top: 22px;
}

.onboarding-screen[data-step="computer"] .onboarding-actions {
  margin-top: 16px;
}

.onboarding-actions .ui-button {
  width: 100%;
  min-height: 44px;
  border-radius: var(--openbot-radius-pill);
}

.onboarding-next {
  order: -1;
}

.onboarding-next-reason {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 1.45;
  text-align: center;
}

@media (max-width: 620px) {
  .onboarding-shell {
    padding: 48px 18px;
  }

  .onboarding-panel h1 {
    font-size: var(--openbot-text-3xl);
  }

  .onboarding-description {
    font-size: var(--openbot-text-md);
  }

  .onboarding-computer-visual {
    width: min(100%, 320px);
    margin-top: 16px;
  }

  .onboarding-computer-avatar {
    width: 30px;
    height: 30px;
  }

  .onboarding-computer-avatar .agent-avatar {
    width: 30px;
    height: 30px;
  }
}

@media (max-width: 460px) {
  .onboarding-provider .provider-picker-option-selection {
    grid-template-columns: 16px 18px minmax(0, 1fr);
  }

  .onboarding-provider .provider-picker-state {
    grid-column: 3;
    justify-self: start;
  }

  .onboarding-computer-visual {
    width: min(100%, 320px);
    margin-top: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .onboarding-progress span,
  .onboarding-computer-window,
  .onboarding-computer-cursor,
  .onboarding-computer-avatar {
    animation: none;
    transition: none;
  }

  .onboarding-computer-window {
    transform: translate(18px, 8px);
  }

  .onboarding-computer-cursor {
    opacity: 1;
    transform: translate(300px, 80px) scale(0.76);
  }

  .onboarding-computer-avatar {
    opacity: 1;
    transform: translate(18px, 8px);
  }
}

/* The OpenCode note sits outside the list, so the list lets it through and its first and last rows
   round their own corners instead of relying on the clip. The first run and the setup dialog both
   show the note; without the row as its containing block, it points at a different row. */
:is(.onboarding-provider, .setup-local-content) .provider-picker-list {
  overflow: visible;
}

:is(.onboarding-provider, .setup-local-content) .provider-picker-list > :first-child,
:is(.onboarding-provider, .setup-local-content)
  .provider-picker-list
  > :first-child
  > .provider-picker-option:first-child {
  border-top-left-radius: calc(var(--openbot-radius-md) - 1px);
  border-top-right-radius: calc(var(--openbot-radius-md) - 1px);
}

:is(.onboarding-provider, .setup-local-content) .provider-picker-list > :last-child,
:is(.onboarding-provider, .setup-local-content)
  .provider-picker-list
  > :last-child
  > .provider-picker-option:last-child {
  border-bottom-left-radius: calc(var(--openbot-radius-md) - 1px);
  border-bottom-right-radius: calc(var(--openbot-radius-md) - 1px);
}

:is(.onboarding-provider, .setup-local-content) .provider-picker-option-with-callout {
  position: relative;
}

/* Drawn like the drag hint of the macOS installer: a note, then a thin arrow into the row. */
.provider-picker-callout {
  position: absolute;
  right: calc(100% + 10px);
  bottom: 50%;
  width: 150px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--openbot-onboarding-desktop-indigo);
  pointer-events: none;
  animation: provider-picker-callout-in 420ms cubic-bezier(0.23, 1, 0.32, 1) both;
}

.provider-picker-callout-title {
  font-size: var(--openbot-text-md);
  font-weight: 620;
  line-height: 18px;
}

.provider-picker-callout-detail {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
}

.provider-picker-callout-arrow {
  width: 92px;
  height: 40px;
  align-self: flex-end;
  margin-top: 2px;
  /* The note ends at the middle of its target; this puts the arrowhead (y 30 of 40) there too. */
  margin-bottom: -10px;
}

@keyframes provider-picker-callout-in {
  from {
    opacity: 0;
  }
}

/* The same note on the right of the list, for "More providers": the text aligns right and the
   arrow is mirrored to point left. */
.provider-picker-callout-end {
  right: auto;
  left: calc(100% + 10px);
  align-items: flex-end;
  text-align: right;
}

.provider-picker-callout-end .provider-picker-callout-arrow {
  align-self: flex-start;
  transform: scaleX(-1);
}

@media (prefers-reduced-motion: reduce) {
  .provider-picker-callout {
    animation: none;
  }
}

/* No room beside the list: the row's own description says the same. */
@media (max-width: 860px) {
  .provider-picker-callout {
    display: none;
  }
}

/* The setup dialog is 620px wide, and a note needs 160px on each side of it. */
@media (max-width: 960px) {
  .setup-local-content .provider-picker-callout {
    display: none;
  }
}

/* The provider step of a joined server covers the window, over the rail and the sidebar. */
.server-onboarding-screen {
  position: fixed;
}

.server-onboarding-close {
  position: absolute;
  top: 12px;
  right: 12px;
  -webkit-app-region: no-drag;
}

/* The first question of first run. The team rises in from the sides to the large agent in the
   middle; the two answers are rows of one grouped list. */

.first-run-screen[data-step="choose"] .onboarding-shell {
  width: min(100%, 960px);
}

/* First run changes steps in a view transition (`first-run-transition.ts`). The old step blurs and
   fades out while the next one comes into focus in the same place; the progress and the actions
   move to their new place. Opening the app blurs the setup screen away into
   the app. The motion stays small: blur and fade carry the change, not travel. */
.first-run-screen .onboarding-shell > .onboarding-step {
  view-transition-name: first-run-step;
}

.first-run-screen .onboarding-shell > .onboarding-progress {
  view-transition-name: first-run-progress;
}

.first-run-screen .onboarding-shell > .onboarding-actions {
  view-transition-name: first-run-actions;
}

::view-transition-group(first-run-step),
::view-transition-group(first-run-progress),
::view-transition-group(first-run-actions) {
  animation-duration: 440ms;
  animation-timing-function: var(--openbot-ease-out);
}

/* The steps are not the same width. Each image keeps its own size in the middle, so none stretches. */
::view-transition-old(first-run-step),
::view-transition-new(first-run-step) {
  inset-inline-start: 50%;
  inline-size: auto;
  translate: -50% 0;
}

html:active-view-transition-type(step)::view-transition-old(first-run-step) {
  animation: first-run-step-out 220ms var(--openbot-ease-out) both;
}

html:active-view-transition-type(step)::view-transition-new(first-run-step) {
  animation: first-run-step-in 440ms var(--openbot-ease-out) 40ms both;
}

/* The live dots animate their own width, so the old picture of them is not needed. */
::view-transition-old(first-run-progress):not(:only-child) {
  animation: none;
  opacity: 0;
}

::view-transition-new(first-run-progress):not(:only-child) {
  animation: none;
}

::view-transition-new(first-run-progress):only-child,
::view-transition-new(first-run-actions):only-child {
  animation: first-run-step-rise 440ms var(--openbot-ease-out) 40ms both;
}

/* The buttons change their labels in place, so the old ones blur away under the new ones. */
::view-transition-old(first-run-actions),
::view-transition-old(first-run-progress):only-child {
  animation: first-run-blur-out 220ms var(--openbot-ease-out) both;
}

::view-transition-new(first-run-actions):not(:only-child) {
  animation: first-run-blur-in 440ms var(--openbot-ease-out) 40ms both;
}

html:active-view-transition-type(open)::view-transition-old(*) {
  animation: first-run-open-out 320ms var(--openbot-ease-out) both;
}

html:active-view-transition-type(open)::view-transition-new(*) {
  animation: first-run-open-in 520ms var(--openbot-ease-out) 60ms both;
}

@keyframes first-run-step-out {
  to {
    opacity: 0;
    filter: blur(6px);
  }
}

@keyframes first-run-step-in {
  from {
    opacity: 0;
    filter: blur(6px);
  }
}

@keyframes first-run-step-rise {
  from {
    opacity: 0;
    filter: blur(4px);
  }
}

@keyframes first-run-blur-out {
  to {
    opacity: 0;
    filter: blur(8px);
  }
}

@keyframes first-run-blur-in {
  from {
    opacity: 0;
    filter: blur(8px);
  }
}

@keyframes first-run-open-out {
  to {
    opacity: 0;
    filter: blur(8px);
  }
}

@keyframes first-run-open-in {
  from {
    opacity: 0;
    filter: blur(6px);
  }
}

.first-run-choice {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.first-run-choice-team {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-3);
  margin-bottom: 40px;
}

.first-run-choice-avatar {
  width: 52px;
  height: 52px;
  flex: none;
  animation: first-run-rise var(--openbot-duration-overlay) var(--openbot-ease-out) both;
}

.first-run-choice-avatar:nth-child(1),
.first-run-choice-avatar:nth-child(7) {
  width: 40px;
  height: 40px;
  transform: translateY(24px);
}

.first-run-choice-avatar:nth-child(2),
.first-run-choice-avatar:nth-child(6) {
  transform: translateY(8px);
}

.first-run-choice-avatar:nth-child(3),
.first-run-choice-avatar:nth-child(5) {
  width: 68px;
  height: 68px;
}

.first-run-choice-avatar:nth-child(4) {
  width: 104px;
  height: 104px;
  transform: translateY(-12px);
}

.first-run-choice-avatar:nth-child(2) {
  animation-delay: calc(var(--openbot-duration-fast) * 1);
}

.first-run-choice-avatar:nth-child(3) {
  animation-delay: calc(var(--openbot-duration-fast) * 2);
}

.first-run-choice-avatar:nth-child(4) {
  animation-delay: calc(var(--openbot-duration-fast) * 3);
}

.first-run-choice-avatar:nth-child(5) {
  animation-delay: calc(var(--openbot-duration-fast) * 4);
}

.first-run-choice-avatar:nth-child(6) {
  animation-delay: calc(var(--openbot-duration-fast) * 5);
}

.first-run-choice-avatar:nth-child(7) {
  animation-delay: calc(var(--openbot-duration-fast) * 6);
}

.first-run-choice-title {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-hero);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: -0.055em;
  line-height: 1;
  text-wrap: balance;
}

.first-run-choice .onboarding-description {
  margin-top: var(--openbot-space-4);
}

.first-run-choice-rows {
  width: min(100%, 440px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-top: var(--openbot-space-8);
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-grouped);
  background: var(--openbot-bg-grouped);
}

.first-run-choice-rows .first-run-choice-row {
  height: auto;
  min-height: 64px;
  justify-content: flex-start;
  gap: var(--openbot-space-3);
  border-radius: 0;
  padding: var(--openbot-space-3) var(--openbot-space-4);
  text-align: left;
  white-space: normal;
}

.first-run-choice-rows .first-run-choice-row + .first-run-choice-row {
  border-top-color: var(--openbot-border-grouped);
}

.first-run-choice-row-text {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-sm);
}

.first-run-choice-row-text strong {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}

.first-run-choice-logos {
  display: flex;
  gap: 6px;
}

.first-run-choice-logo {
  width: 16px;
  height: 16px;
  overflow: visible;
  fill: var(--openbot-provider-current);
}

.first-run-choice-row-chevron {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--openbot-text-dim);
}

.first-run-choice-reason {
  margin-top: var(--openbot-space-3);
}

@keyframes first-run-rise {
  from {
    opacity: 0;
    translate: 0 16px;
  }
}

@media (max-width: 760px) {
  .first-run-choice-team {
    gap: var(--openbot-space-1-5);
  }

  .first-run-choice-avatar:nth-child(1),
  .first-run-choice-avatar:nth-child(7) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .first-run-choice-avatar {
    animation: none;
  }
}

/*
 * The agents of the first screen and of the splash watch the pointer with their eyes (see
 * `followPointer`). A hovered agent grows a little and a pressed one squeezes, then both spring back.
 * The `scale` property leaves `transform` and `translate` to the arc and to the jumps. On the splash
 * the hover is on the member, which stays still: a jump under a still pointer must not start it.
 */
@media (prefers-reduced-motion: no-preference) {
  .first-run-choice-avatar,
  .first-run-launch-avatar {
    --first-run-spring: linear(
      0,
      0.035 2.1%,
      0.281 6.7%,
      0.723 12.9%,
      0.938 16.7%,
      1.077 21%,
      1.149 24.3%,
      1.163 27%,
      1.154 29.9%,
      1.129 32.8%,
      1.051 39.6%,
      1.017 43.1%,
      0.977 51%,
      0.974 53.8%,
      0.975 57.1%,
      0.997 69.8%,
      1.003 76.9%,
      1
    );

    transition: scale 560ms var(--first-run-spring);
  }

  .first-run-choice-avatar:hover,
  .first-run-launch-member:hover .first-run-launch-avatar {
    scale: 1.12;
  }

  .first-run-choice-avatar:active,
  .first-run-launch-member:active .first-run-launch-avatar {
    scale: 0.9;
    transition-duration: var(--openbot-duration-fast);
    transition-timing-function: var(--openbot-ease-out);
  }
}

/*
 * While first run waits to open the app, a splash covers it. The team from the first screen stands
 * in the same arc and jumps in a slow wave, one agent after the other. The scribble under the team
 * fills with the download; a wait with no percent draws and erases it.
 */
.first-run-launch {
  --first-run-launch-accent: var(--openbot-logo-production);
  position: absolute;
  z-index: var(--openbot-layer-dialog);
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--openbot-bg-canvas);
  -webkit-app-region: drag;
}

.first-run-launch[data-variant="dev"] {
  --first-run-launch-accent: var(--openbot-logo-dev);
}

.first-run-launch[data-variant="preview"] {
  --first-run-launch-accent: var(--openbot-logo-preview);
}

.first-run-launch-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.first-run-launch-team {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-3);
}

.first-run-launch-member {
  display: grid;
  flex: none;
}

.first-run-launch-avatar {
  width: 52px;
  height: 52px;
}

/* The same arc as the team on the first screen. */
.first-run-launch-member:nth-child(1),
.first-run-launch-member:nth-child(7) {
  translate: 0 24px;
}

.first-run-launch-member:nth-child(1) .first-run-launch-avatar,
.first-run-launch-member:nth-child(7) .first-run-launch-avatar {
  width: 40px;
  height: 40px;
}

.first-run-launch-member:nth-child(2),
.first-run-launch-member:nth-child(6) {
  translate: 0 8px;
}

.first-run-launch-member:nth-child(3) .first-run-launch-avatar,
.first-run-launch-member:nth-child(5) .first-run-launch-avatar {
  width: 68px;
  height: 68px;
}

.first-run-launch-member:nth-child(4) {
  translate: 0 -12px;
}

.first-run-launch-member:nth-child(4) .first-run-launch-avatar {
  width: 104px;
  height: 104px;
}

.first-run-launch-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.first-run-launch-scribble {
  display: block;
  width: 112px;
  height: 14px;
  overflow: visible;
}

.first-run-launch-scribble polyline {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4px;
}

.first-run-launch-track {
  stroke: color-mix(in srgb, var(--first-run-launch-accent) 18%, transparent);
}

.first-run-launch-fill {
  stroke: var(--first-run-launch-accent);
  stroke-dasharray: 1 1;
  stroke-dashoffset: calc(1 - var(--first-run-launch-percent));
  transition: stroke-dashoffset var(--openbot-duration-overlay) var(--openbot-ease-out);
}

.first-run-launch-label {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
}

@media (max-width: 760px) {
  .first-run-launch-team {
    gap: var(--openbot-space-1-5);
  }

  .first-run-launch-member:nth-child(1),
  .first-run-launch-member:nth-child(7) {
    display: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .first-run-launch-avatar {
    animation: first-run-launch-hop 1.8s var(--openbot-ease-in-out) infinite;
  }

  .first-run-launch-member:nth-child(2) .first-run-launch-avatar {
    animation-delay: 120ms;
  }

  .first-run-launch-member:nth-child(3) .first-run-launch-avatar {
    animation-delay: 240ms;
  }

  .first-run-launch-member:nth-child(4) .first-run-launch-avatar {
    animation-delay: 360ms;
  }

  .first-run-launch-member:nth-child(5) .first-run-launch-avatar {
    animation-delay: 480ms;
  }

  .first-run-launch-member:nth-child(6) .first-run-launch-avatar {
    animation-delay: 600ms;
  }

  .first-run-launch-member:nth-child(7) .first-run-launch-avatar {
    animation-delay: 720ms;
  }

  .first-run-launch-progress[data-known="false"] .first-run-launch-fill {
    stroke-dasharray: 0.35 1.2;
    transition: none;
    animation: first-run-launch-scribble 1.8s var(--openbot-ease-in-out) infinite;
  }
}

/* A short jump, then a rest, so the wave reads as one team and not as noise. */
@keyframes first-run-launch-hop {
  0%,
  36%,
  100% {
    transform: translateY(0);
  }
  16% {
    transform: translateY(-12px);
  }
}

@keyframes first-run-launch-scribble {
  from {
    stroke-dashoffset: 0.35;
  }
  to {
    stroke-dashoffset: -1.2;
  }
}

/* The read error reuses the sign-in screen; its one secondary action sits under the primary button. */
.setup-read-error-actions {
  justify-content: center;
  margin-top: var(--openbot-space-3);
}


/* /@fs//app/packages/ui/src/features/account/language-wheel.css */
/* The language wheel: the first screen, before sign-in. It reuses the sign-in screen's frame. */

.language-wheel-shell {
  width: min(100%, 360px);
  min-height: 100%;
  margin-inline: auto;
  padding: var(--openbot-space-8) var(--openbot-space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-3);
  -webkit-app-region: no-drag;
}

.language-wheel-shell .account-login-brand-lockup {
  margin-bottom: var(--openbot-space-4);
}

.language-wheel-title {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}

.language-wheel-frame {
  position: relative;
  width: 100%;
}

/* To the right of the centre band, so the names stay centred over Continue. */
.language-wheel-arrows {
  position: absolute;
  top: 50%;
  left: calc(100% + var(--openbot-space-2));
  translate: 0 -50%;
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
}

.language-wheel-arrows svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
}

.language-wheel {
  --row: 44px;
  position: relative;
  width: 100%;
  height: calc(var(--row) * 5);
  /* Not `hidden`: focus on a radio outside the band, as a screen reader moves it, would scroll the rows off the band. */
  overflow: clip;
  cursor: grab;
  touch-action: none;
  user-select: none;
  mask-image: linear-gradient(
    transparent,
    var(--openbot-text-primary) 30%,
    var(--openbot-text-primary) 70%,
    transparent
  );
}

.language-wheel[data-dragging] {
  cursor: grabbing;
}

/* The centre band: where the selected language sits. */
.language-wheel::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: calc(var(--row) * 2);
  height: var(--row);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-grouped);
}

.language-wheel:has(:focus-visible)::before {
  box-shadow:
    inset 0 0 0 1px var(--openbot-border-focus),
    var(--openbot-focus-ring);
}

.language-wheel-track {
  position: relative;
  height: 100%;
}

/* Each row sits at its own distance from the centre, so the loop needs no copies of the list. */
.language-wheel-item {
  position: absolute;
  inset-inline: 0;
  top: calc(var(--row) * 2);
  height: var(--row);
  translate: 0 calc(var(--offset) * var(--row));
  /* Gone by the third row, where the row on the far side of the loop changes ends. */
  opacity: max(0, 1 - var(--distance) * 0.35);
  transition:
    translate var(--openbot-duration-overlay) var(--openbot-ease-out),
    opacity var(--openbot-duration-overlay) var(--openbot-ease-out);
}

/* The whole row selects its language, at every size. */
.language-wheel-label {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-3xl);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: -0.03em;
  line-height: 1;
  cursor: inherit;
}

/* Rows shrink away from the centre. */
.language-wheel-name {
  display: flex;
  align-items: center;
  gap: 0.4em;
  scale: max(0.6, 1 - var(--distance) * 0.2);
  transition: scale var(--openbot-duration-overlay) var(--openbot-ease-out);
}

/* Following the pointer: no easing, or the wheel lags behind the finger. */
.language-wheel[data-dragging] :is(.language-wheel-item, .language-wheel-name) {
  transition: none;
}

.language-wheel-flag {
  scale: 0.9;
  letter-spacing: 0;
}

/* Continue: a full arrow that steps forward on hover, on a background that stays solid. */
.language-wheel-continue {
  width: min(100%, 288px);
  min-height: 44px;
  margin-top: var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
}

.language-wheel-continue svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  transition: translate var(--openbot-duration-normal) var(--openbot-ease-out);
}

.language-wheel-continue:hover:not(:disabled) {
  background: var(--openbot-surface-light);
}

.language-wheel-continue:is(:hover, :focus-visible):not(:disabled) svg {
  translate: var(--openbot-space-1) 0;
}

.language-wheel-continue:active:not(:disabled) svg {
  translate: var(--openbot-space-2) 0;
}

@media (prefers-reduced-motion: reduce) {
  .language-wheel-item,
  .language-wheel-name,
  .language-wheel-continue svg {
    transition: none;
  }
}


/* /@fs//app/packages/ui/src/features/account/app-loading-screen.css */
/*
 * The app loading screen. Three agents hop in a wave with squash and stretch, and their shadows shrink
 * under them. A fourth agent sleeps: it breathes slowly and snores. Joke status lines change below.
 * When the app is ready, the crew jumps out through the top of the screen, and the sleeper floats
 * up after them, still asleep. When the app is ready very soon, the screen only fades.
 * The component sets --app-loading-wave and --app-loading-stagger, so the hops keep time with its
 * clock, and --app-loading-at, so every animation starts at the clock's time.
 */

.app-loading {
  --app-loading-exit-delay: 0ms;
  --app-loading-play: running;
  --app-loading-at: 0s;
  position: absolute;
  z-index: var(--openbot-layer-dialog);
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--openbot-bg-canvas);
  -webkit-app-region: drag;
}

.app-loading-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.app-loading-row {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  padding-top: 48px;
}

.app-loading-agent {
  position: relative;
  width: 56px;
  height: 56px;
}

/* The shadow on the floor. */
.app-loading-agent::after {
  position: absolute;
  z-index: -1;
  bottom: -8px;
  left: 50%;
  width: 70%;
  height: 8px;
  border-radius: var(--openbot-radius-pill);
  background: color-mix(in srgb, var(--openbot-text-muted) 24%, transparent);
  content: "";
  transform: translateX(-50%);
}

.app-loading-body {
  position: relative;
  width: 100%;
  height: 100%;
  transform-origin: 50% 100%;
}

.app-loading-bot {
  display: block;
  width: 100%;
  height: 100%;
}

.app-loading[data-scrub] {
  --app-loading-play: paused;
}

/* A point at the top right of the sleeper's head. The marks rise from it. */
.app-loading-snore {
  position: absolute;
  top: 13px;
  left: 37px;
  transition: opacity var(--openbot-duration-normal) var(--openbot-ease-out);
}

.app-loading:not([data-phase="loading"]) .app-loading-snore {
  opacity: 0;
}

/* Without motion, the three marks make a small still staircase. */
.app-loading-z {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 9px;
  height: 9px;
  scale: calc(0.7 + var(--app-loading-z-index) * 0.15);
  translate: calc(var(--app-loading-z-index) * 6px) calc(var(--app-loading-z-index) * -9px);
}

.app-loading-z-mark {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: var(--openbot-text-muted);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2px;
}

.app-loading-status {
  min-height: 20px;
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
}

.app-loading-line {
  display: block;
}

/* The fade also runs with reduced motion: its animationend removes the screen. */
.app-loading:not([data-phase="loading"]) {
  pointer-events: none;
  -webkit-app-region: no-drag;
  animation: app-loading-exit var(--openbot-duration-overlay) var(--openbot-ease-in-out) var(--app-loading-exit-delay)
    forwards;
}

@media (prefers-reduced-motion: no-preference) {
  /* The crew jumps out before the screen fades. */
  .app-loading[data-phase="exit"] {
    --app-loading-exit-delay: 760ms;
  }

  /* Loading. The stage waits before it shows, so a fast load does not flash the crew. */

  .app-loading-stage {
    animation: app-loading-enter var(--openbot-duration-overlay) var(--openbot-ease-out)
      calc(250ms - var(--app-loading-at)) both var(--app-loading-play);
  }

  .app-loading-agent:not([data-sleeper]) .app-loading-body {
    animation: app-loading-hop var(--app-loading-wave) var(--openbot-ease-in-out)
      calc(var(--app-loading-index) * var(--app-loading-stagger) - var(--app-loading-at)) infinite
      var(--app-loading-play);
  }

  .app-loading-agent:not([data-sleeper])::after {
    animation: app-loading-shadow var(--app-loading-wave) var(--openbot-ease-in-out)
      calc(var(--app-loading-index) * var(--app-loading-stagger) - var(--app-loading-at)) infinite
      var(--app-loading-play);
  }

  /* One breath every 3.6s: in for 1.8s, out for 1.8s. */
  .app-loading-agent[data-sleeper] .app-loading-body {
    animation: app-loading-breathe 1.8s var(--openbot-ease-in-out) calc(0s - var(--app-loading-at)) infinite alternate
      var(--app-loading-play);
  }

  /* Each mark rises on one long curve, so it does not stop between keyframes. A separate sway
   * rocks it from side to side while it rises. */
  .app-loading-z {
    --app-loading-z-delay: calc(var(--app-loading-z-index) * 1.2s - var(--app-loading-at));
    opacity: 0;
    animation:
      app-loading-z-rise 3.6s cubic-bezier(0.33, 0.1, 0.4, 1) var(--app-loading-z-delay) infinite
      var(--app-loading-play),
      app-loading-z-fade 3.6s linear var(--app-loading-z-delay) infinite var(--app-loading-play);
  }

  .app-loading-z-mark {
    animation: app-loading-z-sway 0.9s var(--openbot-ease-in-out) var(--app-loading-z-delay) infinite alternate
      var(--app-loading-play);
  }

  .app-loading-line {
    animation: app-loading-line-in 280ms var(--openbot-ease-out);
  }

  .app-loading[data-scrub] .app-loading-line {
    animation: none;
  }

  /* Exit: the sleeper leaves last. The "fade" phase keeps the loading animations. */

  .app-loading[data-phase="exit"] .app-loading-body {
    animation: app-loading-leap 640ms var(--openbot-ease-in-out) calc(var(--app-loading-index, 0) * 70ms) forwards;
  }

  /* The sleeper keeps breathing and floats up. `translate` adds to the breath's `transform`, so the
   * body does not jump when the exit starts. */
  .app-loading[data-phase="exit"] [data-sleeper] .app-loading-body {
    animation:
      app-loading-breathe 1.8s var(--openbot-ease-in-out) calc(0s - var(--app-loading-at)) infinite alternate,
      app-loading-drift 720ms cubic-bezier(0.5, 0, 0.9, 0.5) 200ms forwards;
  }

  .app-loading[data-phase="exit"] .app-loading-agent::after {
    animation: app-loading-shadow-out 320ms var(--openbot-ease-out) calc(var(--app-loading-index, 0) * 70ms + 120ms)
      forwards;
  }

  .app-loading[data-phase="exit"] [data-sleeper]::after {
    animation-delay: 480ms;
  }

  .app-loading:not([data-phase="loading"]) .app-loading-status {
    animation: app-loading-fade 200ms var(--openbot-ease-out) forwards;
  }
}

@keyframes app-loading-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

@keyframes app-loading-hop {
  0%,
  78%,
  100% {
    transform: translateY(0) scale(1, 1);
  }
  10% {
    transform: translateY(0) scale(1.14, 0.86);
  }
  28% {
    transform: translateY(-30px) scale(0.9, 1.1);
  }
  44% {
    transform: translateY(-40px) scale(1, 1);
  }
  62% {
    transform: translateY(0) scale(0.94, 1.06);
  }
  68% {
    transform: translateY(0) scale(1.16, 0.84);
  }
}

@keyframes app-loading-shadow {
  0%,
  62%,
  100% {
    opacity: 1;
    transform: translateX(-50%) scaleX(1);
  }
  68% {
    transform: translateX(-50%) scaleX(1.15);
  }
  44% {
    opacity: 0.45;
    transform: translateX(-50%) scaleX(0.55);
  }
}

@keyframes app-loading-breathe {
  from {
    transform: scale(1, 1);
  }
  to {
    transform: scale(0.97, 1.04) rotate(-1.5deg);
  }
}

/* Starts at zero speed, so the lift has no jolt. */
@keyframes app-loading-drift {
  from {
    opacity: 1;
    translate: 0 0;
  }
  60% {
    opacity: 1;
  }
  to {
    opacity: 0;
    translate: 0 -40vh;
  }
}

@keyframes app-loading-z-rise {
  from {
    scale: 0.45;
    translate: 0 0;
  }
  to {
    scale: 1.1;
    translate: 12px -30px;
  }
}

@keyframes app-loading-z-fade {
  0%,
  100% {
    opacity: 0;
  }
  18%,
  60% {
    opacity: 1;
  }
}

@keyframes app-loading-z-sway {
  from {
    transform: translateX(-2px) rotate(-14deg);
  }
  to {
    transform: translateX(2px) rotate(12deg);
  }
}

@keyframes app-loading-line-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@keyframes app-loading-leap {
  0% {
    transform: translateY(0) scale(1, 1);
  }
  25% {
    transform: translateY(0) scale(1.2, 0.8);
  }
  45% {
    opacity: 1;
    transform: translateY(-40px) scale(0.85, 1.2);
  }
  100% {
    opacity: 0;
    transform: translateY(-70vh) scale(0.85, 1.2);
  }
}

@keyframes app-loading-shadow-out {
  to {
    opacity: 0;
    transform: translateX(-50%) scaleX(0.3);
  }
}

@keyframes app-loading-fade {
  to {
    opacity: 0;
  }
}

@keyframes app-loading-exit {
  to {
    opacity: 0;
  }
}

.server-connection-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3);
  background: var(--openbot-bg-canvas);
  border-bottom: 1px solid var(--openbot-border);
}
.server-connection-notice p {
  margin: 0;
}
.server-connection-detail {
  color: var(--openbot-text-muted);
  font-variant-numeric: tabular-nums;
  text-wrap: pretty;
}
.server-connection-actions {
  display: flex;
  gap: var(--openbot-space-2);
  -webkit-app-region: no-drag;
}
.server-connection-content {
  position: relative;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.server-connection-content[hidden] {
  display: none;
}


/* /@fs//app/packages/ui/src/features/account/auth.css */
.account-login-screen,
.initial-setup-screen {
  position: absolute;
  z-index: var(--openbot-layer-dialog);
  inset: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow-y: auto;
  -webkit-app-region: drag;
}

.account-login-screen {
  padding: 32px 24px;
  background: var(--openbot-bg-canvas);
}

.initial-setup-screen {
  padding: 52px 24px 32px;
  background: radial-gradient(circle at 50% 18%, var(--openbot-hover), transparent 34%), var(--openbot-bg-canvas);
}

.account-login-shell {
  width: min(100%, 360px);
  display: flex;
  flex-direction: column;
  -webkit-app-region: no-drag;
}

.account-login-brand-lockup {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 24px;
  margin-bottom: 42px;
}

.account-login-logo {
  display: block;
  width: 80px;
  height: 80px;
}

.account-login-wordmark {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-display);
  font-weight: 620;
  letter-spacing: -0.015em;
  line-height: var(--openbot-leading-display);
}

.account-login {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: center;
}

.account-login h1 {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-3xl);
  font-weight: 580;
  letter-spacing: -0.035em;
  line-height: 30px;
}

.account-login-description {
  margin: 8px 0 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-lg);
  line-height: 21px;
}

.account-login-description strong {
  color: var(--openbot-text-primary);
  font-weight: 560;
}

.account-login-error {
  margin: 0;
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
  line-height: 17px;
  text-align: left;
}

.account-login > .account-login-error {
  margin-top: 18px;
}

.account-login-loader {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 28px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
}

.account-login-spinner,
.account-login-button-spinner {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  border: 1.5px solid var(--openbot-border-strong);
  border-top-color: currentColor;
  border-radius: var(--openbot-radius-pill);
  animation: account-login-spin 900ms linear infinite;
}

.account-login-button-spinner {
  width: 13px;
  height: 13px;
}

.account-login-primary {
  width: 100%;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-surface-light);
  color: var(--openbot-text-on-light);
  font-size: var(--openbot-text-md);
  font-weight: 650;
  transition:
    background-color var(--openbot-duration-hover) ease,
    border-color var(--openbot-duration-hover) ease,
    transform var(--openbot-duration-fast) cubic-bezier(0.23, 1, 0.32, 1);
}

.account-login > .account-login-primary {
  margin-top: 30px;
}

@keyframes account-login-spin {
  to {
    transform: rotate(360deg);
  }
}

.account-login-form {
  width: 100%;
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

.account-login-local-data {
  margin: 4px 0 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 17px;
  text-align: center;
  text-wrap: balance;
}

/* Inline, so the lock stays beside the first word when the sentence wraps. */
.account-login-local-data svg {
  display: inline-block;
  margin-right: 6px;
  vertical-align: -2px;
}

.account-login-email-field {
  display: grid;
  gap: 12px;
}

.account-login-form input:not(.otp-input-native) {
  width: 100%;
  height: 44px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  outline: 0;
  background: var(--openbot-bg-control);
  padding: 0 12px;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  transition:
    border-color var(--openbot-duration-hover) ease,
    background-color var(--openbot-duration-hover) ease,
    box-shadow var(--openbot-duration-hover) ease;
}

.account-login-form input:not(.otp-input-native):focus {
  border-color: var(--openbot-border-focus);
  background: var(--openbot-bg-surface);
  box-shadow: 0 0 0 3px var(--openbot-accent-soft);
}

.account-login-form input:not(.otp-input-native)[aria-invalid="true"] {
  border-color: var(--openbot-danger);
}

.account-login-form input:not(.otp-input-native)::placeholder {
  color: var(--openbot-text-placeholder);
}

.account-login-field-error {
  height: 16px;
  overflow: hidden;
  margin: -2px 0 0;
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-login-form input:not(.otp-input-native).t-input.is-error {
  border-color: var(--openbot-danger);
}

.account-login-primary:disabled,
.account-login-primary[aria-disabled="true"],
.account-login-code-action:disabled,
.account-login-code-action[aria-disabled="true"] {
  cursor: default;
  opacity: 0.48;
}

.account-login-code-actions {
  width: 100%;
  min-height: var(--openbot-control-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.account-login-code-action {
  width: auto;
}

.account-login-code-action-change {
  justify-content: flex-start;
}

.account-login-code-action-resend {
  justify-content: flex-end;
}

.account-login-development-code {
  margin: 0;
  color: var(--openbot-warning);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--openbot-text-sm);
  line-height: 16px;
  text-align: left;
}

@media (hover: hover) and (pointer: fine) {
  .account-login-primary:hover:not(:disabled, [aria-disabled="true"]) {
    background: var(--openbot-text-primary);
  }

  .account-login-form input:not(.otp-input-native):hover:not(:focus) {
    border-color: var(--openbot-border-strong);
    background: var(--openbot-bg-surface);
  }
}

.account-login-primary:active:not(:disabled, [aria-disabled="true"]) {
  transform: scale(0.98);
}

.initial-setup {
  width: min(100%, 620px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  -webkit-app-region: no-drag;
}

.initial-setup-header {
  max-width: 560px;
}

.initial-setup-account-row {
  min-height: 28px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
}

.initial-setup-account {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.initial-setup-account i {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success);
  box-shadow: 0 0 0 3px var(--openbot-success-soft);
}

.initial-setup-signout,
.initial-setup-back {
  border: 0;
  background: transparent;
  color: var(--openbot-text-muted);
}

.initial-setup-signout {
  margin-left: 2px;
  padding: 5px 7px;
  font-size: var(--openbot-text-sm);
}

.initial-setup-signout:hover,
.initial-setup-back:hover {
  color: var(--openbot-text-secondary);
}

.initial-setup-back {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  margin-right: 3px;
  border-radius: var(--openbot-radius-pill);
  padding: 0;
}

.initial-setup-back:hover {
  background: var(--openbot-hover);
}

.initial-setup-back svg {
  width: 18px;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}

.initial-setup-eyebrow {
  margin: 0 0 9px;
  color: var(--text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.initial-setup h1 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--openbot-text-display);
  font-weight: 560;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.initial-setup-intro {
  max-width: 540px;
  margin: 12px 0 0;
  color: var(--text-secondary);
  font-size: var(--openbot-text-lg);
  line-height: 1.55;
}

.setup-route-list {
  display: grid;
  gap: 10px;
  margin-top: 30px;
  padding: 0;
  list-style: none;
}

.setup-route-button {
  width: 100%;
  min-height: 96px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 15px;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-canvas);
  padding: 15px 17px;
  color: var(--openbot-text-primary);
  text-align: left;
  transition:
    border-color var(--openbot-duration-hover) ease,
    background-color var(--openbot-duration-hover) ease,
    transform var(--openbot-duration-hover) ease;
}

.setup-route-button:hover {
  border-color: var(--openbot-text-dim);
  background: var(--openbot-bg-sidebar);
  transform: translateY(-1px);
}

.setup-route-button:active {
  transform: translateY(0);
  transition-duration: var(--openbot-duration-hover), var(--openbot-duration-hover), var(--openbot-duration-fast);
}

.setup-route-icon {
  position: relative;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-hover);
  color: var(--openbot-text-secondary);
}

.setup-route-icon svg {
  width: 23px;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}

.setup-route-icon i {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--openbot-bg-canvas);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
}

.setup-route-icon-local i {
  background: var(--openbot-success);
}

.setup-route-copy {
  display: grid;
  gap: 4px;
}

.setup-route-copy strong {
  font-size: var(--openbot-text-lg);
  font-weight: 600;
}

.setup-route-copy small {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 17px;
}

.setup-route-arrow {
  width: 19px;
  fill: none;
  stroke: var(--openbot-text-muted);
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--openbot-duration-hover) ease;
}

.setup-route-button:hover .setup-route-arrow {
  transform: translateX(2px);
}

.setup-local-content {
  margin-top: 28px;
}

.setup-remote-form {
  display: grid;
  gap: 15px;
  margin-top: 28px;
}

.setup-remote-form label {
  display: grid;
  gap: 7px;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: 560;
}

.setup-remote-form input,
.setup-remote-form textarea {
  width: 100%;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  outline: 0;
  background: var(--openbot-bg-canvas);
  padding: 11px 12px;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: 18px;
  resize: none;
}

.setup-remote-form input {
  min-height: 43px;
}

.setup-remote-form input:focus,
.setup-remote-form textarea:focus {
  border-color: var(--openbot-text-dim);
  background: var(--openbot-bg-sidebar);
}

.setup-remote-form input::placeholder,
.setup-remote-form textarea::placeholder {
  color: var(--openbot-text-dim);
}

.setup-remote-note {
  margin: -2px 1px 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
}

.setup-remote-change {
  width: fit-content;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

.setup-remote-change:hover:not(:disabled) {
  color: var(--openbot-text-secondary);
}

.provider-picker {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

.provider-picker-standalone {
  margin-top: 24px;
}

.setup-local-content .provider-picker-standalone {
  margin-top: 0;
}

.provider-picker-label {
  margin-bottom: 7px;
  padding: 0;
  color: var(--text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: 560;
}

.provider-picker-heading {
  display: flex;
  min-height: 25px;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  margin-bottom: 7px;
}

.provider-picker-heading .provider-picker-label {
  margin-bottom: 0;
}

.ui-button.provider-picker-refresh {
  min-height: 25px;
  gap: var(--openbot-space-1);
  border-radius: var(--openbot-radius-md);
  color: var(--openbot-text-muted);
  padding-inline: var(--openbot-space-2);
}

.ui-button.provider-picker-refresh:hover:not(:disabled, [aria-disabled="true"]) {
  color: var(--openbot-text-primary);
}

.provider-picker-list {
  overflow: hidden;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-sidebar);
}

.provider-picker-option {
  min-height: 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  color: var(--text-primary);
}

.provider-picker-option-selection {
  min-width: 0;
  min-height: 44px;
  display: grid;
  grid-template-columns: 16px 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0 8px 12px;
  cursor: pointer;
}

/* The custom row follows the radio group rather than a radio, so the sibling rule cannot reach it. */
.provider-picker-option + .provider-picker-option,
.provider-picker-option-custom {
  border-top: 1px solid var(--openbot-border);
}

.provider-picker-option:hover:not(.provider-picker-option-unavailable),
.provider-picker-option:focus-within {
  background: var(--openbot-hover);
}

.provider-picker-option-selected {
  background: var(--openbot-hover);
}

.provider-picker-option-unavailable {
  color: var(--openbot-text-muted);
}

.provider-picker-option-unavailable .provider-picker-option-selection {
  cursor: default;
}

.provider-picker-option-selectable-unavailable .provider-picker-option-selection {
  cursor: pointer;
}

.provider-picker-option-selectable-unavailable:hover {
  background: var(--openbot-hover);
}

.provider-picker-option input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--openbot-text-primary);
}

/* The actions share the grid cell the row reserves for them. In this variant the buttons carry
   their own trailing margin, which both separates them and holds the last one off the edge. */
.provider-picker-actions {
  display: flex;
  align-items: center;
}

.ui-button.provider-picker-install {
  min-width: 58px;
  min-height: 28px;
  margin-right: 8px;
  border-radius: var(--openbot-radius-md);
  padding-inline: 9px;
}

.ui-button.provider-picker-connect {
  background: var(--openbot-accent);
  color: var(--openbot-text-primary);
}

@media (hover: hover) and (pointer: fine) {
  .ui-button.provider-picker-connect:hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-accent-hover);
  }
}

.provider-picker-logo {
  width: 18px;
  height: 18px;
  overflow: visible;
  fill: var(--openbot-provider-current);
}

/* A custom endpoint has no brand mark, so a stroke icon takes the logo column. Until an endpoint
   exists the radio column before it stays empty, because the row can then only add. */
.provider-picker-custom-mark {
  width: 18px;
  height: 18px;
  grid-column: 2;
  color: var(--openbot-text-secondary);
  stroke-width: var(--openbot-icon-stroke);
}

.provider-picker-option-unavailable .provider-picker-logo,
.provider-picker-option-unavailable .provider-picker-custom-mark {
  opacity: 0.44;
}

.provider-picker-option-runtime {
  color: var(--openbot-text-primary);
}

.provider-picker-option-runtime .provider-picker-logo {
  opacity: 1;
}

.provider-picker-identity {
  display: grid;
  min-width: 0;
}

.provider-picker-name,
.provider-picker-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.provider-picker-name {
  font-size: var(--openbot-text-md);
  font-weight: 530;
  line-height: 18px;
}

.provider-picker-email {
  color: var(--text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 15px;
}

.provider-picker-check-error {
  overflow: hidden;
  color: var(--openbot-warning);
  font-size: var(--openbot-text-sm);
  line-height: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The reason a row is not ready is the sentence the user acts on, so it wraps rather than ends in an
   ellipsis. */
.provider-picker-status-message {
  overflow: visible;
  white-space: normal;
}

/* The agents that keep a provider on, on a line of its own below the row and in line with the name.
   The row grows to show the whole sentence, because the user must read which agents to change. */
.provider-picker-check-error.provider-picker-used-by {
  grid-column: 1 / -1;
  overflow: visible;
  margin-top: -6px;
  padding: 0 0 8px 66px;
  white-space: normal;
}

.provider-picker-option-selected .provider-picker-email {
  color: var(--openbot-text-readable);
}

/* The same icon size as the other small buttons of the row. */
.provider-picker-add-account svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}

/* The accounts of a provider, on lines of their own below its row and in line with its name. */
.provider-picker-accounts {
  grid-column: 1 / -1;
  display: grid;
  gap: 4px;
  margin-top: -6px;
  padding: 0 0 8px 66px;
}

.provider-picker-account-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.provider-picker-account {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}

.provider-picker-account + .provider-picker-account {
  border-top: 1px solid var(--openbot-border);
}

.provider-picker-account-copy {
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  gap: 2px;
}

.provider-picker-account .provider-picker-check-error {
  white-space: normal;
}

.provider-picker-account-rename {
  max-width: 220px;
}

/* The version and the status badge, in the one cell the row's last column reserves. They are read
   together - "v2.1.246" and "Ready" answer one question between them - and a shared cell keeps a
   provider with no version to report from leaving a gap where the badge used to sit. */
.provider-picker-state {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* The installed version. Muted, because it answers a question a user asks once and then stops
   asking, and tabular so that a version which changes under a running update replaces itself
   without shifting the badge beside it. */
.provider-picker-version {
  overflow: hidden;
  color: var(--text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.provider-picker-option-selected .provider-picker-version {
  color: var(--openbot-text-readable);
}

.provider-picker-status {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
  white-space: nowrap;
}

/* How many endpoints the Custom provider row stands for. It reads like a status badge, because it
   sits in the same cell and answers the same kind of question, but it reports no state. */
.provider-picker-custom-count {
  color: var(--text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
  white-space: nowrap;
}

/* The same count, as the button that opens the saved endpoints. It keeps the badge's quiet colour
   and sits with the row's other actions, so it needs their margin and the button's own specificity. */
.ui-button.provider-picker-custom-count {
  min-height: 28px;
  margin-right: 8px;
  border-radius: var(--openbot-radius-md);
  padding-inline: 9px;
  color: var(--text-muted);
  font-size: var(--openbot-text-sm);
}

.provider-picker-status-available {
  color: var(--openbot-success);
}

.provider-picker-status-sign-in-required,
.provider-picker-status-outdated,
.provider-picker-status-update-available {
  color: var(--openbot-warning);
}

.provider-picker-status-ready {
  color: var(--openbot-success);
}

.provider-picker-status-download-error {
  color: var(--openbot-danger);
}

.provider-picker-status-finishing {
  color: var(--openbot-warning);
}

.provider-picker-status-not-installed,
.provider-picker-status-checking,
.provider-picker-status-error {
  color: var(--openbot-text-muted);
}

.provider-picker-status i {
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-dim);
}

.provider-picker-status-available i {
  background: var(--openbot-success);
}

.provider-picker-status-sign-in-required i,
.provider-picker-status-outdated i,
.provider-picker-status-update-available i {
  background: var(--openbot-warning);
}

.provider-picker-status-not-installed i,
.provider-picker-status-checking i,
.provider-picker-status-error i {
  background: var(--openbot-text-dim);
}

.provider-picker-hint {
  margin: 7px 0 0;
  color: var(--text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
}

/* "More providers" is a button below the list, beside the hint. It uses the style of the heading's
 * Refresh button, so the picker has one kind of small list action. */
.provider-picker-footer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  margin-top: 7px;
}

.provider-picker-footer .provider-picker-hint {
  margin: 0;
}

.ui-button.provider-picker-more {
  flex: 0 0 auto;
  gap: var(--openbot-space-1-5);
  margin-inline-start: auto;
  margin-inline-end: calc(var(--openbot-space-2) * -1);
}

.provider-picker-logo-stack {
  position: relative;
  z-index: 0;
  display: inline-flex;
}

.provider-picker-logo-stack-mark {
  position: relative;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control-active);
  box-shadow: 0 0 0 2px var(--openbot-bg-canvas);
}

.provider-picker-logo-stack-mark + .provider-picker-logo-stack-mark {
  z-index: -1;
  margin-inline-start: -4px;
}

.provider-picker-logo-stack-mark .provider-picker-logo {
  width: 12px;
  height: 12px;
}

/* The "More providers" dialog uses the custom provider dialog frame: a title, a close button and
 * one plain list. It is pinned near the top, so it does not move when a search changes its height. */
.custom-provider-backdrop.provider-more-backdrop {
  align-items: start;
  padding-top: min(14vh, 120px);
}

.custom-provider-dialog.provider-more-dialog {
  width: min(400px, 100%);
  max-height: min(600px, calc(100dvh - min(14vh, 120px) - var(--openbot-space-6)));
  padding: var(--openbot-space-2);
}

.provider-more-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-3);
}

.provider-more-title {
  margin: 0;
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
}

.ui-input.provider-more-search {
  flex-shrink: 0;
  margin: var(--openbot-space-1) 0 var(--openbot-space-2);
}

.provider-more-search::-webkit-search-cancel-button {
  appearance: none;
}

.provider-more-list {
  min-height: 0;
  overflow-y: auto;
}

/* The name and description that the picker rows use; the full row is the target. */
.ui-button.provider-more-row {
  width: 100%;
  height: auto;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  justify-content: stretch;
  align-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  border: 0;
  border-radius: var(--openbot-radius-md);
  color: inherit;
  font: inherit;
  line-height: normal;
  text-align: left;
  white-space: normal;
}

.ui-button.provider-more-row:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: -2px;
}

.provider-more-row .provider-picker-custom-mark {
  grid-column: auto;
}

.provider-more-divider {
  height: 1px;
  margin: var(--openbot-space-1) var(--openbot-space-3);
  border: 0;
  background: var(--openbot-border);
}

.provider-more-empty {
  margin: 0;
  padding: var(--openbot-space-2) var(--openbot-space-3);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

.initial-setup-error {
  margin: 12px 2px 0;
  color: var(--openbot-danger);
  font-size: var(--openbot-text-md);
  line-height: 1.45;
}

.initial-setup-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 20px;
}

.initial-setup-save {
  min-height: 40px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  padding: 12px 18px;
  font-size: var(--openbot-text-md);
  font-weight: 620;
}

.initial-setup-save {
  min-width: 180px;
  background: var(--openbot-text-primary);
  color: var(--openbot-bg-sidebar);
  transition:
    transform var(--openbot-duration-normal) ease,
    background var(--openbot-duration-hover) ease;
}

.initial-setup-save:hover:not(:disabled) {
  background: var(--openbot-text-primary);
}

.initial-setup-save:disabled {
  cursor: default;
  opacity: 0.48;
}

.initial-setup-save:active:not(:disabled) {
  transform: scale(0.992);
}

@media (max-width: 620px) {
  .initial-setup-screen {
    place-items: start center;
    padding: 52px 18px 24px;
  }

  .account-login-screen {
    padding-inline: 18px;
  }

  .initial-setup-actions,
  .initial-setup-save {
    width: 100%;
  }

  .initial-setup-actions {
    flex-direction: column-reverse;
  }

  .setup-route-button {
    grid-template-columns: 42px minmax(0, 1fr) 18px;
    gap: 12px;
    padding-inline: 13px;
  }

  .setup-route-icon {
    width: 42px;
    height: 42px;
  }

  .initial-setup-account {
    max-width: 55vw;
  }
}

@media (max-width: 480px) {
  .account-login-screen {
    padding: 40px 20px;
  }

  .account-login-brand-lockup {
    margin-bottom: 24px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .account-login,
  .initial-setup {
    animation: setup-enter var(--openbot-duration-overlay) cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }

  .account-login[data-transition="forward"] .account-login-title,
  .account-login[data-transition="forward"] .account-login-description {
    animation: account-login-copy-forward var(--openbot-duration-overlay) var(--openbot-ease-out) both;
  }

  .account-login[data-transition="back"] .account-login-title,
  .account-login[data-transition="back"] .account-login-description {
    animation: account-login-copy-back var(--openbot-duration-overlay) var(--openbot-ease-out) both;
  }

  .account-login[data-transition] .account-login-description {
    animation-delay: 18ms;
  }

  .account-login[data-transition="forward"] .account-login-form[data-auth-panel="code"] {
    animation: account-login-panel-forward var(--openbot-duration-overlay) 32ms var(--openbot-ease-out) both;
  }

  .account-login[data-transition="back"] .account-login-form[data-auth-panel="email"] {
    animation: account-login-panel-back var(--openbot-duration-overlay) 32ms var(--openbot-ease-out) both;
  }

  @keyframes setup-enter {
    from {
      opacity: 0;
      transform: translateY(6px);
    }
  }

  @keyframes account-login-copy-forward {
    from {
      filter: blur(4px);
      opacity: 0;
      transform: translateX(10px);
    }
  }

  @keyframes account-login-copy-back {
    from {
      filter: blur(4px);
      opacity: 0;
      transform: translateX(-10px);
    }
  }

  @keyframes account-login-panel-forward {
    from {
      filter: blur(6px);
      opacity: 0;
      transform: translateX(16px) scale(0.985);
    }
  }

  @keyframes account-login-panel-back {
    from {
      filter: blur(6px);
      opacity: 0;
      transform: translateX(-16px) scale(0.985);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .account-login-spinner,
  .approval-card {
    animation: none;
  }

  .account-login[data-transition] .account-login-title,
  .account-login[data-transition] .account-login-description,
  .account-login[data-transition] .account-login-form[data-auth-panel] {
    animation: none;
  }
}

button {
  cursor: pointer;
}

button:not(.ui-button):focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}

::selection {
  background: var(--openbot-accent-strong);
}

/* No vertical scroll bar: the wheel, the trackpad and the keyboard still scroll. Horizontal bars
 * stay, because a mouse wheel cannot scroll a code block or a table sideways. */
::-webkit-scrollbar {
  width: 0;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-border-strong);
  background-clip: padding-box;
}

.scroll-fade-top:not(.scroll-fade-bottom) {
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    var(--openbot-text-primary) 18px,
    var(--openbot-text-primary) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    var(--openbot-text-primary) 18px,
    var(--openbot-text-primary) 100%
  );
}

.scroll-fade-bottom:not(.scroll-fade-top) {
  -webkit-mask-image: linear-gradient(
    to bottom,
    var(--openbot-text-primary) 0,
    var(--openbot-text-primary) calc(100% - 18px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    var(--openbot-text-primary) 0,
    var(--openbot-text-primary) calc(100% - 18px),
    transparent 100%
  );
}

.scroll-fade-top.scroll-fade-bottom {
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    var(--openbot-text-primary) 18px,
    var(--openbot-text-primary) calc(100% - 18px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    var(--openbot-text-primary) 18px,
    var(--openbot-text-primary) calc(100% - 18px),
    transparent 100%
  );
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body,
.account-login-screen,
.initial-setup-screen,
.app-frame,
.conversation-panel,
.direct-conversation {
  background: var(--openbot-bg-canvas);
}

.panel-edge,
.direct-conversation-header,
.remote-desktop-header,
.settings-panel,
.browser-panel,
.remote-desktop-workspace,
.provider-picker-list {
  border-color: var(--openbot-border);
}

.search-field,
.composer,
.direct-composer,
.settings-field input,
.settings-field textarea,
.settings-field select,
.setup-remote-form input,
.setup-remote-form textarea,
.account-login-form input {
  border-color: var(--openbot-border);
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-primary);
}

.search-field:focus-within,
.composer:focus-within,
.direct-composer:focus-within,
.settings-field input:focus,
.settings-field textarea:focus,
.settings-field select:focus,
.setup-remote-form input:focus,
.setup-remote-form textarea:focus,
.account-login-form input:focus {
  border-color: var(--openbot-border-focus);
  background: var(--openbot-bg-surface-raised);
}

.search-field input::placeholder,
.composer-editor-placeholder,
.direct-composer textarea::placeholder,
.settings-field input::placeholder,
.settings-field textarea::placeholder,
.setup-remote-form input::placeholder,
.setup-remote-form textarea::placeholder,
.account-login-form input::placeholder {
  color: var(--openbot-text-placeholder);
}

.provider-picker-option-selected,
.provider-model-option-selected {
  border-color: var(--openbot-border-focus);
  background: var(--openbot-accent-soft);
  color: var(--openbot-text-primary);
}

.provider-picker-option,
.provider-model-option {
  border-color: var(--openbot-border);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-secondary);
}

.provider-picker-option:hover:not(.provider-picker-option-unavailable),
.provider-picker-option:focus-within,
.provider-model-option:hover,
.provider-model-option:focus-visible {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}

.voice-button,
.voice-button-active,
.initial-setup-save,
.account-login-primary {
  background: var(--openbot-surface-light);
  color: var(--openbot-text-on-light);
}

.voice-button:hover,
.voice-button-active:hover,
.initial-setup-save:hover:not(:disabled),
.account-login-primary:hover:not(:disabled, [aria-disabled="true"]) {
  background: var(--openbot-text-primary);
  color: var(--openbot-text-on-light);
}

.remote-desktop-overlay > button,
.remote-desktop-overlay > button:hover {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}

.remote-desktop-overlay > button:hover {
  background: var(--openbot-bg-control-active);
}

.account-login-error,
.initial-setup-error {
  border-color: var(--openbot-danger-soft);
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
}

.setup-route-button,
.setup-route-icon,
.setup-remote-form input,
.setup-remote-form textarea {
  border-color: var(--openbot-border);
  background: var(--openbot-bg-surface);
}

.setup-route-button:hover,
.setup-route-button:focus-visible {
  border-color: var(--openbot-border-focus);
  background: var(--openbot-bg-surface-raised);
}

.setup-route-icon-local i,
.provider-picker-status-available i {
  color: var(--openbot-success);
}

.account-login-development-code,
.provider-picker-status-sign-in-required i,
.provider-picker-status-outdated i {
  color: var(--openbot-warning);
}


/* /@fs//app/src/renderer/src/features/account/account-update-island.css */
.account-update-island {
  --panel-open-dur: calc(var(--openbot-duration-slow) + var(--openbot-duration-slow));
  --panel-close-dur: calc(var(--openbot-duration-slow) + var(--openbot-duration-normal));
  --panel-translate-y: calc(100% - var(--openbot-space-3));
  --panel-blur: var(--openbot-space-0-5);
  --panel-ease: var(--openbot-ease-out);
  --text-swap-dur: var(--openbot-duration-normal);
  --text-swap-translate-y: var(--openbot-space-1);
  --text-swap-blur: var(--openbot-space-0-5);
  --text-swap-ease: var(--openbot-ease-in-out);
  --digit-dur: var(--openbot-duration-slow);
  --digit-distance: var(--openbot-space-1);
  --digit-stagger: calc(var(--openbot-duration-fast) - var(--openbot-duration-dialog));
  --digit-blur: var(--openbot-space-0-5);
  --digit-ease: var(--openbot-ease-out);
  --digit-dir-x: 0;
  --digit-dir-y: 1;

  position: absolute;
  z-index: 0;
  right: var(--openbot-space-4);
  bottom: var(--openbot-control-xl);
  left: var(--openbot-space-4);
  display: grid;
  min-height: calc(var(--openbot-control-xl) + var(--openbot-radius-card));
  align-items: center;
  border: 0;
  border-radius: var(--openbot-radius-lg) var(--openbot-radius-lg) var(--openbot-radius-md) var(--openbot-radius-md);
  background: var(--openbot-accent-strong);
  box-shadow: 0 0 0 1px var(--openbot-accent-soft);
  -webkit-backdrop-filter: blur(var(--openbot-space-3));
  backdrop-filter: blur(var(--openbot-space-3));
  padding: calc(var(--openbot-space-1) + 1px) var(--openbot-space-1-5)
    calc(var(--openbot-space-4) + var(--openbot-space-1) - 1px);
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--openbot-space-2);
  color: var(--openbot-accent-text);
  -webkit-font-smoothing: antialiased;
}

.account-update-island.t-panel-slide {
  transform: translateY(var(--panel-translate-y));
  opacity: 0;
  filter: blur(var(--panel-blur));
  pointer-events: none;
  transition:
    transform var(--panel-close-dur) var(--panel-ease),
    opacity var(--panel-close-dur) var(--panel-ease),
    filter var(--panel-close-dur) var(--panel-ease);
  will-change: transform, opacity, filter;
}

.account-update-island.t-panel-slide[data-open="true"] {
  transform: translateY(0);
  opacity: 1;
  filter: blur(0);
  pointer-events: auto;
  transition:
    transform var(--panel-open-dur) var(--panel-ease),
    opacity var(--panel-open-dur) var(--panel-ease),
    filter var(--panel-open-dur) var(--panel-ease);
}

/* The island only enters the DOM once there is an update to announce, so it is
   already `data-open="true"` on its first frame and the closed rule above never
   applies. This gives that first frame something to slide in from. */
@starting-style {
  .account-update-island.t-panel-slide[data-open="true"] {
    transform: translateY(var(--panel-translate-y));
    opacity: 0;
    filter: blur(var(--panel-blur));
  }
}

.account-update-island__copy {
  min-width: 0;
}

.account-update-island__copy strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--openbot-accent-text);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-sm);
  white-space: nowrap;
}

.account-update-island .t-update-text-swap {
  display: inline-grid;
}

.account-update-island .t-update-text-swap > [data-text] {
  grid-area: 1 / 1;
  transform: translateY(0);
  opacity: 1;
  filter: blur(0);
  transition:
    transform var(--text-swap-dur) var(--text-swap-ease),
    filter var(--text-swap-dur) var(--text-swap-ease),
    opacity var(--text-swap-dur) var(--text-swap-ease);
  will-change: transform, filter, opacity;
}

.account-update-island
  .t-update-text-swap:is([data-state="available"], [data-state="action"])
  > [data-text]:is([data-text="ready"], [data-text="progress"], [data-text="error"]) {
  transform: translateY(var(--text-swap-translate-y));
  opacity: 0;
  filter: blur(var(--text-swap-blur));
}

.account-update-island
  .t-update-text-swap:is([data-state="ready"], [data-state="progress"])
  > [data-text]:is([data-text="available"], [data-text="action"], [data-text="error"]) {
  transform: translateY(calc(var(--text-swap-translate-y) * -1));
  opacity: 0;
  filter: blur(var(--text-swap-blur));
}

.account-update-island .t-update-text-swap[data-state="error"] > [data-text]:not([data-text="error"]) {
  transform: translateY(calc(var(--text-swap-translate-y) * -1));
  opacity: 0;
  filter: blur(var(--text-swap-blur));
}

.account-update-island__action-shell {
  position: relative;
  display: grid;
  /* A floor, not a fixed width: translated labels such as "Uruchom ponownie" are wider than the
     English ones, and the button grows to hold them while the status text gives way. */
  min-width: calc(
    var(--openbot-control-xl) +
    var(--openbot-control-xl) +
    var(--openbot-space-6) +
    var(--openbot-space-1)
  );
  flex-shrink: 0;
}

.account-update-island__action.ui-button {
  width: 100%;
  height: var(--openbot-control-sm);
  min-height: var(--openbot-control-sm);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-surface-light);
  box-shadow: 0 1px 2px var(--openbot-shadow-popover-ambient);
  padding: 0 var(--openbot-space-3) 0 var(--openbot-space-2);
  color: var(--openbot-text-on-light);
  transition:
    box-shadow var(--openbot-duration-normal) var(--openbot-ease-out),
    transform var(--openbot-duration-fast) var(--openbot-ease-out);
}

.account-update-island__action.ui-button::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% + var(--openbot-space-4));
  min-width: var(--openbot-control-xl);
  height: var(--openbot-control-xl);
  transform: translate(-50%, -50%);
  content: "";
}

.account-update-island__action.ui-button:disabled {
  cursor: progress;
  opacity: 1;
}

.account-update-island__action-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-1-5);
}

.account-update-island__action-label {
  min-width: calc(var(--openbot-control-xl) + var(--openbot-space-3));
  color: var(--openbot-text-on-light);
  font-weight: var(--openbot-weight-semibold);
  text-align: left;
}

.account-update-island__progress-value {
  display: inline-grid;
  align-items: baseline;
  grid-template-columns: 3ch max-content;
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.account-update-island__progress-digits {
  display: inline-flex;
  justify-content: flex-end;
}

.account-update-island__progress-suffix,
.account-update-island__busy-label {
  display: inline-block;
}

@keyframes account-update-digit-pop-in {
  0% {
    transform: translate(
      calc(var(--digit-distance) * var(--digit-dir-x)),
      calc(var(--digit-distance) * var(--digit-dir-y))
    );
    opacity: 0.4;
    filter: blur(var(--digit-blur));
  }

  100% {
    transform: translate(0, 0);
    opacity: 1;
    filter: blur(0);
  }
}

.account-update-island__progress-value .t-digit {
  display: inline-block;
  will-change: transform, opacity, filter;
}

.account-update-island__progress-digits.is-animating .t-digit {
  animation: account-update-digit-pop-in var(--digit-dur) var(--digit-ease) both;
}

.account-update-island__progress-digits.is-animating .t-digit[data-stagger="1"] {
  animation-delay: var(--digit-stagger);
}

.account-update-island__progress-digits.is-animating .t-digit[data-stagger="2"] {
  animation-delay: calc(var(--digit-stagger) * 2);
}

.account-update-island__action-shell[data-downloading="true"] .account-update-island__action-label {
  min-width: var(--openbot-control-md);
  text-align: center;
}

.account-update-island__action-shell[data-downloading="true"] .account-update-island__action.ui-button {
  padding-inline: var(--openbot-space-2);
}

.account-update-island__icon.t-icon-swap {
  --icon-swap-dur: var(--openbot-duration-overlay);
  --icon-swap-blur: var(--openbot-space-0-5);
  --icon-swap-start-scale: 0.25;
  --icon-swap-ease: var(--openbot-ease-in-out);

  position: relative;
  display: inline-grid;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  place-items: center;
}

.account-update-island__icon.t-icon-swap .t-icon {
  position: relative;
  top: 1px;
  display: grid;
  grid-area: 1 / 1;
  place-items: center;
  transition:
    opacity var(--icon-swap-dur) var(--icon-swap-ease),
    filter var(--icon-swap-dur) var(--icon-swap-ease),
    transform var(--icon-swap-dur) var(--icon-swap-ease);
  will-change: opacity, filter, transform;
}

.account-update-island__icon.t-icon-swap svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}

.account-update-island__icon.t-icon-swap .ui-spinner {
  border-color: var(--openbot-text-dim-on-light);
  border-top-color: currentColor;
}

.account-update-island__icon.t-icon-swap[data-state="a"] .t-icon[data-icon="a"],
.account-update-island__icon.t-icon-swap[data-state="b"] .t-icon[data-icon="b"] {
  transform: scale(1);
  opacity: 1;
  filter: blur(0);
}

.account-update-island__icon.t-icon-swap[data-state="a"] .t-icon[data-icon="b"],
.account-update-island__icon.t-icon-swap[data-state="b"] .t-icon[data-icon="a"] {
  transform: scale(var(--icon-swap-start-scale));
  opacity: 0;
  filter: blur(var(--icon-swap-blur));
}

.account-update-island__action.ui-button:active:not(:disabled):not([data-disabled]) {
  transform: scale(0.96);
}

@media (hover: hover) and (pointer: fine) {
  .account-update-island__action.ui-button:hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-surface-light);
    box-shadow:
      0 0 0 1px var(--openbot-text-dim-on-light),
      0 1px 2px var(--openbot-shadow-popover-ambient);
    color: var(--openbot-text-on-light);
  }
}

@media (prefers-reduced-motion: reduce) {
  .account-update-island.t-panel-slide,
  .account-update-island__action.ui-button,
  .account-update-island__icon.t-icon-swap .t-icon,
  .account-update-island .t-update-text-swap > [data-text] {
    transition: none;
  }

  .account-update-island__progress-value .t-digit {
    animation: none;
  }
}

/* In the sidebar there is no account box to come out of: the island is in the flow at the end of
 * the sidebar, with four round corners and the same space above and below its button. */
.sidebar-update-island > .account-update-island {
  position: relative;
  inset: auto;
  min-height: 0;
  margin: var(--openbot-space-2) var(--openbot-space-3) var(--openbot-space-3);
  border-radius: var(--openbot-radius-lg);
  padding: var(--openbot-space-1-5) var(--openbot-space-1-5) var(--openbot-space-1-5) var(--openbot-space-3);
}


/* /@fs//app/packages/ui/src/styles/chart.css */
.ui-chart {
  width: 100%;
  height: 300px;
  min-width: 0;
  font-size: var(--openbot-text-sm);
}
.ui-chart-tooltip {
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-primary);
  padding: var(--openbot-space-3);
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
/* One row per series: mark, name, value. The value column takes the remaining width so
   the numbers line up under each other however long the names are. */
.ui-chart-tooltip-row {
  display: grid;
  grid-template-columns: var(--openbot-space-4) auto 1fr;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-top: var(--openbot-space-2);
}
.ui-chart-tooltip-value {
  text-align: right;
}
.ui-chart-tooltip-mark {
  display: flex;
  align-items: center;
}
.ui-chart-tooltip-total {
  border-top: 1px solid var(--openbot-border-strong);
  padding-top: var(--openbot-space-2);
  color: var(--openbot-text-muted);
}


/* /@fs//app/packages/ui/src/features/channels/channel-avatar.css */
.channel-avatar {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  min-width: var(--openbot-space-8);
  height: var(--openbot-space-8);
  color: var(--openbot-text-muted);
}
.channel-avatar .agent-avatar {
  width: var(--openbot-space-8);
  height: var(--openbot-space-8);
  flex-shrink: 0;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface);
}
.channel-avatar:not(.channel-avatar-cluster) .agent-avatar + .agent-avatar {
  margin-left: calc(-1 * var(--openbot-space-4));
}
/*
 * The cluster holds the members in the square an agent avatar occupies, so a channel row keeps the
 * shape of the agent rows around it. Two measurements set the geometry: the cell pitch, which is
 * how far apart the face centres sit, and the face box. A bloub is drawn about 1.16 times its own
 * box wide, so a face box of 0.48 draws 0.56 of the square: the faces overlap by the difference
 * from the 0.44 pitch, and the pair still ends inside the square. The overflow count takes the
 * last cell.
 */
.channel-avatar-cluster {
  --channel-avatar-size: 36px;
  --channel-avatar-pitch: calc(var(--channel-avatar-size) * 0.44);
  --channel-avatar-face: calc(var(--channel-avatar-size) * 0.48);

  display: grid;
  grid-template: repeat(2, var(--channel-avatar-pitch)) / repeat(2, var(--channel-avatar-pitch));
  place-content: center;
  place-items: center;
  width: var(--channel-avatar-size);
  min-width: var(--channel-avatar-size);
  height: var(--channel-avatar-size);
}
.channel-avatar-cluster .agent-avatar {
  /* The bloub is drawn low in its own box; the lift is the measured share of the box it drops by. */
  --agent-avatar-optical-offset: calc(var(--channel-avatar-face) * -0.14);

  width: var(--channel-avatar-face);
  height: var(--channel-avatar-face);
  background: none;
}
/* One member is the channel's whole face. Two sit side by side, and three read as a triangle. */
.channel-avatar-cluster > :only-child {
  --channel-avatar-face: var(--channel-avatar-size);

  grid-area: 1 / 1 / 3 / 3;
}
.channel-avatar-cluster > :first-child:nth-last-child(2),
.channel-avatar-cluster > :first-child:nth-last-child(2) ~ * {
  grid-row: 1 / span 2;
}
.channel-avatar-cluster > :first-child:nth-last-child(3) ~ .agent-avatar:last-child {
  grid-column: 1 / span 2;
}
/* The pinned rail draws the same cluster at the size it gives an agent avatar. */
.agent-row.sidebar-pinned-row .channel-avatar-cluster {
  --channel-avatar-size: 48px;
}
.agent-row.sidebar-pinned-row .channel-avatar-cluster .agent-avatar {
  width: var(--channel-avatar-face);
  height: var(--channel-avatar-face);
}
.channel-avatar-count {
  color: var(--openbot-text-primary);
  /* The count is type, so it takes a step off the type scale rather than a share of the square:
     the smallest step that stays legible beside a face at both cluster sizes. */
  font-size: var(--openbot-text-md);
  line-height: 1;
  font-weight: var(--openbot-weight-semibold);
  font-variant-numeric: tabular-nums;
}


/* /@fs//app/packages/ui/src/features/tasks/tasks.css */
/* The Tasks page in TasksPage.tsx: one calm column, and the task panel beside it. */
.tasks-page {
  display: flex;
  height: 100%;
  min-height: 0;
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
}

/* One centered column. */
.tasks-page-scroll {
  min-width: 0;
  flex: 1;
  overflow-y: auto;
  padding: 0 var(--openbot-space-6) var(--openbot-space-8);
}

.tasks-page-column {
  display: flex;
  max-width: 36rem;
  flex-direction: column;
  gap: var(--openbot-space-1);
  margin: 0 auto;
}

.tasks-page-header {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-6) var(--openbot-space-2) var(--openbot-space-3);
}

/* The arrow lines up with the content edge, not its hit area. */
.tasks-page-header .ui-icon-button {
  margin-left: calc(-1 * var(--openbot-space-2));
}

.tasks-page-header h2 {
  min-width: 0;
  flex: 1;
  margin: 0;
  font-size: var(--openbot-text-xl);
  font-weight: var(--openbot-weight-semibold);
}

.tasks-page-agent-option > span {
  flex: 1 1 auto;
}

.tasks-page-header h2 span {
  color: var(--openbot-text-muted);
  font-weight: var(--openbot-weight-regular);
}

.tasks-page-avatar.agent-avatar {
  --agent-avatar-optical-offset: -2px;

  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

/* The composer at the top of the list, and the line after a start. */
.tasks-page-composer.composer-wrap {
  position: sticky;
  z-index: 3;
  top: 0;
  margin-bottom: var(--openbot-space-2);
  background: var(--openbot-bg-canvas);
  padding: var(--openbot-space-1) 0 0;
}

.tasks-page-composer .composer-notice {
  margin-bottom: var(--openbot-space-2);
}

.tasks-page-composer-agent {
  display: flex;
  min-width: 0;
  align-items: center;
}

.tasks-page-agent.ui-button {
  gap: var(--openbot-space-1-5);
  font-size: var(--openbot-text-sm);
  color: var(--openbot-text-secondary);
}

.tasks-page-composer-agent .tasks-page-agent.ui-button {
  margin-left: calc(-1 * var(--openbot-space-1));
}

/* As the header model switcher: the face of a newly chosen agent springs in, and the chevron turns. */
.tasks-page-agent-face {
  display: flex;
  flex: 0 0 auto;
}

.tasks-page-agent-face[data-entering] {
  animation: tasks-page-face-in 420ms cubic-bezier(0.34, 1.36, 0.64, 1) both;
}

@keyframes tasks-page-face-in {
  from {
    opacity: 0;
    scale: 0.6;
    filter: blur(2px);
  }
}

.tasks-page-agent-chevron {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  color: var(--openbot-text-muted);
  transition: transform var(--openbot-duration-normal) ease;
}

.tasks-page-agent[aria-expanded="true"] .tasks-page-agent-chevron {
  transform: rotate(180deg);
}

.tasks-page-agent-check {
  color: var(--openbot-text-primary);
}

.tasks-page-took {
  display: flex;
  min-height: var(--openbot-control-sm);
  align-items: center;
  gap: var(--openbot-space-1-5);
  margin-bottom: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  animation: tasks-page-rise var(--openbot-duration-overlay) var(--openbot-ease-out);
}

.tasks-page-took .ui-button-size-sm {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}

.tasks-page-took-agent {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  padding: 0 var(--openbot-space-1);
}

.tasks-page-took-text {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The tasks by what they need, each section with its heading. */
.tasks-page-section {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-0-5);
}

.tasks-page-section + .tasks-page-section {
  margin-top: var(--openbot-space-4);
}

.tasks-page-section-heading {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  margin: 0;
  padding: var(--openbot-space-1) var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}

.tasks-page-count {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
  font-variant-numeric: tabular-nums;
}

.tasks-page-list {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-0-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tasks-page-row.ui-button {
  display: grid;
  width: 100%;
  height: var(--openbot-control-lg);
  align-items: center;
  justify-content: stretch;
  grid-template-columns: 16px minmax(0, 1fr) auto auto;
  gap: var(--openbot-space-3);
  border-radius: var(--openbot-radius-md);
  padding: 0 var(--openbot-space-2);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-regular);
  text-align: left;
  --task-list-glyph: 14px;
}

.tasks-page-row[data-selected] {
  background: var(--openbot-bg-control-active);
}

.tasks-page-section[data-closed] .tasks-page-row:not([data-selected]) {
  opacity: 0.55;
}

.tasks-page-row-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tasks-page-status {
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tasks-page-status[data-tone="working"] {
  color: var(--openbot-text-secondary);
}

.tasks-page-status[data-tone="attention"] {
  color: var(--openbot-accent);
}

.tasks-page-status[data-tone="danger"] {
  color: var(--openbot-danger-text);
}

.tasks-page-show-all.ui-button {
  align-self: flex-start;
  color: var(--openbot-text-muted);
}

li[data-arrived] > .tasks-page-row {
  animation: tasks-page-arrive 1600ms var(--openbot-ease-out);
}

/*
 * The task panel beside the list: it takes its own column, so the list gets narrower. The column opens
 * from no width and the panel keeps its width at the column's left edge, so it slides in from the
 * right while the list moves left. The close is faster than the open.
 */
.tasks-page-side {
  position: relative;
  flex: 0 0 380px;
  overflow: hidden;
  transition:
    flex-basis var(--openbot-duration-overlay) var(--openbot-ease-out),
    opacity var(--openbot-duration-overlay) var(--openbot-ease-out);
}

@starting-style {
  .tasks-page-side {
    flex-basis: 0;
    opacity: 0.6;
  }
}

.tasks-page-side[data-closing] {
  flex-basis: 0;
  opacity: 0.6;
  transition-duration: var(--openbot-duration-slow);
  transition-timing-function: cubic-bezier(0.5, 0, 0.75, 0);
}

.tasks-page-side-content {
  position: absolute;
  inset: 0 auto 0 0;
  display: flex;
  width: 380px;
  --browser-panel-width: 100%;
}

.tasks-page-side-content > * {
  flex: 1;
  min-width: 0;
}

/* A change to a different task: the new task fades in at its place. */
.tasks-page-side-content[data-entering] {
  animation: tasks-page-side-swap var(--openbot-duration-normal) var(--openbot-ease-out);
}

@keyframes tasks-page-side-swap {
  from {
    opacity: 0;
    transform: translateX(6px);
  }
}

@keyframes tasks-page-rise {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

@keyframes tasks-page-arrive {
  from {
    background: var(--openbot-bg-control-active);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tasks-page-took,
  .tasks-page-agent-face[data-entering],
  li[data-arrived] > .tasks-page-row,
  .tasks-page-side-content[data-entering] {
    animation: none;
  }

  .tasks-page-side,
  .tasks-page-agent-chevron {
    transition: none;
  }
}


/* /@fs//app/src/renderer/src/features/schedule/schedule.css */
/* The schedule fills the pane the usage report uses, and scrolls inside it. */
.schedule-pane {
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  background: var(--openbot-bg-canvas);
  padding: var(--openbot-space-4) var(--openbot-space-6) var(--openbot-space-6);
}


/* /@fs//app/src/renderer/src/features/usage/usage.css */
/*
 * The workspace keeps its place in the app frame grid while Usage is open, so the wrapper draws no
 * box of its own. Its children are still grid items of the frame, but they are no longer its DOM
 * children, so `.app-frame > *` no longer reaches them: without this, a conversation panel grows to
 * its content height and pushes the composer under the window edge.
 */
.app-frame-panes {
  display: contents;
}
.app-frame-panes > * {
  min-height: 0;
}
.app-frame-page-open .app-frame-panes {
  visibility: hidden;
  pointer-events: none;
}

/* A selected tab in the chat sets itself visible, so every part of the chat hides, not only its root. */
.app-frame.app-frame-page-open .app-frame-panes * {
  visibility: hidden;
}
.window-page {
  z-index: 1;
  min-height: 0;
  overflow: hidden;
}
.agent-usage {
  container-type: inline-size;
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 0;
  height: 100%;
  flex-direction: column;
  color: var(--openbot-text-primary);
  background: var(--openbot-bg-canvas);
}
.agent-usage-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-4) var(--openbot-space-6);
  border-bottom: 1px solid var(--openbot-border);
}
.agent-usage-identity,
.agent-usage-controls {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  min-width: 0;
}
.agent-usage-identity {
  flex-wrap: wrap;
}
/* What lines up with the header's inset is the arrow, not the 32px hit area around it, so
   the button hangs its padding back into the header rather than pushing the glyph right. */
.agent-usage-identity .ui-icon-button {
  margin-left: calc(-1 * var(--openbot-space-2));
}
.agent-usage-identity h2 {
  display: flex;
  gap: var(--openbot-space-3);
  font-size: var(--openbot-text-lg);
  color: var(--openbot-text-muted);
}
.agent-usage-identity h2 span:last-child {
  color: var(--openbot-text-primary);
  overflow-wrap: anywhere;
}

/* The three filters and the refresh button need more width than the header can always
   give, so the row wraps from the right rather than clipping its last controls. */
.agent-usage-controls {
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--openbot-space-3);
}
.agent-usage-body {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding: var(--openbot-space-6);
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-8);
}
.agent-usage h3 {
  font-size: var(--openbot-text-xl);
  font-weight: 550;
}
.agent-usage-notice {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  padding: var(--openbot-space-4);
  background: var(--openbot-bg-surface);
  border-radius: var(--openbot-radius-md);
}
.agent-usage-notice .ui-button {
  margin-top: var(--openbot-space-3);
}
.agent-usage-loading {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
}
.agent-usage-placeholder {
  height: 280px;
  margin-top: var(--openbot-space-6);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface);
}
@container (min-width: 850px) {
  .agent-usage-overview {
    grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.5fr);
    gap: calc(var(--openbot-space-6) * 2);
  }
  .agent-usage-body {
    padding: var(--openbot-space-8) calc(var(--openbot-space-6) * 2);
    gap: calc(var(--openbot-space-6) * 2);
  }
}
/* The drop order is the reading order reversed: message counts go before token
   categories, and the processed total is the one entry that always stays. */
@container (max-width: 1000px) {
  .agent-usage-totals > div:nth-child(n + 7) {
    display: none;
  }
}
@container (max-width: 820px) {
  .agent-usage-totals > div:nth-child(n + 6) {
    display: none;
  }
}
@container (max-width: 660px) {
  .agent-usage-totals > div:nth-child(n + 5) {
    display: none;
  }
}
@container (max-width: 540px) {
  .agent-usage-totals > div:nth-child(n + 4) {
    display: none;
  }
}
@container (max-width: 400px) {
  .agent-usage-totals > div:nth-child(n + 3) {
    display: none;
  }
}
@container (max-width: 480px) {
  .agent-usage-hero {
    font-size: var(--openbot-text-display);
  }
  .agent-usage-body {
    padding: var(--openbot-space-4);
  }
  .agent-usage-header {
    padding: var(--openbot-space-3);
  }
  .agent-usage-controls {
    margin-left: 0;
    justify-content: flex-start;
  }
  .agent-usage-section-header {
    flex-wrap: wrap;
  }
}

/* The header holds one row of filters, so every dropdown and the refresh button share
   a body colour and a 32px height rather than each wearing its own form-field or
   toolbar look. */
.agent-usage-controls .ui-select {
  width: auto;
  flex-shrink: 0;
}
.agent-usage-controls .ui-select-trigger {
  width: max-content;
  border-color: var(--openbot-border);
  background: var(--openbot-bg-control);
  box-shadow: none;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}

.app-frame-panes.server-connection-workspace {
  position: relative;
  grid-column: -2 / -1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
/* The pane makes no stacking context, so the dialog layer of the loading screen would paint over the
 * menus that open from the sidebar. The screen covers only the pane, so one layer is sufficient. */
.server-connection-workspace > .app-loading {
  z-index: 1;
}
/* The panes were grid items of the frame and stretched to its height. In this column they grow to
 * fill it, so a short chat keeps its composer at the bottom. */
.server-connection-content > * {
  min-height: 0;
  flex: 1;
}


/* /@fs//app/packages/ui/src/features/usage/agent-usage-report.css */
.agent-usage-secondary,
.agent-usage-footer {
  font-size: var(--openbot-text-sm);
  color: var(--openbot-text-muted);
}
.agent-usage-overview {
  display: grid;
  gap: var(--openbot-space-8);
}
.agent-usage-summary {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-8);
}
.agent-usage-hero {
  font-size: var(--openbot-text-usage-total);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  margin-bottom: var(--openbot-space-3);
}
.agent-usage-providers {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-6);
}
.agent-usage-provider-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-4);
  font-size: var(--openbot-text-lg);
}
.agent-usage-provider-heading > span {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
/* The legend mark for the row's series. Its colour is an inline style, because it is the
   provider that decides it rather than the stylesheet. */
.agent-usage-series-dot {
  width: var(--openbot-space-2);
  height: var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
  flex-shrink: 0;
}
.agent-usage-provider-heading strong {
  font-weight: 550;
  font-variant-numeric: tabular-nums;
}
.agent-usage-provider p {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  margin-top: var(--openbot-space-2);
}
.agent-usage-provider-icon {
  fill: var(--openbot-provider-current);
  width: var(--openbot-space-4);
  height: var(--openbot-space-4);
  flex-shrink: 0;
}
.agent-usage-trend {
  min-width: 0;
}
.agent-usage-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-4);
  margin-bottom: var(--openbot-space-4);
}

/* One line, never two. A wrapped second row put two entries under five and read as a
   second, more important group; the entries are a tail of decreasing interest instead, so
   a panel too narrow to hold them all drops the last ones rather than rewrapping. */
.agent-usage-totals {
  display: flex;
  flex-wrap: nowrap;
  gap: calc(var(--openbot-space-6) * 2);
  margin-top: var(--openbot-space-4);
  overflow: hidden;
}
.agent-usage-totals dt {
  font-size: var(--openbot-text-sm);
  color: var(--openbot-text-muted);
  margin-bottom: var(--openbot-space-1);
  white-space: nowrap;
}
.agent-usage-totals dd {
  margin: 0;
  font-size: var(--openbot-text-xl);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.agent-usage-table {
  overflow-x: auto;
}
.agent-usage-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--openbot-text-lg);
  font-variant-numeric: tabular-nums;
}
.agent-usage-table th,
.agent-usage-table td {
  text-align: right;
  padding: var(--openbot-space-2) var(--openbot-space-3);
  border-bottom: 1px solid var(--openbot-border-strong);
  white-space: nowrap;
  font-weight: 400;
}
.agent-usage-table th:first-child {
  text-align: left;
  padding-left: 0;
  white-space: normal;
}
.agent-usage-table td:last-child {
  padding-right: 0;
}
.agent-usage-table thead th {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.agent-usage-table td {
  color: var(--openbot-text-secondary);
}
.agent-usage-model-name {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  overflow-wrap: anywhere;
  min-width: 10rem;
}
.agent-usage-footer {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-3);
  padding-bottom: var(--openbot-space-6);
}
.agent-usage-footer summary {
  cursor: pointer;
  width: fit-content;
}
.agent-usage-footer details p {
  margin-top: var(--openbot-space-3);
  max-width: 72ch;
  line-height: 1.6;
}


/* /@fs//app/packages/ui/src/features/diagrams/diagrams.css */
/* The diagram view: header, canvas, cards, edges, the assistant over the canvas and the run panel. */

.diagram-view {
  display: flex;
  height: 100%;
  min-width: 0;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  background: var(--openbot-bg-canvas);
}

/* What the Routines view says instead of a canvas: it is loading, it failed, or the server is remote. */
.diagram-flows-notice {
  align-items: center;
  justify-content: center;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
}

/* The Bloub overflows its box. An auto grid track grows to the Bloub and starts at the box's top,
   and its percentage height then resolves against that track, so the Bloub grows taller than wide
   and sits low. One track the size of the box keeps every avatar here centred on its line. */
.diagram-view .agent-avatar {
  grid-template: 100% / 100%;
}

/* The same height, avatar and name as the agent chat header, so switching views keeps the bar. */
.diagram-view-header {
  display: flex;
  height: 38px;
  flex: none;
  align-items: center;
  gap: var(--openbot-space-1-5);
  border-bottom: 1px solid var(--openbot-border);
  padding: 0 var(--openbot-space-3);
}

/* The chevron that closes routine details has no open fill: it is a close action, not a lit toggle. */
.diagram-view .diagram-view-header .header-panel-toggle[aria-expanded="true"]:not(:hover) {
  border-color: transparent;
  background: transparent;
  color: var(--openbot-text-muted);
}

.diagram-view-icon {
  display: grid;
  width: 18px;
  height: 18px;
  flex: none;
  place-items: center;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
}

.diagram-view-avatar.agent-avatar {
  width: 18px;
  height: 18px;
}

.diagram-view-icon svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}

/* The name keeps its room; the routine picker beside it is the part that narrows. */
.diagram-view-title {
  max-width: 32ch;
  flex: none;
  overflow: hidden;
  margin: 0;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-regular);
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.diagram-view-actions {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
  margin-left: auto;
}

/* As with the chat's browser sidebar: the routine details panel appears at once at the right edge, and
   the canvas eases its padding to make room. */
.diagram-view-body {
  --diagram-inspector-width: 340px;

  position: relative;
  display: flex;
  min-height: 0;
  flex: 1;
  transition: padding-right var(--panel-resize-duration, var(--openbot-duration-overlay)) cubic-bezier(0.22, 1, 0.36, 1);
}

.diagram-view-body[data-inspector="open"] {
  padding-right: var(--diagram-inspector-width);
}

.diagram-view-chat {
  position: absolute;
  bottom: var(--openbot-space-4);
  left: var(--openbot-space-4);
  z-index: 2;
  width: min(360px, calc(100% - var(--openbot-space-8)));
  /* The folded panel keeps its box, so the canvas under it still takes the pointer. */
  pointer-events: none;
}

/* Canvas */

.diagram-board {
  position: relative;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.diagram-board-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  outline: 0;
  background-color: var(--openbot-bg-canvas);
  background-image: radial-gradient(circle at 1px 1px, var(--openbot-border-strong) 1px, transparent 0);
  background-position: var(--diagram-grid-x) var(--diagram-grid-y);
  background-size: var(--diagram-grid-size) var(--diagram-grid-size);
  cursor: grab;
  touch-action: none;
}

.diagram-board-viewport:focus-visible {
  box-shadow: inset var(--openbot-focus-ring);
}

.diagram-board-viewport:is([data-panning], [data-dragging]) {
  cursor: grabbing;
}

.diagram-board-world {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
}

.diagram-board-world[data-settling] {
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}

.diagram-board-empty {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  max-width: 280px;
  gap: var(--openbot-space-1);
  translate: -50% -50%;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  pointer-events: none;
  text-align: center;
}

.diagram-board-empty strong {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
}

.diagram-board-empty p {
  margin: 0;
}

/* The right-click menu's trigger wraps the viewport without a box of its own. */
.diagram-board-menu-area {
  display: contents;
}

.diagram-canvas-menu-avatar.agent-avatar {
  width: 20px;
  height: 20px;
  grid-template: 100% / 100%;
}

/* An agent row has a name and a title, so it gets more room than a one-line menu row. */
.ui-action-menu.diagram-canvas-agents:not([data-menu-layout="grid"]) [role="menuitem"] {
  height: auto;
  gap: var(--openbot-space-3);
  padding-block: var(--openbot-space-2);
}

.diagram-canvas-menu-agent {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-0-5);
  line-height: var(--openbot-leading-md);
}

.diagram-canvas-menu-agent small {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A new agent, asked for at the spot the user right-clicked and kept inside the canvas. */
.diagram-new-agent {
  position: absolute;
  top: clamp(var(--openbot-space-2), var(--diagram-new-agent-y), calc(100% - 196px));
  left: clamp(var(--openbot-space-2), var(--diagram-new-agent-x), calc(100% - 288px));
  z-index: 3;
  display: grid;
  width: 280px;
  gap: var(--openbot-space-2);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-overlay);
  box-shadow:
    0 0 0 1px var(--openbot-border),
    var(--openbot-shadow-overlay);
  backdrop-filter: blur(16px);
  padding: var(--openbot-space-3);
  font-size: var(--openbot-text-sm);
}

.diagram-new-agent-header {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  font-weight: var(--openbot-weight-medium);
  user-select: none;
}

.diagram-new-agent-avatar.agent-avatar {
  width: 24px;
  height: 24px;
  grid-template: 100% / 100%;
}

/* The model field, drawn as the inputs above it are: their height, edge and fill. */
.diagram-new-agent .provider-model-trigger-field {
  height: var(--openbot-control-sm);
  min-height: var(--openbot-control-sm);
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
  box-shadow: none;
  padding-inline: var(--openbot-space-2);
  font-size: var(--openbot-text-sm);
}

.diagram-new-agent .provider-model-trigger-field:hover:not(:disabled),
.diagram-new-agent .provider-model-trigger-field[aria-expanded="true"] {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-control);
}

.diagram-new-agent .provider-model-trigger-field:focus-visible {
  border-color: var(--openbot-border-focus);
  outline: none;
  box-shadow: var(--openbot-focus-ring);
}

.diagram-new-agent-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-1);
}

/* Zoom in, zoom out and fit, as a column of separate square buttons. */
.diagram-board-zoom {
  position: absolute;
  right: var(--openbot-space-4);
  bottom: var(--openbot-space-4);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1-5);
}

.diagram-board-zoom .ui-button {
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-overlay);
  box-shadow: var(--openbot-shadow-raised);
}

.diagram-board-zoom .ui-button svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  color: var(--openbot-text-muted);
}

.diagram-board-zoom .ui-button:hover svg {
  color: var(--openbot-text-primary);
}

/* Below the routine picker, which holds the top centre of the canvas. */
.diagram-board-status {
  position: absolute;
  top: calc(var(--openbot-space-4) + var(--openbot-control-sm) + var(--openbot-space-2));
  left: 50%;
  z-index: 2;
  max-width: min(420px, calc(100% - 320px));
  margin: 0;
  translate: -50% 0;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-overlay);
  box-shadow: 0 0 0 1px var(--openbot-border);
  padding: var(--openbot-space-1-5) var(--openbot-space-3);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  pointer-events: none;
  text-align: center;
}

.diagram-board-status:empty {
  display: none;
}

.diagram-board-status[data-tone="danger"] {
  box-shadow: 0 0 0 1px var(--openbot-danger-border);
  color: var(--openbot-danger-text);
}

/* Edges. The SVG has no size of its own: it draws outside its box, in canvas coordinates. */

.diagram-edges {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: visible;
  pointer-events: none;
}

.diagram-edge path,
.diagram-edge-draft {
  fill: none;
}

.diagram-edge-hit {
  stroke: transparent;
  stroke-width: 16px;
  pointer-events: stroke;
  cursor: pointer;
}

.diagram-edge-line {
  stroke: var(--openbot-border-strong);
  stroke-width: 2px;
  stroke-linecap: round;
}

.diagram-edge[data-state="delivered"] .diagram-edge-line {
  stroke: var(--diagram-routine-color, var(--openbot-accent));
}

.diagram-edge[data-state="running"] .diagram-edge-line {
  stroke: var(--diagram-routine-color, var(--openbot-accent));
  stroke-dasharray: 6 6;
  animation: diagram-edge-flow 0.6s linear infinite;
}

/* A connection that belongs to one routine wears its colour, so its path reads as that routine's. */
.diagram-edge[data-routine-color][data-state="idle"] .diagram-edge-line {
  stroke: var(--diagram-routine-color);
  opacity: 0.6;
}

.diagram-edge:hover .diagram-edge-line,
.diagram-edge[data-selected] .diagram-edge-line {
  stroke: var(--openbot-text-primary);
  stroke-width: 3px;
}

/* One arrow where a connection enters a card. Before a run it stays readable on the quiet line. */
.diagram-edge .diagram-edge-arrow {
  fill: var(--openbot-text-muted);
}

.diagram-edge:is([data-state="delivered"], [data-state="running"]) .diagram-edge-arrow {
  fill: var(--diagram-routine-color, var(--openbot-accent));
}

.diagram-edge:hover .diagram-edge-arrow,
.diagram-edge[data-selected] .diagram-edge-arrow {
  fill: var(--openbot-text-primary);
}

.diagram-edge[data-state="dimmed"] .diagram-edge-arrow {
  opacity: 0.3;
}

.diagram-edge[data-routine-color][data-state="idle"] .diagram-edge-arrow {
  fill: var(--diagram-routine-color);
  opacity: 0.6;
}

.diagram-edge-draft {
  stroke: var(--openbot-accent);
  stroke-width: 2px;
  stroke-dasharray: 6 6;
}

.diagram-edge-draft[data-target="invalid"] {
  stroke: var(--openbot-danger);
}

.diagram-edge-remove.ui-button {
  position: absolute;
  top: var(--diagram-edge-y);
  left: var(--diagram-edge-x);
  z-index: 1;
  translate: -50% -50%;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface-raised);
  box-shadow: 0 0 0 1px var(--openbot-border-strong);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}

.diagram-edge-remove.ui-button:is([data-selected], :focus-visible) {
  opacity: 1;
  pointer-events: auto;
}

@keyframes diagram-edge-flow {
  to {
    stroke-dashoffset: -12;
  }
}

/* Cards */

.diagram-node {
  position: absolute;
  top: var(--diagram-node-y);
  left: var(--diagram-node-x);
  display: flex;
  width: var(--diagram-node-width);
  flex-direction: column;
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-surface-raised);
  box-shadow:
    0 0 0 1px var(--openbot-border),
    var(--openbot-shadow-raised);
  cursor: grab;
  transition:
    box-shadow var(--openbot-duration-fast) var(--openbot-ease-out),
    opacity var(--openbot-duration-normal) var(--openbot-ease-out);
  user-select: none;
}

.diagram-node[data-status="running"] {
  box-shadow:
    0 0 0 1px var(--openbot-accent),
    0 0 0 5px var(--openbot-accent-soft);
}

.diagram-node[data-status="failed"] {
  box-shadow:
    0 0 0 1px var(--openbot-danger-border),
    var(--openbot-shadow-raised);
}

.diagram-node[data-unreachable] {
  box-shadow: 0 0 0 1px var(--openbot-warning);
}

.diagram-node[data-selected] {
  box-shadow:
    0 0 0 2px var(--openbot-accent),
    var(--openbot-shadow-raised);
}

.diagram-node-header {
  display: flex;
  height: 52px;
  align-items: center;
  gap: var(--openbot-space-1);
  border-bottom: 1px solid var(--openbot-border);
  padding: 0 var(--openbot-space-2) 0 var(--openbot-space-1);
}

.diagram-node-select.ui-button {
  height: 44px;
  min-width: 0;
  flex: 1;
  justify-content: flex-start;
  gap: var(--openbot-space-2);
  padding: 0 var(--openbot-space-1-5);
  background: transparent;
  cursor: inherit;
  text-align: left;
}

.diagram-node-avatar.agent-avatar {
  width: 28px;
  height: 28px;
}

.diagram-node-icon {
  display: grid;
  width: 28px;
  height: 28px;
  flex: none;
  place-items: center;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
}

.diagram-node-icon svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

.diagram-node-heading {
  display: grid;
  min-width: 0;
}

.diagram-node-kicker {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.diagram-node-name {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.diagram-node-body {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-2) var(--openbot-space-3) var(--openbot-space-3);
}

.diagram-node-task,
.diagram-node-schedule {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.diagram-node-schedule {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
}

/* The output of the last run, inside the card, the way a generation shows its result. */
.diagram-node-preview {
  display: flex;
  min-height: 64px;
  align-items: flex-start;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.diagram-node-preview[data-empty] {
  align-items: center;
  justify-content: center;
}

.diagram-node-preview p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  white-space: pre-line;
}

.diagram-node[data-status="failed"] .diagram-node-preview {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger-text);
}

.diagram-node-preview-empty {
  color: var(--openbot-text-placeholder);
}

.diagram-node-footer {
  display: flex;
  min-height: 24px;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}

.diagram-node-status {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

.diagram-node-status svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}

:is(.diagram-node-status, .diagram-inspector-step-status)[data-status="succeeded"] {
  color: var(--openbot-success-text);
}

:is(.diagram-node-status, .diagram-inspector-step-status)[data-status="failed"] {
  color: var(--openbot-danger-text);
}

:is(.diagram-node-status, .diagram-inspector-step-status)[data-status="running"] {
  color: var(--openbot-accent-text);
}

.diagram-node-status[data-status="unreachable"] {
  color: var(--openbot-warning-text);
}

.diagram-node-duration {
  color: var(--openbot-text-muted);
}

.diagram-node-duration::before {
  content: "·";
  margin-right: var(--openbot-space-1);
}

.diagram-node-remove.ui-button,
/* Stays at the right edge also when the routine has no runs to show. */
.diagram-node-run.ui-button {
  flex: none;
  margin-inline-start: auto;
}

.diagram-node-run.ui-button svg,
.diagram-view-actions .ui-button-size-xs svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}

/* Ports sit on the card's edge, level with the header. */
.diagram-port.ui-button {
  position: absolute;
  top: 19px;
  z-index: 1;
  width: 14px;
  min-width: 14px;
  height: 14px;
  border: 2px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface-raised);
  padding: 0;
  cursor: crosshair;
  transition:
    scale var(--openbot-duration-fast) var(--openbot-ease-out),
    border-color var(--openbot-duration-fast) var(--openbot-ease-out),
    background-color var(--openbot-duration-fast) var(--openbot-ease-out);
}

/* A larger target than the dot it shows. */
.diagram-port.ui-button::before {
  position: absolute;
  inset: -8px;
  content: "";
}

.diagram-port-in.ui-button {
  left: -7px;
}

.diagram-port-out.ui-button {
  right: -7px;
}

.diagram-port.ui-button:hover,
.diagram-port-out.ui-button[data-connecting],
.diagram-port-in.ui-button[data-target="valid"] {
  scale: 1.25;
  border-color: var(--openbot-accent);
  background: var(--openbot-accent-soft);
}

.diagram-port-out.ui-button[data-connecting] {
  background: var(--openbot-accent);
}

.diagram-port-in.ui-button[data-target="invalid"] {
  border-color: var(--openbot-danger);
  opacity: 0.5;
}

.diagram-port.ui-button:disabled {
  opacity: 1;
  cursor: default;
}

/* Routine colours. A routine, the chips that name it on agent cards, and its path while it is in
   focus share one colour, so a run can be followed across the canvas. */
[data-routine-color="0"] {
  --diagram-routine-color: var(--openbot-file-blue);
  --diagram-routine-soft: var(--openbot-file-blue-soft);
}

[data-routine-color="1"] {
  --diagram-routine-color: var(--openbot-file-green);
  --diagram-routine-soft: var(--openbot-file-green-soft);
}

[data-routine-color="2"] {
  --diagram-routine-color: var(--openbot-file-orange);
  --diagram-routine-soft: var(--openbot-file-orange-soft);
}

[data-routine-color="3"] {
  --diagram-routine-color: var(--openbot-file-pink);
  --diagram-routine-soft: var(--openbot-file-pink-soft);
}

[data-routine-color="4"] {
  --diagram-routine-color: var(--openbot-file-teal);
  --diagram-routine-soft: var(--openbot-file-teal-soft);
}

[data-routine-color="5"] {
  --diagram-routine-color: var(--openbot-file-yellow);
  --diagram-routine-soft: var(--openbot-file-yellow-soft);
}

/* Outside the focused routine's path the canvas recedes, but stays readable and editable. */
.diagram-node[data-dimmed] {
  opacity: 0.4;
}

.diagram-node[data-dimmed]:is(:hover, :focus-within) {
  opacity: 0.8;
}

.diagram-edge[data-state="dimmed"] .diagram-edge-line {
  opacity: 0.3;
}

.diagram-node-routines {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.diagram-routine-chip.ui-button {
  height: 22px;
  gap: var(--openbot-space-1);
  border-radius: var(--openbot-radius-pill);
  background: var(--diagram-routine-soft);
  padding: 0 var(--openbot-space-2);
  color: var(--diagram-routine-color);
  font-size: var(--openbot-text-sm);
}

.diagram-routine-chip.ui-button[aria-pressed="true"] {
  box-shadow: inset 0 0 0 1px var(--diagram-routine-color);
}

.diagram-routine-chip.ui-button svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}

.diagram-routine-chip-name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The webhook of a routine in the details panel: the routine settings' card, and Save under it. */
.diagram-routine-webhook {
  display: grid;
  gap: var(--openbot-space-2);
}

.diagram-routine-webhook-actions {
  display: flex;
  justify-content: flex-end;
}

/* The routine picker, at the top centre of the canvas. */
.diagram-view-lens-bar {
  position: absolute;
  top: var(--openbot-space-4);
  left: 50%;
  z-index: 2;
  translate: -50% 0;
}

.diagram-view-lens-bar .ui-select-trigger {
  background: var(--openbot-bg-overlay);
  box-shadow: var(--openbot-shadow-raised);
}

.diagram-view-lens-trigger.ui-select-trigger {
  min-width: 120px;
  max-width: 280px;
}

.diagram-view-lens-option {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
}

.diagram-view-lens-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.diagram-view-lens-option svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: none;
}

/* "All routines" has no colour of its own: its dot is an outline. */
.diagram-view-lens-dot[data-all] {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--openbot-text-muted);
}

.diagram-view-lens-dot,
.diagram-inspector-routine-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: var(--openbot-radius-pill);
  background: var(--diagram-routine-color);
}

.diagram-inspector-routine.ui-button[aria-pressed="true"] {
  background: var(--diagram-routine-soft);
}

/* Routine: what it asks, when it fires, how it went */

/* The routine glows while the run it started is in progress. */
.diagram-node[data-kind="routine"][data-firing] {
  box-shadow:
    0 0 0 1px var(--diagram-routine-color),
    0 0 0 5px var(--diagram-routine-soft);
}

.diagram-node[data-kind="routine"] .diagram-node-icon {
  background: var(--diagram-routine-soft);
  color: var(--diagram-routine-color);
}

.diagram-node[data-kind="routine"][data-firing] .diagram-node-icon {
  animation: diagram-routine-fire 1.2s var(--openbot-ease-in-out) infinite;
}

.diagram-routine-instruction {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  border-left: 2px solid var(--diagram-routine-color, var(--openbot-accent));
  padding-left: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.diagram-routine-week {
  --diagram-week-height: 40px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--openbot-space-1);
}

.diagram-routine-week[data-size="panel"] {
  --diagram-week-height: 72px;
}

.diagram-routine-day {
  display: grid;
  justify-items: center;
  gap: var(--openbot-space-1);
}

/* One day, midnight at the top: a tick sits at the time the routine fires. */
.diagram-routine-day-track {
  position: relative;
  width: 100%;
  height: var(--diagram-week-height);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-control);
}

.diagram-routine-day[data-weekend] .diagram-routine-day-track {
  background: var(--openbot-bg-control-hover);
}

.diagram-routine-day[data-today] .diagram-routine-day-track {
  box-shadow: inset 0 0 0 1px var(--openbot-accent);
}

/* Noon, so a morning run reads as morning. */
.diagram-routine-day-track::after {
  position: absolute;
  top: 50%;
  right: 3px;
  left: 3px;
  height: 1px;
  background: var(--openbot-border);
  content: "";
}

.diagram-routine-tick {
  position: absolute;
  top: var(--diagram-tick-at);
  right: 3px;
  left: 3px;
  z-index: 1;
  height: 3px;
  translate: 0 -50%;
  border-radius: var(--openbot-radius-pill);
  background: var(--diagram-routine-color, var(--openbot-accent));
}

.diagram-routine-day-name {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 1;
}

.diagram-routine-day[data-today] .diagram-routine-day-name {
  color: var(--openbot-accent-text);
  font-weight: var(--openbot-weight-semibold);
}

.diagram-routine-dots {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.diagram-routine-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-border-strong);
}

.diagram-routine-dot[data-status="succeeded"] {
  background: var(--openbot-success);
}

.diagram-routine-dot[data-status="failed"] {
  background: var(--openbot-danger);
}

.diagram-routine-dot[data-status="running"] {
  background: var(--openbot-accent);
}

@keyframes diagram-routine-fire {
  50% {
    scale: 1.15;
  }
}

/* Run panel */

.diagram-inspector {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  width: var(--diagram-inspector-width);
  min-height: 0;
  flex-direction: column;
  border-left: 1px solid var(--openbot-border);
  background: var(--openbot-bg-surface);
}

.diagram-inspector-header {
  display: flex;
  min-height: 52px;
  align-items: center;
  gap: var(--openbot-space-2);
  border-bottom: 1px solid var(--openbot-border);
  padding: var(--openbot-space-2) var(--openbot-space-3);
}

.diagram-inspector-title {
  overflow: hidden;
  margin: 0;
  flex: 1;
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.diagram-inspector-avatar.agent-avatar {
  width: 24px;
  height: 24px;
}

.diagram-inspector-body {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: var(--openbot-space-4);
  overflow-y: auto;
  padding: var(--openbot-space-4);
}

.diagram-inspector-run {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--openbot-space-1-5) var(--openbot-space-2);
  font-size: var(--openbot-text-md);
}

.diagram-inspector-muted,
.diagram-inspector-empty {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
}

.diagram-inspector-section {
  display: grid;
  gap: var(--openbot-space-1-5);
}

.diagram-inspector-section p {
  margin: 0;
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}

/* The task reads as text until the user points at it or types in it. */
.diagram-inspector-task.ui-textarea {
  min-height: 0;
  margin: calc(-1 * var(--openbot-space-1-5));
  border-color: transparent;
  background: transparent;
  padding: var(--openbot-space-1) var(--openbot-space-1-5);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  resize: none;
  field-sizing: content;
}

.diagram-inspector-task.ui-textarea:is(:hover, :focus-visible, :focus) {
  border-color: var(--openbot-border);
  background: var(--openbot-bg-control);
}

.diagram-inspector-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.diagram-inspector-section-title {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: var(--openbot-tracking-wide);
}

.diagram-inspector-text {
  max-height: 320px;
  overflow: auto;
  margin: 0;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.diagram-inspector-text[data-tone="danger"] {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger-text);
}

.diagram-inspector-steps {
  display: grid;
  gap: var(--openbot-space-0-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.diagram-inspector-step.ui-button {
  width: 100%;
  height: auto;
  justify-content: flex-start;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-2);
  text-align: left;
}

.diagram-inspector-step-number {
  display: grid;
  width: 20px;
  height: 20px;
  flex: none;
  place-items: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  font-weight: var(--openbot-weight-semibold);
}

.diagram-inspector-step-name {
  overflow: hidden;
  flex: 1;
  font-size: var(--openbot-text-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.diagram-inspector-step-status {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}

.diagram-inspector-times,
.diagram-inspector-history {
  display: grid;
  gap: var(--openbot-space-1);
  margin: 0;
  padding: 0;
  font-size: var(--openbot-text-md);
  list-style: none;
}

.diagram-inspector-times li {
  color: var(--openbot-text-secondary);
}

.diagram-inspector-history li {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-2);
}

.diagram-inspector-history-time {
  overflow: hidden;
  color: var(--openbot-text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.diagram-inspector-history-kind {
  color: var(--openbot-text-muted);
}

.diagram-inspector-history-kind::before {
  content: " · ";
}

.diagram-inspector-step-status svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}

/* Assistant */

.diagram-chat,
.diagram-chat-launcher.ui-button {
  background: var(--openbot-bg-glass);
  box-shadow:
    0 0 0 1px var(--openbot-glass-border),
    var(--openbot-shadow-overlay);
  backdrop-filter: blur(16px);
}

/* The launcher and the panel share one grid cell. Opening grows the panel out of the launcher's pill
   with a clip that relaxes into the panel's own corners, with a little overshoot; closing folds it
   back faster and without one. The panel's shadow sits outside its box, so the open clip leaves room. */
.diagram-chat-morph {
  --diagram-chat-open-duration: var(--openbot-duration-island-content);
  --diagram-chat-close-duration: var(--openbot-duration-island-content-exit);
  --diagram-chat-open-ease: cubic-bezier(0.34, 1.25, 0.64, 1);
  --diagram-chat-launcher-height: 36px;
  --diagram-chat-blur: 2px;
  display: grid;
  align-items: end;
}

.diagram-chat-morph > * {
  grid-area: 1 / 1;
}

.diagram-chat-launcher.ui-button {
  height: var(--diagram-chat-launcher-height);
  touch-action: none;
  justify-self: start;
  gap: var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
  padding-left: var(--openbot-space-1-5);
  pointer-events: auto;
  transition:
    opacity var(--diagram-chat-open-duration) var(--openbot-ease-out),
    filter var(--diagram-chat-open-duration) var(--openbot-ease-out),
    scale var(--diagram-chat-open-duration) var(--openbot-ease-out);
}

.diagram-chat-morph[data-open="true"] .diagram-chat-launcher.ui-button {
  scale: 0.97;
  filter: blur(var(--diagram-chat-blur));
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--openbot-duration-fast) var(--openbot-ease-out),
    filter var(--openbot-duration-fast) var(--openbot-ease-out),
    scale var(--openbot-duration-fast) var(--openbot-ease-out);
}

.diagram-chat {
  display: flex;
  max-height: 340px;
  flex-direction: column;
  border-radius: var(--openbot-radius-xl);
  overflow: hidden;
  clip-path: inset(calc(100% - var(--diagram-chat-launcher-height)) 24% 0 0 round var(--openbot-radius-pill));
  opacity: 0;
  pointer-events: none;
  transition:
    clip-path var(--diagram-chat-close-duration) var(--openbot-ease-out),
    opacity var(--diagram-chat-close-duration) var(--openbot-ease-out);
}

.diagram-chat-morph[data-open="true"] .diagram-chat {
  clip-path: inset(-32px round 0);
  opacity: 1;
  pointer-events: auto;
  transition:
    clip-path var(--diagram-chat-open-duration) var(--diagram-chat-open-ease),
    opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}

/* The content settles a beat after the shape, so the panel reads as opening, not appearing. */
.diagram-chat > * {
  filter: blur(var(--diagram-chat-blur));
  opacity: 0;
  translate: 0 var(--openbot-space-2);
  transition:
    opacity var(--openbot-duration-fast) var(--openbot-ease-out),
    filter var(--openbot-duration-fast) var(--openbot-ease-out),
    translate var(--openbot-duration-fast) var(--openbot-ease-out);
}

.diagram-chat-morph[data-open="true"] .diagram-chat > * {
  filter: blur(0);
  opacity: 1;
  translate: 0 0;
  transition:
    opacity var(--diagram-chat-open-duration) var(--openbot-ease-out) var(--openbot-duration-fast),
    filter var(--diagram-chat-open-duration) var(--openbot-ease-out) var(--openbot-duration-fast),
    translate var(--diagram-chat-open-duration) var(--openbot-ease-out) var(--openbot-duration-fast);
}

.diagram-chat-avatar.agent-avatar {
  width: 24px;
  height: 24px;
}

.diagram-chat-header {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  cursor: grab;
  touch-action: none;
  border-bottom: 1px solid var(--openbot-border);
  padding: var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-3);
}

.diagram-chat-title {
  overflow: hidden;
  margin: 0;
  flex: 1;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.diagram-chat-messages {
  display: flex;
  min-height: 96px;
  flex: 1;
  flex-direction: column;
  gap: var(--openbot-space-2);
  overflow-y: auto;
  padding: var(--openbot-space-3);
}

.diagram-chat-empty {
  margin: auto 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  text-align: center;
}

.diagram-chat-bubble {
  max-width: 88%;
  font-size: var(--openbot-text-md);
}

.diagram-chat-text {
  margin: 0;
  white-space: pre-wrap;
}

/* The chat's Markdown, a size down to fit the panel. */
.diagram-chat-markdown {
  min-width: 0;
  font-size: var(--openbot-text-md);
}

.diagram-chat-changes {
  display: grid;
  gap: var(--openbot-space-1);
  margin: var(--openbot-space-2) 0 0;
  padding: 0;
  font-size: var(--openbot-text-sm);
  list-style: none;
}

.diagram-chat-changes li {
  display: flex;
  align-items: flex-start;
  gap: var(--openbot-space-1-5);
}

.diagram-chat-changes svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: none;
  margin-top: 2px;
  color: var(--openbot-success-text);
}

.diagram-chat-working {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

/* The chat composer's compact row, without its attach button: the editor and the send button. */
.diagram-chat-composer.composer[data-compact] {
  grid-template-columns: minmax(0, 1fr) auto;
  margin: var(--openbot-space-2);
}

.diagram-chat-composer.composer[data-compact] > .composer-input-label {
  grid-column: 1;
}

@media (prefers-reduced-motion: reduce) {
  .diagram-edge[data-state="running"] .diagram-edge-line {
    animation: none;
  }

  .diagram-node[data-kind="routine"][data-firing] .diagram-node-icon {
    animation: none;
  }

  .diagram-chat-launcher.ui-button,
  .diagram-chat,
  .diagram-chat > *,
  .diagram-board-world[data-settling],
  .diagram-node,
  .diagram-port.ui-button,
  .diagram-edge-remove.ui-button {
    transition: none;
  }
}


/* /@fs//app/packages/ui/src/features/channels/channel-activity.css */
/* Keep the working faces in one stack at the message avatars' left edge. The face itself takes the
   agent chat's size and optical offset, so the two indicators only differ in how many faces they
   hold. */
.agent-activity-content.channel-activity-content {
  padding-left: var(--openbot-space-0-5);
}

.channel-activity-faces {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}
.channel-activity-faces .agent-activity-avatar + .agent-activity-avatar {
  margin-left: calc(-1 * var(--openbot-space-2));
}

/* Reserve space outside the transcript. Only the panel's padded lower edge sits behind the composer.
   The top edge is pulled over the transcript's own bottom padding, so messages pass behind the glass
   as the reader scrolls while that padding still clears the last one at rest. */
.channel-paused-tasks {
  position: relative;
  max-height: 35dvh;
  overflow-y: auto;
  margin: calc(-1 * var(--openbot-space-6)) var(--openbot-space-3) calc(-1 * var(--openbot-radius-lg));
  border-radius: var(--openbot-radius-lg) var(--openbot-radius-lg) var(--openbot-radius-md) var(--openbot-radius-md);
  background: var(--openbot-accent-strong);
  box-shadow: 0 0 0 1px var(--openbot-accent-soft);
  -webkit-backdrop-filter: blur(var(--openbot-space-3));
  backdrop-filter: blur(var(--openbot-space-3));
  padding-bottom: var(--openbot-radius-lg);
  color: var(--openbot-accent-text);
}

/* Under the waiting block, the panel covers that block's lower edge, as the queue does, instead of
   the transcript's padding. */
.awaiting-replies + .channel-paused-tasks {
  z-index: 10;
  margin-top: 0;
}

.channel-paused-task {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-2);
  align-items: center;
  justify-content: space-between;
  padding: var(--openbot-space-2) var(--openbot-space-3);
}
.channel-paused-task + .channel-paused-task {
  border-top: 1px solid var(--openbot-accent-soft);
}
.channel-paused-task-reason {
  min-width: 0;
  flex: 1 1 24ch;
  margin: 0;
  overflow-wrap: anywhere;
  font-size: var(--openbot-text-sm);
}
.channel-paused-task-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-2);
  align-items: center;
}
.channel-paused-task-actions .ui-button {
  background: var(--openbot-surface-light);
  color: var(--openbot-text-on-light);
}
.channel-paused-task-actions .ui-button:hover {
  background: var(--openbot-surface-light);
  box-shadow: 0 0 0 1px var(--openbot-text-dim-on-light);
}


/* /@fs//app/src/renderer/src/features/channels/channels.css */
.channel-dialog-header,
.channel-editor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.channel-dialog-header h2 {
  margin: 0;
  font-size: var(--openbot-text-xl);
  line-height: var(--openbot-leading-xl);
  font-weight: var(--openbot-weight-semibold);
}
.channel-empty {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-muted);
}
.channel-empty h2 {
  font-size: var(--openbot-text-2xl);
  color: var(--openbot-text-primary);
  margin: var(--openbot-space-2) 0 0;
}
.channel-empty p {
  margin: 0;
}
/* The title is the one line that names what the channel is; the instructions read as body text. */
.channel-empty .channel-empty-title {
  color: var(--openbot-text-primary);
}

/* The editor stacks the same fields the agent panel stacks, so it adds no spacing of its own: the
   shared field carries its own bottom margin, and a gap here would add to it and set the whole
   channel form further apart than the agent form. */
.channel-editor {
  display: block;
}
.channel-create-form {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-3);
}
.channel-members {
  display: flex;
  margin-top: var(--settings-panel-section-gap);
  flex-direction: column;
  gap: var(--openbot-space-1);
  min-width: 0;
}
.channel-members-title,
.channel-members-note {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.channel-members-title {
  font-weight: var(--openbot-weight-regular);
}
/* Members read as a list, not as a card: the shared group gives up its frame and its dividers, so
   the hover highlight is the only box drawn and each member stays one plain line. */
.channel-member-list:is(.ui-item-group) {
  border: 0;
  overflow: visible;
  background: transparent;
}
.channel-member-list > :not(:first-child) {
  border-top: 0;
}
.channel-member:is(.ui-item),
.channel-member-add {
  min-height: var(--openbot-control-lg);
  gap: var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
  padding-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-2);
}
/* The trigger is a shared ghost button, whose own hover is written with two `:not()`s and so
   outweighs a plain class. It is matched here, or the last row of the list lights up differently
   from every row above it. */
.channel-member:hover,
.channel-member-add:hover:not(:disabled) {
  background: var(--openbot-hover);
}
/* The avatar sets the floor of a one-line row, the same size the create dialog uses. A menu row
   is the same row before it is a member, so it takes the same avatar: at its own 32px the bloub
   fills the whole menu item and paints past it, because it is drawn at 128% of its box.
   That same 128% is why the lift is needed: the drawn shape lands 14% of the avatar below the
   middle of its box, so without it the bloub reads low beside the name. Every 24px avatar in the
   channel surfaces takes this one value, and the New channel dialog reads it from here. */
.channel-member .agent-avatar,
.channel-member-menu .agent-avatar {
  --agent-avatar-optical-offset: -3.25px;

  width: var(--openbot-space-6);
  height: var(--openbot-space-6);
}
.channel-member .ui-item-title {
  font-weight: var(--openbot-weight-regular);
}
/* Adding a member belongs in the list, under the last member, where the eye already is. The ghost
   button already gives it the transparent frame and the muted text; what it does not give is a row,
   so the width, the leading edge and the line height are set here. */
.channel-member-add {
  width: 100%;
  justify-content: flex-start;
  height: auto;
  line-height: var(--openbot-leading-md);
  text-align: left;
  cursor: pointer;
}
.channel-member-add > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  /* The plus stands where an avatar stands, so both rows share one text edge. */
  margin-inline: calc((var(--openbot-space-6) - var(--openbot-icon-md)) / 2);
}
.channel-member-add:disabled {
  cursor: default;
  opacity: 0.42;
}
/* The menu of the rest of the agents is the list continued, so it keeps the list's measurements:
   its own padding is taken back off the leading edge, and every avatar in it stands in the same
   column as the avatars and the plus above it. It is also given room to the right of the longest
   name, which `min-width: 160px` on the shared menu does not leave. */
.channel-member-menu {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  min-width: 220px;
  /* A team can have more agents than the window has rows: the menu stops at the room the window
     leaves on its side of the trigger, and the list inside it scrolls. */
  max-height: min(
    calc(var(--openbot-space-8) * 11),
    calc(100dvh - var(--openbot-space-4)),
    var(--kb-popper-content-available-height, 100dvh)
  );
  margin-inline-start: calc(var(--openbot-space-1) * -1);
}
.channel-member-menu .channel-member-search {
  flex: none;
}
.channel-member-menu .channel-member-search input::-webkit-search-cancel-button {
  display: none;
}
.channel-member-options {
  min-height: 0;
  overflow-y: auto;
  outline: 0;
  scrollbar-width: thin;
}
/* The rows of the shared action menu, for options rather than menu items. Only the pointer and the
   keyboard paint a row: nothing is highlighted the moment the menu opens. */
.channel-member-option {
  display: flex;
  min-height: var(--openbot-control-md);
  align-items: center;
  gap: var(--openbot-space-2);
  border-radius: var(--ui-menu-item-radius);
  outline: 0;
  padding: var(--openbot-space-1-5) var(--ui-menu-inset);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
  white-space: nowrap;
  cursor: default;
  transition: background-color var(--openbot-duration-hover) var(--openbot-ease-out);
}
.channel-member-option:is(:hover, :focus-visible) {
  background: var(--ui-menu-item-hover);
}
/* The pointer does not move the keyboard focus here, so while a row has it, that row is the only
   one painted: Enter picks it, not the row under a resting pointer. */
.channel-member-options:has(:focus-visible) .channel-member-option:hover:not(:focus-visible) {
  background: transparent;
}
.channel-member-menu-empty {
  margin: 0;
  padding: var(--openbot-space-3) var(--ui-menu-inset);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
/* A row action reads as state until it is asked for: the crown stays on the lead, and Remove waits
   for the pointer or the keyboard. Hover is the condition, so a touch screen keeps both visible. */
@media (hover: hover) and (pointer: fine) {
  .channel-member-remove,
  .channel-lead-toggle[aria-pressed="false"] {
    opacity: 0;
    transition: opacity var(--openbot-duration-hover) var(--openbot-ease-out);
  }
  .channel-member:hover :is(.channel-member-remove, .channel-lead-toggle),
  :is(.channel-member-remove, .channel-lead-toggle):focus-visible {
    opacity: 1;
  }
}
.channel-picker {
  border: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.channel-picker legend {
  margin-bottom: var(--openbot-space-2);
}
/* The fade at the edges says there is more to read, so the scrollbar has nothing left to add. */
.channel-picker-list {
  margin-top: var(--openbot-space-2);
  max-height: calc(var(--openbot-space-8) * 7);
  overflow: auto;
  scrollbar-width: none;
}
.channel-picker-list::-webkit-scrollbar {
  display: none;
}
.channel-picker-entry {
  padding: var(--openbot-space-2) 0;
  cursor: pointer;
}
.channel-editor-footer {
  padding-top: var(--openbot-space-3);
  border-top: 1px solid var(--openbot-border);
}
.channel-search-icon {
  width: var(--openbot-space-4);
  height: var(--openbot-space-4);
  color: var(--openbot-text-muted);
  flex-shrink: 0;
}
.channel-picker-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-6) var(--openbot-space-3);
  text-align: center;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.channel-picker-empty > svg {
  width: var(--openbot-space-6);
  height: var(--openbot-space-6);
  margin-bottom: var(--openbot-space-1);
}
.channel-picker-empty p {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
}

.channel-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--openbot-layer-dialog);
  display: grid;
  place-items: center;
  padding: var(--openbot-space-6);
}
.channel-create-dialog {
  /* One inset for the header, the fields, every row and the footer. */
  --channel-dialog-inset: var(--openbot-space-4);
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(440px, 100%);
  max-height: calc(100dvh - 48px);
  overflow: hidden;
  outline: 0;
  background: var(--openbot-bg-surface);
}
.channel-create-dialog .channel-dialog-header {
  padding: var(--channel-dialog-inset);
}
.channel-create-dialog .channel-dialog-header .ui-button svg {
  width: var(--openbot-space-4);
  height: var(--openbot-space-4);
}
.channel-create-form {
  min-height: 0;
  gap: var(--openbot-space-4);
}
.channel-create-form > .ui-field,
.channel-create-form > .ui-alert {
  margin-inline: var(--channel-dialog-inset);
}
.channel-create-form .channel-picker {
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* No gap: the chips row collapses to zero height, and a gap would leave a strip behind it. */
  gap: 0;
}
.channel-create-form .channel-picker legend {
  margin-inline: var(--channel-dialog-inset);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
}
/*
 * The shared `.search-field` row from `app-shell.css`: it carries the borderless input and the calm
 * focus treatment (a dim border, and the focus ring only for keyboard focus). Only the size is local,
 * to match the name field above it.
 */
.channel-create-form .channel-member-search {
  height: var(--openbot-control-lg);
  margin-inline: var(--channel-dialog-inset);
  padding-inline: var(--openbot-space-3);
  gap: var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
}
.channel-create-form .channel-member-search input::-webkit-search-cancel-button {
  display: none;
}
.channel-create-form .channel-picker-list {
  min-height: 0;
  /* Taller than the settings picker: picking several agents is the whole job of this dialog. */
  max-height: calc(var(--openbot-space-8) * 11);
  margin-top: var(--openbot-space-2);
  padding: 0;
}
.channel-create-form .channel-picker-body {
  display: flex;
  flex-direction: column;
}
/* Rows run edge to edge: the selected and hover surfaces read as one list, not as cards. The row
   inside is the shared member row, so the label around it only paints the surface. */
.channel-create-form .channel-picker-entry {
  display: block;
  padding: var(--openbot-space-2) var(--channel-dialog-inset);
  border-radius: 0;
  transition: background-color var(--openbot-duration-normal) var(--openbot-ease-out);
}
/* Here the label is the row and paints the hover, so the shared member row must not paint a second,
   inset one inside it. In Channel settings the member row is the row, and keeps its own hover. */
.channel-create-form .channel-picker-entry .channel-member:is(.ui-item) {
  min-height: 0;
  padding: 0;
  background: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .channel-create-form .channel-picker-entry {
    transition: none;
  }
}
.channel-create-form .channel-picker-entry:hover {
  background: var(--openbot-bg-control-hover);
}
.channel-create-form .channel-picker-entry:has(.ui-checkbox-input:checked) {
  background: var(--openbot-accent-soft);
}
/*
 * One line per agent - name, then the description beside it - so a row costs the height of a
 * single line and more of the list is on screen while several agents are being selected.
 */
.channel-create-form .channel-picker-entry .ui-item-content {
  display: flex;
  align-items: baseline;
  gap: var(--openbot-space-2);
  overflow: hidden;
}
.channel-create-form .channel-picker-entry .ui-item-title {
  flex: 0 0 auto;
  font-weight: var(--openbot-weight-regular);
}
.channel-create-form .channel-picker-entry .ui-item-description {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.channel-create-form .channel-editor-footer {
  justify-content: flex-end;
  padding: var(--channel-dialog-inset);
}

/* The header title is the agent chat's `.conversation-title`, so the member stack has to be the
   avatar that title draws: 18px, and lifted by the same optical offset, because the bloub is drawn
   at 128% of its box and sits low in it without one. */
.channel-title .channel-avatar {
  min-width: 18px;
  height: 18px;
}
.channel-title .agent-avatar {
  --agent-avatar-optical-offset: -2px;

  width: 18px;
  height: 18px;
}
.channel-title .agent-avatar + .agent-avatar {
  margin-left: -8px;
}
.channel-header-copy {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: var(--openbot-space-2);
}
.channel-header-copy h1 {
  min-width: 0;
  overflow: hidden;
  flex: 0 1 auto;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.channel-header-title {
  min-width: 0;
  overflow: hidden;
  flex: 1 1 auto;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-preview-notice {
  flex-shrink: 0;
  margin: 0;
  padding: var(--openbot-space-4);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-align: center;
}


/* /@fs//app/packages/ui/src/features/transfer/instance-transfer.css */
/* Settings > Transfer. Rows, messages and steps reuse the Storage page and the agent import
   (features/files/files.css, features/import/agent-import.css), so the screens read as one set. */

.instance-transfer {
  display: flex;
  max-width: 720px;
  flex-direction: column;
  gap: var(--openbot-space-4);
}

.instance-transfer-start {
  justify-content: flex-start;
}

.instance-transfer-back {
  align-self: flex-start;
  padding-inline: 0;
}

.instance-transfer-link {
  align-self: flex-start;
  padding-inline: 0;
}

.instance-transfer-chip {
  padding: 0 var(--openbot-space-1-5);
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-pill);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  white-space: nowrap;
}

/* Old computer → file → new computer, as one line. */
.instance-transfer-flow {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  margin: 0;
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-lg);
  list-style: none;
}

.instance-transfer-flow-item {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-1-5);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  text-align: center;
}

.instance-transfer-flow-icon {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  color: var(--openbot-text-primary);
}

.instance-transfer-flow-arrow {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: none;
  color: var(--openbot-text-muted);
}

.instance-transfer-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--openbot-space-3);
}

.instance-transfer-tile {
  display: flex;
  height: auto;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-4);
  text-align: left;
  white-space: normal;
}

.instance-transfer-tile-icon {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  margin-bottom: var(--openbot-space-2);
}

.instance-transfer-tile-title {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}

.instance-transfer-tile-text {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
}

/* What moves, as counts with icons. */
.instance-transfer-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--openbot-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.instance-transfer-summary-item {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
}

.instance-transfer-summary-icon {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: none;
  color: var(--openbot-text-muted);
}

.instance-transfer-not-moved {
  display: flex;
  align-items: flex-start;
  gap: var(--openbot-space-2);
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 1.45;
}

.instance-transfer-not-moved-icon {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: none;
  margin-top: 2px;
}

@media (max-width: 640px) {
  .instance-transfer-tiles,
  .instance-transfer-summary {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* /@fs//app/packages/ui/src/features/import/agent-import.css */
/* Server settings > Import. The review and result use the Storage page's summary, section and
   row styles (features/files/files.css), so the two tabs read as one set. The guide is a single
   sequence: three connected steps, and the file button as the one strong control. */

.agent-import-guide {
  display: flex;
  max-width: 560px;
  flex-direction: column;
  gap: var(--openbot-space-6);
}

.agent-import-intro {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1-5);
}

.agent-import-heading {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-xl);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: -0.01em;
}

.agent-import-lede {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: 1.5;
}

/* The steps are a real sequence, so they keep their numbers. A rule between the markers joins them. */
.agent-import-steps {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.agent-import-step {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: var(--openbot-space-4);
  padding-bottom: var(--openbot-space-6);
}

.agent-import-step:last-child {
  padding-bottom: 0;
}

.agent-import-step:not(:last-child)::before {
  position: absolute;
  top: 28px;
  bottom: 4px;
  left: 11.5px;
  width: 1px;
  background: var(--openbot-border-grouped);
  content: "";
}

.agent-import-marker {
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  font-weight: var(--openbot-weight-medium);
}

.agent-import-step-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--openbot-space-2);
  padding-top: 2px;
}

.agent-import-step-title {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}

.agent-import-step-note {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 1.45;
}

/* Two ways into Grok Bot share step 1: the ready agent from its link, or the skill added by hand. */
.agent-import-setup {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--openbot-space-3);
}

.agent-import-setup .ui-sliding-tabs-content-slot {
  width: 100%;
}

.agent-import-setup-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--openbot-space-2);
}

/* One card per way in, the same shape in both panels, so step 2 stays where it is: the ready agent
   with its link, or the skill file with both ways to take it. */
.agent-import-card {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-3);
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-grouped);
}

.agent-import-card-icon {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: none;
  color: var(--openbot-text-secondary);
  stroke-width: var(--openbot-icon-stroke);
}

.agent-import-card-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.agent-import-card-name {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}

.agent-import-card-meta {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The exact words to send, shown as the text itself rather than described. */
.agent-import-prompt {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-3);
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-grouped);
}

.agent-import-prompt-text {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-import-prompt svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}

.agent-import-card .ui-button svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}

.agent-import-picker.ui-button {
  display: flex;
  width: 100%;
  height: auto;
  min-height: 64px;
  align-items: center;
  justify-content: flex-start;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-grouped);
  text-align: left;
  font-weight: var(--openbot-weight-regular);
}

.agent-import-picker.ui-button:hover:not(:disabled, [aria-disabled="true"]) {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-control-hover);
}

.agent-import-picker-icon {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  flex: 0 0 auto;
  color: var(--openbot-text-secondary);
  stroke-width: var(--openbot-icon-stroke);
}

.agent-import-picker-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--openbot-space-0-5);
}

.agent-import-picker-title {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}

.agent-import-picker-meta {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

/* Review and result rows. */

.agent-import-row {
  display: flex;
  min-height: 52px;
  align-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3) var(--openbot-space-4);
}

label.agent-import-row {
  cursor: pointer;
}

label.agent-import-row:hover {
  background: var(--openbot-hover);
}

label.agent-import-row:has(input:disabled) {
  cursor: default;
}

.agent-import-row-note {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 1.4;
}

.agent-import-notes {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  margin: var(--openbot-space-1) 0 0;
  padding: 0;
  list-style: none;
}

.agent-import-done {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}

.agent-import-done-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  color: var(--openbot-success-text);
  stroke-width: var(--openbot-icon-stroke);
}

.agent-import-skipped-icon {
  color: var(--openbot-warning-text);
}

.agent-import-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
}

/* The name and, for a name already on this server, the hint that the import adds another one. */
.agent-import-row-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-1);
}

.agent-import-name-hint {
  display: inline-flex;
  flex: none;
  color: var(--openbot-text-muted);
  border-radius: var(--openbot-radius-sm);
}

.agent-import-name-hint:hover,
.agent-import-name-hint:focus-visible {
  color: var(--openbot-text-secondary);
}

.agent-import-name-hint svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  stroke-width: var(--openbot-icon-stroke);
}

/* A channel row shows up to three of its members, overlapped, where an agent row has one avatar. */
.agent-import-members {
  display: flex;
  flex: none;
  width: 44px;
}

.agent-import-member-avatar {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: var(--openbot-radius-pill);
  box-shadow: 0 0 0 2px var(--openbot-bg-grouped);
}

.agent-import-member-avatar + .agent-import-member-avatar {
  margin-left: -11px;
}

.agent-import-channel-icon {
  width: 28px;
  height: var(--openbot-icon-md);
  flex: none;
  color: var(--openbot-text-secondary);
  stroke-width: var(--openbot-icon-stroke);
}


/* /@fs//app/packages/ui/src/features/files/files.css */
/*
 * Files and storage (issue 496). The storage bar takes its hues from the
 * `--openbot-chart-storage-*` tokens in a fixed order; everything else uses the
 * shared text, surface and space tokens.
 */

/* Storage bar ------------------------------------------------------------- */

.storage-usage {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
}

.storage-usage [data-group="workspaces"] {
  --storage-color: var(--openbot-chart-storage-workspaces);
}
.storage-usage [data-group="files"] {
  --storage-color: var(--openbot-chart-storage-files);
}
.storage-usage [data-group="chats"] {
  --storage-color: var(--openbot-chart-storage-chats);
}
.storage-usage [data-group="downloads"] {
  --storage-color: var(--openbot-chart-storage-downloads);
}
.storage-usage [data-group="runtimes"] {
  --storage-color: var(--openbot-chart-storage-runtimes);
}
.storage-usage [data-group="app"] {
  --storage-color: var(--openbot-chart-storage-app);
}

/* A 2px surface gap between segments; each segment keeps a minimum width so a
   small share stays a visible mark next to its legend row. */
.storage-usage-bar {
  display: flex;
  height: 10px;
  gap: var(--openbot-space-0-5);
}

.storage-usage-segment {
  min-width: 4px;
  flex-basis: 0;
  border-radius: var(--openbot-radius-xs);
  background: var(--storage-color);
  transition: opacity var(--openbot-duration-fast) ease;
}

.storage-usage[data-hovering="true"] :is(.storage-usage-segment, .storage-usage-legend-row):not([data-active]) {
  opacity: 0.35;
}

.storage-usage-legend {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--openbot-space-1) var(--openbot-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.storage-usage-legend-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-1) 0;
  font-size: var(--openbot-text-md);
  transition: opacity var(--openbot-duration-fast) ease;
}

.storage-usage-swatch {
  width: var(--openbot-space-2);
  height: var(--openbot-space-2);
  align-self: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--storage-color);
}

.storage-usage-legend-label {
  overflow: hidden;
  color: var(--openbot-text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.storage-usage-legend-value {
  color: var(--openbot-text-primary);
  font-variant-numeric: tabular-nums;
}

.storage-usage-legend-percent {
  min-width: 4ch;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Storage page ------------------------------------------------------------ */

.storage-overview {
  container-type: inline-size;
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--openbot-space-8);
  color: var(--openbot-text-primary);
}

.storage-summary {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
}

.storage-summary-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--openbot-space-3);
}

.storage-summary-label {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}

.storage-summary-total {
  margin: var(--openbot-space-1) 0;
  font-size: var(--openbot-text-display);
  font-weight: var(--openbot-weight-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.storage-summary-total-skeleton {
  width: 140px;
  height: 36px;
  margin: var(--openbot-space-1) 0;
}

.storage-summary-caption {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

.storage-message {
  display: flex;
  align-items: flex-start;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-grouped);
}

.storage-message-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--openbot-text-muted);
  stroke-width: var(--openbot-icon-stroke);
}

.storage-message[role="alert"] .storage-message-icon {
  color: var(--openbot-danger-text);
}

.storage-message-title {
  margin: 0;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}

.storage-message-description {
  margin: var(--openbot-space-0-5) 0 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

.storage-section {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
}

.storage-section-heading-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--openbot-space-3);
}

.storage-section-heading {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
}

.storage-section-aside {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

.storage-rows {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-grouped);
  list-style: none;
}

.storage-rows > li + li {
  border-top: 1px solid var(--openbot-border-grouped);
}

.storage-row.ui-button {
  display: flex;
  width: 100%;
  height: auto;
  min-height: 52px;
  align-items: center;
  justify-content: flex-start;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-2) var(--openbot-space-4);
  border-radius: 0;
  text-align: left;
  font-weight: var(--openbot-weight-regular);
}

.storage-row-avatar {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
}

.storage-row-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: var(--openbot-space-0-5);
}

.storage-row-title {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.storage-row-meta {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* One series, so the share bar is one neutral hue; the size beside it is the
   readable value. Scaled to the largest agent, so the top agent fills it. */
.storage-row-share {
  width: 96px;
  height: 6px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-hover);
}

.storage-row-share-fill {
  display: block;
  height: 100%;
  min-width: 4px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-muted);
}

.storage-row-size {
  display: flex;
  min-width: 72px;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-variant-numeric: tabular-nums;
}

.storage-row-percent {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

.storage-row-chevron {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--openbot-text-dim);
  stroke-width: var(--openbot-icon-stroke);
}

.storage-cleanup-row {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-2) var(--openbot-space-4);
}

.storage-cleanup-row .storage-row-meta {
  white-space: normal;
}

.storage-subview-header {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}

/* The same size as the back icon in the settings panel header. */
.storage-subview-back > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}

.storage-subview-header h3 {
  margin: 0;
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
}

@container (max-width: 520px) {
  .storage-row-share {
    display: none;
  }
}

/* File list ---------------------------------------------------------------- */

.file-list {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--openbot-space-3);
}

.file-list-toolbar {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}

.file-list-search {
  position: relative;
  min-width: 0;
  flex: 1;
}

.file-list-search-icon {
  position: absolute;
  top: 50%;
  left: var(--openbot-space-2);
  width: 14px;
  height: 14px;
  color: var(--openbot-text-muted);
  pointer-events: none;
  stroke-width: var(--openbot-icon-stroke);
  transform: translateY(-50%);
}

.file-list-search .file-list-search-input {
  width: 100%;
  padding-left: calc(var(--openbot-space-2) + 14px + var(--openbot-space-1-5));
}

.file-list-toolbar > .ui-select {
  width: auto;
  flex: 0 0 auto;
}

.file-list-sort {
  width: 120px;
}

.file-list[data-compact="true"] .file-list-sort {
  width: auto;
}

.file-list-filters {
  display: flex;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  flex-wrap: wrap;
  gap: var(--openbot-space-1);
}

.file-list[data-compact="true"] .file-list-filters {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

.file-list-filter.ui-button {
  flex: 0 0 auto;
  gap: var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-pill);
  color: var(--openbot-text-muted);
}

.file-list-filter.ui-button[aria-pressed="true"] {
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
}

.file-list-filter-count {
  color: var(--openbot-text-muted);
  font-variant-numeric: tabular-nums;
}

.file-list-filter[aria-pressed="true"] .file-list-filter-count {
  color: var(--openbot-text-secondary);
}

.file-list-summary {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

.file-list-group {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
}

.file-list-group + .file-list-group {
  margin-top: var(--openbot-space-2);
}

.file-list-group-heading {
  margin: 0;
  padding: 0 var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}

.file-list-rows {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-0-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.file-list-skeleton {
  height: 48px;
  border-radius: var(--openbot-radius-md);
}

.file-list-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-8) var(--openbot-space-4);
  text-align: center;
}

.file-list-message-icon {
  width: 20px;
  height: 20px;
  color: var(--openbot-danger-text);
  stroke-width: var(--openbot-icon-stroke);
}

.file-list-message-title {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}

.file-list-message-description {
  max-width: 320px;
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

.file-row {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
  padding-right: var(--openbot-space-1);
  border-radius: var(--openbot-radius-md);
}

.file-row:hover,
.file-row:focus-within {
  background: var(--openbot-hover);
}

.file-row-main.ui-button {
  display: flex;
  min-width: 0;
  height: auto;
  flex: 1;
  align-items: center;
  justify-content: flex-start;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  text-align: left;
  font-weight: var(--openbot-weight-regular);
}

.file-row-main.ui-button:hover {
  background: transparent;
}

/* A missing or remote file cannot preview, but its row still reads as a row
   rather than a disabled control. */
.file-row-main.ui-button:disabled {
  opacity: 1;
}

.files-file-visual {
  --file-reference-color: var(--openbot-file-default);
  --file-reference-soft: var(--openbot-file-default-soft);

  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border-radius: var(--openbot-radius-md);
  background: var(--file-reference-soft);
  color: var(--file-reference-color);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: 0.02em;
}

/* The shared danger colour is too dark for 12px text on its soft fill. */
.files-file-visual[data-file-tone="document"] {
  color: var(--openbot-danger-text);
}

.files-file-visual[data-status="missing"],
.files-file-visual[data-status="failed"] {
  opacity: 0.5;
}

.files-file-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.file-row-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: var(--openbot-space-0-5);
}

.file-row-name {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-row[data-status="missing"] .file-row-name {
  color: var(--openbot-text-muted);
  text-decoration: line-through;
  text-decoration-color: var(--openbot-text-dim);
}

.file-row-meta {
  display: flex;
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  white-space: pre;
}

.file-row-meta-part {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-row-meta-part:first-child {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

.file-row-status {
  flex: 0 0 auto;
}

/* The chat panel surface is lighter than the page; the shared danger colour is too dark on it at 12px. */
.file-row-status.z-badge-variant-destructive-light {
  color: var(--openbot-danger-text);
}

.file-row-menu-trigger {
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
}

.file-row-menu-trigger > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: var(--openbot-icon-stroke);
}

/* Icons next to button text: the ui-button leaves lucide at its 24px default. */
.files-button-icon {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}

/* Agent settings > Files ------------------------------------------------- */

.agent-files-view {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--openbot-bg-canvas);
}

.agent-files-body {
  container-type: inline-size;
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: var(--openbot-space-6);
  overflow-y: auto;
  padding: var(--openbot-space-4);
}

.agent-files-summary {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-3);
}

.agent-files-total-label {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}

.agent-files-total {
  margin: var(--openbot-space-0-5) 0 0;
  font-size: var(--openbot-text-3xl);
  font-weight: var(--openbot-weight-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.agent-files-total-skeleton {
  width: 96px;
  height: 28px;
  margin-top: var(--openbot-space-0-5);
}

/* One grouped card with a label and a value per row: the settings panel is too narrow for
   tiles, and a row keeps a long label such as "Files from agents" on one line. */
.agent-files-tiles {
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-grouped);
}

.agent-files-tile {
  display: flex;
  min-height: 36px;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-2) var(--openbot-space-3);
}

.agent-files-tile + .agent-files-tile {
  border-top: 1px solid var(--openbot-border-grouped);
}

.agent-files-tile dt {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-1);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
}

.agent-files-tile-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-files-tile dd {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-variant-numeric: tabular-nums;
}

/* The row keeps its height: the button overlaps the row padding, not the text. */
.agent-files-tile-action {
  flex: 0 0 auto;
  margin-block: calc(var(--openbot-space-1) * -1);
  color: var(--openbot-text-muted);
}

.agent-files-tile-skeleton {
  width: 64px;
  height: 18px;
}

.agent-files-section {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
}

/* Chat > Files panel ------------------------------------------------------ */

.conversation-files-summary {
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}

.conversation-files-content {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  padding: var(--openbot-space-3);
}


/* /@fs//app/packages/ui/src/features/settings/settings-modal.css */
.settings-modal-tabs-root {
  display: contents;
}

.settings-modal {
  --openbot-bg-surface: var(--openbot-bg-control);
  --openbot-text-muted: var(--openbot-settings-text-muted);
  width: min(880px, calc(100vw - 48px));
  height: min(600px, calc(100dvh - 48px));
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  overflow: hidden;
  outline: none;
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
  transform-origin: center;
  animation: settings-modal-in var(--openbot-duration-overlay) var(--openbot-ease-out) both;
  will-change: transform, opacity;
}

.settings-modal-nav {
  display: grid;
  gap: var(--openbot-space-1);
}

.settings-modal-nav-item {
  position: relative;
  width: 100%;
  height: auto;
  min-height: var(--openbot-control-md);
  display: grid;
  grid-template-columns: var(--openbot-icon-md) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-2);
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  padding: 0 var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font: inherit;
  font-size: var(--openbot-text-md);
  text-align: left;
  transition:
    background-color var(--openbot-duration-hover) ease,
    color var(--openbot-duration-hover) ease;
}

.settings-modal-nav-item svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: var(--openbot-icon-stroke);
}

.settings-modal-nav-item[aria-current="page"] {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}

.settings-modal-nav-item {
  cursor: pointer;
}

.settings-modal-nav-item:focus-visible {
  outline: 0;
  box-shadow: var(--openbot-focus-ring);
}

@media (hover: hover) and (pointer: fine) {
  .settings-modal-nav-item:not([aria-current="page"]):hover {
    background: var(--openbot-hover);
    color: var(--openbot-text-primary);
  }
}

.settings-modal-main {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--openbot-bg-canvas);
}

.settings-modal-footer {
  display: contents;
}

.settings-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--openbot-space-4);
  padding: var(--openbot-space-6) var(--openbot-space-6) var(--openbot-space-4);
}

.settings-modal-title {
  margin: 0;
  font-size: var(--openbot-text-2xl);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-2xl);
  letter-spacing: var(--openbot-tracking-tight);
}

.settings-modal-description {
  margin: var(--openbot-space-1) 0 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}

.settings-modal-scroll-frame {
  position: relative;
  min-height: 0;
  overflow: hidden;
}

.settings-modal-scroll-frame::before,
.settings-modal-scroll-frame::after {
  position: absolute;
  right: var(--openbot-space-2);
  left: 0;
  z-index: 1;
  height: var(--openbot-space-8);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--openbot-duration-normal) ease;
  content: "";
}

.settings-modal-scroll-frame::before {
  top: 0;
  background: linear-gradient(
    to bottom,
    var(--openbot-bg-canvas) 0%,
    var(--openbot-bg-canvas) 28%,
    var(--openbot-bg-canvas-clear) 100%
  );
}

.settings-modal-scroll-frame::after {
  bottom: 0;
  background: linear-gradient(
    to top,
    var(--openbot-bg-canvas) 0%,
    var(--openbot-bg-canvas) 28%,
    var(--openbot-bg-canvas-clear) 100%
  );
}

.settings-modal-scroll-frame[data-scroll-up]::before,
.settings-modal-scroll-frame[data-scroll-down]::after {
  opacity: 1;
}

/*
 * `--settings-modal-floating-space` is the height of whatever `floatingContent` the caller floats
 * over the end of the panel, such as the server settings error toast. The panel spends it as extra
 * end padding, so its last control scrolls clear of the floating element instead of under it.
 */
.settings-modal-content {
  height: 100%;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: var(--openbot-space-6);
  overflow-y: auto;
  /*
   * The inline padding stays a plain token so the panel text keeps the same left edge as the header
   * title. A gutter subtracted from the padding only lines up when the platform draws a classic
   * scrollbar; with overlay scrollbars it moved the whole panel inward.
   */
  padding: 0 var(--openbot-space-6) calc(var(--openbot-space-6) + var(--settings-modal-floating-space, 0px));
  scrollbar-gutter: stable;
}

.settings-modal-tab-panel {
  display: grid;
  align-content: start;
  gap: var(--openbot-space-6);
  animation: settings-modal-tab-in var(--openbot-duration-fast) var(--openbot-ease-out) both;
  will-change: transform, opacity;
}

.settings-modal-tab-panel:not([data-selected]) {
  display: none;
}

.settings-modal-card:is(.ui-card, .ui-item-group) {
  width: 100%;
  display: grid;
  overflow: hidden;
  border: 0;
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  box-shadow: none;
}

.settings-modal-card.ui-card {
  padding: 0 var(--openbot-space-4);
}

.settings-modal-card > .ui-switch-field,
.settings-modal-card > .ui-item {
  padding: var(--openbot-space-3) var(--openbot-space-4);
}

.settings-modal-row {
  min-height: 64px;
}

.settings-modal-card > .ui-switch-field {
  width: 100%;
  justify-content: space-between;
  padding: var(--openbot-space-3) var(--openbot-space-4);
}

.settings-modal-card > :not(:first-child) {
  position: relative;
  border-top: 0;
}

.settings-modal-card > :not(:first-child)::before {
  position: absolute;
  top: 0;
  right: var(--openbot-space-4);
  left: var(--openbot-space-4);
  height: 1px;
  background: var(--openbot-border);
  pointer-events: none;
  content: "";
}

.settings-modal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-4);
}

.settings-modal-row-title {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-lg);
}

.settings-modal :where(.ui-item-title, .ui-switch-label) {
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}

.settings-modal :where(.ui-item-description, .ui-switch-description),
.settings-modal :where(.ui-text)[data-variant="caption"] {
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}

.settings-modal .ui-item-description {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.settings-modal :where(.ui-item-content, .ui-switch-copy) {
  gap: var(--openbot-space-0-5);
}

.settings-modal :where(.ui-button, .ui-input, .ui-textarea, .ui-native-select) {
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}

.settings-modal :where(.ui-button-variant-default) {
  background: var(--openbot-accent);
  color: var(--openbot-text-primary);
}

.settings-modal :where(.ui-button-variant-outline, .ui-button-variant-secondary) {
  background: var(--openbot-bg-surface-raised);
}

.settings-modal :where(.ui-button-variant-destructive) {
  background: var(--openbot-danger);
  color: var(--openbot-text-primary);
}

.settings-modal .ui-switch[data-checked] {
  background: var(--openbot-accent);
}

.settings-modal .ui-switch-thumb[data-checked] {
  background: var(--openbot-text-primary);
}

@media (hover: hover) and (pointer: fine) {
  .settings-modal :where(.ui-button-variant-default):hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-accent-hover);
  }

  .settings-modal :where(.ui-button-variant-destructive):hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-danger-hover);
    color: var(--openbot-text-primary);
  }
}

:is(.app-settings-modal-shell, .server-settings-modal-shell).settings-modal {
  width: min(920px, calc(100vw - 48px));
  height: min(640px, calc(100dvh - 48px));
  grid-template-columns: 196px minmax(0, 1fr);
  border-radius: var(--openbot-radius-card);
  box-shadow:
    var(--openbot-shadow-raised),
    0 0 0 1px var(--openbot-dialog-ring);
}

:is(.app-settings-modal-shell, .server-settings-modal-shell) .settings-modal-nav {
  gap: var(--openbot-space-1);
}

:is(.app-settings-modal-shell, .server-settings-modal-shell) .settings-modal-nav-item {
  min-height: var(--openbot-control-md);
  padding-inline: var(--openbot-space-3);
  font-size: var(--openbot-text-lg);
}

:is(.app-settings-modal-shell, .server-settings-modal-shell) .settings-modal-nav-item[data-selected] {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}

:is(.app-settings-modal-shell, .server-settings-modal-shell) .settings-modal-header {
  align-items: center;
  padding: var(--openbot-space-4) var(--openbot-space-4) var(--openbot-space-6) var(--openbot-space-8);
}

:is(.app-settings-modal-shell, .server-settings-modal-shell) .settings-modal-description {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

:is(.app-settings-modal-shell, .server-settings-modal-shell) .settings-modal-content {
  gap: var(--openbot-space-6);
  padding: 0 var(--openbot-space-8) calc(var(--openbot-space-8) + var(--settings-modal-floating-space, 0px));
}

:is(.app-settings-modal-shell, .server-settings-modal-shell) .settings-modal-tab-panel {
  gap: var(--openbot-space-6);
  animation: none;
  will-change: auto;
}

:is(.app-settings-modal-shell, .server-settings-modal-shell) .ui-settings-section {
  gap: var(--openbot-space-2);
}

:is(.app-settings-modal-shell, .server-settings-modal-shell) .ui-settings-section-header {
  padding-inline: 0;
}

:is(.app-settings-modal-shell, .server-settings-modal-shell) .ui-settings-section-heading {
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}

.provider-picker-embedded {
  border: 0;
}

.provider-picker-embedded .provider-picker-list {
  overflow: hidden;
  border: 0;
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
}

.provider-picker-embedded .provider-picker-option {
  position: relative;
  min-height: 64px;
  border: 0;
  background: transparent;
  padding: 0 var(--openbot-space-4);
}

.provider-picker-embedded .provider-picker-option-selection {
  min-height: 64px;
  padding: var(--openbot-space-3) 0;
}

/* The row has no inline padding of its own here, so the message moves left to stay under the name. */
.provider-picker-embedded .provider-picker-check-error.provider-picker-used-by {
  margin-top: calc(-1 * var(--openbot-space-4));
  padding: 0 0 var(--openbot-space-3) 54px;
}

.provider-picker-embedded .provider-picker-accounts {
  margin-top: calc(-1 * var(--openbot-space-2));
  padding: 0 0 var(--openbot-space-2) 54px;
}

.provider-picker-embedded .provider-picker-option + .provider-picker-option,
.provider-picker-embedded .provider-picker-option-custom {
  border-top: 0;
}

.provider-picker-embedded .provider-picker-option + .provider-picker-option::before,
.provider-picker-embedded .provider-picker-option-custom::before {
  position: absolute;
  top: 0;
  right: var(--openbot-space-4);
  left: var(--openbot-space-4);
  height: 1px;
  background: var(--openbot-border);
  pointer-events: none;
  content: "";
}

/* The row pads its own inline edges here, so the button margin goes and the gap between two
   actions has to come from the wrapper instead. */
.provider-picker-embedded .provider-picker-actions {
  gap: var(--openbot-space-2);
}

.provider-picker-embedded .provider-picker-install,
.provider-picker-embedded .provider-picker-custom-count {
  margin-right: 0;
}

/* Row actions keep the onboarding colours: Download and Update stay light and only Connect takes
   the accent, so the modal's accent primary button does not repaint them. */
.settings-modal .ui-button-variant-default.provider-picker-install:not(.provider-picker-connect) {
  background: var(--openbot-surface-light);
  color: var(--openbot-text-on-light);
}

@media (hover: hover) and (pointer: fine) {
  .settings-modal
    .ui-button-variant-default.provider-picker-install:not(.provider-picker-connect):hover:not(:disabled):not(
      [data-disabled]
    ) {
    background: color-mix(in srgb, var(--openbot-surface-light) 82%, transparent);
  }
}

.provider-picker-embedded .provider-picker-option:hover:not(.provider-picker-option-unavailable),
.provider-picker-embedded .provider-picker-option:focus-within,
.provider-picker-embedded .provider-picker-option-selected {
  background: var(--openbot-bg-control-hover);
}

.settings-modal .provider-picker-name {
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-lg);
}

.settings-modal :where(.provider-picker-email, .provider-picker-check-error) {
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}

/* An account line is one size below its provider. */
.settings-modal .provider-picker-account .provider-picker-name {
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}

.settings-modal .provider-picker-account .provider-picker-email {
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.settings-modal .provider-picker-status {
  font-variant-numeric: tabular-nums;
}

.app-settings-modal-shell .settings-modal-select {
  width: 168px;
}

.app-settings-modal-shell .settings-modal-select .ui-select-trigger {
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-secondary);
}

.app-settings-modal-shell .settings-modal-update-track-select {
  width: 112px;
}

.app-settings-modal-shell .settings-modal-update-actions {
  flex-wrap: wrap;
}

.app-settings-modal-shell .settings-modal-update-status {
  text-wrap: pretty;
}

.app-settings-modal-shell .settings-modal-update-status-active {
  color: var(--openbot-accent);
}

.app-settings-modal-shell .settings-modal-error {
  color: var(--openbot-danger);
}

.settings-identity-name-row.ui-item,
.settings-identity-image-row.ui-item {
  min-height: 72px;
}

.settings-identity-name-control {
  --settings-identity-error-duration: 280ms;
  position: relative;
  width: 220px;
  height: var(--openbot-control-md);
}

.settings-identity-name-input.ui-input {
  width: 100%;
  transition: border-color var(--openbot-duration-normal) ease-out;
  will-change: transform;
}

.settings-identity-name-input.is-shaking {
  animation: settings-identity-name-shake 280ms linear;
}

.settings-identity-name-error {
  position: absolute;
  top: calc(100% + var(--openbot-space-0-5));
  right: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--settings-identity-error-duration) ease-out,
    visibility 0s linear var(--settings-identity-error-duration);
}

.settings-identity-name-control[data-invalid] .settings-identity-name-error {
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--settings-identity-error-duration) ease-out,
    visibility 0s linear;
}

.settings-identity-image-control {
  gap: var(--openbot-space-2);
}

.settings-identity-image-picker {
  position: relative;
  display: flex;
}

.settings-identity-image-trigger {
  position: relative;
  width: calc(var(--openbot-control-xl) + var(--openbot-space-2));
  height: calc(var(--openbot-control-xl) + var(--openbot-space-2));
  overflow: hidden;
}

.settings-modal-save-bar {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-4);
  border-top: 1px solid var(--openbot-border);
  background: var(--openbot-bg-surface);
  padding: var(--openbot-space-3) var(--openbot-space-6);
}

.settings-modal-save-actions {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
}

.settings-modal-readonly-value {
  min-width: 180px;
  max-width: 300px;
  overflow-wrap: anywhere;
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
  text-align: right;
  user-select: text;
}

.settings-modal-profile-photo-trigger {
  border-radius: var(--openbot-radius-pill);
}

.settings-modal-avatar {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-hover);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
}

.settings-modal-avatar > img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  outline: 1px solid var(--openbot-image-outline);
  outline-offset: -1px;
}

@keyframes settings-identity-name-shake {
  0%,
  100% {
    transform: translateX(0);
  }

  28.57% {
    transform: translateX(6px);
  }

  57.14% {
    transform: translateX(-6px);
  }

  78.57% {
    transform: translateX(4px);
  }
}

@keyframes settings-modal-tab-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes settings-modal-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.965);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 720px) {
  .settings-modal {
    width: calc(100vw - 24px);
    height: calc(100dvh - 24px);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }

  .settings-modal-nav {
    display: flex;
    overflow-x: auto;
  }

  .settings-modal-nav-item {
    width: auto;
    flex: 0 0 auto;
  }

  .settings-modal-header {
    padding: var(--openbot-space-4);
  }

  .settings-modal-content {
    gap: var(--openbot-space-4);
    padding: 0 var(--openbot-space-4) calc(var(--openbot-space-4) + var(--settings-modal-floating-space, 0px));
  }

  :is(.app-settings-modal-shell, .server-settings-modal-shell).settings-modal {
    width: calc(100vw - 24px);
    height: calc(100dvh - 24px);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }

  :is(.app-settings-modal-shell, .server-settings-modal-shell) .settings-modal-header {
    padding: var(--openbot-space-4);
  }

  :is(.app-settings-modal-shell, .server-settings-modal-shell) .settings-modal-content,
  :is(.app-settings-modal-shell, .server-settings-modal-shell) .settings-modal-tab-panel {
    gap: var(--openbot-space-6);
  }

  :is(.app-settings-modal-shell, .server-settings-modal-shell) .settings-modal-content {
    padding: 0 var(--openbot-space-4) var(--openbot-space-4);
  }

  .settings-identity-name-row,
  .settings-identity-image-row,
  .settings-modal-account-email-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .settings-identity-name-control {
    width: min(320px, 100%);
    max-width: 320px;
    height: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--openbot-control-md) var(--openbot-leading-sm);
    align-items: stretch;
    row-gap: var(--openbot-space-0-5);
  }

  .settings-identity-name-error {
    position: static;
  }

  .settings-identity-image-control,
  .settings-modal-account-email-row .ui-item-actions {
    width: 100%;
    max-width: none;
    justify-content: space-between;
  }

  .settings-modal-readonly-value {
    min-width: 0;
    max-width: none;
    text-align: left;
  }

  .settings-modal-save-bar {
    padding-inline: var(--openbot-space-4);
  }
}

@media (max-width: 520px) {
  .settings-modal-save-bar {
    align-items: flex-start;
    flex-direction: column;
  }

  .settings-modal-save-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .app-settings-modal-shell .settings-modal-row.ui-item {
    align-items: flex-start;
    flex-direction: column;
  }

  .app-settings-modal-shell .settings-modal-row .ui-item-actions,
  .app-settings-modal-shell :is(.settings-modal-select, .settings-modal-update-track-select) {
    width: 100%;
  }

  .app-settings-modal-shell .settings-modal-update-actions {
    justify-content: flex-end;
  }
}

@media (prefers-reduced-motion: reduce) {
  .settings-modal {
    animation: none;
  }

  .settings-modal-scroll-frame::before,
  .settings-modal-scroll-frame::after {
    transition: none;
  }

  .settings-modal-tab-panel {
    animation: none;
  }

  .settings-identity-name-input.is-shaking {
    animation: none;
    transform: none;
  }
}

/* The Profile side panel is as narrow as a small screen, so its name field goes under its label. */
.settings-panel .settings-identity-name-row {
  align-items: flex-start;
  flex-direction: column;
}

.settings-panel .settings-identity-name-control {
  width: 100%;
}


/* /@fs//app/src/renderer/src/features/settings/settings-modal.css */
/*
 * Settings modal rules for markup that only the renderer draws: the server settings detail crumbs,
 * the provider section, the Dynamic Island tab, the voice key row and the sound theme row. The
 * shared modal frame and its panels are in `@openbot/ui/features/settings/settings-modal.css`,
 * which `styles.css` imports immediately before this file.
 */

/*
 * A detail view inside a section keeps the header as the way back, as the agent skills modal does,
 * rather than a back row above the panel.
 */
.settings-modal-crumbs {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}

/*
 * The parent crumb is a ghost button, so `.ui-button` would otherwise win the type properties and
 * draw it smaller than the title it sits in. The selector carries the modal class to take those
 * back. Hover changes only the text colour. The padding gives the keyboard focus ring room, and negative
 * margins cancel it and the border on every side, so the header keeps the same height, the crumb text
 * keeps the title's left edge, and the separator has the same space on both sides.
 */
.settings-modal .settings-modal-crumb-parent {
  min-width: 0;
  height: auto;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  color: var(--openbot-text-muted);
  margin-block: calc(-1 * var(--openbot-space-1) - 1px);
  margin-inline: calc(-1 * var(--openbot-space-2) - 1px);
  padding: var(--openbot-space-1) var(--openbot-space-2);
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  /* The shared ghost hover outweighs the base rule above, so this rule clears its fill. */
  .settings-modal .settings-modal-crumb-parent:hover:not(:disabled) {
    background: transparent;
    color: var(--openbot-text-primary);
  }
}

.settings-modal-crumb-separator {
  flex: 0 0 auto;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
}

.settings-modal-crumb-current {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-provider-section {
  display: grid;
  gap: var(--openbot-space-2);
}

.settings-dynamic-island-size > .ui-slider-field,
.settings-dynamic-island-preview {
  padding: var(--openbot-space-3) var(--openbot-space-4);
}

/* A server logo in the island server list, at the size of the billing server rows. */
.settings-dynamic-island-server-mark {
  --server-gradient-logo-size: 32px;
  --server-gradient-logo-radius: var(--openbot-radius-md);
}

.settings-dynamic-island-server-mark > img {
  width: 32px;
  height: 32px;
  border-radius: var(--openbot-radius-md);
}

.settings-dynamic-island-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--openbot-space-3);
}

.settings-dynamic-island-preview-display {
  min-width: 0;
  display: grid;
  gap: var(--openbot-space-1-5);
  margin: 0;
}

/* The top edge of a screen: the island hangs from it as it does from the real menu bar. The strip
   clips the island, so a width past the strip shows as cut off rather than as a wider card. */
.settings-dynamic-island-preview-bar {
  height: 64px;
  display: flex;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-canvas);
  box-shadow: inset 0 0 0 1px var(--openbot-border);
}

.settings-dynamic-island-preview-fit {
  /* The island hangs below the 1px frame edge, so the edge runs over it and the notch shoulders
     curve out of it, as they do out of the top edge of a display. */
  margin-top: 1px;
  display: flex;
  justify-content: center;
  transform-origin: top center;
  scale: var(--settings-dynamic-island-preview-scale, 1);
  transition: scale var(--openbot-duration-slow) var(--openbot-ease-out);
}

.settings-dynamic-island-preview-caption {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-align: center;
}

.settings-voice-key {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-top: var(--openbot-space-2);
}

.settings-voice-key > .ui-input {
  flex: 1;
  min-width: 0;
}

/* The sound theme cards are too wide to sit beside the text, so they wrap below it. */
.settings-sound-theme-row {
  flex-wrap: wrap;
}

.settings-sound-theme-row > .sound-theme-picker {
  flex-basis: 100%;
}


/* /@fs//app/packages/ui/src/features/servers/server-update-dialog.css */
.server-update-dialog-body {
  display: grid;
  gap: var(--openbot-space-3);
}

.server-update-step-progress {
  margin-top: var(--openbot-space-1-5);
}

.server-update-step-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-2);
  margin-top: var(--openbot-space-2);
}


/* /@fs//app/packages/ui/src/features/conversation/conversation.css */
/* Import order preserves the conversation cascade. Keep later overrides after base rules. */
@font-face{font-display:block;font-family:KaTeX_AMS;font-style:normal;font-weight:400;src:url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_AMS-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_AMS-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_AMS-Regular.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Caligraphic;font-style:normal;font-weight:700;src:url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Bold.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Bold.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Bold.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Caligraphic;font-style:normal;font-weight:400;src:url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Regular.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Fraktur;font-style:normal;font-weight:700;src:url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Fraktur-Bold.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Fraktur-Bold.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Fraktur-Bold.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Fraktur;font-style:normal;font-weight:400;src:url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Fraktur-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Fraktur-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Fraktur-Regular.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:normal;font-weight:700;src:url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-Bold.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-Bold.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-Bold.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:italic;font-weight:700;src:url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-BoldItalic.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-BoldItalic.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-BoldItalic.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:italic;font-weight:400;src:url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-Italic.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-Italic.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-Italic.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:normal;font-weight:400;src:url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-Regular.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Math;font-style:italic;font-weight:700;src:url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Math-BoldItalic.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Math-BoldItalic.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Math-BoldItalic.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Math;font-style:italic;font-weight:400;src:url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Math-Italic.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Math-Italic.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Math-Italic.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:normal;font-weight:700;src:url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_SansSerif-Bold.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_SansSerif-Bold.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_SansSerif-Bold.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:italic;font-weight:400;src:url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_SansSerif-Italic.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_SansSerif-Italic.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_SansSerif-Italic.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:normal;font-weight:400;src:url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_SansSerif-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_SansSerif-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_SansSerif-Regular.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Script;font-style:normal;font-weight:400;src:url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Script-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Script-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Script-Regular.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size1;font-style:normal;font-weight:400;src:url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size1-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size1-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size1-Regular.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size2;font-style:normal;font-weight:400;src:url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size2-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size2-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size2-Regular.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size3;font-style:normal;font-weight:400;src:url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size3-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size3-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size3-Regular.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size4;font-style:normal;font-weight:400;src:url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size4-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size4-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size4-Regular.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Typewriter;font-style:normal;font-weight:400;src:url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Typewriter-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Typewriter-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Typewriter-Regular.ttf) format("truetype")}.katex{font:normal 1.21em KaTeX_Main,Times New Roman,serif;line-height:1.2;position:relative;text-indent:0;text-rendering:auto}.katex *{-ms-high-contrast-adjust:none!important;border-color:currentColor}.katex .katex-version:after{content:"0.18.9"}.katex .katex-mathml{border:0;-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;padding:0;position:absolute;width:1px}.katex .katex-html>.katex-newline{display:block}.katex .katex-base{position:relative;white-space:nowrap;width:-webkit-min-content;width:-moz-min-content;width:min-content}.katex .katex-base,.katex .katex-strut{display:inline-block}.katex .textbf{font-weight:700}.katex .textit{font-style:italic}.katex .textrm{font-family:KaTeX_Main}.katex .textsf{font-family:KaTeX_SansSerif}.katex .texttt{font-family:KaTeX_Typewriter}.katex .mathnormal{font-family:KaTeX_Math;font-style:italic}.katex .mathit{font-family:KaTeX_Main;font-style:italic}.katex .mathrm{font-style:normal}.katex .mathbf{font-family:KaTeX_Main;font-weight:700}.katex .boldsymbol{font-family:KaTeX_Math;font-style:italic;font-weight:700}.katex .amsrm,.katex .mathbb,.katex .textbb{font-family:KaTeX_AMS}.katex .mathcal{font-family:KaTeX_Caligraphic}.katex .mathfrak,.katex .textfrak{font-family:KaTeX_Fraktur}.katex .mathboldfrak,.katex .textboldfrak{font-family:KaTeX_Fraktur;font-weight:700}.katex .mathtt{font-family:KaTeX_Typewriter}.katex .mathscr,.katex .textscr{font-family:KaTeX_Script}.katex .mathsf,.katex .textsf{font-family:KaTeX_SansSerif}.katex .mathboldsf,.katex .textboldsf{font-family:KaTeX_SansSerif;font-weight:700}.katex .mathitsf,.katex .mathsfit,.katex .textitsf{font-family:KaTeX_SansSerif;font-style:italic}.katex .mainrm{font-family:KaTeX_Main;font-style:normal}.katex .vlist-t{border-collapse:collapse;display:inline-table;table-layout:fixed}.katex .vlist-r{display:table-row}.katex .vlist{display:table-cell;position:relative;vertical-align:bottom}.katex .vlist>span{display:block;height:0;position:relative}.katex .vlist>span>span{display:inline-block}.katex .vlist>span>.pstrut{overflow:hidden;width:0}.katex .vlist-t2{margin-right:-2px}.katex .vlist-s{display:table-cell;font-size:1px;min-width:2px;vertical-align:bottom;width:2px}.katex .katex-vbox{align-items:baseline;display:inline-flex;flex-direction:column}.katex .katex-thinbox{display:inline-flex;flex-direction:row;max-width:0;width:0}.katex .msupsub{text-align:left}.katex .mfrac>span>span{text-align:center}.katex .mfrac .frac-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .katex-hdashline,.katex .katex-hline,.katex .katex-overline .overline-line,.katex .katex-rule,.katex .katex-underline .underline-line,.katex .mfrac .frac-line{min-height:1px}.katex .mspace{display:inline-block}.katex .katex-smash{display:inline;line-height:0}.katex .clap,.katex .llap,.katex .rlap{position:relative;width:0}.katex .clap>.katex-inner,.katex .llap>.katex-inner,.katex .rlap>.katex-inner{position:absolute}.katex .clap>.katex-fix,.katex .llap>.katex-fix,.katex .rlap>.katex-fix{display:inline-block}.katex .llap>.katex-inner{right:0}.katex .clap>.katex-inner,.katex .rlap>.katex-inner{left:0}.katex .clap>.katex-inner>span{margin-left:-50%;margin-right:50%}.katex .katex-rule{border:0 solid;display:inline-block;position:relative}.katex .katex-hline,.katex .katex-overline .overline-line,.katex .katex-underline .underline-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .katex-hdashline{border-bottom-style:dashed;display:inline-block;width:100%}.katex .sqrt>.katex-root{margin-left:.2777777778em;margin-right:-.5555555556em}.katex .fontsize-ensurer.reset-size1.size1,.katex .katex-sizing.reset-size1.size1{font-size:1em}.katex .fontsize-ensurer.reset-size1.size2,.katex .katex-sizing.reset-size1.size2{font-size:1.2em}.katex .fontsize-ensurer.reset-size1.size3,.katex .katex-sizing.reset-size1.size3{font-size:1.4em}.katex .fontsize-ensurer.reset-size1.size4,.katex .katex-sizing.reset-size1.size4{font-size:1.6em}.katex .fontsize-ensurer.reset-size1.size5,.katex .katex-sizing.reset-size1.size5{font-size:1.8em}.katex .fontsize-ensurer.reset-size1.size6,.katex .katex-sizing.reset-size1.size6{font-size:2em}.katex .fontsize-ensurer.reset-size1.size7,.katex .katex-sizing.reset-size1.size7{font-size:2.4em}.katex .fontsize-ensurer.reset-size1.size8,.katex .katex-sizing.reset-size1.size8{font-size:2.88em}.katex .fontsize-ensurer.reset-size1.size9,.katex .katex-sizing.reset-size1.size9{font-size:3.456em}.katex .fontsize-ensurer.reset-size1.size10,.katex .katex-sizing.reset-size1.size10{font-size:4.148em}.katex .fontsize-ensurer.reset-size1.size11,.katex .katex-sizing.reset-size1.size11{font-size:4.976em}.katex .fontsize-ensurer.reset-size2.size1,.katex .katex-sizing.reset-size2.size1{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size2.size2,.katex .katex-sizing.reset-size2.size2{font-size:1em}.katex .fontsize-ensurer.reset-size2.size3,.katex .katex-sizing.reset-size2.size3{font-size:1.1666666667em}.katex .fontsize-ensurer.reset-size2.size4,.katex .katex-sizing.reset-size2.size4{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size2.size5,.katex .katex-sizing.reset-size2.size5{font-size:1.5em}.katex .fontsize-ensurer.reset-size2.size6,.katex .katex-sizing.reset-size2.size6{font-size:1.6666666667em}.katex .fontsize-ensurer.reset-size2.size7,.katex .katex-sizing.reset-size2.size7{font-size:2em}.katex .fontsize-ensurer.reset-size2.size8,.katex .katex-sizing.reset-size2.size8{font-size:2.4em}.katex .fontsize-ensurer.reset-size2.size9,.katex .katex-sizing.reset-size2.size9{font-size:2.88em}.katex .fontsize-ensurer.reset-size2.size10,.katex .katex-sizing.reset-size2.size10{font-size:3.4566666667em}.katex .fontsize-ensurer.reset-size2.size11,.katex .katex-sizing.reset-size2.size11{font-size:4.1466666667em}.katex .fontsize-ensurer.reset-size3.size1,.katex .katex-sizing.reset-size3.size1{font-size:.7142857143em}.katex .fontsize-ensurer.reset-size3.size2,.katex .katex-sizing.reset-size3.size2{font-size:.8571428571em}.katex .fontsize-ensurer.reset-size3.size3,.katex .katex-sizing.reset-size3.size3{font-size:1em}.katex .fontsize-ensurer.reset-size3.size4,.katex .katex-sizing.reset-size3.size4{font-size:1.1428571429em}.katex .fontsize-ensurer.reset-size3.size5,.katex .katex-sizing.reset-size3.size5{font-size:1.2857142857em}.katex .fontsize-ensurer.reset-size3.size6,.katex .katex-sizing.reset-size3.size6{font-size:1.4285714286em}.katex .fontsize-ensurer.reset-size3.size7,.katex .katex-sizing.reset-size3.size7{font-size:1.7142857143em}.katex .fontsize-ensurer.reset-size3.size8,.katex .katex-sizing.reset-size3.size8{font-size:2.0571428571em}.katex .fontsize-ensurer.reset-size3.size9,.katex .katex-sizing.reset-size3.size9{font-size:2.4685714286em}.katex .fontsize-ensurer.reset-size3.size10,.katex .katex-sizing.reset-size3.size10{font-size:2.9628571429em}.katex .fontsize-ensurer.reset-size3.size11,.katex .katex-sizing.reset-size3.size11{font-size:3.5542857143em}.katex .fontsize-ensurer.reset-size4.size1,.katex .katex-sizing.reset-size4.size1{font-size:.625em}.katex .fontsize-ensurer.reset-size4.size2,.katex .katex-sizing.reset-size4.size2{font-size:.75em}.katex .fontsize-ensurer.reset-size4.size3,.katex .katex-sizing.reset-size4.size3{font-size:.875em}.katex .fontsize-ensurer.reset-size4.size4,.katex .katex-sizing.reset-size4.size4{font-size:1em}.katex .fontsize-ensurer.reset-size4.size5,.katex .katex-sizing.reset-size4.size5{font-size:1.125em}.katex .fontsize-ensurer.reset-size4.size6,.katex .katex-sizing.reset-size4.size6{font-size:1.25em}.katex .fontsize-ensurer.reset-size4.size7,.katex .katex-sizing.reset-size4.size7{font-size:1.5em}.katex .fontsize-ensurer.reset-size4.size8,.katex .katex-sizing.reset-size4.size8{font-size:1.8em}.katex .fontsize-ensurer.reset-size4.size9,.katex .katex-sizing.reset-size4.size9{font-size:2.16em}.katex .fontsize-ensurer.reset-size4.size10,.katex .katex-sizing.reset-size4.size10{font-size:2.5925em}.katex .fontsize-ensurer.reset-size4.size11,.katex .katex-sizing.reset-size4.size11{font-size:3.11em}.katex .fontsize-ensurer.reset-size5.size1,.katex .katex-sizing.reset-size5.size1{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size5.size2,.katex .katex-sizing.reset-size5.size2{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size5.size3,.katex .katex-sizing.reset-size5.size3{font-size:.7777777778em}.katex .fontsize-ensurer.reset-size5.size4,.katex .katex-sizing.reset-size5.size4{font-size:.8888888889em}.katex .fontsize-ensurer.reset-size5.size5,.katex .katex-sizing.reset-size5.size5{font-size:1em}.katex .fontsize-ensurer.reset-size5.size6,.katex .katex-sizing.reset-size5.size6{font-size:1.1111111111em}.katex .fontsize-ensurer.reset-size5.size7,.katex .katex-sizing.reset-size5.size7{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size5.size8,.katex .katex-sizing.reset-size5.size8{font-size:1.6em}.katex .fontsize-ensurer.reset-size5.size9,.katex .katex-sizing.reset-size5.size9{font-size:1.92em}.katex .fontsize-ensurer.reset-size5.size10,.katex .katex-sizing.reset-size5.size10{font-size:2.3044444444em}.katex .fontsize-ensurer.reset-size5.size11,.katex .katex-sizing.reset-size5.size11{font-size:2.7644444444em}.katex .fontsize-ensurer.reset-size6.size1,.katex .katex-sizing.reset-size6.size1{font-size:.5em}.katex .fontsize-ensurer.reset-size6.size2,.katex .katex-sizing.reset-size6.size2{font-size:.6em}.katex .fontsize-ensurer.reset-size6.size3,.katex .katex-sizing.reset-size6.size3{font-size:.7em}.katex .fontsize-ensurer.reset-size6.size4,.katex .katex-sizing.reset-size6.size4{font-size:.8em}.katex .fontsize-ensurer.reset-size6.size5,.katex .katex-sizing.reset-size6.size5{font-size:.9em}.katex .fontsize-ensurer.reset-size6.size6,.katex .katex-sizing.reset-size6.size6{font-size:1em}.katex .fontsize-ensurer.reset-size6.size7,.katex .katex-sizing.reset-size6.size7{font-size:1.2em}.katex .fontsize-ensurer.reset-size6.size8,.katex .katex-sizing.reset-size6.size8{font-size:1.44em}.katex .fontsize-ensurer.reset-size6.size9,.katex .katex-sizing.reset-size6.size9{font-size:1.728em}.katex .fontsize-ensurer.reset-size6.size10,.katex .katex-sizing.reset-size6.size10{font-size:2.074em}.katex .fontsize-ensurer.reset-size6.size11,.katex .katex-sizing.reset-size6.size11{font-size:2.488em}.katex .fontsize-ensurer.reset-size7.size1,.katex .katex-sizing.reset-size7.size1{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size7.size2,.katex .katex-sizing.reset-size7.size2{font-size:.5em}.katex .fontsize-ensurer.reset-size7.size3,.katex .katex-sizing.reset-size7.size3{font-size:.5833333333em}.katex .fontsize-ensurer.reset-size7.size4,.katex .katex-sizing.reset-size7.size4{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size7.size5,.katex .katex-sizing.reset-size7.size5{font-size:.75em}.katex .fontsize-ensurer.reset-size7.size6,.katex .katex-sizing.reset-size7.size6{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size7.size7,.katex .katex-sizing.reset-size7.size7{font-size:1em}.katex .fontsize-ensurer.reset-size7.size8,.katex .katex-sizing.reset-size7.size8{font-size:1.2em}.katex .fontsize-ensurer.reset-size7.size9,.katex .katex-sizing.reset-size7.size9{font-size:1.44em}.katex .fontsize-ensurer.reset-size7.size10,.katex .katex-sizing.reset-size7.size10{font-size:1.7283333333em}.katex .fontsize-ensurer.reset-size7.size11,.katex .katex-sizing.reset-size7.size11{font-size:2.0733333333em}.katex .fontsize-ensurer.reset-size8.size1,.katex .katex-sizing.reset-size8.size1{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size8.size2,.katex .katex-sizing.reset-size8.size2{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size8.size3,.katex .katex-sizing.reset-size8.size3{font-size:.4861111111em}.katex .fontsize-ensurer.reset-size8.size4,.katex .katex-sizing.reset-size8.size4{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size8.size5,.katex .katex-sizing.reset-size8.size5{font-size:.625em}.katex .fontsize-ensurer.reset-size8.size6,.katex .katex-sizing.reset-size8.size6{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size8.size7,.katex .katex-sizing.reset-size8.size7{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size8.size8,.katex .katex-sizing.reset-size8.size8{font-size:1em}.katex .fontsize-ensurer.reset-size8.size9,.katex .katex-sizing.reset-size8.size9{font-size:1.2em}.katex .fontsize-ensurer.reset-size8.size10,.katex .katex-sizing.reset-size8.size10{font-size:1.4402777778em}.katex .fontsize-ensurer.reset-size8.size11,.katex .katex-sizing.reset-size8.size11{font-size:1.7277777778em}.katex .fontsize-ensurer.reset-size9.size1,.katex .katex-sizing.reset-size9.size1{font-size:.2893518519em}.katex .fontsize-ensurer.reset-size9.size2,.katex .katex-sizing.reset-size9.size2{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size9.size3,.katex .katex-sizing.reset-size9.size3{font-size:.4050925926em}.katex .fontsize-ensurer.reset-size9.size4,.katex .katex-sizing.reset-size9.size4{font-size:.462962963em}.katex .fontsize-ensurer.reset-size9.size5,.katex .katex-sizing.reset-size9.size5{font-size:.5208333333em}.katex .fontsize-ensurer.reset-size9.size6,.katex .katex-sizing.reset-size9.size6{font-size:.5787037037em}.katex .fontsize-ensurer.reset-size9.size7,.katex .katex-sizing.reset-size9.size7{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size9.size8,.katex .katex-sizing.reset-size9.size8{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size9.size9,.katex .katex-sizing.reset-size9.size9{font-size:1em}.katex .fontsize-ensurer.reset-size9.size10,.katex .katex-sizing.reset-size9.size10{font-size:1.2002314815em}.katex .fontsize-ensurer.reset-size9.size11,.katex .katex-sizing.reset-size9.size11{font-size:1.4398148148em}.katex .fontsize-ensurer.reset-size10.size1,.katex .katex-sizing.reset-size10.size1{font-size:.2410800386em}.katex .fontsize-ensurer.reset-size10.size2,.katex .katex-sizing.reset-size10.size2{font-size:.2892960463em}.katex .fontsize-ensurer.reset-size10.size3,.katex .katex-sizing.reset-size10.size3{font-size:.337512054em}.katex .fontsize-ensurer.reset-size10.size4,.katex .katex-sizing.reset-size10.size4{font-size:.3857280617em}.katex .fontsize-ensurer.reset-size10.size5,.katex .katex-sizing.reset-size10.size5{font-size:.4339440694em}.katex .fontsize-ensurer.reset-size10.size6,.katex .katex-sizing.reset-size10.size6{font-size:.4821600771em}.katex .fontsize-ensurer.reset-size10.size7,.katex .katex-sizing.reset-size10.size7{font-size:.5785920926em}.katex .fontsize-ensurer.reset-size10.size8,.katex .katex-sizing.reset-size10.size8{font-size:.6943105111em}.katex .fontsize-ensurer.reset-size10.size9,.katex .katex-sizing.reset-size10.size9{font-size:.8331726133em}.katex .fontsize-ensurer.reset-size10.size10,.katex .katex-sizing.reset-size10.size10{font-size:1em}.katex .fontsize-ensurer.reset-size10.size11,.katex .katex-sizing.reset-size10.size11{font-size:1.1996142719em}.katex .fontsize-ensurer.reset-size11.size1,.katex .katex-sizing.reset-size11.size1{font-size:.2009646302em}.katex .fontsize-ensurer.reset-size11.size2,.katex .katex-sizing.reset-size11.size2{font-size:.2411575563em}.katex .fontsize-ensurer.reset-size11.size3,.katex .katex-sizing.reset-size11.size3{font-size:.2813504823em}.katex .fontsize-ensurer.reset-size11.size4,.katex .katex-sizing.reset-size11.size4{font-size:.3215434084em}.katex .fontsize-ensurer.reset-size11.size5,.katex .katex-sizing.reset-size11.size5{font-size:.3617363344em}.katex .fontsize-ensurer.reset-size11.size6,.katex .katex-sizing.reset-size11.size6{font-size:.4019292605em}.katex .fontsize-ensurer.reset-size11.size7,.katex .katex-sizing.reset-size11.size7{font-size:.4823151125em}.katex .fontsize-ensurer.reset-size11.size8,.katex .katex-sizing.reset-size11.size8{font-size:.578778135em}.katex .fontsize-ensurer.reset-size11.size9,.katex .katex-sizing.reset-size11.size9{font-size:.6945337621em}.katex .fontsize-ensurer.reset-size11.size10,.katex .katex-sizing.reset-size11.size10{font-size:.8336012862em}.katex .fontsize-ensurer.reset-size11.size11,.katex .katex-sizing.reset-size11.size11{font-size:1em}.katex .delimsizing.size1{font-family:KaTeX_Size1}.katex .delimsizing.size2{font-family:KaTeX_Size2}.katex .delimsizing.size3{font-family:KaTeX_Size3}.katex .delimsizing.size4{font-family:KaTeX_Size4}.katex .delimsizing.mult .delim-size1>span{font-family:KaTeX_Size1}.katex .delimsizing.mult .delim-size4>span{font-family:KaTeX_Size4}.katex .nulldelimiter{display:inline-block;width:.12em}.katex .delimcenter,.katex .op-symbol{position:relative}.katex .op-symbol.small-op{font-family:KaTeX_Size1}.katex .op-symbol.large-op{font-family:KaTeX_Size2}.katex .katex-accent>.vlist-t,.katex .op-limits>.vlist-t{text-align:center}.katex .katex-accent .accent-body{position:relative}.katex .katex-accent .accent-body:not(.accent-full){width:0}.katex .katex-overlay{display:block}.katex .mtable .vertical-separator{display:inline-block;min-width:1px}.katex .mtable .arraycolsep{display:inline-block}.katex .mtable .col-align-c>.vlist-t{text-align:center}.katex .mtable .col-align-l>.vlist-t{text-align:left}.katex .mtable .col-align-r>.vlist-t{text-align:right}.katex .svg-align{text-align:left}.katex svg{fill:currentColor;stroke:currentColor;display:block;height:inherit;position:absolute;width:100%}.katex svg path{stroke:none}.katex svg{fill-rule:nonzero;fill-opacity:1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1}.katex img{border-style:none;max-height:none;max-width:none;min-height:0;min-width:0}.katex .katex-stretchy{display:block;overflow:hidden;position:relative;width:100%}.katex .katex-stretchy:after,.katex .katex-stretchy:before{content:""}.katex .hide-tail{overflow:hidden;position:relative;width:100%}.katex .halfarrow-left{left:0;overflow:hidden;position:absolute;width:50.2%}.katex .halfarrow-right{overflow:hidden;position:absolute;right:0;width:50.2%}.katex .brace-left{left:0;overflow:hidden;position:absolute;width:25.1%}.katex .brace-center{left:25%;overflow:hidden;position:absolute;width:50%}.katex .brace-right{overflow:hidden;position:absolute;right:0;width:25.1%}.katex .x-arrow-pad{padding:0 .5em}.katex .cd-arrow-pad{padding:0 .55556em 0 .27778em}.katex .mover,.katex .munder,.katex .x-arrow{text-align:center}.katex .boxpad{padding:0 .3em}.katex .fbox,.katex .fcolorbox{border:.04em solid;box-sizing:border-box}.katex .cancel-pad{padding:0 .2em}.katex .cancel-lap{margin-left:-.2em;margin-right:-.2em}.katex .katex-sout{border-bottom-style:solid;border-bottom-width:.08em}.katex .angl{border-right:.049em solid;border-top:.049em solid;box-sizing:border-box;margin-right:.03889em}.katex .anglpad{padding:0 .03889em}.katex .reflectbox{display:inline-block;transform:scaleX(-1)}.katex .eqn-num:before{content:"(" counter(katexEqnNo) ")";counter-increment:katexEqnNo}.katex .mml-eqn-num:before{content:"(" counter(mmlEqnNo) ")";counter-increment:mmlEqnNo}.katex .mtr-glue{width:50%}.katex .cd-vert-arrow{display:inline-block;position:relative}.katex .cd-label-left{display:inline-block;position:absolute;right:calc(50% + .3em);text-align:left}.katex .cd-label-right{display:inline-block;left:calc(50% + .3em);position:absolute;text-align:right}.katex-display{display:block;margin:1em 0;text-align:center}.katex-display>.katex{display:block;text-align:center;white-space:nowrap}.katex-display>.katex>.katex-html{display:block;position:relative}.katex-display>.katex>.katex-html>.katex-tag{position:absolute;right:0}.katex-display.leqno>.katex>.katex-html>.katex-tag{left:0;right:auto}.katex-display.fleqn>.katex{padding-left:2em;text-align:left}body{counter-reset:katexEqnNo mmlEqnNo}
.conversation-panel {
  position: relative;
  display: flex;
  grid-column: 3;
  grid-row: 1;
  min-width: 0;
  flex-direction: column;
  background: var(--openbot-bg-canvas);
  transition: padding-right var(--panel-resize-duration, var(--openbot-duration-overlay)) cubic-bezier(0.22, 1, 0.36, 1);
}

.direct-conversation {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 0;
  grid-column: 3;
  grid-row: 1;
  flex-direction: column;
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
}

.app-frame-with-server-rail .direct-conversation {
  grid-column: 4;
}

.direct-conversation-header {
  display: flex;
  height: 46px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--openbot-hover);
  padding: 0 14px;
}

.direct-conversation-person {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}

.direct-conversation-person .person-avatar {
  --agent-avatar-optical-offset: -8px;

  width: 30px;
  height: 30px;
  border-radius: var(--openbot-radius-md);
}

.direct-conversation-person .person-avatar > i {
  display: none;
}

.direct-conversation-person h1 {
  overflow: hidden;
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: 560;
  line-height: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.direct-conversation-person div > span {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 11px;
}

.direct-conversation-person div > span i {
  width: 5px;
  height: 5px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control-hover);
}

.direct-conversation-person div > span.online {
  color: var(--openbot-success);
}

.direct-conversation-person div > span.online i {
  background: var(--openbot-success);
}

.direct-private-label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--openbot-text-readable);
  font-size: var(--openbot-text-sm);
}

.direct-private-label svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}

.direct-message-list {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  padding: 22px max(18px, calc((100% - 760px) / 2)) 28px;
}

.direct-conversation-state,
.direct-conversation-empty {
  display: grid;
  min-height: 100%;
  place-content: center;
  justify-items: center;
  color: var(--openbot-text-muted);
  text-align: center;
}

.direct-conversation-empty h2 {
  margin: 14px 0 4px;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-xl);
  font-weight: 560;
}

.direct-conversation-empty p {
  max-width: 290px;
  margin: 0;
  font-size: var(--openbot-text-sm);
  line-height: 17px;
}

.direct-message-list .ui-message-group {
  gap: 0;
}

.direct-message > .ui-message-content {
  max-width: min(560px, 78%);
}

.direct-message .ui-bubble {
  max-width: 100%;
}

.direct-message .ui-bubble-content {
  font-size: var(--openbot-text-md);
  line-height: 19px;
  white-space: pre-wrap;
}

.direct-message time {
  color: var(--openbot-text-readable);
  font-size: var(--openbot-text-sm);
}

.direct-message .ui-message-footer {
  padding: 0 2px;
}

.direct-composer-wrap {
  flex: 0 0 auto;
  padding: 0 max(18px, calc((100% - 760px) / 2)) 16px;
}

.direct-typing-indicator {
  display: flex;
  min-height: 20px;
  align-items: center;
  gap: 7px;
  padding: 0 10px 4px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

.direct-message-error {
  margin: 0 8px 6px;
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
}

.direct-composer {
  display: flex;
  min-height: 46px;
  align-items: flex-end;
  gap: 8px;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  padding: 6px 7px 6px 13px;
  box-shadow: 0 8px 25px var(--openbot-shadow-popover-ambient);
}

.direct-composer:focus-within {
  border-color: var(--openbot-border-strong);
}

.direct-composer textarea {
  min-width: 0;
  min-height: 32px;
  max-height: 130px;
  flex: 1;
  resize: none;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 6px 0;
  color: var(--openbot-text-primary);
  font: inherit;
  font-size: var(--openbot-text-md);
  line-height: 20px;
}

.direct-composer textarea::placeholder {
  color: var(--openbot-text-muted);
}

.direct-composer > button {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-success);
  color: var(--openbot-success);
  font-size: var(--openbot-text-xl);
  font-weight: 650;
}

.direct-composer > button:disabled {
  background: var(--openbot-border);
  color: var(--openbot-text-dim);
}

.app-frame-with-server-rail .conversation-panel {
  grid-column: 4;
}
.conversation-header {
  display: flex;
  height: 38px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  border-bottom: 0;
  padding: 0 12px 0 8px;
  background: transparent;
}

.conversation-heading-group {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.chat-search {
  position: absolute;
  z-index: 13;
  top: 19px;
  right: 16px;
  display: flex;
  width: min(308px, calc(100% - 32px));
  height: 34px;
  align-items: center;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  box-shadow: var(--openbot-shadow-raised);
  color: var(--openbot-text-muted);
}

.chat-search-icon {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  margin-left: 11px;
  stroke-width: var(--openbot-icon-stroke);
}

.chat-search .chat-search-input {
  min-width: 0;
  height: var(--openbot-control-md);
  flex: 1;
  border: 0;
  background: transparent;
  padding: 0 8px;
  box-shadow: none;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
}

.chat-search .chat-search-input:focus {
  border: 0;
  box-shadow: none;
  outline: 0;
}

.chat-search-input::-webkit-search-cancel-button {
  display: none;
}

.chat-search-position {
  min-width: 38px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.chat-search-separator {
  width: 1px;
  height: 20px;
  flex: 0 0 auto;
  background: var(--openbot-border);
}

.chat-search .chat-search-button {
  width: 26px;
  height: var(--openbot-control-md);
  flex: 0 0 auto;
  border: 0;
  border-radius: inherit;
  padding: 0;
}

.chat-search-button svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: var(--openbot-icon-stroke);
}

.chat-search .chat-search-close {
  margin-right: 3px;
}

::highlight(openbot-chat-search-results) {
  background: var(--openbot-accent-soft);
}

::highlight(openbot-chat-search-current) {
  background: var(--openbot-warning);
  color: var(--openbot-text-on-light);
}

.conversation-title[aria-label="View agent settings"]:hover {
  color: var(--openbot-text-primary);
}

.browser-panel {
  position: absolute;
  z-index: 14;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  width: var(--browser-panel-width, 380px);
  flex-direction: column;
  border-left: 1px solid var(--openbot-border);
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
  transition:
    border-color var(--openbot-duration-slow) ease,
    box-shadow var(--openbot-duration-slow) ease;
}
/* transitions.dev panel reveal for the file preview. The panel enters from
   the right edge, so it travels on X. `.browser-panel` declares its own
   transition later in the cascade than the `.t-panel-slide` snippet, so both
   property lists are restated here at a higher specificity. */
.file-preview-panel.t-panel-slide {
  --panel-translate-x: 24px;
  --panel-translate-y: 0px;

  transition:
    transform var(--panel-close-dur) var(--panel-ease),
    opacity var(--panel-close-dur) var(--panel-ease),
    filter var(--panel-close-dur) var(--panel-ease),
    border-color var(--openbot-duration-slow) ease,
    box-shadow var(--openbot-duration-slow) ease;
}

.file-preview-panel.t-panel-slide[data-open="true"] {
  transition:
    transform var(--panel-open-dur) var(--panel-ease),
    opacity var(--panel-open-dur) var(--panel-ease),
    filter var(--panel-open-dur) var(--panel-ease),
    border-color var(--openbot-duration-slow) ease,
    box-shadow var(--openbot-duration-slow) ease;
}

.file-preview-header {
  display: flex;
  height: 39px;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--openbot-border);
  padding: 0 7px 0 11px;
}

.file-preview-header h2 {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Copy is a shared icon button; its icon matches the other header icons. */
.file-preview-copy svg {
  width: 15px;
  height: 15px;
  stroke-width: 2;
}

.file-preview-file-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  stroke-width: var(--openbot-icon-stroke);
}

.file-preview-content {
  min-height: 0;
  flex: 1;
  overflow: auto;
  background: var(--openbot-bg-canvas);
}

.markdown-file-preview {
  min-width: 0;
}

.file-preview-markdown {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 26px 48px;
  color: var(--openbot-text-primary);
  overflow-wrap: anywhere;
}

.file-preview-markdown > .message-markdown {
  font-size: var(--openbot-text-md);
  line-height: 1.6;
}

.file-preview-markdown-status {
  min-width: 0;
  margin: 0;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface);
  padding: 18px 20px;
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  line-height: 1.55;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.file-preview-text {
  min-width: min-content;
  min-height: 100%;
  margin: 0;
  padding: 18px 20px 48px;
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  line-height: 1.55;
  tab-size: 2;
  white-space: pre;
}

.file-preview-text-wrap {
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.file-preview-image-wrap {
  display: grid;
  min-height: 100%;
  padding: 20px;
  place-items: center;
}

.file-preview-image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.file-preview-pdf {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--openbot-bg-canvas);
}

.file-preview-audio {
  display: block;
  width: calc(100% - 40px);
  margin: 20px;
}

.file-preview-video {
  display: block;
  width: 100%;
  max-height: 100%;
  background: var(--openbot-bg-canvas);
  object-fit: contain;
}

.file-preview-spreadsheet {
  min-width: 0;
  min-height: 100%;
  padding: 20px;
  color: var(--openbot-text-primary);
}

.file-preview-spreadsheet-status {
  margin: 0;
  color: var(--openbot-text-muted);
  font-family: var(--openbot-font-mono);
  white-space: pre-wrap;
}

.file-preview-spreadsheet-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  overflow-x: auto;
}

.file-preview-spreadsheet-tabs button {
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-control);
  padding: 6px 10px;
  color: var(--openbot-text-muted);
  white-space: nowrap;
}

.file-preview-spreadsheet-tabs button[aria-pressed="true"] {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-primary);
}

.file-preview-spreadsheet-table-wrap {
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface);
}

.file-preview-spreadsheet-table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: var(--openbot-text-sm);
}

.file-preview-spreadsheet-table caption {
  padding: 10px 12px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-align: left;
}

.file-preview-spreadsheet-table th,
.file-preview-spreadsheet-table td {
  border-top: 1px solid var(--openbot-border);
  border-right: 1px solid var(--openbot-border);
  padding: 8px 12px;
  text-align: left;
  white-space: pre;
}

.file-preview-spreadsheet-table th {
  background: var(--openbot-bg-control);
  font-weight: 600;
}

.file-preview-spreadsheet-table td:last-child,
.file-preview-spreadsheet-table th:last-child {
  border-right: 0;
}

.file-preview-spreadsheet-note {
  margin: 10px 0 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.file-preview-unsupported {
  display: grid;
  min-height: 100%;
  place-content: center;
  justify-items: center;
  gap: 8px;
  padding: 24px;
  color: var(--openbot-text-muted);
  text-align: center;
}

.file-preview-unsupported > svg {
  width: 28px;
  height: 28px;
  margin-bottom: 4px;
}

.file-preview-unsupported strong {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
}

.file-preview-unsupported span {
  max-width: 260px;
  font-size: var(--openbot-text-sm);
  line-height: 1.45;
}

.file-preview-unsupported button {
  margin-top: 6px;
}

.file-preview-truncated {
  position: sticky;
  bottom: 0;
  margin: 0;
  border-top: 1px solid var(--openbot-border);
  background: var(--openbot-bg-control);
  padding: 7px 12px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-align: center;
}
.browser-pip-window {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
}

.browser-pip-surface {
  width: 100%;
  height: 100%;
}

.file-preview-folder {
  display: grid;
  margin: 0;
  padding: 8px;
  list-style: none;
}

.file-preview-folder-entry {
  display: grid;
  width: 100%;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  justify-content: stretch;
  padding: 6px 10px;
  font-size: var(--openbot-text-sm);
  text-align: left;
}

.file-preview-folder-name {
  overflow: hidden;
  color: var(--openbot-text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-preview-folder-meta {
  color: var(--openbot-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.file-preview-folder-empty {
  margin: 0;
  padding: 24px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-align: center;
}
.conversation-panel.browser-panel-active {
  padding-right: var(--browser-panel-width, 380px);
}

.remote-desktop-workspace {
  position: fixed;
  z-index: var(--openbot-layer-toast);
  inset: 0;
  display: flex;
  min-width: 0;
  flex-direction: column;
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity var(--openbot-duration-fast) cubic-bezier(0.2, 0, 0, 1),
    visibility 0s linear var(--openbot-duration-fast);
}

.remote-desktop-workspace-visible {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0s;
}

.remote-desktop-workspace:focus {
  outline: none;
}

.remote-desktop-header {
  display: flex;
  height: 38px;
  min-height: 38px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  border-bottom: 1px solid var(--openbot-border);
  padding: 0 8px 0 0;
  background: var(--openbot-bg-sidebar);
}

.remote-desktop-workspace-darwin .remote-desktop-header {
  padding-left: 84px;
}

.remote-desktop-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  flex: 0 1 auto;
  justify-content: flex-end;
  gap: 4px;
  margin-left: auto;
  white-space: nowrap;
}

.remote-desktop-display-controls {
  min-width: 0;
  display: flex;
  flex: 0 1 168px;
  align-items: center;
}

.remote-desktop-back-button,
.remote-desktop-disconnect-button {
  flex: 0 0 auto;
}

.remote-desktop-disconnect-button {
  color: var(--openbot-text-muted);
}

.remote-desktop-disconnect-button:hover:not(:disabled, [aria-disabled="true"]),
.remote-desktop-disconnect-button:focus-visible:not(:disabled, [aria-disabled="true"]) {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
}

.remote-desktop-stage {
  position: relative;
  min-height: 0;
  flex: 1;
  overflow: hidden;
  background: var(--openbot-accent);
}

.remote-desktop-viewer,
.remote-desktop-viewer > div {
  width: 100%;
  height: 100%;
}

.remote-desktop-viewer {
  overflow: hidden;
  display: block;
  object-fit: contain;
}

.remote-desktop-display-select {
  width: min(168px, 22vw);
  min-width: 112px;
  flex: 0 1 168px;
  font-size: var(--openbot-text-sm);
}

.remote-desktop-display-select-content {
  z-index: calc(var(--openbot-layer-toast) + 1);
}

.remote-desktop-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
  background: var(--openbot-bg-overlay);
  padding: 24px;
  text-align: center;
}

.remote-desktop-overlay strong {
  max-width: 330px;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: 600;
}

.remote-desktop-connecting-avatar {
  width: 56px;
  height: 56px;
  margin-bottom: 5px;
  filter: drop-shadow(0 8px 18px var(--openbot-accent-soft));
  opacity: 1;
  transform: translateY(0) scale(1);
  transition:
    opacity var(--openbot-duration-overlay) var(--openbot-ease-out),
    transform var(--openbot-duration-overlay) var(--openbot-ease-out);
  will-change: opacity, transform;
}

@starting-style {
  .remote-desktop-connecting-avatar {
    opacity: 0;
    transform: translateY(4px) scale(0.96);
  }
}

.remote-desktop-overlay > span:not(.ui-spinner):not(.remote-desktop-empty-mark) {
  max-width: 330px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
}

.remote-desktop-empty-mark {
  display: grid;
  width: 38px;
  height: 38px;
  margin-bottom: 5px;
  place-items: center;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-hover);
  color: var(--openbot-text-muted);
}

.remote-desktop-empty-mark svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}

.remote-desktop-overlay > button {
  height: 34px;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-border);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: 600;
}

.remote-desktop-overlay > button:hover {
  background: var(--openbot-border-strong);
}

.remote-desktop-overlay > button {
  min-width: 92px;
  margin-top: 5px;
  padding: 0 13px;
}

.remote-desktop-button-dot {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 5px;
  height: 5px;
  border: 1px solid var(--openbot-bg-sidebar);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success);
}
.browser-pip-controls-document,
.browser-pip-controls-document body,
.browser-pip-controls-document #root {
  background: transparent;
}

.browser-pip-hover-controls {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  padding: 4px;
  opacity: 0;
  transition: opacity var(--openbot-duration-fast) ease;
  -webkit-app-region: drag;
}

.browser-pip-hover-controls:hover,
.browser-pip-hover-controls:focus-within,
.browser-pip-window-hover .browser-pip-hover-controls {
  opacity: 1;
}

.browser-pip-hover-button {
  display: grid;
  width: 20px;
  height: 22px;
  flex: 0 0 20px;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  padding: 0;
  background: var(--openbot-bg-overlay);
  color: var(--openbot-text-secondary);
  -webkit-app-region: no-drag;
}

.browser-pip-hover-button:hover {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}

.browser-pip-hover-button .browser-toolbar-icon {
  width: 12px;
  height: 12px;
}

.browser-pip-hover-button:active {
  transform: scale(0.96);
  transition: transform var(--openbot-duration-fast) cubic-bezier(0.23, 1, 0.32, 1);
}

.browser-tab-control-icon {
  width: 12px;
  height: 12px;
  overflow: visible;
  fill: currentColor;
}

.browser-toolbar-button {
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--openbot-text-muted);
}

.browser-toolbar-button:hover:not(:disabled) {
  background: var(--openbot-border);
  color: var(--openbot-text-primary);
}

.browser-toolbar-button {
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  border-radius: var(--openbot-radius-sm);
}

.browser-toolbar-button:disabled {
  color: var(--openbot-text-dim);
  cursor: default;
}

.browser-toolbar-icon {
  width: 15px;
  height: 15px;
}

.browser-recording-status,
.browser-diagnostic-status {
  display: inline-flex;
  height: 24px;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  border-radius: var(--openbot-radius-sm);
  padding: 0 5px;
  font-size: var(--openbot-text-sm);
  line-height: 1;
}

.browser-recording-status {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
}

.browser-diagnostic-status {
  background: var(--openbot-warning-soft);
  color: var(--openbot-warning);
}

.browser-recording-status svg,
.browser-diagnostic-status svg {
  width: 12px;
  height: 12px;
}

.browser-surface {
  position: relative;
  min-height: 0;
  flex: 1;
  overflow: hidden;
  background: var(--openbot-bg-canvas);
}

/* The live view of a host's tab. It fills the surface the native view would have covered. */
.browser-live-view {
  position: absolute;
  inset: 0;
}

.browser-live-view canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.browser-empty-state {
  display: grid;
  height: 100%;
  place-content: center;
  gap: 5px;
  color: var(--openbot-text-muted);
  text-align: center;
}

.browser-empty-state strong {
  font-size: var(--openbot-text-lg);
  font-weight: 600;
}

.browser-empty-state span {
  font-size: var(--openbot-text-sm);
}
.agent-settings-avatar-picker {
  position: relative;
  z-index: 30;
  display: grid;
  width: 62px;
  height: 62px;
  margin: var(--openbot-space-2) auto var(--openbot-space-4);
  place-items: center;
}

.agent-settings-avatar {
  position: relative;
  display: grid;
  width: 62px;
  height: 62px;
  margin: 0;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  background: transparent;
}

.agent-settings-avatar .agent-avatar {
  --agent-avatar-optical-offset: calc(62px * -0.14);
  width: 62px;
  height: 62px;
}

.agent-settings-avatar .agent-avatar > svg {
  width: 128%;
  height: 128%;
}

.agent-settings-avatar:hover {
  filter: brightness(1.08);
}

/* The pencil badge of the mobile edit screen: it shows that the face opens an editor. */
.agent-settings-avatar-badge {
  position: absolute;
  right: -4px;
  bottom: -4px;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 3px solid var(--openbot-bg-canvas);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-primary);
}

.agent-settings-avatar-badge-icon {
  width: 11px;
  height: 11px;
}

.agent-routines-overlay {
  position: absolute;
  z-index: 2;
  top: 39px;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-y: auto;
  background: var(--openbot-bg-canvas);
}

.agent-routines-settings {
  min-height: 100%;
  padding: 12px 15px 28px;
}

.agent-routines-list,
.agent-routine-run-list {
  display: grid;
}

.agent-routines-list {
  gap: 0;
}

.agent-routine-list-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px;
  align-items: center;
}

.agent-routine-row {
  display: grid;
  width: 100%;
  min-height: 48px;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  padding: 5px 7px;
  text-align: left;
  transition:
    border-color var(--openbot-duration-hover) ease,
    background-color var(--openbot-duration-hover) ease;
}

.agent-routine-row:focus-visible {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-hover);
}

.agent-routine-row > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.agent-routine-row strong,
.agent-routine-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-routine-row strong {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: 500;
}

.agent-routine-row small,
.agent-routines-empty {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

.agent-routine-action-buttons svg {
  width: 15px;
  height: 15px;
}

.agent-routine-status-icon-active,
.agent-routine-status-icon-paused {
  display: grid;
  place-items: center;
}

.agent-routine-status-icon-active {
  color: var(--openbot-success);
}

.agent-routine-status-icon-paused {
  color: var(--openbot-text-muted);
}

.agent-routine-status-icon-active > svg,
.agent-routine-status-icon-paused > svg {
  width: 14px;
  height: 14px;
  stroke-width: var(--openbot-icon-stroke);
}

@media (hover: hover) and (pointer: fine) {
  .agent-routine-row:hover {
    border-color: var(--openbot-border);
    background: var(--openbot-hover);
  }
}

.agent-routine-editor-actions {
  display: grid;
  gap: 11px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--openbot-border);
  padding-bottom: 16px;
}

.agent-routine-active-toggle,
.agent-routine-action-buttons,
.agent-routine-run-row {
  display: flex;
  align-items: center;
}

.agent-routine-active-toggle {
  justify-content: space-between;
}

.agent-routine-active-toggle > span {
  display: grid;
  gap: 2px;
}

.agent-routine-active-toggle strong {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
}

.agent-routine-active-toggle small {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

.agent-routine-action-buttons {
  flex-wrap: wrap;
  gap: 7px;
}

.agent-routine-action-buttons button {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
  padding: 7px 9px;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}

.agent-routine-action-buttons button:hover:not(:disabled) {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}

.agent-routine-when,
.agent-routine-history {
  margin-top: 24px;
}

.agent-routine-history {
  border-top: 1px solid var(--openbot-border);
  padding-top: 20px;
}

.agent-routine-run-list {
  margin-top: 10px;
}

.agent-routine-run-row {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  gap: 9px;
  border-bottom: 1px solid var(--openbot-border);
  padding: 9px 2px;
}

.agent-routines-overlay {
  top: 0;
  overflow: hidden;
}

.agent-routines-settings {
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.agent-routines-header {
  width: 100%;
}

.agent-routines-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-0-5);
}

.agent-routines-body {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  padding: 14px 15px 28px;
  scrollbar-width: none;
}

.agent-routines-body::-webkit-scrollbar {
  display: none;
}

.agent-routine-editor {
  display: grid;
  gap: 14px;
}

.agent-routine-editor > .settings-field {
  margin-bottom: 0;
}

.agent-routine-editor-actions {
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  border: 0;
  padding: 0;
}

.agent-routine-active-toggle {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
}

/* The shared field puts the label first and fills the row. Here the switch comes first, beside its state word. */
.ui-switch-field.agent-routine-active-toggle {
  width: auto;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.agent-routine-active-toggle .ui-switch-label {
  font-size: var(--openbot-text-sm);
  font-weight: inherit;
}

.agent-routine-action-buttons {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 7px;
}

.agent-routine-action-buttons button {
  min-height: 32px;
  border-radius: var(--openbot-radius-md);
  padding-inline: 11px;
  font-size: var(--openbot-text-sm);
}

.agent-routine-action-buttons .ui-button-variant-destructive {
  border-color: transparent;
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
}

.agent-routine-action-buttons .ui-button-variant-default {
  border-color: transparent;
  background: var(--openbot-surface-light);
  color: var(--openbot-text-on-light);
}

@media (hover: hover) and (pointer: fine) {
  .agent-routine-action-buttons .ui-button-variant-destructive:hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-danger-soft-hover);
    color: var(--openbot-danger);
  }

  .agent-routine-action-buttons .ui-button-variant-default:hover:not(:disabled):not([data-disabled]) {
    background: color-mix(in srgb, var(--openbot-surface-light) 82%, transparent);
    color: var(--openbot-text-on-light);
  }
}

.agent-routine-instruction-field textarea {
  height: 158px;
  min-height: 158px;
  max-height: 158px;
  overflow-y: auto;
  resize: none;
}

.agent-routine-history {
  margin-top: 2px;
}

.agent-routine-when {
  margin-top: 0;
}

/* The schedule and history are fields, so their headings match the field labels. */
.agent-routine-when h3,
.agent-routine-history h3 {
  margin: 0 0 var(--openbot-space-1-5) var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  font-weight: inherit;
  line-height: var(--openbot-leading-md);
}

/* A pointer and value row in the webhook filters. A JSON Pointer is longer than its value. */
.agent-routine-event-filter {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) auto;
  align-items: center;
  gap: var(--openbot-space-2);
}

.agent-routine-history {
  border: 0;
  padding-top: 0;
}

.agent-routine-run-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-top: 0;
}

.agent-routine-run-row {
  display: flex;
  width: 100%;
  min-height: 32px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  padding: 5px var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  text-align: left;
}

.ui-button.agent-routine-run-link {
  cursor: pointer;
}

/* The time, then a muted note: an ignored webhook request, skipped runs, or a late start. */
.agent-routine-run-text {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-wrap: wrap;
  gap: 0 var(--openbot-space-2);
  white-space: nowrap;
}

.agent-routine-run-note {
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-routine-history-error {
  margin-bottom: var(--openbot-space-2);
}

/* A run whose answer went to a messaging place: the run row, then where the answer went. */
.agent-routine-run-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.agent-routine-delivery-row {
  display: flex;
  min-height: 28px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 var(--openbot-space-2) 5px;
  font-size: var(--openbot-text-sm);
}

/* The reason is why the answer is missing from the place, so it wraps rather than cuts off. */
.agent-routine-delivery-note {
  min-width: 0;
  color: var(--openbot-text-muted);
  overflow-wrap: anywhere;
  white-space: normal;
}

.agent-routine-delivery-failed,
.agent-routine-delivery-uncertain {
  color: var(--openbot-warning);
}

@media (hover: hover) and (pointer: fine) {
  .ui-button.agent-routine-run-link:hover:not(:disabled) {
    background: var(--openbot-bg-control-hover);
  }
}

.agent-routine-run-icon {
  display: grid;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  place-items: center;
  color: var(--openbot-text-muted);
}

.agent-routine-run-icon > svg {
  width: 16px;
  height: 16px;
  stroke-width: var(--openbot-icon-stroke);
}

.agent-routine-run-icon-succeeded {
  color: var(--openbot-success);
}

.agent-routine-run-icon-failed {
  color: var(--openbot-danger);
}

.agent-routine-run-icon-needs-attention {
  color: var(--openbot-warning);
}

.agent-routine-run-icon-running,
.agent-routine-run-icon-queued,
.agent-routine-run-icon-interrupted,
.agent-routine-run-icon-cancelled {
  color: var(--openbot-text-muted);
}

/* The overlay fades out with the modal, which is not one of its children. */
.agent-memories-overlay[data-closed] {
  animation: agent-dialog-overlay-out var(--openbot-duration-dialog) ease;
}

.agent-memories-modal {
  position: fixed;
  z-index: calc(var(--openbot-layer-dialog) + 1);
  top: 50%;
  left: 50%;
  width: min(560px, calc(100vw - 48px));
  height: min(456px, calc(100dvh - 48px));
  min-height: 320px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  outline: 0;
  background: var(--openbot-bg-control);
  color: var(--openbot-text-primary);
  transform: translate(-50%, -50%);
  transform-origin: center;
}

.agent-memories-header {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  border-bottom: 1px solid var(--openbot-border);
  padding: var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-3);
}

.agent-memories-heading {
  min-width: 0;
}

.agent-skills-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-1);
}

.agent-skills-parent {
  min-width: 0;
  height: auto;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--openbot-text-muted);
  padding: 0;
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-lg);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-skills-crumb {
  flex: 0 0 auto;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
}

.agent-skills-heading h2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-memories-heading h2 {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-lg);
}

.agent-memories-header-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--openbot-space-1);
}

.agent-memories-header-actions svg,
.agent-memory-delete-button svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

.agent-memories-add-button {
  color: var(--openbot-text-secondary);
}

.agent-memories-body {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: var(--openbot-space-2);
}

.agent-memory-composer {
  display: grid;
  gap: var(--openbot-space-2);
  margin: 0 0 var(--openbot-space-3);
  padding: var(--openbot-space-1) var(--openbot-space-1) 0;
}

.agent-memory-input {
  min-height: 64px;
  resize: none;
  border-color: var(--openbot-border);
  background: transparent;
}

.agent-memory-input:focus-visible {
  border-color: var(--openbot-border-strong);
  outline: 0;
  box-shadow: none;
}

.agent-memory-composer-actions,
.agent-memory-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-1);
}

.agent-memory-inclusion-actions {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-1);
}

.agent-memory-list {
  min-height: 0;
  display: grid;
  grid-auto-rows: max-content;
  flex: 1;
  align-content: start;
  gap: var(--openbot-space-0-5);
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  scrollbar-width: none;
}

.agent-memory-row {
  min-height: 50px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--openbot-control-md) + var(--openbot-space-2));
  align-items: stretch;
  border-radius: var(--openbot-radius-md);
  overflow: hidden;
  background: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .agent-memory-row:hover {
    background: var(--openbot-bg-control-hover);
  }
}

.agent-memory-row:has(.agent-memory-row-main:focus-visible) {
  background: var(--openbot-bg-control-active);
}

.agent-memory-row-main {
  min-width: 0;
  width: 100%;
  height: 100%;
  display: grid;
  align-content: center;
  justify-content: stretch;
  justify-items: start;
  gap: var(--openbot-space-1);
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  padding: var(--openbot-space-2) var(--openbot-space-3);
  color: inherit;
  font: inherit;
  text-align: left;
}

.agent-memory-row-main:focus-visible {
  box-shadow: none;
}

.agent-memory-row .agent-memory-row-main:hover {
  background: transparent;
}

.agent-memory-text {
  display: block;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  white-space: pre-wrap;
}

.agent-memory-meta {
  display: block;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.agent-memory-delete-button {
  align-self: center;
  align-items: center;
  justify-self: center;
  color: var(--openbot-text-muted);
}

.agent-memory-editor {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--openbot-space-2);
  background: transparent;
  padding: var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-2);
}

.agent-memory-row:has(.agent-memory-editor),
.agent-memory-row:has(.agent-memory-editor):hover {
  background: transparent;
}

.agent-memory-state,
.agent-memory-limit,
.agent-memory-error {
  margin: var(--openbot-space-1);
  border-radius: var(--openbot-radius-md);
  padding: var(--openbot-space-3);
  font-size: var(--openbot-text-sm);
}

.agent-memory-state {
  min-height: 160px;
  display: grid;
  place-items: center;
  color: var(--openbot-text-muted);
  text-align: center;
}

.agent-memory-limit {
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-secondary);
}

.agent-memory-error {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
}

.shared-table-list {
  min-height: 0;
  display: grid;
  flex: 1;
  align-content: start;
  gap: var(--openbot-space-0-5);
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  scrollbar-width: none;
}

.shared-table-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
  padding: var(--openbot-space-2) var(--openbot-space-3);
}

.shared-table-main {
  min-width: 0;
  display: grid;
  gap: var(--openbot-space-1);
}

.shared-table-name {
  display: block;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-md);
}

.shared-table-confirm {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface);
  padding: var(--openbot-space-3);
}

.shared-table-confirm p {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.shared-table-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-1);
}

.agent-memories-footer {
  display: flex;
  min-height: 48px;
  align-items: center;
  padding: var(--openbot-space-2) var(--openbot-space-3) var(--openbot-space-3);
}

.agent-skill-empty {
  min-height: 160px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--openbot-space-3);
}

.agent-skill-empty .agent-memory-state {
  min-height: 0;
  padding: 0;
}

.agent-skill-rows {
  display: grid;
  align-content: start;
  gap: 2px;
}

.agent-skill-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--openbot-space-2);
  min-height: 56px;
  padding: var(--openbot-space-1) var(--openbot-space-2);
  border-radius: var(--openbot-radius-lg);
}

.agent-skill-open {
  min-width: 0;
  height: auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  justify-content: stretch;
  justify-items: stretch;
  align-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-1);
  color: inherit;
  text-align: left;
}

.agent-skill-open:hover {
  background: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .agent-skill-row:hover {
    background: var(--openbot-bg-control-hover);
  }
}

.agent-skill-icon {
  width: 40px;
  height: 40px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  color: var(--openbot-accent-text);
}

.agent-skill-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.agent-skill-icon svg {
  width: 20px;
  height: 20px;
}

.agent-skill-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.agent-skill-title {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: var(--openbot-space-2);
}

.agent-skill-title strong {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-skill-row:has(.agent-skill-update) {
  grid-template-columns: minmax(0, 1fr) auto auto auto;
}

.ui-button.agent-skill-update {
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
  font-size: var(--openbot-text-sm);
}

.ui-button.agent-skill-update:hover:not(:disabled):not([data-disabled]),
.ui-button.agent-skill-update:focus-visible {
  background: color-mix(in srgb, var(--openbot-accent-soft), var(--openbot-accent) 12%);
  color: var(--openbot-accent-text);
}

.agent-skill-copy small {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-skill-row-disabled .agent-skill-title strong {
  color: var(--openbot-text-muted);
}

.agent-skill-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-secondary);
  opacity: 0;
  cursor: pointer;
}

.agent-skill-more svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

.agent-skill-row:hover .agent-skill-more,
.agent-skill-row:focus-within .agent-skill-more,
.agent-skill-row:has([aria-expanded="true"]) .agent-skill-more {
  opacity: 1;
}

.agent-skill-menu {
  z-index: calc(var(--openbot-layer-dialog) + var(--openbot-layer-popover) + 1);
}

.agent-skills-modal .ui-switch[data-checked] {
  background: var(--openbot-accent);
}

.agent-skills-modal .ui-switch-thumb[data-checked] {
  background: var(--openbot-text-primary);
}

.agent-local-library,
.agent-skill-detail {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: var(--openbot-space-4);
  overflow: auto;
  padding: var(--openbot-space-3);
  scrollbar-width: none;
}

.agent-local-library::-webkit-scrollbar,
.agent-skill-detail::-webkit-scrollbar {
  display: none;
}

.agent-memories-modal[data-expanded] {
  animation: agent-dialog-content-in var(--openbot-duration-dialog) ease;
}

.agent-memories-modal[data-closed] {
  animation: agent-dialog-content-out var(--openbot-duration-dialog) ease;
}

@keyframes agent-dialog-overlay-out {
  to {
    opacity: 0;
  }
}

@keyframes agent-dialog-content-in {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
  }
}

@keyframes agent-dialog-content-out {
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
  }
}

@media (max-width: 520px) {
  .agent-memories-modal {
    width: calc(100vw - 24px);
    height: calc(100dvh - 24px);
  }

  .agent-memories-header {
    padding-left: var(--openbot-space-3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .agent-memories-overlay,
  .agent-memories-modal {
    animation: none;
  }
}

/* The root list and each page behind it: one column of cards with an even gap. */
.agent-settings-page {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
}

.agent-settings-page > .settings-field {
  margin: 0;
}

/* A switch row inside an inset group: as tall as a link row, the switch on the right. */
.agent-settings-switch-row {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  padding: 0 var(--openbot-space-3);
}

.agent-settings-switch-row > .settings-link-label {
  flex: 1 1 auto;
}

.agent-settings-runtime-rows .provider-model-trigger-field,
.agent-settings-runtime-rows .agent-settings-runtime-row {
  width: 100%;
  height: auto;
  min-height: 40px;
  gap: var(--openbot-space-2);
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 var(--openbot-space-3);
  box-shadow: none;
  font-size: var(--openbot-text-md);
}

.agent-settings-runtime-rows .provider-model-trigger-field:hover:not(:disabled),
.agent-settings-runtime-rows .provider-model-trigger-field[aria-expanded="true"],
.agent-settings-runtime-rows .agent-settings-runtime-row[data-expanded] {
  background: var(--openbot-hover);
}

.agent-settings-runtime-rows .provider-model-trigger-field:focus-visible,
.agent-settings-runtime-rows .ui-select .agent-settings-runtime-row:focus-visible {
  outline: 0;
  background: var(--openbot-hover);
  box-shadow: inset 0 0 0 1px var(--openbot-border-focus);
}

.agent-settings-runtime-rows .provider-model-trigger-field .provider-model-field-label,
.agent-settings-runtime-label {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: 18px;
  text-align: left;
}

.agent-settings-runtime-rows .provider-model-trigger-field .provider-model-trigger-name,
.agent-settings-runtime-row .ui-select-value {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
}

.agent-settings-runtime-row .ui-select-trigger-icon {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

@media (hover: hover) and (pointer: fine) {
  .agent-settings-runtime-rows .provider-model-trigger-field:hover .provider-model-trigger-name,
  .agent-settings-runtime-row:hover .ui-select-value {
    color: var(--openbot-text-secondary);
  }
}

.agent-settings-runtime-rows .provider-model-popover {
  width: var(--kb-popper-anchor-width);
  min-width: 0;
}

.agent-settings-runtime-path {
  display: grid;
  gap: 2px;
  padding: 11px var(--openbot-space-3);
}

.agent-settings-runtime-path > span:last-child {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 17px;
  overflow-wrap: anywhere;
  user-select: text;
}

.agent-settings-runtime-note {
  margin: 0;
  padding-inline: var(--openbot-space-1);
  text-wrap: pretty;
}

.agent-settings-save-error {
  margin: 0 var(--openbot-space-1);
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
}

.agent-settings-notifications {
  display: flex;
  min-height: 70px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-border);
  padding: 13px 12px;
}

.agent-settings-notifications > div {
  min-width: 0;
}

.agent-settings-notifications strong,
.agent-settings-notifications span {
  display: block;
}

.agent-settings-notifications strong {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: 500;
  line-height: 18px;
}

.agent-settings-notifications div > span {
  max-width: 194px;
  margin-top: 2px;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: 15px;
}
/* Routine schedule row: the frequency and its values as one sentence of chips. */
.routine-trigger-row,
.routine-weekday-strip,
.routine-calendar-days {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

/* Keyboard focus uses the shared focus ring, as the other controls do. The ring is a box shadow, so
   the native outline goes. This rule has the same weight as the accent outline rule in auth.css,
   which loads earlier. */
:is(.routine-schedule-picker, .routine-popover, .routine-chip-select-content)
:is(button, input, textarea):focus-visible {
  outline: 0;
}

:is(.routine-schedule-picker, .routine-popover) .ui-button:focus-visible {
  box-shadow: var(--openbot-focus-ring);
}

.routine-schedule-picker {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-1-5);
}

/* One line at every width. A narrow row shrinks its flexible chip, not the line count. */
/* In a panel the row is a form field, so it has the box of the settings inputs around it. */
.routine-trigger-row {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: var(--openbot-space-2);
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-shadow-popover-ambient);
  padding: var(--openbot-space-1);
  transition: border-color var(--openbot-duration-hover) ease;
}

.routine-trigger-row:focus-within {
  border-color: var(--openbot-text-muted);
}

.routine-schedule-picker[data-density="card"] .routine-trigger-row {
  border: 0;
  background: none;
  padding: 0;
}

.routine-trigger-icon {
  display: inline-flex;
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
  color: var(--openbot-text-on-accent);
}

.routine-trigger-icon svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: 2;
}

.routine-schedule-picker[data-density="panel"] .routine-trigger-icon {
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
}

.routine-schedule-picker[data-density="card"] .routine-trigger-icon {
  display: none;
}

.routine-trigger-chips {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: var(--openbot-space-2);
  /* Clips a row that is narrower than its fixed chips, and keeps the focus ring visible. */
  overflow: clip;
  overflow-clip-margin: var(--openbot-space-1);
}

.routine-trigger-phrase {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--openbot-space-2);
}

.routine-trigger-phrase-flexible {
  min-width: 0;
  flex-shrink: 1;
}

.routine-connector {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}

.routine-chip-select {
  width: auto;
  flex: 0 0 auto;
}

.routine-chip-select-flexible {
  min-width: 0;
  flex-shrink: 1;
}

.routine-chip {
  display: inline-flex;
  height: var(--openbot-control-md);
  min-width: 0;
  max-width: 100%;
  align-items: center;
  gap: var(--openbot-space-1-5);
  cursor: pointer;
  border: 0;
  border-radius: var(--openbot-radius-md);
  outline: 0;
  background: var(--openbot-bg-control-active);
  padding: 0 var(--openbot-space-3);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
  white-space: nowrap;
  flex: 0 0 auto;
  transition: background-color var(--openbot-duration-hover) ease;
}

.routine-chip-flexible {
  flex-shrink: 1;
}

.routine-chip-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The chips sit one padding inside the box, so the row is as tall as an input at every width. */
.routine-schedule-picker[data-density="panel"] .routine-chip {
  height: var(--openbot-control-sm);
  border-radius: var(--openbot-radius-xs);
}

.routine-schedule-picker[data-density="card"] .routine-chip {
  height: var(--openbot-control-sm);
  padding: 0 var(--openbot-space-2);
  font-size: var(--openbot-text-md);
}

.routine-chip:focus-visible {
  box-shadow: var(--openbot-focus-ring);
}

.routine-chip:is([aria-expanded="true"], [data-expanded]) {
  background: var(--openbot-bg-control-hover);
  box-shadow: 0 0 0 1px var(--openbot-border-strong);
}

.routine-chip:disabled,
.routine-chip[data-disabled] {
  cursor: default;
  background: transparent;
  padding: 0;
  color: var(--openbot-text-secondary);
}

@media (hover: hover) and (pointer: fine) {
  .routine-chip:hover:not(:disabled, [data-disabled]) {
    background: var(--openbot-bg-control-hover);
    box-shadow: 0 0 0 1px var(--openbot-border-strong);
  }
}

.routine-chip-select-content {
  min-width: 160px;
}

.routine-chip-select-content .ui-select-item {
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}

.routine-cron-input {
  min-width: 0;
  max-width: 220px;
  flex: 1 1 180px;
  font-family: var(--openbot-font-mono);
}

.routine-schedule-hint {
  margin: 0;
  padding-left: var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.routine-schedule-picker[data-density="card"] .routine-schedule-hint {
  padding-left: 0;
}

/* Popovers */
.routine-popover {
  z-index: var(--openbot-layer-popover);
  border-radius: var(--openbot-radius-lg);
  padding: var(--openbot-space-2);
}

.routine-weekday-strip {
  display: flex;
  gap: var(--openbot-space-1);
}

.routine-day-item {
  display: inline-flex;
}

.routine-day {
  display: inline-flex;
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  min-width: 0;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--openbot-radius-pill);
  padding: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}

.routine-day-item:has(:focus-visible) .routine-day {
  box-shadow: var(--openbot-focus-ring);
}

/* The strip is short, so an unselected day can look like a button. A month grid stays plain. */
.routine-weekday-strip .routine-day {
  background: var(--openbot-bg-control-active);
}

@media (hover: hover) and (pointer: fine) {
  .routine-day:hover:not(:disabled, .routine-day-selected) {
    background: var(--openbot-hover);
    color: var(--openbot-text-primary);
  }
}

.routine-day.routine-day-selected,
.routine-day.routine-day-selected:hover {
  background: var(--openbot-text-primary);
  color: var(--openbot-bg-canvas);
}

.routine-day.routine-day-selected:focus-visible {
  box-shadow: var(--openbot-focus-ring);
}

/* Time */
.routine-clock-input {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
}

.routine-clock-segment.ui-input {
  width: 48px;
  height: var(--openbot-control-lg);
  border: 0;
  background: var(--openbot-bg-control-active);
  padding: 0;
  font-size: var(--openbot-text-lg);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.routine-clock-segment.ui-input:focus-visible {
  box-shadow: var(--openbot-focus-ring);
}

.routine-clock-separator {
  color: var(--openbot-text-muted);
}

.routine-segmented {
  display: flex;
  margin-left: var(--openbot-space-1);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control-active);
  padding: var(--openbot-space-0-5);
}

.routine-segmented-control {
  display: inline-flex;
  height: calc(var(--openbot-control-lg) - 2 * var(--openbot-space-0-5));
  min-width: 44px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--openbot-radius-sm);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}

.routine-segmented-control label {
  cursor: pointer;
}

.routine-segmented-control[data-checked] {
  background: var(--openbot-text-primary);
  color: var(--openbot-bg-canvas);
}

.routine-segmented-item:has(:focus-visible) .routine-segmented-control {
  box-shadow: var(--openbot-focus-ring);
}

/* Hours window: a two-option list and, for "Between hours", the times beside it. */
.routine-window-menu {
  display: grid;
  width: 240px;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-1);
}

.routine-window-options {
  display: grid;
  gap: var(--openbot-space-0-5);
}

.routine-window-repeat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  border-top: 1px solid var(--openbot-border);
  padding: var(--openbot-space-2) var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-3);
}

.routine-window-repeat-label {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}

.routine-window-option-control {
  display: flex;
  min-height: var(--openbot-control-lg);
  align-items: center;
  gap: var(--openbot-space-2);
  cursor: pointer;
  border-radius: var(--openbot-radius-md);
  padding: var(--openbot-space-2) var(--openbot-space-3);
}

.routine-window-option-control[data-checked] {
  background: var(--openbot-hover);
}

.routine-window-option:has(:focus-visible) .routine-window-option-control {
  box-shadow: var(--openbot-focus-ring);
}

@media (hover: hover) and (pointer: fine) {
  .routine-window-option-control:hover {
    background: var(--openbot-hover);
  }
}

.routine-window-option-label {
  flex: 1;
  cursor: pointer;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}

.routine-window-option-check {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
}

.routine-window-option-check svg {
  width: 100%;
  height: 100%;
}

.routine-window-range {
  display: grid;
  gap: var(--openbot-space-1-5);
  padding: var(--openbot-space-1) var(--openbot-space-3) var(--openbot-space-2);
}

.routine-window-range-times {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}

.routine-window-range-count {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}

/* Calendar */
.routine-calendar {
  display: grid;
  width: calc(7 * var(--openbot-control-md) + 6 * var(--openbot-space-0-5));
  gap: var(--openbot-space-1);
}

.routine-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--openbot-space-1);
}

.routine-calendar-title {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}

.routine-calendar-weekdays,
.routine-calendar-days {
  display: grid;
  grid-template-columns: repeat(7, var(--openbot-control-md));
  gap: var(--openbot-space-0-5);
}

.routine-calendar-weekdays span {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-align: center;
}

.routine-calendar-day:focus-visible {
  box-shadow: var(--openbot-focus-ring);
}

.routine-calendar-day[aria-current="date"]:not(.routine-day-selected) {
  color: var(--openbot-accent-text);
}

.routine-calendar-day:disabled {
  cursor: default;
  opacity: 0.32;
}

/* Chat card */
/*
 * As wide as its content, as a message is: the row sets the width, and a narrow chat shrinks it.
 * The minimum keeps the card still while most edits change the chips. It needs the second class
 * because interaction-cards.css loads later and resets `min-width`.
 */
/*
 * The row takes the most space that still shows every label whole. RoutineSchedulePicker sets
 * `data-fit` from the labels and the width, so a short row keeps its room in a narrow panel.
 * Each step keeps the rules of the steps before it.
 */
.routine-schedule-picker:not([data-fit="roomy"]) .routine-trigger-chips {
  gap: var(--openbot-space-1-5);
}

.routine-schedule-picker:not([data-fit="roomy"]) .routine-trigger-phrase {
  gap: var(--openbot-space-1);
}

.routine-schedule-picker:not([data-fit="roomy"]) .routine-connector {
  font-size: var(--openbot-text-md);
}

.routine-schedule-picker[data-density="panel"]:not([data-fit="roomy"]) .routine-trigger-row {
  gap: var(--openbot-space-1-5);
}

.routine-schedule-picker[data-density="panel"]:not([data-fit="roomy"]) .routine-trigger-icon svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

.routine-schedule-picker[data-density="panel"]:not([data-fit="roomy"]) .routine-chip {
  gap: var(--openbot-space-1);
  padding: 0 var(--openbot-space-2);
  font-size: var(--openbot-text-md);
}

.routine-schedule-picker[data-density="panel"]:is([data-fit="tight"], [data-fit="minimal"])
  .routine-connector-optional {
  display: none;
}

.routine-schedule-picker[data-density="panel"]:is([data-fit="tight"], [data-fit="minimal"])
  :is(.routine-trigger-row, .routine-trigger-chips) {
  gap: var(--openbot-space-1);
}

.routine-schedule-picker[data-density="panel"]:is([data-fit="tight"], [data-fit="minimal"]) .routine-trigger-icon {
  width: var(--openbot-control-xs);
  height: var(--openbot-control-xs);
  align-self: center;
}

.routine-schedule-picker[data-density="panel"]:is([data-fit="tight"], [data-fit="minimal"]) .routine-chip {
  padding: 0 var(--openbot-space-1-5);
}

/* The value chips then cut their labels short, and the frequency and time chips stay whole. */
.routine-schedule-picker[data-fit="minimal"] :is(.routine-trigger-icon, .routine-connector) {
  display: none;
}

.routine-schedule-picker[data-fit="minimal"] .routine-trigger-chips {
  gap: var(--openbot-space-1);
}

/*
 * The end of a trigger row: the menu that changes the trigger. It sits one padding from the end,
 * as the icon does at the start. The menu button has the size of a chip, so the row stays as tall
 * as an input.
 */
.routine-trigger-action {
  display: inline-flex;
  flex: 0 0 auto;
  align-self: center;
  margin-inline-start: calc(var(--openbot-space-1) * -1);
}

.routine-trigger-action:empty {
  display: none;
}

:is(.routine-trigger-row, .routine-trigger-card-header) .routine-trigger-action .ui-button {
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
  border-radius: var(--openbot-radius-xs);
}

/*
 * The webhook trigger: a header, then one full-width row for each value. The header icon starts
 * where the row text starts, and the row actions share one column with the menu button.
 */
.routine-trigger-card {
  display: grid;
  min-width: 0;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-shadow-popover-ambient);
}

.routine-trigger-card-header {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-3);
}

:is(.routine-trigger-card-header, .routine-trigger-menu) .routine-trigger-icon {
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
}

.routine-trigger-card-title {
  min-width: 0;
  flex: 1;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  /* Mostly lowercase text looks low when its line box is centered. Center the x-height on the icon. */
  text-box: trim-both ex alphabetic;
}

.routine-webhook-field {
  display: grid;
  /* An action, the row padding and the top border, so a row without an action has the same height. */
  min-height: calc(var(--openbot-control-sm) + var(--openbot-space-2) + 1px);
  grid-template-columns: minmax(84px, auto) minmax(0, 1fr) var(--openbot-control-sm);
  align-items: center;
  gap: var(--openbot-space-3);
  border: 0;
  border-top: 1px solid var(--openbot-border);
  margin: 0;
  background: none;
  padding: var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-3);
  color: inherit;
  font: inherit;
  text-align: left;
}

.routine-webhook-label {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  white-space: nowrap;
}

.routine-webhook-value {
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

code.routine-webhook-value {
  font-family: inherit;
}

/* A new secret wraps in a fixed-width font, so the user can read each character before copying it. */
code.routine-webhook-secret {
  padding-block: var(--openbot-space-1-5);
  font-family: var(--openbot-font-mono);
  overflow-wrap: anywhere;
  white-space: normal;
}

.routine-webhook-field > :last-child {
  justify-self: center;
}

.routine-webhook-field > .ui-icon-button {
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
}

/* The Events row is a ghost Button; two classes keep the row layout over the button styles. */
.routine-webhook-field.routine-webhook-events-toggle {
  width: auto;
  min-width: 0;
  height: auto;
  justify-content: stretch;
  border-radius: 0 0 calc(var(--openbot-radius-md) - 1px) calc(var(--openbot-radius-md) - 1px);
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.routine-webhook-field.routine-webhook-events-toggle[aria-expanded="true"] {
  background: none;
}

.routine-webhook-field.routine-webhook-events-toggle:hover {
  background: var(--openbot-bg-control-hover);
}

.routine-webhook-events-toggle:focus-visible {
  outline: 0;
  box-shadow: var(--openbot-focus-ring);
}

.routine-webhook-events-toggle > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: var(--openbot-icon-stroke);
  color: var(--openbot-text-muted);
}

/* A status sentence wraps; a URL or a secret stays on one line. */
.ui-text.routine-webhook-value {
  white-space: normal;
}

.routine-webhook-note {
  padding: 0 var(--openbot-space-3) var(--openbot-space-2);
}

.routine-trigger-card-header + .routine-webhook-note {
  border-top: 1px solid var(--openbot-border);
  padding-top: var(--openbot-space-2);
}

.routine-webhook-secret-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}

.routine-webhook-events {
  display: grid;
  gap: var(--openbot-space-3);
  border-top: 1px solid var(--openbot-border);
  padding: var(--openbot-space-3);
}

.routine-webhook-events .settings-field {
  display: grid;
  margin: 0;
  gap: var(--openbot-space-1-5);
}

.routine-webhook-events .settings-field > span {
  margin: 0;
}

/* Hints are captions, not field labels. */
.routine-webhook-events .settings-field > .ui-text {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.routine-webhook-add-filter {
  justify-self: start;
  margin-left: calc(var(--openbot-space-2) * -1);
  padding-inline: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  font-weight: inherit;
}

/* A quiet link under the rows. Its text starts under the row labels. */
.routine-webhook-filter-link {
  justify-self: start;
  margin: 0 0 var(--openbot-space-1) var(--openbot-space-1);
  padding-inline: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: inherit;
}

.routine-webhook-add-filter svg,
.routine-webhook-filter-link svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}

/* The trigger menu: a name and one line that tells when the routine runs. */
.routine-trigger-menu {
  width: 300px;
  max-height: min(70vh, 560px);
  overflow-y: auto;
}

.routine-trigger-menu.ui-action-menu .routine-trigger-menu-item[role="menuitemradio"] {
  height: auto;
  padding-block: var(--openbot-space-1-5);
  gap: var(--openbot-space-3);
  white-space: normal;
}

.routine-trigger-menu-text {
  display: grid;
  min-width: 0;
  flex: 1;
}

.routine-trigger-menu-description {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.routine-trigger-menu.ui-action-menu .routine-trigger-menu-item > .routine-trigger-menu-check {
  color: var(--openbot-text-primary);
}
/* Routine calendar: the runs of every routine, by day, with the next runs beside them. */
.routine-planner {
  container-type: inline-size;
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-4);
  color: var(--openbot-text-primary);
}

.routine-planner-header {
  display: grid;
  gap: var(--openbot-space-3);
}

.routine-planner-title {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
}

.routine-planner-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
}

/* The arrow lines up with the content edge, not its hit area. */
.routine-planner-identity .ui-icon-button {
  margin-left: calc(-1 * var(--openbot-space-2));
}

.routine-planner-title h2 {
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
}

.routine-planner-title h2 span {
  color: var(--openbot-text-muted);
  font-weight: var(--openbot-weight-regular);
}

.routine-planner-title p,
.routine-planner-note {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

.routine-planner-toolbar {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}

.routine-planner-nav {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-1);
}

.routine-planner-range {
  margin-left: var(--openbot-space-2);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.routine-planner-clock-change {
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-warning-soft);
  padding: var(--openbot-space-1-5) var(--openbot-space-3);
  color: var(--openbot-warning-text);
  font-size: var(--openbot-text-sm);
}

.routine-planner-body {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
  align-items: start;
  gap: var(--openbot-space-4);
}

.routine-planner-grid {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-1);
}

.routine-planner-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

/* The day cell's border and padding, so that each head starts where its day starts. */
.routine-planner-weekdays > * {
  padding-inline: calc(1px + var(--openbot-space-1-5));
}

/* Each day is a list, not a time grid: runs at the same minute stack and stay readable. */
.routine-planner-week {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--openbot-space-1);
}

.routine-planner-day {
  display: grid;
  min-width: 0;
  min-height: 12rem;
  align-content: start;
  gap: var(--openbot-space-1);
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  padding: var(--openbot-space-1-5);
}

.routine-planner-day[data-past] {
  background: var(--openbot-transparent);
}

.routine-planner-day[aria-current="date"] {
  border-color: var(--openbot-accent-strong);
}

.routine-planner-day-button.ui-button {
  width: 100%;
  justify-content: flex-start;
  gap: var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
}

.routine-planner-day-button strong {
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.routine-planner-day[aria-current="date"] .routine-planner-day-button strong {
  color: var(--openbot-accent-text);
}

.routine-planner-runs,
.routine-planner-entries {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-0-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.routine-planner-status {
  display: grid;
  width: var(--openbot-space-4);
  height: var(--openbot-space-4);
  place-items: center;
}

.routine-planner-status > svg {
  width: var(--openbot-space-3);
  height: var(--openbot-space-3);
  stroke-width: 2;
}

.routine-planner-status-dot {
  width: var(--openbot-space-2);
  height: var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
}

.routine-planner-status[data-status="paused"] {
  color: var(--openbot-text-muted);
}

.routine-planner-status[data-status="failed"] {
  color: var(--openbot-danger-text);
}

.routine-planner-status[data-status="completed"] {
  color: var(--openbot-success-text);
}

.routine-planner-avatars {
  display: flex;
}

.routine-planner-avatar.agent-avatar {
  width: var(--openbot-space-4);
  height: var(--openbot-space-4);
}

.routine-planner-avatars .routine-planner-avatar + .routine-planner-avatar {
  margin-left: calc(var(--openbot-space-1-5) * -1);
}

.routine-planner-run.ui-button {
  display: grid;
  width: 100%;
  height: auto;
  min-height: var(--openbot-control-sm);
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "mark time avatars"
    "name name name";
  align-items: center;
  gap: var(--openbot-space-0-5) var(--openbot-space-1);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-1) var(--openbot-space-1-5);
  text-align: left;
  font-size: var(--openbot-text-sm);
}

.routine-planner-run .routine-planner-status {
  grid-area: mark;
}

.routine-planner-run-time {
  grid-area: time;
  color: var(--openbot-text-muted);
  font-variant-numeric: tabular-nums;
}

/* Two lines before an ellipsis: a day column is narrow, and the name is what tells runs apart. */
.routine-planner-run-name {
  display: -webkit-box;
  grid-area: name;
  min-width: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.3;
  overflow-wrap: break-word;
  white-space: normal;
}

.routine-planner-run .routine-planner-avatars {
  grid-area: avatars;
}

/* A paused run would happen if the routine resumed. It keeps its place but loses its weight. */
.routine-planner-run[data-status="paused"],
.routine-planner-entry[data-status="paused"] {
  opacity: 0.6;
}

.routine-planner-run[data-status="paused"] {
  outline: 1px dashed var(--openbot-border-grouped);
  outline-offset: -1px;
  background: var(--openbot-transparent);
}

.routine-planner-run[data-status="failed"] {
  background: var(--openbot-danger-soft);
}

.routine-planner-run[data-status="completed"] .routine-planner-run-name {
  color: var(--openbot-text-muted);
}

.routine-planner-more.ui-button {
  justify-self: start;
  color: var(--openbot-text-muted);
}

/* A month has up to six rows of days: a run is one line, and the column heads name the weekdays. */
.routine-planner[data-view="month"] .routine-planner-day {
  min-height: 7rem;
}

.routine-planner[data-view="month"] .routine-planner-day-button > span {
  display: none;
}

.routine-planner[data-view="month"] .routine-planner-run.ui-button {
  grid-template-columns: auto auto minmax(0, 1fr);
  grid-template-areas: "mark time name";
}

.routine-planner[data-view="month"] .routine-planner-run-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.routine-planner[data-view="month"] .routine-planner-run .routine-planner-avatars {
  display: none;
}

/* Days of the months before and after only fill the rows. */
.routine-planner-day[data-outside] {
  border-color: var(--openbot-border);
  background: var(--openbot-transparent);
}

.routine-planner-day[data-outside] .routine-planner-day-button strong {
  color: var(--openbot-text-muted);
  font-weight: var(--openbot-weight-regular);
}

.routine-planner-upcoming,
.routine-planner-day-view {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: var(--openbot-space-2);
}

.routine-planner-upcoming {
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-lg);
  padding: var(--openbot-space-3);
}

.routine-planner-upcoming h3,
.routine-planner-hour h3 {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}

.routine-planner-hour {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  align-items: start;
  gap: var(--openbot-space-2);
  border-top: 1px solid var(--openbot-border-strong);
  padding-top: var(--openbot-space-2);
}

.routine-planner-hour h3 {
  padding-top: var(--openbot-space-2);
  font-variant-numeric: tabular-nums;
}

.routine-planner-entry {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-1);
}

.routine-planner-entry-main.ui-button {
  display: flex;
  min-width: 0;
  height: auto;
  flex: 1 1 auto;
  align-items: center;
  justify-content: flex-start;
  gap: var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  text-align: left;
}

.routine-planner-entry-text {
  display: grid;
  min-width: 0;
}

.routine-planner-entry-name,
.routine-planner-entry-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.routine-planner-entry-name {
  font-size: var(--openbot-text-md);
}

.routine-planner-entry-meta {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
}

.routine-planner-entry[data-status="failed"] .routine-planner-entry-meta {
  color: var(--openbot-danger-text);
}

.routine-planner-entry-agents {
  display: flex;
  flex: 0 0 auto;
}

.routine-planner-agent .routine-planner-avatar.agent-avatar {
  width: var(--openbot-control-xs);
  height: var(--openbot-control-xs);
}

.routine-planner-empty {
  display: grid;
  justify-items: center;
  gap: var(--openbot-space-3);
  border: 1px dashed var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-lg);
  padding: var(--openbot-space-8) var(--openbot-space-4);
  color: var(--openbot-text-muted);
  text-align: center;
}

.routine-planner-empty > svg {
  width: var(--openbot-space-6);
  height: var(--openbot-space-6);
  stroke-width: var(--openbot-icon-stroke);
}

.routine-planner-skeleton-heading {
  height: var(--openbot-control-xs);
}

.routine-planner-skeleton-run {
  height: var(--openbot-control-md);
}

/* Seven day columns need the full width: the next runs move below the week. */
@container (max-width: 1160px) {
  .routine-planner-body {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* A narrow pane, such as a phone or a side panel: the week becomes a list of days. */
@container (max-width: 920px) {
  .routine-planner-week {
    grid-template-columns: minmax(0, 1fr);
  }

  .routine-planner-day {
    min-height: 0;
    grid-template-columns: 5rem minmax(0, 1fr);
    align-items: start;
  }

  .routine-planner-day > :not(.routine-planner-day-heading) {
    grid-column: 2;
  }

  .routine-planner-loading .routine-planner-day {
    grid-template-columns: minmax(0, 1fr);
  }

  .routine-planner-loading .routine-planner-day > * {
    grid-column: 1;
  }

  /* The month becomes a list of its own days: each day names its weekday again. */
  .routine-planner-weekdays,
  .routine-planner-day[data-outside] {
    display: none;
  }

  .routine-planner[data-view="month"] .routine-planner-day {
    min-height: 0;
  }

  .routine-planner[data-view="month"] .routine-planner-day-button > span {
    display: inline;
  }
}
/* Chat action card: the shell of a chat record the person can act on. Variants add a body. */

/* Keyboard focus is a muted ring: an accent ring looks like a selection here. The same weight as
 * the accent outline rule in auth.css, which loads earlier. */
.chat-action-card :is(button, input, textarea):focus-visible {
  outline: 0;
}

.chat-action-card .ui-button:focus-visible {
  box-shadow: 0 0 0 1px var(--openbot-text-muted);
}

.chat-action-card.conversation-interaction-card {
  min-width: min(100%, 320px);
}

.chat-action-card {
  display: grid;
  width: fit-content;
  max-width: min(100%, 520px);
  gap: var(--openbot-space-3);
}

.chat-action-card-header {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
}

.chat-action-card-icon {
  display: inline-flex;
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
  color: var(--openbot-text-on-accent);
}

.chat-action-card-icon svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}

.chat-action-card-heading {
  display: grid;
  min-width: 0;
  flex: 1;
}

.chat-action-card-eyebrow {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.chat-action-card-title {
  overflow: hidden;
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-lg);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-action-card-open svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

.chat-action-card-footer {
  display: flex;
  min-height: var(--openbot-leading-md);
  align-items: center;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}

/* Without a status the footer holds only its empty live region, so it takes no space. */
.chat-action-card-footer-empty {
  min-height: 0;
  margin-top: calc(-1 * var(--openbot-space-3));
}

.chat-action-card-status {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
}

.chat-action-card-status svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

.chat-action-card-footer-action {
  margin-left: auto;
}

.chat-action-card-error {
  color: var(--openbot-danger-text);
}

.chat-action-card-removed .chat-action-card-title {
  color: var(--openbot-text-muted);
  text-decoration: line-through;
}
/* Marketplace suggestion: an app or skill an agent suggests in the chat, with its connect action. */

.marketplace-suggestion.conversation-interaction-card {
  display: grid;
  container-type: inline-size;
  width: 100%;
  max-width: 520px;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3);
}

.marketplace-suggestion-header {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-3);
}

/* The listing icon keeps its tile border here, as on a dark chat its own fill meets the card. */
.marketplace-suggestion .marketplace-suggestion-icon {
  width: var(--openbot-control-lg);
  height: var(--openbot-control-lg);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-primary);
}

.marketplace-suggestion .marketplace-suggestion-icon img {
  border-radius: inherit;
}

.marketplace-suggestion-heading {
  display: grid;
  min-width: 0;
  flex: 1;
}

/* In a narrow chat the action takes its own row, so the name keeps the width. */
@container (max-width: 360px) {
  .marketplace-suggestion-header {
    flex-wrap: wrap;
  }

  .marketplace-suggestion-heading {
    flex-basis: calc(100% - var(--openbot-control-lg) - var(--openbot-control-md) - 2 * var(--openbot-space-3));
  }

  .marketplace-suggestion-action {
    order: 1;
    width: 100%;
  }

  .marketplace-suggestion-action > .ui-button {
    width: 100%;
  }
}

.marketplace-suggestion-title {
  overflow: hidden;
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketplace-suggestion .marketplace-suggestion-name {
  height: auto;
  padding: 0;
  color: inherit;
  font: inherit;
}

.marketplace-suggestion-description {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketplace-suggestion-action {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
}

.marketplace-suggestion-done[data-slot="badge"] {
  gap: var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-pill);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}

.marketplace-suggestion-done svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

.marketplace-suggestion-unavailable {
  display: flex;
  margin: 0;
  gap: var(--openbot-space-2);
  border-top: 1px solid var(--openbot-border);
  padding-top: var(--openbot-space-3);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.marketplace-suggestion-unavailable svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  margin-top: var(--openbot-space-0-5);
  color: var(--openbot-text-muted);
}

.marketplace-suggestion-dismissed {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.backup-model-logo {
  display: inline-flex;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: none;
  align-items: center;
  justify-content: center;
}

.backup-model-logo svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  overflow: visible;
  fill: var(--openbot-provider-current);
}

.backup-model-option {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
}

.backup-models-page {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
}

.backup-models-intro {
  margin: 0;
  padding-inline: var(--openbot-space-1);
}

.backup-models-empty {
  margin: 0;
  padding: var(--openbot-space-2) var(--openbot-space-3);
}

.backup-models-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.backup-models-row {
  display: flex;
  min-height: 40px;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-1) var(--openbot-space-2) var(--openbot-space-1) var(--openbot-space-3);
}

.backup-models-number {
  width: var(--openbot-icon-sm);
  flex: none;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.backup-models-text {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.backup-models-name {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.backup-models-state {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

/* The same dimming the provider picker uses for an unavailable provider. */
.backup-models-row:not([data-state="ready"]) .backup-model-logo svg {
  opacity: 0.44;
}

.backup-models-row:not([data-state="ready"]) .backup-models-name {
  color: var(--openbot-text-muted);
  text-decoration: line-through;
}

.backup-models-actions {
  display: inline-flex;
  flex: none;
}

.usage-limit-ask-card {
  display: flex;
  max-width: 560px;
  flex-direction: column;
  gap: var(--openbot-space-3);
  margin: var(--openbot-space-4) 0 0;
}

.usage-limit-ask-body {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
}

.usage-limit-ask-select {
  max-width: 320px;
}

.usage-limit-ask-remember {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  cursor: pointer;
}

.usage-limit-ask-error {
  margin: 0;
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
}

.usage-limit-ask-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
}
/* Task list: the chat block of a plan an agent works through. */

.task-list {
  --task-list-glyph: var(--openbot-icon-sm);
  --task-list-ease: var(--openbot-ease-out);
  /* The open is slower than the close: rows settle in one after another, and leave together. */
  --task-list-open: 320ms;
  --task-list-close: 200ms;
  --task-list-close-ease: cubic-bezier(0.32, 0.08, 0.24, 1);
  --task-list-blur: 4px;
  --task-list-stagger: 28ms;

  box-sizing: border-box;
  width: min(100%, 448px);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
}

/* The ghost button is the whole header row, so it takes the card corners and the row height.
 * An open list is not a pressed control: the transparent background overrides the expanded
 * ghost fill, and the ghost hover rule still wins. */
.task-list .task-list-header {
  display: flex;
  background: transparent;
  width: 100%;
  height: auto;
  align-items: center;
  justify-content: flex-start;
  gap: var(--openbot-space-3);
  border-radius: var(--openbot-radius-card);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-regular);
  padding: var(--openbot-space-3);
  text-align: left;
}

.task-list .task-list-header:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 1px var(--openbot-text-muted);
}

.task-list-summary-glyph {
  display: inline-flex;
  width: var(--task-list-glyph);
  height: var(--task-list-glyph);
  flex: 0 0 auto;
}

.task-list-donut {
  width: 100%;
  height: 100%;
}

.task-list-donut circle {
  stroke-width: 1.5;
}

.task-list-donut-track {
  stroke: var(--openbot-border-strong);
}

.task-list-donut-value {
  stroke: var(--openbot-text-primary);
  stroke-linecap: round;
  transition: stroke-dashoffset var(--openbot-duration-slow) var(--task-list-ease);
}

/* The title and the running task share one cell, and swap with a blur when the list closes. */
.task-list-title {
  display: grid;
  min-width: 0;
  flex: 1;
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}

.task-list-title-layer {
  overflow: hidden;
  min-width: 0;
  grid-area: 1 / 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition:
    opacity var(--task-list-open) var(--task-list-ease),
    filter var(--task-list-open) var(--task-list-ease),
    transform var(--task-list-open) var(--task-list-ease);
}

.task-list-title-name {
  font-weight: var(--openbot-weight-semibold);
}

.task-list-title-task {
  font-weight: var(--openbot-weight-regular);
}

.task-list-title[data-showing="task"] .task-list-title-name,
.task-list-title[data-showing="title"] .task-list-title-task {
  filter: blur(var(--task-list-blur));
  opacity: 0;
}

.task-list-title[data-showing="task"] .task-list-title-name {
  transform: translateY(calc(-1 * var(--openbot-space-1)));
}

.task-list-title[data-showing="title"] .task-list-title-task {
  transform: translateY(var(--openbot-space-1));
}

/* The next task enters from below while the list stays closed. */
.task-list-title-task-text {
  animation: task-list-title-in var(--task-list-open) var(--task-list-ease);
}

.task-list-count {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-variant-numeric: tabular-nums;
  line-height: var(--openbot-leading-md);
}

.task-list-chevron {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  transform: rotate(-90deg);
  transition: transform var(--openbot-duration-normal) var(--task-list-ease);
}

.task-list[data-open] .task-list-chevron {
  transform: rotate(0deg);
}

/* The panel animates its row from 0fr to 1fr, so the chat below moves with it. */
.task-list-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--task-list-close) var(--task-list-close-ease);
}

.task-list[data-open] .task-list-panel {
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--task-list-open) var(--task-list-ease);
}

.task-list-items {
  display: grid;
  overflow: hidden;
  min-height: 0;
  margin: 0;
  padding: 0 var(--openbot-space-3);
  list-style: none;
  transition: padding var(--task-list-close) var(--task-list-close-ease);
}

.task-list[data-open] .task-list-items {
  padding-bottom: var(--openbot-space-3);
  transition: padding var(--task-list-open) var(--task-list-ease);
}

/* A closing list blurs and lifts away as one; an opening list focuses in row by row. The delay
 * stops growing after the eighth row, so a long plan does not wait for its last rows. */
.task-list-item {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-0-5) 0;
  filter: blur(var(--task-list-blur));
  opacity: 0;
  transform: translateY(calc(-1 * var(--openbot-space-1))) scale(0.98);
  transform-origin: left top;
  transition:
    opacity var(--task-list-close) var(--task-list-close-ease),
    filter var(--task-list-close) var(--task-list-close-ease),
    transform var(--task-list-close) var(--task-list-close-ease);
}

.task-list[data-open] .task-list-item {
  filter: blur(0);
  opacity: 1;
  transform: none;
  transition:
    opacity var(--task-list-open) var(--task-list-ease),
    filter var(--task-list-open) var(--task-list-ease),
    transform var(--task-list-open) var(--task-list-ease);
  transition-delay: calc(min(var(--task-list-index, 0), 8) * var(--task-list-stagger));
}

.task-list-item-mark {
  display: inline-flex;
  width: var(--task-list-glyph);
  height: var(--openbot-leading-md);
  flex: 0 0 auto;
  align-items: center;
}

.task-list-item-label {
  position: relative;
  min-width: 0;
  flex: 1;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  transition: color var(--openbot-duration-normal) var(--task-list-ease);
}

.task-list-item[data-state="pending"] .task-list-item-label {
  color: var(--openbot-text-muted);
}

.task-list-item[data-state="done"] .task-list-item-label {
  color: var(--openbot-text-dim);
}

/* The strike line draws from the start of the text when the task is done. */
.task-list-item-text {
  position: relative;
}

.task-list-item-text::after {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--openbot-duration-slow) var(--task-list-ease);
}

.task-list-item[data-state="done"] .task-list-item-text::after {
  transform: scaleX(1);
}

.task-list-item[data-state="active"] .task-list-item-text,
.task-list-title[data-showing="task"] .task-list-title-task-text {
  display: inline-block;
  color: var(--openbot-text-primary);
  animation: task-list-pulse 1.6s ease-in-out infinite;
  animation-play-state: var(--task-list-play-state, running);
}

.task-list-title[data-showing="task"] .task-list-title-task-text {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
  animation:
    task-list-title-in var(--task-list-open) var(--task-list-ease),
    task-list-pulse 1.6s ease-in-out infinite;
  animation-play-state: var(--task-list-play-state, running);
}

/* The same roll as the update island: each settled value lifts in from below and sharpens. */
.task-list-item-progress {
  --digit-dur: var(--openbot-duration-overlay);
  --digit-distance: var(--openbot-space-1);
  --digit-blur: var(--openbot-space-0-5);
  --digit-stagger: 40ms;

  display: inline-flex;
  min-width: 4ch;
  flex: 0 0 auto;
  justify-content: flex-end;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  line-height: var(--openbot-leading-md);
  padding: 0 var(--openbot-space-1-5);
}

/* One glyph for all states. Each layer shows for its own state, so a change animates in place. */
.task-list-mark {
  width: var(--task-list-glyph);
  height: var(--task-list-glyph);
  overflow: visible;
}

.task-list-mark circle,
.task-list-mark path {
  transition:
    opacity var(--openbot-duration-normal) var(--task-list-ease),
    transform var(--openbot-duration-normal) var(--task-list-ease),
    stroke-dashoffset var(--openbot-duration-slow) var(--task-list-ease);
  transform-box: fill-box;
  transform-origin: center;
}

.task-list-mark-pending {
  opacity: 0;
  stroke: var(--openbot-text-dim);
  stroke-dasharray: 1.2 2;
  stroke-width: 1.5;
}

.task-list-mark-track {
  opacity: 0;
  stroke: var(--openbot-border-strong);
  stroke-width: 1.5;
}

.task-list-mark-arc {
  opacity: 0;
  stroke: var(--openbot-text-primary);
  stroke-dasharray: 12 100;
  stroke-linecap: round;
  stroke-width: 1.5;
}

.task-list-mark-fill {
  fill: var(--openbot-text-dim);
  opacity: 0;
  transform: scale(0.4);
}

.task-list-mark-check {
  stroke: var(--openbot-bg-canvas);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
}

.task-list-mark-cross {
  stroke: var(--openbot-bg-canvas);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
  stroke-width: 1.75;
}

.task-list-mark[data-state="pending"] .task-list-mark-pending,
.task-list-mark[data-state="active"] .task-list-mark-track,
.task-list-mark[data-state="active"] .task-list-mark-arc,
.task-list-mark[data-state="done"] .task-list-mark-fill,
.task-list-mark[data-state="failed"] .task-list-mark-fill {
  opacity: 1;
}

/* Rotate the outer SVG so Chromium can composite the animation. */
.task-list-mark[data-state="active"] {
  animation: task-list-turn 0.9s linear infinite;
  animation-play-state: var(--task-list-play-state, running);
}

.task-list-mark[data-state="done"] .task-list-mark-fill,
.task-list-mark[data-state="failed"] .task-list-mark-fill {
  transform: scale(1);
}

.task-list-mark[data-state="failed"] .task-list-mark-fill {
  fill: var(--openbot-danger);
}

/* The check and the cross draw after the disc has filled. */
.task-list-mark[data-state="done"] .task-list-mark-check,
.task-list-mark[data-state="failed"] .task-list-mark-cross {
  stroke-dashoffset: 0;
  transition-delay: var(--openbot-duration-fast);
}

@keyframes task-list-turn {
  to {
    transform: rotate(360deg);
  }
}

@keyframes task-list-title-in {
  from {
    filter: blur(var(--task-list-blur));
    opacity: 0;
    transform: translateY(var(--openbot-space-1));
  }
}

/* Opacity avoids the per-frame text paint of an animated clipped gradient. */
@keyframes task-list-pulse {
  50% {
    opacity: 0.6;
  }
}

/* Closed rows remain mounted for the close transition, but need no idle animation. */
.task-list:not([data-open]) .task-list-panel {
  --task-list-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .task-list-donut-value,
  .task-list-chevron,
  .task-list-panel,
  .task-list-items,
  .task-list-item,
  .task-list[data-open] .task-list-panel,
  .task-list[data-open] .task-list-items,
  .task-list[data-open] .task-list-item,
  .task-list-item-label,
  .task-list-title-layer,
  .task-list-item-text::after,
  .task-list-mark circle,
  .task-list-mark path {
    transition: none;
  }

  .task-list-mark[data-state="active"],
  .task-list-item[data-state="active"] .task-list-item-text,
  .task-list-title-task-text,
  .task-list-title[data-showing="task"] .task-list-title-task-text {
    animation: none;
  }
}
/* The subagents of one turn: the chat card and the side panel pane. */

.subagents-elapsed {
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}

/* The live line: the icon of the current step and its text. */

.subagents-live {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.subagents-live-glyph {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: 0 0 auto;
  margin-top: 2px;
}

.subagents-live-text {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.subagents-live[data-state="failed"] {
  color: var(--openbot-danger-text);
}

/* The group: the header with the progress, and the list. */

.subagents-group {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: var(--openbot-space-1-5);
}

.subagents-group .subagents-group-header {
  display: flex;
  height: auto;
  align-self: flex-start;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-left: calc(-1 * var(--openbot-space-1-5));
  border-radius: var(--openbot-radius-sm);
  padding: var(--openbot-space-0-5) var(--openbot-space-1-5);
  color: inherit;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-md);
  text-align: left;
}

/* The open list is not a lit toggle, so the header has no fill. */
.subagents-group .subagents-group-header[aria-expanded="true"]:not(:hover) {
  background: transparent;
  color: inherit;
}

.subagents-group-chevron {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  color: var(--openbot-text-muted);
  transition: rotate var(--openbot-duration-fast) var(--openbot-ease-out);
}

.subagents-group-header[aria-expanded="true"] .subagents-group-chevron {
  rotate: 90deg;
}

@media (prefers-reduced-motion: reduce) {
  .subagents-group-chevron {
    transition: none;
  }
}

.subagents-group-title {
  font-weight: var(--openbot-weight-medium);
}

.subagents-progress {
  gap: var(--openbot-space-1-5);
  font-variant-numeric: tabular-nums;
}

.subagents-ring {
  width: var(--openbot-icon-xs);
}

.subagents-ring .ui-radial-progress-track,
.subagents-ring .ui-radial-progress-indicator {
  stroke-width: 7;
}

.subagents-ring .ui-radial-progress-indicator {
  transition: stroke-dasharray var(--openbot-duration-slow) var(--openbot-ease-out);
}

.subagents-progress-failed {
  color: var(--openbot-danger-text);
}

@media (prefers-reduced-motion: reduce) {
  .subagents-ring .ui-radial-progress-indicator {
    transition: none;
  }
}

/* The list: one quiet card, as wide as the agent's message bubble. */

.subagents-list {
  display: flex;
  width: min(100%, 720px);
  flex-direction: column;
  margin: 0;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-canvas);
  padding: var(--openbot-space-1);
  list-style: none;
}

/* Two lines on one grid: the status and step icons share the first column, so both texts start
   at the same x. */
.subagents-list .subagents-row {
  display: grid;
  width: 100%;
  height: auto;
  align-items: start;
  grid-template-columns: var(--openbot-icon-sm) minmax(0, 1fr) auto auto;
  gap: 2px var(--openbot-space-2);
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  padding: var(--openbot-space-2);
  color: inherit;
  font-weight: var(--openbot-weight-regular);
  line-height: inherit;
  text-align: left;
  white-space: normal;
  cursor: pointer;
}

.subagents-list .subagents-row:hover {
  background: var(--openbot-hover);
}

.subagents-list .subagents-row.subagents-row-selected {
  background: var(--openbot-bg-surface);
}

.subagents-row:focus-visible {
  outline: 2px solid var(--openbot-focus-ring);
  outline-offset: -2px;
}

.subagents-row-copy,
.subagents-row .subagents-live {
  display: contents;
}

.subagents-row-title {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.subagents-row .subagents-elapsed {
  line-height: var(--openbot-leading-md);
}

.subagents-row .subagents-live-glyph {
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  justify-self: center;
  margin-top: 0;
}

.subagents-row .subagents-live-text {
  grid-column: 2;
  grid-row: 2;
}

.subagents-row-chevron {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: 0 0 auto;
  margin-top: 4px;
  color: var(--openbot-text-muted);
  opacity: 0;
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}

.subagents-row:hover .subagents-row-chevron,
.subagents-row:focus-visible .subagents-row-chevron,
.subagents-row.subagents-row-selected .subagents-row-chevron {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .subagents-row-chevron {
    transition: none;
  }
}

/* The side panel pane: the steps of one subagent. */

.subagents-panel {
  overflow: hidden;
}

.subagents-panel-detail {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: var(--openbot-space-3);
  overflow-y: auto;
  padding: var(--openbot-space-4);
}

.subagents-panel-head {
  display: flex;
  align-items: flex-start;
  gap: var(--openbot-space-2);
}

.subagents-panel-head h3 {
  margin: 0;
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-lg);
  overflow-wrap: anywhere;
}

.subagents-panel-meta {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

.subagents-steps {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
}

.subagents-prompt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  border-left: 2px solid var(--openbot-border-strong);
  padding-left: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.subagents-prompt-label {
  color: var(--openbot-text-muted);
  font-weight: var(--openbot-weight-medium);
}

.subagents-step-list {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.subagents-step {
  display: flex;
  align-items: flex-start;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  overflow-wrap: anywhere;
}

.subagents-step-glyph {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--openbot-text-muted);
}

.subagents-step[data-kind="thinking"] .subagents-step-text {
  color: var(--openbot-text-muted);
  font-style: italic;
}

.subagents-step[data-kind="text"] .subagents-step-text {
  color: var(--openbot-text-primary);
}

.subagents-step-text.agent-activity-label {
  -webkit-line-clamp: unset;
}

.subagents-error {
  display: flex;
  align-items: flex-start;
  gap: var(--openbot-space-2);
  margin: 0;
  color: var(--openbot-danger-text);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.subagents-error-icon {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: 0 0 auto;
  margin-top: 2px;
}

/* Status icons: the same icons and colours as the chat action markers. */

.subagents-status {
  display: inline-flex;
  width: var(--openbot-icon-sm);
  height: var(--openbot-leading-md);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}

.subagents-status-icon {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

.subagents-status[data-state="running"] {
  color: var(--openbot-accent);
}

.subagents-status[data-state="running"] .subagents-status-icon {
  animation: ui-spin 1s linear infinite;
}

.subagents-status[data-state="completed"] {
  color: var(--openbot-success);
}

.subagents-status[data-state="failed"] {
  color: var(--openbot-danger);
}

.subagents-status[data-state="stopped"] {
  color: var(--openbot-text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .subagents-status[data-state="running"] .subagents-status-icon {
    animation: none;
  }
}
/*
 * Waiting for replies: the task list rows, in the queue panel's surface. It hangs off the top of the
 * next panel like the queue: its bottom goes under the composer, or under the queue when the queue
 * shows, and that panel paints over the overlap.
 */

.awaiting-replies {
  --awaiting-composer-overlap: 14px;

  position: relative;
  z-index: 9;
  width: auto;
  margin: 0 12px calc(-1 * var(--awaiting-composer-overlap));
  border-color: var(--openbot-queue-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-queue-surface);
  padding-bottom: var(--awaiting-composer-overlap);
  animation: queue-panel-in var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1) both;
}

.awaiting-replies.task-list .task-list-header {
  min-width: 0;
  flex: 1;
  border-radius: var(--openbot-radius-lg);
}

/* The close button sits next to the header button, because a button cannot hold another. */
.awaiting-replies-bar {
  display: flex;
  align-items: center;
}

.awaiting-replies-dismiss {
  margin-right: var(--openbot-space-2);
  color: var(--openbot-text-muted);
}

.composer-wrap:has(.composer-attachment) .awaiting-replies:last-child {
  margin-bottom: 0;
}

.awaiting-replies-item {
  align-items: center;
}

.awaiting-replies-avatar {
  --agent-avatar-optical-offset: -1px;

  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
}

.awaiting-replies-text {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: baseline;
  gap: var(--openbot-space-2);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}

.awaiting-replies-name {
  flex: 0 0 auto;
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}

.awaiting-replies-preview {
  overflow: hidden;
  min-width: 0;
  color: var(--openbot-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.awaiting-replies-state {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-md);
}

.awaiting-replies-detail {
  color: var(--openbot-text-dim);
}

.awaiting-replies-item[data-state="failed"] .awaiting-replies-state-label {
  color: var(--openbot-danger-text);
}

.awaiting-replies-item[data-state="active"] .awaiting-replies-state-label {
  animation: task-list-pulse 1.6s ease-in-out infinite;
  animation-play-state: var(--task-list-play-state, running);
}

@media (prefers-reduced-motion: reduce) {
  .awaiting-replies {
    animation: none;
  }

  .awaiting-replies-item[data-state="active"] .awaiting-replies-state-label {
    animation: none;
  }
}
/*
 * Open waits: the "Waiting for replies" card, with a two-line row for each wait and a menu at the
 * row end.
 */

.open-waits .task-list-title-name {
  font-weight: var(--openbot-weight-medium);
}

.open-waits .task-list-count {
  color: var(--openbot-warning-text);
  font-size: var(--openbot-text-sm);
}

.open-waits-row {
  align-items: flex-start;
}

.open-waits-row-text {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: var(--openbot-space-0-5);
}

.open-waits-row-note {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.open-waits-row-meta {
  display: flex;
  min-width: 0;
  gap: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  white-space: nowrap;
}

.open-waits-row-request {
  overflow: hidden;
  min-width: 0;
  color: var(--openbot-text-dim);
  text-overflow: ellipsis;
}

[data-wait-state="woken"] .open-waits-row-state {
  color: var(--openbot-warning-text);
}

[data-wait-state="resuming"] .open-waits-row-state {
  color: var(--openbot-text-primary);
  animation: task-list-pulse 1.6s ease-in-out infinite;
  animation-play-state: var(--task-list-play-state, running);
}

@media (prefers-reduced-motion: reduce) {
  [data-wait-state="resuming"] .open-waits-row-state {
    animation: none;
  }
}

.open-waits-menu {
  flex: 0 0 auto;
  align-self: flex-start;
  color: var(--openbot-text-muted);
}
.conversation-title {
  display: flex;
  height: var(--openbot-control-sm);
  align-items: center;
  gap: 6px;
  border-radius: var(--openbot-radius-sm);
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 2px 4px;
  text-align: left;
  transition: background var(--openbot-duration-hover) ease;
}

.conversation-title:hover {
  background: var(--openbot-hover);
}

.conversation-title h1 {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0;
}

.conversation-access-lock {
  display: inline-flex;
  flex: none;
  color: var(--openbot-text-muted);
}

.conversation-access-lock svg {
  width: 14px;
  height: 14px;
}

.conversation-header-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}

.provider-model-picker {
  position: relative;
  min-width: 0;
}

.provider-model-trigger {
  display: flex;
  width: max-content;
  /* Room for the effort after the model name. The model name shortens first. */
  max-width: 240px;
  height: 28px;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-overlay);
  padding: 0 9px 0 8px;
  color: var(--openbot-text-primary);
  cursor: pointer;
  box-shadow: inset 0 1px var(--openbot-hover);
  transition:
    border-color var(--openbot-duration-hover) ease,
    background-color var(--openbot-duration-hover) ease,
    transform var(--openbot-duration-fast) cubic-bezier(0.23, 1, 0.32, 1);
}

.provider-model-trigger:hover:not(:disabled),
.provider-model-trigger[aria-expanded="true"] {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-surface);
}

.provider-model-trigger:active:not(:disabled) {
  transform: scale(0.97);
}

.provider-model-trigger:focus-visible,
.provider-model-rail-button:focus-visible,
.provider-model-option:focus-visible {
  outline: 1px solid var(--openbot-accent);
  outline-offset: 1px;
}

.provider-model-trigger:disabled {
  opacity: 0.48;
  cursor: default;
}

.provider-model-trigger-value {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}

.provider-model-trigger-name {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  font-size: var(--openbot-text-md);
  font-weight: 470;
  line-height: 18px;
}

.provider-model-trigger-effort {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: 18px;
  white-space: nowrap;
}

.provider-model-trigger-effort::before {
  margin-right: var(--openbot-space-1-5);
  content: "·";
}

/* The Fast chip gets its own room, so the model name keeps the width it has without it. */
.provider-model-trigger:has(.provider-model-trigger-fast) {
  max-width: 296px;
}

.provider-model-trigger-fast svg {
  width: 12px;
  height: 12px;
  margin-right: var(--openbot-space-0-5);
  stroke-width: var(--openbot-icon-stroke);
}

/* An email can be long: the account gives way before the model name does. */
.provider-model-trigger-account {
  min-width: 0;
  max-width: 160px;
  flex-shrink: 1;
  overflow: hidden;
}

/* SwapLabel: the old text sits on top of the new text while both animate. */
.ui-swap {
  position: relative;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
}

.ui-swap > span,
.ui-swap-digits {
  display: inline-block;
}

.ui-swap > .ui-swap-leaving {
  position: absolute;
  top: 0;
  left: 0;
}

/* The trigger swap is mostly a blur. The box does not clip it: a clip cuts the blur and the old
 * text with a hard edge while the box eases to the new width. The name clips itself instead. */
.provider-model-trigger-value .ui-swap {
  overflow: visible;
}

/* A name without SwapLabel, such as a static copy of the trigger, clips itself. */
.provider-model-trigger-name:not(.ui-swap) {
  overflow: hidden;
  text-overflow: ellipsis;
}

.provider-model-trigger-name > span:not(.ui-swap-leaving) {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.provider-model-trigger-name > .ui-swap-leaving {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A newly chosen provider's mark springs in. */
.provider-model-trigger-mark {
  display: flex;
  flex: 0 0 auto;
}

.provider-model-trigger-mark[data-entering] {
  animation: provider-model-mark-in 420ms cubic-bezier(0.34, 1.36, 0.64, 1) both;
}

@keyframes provider-model-mark-in {
  from {
    opacity: 0;
    scale: 0.6;
    filter: blur(2px);
  }
}

.provider-model-picker-field {
  width: 100%;
}

.provider-model-trigger-field {
  width: 100%;
  max-width: none;
  height: 44px;
  gap: 8px;
  border: 0;
  border-radius: 0;
  background: var(--openbot-hover);
  padding: 0 11px 0 12px;
  box-shadow: none;
}

.provider-model-trigger-field:hover:not(:disabled),
.provider-model-trigger-field[aria-expanded="true"] {
  border-color: transparent;
  background: var(--openbot-border);
}

.provider-model-trigger-field .provider-model-field-label {
  flex: 0 0 auto;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: 400;
  line-height: 17px;
}

.provider-model-trigger-field .provider-model-trigger-value {
  max-width: calc(100% - 84px);
  margin-left: auto;
  justify-content: flex-end;
}

.provider-model-mark {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  overflow: visible;
  fill: var(--openbot-provider-current);
}

.provider-model-mark-large {
  width: 19px;
  height: 19px;
  flex-basis: 19px;
}

.provider-model-chevron {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  fill: none;
  stroke: var(--openbot-text-muted);
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--openbot-duration-normal) ease;
}

.provider-model-trigger[aria-expanded="true"] .provider-model-chevron {
  transform: rotate(180deg);
}

.provider-model-popover {
  --provider-model-rail-bg: color-mix(in srgb, var(--openbot-bg-notch) 22%, var(--ui-menu-bg));
  --provider-model-segment-radius: calc(var(--ui-menu-item-radius) - var(--openbot-space-0-5));
  position: relative;
  z-index: var(--openbot-layer-dropdown);
  width: min(360px, calc(100vw - 24px));
  min-height: 226px;
  overflow: hidden;
  border: 0;
  border-radius: var(--ui-menu-radius);
  background: var(--ui-menu-bg);
  color: var(--openbot-text-primary);
  box-shadow: var(--ui-menu-panel-shadow);
  transform-origin: var(--kb-popover-content-transform-origin);
  animation: ui-menu-in var(--ui-menu-duration) var(--ui-menu-ease) both;
}

/* The copy that ContentExitMotion leaves in the place of the closed popover plays the exit. */
.provider-model-popover:not([data-expanded]) {
  animation: ui-menu-out var(--ui-menu-duration) var(--ui-menu-ease) both;
}

.provider-model-layout {
  max-height: min(520px, calc(100dvh - 100px), var(--kb-popper-content-available-height, 520px));
  display: flex;
  width: 100%;
  min-height: inherit;
}

.provider-model-rail {
  display: flex;
  width: 52px;
  flex: 0 0 52px;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-1);
  border-right: 1px solid var(--openbot-border);
  background: var(--provider-model-rail-bg);
  padding: 9px 7px;
}

.provider-model-rail-tabs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-1);
}

/* Opens the provider settings, to connect a provider that the rail leaves out. */
.provider-model-rail-add {
  color: var(--openbot-text-muted);
}

.provider-model-rail-add:hover {
  color: var(--openbot-text-primary);
}

.provider-model-rail-tooltip-trigger {
  display: flex;
}

.provider-model-rail-tooltip {
  z-index: var(--openbot-layer-tooltip);
  display: flex;
  max-width: min(240px, calc(100vw - 16px));
  flex-direction: column;
  gap: var(--openbot-space-0-5);
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-surface-raised);
  box-shadow: var(--openbot-shadow-raised);
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-md);
  overflow-wrap: anywhere;
  pointer-events: none;
}

.provider-model-rail-tooltip small {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
}

.provider-model-rail-button {
  position: relative;
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  border: 0;
  border-radius: var(--ui-menu-item-radius);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition:
    background-color var(--openbot-duration-hover) ease,
    opacity var(--openbot-duration-hover) ease;
}

.provider-model-rail-button:hover {
  background: var(--ui-menu-item-hover);
}

.provider-model-rail-button-selected {
  background: color-mix(in srgb, var(--openbot-text-primary) 8%, transparent);
  box-shadow: inset 0 0 0 1px var(--ui-menu-edge);
}

.provider-model-rail-button .provider-model-mark {
  opacity: 0.48;
}

.provider-model-rail-button:not(.provider-model-rail-button-selected, .provider-model-rail-button-unavailable):hover
  .provider-model-mark {
  opacity: 0.8;
}

.provider-model-rail-button-selected .provider-model-mark {
  fill: var(--openbot-text-primary);
  opacity: 1;
}

/* A provider that cannot run: a dim mark and a dot. The dot uses the warning color when the user can
 * fix it here (sign in, update), and the muted text color otherwise. The tooltip names the state. */
.provider-model-rail-button-unavailable .provider-model-mark {
  opacity: 0.28;
}

.provider-model-rail-button-unavailable:is(:hover, .provider-model-rail-button-selected) .provider-model-mark {
  opacity: 0.6;
}

.provider-model-rail-button:is(
  [data-state="not-installed"],
  [data-state="sign-in-required"],
  [data-state="outdated"],
  [data-state="error"]
)::after {
  position: absolute;
  top: var(--openbot-space-1-5);
  right: var(--openbot-space-1-5);
  width: 6px;
  height: 6px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-muted);
  box-shadow: 0 0 0 2px var(--provider-model-rail-bg);
  content: "";
}

.provider-model-rail-button:is([data-state="sign-in-required"], [data-state="outdated"])::after {
  background: var(--openbot-warning);
}

/* The place of an account in its provider's list, when the provider has more than one. */
.provider-model-rail-account {
  position: absolute;
  right: 2px;
  bottom: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control);
  box-shadow: 0 0 0 2px var(--provider-model-rail-bg);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.provider-model-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  flex: 1;
  padding: var(--ui-menu-padding);
}

.provider-model-panel:not([data-selected]) {
  display: none;
}

.provider-model-heading {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--openbot-space-2);
  /* The right inset lives on the text, not the row, so the action button can line its right edge up
   * with the search field and the model rows below it. */
  padding: var(--openbot-space-1-5) 0 var(--openbot-space-2) var(--ui-menu-inset);
}

.provider-model-heading-text {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 4px;
}

/* The icons are raw lucide exports with no intrinsic size, and only the icon-only button sizes
 * carry a rule, so an icon beside a label needs one here to match every other button. */
.provider-model-heading .ui-button,
.provider-model-empty .ui-button-variant-outline {
  border-color: transparent;
  border-radius: var(--ui-menu-item-radius);
  background: var(--ui-menu-item-hover);
  box-shadow: none;
  color: var(--openbot-text-primary);
}

.provider-model-heading .ui-button:hover,
.provider-model-empty .ui-button-variant-outline:hover {
  background: color-mix(in srgb, var(--openbot-text-primary) 10%, transparent);
}

.provider-model-heading .ui-button svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}

.provider-model-heading strong,
.provider-model-heading span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The runtime status: a filled block with no border, as the search field. */
.provider-model-empty {
  display: grid;
  justify-items: start;
  gap: var(--openbot-space-2);
  margin-bottom: var(--ui-menu-padding);
  border: 0;
  border-radius: var(--ui-menu-item-radius);
  background: var(--ui-menu-item-hover);
  padding: var(--openbot-space-2) var(--ui-menu-inset);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: 18px;
}

.provider-model-heading strong {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: 620;
  line-height: 20px;
}

.provider-model-heading span {
  margin-top: 1px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
}

.provider-model-empty > .ui-progress {
  justify-self: stretch;
}

.provider-model-list {
  display: grid;
  gap: 0;
}

.provider-model-effort {
  flex-shrink: 0;
  display: flex;
  /* The effort segments go to a line of their own when they do not fit beside the label. */
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-1) 12px;
  /* The separator runs to both edges of the panel, as in the menus. */
  margin: var(--ui-menu-padding) calc(var(--ui-menu-padding) * -1) 0;
  border-top: 1px solid var(--openbot-border);
  padding: var(--ui-menu-padding) var(--ui-menu-padding) 0 calc(var(--ui-menu-padding) + var(--ui-menu-inset));
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 17px;
}

/* The effort and auto-approve rows are one group under one separator. */
.provider-model-effort + .provider-model-effort {
  margin-top: 0;
  border-top: 0;
  padding-top: var(--openbot-space-1);
}

/* Each row is as high as the effort control, so the switch and the segments have room. */
.provider-model-effort > :first-child {
  display: flex;
  min-height: var(--openbot-control-md);
  align-items: center;
}

.provider-model-effort-select {
  width: 128px;
}

/* Effort as segments, in the SlidingTabs look and timing. */
.provider-model-effort-segments {
  --provider-model-effort-duration: 250ms;
  --provider-model-effort-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  display: flex;
  /* On a line of their own, the segments can shrink. A long label then ends in an ellipsis. */
  flex: 1 1 auto;
  min-width: 0;
  gap: var(--openbot-space-0-5);
  border-radius: var(--ui-menu-item-radius);
  background: var(--ui-menu-item-hover);
  padding: var(--openbot-space-0-5);
}

.provider-model-effort-segment {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}

.provider-model-effort-segment-control {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  min-width: 0;
  height: calc(var(--openbot-control-md) - 2 * var(--openbot-space-0-5));
  align-items: center;
  justify-content: center;
  border-radius: var(--provider-model-segment-radius);
  padding-inline: var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--provider-model-effort-duration) var(--provider-model-effort-ease);
}

.provider-model-effort-segment-control label {
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: inherit;
}

.provider-model-effort-segment-control:hover:not([data-disabled]),
.provider-model-effort-segment-control[data-checked] {
  color: var(--openbot-text-primary);
}

.provider-model-effort-segment:has(:focus-visible) .provider-model-effort-segment-control {
  box-shadow: 0 0 0 1px var(--openbot-text-muted);
}

.provider-model-effort-segment-control[data-disabled] {
  opacity: 0.5;
  cursor: default;
}

/* The chosen segment's background. EffortSegments places it, and it slides to a new choice. */
.provider-model-effort-pill {
  position: absolute;
  top: var(--openbot-space-0-5);
  left: 0;
  z-index: 0;
  width: 0;
  height: calc(var(--openbot-control-md) - 2 * var(--openbot-space-0-5));
  border-radius: var(--provider-model-segment-radius);
  background: color-mix(in srgb, var(--openbot-text-primary) 12%, transparent);
  box-shadow: inset 0 1px 0 var(--ui-menu-highlight);
  pointer-events: none;
  transition:
    transform var(--provider-model-effort-duration) var(--provider-model-effort-ease),
    width var(--provider-model-effort-duration) var(--provider-model-effort-ease);
}

.provider-model-effort-pill[data-initializing] {
  transition: none;
}

.provider-model-effort-segments:has([data-disabled]) .provider-model-effort-pill {
  opacity: 0.5;
}

.provider-model-effort-select .ui-select-trigger {
  border-color: transparent;
  border-radius: var(--ui-menu-item-radius);
  background: var(--ui-menu-item-hover);
  box-shadow: none;
}

.provider-model-effort-select .ui-select-trigger:is(:hover, [data-expanded]) {
  background: color-mix(in srgb, var(--openbot-text-primary) 10%, transparent);
}

.provider-model-effort-content {
  border-radius: var(--ui-menu-radius);
  background: var(--ui-menu-bg);
  box-shadow: var(--ui-menu-panel-shadow);
  animation: ui-menu-in var(--ui-menu-duration) var(--ui-menu-ease) both;
}

.provider-model-effort-content .ui-select-listbox {
  padding: var(--ui-menu-padding);
}

.provider-model-effort-content .ui-select-item {
  border-radius: var(--ui-menu-item-radius);
  padding-block: var(--openbot-space-1-5);
  padding-left: var(--ui-menu-inset);
  font-size: var(--openbot-text-md);
}

.provider-model-effort-content .ui-select-item[data-highlighted] {
  background: var(--ui-menu-item-hover);
}

/* The check of the selected model is a filled circle on the left, as in the menus. */
.provider-model-option {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 0;
  border-radius: var(--ui-menu-item-radius);
  background: transparent;
  padding: var(--openbot-space-1-5) var(--ui-menu-inset) var(--openbot-space-1-5)
    calc(var(--ui-menu-inset) + var(--openbot-icon-md) + var(--openbot-space-2));
  color: var(--openbot-text-primary);
  cursor: pointer;
  text-align: left;
  transition:
    background-color var(--openbot-duration-hover) ease,
    color var(--openbot-duration-hover) ease;
}

.provider-model-option::before {
  position: absolute;
  top: 50%;
  left: var(--ui-menu-inset);
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--openbot-text-primary) 22%, transparent);
  border-radius: var(--openbot-radius-pill);
  content: "";
  translate: 0 -50%;
  transition:
    background-color var(--ui-menu-duration) ease-out,
    border-color var(--ui-menu-duration) ease-out;
}

.provider-model-option-selected::before {
  border-color: transparent;
  background: var(--openbot-text-primary);
}

.provider-model-option:hover:not(:disabled),
.provider-model-option:focus-visible {
  background: var(--ui-menu-item-hover);
}

.provider-model-option:disabled {
  color: var(--openbot-text-dim);
  cursor: not-allowed;
}

.provider-model-option-name {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.provider-model-option-name > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--openbot-text-md);
  line-height: 18px;
}

.provider-model-option-name small {
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-pill);
  background: color-mix(in srgb, var(--openbot-text-primary) 7%, transparent);
  padding: 1px var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: 500;
  line-height: 15px;
}

/* The tick sits in the filled circle, cut out of it in the panel color. */
.provider-model-check {
  position: absolute;
  top: 50%;
  left: calc(var(--ui-menu-inset) + (var(--openbot-icon-md) - var(--openbot-icon-sm)) / 2);
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  fill: none;
  stroke: var(--ui-menu-bg);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.5;
  translate: 0 -50%;
}

@media (max-width: 720px) {
  /* A form field keeps the width of its row. */
  .provider-model-trigger:not(.provider-model-trigger-field) {
    max-width: 148px;
  }

  /* A narrow header keeps the model name; the label and the title still name the effort. */
  .provider-model-trigger-effort {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .provider-model-chevron,
  .provider-model-trigger,
  .provider-model-rail-button,
  .provider-model-option,
  .provider-model-option::before,
  .provider-model-effort-segment-control,
  .provider-model-effort-pill {
    transition: none;
  }

  .provider-model-popover,
  .provider-model-popover:not([data-expanded]),
  .provider-model-effort-content {
    animation: none;
  }

  .provider-model-trigger-mark[data-entering] {
    animation: none;
  }
}

.computer-button-agent-active {
  border-color: var(--openbot-accent);
  background: var(--openbot-accent-soft);
  box-shadow: 0 0 10px var(--openbot-accent-strong);
  color: var(--openbot-accent);
}

.computer-control-dot {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 5px;
  height: 5px;
  border: 1px solid var(--openbot-bg-canvas);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
  animation: browser-control-pulse 1.25s ease-in-out infinite;
}

.browser-toolbar-button:active:not(:disabled) {
  transform: scale(0.92);
  transition-duration: var(--openbot-duration-fast);
}
.conversation-scroll {
  min-height: 0;
  flex: 1;
  overflow-anchor: none;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 8px 12px var(--openbot-space-6);
}

.virtual-chat-list {
  position: relative;
  width: 100%;
}

.virtual-chat-row {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  padding-top: var(--openbot-chat-entry-gap);
}

/* Rows the timeline marks as grouped (marker runs, same-sender messages) sit tighter. */
.virtual-chat-row[data-grouped] {
  padding-top: var(--openbot-chat-marker-gap);
}

.virtual-chat-row > .chat-action-marker + .message-entry {
  margin-top: var(--openbot-chat-marker-gap);
}

.virtual-chat-list-static .virtual-chat-row {
  position: relative;
  inset: auto;
}

/*
 * The mark on a message that a quote opened. The band reaches the edges of the scroll area and
 * leaves out the gap above the row; it holds, then fades out.
 */
.virtual-chat-row[data-reply-flash] {
  isolation: isolate;
}

.virtual-chat-row[data-reply-flash]::before {
  position: absolute;
  z-index: -1;
  inset: var(--openbot-chat-entry-gap) -12px 0;
  background: var(--openbot-accent-soft);
  content: "";
  opacity: 0;
  pointer-events: none;
  animation: reply-flash 1.6s var(--openbot-ease-out);
}

.virtual-chat-row[data-grouped][data-reply-flash]::before {
  top: var(--openbot-chat-marker-gap);
}

@keyframes reply-flash {
  0%,
  45% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.conversation-history-status {
  display: flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

/*
 * The way back to the newest message. The wrapper carries the pill, because the count turns one
 * round button into two buttons the reader reads as one control, and only the wrapper knows how
 * wide that is. The circle becomes a pill in one step: `44px` to `auto` cannot be animated, and a
 * scale would fight the centring transform.
 */
.scroll-to-latest {
  position: sticky;
  z-index: 3;
  top: calc(100% - 58px);
  left: 50%;
  display: flex;
  width: max-content;
  height: 44px;
  align-items: center;
  margin-bottom: -44px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface-raised);
  box-shadow:
    0 8px 24px var(--openbot-shadow-popover-ambient),
    inset 0 0 0 1px var(--openbot-shadow-ring);
  color: var(--openbot-text-primary);
  transform: translateX(-50%);
  transition: background-color var(--openbot-duration-hover) ease;
}

/*
 * With a count the pill wears the colours of the unread banner: it is the same news. It is also
 * lower than the round arrow, and the label makes it wider, so the bottom edge is held where the
 * circle had it: `100% - 58px` plus `44px` is the same line as `100% - 50px` plus `36px`.
 */
.scroll-to-latest:is([data-new-messages], [data-reply-return]) {
  top: calc(100% - 50px);
  height: 36px;
  margin-bottom: -36px;
}

.scroll-to-latest[data-new-messages] {
  border-color: transparent;
  background: var(--openbot-unread-surface);
  color: var(--openbot-unread-text);
}

.scroll-to-latest-button {
  display: grid;
  width: 44px;
  height: 100%;
  place-items: center;
  border: 0;
  border-radius: inherit;
  background: none;
  color: inherit;
  transition:
    background-color var(--openbot-duration-hover) ease,
    transform var(--openbot-duration-fast) cubic-bezier(0.23, 1, 0.32, 1);
}

/*
 * One padding on all four sides: `space-1-5` from the pill edge to the arrow, to the round dismiss
 * mark, and above and below both, because each is `22px` tall inside a `36px` pill with a `1px`
 * border. `space-2` divides arrow from label and label from mark.
 */
.scroll-to-latest:is([data-new-messages], [data-reply-return]) .scroll-to-latest-button {
  width: auto;
  grid-auto-flow: column;
  gap: var(--openbot-space-2);
  padding-inline: var(--openbot-space-1-5) var(--openbot-space-2);
}

.scroll-to-latest-count {
  font-size: var(--openbot-text-sm);
  font-weight: 620;
  white-space: nowrap;
}

/*
 * The whole height stays clickable, but nothing here is painted: a highlight on this button would
 * fill the end of the pill. The hover and focus marks sit on the icon below, which is round, and
 * that round mark is what separates the two halves. No rule divides them.
 */
.scroll-to-latest-dismiss {
  display: grid;
  height: 100%;
  place-items: center;
  border: 0;
  background: none;
  padding-inline: 0 var(--openbot-space-1-5);
  color: inherit;
  transition: transform var(--openbot-duration-fast) cubic-bezier(0.23, 1, 0.32, 1);
}

.scroll-to-latest-button svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}

/* The mark is as tall as the arrow, so one padding can hold both away from every edge. */
.scroll-to-latest-dismiss svg {
  box-sizing: content-box;
  width: 14px;
  height: 14px;
  border-radius: var(--openbot-radius-pill);
  padding: var(--openbot-space-1);
  transition: background-color var(--openbot-duration-hover) ease;
}

/* The ring follows the pill: an offset ring would draw a circle around one half of it. */
.scroll-to-latest-button:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: -2px;
}

/* The dismiss ring follows its round icon mark, for the same reason its hover does. */
.scroll-to-latest-dismiss:focus-visible {
  outline: none;
}

.scroll-to-latest-dismiss:focus-visible svg {
  outline: 2px solid var(--openbot-border-focus);
}

.scroll-to-latest[data-new-messages] .scroll-to-latest-button:focus-visible {
  outline-color: var(--openbot-unread-text);
}

.scroll-to-latest[data-new-messages] .scroll-to-latest-dismiss:focus-visible svg {
  outline-color: var(--openbot-unread-text);
}

/* The way back to a reply has a smaller arrow, so the label reads first. */
.scroll-to-latest-button .scroll-to-latest-reply-icon {
  width: 18px;
  height: 18px;
}

.scroll-to-latest-button:active,
.scroll-to-latest-dismiss:active {
  transform: scale(0.96);
}

@media (hover: hover) and (pointer: fine) {
  /* These are shared ghost buttons, whose own hover is written with two `:not()`s and so outweighs
     a plain class. Each rule that has to replace it is matched at the same strength, or its own
     hover paints over the pill and repaints the text for a light background. */
  .scroll-to-latest-button:hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-bg-control-active);
    color: inherit;
  }

  /* The dismiss box itself stays unpainted: its mark is the round one on the icon. */
  .scroll-to-latest-dismiss:hover:not(:disabled):not([data-disabled]) {
    background: none;
    color: inherit;
  }

  .scroll-to-latest-dismiss:hover svg {
    background: var(--openbot-bg-control-active);
  }

  /* The pill has one hover, on the dismiss icon. Its body is a wide target and needs no mark. */
  .scroll-to-latest:is([data-new-messages], [data-reply-return])
  .scroll-to-latest-button:hover:not(:disabled):not([data-disabled]) {
    background: none;
  }

  .scroll-to-latest[data-new-messages] .scroll-to-latest-dismiss:hover svg {
    background: color-mix(in srgb, var(--openbot-unread-text) 18%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-to-latest,
  .scroll-to-latest-button,
  .scroll-to-latest-dismiss,
  .scroll-to-latest-dismiss svg {
    transition: none;
  }

  .scroll-to-latest-button:active,
  .scroll-to-latest-dismiss:active {
    transform: none;
  }
}

.unread-messages-banner {
  position: relative;
  display: flex;
  min-height: 32px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  border-radius: 0 0 var(--openbot-radius-md) var(--openbot-radius-md);
  background: var(--openbot-unread-surface);
  padding: 0 12px;
  color: var(--openbot-unread-text);
  font-size: var(--openbot-text-sm);
  font-weight: 620;
  line-height: 16px;
  transition: background-color var(--openbot-duration-hover) var(--openbot-ease-out);
}

.unread-messages-banner button {
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  color: inherit;
}

.unread-messages-jump {
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0 12px;
  font-size: var(--openbot-text-sm);
  font-weight: 620;
  line-height: 16px;
  text-align: left;
}

.unread-messages-mark-read {
  position: relative;
  z-index: 1;
  margin-left: auto;
  padding: 0;
  font-size: var(--openbot-text-sm);
  font-weight: 680;
  line-height: 14px;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: transform var(--openbot-duration-fast) cubic-bezier(0.23, 1, 0.32, 1);
}

.unread-messages-mark-read-label {
  display: inline-flex;
  align-items: center;
  border-radius: var(--openbot-radius-sm);
  padding: 3px 5px;
  transition: background-color var(--openbot-duration-hover) var(--openbot-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .unread-messages-banner:hover {
    background-color: color-mix(in srgb, var(--openbot-unread-surface) 88%, var(--openbot-unread-text));
  }

  .unread-messages-banner .ui-button:hover:not(:disabled):not([data-disabled]) {
    background: transparent;
    color: var(--openbot-unread-text);
  }

  .unread-messages-banner
    .unread-messages-mark-read:hover:not(:disabled):not([data-disabled])
    .unread-messages-mark-read-label {
    background: color-mix(in srgb, var(--openbot-unread-text) 12%, transparent);
  }
}

.unread-messages-banner button:focus-visible {
  outline: 2px solid var(--openbot-unread-text);
  outline-offset: 1px;
}

.unread-messages-mark-read:active:not(:disabled) {
  transform: scale(0.97);
}

.unread-messages-banner button:disabled {
  opacity: 0.55;
}

.unread-messages-divider {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  margin: var(--openbot-space-1) 0 var(--openbot-space-2);
  color: var(--openbot-unread-surface);
  font-size: var(--openbot-text-sm);
  font-weight: 720;
  letter-spacing: 0.08em;
  line-height: 12px;
}

.unread-messages-divider hr {
  width: 100%;
  height: 1px;
  flex: 1;
  border: 0;
  background: var(--openbot-unread-surface);
}

.unread-messages-divider span {
  flex: 0 0 auto;
}

.time-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 656px;
  height: 24px;
  margin: 0 auto;
  padding: 4px 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
  text-align: center;
}
/*
 * Where the reader is in a long chat, on the right edge of the transcript. The public site's reading
 * progress draws the same rail for its articles.
 *
 * One segment per message the reader wrote, as long as the message and the replies under it. The
 * part the reader has passed fills in a muted neutral, and the segment they are in glows at the point
 * they have reached. Pointing at the rail brings in the messages as titles through a blur, over a
 * scrim with no edge.
 *
 * The anchor sticks to the top of the scroll container with the viewport's height, and its negative
 * margin gives that height back, so the transcript under it does not move.
 */
.chat-scroll-rail {
  /* A muted neutral: a colour pulls the eye while the reader reads. */
  --chat-scroll-rail-accent: var(--openbot-text-muted);
  --chat-scroll-rail-track: color-mix(in srgb, var(--openbot-text-primary) 10%, transparent);
  --chat-scroll-rail-glow: color-mix(in srgb, var(--chat-scroll-rail-accent) 60%, transparent);
  --chat-scroll-rail-ease: var(--openbot-ease-out);
  --chat-scroll-rail-duration: var(--openbot-duration-island-content);
  --chat-scroll-rail-quick: var(--openbot-duration-overlay);
  --chat-scroll-rail-blur: 8px;

  position: sticky;
  z-index: 3;
  top: 0;
  pointer-events: none;
}

/* Only the bars take the pointer until the rail opens, so the messages beside it stay selectable.
   The nav reaches into the container's side padding, so the bars stand beside the messages. */
.chat-scroll-rail-nav {
  position: absolute;
  top: 50%;
  right: calc(-1 * var(--chat-scroll-rail-inset, 0px));
  width: min(260px, 70%);
  height: min(64%, 600px);
  display: flex;
  flex-direction: column;
  padding: var(--openbot-space-3) 0;
  transform: translateY(-50%);
}

.chat-scroll-rail-nav:hover,
.chat-scroll-rail-nav:has(:focus-visible) {
  pointer-events: auto;
}

/* A scrim in the transcript colour that blurs the messages under the titles, with no edge of its own.
   It darkens and blurs only where the titles are, so they stay legible over a wide message. Both
   masks fade it out: at the top and bottom, and on the left before the titles start. The blur is set
   only while the rail is open, so a scroll does not filter the transcript under a hidden scrim. */
.chat-scroll-rail-surface {
  position: absolute;
  inset: calc(-1 * var(--openbot-space-8)) 0 calc(-1 * var(--openbot-space-8)) calc(-2 * var(--openbot-space-8));
  background: color-mix(in srgb, var(--openbot-bg-canvas) 80%, transparent);
  mask-image:
    linear-gradient(
      to bottom,
      transparent,
      var(--openbot-text-primary) var(--openbot-space-8),
      var(--openbot-text-primary) calc(100% - var(--openbot-space-8)),
      transparent
    ),
    linear-gradient(to right, transparent, var(--openbot-text-primary) calc(2 * var(--openbot-space-8)));
  mask-composite: intersect;
  opacity: 0;
  transition: opacity var(--openbot-duration-slow) ease;
}

.chat-scroll-rail-eyebrow {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin: 0 0 var(--openbot-space-3);
  padding: 0 var(--openbot-space-4) 0 var(--openbot-space-4);
  color: var(--openbot-text-dim);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity var(--openbot-duration-slow) ease;
}

/* The digits of the current section lift in and sharpen, as in the task list. */
.chat-scroll-rail-count {
  --digit-dur: var(--openbot-duration-overlay);
  --digit-distance: var(--openbot-space-1);
  --digit-blur: var(--openbot-space-0-5);
  --digit-ease: var(--openbot-ease-out);

  color: var(--chat-scroll-rail-accent);
  font-variant-numeric: tabular-nums;
}

/* Each section keeps room for its title. A chat with more sections than the rail holds scrolls the
   track inside the rail, so every section stays in reach; the track keeps the current one in view.
   The reading head scrolls with the list. */
.chat-scroll-rail-track {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.chat-scroll-rail-list {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chat-scroll-rail-item {
  flex-basis: 0;
  min-height: 22px;
  display: flex;
}

.chat-scroll-rail .chat-scroll-rail-link {
  flex: 1;
  min-width: 0;
  height: auto;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  gap: var(--openbot-space-3);
  padding: 0 0 0 var(--openbot-space-4);
  /* The button's border would move the bars out of the side padding. */
  border: 0;
  border-radius: 0;
  color: var(--openbot-text-muted);
  font-weight: inherit;
  text-decoration: none;
  outline: none;
}

.chat-scroll-rail-item[data-state="read"] .chat-scroll-rail-link {
  color: var(--openbot-text-secondary);
}

.chat-scroll-rail-item[data-state="active"] .chat-scroll-rail-link,
.chat-scroll-rail .chat-scroll-rail-link:hover,
.chat-scroll-rail .chat-scroll-rail-link:focus-visible {
  color: var(--openbot-text-primary);
  text-decoration: none;
}

.chat-scroll-rail-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  margin-top: -3px;
  font-size: var(--openbot-text-sm);
  line-height: 18px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0;
  filter: blur(var(--chat-scroll-rail-blur));
  transform: translateX(var(--openbot-space-2));
  transition:
    color var(--openbot-duration-slow) ease,
    opacity var(--openbot-duration-slow) ease,
    filter var(--openbot-duration-slow) ease,
    transform var(--chat-scroll-rail-quick) var(--chat-scroll-rail-ease);
}

.chat-scroll-rail-link:focus-visible .chat-scroll-rail-label {
  text-decoration: underline;
  text-decoration-color: var(--chat-scroll-rail-accent);
  text-underline-offset: 4px;
}

/* A hit area wider than the 2px bar it holds. The bars always take the pointer, so the hit area stays
   inside the container's side padding and does not cover the edge of a message. The bar is 3-9px
   from the edge, inside the 12px padding the narrowest transcript keeps. */
.chat-scroll-rail-bar {
  position: relative;
  width: clamp(12px, var(--chat-scroll-rail-inset, 20px), 20px);
  flex: none;
  padding-bottom: var(--openbot-space-1);
}

.chat-scroll-rail .chat-scroll-rail-bar {
  pointer-events: auto;
}

.chat-scroll-rail-bar::before,
.chat-scroll-rail-fill {
  content: "";
  position: absolute;
  top: 0;
  right: 5px;
  bottom: var(--openbot-space-1);
  width: 2px;
  border-radius: var(--openbot-radius-pill);
  transition:
    width var(--chat-scroll-rail-quick) var(--chat-scroll-rail-ease),
    right var(--chat-scroll-rail-quick) var(--chat-scroll-rail-ease),
    background-color var(--chat-scroll-rail-quick) ease;
}

.chat-scroll-rail-bar::before {
  background: var(--chat-scroll-rail-track);
}

.chat-scroll-rail-fill {
  background: var(--chat-scroll-rail-accent);
  transform: scaleY(var(--chat-scroll-rail-fill, 0));
  transform-origin: top center;
}

.chat-scroll-rail-item[data-state="active"] .chat-scroll-rail-bar::before,
.chat-scroll-rail-item[data-state="active"] .chat-scroll-rail-fill {
  right: 4.5px;
  width: 3px;
}

.chat-scroll-rail-item[data-state="active"] .chat-scroll-rail-fill {
  box-shadow: 0 0 10px var(--chat-scroll-rail-glow);
}

/* The reading head: where the reader is inside the current section. One head for the whole list, so
   it runs from section to section with the place. */
.chat-scroll-rail-head {
  position: absolute;
  top: 0;
  right: 3px;
  width: 6px;
  height: 6px;
  border-radius: var(--openbot-radius-pill);
  background: var(--chat-scroll-rail-accent);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--chat-scroll-rail-accent) 18%, transparent),
    0 0 12px var(--chat-scroll-rail-glow);
  pointer-events: none;
  transform: translateY(
    calc(
      var(--chat-scroll-rail-head-top) +
      (var(--chat-scroll-rail-head-length) - var(--openbot-space-1)) *
      var(--chat-scroll-rail-fill, 0) -
      50%
    )
  );
}

.chat-scroll-rail-nav:hover .chat-scroll-rail-surface,
.chat-scroll-rail-nav:has(:focus-visible) .chat-scroll-rail-surface {
  backdrop-filter: blur(var(--openbot-space-4));
  opacity: 1;
  transition: opacity var(--openbot-duration-overlay) ease;
}

.chat-scroll-rail-nav:hover .chat-scroll-rail-eyebrow,
.chat-scroll-rail-nav:has(:focus-visible) .chat-scroll-rail-eyebrow {
  opacity: 1;
}

/* The titles come in one after another, but a long list does not make the reader wait: the delay
   stops growing after the first twelve. */
.chat-scroll-rail-nav:hover .chat-scroll-rail-label,
.chat-scroll-rail-nav:has(:focus-visible) .chat-scroll-rail-label {
  --chat-scroll-rail-delay: calc(min(var(--chat-scroll-rail-index, 0), 12) * 18ms);

  opacity: 1;
  filter: blur(0);
  transform: none;
  transition:
    color var(--openbot-duration-slow) ease,
    opacity var(--chat-scroll-rail-quick) ease var(--chat-scroll-rail-delay),
    filter var(--chat-scroll-rail-quick) ease var(--chat-scroll-rail-delay),
    transform var(--chat-scroll-rail-duration) var(--chat-scroll-rail-ease) var(--chat-scroll-rail-delay);
}

/* The rules above name their own transitions, which outrank the global reduced-motion rule, so the
   titles would still slide and blur in. */
@media (prefers-reduced-motion: reduce) {
  .chat-scroll-rail .chat-scroll-rail-nav *,
  .chat-scroll-rail .chat-scroll-rail-nav *::before,
  .chat-scroll-rail .chat-scroll-rail-nav *::after,
  .chat-scroll-rail-nav:hover .chat-scroll-rail-surface,
  .chat-scroll-rail-nav:has(:focus-visible) .chat-scroll-rail-surface,
  .chat-scroll-rail-nav:hover .chat-scroll-rail-label,
  .chat-scroll-rail-nav:has(:focus-visible) .chat-scroll-rail-label {
    transition: none;
  }
}
.message-entry {
  max-width: none;
}

.message-entry > .ui-message-content {
  max-width: 100%;
}

/* One row under the bubble, shown on hover, so an action takes one click. */
.message-action-row {
  display: flex;
  min-height: 24px;
  align-items: center;
  gap: var(--openbot-space-1);
  padding-inline: var(--openbot-space-1);
}

/* Keep the face beside the bubble, independent of the author name and footer height. */
.message-entry-with-author {
  display: grid;
  grid-template-columns: calc(var(--openbot-space-6) + var(--openbot-space-1)) minmax(0, 1fr);
  column-gap: var(--openbot-space-2);
  row-gap: var(--openbot-space-1);
}

.message-entry-with-author > .ui-message-content {
  display: contents;
}

.message-entry-with-author .message-shell {
  grid-column: 2;
  grid-row: 2;
}

.message-entry-with-author .message-action-row {
  grid-column: 2;
  grid-row: 3;
}

.message-entry-with-author .ui-message-footer {
  grid-column: 2;
  grid-row: 4;
}

.message-author-avatar {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  overflow: visible;
  border: 0;
  background: transparent;
}

.message-author-avatar .agent-avatar {
  --agent-avatar-optical-offset: -3px;

  width: var(--openbot-space-6);
  height: var(--openbot-space-6);
}

.message-author-avatar-button {
  width: 100%;
  height: 100%;
  padding: 0;
}

.message-author-avatar-button:hover:not(:disabled):not([data-disabled]) {
  background: transparent;
}

/*
 * The empty column under a face. A message that continues a run of messages by one author draws no
 * face, and without this spacer its bubble would step left, off the line the run started on. A chat
 * with one agent draws no faces at all, so it never asks for the column.
 */
.message-author-gutter {
  width: 28px;
  flex: 0 0 28px;
}

.message-author-name {
  grid-column: 2;
  grid-row: 1;
  padding-inline: var(--openbot-space-3);
  min-width: 0;
  color: var(--message-author-color, var(--openbot-text-muted));
  font-weight: var(--openbot-weight-regular);
  /* A long name with no space wraps instead of widening the row. */
  overflow-wrap: anywhere;
}

.message-author-name-button {
  height: auto;
  min-width: 0;
  margin-inline: calc(var(--openbot-space-1-5) * -1);
  padding: 0 var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-md);
  color: inherit;
  font: inherit;
  white-space: normal;
  text-align: start;
}

.message-author-name-button:hover:not(:disabled):not([data-disabled]),
.message-author-name-button:focus-visible {
  background: var(--openbot-hover);
  color: inherit;
}

/*
 * The keyframes alone hide a new row, so a row whose animation is off (reduced motion, which
 * Windows reports while its animation effects are off) still shows.
 */
.message-entry-animated {
  animation: message-in var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1) both;
}

.message-entry-agent {
  width: 100%;
}

.message-shell {
  display: flex;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  gap: 5px;
}

.message-entry-user .message-shell {
  justify-content: flex-end;
}

.message-actions {
  position: relative;
  z-index: 4;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--openbot-duration-hover) ease;
}

.message-time {
  padding-inline: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--openbot-duration-hover) ease;
}

.message-author-name > .message-time {
  padding-inline: 0;
}

.message-entry-user .message-action-row > .message-time {
  order: -1;
}

.message-entry:hover .message-actions,
.message-entry:focus-within .message-actions,
.message-actions-open {
  opacity: 1;
  pointer-events: auto;
}

.message-entry:hover .message-time,
.message-entry:focus-within .message-time,
.message-entry:has(.message-actions-open) .message-time {
  opacity: 1;
}

@media (hover: none), (pointer: coarse) {
  .message-actions,
  .message-time {
    opacity: 1;
    pointer-events: auto;
  }
}

/*
 * Another person in an agent chat stands on the right, so the name ends with the bubble: a wrapped
 * name aligns to the end, and the time, hidden until hover, goes before the name.
 */
.message-entry-user .message-author-name {
  text-align: end;
}

.message-entry-user .message-author-name > .message-time {
  order: -1;
}

/* Their bubble takes a tint of their name colour, so it does not read as the reader's own. */
.ui-bubble.message-bubble-member > .ui-bubble-content {
  background: color-mix(
    in srgb,
    var(--message-author-color, var(--openbot-accent)) 22%,
    var(--openbot-bg-surface-raised)
  );
}

.message-action-button {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  padding: 0;
  color: var(--openbot-text-muted);
  transition:
    background var(--openbot-duration-hover) ease,
    color var(--openbot-duration-hover) ease;
}

.message-action-button:hover,
.message-action-button:focus-visible,
.message-action-button[aria-expanded="true"] {
  background: var(--openbot-border);
  color: var(--openbot-text-secondary);
  outline: none;
}

.message-action-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* No stroke-width: every icon in this row is hand-drawn on a 20-unit grid and carries
   * its own scaled weight from .ui-glyph-20. Setting it here outranks that class and
   * paints them a fifth heavier than the grid they were drawn for. */
}

.message-action-button svg circle:not(:first-child),
.message-action-button svg:has(circle:nth-child(3)) circle {
  fill: currentColor;
  stroke: none;
}

.message-action-popover-anchor {
  position: relative;
  display: grid;
  place-items: center;
}

.reaction-picker-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1px;
}

.reaction-picker-options {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1px;
}

.reaction-picker-more {
  margin-top: 3px;
  border-top: 1px solid var(--openbot-border);
  padding-top: 4px;
}

.reaction-picker-more .reaction-picker-options {
  display: grid;
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.reaction-picker-more .reaction-picker-options [role="menuitemradio"] {
  width: 100%;
  min-width: 0;
}

.reaction-picker-row :is([role="menuitem"], [role="menuitemradio"]) {
  display: grid;
  width: 31px;
  height: 31px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  padding: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-xl);
  line-height: 1;
  transition:
    background var(--openbot-duration-hover) ease,
    transform var(--openbot-duration-hover) ease;
}

.reaction-picker-row :is([role="menuitem"], [role="menuitemradio"]):hover,
.reaction-picker-row :is([role="menuitem"], [role="menuitemradio"]):focus-visible,
.reaction-picker-row :is([role="menuitem"], [role="menuitemradio"])[data-highlighted],
.reaction-picker-row [role="menuitemradio"][aria-checked="true"] {
  background: var(--openbot-border);
  outline: none;
  transform: scale(1.08);
}

.reaction-picker-row .reaction-more-button {
  color: var(--openbot-text-muted);
}

.reaction-more-button svg {
  width: 15px;
  height: 15px;
}

.message-reaction-pill {
  display: flex;
  min-width: 0;
  height: var(--openbot-icon-lg);
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  padding: 0;
  color: inherit;
  font-size: var(--openbot-text-lg);
  line-height: 1;
  transition: background var(--openbot-duration-hover) ease;
}

.message-entry:has(.message-reaction-anchor) > .ui-message-content {
  padding-bottom: var(--openbot-space-3);
}

.message-reaction-anchor .message-reaction-pill {
  gap: 2px;
  margin: 0;
  border-radius: inherit;
}

.ui-bubble-reactions.message-reaction-anchor {
  padding: 2px 6px;
}

.ui-bubble-reactions.message-reaction-anchor:has(> .message-reaction-pill:only-child) {
  width: var(--openbot-control-xs);
  padding-inline: 2px;
}

.ui-bubble-reactions.message-reaction-anchor:has(> .message-reaction-pill:only-child) > .message-reaction-pill {
  width: var(--openbot-icon-lg);
  border-radius: var(--openbot-radius-pill);
}

.message-reaction-anchor .ui-bubble-reaction-overflow {
  padding-right: 6px;
}

.message-reaction-pill:hover {
  background: var(--openbot-hover);
}

.message-reaction-pill-readonly:hover {
  background: transparent;
}

.message-reaction-anchor:has(.message-reaction-pill:focus-visible) {
  box-shadow:
    0 0 0 3px var(--openbot-bg-canvas),
    0 0 0 5px var(--openbot-border-focus);
}

.message-reaction-pill:focus-visible {
  outline: none;
}

.chat-action-entry-animated {
  width: 100%;
  animation: message-in var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1) both;
}

.agent-activity-slot[data-reserved="true"] {
  min-height: 44px;
}

.agent-activity-entry {
  width: 100%;
  display: grid;
  grid-template-rows: 1fr;
  pointer-events: none;
  transition: grid-template-rows var(--openbot-duration-overlay) var(--openbot-ease-out);
}

@starting-style {
  .agent-activity-entry {
    grid-template-rows: 0fr;
  }
}

.agent-activity-entry[data-state="exiting"] {
  grid-template-rows: 0fr;
}

.agent-activity-content {
  min-height: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  padding: 4px 0 8px 8px;
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  transition:
    opacity var(--openbot-duration-overlay) var(--openbot-ease-out),
    filter var(--openbot-duration-overlay) var(--openbot-ease-out),
    transform var(--openbot-duration-overlay) var(--openbot-ease-out);
  will-change: opacity, filter, transform;
}

@starting-style {
  .agent-activity-content {
    opacity: 0;
    filter: blur(2px);
    transform: translateY(4px);
  }
}

.agent-activity-entry[data-state="exiting"] .agent-activity-content {
  opacity: 0;
  filter: blur(2px);
  transform: translateY(2px);
}

.agent-activity-avatar {
  --agent-avatar-optical-offset: -2px;

  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  align-self: center;
  transform: translateY(0) scale(1);
  transition: transform var(--openbot-duration-overlay) var(--openbot-ease-out);
  will-change: transform;
}

@starting-style {
  .agent-activity-avatar {
    transform: translateY(3px) scale(0.96);
  }
}

.agent-activity-entry[data-state="exiting"] .agent-activity-avatar {
  transform: translateY(0) scale(0.98);
}

.agent-activity-label {
  display: -webkit-box;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  background: linear-gradient(
    90deg,
    var(--openbot-text-primary) 0%,
    var(--openbot-text-primary) 30%,
    var(--openbot-text-muted) 45%,
    var(--openbot-text-muted) 55%,
    var(--openbot-text-primary) 70%,
    var(--openbot-text-primary) 100%
  );
  background-size: 300% 100%;
  background-clip: text;
  color: transparent;
  font-size: var(--openbot-text-sm);
  line-height: 20px;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: image-generation-shine 2.25s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
}

.agent-activity-elapsed {
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  line-height: 20px;
}

.chat-action-marker {
  width: min(var(--openbot-chat-marker-width), calc(100% - var(--openbot-space-6)));
  min-height: var(--openbot-chat-marker-height);
  justify-content: center;
  margin: 0 auto;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  letter-spacing: var(--openbot-tracking-normal);
  text-align: center;
}

.chat-action-marker-content {
  max-width: 100%;
  gap: var(--openbot-space-1);
}

.chat-action-marker-summary {
  /* The reveal's own timings. They sit above the `--openbot-duration-*` scale,
     which tops out at an overlay fade: this is a panel of rows that has to read
     as unrolling, and the palette has no token for that. */
  --chat-action-history-open: 340ms;
  /* The shared eases are quint curves: `--openbot-ease-in-out` holds the panel
     almost still for 50ms and then moves 25px in two frames, which reads as a
     lurch in everything below it. This one spreads the distance evenly and
     settles, so the messages under the marker travel at one speed. */
  --chat-action-history-ease: cubic-bezier(0.4, 0, 0.2, 1);
  /* The close is shorter than the open: leaving needs no reading time, and a
     long collapse holds the messages below in motion for no reason. */
  --chat-action-history-close: 200ms;
  /* The close curve decelerates from the first frame. The open's ease holds the
     panel almost still for the first 20ms, which reads as a click the panel did
     not answer, and then drops the box fast. */
  --chat-action-history-close-ease: cubic-bezier(0.32, 0.08, 0.24, 1);
  /* The rows have to stay faintly visible until the box is nearly shut. A
     shorter fade empties the panel at the halfway point and leaves blank space
     closing on its own. */
  --chat-action-history-lift: 170ms;
  /* How much of the box's bottom edge dissolves while it closes. One row's
     worth, so the edge takes a row out at a time. */
  --chat-action-history-fade: 22px;
  --chat-action-history-entry: 260ms;
  /* Each state waits this much longer than the one above it. */
  --chat-action-history-stagger: 60ms;
  display: flex;
  min-width: 0;
  max-width: 100%;
  flex-direction: column;
  align-items: center;
}

.ui-button.chat-action-history-toggle {
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
}

.chat-action-history-toggle svg {
  transition: transform var(--chat-action-history-close) var(--openbot-ease-out);
}

.chat-action-history-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* The panel is a single grid track, so `0fr` to `1fr` animates the list's real
   height with no measured pixel value - the same technique as `.t-acc` in
   transitions.css. The height has to move for the row below to follow it; a
   paint-only reveal leaves the space behind and drops it in one step at the end.
   A `from` or `to` alone leaves the other end on the element's own style, so
   these rules stay the single source of the resting state. */
.chat-action-history-panel {
  display: grid;
  width: 100%;
  grid-template-rows: 1fr;
}

.chat-action-history-panel[data-state="open"] {
  animation: chat-action-history-open var(--chat-action-history-open) var(--chat-action-history-ease);
}

/* The close runs the same track backwards and holds `0fr` until the panel leaves
   the tree, so the messages below travel the whole distance under one curve
   instead of standing still and then closing the gap in a single step. */
.chat-action-history-panel[data-state="closed"] {
  animation: chat-action-history-close var(--chat-action-history-close) var(--chat-action-history-close-ease) forwards;
}

@keyframes chat-action-history-open {
  from {
    grid-template-rows: 0fr;
  }
}

@keyframes chat-action-history-close {
  to {
    grid-template-rows: 0fr;
  }
}

/* On the way in the box grows under rows that are still fading up, so its edge
   never cuts anything solid. */
.chat-action-history-panel[data-state="open"] .chat-action-history {
  animation: chat-action-history-settle var(--chat-action-history-open) var(--openbot-ease-out);
}

/* The rows fade out just before the box finishes closing, so the clip edge never
   cuts through anything solid and the panel is never an empty box shrinking on
   its own. The panel leaves the tree on the collapse's end, not on this one's. */
.chat-action-history-panel[data-state="closed"] .chat-action-history {
  animation: chat-action-history-lift var(--chat-action-history-lift) var(--openbot-ease-out) forwards;
}

/* No fade on the way in: the rows already carry their own, and stacking a second
   one over them washes the whole panel out. */
@keyframes chat-action-history-settle {
  from {
    transform: translateY(-25%);
  }
}

/* The lift stays small on the way out: the collapsing box already carries the
   rows upward, and a longer travel makes them outrun it and arrive early. */
@keyframes chat-action-history-lift {
  to {
    transform: translateY(-8%);
    opacity: 0;
  }
}

/* `min-height: 0` lets the track win over the list's content height, and the
   clip keeps the rows inside the shrinking box. */
.chat-action-history-clip {
  min-height: 0;
  overflow: hidden;
}

/* The closing box passes its edge over rows that are still readable and cuts
   them through the middle of the glyphs. The mask softens that edge, so a row
   dissolves as the edge reaches it instead of being sliced. Below the fade
   distance the whole list is inside the gradient and leaves on its own. The way
   in needs none of this: there the box grows ahead of rows that are still
   arriving. */
.chat-action-history-panel[data-state="closed"] .chat-action-history-clip {
  -webkit-mask-image: linear-gradient(
    to bottom,
    var(--openbot-text-primary) calc(100% - var(--chat-action-history-fade)),
    transparent
  );
  mask-image: linear-gradient(
    to bottom,
    var(--openbot-text-primary) calc(100% - var(--chat-action-history-fade)),
    transparent
  );
}

.chat-action-history {
  box-sizing: border-box;
  display: grid;
  width: 100%;
  gap: var(--openbot-space-1);
  margin: var(--openbot-space-1) 0 0;
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  border-inline-start: 1px solid var(--openbot-border-grouped);
  list-style: none;
  text-align: left;
}

.chat-action-history-entry {
  display: grid;
  grid-template-columns: var(--openbot-icon-xs) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-1-5);
  color: var(--openbot-text-secondary);
}

/* `backwards` holds the entry hidden through its delay, so a late state never
   shows at full strength before its turn. The exit leaves the rows alone: the
   list fades as one piece. */
.chat-action-history-panel[data-state="open"] .chat-action-history-entry {
  animation: chat-action-history-entry-in var(--chat-action-history-entry) var(--openbot-ease-out) backwards;
}

.chat-action-history-panel[data-state="open"] .chat-action-history-entry:nth-child(2) {
  animation-delay: var(--chat-action-history-stagger);
}

.chat-action-history-panel[data-state="open"] .chat-action-history-entry:nth-child(3) {
  animation-delay: calc(var(--chat-action-history-stagger) * 2);
}

/* The stagger stops growing here: a long run should not open in slow motion. */
.chat-action-history-panel[data-state="open"] .chat-action-history-entry:nth-child(n + 4) {
  animation-delay: calc(var(--chat-action-history-stagger) * 3);
}

@keyframes chat-action-history-entry-in {
  from {
    transform: translateX(calc(var(--openbot-space-1) * -1));
    opacity: 0;
    filter: blur(2px);
  }
}

.chat-action-history-entry time {
  color: var(--openbot-text-muted);
  white-space: nowrap;
}

.chat-action-history-icon,
.chat-action-history-icon svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}

.chat-action-history-status-completed .chat-action-history-icon {
  color: var(--openbot-success);
}

.chat-action-history-status-failed .chat-action-history-icon,
.chat-action-history-status-interrupted .chat-action-history-icon,
.chat-action-history-status-cancelled .chat-action-history-icon {
  color: var(--openbot-danger);
}

.chat-action-history-status-needs-attention .chat-action-history-icon {
  color: var(--openbot-warning);
}

.chat-action-history-status-in-progress .chat-action-history-icon {
  color: var(--openbot-accent);
}

@media (prefers-reduced-motion: reduce) {
  .chat-action-history-panel,
  .chat-action-history,
  .chat-action-history-entry {
    animation: none;
  }

  .chat-action-history-toggle svg {
    transition: none;
  }
}

.chat-action-marker-label,
.chat-action-marker-time {
  flex: 0 0 auto;
  white-space: nowrap;
}

.chat-action-marker-time {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

.chat-action-target {
  box-sizing: border-box;
  display: inline-flex;
  min-width: 0;
  max-width: min(280px, 100%);
  height: auto;
  min-height: var(--openbot-chat-marker-height);
  flex: 0 1 auto;
  align-items: center;
  gap: var(--openbot-space-1);
  border: 0;
  border-radius: var(--openbot-radius-pill);
  background: transparent;
  padding: 0 var(--openbot-space-1-5);
  color: var(--openbot-text-secondary);
  font: inherit;
  line-height: inherit;
  outline: none;
  text-align: left;
  white-space: nowrap;
  transition:
    background-color var(--openbot-duration-hover) var(--openbot-ease-out),
    box-shadow var(--openbot-duration-hover) var(--openbot-ease-out),
    color var(--openbot-duration-hover) var(--openbot-ease-out),
    scale var(--openbot-duration-fast) var(--openbot-ease-out);
}

button.chat-action-target:hover,
.chat-action-agent-menu-trigger:hover,
.chat-action-agent-menu-trigger[aria-expanded="true"] {
  background: var(--openbot-bg-control-hover);
  box-shadow: 0 0 0 1px var(--openbot-border-strong);
  color: var(--openbot-text-primary);
}

button.chat-action-target:focus-visible,
.chat-action-agent-menu-trigger:focus-visible {
  background: var(--openbot-bg-control-hover);
  box-shadow: var(--openbot-focus-ring);
  color: var(--openbot-text-primary);
}

button.chat-action-target:active,
.chat-action-agent-menu-trigger:active {
  background: var(--openbot-bg-control-active);
  scale: 0.96;
}

.chat-action-target-unavailable {
  color: var(--openbot-text-muted);
}

/* Markers without a target pill keep the same optical label-to-time rhythm. */
.chat-action-marker-unavailable .chat-action-marker-label,
.chat-action-marker-context-reset .chat-action-marker-label,
.chat-action-marker-model-switch .chat-action-marker-label {
  padding-inline-end: var(--openbot-space-1-5);
}

.chat-action-target-name,
.chat-action-target > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-action-target .ui-marker-icon,
.chat-action-target .ui-marker-icon svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: 0 0 var(--openbot-icon-xs);
}

.chat-action-target .ui-marker-icon {
  translate: 0 -0.5px;
}

.chat-action-agent-avatar {
  --agent-avatar-optical-offset: -2px;

  position: relative;
  width: var(--openbot-chat-marker-avatar);
  height: var(--openbot-chat-marker-avatar);
  flex: 0 0 var(--openbot-chat-marker-avatar);
  border: 0;
  background: transparent;
  translate: 0 -0.5px;
}

.chat-action-marker-agent-message .chat-action-target {
  --chat-action-agent-color: var(--openbot-accent);
}

.chat-action-marker-agent-message button.chat-action-target:hover,
.chat-action-marker-agent-message .chat-action-agent-menu-trigger:hover,
.chat-action-marker-agent-message .chat-action-agent-menu-trigger[aria-expanded="true"] {
  background: color-mix(in srgb, var(--chat-action-agent-color) 16%, transparent);
  box-shadow: none;
  color: var(--chat-action-agent-color);
}

.chat-action-marker-agent-message button.chat-action-target:focus-visible,
.chat-action-marker-agent-message .chat-action-agent-menu-trigger:focus-visible {
  background: color-mix(in srgb, var(--chat-action-agent-color) 16%, transparent);
  box-shadow: var(--openbot-focus-ring);
  color: var(--chat-action-agent-color);
}

.chat-action-marker-agent-message button.chat-action-target:active,
.chat-action-marker-agent-message .chat-action-agent-menu-trigger:active {
  background: color-mix(in srgb, var(--chat-action-agent-color) 34%, transparent);
  color: var(--openbot-text-primary);
}

.chat-action-target-status-in-progress .ui-marker-icon {
  color: var(--openbot-accent);
}

.chat-action-target-status-completed .ui-marker-icon {
  color: var(--openbot-success);
}

.chat-action-target-status-failed .ui-marker-icon,
.chat-action-target-status-cancelled .ui-marker-icon,
.chat-action-target-status-interrupted .ui-marker-icon {
  color: var(--openbot-danger);
}

.chat-action-target-status-needs-attention .ui-marker-icon {
  color: var(--openbot-warning);
}

.chat-action-target-status-in-progress .ui-marker-icon svg {
  animation: ui-spin 1s linear infinite;
}

.chat-action-avatar-stack {
  display: inline-flex;
  min-width: 0;
  height: var(--openbot-chat-marker-avatar);
  align-items: center;
}

.chat-action-avatar-stack .chat-action-agent-avatar + .chat-action-agent-avatar {
  margin-left: -6px;
}

/* An open group lists each message as its own marker, centred like the row that holds them. */
.chat-action-group-list {
  padding-inline: 0;
  border-inline-start: 0;
  text-align: center;
}

/* Only the group's own rows: a routine run in an open group keeps the layout of its own history. */
.chat-action-group-list > .chat-action-history-entry {
  display: block;
}

.chat-action-group-list .chat-action-marker {
  width: 100%;
}

/* A group of routine runs reads "routine · 3 runs · 17:15–18:45". In a narrow chat the count, the
   time and the toggle move together to a second line, so the routine keeps its whole name. The dots
   are decoration only. */
.chat-action-marker-routine-run-group > .chat-action-marker-summary > .chat-action-marker-content {
  flex-wrap: wrap;
  justify-content: center;
}

.chat-action-run-group-details {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--openbot-space-1);
}

.chat-action-run-group-count::before,
.chat-action-run-group-time::before {
  content: "·" / "";
  margin-inline-end: var(--openbot-space-1);
}

/* The shared .ui-action-menu item rule outranks a single class, so the grid template and the
 * truncation below have to be compounded to reach the row. */
.ui-action-menu.chat-action-agent-menu {
  min-width: 220px;
  max-width: min(320px, calc(100vw - var(--openbot-space-4)));
}

.ui-action-menu.chat-action-agent-menu .chat-action-agent-menu-item[role="menuitem"] {
  display: grid;
  align-items: center;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: var(--openbot-space-2);
}

.chat-action-agent-menu-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-action-agent-menu-item .chat-action-agent-avatar {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
}

.chat-action-agent-menu-status {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  white-space: nowrap;
}

/* The files of an update sit at the start edge, where an agent's own files sit. */
.chat-action-attachments {
  margin-top: var(--openbot-space-2);
}

.chat-row-unavailable {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .chat-action-target-status-in-progress .ui-marker-icon svg {
    animation: none;
  }
}

.message-entry .ui-bubble {
  letter-spacing: -0.15px;
}

.message-entry-agent .ui-bubble {
  max-width: min(720px, 100%);
}

.message-entry-agent .ui-bubble:has(.choice-card) {
  width: min(500px, 100%);
  max-width: min(500px, 100%);
}

.message-entry-agent .ui-bubble:has(.image-generation) {
  width: min(420px, 100%);
  max-width: min(420px, 100%);
}

.message-entry-agent .ui-bubble:has(.image-gallery) {
  width: min(520px, 100%);
  max-width: min(520px, 100%);
}

.message-entry-agent
  .ui-bubble-variant-ghost:has(
    :is(.choice-card, .image-generation, .image-gallery, .message-code-block, .message-data-table-scroll)
  )
  > .ui-bubble-content {
  width: 100%;
}

.image-generation {
  display: grid;
  min-width: 0;
  justify-items: start;
  gap: 14px;
}

.message-image-attachments {
  display: grid;
  min-width: 0;
  gap: 10px;
}

.image-generation-stage {
  position: relative;
  width: min(100%, 420px);
  overflow: hidden;
  aspect-ratio: var(--image-generation-ratio);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  isolation: isolate;
}

.image-generation-canvas,
.image-generation-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.image-generation-canvas {
  overflow: hidden;
  background: var(--openbot-bg-control);
  opacity: 1;
  transition: opacity var(--openbot-duration-overlay) ease;
}

.image-generation-canvas-failed {
  display: grid;
  place-items: center;
}

.image-generation-ready .image-generation-canvas {
  opacity: 0;
}

/* The canvas above rests at `opacity: 0` once the image arrives, but the glow
 * inside it keeps two infinite keyframes on `mask-size` and `mask-position`,
 * and the compositor can take neither. One finished image in the history
 * therefore costs a style recalculation and a repaint every frame for as long
 * as the conversation is open. A profile of an idle window measured 60 style
 * recalculations a second with no script running at all. The reduced-motion
 * block at the end of this file already stops these keyframes for the same
 * element, so this only makes the finished state agree with it. */
.image-generation-ready .image-generation-glow {
  animation: none;
}

.image-generation-dots {
  position: absolute;
  inset: 2px;
  background-image: radial-gradient(circle, var(--openbot-text-muted) 0.7px, transparent 1.3px);
  background-repeat: space;
  background-size: 11px 11px;
  opacity: 0.22;
}

.image-generation-failure-mark {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 2px solid var(--openbot-danger);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-danger-soft);
  box-shadow: 0 0 0 5px var(--openbot-danger-soft);
  color: var(--openbot-danger);
}

/* Was a 40px U+00D7 sized off a type token, which is why the scale carried a step no
 * copy in the app used. */
.image-generation-failure-mark > svg {
  width: var(--openbot-control-xl);
  height: var(--openbot-control-xl);
  stroke-width: var(--openbot-icon-stroke);
}

.image-generation-glow {
  position: absolute;
  inset: 2px;
  background-image: radial-gradient(circle, var(--openbot-text-primary) 1.1px, transparent 1.6px);
  background-repeat: space;
  background-size: 11px 11px;
  -webkit-mask-image:
    radial-gradient(ellipse at center, var(--openbot-text-primary) 0%, transparent 60%),
    radial-gradient(ellipse at center, var(--openbot-text-primary) 0%, transparent 62%);
  mask-image:
    radial-gradient(ellipse at center, var(--openbot-text-primary) 0%, transparent 60%),
    radial-gradient(ellipse at center, var(--openbot-text-primary) 0%, transparent 62%);
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-size:
    72% 62%,
    52% 52%;
  mask-size:
    72% 62%,
    52% 52%;
  -webkit-mask-position:
    16% 20%,
    30% 32%;
  mask-position:
    16% 20%,
    30% 32%;
  animation:
    image-generation-morph 4.2s cubic-bezier(0.35, 1.55, 0.65, 1) infinite,
    image-generation-breathe 1.9s cubic-bezier(0.66, 0, 0.34, 1) infinite;
}

.image-generation-resolution {
  position: absolute;
  z-index: 1;
  top: 8px;
  right: 8px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface);
  padding: 2px 7px;
  color: var(--openbot-text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--openbot-text-sm);
  white-space: nowrap;
}

.image-generation-meta {
  display: flex;
  width: min(100%, 420px);
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
}

.image-generation-label {
  background: linear-gradient(
    90deg,
    var(--openbot-text-primary) 0%,
    var(--openbot-text-primary) 30%,
    var(--openbot-text-muted) 45%,
    var(--openbot-text-muted) 55%,
    var(--openbot-text-primary) 70%,
    var(--openbot-text-primary) 100%
  );
  background-size: 300% 100%;
  background-clip: text;
  color: transparent;
  font-size: var(--openbot-text-lg);
  font-weight: 550;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* The shimmer says "still working", so it stops once the image has arrived or
   failed. Left unscoped it also ran on "Image generation failed" and on plain
   attached images, and it animates `background-position` under
   `background-clip: text` - a main-thread text repaint per frame that no
   compositor can take - once per image message, for the life of the thread. */
.image-generation:not(.image-generation-ready, .image-generation-failed) .image-generation-label {
  animation: image-generation-shine 2.25s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
}

.image-generation-prompt {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-generation-error {
  max-width: 100%;
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
  line-height: 17px;
}

.image-generation-preview {
  display: block;
  border: 0;
  background: var(--openbot-bg-control);
  cursor: pointer;
  opacity: 0;
  padding: 0;
  transition: opacity var(--openbot-duration-overlay) ease;
}

.image-generation-preview-visible {
  opacity: 1;
}

.image-generation-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.image-generation-preview:focus-visible,
.image-generation-hover-download:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}

.image-generation-hover-download {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  right: 10px;
  bottom: 10px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-glass);
  padding: 5px 10px;
  color: var(--openbot-text-primary);
  cursor: pointer;
  backdrop-filter: blur(12px) saturate(1.15);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  font-size: var(--openbot-text-sm);
  font-weight: 650;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition:
    background-color var(--openbot-duration-hover) ease,
    color var(--openbot-duration-hover) ease,
    border-color var(--openbot-duration-hover) ease,
    opacity var(--openbot-duration-hover) ease,
    transform var(--openbot-duration-hover) ease;
}

.image-generation-download-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.image-generation-stage:hover .image-generation-hover-download,
.image-generation-stage:focus-within .image-generation-hover-download {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.image-generation-hover-download:hover {
  border-color: var(--openbot-border-focus);
  background: var(--openbot-bg-glass);
  color: var(--openbot-text-primary);
}

@keyframes image-generation-morph {
  0% {
    -webkit-mask-size:
      52% 46%,
      40% 40%;
    mask-size:
      52% 46%,
      40% 40%;
    -webkit-mask-position:
      16% 20%,
      30% 32%;
    mask-position:
      16% 20%,
      30% 32%;
  }
  25% {
    -webkit-mask-size:
      46% 58%,
      44% 38%;
    mask-size:
      46% 58%,
      44% 38%;
    -webkit-mask-position:
      84% 16%,
      66% 30%;
    mask-position:
      84% 16%,
      66% 30%;
  }
  50% {
    -webkit-mask-size:
      60% 44%,
      38% 46%;
    mask-size:
      60% 44%,
      38% 46%;
    -webkit-mask-position:
      82% 84%,
      62% 68%;
    mask-position:
      82% 84%,
      62% 68%;
  }
  75% {
    -webkit-mask-size:
      48% 54%,
      46% 40%;
    mask-size:
      48% 54%,
      46% 40%;
    -webkit-mask-position:
      14% 82%,
      34% 66%;
    mask-position:
      14% 82%,
      34% 66%;
  }
  100% {
    -webkit-mask-size:
      52% 46%,
      40% 40%;
    mask-size:
      52% 46%,
      40% 40%;
    -webkit-mask-position:
      16% 20%,
      30% 32%;
    mask-position:
      16% 20%,
      30% 32%;
  }
}

@keyframes image-generation-breathe {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

@keyframes image-generation-shine {
  0%,
  18% {
    background-position: 100% 0;
  }
  82%,
  100% {
    background-position: 0% 0;
  }
}

/* A message the host has not stored yet. It reads as the user's own, a step quieter, until it is. */
.message-entry-pending .message-shell {
  opacity: 0.7;
}

.pending-send-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--openbot-space-1);
}

.pending-send-status[data-state="failed"] .pending-send-label {
  color: var(--openbot-danger-text);
}

.pending-send-error {
  margin-inline-start: var(--openbot-space-2);
  overflow-wrap: anywhere;
}
.message-entry-user .ui-bubble {
  max-width: min(420px, 100%);
}

.message-copy {
  margin: 0;
  font-size: var(--openbot-text-lg);
  line-height: 20px;
  overflow-wrap: anywhere;
  white-space: pre-line;
  user-select: text;
}

.message-markdown {
  white-space: normal;
}

.message-markdown > *,
.message-markdown :is(p, ul, ol, blockquote) {
  margin: 0;
}

.message-markdown > :not(:first-child) {
  margin-top: var(--openbot-space-3);
}

.message-markdown-heading {
  margin: 0;
  color: inherit;
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: var(--openbot-tracking-tight);
}

.message-markdown-heading[data-level="1"] {
  font-size: var(--openbot-text-2xl);
  line-height: var(--openbot-leading-2xl);
}

.message-markdown-heading[data-level="2"] {
  font-size: var(--openbot-text-xl);
  line-height: var(--openbot-leading-xl);
}

.message-markdown-heading:is([data-level="3"], [data-level="4"], [data-level="5"], [data-level="6"]) {
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}

.message-markdown strong {
  font-weight: var(--openbot-weight-semibold);
}

.message-markdown del {
  color: var(--openbot-text-secondary);
}

.message-markdown :is(ul, ol) {
  padding-left: var(--openbot-space-6);
}

.message-markdown ul {
  list-style: disc;
}

.message-markdown ul ul {
  list-style: circle;
}

.message-markdown ol {
  list-style: decimal;
}

.message-markdown li + li,
.message-markdown li > :is(ul, ol) {
  margin-top: var(--openbot-space-1);
}

.message-markdown-task {
  display: flex;
  align-items: flex-start;
  gap: var(--openbot-space-1-5);
  list-style: none;
}

.message-markdown-checkbox {
  margin-top: var(--openbot-space-1);
  opacity: 1;
}

.message-markdown blockquote {
  border-left: var(--openbot-space-0-5) solid var(--openbot-border-strong);
  padding-left: var(--openbot-space-3);
  color: var(--openbot-text-secondary);
}

.message-markdown blockquote > :not(:first-child) {
  margin-top: var(--openbot-space-2);
}

.message-markdown :not(pre) > code {
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-0-5) var(--openbot-space-1);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-md);
  white-space: break-spaces;
}

.message-markdown hr {
  height: 1px;
  border: 0;
  background: var(--openbot-border-strong);
}

.message-markdown-raw-html {
  display: block;
  color: var(--openbot-text-secondary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-md);
  white-space: pre-wrap;
}

.message-markdown-image {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 360px;
  border-radius: var(--openbot-radius-md);
  object-fit: contain;
}

/* The image opens in the image viewer. The button keeps the image's own size. */
.message-markdown-image-button {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  padding: 0;
  border-radius: var(--openbot-radius-md);
  cursor: zoom-in;
}

.message-markdown-image-button:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}

.message-markdown-table-scroll {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  border-radius: var(--openbot-radius-md);
  box-shadow: 0 0 0 1px var(--openbot-data-table-ring);
}

.message-markdown-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--openbot-bg-canvas);
  color: var(--openbot-data-table-text);
}

.message-markdown-table :is(th, td) {
  border-right: 1px solid var(--openbot-data-table-border);
  border-bottom: 1px solid var(--openbot-data-table-border);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  overflow-wrap: break-word;
  text-align: left;
  vertical-align: top;
}

.message-markdown-table th {
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-data-table-header-text);
  font-weight: var(--openbot-weight-medium);
}

.message-markdown-table :is(th, td):last-child {
  border-right: 0;
}

.message-markdown-table tbody tr:last-child td {
  border-bottom: 0;
}

.message-markdown-table [data-align="center"] {
  text-align: center;
}

.message-markdown-table [data-align="right"] {
  text-align: right;
}

::highlight(openbot-message-selection) {
  background: var(--openbot-accent-strong);
  color: inherit;
}

/* The passage that a quote points to, after a click on the quote. */
::highlight(openbot-quote-target) {
  background: var(--openbot-warning);
  color: var(--openbot-text-on-light);
}

.selection-highlight-layer {
  position: fixed;
  z-index: 18;
  inset: 0;
  pointer-events: none;
}

.selection-highlight-layer span {
  position: fixed;
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-accent-strong);
}

.selection-actions-layer {
  position: fixed;
  z-index: 25;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px) scale(0.97);
  transform-origin: 50% 0;
  transition:
    opacity var(--openbot-duration-slow) ease-out,
    transform var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1);
  will-change: top, left, transform;
}

.selection-actions-layer[data-placement="top"] {
  transform-origin: 50% 100%;
}

.selection-actions-layer[data-ready="true"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.selection-actions-bar {
  display: flex;
  max-width: calc(100vw - 24px);
  height: 36px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface-raised);
  padding: 4px;
  box-shadow:
    0 14px 34px var(--openbot-shadow-popover-ambient),
    0 3px 10px var(--openbot-shadow-popover-ambient),
    inset 0 0 0 1px var(--openbot-shadow-ring);
  color: var(--openbot-text-primary);
  transition: width var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1);
}

.selection-actions-content,
.selection-actions-presets,
.selection-actions-more-presets {
  display: flex;
  width: max-content;
  min-width: 0;
  align-items: center;
}

.selection-actions-content {
  height: 28px;
  flex: 0 0 auto;
  gap: 2px;
}

.selection-actions-form-shell {
  display: flex;
  min-width: 0;
  align-items: center;
  overflow: hidden;
  opacity: 1;
  transform: translateX(0);
  transition:
    max-width var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1),
    opacity var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1),
    transform var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1);
}

.selection-actions-form-shell-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-8px);
}

.selection-actions-form {
  display: flex;
  height: 28px;
  flex: 0 0 auto;
  align-items: center;
  overflow: hidden;
  transition: width var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1);
}

.selection-actions-form input {
  width: 100%;
  height: 28px;
  border: 0;
  background: transparent;
  padding: 0 10px 0 11px;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: 400;
  line-height: 28px;
  outline: 0;
}

.selection-actions-form input::placeholder {
  color: var(--openbot-text-muted);
}

.selection-actions-form input:focus-visible {
  outline: 0;
}

.selection-actions-presets {
  max-width: 224px;
  gap: 2px;
  overflow: hidden;
  opacity: 1;
  transform: translateX(0);
  transition:
    max-width var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1),
    opacity var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1),
    transform var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1);
}

.selection-actions-presets-hidden {
  max-width: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-8px);
}

.selection-actions-more-presets {
  max-width: 0;
  gap: 2px;
  margin-left: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-width var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1),
    opacity var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1),
    margin-left var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1);
}

.selection-actions-presets-expanded .selection-actions-more-presets {
  max-width: 262px;
  margin-left: 2px;
  opacity: 1;
}

.selection-actions-send-shell {
  display: flex;
  min-width: 0;
  max-width: 0;
  align-items: center;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.88);
  transition:
    max-width var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1),
    opacity var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1),
    transform var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1);
}

.selection-actions-send-shell-visible {
  max-width: 30px;
  opacity: 1;
  transform: scale(1);
}

.selection-actions-control,
.selection-actions-icon-button,
.selection-actions-send {
  display: inline-flex;
  height: 28px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  padding: 0;
  transition:
    background-color var(--openbot-duration-hover) ease,
    border-color var(--openbot-duration-hover) ease,
    box-shadow var(--openbot-duration-hover) ease,
    color var(--openbot-duration-hover) ease,
    opacity var(--openbot-duration-hover) ease,
    transform var(--openbot-duration-normal) ease;
}

.selection-actions-control {
  gap: 4px;
  border: 1px solid transparent;
  background: transparent;
  padding: 0 9px;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: 430;
  white-space: nowrap;
}

.selection-actions-icon-button,
.selection-actions-send {
  width: 28px;
}

.selection-actions-kbd {
  height: 18px;
  margin-left: 2px;
  font-size: var(--openbot-text-xs);
}

.selection-actions-icon-button {
  background: transparent;
  color: var(--openbot-text-secondary);
}

.selection-actions-send {
  background: var(--openbot-text-primary);
  color: var(--openbot-bg-canvas);
}

.selection-actions-control:active,
.selection-actions-icon-button:active,
.selection-actions-send:active {
  transform: scale(0.94);
}

.selection-actions-divider {
  width: 1px;
  height: 16px;
  flex: 0 0 auto;
  margin: 0 3px;
  background: var(--openbot-border-strong);
}

.selection-actions-more-divider {
  margin-left: 1px;
}

.selection-actions-expand svg {
  transition: transform var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1);
}

.selection-actions-expand[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.selection-actions-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.selection-actions-status,
.selection-actions-error {
  display: inline-flex;
  height: 28px;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  font-size: var(--openbot-text-sm);
  white-space: nowrap;
}

.selection-actions-status {
  color: var(--openbot-text-secondary);
}

.selection-actions-error {
  color: var(--openbot-danger);
}

.selection-actions-spinner {
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--openbot-border-strong);
  border-top-color: var(--openbot-text-secondary);
  border-radius: var(--openbot-radius-pill);
  animation: selection-actions-spin 700ms linear infinite;
}

.message-selection-quote {
  max-width: 100%;
  max-height: 124px;
  overflow: auto;
  margin: 0;
  border-left: 2px solid var(--openbot-accent);
  border-radius: 0 var(--openbot-radius-sm) var(--openbot-radius-sm) 0;
  background: var(--openbot-bg-control);
  padding: 6px 8px;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: 17px;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

@media (hover: hover) and (pointer: fine) {
  .selection-actions-control:hover {
    border-color: var(--openbot-border-focus);
    background: var(--openbot-accent-strong);
    box-shadow: 0 0 0 1px var(--openbot-accent-soft);
    color: var(--openbot-text-primary);
  }

  .selection-actions-icon-button:hover {
    background: var(--openbot-bg-control-hover);
    color: var(--openbot-text-primary);
  }

  .selection-actions-send:hover {
    opacity: 0.9;
  }
}

@media (max-width: 480px) {
  .selection-actions-control {
    width: 28px;
    padding: 0;
  }

  .selection-actions-kbd {
    display: none;
  }

  .selection-actions-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .selection-actions-presets-expanded .selection-actions-more-presets {
    max-width: 88px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .selection-actions-layer,
  .selection-actions-bar,
  .selection-actions-form,
  .selection-actions-form-shell,
  .selection-actions-presets,
  .selection-actions-more-presets,
  .selection-actions-send-shell,
  .selection-actions-expand svg {
    transition: none;
  }

  .selection-actions-spinner {
    animation-duration: 1.4s;
  }
}

@keyframes selection-actions-spin {
  to {
    transform: rotate(360deg);
  }
}

/* One column as wide as the bubble. The implicit `auto` column grew to the content's min-content
   width, and a file chip's percentage cap does not count there, so a long path made the text run
   past the bubble and the chat ask for a column wider than the window. */
.message-content-blocks {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: 10px;
}

.message-content-resize {
  min-width: 0;
}

.message-content-resize[data-resizing="true"],
.agent-queue-panel-resize[data-resizing="true"] {
  overflow: hidden;
  will-change: height;
}

/* Opacity only: a blur filter on text repaints every fading word on each frame. */
.t-stream-w {
  animation: t-stream-in var(--stream-fade) var(--stream-ease) both;
}

@keyframes t-stream-in {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .t-stream-w {
    animation: none;
  }
}

.message-entry-agent .ui-bubble:has(:is(.message-data-table-scroll, .message-code-block)) {
  width: min(720px, 100%);
  max-width: min(720px, 100%);
}

.message-entry-agent .ui-bubble:has(.message-data-table-scroll) > .ui-bubble-content {
  width: 100%;
}

.message-entry-agent .message-shell:has(.message-data-table-scroll) {
  align-items: flex-end;
}

.message-code-block {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
}

.message-code-header {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  border-bottom: 1px solid var(--openbot-border);
  background: var(--openbot-bg-control);
  padding: 4px 6px 4px 10px;
}

.message-code-heading {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.message-code-filename {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-code-language {
  flex: none;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-border);
  padding: 1px 6px;
  color: var(--openbot-text-readable);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: 16px;
}

.message-code-language:only-child {
  font-family: var(--openbot-font-mono);
}

:where(.ui-button).message-code-copy {
  position: relative;
  height: 26px;
  flex: none;
  gap: var(--openbot-space-1);
  border-radius: var(--openbot-radius-sm);
  padding-inline: 7px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
}

@media (hover: hover) and (pointer: fine) {
  :where(.ui-button).message-code-copy:hover:not(:disabled) {
    background: var(--openbot-bg-control-active);
    box-shadow: 0 0 0 1px var(--openbot-border-strong);
    color: var(--openbot-text-primary);
  }
}

:where(.ui-button).message-code-copy:active:not(:disabled) {
  transform: scale(0.96);
}

:where(.ui-button).message-code-copy::after {
  position: absolute;
  width: 40px;
  height: 40px;
  content: "";
}

.message-code-copy-icons {
  position: relative;
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  display: grid;
  place-items: center;
}

.message-code-copy-icons > span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  filter: blur(4px);
  scale: 0.25;
  transition:
    opacity var(--openbot-duration-slow) var(--openbot-ease-out),
    filter var(--openbot-duration-slow) var(--openbot-ease-out),
    scale var(--openbot-duration-slow) var(--openbot-ease-out);
}

.message-code-copy-icons > span[data-visible="true"] {
  opacity: 1;
  filter: blur(0);
  scale: 1;
}

.message-code-copy-icons svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}

.message-code-scroll {
  width: 100%;
  max-height: 420px;
  overflow: auto;
  margin: 0;
  background: var(--openbot-bg-sidebar);
  padding-block: 8px 10px;
  color: var(--openbot-text-secondary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  line-height: 19px;
  /* Only the inline axis: Chromium stops a vertical wheel at a contained block even when the block
     cannot scroll, so the chat would not scroll under the pointer. */
  overscroll-behavior-x: contain;
  tab-size: 2;
}

.message-code-scroll:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: -2px;
}

.message-code-scroll > code {
  min-width: 100%;
  width: max-content;
  display: block;
  font: inherit;
}

.message-code-line {
  min-height: 19px;
  display: flex;
}

.message-code-line-number {
  width: 40px;
  flex: none;
  padding-right: 8px;
  color: var(--openbot-text-dim);
  font-size: var(--openbot-text-sm);
  text-align: right;
  user-select: none;
}

.message-code-line-source {
  min-width: 0;
  padding-right: 12px;
  white-space: pre;
}

.message-code-caret {
  width: 2px;
  height: 13px;
  display: inline-block;
  margin-left: 2px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
  transform: translateY(2px);
}

[data-code-token="cmnt"] {
  color: var(--openbot-text-dim);
  font-style: italic;
}

[data-code-token="kwd"],
[data-code-token="section"] {
  color: var(--openbot-accent-text);
}

[data-code-token="str"],
[data-code-token="insert"] {
  color: var(--openbot-success);
}

[data-code-token="num"],
[data-code-token="bool"],
[data-code-token="class"] {
  color: var(--openbot-warning);
}

[data-code-token="func"],
[data-code-token="type"] {
  color: var(--openbot-text-primary);
}

[data-code-token="oper"],
[data-code-token="esc"] {
  color: var(--openbot-text-muted);
}

[data-code-token="err"],
[data-code-token="deleted"] {
  color: var(--openbot-danger);
}

@media (prefers-reduced-motion: reduce) {
  .message-code-copy-icons > span {
    transition: none;
  }
}

.message-data-table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-radius: var(--openbot-radius-lg);
  overscroll-behavior-inline: contain;
}

.message-data-table-frame {
  width: 100%;
  min-width: 0;
}

/* The copy actions under the table. */
.message-data-table-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-1);
  margin-top: var(--openbot-space-1);
}

.message-data-table-scroll:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}

.message-data-table {
  width: 100%;
  min-width: calc(var(--message-data-table-columns) * 112px);
  overflow: hidden;
  border: 1px solid var(--openbot-data-table-outer-border);
  border-radius: var(--openbot-radius-lg);
  border-spacing: 0;
  background: var(--openbot-bg-surface-raised);
  box-shadow: 0 0 0 0.5px var(--openbot-data-table-ring);
  font-size: var(--openbot-text-md);
}

.message-data-table thead {
  color: var(--openbot-data-table-header-text);
  font-weight: 500;
}

.message-data-table tbody {
  background: var(--openbot-bg-canvas);
}

.message-data-table tbody tr:not(:last-child) td {
  border-bottom: 1px solid var(--openbot-data-table-border);
}

.message-data-table th,
.message-data-table td {
  padding: 9px 12px;
  color: var(--openbot-data-table-text);
  font-weight: inherit;
  overflow-wrap: break-word;
  text-align: left;
  vertical-align: top;
}

.message-data-table thead th {
  border-bottom: 1px solid var(--openbot-data-table-border);
  padding-top: 7px;
  padding-bottom: 7px;
  color: var(--openbot-data-table-header-text);
}

.message-data-table th:not(:last-child),
.message-data-table td:not(:last-child) {
  border-right: 1px solid var(--openbot-data-table-border);
}

/* Links and code can be one long token. Break them inside the column, so they do not make the
   table wider than the message. Auto table layout sizes a column to its longest plain word, so a
   short column does not split a word. */
:is(.message-data-table, .message-markdown-table) :is(th, td) :is(a, code) {
  overflow-wrap: anywhere;
}

.message-data-table [data-align="center"] {
  text-align: center;
}

.message-data-table [data-align="right"] {
  text-align: right;
}

.message-comparison-table-yes {
  color: var(--openbot-success);
}

.message-comparison-table-no {
  color: var(--openbot-data-table-header-text);
}

.message-link {
  border-radius: var(--openbot-radius-xs);
  color: inherit;
  font-weight: 560;
  text-decoration-color: var(--openbot-text-muted);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition:
    color var(--openbot-duration-hover) ease,
    text-decoration-color var(--openbot-duration-hover) ease;
}

.message-link-icon {
  position: relative;
  display: inline-flex;
  width: 14px;
  height: 14px;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
  color: currentColor;
  vertical-align: -2px;
}

.message-link-icon img,
.message-link-fallback {
  width: 14px;
  height: 14px;
}

.message-link-icon img {
  position: absolute;
  inset: 0;
  border-radius: var(--openbot-radius-xs);
  object-fit: contain;
}

.message-link-fallback {
  opacity: 0.72;
}

.message-link:hover {
  color: var(--openbot-text-primary);
  text-decoration-color: currentColor;
}

.message-link:focus-visible {
  outline: 2px solid var(--openbot-text-secondary);
  outline-offset: 2px;
}

.message-citation {
  position: relative;
  display: inline;
}

.message-citation-mark {
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  margin: 0 2px;
  border: 0;
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-bg-control-hover);
  padding: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  vertical-align: 4px;
  transition:
    background var(--openbot-duration-hover) ease,
    color var(--openbot-duration-hover) ease;
}

.message-citation-mark:hover,
.message-citation-mark:focus-visible {
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
}

.message-citation-mark:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}

.anchored-tooltip {
  position: fixed;
  z-index: var(--openbot-layer-tooltip);
  box-sizing: border-box;
  width: max-content;
  max-width: min(280px, calc(100vw - 16px));
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface-raised);
  padding: 6px 8px;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: 500;
  line-height: 15px;
  overflow-wrap: anywhere;
  pointer-events: none;
  text-align: left;
  white-space: normal;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity var(--openbot-duration-fast) ease,
    transform var(--openbot-duration-fast) ease;
}

.anchored-tooltip[data-placement="bottom"] {
  transform: translateY(-4px);
}

.anchored-tooltip[data-ready="true"] {
  opacity: 1;
  transform: translateY(0);
}

.anchored-tooltip-light {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-surface-light);
  color: var(--openbot-text-on-light);
}

@media (prefers-reduced-motion: reduce) {
  .anchored-tooltip,
  .anchored-tooltip[data-placement="bottom"],
  .anchored-tooltip[data-ready="true"] {
    transform: none;
  }
}

.message-citation-footer {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  border-top: 1px solid var(--openbot-border);
  padding-top: 10px;
}

.message-citation-ref {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: 425;
  line-height: 18px;
  text-decoration: none;
}

.message-citation-ref .message-citation-mark {
  flex: 0 0 18px;
  margin: 0;
}

.message-citation-ref-label {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-weight: 550;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-citation-separator {
  color: var(--openbot-text-dim);
}

.message-citation-ref-host {
  color: var(--openbot-text-muted);
  white-space: nowrap;
}

.message-citation-arrow {
  display: flex;
  width: 14px;
  height: 14px;
  margin-left: -2px;
  color: var(--openbot-text-dim);
  opacity: 0;
  transform: rotate(45deg) translate(-1px, 1px);
  transition:
    color var(--openbot-duration-hover) ease,
    opacity var(--openbot-duration-hover) ease,
    transform var(--openbot-duration-hover) ease;
}

.message-citation-arrow svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}

.message-citation-ref:hover,
.message-citation-ref:focus-visible {
  color: var(--openbot-text-secondary);
}

.message-citation-ref:hover .message-citation-arrow,
.message-citation-ref:focus-visible .message-citation-arrow {
  color: var(--openbot-text-secondary);
  opacity: 1;
  transform: rotate(45deg) translate(0, 0);
}

.message-citation-ref:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 3px;
}

[data-slot="bubble"][data-author="user"] .message-citation-mark {
  background: var(--openbot-surface-light);
  color: var(--openbot-text-muted-on-light);
}

[data-slot="bubble"][data-author="user"] .message-citation-mark:hover,
[data-slot="bubble"][data-author="user"] .message-citation-mark:focus-visible {
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent);
}

[data-slot="bubble"][data-author="user"] .message-citation-footer {
  border-top-color: var(--openbot-border-on-light);
}

[data-slot="bubble"][data-author="user"] .message-citation-ref-label {
  color: var(--openbot-text-on-light);
}

[data-slot="bubble"][data-author="user"] .message-citation-ref-host {
  color: var(--openbot-text-muted-on-light);
}

[data-slot="bubble"][data-author="user"] .message-citation-separator {
  color: var(--openbot-text-dim-on-light);
}

.message-reply-context {
  max-width: 360px;
  margin: -1px 0 7px;
  border-left: 2px solid var(--openbot-text-dim);
  padding-left: 8px;
  color: var(--openbot-text-secondary);
}

.message-reply-context span {
  display: block;
  margin-bottom: 1px;
  font-size: var(--openbot-text-sm);
  font-weight: 550;
  line-height: 14px;
}

.message-reply-context p {
  overflow: hidden;
  margin: 0;
  font-size: var(--openbot-text-sm);
  line-height: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-slot="bubble"][data-author="user"] .message-reply-context {
  border-left-color: var(--openbot-border-strong);
  color: var(--openbot-text-readable);
}

/* A quote that opens its original. The button lies over the whole quote, its left mark included. */
.message-reply-context[data-opens] {
  position: relative;
  transition: border-left-color var(--openbot-duration-hover) var(--openbot-ease-out);
}

/* The spinner takes the right column; the author and the text flow into the left one. */
.message-reply-context[data-loading] {
  display: grid;
  align-items: center;
  column-gap: var(--openbot-space-2);
  grid-template-columns: minmax(0, 1fr) auto;
}

.message-reply-context[data-opens]:hover {
  border-left-color: var(--openbot-accent);
}

.message-reply-context .message-reply-open,
.message-reply-context .message-reply-open:hover:not(:disabled):not([data-disabled]) {
  position: absolute;
  z-index: 1;
  inset: 0 0 0 -2px;
  width: auto;
  height: auto;
  min-height: 0;
  border-radius: var(--openbot-radius-xs);
  background: none;
  padding: 0;
  cursor: pointer;
}

.message-reply-context .message-reply-open:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}

.message-reply-loading {
  width: 14px;
  height: 14px;
  grid-column: 2;
  grid-row: 1 / span 2;
  animation: message-reply-spin 0.8s linear infinite;
}

.message-reply-context[data-unavailable] {
  border-left-style: dashed;
}

.message-reply-unavailable {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
  margin: -1px 0 7px;
  font-size: var(--openbot-text-sm);
  line-height: 15px;
}

.message-reply-unavailable-icon {
  width: 13px;
  height: 13px;
  flex: none;
}

@keyframes message-reply-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .message-reply-loading {
    animation: none;
  }
}

[data-slot="bubble"][data-author="user"] .message-copy {
  font-size: var(--openbot-text-lg);
}

.message-tag-unavailable {
  display: inline-flex;
  height: 22px;
  align-items: center;
  gap: 4px;
  margin: 0 1px;
  border: 1px dashed var(--openbot-border-strong);
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  padding: 0 6px;
  color: var(--openbot-text-muted);
  font: inherit;
  line-height: 20px;
  vertical-align: middle;
  white-space: nowrap;
}

.message-agent-tag .agent-avatar {
  --agent-avatar-optical-offset: -2px;

  width: 16px;
  height: 16px;
}

.message-file-reference,
.composer-file-reference {
  --file-reference-color: var(--openbot-file-default);
  --file-reference-soft: var(--openbot-file-default-soft);

  display: inline-flex;
  min-width: 0;
  max-width: min(240px, calc(100% - 8px));
  align-items: center;
  gap: 4px;
  margin: 0 1px;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  padding: 1px 6px 1px 3px;
  color: var(--file-reference-color);
  font: inherit;
  font-weight: 550;
  line-height: 20px;
  vertical-align: middle;
  white-space: nowrap;
  transition:
    background-color var(--openbot-duration-hover) ease,
    color var(--openbot-duration-hover) ease;
}

/* Keep message references in inline flow. Flex/grid children make Chromium add line breaks to
   copied selections, even when the child is an icon that cannot be selected. The chip shows the
   ellipsis itself: a percentage cap on the name resolves against the chip's shrink-to-fit width,
   so it cut short names. */
.reference-chip.message-reference-chip,
.message-file-reference {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: text;
}

/* A table measures its columns before it knows their widths, so the percentage cap above does not
   apply there, and a long path makes its column as wide as the path. A fixed cap keeps it short. */
:is(.message-data-table, .message-markdown-table) .message-file-reference {
  max-width: 240px;
}

:is(
  .message-file-reference,
  .composer-file-reference,
  .attachment-file-visual,
  .files-file-visual,
  .composer-attachment-preview
)[data-file-tone="source"] {
  --file-reference-color: var(--openbot-file-blue);
  --file-reference-soft: var(--openbot-file-blue-soft);
}

:is(
  .message-file-reference,
  .composer-file-reference,
  .attachment-file-visual,
  .files-file-visual,
  .composer-attachment-preview
)[data-file-tone="script"] {
  --file-reference-color: var(--openbot-file-yellow);
  --file-reference-soft: var(--openbot-file-yellow-soft);
}

:is(
  .message-file-reference,
  .composer-file-reference,
  .attachment-file-visual,
  .files-file-visual,
  .composer-attachment-preview
)[data-file-tone="markup"] {
  --file-reference-color: var(--openbot-file-orange);
  --file-reference-soft: var(--openbot-file-orange-soft);
}

:is(
  .message-file-reference,
  .composer-file-reference,
  .attachment-file-visual,
  .files-file-visual,
  .composer-attachment-preview
)[data-file-tone="style"] {
  --file-reference-color: var(--openbot-file-teal);
  --file-reference-soft: var(--openbot-file-teal-soft);
}

:is(
  .message-file-reference,
  .composer-file-reference,
  .attachment-file-visual,
  .files-file-visual,
  .composer-attachment-preview
)[data-file-tone="data"] {
  --file-reference-color: var(--openbot-file-green);
  --file-reference-soft: var(--openbot-file-green-soft);
}

:is(
  .message-file-reference,
  .composer-file-reference,
  .attachment-file-visual,
  .files-file-visual,
  .composer-attachment-preview
)[data-file-tone="document"] {
  --file-reference-color: var(--openbot-file-red);
  --file-reference-soft: var(--openbot-file-red-soft);
}

:is(
  .message-file-reference,
  .composer-file-reference,
  .attachment-file-visual,
  .files-file-visual,
  .composer-attachment-preview
)[data-file-tone="media"] {
  --file-reference-color: var(--openbot-file-pink);
  --file-reference-soft: var(--openbot-file-pink-soft);
}

.inline-file-reference-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-button.message-file-reference {
  height: 22px;
  cursor: pointer;
}

.ui-button.message-file-reference:focus-visible,
.composer-file-reference:focus-visible {
  outline: 2px solid var(--file-reference-color);
  outline-offset: 2px;
  box-shadow: none;
}

.attachment-reference-visual {
  display: inline-grid;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--openbot-radius-xs);
  background: var(--file-reference-soft);
  color: var(--file-reference-color);
}

.attachment-reference-visual[data-badge-length="3"] {
  width: 20px;
}

.attachment-reference-visual[data-badge-length="4"] {
  width: 24px;
}

.attachment-reference-visual > span {
  font-size: var(--openbot-glyph-sm);
  font-weight: 750;
  letter-spacing: -0.2px;
  line-height: 1;
}

.attachment-reference-visual[data-badge-length="4"] > span {
  font-size: var(--openbot-glyph-xs);
  letter-spacing: -0.4px;
}

/* The page icon is on a 20-unit grid, so its stroke is scaled to match lucide's 24, as `.ui-glyph-20` does. */
.attachment-reference-visual > svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: calc(var(--openbot-icon-stroke) * 20 / 24);
}

[data-slot="bubble"][data-author="user"] .message-file-reference {
  color: var(--file-reference-color);
}

@media (hover: hover) and (pointer: fine) {
  .ui-button.message-file-reference:hover:not(:disabled),
  .composer-file-reference:hover {
    background-color: var(--file-reference-soft);
    color: var(--file-reference-color);
  }
}

@media (hover: none), (pointer: coarse) {
  .message-file-reference,
  .composer-file-reference {
    max-width: calc(100% - 8px);
  }
}

/* The action that failed, over the text of the failure. Only an error bubble draws one. */
.message-error-label {
  margin: 0 0 var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}

.attachment-file-visual {
  --file-reference-color: var(--openbot-file-default);
  --file-reference-soft: var(--openbot-file-default-soft);

  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border-radius: var(--openbot-radius-md);
  background: var(--file-reference-soft);
  color: var(--file-reference-color);
}

.attachment-file-visual svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}

.choice-card {
  display: grid;
  width: min(540px, 100%);
  gap: var(--openbot-space-4);
}

.choice-card-hint {
  margin: calc(-1 * var(--openbot-space-2)) 0 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
  overflow-wrap: anywhere;
}
.choice-options {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface);
}

.choice-option {
  display: flex;
  width: 100%;
  min-height: var(--openbot-control-xl);
  align-items: center;
  gap: var(--openbot-space-2);
  border: 0;
  border-bottom: 1px solid var(--openbot-border);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-lg);
  text-align: left;
  overflow-wrap: anywhere;
}

.choice-option-item:last-child .choice-option {
  border-bottom: 0;
}

.choice-option-item:not([data-disabled]) .choice-option:hover,
.choice-option-selected {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}

.choice-option-item:focus-within .choice-option {
  outline: 1px solid var(--openbot-border-focus);
  outline-offset: -1px;
}

.choice-option-item[data-disabled] {
  opacity: 0.5;
}

.choice-key {
  display: grid;
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-muted);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
}

.choice-input {
  width: 100%;
  min-width: 0;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface);
  font-size: var(--openbot-text-lg);
}

.choice-input::placeholder {
  color: var(--openbot-text-muted);
}

/* Inline icons align to the top of the chip's line, not to `middle`, which sets them by the text's
   x-height and puts them below the centre of the name. */
.reference-chip.message-reference-chip .reference-chip-icon,
.message-file-reference .attachment-reference-visual {
  display: inline-block;
  margin-right: var(--openbot-space-1);
  text-align: center;
  vertical-align: top;
  user-select: none;
}

/* A file chip's line is 20px high and its icon 16px. */
.message-file-reference .attachment-reference-visual {
  margin-top: var(--openbot-space-0-5);
  font-size: var(--openbot-glyph-sm);
  line-height: var(--openbot-space-4);
}

.message-file-reference .attachment-reference-visual[data-badge-length="4"] {
  font-size: var(--openbot-glyph-xs);
}

.reference-chip.message-reference-chip .agent-avatar {
  display: inline-block;
  height: var(--openbot-space-4);
  vertical-align: top;
}

/* The page icon is 12px in the 16px badge. */
.message-file-reference .attachment-reference-visual > svg {
  display: inline;
  margin-top: var(--openbot-space-0-5);
  vertical-align: top;
}

.reference-chip.message-reference-chip .reference-chip-icon > svg,
.reference-chip.message-reference-chip .agent-avatar > svg {
  display: inline;
  vertical-align: top;
}

/* A line icon is 12px in the 16px box, as the page icon of a file chip is. */
.reference-chip.message-reference-chip .reference-chip-icon > svg.lucide {
  margin-top: var(--openbot-space-0-5);
}

/* The face is 128% of the avatar. The grid avatar centres it; inline, half the excess goes left and up. */
.reference-chip.message-reference-chip .agent-avatar > svg {
  margin: -14% 0 0 -14%;
}

.reference-chip.message-reference-chip .reference-chip-name,
.message-file-reference .inline-file-reference-name {
  display: inline;
}

.reference-chip.message-reference-chip > .sr-only {
  user-select: none;
}
/* KaTeX output. `katex.min.css` owns the formula layout; these rules only place it in a message. */
.message-math-display {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

/* KaTeX gives display math a vertical margin; the message already spaces its blocks. */
.message-math-display > * {
  margin: 0;
  padding: var(--openbot-space-1) 0;
}
/* A ```html or ```mermaid block drawn in the code block's frame, and its larger dialog. */
.message-code-actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--openbot-space-0-5);
}

/* The same icon size as Copy beside it. */
.message-preview-expand svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}

/* The Preview and Code switch, sized to the header's buttons. */
.ui-sliding-tabs.message-preview-switch {
  gap: var(--openbot-space-0-5);
  padding: var(--openbot-space-0-5);
}

.message-preview-switch .ui-sliding-tabs-trigger {
  height: 22px;
  padding: 0 var(--openbot-space-2);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
}

.message-preview-switch .ui-sliding-tabs-pill {
  top: var(--openbot-space-0-5);
  height: 22px;
}

/* The two views share one cell. Only the selected view sets the height, so the block eases from
   one height to the other while the views cross-fade. */
.message-preview-resize {
  overflow: hidden;
}

.message-preview-views {
  position: relative;
}

.message-preview-view:not([data-selected]) {
  position: absolute;
  inset: 0 0 auto;
}

.message-preview-body {
  width: 100%;
  display: grid;
  place-items: center;
  background: var(--openbot-bg-sidebar);
}

.message-preview-body[data-preview-kind="mermaid"] {
  max-height: 420px;
  overflow: auto;
  padding: var(--openbot-space-3);
  overscroll-behavior-x: contain;
}

/* The frame takes the page height that the app measures, up to the height of a code block. The
   page scrolls inside the frame beyond that. */
.message-preview-frame {
  width: 100%;
  height: min(var(--message-preview-height, 160px), 420px);
  display: block;
  border: 0;
  background: var(--openbot-bg-sidebar);
}

.message-preview-diagram {
  max-width: 100%;
  height: auto;
  display: block;
}

.message-preview-status {
  margin: 0;
  padding: var(--openbot-space-6) var(--openbot-space-3);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

/* Why Mermaid could not draw the diagram, above its code. */
.message-preview-failure {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  border-bottom: 1px solid var(--openbot-border);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-xs);
}

/* Mermaid points at the error with a caret line, which lines up only in a monospace font. */
.message-preview-failure-detail {
  flex-basis: 100%;
  margin: 0;
  overflow-x: auto;
  font-family: var(--openbot-font-mono);
  white-space: pre;
}

/* The preview animates its backdrop from script, with the surface. */
.message-preview-backdrop {
  animation: none;
}

.message-preview-dialog {
  width: min(1100px, 100%);
  height: calc(100dvh - var(--openbot-space-6) * 2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  outline: 0;
  border-radius: var(--openbot-radius-xl);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-primary);
  /* The dialog grows from the block that opened it: the block's corner is the fixed point. */
  transform-origin: 0 0;
}

/* Hidden until its first frame of motion, so it never shows at full size before it grows. */
.message-preview-dialog:not([data-shown]) {
  opacity: 0;
}

.message-preview-dialog-header {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-4);
  border-bottom: 1px solid var(--openbot-border);
}

.message-preview-dialog-title {
  margin: 0;
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
}

.message-preview-dialog-body {
  min-height: 0;
  flex: 1;
  display: grid;
  overflow: auto;
  background: var(--openbot-bg-sidebar);
}

/* The diagram canvas fills the dialog body and moves inside it, so the body does not scroll. */
.message-preview-dialog-body[data-preview-kind="mermaid"] {
  overflow: hidden;
}

.message-preview-canvas {
  position: relative;
  min-height: 0;
  overflow: hidden;
}

.message-preview-canvas-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  outline: 0;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.message-preview-canvas-viewport[data-dragging] {
  cursor: grabbing;
}

.message-preview-canvas-viewport:focus-visible {
  box-shadow: inset 0 0 0 2px var(--openbot-border-focus);
}

/* Hidden until it has its first place, so it never shows at its drawn size in a corner. */
.message-preview-canvas-image {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  height: auto;
  opacity: 0;
  transform-origin: 0 0;
  -webkit-user-drag: none;
}

.message-preview-canvas-image[data-ready] {
  opacity: 1;
}

.message-preview-canvas-image[data-settling] {
  transition:
    transform var(--openbot-duration-slow) var(--openbot-ease-out),
    width var(--openbot-duration-slow) var(--openbot-ease-out);
}

/* The zoom controls float over the bottom of the canvas. */
.message-preview-zoom {
  position: absolute;
  bottom: var(--openbot-space-4);
  left: 50%;
  display: flex;
  align-items: center;
  gap: var(--openbot-space-0-5);
  translate: -50% 0;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-overlay);
  box-shadow: 0 0 0 1px var(--openbot-border);
  padding: var(--openbot-space-1);
}

.message-preview-zoom .ui-button {
  border-radius: var(--openbot-radius-pill);
}

:where(.ui-button).message-preview-zoom-level {
  min-width: 56px;
  font-variant-numeric: tabular-nums;
}

.message-preview-dialog-body .message-preview-frame {
  height: 100%;
}
/* A visual reply: an agent's page with no card of its own. */
.chat-visual-frame {
  width: 100%;
  min-width: 0;
  display: block;
  border: 0;
  background: transparent;
  /* The page also uses the dark scheme, so its canvas stays transparent. */
  color-scheme: dark;
}

/*
 * A page in the chat starts at the edge of the agent's reply below it (an agent chat shows no avatar
 * column) and is as wide as a wide agent bubble.
 */
.chat-visual-reply {
  max-width: 720px;
}

/* A page that fills a panel. The page has no margin, so the frame gives it one. */
.chat-visual-frame-fill {
  box-sizing: border-box;
  height: 100%;
  padding: 12px 16px;
}

/* The box of a page that loads or that the app cannot get. */
.chat-visual-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-xs);
}
.composer-wrap {
  position: relative;
  flex: 0 0 auto;
  padding: 0 var(--openbot-space-1-5) var(--openbot-space-1-5);
}

.team-typing-dots {
  display: flex;
  align-items: center;
  gap: 2px;
}

.team-typing-dots i {
  width: 3px;
  height: 3px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success);
  animation: typing-dot-pulse 900ms ease-in-out infinite;
}

.team-typing-dots i:nth-child(2) {
  animation-delay: var(--openbot-duration-fast);
}

.team-typing-dots i:nth-child(3) {
  animation-delay: var(--openbot-duration-overlay);
}

@media (prefers-reduced-motion: reduce) {
  .agent-row-thinking-dots i,
  .team-typing-dots i,
  .image-generation-dots,
  .image-generation-glow,
  .image-generation-canvas,
  .image-generation-preview,
  .image-generation-label,
  /* Matches the scoped shimmer above, which outranks the bare class on its own. */
  .image-generation:not(.image-generation-ready, .image-generation-failed) .image-generation-label,
  .agent-activity-label {
    animation: none;
    transition: none;
  }

  .image-generation-hover-download {
    transition: none;
  }
}

@media (hover: none), (pointer: coarse) {
  .image-generation-hover-download {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
}

@media (max-width: 620px) {
  .message-entry-agent .ui-bubble:has(.image-generation) {
    width: 100%;
    max-width: 100%;
  }

  .image-generation-stage,
  .image-generation-meta {
    width: 100%;
  }
}

.composer-reply-preview {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 10px;
  margin: 0 10px 6px;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  padding: 6px 8px 6px 12px;
  box-shadow: 0 7px 22px var(--openbot-shadow-popover-ambient);
}

.composer-reply-preview > div {
  min-width: 0;
  flex: 1;
}

.composer-reply-preview span {
  display: block;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: 550;
  line-height: 14px;
}

.composer-reply-preview p {
  overflow: hidden;
  margin: 1px 0 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composer-reply-preview > button {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  background: transparent;
  color: var(--openbot-text-muted);
}

.composer-reply-preview > button:hover {
  background: var(--openbot-border);
  color: var(--openbot-text-secondary);
}

.composer {
  position: relative;
  z-index: 11;
  display: grid;
  max-width: none;
  min-height: 96px;
  gap: 4px;
  margin: 0 auto;
  border: 0.5px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  padding: 10px;
  box-shadow: none;
  transition:
    border-color var(--openbot-duration-hover) var(--openbot-ease-out),
    box-shadow var(--openbot-duration-hover) var(--openbot-ease-out);
}

.composer[data-compact] {
  grid-template-columns: 28px minmax(0, 1fr) auto;
  min-height: 48px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
}

.composer:focus-within {
  border-color: var(--openbot-text-dim);
  box-shadow: 0 0 0 3px var(--openbot-hover);
}

.composer:has(.composer-editor-surface[aria-disabled="true"]) {
  border-color: var(--openbot-border);
}

.composer button:disabled,
.composer-editor-surface[aria-disabled="true"] {
  cursor: default;
}

.composer-button,
.dictation-button,
.voice-button {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  /* Without this the button primitive's inline padding outgrows the 28px width
     under border-box sizing and stretches the circle into a pill. */
  padding: 0;
  background: var(--openbot-hover);
  color: var(--openbot-text-secondary);
  transition:
    background-color var(--openbot-duration-hover) var(--openbot-ease-out),
    color var(--openbot-duration-hover) var(--openbot-ease-out),
    transform var(--openbot-duration-fast) var(--openbot-ease-out);
}

.composer-button:hover {
  background: var(--openbot-border);
  color: var(--openbot-text-primary);
}

.composer-primary-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.voice-model-progress {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  white-space: nowrap;
}

/* The microphone melts into the recording bar and Finish buds off Send; VoiceRecordingMorph.tsx
   explains the goo filter. Opening uses a spring (stiffness 320, damping 17, sampled). Closing
   does not bounce: an undershoot would squeeze the microphone below its own size. */
.voice-morph {
  --voice-morph-duration: 600ms;
  --voice-morph-exit-duration: 360ms;
  --voice-morph-ease: linear(
    0,
    0.057 3.3%,
    0.199 6.7%,
    0.386 10%,
    0.587 13.3%,
    0.773 16.7%,
    0.93 20%,
    1.049 23.3%,
    1.128 26.7%,
    1.171 30%,
    1.183 33.3%,
    1.172 36.7%,
    1.146 40%,
    1.111 43.3%,
    1.075 46.7%,
    1.041 50%,
    1.012 53.3%,
    0.991 56.7%,
    0.976 60%,
    0.967 66.7%,
    0.974 73.3%,
    0.987 80%,
    0.998 86.7%,
    1.004 93.3%,
    1
  );
  --voice-bar-width: 152px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}

.voice-morph-filter {
  position: absolute;
  width: 0;
  height: 0;
}

/* Inset past the controls so the blur is not cut off at the layer edge. */
.voice-morph-goo {
  position: absolute;
  inset: -12px;
  pointer-events: none;
}

/* The goo threshold needs opaque shapes, so the layer, not the shape, carries the
   --openbot-hover transparency of the microphone button. */
.voice-morph-goo-bar {
  opacity: 0.06;
}

.voice-morph-bar,
.voice-morph-send-blob,
.voice-morph-finish-blob {
  position: absolute;
  top: 12px;
  height: 28px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-primary);
}

.voice-morph-bar {
  right: 46px;
  width: 28px;
  transition: width var(--voice-morph-exit-duration) var(--openbot-ease-out);
}

.voice-morph-send-blob,
.voice-morph-finish-blob {
  right: 12px;
  width: 28px;
  opacity: 0;
  transition: opacity 0s linear var(--voice-morph-exit-duration);
}

.voice-morph-finish-blob {
  transform: scale(0.5);
  transition:
    transform var(--voice-morph-exit-duration) var(--openbot-ease-out),
    opacity 0s linear var(--voice-morph-exit-duration);
}

.voice-morph[data-recording] .voice-morph-bar {
  width: var(--voice-bar-width);
  transition: width var(--voice-morph-duration) var(--voice-morph-ease);
}

.voice-morph[data-recording] .voice-morph-send-blob {
  opacity: 1;
  transition: none;
}

.voice-morph[data-recording] .voice-morph-finish-blob {
  opacity: 1;
  transform: translateX(-34px) scale(0.8);
  transition: transform var(--voice-morph-duration) var(--voice-morph-ease);
}

/* Positioned, so the controls paint over the goo layers before them. */
.voice-morph-send {
  position: relative;
  display: flex;
}

.voice-morph-slot {
  position: relative;
  display: flex;
  width: 28px;
  height: 28px;
  justify-content: flex-end;
  transition: width var(--voice-morph-exit-duration) var(--openbot-ease-out);
}

.voice-morph[data-recording] .voice-morph-slot {
  width: var(--voice-bar-width);
  transition: width var(--voice-morph-duration) var(--voice-morph-ease);
}

.voice-morph .dictation-button {
  background: transparent;
}

.voice-recording-status {
  display: flex;
  width: 100%;
  min-width: 0;
  height: 28px;
  align-items: center;
  gap: 4px;
  margin: 0;
  border: 0;
  overflow: hidden;
  padding: 0 3px 0 12px;
  color: var(--openbot-text-secondary);
  animation: voice-morph-content-in var(--openbot-duration-slow) var(--openbot-ease-out) var(--openbot-duration-fast)
    both;
}

.voice-waveform {
  display: flex;
  min-width: 0;
  height: 20px;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, currentColor 24px);
}

.voice-waveform-track {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 3px;
}

/* Quiet dots stay round; speech stretches them into bars. */
.voice-waveform-dot {
  width: 3px;
  height: calc(3px + var(--voice-level, 0) * 15px);
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-pill);
  background: currentColor;
}

.voice-recording-cancel,
.voice-recording-finish {
  display: grid;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  padding: 0;
  background: transparent;
  transition:
    background-color var(--openbot-duration-hover) var(--openbot-ease-out),
    color var(--openbot-duration-hover) var(--openbot-ease-out),
    transform var(--openbot-duration-fast) var(--openbot-ease-out);
}

.voice-recording-cancel {
  color: var(--openbot-text-secondary);
}

.voice-recording-finish {
  color: var(--openbot-bg-sidebar);
  animation: voice-morph-content-in var(--openbot-duration-slow) var(--openbot-ease-out) var(--openbot-duration-overlay)
    both;
}

/* Cancel sits on the bar itself, so its hover disc stays faint, like the bar. */
.voice-morph .voice-recording-cancel:hover:not(:disabled) {
  background: color-mix(in srgb, var(--openbot-text-primary) 10%, transparent);
  color: var(--openbot-text-primary);
}

.voice-recording-cancel:active,
.voice-recording-finish:active {
  transform: scale(0.94);
}

.voice-recording-cancel svg,
.voice-recording-finish svg {
  width: 14px;
  height: 14px;
}

.voice-recording-finish svg {
  stroke-width: 3;
}

@keyframes voice-morph-content-in {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .voice-morph *,
  .voice-recording-status,
  .voice-recording-finish {
    transition: none;
    animation: none;
  }
}

.dictation-button:hover:not(:disabled) {
  background: var(--openbot-border);
  color: var(--openbot-text-primary);
}

.composer-button svg,
.dictation-button svg,
.voice-button svg {
  width: 16px;
  height: 16px;
}

.composer-spinner {
  animation: ui-spin 720ms linear infinite;
}

.voice-button {
  background: var(--openbot-text-primary);
  color: var(--openbot-bg-sidebar);
}

.voice-button-active {
  background: var(--openbot-text-primary);
  color: var(--openbot-bg-sidebar);
}

/* Light circles only dim on hover. The ghost button hover is more specific and would turn them dark. */
.voice-button:hover:not(:disabled),
.voice-button.ui-button:hover:not(:disabled),
.voice-morph .voice-recording-finish:hover:not(:disabled) {
  background: color-mix(in srgb, var(--openbot-text-primary) 84%, var(--openbot-bg-sidebar));
  color: var(--openbot-bg-sidebar);
}

.composer-input-label,
.composer-editor-root {
  --composer-editor-max-height: max(48px, 33dvh);
}

.composer-input-label {
  display: flex;
  min-width: 0;
  min-height: 48px;
  max-height: var(--composer-editor-max-height);
  align-items: flex-end;
  cursor: text;
}

.composer-toolbar {
  display: flex;
  min-height: 28px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.composer[data-compact] .composer-input-label {
  grid-column: 2;
  grid-row: 1;
  min-height: 28px;
}

.composer[data-compact] .composer-toolbar {
  display: contents;
}

.composer[data-compact] .composer-toolbar > .composer-button {
  grid-column: 1;
  grid-row: 1;
}

.composer[data-compact] .composer-toolbar > .composer-primary-actions {
  grid-column: 3;
  grid-row: 1;
}

.composer[data-compact] .composer-editor-root,
.composer[data-compact] .composer-editor-surface {
  min-height: 28px;
}

.composer[data-compact] .composer-editor-surface {
  padding: 4px 0;
}

.composer[data-compact] .composer-editor-placeholder {
  top: 4px;
  left: 0;
}

.composer[data-has-attachments] .composer-input-label,
.composer[data-has-attachments] .composer-editor-root,
.composer[data-has-attachments] .composer-editor-surface {
  min-height: 28px;
}

.composer[data-has-attachments] .composer-editor-surface {
  padding: 4px;
}

.composer[data-has-attachments] .composer-editor-placeholder {
  top: 4px;
}

.composer-editor-root {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  max-height: var(--composer-editor-max-height);
  cursor: text;
}

.composer-editor-surface {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  min-height: 48px;
  max-height: var(--composer-editor-max-height);
  margin: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  resize: none;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 2px 4px 8px;
  caret-color: var(--openbot-text-primary);
  color: var(--openbot-text-primary);
  cursor: text;
  font-size: var(--openbot-text-lg);
  line-height: 20px;
  white-space: pre-wrap;
  word-break: break-word;
  user-select: text;
}

.composer-editor-surface[aria-disabled="true"] {
  pointer-events: none;
}

/*
 * Live dictation: ComposerEditor.tsx explains the read-only copy that shows in place of the editor.
 * The editor stays focusable under the copy, so keys still edit and send the draft, and screen
 * readers keep the textbox. The copy scrolls a long draft and gives a click to the editor.
 */
.composer-editor-root[data-dictating] > [role="textbox"] {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.composer-dictation-draft {
  display: inline;
}

.composer-dictation-word {
  animation: composer-dictation-word-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
  transition: color var(--openbot-duration-slow) var(--openbot-ease-out);
}

.composer-dictation-word[data-interim] {
  color: var(--openbot-text-muted);
}

.composer-dictation-caret {
  display: inline-block;
  width: 2px;
  height: 16px;
  margin-left: 2px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
  vertical-align: -3px;
  animation: composer-dictation-caret 1s ease-in-out infinite;
}

.composer-dictation[data-final] .composer-dictation-caret {
  display: none;
}

@keyframes composer-dictation-word-in {
  from {
    opacity: 0;
    filter: blur(2px);
  }
}

@keyframes composer-dictation-caret {
  50% {
    opacity: 0.2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .composer-dictation-word,
  .composer-dictation-caret {
    transition: none;
    animation: none;
  }
}

.composer-editor-placeholder {
  position: absolute;
  top: 2px;
  left: 4px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-lg);
  line-height: 20px;
  pointer-events: none;
  user-select: none;
}

/* The compact editor has the sizes of the compact composer. */
.composer-editor-root[data-size="compact"],
.composer-editor-root[data-size="compact"] .composer-editor-surface {
  min-height: 28px;
}

.composer-editor-root[data-size="compact"] .composer-editor-surface {
  padding: 4px 0;
}

.composer-editor-root[data-size="compact"] .composer-editor-placeholder {
  top: 4px;
  left: 0;
}

/* The box comes from `.reference-chip`; this token only loses the chip fill and gains the outline. */
.composer-mention-token.composer-tag-unavailable {
  border: 1px dashed var(--openbot-border-strong);
  background: transparent;
  /* No leading icon, so the left inset matches the right one. */
  padding-left: var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
}

.composer-file-reference {
  height: 24px;
  cursor: pointer;
  user-select: none;
}

/*
 * Hangs off the composer's top edge inside `.composer-wrap`, like `.agent-queue-panel`: the
 * composer paints over the overlap, so the panel grows out from under the input. The bottom comes
 * from the composer's measured height, which changes as the input grows.
 */
.mention-picker {
  --mention-picker-overlap: 14px;
  --mention-picker-side-inset: calc(var(--openbot-space-1-5) + 12px);
  --mention-picker-row-height: 29px;
  --mention-picker-gutter: 5px;
  --mention-picker-visible-rows: 7;

  position: absolute;
  z-index: 10;
  right: var(--mention-picker-side-inset);
  bottom: calc(var(--mention-picker-bottom, 0px) - var(--mention-picker-overlap));
  left: var(--mention-picker-side-inset);
  border: 1px solid var(--openbot-queue-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-queue-surface);
  padding-bottom: var(--mention-picker-overlap);
  color: var(--openbot-queue-text);
  box-shadow: none;
  transform-origin: bottom center;
  animation: mention-picker-in var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1) both;
}

/*
 * The scroll lives on the list, not the panel, so the scroll fade masks the rows and leaves the
 * panel border and background whole. The scrollbar stays hidden: the fade carries the same news.
 */
.mention-picker-list {
  display: grid;
  /* A plain auto track grows to the widest row, which would push the badges out of view. */
  grid-template-columns: minmax(0, 1fr);
  /*
   * Every row is the same height, so the list can state the height its rows need instead of
   * leaving it to the content. A length on both sides of the change is what lets the panel
   * travel to its new size while the query narrows, rather than jump to it.
   */
  height: calc(var(--mention-picker-rows, 0) * var(--mention-picker-row-height) + 2 * var(--mention-picker-gutter));
  max-height: calc(
    var(--mention-picker-visible-rows) *
    var(--mention-picker-row-height) +
    2 *
    var(--mention-picker-gutter)
  );
  overflow-y: auto;
  /* An even inset all round: the row's own 8px carries the rest of the gap beside the text. */
  padding: var(--mention-picker-gutter);
  overscroll-behavior: contain;
  scrollbar-width: none;
  transition: height var(--openbot-duration-normal) var(--openbot-ease-out);
  will-change: height;
}

.mention-picker-list::-webkit-scrollbar {
  display: none;
}

@keyframes mention-picker-in {
  from {
    opacity: 0;
    transform: translateY(5px) scaleY(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}

/* The queue panel's row rhythm and colors: a 29px row, a small leading glyph, muted trailing text. */
.mention-picker-option {
  display: flex;
  width: 100%;
  /* The list computes its own height from this one, so the two must not drift apart. */
  height: var(--mention-picker-row-height);
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  padding: 0 8px;
  color: var(--openbot-queue-text);
  text-align: left;
}

.mention-picker-file-option .attachment-reference-visual {
  width: 20px;
  height: 20px;
}

.mention-picker-option:hover,
.mention-picker-option-active {
  background: var(--openbot-hover);
}

.mention-picker-option .agent-avatar {
  --agent-avatar-optical-offset: -2px;

  width: 20px;
  height: 20px;
}

.mention-picker-skill-icon {
  display: grid;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  place-items: center;
  color: var(--openbot-queue-action);
}

.mention-picker-skill-icon > svg {
  width: 15px;
  height: 15px;
}

.mention-picker-option > strong {
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  font-size: var(--openbot-text-lg);
  font-weight: 500;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mention-picker-description {
  min-width: 0;
  flex: 1 1 0;
  overflow: hidden;
  color: var(--openbot-queue-action);
  font-size: var(--openbot-text-md);
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Shown only beside a skill whose name another listed skill shares: the slug tells them apart. */
.mention-picker-slug {
  flex: 0 0 auto;
  color: var(--openbot-queue-action);
  font-size: var(--openbot-text-md);
  line-height: 18px;
  white-space: nowrap;
}

/* Takes the list's place when `$` finds nothing, at the height of one row in the list. */
.mention-picker-status {
  display: flex;
  height: calc(var(--mention-picker-row-height) + 2 * var(--mention-picker-gutter));
  align-items: center;
  margin: 0;
  padding: 0 calc(var(--mention-picker-gutter) + 8px);
  color: var(--openbot-queue-action);
  font-size: var(--openbot-text-md);
  line-height: 18px;
}

.mention-picker-badge {
  margin-left: auto;
  flex: 0 0 auto;
  color: var(--openbot-queue-action);
}

.composer-attachments {
  position: relative;
  z-index: 11;
  display: flex;
  width: 100%;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 2px 0 4px;
}

.composer-attachment {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
}

.composer-attachment[data-kind="image"] {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  padding: 0;
}

.composer-attachment[data-kind="file"] {
  width: 220px;
  max-width: 100%;
  height: 52px;
  gap: 10px;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  padding: 7px 12px 7px 8px;
}

.composer-attachment-copy {
  display: block;
  min-width: 0;
  flex: 1;
}

.composer-attachment-copy strong,
.composer-attachment-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composer-attachment-copy strong {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: 500;
  line-height: 16px;
}

.composer-attachment-copy small {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 14px;
}

.composer-attachment-preview {
  display: grid;
  width: 36px;
  height: 36px;
  overflow: hidden;
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--openbot-radius-md);
  background: var(--file-reference-soft, var(--openbot-hover));
  color: var(--file-reference-color, var(--openbot-text-muted));
  font-size: var(--openbot-text-sm);
  font-weight: 700;
  line-height: 1;
}

.composer-attachment[data-kind="image"] .composer-attachment-preview {
  width: 100%;
  height: 100%;
  border-radius: var(--openbot-radius-media-preview);
}

.composer-attachment-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.message-attachments {
  display: grid;
  width: min(100%, 256px);
  gap: 7px;
  margin-top: 10px;
}

.message-attachment {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px 40px;
  min-width: 0;
  min-height: 56px;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface-raised);
  padding: 7px;
  transition:
    background-color var(--openbot-duration-hover) ease,
    border-color var(--openbot-duration-hover) ease;
}

[data-slot="bubble"]:not([data-variant="ghost"]) > [data-slot="bubble-content"] > .message-attachments:last-child {
  margin-bottom: var(--openbot-space-1);
}

[data-slot="bubble"]:not([data-variant="ghost"])
  > [data-slot="bubble-content"]
  > .message-attachments-group:last-child {
  margin-bottom: var(--openbot-space-1);
}

[data-slot="bubble"]:not([data-variant="ghost"])
  > [data-slot="bubble-content"]
  > .message-attachments:last-child
  .message-attachment {
  border-radius: var(--openbot-radius-bubble-inset);
}

.message-attachments-group {
  display: grid;
  width: min(100%, 256px);
  margin-top: var(--openbot-space-2);
  gap: var(--openbot-space-1-5);
}

.message-attachments-group .message-attachments {
  width: 100%;
  margin-top: 0;
}

.ui-button.attachment-preview-button {
  width: 100%;
  height: 40px;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  border: 0;
  background: transparent;
  padding: 0;
  color: inherit;
  text-align: left;
}

.attachment-preview-button:disabled {
  cursor: default;
}

.attachment-file-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.attachment-file-copy {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.message-attachment strong {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: 560;
  line-height: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-attachment small {
  color: var(--openbot-text-readable);
  font-size: var(--openbot-text-sm);
  line-height: 15px;
}

.attachment-open-button {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  padding: 0;
  color: var(--openbot-text-muted);
  transition:
    background-color var(--openbot-duration-hover) ease,
    color var(--openbot-duration-hover) ease,
    transform var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1);
}

.attachment-open-button svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}

.attachment-open-button:focus-visible,
.attachment-preview-button:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}

.attachment-open-button:active {
  transform: scale(0.96);
}

@media (hover: hover) and (pointer: fine) {
  .message-attachment:hover {
    border-color: var(--openbot-border-strong);
    background: var(--openbot-bg-control-hover);
  }

  .attachment-open-button:hover {
    background: var(--openbot-bg-control-active);
    color: var(--openbot-text-primary);
  }
}

.agent-queue-panel {
  --queue-row-height: 29px;
  --queue-composer-overlap: 14px;
  /* The leading glyph fills its column, so this inset is the gap the eye sees on the left. */
  --queue-row-inset-start: 13px;
  /* The trailing buttons are 26px boxes around 16px glyphs, so 5px of the gap is already in them. */
  --queue-row-inset-end: 8px;
  /* What stays between the panel edge and a row's hover fill, the same on all four sides. */
  --queue-row-gutter: 5px;

  position: relative;
  z-index: 10;
  overflow: visible;
  margin: 0 12px calc(-1 * var(--queue-composer-overlap));
  border: 1px solid var(--openbot-queue-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-queue-surface);
  padding-bottom: var(--queue-composer-overlap);
  box-shadow: none;
  animation: queue-panel-in var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1) both;
}

.agent-queue-slot {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--openbot-duration-overlay) var(--openbot-ease-out);
}

.agent-queue-slot[data-open="false"] {
  grid-template-rows: 0fr;
}

.agent-queue-slot-inner {
  min-height: 0;
  overflow: hidden;
}

.agent-queue-panel-resize {
  min-height: 0;
}

/*
 * Why the queue waits, above the rows that wait. Sits inside the panel's own
 * padding because the list below owns the row insets, not the panel.
 */
.agent-queue-hold {
  margin: 0;
  padding: var(--queue-row-gutter) var(--queue-row-inset-end) 0 var(--queue-row-inset-start);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-attachments-group:has(.attachment-media-player),
.message-attachments:has(.attachment-media-player) {
  width: min(100%, 360px);
}

.attachment-media-player {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  min-width: 0;
  border-radius: var(--openbot-radius-md);
}

.message-attachment[data-media] {
  grid-template-columns: minmax(0, 1fr) var(--openbot-control-sm) var(--openbot-control-sm);
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-3);
}

.message-attachment[data-media] .attachment-file-visual {
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-muted);
}

.message-attachment[data-media] .attachment-file-visual svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}

.message-attachment[data-media] .attachment-open-button {
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
}

.message-attachment[data-media] .attachment-open-button svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}

.message-attachment[data-media="audio"] .attachment-media-player {
  height: var(--openbot-control-xl);
}
/* The images of one agent message, laid out in justified rows by `justifiedGalleryLayout`. The
 * tiles are placed absolutely, so a new width or a loaded aspect ratio moves a tile but never
 * mounts a new image. */
.image-gallery {
  position: relative;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.image-gallery-item {
  position: absolute;
}

.image-gallery-tile {
  display: grid;
  width: 100%;
  height: 100%;
  overflow: hidden;
  place-items: center;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
  padding: 0;
  color: var(--openbot-text-muted);
}

.image-gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}

.image-gallery-tile:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}

.image-gallery-tile-missing > svg {
  width: var(--openbot-space-6);
  height: var(--openbot-space-6);
}

@media (hover: hover) and (pointer: fine) {
  .image-gallery-tile:not(:disabled):hover img {
    transform: scale(1.03);
  }
}

/* The viewer. The backdrop is a sibling below the content, and the content covers the window so
 * that its empty stage can take the click that closes it. */
.ui-dialog-overlay.image-lightbox-backdrop {
  background: var(--openbot-bg-overlay);
  /* The viewer animates its backdrop from script, with the zoom of the image. */
  animation: none;
}

.ui-dialog-content.image-lightbox {
  position: fixed;
  z-index: calc(var(--openbot-layer-dialog) + 1);
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  /* Clips the slides beside the stage. The window, not the stage, clips them, so the image can
   * zoom from a thumbnail under the toolbar or the strip. */
  overflow: hidden;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  color: var(--openbot-text-primary);
  outline: none;
  -webkit-app-region: no-drag;
}

.image-lightbox-chrome {
  animation: image-lightbox-fade-in var(--openbot-duration-overlay) var(--openbot-ease-out);
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}

.image-lightbox[data-closing] .image-lightbox-chrome {
  opacity: 0;
}

.image-lightbox-toolbar {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3) var(--openbot-space-4);
}

.image-lightbox-caption {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: var(--openbot-space-2);
}

.image-lightbox-name {
  overflow: hidden;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-lightbox-position {
  flex: none;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}

.image-lightbox-actions {
  display: flex;
  flex: none;
  gap: var(--openbot-space-1);
}

.image-lightbox-stage {
  position: relative;
  min-height: 0;
  /* A sideways swipe steps the images; the browser keeps vertical scroll only. */
  touch-action: pan-y;
}

/* The current image and its neighbours sit side by side, one stage width apart. A step moves the
 * track, so the images slide as a carousel. */
.image-lightbox-track {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.image-lightbox-slide {
  position: absolute;
  inset: 0;
  display: grid;
  /* Fixed tracks, so the image's percentage limits resolve and a tall image fits the stage. */
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  padding: 0 calc(var(--openbot-space-8) * 2);
  transform: translateX(calc(var(--image-lightbox-slide) * 100%));
}

.image-lightbox-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--openbot-radius-md);
  user-select: none;
  will-change: transform;
}

/* Hidden until it loads, so the zoom starts from the thumbnail rather than after a flash of the
 * image at full size. */
.image-lightbox-image-pending {
  opacity: 0;
}

.image-lightbox-error {
  margin: 0;
  color: var(--openbot-text-muted);
}

.image-lightbox-step {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control);
}

.image-lightbox-step-previous {
  left: var(--openbot-space-4);
}

.image-lightbox-step-next {
  right: var(--openbot-space-4);
}

.image-lightbox-strip {
  /* Above the image, which gets its own layer while it zooms. */
  position: relative;
  display: flex;
  overflow-x: auto;
  /* `safe` keeps the first thumbnails reachable when the strip is wider than the window. */
  justify-content: safe center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-3) var(--openbot-space-4) var(--openbot-space-4);
  scrollbar-width: none;
}

.image-lightbox-thumb {
  flex: none;
  width: var(--openbot-control-xl);
  height: var(--openbot-control-xl);
  overflow: hidden;
  border-radius: var(--openbot-radius-sm);
  padding: 0;
  opacity: 0.5;
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}

.image-lightbox-thumb[aria-current="true"] {
  box-shadow: 0 0 0 2px var(--openbot-text-primary);
  opacity: 1;
}

.image-lightbox-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-lightbox-thumb:focus-visible,
.image-lightbox-step:focus-visible,
.image-lightbox-action:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .image-lightbox-thumb:hover {
    opacity: 1;
  }
}

@media (max-width: 640px) {
  .image-lightbox-slide {
    padding: 0;
  }

  .image-lightbox-step {
    display: none;
  }
}

@keyframes image-lightbox-fade-in {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .image-gallery-tile img,
  .image-lightbox-chrome,
  .image-lightbox-thumb {
    animation: none;
    transition: none;
  }
}
.composer-wrap:has(.composer-attachment) .agent-queue-panel {
  margin-bottom: 0;
}

.agent-queue-panel-list {
  /* Seven rows, then the list scrolls. */
  max-height: calc(7 * var(--queue-row-height) + 2 * var(--queue-row-gutter));
  overflow-y: auto;
  padding: var(--queue-row-gutter) var(--queue-row-inset-end) var(--queue-row-gutter) var(--queue-row-inset-start);
  overscroll-behavior: contain;
}

.agent-queue-item {
  --queue-drag-step: 0;

  position: relative;
  display: grid;
  height: var(--queue-row-height);
  min-height: 0;
  min-width: 0;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  margin: 0;
  border: 0;
  padding: 0;
  border-radius: var(--openbot-radius-md);
  color: var(--openbot-queue-text);
  cursor: grab;
  outline: 0;
  transform: translate3d(0, calc(var(--queue-drag-step) * var(--queue-row-height)), 0);
  transition:
    height var(--openbot-duration-slow) var(--openbot-ease-out),
    opacity var(--openbot-duration-fast) ease,
    transform var(--openbot-duration-slow) var(--openbot-ease-out);
}

.agent-queue-item-entering {
  animation: queue-item-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}

.agent-queue-item-removing {
  height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, -4px, 0) scale(0.985);
  will-change: height, opacity, transform;
}

.agent-queue-panel-dragging .agent-queue-item {
  will-change: transform;
}

/* The fill reaches past the row to the gutter, which the two insets above leave unequal. */
.agent-queue-item::before {
  position: absolute;
  z-index: 0;
  inset: 0 calc(var(--queue-row-gutter) - var(--queue-row-inset-end)) 0
    calc(var(--queue-row-gutter) - var(--queue-row-inset-start));
  border-radius: var(--openbot-radius-md);
  background: transparent;
  content: "";
  pointer-events: none;
  transition: background-color var(--openbot-duration-hover) ease;
}

.agent-queue-item > * {
  position: relative;
  z-index: 1;
}

.agent-queue-item:hover,
.agent-queue-item:focus-visible,
.agent-queue-item-drag-over {
  z-index: 1;
}

.agent-queue-item:hover::before,
.agent-queue-item:focus-visible::before {
  background: var(--openbot-hover);
}

.agent-queue-panel-dragging .agent-queue-item:not(.agent-queue-item-dragging):hover::before {
  background: transparent;
}

.agent-queue-item:focus-visible {
  box-shadow: 0 0 0 2px var(--openbot-border-focus);
}

.agent-queue-item-dragging {
  z-index: 0;
  cursor: grabbing;
  opacity: 0;
}

.agent-queue-item-dragging::before {
  background: transparent;
  box-shadow: none;
}

.agent-queue-drag-preview {
  position: fixed;
  z-index: var(--openbot-layer-dropdown);
  box-sizing: border-box;
  min-height: 31px;
  margin: 0;
  border: 1px solid var(--openbot-border-strong);
  background: var(--openbot-bg-surface-raised);
  box-shadow: var(--openbot-shadow-raised);
  opacity: 0.96;
  pointer-events: none;
  transform: none;
}

.agent-queue-drag-preview::before {
  display: none;
}

.agent-queue-item-steering {
  color: var(--openbot-text-muted);
}

.agent-queue-item-editing {
  color: var(--openbot-text-muted);
}

.agent-queue-editing-badge {
  flex: none;
  padding: 0 6px;
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 18px;
  white-space: nowrap;
}

.agent-queue-item-has-attachment {
  grid-template-columns: 14px 24px minmax(0, 1fr) auto;
}

.agent-queue-icon {
  display: grid;
  place-items: center;
  color: var(--openbot-queue-action);
}

.agent-queue-icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}

.agent-queue-attachment {
  display: grid;
  width: 24px;
  height: 24px;
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--openbot-queue-border);
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-bg-canvas);
  color: var(--openbot-queue-action);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-glyph-xs);
  line-height: 1;
}

.agent-queue-attachment img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.agent-queue-steer svg,
.agent-queue-icon-button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}

.agent-queue-message {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: var(--openbot-text-lg);
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-queue-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--openbot-queue-action);
}

.agent-queue-steer,
.agent-queue-icon-button {
  display: inline-flex;
  height: 26px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  padding: 0 4px;
  color: inherit;
  font-size: var(--openbot-text-lg);
  line-height: 18px;
  transition:
    background var(--openbot-duration-hover) ease,
    color var(--openbot-duration-hover) ease;
}

.agent-queue-steer:hover:not(:disabled),
.agent-queue-steer:focus-visible,
.agent-queue-icon-button:hover:not(:disabled),
.agent-queue-icon-button:focus-visible {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
  outline: 0;
}

.agent-queue-steer:disabled,
.agent-queue-icon-button:disabled {
  cursor: default;
  opacity: 0.45;
}

.agent-queue-icon-button {
  width: 26px;
  padding: 0;
}

.agent-queue-icon-button.agent-queue-delete:hover:not(:disabled),
.agent-queue-icon-button.agent-queue-delete:focus-visible {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
  opacity: 1;
}

@media (max-width: 620px) {
  .agent-queue-panel {
    margin-right: 2px;
    margin-left: 2px;
  }

  .agent-queue-steer {
    width: 26px;
    padding: 0;
  }

  .agent-queue-steer span {
    display: none;
  }
}

@keyframes queue-panel-in {
  from {
    opacity: 0;
    transform: translateY(5px) scale(0.995);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes queue-item-in {
  from {
    opacity: 0;
    transform: translate3d(0, -4px, 0) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}
/* The tasks of an agent: the chips at the foot of its chat, the header menu and the task panel. */
.agent-tasks-mark {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  --task-list-glyph: 14px;
}

.agent-tasks-menu-title {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agent-task-chips {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--openbot-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.agent-task-chip-row {
  display: flex;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  gap: var(--openbot-space-1);
}

.agent-task-chip.ui-button {
  display: inline-flex;
  min-width: 0;
  max-width: min(100%, 560px);
  height: var(--openbot-control-md);
  align-items: center;
  gap: var(--openbot-space-2);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-pill);
  padding: 0 var(--openbot-space-2) 0 var(--openbot-space-3);
  font-weight: inherit;
  --task-list-glyph: 14px;
}

.agent-task-chip-title {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-task-chip-status {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-task-chip-chevron {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
}

.agent-task-chip-close.ui-button {
  display: grid;
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  color: var(--openbot-text-muted);
}

.agent-task-chip-close svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

/* The task list of the side panel. */
.agent-task-list {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--openbot-space-0-5);
  min-height: 0;
  overflow-y: auto;
  padding: var(--openbot-space-2);
}

.agent-task-list .agent-tasks-mark {
  width: 16px;
}

/* The closed tasks of one day, under its heading. */
.agent-task-list-group {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-0-5);
  margin-top: var(--openbot-space-2);
}

.agent-task-list-day {
  margin: 0;
  padding: var(--openbot-space-1) var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: 500;
}

.agent-tasks-disclosure {
  color: var(--openbot-text-secondary);
}

.agent-tasks-disclosure .agent-tasks-icon {
  color: var(--openbot-text-muted);
  transition: transform var(--openbot-duration-fast) ease;
}

.agent-tasks-disclosure[aria-expanded="true"] .agent-tasks-icon {
  transform: rotate(90deg);
}

.agent-tasks-trigger-dot {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 5px;
  height: 5px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
}

/* The task panel, in the place of the other side panels. */
.agent-tasks-panel .file-preview-header {
  --task-list-glyph: 16px;
}

.agent-tasks-panel-origin {
  margin: 0;
  padding: var(--openbot-space-3) var(--openbot-space-4) 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

.agent-tasks-panel-queued {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  padding: 0 var(--openbot-space-4);
}

.agent-tasks-panel-queued-text {
  margin: 0;
  overflow: hidden;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-tasks-panel-note {
  margin: 0;
  border-top: 1px solid var(--openbot-border);
  padding: var(--openbot-space-3) var(--openbot-space-4);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

/*
 * The compact composer of the task panel has no attach button, so it drops the empty first column, as
 * `.side-question-composer` does.
 */
.agent-tasks-panel .composer[data-compact] {
  grid-template-columns: minmax(0, 1fr) auto;
}

.agent-tasks-panel .composer[data-compact] > .composer-input-label {
  grid-column: 1;
}

.agent-tasks-panel .composer[data-compact] .composer-primary-actions {
  grid-column: 2;
}

@media (prefers-reduced-motion: reduce) {
  .agent-tasks-disclosure .agent-tasks-icon {
    transition: none;
  }
}
/* The side question pane, in the place of the other side panels. */
.side-question-empty {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-1-5);
  padding: var(--openbot-space-8) var(--openbot-space-4);
  text-align: center;
}

.side-question-empty > svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  margin-bottom: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  stroke-width: var(--openbot-icon-stroke);
}

.side-question-empty > strong {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  font-weight: 500;
}

.side-question-empty > p {
  max-width: 320px;
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

/* The chat composer's compact row, without its attach button: the editor and the send button. */
.side-question-composer.composer[data-compact] {
  grid-template-columns: minmax(0, 1fr) auto;
}

.side-question-composer.composer[data-compact] > .composer-input-label {
  grid-column: 1;
}

.side-question-composer.composer[data-compact] .composer-primary-actions {
  grid-column: 2;
}
/* Spoken replies: the speaking bar above the composer, and the voice pane in the side panel. */

.speaking-bar {
  display: flex;
  width: min(560px, 100%);
  align-items: center;
  gap: var(--openbot-space-3);
  margin: 0 auto var(--openbot-space-2);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface-raised);
  box-shadow: var(--openbot-shadow-raised);
  padding: var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-2);
  animation: speaking-bar-in var(--openbot-duration-normal) var(--openbot-ease-out) both;
}

@keyframes speaking-bar-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

/* The face is drawn low in its own box; the app lifts it by the same share. */
.speaking-bar-avatar {
  --agent-avatar-optical-offset: calc(28px * -0.14);

  width: 28px;
  height: 28px;
  flex: 0 0 auto;
}

.speaking-bar-waveform {
  max-width: 120px;
  flex: 0 0 auto;
  color: var(--openbot-accent);
}

.speaking-bar-caption {
  min-width: 0;
  flex: 1;
  margin: 0;
  overflow: hidden;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: var(--openbot-space-4);
}

.voice-panel-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-0-5);
}

.voice-panel-name {
  margin: 0;
  font-size: var(--openbot-text-md);
  font-weight: 600;
}

.voice-panel-phase {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

.voice-panel-stage {
  display: flex;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-8);
}

.voice-panel-presence {
  position: relative;
  display: grid;
  width: 140px;
  height: 140px;
  place-items: center;
  transform: scale(var(--voice-presence-scale, 1));
  transition:
    transform var(--openbot-duration-fast) linear,
    opacity var(--openbot-duration-normal) ease;
}

/* A soft glow of the accent colour behind the face, brighter while the agent speaks. */
.voice-panel-presence::before {
  position: absolute;
  inset: -24px;
  border-radius: var(--openbot-radius-pill);
  background: radial-gradient(closest-side, var(--openbot-accent-soft), transparent);
  content: "";
  opacity: 0.5;
  transition: opacity var(--openbot-duration-normal) ease;
}

.voice-panel-presence[data-phase="speaking"]::before {
  opacity: 1;
}

.voice-panel-presence[data-phase="thinking"]::before {
  animation: voice-panel-think 1.6s var(--openbot-ease-in-out) infinite alternate;
}

@keyframes voice-panel-think {
  to {
    opacity: 0.15;
  }
}

.voice-panel-avatar {
  --agent-avatar-optical-offset: calc(112px * -0.14);

  position: relative;
  width: 112px;
  height: 112px;
}

/* The waveform keeps its place when it is hidden, so the captions do not move. */
/* A muted microphone: the agent's face dims until the user speaks again. */
.voice-panel-presence[data-muted] {
  opacity: 0.5;
}

.voice-panel-waveform {
  display: flex;
  width: 141px;
  color: var(--openbot-text-secondary);
  opacity: 0;
  transition: opacity var(--openbot-duration-normal) ease;
}

.voice-panel-waveform[data-phase] {
  opacity: 1;
}

.voice-panel-waveform[data-phase="speaking"] {
  color: var(--openbot-accent);
}

.voice-panel-captions {
  width: 100%;
  min-height: calc(var(--openbot-leading-xl) * 4);
  overflow-y: auto;
  text-align: center;
}

.voice-panel-caption {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-xl);
  line-height: var(--openbot-leading-xl);
}

.voice-panel-caption[data-empty] {
  color: var(--openbot-text-muted);
}

.voice-panel-error {
  color: var(--openbot-danger);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}

.voice-panel-controls {
  display: flex;
  justify-content: center;
  gap: var(--openbot-space-4);
}

.voice-panel-control {
  border-radius: var(--openbot-radius-pill);
  transition:
    background-color var(--openbot-duration-fast) ease,
    color var(--openbot-duration-fast) ease;
}

@media (prefers-reduced-motion: reduce) {
  .speaking-bar,
  .voice-panel-presence[data-phase="thinking"]::before {
    animation: none;
  }

  .voice-panel-presence {
    transform: none;
  }
}

/* Under a message of a spoken turn: plays the user's recording, or reads the reply aloud again. */
.voice-player {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-top: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
}

.voice-player-toggle {
  flex: none;
  border-radius: var(--openbot-radius-pill);
}

.voice-player-toggle svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

.voice-player-track {
  flex: none;
}

.voice-player-bars {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 24px;
}

.voice-player-bar {
  width: 2px;
  height: calc(3px + var(--voice-peak, 0) * 17px);
  border-radius: var(--openbot-radius-pill);
  background: currentColor;
  opacity: 0.45;
}

.voice-player-bar[data-played] {
  background: var(--openbot-accent);
  opacity: 1;
}

.voice-player-time {
  min-width: 3ch;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
.conversation-panel:has(.settings-panel) .conversation-header,
.conversation-panel:has(.settings-panel) .conversation-scroll,
.conversation-panel:has(.settings-panel) .composer-wrap {
  width: calc(100% - var(--settings-panel-width, 296px));
}

.conversation-panel:has(.settings-panel) .chat-search {
  right: calc(var(--settings-panel-width, 296px) + 16px);
  max-width: calc(100% - var(--settings-panel-width, 296px) - 32px);
}

.conversation-panel:has(#browser-side-panel) .chat-search,
.conversation-panel:has(#file-preview-panel) .chat-search {
  right: calc(var(--browser-panel-width, 380px) + 16px);
  max-width: calc(100% - var(--browser-panel-width, 380px) - 32px);
}

.conversation-panel:has(#browser-side-panel) .conversation-header,
.conversation-panel:has(#browser-side-panel) .conversation-scroll,
.conversation-panel:has(#browser-side-panel) .composer-wrap,
.conversation-panel:has(#file-preview-panel) .conversation-header,
.conversation-panel:has(#file-preview-panel) .conversation-scroll,
.conversation-panel:has(#file-preview-panel) .composer-wrap {
  width: 100%;
}

@keyframes message-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes agent-activity-dot {
  0%,
  60%,
  100% {
    opacity: 0.34;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

@keyframes agent-picker-in {
  from {
    opacity: 0;
    transform: translateY(-3px) scale(0.995);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes settings-panel-in {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes browser-control-pulse {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.88);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}

@media (prefers-reduced-motion: reduce) {
  .browser-panel,
  .remote-desktop-workspace,
  .message-entry,
  .chat-action-entry-animated,
  .agent-activity-entry,
  .agent-activity-content,
  .agent-activity-avatar,
  .agent-row-thinking-dots i,
  .agent-row-agent-status-responded,
  .agent-row-agent-status-unread,
  .mention-picker,
  .mention-picker-list,
  .settings-panel {
    animation: none;
    transition: none;
  }

  .agent-activity-avatar,
  .agent-activity-entry[data-state="exiting"] .agent-activity-avatar {
    transform: none;
  }

  .agent-queue-item {
    animation: none;
    transition: none;
  }

  .agent-queue-panel {
    transition: none;
  }

  .agent-queue-slot {
    transition: none;
  }

  .agent-queue-panel-resize,
  .message-content-resize {
    will-change: auto;
  }

  .computer-control-dot {
    animation: none;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes modal-in {
  from {
    opacity: 0;
    transform: scale(0.97) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.attachment-drop-overlay {
  position: absolute;
  z-index: 60;
  inset: 12px;
  display: grid;
  place-items: center;
  border: 1px dashed color-mix(in srgb, var(--accent) 70%, var(--openbot-text-primary));
  border-radius: var(--openbot-radius-lg);
  background: color-mix(in srgb, var(--background) 38%, transparent);
  color: var(--text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: 650;
  backdrop-filter: blur(3px);
  pointer-events: none;
}
/*
 * The side panel: a row of tabs in the top row, above the open pane. The panes keep their own
 * position and width; in the dock they start under the tab row.
 */
.side-panel-header {
  position: absolute;
  z-index: 16;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
  width: var(--side-panel-width, 380px);
  height: var(--left-header-height, 38px);
  min-width: 0;
  padding: 0 var(--openbot-space-2);
  container: side-panel-header / inline-size;
}

/* A short line at the start of the tab row, above the panel's divider. */
.side-panel-header::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: var(--openbot-icon-lg);
  translate: 0 -50%;
  background: var(--openbot-border-strong);
  content: "";
  pointer-events: none;
}

.side-panel-tabs {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--openbot-space-1);
  min-width: 0;
}

.side-panel-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--openbot-space-0-5);
  color: var(--openbot-text-muted);
}

.side-panel-actions svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

/* A tab is the same chip as the other controls of the top row. */
.side-panel-tab {
  position: relative;
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: var(--openbot-space-1-5);
  min-width: 0;
  height: var(--openbot-control-sm);
  padding: 0 var(--openbot-space-2) 0 var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-md);
  color: var(--openbot-text-secondary);
}

.side-panel-tab:hover {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}

.side-panel-tab[data-selected] {
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
}

/* Between two tabs, in the middle of their gap. It hides next to the selected or hovered tab. */
.side-panel-tab + .side-panel-tab::before {
  position: absolute;
  top: 50%;
  left: calc(var(--openbot-space-1) / -2 - 0.5px);
  width: 1px;
  height: var(--openbot-icon-lg);
  translate: 0 -50%;
  background: var(--openbot-border-strong);
  content: "";
  pointer-events: none;
}

.side-panel-tab:is([data-selected], :hover)::before,
.side-panel-tab:is([data-selected], :hover) + .side-panel-tab::before {
  opacity: 0;
}

.side-panel-tab-select {
  display: block;
  height: auto;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 0;
  cursor: pointer;
}

/* The tab draws the hover fill, so the shared ghost hover of the button stays off. */
.side-panel-tab-select:hover:not(:disabled):not([data-disabled]) {
  background: transparent;
  color: inherit;
}

/* The tab icon slot. On hover or focus, a round fill and an X replace the icon. */
.side-panel-tab-close {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  padding: 0;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.side-panel-tab-icon,
.side-panel-tab-x {
  grid-area: 1 / 1;
}

.side-panel-tab-icon {
  display: grid;
  opacity: 0.7;
}

.side-panel-tab-icon svg,
.side-panel-tab-x {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

.side-panel-tab-x {
  opacity: 0;
}

.side-panel-tab:is(:hover, :focus-within) .side-panel-tab-close {
  background: var(--openbot-bg-control-hover);
}

.side-panel-tab:is(:hover, :focus-within) .side-panel-tab-icon {
  opacity: 0;
}

.side-panel-tab:is(:hover, :focus-within) .side-panel-tab-x {
  opacity: 1;
}

.side-panel-tab-close:hover:not(:disabled):not([data-disabled]) {
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
}

.side-panel-tab-select:focus-visible {
  box-shadow: var(--openbot-focus-ring);
  outline: none;
}

/* When the labels of all tabs do not fit, a tab that is not selected shows only its icon. The whole
 * tab then selects its pane. The selected tab keeps its label, and its icon still closes it. With the
 * keyboard, Delete closes the focused tab. */
@container side-panel-header (max-width: 480px) {
  .side-panel-tabs:has(> .side-panel-tab:nth-child(4)) {
    --side-panel-tabs-compact: 1;
  }
}

@container side-panel-header (max-width: 360px) {
  .side-panel-tabs:has(> .side-panel-tab:nth-child(3)) {
    --side-panel-tabs-compact: 1;
  }
}

@container style(--side-panel-tabs-compact: 1) {
  .side-panel-tab:not([data-selected]) {
    padding: 0 var(--openbot-space-1-5);
  }

  .side-panel-tab:not([data-selected]) .side-panel-tab-select {
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }

  .side-panel-tab:not([data-selected]) .side-panel-tab-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .side-panel-tab:not([data-selected], :focus-within) .side-panel-tab-close {
    background: transparent;
  }

  .side-panel-tab:not([data-selected], :focus-within) .side-panel-tab-icon {
    opacity: 0.7;
  }

  .side-panel-tab:not([data-selected], :focus-within) .side-panel-tab-x {
    opacity: 0;
  }
}

/* In the dock, a pane starts under the tab row. Its inset card starts at the top row's line. */
.side-panel-docked > :is(.browser-panel, .settings-panel) {
  top: var(--left-header-height, 38px);
}

.app-frame-edge .side-panel-docked > :is(.browser-panel, .settings-panel)::before {
  top: -1px;
}

/* The tab in the top row names the pane and closes it, so a pane does not repeat its title or its
 * close button. A pane keeps only what the tab does not have: Back, the task actions, the file summary. */
.side-panel-docked :is(.side-panel-pane-header, .side-panel-pane-title, .side-panel-pane-close) {
  display: none;
}

/* The settings header is three fixed columns, so its title stays in the middle without the button. */
.side-panel-docked .settings-panel-header > .side-panel-pane-close {
  display: inline-flex;
  visibility: hidden;
}

/* With no open pane, the dock lists the panes it can open. */
.side-panel-empty {
  justify-content: center;
}

.side-panel-launcher {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1-5);
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  padding: var(--openbot-space-6);
}

.side-panel-launch {
  justify-content: flex-start;
  gap: var(--openbot-space-3);
}

/* A maximized dock covers the chat and its header. */
.side-panel-maximized > :is(.browser-panel, .settings-panel, .side-panel-header) {
  width: 100%;
}

.side-panel-maximized > .side-panel-header::before,
.side-panel-maximized .right-panel-resizer {
  display: none;
}

.side-panel-maximized > :is(.conversation-header, .conversation-scroll, .composer-wrap) {
  visibility: hidden;
}

/* Pane icons have the size of the other menu and row icons. */
:is(.side-panel-launch, .side-panel-menu-item) svg {
  flex: none;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
}
/*
 * The same slab the queue panel uses, in a warning tone: it sits on 12px side margins, keeps the
 * large radius, and tucks its lower edge under the composer so the two read as one control. The
 * tinted fill carries the warning on its own, so there is no outline to draw a second edge next to
 * the composer's.
 */
.composer-notice {
  --notice-composer-overlap: 14px;
  /* The clearance around the button on its three free sides; see the radius note below. */
  --notice-inset: 6px;
  /* The warning tone is the default because a notice the user can clear themselves is the common
     one. `data-tone="danger"` below is for a state only time or another model ends. */
  --notice-accent: var(--openbot-warning);
  --notice-surface: var(--openbot-warning-soft);

  position: relative;
  z-index: 10;
  display: flex;
  margin: 0 12px calc(-1 * var(--notice-composer-overlap));
  /* The trailing button carries its own side padding, so the end inset is smaller than the start. */
  padding: var(--notice-inset) var(--notice-inset) calc(var(--notice-inset) + var(--notice-composer-overlap)) 12px;
  align-items: center;
  gap: 10px;
  border: none;
  /*
   * Concentric with the button it holds: the card radius is the button's 8px plus the 6px inset.
   * A smaller card radius makes its arc cut inside the button's corner, and the even clearance
   * stops looking even.
   */
  border-radius: var(--openbot-radius-card);
  background: var(--notice-surface);
  animation: queue-panel-in var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1) both;
}

/* The tone the usage rings already give a spent plan window, so one state keeps one colour. The
   text token, not the fill token, because this colour carries words on a dark surface. */
.composer-notice[data-tone="danger"] {
  --notice-accent: var(--openbot-danger-text);
  --notice-surface: var(--openbot-danger-soft);
}

/*
 * A card with no action has no button to hold its height or to stand the end inset off, so the
 * copy carries both: the same 12px on each side, and a little more above and below than the
 * clearance a 32px button already gives.
 */
.composer-notice:not(:has(.ui-button)) {
  --notice-inset: 8px;

  padding-right: 12px;
}

.composer-notice-icon {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--notice-accent);
}

/* The button set has no warning variant, so the notice tints the outline button it already uses. */
.composer-notice .ui-button {
  border-color: transparent;
  background: color-mix(in srgb, var(--notice-accent) 14%, transparent);
  color: var(--notice-accent);
}

@media (hover: hover) {
  .composer-notice .ui-button:hover:not(:disabled):not([data-disabled]) {
    background: color-mix(in srgb, var(--notice-accent) 24%, transparent);
    color: var(--notice-accent);
  }
}

.composer-notice-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 0;
}

.composer-notice-copy strong {
  color: var(--notice-accent);
  font-size: var(--openbot-text-sm);
  font-weight: 600;
  /* The two lines are tight against each other so the stack costs as little height as one row. */
  line-height: 1.35;
}

.composer-notice-copy p {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: 1.35;
}

/*
 * The close button reads as a control, not as the action the card offers: the tinted fill above
 * belongs to the one button that resolves a state (Sign in), and an X that carried the same fill
 * would compete with it wherever both appear. It takes the accent only under the pointer.
 */
.composer-notice-dismiss {
  flex: none;
  align-self: flex-start;
}

.composer-notice .composer-notice-dismiss {
  background: transparent;
  color: var(--notice-accent);
}

@media (hover: hover) {
  .composer-notice .composer-notice-dismiss:hover:not(:disabled):not([data-disabled]) {
    background: color-mix(in srgb, var(--notice-accent) 18%, transparent);
  }
}

/* The code sign-in is the second way in: outlined beside the tinted Sign in button. */
.composer-notice .composer-notice-code-fallback {
  flex: none;
  border-color: color-mix(in srgb, var(--notice-accent) 45%, transparent);
  background: transparent;
}
/*
 * Context usage: the composer ring, its popover, and the conversation row where a thread was
 * compacted. The breakdown hues reuse the chart palette in a fixed order, as the storage bar does.
 */

/* Ring ------------------------------------------------------------------- */

.context-meter-trigger {
  color: var(--openbot-text-muted);
}

.context-meter-ring {
  width: var(--openbot-icon-md);
}

.context-meter-ring .ui-radial-progress-track,
.context-meter-ring .ui-radial-progress-indicator {
  stroke-width: 6;
}

.context-meter-ring[data-level="quiet"] {
  --ui-radial-progress-color: var(--openbot-text-dim);
}

.context-meter-ring[data-level="normal"] {
  --ui-radial-progress-color: var(--openbot-text-secondary);
}

/* The colour of the compaction notice above the input, so one state keeps one colour. */
.context-meter-ring[data-compacting] {
  --ui-radial-progress-color: var(--openbot-warning);
}

.context-meter-ring[data-compacting] .ui-radial-progress-chart {
  animation: ui-spin 900ms linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .context-meter-ring[data-compacting] .ui-radial-progress-chart {
    animation: none;
  }
}

/* Popover ---------------------------------------------------------------- */

.context-meter-popover {
  z-index: var(--openbot-layer-popover);
  display: flex;
  width: 280px;
  flex-direction: column;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3) var(--openbot-space-4) var(--openbot-space-4);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  transform-origin: var(--kb-popover-content-transform-origin);
  animation: ui-menu-in var(--ui-menu-duration) var(--ui-menu-ease) both;
}

/* The copy that ContentExitMotion leaves in the place of the closed popover plays the exit. */
.context-meter-popover:not([data-expanded]) {
  animation: ui-menu-out var(--ui-menu-duration) var(--ui-menu-ease) both;
}

@media (prefers-reduced-motion: reduce) {
  .context-meter-popover,
  .context-meter-popover:not([data-expanded]) {
    animation: none;
  }
}

.context-meter-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}

.context-meter-title {
  margin: 0;
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
}

.context-meter-percent {
  color: var(--openbot-text-secondary);
  font-variant-numeric: tabular-nums;
}

.context-meter-percent[data-level="warning"] {
  color: var(--openbot-warning-text);
}

.context-meter-percent[data-level="danger"] {
  color: var(--openbot-danger-text);
}

.context-meter-tokens,
.context-meter-note {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

/* The New chat row sits under a full-width divider, in the shape of a menu item. */
.context-meter-footer {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1-5);
  margin: 0 calc(-1 * var(--openbot-space-4)) calc(-1 * var(--openbot-space-4));
  border-top: 1px solid var(--openbot-border);
  padding: var(--openbot-space-1-5);
}

.context-meter-new-chat {
  width: 100%;
  height: var(--openbot-control-md);
  justify-content: flex-start;
  gap: var(--openbot-space-2);
  border-radius: var(--ui-menu-item-radius);
  padding: 0 var(--ui-menu-inset);
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-regular);
}

.context-meter-new-chat:is(:hover, :focus-visible):not(:disabled) {
  background: var(--ui-menu-item-hover);
}

.context-meter-new-chat > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  color: var(--openbot-text-secondary);
}

.context-meter-tokens {
  margin-top: calc(-1 * var(--openbot-space-2));
  font-variant-numeric: tabular-nums;
}

/* Bar -------------------------------------------------------------------- */

.context-usage-bar {
  position: relative;
  display: flex;
  height: var(--openbot-space-2);
  gap: var(--openbot-space-0-5);
}

.context-usage-segment {
  min-width: var(--openbot-space-1);
  flex-basis: 0;
  border-radius: var(--openbot-radius-xs);
  background: var(--context-color);
}

.context-usage-segment[data-category="used"] {
  --context-color: var(--openbot-text-secondary);
}

.context-meter-popover:has(.context-meter-percent[data-level="warning"]) [data-category="used"] {
  --context-color: var(--openbot-warning);
}

.context-meter-popover:has(.context-meter-percent[data-level="danger"]) [data-category="used"] {
  --context-color: var(--openbot-danger);
}

.context-usage-segment[data-category="free"] {
  min-width: 0;
  background: var(--openbot-border);
}

/* Breakdown -------------------------------------------------------------- */

/* The storage bar hues in its order; the conversation itself stays neutral. */
.context-meter-popover [data-category="systemPrompt"] {
  --context-color: var(--openbot-chart-storage-workspaces);
}
.context-meter-popover [data-category="memoryFiles"] {
  --context-color: var(--openbot-chart-storage-chats);
}
.context-meter-popover [data-category="tools"] {
  --context-color: var(--openbot-chart-storage-downloads);
}
.context-meter-popover [data-category="skills"] {
  --context-color: var(--openbot-chart-storage-runtimes);
}
.context-meter-popover [data-category="toolResults"] {
  --context-color: var(--openbot-chart-storage-files);
}
.context-meter-popover [data-category="messages"] {
  --context-color: var(--openbot-text-secondary);
}
.context-meter-popover [data-category="other"] {
  --context-color: var(--openbot-text-dim);
}
.context-meter-popover .context-meter-category[data-category="free"] {
  --context-color: var(--openbot-border);
}

.context-meter-categories {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.context-meter-category {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-0-5) 0;
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.context-meter-swatch {
  width: var(--openbot-space-2);
  height: var(--openbot-space-2);
  align-self: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--context-color);
}

.context-meter-category-label {
  overflow: hidden;
  color: var(--openbot-text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.context-meter-category-tokens {
  color: var(--openbot-text-primary);
  font-variant-numeric: tabular-nums;
}

/* The automatic compaction point: a tick that stands just past the bar's edges. */
.context-usage-threshold {
  position: absolute;
  top: calc(-1 * var(--openbot-space-1));
  bottom: calc(-1 * var(--openbot-space-1));
  width: var(--openbot-space-0-5);
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-text-primary);
  transform: translateX(-50%);
}

/* Composer notice ------------------------------------------------------- */

/* The end is a result, not a wait, so it takes the tone the conversation row gives a completed compaction. */
.context-compaction-notice[data-tone="success"] {
  --notice-accent: var(--openbot-success-text);
  --notice-surface: var(--openbot-success-soft);
}

/*
 * The way out reverses the way in: the slab drops behind the composer, which stacks above it, so it
 * reads as going back into the input. Reduced motion keeps a 1ms fade, because `onDone` waits for
 * the animation to end.
 */
.context-compaction-notice[data-leaving] {
  animation: context-compaction-notice-out var(--openbot-duration-toast-exit) var(--openbot-ease-in-out) forwards;
}

@keyframes context-compaction-notice-out {
  to {
    opacity: 0;
    transform: translateY(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .context-compaction-notice[data-leaving] {
    animation: context-compaction-notice-fade 1ms forwards;
  }
}

@keyframes context-compaction-notice-fade {
  to {
    opacity: 0;
  }
}

.context-compaction-notice .composer-notice-icon {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}

.context-compaction-notice-copy {
  min-width: 0;
  flex: 1;
  margin: 0;
  overflow: hidden;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.context-compaction-notice-copy strong {
  color: var(--notice-accent);
  font-weight: 600;
}

/*
 * The failed state keeps the one-line height of the other states: the inset stays at the no-button
 * value, and a smaller close button overhangs it rather than pushing the slab taller.
 */
.context-compaction-notice:has(.composer-notice-dismiss) {
  --notice-inset: 8px;
}

.context-compaction-notice .composer-notice-dismiss {
  width: var(--openbot-control-xs);
  height: var(--openbot-control-xs);
  min-height: 0;
  margin-block: calc(-1 * var(--openbot-space-1));
  padding: 0;
  align-self: center;
}

.context-compaction-notice-percent {
  flex: none;
  color: var(--notice-accent);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}

/* Conversation row -------------------------------------------------------- */

.context-compaction-body {
  display: flex;
  min-width: 0;
  max-width: 100%;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-2);
}

.context-compaction-icon {
  display: inline-grid;
  place-items: center;
}

.context-compaction-icon svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}

.context-compaction-marker[data-status="completed"] .context-compaction-icon {
  color: var(--openbot-success-text);
}

.context-compaction-marker[data-status="failed"] .context-compaction-icon {
  color: var(--openbot-warning-text);
}

.context-compaction-marker .chat-action-marker-content {
  flex-wrap: wrap;
  justify-content: center;
  min-width: 0;
  white-space: normal;
}

.context-compaction-detail {
  white-space: normal;
}
.conversation-interaction-card {
  box-sizing: border-box;
  min-width: 0;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
  padding: var(--openbot-space-4);
}

.conversation-interaction-header {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--openbot-space-3);
}

.conversation-interaction-header > :is(strong, h2) {
  min-width: 0;
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-lg);
  overflow-wrap: anywhere;
}

.conversation-interaction-status[data-slot="badge"] {
  flex: 0 0 auto;
  gap: var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-md);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}

.conversation-interaction-status svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}

/* The badge says the card is waiting on the person, so its loader has to turn: a frozen spinner
   reads as a stalled step rather than one that is ready for them. */
.conversation-interaction-spinner {
  animation: ui-spin 1s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .conversation-interaction-spinner {
    animation: none;
  }
}
.browser-takeover-card {
  display: flex;
  width: min(540px, 100%);
  margin: var(--openbot-space-3) 0 var(--openbot-space-6);
  flex-direction: column;
  gap: var(--openbot-space-4);
  animation: browser-takeover-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}

.browser-takeover-copy {
  margin-top: calc(-1 * var(--openbot-space-2));
  display: grid;
  gap: var(--openbot-space-1);
}

.browser-takeover-copy p {
  margin: 0;
}

.browser-takeover-copy p {
  max-width: 54ch;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-md);
}

.browser-takeover-preview {
  min-width: 0;
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-canvas);
}

.browser-takeover-preview-bar {
  display: flex;
  height: var(--openbot-control-sm);
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-1-5);
  border-bottom: 1px solid var(--openbot-border);
  background: var(--openbot-bg-control);
  padding: 0 var(--openbot-space-3);
  color: var(--openbot-text-secondary);
}

.browser-takeover-preview-bar svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}

.browser-takeover-preview-bar span,
.browser-takeover-preview-bar small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.browser-takeover-preview-bar span {
  min-width: 0;
  flex: 1;
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}

.browser-takeover-preview-bar small {
  max-width: 42%;
  color: var(--openbot-text-readable);
  font-size: var(--openbot-text-sm);
}

.browser-takeover-preview-viewport {
  display: grid;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  place-items: stretch;
  background: var(--openbot-bg-control);
}

/* The viewport is the button that opens the page, so it keeps the frame it has as a plain
   figure: no button padding, no radius of its own, and the preview stacked under the label. */
.browser-takeover-preview-open.ui-button {
  display: grid;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 0;
  padding: 0;
}

/* The preview and the Open label share one cell, so the label floats over the page image. */
.browser-takeover-preview-open > * {
  grid-area: 1 / 1;
}

.browser-takeover-preview-open-label {
  display: inline-flex;
  align-items: center;
  justify-self: center;
  align-self: center;
  gap: var(--openbot-space-1);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-canvas);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}

.browser-takeover-preview-open-label > svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  stroke-width: var(--openbot-icon-stroke);
}

.browser-takeover-preview-open:hover .browser-takeover-preview-open-label,
.browser-takeover-preview-open:focus-visible .browser-takeover-preview-open-label {
  opacity: 1;
}

.browser-takeover-preview-viewport img,
.browser-takeover-preview-skeleton {
  width: 100%;
  height: 100%;
}

.browser-takeover-preview-viewport img {
  display: block;
  object-fit: cover;
}

.browser-takeover-preview-fallback {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  padding: var(--openbot-space-6);
  text-align: center;
}

.browser-takeover-preview-fallback svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  margin-bottom: var(--openbot-space-1);
  stroke-width: var(--openbot-icon-stroke);
}

.browser-takeover-preview-fallback strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.browser-takeover-preview-fallback span {
  max-width: 100%;
  overflow: hidden;
  color: var(--openbot-text-readable);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.browser-takeover-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}

.browser-takeover-actions .ui-button {
  transition: transform var(--openbot-duration-fast) var(--openbot-ease-out);
}

.browser-takeover-actions .ui-button:active:not(:disabled) {
  transform: scale(0.97);
}

@keyframes browser-takeover-in {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.99);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.question-prompt-bubble.ui-bubble {
  width: min(540px, 100%);
  max-width: 100%;
}

.question-prompt-bubble > .ui-bubble-content {
  width: 100%;
  border-color: var(--openbot-border);
  background: var(--openbot-bg-canvas);
}

.question-prompt-complete {
  min-width: 0;
  display: grid;
  gap: var(--openbot-space-3);
}

.question-prompt-complete-header,
.question-prompt-complete-status {
  display: flex;
  align-items: center;
}

.question-prompt-complete-header {
  min-width: 0;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  min-height: 24px;
}

.question-prompt-complete-status {
  min-width: 0;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-primary);
}

.question-prompt-complete-status svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  color: var(--openbot-success);
  stroke-width: var(--openbot-icon-stroke);
}

.question-prompt-complete:not([data-state="answered"]) .question-prompt-complete-status svg {
  color: var(--openbot-text-muted);
}

.question-prompt-complete-status strong {
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-lg);
  letter-spacing: var(--openbot-tracking-tight);
}

.question-prompt-complete-answers.ui-item-group {
  gap: var(--openbot-space-3);
  border: 0;
  border-radius: 0;
  background: transparent;
}

.question-prompt-complete-answers .ui-item {
  min-height: 0;
  border: 0;
  padding: 0;
}

.question-prompt-complete-answers .ui-item-title,
.question-prompt-complete-answers .ui-item-description {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.question-prompt-complete-answers .ui-item-title {
  font-weight: var(--openbot-weight-regular);
}

.question-prompt-header {
  min-width: 0;
  min-height: var(--openbot-control-xs);
}

.question-prompt-header h2 {
  margin: 0;
  padding-top: var(--openbot-space-0-5);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-lg);
  letter-spacing: var(--openbot-tracking-tight);
}

.question-prompt-navigation {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-0-5);
}

.question-prompt-layout {
  position: relative;
  min-width: 0;
}

.question-prompt-navigation-root.ui-questionnaire {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--openbot-space-4);
}

.question-prompt-navigation-button.ui-button {
  width: 22px;
  height: 22px;
  min-height: 22px;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  background: transparent;
  padding: 0;
  color: var(--openbot-text-muted);
  transition: none;
}

.question-prompt-navigation-button.ui-button:hover:not(:disabled) {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}

.question-prompt-navigation-button.ui-button:focus-visible {
  background: var(--openbot-bg-control-hover);
  box-shadow: 0 0 0 1px var(--openbot-border-strong);
  color: var(--openbot-text-primary);
}

.question-prompt-navigation-button.ui-button:disabled {
  background: transparent;
  color: var(--openbot-text-dim);
  opacity: 0.52;
}

.question-prompt-navigation-button svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}

.question-prompt-navigation .ui-questionnaire-progress {
  min-width: 48px;
  padding-inline: var(--openbot-space-1);
  font-family: var(--openbot-font-sans);
  text-align: center;
}

.question-prompt-cancel {
  margin-left: var(--openbot-space-1);
}

.question-prompt-stage {
  min-width: 0;
  overflow: hidden;
  transition: height var(--page-slide-dur) var(--page-slide-ease);
}

.question-prompt-stage .question-prompt-page {
  bottom: auto;
  display: grid;
  gap: var(--openbot-space-3);
}

.question-prompt-stage:not([data-transitioning]) .question-prompt-page:not([aria-hidden="true"]) {
  position: relative;
}

.question-prompt-stage[data-preparing],
.question-prompt-stage[data-preparing] .t-page {
  transition: none;
}

.question-prompt-options.ui-item-group {
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface);
}

.question-prompt-options > :is(.ui-questionnaire-choice, .question-prompt-custom-row) {
  transition:
    background-color var(--openbot-duration-hover) ease,
    box-shadow var(--openbot-duration-hover) ease;
}

.question-prompt-options > .ui-questionnaire-choice:hover:not([data-disabled]) {
  background: var(--openbot-bg-control-hover);
}

.question-prompt-options > .ui-questionnaire-choice:focus-within {
  outline: 1px solid var(--openbot-border-strong);
  outline-offset: -1px;
  background: var(--openbot-bg-control-hover);
}

.question-prompt-options > .ui-questionnaire-choice[data-checked] {
  background: var(--openbot-bg-control-active);
}

.question-prompt-options .ui-item {
  min-height: 48px;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-2) var(--openbot-space-3);
}

.question-prompt-options .ui-item-title,
.question-prompt-options .ui-item-description {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.question-prompt-options .ui-kbd {
  width: 20px;
  min-width: 20px;
  border-color: var(--openbot-border);
  background: var(--openbot-hover);
  color: var(--openbot-text-muted);
}

.question-prompt-options > .ui-questionnaire-choice[data-checked] .ui-kbd {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-secondary);
}

.question-prompt-choice-arrow {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  color: var(--openbot-text-muted);
  opacity: 0;
  transform: translateX(-3px);
  transition:
    opacity var(--openbot-duration-hover) ease,
    transform var(--openbot-duration-hover) var(--openbot-ease-out);
}

.question-prompt-choice-arrow svg {
  width: 100%;
  height: 100%;
  stroke-width: var(--openbot-icon-stroke);
}

.question-prompt-options
  > .ui-questionnaire-choice:is(:hover, :focus-within, [data-checked])
  .question-prompt-choice-arrow {
  opacity: 1;
  transform: translateX(0);
}

.question-prompt-custom-row {
  min-width: 0;
  min-height: 44px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-1-5) var(--openbot-space-3);
}

.question-prompt-custom-row[data-selected] {
  background: var(--openbot-bg-control-active);
}

.question-prompt-custom-row:focus-within {
  background: var(--openbot-bg-control-hover);
  box-shadow: none;
}

.question-prompt-pencil {
  width: 20px;
  height: 20px;
  display: grid;
  align-self: center;
  place-items: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-hover);
  color: var(--openbot-text-muted);
}

.question-prompt-pencil svg {
  display: block;
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  transform: translateY(-0.5px);
}

.question-prompt-custom-row:focus-within .question-prompt-pencil {
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-secondary);
}

.question-prompt-custom-row .ui-questionnaire-input {
  width: 100%;
  min-height: 30px;
  border: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}

.question-prompt-custom-row .ui-questionnaire-input::placeholder {
  color: var(--openbot-text-muted);
}

.question-prompt-custom-row .ui-questionnaire-input:focus {
  outline: 0;
  box-shadow: none;
}

.question-prompt-inline-actions,
.question-prompt-sending {
  display: flex;
  align-items: center;
}

.question-prompt-inline-actions {
  gap: var(--openbot-space-2);
}

.question-prompt-sending {
  gap: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  white-space: nowrap;
}

.question-prompt-inline-actions [data-slot="questionnaire-skip"] {
  min-height: 28px;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-pill);
  background: transparent;
  padding-inline: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
}

.question-prompt-inline-actions [data-slot="questionnaire-skip"]:hover:not(:disabled) {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}

.question-prompt-inline-actions [data-slot="questionnaire-skip"]:focus-visible {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-control-hover);
  box-shadow: 0 0 0 1px var(--openbot-border-strong);
  color: var(--openbot-text-primary);
}

.question-prompt-empty {
  min-width: 0;
  display: grid;
  gap: var(--openbot-space-0-5);
  padding: var(--openbot-space-1);
}

.question-prompt-empty strong {
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
}

.question-prompt-empty > span {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.question-prompt-history-entry {
  width: min(540px, 100%);
}

@media (max-width: 520px) {
  .question-prompt-bubble.ui-bubble {
    width: 100%;
  }

  .question-prompt-bubble > .ui-bubble-content {
    padding: var(--openbot-space-3);
  }

  .question-prompt-header {
    gap: var(--openbot-space-2);
  }

  .question-prompt-navigation .ui-questionnaire-progress {
    min-width: 42px;
    padding-inline: 0;
  }

  .question-prompt-sending {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .question-prompt-stage {
    transition: none;
  }
}

.approval-card {
  display: flex;
  width: min(540px, 100%);
  margin: var(--openbot-space-3) 0 var(--openbot-space-6);
  flex-direction: column;
  gap: var(--openbot-space-4);
  animation: approval-card-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}

.approval-card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--openbot-space-2);
}

.approval-card-footer > :last-child {
  margin-inline-start: auto;
}

.approval-button {
  border-radius: var(--openbot-radius-pill);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-regular);
}

.approval-card-content {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-3);
}

.approval-card-content:empty {
  display: none;
}

.approval-command-block,
.approval-detail-row,
.approval-permissions {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface);
}

.approval-command-block code {
  display: block;
  overflow-x: auto;
  padding: var(--openbot-space-3);
  color: var(--openbot-text-secondary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-md);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.approval-cwd {
  border-bottom: 1px solid var(--openbot-border);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  color: var(--openbot-text-muted);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  overflow-wrap: anywhere;
}

.approval-detail-row {
  display: grid;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-3);
}

.approval-detail-label {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

.approval-detail-row strong {
  color: var(--openbot-text-secondary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  overflow-wrap: anywhere;
}

.approval-permissions {
  display: grid;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-3);
}

.approval-permissions:empty {
  display: none;
}

.approval-permissions span {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  overflow-wrap: anywhere;
}

.approval-reason {
  margin: calc(-1 * var(--openbot-space-2)) 0 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
  overflow-wrap: anywhere;
}

@keyframes approval-card-in {
  from {
    opacity: 0;
    transform: translateY(5px) scale(0.99);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (max-width: 800px) {
  .direct-private-label {
    display: none;
  }

  .direct-message-list,
  .direct-composer-wrap {
    padding-right: 14px;
    padding-left: 14px;
  }

  .direct-message > .ui-message-content {
    max-width: 88%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto;
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
  }
}
/* Interactive blocks an agent draws: confirm, choice, quick replies and form. Tokens only. */

.ui-block-card {
  display: flex;
  max-width: 600px;
  flex-direction: column;
  gap: var(--openbot-space-3);
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-surface);
  transition: border-color var(--openbot-duration-slow) var(--openbot-ease-out);
}

.ui-block-card[data-danger] {
  border-color: var(--openbot-danger-border);
}

.ui-block-card[data-status="expired"],
.ui-block-card[data-status="closed"] {
  color: var(--openbot-text-muted);
}

.ui-block-header {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--openbot-space-3);
}

.ui-block-heading {
  min-width: 0;
}

.ui-block-title {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-xl);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-xl);
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.ui-block-subtitle {
  margin: var(--openbot-space-0-5) 0 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}

.ui-block-status[data-slot="badge"] {
  flex: 0 0 auto;
  gap: var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-pill);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}

.ui-block-status svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}

.ui-block-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--openbot-space-3);
}

.ui-block-body:empty {
  display: none;
}

/* The line a frozen block ends with. */
.ui-block-outcome {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
  margin: 0;
  padding: var(--openbot-space-2) var(--openbot-space-3);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-glass-surface);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}

.ui-block-outcome[data-status="answered"] {
  background: var(--openbot-success-soft);
  color: var(--openbot-success-text);
}

.ui-block-outcome svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
}

.ui-block-outcome-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* The end of an open block: a failed answer and the skip button. */
.ui-block-footer {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}

.ui-block-error {
  min-width: 0;
  flex: 1 1 auto;
  margin: 0;
  color: var(--openbot-danger-text);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  overflow-wrap: anywhere;
}

.ui-block-skip {
  margin-inline-start: auto;
}

.ui-block-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--openbot-space-2);
}

/* A block that answers itself has no Skip, so its last button, such as Cancel, sits at the far end. */
.ui-block-actions-auto > button:last-of-type {
  margin-inline-start: auto;
}

.ui-block-confirm-step {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.ui-block-confirm-question {
  padding: 0;
  margin-bottom: var(--openbot-space-2);
  font-weight: var(--openbot-weight-medium);
}

.ui-block-hint,
.ui-block-counter,
.ui-block-sending {
  margin: 0;
  color: var(--openbot-text-dim);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.ui-block-sending {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
}

/* Confirm */
.ui-block-fields {
  display: grid;
  grid-template-columns: minmax(64px, max-content) minmax(0, 1fr);
  align-items: center;
  gap: var(--openbot-space-2) var(--openbot-space-3);
  margin: 0;
  font-size: var(--openbot-text-lg);
}

.ui-block-fields dt {
  color: var(--openbot-text-muted);
}

.ui-block-fields dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.ui-block-preview {
  position: relative;
  max-height: 6.5em;
  overflow: hidden;
  padding: var(--openbot-space-3);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-lg);
}

.ui-block-preview::after {
  position: absolute;
  inset: auto 0 0;
  height: 2.4em;
  background: linear-gradient(transparent, var(--openbot-bg-surface-raised));
  content: "";
  pointer-events: none;
}

.ui-block-preview-text {
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

/* A button held to press. The fill grows from the left while it is held. */
.ui-block-hold {
  position: relative;
  overflow: hidden;
  user-select: none;
  touch-action: none;
}

.ui-block-hold-fill {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, currentColor 22%, transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--openbot-duration-fast) var(--openbot-ease-out);
  pointer-events: none;
}

.ui-block-hold[data-holding] .ui-block-hold-fill {
  transform: scaleX(1);
  transition: transform var(--ui-block-hold-duration) linear;
}

.ui-block-hold-label {
  position: relative;
}

/* Choice */
.ui-block-options {
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-card);
}

.ui-block-option {
  position: relative;
  display: grid;
  grid-template-columns: var(--openbot-control-xs) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3);
  cursor: pointer;
  transition: background var(--openbot-duration-fast) var(--openbot-ease-out);
}

.ui-block-option + .ui-block-option {
  border-top: 1px solid var(--openbot-border-strong);
}

.ui-block-option:hover {
  background: var(--openbot-hover);
}

.ui-block-option[data-checked] {
  background: var(--openbot-question-option-soft);
}

.ui-block-option[data-disabled] {
  cursor: default;
}

.ui-block-option[data-disabled]:not([data-checked]) {
  opacity: 0.5;
}

.ui-block-option:focus-within {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: -2px;
}

.ui-block-option .ui-block-option-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: inherit;
}

.ui-block-option-key {
  display: grid;
  width: var(--openbot-control-xs);
  height: var(--openbot-control-xs);
  place-items: center;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-muted);
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
}

.ui-block-option[data-checked] .ui-block-option-key {
  border-color: var(--openbot-question-option);
  background: var(--openbot-question-option);
  color: var(--openbot-text-on-light);
}

.ui-block-option-label {
  min-width: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-medium);
  overflow-wrap: anywhere;
}

.ui-block-option-meta {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-variant-numeric: tabular-nums;
}

/* Quick replies */
.ui-block-quick {
  display: flex;
  max-width: 600px;
  flex-direction: column;
  gap: var(--openbot-space-2);
}

.ui-block-quick-title {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
}

.ui-block-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-2);
}

.ui-block-chip[data-faded] {
  opacity: 0.35;
}

.ui-block-chip[data-chosen] {
  border-color: var(--openbot-accent);
  background: var(--openbot-accent-soft);
  color: var(--openbot-text-primary);
  opacity: 1;
}

.ui-block-quick-text {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}

.ui-block-quick-text > :first-child {
  flex: 1 1 auto;
  min-width: 0;
}

/* Form */
.ui-block-form-fields {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--openbot-space-3);
}

.ui-block-field {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1-5);
}

.ui-block-field-label {
  padding: 0;
  margin-bottom: var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
}

.ui-block-required {
  margin-inline-start: var(--openbot-space-0-5);
  color: var(--openbot-danger-text);
}

.ui-block-field-error {
  margin: 0;
  color: var(--openbot-danger-text);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.ui-block-segmented {
  display: flex;
  gap: var(--openbot-space-0-5);
  padding: var(--openbot-space-0-5);
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface-raised);
}

.ui-block-segment {
  flex: 1 1 0;
  min-width: 0;
  color: var(--openbot-text-muted);
}

.ui-block-segment[aria-pressed="true"] {
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
}

@media (prefers-reduced-motion: reduce) {
  .ui-block-card,
  .ui-block-option,
  .ui-block-hold-fill {
    transition: none;
  }
}
.settings-panel,
.browser-panel,
.remote-desktop-workspace {
  background: var(--openbot-bg-canvas);
}

.composer-reply-preview {
  border-color: var(--openbot-border);
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-primary);
}

.message-reaction-pill {
  border-color: var(--openbot-border);
  background: transparent;
  color: var(--openbot-text-primary);
}

@media (hover: hover) and (pointer: fine) {
  .message-reaction-pill:not(.message-reaction-pill-readonly):hover {
    background: var(--openbot-hover);
  }
}

.composer,
.direct-composer {
  background: var(--openbot-bg-surface);
}

.direct-composer > button:hover:not(:disabled) {
  background: var(--openbot-accent-hover);
}

.remote-desktop-stage,
.remote-desktop-viewer {
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-secondary);
}

.remote-desktop-header {
  background: var(--openbot-bg-sidebar);
}

.voice-button:active,
.voice-button-active:active {
  transform: scale(0.97);
}

/* A filled field with no border, in the menu item shape. */
.provider-model-search {
  height: var(--openbot-control-md);
  flex-shrink: 0;
  margin-bottom: var(--ui-menu-padding);
  border-color: transparent;
  border-radius: var(--ui-menu-item-radius);
  background: var(--ui-menu-item-hover);
  padding-inline: var(--ui-menu-inset);
  font-size: var(--openbot-text-md);
}

.provider-model-search:focus-visible {
  border-color: var(--ui-menu-edge);
}

.provider-model-scroll {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.provider-model-group {
  padding: var(--openbot-space-2) var(--ui-menu-inset) var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: 500;
}
/* Browser cards use captured images; only the expanded view owns a live surface. */
.browser-preview-sidebar[hidden] {
  display: none;
}

.browser-preview-header {
  display: flex;
  height: var(--left-header-height, 38px);
  flex: 0 0 auto;
  align-items: center;
  gap: var(--openbot-space-1);
  padding: 0 var(--openbot-space-3);
  color: var(--openbot-text-secondary);
}

.browser-preview-header > span {
  flex: 1;
  font-size: var(--openbot-text-sm);
}

.browser-preview-header > .ui-button,
.browser-preview-close {
  border-radius: var(--openbot-radius-sm);
}

.browser-preview-header > .ui-button:focus-visible,
.browser-preview-close:focus-visible {
  outline: 1px solid var(--openbot-text-muted);
  outline-offset: 1px;
  box-shadow: none;
}

.browser-preview-sidebar .ui-button:active:not(:disabled):not([data-disabled]) {
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
}

.browser-preview-header > .ui-button > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}

.browser-preview-list {
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding: var(--openbot-space-2) var(--openbot-space-4) var(--openbot-space-4);
}

.browser-preview-list > .browser-empty-state {
  height: auto;
  justify-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-8) var(--openbot-space-4);
}

.browser-preview-list > .browser-empty-state > svg,
.browser-preview-image > svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  color: var(--openbot-text-muted);
  stroke-width: var(--openbot-icon-stroke);
}

.browser-preview-list > .browser-empty-state > svg {
  margin-bottom: var(--openbot-space-1);
}

.browser-preview-list > .browser-empty-state > strong {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  font-weight: 500;
}

.browser-preview-list > .browser-empty-state > .ui-button {
  margin-top: var(--openbot-space-1);
}

.browser-preview-card {
  position: relative;
  margin-bottom: var(--openbot-space-4);
}

.browser-preview-open {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-1);
  color: var(--openbot-text-secondary);
  font-weight: 400;
}

.browser-preview-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-surface);
}

.browser-preview-image img,
.browser-preview-loading {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.browser-preview-title {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--openbot-text-sm);
}

.browser-preview-open-label {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  line-height: 1;
  pointer-events: none;
  opacity: 0;
}

.browser-preview-open-label > svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  stroke-width: var(--openbot-icon-stroke);
}

.browser-preview-open:hover .browser-preview-open-label {
  opacity: 1;
}

.browser-preview-close {
  position: absolute;
  top: var(--openbot-space-2);
  right: var(--openbot-space-2);
  opacity: 0;
}

.browser-preview-close > svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  stroke-width: var(--openbot-icon-stroke);
}

.browser-preview-card:hover .browser-preview-close,
.browser-preview-card:focus-within .browser-preview-close {
  opacity: 1;
}

/* The code or the password the agent asks for: the site, the value and Submit. The inner parts are glass
   in both variants; the timeline card keeps its frame, and the island has a denser glass of its own, so that
   the page under it does not show through as dark shapes behind the code. */
.browser-secret-card {
  --otp-slot-border: var(--openbot-glass-border);
  --otp-slot-background: var(--openbot-glass-surface);
  --otp-slot-filled-background: var(--openbot-glass-surface-hover);
  --otp-slot-shadow: inset 0 1px 0 var(--openbot-glass-highlight);

  display: grid;
  gap: var(--openbot-space-4);
  color: var(--openbot-text-primary);
}

.browser-secret-card[data-variant="island"] {
  box-sizing: border-box;
  width: min(100%, 420px);
  min-width: 0;
  padding: var(--openbot-space-4);
  border: 1px solid var(--openbot-glass-border);
  border-radius: var(--openbot-radius-xl);
  background: color-mix(in srgb, var(--openbot-bg-glass), var(--openbot-bg-control) 60%);
  box-shadow: var(--openbot-shadow-raised);
  backdrop-filter: blur(32px) saturate(1.4);
}

.browser-secret-header {
  display: flex;
  align-items: flex-start;
  gap: var(--openbot-space-3);
}

.browser-secret-close {
  flex: none;
  margin-left: auto;
}

.browser-secret-icon {
  display: grid;
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  flex: none;
  place-items: center;
  border: 1px solid var(--openbot-glass-border);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-glass-surface);
  box-shadow: inset 0 1px 0 var(--openbot-glass-highlight);
  color: var(--openbot-text-primary);
}

.browser-secret-glyph {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

.browser-secret-heading {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-0-5);
}

.browser-secret-heading h2 {
  margin: 0;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
}

/* The site is never cut: the user checks it before the value goes there. */
.browser-secret-heading p {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

.browser-secret-origin {
  color: var(--openbot-text-secondary);
  font-weight: var(--openbot-weight-medium);
}

.browser-secret-code,
.browser-secret-password {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-1-5);
}

/* Below the focus and error borders of the field, which are one class strong. */
:where(.browser-secret-password) > input {
  border-color: var(--openbot-glass-border);
  background: var(--openbot-glass-surface);
}

.browser-secret-error {
  margin: 0;
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
}

.browser-secret-footer {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
  padding-top: var(--openbot-space-3);
  border-top: 1px solid var(--openbot-glass-border);
}

.browser-secret-private {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

.browser-secret-glyph-sm {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: none;
}

.browser-secret-card .browser-takeover-preview-viewport {
  width: 100%;
  max-height: 280px;
}

.browser-secret-card .browser-takeover-preview-viewport img {
  min-height: 0;
  object-fit: contain;
}
/* The overlay view above a local page: the page shows through all of it but the dock. */
html:has(.browser-dock-surface),
body:has(.browser-dock-surface),
#root:has(.browser-dock-surface) {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
}

.browser-dock-surface {
  position: relative;
  width: 100%;
  height: 100%;
  background: transparent;
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
}

/*
 * The dock over a browser page: the island for what the agent does, the queue, and the composer of the
 * tab's agent. Each part is glass. The layers are local to the dock: the copies of a motion go under the
 * composer, the sent text goes over it, and the island is on top.
 */
.browser-dock {
  position: absolute;
  bottom: var(--openbot-space-4);
  left: 50%;
  display: flex;
  width: min(640px, calc(100% - 2 * var(--openbot-space-6)));
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-2);
  isolation: isolate;
  translate: -50% 0;
}

.browser-dock-glass {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-0-5);
  border: 1px solid var(--openbot-glass-border);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-glass);
  box-shadow: var(--openbot-shadow-raised);
  backdrop-filter: blur(16px);
  color: var(--openbot-text-secondary);
}

.browser-dock-composer svg,
.browser-dock-island-activity svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

/* The island: one glass capsule over the composer for the step, the code and the reply. A spring sets its
   size and corners while it changes; at rest, its content sets them. */
.browser-dock-island {
  position: relative;
  z-index: 4;
  box-sizing: border-box;
  max-width: 100%;
}

/* It grows out from under the composer, so it is under the composer until it is open. */
.browser-dock-island[data-budding] {
  z-index: 1;
}

.browser-dock-island:is([data-mode="reply"], [data-mode="secret"]) {
  width: 100%;
  border-radius: var(--openbot-radius-lg);
}

/* The code card is narrower than the reply, and its glass is denser, so that the page under it does not show
   through as dark shapes behind the code. */
.browser-dock-island[data-mode="secret"] {
  width: min(100%, 420px);
  border-radius: var(--openbot-radius-xl);
  background: color-mix(in srgb, var(--openbot-bg-glass), var(--openbot-bg-control) 60%);
  backdrop-filter: blur(32px) saturate(1.4);
}

.browser-dock-island-face {
  box-sizing: border-box;
  min-width: 0;
  flex: 1;
}

/* The island has the glass of the code card, so the card does not paint a second one. */
.browser-dock-island-face > .browser-secret-card {
  width: 100%;
  border: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
}

/* The step is at the start and the button at the end, so that the button stays at the edge while the island
   changes width. */
.browser-dock-island-activity {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  padding: var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-2);
  font-size: var(--openbot-text-sm);
  white-space: nowrap;
}

/* Old content on its way out of the island, and the copy of an island that closes. */
.browser-dock-island-leaving {
  pointer-events: none;
}

.browser-dock-island.browser-dock-island-ghost {
  position: absolute;
  z-index: 1;
  translate: -50% 0;
  pointer-events: none;
}

.browser-dock-spin {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: none;
  color: var(--openbot-text-muted);
  animation: ui-spin 1s linear infinite;
}

/* The step and the button that gives the page to the user, or back. */
.browser-dock-status {
  display: inline-flex;
  min-width: 0;
  overflow: hidden;
  align-items: center;
  gap: var(--openbot-space-1-5);
}

.browser-dock-status > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.browser-dock-handoff {
  flex: none;
  margin-left: auto;
  border-radius: var(--openbot-radius-pill);
}

.browser-dock-island-reply {
  display: grid;
  gap: var(--openbot-space-1-5);
  padding: var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-3) var(--openbot-space-3);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
}

.browser-dock-reply-header {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}

.browser-dock-reply-header > strong {
  font-weight: var(--openbot-weight-medium);
}

.browser-dock-reply-close {
  margin-left: auto;
}

.browser-dock-reply-body {
  max-height: 160px;
  padding-right: var(--openbot-space-1);
  overflow: auto;
  line-height: var(--openbot-leading-lg);
}

.browser-dock-reply-actions {
  display: flex;
  justify-content: flex-end;
}

/* Queue ------------------------------------------------------------------------------------------- */

/* The queue and the composer, with no gap, so the queue tucks under the top edge of the field. */
.browser-dock-stack {
  display: flex;
  width: 100%;
  flex-direction: column;
}

/* The queue keeps clear of the round ends of the field, and has the glass of the field. */
.agent-queue-panel[data-variant="floating"] {
  margin-inline: var(--openbot-space-6);
  border-color: var(--openbot-glass-border);
  background: var(--openbot-bg-glass);
  backdrop-filter: blur(16px);
  /* A sent message opens the queue with a clip that rises out of the field. */
  animation: none;
}

/* The queue closes on the island spring, which the dock sets. */
.browser-dock-stack > .agent-queue-slot {
  transition-duration: var(--browser-dock-island-duration);
  transition-timing-function: var(--browser-dock-island-easing);
}

.browser-dock-composer {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-2);
}

.browser-dock-avatar {
  width: 20px;
  height: 20px;
  flex: none;
}

.browser-dock-editor {
  min-width: 0;
  flex: 1;
  color: var(--openbot-text-primary);
}

/* The text of a new queue row waits until the sent text arrives from the field. */
.agent-queue-panel[data-variant="floating"] .agent-queue-item[data-arriving] .agent-queue-message {
  visibility: hidden;
}

/* The glass copy that changes into the step. It starts under the field, so it comes out from behind it. */
.browser-dock-morph {
  position: absolute;
  z-index: 1;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid var(--openbot-glass-border);
  background: var(--openbot-bg-glass);
  box-shadow: var(--openbot-shadow-raised);
  backdrop-filter: blur(16px);
  pointer-events: none;
}

/* The step on the copy, without its glass, in the middle of the copy at its final size. */
.browser-dock-morph > .browser-dock-glass {
  position: absolute;
  top: 50%;
  left: 50%;
  border-color: transparent;
  animation: none;
  background: none;
  backdrop-filter: none;
  box-shadow: none;
  translate: -50% -50%;
}

/* The sent text on its way from the field, or from a queue row, to the step. */
.browser-dock-morph-text {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  overflow: hidden;
  color: var(--openbot-text-primary);
  pointer-events: none;
  text-overflow: ellipsis;
  transform-origin: left center;
  white-space: nowrap;
  will-change: transform, opacity;
}

/* The row actions are small glass chips, as the field and the step are. */
.agent-queue-panel[data-variant="floating"] .agent-queue-actions {
  gap: var(--openbot-space-1);
}

.agent-queue-panel[data-variant="floating"] :is(.agent-queue-steer, .agent-queue-icon-button) {
  box-sizing: border-box;
  height: 24px;
  border: 1px solid var(--openbot-glass-border);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-glass-surface);
  box-shadow: inset 0 1px 0 var(--openbot-glass-highlight);
  backdrop-filter: blur(8px);
  color: var(--openbot-text-secondary);
  transition:
    background var(--openbot-duration-hover) ease,
    border-color var(--openbot-duration-hover) ease,
    box-shadow var(--openbot-duration-hover) ease,
    color var(--openbot-duration-hover) ease,
    opacity var(--openbot-duration-hover) ease;
}

.agent-queue-panel[data-variant="floating"] .agent-queue-steer {
  padding: 0 var(--openbot-space-2) 0 var(--openbot-space-1-5);
  font-size: var(--openbot-text-sm);
}

.agent-queue-panel[data-variant="floating"] .agent-queue-icon-button {
  width: 24px;
}

.agent-queue-panel[data-variant="floating"] :is(.agent-queue-steer, .agent-queue-icon-button) svg {
  width: 14px;
  height: 14px;
}

.agent-queue-panel[data-variant="floating"]
  :is(.agent-queue-steer, .agent-queue-icon-button):is(:hover:not(:disabled), :focus-visible) {
  background: var(--openbot-glass-surface-hover);
  color: var(--openbot-text-primary);
}

.agent-queue-panel[data-variant="floating"]
  .agent-queue-icon-button.agent-queue-delete:is(:hover:not(:disabled), :focus-visible) {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
}

.agent-queue-panel[data-variant="floating"] :is(.agent-queue-steer, .agent-queue-icon-button):focus-visible {
  box-shadow:
    inset 0 1px 0 var(--openbot-glass-highlight),
    0 0 0 2px var(--openbot-border-focus);
}

/* With a pointer, the row actions are quiet. They get their glass on the row under the pointer or with
   focus. */
@media (hover: hover) {
  .agent-queue-panel[data-variant="floating"]
    .agent-queue-item:not(:hover, :focus-within)
    :is(.agent-queue-steer, .agent-queue-icon-button):not(:focus-visible) {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    color: var(--openbot-text-muted);
  }
}

@media (prefers-reduced-motion: reduce) {
  .browser-dock-stack > .agent-queue-slot {
    transition: none;
  }
}
/*
 * The browser as a full view: the tabs in the top row on the window frame, then the card with the
 * address row and the page. The view is portaled to `document.body`, outside `.app-window`, so it sets
 * the frame values of that window again.
 *
 * The view appears and disappears in one frame, with no transition. The page inside it is a native
 * view that the renderer cannot animate: it is attached once the view has stopped moving
 * (`BrowserFullView.tsx`), so an opening transition is only time in front of an empty card.
 */

/* Keep app navigation below the portaled browser and its backdrop. */
body:has(.browser-full-view) .app-frame {
  isolation: isolate;
}

.browser-expanded-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--openbot-layer-dropdown) - 2);
}

.browser-full-view {
  --browser-full-edge: var(--openbot-space-1);
  --browser-full-top-height: 38px;
  position: fixed;
  z-index: calc(var(--openbot-layer-dropdown) - 1);
  inset: 0;
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  padding: 0 var(--browser-full-edge) var(--browser-full-edge);
  background: color-mix(in srgb, var(--openbot-bg-canvas) 50%, var(--openbot-bg-notch));
  color: var(--openbot-text-primary);
}

.browser-full-view[hidden],
.browser-expanded-backdrop[hidden] {
  display: none;
}

/* The top row on the frame. Its controls are the flat chips of the app top row. The empty parts of the
 * row move the window. */
.browser-full-top {
  display: flex;
  height: var(--browser-full-top-height);
  min-width: 0;
  flex: none;
  align-items: center;
  gap: var(--openbot-space-1);
  padding-inline: var(--openbot-space-1) 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}

.browser-full-top svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

.browser-full-top-spacer {
  flex: 1;
}

/*
 * On macOS the window is `titleBarStyle: "hidden"` and the traffic lights are drawn over the view.
 * `trafficLightPosition: { x: 12, y: 13 }` (`src/main/main-window.ts`) puts the group at x 12..71, so
 * the first control starts at x 82, where the top row of the app frame starts beside those dots.
 */
.browser-full-view-mac-controls .browser-full-top {
  padding-inline-start: calc(82px - var(--browser-full-edge));
}

.browser-full-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-canvas);
}

.browser-full-browser {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}

.browser-full-alert {
  margin: var(--openbot-space-2) var(--openbot-space-2) 0;
}

/* The dock is placed in the surface, so the surface is its containing block. */
.browser-full-surface {
  position: relative;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}

/*
 * A host's page is drawn on a canvas at the host's viewport shape, not the window's. The page keeps
 * that shape and gets a margin at the sides or at the bottom. `BrowserFullView` sets the frame size
 * once the first frame is drawn; until then the page takes a common desktop shape.
 */
.browser-full-surface[data-live] {
  display: grid;
  place-items: center;
  container-type: size;
}

.browser-full-surface[data-live] .browser-live-view {
  position: relative;
  inset: auto;
  width: min(
    calc(100cqw - 2 * var(--openbot-space-3)),
    calc((100cqh - 2 * var(--openbot-space-3)) * var(--browser-frame-width, 16) / var(--browser-frame-height, 10))
  );
  height: auto;
  aspect-ratio: var(--browser-frame-width, 16) / var(--browser-frame-height, 10);
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface);
}

.browser-full-owner-avatar {
  width: 16px;
  height: 16px;
  flex: none;
}

.browser-full-owner-acting {
  border-radius: var(--openbot-radius-pill);
  box-shadow: 0 0 0 1.5px var(--openbot-accent);
}

.browser-full-owner-globe {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: none;
  color: var(--openbot-text-muted);
}

/* The chips share the row. Below their minimum width the row scrolls, as other browsers do. The row is
 * the offset parent of the chips, so a drag can measure them in it. */
.browser-full-chips {
  --browser-full-fade: calc(var(--openbot-space-8) * 2);
  position: relative;
  min-width: 0;
  flex: 0 1 auto;
  overflow-x: auto;
  padding: var(--openbot-space-0-5);
  scrollbar-width: none;
}

/* A row that scrolls fades out at the edge where more chips are. */
.browser-full-chips[data-fade-start] {
  mask-image: linear-gradient(to right, transparent, var(--openbot-text-primary) var(--browser-full-fade));
}

.browser-full-chips[data-fade-end] {
  mask-image: linear-gradient(to right, var(--openbot-text-primary) calc(100% - var(--browser-full-fade)), transparent);
}

.browser-full-chips[data-fade-start][data-fade-end] {
  mask-image: linear-gradient(
    to right,
    transparent,
    var(--openbot-text-primary) var(--browser-full-fade),
    var(--openbot-text-primary) calc(100% - var(--browser-full-fade)),
    transparent
  );
}

/* Chips shrink evenly to a width that still shows a few words of the title, then the row scrolls. */
.browser-full-chip {
  min-width: 120px;
  max-width: 200px;
  flex: 0 1 200px;
  user-select: none;
  transition: flex-basis var(--openbot-duration-normal) var(--openbot-ease-out);
}

/* After a close with the pointer, the chips keep their width until the pointer leaves the row. */
.browser-full-chips[data-frozen] .browser-full-chip {
  flex: 0 0 var(--browser-full-chip-frozen);
}

.browser-full-chips[data-dragging] {
  cursor: grabbing;
}

.browser-full-chips[data-dragging] .browser-full-chip {
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}

/* The held chip is lifted above the others and follows the pointer without delay. */
.browser-full-chips[data-dragging] .browser-full-chip[data-dragging] {
  z-index: 1;
  background: var(--openbot-bg-surface-raised);
  box-shadow:
    inset 0 0 0 1px var(--openbot-border-strong),
    var(--openbot-shadow-raised);
  transition: none;
}

.browser-full-chips[data-dragging] .browser-full-chip::before {
  opacity: 0;
}

.browser-full-hidden-tabs {
  max-width: 320px;
}

@media (prefers-reduced-motion: reduce) {
  .browser-full-chip,
  .browser-full-chips[data-dragging] .browser-full-chip {
    transition: none;
  }
}

.browser-full-spin {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: none;
  color: var(--openbot-text-muted);
  animation: ui-spin 1s linear infinite;
}

.browser-full-chip .side-panel-tab-select {
  min-width: 0;
  flex: 1;
  justify-content: flex-start;
}

.browser-full-chip .side-panel-tab-label {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-align: start;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The address row: arrows and a filled capsule. */
.browser-full-address-row {
  display: flex;
  height: 44px;
  flex: none;
  align-items: center;
  gap: var(--openbot-space-0-5);
  padding-inline: var(--openbot-space-2);
  border-bottom: 1px solid var(--openbot-border);
  color: var(--openbot-text-secondary);
}

.browser-full-address-row svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

/* Focus is quiet: the capsule lifts and gets a thin edge. The caret and the selected address show where
 * typing goes. */
.browser-full-capsule {
  position: relative;
  display: flex;
  min-width: 0;
  height: var(--openbot-control-md);
  flex: 1;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-inline: var(--openbot-space-1);
  padding-inline: var(--openbot-space-2) var(--openbot-space-1);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  transition:
    background-color var(--openbot-duration-normal) var(--openbot-ease-out),
    box-shadow var(--openbot-duration-normal) var(--openbot-ease-out);
}

.browser-full-capsule:focus-within {
  background: var(--openbot-bg-control-active);
  box-shadow: inset 0 0 0 1px var(--openbot-border-grouped);
}

.browser-full-capsule .browser-full-capsule-input {
  height: 100%;
  min-width: 0;
  flex: 1;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
}

.browser-full-capsule .browser-full-capsule-input:focus-visible {
  outline: none;
}

.browser-full-capsule .browser-full-capsule-input::selection {
  background: var(--openbot-accent-strong);
}

.browser-full-capsule-agent {
  display: grid;
  flex: none;
  place-items: center;
}

/* The suggestions under the address field. */
.browser-full-suggest {
  position: absolute;
  z-index: var(--openbot-layer-dropdown);
  top: calc(100% + var(--openbot-space-1));
  right: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  padding: var(--openbot-space-1);
  border-radius: var(--openbot-radius-lg);
}

.browser-full-suggest-row {
  display: flex;
  width: 100%;
  min-width: 0;
  height: var(--openbot-control-md);
  align-items: center;
  gap: var(--openbot-space-2);
  padding-inline: var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  text-align: start;
  cursor: default;
}

.browser-full-suggest-row:hover {
  background: var(--openbot-bg-control-hover);
}

.browser-full-suggest-row[aria-selected="true"] {
  background: var(--openbot-bg-control-active);
}

.browser-full-suggest-icon {
  display: grid;
  width: var(--openbot-icon-sm);
  flex: none;
  place-items: center;
  color: var(--openbot-text-muted);
}

.browser-full-suggest-title {
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.browser-full-suggest-detail {
  min-width: 0;
  flex: 0 100 auto;
  overflow: hidden;
  color: var(--openbot-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.browser-full-suggest-switch {
  flex: none;
  margin-inline-start: auto;
  padding: 0 var(--openbot-space-2);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-pill);
  color: var(--openbot-text-muted);
}

/* Narrow: one button with the tab count opens the list of tabs. */
.browser-full-switch {
  min-width: 0;
  max-width: 100%;
  justify-content: flex-start;
  gap: var(--openbot-space-2);
}

.browser-full-switch-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The tab count, in a square, as phone browsers show it. */
.browser-full-switch-count {
  display: grid;
  min-width: 18px;
  height: 18px;
  flex: none;
  place-items: center;
  padding-inline: var(--openbot-space-1);
  border: 1.5px solid currentcolor;
  border-radius: var(--openbot-radius-sm);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.browser-full-switch-menu {
  display: flex;
  width: min(360px, calc(100vw - 2 * var(--openbot-space-3)));
  max-height: min(480px, 70dvh);
  flex-direction: column;
  padding: var(--openbot-space-1);
}

.browser-full-switch-list {
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.browser-full-switch-row {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-0-5);
}

.browser-full-switch-select {
  min-width: 0;
  height: auto;
  flex: 1;
  padding-block: var(--openbot-space-1-5);
}

.browser-full-switch-select[aria-current="true"] {
  background: var(--openbot-bg-control-active);
}

.browser-full-switch-close svg,
.browser-full-switch-actions svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

.browser-full-switch-text {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.browser-full-switch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-1);
  margin-top: var(--openbot-space-1);
  padding-top: var(--openbot-space-1);
  border-top: 1px solid var(--openbot-border);
}

@media (max-width: 720px) {
  /* The page starts under the address row. */
  .browser-full-surface[data-live] {
    place-items: start center;
    padding-top: var(--openbot-space-3);
  }
}


/* /@fs//app/packages/ui/src/styles/provider-code-login.css */
/*
 * The code sign-in dialog. It opens from the provider rows, which appear inside the settings modal
 * as well as on their own, so it sits one layer above the shared dialog layer for the same reason
 * `opencode-key-dialog.css` does: both portals are children of `body`, and insertion order alone
 * would decide it wrongly the first time a caller mounts it from elsewhere.
 *
 * The code itself is the largest thing on screen. It is about to be typed on another device from
 * this screen alone, so it is set in the mono face at display size with the characters spaced
 * apart: a code read wrong costs the whole round trip.
 */

.provider-code-login-backdrop {
  z-index: calc(var(--openbot-layer-dialog) + 1);
}

.provider-code-login-dialog {
  position: relative;
  width: min(420px, 100%);
  max-height: calc(100dvh - var(--openbot-space-6) * 2);
  overflow-y: auto;
  outline: 0;
  border-radius: var(--openbot-radius-xl);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-6);
  color: var(--openbot-text-primary);
  animation: provider-code-login-dialog-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}

/* The host's sign-in page needs the width of a browser window. */
.provider-code-login-dialog[data-page] {
  width: min(720px, 100%);
}

.provider-code-login-header {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  /* The close button sits in the corner the title would otherwise run into. */
  padding-right: var(--openbot-space-8);
}

.provider-code-login-title {
  margin: 0;
  font-size: var(--openbot-text-xl);
  line-height: var(--openbot-leading-xl);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: var(--openbot-tracking-tight);
}

.provider-code-login-description {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}

.provider-code-login-body {
  display: flex;
  flex-direction: column;
  margin-top: var(--openbot-space-6);
}

/* The two waits, which look the same because they are the same to the user: OpenBot is busy and
   there is nothing to do. */
.provider-code-login-pending {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-8) 0;
  text-align: center;
}

.provider-code-login-code {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-4);
}

.provider-code-login-steps {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  margin: 0;
  padding-left: var(--openbot-space-4);
  list-style: decimal;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  align-self: stretch;
}

/* The link is a button, so it needs the baseline of the sentence it sits in rather than a line of
   its own. */
.provider-code-login-url {
  display: inline-flex;
  height: auto;
  gap: var(--openbot-space-1-5);
  padding: 0;
}

.provider-code-login-url > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}

.provider-code-login-value {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  align-self: stretch;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  padding: var(--openbot-space-3) var(--openbot-space-4);
}

/* The copy icon belongs to the label beside it, not to the code: the default icon size would make
   it the second largest thing in the row. */
.provider-code-login-copy > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}

.provider-code-login-digits {
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-2xl);
  line-height: var(--openbot-leading-2xl);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: var(--openbot-tracking-wide);
}

/* The pasted code and its button, full width under the steps. */
.provider-code-login-paste {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-3);
  align-self: stretch;
}

.provider-code-login-expiry {
  margin: 0;
  text-align: center;
}

/* The app hand-off has no phase to show: only its two actions, in the order of a dialog footer. */
.provider-use-app-actions {
  flex-direction: row;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
}

.provider-code-login-close {
  position: absolute;
  top: var(--openbot-space-3);
  right: var(--openbot-space-3);
}

@keyframes provider-code-login-dialog-in {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
}


/* /@fs//app/packages/ui/src/styles/settings-panel.css */
/*
 * The right-hand settings panel, shared by the agent chat and the channel chat.
 *
 * These rules were the agent panel's alone, under an `agent-` prefix. That prefix is why the
 * channel panel became a second copy of them instead of a second user of them, so the shared part
 * moved here under neutral names. What stays in `conversation.css` is what only an agent has: the
 * avatar picker, the runtime section and the notification row.
 */

.settings-panel {
  /*
   * The step between one block of settings and the next: the fields, the link group, the agent's
   * runtime card, the channel's member list. It is declared here, on the panel both surfaces open,
   * because a section that stands further from the link group in one panel than in the other is
   * exactly the drift this file exists to stop.
   */
  --settings-panel-section-gap: 25px;

  position: absolute;
  z-index: 15;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  width: var(--settings-panel-width, 296px);
  flex-direction: column;
  border-left: 1px solid var(--openbot-border);
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
  animation: settings-panel-in var(--openbot-duration-slow) cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.settings-panel-header {
  display: grid;
  height: 39px;
  flex: 0 0 auto;
  grid-template-columns: 32px 1fr 32px;
  align-items: center;
  border-bottom: 1px solid var(--openbot-border);
  padding: 0 10px;
}

.settings-panel-header h2 {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}

.settings-panel-nav-button {
  position: relative;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  padding: 0;
  background: transparent;
  color: var(--openbot-text-secondary);
  transition:
    background-color var(--openbot-duration-hover) ease,
    color var(--openbot-duration-hover) ease,
    transform var(--openbot-duration-fast) ease;
}

.settings-panel-nav-button::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  content: "";
  transform: translate(-50%, -50%);
}

.settings-panel-nav-button > svg {
  width: 16px;
  height: 16px;
  /* The weight is left to .ui-glyph-20 on the icons themselves, as in .message-action-button. */
}

.settings-panel-nav-button:hover {
  background: var(--openbot-hover);
  color: var(--openbot-text-primary);
}

/* The chevron reads a hair right of centre in its box, so it is nudged back onto the axis. */
.settings-back-icon {
  transform: translateX(-0.5px);
}

.settings-panel-content {
  min-height: 0;
  overflow-y: auto;
  padding: 24px 15px 28px;
}

.settings-field {
  display: block;
  margin: 0 0 17px;
}

.settings-field > span {
  display: block;
  margin: 0 0 6px 8px;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  line-height: 18px;
}

.settings-field input,
.settings-field textarea,
.settings-field select {
  display: block;
  width: 100%;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  outline: 0;
  background: var(--openbot-shadow-popover-ambient);
  padding: 10px 11px;
  color: var(--openbot-text-primary);
  caret-color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  line-height: 19px;
  transition:
    border-color var(--openbot-duration-hover) ease,
    background var(--openbot-duration-hover) ease;
}

.settings-field input,
.settings-field select {
  height: 38px;
}

.settings-field select {
  appearance: none;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--openbot-text-secondary) 50%),
    linear-gradient(135deg, var(--openbot-text-secondary) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) 16px,
    calc(100% - 11px) 16px;
  background-repeat: no-repeat;
  background-size:
    5px 5px,
    5px 5px;
  padding-right: 32px;
}

.settings-field select option {
  background: var(--openbot-bg-control);
  color: var(--openbot-text-primary);
}

.settings-field textarea {
  field-sizing: content;
  min-height: 88px;
  max-height: 240px;
  overflow-y: auto;
}

/* Instructions keep a fixed height and scroll inside, so the rows below do not move. */
.settings-field .settings-instructions-input {
  field-sizing: fixed;
  height: 120px;
  min-height: 120px;
  max-height: 120px;
  resize: none;
}

.settings-field input::placeholder,
.settings-field textarea::placeholder {
  color: var(--openbot-text-muted);
}

.settings-field input:focus,
.settings-field textarea:focus,
.settings-field select:focus {
  border-color: var(--openbot-text-muted);
  background: var(--openbot-shadow-popover-ambient);
}

.settings-field input:focus-visible,
.settings-field textarea:focus-visible,
.settings-field select:focus-visible {
  outline: none;
}

.settings-link-group {
  display: grid;
  width: 100%;
  margin: 7px 0 22px;
  border-top: 1px solid var(--openbot-border);
  border-bottom: 1px solid var(--openbot-border);
}

.settings-link {
  width: 100%;
  min-height: 42px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-3);
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 var(--openbot-space-1);
  text-align: left;
  transition: none;
}

.settings-link + .settings-link {
  border-top: 1px solid var(--openbot-border);
}

.settings-link-label {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}

/* A fixed square, so every label in a group starts on one line whatever the glyph's shape. */
.settings-link-icon {
  display: grid;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  place-items: center;
  color: var(--openbot-text-secondary);
}

.settings-link-icon > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}

.settings-link-value {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}

.settings-link-value svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}

@media (hover: hover) and (pointer: fine) {
  .settings-link-group .settings-link:hover {
    background: var(--openbot-hover);
    color: var(--openbot-text-primary);
  }

  .settings-link:hover .settings-link-value {
    color: var(--openbot-text-secondary);
  }
}

/* Named groups of rows, one card each. Used where one panel holds several groups. */
.settings-link-section {
  display: grid;
  gap: var(--openbot-space-1-5);
}

.settings-link-section-title {
  margin: 0 0 0 var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
}

.settings-link-group-inset {
  margin: 0;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface);
}

.settings-link-group-inset > * + * {
  border-top: 1px solid var(--openbot-border);
}

/* The card does not clip its rows, because a row can hold an inline popover. The end rows round
   their own hover background instead. A wrapper row rounds the trigger button inside it. */
.settings-link-group-inset > :first-child,
.settings-link-group-inset > :first-child > button {
  border-top-left-radius: calc(var(--openbot-radius-md) - 1px);
  border-top-right-radius: calc(var(--openbot-radius-md) - 1px);
}

.settings-link-group-inset > :last-child,
.settings-link-group-inset > :last-child > button {
  border-bottom-left-radius: calc(var(--openbot-radius-md) - 1px);
  border-bottom-right-radius: calc(var(--openbot-radius-md) - 1px);
}

.settings-link-group-inset .settings-link {
  min-height: 40px;
  gap: var(--openbot-space-2);
  padding: 0 var(--openbot-space-3);
}


/* /@fs//app/src/renderer/src/features/window/window.css */
/* The desktop window: the page rail at the left, and the frame as the card of the page that the rail
 * selects. The rail shares the darker surface of the frame edge, so the rail and the top row show as
 * one L around the card. */
.app-window {
  /* The frame is darker than the card, so the card comes forward. */
  --window-frame: color-mix(in srgb, var(--openbot-bg-canvas) 50%, var(--openbot-bg-notch));
  /* The thin frame at the right and the bottom of the card */
  --window-edge: var(--openbot-space-1);
  --window-hairline-height: var(--openbot-icon-lg);
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 0;
  grid-template-columns: auto minmax(0, 1fr);
  background: var(--window-frame);
}

/* A hidden rail stays out of the grid. The frame keeps the last column, which then takes the whole
 * window. */
.app-window > .window-rail[hidden] {
  display: none;
}

.app-window > .app-frame {
  grid-column: -2;
}

/* The frame below the edge layout keeps its own shape, so the rail would only take width. */
@media (max-width: 720px) {
  .app-window > .window-rail {
    display: none;
  }
}

@media (min-width: 721px) {
  /* The top row holds a short line at the end of the sidebar. */
  .app-window > .app-frame-edge > .sidebar:not(.sidebar-compact) .sidebar-topbar {
    position: relative;
  }

  /* The rail holds the window buttons, so the server menu needs only the part of them that is past
   * the rail. */
  .app-window
    > .app-frame-platform-darwin:not(.app-frame-with-server-rail)
    > .sidebar:not(.sidebar-compact)
    .sidebar-topbar {
    padding-left: var(--openbot-space-6);
  }

  /* One card holds the sidebar, the chat and the side panel, below the top row. The frame draws the
   * card, and the panes have no background of their own, so the card's line and its four rounded
   * corners show. The padding keeps the panes inside the card's line. */
  .app-window > .app-frame-edge {
    position: relative;
    isolation: isolate;
    padding: 0 calc(var(--window-edge) + 1px) calc(var(--window-edge) + 1px) 0;
    background: var(--window-frame);
  }

  .app-window > .app-frame-edge::before {
    position: absolute;
    z-index: -1;
    inset: calc(var(--left-header-height) - 1px) var(--window-edge) var(--window-edge) 0;
    border: 1px solid var(--openbot-border);
    border-radius: var(--openbot-radius-card);
    background: var(--openbot-bg-canvas);
    content: "";
    pointer-events: none;
  }

  .app-window > .app-frame-edge.app-frame-with-server-rail::before {
    left: var(--server-rail-width);
  }

  .app-window > .app-frame-edge > .server-rail {
    background: var(--window-frame);
  }

  .app-window > .app-frame-edge > .sidebar,
  .app-window > .app-frame-edge :is(.conversation-panel, .direct-conversation, .diagram-view),
  .app-window > .app-frame-edge :is(.settings-panel, .browser-panel) {
    background: transparent;
  }

  .app-window > .app-frame-edge :is(.conversation-panel, .direct-conversation)::before {
    content: none;
  }

  /* The line between the agent list and the chat starts at the card's top line. In the top row, a short
   * line sits above it. */
  .app-window > .app-frame-edge > .sidebar::before {
    inset: var(--left-header-height) 0 0 auto;
    width: 1px;
    border: 0;
    border-radius: 0;
    background: var(--openbot-border);
  }

  .app-window > .app-frame-edge > .sidebar:not(.sidebar-compact) .sidebar-topbar::after,
  .app-window
    > .app-frame-edge
    :is(.settings-panel, .browser-panel)
    > :is(.settings-panel-header, .file-preview-header, .browser-preview-header)::before {
    position: absolute;
    top: 50%;
    width: 1px;
    height: var(--window-hairline-height);
    translate: 0 -50%;
    background: var(--openbot-border-strong);
    content: "";
    pointer-events: none;
  }

  .app-window > .app-frame-edge > .sidebar:not(.sidebar-compact) .sidebar-topbar::after {
    right: 0;
  }

  /* A side panel is the right part of the card. Its line to the chat starts at the card's top line. */
  .app-window > .app-frame-edge :is(.settings-panel, .browser-panel) {
    border-left: 0;
  }

  .app-window > .app-frame-edge :is(.settings-panel, .browser-panel)::before {
    inset: calc(var(--left-header-height) - 1px) auto 0 0;
    width: 1px;
    border: 0;
    border-radius: 0;
    background: var(--openbot-border);
  }

  .app-window
    > .app-frame-edge
    :is(.settings-panel, .browser-panel)
    > :is(.settings-panel-header, .file-preview-header, .browser-preview-header) {
    position: relative;
  }

  .app-window
    > .app-frame-edge
    :is(.settings-panel, .browser-panel)
    > :is(.settings-panel-header, .file-preview-header, .browser-preview-header)::before {
    left: 0;
  }

  /* In the side panel, the tab row is in the top row and a pane starts under it, so the pane's line to
   * the chat starts at the pane's top, and its own header has no short line. */
  .app-window > .app-frame-edge .side-panel-docked > :is(.settings-panel, .browser-panel)::before {
    top: 0;
  }

  .app-window
    > .app-frame-edge
    .side-panel-docked
    > :is(.settings-panel, .browser-panel)
    > :is(.settings-panel-header, .file-preview-header, .browser-preview-header)::before {
    content: none;
  }

  /* A maximized pane covers the hidden chat. A chat preview frame keeps its own visibility, so the
   * pane paints the card under it. */
  .app-window > .app-frame-edge .side-panel-maximized > :is(.settings-panel, .browser-panel) {
    border-bottom-right-radius: calc(var(--openbot-radius-card) - 1px);
    background: var(--openbot-bg-canvas);
  }

  /* The routine canvas fills the card, so its board follows the card's rounded corner. */
  .app-window > .app-frame-edge .diagram-view-body {
    border-top: 0;
    border-right: 0;
    border-radius: 0 0 calc(var(--openbot-radius-card) - 1px) 0;
  }

  /* The top row controls are flat: one height and one radius, with no line. A control fills on hover,
   * and an open control keeps a stronger fill. */
  .app-window > .app-frame-edge .conversation-header-actions {
    gap: var(--openbot-space-2);
  }

  .app-window > .app-frame-edge .conversation-header :is(.provider-model-trigger, .header-panel-toggle) {
    height: var(--openbot-control-sm);
    border-color: transparent;
    border-radius: var(--openbot-radius-md);
    background: transparent;
    box-shadow: none;
    color: var(--openbot-text-secondary);
  }

  .app-window > .app-frame-edge .conversation-header .header-panel-toggle {
    width: var(--openbot-control-sm);
    min-width: var(--openbot-control-sm);
    padding: 0;
    color: var(--openbot-text-muted);
  }

  @media (hover: hover) and (pointer: fine) {
    .app-window > .app-frame-edge .conversation-header :is(.provider-model-trigger, .header-panel-toggle):hover {
      border-color: transparent;
      background: var(--openbot-bg-control-hover);
      color: var(--openbot-text-primary);
    }
  }

  .app-window
    > .app-frame-edge
    .conversation-header
    :is(.provider-model-trigger, .header-panel-toggle):is([aria-expanded="true"], [data-expanded]):not(
      .computer-button-agent-active,
      .side-panel-toggle
    ) {
    border-color: transparent;
    background: var(--openbot-bg-control-active);
    color: var(--openbot-text-primary);
  }

  /* A short line between the model and the side panel button */
  .app-window > .app-frame-edge .conversation-header-actions > .side-panel-toggle {
    position: relative;
    margin-left: calc(var(--openbot-space-2) + 1px);
    overflow: visible;
  }

  .app-window > .app-frame-edge .conversation-header-actions > .side-panel-toggle::before {
    position: absolute;
    top: 50%;
    left: calc(-1 * var(--openbot-space-2) - 1px);
    width: 1px;
    height: var(--window-hairline-height);
    translate: 0 -50%;
    background: var(--openbot-border-strong);
    content: "";
    pointer-events: none;
  }

  /* The usage and schedule pages sit in the card, as the chat does. Their title and controls go in the
   * top row, as the chat header does, and the rest of the page goes in the card below it. The card
   * draws the surface, the line and the rounded corner, so the page has no background of its own. */
  .app-frame-edge > .window-page > :is(.agent-usage, .schedule-pane, .tasks-page) {
    background: transparent;
  }

  .app-window > .app-frame-edge > .window-page .agent-usage-header,
  .app-window > .app-frame-edge > .window-page .routine-planner-title {
    flex: none;
    height: var(--left-header-height);
    flex-wrap: nowrap;
    padding: 0 var(--openbot-space-3);
    border-bottom: 0;
    -webkit-app-region: drag;
  }

  .app-window
    > .app-frame-edge
    > .window-page
    :is(.agent-usage-header, .routine-planner-title)
    > :is(.agent-usage-identity, .agent-usage-controls, .routine-planner-identity, p) {
    flex-wrap: nowrap;
    gap: var(--openbot-space-2);
    -webkit-app-region: no-drag;
  }

  .app-window > .app-frame-edge > .window-page :is(.agent-usage-identity, .routine-planner-identity) .ui-icon-button {
    margin-left: 0;
  }

  .app-window > .app-frame-edge > .window-page :is(.agent-usage-identity, .routine-planner-title) h2 {
    gap: var(--openbot-space-2);
    font-size: var(--openbot-text-md);
    font-weight: var(--openbot-weight-medium);
    white-space: nowrap;
    color: var(--openbot-text-primary);
  }

  /* In a narrow window, the title gets shorter and the controls keep their size. */
  .app-window > .app-frame-edge > .window-page :is(.agent-usage-identity, .routine-planner-identity) {
    overflow: hidden;
  }

  .app-window > .app-frame-edge > .window-page :is(.agent-usage-controls, .routine-planner-title > p) {
    flex: none;
  }

  /* Flat controls, as in the chat header. */
  .app-window
    > .app-frame-edge
    > .window-page
    :is(.agent-usage-header, .routine-planner-title)
    :is(.ui-select-trigger, .ui-icon-button) {
    height: var(--openbot-control-sm);
    border-color: transparent;
    border-radius: var(--openbot-radius-md);
    background: transparent;
    box-shadow: none;
    color: var(--openbot-text-secondary);
  }

  .app-window > .app-frame-edge > .window-page :is(.agent-usage-header, .routine-planner-title) .ui-icon-button {
    width: var(--openbot-control-sm);
  }

  @media (hover: hover) {
    .app-window
      > .app-frame-edge
      > .window-page
      :is(.agent-usage-header, .routine-planner-title)
      :is(.ui-select-trigger, .ui-icon-button):hover {
      background: var(--openbot-bg-control-hover);
      color: var(--openbot-text-primary);
    }
  }

  /* The schedule header holds the title in the top row; the week below it scrolls in the card. */
  .app-window > .app-frame-edge > .window-page > .schedule-pane {
    padding: 0;
    overflow: hidden;
  }

  .app-window > .app-frame-edge > .window-page .routine-planner {
    height: 100%;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0;
  }

  .app-window > .app-frame-edge > .window-page .routine-planner-header {
    gap: 0;
  }

  .app-window > .app-frame-edge > .window-page .routine-planner-toolbar {
    padding: var(--openbot-space-4) var(--openbot-space-6) 0;
  }

  .app-window > .app-frame-edge > .window-page .routine-planner-body {
    min-height: 0;
    overflow-y: auto;
    padding: var(--openbot-space-4) var(--openbot-space-6) var(--openbot-space-6);
  }

  /* The Tasks page: its title goes in the top row, after the server menu, as the schedule title does.
   * The list and the task panel go in the card below it, inside the card's line. */
  .app-window > .app-frame-edge > .window-page > .tasks-page {
    box-sizing: border-box;
    padding: var(--left-header-height) calc(var(--window-edge) + 1px) calc(var(--window-edge) + 1px) 0;
  }

  /* The header spans the rest of the top row, and its title is plain text, so the whole row moves the
   * window, as the schedule and usage titles do. */
  .app-window > .app-frame-edge > .window-page .tasks-page-header {
    position: absolute;
    top: 0;
    right: 0;
    left: var(--left-panel-width);
    height: var(--left-header-height);
    padding: 0 var(--openbot-space-3);
    -webkit-app-region: drag;
  }

  .app-window > .app-frame-edge > .window-page .tasks-page-header h2 {
    font-size: var(--openbot-text-md);
    font-weight: var(--openbot-weight-medium);
    white-space: nowrap;
  }

  .app-window > .app-frame-edge > .window-page .tasks-page-column {
    padding-top: var(--openbot-space-6);
  }

  .app-window > .app-frame-edge > .window-page .tasks-page-side {
    border-bottom-right-radius: calc(var(--openbot-radius-card) - 1px);
  }

  /* The settings, schedule, usage and Marketplace pages cover the sidebar, so the week has room for
   * seven days. The server menu stays in the top row, so the user can select the server that the page
   * shows. The "settings" kind is both settings pages; the "titled" kind is schedule, tasks, usage and Marketplace. */
  /* Out of the grid flow: a grid cell would push the sidebar to a second row. The grid area of an
   * absolute item is its containing block, so the item spans the whole grid. */
  .app-frame-edge:not([data-window-page-kind="agents"]) > .window-page {
    position: absolute;
    grid-row: 1 / -1;
    grid-column: 1 / -1;
    inset: 0 0 0 1px;
  }

  /* The settings page starts below the top row. The schedule, usage and Marketplace titles go in the
   * top row, after the server menu, and the rest of the top row lets clicks through to that menu. The
   * rail is the way back, so these titles have no Back button and no server name. */
  .app-frame-edge[data-window-page-kind="settings"] > .window-page {
    top: var(--left-header-height);
  }

  .app-frame-edge[data-window-page-kind="titled"] > .window-page {
    pointer-events: none;
  }

  .app-frame-edge.app-frame-with-server-rail:not([data-window-page-kind="agents"]) > .window-page {
    left: calc(var(--server-rail-width) + 1px);
  }

  .app-frame-edge:not([data-window-page-kind="agents"]) > .sidebar > :not(.sidebar-topbar),
  .app-frame-edge:not([data-window-page-kind="agents"]) > .left-panel-resizer {
    visibility: hidden;
  }

  /* New agent and New section add to the agent list, so the button shows only on the agents page. */
  .app-frame-edge:not([data-window-page-kind="agents"]) > .sidebar .sidebar-new-button {
    display: none;
  }

  /* The page spans the sidebar, so the line at the end of the sidebar does not show. */
  .app-frame-edge[data-window-page-kind="titled"] > .sidebar::before {
    display: none;
  }

  .app-window
    > .app-frame-edge[data-window-page-kind="titled"]
    > .window-page
    :is(.agent-usage-header, .routine-planner-title, .skills-marketplace-topbar) {
    margin-left: var(--left-panel-width);
  }

  .app-frame-edge[data-window-page-kind="titled"]
    > .window-page
    :is(
      .agent-usage-header,
      .routine-planner-title,
      .agent-usage-body,
      .routine-planner-toolbar,
      .routine-planner-body,
      .marketplace-crumbs,
      .skills-marketplace-body,
      .tasks-page-header,
      .tasks-page-scroll,
      .tasks-page-side
    ) {
    pointer-events: auto;
  }

  /* The Marketplace page: its crumbs go in the top row, as the usage title does, and the rest of the
   * Marketplace scrolls in the card below it. */
  .app-window > .app-frame-edge > .window-page > .skills-marketplace-page {
    grid-template-rows: var(--left-header-height) minmax(0, 1fr);
  }

  .app-window > .app-frame-edge > .window-page .skills-marketplace-topbar {
    min-height: 0;
    padding: 0 var(--openbot-space-3);
    border-bottom: 0;
    -webkit-app-region: drag;
  }

  .app-window > .app-frame-edge > .window-page .marketplace-crumbs {
    flex: 0 1 auto;
    -webkit-app-region: no-drag;
  }

  .app-window > .app-frame-edge > .window-page .skills-marketplace-topbar .marketplace-title {
    font-size: var(--openbot-text-md);
    font-weight: var(--openbot-weight-medium);
    white-space: nowrap;
  }

  .app-window
    > .app-frame-edge
    > .window-page
    :is(.agent-usage-identity, .routine-planner-identity, .tasks-page-header)
    > .ui-icon-button,
  .app-window
    > .app-frame-edge
    > .window-page
    :is(.agent-usage-identity, .routine-planner-identity, .tasks-page-header)
    > h2
    > span {
    display: none;
  }

  .app-frame-edge > .window-page :is(.agent-usage-identity, .routine-planner-identity, .tasks-page-header) h2:focus {
    outline: none;
  }
}

/* The settings page: the nav at the width of the sidebar. */
.settings-page {
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 0;
  grid-template-columns: max(var(--left-panel-width, 280px), 220px) minmax(0, 1fr);
}

.settings-page-nav {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  gap: var(--openbot-space-1);
  overflow: hidden;
  border-right: 1px solid var(--openbot-border);
  padding: var(--openbot-space-4) var(--openbot-space-3) 0;
}

/* The title and the search stay at the top. The list below them scrolls. */
.settings-page-sections,
.settings-page-results {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  padding-bottom: var(--openbot-space-3);
}

.settings-page-title {
  margin: 0 0 var(--openbot-space-3);
  padding: 0 var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-lg);
}

/* The heading takes the focus when the page opens, only so a screen reader reads it. */
.settings-page-title:focus {
  outline: none;
}

/* A capsule search field */
.settings-page-search {
  flex: none;
  border-radius: var(--openbot-radius-pill);
  padding: 0 var(--openbot-space-3);
}

.settings-page-search > svg {
  flex: none;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

.settings-page-search input {
  height: 100%;
  padding: 0;
}

.settings-page-sections[hidden] {
  display: none;
}

/* The text that shows when no setting matches the search */
.settings-page-empty {
  margin: var(--openbot-space-4) 0 var(--openbot-space-1);
  padding: 0 var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

/* The server mark and name, as the server menu shows them */
.settings-page-server {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
}

.settings-page-server .server-menu-mark {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}

.settings-page-nav-group .settings-modal-nav-item {
  padding-inline: var(--openbot-space-3);
}

.settings-page-nav-group .settings-modal-nav-item[data-selected] {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}

/* A search result: the section with its icon, and below it the matching row title */
.settings-page-results {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-0-5);
  margin: var(--openbot-space-2) 0 0;
  padding-inline: 0;
  list-style: none;
}

.settings-page-result {
  display: flex;
  width: 100%;
  height: auto;
  flex-direction: column;
  align-items: stretch;
  gap: var(--openbot-space-0-5);
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .settings-page-result:hover {
    background: var(--openbot-bg-control-hover);
  }
}

.settings-page-result:focus-visible {
  outline: 0;
  box-shadow: var(--openbot-focus-ring);
}

.settings-page-result-section {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

.settings-page-result-section svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

.settings-page-result-title {
  overflow: hidden;
  padding-left: calc(var(--openbot-icon-sm) + var(--openbot-space-2));
  font-size: var(--openbot-text-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-page-content {
  position: relative;
  min-width: 0;
  min-height: 0;
}

/* The panel of the settings window, as a page: it fills the content column and has no dialog frame. */
.settings-page-content > .settings-modal.settings-modal-page {
  width: 100%;
  height: 100%;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  animation: none;
  will-change: auto;
}

.settings-page-content > .settings-modal-page > .settings-modal-main {
  background: transparent;
}

.settings-page-content > .settings-modal-page :is(.settings-modal-header, .settings-modal-content) {
  width: 100%;
  max-width: 784px;
  margin-inline: auto;
}

/* The row that a search result opened */
.settings-page-content [data-search-match] {
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control-active);
}

/* A narrow window stacks the page: the heading and the sections above the panel. */
@media (max-width: 720px) {
  .settings-page {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }

  .settings-page-nav {
    border-right: 0;
    border-bottom: 1px solid var(--openbot-border);
    padding: var(--openbot-space-3) var(--openbot-space-3) 0;
  }

  .settings-page-title {
    margin-bottom: var(--openbot-space-2);
  }

  .settings-page-sections,
  .settings-page-results {
    max-height: 40dvh;
    padding-bottom: var(--openbot-space-2);
  }
}


/* /@fs//app/packages/ui/src/features/window/page-rail.css */
/* The page rail at the left of the window, on desktop and on the web. The window styles place it in
 * the window grid. The window buttons of macOS sit at the top of the rail, in the top row. */
.window-rail {
  display: flex;
  width: 52px;
  min-height: 0;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: calc(var(--left-header-height, 38px) + var(--openbot-space-1)) 0 var(--openbot-space-3);
  -webkit-app-region: drag;
}

.window-rail-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-1-5);
  /* The window swallows mouse events over a drag area. With the gaps between the buttons in the
   * drag area, the pointer left the group between two buttons, and the tooltip closed instead of
   * moving to the next button. */
  -webkit-app-region: no-drag;
}

.window-rail-button {
  position: relative;
  display: flex;
  width: var(--openbot-control-lg);
  height: var(--openbot-control-lg);
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--openbot-radius-lg);
  background: transparent;
  padding: 0;
  color: var(--openbot-text-muted);
  font: inherit;
  cursor: pointer;
  -webkit-app-region: no-drag;
}

@media (hover: hover) and (pointer: fine) {
  .window-rail-button:hover {
    background: var(--openbot-bg-control-hover);
    color: var(--openbot-text-primary);
  }
}

.window-rail-button[aria-current="page"],
.window-rail-button[aria-current="page"]:hover:not(:disabled):not([data-disabled]) {
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
}

.window-rail-button:focus-visible {
  outline: 0;
  box-shadow: var(--openbot-focus-ring);
}

.window-rail-button svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
}

/* The dot of a rail button that has a notice, such as an update. */
.window-rail-notice {
  position: absolute;
  top: var(--openbot-space-1-5);
  right: var(--openbot-space-1-5);
  width: var(--openbot-space-2);
  height: var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-badge-new);
}

/* The hover card of a usage ring shows the limits only. The usage page has the refresh. */
.window-rail-usage-card .account-usage-refresh {
  display: none;
}

/* The card opens, closes and moves with the tooltip motion, not with the transition of the usage
 * popover. A transition would cover the motion. */
.account-usage-popover.window-rail-usage-card {
  transition: none;
  transform-origin: var(--kb-tooltip-content-transform-origin);
}

/* Usage rings: the provider logo inside one ring per limit window. The hover fill is a circle around
 * the rings. */
.window-rail-button.window-rail-usage {
  border-radius: var(--openbot-radius-pill);
}

.window-rail-button .window-rail-usage-ring {
  position: absolute;
  inset: 1px;
  width: 34px;
  height: 34px;
  transform: rotate(-90deg);
}

.window-rail-button .window-rail-usage-logo {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  overflow: visible;
  fill: var(--openbot-provider-current);
}

.window-rail-usage-track {
  stroke: currentcolor;
  opacity: 0.15;
}

.window-rail-usage-arc {
  stroke: var(--openbot-success);
}

.window-rail-usage-arc[data-usage-tone="warning"] {
  stroke: var(--openbot-warning);
}

.window-rail-usage-arc[data-usage-tone="critical"] {
  stroke: var(--openbot-danger);
}


/* /@fs//app/packages/ui/src/features/servers/hosted-server-upsell.css */
/*
 * The offer of a hosted server: a notice at the routine list, a modal after a new routine, and a
 * line in the offline notice. A border beam marks it as an offer, not a fault.
 */

/* The notice: the icon on the title line, and the actions under the text. */
.hosted-upsell-notice {
  flex: none;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  margin-top: var(--openbot-space-3);
  padding: var(--openbot-space-3);
}

.hosted-upsell-notice .ui-alert-icon {
  width: var(--openbot-space-8);
  height: var(--openbot-space-8);
  padding: var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-md);
  background: linear-gradient(135deg, var(--openbot-beam-blue), var(--openbot-beam-pink));
  color: var(--openbot-text-on-accent);
}

.hosted-upsell-notice .ui-alert-title {
  text-wrap: balance;
}

.hosted-upsell-notice .ui-alert-actions {
  justify-content: flex-start;
  margin-top: var(--openbot-space-2);
}

/*
 * The border beam, after libraries.dev/beam: a conic gradient that turns around the border, and a
 * soft glow outside it.
 */
@property --hosted-upsell-beam-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.hosted-upsell-beam {
  position: relative;
  border-color: transparent;
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--openbot-beam-blue) 12%, transparent), transparent 60%),
    var(--openbot-bg-surface-raised);
}

/* The sharp line: the gradient, masked to a 1px ring. */
.hosted-upsell-beam::before,
.hosted-upsell-beam-glow > span {
  position: absolute;
  border-radius: inherit;
  content: "";
  pointer-events: none;
  mask:
    linear-gradient(currentColor 0 0) content-box exclude,
    linear-gradient(currentColor 0 0);
  animation: hosted-upsell-beam-turn 6s linear infinite;
}

.hosted-upsell-beam::before {
  inset: 0;
  padding: 1px;
  background: conic-gradient(
    from var(--hosted-upsell-beam-angle),
    color-mix(in srgb, var(--openbot-beam-blue) 18%, transparent) 0deg,
    color-mix(in srgb, var(--openbot-beam-blue) 18%, transparent) 180deg,
    var(--openbot-beam-teal) 240deg,
    var(--openbot-beam-blue) 290deg,
    var(--openbot-beam-pink) 330deg,
    color-mix(in srgb, var(--openbot-beam-blue) 18%, transparent) 360deg
  );
}

/* The glow: a wider ring of the beam colours, blurred by its parent, so the mask does not cut the blur. */
.hosted-upsell-beam-glow {
  position: absolute;
  inset: calc(-1 * var(--openbot-space-3));
  border-radius: inherit;
  filter: blur(6px);
  opacity: 0.5;
  pointer-events: none;
}

.hosted-upsell-beam-glow > span {
  inset: var(--openbot-space-3);
  padding: 2px;
  background: conic-gradient(
    from var(--hosted-upsell-beam-angle),
    transparent 0deg,
    transparent 210deg,
    var(--openbot-beam-teal) 250deg,
    var(--openbot-beam-blue) 290deg,
    var(--openbot-beam-pink) 330deg,
    transparent 360deg
  );
}

@keyframes hosted-upsell-beam-turn {
  to {
    --hosted-upsell-beam-angle: 360deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hosted-upsell-beam::before,
  .hosted-upsell-beam-glow > span {
    animation: none;
  }
}

/* The modal. It portals out of the workspace, so the rules match the content element itself. */
.hosted-upsell-modal {
  width: min(420px, 100%);
  display: grid;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-6);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-modal);
  outline: 0;
  color: var(--openbot-text-primary);
  background: var(--openbot-bg-sidebar);
}

.hosted-upsell-modal .hosted-upsell-modal-title {
  margin: 0;
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-lg);
  text-wrap: balance;
}

.hosted-upsell-modal .hosted-upsell-modal-description {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-wrap: pretty;
}

.hosted-upsell-modal .hosted-upsell-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
  margin-top: var(--openbot-space-3);
}

/* The picture: a laptop and a server, drawn with plain lines. */
.hosted-upsell-modal .hosted-upsell-scene {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: var(--openbot-space-4);
  padding: var(--openbot-space-6) var(--openbot-space-2) var(--openbot-space-4);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
}

.hosted-upsell-modal .hosted-upsell-device {
  display: grid;
  justify-items: center;
  align-content: end;
  gap: var(--openbot-space-3);
  margin: 0;
}

.hosted-upsell-modal .hosted-upsell-device figcaption {
  display: grid;
  justify-items: center;
  gap: var(--openbot-space-1-5);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}

.hosted-upsell-modal .hosted-upsell-laptop {
  display: grid;
  justify-items: center;
}

.hosted-upsell-modal .hosted-upsell-laptop-lid {
  width: 88px;
  height: 58px;
  padding: 4px;
  border: 2px solid var(--openbot-border-strong);
  border-bottom: 0;
  border-radius: var(--openbot-radius-sm) var(--openbot-radius-sm) 0 0;
  transform-origin: bottom;
  animation: hosted-upsell-lid 5s ease-in-out infinite;
}

.hosted-upsell-modal .hosted-upsell-laptop-screen {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: var(--openbot-radius-xs);
  color: var(--openbot-text-secondary);
  background: var(--openbot-bg-control);
}

.hosted-upsell-modal .hosted-upsell-laptop-screen svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  animation: hosted-upsell-shown-open 5s ease-in-out infinite;
}

.hosted-upsell-modal .hosted-upsell-laptop-base {
  width: 108px;
  height: 6px;
  border-radius: 0 0 var(--openbot-radius-sm) var(--openbot-radius-sm);
  background: var(--openbot-border-strong);
}

.hosted-upsell-modal .hosted-upsell-rack {
  width: 64px;
  display: grid;
  gap: 4px;
}

.hosted-upsell-modal .hosted-upsell-rack span {
  position: relative;
  height: 18px;
  border: 2px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-sm);
}

/* One light on each unit; the lights stay on. */
.hosted-upsell-modal .hosted-upsell-rack span::after {
  position: absolute;
  top: 50%;
  right: 6px;
  width: 5px;
  height: 5px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success);
  transform: translateY(-50%);
  animation: hosted-upsell-light 1.6s ease-in-out infinite;
  content: "";
}

.hosted-upsell-modal .hosted-upsell-rack span:nth-child(2)::after {
  animation-delay: 0.5s;
}

.hosted-upsell-modal .hosted-upsell-rack span:nth-child(3)::after {
  animation-delay: 1s;
}

/* Status: one chip. The laptop chip changes with the lid. */
.hosted-upsell-modal .hosted-upsell-status {
  display: grid;
  justify-items: center;
  font-weight: var(--openbot-weight-medium);
}

.hosted-upsell-modal .hosted-upsell-status > span {
  grid-area: 1 / 1;
  padding: 2px var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
  white-space: nowrap;
}

.hosted-upsell-modal .hosted-upsell-status .hosted-upsell-status-on {
  color: var(--openbot-success-text);
  background: color-mix(in srgb, var(--openbot-success) 16%, transparent);
}

.hosted-upsell-modal .hosted-upsell-status .hosted-upsell-status-off {
  color: var(--openbot-warning-text);
  background: color-mix(in srgb, var(--openbot-warning-text) 14%, transparent);
}

.hosted-upsell-modal .hosted-upsell-status-flip .hosted-upsell-status-on {
  animation: hosted-upsell-shown-open 5s ease-in-out infinite;
}

.hosted-upsell-modal .hosted-upsell-status-flip .hosted-upsell-status-off {
  animation: hosted-upsell-shown-closed 5s ease-in-out infinite;
}

@keyframes hosted-upsell-lid {
  0%,
  25% {
    transform: scaleY(1);
  }
  40%,
  85% {
    transform: scaleY(0.08);
  }
  100% {
    transform: scaleY(1);
  }
}

@keyframes hosted-upsell-shown-open {
  0%,
  30% {
    opacity: 1;
  }
  38%,
  88% {
    opacity: 0;
  }
  96%,
  100% {
    opacity: 1;
  }
}

@keyframes hosted-upsell-shown-closed {
  0%,
  30% {
    opacity: 0;
  }
  38%,
  88% {
    opacity: 1;
  }
  96%,
  100% {
    opacity: 0;
  }
}

@keyframes hosted-upsell-light {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

/* With reduced motion, the picture shows the end state: lid closed, routine stopped, server on. */
@media (prefers-reduced-motion: reduce) {
  .hosted-upsell-modal .hosted-upsell-laptop-lid,
  .hosted-upsell-modal .hosted-upsell-laptop-screen svg,
  .hosted-upsell-modal .hosted-upsell-rack span::after,
  .hosted-upsell-modal .hosted-upsell-status-flip .hosted-upsell-status-on,
  .hosted-upsell-modal .hosted-upsell-status-flip .hosted-upsell-status-off {
    animation: none;
  }

  .hosted-upsell-modal .hosted-upsell-laptop-lid {
    transform: scaleY(0.08);
  }

  .hosted-upsell-modal .hosted-upsell-laptop-screen svg,
  .hosted-upsell-modal .hosted-upsell-status-flip .hosted-upsell-status-on {
    opacity: 0;
  }
}

/* The line in the offline notice. */
.hosted-upsell-offline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--openbot-space-2);
  margin: var(--openbot-space-1) 0 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}

.app-loading .hosted-upsell-offline {
  justify-content: center;
}


/* /@fs//app/packages/ui/src/features/servers/restart-server-dialog.css */
.restart-server-steps {
  display: grid;
  gap: var(--openbot-space-1);
  margin: 0;
  padding: var(--openbot-space-2) var(--openbot-space-3);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  list-style: none;
}

.restart-server-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--openbot-space-3);
  padding-block: var(--openbot-space-1-5);
}

.restart-server-step-icon {
  display: grid;
  place-items: center;
  width: var(--openbot-icon-lg);
  height: var(--openbot-leading-md);
  color: var(--openbot-text-dim);
}

.restart-server-step-icon svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}

.restart-server-step[data-status="done"] .restart-server-step-icon {
  color: var(--openbot-success-text);
}

.restart-server-step[data-status="failed"] .restart-server-step-icon {
  color: var(--openbot-danger-text);
}

.restart-server-step-text {
  display: grid;
  min-width: 0;
}

.restart-server-step-label {
  overflow-wrap: anywhere;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
}

.restart-server-step[data-status="pending"] .restart-server-step-label,
.restart-server-step-detail {
  color: var(--openbot-text-muted);
}

.restart-server-step-detail {
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.server-status-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  margin: var(--openbot-space-3) 0 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}


/* /@fs//app/packages/ui/src/features/settings/opencode-key-dialog.css */
/*
 * The OpenCode Go key dialog. It opens on top of the settings modal, so its layer is one above
 * the shared dialog layer rather than the same one -- both portals are children of `body`, and
 * relying on insertion order alone would break the first time a caller mounts it from elsewhere.
 *
 * Minimal on purpose: left-aligned title with one dynamic description line instead of stacked
 * notice cards, matching the small confirm dialogs.
 */

.opencode-key-backdrop {
  z-index: calc(var(--openbot-layer-dialog) + 1);
}

.opencode-key-dialog {
  width: min(400px, 100%);
  max-height: calc(100dvh - var(--openbot-space-6) * 2);
  overflow-y: auto;
  outline: 0;
  border-radius: var(--openbot-radius-xl);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-6);
  color: var(--openbot-text-primary);
  animation: opencode-key-dialog-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}

.opencode-key-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--openbot-space-1);
}

.opencode-key-title {
  margin: 0;
  font-size: var(--openbot-text-xl);
  line-height: var(--openbot-leading-xl);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: var(--openbot-tracking-tight);
}

.opencode-key-description {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}

.opencode-key-status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success);
}

.opencode-key-form {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
  margin: var(--openbot-space-4) 0 0;
}

.opencode-key-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
}

@keyframes opencode-key-dialog-in {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
}


/* /@fs//app/packages/ui/src/features/servers/add-server-dialog.css */
/* The add-server dialog reuses the join-server-dialog shell (backdrop, surface, close button and
 * content padding). The pricing step is wider. */
.add-server-dialog {
  width: min(460px, 100%);
  transition: width var(--openbot-duration-normal) var(--openbot-ease-out);
}

/* Long prices (for example in PLN) need wider columns: 48px for each character over 10, that is
 * 16px in each of the 3 columns. The width transition above animates the change. */
.add-server-dialog[data-step="pricing"] {
  width: min(calc(760px + var(--add-server-extra-price-chars, 0) * 48px), 100%);
}

.add-server-step {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-6);
  margin: 0;
  animation: add-server-step-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}

.add-server-step .ui-heading:focus {
  outline: none;
}

/* Pricing */

.add-server-pricing {
  gap: var(--openbot-space-4);
}

.add-server-dialog[data-step="pricing"] .join-server-content {
  padding: var(--openbot-space-6);
}

/* Over the plans, so it is as wide as the plans. */
.add-server-limit.ui-alert {
  align-self: stretch;
}

/* What the plans buy, before the prices. */
.add-server-intro {
  gap: var(--openbot-space-2);
  padding-block: var(--openbot-space-2);
}

.add-server-intro .ui-heading,
.add-server-intro .ui-text {
  margin: 0;
  text-wrap: balance;
}

/* The inline padding keeps the title clear of the close button of the shell. */
.add-server-intro .ui-heading {
  padding-inline: calc(var(--openbot-control-md) + var(--openbot-space-2));
  font-size: var(--openbot-text-3xl);
  font-weight: var(--openbot-weight-bold);
  line-height: var(--openbot-leading-3xl);
  letter-spacing: var(--openbot-tracking-tight);
}

.add-server-intro .ui-text {
  max-width: 560px;
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}

/* The billing switch is in the centre. The same inline padding on the two sides keeps it clear of
 * the close button of the shell. */
.add-server-bar {
  position: relative;
  min-height: var(--openbot-control-md);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-2);
  padding-inline: calc(var(--openbot-control-md) + var(--openbot-space-2));
}

/* At the left, across from the close button, so that the billing switch stays in the centre. */
.add-server-bar .hosted-currency {
  position: absolute;
  top: 50%;
  left: 0;
  width: auto;
  flex: 0 0 auto;
  transform: translateY(-50%);
}

/* Two equal columns, so the pill moves by exactly its own width. */
.hosted-billing {
  --hosted-billing-ease: cubic-bezier(0.34, 1.36, 0.64, 1);
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 3px;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-canvas);
}

.hosted-billing::before {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control-active);
  box-shadow: inset 0 0 0 1px var(--openbot-border);
  transition: transform 300ms var(--hosted-billing-ease);
}

.hosted-billing[data-billing="yearly"]::before {
  transform: translateX(100%);
}

.hosted-billing-option {
  position: relative;
  z-index: 1;
  display: flex;
}

.hosted-billing-control {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-1) var(--openbot-space-4);
  border-radius: var(--openbot-radius-pill);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--openbot-duration-normal) var(--openbot-ease-out);
}

.hosted-billing-control[data-checked] {
  color: var(--openbot-text-primary);
}

.hosted-billing-option:has(:focus-visible) .hosted-billing-control {
  box-shadow: var(--openbot-focus-ring);
}

.hosted-billing-save {
  padding: 0 var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-md);
  transition:
    color var(--openbot-duration-overlay) var(--openbot-ease-out),
    background-color var(--openbot-duration-overlay) var(--openbot-ease-out);
}

.hosted-billing[data-billing="yearly"] .hosted-billing-save {
  background: var(--openbot-success-soft);
  color: var(--openbot-success-text);
  animation: hosted-billing-save-pop 300ms var(--hosted-billing-ease) 80ms both;
}

/* One framed panel. Hairlines divide the plans. */
.hosted-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-canvas);
  list-style: none;
}

/* The columns come in one after the other. The fill mode is backwards only, so the dimmed state
 * can still transition after the entrance ends. */
.hosted-plan {
  position: relative;
  isolation: isolate;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: var(--openbot-space-6);
  transition:
    opacity var(--openbot-duration-overlay) var(--openbot-ease-out),
    background-color var(--openbot-duration-normal) var(--openbot-ease-out);
  animation: hosted-plan-in var(--openbot-duration-overlay) var(--openbot-ease-out)
    calc(var(--plan-index) * 40ms + 60ms) backwards;
}

.hosted-plan + .hosted-plan {
  border-left: 1px solid var(--openbot-border);
}

.hosted-plan[data-recommended] {
  background: var(--openbot-bg-surface);
}

.hosted-plan[data-dimmed] {
  opacity: 0.5;
}

/* A cool-to-warm line on the top edge and a soft glow at the bottom of the recommended plan. */
.hosted-plan[data-recommended]::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--openbot-accent), var(--openbot-warning), transparent);
  opacity: 0.8;
  pointer-events: none;
}

.hosted-plan[data-recommended]::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  height: 50%;
  background: linear-gradient(90deg, var(--openbot-accent), var(--openbot-warning));
  opacity: 0.22;
  mask-image: radial-gradient(90% 100% at 50% 100%, var(--openbot-text-primary), transparent);
  pointer-events: none;
  transition: opacity var(--openbot-duration-overlay) var(--openbot-ease-out);
}

/* A fixed height, so that the badge does not move this column's content down. */
.hosted-plan-head {
  height: var(--openbot-control-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}

.hosted-plan-name {
  margin: 0;
  color: var(--openbot-accent-text);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
}

/* Light, like the "Choose" button of the same plan. */
.hosted-plan-badge {
  border-color: transparent;
  background: var(--openbot-surface-light);
  color: var(--openbot-text-on-light);
}

/* One line: the dialog gets wider for long prices. Only when the window is too narrow for that
 * width does the old price go on its own line above the new price. */
.hosted-plan-price {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin: var(--openbot-space-4) 0 0;
}

/* The monthly price on yearly billing. The column grows from zero, so the price slides right
 * instead of jumping. */
.hosted-plan-was {
  display: grid;
  grid-template-columns: 0fr;
  align-self: center;
  opacity: 0;
  transition:
    grid-template-columns var(--openbot-duration-overlay) var(--openbot-ease-out),
    opacity var(--openbot-duration-overlay) var(--openbot-ease-out);
}

.hosted-plan-was[data-shown] {
  grid-template-columns: 1fr;
  opacity: 1;
}

.hosted-plan-was-inner {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.hosted-plan-was s {
  display: inline-block;
  margin-right: var(--openbot-space-2);
  color: var(--openbot-text-dim);
  font-size: var(--openbot-text-xl);
  line-height: var(--openbot-leading-xl);
  font-variant-numeric: tabular-nums;
  text-decoration-thickness: 1px;
}

.hosted-plan-now {
  display: flex;
  align-items: flex-start;
  white-space: nowrap;
}

.hosted-plan-amount {
  --digit-distance: 12px;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-display);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-display);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.hosted-plan-period {
  white-space: nowrap;
  margin-left: var(--openbot-space-1);
  padding-top: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

/* Only when the column is too narrow does the saving go on a second line. */
.hosted-plan-billed {
  display: flex;
  flex-wrap: wrap;
  margin: var(--openbot-space-1) 0 0;
  color: var(--openbot-text-dim);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  animation: add-server-step-in var(--openbot-duration-overlay) var(--openbot-ease-out) both;
}

.hosted-plan-billed-total {
  white-space: nowrap;
}

.hosted-plan-saving {
  color: var(--openbot-success-text);
  white-space: nowrap;
}

.hosted-plan-saving::before {
  content: "\00b7" / "";
  margin: 0 var(--openbot-space-1);
  color: var(--openbot-text-dim);
}

.hosted-plan-summary {
  margin: var(--openbot-space-4) 0 var(--openbot-space-6);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}

/* The buttons line up when the summaries wrap to different lengths. */
.hosted-plan-choose.ui-button {
  margin-top: auto;
}

.hosted-plan-facts {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
  margin: var(--openbot-space-6) 0 0;
  padding: var(--openbot-space-4) 0 0;
  border-top: 1px dashed var(--openbot-border);
  list-style: none;
}

.hosted-plan-facts li {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}

.hosted-plan-facts svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  transition: color var(--openbot-duration-normal) var(--openbot-ease-out);
}

/* Needs that the plans do not cover. */
.add-server-custom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-4);
  padding: 0 var(--openbot-space-1);
}

.add-server-custom-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.add-server-custom-text .ui-text {
  margin: 0;
}

.add-server-custom .ui-button {
  flex: 0 0 auto;
}

.add-server-join {
  margin: 0;
  text-align: center;
}

/* Progress */

.add-server-progress {
  align-items: stretch;
  gap: var(--openbot-space-6);
}

.add-server-progress .join-server-header {
  gap: var(--openbot-space-2);
}

/* Three ring segments around the server logo, one for each step. The SVG turns by -90deg, so the
 * first segment starts at the top. With pathLength 100, each segment is 30.33 long with a gap of 3. */
.add-server-ring {
  position: relative;
  width: 96px;
  height: 96px;
  margin: var(--openbot-space-2) auto 0;
  display: grid;
  place-items: center;
}

.add-server-ring-segments {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke-width: 4;
  transform: rotate(-90deg);
}

.add-server-ring-segment circle {
  stroke-dasharray: 30.33 100;
  transition:
    stroke-dasharray var(--openbot-duration-normal) var(--openbot-ease-out),
    stroke-dashoffset var(--openbot-duration-slow) var(--openbot-ease-out),
    stroke var(--openbot-duration-slow) var(--openbot-ease-out);
}

.add-server-ring-segment:nth-child(1) circle {
  stroke-dashoffset: -1.5;
}

.add-server-ring-segment:nth-child(2) circle {
  stroke-dashoffset: -34.83;
}

.add-server-ring-segment:nth-child(3) circle {
  stroke-dashoffset: -68.17;
}

.add-server-ring-track {
  stroke: var(--openbot-border);
}

.add-server-ring-segment .add-server-ring-fill {
  stroke: var(--openbot-accent);
}

.add-server-ring-segment[data-state="pending"] .add-server-ring-fill {
  stroke-dasharray: 0 100;
}

/* The running segment creeps to 90% and waits there for the step to end. */
.add-server-ring-segment[data-state="active"] .add-server-ring-fill {
  /* About how long a setup step takes. It is not a motion token: the step ends the creep. */
  --add-server-step-creep: 20s;
  stroke-dasharray: 27.3 100;
  transition: stroke-dasharray var(--add-server-step-creep) cubic-bezier(0.05, 0.7, 0.1, 1);
  animation: add-server-segment-breathe 1.6s var(--openbot-ease-in-out) infinite alternate;

  @starting-style {
    stroke-dasharray: 0 100;
  }
}

.add-server-ring-segment[data-state="failed"] .add-server-ring-fill {
  stroke: var(--openbot-danger);
}

/* Ready: the gaps close and the three segments become one success ring. */
.add-server-progress[data-status="ready"] .add-server-ring-segment circle {
  stroke-dasharray: 33.4 100;
  stroke: var(--openbot-success);
}

.add-server-progress[data-status="ready"] .add-server-ring-segment:nth-child(1) circle {
  stroke-dashoffset: 0;
}

.add-server-progress[data-status="ready"] .add-server-ring-segment:nth-child(2) circle {
  stroke-dashoffset: -33.33;
}

.add-server-progress[data-status="ready"] .add-server-ring-segment:nth-child(3) circle {
  stroke-dashoffset: -66.67;
}

/* A small server in the centre: one unit for each step, each with a light at the right. */
.add-server-ring-core {
  position: relative;
  width: 72px;
  height: 72px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--openbot-space-1);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface);
  box-shadow: inset 0 0 0 1px var(--openbot-border);
  transition:
    opacity var(--openbot-duration-normal) var(--openbot-ease-out),
    transform var(--openbot-duration-normal) var(--openbot-ease-out);
}

.add-server-light {
  position: relative;
  width: 42px;
  height: 13px;
  border: 1px solid color-mix(in srgb, var(--openbot-text-dim) 55%, transparent);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-sidebar);
}

/* The drive slot at the left. */
.add-server-light::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  width: 16px;
  height: 1px;
  background: var(--openbot-text-dim);
}

/* The light at the right. */
.add-server-light::after {
  content: "";
  position: absolute;
  top: 3.5px;
  right: 4px;
  width: 4px;
  height: 4px;
  border-radius: var(--openbot-radius-pill);
  background: color-mix(in srgb, var(--openbot-text-dim) 55%, transparent);
  transition:
    background var(--openbot-duration-normal) var(--openbot-ease-out),
    box-shadow var(--openbot-duration-normal) var(--openbot-ease-out);
}

.add-server-light[data-state="active"]::after {
  background: var(--openbot-accent);
  box-shadow: 0 0 6px var(--openbot-accent);
  animation: add-server-light-flicker 1.3s steps(1, end) infinite;
}

.add-server-light[data-state="done"]::after {
  background: var(--openbot-success);
  box-shadow: 0 0 6px var(--openbot-success);
}

.add-server-light[data-state="failed"]::after {
  background: var(--openbot-danger);
  box-shadow: 0 0 6px var(--openbot-danger);
}

.add-server-progress:is([data-status="ready"], [data-status="error"]) .add-server-ring-core {
  opacity: 0;
  transform: scale(0.7);
}

/* The result appears after the ring has closed, then its check mark draws itself. */
.add-server-ring-result {
  position: absolute;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success);
  color: var(--openbot-text-on-accent);
  animation: add-server-pop var(--openbot-duration-overlay) var(--openbot-ease-out) var(--openbot-duration-normal) both;
}

.add-server-ring-result[data-tone="danger"] {
  background: var(--openbot-danger);
}

.add-server-ring-result svg {
  width: 32px;
  height: 32px;
}

.add-server-ring-result svg path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: add-server-check-draw var(--openbot-duration-slow) var(--openbot-ease-out) var(--openbot-duration-slow)
    forwards;
}

/* What happens now. Each new line rolls in from below. */
.add-server-ticker {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  animation: add-server-detail-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}

/* Confetti: pieces start at the logo, burst out, then fall. */

.add-server-confetti {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.add-server-confetti i {
  position: absolute;
  top: var(--confetti-origin-y);
  left: var(--confetti-origin-x);
  width: 7px;
  height: 12px;
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-accent);
  opacity: 0;
  animation: add-server-confetti var(--confetti-duration) var(--openbot-ease-out) var(--confetti-delay) both;
}

.add-server-confetti i:nth-child(5n + 1) {
  background: var(--openbot-success);
}

.add-server-confetti i:nth-child(5n + 2) {
  background: var(--openbot-warning);
}

.add-server-confetti i:nth-child(5n + 3) {
  background: var(--openbot-danger);
}

.add-server-confetti i:nth-child(5n + 4) {
  background: var(--openbot-accent-text);
}

.add-server-confetti i:nth-child(3n) {
  width: 8px;
  height: 8px;
  border-radius: var(--openbot-radius-pill);
}

@keyframes add-server-confetti {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.3) rotate(0deg);
  }

  30% {
    opacity: 1;
    transform: translate(calc(-50% + var(--confetti-x)), calc(-50% + var(--confetti-y)))
      rotate(calc(var(--confetti-spin) / 2)) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--confetti-x) * 1.15), calc(-50% + var(--confetti-y) + 360px))
      rotate(var(--confetti-spin)) scale(0.9);
  }
}

@keyframes hosted-billing-save-pop {
  50% {
    transform: scale(1.1);
  }
}

@keyframes hosted-plan-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

@keyframes add-server-step-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

@keyframes add-server-pop {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
}

@keyframes add-server-check-draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* An uneven pattern, as disk activity is. */
@keyframes add-server-light-flicker {
  0%,
  22%,
  34%,
  58%,
  64%,
  88% {
    opacity: 1;
  }

  18%,
  30%,
  54%,
  61%,
  84% {
    opacity: 0.25;
  }
}

@keyframes add-server-segment-breathe {
  to {
    opacity: 0.55;
  }
}

@keyframes add-server-detail-in {
  from {
    opacity: 0;
    transform: translateY(8px);
    filter: blur(2px);
  }
}

/* After the other svg rules, because this selector is more specific. */
@media (hover: hover) {
  .hosted-plan:not([data-recommended]):hover {
    background: var(--openbot-bg-surface);
  }

  .hosted-plan[data-recommended]:hover::after {
    opacity: 0.3;
  }

  .hosted-plan:hover .hosted-plan-facts svg {
    color: var(--openbot-text-secondary);
  }
}

@media (max-width: 720px) {
  .hosted-plans {
    grid-template-columns: minmax(0, 1fr);
  }

  .hosted-plan + .hosted-plan {
    border-top: 1px solid var(--openbot-border);
    border-left: 0;
  }
}

@media (max-width: 560px) {
  .add-server-intro .ui-heading {
    font-size: var(--openbot-text-2xl);
    line-height: var(--openbot-leading-2xl);
  }

  .add-server-intro .ui-text {
    font-size: var(--openbot-text-md);
    line-height: var(--openbot-leading-md);
  }

  /* The switch goes under the close button and fills the width. */
  .add-server-bar {
    padding: calc(var(--openbot-control-md) + var(--openbot-space-1)) 0 0;
  }

  .add-server-bar .hosted-billing {
    flex: 1;
  }

  /* In the row of the close button, so that the switch keeps the full width. */
  .add-server-bar .hosted-currency {
    top: 0;
    transform: none;
  }

  .add-server-custom {
    flex-direction: column;
    align-items: stretch;
  }

  /* The button goes under the text, so that the text keeps the width. */
  .add-server-limit.ui-alert {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }

  .add-server-limit .ui-alert-actions {
    grid-column: 2;
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .add-server-dialog,
  .hosted-billing::before,
  .hosted-billing-control,
  .hosted-billing-save,
  .hosted-plan,
  .hosted-plan-was,
  .add-server-progress[data-status] .add-server-ring-segment circle,
  .add-server-progress[data-status] .add-server-ring-core {
    transition: none;
  }

  .add-server-step,
  .hosted-billing[data-billing="yearly"] .hosted-billing-save,
  .hosted-plan,
  .hosted-plan-billed,
  .add-server-ring-result,
  .add-server-light[data-state]::after,
  .add-server-ring-segment[data-state] .add-server-ring-fill,
  .add-server-ticker {
    animation: none;
  }

  .add-server-ring-result svg path {
    stroke-dashoffset: 0;
    animation: none;
  }

  .add-server-confetti {
    display: none;
  }
}


/* /@fs//app/src/renderer/src/features/settings/settings-mobile-connect.css */
.settings-mobile-connect-code-collapse {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  transition:
    grid-template-rows var(--openbot-duration-overlay) var(--openbot-ease-out),
    opacity var(--openbot-duration-normal) ease-out;
}

@starting-style {
  .settings-mobile-connect-code-collapse {
    grid-template-rows: 0fr;
    opacity: 0;
  }
}

.settings-mobile-connect-code-collapse[data-collapsing] {
  grid-template-rows: 0fr;
  opacity: 0;
}

.settings-mobile-connect-code-collapse-body {
  min-height: 0;
  overflow: hidden;
}

.settings-mobile-connect-qr-stage {
  position: relative;
  flex: 0 0 auto;
}

.settings-mobile-connect-qr-stage .ui-qr-code {
  transition:
    opacity var(--openbot-duration-normal) ease-out,
    filter var(--openbot-duration-overlay) ease-out,
    transform var(--openbot-duration-overlay) var(--openbot-ease-out);
}

.settings-mobile-connect-qr-stage[data-success] .ui-qr-code {
  opacity: 0.18;
  filter: blur(2px);
  transform: scale(0.97);
}

.settings-mobile-connect-success-mark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--openbot-success);
  animation: settings-mobile-connect-success-enter var(--openbot-duration-overlay) var(--openbot-ease-out) both;
}

.settings-mobile-connect-success-mark::before {
  position: absolute;
  width: 84px;
  height: 84px;
  border: 1px solid var(--openbot-success);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success-soft);
  content: "";
  animation: settings-mobile-connect-success-ring 600ms var(--openbot-ease-out) both;
}

.settings-mobile-connect-success-mark > svg {
  position: relative;
  width: 58px;
  height: 58px;
  padding: var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface-raised);
  filter: drop-shadow(0 6px 16px var(--openbot-shadow-popover-ambient));
  stroke-width: var(--openbot-icon-stroke);
  animation: settings-mobile-connect-success-pop 420ms var(--openbot-ease-out) both;
}

.settings-mobile-connect-success-mark > svg path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: settings-mobile-connect-check-draw 360ms var(--openbot-duration-fast) var(--openbot-ease-out) forwards;
}

.settings-mobile-connect-code-copy {
  max-width: 240px;
  display: grid;
  gap: var(--openbot-space-2);
}

.settings-mobile-connect-code-title {
  font-weight: var(--openbot-weight-semibold);
}

.settings-mobile-connect-expiry {
  color: var(--openbot-accent-text);
  font-variant-numeric: tabular-nums;
}

.settings-mobile-connect-success-title {
  color: var(--openbot-success);
}

.settings-mobile-connect-expired {
  min-height: 196px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  text-align: center;
}

.settings-mobile-connect-expired > svg {
  width: calc(var(--openbot-icon-lg) + var(--openbot-space-3));
  height: calc(var(--openbot-icon-lg) + var(--openbot-space-3));
  margin-bottom: var(--openbot-space-2);
}

.settings-mobile-devices {
  display: grid;
  gap: var(--openbot-space-3);
}

.settings-mobile-devices-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
}

.settings-mobile-devices-heading h3 {
  margin: 0;
  font-weight: var(--openbot-weight-medium);
}

.settings-mobile-devices-states {
  display: grid;
}

.settings-mobile-devices-state {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    grid-template-rows var(--openbot-duration-overlay) var(--openbot-ease-out),
    opacity var(--openbot-duration-normal) ease-out,
    transform var(--openbot-duration-overlay) var(--openbot-ease-out);
}

.settings-mobile-devices-state[data-expanded] {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: translateY(0);
}

.settings-mobile-devices-state-body {
  min-height: 0;
  overflow: hidden;
}

.settings-mobile-devices-empty {
  min-height: 88px;
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  padding: var(--openbot-space-4);
  color: var(--openbot-text-muted);
}

.settings-mobile-devices-empty > svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  flex: 0 0 auto;
}

.settings-mobile-devices-empty > div {
  display: grid;
  gap: var(--openbot-space-1);
}

.settings-mobile-devices-empty-title {
  color: var(--openbot-text-secondary);
  font-weight: var(--openbot-weight-medium);
}

.settings-mobile-devices-table-frame {
  overflow-x: auto;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
}

.settings-mobile-devices-table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.settings-mobile-devices-table th,
.settings-mobile-devices-table td {
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border-bottom: 1px solid var(--openbot-border);
  text-align: left;
  white-space: nowrap;
}

.settings-mobile-devices-table th {
  color: var(--openbot-text-muted);
  font-weight: var(--openbot-weight-medium);
}

.settings-mobile-devices-table tbody tr:last-child td {
  border-bottom: 0;
}

.settings-mobile-device-name {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}

.settings-mobile-device-name svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  color: var(--openbot-text-muted);
}

.settings-mobile-devices-table td.settings-mobile-device-action {
  width: 1%;
  text-align: right;
}

@keyframes settings-mobile-connect-success-enter {
  from {
    opacity: 0;
  }
}

@keyframes settings-mobile-connect-success-ring {
  from {
    opacity: 0.8;
    transform: scale(0.72);
  }

  to {
    opacity: 0;
    transform: scale(1.35);
  }
}

@keyframes settings-mobile-connect-success-pop {
  from {
    opacity: 0;
    transform: scale(0.62) rotate(-8deg);
  }

  70% {
    transform: scale(1.08) rotate(1deg);
  }

  to {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

@keyframes settings-mobile-connect-check-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@media (max-width: 720px) {
  .settings-mobile-connect-link-code {
    align-items: center;
    flex-direction: column;
    text-align: center;
  }

  .settings-mobile-connect-code-copy {
    max-width: 320px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .settings-mobile-connect-code-collapse,
  .settings-mobile-connect-qr-stage .ui-qr-code,
  .settings-mobile-devices-state {
    transition: none;
  }

  .settings-mobile-connect-success-mark,
  .settings-mobile-connect-success-mark::before,
  .settings-mobile-connect-success-mark > svg,
  .settings-mobile-connect-success-mark > svg path {
    animation: none;
  }

  .settings-mobile-connect-success-mark > svg path {
    stroke-dashoffset: 0;
  }
}

/* The phone app install guide: a tab for each phone, with the store QR code beside the steps. It
 * stays here for good, because the sidebar announcement of the beta can be closed. The tab root
 * gives its children to the card, so the header row keeps the card row styles. */
.settings-mobile-app-install {
  display: contents;
}

/* The numbers of the cards: install the app, then sign in with a code (2.1) or the permanent link (2.2). */
.settings-mobile-connect-step.ui-item-media {
  min-width: 24px;
  height: 24px;
  padding-inline: var(--openbot-space-1-5);
  display: inline-grid;
  flex: 0 0 auto;
  align-self: flex-start;
  place-items: center;
  margin-top: 1px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  font-weight: var(--openbot-weight-medium);
  line-height: 1;
}

/* The permanent link card: step 2.2, the other way to do step 2.1. The link and its QR code stay
 * hidden until the user shows them, and open and close like the one-time code. */
/* One width for the Generate buttons of 2.1 and 2.2, so their text column does not move when the
 * label changes or differs between the cards. A longer translation still grows the button. */
.settings-mobile-connect-generate.ui-button {
  min-width: 160px;
}

.settings-mobile-connect-link {
  padding: var(--openbot-space-3) var(--openbot-space-4);
}

.settings-mobile-connect-link-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2) var(--openbot-space-4);
}

.settings-mobile-connect-link-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-2);
}

.settings-mobile-connect-link-reveal {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows var(--openbot-duration-overlay) var(--openbot-ease-out),
    opacity var(--openbot-duration-normal) ease-out;
}

.settings-mobile-connect-link-reveal[data-expanded] {
  grid-template-rows: 1fr;
  opacity: 1;
}

/* The same layout as the install card: the QR code beside its text. */
.settings-mobile-connect-link-code {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-6);
  padding-top: var(--openbot-space-4);
}

@media (prefers-reduced-motion: reduce) {
  .settings-mobile-connect-link-reveal {
    transition: none;
  }
}

.settings-mobile-app-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
}

.settings-mobile-app-tab > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
}

.settings-mobile-app-panels {
  position: relative;
  padding: var(--openbot-space-4);
}

.settings-mobile-app-panels::before {
  position: absolute;
  top: 0;
  right: var(--openbot-space-4);
  left: var(--openbot-space-4);
  height: 1px;
  background: var(--openbot-border);
  pointer-events: none;
  content: "";
}

.settings-mobile-app-panel {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-6);
}

/* The code settles in after the panel fades in, so a change of phone reads as a new code. */
.settings-mobile-app-qr {
  transform: scale(0.96);
  transition: transform var(--openbot-duration-overlay) var(--openbot-ease-out);
}

.settings-mobile-app-panel[data-selected] .settings-mobile-app-qr {
  transform: scale(1);
}

/* The phone's platform, a link and OpenBot in the middle of the store code. The mark lands just
 * after the code, and the link draws in last, so the pair reads as one connection. */
.settings-mobile-app-qr .ui-qr-code-mark {
  gap: 3px;
  opacity: 0;
  transform: scale(0.7);
  transition:
    opacity var(--openbot-duration-normal) ease-out,
    transform var(--openbot-duration-overlay) var(--openbot-ease-out);
}

.settings-mobile-app-panel[data-selected] .settings-mobile-app-qr .ui-qr-code-mark {
  opacity: 1;
  transform: scale(1);
  transition-delay: var(--openbot-duration-fast);
}

.settings-mobile-app-qr-platform {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.settings-mobile-app-qr-link {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  color: var(--openbot-text-muted-on-light);
  stroke-width: 2.5;
  opacity: 0;
  transform: rotate(-45deg) scale(0.6);
  transition:
    opacity var(--openbot-duration-normal) ease-out,
    transform var(--openbot-duration-overlay) var(--openbot-ease-out);
}

.settings-mobile-app-panel[data-selected] .settings-mobile-app-qr-link {
  opacity: 1;
  transform: rotate(0) scale(1);
  transition-delay: calc(var(--openbot-duration-fast) * 2);
}

.settings-mobile-app-qr-logo {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.settings-mobile-app-details {
  min-width: 0;
  display: grid;
  justify-items: start;
  gap: var(--openbot-space-2);
}

.settings-mobile-app-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--openbot-space-2);
}

.settings-mobile-app-title {
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-semibold);
}

.settings-mobile-app-steps {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-1-5);
  margin: var(--openbot-space-1) 0;
  padding-left: var(--openbot-space-4);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  list-style: decimal;
}

.settings-mobile-app-steps > li::marker {
  color: var(--openbot-text-dim);
  font-variant-numeric: tabular-nums;
}

.settings-mobile-app-copy > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}

.settings-mobile-device-platform {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-2);
}

.settings-mobile-device-platform > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
}

.settings-mobile-devices-list {
  display: grid;
  gap: var(--openbot-space-3);
}

/* A phone that signs in while the tab is open fades into the list. */
.settings-mobile-devices-table tbody tr {
  transition: opacity var(--openbot-duration-overlay) var(--openbot-ease-out);
}

@starting-style {
  .settings-mobile-devices-table tbody tr {
    opacity: 0;
  }
}

@media (max-width: 720px) {
  .settings-mobile-app-panel {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .settings-mobile-app-qr,
  .settings-mobile-app-qr .ui-qr-code-mark,
  .settings-mobile-app-qr-link,
  .settings-mobile-devices-table tbody tr {
    transition: none;
  }

  .settings-mobile-app-qr,
  .settings-mobile-app-qr .ui-qr-code-mark,
  .settings-mobile-app-qr-link {
    transform: none;
  }
}


/* /@fs//app/packages/ui/src/features/settings/settings-hosted-sites.css */
.hosted-sites-overview {
  display: grid;
  gap: var(--openbot-space-1);
}

.hosted-sites-list .hosted-sites-row {
  min-height: 72px;
  align-items: center;
}

.hosted-sites-list .ui-item-content {
  min-width: 0;
}

.hosted-sites-link.ui-button {
  width: min(100%, 320px);
  justify-content: flex-start;
  color: var(--openbot-accent-text);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-md);
  text-align: left;
}

.hosted-sites-link-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hosted-sites-actions {
  flex-wrap: nowrap;
  justify-content: flex-end;
}

@media (max-width: 700px) {
  .hosted-sites-list .hosted-sites-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .hosted-sites-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .hosted-sites-actions > .ui-button {
    flex: 1;
  }
}


/* /@fs//app/packages/ui/src/features/servers/join-server-dialog.css */
.join-server-backdrop {
  animation: join-server-backdrop-in var(--modal-open-dur) var(--modal-ease) both;
  will-change: opacity;
}

.join-server-backdrop[data-motion="closing"] {
  animation: join-server-backdrop-out var(--modal-close-dur) var(--modal-ease) both;
}

.join-server-dialog {
  position: relative;
  width: min(420px, 100%);
  max-height: calc(100dvh - 48px);
  overflow: hidden;
  outline: 0;
  border-radius: var(--openbot-radius-xl);
  background: var(--openbot-bg-sidebar);
  color: var(--openbot-text-primary);
  box-shadow:
    0 0 0 1px var(--openbot-border-strong),
    0 24px 64px var(--openbot-shadow-dialog);
}

.join-server-close {
  position: absolute;
  top: var(--openbot-space-6);
  right: var(--openbot-space-6);
  z-index: 2;
  color: var(--openbot-text-muted);
}

.join-server-content {
  width: 100%;
  max-height: inherit;
  overflow-y: auto;
  padding: 32px;
}

.join-server-pages {
  /* The pages have fixed heights for the slide, so an error code adds its row here. */
  --join-server-reference: 0px;
  width: 100%;
  height: 336px;
  overflow: hidden;
  transition: height var(--page-slide-dur) var(--page-slide-ease);
}

.join-server-pages[data-reference] {
  --join-server-reference: calc(var(--openbot-control-xs) + var(--openbot-space-0-5));
}

.join-server-pages[data-page="1"][data-preview-error] {
  height: calc(356px + var(--join-server-reference));
}

.join-server-pages[data-page="2"] {
  height: 292px;
}

.join-server-pages[data-page="2"][data-error] {
  height: calc(364px + var(--join-server-reference));
}

.join-server-page {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--openbot-space-4) + var(--openbot-space-1));
  margin: 0;
}

.join-server-header {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.join-server-header-entry {
  gap: var(--openbot-space-2);
  padding-inline: calc(var(--openbot-space-4) + var(--openbot-space-1));
}

.join-server-header-entry .ui-heading {
  font-size: var(--openbot-text-3xl);
  font-weight: var(--openbot-weight-bold);
  line-height: var(--openbot-leading-3xl);
}

.join-server-header-entry .ui-text {
  font-size: var(--openbot-text-lg);
}

.join-server-header-verified {
  gap: var(--openbot-space-2);
  padding-inline: var(--openbot-space-2);
}

.join-server-header .ui-text {
  max-width: 296px;
  line-height: var(--openbot-leading-sm);
}

.join-server-entry-logo {
  --app-logo-background: var(--openbot-surface-light);
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  margin-bottom: var(--openbot-space-4);
  border-radius: var(--openbot-radius-xl);
  box-shadow:
    0 12px 28px var(--openbot-shadow-dialog),
    inset 0 1px 0 var(--openbot-border-strong);
}

.join-server-field {
  gap: var(--openbot-space-2);
}

.join-server-link-input.ui-input {
  height: var(--openbot-control-xl);
  background: var(--openbot-bg-control);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
}

.join-server-link-input.ui-input:focus-visible {
  outline: none;
  box-shadow: none;
}

.join-server-link-input.ui-input.is-error {
  border-color: var(--openbot-danger);
}

.join-server-field .ui-field-error {
  min-height: var(--openbot-leading-sm);
}

.join-server-identity-logo {
  --app-logo-background: var(--openbot-surface-light);
  width: 88px;
  height: 88px;
  flex: 0 0 auto;
  margin-bottom: var(--openbot-space-6);
  border-radius: var(--openbot-radius-modal);
  box-shadow:
    0 16px 36px var(--openbot-shadow-dialog),
    inset 0 1px 0 var(--openbot-border-strong);
}

.join-server-invite-eyebrow {
  margin-bottom: 2px;
  font-size: var(--openbot-text-lg);
}

.join-server-header-verified .ui-heading {
  font-size: var(--openbot-text-3xl);
  font-weight: var(--openbot-weight-bold);
  line-height: var(--openbot-leading-3xl);
}

.join-server-hostname.ui-text {
  max-width: 260px;
  color: var(--openbot-text-muted);
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-lg);
}

.join-server-alert.ui-alert {
  align-self: start;
  padding-block: var(--openbot-space-2);
}

.join-server-alert .ui-alert-description {
  white-space: normal;
}

.join-server-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--openbot-space-2);
  margin-top: auto;
}

.join-server-actions .ui-button {
  width: 100%;
}

.join-server-actions-verified {
  gap: var(--openbot-space-1);
}

.join-server-preview {
  display: grid;
  gap: var(--openbot-space-3);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-4);
}

.join-server-preview-signal {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}

.join-server-preview-signal i,
.join-server-preview-signal span {
  display: block;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success);
}

.join-server-preview-signal i {
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 4px var(--openbot-success-soft);
}

.join-server-preview-signal span {
  width: 42px;
  height: 1px;
  opacity: 0.52;
}

.join-server-preview-heading {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.join-server-verified {
  color: var(--openbot-success);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}

.join-server-preview-heading strong,
.join-server-preview-heading small,
.join-server-preview dd {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.join-server-preview-heading strong {
  font-size: var(--openbot-text-lg);
}

.join-server-preview-heading small,
.join-server-preview dt,
.join-server-preview p {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

.join-server-preview dl {
  display: grid;
  gap: var(--openbot-space-2);
  margin: 0;
}

.join-server-preview dl div {
  min-width: 0;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: var(--openbot-space-2);
}

.join-server-preview dd {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}

.join-server-preview p {
  margin: 0;
  line-height: var(--openbot-leading-sm);
}

@keyframes join-server-backdrop-in {
  from {
    opacity: 0;
  }
}

@keyframes join-server-backdrop-out {
  to {
    opacity: 0;
  }
}

@media (max-width: 560px) {
  .join-server-backdrop {
    padding: var(--openbot-space-3);
  }

  .join-server-dialog {
    width: 100%;
    max-height: calc(100dvh - 24px);
  }

  .join-server-close {
    top: var(--openbot-space-3);
    right: var(--openbot-space-3);
  }

  .join-server-content {
    padding: var(--openbot-space-6);
  }

  .join-server-pages {
    height: 348px;
  }

  .join-server-pages[data-page="1"][data-preview-error] {
    height: calc(368px + var(--join-server-reference));
  }

  .join-server-pages[data-page="2"] {
    height: 304px;
  }

  .join-server-pages[data-page="2"][data-error] {
    height: calc(376px + var(--join-server-reference));
  }
}

@media (prefers-reduced-motion: reduce) {
  .join-server-backdrop {
    animation: none;
  }

  .join-server-pages {
    transition: none;
  }
}


/* /@fs//app/packages/ui/src/features/settings/integration-layout.css */
/* The shared integration layout: see IntegrationLayout.tsx. */

.integration-logo-tile {
  --integration-tile: 36px;
  display: inline-grid;
  flex: none;
  width: var(--integration-tile);
  height: var(--integration-tile);
  place-items: center;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-primary);
}

.integration-logo-tile[data-size="lg"] {
  --integration-tile: 48px;
  border-radius: var(--openbot-radius-lg);
}

.integration-logo-tile > svg {
  width: 55%;
  height: 55%;
}

.integration-status {
  gap: var(--openbot-space-1);
}

.integration-status-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--openbot-radius-pill);
  background: currentColor;
}

.integration-status[data-status="unavailable"] .integration-status-dot {
  background: var(--openbot-transparent);
  box-shadow: inset 0 0 0 1px currentColor;
}

/* ------------------------------------------------ page header */

.integration-detail-header {
  display: flex;
  gap: var(--openbot-space-3);
  align-items: center;
}

.integration-detail-copy {
  display: grid;
  flex: 1;
  gap: var(--openbot-space-1);
  min-width: 0;
}

.integration-detail-title {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
}

.integration-detail-actions {
  display: flex;
  flex: none;
  gap: var(--openbot-space-2);
}

/* ------------------------------------------------ connect dialog */

.integration-wizard {
  display: grid;
  gap: var(--openbot-space-4);
  padding: var(--openbot-space-6);
  border-radius: var(--openbot-radius-xl);
  background: var(--openbot-bg-sheet);
  box-shadow: var(--openbot-shadow-dialog);
}

.integration-wizard-head {
  display: grid;
  gap: var(--openbot-space-2);
  justify-items: center;
  text-align: center;
}

.integration-wizard-logos {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
  margin-bottom: var(--openbot-space-2);
}

.integration-wizard-app {
  width: 36px;
  height: 36px;
}

/* Dots flow from OpenBot to the other app while the flow runs. */
.integration-wizard-link {
  width: 40px;
  height: 2px;
  border-radius: var(--openbot-radius-pill);
  background:
    radial-gradient(circle, var(--openbot-accent) 0 1px, var(--openbot-transparent) 1.5px) 0 50% / 8px 2px repeat-x;
  animation: integration-wizard-flow 0.6s linear infinite;
}

@keyframes integration-wizard-flow {
  to {
    background-position-x: 8px;
  }
}

.integration-wizard-logos[data-link="connected"] .integration-wizard-link {
  background: var(--openbot-success);
  animation: none;
}

.integration-wizard-logos[data-link="broken"] .integration-wizard-link {
  background:
    radial-gradient(circle, var(--openbot-border-strong) 0 1px, var(--openbot-transparent) 1.5px) 0 50% / 8px 2px
    repeat-x;
  animation: none;
}

/* The other app breathes while OpenBot waits for it. */
.integration-wizard-target {
  display: inline-grid;
  border-radius: var(--openbot-radius-md);
}

.integration-wizard-logos[data-link="connecting"] .integration-wizard-target {
  animation: integration-wizard-pulse 1.8s var(--openbot-ease-out) infinite;
}

.integration-wizard-logos[data-link="connected"] .integration-wizard-target {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--openbot-success) 30%, var(--openbot-transparent));
}

@keyframes integration-wizard-pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--openbot-accent) 45%, var(--openbot-transparent));
  }
  100% {
    box-shadow: 0 0 0 8px var(--openbot-transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .integration-wizard-link,
  .integration-wizard-logos[data-link="connecting"] .integration-wizard-target {
    animation: none;
  }
}

.integration-wizard-body {
  display: grid;
  gap: var(--openbot-space-3);
}

.integration-wizard-foot {
  display: flex;
  gap: var(--openbot-space-2);
  justify-content: flex-end;
}

/* CopyButton draws its icon at full size; match the 14px icons of the other footer buttons. */
.integration-wizard-foot .ui-button > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

/* Above the settings window the flow opens from. */
.integration-dialog-backdrop {
  z-index: calc(var(--openbot-layer-dialog) + 1);
}

.integration-wizard-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: calc(var(--openbot-layer-dialog) + 1);
  width: min(440px, calc(100vw - var(--openbot-space-6) * 2));
  max-height: calc(100dvh - var(--openbot-space-6) * 2);
  overflow-y: auto;
  outline: 0;
  transform: translate(-50%, -50%);
}

.integration-wizard-dialog h2 {
  margin: 0;
}

.integration-dialog-close {
  position: absolute;
  top: var(--openbot-space-3);
  right: var(--openbot-space-3);
}

/* ------------------------------------------------ stepper */

.integration-stepper {
  display: flex;
  align-items: center;
  margin: 0 0 var(--openbot-space-2);
  padding: 0;
  list-style: none;
}

.integration-step {
  display: flex;
  align-items: center;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

/* The line to a step: quiet until the flow reaches that step, then it fills from the left. */
.integration-step + .integration-step::before {
  display: block;
  width: 24px;
  height: 2px;
  margin-inline: var(--openbot-space-1);
  border-radius: var(--openbot-radius-pill);
  background:
    linear-gradient(to right, var(--openbot-success), var(--openbot-accent)) no-repeat,
    var(--openbot-border-strong);
  background-size:
    0% 100%,
    auto;
  content: "";
}

.integration-step + .integration-step[data-state="current"]::before {
  background-size:
    100% 100%,
    auto;
  animation: integration-step-fill 0.4s var(--openbot-ease-out);
}

.integration-step + .integration-step[data-state="done"]::before {
  background:
    linear-gradient(var(--openbot-success), var(--openbot-success)) no-repeat,
    var(--openbot-border-strong);
  background-size:
    100% 100%,
    auto;
  animation: integration-step-fill 0.4s var(--openbot-ease-out);
}

@keyframes integration-step-fill {
  from {
    background-size:
      0% 100%,
      auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .integration-step + .integration-step[data-state="current"]::before,
  .integration-step + .integration-step[data-state="done"]::before {
    animation: none;
  }
}

.integration-step-index {
  display: inline-grid;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  font-weight: var(--openbot-weight-medium);
  line-height: 1;
}

.integration-step[data-state="current"] {
  color: var(--openbot-text-primary);
}

.integration-step[data-state="current"] .integration-step-index {
  border-color: var(--openbot-accent);
  background: var(--openbot-accent);
  color: var(--openbot-text-on-accent);
}

.integration-step[data-state="done"] .integration-step-index {
  border-color: var(--openbot-success);
  color: var(--openbot-success);
}

/* ------------------------------------------------ Connectors list */

.integrations-hub {
  display: grid;
  gap: var(--openbot-space-6);
}

/* The whole row opens the integration, as on Marketplace cards. Buttons in the row stay on top. */
.integrations-hub-row {
  position: relative;
  border-radius: var(--openbot-radius-md);
  transition: background-color var(--openbot-duration-hover) var(--openbot-ease-out);
}

.integrations-hub-row:has(> .integrations-hub-hitarea:hover) {
  background: var(--openbot-hover);
}

.integrations-hub-hitarea {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: var(--openbot-transparent);
  cursor: pointer;
  transition: none;
}

.integrations-hub-hitarea:hover:not(:disabled):not([data-disabled]) {
  background: var(--openbot-transparent);
}

.integrations-hub-hitarea:focus-visible {
  outline: 2px solid var(--openbot-accent-strong);
  outline-offset: -2px;
}

.integrations-hub-actions {
  gap: var(--openbot-space-3);
}

.integrations-hub-actions .ui-button {
  position: relative;
  z-index: 2;
}

.integrations-hub-chevron {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  margin: 0 var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
}

.integrations-hub-title {
  display: inline-flex;
  gap: var(--openbot-space-2);
  align-items: center;
}

.integrations-hub-summary[data-status="attention"] {
  color: var(--openbot-warning-text);
}

.integrations-face-stack {
  display: inline-flex;
  gap: var(--openbot-space-0-5);
  align-items: center;
}

.integrations-face-more {
  display: inline-grid;
  min-width: 24px;
  height: 24px;
  padding: 0 var(--openbot-space-1);
  place-items: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}

.integrations-agent-face {
  display: inline-block;
  flex: none;
  width: 32px;
  height: 32px;
}

.integrations-agent-face[data-size="sm"] {
  width: 24px;
  height: 24px;
}

.integrations-agent-face > * {
  width: 100%;
  height: 100%;
}


/* /@fs//app/packages/ui/src/features/settings/github-connector.css */
.github-connector {
  display: grid;
  gap: var(--openbot-space-6);
}

/* UserAvatar has no style of its own: the initials, or GitHub's picture when the account has one. */
.github-connector-avatar {
  display: inline-grid;
  flex: none;
  width: 32px;
  height: 32px;
  place-items: center;
  overflow: hidden;
  border-radius: var(--openbot-radius-pill);
  background: linear-gradient(135deg, var(--openbot-accent-strong), var(--openbot-onboarding-desktop-indigo));
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
}

.github-connector-avatar > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.github-connector-line {
  padding: var(--openbot-space-3) var(--openbot-space-4);
}

/* On the card fill, the danger tone needs its text step for contrast. */
.github-connector-line[data-tone="danger"] {
  color: var(--openbot-danger-text);
}

.github-connector-search {
  position: relative;
  display: flex;
  align-items: center;
  padding: var(--openbot-space-3) var(--openbot-space-4) var(--openbot-space-2);
}

.github-connector-search > svg {
  position: absolute;
  left: calc(var(--openbot-space-4) + var(--openbot-space-3));
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
  pointer-events: none;
}

.github-connector-search input {
  width: 100%;
  padding-left: calc(var(--openbot-space-3) * 2 + var(--openbot-icon-sm));
}

/* A long list scrolls inside the card, so Disconnect stays near the top of the tab. */
.github-connector-repository-list {
  display: grid;
  max-height: 260px;
  margin: 0;
  padding: 0 var(--openbot-space-2) var(--openbot-space-2);
  overflow-y: auto;
  list-style: none;
}

.github-connector-repository {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
  justify-content: space-between;
  /* The same height with and without the Private badge. */
  min-height: 36px;
  padding: 0 var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
  transition: background-color var(--openbot-duration-fast) var(--openbot-ease-out);
}

.github-connector-repository:hover {
  background: var(--openbot-hover);
}

.github-connector-repository-name {
  min-width: 0;
}

.github-connector-repository-owner {
  color: var(--openbot-text-muted);
}

.github-connector-private {
  flex: none;
  gap: var(--openbot-space-1);
}

/* ------------------------------------------------ connect dialog */

.github-connector-center {
  display: grid;
  min-height: 96px;
  place-items: center;
}

/* The code is about to be typed on another screen, so each character has its own tile. */
.github-connector-code {
  display: flex;
  gap: var(--openbot-space-1-5);
  justify-content: center;
}

.github-connector-code-char {
  display: inline-grid;
  width: 36px;
  height: 48px;
  place-items: center;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-xl);
  font-weight: var(--openbot-weight-semibold);
}

.github-connector-code-char[data-separator="true"] {
  width: 12px;
  border-color: var(--openbot-transparent);
  background: var(--openbot-transparent);
  color: var(--openbot-text-muted);
}

.github-connector-waiting {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
  justify-content: center;
}

.github-connector-done {
  display: flex;
  gap: var(--openbot-space-3);
  align-items: center;
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-success-wash);
}

.github-connector-done > div {
  display: grid;
  flex: 1;
}

/* ------------------------------------------------ disconnect dialog */

.github-connector-effects {
  display: grid;
  margin: 0;
  padding: var(--openbot-space-1);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  list-style: none;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}

.github-connector-effects li {
  display: flex;
  gap: var(--openbot-space-3);
  align-items: center;
  padding: var(--openbot-space-2);
}

.github-connector-effects li + li {
  border-top: 1px solid var(--openbot-border);
}

.github-connector-effect-icon {
  display: inline-grid;
  flex: none;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-muted);
}

.github-connector-effect-icon > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

.github-connector-effects li[data-tone="danger"] .github-connector-effect-icon {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger-text);
}

.github-connector-effects li[data-tone="success"] .github-connector-effect-icon {
  background: var(--openbot-success-soft);
  color: var(--openbot-success);
}

/* The label on the soft danger fill reads the text step, as the shared confirmation does for contrast. */
.github-connector-confirm.ui-button-variant-destructive {
  color: var(--openbot-danger-text);
}


/* /@fs//app/packages/ui/src/features/settings/onepassword-connector.css */
.onepassword-connector {
  display: grid;
  gap: var(--openbot-space-6);
}

/* The link sits under the steps, aligned with their text rather than with a button row. */
.onepassword-connector-link {
  justify-self: start;
  padding-inline: 0;
}

.onepassword-connector-token {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
}

.onepassword-connector-token > :first-child {
  flex: 1;
}

/* A step's text is its instruction, so it wraps instead of ending in an ellipsis. */
.onepassword-connector-step .ui-item-description {
  white-space: normal;
}

.onepassword-connector-step .ui-item-media {
  color: var(--openbot-text-muted);
}

.onepassword-connector-step[data-step="done"] .ui-item-media {
  color: var(--openbot-success);
}

/* A step whose earlier step is not done is quieter, so the eye goes to the one to do now. */
.onepassword-connector-step[data-step="waiting"] .ui-item-title {
  color: var(--openbot-text-muted);
}


/* /@fs//app/packages/ui/src/features/settings/slack-integration.css */
/* Server settings > Connectors > Slack. */

.slack-integration {
  display: grid;
  gap: var(--openbot-space-6);
}

.slack-integration-note {
  margin-top: var(--openbot-space-2);
}

.slack-integration-stack {
  display: grid;
  gap: var(--openbot-space-0-5);
  justify-items: start;
}

/* ------------------------------------------------ remove dialog */

.slack-effects {
  display: grid;
  margin: 0;
  padding: var(--openbot-space-1);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  list-style: none;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}

.slack-effects li {
  display: flex;
  gap: var(--openbot-space-3);
  align-items: center;
  padding: var(--openbot-space-2);
}

.slack-effects li + li {
  border-top: 1px solid var(--openbot-border);
}

.slack-effect-icon {
  display: inline-grid;
  flex: none;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-muted);
}

.slack-effect-icon > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

.slack-effects li[data-tone="danger"] .slack-effect-icon {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger-text);
}

.slack-effects li[data-tone="success"] .slack-effect-icon {
  background: var(--openbot-success-soft);
  color: var(--openbot-success);
}

/* ------------------------------------------------ connect dialog */

.slack-checklist {
  display: grid;
  gap: var(--openbot-space-2);
  margin: 0;
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  list-style: none;
  font-size: var(--openbot-text-sm);
}

.slack-checklist li {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
}

.slack-checklist li[data-state="done"] {
  color: var(--openbot-text-secondary);
}

.slack-checklist li[data-state="done"] svg {
  color: var(--openbot-success);
}

.slack-checklist-dot {
  width: 14px;
  height: 14px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
}

.slack-waiting {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
  justify-content: center;
}

.slack-orchestrator-card {
  display: flex;
  gap: var(--openbot-space-3);
  align-items: center;
  padding: var(--openbot-space-3);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
}

.slack-orchestrator-model {
  display: grid;
  gap: var(--openbot-space-1);
}

/* ------------------------------------------------ Discord roles dialog */

.slack-roles {
  display: grid;
  max-height: 40vh;
  margin: 0;
  padding: var(--openbot-space-1);
  overflow-y: auto;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  list-style: none;
}

.slack-role-row {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
  padding: var(--openbot-space-1) var(--openbot-space-2);
  border-radius: var(--openbot-radius-sm);
  cursor: pointer;
}

.slack-role-row:hover {
  background: var(--openbot-bg-control-hover);
}

.slack-role-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* /@fs//app/packages/ui/src/features/settings/hosted-servers.css */
.hosted-servers-add {
  display: flex;
}

/* The list area before the first list answers. It fades in after a delay, so a fast answer does not flash it. */
.hosted-servers-loading {
  display: grid;
  place-items: center;
  padding: var(--openbot-space-8);
  animation: hosted-servers-loading-in var(--openbot-duration-normal) var(--openbot-ease-out)
    var(--openbot-loading-indicator-delay) both;
}

@keyframes hosted-servers-loading-in {
  from {
    opacity: 0;
  }
}

.hosted-servers-list .hosted-servers-row {
  min-height: 64px;
  align-items: center;
}

.hosted-servers-list .ui-item-content {
  min-width: 0;
}

.hosted-servers-list .ui-item-title {
  gap: var(--openbot-space-2);
}

.hosted-servers-actions {
  flex-wrap: nowrap;
  justify-content: flex-end;
}

@media (max-width: 700px) {
  .hosted-servers-list .hosted-servers-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .hosted-servers-actions {
    width: 100%;
    justify-content: flex-start;
  }
}


/* /@fs//app/packages/ui/src/features/settings/profile.css */
/* The Profile tab of Settings: the header, the year of activity, and its two dialogs. */

.profile-panel {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-6);
}

/* ─── Header ─── */

.profile-hero {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
}

.profile-hero-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(var(--openbot-space-8) * 1.75);
  aspect-ratio: 1;
  border-radius: var(--openbot-radius-pill);
  overflow: hidden;
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-hover);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
}

.profile-hero-avatar > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  outline: 1px solid var(--openbot-image-outline);
  outline-offset: -1px;
  border-radius: inherit;
}

.profile-hero-text {
  min-width: 0;
}

.profile-hero-text h3 {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--openbot-text-xl);
  font-weight: var(--openbot-weight-semibold);
  color: var(--openbot-text-primary);
}

.profile-hero-text p {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--openbot-text-sm);
  color: var(--openbot-text-secondary);
}

.profile-hero-actions {
  display: flex;
  flex: none;
  gap: var(--openbot-space-2);
  margin-inline-start: auto;
}

/* ─── Cards ─── */

/* The surface of a settings card (`.settings-modal-card`), for content that is not a row list. */
.profile-card {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-3);
  margin: 0;
  padding: var(--openbot-space-4);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
}

/* Lists of rows: the rows give the rhythm, as the rows of a settings card do. */
.profile-card.profile-facts,
.profile-card.profile-ranking,
.profile-card.profile-bars {
  row-gap: 0;
  padding: var(--openbot-space-1) var(--openbot-space-4);
}

.profile-activity-placeholder {
  align-items: flex-start;
}

.profile-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--openbot-space-4);
  align-items: start;
}

.profile-columns > .ui-settings-section {
  height: 100%;
  grid-template-rows: auto 1fr;
}

.profile-facts {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.profile-facts > div,
.profile-ranking li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  min-height: calc(var(--openbot-space-8) + var(--openbot-space-3));
  border-top: 1px solid var(--openbot-border);
  font-size: var(--openbot-text-sm);
}

.profile-facts > div:first-child,
.profile-ranking li:first-child {
  border-top: 0;
}

.profile-facts dt {
  flex: none;
  color: var(--openbot-text-secondary);
  transition: color var(--openbot-duration-normal) var(--openbot-ease-out);
}

.profile-facts dd {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  min-width: 0;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}

.profile-ranking {
  list-style: none;
}

.profile-ranking li {
  justify-content: flex-start;
  color: var(--openbot-text-primary);
  transition: opacity var(--openbot-duration-normal) var(--openbot-ease-out);
}

.profile-ranking-avatar {
  width: var(--openbot-space-6);
  height: var(--openbot-space-6);
  flex: none;
}

.profile-ranking-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-ranking strong,
.profile-bar-value {
  font-variant-numeric: tabular-nums;
  font-weight: var(--openbot-weight-medium);
}

/* ─── Bars ─── */

/*
 * The label column is as wide as the longest model name, up to a limit, so every bar starts at the
 * same place. A longer name ends with an ellipsis.
 */
.profile-bars {
  display: grid;
  grid-template-columns: fit-content(45%) 1fr auto;
  column-gap: var(--openbot-space-4);
  margin: 0;
  list-style: none;
}

.profile-bars li {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  min-height: calc(var(--openbot-space-8) + var(--openbot-space-1));
  font-size: var(--openbot-text-sm);
  color: var(--openbot-text-primary);
  transition: opacity var(--openbot-duration-normal) var(--openbot-ease-out);
}

.profile-bar-label {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  min-width: 0;
  white-space: nowrap;
}

.profile-bar-name {
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-bar-track {
  height: var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
  background: color-mix(in srgb, var(--openbot-text-primary) 7%, var(--openbot-transparent));
  overflow: hidden;
}

.profile-bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.profile-bar-value {
  text-align: end;
  color: var(--openbot-text-secondary);
}

/* ─── Heatmap ─── */

.profile-heatmap {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1-5);
  min-width: 0;
}

.profile-heatmap-months,
.profile-heatmap-grid {
  display: grid;
  grid-template-columns: repeat(var(--profile-columns), minmax(0, 1fr));
  column-gap: var(--openbot-space-0-5);
}

.profile-heatmap-months {
  font-size: var(--openbot-text-sm);
  color: var(--openbot-text-muted);
}

.profile-heatmap-months span {
  white-space: nowrap;
}

.profile-heatmap-grid {
  grid-template-rows: repeat(7, auto);
  grid-auto-flow: column;
  row-gap: var(--openbot-space-0-5);
}

.profile-heat-cell {
  display: block;
  aspect-ratio: 1;
  border-radius: var(--openbot-radius-xs);
  background: color-mix(in srgb, var(--openbot-text-primary) 7%, var(--openbot-transparent));
}

.profile-heat-cell[data-empty] {
  background: var(--openbot-transparent);
}

.profile-heat-cell[data-level="1"] {
  background: color-mix(in srgb, var(--openbot-accent) 32%, var(--openbot-transparent));
}

.profile-heat-cell[data-level="2"] {
  background: color-mix(in srgb, var(--openbot-accent) 55%, var(--openbot-transparent));
}

.profile-heat-cell[data-level="3"] {
  background: color-mix(in srgb, var(--openbot-accent) 78%, var(--openbot-transparent));
}

.profile-heat-cell[data-level="4"] {
  background: var(--openbot-accent);
}

.profile-heatmap-grid .profile-heat-cell[data-active] {
  outline: 1px solid var(--openbot-text-primary);
  outline-offset: 1px;
}

/* One label for the whole year. It is fixed to the viewport, so a card that clips its content
   does not cut it. In a dialog it mounts in the dialog, above the overlay. */
.profile-heat-tooltip {
  position: fixed;
  z-index: var(--openbot-layer-toast);
  transform: translate(-50%, calc(-100% - var(--openbot-space-2)));
  pointer-events: none;
  white-space: nowrap;
  box-shadow: var(--openbot-shadow-raised);
}

.profile-heatmap-legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--openbot-space-1);
  font-size: var(--openbot-text-sm);
  color: var(--openbot-text-muted);
}

.profile-heatmap-legend .profile-heat-cell {
  width: var(--openbot-space-3);
}

/* ─── Dialogs ─── */

.profile-dialog {
  width: min(880px, 100%);
  max-height: calc(100dvh - 2 * var(--openbot-space-6));
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
  overflow: auto;
  padding: var(--openbot-space-6);
  outline: 0;
  border-radius: var(--openbot-radius-xl);
  border: 1px solid var(--openbot-dialog-ring);
  background: var(--openbot-bg-sidebar);
  color: var(--openbot-text-primary);
}

.profile-dialog-header,
.profile-dialog-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}

.profile-dialog-footer {
  justify-content: flex-end;
}

.profile-dialog-title {
  margin: 0;
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
}

.profile-share-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--openbot-radius-card);
  box-shadow: var(--openbot-shadow-card);
}

.profile-share-placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: 1200 / 690;
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-surface);
}

.profile-edit {
  width: min(440px, 100%);
}

.profile-edit-form {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
}

.profile-edit-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-2);
}

.profile-edit-photo .profile-edit-photo-trigger {
  width: calc(var(--openbot-space-8) * 2.5);
  height: calc(var(--openbot-space-8) * 2.5);
  overflow: visible;
}

.profile-edit-photo .profile-edit-avatar {
  font-size: var(--openbot-text-xl);
}

.profile-edit-photo-badge {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  display: grid;
  place-items: center;
  width: var(--openbot-space-6);
  height: var(--openbot-space-6);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-secondary);
}

.profile-edit-photo-badge > svg {
  width: var(--openbot-space-3);
  height: var(--openbot-space-3);
}

/* ─── Tiles (last, so that their descendant rules do not override the ones above) ─── */

.profile-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: var(--openbot-space-2);
  margin: 0;
}

.profile-tile {
  --profile-step: calc(var(--openbot-duration-fast) / 3);
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-3);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  transition: background-color var(--openbot-duration-normal) var(--openbot-ease-out);
}

.profile-tile dt {
  font-size: var(--openbot-text-sm);
  color: var(--openbot-text-secondary);
}

.profile-tile dd {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-0-5);
  margin: 0;
}

.profile-tile strong {
  font-size: var(--openbot-text-2xl);
  font-weight: var(--openbot-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--openbot-text-primary);
}

.profile-tile dd > span {
  font-size: var(--openbot-text-sm);
  color: var(--openbot-text-muted);
}

/* ─── Motion ─── */

/* Colour-only hovers stay for every user. Movement is only for users who allow it. */

.profile-tile:hover {
  background: linear-gradient(var(--openbot-hover), var(--openbot-hover)), var(--openbot-bg-surface);
}

.profile-tile-value {
  white-space: pre;
}

.profile-tile .profile-tile-value.is-animating .t-digit {
  animation-delay: calc(
    var(--profile-i, 0) *
    var(--profile-step) *
    1.5 +
    var(--profile-c, 0) *
    var(--profile-step) /
    2
  );
}

.profile-facts > div:hover dt {
  color: var(--openbot-text-primary);
}

/* The row under the pointer stays bright; the other rows step back. */
.profile-ranking:hover li:not(:hover),
.profile-bars:hover li:not(:hover) {
  opacity: 0.45;
}

.profile-bars li:hover .profile-bar-value {
  color: var(--openbot-text-primary);
}

@media (prefers-reduced-motion: no-preference) {
  .profile-panel {
    --profile-step: calc(var(--openbot-duration-fast) / 3);
  }

  /* The page builds from the top: each block rises one step after the block above it. */
  .profile-panel > * {
    animation: profile-rise var(--openbot-duration-toast-enter) var(--openbot-ease-out) backwards;
  }

  .profile-panel > :nth-child(2) {
    animation-delay: var(--profile-step);
  }

  .profile-panel > :nth-child(3) {
    animation-delay: calc(var(--profile-step) * 2);
  }

  .profile-panel > :nth-child(4) {
    animation-delay: calc(var(--profile-step) * 3);
  }

  .profile-panel > :nth-child(n + 5) {
    animation-delay: calc(var(--profile-step) * 4);
  }

  .profile-hero-avatar {
    animation: profile-pop var(--openbot-duration-toast-enter) var(--openbot-ease-out) backwards;
  }

  .profile-tile {
    transition:
      background-color var(--openbot-duration-normal) var(--openbot-ease-out),
      transform var(--openbot-duration-normal) var(--openbot-ease-out);
  }

  .profile-tile:hover {
    transform: translateY(calc(var(--openbot-space-0-5) * -1));
  }

  /* The year fills in as a wave from the oldest week to this week. */
  .profile-heatmap-grid .profile-heat-cell {
    animation: profile-cell-in var(--openbot-duration-overlay) var(--openbot-ease-out) backwards;
    animation-delay: calc(var(--profile-col, 0) * var(--openbot-duration-fast) / 15);
    transition: transform var(--openbot-duration-fast) var(--openbot-ease-out);
  }

  .profile-heatmap-grid .profile-heat-cell[data-active] {
    position: relative;
    z-index: 1;
    transform: scale(1.35);
  }

  /* The label fades in once, then glides from day to day. */
  .profile-heat-tooltip {
    animation: profile-tip-in var(--openbot-duration-normal) var(--openbot-ease-out) backwards;
    transition:
      left var(--openbot-duration-fast) var(--openbot-ease-out),
      top var(--openbot-duration-fast) var(--openbot-ease-out);
  }

  .profile-ranking li {
    animation: profile-slide-in var(--openbot-duration-toast-enter) var(--openbot-ease-out) backwards;
    animation-delay: calc(var(--openbot-duration-slow) + var(--profile-i, 0) * var(--profile-step));
  }

  .profile-ranking-avatar {
    transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
  }

  .profile-ranking li:hover .profile-ranking-avatar {
    transform: scale(1.12) rotate(-6deg);
  }

  .profile-bar-fill {
    transform-origin: left center;
    animation: profile-grow calc(var(--openbot-duration-overlay) * 2.5) var(--openbot-ease-out) backwards;
    animation-delay: calc(var(--openbot-duration-overlay) + var(--profile-i, 0) * var(--profile-step) * 2);
  }

  .profile-hero-actions svg {
    transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
  }

  .profile-hero-actions button:hover .profile-icon-share {
    transform: translateY(calc(var(--openbot-space-0-5) * -1));
  }

  .profile-hero-actions button:hover .profile-icon-edit {
    transform: rotate(-14deg);
  }
}

@keyframes profile-rise {
  from {
    opacity: 0;
    transform: translateY(var(--openbot-space-2));
  }
}

@keyframes profile-pop {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
}

@keyframes profile-cell-in {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
}

@keyframes profile-tip-in {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-100% - var(--openbot-space-1)));
  }
}

@keyframes profile-slide-in {
  from {
    opacity: 0;
    transform: translateX(calc(var(--openbot-space-2) * -1));
  }
}

@keyframes profile-grow {
  from {
    transform: scaleX(0);
  }
}


/* /@fs//app/src/renderer/src/features/computer-use/computer-use.css */
.computer-use-settings {
  display: grid;
  gap: var(--openbot-space-6);
}

.computer-use-card:is(.ui-item-group) {
  overflow: hidden;
}

.computer-use-permission-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-accent-soft);
}

.computer-use-permission-icon svg {
  width: 16px;
  height: 16px;
  color: var(--openbot-accent-text);
}

.computer-use-alert {
  margin-top: var(--openbot-space-3);
}

.computer-use-settings > .computer-use-alert:first-child,
.computer-use-compact > .computer-use-alert:first-child {
  margin-top: 0;
}

.computer-use-loading .computer-use-row {
  min-height: 60px;
}

.computer-use-skeleton-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--openbot-radius-md);
}

.computer-use-skeleton-title {
  width: 128px;
  height: 12px;
}

.computer-use-skeleton-description {
  width: min(220px, 70%);
  height: 10px;
  margin-top: var(--openbot-space-2);
}

/*
 * Wide enough that nothing here wraps or is cut: the header sentence beside "Check again", and each
 * permission description beside its badge and button. `.ui-item-description` ends in an ellipsis
 * rather than a second line, so a card too narrow loses the words instead of folding them.
 */
.computer-use-compact {
  width: min(100%, 520px);
  margin-top: var(--openbot-space-4);
  text-align: left;
}

.computer-use-compact-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  margin: 0 var(--openbot-space-1) var(--openbot-space-2);
}

.computer-use-compact-header h2 {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
}

.computer-use-compact-header p {
  margin: var(--openbot-space-0-5) 0 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

/*
 * "Check again" sits on the same line as the heading, not under the rows: the grant it asks about is
 * given outside this window, so the button belongs to the card and not to any one permission.
 */
.computer-use-compact-header > .ui-button {
  flex: 0 0 auto;
}

.computer-use-compact .computer-use-card {
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
}

.computer-use-compact .computer-use-row {
  min-height: 58px;
  padding: var(--openbot-space-2) var(--openbot-space-3);
}

.computer-use-compact .computer-use-row + .computer-use-row {
  border-top: 1px solid var(--openbot-border);
}

.computer-use-compact .ui-item-title {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}

.computer-use-compact .ui-item-description {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

@media (max-width: 640px) {
  .computer-use-row.ui-item {
    align-items: flex-start;
  }

  .computer-use-row .ui-item-actions {
    width: auto;
    padding-top: var(--openbot-space-1);
  }
}

.computer-use-recheck {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--openbot-space-2);
}

/* A label-and-icon button carries no size of its own for the mark beside the word, and a 24px icon
   dwarfs a two-word label. */
.computer-use-recheck .ui-button > svg,
.computer-use-compact-header .ui-button > svg,
.computer-use-alert .ui-button > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}

/*
 * The hue over the window an agent works in: one even rim of the accent around the whole border,
 * with a short fall inward. The middle of the window keeps no paint at all, because the agent may
 * hold the window for minutes and what it types has to stay as readable as before.
 *
 * Nothing here moves. A turning or breathing edge is movement at the side of the eye for the whole
 * length of the task, which costs more attention than it returns.
 */
.computer-use-window-highlight {
  position: absolute;
  inset: 0;
  border-radius: var(--computer-use-window-radius);
  /*
   * The rim, then two falls inward from every edge: a near one that carries most of the hue and a
   * far one that takes it out slowly, so the window reads as tinted rather than outlined. All three
   * are even the whole way round.
   */
  box-shadow:
    inset 0 0 0 2px var(--openbot-accent),
    inset 0 0 44px -4px var(--openbot-accent-strong),
    inset 0 0 120px -8px var(--openbot-accent-soft);
  /* The surface itself is click-through; this keeps a stray pointer rule from undoing that. */
  pointer-events: none;
}

/*
 * The overlay window that carries the rim. It covers the whole desktop and paints nothing of its
 * own: every pixel outside the rim stays transparent, so the applications below are seen and
 * clicked exactly as before. The frame inside it is what main places over one window.
 */
html:has(.computer-use-highlight-surface),
body:has(.computer-use-highlight-surface),
#root:has(.computer-use-highlight-surface) {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
}

.computer-use-highlight-surface {
  position: relative;
  width: 100%;
  height: 100%;
  background: transparent;
  pointer-events: none;
}

.computer-use-highlight-surface-frame {
  position: absolute;
  pointer-events: none;
}

/*
 * The agent cursor OpenBot draws when the driver draws none, which is every desktop of more than
 * one display. The same dart as the driver theme, at about the size the driver renders it.
 *
 * The tip sits on the origin of the drawing, so the point main sends is the point the cursor holds
 * without any offset. `overflow: visible` keeps the outline, which is half outside the path, from
 * being cut at the edge of the box.
 */
.computer-use-agent-cursor {
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 24px;
  overflow: visible;
  fill: var(--openbot-accent);
  /* The colour the accent carries text in, so the outline holds over any wallpaper. */
  stroke: var(--openbot-text-on-accent);
  stroke-width: 5;
  /* Under the fill, so the outline reads as an edge rather than as a second, thicker dart. */
  paint-order: stroke fill;
  filter: drop-shadow(0 0 6px var(--openbot-accent-strong));
  /* No transition: `ComputerUseAgentCursor` plays each move, and a transition would fight it. */
  pointer-events: none;
}

/*
 * The accent on the one row that still needs the user. `--openbot-accent` is the colour of an
 * action here, and a panel of two rows says at a glance which one is left when only the ungranted
 * one carries it.
 */
.computer-use-grant:is(.ui-button) {
  border-color: transparent;
  background: var(--openbot-accent);
  color: var(--openbot-text-on-accent);
}

@media (hover: hover) and (pointer: fine) and (min-width: 601px) {
  .computer-use-grant:is(.ui-button):hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-accent-hover);
  }
}

/*
 * The window that stands beside the System Settings pane. It is small, it is the only thing in its
 * own window, and the user reads it while looking at another application - so it carries the steps
 * and nothing else.
 */
.computer-use-help {
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
  /* Clear of the traffic lights, which sit over this surface on macOS. */
  padding: 44px var(--openbot-space-4) var(--openbot-space-4);
  background: var(--openbot-bg-canvas);
  text-align: left;
}

.computer-use-help-header {
  display: flex;
  align-items: flex-start;
  gap: var(--openbot-space-3);
}

.computer-use-help-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-accent-soft);
}

.computer-use-help-icon svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  color: var(--openbot-accent-text);
  stroke-width: var(--openbot-icon-stroke);
}

.computer-use-help h1 {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
}

.computer-use-help-header p {
  margin: var(--openbot-space-0-5) 0 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.computer-use-help-steps {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
  margin: 0;
  padding-left: var(--openbot-space-4);
  /* The order of the two steps is the whole of the instruction, so the numbers have to be drawn. */
  list-style: decimal;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.computer-use-help-status {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.computer-use-help-status svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  color: var(--openbot-success);
  stroke-width: var(--openbot-icon-stroke);
}

.computer-use-help-status.is-error {
  color: var(--openbot-danger);
}

/*
 * The bundle the user drags onto the list in System Settings. The list offers no way to browse for
 * an application, so this card is the only way in, and it has to read as something to pick up.
 */
.computer-use-drag-card {
  position: relative;
  width: 210px;
  min-height: 94px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--openbot-space-1);
  align-self: center;
  box-sizing: border-box;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-primary);
  cursor: grab;
  -webkit-app-region: no-drag;
}

.computer-use-drag-card:hover {
  border-color: var(--openbot-accent-strong);
  background: var(--openbot-bg-control-hover);
}

.computer-use-drag-card:active,
.computer-use-drag-card.is-dragging {
  cursor: grabbing;
}

.computer-use-drag-handle {
  position: absolute;
  top: var(--openbot-space-2);
  right: var(--openbot-space-2);
  color: var(--openbot-text-dim);
}

.computer-use-drag-handle svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

.computer-use-drag-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
}

.computer-use-drag-icon img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.computer-use-drag-icon svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  color: var(--openbot-text-secondary);
}

.computer-use-drag-card strong {
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}

.computer-use-drag-card > span:last-child {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

.computer-use-help-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
}


/* /@fs//app/src/renderer/src/features/servers/server-settings-modal.css */
.server-settings-modal-shell .settings-modal-main {
  background: var(--openbot-bg-canvas);
}

.server-settings-modal-shell .settings-modal-scroll-frame::before {
  background: linear-gradient(
    to bottom,
    var(--openbot-bg-canvas) 0%,
    var(--openbot-bg-canvas) 28%,
    var(--openbot-bg-canvas-clear) 100%
  );
}

.server-settings-modal-shell .settings-modal-scroll-frame::after {
  background: linear-gradient(
    to top,
    var(--openbot-bg-canvas) 0%,
    var(--openbot-bg-canvas) 28%,
    var(--openbot-bg-canvas-clear) 100%
  );
}

.server-settings-panel {
  width: 100%;
  gap: var(--openbot-space-6);
  animation: none;
}

.server-settings-logo {
  width: 40px;
  height: 40px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: var(--openbot-tracking-wide);
}

.server-settings-logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  outline: 1px solid var(--openbot-image-outline);
  outline-offset: -1px;
}

.server-settings-logo-trigger {
  border-radius: var(--openbot-radius-md);
  color: var(--openbot-text-muted);
}

.server-settings-logo-trigger .server-settings-logo {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
  pointer-events: none;
}

.server-settings-logo-placeholder {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}

.server-settings-item-error {
  color: var(--openbot-danger);
}

.server-settings-readonly-name.ui-item {
  min-height: 72px;
}

.server-settings-publish-setting.ui-switch-field,
.server-settings-mute-setting.ui-switch-field {
  min-height: 64px;
}

.server-settings-publish-setting.ui-switch-field,
.server-settings-mute-setting.ui-switch-field {
  padding: var(--openbot-space-3) var(--openbot-space-4);
}

.server-settings-publish-setting.ui-switch-field,
.server-settings-mute-setting.ui-switch-field {
  width: 100%;
  justify-content: space-between;
  gap: var(--openbot-space-6);
}

.server-settings-readonly-value {
  min-width: 180px;
  max-width: 300px;
  overflow-wrap: anywhere;
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
  text-align: right;
  user-select: text;
}

.server-settings-address-control.ui-button {
  width: 320px;
  height: var(--openbot-control-md);
  min-width: 0;
  flex-direction: row-reverse;
  justify-content: space-between;
  overflow: visible;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
  padding-inline: var(--openbot-space-3) var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  box-shadow: inset 0 0 0 1px var(--openbot-border);
}

.server-settings-address-control > span {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  font-family: var(--openbot-font-mono);
  font-weight: var(--openbot-weight-regular);
  text-align: left;
  text-overflow: ellipsis;
}

.server-settings-address-control > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}

.server-settings-private-badge {
  padding: var(--openbot-space-0-5) var(--openbot-space-1-5);
}

.server-settings-address-control[data-copied] {
  color: var(--openbot-success);
}

.server-settings-error-toast {
  position: absolute;
  right: var(--openbot-space-6);
  bottom: var(--openbot-space-6);
  left: var(--openbot-space-6);
  z-index: 3;
  box-shadow: 0 12px 32px var(--openbot-shadow-dialog);
}

.server-settings-error-toast[data-with-save-bar] {
  bottom: calc(60px + var(--openbot-space-3));
}

.server-settings-members-alert {
  border: 0;
  background: var(--openbot-bg-control);
}

.server-settings-members-title {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-2);
}

.server-settings-search {
  position: relative;
  width: 188px;
  flex: 0 0 auto;
}

.server-settings-search > svg {
  position: absolute;
  top: 50%;
  left: var(--openbot-space-3);
  z-index: 1;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
  pointer-events: none;
  transform: translateY(-50%);
}

.server-settings-search .ui-input {
  padding-left: var(--openbot-space-8);
}

.server-settings-invite-card.ui-card {
  border: 0;
  background: var(--openbot-bg-surface);
  padding: var(--openbot-space-4);
  box-shadow: none;
}

.server-settings-invite-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px auto;
  align-items: start;
  gap: var(--openbot-space-2);
}

/* The hidden tab panels stay mounted for the slide animation, so without this the
   slot sizes to the widest panel and the active one inherits its width as dead space. */
.server-settings-invite-composer .ui-sliding-tabs-content-slot {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
}

.server-settings-invite-composer .ui-sliding-tabs-content:not([data-selected]) {
  position: absolute;
  inset: 0;
}

.server-settings-invite-mode-panel,
.server-settings-invite-email-field,
.server-settings-invite-email-field .ui-input {
  min-width: 0;
  width: 100%;
}

.server-settings-invite-email-field {
  position: relative;
  width: 22rem;
  max-width: 100%;
}

.server-settings-invite-email-field > .ui-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.server-settings-invite-link-input.ui-input {
  font-family: var(--openbot-font-mono);
  cursor: text;
}

.server-settings-invite-link-input.ui-input::placeholder {
  font-family: var(--openbot-font-sans);
}

.server-settings-invite-copy > span {
  min-width: 9ch;
  text-align: center;
}

.server-settings-invite-copy > svg,
.server-settings-invite-new-link > svg,
.server-settings-routine-feed-row .ui-button > svg,
.server-settings-routine-feed-actions .ui-button > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}

.server-settings-invite-hint {
  display: block;
  margin-top: var(--openbot-space-2);
}

.server-settings-role-select {
  width: 100%;
}

.server-settings-invite-result {
  border: 0;
  background: var(--openbot-bg-surface-raised);
  margin-top: var(--openbot-space-3);
}

.server-settings-member-row[data-disabled] {
  background: var(--openbot-bg-control);
}

.server-settings-member-meta {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.server-settings-member-actions {
  min-width: 92px;
}

.server-settings-member-menu-trigger {
  position: relative;
}

.server-settings-member-menu-trigger::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  content: "";
  transform: translate(-50%, -50%);
}

.server-settings-member-menu-trigger svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

.server-settings-empty-row .ui-item-content {
  text-align: center;
}

.server-settings-desktop-icon {
  width: 40px;
  height: 40px;
  justify-content: center;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-secondary);
}

.server-settings-desktop-icon svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
}

.server-settings-desktop-description {
  max-width: 360px;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.server-settings-desktop-meta {
  max-width: 260px;
  display: grid;
  justify-items: end;
  gap: var(--openbot-space-1);
  text-align: right;
}

.server-settings-desktop-hint {
  max-width: 220px;
  text-align: right;
}

.server-settings-desktop-status {
  margin-top: var(--openbot-space-1);
}

@media (max-width: 720px) {
  .server-settings-address-setting,
  .server-settings-readonly-name {
    align-items: flex-start;
    flex-direction: column;
  }

  .server-settings-address-control,
  .server-settings-readonly-name .ui-item-actions {
    width: 100%;
    max-width: none;
    justify-content: space-between;
  }

  .server-settings-readonly-value {
    min-width: 0;
    max-width: none;
    text-align: left;
  }

  .server-settings-address-control {
    width: 100%;
  }

  .server-settings-error-toast {
    right: var(--openbot-space-4);
    left: var(--openbot-space-4);
  }

  .server-settings-invite-composer {
    grid-template-columns: minmax(0, 1fr) 118px;
  }

  .server-settings-invite-email-field {
    max-width: none;
  }

  .server-settings-invite-composer > .ui-button,
  .server-settings-invite-share {
    grid-column: 1 / -1;
  }

  .server-settings-desktop-card .ui-item {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .server-settings-desktop-meta,
  .server-settings-desktop-hint {
    max-width: none;
    margin-left: 52px;
    justify-items: start;
    text-align: left;
  }
}

@media (max-width: 520px) {
  :is(.server-settings-invite-section, .server-settings-members-section) .ui-settings-section-header {
    align-items: stretch;
    flex-direction: column;
  }

  .server-settings-invite-section .ui-settings-section-actions,
  .server-settings-members-section .ui-settings-section-actions,
  .server-settings-search {
    width: 100%;
  }

  .server-settings-member-row {
    flex-wrap: wrap;
  }

  .server-settings-member-actions {
    width: 100%;
    min-width: 0;
    justify-content: flex-end;
  }

  .server-settings-invite-composer {
    grid-template-columns: minmax(0, 1fr);
  }

  .server-settings-role-select,
  .server-settings-invite-composer > .ui-button,
  .server-settings-invite-share {
    width: 100%;
    grid-column: 1;
  }
}

.server-settings-invite-share {
  display: flex;
  gap: var(--openbot-space-1);
}

.server-settings-invite-share > .ui-button:last-child {
  animation: server-settings-invite-qr-in var(--openbot-duration-normal) var(--openbot-ease-out);
}

@keyframes server-settings-invite-qr-in {
  from {
    opacity: 0;
    transform: translateX(calc(-1 * var(--openbot-space-4)));
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.server-settings-invite-qr {
  animation: server-settings-invite-panel-in var(--openbot-duration-normal) var(--openbot-ease-out);
  transform-origin: top;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-4);
}

@media (prefers-reduced-motion: reduce) {
  .server-settings-invite-share > .ui-button:last-child {
    animation: none;
  }
}

@keyframes server-settings-invite-panel-in {
  from {
    opacity: 0;
    transform: translateY(calc(-1 * var(--openbot-space-3))) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .server-settings-invite-qr {
    animation: none;
  }
}

.server-settings-routine-feed-row {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}

.server-settings-routine-feed-agent {
  flex: none;
  width: auto;
}

.server-settings-routine-feed-row .ui-input {
  flex: 1;
  min-width: 0;
  font-family: var(--openbot-font-mono);
  cursor: text;
}

.server-settings-routine-feed-text {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.server-settings-routine-feed-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-1);
}

/* The feed area before the first read answers. It fades in after a delay, so a fast answer does not flash it. */
.server-settings-routine-feed-loading {
  display: grid;
  place-items: center;
  padding: var(--openbot-space-6);
  animation: server-settings-routine-feed-loading-in var(--openbot-duration-normal) var(--openbot-ease-out)
    var(--openbot-loading-indicator-delay) both;
}

@keyframes server-settings-routine-feed-loading-in {
  from {
    opacity: 0;
  }
}

.server-settings-routine-feed-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}


/* /@fs//app/src/renderer/src/features/servers/server-mcp.css */
/*
 * The MCP section of the server settings modal. The list rows and the form both sit inside the
 * shared settings shell, so this file only carries what the primitives do not: the row line that
 * pairs a name with its status badge, the repeatable-row grids, and the panel-level save bar.
 */

/*
 * The list and the form are the two pages of a page-slide, so they share one grid cell. Each page
 * keeps the column layout the panel used to hold, which is what keeps the form's save bar at the
 * bottom of the panel.
 */
.server-mcp-panel {
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  min-height: 100%;
}

.server-mcp-panel.t-page-slide .t-page {
  position: static;
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-6);
  min-width: 0;
}

/*
 * Only the entering page is mounted, so its starting style is where the entry comes from. The
 * selector has to out-rank `.t-page-slide[data-page][data-page-id]` in transitions.css, which also
 * describes the page that is on screen: a starting style only wins a tie, not a lower specificity.
 */
@starting-style {
  .settings-modal .server-mcp-panel.t-page-slide .t-page[data-page-id] {
    opacity: 0;
    transform: translateX(var(--t-page-from-x));
    filter: blur(var(--page-blur));
  }
}

.server-mcp-section {
  min-width: 0;
}

.server-mcp-error {
  display: block;
  margin-bottom: var(--openbot-space-2);
}

/* The managed runtime under a STDIO server, while it is downloading or after it failed. It sits
   above the list because it describes every row there, not one of them. */
.server-mcp-runtime-note {
  display: block;
  margin-bottom: var(--openbot-space-2);
}

/* A test result is one sentence under the Test section's own button, not a field. */
.server-mcp-test-result {
  display: block;
  overflow-wrap: anywhere;
}

.server-mcp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-3);
  border: 1px dashed var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  padding: var(--openbot-space-8) var(--openbot-space-6);
  text-align: center;
}

/*
 * `.ui-button` leaves an icon at the lucide default of 24px, which towers over the label beside it.
 * The panel's buttons take the shared icon size and stroke, the way the other labelled icon buttons
 * in the app do.
 */
.server-mcp-panel .ui-button > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}

.server-mcp-list {
  min-width: 0;
}

.server-mcp-row-icon {
  color: var(--openbot-text-muted);
}

.server-mcp-row[data-disabled] .server-mcp-row-icon,
.server-mcp-row[data-disabled] .ui-item-content {
  opacity: 0.55;
}

.server-mcp-row-title {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  min-width: 0;
  flex-wrap: wrap;
}

/* The one action a row's sentence asks for: Sign in after a challenge, Cancel during the wait. */
.server-mcp-row-next {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-top: var(--openbot-space-1);
}

.server-mcp-row-menu {
  min-width: 180px;
}

/* Form */

.server-mcp-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--openbot-space-6);
  min-width: 0;
}

.server-mcp-transport-panel {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-6);
  min-width: 0;
}

/* A fieldset so the legend names the group; the browser default frame is not wanted here. */
.server-mcp-repeat {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
  min-width: 0;
  border: 0;
  margin: 0;
  padding: 0;
}

.server-mcp-repeat-legend {
  padding: 0;
}

.server-mcp-repeat-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-2);
}

.server-mcp-repeat-row-pair {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
}

.server-mcp-repeat-add {
  justify-content: center;
  width: 100%;
}

/* The exact address an OAuth app must allow, with its copy button. */
.server-mcp-callback {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  min-width: 0;
}

.server-mcp-callback-url {
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: var(--openbot-font-mono);
}

/* The modal footer belongs to the General tab, so the form carries its own bar at its foot. */
@media (max-width: 520px) {
  .server-mcp-repeat-row-pair {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .server-mcp-repeat-row-pair > .ui-input:first-child {
    grid-column: 1 / -1;
  }
}


/* /@fs//app/packages/ui/src/features/marketplace/marketplace.css */
/* The Marketplace window: agents, apps and skills, and a page for each. Tokens only. */

/* ---------------------------------------------------------------- window */

.skills-marketplace-backdrop {
  z-index: var(--openbot-layer-dialog-host);
  padding: var(--openbot-space-4);
}

.skills-marketplace {
  /* One inset for the whole window: the top bar title and the body start on it. */
  --marketplace-inset: var(--openbot-space-6);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1040px, calc(100vw - 32px));
  height: min(704px, calc(100vh - 32px));
  overflow: hidden;
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-sidebar);
  color: var(--openbot-text-primary);
}

/* As a page, the window card draws the surface, the line and the corner. */
.skills-marketplace-page {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
}

@media (prefers-reduced-motion: no-preference) {
  .skills-marketplace {
    transition:
      opacity var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1),
      transform var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1);
  }

  .skills-marketplace[data-closed] {
    opacity: 0;
    transform: scale(0.98);
  }
}

/* Menus and the connect and confirm dialogs open over the window. */
.marketplace-menu {
  z-index: calc(var(--openbot-layer-dialog-host) + 1);
}

body:has(.skills-marketplace) :is(.integration-dialog-backdrop, .integration-wizard-dialog) {
  z-index: calc(var(--openbot-layer-dialog-host) + 1);
}

.skills-marketplace-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  min-height: 48px;
  padding: var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-2) var(--marketplace-inset);
  border-bottom: 1px solid var(--openbot-border);
}

.skills-marketplace-topbar-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--openbot-space-1);
}

.skills-marketplace-body {
  position: relative;
  overflow: auto;
  scrollbar-gutter: stable;
}

/* The body uses the window inset, so the page lines up with the top bar title. */
.marketplace-frame {
  padding: var(--openbot-space-6) var(--marketplace-inset) var(--openbot-space-8);
}

.skills-marketplace-error {
  position: sticky;
  bottom: var(--openbot-space-4);
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  width: fit-content;
  max-width: calc(100% - 32px);
  margin: 0 auto var(--openbot-space-4);
  padding: var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-3);
  border: 1px solid var(--openbot-danger);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
  color: var(--openbot-danger);
  box-shadow: 0 12px 32px var(--openbot-shadow-dialog);
}

.marketplace-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- crumbs */

.marketplace-crumbs {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--openbot-space-2);
  min-width: 0;
}

.marketplace-title {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-lg);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
 * The parent crumb is a ghost button. Its type takes the title's values. Negative margins on both sides
 * cancel the hover chip's padding and border, so each crumb text is one gap from each separator.
 */
.skills-marketplace .marketplace-crumb-parent {
  flex: 0 1 auto;
  min-width: 0;
  height: auto;
  margin-block: calc(-1 * var(--openbot-space-1));
  margin-inline: calc(-1 * var(--openbot-space-2) - 1px);
  padding: var(--openbot-space-1) var(--openbot-space-2);
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-lg);
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .skills-marketplace .marketplace-crumb-parent:hover:not(:disabled) {
    border-color: var(--openbot-border-strong);
    background: var(--openbot-bg-control-hover);
    color: var(--openbot-text-primary);
  }
}

.marketplace-crumb-separator {
  flex: 0 0 auto;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
}

/* A title takes focus when its view opens. The focus is for screen readers, not a control. */
.marketplace-title:focus,
.skills-marketplace-body h3[tabindex="-1"]:focus {
  outline: none;
}

/* ---------------------------------------------------------------- views */

.marketplace-view,
.marketplace-stack {
  display: grid;
  align-content: start;
  gap: var(--openbot-space-6);
  min-width: 0;
}

.marketplace-head {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-4);
}

.marketplace-head-actions {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  min-width: 0;
  max-width: 50%;
  gap: var(--openbot-space-1);
}

.marketplace-head-copy {
  display: grid;
  flex: 1;
  gap: var(--openbot-space-1);
  min-width: 0;
}

.marketplace-page-title {
  margin: 0;
  overflow-wrap: anywhere;
}

.marketplace-command {
  overflow-wrap: anywhere;
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
}

/* Tabs, search and the filter share one row. */
.marketplace-toolbar {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
}

.marketplace-search {
  position: relative;
  flex: 0 1 240px;
  min-width: 0;
  margin-left: auto;
}

.marketplace-count {
  margin-left: var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
  font-variant-numeric: tabular-nums;
}

.marketplace-install-menu {
  min-width: 220px;
}

/* The button can show an agent's name. A long name is cut, and the skill name keeps its space. */
.marketplace-install-trigger {
  min-width: 0;
  max-width: 100%;
}

.marketplace-install-trigger svg {
  flex: none;
}

.marketplace-install-label {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.marketplace-tab-slot {
  padding-top: var(--openbot-space-4);
}

.marketplace-block {
  display: grid;
  gap: var(--openbot-space-2);
}

.marketplace-block-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}

.marketplace-block-copy {
  display: grid;
  gap: var(--openbot-space-0-5);
  min-width: 0;
}

.marketplace-load-more {
  justify-self: center;
}

/* ---------------------------------------------------------------- avatars and marks */

.marketplace-avatar {
  --marketplace-avatar-size: 20px;
  display: inline-grid;
  flex: none;
  width: var(--marketplace-avatar-size);
  height: var(--marketplace-avatar-size);
}

.marketplace-avatar[data-size="xs"] {
  --marketplace-avatar-size: 16px;
}

.marketplace-avatar[data-size="md"] {
  --marketplace-avatar-size: 40px;
}

.marketplace-avatar[data-size="lg"] {
  --marketplace-avatar-size: 48px;
}

/* An agent avatar stands low in its box. Lift it to the middle, as the channel avatar does. */
.marketplace-avatar > .agent-avatar {
  --agent-avatar-optical-offset: calc(var(--marketplace-avatar-size) * -0.14);
  width: 100%;
  height: 100%;
}

/* A skill's icon, or a spark, on a quiet tile. */
.marketplace-skill-mark {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 20px;
  height: 20px;
  overflow: hidden;
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-muted);
}

.marketplace-skill-mark[data-size="row"] {
  width: 36px;
  height: 36px;
  border-radius: var(--openbot-radius-md);
}

.marketplace-skill-mark[data-size="md"] {
  width: 40px;
  height: 40px;
  border-radius: var(--openbot-radius-md);
}

/* A plugin icon in a row. `PluginIcon` also draws the icon of the MCP connect dialog. */
.skills-marketplace-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  color: var(--openbot-accent-text);
}

.skills-marketplace-icon:has(img) {
  border: 0;
  background: transparent;
}

.skills-marketplace-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.skills-marketplace-icon svg {
  width: 20px;
  height: 20px;
}

.marketplace-skill-mark[data-kind="icon"] > img {
  width: 100%;
  height: 100%;
}

.marketplace-skill-mark[data-kind="none"] > * {
  width: 60%;
  height: 60%;
}

/* An app icon fills its tile. */
.skills-marketplace .integration-logo-tile > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* ---------------------------------------------------------------- cards */

.marketplace-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--openbot-space-3);
}

.marketplace-card {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-rows: auto 1fr auto;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-4);
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-grouped);
  transition: background var(--openbot-duration-fast) var(--openbot-ease-out);
}

.marketplace-card:hover:not(.marketplace-card-skeleton) {
  background: var(--openbot-bg-control-hover);
}

.marketplace-card-head {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  min-width: 0;
}

.marketplace-card-name {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

/* The action sits above the hit area, so "Add" adds and the rest of the card opens the page. */
.marketplace-card-action {
  position: relative;
  z-index: 2;
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  gap: var(--openbot-space-2);
  min-width: 0;
  max-width: 60%;
}

.marketplace-card-body {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--openbot-text-secondary);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.marketplace-card-foot {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  min-height: 16px;
  font-variant-numeric: tabular-nums;
}

.marketplace-hitarea {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: transparent;
}

/* The card draws the hover. The shared ghost hover would cover the text above the hit area. */
.marketplace-hitarea:hover:not(:disabled) {
  background: transparent;
}

.marketplace-card-skeleton {
  grid-template-rows: auto auto auto;
}

.marketplace-skeleton-mark {
  width: 40px;
  height: 40px;
  border-radius: var(--openbot-radius-md);
}

.marketplace-skeleton-line {
  width: 100%;
  height: 12px;
}

.marketplace-skeleton-line:last-child {
  width: 60%;
}

.marketplace-done {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  color: var(--openbot-success-text);
  font-size: var(--openbot-text-sm);
  white-space: nowrap;
}

.marketplace-done > svg {
  width: 14px;
  height: 14px;
}

/* ---------------------------------------------------------------- rows */

.marketplace-rows {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.marketplace-row {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  min-height: 52px;
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
}

.marketplace-row-copy {
  display: grid;
  flex: 1;
  gap: var(--openbot-space-0-5);
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- pages */

.marketplace-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: var(--openbot-space-8);
  align-items: start;
}

.marketplace-side {
  position: sticky;
  top: var(--openbot-space-6);
  padding-left: var(--openbot-space-6);
  border-left: 1px solid var(--openbot-border);
}

/* `dt` and `dd` are direct children of the list, so each fact is one pair of grid rows. */
.marketplace-props {
  display: grid;
  gap: var(--openbot-space-0-5);
  margin: 0;
}

.marketplace-props > dd {
  margin: 0 0 var(--openbot-space-3);
}

.marketplace-props > dd:last-child {
  margin-bottom: 0;
}

/* The Information list of an app page: the label and the value side by side. */
.marketplace-info {
  grid-template-columns: minmax(120px, max-content) minmax(0, 1fr);
  column-gap: var(--openbot-space-6);
  row-gap: var(--openbot-space-2);
}

.marketplace-info > dd {
  margin: 0;
}

.skills-marketplace .marketplace-link {
  height: auto;
  padding: 0;
}

/* The skill-preview card, with room for more than one request. */
.marketplace-try {
  display: grid;
  gap: var(--openbot-space-2);
}

.skill-preview-card.marketplace-try-card {
  gap: var(--openbot-space-2);
}

/* Every text line is as tall as the chip, so the chip and the text share one line. */
.marketplace-try-card .skill-preview-request {
  width: min(100%, 560px);
  line-height: var(--openbot-space-6);
}

.marketplace-try-card .skill-preview-chip {
  margin-inline-end: var(--openbot-space-0-5);
  vertical-align: top;
}

.marketplace-try-card .reference-chip-icon > :is(img, svg) {
  width: 100%;
  height: 100%;
}

/* The skill's SKILL.md, as the agent reads it. */
.marketplace-doc {
  min-width: 0;
  padding: var(--openbot-space-4) var(--openbot-space-6);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  font-size: var(--openbot-text-sm);
  overflow-wrap: anywhere;
}

.marketplace-doc > :first-child {
  margin-top: 0;
}

.marketplace-doc > :last-child {
  margin-bottom: 0;
}

/* The app page is the page of the app in Settings, at the Settings content width. */
.marketplace-app-page {
  width: min(100%, 720px);
  margin-inline: auto;
}

/* ---------------------------------------------------------------- no results */

.marketplace-empty {
  display: grid;
  justify-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-8) var(--openbot-space-6);
  border: 1px dashed var(--openbot-border-strong);
  border-radius: var(--openbot-radius-card);
  text-align: center;
}

.marketplace-empty > p {
  max-width: 440px;
  margin: 0;
}

.marketplace-empty > .ui-button {
  margin-top: var(--openbot-space-2);
}

.marketplace-empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--openbot-space-2);
}

/* ---------------------------------------------------------------- narrow */

@media (max-width: 860px) {
  .skills-marketplace {
    --marketplace-inset: var(--openbot-space-4);
  }

  .marketplace-page {
    grid-template-columns: minmax(0, 1fr);
  }

  .marketplace-side {
    position: static;
    padding: var(--openbot-space-4) 0 0;
    border-top: 1px solid var(--openbot-border);
    border-left: 0;
  }

  .marketplace-head {
    flex-wrap: wrap;
  }
}

/* Last, because it is the most specific icon rule: every button icon in the window is 16px. */
.skills-marketplace .ui-button > svg,
.marketplace-search > svg {
  width: 16px;
  height: 16px;
}


/* /@fs//app/packages/ui/src/features/settings/logo-color-picker.css */
/* The logo color swatches, in the same shape as the agent avatar color grid. */
.logo-color-grid {
  display: grid;
  grid-template-columns: repeat(5, 32px);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  gap: 4px;
}

.logo-color-choice {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  transition-property: scale, background-color, box-shadow;
  transition-duration: var(--openbot-duration-normal), var(--openbot-duration-hover), var(--openbot-duration-hover);
  transition-timing-function: ease-out;
}

.logo-color-choice:hover {
  background: var(--openbot-hover);
}

.logo-color-choice:active {
  scale: 0.96;
}

.logo-color-choice-selected {
  background: var(--openbot-border);
  box-shadow:
    inset 0 0 0 1px var(--openbot-text-muted),
    0 1px 3px var(--openbot-shadow-popover-ambient);
}

.logo-color-swatch {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: var(--openbot-radius-pill);
  box-shadow: inset 0 0 0 1px var(--openbot-border-strong);
}


/* /@fs//app/packages/ui/src/features/settings/sound-theme-picker.css */
/* Sound feedback off, or on in one sound theme. Each card shows a moving dither tile. */
.sound-theme-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  width: 100%;
  min-width: 0;
  gap: var(--openbot-space-2);
}

.sound-theme-option {
  display: flex;
  min-width: 0;
}

.sound-theme-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: var(--openbot-space-1);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  box-shadow: inset 0 0 0 1px var(--openbot-border);
  text-align: left;
  cursor: pointer;
  transition-property: scale, background-color, box-shadow;
  transition-duration: var(--openbot-duration-normal), var(--openbot-duration-hover), var(--openbot-duration-normal);
  transition-timing-function: var(--openbot-ease-out);
}

.sound-theme-card:hover {
  background: var(--openbot-bg-control-hover);
}

.sound-theme-card:active {
  scale: 0.96;
}

.sound-theme-card[data-checked] {
  box-shadow:
    inset 0 0 0 1.5px var(--openbot-text-primary),
    0 1px 3px var(--openbot-shadow-popover-ambient);
}

.sound-theme-card[data-popped][data-checked] {
  animation: sound-theme-pop var(--openbot-duration-toast-enter) var(--openbot-ease-out);
}

.sound-theme-option:has(:focus-visible) .sound-theme-card {
  box-shadow: var(--openbot-focus-ring);
}

/* The shader reads the ink from `color` and the back from `background-color`. Before it starts, or
   without WebGL, the same colors show as a dot screen. */
.sound-theme-dither {
  --sound-theme-ink: var(--openbot-sound-off-ink);
  --sound-theme-back: var(--openbot-sound-off-back);
  position: relative;
  height: 56px;
  overflow: hidden;
  clip-path: inset(0 round var(--openbot-radius-md));
  border-radius: var(--openbot-radius-md);
  color: var(--sound-theme-ink);
  background-color: var(--sound-theme-back);
  background-image:
    radial-gradient(var(--sound-theme-ink) 1px, transparent 1.5px),
    linear-gradient(135deg, transparent, var(--sound-theme-ink));
  background-size:
    4px 4px,
    100% 100%;
  opacity: 0.72;
  filter: saturate(0.7);
  transition-property: opacity, filter;
  transition-duration: var(--openbot-duration-overlay);
  transition-timing-function: var(--openbot-ease-out);
}

.sound-theme-dither canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.sound-theme-card:hover .sound-theme-dither,
.sound-theme-card[data-checked] .sound-theme-dither {
  opacity: 1;
  filter: none;
}

.sound-theme-dither[data-choice="default"] {
  --sound-theme-ink: var(--openbot-sound-warm-ink);
  --sound-theme-back: var(--openbot-sound-warm-back);
}

.sound-theme-dither[data-choice="mech"] {
  --sound-theme-ink: var(--openbot-sound-mech-ink);
  --sound-theme-back: var(--openbot-sound-mech-back);
}

.sound-theme-dither[data-choice="bubble"] {
  --sound-theme-ink: var(--openbot-sound-bubble-ink);
  --sound-theme-back: var(--openbot-sound-bubble-back);
}

.sound-theme-dither[data-choice="press"] {
  --sound-theme-ink: var(--openbot-sound-press-ink);
  --sound-theme-back: var(--openbot-sound-press-back);
}

.sound-theme-text {
  display: grid;
  min-width: 0;
  padding: var(--openbot-space-1-5) var(--openbot-space-1) var(--openbot-space-0-5);
}

.sound-theme-name {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: inherit;
}

.sound-theme-hint {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

@keyframes sound-theme-pop {
  0% {
    scale: 1;
  }

  35% {
    scale: 1.06;
    rotate: -1.5deg;
  }

  70% {
    scale: 0.98;
    rotate: 0.8deg;
  }

  100% {
    scale: 1;
    rotate: 0deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sound-theme-card[data-popped][data-checked] {
    animation: none;
  }

  .sound-theme-card:active {
    scale: 1;
  }
}


/* /@fs//app/packages/ui/src/features/settings/mcp-connect-dialog.css */
/*
 * The connect dialog. It opens over the marketplace modal and over the menus the marketplace opens,
 * so it takes the nested step of `--openbot-layer-dialog-host` rather than the shared dialog layer:
 * both portals are children of `body`, and insertion order alone would break the first time it is
 * opened from somewhere else.
 *
 * The shape is a centred column: the two ends of the connection, the name, one card of facts, and
 * one button. A connection is a single decision, so the dialog is a single line of reading down the
 * middle rather than a form with a toolbar under it.
 */

.mcp-connect-backdrop {
  z-index: calc(var(--openbot-layer-dialog-host) + 2);
}

.mcp-connect-dialog {
  position: relative;
  width: min(420px, 100%);
  max-height: calc(100dvh - var(--openbot-space-6) * 2);
  overflow-y: auto;
  outline: 0;
  border-radius: var(--openbot-radius-xl);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-6);
  color: var(--openbot-text-primary);
  animation: mcp-connect-dialog-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}

/* The header reads down the middle: the two ends, the name, the one line about what happens next. */
.mcp-connect-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-1);
}

/* Out of the column, so the centred name is centred on the dialog and not on what is left of it. */
.mcp-connect-close {
  position: absolute;
  top: var(--openbot-space-3);
  right: var(--openbot-space-3);
}

/* This computer and the app, joined by the dots the connection is about to become. The dots run
   from left to right, so the picture says which way the app is being brought in. */
.mcp-connect-marks {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-3);
}

.mcp-connect-mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
}

.mcp-connect-mark .app-logo {
  width: 48px;
  height: 48px;
}

.mcp-connect-dots {
  width: 28px;
  height: 2px;
  background-image: radial-gradient(circle, var(--openbot-text-muted) 1px, transparent 1px);
  background-size: 7px 2px;
  animation: mcp-connect-dots-run 900ms linear infinite;
}

/* The app icon is the one being joined, so it is the one that arrives - at the size of the mark
   opposite it, because the two ends are equal. */
.mcp-connect-marks .mcp-connect-mark-icon {
  width: 48px;
  height: 48px;
  animation: mcp-connect-mark-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}

@media (prefers-reduced-motion: reduce) {
  .mcp-connect-dots,
  .mcp-connect-marks .mcp-connect-mark-icon {
    animation: none;
  }
}

.mcp-connect-title {
  display: block;
  margin: var(--openbot-space-3) 0 0;
  text-align: center;
  font-size: var(--openbot-text-xl);
  line-height: var(--openbot-leading-xl);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: var(--openbot-tracking-tight);
}

.mcp-connect-description {
  margin: 0;
  text-align: center;
  text-wrap: balance;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}

/* One card of facts, its rows divided rather than spaced: a connection is one thing to read. */
.mcp-connect-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-grouped);
}

.mcp-connect-row {
  position: relative;
  margin: 0;
  padding: var(--openbot-space-3);
}

.mcp-connect-row + .mcp-connect-row {
  border-top: 1px solid var(--openbot-border-grouped);
}

/* The steps that turn on a server another app runs. The heading leaves room for the setup link
   that sits in the row's corner. */
.mcp-local-heading {
  margin: 0;
  padding-right: var(--openbot-space-6);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-sm);
}

.mcp-local-steps {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
  margin: var(--openbot-space-2) 0 0;
  padding-left: var(--openbot-space-4);
  list-style: decimal;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.mcp-local-steps > li::marker {
  color: var(--openbot-text-muted);
}

.mcp-local-address {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.mcp-local-address > code {
  overflow-wrap: anywhere;
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
}

.mcp-connect-form {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
  margin: var(--openbot-space-4) 0 0;
}

/* On the label's line, at the far end of it: the way out to the key page is a quiet aside, and it
   is the size of the other links in the marketplace rather than the size of the field. */
.mcp-connect-docs {
  position: absolute;
  top: var(--openbot-space-3);
  right: var(--openbot-space-3);
  gap: var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.mcp-connect-primary {
  width: 100%;
}

/* The marks that say a control leaves the app. They read beside the words rather than over them,
   so they are the size of every other external-link mark in the marketplace. */
.mcp-connect-docs > svg,
.mcp-connect-primary > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}

/* Empty until a connection answers, and it holds no height then: a live region that reserves space
   would leave a gap over the buttons in the state the dialog opens in. */
.mcp-connect-status:empty {
  display: none;
}

.mcp-connect-privacy {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.mcp-connect-privacy svg {
  flex: none;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
}

@keyframes mcp-connect-dots-run {
  to {
    background-position-x: 7px;
  }
}

@keyframes mcp-connect-mark-in {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
}

@keyframes mcp-connect-dialog-in {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
}

/* A joined server's sign-in page, drawn from the host's browser. The dialog widens so the page is
   large enough to type in, and the page keeps the shape of the host's frame. */
.mcp-connect-dialog.mcp-sign-in-page-dialog,
.mcp-connect-dialog[data-page] {
  width: min(720px, 100%);
}

.mcp-sign-in-page {
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
}

.mcp-sign-in-page-dialog .mcp-sign-in-page {
  margin-top: var(--openbot-space-4);
}

.mcp-sign-in-page-note {
  min-width: 0;
  margin: 0;
}

/* A relayed sign-in: the page is in the user's own browser, so the dialog holds only the address field. */
.mcp-sign-in-relay-open {
  margin-top: var(--openbot-space-4);
}

.mcp-sign-in-relay-form {
  margin-top: var(--openbot-space-4);
}

.mcp-sign-in-relay-row {
  display: flex;
  gap: var(--openbot-space-2);
}

.mcp-sign-in-relay-row > .ui-input {
  flex: 1;
  min-width: 0;
}

.mcp-sign-in-page-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  margin-top: var(--openbot-space-4);
}


/* /@fs//app/src/renderer/src/features/provider-updates/provider-updates.css */
/* The provider mark in the update notification's icon slot. The sizes match the slot the Toaster
   reserves for a status glyph, and the fill is the brand colour the provider row already uses, so
   the notification and the row that offers the same update read as one thing. */
.provider-update-toast-logo {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  overflow: visible;
  fill: var(--openbot-provider-current);
}

/* The action sits beside the words it acts on, centred on the title and the version line, rather than
   in a row of its own under them. The words stop at the button while it is there; a state with no
   button gives them the full width, so the running update's bar reaches the right edge. */
.provider-update-toast[data-sonner-toast][data-styled="true"] [data-action] {
  grid-row: 1;
  align-self: center;
}

.provider-update-toast[data-sonner-toast][data-styled="true"]:has(.provider-update-toast-action:not([data-idle="true"]))
  [data-content] {
  grid-column: 2;
}

/* In the first row the button is under the close control, which floats over the top right corner,
   so it keeps the same room clear that the words keep. */
.ui-toaster.ui-toaster-closeable .provider-update-toast[data-sonner-toast][data-styled="true"] [data-action],
.ui-toaster .provider-update-toast[data-sonner-toast][data-styled="true"]:has([data-close-button]) [data-action] {
  margin-right: var(--openbot-space-6);
}

/* A state with nothing to offer marks its label instead of losing it, and the button goes out of the
   layout. Sonner renders its action button for as long as an action exists on the toast, and taking
   the action away means replacing the notification, which is the one thing this flow will not do.
   Hiding the button also keeps a control with no accessible name out of the tree. */
.ui-toaster [data-sonner-toast] [data-action]:has(.provider-update-toast-action[data-idle="true"]) {
  display: none;
}

/* The running update puts its bar under the version line. Sonner builds the toast's children itself,
   so the bar cannot be one of them - it goes in the description, as a line of its own. */
.provider-update-toast[data-sonner-toast][data-styled="true"] [data-description]:has(.provider-update-toast-progress) {
  display: flex;
  flex-direction: column;
}

/* A block, so the ellipsis applies in a state with no bar too, where the description is not a flex
   column. */
.provider-update-toast-line {
  display: block;
  min-width: 0;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A failure is a sentence, not a version. It wraps, also inside a long path or address, and stops
   after three lines until the user opens it. */
.provider-update-toast-line[data-failed="true"] {
  display: -webkit-box;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.provider-update-toast-line[data-failed="true"][data-expanded="true"] {
  display: block;
  -webkit-line-clamp: none;
  line-clamp: none;
}

/* The control that opens the rest of the failure sits under it, at the start of the line, in the
   description's colour. */
.provider-update-toast .provider-update-toast-details {
  margin-top: var(--openbot-space-1);
  color: inherit;
  font-size: inherit;
  text-decoration: underline;
}

/* The bar and the percentage, on one line under the version. */
.provider-update-toast-progress {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  margin-top: var(--openbot-space-2);
}

/* The content column keeps its words clear of the close control, which floats over the top right
   corner. The progress row is below that corner, so it takes the room back and ends at the card's
   right padding. */
.ui-toaster.ui-toaster-closeable .provider-update-toast .provider-update-toast-progress,
.ui-toaster .provider-update-toast:has([data-close-button]) .provider-update-toast-progress {
  margin-right: calc(-1 * var(--openbot-space-6));
}

.provider-update-toast-bar {
  flex: 1;
  min-width: 0;
}

/* The bar carries the provider's colour, the same one the mark above it carries, so the running
   update is legible as this provider's at a glance rather than as generic progress. */
.provider-update-toast-bar[data-provider] .ui-progress-fill {
  background: var(--openbot-provider-current);
}

/* A short movement leaves most of each 400 ms display interval still and readable.
   Move the whole value together; staggered digits make fast changes hard to read. */
.provider-update-toast-percent {
  --digit-dur: var(--openbot-duration-fast);
  --digit-distance: var(--openbot-space-1);
  --digit-blur: 0px;
  --digit-ease: ease-out;
  display: inline-flex;
  justify-content: flex-end;
  width: 4ch;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}


/* /@fs//app/packages/ui/src/features/custom-providers/custom-providers.css */
/* The dialog that describes an OpenAI-compatible endpoint. It sits on the same modal geometry as
 * join-server-dialog.css, but scrolls instead of paging: the repeatable model and header lists have
 * no fixed height. */

.custom-provider-dialog {
  display: flex;
  width: min(460px, 100%);
  max-height: calc(100dvh - 48px);
  flex-direction: column;
  overflow: hidden;
  outline: 0;
  /* The same radius the settings modal uses, so the two surfaces read as one family. It also nests
   * the close button: an 8px glyph target held 8px in from the corner asks for about 16px around it,
   * which 20px overshot. */
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-sidebar);
  color: var(--openbot-text-primary);
}

.custom-provider-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--openbot-space-3);
  border-bottom: 1px solid var(--openbot-border);
  padding: var(--openbot-space-4);
}

.custom-provider-mark {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
}

.custom-provider-title {
  min-width: 0;
  flex: 1;
}

/* The close button is a 32px target around a 16px glyph, so it overhangs its own glyph by 8px on
 * every side. It is held at the top of the header and pulled out by that 8px, so the glyph keeps the
 * header's own 16px inset from the top and from the inline end and reads as square in the corner.
 * Centring it instead would leave it 26px down while staying 16px in, because the title is two lines
 * tall and the header centres its children. */
.custom-provider-close {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-block-start: calc(var(--openbot-space-2) * -1);
  margin-inline-end: calc(var(--openbot-space-2) * -1);
  color: var(--openbot-text-muted);
}

/* The form is the layout box; the fields inside it are what scrolls, so the footer stays put and
 * outside the scroll fade. */
.custom-provider-body {
  display: flex;
  min-height: 0;
  flex-direction: column;
}

.custom-provider-form {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: var(--openbot-space-4);
  overflow-y: auto;
  padding: var(--openbot-space-4);
}

/* The saved endpoints scroll on the same terms the form's fields do, so both dialogs keep their
 * footer outside the fade. */
.custom-provider-list {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: var(--openbot-space-4);
  overflow-y: auto;
  padding: var(--openbot-space-4);
}

.custom-provider-list-empty {
  padding: var(--openbot-space-4) 0;
  text-align: center;
}

.custom-provider-rows {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
}

.custom-provider-rows-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--openbot-space-3);
}

.custom-provider-row {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
}

/* Two equal columns and a trash button: the model ID and its display name carry the same weight,
 * and neither should reflow when the other holds a long value. */
.custom-provider-row-inputs {
  display: grid;
  align-items: center;
  gap: var(--openbot-space-2);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
}

.custom-provider-row-inputs.custom-provider-row-single {
  grid-template-columns: minmax(0, 1fr) auto;
}

.custom-provider-rows-error,
.custom-provider-row-error,
.custom-provider-submit-error {
  display: block;
}

.custom-provider-actions {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-2);
  border-top: 1px solid var(--openbot-border);
  padding: var(--openbot-space-4);
}

.custom-provider-actions .ui-button-variant-default {
  width: 100%;
}

/* Same reason as the picker heading: only the direct children here are the label-and-icon buttons.
 * The nested remove buttons are icon-only and already sized by .ui-icon-button. */
.custom-provider-rows > .ui-button svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}

/* The label sits first and a find control follows it; a section error keeps the far end. */
.custom-provider-rows-heading > .custom-provider-discover {
  margin-inline-start: auto;
}

.custom-provider-rows-heading > .custom-provider-discover + .custom-provider-rows-error {
  display: none;
}

.custom-provider-rows-heading > .custom-provider-discover svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}

.custom-provider-discovery-status {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}

.custom-provider-discovered {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--openbot-space-1);
  list-style: none;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
}

.custom-provider-discovered-row {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-1) var(--openbot-space-2);
  border-radius: var(--openbot-radius-sm);
  cursor: pointer;
}

.custom-provider-discovered-row:hover {
  background: var(--openbot-bg-control-hover);
}

.custom-provider-discovered-id {
  min-width: 0;
  overflow: hidden;
  font-family: var(--openbot-font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The preset chooser: two short groups of full-width rows. */
.custom-provider-preset-group {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
}

.custom-provider-presets {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.custom-provider-preset.ui-button {
  display: flex;
  width: 100%;
  height: auto;
  align-items: center;
  justify-content: flex-start;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  text-align: start;
  white-space: normal;
}

.custom-provider-preset-icon {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-secondary);
}

.custom-provider-preset > .custom-provider-preset-icon svg,
.custom-provider-preset-chevron {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}

.custom-provider-preset-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 2px;
}

.custom-provider-preset-title {
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}

.custom-provider-preset-description {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
}

.custom-provider-preset-chevron {
  flex-shrink: 0;
  color: var(--openbot-text-muted);
}

/* The custom ACP agent form. */
.custom-acp-presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-2);
}

.custom-acp-code {
  overflow-wrap: anywhere;
}

.custom-acp-code input,
input.custom-acp-code {
  font-family: var(--openbot-font-mono);
}

/* Local model servers and ACP agents that the host found, below the provider list. */
.detected-providers {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
  margin-top: var(--openbot-space-4);
}

.detected-providers-heading {
  display: flex;
  min-height: 24px;
  align-items: center;
  gap: var(--openbot-space-2);
}

.detected-providers-scanning {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
}

.ui-button.detected-providers-scan {
  gap: var(--openbot-space-1-5);
  margin-inline-start: auto;
  margin-inline-end: calc(var(--openbot-space-2) * -1);
}

.detected-providers-heading > .detected-providers-scan svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

.detected-providers-icon {
  color: var(--openbot-text-secondary);
}

.detected-providers .detected-providers-icon > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}

.ui-button.detected-providers-show-hidden {
  align-self: flex-start;
  margin-inline-start: calc(var(--openbot-space-2) * -1);
}

/* Under the last error it belongs to, at the start of the line like that text. */
.ui-button.custom-agents-copy-diagnostics {
  justify-self: start;
  margin-inline-start: calc(var(--openbot-space-2) * -1);
}

/* The lists in the detection settings, below the switch card. */
.detected-providers-settings {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
  margin-top: var(--openbot-space-3);
}

/* The ACP registry search and agent-ID forms. The field takes its own line; the actions sit under it
 * and wrap apart, with the same gap the settings section keeps between its children. */
.acp-registry-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-2);
}

.acp-registry-form > .ui-field {
  flex-basis: 100%;
}

/* A registry entry in a narrow column. Translated action labels can be wider than the row, so the
 * actions move under the entry and then wrap among themselves. The entry keeps a readable width and
 * no action is clipped. */
.acp-registry-entry.ui-item {
  flex-wrap: wrap;
}

.acp-registry-entry .ui-item-content {
  flex-basis: 180px;
}

.acp-registry-entry .ui-item-actions {
  min-width: 0;
  flex-shrink: 1;
  flex-wrap: wrap;
  margin-inline-start: auto;
}


/* /@fs//app/packages/ui/src/features/agents/agent-template.css */
/* The publish dialog and the install dialog of an agent template. Both are one centred card: the
 * agent's identity on top, its content below, and the actions in a footer on the right. */

.agent-template-dialog {
  position: relative;
  display: flex;
  width: min(420px, 100%);
  max-height: calc(100dvh - 48px);
  flex-direction: column;
  overflow: hidden;
  outline: 0;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-sidebar);
  color: var(--openbot-text-primary);
}

.agent-template-status {
  position: absolute;
  z-index: 1;
  inset-block-start: var(--openbot-space-3);
  inset-inline-start: var(--openbot-space-3);
}

.agent-template-corner-actions {
  position: absolute;
  z-index: 1;
  display: flex;
  gap: var(--openbot-space-1);
  inset-block-start: var(--openbot-space-2);
  inset-inline-end: var(--openbot-space-2);
  color: var(--openbot-text-muted);
}

.agent-template-body {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: var(--openbot-space-4);
  padding: var(--openbot-space-6) var(--openbot-space-4) var(--openbot-space-4);
}

.agent-template-scroll {
  overflow-y: auto;
}

.agent-template-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-1);
  text-align: center;
}

.agent-template-avatar {
  width: 72px;
  height: 72px;
  margin-block-end: var(--openbot-space-3);
}

.agent-template-name {
  overflow-wrap: anywhere;
}

.agent-template-description {
  display: -webkit-box;
  margin-block-start: var(--openbot-space-1);
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

.agent-template-rows {
  display: grid;
  overflow: hidden;
  border-radius: var(--openbot-radius-grouped);
}

.agent-template-row {
  display: grid;
  width: 100%;
  height: auto;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-3);
  border-radius: 0;
  padding: var(--openbot-space-3) var(--openbot-space-4);
  text-align: start;
  color: var(--openbot-text-muted);
}

.agent-template-row + .agent-template-row {
  border-top: 1px solid var(--openbot-border-grouped);
}

.agent-template-row-copy {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-0-5);
}

.agent-template-row-title {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}

.agent-template-row-detail {
  overflow: hidden;
  color: var(--openbot-text-grouped-secondary);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-template-actions {
  display: flex;
  flex-shrink: 0;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
  border-top: 1px solid var(--openbot-border);
  padding: var(--openbot-space-3) var(--openbot-space-4);
}

.agent-template-copy {
  margin-inline-end: auto;
}

.agent-template-detail-header {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-block-start: calc(var(--openbot-space-2) * -1);
}

.agent-template-detail {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: var(--openbot-space-4);
  overflow-y: auto;
}

.agent-template-section {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
}

/* The instructions as Markdown, at the body size of the dialog. Headings stay below the agent's name. */
.agent-template-prose {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  overflow-wrap: anywhere;
}

.agent-template-prose .message-markdown-heading[data-level] {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}

.agent-template-prose .message-markdown-heading:not([data-level="1"], [data-level="2"]) {
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}

.agent-template-list {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.agent-template-list > li {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-0-5);
}

.agent-template-skill-toggle {
  justify-content: flex-start;
  align-self: flex-start;
  gap: var(--openbot-space-1);
  margin-inline-start: calc(var(--openbot-space-2) * -1);
}

.agent-template-skill-text {
  max-height: 240px;
  margin: var(--openbot-space-1) 0 0;
  overflow: auto;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-3);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  white-space: pre-wrap;
}


/* /@fs//app/packages/ui/src/features/agents/agent-delete-undo-toast.css */
/* Sonner gives an unstyled toast no width, so the host takes the toaster width. */
.agent-delete-undo-toast-host {
  width: var(--width);
}

/* The same raised surface, border, and shadow as the shared toast. The bottom padding keeps the bar
   clear of the text. */
.agent-delete-undo-toast {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-3);
  overflow: hidden;
  padding: var(--openbot-space-3);
  padding-bottom: calc(var(--openbot-space-3) + var(--openbot-space-1));
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface-raised);
  box-shadow:
    0 0 0 1px var(--openbot-border),
    var(--openbot-shadow-raised);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
}

/* Without a fixed track, the grid row grows to the drawing's width, and the drawing's 128% height
   then resolves against that row. The drawing becomes taller than wide and the body sits low. */
.agent-delete-undo-toast-avatar {
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  width: 32px;
  height: 32px;
}

.agent-delete-undo-toast-text {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.agent-delete-undo-toast-title {
  overflow: hidden;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-delete-undo-toast-detail {
  overflow: hidden;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The bar sits on the bottom edge, inside the rounded corners. */
.agent-delete-undo-toast-bar {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
}

.agent-delete-undo-toast-bar .ui-progress-track {
  border-radius: 0;
  background: transparent;
}

.agent-delete-undo-toast-bar .ui-progress-fill {
  background: var(--openbot-accent);
  transition-duration: var(--openbot-duration-fast);
  transition-timing-function: linear;
}


/* /@fs//app/packages/ui/src/features/updates/whats-new.css */
/* The "What's new" dialog after an app update. One centred card: the logo and version on top, the
 * notes in a scroll area, and the actions in a footer. The groups use the colours of the
 * changelog page on openbot.run, so a reader sees the same notes in the same way. */

.whats-new-dialog {
  position: relative;
  display: flex;
  width: min(480px, 100%);
  max-height: min(640px, calc(100dvh - 2 * var(--openbot-space-6)));
  flex-direction: column;
  overflow: hidden;
  outline: 0;
  border-radius: var(--openbot-radius-xl);
  background: var(--openbot-bg-sidebar);
  color: var(--openbot-text-primary);
}

.whats-new-close {
  position: absolute;
  z-index: 1;
  inset-block-start: var(--openbot-space-3);
  inset-inline-end: var(--openbot-space-3);
  color: var(--openbot-text-muted);
}

.whats-new-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-8) var(--openbot-space-6) var(--openbot-space-4);
  text-align: center;
}

.whats-new-logo {
  --app-logo-background: var(--openbot-surface-light);
  width: 56px;
  height: 56px;
  margin-block-end: var(--openbot-space-3);
  border-radius: var(--openbot-radius-logo);
}

.whats-new-title {
  margin: 0;
  font-size: var(--openbot-text-2xl);
  font-weight: var(--openbot-weight-bold);
  line-height: var(--openbot-leading-2xl);
}

.whats-new-body {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--openbot-space-6);
  overflow-y: auto;
  padding: var(--openbot-space-2) var(--openbot-space-6) var(--openbot-space-6);
  border-block-start: 1px solid transparent;
}

.whats-new-body.scroll-fade-top {
  border-block-start-color: var(--openbot-border);
}

.whats-new-body.scroll-fade-bottom {
  mask-image: linear-gradient(to bottom, var(--openbot-text-primary) calc(100% - 32px), transparent);
}

.whats-new-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-2);
  padding-block: var(--openbot-space-6);
  text-align: center;
}

.whats-new-state .ui-button {
  margin-block-start: var(--openbot-space-2);
}

.whats-new-state-icon {
  width: 24px;
  height: 24px;
  color: var(--openbot-warning-text);
}

.whats-new-notice {
  padding: var(--openbot-space-3) var(--openbot-space-4) var(--openbot-space-4);
  border-radius: var(--openbot-radius-card);
  background-image: linear-gradient(
    180deg,
    var(--openbot-warning-soft),
    color-mix(in srgb, var(--openbot-warning) 3%, transparent)
  );
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--openbot-warning) 26%, transparent);
  --whats-new-tone: var(--openbot-warning-text);
}

.whats-new-notice-title {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin: 0 0 var(--openbot-space-2);
  color: var(--openbot-warning-text);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
}

.whats-new-notice-title svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.whats-new-group {
  --whats-new-tone: var(--openbot-text-muted);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--openbot-space-3);
}

.whats-new-group[data-type="added"] {
  --whats-new-tone: var(--openbot-logo-production);
}

.whats-new-group[data-type="changed"] {
  --whats-new-tone: var(--openbot-accent-text);
}

.whats-new-group[data-type="fixed"] {
  --whats-new-tone: var(--openbot-success-text);
}

.whats-new-group-title {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin: 0;
  color: var(--whats-new-tone);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.whats-new-group-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--openbot-radius-pill);
  background: var(--whats-new-tone);
  box-shadow: 0 0 10px color-mix(in srgb, var(--whats-new-tone) 70%, transparent);
}

.whats-new-group-count {
  padding: 0 var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-pill);
  background: color-mix(in srgb, var(--whats-new-tone) 12%, transparent);
  font-family: var(--openbot-font-mono);
  font-weight: var(--openbot-weight-medium);
  letter-spacing: 0;
}

.whats-new-list {
  display: grid;
  width: 100%;
  gap: var(--openbot-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A hanging mark in the group's colour, so a long item wraps under its own text. */
.whats-new-item {
  position: relative;
  padding-inline-start: var(--openbot-space-6);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  text-wrap: pretty;
}

.whats-new-item-headline {
  display: block;
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}

.whats-new-item-detail {
  display: block;
  margin-block-start: var(--openbot-space-0-5);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.whats-new-item::before {
  content: "";
  position: absolute;
  inset-block-start: 0.75em;
  inset-inline-start: var(--openbot-space-1);
  width: 8px;
  height: 1px;
  background: color-mix(in srgb, var(--whats-new-tone) 70%, transparent);
}

.whats-new-toggle {
  margin-inline-start: calc(-1 * var(--openbot-space-2));
  color: var(--openbot-text-muted);
}

.whats-new-actions .ui-button svg,
.whats-new-toggle svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}

.whats-new-toggle svg {
  transition: transform var(--openbot-duration-fast) var(--openbot-ease-out);
}

.whats-new-toggle[data-expanded] svg {
  transform: rotate(180deg);
}

.whats-new-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border-block-start: 1px solid var(--openbot-border);
}

@media (max-width: 560px) {
  .whats-new-backdrop {
    padding: var(--openbot-space-3);
  }

  .whats-new-header {
    padding-inline: var(--openbot-space-4);
  }

  .whats-new-body {
    padding-inline: var(--openbot-space-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .whats-new-backdrop,
  .whats-new-toggle svg {
    animation: none;
    transition: none;
  }
}

/* The Help menu of the window rail. A long release headline ends in an ellipsis before its date. */
.help-menu {
  width: 320px;
}

.help-menu .help-menu-news {
  gap: var(--openbot-space-3);
}

.help-menu-news-headline {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.help-menu-news .ui-menu-trailing {
  flex: none;
}


/* /@fs//app/packages/ui/src/features/billing/billing.css */
/* The Billing panel in desktop Settings and the web Billing dialog: one row for each server that has
 * a plan, and the Customer Portal button above them. */

.billing-panel {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
}

.billing-loading {
  display: grid;
  place-items: center;
  padding: var(--openbot-space-8);
}

.billing-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--openbot-space-3);
  min-height: 32px;
}

.billing-toolbar .ui-button {
  max-width: 100%;
  height: auto;
  white-space: normal;
}

.billing-empty {
  padding: var(--openbot-space-6) var(--openbot-space-4);
  border: 1px dashed var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  text-align: center;
}

.billing-server-logo {
  width: 32px;
  height: 32px;
  border-radius: var(--openbot-radius-md);
}

.billing-server-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
}

.billing-server .ui-item-actions {
  gap: var(--openbot-space-2);
}

.billing-server-price {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The web client's Billing dialog. */
.billing-dialog-backdrop {
  background: var(--openbot-bg-overlay);
}

.billing-dialog {
  position: relative;
  display: flex;
  width: min(640px, 100%);
  max-height: calc(100dvh - 2 * var(--openbot-space-6));
  flex-direction: column;
  overflow: hidden;
  outline: 0;
  border-radius: var(--openbot-radius-modal);
  background: var(--openbot-bg-sidebar);
  color: var(--openbot-text-primary);
}

.billing-dialog-close {
  position: absolute;
  z-index: 1;
  inset-block-start: var(--openbot-space-3);
  inset-inline-end: var(--openbot-space-3);
  color: var(--openbot-text-muted);
}

.billing-dialog-header {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-6) var(--openbot-space-6) var(--openbot-space-4);
}

.billing-dialog-header p {
  margin: 0;
}

.billing-dialog-title {
  margin: 0;
  font-size: var(--openbot-text-2xl);
  font-weight: var(--openbot-weight-bold);
  line-height: var(--openbot-leading-2xl);
}

.billing-dialog-body {
  min-height: 0;
  overflow-y: auto;
  padding: 0 var(--openbot-space-6) var(--openbot-space-6);
}

/* The License part above the server plans. The buy form is the lower part of the license card. */

.billing-license {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-3);
}

/* The button goes under the text, so that a long button label does not cover the text. */
@container (max-width: 560px) {
  .billing-license .ui-alert {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }

  .billing-license .ui-alert-actions {
    grid-column: 2;
    justify-content: flex-start;
  }
}

.billing-license-icon {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-secondary);
}

.billing-license-icon svg {
  width: 18px;
  height: 18px;
}

.billing-license-row .ui-item-actions {
  gap: var(--openbot-space-2);
}

.billing-license-buy {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3) var(--openbot-space-4);
}

.billing-license-buy-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
}

.billing-license-buy-users,
.billing-license-buy-total {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
}

.billing-license-buy-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.billing-license-stepper {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
  margin: 0;
  border: 0;
  padding: 0;
}

.billing-license-stepper-value {
  min-width: 3ch;
  font-weight: var(--openbot-weight-semibold);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.billing-license-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-2);
}

.billing-license-link.ui-button {
  height: auto;
  padding: 0;
}

.billing-license-divider {
  width: 100%;
  margin: var(--openbot-space-2) 0;
  border: 0;
  border-top: 1px solid var(--openbot-border);
}

.billing-license-change {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-3);
}

.billing-license-quote {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
  border-top: 1px solid var(--openbot-border);
  padding-top: var(--openbot-space-3);
}

.billing-license-lines {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}

.billing-license-lines div {
  display: flex;
  justify-content: space-between;
  gap: var(--openbot-space-3);
}

.billing-license-lines dd {
  margin: 0;
  color: var(--openbot-text-primary);
  font-variant-numeric: tabular-nums;
}

.billing-license-total {
  display: flex;
  align-items: baseline;
  gap: var(--openbot-space-2);
  margin: 0;
}

.billing-license-total-amount {
  font-size: var(--openbot-text-2xl);
  font-weight: var(--openbot-weight-bold);
  font-variant-numeric: tabular-nums;
}

.billing-license-users {
  max-height: 320px;
  overflow-y: auto;
}


/* /@fs//app/packages/ui/src/styles/reference-chip.css */
.reference-chip,
/* Every composer token, including the ones for a reference whose agent or skill is gone. */
.composer-mention-token {
  display: inline-flex;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  height: var(--openbot-space-6);
  align-items: center;
  justify-content: flex-start;
  gap: var(--openbot-space-1);
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-border);
  padding: var(--openbot-space-1) var(--openbot-space-1-5) var(--openbot-space-1) var(--openbot-space-1);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: 500;
  line-height: var(--openbot-space-4);
  vertical-align: middle;
  white-space: nowrap;
  text-decoration: none;
}

/* A plugin and an MCP server read as the skill chips do: each names something the agent was given. */
.reference-chip[data-kind="mcp"],
.reference-chip[data-kind="plugin"],
.reference-chip[data-kind="skill"] {
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
}

/* A quote is a passage, not a name: it stops at a short width, and its title shows all of it. */
.reference-chip[data-kind="quote"] {
  max-width: min(240px, 100%);
  font-weight: 450;
}

.reference-chip[data-kind="agent"]:hover,
button.reference-chip[data-kind="quote"]:hover {
  background: var(--openbot-border-strong);
  color: var(--openbot-text-primary);
}

.reference-chip .reference-chip-icon {
  display: inline-grid;
  width: var(--openbot-space-4);
  height: var(--openbot-space-4);
  flex: 0 0 var(--openbot-space-4);
  place-items: center;
  overflow: hidden;
  border-radius: var(--openbot-radius-xs);
  color: inherit;
}

.reference-chip-icon > img,
.reference-chip-icon > svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* In the text, a line icon has the size and stroke of a file chip's page icon. Agent faces and logos
   keep the full box. */
:is(.message-reference-chip, .composer-mention-token) .reference-chip-icon > svg.lucide {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  stroke-width: var(--openbot-icon-stroke);
}

.reference-chip-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* /@fs//app/packages/ui/src/skill-preview.css */
:root {
  --stagger-dur: 500ms;
  --stagger-distance: 12px;
  --stagger-stagger: 40ms;
  --stagger-blur: 3px;
  --stagger-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Lines start translated down + blurred + invisible; .is-shown
   on the parent flips them to their resting state. The second
   line's transition-delay holds it back by --stagger-stagger
   so the eye lands on the headline first. */
.t-stagger-line {
  display: block;
  opacity: 0;
  transform: translateY(var(--stagger-distance));
  filter: blur(var(--stagger-blur));
  transition:
    opacity var(--stagger-dur) var(--stagger-ease),
    transform var(--stagger-dur) var(--stagger-ease),
    filter var(--stagger-dur) var(--stagger-ease);
  will-change: transform, opacity, filter;
}
.t-stagger-line--2 {
  transition-delay: var(--stagger-stagger);
}
.t-stagger-line--3 {
  transition-delay: calc(var(--stagger-stagger) * 2);
}

.t-stagger.is-shown .t-stagger-line {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  .t-stagger-line {
    transition: none !important;
  }
}

.skill-preview {
  display: grid;
  gap: var(--openbot-space-6);
  min-width: 0;
}
.skill-preview-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: var(--openbot-space-3);
  row-gap: var(--openbot-space-3);
  align-items: center;
}
.skill-preview-heading .agent-skill-icon {
  grid-column: 1;
  align-self: center;
}
.skill-preview-name {
  grid-column: 2;
  min-width: 0;
}
.skill-preview-action {
  grid-column: 3;
  justify-self: end;
}
/* The one-line summary reads under the whole row, as the lead of the page. */
.skill-preview-summary {
  grid-column: 1 / -1;
}
.skill-preview-heading h2,
.skill-preview-heading p,
.skill-preview-request p {
  margin: 0;
}
.skill-preview-heading h2 {
  font-size: var(--openbot-text-2xl);
  font-weight: var(--openbot-weight-medium);
  overflow-wrap: anywhere;
}
.skill-preview-heading p,
.skill-preview-description {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-lg);
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.skill-preview-heading .skill-preview-creator {
  margin-top: var(--openbot-space-1);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-md);
}
.skill-preview-card {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 160px;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--openbot-radius-xl);
  padding: var(--openbot-space-6);
}
.skill-preview-gradient,
.skill-preview-gradient canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* The canvas composites on its own layer. Firefox does not apply an ancestor's rounded
     overflow clip to such a layer, so each level clips itself with clip-path, which does hold. */
  overflow: hidden;
  border-radius: inherit;
  clip-path: inset(0 round var(--openbot-radius-xl));
}
/* The artwork stays behind the content by paint order alone. A z-index of its own puts it on a
   stacking context that Firefox paints without the rounded clip, and the card's corners come back
   square; the content is positioned instead, so it still paints over the artwork. */
.skill-preview-card > :not(.skill-preview-gradient) {
  position: relative;
}
.skill-preview-request {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  width: min(100%, 520px);
  min-width: 0;
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-canvas);
  padding: var(--openbot-space-3);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-lg);
  line-height: 1.5;
}
.skill-preview-request p {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.skill-preview-request .reference-chip {
  max-width: 100%;
}
.skill-preview-request button {
  flex-shrink: 0;
}
.skill-preview-unavailable {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
}
.skill-preview-description > :first-child {
  margin-top: 0;
}
.skill-preview-description > :last-child {
  margin-bottom: 0;
}

.skill-preview-request .ui-icon-button {
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-border);
}
.agent-skills-modal:has(.agent-skill-detail) {
  width: min(760px, calc(100vw - 32px));
  height: min(640px, calc(100dvh - 48px));
}

:root {
  --page-slide-dur: 250ms;
  --page-fade-dur: 250ms;
  --page-slide-distance: 8px;
  --page-blur: 3px;
  --page-stagger: 0ms;
  --page-exit-enabled: 1;
  --page-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --page-fade-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.t-page-slide {
  position: relative;
}
.t-page-slide .t-page[data-page-id="1"] {
  --t-page-from-x: calc(var(--page-slide-distance) * -1);
}
.t-page-slide .t-page[data-page-id="2"] {
  --t-page-from-x: var(--page-slide-distance);
}
.t-page-slide .t-page {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateX(calc(var(--t-page-from-x, 0px) * var(--page-exit-enabled)));
  filter: blur(calc(var(--page-blur) * var(--page-exit-enabled)));
  transition:
    opacity var(--page-fade-dur) var(--page-fade-ease),
    transform var(--page-slide-dur) var(--page-slide-ease),
    filter var(--page-slide-dur) var(--page-slide-ease);
  will-change: opacity, transform, filter;
}
.t-page-slide[data-page="1"] .t-page[data-page-id="1"],
.t-page-slide[data-page="2"] .t-page[data-page-id="2"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
  filter: blur(0);
  transition-delay: var(--page-stagger);
}

@media (prefers-reduced-motion: reduce) {
  .t-page-slide .t-page {
    transition: none !important;
  }
}

.agent-skills-pages {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Each page mounts on navigation, so its starting style supplies the entry state. */
@starting-style {
  .agent-skills-pages.t-page-slide .t-page {
    opacity: 0;
    transform: translateX(var(--t-page-from-x));
    filter: blur(var(--page-blur));
  }
}

:root {
  --resize-dur: 300ms;
  --resize-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.t-resize {
  transition:
    width var(--resize-dur) var(--resize-ease),
    height var(--resize-dur) var(--resize-ease);
  will-change: width, height;
}

@media (prefers-reduced-motion: reduce) {
  .t-resize {
    transition: none !important;
  }
}

.skill-preview-heading.t-stagger-line,
.skill-preview-card.t-stagger-line {
  display: grid;
}

/* Start each newly loaded preview at the entrance state without delaying its content. */
@starting-style {
  .skill-preview.t-stagger.is-shown .t-stagger-line {
    opacity: 0;
    transform: translateY(var(--stagger-distance));
    filter: blur(var(--stagger-blur));
  }
}

/* The fallback is what a preview whose logo yields no tint already uses, and it is needed here: a
   plugin listing reuses these classes without setting `--skill-logo-color`. Without it both
   declarations are invalid at computed-value time, so the chip loses its fill to `transparent`
   rather than falling back to the accent fill the base rule gives it. */
.skill-preview-request .skill-preview-chip {
  color: color-mix(in srgb, var(--skill-logo-color, var(--openbot-accent-text)), var(--openbot-text-primary) 35%);
  background: color-mix(in srgb, var(--skill-logo-color, var(--openbot-accent-text)) 18%, transparent);
}

.agent-skills-tabs {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.agent-skills-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--openbot-space-2);
  flex-shrink: 0;
  margin: var(--openbot-space-3);
}

.agent-skills-tab-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.agent-local-skill-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-2);
}
.agent-skills-tab-slot {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
@starting-style {
  .agent-skills-tab-content[data-selected] {
    opacity: 0;
    transform: translateY(var(--sliding-tabs-content-distance));
    filter: blur(var(--sliding-tabs-content-blur));
  }
}

.agent-local-library:not(.agent-skill-detail) {
  gap: var(--openbot-space-0-5);
  padding: 0;
}
.agent-local-skill-row:has(.agent-skill-update) {
  grid-template-columns: minmax(0, 1fr) auto auto;
}


/* /@fs//app/node_modules/katex/dist/katex.min.css */
@font-face{font-display:block;font-family:KaTeX_AMS;font-style:normal;font-weight:400;src:url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_AMS-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_AMS-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_AMS-Regular.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Caligraphic;font-style:normal;font-weight:700;src:url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Bold.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Bold.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Bold.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Caligraphic;font-style:normal;font-weight:400;src:url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Regular.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Fraktur;font-style:normal;font-weight:700;src:url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Fraktur-Bold.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Fraktur-Bold.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Fraktur-Bold.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Fraktur;font-style:normal;font-weight:400;src:url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Fraktur-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Fraktur-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Fraktur-Regular.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:normal;font-weight:700;src:url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-Bold.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-Bold.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-Bold.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:italic;font-weight:700;src:url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-BoldItalic.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-BoldItalic.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-BoldItalic.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:italic;font-weight:400;src:url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-Italic.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-Italic.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-Italic.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:normal;font-weight:400;src:url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-Regular.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Math;font-style:italic;font-weight:700;src:url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Math-BoldItalic.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Math-BoldItalic.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Math-BoldItalic.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Math;font-style:italic;font-weight:400;src:url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Math-Italic.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Math-Italic.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Math-Italic.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:normal;font-weight:700;src:url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_SansSerif-Bold.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_SansSerif-Bold.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_SansSerif-Bold.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:italic;font-weight:400;src:url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_SansSerif-Italic.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_SansSerif-Italic.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_SansSerif-Italic.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:normal;font-weight:400;src:url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_SansSerif-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_SansSerif-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_SansSerif-Regular.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Script;font-style:normal;font-weight:400;src:url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Script-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Script-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Script-Regular.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size1;font-style:normal;font-weight:400;src:url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size1-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size1-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size1-Regular.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size2;font-style:normal;font-weight:400;src:url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size2-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size2-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size2-Regular.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size3;font-style:normal;font-weight:400;src:url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size3-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size3-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size3-Regular.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size4;font-style:normal;font-weight:400;src:url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size4-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size4-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size4-Regular.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Typewriter;font-style:normal;font-weight:400;src:url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Typewriter-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Typewriter-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Typewriter-Regular.ttf) format("truetype")}.katex{font:normal 1.21em KaTeX_Main,Times New Roman,serif;line-height:1.2;position:relative;text-indent:0;text-rendering:auto}.katex *{-ms-high-contrast-adjust:none!important;border-color:currentColor}.katex .katex-version:after{content:"0.18.9"}.katex .katex-mathml{border:0;-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;padding:0;position:absolute;width:1px}.katex .katex-html>.katex-newline{display:block}.katex .katex-base{position:relative;white-space:nowrap;width:-webkit-min-content;width:-moz-min-content;width:min-content}.katex .katex-base,.katex .katex-strut{display:inline-block}.katex .textbf{font-weight:700}.katex .textit{font-style:italic}.katex .textrm{font-family:KaTeX_Main}.katex .textsf{font-family:KaTeX_SansSerif}.katex .texttt{font-family:KaTeX_Typewriter}.katex .mathnormal{font-family:KaTeX_Math;font-style:italic}.katex .mathit{font-family:KaTeX_Main;font-style:italic}.katex .mathrm{font-style:normal}.katex .mathbf{font-family:KaTeX_Main;font-weight:700}.katex .boldsymbol{font-family:KaTeX_Math;font-style:italic;font-weight:700}.katex .amsrm,.katex .mathbb,.katex .textbb{font-family:KaTeX_AMS}.katex .mathcal{font-family:KaTeX_Caligraphic}.katex .mathfrak,.katex .textfrak{font-family:KaTeX_Fraktur}.katex .mathboldfrak,.katex .textboldfrak{font-family:KaTeX_Fraktur;font-weight:700}.katex .mathtt{font-family:KaTeX_Typewriter}.katex .mathscr,.katex .textscr{font-family:KaTeX_Script}.katex .mathsf,.katex .textsf{font-family:KaTeX_SansSerif}.katex .mathboldsf,.katex .textboldsf{font-family:KaTeX_SansSerif;font-weight:700}.katex .mathitsf,.katex .mathsfit,.katex .textitsf{font-family:KaTeX_SansSerif;font-style:italic}.katex .mainrm{font-family:KaTeX_Main;font-style:normal}.katex .vlist-t{border-collapse:collapse;display:inline-table;table-layout:fixed}.katex .vlist-r{display:table-row}.katex .vlist{display:table-cell;position:relative;vertical-align:bottom}.katex .vlist>span{display:block;height:0;position:relative}.katex .vlist>span>span{display:inline-block}.katex .vlist>span>.pstrut{overflow:hidden;width:0}.katex .vlist-t2{margin-right:-2px}.katex .vlist-s{display:table-cell;font-size:1px;min-width:2px;vertical-align:bottom;width:2px}.katex .katex-vbox{align-items:baseline;display:inline-flex;flex-direction:column}.katex .katex-thinbox{display:inline-flex;flex-direction:row;max-width:0;width:0}.katex .msupsub{text-align:left}.katex .mfrac>span>span{text-align:center}.katex .mfrac .frac-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .katex-hdashline,.katex .katex-hline,.katex .katex-overline .overline-line,.katex .katex-rule,.katex .katex-underline .underline-line,.katex .mfrac .frac-line{min-height:1px}.katex .mspace{display:inline-block}.katex .katex-smash{display:inline;line-height:0}.katex .clap,.katex .llap,.katex .rlap{position:relative;width:0}.katex .clap>.katex-inner,.katex .llap>.katex-inner,.katex .rlap>.katex-inner{position:absolute}.katex .clap>.katex-fix,.katex .llap>.katex-fix,.katex .rlap>.katex-fix{display:inline-block}.katex .llap>.katex-inner{right:0}.katex .clap>.katex-inner,.katex .rlap>.katex-inner{left:0}.katex .clap>.katex-inner>span{margin-left:-50%;margin-right:50%}.katex .katex-rule{border:0 solid;display:inline-block;position:relative}.katex .katex-hline,.katex .katex-overline .overline-line,.katex .katex-underline .underline-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .katex-hdashline{border-bottom-style:dashed;display:inline-block;width:100%}.katex .sqrt>.katex-root{margin-left:.2777777778em;margin-right:-.5555555556em}.katex .fontsize-ensurer.reset-size1.size1,.katex .katex-sizing.reset-size1.size1{font-size:1em}.katex .fontsize-ensurer.reset-size1.size2,.katex .katex-sizing.reset-size1.size2{font-size:1.2em}.katex .fontsize-ensurer.reset-size1.size3,.katex .katex-sizing.reset-size1.size3{font-size:1.4em}.katex .fontsize-ensurer.reset-size1.size4,.katex .katex-sizing.reset-size1.size4{font-size:1.6em}.katex .fontsize-ensurer.reset-size1.size5,.katex .katex-sizing.reset-size1.size5{font-size:1.8em}.katex .fontsize-ensurer.reset-size1.size6,.katex .katex-sizing.reset-size1.size6{font-size:2em}.katex .fontsize-ensurer.reset-size1.size7,.katex .katex-sizing.reset-size1.size7{font-size:2.4em}.katex .fontsize-ensurer.reset-size1.size8,.katex .katex-sizing.reset-size1.size8{font-size:2.88em}.katex .fontsize-ensurer.reset-size1.size9,.katex .katex-sizing.reset-size1.size9{font-size:3.456em}.katex .fontsize-ensurer.reset-size1.size10,.katex .katex-sizing.reset-size1.size10{font-size:4.148em}.katex .fontsize-ensurer.reset-size1.size11,.katex .katex-sizing.reset-size1.size11{font-size:4.976em}.katex .fontsize-ensurer.reset-size2.size1,.katex .katex-sizing.reset-size2.size1{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size2.size2,.katex .katex-sizing.reset-size2.size2{font-size:1em}.katex .fontsize-ensurer.reset-size2.size3,.katex .katex-sizing.reset-size2.size3{font-size:1.1666666667em}.katex .fontsize-ensurer.reset-size2.size4,.katex .katex-sizing.reset-size2.size4{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size2.size5,.katex .katex-sizing.reset-size2.size5{font-size:1.5em}.katex .fontsize-ensurer.reset-size2.size6,.katex .katex-sizing.reset-size2.size6{font-size:1.6666666667em}.katex .fontsize-ensurer.reset-size2.size7,.katex .katex-sizing.reset-size2.size7{font-size:2em}.katex .fontsize-ensurer.reset-size2.size8,.katex .katex-sizing.reset-size2.size8{font-size:2.4em}.katex .fontsize-ensurer.reset-size2.size9,.katex .katex-sizing.reset-size2.size9{font-size:2.88em}.katex .fontsize-ensurer.reset-size2.size10,.katex .katex-sizing.reset-size2.size10{font-size:3.4566666667em}.katex .fontsize-ensurer.reset-size2.size11,.katex .katex-sizing.reset-size2.size11{font-size:4.1466666667em}.katex .fontsize-ensurer.reset-size3.size1,.katex .katex-sizing.reset-size3.size1{font-size:.7142857143em}.katex .fontsize-ensurer.reset-size3.size2,.katex .katex-sizing.reset-size3.size2{font-size:.8571428571em}.katex .fontsize-ensurer.reset-size3.size3,.katex .katex-sizing.reset-size3.size3{font-size:1em}.katex .fontsize-ensurer.reset-size3.size4,.katex .katex-sizing.reset-size3.size4{font-size:1.1428571429em}.katex .fontsize-ensurer.reset-size3.size5,.katex .katex-sizing.reset-size3.size5{font-size:1.2857142857em}.katex .fontsize-ensurer.reset-size3.size6,.katex .katex-sizing.reset-size3.size6{font-size:1.4285714286em}.katex .fontsize-ensurer.reset-size3.size7,.katex .katex-sizing.reset-size3.size7{font-size:1.7142857143em}.katex .fontsize-ensurer.reset-size3.size8,.katex .katex-sizing.reset-size3.size8{font-size:2.0571428571em}.katex .fontsize-ensurer.reset-size3.size9,.katex .katex-sizing.reset-size3.size9{font-size:2.4685714286em}.katex .fontsize-ensurer.reset-size3.size10,.katex .katex-sizing.reset-size3.size10{font-size:2.9628571429em}.katex .fontsize-ensurer.reset-size3.size11,.katex .katex-sizing.reset-size3.size11{font-size:3.5542857143em}.katex .fontsize-ensurer.reset-size4.size1,.katex .katex-sizing.reset-size4.size1{font-size:.625em}.katex .fontsize-ensurer.reset-size4.size2,.katex .katex-sizing.reset-size4.size2{font-size:.75em}.katex .fontsize-ensurer.reset-size4.size3,.katex .katex-sizing.reset-size4.size3{font-size:.875em}.katex .fontsize-ensurer.reset-size4.size4,.katex .katex-sizing.reset-size4.size4{font-size:1em}.katex .fontsize-ensurer.reset-size4.size5,.katex .katex-sizing.reset-size4.size5{font-size:1.125em}.katex .fontsize-ensurer.reset-size4.size6,.katex .katex-sizing.reset-size4.size6{font-size:1.25em}.katex .fontsize-ensurer.reset-size4.size7,.katex .katex-sizing.reset-size4.size7{font-size:1.5em}.katex .fontsize-ensurer.reset-size4.size8,.katex .katex-sizing.reset-size4.size8{font-size:1.8em}.katex .fontsize-ensurer.reset-size4.size9,.katex .katex-sizing.reset-size4.size9{font-size:2.16em}.katex .fontsize-ensurer.reset-size4.size10,.katex .katex-sizing.reset-size4.size10{font-size:2.5925em}.katex .fontsize-ensurer.reset-size4.size11,.katex .katex-sizing.reset-size4.size11{font-size:3.11em}.katex .fontsize-ensurer.reset-size5.size1,.katex .katex-sizing.reset-size5.size1{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size5.size2,.katex .katex-sizing.reset-size5.size2{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size5.size3,.katex .katex-sizing.reset-size5.size3{font-size:.7777777778em}.katex .fontsize-ensurer.reset-size5.size4,.katex .katex-sizing.reset-size5.size4{font-size:.8888888889em}.katex .fontsize-ensurer.reset-size5.size5,.katex .katex-sizing.reset-size5.size5{font-size:1em}.katex .fontsize-ensurer.reset-size5.size6,.katex .katex-sizing.reset-size5.size6{font-size:1.1111111111em}.katex .fontsize-ensurer.reset-size5.size7,.katex .katex-sizing.reset-size5.size7{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size5.size8,.katex .katex-sizing.reset-size5.size8{font-size:1.6em}.katex .fontsize-ensurer.reset-size5.size9,.katex .katex-sizing.reset-size5.size9{font-size:1.92em}.katex .fontsize-ensurer.reset-size5.size10,.katex .katex-sizing.reset-size5.size10{font-size:2.3044444444em}.katex .fontsize-ensurer.reset-size5.size11,.katex .katex-sizing.reset-size5.size11{font-size:2.7644444444em}.katex .fontsize-ensurer.reset-size6.size1,.katex .katex-sizing.reset-size6.size1{font-size:.5em}.katex .fontsize-ensurer.reset-size6.size2,.katex .katex-sizing.reset-size6.size2{font-size:.6em}.katex .fontsize-ensurer.reset-size6.size3,.katex .katex-sizing.reset-size6.size3{font-size:.7em}.katex .fontsize-ensurer.reset-size6.size4,.katex .katex-sizing.reset-size6.size4{font-size:.8em}.katex .fontsize-ensurer.reset-size6.size5,.katex .katex-sizing.reset-size6.size5{font-size:.9em}.katex .fontsize-ensurer.reset-size6.size6,.katex .katex-sizing.reset-size6.size6{font-size:1em}.katex .fontsize-ensurer.reset-size6.size7,.katex .katex-sizing.reset-size6.size7{font-size:1.2em}.katex .fontsize-ensurer.reset-size6.size8,.katex .katex-sizing.reset-size6.size8{font-size:1.44em}.katex .fontsize-ensurer.reset-size6.size9,.katex .katex-sizing.reset-size6.size9{font-size:1.728em}.katex .fontsize-ensurer.reset-size6.size10,.katex .katex-sizing.reset-size6.size10{font-size:2.074em}.katex .fontsize-ensurer.reset-size6.size11,.katex .katex-sizing.reset-size6.size11{font-size:2.488em}.katex .fontsize-ensurer.reset-size7.size1,.katex .katex-sizing.reset-size7.size1{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size7.size2,.katex .katex-sizing.reset-size7.size2{font-size:.5em}.katex .fontsize-ensurer.reset-size7.size3,.katex .katex-sizing.reset-size7.size3{font-size:.5833333333em}.katex .fontsize-ensurer.reset-size7.size4,.katex .katex-sizing.reset-size7.size4{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size7.size5,.katex .katex-sizing.reset-size7.size5{font-size:.75em}.katex .fontsize-ensurer.reset-size7.size6,.katex .katex-sizing.reset-size7.size6{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size7.size7,.katex .katex-sizing.reset-size7.size7{font-size:1em}.katex .fontsize-ensurer.reset-size7.size8,.katex .katex-sizing.reset-size7.size8{font-size:1.2em}.katex .fontsize-ensurer.reset-size7.size9,.katex .katex-sizing.reset-size7.size9{font-size:1.44em}.katex .fontsize-ensurer.reset-size7.size10,.katex .katex-sizing.reset-size7.size10{font-size:1.7283333333em}.katex .fontsize-ensurer.reset-size7.size11,.katex .katex-sizing.reset-size7.size11{font-size:2.0733333333em}.katex .fontsize-ensurer.reset-size8.size1,.katex .katex-sizing.reset-size8.size1{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size8.size2,.katex .katex-sizing.reset-size8.size2{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size8.size3,.katex .katex-sizing.reset-size8.size3{font-size:.4861111111em}.katex .fontsize-ensurer.reset-size8.size4,.katex .katex-sizing.reset-size8.size4{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size8.size5,.katex .katex-sizing.reset-size8.size5{font-size:.625em}.katex .fontsize-ensurer.reset-size8.size6,.katex .katex-sizing.reset-size8.size6{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size8.size7,.katex .katex-sizing.reset-size8.size7{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size8.size8,.katex .katex-sizing.reset-size8.size8{font-size:1em}.katex .fontsize-ensurer.reset-size8.size9,.katex .katex-sizing.reset-size8.size9{font-size:1.2em}.katex .fontsize-ensurer.reset-size8.size10,.katex .katex-sizing.reset-size8.size10{font-size:1.4402777778em}.katex .fontsize-ensurer.reset-size8.size11,.katex .katex-sizing.reset-size8.size11{font-size:1.7277777778em}.katex .fontsize-ensurer.reset-size9.size1,.katex .katex-sizing.reset-size9.size1{font-size:.2893518519em}.katex .fontsize-ensurer.reset-size9.size2,.katex .katex-sizing.reset-size9.size2{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size9.size3,.katex .katex-sizing.reset-size9.size3{font-size:.4050925926em}.katex .fontsize-ensurer.reset-size9.size4,.katex .katex-sizing.reset-size9.size4{font-size:.462962963em}.katex .fontsize-ensurer.reset-size9.size5,.katex .katex-sizing.reset-size9.size5{font-size:.5208333333em}.katex .fontsize-ensurer.reset-size9.size6,.katex .katex-sizing.reset-size9.size6{font-size:.5787037037em}.katex .fontsize-ensurer.reset-size9.size7,.katex .katex-sizing.reset-size9.size7{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size9.size8,.katex .katex-sizing.reset-size9.size8{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size9.size9,.katex .katex-sizing.reset-size9.size9{font-size:1em}.katex .fontsize-ensurer.reset-size9.size10,.katex .katex-sizing.reset-size9.size10{font-size:1.2002314815em}.katex .fontsize-ensurer.reset-size9.size11,.katex .katex-sizing.reset-size9.size11{font-size:1.4398148148em}.katex .fontsize-ensurer.reset-size10.size1,.katex .katex-sizing.reset-size10.size1{font-size:.2410800386em}.katex .fontsize-ensurer.reset-size10.size2,.katex .katex-sizing.reset-size10.size2{font-size:.2892960463em}.katex .fontsize-ensurer.reset-size10.size3,.katex .katex-sizing.reset-size10.size3{font-size:.337512054em}.katex .fontsize-ensurer.reset-size10.size4,.katex .katex-sizing.reset-size10.size4{font-size:.3857280617em}.katex .fontsize-ensurer.reset-size10.size5,.katex .katex-sizing.reset-size10.size5{font-size:.4339440694em}.katex .fontsize-ensurer.reset-size10.size6,.katex .katex-sizing.reset-size10.size6{font-size:.4821600771em}.katex .fontsize-ensurer.reset-size10.size7,.katex .katex-sizing.reset-size10.size7{font-size:.5785920926em}.katex .fontsize-ensurer.reset-size10.size8,.katex .katex-sizing.reset-size10.size8{font-size:.6943105111em}.katex .fontsize-ensurer.reset-size10.size9,.katex .katex-sizing.reset-size10.size9{font-size:.8331726133em}.katex .fontsize-ensurer.reset-size10.size10,.katex .katex-sizing.reset-size10.size10{font-size:1em}.katex .fontsize-ensurer.reset-size10.size11,.katex .katex-sizing.reset-size10.size11{font-size:1.1996142719em}.katex .fontsize-ensurer.reset-size11.size1,.katex .katex-sizing.reset-size11.size1{font-size:.2009646302em}.katex .fontsize-ensurer.reset-size11.size2,.katex .katex-sizing.reset-size11.size2{font-size:.2411575563em}.katex .fontsize-ensurer.reset-size11.size3,.katex .katex-sizing.reset-size11.size3{font-size:.2813504823em}.katex .fontsize-ensurer.reset-size11.size4,.katex .katex-sizing.reset-size11.size4{font-size:.3215434084em}.katex .fontsize-ensurer.reset-size11.size5,.katex .katex-sizing.reset-size11.size5{font-size:.3617363344em}.katex .fontsize-ensurer.reset-size11.size6,.katex .katex-sizing.reset-size11.size6{font-size:.4019292605em}.katex .fontsize-ensurer.reset-size11.size7,.katex .katex-sizing.reset-size11.size7{font-size:.4823151125em}.katex .fontsize-ensurer.reset-size11.size8,.katex .katex-sizing.reset-size11.size8{font-size:.578778135em}.katex .fontsize-ensurer.reset-size11.size9,.katex .katex-sizing.reset-size11.size9{font-size:.6945337621em}.katex .fontsize-ensurer.reset-size11.size10,.katex .katex-sizing.reset-size11.size10{font-size:.8336012862em}.katex .fontsize-ensurer.reset-size11.size11,.katex .katex-sizing.reset-size11.size11{font-size:1em}.katex .delimsizing.size1{font-family:KaTeX_Size1}.katex .delimsizing.size2{font-family:KaTeX_Size2}.katex .delimsizing.size3{font-family:KaTeX_Size3}.katex .delimsizing.size4{font-family:KaTeX_Size4}.katex .delimsizing.mult .delim-size1>span{font-family:KaTeX_Size1}.katex .delimsizing.mult .delim-size4>span{font-family:KaTeX_Size4}.katex .nulldelimiter{display:inline-block;width:.12em}.katex .delimcenter,.katex .op-symbol{position:relative}.katex .op-symbol.small-op{font-family:KaTeX_Size1}.katex .op-symbol.large-op{font-family:KaTeX_Size2}.katex .katex-accent>.vlist-t,.katex .op-limits>.vlist-t{text-align:center}.katex .katex-accent .accent-body{position:relative}.katex .katex-accent .accent-body:not(.accent-full){width:0}.katex .katex-overlay{display:block}.katex .mtable .vertical-separator{display:inline-block;min-width:1px}.katex .mtable .arraycolsep{display:inline-block}.katex .mtable .col-align-c>.vlist-t{text-align:center}.katex .mtable .col-align-l>.vlist-t{text-align:left}.katex .mtable .col-align-r>.vlist-t{text-align:right}.katex .svg-align{text-align:left}.katex svg{fill:currentColor;stroke:currentColor;display:block;height:inherit;position:absolute;width:100%}.katex svg path{stroke:none}.katex svg{fill-rule:nonzero;fill-opacity:1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1}.katex img{border-style:none;max-height:none;max-width:none;min-height:0;min-width:0}.katex .katex-stretchy{display:block;overflow:hidden;position:relative;width:100%}.katex .katex-stretchy:after,.katex .katex-stretchy:before{content:""}.katex .hide-tail{overflow:hidden;position:relative;width:100%}.katex .halfarrow-left{left:0;overflow:hidden;position:absolute;width:50.2%}.katex .halfarrow-right{overflow:hidden;position:absolute;right:0;width:50.2%}.katex .brace-left{left:0;overflow:hidden;position:absolute;width:25.1%}.katex .brace-center{left:25%;overflow:hidden;position:absolute;width:50%}.katex .brace-right{overflow:hidden;position:absolute;right:0;width:25.1%}.katex .x-arrow-pad{padding:0 .5em}.katex .cd-arrow-pad{padding:0 .55556em 0 .27778em}.katex .mover,.katex .munder,.katex .x-arrow{text-align:center}.katex .boxpad{padding:0 .3em}.katex .fbox,.katex .fcolorbox{border:.04em solid;box-sizing:border-box}.katex .cancel-pad{padding:0 .2em}.katex .cancel-lap{margin-left:-.2em;margin-right:-.2em}.katex .katex-sout{border-bottom-style:solid;border-bottom-width:.08em}.katex .angl{border-right:.049em solid;border-top:.049em solid;box-sizing:border-box;margin-right:.03889em}.katex .anglpad{padding:0 .03889em}.katex .reflectbox{display:inline-block;transform:scaleX(-1)}.katex .eqn-num:before{content:"(" counter(katexEqnNo) ")";counter-increment:katexEqnNo}.katex .mml-eqn-num:before{content:"(" counter(mmlEqnNo) ")";counter-increment:mmlEqnNo}.katex .mtr-glue{width:50%}.katex .cd-vert-arrow{display:inline-block;position:relative}.katex .cd-label-left{display:inline-block;position:absolute;right:calc(50% + .3em);text-align:left}.katex .cd-label-right{display:inline-block;left:calc(50% + .3em);position:absolute;text-align:right}.katex-display{display:block;margin:1em 0;text-align:center}.katex-display>.katex{display:block;text-align:center;white-space:nowrap}.katex-display>.katex>.katex-html{display:block;position:relative}.katex-display>.katex>.katex-html>.katex-tag{position:absolute;right:0}.katex-display.leqno>.katex>.katex-html>.katex-tag{left:0;right:auto}.katex-display.fleqn>.katex{padding-left:2em;text-align:left}body{counter-reset:katexEqnNo mmlEqnNo}


/* /@fs//app/packages/ui/src/features/conversation/styles/chat-action-card.css */
/* Chat action card: the shell of a chat record the person can act on. Variants add a body. */

/* Keyboard focus is a muted ring: an accent ring looks like a selection here. The same weight as
 * the accent outline rule in auth.css, which loads earlier. */
.chat-action-card :is(button, input, textarea):focus-visible {
  outline: 0;
}

.chat-action-card .ui-button:focus-visible {
  box-shadow: 0 0 0 1px var(--openbot-text-muted);
}

.chat-action-card.conversation-interaction-card {
  min-width: min(100%, 320px);
}

.chat-action-card {
  display: grid;
  width: fit-content;
  max-width: min(100%, 520px);
  gap: var(--openbot-space-3);
}

.chat-action-card-header {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
}

.chat-action-card-icon {
  display: inline-flex;
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
  color: var(--openbot-text-on-accent);
}

.chat-action-card-icon svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}

.chat-action-card-heading {
  display: grid;
  min-width: 0;
  flex: 1;
}

.chat-action-card-eyebrow {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.chat-action-card-title {
  overflow: hidden;
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-lg);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-action-card-open svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

.chat-action-card-footer {
  display: flex;
  min-height: var(--openbot-leading-md);
  align-items: center;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}

/* Without a status the footer holds only its empty live region, so it takes no space. */
.chat-action-card-footer-empty {
  min-height: 0;
  margin-top: calc(-1 * var(--openbot-space-3));
}

.chat-action-card-status {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
}

.chat-action-card-status svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

.chat-action-card-footer-action {
  margin-left: auto;
}

.chat-action-card-error {
  color: var(--openbot-danger-text);
}

.chat-action-card-removed .chat-action-card-title {
  color: var(--openbot-text-muted);
  text-decoration: line-through;
}


/* /@fs//app/packages/ui/src/features/conversation/styles/routine-calendar.css */
/* Routine calendar: the runs of every routine, by day, with the next runs beside them. */
.routine-planner {
  container-type: inline-size;
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-4);
  color: var(--openbot-text-primary);
}

.routine-planner-header {
  display: grid;
  gap: var(--openbot-space-3);
}

.routine-planner-title {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
}

.routine-planner-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
}

/* The arrow lines up with the content edge, not its hit area. */
.routine-planner-identity .ui-icon-button {
  margin-left: calc(-1 * var(--openbot-space-2));
}

.routine-planner-title h2 {
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
}

.routine-planner-title h2 span {
  color: var(--openbot-text-muted);
  font-weight: var(--openbot-weight-regular);
}

.routine-planner-title p,
.routine-planner-note {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

.routine-planner-toolbar {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}

.routine-planner-nav {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-1);
}

.routine-planner-range {
  margin-left: var(--openbot-space-2);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.routine-planner-clock-change {
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-warning-soft);
  padding: var(--openbot-space-1-5) var(--openbot-space-3);
  color: var(--openbot-warning-text);
  font-size: var(--openbot-text-sm);
}

.routine-planner-body {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
  align-items: start;
  gap: var(--openbot-space-4);
}

.routine-planner-grid {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-1);
}

.routine-planner-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

/* The day cell's border and padding, so that each head starts where its day starts. */
.routine-planner-weekdays > * {
  padding-inline: calc(1px + var(--openbot-space-1-5));
}

/* Each day is a list, not a time grid: runs at the same minute stack and stay readable. */
.routine-planner-week {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--openbot-space-1);
}

.routine-planner-day {
  display: grid;
  min-width: 0;
  min-height: 12rem;
  align-content: start;
  gap: var(--openbot-space-1);
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  padding: var(--openbot-space-1-5);
}

.routine-planner-day[data-past] {
  background: var(--openbot-transparent);
}

.routine-planner-day[aria-current="date"] {
  border-color: var(--openbot-accent-strong);
}

.routine-planner-day-button.ui-button {
  width: 100%;
  justify-content: flex-start;
  gap: var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
}

.routine-planner-day-button strong {
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.routine-planner-day[aria-current="date"] .routine-planner-day-button strong {
  color: var(--openbot-accent-text);
}

.routine-planner-runs,
.routine-planner-entries {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-0-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.routine-planner-status {
  display: grid;
  width: var(--openbot-space-4);
  height: var(--openbot-space-4);
  place-items: center;
}

.routine-planner-status > svg {
  width: var(--openbot-space-3);
  height: var(--openbot-space-3);
  stroke-width: 2;
}

.routine-planner-status-dot {
  width: var(--openbot-space-2);
  height: var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
}

.routine-planner-status[data-status="paused"] {
  color: var(--openbot-text-muted);
}

.routine-planner-status[data-status="failed"] {
  color: var(--openbot-danger-text);
}

.routine-planner-status[data-status="completed"] {
  color: var(--openbot-success-text);
}

.routine-planner-avatars {
  display: flex;
}

.routine-planner-avatar.agent-avatar {
  width: var(--openbot-space-4);
  height: var(--openbot-space-4);
}

.routine-planner-avatars .routine-planner-avatar + .routine-planner-avatar {
  margin-left: calc(var(--openbot-space-1-5) * -1);
}

.routine-planner-run.ui-button {
  display: grid;
  width: 100%;
  height: auto;
  min-height: var(--openbot-control-sm);
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "mark time avatars"
    "name name name";
  align-items: center;
  gap: var(--openbot-space-0-5) var(--openbot-space-1);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-1) var(--openbot-space-1-5);
  text-align: left;
  font-size: var(--openbot-text-sm);
}

.routine-planner-run .routine-planner-status {
  grid-area: mark;
}

.routine-planner-run-time {
  grid-area: time;
  color: var(--openbot-text-muted);
  font-variant-numeric: tabular-nums;
}

/* Two lines before an ellipsis: a day column is narrow, and the name is what tells runs apart. */
.routine-planner-run-name {
  display: -webkit-box;
  grid-area: name;
  min-width: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.3;
  overflow-wrap: break-word;
  white-space: normal;
}

.routine-planner-run .routine-planner-avatars {
  grid-area: avatars;
}

/* A paused run would happen if the routine resumed. It keeps its place but loses its weight. */
.routine-planner-run[data-status="paused"],
.routine-planner-entry[data-status="paused"] {
  opacity: 0.6;
}

.routine-planner-run[data-status="paused"] {
  outline: 1px dashed var(--openbot-border-grouped);
  outline-offset: -1px;
  background: var(--openbot-transparent);
}

.routine-planner-run[data-status="failed"] {
  background: var(--openbot-danger-soft);
}

.routine-planner-run[data-status="completed"] .routine-planner-run-name {
  color: var(--openbot-text-muted);
}

.routine-planner-more.ui-button {
  justify-self: start;
  color: var(--openbot-text-muted);
}

/* A month has up to six rows of days: a run is one line, and the column heads name the weekdays. */
.routine-planner[data-view="month"] .routine-planner-day {
  min-height: 7rem;
}

.routine-planner[data-view="month"] .routine-planner-day-button > span {
  display: none;
}

.routine-planner[data-view="month"] .routine-planner-run.ui-button {
  grid-template-columns: auto auto minmax(0, 1fr);
  grid-template-areas: "mark time name";
}

.routine-planner[data-view="month"] .routine-planner-run-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.routine-planner[data-view="month"] .routine-planner-run .routine-planner-avatars {
  display: none;
}

/* Days of the months before and after only fill the rows. */
.routine-planner-day[data-outside] {
  border-color: var(--openbot-border);
  background: var(--openbot-transparent);
}

.routine-planner-day[data-outside] .routine-planner-day-button strong {
  color: var(--openbot-text-muted);
  font-weight: var(--openbot-weight-regular);
}

.routine-planner-upcoming,
.routine-planner-day-view {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: var(--openbot-space-2);
}

.routine-planner-upcoming {
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-lg);
  padding: var(--openbot-space-3);
}

.routine-planner-upcoming h3,
.routine-planner-hour h3 {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}

.routine-planner-hour {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  align-items: start;
  gap: var(--openbot-space-2);
  border-top: 1px solid var(--openbot-border-strong);
  padding-top: var(--openbot-space-2);
}

.routine-planner-hour h3 {
  padding-top: var(--openbot-space-2);
  font-variant-numeric: tabular-nums;
}

.routine-planner-entry {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-1);
}

.routine-planner-entry-main.ui-button {
  display: flex;
  min-width: 0;
  height: auto;
  flex: 1 1 auto;
  align-items: center;
  justify-content: flex-start;
  gap: var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  text-align: left;
}

.routine-planner-entry-text {
  display: grid;
  min-width: 0;
}

.routine-planner-entry-name,
.routine-planner-entry-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.routine-planner-entry-name {
  font-size: var(--openbot-text-md);
}

.routine-planner-entry-meta {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
}

.routine-planner-entry[data-status="failed"] .routine-planner-entry-meta {
  color: var(--openbot-danger-text);
}

.routine-planner-entry-agents {
  display: flex;
  flex: 0 0 auto;
}

.routine-planner-agent .routine-planner-avatar.agent-avatar {
  width: var(--openbot-control-xs);
  height: var(--openbot-control-xs);
}

.routine-planner-empty {
  display: grid;
  justify-items: center;
  gap: var(--openbot-space-3);
  border: 1px dashed var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-lg);
  padding: var(--openbot-space-8) var(--openbot-space-4);
  color: var(--openbot-text-muted);
  text-align: center;
}

.routine-planner-empty > svg {
  width: var(--openbot-space-6);
  height: var(--openbot-space-6);
  stroke-width: var(--openbot-icon-stroke);
}

.routine-planner-skeleton-heading {
  height: var(--openbot-control-xs);
}

.routine-planner-skeleton-run {
  height: var(--openbot-control-md);
}

/* Seven day columns need the full width: the next runs move below the week. */
@container (max-width: 1160px) {
  .routine-planner-body {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* A narrow pane, such as a phone or a side panel: the week becomes a list of days. */
@container (max-width: 920px) {
  .routine-planner-week {
    grid-template-columns: minmax(0, 1fr);
  }

  .routine-planner-day {
    min-height: 0;
    grid-template-columns: 5rem minmax(0, 1fr);
    align-items: start;
  }

  .routine-planner-day > :not(.routine-planner-day-heading) {
    grid-column: 2;
  }

  .routine-planner-loading .routine-planner-day {
    grid-template-columns: minmax(0, 1fr);
  }

  .routine-planner-loading .routine-planner-day > * {
    grid-column: 1;
  }

  /* The month becomes a list of its own days: each day names its weekday again. */
  .routine-planner-weekdays,
  .routine-planner-day[data-outside] {
    display: none;
  }

  .routine-planner[data-view="month"] .routine-planner-day {
    min-height: 0;
  }

  .routine-planner[data-view="month"] .routine-planner-day-button > span {
    display: inline;
  }
}


/* /@fs//app/packages/ui/src/features/conversation/styles/routine-schedule.css */
/* Routine schedule row: the frequency and its values as one sentence of chips. */
.routine-trigger-row,
.routine-weekday-strip,
.routine-calendar-days {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

/* Keyboard focus uses the shared focus ring, as the other controls do. The ring is a box shadow, so
   the native outline goes. This rule has the same weight as the accent outline rule in auth.css,
   which loads earlier. */
:is(.routine-schedule-picker, .routine-popover, .routine-chip-select-content)
:is(button, input, textarea):focus-visible {
  outline: 0;
}

:is(.routine-schedule-picker, .routine-popover) .ui-button:focus-visible {
  box-shadow: var(--openbot-focus-ring);
}

.routine-schedule-picker {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-1-5);
}

/* One line at every width. A narrow row shrinks its flexible chip, not the line count. */
/* In a panel the row is a form field, so it has the box of the settings inputs around it. */
.routine-trigger-row {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: var(--openbot-space-2);
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-shadow-popover-ambient);
  padding: var(--openbot-space-1);
  transition: border-color var(--openbot-duration-hover) ease;
}

.routine-trigger-row:focus-within {
  border-color: var(--openbot-text-muted);
}

.routine-schedule-picker[data-density="card"] .routine-trigger-row {
  border: 0;
  background: none;
  padding: 0;
}

.routine-trigger-icon {
  display: inline-flex;
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
  color: var(--openbot-text-on-accent);
}

.routine-trigger-icon svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: 2;
}

.routine-schedule-picker[data-density="panel"] .routine-trigger-icon {
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
}

.routine-schedule-picker[data-density="card"] .routine-trigger-icon {
  display: none;
}

.routine-trigger-chips {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: var(--openbot-space-2);
  /* Clips a row that is narrower than its fixed chips, and keeps the focus ring visible. */
  overflow: clip;
  overflow-clip-margin: var(--openbot-space-1);
}

.routine-trigger-phrase {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--openbot-space-2);
}

.routine-trigger-phrase-flexible {
  min-width: 0;
  flex-shrink: 1;
}

.routine-connector {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}

.routine-chip-select {
  width: auto;
  flex: 0 0 auto;
}

.routine-chip-select-flexible {
  min-width: 0;
  flex-shrink: 1;
}

.routine-chip {
  display: inline-flex;
  height: var(--openbot-control-md);
  min-width: 0;
  max-width: 100%;
  align-items: center;
  gap: var(--openbot-space-1-5);
  cursor: pointer;
  border: 0;
  border-radius: var(--openbot-radius-md);
  outline: 0;
  background: var(--openbot-bg-control-active);
  padding: 0 var(--openbot-space-3);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
  white-space: nowrap;
  flex: 0 0 auto;
  transition: background-color var(--openbot-duration-hover) ease;
}

.routine-chip-flexible {
  flex-shrink: 1;
}

.routine-chip-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The chips sit one padding inside the box, so the row is as tall as an input at every width. */
.routine-schedule-picker[data-density="panel"] .routine-chip {
  height: var(--openbot-control-sm);
  border-radius: var(--openbot-radius-xs);
}

.routine-schedule-picker[data-density="card"] .routine-chip {
  height: var(--openbot-control-sm);
  padding: 0 var(--openbot-space-2);
  font-size: var(--openbot-text-md);
}

.routine-chip:focus-visible {
  box-shadow: var(--openbot-focus-ring);
}

.routine-chip:is([aria-expanded="true"], [data-expanded]) {
  background: var(--openbot-bg-control-hover);
  box-shadow: 0 0 0 1px var(--openbot-border-strong);
}

.routine-chip:disabled,
.routine-chip[data-disabled] {
  cursor: default;
  background: transparent;
  padding: 0;
  color: var(--openbot-text-secondary);
}

@media (hover: hover) and (pointer: fine) {
  .routine-chip:hover:not(:disabled, [data-disabled]) {
    background: var(--openbot-bg-control-hover);
    box-shadow: 0 0 0 1px var(--openbot-border-strong);
  }
}

.routine-chip-select-content {
  min-width: 160px;
}

.routine-chip-select-content .ui-select-item {
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}

.routine-cron-input {
  min-width: 0;
  max-width: 220px;
  flex: 1 1 180px;
  font-family: var(--openbot-font-mono);
}

.routine-schedule-hint {
  margin: 0;
  padding-left: var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.routine-schedule-picker[data-density="card"] .routine-schedule-hint {
  padding-left: 0;
}

/* Popovers */
.routine-popover {
  z-index: var(--openbot-layer-popover);
  border-radius: var(--openbot-radius-lg);
  padding: var(--openbot-space-2);
}

.routine-weekday-strip {
  display: flex;
  gap: var(--openbot-space-1);
}

.routine-day-item {
  display: inline-flex;
}

.routine-day {
  display: inline-flex;
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  min-width: 0;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--openbot-radius-pill);
  padding: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}

.routine-day-item:has(:focus-visible) .routine-day {
  box-shadow: var(--openbot-focus-ring);
}

/* The strip is short, so an unselected day can look like a button. A month grid stays plain. */
.routine-weekday-strip .routine-day {
  background: var(--openbot-bg-control-active);
}

@media (hover: hover) and (pointer: fine) {
  .routine-day:hover:not(:disabled, .routine-day-selected) {
    background: var(--openbot-hover);
    color: var(--openbot-text-primary);
  }
}

.routine-day.routine-day-selected,
.routine-day.routine-day-selected:hover {
  background: var(--openbot-text-primary);
  color: var(--openbot-bg-canvas);
}

.routine-day.routine-day-selected:focus-visible {
  box-shadow: var(--openbot-focus-ring);
}

/* Time */
.routine-clock-input {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
}

.routine-clock-segment.ui-input {
  width: 48px;
  height: var(--openbot-control-lg);
  border: 0;
  background: var(--openbot-bg-control-active);
  padding: 0;
  font-size: var(--openbot-text-lg);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.routine-clock-segment.ui-input:focus-visible {
  box-shadow: var(--openbot-focus-ring);
}

.routine-clock-separator {
  color: var(--openbot-text-muted);
}

.routine-segmented {
  display: flex;
  margin-left: var(--openbot-space-1);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control-active);
  padding: var(--openbot-space-0-5);
}

.routine-segmented-control {
  display: inline-flex;
  height: calc(var(--openbot-control-lg) - 2 * var(--openbot-space-0-5));
  min-width: 44px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--openbot-radius-sm);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}

.routine-segmented-control label {
  cursor: pointer;
}

.routine-segmented-control[data-checked] {
  background: var(--openbot-text-primary);
  color: var(--openbot-bg-canvas);
}

.routine-segmented-item:has(:focus-visible) .routine-segmented-control {
  box-shadow: var(--openbot-focus-ring);
}

/* Hours window: a two-option list and, for "Between hours", the times beside it. */
.routine-window-menu {
  display: grid;
  width: 240px;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-1);
}

.routine-window-options {
  display: grid;
  gap: var(--openbot-space-0-5);
}

.routine-window-repeat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  border-top: 1px solid var(--openbot-border);
  padding: var(--openbot-space-2) var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-3);
}

.routine-window-repeat-label {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}

.routine-window-option-control {
  display: flex;
  min-height: var(--openbot-control-lg);
  align-items: center;
  gap: var(--openbot-space-2);
  cursor: pointer;
  border-radius: var(--openbot-radius-md);
  padding: var(--openbot-space-2) var(--openbot-space-3);
}

.routine-window-option-control[data-checked] {
  background: var(--openbot-hover);
}

.routine-window-option:has(:focus-visible) .routine-window-option-control {
  box-shadow: var(--openbot-focus-ring);
}

@media (hover: hover) and (pointer: fine) {
  .routine-window-option-control:hover {
    background: var(--openbot-hover);
  }
}

.routine-window-option-label {
  flex: 1;
  cursor: pointer;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}

.routine-window-option-check {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
}

.routine-window-option-check svg {
  width: 100%;
  height: 100%;
}

.routine-window-range {
  display: grid;
  gap: var(--openbot-space-1-5);
  padding: var(--openbot-space-1) var(--openbot-space-3) var(--openbot-space-2);
}

.routine-window-range-times {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}

.routine-window-range-count {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}

/* Calendar */
.routine-calendar {
  display: grid;
  width: calc(7 * var(--openbot-control-md) + 6 * var(--openbot-space-0-5));
  gap: var(--openbot-space-1);
}

.routine-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--openbot-space-1);
}

.routine-calendar-title {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}

.routine-calendar-weekdays,
.routine-calendar-days {
  display: grid;
  grid-template-columns: repeat(7, var(--openbot-control-md));
  gap: var(--openbot-space-0-5);
}

.routine-calendar-weekdays span {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-align: center;
}

.routine-calendar-day:focus-visible {
  box-shadow: var(--openbot-focus-ring);
}

.routine-calendar-day[aria-current="date"]:not(.routine-day-selected) {
  color: var(--openbot-accent-text);
}

.routine-calendar-day:disabled {
  cursor: default;
  opacity: 0.32;
}

/* Chat card */
/*
 * As wide as its content, as a message is: the row sets the width, and a narrow chat shrinks it.
 * The minimum keeps the card still while most edits change the chips. It needs the second class
 * because interaction-cards.css loads later and resets `min-width`.
 */
/*
 * The row takes the most space that still shows every label whole. RoutineSchedulePicker sets
 * `data-fit` from the labels and the width, so a short row keeps its room in a narrow panel.
 * Each step keeps the rules of the steps before it.
 */
.routine-schedule-picker:not([data-fit="roomy"]) .routine-trigger-chips {
  gap: var(--openbot-space-1-5);
}

.routine-schedule-picker:not([data-fit="roomy"]) .routine-trigger-phrase {
  gap: var(--openbot-space-1);
}

.routine-schedule-picker:not([data-fit="roomy"]) .routine-connector {
  font-size: var(--openbot-text-md);
}

.routine-schedule-picker[data-density="panel"]:not([data-fit="roomy"]) .routine-trigger-row {
  gap: var(--openbot-space-1-5);
}

.routine-schedule-picker[data-density="panel"]:not([data-fit="roomy"]) .routine-trigger-icon svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

.routine-schedule-picker[data-density="panel"]:not([data-fit="roomy"]) .routine-chip {
  gap: var(--openbot-space-1);
  padding: 0 var(--openbot-space-2);
  font-size: var(--openbot-text-md);
}

.routine-schedule-picker[data-density="panel"]:is([data-fit="tight"], [data-fit="minimal"])
  .routine-connector-optional {
  display: none;
}

.routine-schedule-picker[data-density="panel"]:is([data-fit="tight"], [data-fit="minimal"])
  :is(.routine-trigger-row, .routine-trigger-chips) {
  gap: var(--openbot-space-1);
}

.routine-schedule-picker[data-density="panel"]:is([data-fit="tight"], [data-fit="minimal"]) .routine-trigger-icon {
  width: var(--openbot-control-xs);
  height: var(--openbot-control-xs);
  align-self: center;
}

.routine-schedule-picker[data-density="panel"]:is([data-fit="tight"], [data-fit="minimal"]) .routine-chip {
  padding: 0 var(--openbot-space-1-5);
}

/* The value chips then cut their labels short, and the frequency and time chips stay whole. */
.routine-schedule-picker[data-fit="minimal"] :is(.routine-trigger-icon, .routine-connector) {
  display: none;
}

.routine-schedule-picker[data-fit="minimal"] .routine-trigger-chips {
  gap: var(--openbot-space-1);
}

/*
 * The end of a trigger row: the menu that changes the trigger. It sits one padding from the end,
 * as the icon does at the start. The menu button has the size of a chip, so the row stays as tall
 * as an input.
 */
.routine-trigger-action {
  display: inline-flex;
  flex: 0 0 auto;
  align-self: center;
  margin-inline-start: calc(var(--openbot-space-1) * -1);
}

.routine-trigger-action:empty {
  display: none;
}

:is(.routine-trigger-row, .routine-trigger-card-header) .routine-trigger-action .ui-button {
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
  border-radius: var(--openbot-radius-xs);
}

/*
 * The webhook trigger: a header, then one full-width row for each value. The header icon starts
 * where the row text starts, and the row actions share one column with the menu button.
 */
.routine-trigger-card {
  display: grid;
  min-width: 0;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-shadow-popover-ambient);
}

.routine-trigger-card-header {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-3);
}

:is(.routine-trigger-card-header, .routine-trigger-menu) .routine-trigger-icon {
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
}

.routine-trigger-card-title {
  min-width: 0;
  flex: 1;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  /* Mostly lowercase text looks low when its line box is centered. Center the x-height on the icon. */
  text-box: trim-both ex alphabetic;
}

.routine-webhook-field {
  display: grid;
  /* An action, the row padding and the top border, so a row without an action has the same height. */
  min-height: calc(var(--openbot-control-sm) + var(--openbot-space-2) + 1px);
  grid-template-columns: minmax(84px, auto) minmax(0, 1fr) var(--openbot-control-sm);
  align-items: center;
  gap: var(--openbot-space-3);
  border: 0;
  border-top: 1px solid var(--openbot-border);
  margin: 0;
  background: none;
  padding: var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-3);
  color: inherit;
  font: inherit;
  text-align: left;
}

.routine-webhook-label {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  white-space: nowrap;
}

.routine-webhook-value {
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

code.routine-webhook-value {
  font-family: inherit;
}

/* A new secret wraps in a fixed-width font, so the user can read each character before copying it. */
code.routine-webhook-secret {
  padding-block: var(--openbot-space-1-5);
  font-family: var(--openbot-font-mono);
  overflow-wrap: anywhere;
  white-space: normal;
}

.routine-webhook-field > :last-child {
  justify-self: center;
}

.routine-webhook-field > .ui-icon-button {
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
}

/* The Events row is a ghost Button; two classes keep the row layout over the button styles. */
.routine-webhook-field.routine-webhook-events-toggle {
  width: auto;
  min-width: 0;
  height: auto;
  justify-content: stretch;
  border-radius: 0 0 calc(var(--openbot-radius-md) - 1px) calc(var(--openbot-radius-md) - 1px);
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.routine-webhook-field.routine-webhook-events-toggle[aria-expanded="true"] {
  background: none;
}

.routine-webhook-field.routine-webhook-events-toggle:hover {
  background: var(--openbot-bg-control-hover);
}

.routine-webhook-events-toggle:focus-visible {
  outline: 0;
  box-shadow: var(--openbot-focus-ring);
}

.routine-webhook-events-toggle > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: var(--openbot-icon-stroke);
  color: var(--openbot-text-muted);
}

/* A status sentence wraps; a URL or a secret stays on one line. */
.ui-text.routine-webhook-value {
  white-space: normal;
}

.routine-webhook-note {
  padding: 0 var(--openbot-space-3) var(--openbot-space-2);
}

.routine-trigger-card-header + .routine-webhook-note {
  border-top: 1px solid var(--openbot-border);
  padding-top: var(--openbot-space-2);
}

.routine-webhook-secret-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}

.routine-webhook-events {
  display: grid;
  gap: var(--openbot-space-3);
  border-top: 1px solid var(--openbot-border);
  padding: var(--openbot-space-3);
}

.routine-webhook-events .settings-field {
  display: grid;
  margin: 0;
  gap: var(--openbot-space-1-5);
}

.routine-webhook-events .settings-field > span {
  margin: 0;
}

/* Hints are captions, not field labels. */
.routine-webhook-events .settings-field > .ui-text {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.routine-webhook-add-filter {
  justify-self: start;
  margin-left: calc(var(--openbot-space-2) * -1);
  padding-inline: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  font-weight: inherit;
}

/* A quiet link under the rows. Its text starts under the row labels. */
.routine-webhook-filter-link {
  justify-self: start;
  margin: 0 0 var(--openbot-space-1) var(--openbot-space-1);
  padding-inline: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: inherit;
}

.routine-webhook-add-filter svg,
.routine-webhook-filter-link svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}

/* The trigger menu: a name and one line that tells when the routine runs. */
.routine-trigger-menu {
  width: 300px;
  max-height: min(70vh, 560px);
  overflow-y: auto;
}

.routine-trigger-menu.ui-action-menu .routine-trigger-menu-item[role="menuitemradio"] {
  height: auto;
  padding-block: var(--openbot-space-1-5);
  gap: var(--openbot-space-3);
  white-space: normal;
}

.routine-trigger-menu-text {
  display: grid;
  min-width: 0;
  flex: 1;
}

.routine-trigger-menu-description {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.routine-trigger-menu.ui-action-menu .routine-trigger-menu-item > .routine-trigger-menu-check {
  color: var(--openbot-text-primary);
}


/* /@fs//app/packages/ui/src/features/conversation/styles/agent-settings.css */
.agent-settings-avatar-picker {
  position: relative;
  z-index: 30;
  display: grid;
  width: 62px;
  height: 62px;
  margin: var(--openbot-space-2) auto var(--openbot-space-4);
  place-items: center;
}

.agent-settings-avatar {
  position: relative;
  display: grid;
  width: 62px;
  height: 62px;
  margin: 0;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  background: transparent;
}

.agent-settings-avatar .agent-avatar {
  --agent-avatar-optical-offset: calc(62px * -0.14);
  width: 62px;
  height: 62px;
}

.agent-settings-avatar .agent-avatar > svg {
  width: 128%;
  height: 128%;
}

.agent-settings-avatar:hover {
  filter: brightness(1.08);
}

/* The pencil badge of the mobile edit screen: it shows that the face opens an editor. */
.agent-settings-avatar-badge {
  position: absolute;
  right: -4px;
  bottom: -4px;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 3px solid var(--openbot-bg-canvas);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-primary);
}

.agent-settings-avatar-badge-icon {
  width: 11px;
  height: 11px;
}

.agent-routines-overlay {
  position: absolute;
  z-index: 2;
  top: 39px;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-y: auto;
  background: var(--openbot-bg-canvas);
}

.agent-routines-settings {
  min-height: 100%;
  padding: 12px 15px 28px;
}

.agent-routines-list,
.agent-routine-run-list {
  display: grid;
}

.agent-routines-list {
  gap: 0;
}

.agent-routine-list-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px;
  align-items: center;
}

.agent-routine-row {
  display: grid;
  width: 100%;
  min-height: 48px;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  padding: 5px 7px;
  text-align: left;
  transition:
    border-color var(--openbot-duration-hover) ease,
    background-color var(--openbot-duration-hover) ease;
}

.agent-routine-row:focus-visible {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-hover);
}

.agent-routine-row > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.agent-routine-row strong,
.agent-routine-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-routine-row strong {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: 500;
}

.agent-routine-row small,
.agent-routines-empty {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

.agent-routine-action-buttons svg {
  width: 15px;
  height: 15px;
}

.agent-routine-status-icon-active,
.agent-routine-status-icon-paused {
  display: grid;
  place-items: center;
}

.agent-routine-status-icon-active {
  color: var(--openbot-success);
}

.agent-routine-status-icon-paused {
  color: var(--openbot-text-muted);
}

.agent-routine-status-icon-active > svg,
.agent-routine-status-icon-paused > svg {
  width: 14px;
  height: 14px;
  stroke-width: var(--openbot-icon-stroke);
}

@media (hover: hover) and (pointer: fine) {
  .agent-routine-row:hover {
    border-color: var(--openbot-border);
    background: var(--openbot-hover);
  }
}

.agent-routine-editor-actions {
  display: grid;
  gap: 11px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--openbot-border);
  padding-bottom: 16px;
}

.agent-routine-active-toggle,
.agent-routine-action-buttons,
.agent-routine-run-row {
  display: flex;
  align-items: center;
}

.agent-routine-active-toggle {
  justify-content: space-between;
}

.agent-routine-active-toggle > span {
  display: grid;
  gap: 2px;
}

.agent-routine-active-toggle strong {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
}

.agent-routine-active-toggle small {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

.agent-routine-action-buttons {
  flex-wrap: wrap;
  gap: 7px;
}

.agent-routine-action-buttons button {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
  padding: 7px 9px;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}

.agent-routine-action-buttons button:hover:not(:disabled) {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}

.agent-routine-when,
.agent-routine-history {
  margin-top: 24px;
}

.agent-routine-history {
  border-top: 1px solid var(--openbot-border);
  padding-top: 20px;
}

.agent-routine-run-list {
  margin-top: 10px;
}

.agent-routine-run-row {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  gap: 9px;
  border-bottom: 1px solid var(--openbot-border);
  padding: 9px 2px;
}

.agent-routines-overlay {
  top: 0;
  overflow: hidden;
}

.agent-routines-settings {
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.agent-routines-header {
  width: 100%;
}

.agent-routines-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-0-5);
}

.agent-routines-body {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  padding: 14px 15px 28px;
  scrollbar-width: none;
}

.agent-routines-body::-webkit-scrollbar {
  display: none;
}

.agent-routine-editor {
  display: grid;
  gap: 14px;
}

.agent-routine-editor > .settings-field {
  margin-bottom: 0;
}

.agent-routine-editor-actions {
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  border: 0;
  padding: 0;
}

.agent-routine-active-toggle {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
}

/* The shared field puts the label first and fills the row. Here the switch comes first, beside its state word. */
.ui-switch-field.agent-routine-active-toggle {
  width: auto;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.agent-routine-active-toggle .ui-switch-label {
  font-size: var(--openbot-text-sm);
  font-weight: inherit;
}

.agent-routine-action-buttons {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 7px;
}

.agent-routine-action-buttons button {
  min-height: 32px;
  border-radius: var(--openbot-radius-md);
  padding-inline: 11px;
  font-size: var(--openbot-text-sm);
}

.agent-routine-action-buttons .ui-button-variant-destructive {
  border-color: transparent;
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
}

.agent-routine-action-buttons .ui-button-variant-default {
  border-color: transparent;
  background: var(--openbot-surface-light);
  color: var(--openbot-text-on-light);
}

@media (hover: hover) and (pointer: fine) {
  .agent-routine-action-buttons .ui-button-variant-destructive:hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-danger-soft-hover);
    color: var(--openbot-danger);
  }

  .agent-routine-action-buttons .ui-button-variant-default:hover:not(:disabled):not([data-disabled]) {
    background: color-mix(in srgb, var(--openbot-surface-light) 82%, transparent);
    color: var(--openbot-text-on-light);
  }
}

.agent-routine-instruction-field textarea {
  height: 158px;
  min-height: 158px;
  max-height: 158px;
  overflow-y: auto;
  resize: none;
}

.agent-routine-history {
  margin-top: 2px;
}

.agent-routine-when {
  margin-top: 0;
}

/* The schedule and history are fields, so their headings match the field labels. */
.agent-routine-when h3,
.agent-routine-history h3 {
  margin: 0 0 var(--openbot-space-1-5) var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  font-weight: inherit;
  line-height: var(--openbot-leading-md);
}

/* A pointer and value row in the webhook filters. A JSON Pointer is longer than its value. */
.agent-routine-event-filter {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) auto;
  align-items: center;
  gap: var(--openbot-space-2);
}

.agent-routine-history {
  border: 0;
  padding-top: 0;
}

.agent-routine-run-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-top: 0;
}

.agent-routine-run-row {
  display: flex;
  width: 100%;
  min-height: 32px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  padding: 5px var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  text-align: left;
}

.ui-button.agent-routine-run-link {
  cursor: pointer;
}

/* The time, then a muted note: an ignored webhook request, skipped runs, or a late start. */
.agent-routine-run-text {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-wrap: wrap;
  gap: 0 var(--openbot-space-2);
  white-space: nowrap;
}

.agent-routine-run-note {
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-routine-history-error {
  margin-bottom: var(--openbot-space-2);
}

/* A run whose answer went to a messaging place: the run row, then where the answer went. */
.agent-routine-run-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.agent-routine-delivery-row {
  display: flex;
  min-height: 28px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 var(--openbot-space-2) 5px;
  font-size: var(--openbot-text-sm);
}

/* The reason is why the answer is missing from the place, so it wraps rather than cuts off. */
.agent-routine-delivery-note {
  min-width: 0;
  color: var(--openbot-text-muted);
  overflow-wrap: anywhere;
  white-space: normal;
}

.agent-routine-delivery-failed,
.agent-routine-delivery-uncertain {
  color: var(--openbot-warning);
}

@media (hover: hover) and (pointer: fine) {
  .ui-button.agent-routine-run-link:hover:not(:disabled) {
    background: var(--openbot-bg-control-hover);
  }
}

.agent-routine-run-icon {
  display: grid;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  place-items: center;
  color: var(--openbot-text-muted);
}

.agent-routine-run-icon > svg {
  width: 16px;
  height: 16px;
  stroke-width: var(--openbot-icon-stroke);
}

.agent-routine-run-icon-succeeded {
  color: var(--openbot-success);
}

.agent-routine-run-icon-failed {
  color: var(--openbot-danger);
}

.agent-routine-run-icon-needs-attention {
  color: var(--openbot-warning);
}

.agent-routine-run-icon-running,
.agent-routine-run-icon-queued,
.agent-routine-run-icon-interrupted,
.agent-routine-run-icon-cancelled {
  color: var(--openbot-text-muted);
}

/* The overlay fades out with the modal, which is not one of its children. */
.agent-memories-overlay[data-closed] {
  animation: agent-dialog-overlay-out var(--openbot-duration-dialog) ease;
}

.agent-memories-modal {
  position: fixed;
  z-index: calc(var(--openbot-layer-dialog) + 1);
  top: 50%;
  left: 50%;
  width: min(560px, calc(100vw - 48px));
  height: min(456px, calc(100dvh - 48px));
  min-height: 320px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  outline: 0;
  background: var(--openbot-bg-control);
  color: var(--openbot-text-primary);
  transform: translate(-50%, -50%);
  transform-origin: center;
}

.agent-memories-header {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  border-bottom: 1px solid var(--openbot-border);
  padding: var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-3);
}

.agent-memories-heading {
  min-width: 0;
}

.agent-skills-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-1);
}

.agent-skills-parent {
  min-width: 0;
  height: auto;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--openbot-text-muted);
  padding: 0;
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-lg);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-skills-crumb {
  flex: 0 0 auto;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
}

.agent-skills-heading h2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-memories-heading h2 {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-lg);
}

.agent-memories-header-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--openbot-space-1);
}

.agent-memories-header-actions svg,
.agent-memory-delete-button svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

.agent-memories-add-button {
  color: var(--openbot-text-secondary);
}

.agent-memories-body {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: var(--openbot-space-2);
}

.agent-memory-composer {
  display: grid;
  gap: var(--openbot-space-2);
  margin: 0 0 var(--openbot-space-3);
  padding: var(--openbot-space-1) var(--openbot-space-1) 0;
}

.agent-memory-input {
  min-height: 64px;
  resize: none;
  border-color: var(--openbot-border);
  background: transparent;
}

.agent-memory-input:focus-visible {
  border-color: var(--openbot-border-strong);
  outline: 0;
  box-shadow: none;
}

.agent-memory-composer-actions,
.agent-memory-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-1);
}

.agent-memory-inclusion-actions {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-1);
}

.agent-memory-list {
  min-height: 0;
  display: grid;
  grid-auto-rows: max-content;
  flex: 1;
  align-content: start;
  gap: var(--openbot-space-0-5);
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  scrollbar-width: none;
}

.agent-memory-row {
  min-height: 50px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--openbot-control-md) + var(--openbot-space-2));
  align-items: stretch;
  border-radius: var(--openbot-radius-md);
  overflow: hidden;
  background: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .agent-memory-row:hover {
    background: var(--openbot-bg-control-hover);
  }
}

.agent-memory-row:has(.agent-memory-row-main:focus-visible) {
  background: var(--openbot-bg-control-active);
}

.agent-memory-row-main {
  min-width: 0;
  width: 100%;
  height: 100%;
  display: grid;
  align-content: center;
  justify-content: stretch;
  justify-items: start;
  gap: var(--openbot-space-1);
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  padding: var(--openbot-space-2) var(--openbot-space-3);
  color: inherit;
  font: inherit;
  text-align: left;
}

.agent-memory-row-main:focus-visible {
  box-shadow: none;
}

.agent-memory-row .agent-memory-row-main:hover {
  background: transparent;
}

.agent-memory-text {
  display: block;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  white-space: pre-wrap;
}

.agent-memory-meta {
  display: block;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.agent-memory-delete-button {
  align-self: center;
  align-items: center;
  justify-self: center;
  color: var(--openbot-text-muted);
}

.agent-memory-editor {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--openbot-space-2);
  background: transparent;
  padding: var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-2);
}

.agent-memory-row:has(.agent-memory-editor),
.agent-memory-row:has(.agent-memory-editor):hover {
  background: transparent;
}

.agent-memory-state,
.agent-memory-limit,
.agent-memory-error {
  margin: var(--openbot-space-1);
  border-radius: var(--openbot-radius-md);
  padding: var(--openbot-space-3);
  font-size: var(--openbot-text-sm);
}

.agent-memory-state {
  min-height: 160px;
  display: grid;
  place-items: center;
  color: var(--openbot-text-muted);
  text-align: center;
}

.agent-memory-limit {
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-secondary);
}

.agent-memory-error {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
}

.shared-table-list {
  min-height: 0;
  display: grid;
  flex: 1;
  align-content: start;
  gap: var(--openbot-space-0-5);
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  scrollbar-width: none;
}

.shared-table-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
  padding: var(--openbot-space-2) var(--openbot-space-3);
}

.shared-table-main {
  min-width: 0;
  display: grid;
  gap: var(--openbot-space-1);
}

.shared-table-name {
  display: block;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-md);
}

.shared-table-confirm {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface);
  padding: var(--openbot-space-3);
}

.shared-table-confirm p {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.shared-table-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-1);
}

.agent-memories-footer {
  display: flex;
  min-height: 48px;
  align-items: center;
  padding: var(--openbot-space-2) var(--openbot-space-3) var(--openbot-space-3);
}

.agent-skill-empty {
  min-height: 160px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--openbot-space-3);
}

.agent-skill-empty .agent-memory-state {
  min-height: 0;
  padding: 0;
}

.agent-skill-rows {
  display: grid;
  align-content: start;
  gap: 2px;
}

.agent-skill-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--openbot-space-2);
  min-height: 56px;
  padding: var(--openbot-space-1) var(--openbot-space-2);
  border-radius: var(--openbot-radius-lg);
}

.agent-skill-open {
  min-width: 0;
  height: auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  justify-content: stretch;
  justify-items: stretch;
  align-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-1);
  color: inherit;
  text-align: left;
}

.agent-skill-open:hover {
  background: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .agent-skill-row:hover {
    background: var(--openbot-bg-control-hover);
  }
}

.agent-skill-icon {
  width: 40px;
  height: 40px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  color: var(--openbot-accent-text);
}

.agent-skill-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.agent-skill-icon svg {
  width: 20px;
  height: 20px;
}

.agent-skill-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.agent-skill-title {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: var(--openbot-space-2);
}

.agent-skill-title strong {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-skill-row:has(.agent-skill-update) {
  grid-template-columns: minmax(0, 1fr) auto auto auto;
}

.ui-button.agent-skill-update {
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
  font-size: var(--openbot-text-sm);
}

.ui-button.agent-skill-update:hover:not(:disabled):not([data-disabled]),
.ui-button.agent-skill-update:focus-visible {
  background: color-mix(in srgb, var(--openbot-accent-soft), var(--openbot-accent) 12%);
  color: var(--openbot-accent-text);
}

.agent-skill-copy small {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-skill-row-disabled .agent-skill-title strong {
  color: var(--openbot-text-muted);
}

.agent-skill-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-secondary);
  opacity: 0;
  cursor: pointer;
}

.agent-skill-more svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

.agent-skill-row:hover .agent-skill-more,
.agent-skill-row:focus-within .agent-skill-more,
.agent-skill-row:has([aria-expanded="true"]) .agent-skill-more {
  opacity: 1;
}

.agent-skill-menu {
  z-index: calc(var(--openbot-layer-dialog) + var(--openbot-layer-popover) + 1);
}

.agent-skills-modal .ui-switch[data-checked] {
  background: var(--openbot-accent);
}

.agent-skills-modal .ui-switch-thumb[data-checked] {
  background: var(--openbot-text-primary);
}

.agent-local-library,
.agent-skill-detail {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: var(--openbot-space-4);
  overflow: auto;
  padding: var(--openbot-space-3);
  scrollbar-width: none;
}

.agent-local-library::-webkit-scrollbar,
.agent-skill-detail::-webkit-scrollbar {
  display: none;
}

.agent-memories-modal[data-expanded] {
  animation: agent-dialog-content-in var(--openbot-duration-dialog) ease;
}

.agent-memories-modal[data-closed] {
  animation: agent-dialog-content-out var(--openbot-duration-dialog) ease;
}

@keyframes agent-dialog-overlay-out {
  to {
    opacity: 0;
  }
}

@keyframes agent-dialog-content-in {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
  }
}

@keyframes agent-dialog-content-out {
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
  }
}

@media (max-width: 520px) {
  .agent-memories-modal {
    width: calc(100vw - 24px);
    height: calc(100dvh - 24px);
  }

  .agent-memories-header {
    padding-left: var(--openbot-space-3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .agent-memories-overlay,
  .agent-memories-modal {
    animation: none;
  }
}

/* The root list and each page behind it: one column of cards with an even gap. */
.agent-settings-page {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
}

.agent-settings-page > .settings-field {
  margin: 0;
}

/* A switch row inside an inset group: as tall as a link row, the switch on the right. */
.agent-settings-switch-row {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  padding: 0 var(--openbot-space-3);
}

.agent-settings-switch-row > .settings-link-label {
  flex: 1 1 auto;
}

.agent-settings-runtime-rows .provider-model-trigger-field,
.agent-settings-runtime-rows .agent-settings-runtime-row {
  width: 100%;
  height: auto;
  min-height: 40px;
  gap: var(--openbot-space-2);
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 var(--openbot-space-3);
  box-shadow: none;
  font-size: var(--openbot-text-md);
}

.agent-settings-runtime-rows .provider-model-trigger-field:hover:not(:disabled),
.agent-settings-runtime-rows .provider-model-trigger-field[aria-expanded="true"],
.agent-settings-runtime-rows .agent-settings-runtime-row[data-expanded] {
  background: var(--openbot-hover);
}

.agent-settings-runtime-rows .provider-model-trigger-field:focus-visible,
.agent-settings-runtime-rows .ui-select .agent-settings-runtime-row:focus-visible {
  outline: 0;
  background: var(--openbot-hover);
  box-shadow: inset 0 0 0 1px var(--openbot-border-focus);
}

.agent-settings-runtime-rows .provider-model-trigger-field .provider-model-field-label,
.agent-settings-runtime-label {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: 18px;
  text-align: left;
}

.agent-settings-runtime-rows .provider-model-trigger-field .provider-model-trigger-name,
.agent-settings-runtime-row .ui-select-value {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
}

.agent-settings-runtime-row .ui-select-trigger-icon {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

@media (hover: hover) and (pointer: fine) {
  .agent-settings-runtime-rows .provider-model-trigger-field:hover .provider-model-trigger-name,
  .agent-settings-runtime-row:hover .ui-select-value {
    color: var(--openbot-text-secondary);
  }
}

.agent-settings-runtime-rows .provider-model-popover {
  width: var(--kb-popper-anchor-width);
  min-width: 0;
}

.agent-settings-runtime-path {
  display: grid;
  gap: 2px;
  padding: 11px var(--openbot-space-3);
}

.agent-settings-runtime-path > span:last-child {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 17px;
  overflow-wrap: anywhere;
  user-select: text;
}

.agent-settings-runtime-note {
  margin: 0;
  padding-inline: var(--openbot-space-1);
  text-wrap: pretty;
}

.agent-settings-save-error {
  margin: 0 var(--openbot-space-1);
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
}

.agent-settings-notifications {
  display: flex;
  min-height: 70px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-border);
  padding: 13px 12px;
}

.agent-settings-notifications > div {
  min-width: 0;
}

.agent-settings-notifications strong,
.agent-settings-notifications span {
  display: block;
}

.agent-settings-notifications strong {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: 500;
  line-height: 18px;
}

.agent-settings-notifications div > span {
  max-width: 194px;
  margin-top: 2px;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: 15px;
}


/* /@fs//app/packages/ui/src/features/conversation/styles/browser-panel.css */
.browser-pip-controls-document,
.browser-pip-controls-document body,
.browser-pip-controls-document #root {
  background: transparent;
}

.browser-pip-hover-controls {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  padding: 4px;
  opacity: 0;
  transition: opacity var(--openbot-duration-fast) ease;
  -webkit-app-region: drag;
}

.browser-pip-hover-controls:hover,
.browser-pip-hover-controls:focus-within,
.browser-pip-window-hover .browser-pip-hover-controls {
  opacity: 1;
}

.browser-pip-hover-button {
  display: grid;
  width: 20px;
  height: 22px;
  flex: 0 0 20px;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  padding: 0;
  background: var(--openbot-bg-overlay);
  color: var(--openbot-text-secondary);
  -webkit-app-region: no-drag;
}

.browser-pip-hover-button:hover {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}

.browser-pip-hover-button .browser-toolbar-icon {
  width: 12px;
  height: 12px;
}

.browser-pip-hover-button:active {
  transform: scale(0.96);
  transition: transform var(--openbot-duration-fast) cubic-bezier(0.23, 1, 0.32, 1);
}

.browser-tab-control-icon {
  width: 12px;
  height: 12px;
  overflow: visible;
  fill: currentColor;
}

.browser-toolbar-button {
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--openbot-text-muted);
}

.browser-toolbar-button:hover:not(:disabled) {
  background: var(--openbot-border);
  color: var(--openbot-text-primary);
}

.browser-toolbar-button {
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  border-radius: var(--openbot-radius-sm);
}

.browser-toolbar-button:disabled {
  color: var(--openbot-text-dim);
  cursor: default;
}

.browser-toolbar-icon {
  width: 15px;
  height: 15px;
}

.browser-recording-status,
.browser-diagnostic-status {
  display: inline-flex;
  height: 24px;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  border-radius: var(--openbot-radius-sm);
  padding: 0 5px;
  font-size: var(--openbot-text-sm);
  line-height: 1;
}

.browser-recording-status {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
}

.browser-diagnostic-status {
  background: var(--openbot-warning-soft);
  color: var(--openbot-warning);
}

.browser-recording-status svg,
.browser-diagnostic-status svg {
  width: 12px;
  height: 12px;
}

.browser-surface {
  position: relative;
  min-height: 0;
  flex: 1;
  overflow: hidden;
  background: var(--openbot-bg-canvas);
}

/* The live view of a host's tab. It fills the surface the native view would have covered. */
.browser-live-view {
  position: absolute;
  inset: 0;
}

.browser-live-view canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.browser-empty-state {
  display: grid;
  height: 100%;
  place-content: center;
  gap: 5px;
  color: var(--openbot-text-muted);
  text-align: center;
}

.browser-empty-state strong {
  font-size: var(--openbot-text-lg);
  font-weight: 600;
}

.browser-empty-state span {
  font-size: var(--openbot-text-sm);
}


/* /@fs//app/packages/ui/src/features/conversation/styles/remote-desktop.css */
.conversation-panel.browser-panel-active {
  padding-right: var(--browser-panel-width, 380px);
}

.remote-desktop-workspace {
  position: fixed;
  z-index: var(--openbot-layer-toast);
  inset: 0;
  display: flex;
  min-width: 0;
  flex-direction: column;
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity var(--openbot-duration-fast) cubic-bezier(0.2, 0, 0, 1),
    visibility 0s linear var(--openbot-duration-fast);
}

.remote-desktop-workspace-visible {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0s;
}

.remote-desktop-workspace:focus {
  outline: none;
}

.remote-desktop-header {
  display: flex;
  height: 38px;
  min-height: 38px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  border-bottom: 1px solid var(--openbot-border);
  padding: 0 8px 0 0;
  background: var(--openbot-bg-sidebar);
}

.remote-desktop-workspace-darwin .remote-desktop-header {
  padding-left: 84px;
}

.remote-desktop-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  flex: 0 1 auto;
  justify-content: flex-end;
  gap: 4px;
  margin-left: auto;
  white-space: nowrap;
}

.remote-desktop-display-controls {
  min-width: 0;
  display: flex;
  flex: 0 1 168px;
  align-items: center;
}

.remote-desktop-back-button,
.remote-desktop-disconnect-button {
  flex: 0 0 auto;
}

.remote-desktop-disconnect-button {
  color: var(--openbot-text-muted);
}

.remote-desktop-disconnect-button:hover:not(:disabled, [aria-disabled="true"]),
.remote-desktop-disconnect-button:focus-visible:not(:disabled, [aria-disabled="true"]) {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
}

.remote-desktop-stage {
  position: relative;
  min-height: 0;
  flex: 1;
  overflow: hidden;
  background: var(--openbot-accent);
}

.remote-desktop-viewer,
.remote-desktop-viewer > div {
  width: 100%;
  height: 100%;
}

.remote-desktop-viewer {
  overflow: hidden;
  display: block;
  object-fit: contain;
}

.remote-desktop-display-select {
  width: min(168px, 22vw);
  min-width: 112px;
  flex: 0 1 168px;
  font-size: var(--openbot-text-sm);
}

.remote-desktop-display-select-content {
  z-index: calc(var(--openbot-layer-toast) + 1);
}

.remote-desktop-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
  background: var(--openbot-bg-overlay);
  padding: 24px;
  text-align: center;
}

.remote-desktop-overlay strong {
  max-width: 330px;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: 600;
}

.remote-desktop-connecting-avatar {
  width: 56px;
  height: 56px;
  margin-bottom: 5px;
  filter: drop-shadow(0 8px 18px var(--openbot-accent-soft));
  opacity: 1;
  transform: translateY(0) scale(1);
  transition:
    opacity var(--openbot-duration-overlay) var(--openbot-ease-out),
    transform var(--openbot-duration-overlay) var(--openbot-ease-out);
  will-change: opacity, transform;
}

@starting-style {
  .remote-desktop-connecting-avatar {
    opacity: 0;
    transform: translateY(4px) scale(0.96);
  }
}

.remote-desktop-overlay > span:not(.ui-spinner):not(.remote-desktop-empty-mark) {
  max-width: 330px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
}

.remote-desktop-empty-mark {
  display: grid;
  width: 38px;
  height: 38px;
  margin-bottom: 5px;
  place-items: center;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-hover);
  color: var(--openbot-text-muted);
}

.remote-desktop-empty-mark svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}

.remote-desktop-overlay > button {
  height: 34px;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-border);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: 600;
}

.remote-desktop-overlay > button:hover {
  background: var(--openbot-border-strong);
}

.remote-desktop-overlay > button {
  min-width: 92px;
  margin-top: 5px;
  padding: 0 13px;
}

.remote-desktop-button-dot {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 5px;
  height: 5px;
  border: 1px solid var(--openbot-bg-sidebar);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success);
}


/* /@fs//app/packages/ui/src/features/conversation/styles/file-preview.css */
/* transitions.dev panel reveal for the file preview. The panel enters from
   the right edge, so it travels on X. `.browser-panel` declares its own
   transition later in the cascade than the `.t-panel-slide` snippet, so both
   property lists are restated here at a higher specificity. */
.file-preview-panel.t-panel-slide {
  --panel-translate-x: 24px;
  --panel-translate-y: 0px;

  transition:
    transform var(--panel-close-dur) var(--panel-ease),
    opacity var(--panel-close-dur) var(--panel-ease),
    filter var(--panel-close-dur) var(--panel-ease),
    border-color var(--openbot-duration-slow) ease,
    box-shadow var(--openbot-duration-slow) ease;
}

.file-preview-panel.t-panel-slide[data-open="true"] {
  transition:
    transform var(--panel-open-dur) var(--panel-ease),
    opacity var(--panel-open-dur) var(--panel-ease),
    filter var(--panel-open-dur) var(--panel-ease),
    border-color var(--openbot-duration-slow) ease,
    box-shadow var(--openbot-duration-slow) ease;
}

.file-preview-header {
  display: flex;
  height: 39px;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--openbot-border);
  padding: 0 7px 0 11px;
}

.file-preview-header h2 {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Copy is a shared icon button; its icon matches the other header icons. */
.file-preview-copy svg {
  width: 15px;
  height: 15px;
  stroke-width: 2;
}

.file-preview-file-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  stroke-width: var(--openbot-icon-stroke);
}

.file-preview-content {
  min-height: 0;
  flex: 1;
  overflow: auto;
  background: var(--openbot-bg-canvas);
}

.markdown-file-preview {
  min-width: 0;
}

.file-preview-markdown {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 26px 48px;
  color: var(--openbot-text-primary);
  overflow-wrap: anywhere;
}

.file-preview-markdown > .message-markdown {
  font-size: var(--openbot-text-md);
  line-height: 1.6;
}

.file-preview-markdown-status {
  min-width: 0;
  margin: 0;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface);
  padding: 18px 20px;
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  line-height: 1.55;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.file-preview-text {
  min-width: min-content;
  min-height: 100%;
  margin: 0;
  padding: 18px 20px 48px;
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  line-height: 1.55;
  tab-size: 2;
  white-space: pre;
}

.file-preview-text-wrap {
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.file-preview-image-wrap {
  display: grid;
  min-height: 100%;
  padding: 20px;
  place-items: center;
}

.file-preview-image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.file-preview-pdf {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--openbot-bg-canvas);
}

.file-preview-audio {
  display: block;
  width: calc(100% - 40px);
  margin: 20px;
}

.file-preview-video {
  display: block;
  width: 100%;
  max-height: 100%;
  background: var(--openbot-bg-canvas);
  object-fit: contain;
}

.file-preview-spreadsheet {
  min-width: 0;
  min-height: 100%;
  padding: 20px;
  color: var(--openbot-text-primary);
}

.file-preview-spreadsheet-status {
  margin: 0;
  color: var(--openbot-text-muted);
  font-family: var(--openbot-font-mono);
  white-space: pre-wrap;
}

.file-preview-spreadsheet-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  overflow-x: auto;
}

.file-preview-spreadsheet-tabs button {
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-control);
  padding: 6px 10px;
  color: var(--openbot-text-muted);
  white-space: nowrap;
}

.file-preview-spreadsheet-tabs button[aria-pressed="true"] {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-primary);
}

.file-preview-spreadsheet-table-wrap {
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface);
}

.file-preview-spreadsheet-table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: var(--openbot-text-sm);
}

.file-preview-spreadsheet-table caption {
  padding: 10px 12px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-align: left;
}

.file-preview-spreadsheet-table th,
.file-preview-spreadsheet-table td {
  border-top: 1px solid var(--openbot-border);
  border-right: 1px solid var(--openbot-border);
  padding: 8px 12px;
  text-align: left;
  white-space: pre;
}

.file-preview-spreadsheet-table th {
  background: var(--openbot-bg-control);
  font-weight: 600;
}

.file-preview-spreadsheet-table td:last-child,
.file-preview-spreadsheet-table th:last-child {
  border-right: 0;
}

.file-preview-spreadsheet-note {
  margin: 10px 0 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.file-preview-unsupported {
  display: grid;
  min-height: 100%;
  place-content: center;
  justify-items: center;
  gap: 8px;
  padding: 24px;
  color: var(--openbot-text-muted);
  text-align: center;
}

.file-preview-unsupported > svg {
  width: 28px;
  height: 28px;
  margin-bottom: 4px;
}

.file-preview-unsupported strong {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
}

.file-preview-unsupported span {
  max-width: 260px;
  font-size: var(--openbot-text-sm);
  line-height: 1.45;
}

.file-preview-unsupported button {
  margin-top: 6px;
}

.file-preview-truncated {
  position: sticky;
  bottom: 0;
  margin: 0;
  border-top: 1px solid var(--openbot-border);
  background: var(--openbot-bg-control);
  padding: 7px 12px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-align: center;
}
.browser-pip-window {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
}

.browser-pip-surface {
  width: 100%;
  height: 100%;
}

.file-preview-folder {
  display: grid;
  margin: 0;
  padding: 8px;
  list-style: none;
}

.file-preview-folder-entry {
  display: grid;
  width: 100%;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  justify-content: stretch;
  padding: 6px 10px;
  font-size: var(--openbot-text-sm);
  text-align: left;
}

.file-preview-folder-name {
  overflow: hidden;
  color: var(--openbot-text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-preview-folder-meta {
  color: var(--openbot-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.file-preview-folder-empty {
  margin: 0;
  padding: 24px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-align: center;
}


/* /@fs//app/packages/ui/src/features/conversation/styles/header-layout.css */
.conversation-header {
  display: flex;
  height: 38px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  border-bottom: 0;
  padding: 0 12px 0 8px;
  background: transparent;
}

.conversation-heading-group {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.chat-search {
  position: absolute;
  z-index: 13;
  top: 19px;
  right: 16px;
  display: flex;
  width: min(308px, calc(100% - 32px));
  height: 34px;
  align-items: center;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  box-shadow: var(--openbot-shadow-raised);
  color: var(--openbot-text-muted);
}

.chat-search-icon {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  margin-left: 11px;
  stroke-width: var(--openbot-icon-stroke);
}

.chat-search .chat-search-input {
  min-width: 0;
  height: var(--openbot-control-md);
  flex: 1;
  border: 0;
  background: transparent;
  padding: 0 8px;
  box-shadow: none;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
}

.chat-search .chat-search-input:focus {
  border: 0;
  box-shadow: none;
  outline: 0;
}

.chat-search-input::-webkit-search-cancel-button {
  display: none;
}

.chat-search-position {
  min-width: 38px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.chat-search-separator {
  width: 1px;
  height: 20px;
  flex: 0 0 auto;
  background: var(--openbot-border);
}

.chat-search .chat-search-button {
  width: 26px;
  height: var(--openbot-control-md);
  flex: 0 0 auto;
  border: 0;
  border-radius: inherit;
  padding: 0;
}

.chat-search-button svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: var(--openbot-icon-stroke);
}

.chat-search .chat-search-close {
  margin-right: 3px;
}

::highlight(openbot-chat-search-results) {
  background: var(--openbot-accent-soft);
}

::highlight(openbot-chat-search-current) {
  background: var(--openbot-warning);
  color: var(--openbot-text-on-light);
}

.conversation-title[aria-label="View agent settings"]:hover {
  color: var(--openbot-text-primary);
}

.browser-panel {
  position: absolute;
  z-index: 14;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  width: var(--browser-panel-width, 380px);
  flex-direction: column;
  border-left: 1px solid var(--openbot-border);
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
  transition:
    border-color var(--openbot-duration-slow) ease,
    box-shadow var(--openbot-duration-slow) ease;
}


/* /@fs//app/packages/ui/src/features/conversation/styles/layout.css */
.conversation-panel {
  position: relative;
  display: flex;
  grid-column: 3;
  grid-row: 1;
  min-width: 0;
  flex-direction: column;
  background: var(--openbot-bg-canvas);
  transition: padding-right var(--panel-resize-duration, var(--openbot-duration-overlay)) cubic-bezier(0.22, 1, 0.36, 1);
}

.direct-conversation {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 0;
  grid-column: 3;
  grid-row: 1;
  flex-direction: column;
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
}

.app-frame-with-server-rail .direct-conversation {
  grid-column: 4;
}

.direct-conversation-header {
  display: flex;
  height: 46px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--openbot-hover);
  padding: 0 14px;
}

.direct-conversation-person {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}

.direct-conversation-person .person-avatar {
  --agent-avatar-optical-offset: -8px;

  width: 30px;
  height: 30px;
  border-radius: var(--openbot-radius-md);
}

.direct-conversation-person .person-avatar > i {
  display: none;
}

.direct-conversation-person h1 {
  overflow: hidden;
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: 560;
  line-height: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.direct-conversation-person div > span {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 11px;
}

.direct-conversation-person div > span i {
  width: 5px;
  height: 5px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control-hover);
}

.direct-conversation-person div > span.online {
  color: var(--openbot-success);
}

.direct-conversation-person div > span.online i {
  background: var(--openbot-success);
}

.direct-private-label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--openbot-text-readable);
  font-size: var(--openbot-text-sm);
}

.direct-private-label svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}

.direct-message-list {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  padding: 22px max(18px, calc((100% - 760px) / 2)) 28px;
}

.direct-conversation-state,
.direct-conversation-empty {
  display: grid;
  min-height: 100%;
  place-content: center;
  justify-items: center;
  color: var(--openbot-text-muted);
  text-align: center;
}

.direct-conversation-empty h2 {
  margin: 14px 0 4px;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-xl);
  font-weight: 560;
}

.direct-conversation-empty p {
  max-width: 290px;
  margin: 0;
  font-size: var(--openbot-text-sm);
  line-height: 17px;
}

.direct-message-list .ui-message-group {
  gap: 0;
}

.direct-message > .ui-message-content {
  max-width: min(560px, 78%);
}

.direct-message .ui-bubble {
  max-width: 100%;
}

.direct-message .ui-bubble-content {
  font-size: var(--openbot-text-md);
  line-height: 19px;
  white-space: pre-wrap;
}

.direct-message time {
  color: var(--openbot-text-readable);
  font-size: var(--openbot-text-sm);
}

.direct-message .ui-message-footer {
  padding: 0 2px;
}

.direct-composer-wrap {
  flex: 0 0 auto;
  padding: 0 max(18px, calc((100% - 760px) / 2)) 16px;
}

.direct-typing-indicator {
  display: flex;
  min-height: 20px;
  align-items: center;
  gap: 7px;
  padding: 0 10px 4px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

.direct-message-error {
  margin: 0 8px 6px;
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
}

.direct-composer {
  display: flex;
  min-height: 46px;
  align-items: flex-end;
  gap: 8px;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  padding: 6px 7px 6px 13px;
  box-shadow: 0 8px 25px var(--openbot-shadow-popover-ambient);
}

.direct-composer:focus-within {
  border-color: var(--openbot-border-strong);
}

.direct-composer textarea {
  min-width: 0;
  min-height: 32px;
  max-height: 130px;
  flex: 1;
  resize: none;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 6px 0;
  color: var(--openbot-text-primary);
  font: inherit;
  font-size: var(--openbot-text-md);
  line-height: 20px;
}

.direct-composer textarea::placeholder {
  color: var(--openbot-text-muted);
}

.direct-composer > button {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-success);
  color: var(--openbot-success);
  font-size: var(--openbot-text-xl);
  font-weight: 650;
}

.direct-composer > button:disabled {
  background: var(--openbot-border);
  color: var(--openbot-text-dim);
}

.app-frame-with-server-rail .conversation-panel {
  grid-column: 4;
}


/* /@fs//app/packages/ui/src/features/conversation/styles/awaiting-replies.css */
/*
 * Waiting for replies: the task list rows, in the queue panel's surface. It hangs off the top of the
 * next panel like the queue: its bottom goes under the composer, or under the queue when the queue
 * shows, and that panel paints over the overlap.
 */

.awaiting-replies {
  --awaiting-composer-overlap: 14px;

  position: relative;
  z-index: 9;
  width: auto;
  margin: 0 12px calc(-1 * var(--awaiting-composer-overlap));
  border-color: var(--openbot-queue-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-queue-surface);
  padding-bottom: var(--awaiting-composer-overlap);
  animation: queue-panel-in var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1) both;
}

.awaiting-replies.task-list .task-list-header {
  min-width: 0;
  flex: 1;
  border-radius: var(--openbot-radius-lg);
}

/* The close button sits next to the header button, because a button cannot hold another. */
.awaiting-replies-bar {
  display: flex;
  align-items: center;
}

.awaiting-replies-dismiss {
  margin-right: var(--openbot-space-2);
  color: var(--openbot-text-muted);
}

.composer-wrap:has(.composer-attachment) .awaiting-replies:last-child {
  margin-bottom: 0;
}

.awaiting-replies-item {
  align-items: center;
}

.awaiting-replies-avatar {
  --agent-avatar-optical-offset: -1px;

  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
}

.awaiting-replies-text {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: baseline;
  gap: var(--openbot-space-2);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}

.awaiting-replies-name {
  flex: 0 0 auto;
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}

.awaiting-replies-preview {
  overflow: hidden;
  min-width: 0;
  color: var(--openbot-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.awaiting-replies-state {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-md);
}

.awaiting-replies-detail {
  color: var(--openbot-text-dim);
}

.awaiting-replies-item[data-state="failed"] .awaiting-replies-state-label {
  color: var(--openbot-danger-text);
}

.awaiting-replies-item[data-state="active"] .awaiting-replies-state-label {
  animation: task-list-pulse 1.6s ease-in-out infinite;
  animation-play-state: var(--task-list-play-state, running);
}

@media (prefers-reduced-motion: reduce) {
  .awaiting-replies {
    animation: none;
  }

  .awaiting-replies-item[data-state="active"] .awaiting-replies-state-label {
    animation: none;
  }
}


/* /@fs//app/packages/ui/src/features/conversation/styles/subagents.css */
/* The subagents of one turn: the chat card and the side panel pane. */

.subagents-elapsed {
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}

/* The live line: the icon of the current step and its text. */

.subagents-live {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.subagents-live-glyph {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: 0 0 auto;
  margin-top: 2px;
}

.subagents-live-text {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.subagents-live[data-state="failed"] {
  color: var(--openbot-danger-text);
}

/* The group: the header with the progress, and the list. */

.subagents-group {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: var(--openbot-space-1-5);
}

.subagents-group .subagents-group-header {
  display: flex;
  height: auto;
  align-self: flex-start;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-left: calc(-1 * var(--openbot-space-1-5));
  border-radius: var(--openbot-radius-sm);
  padding: var(--openbot-space-0-5) var(--openbot-space-1-5);
  color: inherit;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-md);
  text-align: left;
}

/* The open list is not a lit toggle, so the header has no fill. */
.subagents-group .subagents-group-header[aria-expanded="true"]:not(:hover) {
  background: transparent;
  color: inherit;
}

.subagents-group-chevron {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  color: var(--openbot-text-muted);
  transition: rotate var(--openbot-duration-fast) var(--openbot-ease-out);
}

.subagents-group-header[aria-expanded="true"] .subagents-group-chevron {
  rotate: 90deg;
}

@media (prefers-reduced-motion: reduce) {
  .subagents-group-chevron {
    transition: none;
  }
}

.subagents-group-title {
  font-weight: var(--openbot-weight-medium);
}

.subagents-progress {
  gap: var(--openbot-space-1-5);
  font-variant-numeric: tabular-nums;
}

.subagents-ring {
  width: var(--openbot-icon-xs);
}

.subagents-ring .ui-radial-progress-track,
.subagents-ring .ui-radial-progress-indicator {
  stroke-width: 7;
}

.subagents-ring .ui-radial-progress-indicator {
  transition: stroke-dasharray var(--openbot-duration-slow) var(--openbot-ease-out);
}

.subagents-progress-failed {
  color: var(--openbot-danger-text);
}

@media (prefers-reduced-motion: reduce) {
  .subagents-ring .ui-radial-progress-indicator {
    transition: none;
  }
}

/* The list: one quiet card, as wide as the agent's message bubble. */

.subagents-list {
  display: flex;
  width: min(100%, 720px);
  flex-direction: column;
  margin: 0;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-canvas);
  padding: var(--openbot-space-1);
  list-style: none;
}

/* Two lines on one grid: the status and step icons share the first column, so both texts start
   at the same x. */
.subagents-list .subagents-row {
  display: grid;
  width: 100%;
  height: auto;
  align-items: start;
  grid-template-columns: var(--openbot-icon-sm) minmax(0, 1fr) auto auto;
  gap: 2px var(--openbot-space-2);
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  padding: var(--openbot-space-2);
  color: inherit;
  font-weight: var(--openbot-weight-regular);
  line-height: inherit;
  text-align: left;
  white-space: normal;
  cursor: pointer;
}

.subagents-list .subagents-row:hover {
  background: var(--openbot-hover);
}

.subagents-list .subagents-row.subagents-row-selected {
  background: var(--openbot-bg-surface);
}

.subagents-row:focus-visible {
  outline: 2px solid var(--openbot-focus-ring);
  outline-offset: -2px;
}

.subagents-row-copy,
.subagents-row .subagents-live {
  display: contents;
}

.subagents-row-title {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.subagents-row .subagents-elapsed {
  line-height: var(--openbot-leading-md);
}

.subagents-row .subagents-live-glyph {
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  justify-self: center;
  margin-top: 0;
}

.subagents-row .subagents-live-text {
  grid-column: 2;
  grid-row: 2;
}

.subagents-row-chevron {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: 0 0 auto;
  margin-top: 4px;
  color: var(--openbot-text-muted);
  opacity: 0;
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}

.subagents-row:hover .subagents-row-chevron,
.subagents-row:focus-visible .subagents-row-chevron,
.subagents-row.subagents-row-selected .subagents-row-chevron {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .subagents-row-chevron {
    transition: none;
  }
}

/* The side panel pane: the steps of one subagent. */

.subagents-panel {
  overflow: hidden;
}

.subagents-panel-detail {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: var(--openbot-space-3);
  overflow-y: auto;
  padding: var(--openbot-space-4);
}

.subagents-panel-head {
  display: flex;
  align-items: flex-start;
  gap: var(--openbot-space-2);
}

.subagents-panel-head h3 {
  margin: 0;
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-lg);
  overflow-wrap: anywhere;
}

.subagents-panel-meta {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

.subagents-steps {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
}

.subagents-prompt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  border-left: 2px solid var(--openbot-border-strong);
  padding-left: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.subagents-prompt-label {
  color: var(--openbot-text-muted);
  font-weight: var(--openbot-weight-medium);
}

.subagents-step-list {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.subagents-step {
  display: flex;
  align-items: flex-start;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  overflow-wrap: anywhere;
}

.subagents-step-glyph {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--openbot-text-muted);
}

.subagents-step[data-kind="thinking"] .subagents-step-text {
  color: var(--openbot-text-muted);
  font-style: italic;
}

.subagents-step[data-kind="text"] .subagents-step-text {
  color: var(--openbot-text-primary);
}

.subagents-step-text.agent-activity-label {
  -webkit-line-clamp: unset;
}

.subagents-error {
  display: flex;
  align-items: flex-start;
  gap: var(--openbot-space-2);
  margin: 0;
  color: var(--openbot-danger-text);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.subagents-error-icon {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: 0 0 auto;
  margin-top: 2px;
}

/* Status icons: the same icons and colours as the chat action markers. */

.subagents-status {
  display: inline-flex;
  width: var(--openbot-icon-sm);
  height: var(--openbot-leading-md);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}

.subagents-status-icon {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

.subagents-status[data-state="running"] {
  color: var(--openbot-accent);
}

.subagents-status[data-state="running"] .subagents-status-icon {
  animation: ui-spin 1s linear infinite;
}

.subagents-status[data-state="completed"] {
  color: var(--openbot-success);
}

.subagents-status[data-state="failed"] {
  color: var(--openbot-danger);
}

.subagents-status[data-state="stopped"] {
  color: var(--openbot-text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .subagents-status[data-state="running"] .subagents-status-icon {
    animation: none;
  }
}


/* /@fs//app/packages/ui/src/features/conversation/styles/task-list.css */
/* Task list: the chat block of a plan an agent works through. */

.task-list {
  --task-list-glyph: var(--openbot-icon-sm);
  --task-list-ease: var(--openbot-ease-out);
  /* The open is slower than the close: rows settle in one after another, and leave together. */
  --task-list-open: 320ms;
  --task-list-close: 200ms;
  --task-list-close-ease: cubic-bezier(0.32, 0.08, 0.24, 1);
  --task-list-blur: 4px;
  --task-list-stagger: 28ms;

  box-sizing: border-box;
  width: min(100%, 448px);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
}

/* The ghost button is the whole header row, so it takes the card corners and the row height.
 * An open list is not a pressed control: the transparent background overrides the expanded
 * ghost fill, and the ghost hover rule still wins. */
.task-list .task-list-header {
  display: flex;
  background: transparent;
  width: 100%;
  height: auto;
  align-items: center;
  justify-content: flex-start;
  gap: var(--openbot-space-3);
  border-radius: var(--openbot-radius-card);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-regular);
  padding: var(--openbot-space-3);
  text-align: left;
}

.task-list .task-list-header:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 1px var(--openbot-text-muted);
}

.task-list-summary-glyph {
  display: inline-flex;
  width: var(--task-list-glyph);
  height: var(--task-list-glyph);
  flex: 0 0 auto;
}

.task-list-donut {
  width: 100%;
  height: 100%;
}

.task-list-donut circle {
  stroke-width: 1.5;
}

.task-list-donut-track {
  stroke: var(--openbot-border-strong);
}

.task-list-donut-value {
  stroke: var(--openbot-text-primary);
  stroke-linecap: round;
  transition: stroke-dashoffset var(--openbot-duration-slow) var(--task-list-ease);
}

/* The title and the running task share one cell, and swap with a blur when the list closes. */
.task-list-title {
  display: grid;
  min-width: 0;
  flex: 1;
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}

.task-list-title-layer {
  overflow: hidden;
  min-width: 0;
  grid-area: 1 / 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition:
    opacity var(--task-list-open) var(--task-list-ease),
    filter var(--task-list-open) var(--task-list-ease),
    transform var(--task-list-open) var(--task-list-ease);
}

.task-list-title-name {
  font-weight: var(--openbot-weight-semibold);
}

.task-list-title-task {
  font-weight: var(--openbot-weight-regular);
}

.task-list-title[data-showing="task"] .task-list-title-name,
.task-list-title[data-showing="title"] .task-list-title-task {
  filter: blur(var(--task-list-blur));
  opacity: 0;
}

.task-list-title[data-showing="task"] .task-list-title-name {
  transform: translateY(calc(-1 * var(--openbot-space-1)));
}

.task-list-title[data-showing="title"] .task-list-title-task {
  transform: translateY(var(--openbot-space-1));
}

/* The next task enters from below while the list stays closed. */
.task-list-title-task-text {
  animation: task-list-title-in var(--task-list-open) var(--task-list-ease);
}

.task-list-count {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-variant-numeric: tabular-nums;
  line-height: var(--openbot-leading-md);
}

.task-list-chevron {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  transform: rotate(-90deg);
  transition: transform var(--openbot-duration-normal) var(--task-list-ease);
}

.task-list[data-open] .task-list-chevron {
  transform: rotate(0deg);
}

/* The panel animates its row from 0fr to 1fr, so the chat below moves with it. */
.task-list-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--task-list-close) var(--task-list-close-ease);
}

.task-list[data-open] .task-list-panel {
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--task-list-open) var(--task-list-ease);
}

.task-list-items {
  display: grid;
  overflow: hidden;
  min-height: 0;
  margin: 0;
  padding: 0 var(--openbot-space-3);
  list-style: none;
  transition: padding var(--task-list-close) var(--task-list-close-ease);
}

.task-list[data-open] .task-list-items {
  padding-bottom: var(--openbot-space-3);
  transition: padding var(--task-list-open) var(--task-list-ease);
}

/* A closing list blurs and lifts away as one; an opening list focuses in row by row. The delay
 * stops growing after the eighth row, so a long plan does not wait for its last rows. */
.task-list-item {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-0-5) 0;
  filter: blur(var(--task-list-blur));
  opacity: 0;
  transform: translateY(calc(-1 * var(--openbot-space-1))) scale(0.98);
  transform-origin: left top;
  transition:
    opacity var(--task-list-close) var(--task-list-close-ease),
    filter var(--task-list-close) var(--task-list-close-ease),
    transform var(--task-list-close) var(--task-list-close-ease);
}

.task-list[data-open] .task-list-item {
  filter: blur(0);
  opacity: 1;
  transform: none;
  transition:
    opacity var(--task-list-open) var(--task-list-ease),
    filter var(--task-list-open) var(--task-list-ease),
    transform var(--task-list-open) var(--task-list-ease);
  transition-delay: calc(min(var(--task-list-index, 0), 8) * var(--task-list-stagger));
}

.task-list-item-mark {
  display: inline-flex;
  width: var(--task-list-glyph);
  height: var(--openbot-leading-md);
  flex: 0 0 auto;
  align-items: center;
}

.task-list-item-label {
  position: relative;
  min-width: 0;
  flex: 1;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  transition: color var(--openbot-duration-normal) var(--task-list-ease);
}

.task-list-item[data-state="pending"] .task-list-item-label {
  color: var(--openbot-text-muted);
}

.task-list-item[data-state="done"] .task-list-item-label {
  color: var(--openbot-text-dim);
}

/* The strike line draws from the start of the text when the task is done. */
.task-list-item-text {
  position: relative;
}

.task-list-item-text::after {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--openbot-duration-slow) var(--task-list-ease);
}

.task-list-item[data-state="done"] .task-list-item-text::after {
  transform: scaleX(1);
}

.task-list-item[data-state="active"] .task-list-item-text,
.task-list-title[data-showing="task"] .task-list-title-task-text {
  display: inline-block;
  color: var(--openbot-text-primary);
  animation: task-list-pulse 1.6s ease-in-out infinite;
  animation-play-state: var(--task-list-play-state, running);
}

.task-list-title[data-showing="task"] .task-list-title-task-text {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
  animation:
    task-list-title-in var(--task-list-open) var(--task-list-ease),
    task-list-pulse 1.6s ease-in-out infinite;
  animation-play-state: var(--task-list-play-state, running);
}

/* The same roll as the update island: each settled value lifts in from below and sharpens. */
.task-list-item-progress {
  --digit-dur: var(--openbot-duration-overlay);
  --digit-distance: var(--openbot-space-1);
  --digit-blur: var(--openbot-space-0-5);
  --digit-stagger: 40ms;

  display: inline-flex;
  min-width: 4ch;
  flex: 0 0 auto;
  justify-content: flex-end;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  line-height: var(--openbot-leading-md);
  padding: 0 var(--openbot-space-1-5);
}

/* One glyph for all states. Each layer shows for its own state, so a change animates in place. */
.task-list-mark {
  width: var(--task-list-glyph);
  height: var(--task-list-glyph);
  overflow: visible;
}

.task-list-mark circle,
.task-list-mark path {
  transition:
    opacity var(--openbot-duration-normal) var(--task-list-ease),
    transform var(--openbot-duration-normal) var(--task-list-ease),
    stroke-dashoffset var(--openbot-duration-slow) var(--task-list-ease);
  transform-box: fill-box;
  transform-origin: center;
}

.task-list-mark-pending {
  opacity: 0;
  stroke: var(--openbot-text-dim);
  stroke-dasharray: 1.2 2;
  stroke-width: 1.5;
}

.task-list-mark-track {
  opacity: 0;
  stroke: var(--openbot-border-strong);
  stroke-width: 1.5;
}

.task-list-mark-arc {
  opacity: 0;
  stroke: var(--openbot-text-primary);
  stroke-dasharray: 12 100;
  stroke-linecap: round;
  stroke-width: 1.5;
}

.task-list-mark-fill {
  fill: var(--openbot-text-dim);
  opacity: 0;
  transform: scale(0.4);
}

.task-list-mark-check {
  stroke: var(--openbot-bg-canvas);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
}

.task-list-mark-cross {
  stroke: var(--openbot-bg-canvas);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
  stroke-width: 1.75;
}

.task-list-mark[data-state="pending"] .task-list-mark-pending,
.task-list-mark[data-state="active"] .task-list-mark-track,
.task-list-mark[data-state="active"] .task-list-mark-arc,
.task-list-mark[data-state="done"] .task-list-mark-fill,
.task-list-mark[data-state="failed"] .task-list-mark-fill {
  opacity: 1;
}

/* Rotate the outer SVG so Chromium can composite the animation. */
.task-list-mark[data-state="active"] {
  animation: task-list-turn 0.9s linear infinite;
  animation-play-state: var(--task-list-play-state, running);
}

.task-list-mark[data-state="done"] .task-list-mark-fill,
.task-list-mark[data-state="failed"] .task-list-mark-fill {
  transform: scale(1);
}

.task-list-mark[data-state="failed"] .task-list-mark-fill {
  fill: var(--openbot-danger);
}

/* The check and the cross draw after the disc has filled. */
.task-list-mark[data-state="done"] .task-list-mark-check,
.task-list-mark[data-state="failed"] .task-list-mark-cross {
  stroke-dashoffset: 0;
  transition-delay: var(--openbot-duration-fast);
}

@keyframes task-list-turn {
  to {
    transform: rotate(360deg);
  }
}

@keyframes task-list-title-in {
  from {
    filter: blur(var(--task-list-blur));
    opacity: 0;
    transform: translateY(var(--openbot-space-1));
  }
}

/* Opacity avoids the per-frame text paint of an animated clipped gradient. */
@keyframes task-list-pulse {
  50% {
    opacity: 0.6;
  }
}

/* Closed rows remain mounted for the close transition, but need no idle animation. */
.task-list:not([data-open]) .task-list-panel {
  --task-list-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .task-list-donut-value,
  .task-list-chevron,
  .task-list-panel,
  .task-list-items,
  .task-list-item,
  .task-list[data-open] .task-list-panel,
  .task-list[data-open] .task-list-items,
  .task-list[data-open] .task-list-item,
  .task-list-item-label,
  .task-list-title-layer,
  .task-list-item-text::after,
  .task-list-mark circle,
  .task-list-mark path {
    transition: none;
  }

  .task-list-mark[data-state="active"],
  .task-list-item[data-state="active"] .task-list-item-text,
  .task-list-title-task-text,
  .task-list-title[data-showing="task"] .task-list-title-task-text {
    animation: none;
  }
}


/* /@fs//app/packages/ui/src/features/conversation/styles/backup-models.css */
.backup-model-logo {
  display: inline-flex;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: none;
  align-items: center;
  justify-content: center;
}

.backup-model-logo svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  overflow: visible;
  fill: var(--openbot-provider-current);
}

.backup-model-option {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
}

.backup-models-page {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
}

.backup-models-intro {
  margin: 0;
  padding-inline: var(--openbot-space-1);
}

.backup-models-empty {
  margin: 0;
  padding: var(--openbot-space-2) var(--openbot-space-3);
}

.backup-models-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.backup-models-row {
  display: flex;
  min-height: 40px;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-1) var(--openbot-space-2) var(--openbot-space-1) var(--openbot-space-3);
}

.backup-models-number {
  width: var(--openbot-icon-sm);
  flex: none;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.backup-models-text {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.backup-models-name {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.backup-models-state {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

/* The same dimming the provider picker uses for an unavailable provider. */
.backup-models-row:not([data-state="ready"]) .backup-model-logo svg {
  opacity: 0.44;
}

.backup-models-row:not([data-state="ready"]) .backup-models-name {
  color: var(--openbot-text-muted);
  text-decoration: line-through;
}

.backup-models-actions {
  display: inline-flex;
  flex: none;
}

.usage-limit-ask-card {
  display: flex;
  max-width: 560px;
  flex-direction: column;
  gap: var(--openbot-space-3);
  margin: var(--openbot-space-4) 0 0;
}

.usage-limit-ask-body {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
}

.usage-limit-ask-select {
  max-width: 320px;
}

.usage-limit-ask-remember {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  cursor: pointer;
}

.usage-limit-ask-error {
  margin: 0;
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
}

.usage-limit-ask-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
}


/* /@fs//app/packages/ui/src/features/conversation/styles/marketplace-suggestion.css */
/* Marketplace suggestion: an app or skill an agent suggests in the chat, with its connect action. */

.marketplace-suggestion.conversation-interaction-card {
  display: grid;
  container-type: inline-size;
  width: 100%;
  max-width: 520px;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3);
}

.marketplace-suggestion-header {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-3);
}

/* The listing icon keeps its tile border here, as on a dark chat its own fill meets the card. */
.marketplace-suggestion .marketplace-suggestion-icon {
  width: var(--openbot-control-lg);
  height: var(--openbot-control-lg);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-primary);
}

.marketplace-suggestion .marketplace-suggestion-icon img {
  border-radius: inherit;
}

.marketplace-suggestion-heading {
  display: grid;
  min-width: 0;
  flex: 1;
}

/* In a narrow chat the action takes its own row, so the name keeps the width. */
@container (max-width: 360px) {
  .marketplace-suggestion-header {
    flex-wrap: wrap;
  }

  .marketplace-suggestion-heading {
    flex-basis: calc(100% - var(--openbot-control-lg) - var(--openbot-control-md) - 2 * var(--openbot-space-3));
  }

  .marketplace-suggestion-action {
    order: 1;
    width: 100%;
  }

  .marketplace-suggestion-action > .ui-button {
    width: 100%;
  }
}

.marketplace-suggestion-title {
  overflow: hidden;
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketplace-suggestion .marketplace-suggestion-name {
  height: auto;
  padding: 0;
  color: inherit;
  font: inherit;
}

.marketplace-suggestion-description {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketplace-suggestion-action {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
}

.marketplace-suggestion-done[data-slot="badge"] {
  gap: var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-pill);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}

.marketplace-suggestion-done svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

.marketplace-suggestion-unavailable {
  display: flex;
  margin: 0;
  gap: var(--openbot-space-2);
  border-top: 1px solid var(--openbot-border);
  padding-top: var(--openbot-space-3);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.marketplace-suggestion-unavailable svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  margin-top: var(--openbot-space-0-5);
  color: var(--openbot-text-muted);
}

.marketplace-suggestion-dismissed {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}


/* /@fs//app/packages/ui/src/features/conversation/styles/open-waits.css */
/*
 * Open waits: the "Waiting for replies" card, with a two-line row for each wait and a menu at the
 * row end.
 */

.open-waits .task-list-title-name {
  font-weight: var(--openbot-weight-medium);
}

.open-waits .task-list-count {
  color: var(--openbot-warning-text);
  font-size: var(--openbot-text-sm);
}

.open-waits-row {
  align-items: flex-start;
}

.open-waits-row-text {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: var(--openbot-space-0-5);
}

.open-waits-row-note {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.open-waits-row-meta {
  display: flex;
  min-width: 0;
  gap: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  white-space: nowrap;
}

.open-waits-row-request {
  overflow: hidden;
  min-width: 0;
  color: var(--openbot-text-dim);
  text-overflow: ellipsis;
}

[data-wait-state="woken"] .open-waits-row-state {
  color: var(--openbot-warning-text);
}

[data-wait-state="resuming"] .open-waits-row-state {
  color: var(--openbot-text-primary);
  animation: task-list-pulse 1.6s ease-in-out infinite;
  animation-play-state: var(--task-list-play-state, running);
}

@media (prefers-reduced-motion: reduce) {
  [data-wait-state="resuming"] .open-waits-row-state {
    animation: none;
  }
}

.open-waits-menu {
  flex: 0 0 auto;
  align-self: flex-start;
  color: var(--openbot-text-muted);
}


/* /@fs//app/packages/ui/src/features/conversation/styles/header-controls.css */
.conversation-title {
  display: flex;
  height: var(--openbot-control-sm);
  align-items: center;
  gap: 6px;
  border-radius: var(--openbot-radius-sm);
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 2px 4px;
  text-align: left;
  transition: background var(--openbot-duration-hover) ease;
}

.conversation-title:hover {
  background: var(--openbot-hover);
}

.conversation-title h1 {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0;
}

.conversation-access-lock {
  display: inline-flex;
  flex: none;
  color: var(--openbot-text-muted);
}

.conversation-access-lock svg {
  width: 14px;
  height: 14px;
}

.conversation-header-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}

.provider-model-picker {
  position: relative;
  min-width: 0;
}

.provider-model-trigger {
  display: flex;
  width: max-content;
  /* Room for the effort after the model name. The model name shortens first. */
  max-width: 240px;
  height: 28px;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-overlay);
  padding: 0 9px 0 8px;
  color: var(--openbot-text-primary);
  cursor: pointer;
  box-shadow: inset 0 1px var(--openbot-hover);
  transition:
    border-color var(--openbot-duration-hover) ease,
    background-color var(--openbot-duration-hover) ease,
    transform var(--openbot-duration-fast) cubic-bezier(0.23, 1, 0.32, 1);
}

.provider-model-trigger:hover:not(:disabled),
.provider-model-trigger[aria-expanded="true"] {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-surface);
}

.provider-model-trigger:active:not(:disabled) {
  transform: scale(0.97);
}

.provider-model-trigger:focus-visible,
.provider-model-rail-button:focus-visible,
.provider-model-option:focus-visible {
  outline: 1px solid var(--openbot-accent);
  outline-offset: 1px;
}

.provider-model-trigger:disabled {
  opacity: 0.48;
  cursor: default;
}

.provider-model-trigger-value {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}

.provider-model-trigger-name {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  font-size: var(--openbot-text-md);
  font-weight: 470;
  line-height: 18px;
}

.provider-model-trigger-effort {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: 18px;
  white-space: nowrap;
}

.provider-model-trigger-effort::before {
  margin-right: var(--openbot-space-1-5);
  content: "·";
}

/* The Fast chip gets its own room, so the model name keeps the width it has without it. */
.provider-model-trigger:has(.provider-model-trigger-fast) {
  max-width: 296px;
}

.provider-model-trigger-fast svg {
  width: 12px;
  height: 12px;
  margin-right: var(--openbot-space-0-5);
  stroke-width: var(--openbot-icon-stroke);
}

/* An email can be long: the account gives way before the model name does. */
.provider-model-trigger-account {
  min-width: 0;
  max-width: 160px;
  flex-shrink: 1;
  overflow: hidden;
}

/* SwapLabel: the old text sits on top of the new text while both animate. */
.ui-swap {
  position: relative;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
}

.ui-swap > span,
.ui-swap-digits {
  display: inline-block;
}

.ui-swap > .ui-swap-leaving {
  position: absolute;
  top: 0;
  left: 0;
}

/* The trigger swap is mostly a blur. The box does not clip it: a clip cuts the blur and the old
 * text with a hard edge while the box eases to the new width. The name clips itself instead. */
.provider-model-trigger-value .ui-swap {
  overflow: visible;
}

/* A name without SwapLabel, such as a static copy of the trigger, clips itself. */
.provider-model-trigger-name:not(.ui-swap) {
  overflow: hidden;
  text-overflow: ellipsis;
}

.provider-model-trigger-name > span:not(.ui-swap-leaving) {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.provider-model-trigger-name > .ui-swap-leaving {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A newly chosen provider's mark springs in. */
.provider-model-trigger-mark {
  display: flex;
  flex: 0 0 auto;
}

.provider-model-trigger-mark[data-entering] {
  animation: provider-model-mark-in 420ms cubic-bezier(0.34, 1.36, 0.64, 1) both;
}

@keyframes provider-model-mark-in {
  from {
    opacity: 0;
    scale: 0.6;
    filter: blur(2px);
  }
}

.provider-model-picker-field {
  width: 100%;
}

.provider-model-trigger-field {
  width: 100%;
  max-width: none;
  height: 44px;
  gap: 8px;
  border: 0;
  border-radius: 0;
  background: var(--openbot-hover);
  padding: 0 11px 0 12px;
  box-shadow: none;
}

.provider-model-trigger-field:hover:not(:disabled),
.provider-model-trigger-field[aria-expanded="true"] {
  border-color: transparent;
  background: var(--openbot-border);
}

.provider-model-trigger-field .provider-model-field-label {
  flex: 0 0 auto;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: 400;
  line-height: 17px;
}

.provider-model-trigger-field .provider-model-trigger-value {
  max-width: calc(100% - 84px);
  margin-left: auto;
  justify-content: flex-end;
}

.provider-model-mark {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  overflow: visible;
  fill: var(--openbot-provider-current);
}

.provider-model-mark-large {
  width: 19px;
  height: 19px;
  flex-basis: 19px;
}

.provider-model-chevron {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  fill: none;
  stroke: var(--openbot-text-muted);
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--openbot-duration-normal) ease;
}

.provider-model-trigger[aria-expanded="true"] .provider-model-chevron {
  transform: rotate(180deg);
}

.provider-model-popover {
  --provider-model-rail-bg: color-mix(in srgb, var(--openbot-bg-notch) 22%, var(--ui-menu-bg));
  --provider-model-segment-radius: calc(var(--ui-menu-item-radius) - var(--openbot-space-0-5));
  position: relative;
  z-index: var(--openbot-layer-dropdown);
  width: min(360px, calc(100vw - 24px));
  min-height: 226px;
  overflow: hidden;
  border: 0;
  border-radius: var(--ui-menu-radius);
  background: var(--ui-menu-bg);
  color: var(--openbot-text-primary);
  box-shadow: var(--ui-menu-panel-shadow);
  transform-origin: var(--kb-popover-content-transform-origin);
  animation: ui-menu-in var(--ui-menu-duration) var(--ui-menu-ease) both;
}

/* The copy that ContentExitMotion leaves in the place of the closed popover plays the exit. */
.provider-model-popover:not([data-expanded]) {
  animation: ui-menu-out var(--ui-menu-duration) var(--ui-menu-ease) both;
}

.provider-model-layout {
  max-height: min(520px, calc(100dvh - 100px), var(--kb-popper-content-available-height, 520px));
  display: flex;
  width: 100%;
  min-height: inherit;
}

.provider-model-rail {
  display: flex;
  width: 52px;
  flex: 0 0 52px;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-1);
  border-right: 1px solid var(--openbot-border);
  background: var(--provider-model-rail-bg);
  padding: 9px 7px;
}

.provider-model-rail-tabs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-1);
}

/* Opens the provider settings, to connect a provider that the rail leaves out. */
.provider-model-rail-add {
  color: var(--openbot-text-muted);
}

.provider-model-rail-add:hover {
  color: var(--openbot-text-primary);
}

.provider-model-rail-tooltip-trigger {
  display: flex;
}

.provider-model-rail-tooltip {
  z-index: var(--openbot-layer-tooltip);
  display: flex;
  max-width: min(240px, calc(100vw - 16px));
  flex-direction: column;
  gap: var(--openbot-space-0-5);
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-surface-raised);
  box-shadow: var(--openbot-shadow-raised);
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-md);
  overflow-wrap: anywhere;
  pointer-events: none;
}

.provider-model-rail-tooltip small {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
}

.provider-model-rail-button {
  position: relative;
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  border: 0;
  border-radius: var(--ui-menu-item-radius);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition:
    background-color var(--openbot-duration-hover) ease,
    opacity var(--openbot-duration-hover) ease;
}

.provider-model-rail-button:hover {
  background: var(--ui-menu-item-hover);
}

.provider-model-rail-button-selected {
  background: color-mix(in srgb, var(--openbot-text-primary) 8%, transparent);
  box-shadow: inset 0 0 0 1px var(--ui-menu-edge);
}

.provider-model-rail-button .provider-model-mark {
  opacity: 0.48;
}

.provider-model-rail-button:not(.provider-model-rail-button-selected, .provider-model-rail-button-unavailable):hover
  .provider-model-mark {
  opacity: 0.8;
}

.provider-model-rail-button-selected .provider-model-mark {
  fill: var(--openbot-text-primary);
  opacity: 1;
}

/* A provider that cannot run: a dim mark and a dot. The dot uses the warning color when the user can
 * fix it here (sign in, update), and the muted text color otherwise. The tooltip names the state. */
.provider-model-rail-button-unavailable .provider-model-mark {
  opacity: 0.28;
}

.provider-model-rail-button-unavailable:is(:hover, .provider-model-rail-button-selected) .provider-model-mark {
  opacity: 0.6;
}

.provider-model-rail-button:is(
  [data-state="not-installed"],
  [data-state="sign-in-required"],
  [data-state="outdated"],
  [data-state="error"]
)::after {
  position: absolute;
  top: var(--openbot-space-1-5);
  right: var(--openbot-space-1-5);
  width: 6px;
  height: 6px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-muted);
  box-shadow: 0 0 0 2px var(--provider-model-rail-bg);
  content: "";
}

.provider-model-rail-button:is([data-state="sign-in-required"], [data-state="outdated"])::after {
  background: var(--openbot-warning);
}

/* The place of an account in its provider's list, when the provider has more than one. */
.provider-model-rail-account {
  position: absolute;
  right: 2px;
  bottom: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control);
  box-shadow: 0 0 0 2px var(--provider-model-rail-bg);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.provider-model-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  flex: 1;
  padding: var(--ui-menu-padding);
}

.provider-model-panel:not([data-selected]) {
  display: none;
}

.provider-model-heading {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--openbot-space-2);
  /* The right inset lives on the text, not the row, so the action button can line its right edge up
   * with the search field and the model rows below it. */
  padding: var(--openbot-space-1-5) 0 var(--openbot-space-2) var(--ui-menu-inset);
}

.provider-model-heading-text {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 4px;
}

/* The icons are raw lucide exports with no intrinsic size, and only the icon-only button sizes
 * carry a rule, so an icon beside a label needs one here to match every other button. */
.provider-model-heading .ui-button,
.provider-model-empty .ui-button-variant-outline {
  border-color: transparent;
  border-radius: var(--ui-menu-item-radius);
  background: var(--ui-menu-item-hover);
  box-shadow: none;
  color: var(--openbot-text-primary);
}

.provider-model-heading .ui-button:hover,
.provider-model-empty .ui-button-variant-outline:hover {
  background: color-mix(in srgb, var(--openbot-text-primary) 10%, transparent);
}

.provider-model-heading .ui-button svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}

.provider-model-heading strong,
.provider-model-heading span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The runtime status: a filled block with no border, as the search field. */
.provider-model-empty {
  display: grid;
  justify-items: start;
  gap: var(--openbot-space-2);
  margin-bottom: var(--ui-menu-padding);
  border: 0;
  border-radius: var(--ui-menu-item-radius);
  background: var(--ui-menu-item-hover);
  padding: var(--openbot-space-2) var(--ui-menu-inset);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: 18px;
}

.provider-model-heading strong {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: 620;
  line-height: 20px;
}

.provider-model-heading span {
  margin-top: 1px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
}

.provider-model-empty > .ui-progress {
  justify-self: stretch;
}

.provider-model-list {
  display: grid;
  gap: 0;
}

.provider-model-effort {
  flex-shrink: 0;
  display: flex;
  /* The effort segments go to a line of their own when they do not fit beside the label. */
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-1) 12px;
  /* The separator runs to both edges of the panel, as in the menus. */
  margin: var(--ui-menu-padding) calc(var(--ui-menu-padding) * -1) 0;
  border-top: 1px solid var(--openbot-border);
  padding: var(--ui-menu-padding) var(--ui-menu-padding) 0 calc(var(--ui-menu-padding) + var(--ui-menu-inset));
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 17px;
}

/* The effort and auto-approve rows are one group under one separator. */
.provider-model-effort + .provider-model-effort {
  margin-top: 0;
  border-top: 0;
  padding-top: var(--openbot-space-1);
}

/* Each row is as high as the effort control, so the switch and the segments have room. */
.provider-model-effort > :first-child {
  display: flex;
  min-height: var(--openbot-control-md);
  align-items: center;
}

.provider-model-effort-select {
  width: 128px;
}

/* Effort as segments, in the SlidingTabs look and timing. */
.provider-model-effort-segments {
  --provider-model-effort-duration: 250ms;
  --provider-model-effort-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  display: flex;
  /* On a line of their own, the segments can shrink. A long label then ends in an ellipsis. */
  flex: 1 1 auto;
  min-width: 0;
  gap: var(--openbot-space-0-5);
  border-radius: var(--ui-menu-item-radius);
  background: var(--ui-menu-item-hover);
  padding: var(--openbot-space-0-5);
}

.provider-model-effort-segment {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}

.provider-model-effort-segment-control {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  min-width: 0;
  height: calc(var(--openbot-control-md) - 2 * var(--openbot-space-0-5));
  align-items: center;
  justify-content: center;
  border-radius: var(--provider-model-segment-radius);
  padding-inline: var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--provider-model-effort-duration) var(--provider-model-effort-ease);
}

.provider-model-effort-segment-control label {
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: inherit;
}

.provider-model-effort-segment-control:hover:not([data-disabled]),
.provider-model-effort-segment-control[data-checked] {
  color: var(--openbot-text-primary);
}

.provider-model-effort-segment:has(:focus-visible) .provider-model-effort-segment-control {
  box-shadow: 0 0 0 1px var(--openbot-text-muted);
}

.provider-model-effort-segment-control[data-disabled] {
  opacity: 0.5;
  cursor: default;
}

/* The chosen segment's background. EffortSegments places it, and it slides to a new choice. */
.provider-model-effort-pill {
  position: absolute;
  top: var(--openbot-space-0-5);
  left: 0;
  z-index: 0;
  width: 0;
  height: calc(var(--openbot-control-md) - 2 * var(--openbot-space-0-5));
  border-radius: var(--provider-model-segment-radius);
  background: color-mix(in srgb, var(--openbot-text-primary) 12%, transparent);
  box-shadow: inset 0 1px 0 var(--ui-menu-highlight);
  pointer-events: none;
  transition:
    transform var(--provider-model-effort-duration) var(--provider-model-effort-ease),
    width var(--provider-model-effort-duration) var(--provider-model-effort-ease);
}

.provider-model-effort-pill[data-initializing] {
  transition: none;
}

.provider-model-effort-segments:has([data-disabled]) .provider-model-effort-pill {
  opacity: 0.5;
}

.provider-model-effort-select .ui-select-trigger {
  border-color: transparent;
  border-radius: var(--ui-menu-item-radius);
  background: var(--ui-menu-item-hover);
  box-shadow: none;
}

.provider-model-effort-select .ui-select-trigger:is(:hover, [data-expanded]) {
  background: color-mix(in srgb, var(--openbot-text-primary) 10%, transparent);
}

.provider-model-effort-content {
  border-radius: var(--ui-menu-radius);
  background: var(--ui-menu-bg);
  box-shadow: var(--ui-menu-panel-shadow);
  animation: ui-menu-in var(--ui-menu-duration) var(--ui-menu-ease) both;
}

.provider-model-effort-content .ui-select-listbox {
  padding: var(--ui-menu-padding);
}

.provider-model-effort-content .ui-select-item {
  border-radius: var(--ui-menu-item-radius);
  padding-block: var(--openbot-space-1-5);
  padding-left: var(--ui-menu-inset);
  font-size: var(--openbot-text-md);
}

.provider-model-effort-content .ui-select-item[data-highlighted] {
  background: var(--ui-menu-item-hover);
}

/* The check of the selected model is a filled circle on the left, as in the menus. */
.provider-model-option {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 0;
  border-radius: var(--ui-menu-item-radius);
  background: transparent;
  padding: var(--openbot-space-1-5) var(--ui-menu-inset) var(--openbot-space-1-5)
    calc(var(--ui-menu-inset) + var(--openbot-icon-md) + var(--openbot-space-2));
  color: var(--openbot-text-primary);
  cursor: pointer;
  text-align: left;
  transition:
    background-color var(--openbot-duration-hover) ease,
    color var(--openbot-duration-hover) ease;
}

.provider-model-option::before {
  position: absolute;
  top: 50%;
  left: var(--ui-menu-inset);
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--openbot-text-primary) 22%, transparent);
  border-radius: var(--openbot-radius-pill);
  content: "";
  translate: 0 -50%;
  transition:
    background-color var(--ui-menu-duration) ease-out,
    border-color var(--ui-menu-duration) ease-out;
}

.provider-model-option-selected::before {
  border-color: transparent;
  background: var(--openbot-text-primary);
}

.provider-model-option:hover:not(:disabled),
.provider-model-option:focus-visible {
  background: var(--ui-menu-item-hover);
}

.provider-model-option:disabled {
  color: var(--openbot-text-dim);
  cursor: not-allowed;
}

.provider-model-option-name {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.provider-model-option-name > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--openbot-text-md);
  line-height: 18px;
}

.provider-model-option-name small {
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-pill);
  background: color-mix(in srgb, var(--openbot-text-primary) 7%, transparent);
  padding: 1px var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: 500;
  line-height: 15px;
}

/* The tick sits in the filled circle, cut out of it in the panel color. */
.provider-model-check {
  position: absolute;
  top: 50%;
  left: calc(var(--ui-menu-inset) + (var(--openbot-icon-md) - var(--openbot-icon-sm)) / 2);
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  fill: none;
  stroke: var(--ui-menu-bg);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.5;
  translate: 0 -50%;
}

@media (max-width: 720px) {
  /* A form field keeps the width of its row. */
  .provider-model-trigger:not(.provider-model-trigger-field) {
    max-width: 148px;
  }

  /* A narrow header keeps the model name; the label and the title still name the effort. */
  .provider-model-trigger-effort {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .provider-model-chevron,
  .provider-model-trigger,
  .provider-model-rail-button,
  .provider-model-option,
  .provider-model-option::before,
  .provider-model-effort-segment-control,
  .provider-model-effort-pill {
    transition: none;
  }

  .provider-model-popover,
  .provider-model-popover:not([data-expanded]),
  .provider-model-effort-content {
    animation: none;
  }

  .provider-model-trigger-mark[data-entering] {
    animation: none;
  }
}

.computer-button-agent-active {
  border-color: var(--openbot-accent);
  background: var(--openbot-accent-soft);
  box-shadow: 0 0 10px var(--openbot-accent-strong);
  color: var(--openbot-accent);
}

.computer-control-dot {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 5px;
  height: 5px;
  border: 1px solid var(--openbot-bg-canvas);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
  animation: browser-control-pulse 1.25s ease-in-out infinite;
}

.browser-toolbar-button:active:not(:disabled) {
  transform: scale(0.92);
  transition-duration: var(--openbot-duration-fast);
}


/* /@fs//app/packages/ui/src/features/conversation/styles/timeline.css */
.conversation-scroll {
  min-height: 0;
  flex: 1;
  overflow-anchor: none;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 8px 12px var(--openbot-space-6);
}

.virtual-chat-list {
  position: relative;
  width: 100%;
}

.virtual-chat-row {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  padding-top: var(--openbot-chat-entry-gap);
}

/* Rows the timeline marks as grouped (marker runs, same-sender messages) sit tighter. */
.virtual-chat-row[data-grouped] {
  padding-top: var(--openbot-chat-marker-gap);
}

.virtual-chat-row > .chat-action-marker + .message-entry {
  margin-top: var(--openbot-chat-marker-gap);
}

.virtual-chat-list-static .virtual-chat-row {
  position: relative;
  inset: auto;
}

/*
 * The mark on a message that a quote opened. The band reaches the edges of the scroll area and
 * leaves out the gap above the row; it holds, then fades out.
 */
.virtual-chat-row[data-reply-flash] {
  isolation: isolate;
}

.virtual-chat-row[data-reply-flash]::before {
  position: absolute;
  z-index: -1;
  inset: var(--openbot-chat-entry-gap) -12px 0;
  background: var(--openbot-accent-soft);
  content: "";
  opacity: 0;
  pointer-events: none;
  animation: reply-flash 1.6s var(--openbot-ease-out);
}

.virtual-chat-row[data-grouped][data-reply-flash]::before {
  top: var(--openbot-chat-marker-gap);
}

@keyframes reply-flash {
  0%,
  45% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.conversation-history-status {
  display: flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

/*
 * The way back to the newest message. The wrapper carries the pill, because the count turns one
 * round button into two buttons the reader reads as one control, and only the wrapper knows how
 * wide that is. The circle becomes a pill in one step: `44px` to `auto` cannot be animated, and a
 * scale would fight the centring transform.
 */
.scroll-to-latest {
  position: sticky;
  z-index: 3;
  top: calc(100% - 58px);
  left: 50%;
  display: flex;
  width: max-content;
  height: 44px;
  align-items: center;
  margin-bottom: -44px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface-raised);
  box-shadow:
    0 8px 24px var(--openbot-shadow-popover-ambient),
    inset 0 0 0 1px var(--openbot-shadow-ring);
  color: var(--openbot-text-primary);
  transform: translateX(-50%);
  transition: background-color var(--openbot-duration-hover) ease;
}

/*
 * With a count the pill wears the colours of the unread banner: it is the same news. It is also
 * lower than the round arrow, and the label makes it wider, so the bottom edge is held where the
 * circle had it: `100% - 58px` plus `44px` is the same line as `100% - 50px` plus `36px`.
 */
.scroll-to-latest:is([data-new-messages], [data-reply-return]) {
  top: calc(100% - 50px);
  height: 36px;
  margin-bottom: -36px;
}

.scroll-to-latest[data-new-messages] {
  border-color: transparent;
  background: var(--openbot-unread-surface);
  color: var(--openbot-unread-text);
}

.scroll-to-latest-button {
  display: grid;
  width: 44px;
  height: 100%;
  place-items: center;
  border: 0;
  border-radius: inherit;
  background: none;
  color: inherit;
  transition:
    background-color var(--openbot-duration-hover) ease,
    transform var(--openbot-duration-fast) cubic-bezier(0.23, 1, 0.32, 1);
}

/*
 * One padding on all four sides: `space-1-5` from the pill edge to the arrow, to the round dismiss
 * mark, and above and below both, because each is `22px` tall inside a `36px` pill with a `1px`
 * border. `space-2` divides arrow from label and label from mark.
 */
.scroll-to-latest:is([data-new-messages], [data-reply-return]) .scroll-to-latest-button {
  width: auto;
  grid-auto-flow: column;
  gap: var(--openbot-space-2);
  padding-inline: var(--openbot-space-1-5) var(--openbot-space-2);
}

.scroll-to-latest-count {
  font-size: var(--openbot-text-sm);
  font-weight: 620;
  white-space: nowrap;
}

/*
 * The whole height stays clickable, but nothing here is painted: a highlight on this button would
 * fill the end of the pill. The hover and focus marks sit on the icon below, which is round, and
 * that round mark is what separates the two halves. No rule divides them.
 */
.scroll-to-latest-dismiss {
  display: grid;
  height: 100%;
  place-items: center;
  border: 0;
  background: none;
  padding-inline: 0 var(--openbot-space-1-5);
  color: inherit;
  transition: transform var(--openbot-duration-fast) cubic-bezier(0.23, 1, 0.32, 1);
}

.scroll-to-latest-button svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}

/* The mark is as tall as the arrow, so one padding can hold both away from every edge. */
.scroll-to-latest-dismiss svg {
  box-sizing: content-box;
  width: 14px;
  height: 14px;
  border-radius: var(--openbot-radius-pill);
  padding: var(--openbot-space-1);
  transition: background-color var(--openbot-duration-hover) ease;
}

/* The ring follows the pill: an offset ring would draw a circle around one half of it. */
.scroll-to-latest-button:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: -2px;
}

/* The dismiss ring follows its round icon mark, for the same reason its hover does. */
.scroll-to-latest-dismiss:focus-visible {
  outline: none;
}

.scroll-to-latest-dismiss:focus-visible svg {
  outline: 2px solid var(--openbot-border-focus);
}

.scroll-to-latest[data-new-messages] .scroll-to-latest-button:focus-visible {
  outline-color: var(--openbot-unread-text);
}

.scroll-to-latest[data-new-messages] .scroll-to-latest-dismiss:focus-visible svg {
  outline-color: var(--openbot-unread-text);
}

/* The way back to a reply has a smaller arrow, so the label reads first. */
.scroll-to-latest-button .scroll-to-latest-reply-icon {
  width: 18px;
  height: 18px;
}

.scroll-to-latest-button:active,
.scroll-to-latest-dismiss:active {
  transform: scale(0.96);
}

@media (hover: hover) and (pointer: fine) {
  /* These are shared ghost buttons, whose own hover is written with two `:not()`s and so outweighs
     a plain class. Each rule that has to replace it is matched at the same strength, or its own
     hover paints over the pill and repaints the text for a light background. */
  .scroll-to-latest-button:hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-bg-control-active);
    color: inherit;
  }

  /* The dismiss box itself stays unpainted: its mark is the round one on the icon. */
  .scroll-to-latest-dismiss:hover:not(:disabled):not([data-disabled]) {
    background: none;
    color: inherit;
  }

  .scroll-to-latest-dismiss:hover svg {
    background: var(--openbot-bg-control-active);
  }

  /* The pill has one hover, on the dismiss icon. Its body is a wide target and needs no mark. */
  .scroll-to-latest:is([data-new-messages], [data-reply-return])
  .scroll-to-latest-button:hover:not(:disabled):not([data-disabled]) {
    background: none;
  }

  .scroll-to-latest[data-new-messages] .scroll-to-latest-dismiss:hover svg {
    background: color-mix(in srgb, var(--openbot-unread-text) 18%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-to-latest,
  .scroll-to-latest-button,
  .scroll-to-latest-dismiss,
  .scroll-to-latest-dismiss svg {
    transition: none;
  }

  .scroll-to-latest-button:active,
  .scroll-to-latest-dismiss:active {
    transform: none;
  }
}

.unread-messages-banner {
  position: relative;
  display: flex;
  min-height: 32px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  border-radius: 0 0 var(--openbot-radius-md) var(--openbot-radius-md);
  background: var(--openbot-unread-surface);
  padding: 0 12px;
  color: var(--openbot-unread-text);
  font-size: var(--openbot-text-sm);
  font-weight: 620;
  line-height: 16px;
  transition: background-color var(--openbot-duration-hover) var(--openbot-ease-out);
}

.unread-messages-banner button {
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  color: inherit;
}

.unread-messages-jump {
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0 12px;
  font-size: var(--openbot-text-sm);
  font-weight: 620;
  line-height: 16px;
  text-align: left;
}

.unread-messages-mark-read {
  position: relative;
  z-index: 1;
  margin-left: auto;
  padding: 0;
  font-size: var(--openbot-text-sm);
  font-weight: 680;
  line-height: 14px;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: transform var(--openbot-duration-fast) cubic-bezier(0.23, 1, 0.32, 1);
}

.unread-messages-mark-read-label {
  display: inline-flex;
  align-items: center;
  border-radius: var(--openbot-radius-sm);
  padding: 3px 5px;
  transition: background-color var(--openbot-duration-hover) var(--openbot-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .unread-messages-banner:hover {
    background-color: color-mix(in srgb, var(--openbot-unread-surface) 88%, var(--openbot-unread-text));
  }

  .unread-messages-banner .ui-button:hover:not(:disabled):not([data-disabled]) {
    background: transparent;
    color: var(--openbot-unread-text);
  }

  .unread-messages-banner
    .unread-messages-mark-read:hover:not(:disabled):not([data-disabled])
    .unread-messages-mark-read-label {
    background: color-mix(in srgb, var(--openbot-unread-text) 12%, transparent);
  }
}

.unread-messages-banner button:focus-visible {
  outline: 2px solid var(--openbot-unread-text);
  outline-offset: 1px;
}

.unread-messages-mark-read:active:not(:disabled) {
  transform: scale(0.97);
}

.unread-messages-banner button:disabled {
  opacity: 0.55;
}

.unread-messages-divider {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  margin: var(--openbot-space-1) 0 var(--openbot-space-2);
  color: var(--openbot-unread-surface);
  font-size: var(--openbot-text-sm);
  font-weight: 720;
  letter-spacing: 0.08em;
  line-height: 12px;
}

.unread-messages-divider hr {
  width: 100%;
  height: 1px;
  flex: 1;
  border: 0;
  background: var(--openbot-unread-surface);
}

.unread-messages-divider span {
  flex: 0 0 auto;
}

.time-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 656px;
  height: 24px;
  margin: 0 auto;
  padding: 4px 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
  text-align: center;
}


/* /@fs//app/packages/ui/src/features/conversation/styles/scroll-rail.css */
/*
 * Where the reader is in a long chat, on the right edge of the transcript. The public site's reading
 * progress draws the same rail for its articles.
 *
 * One segment per message the reader wrote, as long as the message and the replies under it. The
 * part the reader has passed fills in a muted neutral, and the segment they are in glows at the point
 * they have reached. Pointing at the rail brings in the messages as titles through a blur, over a
 * scrim with no edge.
 *
 * The anchor sticks to the top of the scroll container with the viewport's height, and its negative
 * margin gives that height back, so the transcript under it does not move.
 */
.chat-scroll-rail {
  /* A muted neutral: a colour pulls the eye while the reader reads. */
  --chat-scroll-rail-accent: var(--openbot-text-muted);
  --chat-scroll-rail-track: color-mix(in srgb, var(--openbot-text-primary) 10%, transparent);
  --chat-scroll-rail-glow: color-mix(in srgb, var(--chat-scroll-rail-accent) 60%, transparent);
  --chat-scroll-rail-ease: var(--openbot-ease-out);
  --chat-scroll-rail-duration: var(--openbot-duration-island-content);
  --chat-scroll-rail-quick: var(--openbot-duration-overlay);
  --chat-scroll-rail-blur: 8px;

  position: sticky;
  z-index: 3;
  top: 0;
  pointer-events: none;
}

/* Only the bars take the pointer until the rail opens, so the messages beside it stay selectable.
   The nav reaches into the container's side padding, so the bars stand beside the messages. */
.chat-scroll-rail-nav {
  position: absolute;
  top: 50%;
  right: calc(-1 * var(--chat-scroll-rail-inset, 0px));
  width: min(260px, 70%);
  height: min(64%, 600px);
  display: flex;
  flex-direction: column;
  padding: var(--openbot-space-3) 0;
  transform: translateY(-50%);
}

.chat-scroll-rail-nav:hover,
.chat-scroll-rail-nav:has(:focus-visible) {
  pointer-events: auto;
}

/* A scrim in the transcript colour that blurs the messages under the titles, with no edge of its own.
   It darkens and blurs only where the titles are, so they stay legible over a wide message. Both
   masks fade it out: at the top and bottom, and on the left before the titles start. The blur is set
   only while the rail is open, so a scroll does not filter the transcript under a hidden scrim. */
.chat-scroll-rail-surface {
  position: absolute;
  inset: calc(-1 * var(--openbot-space-8)) 0 calc(-1 * var(--openbot-space-8)) calc(-2 * var(--openbot-space-8));
  background: color-mix(in srgb, var(--openbot-bg-canvas) 80%, transparent);
  mask-image:
    linear-gradient(
      to bottom,
      transparent,
      var(--openbot-text-primary) var(--openbot-space-8),
      var(--openbot-text-primary) calc(100% - var(--openbot-space-8)),
      transparent
    ),
    linear-gradient(to right, transparent, var(--openbot-text-primary) calc(2 * var(--openbot-space-8)));
  mask-composite: intersect;
  opacity: 0;
  transition: opacity var(--openbot-duration-slow) ease;
}

.chat-scroll-rail-eyebrow {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin: 0 0 var(--openbot-space-3);
  padding: 0 var(--openbot-space-4) 0 var(--openbot-space-4);
  color: var(--openbot-text-dim);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity var(--openbot-duration-slow) ease;
}

/* The digits of the current section lift in and sharpen, as in the task list. */
.chat-scroll-rail-count {
  --digit-dur: var(--openbot-duration-overlay);
  --digit-distance: var(--openbot-space-1);
  --digit-blur: var(--openbot-space-0-5);
  --digit-ease: var(--openbot-ease-out);

  color: var(--chat-scroll-rail-accent);
  font-variant-numeric: tabular-nums;
}

/* Each section keeps room for its title. A chat with more sections than the rail holds scrolls the
   track inside the rail, so every section stays in reach; the track keeps the current one in view.
   The reading head scrolls with the list. */
.chat-scroll-rail-track {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.chat-scroll-rail-list {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chat-scroll-rail-item {
  flex-basis: 0;
  min-height: 22px;
  display: flex;
}

.chat-scroll-rail .chat-scroll-rail-link {
  flex: 1;
  min-width: 0;
  height: auto;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  gap: var(--openbot-space-3);
  padding: 0 0 0 var(--openbot-space-4);
  /* The button's border would move the bars out of the side padding. */
  border: 0;
  border-radius: 0;
  color: var(--openbot-text-muted);
  font-weight: inherit;
  text-decoration: none;
  outline: none;
}

.chat-scroll-rail-item[data-state="read"] .chat-scroll-rail-link {
  color: var(--openbot-text-secondary);
}

.chat-scroll-rail-item[data-state="active"] .chat-scroll-rail-link,
.chat-scroll-rail .chat-scroll-rail-link:hover,
.chat-scroll-rail .chat-scroll-rail-link:focus-visible {
  color: var(--openbot-text-primary);
  text-decoration: none;
}

.chat-scroll-rail-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  margin-top: -3px;
  font-size: var(--openbot-text-sm);
  line-height: 18px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0;
  filter: blur(var(--chat-scroll-rail-blur));
  transform: translateX(var(--openbot-space-2));
  transition:
    color var(--openbot-duration-slow) ease,
    opacity var(--openbot-duration-slow) ease,
    filter var(--openbot-duration-slow) ease,
    transform var(--chat-scroll-rail-quick) var(--chat-scroll-rail-ease);
}

.chat-scroll-rail-link:focus-visible .chat-scroll-rail-label {
  text-decoration: underline;
  text-decoration-color: var(--chat-scroll-rail-accent);
  text-underline-offset: 4px;
}

/* A hit area wider than the 2px bar it holds. The bars always take the pointer, so the hit area stays
   inside the container's side padding and does not cover the edge of a message. The bar is 3-9px
   from the edge, inside the 12px padding the narrowest transcript keeps. */
.chat-scroll-rail-bar {
  position: relative;
  width: clamp(12px, var(--chat-scroll-rail-inset, 20px), 20px);
  flex: none;
  padding-bottom: var(--openbot-space-1);
}

.chat-scroll-rail .chat-scroll-rail-bar {
  pointer-events: auto;
}

.chat-scroll-rail-bar::before,
.chat-scroll-rail-fill {
  content: "";
  position: absolute;
  top: 0;
  right: 5px;
  bottom: var(--openbot-space-1);
  width: 2px;
  border-radius: var(--openbot-radius-pill);
  transition:
    width var(--chat-scroll-rail-quick) var(--chat-scroll-rail-ease),
    right var(--chat-scroll-rail-quick) var(--chat-scroll-rail-ease),
    background-color var(--chat-scroll-rail-quick) ease;
}

.chat-scroll-rail-bar::before {
  background: var(--chat-scroll-rail-track);
}

.chat-scroll-rail-fill {
  background: var(--chat-scroll-rail-accent);
  transform: scaleY(var(--chat-scroll-rail-fill, 0));
  transform-origin: top center;
}

.chat-scroll-rail-item[data-state="active"] .chat-scroll-rail-bar::before,
.chat-scroll-rail-item[data-state="active"] .chat-scroll-rail-fill {
  right: 4.5px;
  width: 3px;
}

.chat-scroll-rail-item[data-state="active"] .chat-scroll-rail-fill {
  box-shadow: 0 0 10px var(--chat-scroll-rail-glow);
}

/* The reading head: where the reader is inside the current section. One head for the whole list, so
   it runs from section to section with the place. */
.chat-scroll-rail-head {
  position: absolute;
  top: 0;
  right: 3px;
  width: 6px;
  height: 6px;
  border-radius: var(--openbot-radius-pill);
  background: var(--chat-scroll-rail-accent);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--chat-scroll-rail-accent) 18%, transparent),
    0 0 12px var(--chat-scroll-rail-glow);
  pointer-events: none;
  transform: translateY(
    calc(
      var(--chat-scroll-rail-head-top) +
      (var(--chat-scroll-rail-head-length) - var(--openbot-space-1)) *
      var(--chat-scroll-rail-fill, 0) -
      50%
    )
  );
}

.chat-scroll-rail-nav:hover .chat-scroll-rail-surface,
.chat-scroll-rail-nav:has(:focus-visible) .chat-scroll-rail-surface {
  backdrop-filter: blur(var(--openbot-space-4));
  opacity: 1;
  transition: opacity var(--openbot-duration-overlay) ease;
}

.chat-scroll-rail-nav:hover .chat-scroll-rail-eyebrow,
.chat-scroll-rail-nav:has(:focus-visible) .chat-scroll-rail-eyebrow {
  opacity: 1;
}

/* The titles come in one after another, but a long list does not make the reader wait: the delay
   stops growing after the first twelve. */
.chat-scroll-rail-nav:hover .chat-scroll-rail-label,
.chat-scroll-rail-nav:has(:focus-visible) .chat-scroll-rail-label {
  --chat-scroll-rail-delay: calc(min(var(--chat-scroll-rail-index, 0), 12) * 18ms);

  opacity: 1;
  filter: blur(0);
  transform: none;
  transition:
    color var(--openbot-duration-slow) ease,
    opacity var(--chat-scroll-rail-quick) ease var(--chat-scroll-rail-delay),
    filter var(--chat-scroll-rail-quick) ease var(--chat-scroll-rail-delay),
    transform var(--chat-scroll-rail-duration) var(--chat-scroll-rail-ease) var(--chat-scroll-rail-delay);
}

/* The rules above name their own transitions, which outrank the global reduced-motion rule, so the
   titles would still slide and blur in. */
@media (prefers-reduced-motion: reduce) {
  .chat-scroll-rail .chat-scroll-rail-nav *,
  .chat-scroll-rail .chat-scroll-rail-nav *::before,
  .chat-scroll-rail .chat-scroll-rail-nav *::after,
  .chat-scroll-rail-nav:hover .chat-scroll-rail-surface,
  .chat-scroll-rail-nav:has(:focus-visible) .chat-scroll-rail-surface,
  .chat-scroll-rail-nav:hover .chat-scroll-rail-label,
  .chat-scroll-rail-nav:has(:focus-visible) .chat-scroll-rail-label {
    transition: none;
  }
}


/* /@fs//app/packages/ui/src/features/conversation/styles/messages.css */
.message-entry {
  max-width: none;
}

.message-entry > .ui-message-content {
  max-width: 100%;
}

/* One row under the bubble, shown on hover, so an action takes one click. */
.message-action-row {
  display: flex;
  min-height: 24px;
  align-items: center;
  gap: var(--openbot-space-1);
  padding-inline: var(--openbot-space-1);
}

/* Keep the face beside the bubble, independent of the author name and footer height. */
.message-entry-with-author {
  display: grid;
  grid-template-columns: calc(var(--openbot-space-6) + var(--openbot-space-1)) minmax(0, 1fr);
  column-gap: var(--openbot-space-2);
  row-gap: var(--openbot-space-1);
}

.message-entry-with-author > .ui-message-content {
  display: contents;
}

.message-entry-with-author .message-shell {
  grid-column: 2;
  grid-row: 2;
}

.message-entry-with-author .message-action-row {
  grid-column: 2;
  grid-row: 3;
}

.message-entry-with-author .ui-message-footer {
  grid-column: 2;
  grid-row: 4;
}

.message-author-avatar {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  overflow: visible;
  border: 0;
  background: transparent;
}

.message-author-avatar .agent-avatar {
  --agent-avatar-optical-offset: -3px;

  width: var(--openbot-space-6);
  height: var(--openbot-space-6);
}

.message-author-avatar-button {
  width: 100%;
  height: 100%;
  padding: 0;
}

.message-author-avatar-button:hover:not(:disabled):not([data-disabled]) {
  background: transparent;
}

/*
 * The empty column under a face. A message that continues a run of messages by one author draws no
 * face, and without this spacer its bubble would step left, off the line the run started on. A chat
 * with one agent draws no faces at all, so it never asks for the column.
 */
.message-author-gutter {
  width: 28px;
  flex: 0 0 28px;
}

.message-author-name {
  grid-column: 2;
  grid-row: 1;
  padding-inline: var(--openbot-space-3);
  min-width: 0;
  color: var(--message-author-color, var(--openbot-text-muted));
  font-weight: var(--openbot-weight-regular);
  /* A long name with no space wraps instead of widening the row. */
  overflow-wrap: anywhere;
}

.message-author-name-button {
  height: auto;
  min-width: 0;
  margin-inline: calc(var(--openbot-space-1-5) * -1);
  padding: 0 var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-md);
  color: inherit;
  font: inherit;
  white-space: normal;
  text-align: start;
}

.message-author-name-button:hover:not(:disabled):not([data-disabled]),
.message-author-name-button:focus-visible {
  background: var(--openbot-hover);
  color: inherit;
}

/*
 * The keyframes alone hide a new row, so a row whose animation is off (reduced motion, which
 * Windows reports while its animation effects are off) still shows.
 */
.message-entry-animated {
  animation: message-in var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1) both;
}

.message-entry-agent {
  width: 100%;
}

.message-shell {
  display: flex;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  gap: 5px;
}

.message-entry-user .message-shell {
  justify-content: flex-end;
}

.message-actions {
  position: relative;
  z-index: 4;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--openbot-duration-hover) ease;
}

.message-time {
  padding-inline: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--openbot-duration-hover) ease;
}

.message-author-name > .message-time {
  padding-inline: 0;
}

.message-entry-user .message-action-row > .message-time {
  order: -1;
}

.message-entry:hover .message-actions,
.message-entry:focus-within .message-actions,
.message-actions-open {
  opacity: 1;
  pointer-events: auto;
}

.message-entry:hover .message-time,
.message-entry:focus-within .message-time,
.message-entry:has(.message-actions-open) .message-time {
  opacity: 1;
}

@media (hover: none), (pointer: coarse) {
  .message-actions,
  .message-time {
    opacity: 1;
    pointer-events: auto;
  }
}

/*
 * Another person in an agent chat stands on the right, so the name ends with the bubble: a wrapped
 * name aligns to the end, and the time, hidden until hover, goes before the name.
 */
.message-entry-user .message-author-name {
  text-align: end;
}

.message-entry-user .message-author-name > .message-time {
  order: -1;
}

/* Their bubble takes a tint of their name colour, so it does not read as the reader's own. */
.ui-bubble.message-bubble-member > .ui-bubble-content {
  background: color-mix(
    in srgb,
    var(--message-author-color, var(--openbot-accent)) 22%,
    var(--openbot-bg-surface-raised)
  );
}

.message-action-button {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  padding: 0;
  color: var(--openbot-text-muted);
  transition:
    background var(--openbot-duration-hover) ease,
    color var(--openbot-duration-hover) ease;
}

.message-action-button:hover,
.message-action-button:focus-visible,
.message-action-button[aria-expanded="true"] {
  background: var(--openbot-border);
  color: var(--openbot-text-secondary);
  outline: none;
}

.message-action-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* No stroke-width: every icon in this row is hand-drawn on a 20-unit grid and carries
   * its own scaled weight from .ui-glyph-20. Setting it here outranks that class and
   * paints them a fifth heavier than the grid they were drawn for. */
}

.message-action-button svg circle:not(:first-child),
.message-action-button svg:has(circle:nth-child(3)) circle {
  fill: currentColor;
  stroke: none;
}

.message-action-popover-anchor {
  position: relative;
  display: grid;
  place-items: center;
}

.reaction-picker-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1px;
}

.reaction-picker-options {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1px;
}

.reaction-picker-more {
  margin-top: 3px;
  border-top: 1px solid var(--openbot-border);
  padding-top: 4px;
}

.reaction-picker-more .reaction-picker-options {
  display: grid;
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.reaction-picker-more .reaction-picker-options [role="menuitemradio"] {
  width: 100%;
  min-width: 0;
}

.reaction-picker-row :is([role="menuitem"], [role="menuitemradio"]) {
  display: grid;
  width: 31px;
  height: 31px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  padding: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-xl);
  line-height: 1;
  transition:
    background var(--openbot-duration-hover) ease,
    transform var(--openbot-duration-hover) ease;
}

.reaction-picker-row :is([role="menuitem"], [role="menuitemradio"]):hover,
.reaction-picker-row :is([role="menuitem"], [role="menuitemradio"]):focus-visible,
.reaction-picker-row :is([role="menuitem"], [role="menuitemradio"])[data-highlighted],
.reaction-picker-row [role="menuitemradio"][aria-checked="true"] {
  background: var(--openbot-border);
  outline: none;
  transform: scale(1.08);
}

.reaction-picker-row .reaction-more-button {
  color: var(--openbot-text-muted);
}

.reaction-more-button svg {
  width: 15px;
  height: 15px;
}

.message-reaction-pill {
  display: flex;
  min-width: 0;
  height: var(--openbot-icon-lg);
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  padding: 0;
  color: inherit;
  font-size: var(--openbot-text-lg);
  line-height: 1;
  transition: background var(--openbot-duration-hover) ease;
}

.message-entry:has(.message-reaction-anchor) > .ui-message-content {
  padding-bottom: var(--openbot-space-3);
}

.message-reaction-anchor .message-reaction-pill {
  gap: 2px;
  margin: 0;
  border-radius: inherit;
}

.ui-bubble-reactions.message-reaction-anchor {
  padding: 2px 6px;
}

.ui-bubble-reactions.message-reaction-anchor:has(> .message-reaction-pill:only-child) {
  width: var(--openbot-control-xs);
  padding-inline: 2px;
}

.ui-bubble-reactions.message-reaction-anchor:has(> .message-reaction-pill:only-child) > .message-reaction-pill {
  width: var(--openbot-icon-lg);
  border-radius: var(--openbot-radius-pill);
}

.message-reaction-anchor .ui-bubble-reaction-overflow {
  padding-right: 6px;
}

.message-reaction-pill:hover {
  background: var(--openbot-hover);
}

.message-reaction-pill-readonly:hover {
  background: transparent;
}

.message-reaction-anchor:has(.message-reaction-pill:focus-visible) {
  box-shadow:
    0 0 0 3px var(--openbot-bg-canvas),
    0 0 0 5px var(--openbot-border-focus);
}

.message-reaction-pill:focus-visible {
  outline: none;
}

.chat-action-entry-animated {
  width: 100%;
  animation: message-in var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1) both;
}

.agent-activity-slot[data-reserved="true"] {
  min-height: 44px;
}

.agent-activity-entry {
  width: 100%;
  display: grid;
  grid-template-rows: 1fr;
  pointer-events: none;
  transition: grid-template-rows var(--openbot-duration-overlay) var(--openbot-ease-out);
}

@starting-style {
  .agent-activity-entry {
    grid-template-rows: 0fr;
  }
}

.agent-activity-entry[data-state="exiting"] {
  grid-template-rows: 0fr;
}

.agent-activity-content {
  min-height: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  padding: 4px 0 8px 8px;
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  transition:
    opacity var(--openbot-duration-overlay) var(--openbot-ease-out),
    filter var(--openbot-duration-overlay) var(--openbot-ease-out),
    transform var(--openbot-duration-overlay) var(--openbot-ease-out);
  will-change: opacity, filter, transform;
}

@starting-style {
  .agent-activity-content {
    opacity: 0;
    filter: blur(2px);
    transform: translateY(4px);
  }
}

.agent-activity-entry[data-state="exiting"] .agent-activity-content {
  opacity: 0;
  filter: blur(2px);
  transform: translateY(2px);
}

.agent-activity-avatar {
  --agent-avatar-optical-offset: -2px;

  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  align-self: center;
  transform: translateY(0) scale(1);
  transition: transform var(--openbot-duration-overlay) var(--openbot-ease-out);
  will-change: transform;
}

@starting-style {
  .agent-activity-avatar {
    transform: translateY(3px) scale(0.96);
  }
}

.agent-activity-entry[data-state="exiting"] .agent-activity-avatar {
  transform: translateY(0) scale(0.98);
}

.agent-activity-label {
  display: -webkit-box;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  background: linear-gradient(
    90deg,
    var(--openbot-text-primary) 0%,
    var(--openbot-text-primary) 30%,
    var(--openbot-text-muted) 45%,
    var(--openbot-text-muted) 55%,
    var(--openbot-text-primary) 70%,
    var(--openbot-text-primary) 100%
  );
  background-size: 300% 100%;
  background-clip: text;
  color: transparent;
  font-size: var(--openbot-text-sm);
  line-height: 20px;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: image-generation-shine 2.25s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
}

.agent-activity-elapsed {
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  line-height: 20px;
}

.chat-action-marker {
  width: min(var(--openbot-chat-marker-width), calc(100% - var(--openbot-space-6)));
  min-height: var(--openbot-chat-marker-height);
  justify-content: center;
  margin: 0 auto;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  letter-spacing: var(--openbot-tracking-normal);
  text-align: center;
}

.chat-action-marker-content {
  max-width: 100%;
  gap: var(--openbot-space-1);
}

.chat-action-marker-summary {
  /* The reveal's own timings. They sit above the `--openbot-duration-*` scale,
     which tops out at an overlay fade: this is a panel of rows that has to read
     as unrolling, and the palette has no token for that. */
  --chat-action-history-open: 340ms;
  /* The shared eases are quint curves: `--openbot-ease-in-out` holds the panel
     almost still for 50ms and then moves 25px in two frames, which reads as a
     lurch in everything below it. This one spreads the distance evenly and
     settles, so the messages under the marker travel at one speed. */
  --chat-action-history-ease: cubic-bezier(0.4, 0, 0.2, 1);
  /* The close is shorter than the open: leaving needs no reading time, and a
     long collapse holds the messages below in motion for no reason. */
  --chat-action-history-close: 200ms;
  /* The close curve decelerates from the first frame. The open's ease holds the
     panel almost still for the first 20ms, which reads as a click the panel did
     not answer, and then drops the box fast. */
  --chat-action-history-close-ease: cubic-bezier(0.32, 0.08, 0.24, 1);
  /* The rows have to stay faintly visible until the box is nearly shut. A
     shorter fade empties the panel at the halfway point and leaves blank space
     closing on its own. */
  --chat-action-history-lift: 170ms;
  /* How much of the box's bottom edge dissolves while it closes. One row's
     worth, so the edge takes a row out at a time. */
  --chat-action-history-fade: 22px;
  --chat-action-history-entry: 260ms;
  /* Each state waits this much longer than the one above it. */
  --chat-action-history-stagger: 60ms;
  display: flex;
  min-width: 0;
  max-width: 100%;
  flex-direction: column;
  align-items: center;
}

.ui-button.chat-action-history-toggle {
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
}

.chat-action-history-toggle svg {
  transition: transform var(--chat-action-history-close) var(--openbot-ease-out);
}

.chat-action-history-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* The panel is a single grid track, so `0fr` to `1fr` animates the list's real
   height with no measured pixel value - the same technique as `.t-acc` in
   transitions.css. The height has to move for the row below to follow it; a
   paint-only reveal leaves the space behind and drops it in one step at the end.
   A `from` or `to` alone leaves the other end on the element's own style, so
   these rules stay the single source of the resting state. */
.chat-action-history-panel {
  display: grid;
  width: 100%;
  grid-template-rows: 1fr;
}

.chat-action-history-panel[data-state="open"] {
  animation: chat-action-history-open var(--chat-action-history-open) var(--chat-action-history-ease);
}

/* The close runs the same track backwards and holds `0fr` until the panel leaves
   the tree, so the messages below travel the whole distance under one curve
   instead of standing still and then closing the gap in a single step. */
.chat-action-history-panel[data-state="closed"] {
  animation: chat-action-history-close var(--chat-action-history-close) var(--chat-action-history-close-ease) forwards;
}

@keyframes chat-action-history-open {
  from {
    grid-template-rows: 0fr;
  }
}

@keyframes chat-action-history-close {
  to {
    grid-template-rows: 0fr;
  }
}

/* On the way in the box grows under rows that are still fading up, so its edge
   never cuts anything solid. */
.chat-action-history-panel[data-state="open"] .chat-action-history {
  animation: chat-action-history-settle var(--chat-action-history-open) var(--openbot-ease-out);
}

/* The rows fade out just before the box finishes closing, so the clip edge never
   cuts through anything solid and the panel is never an empty box shrinking on
   its own. The panel leaves the tree on the collapse's end, not on this one's. */
.chat-action-history-panel[data-state="closed"] .chat-action-history {
  animation: chat-action-history-lift var(--chat-action-history-lift) var(--openbot-ease-out) forwards;
}

/* No fade on the way in: the rows already carry their own, and stacking a second
   one over them washes the whole panel out. */
@keyframes chat-action-history-settle {
  from {
    transform: translateY(-25%);
  }
}

/* The lift stays small on the way out: the collapsing box already carries the
   rows upward, and a longer travel makes them outrun it and arrive early. */
@keyframes chat-action-history-lift {
  to {
    transform: translateY(-8%);
    opacity: 0;
  }
}

/* `min-height: 0` lets the track win over the list's content height, and the
   clip keeps the rows inside the shrinking box. */
.chat-action-history-clip {
  min-height: 0;
  overflow: hidden;
}

/* The closing box passes its edge over rows that are still readable and cuts
   them through the middle of the glyphs. The mask softens that edge, so a row
   dissolves as the edge reaches it instead of being sliced. Below the fade
   distance the whole list is inside the gradient and leaves on its own. The way
   in needs none of this: there the box grows ahead of rows that are still
   arriving. */
.chat-action-history-panel[data-state="closed"] .chat-action-history-clip {
  -webkit-mask-image: linear-gradient(
    to bottom,
    var(--openbot-text-primary) calc(100% - var(--chat-action-history-fade)),
    transparent
  );
  mask-image: linear-gradient(
    to bottom,
    var(--openbot-text-primary) calc(100% - var(--chat-action-history-fade)),
    transparent
  );
}

.chat-action-history {
  box-sizing: border-box;
  display: grid;
  width: 100%;
  gap: var(--openbot-space-1);
  margin: var(--openbot-space-1) 0 0;
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  border-inline-start: 1px solid var(--openbot-border-grouped);
  list-style: none;
  text-align: left;
}

.chat-action-history-entry {
  display: grid;
  grid-template-columns: var(--openbot-icon-xs) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-1-5);
  color: var(--openbot-text-secondary);
}

/* `backwards` holds the entry hidden through its delay, so a late state never
   shows at full strength before its turn. The exit leaves the rows alone: the
   list fades as one piece. */
.chat-action-history-panel[data-state="open"] .chat-action-history-entry {
  animation: chat-action-history-entry-in var(--chat-action-history-entry) var(--openbot-ease-out) backwards;
}

.chat-action-history-panel[data-state="open"] .chat-action-history-entry:nth-child(2) {
  animation-delay: var(--chat-action-history-stagger);
}

.chat-action-history-panel[data-state="open"] .chat-action-history-entry:nth-child(3) {
  animation-delay: calc(var(--chat-action-history-stagger) * 2);
}

/* The stagger stops growing here: a long run should not open in slow motion. */
.chat-action-history-panel[data-state="open"] .chat-action-history-entry:nth-child(n + 4) {
  animation-delay: calc(var(--chat-action-history-stagger) * 3);
}

@keyframes chat-action-history-entry-in {
  from {
    transform: translateX(calc(var(--openbot-space-1) * -1));
    opacity: 0;
    filter: blur(2px);
  }
}

.chat-action-history-entry time {
  color: var(--openbot-text-muted);
  white-space: nowrap;
}

.chat-action-history-icon,
.chat-action-history-icon svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}

.chat-action-history-status-completed .chat-action-history-icon {
  color: var(--openbot-success);
}

.chat-action-history-status-failed .chat-action-history-icon,
.chat-action-history-status-interrupted .chat-action-history-icon,
.chat-action-history-status-cancelled .chat-action-history-icon {
  color: var(--openbot-danger);
}

.chat-action-history-status-needs-attention .chat-action-history-icon {
  color: var(--openbot-warning);
}

.chat-action-history-status-in-progress .chat-action-history-icon {
  color: var(--openbot-accent);
}

@media (prefers-reduced-motion: reduce) {
  .chat-action-history-panel,
  .chat-action-history,
  .chat-action-history-entry {
    animation: none;
  }

  .chat-action-history-toggle svg {
    transition: none;
  }
}

.chat-action-marker-label,
.chat-action-marker-time {
  flex: 0 0 auto;
  white-space: nowrap;
}

.chat-action-marker-time {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

.chat-action-target {
  box-sizing: border-box;
  display: inline-flex;
  min-width: 0;
  max-width: min(280px, 100%);
  height: auto;
  min-height: var(--openbot-chat-marker-height);
  flex: 0 1 auto;
  align-items: center;
  gap: var(--openbot-space-1);
  border: 0;
  border-radius: var(--openbot-radius-pill);
  background: transparent;
  padding: 0 var(--openbot-space-1-5);
  color: var(--openbot-text-secondary);
  font: inherit;
  line-height: inherit;
  outline: none;
  text-align: left;
  white-space: nowrap;
  transition:
    background-color var(--openbot-duration-hover) var(--openbot-ease-out),
    box-shadow var(--openbot-duration-hover) var(--openbot-ease-out),
    color var(--openbot-duration-hover) var(--openbot-ease-out),
    scale var(--openbot-duration-fast) var(--openbot-ease-out);
}

button.chat-action-target:hover,
.chat-action-agent-menu-trigger:hover,
.chat-action-agent-menu-trigger[aria-expanded="true"] {
  background: var(--openbot-bg-control-hover);
  box-shadow: 0 0 0 1px var(--openbot-border-strong);
  color: var(--openbot-text-primary);
}

button.chat-action-target:focus-visible,
.chat-action-agent-menu-trigger:focus-visible {
  background: var(--openbot-bg-control-hover);
  box-shadow: var(--openbot-focus-ring);
  color: var(--openbot-text-primary);
}

button.chat-action-target:active,
.chat-action-agent-menu-trigger:active {
  background: var(--openbot-bg-control-active);
  scale: 0.96;
}

.chat-action-target-unavailable {
  color: var(--openbot-text-muted);
}

/* Markers without a target pill keep the same optical label-to-time rhythm. */
.chat-action-marker-unavailable .chat-action-marker-label,
.chat-action-marker-context-reset .chat-action-marker-label,
.chat-action-marker-model-switch .chat-action-marker-label {
  padding-inline-end: var(--openbot-space-1-5);
}

.chat-action-target-name,
.chat-action-target > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-action-target .ui-marker-icon,
.chat-action-target .ui-marker-icon svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: 0 0 var(--openbot-icon-xs);
}

.chat-action-target .ui-marker-icon {
  translate: 0 -0.5px;
}

.chat-action-agent-avatar {
  --agent-avatar-optical-offset: -2px;

  position: relative;
  width: var(--openbot-chat-marker-avatar);
  height: var(--openbot-chat-marker-avatar);
  flex: 0 0 var(--openbot-chat-marker-avatar);
  border: 0;
  background: transparent;
  translate: 0 -0.5px;
}

.chat-action-marker-agent-message .chat-action-target {
  --chat-action-agent-color: var(--openbot-accent);
}

.chat-action-marker-agent-message button.chat-action-target:hover,
.chat-action-marker-agent-message .chat-action-agent-menu-trigger:hover,
.chat-action-marker-agent-message .chat-action-agent-menu-trigger[aria-expanded="true"] {
  background: color-mix(in srgb, var(--chat-action-agent-color) 16%, transparent);
  box-shadow: none;
  color: var(--chat-action-agent-color);
}

.chat-action-marker-agent-message button.chat-action-target:focus-visible,
.chat-action-marker-agent-message .chat-action-agent-menu-trigger:focus-visible {
  background: color-mix(in srgb, var(--chat-action-agent-color) 16%, transparent);
  box-shadow: var(--openbot-focus-ring);
  color: var(--chat-action-agent-color);
}

.chat-action-marker-agent-message button.chat-action-target:active,
.chat-action-marker-agent-message .chat-action-agent-menu-trigger:active {
  background: color-mix(in srgb, var(--chat-action-agent-color) 34%, transparent);
  color: var(--openbot-text-primary);
}

.chat-action-target-status-in-progress .ui-marker-icon {
  color: var(--openbot-accent);
}

.chat-action-target-status-completed .ui-marker-icon {
  color: var(--openbot-success);
}

.chat-action-target-status-failed .ui-marker-icon,
.chat-action-target-status-cancelled .ui-marker-icon,
.chat-action-target-status-interrupted .ui-marker-icon {
  color: var(--openbot-danger);
}

.chat-action-target-status-needs-attention .ui-marker-icon {
  color: var(--openbot-warning);
}

.chat-action-target-status-in-progress .ui-marker-icon svg {
  animation: ui-spin 1s linear infinite;
}

.chat-action-avatar-stack {
  display: inline-flex;
  min-width: 0;
  height: var(--openbot-chat-marker-avatar);
  align-items: center;
}

.chat-action-avatar-stack .chat-action-agent-avatar + .chat-action-agent-avatar {
  margin-left: -6px;
}

/* An open group lists each message as its own marker, centred like the row that holds them. */
.chat-action-group-list {
  padding-inline: 0;
  border-inline-start: 0;
  text-align: center;
}

/* Only the group's own rows: a routine run in an open group keeps the layout of its own history. */
.chat-action-group-list > .chat-action-history-entry {
  display: block;
}

.chat-action-group-list .chat-action-marker {
  width: 100%;
}

/* A group of routine runs reads "routine · 3 runs · 17:15–18:45". In a narrow chat the count, the
   time and the toggle move together to a second line, so the routine keeps its whole name. The dots
   are decoration only. */
.chat-action-marker-routine-run-group > .chat-action-marker-summary > .chat-action-marker-content {
  flex-wrap: wrap;
  justify-content: center;
}

.chat-action-run-group-details {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--openbot-space-1);
}

.chat-action-run-group-count::before,
.chat-action-run-group-time::before {
  content: "·" / "";
  margin-inline-end: var(--openbot-space-1);
}

/* The shared .ui-action-menu item rule outranks a single class, so the grid template and the
 * truncation below have to be compounded to reach the row. */
.ui-action-menu.chat-action-agent-menu {
  min-width: 220px;
  max-width: min(320px, calc(100vw - var(--openbot-space-4)));
}

.ui-action-menu.chat-action-agent-menu .chat-action-agent-menu-item[role="menuitem"] {
  display: grid;
  align-items: center;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: var(--openbot-space-2);
}

.chat-action-agent-menu-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-action-agent-menu-item .chat-action-agent-avatar {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
}

.chat-action-agent-menu-status {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  white-space: nowrap;
}

/* The files of an update sit at the start edge, where an agent's own files sit. */
.chat-action-attachments {
  margin-top: var(--openbot-space-2);
}

.chat-row-unavailable {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .chat-action-target-status-in-progress .ui-marker-icon svg {
    animation: none;
  }
}

.message-entry .ui-bubble {
  letter-spacing: -0.15px;
}

.message-entry-agent .ui-bubble {
  max-width: min(720px, 100%);
}

.message-entry-agent .ui-bubble:has(.choice-card) {
  width: min(500px, 100%);
  max-width: min(500px, 100%);
}

.message-entry-agent .ui-bubble:has(.image-generation) {
  width: min(420px, 100%);
  max-width: min(420px, 100%);
}

.message-entry-agent .ui-bubble:has(.image-gallery) {
  width: min(520px, 100%);
  max-width: min(520px, 100%);
}

.message-entry-agent
  .ui-bubble-variant-ghost:has(
    :is(.choice-card, .image-generation, .image-gallery, .message-code-block, .message-data-table-scroll)
  )
  > .ui-bubble-content {
  width: 100%;
}

.image-generation {
  display: grid;
  min-width: 0;
  justify-items: start;
  gap: 14px;
}

.message-image-attachments {
  display: grid;
  min-width: 0;
  gap: 10px;
}

.image-generation-stage {
  position: relative;
  width: min(100%, 420px);
  overflow: hidden;
  aspect-ratio: var(--image-generation-ratio);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  isolation: isolate;
}

.image-generation-canvas,
.image-generation-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.image-generation-canvas {
  overflow: hidden;
  background: var(--openbot-bg-control);
  opacity: 1;
  transition: opacity var(--openbot-duration-overlay) ease;
}

.image-generation-canvas-failed {
  display: grid;
  place-items: center;
}

.image-generation-ready .image-generation-canvas {
  opacity: 0;
}

/* The canvas above rests at `opacity: 0` once the image arrives, but the glow
 * inside it keeps two infinite keyframes on `mask-size` and `mask-position`,
 * and the compositor can take neither. One finished image in the history
 * therefore costs a style recalculation and a repaint every frame for as long
 * as the conversation is open. A profile of an idle window measured 60 style
 * recalculations a second with no script running at all. The reduced-motion
 * block at the end of this file already stops these keyframes for the same
 * element, so this only makes the finished state agree with it. */
.image-generation-ready .image-generation-glow {
  animation: none;
}

.image-generation-dots {
  position: absolute;
  inset: 2px;
  background-image: radial-gradient(circle, var(--openbot-text-muted) 0.7px, transparent 1.3px);
  background-repeat: space;
  background-size: 11px 11px;
  opacity: 0.22;
}

.image-generation-failure-mark {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 2px solid var(--openbot-danger);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-danger-soft);
  box-shadow: 0 0 0 5px var(--openbot-danger-soft);
  color: var(--openbot-danger);
}

/* Was a 40px U+00D7 sized off a type token, which is why the scale carried a step no
 * copy in the app used. */
.image-generation-failure-mark > svg {
  width: var(--openbot-control-xl);
  height: var(--openbot-control-xl);
  stroke-width: var(--openbot-icon-stroke);
}

.image-generation-glow {
  position: absolute;
  inset: 2px;
  background-image: radial-gradient(circle, var(--openbot-text-primary) 1.1px, transparent 1.6px);
  background-repeat: space;
  background-size: 11px 11px;
  -webkit-mask-image:
    radial-gradient(ellipse at center, var(--openbot-text-primary) 0%, transparent 60%),
    radial-gradient(ellipse at center, var(--openbot-text-primary) 0%, transparent 62%);
  mask-image:
    radial-gradient(ellipse at center, var(--openbot-text-primary) 0%, transparent 60%),
    radial-gradient(ellipse at center, var(--openbot-text-primary) 0%, transparent 62%);
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-size:
    72% 62%,
    52% 52%;
  mask-size:
    72% 62%,
    52% 52%;
  -webkit-mask-position:
    16% 20%,
    30% 32%;
  mask-position:
    16% 20%,
    30% 32%;
  animation:
    image-generation-morph 4.2s cubic-bezier(0.35, 1.55, 0.65, 1) infinite,
    image-generation-breathe 1.9s cubic-bezier(0.66, 0, 0.34, 1) infinite;
}

.image-generation-resolution {
  position: absolute;
  z-index: 1;
  top: 8px;
  right: 8px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface);
  padding: 2px 7px;
  color: var(--openbot-text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--openbot-text-sm);
  white-space: nowrap;
}

.image-generation-meta {
  display: flex;
  width: min(100%, 420px);
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
}

.image-generation-label {
  background: linear-gradient(
    90deg,
    var(--openbot-text-primary) 0%,
    var(--openbot-text-primary) 30%,
    var(--openbot-text-muted) 45%,
    var(--openbot-text-muted) 55%,
    var(--openbot-text-primary) 70%,
    var(--openbot-text-primary) 100%
  );
  background-size: 300% 100%;
  background-clip: text;
  color: transparent;
  font-size: var(--openbot-text-lg);
  font-weight: 550;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* The shimmer says "still working", so it stops once the image has arrived or
   failed. Left unscoped it also ran on "Image generation failed" and on plain
   attached images, and it animates `background-position` under
   `background-clip: text` - a main-thread text repaint per frame that no
   compositor can take - once per image message, for the life of the thread. */
.image-generation:not(.image-generation-ready, .image-generation-failed) .image-generation-label {
  animation: image-generation-shine 2.25s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
}

.image-generation-prompt {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-generation-error {
  max-width: 100%;
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
  line-height: 17px;
}

.image-generation-preview {
  display: block;
  border: 0;
  background: var(--openbot-bg-control);
  cursor: pointer;
  opacity: 0;
  padding: 0;
  transition: opacity var(--openbot-duration-overlay) ease;
}

.image-generation-preview-visible {
  opacity: 1;
}

.image-generation-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.image-generation-preview:focus-visible,
.image-generation-hover-download:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}

.image-generation-hover-download {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  right: 10px;
  bottom: 10px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-glass);
  padding: 5px 10px;
  color: var(--openbot-text-primary);
  cursor: pointer;
  backdrop-filter: blur(12px) saturate(1.15);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  font-size: var(--openbot-text-sm);
  font-weight: 650;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition:
    background-color var(--openbot-duration-hover) ease,
    color var(--openbot-duration-hover) ease,
    border-color var(--openbot-duration-hover) ease,
    opacity var(--openbot-duration-hover) ease,
    transform var(--openbot-duration-hover) ease;
}

.image-generation-download-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.image-generation-stage:hover .image-generation-hover-download,
.image-generation-stage:focus-within .image-generation-hover-download {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.image-generation-hover-download:hover {
  border-color: var(--openbot-border-focus);
  background: var(--openbot-bg-glass);
  color: var(--openbot-text-primary);
}

@keyframes image-generation-morph {
  0% {
    -webkit-mask-size:
      52% 46%,
      40% 40%;
    mask-size:
      52% 46%,
      40% 40%;
    -webkit-mask-position:
      16% 20%,
      30% 32%;
    mask-position:
      16% 20%,
      30% 32%;
  }
  25% {
    -webkit-mask-size:
      46% 58%,
      44% 38%;
    mask-size:
      46% 58%,
      44% 38%;
    -webkit-mask-position:
      84% 16%,
      66% 30%;
    mask-position:
      84% 16%,
      66% 30%;
  }
  50% {
    -webkit-mask-size:
      60% 44%,
      38% 46%;
    mask-size:
      60% 44%,
      38% 46%;
    -webkit-mask-position:
      82% 84%,
      62% 68%;
    mask-position:
      82% 84%,
      62% 68%;
  }
  75% {
    -webkit-mask-size:
      48% 54%,
      46% 40%;
    mask-size:
      48% 54%,
      46% 40%;
    -webkit-mask-position:
      14% 82%,
      34% 66%;
    mask-position:
      14% 82%,
      34% 66%;
  }
  100% {
    -webkit-mask-size:
      52% 46%,
      40% 40%;
    mask-size:
      52% 46%,
      40% 40%;
    -webkit-mask-position:
      16% 20%,
      30% 32%;
    mask-position:
      16% 20%,
      30% 32%;
  }
}

@keyframes image-generation-breathe {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

@keyframes image-generation-shine {
  0%,
  18% {
    background-position: 100% 0;
  }
  82%,
  100% {
    background-position: 0% 0;
  }
}

/* A message the host has not stored yet. It reads as the user's own, a step quieter, until it is. */
.message-entry-pending .message-shell {
  opacity: 0.7;
}

.pending-send-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--openbot-space-1);
}

.pending-send-status[data-state="failed"] .pending-send-label {
  color: var(--openbot-danger-text);
}

.pending-send-error {
  margin-inline-start: var(--openbot-space-2);
  overflow-wrap: anywhere;
}


/* /@fs//app/packages/ui/src/features/conversation/styles/message-content.css */
.message-entry-user .ui-bubble {
  max-width: min(420px, 100%);
}

.message-copy {
  margin: 0;
  font-size: var(--openbot-text-lg);
  line-height: 20px;
  overflow-wrap: anywhere;
  white-space: pre-line;
  user-select: text;
}

.message-markdown {
  white-space: normal;
}

.message-markdown > *,
.message-markdown :is(p, ul, ol, blockquote) {
  margin: 0;
}

.message-markdown > :not(:first-child) {
  margin-top: var(--openbot-space-3);
}

.message-markdown-heading {
  margin: 0;
  color: inherit;
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: var(--openbot-tracking-tight);
}

.message-markdown-heading[data-level="1"] {
  font-size: var(--openbot-text-2xl);
  line-height: var(--openbot-leading-2xl);
}

.message-markdown-heading[data-level="2"] {
  font-size: var(--openbot-text-xl);
  line-height: var(--openbot-leading-xl);
}

.message-markdown-heading:is([data-level="3"], [data-level="4"], [data-level="5"], [data-level="6"]) {
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}

.message-markdown strong {
  font-weight: var(--openbot-weight-semibold);
}

.message-markdown del {
  color: var(--openbot-text-secondary);
}

.message-markdown :is(ul, ol) {
  padding-left: var(--openbot-space-6);
}

.message-markdown ul {
  list-style: disc;
}

.message-markdown ul ul {
  list-style: circle;
}

.message-markdown ol {
  list-style: decimal;
}

.message-markdown li + li,
.message-markdown li > :is(ul, ol) {
  margin-top: var(--openbot-space-1);
}

.message-markdown-task {
  display: flex;
  align-items: flex-start;
  gap: var(--openbot-space-1-5);
  list-style: none;
}

.message-markdown-checkbox {
  margin-top: var(--openbot-space-1);
  opacity: 1;
}

.message-markdown blockquote {
  border-left: var(--openbot-space-0-5) solid var(--openbot-border-strong);
  padding-left: var(--openbot-space-3);
  color: var(--openbot-text-secondary);
}

.message-markdown blockquote > :not(:first-child) {
  margin-top: var(--openbot-space-2);
}

.message-markdown :not(pre) > code {
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-0-5) var(--openbot-space-1);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-md);
  white-space: break-spaces;
}

.message-markdown hr {
  height: 1px;
  border: 0;
  background: var(--openbot-border-strong);
}

.message-markdown-raw-html {
  display: block;
  color: var(--openbot-text-secondary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-md);
  white-space: pre-wrap;
}

.message-markdown-image {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 360px;
  border-radius: var(--openbot-radius-md);
  object-fit: contain;
}

/* The image opens in the image viewer. The button keeps the image's own size. */
.message-markdown-image-button {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  padding: 0;
  border-radius: var(--openbot-radius-md);
  cursor: zoom-in;
}

.message-markdown-image-button:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}

.message-markdown-table-scroll {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  border-radius: var(--openbot-radius-md);
  box-shadow: 0 0 0 1px var(--openbot-data-table-ring);
}

.message-markdown-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--openbot-bg-canvas);
  color: var(--openbot-data-table-text);
}

.message-markdown-table :is(th, td) {
  border-right: 1px solid var(--openbot-data-table-border);
  border-bottom: 1px solid var(--openbot-data-table-border);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  overflow-wrap: break-word;
  text-align: left;
  vertical-align: top;
}

.message-markdown-table th {
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-data-table-header-text);
  font-weight: var(--openbot-weight-medium);
}

.message-markdown-table :is(th, td):last-child {
  border-right: 0;
}

.message-markdown-table tbody tr:last-child td {
  border-bottom: 0;
}

.message-markdown-table [data-align="center"] {
  text-align: center;
}

.message-markdown-table [data-align="right"] {
  text-align: right;
}

::highlight(openbot-message-selection) {
  background: var(--openbot-accent-strong);
  color: inherit;
}

/* The passage that a quote points to, after a click on the quote. */
::highlight(openbot-quote-target) {
  background: var(--openbot-warning);
  color: var(--openbot-text-on-light);
}

.selection-highlight-layer {
  position: fixed;
  z-index: 18;
  inset: 0;
  pointer-events: none;
}

.selection-highlight-layer span {
  position: fixed;
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-accent-strong);
}

.selection-actions-layer {
  position: fixed;
  z-index: 25;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px) scale(0.97);
  transform-origin: 50% 0;
  transition:
    opacity var(--openbot-duration-slow) ease-out,
    transform var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1);
  will-change: top, left, transform;
}

.selection-actions-layer[data-placement="top"] {
  transform-origin: 50% 100%;
}

.selection-actions-layer[data-ready="true"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.selection-actions-bar {
  display: flex;
  max-width: calc(100vw - 24px);
  height: 36px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface-raised);
  padding: 4px;
  box-shadow:
    0 14px 34px var(--openbot-shadow-popover-ambient),
    0 3px 10px var(--openbot-shadow-popover-ambient),
    inset 0 0 0 1px var(--openbot-shadow-ring);
  color: var(--openbot-text-primary);
  transition: width var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1);
}

.selection-actions-content,
.selection-actions-presets,
.selection-actions-more-presets {
  display: flex;
  width: max-content;
  min-width: 0;
  align-items: center;
}

.selection-actions-content {
  height: 28px;
  flex: 0 0 auto;
  gap: 2px;
}

.selection-actions-form-shell {
  display: flex;
  min-width: 0;
  align-items: center;
  overflow: hidden;
  opacity: 1;
  transform: translateX(0);
  transition:
    max-width var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1),
    opacity var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1),
    transform var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1);
}

.selection-actions-form-shell-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-8px);
}

.selection-actions-form {
  display: flex;
  height: 28px;
  flex: 0 0 auto;
  align-items: center;
  overflow: hidden;
  transition: width var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1);
}

.selection-actions-form input {
  width: 100%;
  height: 28px;
  border: 0;
  background: transparent;
  padding: 0 10px 0 11px;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: 400;
  line-height: 28px;
  outline: 0;
}

.selection-actions-form input::placeholder {
  color: var(--openbot-text-muted);
}

.selection-actions-form input:focus-visible {
  outline: 0;
}

.selection-actions-presets {
  max-width: 224px;
  gap: 2px;
  overflow: hidden;
  opacity: 1;
  transform: translateX(0);
  transition:
    max-width var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1),
    opacity var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1),
    transform var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1);
}

.selection-actions-presets-hidden {
  max-width: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-8px);
}

.selection-actions-more-presets {
  max-width: 0;
  gap: 2px;
  margin-left: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-width var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1),
    opacity var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1),
    margin-left var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1);
}

.selection-actions-presets-expanded .selection-actions-more-presets {
  max-width: 262px;
  margin-left: 2px;
  opacity: 1;
}

.selection-actions-send-shell {
  display: flex;
  min-width: 0;
  max-width: 0;
  align-items: center;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.88);
  transition:
    max-width var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1),
    opacity var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1),
    transform var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1);
}

.selection-actions-send-shell-visible {
  max-width: 30px;
  opacity: 1;
  transform: scale(1);
}

.selection-actions-control,
.selection-actions-icon-button,
.selection-actions-send {
  display: inline-flex;
  height: 28px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  padding: 0;
  transition:
    background-color var(--openbot-duration-hover) ease,
    border-color var(--openbot-duration-hover) ease,
    box-shadow var(--openbot-duration-hover) ease,
    color var(--openbot-duration-hover) ease,
    opacity var(--openbot-duration-hover) ease,
    transform var(--openbot-duration-normal) ease;
}

.selection-actions-control {
  gap: 4px;
  border: 1px solid transparent;
  background: transparent;
  padding: 0 9px;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: 430;
  white-space: nowrap;
}

.selection-actions-icon-button,
.selection-actions-send {
  width: 28px;
}

.selection-actions-kbd {
  height: 18px;
  margin-left: 2px;
  font-size: var(--openbot-text-xs);
}

.selection-actions-icon-button {
  background: transparent;
  color: var(--openbot-text-secondary);
}

.selection-actions-send {
  background: var(--openbot-text-primary);
  color: var(--openbot-bg-canvas);
}

.selection-actions-control:active,
.selection-actions-icon-button:active,
.selection-actions-send:active {
  transform: scale(0.94);
}

.selection-actions-divider {
  width: 1px;
  height: 16px;
  flex: 0 0 auto;
  margin: 0 3px;
  background: var(--openbot-border-strong);
}

.selection-actions-more-divider {
  margin-left: 1px;
}

.selection-actions-expand svg {
  transition: transform var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1);
}

.selection-actions-expand[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.selection-actions-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.selection-actions-status,
.selection-actions-error {
  display: inline-flex;
  height: 28px;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  font-size: var(--openbot-text-sm);
  white-space: nowrap;
}

.selection-actions-status {
  color: var(--openbot-text-secondary);
}

.selection-actions-error {
  color: var(--openbot-danger);
}

.selection-actions-spinner {
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--openbot-border-strong);
  border-top-color: var(--openbot-text-secondary);
  border-radius: var(--openbot-radius-pill);
  animation: selection-actions-spin 700ms linear infinite;
}

.message-selection-quote {
  max-width: 100%;
  max-height: 124px;
  overflow: auto;
  margin: 0;
  border-left: 2px solid var(--openbot-accent);
  border-radius: 0 var(--openbot-radius-sm) var(--openbot-radius-sm) 0;
  background: var(--openbot-bg-control);
  padding: 6px 8px;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: 17px;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

@media (hover: hover) and (pointer: fine) {
  .selection-actions-control:hover {
    border-color: var(--openbot-border-focus);
    background: var(--openbot-accent-strong);
    box-shadow: 0 0 0 1px var(--openbot-accent-soft);
    color: var(--openbot-text-primary);
  }

  .selection-actions-icon-button:hover {
    background: var(--openbot-bg-control-hover);
    color: var(--openbot-text-primary);
  }

  .selection-actions-send:hover {
    opacity: 0.9;
  }
}

@media (max-width: 480px) {
  .selection-actions-control {
    width: 28px;
    padding: 0;
  }

  .selection-actions-kbd {
    display: none;
  }

  .selection-actions-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .selection-actions-presets-expanded .selection-actions-more-presets {
    max-width: 88px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .selection-actions-layer,
  .selection-actions-bar,
  .selection-actions-form,
  .selection-actions-form-shell,
  .selection-actions-presets,
  .selection-actions-more-presets,
  .selection-actions-send-shell,
  .selection-actions-expand svg {
    transition: none;
  }

  .selection-actions-spinner {
    animation-duration: 1.4s;
  }
}

@keyframes selection-actions-spin {
  to {
    transform: rotate(360deg);
  }
}

/* One column as wide as the bubble. The implicit `auto` column grew to the content's min-content
   width, and a file chip's percentage cap does not count there, so a long path made the text run
   past the bubble and the chat ask for a column wider than the window. */
.message-content-blocks {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: 10px;
}

.message-content-resize {
  min-width: 0;
}

.message-content-resize[data-resizing="true"],
.agent-queue-panel-resize[data-resizing="true"] {
  overflow: hidden;
  will-change: height;
}

/* Opacity only: a blur filter on text repaints every fading word on each frame. */
.t-stream-w {
  animation: t-stream-in var(--stream-fade) var(--stream-ease) both;
}

@keyframes t-stream-in {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .t-stream-w {
    animation: none;
  }
}

.message-entry-agent .ui-bubble:has(:is(.message-data-table-scroll, .message-code-block)) {
  width: min(720px, 100%);
  max-width: min(720px, 100%);
}

.message-entry-agent .ui-bubble:has(.message-data-table-scroll) > .ui-bubble-content {
  width: 100%;
}

.message-entry-agent .message-shell:has(.message-data-table-scroll) {
  align-items: flex-end;
}

.message-code-block {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
}

.message-code-header {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  border-bottom: 1px solid var(--openbot-border);
  background: var(--openbot-bg-control);
  padding: 4px 6px 4px 10px;
}

.message-code-heading {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.message-code-filename {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-code-language {
  flex: none;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-border);
  padding: 1px 6px;
  color: var(--openbot-text-readable);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: 16px;
}

.message-code-language:only-child {
  font-family: var(--openbot-font-mono);
}

:where(.ui-button).message-code-copy {
  position: relative;
  height: 26px;
  flex: none;
  gap: var(--openbot-space-1);
  border-radius: var(--openbot-radius-sm);
  padding-inline: 7px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
}

@media (hover: hover) and (pointer: fine) {
  :where(.ui-button).message-code-copy:hover:not(:disabled) {
    background: var(--openbot-bg-control-active);
    box-shadow: 0 0 0 1px var(--openbot-border-strong);
    color: var(--openbot-text-primary);
  }
}

:where(.ui-button).message-code-copy:active:not(:disabled) {
  transform: scale(0.96);
}

:where(.ui-button).message-code-copy::after {
  position: absolute;
  width: 40px;
  height: 40px;
  content: "";
}

.message-code-copy-icons {
  position: relative;
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  display: grid;
  place-items: center;
}

.message-code-copy-icons > span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  filter: blur(4px);
  scale: 0.25;
  transition:
    opacity var(--openbot-duration-slow) var(--openbot-ease-out),
    filter var(--openbot-duration-slow) var(--openbot-ease-out),
    scale var(--openbot-duration-slow) var(--openbot-ease-out);
}

.message-code-copy-icons > span[data-visible="true"] {
  opacity: 1;
  filter: blur(0);
  scale: 1;
}

.message-code-copy-icons svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}

.message-code-scroll {
  width: 100%;
  max-height: 420px;
  overflow: auto;
  margin: 0;
  background: var(--openbot-bg-sidebar);
  padding-block: 8px 10px;
  color: var(--openbot-text-secondary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  line-height: 19px;
  /* Only the inline axis: Chromium stops a vertical wheel at a contained block even when the block
     cannot scroll, so the chat would not scroll under the pointer. */
  overscroll-behavior-x: contain;
  tab-size: 2;
}

.message-code-scroll:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: -2px;
}

.message-code-scroll > code {
  min-width: 100%;
  width: max-content;
  display: block;
  font: inherit;
}

.message-code-line {
  min-height: 19px;
  display: flex;
}

.message-code-line-number {
  width: 40px;
  flex: none;
  padding-right: 8px;
  color: var(--openbot-text-dim);
  font-size: var(--openbot-text-sm);
  text-align: right;
  user-select: none;
}

.message-code-line-source {
  min-width: 0;
  padding-right: 12px;
  white-space: pre;
}

.message-code-caret {
  width: 2px;
  height: 13px;
  display: inline-block;
  margin-left: 2px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
  transform: translateY(2px);
}

[data-code-token="cmnt"] {
  color: var(--openbot-text-dim);
  font-style: italic;
}

[data-code-token="kwd"],
[data-code-token="section"] {
  color: var(--openbot-accent-text);
}

[data-code-token="str"],
[data-code-token="insert"] {
  color: var(--openbot-success);
}

[data-code-token="num"],
[data-code-token="bool"],
[data-code-token="class"] {
  color: var(--openbot-warning);
}

[data-code-token="func"],
[data-code-token="type"] {
  color: var(--openbot-text-primary);
}

[data-code-token="oper"],
[data-code-token="esc"] {
  color: var(--openbot-text-muted);
}

[data-code-token="err"],
[data-code-token="deleted"] {
  color: var(--openbot-danger);
}

@media (prefers-reduced-motion: reduce) {
  .message-code-copy-icons > span {
    transition: none;
  }
}

.message-data-table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-radius: var(--openbot-radius-lg);
  overscroll-behavior-inline: contain;
}

.message-data-table-frame {
  width: 100%;
  min-width: 0;
}

/* The copy actions under the table. */
.message-data-table-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-1);
  margin-top: var(--openbot-space-1);
}

.message-data-table-scroll:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}

.message-data-table {
  width: 100%;
  min-width: calc(var(--message-data-table-columns) * 112px);
  overflow: hidden;
  border: 1px solid var(--openbot-data-table-outer-border);
  border-radius: var(--openbot-radius-lg);
  border-spacing: 0;
  background: var(--openbot-bg-surface-raised);
  box-shadow: 0 0 0 0.5px var(--openbot-data-table-ring);
  font-size: var(--openbot-text-md);
}

.message-data-table thead {
  color: var(--openbot-data-table-header-text);
  font-weight: 500;
}

.message-data-table tbody {
  background: var(--openbot-bg-canvas);
}

.message-data-table tbody tr:not(:last-child) td {
  border-bottom: 1px solid var(--openbot-data-table-border);
}

.message-data-table th,
.message-data-table td {
  padding: 9px 12px;
  color: var(--openbot-data-table-text);
  font-weight: inherit;
  overflow-wrap: break-word;
  text-align: left;
  vertical-align: top;
}

.message-data-table thead th {
  border-bottom: 1px solid var(--openbot-data-table-border);
  padding-top: 7px;
  padding-bottom: 7px;
  color: var(--openbot-data-table-header-text);
}

.message-data-table th:not(:last-child),
.message-data-table td:not(:last-child) {
  border-right: 1px solid var(--openbot-data-table-border);
}

/* Links and code can be one long token. Break them inside the column, so they do not make the
   table wider than the message. Auto table layout sizes a column to its longest plain word, so a
   short column does not split a word. */
:is(.message-data-table, .message-markdown-table) :is(th, td) :is(a, code) {
  overflow-wrap: anywhere;
}

.message-data-table [data-align="center"] {
  text-align: center;
}

.message-data-table [data-align="right"] {
  text-align: right;
}

.message-comparison-table-yes {
  color: var(--openbot-success);
}

.message-comparison-table-no {
  color: var(--openbot-data-table-header-text);
}

.message-link {
  border-radius: var(--openbot-radius-xs);
  color: inherit;
  font-weight: 560;
  text-decoration-color: var(--openbot-text-muted);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition:
    color var(--openbot-duration-hover) ease,
    text-decoration-color var(--openbot-duration-hover) ease;
}

.message-link-icon {
  position: relative;
  display: inline-flex;
  width: 14px;
  height: 14px;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
  color: currentColor;
  vertical-align: -2px;
}

.message-link-icon img,
.message-link-fallback {
  width: 14px;
  height: 14px;
}

.message-link-icon img {
  position: absolute;
  inset: 0;
  border-radius: var(--openbot-radius-xs);
  object-fit: contain;
}

.message-link-fallback {
  opacity: 0.72;
}

.message-link:hover {
  color: var(--openbot-text-primary);
  text-decoration-color: currentColor;
}

.message-link:focus-visible {
  outline: 2px solid var(--openbot-text-secondary);
  outline-offset: 2px;
}

.message-citation {
  position: relative;
  display: inline;
}

.message-citation-mark {
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  margin: 0 2px;
  border: 0;
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-bg-control-hover);
  padding: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  vertical-align: 4px;
  transition:
    background var(--openbot-duration-hover) ease,
    color var(--openbot-duration-hover) ease;
}

.message-citation-mark:hover,
.message-citation-mark:focus-visible {
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
}

.message-citation-mark:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}

.anchored-tooltip {
  position: fixed;
  z-index: var(--openbot-layer-tooltip);
  box-sizing: border-box;
  width: max-content;
  max-width: min(280px, calc(100vw - 16px));
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface-raised);
  padding: 6px 8px;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: 500;
  line-height: 15px;
  overflow-wrap: anywhere;
  pointer-events: none;
  text-align: left;
  white-space: normal;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity var(--openbot-duration-fast) ease,
    transform var(--openbot-duration-fast) ease;
}

.anchored-tooltip[data-placement="bottom"] {
  transform: translateY(-4px);
}

.anchored-tooltip[data-ready="true"] {
  opacity: 1;
  transform: translateY(0);
}

.anchored-tooltip-light {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-surface-light);
  color: var(--openbot-text-on-light);
}

@media (prefers-reduced-motion: reduce) {
  .anchored-tooltip,
  .anchored-tooltip[data-placement="bottom"],
  .anchored-tooltip[data-ready="true"] {
    transform: none;
  }
}

.message-citation-footer {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  border-top: 1px solid var(--openbot-border);
  padding-top: 10px;
}

.message-citation-ref {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: 425;
  line-height: 18px;
  text-decoration: none;
}

.message-citation-ref .message-citation-mark {
  flex: 0 0 18px;
  margin: 0;
}

.message-citation-ref-label {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-weight: 550;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-citation-separator {
  color: var(--openbot-text-dim);
}

.message-citation-ref-host {
  color: var(--openbot-text-muted);
  white-space: nowrap;
}

.message-citation-arrow {
  display: flex;
  width: 14px;
  height: 14px;
  margin-left: -2px;
  color: var(--openbot-text-dim);
  opacity: 0;
  transform: rotate(45deg) translate(-1px, 1px);
  transition:
    color var(--openbot-duration-hover) ease,
    opacity var(--openbot-duration-hover) ease,
    transform var(--openbot-duration-hover) ease;
}

.message-citation-arrow svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}

.message-citation-ref:hover,
.message-citation-ref:focus-visible {
  color: var(--openbot-text-secondary);
}

.message-citation-ref:hover .message-citation-arrow,
.message-citation-ref:focus-visible .message-citation-arrow {
  color: var(--openbot-text-secondary);
  opacity: 1;
  transform: rotate(45deg) translate(0, 0);
}

.message-citation-ref:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 3px;
}

[data-slot="bubble"][data-author="user"] .message-citation-mark {
  background: var(--openbot-surface-light);
  color: var(--openbot-text-muted-on-light);
}

[data-slot="bubble"][data-author="user"] .message-citation-mark:hover,
[data-slot="bubble"][data-author="user"] .message-citation-mark:focus-visible {
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent);
}

[data-slot="bubble"][data-author="user"] .message-citation-footer {
  border-top-color: var(--openbot-border-on-light);
}

[data-slot="bubble"][data-author="user"] .message-citation-ref-label {
  color: var(--openbot-text-on-light);
}

[data-slot="bubble"][data-author="user"] .message-citation-ref-host {
  color: var(--openbot-text-muted-on-light);
}

[data-slot="bubble"][data-author="user"] .message-citation-separator {
  color: var(--openbot-text-dim-on-light);
}

.message-reply-context {
  max-width: 360px;
  margin: -1px 0 7px;
  border-left: 2px solid var(--openbot-text-dim);
  padding-left: 8px;
  color: var(--openbot-text-secondary);
}

.message-reply-context span {
  display: block;
  margin-bottom: 1px;
  font-size: var(--openbot-text-sm);
  font-weight: 550;
  line-height: 14px;
}

.message-reply-context p {
  overflow: hidden;
  margin: 0;
  font-size: var(--openbot-text-sm);
  line-height: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-slot="bubble"][data-author="user"] .message-reply-context {
  border-left-color: var(--openbot-border-strong);
  color: var(--openbot-text-readable);
}

/* A quote that opens its original. The button lies over the whole quote, its left mark included. */
.message-reply-context[data-opens] {
  position: relative;
  transition: border-left-color var(--openbot-duration-hover) var(--openbot-ease-out);
}

/* The spinner takes the right column; the author and the text flow into the left one. */
.message-reply-context[data-loading] {
  display: grid;
  align-items: center;
  column-gap: var(--openbot-space-2);
  grid-template-columns: minmax(0, 1fr) auto;
}

.message-reply-context[data-opens]:hover {
  border-left-color: var(--openbot-accent);
}

.message-reply-context .message-reply-open,
.message-reply-context .message-reply-open:hover:not(:disabled):not([data-disabled]) {
  position: absolute;
  z-index: 1;
  inset: 0 0 0 -2px;
  width: auto;
  height: auto;
  min-height: 0;
  border-radius: var(--openbot-radius-xs);
  background: none;
  padding: 0;
  cursor: pointer;
}

.message-reply-context .message-reply-open:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}

.message-reply-loading {
  width: 14px;
  height: 14px;
  grid-column: 2;
  grid-row: 1 / span 2;
  animation: message-reply-spin 0.8s linear infinite;
}

.message-reply-context[data-unavailable] {
  border-left-style: dashed;
}

.message-reply-unavailable {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
  margin: -1px 0 7px;
  font-size: var(--openbot-text-sm);
  line-height: 15px;
}

.message-reply-unavailable-icon {
  width: 13px;
  height: 13px;
  flex: none;
}

@keyframes message-reply-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .message-reply-loading {
    animation: none;
  }
}

[data-slot="bubble"][data-author="user"] .message-copy {
  font-size: var(--openbot-text-lg);
}

.message-tag-unavailable {
  display: inline-flex;
  height: 22px;
  align-items: center;
  gap: 4px;
  margin: 0 1px;
  border: 1px dashed var(--openbot-border-strong);
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  padding: 0 6px;
  color: var(--openbot-text-muted);
  font: inherit;
  line-height: 20px;
  vertical-align: middle;
  white-space: nowrap;
}

.message-agent-tag .agent-avatar {
  --agent-avatar-optical-offset: -2px;

  width: 16px;
  height: 16px;
}

.message-file-reference,
.composer-file-reference {
  --file-reference-color: var(--openbot-file-default);
  --file-reference-soft: var(--openbot-file-default-soft);

  display: inline-flex;
  min-width: 0;
  max-width: min(240px, calc(100% - 8px));
  align-items: center;
  gap: 4px;
  margin: 0 1px;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  padding: 1px 6px 1px 3px;
  color: var(--file-reference-color);
  font: inherit;
  font-weight: 550;
  line-height: 20px;
  vertical-align: middle;
  white-space: nowrap;
  transition:
    background-color var(--openbot-duration-hover) ease,
    color var(--openbot-duration-hover) ease;
}

/* Keep message references in inline flow. Flex/grid children make Chromium add line breaks to
   copied selections, even when the child is an icon that cannot be selected. The chip shows the
   ellipsis itself: a percentage cap on the name resolves against the chip's shrink-to-fit width,
   so it cut short names. */
.reference-chip.message-reference-chip,
.message-file-reference {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: text;
}

/* A table measures its columns before it knows their widths, so the percentage cap above does not
   apply there, and a long path makes its column as wide as the path. A fixed cap keeps it short. */
:is(.message-data-table, .message-markdown-table) .message-file-reference {
  max-width: 240px;
}

:is(
  .message-file-reference,
  .composer-file-reference,
  .attachment-file-visual,
  .files-file-visual,
  .composer-attachment-preview
)[data-file-tone="source"] {
  --file-reference-color: var(--openbot-file-blue);
  --file-reference-soft: var(--openbot-file-blue-soft);
}

:is(
  .message-file-reference,
  .composer-file-reference,
  .attachment-file-visual,
  .files-file-visual,
  .composer-attachment-preview
)[data-file-tone="script"] {
  --file-reference-color: var(--openbot-file-yellow);
  --file-reference-soft: var(--openbot-file-yellow-soft);
}

:is(
  .message-file-reference,
  .composer-file-reference,
  .attachment-file-visual,
  .files-file-visual,
  .composer-attachment-preview
)[data-file-tone="markup"] {
  --file-reference-color: var(--openbot-file-orange);
  --file-reference-soft: var(--openbot-file-orange-soft);
}

:is(
  .message-file-reference,
  .composer-file-reference,
  .attachment-file-visual,
  .files-file-visual,
  .composer-attachment-preview
)[data-file-tone="style"] {
  --file-reference-color: var(--openbot-file-teal);
  --file-reference-soft: var(--openbot-file-teal-soft);
}

:is(
  .message-file-reference,
  .composer-file-reference,
  .attachment-file-visual,
  .files-file-visual,
  .composer-attachment-preview
)[data-file-tone="data"] {
  --file-reference-color: var(--openbot-file-green);
  --file-reference-soft: var(--openbot-file-green-soft);
}

:is(
  .message-file-reference,
  .composer-file-reference,
  .attachment-file-visual,
  .files-file-visual,
  .composer-attachment-preview
)[data-file-tone="document"] {
  --file-reference-color: var(--openbot-file-red);
  --file-reference-soft: var(--openbot-file-red-soft);
}

:is(
  .message-file-reference,
  .composer-file-reference,
  .attachment-file-visual,
  .files-file-visual,
  .composer-attachment-preview
)[data-file-tone="media"] {
  --file-reference-color: var(--openbot-file-pink);
  --file-reference-soft: var(--openbot-file-pink-soft);
}

.inline-file-reference-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-button.message-file-reference {
  height: 22px;
  cursor: pointer;
}

.ui-button.message-file-reference:focus-visible,
.composer-file-reference:focus-visible {
  outline: 2px solid var(--file-reference-color);
  outline-offset: 2px;
  box-shadow: none;
}

.attachment-reference-visual {
  display: inline-grid;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--openbot-radius-xs);
  background: var(--file-reference-soft);
  color: var(--file-reference-color);
}

.attachment-reference-visual[data-badge-length="3"] {
  width: 20px;
}

.attachment-reference-visual[data-badge-length="4"] {
  width: 24px;
}

.attachment-reference-visual > span {
  font-size: var(--openbot-glyph-sm);
  font-weight: 750;
  letter-spacing: -0.2px;
  line-height: 1;
}

.attachment-reference-visual[data-badge-length="4"] > span {
  font-size: var(--openbot-glyph-xs);
  letter-spacing: -0.4px;
}

/* The page icon is on a 20-unit grid, so its stroke is scaled to match lucide's 24, as `.ui-glyph-20` does. */
.attachment-reference-visual > svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: calc(var(--openbot-icon-stroke) * 20 / 24);
}

[data-slot="bubble"][data-author="user"] .message-file-reference {
  color: var(--file-reference-color);
}

@media (hover: hover) and (pointer: fine) {
  .ui-button.message-file-reference:hover:not(:disabled),
  .composer-file-reference:hover {
    background-color: var(--file-reference-soft);
    color: var(--file-reference-color);
  }
}

@media (hover: none), (pointer: coarse) {
  .message-file-reference,
  .composer-file-reference {
    max-width: calc(100% - 8px);
  }
}

/* The action that failed, over the text of the failure. Only an error bubble draws one. */
.message-error-label {
  margin: 0 0 var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}

.attachment-file-visual {
  --file-reference-color: var(--openbot-file-default);
  --file-reference-soft: var(--openbot-file-default-soft);

  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border-radius: var(--openbot-radius-md);
  background: var(--file-reference-soft);
  color: var(--file-reference-color);
}

.attachment-file-visual svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}

.choice-card {
  display: grid;
  width: min(540px, 100%);
  gap: var(--openbot-space-4);
}

.choice-card-hint {
  margin: calc(-1 * var(--openbot-space-2)) 0 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
  overflow-wrap: anywhere;
}
.choice-options {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface);
}

.choice-option {
  display: flex;
  width: 100%;
  min-height: var(--openbot-control-xl);
  align-items: center;
  gap: var(--openbot-space-2);
  border: 0;
  border-bottom: 1px solid var(--openbot-border);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-lg);
  text-align: left;
  overflow-wrap: anywhere;
}

.choice-option-item:last-child .choice-option {
  border-bottom: 0;
}

.choice-option-item:not([data-disabled]) .choice-option:hover,
.choice-option-selected {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}

.choice-option-item:focus-within .choice-option {
  outline: 1px solid var(--openbot-border-focus);
  outline-offset: -1px;
}

.choice-option-item[data-disabled] {
  opacity: 0.5;
}

.choice-key {
  display: grid;
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-muted);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
}

.choice-input {
  width: 100%;
  min-width: 0;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface);
  font-size: var(--openbot-text-lg);
}

.choice-input::placeholder {
  color: var(--openbot-text-muted);
}

/* Inline icons align to the top of the chip's line, not to `middle`, which sets them by the text's
   x-height and puts them below the centre of the name. */
.reference-chip.message-reference-chip .reference-chip-icon,
.message-file-reference .attachment-reference-visual {
  display: inline-block;
  margin-right: var(--openbot-space-1);
  text-align: center;
  vertical-align: top;
  user-select: none;
}

/* A file chip's line is 20px high and its icon 16px. */
.message-file-reference .attachment-reference-visual {
  margin-top: var(--openbot-space-0-5);
  font-size: var(--openbot-glyph-sm);
  line-height: var(--openbot-space-4);
}

.message-file-reference .attachment-reference-visual[data-badge-length="4"] {
  font-size: var(--openbot-glyph-xs);
}

.reference-chip.message-reference-chip .agent-avatar {
  display: inline-block;
  height: var(--openbot-space-4);
  vertical-align: top;
}

/* The page icon is 12px in the 16px badge. */
.message-file-reference .attachment-reference-visual > svg {
  display: inline;
  margin-top: var(--openbot-space-0-5);
  vertical-align: top;
}

.reference-chip.message-reference-chip .reference-chip-icon > svg,
.reference-chip.message-reference-chip .agent-avatar > svg {
  display: inline;
  vertical-align: top;
}

/* A line icon is 12px in the 16px box, as the page icon of a file chip is. */
.reference-chip.message-reference-chip .reference-chip-icon > svg.lucide {
  margin-top: var(--openbot-space-0-5);
}

/* The face is 128% of the avatar. The grid avatar centres it; inline, half the excess goes left and up. */
.reference-chip.message-reference-chip .agent-avatar > svg {
  margin: -14% 0 0 -14%;
}

.reference-chip.message-reference-chip .reference-chip-name,
.message-file-reference .inline-file-reference-name {
  display: inline;
}

.reference-chip.message-reference-chip > .sr-only {
  user-select: none;
}


/* /@fs//app/packages/ui/src/features/conversation/styles/math.css */
/* KaTeX output. `katex.min.css` owns the formula layout; these rules only place it in a message. */
.message-math-display {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

/* KaTeX gives display math a vertical margin; the message already spaces its blocks. */
.message-math-display > * {
  margin: 0;
  padding: var(--openbot-space-1) 0;
}


/* /@fs//app/packages/ui/src/features/conversation/styles/code-preview.css */
/* A ```html or ```mermaid block drawn in the code block's frame, and its larger dialog. */
.message-code-actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--openbot-space-0-5);
}

/* The same icon size as Copy beside it. */
.message-preview-expand svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}

/* The Preview and Code switch, sized to the header's buttons. */
.ui-sliding-tabs.message-preview-switch {
  gap: var(--openbot-space-0-5);
  padding: var(--openbot-space-0-5);
}

.message-preview-switch .ui-sliding-tabs-trigger {
  height: 22px;
  padding: 0 var(--openbot-space-2);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
}

.message-preview-switch .ui-sliding-tabs-pill {
  top: var(--openbot-space-0-5);
  height: 22px;
}

/* The two views share one cell. Only the selected view sets the height, so the block eases from
   one height to the other while the views cross-fade. */
.message-preview-resize {
  overflow: hidden;
}

.message-preview-views {
  position: relative;
}

.message-preview-view:not([data-selected]) {
  position: absolute;
  inset: 0 0 auto;
}

.message-preview-body {
  width: 100%;
  display: grid;
  place-items: center;
  background: var(--openbot-bg-sidebar);
}

.message-preview-body[data-preview-kind="mermaid"] {
  max-height: 420px;
  overflow: auto;
  padding: var(--openbot-space-3);
  overscroll-behavior-x: contain;
}

/* The frame takes the page height that the app measures, up to the height of a code block. The
   page scrolls inside the frame beyond that. */
.message-preview-frame {
  width: 100%;
  height: min(var(--message-preview-height, 160px), 420px);
  display: block;
  border: 0;
  background: var(--openbot-bg-sidebar);
}

.message-preview-diagram {
  max-width: 100%;
  height: auto;
  display: block;
}

.message-preview-status {
  margin: 0;
  padding: var(--openbot-space-6) var(--openbot-space-3);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

/* Why Mermaid could not draw the diagram, above its code. */
.message-preview-failure {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  border-bottom: 1px solid var(--openbot-border);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-xs);
}

/* Mermaid points at the error with a caret line, which lines up only in a monospace font. */
.message-preview-failure-detail {
  flex-basis: 100%;
  margin: 0;
  overflow-x: auto;
  font-family: var(--openbot-font-mono);
  white-space: pre;
}

/* The preview animates its backdrop from script, with the surface. */
.message-preview-backdrop {
  animation: none;
}

.message-preview-dialog {
  width: min(1100px, 100%);
  height: calc(100dvh - var(--openbot-space-6) * 2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  outline: 0;
  border-radius: var(--openbot-radius-xl);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-primary);
  /* The dialog grows from the block that opened it: the block's corner is the fixed point. */
  transform-origin: 0 0;
}

/* Hidden until its first frame of motion, so it never shows at full size before it grows. */
.message-preview-dialog:not([data-shown]) {
  opacity: 0;
}

.message-preview-dialog-header {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-4);
  border-bottom: 1px solid var(--openbot-border);
}

.message-preview-dialog-title {
  margin: 0;
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
}

.message-preview-dialog-body {
  min-height: 0;
  flex: 1;
  display: grid;
  overflow: auto;
  background: var(--openbot-bg-sidebar);
}

/* The diagram canvas fills the dialog body and moves inside it, so the body does not scroll. */
.message-preview-dialog-body[data-preview-kind="mermaid"] {
  overflow: hidden;
}

.message-preview-canvas {
  position: relative;
  min-height: 0;
  overflow: hidden;
}

.message-preview-canvas-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  outline: 0;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.message-preview-canvas-viewport[data-dragging] {
  cursor: grabbing;
}

.message-preview-canvas-viewport:focus-visible {
  box-shadow: inset 0 0 0 2px var(--openbot-border-focus);
}

/* Hidden until it has its first place, so it never shows at its drawn size in a corner. */
.message-preview-canvas-image {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  height: auto;
  opacity: 0;
  transform-origin: 0 0;
  -webkit-user-drag: none;
}

.message-preview-canvas-image[data-ready] {
  opacity: 1;
}

.message-preview-canvas-image[data-settling] {
  transition:
    transform var(--openbot-duration-slow) var(--openbot-ease-out),
    width var(--openbot-duration-slow) var(--openbot-ease-out);
}

/* The zoom controls float over the bottom of the canvas. */
.message-preview-zoom {
  position: absolute;
  bottom: var(--openbot-space-4);
  left: 50%;
  display: flex;
  align-items: center;
  gap: var(--openbot-space-0-5);
  translate: -50% 0;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-overlay);
  box-shadow: 0 0 0 1px var(--openbot-border);
  padding: var(--openbot-space-1);
}

.message-preview-zoom .ui-button {
  border-radius: var(--openbot-radius-pill);
}

:where(.ui-button).message-preview-zoom-level {
  min-width: 56px;
  font-variant-numeric: tabular-nums;
}

.message-preview-dialog-body .message-preview-frame {
  height: 100%;
}


/* /@fs//app/packages/ui/src/features/conversation/styles/chat-visual.css */
/* A visual reply: an agent's page with no card of its own. */
.chat-visual-frame {
  width: 100%;
  min-width: 0;
  display: block;
  border: 0;
  background: transparent;
  /* The page also uses the dark scheme, so its canvas stays transparent. */
  color-scheme: dark;
}

/*
 * A page in the chat starts at the edge of the agent's reply below it (an agent chat shows no avatar
 * column) and is as wide as a wide agent bubble.
 */
.chat-visual-reply {
  max-width: 720px;
}

/* A page that fills a panel. The page has no margin, so the frame gives it one. */
.chat-visual-frame-fill {
  box-sizing: border-box;
  height: 100%;
  padding: 12px 16px;
}

/* The box of a page that loads or that the app cannot get. */
.chat-visual-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-xs);
}


/* /@fs//app/packages/ui/src/features/conversation/styles/composer.css */
.composer-wrap {
  position: relative;
  flex: 0 0 auto;
  padding: 0 var(--openbot-space-1-5) var(--openbot-space-1-5);
}

.team-typing-dots {
  display: flex;
  align-items: center;
  gap: 2px;
}

.team-typing-dots i {
  width: 3px;
  height: 3px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success);
  animation: typing-dot-pulse 900ms ease-in-out infinite;
}

.team-typing-dots i:nth-child(2) {
  animation-delay: var(--openbot-duration-fast);
}

.team-typing-dots i:nth-child(3) {
  animation-delay: var(--openbot-duration-overlay);
}

@media (prefers-reduced-motion: reduce) {
  .agent-row-thinking-dots i,
  .team-typing-dots i,
  .image-generation-dots,
  .image-generation-glow,
  .image-generation-canvas,
  .image-generation-preview,
  .image-generation-label,
  /* Matches the scoped shimmer above, which outranks the bare class on its own. */
  .image-generation:not(.image-generation-ready, .image-generation-failed) .image-generation-label,
  .agent-activity-label {
    animation: none;
    transition: none;
  }

  .image-generation-hover-download {
    transition: none;
  }
}

@media (hover: none), (pointer: coarse) {
  .image-generation-hover-download {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
}

@media (max-width: 620px) {
  .message-entry-agent .ui-bubble:has(.image-generation) {
    width: 100%;
    max-width: 100%;
  }

  .image-generation-stage,
  .image-generation-meta {
    width: 100%;
  }
}

.composer-reply-preview {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 10px;
  margin: 0 10px 6px;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  padding: 6px 8px 6px 12px;
  box-shadow: 0 7px 22px var(--openbot-shadow-popover-ambient);
}

.composer-reply-preview > div {
  min-width: 0;
  flex: 1;
}

.composer-reply-preview span {
  display: block;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: 550;
  line-height: 14px;
}

.composer-reply-preview p {
  overflow: hidden;
  margin: 1px 0 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composer-reply-preview > button {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  background: transparent;
  color: var(--openbot-text-muted);
}

.composer-reply-preview > button:hover {
  background: var(--openbot-border);
  color: var(--openbot-text-secondary);
}

.composer {
  position: relative;
  z-index: 11;
  display: grid;
  max-width: none;
  min-height: 96px;
  gap: 4px;
  margin: 0 auto;
  border: 0.5px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  padding: 10px;
  box-shadow: none;
  transition:
    border-color var(--openbot-duration-hover) var(--openbot-ease-out),
    box-shadow var(--openbot-duration-hover) var(--openbot-ease-out);
}

.composer[data-compact] {
  grid-template-columns: 28px minmax(0, 1fr) auto;
  min-height: 48px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
}

.composer:focus-within {
  border-color: var(--openbot-text-dim);
  box-shadow: 0 0 0 3px var(--openbot-hover);
}

.composer:has(.composer-editor-surface[aria-disabled="true"]) {
  border-color: var(--openbot-border);
}

.composer button:disabled,
.composer-editor-surface[aria-disabled="true"] {
  cursor: default;
}

.composer-button,
.dictation-button,
.voice-button {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  /* Without this the button primitive's inline padding outgrows the 28px width
     under border-box sizing and stretches the circle into a pill. */
  padding: 0;
  background: var(--openbot-hover);
  color: var(--openbot-text-secondary);
  transition:
    background-color var(--openbot-duration-hover) var(--openbot-ease-out),
    color var(--openbot-duration-hover) var(--openbot-ease-out),
    transform var(--openbot-duration-fast) var(--openbot-ease-out);
}

.composer-button:hover {
  background: var(--openbot-border);
  color: var(--openbot-text-primary);
}

.composer-primary-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.voice-model-progress {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  white-space: nowrap;
}

/* The microphone melts into the recording bar and Finish buds off Send; VoiceRecordingMorph.tsx
   explains the goo filter. Opening uses a spring (stiffness 320, damping 17, sampled). Closing
   does not bounce: an undershoot would squeeze the microphone below its own size. */
.voice-morph {
  --voice-morph-duration: 600ms;
  --voice-morph-exit-duration: 360ms;
  --voice-morph-ease: linear(
    0,
    0.057 3.3%,
    0.199 6.7%,
    0.386 10%,
    0.587 13.3%,
    0.773 16.7%,
    0.93 20%,
    1.049 23.3%,
    1.128 26.7%,
    1.171 30%,
    1.183 33.3%,
    1.172 36.7%,
    1.146 40%,
    1.111 43.3%,
    1.075 46.7%,
    1.041 50%,
    1.012 53.3%,
    0.991 56.7%,
    0.976 60%,
    0.967 66.7%,
    0.974 73.3%,
    0.987 80%,
    0.998 86.7%,
    1.004 93.3%,
    1
  );
  --voice-bar-width: 152px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}

.voice-morph-filter {
  position: absolute;
  width: 0;
  height: 0;
}

/* Inset past the controls so the blur is not cut off at the layer edge. */
.voice-morph-goo {
  position: absolute;
  inset: -12px;
  pointer-events: none;
}

/* The goo threshold needs opaque shapes, so the layer, not the shape, carries the
   --openbot-hover transparency of the microphone button. */
.voice-morph-goo-bar {
  opacity: 0.06;
}

.voice-morph-bar,
.voice-morph-send-blob,
.voice-morph-finish-blob {
  position: absolute;
  top: 12px;
  height: 28px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-primary);
}

.voice-morph-bar {
  right: 46px;
  width: 28px;
  transition: width var(--voice-morph-exit-duration) var(--openbot-ease-out);
}

.voice-morph-send-blob,
.voice-morph-finish-blob {
  right: 12px;
  width: 28px;
  opacity: 0;
  transition: opacity 0s linear var(--voice-morph-exit-duration);
}

.voice-morph-finish-blob {
  transform: scale(0.5);
  transition:
    transform var(--voice-morph-exit-duration) var(--openbot-ease-out),
    opacity 0s linear var(--voice-morph-exit-duration);
}

.voice-morph[data-recording] .voice-morph-bar {
  width: var(--voice-bar-width);
  transition: width var(--voice-morph-duration) var(--voice-morph-ease);
}

.voice-morph[data-recording] .voice-morph-send-blob {
  opacity: 1;
  transition: none;
}

.voice-morph[data-recording] .voice-morph-finish-blob {
  opacity: 1;
  transform: translateX(-34px) scale(0.8);
  transition: transform var(--voice-morph-duration) var(--voice-morph-ease);
}

/* Positioned, so the controls paint over the goo layers before them. */
.voice-morph-send {
  position: relative;
  display: flex;
}

.voice-morph-slot {
  position: relative;
  display: flex;
  width: 28px;
  height: 28px;
  justify-content: flex-end;
  transition: width var(--voice-morph-exit-duration) var(--openbot-ease-out);
}

.voice-morph[data-recording] .voice-morph-slot {
  width: var(--voice-bar-width);
  transition: width var(--voice-morph-duration) var(--voice-morph-ease);
}

.voice-morph .dictation-button {
  background: transparent;
}

.voice-recording-status {
  display: flex;
  width: 100%;
  min-width: 0;
  height: 28px;
  align-items: center;
  gap: 4px;
  margin: 0;
  border: 0;
  overflow: hidden;
  padding: 0 3px 0 12px;
  color: var(--openbot-text-secondary);
  animation: voice-morph-content-in var(--openbot-duration-slow) var(--openbot-ease-out) var(--openbot-duration-fast)
    both;
}

.voice-waveform {
  display: flex;
  min-width: 0;
  height: 20px;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, currentColor 24px);
}

.voice-waveform-track {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 3px;
}

/* Quiet dots stay round; speech stretches them into bars. */
.voice-waveform-dot {
  width: 3px;
  height: calc(3px + var(--voice-level, 0) * 15px);
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-pill);
  background: currentColor;
}

.voice-recording-cancel,
.voice-recording-finish {
  display: grid;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  padding: 0;
  background: transparent;
  transition:
    background-color var(--openbot-duration-hover) var(--openbot-ease-out),
    color var(--openbot-duration-hover) var(--openbot-ease-out),
    transform var(--openbot-duration-fast) var(--openbot-ease-out);
}

.voice-recording-cancel {
  color: var(--openbot-text-secondary);
}

.voice-recording-finish {
  color: var(--openbot-bg-sidebar);
  animation: voice-morph-content-in var(--openbot-duration-slow) var(--openbot-ease-out) var(--openbot-duration-overlay)
    both;
}

/* Cancel sits on the bar itself, so its hover disc stays faint, like the bar. */
.voice-morph .voice-recording-cancel:hover:not(:disabled) {
  background: color-mix(in srgb, var(--openbot-text-primary) 10%, transparent);
  color: var(--openbot-text-primary);
}

.voice-recording-cancel:active,
.voice-recording-finish:active {
  transform: scale(0.94);
}

.voice-recording-cancel svg,
.voice-recording-finish svg {
  width: 14px;
  height: 14px;
}

.voice-recording-finish svg {
  stroke-width: 3;
}

@keyframes voice-morph-content-in {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .voice-morph *,
  .voice-recording-status,
  .voice-recording-finish {
    transition: none;
    animation: none;
  }
}

.dictation-button:hover:not(:disabled) {
  background: var(--openbot-border);
  color: var(--openbot-text-primary);
}

.composer-button svg,
.dictation-button svg,
.voice-button svg {
  width: 16px;
  height: 16px;
}

.composer-spinner {
  animation: ui-spin 720ms linear infinite;
}

.voice-button {
  background: var(--openbot-text-primary);
  color: var(--openbot-bg-sidebar);
}

.voice-button-active {
  background: var(--openbot-text-primary);
  color: var(--openbot-bg-sidebar);
}

/* Light circles only dim on hover. The ghost button hover is more specific and would turn them dark. */
.voice-button:hover:not(:disabled),
.voice-button.ui-button:hover:not(:disabled),
.voice-morph .voice-recording-finish:hover:not(:disabled) {
  background: color-mix(in srgb, var(--openbot-text-primary) 84%, var(--openbot-bg-sidebar));
  color: var(--openbot-bg-sidebar);
}

.composer-input-label,
.composer-editor-root {
  --composer-editor-max-height: max(48px, 33dvh);
}

.composer-input-label {
  display: flex;
  min-width: 0;
  min-height: 48px;
  max-height: var(--composer-editor-max-height);
  align-items: flex-end;
  cursor: text;
}

.composer-toolbar {
  display: flex;
  min-height: 28px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.composer[data-compact] .composer-input-label {
  grid-column: 2;
  grid-row: 1;
  min-height: 28px;
}

.composer[data-compact] .composer-toolbar {
  display: contents;
}

.composer[data-compact] .composer-toolbar > .composer-button {
  grid-column: 1;
  grid-row: 1;
}

.composer[data-compact] .composer-toolbar > .composer-primary-actions {
  grid-column: 3;
  grid-row: 1;
}

.composer[data-compact] .composer-editor-root,
.composer[data-compact] .composer-editor-surface {
  min-height: 28px;
}

.composer[data-compact] .composer-editor-surface {
  padding: 4px 0;
}

.composer[data-compact] .composer-editor-placeholder {
  top: 4px;
  left: 0;
}

.composer[data-has-attachments] .composer-input-label,
.composer[data-has-attachments] .composer-editor-root,
.composer[data-has-attachments] .composer-editor-surface {
  min-height: 28px;
}

.composer[data-has-attachments] .composer-editor-surface {
  padding: 4px;
}

.composer[data-has-attachments] .composer-editor-placeholder {
  top: 4px;
}

.composer-editor-root {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  max-height: var(--composer-editor-max-height);
  cursor: text;
}

.composer-editor-surface {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  min-height: 48px;
  max-height: var(--composer-editor-max-height);
  margin: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  resize: none;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 2px 4px 8px;
  caret-color: var(--openbot-text-primary);
  color: var(--openbot-text-primary);
  cursor: text;
  font-size: var(--openbot-text-lg);
  line-height: 20px;
  white-space: pre-wrap;
  word-break: break-word;
  user-select: text;
}

.composer-editor-surface[aria-disabled="true"] {
  pointer-events: none;
}

/*
 * Live dictation: ComposerEditor.tsx explains the read-only copy that shows in place of the editor.
 * The editor stays focusable under the copy, so keys still edit and send the draft, and screen
 * readers keep the textbox. The copy scrolls a long draft and gives a click to the editor.
 */
.composer-editor-root[data-dictating] > [role="textbox"] {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.composer-dictation-draft {
  display: inline;
}

.composer-dictation-word {
  animation: composer-dictation-word-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
  transition: color var(--openbot-duration-slow) var(--openbot-ease-out);
}

.composer-dictation-word[data-interim] {
  color: var(--openbot-text-muted);
}

.composer-dictation-caret {
  display: inline-block;
  width: 2px;
  height: 16px;
  margin-left: 2px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
  vertical-align: -3px;
  animation: composer-dictation-caret 1s ease-in-out infinite;
}

.composer-dictation[data-final] .composer-dictation-caret {
  display: none;
}

@keyframes composer-dictation-word-in {
  from {
    opacity: 0;
    filter: blur(2px);
  }
}

@keyframes composer-dictation-caret {
  50% {
    opacity: 0.2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .composer-dictation-word,
  .composer-dictation-caret {
    transition: none;
    animation: none;
  }
}

.composer-editor-placeholder {
  position: absolute;
  top: 2px;
  left: 4px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-lg);
  line-height: 20px;
  pointer-events: none;
  user-select: none;
}

/* The compact editor has the sizes of the compact composer. */
.composer-editor-root[data-size="compact"],
.composer-editor-root[data-size="compact"] .composer-editor-surface {
  min-height: 28px;
}

.composer-editor-root[data-size="compact"] .composer-editor-surface {
  padding: 4px 0;
}

.composer-editor-root[data-size="compact"] .composer-editor-placeholder {
  top: 4px;
  left: 0;
}

/* The box comes from `.reference-chip`; this token only loses the chip fill and gains the outline. */
.composer-mention-token.composer-tag-unavailable {
  border: 1px dashed var(--openbot-border-strong);
  background: transparent;
  /* No leading icon, so the left inset matches the right one. */
  padding-left: var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
}

.composer-file-reference {
  height: 24px;
  cursor: pointer;
  user-select: none;
}

/*
 * Hangs off the composer's top edge inside `.composer-wrap`, like `.agent-queue-panel`: the
 * composer paints over the overlap, so the panel grows out from under the input. The bottom comes
 * from the composer's measured height, which changes as the input grows.
 */
.mention-picker {
  --mention-picker-overlap: 14px;
  --mention-picker-side-inset: calc(var(--openbot-space-1-5) + 12px);
  --mention-picker-row-height: 29px;
  --mention-picker-gutter: 5px;
  --mention-picker-visible-rows: 7;

  position: absolute;
  z-index: 10;
  right: var(--mention-picker-side-inset);
  bottom: calc(var(--mention-picker-bottom, 0px) - var(--mention-picker-overlap));
  left: var(--mention-picker-side-inset);
  border: 1px solid var(--openbot-queue-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-queue-surface);
  padding-bottom: var(--mention-picker-overlap);
  color: var(--openbot-queue-text);
  box-shadow: none;
  transform-origin: bottom center;
  animation: mention-picker-in var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1) both;
}

/*
 * The scroll lives on the list, not the panel, so the scroll fade masks the rows and leaves the
 * panel border and background whole. The scrollbar stays hidden: the fade carries the same news.
 */
.mention-picker-list {
  display: grid;
  /* A plain auto track grows to the widest row, which would push the badges out of view. */
  grid-template-columns: minmax(0, 1fr);
  /*
   * Every row is the same height, so the list can state the height its rows need instead of
   * leaving it to the content. A length on both sides of the change is what lets the panel
   * travel to its new size while the query narrows, rather than jump to it.
   */
  height: calc(var(--mention-picker-rows, 0) * var(--mention-picker-row-height) + 2 * var(--mention-picker-gutter));
  max-height: calc(
    var(--mention-picker-visible-rows) *
    var(--mention-picker-row-height) +
    2 *
    var(--mention-picker-gutter)
  );
  overflow-y: auto;
  /* An even inset all round: the row's own 8px carries the rest of the gap beside the text. */
  padding: var(--mention-picker-gutter);
  overscroll-behavior: contain;
  scrollbar-width: none;
  transition: height var(--openbot-duration-normal) var(--openbot-ease-out);
  will-change: height;
}

.mention-picker-list::-webkit-scrollbar {
  display: none;
}

@keyframes mention-picker-in {
  from {
    opacity: 0;
    transform: translateY(5px) scaleY(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}

/* The queue panel's row rhythm and colors: a 29px row, a small leading glyph, muted trailing text. */
.mention-picker-option {
  display: flex;
  width: 100%;
  /* The list computes its own height from this one, so the two must not drift apart. */
  height: var(--mention-picker-row-height);
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  padding: 0 8px;
  color: var(--openbot-queue-text);
  text-align: left;
}

.mention-picker-file-option .attachment-reference-visual {
  width: 20px;
  height: 20px;
}

.mention-picker-option:hover,
.mention-picker-option-active {
  background: var(--openbot-hover);
}

.mention-picker-option .agent-avatar {
  --agent-avatar-optical-offset: -2px;

  width: 20px;
  height: 20px;
}

.mention-picker-skill-icon {
  display: grid;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  place-items: center;
  color: var(--openbot-queue-action);
}

.mention-picker-skill-icon > svg {
  width: 15px;
  height: 15px;
}

.mention-picker-option > strong {
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  font-size: var(--openbot-text-lg);
  font-weight: 500;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mention-picker-description {
  min-width: 0;
  flex: 1 1 0;
  overflow: hidden;
  color: var(--openbot-queue-action);
  font-size: var(--openbot-text-md);
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Shown only beside a skill whose name another listed skill shares: the slug tells them apart. */
.mention-picker-slug {
  flex: 0 0 auto;
  color: var(--openbot-queue-action);
  font-size: var(--openbot-text-md);
  line-height: 18px;
  white-space: nowrap;
}

/* Takes the list's place when `$` finds nothing, at the height of one row in the list. */
.mention-picker-status {
  display: flex;
  height: calc(var(--mention-picker-row-height) + 2 * var(--mention-picker-gutter));
  align-items: center;
  margin: 0;
  padding: 0 calc(var(--mention-picker-gutter) + 8px);
  color: var(--openbot-queue-action);
  font-size: var(--openbot-text-md);
  line-height: 18px;
}

.mention-picker-badge {
  margin-left: auto;
  flex: 0 0 auto;
  color: var(--openbot-queue-action);
}

.composer-attachments {
  position: relative;
  z-index: 11;
  display: flex;
  width: 100%;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 2px 0 4px;
}

.composer-attachment {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
}

.composer-attachment[data-kind="image"] {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  padding: 0;
}

.composer-attachment[data-kind="file"] {
  width: 220px;
  max-width: 100%;
  height: 52px;
  gap: 10px;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  padding: 7px 12px 7px 8px;
}

.composer-attachment-copy {
  display: block;
  min-width: 0;
  flex: 1;
}

.composer-attachment-copy strong,
.composer-attachment-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composer-attachment-copy strong {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: 500;
  line-height: 16px;
}

.composer-attachment-copy small {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 14px;
}

.composer-attachment-preview {
  display: grid;
  width: 36px;
  height: 36px;
  overflow: hidden;
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--openbot-radius-md);
  background: var(--file-reference-soft, var(--openbot-hover));
  color: var(--file-reference-color, var(--openbot-text-muted));
  font-size: var(--openbot-text-sm);
  font-weight: 700;
  line-height: 1;
}

.composer-attachment[data-kind="image"] .composer-attachment-preview {
  width: 100%;
  height: 100%;
  border-radius: var(--openbot-radius-media-preview);
}

.composer-attachment-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* /@fs//app/packages/ui/src/features/conversation/styles/attachments.css */
.message-attachments {
  display: grid;
  width: min(100%, 256px);
  gap: 7px;
  margin-top: 10px;
}

.message-attachment {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px 40px;
  min-width: 0;
  min-height: 56px;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface-raised);
  padding: 7px;
  transition:
    background-color var(--openbot-duration-hover) ease,
    border-color var(--openbot-duration-hover) ease;
}

[data-slot="bubble"]:not([data-variant="ghost"]) > [data-slot="bubble-content"] > .message-attachments:last-child {
  margin-bottom: var(--openbot-space-1);
}

[data-slot="bubble"]:not([data-variant="ghost"])
  > [data-slot="bubble-content"]
  > .message-attachments-group:last-child {
  margin-bottom: var(--openbot-space-1);
}

[data-slot="bubble"]:not([data-variant="ghost"])
  > [data-slot="bubble-content"]
  > .message-attachments:last-child
  .message-attachment {
  border-radius: var(--openbot-radius-bubble-inset);
}

.message-attachments-group {
  display: grid;
  width: min(100%, 256px);
  margin-top: var(--openbot-space-2);
  gap: var(--openbot-space-1-5);
}

.message-attachments-group .message-attachments {
  width: 100%;
  margin-top: 0;
}

.ui-button.attachment-preview-button {
  width: 100%;
  height: 40px;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  border: 0;
  background: transparent;
  padding: 0;
  color: inherit;
  text-align: left;
}

.attachment-preview-button:disabled {
  cursor: default;
}

.attachment-file-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.attachment-file-copy {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.message-attachment strong {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: 560;
  line-height: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-attachment small {
  color: var(--openbot-text-readable);
  font-size: var(--openbot-text-sm);
  line-height: 15px;
}

.attachment-open-button {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  padding: 0;
  color: var(--openbot-text-muted);
  transition:
    background-color var(--openbot-duration-hover) ease,
    color var(--openbot-duration-hover) ease,
    transform var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1);
}

.attachment-open-button svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}

.attachment-open-button:focus-visible,
.attachment-preview-button:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}

.attachment-open-button:active {
  transform: scale(0.96);
}

@media (hover: hover) and (pointer: fine) {
  .message-attachment:hover {
    border-color: var(--openbot-border-strong);
    background: var(--openbot-bg-control-hover);
  }

  .attachment-open-button:hover {
    background: var(--openbot-bg-control-active);
    color: var(--openbot-text-primary);
  }
}

.agent-queue-panel {
  --queue-row-height: 29px;
  --queue-composer-overlap: 14px;
  /* The leading glyph fills its column, so this inset is the gap the eye sees on the left. */
  --queue-row-inset-start: 13px;
  /* The trailing buttons are 26px boxes around 16px glyphs, so 5px of the gap is already in them. */
  --queue-row-inset-end: 8px;
  /* What stays between the panel edge and a row's hover fill, the same on all four sides. */
  --queue-row-gutter: 5px;

  position: relative;
  z-index: 10;
  overflow: visible;
  margin: 0 12px calc(-1 * var(--queue-composer-overlap));
  border: 1px solid var(--openbot-queue-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-queue-surface);
  padding-bottom: var(--queue-composer-overlap);
  box-shadow: none;
  animation: queue-panel-in var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1) both;
}

.agent-queue-slot {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--openbot-duration-overlay) var(--openbot-ease-out);
}

.agent-queue-slot[data-open="false"] {
  grid-template-rows: 0fr;
}

.agent-queue-slot-inner {
  min-height: 0;
  overflow: hidden;
}

.agent-queue-panel-resize {
  min-height: 0;
}

/*
 * Why the queue waits, above the rows that wait. Sits inside the panel's own
 * padding because the list below owns the row insets, not the panel.
 */
.agent-queue-hold {
  margin: 0;
  padding: var(--queue-row-gutter) var(--queue-row-inset-end) 0 var(--queue-row-inset-start);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-attachments-group:has(.attachment-media-player),
.message-attachments:has(.attachment-media-player) {
  width: min(100%, 360px);
}

.attachment-media-player {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  min-width: 0;
  border-radius: var(--openbot-radius-md);
}

.message-attachment[data-media] {
  grid-template-columns: minmax(0, 1fr) var(--openbot-control-sm) var(--openbot-control-sm);
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-3);
}

.message-attachment[data-media] .attachment-file-visual {
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-muted);
}

.message-attachment[data-media] .attachment-file-visual svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}

.message-attachment[data-media] .attachment-open-button {
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
}

.message-attachment[data-media] .attachment-open-button svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}

.message-attachment[data-media="audio"] .attachment-media-player {
  height: var(--openbot-control-xl);
}


/* /@fs//app/packages/ui/src/features/conversation/styles/image-lightbox.css */
/* The images of one agent message, laid out in justified rows by `justifiedGalleryLayout`. The
 * tiles are placed absolutely, so a new width or a loaded aspect ratio moves a tile but never
 * mounts a new image. */
.image-gallery {
  position: relative;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.image-gallery-item {
  position: absolute;
}

.image-gallery-tile {
  display: grid;
  width: 100%;
  height: 100%;
  overflow: hidden;
  place-items: center;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
  padding: 0;
  color: var(--openbot-text-muted);
}

.image-gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}

.image-gallery-tile:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}

.image-gallery-tile-missing > svg {
  width: var(--openbot-space-6);
  height: var(--openbot-space-6);
}

@media (hover: hover) and (pointer: fine) {
  .image-gallery-tile:not(:disabled):hover img {
    transform: scale(1.03);
  }
}

/* The viewer. The backdrop is a sibling below the content, and the content covers the window so
 * that its empty stage can take the click that closes it. */
.ui-dialog-overlay.image-lightbox-backdrop {
  background: var(--openbot-bg-overlay);
  /* The viewer animates its backdrop from script, with the zoom of the image. */
  animation: none;
}

.ui-dialog-content.image-lightbox {
  position: fixed;
  z-index: calc(var(--openbot-layer-dialog) + 1);
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  /* Clips the slides beside the stage. The window, not the stage, clips them, so the image can
   * zoom from a thumbnail under the toolbar or the strip. */
  overflow: hidden;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  color: var(--openbot-text-primary);
  outline: none;
  -webkit-app-region: no-drag;
}

.image-lightbox-chrome {
  animation: image-lightbox-fade-in var(--openbot-duration-overlay) var(--openbot-ease-out);
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}

.image-lightbox[data-closing] .image-lightbox-chrome {
  opacity: 0;
}

.image-lightbox-toolbar {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3) var(--openbot-space-4);
}

.image-lightbox-caption {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: var(--openbot-space-2);
}

.image-lightbox-name {
  overflow: hidden;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-lightbox-position {
  flex: none;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}

.image-lightbox-actions {
  display: flex;
  flex: none;
  gap: var(--openbot-space-1);
}

.image-lightbox-stage {
  position: relative;
  min-height: 0;
  /* A sideways swipe steps the images; the browser keeps vertical scroll only. */
  touch-action: pan-y;
}

/* The current image and its neighbours sit side by side, one stage width apart. A step moves the
 * track, so the images slide as a carousel. */
.image-lightbox-track {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.image-lightbox-slide {
  position: absolute;
  inset: 0;
  display: grid;
  /* Fixed tracks, so the image's percentage limits resolve and a tall image fits the stage. */
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  padding: 0 calc(var(--openbot-space-8) * 2);
  transform: translateX(calc(var(--image-lightbox-slide) * 100%));
}

.image-lightbox-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--openbot-radius-md);
  user-select: none;
  will-change: transform;
}

/* Hidden until it loads, so the zoom starts from the thumbnail rather than after a flash of the
 * image at full size. */
.image-lightbox-image-pending {
  opacity: 0;
}

.image-lightbox-error {
  margin: 0;
  color: var(--openbot-text-muted);
}

.image-lightbox-step {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control);
}

.image-lightbox-step-previous {
  left: var(--openbot-space-4);
}

.image-lightbox-step-next {
  right: var(--openbot-space-4);
}

.image-lightbox-strip {
  /* Above the image, which gets its own layer while it zooms. */
  position: relative;
  display: flex;
  overflow-x: auto;
  /* `safe` keeps the first thumbnails reachable when the strip is wider than the window. */
  justify-content: safe center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-3) var(--openbot-space-4) var(--openbot-space-4);
  scrollbar-width: none;
}

.image-lightbox-thumb {
  flex: none;
  width: var(--openbot-control-xl);
  height: var(--openbot-control-xl);
  overflow: hidden;
  border-radius: var(--openbot-radius-sm);
  padding: 0;
  opacity: 0.5;
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}

.image-lightbox-thumb[aria-current="true"] {
  box-shadow: 0 0 0 2px var(--openbot-text-primary);
  opacity: 1;
}

.image-lightbox-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-lightbox-thumb:focus-visible,
.image-lightbox-step:focus-visible,
.image-lightbox-action:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .image-lightbox-thumb:hover {
    opacity: 1;
  }
}

@media (max-width: 640px) {
  .image-lightbox-slide {
    padding: 0;
  }

  .image-lightbox-step {
    display: none;
  }
}

@keyframes image-lightbox-fade-in {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .image-gallery-tile img,
  .image-lightbox-chrome,
  .image-lightbox-thumb {
    animation: none;
    transition: none;
  }
}


/* /@fs//app/packages/ui/src/features/conversation/styles/queue.css */
.composer-wrap:has(.composer-attachment) .agent-queue-panel {
  margin-bottom: 0;
}

.agent-queue-panel-list {
  /* Seven rows, then the list scrolls. */
  max-height: calc(7 * var(--queue-row-height) + 2 * var(--queue-row-gutter));
  overflow-y: auto;
  padding: var(--queue-row-gutter) var(--queue-row-inset-end) var(--queue-row-gutter) var(--queue-row-inset-start);
  overscroll-behavior: contain;
}

.agent-queue-item {
  --queue-drag-step: 0;

  position: relative;
  display: grid;
  height: var(--queue-row-height);
  min-height: 0;
  min-width: 0;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  margin: 0;
  border: 0;
  padding: 0;
  border-radius: var(--openbot-radius-md);
  color: var(--openbot-queue-text);
  cursor: grab;
  outline: 0;
  transform: translate3d(0, calc(var(--queue-drag-step) * var(--queue-row-height)), 0);
  transition:
    height var(--openbot-duration-slow) var(--openbot-ease-out),
    opacity var(--openbot-duration-fast) ease,
    transform var(--openbot-duration-slow) var(--openbot-ease-out);
}

.agent-queue-item-entering {
  animation: queue-item-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}

.agent-queue-item-removing {
  height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, -4px, 0) scale(0.985);
  will-change: height, opacity, transform;
}

.agent-queue-panel-dragging .agent-queue-item {
  will-change: transform;
}

/* The fill reaches past the row to the gutter, which the two insets above leave unequal. */
.agent-queue-item::before {
  position: absolute;
  z-index: 0;
  inset: 0 calc(var(--queue-row-gutter) - var(--queue-row-inset-end)) 0
    calc(var(--queue-row-gutter) - var(--queue-row-inset-start));
  border-radius: var(--openbot-radius-md);
  background: transparent;
  content: "";
  pointer-events: none;
  transition: background-color var(--openbot-duration-hover) ease;
}

.agent-queue-item > * {
  position: relative;
  z-index: 1;
}

.agent-queue-item:hover,
.agent-queue-item:focus-visible,
.agent-queue-item-drag-over {
  z-index: 1;
}

.agent-queue-item:hover::before,
.agent-queue-item:focus-visible::before {
  background: var(--openbot-hover);
}

.agent-queue-panel-dragging .agent-queue-item:not(.agent-queue-item-dragging):hover::before {
  background: transparent;
}

.agent-queue-item:focus-visible {
  box-shadow: 0 0 0 2px var(--openbot-border-focus);
}

.agent-queue-item-dragging {
  z-index: 0;
  cursor: grabbing;
  opacity: 0;
}

.agent-queue-item-dragging::before {
  background: transparent;
  box-shadow: none;
}

.agent-queue-drag-preview {
  position: fixed;
  z-index: var(--openbot-layer-dropdown);
  box-sizing: border-box;
  min-height: 31px;
  margin: 0;
  border: 1px solid var(--openbot-border-strong);
  background: var(--openbot-bg-surface-raised);
  box-shadow: var(--openbot-shadow-raised);
  opacity: 0.96;
  pointer-events: none;
  transform: none;
}

.agent-queue-drag-preview::before {
  display: none;
}

.agent-queue-item-steering {
  color: var(--openbot-text-muted);
}

.agent-queue-item-editing {
  color: var(--openbot-text-muted);
}

.agent-queue-editing-badge {
  flex: none;
  padding: 0 6px;
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 18px;
  white-space: nowrap;
}

.agent-queue-item-has-attachment {
  grid-template-columns: 14px 24px minmax(0, 1fr) auto;
}

.agent-queue-icon {
  display: grid;
  place-items: center;
  color: var(--openbot-queue-action);
}

.agent-queue-icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}

.agent-queue-attachment {
  display: grid;
  width: 24px;
  height: 24px;
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--openbot-queue-border);
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-bg-canvas);
  color: var(--openbot-queue-action);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-glyph-xs);
  line-height: 1;
}

.agent-queue-attachment img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.agent-queue-steer svg,
.agent-queue-icon-button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}

.agent-queue-message {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: var(--openbot-text-lg);
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-queue-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--openbot-queue-action);
}

.agent-queue-steer,
.agent-queue-icon-button {
  display: inline-flex;
  height: 26px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  padding: 0 4px;
  color: inherit;
  font-size: var(--openbot-text-lg);
  line-height: 18px;
  transition:
    background var(--openbot-duration-hover) ease,
    color var(--openbot-duration-hover) ease;
}

.agent-queue-steer:hover:not(:disabled),
.agent-queue-steer:focus-visible,
.agent-queue-icon-button:hover:not(:disabled),
.agent-queue-icon-button:focus-visible {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
  outline: 0;
}

.agent-queue-steer:disabled,
.agent-queue-icon-button:disabled {
  cursor: default;
  opacity: 0.45;
}

.agent-queue-icon-button {
  width: 26px;
  padding: 0;
}

.agent-queue-icon-button.agent-queue-delete:hover:not(:disabled),
.agent-queue-icon-button.agent-queue-delete:focus-visible {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
  opacity: 1;
}

@media (max-width: 620px) {
  .agent-queue-panel {
    margin-right: 2px;
    margin-left: 2px;
  }

  .agent-queue-steer {
    width: 26px;
    padding: 0;
  }

  .agent-queue-steer span {
    display: none;
  }
}

@keyframes queue-panel-in {
  from {
    opacity: 0;
    transform: translateY(5px) scale(0.995);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes queue-item-in {
  from {
    opacity: 0;
    transform: translate3d(0, -4px, 0) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}


/* /@fs//app/packages/ui/src/features/conversation/styles/agent-tasks.css */
/* The tasks of an agent: the chips at the foot of its chat, the header menu and the task panel. */
.agent-tasks-mark {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  --task-list-glyph: 14px;
}

.agent-tasks-menu-title {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agent-task-chips {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--openbot-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.agent-task-chip-row {
  display: flex;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  gap: var(--openbot-space-1);
}

.agent-task-chip.ui-button {
  display: inline-flex;
  min-width: 0;
  max-width: min(100%, 560px);
  height: var(--openbot-control-md);
  align-items: center;
  gap: var(--openbot-space-2);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-pill);
  padding: 0 var(--openbot-space-2) 0 var(--openbot-space-3);
  font-weight: inherit;
  --task-list-glyph: 14px;
}

.agent-task-chip-title {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-task-chip-status {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-task-chip-chevron {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
}

.agent-task-chip-close.ui-button {
  display: grid;
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  color: var(--openbot-text-muted);
}

.agent-task-chip-close svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

/* The task list of the side panel. */
.agent-task-list {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--openbot-space-0-5);
  min-height: 0;
  overflow-y: auto;
  padding: var(--openbot-space-2);
}

.agent-task-list .agent-tasks-mark {
  width: 16px;
}

/* The closed tasks of one day, under its heading. */
.agent-task-list-group {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-0-5);
  margin-top: var(--openbot-space-2);
}

.agent-task-list-day {
  margin: 0;
  padding: var(--openbot-space-1) var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: 500;
}

.agent-tasks-disclosure {
  color: var(--openbot-text-secondary);
}

.agent-tasks-disclosure .agent-tasks-icon {
  color: var(--openbot-text-muted);
  transition: transform var(--openbot-duration-fast) ease;
}

.agent-tasks-disclosure[aria-expanded="true"] .agent-tasks-icon {
  transform: rotate(90deg);
}

.agent-tasks-trigger-dot {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 5px;
  height: 5px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
}

/* The task panel, in the place of the other side panels. */
.agent-tasks-panel .file-preview-header {
  --task-list-glyph: 16px;
}

.agent-tasks-panel-origin {
  margin: 0;
  padding: var(--openbot-space-3) var(--openbot-space-4) 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

.agent-tasks-panel-queued {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  padding: 0 var(--openbot-space-4);
}

.agent-tasks-panel-queued-text {
  margin: 0;
  overflow: hidden;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-tasks-panel-note {
  margin: 0;
  border-top: 1px solid var(--openbot-border);
  padding: var(--openbot-space-3) var(--openbot-space-4);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

/*
 * The compact composer of the task panel has no attach button, so it drops the empty first column, as
 * `.side-question-composer` does.
 */
.agent-tasks-panel .composer[data-compact] {
  grid-template-columns: minmax(0, 1fr) auto;
}

.agent-tasks-panel .composer[data-compact] > .composer-input-label {
  grid-column: 1;
}

.agent-tasks-panel .composer[data-compact] .composer-primary-actions {
  grid-column: 2;
}

@media (prefers-reduced-motion: reduce) {
  .agent-tasks-disclosure .agent-tasks-icon {
    transition: none;
  }
}


/* /@fs//app/packages/ui/src/features/conversation/styles/side-question.css */
/* The side question pane, in the place of the other side panels. */
.side-question-empty {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-1-5);
  padding: var(--openbot-space-8) var(--openbot-space-4);
  text-align: center;
}

.side-question-empty > svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  margin-bottom: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  stroke-width: var(--openbot-icon-stroke);
}

.side-question-empty > strong {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  font-weight: 500;
}

.side-question-empty > p {
  max-width: 320px;
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

/* The chat composer's compact row, without its attach button: the editor and the send button. */
.side-question-composer.composer[data-compact] {
  grid-template-columns: minmax(0, 1fr) auto;
}

.side-question-composer.composer[data-compact] > .composer-input-label {
  grid-column: 1;
}

.side-question-composer.composer[data-compact] .composer-primary-actions {
  grid-column: 2;
}


/* /@fs//app/packages/ui/src/features/conversation/styles/voice.css */
/* Spoken replies: the speaking bar above the composer, and the voice pane in the side panel. */

.speaking-bar {
  display: flex;
  width: min(560px, 100%);
  align-items: center;
  gap: var(--openbot-space-3);
  margin: 0 auto var(--openbot-space-2);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface-raised);
  box-shadow: var(--openbot-shadow-raised);
  padding: var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-2);
  animation: speaking-bar-in var(--openbot-duration-normal) var(--openbot-ease-out) both;
}

@keyframes speaking-bar-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

/* The face is drawn low in its own box; the app lifts it by the same share. */
.speaking-bar-avatar {
  --agent-avatar-optical-offset: calc(28px * -0.14);

  width: 28px;
  height: 28px;
  flex: 0 0 auto;
}

.speaking-bar-waveform {
  max-width: 120px;
  flex: 0 0 auto;
  color: var(--openbot-accent);
}

.speaking-bar-caption {
  min-width: 0;
  flex: 1;
  margin: 0;
  overflow: hidden;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: var(--openbot-space-4);
}

.voice-panel-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-0-5);
}

.voice-panel-name {
  margin: 0;
  font-size: var(--openbot-text-md);
  font-weight: 600;
}

.voice-panel-phase {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

.voice-panel-stage {
  display: flex;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-8);
}

.voice-panel-presence {
  position: relative;
  display: grid;
  width: 140px;
  height: 140px;
  place-items: center;
  transform: scale(var(--voice-presence-scale, 1));
  transition:
    transform var(--openbot-duration-fast) linear,
    opacity var(--openbot-duration-normal) ease;
}

/* A soft glow of the accent colour behind the face, brighter while the agent speaks. */
.voice-panel-presence::before {
  position: absolute;
  inset: -24px;
  border-radius: var(--openbot-radius-pill);
  background: radial-gradient(closest-side, var(--openbot-accent-soft), transparent);
  content: "";
  opacity: 0.5;
  transition: opacity var(--openbot-duration-normal) ease;
}

.voice-panel-presence[data-phase="speaking"]::before {
  opacity: 1;
}

.voice-panel-presence[data-phase="thinking"]::before {
  animation: voice-panel-think 1.6s var(--openbot-ease-in-out) infinite alternate;
}

@keyframes voice-panel-think {
  to {
    opacity: 0.15;
  }
}

.voice-panel-avatar {
  --agent-avatar-optical-offset: calc(112px * -0.14);

  position: relative;
  width: 112px;
  height: 112px;
}

/* The waveform keeps its place when it is hidden, so the captions do not move. */
/* A muted microphone: the agent's face dims until the user speaks again. */
.voice-panel-presence[data-muted] {
  opacity: 0.5;
}

.voice-panel-waveform {
  display: flex;
  width: 141px;
  color: var(--openbot-text-secondary);
  opacity: 0;
  transition: opacity var(--openbot-duration-normal) ease;
}

.voice-panel-waveform[data-phase] {
  opacity: 1;
}

.voice-panel-waveform[data-phase="speaking"] {
  color: var(--openbot-accent);
}

.voice-panel-captions {
  width: 100%;
  min-height: calc(var(--openbot-leading-xl) * 4);
  overflow-y: auto;
  text-align: center;
}

.voice-panel-caption {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-xl);
  line-height: var(--openbot-leading-xl);
}

.voice-panel-caption[data-empty] {
  color: var(--openbot-text-muted);
}

.voice-panel-error {
  color: var(--openbot-danger);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}

.voice-panel-controls {
  display: flex;
  justify-content: center;
  gap: var(--openbot-space-4);
}

.voice-panel-control {
  border-radius: var(--openbot-radius-pill);
  transition:
    background-color var(--openbot-duration-fast) ease,
    color var(--openbot-duration-fast) ease;
}

@media (prefers-reduced-motion: reduce) {
  .speaking-bar,
  .voice-panel-presence[data-phase="thinking"]::before {
    animation: none;
  }

  .voice-panel-presence {
    transform: none;
  }
}

/* Under a message of a spoken turn: plays the user's recording, or reads the reply aloud again. */
.voice-player {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-top: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
}

.voice-player-toggle {
  flex: none;
  border-radius: var(--openbot-radius-pill);
}

.voice-player-toggle svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

.voice-player-track {
  flex: none;
}

.voice-player-bars {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 24px;
}

.voice-player-bar {
  width: 2px;
  height: calc(3px + var(--voice-peak, 0) * 17px);
  border-radius: var(--openbot-radius-pill);
  background: currentColor;
  opacity: 0.45;
}

.voice-player-bar[data-played] {
  background: var(--openbot-accent);
  opacity: 1;
}

.voice-player-time {
  min-width: 3ch;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}


/* /@fs//app/packages/ui/src/features/conversation/styles/panel-layout.css */
.conversation-panel:has(.settings-panel) .conversation-header,
.conversation-panel:has(.settings-panel) .conversation-scroll,
.conversation-panel:has(.settings-panel) .composer-wrap {
  width: calc(100% - var(--settings-panel-width, 296px));
}

.conversation-panel:has(.settings-panel) .chat-search {
  right: calc(var(--settings-panel-width, 296px) + 16px);
  max-width: calc(100% - var(--settings-panel-width, 296px) - 32px);
}

.conversation-panel:has(#browser-side-panel) .chat-search,
.conversation-panel:has(#file-preview-panel) .chat-search {
  right: calc(var(--browser-panel-width, 380px) + 16px);
  max-width: calc(100% - var(--browser-panel-width, 380px) - 32px);
}

.conversation-panel:has(#browser-side-panel) .conversation-header,
.conversation-panel:has(#browser-side-panel) .conversation-scroll,
.conversation-panel:has(#browser-side-panel) .composer-wrap,
.conversation-panel:has(#file-preview-panel) .conversation-header,
.conversation-panel:has(#file-preview-panel) .conversation-scroll,
.conversation-panel:has(#file-preview-panel) .composer-wrap {
  width: 100%;
}

@keyframes message-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes agent-activity-dot {
  0%,
  60%,
  100% {
    opacity: 0.34;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

@keyframes agent-picker-in {
  from {
    opacity: 0;
    transform: translateY(-3px) scale(0.995);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes settings-panel-in {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes browser-control-pulse {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.88);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}

@media (prefers-reduced-motion: reduce) {
  .browser-panel,
  .remote-desktop-workspace,
  .message-entry,
  .chat-action-entry-animated,
  .agent-activity-entry,
  .agent-activity-content,
  .agent-activity-avatar,
  .agent-row-thinking-dots i,
  .agent-row-agent-status-responded,
  .agent-row-agent-status-unread,
  .mention-picker,
  .mention-picker-list,
  .settings-panel {
    animation: none;
    transition: none;
  }

  .agent-activity-avatar,
  .agent-activity-entry[data-state="exiting"] .agent-activity-avatar {
    transform: none;
  }

  .agent-queue-item {
    animation: none;
    transition: none;
  }

  .agent-queue-panel {
    transition: none;
  }

  .agent-queue-slot {
    transition: none;
  }

  .agent-queue-panel-resize,
  .message-content-resize {
    will-change: auto;
  }

  .computer-control-dot {
    animation: none;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes modal-in {
  from {
    opacity: 0;
    transform: scale(0.97) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.attachment-drop-overlay {
  position: absolute;
  z-index: 60;
  inset: 12px;
  display: grid;
  place-items: center;
  border: 1px dashed color-mix(in srgb, var(--accent) 70%, var(--openbot-text-primary));
  border-radius: var(--openbot-radius-lg);
  background: color-mix(in srgb, var(--background) 38%, transparent);
  color: var(--text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: 650;
  backdrop-filter: blur(3px);
  pointer-events: none;
}


/* /@fs//app/packages/ui/src/features/conversation/styles/side-panel.css */
/*
 * The side panel: a row of tabs in the top row, above the open pane. The panes keep their own
 * position and width; in the dock they start under the tab row.
 */
.side-panel-header {
  position: absolute;
  z-index: 16;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
  width: var(--side-panel-width, 380px);
  height: var(--left-header-height, 38px);
  min-width: 0;
  padding: 0 var(--openbot-space-2);
  container: side-panel-header / inline-size;
}

/* A short line at the start of the tab row, above the panel's divider. */
.side-panel-header::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: var(--openbot-icon-lg);
  translate: 0 -50%;
  background: var(--openbot-border-strong);
  content: "";
  pointer-events: none;
}

.side-panel-tabs {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--openbot-space-1);
  min-width: 0;
}

.side-panel-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--openbot-space-0-5);
  color: var(--openbot-text-muted);
}

.side-panel-actions svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

/* A tab is the same chip as the other controls of the top row. */
.side-panel-tab {
  position: relative;
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: var(--openbot-space-1-5);
  min-width: 0;
  height: var(--openbot-control-sm);
  padding: 0 var(--openbot-space-2) 0 var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-md);
  color: var(--openbot-text-secondary);
}

.side-panel-tab:hover {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}

.side-panel-tab[data-selected] {
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
}

/* Between two tabs, in the middle of their gap. It hides next to the selected or hovered tab. */
.side-panel-tab + .side-panel-tab::before {
  position: absolute;
  top: 50%;
  left: calc(var(--openbot-space-1) / -2 - 0.5px);
  width: 1px;
  height: var(--openbot-icon-lg);
  translate: 0 -50%;
  background: var(--openbot-border-strong);
  content: "";
  pointer-events: none;
}

.side-panel-tab:is([data-selected], :hover)::before,
.side-panel-tab:is([data-selected], :hover) + .side-panel-tab::before {
  opacity: 0;
}

.side-panel-tab-select {
  display: block;
  height: auto;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 0;
  cursor: pointer;
}

/* The tab draws the hover fill, so the shared ghost hover of the button stays off. */
.side-panel-tab-select:hover:not(:disabled):not([data-disabled]) {
  background: transparent;
  color: inherit;
}

/* The tab icon slot. On hover or focus, a round fill and an X replace the icon. */
.side-panel-tab-close {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  padding: 0;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.side-panel-tab-icon,
.side-panel-tab-x {
  grid-area: 1 / 1;
}

.side-panel-tab-icon {
  display: grid;
  opacity: 0.7;
}

.side-panel-tab-icon svg,
.side-panel-tab-x {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

.side-panel-tab-x {
  opacity: 0;
}

.side-panel-tab:is(:hover, :focus-within) .side-panel-tab-close {
  background: var(--openbot-bg-control-hover);
}

.side-panel-tab:is(:hover, :focus-within) .side-panel-tab-icon {
  opacity: 0;
}

.side-panel-tab:is(:hover, :focus-within) .side-panel-tab-x {
  opacity: 1;
}

.side-panel-tab-close:hover:not(:disabled):not([data-disabled]) {
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
}

.side-panel-tab-select:focus-visible {
  box-shadow: var(--openbot-focus-ring);
  outline: none;
}

/* When the labels of all tabs do not fit, a tab that is not selected shows only its icon. The whole
 * tab then selects its pane. The selected tab keeps its label, and its icon still closes it. With the
 * keyboard, Delete closes the focused tab. */
@container side-panel-header (max-width: 480px) {
  .side-panel-tabs:has(> .side-panel-tab:nth-child(4)) {
    --side-panel-tabs-compact: 1;
  }
}

@container side-panel-header (max-width: 360px) {
  .side-panel-tabs:has(> .side-panel-tab:nth-child(3)) {
    --side-panel-tabs-compact: 1;
  }
}

@container style(--side-panel-tabs-compact: 1) {
  .side-panel-tab:not([data-selected]) {
    padding: 0 var(--openbot-space-1-5);
  }

  .side-panel-tab:not([data-selected]) .side-panel-tab-select {
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }

  .side-panel-tab:not([data-selected]) .side-panel-tab-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .side-panel-tab:not([data-selected], :focus-within) .side-panel-tab-close {
    background: transparent;
  }

  .side-panel-tab:not([data-selected], :focus-within) .side-panel-tab-icon {
    opacity: 0.7;
  }

  .side-panel-tab:not([data-selected], :focus-within) .side-panel-tab-x {
    opacity: 0;
  }
}

/* In the dock, a pane starts under the tab row. Its inset card starts at the top row's line. */
.side-panel-docked > :is(.browser-panel, .settings-panel) {
  top: var(--left-header-height, 38px);
}

.app-frame-edge .side-panel-docked > :is(.browser-panel, .settings-panel)::before {
  top: -1px;
}

/* The tab in the top row names the pane and closes it, so a pane does not repeat its title or its
 * close button. A pane keeps only what the tab does not have: Back, the task actions, the file summary. */
.side-panel-docked :is(.side-panel-pane-header, .side-panel-pane-title, .side-panel-pane-close) {
  display: none;
}

/* The settings header is three fixed columns, so its title stays in the middle without the button. */
.side-panel-docked .settings-panel-header > .side-panel-pane-close {
  display: inline-flex;
  visibility: hidden;
}

/* With no open pane, the dock lists the panes it can open. */
.side-panel-empty {
  justify-content: center;
}

.side-panel-launcher {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1-5);
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  padding: var(--openbot-space-6);
}

.side-panel-launch {
  justify-content: flex-start;
  gap: var(--openbot-space-3);
}

/* A maximized dock covers the chat and its header. */
.side-panel-maximized > :is(.browser-panel, .settings-panel, .side-panel-header) {
  width: 100%;
}

.side-panel-maximized > .side-panel-header::before,
.side-panel-maximized .right-panel-resizer {
  display: none;
}

.side-panel-maximized > :is(.conversation-header, .conversation-scroll, .composer-wrap) {
  visibility: hidden;
}

/* Pane icons have the size of the other menu and row icons. */
:is(.side-panel-launch, .side-panel-menu-item) svg {
  flex: none;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
}


/* /@fs//app/packages/ui/src/features/conversation/styles/notices.css */
/*
 * The same slab the queue panel uses, in a warning tone: it sits on 12px side margins, keeps the
 * large radius, and tucks its lower edge under the composer so the two read as one control. The
 * tinted fill carries the warning on its own, so there is no outline to draw a second edge next to
 * the composer's.
 */
.composer-notice {
  --notice-composer-overlap: 14px;
  /* The clearance around the button on its three free sides; see the radius note below. */
  --notice-inset: 6px;
  /* The warning tone is the default because a notice the user can clear themselves is the common
     one. `data-tone="danger"` below is for a state only time or another model ends. */
  --notice-accent: var(--openbot-warning);
  --notice-surface: var(--openbot-warning-soft);

  position: relative;
  z-index: 10;
  display: flex;
  margin: 0 12px calc(-1 * var(--notice-composer-overlap));
  /* The trailing button carries its own side padding, so the end inset is smaller than the start. */
  padding: var(--notice-inset) var(--notice-inset) calc(var(--notice-inset) + var(--notice-composer-overlap)) 12px;
  align-items: center;
  gap: 10px;
  border: none;
  /*
   * Concentric with the button it holds: the card radius is the button's 8px plus the 6px inset.
   * A smaller card radius makes its arc cut inside the button's corner, and the even clearance
   * stops looking even.
   */
  border-radius: var(--openbot-radius-card);
  background: var(--notice-surface);
  animation: queue-panel-in var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1) both;
}

/* The tone the usage rings already give a spent plan window, so one state keeps one colour. The
   text token, not the fill token, because this colour carries words on a dark surface. */
.composer-notice[data-tone="danger"] {
  --notice-accent: var(--openbot-danger-text);
  --notice-surface: var(--openbot-danger-soft);
}

/*
 * A card with no action has no button to hold its height or to stand the end inset off, so the
 * copy carries both: the same 12px on each side, and a little more above and below than the
 * clearance a 32px button already gives.
 */
.composer-notice:not(:has(.ui-button)) {
  --notice-inset: 8px;

  padding-right: 12px;
}

.composer-notice-icon {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--notice-accent);
}

/* The button set has no warning variant, so the notice tints the outline button it already uses. */
.composer-notice .ui-button {
  border-color: transparent;
  background: color-mix(in srgb, var(--notice-accent) 14%, transparent);
  color: var(--notice-accent);
}

@media (hover: hover) {
  .composer-notice .ui-button:hover:not(:disabled):not([data-disabled]) {
    background: color-mix(in srgb, var(--notice-accent) 24%, transparent);
    color: var(--notice-accent);
  }
}

.composer-notice-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 0;
}

.composer-notice-copy strong {
  color: var(--notice-accent);
  font-size: var(--openbot-text-sm);
  font-weight: 600;
  /* The two lines are tight against each other so the stack costs as little height as one row. */
  line-height: 1.35;
}

.composer-notice-copy p {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: 1.35;
}

/*
 * The close button reads as a control, not as the action the card offers: the tinted fill above
 * belongs to the one button that resolves a state (Sign in), and an X that carried the same fill
 * would compete with it wherever both appear. It takes the accent only under the pointer.
 */
.composer-notice-dismiss {
  flex: none;
  align-self: flex-start;
}

.composer-notice .composer-notice-dismiss {
  background: transparent;
  color: var(--notice-accent);
}

@media (hover: hover) {
  .composer-notice .composer-notice-dismiss:hover:not(:disabled):not([data-disabled]) {
    background: color-mix(in srgb, var(--notice-accent) 18%, transparent);
  }
}

/* The code sign-in is the second way in: outlined beside the tinted Sign in button. */
.composer-notice .composer-notice-code-fallback {
  flex: none;
  border-color: color-mix(in srgb, var(--notice-accent) 45%, transparent);
  background: transparent;
}


/* /@fs//app/packages/ui/src/features/conversation/styles/context-usage.css */
/*
 * Context usage: the composer ring, its popover, and the conversation row where a thread was
 * compacted. The breakdown hues reuse the chart palette in a fixed order, as the storage bar does.
 */

/* Ring ------------------------------------------------------------------- */

.context-meter-trigger {
  color: var(--openbot-text-muted);
}

.context-meter-ring {
  width: var(--openbot-icon-md);
}

.context-meter-ring .ui-radial-progress-track,
.context-meter-ring .ui-radial-progress-indicator {
  stroke-width: 6;
}

.context-meter-ring[data-level="quiet"] {
  --ui-radial-progress-color: var(--openbot-text-dim);
}

.context-meter-ring[data-level="normal"] {
  --ui-radial-progress-color: var(--openbot-text-secondary);
}

/* The colour of the compaction notice above the input, so one state keeps one colour. */
.context-meter-ring[data-compacting] {
  --ui-radial-progress-color: var(--openbot-warning);
}

.context-meter-ring[data-compacting] .ui-radial-progress-chart {
  animation: ui-spin 900ms linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .context-meter-ring[data-compacting] .ui-radial-progress-chart {
    animation: none;
  }
}

/* Popover ---------------------------------------------------------------- */

.context-meter-popover {
  z-index: var(--openbot-layer-popover);
  display: flex;
  width: 280px;
  flex-direction: column;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3) var(--openbot-space-4) var(--openbot-space-4);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  transform-origin: var(--kb-popover-content-transform-origin);
  animation: ui-menu-in var(--ui-menu-duration) var(--ui-menu-ease) both;
}

/* The copy that ContentExitMotion leaves in the place of the closed popover plays the exit. */
.context-meter-popover:not([data-expanded]) {
  animation: ui-menu-out var(--ui-menu-duration) var(--ui-menu-ease) both;
}

@media (prefers-reduced-motion: reduce) {
  .context-meter-popover,
  .context-meter-popover:not([data-expanded]) {
    animation: none;
  }
}

.context-meter-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}

.context-meter-title {
  margin: 0;
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
}

.context-meter-percent {
  color: var(--openbot-text-secondary);
  font-variant-numeric: tabular-nums;
}

.context-meter-percent[data-level="warning"] {
  color: var(--openbot-warning-text);
}

.context-meter-percent[data-level="danger"] {
  color: var(--openbot-danger-text);
}

.context-meter-tokens,
.context-meter-note {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

/* The New chat row sits under a full-width divider, in the shape of a menu item. */
.context-meter-footer {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1-5);
  margin: 0 calc(-1 * var(--openbot-space-4)) calc(-1 * var(--openbot-space-4));
  border-top: 1px solid var(--openbot-border);
  padding: var(--openbot-space-1-5);
}

.context-meter-new-chat {
  width: 100%;
  height: var(--openbot-control-md);
  justify-content: flex-start;
  gap: var(--openbot-space-2);
  border-radius: var(--ui-menu-item-radius);
  padding: 0 var(--ui-menu-inset);
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-regular);
}

.context-meter-new-chat:is(:hover, :focus-visible):not(:disabled) {
  background: var(--ui-menu-item-hover);
}

.context-meter-new-chat > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  color: var(--openbot-text-secondary);
}

.context-meter-tokens {
  margin-top: calc(-1 * var(--openbot-space-2));
  font-variant-numeric: tabular-nums;
}

/* Bar -------------------------------------------------------------------- */

.context-usage-bar {
  position: relative;
  display: flex;
  height: var(--openbot-space-2);
  gap: var(--openbot-space-0-5);
}

.context-usage-segment {
  min-width: var(--openbot-space-1);
  flex-basis: 0;
  border-radius: var(--openbot-radius-xs);
  background: var(--context-color);
}

.context-usage-segment[data-category="used"] {
  --context-color: var(--openbot-text-secondary);
}

.context-meter-popover:has(.context-meter-percent[data-level="warning"]) [data-category="used"] {
  --context-color: var(--openbot-warning);
}

.context-meter-popover:has(.context-meter-percent[data-level="danger"]) [data-category="used"] {
  --context-color: var(--openbot-danger);
}

.context-usage-segment[data-category="free"] {
  min-width: 0;
  background: var(--openbot-border);
}

/* Breakdown -------------------------------------------------------------- */

/* The storage bar hues in its order; the conversation itself stays neutral. */
.context-meter-popover [data-category="systemPrompt"] {
  --context-color: var(--openbot-chart-storage-workspaces);
}
.context-meter-popover [data-category="memoryFiles"] {
  --context-color: var(--openbot-chart-storage-chats);
}
.context-meter-popover [data-category="tools"] {
  --context-color: var(--openbot-chart-storage-downloads);
}
.context-meter-popover [data-category="skills"] {
  --context-color: var(--openbot-chart-storage-runtimes);
}
.context-meter-popover [data-category="toolResults"] {
  --context-color: var(--openbot-chart-storage-files);
}
.context-meter-popover [data-category="messages"] {
  --context-color: var(--openbot-text-secondary);
}
.context-meter-popover [data-category="other"] {
  --context-color: var(--openbot-text-dim);
}
.context-meter-popover .context-meter-category[data-category="free"] {
  --context-color: var(--openbot-border);
}

.context-meter-categories {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.context-meter-category {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-0-5) 0;
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.context-meter-swatch {
  width: var(--openbot-space-2);
  height: var(--openbot-space-2);
  align-self: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--context-color);
}

.context-meter-category-label {
  overflow: hidden;
  color: var(--openbot-text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.context-meter-category-tokens {
  color: var(--openbot-text-primary);
  font-variant-numeric: tabular-nums;
}

/* The automatic compaction point: a tick that stands just past the bar's edges. */
.context-usage-threshold {
  position: absolute;
  top: calc(-1 * var(--openbot-space-1));
  bottom: calc(-1 * var(--openbot-space-1));
  width: var(--openbot-space-0-5);
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-text-primary);
  transform: translateX(-50%);
}

/* Composer notice ------------------------------------------------------- */

/* The end is a result, not a wait, so it takes the tone the conversation row gives a completed compaction. */
.context-compaction-notice[data-tone="success"] {
  --notice-accent: var(--openbot-success-text);
  --notice-surface: var(--openbot-success-soft);
}

/*
 * The way out reverses the way in: the slab drops behind the composer, which stacks above it, so it
 * reads as going back into the input. Reduced motion keeps a 1ms fade, because `onDone` waits for
 * the animation to end.
 */
.context-compaction-notice[data-leaving] {
  animation: context-compaction-notice-out var(--openbot-duration-toast-exit) var(--openbot-ease-in-out) forwards;
}

@keyframes context-compaction-notice-out {
  to {
    opacity: 0;
    transform: translateY(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .context-compaction-notice[data-leaving] {
    animation: context-compaction-notice-fade 1ms forwards;
  }
}

@keyframes context-compaction-notice-fade {
  to {
    opacity: 0;
  }
}

.context-compaction-notice .composer-notice-icon {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}

.context-compaction-notice-copy {
  min-width: 0;
  flex: 1;
  margin: 0;
  overflow: hidden;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.context-compaction-notice-copy strong {
  color: var(--notice-accent);
  font-weight: 600;
}

/*
 * The failed state keeps the one-line height of the other states: the inset stays at the no-button
 * value, and a smaller close button overhangs it rather than pushing the slab taller.
 */
.context-compaction-notice:has(.composer-notice-dismiss) {
  --notice-inset: 8px;
}

.context-compaction-notice .composer-notice-dismiss {
  width: var(--openbot-control-xs);
  height: var(--openbot-control-xs);
  min-height: 0;
  margin-block: calc(-1 * var(--openbot-space-1));
  padding: 0;
  align-self: center;
}

.context-compaction-notice-percent {
  flex: none;
  color: var(--notice-accent);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}

/* Conversation row -------------------------------------------------------- */

.context-compaction-body {
  display: flex;
  min-width: 0;
  max-width: 100%;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-2);
}

.context-compaction-icon {
  display: inline-grid;
  place-items: center;
}

.context-compaction-icon svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}

.context-compaction-marker[data-status="completed"] .context-compaction-icon {
  color: var(--openbot-success-text);
}

.context-compaction-marker[data-status="failed"] .context-compaction-icon {
  color: var(--openbot-warning-text);
}

.context-compaction-marker .chat-action-marker-content {
  flex-wrap: wrap;
  justify-content: center;
  min-width: 0;
  white-space: normal;
}

.context-compaction-detail {
  white-space: normal;
}


/* /@fs//app/packages/ui/src/features/conversation/styles/interaction-cards.css */
.conversation-interaction-card {
  box-sizing: border-box;
  min-width: 0;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
  padding: var(--openbot-space-4);
}

.conversation-interaction-header {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--openbot-space-3);
}

.conversation-interaction-header > :is(strong, h2) {
  min-width: 0;
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-lg);
  overflow-wrap: anywhere;
}

.conversation-interaction-status[data-slot="badge"] {
  flex: 0 0 auto;
  gap: var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-md);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}

.conversation-interaction-status svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}

/* The badge says the card is waiting on the person, so its loader has to turn: a frozen spinner
   reads as a stalled step rather than one that is ready for them. */
.conversation-interaction-spinner {
  animation: ui-spin 1s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .conversation-interaction-spinner {
    animation: none;
  }
}


/* /@fs//app/packages/ui/src/features/conversation/styles/browser-takeover.css */
.browser-takeover-card {
  display: flex;
  width: min(540px, 100%);
  margin: var(--openbot-space-3) 0 var(--openbot-space-6);
  flex-direction: column;
  gap: var(--openbot-space-4);
  animation: browser-takeover-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}

.browser-takeover-copy {
  margin-top: calc(-1 * var(--openbot-space-2));
  display: grid;
  gap: var(--openbot-space-1);
}

.browser-takeover-copy p {
  margin: 0;
}

.browser-takeover-copy p {
  max-width: 54ch;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-md);
}

.browser-takeover-preview {
  min-width: 0;
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-canvas);
}

.browser-takeover-preview-bar {
  display: flex;
  height: var(--openbot-control-sm);
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-1-5);
  border-bottom: 1px solid var(--openbot-border);
  background: var(--openbot-bg-control);
  padding: 0 var(--openbot-space-3);
  color: var(--openbot-text-secondary);
}

.browser-takeover-preview-bar svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}

.browser-takeover-preview-bar span,
.browser-takeover-preview-bar small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.browser-takeover-preview-bar span {
  min-width: 0;
  flex: 1;
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}

.browser-takeover-preview-bar small {
  max-width: 42%;
  color: var(--openbot-text-readable);
  font-size: var(--openbot-text-sm);
}

.browser-takeover-preview-viewport {
  display: grid;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  place-items: stretch;
  background: var(--openbot-bg-control);
}

/* The viewport is the button that opens the page, so it keeps the frame it has as a plain
   figure: no button padding, no radius of its own, and the preview stacked under the label. */
.browser-takeover-preview-open.ui-button {
  display: grid;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 0;
  padding: 0;
}

/* The preview and the Open label share one cell, so the label floats over the page image. */
.browser-takeover-preview-open > * {
  grid-area: 1 / 1;
}

.browser-takeover-preview-open-label {
  display: inline-flex;
  align-items: center;
  justify-self: center;
  align-self: center;
  gap: var(--openbot-space-1);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-canvas);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}

.browser-takeover-preview-open-label > svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  stroke-width: var(--openbot-icon-stroke);
}

.browser-takeover-preview-open:hover .browser-takeover-preview-open-label,
.browser-takeover-preview-open:focus-visible .browser-takeover-preview-open-label {
  opacity: 1;
}

.browser-takeover-preview-viewport img,
.browser-takeover-preview-skeleton {
  width: 100%;
  height: 100%;
}

.browser-takeover-preview-viewport img {
  display: block;
  object-fit: cover;
}

.browser-takeover-preview-fallback {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  padding: var(--openbot-space-6);
  text-align: center;
}

.browser-takeover-preview-fallback svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  margin-bottom: var(--openbot-space-1);
  stroke-width: var(--openbot-icon-stroke);
}

.browser-takeover-preview-fallback strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.browser-takeover-preview-fallback span {
  max-width: 100%;
  overflow: hidden;
  color: var(--openbot-text-readable);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.browser-takeover-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}

.browser-takeover-actions .ui-button {
  transition: transform var(--openbot-duration-fast) var(--openbot-ease-out);
}

.browser-takeover-actions .ui-button:active:not(:disabled) {
  transform: scale(0.97);
}

@keyframes browser-takeover-in {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.99);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.question-prompt-bubble.ui-bubble {
  width: min(540px, 100%);
  max-width: 100%;
}

.question-prompt-bubble > .ui-bubble-content {
  width: 100%;
  border-color: var(--openbot-border);
  background: var(--openbot-bg-canvas);
}

.question-prompt-complete {
  min-width: 0;
  display: grid;
  gap: var(--openbot-space-3);
}

.question-prompt-complete-header,
.question-prompt-complete-status {
  display: flex;
  align-items: center;
}

.question-prompt-complete-header {
  min-width: 0;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  min-height: 24px;
}

.question-prompt-complete-status {
  min-width: 0;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-primary);
}

.question-prompt-complete-status svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  color: var(--openbot-success);
  stroke-width: var(--openbot-icon-stroke);
}

.question-prompt-complete:not([data-state="answered"]) .question-prompt-complete-status svg {
  color: var(--openbot-text-muted);
}

.question-prompt-complete-status strong {
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-lg);
  letter-spacing: var(--openbot-tracking-tight);
}

.question-prompt-complete-answers.ui-item-group {
  gap: var(--openbot-space-3);
  border: 0;
  border-radius: 0;
  background: transparent;
}

.question-prompt-complete-answers .ui-item {
  min-height: 0;
  border: 0;
  padding: 0;
}

.question-prompt-complete-answers .ui-item-title,
.question-prompt-complete-answers .ui-item-description {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.question-prompt-complete-answers .ui-item-title {
  font-weight: var(--openbot-weight-regular);
}

.question-prompt-header {
  min-width: 0;
  min-height: var(--openbot-control-xs);
}

.question-prompt-header h2 {
  margin: 0;
  padding-top: var(--openbot-space-0-5);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-lg);
  letter-spacing: var(--openbot-tracking-tight);
}

.question-prompt-navigation {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-0-5);
}

.question-prompt-layout {
  position: relative;
  min-width: 0;
}

.question-prompt-navigation-root.ui-questionnaire {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--openbot-space-4);
}

.question-prompt-navigation-button.ui-button {
  width: 22px;
  height: 22px;
  min-height: 22px;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  background: transparent;
  padding: 0;
  color: var(--openbot-text-muted);
  transition: none;
}

.question-prompt-navigation-button.ui-button:hover:not(:disabled) {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}

.question-prompt-navigation-button.ui-button:focus-visible {
  background: var(--openbot-bg-control-hover);
  box-shadow: 0 0 0 1px var(--openbot-border-strong);
  color: var(--openbot-text-primary);
}

.question-prompt-navigation-button.ui-button:disabled {
  background: transparent;
  color: var(--openbot-text-dim);
  opacity: 0.52;
}

.question-prompt-navigation-button svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}

.question-prompt-navigation .ui-questionnaire-progress {
  min-width: 48px;
  padding-inline: var(--openbot-space-1);
  font-family: var(--openbot-font-sans);
  text-align: center;
}

.question-prompt-cancel {
  margin-left: var(--openbot-space-1);
}

.question-prompt-stage {
  min-width: 0;
  overflow: hidden;
  transition: height var(--page-slide-dur) var(--page-slide-ease);
}

.question-prompt-stage .question-prompt-page {
  bottom: auto;
  display: grid;
  gap: var(--openbot-space-3);
}

.question-prompt-stage:not([data-transitioning]) .question-prompt-page:not([aria-hidden="true"]) {
  position: relative;
}

.question-prompt-stage[data-preparing],
.question-prompt-stage[data-preparing] .t-page {
  transition: none;
}

.question-prompt-options.ui-item-group {
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface);
}

.question-prompt-options > :is(.ui-questionnaire-choice, .question-prompt-custom-row) {
  transition:
    background-color var(--openbot-duration-hover) ease,
    box-shadow var(--openbot-duration-hover) ease;
}

.question-prompt-options > .ui-questionnaire-choice:hover:not([data-disabled]) {
  background: var(--openbot-bg-control-hover);
}

.question-prompt-options > .ui-questionnaire-choice:focus-within {
  outline: 1px solid var(--openbot-border-strong);
  outline-offset: -1px;
  background: var(--openbot-bg-control-hover);
}

.question-prompt-options > .ui-questionnaire-choice[data-checked] {
  background: var(--openbot-bg-control-active);
}

.question-prompt-options .ui-item {
  min-height: 48px;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-2) var(--openbot-space-3);
}

.question-prompt-options .ui-item-title,
.question-prompt-options .ui-item-description {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.question-prompt-options .ui-kbd {
  width: 20px;
  min-width: 20px;
  border-color: var(--openbot-border);
  background: var(--openbot-hover);
  color: var(--openbot-text-muted);
}

.question-prompt-options > .ui-questionnaire-choice[data-checked] .ui-kbd {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-secondary);
}

.question-prompt-choice-arrow {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  color: var(--openbot-text-muted);
  opacity: 0;
  transform: translateX(-3px);
  transition:
    opacity var(--openbot-duration-hover) ease,
    transform var(--openbot-duration-hover) var(--openbot-ease-out);
}

.question-prompt-choice-arrow svg {
  width: 100%;
  height: 100%;
  stroke-width: var(--openbot-icon-stroke);
}

.question-prompt-options
  > .ui-questionnaire-choice:is(:hover, :focus-within, [data-checked])
  .question-prompt-choice-arrow {
  opacity: 1;
  transform: translateX(0);
}

.question-prompt-custom-row {
  min-width: 0;
  min-height: 44px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-1-5) var(--openbot-space-3);
}

.question-prompt-custom-row[data-selected] {
  background: var(--openbot-bg-control-active);
}

.question-prompt-custom-row:focus-within {
  background: var(--openbot-bg-control-hover);
  box-shadow: none;
}

.question-prompt-pencil {
  width: 20px;
  height: 20px;
  display: grid;
  align-self: center;
  place-items: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-hover);
  color: var(--openbot-text-muted);
}

.question-prompt-pencil svg {
  display: block;
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  transform: translateY(-0.5px);
}

.question-prompt-custom-row:focus-within .question-prompt-pencil {
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-secondary);
}

.question-prompt-custom-row .ui-questionnaire-input {
  width: 100%;
  min-height: 30px;
  border: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}

.question-prompt-custom-row .ui-questionnaire-input::placeholder {
  color: var(--openbot-text-muted);
}

.question-prompt-custom-row .ui-questionnaire-input:focus {
  outline: 0;
  box-shadow: none;
}

.question-prompt-inline-actions,
.question-prompt-sending {
  display: flex;
  align-items: center;
}

.question-prompt-inline-actions {
  gap: var(--openbot-space-2);
}

.question-prompt-sending {
  gap: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  white-space: nowrap;
}

.question-prompt-inline-actions [data-slot="questionnaire-skip"] {
  min-height: 28px;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-pill);
  background: transparent;
  padding-inline: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
}

.question-prompt-inline-actions [data-slot="questionnaire-skip"]:hover:not(:disabled) {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}

.question-prompt-inline-actions [data-slot="questionnaire-skip"]:focus-visible {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-control-hover);
  box-shadow: 0 0 0 1px var(--openbot-border-strong);
  color: var(--openbot-text-primary);
}

.question-prompt-empty {
  min-width: 0;
  display: grid;
  gap: var(--openbot-space-0-5);
  padding: var(--openbot-space-1);
}

.question-prompt-empty strong {
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
}

.question-prompt-empty > span {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.question-prompt-history-entry {
  width: min(540px, 100%);
}

@media (max-width: 520px) {
  .question-prompt-bubble.ui-bubble {
    width: 100%;
  }

  .question-prompt-bubble > .ui-bubble-content {
    padding: var(--openbot-space-3);
  }

  .question-prompt-header {
    gap: var(--openbot-space-2);
  }

  .question-prompt-navigation .ui-questionnaire-progress {
    min-width: 42px;
    padding-inline: 0;
  }

  .question-prompt-sending {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .question-prompt-stage {
    transition: none;
  }
}

.approval-card {
  display: flex;
  width: min(540px, 100%);
  margin: var(--openbot-space-3) 0 var(--openbot-space-6);
  flex-direction: column;
  gap: var(--openbot-space-4);
  animation: approval-card-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}

.approval-card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--openbot-space-2);
}

.approval-card-footer > :last-child {
  margin-inline-start: auto;
}

.approval-button {
  border-radius: var(--openbot-radius-pill);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-regular);
}

.approval-card-content {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-3);
}

.approval-card-content:empty {
  display: none;
}

.approval-command-block,
.approval-detail-row,
.approval-permissions {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface);
}

.approval-command-block code {
  display: block;
  overflow-x: auto;
  padding: var(--openbot-space-3);
  color: var(--openbot-text-secondary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-md);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.approval-cwd {
  border-bottom: 1px solid var(--openbot-border);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  color: var(--openbot-text-muted);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  overflow-wrap: anywhere;
}

.approval-detail-row {
  display: grid;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-3);
}

.approval-detail-label {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

.approval-detail-row strong {
  color: var(--openbot-text-secondary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  overflow-wrap: anywhere;
}

.approval-permissions {
  display: grid;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-3);
}

.approval-permissions:empty {
  display: none;
}

.approval-permissions span {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  overflow-wrap: anywhere;
}

.approval-reason {
  margin: calc(-1 * var(--openbot-space-2)) 0 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
  overflow-wrap: anywhere;
}

@keyframes approval-card-in {
  from {
    opacity: 0;
    transform: translateY(5px) scale(0.99);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (max-width: 800px) {
  .direct-private-label {
    display: none;
  }

  .direct-message-list,
  .direct-composer-wrap {
    padding-right: 14px;
    padding-left: 14px;
  }

  .direct-message > .ui-message-content {
    max-width: 88%;
  }
}

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


/* /@fs//app/packages/ui/src/features/conversation/styles/ui-blocks.css */
/* Interactive blocks an agent draws: confirm, choice, quick replies and form. Tokens only. */

.ui-block-card {
  display: flex;
  max-width: 600px;
  flex-direction: column;
  gap: var(--openbot-space-3);
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-surface);
  transition: border-color var(--openbot-duration-slow) var(--openbot-ease-out);
}

.ui-block-card[data-danger] {
  border-color: var(--openbot-danger-border);
}

.ui-block-card[data-status="expired"],
.ui-block-card[data-status="closed"] {
  color: var(--openbot-text-muted);
}

.ui-block-header {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--openbot-space-3);
}

.ui-block-heading {
  min-width: 0;
}

.ui-block-title {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-xl);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-xl);
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.ui-block-subtitle {
  margin: var(--openbot-space-0-5) 0 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}

.ui-block-status[data-slot="badge"] {
  flex: 0 0 auto;
  gap: var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-pill);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}

.ui-block-status svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}

.ui-block-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--openbot-space-3);
}

.ui-block-body:empty {
  display: none;
}

/* The line a frozen block ends with. */
.ui-block-outcome {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
  margin: 0;
  padding: var(--openbot-space-2) var(--openbot-space-3);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-glass-surface);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}

.ui-block-outcome[data-status="answered"] {
  background: var(--openbot-success-soft);
  color: var(--openbot-success-text);
}

.ui-block-outcome svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
}

.ui-block-outcome-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* The end of an open block: a failed answer and the skip button. */
.ui-block-footer {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}

.ui-block-error {
  min-width: 0;
  flex: 1 1 auto;
  margin: 0;
  color: var(--openbot-danger-text);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  overflow-wrap: anywhere;
}

.ui-block-skip {
  margin-inline-start: auto;
}

.ui-block-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--openbot-space-2);
}

/* A block that answers itself has no Skip, so its last button, such as Cancel, sits at the far end. */
.ui-block-actions-auto > button:last-of-type {
  margin-inline-start: auto;
}

.ui-block-confirm-step {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.ui-block-confirm-question {
  padding: 0;
  margin-bottom: var(--openbot-space-2);
  font-weight: var(--openbot-weight-medium);
}

.ui-block-hint,
.ui-block-counter,
.ui-block-sending {
  margin: 0;
  color: var(--openbot-text-dim);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.ui-block-sending {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
}

/* Confirm */
.ui-block-fields {
  display: grid;
  grid-template-columns: minmax(64px, max-content) minmax(0, 1fr);
  align-items: center;
  gap: var(--openbot-space-2) var(--openbot-space-3);
  margin: 0;
  font-size: var(--openbot-text-lg);
}

.ui-block-fields dt {
  color: var(--openbot-text-muted);
}

.ui-block-fields dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.ui-block-preview {
  position: relative;
  max-height: 6.5em;
  overflow: hidden;
  padding: var(--openbot-space-3);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-lg);
}

.ui-block-preview::after {
  position: absolute;
  inset: auto 0 0;
  height: 2.4em;
  background: linear-gradient(transparent, var(--openbot-bg-surface-raised));
  content: "";
  pointer-events: none;
}

.ui-block-preview-text {
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

/* A button held to press. The fill grows from the left while it is held. */
.ui-block-hold {
  position: relative;
  overflow: hidden;
  user-select: none;
  touch-action: none;
}

.ui-block-hold-fill {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, currentColor 22%, transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--openbot-duration-fast) var(--openbot-ease-out);
  pointer-events: none;
}

.ui-block-hold[data-holding] .ui-block-hold-fill {
  transform: scaleX(1);
  transition: transform var(--ui-block-hold-duration) linear;
}

.ui-block-hold-label {
  position: relative;
}

/* Choice */
.ui-block-options {
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-card);
}

.ui-block-option {
  position: relative;
  display: grid;
  grid-template-columns: var(--openbot-control-xs) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3);
  cursor: pointer;
  transition: background var(--openbot-duration-fast) var(--openbot-ease-out);
}

.ui-block-option + .ui-block-option {
  border-top: 1px solid var(--openbot-border-strong);
}

.ui-block-option:hover {
  background: var(--openbot-hover);
}

.ui-block-option[data-checked] {
  background: var(--openbot-question-option-soft);
}

.ui-block-option[data-disabled] {
  cursor: default;
}

.ui-block-option[data-disabled]:not([data-checked]) {
  opacity: 0.5;
}

.ui-block-option:focus-within {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: -2px;
}

.ui-block-option .ui-block-option-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: inherit;
}

.ui-block-option-key {
  display: grid;
  width: var(--openbot-control-xs);
  height: var(--openbot-control-xs);
  place-items: center;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-muted);
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
}

.ui-block-option[data-checked] .ui-block-option-key {
  border-color: var(--openbot-question-option);
  background: var(--openbot-question-option);
  color: var(--openbot-text-on-light);
}

.ui-block-option-label {
  min-width: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-medium);
  overflow-wrap: anywhere;
}

.ui-block-option-meta {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-variant-numeric: tabular-nums;
}

/* Quick replies */
.ui-block-quick {
  display: flex;
  max-width: 600px;
  flex-direction: column;
  gap: var(--openbot-space-2);
}

.ui-block-quick-title {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
}

.ui-block-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-2);
}

.ui-block-chip[data-faded] {
  opacity: 0.35;
}

.ui-block-chip[data-chosen] {
  border-color: var(--openbot-accent);
  background: var(--openbot-accent-soft);
  color: var(--openbot-text-primary);
  opacity: 1;
}

.ui-block-quick-text {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}

.ui-block-quick-text > :first-child {
  flex: 1 1 auto;
  min-width: 0;
}

/* Form */
.ui-block-form-fields {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--openbot-space-3);
}

.ui-block-field {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1-5);
}

.ui-block-field-label {
  padding: 0;
  margin-bottom: var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
}

.ui-block-required {
  margin-inline-start: var(--openbot-space-0-5);
  color: var(--openbot-danger-text);
}

.ui-block-field-error {
  margin: 0;
  color: var(--openbot-danger-text);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.ui-block-segmented {
  display: flex;
  gap: var(--openbot-space-0-5);
  padding: var(--openbot-space-0-5);
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface-raised);
}

.ui-block-segment {
  flex: 1 1 0;
  min-width: 0;
  color: var(--openbot-text-muted);
}

.ui-block-segment[aria-pressed="true"] {
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
}

@media (prefers-reduced-motion: reduce) {
  .ui-block-card,
  .ui-block-option,
  .ui-block-hold-fill {
    transition: none;
  }
}


/* /@fs//app/packages/ui/src/features/conversation/styles/surface-overrides.css */
.settings-panel,
.browser-panel,
.remote-desktop-workspace {
  background: var(--openbot-bg-canvas);
}

.composer-reply-preview {
  border-color: var(--openbot-border);
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-primary);
}

.message-reaction-pill {
  border-color: var(--openbot-border);
  background: transparent;
  color: var(--openbot-text-primary);
}

@media (hover: hover) and (pointer: fine) {
  .message-reaction-pill:not(.message-reaction-pill-readonly):hover {
    background: var(--openbot-hover);
  }
}

.composer,
.direct-composer {
  background: var(--openbot-bg-surface);
}

.direct-composer > button:hover:not(:disabled) {
  background: var(--openbot-accent-hover);
}

.remote-desktop-stage,
.remote-desktop-viewer {
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-secondary);
}

.remote-desktop-header {
  background: var(--openbot-bg-sidebar);
}

.voice-button:active,
.voice-button-active:active {
  transform: scale(0.97);
}

/* A filled field with no border, in the menu item shape. */
.provider-model-search {
  height: var(--openbot-control-md);
  flex-shrink: 0;
  margin-bottom: var(--ui-menu-padding);
  border-color: transparent;
  border-radius: var(--ui-menu-item-radius);
  background: var(--ui-menu-item-hover);
  padding-inline: var(--ui-menu-inset);
  font-size: var(--openbot-text-md);
}

.provider-model-search:focus-visible {
  border-color: var(--ui-menu-edge);
}

.provider-model-scroll {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.provider-model-group {
  padding: var(--openbot-space-2) var(--ui-menu-inset) var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: 500;
}


/* /@fs//app/packages/ui/src/features/conversation/styles/browser-previews.css */
/* Browser cards use captured images; only the expanded view owns a live surface. */
.browser-preview-sidebar[hidden] {
  display: none;
}

.browser-preview-header {
  display: flex;
  height: var(--left-header-height, 38px);
  flex: 0 0 auto;
  align-items: center;
  gap: var(--openbot-space-1);
  padding: 0 var(--openbot-space-3);
  color: var(--openbot-text-secondary);
}

.browser-preview-header > span {
  flex: 1;
  font-size: var(--openbot-text-sm);
}

.browser-preview-header > .ui-button,
.browser-preview-close {
  border-radius: var(--openbot-radius-sm);
}

.browser-preview-header > .ui-button:focus-visible,
.browser-preview-close:focus-visible {
  outline: 1px solid var(--openbot-text-muted);
  outline-offset: 1px;
  box-shadow: none;
}

.browser-preview-sidebar .ui-button:active:not(:disabled):not([data-disabled]) {
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
}

.browser-preview-header > .ui-button > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}

.browser-preview-list {
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding: var(--openbot-space-2) var(--openbot-space-4) var(--openbot-space-4);
}

.browser-preview-list > .browser-empty-state {
  height: auto;
  justify-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-8) var(--openbot-space-4);
}

.browser-preview-list > .browser-empty-state > svg,
.browser-preview-image > svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  color: var(--openbot-text-muted);
  stroke-width: var(--openbot-icon-stroke);
}

.browser-preview-list > .browser-empty-state > svg {
  margin-bottom: var(--openbot-space-1);
}

.browser-preview-list > .browser-empty-state > strong {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  font-weight: 500;
}

.browser-preview-list > .browser-empty-state > .ui-button {
  margin-top: var(--openbot-space-1);
}

.browser-preview-card {
  position: relative;
  margin-bottom: var(--openbot-space-4);
}

.browser-preview-open {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-1);
  color: var(--openbot-text-secondary);
  font-weight: 400;
}

.browser-preview-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-surface);
}

.browser-preview-image img,
.browser-preview-loading {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.browser-preview-title {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--openbot-text-sm);
}

.browser-preview-open-label {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  line-height: 1;
  pointer-events: none;
  opacity: 0;
}

.browser-preview-open-label > svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  stroke-width: var(--openbot-icon-stroke);
}

.browser-preview-open:hover .browser-preview-open-label {
  opacity: 1;
}

.browser-preview-close {
  position: absolute;
  top: var(--openbot-space-2);
  right: var(--openbot-space-2);
  opacity: 0;
}

.browser-preview-close > svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  stroke-width: var(--openbot-icon-stroke);
}

.browser-preview-card:hover .browser-preview-close,
.browser-preview-card:focus-within .browser-preview-close {
  opacity: 1;
}

/* The code or the password the agent asks for: the site, the value and Submit. The inner parts are glass
   in both variants; the timeline card keeps its frame, and the island has a denser glass of its own, so that
   the page under it does not show through as dark shapes behind the code. */
.browser-secret-card {
  --otp-slot-border: var(--openbot-glass-border);
  --otp-slot-background: var(--openbot-glass-surface);
  --otp-slot-filled-background: var(--openbot-glass-surface-hover);
  --otp-slot-shadow: inset 0 1px 0 var(--openbot-glass-highlight);

  display: grid;
  gap: var(--openbot-space-4);
  color: var(--openbot-text-primary);
}

.browser-secret-card[data-variant="island"] {
  box-sizing: border-box;
  width: min(100%, 420px);
  min-width: 0;
  padding: var(--openbot-space-4);
  border: 1px solid var(--openbot-glass-border);
  border-radius: var(--openbot-radius-xl);
  background: color-mix(in srgb, var(--openbot-bg-glass), var(--openbot-bg-control) 60%);
  box-shadow: var(--openbot-shadow-raised);
  backdrop-filter: blur(32px) saturate(1.4);
}

.browser-secret-header {
  display: flex;
  align-items: flex-start;
  gap: var(--openbot-space-3);
}

.browser-secret-close {
  flex: none;
  margin-left: auto;
}

.browser-secret-icon {
  display: grid;
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  flex: none;
  place-items: center;
  border: 1px solid var(--openbot-glass-border);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-glass-surface);
  box-shadow: inset 0 1px 0 var(--openbot-glass-highlight);
  color: var(--openbot-text-primary);
}

.browser-secret-glyph {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

.browser-secret-heading {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-0-5);
}

.browser-secret-heading h2 {
  margin: 0;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
}

/* The site is never cut: the user checks it before the value goes there. */
.browser-secret-heading p {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

.browser-secret-origin {
  color: var(--openbot-text-secondary);
  font-weight: var(--openbot-weight-medium);
}

.browser-secret-code,
.browser-secret-password {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-1-5);
}

/* Below the focus and error borders of the field, which are one class strong. */
:where(.browser-secret-password) > input {
  border-color: var(--openbot-glass-border);
  background: var(--openbot-glass-surface);
}

.browser-secret-error {
  margin: 0;
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
}

.browser-secret-footer {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
  padding-top: var(--openbot-space-3);
  border-top: 1px solid var(--openbot-glass-border);
}

.browser-secret-private {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

.browser-secret-glyph-sm {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: none;
}

.browser-secret-card .browser-takeover-preview-viewport {
  width: 100%;
  max-height: 280px;
}

.browser-secret-card .browser-takeover-preview-viewport img {
  min-height: 0;
  object-fit: contain;
}


/* /@fs//app/packages/ui/src/features/conversation/styles/browser-dock.css */
/* The overlay view above a local page: the page shows through all of it but the dock. */
html:has(.browser-dock-surface),
body:has(.browser-dock-surface),
#root:has(.browser-dock-surface) {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
}

.browser-dock-surface {
  position: relative;
  width: 100%;
  height: 100%;
  background: transparent;
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
}

/*
 * The dock over a browser page: the island for what the agent does, the queue, and the composer of the
 * tab's agent. Each part is glass. The layers are local to the dock: the copies of a motion go under the
 * composer, the sent text goes over it, and the island is on top.
 */
.browser-dock {
  position: absolute;
  bottom: var(--openbot-space-4);
  left: 50%;
  display: flex;
  width: min(640px, calc(100% - 2 * var(--openbot-space-6)));
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-2);
  isolation: isolate;
  translate: -50% 0;
}

.browser-dock-glass {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-0-5);
  border: 1px solid var(--openbot-glass-border);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-glass);
  box-shadow: var(--openbot-shadow-raised);
  backdrop-filter: blur(16px);
  color: var(--openbot-text-secondary);
}

.browser-dock-composer svg,
.browser-dock-island-activity svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

/* The island: one glass capsule over the composer for the step, the code and the reply. A spring sets its
   size and corners while it changes; at rest, its content sets them. */
.browser-dock-island {
  position: relative;
  z-index: 4;
  box-sizing: border-box;
  max-width: 100%;
}

/* It grows out from under the composer, so it is under the composer until it is open. */
.browser-dock-island[data-budding] {
  z-index: 1;
}

.browser-dock-island:is([data-mode="reply"], [data-mode="secret"]) {
  width: 100%;
  border-radius: var(--openbot-radius-lg);
}

/* The code card is narrower than the reply, and its glass is denser, so that the page under it does not show
   through as dark shapes behind the code. */
.browser-dock-island[data-mode="secret"] {
  width: min(100%, 420px);
  border-radius: var(--openbot-radius-xl);
  background: color-mix(in srgb, var(--openbot-bg-glass), var(--openbot-bg-control) 60%);
  backdrop-filter: blur(32px) saturate(1.4);
}

.browser-dock-island-face {
  box-sizing: border-box;
  min-width: 0;
  flex: 1;
}

/* The island has the glass of the code card, so the card does not paint a second one. */
.browser-dock-island-face > .browser-secret-card {
  width: 100%;
  border: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
}

/* The step is at the start and the button at the end, so that the button stays at the edge while the island
   changes width. */
.browser-dock-island-activity {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  padding: var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-2);
  font-size: var(--openbot-text-sm);
  white-space: nowrap;
}

/* Old content on its way out of the island, and the copy of an island that closes. */
.browser-dock-island-leaving {
  pointer-events: none;
}

.browser-dock-island.browser-dock-island-ghost {
  position: absolute;
  z-index: 1;
  translate: -50% 0;
  pointer-events: none;
}

.browser-dock-spin {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: none;
  color: var(--openbot-text-muted);
  animation: ui-spin 1s linear infinite;
}

/* The step and the button that gives the page to the user, or back. */
.browser-dock-status {
  display: inline-flex;
  min-width: 0;
  overflow: hidden;
  align-items: center;
  gap: var(--openbot-space-1-5);
}

.browser-dock-status > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.browser-dock-handoff {
  flex: none;
  margin-left: auto;
  border-radius: var(--openbot-radius-pill);
}

.browser-dock-island-reply {
  display: grid;
  gap: var(--openbot-space-1-5);
  padding: var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-3) var(--openbot-space-3);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
}

.browser-dock-reply-header {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}

.browser-dock-reply-header > strong {
  font-weight: var(--openbot-weight-medium);
}

.browser-dock-reply-close {
  margin-left: auto;
}

.browser-dock-reply-body {
  max-height: 160px;
  padding-right: var(--openbot-space-1);
  overflow: auto;
  line-height: var(--openbot-leading-lg);
}

.browser-dock-reply-actions {
  display: flex;
  justify-content: flex-end;
}

/* Queue ------------------------------------------------------------------------------------------- */

/* The queue and the composer, with no gap, so the queue tucks under the top edge of the field. */
.browser-dock-stack {
  display: flex;
  width: 100%;
  flex-direction: column;
}

/* The queue keeps clear of the round ends of the field, and has the glass of the field. */
.agent-queue-panel[data-variant="floating"] {
  margin-inline: var(--openbot-space-6);
  border-color: var(--openbot-glass-border);
  background: var(--openbot-bg-glass);
  backdrop-filter: blur(16px);
  /* A sent message opens the queue with a clip that rises out of the field. */
  animation: none;
}

/* The queue closes on the island spring, which the dock sets. */
.browser-dock-stack > .agent-queue-slot {
  transition-duration: var(--browser-dock-island-duration);
  transition-timing-function: var(--browser-dock-island-easing);
}

.browser-dock-composer {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-2);
}

.browser-dock-avatar {
  width: 20px;
  height: 20px;
  flex: none;
}

.browser-dock-editor {
  min-width: 0;
  flex: 1;
  color: var(--openbot-text-primary);
}

/* The text of a new queue row waits until the sent text arrives from the field. */
.agent-queue-panel[data-variant="floating"] .agent-queue-item[data-arriving] .agent-queue-message {
  visibility: hidden;
}

/* The glass copy that changes into the step. It starts under the field, so it comes out from behind it. */
.browser-dock-morph {
  position: absolute;
  z-index: 1;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid var(--openbot-glass-border);
  background: var(--openbot-bg-glass);
  box-shadow: var(--openbot-shadow-raised);
  backdrop-filter: blur(16px);
  pointer-events: none;
}

/* The step on the copy, without its glass, in the middle of the copy at its final size. */
.browser-dock-morph > .browser-dock-glass {
  position: absolute;
  top: 50%;
  left: 50%;
  border-color: transparent;
  animation: none;
  background: none;
  backdrop-filter: none;
  box-shadow: none;
  translate: -50% -50%;
}

/* The sent text on its way from the field, or from a queue row, to the step. */
.browser-dock-morph-text {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  overflow: hidden;
  color: var(--openbot-text-primary);
  pointer-events: none;
  text-overflow: ellipsis;
  transform-origin: left center;
  white-space: nowrap;
  will-change: transform, opacity;
}

/* The row actions are small glass chips, as the field and the step are. */
.agent-queue-panel[data-variant="floating"] .agent-queue-actions {
  gap: var(--openbot-space-1);
}

.agent-queue-panel[data-variant="floating"] :is(.agent-queue-steer, .agent-queue-icon-button) {
  box-sizing: border-box;
  height: 24px;
  border: 1px solid var(--openbot-glass-border);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-glass-surface);
  box-shadow: inset 0 1px 0 var(--openbot-glass-highlight);
  backdrop-filter: blur(8px);
  color: var(--openbot-text-secondary);
  transition:
    background var(--openbot-duration-hover) ease,
    border-color var(--openbot-duration-hover) ease,
    box-shadow var(--openbot-duration-hover) ease,
    color var(--openbot-duration-hover) ease,
    opacity var(--openbot-duration-hover) ease;
}

.agent-queue-panel[data-variant="floating"] .agent-queue-steer {
  padding: 0 var(--openbot-space-2) 0 var(--openbot-space-1-5);
  font-size: var(--openbot-text-sm);
}

.agent-queue-panel[data-variant="floating"] .agent-queue-icon-button {
  width: 24px;
}

.agent-queue-panel[data-variant="floating"] :is(.agent-queue-steer, .agent-queue-icon-button) svg {
  width: 14px;
  height: 14px;
}

.agent-queue-panel[data-variant="floating"]
  :is(.agent-queue-steer, .agent-queue-icon-button):is(:hover:not(:disabled), :focus-visible) {
  background: var(--openbot-glass-surface-hover);
  color: var(--openbot-text-primary);
}

.agent-queue-panel[data-variant="floating"]
  .agent-queue-icon-button.agent-queue-delete:is(:hover:not(:disabled), :focus-visible) {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
}

.agent-queue-panel[data-variant="floating"] :is(.agent-queue-steer, .agent-queue-icon-button):focus-visible {
  box-shadow:
    inset 0 1px 0 var(--openbot-glass-highlight),
    0 0 0 2px var(--openbot-border-focus);
}

/* With a pointer, the row actions are quiet. They get their glass on the row under the pointer or with
   focus. */
@media (hover: hover) {
  .agent-queue-panel[data-variant="floating"]
    .agent-queue-item:not(:hover, :focus-within)
    :is(.agent-queue-steer, .agent-queue-icon-button):not(:focus-visible) {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    color: var(--openbot-text-muted);
  }
}

@media (prefers-reduced-motion: reduce) {
  .browser-dock-stack > .agent-queue-slot {
    transition: none;
  }
}


/* /@fs//app/packages/ui/src/features/conversation/styles/browser-full-view.css */
/*
 * The browser as a full view: the tabs in the top row on the window frame, then the card with the
 * address row and the page. The view is portaled to `document.body`, outside `.app-window`, so it sets
 * the frame values of that window again.
 *
 * The view appears and disappears in one frame, with no transition. The page inside it is a native
 * view that the renderer cannot animate: it is attached once the view has stopped moving
 * (`BrowserFullView.tsx`), so an opening transition is only time in front of an empty card.
 */

/* Keep app navigation below the portaled browser and its backdrop. */
body:has(.browser-full-view) .app-frame {
  isolation: isolate;
}

.browser-expanded-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--openbot-layer-dropdown) - 2);
}

.browser-full-view {
  --browser-full-edge: var(--openbot-space-1);
  --browser-full-top-height: 38px;
  position: fixed;
  z-index: calc(var(--openbot-layer-dropdown) - 1);
  inset: 0;
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  padding: 0 var(--browser-full-edge) var(--browser-full-edge);
  background: color-mix(in srgb, var(--openbot-bg-canvas) 50%, var(--openbot-bg-notch));
  color: var(--openbot-text-primary);
}

.browser-full-view[hidden],
.browser-expanded-backdrop[hidden] {
  display: none;
}

/* The top row on the frame. Its controls are the flat chips of the app top row. The empty parts of the
 * row move the window. */
.browser-full-top {
  display: flex;
  height: var(--browser-full-top-height);
  min-width: 0;
  flex: none;
  align-items: center;
  gap: var(--openbot-space-1);
  padding-inline: var(--openbot-space-1) 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}

.browser-full-top svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

.browser-full-top-spacer {
  flex: 1;
}

/*
 * On macOS the window is `titleBarStyle: "hidden"` and the traffic lights are drawn over the view.
 * `trafficLightPosition: { x: 12, y: 13 }` (`src/main/main-window.ts`) puts the group at x 12..71, so
 * the first control starts at x 82, where the top row of the app frame starts beside those dots.
 */
.browser-full-view-mac-controls .browser-full-top {
  padding-inline-start: calc(82px - var(--browser-full-edge));
}

.browser-full-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-canvas);
}

.browser-full-browser {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}

.browser-full-alert {
  margin: var(--openbot-space-2) var(--openbot-space-2) 0;
}

/* The dock is placed in the surface, so the surface is its containing block. */
.browser-full-surface {
  position: relative;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}

/*
 * A host's page is drawn on a canvas at the host's viewport shape, not the window's. The page keeps
 * that shape and gets a margin at the sides or at the bottom. `BrowserFullView` sets the frame size
 * once the first frame is drawn; until then the page takes a common desktop shape.
 */
.browser-full-surface[data-live] {
  display: grid;
  place-items: center;
  container-type: size;
}

.browser-full-surface[data-live] .browser-live-view {
  position: relative;
  inset: auto;
  width: min(
    calc(100cqw - 2 * var(--openbot-space-3)),
    calc((100cqh - 2 * var(--openbot-space-3)) * var(--browser-frame-width, 16) / var(--browser-frame-height, 10))
  );
  height: auto;
  aspect-ratio: var(--browser-frame-width, 16) / var(--browser-frame-height, 10);
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface);
}

.browser-full-owner-avatar {
  width: 16px;
  height: 16px;
  flex: none;
}

.browser-full-owner-acting {
  border-radius: var(--openbot-radius-pill);
  box-shadow: 0 0 0 1.5px var(--openbot-accent);
}

.browser-full-owner-globe {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: none;
  color: var(--openbot-text-muted);
}

/* The chips share the row. Below their minimum width the row scrolls, as other browsers do. The row is
 * the offset parent of the chips, so a drag can measure them in it. */
.browser-full-chips {
  --browser-full-fade: calc(var(--openbot-space-8) * 2);
  position: relative;
  min-width: 0;
  flex: 0 1 auto;
  overflow-x: auto;
  padding: var(--openbot-space-0-5);
  scrollbar-width: none;
}

/* A row that scrolls fades out at the edge where more chips are. */
.browser-full-chips[data-fade-start] {
  mask-image: linear-gradient(to right, transparent, var(--openbot-text-primary) var(--browser-full-fade));
}

.browser-full-chips[data-fade-end] {
  mask-image: linear-gradient(to right, var(--openbot-text-primary) calc(100% - var(--browser-full-fade)), transparent);
}

.browser-full-chips[data-fade-start][data-fade-end] {
  mask-image: linear-gradient(
    to right,
    transparent,
    var(--openbot-text-primary) var(--browser-full-fade),
    var(--openbot-text-primary) calc(100% - var(--browser-full-fade)),
    transparent
  );
}

/* Chips shrink evenly to a width that still shows a few words of the title, then the row scrolls. */
.browser-full-chip {
  min-width: 120px;
  max-width: 200px;
  flex: 0 1 200px;
  user-select: none;
  transition: flex-basis var(--openbot-duration-normal) var(--openbot-ease-out);
}

/* After a close with the pointer, the chips keep their width until the pointer leaves the row. */
.browser-full-chips[data-frozen] .browser-full-chip {
  flex: 0 0 var(--browser-full-chip-frozen);
}

.browser-full-chips[data-dragging] {
  cursor: grabbing;
}

.browser-full-chips[data-dragging] .browser-full-chip {
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}

/* The held chip is lifted above the others and follows the pointer without delay. */
.browser-full-chips[data-dragging] .browser-full-chip[data-dragging] {
  z-index: 1;
  background: var(--openbot-bg-surface-raised);
  box-shadow:
    inset 0 0 0 1px var(--openbot-border-strong),
    var(--openbot-shadow-raised);
  transition: none;
}

.browser-full-chips[data-dragging] .browser-full-chip::before {
  opacity: 0;
}

.browser-full-hidden-tabs {
  max-width: 320px;
}

@media (prefers-reduced-motion: reduce) {
  .browser-full-chip,
  .browser-full-chips[data-dragging] .browser-full-chip {
    transition: none;
  }
}

.browser-full-spin {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: none;
  color: var(--openbot-text-muted);
  animation: ui-spin 1s linear infinite;
}

.browser-full-chip .side-panel-tab-select {
  min-width: 0;
  flex: 1;
  justify-content: flex-start;
}

.browser-full-chip .side-panel-tab-label {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-align: start;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The address row: arrows and a filled capsule. */
.browser-full-address-row {
  display: flex;
  height: 44px;
  flex: none;
  align-items: center;
  gap: var(--openbot-space-0-5);
  padding-inline: var(--openbot-space-2);
  border-bottom: 1px solid var(--openbot-border);
  color: var(--openbot-text-secondary);
}

.browser-full-address-row svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

/* Focus is quiet: the capsule lifts and gets a thin edge. The caret and the selected address show where
 * typing goes. */
.browser-full-capsule {
  position: relative;
  display: flex;
  min-width: 0;
  height: var(--openbot-control-md);
  flex: 1;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-inline: var(--openbot-space-1);
  padding-inline: var(--openbot-space-2) var(--openbot-space-1);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  transition:
    background-color var(--openbot-duration-normal) var(--openbot-ease-out),
    box-shadow var(--openbot-duration-normal) var(--openbot-ease-out);
}

.browser-full-capsule:focus-within {
  background: var(--openbot-bg-control-active);
  box-shadow: inset 0 0 0 1px var(--openbot-border-grouped);
}

.browser-full-capsule .browser-full-capsule-input {
  height: 100%;
  min-width: 0;
  flex: 1;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
}

.browser-full-capsule .browser-full-capsule-input:focus-visible {
  outline: none;
}

.browser-full-capsule .browser-full-capsule-input::selection {
  background: var(--openbot-accent-strong);
}

.browser-full-capsule-agent {
  display: grid;
  flex: none;
  place-items: center;
}

/* The suggestions under the address field. */
.browser-full-suggest {
  position: absolute;
  z-index: var(--openbot-layer-dropdown);
  top: calc(100% + var(--openbot-space-1));
  right: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  padding: var(--openbot-space-1);
  border-radius: var(--openbot-radius-lg);
}

.browser-full-suggest-row {
  display: flex;
  width: 100%;
  min-width: 0;
  height: var(--openbot-control-md);
  align-items: center;
  gap: var(--openbot-space-2);
  padding-inline: var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  text-align: start;
  cursor: default;
}

.browser-full-suggest-row:hover {
  background: var(--openbot-bg-control-hover);
}

.browser-full-suggest-row[aria-selected="true"] {
  background: var(--openbot-bg-control-active);
}

.browser-full-suggest-icon {
  display: grid;
  width: var(--openbot-icon-sm);
  flex: none;
  place-items: center;
  color: var(--openbot-text-muted);
}

.browser-full-suggest-title {
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.browser-full-suggest-detail {
  min-width: 0;
  flex: 0 100 auto;
  overflow: hidden;
  color: var(--openbot-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.browser-full-suggest-switch {
  flex: none;
  margin-inline-start: auto;
  padding: 0 var(--openbot-space-2);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-pill);
  color: var(--openbot-text-muted);
}

/* Narrow: one button with the tab count opens the list of tabs. */
.browser-full-switch {
  min-width: 0;
  max-width: 100%;
  justify-content: flex-start;
  gap: var(--openbot-space-2);
}

.browser-full-switch-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The tab count, in a square, as phone browsers show it. */
.browser-full-switch-count {
  display: grid;
  min-width: 18px;
  height: 18px;
  flex: none;
  place-items: center;
  padding-inline: var(--openbot-space-1);
  border: 1.5px solid currentcolor;
  border-radius: var(--openbot-radius-sm);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.browser-full-switch-menu {
  display: flex;
  width: min(360px, calc(100vw - 2 * var(--openbot-space-3)));
  max-height: min(480px, 70dvh);
  flex-direction: column;
  padding: var(--openbot-space-1);
}

.browser-full-switch-list {
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.browser-full-switch-row {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-0-5);
}

.browser-full-switch-select {
  min-width: 0;
  height: auto;
  flex: 1;
  padding-block: var(--openbot-space-1-5);
}

.browser-full-switch-select[aria-current="true"] {
  background: var(--openbot-bg-control-active);
}

.browser-full-switch-close svg,
.browser-full-switch-actions svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

.browser-full-switch-text {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.browser-full-switch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-1);
  margin-top: var(--openbot-space-1);
  padding-top: var(--openbot-space-1);
  border-top: 1px solid var(--openbot-border);
}

@media (max-width: 720px) {
  /* The page starts under the address row. */
  .browser-full-surface[data-live] {
    place-items: start center;
    padding-top: var(--openbot-space-3);
  }
}


/* /@fs//app/apps/auth-api/src/styles.css */
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties;
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-cyrillic-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-cyrillic-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-greek-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-greek-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-vietnamese-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-cyrillic-ext-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-cyrillic-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-greek-ext-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-greek-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-vietnamese-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-latin-ext-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-latin-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
      "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
      "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring:where(:not(iframe)) {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .\!visible {
    visibility: visible !important;
  }
  .visible {
    visibility: visible;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .static {
    position: static;
  }
  .isolate {
    isolation: isolate;
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .block {
    display: block;
  }
  .contents {
    display: contents;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .table {
    display: table;
  }
  .flex-grow {
    flex-grow: 1;
  }
  .grow {
    flex-grow: 1;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .resize {
    resize: both;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .lowercase {
    text-transform: lowercase;
  }
  .ring {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
}
:root {
  --openbot-provider-current: currentcolor;
  --openbot-bg-native-canvas: #141414;
  --openbot-bg-native-sidebar: #141414;
  --openbot-bg-sheet: #141414;
  --openbot-bg-grouped: #212121;
  --openbot-text-grouped-secondary: #96969b;
  --openbot-border-grouped: #333335;
  --openbot-radius-grouped: 16px;
  --openbot-bg-chrome-glass: rgba(38, 38, 40, 0.96);
  --openbot-border-chrome-glass: rgba(255, 255, 255, 0.08);
  --openbot-bg-chrome-blur: rgba(26, 26, 28, 0.62);
  --openbot-bg-canvas: #1a1a1a;
  --openbot-bg-canvas-clear: rgba(26, 26, 26, 0);
  --openbot-bg-sidebar: #1a1a1a;
  --openbot-marketplace-detail-bg: #111111;
  --openbot-bg-surface: #212121;
  --openbot-bg-surface-raised: #242424;
  --openbot-bg-control: #212121;
  --openbot-bg-control-hover: #242424;
  --openbot-bg-control-active: #2a2a2a;
  --openbot-tabs-bar-bg: #212121;
  --openbot-tabs-pill-bg: #2a2a2a;
  --openbot-bg-overlay: rgba(26, 26, 26, 0.92);
  --openbot-dialog-overlay: rgba(0, 0, 0, 0.1);
  --openbot-dialog-ring: rgba(255, 255, 255, 0.1);
  --openbot-bg-glass: rgba(33, 33, 33, 0.76);
  --openbot-glass-surface: rgba(255, 255, 255, 0.07);
  --openbot-glass-surface-hover: rgba(255, 255, 255, 0.11);
  --openbot-glass-border: rgba(255, 255, 255, 0.18);
  --openbot-glass-highlight: rgba(255, 255, 255, 0.12);
  --openbot-glass-shadow: rgba(0, 0, 0, 0.28);
  --openbot-hero-grid-line: rgba(214, 173, 242, 0.09);
  --openbot-price-metal-high: #4c4c4c;
  --openbot-price-metal-core: #1f1f1f;
  --openbot-price-metal-low: #343434;
  --openbot-price-sheen-cool: rgba(150, 196, 255, 0.92);
  --openbot-price-sheen-light: rgba(240, 244, 250, 0.98);
  --openbot-price-sheen-warm: rgba(255, 184, 132, 0.94);
  --openbot-price-sheen-cool-soft: rgba(150, 196, 255, 0.26);
  --openbot-price-sheen-warm-soft: rgba(255, 184, 132, 0.28);
  --openbot-price-sheen-cool-clear: rgba(150, 196, 255, 0);
  --openbot-price-sheen-warm-clear: rgba(255, 184, 132, 0);
  --openbot-price-rim: rgba(255, 255, 255, 0.28);
  --openbot-price-rim-under: rgba(255, 255, 255, 0.1);
  --openbot-price-glow: rgba(180, 200, 255, 0.22);
  --openbot-bg-host-inset: #101216;
  --openbot-bg-notch: #000000;
  --openbot-mask-solid: #000000;
  --openbot-transparent: rgba(0, 0, 0, 0);
  --openbot-drawer-scrim: #000000;
  --openbot-scroll-edge-overlay: rgba(0, 0, 0, 0.72);
  --openbot-queue-surface: var(--openbot-bg-surface);
  --openbot-queue-border: var(--openbot-border-strong);
  --openbot-queue-text: var(--openbot-text-primary);
  --openbot-queue-action: var(--openbot-text-muted);
  --openbot-border: rgba(255, 255, 255, 0.035);
  --openbot-border-strong: rgba(255, 255, 255, 0.045);
  --openbot-image-outline: rgba(255, 255, 255, 0.1);
  --openbot-border-focus: rgba(0, 124, 247, 0.72);
  --openbot-text-primary: #ffffff;
  --openbot-text-on-light: #141414;
  --openbot-surface-light: #f0f0f0;
  --openbot-action: #f0f0f0;
  --openbot-action-foreground: #141414;
  --openbot-qr-background: #ffffff;
  --openbot-onboarding-desktop-mist: #dbe9ff;
  --openbot-onboarding-desktop-blue: #7eb4f2;
  --openbot-onboarding-desktop-indigo: #6f7de8;
  --openbot-sound-warm-back: #d95926;
  --openbot-sound-warm-ink: #f2c46b;
  --openbot-sound-mech-back: #1f1f1f;
  --openbot-sound-mech-ink: #dbe9ff;
  --openbot-sound-bubble-back: #5b5fe0;
  --openbot-sound-bubble-ink: #8bdee8;
  --openbot-sound-press-back: #ff1e5e;
  --openbot-sound-press-ink: #ffd8a8;
  --openbot-sound-off-back: #212121;
  --openbot-sound-off-ink: #4c4c4c;
  --openbot-onboarding-window: #f3f5f8;
  --openbot-text-secondary: #dcdcdc;
  --openbot-text-muted: #979797;
  --openbot-text-dim: #6a6a6a;
  --openbot-text-readable: rgba(255, 255, 255, 0.52);
  --openbot-text-muted-on-light: rgba(20, 20, 20, 0.52);
  --openbot-text-dim-on-light: rgba(20, 20, 20, 0.36);
  --openbot-download-card-muted: rgba(20, 20, 20, 0.68);
  --openbot-download-card-chip: rgba(20, 20, 20, 0.1);
  --openbot-download-card-border: rgba(20, 20, 20, 0.16);
  --openbot-download-card-focus: rgba(242, 242, 242, 0.86);
  --openbot-text-placeholder: #bfbfbf;
  --openbot-text-on-accent: #ffffff;
  --openbot-text-on-status: #07130c;
  --openbot-accent: #007cf7;
  --openbot-accent-hover: #1f8fff;
  --openbot-accent-text: #42a0ff;
  --openbot-accent-soft: rgba(0, 124, 247, 0.16);
  --openbot-accent-strong: rgba(0, 124, 247, 0.34);
  --openbot-settings-text-muted: rgba(255, 255, 255, 0.59);
  --openbot-provider-codex: var(--openbot-text-primary);
  --openbot-provider-claude: #d97757;
  --openbot-provider-grok: var(--openbot-text-primary);
  --openbot-provider-antigravity: #8e75b2;
  --openbot-chart-series-codex: #d6adf2;
  --openbot-chart-series-claude: var(--openbot-provider-claude);
  --openbot-chart-series-grok: #6bc7d9;
  --openbot-chart-series-other: var(--openbot-text-muted);
  --openbot-chart-storage-workspaces: #3987e5;
  --openbot-chart-storage-files: #d95926;
  --openbot-chart-storage-chats: #199e70;
  --openbot-chart-storage-downloads: #9085e9;
  --openbot-chart-storage-runtimes: #c98500;
  --openbot-chart-storage-app: var(--openbot-text-dim);
  --openbot-logo-production: #d6adf2;
  --openbot-logo-eye: #040007;
  --openbot-logo-production-eye: var(--openbot-logo-eye);
  --openbot-logo-dev: #e3b866;
  --openbot-logo-preview: #61c985;
  --openbot-unread-surface: #74b9ff;
  --openbot-unread-text: #07131f;
  --openbot-success: #31cf76;
  --openbot-success-text: #31cf76;
  --openbot-warning-text: #ff9412;
  --openbot-danger-text: #ff6069;
  --openbot-success-soft: rgba(49, 207, 118, 0.12);
  --openbot-success-wash: rgba(49, 207, 118, 0.045);
  --openbot-warning: #ff9412;
  --openbot-warning-soft: rgba(255, 148, 18, 0.12);
  --openbot-question-option: #6bc7d9;
  --openbot-question-option-soft: rgba(107, 199, 217, 0.14);
  --openbot-question-option-hover: rgba(107, 199, 217, 0.2);
  --openbot-question-option-pressed: rgba(107, 199, 217, 0.26);
  --openbot-island-identity-name: var(--openbot-text-primary);
  --openbot-question-badge-text: #8bdee8;
  --openbot-question-badge-soft: rgba(107, 199, 217, 0.16);
  --openbot-message-badge-text: #91c8ff;
  --openbot-message-badge-soft: rgba(116, 185, 255, 0.16);
  --openbot-badge-new: #ff1e5e;
  --openbot-badge-new-soft: rgba(255, 30, 94, 0.16);
  --openbot-beam-teal: var(--openbot-file-teal);
  --openbot-beam-blue: var(--openbot-accent-text);
  --openbot-beam-pink: var(--openbot-file-pink);
  --openbot-approval-badge-soft: rgba(255, 148, 18, 0.18);
  --openbot-danger: #fd2f3b;
  --openbot-danger-hover: #fd5d67;
  --openbot-danger-soft: rgba(253, 47, 59, 0.16);
  --openbot-danger-soft-hover: rgba(253, 47, 59, 0.28);
  --openbot-danger-focus: rgba(253, 47, 59, 0.4);
  --openbot-danger-border: rgba(253, 47, 59, 0.5);
  --openbot-file-blue: #74b9ff;
  --openbot-file-blue-soft: rgba(116, 185, 255, 0.14);
  --openbot-file-yellow: #ff9412;
  --openbot-file-yellow-soft: rgba(255, 148, 18, 0.12);
  --openbot-file-orange: #f0a06a;
  --openbot-file-orange-soft: rgba(240, 160, 106, 0.14);
  --openbot-file-teal: #6bc7d9;
  --openbot-file-teal-soft: rgba(107, 199, 217, 0.14);
  --openbot-file-green: #31cf76;
  --openbot-file-green-soft: rgba(49, 207, 118, 0.12);
  --openbot-file-red: #fd2f3b;
  --openbot-file-red-soft: rgba(253, 47, 59, 0.16);
  --openbot-file-pink: #d98ac9;
  --openbot-file-pink-soft: rgba(217, 138, 201, 0.14);
  --openbot-file-default: #42a0ff;
  --openbot-file-default-soft: rgba(0, 124, 247, 0.14);
  --openbot-data-table-border: #303030;
  --openbot-data-table-header-text: #a1a1a1;
  --openbot-data-table-text: #f5f5f5;
  --openbot-data-table-outer-border: rgba(255, 255, 255, 0);
  --openbot-data-table-ring: rgba(255, 255, 255, 0.12);
  --openbot-shadow-popover-ambient: rgba(0, 0, 0, 0.1);
  --openbot-shadow-dialog: rgba(0, 0, 0, 0.48);
  --openbot-shadow-dynamic-island: rgba(0, 0, 0, 0.6);
  --openbot-shadow-ring: rgba(228, 228, 228, 0.04);
  --openbot-border-on-light: rgba(20, 20, 20, 0.14);
  --openbot-hover: rgba(255, 255, 255, 0.06);
  --openbot-font-sans: "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --openbot-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
  --openbot-text-sm: 12px;
  --openbot-text-md: 13px;
  --openbot-text-lg: 14px;
  --openbot-text-xl: 16px;
  --openbot-text-2xl: 18px;
  --openbot-text-3xl: 24px;
  --openbot-leading-sm: 16px;
  --openbot-leading-md: 18px;
  --openbot-leading-lg: 20px;
  --openbot-leading-xl: 22px;
  --openbot-leading-2xl: 24px;
  --openbot-leading-3xl: 30px;
  --openbot-text-display: 32px;
  --openbot-text-usage-total: clamp(2rem, 5cqi, 3.5rem);
  --openbot-leading-display: 38px;
  --openbot-text-hero: clamp(3rem, 8vw, 6.5rem);
  --openbot-glyph-xs: 7px;
  --openbot-glyph-sm: 8px;
  --openbot-weight-regular: 400;
  --openbot-weight-medium: 500;
  --openbot-weight-semibold: 600;
  --openbot-weight-bold: 700;
  --openbot-tracking-tight: -0.1px;
  --openbot-tracking-normal: 0;
  --openbot-tracking-wide: 0.02em;
  --openbot-space-0-5: 2px;
  --openbot-space-1: 4px;
  --openbot-space-1-5: 6px;
  --openbot-space-2: 8px;
  --openbot-space-3: 12px;
  --openbot-space-4: 16px;
  --openbot-space-6: 24px;
  --openbot-space-8: 32px;
  --openbot-scrollbar-size: 8px;
  --openbot-radius-xs: 4px;
  --openbot-radius-sm: 6px;
  --openbot-radius-md: 8px;
  --openbot-radius-lg: 12px;
  --openbot-radius-card: 14px;
  --openbot-radius-xl: 20px;
  --openbot-radius-bubble: 22px;
  --openbot-radius-bubble-inset: calc(var(--openbot-radius-bubble) - var(--openbot-space-3) - 1px);
  --openbot-radius-modal: 30px;
  --openbot-radius-media-preview: calc(var(--openbot-radius-lg) - 1px);
  --openbot-radius-pill: 999px;
  --openbot-radius-logo: 20%;
  --openbot-control-xs: 24px;
  --openbot-control-sm: 28px;
  --openbot-control-md: 32px;
  --openbot-control-lg: 36px;
  --openbot-control-xl: 40px;
  --openbot-switch-width: 36px;
  --openbot-switch-height: 20px;
  --openbot-switch-thumb: 16px;
  --openbot-switch-inset: 2px;
  --openbot-switch-sm-width: 24px;
  --openbot-switch-sm-height: 14px;
  --openbot-switch-sm-thumb: 12px;
  --openbot-switch-sm-inset: 1px;
  --openbot-icon-stroke: 1.5;
  --openbot-icon-xs: 12px;
  --openbot-icon-sm: 14px;
  --openbot-icon-md: 16px;
  --openbot-icon-lg: 20px;
  --openbot-chat-entry-gap: var(--openbot-space-3);
  --openbot-chat-marker-gap: var(--openbot-space-1);
  --openbot-chat-marker-height: var(--openbot-control-xs);
  --openbot-chat-marker-avatar: var(--openbot-icon-md);
  --openbot-chat-marker-width: 680px;
  --openbot-duration-fast: 120ms;
  --openbot-duration-hover: 0ms;
  --openbot-duration-dialog: 100ms;
  --openbot-duration-normal: 160ms;
  --openbot-duration-slow: 200ms;
  --openbot-duration-overlay: 240ms;
  --openbot-duration-toast-enter: 340ms;
  --openbot-duration-toast-exit: 220ms;
  --openbot-duration-island-content: 340ms;
  --openbot-duration-island-content-exit: 220ms;
  --openbot-agent-activity-exit-delay: 500ms;
  --openbot-loading-indicator-delay: 400ms;
  --openbot-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --openbot-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --openbot-shadow-raised: 0 12px 32px var(--openbot-shadow-popover-ambient);
  --openbot-shadow-card: 0 0 0 transparent;
  --openbot-shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.48);
  --openbot-focus-ring: 0 0 0 3px var(--openbot-accent-soft);
  --openbot-layer-dropdown: 40;
  --openbot-layer-popover: 60;
  --openbot-layer-dialog: 100;
  --openbot-layer-dialog-host: calc(var(--openbot-layer-dialog) + var(--openbot-layer-popover));
  --openbot-layer-toast: 120;
  --openbot-layer-tooltip: 240;
}
[data-provider] {
  --openbot-provider-current: currentcolor;
}
[data-provider="codex"] {
  --openbot-provider-current: var(--openbot-provider-codex);
}
[data-provider="claude"] {
  --openbot-provider-current: var(--openbot-provider-claude);
}
[data-provider="grok"] {
  --openbot-provider-current: var(--openbot-provider-grok);
}
[data-provider="opencode"] {
  --openbot-provider-current: var(--openbot-text-primary);
}
[data-provider="antigravity"] {
  --openbot-provider-current: var(--openbot-provider-antigravity);
}
[data-provider="cursor"] {
  --openbot-provider-current: var(--openbot-text-primary);
}
[data-provider="cline"] {
  --openbot-provider-current: var(--openbot-text-primary);
}
[data-provider="acp"] {
  --openbot-provider-current: var(--openbot-text-primary);
}
:root {
  --stagger-dur: 500ms;
  --stagger-distance: 12px;
  --stagger-stagger: 40ms;
  --stagger-blur: 3px;
  --stagger-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
.t-stagger-line {
  display: block;
  opacity: 0;
  transform: translateY(var(--stagger-distance));
  filter: blur(var(--stagger-blur));
  transition: opacity var(--stagger-dur) var(--stagger-ease), transform var(--stagger-dur) var(--stagger-ease), filter var(--stagger-dur) var(--stagger-ease);
  will-change: transform, opacity, filter;
}
.t-stagger-line--2 {
  transition-delay: var(--stagger-stagger);
}
.t-stagger-line--3 {
  transition-delay: calc(var(--stagger-stagger) * 2);
}
.t-stagger.is-shown .t-stagger-line {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
@media (prefers-reduced-motion: reduce) {
  .t-stagger-line {
    transition: none !important;
  }
}
@font-face {
  font-family: "Inter Variable Fallback";
  src: local("Arial"), local("ArialMT");
  size-adjust: 107.12%;
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Variable Fallback";
  font-weight: 600 900;
  src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 107.12%;
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
}
:root {
  color-scheme: dark;
  --openbot-font-sans: "Inter Variable", "Inter Variable Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pulse-dur: 1000ms;
  --pulse-count: 1;
  --pulse-min: 0.5;
  --reveal-dur: 240ms;
  --reveal-blur: 2px;
  --reveal-ease: ease-in-out;
}
* {
  box-sizing: border-box;
}
html {
  background: var(--openbot-bg-canvas);
}
body {
  min-height: 100vh;
  margin: 0;
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
  font-synthesis: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}
html:not(:has(.web-app)) {
  min-width: 320px;
  scroll-behavior: smooth;
}
body:not(:has(.web-app)) {
  min-width: 320px;
}
a {
  color: inherit;
  text-decoration: none;
}
@keyframes landing-hero-in {
  from {
    transform: translateY(var(--stagger-distance));
    filter: blur(var(--stagger-blur));
  }
}
.landing-hero-line {
  animation: landing-hero-in var(--stagger-dur) var(--stagger-ease) both;
  animation-delay: calc(var(--landing-hero-line, 0) * var(--stagger-stagger));
}
.landing-actions.landing-hero-line {
  animation-duration: 400ms;
  animation-delay: var(--stagger-stagger);
}
@media (prefers-reduced-motion: reduce) {
  .landing-hero-line {
    animation: none;
  }
}
.t-skel {
  position: relative;
}
.t-skel-skeleton, .t-skel-content {
  position: absolute;
  inset: 0;
}
.t-skel-skeleton {
  z-index: 1;
  opacity: 1;
  filter: blur(0);
  transition: opacity var(--reveal-dur) var(--reveal-ease), filter var(--reveal-dur) var(--reveal-ease);
}
.t-skel-content {
  z-index: 2;
  opacity: 0;
  filter: blur(var(--reveal-blur));
  transition: opacity var(--reveal-dur) var(--reveal-ease), filter var(--reveal-dur) var(--reveal-ease);
}
.t-skel.is-revealed .t-skel-skeleton {
  opacity: 0;
  filter: blur(var(--reveal-blur));
}
.t-skel.is-revealed .t-skel-content {
  opacity: 1;
  filter: blur(0);
}
.t-skel.is-resetting .t-skel-skeleton, .t-skel.is-resetting .t-skel-content {
  transition: none;
}
.t-skel-skeleton.is-pulsing > * {
  animation: t-skel-pulse var(--pulse-dur) ease-in-out var(--pulse-count);
}
@keyframes t-skel-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: var(--pulse-min);
  }
}
@media (prefers-reduced-motion: reduce) {
  .t-skel-skeleton, .t-skel-content {
    transition: none;
  }
  .t-skel-skeleton.is-pulsing > * {
    animation: none;
  }
}
.landing-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.landing-page {
  min-height: 100vh;
  overflow: clip;
}
.landing-header {
  position: relative;
  z-index: 40;
  width: min(100%, 1280px);
  min-height: 76px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  margin: 0 auto;
  padding: 18px clamp(20px, 4vw, 48px);
}
.landing-brand {
  min-width: 0;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--openbot-radius-md);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.landing-brand:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--openbot-accent-strong);
}
.landing-brand-logo {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
}
.site-nav {
  --site-nav-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --site-nav-duration: 460ms;
  --site-nav-quick: 300ms;
  --site-nav-blur: 8px;
  --site-nav-offset: 10px;
  --site-nav-radius: 18px;
  --site-nav-hairline: rgba(255, 255, 255, 0.07);
  --site-nav-hover: rgba(255, 255, 255, 0.05);
  position: relative;
}
.site-nav-track {
  display: flex;
  padding: 4px;
  border-radius: var(--openbot-radius-pill);
  background: rgba(255, 255, 255, 0.025);
  box-shadow: 0 0 0 1px var(--site-nav-hairline), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.site-nav-list {
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav-pill {
  position: absolute;
  top: 4px;
  left: 4px;
  width: var(--site-nav-pill-width, 0);
  height: calc(100% - 8px);
  border-radius: var(--openbot-radius-pill);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 1px 2px rgba(0, 0, 0, 0.32);
  opacity: 0;
  pointer-events: none;
  transform: translateX(var(--site-nav-pill-x, 0));
  transition: transform var(--site-nav-quick) var(--site-nav-ease), width var(--site-nav-quick) var(--site-nav-ease), opacity var(--openbot-duration-normal) ease;
}
.site-nav-pill[data-shown] {
  opacity: 1;
}
.site-nav-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 11px 0 14px;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  background: transparent;
  color: var(--openbot-text-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--openbot-duration-normal) ease;
}
.site-nav-trigger[aria-expanded="true"], .site-nav-trigger[aria-current="page"] {
  color: var(--openbot-text-primary);
}
.site-nav-trigger:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px var(--openbot-accent-strong);
}
.site-nav-link {
  padding: 0 14px;
}
.site-nav-chevron {
  width: 12px;
  height: 12px;
  opacity: 0.55;
  transition: transform var(--site-nav-duration) var(--site-nav-ease), opacity var(--openbot-duration-normal) ease;
}
.site-nav-trigger[aria-expanded="true"] .site-nav-chevron {
  opacity: 1;
  transform: rotate(180deg);
}
.site-nav-surface {
  position: absolute;
  top: calc(100% + var(--site-nav-offset));
  left: 0;
  width: var(--site-nav-surface-width, 0);
  height: var(--site-nav-surface-height, 0);
  border-radius: var(--site-nav-radius);
  background: rgba(22, 22, 22, 0.8);
  box-shadow: 0 0 0 1px var(--site-nav-hairline), inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 8px 16px -8px rgba(0, 0, 0, 0.5), 0 28px 56px -16px rgba(0, 0, 0, 0.64);
  backdrop-filter: blur(40px) saturate(180%);
  opacity: 0;
  pointer-events: none;
  transform: translateX(var(--site-nav-surface-x, 0)) translateY(-6px) scale(0.96);
  transform-origin: var(--site-nav-surface-origin, 50%) top;
  transition: opacity 200ms ease, transform 240ms var(--site-nav-ease), width var(--site-nav-duration) var(--site-nav-ease), height var(--site-nav-duration) var(--site-nav-ease);
}
.site-nav[data-state="open"] .site-nav-surface {
  opacity: 1;
  transform: translateX(var(--site-nav-surface-x, 0)) translateY(0) scale(1);
  transition: opacity 240ms ease, transform var(--site-nav-duration) var(--site-nav-ease), width var(--site-nav-duration) var(--site-nav-ease), height var(--site-nav-duration) var(--site-nav-ease);
}
.site-nav-pill[data-instant], .site-nav-surface[data-instant] {
  transition: none;
}
.site-nav-panel {
  --site-nav-shift: 0px;
  --site-nav-rise: 0px;
  position: absolute;
  top: calc(100% + var(--site-nav-offset));
  left: 0;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
}
.site-nav-panel[data-state="open"] {
  opacity: 1;
  visibility: visible;
}
.site-nav-panel[data-state="open"]::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: calc(var(--site-nav-offset) + 6px);
}
.site-nav-panel[data-motion] {
  will-change: opacity, transform, filter;
}
.site-nav-panel[data-motion="from-start"], .site-nav-panel[data-motion="to-start"] {
  --site-nav-shift: -40px;
}
.site-nav-panel[data-motion="from-end"], .site-nav-panel[data-motion="to-end"] {
  --site-nav-shift: 40px;
}
.site-nav-panel[data-motion="enter"] {
  --site-nav-rise: -6px;
  animation: site-nav-panel-enter 420ms var(--site-nav-ease) 30ms both;
}
.site-nav-panel[data-motion="exit"] {
  --site-nav-rise: -4px;
  animation: site-nav-panel-leave 200ms cubic-bezier(0.4, 0, 1, 1) both;
}
.site-nav-panel[data-motion="from-start"], .site-nav-panel[data-motion="from-end"] {
  animation: site-nav-panel-enter var(--site-nav-duration) var(--site-nav-ease) both;
}
.site-nav-panel[data-motion="to-start"], .site-nav-panel[data-motion="to-end"] {
  animation: site-nav-panel-leave var(--site-nav-quick) var(--site-nav-ease) both;
}
@keyframes site-nav-panel-enter {
  from {
    opacity: 0;
    filter: blur(var(--site-nav-blur));
    transform: translate(var(--site-nav-shift), var(--site-nav-rise));
  }
}
@keyframes site-nav-panel-leave {
  from {
    opacity: 1;
    visibility: visible;
  }
  to {
    opacity: 0;
    visibility: hidden;
    filter: blur(var(--site-nav-blur));
    transform: translate(var(--site-nav-shift), var(--site-nav-rise));
  }
}
.site-panel {
  width: 580px;
  display: flex;
  flex-direction: column;
  padding: 8px;
}
.site-panel[data-kind="plugins"] {
  width: 540px;
}
.site-panel a:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px var(--openbot-accent-strong);
}
.site-panel-body {
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  gap: 6px;
}
.site-panel-feature {
  position: relative;
  min-height: 204px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding: 14px;
  border-radius: 12px;
  isolation: isolate;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.site-panel-feature-art {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--site-panel-art);
  transition: transform 700ms var(--site-nav-ease, var(--openbot-ease-out));
  will-change: transform;
}
.site-panel-feature::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0) 70%);
}
.site-panel-feature-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 8px;
  border-radius: var(--openbot-radius-pill);
  background: rgba(0, 0, 0, 0.44);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  color: var(--openbot-text-primary);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}
.site-panel-feature-copy, .site-panel-row-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.site-panel-feature-title {
  display: -webkit-box;
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  text-wrap: balance;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.site-panel-meta {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: 12px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.site-panel-feature .site-panel-meta {
  color: rgba(255, 255, 255, 0.72);
}
.site-panel-list, .site-panel-plugins {
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-panel-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.site-panel-plugins {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
}
.site-panel-row, .site-panel-plugin {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 12px;
  transition: background-color var(--openbot-duration-normal) ease;
}
.site-panel-row-art, .site-panel-plugin-mark {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 10px;
  background: var(--site-panel-art);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  transition: transform var(--site-nav-duration, 340ms) var(--site-nav-ease, var(--openbot-ease-out));
}
.site-panel-plugin-mark {
  display: grid;
  place-items: center;
  color: var(--openbot-text-primary);
}
.site-panel-plugin-logo {
  width: 20px;
  height: 20px;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
}
.site-panel-plugin-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
}
.site-panel-row-title {
  display: -webkit-box;
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.site-panel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 8px -8px -8px;
  padding: 12px 18px;
  border-top: 1px solid var(--site-nav-hairline, rgba(255, 255, 255, 0.07));
  border-radius: 0 0 var(--site-nav-radius, 18px) var(--site-nav-radius, 18px);
  background: rgba(255, 255, 255, 0.02);
}
.site-panel-summary {
  min-width: 0;
  color: var(--openbot-text-muted);
  font-size: 12px;
}
.site-panel-index {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  margin: -6px -10px;
  padding: 6px 10px;
  border-radius: var(--openbot-radius-pill);
  color: var(--openbot-text-primary);
  font-size: 12.5px;
  font-weight: 500;
  transition: background-color var(--openbot-duration-normal) ease;
}
.site-panel-index svg {
  width: 14px;
  height: 14px;
  transition: transform var(--openbot-duration-slow) var(--openbot-ease-out);
}
.site-header-actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
}
.site-menu-button, .site-sheet {
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  .site-nav-trigger:hover {
    color: var(--openbot-text-primary);
  }
  .site-panel-row:hover, .site-panel-plugin:hover, .site-panel-index:hover {
    background: var(--site-nav-hover, rgba(255, 255, 255, 0.05));
  }
  .site-panel-feature:hover .site-panel-feature-art {
    transform: scale(1.06);
  }
  .site-panel-row:hover .site-panel-row-art, .site-panel-plugin:hover .site-panel-plugin-mark {
    transform: scale(1.06);
  }
  .site-panel-index:hover svg {
    transform: translateX(3px);
  }
}
@media (min-width: 901px) and (max-width: 1040px) {
  .site-header-actions > .site-header-community {
    display: none;
  }
}
@media (max-width: 900px) {
  .landing-header {
    display: flex;
    justify-content: space-between;
  }
  .site-nav, .site-header-actions > .site-header-secondary {
    display: none;
  }
  .site-menu-button {
    position: relative;
    width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: var(--openbot-radius-pill);
    background: rgba(255, 255, 255, 0.04);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
    color: var(--openbot-text-primary);
    cursor: pointer;
  }
  .site-menu-button:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--openbot-accent-strong);
  }
  .site-menu-button-line {
    position: absolute;
    width: 15px;
    height: 1.5px;
    border-radius: 1px;
    background: currentColor;
    transform: translateY(-3.5px);
    transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .site-menu-button-line + .site-menu-button-line {
    transform: translateY(3.5px);
  }
  .site-menu-button[aria-expanded="true"] .site-menu-button-line {
    transform: rotate(45deg);
  }
  .site-menu-button[aria-expanded="true"] .site-menu-button-line + .site-menu-button-line {
    transform: rotate(-45deg);
  }
  .site-sheet {
    position: fixed;
    inset: 0;
    z-index: -1;
    display: block;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 84px 16px 32px;
    background: rgba(20, 20, 20, 0.88);
    opacity: 0;
    visibility: hidden;
    backdrop-filter: blur(32px) saturate(160%);
    transition: opacity 220ms ease, visibility 0s linear 220ms;
  }
  .site-sheet[data-state="open"] {
    opacity: 1;
    visibility: visible;
    transition: opacity 260ms ease;
  }
  .site-sheet-content {
    max-width: 560px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin: 0 auto;
  }
  .site-sheet-section, .site-sheet-actions {
    opacity: 0;
    filter: blur(6px);
    transform: translateY(-12px);
    transition: opacity 200ms ease, filter 200ms ease, transform 200ms ease;
  }
  .site-sheet[data-state="open"] .site-sheet-section, .site-sheet[data-state="open"] .site-sheet-actions {
    opacity: 1;
    filter: none;
    transform: none;
    transition: opacity 380ms ease, filter 460ms cubic-bezier(0.32, 0.72, 0, 1), transform 560ms cubic-bezier(0.32, 0.72, 0, 1);
    transition-delay: calc(var(--site-sheet-index) * 50ms + 40ms);
  }
  .site-sheet-heading {
    margin: 0 0 8px 6px;
    color: var(--openbot-text-dim);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .site-sheet .site-panel {
    width: auto;
    padding: 6px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.03);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07);
  }
  .site-sheet .site-panel-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .site-sheet .site-panel-feature {
    min-height: 132px;
  }
  .site-sheet .site-panel-footer {
    margin: 6px -6px -6px;
  }
  .site-sheet-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-radius: 18px;
    background: var(--openbot-text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--openbot-text-primary) 3%, transparent);
    }
    box-shadow: 0 0 0 1px var(--openbot-text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 1px color-mix(in srgb, var(--openbot-text-primary) 7%, transparent);
    }
    color: var(--openbot-text-primary);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
  }
  .site-sheet-link svg {
    width: 16px;
    height: 16px;
    color: var(--openbot-text-muted);
  }
  .site-sheet-link:focus-visible {
    outline: 2px solid var(--openbot-border-focus);
    outline-offset: 2px;
  }
  .site-sheet-actions {
    display: flex;
    gap: 8px;
  }
  html[data-site-sheet-open] {
    overflow: hidden;
    scrollbar-gutter: stable;
  }
}
@media (max-width: 480px) {
  .site-sheet .site-panel-plugins {
    grid-template-columns: minmax(0, 1fr);
  }
}
.landing-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.landing-button {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--openbot-radius-pill);
  font: inherit;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: background-color var(--openbot-duration-normal) ease, border-color var(--openbot-duration-normal) ease, color var(--openbot-duration-normal) ease, transform var(--openbot-duration-fast) var(--openbot-ease-out);
}
.landing-button::before {
  content: "";
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  background: currentColor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}
.landing-button[data-icon="download"]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 3h2v10.17l3.59-3.58L18 11l-6 6-6-6 1.41-1.41L11 13.17V3Zm-6 16h14v2H5v-2Z'/%3E%3C/svg%3E");
}
.landing-button[data-icon="contact"]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3h16a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H9l-5 3v-3a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z'/%3E%3C/svg%3E");
}
.landing-button[data-icon="github"]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.58 2 12.23c0 4.52 2.87 8.35 6.84 9.71.5.1.68-.22.68-.49 0-.24-.01-1.05-.01-1.91-2.78.62-3.37-1.21-3.37-1.21-.45-1.18-1.11-1.49-1.11-1.49-.91-.64.07-.62.07-.62 1 .07 1.53 1.05 1.53 1.05.89 1.56 2.34 1.11 2.91.85.09-.66.35-1.11.63-1.36-2.22-.26-4.56-1.14-4.56-5.06 0-1.12.39-2.03 1.03-2.75-.1-.26-.45-1.3.1-2.71 0 0 .84-.28 2.75 1.05A9.38 9.38 0 0 1 12 6.95a9.4 9.4 0 0 1 2.5.35c1.91-1.33 2.75-1.05 2.75-1.05.55 1.41.2 2.45.1 2.71.64.72 1.03 1.63 1.03 2.75 0 3.93-2.35 4.8-4.58 5.05.36.32.68.94.68 1.9 0 1.37-.01 2.47-.01 2.81 0 .27.18.59.69.49A10.25 10.25 0 0 0 22 12.23C22 6.58 17.52 2 12 2Z'/%3E%3C/svg%3E");
}
.landing-button[data-icon="open"]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3h7v7h-2V6.41l-8.29 8.3-1.42-1.42L17.59 5H14V3ZM5 5h6v2H5v12h12v-6h2v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Z'/%3E%3C/svg%3E");
}
.landing-button[data-icon="arrow-right"]::before {
  order: 1;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.17 5 11.76 6.41 16.34 11H4v2h12.34l-4.58 4.59L13.17 19l7-7-7-7Z'/%3E%3C/svg%3E");
}
.join-card {
  width: min(100%, 520px);
  display: grid;
  justify-items: center;
  border: 1px solid var(--openbot-border-strong);
  border-radius: 24px;
  background: var(--openbot-bg-sidebar);
  padding: clamp(32px, 7vw, 56px);
  text-align: center;
  box-shadow: 0 24px 80px var(--openbot-glass-shadow);
}
.join-card-signal {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
}
.join-card-signal span {
  height: 1px;
  background: var(--openbot-border-strong);
}
.join-card-signal i {
  width: 7px;
  height: 7px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-logo-production);
  box-shadow: 0 0 0 6px var(--openbot-accent-strong);
}
.join-card-logo {
  width: 64px;
  height: 64px;
  margin-bottom: 22px;
}
.join-card-eyebrow {
  margin: 0 0 10px;
  color: var(--openbot-logo-production);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.join-card h1 {
  margin: 0;
  font-size: clamp(30px, 6vw, 42px);
  line-height: 1.05;
  letter-spacing: -0.04em;
}
.join-card-copy {
  max-width: 420px;
  margin: 18px 0 0;
  color: var(--openbot-text-secondary);
  font-size: 16px;
  line-height: 1.55;
}
.join-card-actions {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 30px;
}
.join-card-actions-single {
  grid-template-columns: auto;
  justify-content: center;
}
.join-card-error {
  margin: 26px 0 0;
  color: var(--openbot-text-primary);
}
.join-card-note {
  margin: 24px 0 0;
  color: var(--openbot-text-muted);
  font-size: 12px;
  line-height: 1.5;
}
.join-card-status-empty {
  margin: 0;
}
@media (max-width: 520px) {
  .join-card-actions {
    grid-template-columns: 1fr;
  }
}
.landing-button-sm {
  height: 38px;
  gap: 7px;
  padding: 0 17px;
  font-size: 13px;
}
.landing-button-md {
  height: 42px;
  gap: 8px;
  padding: 0 20px;
  font-size: 14px;
}
.landing-button-lg {
  height: 48px;
  gap: 9px;
  padding: 0 24px;
  font-size: 15px;
}
.landing-button-primary {
  background: var(--openbot-surface-light);
  color: var(--openbot-text-on-light);
}
.landing-button-secondary {
  border-color: var(--openbot-border-strong);
  background: transparent;
  color: var(--openbot-text-secondary);
}
.landing-button-glass {
  border-color: var(--openbot-glass-border);
  background: var(--openbot-glass-surface);
  box-shadow: inset 0 1px 0 var(--openbot-glass-highlight), 0 10px 30px -18px var(--openbot-glass-shadow);
  color: var(--openbot-text-primary);
}
.landing-button:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--openbot-accent-strong);
}
.landing-button:active {
  transform: scale(0.97);
}
.landing-hero {
  width: min(100%, 1280px);
  position: relative;
  isolation: isolate;
  margin: 0 auto;
  padding: clamp(60px, 8vw, 112px) clamp(20px, 4vw, 48px) 72px;
}
.landing-hero-grid {
  position: absolute;
  z-index: 0;
  inset: 0 auto 0 50%;
  width: 100vw;
  pointer-events: none;
  background-image: linear-gradient(90deg, var(--openbot-hero-grid-line) 1px, var(--openbot-transparent) 1px), linear-gradient(var(--openbot-hero-grid-line) 1px, var(--openbot-transparent) 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(80% 62% at 50% 40%, var(--openbot-mask-solid) 40%, var(--openbot-transparent) 100%);
  transform: translateX(-50%);
}
.landing-hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.landing-availability {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 28px;
  padding: 4px 12px 4px 4px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-sidebar);
  color: var(--openbot-text-secondary);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
}
.landing-availability-new {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-surface-light);
  color: var(--openbot-text-on-light);
  font-family: var(--openbot-font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.landing-availability-copy {
  color: var(--openbot-text-muted);
}
.landing-availability-platform {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--openbot-text-primary);
}
.landing-availability-platform svg {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
}
.landing-availability-separator {
  color: var(--openbot-text-dim);
}
.landing-availability-divider {
  width: 1px;
  height: 12px;
  margin-inline: 2px;
  background: var(--openbot-border-strong);
}
.landing-title {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-hero);
  font-weight: 500;
  letter-spacing: -0.065em;
  line-height: 0.96;
}
.landing-hero-logo {
  width: 0.82em;
  height: 0.82em;
  flex: 0 0 auto;
  margin-inline: 0.22em 0.14em;
  transform: translateY(0.04em);
}
.landing-description {
  max-width: 720px;
  margin: 30px 0 0;
  color: var(--openbot-text-secondary);
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.55;
  text-wrap: pretty;
}
.landing-provider {
  display: inline-flex;
  align-items: center;
  gap: 0.28em;
  color: var(--openbot-text-primary);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  vertical-align: -0.04em;
}
.landing-provider-item {
  white-space: nowrap;
}
.landing-provider-logo {
  width: 0.84em;
  height: 0.84em;
  flex: 0 0 auto;
  overflow: visible;
  fill: var(--openbot-provider-current);
}
.landing-actions {
  margin-top: 32px;
}
.landing-download-selector {
  position: relative;
  z-index: 3;
  display: inline-flex;
  justify-content: center;
}
.landing-download-split {
  height: 48px;
  display: inline-flex;
  align-items: stretch;
  overflow: hidden;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-surface-light);
  color: var(--openbot-text-on-light);
}
.landing-download-primary {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 18px 0 22px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: opacity var(--openbot-duration-normal) ease;
}
.landing-download-primary svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
.landing-download-primary[data-state="coming-soon"] {
  color: var(--openbot-download-card-muted);
}
.landing-download-trigger {
  width: 45px;
  min-width: 45px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--openbot-download-card-border);
  background: transparent;
  color: currentColor;
  font: inherit;
  transition: opacity var(--openbot-duration-normal) ease;
}
.landing-download-trigger svg {
  width: 13px;
  height: 13px;
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.landing-download-trigger[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.landing-download-primary:focus-visible, .landing-download-trigger:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--openbot-logo-production);
  outline-offset: -3px;
}
.landing-download-menu {
  width: min(288px, calc(100vw - 32px));
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-sidebar);
  box-shadow: 0 18px 48px -24px var(--openbot-mask-solid);
  color: var(--openbot-text-primary);
  transform: translateX(-50%);
  animation: landing-download-menu-enter var(--openbot-duration-normal) var(--openbot-ease-out) both;
}
.landing-download-menu-item {
  min-height: 42px;
  width: 100%;
  display: grid;
  grid-template-columns: 17px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0 11px;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  color: var(--openbot-text-secondary);
  font: inherit;
  font-size: 13px;
  text-align: left;
  transition: background-color var(--openbot-duration-fast) ease, color var(--openbot-duration-fast) ease;
}
.landing-download-menu-item svg {
  width: 15px;
  height: 15px;
  justify-self: center;
}
.landing-download-menu-item span {
  overflow: hidden;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.landing-download-menu-item small {
  color: var(--openbot-text-muted);
  font-family: var(--openbot-font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.landing-download-menu-item[data-selected="true"] {
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-primary);
}
.landing-download-menu-item:focus-visible {
  outline: 2px solid var(--openbot-logo-production);
  outline-offset: -2px;
}
.landing-download-menu-separator {
  height: 1px;
  margin: 4px 5px;
  border: 0;
  background: var(--openbot-border-strong);
}
.landing-download-menu-label {
  padding: 6px 11px 4px;
  color: var(--openbot-text-muted);
  text-align: left;
  font-family: var(--openbot-font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.landing-preview {
  aspect-ratio: 16 / 10;
  width: 100%;
  position: relative;
  z-index: 1;
  isolation: isolate;
  max-height: 760px;
  margin-top: clamp(68px, 9vw, 112px);
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-sidebar);
  box-shadow: 0 28px 90px -42px var(--openbot-mask-solid), inset 0 1px var(--openbot-glass-highlight);
}
.landing-preview::before {
  position: absolute;
  z-index: -1;
  inset: -42px -24px -30px;
  background: radial-gradient(ellipse at 50% 48%, var(--openbot-accent-strong), var(--openbot-transparent) 68%);
  content: "";
  filter: blur(22px);
  opacity: 0.82;
  pointer-events: none;
}
.landing-preview-window-controls {
  position: absolute;
  z-index: 3;
  top: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.landing-preview-window-controls i {
  display: block;
  width: 12px;
  height: 12px;
  border: 0.5px solid rgba(0, 0, 0, 0.18);
  border-radius: var(--openbot-radius-pill);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14);
}
.landing-preview-window-controls i:nth-child(1) {
  background: #ff5f57;
}
.landing-preview-window-controls i:nth-child(2) {
  background: #febc2e;
}
.landing-preview-window-controls i:nth-child(3) {
  background: #28c840;
}
.landing-preview-stage {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: calc(var(--openbot-radius-lg) - 1px);
  background: var(--openbot-bg-canvas);
}
.landing-preview-placeholder {
  overflow: hidden;
  border-radius: calc(var(--openbot-radius-lg) - 1px);
  background: var(--openbot-bg-canvas);
}
.landing-app-preview iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  background: var(--openbot-bg-canvas);
}
.landing-download {
  scroll-margin-top: 24px;
  color: var(--openbot-text-primary);
}
.landing-download-inner {
  width: min(100%, 1280px);
  margin: 0 auto;
  padding: clamp(96px, 10vw, 144px) clamp(20px, 4vw, 48px) clamp(36px, 5vw, 64px);
}
.landing-download-heading {
  max-width: 720px;
}
.landing-download-heading h2 {
  margin: 0;
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 1;
}
.landing-download-heading p {
  max-width: 620px;
  margin: 22px 0 0;
  color: var(--openbot-text-secondary);
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.55;
  text-wrap: pretty;
}
.landing-download-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: clamp(48px, 6vw, 72px);
}
.landing-download-card {
  min-width: 0;
  min-height: 430px;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 2.6vw, 34px);
  border: 1px solid var(--openbot-download-card-border);
  border-radius: 20px;
  color: var(--openbot-text-on-light);
}
.landing-download-card[data-download-platform="macos"] {
  background: var(--openbot-logo-production);
}
.landing-download-card[data-download-platform="windows"] {
  background: var(--openbot-logo-preview);
}
.landing-download-card[data-download-platform="linux"] {
  background: var(--openbot-logo-dev);
}
.landing-page {
  --download-ios-color: #74b9ff;
  --download-android-color: #ee9a7d;
}
.landing-download-card[data-download-platform="ios"] {
  background: var(--download-ios-color);
}
.landing-download-card[data-download-platform="android"] {
  background: var(--download-android-color);
}
.landing-download-grid-mobile {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 18px;
}
.landing-download-grid-mobile .landing-download-card {
  min-height: 320px;
}
.landing-download-card[data-state="available"] {
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out), box-shadow var(--openbot-duration-normal) ease;
}
.landing-download-card:focus-visible {
  outline: 3px solid var(--openbot-download-card-focus);
  outline-offset: 3px;
}
.landing-download-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.landing-download-platform-logo {
  width: clamp(76px, 7vw, 96px);
  height: clamp(76px, 7vw, 96px);
  flex: 0 0 auto;
}
.landing-download-status {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border: 1px solid var(--openbot-download-card-border);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-download-card-chip);
  font-family: var(--openbot-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.landing-download-card-copy {
  margin-top: auto;
}
.landing-download-card-copy h3 {
  margin: 0;
  font-size: clamp(29px, 3vw, 38px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
}
.landing-download-card-copy p {
  margin: 14px 0 0;
  color: var(--openbot-download-card-muted);
  font-size: 14px;
  line-height: 1.5;
}
.landing-download-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 28px;
  font-size: 14px;
  font-weight: 600;
}
.landing-download-arrow {
  width: 15px;
  height: 15px;
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.landing-download-heading[data-revealed="false"], .landing-download-card[data-revealed="false"] {
  opacity: 0;
}
.landing-download-heading[data-revealed="true"], .landing-download-card[data-revealed="true"] {
  animation: landing-download-reveal 760ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.landing-download-card:nth-child(2)[data-revealed="true"] {
  animation-delay: 90ms;
}
.landing-download-card:nth-child(3)[data-revealed="true"] {
  animation-delay: 180ms;
}
.landing-pricing {
  color: var(--openbot-text-primary);
}
.landing-pricing-inner {
  width: min(100%, 1280px);
  margin: 0 auto;
  padding: clamp(96px, 10vw, 144px) clamp(20px, 4vw, 48px) clamp(24px, 4vw, 48px);
  text-align: center;
}
.landing-pricing-eyebrow {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: clamp(16px, 1.8vw, 19px);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.4;
}
.landing-pricing-amount {
  position: relative;
  isolation: isolate;
  margin: clamp(8px, 1.5vw, 20px) 0 clamp(28px, 4vw, 48px);
  font-size: clamp(8rem, 30vw, 22rem);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 0.9;
  color: transparent;
  background-image: linear-gradient( 180deg, var(--openbot-price-sheen-cool-clear) 36%, var(--openbot-price-sheen-cool-soft) 44%, var(--openbot-price-sheen-cool) 47.5%, var(--openbot-price-sheen-light) 50%, var(--openbot-price-sheen-warm) 52.5%, var(--openbot-price-sheen-warm-soft) 56%, var(--openbot-price-sheen-warm-clear) 64% ), linear-gradient( 180deg, var(--openbot-price-metal-high) 0%, var(--openbot-price-metal-core) 16%, var(--openbot-price-metal-core) 84%, var(--openbot-price-metal-low) 100% );
  background-repeat: no-repeat;
  background-size: 100% 200%, 100% 100%;
  background-position: 0 50%, 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  --price-bevel: drop-shadow(0 -1px 0 var(--openbot-price-rim)) drop-shadow(0 1px 0 var(--openbot-price-rim-under));
  filter: var(--price-bevel);
}
.landing-pricing-amount::before {
  content: attr(data-amount);
  position: absolute;
  inset: 0;
  z-index: -1;
  color: var(--openbot-price-glow);
  filter: blur(clamp(24px, 4vw, 56px));
}
.landing-pricing-note {
  max-width: 560px;
  margin: 0 auto;
  color: var(--openbot-text-secondary);
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.55;
  text-wrap: balance;
}
.landing-pricing-compare {
  margin: 20px 0 0;
  font-size: 15px;
  line-height: 1.5;
}
.landing-pricing-compare a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--openbot-text-secondary);
  text-decoration: none;
  transition: color 160ms ease;
}
.landing-pricing-compare a:hover, .landing-pricing-compare a:focus-visible {
  color: var(--openbot-text-primary);
}
.landing-pricing-compare-arrow {
  width: 16px;
  height: 16px;
  transition: transform 160ms ease;
}
.landing-pricing-compare a:hover .landing-pricing-compare-arrow {
  transform: translateX(2px);
}
.landing-pricing [data-revealed="false"] {
  opacity: 0;
}
.landing-pricing-eyebrow[data-revealed="true"], .landing-pricing-note[data-revealed="true"], .landing-pricing-compare[data-revealed="true"] {
  animation: landing-download-reveal 760ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.landing-pricing-note[data-revealed="true"] {
  animation-delay: 320ms;
}
.landing-pricing-compare[data-revealed="true"] {
  animation-delay: 440ms;
}
.landing-pricing-amount[data-revealed="true"] {
  animation: landing-price-enter 1200ms cubic-bezier(0.22, 1, 0.36, 1) 60ms backwards, landing-price-sheen 14s ease-in-out 1260ms infinite alternate;
}
.landing-section {
  --landing-card-border: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --landing-card-border: color-mix(in srgb, var(--openbot-text-primary) 8%, transparent);
  }
  --landing-card-border-hover: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --landing-card-border-hover: color-mix(in srgb, var(--openbot-text-primary) 16%, transparent);
  }
  --landing-card-fill: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --landing-card-fill: color-mix(in srgb, var(--openbot-text-primary) 5%, transparent);
  }
  color: var(--openbot-text-primary);
}
.landing-section-inner {
  width: min(100%, 1280px);
  margin: 0 auto;
  padding: clamp(96px, 10vw, 144px) clamp(20px, 4vw, 48px) 0;
}
.landing-section-heading {
  max-width: 720px;
}
.landing-section-heading :is(h1, h2) {
  margin: 0;
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 1;
}
.landing-section-heading p {
  max-width: 620px;
  margin: 22px 0 0;
  color: var(--openbot-text-secondary);
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.55;
  text-wrap: pretty;
}
.landing-features-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 16px;
  margin: clamp(48px, 6vw, 72px) 0 0;
  padding: 0;
  list-style: none;
}
.landing-section svg[data-provider] {
  color: var(--openbot-provider-current);
  fill: currentColor;
}
.landing-section svg[data-provider="antigravity"] {
  fill: url(#landing-gemini-gradient);
}
.landing-paint-servers {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.landing-feature {
  position: relative;
  min-width: 0;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--landing-card-border);
  border-radius: 28px;
  background: var(--openbot-bg-surface);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 6%);
  transition: border-color 200ms ease, background-color 200ms ease;
}
.landing-feature:hover {
  border-color: var(--landing-card-border-hover);
  background: var(--openbot-bg-surface-raised);
}
.landing-feature[data-feature="team"] {
  grid-column: 1 / 8;
  grid-row: 1 / 3;
}
.landing-feature[data-feature="providers"] {
  grid-column: 8 / 13;
  grid-row: 1;
}
.landing-feature[data-feature="local"] {
  grid-column: 8 / 13;
  grid-row: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  grid-template-areas: "copy visual";
  border-color: var(--openbot-download-card-border);
  background: var(--openbot-logo-production);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 30%);
  color: var(--openbot-text-on-light);
}
.landing-feature[data-feature="persist"] {
  grid-column: 1 / 6;
  grid-row: 3;
}
.landing-feature[data-feature="browser"] {
  grid-column: 6 / 10;
  grid-row: 3;
}
.landing-feature[data-feature="queue"] {
  grid-column: 10 / 13;
  grid-row: 3;
}
.landing-feature-visual {
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 32px 32px 0;
}
.landing-feature-copy {
  padding: 28px 32px 32px;
}
.landing-feature h3 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.15;
}
.landing-feature p {
  max-width: 44ch;
  margin: 10px 0 0;
  color: var(--openbot-text-secondary);
  font-size: 15px;
  line-height: 1.6;
  text-wrap: pretty;
}
.landing-feature[data-feature="local"] p {
  color: var(--openbot-download-card-muted);
}
.landing-feature-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: currentColor;
  @supports (color: color-mix(in lab, red, red)) {
    text-decoration-color: color-mix(in srgb, currentColor 38%, var(--openbot-transparent));
  }
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--openbot-duration-normal) ease;
}
.landing-feature-link:hover {
  color: var(--openbot-text-primary);
  text-decoration-color: currentColor;
}
.landing-window {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--landing-card-border);
  background: var(--openbot-bg-canvas);
  box-shadow: 0 24px 60px rgb(0 0 0 / 28%);
}
.landing-window-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--landing-card-border);
}
.landing-feature[data-feature="team"] .landing-feature-visual {
  display: flex;
  padding: 36px 0 0 36px;
}
.landing-team-window {
  flex: 1;
  margin-right: -24px;
  border-radius: 20px 0 0;
  mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent);
}
.landing-team-channel {
  font-size: 15px;
  font-weight: 600;
}
.landing-team-hash {
  margin-right: 6px;
  color: var(--openbot-text-muted);
  font-weight: 400;
}
.landing-team-stack {
  display: flex;
  margin-left: auto;
  padding-right: 24px;
}
.landing-team-stack > * + * {
  margin-left: -4px;
}
.landing-team {
  display: grid;
  gap: 20px;
  margin: 0;
  padding: 22px 28px 40px 22px;
  list-style: none;
}
.landing-team-message {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.landing-feature .landing-team-avatar {
  --landing-team-avatar-size: 46px;
  flex: none;
  display: grid;
  place-items: center;
  width: var(--landing-team-avatar-size);
  height: var(--landing-team-avatar-size);
  border-radius: var(--openbot-radius-pill);
}
.landing-feature .landing-team-avatar-small {
  --landing-team-avatar-size: 28px;
  box-shadow: 0 0 0 2px var(--openbot-bg-canvas);
  background: var(--openbot-bg-surface-raised);
}
.landing-feature .landing-team-avatar:empty {
  background: var(--landing-card-fill);
}
.landing-feature .landing-team-avatar > svg {
  display: block;
  width: 128%;
  height: 128%;
  overflow: visible;
  translate: 0 calc(var(--landing-team-avatar-size) * -0.14);
}
.landing-team-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding-top: 2px;
}
.landing-team-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.landing-team-name {
  font-size: 14px;
  font-weight: 600;
}
.landing-team-time {
  color: var(--openbot-text-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.landing-team-text {
  color: var(--openbot-text-secondary);
  font-size: 15px;
  line-height: 1.5;
}
.landing-team-system {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--openbot-text-muted);
  font-size: 12px;
  font-weight: 500;
}
.landing-team-system::before, .landing-team-system::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--landing-card-border);
}
.landing-team-next {
  display: grid;
}
.landing-team-next > * {
  grid-area: 1 / 1;
  transition: opacity 260ms ease, transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}
.landing-team-typing {
  display: inline-flex;
  align-self: start;
  justify-self: start;
  gap: 4px;
  margin-left: 60px;
  padding: 12px 14px;
  border-radius: var(--openbot-radius-pill);
  background: var(--landing-card-fill);
}
.landing-team-typing span {
  width: 6px;
  height: 6px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-muted);
  animation: landing-typing 1200ms ease-in-out infinite;
}
.landing-team-typing span:nth-child(2) {
  animation-delay: 150ms;
}
.landing-team-typing span:nth-child(3) {
  animation-delay: 300ms;
}
.landing-team-reply {
  opacity: 0;
  transform: translateY(10px);
}
.landing-feature[data-feature="team"]:hover .landing-team-typing {
  opacity: 0;
  transform: scale(0.85);
}
.landing-feature[data-feature="team"]:hover .landing-team-reply {
  opacity: 1;
  transform: none;
  transition-delay: 120ms;
}
.landing-feature[data-feature="providers"] .landing-feature-visual {
  padding: 36px 0 0;
}
.landing-marquee {
  width: 100%;
  display: grid;
  gap: 12px;
  padding-block: 4px;
  mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
}
.landing-marquee-row {
  min-width: 0;
  overflow-x: clip;
}
.landing-marquee-track {
  display: flex;
  gap: 10px;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: landing-marquee 36s linear infinite;
}
.landing-marquee-row + .landing-marquee-row .landing-marquee-track {
  animation-direction: reverse;
}
.landing-feature[data-feature="providers"]:hover .landing-marquee-track {
  animation-play-state: paused;
}
.landing-provider-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px 10px 12px;
  border: 1px solid var(--landing-card-border);
  border-radius: var(--openbot-radius-pill);
  background: var(--landing-card-fill);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}
.landing-provider-pill:hover {
  border-color: var(--openbot-provider-current);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--openbot-provider-current) 55%, transparent);
  }
  background: var(--openbot-provider-current);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-provider-current) 12%, transparent);
  }
  transform: translateY(-2px);
}
.landing-provider-pill-logo {
  width: 20px;
  height: 20px;
}
.landing-feature[data-feature="local"] .landing-feature-visual {
  grid-area: visual;
  align-self: end;
  display: block;
  place-items: normal;
  padding: 32px 0 0;
}
.landing-feature[data-feature="local"] .landing-feature-copy {
  grid-area: copy;
  align-self: end;
}
.landing-local-window {
  border-color: var(--openbot-download-card-border);
  border-right: 0;
  border-bottom: 0;
  border-radius: 16px 0 0;
  background: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-primary) 42%, transparent);
  }
  box-shadow: 0 20px 44px var(--openbot-text-on-light);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 20px 44px color-mix(in srgb, var(--openbot-text-on-light) 18%, transparent);
  }
}
.landing-local-window .landing-window-bar {
  padding: 11px 16px;
  border-bottom-color: var(--openbot-download-card-border);
}
.landing-local-title {
  font-size: 13px;
  font-weight: 600;
}
.landing-lock {
  width: 16px;
  height: 16px;
  margin-left: auto;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.landing-feature[data-feature="local"]:hover .landing-lock-shackle {
  animation: landing-lock-click 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
.landing-local-files {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 8px;
  list-style: none;
}
.landing-local-files li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 140ms ease;
}
.landing-local-files li:hover {
  background: var(--openbot-download-card-chip);
}
.landing-local-folder {
  flex: none;
  width: 17px;
  height: 17px;
  color: var(--openbot-download-card-muted);
}
.landing-feature[data-feature="persist"] .landing-feature-visual {
  place-items: end stretch;
}
.landing-persist-window {
  border-radius: 16px;
}
.landing-persist-window .landing-window-bar {
  gap: 10px;
  padding: 10px 12px 10px 14px;
}
.landing-persist-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 6px 10px 6px 9px;
  border: 1px solid var(--landing-card-border);
  border-radius: 10px;
  background: var(--landing-card-fill);
}
.landing-persist-swap {
  display: grid;
  overflow: hidden;
}
.landing-persist-provider {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: opacity 220ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.landing-persist-provider + .landing-persist-provider {
  opacity: 0;
  transform: translateY(100%);
}
.landing-feature[data-feature="persist"]:hover .landing-persist-provider {
  opacity: 0;
  transform: translateY(-100%);
}
.landing-feature[data-feature="persist"]:hover .landing-persist-provider + .landing-persist-provider {
  opacity: 1;
  transform: none;
}
.landing-persist-logo {
  flex: none;
  width: 14px;
  height: 14px;
}
.landing-persist-chevron {
  width: 14px;
  height: 14px;
  color: var(--openbot-text-muted);
}
.landing-persist-thread {
  height: 178px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 14px;
  margin: 0;
  padding: 16px 16px 18px;
  overflow: hidden;
  list-style: none;
  mask-image: linear-gradient(to bottom, transparent, #000 28px);
}
.landing-persist-request {
  align-self: flex-end;
  max-width: 85%;
  padding: 9px 14px;
  border-radius: 16px 16px 4px;
  background: var(--openbot-bg-surface-raised);
  font-size: 14px;
  line-height: 1.45;
}
.landing-persist-reply {
  display: grid;
  gap: 4px;
}
.landing-persist-reply .landing-team-text {
  font-size: 14px;
}
.landing-persist-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
}
.landing-persist-meta .landing-team-time {
  font-weight: 400;
}
.landing-persist-later {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: -14px;
  opacity: 0;
  transition: grid-template-rows 420ms cubic-bezier(0.22, 1, 0.36, 1), margin-top 420ms cubic-bezier(0.22, 1, 0.36, 1), opacity 260ms ease;
}
.landing-persist-later > ul {
  min-height: 0;
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
}
.landing-feature[data-feature="persist"]:hover .landing-persist-later {
  grid-template-rows: 1fr;
  margin-top: 0;
  opacity: 1;
  transition-delay: 160ms;
}
.landing-feature[data-feature="browser"] .landing-feature-visual {
  place-items: end stretch;
}
.landing-browser {
  position: relative;
  border-radius: 16px;
}
.landing-browser-tabs {
  display: flex;
  height: 34px;
  align-items: flex-end;
  gap: 2px;
  padding: 0 8px;
}
.landing-browser-tab {
  position: relative;
  display: flex;
  min-width: 0;
  width: 148px;
  height: 28px;
  flex: 0 1 148px;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  border-radius: 8px 8px 0 0;
  color: var(--openbot-text-muted);
  font-size: 12px;
}
.landing-browser-tab[data-controlled] {
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-primary);
}
.landing-browser-tab-title {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.landing-browser-tab > svg, .landing-browser-new svg {
  flex: none;
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.5;
}
.landing-browser-new {
  display: grid;
  width: 24px;
  height: 28px;
  place-items: center;
  color: var(--openbot-text-muted);
}
.landing-browser-control {
  display: grid;
  flex: none;
  color: var(--openbot-accent-text);
}
.landing-browser-control svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}
.landing-browser-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-muted);
}
.landing-browser-toolbar svg {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
}
.landing-browser-address {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  margin-left: 4px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-secondary);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.landing-browser-page {
  display: grid;
  justify-items: start;
  padding: 18px 20px 22px;
  background: var(--openbot-text-primary);
  color: var(--openbot-text-on-light);
}
.landing-browser-heading {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.landing-browser-label {
  margin-top: 12px;
  color: var(--openbot-text-on-light);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--openbot-text-on-light) 60%, transparent);
  }
  font-size: 11px;
  font-weight: 500;
}
.landing-browser-input {
  display: flex;
  align-items: center;
  width: 100%;
  height: 32px;
  margin-top: 5px;
  padding: 0 10px;
  border: 1px solid var(--openbot-text-on-light);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--openbot-text-on-light) 18%, transparent);
  }
  border-radius: 8px;
  font-size: 13px;
  transition: border-color 160ms ease;
}
.landing-browser-typed {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.landing-browser-caret {
  width: 1px;
  height: 15px;
  margin-left: 1px;
  background: currentColor;
  opacity: 0;
}
.landing-browser-submit {
  margin-top: 12px;
  padding: 7px 14px;
  border-radius: 8px;
  background: var(--openbot-text-on-light);
  color: var(--openbot-text-primary);
  font-size: 12px;
  font-weight: 600;
  transition: transform 140ms ease, opacity 140ms ease;
}
.landing-feature[data-feature="browser"]:hover .landing-browser-input {
  border-color: var(--openbot-text-on-light);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--openbot-text-on-light) 55%, transparent);
  }
}
.landing-feature[data-feature="browser"]:hover .landing-browser-typed {
  max-width: 16ch;
  transition: max-width 900ms steps(15) 200ms;
}
.landing-feature[data-feature="browser"]:hover .landing-browser-caret {
  animation: landing-caret 1s steps(1) infinite;
}
.landing-feature[data-feature="browser"]:hover .landing-browser-submit {
  animation: landing-press 240ms ease 1200ms;
}
.landing-feature[data-feature="queue"] .landing-feature-visual {
  place-items: end stretch;
}
.landing-queue {
  min-width: 0;
  min-height: 186px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.landing-queue-panel {
  position: relative;
  margin: 0 10px -14px;
  padding: 6px 5px 19px;
  border: 1px solid var(--openbot-queue-border);
  border-radius: 14px;
  background: var(--openbot-queue-surface);
}
.landing-queue-hold {
  display: block;
  overflow: hidden;
  padding: 0 8px 4px 9px;
  color: var(--openbot-text-muted);
  font-size: 12px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.landing-queue-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.landing-queue-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 29px;
  padding: 0 4px 0 8px;
  border-radius: 8px;
  color: var(--openbot-text-secondary);
  font-size: 13px;
  transition: background 140ms ease;
}
.landing-queue-row:hover {
  background: var(--openbot-bg-surface-raised);
}
.landing-queue-row svg {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.4;
}
.landing-queue-row > svg {
  color: var(--openbot-text-muted);
}
.landing-queue-text {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.landing-queue-actions {
  position: absolute;
  inset: 0 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px 0 24px;
  border-radius: 0 8px 8px 0;
  background: linear-gradient(to right, transparent, var(--openbot-bg-surface-raised) 20px);
  color: var(--openbot-text-muted);
  opacity: 0;
  transition: opacity 140ms ease;
}
.landing-queue-row:hover .landing-queue-actions {
  opacity: 1;
}
.landing-queue-steer {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--openbot-text-secondary);
  font-size: 12px;
  font-weight: 500;
}
.landing-queue-added {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 360ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease;
}
.landing-queue-added > .landing-queue-row {
  min-height: 0;
  height: auto;
  overflow: hidden;
}
.landing-queue-added > .landing-queue-row > * {
  margin-block: 6.5px;
}
.landing-feature[data-feature="queue"]:hover .landing-queue-added {
  grid-template-rows: 1fr;
  opacity: 1;
  transition-delay: 180ms;
}
.landing-queue-composer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 10px 14px;
  border: 1px solid var(--landing-card-border);
  border-radius: 16px;
  background: var(--openbot-bg-canvas);
  box-shadow: 0 18px 44px rgb(0 0 0 / 28%);
}
.landing-queue-input {
  min-width: 0;
  flex: 1;
  display: grid;
  font-size: 14px;
}
.landing-queue-input > * {
  grid-area: 1 / 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: opacity 200ms ease, transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.landing-queue-placeholder {
  color: var(--openbot-text-muted);
  opacity: 0;
}
.landing-feature[data-feature="queue"]:hover .landing-queue-draft {
  opacity: 0;
  transform: translateY(-10px);
}
.landing-feature[data-feature="queue"]:hover .landing-queue-placeholder {
  opacity: 1;
  transition-delay: 200ms;
}
.landing-queue-send {
  display: grid;
  width: 28px;
  height: 28px;
  flex: none;
  place-items: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-primary);
  color: var(--openbot-text-on-light);
  transition: transform 140ms ease, opacity 200ms ease;
}
.landing-queue-send-icon {
  width: 15px;
  height: 15px;
  rotate: -90deg;
}
.landing-feature[data-feature="queue"]:hover .landing-queue-send {
  opacity: 0.4;
  transform: scale(0.9);
}
.landing-faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
  gap: clamp(40px, 6vw, 96px);
}
.landing-faq-heading {
  position: sticky;
  top: 96px;
}
.landing-faq-contact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 28px;
  color: var(--openbot-text-primary);
  font-size: 15px;
  font-weight: 500;
  transition: color 160ms ease;
}
.landing-faq-contact:hover, .landing-faq-contact:focus-visible {
  color: var(--openbot-logo-production);
}
.landing-faq-contact-icon {
  width: 16px;
  height: 16px;
}
.landing-compare-links {
  margin-top: clamp(72px, 8vw, 112px);
}
.landing-compare-links h3 {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: 15px;
  font-weight: 500;
}
.landing-compare-links ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.landing-compare-links a {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--landing-card-border);
  border-radius: 18px;
  background: var(--openbot-bg-surface);
  font-size: 15px;
  font-weight: 500;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.landing-compare-links a:hover, .landing-compare-links a:focus-visible {
  border-color: var(--landing-card-border-hover);
  background: var(--openbot-bg-surface-raised);
}
.landing-compare-art {
  position: relative;
  display: flex;
  height: 92px;
  flex: none;
  align-items: center;
  justify-content: center;
}
.landing-compare-marks {
  position: relative;
  display: flex;
  pointer-events: none;
}
.landing-compare-mark {
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-canvas);
  box-shadow: 0 4px 14px rgb(0 0 0 / 24%);
}
.landing-compare-mark-rival {
  margin-left: -8px;
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-primary);
}
.landing-compare-label {
  min-width: 0;
  padding: 16px 44px 18px 20px;
}
.landing-compare-arrow {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 16px;
  height: 16px;
  color: var(--openbot-text-muted);
  transition: color 160ms ease, transform 160ms ease;
}
.landing-compare-links a:hover .landing-compare-arrow {
  color: var(--openbot-text-primary);
  transform: translateX(2px);
}
.landing-section[data-revealed="false"] :is(.landing-section-heading, .landing-feature, .compare-faq-item, .landing-compare-links li) {
  opacity: 0;
}
.landing-section[data-revealed="true"] :is(.landing-section-heading, .landing-feature, .compare-faq-item, .landing-compare-links li) {
  animation: landing-download-reveal 720ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(120ms + var(--landing-index, 0) * 80ms);
}
.landing-section[data-revealed="true"] .landing-section-heading {
  animation-delay: 0ms;
}
@media (max-width: 1100px) {
  .landing-features-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .landing-feature[data-feature] {
    grid-column: span 3;
    grid-row: auto;
  }
  .landing-feature:is([data-feature="team"], [data-feature="local"]) {
    grid-column: 1 / -1;
  }
  .landing-feature[data-feature="team"] .landing-feature-visual {
    min-height: 400px;
  }
  .landing-compare-links ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .landing-section-inner {
    padding: 88px 16px 0;
  }
  .landing-features-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .landing-feature[data-feature] {
    grid-column: auto;
  }
  .landing-feature[data-feature="team"] .landing-feature-visual {
    min-height: 360px;
    padding: 24px 0 0 20px;
  }
  .landing-feature-copy {
    padding: 24px 24px 28px;
  }
  .landing-marquee-row + .landing-marquee-row {
    display: none;
  }
  .landing-feature[data-feature="local"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "visual" "copy";
  }
  .landing-feature[data-feature="local"] .landing-feature-visual {
    padding: 24px 0 0 24px;
  }
  .landing-faq-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .landing-faq-heading {
    position: static;
  }
}
@media (max-width: 600px) {
  .landing-compare-links ul {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .landing-compare-links a {
    flex-direction: row;
    align-items: center;
  }
  .landing-compare-art {
    width: 96px;
    height: 64px;
  }
  .landing-compare-mark {
    width: 34px;
    height: 34px;
    padding: 7px;
  }
  .landing-compare-label {
    flex: 1;
    padding: 0 44px 0 16px;
  }
  .landing-compare-arrow {
    bottom: auto;
  }
}
.landing-footer {
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
}
.landing-footer-inner {
  width: min(100%, 1280px);
  margin: 0 auto;
  padding: clamp(53px, 5.6vw, 78px) clamp(20px, 4vw, 48px) 32px;
}
.landing-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(480px, 1.2fr);
  gap: clamp(56px, 8vw, 112px);
}
.landing-footer-brand {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.landing-footer-lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border-radius: var(--openbot-radius-md);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.landing-footer-lockup:focus-visible, .landing-footer-cta:focus-visible, .landing-footer-social:focus-visible, .landing-footer-column a:focus-visible, .landing-footer-meta a:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--openbot-accent-strong);
}
.landing-footer-logo {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
}
.landing-footer-description {
  max-width: 560px;
  margin: 32px 0 0;
  color: var(--openbot-text-primary);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.18;
  text-wrap: balance;
}
.landing-footer-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 28px;
  border-radius: var(--openbot-radius-md);
  color: var(--openbot-text-primary);
  font-size: 14px;
  font-weight: 500;
}
.landing-footer-cta svg, .landing-footer-meta a svg {
  width: 14px;
  height: 14px;
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.landing-footer-socials {
  display: flex;
  gap: 7px;
  margin-top: 32px;
}
.landing-footer-social {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-sidebar);
  color: var(--openbot-text-muted);
  transition: background-color var(--openbot-duration-normal) ease, color var(--openbot-duration-normal) ease;
}
.landing-footer-social svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.landing-footer-columns {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px);
  padding-top: 7px;
}
.landing-footer-column h2 {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.landing-footer-column ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.landing-footer-column a {
  border-radius: 4px;
  color: var(--openbot-text-secondary);
  font-size: 14px;
  transition: color var(--openbot-duration-normal) ease;
}
.landing-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: clamp(53px, 6.3vw, 84px);
  padding-top: 24px;
  border-top: 1px solid var(--openbot-border);
  color: var(--openbot-text-muted);
  font-size: 12px;
}
.landing-footer-bottom p {
  margin: 0;
}
.landing-footer-meta {
  display: flex;
  align-items: center;
  gap: 24px;
}
.landing-footer-meta a, .landing-footer-made {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.landing-footer-meta a {
  border-radius: 4px;
  transition: color var(--openbot-duration-normal) ease;
}
.landing-footer-availability {
  width: 7px;
  height: 7px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-logo-preview);
}
.landing-footer-made {
  font-family: var(--openbot-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.landing-footer-made svg {
  width: 14px;
  height: 14px;
  fill: var(--openbot-logo-production);
  color: var(--openbot-logo-production);
  animation: landing-footer-heart 1.8s ease-in-out infinite;
}
.landing-footer [data-revealed="false"] {
  opacity: 0;
}
.landing-footer [data-revealed="true"] {
  animation: landing-footer-reveal 900ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.landing-footer-columns[data-revealed="true"] {
  animation-delay: 120ms;
}
.landing-footer-bottom[data-revealed="true"] {
  animation-delay: 220ms;
}
.landing-glow {
  width: 100%;
  height: 55vh;
  min-height: 360px;
  overflow: hidden;
  pointer-events: none;
}
.landing-glow-rise {
  width: 100%;
  height: 100%;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--landing-glow-rise-ms, 1100ms) cubic-bezier(0.16, 1, 0.3, 1);
}
.landing-glow-svg {
  width: 100%;
  height: 100%;
  display: block;
}
@keyframes landing-footer-reveal {
  from {
    opacity: 0;
    filter: blur(6px);
    transform: translate3d(0, 6px, 0);
  }
  to {
    opacity: 1;
    filter: blur(0.001px);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes landing-marquee {
  to {
    transform: translateX(calc(-50% - 5px));
  }
}
@keyframes landing-lock-click {
  40% {
    transform: translateY(-3px);
  }
  75% {
    transform: translateY(1px);
  }
}
@keyframes landing-press {
  50% {
    opacity: 0.85;
    transform: scale(0.94);
  }
}
@keyframes landing-caret {
  50% {
    opacity: 1;
  }
}
@keyframes landing-typing {
  0%, 60%, 100% {
    opacity: 0.35;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-3px);
  }
}
@keyframes landing-download-reveal {
  from {
    opacity: 0;
    filter: blur(6px);
    transform: translate3d(0, 10px, 0);
  }
  to {
    opacity: 1;
    filter: blur(0.001px);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes landing-price-enter {
  from {
    opacity: 0;
    transform: scale(0.94) translate3d(0, 16px, 0);
    filter: blur(16px) var(--price-bevel);
    background-position: 0 0%, 0 0;
  }
  to {
    opacity: 1;
    transform: scale(1) translate3d(0, 0, 0);
    filter: blur(0.001px) var(--price-bevel);
    background-position: 0 42%, 0 0;
  }
}
@keyframes landing-price-sheen {
  from {
    background-position: 0 42%, 0 0;
  }
  to {
    background-position: 0 58%, 0 0;
  }
}
@keyframes landing-footer-heart {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.84);
  }
}
[data-enter] {
  animation: landing-enter var(--openbot-duration-overlay) var(--openbot-ease-out) both;
}
[data-enter="header"] {
  animation-name: landing-header-enter;
  animation-fill-mode: backwards;
}
[data-enter="preview"] {
  animation-delay: 110ms;
}
@keyframes landing-header-enter {
  from {
    transform: translateY(10px);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes landing-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes landing-download-menu-enter {
  from {
    opacity: 0;
    transform: translate(-50%, -4px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
@media (hover: hover) and (pointer: fine) {
  .landing-button {
    cursor: pointer;
  }
  .landing-button-primary:hover {
    background: var(--openbot-text-primary);
  }
  .landing-download-primary[data-state="available"]:hover, .landing-download-trigger:hover {
    opacity: 0.78;
  }
  .landing-download-trigger, .landing-download-menu-item {
    cursor: pointer;
  }
  .landing-download-menu-item:hover {
    background: var(--openbot-bg-surface);
    color: var(--openbot-text-primary);
  }
  .landing-button-secondary:hover {
    border-color: var(--openbot-text-dim);
    background: var(--openbot-bg-control-hover);
    color: var(--openbot-text-primary);
  }
  .landing-button-glass:hover {
    border-color: var(--openbot-glass-highlight);
    background: var(--openbot-glass-surface-hover);
    box-shadow: inset 0 1px 0 var(--openbot-glass-border), 0 14px 36px -18px var(--openbot-glass-shadow);
  }
  .landing-footer-cta:hover span {
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  .landing-download-card[data-state="available"]:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 44px -28px var(--openbot-text-on-light);
  }
  .landing-download-card[data-state="available"]:hover .landing-download-arrow {
    transform: translate(2px, -2px);
  }
  .landing-footer-social:hover {
    background: var(--openbot-bg-surface);
    color: var(--openbot-text-primary);
  }
  .landing-footer-column a:hover, .landing-footer-meta a:hover {
    color: var(--openbot-text-primary);
  }
}
@media (max-width: 900px) {
  .site-sheet-actions > .landing-button {
    flex: 1 1 0;
    height: 44px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-nav-pill, .site-nav-chevron, .site-panel-feature-art, .site-panel-plugin-mark, .site-panel-index svg, .site-menu-button-line {
    transition: none;
  }
  .site-nav-surface, .site-nav[data-state="open"] .site-nav-surface {
    transform: translateX(var(--site-nav-surface-x, 0));
    transition: opacity 160ms ease;
  }
  .site-nav-panel[data-motion] {
    --site-nav-shift: 0px;
    --site-nav-rise: 0px;
  }
  .site-sheet .site-sheet-section, .site-sheet .site-sheet-actions, .site-sheet[data-state="open"] .site-sheet-section, .site-sheet[data-state="open"] .site-sheet-actions {
    filter: none;
    transform: none;
    transition: opacity 200ms ease;
  }
}
@media (max-width: 959px) {
  .landing-preview {
    aspect-ratio: auto;
    height: 620px;
    max-height: none;
  }
  .landing-download-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .landing-download-card[data-download-platform="linux"] {
    min-height: 260px;
    grid-column: 1 / -1;
  }
}
@media (max-width: 840px) {
  .landing-footer-grid {
    grid-template-columns: 1fr;
  }
  .landing-footer-columns {
    max-width: 760px;
  }
  .landing-footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media (max-width: 640px) {
  .landing-header {
    min-height: 68px;
    flex-wrap: wrap;
    gap: 12px;
    row-gap: 10px;
    padding: 15px 16px;
  }
  .landing-brand {
    flex-shrink: 0;
    gap: 8px;
    font-size: 15px;
  }
  .landing-brand-logo {
    width: 25px;
    height: 25px;
  }
  .landing-hero {
    padding: 60px 16px 48px;
  }
  .landing-hero-grid {
    background-size: 36px 36px;
    mask-image: radial-gradient(100% 66% at 50% 36%, var(--openbot-mask-solid) 34%, var(--openbot-transparent) 100%);
  }
  .landing-description {
    margin-top: 24px;
    font-size: 16px;
    line-height: 1.5;
  }
  .landing-actions {
    width: 100%;
    flex-direction: column;
    margin-top: 28px;
  }
  .landing-actions .landing-button {
    width: min(100%, 320px);
  }
  .landing-download-selector, .landing-download-split {
    width: min(100%, 320px);
  }
  .landing-download-primary {
    flex: 1;
  }
  .landing-download-menu {
    width: 100%;
  }
  .landing-download-selector[data-open="true"] + .landing-button {
    visibility: hidden;
  }
  .landing-availability {
    margin-bottom: 24px;
    gap: 6px;
    padding: 3px 9px 3px 3px;
    font-size: 10px;
  }
  .landing-availability-new {
    min-height: 23px;
    padding-inline: 7px;
    font-size: 8px;
  }
  .landing-availability-copy {
    display: none;
  }
  .landing-availability-platform {
    gap: 3px;
  }
  .landing-availability-platform svg {
    width: 11px;
    height: 11px;
  }
  .landing-preview {
    height: 590px;
    margin-top: 64px;
  }
  .landing-preview-window-controls {
    display: none;
  }
  .landing-pricing-inner {
    padding: 88px 16px 24px;
  }
  .landing-download-inner {
    padding: 88px 16px 32px;
  }
  .landing-download-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 42px;
  }
  .landing-download-grid-mobile {
    margin-top: 14px;
  }
  .landing-download-card, .landing-download-card[data-download-platform="linux"] {
    min-height: 360px;
    grid-column: auto;
    padding: 26px;
  }
  .landing-download-grid-mobile .landing-download-card {
    min-height: 300px;
  }
  .landing-footer-inner {
    padding: 72px 16px 28px;
  }
  .landing-footer-grid {
    gap: 64px;
  }
  .landing-footer-description {
    font-size: 25px;
  }
  .landing-footer-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }
  .landing-footer-bottom {
    margin-top: 72px;
  }
  .landing-footer-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }
  .landing-glow {
    min-height: 300px;
  }
}
@media (max-width: 400px) {
  .landing-availability {
    gap: 4px;
  }
  .landing-availability-divider {
    margin-inline: 1px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto;
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
  }
  .landing-footer [data-revealed] {
    opacity: 1;
    animation: none;
  }
  .landing-download [data-revealed] {
    opacity: 1;
    animation: none;
  }
  .landing-pricing [data-revealed] {
    opacity: 1;
    animation: none;
  }
  .landing-section[data-revealed] :is(.landing-section-heading, .landing-feature, .compare-faq-item, .landing-compare-links li) {
    opacity: 1;
    animation: none;
  }
  .landing-marquee-track, .landing-team-typing span, .landing-feature[data-feature="local"]:hover .landing-lock-shackle, .landing-feature[data-feature="browser"]:hover :is(.landing-browser-caret, .landing-browser-submit) {
    animation: none;
  }
  .landing-footer-made svg {
    animation: none;
  }
  .landing-glow-rise {
    transform: scaleY(1);
    transition: none;
  }
}
.landing-network {
  overflow: hidden;
}
.landing-network-stage {
  --landing-network-top: 30%;
  position: relative;
  height: clamp(620px, calc(100svh - 24px), 920px);
  margin-top: clamp(64px, 8vw, 120px);
}
.landing-network-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  --landing-network-mask: linear-gradient(
      to bottom,
      transparent var(--landing-network-top),
      var(--openbot-mask-solid) calc(var(--landing-network-top) + 96px),
      var(--openbot-mask-solid) calc(100% - 120px),
      transparent
    ),
    radial-gradient(ellipse 72% 78% at 50% 55%, var(--openbot-mask-solid) 60%, transparent 100%);
  -webkit-mask-image: var(--landing-network-mask);
  -webkit-mask-composite: source-in;
  mask-image: var(--landing-network-mask);
  mask-composite: intersect;
}
.landing-network-heading {
  position: relative;
  margin-inline: auto;
  padding: 0 clamp(20px, 4vw, 48px);
  text-align: center;
}
.landing-network-heading .landing-network-description {
  margin-inline: auto;
}
.landing-network[data-playing="false"] :is(.landing-network-word, .landing-network-description) {
  opacity: 0;
}
.landing-network[data-playing="true"] .landing-network-word {
  animation: landing-network-word 640ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(var(--landing-network-word) * 90ms);
}
.landing-network[data-playing="true"] .landing-network-description {
  animation: landing-download-reveal 720ms cubic-bezier(0.22, 1, 0.36, 1) 560ms backwards;
}
@media (prefers-reduced-motion: reduce) {
  .landing-network[data-playing="true"] :is(.landing-network-word, .landing-network-description) {
    animation: none;
  }
}
@keyframes landing-network-word {
  from {
    opacity: 0;
    color: var(--openbot-text-muted);
    filter: blur(var(--reveal-blur));
  }
  55% {
    color: var(--openbot-text-muted);
  }
}
.landing-network-marks {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.landing-teams {
  --landing-teams-top: 96px;
  --landing-teams-step: 64px;
}
.landing-teams [data-offer="servers"] {
  --landing-teams-color: var(--openbot-logo-production);
}
.landing-teams [data-offer="environments"] {
  --landing-teams-color: var(--openbot-logo-preview);
}
.landing-teams [data-offer="integrations"] {
  --landing-teams-color: var(--openbot-logo-dev);
}
.landing-teams [data-offer="support"] {
  --landing-teams-color: var(--download-ios-color);
}
.landing-teams-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 96px);
}
.landing-teams-aside {
  position: sticky;
  top: var(--landing-teams-top);
  align-self: start;
}
.landing-teams-title {
  text-wrap: balance;
}
.landing-section-heading .landing-teams-statement {
  margin-top: 20px;
  color: var(--openbot-text-primary);
  font-size: clamp(19px, 1.8vw, 22px);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.landing-section-heading .landing-teams-description {
  max-width: 36ch;
  margin-top: 10px;
}
.landing-teams-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.landing-teams-progress {
  display: grid;
  margin: 48px 0 0;
  padding: 0;
  border-left: 1px solid var(--landing-card-border);
  list-style: none;
}
.landing-teams-progress-item {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 10px 0 10px 20px;
  color: var(--openbot-text-muted);
  font-size: 14px;
  font-weight: 500;
  transition: color var(--openbot-duration-normal) ease;
}
.landing-teams-progress-item::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: -1px;
  width: 2px;
  border-radius: var(--openbot-radius-pill);
  background: var(--landing-teams-color);
  scale: 1 0;
  transition: scale var(--openbot-duration-normal) var(--openbot-ease-out);
}
.landing-teams-progress-item[data-active] {
  color: var(--openbot-text-primary);
}
.landing-teams-progress-item[data-active]::before {
  scale: 1 1;
}
.landing-teams-progress-number {
  font-family: var(--openbot-font-mono);
  font-size: 11px;
  font-weight: 600;
}
.landing-teams-stack {
  display: grid;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.landing-teams-card {
  position: sticky;
  top: calc(var(--landing-teams-top) + var(--landing-teams-card) * var(--landing-teams-step));
  isolation: isolate;
  min-height: 380px;
  display: grid;
  grid-template-rows: var(--landing-teams-step) 1fr auto;
  overflow: hidden;
  padding: 0 clamp(26px, 3vw, 40px) clamp(26px, 3vw, 40px);
  border: 1px solid var(--openbot-download-card-border);
  border-radius: 28px;
  background: var(--landing-teams-color);
  box-shadow: 0 -20px 40px -28px rgb(0 0 0 / 70%);
  color: var(--openbot-text-on-light);
  transform-origin: top center;
  scale: calc(1 - var(--landing-teams-covered, 0) * 0.05);
  filter: brightness(calc(1 - var(--landing-teams-covered, 0) * 0.22));
}
.landing-teams-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: linear-gradient(var(--openbot-text-on-light) 1px, transparent 1px), linear-gradient(90deg, var(--openbot-text-on-light) 1px, transparent 1px);
  @supports (color: color-mix(in lab, red, red)) {
    background-image: linear-gradient(color-mix(in srgb, var(--openbot-text-on-light) 7%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--openbot-text-on-light) 7%, transparent) 1px, transparent 1px);
  }
  background-position: -1px -1px;
  background-size: 28px 28px;
  mask-image: radial-gradient( 120% 100% at 85% 25%, var(--openbot-mask-solid) 15%, var(--openbot-mask-solid) 100% );
  @supports (color: color-mix(in lab, red, red)) {
    mask-image: radial-gradient( 120% 100% at 85% 25%, var(--openbot-mask-solid) 15%, color-mix(in srgb, var(--openbot-mask-solid) 35%, transparent) 100% );
  }
  pointer-events: none;
}
.landing-teams-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.landing-teams-card-number {
  font-family: var(--openbot-font-mono);
  font-size: 12px;
  font-weight: 600;
  opacity: 0.6;
}
.landing-teams-card-icon {
  position: absolute;
  z-index: -1;
  top: calc(var(--landing-teams-step) + 4px);
  right: clamp(26px, 3vw, 40px);
  width: clamp(130px, 15vw, 200px);
  height: clamp(130px, 15vw, 200px);
  stroke-width: 0.75;
  opacity: 0.85;
}
.landing-teams-card-copy {
  grid-row: 3;
}
.landing-teams-card-title {
  max-width: 12ch;
  margin: 0;
  font-size: clamp(34px, 4vw, 56px);
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 0.98;
  text-wrap: balance;
}
.landing-teams-card-description {
  max-width: 34ch;
  margin: 16px 0 0;
  color: var(--openbot-download-card-muted);
  font-size: 16px;
  line-height: 1.5;
  text-wrap: pretty;
}
@media (prefers-reduced-motion: reduce) {
  .landing-teams-card {
    scale: none;
  }
  .landing-teams-progress-item, .landing-teams-progress-item::before {
    transition: none;
  }
}
@media (max-width: 900px) {
  .landing-teams {
    --landing-teams-top: 16px;
    --landing-teams-step: 52px;
  }
  .landing-teams-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .landing-teams-aside {
    position: static;
  }
  .landing-teams-progress {
    display: none;
  }
  .landing-teams-stack {
    gap: 16px;
  }
  .landing-teams-card {
    min-height: 320px;
    border-radius: 24px;
  }
  .landing-teams-card-icon {
    width: 110px;
    height: 110px;
    stroke-width: 0.9;
  }
}
.teams-page {
  --landing-card-border: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --landing-card-border: color-mix(in srgb, var(--openbot-text-primary) 8%, transparent);
  }
  --landing-card-border-hover: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --landing-card-border-hover: color-mix(in srgb, var(--openbot-text-primary) 16%, transparent);
  }
  --landing-card-fill: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --landing-card-fill: color-mix(in srgb, var(--openbot-text-primary) 5%, transparent);
  }
  --teams-soft-grid: linear-gradient(var(--openbot-text-on-light) 1px, transparent 1px),
    linear-gradient(90deg, var(--openbot-text-on-light) 1px, transparent 1px);
  @supports (color: color-mix(in lab, red, red)) {
    --teams-soft-grid: linear-gradient(color-mix(in srgb, var(--openbot-text-on-light) 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--openbot-text-on-light) 7%, transparent) 1px, transparent 1px);
  }
  color: var(--openbot-text-primary);
}
.teams-page .teams-main {
  padding-bottom: 0;
}
.teams-page [data-setup="local"], .teams-page [data-tile="0"], .teams-page [data-cursor="0"] {
  --teams-color: var(--openbot-logo-production);
}
.teams-page [data-setup="managed"], .teams-page [data-tile="1"], .teams-page [data-cursor="1"] {
  --teams-color: var(--openbot-logo-preview);
}
.teams-page [data-setup="custom"], .teams-page [data-tile="2"], .teams-page [data-cursor="2"] {
  --teams-color: var(--openbot-logo-dev);
}
.teams-page [data-tile="3"] {
  --teams-color: var(--download-ios-color);
}
.teams-page .teams-section {
  position: relative;
  isolation: isolate;
  width: min(100%, 1280px);
  margin: 0 auto;
  padding: clamp(96px, 10vw, 144px) clamp(20px, 4vw, 48px) 0;
}
.teams-page .teams-heading {
  max-width: 760px;
}
.teams-page .teams-heading-center {
  margin-inline: auto;
  text-align: center;
}
.teams-page .teams-heading h2 {
  margin: 0;
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 1;
  text-wrap: balance;
}
.teams-page .teams-heading p {
  max-width: 560px;
  margin: 22px 0 0;
  color: var(--openbot-text-secondary);
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.55;
  text-wrap: pretty;
}
.teams-page .teams-heading-center p {
  margin-inline: auto;
}
.teams-page .teams-help {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 16px;
  margin: 32px 0 0;
  color: var(--openbot-text-secondary);
  font-size: 16px;
}
.teams-page .teams-section[data-revealed="false"] > * {
  opacity: 0;
}
.teams-page .teams-section[data-revealed="true"] > * {
  animation: landing-download-reveal 720ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.teams-page .teams-section[data-revealed="true"] > :nth-child(2) {
  animation-delay: 120ms;
}
.teams-page .teams-section[data-revealed="true"] > :nth-child(3) {
  animation-delay: 240ms;
}
@property --teams-pill-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.teams-page .teams-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 28px;
  padding: 5px 14px 5px 6px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-sidebar);
  color: var(--openbot-text-secondary);
  font-size: 12px;
  font-weight: 500;
}
.teams-page .teams-pill::before, .teams-page .teams-pill::after {
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient( from var(--teams-pill-angle), transparent 0deg 190deg, var(--openbot-logo-production) 250deg, var(--openbot-logo-preview) 295deg, var(--openbot-logo-dev) 340deg, transparent 360deg );
  content: "";
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  animation: teams-pill-turn 5s linear infinite;
}
.teams-page .teams-pill::after {
  inset: -3px;
  padding: 3px;
  filter: blur(6px);
  opacity: 0.7;
}
.teams-page .teams-pill-dots {
  display: inline-flex;
}
.teams-page .teams-pill-dots span {
  width: 16px;
  height: 16px;
  border: 2px solid var(--openbot-bg-sidebar);
  border-radius: var(--openbot-radius-pill);
  background: var(--teams-color);
  animation: teams-pill-hop 2.8s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
.teams-page .teams-pill-dots span + span {
  margin-left: -6px;
}
.teams-page .teams-pill-dots span:nth-child(2) {
  animation-delay: 140ms;
}
.teams-page .teams-pill-dots span:nth-child(3) {
  animation-delay: 280ms;
}
.teams-page .teams-pill-label {
  background: linear-gradient( 100deg, var(--openbot-text-secondary) 42%, var(--openbot-text-primary) 50%, var(--openbot-text-secondary) 58% ) 0 0 / 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: teams-pill-sheen 5s ease-in-out infinite;
}
@keyframes teams-pill-turn {
  to {
    --teams-pill-angle: 360deg;
  }
}
@keyframes teams-pill-hop {
  0%, 30%, 100% {
    transform: none;
  }
  12% {
    transform: translateY(-4px) scale(1.12);
  }
}
@keyframes teams-pill-sheen {
  0% {
    background-position: 100% 0;
  }
  45%, 100% {
    background-position: 0 0;
  }
}
.teams-page .teams-hero {
  padding-bottom: 24px;
}
.teams-page .teams-title {
  max-width: 17ch;
  margin: 0;
  font-size: clamp(46px, 7.2vw, 104px);
  font-weight: 500;
  letter-spacing: -0.06em;
  line-height: 0.95;
  text-wrap: balance;
}
.teams-page .teams-setups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: clamp(48px, 6vw, 72px) 0 0;
  padding: 0;
  list-style: none;
}
.teams-page .teams-setup {
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 440px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: clamp(26px, 2.6vw, 34px);
  border: 1px solid var(--openbot-download-card-border);
  border-radius: 28px;
  background: var(--teams-color);
  color: var(--openbot-text-on-light);
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.teams-page .teams-setup::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: var(--teams-soft-grid);
  background-size: 28px 28px;
  mask-image: radial-gradient(90% 70% at 20% 15%, var(--openbot-mask-solid) 10%, transparent 100%);
  pointer-events: none;
}
.teams-page .teams-setup:hover {
  transform: translateY(-6px);
}
.teams-page .teams-setup-icon {
  width: clamp(76px, 7vw, 96px);
  height: clamp(76px, 7vw, 96px);
  stroke-width: 1;
}
.teams-page .teams-setup .landing-download-card-copy h3 {
  text-wrap: balance;
}
.teams-page .teams-setup .landing-download-card-copy p {
  font-size: 15px;
  text-wrap: pretty;
}
.teams-page .teams-bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.teams-page .teams-tile {
  min-width: 0;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--landing-card-border);
  border-radius: 28px;
  background: var(--openbot-bg-surface);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 6%);
  transition: border-color 200ms ease, background-color 200ms ease;
}
.teams-page .teams-tile:hover {
  border-color: var(--landing-card-border-hover);
  background: var(--openbot-bg-surface-raised);
}
.teams-page .teams-tile[data-tile="0"] {
  grid-column: 1 / 8;
}
.teams-page .teams-tile[data-tile="1"] {
  grid-column: 8 / 13;
}
.teams-page .teams-tile[data-tile="2"] {
  grid-column: 1 / 6;
}
.teams-page .teams-tile[data-tile="3"] {
  grid-column: 6 / 13;
}
.teams-page .teams-tile-art {
  position: relative;
  flex: 1;
  min-height: 170px;
  display: grid;
  place-items: center;
  background: radial-gradient(50% 70% at 50% 60%, var(--teams-color), transparent 70%), linear-gradient(90deg, var(--openbot-hero-grid-line) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(var(--openbot-hero-grid-line) 1px, transparent 1px) 0 0 / 32px 32px;
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient(50% 70% at 50% 60%, color-mix(in srgb, var(--teams-color) 22%, transparent), transparent 70%), linear-gradient(90deg, var(--openbot-hero-grid-line) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(var(--openbot-hero-grid-line) 1px, transparent 1px) 0 0 / 32px 32px;
  }
  mask-image: linear-gradient(var(--openbot-mask-solid) 55%, transparent);
}
.teams-page .teams-tile-art svg {
  width: 88px;
  height: 88px;
  padding: 20px;
  border: 1px solid var(--openbot-download-card-border);
  border-radius: 24px;
  background: var(--teams-color);
  box-shadow: 0 20px 50px -18px var(--teams-color);
  color: var(--openbot-text-on-light);
  stroke-width: 1.6;
  transition: transform 400ms var(--openbot-ease-out);
}
.teams-page .teams-tile:hover .teams-tile-art svg {
  transform: translateY(-6px) rotate(-4deg);
}
.teams-page .teams-tile-copy {
  padding: 8px 32px 32px;
}
.teams-page .teams-tile-copy h2 {
  margin: 0;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.15;
}
.teams-page .teams-tile-copy p {
  max-width: 48ch;
  margin: 10px 0 0;
  color: var(--openbot-text-secondary);
  font-size: 15px;
  line-height: 1.6;
  text-wrap: pretty;
}
.teams-page .teams-timeline {
  position: relative;
  margin: clamp(56px, 7vw, 88px) 0 0;
}
.teams-page .teams-timeline-line {
  position: absolute;
  top: 27px;
  right: 10%;
  left: 10%;
  height: 2px;
  background: var(--landing-card-border-hover);
  pointer-events: none;
}
.teams-page .teams-timeline-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient( 90deg, var(--openbot-logo-production), var(--openbot-logo-preview), var(--openbot-logo-dev), var(--download-ios-color) );
  transform-origin: left;
}
.teams-page .teams-timeline-spark {
  position: absolute;
  top: 50%;
  left: 0;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--openbot-text-primary);
  box-shadow: 0 0 10px 3px var(--openbot-logo-preview), 0 0 36px 12px var(--openbot-logo-production);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 10px 3px color-mix(in srgb, var(--openbot-logo-preview) 80%, transparent), 0 0 36px 12px color-mix(in srgb, var(--openbot-logo-production) 45%, transparent);
  }
  opacity: 0;
}
.teams-page .teams-timeline-spark::before {
  position: absolute;
  top: 50%;
  right: 50%;
  width: 160px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--openbot-text-primary));
  content: "";
  translate: 0 -50%;
}
.teams-page .teams-timeline-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.teams-page .teams-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.teams-page .teams-step-node {
  position: relative;
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border-radius: 50%;
  background: var(--teams-color);
  box-shadow: 0 0 0 10px var(--openbot-bg-canvas), 0 0 36px 6px var(--teams-color);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 10px var(--openbot-bg-canvas), 0 0 36px 6px color-mix(in srgb, var(--teams-color) 40%, transparent);
  }
  color: var(--openbot-text-on-light);
}
.teams-page .teams-step-node::after {
  position: absolute;
  inset: 0;
  border: 2px solid var(--teams-color);
  border-radius: 50%;
  content: "";
  opacity: 0;
}
.teams-page .teams-step-node svg {
  width: 24px;
  height: 24px;
}
.teams-page .teams-step-number {
  margin: 26px 0 0;
  color: var(--openbot-text-muted);
  font-family: var(--openbot-font-mono);
  font-size: 12px;
  font-weight: 600;
}
.teams-page .teams-step-title {
  max-width: 16ch;
  margin: 10px 0 0;
  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.25;
  text-wrap: balance;
}
.teams-page [data-play="false"] .teams-timeline-fill {
  transform: scaleX(0);
}
.teams-page [data-play="false"] .teams-step-node {
  background: var(--openbot-bg-surface-raised);
  box-shadow: 0 0 0 10px var(--openbot-bg-canvas);
  color: transparent;
  transform: scale(0.5);
}
.teams-page [data-play="false"] :is(.teams-step-number, .teams-step-title) {
  opacity: 0;
}
.teams-page [data-play="true"] .teams-timeline-fill {
  animation: teams-timeline-fill 2000ms linear 200ms backwards;
}
.teams-page [data-play="true"] .teams-timeline-spark {
  animation: teams-timeline-spark-x 2000ms linear 200ms both;
}
.teams-page [data-play="true"] .teams-step-node {
  animation: teams-step-pop 760ms cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
  animation-delay: calc(200ms + var(--teams-index) * 500ms);
}
.teams-page [data-play="true"] .teams-step-node::after {
  animation: teams-step-burst 900ms ease-out forwards;
  animation-delay: calc(200ms + var(--teams-index) * 500ms);
}
.teams-page [data-play="true"] :is(.teams-step-number, .teams-step-title) {
  animation: landing-download-reveal 720ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(320ms + var(--teams-index) * 500ms);
}
@keyframes teams-timeline-fill {
  from {
    transform: scaleX(0);
  }
}
@keyframes teams-timeline-spark-x {
  from {
    left: 0;
    opacity: 0;
  }
  6%, 94% {
    opacity: 1;
  }
  to {
    left: 100%;
    opacity: 0;
  }
}
@keyframes teams-step-pop {
  from {
    background: var(--openbot-bg-surface-raised);
    box-shadow: 0 0 0 10px var(--openbot-bg-canvas);
    color: transparent;
    transform: scale(0.5);
  }
  55% {
    transform: scale(1.22);
  }
}
@keyframes teams-step-burst {
  from {
    opacity: 0.9;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(2.4);
  }
}
.teams-page .teams-marquee {
  display: grid;
  gap: 16px;
  margin: clamp(48px, 6vw, 72px) calc(clamp(20px, 4vw, 48px) * -1) 0;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.teams-page .teams-marquee-row {
  overflow: hidden;
}
.teams-page [data-revealed="false"] .teams-marquee-row {
  opacity: 0;
}
.teams-page [data-revealed="true"] .teams-marquee-row {
  animation: landing-download-reveal 720ms cubic-bezier(0.22, 1, 0.36, 1) 200ms backwards;
}
.teams-page [data-revealed="true"] .teams-marquee-row[data-row="1"] {
  animation-delay: 340ms;
}
.teams-page .teams-marquee-track {
  display: flex;
  width: max-content;
  animation: teams-marquee-scroll 48s linear infinite;
}
.teams-page .teams-marquee-row[data-row="1"] .teams-marquee-track {
  animation-direction: reverse;
  animation-duration: 40s;
}
.teams-page .teams-marquee-row:hover .teams-marquee-track {
  animation-play-state: paused;
}
.teams-page .teams-marquee-group {
  display: flex;
  gap: 16px;
  padding-right: 16px;
}
.teams-page .teams-chip {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 12px 28px 12px 12px;
  border: 1px solid var(--landing-card-border);
  border-radius: var(--openbot-radius-pill);
  background: var(--landing-card-fill);
  color: var(--openbot-text-secondary);
  font-size: clamp(17px, 1.6vw, 21px);
  white-space: nowrap;
  transition: border-color var(--openbot-duration-normal) var(--openbot-ease-out), background-color var(--openbot-duration-normal) var(--openbot-ease-out);
}
.teams-page .teams-chip:hover {
  border-color: var(--teams-color);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--teams-color) 50%, transparent);
  }
  background: var(--teams-color);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--teams-color) 12%, transparent);
  }
}
.teams-page .teams-chip strong {
  color: var(--openbot-text-primary);
  font-weight: 600;
}
.teams-page .teams-chip-icon {
  display: grid;
  width: 48px;
  height: 48px;
  flex: none;
  place-items: center;
  border-radius: 50%;
  background: var(--teams-color);
  color: var(--openbot-text-on-light);
}
.teams-page .teams-chip-icon svg {
  width: 22px;
  height: 22px;
}
@keyframes teams-marquee-scroll {
  to {
    transform: translateX(-50%);
  }
}
.teams-page .teams-closing {
  display: grid;
  justify-items: center;
  gap: 36px;
  padding-bottom: clamp(80px, 9vw, 128px);
  text-align: center;
}
.teams-page .teams-closing h2 {
  position: relative;
  z-index: 1;
  max-width: 16ch;
  margin: 0;
  font-size: clamp(40px, 6vw, 84px);
  font-weight: 500;
  letter-spacing: -0.06em;
  line-height: 0.98;
  text-wrap: balance;
}
.teams-page .teams-closing-spot {
  --openbot-hero-grid-line: var(--openbot-logo-preview);
  @supports (color: color-mix(in lab, red, red)) {
    --openbot-hero-grid-line: color-mix(in srgb, var(--openbot-logo-preview) 60%, transparent);
  }
  mask-image: radial-gradient( 220px circle at var(--teams-x, -999px) var(--teams-y, -999px), var(--openbot-mask-solid), var(--openbot-transparent) );
}
.teams-page .teams-closing-word {
  --teams-on: clamp(0, calc((var(--teams-progress, 0) * (var(--teams-count) + 3) - var(--teams-word)) / 3), 1);
  --teams-ease: calc(var(--teams-on) * var(--teams-on) * (3 - 2 * var(--teams-on)));
  display: inline-block;
  opacity: calc(0.4 + var(--teams-ease) * 0.6);
  filter: blur(calc((1 - var(--teams-ease)) * 6px));
  transform: translateY(calc((1 - var(--teams-ease)) * 0.16em));
}
.teams-page .teams-closing-word[data-accent] {
  background: linear-gradient(100deg, var(--openbot-logo-production), var(--openbot-logo-preview));
  background-clip: text;
  color: transparent;
}
.teams-page .teams-closing-action {
  --teams-rise: clamp(0, calc((var(--teams-progress, 0) - 0.7) / 0.3), 1);
  position: relative;
  z-index: 1;
  transform: translateY(calc((1 - var(--teams-rise)) * 14px)) scale(calc(0.97 + var(--teams-rise) * 0.03));
}
.teams-page .teams-closing-action::before {
  position: absolute;
  inset: -8px -14px;
  z-index: -1;
  border-radius: var(--openbot-radius-pill);
  background: linear-gradient( 100deg, var(--openbot-logo-production), var(--openbot-logo-preview) 50%, var(--openbot-logo-dev) );
  content: "";
  filter: blur(18px);
  opacity: 0;
  scale: 0.85;
  transition: opacity 1200ms var(--openbot-ease-out), scale 1200ms var(--openbot-ease-out);
}
.teams-page .teams-closing[data-done="true"] .teams-closing-action::before {
  opacity: 0.5;
  scale: 1;
  animation: teams-closing-breathe 4.8s ease-in-out 1200ms infinite alternate;
}
@keyframes teams-closing-breathe {
  from {
    opacity: 0.5;
    scale: 1;
  }
  to {
    opacity: 0.22;
    scale: 1.08;
  }
}
.teams-page .teams-avatar {
  --teams-avatar-size: 0.7em;
  flex: none;
  display: grid;
  place-items: center;
  width: var(--teams-avatar-size);
  height: var(--teams-avatar-size);
  border-radius: var(--openbot-radius-pill);
}
.teams-page .teams-avatar:empty {
  background: var(--landing-card-fill);
}
.teams-page .teams-avatar > svg {
  display: block;
  width: 128%;
  height: 128%;
  overflow: visible;
  translate: 0 calc(var(--teams-avatar-size) * -0.14);
}
.teams-page .teams-title-keep {
  white-space: nowrap;
}
.teams-page .teams-title-team {
  display: inline-flex;
  vertical-align: -0.26em;
}
.teams-page .teams-title-team > * + * {
  margin-left: -0.06em;
}
.teams-page .teams-cursors {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
}
.teams-page .teams-cursor {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: flex-start;
  opacity: 0;
  transition: opacity 400ms ease;
  will-change: transform;
}
.teams-page .teams-cursor[data-placed] {
  opacity: 1;
}
.teams-page .teams-cursor-arrow {
  width: 30px;
  height: 30px;
  fill: var(--teams-color);
  stroke: var(--openbot-bg-canvas);
  stroke-width: 1.5;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 4px rgb(0 0 0 / 35%));
  transform: rotate(var(--teams-lean, 0deg));
  transform-origin: 4px 3px;
}
.teams-page .teams-cursor-name {
  margin: 22px 0 0 -6px;
  padding: 6px 13px;
  border-radius: var(--openbot-radius-pill);
  background: var(--teams-color);
  box-shadow: 0 4px 12px rgb(0 0 0 / 25%);
  color: var(--openbot-text-on-light);
  font-size: 14px;
  font-weight: 600;
}
@media (max-width: 900px) {
  .teams-page .teams-setups {
    grid-template-columns: minmax(0, 1fr);
  }
  .teams-page .teams-setup {
    min-height: 320px;
    border-radius: 24px;
  }
  .teams-page .teams-tile[data-tile] {
    grid-column: 1 / -1;
  }
  .teams-page .teams-chip {
    gap: 12px;
    padding: 8px 20px 8px 8px;
  }
  .teams-page .teams-chip-icon {
    width: 38px;
    height: 38px;
  }
  .teams-page .teams-timeline-track {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .teams-page .teams-timeline-line {
    top: 28px;
    right: auto;
    bottom: 28px;
    left: 27px;
    width: 2px;
    height: auto;
  }
  .teams-page .teams-timeline-fill {
    background: linear-gradient( 180deg, var(--openbot-logo-production), var(--openbot-logo-preview), var(--openbot-logo-dev), var(--download-ios-color) );
    transform-origin: top;
  }
  .teams-page [data-play="false"] .teams-timeline-fill {
    transform: scaleY(0);
  }
  .teams-page .teams-timeline-spark {
    top: 0;
    left: 50%;
    margin: -6px 0 0 -6px;
  }
  .teams-page .teams-timeline-spark::before {
    top: auto;
    right: auto;
    bottom: 50%;
    left: 50%;
    width: 2px;
    height: 120px;
    background: linear-gradient(180deg, transparent, var(--openbot-text-primary));
    translate: -50% 0;
  }
  .teams-page [data-play="true"] .teams-timeline-fill {
    animation-name: teams-timeline-fill-y;
  }
  .teams-page [data-play="true"] .teams-timeline-spark {
    animation-name: teams-timeline-spark-y;
  }
  .teams-page .teams-step {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: center;
    column-gap: 20px;
    text-align: left;
  }
  .teams-page .teams-step-node {
    grid-row: 1 / 3;
  }
  .teams-page .teams-step-number {
    align-self: end;
    margin: 0;
  }
  .teams-page .teams-step-title {
    align-self: start;
    max-width: none;
    margin: 4px 0 0;
  }
  .teams-page .teams-cursors {
    display: none;
  }
}
@keyframes teams-timeline-fill-y {
  from {
    transform: scaleY(0);
  }
}
@keyframes teams-timeline-spark-y {
  from {
    top: 0;
    opacity: 0;
  }
  6%, 94% {
    opacity: 1;
  }
  to {
    top: 100%;
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .teams-page .teams-pill::before, .teams-page .teams-pill::after, .teams-page .teams-pill-dots span, .teams-page .teams-pill-label, .teams-page .teams-section[data-revealed="true"] > *, .teams-page .teams-timeline *, .teams-page .teams-timeline *::after {
    animation: none;
  }
  .teams-page .teams-setup, .teams-page .teams-tile-art svg, .teams-page .teams-timeline * {
    transition: none;
  }
  .teams-page .teams-closing-action::before {
    transition: none;
  }
  .teams-page [data-revealed="true"] .teams-marquee-row, .teams-page .teams-closing[data-done="true"] .teams-closing-action::before {
    animation: none;
  }
  .teams-page .teams-marquee {
    mask-image: none;
  }
  .teams-page .teams-marquee-track {
    width: auto;
    animation: none;
  }
  .teams-page .teams-marquee-group {
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 16px;
  }
  .teams-page .teams-marquee-group + .teams-marquee-group, .teams-page .teams-marquee-group > :nth-child(n + 4) {
    display: none;
  }
  .teams-page .teams-marquee-row[data-row="1"] .teams-marquee-group > :nth-child(n + 3) {
    display: none;
  }
  .teams-page .teams-chip {
    white-space: normal;
  }
}
.post-main {
  padding: clamp(17px, 2.8vw, 34px) 0 clamp(50px, 6.3vw, 84px);
}
.post-container {
  width: min(100%, 1280px);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}
.post-meta {
  display: block;
  color: var(--openbot-text-dim);
  font-size: 13px;
  line-height: 1.4;
}
.post-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 7px;
}
.post-featured {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  margin-top: clamp(28px, 3.5vw, 50px);
}
.post-featured-copy {
  min-width: 0;
}
.post-featured-title {
  margin: 12px 0 0;
  font-size: clamp(30px, 3.4vw, 50px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.05;
  text-wrap: balance;
}
.post-featured-description {
  max-width: 46ch;
  margin: 16px 0 0;
  color: var(--openbot-text-muted);
  font-size: 15px;
  line-height: 1.6;
}
.post-featured-title a::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
}
.post-featured-action {
  position: relative;
  z-index: 2;
  margin-top: 26px;
}
.post-featured-art, .post-card-art, .post-article-art, .plugin-card-art, .plugin-prompts-card {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--openbot-border-strong);
  pointer-events: none;
}
.post-featured-art {
  aspect-ratio: 19 / 10;
  border-radius: 16px;
}
.post-card-art {
  aspect-ratio: 2 / 1;
  border-radius: 12px;
}
.post-article-art {
  aspect-ratio: 21 / 9;
  margin-top: clamp(28px, 3.5vw, 44px);
  border-radius: 14px;
}
.plugin-card-art {
  aspect-ratio: 4 / 3;
  border-radius: 12px;
}
.post-gradient {
  position: absolute;
  inset: 0;
  isolation: isolate;
  overflow: hidden;
  border-radius: inherit;
  background-position: center;
  background-size: cover;
}
.post-gradient > canvas {
  border-radius: inherit;
  opacity: 0;
  transition: opacity var(--openbot-duration-slow) var(--openbot-ease-out);
}
.post-gradient[data-shader="live"] > canvas {
  opacity: 1;
}
.post-featured-art-title, .post-card-art-title {
  position: relative;
  pointer-events: none;
  padding: clamp(18px, 2.6vw, 40px);
  color: var(--openbot-text-primary);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.12;
  text-align: center;
  text-wrap: balance;
}
.post-featured-art-title {
  font-size: clamp(24px, 3.2vw, 44px);
}
.post-card-art-title {
  font-size: clamp(15px, 1.4vw, 19px);
}
.post-grid-section {
  margin-top: clamp(56px, 7vw, 96px);
}
.post-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 26px);
}
.post-card {
  min-width: 0;
  display: block;
}
.post-card:focus-visible {
  border-radius: 24px;
  outline: 3px solid var(--openbot-border-focus);
  outline-offset: 4px;
}
.post-card .post-meta {
  margin-top: 14px;
}
.post-card-byline {
  row-gap: 1px;
}
.post-card-title {
  margin: 6px 0 0;
  color: var(--openbot-text-secondary);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.35;
  transition: color var(--openbot-duration-normal) ease;
}
.post-grid-section[data-revealed="false"] .post-card, .post-more[data-revealed="false"] .post-card {
  opacity: 0;
}
.post-grid-section[data-revealed="true"] .post-card, .post-more[data-revealed="true"] .post-card {
  animation: landing-download-reveal 720ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(var(--post-card-index, 0) * 80ms);
}
[data-enter="post-copy"], [data-enter="post-art"], [data-enter="post-prose"] {
  animation-name: landing-download-reveal;
  animation-duration: 720ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: backwards;
}
[data-enter="post-copy"] {
  animation-delay: 60ms;
}
[data-enter="post-art"] {
  animation-delay: 160ms;
}
[data-enter="post-prose"] {
  animation-delay: 260ms;
}
.post-article-body {
  max-width: 820px;
}
.post-article-header {
  margin-top: clamp(20px, 3vw, 36px);
}
.post-article-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--openbot-text-muted);
  font-size: 13px;
  transition: color var(--openbot-duration-normal) ease;
}
.post-article-back::before {
  content: "\2190";
}
.post-article-title {
  margin: 18px 0 0;
  font-size: clamp(32px, 4.2vw, 54px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.04;
  text-wrap: balance;
}
.post-article-standfirst {
  margin: 18px 0 0;
  color: var(--openbot-text-secondary);
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.55;
}
.post-article-byline {
  margin: 18px 0 0;
}
.post-prose {
  margin-top: clamp(32px, 4vw, 48px);
  color: var(--openbot-text-secondary);
  font-size: 17px;
  line-height: 1.7;
}
.post-prose p {
  margin: 0 0 20px;
}
.post-prose h2 {
  margin: 40px 0 14px;
  color: var(--openbot-text-primary);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.2;
}
.post-prose h3 {
  margin: 32px 0 12px;
  color: var(--openbot-text-primary);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.post-prose ul, .post-prose ol {
  margin: 0 0 20px;
  padding-left: 22px;
}
.post-prose ul {
  list-style: disc;
}
.post-prose ol {
  list-style: decimal;
}
.post-prose li {
  margin: 0 0 8px;
}
.post-prose strong {
  color: var(--openbot-text-primary);
  font-weight: 600;
}
.post-prose a {
  color: var(--openbot-accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.post-prose code {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--openbot-bg-surface);
  font-family: var(--openbot-font-mono);
  font-size: 0.9em;
}
.post-prose pre {
  margin: 0 0 24px;
  padding: 16px 18px;
  overflow-x: auto;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
  font-size: 14px;
  line-height: 1.6;
}
.post-prose pre code {
  padding: 0;
  border-radius: 0;
  background: none;
  font-size: inherit;
}
.post-prose kbd {
  padding: 2px 7px;
  border: 1px solid var(--openbot-border-strong);
  border-bottom-width: 2px;
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
  font-size: 0.85em;
}
.post-prose hr {
  margin: 40px 0;
  border: 0;
  border-top: 1px solid var(--openbot-border-strong);
}
.post-prose table {
  width: 100%;
  margin: 0 0 24px;
  border-collapse: collapse;
  font-size: 15px;
}
.post-prose th, .post-prose td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--openbot-border-strong);
  text-align: left;
  vertical-align: top;
}
.post-prose th {
  color: var(--openbot-text-primary);
  font-weight: 600;
}
.post-prose blockquote {
  margin: 24px 0;
  padding-left: 18px;
  border-left: 2px solid var(--openbot-border-strong);
  color: var(--openbot-text-muted);
}
.post-prose > :last-child {
  margin-bottom: 0;
}
.post-prose img, .post-prose video {
  max-width: 100%;
  height: auto;
}
.post-figure {
  margin: 32px 0;
}
.post-figure picture {
  display: block;
}
.post-media {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-surface);
}
.post-mount {
  position: relative;
  isolation: isolate;
  display: grid;
  overflow: hidden;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-card);
  padding: clamp(14px, 4.5%, 52px);
}
.post-mount[data-pad="tight"] {
  padding: clamp(12px, 3.5%, 36px);
}
.post-mount[data-pad="roomy"] {
  padding: clamp(22px, 7%, 72px);
}
.post-mount .post-media {
  position: relative;
  z-index: 1;
  border-color: var(--openbot-border);
  border-radius: 9px;
  box-shadow: var(--openbot-shadow-overlay);
}
.post-figure-caption {
  margin-top: 12px;
  color: var(--openbot-text-muted);
  font-size: 14px;
  line-height: 1.5;
}
.post-more {
  margin-top: clamp(64px, 8vw, 104px);
}
.post-more-title {
  margin: 0 0 clamp(22px, 2.6vw, 32px);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 600;
  letter-spacing: -0.035em;
}
.post-more[data-revealed="false"] .post-more-title {
  opacity: 0;
}
.post-more[data-revealed="true"] .post-more-title {
  animation: landing-download-reveal 720ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.agent-honeycomb {
  --agent-honeycomb-tile: 84px;
  --agent-honeycomb-gap: 6px;
  --agent-honeycomb-height: calc(var(--agent-honeycomb-tile) / 0.866);
  display: flex;
  flex: none;
  flex-direction: column;
}
.agent-honeycomb-row {
  display: flex;
  gap: var(--agent-honeycomb-gap);
}
.agent-honeycomb-row + .agent-honeycomb-row {
  margin-top: calc((var(--agent-honeycomb-tile) + var(--agent-honeycomb-gap)) * 0.866 - var(--agent-honeycomb-height));
}
.agent-honeycomb-row:nth-of-type(even) {
  translate: calc((var(--agent-honeycomb-tile) + var(--agent-honeycomb-gap)) / 2) 0;
}
.agent-honeycomb-cell {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: var(--agent-honeycomb-tile);
  height: var(--agent-honeycomb-height);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
@supports (clip-path: shape(from 0 0, line to 100% 100%)) {
  .agent-honeycomb-cell {
    clip-path: shape( from 55% 2.5%, line to 95% 22.5%, curve to 100% 30% with 100% 25%, line to 100% 70%, curve to 95% 77.5% with 100% 75%, line to 55% 97.5%, curve to 45% 97.5% with 50% 100%, line to 5% 77.5%, curve to 0% 70% with 0% 75%, line to 0% 30%, curve to 5% 22.5% with 0% 25%, line to 45% 2.5%, curve to 55% 2.5% with 50% 0%, close );
  }
}
.agent-honeycomb-art {
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  filter: grayscale(0.35);
}
.agent-honeycomb-cell > .agent-honeycomb-avatar {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--agent-honeycomb-height) * 1.75);
  height: calc(var(--agent-honeycomb-height) * 1.75);
  translate: -50% -50%;
}
.agent-honeycomb-cell > .agent-honeycomb-avatar > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  scale: 0.86 1;
}
.post-cta {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 620px;
  margin-top: clamp(64px, 8vw, 104px);
  overflow: hidden;
  text-align: center;
}
.post-cta-comb {
  position: absolute;
  inset: 0;
  overflow: hidden;
  mask-image: linear-gradient( var(--openbot-transparent), var(--openbot-mask-solid) 14%, var(--openbot-mask-solid) 86%, var(--openbot-transparent) );
}
.post-cta-comb > .agent-honeycomb {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: calc(-50% - (var(--agent-honeycomb-tile) + var(--agent-honeycomb-gap)) / 4) -50%;
}
.post-cta-veil {
  position: absolute;
  inset: 0;
  background: var(--openbot-bg-canvas);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-bg-canvas) 62%, var(--openbot-transparent));
  }
  backdrop-filter: blur(16px);
  mask-image: radial-gradient(720px 340px at 50% 50%, var(--openbot-mask-solid) 50%, var(--openbot-transparent) 100%);
  pointer-events: none;
}
.post-cta-copy {
  position: relative;
}
@media (min-width: 1920px) {
  .post-cta-comb {
    mask-image: linear-gradient( var(--openbot-transparent), var(--openbot-mask-solid) 14%, var(--openbot-mask-solid) 86%, var(--openbot-transparent) ), linear-gradient( 90deg, var(--openbot-transparent) calc(50% - 960px), var(--openbot-mask-solid) calc(50% - 810px), var(--openbot-mask-solid) calc(50% + 810px), var(--openbot-transparent) calc(50% + 960px) );
    mask-composite: intersect;
  }
}
@media (max-width: 760px) {
  .post-cta {
    min-height: 680px;
  }
  .post-cta-comb > .agent-honeycomb {
    --agent-honeycomb-tile: 60px;
    --agent-honeycomb-gap: 5px;
  }
  .post-cta-veil {
    mask-image: radial-gradient(340px 400px at 50% 50%, var(--openbot-mask-solid) 55%, var(--openbot-transparent) 100%);
  }
}
.post-cta-title {
  margin: 0;
  font-size: clamp(34px, 4.6vw, 56px);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 1.04;
  text-wrap: balance;
}
.post-cta-description {
  max-width: 580px;
  margin: 20px auto 0;
  color: var(--openbot-text-secondary);
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.55;
  text-wrap: pretty;
}
.post-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: clamp(28px, 3.5vw, 40px);
}
.post-cta[data-revealed="false"] .post-cta-title, .post-cta[data-revealed="false"] .post-cta-description, .post-cta[data-revealed="false"] .post-cta-actions {
  opacity: 0;
}
.post-cta[data-revealed="true"] .post-cta-title, .post-cta[data-revealed="true"] .post-cta-description, .post-cta[data-revealed="true"] .post-cta-actions {
  animation: landing-download-reveal 880ms cubic-bezier(0.4, 0.18, 0.28, 1) backwards;
}
.post-cta[data-revealed="true"] .post-cta-description {
  animation-delay: 170ms;
}
.post-cta[data-revealed="true"] .post-cta-actions {
  animation-delay: 340ms;
}
@media (max-width: 1080px) {
  .post-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .post-featured {
    grid-template-columns: minmax(0, 1fr);
  }
  .post-featured-art {
    order: -1;
  }
}
@media (max-width: 560px) {
  .post-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (hover: hover) and (pointer: fine) {
  .post-featured, .post-card {
    cursor: pointer;
  }
  .post-featured-art-title, .post-card-art-title {
    transform: scale(1);
    transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
    will-change: transform;
  }
  .post-card:hover .post-card-art-title {
    transform: scale(1.06);
  }
  .post-featured:hover .post-featured-art-title {
    transform: scale(1.04);
  }
  .post-card:hover .post-card-title, .post-article-back:hover {
    color: var(--openbot-text-primary);
  }
  .post-featured-title a:hover {
    color: var(--openbot-text-secondary);
  }
}
@media (prefers-reduced-motion: reduce) {
  .post-grid-section[data-revealed] .post-card, .post-more[data-revealed] .post-card, .post-more[data-revealed] .post-more-title {
    opacity: 1;
    animation: none;
  }
  [data-enter="post-copy"], [data-enter="post-art"], [data-enter="post-prose"], .post-cta[data-revealed] .post-cta-title, .post-cta[data-revealed] .post-cta-description, .post-cta[data-revealed] .post-cta-actions {
    opacity: 1;
    animation: none;
  }
  .post-card-art, .post-card-art-title, .post-featured-art-title {
    transition: none;
    transform: none;
  }
}
.reading-progress {
  --reading-accent: var(--openbot-logo-production);
  --reading-track: rgba(255, 255, 255, 0.1);
  --reading-glow: var(--reading-accent);
  @supports (color: color-mix(in lab, red, red)) {
    --reading-glow: color-mix(in srgb, var(--reading-accent) 60%, transparent);
  }
  --reading-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --reading-duration: 460ms;
  --reading-quick: 300ms;
  --reading-blur: 8px;
}
.reading-progress-line {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 60;
  height: 2px;
  background: linear-gradient(90deg, var(--reading-accent), var(--reading-accent));
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(90deg, color-mix(in srgb, var(--reading-accent) 25%, transparent), var(--reading-accent));
  }
  box-shadow: 0 0 12px var(--reading-glow);
  opacity: 0;
  pointer-events: none;
  transform: scaleX(var(--reading-progress, 0));
  transform-origin: left center;
  transition: opacity 240ms ease;
}
.reading-progress[data-visible="true"] .reading-progress-line {
  opacity: 1;
}
.reading-progress-rail {
  display: none;
}
@media (min-width: 1200px) {
  .reading-progress-line {
    display: none;
  }
  .reading-progress-rail {
    position: fixed;
    top: 50%;
    right: 12px;
    z-index: 30;
    width: 280px;
    height: min(64vh, 600px);
    display: flex;
    flex-direction: column;
    padding: 14px 0;
    opacity: 0;
    pointer-events: none;
    transform: translate(8px, -50%);
    transition: opacity 300ms ease, transform var(--reading-duration) var(--reading-ease);
  }
  .reading-progress[data-visible="true"] .reading-progress-rail, .reading-progress-rail:focus-within {
    opacity: 1;
    transform: translate(0, -50%);
  }
  .reading-progress-rail:hover, .reading-progress-rail:focus-within {
    pointer-events: auto;
  }
  .reading-progress-surface {
    position: absolute;
    inset: -64px -12px -64px -64px;
    background: linear-gradient( to left, var(--openbot-bg-canvas) 0%, var(--openbot-bg-canvas) 55%, transparent 100% );
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient( to left, var(--openbot-bg-canvas) 0%, color-mix(in srgb, var(--openbot-bg-canvas) 92%, transparent) 55%, transparent 100% );
    }
    mask-image: linear-gradient(to bottom, transparent, #000 64px, #000 calc(100% - 64px), transparent);
    opacity: 0;
    transition: opacity 200ms ease;
  }
  .reading-progress-eyebrow {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin: 0 0 12px;
    padding: 0 20px 0 18px;
    color: var(--openbot-text-dim);
    font-family: var(--openbot-font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 200ms ease;
  }
  .reading-progress-count {
    color: var(--reading-accent);
    font-variant-numeric: tabular-nums;
  }
  .reading-progress-list {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .reading-progress-item {
    flex-basis: 0;
    min-height: 22px;
    display: flex;
  }
  .reading-progress-link {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: 14px;
    padding-left: 18px;
    color: var(--openbot-text-muted);
    text-decoration: none;
    outline: none;
  }
  .reading-progress-item[data-state="read"] .reading-progress-link {
    color: var(--openbot-text-secondary);
  }
  .reading-progress-item[data-state="active"] .reading-progress-link, .reading-progress-link:hover, .reading-progress-link:focus-visible {
    color: var(--openbot-text-primary);
  }
  .reading-progress-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    margin-top: -3px;
    font-size: 12.5px;
    line-height: 18px;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0;
    filter: blur(var(--reading-blur));
    transform: translateX(8px);
    transition: color 200ms ease, opacity 200ms ease, filter 200ms ease, transform 240ms var(--reading-ease);
  }
  .reading-progress-link:focus-visible .reading-progress-label {
    text-decoration: underline;
    text-decoration-color: var(--reading-accent);
    text-underline-offset: 4px;
  }
  .reading-progress-bar {
    position: relative;
    width: 20px;
    flex: none;
    padding-bottom: 4px;
  }
  .reading-progress[data-visible="true"] .reading-progress-bar {
    pointer-events: auto;
  }
  .reading-progress-bar::before, .reading-progress-fill {
    content: "";
    position: absolute;
    top: 0;
    right: 9px;
    bottom: 4px;
    width: 2px;
    border-radius: 2px;
    transition: width 300ms var(--reading-ease), right 300ms var(--reading-ease), background-color 300ms ease;
  }
  .reading-progress-bar::before {
    background: var(--reading-track);
  }
  .reading-progress-fill {
    background: var(--reading-accent);
    transform: scaleY(var(--reading-fill, 0));
    transform-origin: top center;
  }
  .reading-progress-item[data-state="active"] .reading-progress-bar::before, .reading-progress-item[data-state="active"] .reading-progress-fill {
    right: 8.5px;
    width: 3px;
  }
  .reading-progress-item[data-state="active"] .reading-progress-fill {
    box-shadow: 0 0 10px var(--reading-glow);
  }
  .reading-progress-item[data-state="active"] .reading-progress-bar::after {
    content: "";
    position: absolute;
    top: calc((100% - 4px) * var(--reading-fill, 0));
    right: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--reading-accent);
    box-shadow: 0 0 0 3px var(--reading-accent), 0 0 12px var(--reading-glow);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--reading-accent) 18%, transparent), 0 0 12px var(--reading-glow);
    }
    transform: translateY(-50%);
  }
  .reading-progress-rail:hover .reading-progress-surface, .reading-progress-rail:focus-within .reading-progress-surface {
    opacity: 1;
    transition: opacity 240ms ease;
  }
  .reading-progress-rail:hover .reading-progress-eyebrow, .reading-progress-rail:focus-within .reading-progress-eyebrow {
    opacity: 1;
  }
  .reading-progress-rail:hover .reading-progress-label, .reading-progress-rail:focus-within .reading-progress-label {
    opacity: 1;
    filter: blur(0);
    transform: none;
    transition: color 200ms ease, opacity var(--reading-quick) ease calc(var(--reading-index, 0) * 18ms), filter var(--reading-quick) ease calc(var(--reading-index, 0) * 18ms), transform var(--reading-duration) var(--reading-ease) calc(var(--reading-index, 0) * 18ms);
  }
}
@media (prefers-reduced-motion: reduce) {
  .reading-progress[data-visible] .reading-progress-line, .reading-progress[data-visible] .reading-progress-rail, .reading-progress[data-visible] .reading-progress-rail *, .reading-progress[data-visible] .reading-progress-rail *::before, .reading-progress[data-visible] .reading-progress-rail *::after {
    transition: none;
  }
}
.post-article-body h2, .compare-article h2, .compare-roundup-list > li {
  scroll-margin-top: 32px;
}
.compare-page [data-side="openbot"] {
  --compare-accent: var(--openbot-logo-production);
}
.compare-page :is([data-side="rival"], [data-side="a"], [data-side="b"]) {
  --compare-accent: var(--openbot-text-muted);
}
.compare-article {
  width: min(100%, 1160px);
}
.compare-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  margin-top: clamp(20px, 3vw, 36px);
}
.compare-hero-copy {
  min-width: 0;
}
.compare-eyebrow {
  margin: 22px 0 0;
  color: var(--openbot-text-dim);
  font-family: var(--openbot-font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.compare-title {
  margin: 12px 0 0;
  font-size: clamp(32px, 4vw, 54px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.04;
  text-wrap: balance;
}
.compare-nowrap {
  white-space: nowrap;
}
.compare-standfirst {
  max-width: 48ch;
  margin: 18px 0 0;
  color: var(--openbot-text-secondary);
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.55;
}
.compare-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 7px;
  margin-top: 20px;
}
.compare-meta a, .compare-sources-note a {
  color: var(--openbot-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--openbot-duration-normal) ease;
}
.compare-stage {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 19 / 10;
  overflow: hidden;
  border: 1px solid var(--openbot-border-strong);
  border-radius: 16px;
  pointer-events: none;
  animation: compare-rise 720ms cubic-bezier(0.22, 1, 0.36, 1) 160ms backwards;
}
.compare-stage-art {
  animation: compare-fade 900ms cubic-bezier(0.22, 1, 0.36, 1) 160ms backwards;
}
.compare-marks {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: clamp(20px, 2.4vw, 32px) clamp(22px, 3vw, 40px);
  border-radius: 20px;
  background: rgba(14, 14, 18, 0.26);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
  animation: compare-plate-in 800ms cubic-bezier(0.22, 1, 0.36, 1) 320ms backwards;
}
.compare-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: clamp(96px, 9vw, 128px);
  color: var(--openbot-text-primary);
  animation: compare-mark-in 800ms cubic-bezier(0.22, 1, 0.36, 1) 420ms backwards;
}
.compare-mark:last-child {
  --compare-from: 10px;
}
.compare-mark-logo {
  width: clamp(44px, 5vw, 68px);
  height: clamp(44px, 5vw, 68px);
}
.compare-mark-rival {
  color: var(--openbot-text-primary);
}
.compare-mark-name {
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(13px, 1.1vw, 15px);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.compare-vs {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  gap: 8px;
  margin-inline: clamp(14px, 2.2vw, 32px);
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.compare-vs::before, .compare-vs::after {
  flex: 1;
  width: 1px;
  background: rgba(255, 255, 255, 0.2);
  content: "";
}
@keyframes compare-plate-in {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(0.98);
  }
}
@keyframes compare-mark-in {
  from {
    opacity: 0;
    transform: translate3d(var(--compare-from, -10px), 0, 0);
  }
}
@keyframes compare-rise {
  from {
    border-color: var(--openbot-transparent);
    transform: translate3d(0, 16px, 0);
  }
}
@keyframes compare-fade {
  from {
    opacity: 0;
  }
}
.compare-section {
  margin-top: clamp(56px, 7vw, 96px);
}
.compare-heading {
  margin: 0;
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.15;
  text-wrap: balance;
}
.compare-answer-text {
  max-width: 62ch;
  margin: 16px 0 0;
  color: var(--openbot-text-secondary);
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.55;
}
.compare-glance-summary {
  margin: 10px 0 0;
  color: var(--openbot-text-muted);
  font-size: 15px;
}
.compare-plans-lead {
  max-width: 62ch;
  margin: 14px 0 0;
  color: var(--openbot-text-secondary);
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.6;
}
.compare-plans-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.compare-plan:last-child:nth-child(3n + 1) {
  grid-column: 1 / -1;
}
.compare-plan:last-child:nth-child(3n + 2) {
  grid-column: span 2;
}
.compare-plan {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  column-gap: 14px;
  row-gap: 3px;
  padding: 16px 18px;
  border: 1px solid var(--openbot-border);
  border-radius: 14px;
  background: var(--openbot-bg-surface);
}
.compare-plan[data-highlighted] {
  border-color: var(--openbot-logo-production);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--openbot-logo-production) 34%, var(--openbot-border));
  }
  background: radial-gradient( 120% 90% at 0% 0%, var(--openbot-logo-production), var(--openbot-transparent) 62% ), var(--openbot-bg-surface);
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient( 120% 90% at 0% 0%, color-mix(in srgb, var(--openbot-logo-production) 10%, var(--openbot-transparent)), var(--openbot-transparent) 62% ), var(--openbot-bg-surface);
  }
}
.compare-plan-logo-frame {
  display: grid;
  grid-row: span 2;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.compare-plan-logo {
  width: 20px;
  height: 20px;
  overflow: visible;
  fill: var(--openbot-provider-current);
}
.compare-plan-logo-custom {
  fill: none;
  color: var(--openbot-text-primary);
}
.compare-plan-name {
  align-self: end;
  color: var(--openbot-text-primary);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.compare-plan-text {
  color: var(--openbot-text-muted);
  font-size: 13.5px;
  line-height: 1.45;
}
.compare-plans-rival {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 18px 0 0;
  color: var(--openbot-text-muted);
  font-size: 15px;
  line-height: 1.5;
}
.compare-plans-rival strong {
  color: var(--openbot-text-secondary);
  font-weight: 600;
}
.compare-plans-rival-logo {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 0.12em;
}
.compare-intro {
  max-width: 62ch;
  margin: clamp(56px, 7vw, 96px) auto 0;
  color: var(--openbot-text-secondary);
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.7;
  text-align: center;
  text-wrap: pretty;
}
.compare-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
  margin-top: 22px;
}
.compare-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: clamp(20px, 2.2vw, 28px);
  border: 1px solid var(--openbot-border);
  border-radius: 16px;
  background: radial-gradient( 120% 80% at 0% 0%, var(--compare-accent), var(--openbot-transparent) 60% ), var(--openbot-bg-surface);
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient( 120% 80% at 0% 0%, color-mix(in srgb, var(--compare-accent) 9%, var(--openbot-transparent)), var(--openbot-transparent) 60% ), var(--openbot-bg-surface);
  }
}
.compare-card[data-better] {
  border-color: var(--compare-accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--compare-accent) 34%, var(--openbot-border));
  }
  background: radial-gradient( 120% 90% at 0% 0%, var(--compare-accent), var(--openbot-transparent) 62% ), var(--openbot-bg-surface);
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient( 120% 90% at 0% 0%, color-mix(in srgb, var(--compare-accent) 16%, var(--openbot-transparent)), var(--openbot-transparent) 62% ), var(--openbot-bg-surface);
  }
}
.compare-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: clamp(20px, 2.2vw, 28px);
  width: 44px;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: var(--compare-accent);
  opacity: 0.8;
}
.compare-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 12px;
}
.compare-card-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.compare-side-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.compare-side-logo {
  width: 22px;
  height: 22px;
}
.compare-card-text {
  margin: 14px 0 0;
  color: var(--openbot-text-secondary);
  font-size: 15px;
  line-height: 1.65;
}
.compare-choice-list {
  display: grid;
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  color: var(--openbot-text-secondary);
  font-size: 15px;
  line-height: 1.5;
}
.compare-choice-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.compare-choice-check {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 0.15em;
  color: var(--openbot-success);
  stroke-width: 2.6;
}
.compare-choice-dot {
  flex: none;
  width: 6px;
  height: 6px;
  margin: 0.6em 5px 0;
  border-radius: 50%;
  background: var(--openbot-text-dim);
}
.compare-better-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 8px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-success) 14%, var(--openbot-transparent));
  }
  box-shadow: inset 0 0 0 1px var(--openbot-success);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--openbot-success) 30%, var(--openbot-transparent));
  }
  color: var(--openbot-success-text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
}
.compare-better-badge-icon {
  width: 13px;
  height: 13px;
  stroke-width: 2.8;
}
.compare-table-frame {
  margin-top: 22px;
  overflow-x: auto;
  border: 1px solid var(--openbot-border);
  border-radius: 16px;
  background: var(--openbot-bg-surface);
}
.compare-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
  text-align: left;
}
.compare-table th, .compare-table td {
  padding: 16px clamp(14px, 1.8vw, 22px);
  vertical-align: top;
}
.compare-table thead th {
  border-bottom: 1px solid var(--openbot-border-strong);
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-primary);
  font-size: 14px;
  font-weight: 600;
}
.compare-table thead th:first-child {
  width: 24%;
}
.compare-table-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.compare-table-logo {
  width: 22px;
  height: 22px;
}
.compare-table thead th[data-side="openbot"] {
  box-shadow: inset 0 2px 0 var(--compare-accent);
}
.compare-table [data-side="openbot"] {
  background: var(--compare-accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--compare-accent) 5%, var(--openbot-transparent));
  }
}
.compare-table td[data-better] {
  color: var(--openbot-text-primary);
}
.compare-better-mark {
  display: grid;
  float: left;
  place-items: center;
  width: 20px;
  height: 20px;
  margin: 1px 9px 0 0;
  border-radius: 50%;
  background: var(--openbot-success);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-success) 18%, var(--openbot-transparent));
  }
  color: var(--openbot-success);
}
.compare-better-icon {
  width: 12px;
  height: 12px;
  stroke-width: 3;
}
.compare-table tbody tr + tr {
  border-top: 1px solid var(--openbot-border);
}
.compare-table tbody th {
  color: var(--openbot-text-primary);
  font-weight: 500;
}
.compare-table td {
  color: var(--openbot-text-secondary);
}
.compare-topic {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
}
.compare-topic-icon {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--openbot-text-muted);
}
.compare-faq-list {
  interpolate-size: allow-keywords;
  margin-top: 18px;
  border-top: 1px solid var(--openbot-border);
}
.compare-faq-item {
  border-bottom: 1px solid var(--openbot-border);
}
.compare-faq-item::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size var(--openbot-duration-normal) var(--openbot-ease-out), content-visibility var(--openbot-duration-normal) allow-discrete;
}
.compare-faq-item[open]::details-content {
  block-size: auto;
}
.compare-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 2px;
  cursor: pointer;
  color: var(--openbot-text-primary);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.015em;
  list-style: none;
}
.compare-faq-question::-webkit-details-marker {
  display: none;
}
.compare-faq-question:focus-visible {
  border-radius: 8px;
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}
.compare-faq-chevron {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--openbot-text-muted);
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.compare-faq-item[open] .compare-faq-chevron {
  transform: rotate(180deg);
}
.compare-faq-answer {
  max-width: 70ch;
  margin: 0;
  padding: 0 2px 20px;
  color: var(--openbot-text-secondary);
  font-size: 15px;
  line-height: 1.65;
}
.landing-faq-body .compare-faq-list {
  margin-top: 0;
}
.landing-faq-body .compare-faq-question {
  padding: 24px 2px;
  font-size: 18px;
}
.landing-faq-body .compare-faq-answer {
  padding-bottom: 24px;
  font-size: 16px;
}
.compare-sources-note {
  max-width: 68ch;
  margin: 14px 0 0;
  color: var(--openbot-text-muted);
  font-size: 14px;
  line-height: 1.6;
}
.compare-sources-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 24px;
  margin: 18px 0 0;
  padding: 0;
}
.compare-sources-list a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--openbot-text-secondary);
  font-size: 14px;
  transition: color var(--openbot-duration-normal) ease;
}
.compare-sources-icon {
  width: 14px;
  height: 14px;
  color: var(--openbot-text-dim);
}
.compare-roundup-disclosure {
  max-width: 62ch;
  margin: 12px 0 0;
  color: var(--openbot-text-muted);
  font-size: 14px;
  line-height: 1.6;
}
.compare-roundup-table {
  min-width: 880px;
}
.compare-roundup-table thead th:first-child {
  width: 16%;
}
.compare-roundup-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.compare-roundup-rank {
  color: var(--openbot-text-muted);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.compare-roundup-best {
  margin: 10px 0 0;
  color: var(--openbot-text-primary);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
}
.compare-roundup-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.compare-roundup-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--openbot-logo-production);
  font-size: 14px;
  font-weight: 500;
}
.compare-roundup-link-icon {
  width: 14px;
  height: 14px;
  transition: transform var(--openbot-duration-normal) ease;
}
.compare-bench-table tr[data-agent="claude-code"] {
  --compare-bench-fill: var(--openbot-chart-storage-files);
}
.compare-bench-table tr[data-agent="codex"] {
  --compare-bench-fill: var(--openbot-chart-storage-workspaces);
}
.compare-bench-table tr[data-agent="devin"] {
  --compare-bench-fill: var(--openbot-chart-storage-chats);
}
.compare-bench-table tr[data-agent="antigravity"] {
  --compare-bench-fill: var(--openbot-chart-storage-downloads);
}
.compare-bench-takeaway {
  max-width: 62ch;
  margin: 14px 0 0;
  color: var(--openbot-text-secondary);
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.6;
}
.compare-bench-table {
  min-width: 680px;
}
.compare-bench-table thead th:first-child {
  width: 34%;
}
.compare-bench-table td, .compare-bench-table th {
  vertical-align: middle;
}
.compare-bench-hint {
  display: block;
  color: var(--openbot-text-dim);
  font-size: 12px;
  font-weight: 400;
}
.compare-bench-agent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.compare-bench-agent .compare-table-logo {
  flex: none;
  margin-top: 1px;
  color: var(--openbot-text-primary);
}
.compare-bench-name {
  display: block;
  color: var(--openbot-text-primary);
  font-weight: 600;
}
.compare-bench-model, .compare-bench-note {
  display: block;
  color: var(--openbot-text-muted);
  font-size: 13px;
  font-weight: 400;
}
.compare-bench-note {
  color: var(--openbot-text-dim);
}
.compare-bench-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}
.compare-bench-bar {
  flex: none;
  width: calc(var(--compare-bench-share) * (100% - 64px));
  min-width: 2px;
  height: 14px;
  border-radius: 0 4px 4px 0;
  background: var(--compare-bench-fill);
}
.compare-bench-value {
  flex: none;
  color: var(--openbot-text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.compare-bench-credit {
  max-width: 68ch;
  margin: 14px 0 0;
  color: var(--openbot-text-muted);
  font-size: 14px;
  line-height: 1.6;
}
.compare-bench-credit a {
  color: var(--openbot-text-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.compare-section[data-revealed="false"] > *, .compare-section[data-revealed="false"] .compare-table tbody tr, .compare-section[data-revealed="false"] .compare-plan, .compare-section[data-revealed="false"] .compare-roundup-list > li, .compare-section[data-revealed="false"] .compare-faq-item {
  opacity: 0;
}
.compare-section[data-revealed="true"] > * {
  animation: landing-download-reveal 720ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.compare-section[data-revealed="true"] > :nth-child(2) {
  animation-delay: 90ms;
}
.compare-section[data-revealed="true"] > :nth-child(n + 3) {
  animation-delay: 180ms;
}
.compare-section[data-revealed="true"] .compare-pair > :nth-child(2) {
  animation: landing-download-reveal 720ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: 200ms;
}
.compare-section[data-revealed="true"] .compare-table tbody tr, .compare-section[data-revealed="true"] .compare-plan, .compare-section[data-revealed="true"] .compare-roundup-list > li, .compare-section[data-revealed="true"] .compare-faq-item {
  animation: landing-download-reveal 620ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(160ms + var(--compare-index, 0) * 70ms);
}
.compare-index-hero {
  position: relative;
  isolation: isolate;
  padding: clamp(28px, 5vw, 72px) 0 clamp(8px, 2vw, 24px);
  text-align: center;
}
.compare-index-hero .landing-hero-grid {
  z-index: -1;
}
.compare-index-hero .compare-eyebrow {
  margin-top: 0;
}
.compare-index-title {
  margin: 12px 0 0;
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1.02;
}
.compare-index-description {
  max-width: 56ch;
  margin: 18px auto 0;
  color: var(--openbot-text-secondary);
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.55;
}
.compare-index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 560px));
  justify-content: center;
  gap: clamp(18px, 2vw, 26px);
  margin-top: clamp(32px, 4vw, 56px);
}
.compare-index-card {
  display: block;
  min-width: 0;
}
.compare-index-card:focus-visible {
  border-radius: 20px;
  outline: 3px solid var(--openbot-border-focus);
  outline-offset: 4px;
}
.compare-index-art {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 19 / 10;
  overflow: hidden;
  border: 1px solid var(--openbot-border-strong);
  border-radius: 14px;
  pointer-events: none;
}
.compare-marks-small {
  padding: clamp(16px, 1.8vw, 24px) clamp(18px, 2.2vw, 28px);
  border-radius: 16px;
}
.compare-marks-small .compare-mark {
  min-width: clamp(56px, 6vw, 80px);
}
.compare-marks-small .compare-vs {
  margin-inline: clamp(10px, 1.6vw, 22px);
}
.compare-marks-small .compare-mark-logo {
  width: clamp(32px, 3.4vw, 44px);
  height: clamp(32px, 3.4vw, 44px);
}
.compare-mark-row {
  grid-template-columns: repeat(7, auto);
  gap: clamp(10px, 1.6vw, 20px);
}
.compare-mark-row .compare-mark {
  --compare-from: 0px;
  min-width: 0;
}
.compare-mark-row .compare-mark-logo {
  width: clamp(26px, 3.2vw, 44px);
  height: clamp(26px, 3.2vw, 44px);
}
.compare-mark-row.compare-marks-small {
  gap: clamp(8px, 1vw, 12px);
}
.compare-mark-row.compare-marks-small .compare-mark-logo {
  width: clamp(20px, 2vw, 26px);
  height: clamp(20px, 2vw, 26px);
}
.compare-index-copy {
  padding: 16px 2px 0;
}
.compare-index-card-title {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: clamp(18px, 1.7vw, 22px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.25;
}
.compare-index-card-description {
  margin: 8px 0 0;
  color: var(--openbot-text-muted);
  font-size: 15px;
  line-height: 1.55;
}
.compare-index-card-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  color: var(--openbot-text-secondary);
  font-size: 14px;
  font-weight: 500;
}
.compare-index-card-arrow {
  width: 15px;
  height: 15px;
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.compare-index-grid[data-revealed="false"] .compare-index-card :is(.post-gradient, .compare-marks), .compare-index-grid[data-revealed="false"] .compare-index-copy {
  opacity: 0;
}
.compare-index-grid[data-revealed="true"] .compare-index-card {
  --compare-delay: calc(160ms + var(--compare-index, 0) * 80ms);
  animation: compare-rise 720ms cubic-bezier(0.22, 1, 0.36, 1) var(--compare-delay) backwards;
}
.compare-index-grid[data-revealed="true"] .compare-index-card :is(.post-gradient, .compare-marks), .compare-index-grid[data-revealed="true"] .compare-index-copy {
  animation: compare-fade 720ms cubic-bezier(0.22, 1, 0.36, 1) var(--compare-delay) backwards;
}
@media (max-width: 900px) {
  .compare-hero {
    grid-template-columns: minmax(0, 1fr);
  }
  .compare-plans-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .compare-plan:last-child:is(:nth-child(3n + 1), :nth-child(3n + 2)) {
    grid-column: auto;
  }
  .compare-plan:last-child:nth-child(2n + 1) {
    grid-column: 1 / -1;
  }
}
@media (max-width: 640px) {
  .compare-plans-grid {
    gap: 10px;
  }
  .compare-plan {
    grid-template-columns: minmax(0, 1fr);
    padding: 14px;
  }
  .compare-plan-logo-frame {
    grid-row: auto;
    margin-bottom: 10px;
  }
  .compare-pair, .compare-sources-list, .compare-index-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .compare-table {
    display: block;
    min-width: 0;
    font-size: 14px;
  }
  .compare-table thead, .compare-table tbody {
    display: block;
  }
  .compare-table tr {
    display: grid;
    grid-template-columns: var(--compare-table-columns, repeat(2, minmax(0, 1fr)));
  }
  .compare-table thead th:first-child {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    padding: 0;
  }
  .compare-table th, .compare-table td {
    padding: 12px 14px;
  }
  .compare-table tbody th {
    grid-column: 1 / -1;
    padding-bottom: 2px;
  }
  .compare-table td {
    padding-top: 6px;
  }
  .compare-mark {
    min-width: 0;
    gap: 8px;
  }
  .compare-bench-table {
    --compare-table-columns: repeat(3, minmax(0, 1fr));
  }
  .compare-bench-table thead th {
    font-size: 13px;
  }
  .compare-bench-cell {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 6px;
  }
  .compare-bench-bar {
    width: calc(var(--compare-bench-share) * 100%);
  }
  .compare-roundup-table, .compare-roundup-table :is(thead, tbody, tr) {
    display: revert;
  }
  .compare-roundup-table {
    min-width: 720px;
  }
  .compare-roundup-table thead th:first-child {
    position: static;
    width: 16%;
    height: auto;
    overflow: visible;
    clip-path: none;
    padding: 12px 14px;
  }
  .compare-roundup-table tbody th {
    padding-bottom: 12px;
  }
  .compare-roundup-list {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (hover: hover) and (pointer: fine) {
  .compare-meta a:hover, .compare-sources-note a:hover, .compare-sources-list a:hover {
    color: var(--openbot-text-primary);
  }
  .compare-faq-question:hover .compare-faq-chevron {
    color: var(--openbot-text-primary);
  }
  .compare-roundup-links a:hover .compare-roundup-link-icon {
    transform: translateX(2px);
  }
  .compare-index-card:hover .compare-index-card-arrow {
    transform: translateX(3px);
  }
  .compare-index-card:hover .compare-index-card-title {
    color: var(--openbot-text-secondary);
  }
}
@media (prefers-reduced-motion: reduce) {
  .compare-stage, .compare-stage-art, .compare-marks, .compare-mark, .compare-section[data-revealed] > *, .compare-section[data-revealed] .compare-pair > :nth-child(n), .compare-section[data-revealed] .compare-table tbody tr, .compare-section[data-revealed] .compare-plan, .compare-section[data-revealed] .compare-roundup-list > li, .compare-section[data-revealed] .compare-faq-item, .compare-index-grid[data-revealed] .compare-index-card, .compare-index-grid[data-revealed] .compare-index-card :is(.post-gradient, .compare-marks), .compare-index-grid[data-revealed] .compare-index-copy {
    opacity: 1;
    animation: none;
  }
  .compare-faq-item::details-content, .compare-faq-chevron, .compare-roundup-link-icon, .compare-index-card-arrow {
    transition: none;
  }
}
.provider-mark-frame {
  display: grid;
  place-items: center;
}
.provider-mark-logo {
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: var(--openbot-provider-current);
}
.provider-mark-custom {
  width: 78%;
  height: 78%;
  fill: none;
  color: var(--openbot-text-primary);
}
.compare-page :is(.provider-step-text, .provider-table td) code {
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
  font-size: 0.88em;
}
.provider-steps {
  display: grid;
  gap: 12px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: provider-step;
}
.provider-step {
  position: relative;
  padding: 18px 20px 18px 64px;
  border: 1px solid var(--openbot-border);
  border-radius: 14px;
  background: var(--openbot-bg-surface);
  counter-increment: provider-step;
}
.provider-step::before {
  position: absolute;
  top: 18px;
  left: 20px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--openbot-logo-production);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-logo-production) 16%, var(--openbot-transparent));
  }
  color: var(--openbot-text-primary);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  content: counter(provider-step);
}
.provider-step-title {
  margin: 3px 0 0;
  color: var(--openbot-text-primary);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.provider-step-text {
  max-width: 68ch;
  margin: 8px 0 0;
  color: var(--openbot-text-secondary);
  font-size: 15px;
  line-height: 1.6;
}
.provider-step-links, .provider-related-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.provider-step-links a, .provider-related-list a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--openbot-logo-production);
  font-size: 14px;
  font-weight: 500;
}
.provider-related-list {
  flex-direction: column;
  margin-top: 18px;
}
.provider-related-list a {
  display: inline;
  font-size: 15px;
}
.provider-related-arrow {
  display: inline-block;
  margin-left: 6px;
  vertical-align: -2px;
}
.provider-step-arrow {
  width: 14px;
  height: 14px;
  transition: transform var(--openbot-duration-normal) ease;
}
.provider-adds-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.provider-add {
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid var(--openbot-border);
  border-radius: 14px;
  background: var(--openbot-bg-surface);
}
.provider-add:first-child {
  border-color: var(--openbot-logo-production);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--openbot-logo-production) 34%, var(--openbot-border));
  }
  background: radial-gradient( 120% 90% at 0% 0%, var(--openbot-logo-production), var(--openbot-transparent) 62% ), var(--openbot-bg-surface);
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient( 120% 90% at 0% 0%, color-mix(in srgb, var(--openbot-logo-production) 10%, var(--openbot-transparent)), var(--openbot-transparent) 62% ), var(--openbot-bg-surface);
  }
}
.provider-add-icon {
  width: 22px;
  height: 22px;
  color: var(--openbot-text-primary);
}
.provider-add-title {
  margin: 14px 0 0;
  color: var(--openbot-text-primary);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.provider-add-text {
  margin: 6px 0 0;
  color: var(--openbot-text-muted);
  font-size: 14px;
  line-height: 1.55;
}
@media (min-width: 641px) {
  .provider-table thead th:is(:first-child, :nth-child(2)) {
    width: 26%;
  }
}
.compare-section[data-revealed="false"] :is(.provider-step, .provider-add) {
  opacity: 0;
}
.compare-section[data-revealed="true"] .provider-step, .compare-section[data-revealed="true"] .provider-add {
  animation: landing-download-reveal 620ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(160ms + var(--compare-index, 0) * 70ms);
}
.provider-step:nth-child(2) {
  --compare-index: 1;
}
.provider-step:nth-child(3) {
  --compare-index: 2;
}
@media (max-width: 900px) {
  .provider-adds-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .provider-adds-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .provider-step {
    padding: 16px 16px 16px 56px;
  }
  .provider-step::before {
    top: 16px;
    left: 16px;
  }
}
@media (hover: hover) and (pointer: fine) {
  .provider-step-links a:hover .provider-step-arrow, .provider-related-list a:hover .provider-step-arrow {
    transform: translateX(3px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .compare-section[data-revealed] .provider-step, .compare-section[data-revealed] .provider-add {
    opacity: 1;
    animation: none;
  }
  .provider-step-arrow {
    transition: none;
  }
}
.plugin-intro {
  margin-top: clamp(28px, 3.5vw, 50px);
}
.plugin-intro-title {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: clamp(30px, 3.4vw, 40px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.plugin-grid-section {
  margin-top: clamp(32px, 4vw, 48px);
}
.plugin-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 26px);
}
.plugin-card {
  display: block;
  min-width: 0;
  text-decoration: none;
}
.plugin-card:focus-visible {
  border-radius: 24px;
  outline: 3px solid var(--openbot-border-focus);
  outline-offset: 4px;
}
.plugin-logo {
  position: relative;
  pointer-events: none;
  color: var(--openbot-text-primary);
  filter: drop-shadow(0 1px 6px rgb(0 0 0 / 35%));
}
.plugin-card-logo {
  width: auto;
  max-width: 58%;
  height: 20%;
}
.plugin-card-logo.plugin-logo-upright {
  height: 34%;
}
.plugin-card-icon {
  position: relative;
  height: 40%;
  border-radius: var(--openbot-radius-logo);
  box-shadow: 0 2px 12px rgb(0 0 0 / 35%);
  pointer-events: none;
}
.plugin-logo-letter {
  display: grid;
  place-items: center;
  font-size: clamp(34px, 3.8vw, 48px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}
.plugin-card-meta, .plugin-card-headline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.plugin-card-meta {
  margin-top: 14px;
  color: var(--openbot-text-dim);
  font-size: 12px;
}
.plugin-card-version {
  flex: none;
  letter-spacing: var(--openbot-tracking-wide);
}
.plugin-card-publisher, .plugin-card-tagline {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.plugin-card-tagline {
  text-align: right;
}
.plugin-filters {
  margin-inline: 0;
  border: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: clamp(20px, 2.4vw, 30px);
}
.plugin-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.plugin-tag {
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface);
  padding: 5px 11px;
  color: var(--openbot-text-dim);
  font-size: 12px;
  letter-spacing: var(--openbot-tracking-wide);
  line-height: 1.2;
  white-space: nowrap;
}
.plugin-tag-button {
  height: 38px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
  background: transparent;
  padding: 0 17px;
  color: var(--openbot-text-secondary);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--openbot-tracking-wide);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--openbot-duration-normal) ease, background-color var(--openbot-duration-normal) ease, color var(--openbot-duration-normal) ease, transform var(--openbot-duration-fast) var(--openbot-ease-out);
}
.plugin-tag-button[aria-pressed="true"] {
  border-color: var(--openbot-surface-light);
  background: var(--openbot-surface-light);
  color: var(--openbot-text-on-light);
}
.plugin-tag-button:active {
  transform: scale(0.97);
}
.plugin-tag-button:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--openbot-accent-strong);
}
.plugin-empty {
  margin: 0;
  color: var(--openbot-text-dim);
  font-size: 14px;
}
.plugin-card-headline {
  margin-top: 5px;
}
.plugin-card-title {
  flex: none;
  color: var(--openbot-text-secondary);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.35;
  transition: color var(--openbot-duration-normal) ease;
}
.plugin-card-tagline {
  color: var(--openbot-text-dim);
  font-size: 13px;
}
.plugin-grid-section[data-revealed="false"] .plugin-card {
  opacity: 0;
}
.plugin-grid-section[data-revealed="true"] .plugin-card {
  animation: landing-download-reveal 720ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(var(--plugin-card-index, 0) * 80ms);
}
.plugin-hero-logo {
  width: auto;
  max-width: 44%;
  height: 26%;
}
.plugin-hero-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
  margin-top: 18px;
}
.plugin-hero-row .post-article-title {
  min-width: 0;
  margin-top: 0;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.1;
}
.plugin-hero-heading {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 20px);
  min-width: 0;
}
.plugin-hero-text {
  min-width: 0;
}
.plugin-hero-standfirst {
  margin-top: 4px;
  font-size: clamp(14px, 1.3vw, 16px);
  line-height: 1.4;
}
.plugin-hero-mark {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: clamp(56px, 6vw, 76px);
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--openbot-glass-border);
  border-radius: var(--openbot-radius-logo);
  background: var(--openbot-glass-surface);
  pointer-events: none;
}
.plugin-hero-mark-icon {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.plugin-hero-mark:has(.plugin-hero-mark-icon) {
  border-color: transparent;
  background: none;
}
.plugin-hero-mark-logo {
  width: auto;
  max-width: 64%;
  height: 32%;
}
.plugin-actions-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}
.plugin-dialog {
  width: min(380px, calc(100vw - 32px));
  margin: auto;
  padding: 22px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-sidebar);
  box-shadow: var(--openbot-shadow-overlay);
  color: var(--openbot-text-primary);
  animation: plugin-dialog-enter var(--openbot-duration-overlay) var(--openbot-ease-out) both;
}
@keyframes plugin-dialog-enter {
  from {
    opacity: 0;
    transform: scale(0.97) translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.plugin-dialog::backdrop {
  background: var(--openbot-dialog-overlay);
  backdrop-filter: blur(6px);
}
.plugin-dialog-title {
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
}
.plugin-dialog-copy {
  margin: 8px 0 0;
  color: var(--openbot-text-dim);
  font-size: 14px;
  line-height: 1.55;
}
.plugin-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}
.plugin-dialog-dismiss {
  margin: 0;
  padding: 6px 10px;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  background: none;
  color: var(--openbot-text-dim);
  font: inherit;
  font-size: 13px;
  transition: color var(--openbot-duration-fast) ease;
}
.plugin-dialog-dismiss:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--openbot-accent-strong);
}
.plugin-body {
  margin-top: clamp(32px, 4vw, 48px);
}
.plugin-description {
  margin: 0;
  color: var(--openbot-text-readable);
  font-size: 17px;
  line-height: 1.7;
}
.plugin-section {
  margin-top: clamp(32px, 4vw, 48px);
}
@property --agent-share-accent {
  syntax: "<color>";
  inherits: true;
  initial-value: #8a8f98;
}
.agent-share-page {
  transition: --agent-share-accent 600ms ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--openbot-bg-canvas);
}
.agent-share-main {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: clamp(12px, 3vh, 40px) 16px 24px;
}
.agent-share-card {
  position: relative;
  z-index: 1;
  width: min(100%, 520px);
  overflow: hidden;
  border: 1px solid var(--openbot-glass-border);
  border-radius: 28px;
  background: var(--openbot-bg-surface);
  box-shadow: 0 40px 120px -40px var(--agent-share-accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 40px 120px -40px color-mix(in srgb, var(--agent-share-accent) 45%, transparent);
  }
}
.agent-share-hero {
  position: relative;
  display: grid;
  place-items: center;
  height: clamp(160px, 26vh, 236px);
  overflow: hidden;
  background: radial-gradient(70% 90% at 18% 0%, var(--agent-share-accent), transparent 70%), radial-gradient( 60% 80% at 85% 100%, var(--agent-share-accent), transparent 70% ), radial-gradient(45% 60% at 50% 55%, var(--agent-share-accent), transparent 75%), linear-gradient( 160deg, var(--agent-share-accent), var(--agent-share-accent) );
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient(70% 90% at 18% 0%, color-mix(in srgb, var(--agent-share-accent) 30%, transparent), transparent 70%), radial-gradient( 60% 80% at 85% 100%, color-mix(in srgb, var(--agent-share-accent) 55%, transparent), transparent 70% ), radial-gradient(45% 60% at 50% 55%, color-mix(in srgb, var(--agent-share-accent) 40%, transparent), transparent 75%), linear-gradient( 160deg, color-mix(in srgb, var(--agent-share-accent) 18%, #101012), color-mix(in srgb, var(--agent-share-accent) 34%, #141416) );
  }
}
.agent-share-hero::after {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  content: "";
  mix-blend-mode: overlay;
  opacity: 0.35;
  pointer-events: none;
}
.agent-share-hero .agent-share-avatar {
  --agent-share-avatar-size: clamp(100px, 16vh, 140px);
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--agent-share-avatar-size);
  height: var(--agent-share-avatar-size);
  border-radius: var(--openbot-radius-pill);
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.35));
}
.agent-share-hero .agent-share-avatar > svg {
  display: block;
  width: 128%;
  height: 128%;
  overflow: visible;
  translate: 0 calc(var(--agent-share-avatar-size) * -0.14);
}
.agent-share-hero .agent-share-avatar.agent-avatar-custom {
  overflow: hidden;
  box-shadow: 0 0 0 4px color-mix(in srgb, #ffffff 12%, transparent);
}
.agent-share-hero .agent-share-avatar.agent-avatar-custom img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.agent-share-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 22px clamp(20px, 5vw, 40px) 26px;
  text-align: center;
}
.agent-share-name {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: clamp(26px, 4vw, 30px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.agent-share-creator {
  margin: 4px 0 0;
  color: var(--openbot-text-secondary);
  font-size: 15px;
}
.agent-share-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.agent-share-tags > li {
  padding: 3px 10px;
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-secondary);
  font-size: 12px;
}
.agent-share-description {
  display: -webkit-box;
  margin: 14px 0 0;
  overflow: hidden;
  color: var(--openbot-text-secondary);
  font-size: 16px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
.agent-share-instructions {
  width: 100%;
  margin: 14px 0 0;
  color: var(--openbot-text-secondary);
  font-size: 16px;
  line-height: 1.55;
  text-align: start;
  overflow-wrap: anywhere;
}
.agent-share-instructions > :not(:first-child) {
  margin-top: 12px;
}
.agent-share-instructions-text {
  white-space: pre-wrap;
}
.agent-share-instructions .message-markdown-heading {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
}
.agent-share-instructions .message-markdown-heading:is([data-level="1"], [data-level="2"]) {
  font-size: 19px;
}
.agent-share-instructions * + .message-markdown-heading {
  margin-top: 20px;
}
.agent-share-instructions :is(ul, ol) {
  padding-left: 22px;
}
.agent-share-instructions ul {
  list-style: disc;
}
.agent-share-instructions ul ul {
  list-style: circle;
}
.agent-share-instructions ol {
  list-style: decimal;
}
.agent-share-instructions li + li, .agent-share-instructions li > :is(ul, ol) {
  margin-top: 4px;
}
.agent-share-instructions strong {
  color: var(--openbot-text-primary);
  font-weight: 600;
}
.agent-share-instructions code {
  font-family: var(--openbot-font-mono);
  font-size: 0.9em;
}
.agent-share-instructions .message-link {
  color: var(--openbot-text-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.agent-share-instructions .message-link-icon {
  position: relative;
  display: inline-flex;
  width: 14px;
  height: 14px;
  margin-right: 4px;
  vertical-align: -2px;
}
.agent-share-instructions .message-link-icon :is(svg, img) {
  position: absolute;
  inset: 0;
  width: 14px;
  height: 14px;
}
.agent-share-more {
  margin-top: 4px;
  padding: 2px 8px;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: none;
  color: var(--openbot-text-muted);
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.agent-share-more:hover {
  color: var(--openbot-text-primary);
}
.agent-share-divider {
  width: 100%;
  height: 1px;
  margin: 18px 0 0;
  border: 0;
  background: var(--openbot-border-grouped);
}
.agent-share-notice {
  margin: 12px 0 0;
  color: var(--openbot-text-dim);
  font-size: 12px;
  line-height: 1.5;
}
.agent-share-action {
  margin-top: 14px;
}
.agent-share-action .plugin-actions-row {
  justify-content: center;
}
.agent-share-fallback {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: 14px;
  text-align: center;
}
.agent-share-fallback a {
  color: var(--openbot-text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.plugin-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  color: var(--openbot-text-primary);
  font-size: 15px;
  font-weight: 500;
}
.plugin-section-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding-inline: 6px;
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-glass-surface);
  color: var(--openbot-text-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.plugin-prompts-card {
  border-radius: 14px;
  padding: clamp(16px, 2.4vw, 24px);
}
.plugin-prompts {
  position: relative;
  pointer-events: auto;
  width: min(100%, 520px);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.plugin-rows {
  overflow: hidden;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-surface);
}
.plugin-prompt {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-canvas);
  padding: 12px;
  color: var(--openbot-text-secondary);
  font-size: 15px;
  line-height: 1.5;
}
.plugin-prompt-chip {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-glass-surface);
  padding: 3px 10px 3px 6px;
  color: var(--openbot-text-primary);
  font-size: 13px;
}
.plugin-prompt-mark {
  width: auto;
  max-width: 56px;
  height: 14px;
  font-size: 12px;
  filter: none;
}
.plugin-prompt-text {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.plugin-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px 14px;
  color: var(--openbot-text-secondary);
  font-size: 14px;
  line-height: 1.55;
}
.plugin-rows > .plugin-row + .plugin-row {
  border-top: 1px solid var(--openbot-border-strong);
}
.plugin-row-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 32px;
  height: 32px;
  overflow: hidden;
  border: 1px solid var(--openbot-glass-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-glass-surface);
  padding: 5px;
  color: var(--openbot-accent-text);
}
.plugin-row-icon svg {
  width: 16px;
  height: 16px;
}
.plugin-icon {
  display: block;
  aspect-ratio: 1;
  object-fit: cover;
}
.plugin-row-icon .plugin-icon {
  width: 100%;
  height: 100%;
}
.plugin-row-icon:has(.plugin-icon) {
  border-color: transparent;
  background: none;
  padding: 0;
}
.plugin-prompt-icon {
  width: 14px;
  height: 14px;
  border-radius: 4px;
}
.plugin-row-text {
  min-width: 0;
}
.plugin-row-title {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: 14px;
  font-weight: 500;
}
.plugin-row-copy {
  margin: 2px 0 0;
  color: var(--openbot-text-dim);
  font-size: 13px;
  line-height: 1.55;
}
.plugin-facts {
  margin: 0;
  display: grid;
  gap: 0;
}
.plugin-fact {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 16px;
  padding: 11px 0;
  border-top: 1px solid var(--openbot-glass-surface);
  font-size: 14px;
}
.plugin-fact dt {
  color: var(--openbot-text-dim);
}
.plugin-fact dd {
  margin: 0;
  min-width: 0;
  color: var(--openbot-text-secondary);
  overflow-wrap: anywhere;
}
.plugin-fact-link {
  color: var(--openbot-text-secondary);
  text-decoration: none;
  transition: color var(--openbot-duration-normal) ease;
}
@media (max-width: 900px) {
  .plugin-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .plugin-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .plugin-fact {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
  }
}
@media (hover: hover) and (pointer: fine) {
  .plugin-card, .plugin-dialog-dismiss {
    cursor: pointer;
  }
  .plugin-card-logo, .plugin-card-icon {
    transform: scale(1);
    transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
    will-change: transform;
  }
  .plugin-tag-button:hover:not([aria-pressed="true"]) {
    border-color: var(--openbot-text-dim);
    background: var(--openbot-bg-control-hover);
    color: var(--openbot-text-primary);
  }
  .plugin-tag-button[aria-pressed="true"]:hover {
    background: var(--openbot-text-primary);
  }
  .plugin-card:hover .plugin-card-logo, .plugin-card:hover .plugin-card-icon {
    transform: scale(1.06);
  }
  .plugin-card:hover .plugin-card-title, .plugin-dialog-dismiss:hover, .plugin-fact-link:hover {
    color: var(--openbot-text-primary);
  }
}
@media (prefers-reduced-motion: reduce) {
  .plugin-grid-section[data-revealed] .plugin-card {
    opacity: 1;
    animation: none;
  }
  .plugin-card, .plugin-card-title, .plugin-card-art, .plugin-fact-link {
    transition: none;
  }
  .plugin-card-logo, .plugin-card-icon, .plugin-tag-button {
    transition: none;
    transform: none;
  }
  .plugin-dialog {
    animation: none;
  }
}
.not-found-main {
  position: relative;
  isolation: isolate;
  width: min(100%, 1280px);
  display: grid;
  justify-items: center;
  margin: 0 auto;
  padding: clamp(40px, 7vw, 88px) clamp(20px, 4vw, 48px) 96px;
  text-align: center;
}
.not-found-grid {
  mask-image: radial-gradient(60% 55% at 50% 30%, var(--openbot-mask-solid) 30%, var(--openbot-transparent) 100%);
}
.not-found-searchlight {
  position: absolute;
  z-index: -1;
  top: -80px;
  left: 50%;
  width: min(760px, 120vw);
  aspect-ratio: 1;
  margin-left: calc(min(760px, 120vw) / -2);
  pointer-events: none;
  background: radial-gradient( closest-side, var(--openbot-logo-production), var(--openbot-transparent) );
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient( closest-side, color-mix(in srgb, var(--openbot-logo-production) 22%, var(--openbot-transparent)), var(--openbot-transparent) );
  }
  animation: not-found-sweep 9s ease-in-out infinite alternate;
}
.not-found-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.08em;
  font-size: clamp(112px, 24vw, 248px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.06em;
  user-select: none;
}
.not-found-digit, .not-found-bot {
  animation: not-found-drop 900ms var(--openbot-ease-out) both, not-found-float 6s ease-in-out 900ms infinite;
}
.not-found-digit {
  background-image: linear-gradient( 180deg, var(--openbot-text-primary) 25%, var(--openbot-logo-production) );
  @supports (color: color-mix(in lab, red, red)) {
    background-image: linear-gradient( 180deg, var(--openbot-text-primary) 25%, color-mix(in srgb, var(--openbot-logo-production) 70%, var(--openbot-transparent)) );
  }
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--openbot-transparent);
}
.not-found-bot {
  position: relative;
  width: 0.74em;
  height: 0.74em;
  margin: 0 0.06em;
  animation-delay: 120ms, 120ms;
}
.not-found-digit:last-child {
  animation: not-found-drop 900ms var(--openbot-ease-out) 240ms both, not-found-float 6s ease-in-out -3s infinite, not-found-flicker 7s linear 2s infinite;
}
.not-found-bot-logo {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 24%;
  pointer-events: none;
  filter: drop-shadow(0 0 48px var(--openbot-logo-production));
  @supports (color: color-mix(in lab, red, red)) {
    filter: drop-shadow(0 0 48px color-mix(in srgb, var(--openbot-logo-production) 45%, var(--openbot-transparent)));
  }
  animation: not-found-tilt 6s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
.not-found-stage[data-tracking="true"] .not-found-bot-logo {
  animation: none;
}
.not-found-bot-shadow {
  position: absolute;
  left: 12%;
  bottom: -0.2em;
  width: 76%;
  height: 0.07em;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--openbot-scroll-edge-overlay), var(--openbot-transparent));
  animation: not-found-shadow 6s ease-in-out 900ms infinite;
}
.not-found-copy {
  display: grid;
  justify-items: center;
  margin-top: clamp(28px, 5vw, 48px);
  animation: landing-enter 700ms var(--openbot-ease-out) 420ms both;
}
.not-found-eyebrow {
  margin: 0 0 12px;
  color: var(--openbot-logo-production);
  font-family: var(--openbot-font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.not-found-title {
  margin: 0;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.04em;
}
.not-found-description {
  max-width: 460px;
  margin: 16px 0 0;
  color: var(--openbot-text-secondary);
  font-size: 16px;
  line-height: 1.55;
}
.not-found-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}
.not-found-terminal {
  width: min(100%, 540px);
  margin-top: 48px;
  overflow: hidden;
  border: 1px solid var(--openbot-glass-border);
  border-radius: 14px;
  background: var(--openbot-bg-glass);
  box-shadow: 0 24px 80px var(--openbot-glass-shadow);
  backdrop-filter: blur(12px);
  text-align: left;
  animation: landing-enter 700ms var(--openbot-ease-out) 560ms both;
}
.not-found-terminal-bar {
  display: flex;
  gap: 6px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--openbot-glass-surface);
}
.not-found-terminal-bar i {
  width: 9px;
  height: 9px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-glass-surface-hover);
}
.not-found-terminal-lines {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 16px 18px 18px;
  list-style: none;
  color: var(--openbot-text-secondary);
  font-family: var(--openbot-font-mono);
  font-size: 13px;
  line-height: 1.5;
}
.not-found-line {
  overflow-wrap: anywhere;
  animation: not-found-type 480ms steps(24, end) calc(1100ms + var(--line) * 560ms) both;
}
.not-found-prompt, .not-found-arrow {
  color: var(--openbot-logo-production);
}
.not-found-path {
  color: var(--openbot-text-primary);
}
.not-found-result {
  color: var(--openbot-text-dim);
}
.not-found-line-error {
  color: var(--openbot-danger-text);
}
.not-found-caret {
  display: inline-block;
  width: 0.55em;
  height: 1.1em;
  margin-left: 4px;
  vertical-align: text-bottom;
  background: var(--openbot-text-secondary);
  animation: not-found-caret 1s steps(1, end) infinite;
}
.not-found-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
}
.not-found-link {
  padding: 7px 14px;
  border: 1px solid var(--openbot-glass-border);
  border-radius: var(--openbot-radius-pill);
  color: var(--openbot-text-muted);
  font-size: 13px;
  transition: color var(--openbot-duration-normal) ease, background-color var(--openbot-duration-normal) ease, border-color var(--openbot-duration-normal) ease;
  animation: landing-enter 500ms var(--openbot-ease-out) calc(3900ms + var(--link) * 70ms) both;
}
.not-found-link:hover {
  border-color: var(--openbot-glass-highlight);
  background: var(--openbot-glass-surface);
  color: var(--openbot-text-primary);
}
.not-found-link:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}
@keyframes not-found-drop {
  from {
    opacity: 0;
    transform: translateY(-0.4em) scale(0.9);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes not-found-float {
  0%, 100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -0.05em;
  }
}
@keyframes not-found-shadow {
  0%, 100% {
    opacity: 1;
    scale: 1;
  }
  50% {
    opacity: 0.5;
    scale: 0.8;
  }
}
@keyframes not-found-tilt {
  0%, 30%, 47%, 64%, 100% {
    rotate: 0deg;
  }
  35%, 42% {
    rotate: -7deg;
  }
  52%, 59% {
    rotate: 7deg;
  }
}
@keyframes not-found-flicker {
  0%, 70%, 73%, 76%, 100% {
    opacity: 1;
  }
  71%, 74.5% {
    opacity: 0.25;
  }
}
@keyframes not-found-sweep {
  from {
    translate: -34% 0;
  }
  to {
    translate: 34% 8%;
  }
}
@keyframes not-found-type {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0);
  }
}
@keyframes not-found-caret {
  50% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .not-found-searchlight, .not-found-digit, .not-found-digit:last-child, .not-found-bot, .not-found-bot-logo, .not-found-bot-shadow, .not-found-copy, .not-found-terminal, .not-found-line, .not-found-caret, .not-found-link {
    animation: none;
  }
  .not-found-link {
    transition: none;
  }
}
.changelog-page {
  --changelog-hairline: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --changelog-hairline: color-mix(in srgb, var(--openbot-text-primary) 8%, transparent);
  }
  --changelog-scroll-offset: 24px;
  --changelog-swap-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --changelog-swap-duration: 460ms;
  --changelog-swap-quick: 300ms;
}
.changelog-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: clamp(320px, 38vw, 460px);
  margin-top: clamp(4px, 1vw, 12px);
}
.changelog-hero-art {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  border-radius: 24px;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, var(--openbot-mask-solid) 40%, transparent 100%);
  mask-image: linear-gradient(to bottom, var(--openbot-mask-solid) 40%, transparent 100%);
}
.changelog-hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient( 100deg, var(--openbot-bg-canvas) 0%, var(--openbot-bg-canvas) 55%, transparent 80% );
  @supports (color: color-mix(in lab, red, red)) {
    background-image: linear-gradient( 100deg, color-mix(in srgb, var(--openbot-bg-canvas) 62%, transparent) 0%, color-mix(in srgb, var(--openbot-bg-canvas) 18%, transparent) 55%, transparent 80% );
  }
}
.changelog-hero-copy {
  max-width: 760px;
  padding: clamp(40px, 6vw, 72px) clamp(24px, 4vw, 56px) clamp(40px, 5vw, 64px);
}
.changelog-eyebrow {
  margin: 0;
  color: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--openbot-text-primary) 76%, transparent);
  }
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.changelog-title {
  margin: 12px 0 0;
  color: var(--openbot-text-primary);
  font-size: clamp(38px, 5.6vw, 72px);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1;
  text-wrap: balance;
}
.changelog-lede {
  max-width: 54ch;
  margin: 18px 0 0;
  color: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--openbot-text-primary) 80%, transparent);
  }
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.55;
  text-wrap: pretty;
}
.changelog-latest {
  padding: 0 clamp(24px, 4vw, 56px) 20px;
  border-bottom: 1px solid var(--changelog-hairline);
}
.changelog-latest-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}
.changelog-latest-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.changelog-latest-text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: 14px;
}
.changelog-latest-dot {
  position: relative;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success);
}
.changelog-latest-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--openbot-success);
  animation: changelog-pulse 2.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
@keyframes changelog-pulse {
  from {
    opacity: 0.6;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(3.2);
  }
}
.changelog-latest-version {
  border-radius: var(--openbot-radius-xs);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
  font-weight: 500;
  text-decoration: none;
}
.changelog-latest-version:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}
.changelog-latest-date {
  color: var(--openbot-text-dim);
}
.changelog-layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  align-items: start;
  gap: clamp(40px, 6vw, 96px);
  margin-top: clamp(36px, 4.5vw, 64px);
  scroll-margin-top: var(--changelog-scroll-offset);
}
.changelog-swap {
  position: relative;
  min-width: 0;
}
.changelog-swap-panel[data-motion] {
  --site-nav-blur: 8px;
  --site-nav-rise: 0px;
  will-change: opacity, transform, filter;
}
.changelog-swap-panel[data-motion="from-start"], .changelog-swap-panel[data-motion="to-start"] {
  --site-nav-shift: -40px;
}
.changelog-swap-panel[data-motion="from-end"], .changelog-swap-panel[data-motion="to-end"] {
  --site-nav-shift: 40px;
}
.changelog-swap-panel[data-motion="from-start"], .changelog-swap-panel[data-motion="from-end"] {
  animation: site-nav-panel-enter var(--changelog-swap-duration) var(--changelog-swap-ease) both;
}
.changelog-swap-panel[data-motion="to-start"], .changelog-swap-panel[data-motion="to-end"] {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  max-height: 100dvh;
  overflow: clip;
  pointer-events: none;
  animation: site-nav-panel-leave var(--changelog-swap-quick) var(--changelog-swap-ease) both;
}
.changelog-platforms {
  margin: 0 0 22px;
}
.changelog-platforms-track {
  position: relative;
  display: inline-flex;
  padding: 3px;
  border-radius: var(--openbot-radius-pill);
  background: rgba(255, 255, 255, 0.025);
  box-shadow: 0 0 0 1px var(--changelog-hairline), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.changelog-platforms-track::before {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: var(--changelog-pill-width, 0);
  border-radius: var(--openbot-radius-pill);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 1px 2px rgba(0, 0, 0, 0.32);
  opacity: 0;
  pointer-events: none;
  transform: translateX(var(--changelog-pill-x, 0));
}
.changelog-platforms-track[data-ready]::before {
  opacity: 1;
  transition: transform var(--changelog-swap-quick) var(--changelog-swap-ease), width var(--changelog-swap-quick) var(--changelog-swap-ease);
}
.changelog-platform {
  position: relative;
  z-index: 1;
  padding: 5px 12px;
  border-radius: var(--openbot-radius-pill);
  color: var(--openbot-text-muted);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--openbot-duration-normal) ease;
}
.changelog-platform[aria-current="page"] {
  color: var(--openbot-text-primary);
}
.changelog-platforms-track:not([data-ready]) .changelog-platform[aria-current="page"] {
  background: rgba(255, 255, 255, 0.08);
}
.changelog-platform:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px var(--openbot-accent-strong);
}
.changelog-index {
  position: sticky;
  top: var(--changelog-scroll-offset);
}
.changelog-index-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 14px;
  color: var(--openbot-text-dim);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.changelog-index-count {
  color: var(--openbot-text-muted);
  font-family: var(--openbot-font-mono);
  font-weight: 500;
  letter-spacing: 0;
}
.changelog-index-scroll {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-height: calc(100dvh - var(--changelog-scroll-offset) * 2 - 96px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 0 24px;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient( to bottom, transparent, var(--openbot-mask-solid) 12px, var(--openbot-mask-solid) calc(100% - 32px), transparent );
  mask-image: linear-gradient( to bottom, transparent, var(--openbot-mask-solid) 12px, var(--openbot-mask-solid) calc(100% - 32px), transparent );
}
.changelog-index-scroll::-webkit-scrollbar {
  display: none;
}
.changelog-index-month-label {
  margin: 0 0 6px 14px;
  color: var(--openbot-text-dim);
  font-size: 12px;
  font-weight: 500;
}
.changelog-index-list {
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--changelog-hairline);
  list-style: none;
}
.changelog-index-link {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 10px 6px 14px;
  border-radius: 0 var(--openbot-radius-sm) var(--openbot-radius-sm) 0;
  color: var(--openbot-text-dim);
  font-size: 13px;
  text-decoration: none;
  transition: color var(--openbot-duration-normal) ease;
}
.changelog-index-link::before {
  content: "";
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: -1px;
  width: 2px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-primary);
  opacity: 0;
  transform: scaleY(0.3);
  transition: opacity var(--openbot-duration-normal) ease, transform 320ms var(--openbot-ease-out);
}
.changelog-index-link[aria-current="true"] {
  color: var(--openbot-text-primary);
}
.changelog-index-link[aria-current="true"]::before {
  opacity: 1;
  transform: none;
}
.changelog-index-link:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: -2px;
}
.changelog-index-version {
  font-family: var(--openbot-font-mono);
  font-variant-numeric: tabular-nums;
}
.changelog-index-date {
  color: var(--openbot-text-dim);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.changelog-releases {
  min-width: 0;
  max-width: 780px;
}
.changelog-release {
  padding: clamp(36px, 4.5vw, 56px) 0;
  border-top: 1px solid var(--changelog-hairline);
  scroll-margin-top: var(--changelog-scroll-offset);
}
.changelog-release:first-child {
  padding-top: 0;
  border-top: 0;
}
.changelog-release[data-revealed="false"] {
  opacity: 0;
}
.changelog-release[data-revealed="true"] {
  animation: landing-download-reveal 720ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.changelog-release-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: var(--openbot-text-dim);
  font-size: 13px;
}
.changelog-release-badge {
  padding: 2px 8px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success-soft);
  color: var(--openbot-success-text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.changelog-stores {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}
.changelog-store {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: var(--openbot-radius-pill);
  box-shadow: inset 0 0 0 1px var(--changelog-hairline);
  color: var(--openbot-text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.changelog-store-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success);
}
.changelog-store-detail {
  color: var(--openbot-text-dim);
  font-weight: 500;
}
.changelog-store[data-state="review"] {
  background: var(--openbot-warning-soft);
  box-shadow: none;
  color: var(--openbot-warning-text);
}
.changelog-store[data-state="review"] .changelog-store-dot {
  background: currentColor;
  opacity: 0.6;
}
.changelog-store[data-state="review"] .changelog-store-detail {
  color: inherit;
}
.changelog-release-title {
  margin: 8px 0 0;
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.15;
}
.changelog-release-anchor {
  border-radius: var(--openbot-radius-sm);
  color: var(--openbot-text-primary);
  text-decoration: none;
}
.changelog-release-anchor::after {
  content: "#";
  margin-left: 10px;
  color: var(--openbot-text-dim);
  font-weight: 400;
  opacity: 0;
  transition: opacity var(--openbot-duration-normal) ease;
}
.changelog-release-anchor:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 4px;
}
.changelog-release-version {
  color: var(--openbot-text-muted);
  font-weight: 500;
  transition: color var(--openbot-duration-normal) ease;
}
.changelog-release-intro {
  max-width: 68ch;
  margin: 16px 0 0;
  color: var(--openbot-text-secondary);
  font-size: 15px;
  line-height: 1.65;
}
.changelog-code {
  padding: 1px 6px;
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-surface);
  box-shadow: inset 0 0 0 1px var(--changelog-hairline);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
  font-size: 0.86em;
  overflow-wrap: anywhere;
}
.changelog-strong {
  color: var(--openbot-text-primary);
  font-weight: 600;
}
.changelog-link {
  border-radius: var(--openbot-radius-xs);
  color: var(--openbot-accent-text);
  text-decoration: none;
}
.changelog-link:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}
.changelog-notice {
  margin-top: 24px;
  padding: 16px 18px 18px;
  border-radius: var(--openbot-radius-card);
  background-image: linear-gradient( 180deg, var(--openbot-warning-soft), var(--openbot-warning) );
  @supports (color: color-mix(in lab, red, red)) {
    background-image: linear-gradient( 180deg, var(--openbot-warning-soft), color-mix(in srgb, var(--openbot-warning) 3%, transparent) );
  }
  box-shadow: inset 0 0 0 1px var(--openbot-warning);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--openbot-warning) 26%, transparent);
  }
}
.changelog-notice-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--openbot-warning-text);
  font-size: 13px;
  font-weight: 600;
}
.changelog-notice-mark {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-warning);
  color: var(--openbot-text-on-light);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.changelog-notice-list {
  display: grid;
  gap: 10px;
  margin: 10px 0 0;
  padding: 0 0 0 28px;
  list-style: none;
}
.changelog-notice-item {
  color: var(--openbot-text-secondary);
  font-size: 15px;
  line-height: 1.6;
}
.changelog-notice .changelog-strong {
  color: var(--openbot-text-primary);
  font-weight: 500;
}
.changelog-group {
  --changelog-tone: var(--openbot-text-muted);
  margin-top: 28px;
}
.changelog-group[data-type="added"] {
  --changelog-tone: var(--openbot-logo-production);
}
.changelog-group[data-type="changed"] {
  --changelog-tone: var(--openbot-accent-text);
}
.changelog-group[data-type="fixed"] {
  --changelog-tone: var(--openbot-success-text);
}
.changelog-group[data-type="removed"], .changelog-group[data-type="security"], .changelog-group[data-type="deprecated"] {
  --changelog-tone: var(--openbot-warning-text);
}
.changelog-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  color: var(--changelog-tone);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.changelog-group-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--openbot-radius-pill);
  background: var(--changelog-tone);
  box-shadow: 0 0 10px var(--changelog-tone);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 10px color-mix(in srgb, var(--changelog-tone) 70%, transparent);
  }
}
.changelog-group-count {
  padding: 1px 7px;
  border-radius: var(--openbot-radius-pill);
  background: var(--changelog-tone);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--changelog-tone) 12%, transparent);
  }
  font-family: var(--openbot-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
}
.changelog-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.changelog-item {
  position: relative;
  padding-left: 22px;
  color: var(--openbot-text-secondary);
  font-size: 15px;
  line-height: 1.6;
  text-wrap: pretty;
}
.changelog-item::before {
  content: "";
  position: absolute;
  top: 0.8em;
  left: 4px;
  width: 8px;
  height: 1px;
  background: var(--changelog-tone);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--changelog-tone) 70%, transparent);
  }
}
@media (max-width: 959px) {
  .changelog-page {
    --changelog-scroll-offset: 72px;
  }
  .changelog-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    margin-top: 0;
    scroll-margin-top: 0;
  }
  .changelog-platforms {
    margin: 0 0 12px;
    padding: 0 clamp(20px, 4vw, 48px);
  }
  .changelog-index {
    z-index: 5;
    top: 0;
    margin: 0 calc(clamp(20px, 4vw, 48px) * -1);
    padding: 12px 0;
    border-bottom: 1px solid var(--changelog-hairline);
    background: var(--openbot-bg-canvas);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--openbot-bg-canvas) 86%, transparent);
    }
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
  }
  .changelog-index-title, .changelog-index-month-label {
    display: none;
  }
  .changelog-index-scroll {
    flex-direction: row;
    gap: 6px;
    max-height: none;
    overflow: auto hidden;
    padding: 0 clamp(20px, 4vw, 48px);
    -webkit-mask-image: linear-gradient( to right, transparent, var(--openbot-mask-solid) 16px, var(--openbot-mask-solid) calc(100% - 32px), transparent );
    mask-image: linear-gradient( to right, transparent, var(--openbot-mask-solid) 16px, var(--openbot-mask-solid) calc(100% - 32px), transparent );
  }
  .changelog-index-month, .changelog-index-list {
    display: contents;
  }
  .changelog-index-item {
    flex: 0 0 auto;
  }
  .changelog-index-link {
    padding: 6px 12px;
    border-radius: var(--openbot-radius-pill);
    box-shadow: inset 0 0 0 1px var(--changelog-hairline);
    transition: color var(--openbot-duration-normal) ease, background-color var(--openbot-duration-normal) ease;
  }
  .changelog-index-link::before, .changelog-index-date {
    display: none;
  }
  .changelog-index-link[aria-current="true"] {
    background: var(--openbot-action);
    color: var(--openbot-action-foreground);
  }
  .changelog-latest {
    padding-right: 0;
    padding-left: 0;
  }
  .changelog-hero-copy {
    padding-right: clamp(20px, 4vw, 32px);
    padding-left: clamp(20px, 4vw, 32px);
  }
  .changelog-hero-art {
    border-radius: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .changelog-latest-dot::after {
    animation: none;
    opacity: 0;
  }
  .changelog-swap-panel[data-motion] {
    animation: none;
  }
  .changelog-platforms-track[data-ready]::before, .changelog-platform {
    transition: none;
  }
  .changelog-release[data-revealed="true"] {
    animation: none;
  }
  .changelog-index-link, .changelog-index-link::before, .changelog-release-anchor::after, .changelog-release-version {
    transition: none;
  }
}
@media (hover: hover) and (pointer: fine) {
  .changelog-index-link:hover, .changelog-platform:not([aria-current="page"]):hover {
    color: var(--openbot-text-secondary);
  }
  .changelog-release-anchor:hover .changelog-release-version {
    color: var(--openbot-text-secondary);
  }
  .changelog-release-anchor:hover::after {
    opacity: 1;
  }
  .changelog-latest-version:hover, .changelog-link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}
.download-main {
  width: min(100%, 1280px);
  margin: 0 auto;
  padding: clamp(12px, 2vw, 24px) clamp(20px, 4vw, 48px) clamp(64px, 8vw, 112px);
}
.download-main[data-download-platform="macos"], .download-main [data-download-platform="macos"] {
  --download-color: var(--openbot-logo-production);
}
.download-main[data-download-platform="windows"], .download-main [data-download-platform="windows"] {
  --download-color: var(--openbot-logo-preview);
}
.download-main[data-download-platform="linux"], .download-main [data-download-platform="linux"] {
  --download-color: var(--openbot-logo-dev);
}
.download-main[data-download-platform="ios"], .download-main [data-download-platform="ios"] {
  --download-color: var(--download-ios-color);
}
.download-main[data-download-platform="android"], .download-main [data-download-platform="android"] {
  --download-color: var(--download-android-color);
}
.download-panel, .download-hub-card, .download-system-card {
  border: 1px solid var(--openbot-download-card-border);
  background: var(--download-color);
  color: var(--openbot-text-on-light);
}
.download-panel {
  overflow: hidden;
  border-radius: 28px;
}
.download-panel-body {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  padding: clamp(24px, 4.4vw, 60px) clamp(24px, 4.4vw, 60px) clamp(36px, 5vw, 68px);
}
.download-panel-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--openbot-radius-pill);
  color: var(--openbot-download-card-muted);
  font-size: 14px;
  font-weight: 500;
  transition: color var(--openbot-duration-normal) ease;
}
.download-panel-back-icon {
  width: 16px;
  height: 16px;
  transform: scaleX(-1);
}
.download-panel-title {
  margin: clamp(36px, 5vw, 64px) 0 0;
  font-size: clamp(46px, 7.4vw, 104px);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 0.94;
  text-wrap: balance;
}
.download-panel-intro {
  max-width: 50ch;
  margin: clamp(20px, 2.4vw, 28px) 0 0;
  color: var(--openbot-download-card-muted);
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.5;
}
.download-panel-installers {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 28px;
  margin: clamp(32px, 4vw, 44px) 0 0;
  padding: 0;
  list-style: none;
}
.download-panel-installers li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.download-panel-installer-detail {
  padding-left: 4px;
  color: var(--openbot-download-card-muted);
  font-size: 13px;
}
.download-panel-logo {
  width: clamp(120px, 17vw, 232px);
  height: clamp(120px, 17vw, 232px);
}
.download-panel-specs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--openbot-download-card-border);
}
.download-panel-specs > div {
  min-width: 0;
  padding: 20px clamp(20px, 2.4vw, 32px) 24px;
}
.download-panel-specs > div + div {
  border-left: 1px solid var(--openbot-download-card-border);
}
.download-panel-specs dt, .download-hub-card-specs dt {
  color: var(--openbot-download-card-muted);
  font-size: 13px;
}
.download-panel-specs dd {
  margin: 6px 0 0;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.35;
}
.download-installer-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 24px 0 20px;
  border: 1px solid var(--openbot-text-on-light);
  border-radius: var(--openbot-radius-pill);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: background-color var(--openbot-duration-normal) ease, color var(--openbot-duration-normal) ease, transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.download-installer-button[data-variant="primary"] {
  background: var(--openbot-text-on-light);
  color: var(--download-color);
}
.download-installer-button[data-variant="secondary"] {
  background: var(--openbot-download-card-chip);
  color: var(--openbot-text-on-light);
}
.download-installer-icon {
  width: 18px;
  height: 18px;
  flex: none;
}
.download-installer-button:focus-visible, .download-panel-back:focus-visible, .download-hub-card-link:focus-visible, .download-system-card:focus-visible {
  outline: 3px solid var(--openbot-download-card-focus);
  outline-offset: 3px;
}
.download-rows {
  margin-top: clamp(56px, 8vw, 104px);
}
.download-row {
  display: grid;
  grid-template-columns: minmax(180px, 300px) minmax(0, 1fr);
  gap: 24px clamp(32px, 5vw, 80px);
  padding: clamp(36px, 4.5vw, 56px) 0;
  border-top: 1px solid var(--openbot-border);
}
.download-row > * {
  min-width: 0;
  max-width: 760px;
}
.download-row-title {
  margin: 0;
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.1;
  text-wrap: balance;
}
.download-steps {
  display: grid;
  margin: 0;
  padding: 0;
  counter-reset: download-step;
  list-style: none;
}
.download-steps > li {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 20px;
  padding-bottom: 32px;
  counter-increment: download-step;
}
.download-steps > li:last-child {
  padding-bottom: 0;
}
.download-steps > li::before {
  content: counter(download-step);
  grid-row: 1 / span 2;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--download-color, var(--openbot-border-strong));
  border-radius: 50%;
  background: var(--openbot-bg-canvas);
  color: var(--download-color, var(--openbot-text-primary));
  font-size: 15px;
  font-weight: 500;
}
.download-steps > li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 48px;
  bottom: 8px;
  left: 19.5px;
  width: 1px;
  background: var(--openbot-border-strong);
}
.download-steps p {
  grid-column: 2;
  margin: 8px 0 0;
  color: var(--openbot-text-secondary);
  font-size: 16px;
  line-height: 1.6;
}
.download-command {
  grid-column: 2;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  margin-top: 14px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
}
.download-command pre {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow-x: auto;
  padding: 15px 18px;
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
  font-size: 13px;
  line-height: 1.65;
}
.download-command-copy {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  margin: 9px 9px 9px 0;
  padding: 0 12px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
  background: transparent;
  color: var(--openbot-text-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--openbot-duration-normal) ease, color var(--openbot-duration-normal) ease;
}
.download-command-copy[data-state="copied"] {
  color: var(--openbot-text-primary);
}
.download-command-copy:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}
.download-command-copy-icon {
  width: 14px;
  height: 14px;
}
.download-notes {
  margin: 0;
  padding: 0;
  list-style: none;
}
.download-notes li {
  position: relative;
  padding: 0 0 18px 24px;
  color: var(--openbot-text-secondary);
  font-size: 16px;
  line-height: 1.6;
}
.download-notes li + li {
  padding-top: 18px;
  border-top: 1px solid var(--openbot-border);
}
.download-notes li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--download-color, var(--openbot-text-dim));
}
.download-notes li + li::before {
  top: calc(18px + 0.62em);
}
.compare-faq-list.download-faq {
  margin-top: -18px;
  border-top: 0;
}
.download-system-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.download-system-card {
  min-height: 108px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  border-radius: 20px;
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.download-system-card-logo {
  width: 44px;
  height: 44px;
  flex: none;
}
.download-system-card-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.download-system-card-name {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.03em;
}
.download-system-card-detail {
  color: var(--openbot-download-card-muted);
  font-size: 13px;
  line-height: 1.4;
}
.download-system-card-arrow, .download-hub-card-link-icon {
  width: 16px;
  height: 16px;
  flex: none;
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.download-system-card-arrow {
  margin-left: auto;
}
.download-resources {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 28px;
  color: var(--openbot-text-muted);
  font-size: 14px;
}
.download-resources a {
  text-decoration: underline;
  text-decoration-color: var(--openbot-border-strong);
  text-underline-offset: 3px;
}
.download-hub-hero {
  padding-bottom: clamp(48px, 6vw, 80px);
}
.download-hub-intro {
  margin-bottom: clamp(28px, 3.4vw, 40px);
}
.download-hub-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.download-hub-card {
  min-width: 0;
  min-height: 540px;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 2.6vw, 34px);
  border-radius: 24px;
}
.download-hub-cards-mobile {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 18px;
}
.download-hub-cards-mobile .download-hub-card {
  min-height: 460px;
}
.download-hub-card-logo {
  width: clamp(80px, 7.4vw, 104px);
  height: clamp(80px, 7.4vw, 104px);
}
.download-hub-card-name {
  margin: auto 0 0;
  padding-top: 40px;
  font-size: clamp(36px, 3.6vw, 50px);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 1;
}
.download-hub-card-specs {
  margin: 22px 0 0;
}
.download-hub-card-specs > div {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--openbot-download-card-border);
  font-size: 14px;
  line-height: 1.4;
}
.download-hub-card-specs dd {
  margin: 0;
  font-weight: 500;
}
.download-hub-card-installers {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.download-hub-card .download-installer-button {
  height: 46px;
  padding: 0 20px 0 16px;
  font-size: 14px;
}
.download-hub-card-link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 22px;
  border-radius: var(--openbot-radius-xs);
  font-size: 14px;
  font-weight: 500;
}
.download-main > .download-resources {
  margin-top: 32px;
}
@media (hover: hover) and (pointer: fine) {
  .download-installer-button:hover {
    transform: translateY(-1px);
  }
  .download-installer-button[data-variant="secondary"]:hover {
    background: var(--openbot-download-card-border);
  }
  .download-panel-back:hover {
    color: var(--openbot-text-on-light);
  }
  .download-system-card:hover {
    transform: translateY(-3px);
  }
  .download-system-card:hover .download-system-card-arrow, .download-hub-card-link:hover .download-hub-card-link-icon {
    transform: translateX(3px);
  }
  .download-command-copy:hover {
    background: var(--openbot-bg-control-hover);
    color: var(--openbot-text-primary);
  }
  .download-resources a:hover {
    color: var(--openbot-text-primary);
  }
}
@media (prefers-reduced-motion: reduce) {
  .download-installer-button, .download-system-card, .download-system-card-arrow, .download-hub-card-link-icon {
    transition: none;
  }
  .download-installer-button:hover, .download-system-card:hover, .download-system-card:hover .download-system-card-arrow, .download-hub-card-link:hover .download-hub-card-link-icon {
    transform: none;
  }
}
@media (max-width: 960px) {
  .download-hub-cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .download-hub-card, .download-hub-cards-mobile .download-hub-card {
    min-height: 0;
  }
  .download-row {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 720px) {
  .download-panel-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .download-panel-logo {
    position: absolute;
    top: 20px;
    right: 22px;
    width: 52px;
    height: 52px;
  }
  .download-panel-specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .download-panel-specs > div:nth-child(odd) {
    border-left: 0;
  }
  .download-panel-specs > div:nth-child(n + 3) {
    border-top: 1px solid var(--openbot-download-card-border);
  }
  .download-system-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}
.landing-download-pages {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 28px;
  color: var(--openbot-text-muted);
  font-size: 14px;
}
.landing-download-pages-mobile {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-left: 4px;
  padding-left: 20px;
  border-left: 1px solid var(--openbot-border-strong);
}
.landing-download-pages a {
  color: var(--openbot-text-primary);
  text-decoration: underline;
  text-decoration-color: var(--openbot-border-strong);
  text-underline-offset: 3px;
}
.contact-section {
  --contact-fill: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --contact-fill: color-mix(in srgb, var(--openbot-text-primary) 5%, transparent);
  }
  --contact-border: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --contact-border: color-mix(in srgb, var(--openbot-text-primary) 8%, transparent);
  }
  --contact-border-hover: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --contact-border-hover: color-mix(in srgb, var(--openbot-text-primary) 48%, transparent);
  }
}
.contact-card {
  border: 1px solid var(--contact-border);
  border-radius: 28px;
  background: var(--contact-fill);
  padding: clamp(20px, 3vw, 36px);
}
.contact-form {
  display: grid;
  gap: 20px;
}
.contact-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.contact-field {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.contact-field-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  line-height: 20px;
}
.contact-field-head label {
  flex: 0 0 auto;
  color: var(--openbot-text-primary);
  font-size: 14px;
  font-weight: 500;
}
.contact-optional, .contact-error {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contact-optional {
  color: var(--openbot-text-muted);
}
.contact-error {
  color: var(--openbot-danger-text);
}
.contact-field :is(input, textarea, select) {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-canvas);
  padding: 12px 14px;
  color: var(--openbot-text-primary);
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
  transition: border-color var(--openbot-duration-normal) ease, box-shadow var(--openbot-duration-normal) ease;
}
.contact-field textarea {
  resize: vertical;
}
.contact-field textarea::placeholder {
  color: var(--openbot-text-placeholder);
}
.contact-field :is(input, textarea, select):hover {
  border-color: var(--contact-border-hover);
}
.contact-field :is(input, textarea, select):focus-visible {
  outline: 0;
  border-color: var(--openbot-border-focus);
  box-shadow: 0 0 0 3px var(--openbot-accent-strong);
}
.contact-field input[readonly] {
  border-color: var(--contact-border);
  background: transparent;
  color: var(--openbot-text-secondary);
}
.contact-field [aria-invalid="true"] {
  border-color: var(--openbot-danger-border);
}
.contact-field [aria-invalid="true"]:focus-visible {
  box-shadow: 0 0 0 3px var(--openbot-danger-focus);
}
.contact-select {
  position: relative;
}
.contact-select select {
  appearance: none;
  padding-right: 40px;
}
.contact-select-icon {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 16px;
  height: 16px;
  color: var(--openbot-text-secondary);
  pointer-events: none;
  transform: translateY(-50%);
}
.contact-count {
  justify-self: end;
  color: var(--openbot-text-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.contact-submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}
.contact-submit button:disabled {
  opacity: 0.6;
  cursor: progress;
}
.contact-privacy {
  flex: 1 1 240px;
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: 13px;
  line-height: 1.5;
}
.contact-privacy a {
  color: var(--openbot-text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.contact-privacy.contact-failed {
  color: var(--openbot-danger-text);
}
.contact-sent {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: clamp(24px, 4vw, 48px) 0;
  text-align: center;
}
.contact-sent-mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success-soft);
  color: var(--openbot-success-text);
}
.contact-sent-mark svg {
  width: 22px;
  height: 22px;
}
.contact-sent h2 {
  margin: 8px 0 0;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.03em;
}
.contact-sent p {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: 15px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.contact-sent strong {
  color: var(--openbot-text-primary);
  font-weight: 500;
}
.contact-text-button {
  margin-top: 8px;
  border: 0;
  background: none;
  padding: 6px 0;
  color: var(--openbot-text-primary);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}
.contact-text-button:hover, .contact-text-button:focus-visible {
  color: var(--openbot-logo-production);
}
.contact-channels {
  display: grid;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--openbot-border);
}
.contact-channels li {
  border-bottom: 1px solid var(--openbot-border);
}
.contact-channels a {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  font-size: 15px;
}
.contact-channel-label {
  font-weight: 500;
}
.contact-channel-detail {
  overflow: hidden;
  color: var(--openbot-text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contact-channel-icon {
  width: 16px;
  height: 16px;
  color: var(--openbot-text-muted);
  transition: color var(--openbot-duration-normal) ease, transform var(--openbot-duration-fast) ease;
}
.contact-channels a:hover .contact-channel-icon, .contact-channels a:focus-visible .contact-channel-icon {
  color: var(--openbot-text-primary);
  transform: translate(2px, -2px);
}
@media (max-width: 640px) {
  .contact-row {
    grid-template-columns: minmax(0, 1fr);
  }
}
.agent-share-page > .landing-footer {
  align-self: stretch;
}
.agent-share-gone-copy {
  margin: 12px 0 0;
  color: var(--openbot-text-secondary);
  font-size: 16px;
  line-height: 1.55;
}
.agent-share-gone-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
}
.transactional-main {
  min-height: min(78dvh, 820px);
  display: grid;
  place-items: center;
  padding: clamp(32px, 6vw, 72px) 16px clamp(48px, 8vw, 96px);
  background: radial-gradient(circle at 50% 42%, var(--openbot-accent-strong), var(--openbot-transparent) 38%);
}
.transactional-card[data-layout="form"] {
  width: min(100%, 640px);
  justify-items: stretch;
  text-align: start;
}
.transactional-form-heading {
  margin-bottom: 28px;
}
.transactional-form-heading .join-card-copy {
  max-width: none;
  margin-top: 12px;
}
.transactional-card .landing-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.transactional-card .landing-button:disabled:active {
  transform: none;
}
.transactional-provider {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.transactional-provider-mark {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}
.transactional-notes {
  display: grid;
  gap: 6px;
  margin: 24px 0 0;
  padding: 0;
  color: var(--openbot-text-muted);
  font-size: 12px;
  line-height: 1.5;
  list-style: none;
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    :root, :host {
      --agent-share-accent: #8a8f98;
    }
    *, ::before, ::after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --teams-pill-angle: 0deg;
    }
  }
}


/* /@fs//app/packages/ui/src/features/billing/billing-server-lifecycle-preview.css */
.billing-lifecycle-panel {
  container-type: inline-size;
}

.billing-lifecycle-card {
  overflow: hidden;
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  box-shadow: 0 0 0 1px var(--openbot-border);
}

.billing-lifecycle-identity {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-4);
}

.billing-lifecycle-server-icon,
.billing-lifecycle-dialog-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: var(--openbot-control-xl);
  height: var(--openbot-control-xl);
  border-radius: var(--openbot-radius-md);
  color: var(--openbot-text-secondary);
  background: var(--openbot-bg-control-hover);
}

.billing-lifecycle-server-icon svg,
.billing-lifecycle-dialog-icon svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
}

.billing-lifecycle-server-copy {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: var(--openbot-space-1);
}

.billing-lifecycle-billing {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-4);
  border-top: 1px solid var(--openbot-border);
}

.billing-lifecycle-billing[data-scheduled] {
  background: color-mix(in srgb, var(--openbot-warning-soft) 35%, transparent);
}

.billing-lifecycle-billing-copy {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: var(--openbot-space-1);
}

.billing-lifecycle-calendar {
  flex-shrink: 0;
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  color: var(--openbot-warning-text);
}

.billing-lifecycle-receipt {
  display: grid;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-4);
  margin-bottom: var(--openbot-space-4);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface);
}

.billing-lifecycle-receipt > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--openbot-space-4);
}

.billing-lifecycle-receipt > div > :last-child {
  text-align: right;
  text-wrap: pretty;
}

.billing-lifecycle-receipt > div > :first-child {
  flex-shrink: 0;
}

@container (max-width: 450px) {
  .billing-lifecycle-identity {
    flex-wrap: wrap;
    gap: var(--openbot-space-2);
  }

  .billing-lifecycle-server-icon {
    display: none;
  }

  .billing-lifecycle-server-copy {
    flex-basis: 60%;
  }

  .billing-lifecycle-billing {
    flex-wrap: wrap;
  }

  .billing-lifecycle-billing-copy {
    flex-basis: 70%;
  }
}

@media (max-width: 700px) {
  .billing-lifecycle-receipt > div {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--openbot-space-1);
  }

  .billing-lifecycle-receipt > div > :last-child {
    text-align: left;
  }
}

.billing-lifecycle-menu.ui-action-menu {
  z-index: var(--openbot-layer-dialog-host);
}

.billing-lifecycle-list {
  display: grid;
  gap: var(--openbot-space-3);
}

.billing-lifecycle-price {
  display: grid;
  justify-items: end;
  gap: var(--openbot-space-1);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.billing-lifecycle-timing {
  display: grid;
  gap: var(--openbot-space-2);
  margin-bottom: var(--openbot-space-4);
  font-size: var(--openbot-text-sm);
}

.billing-lifecycle-timing-option {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-3);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
}

.billing-lifecycle-timing-option[data-checked] {
  border-color: var(--openbot-accent);
  background: var(--openbot-bg-surface);
}

.billing-lifecycle-timing-option[data-focus-visible] {
  outline: 1px solid var(--openbot-accent);
}

.billing-lifecycle-timing-option label {
  flex: 1;
  cursor: pointer;
}

.billing-lifecycle-radio {
  flex-shrink: 0;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
}

.billing-lifecycle-radio[data-checked] {
  border-color: var(--openbot-accent);
  background: var(--openbot-accent);
  box-shadow: inset 0 0 0 var(--openbot-space-1) var(--openbot-bg-canvas);
}

@container (max-width: 450px) {
  .billing-lifecycle-price {
    order: 2;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-items: start;
  }

  .billing-lifecycle-price > :last-child {
    justify-self: end;
  }
}


/* /@fs//app/src/renderer/src/preview/preview.css */
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties;
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-cyrillic-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-cyrillic-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-greek-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-greek-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-vietnamese-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-cyrillic-ext-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-cyrillic-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-greek-ext-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-greek-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-vietnamese-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-latin-ext-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-latin-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
      "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
      "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --spacing: 0.25rem;
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring:where(:not(iframe)) {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .\!visible {
    visibility: visible !important;
  }
  .collapse {
    visibility: collapse;
  }
  .invisible {
    visibility: hidden;
  }
  .visible {
    visibility: visible;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .static {
    position: static;
  }
  .sticky {
    position: sticky;
  }
  .isolate {
    isolation: isolate;
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .block {
    display: block;
  }
  .contents {
    display: contents;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .table {
    display: table;
  }
  .size-3 {
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
  }
  .size-4 {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }
  .size-\[14px\] {
    width: 14px;
    height: 14px;
  }
  .size-\[18px\] {
    width: 18px;
    height: 18px;
  }
  .shrink {
    flex-shrink: 1;
  }
  .flex-grow {
    flex-grow: 1;
  }
  .grow {
    flex-grow: 1;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .resize {
    resize: both;
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .fill-current {
    fill: currentcolor;
  }
  .fill-none {
    fill: none;
  }
  .stroke-current {
    stroke: currentcolor;
  }
  .lowercase {
    text-transform: lowercase;
  }
  .ring {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .backdrop-filter {
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }
  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }
}
:root {
  --openbot-provider-current: currentcolor;
  --openbot-bg-native-canvas: #141414;
  --openbot-bg-native-sidebar: #141414;
  --openbot-bg-sheet: #141414;
  --openbot-bg-grouped: #212121;
  --openbot-text-grouped-secondary: #96969b;
  --openbot-border-grouped: #333335;
  --openbot-radius-grouped: 16px;
  --openbot-bg-chrome-glass: rgba(38, 38, 40, 0.96);
  --openbot-border-chrome-glass: rgba(255, 255, 255, 0.08);
  --openbot-bg-chrome-blur: rgba(26, 26, 28, 0.62);
  --openbot-bg-canvas: #1a1a1a;
  --openbot-bg-canvas-clear: rgba(26, 26, 26, 0);
  --openbot-bg-sidebar: #1a1a1a;
  --openbot-marketplace-detail-bg: #111111;
  --openbot-bg-surface: #212121;
  --openbot-bg-surface-raised: #242424;
  --openbot-bg-control: #212121;
  --openbot-bg-control-hover: #242424;
  --openbot-bg-control-active: #2a2a2a;
  --openbot-tabs-bar-bg: #212121;
  --openbot-tabs-pill-bg: #2a2a2a;
  --openbot-bg-overlay: rgba(26, 26, 26, 0.92);
  --openbot-dialog-overlay: rgba(0, 0, 0, 0.1);
  --openbot-dialog-ring: rgba(255, 255, 255, 0.1);
  --openbot-bg-glass: rgba(33, 33, 33, 0.76);
  --openbot-glass-surface: rgba(255, 255, 255, 0.07);
  --openbot-glass-surface-hover: rgba(255, 255, 255, 0.11);
  --openbot-glass-border: rgba(255, 255, 255, 0.18);
  --openbot-glass-highlight: rgba(255, 255, 255, 0.12);
  --openbot-glass-shadow: rgba(0, 0, 0, 0.28);
  --openbot-hero-grid-line: rgba(214, 173, 242, 0.09);
  --openbot-price-metal-high: #4c4c4c;
  --openbot-price-metal-core: #1f1f1f;
  --openbot-price-metal-low: #343434;
  --openbot-price-sheen-cool: rgba(150, 196, 255, 0.92);
  --openbot-price-sheen-light: rgba(240, 244, 250, 0.98);
  --openbot-price-sheen-warm: rgba(255, 184, 132, 0.94);
  --openbot-price-sheen-cool-soft: rgba(150, 196, 255, 0.26);
  --openbot-price-sheen-warm-soft: rgba(255, 184, 132, 0.28);
  --openbot-price-sheen-cool-clear: rgba(150, 196, 255, 0);
  --openbot-price-sheen-warm-clear: rgba(255, 184, 132, 0);
  --openbot-price-rim: rgba(255, 255, 255, 0.28);
  --openbot-price-rim-under: rgba(255, 255, 255, 0.1);
  --openbot-price-glow: rgba(180, 200, 255, 0.22);
  --openbot-bg-host-inset: #101216;
  --openbot-bg-notch: #000000;
  --openbot-mask-solid: #000000;
  --openbot-transparent: rgba(0, 0, 0, 0);
  --openbot-drawer-scrim: #000000;
  --openbot-scroll-edge-overlay: rgba(0, 0, 0, 0.72);
  --openbot-queue-surface: var(--openbot-bg-surface);
  --openbot-queue-border: var(--openbot-border-strong);
  --openbot-queue-text: var(--openbot-text-primary);
  --openbot-queue-action: var(--openbot-text-muted);
  --openbot-border: rgba(255, 255, 255, 0.035);
  --openbot-border-strong: rgba(255, 255, 255, 0.045);
  --openbot-image-outline: rgba(255, 255, 255, 0.1);
  --openbot-border-focus: rgba(0, 124, 247, 0.72);
  --openbot-text-primary: #ffffff;
  --openbot-text-on-light: #141414;
  --openbot-surface-light: #f0f0f0;
  --openbot-action: #f0f0f0;
  --openbot-action-foreground: #141414;
  --openbot-qr-background: #ffffff;
  --openbot-onboarding-desktop-mist: #dbe9ff;
  --openbot-onboarding-desktop-blue: #7eb4f2;
  --openbot-onboarding-desktop-indigo: #6f7de8;
  --openbot-sound-warm-back: #d95926;
  --openbot-sound-warm-ink: #f2c46b;
  --openbot-sound-mech-back: #1f1f1f;
  --openbot-sound-mech-ink: #dbe9ff;
  --openbot-sound-bubble-back: #5b5fe0;
  --openbot-sound-bubble-ink: #8bdee8;
  --openbot-sound-press-back: #ff1e5e;
  --openbot-sound-press-ink: #ffd8a8;
  --openbot-sound-off-back: #212121;
  --openbot-sound-off-ink: #4c4c4c;
  --openbot-onboarding-window: #f3f5f8;
  --openbot-text-secondary: #dcdcdc;
  --openbot-text-muted: #979797;
  --openbot-text-dim: #6a6a6a;
  --openbot-text-readable: rgba(255, 255, 255, 0.52);
  --openbot-text-muted-on-light: rgba(20, 20, 20, 0.52);
  --openbot-text-dim-on-light: rgba(20, 20, 20, 0.36);
  --openbot-download-card-muted: rgba(20, 20, 20, 0.68);
  --openbot-download-card-chip: rgba(20, 20, 20, 0.1);
  --openbot-download-card-border: rgba(20, 20, 20, 0.16);
  --openbot-download-card-focus: rgba(242, 242, 242, 0.86);
  --openbot-text-placeholder: #bfbfbf;
  --openbot-text-on-accent: #ffffff;
  --openbot-text-on-status: #07130c;
  --openbot-accent: #007cf7;
  --openbot-accent-hover: #1f8fff;
  --openbot-accent-text: #42a0ff;
  --openbot-accent-soft: rgba(0, 124, 247, 0.16);
  --openbot-accent-strong: rgba(0, 124, 247, 0.34);
  --openbot-settings-text-muted: rgba(255, 255, 255, 0.59);
  --openbot-provider-codex: var(--openbot-text-primary);
  --openbot-provider-claude: #d97757;
  --openbot-provider-grok: var(--openbot-text-primary);
  --openbot-provider-antigravity: #8e75b2;
  --openbot-chart-series-codex: #d6adf2;
  --openbot-chart-series-claude: var(--openbot-provider-claude);
  --openbot-chart-series-grok: #6bc7d9;
  --openbot-chart-series-other: var(--openbot-text-muted);
  --openbot-chart-storage-workspaces: #3987e5;
  --openbot-chart-storage-files: #d95926;
  --openbot-chart-storage-chats: #199e70;
  --openbot-chart-storage-downloads: #9085e9;
  --openbot-chart-storage-runtimes: #c98500;
  --openbot-chart-storage-app: var(--openbot-text-dim);
  --openbot-logo-production: #d6adf2;
  --openbot-logo-eye: #040007;
  --openbot-logo-production-eye: var(--openbot-logo-eye);
  --openbot-logo-dev: #e3b866;
  --openbot-logo-preview: #61c985;
  --openbot-unread-surface: #74b9ff;
  --openbot-unread-text: #07131f;
  --openbot-success: #31cf76;
  --openbot-success-text: #31cf76;
  --openbot-warning-text: #ff9412;
  --openbot-danger-text: #ff6069;
  --openbot-success-soft: rgba(49, 207, 118, 0.12);
  --openbot-success-wash: rgba(49, 207, 118, 0.045);
  --openbot-warning: #ff9412;
  --openbot-warning-soft: rgba(255, 148, 18, 0.12);
  --openbot-question-option: #6bc7d9;
  --openbot-question-option-soft: rgba(107, 199, 217, 0.14);
  --openbot-question-option-hover: rgba(107, 199, 217, 0.2);
  --openbot-question-option-pressed: rgba(107, 199, 217, 0.26);
  --openbot-island-identity-name: var(--openbot-text-primary);
  --openbot-question-badge-text: #8bdee8;
  --openbot-question-badge-soft: rgba(107, 199, 217, 0.16);
  --openbot-message-badge-text: #91c8ff;
  --openbot-message-badge-soft: rgba(116, 185, 255, 0.16);
  --openbot-badge-new: #ff1e5e;
  --openbot-badge-new-soft: rgba(255, 30, 94, 0.16);
  --openbot-beam-teal: var(--openbot-file-teal);
  --openbot-beam-blue: var(--openbot-accent-text);
  --openbot-beam-pink: var(--openbot-file-pink);
  --openbot-approval-badge-soft: rgba(255, 148, 18, 0.18);
  --openbot-danger: #fd2f3b;
  --openbot-danger-hover: #fd5d67;
  --openbot-danger-soft: rgba(253, 47, 59, 0.16);
  --openbot-danger-soft-hover: rgba(253, 47, 59, 0.28);
  --openbot-danger-focus: rgba(253, 47, 59, 0.4);
  --openbot-danger-border: rgba(253, 47, 59, 0.5);
  --openbot-file-blue: #74b9ff;
  --openbot-file-blue-soft: rgba(116, 185, 255, 0.14);
  --openbot-file-yellow: #ff9412;
  --openbot-file-yellow-soft: rgba(255, 148, 18, 0.12);
  --openbot-file-orange: #f0a06a;
  --openbot-file-orange-soft: rgba(240, 160, 106, 0.14);
  --openbot-file-teal: #6bc7d9;
  --openbot-file-teal-soft: rgba(107, 199, 217, 0.14);
  --openbot-file-green: #31cf76;
  --openbot-file-green-soft: rgba(49, 207, 118, 0.12);
  --openbot-file-red: #fd2f3b;
  --openbot-file-red-soft: rgba(253, 47, 59, 0.16);
  --openbot-file-pink: #d98ac9;
  --openbot-file-pink-soft: rgba(217, 138, 201, 0.14);
  --openbot-file-default: #42a0ff;
  --openbot-file-default-soft: rgba(0, 124, 247, 0.14);
  --openbot-data-table-border: #303030;
  --openbot-data-table-header-text: #a1a1a1;
  --openbot-data-table-text: #f5f5f5;
  --openbot-data-table-outer-border: rgba(255, 255, 255, 0);
  --openbot-data-table-ring: rgba(255, 255, 255, 0.12);
  --openbot-shadow-popover-ambient: rgba(0, 0, 0, 0.1);
  --openbot-shadow-dialog: rgba(0, 0, 0, 0.48);
  --openbot-shadow-dynamic-island: rgba(0, 0, 0, 0.6);
  --openbot-shadow-ring: rgba(228, 228, 228, 0.04);
  --openbot-border-on-light: rgba(20, 20, 20, 0.14);
  --openbot-hover: rgba(255, 255, 255, 0.06);
  --openbot-font-sans: "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --openbot-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
  --openbot-text-sm: 12px;
  --openbot-text-md: 13px;
  --openbot-text-lg: 14px;
  --openbot-text-xl: 16px;
  --openbot-text-2xl: 18px;
  --openbot-text-3xl: 24px;
  --openbot-leading-sm: 16px;
  --openbot-leading-md: 18px;
  --openbot-leading-lg: 20px;
  --openbot-leading-xl: 22px;
  --openbot-leading-2xl: 24px;
  --openbot-leading-3xl: 30px;
  --openbot-text-display: 32px;
  --openbot-text-usage-total: clamp(2rem, 5cqi, 3.5rem);
  --openbot-leading-display: 38px;
  --openbot-text-hero: clamp(3rem, 8vw, 6.5rem);
  --openbot-glyph-xs: 7px;
  --openbot-glyph-sm: 8px;
  --openbot-weight-regular: 400;
  --openbot-weight-medium: 500;
  --openbot-weight-semibold: 600;
  --openbot-weight-bold: 700;
  --openbot-tracking-tight: -0.1px;
  --openbot-tracking-normal: 0;
  --openbot-tracking-wide: 0.02em;
  --openbot-space-0-5: 2px;
  --openbot-space-1: 4px;
  --openbot-space-1-5: 6px;
  --openbot-space-2: 8px;
  --openbot-space-3: 12px;
  --openbot-space-4: 16px;
  --openbot-space-6: 24px;
  --openbot-space-8: 32px;
  --openbot-scrollbar-size: 8px;
  --openbot-radius-xs: 4px;
  --openbot-radius-sm: 6px;
  --openbot-radius-md: 8px;
  --openbot-radius-lg: 12px;
  --openbot-radius-card: 14px;
  --openbot-radius-xl: 20px;
  --openbot-radius-bubble: 22px;
  --openbot-radius-bubble-inset: calc(var(--openbot-radius-bubble) - var(--openbot-space-3) - 1px);
  --openbot-radius-modal: 30px;
  --openbot-radius-media-preview: calc(var(--openbot-radius-lg) - 1px);
  --openbot-radius-pill: 999px;
  --openbot-radius-logo: 20%;
  --openbot-control-xs: 24px;
  --openbot-control-sm: 28px;
  --openbot-control-md: 32px;
  --openbot-control-lg: 36px;
  --openbot-control-xl: 40px;
  --openbot-switch-width: 36px;
  --openbot-switch-height: 20px;
  --openbot-switch-thumb: 16px;
  --openbot-switch-inset: 2px;
  --openbot-switch-sm-width: 24px;
  --openbot-switch-sm-height: 14px;
  --openbot-switch-sm-thumb: 12px;
  --openbot-switch-sm-inset: 1px;
  --openbot-icon-stroke: 1.5;
  --openbot-icon-xs: 12px;
  --openbot-icon-sm: 14px;
  --openbot-icon-md: 16px;
  --openbot-icon-lg: 20px;
  --openbot-chat-entry-gap: var(--openbot-space-3);
  --openbot-chat-marker-gap: var(--openbot-space-1);
  --openbot-chat-marker-height: var(--openbot-control-xs);
  --openbot-chat-marker-avatar: var(--openbot-icon-md);
  --openbot-chat-marker-width: 680px;
  --openbot-duration-fast: 120ms;
  --openbot-duration-hover: 0ms;
  --openbot-duration-dialog: 100ms;
  --openbot-duration-normal: 160ms;
  --openbot-duration-slow: 200ms;
  --openbot-duration-overlay: 240ms;
  --openbot-duration-toast-enter: 340ms;
  --openbot-duration-toast-exit: 220ms;
  --openbot-duration-island-content: 340ms;
  --openbot-duration-island-content-exit: 220ms;
  --openbot-agent-activity-exit-delay: 500ms;
  --openbot-loading-indicator-delay: 400ms;
  --openbot-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --openbot-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --openbot-shadow-raised: 0 12px 32px var(--openbot-shadow-popover-ambient);
  --openbot-shadow-card: 0 0 0 transparent;
  --openbot-shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.48);
  --openbot-focus-ring: 0 0 0 3px var(--openbot-accent-soft);
  --openbot-layer-dropdown: 40;
  --openbot-layer-popover: 60;
  --openbot-layer-dialog: 100;
  --openbot-layer-dialog-host: calc(var(--openbot-layer-dialog) + var(--openbot-layer-popover));
  --openbot-layer-toast: 120;
  --openbot-layer-tooltip: 240;
}
[data-provider] {
  --openbot-provider-current: currentcolor;
}
[data-provider="codex"] {
  --openbot-provider-current: var(--openbot-provider-codex);
}
[data-provider="claude"] {
  --openbot-provider-current: var(--openbot-provider-claude);
}
[data-provider="grok"] {
  --openbot-provider-current: var(--openbot-provider-grok);
}
[data-provider="opencode"] {
  --openbot-provider-current: var(--openbot-text-primary);
}
[data-provider="antigravity"] {
  --openbot-provider-current: var(--openbot-provider-antigravity);
}
[data-provider="cursor"] {
  --openbot-provider-current: var(--openbot-text-primary);
}
[data-provider="cline"] {
  --openbot-provider-current: var(--openbot-text-primary);
}
[data-provider="acp"] {
  --openbot-provider-current: var(--openbot-text-primary);
}
.app-logo {
  --app-logo-background: var(--openbot-logo-production);
  --app-logo-eye: var(--openbot-logo-production-eye);
  position: relative;
  display: inline-block;
  overflow: hidden;
  border-radius: var(--openbot-radius-logo);
  isolation: isolate;
}
.app-logo[data-interactive="true"]:focus {
  outline: none;
}
.app-logo[data-interactive="true"]:focus-visible {
  box-shadow: inset 0 0 0 2px var(--openbot-text-primary);
}
.app-logo[data-variant="dev"] {
  --app-logo-background: var(--openbot-logo-dev);
  --app-logo-eye: var(--openbot-logo-eye);
}
.app-logo[data-variant="preview"] {
  --app-logo-background: var(--openbot-logo-preview);
  --app-logo-eye: var(--openbot-logo-eye);
}
.app-logo-background {
  fill: var(--app-logo-background);
}
.app-logo-eye {
  fill: none;
  stroke: var(--app-logo-eye);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 9.5px;
  pointer-events: none;
  transform-box: view-box;
}
.app-logo-eye-motion {
  pointer-events: none;
  transform: translate(var(--app-logo-eye-x, 0%), var(--app-logo-eye-y, 0%)) scaleY(var(--app-logo-eye-squint, 1));
  transform-origin: center;
  transition: transform var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1);
}
.app-logo-eye-left {
  transform-origin: 28.7% 48.7%;
}
.app-logo-eye-right {
  transform-origin: 71.2% 48.8%;
}
.app-logo[data-animation="blink"] .app-logo-eye {
  animation: app-logo-blink 4.8s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
.app-logo[data-animation="look-around"] .app-logo-eye {
  animation: app-logo-look-around 6s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
.app-logo[data-animation="surprised"] .app-logo-eye {
  animation: app-logo-surprised 5.4s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
.app-logo[data-click-reaction="wink"] .app-logo-eye-left {
  animation: app-logo-wink-left 360ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.app-logo[data-click-reaction="wink"] .app-logo-eye-right {
  animation: app-logo-wink-right 360ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.app-logo[data-easter-egg="party"] .app-logo-background {
  animation: app-logo-party-colors 1.2s cubic-bezier(0.77, 0, 0.175, 1) both;
}
.app-logo[data-easter-egg="party"] .app-logo-eye-left {
  animation: app-logo-party-left 1.2s cubic-bezier(0.77, 0, 0.175, 1) both;
}
.app-logo[data-easter-egg="party"] .app-logo-eye-right {
  animation: app-logo-party-right 1.2s cubic-bezier(0.77, 0, 0.175, 1) both;
}
@keyframes app-logo-blink {
  0%, 44%, 48%, 100% {
    transform: scaleY(1);
  }
  46% {
    transform: scaleY(0.08);
  }
}
@keyframes app-logo-look-around {
  0%, 30%, 47%, 64%, 100% {
    transform: translateX(0);
  }
  35%, 42% {
    transform: translateX(-3.5%);
  }
  52%, 59% {
    transform: translateX(3.5%);
  }
}
@keyframes app-logo-surprised {
  0%, 40%, 56%, 100% {
    transform: translateY(0) scale(1);
  }
  44%, 51% {
    transform: translateY(-1.5%) scaleX(0.94) scaleY(1.12);
  }
}
@keyframes app-logo-wink-left {
  0%, 100% {
    transform: scaleY(1);
  }
  38%, 58% {
    transform: scaleY(0.08);
  }
}
@keyframes app-logo-wink-right {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  48% {
    transform: translateY(-1%) scaleX(0.96) scaleY(1.08);
  }
}
@keyframes app-logo-party-colors {
  0%, 100% {
    fill: var(--app-logo-background);
  }
  22% {
    fill: var(--openbot-logo-dev);
  }
  48% {
    fill: var(--openbot-logo-preview);
  }
  74% {
    fill: var(--openbot-logo-production);
  }
}
@keyframes app-logo-party-left {
  0%, 100% {
    transform: translate(0) rotate(0);
  }
  25% {
    transform: translateY(-6%) rotate(-8deg);
  }
  50% {
    transform: translate(4%, 2%) rotate(8deg);
  }
  75% {
    transform: translate(-4%, -2%) rotate(-4deg);
  }
}
@keyframes app-logo-party-right {
  0%, 100% {
    transform: translate(0) rotate(0);
  }
  25% {
    transform: translateY(6%) rotate(8deg);
  }
  50% {
    transform: translate(-4%, -2%) rotate(-8deg);
  }
  75% {
    transform: translate(4%, 2%) rotate(4deg);
  }
}
@media (hover: hover) and (pointer: fine) {
  .app-logo[data-interactive="true"] {
    cursor: pointer;
  }
}
@media (prefers-reduced-motion: reduce) {
  .app-logo[data-animation] .app-logo-eye, .app-logo[data-click-reaction] .app-logo-eye, .app-logo[data-easter-egg] .app-logo-eye, .app-logo[data-easter-egg] .app-logo-background {
    animation: none;
    transform: none;
  }
  .app-logo-eye-motion {
    transition: none;
    transform: none;
  }
}
:where(.ui-text, .ui-heading) {
  margin: 0;
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
}
.ui-server-gradient-logo {
  width: var(--server-gradient-logo-size, 40px);
  height: var(--server-gradient-logo-size, 40px);
  display: block;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: var(--server-gradient-logo-radius, var(--openbot-radius-lg));
  background-color: var(--server-gradient-base);
  background-image: var(--server-gradient-layers);
  background-repeat: no-repeat;
  outline: 1px solid var(--openbot-image-outline);
  outline-offset: -1px;
}
:where(.ui-text)[data-tone="secondary"], :where(.ui-heading)[data-tone="secondary"] {
  color: var(--openbot-text-secondary);
}
:where(.ui-text)[data-tone="muted"], :where(.ui-heading)[data-tone="muted"] {
  color: var(--openbot-text-muted);
}
:where(.ui-text, .ui-heading)[data-tone="danger"] {
  color: var(--openbot-danger);
}
:where(.ui-text, .ui-heading)[data-tone="success"] {
  color: var(--openbot-success);
}
:where(.ui-text, .ui-heading)[data-tone="warning"] {
  color: var(--openbot-warning);
}
:where(.ui-text)[data-variant="caption"] {
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-sm);
}
:where(.ui-text)[data-variant="label-sm"] {
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
}
:where(.ui-text)[data-variant="label"] {
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
}
:where(.ui-text)[data-variant="body-sm"] {
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-md);
}
:where(.ui-text)[data-variant="body"] {
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-lg);
}
:where(.ui-heading)[data-size="sm"] {
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
:where(.ui-heading)[data-size="md"] {
  font-size: var(--openbot-text-xl);
  line-height: var(--openbot-leading-xl);
}
:where(.ui-heading)[data-size="lg"] {
  font-size: var(--openbot-text-2xl);
  line-height: var(--openbot-leading-2xl);
}
:where(.ui-heading) {
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: var(--openbot-tracking-tight);
}
.ui-text-truncate {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:where(.ui-button) {
  min-width: 0;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-1-5);
  border: 1px solid transparent;
  border-radius: var(--openbot-radius-md);
  padding: 0 var(--openbot-space-4);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: 1;
  text-decoration: none;
  user-select: none;
  white-space: nowrap;
  transition: background-color var(--openbot-duration-hover) ease, border-color var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease, box-shadow var(--openbot-duration-hover) ease, opacity var(--openbot-duration-hover) ease;
}
.ui-button {
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-medium);
}
:where(.ui-button-size-xs) {
  height: var(--openbot-control-xs);
  padding-inline: var(--openbot-space-2);
  font-size: var(--openbot-text-sm);
}
:where(.ui-button-size-sm) {
  height: var(--openbot-control-md);
  padding-inline: var(--openbot-space-3);
  font-size: var(--openbot-text-sm);
}
:where(.ui-button-size-default) {
  height: var(--openbot-control-lg);
}
:where(.ui-button-size-lg) {
  height: var(--openbot-control-xl);
  padding-inline: var(--openbot-space-6);
}
:where(.ui-button-variant-default) {
  background: var(--openbot-surface-light);
  color: var(--openbot-text-on-light);
}
:where(.ui-button-variant-outline) {
  border-color: var(--openbot-border);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-secondary);
}
:where(.ui-button-variant-secondary) {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}
:where(.ui-button-variant-ghost) {
  background: transparent;
  color: var(--openbot-text-muted);
}
:where(.ui-button-variant-destructive) {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
}
:where(.ui-button-variant-destructive-ghost) {
  background: transparent;
  color: var(--openbot-text-muted);
}
:where(.ui-button-variant-link) {
  height: auto;
  border-radius: var(--openbot-radius-xs);
  background: transparent;
  padding: 0;
  color: var(--openbot-text-primary);
  text-underline-offset: 4px;
}
@media (hover: hover) and (pointer: fine) and (min-width: 601px) {
  :where(.ui-button-variant-default):hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-surface-light);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--openbot-surface-light) 82%, transparent);
    }
  }
  :where(.ui-button-variant-outline):hover:not(:disabled):not([data-disabled]), :where(.ui-button-variant-ghost):hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-bg-control-hover);
    color: var(--openbot-text-primary);
  }
  :where(.ui-button-variant-secondary):hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-bg-control-active);
  }
  :where(.ui-button-variant-destructive):hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-danger-soft-hover);
    color: var(--openbot-danger);
  }
  :where(.ui-button-variant-destructive-ghost):hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-danger-soft);
    color: var(--openbot-danger);
  }
  :where(.ui-button-variant-link):hover:not(:disabled):not([data-disabled]) {
    text-decoration: underline;
  }
}
:where(.ui-button-variant-outline, .ui-button-variant-secondary, .ui-button-variant-ghost)[aria-expanded="true"] {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}
:where(.ui-button):focus-visible {
  outline: 0;
  box-shadow: var(--openbot-focus-ring);
}
:where(.ui-button-variant-destructive):focus-visible {
  border-color: var(--openbot-danger-focus);
}
:where(.ui-button-variant-destructive, .ui-button-variant-destructive-ghost):focus-visible {
  box-shadow: 0 0 0 3px var(--openbot-danger-focus);
}
:where(.ui-button)[aria-invalid="true"] {
  border-color: var(--openbot-danger-border);
  box-shadow: 0 0 0 3px var(--openbot-danger-focus);
}
:where(.ui-button):disabled, :where(.ui-button)[data-disabled] {
  cursor: default;
  opacity: 0.42;
  pointer-events: none;
}
.ui-button-full {
  width: 100%;
}
:where(.ui-icon-button) {
  padding: 0;
}
:where(.ui-button-size-icon-xs) {
  width: var(--openbot-control-xs);
  height: var(--openbot-control-xs);
  padding: 0;
}
:where(.ui-button-size-icon-sm) {
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  padding: 0;
}
:where(.ui-button-size-icon) {
  width: var(--openbot-control-lg);
  height: var(--openbot-control-lg);
  padding: 0;
}
:where(.ui-button-size-icon-lg) {
  width: var(--openbot-control-xl);
  height: var(--openbot-control-xl);
  padding: 0;
}
:where(.ui-icon-button) svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
:where(.ui-button-size-icon-xs) svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.ui-removable-image {
  position: relative;
}
.ui-image-remove-button {
  position: absolute;
  z-index: 1;
  top: -8px;
  right: -8px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface-raised);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-bg-surface-raised) 72%, transparent);
  }
  backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  opacity: 0;
  scale: 0.9;
  transition: opacity var(--openbot-duration-hover) ease, scale var(--openbot-duration-hover) ease, background-color var(--openbot-duration-hover) ease;
}
.ui-removable-image:hover > .ui-image-remove-button, .ui-removable-image:focus-within > .ui-image-remove-button {
  opacity: 1;
  scale: 1;
}
@media (hover: none) {
  .ui-image-remove-button {
    opacity: 1;
    scale: 1;
  }
}
:where(.z-badge) {
  width: fit-content;
  height: 22px;
  min-width: 0;
  display: inline-flex;
  overflow: hidden;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-1);
  border: 1px solid transparent;
  border-radius: var(--openbot-radius-pill);
  padding: var(--openbot-space-0-5) var(--openbot-space-2);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
  transition: border-color var(--openbot-duration-fast) var(--openbot-ease-out), background-color var(--openbot-duration-fast) var(--openbot-ease-out), color var(--openbot-duration-fast) var(--openbot-ease-out);
  white-space: nowrap;
}
:where(.z-badge) > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
:where(.z-badge) > svg {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  pointer-events: none;
}
:where(.z-badge):has(> [data-icon="inline-start"]) {
  padding-left: var(--openbot-space-1-5);
}
:where(.z-badge):has(> [data-icon="inline-end"]) {
  padding-right: var(--openbot-space-1-5);
}
:where(.z-badge-variant-default) {
  background: var(--openbot-accent);
  color: var(--openbot-text-primary);
}
:where(.z-badge-variant-secondary) {
  background: var(--openbot-bg-control);
  color: var(--openbot-text-secondary);
}
:where(.z-badge-variant-outline) {
  border-color: var(--openbot-border-strong);
  background: transparent;
  color: var(--openbot-text-secondary);
}
:where(.z-badge-variant-ghost) {
  background: transparent;
  color: var(--openbot-text-secondary);
}
:where(.z-badge-variant-link) {
  background: transparent;
  color: var(--openbot-accent-text);
  text-decoration: underline;
  text-underline-offset: 4px;
}
:where(.z-badge-variant-primary-light) {
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
}
:where(.z-badge-variant-success-light) {
  background: var(--openbot-success-soft);
  color: var(--openbot-success);
}
:where(.z-badge-variant-warning-light) {
  background: var(--openbot-warning-soft);
  color: var(--openbot-warning);
}
:where(.z-badge-variant-destructive), :where(.z-badge-variant-destructive-light) {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
}
:where(.z-badge-variant-new) {
  background: var(--openbot-badge-new-soft);
  color: var(--openbot-badge-new);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: 0.01em;
}
:where(.z-badge-variant-info-light) {
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
}
:where(.z-badge-variant-primary-outline) {
  border-color: var(--openbot-border-strong);
  background: transparent;
  color: var(--openbot-accent-text);
}
:where(.z-badge-variant-success-outline) {
  border-color: var(--openbot-border-strong);
  background: transparent;
  color: var(--openbot-success);
}
:where(.z-badge-variant-warning-outline) {
  border-color: var(--openbot-border-strong);
  background: transparent;
  color: var(--openbot-warning);
}
:where(.z-badge-variant-destructive-outline) {
  border-color: var(--openbot-border-strong);
  background: transparent;
  color: var(--openbot-danger);
}
:where(.z-badge-variant-info-outline) {
  border-color: var(--openbot-border-strong);
  background: transparent;
  color: var(--openbot-accent-text);
}
:where(.ui-glyph-20) {
  stroke-width: calc(var(--openbot-icon-stroke) * 20 / 24);
}
:where(.ui-glyph-16) {
  stroke-width: calc(var(--openbot-icon-stroke) * 16 / 24);
}
:where(.ui-checkbox) {
  position: relative;
  display: inline-flex;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
}
.ui-checkbox-input {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
}
.ui-checkbox-visual {
  display: inline-flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-bg-control);
  color: transparent;
}
.ui-checkbox-input:checked + .ui-checkbox-visual {
  border-color: var(--openbot-accent);
  background: var(--openbot-accent);
  color: var(--openbot-text-primary);
}
.ui-checkbox-input:focus-visible + .ui-checkbox-visual {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}
.ui-checkbox-visual svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  stroke-width: 2.5;
}
:where(.ui-input, .ui-textarea, .ui-native-select) {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  outline: 0;
  background: var(--openbot-bg-control);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  transition: background-color var(--openbot-duration-hover) ease, border-color var(--openbot-duration-hover) ease, box-shadow var(--openbot-duration-hover) ease;
}
:where(.ui-input, .ui-native-select)[data-size="sm"] {
  height: var(--openbot-control-sm);
  padding-inline: var(--openbot-space-2);
}
:where(.ui-input, .ui-native-select)[data-size="md"] {
  height: var(--openbot-control-md);
  padding-inline: var(--openbot-space-3);
}
:where(.ui-input, .ui-native-select)[data-size="lg"] {
  height: var(--openbot-control-lg);
  padding-inline: var(--openbot-space-3);
}
:where(.ui-textarea) {
  min-height: 76px;
  resize: vertical;
  padding: var(--openbot-space-2) var(--openbot-space-3);
}
:where(.ui-textarea)::-webkit-resizer {
  background-color: var(--openbot-bg-control);
  background-image: linear-gradient( 135deg, transparent 46%, var(--openbot-text-muted) 46% 50%, transparent 50% 62%, var(--openbot-text-muted) 62% 66%, transparent 66% );
  background-repeat: no-repeat;
  background-position: 100% 100%;
  background-size: 50% 50%;
}
:where(.ui-input, .ui-textarea)::placeholder {
  color: var(--openbot-text-placeholder);
}
:where(.ui-input, .ui-textarea, .ui-native-select):focus-visible {
  border-color: var(--openbot-border-focus);
  box-shadow: var(--openbot-focus-ring);
}
:where(.ui-input, .ui-textarea, .ui-native-select)[aria-invalid="true"] {
  border-color: var(--openbot-danger);
}
:where(.ui-input, .ui-textarea, .ui-native-select):disabled {
  cursor: not-allowed;
  opacity: 0.42;
}
.ui-select {
  width: 100%;
  min-width: 0;
}
.ui-select-trigger {
  width: 100%;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-1-5);
  cursor: pointer;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  outline: 0;
  background: transparent;
  padding: var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-2) 10px;
  box-shadow: 0 1px 2px var(--openbot-shadow-popover-ambient);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  text-align: left;
  transition: background-color var(--openbot-duration-hover) ease, border-color var(--openbot-duration-hover) ease, box-shadow var(--openbot-duration-hover) ease;
}
.ui-select-trigger[data-size="sm"] {
  height: var(--openbot-control-md);
  font-size: var(--openbot-text-sm);
}
.ui-select-trigger[data-size="md"] {
  height: var(--openbot-control-lg);
}
.ui-select-trigger[data-expanded] {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-hover);
}
.ui-select .ui-select-trigger:focus-visible {
  border-color: var(--openbot-border-strong);
  outline: 0;
  box-shadow: 0 0 0 3px var(--openbot-hover);
}
.ui-select-trigger[data-disabled] {
  cursor: not-allowed;
  opacity: 0.42;
}
.ui-select-trigger[aria-invalid="true"] {
  border-color: var(--openbot-danger);
  box-shadow: 0 0 0 3px var(--openbot-danger-soft);
}
@media (hover: hover) and (pointer: fine) {
  .ui-select-trigger:hover:not([data-disabled]) {
    background: var(--openbot-hover);
  }
}
.ui-select-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-select-trigger-icon {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: var(--openbot-text-muted);
}
.ui-select-trigger-icon svg {
  width: 100%;
  height: 100%;
}
.ui-select-content {
  z-index: var(--openbot-layer-popover);
  max-height: 320px;
  min-width: 144px;
  overflow: hidden auto;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface-raised);
  box-shadow: 0 4px 6px -1px var(--openbot-shadow-popover-ambient), 0 2px 4px -2px var(--openbot-shadow-popover-ambient), 0 0 0 1px var(--openbot-border-strong);
  color: var(--openbot-text-primary);
  transform-origin: var(--kb-select-content-transform-origin);
  animation: ui-select-content-in var(--openbot-duration-dialog) var(--openbot-ease-out) both;
}
.ui-select-listbox {
  margin: 0;
  padding: var(--openbot-space-1);
  outline: 0;
}
.ui-select-item {
  position: relative;
  display: flex;
  align-items: center;
  cursor: default;
  user-select: none;
  border-radius: var(--openbot-radius-sm);
  outline: 0;
  padding: var(--openbot-space-1-5) var(--openbot-space-8) var(--openbot-space-1-5) var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  transition: background-color var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease;
}
.ui-select-item[data-highlighted] {
  background: var(--openbot-hover);
  color: var(--openbot-text-primary);
}
.ui-select-item[data-selected] {
  background: transparent;
  color: var(--openbot-text-primary);
}
.ui-select-item[data-selected][data-highlighted] {
  background: var(--openbot-hover);
}
.ui-select-item[data-disabled] {
  pointer-events: none;
  opacity: 0.42;
}
.ui-select-item-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-select-item-indicator {
  position: absolute;
  right: var(--openbot-space-2);
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
}
.ui-select-item-indicator svg {
  width: 100%;
  height: 100%;
}
@keyframes ui-select-content-in {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ui-select-content {
    animation-name: ui-select-content-fade-in;
  }
}
@keyframes ui-select-content-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.ui-field {
  display: grid;
  gap: var(--openbot-space-1-5);
}
.ui-label {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
}
.ui-field-required, .ui-field-error {
  color: var(--openbot-danger);
}
.ui-field-required {
  margin-left: var(--openbot-space-0-5);
}
.ui-field-description, .ui-field-error {
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.ui-field-description {
  color: var(--openbot-text-muted);
}
.ui-switch {
  --ui-switch-thumb-size: var(--openbot-switch-thumb);
  --ui-switch-inset: var(--openbot-switch-inset);
  --ui-switch-travel: calc(var(--openbot-switch-width) - var(--ui-switch-thumb-size) - (var(--ui-switch-inset) * 2));
  position: relative;
  z-index: 0;
  width: var(--openbot-switch-width);
  height: var(--openbot-switch-height);
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  outline: none;
  background: var(--openbot-bg-control);
  box-shadow: inset 0 0 0 1px var(--openbot-border-strong), 0 1px 2px var(--openbot-shadow-ring);
  transition: background-color var(--openbot-duration-hover) ease, box-shadow var(--openbot-duration-hover) ease, opacity var(--openbot-duration-hover) ease;
}
.ui-switch[data-size="sm"] {
  --ui-switch-thumb-size: var(--openbot-switch-sm-thumb);
  --ui-switch-inset: var(--openbot-switch-sm-inset);
  --ui-switch-travel: calc(var(--openbot-switch-sm-width) - var(--ui-switch-thumb-size) - (var(--ui-switch-inset) * 2));
  width: var(--openbot-switch-sm-width);
  height: var(--openbot-switch-sm-height);
}
.ui-switch[data-checked] {
  background: var(--openbot-surface-light);
}
.ui-switch[data-invalid] {
  box-shadow: 0 0 0 3px var(--openbot-danger-focus);
}
.ui-switch:not([data-pointer-focus]):has(.ui-switch-input:focus-visible) {
  box-shadow: var(--openbot-focus-ring);
}
.ui-switch[data-invalid]:not([data-pointer-focus]):has(.ui-switch-input:focus-visible) {
  box-shadow: 0 0 0 3px var(--openbot-danger-focus);
}
.ui-switch-field {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
}
.ui-switch-copy {
  min-width: 0;
  display: grid;
  gap: var(--openbot-space-0-5);
}
.ui-switch-label {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
  cursor: pointer;
}
.ui-switch-description {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.ui-switch-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.ui-switch-control {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: inherit;
  cursor: pointer;
}
.ui-switch-control[data-dragging] {
  cursor: grabbing;
}
.ui-switch-thumb {
  position: absolute;
  top: 50%;
  left: 0;
  width: var(--ui-switch-thumb-size);
  height: var(--ui-switch-thumb-size);
  display: block;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-primary);
  box-shadow: 0 1px 2px var(--openbot-shadow-ring);
  transform: translate3d( calc(var(--ui-switch-inset) + (var(--ui-switch-position, 0) * var(--ui-switch-travel))), -50%, 0 ) scale(var(--ui-switch-scale-x, 1), var(--ui-switch-scale-y, 1));
  transform-origin: center;
  will-change: transform;
  transition: background-color var(--openbot-duration-fast) var(--openbot-ease-out);
}
.ui-switch-thumb[data-checked] {
  background: var(--openbot-text-on-light);
}
.ui-slider-field {
  width: 100%;
  display: grid;
  gap: var(--openbot-space-1-5);
}
.ui-slider-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--openbot-space-3);
}
.ui-slider-label {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
}
.ui-slider-value {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  line-height: var(--openbot-leading-sm);
}
.ui-slider-description {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.ui-slider-track {
  position: relative;
  height: 4px;
  margin-block: var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-border-strong);
  cursor: pointer;
}
.ui-slider-track::before {
  content: "";
  position: absolute;
  inset: -10px 0;
}
.ui-slider-fill {
  position: absolute;
  height: 100%;
  border-radius: inherit;
  background: var(--openbot-text-secondary);
}
.ui-slider-thumb {
  top: calc(50% - (var(--openbot-switch-thumb) / 2));
  width: var(--openbot-switch-thumb);
  height: var(--openbot-switch-thumb);
  display: block;
  border-radius: var(--openbot-radius-pill);
  outline: none;
  background: var(--openbot-text-primary);
  box-shadow: 0 1px 2px var(--openbot-shadow-ring);
  cursor: grab;
}
.ui-slider-thumb:focus-visible {
  box-shadow: var(--openbot-focus-ring);
}
.ui-slider-thumb[data-dragging] {
  cursor: grabbing;
}
.ui-seek-slider {
  display: flex;
  touch-action: none;
}
.ui-seek-slider-track {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.ui-seek-slider-picture {
  display: flex;
}
.ui-seek-slider[data-disabled] .ui-seek-slider-track {
  cursor: default;
}
.ui-seek-slider-thumb {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  display: block;
  border-radius: var(--openbot-radius-pill);
  outline: none;
  background: var(--openbot-text-primary);
  opacity: 0;
}
.ui-seek-slider-track:hover .ui-seek-slider-thumb, .ui-seek-slider-thumb:focus-visible, .ui-seek-slider-thumb[data-dragging] {
  opacity: 1;
}
.ui-seek-slider-thumb:focus-visible {
  box-shadow: var(--openbot-focus-ring);
}
.ui-slider-field[data-disabled] {
  opacity: 0.5;
}
.ui-slider-field[data-disabled] .ui-slider-track, .ui-slider-field[data-disabled] .ui-slider-thumb {
  cursor: not-allowed;
}
.ui-switch[data-disabled] {
  opacity: 0.5;
}
.ui-switch[data-disabled] .ui-switch-control {
  cursor: not-allowed;
}
.ui-card {
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-surface);
}
.ui-item-group {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-surface);
}
.ui-item-group[data-surface="subtle"] {
  background: var(--openbot-bg-control);
}
.ui-item-group > :not(:first-child) {
  border-top: 1px solid var(--openbot-border);
}
.ui-item {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  padding-inline: var(--openbot-space-4);
}
.ui-item[data-size="compact"] {
  min-height: 52px;
  padding-block: var(--openbot-space-2);
}
.ui-item[data-size="default"] {
  min-height: 64px;
  padding-block: var(--openbot-space-3);
}
.ui-item[data-size="spacious"] {
  min-height: 72px;
  padding-block: var(--openbot-space-4);
}
.ui-item-media, .ui-item-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}
.ui-item-media {
  color: var(--openbot-text-muted);
}
.ui-item-content {
  min-width: 0;
  display: grid;
  flex: 1 1 auto;
  gap: var(--openbot-space-0-5);
}
.ui-item-title {
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-item-description {
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-item-actions {
  justify-content: flex-end;
  gap: var(--openbot-space-2);
}
.ui-item.ui-dynamic-island-identity {
  min-width: 0;
  width: 100%;
  min-height: 43px;
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: 0;
}
.dynamic-island-external .ui-dynamic-island-identity {
  grid-template-columns: 38px minmax(0, 1fr) auto;
}
.ui-dynamic-island-identity-avatar {
  width: 35px;
  height: 35px;
}
.dynamic-island-external .ui-dynamic-island-identity-avatar {
  width: 38px;
  height: 38px;
}
.ui-dynamic-island-identity-copy {
  gap: 2px;
}
.ui-dynamic-island-identity-title {
  display: flex;
  align-items: baseline;
  gap: var(--openbot-space-1);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-sm);
}
.ui-dynamic-island-identity-name {
  min-width: 0;
  max-width: 26ch;
  overflow: hidden;
  flex: 0 1 auto;
  color: var(--openbot-island-identity-name);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-dynamic-island-identity-status {
  flex: 0 0 auto;
  color: var(--openbot-text-secondary);
}
.ui-dynamic-island-identity-description {
  display: -webkit-box;
  overflow: hidden;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-sm);
  overflow-wrap: anywhere;
  text-wrap: pretty;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.ui-dynamic-island-identity-trailing {
  align-self: start;
  padding-top: 2px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  line-height: var(--openbot-leading-sm);
  white-space: nowrap;
}
.ui-questionnaire {
  min-width: 0;
  display: grid;
  gap: var(--openbot-space-3);
}
.ui-questionnaire-progress {
  color: var(--openbot-text-muted);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  line-height: var(--openbot-leading-sm);
}
.ui-questionnaire-item {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}
.ui-questionnaire-title {
  width: 100%;
  padding: 0;
  color: var(--openbot-text-primary);
}
.ui-questionnaire-description {
  margin: 0;
  color: var(--openbot-text-muted);
}
.ui-questionnaire-choices {
  min-width: 0;
  display: grid;
}
.ui-questionnaire-choice {
  position: relative;
  min-width: 0;
  display: block;
  cursor: pointer;
  outline: 0;
}
.ui-questionnaire-choice[data-disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}
.ui-questionnaire-choice-input {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: inherit;
  opacity: 0;
}
.ui-questionnaire-choice:focus-within {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: -2px;
}
.ui-questionnaire-error {
  margin: 0;
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.ui-questionnaire-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.ui-settings-section {
  display: grid;
  gap: var(--openbot-space-2);
}
.ui-settings-section-header {
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  padding-inline: var(--openbot-space-1);
}
.ui-settings-section-copy {
  min-width: 0;
  display: grid;
  gap: var(--openbot-space-1);
}
.ui-settings-section-heading {
  font-weight: var(--openbot-weight-regular);
}
.ui-settings-section-description {
  display: block;
}
.ui-settings-section-actions {
  min-width: 0;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--openbot-space-2);
}
.ui-qr-code {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-qr-background);
}
.ui-qr-code > * {
  grid-area: 1 / 1;
}
.ui-qr-code > img {
  width: 100%;
  height: 100%;
  display: block;
}
.ui-qr-code-mark {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  color: var(--openbot-text-on-light);
  visibility: hidden;
}
.ui-qr-code-mark[data-ready] {
  visibility: visible;
}
.ui-alert {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-3);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  padding: var(--openbot-space-3) var(--openbot-space-4);
  color: var(--openbot-text-muted);
}
.ui-alert[data-tone="success"] {
  border-color: var(--openbot-success-soft);
  background: var(--openbot-success-wash);
  color: var(--openbot-success);
}
.ui-alert[data-tone="warning"] {
  border-color: var(--openbot-warning-soft);
  background: var(--openbot-warning-soft);
  color: var(--openbot-warning);
}
.ui-alert[data-tone="danger"] {
  border-color: var(--openbot-danger-soft);
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
}
.ui-alert-icon {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}
.ui-alert-icon svg {
  width: 100%;
  height: 100%;
}
.ui-alert-content {
  min-width: 0;
  display: grid;
  gap: var(--openbot-space-0-5);
}
.ui-alert-title {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
}
.ui-alert-description {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.ui-alert[data-tone] .ui-alert-description {
  color: var(--openbot-text-secondary);
}
.ui-alert-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
}
.ui-progress {
  width: 100%;
}
.ui-progress-track {
  width: 100%;
  height: 3px;
  overflow: hidden;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-border-strong);
}
.ui-progress-fill {
  width: var(--kb-progress-fill-width, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--openbot-text-secondary);
  transition: width var(--openbot-duration-normal) var(--openbot-ease-out);
}
.ui-progress-fill[data-indeterminate] {
  width: 35%;
  animation: ui-progress-travel 1.4s var(--openbot-ease-in-out) infinite;
  transition: none;
}
@keyframes ui-progress-travel {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(286%);
  }
}
.ui-radial-progress {
  --ui-radial-progress-color: var(--openbot-accent);
  position: relative;
  display: grid;
  width: 104px;
  aspect-ratio: 1;
  place-items: center;
  color: var(--ui-radial-progress-color);
}
.ui-radial-progress[data-tone="warning"] {
  --ui-radial-progress-color: var(--openbot-warning);
}
.ui-radial-progress[data-tone="danger"] {
  --ui-radial-progress-color: var(--openbot-danger);
}
.ui-radial-progress-chart {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ui-radial-progress-track, .ui-radial-progress-indicator {
  fill: none;
}
.ui-radial-progress-track {
  stroke: var(--openbot-border-strong);
}
.ui-radial-progress-indicator {
  stroke: currentcolor;
  stroke-linecap: butt;
  transition: stroke-dasharray var(--openbot-duration-normal) var(--openbot-ease-out), stroke-dashoffset var(--openbot-duration-normal) var(--openbot-ease-out);
}
.ui-radial-progress-indicator[data-linecap="round"] {
  stroke-linecap: round;
}
.ui-radial-progress-content {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  color: var(--openbot-text-primary);
}
.ui-toaster[data-sonner-toaster][data-sonner-theme="dark"] {
  z-index: var(--openbot-layer-toast);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
  --normal-bg: var(--openbot-bg-surface-raised);
  --normal-bg-hover: var(--openbot-bg-control-hover);
  --normal-border: var(--openbot-border);
  --normal-border-hover: var(--openbot-border-focus);
  --normal-text: var(--openbot-text-primary);
  --border-radius: var(--openbot-radius-lg);
}
.ui-toaster [data-sonner-toast][data-styled="true"] {
  --ui-toast-tone: transparent;
  --ui-toast-motion-duration: var(--openbot-duration-toast-enter);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 0;
  row-gap: var(--openbot-space-2);
  min-height: var(--openbot-control-xl);
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border-color: transparent;
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface-raised);
  box-shadow: 0 0 0 1px var(--openbot-border), var(--openbot-shadow-raised);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  transition: transform var(--ui-toast-motion-duration) var(--openbot-ease-out), opacity var(--ui-toast-motion-duration) var(--openbot-ease-out), height var(--ui-toast-motion-duration) var(--openbot-ease-out), box-shadow var(--openbot-duration-normal) ease;
}
.ui-toaster [data-sonner-toast][data-styled="true"][data-removed="true"] {
  --ui-toast-motion-duration: var(--openbot-duration-toast-exit);
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-content] {
  grid-area: 1 / 2 / 2 / -1;
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-button] {
  grid-row: 2;
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-cancel] {
  grid-column: 2;
  justify-self: end;
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-action] {
  grid-column: 3;
}
.ui-toaster.ui-toaster-closeable [data-sonner-toast][data-styled="true"] [data-content], .ui-toaster [data-sonner-toast][data-styled="true"]:has([data-close-button]) [data-content] {
  padding-right: var(--openbot-space-6);
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-title] {
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-description] {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-wrap: pretty;
}
.ui-error-reference {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
  margin-top: var(--openbot-space-0-5);
  color: var(--openbot-text-muted);
}
.ui-error-reference-code {
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-xs);
  line-height: var(--openbot-leading-sm);
  user-select: text;
  overflow-wrap: anywhere;
}
.ui-toaster [data-sonner-toast][data-type="success"] {
  --ui-toast-tone: var(--openbot-success);
}
.ui-toaster [data-sonner-toast][data-type="info"] {
  --ui-toast-tone: var(--openbot-accent-text);
}
.ui-toaster [data-sonner-toast][data-type="warning"] {
  --ui-toast-tone: var(--openbot-warning);
}
.ui-toaster [data-sonner-toast][data-type="error"] {
  --ui-toast-tone: var(--openbot-danger);
}
.ui-toaster [data-sonner-toast][data-type="loading"] {
  --ui-toast-tone: var(--openbot-text-muted);
}
.ui-toaster [data-sonner-toast][data-type="success"] [data-icon], .ui-toaster [data-sonner-toast][data-type="info"] [data-icon], .ui-toaster [data-sonner-toast][data-type="warning"] [data-icon], .ui-toaster [data-sonner-toast][data-type="error"] [data-icon], .ui-toaster [data-sonner-toast][data-type="loading"] [data-icon] {
  color: var(--ui-toast-tone);
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-icon] {
  grid-area: 1 / 1;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  margin: 1px var(--openbot-space-3) 0 0;
}
.ui-toast-icon {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: var(--openbot-icon-stroke);
}
.ui-toast-loading-icon {
  animation: ui-spin 720ms linear infinite;
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-button] {
  height: var(--openbot-control-md);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control-hover);
  box-shadow: inset 0 0 0 1px var(--openbot-border);
  padding-inline: var(--openbot-space-3);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  transition: background-color var(--openbot-duration-normal) ease, color var(--openbot-duration-normal) ease, transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-cancel] {
  background: transparent;
  color: var(--openbot-text-secondary);
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-button]:focus-visible, .ui-toaster [data-sonner-toast]:focus-visible {
  outline: 0;
  box-shadow: var(--openbot-focus-ring);
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-close-button]:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 1px var(--openbot-border-strong), 0 0 0 2px var(--openbot-border-strong);
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-close-button] {
  top: var(--openbot-space-1);
  right: var(--openbot-space-1);
  left: auto;
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  color: var(--openbot-text-muted);
  pointer-events: auto;
  opacity: 1;
  transform: scale(1);
  transition: background-color var(--openbot-duration-normal) ease, box-shadow var(--openbot-duration-normal) ease, color var(--openbot-duration-normal) ease, opacity var(--openbot-duration-normal) ease, transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-close-button]::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--openbot-control-xl);
  height: var(--openbot-control-xl);
  content: "";
  transform: translate(-50%, -50%);
}
@media (hover: hover) and (pointer: fine) {
  .ui-toaster [data-sonner-toast][data-styled="true"] [data-close-button] {
    pointer-events: none;
    opacity: 0;
  }
  .ui-toaster [data-sonner-toast][data-styled="true"]:hover [data-close-button], .ui-toaster [data-sonner-toast][data-styled="true"]:focus-within [data-close-button], .ui-toaster [data-sonner-toast][data-styled="true"] [data-close-button]:focus-visible {
    pointer-events: auto;
    opacity: 1;
  }
  .ui-toaster [data-sonner-toast][data-styled="true"] [data-button]:hover {
    background: var(--openbot-bg-control-active);
  }
  .ui-toaster [data-sonner-toast][data-styled="true"] [data-close-button]:hover:not(:focus-visible) {
    background: var(--openbot-danger-soft);
    color: var(--openbot-danger);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ui-progress-fill, .ui-radial-progress-indicator {
    animation: none;
    transition: none;
  }
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-button]:active {
  transform: scale(0.96);
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-close-button]:active {
  transform: scale(0.96);
}
.ui-separator[data-orientation="horizontal"] {
  width: 100%;
  height: 1px;
  background: var(--openbot-border);
}
.ui-separator[data-orientation="vertical"] {
  width: 1px;
  height: 100%;
  background: var(--openbot-border);
}
.ui-spinner {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  display: inline-block;
  flex: 0 0 auto;
  border: 1.5px solid var(--openbot-border-strong);
  border-top-color: currentColor;
  border-radius: var(--openbot-radius-pill);
  animation: ui-spin 720ms linear infinite;
}
.ui-spinner[data-size="sm"] {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.ui-spinner[data-size="lg"] {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
}
@keyframes ui-spin {
  to {
    transform: rotate(360deg);
  }
}
.ui-skeleton {
  min-height: var(--openbot-leading-md);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-control-hover);
  animation: ui-skeleton-pulse 1.2s ease-in-out infinite;
}
@keyframes ui-skeleton-pulse {
  50% {
    opacity: 0.56;
  }
}
.ui-kbd {
  min-width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-bg-control);
  padding-inline: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  line-height: 1;
}
.ui-tooltip {
  position: relative;
  z-index: var(--openbot-layer-tooltip);
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-canvas);
  box-shadow: 0 0 0 1px var(--openbot-border-strong), var(--openbot-shadow-raised);
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-sm);
  opacity: 1;
  pointer-events: none;
  transform: translateY(0) scale(1);
  transform-origin: bottom center;
  transition: opacity var(--openbot-duration-fast) ease, transform var(--openbot-duration-fast) var(--openbot-ease-out);
  @starting-style {
    opacity: 0;
    transform: translateY(2px) scale(0.96);
  }
}
.ui-tooltip::after {
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 8px;
  height: 8px;
  background: var(--openbot-bg-canvas);
  box-shadow: 1px 1px 0 var(--openbot-border-strong);
  content: "";
  transform: translateX(-50%) rotate(45deg);
}
.ui-tooltip[data-placement="bottom"] {
  transform-origin: top center;
}
.ui-tooltip[data-placement="bottom"]::after {
  top: -4px;
  bottom: auto;
  box-shadow: -1px -1px 0 var(--openbot-border-strong);
}
.ui-tooltip:is([data-placement="left"], [data-placement="right"])::after {
  top: 50%;
  bottom: auto;
}
.ui-tooltip[data-placement="left"] {
  transform-origin: center right;
}
.ui-tooltip[data-placement="left"]::after {
  right: -4px;
  left: auto;
  box-shadow: 1px -1px 0 var(--openbot-border-strong);
  transform: translateY(-50%) rotate(45deg);
}
.ui-tooltip[data-placement="right"] {
  transform-origin: center left;
}
.ui-tooltip[data-placement="right"]::after {
  left: -4px;
  box-shadow: -1px 1px 0 var(--openbot-border-strong);
  transform: translateY(-50%) rotate(45deg);
}
@media (prefers-reduced-motion: reduce) {
  .ui-button, .ui-switch, .ui-switch-thumb, .ui-tooltip {
    transition-property: background-color, border-color, color, opacity;
  }
  .ui-spinner, .ui-skeleton {
    animation-duration: 1.8s;
  }
  .ui-toaster [data-sonner-toast], .ui-toaster [data-sonner-toast] > * {
    transition-duration: 0.01ms;
  }
  .ui-toast-loading-icon {
    animation: none;
  }
}
.ui-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--openbot-layer-dialog);
  display: grid;
  place-items: center;
  padding: var(--openbot-space-6);
  background: var(--openbot-dialog-overlay);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: ui-dialog-overlay-in var(--openbot-duration-overlay) var(--openbot-ease-out);
  -webkit-app-region: no-drag;
}
.ui-dialog-content {
  border: 0;
  border-radius: var(--openbot-radius-card);
  box-shadow: 0 0 0 1px var(--openbot-dialog-ring);
}
.ui-dialog-content[data-dialog-surface="unstyled"] {
  border-radius: 0;
  box-shadow: none;
}
.ui-stable-label {
  display: inline-grid;
}
.ui-stable-label-text, .ui-stable-label-sizer {
  grid-area: 1 / 1;
}
.ui-stable-label-sizer {
  visibility: hidden;
}
.ui-confirm-dialog-overlay {
  z-index: calc(var(--openbot-layer-dialog-host) + 2);
}
.ui-dialog-content.ui-confirm-dialog {
  width: min(460px, 100%);
  max-height: calc(100dvh - 2 * var(--openbot-space-6));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  outline: 0;
  border-radius: var(--openbot-radius-xl);
  background: var(--openbot-bg-sidebar);
  color: var(--openbot-text-primary);
  border: 1px solid var(--openbot-dialog-ring);
  box-shadow: none;
  animation: ui-confirm-dialog-in var(--openbot-duration-slow) var(--openbot-ease-out);
}
.ui-confirm-dialog-main {
  min-height: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--openbot-space-4);
  overflow-y: auto;
  padding: var(--openbot-space-6);
}
.ui-confirm-dialog-icon {
  width: var(--openbot-control-xl);
  height: var(--openbot-control-xl);
  display: grid;
  place-items: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-secondary);
}
.ui-confirm-dialog-icon svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  stroke-width: var(--openbot-icon-stroke);
}
.ui-confirm-dialog[data-tone="destructive"] .ui-confirm-dialog-icon {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger-text);
}
.ui-confirm-dialog-media {
  display: grid;
  place-items: center;
}
.ui-confirm-dialog-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
  padding-top: var(--openbot-space-1-5);
}
.ui-confirm-dialog-title {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-xl);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-xl);
  letter-spacing: var(--openbot-tracking-tight);
  overflow-wrap: anywhere;
}
.ui-confirm-dialog-description {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
.ui-confirm-dialog-body {
  margin-top: var(--openbot-space-1);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.ui-confirm-dialog-body :where(ul, ol) {
  display: grid;
  gap: var(--openbot-space-1);
  margin: 0;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-3) var(--openbot-space-4) var(--openbot-space-3) var(--openbot-space-8);
  list-style: disc;
}
.ui-confirm-dialog-body :where(ol) {
  list-style: decimal;
}
.ui-confirm-dialog-body :where(li)::marker {
  color: var(--openbot-text-dim);
}
.ui-confirm-dialog-error.ui-alert {
  margin-top: var(--openbot-space-1);
  padding: var(--openbot-space-2) var(--openbot-space-3);
}
.ui-confirm-dialog-error .ui-alert-icon {
  color: var(--openbot-danger-text);
}
.ui-confirm-dialog-actions {
  display: flex;
  flex: 0 0 auto;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
  border-top: 1px solid var(--openbot-dialog-ring);
  padding: var(--openbot-space-4) var(--openbot-space-6);
}
.ui-confirm-dialog-actions .ui-button svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: var(--openbot-icon-stroke);
}
.ui-confirm-dialog-confirm.ui-button-variant-destructive {
  color: var(--openbot-danger-text);
}
@media (hover: hover) and (pointer: fine) {
  .ui-confirm-dialog-confirm.ui-button-variant-destructive:hover:not(:disabled):not([data-disabled]) {
    color: var(--openbot-danger-text);
  }
}
.ui-confirm-dialog-actions .ui-button:active:not(:disabled):not([data-disabled]) {
  transform: scale(0.97);
}
@keyframes ui-dialog-overlay-in {
  from {
    opacity: 0;
  }
}
@keyframes ui-confirm-dialog-in {
  from {
    opacity: 0;
    transform: scale(0.97) translateY(4px);
  }
}
@media (max-width: 560px) {
  .ui-confirm-dialog-overlay {
    padding: var(--openbot-space-3);
  }
  .ui-dialog-content.ui-confirm-dialog {
    max-height: calc(100dvh - 2 * var(--openbot-space-3));
  }
  .ui-confirm-dialog-main {
    padding: var(--openbot-space-4);
  }
  .ui-confirm-dialog-actions {
    padding: var(--openbot-space-3) var(--openbot-space-4);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ui-dialog-content.ui-confirm-dialog {
    animation-name: ui-dialog-overlay-in;
  }
  .ui-confirm-dialog-actions .ui-button:active {
    transform: none;
  }
}
.ui-bubble-group {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--openbot-space-2);
}
.ui-bubble {
  position: relative;
  display: flex;
  width: fit-content;
  min-width: 0;
  max-width: min(80%, 720px);
  flex-direction: column;
  align-self: flex-start;
  gap: var(--openbot-space-1);
  color: var(--openbot-text-primary);
}
.ui-bubble[data-align="end"] {
  align-self: flex-end;
}
.ui-bubble-content {
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--openbot-radius-bubble);
  padding: 8px 12px;
  font-size: var(--openbot-text-lg);
  line-height: 1.625;
  overflow-wrap: anywhere;
  transition: border-color var(--openbot-duration-hover) ease, background var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease;
}
button.ui-bubble-content, a.ui-bubble-content {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  transition: color var(--openbot-duration-hover) ease;
}
button.ui-bubble-content {
  cursor: pointer;
}
.ui-bubble-variant-default {
  color: var(--openbot-text-on-light);
}
.ui-bubble-variant-default > .ui-bubble-content {
  background: var(--openbot-surface-light);
}
.ui-bubble-variant-default .message-reply-context {
  border-left-color: var(--openbot-text-muted-on-light);
  color: var(--openbot-text-on-light);
}
.ui-bubble-variant-secondary > .ui-bubble-content {
  background: var(--openbot-bg-surface-raised);
}
.ui-bubble-variant-muted > .ui-bubble-content {
  background: var(--openbot-bg-surface);
}
.ui-bubble-variant-tinted {
  color: var(--openbot-accent-text);
}
.ui-bubble-variant-tinted > .ui-bubble-content {
  border-color: var(--openbot-accent-strong);
  background: var(--openbot-accent-soft);
}
.ui-bubble-variant-outline > .ui-bubble-content {
  border-color: var(--openbot-border-strong);
  background: transparent;
}
.ui-bubble-variant-ghost {
  width: fit-content;
  max-width: 100%;
  border-color: transparent;
  background: transparent;
}
.ui-bubble-variant-ghost > .ui-bubble-content {
  width: fit-content;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.ui-bubble-variant-destructive {
  color: var(--openbot-danger);
}
.ui-bubble-variant-destructive > .ui-bubble-content {
  border-color: var(--openbot-danger-border);
  background: var(--openbot-danger-soft);
}
.ui-bubble-reactions {
  position: absolute;
  z-index: 1;
  display: flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: var(--openbot-space-1);
  border: 0;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface);
  padding: 2px 6px;
  box-shadow: 0 0 0 3px var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
  white-space: nowrap;
  transition: background var(--openbot-duration-hover) ease, box-shadow var(--openbot-duration-hover) ease;
}
.ui-bubble-reactions:has(button) {
  padding: 0;
}
.ui-bubble-reactions-side-top {
  top: 0;
  translate: 0 -75%;
}
.ui-bubble-reactions-side-bottom {
  bottom: 0;
  translate: 0 75%;
}
.ui-bubble-reactions-align-start {
  left: var(--openbot-space-3);
}
.ui-bubble-reactions-align-end {
  right: var(--openbot-space-3);
}
.ui-bubble-reaction-overflow {
  color: var(--openbot-text-primary);
  font: inherit;
}
.ui-marker {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
}
.ui-marker-content {
  display: flex;
  min-width: 0;
  align-items: center;
}
.ui-marker-icon {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
}
.ui-message-group {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--openbot-space-1);
}
.ui-message {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: flex-end;
  gap: var(--openbot-space-2);
}
.ui-message[data-align="end"] {
  flex-direction: row-reverse;
}
.ui-message-avatar {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  align-self: flex-end;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
}
.ui-message-content {
  display: flex;
  width: 100%;
  min-width: 0;
  max-width: 720px;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--openbot-space-1);
  overflow-wrap: anywhere;
}
.ui-message[data-align="end"] > .ui-message-content {
  align-items: flex-end;
}
.ui-message-header, .ui-message-footer {
  display: flex;
  max-width: 100%;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: 0 var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
}
.ui-message[data-align="end"] .ui-message-footer {
  justify-content: flex-end;
}
.ui-toast-layer {
  pointer-events: auto;
}
.otp-input {
  display: grid;
  gap: 10px;
  justify-items: center;
}
.otp-input-fieldset {
  position: relative;
  width: max-content;
  max-width: 100%;
  margin: 0;
  border: 0;
  padding: 0;
}
.otp-input .otp-input-native {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 0;
  color: transparent;
  caret-color: transparent;
  cursor: text;
  opacity: 0;
}
.otp-input .otp-input-native:focus {
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
}
.otp-input-slots {
  --otp-slot-size: 34px;
  --otp-slot-height: 50px;
  --otp-slot-gap: 6px;
  --otp-group-gap: 8px;
  position: relative;
  display: flex;
  gap: var(--otp-slot-gap);
}
.otp-input-slot, .otp-input-focus-ring {
  width: var(--otp-slot-size);
  height: var(--otp-slot-height);
  border-radius: var(--openbot-radius-md);
}
.otp-input-slot {
  position: relative;
  display: grid;
  flex: 0 0 var(--otp-slot-size);
  place-items: center;
  border: 1px solid var(--otp-slot-border, var(--openbot-border-strong));
  background: var(--otp-slot-background, var(--openbot-bg-control));
  box-shadow: var(--otp-slot-shadow, none);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-xl);
  font-weight: var(--openbot-weight-semibold);
  line-height: 1;
  transition: border-color var(--openbot-duration-hover) ease, background-color var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease;
}
.otp-input-slot[data-filled="true"] {
  background: var(--otp-slot-filled-background, var(--otp-slot-background, var(--openbot-bg-control)));
}
.otp-input-slot[data-group-start="true"] {
  margin-left: var(--otp-group-gap);
}
.otp-input-focus-ring {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  border: 1px solid var(--openbot-border-focus);
  box-shadow: var(--openbot-focus-ring);
  opacity: 0;
  pointer-events: none;
  transform: translateX( calc(var(--otp-active-index) * (var(--otp-slot-size) + var(--otp-slot-gap)) + var(--otp-group-offset)) );
  transition: transform var(--openbot-duration-hover) var(--openbot-ease-out), opacity var(--openbot-duration-hover) ease;
}
.otp-input-focus-ring[data-visible="true"] {
  opacity: 1;
}
.otp-input-character {
  position: relative;
  z-index: 1;
  animation: otp-character-enter var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.otp-input-caret {
  position: absolute;
  z-index: 2;
  top: calc((var(--otp-slot-height) - 24px) / 2);
  left: 50%;
  width: 1px;
  height: 24px;
  background: var(--openbot-text-primary);
  animation: otp-caret-blink 1s steps(1, end) infinite;
  transform: translateX(-50%);
}
.otp-input-caret[data-trailing="true"] {
  margin-left: 7px;
}
.otp-input[data-size="compact"] {
  container-type: inline-size;
  justify-items: start;
}
.otp-input[data-size="compact"] .otp-input-slots {
  --otp-slot-height: 48px;
  --otp-slot-gap: var(--openbot-space-2);
  --otp-group-gap: 14px;
  --otp-slot-size: min(
    var(--openbot-control-xl),
    calc((100cqw - (var(--otp-length) - 1) * var(--otp-slot-gap) - var(--otp-group-gap)) / var(--otp-length))
  );
}
.otp-input[data-status="verifying"] .otp-input-slot {
  color: var(--openbot-text-secondary);
}
.otp-input[data-status="error"] .otp-input-slot {
  border-color: var(--openbot-danger);
  background: var(--openbot-danger-soft);
}
.otp-input[data-status="error"] .otp-input-focus-ring {
  border-color: var(--openbot-danger);
  box-shadow: 0 0 0 3px var(--openbot-danger-soft);
}
.otp-input[data-status="success"] .otp-input-slot {
  border-color: var(--openbot-success);
  background: var(--openbot-success-soft);
  color: var(--openbot-success);
}
.otp-input-success {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  overflow: visible;
  color: var(--openbot-success);
}
.otp-input-success path {
  fill: none;
  stroke: currentcolor;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  animation: otp-check-draw 350ms var(--openbot-duration-fast) var(--openbot-ease-out) forwards;
}
.otp-input-message {
  min-height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 17px;
  text-align: center;
}
.otp-input[data-status="error"] .otp-input-message {
  color: var(--openbot-danger);
}
.otp-input[data-status="success"] .otp-input-message {
  color: var(--openbot-success);
}
.otp-input[data-size="compact"] .otp-input-message {
  justify-content: flex-start;
  text-align: start;
}
@keyframes otp-character-enter {
  from {
    filter: blur(2px);
    opacity: 0;
    transform: translateY(9px);
  }
}
@keyframes otp-check-draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes otp-caret-blink {
  50% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .otp-input-slot, .otp-input-focus-ring {
    transition: none;
  }
  .otp-input-character, .otp-input-caret, .otp-input-success path {
    animation: none;
  }
  .otp-input-success path {
    stroke-dashoffset: 0;
  }
}
@keyframes t-digit-pop-in {
  0% {
    transform: translate( calc(var(--digit-distance) * var(--digit-dir-x)), calc(var(--digit-distance) * var(--digit-dir-y)) );
    opacity: 0;
    filter: blur(var(--digit-blur));
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
    filter: blur(0);
  }
}
.t-digit-group {
  display: inline-flex;
  align-items: baseline;
}
.t-digit {
  display: inline-block;
  will-change: transform, opacity, filter;
}
.t-digit-group.is-animating .t-digit {
  animation: t-digit-pop-in var(--digit-dur) var(--digit-ease) both;
}
.t-digit-group.is-animating .t-digit[data-stagger="1"] {
  animation-delay: var(--digit-stagger);
}
.t-digit-group.is-animating .t-digit[data-stagger="2"] {
  animation-delay: calc(var(--digit-stagger) * 2);
}
@media (prefers-reduced-motion: reduce) {
  .t-digit-group .t-digit {
    animation: none !important;
  }
}
.t-input {
  transition: border-color var(--openbot-duration-normal) ease-out;
  will-change: transform;
}
.t-input.is-error {
  transition: border-color var(--revert-dur, 280ms) ease-out;
}
.t-error-msg {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--revert-dur, 280ms) ease-out, visibility 0s linear var(--revert-dur, 280ms);
}
.t-input-wrap.is-error .t-error-msg {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--revert-dur, 280ms) ease-out, visibility 0s linear 0s;
}
.t-input.is-shaking {
  animation: t-input-shake calc(var(--shake-dur-a) * 2 + var(--shake-dur-b) * 2) linear;
}
@keyframes t-input-shake {
  0% {
    transform: translateX(0);
    animation-timing-function: var(--shake-ease);
  }
  28.57% {
    transform: translateX(var(--shake-distance));
    animation-timing-function: var(--shake-ease);
  }
  57.14% {
    transform: translateX(calc(var(--shake-distance) * -1));
    animation-timing-function: var(--shake-ease);
  }
  78.57% {
    transform: translateX(var(--shake-overshoot));
    animation-timing-function: var(--shake-ease);
  }
  100% {
    transform: translateX(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .t-input {
    animation: none !important;
    transform: none !important;
  }
}
.t-modal {
  transform-origin: center;
  transform: scale(var(--modal-scale));
  opacity: 0;
  pointer-events: none;
  transition: transform var(--modal-open-dur) var(--modal-ease), opacity var(--modal-open-dur) var(--modal-ease);
  will-change: transform, opacity;
}
.t-modal.is-open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
.t-modal.is-closing {
  transform: scale(var(--modal-scale-close));
  opacity: 0;
  pointer-events: none;
  transition: transform var(--modal-close-dur) var(--modal-ease), opacity var(--modal-close-dur) var(--modal-ease);
}
@media (prefers-reduced-motion: reduce) {
  .t-modal {
    transition: none !important;
  }
}
.t-page-slide {
  position: relative;
}
.t-page-slide .t-page[data-page-id="1"] {
  --t-page-from-x: calc(var(--page-slide-distance) * -1);
}
.t-page-slide .t-page[data-page-id="2"] {
  --t-page-from-x: var(--page-slide-distance);
}
.t-page-slide .t-page {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateX(calc(var(--t-page-from-x, 0px) * var(--page-exit-enabled)));
  filter: blur(calc(var(--page-blur) * var(--page-exit-enabled)));
  transition: opacity var(--page-fade-dur) var(--page-fade-ease), transform var(--page-slide-dur) var(--page-slide-ease), filter var(--page-slide-dur) var(--page-slide-ease);
  will-change: opacity, transform, filter;
}
.t-page-slide[data-page="1"] .t-page[data-page-id="1"], .t-page-slide[data-page="2"] .t-page[data-page-id="2"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
  filter: blur(0);
  transition-delay: var(--page-stagger);
}
@media (prefers-reduced-motion: reduce) {
  .t-page-slide .t-page {
    transition: none !important;
  }
}
.t-text-swap {
  display: inline-block;
  transform: translateY(0);
  filter: blur(0);
  opacity: 1;
  transition: transform var(--text-swap-dur) var(--text-swap-ease), filter var(--text-swap-dur) var(--text-swap-ease), opacity var(--text-swap-dur) var(--text-swap-ease);
  will-change: transform, filter, opacity;
}
.t-text-swap.is-exit {
  transform: translateY(calc(var(--text-swap-translate-y) * -1));
  filter: blur(var(--text-swap-blur));
  opacity: 0;
}
.t-text-swap.is-enter-start {
  transform: translateY(var(--text-swap-translate-y));
  filter: blur(var(--text-swap-blur));
  opacity: 0;
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .t-text-swap {
    transition: none !important;
  }
}
.t-resize {
  transition: width var(--resize-dur) var(--resize-ease), height var(--resize-dur) var(--resize-ease);
  will-change: width, height;
}
@media (prefers-reduced-motion: reduce) {
  .t-resize {
    transition: none !important;
  }
}
.t-panel-slide {
  transform: translate(var(--panel-translate-x), var(--panel-translate-y));
  opacity: 0;
  filter: blur(var(--panel-blur));
  pointer-events: none;
  transition: transform var(--panel-close-dur) var(--panel-ease), opacity var(--panel-close-dur) var(--panel-ease), filter var(--panel-close-dur) var(--panel-ease);
  will-change: transform, opacity, filter;
}
.t-panel-slide[data-open="true"] {
  transform: translate(0, 0);
  opacity: 1;
  filter: blur(0);
  pointer-events: auto;
  transition: transform var(--panel-open-dur) var(--panel-ease), opacity var(--panel-open-dur) var(--panel-ease), filter var(--panel-open-dur) var(--panel-ease);
}
@media (prefers-reduced-motion: reduce) {
  .t-panel-slide {
    transition: none !important;
  }
}
.t-acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--acc-collapse) var(--acc-ease);
}
.t-acc[data-open="true"] .t-acc-panel {
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--acc-expand) var(--acc-ease);
}
.t-acc-panel-inner {
  overflow: hidden;
  opacity: 0;
  filter: blur(2px);
  transition: opacity var(--acc-collapse) var(--acc-ease), filter var(--acc-collapse) var(--acc-ease);
}
.t-acc[data-open="true"] .t-acc-panel-inner {
  opacity: 1;
  filter: blur(0);
  transition: opacity var(--acc-expand) var(--acc-ease), filter var(--acc-expand) var(--acc-ease);
}
@media (prefers-reduced-motion: reduce) {
  .t-acc-panel, .t-acc-panel-inner {
    transition: none !important;
  }
}
.ui-sliding-tabs {
  --sliding-tabs-duration: 250ms;
  --sliding-tabs-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-tabs-bar-bg);
  box-shadow: inset 0 0 0 1px var(--openbot-border);
  padding: 3px;
}
.ui-sliding-tabs-trigger {
  position: relative;
  z-index: 1;
  height: var(--openbot-control-sm);
  appearance: none;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  outline: 0;
  background: transparent;
  padding: 4px var(--openbot-space-3);
  color: var(--openbot-text-muted);
  font: inherit;
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-sm);
  font-weight: var(--openbot-weight-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--sliding-tabs-duration) var(--sliding-tabs-ease);
}
.ui-sliding-tabs-trigger[aria-selected="true"], .ui-sliding-tabs-trigger:not([aria-selected="true"]):hover {
  color: var(--openbot-text-primary);
}
.ui-sliding-tabs-trigger:focus-visible {
  box-shadow: var(--openbot-focus-ring);
}
.ui-sliding-tabs-trigger:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}
.ui-sliding-tabs-pill {
  position: absolute;
  top: 3px;
  left: 0;
  z-index: 0;
  width: 0;
  height: var(--openbot-control-sm);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-tabs-pill-bg);
  pointer-events: none;
  transition: transform var(--sliding-tabs-duration) var(--sliding-tabs-ease), width var(--sliding-tabs-duration) var(--sliding-tabs-ease);
  will-change: transform, width;
}
.ui-sliding-tabs-pill:is([data-initializing], [data-resizing]) {
  transition: none;
}
.ui-sliding-tabs-content-slot {
  --sliding-tabs-content-duration: 150ms;
  --sliding-tabs-content-distance: 4px;
  --sliding-tabs-content-blur: 2px;
  min-width: 0;
  display: grid;
}
.ui-sliding-tabs-content {
  min-width: 0;
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  filter: blur(var(--sliding-tabs-content-blur));
  transform: translateY(var(--sliding-tabs-content-distance));
  pointer-events: none;
  transition: transform var(--sliding-tabs-content-duration) ease-in-out, filter var(--sliding-tabs-content-duration) ease-in-out, opacity var(--sliding-tabs-content-duration) ease-in-out, visibility 0s linear var(--sliding-tabs-content-duration);
  will-change: transform, filter, opacity;
}
.ui-sliding-tabs-content[data-selected] {
  opacity: 1;
  visibility: visible;
  filter: blur(0);
  transform: translateY(0);
  pointer-events: auto;
  transition: transform var(--sliding-tabs-content-duration) ease-in-out, filter var(--sliding-tabs-content-duration) ease-in-out, opacity var(--sliding-tabs-content-duration) ease-in-out, visibility 0s linear;
}
@media (prefers-reduced-motion: reduce) {
  .ui-sliding-tabs-pill, .ui-sliding-tabs-trigger, .ui-sliding-tabs-content {
    transition: none;
  }
}
:root {
  --ui-menu-radius: var(--openbot-radius-card);
  --ui-menu-padding: var(--openbot-space-1-5);
  --ui-menu-item-radius: calc(var(--ui-menu-radius) - var(--ui-menu-padding) + var(--openbot-space-0-5));
  --ui-menu-inset: calc(var(--openbot-space-2) + var(--openbot-space-0-5));
  --ui-menu-bg: var(--openbot-bg-sheet);
  --ui-menu-edge: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --ui-menu-edge: color-mix(in srgb, var(--openbot-text-primary) 11%, transparent);
  }
  --ui-menu-highlight: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --ui-menu-highlight: color-mix(in srgb, var(--openbot-text-primary) 5%, transparent);
  }
  --ui-menu-shadow: var(--openbot-bg-notch);
  @supports (color: color-mix(in lab, red, red)) {
    --ui-menu-shadow: color-mix(in srgb, var(--openbot-bg-notch) 45%, transparent);
  }
  --ui-menu-item-hover: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --ui-menu-item-hover: color-mix(in srgb, var(--openbot-text-primary) 6%, transparent);
  }
  --ui-menu-row-highlight: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --ui-menu-row-highlight: color-mix(in srgb, var(--openbot-text-primary) 6%, var(--ui-menu-bg));
  }
  --ui-menu-panel-shadow: inset 0 1px 0 var(--ui-menu-highlight), 0 0 0 1px var(--ui-menu-edge), 0 4px 6px -1px var(--ui-menu-shadow),
    0 2px 4px -2px var(--ui-menu-shadow);
  --ui-menu-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ui-menu-duration: 150ms;
  --ui-submenu-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ui-submenu-duration: var(--openbot-duration-slow);
}
.ui-popover-menu-surface {
  border: 0;
  border-radius: var(--openbot-radius-md);
  outline: 0;
  background: var(--openbot-bg-control);
  box-shadow: 0 0 0 1px var(--openbot-border), 0 4px 6px -1px var(--openbot-shadow-popover-ambient), 0 2px 4px -2px var(--openbot-shadow-popover-ambient);
  color: var(--openbot-text-primary);
}
.ui-action-menu {
  position: relative;
  z-index: var(--openbot-layer-popover);
  width: max-content;
  min-width: 192px;
  max-width: min(288px, calc(100vw - var(--openbot-space-4)));
  overflow: hidden;
  border: 0;
  border-radius: var(--ui-menu-radius);
  outline: 0;
  background: var(--ui-menu-bg);
  box-shadow: var(--ui-menu-panel-shadow);
  padding: var(--ui-menu-padding);
  color: var(--openbot-text-primary);
  transform-origin: var(--kb-menu-content-transform-origin, var(--kb-popover-content-transform-origin));
  animation: ui-menu-in var(--ui-menu-duration) var(--ui-menu-ease) both;
}
.ui-action-menu:not([data-expanded]) {
  animation: ui-menu-out var(--ui-menu-duration) var(--ui-menu-ease) both;
}
.ui-action-menu[aria-labelledby*="sub-trigger"] {
  animation-duration: var(--ui-submenu-duration);
  animation-timing-function: var(--ui-submenu-ease);
}
.ui-action-menu:not([data-menu-layout="grid"]) :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]) {
  display: flex;
  width: 100%;
  height: var(--openbot-control-md);
  min-height: var(--openbot-control-md);
  align-items: center;
  justify-content: flex-start;
  gap: var(--openbot-space-2);
  border: 0;
  border-radius: var(--ui-menu-item-radius);
  outline: 0;
  background: transparent;
  padding: var(--openbot-space-1-5) var(--ui-menu-inset);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-lg);
  text-align: left;
  white-space: nowrap;
  transition: background-color var(--openbot-duration-hover) var(--openbot-ease-out), color var(--openbot-duration-hover) var(--openbot-ease-out);
}
.ui-action-menu:not([data-menu-layout="grid"]) :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]) > span:not(:has(svg), .ui-menu-trailing) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui-action-menu:not([data-menu-layout="grid"]) :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]):is( :hover, :focus-visible, [data-highlighted], [aria-expanded="true"] ) {
  background: var(--ui-menu-item-hover);
  color: var(--openbot-text-primary);
}
.ui-action-menu:not([data-menu-layout="grid"]) :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"])[data-disabled] {
  color: var(--openbot-text-muted);
  cursor: default;
  opacity: 0.45;
}
.ui-action-menu:not([data-menu-layout="grid"]) :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]) > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  color: var(--openbot-text-secondary);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ui-action-menu:not([data-menu-layout="grid"]) :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]) > svg:not(.ui-glyph-20, .ui-glyph-16) {
  stroke-width: var(--openbot-icon-stroke);
}
.ui-action-menu > hr, .ui-action-menu [role="separator"] {
  height: 1px;
  margin: var(--ui-menu-padding) calc(var(--ui-menu-padding) * -1);
  border: 0;
  background: var(--openbot-border);
}
.ui-action-menu:not([data-menu-layout="grid"]) :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]).ui-action-menu-danger, .ui-action-menu:not([data-menu-layout="grid"]) :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]).ui-action-menu-danger > svg {
  color: var(--openbot-danger);
}
.ui-action-menu:not([data-menu-layout="grid"]) :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]).ui-action-menu-danger:is( :hover, :focus-visible, [data-highlighted] ) {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
}
.ui-menu-label {
  padding: var(--openbot-space-1-5) var(--ui-menu-inset);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.ui-menu-check {
  display: grid;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--openbot-text-primary) 22%, transparent);
  }
  border-radius: var(--openbot-radius-pill);
  transition: background-color var(--ui-menu-duration) ease-out, border-color var(--ui-menu-duration) ease-out;
}
.ui-menu-check[data-checked] {
  border-color: transparent;
  background: var(--openbot-text-primary);
}
.ui-action-menu:not([data-menu-layout="grid"]) :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]) > .ui-menu-check > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke: var(--ui-menu-bg);
  stroke-width: 2.5;
}
.ui-menu-trailing {
  margin-left: auto;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.ui-action-menu:not([data-menu-layout="grid"]) :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]) > svg.ui-menu-trailing {
  color: var(--openbot-text-muted);
}
.ui-action-menu .agent-context-icon {
  color: var(--openbot-text-muted);
}
.ui-action-menu .agent-context-icon > * {
  fill: currentColor;
  fill-opacity: 0;
}
.ui-action-menu [class~="lucide-chart-area"] > path:first-child, .ui-action-menu [class~="lucide-bell-off"] > path:nth-child(3), .ui-action-menu [class~="lucide-app-window"] > path, .ui-action-menu [class~="lucide-bot"] > *, .ui-action-menu [class~="lucide-calendar-clock"] > * {
  fill: none;
}
.ui-action-menu :is(:hover, [data-highlighted], [aria-expanded="true"]) > .agent-context-icon {
  color: var(--openbot-text-primary);
}
.ui-action-menu :is(:hover, [data-highlighted], [aria-expanded="true"]) > .agent-context-icon > * {
  fill-opacity: 1;
}
.ui-action-menu :is(:hover, [data-highlighted], [aria-expanded="true"]) > [class~="lucide-app-window"] > path, .ui-action-menu :is(:hover, [data-highlighted], [aria-expanded="true"]) > .ui-glyph-20:has(> rect + rect + circle) > circle {
  fill: var(--ui-menu-row-highlight);
  stroke: var(--ui-menu-row-highlight);
}
.ui-motion-tooltip-trigger {
  display: flex;
}
.ui-motion-tooltip {
  z-index: var(--openbot-layer-tooltip);
  transform-origin: var(--kb-tooltip-content-transform-origin);
  animation: ui-menu-in var(--ui-submenu-duration) var(--ui-submenu-ease) both;
}
.ui-motion-tooltip:not([data-expanded]) {
  animation: ui-menu-out var(--ui-submenu-duration) var(--ui-submenu-ease) both;
}
.ui-motion-tooltip:is([data-menu-hold], [data-menu-moving], [data-menu-swap-out]) {
  overflow: hidden;
}
.ui-motion-tooltip-label {
  overflow: hidden;
  max-width: min(240px, calc(100vw - var(--openbot-space-4)));
  border-radius: var(--openbot-radius-md);
  background: var(--ui-menu-bg);
  box-shadow: var(--ui-menu-panel-shadow);
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
  overflow-wrap: anywhere;
  pointer-events: none;
}
.ui-motion-tooltip-label > span {
  display: block;
}
.ui-action-menu:is([data-menu-hold], [data-menu-swap-in], [data-menu-swap-out]), .ui-motion-tooltip:is([data-menu-hold], [data-menu-swap-in], [data-menu-swap-out]) {
  animation: none;
}
.ui-action-menu[data-menu-handoff], .ui-motion-tooltip[data-menu-handoff] {
  animation: none;
  opacity: 0;
}
.ui-action-menu[data-menu-swap-out], .ui-motion-tooltip[data-menu-swap-out] {
  background: transparent;
  box-shadow: none;
}
@keyframes ui-menu-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
}
@keyframes ui-menu-out {
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ui-action-menu, .ui-action-menu:not([data-expanded]), .ui-motion-tooltip, .ui-motion-tooltip:not([data-expanded]) {
    animation: none;
  }
  .ui-menu-check {
    transition: none;
  }
}
.dynamic-island {
  --dynamic-island-notch-width: 192px;
  --dynamic-island-notch-height: 32px;
  --dynamic-island-compact-width: 268px;
  --dynamic-island-expanded-width: 420px;
  --dynamic-island-hover-width-growth: 32px;
  --dynamic-island-hover-height-growth: 8px;
  --dynamic-island-hover-hit-top: 6px;
  --dynamic-island-hover-hit-bottom: 6px;
  --dynamic-island-hover-retention-bottom: 6px;
  --dynamic-island-hover-retention-inline-growth: 24px;
  --dynamic-island-shoulder-size: 6px;
  --dynamic-island-expanded-shoulder-size: 19px;
  --dynamic-island-bottom-radius: 14px;
  --dynamic-island-external-compact-radius: 16px;
  --dynamic-island-external-expanded-radius: 24px;
  --dynamic-island-shared-duration: 450ms;
  --dynamic-island-shared-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  display: flex;
  width: min(var(--dynamic-island-expanded-width), calc(100vw - var(--openbot-space-6)));
  height: fit-content;
  align-items: flex-start;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--openbot-text-primary);
  filter: drop-shadow(0 0 0 transparent);
  pointer-events: none;
  transition: filter var(--openbot-duration-normal) var(--openbot-ease-out);
}
.dynamic-island-shell {
  position: relative;
  display: block;
  width: fit-content;
  height: fit-content;
  overflow: clip;
  contain: layout paint;
  isolation: isolate;
  pointer-events: auto;
}
.dynamic-island[data-layout-state="expanded"] {
  --dynamic-island-shared-duration: 420ms;
  --dynamic-island-shoulder-size: 19px;
  --dynamic-island-bottom-radius: 24px;
}
.dynamic-island[data-layout-state="expanded"], .dynamic-island[data-hovered="true"] {
  filter: drop-shadow(0 0 10px var(--openbot-shadow-dynamic-island));
}
.dynamic-island-shell[data-resizing] {
  will-change: width, height;
}
.dynamic-island-size-target {
  position: relative;
  left: 50%;
  width: min(var(--dynamic-island-compact-width), calc(100vw - var(--openbot-space-6)));
  min-height: var(--dynamic-island-notch-height);
  transform: translateX(-50%);
}
.dynamic-island[data-layout-state="compact"][data-hovered="true"] .dynamic-island-size-target {
  width: min( calc(var(--dynamic-island-compact-width) + var(--dynamic-island-hover-width-growth)), calc(100vw - var(--openbot-space-6)) );
  min-height: calc(var(--dynamic-island-notch-height) + var(--dynamic-island-hover-height-growth));
}
.dynamic-island[data-layout-state="expanded"] .dynamic-island-size-target {
  width: min(var(--dynamic-island-expanded-width), calc(100vw - var(--openbot-space-6)));
  padding-top: var(--dynamic-island-notch-height);
}
.dynamic-island-silhouette {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
}
.dynamic-island-silhouette-body {
  position: absolute;
  inset: 0 var(--dynamic-island-shoulder-size);
  border-radius: 0 0 var(--dynamic-island-bottom-radius) var(--dynamic-island-bottom-radius);
  background: var(--openbot-bg-notch);
  box-shadow: inset 0 -1px 0 var(--openbot-shadow-ring);
  transition: box-shadow var(--openbot-duration-normal) var(--openbot-ease-out);
}
.dynamic-island-shoulder {
  position: absolute;
  top: 0;
  width: var(--dynamic-island-shoulder-size);
  height: var(--dynamic-island-shoulder-size);
  overflow: visible;
}
.dynamic-island-shoulder path {
  fill: var(--openbot-bg-notch);
}
.dynamic-island-shoulder-leading {
  left: 0;
}
.dynamic-island-shoulder-trailing {
  right: 0;
}
.dynamic-island-toggle {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  width: min(var(--dynamic-island-compact-width), calc(100vw - var(--openbot-space-6)));
  height: var(--dynamic-island-notch-height);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  border: 0;
  border-radius: inherit;
  background: transparent;
  padding: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  outline: none;
  transform: translateX(-50%);
}
.dynamic-island[data-pointer-toggle="false"] .dynamic-island-toggle {
  cursor: default;
}
.dynamic-island .dynamic-island-toggle:focus-visible {
  outline: none;
}
.dynamic-island-notch-safe-zone {
  width: var(--dynamic-island-notch-width);
  height: var(--dynamic-island-notch-height);
  pointer-events: none;
}
.dynamic-island-ear {
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  color: var(--openbot-text-secondary);
  transition: color var(--openbot-duration-normal) var(--openbot-ease-out);
}
.dynamic-island-ear-leading {
  justify-content: flex-end;
  padding-right: var(--openbot-space-2);
}
.dynamic-island-ear-trailing {
  justify-content: flex-start;
  padding-left: var(--openbot-space-2);
}
.dynamic-island:not(.dynamic-island-external):not(.dynamic-island-status) .dynamic-island-ear-leading {
  padding-right: 6px;
}
.dynamic-island-ear-content {
  position: relative;
  z-index: 3;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: center;
  transition: color var(--openbot-duration-normal) var(--openbot-ease-out), filter var(--openbot-duration-slow) var(--openbot-ease-out), opacity var(--openbot-duration-island-content) cubic-bezier(0.22, 1.08, 0.36, 1), transform var(--openbot-duration-island-content) cubic-bezier(0.22, 1.08, 0.36, 1);
}
.dynamic-island-shell[data-compact-resize] .dynamic-island-ear-content {
  filter: blur(calc(0.4px * var(--dynamic-island-compact-motion, 1)));
}
.dynamic-island-hover-content {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: center;
}
.dynamic-island-status .dynamic-island-hover-leading {
  width: 100%;
}
.dynamic-island-toggle:hover .dynamic-island-ear, .dynamic-island-toggle:focus-visible .dynamic-island-ear {
  color: var(--openbot-text-primary);
}
.dynamic-island-trailing-content {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  justify-content: center;
}
.dynamic-island-trailing-compact {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--openbot-duration-island-content) cubic-bezier(0.22, 1.08, 0.36, 1), transform var(--openbot-duration-island-content) cubic-bezier(0.22, 1.08, 0.36, 1);
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1);
}
.dynamic-island-status .dynamic-island-trailing-compact {
  right: auto;
  left: 0;
  justify-content: flex-start;
  transform-origin: left center;
}
.dynamic-island-external.dynamic-island-status .dynamic-island-trailing-compact {
  right: 0;
  left: auto;
  justify-content: flex-end;
  transform-origin: right center;
}
.dynamic-island[data-layout-state="expanded"] .dynamic-island-trailing-compact {
  pointer-events: none;
  opacity: 0;
  filter: none;
  transform: scale(0.92);
  transition-duration: var(--openbot-duration-island-content-exit);
  transition-timing-function: var(--dynamic-island-shared-ease);
}
.dynamic-island-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: var(--openbot-space-2) var(--openbot-space-4) var(--openbot-space-4);
}
.dynamic-island-panel[data-phase="leaving"] {
  position: absolute;
  top: var(--dynamic-island-notch-height);
  left: 50%;
  transform: translateX(-50%);
}
.dynamic-island-panel[data-phase="exiting"], .dynamic-island-panel[data-phase="leaving"] {
  pointer-events: none;
}
.dynamic-island-panel[data-phase="leaving"] {
  width: min(var(--dynamic-island-expanded-width), calc(100vw - var(--openbot-space-6)));
}
.dynamic-island-content {
  opacity: 1;
  filter: none;
  transform: scale(1);
  transform-origin: top center;
}
.dynamic-island[data-shared-leading="true"] .dynamic-island-ear-leading .dynamic-island-ear-content {
  opacity: 1;
  filter: none;
  transition: color var(--openbot-duration-normal) var(--openbot-ease-out), opacity var(--openbot-duration-island-content-exit) var(--dynamic-island-shared-ease);
}
.dynamic-island:not([data-shared-leading="true"])[data-layout-state="expanded"] .dynamic-island-ear-leading .dynamic-island-ear-content {
  opacity: 0;
  filter: none;
  transform: scale(0.92);
  transition-duration: var(--openbot-duration-normal), var(--openbot-duration-island-content-exit), var(--openbot-duration-island-content-exit);
  transition-timing-function: var(--openbot-ease-out), var(--dynamic-island-shared-ease), var(--dynamic-island-shared-ease);
}
.dynamic-island[data-layout-state="expanded"] .dynamic-island-ear-trailing .dynamic-island-ear-content {
  opacity: 1;
  filter: none;
  transform: none;
}
.dynamic-island-status .dynamic-island-trailing-compact {
  transform: scale(1);
  transition: opacity var(--openbot-duration-island-content) var(--dynamic-island-shared-ease);
}
.dynamic-island-status[data-layout-state="expanded"] .dynamic-island-trailing-compact {
  opacity: 0;
  transform: scale(1);
}
.dynamic-island-status .dynamic-island-trailing-content {
  transform-origin: left center;
}
.dynamic-island-status .dynamic-island-trailing-compact, .dynamic-island-status .dynamic-island-hover-trailing, .dynamic-island-status .dynamic-island-mode-swap[data-island-mode-slot="compact-trailing"] {
  width: max-content;
}
.dynamic-island-external.dynamic-island-status .dynamic-island-trailing-content {
  transform-origin: right center;
}
.dynamic-island-panel-wide {
  --dynamic-island-expanded-width: 590px;
}
.dynamic-island-idle .dynamic-island-ear-trailing {
  color: var(--openbot-text-primary);
  transition: none;
}
.dynamic-island.dynamic-island-idle:not(.dynamic-island-external) .dynamic-island-ear-leading {
  justify-content: flex-start;
  padding-right: 0;
  padding-left: var(--openbot-space-4);
}
.dynamic-island.dynamic-island-idle:not(.dynamic-island-external) .dynamic-island-ear-trailing {
  justify-content: flex-end;
  padding-right: var(--openbot-space-4);
  padding-left: 0;
}
.dynamic-island-hover-zone {
  position: absolute;
  top: calc(-1 * var(--dynamic-island-hover-hit-top));
  left: 50%;
  display: none;
  width: min(var(--dynamic-island-compact-width), calc(100vw - var(--openbot-space-6)));
  height: calc( var(--dynamic-island-notch-height) + var(--dynamic-island-hover-hit-top) + var(--dynamic-island-hover-hit-bottom) );
  pointer-events: auto;
  transform: translateX(-50%);
}
.dynamic-island[data-layout-state="compact"] > .dynamic-island-hover-zone {
  display: block;
}
.dynamic-island[data-layout-state="compact"][data-hovered="true"] > .dynamic-island-hover-zone {
  width: min( calc( var(--dynamic-island-compact-width) + var(--dynamic-island-hover-width-growth) + var(--dynamic-island-hover-retention-inline-growth) ), calc(100vw - var(--openbot-space-6)) );
  height: calc( var(--dynamic-island-notch-height) + var(--dynamic-island-hover-height-growth) + var(--dynamic-island-hover-hit-top) + var(--dynamic-island-hover-retention-bottom) );
}
.dynamic-island-status:not(.dynamic-island-external) .dynamic-island-ear-leading {
  justify-content: flex-start;
  padding-right: 0;
  padding-left: 12px;
}
.dynamic-island-status:not(.dynamic-island-external) .dynamic-island-ear-trailing {
  justify-content: flex-end;
  padding-right: 12px;
  padding-left: 0;
}
.dynamic-island-status:not(.dynamic-island-external) .dynamic-island-trailing-compact {
  right: 0;
  left: auto;
  justify-content: flex-end;
  transform-origin: right center;
}
.dynamic-island-status:not(.dynamic-island-external) .dynamic-island-trailing-content {
  transform-origin: right center;
}
.openbot-dynamic-island[data-layout-state="expanded"] .dynamic-island-panel, .openbot-dynamic-island .dynamic-island-panel[data-phase="exiting"], .openbot-dynamic-island .dynamic-island-panel[data-phase="leaving"] {
  padding: 14px calc(var(--dynamic-island-expanded-shoulder-size) + 20px) 20px;
}
.dynamic-island-external.openbot-dynamic-island[data-layout-state="expanded"] .dynamic-island-panel, .dynamic-island-external.openbot-dynamic-island .dynamic-island-panel[data-phase="exiting"], .dynamic-island-external.openbot-dynamic-island .dynamic-island-panel[data-phase="leaving"] {
  padding: 14px 20px 20px;
}
.openbot-dynamic-island.dynamic-island-working[data-layout-state="expanded"] .dynamic-island-panel, .openbot-dynamic-island.dynamic-island-working .dynamic-island-panel[data-phase="exiting"], .openbot-dynamic-island.dynamic-island-working .dynamic-island-panel[data-phase="leaving"] {
  padding-bottom: 14px;
}
.dynamic-island-external {
  --dynamic-island-notch-width: 16px;
  --dynamic-island-compact-width: 212px;
  --dynamic-island-external-inline-inset: 6px;
  padding-top: var(--dynamic-island-hover-hit-top);
}
.dynamic-island-external .dynamic-island-shoulder {
  display: none;
}
.dynamic-island-external .dynamic-island-silhouette {
  border-radius: var(--dynamic-island-external-compact-radius);
  background: var(--openbot-bg-notch);
  box-shadow: inset 0 -1px 0 var(--openbot-shadow-ring);
}
.dynamic-island-external .dynamic-island-silhouette-body {
  display: none;
}
.dynamic-island-external[data-layout-state="expanded"] .dynamic-island-silhouette {
  border-radius: var(--dynamic-island-external-expanded-radius);
}
.dynamic-island-shell:has(.dynamic-island-toggle:focus-visible) .dynamic-island-silhouette-body, .dynamic-island-external .dynamic-island-shell:has(.dynamic-island-toggle:focus-visible) .dynamic-island-silhouette {
  box-shadow: inset var(--openbot-focus-ring), inset 0 -1px 0 var(--openbot-shadow-ring);
}
.dynamic-island-external > .dynamic-island-hover-zone {
  top: 0;
}
.dynamic-island-external .dynamic-island-toggle {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-inline: var(--dynamic-island-external-inline-inset);
}
.dynamic-island-external .dynamic-island-notch-safe-zone {
  display: none;
}
.dynamic-island-external .dynamic-island-ear-leading {
  position: relative;
  left: 0;
  justify-content: flex-start;
  padding-right: 0;
}
.dynamic-island-external .dynamic-island-ear-trailing {
  justify-content: flex-end;
  padding-left: 0;
}
.dynamic-island-external.dynamic-island-panel-wide {
  --dynamic-island-expanded-width: 552px;
}
.dynamic-island-external.dynamic-island-status .dynamic-island-ear-leading {
  left: 0;
  justify-content: flex-start;
  padding-right: 0;
  padding-left: 0;
}
html:has(.dynamic-island-surface), body:has(.dynamic-island-surface), #root:has(.dynamic-island-surface) {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
}
.dynamic-island-surface {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  background: transparent;
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
  user-select: none;
}
.openbot-dynamic-island-transition-root {
  display: contents;
}
.dynamic-island-mode-swap {
  position: relative;
  min-width: 0;
  display: inline-grid;
  align-items: center;
}
.dynamic-island-mode-swap-block {
  width: 100%;
  display: grid;
  align-items: stretch;
}
.dynamic-island-mode-layer {
  min-width: 0;
  display: inline-flex;
  grid-area: 1 / 1;
  align-items: center;
  transform-origin: center;
}
.dynamic-island-mode-swap-block > .dynamic-island-mode-layer {
  width: 100%;
  display: block;
}
.dynamic-island-mode-layer-outgoing {
  position: absolute;
  z-index: 1;
  top: 0;
  pointer-events: none;
}
.dynamic-island-mode-swap[data-island-mode-slot="compact-leading"] > .dynamic-island-mode-layer-outgoing {
  right: 0;
}
.dynamic-island-external .dynamic-island-mode-swap[data-island-mode-slot="compact-leading"] > .dynamic-island-mode-layer-outgoing {
  right: auto;
  left: 0;
}
.dynamic-island-mode-swap[data-island-mode-slot="compact-trailing"] > .dynamic-island-mode-layer-outgoing {
  left: 0;
}
.dynamic-island-external .dynamic-island-mode-swap[data-island-mode-slot="compact-trailing"] > .dynamic-island-mode-layer-outgoing {
  right: 0;
  left: auto;
}
.dynamic-island-mode-swap-block > .dynamic-island-mode-layer-outgoing {
  inset: 0;
}
.openbot-dynamic-island-transition-root[data-mode-transitioning="true"] .dynamic-island-mode-layer {
  will-change: opacity, transform;
}
.openbot-dynamic-island-transition-root[data-mode-transitioning="true"] .dynamic-island-mode-layer[data-island-mode-layer="incoming"] {
  opacity: 0;
  transform: none;
}
.openbot-dynamic-island-transition-root[data-mode-transitioning="true"] .dynamic-island-mode-swap[data-island-mode-slot="expanded"] > .dynamic-island-mode-layer[data-island-mode-layer="incoming"] {
  transform: scale(0.965);
}
.openbot-dynamic-island-transition-root[data-mode-transitioning="true"] .dynamic-island[data-layout-state="expanded"] .dynamic-island-mode-swap[data-island-mode-slot="compact-leading"] > .dynamic-island-mode-layer[data-island-mode-layer="incoming"] {
  transform: none;
}
.openbot-dynamic-island-transition-root[data-mode-transitioning="true"] .dynamic-island-mode-layer[data-island-mode-layer="incoming"] [data-island-motion-content] {
  filter: blur(4px);
}
.dynamic-island-surface-anchor {
  width: fit-content;
  height: fit-content;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
}
.dynamic-island-surface-logo {
  width: 100%;
  height: 100%;
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-xs);
  transition: border-radius var(--openbot-duration-slow) var(--openbot-ease-out), filter var(--openbot-duration-slow) var(--openbot-ease-out), scale var(--openbot-duration-slow) var(--openbot-ease-out);
}
.dynamic-island-shell[data-compact-resize] .dynamic-island-surface-logo {
  --app-logo-eye-squint: calc(1 - 0.45 * var(--dynamic-island-compact-motion, 1));
  filter: blur(calc(0.8px * var(--dynamic-island-compact-motion, 1)));
  scale: calc(1 - 0.03 * var(--dynamic-island-compact-motion, 1));
}
.dynamic-island-shell[data-compact-motion="large"] .dynamic-island-surface-logo {
  border-radius: var(--openbot-radius-sm);
}
.dynamic-island-external.dynamic-island-idle .dynamic-island-surface-logo {
  transform: translateX(4px);
}
.dynamic-island-surface-leading-anchor {
  position: relative;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
}
.dynamic-island-idle .dynamic-island-trailing-content {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.dynamic-island-surface-idle-greeting {
  position: relative;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  display: block;
  flex: 0 0 auto;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  font-size: var(--openbot-text-xl);
  line-height: 1;
  transition: opacity var(--openbot-duration-slow) var(--openbot-ease-out), scale var(--openbot-duration-slow) var(--openbot-ease-out);
}
.dynamic-island-shell[data-compact-resize] .dynamic-island-surface-idle-greeting {
  opacity: calc(1 - 0.1 * var(--dynamic-island-compact-motion, 1));
}
.dynamic-island-shell[data-compact-settled] .dynamic-island-surface-idle-greeting {
  animation: dynamic-island-greeting-pop 600ms var(--dynamic-island-greeting-pop-ease);
}
.dynamic-island-shell {
  --dynamic-island-greeting-pop-ease: linear(
    0,
    0.571 4.2%,
    1.01 8.3%,
    1.306 12.5%,
    1.467 16.7%,
    1.517 20.8%,
    1.485 25.0%,
    1.403 29.2%,
    1.297 33.3%,
    1.188 37.5%,
    1.09 41.7%,
    1.013 45.8%,
    0.96 50.0%,
    0.928 54.2%,
    0.916 58.3%,
    0.919 62.5%,
    0.931 66.7%,
    0.947 70.8%,
    0.965 75.0%,
    0.982 79.2%,
    0.995 83.3%,
    1.005 87.5%,
    1.011 91.7%,
    1.013 95.8%,
    1
  );
}
@keyframes dynamic-island-greeting-pop {
  from {
    opacity: 0.9;
    scale: 0.98;
    rotate: -1deg;
  }
  to {
    opacity: 1;
    scale: 1;
    rotate: 0deg;
  }
}
.dynamic-island-surface-idle-greeting-layer {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 600ms var(--openbot-ease-in-out), scale 650ms var(--openbot-ease-in-out), filter 600ms var(--openbot-ease-in-out);
}
@media (prefers-reduced-motion: no-preference) {
  .dynamic-island-surface-idle-greeting-layer:not([data-active]) {
    scale: 0.88;
    filter: blur(2px);
  }
}
.dynamic-island-external.dynamic-island-idle .dynamic-island-surface-idle-greeting-layer {
  transform: translateX(-6px);
}
.dynamic-island-surface-idle-greeting[data-active-slot="0"] .dynamic-island-surface-idle-greeting-layer:first-child, .dynamic-island-surface-idle-greeting[data-active-slot="1"] .dynamic-island-surface-idle-greeting-layer:last-child {
  opacity: 1;
}
.dynamic-island-surface-idle-greeting-layer {
  perspective: 60px;
}
.dynamic-island-surface-idle-greeting-card {
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
}
.dynamic-island-surface-idle-greeting-face {
  grid-area: 1 / 1;
  backface-visibility: hidden;
}
.dynamic-island-surface-idle-greeting-face-back {
  transform: rotateY(180deg);
}
.dynamic-island-surface-idle-greeting-face:has(.dynamic-island-surface-idle-greeting-sparkle) {
  display: grid;
}
.dynamic-island-surface-idle-greeting-sparkle {
  grid-area: 1 / 1;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}
.dynamic-island-surface-idle-greeting-sparkle-large {
  transform-origin: 60% 48%;
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cpath%20d='M60%207.9Q70.3%2036.0%2094.2%2048Q70.3%2060.0%2060%2088.1Q49.7%2060.0%2025.8%2048Q49.7%2036.0%2060%207.9Z'/%3E%3C/svg%3E");
}
.dynamic-island-surface-idle-greeting-sparkle-upper {
  transform-origin: 24% 28%;
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cpath%20d='M24%207.4Q28.2%2021.8%2038.2%2028Q28.2%2034.2%2024%2048.6Q19.8%2034.2%209.8%2028Q19.8%2021.8%2024%207.4Z'/%3E%3C/svg%3E");
}
.dynamic-island-surface-idle-greeting-sparkle-lower {
  transform-origin: 36% 70%;
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cpath%20d='M36%2051.1Q40.8%2064.3%2051.9%2070Q40.8%2075.7%2036%2088.9Q31.2%2075.7%2020.1%2070Q31.2%2064.3%2036%2051.1Z'/%3E%3C/svg%3E");
}
.dynamic-island-surface-avatar-stack {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.dynamic-island-surface-avatar-stack-item {
  display: inline-flex;
  flex: 0 0 auto;
}
.dynamic-island-surface-avatar-stack > :not(:first-child) {
  margin-left: -6px;
}
.dynamic-island-surface-avatar-stack > * {
  transform: translate3d(0, 0, 0);
  transform-origin: center;
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out), transform 450ms var(--dynamic-island-shared-ease);
}
.dynamic-island-surface-avatar {
  --agent-avatar-optical-offset: -3px;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border: 1px solid var(--openbot-bg-notch);
  border-radius: var(--openbot-radius-pill);
}
.dynamic-island-surface-compact-identity {
  white-space: nowrap;
}
.dynamic-island-surface-compact-name {
  position: absolute;
  top: 50%;
  left: calc(100% + var(--openbot-space-1-5));
  width: max-content;
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-sm);
  text-align: left;
  text-overflow: ellipsis;
  transform: translateY(-50%);
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}
.dynamic-island-surface-status-badge {
  font-weight: var(--openbot-weight-semibold);
}
.dynamic-island-surface-status-badge-label {
  min-width: 0;
  display: inline-block;
  overflow: hidden;
}
.dynamic-island-surface-status-badge-icon {
  stroke-width: var(--openbot-icon-stroke);
}
.dynamic-island-surface-question-badge {
  background: var(--openbot-question-badge-soft);
  color: var(--openbot-question-badge-text);
}
.dynamic-island-surface-message-badge {
  background: var(--openbot-message-badge-soft);
  color: var(--openbot-message-badge-text);
}
.dynamic-island-surface-working-badge .ui-spinner {
  border-color: var(--openbot-success-soft);
  border-top-color: currentColor;
}
.dynamic-island[data-layout-state="expanded"] .dynamic-island-surface-compact-name {
  opacity: 0;
}
.dynamic-island-surface-leading-anchor .dynamic-island-surface-avatar {
  width: 100%;
  height: 100%;
}
.dynamic-island-surface-avatar-stack .dynamic-island-surface-avatar {
  width: 20px;
  height: 20px;
}
.dynamic-island-working[data-state="expanded"] .dynamic-island-surface-avatar-stack > * {
  transition-duration: var(--openbot-duration-fast), var(--dynamic-island-shared-duration);
}
.dynamic-island-working[data-state="expanded"] .dynamic-island-surface-avatar-stack > :nth-child(2) {
  transform: translate3d(-14px, 28.75px, 0);
}
.dynamic-island-working[data-state="expanded"] .dynamic-island-surface-avatar-stack > :nth-child(3) {
  transform: translate3d(-28px, 57.5px, 0);
}
@media (prefers-reduced-motion: reduce) {
  .dynamic-island-surface-avatar-stack > * {
    transition-duration: var(--openbot-duration-hover);
  }
}
.dynamic-island-surface-approval-badge {
  background: var(--openbot-approval-badge-soft);
  color: var(--openbot-warning);
}
.dynamic-island-surface-takeover-badge {
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
}
.dynamic-island-surface-content-swap {
  min-width: 0;
  display: flex;
}
.dynamic-island-surface-content-swap[data-swap-phase="update"] {
  animation: dynamic-island-surface-swap var(--text-swap-dur) var(--text-swap-ease) both;
}
.dynamic-island-surface-compact-swap {
  align-items: center;
}
.dynamic-island-surface-panel {
  display: grid;
  gap: 10px;
}
.dynamic-island-surface-list {
  display: grid;
  gap: 2px;
}
.dynamic-island-surface-row {
  min-width: 0;
  width: calc(100% + 2 * var(--openbot-space-2));
  height: auto;
  min-height: 44px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: var(--openbot-space-2);
  margin-inline: calc(-1 * var(--openbot-space-2));
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  color: inherit;
  cursor: pointer;
  font: inherit;
  outline: none;
  text-align: left;
  transition: background-color var(--openbot-duration-normal) var(--openbot-ease-out), transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.dynamic-island-surface-row .dynamic-island-surface-avatar, .dynamic-island-surface-working-avatar-slot {
  width: 32px;
  height: 32px;
}
@media (hover: hover) and (pointer: fine) {
  .dynamic-island-surface-row:hover {
    background: var(--openbot-hover);
  }
}
.dynamic-island-surface-row:active {
  transform: scale(0.98);
}
.dynamic-island-surface-row:focus-visible {
  background: var(--openbot-hover);
  box-shadow: inset 0 0 0 1px var(--openbot-border-focus), 0 0 0 3px var(--openbot-accent-soft);
}
.dynamic-island-surface-row-group {
  position: relative;
  min-width: 0;
}
.dynamic-island-surface-row-group:has(.dynamic-island-surface-row-stop) .dynamic-island-surface-row {
  padding-right: calc(var(--openbot-control-sm) + var(--openbot-space-2));
}
.dynamic-island-surface-row-stop {
  position: absolute;
  top: 50%;
  right: 0;
  color: var(--openbot-text-muted);
  transform: translateY(-50%);
}
@media (hover: hover) and (pointer: fine) {
  .dynamic-island-surface-row-stop:hover {
    color: var(--openbot-danger-text);
  }
}
.dynamic-island-surface-row-copy {
  min-width: 0;
  width: 100%;
  display: grid;
  gap: 1px;
}
.dynamic-island-surface-row strong {
  overflow: hidden;
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dynamic-island-surface-row small {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dynamic-island-message-first-panel {
  display: grid;
  gap: var(--openbot-space-3);
}
.dynamic-island-message-first-unread {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
  font-variant-numeric: tabular-nums;
  line-height: var(--openbot-leading-sm);
}
.dynamic-island-message-first-footer {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  border-top: 1px solid var(--openbot-border);
  padding-top: var(--openbot-space-2);
}
.dynamic-island-message-first-footer .ui-button {
  min-width: 92px;
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.dynamic-island-message-first-footer .ui-button:active {
  transform: scale(0.96);
}
.dynamic-island-message-first-footer svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.dynamic-island-surface-attention-panel {
  gap: var(--openbot-space-3);
}
.dynamic-island-reply {
  position: relative;
  min-width: 0;
  display: grid;
  gap: var(--openbot-space-1-5);
  margin: 0;
}
.dynamic-island-reply .dynamic-island-reply-input {
  height: var(--openbot-control-md);
  border-color: var(--openbot-border);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-hover);
  padding-right: calc(var(--openbot-control-md) + var(--openbot-space-1));
  padding-left: var(--openbot-space-3);
  font-size: var(--openbot-text-sm);
  user-select: text;
}
.dynamic-island-reply .dynamic-island-reply-input:focus-visible {
  border-color: var(--openbot-border-focus);
}
.dynamic-island-reply-send {
  position: absolute;
  top: calc((var(--openbot-control-md) - var(--openbot-control-xs)) / 2);
  right: calc((var(--openbot-control-md) - var(--openbot-control-xs)) / 2);
  border-radius: var(--openbot-radius-pill);
}
.dynamic-island-reply-send svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.dynamic-island-surface-question-step .dynamic-island-reply {
  margin-top: 6px;
}
.dynamic-island-surface-request-copy {
  min-width: 0;
  width: 100%;
  display: grid;
  gap: var(--openbot-space-2);
}
.dynamic-island-surface-command {
  min-width: 0;
  display: grid;
  gap: 3px;
  border-left: 1px solid var(--openbot-warning);
  padding: 2px 0 2px 10px;
}
.dynamic-island-surface-command-meta {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.dynamic-island-surface-command-meta small, .dynamic-island-surface-command-meta span {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dynamic-island-surface-command-meta small {
  flex: 0 0 auto;
}
.dynamic-island-surface-command-meta span {
  min-width: 0;
  text-align: right;
}
.dynamic-island-surface-command code {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dynamic-island-surface-context-line {
  min-width: 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--openbot-space-2);
  align-items: baseline;
}
.dynamic-island-surface-context-line small, .dynamic-island-surface-more {
  color: var(--openbot-text-dim);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
div.dynamic-island-surface-context-line span {
  overflow: hidden;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dynamic-island-surface-question-options {
  min-width: 0;
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dynamic-island-surface-question-options > li {
  min-width: 0;
}
.dynamic-island-surface-question-options button {
  width: 100%;
  min-height: 48px;
  min-width: 0;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: var(--openbot-space-2);
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-question-option-soft);
  padding: 7px 10px;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  outline: none;
  transition: background-color var(--openbot-duration-fast) var(--openbot-ease-out), transform var(--openbot-duration-fast) var(--openbot-ease-out);
}
.dynamic-island-surface-question-option-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.dynamic-island-surface-question-option-copy strong, .dynamic-island-surface-question-option-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dynamic-island-surface-question-option-copy strong {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
}
.dynamic-island-surface-question-option-copy small {
  min-width: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.dynamic-island-surface-question-option-index {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-question-option-hover);
  color: var(--openbot-question-option);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
@media (hover: hover) and (pointer: fine) {
  .dynamic-island-surface-question-options button:hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-question-option-hover);
  }
}
.dynamic-island-surface-question-options button:active:not(:disabled):not([data-disabled]) {
  background: var(--openbot-question-option-pressed);
  transform: scale(0.96);
}
.dynamic-island-surface-question-options button:focus-visible {
  box-shadow: inset 0 0 0 1px var(--openbot-question-option), 0 0 0 3px var(--openbot-question-option-soft);
}
.dynamic-island-surface-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-1);
  border-top: 1px solid var(--openbot-border);
  padding-top: var(--openbot-space-2);
}
.dynamic-island-surface-action-error {
  min-width: 0;
  margin: 0 auto 0 0;
  flex: 1 1 auto;
  align-self: center;
  color: var(--openbot-danger-text);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.dynamic-island-surface-actions svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.dynamic-island-surface-attention-panel .ui-button {
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.dynamic-island-surface-attention-panel .ui-button:active {
  transform: scale(0.96);
}
.dynamic-island-surface-question-panel {
  gap: 10px;
}
.dynamic-island-surface-question-progress {
  display: inline-flex;
  align-items: baseline;
  padding-top: 2px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  line-height: var(--openbot-leading-sm);
  white-space: nowrap;
}
.dynamic-island-surface-question-progress-stack {
  position: relative;
  width: 1.5em;
  display: inline-grid;
  overflow: hidden;
  text-align: right;
}
.dynamic-island-surface-question-progress-digit {
  grid-area: 1 / 1;
  display: inline-block;
  text-align: right;
  will-change: transform, opacity, filter;
}
.dynamic-island-surface-question-progress-digit.is-outgoing {
  position: absolute;
  inset: 0;
}
.dynamic-island-surface-question-step {
  width: 100%;
  min-width: 0;
}
.dynamic-island-surface-question-actions {
  align-items: center;
}
.dynamic-island-surface-question-actions .dynamic-island-surface-more {
  margin-right: auto;
}
.dynamic-island-surface-animated-row {
  animation: dynamic-island-surface-row-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}
.dynamic-island-surface-row-group:nth-child(2) .dynamic-island-surface-animated-row {
  animation-delay: 40ms;
}
.dynamic-island-surface-row-group:nth-child(3) .dynamic-island-surface-animated-row {
  animation-delay: 80ms;
}
@keyframes dynamic-island-surface-swap {
  from {
    opacity: 0;
    filter: blur(var(--text-swap-blur));
    transform: translateY(calc(var(--text-swap-translate-y) * -1)) scale(0.98);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}
@keyframes dynamic-island-surface-row-in {
  from {
    opacity: 0;
    filter: blur(var(--text-swap-blur));
    transform: translateY(var(--text-swap-translate-y)) scale(0.98);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}
.sidebar-mobile-app {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: var(--openbot-space-2);
  margin: var(--openbot-space-2) var(--openbot-space-3);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  padding: var(--openbot-space-3);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.sidebar-mobile-app-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-2);
}
.sidebar-mobile-app-header > strong {
  overflow: hidden;
  font-weight: var(--openbot-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-mobile-app-icon {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  color: var(--openbot-text-secondary);
}
.sidebar-mobile-app-dismiss {
  margin-right: calc(var(--openbot-space-1) * -1);
  color: var(--openbot-text-muted);
}
.sidebar-mobile-app-body {
  margin: 0;
  color: var(--openbot-text-muted);
}
.sidebar-mobile-app > .ui-button {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-community-actions {
  display: flex;
  gap: var(--openbot-space-1-5);
}
.sidebar-community-actions > .ui-button:first-child {
  flex: 1 1 auto;
  min-width: 0;
}
.sidebar-community-mark {
  flex: 0 0 auto;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
* {
  box-sizing: border-box;
}
html, body, #root {
  width: 100%;
  height: 100%;
  min-width: 0;
  margin: 0;
  overflow: hidden;
}
body {
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
  -webkit-font-smoothing: antialiased;
}
button, input, textarea {
  font: inherit;
}
.account-login-screen, .initial-setup-screen {
  position: absolute;
  z-index: var(--openbot-layer-dialog);
  inset: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow-y: auto;
  -webkit-app-region: drag;
}
.account-login-screen {
  padding: 32px 24px;
  background: var(--openbot-bg-canvas);
}
.initial-setup-screen {
  padding: 52px 24px 32px;
  background: radial-gradient(circle at 50% 18%, var(--openbot-hover), transparent 34%), var(--openbot-bg-canvas);
}
.account-login-shell {
  width: min(100%, 360px);
  display: flex;
  flex-direction: column;
  -webkit-app-region: no-drag;
}
.account-login-brand-lockup {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 24px;
  margin-bottom: 42px;
}
.account-login-logo {
  display: block;
  width: 80px;
  height: 80px;
}
.account-login-wordmark {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-display);
  font-weight: 620;
  letter-spacing: -0.015em;
  line-height: var(--openbot-leading-display);
}
.account-login {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: center;
}
.account-login h1 {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-3xl);
  font-weight: 580;
  letter-spacing: -0.035em;
  line-height: 30px;
}
.account-login-description {
  margin: 8px 0 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-lg);
  line-height: 21px;
}
.account-login-description strong {
  color: var(--openbot-text-primary);
  font-weight: 560;
}
.account-login-error {
  margin: 0;
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
  line-height: 17px;
  text-align: left;
}
.account-login > .account-login-error {
  margin-top: 18px;
}
.account-login-loader {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 28px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
}
.account-login-spinner, .account-login-button-spinner {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  border: 1.5px solid var(--openbot-border-strong);
  border-top-color: currentColor;
  border-radius: var(--openbot-radius-pill);
  animation: account-login-spin 900ms linear infinite;
}
.account-login-button-spinner {
  width: 13px;
  height: 13px;
}
.account-login-primary {
  width: 100%;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-surface-light);
  color: var(--openbot-text-on-light);
  font-size: var(--openbot-text-md);
  font-weight: 650;
  transition: background-color var(--openbot-duration-hover) ease, border-color var(--openbot-duration-hover) ease, transform var(--openbot-duration-fast) cubic-bezier(0.23, 1, 0.32, 1);
}
.account-login > .account-login-primary {
  margin-top: 30px;
}
@keyframes account-login-spin {
  to {
    transform: rotate(360deg);
  }
}
.account-login-form {
  width: 100%;
  display: grid;
  gap: 12px;
  margin-top: 24px;
}
.account-login-local-data {
  margin: 4px 0 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 17px;
  text-align: center;
  text-wrap: balance;
}
.account-login-local-data svg {
  display: inline-block;
  margin-right: 6px;
  vertical-align: -2px;
}
.account-login-email-field {
  display: grid;
  gap: 12px;
}
.account-login-form input:not(.otp-input-native) {
  width: 100%;
  height: 44px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  outline: 0;
  background: var(--openbot-bg-control);
  padding: 0 12px;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  transition: border-color var(--openbot-duration-hover) ease, background-color var(--openbot-duration-hover) ease, box-shadow var(--openbot-duration-hover) ease;
}
.account-login-form input:not(.otp-input-native):focus {
  border-color: var(--openbot-border-focus);
  background: var(--openbot-bg-surface);
  box-shadow: 0 0 0 3px var(--openbot-accent-soft);
}
.account-login-form input:not(.otp-input-native)[aria-invalid="true"] {
  border-color: var(--openbot-danger);
}
.account-login-form input:not(.otp-input-native)::placeholder {
  color: var(--openbot-text-placeholder);
}
.account-login-field-error {
  height: 16px;
  overflow: hidden;
  margin: -2px 0 0;
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-login-form input:not(.otp-input-native).t-input.is-error {
  border-color: var(--openbot-danger);
}
.account-login-primary:disabled, .account-login-primary[aria-disabled="true"], .account-login-code-action:disabled, .account-login-code-action[aria-disabled="true"] {
  cursor: default;
  opacity: 0.48;
}
.account-login-code-actions {
  width: 100%;
  min-height: var(--openbot-control-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.account-login-code-action {
  width: auto;
}
.account-login-code-action-change {
  justify-content: flex-start;
}
.account-login-code-action-resend {
  justify-content: flex-end;
}
.account-login-development-code {
  margin: 0;
  color: var(--openbot-warning);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--openbot-text-sm);
  line-height: 16px;
  text-align: left;
}
@media (hover: hover) and (pointer: fine) {
  .account-login-primary:hover:not(:disabled, [aria-disabled="true"]) {
    background: var(--openbot-text-primary);
  }
  .account-login-form input:not(.otp-input-native):hover:not(:focus) {
    border-color: var(--openbot-border-strong);
    background: var(--openbot-bg-surface);
  }
}
.account-login-primary:active:not(:disabled, [aria-disabled="true"]) {
  transform: scale(0.98);
}
.initial-setup {
  width: min(100%, 620px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  -webkit-app-region: no-drag;
}
.initial-setup-header {
  max-width: 560px;
}
.initial-setup-account-row {
  min-height: 28px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
}
.initial-setup-account {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.initial-setup-account i {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success);
  box-shadow: 0 0 0 3px var(--openbot-success-soft);
}
.initial-setup-signout, .initial-setup-back {
  border: 0;
  background: transparent;
  color: var(--openbot-text-muted);
}
.initial-setup-signout {
  margin-left: 2px;
  padding: 5px 7px;
  font-size: var(--openbot-text-sm);
}
.initial-setup-signout:hover, .initial-setup-back:hover {
  color: var(--openbot-text-secondary);
}
.initial-setup-back {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  margin-right: 3px;
  border-radius: var(--openbot-radius-pill);
  padding: 0;
}
.initial-setup-back:hover {
  background: var(--openbot-hover);
}
.initial-setup-back svg {
  width: 18px;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}
.initial-setup-eyebrow {
  margin: 0 0 9px;
  color: var(--text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.initial-setup h1 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--openbot-text-display);
  font-weight: 560;
  letter-spacing: -0.035em;
  line-height: 1.1;
}
.initial-setup-intro {
  max-width: 540px;
  margin: 12px 0 0;
  color: var(--text-secondary);
  font-size: var(--openbot-text-lg);
  line-height: 1.55;
}
.setup-route-list {
  display: grid;
  gap: 10px;
  margin-top: 30px;
  padding: 0;
  list-style: none;
}
.setup-route-button {
  width: 100%;
  min-height: 96px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 15px;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-canvas);
  padding: 15px 17px;
  color: var(--openbot-text-primary);
  text-align: left;
  transition: border-color var(--openbot-duration-hover) ease, background-color var(--openbot-duration-hover) ease, transform var(--openbot-duration-hover) ease;
}
.setup-route-button:hover {
  border-color: var(--openbot-text-dim);
  background: var(--openbot-bg-sidebar);
  transform: translateY(-1px);
}
.setup-route-button:active {
  transform: translateY(0);
  transition-duration: var(--openbot-duration-hover), var(--openbot-duration-hover), var(--openbot-duration-fast);
}
.setup-route-icon {
  position: relative;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-hover);
  color: var(--openbot-text-secondary);
}
.setup-route-icon svg {
  width: 23px;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}
.setup-route-icon i {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--openbot-bg-canvas);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
}
.setup-route-icon-local i {
  background: var(--openbot-success);
}
.setup-route-copy {
  display: grid;
  gap: 4px;
}
.setup-route-copy strong {
  font-size: var(--openbot-text-lg);
  font-weight: 600;
}
.setup-route-copy small {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 17px;
}
.setup-route-arrow {
  width: 19px;
  fill: none;
  stroke: var(--openbot-text-muted);
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--openbot-duration-hover) ease;
}
.setup-route-button:hover .setup-route-arrow {
  transform: translateX(2px);
}
.setup-local-content {
  margin-top: 28px;
}
.setup-remote-form {
  display: grid;
  gap: 15px;
  margin-top: 28px;
}
.setup-remote-form label {
  display: grid;
  gap: 7px;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: 560;
}
.setup-remote-form input, .setup-remote-form textarea {
  width: 100%;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  outline: 0;
  background: var(--openbot-bg-canvas);
  padding: 11px 12px;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: 18px;
  resize: none;
}
.setup-remote-form input {
  min-height: 43px;
}
.setup-remote-form input:focus, .setup-remote-form textarea:focus {
  border-color: var(--openbot-text-dim);
  background: var(--openbot-bg-sidebar);
}
.setup-remote-form input::placeholder, .setup-remote-form textarea::placeholder {
  color: var(--openbot-text-dim);
}
.setup-remote-note {
  margin: -2px 1px 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
}
.setup-remote-change {
  width: fit-content;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.setup-remote-change:hover:not(:disabled) {
  color: var(--openbot-text-secondary);
}
.provider-picker {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}
.provider-picker-standalone {
  margin-top: 24px;
}
.setup-local-content .provider-picker-standalone {
  margin-top: 0;
}
.provider-picker-label {
  margin-bottom: 7px;
  padding: 0;
  color: var(--text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: 560;
}
.provider-picker-heading {
  display: flex;
  min-height: 25px;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  margin-bottom: 7px;
}
.provider-picker-heading .provider-picker-label {
  margin-bottom: 0;
}
.ui-button.provider-picker-refresh {
  min-height: 25px;
  gap: var(--openbot-space-1);
  border-radius: var(--openbot-radius-md);
  color: var(--openbot-text-muted);
  padding-inline: var(--openbot-space-2);
}
.ui-button.provider-picker-refresh:hover:not(:disabled, [aria-disabled="true"]) {
  color: var(--openbot-text-primary);
}
.provider-picker-list {
  overflow: hidden;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-sidebar);
}
.provider-picker-option {
  min-height: 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  color: var(--text-primary);
}
.provider-picker-option-selection {
  min-width: 0;
  min-height: 44px;
  display: grid;
  grid-template-columns: 16px 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0 8px 12px;
  cursor: pointer;
}
.provider-picker-option + .provider-picker-option, .provider-picker-option-custom {
  border-top: 1px solid var(--openbot-border);
}
.provider-picker-option:hover:not(.provider-picker-option-unavailable), .provider-picker-option:focus-within {
  background: var(--openbot-hover);
}
.provider-picker-option-selected {
  background: var(--openbot-hover);
}
.provider-picker-option-unavailable {
  color: var(--openbot-text-muted);
}
.provider-picker-option-unavailable .provider-picker-option-selection {
  cursor: default;
}
.provider-picker-option-selectable-unavailable .provider-picker-option-selection {
  cursor: pointer;
}
.provider-picker-option-selectable-unavailable:hover {
  background: var(--openbot-hover);
}
.provider-picker-option input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--openbot-text-primary);
}
.provider-picker-actions {
  display: flex;
  align-items: center;
}
.ui-button.provider-picker-install {
  min-width: 58px;
  min-height: 28px;
  margin-right: 8px;
  border-radius: var(--openbot-radius-md);
  padding-inline: 9px;
}
.ui-button.provider-picker-connect {
  background: var(--openbot-accent);
  color: var(--openbot-text-primary);
}
@media (hover: hover) and (pointer: fine) {
  .ui-button.provider-picker-connect:hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-accent-hover);
  }
}
.provider-picker-logo {
  width: 18px;
  height: 18px;
  overflow: visible;
  fill: var(--openbot-provider-current);
}
.provider-picker-custom-mark {
  width: 18px;
  height: 18px;
  grid-column: 2;
  color: var(--openbot-text-secondary);
  stroke-width: var(--openbot-icon-stroke);
}
.provider-picker-option-unavailable .provider-picker-logo, .provider-picker-option-unavailable .provider-picker-custom-mark {
  opacity: 0.44;
}
.provider-picker-option-runtime {
  color: var(--openbot-text-primary);
}
.provider-picker-option-runtime .provider-picker-logo {
  opacity: 1;
}
.provider-picker-identity {
  display: grid;
  min-width: 0;
}
.provider-picker-name, .provider-picker-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.provider-picker-name {
  font-size: var(--openbot-text-md);
  font-weight: 530;
  line-height: 18px;
}
.provider-picker-email {
  color: var(--text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 15px;
}
.provider-picker-check-error {
  overflow: hidden;
  color: var(--openbot-warning);
  font-size: var(--openbot-text-sm);
  line-height: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.provider-picker-status-message {
  overflow: visible;
  white-space: normal;
}
.provider-picker-check-error.provider-picker-used-by {
  grid-column: 1 / -1;
  overflow: visible;
  margin-top: -6px;
  padding: 0 0 8px 66px;
  white-space: normal;
}
.provider-picker-option-selected .provider-picker-email {
  color: var(--openbot-text-readable);
}
.provider-picker-add-account svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.provider-picker-accounts {
  grid-column: 1 / -1;
  display: grid;
  gap: 4px;
  margin-top: -6px;
  padding: 0 0 8px 66px;
}
.provider-picker-account-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.provider-picker-account {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}
.provider-picker-account + .provider-picker-account {
  border-top: 1px solid var(--openbot-border);
}
.provider-picker-account-copy {
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  gap: 2px;
}
.provider-picker-account .provider-picker-check-error {
  white-space: normal;
}
.provider-picker-account-rename {
  max-width: 220px;
}
.provider-picker-state {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.provider-picker-version {
  overflow: hidden;
  color: var(--text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.provider-picker-option-selected .provider-picker-version {
  color: var(--openbot-text-readable);
}
.provider-picker-status {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
  white-space: nowrap;
}
.provider-picker-custom-count {
  color: var(--text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
  white-space: nowrap;
}
.ui-button.provider-picker-custom-count {
  min-height: 28px;
  margin-right: 8px;
  border-radius: var(--openbot-radius-md);
  padding-inline: 9px;
  color: var(--text-muted);
  font-size: var(--openbot-text-sm);
}
.provider-picker-status-available {
  color: var(--openbot-success);
}
.provider-picker-status-sign-in-required, .provider-picker-status-outdated, .provider-picker-status-update-available {
  color: var(--openbot-warning);
}
.provider-picker-status-ready {
  color: var(--openbot-success);
}
.provider-picker-status-download-error {
  color: var(--openbot-danger);
}
.provider-picker-status-finishing {
  color: var(--openbot-warning);
}
.provider-picker-status-not-installed, .provider-picker-status-checking, .provider-picker-status-error {
  color: var(--openbot-text-muted);
}
.provider-picker-status i {
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-dim);
}
.provider-picker-status-available i {
  background: var(--openbot-success);
}
.provider-picker-status-sign-in-required i, .provider-picker-status-outdated i, .provider-picker-status-update-available i {
  background: var(--openbot-warning);
}
.provider-picker-status-not-installed i, .provider-picker-status-checking i, .provider-picker-status-error i {
  background: var(--openbot-text-dim);
}
.provider-picker-hint {
  margin: 7px 0 0;
  color: var(--text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
}
.provider-picker-footer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  margin-top: 7px;
}
.provider-picker-footer .provider-picker-hint {
  margin: 0;
}
.ui-button.provider-picker-more {
  flex: 0 0 auto;
  gap: var(--openbot-space-1-5);
  margin-inline-start: auto;
  margin-inline-end: calc(var(--openbot-space-2) * -1);
}
.provider-picker-logo-stack {
  position: relative;
  z-index: 0;
  display: inline-flex;
}
.provider-picker-logo-stack-mark {
  position: relative;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control-active);
  box-shadow: 0 0 0 2px var(--openbot-bg-canvas);
}
.provider-picker-logo-stack-mark + .provider-picker-logo-stack-mark {
  z-index: -1;
  margin-inline-start: -4px;
}
.provider-picker-logo-stack-mark .provider-picker-logo {
  width: 12px;
  height: 12px;
}
.custom-provider-backdrop.provider-more-backdrop {
  align-items: start;
  padding-top: min(14vh, 120px);
}
.custom-provider-dialog.provider-more-dialog {
  width: min(400px, 100%);
  max-height: min(600px, calc(100dvh - min(14vh, 120px) - var(--openbot-space-6)));
  padding: var(--openbot-space-2);
}
.provider-more-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-3);
}
.provider-more-title {
  margin: 0;
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
}
.ui-input.provider-more-search {
  flex-shrink: 0;
  margin: var(--openbot-space-1) 0 var(--openbot-space-2);
}
.provider-more-search::-webkit-search-cancel-button {
  appearance: none;
}
.provider-more-list {
  min-height: 0;
  overflow-y: auto;
}
.ui-button.provider-more-row {
  width: 100%;
  height: auto;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  justify-content: stretch;
  align-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  border: 0;
  border-radius: var(--openbot-radius-md);
  color: inherit;
  font: inherit;
  line-height: normal;
  text-align: left;
  white-space: normal;
}
.ui-button.provider-more-row:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: -2px;
}
.provider-more-row .provider-picker-custom-mark {
  grid-column: auto;
}
.provider-more-divider {
  height: 1px;
  margin: var(--openbot-space-1) var(--openbot-space-3);
  border: 0;
  background: var(--openbot-border);
}
.provider-more-empty {
  margin: 0;
  padding: var(--openbot-space-2) var(--openbot-space-3);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.initial-setup-error {
  margin: 12px 2px 0;
  color: var(--openbot-danger);
  font-size: var(--openbot-text-md);
  line-height: 1.45;
}
.initial-setup-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 20px;
}
.initial-setup-save {
  min-height: 40px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  padding: 12px 18px;
  font-size: var(--openbot-text-md);
  font-weight: 620;
  min-width: 180px;
  background: var(--openbot-text-primary);
  color: var(--openbot-bg-sidebar);
  transition: transform var(--openbot-duration-normal) ease, background var(--openbot-duration-hover) ease;
}
.initial-setup-save:hover:not(:disabled) {
  background: var(--openbot-text-primary);
}
.initial-setup-save:disabled {
  cursor: default;
  opacity: 0.48;
}
.initial-setup-save:active:not(:disabled) {
  transform: scale(0.992);
}
@media (max-width: 620px) {
  .initial-setup-screen {
    place-items: start center;
    padding: 52px 18px 24px;
  }
  .account-login-screen {
    padding-inline: 18px;
  }
  .initial-setup-actions, .initial-setup-save {
    width: 100%;
  }
  .initial-setup-actions {
    flex-direction: column-reverse;
  }
  .setup-route-button {
    grid-template-columns: 42px minmax(0, 1fr) 18px;
    gap: 12px;
    padding-inline: 13px;
  }
  .setup-route-icon {
    width: 42px;
    height: 42px;
  }
  .initial-setup-account {
    max-width: 55vw;
  }
}
@media (max-width: 480px) {
  .account-login-screen {
    padding: 40px 20px;
  }
  .account-login-brand-lockup {
    margin-bottom: 24px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .account-login, .initial-setup {
    animation: setup-enter var(--openbot-duration-overlay) cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
  .account-login[data-transition="forward"] .account-login-title, .account-login[data-transition="forward"] .account-login-description {
    animation: account-login-copy-forward var(--openbot-duration-overlay) var(--openbot-ease-out) both;
  }
  .account-login[data-transition="back"] .account-login-title, .account-login[data-transition="back"] .account-login-description {
    animation: account-login-copy-back var(--openbot-duration-overlay) var(--openbot-ease-out) both;
  }
  .account-login[data-transition] .account-login-description {
    animation-delay: 18ms;
  }
  .account-login[data-transition="forward"] .account-login-form[data-auth-panel="code"] {
    animation: account-login-panel-forward var(--openbot-duration-overlay) 32ms var(--openbot-ease-out) both;
  }
  .account-login[data-transition="back"] .account-login-form[data-auth-panel="email"] {
    animation: account-login-panel-back var(--openbot-duration-overlay) 32ms var(--openbot-ease-out) both;
  }
  @keyframes setup-enter {
    from {
      opacity: 0;
      transform: translateY(6px);
    }
  }
  @keyframes account-login-copy-forward {
    from {
      filter: blur(4px);
      opacity: 0;
      transform: translateX(10px);
    }
  }
  @keyframes account-login-copy-back {
    from {
      filter: blur(4px);
      opacity: 0;
      transform: translateX(-10px);
    }
  }
  @keyframes account-login-panel-forward {
    from {
      filter: blur(6px);
      opacity: 0;
      transform: translateX(16px) scale(0.985);
    }
  }
  @keyframes account-login-panel-back {
    from {
      filter: blur(6px);
      opacity: 0;
      transform: translateX(-16px) scale(0.985);
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .account-login-spinner, .approval-card {
    animation: none;
  }
  .account-login[data-transition] .account-login-title, .account-login[data-transition] .account-login-description, .account-login[data-transition] .account-login-form[data-auth-panel] {
    animation: none;
  }
}
button {
  cursor: pointer;
}
button:not(.ui-button):focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}
::selection {
  background: var(--openbot-accent-strong);
}
::-webkit-scrollbar {
  width: 0;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-border-strong);
  background-clip: padding-box;
}
.scroll-fade-top:not(.scroll-fade-bottom) {
  -webkit-mask-image: linear-gradient( to bottom, transparent 0, var(--openbot-text-primary) 18px, var(--openbot-text-primary) 100% );
  mask-image: linear-gradient( to bottom, transparent 0, var(--openbot-text-primary) 18px, var(--openbot-text-primary) 100% );
}
.scroll-fade-bottom:not(.scroll-fade-top) {
  -webkit-mask-image: linear-gradient( to bottom, var(--openbot-text-primary) 0, var(--openbot-text-primary) calc(100% - 18px), transparent 100% );
  mask-image: linear-gradient( to bottom, var(--openbot-text-primary) 0, var(--openbot-text-primary) calc(100% - 18px), transparent 100% );
}
.scroll-fade-top.scroll-fade-bottom {
  -webkit-mask-image: linear-gradient( to bottom, transparent 0, var(--openbot-text-primary) 18px, var(--openbot-text-primary) calc(100% - 18px), transparent 100% );
  mask-image: linear-gradient( to bottom, transparent 0, var(--openbot-text-primary) 18px, var(--openbot-text-primary) calc(100% - 18px), transparent 100% );
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
body, .account-login-screen, .initial-setup-screen, .app-frame, .conversation-panel, .direct-conversation {
  background: var(--openbot-bg-canvas);
}
.panel-edge, .direct-conversation-header, .remote-desktop-header, .settings-panel, .browser-panel, .remote-desktop-workspace, .provider-picker-list {
  border-color: var(--openbot-border);
}
.search-field, .composer, .direct-composer, .settings-field input, .settings-field textarea, .settings-field select, .setup-remote-form input, .setup-remote-form textarea, .account-login-form input {
  border-color: var(--openbot-border);
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-primary);
}
.search-field:focus-within, .composer:focus-within, .direct-composer:focus-within, .settings-field input:focus, .settings-field textarea:focus, .settings-field select:focus, .setup-remote-form input:focus, .setup-remote-form textarea:focus, .account-login-form input:focus {
  border-color: var(--openbot-border-focus);
  background: var(--openbot-bg-surface-raised);
}
.search-field input::placeholder, .composer-editor-placeholder, .direct-composer textarea::placeholder, .settings-field input::placeholder, .settings-field textarea::placeholder, .setup-remote-form input::placeholder, .setup-remote-form textarea::placeholder, .account-login-form input::placeholder {
  color: var(--openbot-text-placeholder);
}
.provider-picker-option-selected, .provider-model-option-selected {
  border-color: var(--openbot-border-focus);
  background: var(--openbot-accent-soft);
  color: var(--openbot-text-primary);
}
.provider-picker-option, .provider-model-option {
  border-color: var(--openbot-border);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-secondary);
}
.provider-picker-option:hover:not(.provider-picker-option-unavailable), .provider-picker-option:focus-within, .provider-model-option:hover, .provider-model-option:focus-visible {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}
.voice-button, .voice-button-active, .initial-setup-save, .account-login-primary {
  background: var(--openbot-surface-light);
  color: var(--openbot-text-on-light);
}
.voice-button:hover, .voice-button-active:hover, .initial-setup-save:hover:not(:disabled), .account-login-primary:hover:not(:disabled, [aria-disabled="true"]) {
  background: var(--openbot-text-primary);
  color: var(--openbot-text-on-light);
}
.remote-desktop-overlay > button, .remote-desktop-overlay > button:hover {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}
.remote-desktop-overlay > button:hover {
  background: var(--openbot-bg-control-active);
}
.account-login-error, .initial-setup-error {
  border-color: var(--openbot-danger-soft);
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
}
.setup-route-button, .setup-route-icon, .setup-remote-form input, .setup-remote-form textarea {
  border-color: var(--openbot-border);
  background: var(--openbot-bg-surface);
}
.setup-route-button:hover, .setup-route-button:focus-visible {
  border-color: var(--openbot-border-focus);
  background: var(--openbot-bg-surface-raised);
}
.setup-route-icon-local i, .provider-picker-status-available i {
  color: var(--openbot-success);
}
.account-login-development-code, .provider-picker-status-sign-in-required i, .provider-picker-status-outdated i {
  color: var(--openbot-warning);
}
.app-loading {
  --app-loading-exit-delay: 0ms;
  --app-loading-play: running;
  --app-loading-at: 0s;
  position: absolute;
  z-index: var(--openbot-layer-dialog);
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--openbot-bg-canvas);
  -webkit-app-region: drag;
}
.app-loading-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.app-loading-row {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  padding-top: 48px;
}
.app-loading-agent {
  position: relative;
  width: 56px;
  height: 56px;
}
.app-loading-agent::after {
  position: absolute;
  z-index: -1;
  bottom: -8px;
  left: 50%;
  width: 70%;
  height: 8px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-muted);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-muted) 24%, transparent);
  }
  content: "";
  transform: translateX(-50%);
}
.app-loading-body {
  position: relative;
  width: 100%;
  height: 100%;
  transform-origin: 50% 100%;
}
.app-loading-bot {
  display: block;
  width: 100%;
  height: 100%;
}
.app-loading[data-scrub] {
  --app-loading-play: paused;
}
.app-loading-snore {
  position: absolute;
  top: 13px;
  left: 37px;
  transition: opacity var(--openbot-duration-normal) var(--openbot-ease-out);
}
.app-loading:not([data-phase="loading"]) .app-loading-snore {
  opacity: 0;
}
.app-loading-z {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 9px;
  height: 9px;
  scale: calc(0.7 + var(--app-loading-z-index) * 0.15);
  translate: calc(var(--app-loading-z-index) * 6px) calc(var(--app-loading-z-index) * -9px);
}
.app-loading-z-mark {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: var(--openbot-text-muted);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2px;
}
.app-loading-status {
  min-height: 20px;
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
}
.app-loading-line {
  display: block;
}
.app-loading:not([data-phase="loading"]) {
  pointer-events: none;
  -webkit-app-region: no-drag;
  animation: app-loading-exit var(--openbot-duration-overlay) var(--openbot-ease-in-out) var(--app-loading-exit-delay) forwards;
}
@media (prefers-reduced-motion: no-preference) {
  .app-loading[data-phase="exit"] {
    --app-loading-exit-delay: 760ms;
  }
  .app-loading-stage {
    animation: app-loading-enter var(--openbot-duration-overlay) var(--openbot-ease-out) calc(250ms - var(--app-loading-at)) both var(--app-loading-play);
  }
  .app-loading-agent:not([data-sleeper]) .app-loading-body {
    animation: app-loading-hop var(--app-loading-wave) var(--openbot-ease-in-out) calc(var(--app-loading-index) * var(--app-loading-stagger) - var(--app-loading-at)) infinite var(--app-loading-play);
  }
  .app-loading-agent:not([data-sleeper])::after {
    animation: app-loading-shadow var(--app-loading-wave) var(--openbot-ease-in-out) calc(var(--app-loading-index) * var(--app-loading-stagger) - var(--app-loading-at)) infinite var(--app-loading-play);
  }
  .app-loading-agent[data-sleeper] .app-loading-body {
    animation: app-loading-breathe 1.8s var(--openbot-ease-in-out) calc(0s - var(--app-loading-at)) infinite alternate var(--app-loading-play);
  }
  .app-loading-z {
    --app-loading-z-delay: calc(var(--app-loading-z-index) * 1.2s - var(--app-loading-at));
    opacity: 0;
    animation: app-loading-z-rise 3.6s cubic-bezier(0.33, 0.1, 0.4, 1) var(--app-loading-z-delay) infinite var(--app-loading-play), app-loading-z-fade 3.6s linear var(--app-loading-z-delay) infinite var(--app-loading-play);
  }
  .app-loading-z-mark {
    animation: app-loading-z-sway 0.9s var(--openbot-ease-in-out) var(--app-loading-z-delay) infinite alternate var(--app-loading-play);
  }
  .app-loading-line {
    animation: app-loading-line-in 280ms var(--openbot-ease-out);
  }
  .app-loading[data-scrub] .app-loading-line {
    animation: none;
  }
  .app-loading[data-phase="exit"] .app-loading-body {
    animation: app-loading-leap 640ms var(--openbot-ease-in-out) calc(var(--app-loading-index, 0) * 70ms) forwards;
  }
  .app-loading[data-phase="exit"] [data-sleeper] .app-loading-body {
    animation: app-loading-breathe 1.8s var(--openbot-ease-in-out) calc(0s - var(--app-loading-at)) infinite alternate, app-loading-drift 720ms cubic-bezier(0.5, 0, 0.9, 0.5) 200ms forwards;
  }
  .app-loading[data-phase="exit"] .app-loading-agent::after {
    animation: app-loading-shadow-out 320ms var(--openbot-ease-out) calc(var(--app-loading-index, 0) * 70ms + 120ms) forwards;
  }
  .app-loading[data-phase="exit"] [data-sleeper]::after {
    animation-delay: 480ms;
  }
  .app-loading:not([data-phase="loading"]) .app-loading-status {
    animation: app-loading-fade 200ms var(--openbot-ease-out) forwards;
  }
}
@keyframes app-loading-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}
@keyframes app-loading-hop {
  0%, 78%, 100% {
    transform: translateY(0) scale(1, 1);
  }
  10% {
    transform: translateY(0) scale(1.14, 0.86);
  }
  28% {
    transform: translateY(-30px) scale(0.9, 1.1);
  }
  44% {
    transform: translateY(-40px) scale(1, 1);
  }
  62% {
    transform: translateY(0) scale(0.94, 1.06);
  }
  68% {
    transform: translateY(0) scale(1.16, 0.84);
  }
}
@keyframes app-loading-shadow {
  0%, 62%, 100% {
    opacity: 1;
    transform: translateX(-50%) scaleX(1);
  }
  68% {
    transform: translateX(-50%) scaleX(1.15);
  }
  44% {
    opacity: 0.45;
    transform: translateX(-50%) scaleX(0.55);
  }
}
@keyframes app-loading-breathe {
  from {
    transform: scale(1, 1);
  }
  to {
    transform: scale(0.97, 1.04) rotate(-1.5deg);
  }
}
@keyframes app-loading-drift {
  from {
    opacity: 1;
    translate: 0 0;
  }
  60% {
    opacity: 1;
  }
  to {
    opacity: 0;
    translate: 0 -40vh;
  }
}
@keyframes app-loading-z-rise {
  from {
    scale: 0.45;
    translate: 0 0;
  }
  to {
    scale: 1.1;
    translate: 12px -30px;
  }
}
@keyframes app-loading-z-fade {
  0%, 100% {
    opacity: 0;
  }
  18%, 60% {
    opacity: 1;
  }
}
@keyframes app-loading-z-sway {
  from {
    transform: translateX(-2px) rotate(-14deg);
  }
  to {
    transform: translateX(2px) rotate(12deg);
  }
}
@keyframes app-loading-line-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
@keyframes app-loading-leap {
  0% {
    transform: translateY(0) scale(1, 1);
  }
  25% {
    transform: translateY(0) scale(1.2, 0.8);
  }
  45% {
    opacity: 1;
    transform: translateY(-40px) scale(0.85, 1.2);
  }
  100% {
    opacity: 0;
    transform: translateY(-70vh) scale(0.85, 1.2);
  }
}
@keyframes app-loading-shadow-out {
  to {
    opacity: 0;
    transform: translateX(-50%) scaleX(0.3);
  }
}
@keyframes app-loading-fade {
  to {
    opacity: 0;
  }
}
@keyframes app-loading-exit {
  to {
    opacity: 0;
  }
}
.server-connection-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3);
  background: var(--openbot-bg-canvas);
  border-bottom: 1px solid var(--openbot-border);
}
.server-connection-notice p {
  margin: 0;
}
.server-connection-detail {
  color: var(--openbot-text-muted);
  font-variant-numeric: tabular-nums;
  text-wrap: pretty;
}
.server-connection-actions {
  display: flex;
  gap: var(--openbot-space-2);
  -webkit-app-region: no-drag;
}
.server-connection-content {
  position: relative;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.server-connection-content[hidden] {
  display: none;
}
.language-wheel-shell {
  width: min(100%, 360px);
  min-height: 100%;
  margin-inline: auto;
  padding: var(--openbot-space-8) var(--openbot-space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-3);
  -webkit-app-region: no-drag;
}
.language-wheel-shell .account-login-brand-lockup {
  margin-bottom: var(--openbot-space-4);
}
.language-wheel-title {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.language-wheel-frame {
  position: relative;
  width: 100%;
}
.language-wheel-arrows {
  position: absolute;
  top: 50%;
  left: calc(100% + var(--openbot-space-2));
  translate: 0 -50%;
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
}
.language-wheel-arrows svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
}
.language-wheel {
  --row: 44px;
  position: relative;
  width: 100%;
  height: calc(var(--row) * 5);
  overflow: clip;
  cursor: grab;
  touch-action: none;
  user-select: none;
  mask-image: linear-gradient( transparent, var(--openbot-text-primary) 30%, var(--openbot-text-primary) 70%, transparent );
}
.language-wheel[data-dragging] {
  cursor: grabbing;
}
.language-wheel::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: calc(var(--row) * 2);
  height: var(--row);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-grouped);
}
.language-wheel:has(:focus-visible)::before {
  box-shadow: inset 0 0 0 1px var(--openbot-border-focus), var(--openbot-focus-ring);
}
.language-wheel-track {
  position: relative;
  height: 100%;
}
.language-wheel-item {
  position: absolute;
  inset-inline: 0;
  top: calc(var(--row) * 2);
  height: var(--row);
  translate: 0 calc(var(--offset) * var(--row));
  opacity: max(0, 1 - var(--distance) * 0.35);
  transition: translate var(--openbot-duration-overlay) var(--openbot-ease-out), opacity var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.language-wheel-label {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-3xl);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: -0.03em;
  line-height: 1;
  cursor: inherit;
}
.language-wheel-name {
  display: flex;
  align-items: center;
  gap: 0.4em;
  scale: max(0.6, 1 - var(--distance) * 0.2);
  transition: scale var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.language-wheel[data-dragging] :is(.language-wheel-item, .language-wheel-name) {
  transition: none;
}
.language-wheel-flag {
  scale: 0.9;
  letter-spacing: 0;
}
.language-wheel-continue {
  width: min(100%, 288px);
  min-height: 44px;
  margin-top: var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
}
.language-wheel-continue svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  transition: translate var(--openbot-duration-normal) var(--openbot-ease-out);
}
.language-wheel-continue:hover:not(:disabled) {
  background: var(--openbot-surface-light);
}
.language-wheel-continue:is(:hover, :focus-visible):not(:disabled) svg {
  translate: var(--openbot-space-1) 0;
}
.language-wheel-continue:active:not(:disabled) svg {
  translate: var(--openbot-space-2) 0;
}
@media (prefers-reduced-motion: reduce) {
  .language-wheel-item, .language-wheel-name, .language-wheel-continue svg {
    transition: none;
  }
}
.onboarding-screen {
  position: absolute;
  z-index: var(--openbot-layer-dialog);
  inset: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow-y: auto;
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
  -webkit-app-region: drag;
}
.onboarding-shell {
  width: min(100%, 680px);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 52px 24px;
  -webkit-app-region: no-drag;
}
.onboarding-progress {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  margin-bottom: 20px;
}
.onboarding-progress span {
  width: 6px;
  height: 6px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-border-strong);
  transition: width var(--openbot-duration-normal) var(--openbot-ease-out), background-color var(--openbot-duration-normal) ease;
}
.onboarding-progress span.is-complete {
  background: var(--openbot-text-muted);
}
.onboarding-progress span.is-active {
  width: 22px;
  background: var(--openbot-text-primary);
}
.onboarding-step {
  width: 100%;
  display: flex;
  justify-content: center;
}
.onboarding-panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.onboarding-panel h1 {
  max-width: 620px;
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-display);
  font-weight: var(--openbot-weight-medium);
  letter-spacing: -0.045em;
  line-height: 1.12;
}
.onboarding-description {
  max-width: 560px;
  margin: 10px 0 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-lg);
  line-height: 1.45;
}
.onboarding-computer-visual svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.onboarding-provider {
  width: min(100%, 480px);
  margin-top: 26px;
  text-align: left;
}
.onboarding-provider .provider-picker-standalone {
  margin-top: 0;
}
.onboarding-provider .provider-picker-label {
  color: var(--openbot-text-secondary);
}
.onboarding-provider .provider-picker-heading {
  padding-inline: 1px;
}
.onboarding-provider .provider-picker-list {
  background: var(--openbot-bg-control);
}
.onboarding-provider .provider-picker-hint {
  color: var(--openbot-text-muted);
}
.onboarding-computer-visual {
  position: relative;
  width: min(100%, 400px);
  margin-top: 20px;
}
.onboarding-computer-stop-mist, .onboarding-computer-highlight-start {
  stop-color: var(--openbot-onboarding-desktop-mist);
}
.onboarding-computer-stop-blue, .onboarding-computer-highlight-end {
  stop-color: var(--openbot-onboarding-desktop-blue);
}
.onboarding-computer-stop-indigo {
  stop-color: var(--openbot-onboarding-desktop-indigo);
}
.onboarding-computer-highlight-start {
  stop-opacity: 0.92;
}
.onboarding-computer-highlight-end {
  stop-opacity: 0;
}
.onboarding-computer-desktop {
  stroke: var(--openbot-border-on-light);
  stroke-width: 1;
  filter: drop-shadow(0 16px 22px var(--openbot-shadow-popover-ambient));
}
.onboarding-computer-desktop-highlight {
  pointer-events: none;
}
.onboarding-computer-desktop-beam {
  fill: var(--openbot-onboarding-desktop-mist);
  opacity: 0.16;
  pointer-events: none;
}
.onboarding-computer-window-shadow {
  fill: var(--openbot-shadow-dialog);
  opacity: 0.46;
}
.onboarding-computer-window {
  transform-box: fill-box;
  transform-origin: center;
  animation: onboarding-computer-window-drag 4.6s var(--openbot-ease-in-out) infinite;
}
.onboarding-computer-window-body {
  fill: var(--openbot-onboarding-window);
  stroke: var(--openbot-border-on-light);
  stroke-width: 1;
}
.onboarding-computer-window-bar, .onboarding-computer-window-bar-fill {
  fill: var(--openbot-text-muted-on-light);
  opacity: 0.24;
}
.onboarding-computer-window-bar {
  stroke: var(--openbot-border-on-light);
  stroke-width: 1;
}
.onboarding-computer-window-pane {
  fill: var(--openbot-text-dim-on-light);
  opacity: 0.18;
}
.onboarding-computer-window-card {
  fill: var(--openbot-text-dim-on-light);
  opacity: 0.24;
}
.onboarding-computer-window-line {
  fill: var(--openbot-text-dim-on-light);
  opacity: 0.54;
}
.onboarding-computer-window-line-short {
  opacity: 0.44;
}
.onboarding-computer-dot-danger {
  fill: var(--openbot-danger);
}
.onboarding-computer-dot-warning {
  fill: var(--openbot-warning);
}
.onboarding-computer-dot-success {
  fill: var(--openbot-success);
}
.onboarding-computer-cursor {
  transform-box: fill-box;
  transform-origin: 0 0;
  animation: onboarding-computer-cursor-drag 4.6s var(--openbot-ease-in-out) infinite;
}
.onboarding-computer-cursor path {
  fill: var(--openbot-text-on-light);
  stroke: var(--openbot-onboarding-window);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  filter: drop-shadow(0 2px 3px var(--openbot-shadow-popover-ambient));
  paint-order: stroke fill;
}
.onboarding-computer-avatar {
  position: absolute;
  z-index: 1;
  top: 40%;
  left: 73%;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  pointer-events: none;
  animation: onboarding-computer-avatar-drag 4.6s var(--openbot-ease-in-out) infinite;
}
.onboarding-computer-avatar .agent-avatar {
  width: 34px;
  height: 34px;
}
.onboarding-computer-avatar .agent-avatar > svg {
  width: 128%;
  height: 128%;
  filter: drop-shadow(0 2px 4px var(--openbot-shadow-popover-ambient));
}
@keyframes onboarding-computer-window-drag {
  0%, 34% {
    transform: translate(0, 0);
  }
  56%, 78% {
    transform: translate(18px, 8px);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes onboarding-computer-cursor-drag {
  0%, 8% {
    opacity: 0;
    transform: translate(352px, 190px) scale(0.68);
  }
  18%, 32% {
    opacity: 1;
    transform: translate(282px, 72px) scale(0.76);
  }
  38% {
    opacity: 1;
    transform: translate(282px, 72px) scale(0.71);
  }
  56%, 70% {
    opacity: 1;
    transform: translate(300px, 80px) scale(0.71);
  }
  78% {
    opacity: 1;
    transform: translate(300px, 80px) scale(0.76);
  }
  92%, 100% {
    opacity: 0;
    transform: translate(352px, 190px) scale(0.68);
  }
}
@keyframes onboarding-computer-avatar-drag {
  0%, 8% {
    opacity: 0;
    transform: translate(68px, 112px) scale(0.88);
  }
  18%, 32% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  38% {
    opacity: 1;
    transform: translate(0, 0) scale(0.94);
  }
  56%, 70% {
    opacity: 1;
    transform: translate(18px, 8px) scale(0.94);
  }
  78% {
    opacity: 1;
    transform: translate(18px, 8px) scale(1);
  }
  92%, 100% {
    opacity: 0;
    transform: translate(68px, 112px) scale(0.88);
  }
}
.onboarding-error {
  width: min(100%, 480px);
  margin: 12px 0 0;
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
  line-height: 1.45;
  text-align: center;
}
.onboarding-actions {
  width: min(100%, 288px);
  display: grid;
  gap: var(--openbot-space-2);
  margin-top: 22px;
}
.onboarding-screen[data-step="computer"] .onboarding-actions {
  margin-top: 16px;
}
.onboarding-actions .ui-button {
  width: 100%;
  min-height: 44px;
  border-radius: var(--openbot-radius-pill);
}
.onboarding-next {
  order: -1;
}
.onboarding-next-reason {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 1.45;
  text-align: center;
}
@media (max-width: 620px) {
  .onboarding-shell {
    padding: 48px 18px;
  }
  .onboarding-panel h1 {
    font-size: var(--openbot-text-3xl);
  }
  .onboarding-description {
    font-size: var(--openbot-text-md);
  }
  .onboarding-computer-visual {
    width: min(100%, 320px);
    margin-top: 16px;
  }
  .onboarding-computer-avatar {
    width: 30px;
    height: 30px;
  }
  .onboarding-computer-avatar .agent-avatar {
    width: 30px;
    height: 30px;
  }
}
@media (max-width: 460px) {
  .onboarding-provider .provider-picker-option-selection {
    grid-template-columns: 16px 18px minmax(0, 1fr);
  }
  .onboarding-provider .provider-picker-state {
    grid-column: 3;
    justify-self: start;
  }
  .onboarding-computer-visual {
    width: min(100%, 320px);
    margin-top: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .onboarding-progress span, .onboarding-computer-window, .onboarding-computer-cursor, .onboarding-computer-avatar {
    animation: none;
    transition: none;
  }
  .onboarding-computer-window {
    transform: translate(18px, 8px);
  }
  .onboarding-computer-cursor {
    opacity: 1;
    transform: translate(300px, 80px) scale(0.76);
  }
  .onboarding-computer-avatar {
    opacity: 1;
    transform: translate(18px, 8px);
  }
}
:is(.onboarding-provider, .setup-local-content) .provider-picker-list {
  overflow: visible;
}
:is(.onboarding-provider, .setup-local-content) .provider-picker-list > :first-child, :is(.onboarding-provider, .setup-local-content) .provider-picker-list > :first-child > .provider-picker-option:first-child {
  border-top-left-radius: calc(var(--openbot-radius-md) - 1px);
  border-top-right-radius: calc(var(--openbot-radius-md) - 1px);
}
:is(.onboarding-provider, .setup-local-content) .provider-picker-list > :last-child, :is(.onboarding-provider, .setup-local-content) .provider-picker-list > :last-child > .provider-picker-option:last-child {
  border-bottom-left-radius: calc(var(--openbot-radius-md) - 1px);
  border-bottom-right-radius: calc(var(--openbot-radius-md) - 1px);
}
:is(.onboarding-provider, .setup-local-content) .provider-picker-option-with-callout {
  position: relative;
}
.provider-picker-callout {
  position: absolute;
  right: calc(100% + 10px);
  bottom: 50%;
  width: 150px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--openbot-onboarding-desktop-indigo);
  pointer-events: none;
  animation: provider-picker-callout-in 420ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.provider-picker-callout-title {
  font-size: var(--openbot-text-md);
  font-weight: 620;
  line-height: 18px;
}
.provider-picker-callout-detail {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
}
.provider-picker-callout-arrow {
  width: 92px;
  height: 40px;
  align-self: flex-end;
  margin-top: 2px;
  margin-bottom: -10px;
}
@keyframes provider-picker-callout-in {
  from {
    opacity: 0;
  }
}
.provider-picker-callout-end {
  right: auto;
  left: calc(100% + 10px);
  align-items: flex-end;
  text-align: right;
}
.provider-picker-callout-end .provider-picker-callout-arrow {
  align-self: flex-start;
  transform: scaleX(-1);
}
@media (prefers-reduced-motion: reduce) {
  .provider-picker-callout {
    animation: none;
  }
}
@media (max-width: 860px) {
  .provider-picker-callout {
    display: none;
  }
}
@media (max-width: 960px) {
  .setup-local-content .provider-picker-callout {
    display: none;
  }
}
.server-onboarding-screen {
  position: fixed;
}
.server-onboarding-close {
  position: absolute;
  top: 12px;
  right: 12px;
  -webkit-app-region: no-drag;
}
.first-run-screen[data-step="choose"] .onboarding-shell {
  width: min(100%, 960px);
}
.first-run-screen .onboarding-shell > .onboarding-step {
  view-transition-name: first-run-step;
}
.first-run-screen .onboarding-shell > .onboarding-progress {
  view-transition-name: first-run-progress;
}
.first-run-screen .onboarding-shell > .onboarding-actions {
  view-transition-name: first-run-actions;
}
::view-transition-group(first-run-step), ::view-transition-group(first-run-progress), ::view-transition-group(first-run-actions) {
  animation-duration: 440ms;
  animation-timing-function: var(--openbot-ease-out);
}
::view-transition-old(first-run-step), ::view-transition-new(first-run-step) {
  inset-inline-start: 50%;
  inline-size: auto;
  translate: -50% 0;
}
html:active-view-transition-type(step)::view-transition-old(first-run-step) {
  animation: first-run-step-out 220ms var(--openbot-ease-out) both;
}
html:active-view-transition-type(step)::view-transition-new(first-run-step) {
  animation: first-run-step-in 440ms var(--openbot-ease-out) 40ms both;
}
::view-transition-old(first-run-progress):not(:only-child) {
  animation: none;
  opacity: 0;
}
::view-transition-new(first-run-progress):not(:only-child) {
  animation: none;
}
::view-transition-new(first-run-progress):only-child, ::view-transition-new(first-run-actions):only-child {
  animation: first-run-step-rise 440ms var(--openbot-ease-out) 40ms both;
}
::view-transition-old(first-run-actions), ::view-transition-old(first-run-progress):only-child {
  animation: first-run-blur-out 220ms var(--openbot-ease-out) both;
}
::view-transition-new(first-run-actions):not(:only-child) {
  animation: first-run-blur-in 440ms var(--openbot-ease-out) 40ms both;
}
html:active-view-transition-type(open)::view-transition-old(*) {
  animation: first-run-open-out 320ms var(--openbot-ease-out) both;
}
html:active-view-transition-type(open)::view-transition-new(*) {
  animation: first-run-open-in 520ms var(--openbot-ease-out) 60ms both;
}
@keyframes first-run-step-out {
  to {
    opacity: 0;
    filter: blur(6px);
  }
}
@keyframes first-run-step-in {
  from {
    opacity: 0;
    filter: blur(6px);
  }
}
@keyframes first-run-step-rise {
  from {
    opacity: 0;
    filter: blur(4px);
  }
}
@keyframes first-run-blur-out {
  to {
    opacity: 0;
    filter: blur(8px);
  }
}
@keyframes first-run-blur-in {
  from {
    opacity: 0;
    filter: blur(8px);
  }
}
@keyframes first-run-open-out {
  to {
    opacity: 0;
    filter: blur(8px);
  }
}
@keyframes first-run-open-in {
  from {
    opacity: 0;
    filter: blur(6px);
  }
}
.first-run-choice {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.first-run-choice-team {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-3);
  margin-bottom: 40px;
}
.first-run-choice-avatar {
  width: 52px;
  height: 52px;
  flex: none;
  animation: first-run-rise var(--openbot-duration-overlay) var(--openbot-ease-out) both;
}
.first-run-choice-avatar:nth-child(1), .first-run-choice-avatar:nth-child(7) {
  width: 40px;
  height: 40px;
  transform: translateY(24px);
}
.first-run-choice-avatar:nth-child(2), .first-run-choice-avatar:nth-child(6) {
  transform: translateY(8px);
}
.first-run-choice-avatar:nth-child(3), .first-run-choice-avatar:nth-child(5) {
  width: 68px;
  height: 68px;
}
.first-run-choice-avatar:nth-child(4) {
  width: 104px;
  height: 104px;
  transform: translateY(-12px);
}
.first-run-choice-avatar:nth-child(2) {
  animation-delay: calc(var(--openbot-duration-fast) * 1);
}
.first-run-choice-avatar:nth-child(3) {
  animation-delay: calc(var(--openbot-duration-fast) * 2);
}
.first-run-choice-avatar:nth-child(4) {
  animation-delay: calc(var(--openbot-duration-fast) * 3);
}
.first-run-choice-avatar:nth-child(5) {
  animation-delay: calc(var(--openbot-duration-fast) * 4);
}
.first-run-choice-avatar:nth-child(6) {
  animation-delay: calc(var(--openbot-duration-fast) * 5);
}
.first-run-choice-avatar:nth-child(7) {
  animation-delay: calc(var(--openbot-duration-fast) * 6);
}
.first-run-choice-title {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-hero);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: -0.055em;
  line-height: 1;
  text-wrap: balance;
}
.first-run-choice .onboarding-description {
  margin-top: var(--openbot-space-4);
}
.first-run-choice-rows {
  width: min(100%, 440px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-top: var(--openbot-space-8);
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-grouped);
  background: var(--openbot-bg-grouped);
}
.first-run-choice-rows .first-run-choice-row {
  height: auto;
  min-height: 64px;
  justify-content: flex-start;
  gap: var(--openbot-space-3);
  border-radius: 0;
  padding: var(--openbot-space-3) var(--openbot-space-4);
  text-align: left;
  white-space: normal;
}
.first-run-choice-rows .first-run-choice-row + .first-run-choice-row {
  border-top-color: var(--openbot-border-grouped);
}
.first-run-choice-row-text {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-sm);
}
.first-run-choice-row-text strong {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.first-run-choice-logos {
  display: flex;
  gap: 6px;
}
.first-run-choice-logo {
  width: 16px;
  height: 16px;
  overflow: visible;
  fill: var(--openbot-provider-current);
}
.first-run-choice-row-chevron {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--openbot-text-dim);
}
.first-run-choice-reason {
  margin-top: var(--openbot-space-3);
}
@keyframes first-run-rise {
  from {
    opacity: 0;
    translate: 0 16px;
  }
}
@media (max-width: 760px) {
  .first-run-choice-team {
    gap: var(--openbot-space-1-5);
  }
  .first-run-choice-avatar:nth-child(1), .first-run-choice-avatar:nth-child(7) {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .first-run-choice-avatar {
    animation: none;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .first-run-choice-avatar, .first-run-launch-avatar {
    --first-run-spring: linear(
      0,
      0.035 2.1%,
      0.281 6.7%,
      0.723 12.9%,
      0.938 16.7%,
      1.077 21%,
      1.149 24.3%,
      1.163 27%,
      1.154 29.9%,
      1.129 32.8%,
      1.051 39.6%,
      1.017 43.1%,
      0.977 51%,
      0.974 53.8%,
      0.975 57.1%,
      0.997 69.8%,
      1.003 76.9%,
      1
    );
    transition: scale 560ms var(--first-run-spring);
  }
  .first-run-choice-avatar:hover, .first-run-launch-member:hover .first-run-launch-avatar {
    scale: 1.12;
  }
  .first-run-choice-avatar:active, .first-run-launch-member:active .first-run-launch-avatar {
    scale: 0.9;
    transition-duration: var(--openbot-duration-fast);
    transition-timing-function: var(--openbot-ease-out);
  }
}
.first-run-launch {
  --first-run-launch-accent: var(--openbot-logo-production);
  position: absolute;
  z-index: var(--openbot-layer-dialog);
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--openbot-bg-canvas);
  -webkit-app-region: drag;
}
.first-run-launch[data-variant="dev"] {
  --first-run-launch-accent: var(--openbot-logo-dev);
}
.first-run-launch[data-variant="preview"] {
  --first-run-launch-accent: var(--openbot-logo-preview);
}
.first-run-launch-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.first-run-launch-team {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-3);
}
.first-run-launch-member {
  display: grid;
  flex: none;
}
.first-run-launch-avatar {
  width: 52px;
  height: 52px;
}
.first-run-launch-member:nth-child(1), .first-run-launch-member:nth-child(7) {
  translate: 0 24px;
}
.first-run-launch-member:nth-child(1) .first-run-launch-avatar, .first-run-launch-member:nth-child(7) .first-run-launch-avatar {
  width: 40px;
  height: 40px;
}
.first-run-launch-member:nth-child(2), .first-run-launch-member:nth-child(6) {
  translate: 0 8px;
}
.first-run-launch-member:nth-child(3) .first-run-launch-avatar, .first-run-launch-member:nth-child(5) .first-run-launch-avatar {
  width: 68px;
  height: 68px;
}
.first-run-launch-member:nth-child(4) {
  translate: 0 -12px;
}
.first-run-launch-member:nth-child(4) .first-run-launch-avatar {
  width: 104px;
  height: 104px;
}
.first-run-launch-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.first-run-launch-scribble {
  display: block;
  width: 112px;
  height: 14px;
  overflow: visible;
}
.first-run-launch-scribble polyline {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4px;
}
.first-run-launch-track {
  stroke: var(--first-run-launch-accent);
  @supports (color: color-mix(in lab, red, red)) {
    stroke: color-mix(in srgb, var(--first-run-launch-accent) 18%, transparent);
  }
}
.first-run-launch-fill {
  stroke: var(--first-run-launch-accent);
  stroke-dasharray: 1 1;
  stroke-dashoffset: calc(1 - var(--first-run-launch-percent));
  transition: stroke-dashoffset var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.first-run-launch-label {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
}
@media (max-width: 760px) {
  .first-run-launch-team {
    gap: var(--openbot-space-1-5);
  }
  .first-run-launch-member:nth-child(1), .first-run-launch-member:nth-child(7) {
    display: none;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .first-run-launch-avatar {
    animation: first-run-launch-hop 1.8s var(--openbot-ease-in-out) infinite;
  }
  .first-run-launch-member:nth-child(2) .first-run-launch-avatar {
    animation-delay: 120ms;
  }
  .first-run-launch-member:nth-child(3) .first-run-launch-avatar {
    animation-delay: 240ms;
  }
  .first-run-launch-member:nth-child(4) .first-run-launch-avatar {
    animation-delay: 360ms;
  }
  .first-run-launch-member:nth-child(5) .first-run-launch-avatar {
    animation-delay: 480ms;
  }
  .first-run-launch-member:nth-child(6) .first-run-launch-avatar {
    animation-delay: 600ms;
  }
  .first-run-launch-member:nth-child(7) .first-run-launch-avatar {
    animation-delay: 720ms;
  }
  .first-run-launch-progress[data-known="false"] .first-run-launch-fill {
    stroke-dasharray: 0.35 1.2;
    transition: none;
    animation: first-run-launch-scribble 1.8s var(--openbot-ease-in-out) infinite;
  }
}
@keyframes first-run-launch-hop {
  0%, 36%, 100% {
    transform: translateY(0);
  }
  16% {
    transform: translateY(-12px);
  }
}
@keyframes first-run-launch-scribble {
  from {
    stroke-dashoffset: 0.35;
  }
  to {
    stroke-dashoffset: -1.2;
  }
}
.setup-read-error-actions {
  justify-content: center;
  margin-top: var(--openbot-space-3);
}
.startup-splash {
  position: absolute;
  z-index: var(--openbot-layer-dialog);
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--openbot-bg-canvas);
  -webkit-app-region: drag;
}
.startup-splash-logo {
  display: block;
  width: 96px;
  height: 96px;
  animation: startup-splash-in var(--openbot-duration-overlay) var(--openbot-ease-out) backwards;
}
.startup-splash[data-phase="exit"] {
  pointer-events: none;
  -webkit-app-region: no-drag;
  animation: startup-splash-exit var(--openbot-duration-overlay) var(--openbot-ease-in-out) forwards;
}
@media (prefers-reduced-motion: no-preference) {
  .startup-splash-logo .app-logo-eye {
    stroke-dasharray: var(--splash-eye-length) calc(var(--splash-eye-length) + 24px);
    animation: startup-splash-eye-draw 480ms var(--openbot-ease-in-out) 160ms backwards, app-logo-blink 4.8s var(--openbot-ease-in-out) 1s infinite;
  }
}
@keyframes startup-splash-in {
  from {
    opacity: 0;
  }
}
@keyframes startup-splash-eye-draw {
  from {
    stroke-dashoffset: calc(var(--splash-eye-length) + 12px);
  }
  to {
    stroke-dashoffset: 0px;
  }
}
@keyframes startup-splash-exit {
  to {
    opacity: 0;
  }
}
.first-agent-setup-panel {
  height: 100%;
  min-height: 0;
  color: var(--openbot-text-primary);
}
.first-agent-setup-header {
  display: flex;
  height: 38px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--openbot-border);
  padding: 0 var(--openbot-space-3);
}
.first-agent-header-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-1-5);
}
.first-agent-header-identity .agent-avatar {
  --agent-avatar-optical-offset: -2px;
  width: 18px;
  height: 18px;
}
.first-agent-header-identity h1 {
  overflow: hidden;
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.first-agent-setup-content {
  display: grid;
  min-width: 0;
  min-height: 0;
  flex: 1;
  grid-template-rows: minmax(min-content, 1fr) auto;
  overflow-y: auto;
}
.first-agent-editor {
  display: grid;
  width: min(420px, calc(100% - 48px));
  align-content: center;
  justify-self: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-6) 0;
}
.first-agent-live-avatar {
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  justify-self: center;
  margin-bottom: var(--openbot-space-1);
  translate: 0 calc(0px - var(--openbot-space-2));
}
.first-agent-live-avatar .agent-avatar {
  width: 72px;
  height: 72px;
}
.first-agent-avatar-fieldset {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}
.first-agent-color-options, .first-agent-face-options {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-1);
}
.first-agent-face-options {
  gap: var(--openbot-space-0-5);
}
.ui-button.first-agent-color-choice, .ui-button.first-agent-face-choice {
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-color: transparent;
  background: transparent;
  padding: 0;
  border-radius: var(--openbot-radius-md);
}
.ui-button.first-agent-face-choice {
  display: grid;
  width: 33px;
  height: 33px;
  flex-basis: 33px;
  place-items: center;
  padding: 0;
}
.ui-button.first-agent-color-choice {
  border-radius: var(--openbot-radius-pill);
}
.ui-button.first-agent-color-choice:hover:not(:disabled), .ui-button.first-agent-face-choice:hover:not(:disabled) {
  background: var(--openbot-hover);
}
.first-agent-color-choice[aria-pressed="true"], .first-agent-face-choice[aria-pressed="true"] {
  border-color: var(--openbot-accent-text);
  box-shadow: 0 0 0 2px var(--openbot-accent-soft);
}
.first-agent-color-swatch {
  display: block;
  width: 18px;
  height: 18px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
}
.first-agent-face-choice .agent-avatar {
  --agent-avatar-optical-offset: -3.25px;
  width: 24px;
  height: 24px;
}
.first-agent-fields {
  display: grid;
  gap: var(--openbot-space-3);
  margin-top: var(--openbot-space-1);
}
.first-agent-fields .ui-textarea {
  field-sizing: content;
  min-height: 64px;
  max-height: 240px;
  overflow-y: auto;
}
.ui-button.first-agent-submit {
  min-width: 132px;
}
.first-agent-fields .provider-model-trigger-field {
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
  box-shadow: none;
}
.first-agent-fields .provider-model-trigger-field:hover:not(:disabled), .first-agent-fields .provider-model-trigger-field[aria-expanded="true"] {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-control);
}
.first-agent-fields .provider-model-trigger-field:active:not(:disabled) {
  transform: none;
}
.first-agent-fields .provider-model-trigger-field:focus-visible {
  border-color: var(--openbot-border-focus);
  outline: none;
  box-shadow: var(--openbot-focus-ring);
}
.first-agent-submit-actions {
  display: flex;
  justify-content: center;
  margin-top: var(--openbot-space-1);
}
.first-agent-error {
  margin: 0;
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-align: center;
}
.first-agent-suggestions {
  min-width: 0;
  padding: 0 var(--openbot-space-6) var(--openbot-space-4);
}
.first-agent-suggestions > h2 {
  margin: 0 0 var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
}
.first-agent-suggestion-viewport {
  position: relative;
  min-width: 0;
}
.first-agent-suggestion-viewport::before, .first-agent-suggestion-viewport::after {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: var(--openbot-space-1);
  width: 48px;
  opacity: 0;
  pointer-events: none;
  content: "";
  transition: opacity var(--openbot-duration-normal) var(--openbot-ease-out);
}
.first-agent-suggestion-viewport::before {
  left: 0;
  background: linear-gradient(to right, var(--openbot-bg-canvas), transparent);
}
.first-agent-suggestion-viewport::after {
  right: 0;
  background: linear-gradient(to left, var(--openbot-bg-canvas), transparent);
}
.first-agent-suggestion-viewport.can-scroll-back::before, .first-agent-suggestion-viewport.can-scroll-forward::after {
  opacity: 1;
}
.first-agent-suggestion-list {
  display: flex;
  min-width: 0;
  gap: var(--openbot-space-3);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  margin: 0;
  padding: 1px 1px var(--openbot-space-1);
  list-style: none;
  scrollbar-width: none;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}
.first-agent-suggestion-list::-webkit-scrollbar {
  display: none;
}
.first-agent-suggestion-item {
  width: 256px;
  flex: 0 0 256px;
  margin: 0;
}
.ui-button.first-agent-suggestion-card {
  width: 100%;
  height: 112px;
  justify-content: flex-start;
  gap: var(--openbot-space-4);
  border-color: var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: transparent;
  padding: var(--openbot-space-4);
  cursor: grab;
  text-align: left;
  white-space: normal;
  transition: border-color var(--openbot-duration-hover) var(--openbot-ease-out), background-color var(--openbot-duration-hover) var(--openbot-ease-out);
}
.ui-button.first-agent-suggestion-card:hover:not(:disabled) {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-hover);
}
.first-agent-suggestion-card[aria-pressed="true"] {
  border-color: var(--openbot-accent);
  background: var(--openbot-accent-soft);
}
.first-agent-suggestion-viewport.is-dragging, .first-agent-suggestion-viewport.is-dragging .first-agent-suggestion-list, .first-agent-suggestion-viewport.is-dragging .first-agent-suggestion-card {
  cursor: grabbing;
}
.first-agent-suggestion-card .agent-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
}
.first-agent-suggestion-card > span:last-child {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-1);
}
.first-agent-suggestion-card strong, .first-agent-suggestion-card small {
  display: block;
}
.first-agent-suggestion-card strong {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-xl);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-xl);
}
.first-agent-suggestion-card small {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-md);
}
@media (max-width: 800px) {
  .first-agent-editor {
    width: min(400px, calc(100% - 32px));
    padding-block: var(--openbot-space-4);
  }
  .first-agent-live-avatar, .first-agent-live-avatar .agent-avatar {
    width: 62px;
    height: 62px;
  }
  .first-agent-face-options {
    gap: var(--openbot-space-0-5);
    flex-wrap: wrap;
  }
  .first-agent-suggestions {
    padding-inline: var(--openbot-space-4);
  }
  .first-agent-suggestion-item {
    width: min(256px, calc(100vw - 64px));
    flex-basis: min(256px, calc(100vw - 64px));
  }
}
@media (prefers-reduced-motion: reduce) {
  .first-agent-color-choice, .first-agent-face-choice {
    transition: none;
  }
  .first-agent-suggestion-viewport .ui-button.first-agent-suggestion-card {
    transition: none;
  }
  .first-agent-suggestion-viewport::before, .first-agent-suggestion-viewport::after {
    transition: none;
  }
}
.app-frame {
  --left-header-height: 38px;
  --server-rail-width: 64px;
  position: relative;
  display: grid;
  container-type: inline-size;
  width: 100%;
  height: 100%;
  margin: 0;
  grid-template-columns: var(--left-panel-width, 280px) 0 minmax(0, 1fr);
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--openbot-bg-canvas);
  box-shadow: none;
  transition: grid-template-columns var(--panel-resize-duration, var(--openbot-duration-overlay)) cubic-bezier(0.32, 0.72, 0, 1);
}
.app-frame-with-server-rail {
  grid-template-columns: var(--server-rail-width) var(--left-panel-width, 280px) 0 minmax(0, 1fr);
}
.app-frame-platform-darwin {
  --server-rail-width: 72px;
}
.remote-compatibility-screen {
  display: flex;
  min-width: 0;
  min-height: 0;
  grid-column: 3;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: var(--openbot-space-6);
}
.app-frame-with-server-rail .remote-compatibility-screen {
  grid-column: 4;
}
.remote-compatibility-alert, .remote-compatibility-details {
  width: min(100%, 520px);
}
.remote-compatibility-details {
  display: grid;
  margin: 0;
}
.remote-compatibility-details > div {
  display: flex;
  justify-content: space-between;
  gap: var(--openbot-space-4);
  border-bottom: 1px solid var(--openbot-border);
  padding: var(--openbot-space-2) 0;
}
.remote-compatibility-details dt {
  color: var(--openbot-text-muted);
}
.remote-compatibility-details dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.global-search-dialog {
  position: fixed;
  z-index: calc(var(--openbot-layer-dialog) + 1);
  top: 112px;
  left: 50%;
  display: flex;
  width: min(640px, calc(100vw - 48px));
  max-height: calc(100dvh - 136px);
  flex-direction: column;
  overflow: hidden;
  outline: 0;
  background: var(--openbot-bg-control);
  box-shadow: 0 0 0 1px var(--openbot-dialog-ring), var(--openbot-shadow-dialog);
  color: var(--openbot-text-primary);
  transform: translateX(-50%);
  transform-origin: 50% 0;
  animation: global-search-in var(--openbot-duration-normal) var(--openbot-ease-out);
}
.global-search-dialog[data-closing] {
  animation: global-search-out var(--openbot-duration-fast) var(--openbot-ease-out) both;
}
@keyframes global-search-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-4px) scale(0.98);
  }
}
@keyframes global-search-out {
  to {
    opacity: 0;
    transform: translateX(-50%) scale(0.98);
  }
}
.global-search-control {
  display: flex;
  height: 48px;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--openbot-space-2);
  border-bottom: 1px solid var(--openbot-border);
  padding: 0 var(--openbot-space-2) 0 var(--openbot-space-4);
  color: var(--openbot-text-muted);
}
.global-search-control > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.global-search-control .global-search-input {
  min-width: 0;
  height: 100%;
  flex: 1;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
.global-search-control .global-search-input:focus {
  border: 0;
  outline: 0;
  box-shadow: none;
}
.global-search-control .global-search-input::placeholder {
  color: var(--openbot-text-muted);
}
.global-search-filters {
  flex: 0 0 auto;
}
.global-search-filters [role="tablist"] {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--openbot-space-0-5);
}
.global-search-filters [role="tab"] {
  position: relative;
  z-index: 1;
  height: var(--openbot-control-xs);
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  padding: 0 var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-family: inherit;
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
  transition: color var(--openbot-duration-normal) var(--openbot-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .global-search-filters [role="tab"]:hover {
    color: var(--openbot-text-secondary);
  }
}
.global-search-filters [role="tab"][data-selected] {
  color: var(--openbot-text-primary);
}
.global-search-filter-pill {
  position: absolute;
  top: 0;
  left: 0;
  height: var(--openbot-control-xs);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-control-active);
  pointer-events: none;
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out), width var(--openbot-duration-normal) var(--openbot-ease-out);
}
.global-search-filter-pill:is([data-initializing], [data-resizing]) {
  transition: none;
}
.global-search-filters [role="tab"]:focus-visible {
  outline: 0;
  box-shadow: var(--openbot-focus-ring);
}
.global-search-results {
  position: relative;
  inset: auto;
  width: 100%;
  max-height: min(400px, calc(100dvh - 240px));
  overflow-y: auto;
  background: transparent;
  padding: var(--openbot-space-1-5);
  transform: none;
  scrollbar-width: none;
  scroll-padding-block: var(--openbot-space-4);
  transition: height var(--openbot-duration-normal) var(--openbot-ease-out);
}
.global-search-results[data-instant] {
  transition: none;
}
.global-search-dialog [data-popper-positioner] {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  transform: none !important;
}
.global-search-results::-webkit-scrollbar {
  display: none;
}
.global-search-results [role="listbox"] {
  position: relative;
  outline: 0;
}
.global-search-results [role="listbox"] > [data-index] {
  position: absolute;
  right: 0;
  left: 0;
}
.global-search-section {
  display: flex;
  height: var(--openbot-control-sm);
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 var(--openbot-space-2) var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
}
.global-search-section[data-spaced] {
  height: calc(var(--openbot-control-sm) + var(--openbot-space-1-5));
}
.global-search-section-count {
  font-variant-numeric: tabular-nums;
}
.global-search-highlight {
  position: absolute;
  top: 0;
  right: var(--openbot-space-1-5);
  left: var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-control-active);
  pointer-events: none;
  transition: transform var(--openbot-duration-fast) var(--openbot-ease-out), height var(--openbot-duration-fast) var(--openbot-ease-out);
}
.global-search-highlight[data-instant] {
  transition: none;
}
.global-search-result {
  display: flex;
  min-height: var(--openbot-control-lg);
  align-items: center;
  gap: var(--openbot-space-2);
  border-radius: var(--openbot-radius-sm);
  padding: 0 var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  cursor: default;
  outline: 0;
}
.global-search-avatar.agent-avatar {
  --agent-avatar-optical-offset: -1px;
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  flex: 0 0 auto;
}
.global-search-icon {
  display: grid;
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  flex: 0 0 auto;
  place-items: center;
  color: var(--openbot-text-muted);
}
.global-search-icon > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: var(--openbot-icon-stroke);
}
.global-search-result-title, .global-search-result-detail {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.global-search-result-title {
  max-width: 40%;
  flex: 0 1 auto;
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}
.global-search-result-detail {
  flex: 1;
  color: var(--openbot-text-muted);
}
.global-search-result-author {
  flex: 0 0 auto;
  color: var(--openbot-text-secondary);
}
.global-search-result-time {
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
.global-search-match {
  background: transparent;
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}
.global-search-result .global-search-result-enter {
  flex: 0 0 auto;
  border: 0;
  background: var(--openbot-bg-control-hover);
  opacity: 0;
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}
.global-search-result[data-highlighted] .global-search-result-enter, .global-search-results [role="listbox"]:not(:has(.global-search-result[data-highlighted])) .global-search-result[data-first] .global-search-result-enter {
  opacity: 1;
}
.global-search-status, .global-search-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.global-search-status {
  min-height: var(--openbot-control-lg);
  animation: global-search-fade-in var(--openbot-duration-normal) var(--openbot-ease-out) var(--openbot-duration-fast) both;
}
.global-search-empty, .global-search-results:not(:has(.global-search-result)) .global-search-status {
  min-height: 96px;
}
.global-search-empty {
  animation: global-search-fade-in var(--openbot-duration-normal) var(--openbot-ease-out) both;
}
@keyframes global-search-fade-in {
  from {
    opacity: 0;
  }
}
.global-search-footer {
  display: flex;
  height: var(--openbot-control-lg);
  flex: 0 0 auto;
  align-items: center;
  gap: var(--openbot-space-4);
  border-top: 1px solid var(--openbot-border);
  padding: 0 var(--openbot-space-4);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.global-search-hint {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  white-space: nowrap;
}
.global-search-hint .ui-kbd {
  border: 0;
  background: var(--openbot-bg-control-active);
}
.global-search-footer .ui-kbd, .global-search-result .global-search-result-enter {
  font-family: var(--openbot-font-sans);
  font-weight: var(--openbot-weight-medium);
}
.global-search-footer .ui-kbd > svg, .global-search-result .global-search-result-enter > svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  stroke-width: calc(var(--openbot-icon-stroke) * 4 / 3);
}
.global-search-hint .ui-kbd + .ui-kbd {
  margin-left: calc(var(--openbot-space-0-5) * -1);
}
@media (max-width: 640px) {
  .global-search-dialog {
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 124px);
  }
  .global-search-control {
    height: auto;
    flex-wrap: wrap;
    row-gap: 0;
  }
  .global-search-control .global-search-input {
    height: 48px;
  }
  .global-search-filters {
    min-width: 0;
    flex-basis: 100%;
    overflow-x: auto;
    padding-block: var(--openbot-space-1) var(--openbot-space-2);
    scrollbar-width: none;
  }
  .global-search-footer, .global-search-result .global-search-result-enter {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .global-search-dialog, .global-search-empty {
    animation: none;
  }
  .global-search-status {
    animation-duration: 0s;
  }
  .global-search-filter-pill, .global-search-highlight, .global-search-results {
    transition: none;
  }
}
.server-rail {
  --server-rail-inline-padding: 7px;
  position: relative;
  z-index: 45;
  display: flex;
  min-width: var(--server-rail-width);
  flex-direction: column;
  justify-content: space-between;
  padding: 42px var(--server-rail-inline-padding) calc(9px + 52px);
  background: var(--openbot-bg-sidebar);
  -webkit-app-region: drag;
}
.server-rail::before {
  position: absolute;
  top: calc(var(--left-header-height) - 1px);
  right: 0;
  left: 0;
  height: 1px;
  background: var(--openbot-border);
  content: "";
  pointer-events: none;
}
.server-rail::after {
  position: absolute;
  top: var(--left-header-height);
  right: 0;
  bottom: 0;
  width: clamp(0.5px, 0.05123cqw, 1px);
  background: var(--openbot-border);
  content: "";
  pointer-events: none;
}
.server-rail-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  width: calc(100% + var(--server-rail-inline-padding) + var(--server-rail-inline-padding));
  min-height: 0;
  flex: 1 1 auto;
  margin-inline: calc(-1 * var(--server-rail-inline-padding));
  padding-inline: var(--server-rail-inline-padding);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.server-rail-list::-webkit-scrollbar {
  display: none;
}
.server-rail-tooltip-trigger {
  display: flex;
}
.server-rail-remote-list {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.server-rail-server-item {
  --server-rail-drag-step: 0;
  position: relative;
  display: flex;
  width: 100%;
  justify-content: center;
  opacity: 1;
  transform: translate3d(0, calc(var(--server-rail-drag-step) * 54px), 0);
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out), opacity var(--openbot-duration-normal) var(--openbot-ease-out);
}
.server-rail-server-item .server-rail-button {
  cursor: grab;
}
.server-rail-server-item-dragging {
  z-index: 1;
  opacity: 0.55;
}
.server-rail-drag-preview {
  position: fixed;
  z-index: var(--openbot-layer-dropdown);
  box-sizing: border-box;
  margin: 0;
  list-style: none;
  opacity: 0.96;
  pointer-events: none;
  transform: none;
  transition: none;
}
.server-rail-server-item-dragging .server-rail-button, .server-rail-remote-list[data-dragging] {
  cursor: grabbing;
}
.server-rail-remote-list[data-dragging] .server-rail-server-item {
  will-change: transform;
}
.server-rail-button {
  position: relative;
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  place-items: center;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--openbot-text-secondary);
  cursor: pointer;
  -webkit-app-region: no-drag;
}
@media (hover: hover) and (pointer: fine) {
  .ui-button.server-rail-button.ui-button-variant-outline:hover:not(:disabled) {
    background: transparent;
    color: var(--openbot-text-secondary);
  }
}
.server-rail-monogram {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: 740;
  letter-spacing: -0.02em;
}
.server-rail-logo {
  width: 40px;
  height: 40px;
  display: block;
  border-radius: var(--openbot-radius-lg);
  object-fit: cover;
  outline: 1px solid var(--openbot-image-outline);
  outline-offset: -1px;
}
.server-rail-mark {
  position: absolute;
  top: 50%;
  left: -7px;
  width: 3px;
  height: 0;
  border-radius: 0 var(--openbot-radius-xs) var(--openbot-radius-xs) 0;
  background: var(--openbot-text-primary);
  opacity: 0;
  transform: translateY(-50%);
  transition: height var(--openbot-duration-hover) var(--openbot-ease-out), opacity var(--openbot-duration-hover) ease;
}
.server-rail-button[aria-pressed="true"] .server-rail-mark {
  height: 26px;
  opacity: 1;
}
.server-rail-button[aria-pressed="false"]:hover .server-rail-mark {
  height: 12px;
  opacity: 1;
}
.server-rail-action .server-rail-monogram {
  border-style: dashed;
  background: transparent;
  color: var(--openbot-accent-text);
  font-size: var(--openbot-text-2xl);
  font-weight: 400;
}
.server-rail-action svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--openbot-icon-stroke);
}
.server-rail-tooltip {
  z-index: var(--openbot-layer-tooltip);
  max-width: min(240px, calc(100vw - 16px));
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-surface-raised);
  box-shadow: var(--openbot-shadow-raised);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-md);
  overflow-wrap: anywhere;
  pointer-events: none;
}
.server-rail-tooltip::before {
  position: absolute;
  top: 50%;
  left: -6px;
  width: 6px;
  height: 12px;
  background: var(--openbot-bg-surface-raised);
  clip-path: polygon(100% 0, 100% 100%, 0 50%);
  content: "";
  transform: translateY(-50%);
}
@media (max-width: 800px) {
  .app-frame-with-server-rail {
    --server-rail-width: 56px;
  }
  .app-frame-platform-darwin {
    --server-rail-width: 72px;
  }
  .server-rail {
    --server-rail-inline-padding: 5px;
  }
}
.panel-resizer {
  position: relative;
  z-index: 40;
  display: flex;
  width: 16px;
  height: 100%;
  align-items: center;
  justify-content: center;
  margin: 0;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: col-resize;
  touch-action: none;
  transform: translateX(-50%);
  user-select: none;
  -webkit-app-region: no-drag;
}
.panel-resizer::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  pointer-events: none;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--openbot-text-dim) 50%, transparent);
  content: "";
  opacity: 0;
  transform: translateX(-50%);
}
.panel-resizer:hover::after, .panel-resizer:focus-visible::after, .panel-resizer-active::after {
  opacity: 1;
}
.panel-resizer:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 1px var(--openbot-border-strong);
}
html.panel-resizing {
  --panel-resize-duration: 0ms;
  cursor: col-resize;
  user-select: none;
}
.right-panel-resizer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  height: auto;
}
.app-frame > * {
  min-height: 0;
}
.panel-edge {
  border-right: clamp(0.5px, 0.05123cqw, 1px) solid var(--openbot-border);
}
.window-drag {
  -webkit-app-region: drag;
}
.no-drag, button, input, textarea {
  -webkit-app-region: no-drag;
}
.sidebar {
  display: flex;
  min-width: 0;
  overflow: hidden;
  flex-direction: column;
  background: var(--openbot-bg-sidebar);
  color: var(--openbot-text-primary);
  container-type: inline-size;
}
.sidebar-topbar {
  display: flex;
  height: var(--left-header-height);
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  border-bottom: 1px solid var(--openbot-border);
  padding: 2px 3px 0 10px;
}
@media (min-width: 721px) {
  .app-frame-edge > .server-rail {
    background: var(--openbot-bg-native-sidebar);
  }
  .app-frame-edge > .server-rail::before, .app-frame-edge > .server-rail::after {
    content: none;
  }
  .app-frame-edge > .sidebar {
    position: relative;
    isolation: isolate;
    border-right: 0;
  }
  .app-frame-edge > .sidebar::before {
    position: absolute;
    z-index: -1;
    content: "";
    pointer-events: none;
  }
  .app-frame-edge .sidebar-topbar {
    border-bottom: 0;
  }
  .app-frame-edge .sidebar-search-wrap {
    padding-top: 11px;
  }
  .app-frame-edge .sidebar-compact-search {
    top: 11px;
  }
  .app-frame-edge .conversation-panel, .app-frame-edge .direct-conversation {
    isolation: isolate;
  }
  .app-frame-edge .conversation-header, .app-frame-edge .first-agent-setup-header {
    border-bottom: 0;
    background: transparent;
  }
  .app-frame-edge .diagram-view-header {
    border-bottom: 0;
    background: transparent;
  }
  .app-frame-edge .diagram-view-body {
    overflow: hidden;
    background: var(--openbot-bg-canvas);
  }
  .app-frame-edge .header-panel-toggle[aria-expanded="true"]:not(.computer-button-agent-active, .side-panel-toggle) {
    border-color: var(--openbot-border-strong);
    background: var(--openbot-bg-control-hover);
    color: var(--openbot-text-primary);
  }
  .app-frame-edge .direct-conversation-header {
    height: var(--left-header-height);
    border-bottom: 0;
    background: transparent;
  }
  .app-frame-edge .direct-conversation-person .person-avatar {
    width: 26px;
    height: 26px;
  }
  .app-frame-edge .remote-compatibility-screen {
    background: linear-gradient(var(--openbot-border-strong), var(--openbot-border-strong)) 0 calc(var(--left-header-height) - 1px) / 100% 1px no-repeat, linear-gradient(var(--openbot-bg-native-sidebar), var(--openbot-bg-native-sidebar)) 0 0 / 100% var(--left-header-height) no-repeat;
  }
  .app-frame-edge .settings-panel, .app-frame-edge .browser-panel {
    isolation: isolate;
  }
  .app-frame-edge .settings-panel::before, .app-frame-edge .browser-panel::before {
    position: absolute;
    z-index: -1;
    content: "";
    pointer-events: none;
  }
  .app-frame-edge .settings-panel-header, .app-frame-edge .file-preview-header, .app-frame-edge .browser-preview-header {
    height: var(--left-header-height);
    border-bottom: 0;
    background: transparent;
  }
}
.sidebar-server-name {
  min-width: 0;
  max-width: 100%;
  height: var(--openbot-control-sm);
  overflow: hidden;
  flex: 0 1 auto;
  justify-content: flex-start;
  gap: var(--openbot-space-1-5);
  margin-right: auto;
  border-radius: var(--openbot-radius-pill);
  padding: 0 var(--openbot-space-2) 0 var(--openbot-space-1);
  color: var(--openbot-text-primary);
  cursor: pointer;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-md);
  opacity: 1;
  text-align: left;
  transition: background-color var(--openbot-duration-hover) ease, border-color var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease, box-shadow var(--openbot-duration-hover) ease, opacity var(--openbot-duration-fast) ease;
}
.sidebar-server-name[aria-expanded="true"] {
  background: var(--ui-menu-item-hover);
}
.sidebar-server-name > .sidebar-server-name-mark {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
}
.sidebar-server-name-mark[data-entering] {
  animation: sidebar-server-mark-in 420ms cubic-bezier(0.34, 1.36, 0.64, 1) both;
}
.sidebar-server-name-label {
  min-width: 0;
  flex: 0 1 auto;
  white-space: nowrap;
}
.sidebar-server-name-label > span:not(.ui-swap-leaving) {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-server-name > .sidebar-server-name-chevron {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
}
.sidebar-server-name > .sidebar-server-name-sleep {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
}
.sidebar-server-name > .sidebar-server-name-sleep[data-state="waking"] {
  color: var(--openbot-accent);
  animation: server-sleep-waking 1200ms ease-in-out infinite;
}
@keyframes sidebar-server-mark-in {
  from {
    opacity: 0;
    scale: 0.6;
    filter: blur(2px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar-server-name-mark[data-entering] {
    animation: none;
  }
}
.app-frame-platform-darwin:not(.app-frame-with-server-rail, .web-app-frame) .sidebar-topbar {
  padding-left: 78px;
}
.app-frame-platform-darwin:not(.app-frame-with-server-rail, .web-app-frame) .sidebar-compact .sidebar-topbar {
  height: calc(var(--left-header-height) + 36px);
  align-items: flex-end;
  justify-content: center;
  padding: 0 0 2px;
}
.app-frame-platform-darwin:not(.app-frame-with-server-rail, .web-app-frame) .sidebar-compact .sidebar-server-name, .app-frame-platform-darwin:not(.app-frame-with-server-rail, .web-app-frame) .sidebar-compact .sidebar-new-button {
  display: none;
}
.app-frame-platform-darwin:not(.app-frame-with-server-rail, .web-app-frame) .sidebar-compact .sidebar-toggle-button {
  transform: none;
}
.app-frame-platform-darwin:not(.app-frame-with-server-rail, .web-app-frame) .sidebar-compact .sidebar-toggle-button:active {
  transform: scale(0.96);
}
.server-menu {
  min-width: 240px;
  max-width: 300px;
  max-height: min(520px, calc(100dvh - 16px), var(--kb-popper-content-available-height, 520px));
  overflow-y: auto;
}
.server-menu-row {
  gap: var(--openbot-space-2);
}
.server-menu-mark {
  position: relative;
  display: grid;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  overflow: hidden;
  place-items: center;
  border-radius: var(--openbot-radius-pill);
}
.server-menu-mark::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--openbot-text-primary) 12%, transparent);
  }
  content: "";
}
.server-menu-mark > * {
  width: 100%;
  height: 100%;
}
.server-menu-name {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.server-menu-muted {
  flex: 0 0 auto;
  color: var(--openbot-text-secondary);
}
.server-menu-sleep {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-muted);
}
.server-menu-sleep[data-state="waking"] {
  background: var(--openbot-accent);
  animation: server-sleep-waking 1200ms ease-in-out infinite;
}
.server-menu .server-menu-layout-chevron {
  margin-left: 0;
}
.ui-action-menu .server-menu-add {
  color: var(--openbot-text-secondary);
}
.ui-action-menu .server-menu-add:is(:hover, [data-highlighted]) {
  color: var(--openbot-text-primary);
}
.server-menu-add-circle {
  display: grid;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  place-items: center;
  border: 1px dashed var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px dashed color-mix(in srgb, var(--openbot-text-primary) 30%, transparent);
  }
  border-radius: var(--openbot-radius-pill);
}
.ui-action-menu .server-menu-add-circle > svg {
  width: var(--ui-menu-inset);
  height: var(--ui-menu-inset);
  stroke-width: 2.5;
}
.ui-action-menu .server-menu-add:is(:hover, [data-highlighted]) .server-menu-add-circle {
  border-color: transparent;
  background: var(--openbot-text-primary);
}
.ui-action-menu .server-menu-add:is(:hover, [data-highlighted]) .server-menu-add-circle > svg {
  color: var(--ui-menu-bg);
}
.sidebar-topbar-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 3px;
}
.sidebar-icon-button {
  position: relative;
  z-index: 2;
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  color: var(--openbot-text-muted);
  pointer-events: auto;
  cursor: pointer;
  -webkit-app-region: no-drag;
  transition: background-color var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease, opacity var(--openbot-duration-normal) ease, transform var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1);
}
.sidebar-icon-button:hover {
  background: var(--openbot-border);
  color: var(--openbot-text-primary);
}
.sidebar-icon-button:active {
  transform: scale(0.96);
}
.sidebar-icon-button:focus-visible {
  outline: 1px solid var(--openbot-text-muted);
  outline-offset: 1px;
}
.header-panel-toggle {
  position: relative;
  z-index: 2;
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  color: var(--openbot-text-muted);
  pointer-events: auto;
  cursor: pointer;
  -webkit-app-region: no-drag;
  transition: border-color var(--openbot-duration-hover) ease, background-color var(--openbot-duration-hover) ease, box-shadow var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease, transform var(--openbot-duration-fast) cubic-bezier(0.23, 1, 0.32, 1);
}
.header-panel-toggle:hover {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-hover);
  color: var(--openbot-text-primary);
}
.header-panel-toggle:active {
  transform: scale(0.92);
  transition-duration: var(--openbot-duration-fast);
}
.header-panel-toggle:focus-visible {
  outline: 1px solid var(--openbot-text-muted);
  outline-offset: 1px;
}
.sidebar-toggle-icon {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sidebar-marketplace-button > svg {
  width: 18px;
  height: 18px;
  stroke-width: var(--openbot-icon-stroke);
}
.sidebar-update-button, .sidebar-update-button:hover {
  color: var(--openbot-accent-text);
}
.sidebar-update-button > svg {
  width: 18px;
  height: 18px;
  stroke-width: var(--openbot-icon-stroke);
}
.sidebar-search-wrap {
  position: relative;
  padding: 8px 12px 6px;
}
.sidebar-search-trigger {
  width: 100%;
  justify-content: flex-start;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-regular);
  line-height: 18px;
  cursor: pointer;
}
.sidebar-search-trigger:hover:not(:disabled) {
  border-color: var(--openbot-text-dim);
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-dim);
}
.sidebar-search-placeholder {
  color: var(--openbot-text-muted);
}
.sidebar-compact-search {
  position: absolute;
  inset: 8px 12px 6px;
  display: grid;
  height: 32px;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  color: var(--openbot-text-muted);
  opacity: 0;
  pointer-events: none;
  transform: translateX(6px) scale(0.96);
  cursor: pointer;
  transition: background-color var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease, opacity var(--openbot-duration-fast) ease, transform var(--openbot-duration-slow) cubic-bezier(0.32, 0.72, 0, 1);
}
.sidebar-compact-search:hover {
  background: var(--openbot-hover);
  color: var(--openbot-text-primary);
}
.sidebar-compact-search:active {
  transform: scale(0.96);
}
.search-field {
  display: flex;
  height: 32px;
  align-items: center;
  gap: 8px;
  border: 0.5px solid var(--openbot-border);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-hover);
  padding: 0 9px;
  color: var(--openbot-text-dim);
  opacity: 1;
  transform: translateX(0);
  transition: border-color var(--openbot-duration-hover) ease, background-color var(--openbot-duration-hover) ease, box-shadow var(--openbot-duration-hover) ease, opacity var(--openbot-duration-fast) ease, transform var(--openbot-duration-slow) cubic-bezier(0.32, 0.72, 0, 1);
}
.search-field:focus-within {
  border-color: var(--openbot-text-dim);
  background: var(--openbot-bg-surface);
}
.search-field:has(input:focus-visible) {
  box-shadow: var(--openbot-focus-ring);
}
.search-field input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: 18px;
}
.search-field input::placeholder {
  color: var(--openbot-text-muted);
}
.agent-list {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 4px 12px 0;
  scrollbar-width: none;
}
.agent-list::-webkit-scrollbar {
  display: none;
}
.agent-list-content {
  position: relative;
}
.sidebar-list-context-trigger {
  min-height: 76px;
  flex: 1 0 76px;
}
.sidebar-chat-group + .sidebar-chat-group {
  margin-top: 6px;
  transition: margin-top var(--panel-resize-duration, var(--openbot-duration-overlay)) cubic-bezier(0.32, 0.72, 0, 1);
}
.sidebar-section, .sidebar-agent-item, .sidebar-person-item, .sidebar-pinned-item {
  --sidebar-drag-x: 0px;
  --sidebar-drag-y: 0px;
}
.sidebar-drag-shifting {
  will-change: transform;
}
.sidebar-section {
  position: relative;
  border-radius: var(--openbot-radius-md);
  opacity: 1;
  transform: translate3d(var(--sidebar-drag-x), var(--sidebar-drag-y), 0);
  transition-property: background-color, box-shadow, opacity, transform;
  transition-duration: var(--openbot-duration-fast);
  transition-timing-function: ease-out;
}
.sidebar-section-agent-drop-target {
  background: var(--openbot-accent-soft);
  box-shadow: inset 0 0 0 1px var(--openbot-accent-strong);
}
.sidebar-section-drop-before::before, .sidebar-section-drop-after::after {
  position: absolute;
  z-index: 3;
  right: 7px;
  left: 7px;
  height: 2px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent-text);
  box-shadow: 0 0 0 1px var(--openbot-bg-sidebar);
  content: "";
  pointer-events: none;
}
.sidebar-section-drop-before::before {
  top: -4px;
}
.sidebar-section-drop-after::after {
  bottom: -4px;
}
.sidebar-section-dragging {
  opacity: 0;
  transition: none;
  will-change: transform;
}
.sidebar-section-dragging * {
  animation-play-state: paused;
}
.sidebar-chat-group > header {
  display: flex;
  height: 32px;
  overflow: hidden;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  opacity: 1;
  transform: translateY(0);
  transition: height var(--panel-resize-duration, var(--openbot-duration-overlay)) cubic-bezier(0.32, 0.72, 0, 1), opacity var(--openbot-duration-fast) ease, transform var(--openbot-duration-slow) cubic-bezier(0.32, 0.72, 0, 1);
}
.sidebar-section-drag-handle, .sidebar-agent-item .agent-row, .sidebar-person-item .person-row {
  cursor: grab;
  touch-action: pan-y;
}
.agent-list[data-sidebar-dragging], .agent-list[data-sidebar-dragging] .sidebar-section-drag-handle, .agent-list[data-sidebar-dragging] .sidebar-section-toggle, .agent-list[data-sidebar-dragging] .agent-row, .agent-list[data-sidebar-dragging] .person-row {
  cursor: grabbing;
}
.agent-list[data-sidebar-dragging="chat"] .sidebar-section-toggle, .agent-list[data-sidebar-dragging="person"] .sidebar-section-toggle {
  pointer-events: none;
}
.agent-list[data-sidebar-dragging] .sidebar-section-toggle:hover, .agent-list[data-sidebar-dragging] .sidebar-section-toggle:focus-visible {
  background: transparent;
  color: var(--openbot-text-readable);
}
.agent-list[data-sidebar-dragging] .sidebar-section-toggle:hover .sidebar-section-chevron, .agent-list[data-sidebar-dragging] .sidebar-section-toggle:focus-visible .sidebar-section-chevron {
  opacity: 0;
}
.sidebar-section-toggle {
  display: flex;
  width: 100%;
  min-width: 0;
  height: 32px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-radius: var(--openbot-radius-md);
  padding: 0 7px;
  background: transparent;
  color: var(--openbot-text-readable);
  transition-property: color;
  transition-duration: var(--openbot-duration-hover);
  transition-timing-function: ease-out;
}
.sidebar-section-toggle:hover, .sidebar-section-toggle:focus-visible {
  background: transparent;
  color: var(--openbot-text-secondary);
}
.sidebar-section-toggle[aria-expanded="true"] {
  background: transparent;
}
.sidebar-section-toggle:active {
  scale: 0.96;
}
.sidebar-section-name {
  min-width: 0;
  overflow: hidden;
  font-size: var(--openbot-text-sm);
  font-weight: 400;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-section-chevron {
  flex: 0 0 auto;
  opacity: 0;
  transform: rotate(0deg);
  transition: opacity var(--openbot-duration-hover) ease-out, transform var(--openbot-duration-fast) var(--openbot-ease-out);
}
.sidebar-section-toggle:hover .sidebar-section-chevron, .sidebar-section-toggle:focus-visible .sidebar-section-chevron {
  opacity: 1;
}
.sidebar-section-chevron-collapsed {
  transform: rotate(-90deg);
}
.sidebar-section-collapse {
  display: grid;
  opacity: 1;
  grid-template-rows: 1fr;
  transition-property: grid-template-rows, opacity;
  transition-duration: var(--openbot-duration-normal), var(--openbot-duration-fast);
  transition-timing-function: var(--openbot-ease-out), ease-out;
}
.sidebar-section-collapse[data-collapsed] {
  opacity: 0;
  grid-template-rows: 0fr;
}
.sidebar-section-body {
  min-height: 0;
  overflow: hidden;
}
.sidebar-section-editor-wrap {
  position: relative;
  width: 100%;
}
.sidebar-waiting-group {
  border-bottom: 1px solid var(--openbot-border);
  padding-bottom: var(--openbot-space-2);
}
.sidebar-waiting-group-name {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
  margin: 0;
  padding: 0 7px;
  color: var(--openbot-text-readable);
  font-size: var(--openbot-text-sm);
  font-weight: 400;
  line-height: 16px;
  white-space: nowrap;
}
.sidebar-waiting-group-count {
  display: inline-grid;
  min-width: 16px;
  height: 16px;
  place-items: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-warning);
  padding: 0 4px;
  color: var(--openbot-bg-sidebar);
  font-size: var(--openbot-text-sm);
  font-weight: 650;
}
.sidebar-hidden-group-count {
  margin-inline-start: var(--openbot-space-1);
  font-variant-numeric: tabular-nums;
}
.sidebar-chat-group > .sidebar-section-editor-wrap {
  height: 36px;
}
.sidebar-section-editor {
  width: 100%;
  height: 36px;
  border-color: var(--openbot-border-focus);
  border-radius: var(--openbot-radius-md);
  padding: 0 32px 0 8px;
  background: var(--openbot-bg-control);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
}
.sidebar-section-editor[aria-invalid="true"] {
  border-color: var(--openbot-danger);
}
.sidebar-section-editor-chevron {
  position: absolute;
  top: 50%;
  right: 9px;
  color: var(--openbot-text-muted);
  pointer-events: none;
  transform: translateY(-50%);
}
.sidebar-section-draft {
  min-height: 36px;
}
.sidebar-agent-drag-preview, .sidebar-person-drag-preview, .sidebar-section-drag-preview {
  position: fixed;
  z-index: var(--openbot-layer-dropdown);
  box-sizing: border-box;
  margin: 0;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface-raised);
  box-shadow: var(--openbot-shadow-raised);
  opacity: 0.96;
  pointer-events: none;
  transform: none;
  transition: none;
}
.sidebar-agent-drag-preview *, .sidebar-person-drag-preview *, .sidebar-section-drag-preview * {
  animation: none;
  transition: none;
}
.sidebar-section-drag-preview.sidebar-section-toggle {
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-secondary);
}
.agent-row.sidebar-agent-drag-preview {
  background: var(--openbot-bg-surface-raised);
  transition: none;
}
.agent-row.sidebar-person-drag-preview {
  background: var(--openbot-bg-surface-raised);
  transition: none;
}
.agent-row.sidebar-agent-drag-preview *, .agent-row.sidebar-person-drag-preview * {
  animation: none;
  transition: none;
}
.sidebar-agent-item {
  position: relative;
  transform: translate3d(var(--sidebar-drag-x), var(--sidebar-drag-y), 0);
  transition: transform var(--openbot-duration-fast) var(--openbot-ease-out);
}
.sidebar-agent-item + .sidebar-agent-item {
  margin-top: 4px;
}
.sidebar-agent-item-dragging {
  will-change: transform;
}
.agent-list[data-sidebar-dragging="chat"] .sidebar-agent-item {
  transition: none;
  will-change: transform;
}
.agent-list[data-sidebar-dragging="person"] .sidebar-person-item {
  will-change: transform;
}
.sidebar-agent-item-dragging {
  z-index: 1;
  opacity: 0;
  transition: none;
}
.sidebar-person-item-dragging {
  pointer-events: none;
}
.sidebar-agent-row-dragging * {
  animation-play-state: paused;
}
.sidebar-agent-row-dragging {
  opacity: 0;
  transition: none;
}
.sidebar-person-item {
  position: relative;
  transform: translate3d(var(--sidebar-drag-x), var(--sidebar-drag-y), 0);
  transition: transform var(--openbot-duration-fast) var(--openbot-ease-out);
}
.sidebar-person-item + .sidebar-person-item {
  margin-top: 4px;
}
.sidebar-person-item-dragging {
  will-change: transform;
}
.sidebar-person-item-dragging .person-row * {
  animation-play-state: paused;
}
.sidebar-person-item-dragging .person-row {
  opacity: 0;
  transition: none;
}
.sidebar-pinned-group-agent-drop-target {
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-accent-soft);
  box-shadow: inset 0 0 0 1px var(--openbot-accent-strong);
}
.sidebar-pinned-group.sidebar-pinned-group-empty-target {
  display: grid;
  z-index: 4;
  width: 100%;
  grid-template-rows: 1fr;
  padding: 0;
  opacity: 1;
}
.sidebar-pinned-group-empty-target .sidebar-pinned-list {
  width: 100%;
  min-height: 0;
  padding: 4px 0 2px;
  overflow: hidden;
}
.sidebar-pinned-empty-drop {
  display: flex;
  width: 100%;
  height: 104px;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--openbot-border-strong);
  border-radius: var(--openbot-radius-lg);
  background: transparent;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 20px;
  list-style: none;
  transition: border-color var(--openbot-duration-fast) ease-out, background-color var(--openbot-duration-fast) ease-out, color var(--openbot-duration-fast) ease-out;
}
.sidebar-pinned-group-empty-target.sidebar-pinned-group-agent-drop-target {
  background: transparent;
  box-shadow: none;
}
.sidebar-pinned-group-empty-target.sidebar-pinned-group-agent-drop-target .sidebar-pinned-empty-drop {
  border-color: var(--openbot-accent-strong);
  background: var(--openbot-accent-soft);
  color: var(--openbot-text-primary);
}
.sidebar-pinned-group {
  padding: 4px 0 2px;
}
.sidebar-pinned-list {
  box-sizing: border-box;
  display: flex;
  width: min(236px, 100%);
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: center;
  margin: 0 auto;
  gap: 8px;
  list-style: none;
  padding: 2px;
}
.sidebar-pinned-item {
  position: relative;
  width: 72px;
  flex: 0 0 72px;
  opacity: 1;
  transform: translate3d(var(--sidebar-drag-x), var(--sidebar-drag-y), 0);
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.agent-row.sidebar-pinned-row {
  width: 72px;
  height: 94px;
  min-height: 94px;
  flex-direction: column;
  justify-content: flex-start;
  gap: 4px;
  padding: 4px 2px;
  cursor: grab;
  text-align: center;
}
.sidebar-pinned-row:active {
  transform: scale(0.96);
}
.agent-row.sidebar-pinned-row .sidebar-pinned-avatar {
  width: 48px;
  height: 48px;
  flex-basis: 48px;
}
.agent-row.sidebar-pinned-row .agent-avatar, .agent-row.sidebar-pinned-row.person-row .person-avatar {
  width: 48px;
  height: 48px;
}
.sidebar-pinned-copy {
  display: flex;
  width: 100%;
  min-height: 34px;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
}
.sidebar-pinned-name {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: 450;
  line-height: 16px;
  text-align: center;
  text-overflow: ellipsis;
  text-wrap: pretty;
  white-space: nowrap;
}
.sidebar-pinned-title {
  box-sizing: border-box;
  max-width: 100%;
  height: 18px;
  min-height: 18px;
  flex: 0 0 16px;
  border-color: var(--openbot-border);
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-hover);
  padding: 0 var(--openbot-space-1);
  color: var(--openbot-text-readable);
  font-weight: 400;
}
.sidebar-pinned-title > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-pinned-item-dragging {
  z-index: 1;
  opacity: 0;
}
.sidebar-pinned-list[data-dragging], .sidebar-pinned-item-dragging .sidebar-pinned-row {
  cursor: grabbing;
}
.sidebar-pinned-list[data-dragging] .sidebar-pinned-item {
  will-change: transform;
}
.sidebar-pinned-drag-preview {
  position: fixed;
  z-index: var(--openbot-layer-dropdown);
  box-sizing: border-box;
  margin: 0;
  list-style: none;
  opacity: 0.96;
  pointer-events: none;
  transform: none;
  transition: none;
}
.person-avatar {
  position: relative;
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--openbot-radius-md);
  color: var(--openbot-success);
  font-size: var(--openbot-text-sm);
  font-weight: 680;
  letter-spacing: 0.02em;
}
.person-avatar > img, .person-avatar > .person-avatar-generated {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.person-avatar > img {
  object-fit: cover;
}
.person-avatar > i {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--openbot-bg-sidebar);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control-hover);
}
.person-avatar.online > i {
  background: var(--openbot-success);
}
.person-avatar.large {
  width: 48px;
  height: 48px;
  border-radius: var(--openbot-radius-lg);
  font-size: var(--openbot-text-md);
}
.person-row .person-avatar {
  width: 34px;
  height: 34px;
}
.person-unread-badge {
  position: absolute;
  z-index: 2;
  right: -4px;
  bottom: -3px;
  display: grid;
  min-width: 17px;
  height: 17px;
  place-items: center;
  border: 2px solid var(--openbot-bg-sidebar);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-primary);
  padding: 0 3px;
  color: var(--openbot-bg-sidebar);
  font-size: var(--openbot-text-sm);
  font-weight: 680;
}
.agent-row {
  display: flex;
  width: 100%;
  height: 54px;
  min-height: 54px;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  padding: 8px;
  color: inherit;
  text-align: left;
  transition: background-color var(--openbot-duration-hover) ease, border-color var(--openbot-duration-hover) ease, transform var(--openbot-duration-normal) ease;
}
.agent-row + .agent-row {
  margin-top: 4px;
}
.agent-row:hover {
  background: var(--openbot-hover);
}
.agent-row:active {
  transform: scale(0.99);
}
.agent-row-active {
  background: var(--openbot-bg-surface);
}
.agent-row-avatar {
  position: relative;
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  transform: translateX(0);
  transition: transform var(--panel-resize-duration, var(--openbot-duration-overlay)) cubic-bezier(0.32, 0.72, 0, 1);
}
.sidebar-agent-item-user-hidden .agent-row-avatar {
  opacity: 0.5;
  filter: grayscale(1);
}
.agent-row-agent-status {
  position: absolute;
  z-index: 1;
  right: -5px;
  bottom: -3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--openbot-bg-sidebar);
  box-shadow: 0 1px 3px var(--openbot-shadow-popover-ambient);
  pointer-events: none;
}
.agent-row-active .agent-row-agent-status {
  border-color: var(--openbot-bg-control);
}
.agent-row-agent-status-working {
  width: 24px;
  height: 16px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-secondary);
}
.agent-row-thinking-dots {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.agent-row-thinking-dots i {
  width: 3px;
  height: 3px;
  border-radius: var(--openbot-radius-pill);
  background: currentColor;
  --typing-dot-travel: -1px;
  animation: typing-dot-pulse 900ms ease-in-out infinite;
}
.agent-row-thinking-dots i:nth-child(2) {
  animation-delay: var(--openbot-duration-fast);
}
.agent-row-thinking-dots i:nth-child(3) {
  animation-delay: var(--openbot-duration-overlay);
}
.agent-row-agent-status-responded {
  width: 16px;
  height: 16px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success);
  color: var(--openbot-success);
}
.agent-row-agent-status-responded svg {
  width: 10px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--openbot-icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.agent-row-agent-status-unread {
  min-width: 16px;
  height: 16px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-primary);
  padding: 0 3px;
  color: var(--openbot-bg-sidebar);
  font-size: var(--openbot-text-sm);
  font-weight: 650;
  line-height: 12px;
}
.agent-row-agent-status-routine, .agent-row-agent-status-limited {
  width: 16px;
  height: 16px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-secondary);
}
.agent-row-agent-status-routine svg, .agent-row-agent-status-limited svg {
  width: 10px;
  height: 10px;
}
.agent-row-agent-status-routine-failed {
  color: var(--openbot-danger);
}
.agent-row-agent-status-waiting {
  width: 18px;
  height: 18px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-warning);
  color: var(--openbot-bg-sidebar);
}
.agent-row-agent-status-waiting svg {
  width: 11px;
  height: 11px;
}
.agent-row-wait-chip {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 3px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-warning-soft);
  padding: 1px 7px 1px 5px;
  color: var(--openbot-warning-text);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  line-height: 16px;
  white-space: nowrap;
}
.agent-row-wait-chip svg {
  width: 11px;
  height: 11px;
}
.sidebar-agent-tooltip-trigger {
  display: block;
}
.sidebar-wait-tooltip {
  z-index: var(--openbot-layer-tooltip);
  display: grid;
  max-width: min(260px, calc(100vw - 16px));
  gap: 2px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-surface-raised);
  box-shadow: var(--openbot-shadow-raised);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  pointer-events: none;
}
.sidebar-wait-tooltip-title {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  color: var(--openbot-warning-text);
  font-weight: var(--openbot-weight-semibold);
}
.sidebar-wait-tooltip-title svg {
  width: 14px;
  height: 14px;
}
.sidebar-wait-tooltip-detail {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow-wrap: anywhere;
}
.sidebar-wait-tooltip-hint {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.agent-row-agent-status-entering {
  animation: sidebar-reply-in var(--openbot-duration-overlay) cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes typing-dot-pulse {
  0%, 60%, 100% {
    opacity: 0.34;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(var(--typing-dot-travel, -2px));
  }
}
@keyframes sidebar-reply-in {
  from {
    opacity: 0;
    transform: scale(0.55);
  }
}
.agent-context-submenu-chevron {
  margin-left: auto;
  color: var(--openbot-text-muted);
}
.agent-context-submenu {
  max-height: min(520px, calc(100vh - 16px));
  overflow-y: auto;
}
@keyframes agent-context-in {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(-3px);
  }
}
.agent-avatar {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  color: currentColor;
  overflow: visible;
}
.agent-avatar > svg {
  display: block;
  width: 128%;
  height: 128%;
  overflow: visible;
  translate: var(--agent-avatar-optical-offset-x, 0) var(--agent-avatar-optical-offset, 0);
}
.agent-avatar-custom {
  overflow: hidden;
  background: var(--openbot-hover);
  box-shadow: inset 0 0 0 1px var(--openbot-border);
}
.agent-avatar-custom > img, .composer-mention-avatar > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.agent-avatar[data-avatar="image"]:is([data-mood="working"], [data-mood="connecting"]) {
  position: relative;
  overflow: visible;
}
.agent-avatar[data-avatar="image"]:is([data-mood="working"], [data-mood="connecting"]) > img {
  border-radius: var(--openbot-radius-pill);
}
.agent-avatar[data-breathe] {
  animation: agent-avatar-breathe 2.6s ease-in-out infinite;
}
@keyframes agent-avatar-breathe {
  0%, 100% {
    scale: calc(1 - var(--agent-avatar-breathe, 0));
  }
  50% {
    scale: calc(1 + var(--agent-avatar-breathe, 0));
  }
}
.agent-avatar[data-mood="waiting"] {
  filter: drop-shadow(0 0 3px var(--openbot-accent));
}
.agent-avatar[data-mood="failed"] {
  filter: drop-shadow(0 0 3px var(--openbot-danger));
}
.agent-avatar[data-mood="asleep"] {
  opacity: 0.6;
}
@media (prefers-reduced-motion: reduce) {
  .agent-avatar[data-breathe] {
    animation: none;
  }
}
.agent-avatar > .agent-avatar-arcs {
  position: absolute;
  inset: -29%;
  width: auto;
  height: auto;
  overflow: visible;
  translate: none;
}
.agent-row .agent-avatar {
  --agent-avatar-optical-offset: -4px;
  width: 36px;
  height: 36px;
}
.person-row .person-avatar {
  width: 36px;
  height: 36px;
}
.avatar-editor {
  position: relative;
  z-index: var(--openbot-layer-popover);
  width: min(284px, calc(var(--settings-panel-width, 296px) - 30px));
  max-width: calc(100vw - 24px);
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-overlay);
  box-shadow: 0 22px 60px var(--openbot-bg-overlay), 0 3px 12px var(--openbot-shadow-popover-ambient), inset 0 1px var(--openbot-hover);
  backdrop-filter: blur(18px);
  transform-origin: var(--kb-popover-content-transform-origin);
  animation: avatar-editor-in var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1) both;
}
@keyframes avatar-editor-in {
  from {
    opacity: 0;
    transform: translateY(-5px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.avatar-editor-divider {
  height: 1px;
  background: var(--openbot-border);
}
.avatar-editor-heading {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px 3px 13px;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: 590;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.avatar-editor-heading > span {
  white-space: nowrap;
}
.avatar-editor-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}
.avatar-editor-actions button {
  min-height: 40px;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  padding: 0 9px;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: 540;
  transition-property: scale, background-color, color;
  transition-duration: var(--openbot-duration-normal), var(--openbot-duration-hover), var(--openbot-duration-hover);
  transition-timing-function: ease-out;
}
.avatar-editor-actions .ui-icon-button {
  width: var(--openbot-control-xl);
  padding: 0;
}
.avatar-editor-actions button:hover {
  background: var(--openbot-hover);
  color: var(--openbot-text-primary);
}
.avatar-editor-actions button:disabled, .avatar-image-upload:disabled {
  cursor: wait;
  opacity: 0.58;
}
.avatar-image-upload {
  display: grid;
  width: calc(100% - 20px);
  min-height: 64px;
  align-items: center;
  margin: 4px 10px 12px;
  border: 1px dashed var(--openbot-border-strong);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-hover);
  padding: 9px;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 11px;
  color: var(--openbot-text-primary);
  text-align: left;
  transition: border-color var(--openbot-duration-hover) ease, background-color var(--openbot-duration-hover) ease, transform var(--openbot-duration-normal) ease;
}
.avatar-image-upload:hover:not(:disabled) {
  border-color: var(--openbot-success);
  background: var(--openbot-success-soft);
}
.avatar-image-upload:active:not(:disabled) {
  transform: scale(0.985);
}
.avatar-image-upload-active {
  border-style: solid;
  border-color: var(--openbot-border-strong);
}
.avatar-image-upload-preview {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  overflow: hidden;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-hover);
  color: var(--openbot-text-muted);
}
.avatar-image-upload-preview > svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: var(--openbot-icon-stroke);
}
.avatar-image-upload-preview .agent-avatar {
  width: 42px;
  height: 42px;
}
.avatar-image-upload strong, .avatar-image-upload small {
  display: block;
  white-space: normal;
  text-wrap: pretty;
}
.avatar-image-upload strong {
  margin-bottom: 3px;
  font-size: var(--openbot-text-sm);
  font-weight: 580;
}
.avatar-image-upload small {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 14px;
}
.avatar-editor-actions button:active, .avatar-face-choice:active, .avatar-color-choice:active {
  scale: 0.96;
}
.avatar-face-grid {
  display: grid;
  min-width: 0;
  margin: 0;
  border: 0;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 7px 10px 12px;
}
.avatar-face-choice, .avatar-color-choice {
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  color: var(--openbot-text-secondary);
  transition-property: scale, background-color, box-shadow;
  transition-duration: var(--openbot-duration-normal), var(--openbot-duration-hover), var(--openbot-duration-hover);
  transition-timing-function: ease-out;
}
.avatar-face-choice {
  width: 100%;
  height: 48px;
}
.avatar-face-choice:hover, .avatar-color-choice:hover {
  background: var(--openbot-hover);
}
.avatar-choice-selected {
  background: var(--openbot-border);
  box-shadow: inset 0 0 0 1px var(--openbot-text-muted), 0 1px 3px var(--openbot-shadow-popover-ambient);
}
.avatar-face-choice .agent-avatar {
  width: 34px;
  height: 34px;
}
.avatar-color-grid {
  display: grid;
  min-width: 0;
  margin: 0;
  border: 0;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 5px;
  padding: 4px 10px 12px;
}
.avatar-color-choice {
  width: 100%;
  height: 40px;
}
.avatar-color-swatch {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: var(--openbot-radius-pill);
  box-shadow: inset 0 0 0 1px var(--openbot-border-strong);
}
.avatar-color-swatch-auto {
  display: grid;
  place-items: center;
  border: 1px dashed var(--openbot-text-muted);
  background: transparent;
  box-shadow: none;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: 650;
}
.conversation-title .agent-avatar {
  --agent-avatar-optical-offset: -2px;
  width: 18px;
  height: 18px;
}
.agent-row-copy {
  min-width: 0;
  flex: 1;
  opacity: 1;
  transform: translateX(0);
  transition: opacity var(--openbot-duration-fast) ease, transform var(--openbot-duration-slow) cubic-bezier(0.32, 0.72, 0, 1);
}
.agent-row-heading {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.agent-row-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  overflow: hidden;
}
.agent-row-title:has(.agent-role-badge) {
  --agent-role-badge-collapsed-width: calc(2ch + 9px);
  display: grid;
  grid-template-columns: fit-content(calc(100% - var(--agent-role-badge-collapsed-width) - 5px)) minmax(var(--agent-role-badge-collapsed-width), 1fr);
}
.agent-row-name {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 3px;
  overflow: hidden;
}
.agent-row-access {
  display: inline-flex;
  flex: none;
  color: var(--openbot-text-muted);
}
.agent-row-access svg {
  width: 12px;
  height: 12px;
}
.agent-row-title strong, .person-row .agent-row-heading strong, .channel-row .agent-row-heading strong {
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  line-height: 20px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-role-badge {
  min-width: 0;
  max-width: 100%;
  height: 18px;
  min-height: 18px;
  overflow: hidden;
  flex: 0 1 auto;
  justify-self: start;
  border: 0.5px solid var(--openbot-border);
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-hover);
  padding: 2px 4px;
  color: var(--openbot-text-readable);
  font-size: var(--openbot-text-sm);
  font-weight: 400;
  line-height: 16px;
  white-space: nowrap;
}
.agent-role-badge > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-row-time, .person-row .agent-row-heading > span, .channel-row .agent-row-time {
  min-width: 0;
  flex: 0 0 auto;
  color: var(--openbot-text-readable);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
  white-space: nowrap;
}
@container (max-width: 210px) {
  .agent-row-time, .person-row .agent-row-heading > span, .channel-row .agent-row-time {
    display: none;
  }
}
.agent-row-preview {
  display: block;
  margin-top: 0;
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar:not(.sidebar-compact) .agent-row {
  width: calc(100% + var(--openbot-space-2));
  margin-inline: calc(var(--openbot-space-1) * -1);
}
.sidebar:not(.sidebar-compact) .sidebar-section-body .agent-row {
  width: 100%;
  margin-inline: 0;
}
.sidebar:not(.sidebar-compact) .sidebar-waiting-group .agent-row {
  width: 100%;
  margin-inline: 0;
}
.sidebar-waiting-group .sidebar-agent-item .agent-row {
  cursor: default;
}
.sidebar:not(.sidebar-compact) .sidebar-pinned-row.agent-row {
  width: 72px;
  margin-inline: 0;
}
.empty-search {
  margin: 32px 0;
  color: var(--openbot-text-readable);
  font-size: var(--openbot-text-md);
  text-align: center;
}
.sidebar-first-agent-state {
  display: flex;
  min-height: 100%;
  flex-direction: column;
}
.ui-button.sidebar-first-agent-action {
  flex: 0 0 auto;
}
.account-usage-popover {
  position: relative;
  z-index: var(--openbot-layer-tooltip);
  display: grid;
  width: min(300px, calc(100vw - var(--openbot-space-4)));
  max-height: min(60vh, 420px);
  overflow: auto;
  padding: var(--openbot-space-2);
  gap: var(--openbot-space-2);
  opacity: 1;
  transform: translateY(0) scale(1);
  transform-origin: var(--kb-popover-content-transform-origin);
  transition: opacity var(--openbot-duration-fast) ease, transform var(--openbot-duration-fast) var(--openbot-ease-out);
  @starting-style {
    opacity: 0;
    transform: translateY(4px) scale(0.98);
  }
}
.account-usage-popover-header, .account-usage-popover-heading {
  display: flex;
  align-items: center;
}
.account-usage-popover-header {
  justify-content: space-between;
}
.account-usage-popover-heading {
  min-width: 0;
  padding-inline-start: var(--openbot-space-1);
  gap: var(--openbot-space-2);
}
.account-usage-popover-heading > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  color: var(--openbot-text-primary);
  stroke-width: var(--openbot-icon-stroke);
}
.account-usage-popover-title {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-md);
}
.account-usage-providers {
  display: grid;
  margin: 0;
  padding: 0;
  grid-template-columns: auto max-content minmax(0, 1fr) max-content max-content;
  column-gap: var(--openbot-space-2);
  row-gap: var(--openbot-space-1);
  list-style: none;
}
.account-usage-provider {
  display: grid;
  min-width: 0;
  align-items: center;
  border-radius: var(--openbot-radius-md);
  padding: var(--openbot-space-1);
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  row-gap: var(--openbot-space-1);
}
.account-usage-provider > .account-usage-provider-name {
  grid-column: 2 / -1;
}
.account-usage-provider-logo {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  overflow: visible;
  fill: var(--openbot-provider-current);
}
.account-usage-provider-copy {
  display: grid;
  min-width: 0;
  grid-column: 2 / 4;
}
.account-usage-provider-name {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-usage-provider-meta {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-usage-provider-remaining {
  grid-column: 4 / -1;
  justify-self: end;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: var(--openbot-leading-sm);
  white-space: nowrap;
}
.account-usage-windows, .account-usage-window {
  display: grid;
  min-width: 0;
  grid-template-columns: subgrid;
}
.account-usage-windows {
  grid-column: 2 / -1;
  row-gap: var(--openbot-space-1);
}
.account-usage-window {
  --account-usage-window-tone: var(--openbot-text-secondary);
  align-items: center;
  grid-column: 1 / -1;
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.account-usage-window[data-usage-tone="warning"] {
  --account-usage-window-tone: var(--openbot-warning);
}
.account-usage-window[data-usage-tone="critical"] {
  --account-usage-window-tone: var(--openbot-danger);
}
.account-usage-window-label, .account-usage-window-reset {
  color: var(--openbot-text-muted);
  white-space: nowrap;
}
.account-usage-window-reset {
  text-align: right;
}
.account-usage-window-bar {
  display: block;
  height: 4px;
  overflow: hidden;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-border);
}
.account-usage-window-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--account-usage-window-tone);
}
.account-usage-window-remaining {
  color: var(--openbot-text-primary);
  font-variant-numeric: tabular-nums;
  font-weight: var(--openbot-weight-semibold);
  text-align: right;
}
.account-usage-window:not([data-usage-tone="neutral"]) .account-usage-window-remaining {
  color: var(--account-usage-window-tone);
}
.account-usage-empty {
  margin: 0;
  padding: var(--openbot-space-2) var(--openbot-space-1);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.account-usage-refresh.ui-button {
  position: relative;
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-md);
  color: var(--openbot-text-muted);
}
.account-usage-refresh.ui-button::before {
  position: absolute;
  inset: calc(0px - var(--openbot-space-1));
  content: "";
}
.account-usage-refresh > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: var(--openbot-icon-stroke);
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.account-usage-refresh > svg.icon-spinning {
  animation-duration: 600ms;
}
.account-usage-popover-error {
  margin: 0;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-danger-soft);
  padding: var(--openbot-space-2);
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.sidebar-compact .sidebar-topbar {
  padding-inline: 12px;
}
.sidebar-compact .sidebar-server-name {
  opacity: 0;
  pointer-events: none;
}
.sidebar-compact .sidebar-new-button {
  opacity: 0;
  pointer-events: none;
  transform: translateX(6px) scale(0.92);
}
.sidebar-compact .sidebar-toggle-button {
  transform: translateX(13px);
}
.sidebar-compact .sidebar-toggle-button:active {
  transform: translateX(13px) scale(0.96);
}
.sidebar-compact .sidebar-search-wrap {
  padding-inline: 12px;
}
.sidebar-compact .search-field {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-8px);
}
.sidebar-compact .sidebar-compact-search {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1);
  transition-delay: 55ms;
}
.sidebar-compact .agent-list {
  padding-inline: 12px;
}
.sidebar-compact .sidebar-chat-group {
  position: relative;
}
.sidebar-compact .sidebar-chat-group + .sidebar-chat-group {
  margin-top: 4px;
}
.sidebar-compact .sidebar-chat-group > header {
  height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  white-space: nowrap;
}
.sidebar-compact .agent-row {
  padding-inline: 8px;
}
.sidebar-compact .agent-row-avatar {
  transform: translateX(6px);
}
.sidebar-compact .agent-row.sidebar-pinned-row {
  width: 60px;
  height: 60px;
  min-height: 60px;
  padding: 6px;
}
.sidebar-compact .sidebar-pinned-item {
  width: 60px;
  flex-basis: 60px;
}
.sidebar-compact .agent-row.sidebar-pinned-row .sidebar-pinned-avatar {
  transform: none;
}
.sidebar-compact .sidebar-pinned-copy {
  display: none;
}
.sidebar-compact .agent-row-copy {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-8px);
}
.agent-tasks-row {
  display: grid;
  width: 100%;
  height: var(--openbot-control-md);
  align-items: center;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  padding: 0 var(--openbot-space-2);
  grid-template-columns: 16px minmax(0, 1fr) auto;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  letter-spacing: -0.01em;
  text-align: left;
  transition: background-color var(--openbot-duration-hover) ease;
}
.agent-tasks-row:hover:not(:disabled) {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}
.agent-tasks-row:disabled {
  cursor: default;
  opacity: 0.45;
}
.agent-tasks-row:focus-visible {
  outline: 0;
  background: var(--openbot-bg-control-hover);
  box-shadow: inset 0 0 0 1px var(--openbot-border-strong);
}
.agent-tasks-row small {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.agent-tasks-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--openbot-icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--openbot-text-primary);
}
.icon-spinning {
  animation: account-update-spin 800ms linear infinite;
}
@keyframes account-update-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .server-rail-mark, .server-rail-server-item, .sidebar-section, .sidebar-pinned-item {
    transition: none;
  }
  .sidebar-section-chevron, .sidebar-section-collapse, .sidebar-section-toggle, .sidebar-pinned-group-empty-target, .sidebar-pinned-empty-drop {
    transition: none;
  }
  .account-usage-popover {
    transform: none;
    transition: opacity var(--openbot-duration-fast) ease;
    @starting-style {
      opacity: 0;
      transform: none;
    }
  }
  .account-usage-refresh > svg {
    transition: none;
  }
  .account-usage-refresh:hover:not(:disabled) > svg {
    transform: none;
  }
  .icon-spinning {
    animation-duration: 1.6s;
  }
}
.server-rail, .sidebar {
  background: var(--openbot-bg-sidebar);
}
.server-rail-monogram, .server-rail-action .server-rail-monogram {
  border-color: var(--openbot-border);
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-secondary);
}
.person-avatar.online > i {
  background: var(--openbot-success);
}
.sidebar-icon-button:hover, .header-panel-toggle:hover, .browser-toolbar-button:hover:not(:disabled), .message-action-button:hover, .message-action-button:focus-visible, .message-action-button[aria-expanded="true"], .reaction-picker-row button:hover, .reaction-picker-row button:focus-visible, .reaction-picker-row button[aria-checked="true"], .composer-button:hover, .composer-attachment > button:hover, .agent-tasks-row:hover, .agent-context-menu button:hover, .agent-context-menu button:focus-visible {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}
.sidebar-icon-button:active, .header-panel-toggle:active, .agent-row:active, .composer-button:active, .voice-button:active, .settings-panel-nav-button:active {
  transform: scale(0.97);
}
.agent-row:hover {
  background: var(--openbot-bg-control);
}
.agent-list[data-sidebar-dragging] .agent-row:hover {
  background: transparent;
}
.agent-list[data-sidebar-dragging] .agent-row.agent-row-active, .agent-list[data-sidebar-dragging] .agent-row.agent-row-active:hover {
  background: var(--openbot-bg-surface);
}
.settings-panel-content {
  color: var(--openbot-text-primary);
}
.agent-settings-notifications, .provider-model-panel, .provider-model-rail, .avatar-editor {
  border-color: var(--openbot-border);
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-primary);
}
.choice-key, .composer-mention-token, .remote-desktop-empty-mark {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-secondary);
}
.server-rail-muted {
  position: absolute;
  right: 0;
  bottom: 0;
  color: var(--openbot-text-secondary);
  background: var(--openbot-bg-sidebar);
  border-radius: var(--openbot-radius-sm);
}
@keyframes server-sleep-waking {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}
@media (prefers-reduced-motion: reduce) {
  .server-menu-sleep[data-state="waking"], .sidebar-server-name > .sidebar-server-name-sleep[data-state="waking"] {
    animation: none;
  }
}
.ui-action-menu:not([data-menu-layout="grid"]) .server-rail-menu-detail-item {
  height: auto;
}
.server-rail-menu-label {
  display: flex;
  flex-direction: column;
}
.server-rail-menu-detail {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.sidebar-view-switch {
  padding: 2px 12px 6px;
}
.sidebar-view-tabs.ui-sliding-tabs {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sidebar-view-tab.ui-sliding-tabs-trigger {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-1);
  overflow: hidden;
  padding-inline: var(--openbot-space-1);
  font-size: var(--openbot-text-sm);
  white-space: nowrap;
}
.sidebar-view-tab svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: none;
}
.account-update-island {
  --panel-open-dur: calc(var(--openbot-duration-slow) + var(--openbot-duration-slow));
  --panel-close-dur: calc(var(--openbot-duration-slow) + var(--openbot-duration-normal));
  --panel-translate-y: calc(100% - var(--openbot-space-3));
  --panel-blur: var(--openbot-space-0-5);
  --panel-ease: var(--openbot-ease-out);
  --text-swap-dur: var(--openbot-duration-normal);
  --text-swap-translate-y: var(--openbot-space-1);
  --text-swap-blur: var(--openbot-space-0-5);
  --text-swap-ease: var(--openbot-ease-in-out);
  --digit-dur: var(--openbot-duration-slow);
  --digit-distance: var(--openbot-space-1);
  --digit-stagger: calc(var(--openbot-duration-fast) - var(--openbot-duration-dialog));
  --digit-blur: var(--openbot-space-0-5);
  --digit-ease: var(--openbot-ease-out);
  --digit-dir-x: 0;
  --digit-dir-y: 1;
  position: absolute;
  z-index: 0;
  right: var(--openbot-space-4);
  bottom: var(--openbot-control-xl);
  left: var(--openbot-space-4);
  display: grid;
  min-height: calc(var(--openbot-control-xl) + var(--openbot-radius-card));
  align-items: center;
  border: 0;
  border-radius: var(--openbot-radius-lg) var(--openbot-radius-lg) var(--openbot-radius-md) var(--openbot-radius-md);
  background: var(--openbot-accent-strong);
  box-shadow: 0 0 0 1px var(--openbot-accent-soft);
  -webkit-backdrop-filter: blur(var(--openbot-space-3));
  backdrop-filter: blur(var(--openbot-space-3));
  padding: calc(var(--openbot-space-1) + 1px) var(--openbot-space-1-5) calc(var(--openbot-space-4) + var(--openbot-space-1) - 1px);
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--openbot-space-2);
  color: var(--openbot-accent-text);
  -webkit-font-smoothing: antialiased;
}
.account-update-island.t-panel-slide {
  transform: translateY(var(--panel-translate-y));
  opacity: 0;
  filter: blur(var(--panel-blur));
  pointer-events: none;
  transition: transform var(--panel-close-dur) var(--panel-ease), opacity var(--panel-close-dur) var(--panel-ease), filter var(--panel-close-dur) var(--panel-ease);
  will-change: transform, opacity, filter;
}
.account-update-island.t-panel-slide[data-open="true"] {
  transform: translateY(0);
  opacity: 1;
  filter: blur(0);
  pointer-events: auto;
  transition: transform var(--panel-open-dur) var(--panel-ease), opacity var(--panel-open-dur) var(--panel-ease), filter var(--panel-open-dur) var(--panel-ease);
}
@starting-style {
  .account-update-island.t-panel-slide[data-open="true"] {
    transform: translateY(var(--panel-translate-y));
    opacity: 0;
    filter: blur(var(--panel-blur));
  }
}
.account-update-island__copy {
  min-width: 0;
}
.account-update-island__copy strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--openbot-accent-text);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-sm);
  white-space: nowrap;
}
.account-update-island .t-update-text-swap {
  display: inline-grid;
}
.account-update-island .t-update-text-swap > [data-text] {
  grid-area: 1 / 1;
  transform: translateY(0);
  opacity: 1;
  filter: blur(0);
  transition: transform var(--text-swap-dur) var(--text-swap-ease), filter var(--text-swap-dur) var(--text-swap-ease), opacity var(--text-swap-dur) var(--text-swap-ease);
  will-change: transform, filter, opacity;
}
.account-update-island .t-update-text-swap:is([data-state="available"], [data-state="action"]) > [data-text]:is([data-text="ready"], [data-text="progress"], [data-text="error"]) {
  transform: translateY(var(--text-swap-translate-y));
  opacity: 0;
  filter: blur(var(--text-swap-blur));
}
.account-update-island .t-update-text-swap:is([data-state="ready"], [data-state="progress"]) > [data-text]:is([data-text="available"], [data-text="action"], [data-text="error"]) {
  transform: translateY(calc(var(--text-swap-translate-y) * -1));
  opacity: 0;
  filter: blur(var(--text-swap-blur));
}
.account-update-island .t-update-text-swap[data-state="error"] > [data-text]:not([data-text="error"]) {
  transform: translateY(calc(var(--text-swap-translate-y) * -1));
  opacity: 0;
  filter: blur(var(--text-swap-blur));
}
.account-update-island__action-shell {
  position: relative;
  display: grid;
  min-width: calc( var(--openbot-control-xl) + var(--openbot-control-xl) + var(--openbot-space-6) + var(--openbot-space-1) );
  flex-shrink: 0;
}
.account-update-island__action.ui-button {
  width: 100%;
  height: var(--openbot-control-sm);
  min-height: var(--openbot-control-sm);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-surface-light);
  box-shadow: 0 1px 2px var(--openbot-shadow-popover-ambient);
  padding: 0 var(--openbot-space-3) 0 var(--openbot-space-2);
  color: var(--openbot-text-on-light);
  transition: box-shadow var(--openbot-duration-normal) var(--openbot-ease-out), transform var(--openbot-duration-fast) var(--openbot-ease-out);
}
.account-update-island__action.ui-button::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% + var(--openbot-space-4));
  min-width: var(--openbot-control-xl);
  height: var(--openbot-control-xl);
  transform: translate(-50%, -50%);
  content: "";
}
.account-update-island__action.ui-button:disabled {
  cursor: progress;
  opacity: 1;
}
.account-update-island__action-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-1-5);
}
.account-update-island__action-label {
  min-width: calc(var(--openbot-control-xl) + var(--openbot-space-3));
  color: var(--openbot-text-on-light);
  font-weight: var(--openbot-weight-semibold);
  text-align: left;
}
.account-update-island__progress-value {
  display: inline-grid;
  align-items: baseline;
  grid-template-columns: 3ch max-content;
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.account-update-island__progress-digits {
  display: inline-flex;
  justify-content: flex-end;
}
.account-update-island__progress-suffix, .account-update-island__busy-label {
  display: inline-block;
}
@keyframes account-update-digit-pop-in {
  0% {
    transform: translate( calc(var(--digit-distance) * var(--digit-dir-x)), calc(var(--digit-distance) * var(--digit-dir-y)) );
    opacity: 0.4;
    filter: blur(var(--digit-blur));
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
    filter: blur(0);
  }
}
.account-update-island__progress-value .t-digit {
  display: inline-block;
  will-change: transform, opacity, filter;
}
.account-update-island__progress-digits.is-animating .t-digit {
  animation: account-update-digit-pop-in var(--digit-dur) var(--digit-ease) both;
}
.account-update-island__progress-digits.is-animating .t-digit[data-stagger="1"] {
  animation-delay: var(--digit-stagger);
}
.account-update-island__progress-digits.is-animating .t-digit[data-stagger="2"] {
  animation-delay: calc(var(--digit-stagger) * 2);
}
.account-update-island__action-shell[data-downloading="true"] .account-update-island__action-label {
  min-width: var(--openbot-control-md);
  text-align: center;
}
.account-update-island__action-shell[data-downloading="true"] .account-update-island__action.ui-button {
  padding-inline: var(--openbot-space-2);
}
.account-update-island__icon.t-icon-swap {
  --icon-swap-dur: var(--openbot-duration-overlay);
  --icon-swap-blur: var(--openbot-space-0-5);
  --icon-swap-start-scale: 0.25;
  --icon-swap-ease: var(--openbot-ease-in-out);
  position: relative;
  display: inline-grid;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  place-items: center;
}
.account-update-island__icon.t-icon-swap .t-icon {
  position: relative;
  top: 1px;
  display: grid;
  grid-area: 1 / 1;
  place-items: center;
  transition: opacity var(--icon-swap-dur) var(--icon-swap-ease), filter var(--icon-swap-dur) var(--icon-swap-ease), transform var(--icon-swap-dur) var(--icon-swap-ease);
  will-change: opacity, filter, transform;
}
.account-update-island__icon.t-icon-swap svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.account-update-island__icon.t-icon-swap .ui-spinner {
  border-color: var(--openbot-text-dim-on-light);
  border-top-color: currentColor;
}
.account-update-island__icon.t-icon-swap[data-state="a"] .t-icon[data-icon="a"], .account-update-island__icon.t-icon-swap[data-state="b"] .t-icon[data-icon="b"] {
  transform: scale(1);
  opacity: 1;
  filter: blur(0);
}
.account-update-island__icon.t-icon-swap[data-state="a"] .t-icon[data-icon="b"], .account-update-island__icon.t-icon-swap[data-state="b"] .t-icon[data-icon="a"] {
  transform: scale(var(--icon-swap-start-scale));
  opacity: 0;
  filter: blur(var(--icon-swap-blur));
}
.account-update-island__action.ui-button:active:not(:disabled):not([data-disabled]) {
  transform: scale(0.96);
}
@media (hover: hover) and (pointer: fine) {
  .account-update-island__action.ui-button:hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-surface-light);
    box-shadow: 0 0 0 1px var(--openbot-text-dim-on-light), 0 1px 2px var(--openbot-shadow-popover-ambient);
    color: var(--openbot-text-on-light);
  }
}
@media (prefers-reduced-motion: reduce) {
  .account-update-island.t-panel-slide, .account-update-island__action.ui-button, .account-update-island__icon.t-icon-swap .t-icon, .account-update-island .t-update-text-swap > [data-text] {
    transition: none;
  }
  .account-update-island__progress-value .t-digit {
    animation: none;
  }
}
.sidebar-update-island > .account-update-island {
  position: relative;
  inset: auto;
  min-height: 0;
  margin: var(--openbot-space-2) var(--openbot-space-3) var(--openbot-space-3);
  border-radius: var(--openbot-radius-lg);
  padding: var(--openbot-space-1-5) var(--openbot-space-1-5) var(--openbot-space-1-5) var(--openbot-space-3);
}
.join-server-backdrop {
  animation: join-server-backdrop-in var(--modal-open-dur) var(--modal-ease) both;
  will-change: opacity;
}
.join-server-backdrop[data-motion="closing"] {
  animation: join-server-backdrop-out var(--modal-close-dur) var(--modal-ease) both;
}
.join-server-dialog {
  position: relative;
  width: min(420px, 100%);
  max-height: calc(100dvh - 48px);
  overflow: hidden;
  outline: 0;
  border-radius: var(--openbot-radius-xl);
  background: var(--openbot-bg-sidebar);
  color: var(--openbot-text-primary);
  box-shadow: 0 0 0 1px var(--openbot-border-strong), 0 24px 64px var(--openbot-shadow-dialog);
}
.join-server-close {
  position: absolute;
  top: var(--openbot-space-6);
  right: var(--openbot-space-6);
  z-index: 2;
  color: var(--openbot-text-muted);
}
.join-server-content {
  width: 100%;
  max-height: inherit;
  overflow-y: auto;
  padding: 32px;
}
.join-server-pages {
  --join-server-reference: 0px;
  width: 100%;
  height: 336px;
  overflow: hidden;
  transition: height var(--page-slide-dur) var(--page-slide-ease);
}
.join-server-pages[data-reference] {
  --join-server-reference: calc(var(--openbot-control-xs) + var(--openbot-space-0-5));
}
.join-server-pages[data-page="1"][data-preview-error] {
  height: calc(356px + var(--join-server-reference));
}
.join-server-pages[data-page="2"] {
  height: 292px;
}
.join-server-pages[data-page="2"][data-error] {
  height: calc(364px + var(--join-server-reference));
}
.join-server-page {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--openbot-space-4) + var(--openbot-space-1));
  margin: 0;
}
.join-server-header {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.join-server-header-entry {
  gap: var(--openbot-space-2);
  padding-inline: calc(var(--openbot-space-4) + var(--openbot-space-1));
}
.join-server-header-entry .ui-heading {
  font-size: var(--openbot-text-3xl);
  font-weight: var(--openbot-weight-bold);
  line-height: var(--openbot-leading-3xl);
}
.join-server-header-entry .ui-text {
  font-size: var(--openbot-text-lg);
}
.join-server-header-verified {
  gap: var(--openbot-space-2);
  padding-inline: var(--openbot-space-2);
}
.join-server-header .ui-text {
  max-width: 296px;
  line-height: var(--openbot-leading-sm);
}
.join-server-entry-logo {
  --app-logo-background: var(--openbot-surface-light);
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  margin-bottom: var(--openbot-space-4);
  border-radius: var(--openbot-radius-xl);
  box-shadow: 0 12px 28px var(--openbot-shadow-dialog), inset 0 1px 0 var(--openbot-border-strong);
}
.join-server-field {
  gap: var(--openbot-space-2);
}
.join-server-link-input.ui-input {
  height: var(--openbot-control-xl);
  background: var(--openbot-bg-control);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
}
.join-server-link-input.ui-input:focus-visible {
  outline: none;
  box-shadow: none;
}
.join-server-link-input.ui-input.is-error {
  border-color: var(--openbot-danger);
}
.join-server-field .ui-field-error {
  min-height: var(--openbot-leading-sm);
}
.join-server-identity-logo {
  --app-logo-background: var(--openbot-surface-light);
  width: 88px;
  height: 88px;
  flex: 0 0 auto;
  margin-bottom: var(--openbot-space-6);
  border-radius: var(--openbot-radius-modal);
  box-shadow: 0 16px 36px var(--openbot-shadow-dialog), inset 0 1px 0 var(--openbot-border-strong);
}
.join-server-invite-eyebrow {
  margin-bottom: 2px;
  font-size: var(--openbot-text-lg);
}
.join-server-header-verified .ui-heading {
  font-size: var(--openbot-text-3xl);
  font-weight: var(--openbot-weight-bold);
  line-height: var(--openbot-leading-3xl);
}
.join-server-hostname.ui-text {
  max-width: 260px;
  color: var(--openbot-text-muted);
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-lg);
}
.join-server-alert.ui-alert {
  align-self: start;
  padding-block: var(--openbot-space-2);
}
.join-server-alert .ui-alert-description {
  white-space: normal;
}
.join-server-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--openbot-space-2);
  margin-top: auto;
}
.join-server-actions .ui-button {
  width: 100%;
}
.join-server-actions-verified {
  gap: var(--openbot-space-1);
}
.join-server-preview {
  display: grid;
  gap: var(--openbot-space-3);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-4);
}
.join-server-preview-signal {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.join-server-preview-signal i, .join-server-preview-signal span {
  display: block;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success);
}
.join-server-preview-signal i {
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 4px var(--openbot-success-soft);
}
.join-server-preview-signal span {
  width: 42px;
  height: 1px;
  opacity: 0.52;
}
.join-server-preview-heading {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.join-server-verified {
  color: var(--openbot-success);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.join-server-preview-heading strong, .join-server-preview-heading small, .join-server-preview dd {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.join-server-preview-heading strong {
  font-size: var(--openbot-text-lg);
}
.join-server-preview-heading small, .join-server-preview dt, .join-server-preview p {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.join-server-preview dl {
  display: grid;
  gap: var(--openbot-space-2);
  margin: 0;
}
.join-server-preview dl div {
  min-width: 0;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: var(--openbot-space-2);
}
.join-server-preview dd {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.join-server-preview p {
  margin: 0;
  line-height: var(--openbot-leading-sm);
}
@keyframes join-server-backdrop-in {
  from {
    opacity: 0;
  }
}
@keyframes join-server-backdrop-out {
  to {
    opacity: 0;
  }
}
@media (max-width: 560px) {
  .join-server-backdrop {
    padding: var(--openbot-space-3);
  }
  .join-server-dialog {
    width: 100%;
    max-height: calc(100dvh - 24px);
  }
  .join-server-close {
    top: var(--openbot-space-3);
    right: var(--openbot-space-3);
  }
  .join-server-content {
    padding: var(--openbot-space-6);
  }
  .join-server-pages {
    height: 348px;
  }
  .join-server-pages[data-page="1"][data-preview-error] {
    height: calc(368px + var(--join-server-reference));
  }
  .join-server-pages[data-page="2"] {
    height: 304px;
  }
  .join-server-pages[data-page="2"][data-error] {
    height: calc(376px + var(--join-server-reference));
  }
}
@media (prefers-reduced-motion: reduce) {
  .join-server-backdrop {
    animation: none;
  }
  .join-server-pages {
    transition: none;
  }
}
.add-server-dialog {
  width: min(460px, 100%);
  transition: width var(--openbot-duration-normal) var(--openbot-ease-out);
}
.add-server-dialog[data-step="pricing"] {
  width: min(calc(760px + var(--add-server-extra-price-chars, 0) * 48px), 100%);
}
.add-server-step {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-6);
  margin: 0;
  animation: add-server-step-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}
.add-server-step .ui-heading:focus {
  outline: none;
}
.add-server-pricing {
  gap: var(--openbot-space-4);
}
.add-server-dialog[data-step="pricing"] .join-server-content {
  padding: var(--openbot-space-6);
}
.add-server-limit.ui-alert {
  align-self: stretch;
}
.add-server-intro {
  gap: var(--openbot-space-2);
  padding-block: var(--openbot-space-2);
}
.add-server-intro .ui-heading, .add-server-intro .ui-text {
  margin: 0;
  text-wrap: balance;
}
.add-server-intro .ui-heading {
  padding-inline: calc(var(--openbot-control-md) + var(--openbot-space-2));
  font-size: var(--openbot-text-3xl);
  font-weight: var(--openbot-weight-bold);
  line-height: var(--openbot-leading-3xl);
  letter-spacing: var(--openbot-tracking-tight);
}
.add-server-intro .ui-text {
  max-width: 560px;
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
.add-server-bar {
  position: relative;
  min-height: var(--openbot-control-md);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-2);
  padding-inline: calc(var(--openbot-control-md) + var(--openbot-space-2));
}
.add-server-bar .hosted-currency {
  position: absolute;
  top: 50%;
  left: 0;
  width: auto;
  flex: 0 0 auto;
  transform: translateY(-50%);
}
.hosted-billing {
  --hosted-billing-ease: cubic-bezier(0.34, 1.36, 0.64, 1);
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 3px;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-canvas);
}
.hosted-billing::before {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control-active);
  box-shadow: inset 0 0 0 1px var(--openbot-border);
  transition: transform 300ms var(--hosted-billing-ease);
}
.hosted-billing[data-billing="yearly"]::before {
  transform: translateX(100%);
}
.hosted-billing-option {
  position: relative;
  z-index: 1;
  display: flex;
}
.hosted-billing-control {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-1) var(--openbot-space-4);
  border-radius: var(--openbot-radius-pill);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--openbot-duration-normal) var(--openbot-ease-out);
}
.hosted-billing-control[data-checked] {
  color: var(--openbot-text-primary);
}
.hosted-billing-option:has(:focus-visible) .hosted-billing-control {
  box-shadow: var(--openbot-focus-ring);
}
.hosted-billing-save {
  padding: 0 var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-md);
  transition: color var(--openbot-duration-overlay) var(--openbot-ease-out), background-color var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.hosted-billing[data-billing="yearly"] .hosted-billing-save {
  background: var(--openbot-success-soft);
  color: var(--openbot-success-text);
  animation: hosted-billing-save-pop 300ms var(--hosted-billing-ease) 80ms both;
}
.hosted-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-canvas);
  list-style: none;
}
.hosted-plan {
  position: relative;
  isolation: isolate;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: var(--openbot-space-6);
  transition: opacity var(--openbot-duration-overlay) var(--openbot-ease-out), background-color var(--openbot-duration-normal) var(--openbot-ease-out);
  animation: hosted-plan-in var(--openbot-duration-overlay) var(--openbot-ease-out) calc(var(--plan-index) * 40ms + 60ms) backwards;
}
.hosted-plan + .hosted-plan {
  border-left: 1px solid var(--openbot-border);
}
.hosted-plan[data-recommended] {
  background: var(--openbot-bg-surface);
}
.hosted-plan[data-dimmed] {
  opacity: 0.5;
}
.hosted-plan[data-recommended]::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--openbot-accent), var(--openbot-warning), transparent);
  opacity: 0.8;
  pointer-events: none;
}
.hosted-plan[data-recommended]::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  height: 50%;
  background: linear-gradient(90deg, var(--openbot-accent), var(--openbot-warning));
  opacity: 0.22;
  mask-image: radial-gradient(90% 100% at 50% 100%, var(--openbot-text-primary), transparent);
  pointer-events: none;
  transition: opacity var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.hosted-plan-head {
  height: var(--openbot-control-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.hosted-plan-name {
  margin: 0;
  color: var(--openbot-accent-text);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
}
.hosted-plan-badge {
  border-color: transparent;
  background: var(--openbot-surface-light);
  color: var(--openbot-text-on-light);
}
.hosted-plan-price {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin: var(--openbot-space-4) 0 0;
}
.hosted-plan-was {
  display: grid;
  grid-template-columns: 0fr;
  align-self: center;
  opacity: 0;
  transition: grid-template-columns var(--openbot-duration-overlay) var(--openbot-ease-out), opacity var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.hosted-plan-was[data-shown] {
  grid-template-columns: 1fr;
  opacity: 1;
}
.hosted-plan-was-inner {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.hosted-plan-was s {
  display: inline-block;
  margin-right: var(--openbot-space-2);
  color: var(--openbot-text-dim);
  font-size: var(--openbot-text-xl);
  line-height: var(--openbot-leading-xl);
  font-variant-numeric: tabular-nums;
  text-decoration-thickness: 1px;
}
.hosted-plan-now {
  display: flex;
  align-items: flex-start;
  white-space: nowrap;
}
.hosted-plan-amount {
  --digit-distance: 12px;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-display);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-display);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.hosted-plan-period {
  white-space: nowrap;
  margin-left: var(--openbot-space-1);
  padding-top: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.hosted-plan-billed {
  display: flex;
  flex-wrap: wrap;
  margin: var(--openbot-space-1) 0 0;
  color: var(--openbot-text-dim);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  animation: add-server-step-in var(--openbot-duration-overlay) var(--openbot-ease-out) both;
}
.hosted-plan-billed-total {
  white-space: nowrap;
}
.hosted-plan-saving {
  color: var(--openbot-success-text);
  white-space: nowrap;
}
.hosted-plan-saving::before {
  content: "\00b7" / "";
  margin: 0 var(--openbot-space-1);
  color: var(--openbot-text-dim);
}
.hosted-plan-summary {
  margin: var(--openbot-space-4) 0 var(--openbot-space-6);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.hosted-plan-choose.ui-button {
  margin-top: auto;
}
.hosted-plan-facts {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
  margin: var(--openbot-space-6) 0 0;
  padding: var(--openbot-space-4) 0 0;
  border-top: 1px dashed var(--openbot-border);
  list-style: none;
}
.hosted-plan-facts li {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.hosted-plan-facts svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  transition: color var(--openbot-duration-normal) var(--openbot-ease-out);
}
.add-server-custom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-4);
  padding: 0 var(--openbot-space-1);
}
.add-server-custom-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.add-server-custom-text .ui-text {
  margin: 0;
}
.add-server-custom .ui-button {
  flex: 0 0 auto;
}
.add-server-join {
  margin: 0;
  text-align: center;
}
.add-server-progress {
  align-items: stretch;
  gap: var(--openbot-space-6);
}
.add-server-progress .join-server-header {
  gap: var(--openbot-space-2);
}
.add-server-ring {
  position: relative;
  width: 96px;
  height: 96px;
  margin: var(--openbot-space-2) auto 0;
  display: grid;
  place-items: center;
}
.add-server-ring-segments {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke-width: 4;
  transform: rotate(-90deg);
}
.add-server-ring-segment circle {
  stroke-dasharray: 30.33 100;
  transition: stroke-dasharray var(--openbot-duration-normal) var(--openbot-ease-out), stroke-dashoffset var(--openbot-duration-slow) var(--openbot-ease-out), stroke var(--openbot-duration-slow) var(--openbot-ease-out);
}
.add-server-ring-segment:nth-child(1) circle {
  stroke-dashoffset: -1.5;
}
.add-server-ring-segment:nth-child(2) circle {
  stroke-dashoffset: -34.83;
}
.add-server-ring-segment:nth-child(3) circle {
  stroke-dashoffset: -68.17;
}
.add-server-ring-track {
  stroke: var(--openbot-border);
}
.add-server-ring-segment .add-server-ring-fill {
  stroke: var(--openbot-accent);
}
.add-server-ring-segment[data-state="pending"] .add-server-ring-fill {
  stroke-dasharray: 0 100;
}
.add-server-ring-segment[data-state="active"] .add-server-ring-fill {
  --add-server-step-creep: 20s;
  stroke-dasharray: 27.3 100;
  transition: stroke-dasharray var(--add-server-step-creep) cubic-bezier(0.05, 0.7, 0.1, 1);
  animation: add-server-segment-breathe 1.6s var(--openbot-ease-in-out) infinite alternate;
  @starting-style {
    stroke-dasharray: 0 100;
  }
}
.add-server-ring-segment[data-state="failed"] .add-server-ring-fill {
  stroke: var(--openbot-danger);
}
.add-server-progress[data-status="ready"] .add-server-ring-segment circle {
  stroke-dasharray: 33.4 100;
  stroke: var(--openbot-success);
}
.add-server-progress[data-status="ready"] .add-server-ring-segment:nth-child(1) circle {
  stroke-dashoffset: 0;
}
.add-server-progress[data-status="ready"] .add-server-ring-segment:nth-child(2) circle {
  stroke-dashoffset: -33.33;
}
.add-server-progress[data-status="ready"] .add-server-ring-segment:nth-child(3) circle {
  stroke-dashoffset: -66.67;
}
.add-server-ring-core {
  position: relative;
  width: 72px;
  height: 72px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--openbot-space-1);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface);
  box-shadow: inset 0 0 0 1px var(--openbot-border);
  transition: opacity var(--openbot-duration-normal) var(--openbot-ease-out), transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.add-server-light {
  position: relative;
  width: 42px;
  height: 13px;
  border: 1px solid var(--openbot-text-dim);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--openbot-text-dim) 55%, transparent);
  }
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-sidebar);
}
.add-server-light::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  width: 16px;
  height: 1px;
  background: var(--openbot-text-dim);
}
.add-server-light::after {
  content: "";
  position: absolute;
  top: 3.5px;
  right: 4px;
  width: 4px;
  height: 4px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-dim);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-dim) 55%, transparent);
  }
  transition: background var(--openbot-duration-normal) var(--openbot-ease-out), box-shadow var(--openbot-duration-normal) var(--openbot-ease-out);
}
.add-server-light[data-state="active"]::after {
  background: var(--openbot-accent);
  box-shadow: 0 0 6px var(--openbot-accent);
  animation: add-server-light-flicker 1.3s steps(1, end) infinite;
}
.add-server-light[data-state="done"]::after {
  background: var(--openbot-success);
  box-shadow: 0 0 6px var(--openbot-success);
}
.add-server-light[data-state="failed"]::after {
  background: var(--openbot-danger);
  box-shadow: 0 0 6px var(--openbot-danger);
}
.add-server-progress:is([data-status="ready"], [data-status="error"]) .add-server-ring-core {
  opacity: 0;
  transform: scale(0.7);
}
.add-server-ring-result {
  position: absolute;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success);
  color: var(--openbot-text-on-accent);
  animation: add-server-pop var(--openbot-duration-overlay) var(--openbot-ease-out) var(--openbot-duration-normal) both;
}
.add-server-ring-result[data-tone="danger"] {
  background: var(--openbot-danger);
}
.add-server-ring-result svg {
  width: 32px;
  height: 32px;
}
.add-server-ring-result svg path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: add-server-check-draw var(--openbot-duration-slow) var(--openbot-ease-out) var(--openbot-duration-slow) forwards;
}
.add-server-ticker {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  animation: add-server-detail-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}
.add-server-confetti {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.add-server-confetti i {
  position: absolute;
  top: var(--confetti-origin-y);
  left: var(--confetti-origin-x);
  width: 7px;
  height: 12px;
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-accent);
  opacity: 0;
  animation: add-server-confetti var(--confetti-duration) var(--openbot-ease-out) var(--confetti-delay) both;
}
.add-server-confetti i:nth-child(5n + 1) {
  background: var(--openbot-success);
}
.add-server-confetti i:nth-child(5n + 2) {
  background: var(--openbot-warning);
}
.add-server-confetti i:nth-child(5n + 3) {
  background: var(--openbot-danger);
}
.add-server-confetti i:nth-child(5n + 4) {
  background: var(--openbot-accent-text);
}
.add-server-confetti i:nth-child(3n) {
  width: 8px;
  height: 8px;
  border-radius: var(--openbot-radius-pill);
}
@keyframes add-server-confetti {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.3) rotate(0deg);
  }
  30% {
    opacity: 1;
    transform: translate(calc(-50% + var(--confetti-x)), calc(-50% + var(--confetti-y))) rotate(calc(var(--confetti-spin) / 2)) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--confetti-x) * 1.15), calc(-50% + var(--confetti-y) + 360px)) rotate(var(--confetti-spin)) scale(0.9);
  }
}
@keyframes hosted-billing-save-pop {
  50% {
    transform: scale(1.1);
  }
}
@keyframes hosted-plan-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}
@keyframes add-server-step-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}
@keyframes add-server-pop {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
}
@keyframes add-server-check-draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes add-server-light-flicker {
  0%, 22%, 34%, 58%, 64%, 88% {
    opacity: 1;
  }
  18%, 30%, 54%, 61%, 84% {
    opacity: 0.25;
  }
}
@keyframes add-server-segment-breathe {
  to {
    opacity: 0.55;
  }
}
@keyframes add-server-detail-in {
  from {
    opacity: 0;
    transform: translateY(8px);
    filter: blur(2px);
  }
}
@media (hover: hover) {
  .hosted-plan:not([data-recommended]):hover {
    background: var(--openbot-bg-surface);
  }
  .hosted-plan[data-recommended]:hover::after {
    opacity: 0.3;
  }
  .hosted-plan:hover .hosted-plan-facts svg {
    color: var(--openbot-text-secondary);
  }
}
@media (max-width: 720px) {
  .hosted-plans {
    grid-template-columns: minmax(0, 1fr);
  }
  .hosted-plan + .hosted-plan {
    border-top: 1px solid var(--openbot-border);
    border-left: 0;
  }
}
@media (max-width: 560px) {
  .add-server-intro .ui-heading {
    font-size: var(--openbot-text-2xl);
    line-height: var(--openbot-leading-2xl);
  }
  .add-server-intro .ui-text {
    font-size: var(--openbot-text-md);
    line-height: var(--openbot-leading-md);
  }
  .add-server-bar {
    padding: calc(var(--openbot-control-md) + var(--openbot-space-1)) 0 0;
  }
  .add-server-bar .hosted-billing {
    flex: 1;
  }
  .add-server-bar .hosted-currency {
    top: 0;
    transform: none;
  }
  .add-server-custom {
    flex-direction: column;
    align-items: stretch;
  }
  .add-server-limit.ui-alert {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }
  .add-server-limit .ui-alert-actions {
    grid-column: 2;
    justify-content: flex-start;
  }
}
@media (prefers-reduced-motion: reduce) {
  .add-server-dialog, .hosted-billing::before, .hosted-billing-control, .hosted-billing-save, .hosted-plan, .hosted-plan-was, .add-server-progress[data-status] .add-server-ring-segment circle, .add-server-progress[data-status] .add-server-ring-core {
    transition: none;
  }
  .add-server-step, .hosted-billing[data-billing="yearly"] .hosted-billing-save, .hosted-plan, .hosted-plan-billed, .add-server-ring-result, .add-server-light[data-state]::after, .add-server-ring-segment[data-state] .add-server-ring-fill, .add-server-ticker {
    animation: none;
  }
  .add-server-ring-result svg path {
    stroke-dashoffset: 0;
    animation: none;
  }
  .add-server-confetti {
    display: none;
  }
}
.hosted-upsell-notice {
  flex: none;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  margin-top: var(--openbot-space-3);
  padding: var(--openbot-space-3);
}
.hosted-upsell-notice .ui-alert-icon {
  width: var(--openbot-space-8);
  height: var(--openbot-space-8);
  padding: var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-md);
  background: linear-gradient(135deg, var(--openbot-beam-blue), var(--openbot-beam-pink));
  color: var(--openbot-text-on-accent);
}
.hosted-upsell-notice .ui-alert-title {
  text-wrap: balance;
}
.hosted-upsell-notice .ui-alert-actions {
  justify-content: flex-start;
  margin-top: var(--openbot-space-2);
}
@property --hosted-upsell-beam-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.hosted-upsell-beam {
  position: relative;
  border-color: transparent;
  background: radial-gradient(120% 140% at 0% 0%, var(--openbot-beam-blue), transparent 60%), var(--openbot-bg-surface-raised);
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--openbot-beam-blue) 12%, transparent), transparent 60%), var(--openbot-bg-surface-raised);
  }
}
.hosted-upsell-beam::before, .hosted-upsell-beam-glow > span {
  position: absolute;
  border-radius: inherit;
  content: "";
  pointer-events: none;
  mask: linear-gradient(currentColor 0 0) content-box exclude, linear-gradient(currentColor 0 0);
  animation: hosted-upsell-beam-turn 6s linear infinite;
}
.hosted-upsell-beam::before {
  inset: 0;
  padding: 1px;
  background: conic-gradient( from var(--hosted-upsell-beam-angle), var(--openbot-beam-blue) 0deg, var(--openbot-beam-blue) 180deg, var(--openbot-beam-teal) 240deg, var(--openbot-beam-blue) 290deg, var(--openbot-beam-pink) 330deg, var(--openbot-beam-blue) 360deg );
  @supports (color: color-mix(in lab, red, red)) {
    background: conic-gradient( from var(--hosted-upsell-beam-angle), color-mix(in srgb, var(--openbot-beam-blue) 18%, transparent) 0deg, color-mix(in srgb, var(--openbot-beam-blue) 18%, transparent) 180deg, var(--openbot-beam-teal) 240deg, var(--openbot-beam-blue) 290deg, var(--openbot-beam-pink) 330deg, color-mix(in srgb, var(--openbot-beam-blue) 18%, transparent) 360deg );
  }
}
.hosted-upsell-beam-glow {
  position: absolute;
  inset: calc(-1 * var(--openbot-space-3));
  border-radius: inherit;
  filter: blur(6px);
  opacity: 0.5;
  pointer-events: none;
}
.hosted-upsell-beam-glow > span {
  inset: var(--openbot-space-3);
  padding: 2px;
  background: conic-gradient( from var(--hosted-upsell-beam-angle), transparent 0deg, transparent 210deg, var(--openbot-beam-teal) 250deg, var(--openbot-beam-blue) 290deg, var(--openbot-beam-pink) 330deg, transparent 360deg );
}
@keyframes hosted-upsell-beam-turn {
  to {
    --hosted-upsell-beam-angle: 360deg;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hosted-upsell-beam::before, .hosted-upsell-beam-glow > span {
    animation: none;
  }
}
.hosted-upsell-modal {
  width: min(420px, 100%);
  display: grid;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-6);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-modal);
  outline: 0;
  color: var(--openbot-text-primary);
  background: var(--openbot-bg-sidebar);
}
.hosted-upsell-modal .hosted-upsell-modal-title {
  margin: 0;
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-lg);
  text-wrap: balance;
}
.hosted-upsell-modal .hosted-upsell-modal-description {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-wrap: pretty;
}
.hosted-upsell-modal .hosted-upsell-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
  margin-top: var(--openbot-space-3);
}
.hosted-upsell-modal .hosted-upsell-scene {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: var(--openbot-space-4);
  padding: var(--openbot-space-6) var(--openbot-space-2) var(--openbot-space-4);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
}
.hosted-upsell-modal .hosted-upsell-device {
  display: grid;
  justify-items: center;
  align-content: end;
  gap: var(--openbot-space-3);
  margin: 0;
}
.hosted-upsell-modal .hosted-upsell-device figcaption {
  display: grid;
  justify-items: center;
  gap: var(--openbot-space-1-5);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.hosted-upsell-modal .hosted-upsell-laptop {
  display: grid;
  justify-items: center;
}
.hosted-upsell-modal .hosted-upsell-laptop-lid {
  width: 88px;
  height: 58px;
  padding: 4px;
  border: 2px solid var(--openbot-border-strong);
  border-bottom: 0;
  border-radius: var(--openbot-radius-sm) var(--openbot-radius-sm) 0 0;
  transform-origin: bottom;
  animation: hosted-upsell-lid 5s ease-in-out infinite;
}
.hosted-upsell-modal .hosted-upsell-laptop-screen {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: var(--openbot-radius-xs);
  color: var(--openbot-text-secondary);
  background: var(--openbot-bg-control);
}
.hosted-upsell-modal .hosted-upsell-laptop-screen svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  animation: hosted-upsell-shown-open 5s ease-in-out infinite;
}
.hosted-upsell-modal .hosted-upsell-laptop-base {
  width: 108px;
  height: 6px;
  border-radius: 0 0 var(--openbot-radius-sm) var(--openbot-radius-sm);
  background: var(--openbot-border-strong);
}
.hosted-upsell-modal .hosted-upsell-rack {
  width: 64px;
  display: grid;
  gap: 4px;
}
.hosted-upsell-modal .hosted-upsell-rack span {
  position: relative;
  height: 18px;
  border: 2px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-sm);
}
.hosted-upsell-modal .hosted-upsell-rack span::after {
  position: absolute;
  top: 50%;
  right: 6px;
  width: 5px;
  height: 5px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success);
  transform: translateY(-50%);
  animation: hosted-upsell-light 1.6s ease-in-out infinite;
  content: "";
}
.hosted-upsell-modal .hosted-upsell-rack span:nth-child(2)::after {
  animation-delay: 0.5s;
}
.hosted-upsell-modal .hosted-upsell-rack span:nth-child(3)::after {
  animation-delay: 1s;
}
.hosted-upsell-modal .hosted-upsell-status {
  display: grid;
  justify-items: center;
  font-weight: var(--openbot-weight-medium);
}
.hosted-upsell-modal .hosted-upsell-status > span {
  grid-area: 1 / 1;
  padding: 2px var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
  white-space: nowrap;
}
.hosted-upsell-modal .hosted-upsell-status .hosted-upsell-status-on {
  color: var(--openbot-success-text);
  background: var(--openbot-success);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-success) 16%, transparent);
  }
}
.hosted-upsell-modal .hosted-upsell-status .hosted-upsell-status-off {
  color: var(--openbot-warning-text);
  background: var(--openbot-warning-text);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-warning-text) 14%, transparent);
  }
}
.hosted-upsell-modal .hosted-upsell-status-flip .hosted-upsell-status-on {
  animation: hosted-upsell-shown-open 5s ease-in-out infinite;
}
.hosted-upsell-modal .hosted-upsell-status-flip .hosted-upsell-status-off {
  animation: hosted-upsell-shown-closed 5s ease-in-out infinite;
}
@keyframes hosted-upsell-lid {
  0%, 25% {
    transform: scaleY(1);
  }
  40%, 85% {
    transform: scaleY(0.08);
  }
  100% {
    transform: scaleY(1);
  }
}
@keyframes hosted-upsell-shown-open {
  0%, 30% {
    opacity: 1;
  }
  38%, 88% {
    opacity: 0;
  }
  96%, 100% {
    opacity: 1;
  }
}
@keyframes hosted-upsell-shown-closed {
  0%, 30% {
    opacity: 0;
  }
  38%, 88% {
    opacity: 1;
  }
  96%, 100% {
    opacity: 0;
  }
}
@keyframes hosted-upsell-light {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hosted-upsell-modal .hosted-upsell-laptop-lid, .hosted-upsell-modal .hosted-upsell-laptop-screen svg, .hosted-upsell-modal .hosted-upsell-rack span::after, .hosted-upsell-modal .hosted-upsell-status-flip .hosted-upsell-status-on, .hosted-upsell-modal .hosted-upsell-status-flip .hosted-upsell-status-off {
    animation: none;
  }
  .hosted-upsell-modal .hosted-upsell-laptop-lid {
    transform: scaleY(0.08);
  }
  .hosted-upsell-modal .hosted-upsell-laptop-screen svg, .hosted-upsell-modal .hosted-upsell-status-flip .hosted-upsell-status-on {
    opacity: 0;
  }
}
.hosted-upsell-offline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--openbot-space-2);
  margin: var(--openbot-space-1) 0 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.app-loading .hosted-upsell-offline {
  justify-content: center;
}
.restart-server-steps {
  display: grid;
  gap: var(--openbot-space-1);
  margin: 0;
  padding: var(--openbot-space-2) var(--openbot-space-3);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  list-style: none;
}
.restart-server-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--openbot-space-3);
  padding-block: var(--openbot-space-1-5);
}
.restart-server-step-icon {
  display: grid;
  place-items: center;
  width: var(--openbot-icon-lg);
  height: var(--openbot-leading-md);
  color: var(--openbot-text-dim);
}
.restart-server-step-icon svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.restart-server-step[data-status="done"] .restart-server-step-icon {
  color: var(--openbot-success-text);
}
.restart-server-step[data-status="failed"] .restart-server-step-icon {
  color: var(--openbot-danger-text);
}
.restart-server-step-text {
  display: grid;
  min-width: 0;
}
.restart-server-step-label {
  overflow-wrap: anywhere;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
}
.restart-server-step[data-status="pending"] .restart-server-step-label, .restart-server-step-detail {
  color: var(--openbot-text-muted);
}
.restart-server-step-detail {
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.server-status-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  margin: var(--openbot-space-3) 0 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
.server-update-dialog-body {
  display: grid;
  gap: var(--openbot-space-3);
}
.server-update-step-progress {
  margin-top: var(--openbot-space-1-5);
}
.server-update-step-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-2);
  margin-top: var(--openbot-space-2);
}
.settings-panel {
  --settings-panel-section-gap: 25px;
  position: absolute;
  z-index: 15;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  width: var(--settings-panel-width, 296px);
  flex-direction: column;
  border-left: 1px solid var(--openbot-border);
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
  animation: settings-panel-in var(--openbot-duration-slow) cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.settings-panel-header {
  display: grid;
  height: 39px;
  flex: 0 0 auto;
  grid-template-columns: 32px 1fr 32px;
  align-items: center;
  border-bottom: 1px solid var(--openbot-border);
  padding: 0 10px;
}
.settings-panel-header h2 {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}
.settings-panel-nav-button {
  position: relative;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  padding: 0;
  background: transparent;
  color: var(--openbot-text-secondary);
  transition: background-color var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease, transform var(--openbot-duration-fast) ease;
}
.settings-panel-nav-button::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  content: "";
  transform: translate(-50%, -50%);
}
.settings-panel-nav-button > svg {
  width: 16px;
  height: 16px;
}
.settings-panel-nav-button:hover {
  background: var(--openbot-hover);
  color: var(--openbot-text-primary);
}
.settings-back-icon {
  transform: translateX(-0.5px);
}
.settings-panel-content {
  min-height: 0;
  overflow-y: auto;
  padding: 24px 15px 28px;
}
.settings-field {
  display: block;
  margin: 0 0 17px;
}
.settings-field > span {
  display: block;
  margin: 0 0 6px 8px;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  line-height: 18px;
}
.settings-field input, .settings-field textarea, .settings-field select {
  display: block;
  width: 100%;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  outline: 0;
  background: var(--openbot-shadow-popover-ambient);
  padding: 10px 11px;
  color: var(--openbot-text-primary);
  caret-color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  line-height: 19px;
  transition: border-color var(--openbot-duration-hover) ease, background var(--openbot-duration-hover) ease;
}
.settings-field input, .settings-field select {
  height: 38px;
}
.settings-field select {
  appearance: none;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--openbot-text-secondary) 50%), linear-gradient(135deg, var(--openbot-text-secondary) 50%, transparent 50%);
  background-position: calc(100% - 16px) 16px, calc(100% - 11px) 16px;
  background-repeat: no-repeat;
  background-size: 5px 5px, 5px 5px;
  padding-right: 32px;
}
.settings-field select option {
  background: var(--openbot-bg-control);
  color: var(--openbot-text-primary);
}
.settings-field textarea {
  field-sizing: content;
  min-height: 88px;
  max-height: 240px;
  overflow-y: auto;
}
.settings-field .settings-instructions-input {
  field-sizing: fixed;
  height: 120px;
  min-height: 120px;
  max-height: 120px;
  resize: none;
}
.settings-field input::placeholder, .settings-field textarea::placeholder {
  color: var(--openbot-text-muted);
}
.settings-field input:focus, .settings-field textarea:focus, .settings-field select:focus {
  border-color: var(--openbot-text-muted);
  background: var(--openbot-shadow-popover-ambient);
}
.settings-field input:focus-visible, .settings-field textarea:focus-visible, .settings-field select:focus-visible {
  outline: none;
}
.settings-link-group {
  display: grid;
  width: 100%;
  margin: 7px 0 22px;
  border-top: 1px solid var(--openbot-border);
  border-bottom: 1px solid var(--openbot-border);
}
.settings-link {
  width: 100%;
  min-height: 42px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-3);
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 var(--openbot-space-1);
  text-align: left;
  transition: none;
}
.settings-link + .settings-link {
  border-top: 1px solid var(--openbot-border);
}
.settings-link-label {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.settings-link-icon {
  display: grid;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  place-items: center;
  color: var(--openbot-text-secondary);
}
.settings-link-icon > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.settings-link-value {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
.settings-link-value svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
@media (hover: hover) and (pointer: fine) {
  .settings-link-group .settings-link:hover {
    background: var(--openbot-hover);
    color: var(--openbot-text-primary);
  }
  .settings-link:hover .settings-link-value {
    color: var(--openbot-text-secondary);
  }
}
.settings-link-section {
  display: grid;
  gap: var(--openbot-space-1-5);
}
.settings-link-section-title {
  margin: 0 0 0 var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
}
.settings-link-group-inset {
  margin: 0;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface);
}
.settings-link-group-inset > * + * {
  border-top: 1px solid var(--openbot-border);
}
.settings-link-group-inset > :first-child, .settings-link-group-inset > :first-child > button {
  border-top-left-radius: calc(var(--openbot-radius-md) - 1px);
  border-top-right-radius: calc(var(--openbot-radius-md) - 1px);
}
.settings-link-group-inset > :last-child, .settings-link-group-inset > :last-child > button {
  border-bottom-left-radius: calc(var(--openbot-radius-md) - 1px);
  border-bottom-right-radius: calc(var(--openbot-radius-md) - 1px);
}
.settings-link-group-inset .settings-link {
  min-height: 40px;
  gap: var(--openbot-space-2);
  padding: 0 var(--openbot-space-3);
}
.provider-code-login-backdrop {
  z-index: calc(var(--openbot-layer-dialog) + 1);
}
.provider-code-login-dialog {
  position: relative;
  width: min(420px, 100%);
  max-height: calc(100dvh - var(--openbot-space-6) * 2);
  overflow-y: auto;
  outline: 0;
  border-radius: var(--openbot-radius-xl);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-6);
  color: var(--openbot-text-primary);
  animation: provider-code-login-dialog-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}
.provider-code-login-dialog[data-page] {
  width: min(720px, 100%);
}
.provider-code-login-header {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  padding-right: var(--openbot-space-8);
}
.provider-code-login-title {
  margin: 0;
  font-size: var(--openbot-text-xl);
  line-height: var(--openbot-leading-xl);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: var(--openbot-tracking-tight);
}
.provider-code-login-description {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.provider-code-login-body {
  display: flex;
  flex-direction: column;
  margin-top: var(--openbot-space-6);
}
.provider-code-login-pending {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-8) 0;
  text-align: center;
}
.provider-code-login-code {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-4);
}
.provider-code-login-steps {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  margin: 0;
  padding-left: var(--openbot-space-4);
  list-style: decimal;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  align-self: stretch;
}
.provider-code-login-url {
  display: inline-flex;
  height: auto;
  gap: var(--openbot-space-1-5);
  padding: 0;
}
.provider-code-login-url > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.provider-code-login-value {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  align-self: stretch;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  padding: var(--openbot-space-3) var(--openbot-space-4);
}
.provider-code-login-copy > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.provider-code-login-digits {
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-2xl);
  line-height: var(--openbot-leading-2xl);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: var(--openbot-tracking-wide);
}
.provider-code-login-paste {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-3);
  align-self: stretch;
}
.provider-code-login-expiry {
  margin: 0;
  text-align: center;
}
.provider-use-app-actions {
  flex-direction: row;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
}
.provider-code-login-close {
  position: absolute;
  top: var(--openbot-space-3);
  right: var(--openbot-space-3);
}
@keyframes provider-code-login-dialog-in {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
}
@font-face {
  font-display: block;
  font-family: KaTeX_AMS;
  font-style: normal;
  font-weight: 400;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_AMS-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_AMS-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_AMS-Regular.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Caligraphic;
  font-style: normal;
  font-weight: 700;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Bold.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Bold.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Bold.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Caligraphic;
  font-style: normal;
  font-weight: 400;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Regular.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Fraktur;
  font-style: normal;
  font-weight: 700;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Fraktur-Bold.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Fraktur-Bold.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Fraktur-Bold.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Fraktur;
  font-style: normal;
  font-weight: 400;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Fraktur-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Fraktur-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Fraktur-Regular.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Main;
  font-style: normal;
  font-weight: 700;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-Bold.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-Bold.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-Bold.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Main;
  font-style: italic;
  font-weight: 700;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-BoldItalic.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-BoldItalic.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-BoldItalic.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Main;
  font-style: italic;
  font-weight: 400;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-Italic.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-Italic.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-Italic.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Main;
  font-style: normal;
  font-weight: 400;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-Regular.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Math;
  font-style: italic;
  font-weight: 700;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Math-BoldItalic.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Math-BoldItalic.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Math-BoldItalic.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Math;
  font-style: italic;
  font-weight: 400;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Math-Italic.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Math-Italic.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Math-Italic.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: "KaTeX_SansSerif";
  font-style: normal;
  font-weight: 700;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_SansSerif-Bold.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_SansSerif-Bold.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_SansSerif-Bold.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: "KaTeX_SansSerif";
  font-style: italic;
  font-weight: 400;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_SansSerif-Italic.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_SansSerif-Italic.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_SansSerif-Italic.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: "KaTeX_SansSerif";
  font-style: normal;
  font-weight: 400;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_SansSerif-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_SansSerif-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_SansSerif-Regular.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Script;
  font-style: normal;
  font-weight: 400;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Script-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Script-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Script-Regular.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Size1;
  font-style: normal;
  font-weight: 400;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size1-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size1-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size1-Regular.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Size2;
  font-style: normal;
  font-weight: 400;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size2-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size2-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size2-Regular.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Size3;
  font-style: normal;
  font-weight: 400;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size3-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size3-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size3-Regular.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Size4;
  font-style: normal;
  font-weight: 400;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size4-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size4-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size4-Regular.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Typewriter;
  font-style: normal;
  font-weight: 400;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Typewriter-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Typewriter-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Typewriter-Regular.ttf) format("truetype");
}
.katex {
  font: normal 1.21em KaTeX_Main,Times New Roman,serif;
  line-height: 1.2;
  position: relative;
  text-indent: 0;
  text-rendering: auto;
}
.katex * {
  -ms-high-contrast-adjust: none !important;
  border-color: currentColor;
}
.katex .katex-version:after {
  content: "0.18.9";
}
.katex .katex-mathml {
  border: 0;
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.katex .katex-html>.katex-newline {
  display: block;
}
.katex .katex-base {
  position: relative;
  white-space: nowrap;
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
}
.katex .katex-base,.katex .katex-strut {
  display: inline-block;
}
.katex .textbf {
  font-weight: 700;
}
.katex .textit {
  font-style: italic;
}
.katex .textrm {
  font-family: KaTeX_Main;
}
.katex .textsf {
  font-family: KaTeX_SansSerif;
}
.katex .texttt {
  font-family: KaTeX_Typewriter;
}
.katex .mathnormal {
  font-family: KaTeX_Math;
  font-style: italic;
}
.katex .mathit {
  font-family: KaTeX_Main;
  font-style: italic;
}
.katex .mathrm {
  font-style: normal;
}
.katex .mathbf {
  font-family: KaTeX_Main;
  font-weight: 700;
}
.katex .boldsymbol {
  font-family: KaTeX_Math;
  font-style: italic;
  font-weight: 700;
}
.katex .amsrm,.katex .mathbb,.katex .textbb {
  font-family: KaTeX_AMS;
}
.katex .mathcal {
  font-family: KaTeX_Caligraphic;
}
.katex .mathfrak,.katex .textfrak {
  font-family: KaTeX_Fraktur;
}
.katex .mathboldfrak,.katex .textboldfrak {
  font-family: KaTeX_Fraktur;
  font-weight: 700;
}
.katex .mathtt {
  font-family: KaTeX_Typewriter;
}
.katex .mathscr,.katex .textscr {
  font-family: KaTeX_Script;
}
.katex .mathsf,.katex .textsf {
  font-family: KaTeX_SansSerif;
}
.katex .mathboldsf,.katex .textboldsf {
  font-family: KaTeX_SansSerif;
  font-weight: 700;
}
.katex .mathitsf,.katex .mathsfit,.katex .textitsf {
  font-family: KaTeX_SansSerif;
  font-style: italic;
}
.katex .mainrm {
  font-family: KaTeX_Main;
  font-style: normal;
}
.katex .vlist-t {
  border-collapse: collapse;
  display: inline-table;
  table-layout: fixed;
}
.katex .vlist-r {
  display: table-row;
}
.katex .vlist {
  display: table-cell;
  position: relative;
  vertical-align: bottom;
}
.katex .vlist>span {
  display: block;
  height: 0;
  position: relative;
}
.katex .vlist>span>span {
  display: inline-block;
}
.katex .vlist>span>.pstrut {
  overflow: hidden;
  width: 0;
}
.katex .vlist-t2 {
  margin-right: -2px;
}
.katex .vlist-s {
  display: table-cell;
  font-size: 1px;
  min-width: 2px;
  vertical-align: bottom;
  width: 2px;
}
.katex .katex-vbox {
  align-items: baseline;
  display: inline-flex;
  flex-direction: column;
}
.katex .katex-thinbox {
  display: inline-flex;
  flex-direction: row;
  max-width: 0;
  width: 0;
}
.katex .msupsub {
  text-align: left;
}
.katex .mfrac>span>span {
  text-align: center;
}
.katex .mfrac .frac-line {
  border-bottom-style: solid;
  display: inline-block;
  width: 100%;
}
.katex .katex-hdashline,.katex .katex-hline,.katex .katex-overline .overline-line,.katex .katex-rule,.katex .katex-underline .underline-line,.katex .mfrac .frac-line {
  min-height: 1px;
}
.katex .mspace {
  display: inline-block;
}
.katex .katex-smash {
  display: inline;
  line-height: 0;
}
.katex .clap,.katex .llap,.katex .rlap {
  position: relative;
  width: 0;
}
.katex .clap>.katex-inner,.katex .llap>.katex-inner,.katex .rlap>.katex-inner {
  position: absolute;
}
.katex .clap>.katex-fix,.katex .llap>.katex-fix,.katex .rlap>.katex-fix {
  display: inline-block;
}
.katex .llap>.katex-inner {
  right: 0;
}
.katex .clap>.katex-inner,.katex .rlap>.katex-inner {
  left: 0;
}
.katex .clap>.katex-inner>span {
  margin-left: -50%;
  margin-right: 50%;
}
.katex .katex-rule {
  border: 0 solid;
  display: inline-block;
  position: relative;
}
.katex .katex-hline,.katex .katex-overline .overline-line,.katex .katex-underline .underline-line {
  border-bottom-style: solid;
  display: inline-block;
  width: 100%;
}
.katex .katex-hdashline {
  border-bottom-style: dashed;
  display: inline-block;
  width: 100%;
}
.katex .sqrt>.katex-root {
  margin-left: .2777777778em;
  margin-right: -.5555555556em;
}
.katex .fontsize-ensurer.reset-size1.size1,.katex .katex-sizing.reset-size1.size1 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size1.size2,.katex .katex-sizing.reset-size1.size2 {
  font-size: 1.2em;
}
.katex .fontsize-ensurer.reset-size1.size3,.katex .katex-sizing.reset-size1.size3 {
  font-size: 1.4em;
}
.katex .fontsize-ensurer.reset-size1.size4,.katex .katex-sizing.reset-size1.size4 {
  font-size: 1.6em;
}
.katex .fontsize-ensurer.reset-size1.size5,.katex .katex-sizing.reset-size1.size5 {
  font-size: 1.8em;
}
.katex .fontsize-ensurer.reset-size1.size6,.katex .katex-sizing.reset-size1.size6 {
  font-size: 2em;
}
.katex .fontsize-ensurer.reset-size1.size7,.katex .katex-sizing.reset-size1.size7 {
  font-size: 2.4em;
}
.katex .fontsize-ensurer.reset-size1.size8,.katex .katex-sizing.reset-size1.size8 {
  font-size: 2.88em;
}
.katex .fontsize-ensurer.reset-size1.size9,.katex .katex-sizing.reset-size1.size9 {
  font-size: 3.456em;
}
.katex .fontsize-ensurer.reset-size1.size10,.katex .katex-sizing.reset-size1.size10 {
  font-size: 4.148em;
}
.katex .fontsize-ensurer.reset-size1.size11,.katex .katex-sizing.reset-size1.size11 {
  font-size: 4.976em;
}
.katex .fontsize-ensurer.reset-size2.size1,.katex .katex-sizing.reset-size2.size1 {
  font-size: .8333333333em;
}
.katex .fontsize-ensurer.reset-size2.size2,.katex .katex-sizing.reset-size2.size2 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size2.size3,.katex .katex-sizing.reset-size2.size3 {
  font-size: 1.1666666667em;
}
.katex .fontsize-ensurer.reset-size2.size4,.katex .katex-sizing.reset-size2.size4 {
  font-size: 1.3333333333em;
}
.katex .fontsize-ensurer.reset-size2.size5,.katex .katex-sizing.reset-size2.size5 {
  font-size: 1.5em;
}
.katex .fontsize-ensurer.reset-size2.size6,.katex .katex-sizing.reset-size2.size6 {
  font-size: 1.6666666667em;
}
.katex .fontsize-ensurer.reset-size2.size7,.katex .katex-sizing.reset-size2.size7 {
  font-size: 2em;
}
.katex .fontsize-ensurer.reset-size2.size8,.katex .katex-sizing.reset-size2.size8 {
  font-size: 2.4em;
}
.katex .fontsize-ensurer.reset-size2.size9,.katex .katex-sizing.reset-size2.size9 {
  font-size: 2.88em;
}
.katex .fontsize-ensurer.reset-size2.size10,.katex .katex-sizing.reset-size2.size10 {
  font-size: 3.4566666667em;
}
.katex .fontsize-ensurer.reset-size2.size11,.katex .katex-sizing.reset-size2.size11 {
  font-size: 4.1466666667em;
}
.katex .fontsize-ensurer.reset-size3.size1,.katex .katex-sizing.reset-size3.size1 {
  font-size: .7142857143em;
}
.katex .fontsize-ensurer.reset-size3.size2,.katex .katex-sizing.reset-size3.size2 {
  font-size: .8571428571em;
}
.katex .fontsize-ensurer.reset-size3.size3,.katex .katex-sizing.reset-size3.size3 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size3.size4,.katex .katex-sizing.reset-size3.size4 {
  font-size: 1.1428571429em;
}
.katex .fontsize-ensurer.reset-size3.size5,.katex .katex-sizing.reset-size3.size5 {
  font-size: 1.2857142857em;
}
.katex .fontsize-ensurer.reset-size3.size6,.katex .katex-sizing.reset-size3.size6 {
  font-size: 1.4285714286em;
}
.katex .fontsize-ensurer.reset-size3.size7,.katex .katex-sizing.reset-size3.size7 {
  font-size: 1.7142857143em;
}
.katex .fontsize-ensurer.reset-size3.size8,.katex .katex-sizing.reset-size3.size8 {
  font-size: 2.0571428571em;
}
.katex .fontsize-ensurer.reset-size3.size9,.katex .katex-sizing.reset-size3.size9 {
  font-size: 2.4685714286em;
}
.katex .fontsize-ensurer.reset-size3.size10,.katex .katex-sizing.reset-size3.size10 {
  font-size: 2.9628571429em;
}
.katex .fontsize-ensurer.reset-size3.size11,.katex .katex-sizing.reset-size3.size11 {
  font-size: 3.5542857143em;
}
.katex .fontsize-ensurer.reset-size4.size1,.katex .katex-sizing.reset-size4.size1 {
  font-size: .625em;
}
.katex .fontsize-ensurer.reset-size4.size2,.katex .katex-sizing.reset-size4.size2 {
  font-size: .75em;
}
.katex .fontsize-ensurer.reset-size4.size3,.katex .katex-sizing.reset-size4.size3 {
  font-size: .875em;
}
.katex .fontsize-ensurer.reset-size4.size4,.katex .katex-sizing.reset-size4.size4 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size4.size5,.katex .katex-sizing.reset-size4.size5 {
  font-size: 1.125em;
}
.katex .fontsize-ensurer.reset-size4.size6,.katex .katex-sizing.reset-size4.size6 {
  font-size: 1.25em;
}
.katex .fontsize-ensurer.reset-size4.size7,.katex .katex-sizing.reset-size4.size7 {
  font-size: 1.5em;
}
.katex .fontsize-ensurer.reset-size4.size8,.katex .katex-sizing.reset-size4.size8 {
  font-size: 1.8em;
}
.katex .fontsize-ensurer.reset-size4.size9,.katex .katex-sizing.reset-size4.size9 {
  font-size: 2.16em;
}
.katex .fontsize-ensurer.reset-size4.size10,.katex .katex-sizing.reset-size4.size10 {
  font-size: 2.5925em;
}
.katex .fontsize-ensurer.reset-size4.size11,.katex .katex-sizing.reset-size4.size11 {
  font-size: 3.11em;
}
.katex .fontsize-ensurer.reset-size5.size1,.katex .katex-sizing.reset-size5.size1 {
  font-size: .5555555556em;
}
.katex .fontsize-ensurer.reset-size5.size2,.katex .katex-sizing.reset-size5.size2 {
  font-size: .6666666667em;
}
.katex .fontsize-ensurer.reset-size5.size3,.katex .katex-sizing.reset-size5.size3 {
  font-size: .7777777778em;
}
.katex .fontsize-ensurer.reset-size5.size4,.katex .katex-sizing.reset-size5.size4 {
  font-size: .8888888889em;
}
.katex .fontsize-ensurer.reset-size5.size5,.katex .katex-sizing.reset-size5.size5 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size5.size6,.katex .katex-sizing.reset-size5.size6 {
  font-size: 1.1111111111em;
}
.katex .fontsize-ensurer.reset-size5.size7,.katex .katex-sizing.reset-size5.size7 {
  font-size: 1.3333333333em;
}
.katex .fontsize-ensurer.reset-size5.size8,.katex .katex-sizing.reset-size5.size8 {
  font-size: 1.6em;
}
.katex .fontsize-ensurer.reset-size5.size9,.katex .katex-sizing.reset-size5.size9 {
  font-size: 1.92em;
}
.katex .fontsize-ensurer.reset-size5.size10,.katex .katex-sizing.reset-size5.size10 {
  font-size: 2.3044444444em;
}
.katex .fontsize-ensurer.reset-size5.size11,.katex .katex-sizing.reset-size5.size11 {
  font-size: 2.7644444444em;
}
.katex .fontsize-ensurer.reset-size6.size1,.katex .katex-sizing.reset-size6.size1 {
  font-size: .5em;
}
.katex .fontsize-ensurer.reset-size6.size2,.katex .katex-sizing.reset-size6.size2 {
  font-size: .6em;
}
.katex .fontsize-ensurer.reset-size6.size3,.katex .katex-sizing.reset-size6.size3 {
  font-size: .7em;
}
.katex .fontsize-ensurer.reset-size6.size4,.katex .katex-sizing.reset-size6.size4 {
  font-size: .8em;
}
.katex .fontsize-ensurer.reset-size6.size5,.katex .katex-sizing.reset-size6.size5 {
  font-size: .9em;
}
.katex .fontsize-ensurer.reset-size6.size6,.katex .katex-sizing.reset-size6.size6 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size6.size7,.katex .katex-sizing.reset-size6.size7 {
  font-size: 1.2em;
}
.katex .fontsize-ensurer.reset-size6.size8,.katex .katex-sizing.reset-size6.size8 {
  font-size: 1.44em;
}
.katex .fontsize-ensurer.reset-size6.size9,.katex .katex-sizing.reset-size6.size9 {
  font-size: 1.728em;
}
.katex .fontsize-ensurer.reset-size6.size10,.katex .katex-sizing.reset-size6.size10 {
  font-size: 2.074em;
}
.katex .fontsize-ensurer.reset-size6.size11,.katex .katex-sizing.reset-size6.size11 {
  font-size: 2.488em;
}
.katex .fontsize-ensurer.reset-size7.size1,.katex .katex-sizing.reset-size7.size1 {
  font-size: .4166666667em;
}
.katex .fontsize-ensurer.reset-size7.size2,.katex .katex-sizing.reset-size7.size2 {
  font-size: .5em;
}
.katex .fontsize-ensurer.reset-size7.size3,.katex .katex-sizing.reset-size7.size3 {
  font-size: .5833333333em;
}
.katex .fontsize-ensurer.reset-size7.size4,.katex .katex-sizing.reset-size7.size4 {
  font-size: .6666666667em;
}
.katex .fontsize-ensurer.reset-size7.size5,.katex .katex-sizing.reset-size7.size5 {
  font-size: .75em;
}
.katex .fontsize-ensurer.reset-size7.size6,.katex .katex-sizing.reset-size7.size6 {
  font-size: .8333333333em;
}
.katex .fontsize-ensurer.reset-size7.size7,.katex .katex-sizing.reset-size7.size7 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size7.size8,.katex .katex-sizing.reset-size7.size8 {
  font-size: 1.2em;
}
.katex .fontsize-ensurer.reset-size7.size9,.katex .katex-sizing.reset-size7.size9 {
  font-size: 1.44em;
}
.katex .fontsize-ensurer.reset-size7.size10,.katex .katex-sizing.reset-size7.size10 {
  font-size: 1.7283333333em;
}
.katex .fontsize-ensurer.reset-size7.size11,.katex .katex-sizing.reset-size7.size11 {
  font-size: 2.0733333333em;
}
.katex .fontsize-ensurer.reset-size8.size1,.katex .katex-sizing.reset-size8.size1 {
  font-size: .3472222222em;
}
.katex .fontsize-ensurer.reset-size8.size2,.katex .katex-sizing.reset-size8.size2 {
  font-size: .4166666667em;
}
.katex .fontsize-ensurer.reset-size8.size3,.katex .katex-sizing.reset-size8.size3 {
  font-size: .4861111111em;
}
.katex .fontsize-ensurer.reset-size8.size4,.katex .katex-sizing.reset-size8.size4 {
  font-size: .5555555556em;
}
.katex .fontsize-ensurer.reset-size8.size5,.katex .katex-sizing.reset-size8.size5 {
  font-size: .625em;
}
.katex .fontsize-ensurer.reset-size8.size6,.katex .katex-sizing.reset-size8.size6 {
  font-size: .6944444444em;
}
.katex .fontsize-ensurer.reset-size8.size7,.katex .katex-sizing.reset-size8.size7 {
  font-size: .8333333333em;
}
.katex .fontsize-ensurer.reset-size8.size8,.katex .katex-sizing.reset-size8.size8 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size8.size9,.katex .katex-sizing.reset-size8.size9 {
  font-size: 1.2em;
}
.katex .fontsize-ensurer.reset-size8.size10,.katex .katex-sizing.reset-size8.size10 {
  font-size: 1.4402777778em;
}
.katex .fontsize-ensurer.reset-size8.size11,.katex .katex-sizing.reset-size8.size11 {
  font-size: 1.7277777778em;
}
.katex .fontsize-ensurer.reset-size9.size1,.katex .katex-sizing.reset-size9.size1 {
  font-size: .2893518519em;
}
.katex .fontsize-ensurer.reset-size9.size2,.katex .katex-sizing.reset-size9.size2 {
  font-size: .3472222222em;
}
.katex .fontsize-ensurer.reset-size9.size3,.katex .katex-sizing.reset-size9.size3 {
  font-size: .4050925926em;
}
.katex .fontsize-ensurer.reset-size9.size4,.katex .katex-sizing.reset-size9.size4 {
  font-size: .462962963em;
}
.katex .fontsize-ensurer.reset-size9.size5,.katex .katex-sizing.reset-size9.size5 {
  font-size: .5208333333em;
}
.katex .fontsize-ensurer.reset-size9.size6,.katex .katex-sizing.reset-size9.size6 {
  font-size: .5787037037em;
}
.katex .fontsize-ensurer.reset-size9.size7,.katex .katex-sizing.reset-size9.size7 {
  font-size: .6944444444em;
}
.katex .fontsize-ensurer.reset-size9.size8,.katex .katex-sizing.reset-size9.size8 {
  font-size: .8333333333em;
}
.katex .fontsize-ensurer.reset-size9.size9,.katex .katex-sizing.reset-size9.size9 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size9.size10,.katex .katex-sizing.reset-size9.size10 {
  font-size: 1.2002314815em;
}
.katex .fontsize-ensurer.reset-size9.size11,.katex .katex-sizing.reset-size9.size11 {
  font-size: 1.4398148148em;
}
.katex .fontsize-ensurer.reset-size10.size1,.katex .katex-sizing.reset-size10.size1 {
  font-size: .2410800386em;
}
.katex .fontsize-ensurer.reset-size10.size2,.katex .katex-sizing.reset-size10.size2 {
  font-size: .2892960463em;
}
.katex .fontsize-ensurer.reset-size10.size3,.katex .katex-sizing.reset-size10.size3 {
  font-size: .337512054em;
}
.katex .fontsize-ensurer.reset-size10.size4,.katex .katex-sizing.reset-size10.size4 {
  font-size: .3857280617em;
}
.katex .fontsize-ensurer.reset-size10.size5,.katex .katex-sizing.reset-size10.size5 {
  font-size: .4339440694em;
}
.katex .fontsize-ensurer.reset-size10.size6,.katex .katex-sizing.reset-size10.size6 {
  font-size: .4821600771em;
}
.katex .fontsize-ensurer.reset-size10.size7,.katex .katex-sizing.reset-size10.size7 {
  font-size: .5785920926em;
}
.katex .fontsize-ensurer.reset-size10.size8,.katex .katex-sizing.reset-size10.size8 {
  font-size: .6943105111em;
}
.katex .fontsize-ensurer.reset-size10.size9,.katex .katex-sizing.reset-size10.size9 {
  font-size: .8331726133em;
}
.katex .fontsize-ensurer.reset-size10.size10,.katex .katex-sizing.reset-size10.size10 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size10.size11,.katex .katex-sizing.reset-size10.size11 {
  font-size: 1.1996142719em;
}
.katex .fontsize-ensurer.reset-size11.size1,.katex .katex-sizing.reset-size11.size1 {
  font-size: .2009646302em;
}
.katex .fontsize-ensurer.reset-size11.size2,.katex .katex-sizing.reset-size11.size2 {
  font-size: .2411575563em;
}
.katex .fontsize-ensurer.reset-size11.size3,.katex .katex-sizing.reset-size11.size3 {
  font-size: .2813504823em;
}
.katex .fontsize-ensurer.reset-size11.size4,.katex .katex-sizing.reset-size11.size4 {
  font-size: .3215434084em;
}
.katex .fontsize-ensurer.reset-size11.size5,.katex .katex-sizing.reset-size11.size5 {
  font-size: .3617363344em;
}
.katex .fontsize-ensurer.reset-size11.size6,.katex .katex-sizing.reset-size11.size6 {
  font-size: .4019292605em;
}
.katex .fontsize-ensurer.reset-size11.size7,.katex .katex-sizing.reset-size11.size7 {
  font-size: .4823151125em;
}
.katex .fontsize-ensurer.reset-size11.size8,.katex .katex-sizing.reset-size11.size8 {
  font-size: .578778135em;
}
.katex .fontsize-ensurer.reset-size11.size9,.katex .katex-sizing.reset-size11.size9 {
  font-size: .6945337621em;
}
.katex .fontsize-ensurer.reset-size11.size10,.katex .katex-sizing.reset-size11.size10 {
  font-size: .8336012862em;
}
.katex .fontsize-ensurer.reset-size11.size11,.katex .katex-sizing.reset-size11.size11 {
  font-size: 1em;
}
.katex .delimsizing.size1 {
  font-family: KaTeX_Size1;
}
.katex .delimsizing.size2 {
  font-family: KaTeX_Size2;
}
.katex .delimsizing.size3 {
  font-family: KaTeX_Size3;
}
.katex .delimsizing.size4 {
  font-family: KaTeX_Size4;
}
.katex .delimsizing.mult .delim-size1>span {
  font-family: KaTeX_Size1;
}
.katex .delimsizing.mult .delim-size4>span {
  font-family: KaTeX_Size4;
}
.katex .nulldelimiter {
  display: inline-block;
  width: .12em;
}
.katex .delimcenter,.katex .op-symbol {
  position: relative;
}
.katex .op-symbol.small-op {
  font-family: KaTeX_Size1;
}
.katex .op-symbol.large-op {
  font-family: KaTeX_Size2;
}
.katex .katex-accent>.vlist-t,.katex .op-limits>.vlist-t {
  text-align: center;
}
.katex .katex-accent .accent-body {
  position: relative;
}
.katex .katex-accent .accent-body:not(.accent-full) {
  width: 0;
}
.katex .katex-overlay {
  display: block;
}
.katex .mtable .vertical-separator {
  display: inline-block;
  min-width: 1px;
}
.katex .mtable .arraycolsep {
  display: inline-block;
}
.katex .mtable .col-align-c>.vlist-t {
  text-align: center;
}
.katex .mtable .col-align-l>.vlist-t {
  text-align: left;
}
.katex .mtable .col-align-r>.vlist-t {
  text-align: right;
}
.katex .svg-align {
  text-align: left;
}
.katex svg {
  fill: currentColor;
  stroke: currentColor;
  display: block;
  height: inherit;
  position: absolute;
  width: 100%;
}
.katex svg path {
  stroke: none;
}
.katex svg {
  fill-rule: nonzero;
  fill-opacity: 1;
  stroke-width: 1;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-miterlimit: 4;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  stroke-opacity: 1;
}
.katex img {
  border-style: none;
  max-height: none;
  max-width: none;
  min-height: 0;
  min-width: 0;
}
.katex .katex-stretchy {
  display: block;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.katex .katex-stretchy:after,.katex .katex-stretchy:before {
  content: "";
}
.katex .hide-tail {
  overflow: hidden;
  position: relative;
  width: 100%;
}
.katex .halfarrow-left {
  left: 0;
  overflow: hidden;
  position: absolute;
  width: 50.2%;
}
.katex .halfarrow-right {
  overflow: hidden;
  position: absolute;
  right: 0;
  width: 50.2%;
}
.katex .brace-left {
  left: 0;
  overflow: hidden;
  position: absolute;
  width: 25.1%;
}
.katex .brace-center {
  left: 25%;
  overflow: hidden;
  position: absolute;
  width: 50%;
}
.katex .brace-right {
  overflow: hidden;
  position: absolute;
  right: 0;
  width: 25.1%;
}
.katex .x-arrow-pad {
  padding: 0 .5em;
}
.katex .cd-arrow-pad {
  padding: 0 .55556em 0 .27778em;
}
.katex .mover,.katex .munder,.katex .x-arrow {
  text-align: center;
}
.katex .boxpad {
  padding: 0 .3em;
}
.katex .fbox,.katex .fcolorbox {
  border: .04em solid;
  box-sizing: border-box;
}
.katex .cancel-pad {
  padding: 0 .2em;
}
.katex .cancel-lap {
  margin-left: -.2em;
  margin-right: -.2em;
}
.katex .katex-sout {
  border-bottom-style: solid;
  border-bottom-width: .08em;
}
.katex .angl {
  border-right: .049em solid;
  border-top: .049em solid;
  box-sizing: border-box;
  margin-right: .03889em;
}
.katex .anglpad {
  padding: 0 .03889em;
}
.katex .reflectbox {
  display: inline-block;
  transform: scaleX(-1);
}
.katex .eqn-num:before {
  content: "(" counter(katexEqnNo) ")";
  counter-increment: katexEqnNo;
}
.katex .mml-eqn-num:before {
  content: "(" counter(mmlEqnNo) ")";
  counter-increment: mmlEqnNo;
}
.katex .mtr-glue {
  width: 50%;
}
.katex .cd-vert-arrow {
  display: inline-block;
  position: relative;
}
.katex .cd-label-left {
  display: inline-block;
  position: absolute;
  right: calc(50% + .3em);
  text-align: left;
}
.katex .cd-label-right {
  display: inline-block;
  left: calc(50% + .3em);
  position: absolute;
  text-align: right;
}
.katex-display {
  display: block;
  margin: 1em 0;
  text-align: center;
}
.katex-display>.katex {
  display: block;
  text-align: center;
  white-space: nowrap;
}
.katex-display>.katex>.katex-html {
  display: block;
  position: relative;
}
.katex-display>.katex>.katex-html>.katex-tag {
  position: absolute;
  right: 0;
}
.katex-display.leqno>.katex>.katex-html>.katex-tag {
  left: 0;
  right: auto;
}
.katex-display.fleqn>.katex {
  padding-left: 2em;
  text-align: left;
}
body {
  counter-reset: katexEqnNo mmlEqnNo;
}
.conversation-panel {
  position: relative;
  display: flex;
  grid-column: 3;
  grid-row: 1;
  min-width: 0;
  flex-direction: column;
  background: var(--openbot-bg-canvas);
  transition: padding-right var(--panel-resize-duration, var(--openbot-duration-overlay)) cubic-bezier(0.22, 1, 0.36, 1);
}
.direct-conversation {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 0;
  grid-column: 3;
  grid-row: 1;
  flex-direction: column;
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
}
.app-frame-with-server-rail .direct-conversation {
  grid-column: 4;
}
.direct-conversation-header {
  display: flex;
  height: 46px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--openbot-hover);
  padding: 0 14px;
}
.direct-conversation-person {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}
.direct-conversation-person .person-avatar {
  --agent-avatar-optical-offset: -8px;
  width: 30px;
  height: 30px;
  border-radius: var(--openbot-radius-md);
}
.direct-conversation-person .person-avatar > i {
  display: none;
}
.direct-conversation-person h1 {
  overflow: hidden;
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: 560;
  line-height: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.direct-conversation-person div > span {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 11px;
}
.direct-conversation-person div > span i {
  width: 5px;
  height: 5px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control-hover);
}
.direct-conversation-person div > span.online {
  color: var(--openbot-success);
}
.direct-conversation-person div > span.online i {
  background: var(--openbot-success);
}
.direct-private-label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--openbot-text-readable);
  font-size: var(--openbot-text-sm);
}
.direct-private-label svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}
.direct-message-list {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  padding: 22px max(18px, calc((100% - 760px) / 2)) 28px;
}
.direct-conversation-state, .direct-conversation-empty {
  display: grid;
  min-height: 100%;
  place-content: center;
  justify-items: center;
  color: var(--openbot-text-muted);
  text-align: center;
}
.direct-conversation-empty h2 {
  margin: 14px 0 4px;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-xl);
  font-weight: 560;
}
.direct-conversation-empty p {
  max-width: 290px;
  margin: 0;
  font-size: var(--openbot-text-sm);
  line-height: 17px;
}
.direct-message-list .ui-message-group {
  gap: 0;
}
.direct-message > .ui-message-content {
  max-width: min(560px, 78%);
}
.direct-message .ui-bubble {
  max-width: 100%;
}
.direct-message .ui-bubble-content {
  font-size: var(--openbot-text-md);
  line-height: 19px;
  white-space: pre-wrap;
}
.direct-message time {
  color: var(--openbot-text-readable);
  font-size: var(--openbot-text-sm);
}
.direct-message .ui-message-footer {
  padding: 0 2px;
}
.direct-composer-wrap {
  flex: 0 0 auto;
  padding: 0 max(18px, calc((100% - 760px) / 2)) 16px;
}
.direct-typing-indicator {
  display: flex;
  min-height: 20px;
  align-items: center;
  gap: 7px;
  padding: 0 10px 4px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.direct-message-error {
  margin: 0 8px 6px;
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
}
.direct-composer {
  display: flex;
  min-height: 46px;
  align-items: flex-end;
  gap: 8px;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  padding: 6px 7px 6px 13px;
  box-shadow: 0 8px 25px var(--openbot-shadow-popover-ambient);
}
.direct-composer:focus-within {
  border-color: var(--openbot-border-strong);
}
.direct-composer textarea {
  min-width: 0;
  min-height: 32px;
  max-height: 130px;
  flex: 1;
  resize: none;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 6px 0;
  color: var(--openbot-text-primary);
  font: inherit;
  font-size: var(--openbot-text-md);
  line-height: 20px;
}
.direct-composer textarea::placeholder {
  color: var(--openbot-text-muted);
}
.direct-composer > button {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-success);
  color: var(--openbot-success);
  font-size: var(--openbot-text-xl);
  font-weight: 650;
}
.direct-composer > button:disabled {
  background: var(--openbot-border);
  color: var(--openbot-text-dim);
}
.app-frame-with-server-rail .conversation-panel {
  grid-column: 4;
}
.conversation-header {
  display: flex;
  height: 38px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  border-bottom: 0;
  padding: 0 12px 0 8px;
  background: transparent;
}
.conversation-heading-group {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}
.chat-search {
  position: absolute;
  z-index: 13;
  top: 19px;
  right: 16px;
  display: flex;
  width: min(308px, calc(100% - 32px));
  height: 34px;
  align-items: center;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  box-shadow: var(--openbot-shadow-raised);
  color: var(--openbot-text-muted);
}
.chat-search-icon {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  margin-left: 11px;
  stroke-width: var(--openbot-icon-stroke);
}
.chat-search .chat-search-input {
  min-width: 0;
  height: var(--openbot-control-md);
  flex: 1;
  border: 0;
  background: transparent;
  padding: 0 8px;
  box-shadow: none;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
}
.chat-search .chat-search-input:focus {
  border: 0;
  box-shadow: none;
  outline: 0;
}
.chat-search-input::-webkit-search-cancel-button {
  display: none;
}
.chat-search-position {
  min-width: 38px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.chat-search-separator {
  width: 1px;
  height: 20px;
  flex: 0 0 auto;
  background: var(--openbot-border);
}
.chat-search .chat-search-button {
  width: 26px;
  height: var(--openbot-control-md);
  flex: 0 0 auto;
  border: 0;
  border-radius: inherit;
  padding: 0;
}
.chat-search-button svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: var(--openbot-icon-stroke);
}
.chat-search .chat-search-close {
  margin-right: 3px;
}
::highlight(openbot-chat-search-results) {
  background: var(--openbot-accent-soft);
}
::highlight(openbot-chat-search-current) {
  background: var(--openbot-warning);
  color: var(--openbot-text-on-light);
}
.conversation-title[aria-label="View agent settings"]:hover {
  color: var(--openbot-text-primary);
}
.browser-panel {
  position: absolute;
  z-index: 14;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  width: var(--browser-panel-width, 380px);
  flex-direction: column;
  border-left: 1px solid var(--openbot-border);
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
  transition: border-color var(--openbot-duration-slow) ease, box-shadow var(--openbot-duration-slow) ease;
}
.file-preview-panel.t-panel-slide {
  --panel-translate-x: 24px;
  --panel-translate-y: 0px;
  transition: transform var(--panel-close-dur) var(--panel-ease), opacity var(--panel-close-dur) var(--panel-ease), filter var(--panel-close-dur) var(--panel-ease), border-color var(--openbot-duration-slow) ease, box-shadow var(--openbot-duration-slow) ease;
}
.file-preview-panel.t-panel-slide[data-open="true"] {
  transition: transform var(--panel-open-dur) var(--panel-ease), opacity var(--panel-open-dur) var(--panel-ease), filter var(--panel-open-dur) var(--panel-ease), border-color var(--openbot-duration-slow) ease, box-shadow var(--openbot-duration-slow) ease;
}
.file-preview-header {
  display: flex;
  height: 39px;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--openbot-border);
  padding: 0 7px 0 11px;
}
.file-preview-header h2 {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-preview-copy svg {
  width: 15px;
  height: 15px;
  stroke-width: 2;
}
.file-preview-file-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  stroke-width: var(--openbot-icon-stroke);
}
.file-preview-content {
  min-height: 0;
  flex: 1;
  overflow: auto;
  background: var(--openbot-bg-canvas);
}
.markdown-file-preview {
  min-width: 0;
}
.file-preview-markdown {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 26px 48px;
  color: var(--openbot-text-primary);
  overflow-wrap: anywhere;
}
.file-preview-markdown > .message-markdown {
  font-size: var(--openbot-text-md);
  line-height: 1.6;
}
.file-preview-markdown-status {
  min-width: 0;
  margin: 0;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface);
  padding: 18px 20px;
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  line-height: 1.55;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.file-preview-text {
  min-width: min-content;
  min-height: 100%;
  margin: 0;
  padding: 18px 20px 48px;
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  line-height: 1.55;
  tab-size: 2;
  white-space: pre;
}
.file-preview-text-wrap {
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.file-preview-image-wrap {
  display: grid;
  min-height: 100%;
  padding: 20px;
  place-items: center;
}
.file-preview-image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.file-preview-pdf {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--openbot-bg-canvas);
}
.file-preview-audio {
  display: block;
  width: calc(100% - 40px);
  margin: 20px;
}
.file-preview-video {
  display: block;
  width: 100%;
  max-height: 100%;
  background: var(--openbot-bg-canvas);
  object-fit: contain;
}
.file-preview-spreadsheet {
  min-width: 0;
  min-height: 100%;
  padding: 20px;
  color: var(--openbot-text-primary);
}
.file-preview-spreadsheet-status {
  margin: 0;
  color: var(--openbot-text-muted);
  font-family: var(--openbot-font-mono);
  white-space: pre-wrap;
}
.file-preview-spreadsheet-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  overflow-x: auto;
}
.file-preview-spreadsheet-tabs button {
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-control);
  padding: 6px 10px;
  color: var(--openbot-text-muted);
  white-space: nowrap;
}
.file-preview-spreadsheet-tabs button[aria-pressed="true"] {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-primary);
}
.file-preview-spreadsheet-table-wrap {
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface);
}
.file-preview-spreadsheet-table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: var(--openbot-text-sm);
}
.file-preview-spreadsheet-table caption {
  padding: 10px 12px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-align: left;
}
.file-preview-spreadsheet-table th, .file-preview-spreadsheet-table td {
  border-top: 1px solid var(--openbot-border);
  border-right: 1px solid var(--openbot-border);
  padding: 8px 12px;
  text-align: left;
  white-space: pre;
}
.file-preview-spreadsheet-table th {
  background: var(--openbot-bg-control);
  font-weight: 600;
}
.file-preview-spreadsheet-table td:last-child, .file-preview-spreadsheet-table th:last-child {
  border-right: 0;
}
.file-preview-spreadsheet-note {
  margin: 10px 0 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.file-preview-unsupported {
  display: grid;
  min-height: 100%;
  place-content: center;
  justify-items: center;
  gap: 8px;
  padding: 24px;
  color: var(--openbot-text-muted);
  text-align: center;
}
.file-preview-unsupported > svg {
  width: 28px;
  height: 28px;
  margin-bottom: 4px;
}
.file-preview-unsupported strong {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
}
.file-preview-unsupported span {
  max-width: 260px;
  font-size: var(--openbot-text-sm);
  line-height: 1.45;
}
.file-preview-unsupported button {
  margin-top: 6px;
}
.file-preview-truncated {
  position: sticky;
  bottom: 0;
  margin: 0;
  border-top: 1px solid var(--openbot-border);
  background: var(--openbot-bg-control);
  padding: 7px 12px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-align: center;
}
.browser-pip-window {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
}
.browser-pip-surface {
  width: 100%;
  height: 100%;
}
.file-preview-folder {
  display: grid;
  margin: 0;
  padding: 8px;
  list-style: none;
}
.file-preview-folder-entry {
  display: grid;
  width: 100%;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  justify-content: stretch;
  padding: 6px 10px;
  font-size: var(--openbot-text-sm);
  text-align: left;
}
.file-preview-folder-name {
  overflow: hidden;
  color: var(--openbot-text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-preview-folder-meta {
  color: var(--openbot-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.file-preview-folder-empty {
  margin: 0;
  padding: 24px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-align: center;
}
.conversation-panel.browser-panel-active {
  padding-right: var(--browser-panel-width, 380px);
}
.remote-desktop-workspace {
  position: fixed;
  z-index: var(--openbot-layer-toast);
  inset: 0;
  display: flex;
  min-width: 0;
  flex-direction: column;
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity var(--openbot-duration-fast) cubic-bezier(0.2, 0, 0, 1), visibility 0s linear var(--openbot-duration-fast);
}
.remote-desktop-workspace-visible {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0s;
}
.remote-desktop-workspace:focus {
  outline: none;
}
.remote-desktop-header {
  display: flex;
  height: 38px;
  min-height: 38px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  border-bottom: 1px solid var(--openbot-border);
  padding: 0 8px 0 0;
  background: var(--openbot-bg-sidebar);
}
.remote-desktop-workspace-darwin .remote-desktop-header {
  padding-left: 84px;
}
.remote-desktop-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  flex: 0 1 auto;
  justify-content: flex-end;
  gap: 4px;
  margin-left: auto;
  white-space: nowrap;
}
.remote-desktop-display-controls {
  min-width: 0;
  display: flex;
  flex: 0 1 168px;
  align-items: center;
}
.remote-desktop-back-button, .remote-desktop-disconnect-button {
  flex: 0 0 auto;
}
.remote-desktop-disconnect-button {
  color: var(--openbot-text-muted);
}
.remote-desktop-disconnect-button:hover:not(:disabled, [aria-disabled="true"]), .remote-desktop-disconnect-button:focus-visible:not(:disabled, [aria-disabled="true"]) {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
}
.remote-desktop-stage {
  position: relative;
  min-height: 0;
  flex: 1;
  overflow: hidden;
  background: var(--openbot-accent);
}
.remote-desktop-viewer, .remote-desktop-viewer > div {
  width: 100%;
  height: 100%;
}
.remote-desktop-viewer {
  overflow: hidden;
  display: block;
  object-fit: contain;
}
.remote-desktop-display-select {
  width: min(168px, 22vw);
  min-width: 112px;
  flex: 0 1 168px;
  font-size: var(--openbot-text-sm);
}
.remote-desktop-display-select-content {
  z-index: calc(var(--openbot-layer-toast) + 1);
}
.remote-desktop-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
  background: var(--openbot-bg-overlay);
  padding: 24px;
  text-align: center;
}
.remote-desktop-overlay strong {
  max-width: 330px;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: 600;
}
.remote-desktop-connecting-avatar {
  width: 56px;
  height: 56px;
  margin-bottom: 5px;
  filter: drop-shadow(0 8px 18px var(--openbot-accent-soft));
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity var(--openbot-duration-overlay) var(--openbot-ease-out), transform var(--openbot-duration-overlay) var(--openbot-ease-out);
  will-change: opacity, transform;
}
@starting-style {
  .remote-desktop-connecting-avatar {
    opacity: 0;
    transform: translateY(4px) scale(0.96);
  }
}
.remote-desktop-overlay > span:not(.ui-spinner):not(.remote-desktop-empty-mark) {
  max-width: 330px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
}
.remote-desktop-empty-mark {
  display: grid;
  width: 38px;
  height: 38px;
  margin-bottom: 5px;
  place-items: center;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-hover);
  color: var(--openbot-text-muted);
}
.remote-desktop-empty-mark svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}
.remote-desktop-overlay > button {
  height: 34px;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-border);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: 600;
}
.remote-desktop-overlay > button:hover {
  background: var(--openbot-border-strong);
}
.remote-desktop-overlay > button {
  min-width: 92px;
  margin-top: 5px;
  padding: 0 13px;
}
.remote-desktop-button-dot {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 5px;
  height: 5px;
  border: 1px solid var(--openbot-bg-sidebar);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success);
}
.browser-pip-controls-document, .browser-pip-controls-document body, .browser-pip-controls-document #root {
  background: transparent;
}
.browser-pip-hover-controls {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  padding: 4px;
  opacity: 0;
  transition: opacity var(--openbot-duration-fast) ease;
  -webkit-app-region: drag;
}
.browser-pip-hover-controls:hover, .browser-pip-hover-controls:focus-within, .browser-pip-window-hover .browser-pip-hover-controls {
  opacity: 1;
}
.browser-pip-hover-button {
  display: grid;
  width: 20px;
  height: 22px;
  flex: 0 0 20px;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  padding: 0;
  background: var(--openbot-bg-overlay);
  color: var(--openbot-text-secondary);
  -webkit-app-region: no-drag;
}
.browser-pip-hover-button:hover {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}
.browser-pip-hover-button .browser-toolbar-icon {
  width: 12px;
  height: 12px;
}
.browser-pip-hover-button:active {
  transform: scale(0.96);
  transition: transform var(--openbot-duration-fast) cubic-bezier(0.23, 1, 0.32, 1);
}
.browser-tab-control-icon {
  width: 12px;
  height: 12px;
  overflow: visible;
  fill: currentColor;
}
.browser-toolbar-button {
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--openbot-text-muted);
}
.browser-toolbar-button:hover:not(:disabled) {
  background: var(--openbot-border);
  color: var(--openbot-text-primary);
}
.browser-toolbar-button {
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  border-radius: var(--openbot-radius-sm);
}
.browser-toolbar-button:disabled {
  color: var(--openbot-text-dim);
  cursor: default;
}
.browser-toolbar-icon {
  width: 15px;
  height: 15px;
}
.browser-recording-status, .browser-diagnostic-status {
  display: inline-flex;
  height: 24px;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  border-radius: var(--openbot-radius-sm);
  padding: 0 5px;
  font-size: var(--openbot-text-sm);
  line-height: 1;
}
.browser-recording-status {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
}
.browser-diagnostic-status {
  background: var(--openbot-warning-soft);
  color: var(--openbot-warning);
}
.browser-recording-status svg, .browser-diagnostic-status svg {
  width: 12px;
  height: 12px;
}
.browser-surface {
  position: relative;
  min-height: 0;
  flex: 1;
  overflow: hidden;
  background: var(--openbot-bg-canvas);
}
.browser-live-view {
  position: absolute;
  inset: 0;
}
.browser-live-view canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.browser-empty-state {
  display: grid;
  height: 100%;
  place-content: center;
  gap: 5px;
  color: var(--openbot-text-muted);
  text-align: center;
}
.browser-empty-state strong {
  font-size: var(--openbot-text-lg);
  font-weight: 600;
}
.browser-empty-state span {
  font-size: var(--openbot-text-sm);
}
.agent-settings-avatar-picker {
  position: relative;
  z-index: 30;
  display: grid;
  width: 62px;
  height: 62px;
  margin: var(--openbot-space-2) auto var(--openbot-space-4);
  place-items: center;
}
.agent-settings-avatar {
  position: relative;
  display: grid;
  width: 62px;
  height: 62px;
  margin: 0;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  background: transparent;
}
.agent-settings-avatar .agent-avatar {
  --agent-avatar-optical-offset: calc(62px * -0.14);
  width: 62px;
  height: 62px;
}
.agent-settings-avatar .agent-avatar > svg {
  width: 128%;
  height: 128%;
}
.agent-settings-avatar:hover {
  filter: brightness(1.08);
}
.agent-settings-avatar-badge {
  position: absolute;
  right: -4px;
  bottom: -4px;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 3px solid var(--openbot-bg-canvas);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-primary);
}
.agent-settings-avatar-badge-icon {
  width: 11px;
  height: 11px;
}
.agent-routines-overlay {
  position: absolute;
  z-index: 2;
  top: 39px;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-y: auto;
  background: var(--openbot-bg-canvas);
}
.agent-routines-settings {
  min-height: 100%;
  padding: 12px 15px 28px;
}
.agent-routines-list, .agent-routine-run-list {
  display: grid;
}
.agent-routines-list {
  gap: 0;
}
.agent-routine-list-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px;
  align-items: center;
}
.agent-routine-row {
  display: grid;
  width: 100%;
  min-height: 48px;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  padding: 5px 7px;
  text-align: left;
  transition: border-color var(--openbot-duration-hover) ease, background-color var(--openbot-duration-hover) ease;
}
.agent-routine-row:focus-visible {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-hover);
}
.agent-routine-row > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 2px;
}
.agent-routine-row strong, .agent-routine-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-routine-row strong {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: 500;
}
.agent-routine-row small, .agent-routines-empty {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.agent-routine-action-buttons svg {
  width: 15px;
  height: 15px;
}
.agent-routine-status-icon-active, .agent-routine-status-icon-paused {
  display: grid;
  place-items: center;
}
.agent-routine-status-icon-active {
  color: var(--openbot-success);
}
.agent-routine-status-icon-paused {
  color: var(--openbot-text-muted);
}
.agent-routine-status-icon-active > svg, .agent-routine-status-icon-paused > svg {
  width: 14px;
  height: 14px;
  stroke-width: var(--openbot-icon-stroke);
}
@media (hover: hover) and (pointer: fine) {
  .agent-routine-row:hover {
    border-color: var(--openbot-border);
    background: var(--openbot-hover);
  }
}
.agent-routine-editor-actions {
  display: grid;
  gap: 11px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--openbot-border);
  padding-bottom: 16px;
}
.agent-routine-active-toggle, .agent-routine-action-buttons, .agent-routine-run-row {
  display: flex;
  align-items: center;
}
.agent-routine-active-toggle {
  justify-content: space-between;
}
.agent-routine-active-toggle > span {
  display: grid;
  gap: 2px;
}
.agent-routine-active-toggle strong {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
}
.agent-routine-active-toggle small {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.agent-routine-action-buttons {
  flex-wrap: wrap;
  gap: 7px;
}
.agent-routine-action-buttons button {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
  padding: 7px 9px;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.agent-routine-action-buttons button:hover:not(:disabled) {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}
.agent-routine-when, .agent-routine-history {
  margin-top: 24px;
}
.agent-routine-history {
  border-top: 1px solid var(--openbot-border);
  padding-top: 20px;
}
.agent-routine-run-list {
  margin-top: 10px;
}
.agent-routine-run-row {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  gap: 9px;
  border-bottom: 1px solid var(--openbot-border);
  padding: 9px 2px;
}
.agent-routines-overlay {
  top: 0;
  overflow: hidden;
}
.agent-routines-settings {
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
}
.agent-routines-header {
  width: 100%;
}
.agent-routines-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-0-5);
}
.agent-routines-body {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  padding: 14px 15px 28px;
  scrollbar-width: none;
}
.agent-routines-body::-webkit-scrollbar {
  display: none;
}
.agent-routine-editor {
  display: grid;
  gap: 14px;
}
.agent-routine-editor > .settings-field {
  margin-bottom: 0;
}
.agent-routine-editor-actions {
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  border: 0;
  padding: 0;
}
.agent-routine-active-toggle {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
}
.ui-switch-field.agent-routine-active-toggle {
  width: auto;
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.agent-routine-active-toggle .ui-switch-label {
  font-size: var(--openbot-text-sm);
  font-weight: inherit;
}
.agent-routine-action-buttons {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 7px;
}
.agent-routine-action-buttons button {
  min-height: 32px;
  border-radius: var(--openbot-radius-md);
  padding-inline: 11px;
  font-size: var(--openbot-text-sm);
}
.agent-routine-action-buttons .ui-button-variant-destructive {
  border-color: transparent;
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
}
.agent-routine-action-buttons .ui-button-variant-default {
  border-color: transparent;
  background: var(--openbot-surface-light);
  color: var(--openbot-text-on-light);
}
@media (hover: hover) and (pointer: fine) {
  .agent-routine-action-buttons .ui-button-variant-destructive:hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-danger-soft-hover);
    color: var(--openbot-danger);
  }
  .agent-routine-action-buttons .ui-button-variant-default:hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-surface-light);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--openbot-surface-light) 82%, transparent);
    }
    color: var(--openbot-text-on-light);
  }
}
.agent-routine-instruction-field textarea {
  height: 158px;
  min-height: 158px;
  max-height: 158px;
  overflow-y: auto;
  resize: none;
}
.agent-routine-history {
  margin-top: 2px;
}
.agent-routine-when {
  margin-top: 0;
}
.agent-routine-when h3, .agent-routine-history h3 {
  margin: 0 0 var(--openbot-space-1-5) var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  font-weight: inherit;
  line-height: var(--openbot-leading-md);
}
.agent-routine-event-filter {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) auto;
  align-items: center;
  gap: var(--openbot-space-2);
}
.agent-routine-history {
  border: 0;
  padding-top: 0;
}
.agent-routine-run-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-top: 0;
}
.agent-routine-run-row {
  display: flex;
  width: 100%;
  min-height: 32px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  padding: 5px var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  text-align: left;
}
.ui-button.agent-routine-run-link {
  cursor: pointer;
}
.agent-routine-run-text {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-wrap: wrap;
  gap: 0 var(--openbot-space-2);
  white-space: nowrap;
}
.agent-routine-run-note {
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-routine-history-error {
  margin-bottom: var(--openbot-space-2);
}
.agent-routine-run-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.agent-routine-delivery-row {
  display: flex;
  min-height: 28px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 var(--openbot-space-2) 5px;
  font-size: var(--openbot-text-sm);
}
.agent-routine-delivery-note {
  min-width: 0;
  color: var(--openbot-text-muted);
  overflow-wrap: anywhere;
  white-space: normal;
}
.agent-routine-delivery-failed, .agent-routine-delivery-uncertain {
  color: var(--openbot-warning);
}
@media (hover: hover) and (pointer: fine) {
  .ui-button.agent-routine-run-link:hover:not(:disabled) {
    background: var(--openbot-bg-control-hover);
  }
}
.agent-routine-run-icon {
  display: grid;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  place-items: center;
  color: var(--openbot-text-muted);
}
.agent-routine-run-icon > svg {
  width: 16px;
  height: 16px;
  stroke-width: var(--openbot-icon-stroke);
}
.agent-routine-run-icon-succeeded {
  color: var(--openbot-success);
}
.agent-routine-run-icon-failed {
  color: var(--openbot-danger);
}
.agent-routine-run-icon-needs-attention {
  color: var(--openbot-warning);
}
.agent-routine-run-icon-running, .agent-routine-run-icon-queued, .agent-routine-run-icon-interrupted, .agent-routine-run-icon-cancelled {
  color: var(--openbot-text-muted);
}
.agent-memories-overlay[data-closed] {
  animation: agent-dialog-overlay-out var(--openbot-duration-dialog) ease;
}
.agent-memories-modal {
  position: fixed;
  z-index: calc(var(--openbot-layer-dialog) + 1);
  top: 50%;
  left: 50%;
  width: min(560px, calc(100vw - 48px));
  height: min(456px, calc(100dvh - 48px));
  min-height: 320px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  outline: 0;
  background: var(--openbot-bg-control);
  color: var(--openbot-text-primary);
  transform: translate(-50%, -50%);
  transform-origin: center;
}
.agent-memories-header {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  border-bottom: 1px solid var(--openbot-border);
  padding: var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-3);
}
.agent-memories-heading {
  min-width: 0;
}
.agent-skills-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-1);
}
.agent-skills-parent {
  min-width: 0;
  height: auto;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--openbot-text-muted);
  padding: 0;
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-lg);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-skills-crumb {
  flex: 0 0 auto;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
}
.agent-skills-heading h2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-memories-heading h2 {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-lg);
}
.agent-memories-header-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--openbot-space-1);
}
.agent-memories-header-actions svg, .agent-memory-delete-button svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.agent-memories-add-button {
  color: var(--openbot-text-secondary);
}
.agent-memories-body {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: var(--openbot-space-2);
}
.agent-memory-composer {
  display: grid;
  gap: var(--openbot-space-2);
  margin: 0 0 var(--openbot-space-3);
  padding: var(--openbot-space-1) var(--openbot-space-1) 0;
}
.agent-memory-input {
  min-height: 64px;
  resize: none;
  border-color: var(--openbot-border);
  background: transparent;
}
.agent-memory-input:focus-visible {
  border-color: var(--openbot-border-strong);
  outline: 0;
  box-shadow: none;
}
.agent-memory-composer-actions, .agent-memory-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-1);
}
.agent-memory-inclusion-actions {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-1);
}
.agent-memory-list {
  min-height: 0;
  display: grid;
  grid-auto-rows: max-content;
  flex: 1;
  align-content: start;
  gap: var(--openbot-space-0-5);
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  scrollbar-width: none;
}
.agent-memory-row {
  min-height: 50px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--openbot-control-md) + var(--openbot-space-2));
  align-items: stretch;
  border-radius: var(--openbot-radius-md);
  overflow: hidden;
  background: transparent;
}
@media (hover: hover) and (pointer: fine) {
  .agent-memory-row:hover {
    background: var(--openbot-bg-control-hover);
  }
}
.agent-memory-row:has(.agent-memory-row-main:focus-visible) {
  background: var(--openbot-bg-control-active);
}
.agent-memory-row-main {
  min-width: 0;
  width: 100%;
  height: 100%;
  display: grid;
  align-content: center;
  justify-content: stretch;
  justify-items: start;
  gap: var(--openbot-space-1);
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  padding: var(--openbot-space-2) var(--openbot-space-3);
  color: inherit;
  font: inherit;
  text-align: left;
}
.agent-memory-row-main:focus-visible {
  box-shadow: none;
}
.agent-memory-row .agent-memory-row-main:hover {
  background: transparent;
}
.agent-memory-text {
  display: block;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  white-space: pre-wrap;
}
.agent-memory-meta {
  display: block;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.agent-memory-delete-button {
  align-self: center;
  align-items: center;
  justify-self: center;
  color: var(--openbot-text-muted);
}
.agent-memory-editor {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--openbot-space-2);
  background: transparent;
  padding: var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-2);
}
.agent-memory-row:has(.agent-memory-editor), .agent-memory-row:has(.agent-memory-editor):hover {
  background: transparent;
}
.agent-memory-state, .agent-memory-limit, .agent-memory-error {
  margin: var(--openbot-space-1);
  border-radius: var(--openbot-radius-md);
  padding: var(--openbot-space-3);
  font-size: var(--openbot-text-sm);
}
.agent-memory-state {
  min-height: 160px;
  display: grid;
  place-items: center;
  color: var(--openbot-text-muted);
  text-align: center;
}
.agent-memory-limit {
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-secondary);
}
.agent-memory-error {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
}
.shared-table-list {
  min-height: 0;
  display: grid;
  flex: 1;
  align-content: start;
  gap: var(--openbot-space-0-5);
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  scrollbar-width: none;
}
.shared-table-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
  padding: var(--openbot-space-2) var(--openbot-space-3);
}
.shared-table-main {
  min-width: 0;
  display: grid;
  gap: var(--openbot-space-1);
}
.shared-table-name {
  display: block;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-md);
}
.shared-table-confirm {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface);
  padding: var(--openbot-space-3);
}
.shared-table-confirm p {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.shared-table-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-1);
}
.agent-memories-footer {
  display: flex;
  min-height: 48px;
  align-items: center;
  padding: var(--openbot-space-2) var(--openbot-space-3) var(--openbot-space-3);
}
.agent-skill-empty {
  min-height: 160px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--openbot-space-3);
}
.agent-skill-empty .agent-memory-state {
  min-height: 0;
  padding: 0;
}
.agent-skill-rows {
  display: grid;
  align-content: start;
  gap: 2px;
}
.agent-skill-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--openbot-space-2);
  min-height: 56px;
  padding: var(--openbot-space-1) var(--openbot-space-2);
  border-radius: var(--openbot-radius-lg);
}
.agent-skill-open {
  min-width: 0;
  height: auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  justify-content: stretch;
  justify-items: stretch;
  align-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-1);
  color: inherit;
  text-align: left;
}
.agent-skill-open:hover {
  background: transparent;
}
@media (hover: hover) and (pointer: fine) {
  .agent-skill-row:hover {
    background: var(--openbot-bg-control-hover);
  }
}
.agent-skill-icon {
  width: 40px;
  height: 40px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  color: var(--openbot-accent-text);
}
.agent-skill-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.agent-skill-icon svg {
  width: 20px;
  height: 20px;
}
.agent-skill-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.agent-skill-title {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: var(--openbot-space-2);
}
.agent-skill-title strong {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-skill-row:has(.agent-skill-update) {
  grid-template-columns: minmax(0, 1fr) auto auto auto;
}
.ui-button.agent-skill-update {
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
  font-size: var(--openbot-text-sm);
}
.ui-button.agent-skill-update:hover:not(:disabled):not([data-disabled]), .ui-button.agent-skill-update:focus-visible {
  background: var(--openbot-accent-soft);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-accent-soft), var(--openbot-accent) 12%);
  }
  color: var(--openbot-accent-text);
}
.agent-skill-copy small {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-skill-row-disabled .agent-skill-title strong {
  color: var(--openbot-text-muted);
}
.agent-skill-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-secondary);
  opacity: 0;
  cursor: pointer;
}
.agent-skill-more svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.agent-skill-row:hover .agent-skill-more, .agent-skill-row:focus-within .agent-skill-more, .agent-skill-row:has([aria-expanded="true"]) .agent-skill-more {
  opacity: 1;
}
.agent-skill-menu {
  z-index: calc(var(--openbot-layer-dialog) + var(--openbot-layer-popover) + 1);
}
.agent-skills-modal .ui-switch[data-checked] {
  background: var(--openbot-accent);
}
.agent-skills-modal .ui-switch-thumb[data-checked] {
  background: var(--openbot-text-primary);
}
.agent-local-library, .agent-skill-detail {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: var(--openbot-space-4);
  overflow: auto;
  padding: var(--openbot-space-3);
  scrollbar-width: none;
}
.agent-local-library::-webkit-scrollbar, .agent-skill-detail::-webkit-scrollbar {
  display: none;
}
.agent-memories-modal[data-expanded] {
  animation: agent-dialog-content-in var(--openbot-duration-dialog) ease;
}
.agent-memories-modal[data-closed] {
  animation: agent-dialog-content-out var(--openbot-duration-dialog) ease;
}
@keyframes agent-dialog-overlay-out {
  to {
    opacity: 0;
  }
}
@keyframes agent-dialog-content-in {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
  }
}
@keyframes agent-dialog-content-out {
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
  }
}
@media (max-width: 520px) {
  .agent-memories-modal {
    width: calc(100vw - 24px);
    height: calc(100dvh - 24px);
  }
  .agent-memories-header {
    padding-left: var(--openbot-space-3);
  }
}
@media (prefers-reduced-motion: reduce) {
  .agent-memories-overlay, .agent-memories-modal {
    animation: none;
  }
}
.agent-settings-page {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
}
.agent-settings-page > .settings-field {
  margin: 0;
}
.agent-settings-switch-row {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  padding: 0 var(--openbot-space-3);
}
.agent-settings-switch-row > .settings-link-label {
  flex: 1 1 auto;
}
.agent-settings-runtime-rows .provider-model-trigger-field, .agent-settings-runtime-rows .agent-settings-runtime-row {
  width: 100%;
  height: auto;
  min-height: 40px;
  gap: var(--openbot-space-2);
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 var(--openbot-space-3);
  box-shadow: none;
  font-size: var(--openbot-text-md);
}
.agent-settings-runtime-rows .provider-model-trigger-field:hover:not(:disabled), .agent-settings-runtime-rows .provider-model-trigger-field[aria-expanded="true"], .agent-settings-runtime-rows .agent-settings-runtime-row[data-expanded] {
  background: var(--openbot-hover);
}
.agent-settings-runtime-rows .provider-model-trigger-field:focus-visible, .agent-settings-runtime-rows .ui-select .agent-settings-runtime-row:focus-visible {
  outline: 0;
  background: var(--openbot-hover);
  box-shadow: inset 0 0 0 1px var(--openbot-border-focus);
}
.agent-settings-runtime-rows .provider-model-trigger-field .provider-model-field-label, .agent-settings-runtime-label {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: 18px;
  text-align: left;
}
.agent-settings-runtime-rows .provider-model-trigger-field .provider-model-trigger-name, .agent-settings-runtime-row .ui-select-value {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
}
.agent-settings-runtime-row .ui-select-trigger-icon {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
@media (hover: hover) and (pointer: fine) {
  .agent-settings-runtime-rows .provider-model-trigger-field:hover .provider-model-trigger-name, .agent-settings-runtime-row:hover .ui-select-value {
    color: var(--openbot-text-secondary);
  }
}
.agent-settings-runtime-rows .provider-model-popover {
  width: var(--kb-popper-anchor-width);
  min-width: 0;
}
.agent-settings-runtime-path {
  display: grid;
  gap: 2px;
  padding: 11px var(--openbot-space-3);
}
.agent-settings-runtime-path > span:last-child {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 17px;
  overflow-wrap: anywhere;
  user-select: text;
}
.agent-settings-runtime-note {
  margin: 0;
  padding-inline: var(--openbot-space-1);
  text-wrap: pretty;
}
.agent-settings-save-error {
  margin: 0 var(--openbot-space-1);
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
}
.agent-settings-notifications {
  display: flex;
  min-height: 70px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-border);
  padding: 13px 12px;
}
.agent-settings-notifications > div {
  min-width: 0;
}
.agent-settings-notifications strong, .agent-settings-notifications span {
  display: block;
}
.agent-settings-notifications strong {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: 500;
  line-height: 18px;
}
.agent-settings-notifications div > span {
  max-width: 194px;
  margin-top: 2px;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: 15px;
}
.routine-trigger-row, .routine-weekday-strip, .routine-calendar-days {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}
:is(.routine-schedule-picker, .routine-popover, .routine-chip-select-content) :is(button, input, textarea):focus-visible {
  outline: 0;
}
:is(.routine-schedule-picker, .routine-popover) .ui-button:focus-visible {
  box-shadow: var(--openbot-focus-ring);
}
.routine-schedule-picker {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-1-5);
}
.routine-trigger-row {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: var(--openbot-space-2);
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-shadow-popover-ambient);
  padding: var(--openbot-space-1);
  transition: border-color var(--openbot-duration-hover) ease;
}
.routine-trigger-row:focus-within {
  border-color: var(--openbot-text-muted);
}
.routine-schedule-picker[data-density="card"] .routine-trigger-row {
  border: 0;
  background: none;
  padding: 0;
}
.routine-trigger-icon {
  display: inline-flex;
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
  color: var(--openbot-text-on-accent);
}
.routine-trigger-icon svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: 2;
}
.routine-schedule-picker[data-density="panel"] .routine-trigger-icon {
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
}
.routine-schedule-picker[data-density="card"] .routine-trigger-icon {
  display: none;
}
.routine-trigger-chips {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: var(--openbot-space-2);
  overflow: clip;
  overflow-clip-margin: var(--openbot-space-1);
}
.routine-trigger-phrase {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--openbot-space-2);
}
.routine-trigger-phrase-flexible {
  min-width: 0;
  flex-shrink: 1;
}
.routine-connector {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
.routine-chip-select {
  width: auto;
  flex: 0 0 auto;
}
.routine-chip-select-flexible {
  min-width: 0;
  flex-shrink: 1;
}
.routine-chip {
  display: inline-flex;
  height: var(--openbot-control-md);
  min-width: 0;
  max-width: 100%;
  align-items: center;
  gap: var(--openbot-space-1-5);
  cursor: pointer;
  border: 0;
  border-radius: var(--openbot-radius-md);
  outline: 0;
  background: var(--openbot-bg-control-active);
  padding: 0 var(--openbot-space-3);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
  white-space: nowrap;
  flex: 0 0 auto;
  transition: background-color var(--openbot-duration-hover) ease;
}
.routine-chip-flexible {
  flex-shrink: 1;
}
.routine-chip-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.routine-schedule-picker[data-density="panel"] .routine-chip {
  height: var(--openbot-control-sm);
  border-radius: var(--openbot-radius-xs);
}
.routine-schedule-picker[data-density="card"] .routine-chip {
  height: var(--openbot-control-sm);
  padding: 0 var(--openbot-space-2);
  font-size: var(--openbot-text-md);
}
.routine-chip:focus-visible {
  box-shadow: var(--openbot-focus-ring);
}
.routine-chip:is([aria-expanded="true"], [data-expanded]) {
  background: var(--openbot-bg-control-hover);
  box-shadow: 0 0 0 1px var(--openbot-border-strong);
}
.routine-chip:disabled, .routine-chip[data-disabled] {
  cursor: default;
  background: transparent;
  padding: 0;
  color: var(--openbot-text-secondary);
}
@media (hover: hover) and (pointer: fine) {
  .routine-chip:hover:not(:disabled, [data-disabled]) {
    background: var(--openbot-bg-control-hover);
    box-shadow: 0 0 0 1px var(--openbot-border-strong);
  }
}
.routine-chip-select-content {
  min-width: 160px;
}
.routine-chip-select-content .ui-select-item {
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
.routine-cron-input {
  min-width: 0;
  max-width: 220px;
  flex: 1 1 180px;
  font-family: var(--openbot-font-mono);
}
.routine-schedule-hint {
  margin: 0;
  padding-left: var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.routine-schedule-picker[data-density="card"] .routine-schedule-hint {
  padding-left: 0;
}
.routine-popover {
  z-index: var(--openbot-layer-popover);
  border-radius: var(--openbot-radius-lg);
  padding: var(--openbot-space-2);
}
.routine-weekday-strip {
  display: flex;
  gap: var(--openbot-space-1);
}
.routine-day-item {
  display: inline-flex;
}
.routine-day {
  display: inline-flex;
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  min-width: 0;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--openbot-radius-pill);
  padding: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.routine-day-item:has(:focus-visible) .routine-day {
  box-shadow: var(--openbot-focus-ring);
}
.routine-weekday-strip .routine-day {
  background: var(--openbot-bg-control-active);
}
@media (hover: hover) and (pointer: fine) {
  .routine-day:hover:not(:disabled, .routine-day-selected) {
    background: var(--openbot-hover);
    color: var(--openbot-text-primary);
  }
}
.routine-day.routine-day-selected, .routine-day.routine-day-selected:hover {
  background: var(--openbot-text-primary);
  color: var(--openbot-bg-canvas);
}
.routine-day.routine-day-selected:focus-visible {
  box-shadow: var(--openbot-focus-ring);
}
.routine-clock-input {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
}
.routine-clock-segment.ui-input {
  width: 48px;
  height: var(--openbot-control-lg);
  border: 0;
  background: var(--openbot-bg-control-active);
  padding: 0;
  font-size: var(--openbot-text-lg);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.routine-clock-segment.ui-input:focus-visible {
  box-shadow: var(--openbot-focus-ring);
}
.routine-clock-separator {
  color: var(--openbot-text-muted);
}
.routine-segmented {
  display: flex;
  margin-left: var(--openbot-space-1);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control-active);
  padding: var(--openbot-space-0-5);
}
.routine-segmented-control {
  display: inline-flex;
  height: calc(var(--openbot-control-lg) - 2 * var(--openbot-space-0-5));
  min-width: 44px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--openbot-radius-sm);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.routine-segmented-control label {
  cursor: pointer;
}
.routine-segmented-control[data-checked] {
  background: var(--openbot-text-primary);
  color: var(--openbot-bg-canvas);
}
.routine-segmented-item:has(:focus-visible) .routine-segmented-control {
  box-shadow: var(--openbot-focus-ring);
}
.routine-window-menu {
  display: grid;
  width: 240px;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-1);
}
.routine-window-options {
  display: grid;
  gap: var(--openbot-space-0-5);
}
.routine-window-repeat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  border-top: 1px solid var(--openbot-border);
  padding: var(--openbot-space-2) var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-3);
}
.routine-window-repeat-label {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
.routine-window-option-control {
  display: flex;
  min-height: var(--openbot-control-lg);
  align-items: center;
  gap: var(--openbot-space-2);
  cursor: pointer;
  border-radius: var(--openbot-radius-md);
  padding: var(--openbot-space-2) var(--openbot-space-3);
}
.routine-window-option-control[data-checked] {
  background: var(--openbot-hover);
}
.routine-window-option:has(:focus-visible) .routine-window-option-control {
  box-shadow: var(--openbot-focus-ring);
}
@media (hover: hover) and (pointer: fine) {
  .routine-window-option-control:hover {
    background: var(--openbot-hover);
  }
}
.routine-window-option-label {
  flex: 1;
  cursor: pointer;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
.routine-window-option-check {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
}
.routine-window-option-check svg {
  width: 100%;
  height: 100%;
}
.routine-window-range {
  display: grid;
  gap: var(--openbot-space-1-5);
  padding: var(--openbot-space-1) var(--openbot-space-3) var(--openbot-space-2);
}
.routine-window-range-times {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.routine-window-range-count {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.routine-calendar {
  display: grid;
  width: calc(7 * var(--openbot-control-md) + 6 * var(--openbot-space-0-5));
  gap: var(--openbot-space-1);
}
.routine-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--openbot-space-1);
}
.routine-calendar-title {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.routine-calendar-weekdays, .routine-calendar-days {
  display: grid;
  grid-template-columns: repeat(7, var(--openbot-control-md));
  gap: var(--openbot-space-0-5);
}
.routine-calendar-weekdays span {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-align: center;
}
.routine-calendar-day:focus-visible {
  box-shadow: var(--openbot-focus-ring);
}
.routine-calendar-day[aria-current="date"]:not(.routine-day-selected) {
  color: var(--openbot-accent-text);
}
.routine-calendar-day:disabled {
  cursor: default;
  opacity: 0.32;
}
.routine-schedule-picker:not([data-fit="roomy"]) .routine-trigger-chips {
  gap: var(--openbot-space-1-5);
}
.routine-schedule-picker:not([data-fit="roomy"]) .routine-trigger-phrase {
  gap: var(--openbot-space-1);
}
.routine-schedule-picker:not([data-fit="roomy"]) .routine-connector {
  font-size: var(--openbot-text-md);
}
.routine-schedule-picker[data-density="panel"]:not([data-fit="roomy"]) .routine-trigger-row {
  gap: var(--openbot-space-1-5);
}
.routine-schedule-picker[data-density="panel"]:not([data-fit="roomy"]) .routine-trigger-icon svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.routine-schedule-picker[data-density="panel"]:not([data-fit="roomy"]) .routine-chip {
  gap: var(--openbot-space-1);
  padding: 0 var(--openbot-space-2);
  font-size: var(--openbot-text-md);
}
.routine-schedule-picker[data-density="panel"]:is([data-fit="tight"], [data-fit="minimal"]) .routine-connector-optional {
  display: none;
}
.routine-schedule-picker[data-density="panel"]:is([data-fit="tight"], [data-fit="minimal"]) :is(.routine-trigger-row, .routine-trigger-chips) {
  gap: var(--openbot-space-1);
}
.routine-schedule-picker[data-density="panel"]:is([data-fit="tight"], [data-fit="minimal"]) .routine-trigger-icon {
  width: var(--openbot-control-xs);
  height: var(--openbot-control-xs);
  align-self: center;
}
.routine-schedule-picker[data-density="panel"]:is([data-fit="tight"], [data-fit="minimal"]) .routine-chip {
  padding: 0 var(--openbot-space-1-5);
}
.routine-schedule-picker[data-fit="minimal"] :is(.routine-trigger-icon, .routine-connector) {
  display: none;
}
.routine-schedule-picker[data-fit="minimal"] .routine-trigger-chips {
  gap: var(--openbot-space-1);
}
.routine-trigger-action {
  display: inline-flex;
  flex: 0 0 auto;
  align-self: center;
  margin-inline-start: calc(var(--openbot-space-1) * -1);
}
.routine-trigger-action:empty {
  display: none;
}
:is(.routine-trigger-row, .routine-trigger-card-header) .routine-trigger-action .ui-button {
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
  border-radius: var(--openbot-radius-xs);
}
.routine-trigger-card {
  display: grid;
  min-width: 0;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-shadow-popover-ambient);
}
.routine-trigger-card-header {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-3);
}
:is(.routine-trigger-card-header, .routine-trigger-menu) .routine-trigger-icon {
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
}
.routine-trigger-card-title {
  min-width: 0;
  flex: 1;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  text-box: trim-both ex alphabetic;
}
.routine-webhook-field {
  display: grid;
  min-height: calc(var(--openbot-control-sm) + var(--openbot-space-2) + 1px);
  grid-template-columns: minmax(84px, auto) minmax(0, 1fr) var(--openbot-control-sm);
  align-items: center;
  gap: var(--openbot-space-3);
  border: 0;
  border-top: 1px solid var(--openbot-border);
  margin: 0;
  background: none;
  padding: var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-3);
  color: inherit;
  font: inherit;
  text-align: left;
}
.routine-webhook-label {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  white-space: nowrap;
}
.routine-webhook-value {
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
code.routine-webhook-value {
  font-family: inherit;
}
code.routine-webhook-secret {
  padding-block: var(--openbot-space-1-5);
  font-family: var(--openbot-font-mono);
  overflow-wrap: anywhere;
  white-space: normal;
}
.routine-webhook-field > :last-child {
  justify-self: center;
}
.routine-webhook-field > .ui-icon-button {
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
}
.routine-webhook-field.routine-webhook-events-toggle {
  width: auto;
  min-width: 0;
  height: auto;
  justify-content: stretch;
  border-radius: 0 0 calc(var(--openbot-radius-md) - 1px) calc(var(--openbot-radius-md) - 1px);
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.routine-webhook-field.routine-webhook-events-toggle[aria-expanded="true"] {
  background: none;
}
.routine-webhook-field.routine-webhook-events-toggle:hover {
  background: var(--openbot-bg-control-hover);
}
.routine-webhook-events-toggle:focus-visible {
  outline: 0;
  box-shadow: var(--openbot-focus-ring);
}
.routine-webhook-events-toggle > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: var(--openbot-icon-stroke);
  color: var(--openbot-text-muted);
}
.ui-text.routine-webhook-value {
  white-space: normal;
}
.routine-webhook-note {
  padding: 0 var(--openbot-space-3) var(--openbot-space-2);
}
.routine-trigger-card-header + .routine-webhook-note {
  border-top: 1px solid var(--openbot-border);
  padding-top: var(--openbot-space-2);
}
.routine-webhook-secret-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.routine-webhook-events {
  display: grid;
  gap: var(--openbot-space-3);
  border-top: 1px solid var(--openbot-border);
  padding: var(--openbot-space-3);
}
.routine-webhook-events .settings-field {
  display: grid;
  margin: 0;
  gap: var(--openbot-space-1-5);
}
.routine-webhook-events .settings-field > span {
  margin: 0;
}
.routine-webhook-events .settings-field > .ui-text {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.routine-webhook-add-filter {
  justify-self: start;
  margin-left: calc(var(--openbot-space-2) * -1);
  padding-inline: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  font-weight: inherit;
}
.routine-webhook-filter-link {
  justify-self: start;
  margin: 0 0 var(--openbot-space-1) var(--openbot-space-1);
  padding-inline: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: inherit;
}
.routine-webhook-add-filter svg, .routine-webhook-filter-link svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.routine-trigger-menu {
  width: 300px;
  max-height: min(70vh, 560px);
  overflow-y: auto;
}
.routine-trigger-menu.ui-action-menu .routine-trigger-menu-item[role="menuitemradio"] {
  height: auto;
  padding-block: var(--openbot-space-1-5);
  gap: var(--openbot-space-3);
  white-space: normal;
}
.routine-trigger-menu-text {
  display: grid;
  min-width: 0;
  flex: 1;
}
.routine-trigger-menu-description {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.routine-trigger-menu.ui-action-menu .routine-trigger-menu-item > .routine-trigger-menu-check {
  color: var(--openbot-text-primary);
}
.routine-planner {
  container-type: inline-size;
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-4);
  color: var(--openbot-text-primary);
}
.routine-planner-header {
  display: grid;
  gap: var(--openbot-space-3);
}
.routine-planner-title {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
}
.routine-planner-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
}
.routine-planner-identity .ui-icon-button {
  margin-left: calc(-1 * var(--openbot-space-2));
}
.routine-planner-title h2 {
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
}
.routine-planner-title h2 span {
  color: var(--openbot-text-muted);
  font-weight: var(--openbot-weight-regular);
}
.routine-planner-title p, .routine-planner-note {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.routine-planner-toolbar {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.routine-planner-nav {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-1);
}
.routine-planner-range {
  margin-left: var(--openbot-space-2);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.routine-planner-clock-change {
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-warning-soft);
  padding: var(--openbot-space-1-5) var(--openbot-space-3);
  color: var(--openbot-warning-text);
  font-size: var(--openbot-text-sm);
}
.routine-planner-body {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
  align-items: start;
  gap: var(--openbot-space-4);
}
.routine-planner-grid {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-1);
}
.routine-planner-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.routine-planner-weekdays > * {
  padding-inline: calc(1px + var(--openbot-space-1-5));
}
.routine-planner-week {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--openbot-space-1);
}
.routine-planner-day {
  display: grid;
  min-width: 0;
  min-height: 12rem;
  align-content: start;
  gap: var(--openbot-space-1);
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  padding: var(--openbot-space-1-5);
}
.routine-planner-day[data-past] {
  background: var(--openbot-transparent);
}
.routine-planner-day[aria-current="date"] {
  border-color: var(--openbot-accent-strong);
}
.routine-planner-day-button.ui-button {
  width: 100%;
  justify-content: flex-start;
  gap: var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
}
.routine-planner-day-button strong {
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-semibold);
  font-variant-numeric: tabular-nums;
}
.routine-planner-day[aria-current="date"] .routine-planner-day-button strong {
  color: var(--openbot-accent-text);
}
.routine-planner-runs, .routine-planner-entries {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-0-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.routine-planner-status {
  display: grid;
  width: var(--openbot-space-4);
  height: var(--openbot-space-4);
  place-items: center;
}
.routine-planner-status > svg {
  width: var(--openbot-space-3);
  height: var(--openbot-space-3);
  stroke-width: 2;
}
.routine-planner-status-dot {
  width: var(--openbot-space-2);
  height: var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
}
.routine-planner-status[data-status="paused"] {
  color: var(--openbot-text-muted);
}
.routine-planner-status[data-status="failed"] {
  color: var(--openbot-danger-text);
}
.routine-planner-status[data-status="completed"] {
  color: var(--openbot-success-text);
}
.routine-planner-avatars {
  display: flex;
}
.routine-planner-avatar.agent-avatar {
  width: var(--openbot-space-4);
  height: var(--openbot-space-4);
}
.routine-planner-avatars .routine-planner-avatar + .routine-planner-avatar {
  margin-left: calc(var(--openbot-space-1-5) * -1);
}
.routine-planner-run.ui-button {
  display: grid;
  width: 100%;
  height: auto;
  min-height: var(--openbot-control-sm);
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "mark time avatars" "name name name";
  align-items: center;
  gap: var(--openbot-space-0-5) var(--openbot-space-1);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-1) var(--openbot-space-1-5);
  text-align: left;
  font-size: var(--openbot-text-sm);
}
.routine-planner-run .routine-planner-status {
  grid-area: mark;
}
.routine-planner-run-time {
  grid-area: time;
  color: var(--openbot-text-muted);
  font-variant-numeric: tabular-nums;
}
.routine-planner-run-name {
  display: -webkit-box;
  grid-area: name;
  min-width: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.3;
  overflow-wrap: break-word;
  white-space: normal;
}
.routine-planner-run .routine-planner-avatars {
  grid-area: avatars;
}
.routine-planner-run[data-status="paused"], .routine-planner-entry[data-status="paused"] {
  opacity: 0.6;
}
.routine-planner-run[data-status="paused"] {
  outline: 1px dashed var(--openbot-border-grouped);
  outline-offset: -1px;
  background: var(--openbot-transparent);
}
.routine-planner-run[data-status="failed"] {
  background: var(--openbot-danger-soft);
}
.routine-planner-run[data-status="completed"] .routine-planner-run-name {
  color: var(--openbot-text-muted);
}
.routine-planner-more.ui-button {
  justify-self: start;
  color: var(--openbot-text-muted);
}
.routine-planner[data-view="month"] .routine-planner-day {
  min-height: 7rem;
}
.routine-planner[data-view="month"] .routine-planner-day-button > span {
  display: none;
}
.routine-planner[data-view="month"] .routine-planner-run.ui-button {
  grid-template-columns: auto auto minmax(0, 1fr);
  grid-template-areas: "mark time name";
}
.routine-planner[data-view="month"] .routine-planner-run-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.routine-planner[data-view="month"] .routine-planner-run .routine-planner-avatars {
  display: none;
}
.routine-planner-day[data-outside] {
  border-color: var(--openbot-border);
  background: var(--openbot-transparent);
}
.routine-planner-day[data-outside] .routine-planner-day-button strong {
  color: var(--openbot-text-muted);
  font-weight: var(--openbot-weight-regular);
}
.routine-planner-upcoming, .routine-planner-day-view {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: var(--openbot-space-2);
}
.routine-planner-upcoming {
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-lg);
  padding: var(--openbot-space-3);
}
.routine-planner-upcoming h3, .routine-planner-hour h3 {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.routine-planner-hour {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  align-items: start;
  gap: var(--openbot-space-2);
  border-top: 1px solid var(--openbot-border-strong);
  padding-top: var(--openbot-space-2);
}
.routine-planner-hour h3 {
  padding-top: var(--openbot-space-2);
  font-variant-numeric: tabular-nums;
}
.routine-planner-entry {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-1);
}
.routine-planner-entry-main.ui-button {
  display: flex;
  min-width: 0;
  height: auto;
  flex: 1 1 auto;
  align-items: center;
  justify-content: flex-start;
  gap: var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  text-align: left;
}
.routine-planner-entry-text {
  display: grid;
  min-width: 0;
}
.routine-planner-entry-name, .routine-planner-entry-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.routine-planner-entry-name {
  font-size: var(--openbot-text-md);
}
.routine-planner-entry-meta {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
}
.routine-planner-entry[data-status="failed"] .routine-planner-entry-meta {
  color: var(--openbot-danger-text);
}
.routine-planner-entry-agents {
  display: flex;
  flex: 0 0 auto;
}
.routine-planner-agent .routine-planner-avatar.agent-avatar {
  width: var(--openbot-control-xs);
  height: var(--openbot-control-xs);
}
.routine-planner-empty {
  display: grid;
  justify-items: center;
  gap: var(--openbot-space-3);
  border: 1px dashed var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-lg);
  padding: var(--openbot-space-8) var(--openbot-space-4);
  color: var(--openbot-text-muted);
  text-align: center;
}
.routine-planner-empty > svg {
  width: var(--openbot-space-6);
  height: var(--openbot-space-6);
  stroke-width: var(--openbot-icon-stroke);
}
.routine-planner-skeleton-heading {
  height: var(--openbot-control-xs);
}
.routine-planner-skeleton-run {
  height: var(--openbot-control-md);
}
@container (max-width: 1160px) {
  .routine-planner-body {
    grid-template-columns: minmax(0, 1fr);
  }
}
@container (max-width: 920px) {
  .routine-planner-week {
    grid-template-columns: minmax(0, 1fr);
  }
  .routine-planner-day {
    min-height: 0;
    grid-template-columns: 5rem minmax(0, 1fr);
    align-items: start;
  }
  .routine-planner-day > :not(.routine-planner-day-heading) {
    grid-column: 2;
  }
  .routine-planner-loading .routine-planner-day {
    grid-template-columns: minmax(0, 1fr);
  }
  .routine-planner-loading .routine-planner-day > * {
    grid-column: 1;
  }
  .routine-planner-weekdays, .routine-planner-day[data-outside] {
    display: none;
  }
  .routine-planner[data-view="month"] .routine-planner-day {
    min-height: 0;
  }
  .routine-planner[data-view="month"] .routine-planner-day-button > span {
    display: inline;
  }
}
.chat-action-card :is(button, input, textarea):focus-visible {
  outline: 0;
}
.chat-action-card .ui-button:focus-visible {
  box-shadow: 0 0 0 1px var(--openbot-text-muted);
}
.chat-action-card.conversation-interaction-card {
  min-width: min(100%, 320px);
}
.chat-action-card {
  display: grid;
  width: fit-content;
  max-width: min(100%, 520px);
  gap: var(--openbot-space-3);
}
.chat-action-card-header {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
}
.chat-action-card-icon {
  display: inline-flex;
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
  color: var(--openbot-text-on-accent);
}
.chat-action-card-icon svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.chat-action-card-heading {
  display: grid;
  min-width: 0;
  flex: 1;
}
.chat-action-card-eyebrow {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.chat-action-card-title {
  overflow: hidden;
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-lg);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-action-card-open svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.chat-action-card-footer {
  display: flex;
  min-height: var(--openbot-leading-md);
  align-items: center;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.chat-action-card-footer-empty {
  min-height: 0;
  margin-top: calc(-1 * var(--openbot-space-3));
}
.chat-action-card-status {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
}
.chat-action-card-status svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.chat-action-card-footer-action {
  margin-left: auto;
}
.chat-action-card-error {
  color: var(--openbot-danger-text);
}
.chat-action-card-removed .chat-action-card-title {
  color: var(--openbot-text-muted);
  text-decoration: line-through;
}
.marketplace-suggestion.conversation-interaction-card {
  display: grid;
  container-type: inline-size;
  width: 100%;
  max-width: 520px;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3);
}
.marketplace-suggestion-header {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-3);
}
.marketplace-suggestion .marketplace-suggestion-icon {
  width: var(--openbot-control-lg);
  height: var(--openbot-control-lg);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-primary);
}
.marketplace-suggestion .marketplace-suggestion-icon img {
  border-radius: inherit;
}
.marketplace-suggestion-heading {
  display: grid;
  min-width: 0;
  flex: 1;
}
@container (max-width: 360px) {
  .marketplace-suggestion-header {
    flex-wrap: wrap;
  }
  .marketplace-suggestion-heading {
    flex-basis: calc(100% - var(--openbot-control-lg) - var(--openbot-control-md) - 2 * var(--openbot-space-3));
  }
  .marketplace-suggestion-action {
    order: 1;
    width: 100%;
  }
  .marketplace-suggestion-action > .ui-button {
    width: 100%;
  }
}
.marketplace-suggestion-title {
  overflow: hidden;
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.marketplace-suggestion .marketplace-suggestion-name {
  height: auto;
  padding: 0;
  color: inherit;
  font: inherit;
}
.marketplace-suggestion-description {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.marketplace-suggestion-action {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
}
.marketplace-suggestion-done[data-slot="badge"] {
  gap: var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-pill);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.marketplace-suggestion-done svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.marketplace-suggestion-unavailable {
  display: flex;
  margin: 0;
  gap: var(--openbot-space-2);
  border-top: 1px solid var(--openbot-border);
  padding-top: var(--openbot-space-3);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.marketplace-suggestion-unavailable svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  margin-top: var(--openbot-space-0-5);
  color: var(--openbot-text-muted);
}
.marketplace-suggestion-dismissed {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.backup-model-logo {
  display: inline-flex;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: none;
  align-items: center;
  justify-content: center;
}
.backup-model-logo svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  overflow: visible;
  fill: var(--openbot-provider-current);
}
.backup-model-option {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
}
.backup-models-page {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
}
.backup-models-intro {
  margin: 0;
  padding-inline: var(--openbot-space-1);
}
.backup-models-empty {
  margin: 0;
  padding: var(--openbot-space-2) var(--openbot-space-3);
}
.backup-models-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.backup-models-row {
  display: flex;
  min-height: 40px;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-1) var(--openbot-space-2) var(--openbot-space-1) var(--openbot-space-3);
}
.backup-models-number {
  width: var(--openbot-icon-sm);
  flex: none;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.backup-models-text {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}
.backup-models-name {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.backup-models-state {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.backup-models-row:not([data-state="ready"]) .backup-model-logo svg {
  opacity: 0.44;
}
.backup-models-row:not([data-state="ready"]) .backup-models-name {
  color: var(--openbot-text-muted);
  text-decoration: line-through;
}
.backup-models-actions {
  display: inline-flex;
  flex: none;
}
.usage-limit-ask-card {
  display: flex;
  max-width: 560px;
  flex-direction: column;
  gap: var(--openbot-space-3);
  margin: var(--openbot-space-4) 0 0;
}
.usage-limit-ask-body {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
}
.usage-limit-ask-select {
  max-width: 320px;
}
.usage-limit-ask-remember {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  cursor: pointer;
}
.usage-limit-ask-error {
  margin: 0;
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
}
.usage-limit-ask-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
}
.task-list {
  --task-list-glyph: var(--openbot-icon-sm);
  --task-list-ease: var(--openbot-ease-out);
  --task-list-open: 320ms;
  --task-list-close: 200ms;
  --task-list-close-ease: cubic-bezier(0.32, 0.08, 0.24, 1);
  --task-list-blur: 4px;
  --task-list-stagger: 28ms;
  box-sizing: border-box;
  width: min(100%, 448px);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
}
.task-list .task-list-header {
  display: flex;
  background: transparent;
  width: 100%;
  height: auto;
  align-items: center;
  justify-content: flex-start;
  gap: var(--openbot-space-3);
  border-radius: var(--openbot-radius-card);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-regular);
  padding: var(--openbot-space-3);
  text-align: left;
}
.task-list .task-list-header:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 1px var(--openbot-text-muted);
}
.task-list-summary-glyph {
  display: inline-flex;
  width: var(--task-list-glyph);
  height: var(--task-list-glyph);
  flex: 0 0 auto;
}
.task-list-donut {
  width: 100%;
  height: 100%;
}
.task-list-donut circle {
  stroke-width: 1.5;
}
.task-list-donut-track {
  stroke: var(--openbot-border-strong);
}
.task-list-donut-value {
  stroke: var(--openbot-text-primary);
  stroke-linecap: round;
  transition: stroke-dashoffset var(--openbot-duration-slow) var(--task-list-ease);
}
.task-list-title {
  display: grid;
  min-width: 0;
  flex: 1;
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.task-list-title-layer {
  overflow: hidden;
  min-width: 0;
  grid-area: 1 / 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: opacity var(--task-list-open) var(--task-list-ease), filter var(--task-list-open) var(--task-list-ease), transform var(--task-list-open) var(--task-list-ease);
}
.task-list-title-name {
  font-weight: var(--openbot-weight-semibold);
}
.task-list-title-task {
  font-weight: var(--openbot-weight-regular);
}
.task-list-title[data-showing="task"] .task-list-title-name, .task-list-title[data-showing="title"] .task-list-title-task {
  filter: blur(var(--task-list-blur));
  opacity: 0;
}
.task-list-title[data-showing="task"] .task-list-title-name {
  transform: translateY(calc(-1 * var(--openbot-space-1)));
}
.task-list-title[data-showing="title"] .task-list-title-task {
  transform: translateY(var(--openbot-space-1));
}
.task-list-title-task-text {
  animation: task-list-title-in var(--task-list-open) var(--task-list-ease);
}
.task-list-count {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-variant-numeric: tabular-nums;
  line-height: var(--openbot-leading-md);
}
.task-list-chevron {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  transform: rotate(-90deg);
  transition: transform var(--openbot-duration-normal) var(--task-list-ease);
}
.task-list[data-open] .task-list-chevron {
  transform: rotate(0deg);
}
.task-list-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--task-list-close) var(--task-list-close-ease);
}
.task-list[data-open] .task-list-panel {
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--task-list-open) var(--task-list-ease);
}
.task-list-items {
  display: grid;
  overflow: hidden;
  min-height: 0;
  margin: 0;
  padding: 0 var(--openbot-space-3);
  list-style: none;
  transition: padding var(--task-list-close) var(--task-list-close-ease);
}
.task-list[data-open] .task-list-items {
  padding-bottom: var(--openbot-space-3);
  transition: padding var(--task-list-open) var(--task-list-ease);
}
.task-list-item {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-0-5) 0;
  filter: blur(var(--task-list-blur));
  opacity: 0;
  transform: translateY(calc(-1 * var(--openbot-space-1))) scale(0.98);
  transform-origin: left top;
  transition: opacity var(--task-list-close) var(--task-list-close-ease), filter var(--task-list-close) var(--task-list-close-ease), transform var(--task-list-close) var(--task-list-close-ease);
}
.task-list[data-open] .task-list-item {
  filter: blur(0);
  opacity: 1;
  transform: none;
  transition: opacity var(--task-list-open) var(--task-list-ease), filter var(--task-list-open) var(--task-list-ease), transform var(--task-list-open) var(--task-list-ease);
  transition-delay: calc(min(var(--task-list-index, 0), 8) * var(--task-list-stagger));
}
.task-list-item-mark {
  display: inline-flex;
  width: var(--task-list-glyph);
  height: var(--openbot-leading-md);
  flex: 0 0 auto;
  align-items: center;
}
.task-list-item-label {
  position: relative;
  min-width: 0;
  flex: 1;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  transition: color var(--openbot-duration-normal) var(--task-list-ease);
}
.task-list-item[data-state="pending"] .task-list-item-label {
  color: var(--openbot-text-muted);
}
.task-list-item[data-state="done"] .task-list-item-label {
  color: var(--openbot-text-dim);
}
.task-list-item-text {
  position: relative;
}
.task-list-item-text::after {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--openbot-duration-slow) var(--task-list-ease);
}
.task-list-item[data-state="done"] .task-list-item-text::after {
  transform: scaleX(1);
}
.task-list-item[data-state="active"] .task-list-item-text, .task-list-title[data-showing="task"] .task-list-title-task-text {
  display: inline-block;
  color: var(--openbot-text-primary);
  animation: task-list-pulse 1.6s ease-in-out infinite;
  animation-play-state: var(--task-list-play-state, running);
}
.task-list-title[data-showing="task"] .task-list-title-task-text {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
  animation: task-list-title-in var(--task-list-open) var(--task-list-ease), task-list-pulse 1.6s ease-in-out infinite;
  animation-play-state: var(--task-list-play-state, running);
}
.task-list-item-progress {
  --digit-dur: var(--openbot-duration-overlay);
  --digit-distance: var(--openbot-space-1);
  --digit-blur: var(--openbot-space-0-5);
  --digit-stagger: 40ms;
  display: inline-flex;
  min-width: 4ch;
  flex: 0 0 auto;
  justify-content: flex-end;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  line-height: var(--openbot-leading-md);
  padding: 0 var(--openbot-space-1-5);
}
.task-list-mark {
  width: var(--task-list-glyph);
  height: var(--task-list-glyph);
  overflow: visible;
}
.task-list-mark circle, .task-list-mark path {
  transition: opacity var(--openbot-duration-normal) var(--task-list-ease), transform var(--openbot-duration-normal) var(--task-list-ease), stroke-dashoffset var(--openbot-duration-slow) var(--task-list-ease);
  transform-box: fill-box;
  transform-origin: center;
}
.task-list-mark-pending {
  opacity: 0;
  stroke: var(--openbot-text-dim);
  stroke-dasharray: 1.2 2;
  stroke-width: 1.5;
}
.task-list-mark-track {
  opacity: 0;
  stroke: var(--openbot-border-strong);
  stroke-width: 1.5;
}
.task-list-mark-arc {
  opacity: 0;
  stroke: var(--openbot-text-primary);
  stroke-dasharray: 12 100;
  stroke-linecap: round;
  stroke-width: 1.5;
}
.task-list-mark-fill {
  fill: var(--openbot-text-dim);
  opacity: 0;
  transform: scale(0.4);
}
.task-list-mark-check {
  stroke: var(--openbot-bg-canvas);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
}
.task-list-mark-cross {
  stroke: var(--openbot-bg-canvas);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
  stroke-width: 1.75;
}
.task-list-mark[data-state="pending"] .task-list-mark-pending, .task-list-mark[data-state="active"] .task-list-mark-track, .task-list-mark[data-state="active"] .task-list-mark-arc, .task-list-mark[data-state="done"] .task-list-mark-fill, .task-list-mark[data-state="failed"] .task-list-mark-fill {
  opacity: 1;
}
.task-list-mark[data-state="active"] {
  animation: task-list-turn 0.9s linear infinite;
  animation-play-state: var(--task-list-play-state, running);
}
.task-list-mark[data-state="done"] .task-list-mark-fill, .task-list-mark[data-state="failed"] .task-list-mark-fill {
  transform: scale(1);
}
.task-list-mark[data-state="failed"] .task-list-mark-fill {
  fill: var(--openbot-danger);
}
.task-list-mark[data-state="done"] .task-list-mark-check, .task-list-mark[data-state="failed"] .task-list-mark-cross {
  stroke-dashoffset: 0;
  transition-delay: var(--openbot-duration-fast);
}
@keyframes task-list-turn {
  to {
    transform: rotate(360deg);
  }
}
@keyframes task-list-title-in {
  from {
    filter: blur(var(--task-list-blur));
    opacity: 0;
    transform: translateY(var(--openbot-space-1));
  }
}
@keyframes task-list-pulse {
  50% {
    opacity: 0.6;
  }
}
.task-list:not([data-open]) .task-list-panel {
  --task-list-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .task-list-donut-value, .task-list-chevron, .task-list-panel, .task-list-items, .task-list-item, .task-list[data-open] .task-list-panel, .task-list[data-open] .task-list-items, .task-list[data-open] .task-list-item, .task-list-item-label, .task-list-title-layer, .task-list-item-text::after, .task-list-mark circle, .task-list-mark path {
    transition: none;
  }
  .task-list-mark[data-state="active"], .task-list-item[data-state="active"] .task-list-item-text, .task-list-title-task-text, .task-list-title[data-showing="task"] .task-list-title-task-text {
    animation: none;
  }
}
.subagents-elapsed {
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
.subagents-live {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.subagents-live-glyph {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: 0 0 auto;
  margin-top: 2px;
}
.subagents-live-text {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.subagents-live[data-state="failed"] {
  color: var(--openbot-danger-text);
}
.subagents-group {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: var(--openbot-space-1-5);
}
.subagents-group .subagents-group-header {
  display: flex;
  height: auto;
  align-self: flex-start;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-left: calc(-1 * var(--openbot-space-1-5));
  border-radius: var(--openbot-radius-sm);
  padding: var(--openbot-space-0-5) var(--openbot-space-1-5);
  color: inherit;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-md);
  text-align: left;
}
.subagents-group .subagents-group-header[aria-expanded="true"]:not(:hover) {
  background: transparent;
  color: inherit;
}
.subagents-group-chevron {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  color: var(--openbot-text-muted);
  transition: rotate var(--openbot-duration-fast) var(--openbot-ease-out);
}
.subagents-group-header[aria-expanded="true"] .subagents-group-chevron {
  rotate: 90deg;
}
@media (prefers-reduced-motion: reduce) {
  .subagents-group-chevron {
    transition: none;
  }
}
.subagents-group-title {
  font-weight: var(--openbot-weight-medium);
}
.subagents-progress {
  gap: var(--openbot-space-1-5);
  font-variant-numeric: tabular-nums;
}
.subagents-ring {
  width: var(--openbot-icon-xs);
}
.subagents-ring .ui-radial-progress-track, .subagents-ring .ui-radial-progress-indicator {
  stroke-width: 7;
}
.subagents-ring .ui-radial-progress-indicator {
  transition: stroke-dasharray var(--openbot-duration-slow) var(--openbot-ease-out);
}
.subagents-progress-failed {
  color: var(--openbot-danger-text);
}
@media (prefers-reduced-motion: reduce) {
  .subagents-ring .ui-radial-progress-indicator {
    transition: none;
  }
}
.subagents-list {
  display: flex;
  width: min(100%, 720px);
  flex-direction: column;
  margin: 0;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-canvas);
  padding: var(--openbot-space-1);
  list-style: none;
}
.subagents-list .subagents-row {
  display: grid;
  width: 100%;
  height: auto;
  align-items: start;
  grid-template-columns: var(--openbot-icon-sm) minmax(0, 1fr) auto auto;
  gap: 2px var(--openbot-space-2);
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  padding: var(--openbot-space-2);
  color: inherit;
  font-weight: var(--openbot-weight-regular);
  line-height: inherit;
  text-align: left;
  white-space: normal;
  cursor: pointer;
}
.subagents-list .subagents-row:hover {
  background: var(--openbot-hover);
}
.subagents-list .subagents-row.subagents-row-selected {
  background: var(--openbot-bg-surface);
}
.subagents-row:focus-visible {
  outline: 2px solid var(--openbot-focus-ring);
  outline-offset: -2px;
}
.subagents-row-copy, .subagents-row .subagents-live {
  display: contents;
}
.subagents-row-title {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.subagents-row .subagents-elapsed {
  line-height: var(--openbot-leading-md);
}
.subagents-row .subagents-live-glyph {
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  justify-self: center;
  margin-top: 0;
}
.subagents-row .subagents-live-text {
  grid-column: 2;
  grid-row: 2;
}
.subagents-row-chevron {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: 0 0 auto;
  margin-top: 4px;
  color: var(--openbot-text-muted);
  opacity: 0;
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}
.subagents-row:hover .subagents-row-chevron, .subagents-row:focus-visible .subagents-row-chevron, .subagents-row.subagents-row-selected .subagents-row-chevron {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .subagents-row-chevron {
    transition: none;
  }
}
.subagents-panel {
  overflow: hidden;
}
.subagents-panel-detail {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: var(--openbot-space-3);
  overflow-y: auto;
  padding: var(--openbot-space-4);
}
.subagents-panel-head {
  display: flex;
  align-items: flex-start;
  gap: var(--openbot-space-2);
}
.subagents-panel-head h3 {
  margin: 0;
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-lg);
  overflow-wrap: anywhere;
}
.subagents-panel-meta {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.subagents-steps {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
}
.subagents-prompt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  border-left: 2px solid var(--openbot-border-strong);
  padding-left: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.subagents-prompt-label {
  color: var(--openbot-text-muted);
  font-weight: var(--openbot-weight-medium);
}
.subagents-step-list {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.subagents-step {
  display: flex;
  align-items: flex-start;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  overflow-wrap: anywhere;
}
.subagents-step-glyph {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--openbot-text-muted);
}
.subagents-step[data-kind="thinking"] .subagents-step-text {
  color: var(--openbot-text-muted);
  font-style: italic;
}
.subagents-step[data-kind="text"] .subagents-step-text {
  color: var(--openbot-text-primary);
}
.subagents-step-text.agent-activity-label {
  -webkit-line-clamp: unset;
}
.subagents-error {
  display: flex;
  align-items: flex-start;
  gap: var(--openbot-space-2);
  margin: 0;
  color: var(--openbot-danger-text);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.subagents-error-icon {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: 0 0 auto;
  margin-top: 2px;
}
.subagents-status {
  display: inline-flex;
  width: var(--openbot-icon-sm);
  height: var(--openbot-leading-md);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}
.subagents-status-icon {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.subagents-status[data-state="running"] {
  color: var(--openbot-accent);
}
.subagents-status[data-state="running"] .subagents-status-icon {
  animation: ui-spin 1s linear infinite;
}
.subagents-status[data-state="completed"] {
  color: var(--openbot-success);
}
.subagents-status[data-state="failed"] {
  color: var(--openbot-danger);
}
.subagents-status[data-state="stopped"] {
  color: var(--openbot-text-muted);
}
@media (prefers-reduced-motion: reduce) {
  .subagents-status[data-state="running"] .subagents-status-icon {
    animation: none;
  }
}
.awaiting-replies {
  --awaiting-composer-overlap: 14px;
  position: relative;
  z-index: 9;
  width: auto;
  margin: 0 12px calc(-1 * var(--awaiting-composer-overlap));
  border-color: var(--openbot-queue-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-queue-surface);
  padding-bottom: var(--awaiting-composer-overlap);
  animation: queue-panel-in var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1) both;
}
.awaiting-replies.task-list .task-list-header {
  min-width: 0;
  flex: 1;
  border-radius: var(--openbot-radius-lg);
}
.awaiting-replies-bar {
  display: flex;
  align-items: center;
}
.awaiting-replies-dismiss {
  margin-right: var(--openbot-space-2);
  color: var(--openbot-text-muted);
}
.composer-wrap:has(.composer-attachment) .awaiting-replies:last-child {
  margin-bottom: 0;
}
.awaiting-replies-item {
  align-items: center;
}
.awaiting-replies-avatar {
  --agent-avatar-optical-offset: -1px;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
}
.awaiting-replies-text {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: baseline;
  gap: var(--openbot-space-2);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.awaiting-replies-name {
  flex: 0 0 auto;
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}
.awaiting-replies-preview {
  overflow: hidden;
  min-width: 0;
  color: var(--openbot-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.awaiting-replies-state {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-md);
}
.awaiting-replies-detail {
  color: var(--openbot-text-dim);
}
.awaiting-replies-item[data-state="failed"] .awaiting-replies-state-label {
  color: var(--openbot-danger-text);
}
.awaiting-replies-item[data-state="active"] .awaiting-replies-state-label {
  animation: task-list-pulse 1.6s ease-in-out infinite;
  animation-play-state: var(--task-list-play-state, running);
}
@media (prefers-reduced-motion: reduce) {
  .awaiting-replies {
    animation: none;
  }
  .awaiting-replies-item[data-state="active"] .awaiting-replies-state-label {
    animation: none;
  }
}
.open-waits .task-list-title-name {
  font-weight: var(--openbot-weight-medium);
}
.open-waits .task-list-count {
  color: var(--openbot-warning-text);
  font-size: var(--openbot-text-sm);
}
.open-waits-row {
  align-items: flex-start;
}
.open-waits-row-text {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: var(--openbot-space-0-5);
}
.open-waits-row-note {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.open-waits-row-meta {
  display: flex;
  min-width: 0;
  gap: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  white-space: nowrap;
}
.open-waits-row-request {
  overflow: hidden;
  min-width: 0;
  color: var(--openbot-text-dim);
  text-overflow: ellipsis;
}
[data-wait-state="woken"] .open-waits-row-state {
  color: var(--openbot-warning-text);
}
[data-wait-state="resuming"] .open-waits-row-state {
  color: var(--openbot-text-primary);
  animation: task-list-pulse 1.6s ease-in-out infinite;
  animation-play-state: var(--task-list-play-state, running);
}
@media (prefers-reduced-motion: reduce) {
  [data-wait-state="resuming"] .open-waits-row-state {
    animation: none;
  }
}
.open-waits-menu {
  flex: 0 0 auto;
  align-self: flex-start;
  color: var(--openbot-text-muted);
}
.conversation-title {
  display: flex;
  height: var(--openbot-control-sm);
  align-items: center;
  gap: 6px;
  border-radius: var(--openbot-radius-sm);
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 2px 4px;
  text-align: left;
  transition: background var(--openbot-duration-hover) ease;
}
.conversation-title:hover {
  background: var(--openbot-hover);
}
.conversation-title h1 {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0;
}
.conversation-access-lock {
  display: inline-flex;
  flex: none;
  color: var(--openbot-text-muted);
}
.conversation-access-lock svg {
  width: 14px;
  height: 14px;
}
.conversation-header-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}
.provider-model-picker {
  position: relative;
  min-width: 0;
}
.provider-model-trigger {
  display: flex;
  width: max-content;
  max-width: 240px;
  height: 28px;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-overlay);
  padding: 0 9px 0 8px;
  color: var(--openbot-text-primary);
  cursor: pointer;
  box-shadow: inset 0 1px var(--openbot-hover);
  transition: border-color var(--openbot-duration-hover) ease, background-color var(--openbot-duration-hover) ease, transform var(--openbot-duration-fast) cubic-bezier(0.23, 1, 0.32, 1);
}
.provider-model-trigger:hover:not(:disabled), .provider-model-trigger[aria-expanded="true"] {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-surface);
}
.provider-model-trigger:active:not(:disabled) {
  transform: scale(0.97);
}
.provider-model-trigger:focus-visible, .provider-model-rail-button:focus-visible, .provider-model-option:focus-visible {
  outline: 1px solid var(--openbot-accent);
  outline-offset: 1px;
}
.provider-model-trigger:disabled {
  opacity: 0.48;
  cursor: default;
}
.provider-model-trigger-value {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}
.provider-model-trigger-name {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  font-size: var(--openbot-text-md);
  font-weight: 470;
  line-height: 18px;
}
.provider-model-trigger-effort {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: 18px;
  white-space: nowrap;
}
.provider-model-trigger-effort::before {
  margin-right: var(--openbot-space-1-5);
  content: "·";
}
.provider-model-trigger:has(.provider-model-trigger-fast) {
  max-width: 296px;
}
.provider-model-trigger-fast svg {
  width: 12px;
  height: 12px;
  margin-right: var(--openbot-space-0-5);
  stroke-width: var(--openbot-icon-stroke);
}
.provider-model-trigger-account {
  min-width: 0;
  max-width: 160px;
  flex-shrink: 1;
  overflow: hidden;
}
.ui-swap {
  position: relative;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
}
.ui-swap > span, .ui-swap-digits {
  display: inline-block;
}
.ui-swap > .ui-swap-leaving {
  position: absolute;
  top: 0;
  left: 0;
}
.provider-model-trigger-value .ui-swap {
  overflow: visible;
}
.provider-model-trigger-name:not(.ui-swap) {
  overflow: hidden;
  text-overflow: ellipsis;
}
.provider-model-trigger-name > span:not(.ui-swap-leaving) {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}
.provider-model-trigger-name > .ui-swap-leaving {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.provider-model-trigger-mark {
  display: flex;
  flex: 0 0 auto;
}
.provider-model-trigger-mark[data-entering] {
  animation: provider-model-mark-in 420ms cubic-bezier(0.34, 1.36, 0.64, 1) both;
}
@keyframes provider-model-mark-in {
  from {
    opacity: 0;
    scale: 0.6;
    filter: blur(2px);
  }
}
.provider-model-picker-field {
  width: 100%;
}
.provider-model-trigger-field {
  width: 100%;
  max-width: none;
  height: 44px;
  gap: 8px;
  border: 0;
  border-radius: 0;
  background: var(--openbot-hover);
  padding: 0 11px 0 12px;
  box-shadow: none;
}
.provider-model-trigger-field:hover:not(:disabled), .provider-model-trigger-field[aria-expanded="true"] {
  border-color: transparent;
  background: var(--openbot-border);
}
.provider-model-trigger-field .provider-model-field-label {
  flex: 0 0 auto;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: 400;
  line-height: 17px;
}
.provider-model-trigger-field .provider-model-trigger-value {
  max-width: calc(100% - 84px);
  margin-left: auto;
  justify-content: flex-end;
}
.provider-model-mark {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  overflow: visible;
  fill: var(--openbot-provider-current);
}
.provider-model-mark-large {
  width: 19px;
  height: 19px;
  flex-basis: 19px;
}
.provider-model-chevron {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  fill: none;
  stroke: var(--openbot-text-muted);
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--openbot-duration-normal) ease;
}
.provider-model-trigger[aria-expanded="true"] .provider-model-chevron {
  transform: rotate(180deg);
}
.provider-model-popover {
  --provider-model-rail-bg: var(--openbot-bg-notch);
  @supports (color: color-mix(in lab, red, red)) {
    --provider-model-rail-bg: color-mix(in srgb, var(--openbot-bg-notch) 22%, var(--ui-menu-bg));
  }
  --provider-model-segment-radius: calc(var(--ui-menu-item-radius) - var(--openbot-space-0-5));
  position: relative;
  z-index: var(--openbot-layer-dropdown);
  width: min(360px, calc(100vw - 24px));
  min-height: 226px;
  overflow: hidden;
  border: 0;
  border-radius: var(--ui-menu-radius);
  background: var(--ui-menu-bg);
  color: var(--openbot-text-primary);
  box-shadow: var(--ui-menu-panel-shadow);
  transform-origin: var(--kb-popover-content-transform-origin);
  animation: ui-menu-in var(--ui-menu-duration) var(--ui-menu-ease) both;
}
.provider-model-popover:not([data-expanded]) {
  animation: ui-menu-out var(--ui-menu-duration) var(--ui-menu-ease) both;
}
.provider-model-layout {
  max-height: min(520px, calc(100dvh - 100px), var(--kb-popper-content-available-height, 520px));
  display: flex;
  width: 100%;
  min-height: inherit;
}
.provider-model-rail {
  display: flex;
  width: 52px;
  flex: 0 0 52px;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-1);
  border-right: 1px solid var(--openbot-border);
  background: var(--provider-model-rail-bg);
  padding: 9px 7px;
}
.provider-model-rail-tabs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-1);
}
.provider-model-rail-add {
  color: var(--openbot-text-muted);
}
.provider-model-rail-add:hover {
  color: var(--openbot-text-primary);
}
.provider-model-rail-tooltip-trigger {
  display: flex;
}
.provider-model-rail-tooltip {
  z-index: var(--openbot-layer-tooltip);
  display: flex;
  max-width: min(240px, calc(100vw - 16px));
  flex-direction: column;
  gap: var(--openbot-space-0-5);
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-surface-raised);
  box-shadow: var(--openbot-shadow-raised);
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-md);
  overflow-wrap: anywhere;
  pointer-events: none;
}
.provider-model-rail-tooltip small {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
}
.provider-model-rail-button {
  position: relative;
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  border: 0;
  border-radius: var(--ui-menu-item-radius);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: background-color var(--openbot-duration-hover) ease, opacity var(--openbot-duration-hover) ease;
}
.provider-model-rail-button:hover {
  background: var(--ui-menu-item-hover);
}
.provider-model-rail-button-selected {
  background: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-primary) 8%, transparent);
  }
  box-shadow: inset 0 0 0 1px var(--ui-menu-edge);
}
.provider-model-rail-button .provider-model-mark {
  opacity: 0.48;
}
.provider-model-rail-button:not(.provider-model-rail-button-selected, .provider-model-rail-button-unavailable):hover .provider-model-mark {
  opacity: 0.8;
}
.provider-model-rail-button-selected .provider-model-mark {
  fill: var(--openbot-text-primary);
  opacity: 1;
}
.provider-model-rail-button-unavailable .provider-model-mark {
  opacity: 0.28;
}
.provider-model-rail-button-unavailable:is(:hover, .provider-model-rail-button-selected) .provider-model-mark {
  opacity: 0.6;
}
.provider-model-rail-button:is( [data-state="not-installed"], [data-state="sign-in-required"], [data-state="outdated"], [data-state="error"] )::after {
  position: absolute;
  top: var(--openbot-space-1-5);
  right: var(--openbot-space-1-5);
  width: 6px;
  height: 6px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-muted);
  box-shadow: 0 0 0 2px var(--provider-model-rail-bg);
  content: "";
}
.provider-model-rail-button:is([data-state="sign-in-required"], [data-state="outdated"])::after {
  background: var(--openbot-warning);
}
.provider-model-rail-account {
  position: absolute;
  right: 2px;
  bottom: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control);
  box-shadow: 0 0 0 2px var(--provider-model-rail-bg);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.provider-model-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  flex: 1;
  padding: var(--ui-menu-padding);
}
.provider-model-panel:not([data-selected]) {
  display: none;
}
.provider-model-heading {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-1-5) 0 var(--openbot-space-2) var(--ui-menu-inset);
}
.provider-model-heading-text {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 4px;
}
.provider-model-heading .ui-button, .provider-model-empty .ui-button-variant-outline {
  border-color: transparent;
  border-radius: var(--ui-menu-item-radius);
  background: var(--ui-menu-item-hover);
  box-shadow: none;
  color: var(--openbot-text-primary);
}
.provider-model-heading .ui-button:hover, .provider-model-empty .ui-button-variant-outline:hover {
  background: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-primary) 10%, transparent);
  }
}
.provider-model-heading .ui-button svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.provider-model-heading strong, .provider-model-heading span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.provider-model-empty {
  display: grid;
  justify-items: start;
  gap: var(--openbot-space-2);
  margin-bottom: var(--ui-menu-padding);
  border: 0;
  border-radius: var(--ui-menu-item-radius);
  background: var(--ui-menu-item-hover);
  padding: var(--openbot-space-2) var(--ui-menu-inset);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: 18px;
}
.provider-model-heading strong {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: 620;
  line-height: 20px;
}
.provider-model-heading span {
  margin-top: 1px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
}
.provider-model-empty > .ui-progress {
  justify-self: stretch;
}
.provider-model-list {
  display: grid;
  gap: 0;
}
.provider-model-effort {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-1) 12px;
  margin: var(--ui-menu-padding) calc(var(--ui-menu-padding) * -1) 0;
  border-top: 1px solid var(--openbot-border);
  padding: var(--ui-menu-padding) var(--ui-menu-padding) 0 calc(var(--ui-menu-padding) + var(--ui-menu-inset));
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 17px;
}
.provider-model-effort + .provider-model-effort {
  margin-top: 0;
  border-top: 0;
  padding-top: var(--openbot-space-1);
}
.provider-model-effort > :first-child {
  display: flex;
  min-height: var(--openbot-control-md);
  align-items: center;
}
.provider-model-effort-select {
  width: 128px;
}
.provider-model-effort-segments {
  --provider-model-effort-duration: 250ms;
  --provider-model-effort-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  gap: var(--openbot-space-0-5);
  border-radius: var(--ui-menu-item-radius);
  background: var(--ui-menu-item-hover);
  padding: var(--openbot-space-0-5);
}
.provider-model-effort-segment {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}
.provider-model-effort-segment-control {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  min-width: 0;
  height: calc(var(--openbot-control-md) - 2 * var(--openbot-space-0-5));
  align-items: center;
  justify-content: center;
  border-radius: var(--provider-model-segment-radius);
  padding-inline: var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--provider-model-effort-duration) var(--provider-model-effort-ease);
}
.provider-model-effort-segment-control label {
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: inherit;
}
.provider-model-effort-segment-control:hover:not([data-disabled]), .provider-model-effort-segment-control[data-checked] {
  color: var(--openbot-text-primary);
}
.provider-model-effort-segment:has(:focus-visible) .provider-model-effort-segment-control {
  box-shadow: 0 0 0 1px var(--openbot-text-muted);
}
.provider-model-effort-segment-control[data-disabled] {
  opacity: 0.5;
  cursor: default;
}
.provider-model-effort-pill {
  position: absolute;
  top: var(--openbot-space-0-5);
  left: 0;
  z-index: 0;
  width: 0;
  height: calc(var(--openbot-control-md) - 2 * var(--openbot-space-0-5));
  border-radius: var(--provider-model-segment-radius);
  background: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-primary) 12%, transparent);
  }
  box-shadow: inset 0 1px 0 var(--ui-menu-highlight);
  pointer-events: none;
  transition: transform var(--provider-model-effort-duration) var(--provider-model-effort-ease), width var(--provider-model-effort-duration) var(--provider-model-effort-ease);
}
.provider-model-effort-pill[data-initializing] {
  transition: none;
}
.provider-model-effort-segments:has([data-disabled]) .provider-model-effort-pill {
  opacity: 0.5;
}
.provider-model-effort-select .ui-select-trigger {
  border-color: transparent;
  border-radius: var(--ui-menu-item-radius);
  background: var(--ui-menu-item-hover);
  box-shadow: none;
}
.provider-model-effort-select .ui-select-trigger:is(:hover, [data-expanded]) {
  background: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-primary) 10%, transparent);
  }
}
.provider-model-effort-content {
  border-radius: var(--ui-menu-radius);
  background: var(--ui-menu-bg);
  box-shadow: var(--ui-menu-panel-shadow);
  animation: ui-menu-in var(--ui-menu-duration) var(--ui-menu-ease) both;
}
.provider-model-effort-content .ui-select-listbox {
  padding: var(--ui-menu-padding);
}
.provider-model-effort-content .ui-select-item {
  border-radius: var(--ui-menu-item-radius);
  padding-block: var(--openbot-space-1-5);
  padding-left: var(--ui-menu-inset);
  font-size: var(--openbot-text-md);
}
.provider-model-effort-content .ui-select-item[data-highlighted] {
  background: var(--ui-menu-item-hover);
}
.provider-model-option {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 0;
  border-radius: var(--ui-menu-item-radius);
  background: transparent;
  padding: var(--openbot-space-1-5) var(--ui-menu-inset) var(--openbot-space-1-5) calc(var(--ui-menu-inset) + var(--openbot-icon-md) + var(--openbot-space-2));
  color: var(--openbot-text-primary);
  cursor: pointer;
  text-align: left;
  transition: background-color var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease;
}
.provider-model-option::before {
  position: absolute;
  top: 50%;
  left: var(--ui-menu-inset);
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  box-sizing: border-box;
  border: 1px solid var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--openbot-text-primary) 22%, transparent);
  }
  border-radius: var(--openbot-radius-pill);
  content: "";
  translate: 0 -50%;
  transition: background-color var(--ui-menu-duration) ease-out, border-color var(--ui-menu-duration) ease-out;
}
.provider-model-option-selected::before {
  border-color: transparent;
  background: var(--openbot-text-primary);
}
.provider-model-option:hover:not(:disabled), .provider-model-option:focus-visible {
  background: var(--ui-menu-item-hover);
}
.provider-model-option:disabled {
  color: var(--openbot-text-dim);
  cursor: not-allowed;
}
.provider-model-option-name {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}
.provider-model-option-name > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--openbot-text-md);
  line-height: 18px;
}
.provider-model-option-name small {
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-primary) 7%, transparent);
  }
  padding: 1px var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: 500;
  line-height: 15px;
}
.provider-model-check {
  position: absolute;
  top: 50%;
  left: calc(var(--ui-menu-inset) + (var(--openbot-icon-md) - var(--openbot-icon-sm)) / 2);
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  fill: none;
  stroke: var(--ui-menu-bg);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.5;
  translate: 0 -50%;
}
@media (max-width: 720px) {
  .provider-model-trigger:not(.provider-model-trigger-field) {
    max-width: 148px;
  }
  .provider-model-trigger-effort {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .provider-model-chevron, .provider-model-trigger, .provider-model-rail-button, .provider-model-option, .provider-model-option::before, .provider-model-effort-segment-control, .provider-model-effort-pill {
    transition: none;
  }
  .provider-model-popover, .provider-model-popover:not([data-expanded]), .provider-model-effort-content {
    animation: none;
  }
  .provider-model-trigger-mark[data-entering] {
    animation: none;
  }
}
.computer-button-agent-active {
  border-color: var(--openbot-accent);
  background: var(--openbot-accent-soft);
  box-shadow: 0 0 10px var(--openbot-accent-strong);
  color: var(--openbot-accent);
}
.computer-control-dot {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 5px;
  height: 5px;
  border: 1px solid var(--openbot-bg-canvas);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
  animation: browser-control-pulse 1.25s ease-in-out infinite;
}
.browser-toolbar-button:active:not(:disabled) {
  transform: scale(0.92);
  transition-duration: var(--openbot-duration-fast);
}
.conversation-scroll {
  min-height: 0;
  flex: 1;
  overflow-anchor: none;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 8px 12px var(--openbot-space-6);
}
.virtual-chat-list {
  position: relative;
  width: 100%;
}
.virtual-chat-row {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  padding-top: var(--openbot-chat-entry-gap);
}
.virtual-chat-row[data-grouped] {
  padding-top: var(--openbot-chat-marker-gap);
}
.virtual-chat-row > .chat-action-marker + .message-entry {
  margin-top: var(--openbot-chat-marker-gap);
}
.virtual-chat-list-static .virtual-chat-row {
  position: relative;
  inset: auto;
}
.virtual-chat-row[data-reply-flash] {
  isolation: isolate;
}
.virtual-chat-row[data-reply-flash]::before {
  position: absolute;
  z-index: -1;
  inset: var(--openbot-chat-entry-gap) -12px 0;
  background: var(--openbot-accent-soft);
  content: "";
  opacity: 0;
  pointer-events: none;
  animation: reply-flash 1.6s var(--openbot-ease-out);
}
.virtual-chat-row[data-grouped][data-reply-flash]::before {
  top: var(--openbot-chat-marker-gap);
}
@keyframes reply-flash {
  0%, 45% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.conversation-history-status {
  display: flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.scroll-to-latest {
  position: sticky;
  z-index: 3;
  top: calc(100% - 58px);
  left: 50%;
  display: flex;
  width: max-content;
  height: 44px;
  align-items: center;
  margin-bottom: -44px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface-raised);
  box-shadow: 0 8px 24px var(--openbot-shadow-popover-ambient), inset 0 0 0 1px var(--openbot-shadow-ring);
  color: var(--openbot-text-primary);
  transform: translateX(-50%);
  transition: background-color var(--openbot-duration-hover) ease;
}
.scroll-to-latest:is([data-new-messages], [data-reply-return]) {
  top: calc(100% - 50px);
  height: 36px;
  margin-bottom: -36px;
}
.scroll-to-latest[data-new-messages] {
  border-color: transparent;
  background: var(--openbot-unread-surface);
  color: var(--openbot-unread-text);
}
.scroll-to-latest-button {
  display: grid;
  width: 44px;
  height: 100%;
  place-items: center;
  border: 0;
  border-radius: inherit;
  background: none;
  color: inherit;
  transition: background-color var(--openbot-duration-hover) ease, transform var(--openbot-duration-fast) cubic-bezier(0.23, 1, 0.32, 1);
}
.scroll-to-latest:is([data-new-messages], [data-reply-return]) .scroll-to-latest-button {
  width: auto;
  grid-auto-flow: column;
  gap: var(--openbot-space-2);
  padding-inline: var(--openbot-space-1-5) var(--openbot-space-2);
}
.scroll-to-latest-count {
  font-size: var(--openbot-text-sm);
  font-weight: 620;
  white-space: nowrap;
}
.scroll-to-latest-dismiss {
  display: grid;
  height: 100%;
  place-items: center;
  border: 0;
  background: none;
  padding-inline: 0 var(--openbot-space-1-5);
  color: inherit;
  transition: transform var(--openbot-duration-fast) cubic-bezier(0.23, 1, 0.32, 1);
}
.scroll-to-latest-button svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}
.scroll-to-latest-dismiss svg {
  box-sizing: content-box;
  width: 14px;
  height: 14px;
  border-radius: var(--openbot-radius-pill);
  padding: var(--openbot-space-1);
  transition: background-color var(--openbot-duration-hover) ease;
}
.scroll-to-latest-button:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: -2px;
}
.scroll-to-latest-dismiss:focus-visible {
  outline: none;
}
.scroll-to-latest-dismiss:focus-visible svg {
  outline: 2px solid var(--openbot-border-focus);
}
.scroll-to-latest[data-new-messages] .scroll-to-latest-button:focus-visible {
  outline-color: var(--openbot-unread-text);
}
.scroll-to-latest[data-new-messages] .scroll-to-latest-dismiss:focus-visible svg {
  outline-color: var(--openbot-unread-text);
}
.scroll-to-latest-button .scroll-to-latest-reply-icon {
  width: 18px;
  height: 18px;
}
.scroll-to-latest-button:active, .scroll-to-latest-dismiss:active {
  transform: scale(0.96);
}
@media (hover: hover) and (pointer: fine) {
  .scroll-to-latest-button:hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-bg-control-active);
    color: inherit;
  }
  .scroll-to-latest-dismiss:hover:not(:disabled):not([data-disabled]) {
    background: none;
    color: inherit;
  }
  .scroll-to-latest-dismiss:hover svg {
    background: var(--openbot-bg-control-active);
  }
  .scroll-to-latest:is([data-new-messages], [data-reply-return]) .scroll-to-latest-button:hover:not(:disabled):not([data-disabled]) {
    background: none;
  }
  .scroll-to-latest[data-new-messages] .scroll-to-latest-dismiss:hover svg {
    background: var(--openbot-unread-text);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--openbot-unread-text) 18%, transparent);
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-to-latest, .scroll-to-latest-button, .scroll-to-latest-dismiss, .scroll-to-latest-dismiss svg {
    transition: none;
  }
  .scroll-to-latest-button:active, .scroll-to-latest-dismiss:active {
    transform: none;
  }
}
.unread-messages-banner {
  position: relative;
  display: flex;
  min-height: 32px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  border-radius: 0 0 var(--openbot-radius-md) var(--openbot-radius-md);
  background: var(--openbot-unread-surface);
  padding: 0 12px;
  color: var(--openbot-unread-text);
  font-size: var(--openbot-text-sm);
  font-weight: 620;
  line-height: 16px;
  transition: background-color var(--openbot-duration-hover) var(--openbot-ease-out);
}
.unread-messages-banner button {
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  color: inherit;
}
.unread-messages-jump {
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0 12px;
  font-size: var(--openbot-text-sm);
  font-weight: 620;
  line-height: 16px;
  text-align: left;
}
.unread-messages-mark-read {
  position: relative;
  z-index: 1;
  margin-left: auto;
  padding: 0;
  font-size: var(--openbot-text-sm);
  font-weight: 680;
  line-height: 14px;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: transform var(--openbot-duration-fast) cubic-bezier(0.23, 1, 0.32, 1);
}
.unread-messages-mark-read-label {
  display: inline-flex;
  align-items: center;
  border-radius: var(--openbot-radius-sm);
  padding: 3px 5px;
  transition: background-color var(--openbot-duration-hover) var(--openbot-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .unread-messages-banner:hover {
    background-color: var(--openbot-unread-surface);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--openbot-unread-surface) 88%, var(--openbot-unread-text));
    }
  }
  .unread-messages-banner .ui-button:hover:not(:disabled):not([data-disabled]) {
    background: transparent;
    color: var(--openbot-unread-text);
  }
  .unread-messages-banner .unread-messages-mark-read:hover:not(:disabled):not([data-disabled]) .unread-messages-mark-read-label {
    background: var(--openbot-unread-text);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--openbot-unread-text) 12%, transparent);
    }
  }
}
.unread-messages-banner button:focus-visible {
  outline: 2px solid var(--openbot-unread-text);
  outline-offset: 1px;
}
.unread-messages-mark-read:active:not(:disabled) {
  transform: scale(0.97);
}
.unread-messages-banner button:disabled {
  opacity: 0.55;
}
.unread-messages-divider {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  margin: var(--openbot-space-1) 0 var(--openbot-space-2);
  color: var(--openbot-unread-surface);
  font-size: var(--openbot-text-sm);
  font-weight: 720;
  letter-spacing: 0.08em;
  line-height: 12px;
}
.unread-messages-divider hr {
  width: 100%;
  height: 1px;
  flex: 1;
  border: 0;
  background: var(--openbot-unread-surface);
}
.unread-messages-divider span {
  flex: 0 0 auto;
}
.time-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 656px;
  height: 24px;
  margin: 0 auto;
  padding: 4px 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
  text-align: center;
}
.chat-scroll-rail {
  --chat-scroll-rail-accent: var(--openbot-text-muted);
  --chat-scroll-rail-track: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --chat-scroll-rail-track: color-mix(in srgb, var(--openbot-text-primary) 10%, transparent);
  }
  --chat-scroll-rail-glow: var(--chat-scroll-rail-accent);
  @supports (color: color-mix(in lab, red, red)) {
    --chat-scroll-rail-glow: color-mix(in srgb, var(--chat-scroll-rail-accent) 60%, transparent);
  }
  --chat-scroll-rail-ease: var(--openbot-ease-out);
  --chat-scroll-rail-duration: var(--openbot-duration-island-content);
  --chat-scroll-rail-quick: var(--openbot-duration-overlay);
  --chat-scroll-rail-blur: 8px;
  position: sticky;
  z-index: 3;
  top: 0;
  pointer-events: none;
}
.chat-scroll-rail-nav {
  position: absolute;
  top: 50%;
  right: calc(-1 * var(--chat-scroll-rail-inset, 0px));
  width: min(260px, 70%);
  height: min(64%, 600px);
  display: flex;
  flex-direction: column;
  padding: var(--openbot-space-3) 0;
  transform: translateY(-50%);
}
.chat-scroll-rail-nav:hover, .chat-scroll-rail-nav:has(:focus-visible) {
  pointer-events: auto;
}
.chat-scroll-rail-surface {
  position: absolute;
  inset: calc(-1 * var(--openbot-space-8)) 0 calc(-1 * var(--openbot-space-8)) calc(-2 * var(--openbot-space-8));
  background: var(--openbot-bg-canvas);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-bg-canvas) 80%, transparent);
  }
  mask-image: linear-gradient( to bottom, transparent, var(--openbot-text-primary) var(--openbot-space-8), var(--openbot-text-primary) calc(100% - var(--openbot-space-8)), transparent ), linear-gradient(to right, transparent, var(--openbot-text-primary) calc(2 * var(--openbot-space-8)));
  mask-composite: intersect;
  opacity: 0;
  transition: opacity var(--openbot-duration-slow) ease;
}
.chat-scroll-rail-eyebrow {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin: 0 0 var(--openbot-space-3);
  padding: 0 var(--openbot-space-4) 0 var(--openbot-space-4);
  color: var(--openbot-text-dim);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity var(--openbot-duration-slow) ease;
}
.chat-scroll-rail-count {
  --digit-dur: var(--openbot-duration-overlay);
  --digit-distance: var(--openbot-space-1);
  --digit-blur: var(--openbot-space-0-5);
  --digit-ease: var(--openbot-ease-out);
  color: var(--chat-scroll-rail-accent);
  font-variant-numeric: tabular-nums;
}
.chat-scroll-rail-track {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.chat-scroll-rail-list {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.chat-scroll-rail-item {
  flex-basis: 0;
  min-height: 22px;
  display: flex;
}
.chat-scroll-rail .chat-scroll-rail-link {
  flex: 1;
  min-width: 0;
  height: auto;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  gap: var(--openbot-space-3);
  padding: 0 0 0 var(--openbot-space-4);
  border: 0;
  border-radius: 0;
  color: var(--openbot-text-muted);
  font-weight: inherit;
  text-decoration: none;
  outline: none;
}
.chat-scroll-rail-item[data-state="read"] .chat-scroll-rail-link {
  color: var(--openbot-text-secondary);
}
.chat-scroll-rail-item[data-state="active"] .chat-scroll-rail-link, .chat-scroll-rail .chat-scroll-rail-link:hover, .chat-scroll-rail .chat-scroll-rail-link:focus-visible {
  color: var(--openbot-text-primary);
  text-decoration: none;
}
.chat-scroll-rail-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  margin-top: -3px;
  font-size: var(--openbot-text-sm);
  line-height: 18px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0;
  filter: blur(var(--chat-scroll-rail-blur));
  transform: translateX(var(--openbot-space-2));
  transition: color var(--openbot-duration-slow) ease, opacity var(--openbot-duration-slow) ease, filter var(--openbot-duration-slow) ease, transform var(--chat-scroll-rail-quick) var(--chat-scroll-rail-ease);
}
.chat-scroll-rail-link:focus-visible .chat-scroll-rail-label {
  text-decoration: underline;
  text-decoration-color: var(--chat-scroll-rail-accent);
  text-underline-offset: 4px;
}
.chat-scroll-rail-bar {
  position: relative;
  width: clamp(12px, var(--chat-scroll-rail-inset, 20px), 20px);
  flex: none;
  padding-bottom: var(--openbot-space-1);
}
.chat-scroll-rail .chat-scroll-rail-bar {
  pointer-events: auto;
}
.chat-scroll-rail-bar::before, .chat-scroll-rail-fill {
  content: "";
  position: absolute;
  top: 0;
  right: 5px;
  bottom: var(--openbot-space-1);
  width: 2px;
  border-radius: var(--openbot-radius-pill);
  transition: width var(--chat-scroll-rail-quick) var(--chat-scroll-rail-ease), right var(--chat-scroll-rail-quick) var(--chat-scroll-rail-ease), background-color var(--chat-scroll-rail-quick) ease;
}
.chat-scroll-rail-bar::before {
  background: var(--chat-scroll-rail-track);
}
.chat-scroll-rail-fill {
  background: var(--chat-scroll-rail-accent);
  transform: scaleY(var(--chat-scroll-rail-fill, 0));
  transform-origin: top center;
}
.chat-scroll-rail-item[data-state="active"] .chat-scroll-rail-bar::before, .chat-scroll-rail-item[data-state="active"] .chat-scroll-rail-fill {
  right: 4.5px;
  width: 3px;
}
.chat-scroll-rail-item[data-state="active"] .chat-scroll-rail-fill {
  box-shadow: 0 0 10px var(--chat-scroll-rail-glow);
}
.chat-scroll-rail-head {
  position: absolute;
  top: 0;
  right: 3px;
  width: 6px;
  height: 6px;
  border-radius: var(--openbot-radius-pill);
  background: var(--chat-scroll-rail-accent);
  box-shadow: 0 0 0 3px var(--chat-scroll-rail-accent), 0 0 12px var(--chat-scroll-rail-glow);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--chat-scroll-rail-accent) 18%, transparent), 0 0 12px var(--chat-scroll-rail-glow);
  }
  pointer-events: none;
  transform: translateY( calc( var(--chat-scroll-rail-head-top) + (var(--chat-scroll-rail-head-length) - var(--openbot-space-1)) * var(--chat-scroll-rail-fill, 0) - 50% ) );
}
.chat-scroll-rail-nav:hover .chat-scroll-rail-surface, .chat-scroll-rail-nav:has(:focus-visible) .chat-scroll-rail-surface {
  backdrop-filter: blur(var(--openbot-space-4));
  opacity: 1;
  transition: opacity var(--openbot-duration-overlay) ease;
}
.chat-scroll-rail-nav:hover .chat-scroll-rail-eyebrow, .chat-scroll-rail-nav:has(:focus-visible) .chat-scroll-rail-eyebrow {
  opacity: 1;
}
.chat-scroll-rail-nav:hover .chat-scroll-rail-label, .chat-scroll-rail-nav:has(:focus-visible) .chat-scroll-rail-label {
  --chat-scroll-rail-delay: calc(min(var(--chat-scroll-rail-index, 0), 12) * 18ms);
  opacity: 1;
  filter: blur(0);
  transform: none;
  transition: color var(--openbot-duration-slow) ease, opacity var(--chat-scroll-rail-quick) ease var(--chat-scroll-rail-delay), filter var(--chat-scroll-rail-quick) ease var(--chat-scroll-rail-delay), transform var(--chat-scroll-rail-duration) var(--chat-scroll-rail-ease) var(--chat-scroll-rail-delay);
}
@media (prefers-reduced-motion: reduce) {
  .chat-scroll-rail .chat-scroll-rail-nav *, .chat-scroll-rail .chat-scroll-rail-nav *::before, .chat-scroll-rail .chat-scroll-rail-nav *::after, .chat-scroll-rail-nav:hover .chat-scroll-rail-surface, .chat-scroll-rail-nav:has(:focus-visible) .chat-scroll-rail-surface, .chat-scroll-rail-nav:hover .chat-scroll-rail-label, .chat-scroll-rail-nav:has(:focus-visible) .chat-scroll-rail-label {
    transition: none;
  }
}
.message-entry {
  max-width: none;
}
.message-entry > .ui-message-content {
  max-width: 100%;
}
.message-action-row {
  display: flex;
  min-height: 24px;
  align-items: center;
  gap: var(--openbot-space-1);
  padding-inline: var(--openbot-space-1);
}
.message-entry-with-author {
  display: grid;
  grid-template-columns: calc(var(--openbot-space-6) + var(--openbot-space-1)) minmax(0, 1fr);
  column-gap: var(--openbot-space-2);
  row-gap: var(--openbot-space-1);
}
.message-entry-with-author > .ui-message-content {
  display: contents;
}
.message-entry-with-author .message-shell {
  grid-column: 2;
  grid-row: 2;
}
.message-entry-with-author .message-action-row {
  grid-column: 2;
  grid-row: 3;
}
.message-entry-with-author .ui-message-footer {
  grid-column: 2;
  grid-row: 4;
}
.message-author-avatar {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  overflow: visible;
  border: 0;
  background: transparent;
}
.message-author-avatar .agent-avatar {
  --agent-avatar-optical-offset: -3px;
  width: var(--openbot-space-6);
  height: var(--openbot-space-6);
}
.message-author-avatar-button {
  width: 100%;
  height: 100%;
  padding: 0;
}
.message-author-avatar-button:hover:not(:disabled):not([data-disabled]) {
  background: transparent;
}
.message-author-gutter {
  width: 28px;
  flex: 0 0 28px;
}
.message-author-name {
  grid-column: 2;
  grid-row: 1;
  padding-inline: var(--openbot-space-3);
  min-width: 0;
  color: var(--message-author-color, var(--openbot-text-muted));
  font-weight: var(--openbot-weight-regular);
  overflow-wrap: anywhere;
}
.message-author-name-button {
  height: auto;
  min-width: 0;
  margin-inline: calc(var(--openbot-space-1-5) * -1);
  padding: 0 var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-md);
  color: inherit;
  font: inherit;
  white-space: normal;
  text-align: start;
}
.message-author-name-button:hover:not(:disabled):not([data-disabled]), .message-author-name-button:focus-visible {
  background: var(--openbot-hover);
  color: inherit;
}
.message-entry-animated {
  animation: message-in var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1) both;
}
.message-entry-agent {
  width: 100%;
}
.message-shell {
  display: flex;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  gap: 5px;
}
.message-entry-user .message-shell {
  justify-content: flex-end;
}
.message-actions {
  position: relative;
  z-index: 4;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--openbot-duration-hover) ease;
}
.message-time {
  padding-inline: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--openbot-duration-hover) ease;
}
.message-author-name > .message-time {
  padding-inline: 0;
}
.message-entry-user .message-action-row > .message-time {
  order: -1;
}
.message-entry:hover .message-actions, .message-entry:focus-within .message-actions, .message-actions-open {
  opacity: 1;
  pointer-events: auto;
}
.message-entry:hover .message-time, .message-entry:focus-within .message-time, .message-entry:has(.message-actions-open) .message-time {
  opacity: 1;
}
@media (hover: none), (pointer: coarse) {
  .message-actions, .message-time {
    opacity: 1;
    pointer-events: auto;
  }
}
.message-entry-user .message-author-name {
  text-align: end;
}
.message-entry-user .message-author-name > .message-time {
  order: -1;
}
.ui-bubble.message-bubble-member > .ui-bubble-content {
  background: var(--message-author-color, var(--openbot-accent));
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix( in srgb, var(--message-author-color, var(--openbot-accent)) 22%, var(--openbot-bg-surface-raised) );
  }
}
.message-action-button {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  padding: 0;
  color: var(--openbot-text-muted);
  transition: background var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease;
}
.message-action-button:hover, .message-action-button:focus-visible, .message-action-button[aria-expanded="true"] {
  background: var(--openbot-border);
  color: var(--openbot-text-secondary);
  outline: none;
}
.message-action-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.message-action-button svg circle:not(:first-child), .message-action-button svg:has(circle:nth-child(3)) circle {
  fill: currentColor;
  stroke: none;
}
.message-action-popover-anchor {
  position: relative;
  display: grid;
  place-items: center;
}
.reaction-picker-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1px;
}
.reaction-picker-options {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1px;
}
.reaction-picker-more {
  margin-top: 3px;
  border-top: 1px solid var(--openbot-border);
  padding-top: 4px;
}
.reaction-picker-more .reaction-picker-options {
  display: grid;
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  grid-template-columns: repeat(8, minmax(0, 1fr));
}
.reaction-picker-more .reaction-picker-options [role="menuitemradio"] {
  width: 100%;
  min-width: 0;
}
.reaction-picker-row :is([role="menuitem"], [role="menuitemradio"]) {
  display: grid;
  width: 31px;
  height: 31px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  padding: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-xl);
  line-height: 1;
  transition: background var(--openbot-duration-hover) ease, transform var(--openbot-duration-hover) ease;
}
.reaction-picker-row :is([role="menuitem"], [role="menuitemradio"]):hover, .reaction-picker-row :is([role="menuitem"], [role="menuitemradio"]):focus-visible, .reaction-picker-row :is([role="menuitem"], [role="menuitemradio"])[data-highlighted], .reaction-picker-row [role="menuitemradio"][aria-checked="true"] {
  background: var(--openbot-border);
  outline: none;
  transform: scale(1.08);
}
.reaction-picker-row .reaction-more-button {
  color: var(--openbot-text-muted);
}
.reaction-more-button svg {
  width: 15px;
  height: 15px;
}
.message-reaction-pill {
  display: flex;
  min-width: 0;
  height: var(--openbot-icon-lg);
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  padding: 0;
  color: inherit;
  font-size: var(--openbot-text-lg);
  line-height: 1;
  transition: background var(--openbot-duration-hover) ease;
}
.message-entry:has(.message-reaction-anchor) > .ui-message-content {
  padding-bottom: var(--openbot-space-3);
}
.message-reaction-anchor .message-reaction-pill {
  gap: 2px;
  margin: 0;
  border-radius: inherit;
}
.ui-bubble-reactions.message-reaction-anchor {
  padding: 2px 6px;
}
.ui-bubble-reactions.message-reaction-anchor:has(> .message-reaction-pill:only-child) {
  width: var(--openbot-control-xs);
  padding-inline: 2px;
}
.ui-bubble-reactions.message-reaction-anchor:has(> .message-reaction-pill:only-child) > .message-reaction-pill {
  width: var(--openbot-icon-lg);
  border-radius: var(--openbot-radius-pill);
}
.message-reaction-anchor .ui-bubble-reaction-overflow {
  padding-right: 6px;
}
.message-reaction-pill:hover {
  background: var(--openbot-hover);
}
.message-reaction-pill-readonly:hover {
  background: transparent;
}
.message-reaction-anchor:has(.message-reaction-pill:focus-visible) {
  box-shadow: 0 0 0 3px var(--openbot-bg-canvas), 0 0 0 5px var(--openbot-border-focus);
}
.message-reaction-pill:focus-visible {
  outline: none;
}
.chat-action-entry-animated {
  width: 100%;
  animation: message-in var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1) both;
}
.agent-activity-slot[data-reserved="true"] {
  min-height: 44px;
}
.agent-activity-entry {
  width: 100%;
  display: grid;
  grid-template-rows: 1fr;
  pointer-events: none;
  transition: grid-template-rows var(--openbot-duration-overlay) var(--openbot-ease-out);
}
@starting-style {
  .agent-activity-entry {
    grid-template-rows: 0fr;
  }
}
.agent-activity-entry[data-state="exiting"] {
  grid-template-rows: 0fr;
}
.agent-activity-content {
  min-height: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  padding: 4px 0 8px 8px;
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  transition: opacity var(--openbot-duration-overlay) var(--openbot-ease-out), filter var(--openbot-duration-overlay) var(--openbot-ease-out), transform var(--openbot-duration-overlay) var(--openbot-ease-out);
  will-change: opacity, filter, transform;
}
@starting-style {
  .agent-activity-content {
    opacity: 0;
    filter: blur(2px);
    transform: translateY(4px);
  }
}
.agent-activity-entry[data-state="exiting"] .agent-activity-content {
  opacity: 0;
  filter: blur(2px);
  transform: translateY(2px);
}
.agent-activity-avatar {
  --agent-avatar-optical-offset: -2px;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  align-self: center;
  transform: translateY(0) scale(1);
  transition: transform var(--openbot-duration-overlay) var(--openbot-ease-out);
  will-change: transform;
}
@starting-style {
  .agent-activity-avatar {
    transform: translateY(3px) scale(0.96);
  }
}
.agent-activity-entry[data-state="exiting"] .agent-activity-avatar {
  transform: translateY(0) scale(0.98);
}
.agent-activity-label {
  display: -webkit-box;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  background: linear-gradient( 90deg, var(--openbot-text-primary) 0%, var(--openbot-text-primary) 30%, var(--openbot-text-muted) 45%, var(--openbot-text-muted) 55%, var(--openbot-text-primary) 70%, var(--openbot-text-primary) 100% );
  background-size: 300% 100%;
  background-clip: text;
  color: transparent;
  font-size: var(--openbot-text-sm);
  line-height: 20px;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: image-generation-shine 2.25s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
}
.agent-activity-elapsed {
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  line-height: 20px;
}
.chat-action-marker {
  width: min(var(--openbot-chat-marker-width), calc(100% - var(--openbot-space-6)));
  min-height: var(--openbot-chat-marker-height);
  justify-content: center;
  margin: 0 auto;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  letter-spacing: var(--openbot-tracking-normal);
  text-align: center;
}
.chat-action-marker-content {
  max-width: 100%;
  gap: var(--openbot-space-1);
}
.chat-action-marker-summary {
  --chat-action-history-open: 340ms;
  --chat-action-history-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --chat-action-history-close: 200ms;
  --chat-action-history-close-ease: cubic-bezier(0.32, 0.08, 0.24, 1);
  --chat-action-history-lift: 170ms;
  --chat-action-history-fade: 22px;
  --chat-action-history-entry: 260ms;
  --chat-action-history-stagger: 60ms;
  display: flex;
  min-width: 0;
  max-width: 100%;
  flex-direction: column;
  align-items: center;
}
.ui-button.chat-action-history-toggle {
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
}
.chat-action-history-toggle svg {
  transition: transform var(--chat-action-history-close) var(--openbot-ease-out);
}
.chat-action-history-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.chat-action-history-panel {
  display: grid;
  width: 100%;
  grid-template-rows: 1fr;
}
.chat-action-history-panel[data-state="open"] {
  animation: chat-action-history-open var(--chat-action-history-open) var(--chat-action-history-ease);
}
.chat-action-history-panel[data-state="closed"] {
  animation: chat-action-history-close var(--chat-action-history-close) var(--chat-action-history-close-ease) forwards;
}
@keyframes chat-action-history-open {
  from {
    grid-template-rows: 0fr;
  }
}
@keyframes chat-action-history-close {
  to {
    grid-template-rows: 0fr;
  }
}
.chat-action-history-panel[data-state="open"] .chat-action-history {
  animation: chat-action-history-settle var(--chat-action-history-open) var(--openbot-ease-out);
}
.chat-action-history-panel[data-state="closed"] .chat-action-history {
  animation: chat-action-history-lift var(--chat-action-history-lift) var(--openbot-ease-out) forwards;
}
@keyframes chat-action-history-settle {
  from {
    transform: translateY(-25%);
  }
}
@keyframes chat-action-history-lift {
  to {
    transform: translateY(-8%);
    opacity: 0;
  }
}
.chat-action-history-clip {
  min-height: 0;
  overflow: hidden;
}
.chat-action-history-panel[data-state="closed"] .chat-action-history-clip {
  -webkit-mask-image: linear-gradient( to bottom, var(--openbot-text-primary) calc(100% - var(--chat-action-history-fade)), transparent );
  mask-image: linear-gradient( to bottom, var(--openbot-text-primary) calc(100% - var(--chat-action-history-fade)), transparent );
}
.chat-action-history {
  box-sizing: border-box;
  display: grid;
  width: 100%;
  gap: var(--openbot-space-1);
  margin: var(--openbot-space-1) 0 0;
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  border-inline-start: 1px solid var(--openbot-border-grouped);
  list-style: none;
  text-align: left;
}
.chat-action-history-entry {
  display: grid;
  grid-template-columns: var(--openbot-icon-xs) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-1-5);
  color: var(--openbot-text-secondary);
}
.chat-action-history-panel[data-state="open"] .chat-action-history-entry {
  animation: chat-action-history-entry-in var(--chat-action-history-entry) var(--openbot-ease-out) backwards;
}
.chat-action-history-panel[data-state="open"] .chat-action-history-entry:nth-child(2) {
  animation-delay: var(--chat-action-history-stagger);
}
.chat-action-history-panel[data-state="open"] .chat-action-history-entry:nth-child(3) {
  animation-delay: calc(var(--chat-action-history-stagger) * 2);
}
.chat-action-history-panel[data-state="open"] .chat-action-history-entry:nth-child(n + 4) {
  animation-delay: calc(var(--chat-action-history-stagger) * 3);
}
@keyframes chat-action-history-entry-in {
  from {
    transform: translateX(calc(var(--openbot-space-1) * -1));
    opacity: 0;
    filter: blur(2px);
  }
}
.chat-action-history-entry time {
  color: var(--openbot-text-muted);
  white-space: nowrap;
}
.chat-action-history-icon, .chat-action-history-icon svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.chat-action-history-status-completed .chat-action-history-icon {
  color: var(--openbot-success);
}
.chat-action-history-status-failed .chat-action-history-icon, .chat-action-history-status-interrupted .chat-action-history-icon, .chat-action-history-status-cancelled .chat-action-history-icon {
  color: var(--openbot-danger);
}
.chat-action-history-status-needs-attention .chat-action-history-icon {
  color: var(--openbot-warning);
}
.chat-action-history-status-in-progress .chat-action-history-icon {
  color: var(--openbot-accent);
}
@media (prefers-reduced-motion: reduce) {
  .chat-action-history-panel, .chat-action-history, .chat-action-history-entry {
    animation: none;
  }
  .chat-action-history-toggle svg {
    transition: none;
  }
}
.chat-action-marker-label, .chat-action-marker-time {
  flex: 0 0 auto;
  white-space: nowrap;
}
.chat-action-marker-time {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.chat-action-target {
  box-sizing: border-box;
  display: inline-flex;
  min-width: 0;
  max-width: min(280px, 100%);
  height: auto;
  min-height: var(--openbot-chat-marker-height);
  flex: 0 1 auto;
  align-items: center;
  gap: var(--openbot-space-1);
  border: 0;
  border-radius: var(--openbot-radius-pill);
  background: transparent;
  padding: 0 var(--openbot-space-1-5);
  color: var(--openbot-text-secondary);
  font: inherit;
  line-height: inherit;
  outline: none;
  text-align: left;
  white-space: nowrap;
  transition: background-color var(--openbot-duration-hover) var(--openbot-ease-out), box-shadow var(--openbot-duration-hover) var(--openbot-ease-out), color var(--openbot-duration-hover) var(--openbot-ease-out), scale var(--openbot-duration-fast) var(--openbot-ease-out);
}
button.chat-action-target:hover, .chat-action-agent-menu-trigger:hover, .chat-action-agent-menu-trigger[aria-expanded="true"] {
  background: var(--openbot-bg-control-hover);
  box-shadow: 0 0 0 1px var(--openbot-border-strong);
  color: var(--openbot-text-primary);
}
button.chat-action-target:focus-visible, .chat-action-agent-menu-trigger:focus-visible {
  background: var(--openbot-bg-control-hover);
  box-shadow: var(--openbot-focus-ring);
  color: var(--openbot-text-primary);
}
button.chat-action-target:active, .chat-action-agent-menu-trigger:active {
  background: var(--openbot-bg-control-active);
  scale: 0.96;
}
.chat-action-target-unavailable {
  color: var(--openbot-text-muted);
}
.chat-action-marker-unavailable .chat-action-marker-label, .chat-action-marker-context-reset .chat-action-marker-label, .chat-action-marker-model-switch .chat-action-marker-label {
  padding-inline-end: var(--openbot-space-1-5);
}
.chat-action-target-name, .chat-action-target > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-action-target .ui-marker-icon, .chat-action-target .ui-marker-icon svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: 0 0 var(--openbot-icon-xs);
}
.chat-action-target .ui-marker-icon {
  translate: 0 -0.5px;
}
.chat-action-agent-avatar {
  --agent-avatar-optical-offset: -2px;
  position: relative;
  width: var(--openbot-chat-marker-avatar);
  height: var(--openbot-chat-marker-avatar);
  flex: 0 0 var(--openbot-chat-marker-avatar);
  border: 0;
  background: transparent;
  translate: 0 -0.5px;
}
.chat-action-marker-agent-message .chat-action-target {
  --chat-action-agent-color: var(--openbot-accent);
}
.chat-action-marker-agent-message button.chat-action-target:hover, .chat-action-marker-agent-message .chat-action-agent-menu-trigger:hover, .chat-action-marker-agent-message .chat-action-agent-menu-trigger[aria-expanded="true"] {
  background: var(--chat-action-agent-color);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--chat-action-agent-color) 16%, transparent);
  }
  box-shadow: none;
  color: var(--chat-action-agent-color);
}
.chat-action-marker-agent-message button.chat-action-target:focus-visible, .chat-action-marker-agent-message .chat-action-agent-menu-trigger:focus-visible {
  background: var(--chat-action-agent-color);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--chat-action-agent-color) 16%, transparent);
  }
  box-shadow: var(--openbot-focus-ring);
  color: var(--chat-action-agent-color);
}
.chat-action-marker-agent-message button.chat-action-target:active, .chat-action-marker-agent-message .chat-action-agent-menu-trigger:active {
  background: var(--chat-action-agent-color);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--chat-action-agent-color) 34%, transparent);
  }
  color: var(--openbot-text-primary);
}
.chat-action-target-status-in-progress .ui-marker-icon {
  color: var(--openbot-accent);
}
.chat-action-target-status-completed .ui-marker-icon {
  color: var(--openbot-success);
}
.chat-action-target-status-failed .ui-marker-icon, .chat-action-target-status-cancelled .ui-marker-icon, .chat-action-target-status-interrupted .ui-marker-icon {
  color: var(--openbot-danger);
}
.chat-action-target-status-needs-attention .ui-marker-icon {
  color: var(--openbot-warning);
}
.chat-action-target-status-in-progress .ui-marker-icon svg {
  animation: ui-spin 1s linear infinite;
}
.chat-action-avatar-stack {
  display: inline-flex;
  min-width: 0;
  height: var(--openbot-chat-marker-avatar);
  align-items: center;
}
.chat-action-avatar-stack .chat-action-agent-avatar + .chat-action-agent-avatar {
  margin-left: -6px;
}
.chat-action-group-list {
  padding-inline: 0;
  border-inline-start: 0;
  text-align: center;
}
.chat-action-group-list > .chat-action-history-entry {
  display: block;
}
.chat-action-group-list .chat-action-marker {
  width: 100%;
}
.chat-action-marker-routine-run-group > .chat-action-marker-summary > .chat-action-marker-content {
  flex-wrap: wrap;
  justify-content: center;
}
.chat-action-run-group-details {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--openbot-space-1);
}
.chat-action-run-group-count::before, .chat-action-run-group-time::before {
  content: "·" / "";
  margin-inline-end: var(--openbot-space-1);
}
.ui-action-menu.chat-action-agent-menu {
  min-width: 220px;
  max-width: min(320px, calc(100vw - var(--openbot-space-4)));
}
.ui-action-menu.chat-action-agent-menu .chat-action-agent-menu-item[role="menuitem"] {
  display: grid;
  align-items: center;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: var(--openbot-space-2);
}
.chat-action-agent-menu-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-action-agent-menu-item .chat-action-agent-avatar {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
}
.chat-action-agent-menu-status {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  white-space: nowrap;
}
.chat-action-attachments {
  margin-top: var(--openbot-space-2);
}
.chat-row-unavailable {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .chat-action-target-status-in-progress .ui-marker-icon svg {
    animation: none;
  }
}
.message-entry .ui-bubble {
  letter-spacing: -0.15px;
}
.message-entry-agent .ui-bubble {
  max-width: min(720px, 100%);
}
.message-entry-agent .ui-bubble:has(.choice-card) {
  width: min(500px, 100%);
  max-width: min(500px, 100%);
}
.message-entry-agent .ui-bubble:has(.image-generation) {
  width: min(420px, 100%);
  max-width: min(420px, 100%);
}
.message-entry-agent .ui-bubble:has(.image-gallery) {
  width: min(520px, 100%);
  max-width: min(520px, 100%);
}
.message-entry-agent .ui-bubble-variant-ghost:has( :is(.choice-card, .image-generation, .image-gallery, .message-code-block, .message-data-table-scroll) ) > .ui-bubble-content {
  width: 100%;
}
.image-generation {
  display: grid;
  min-width: 0;
  justify-items: start;
  gap: 14px;
}
.message-image-attachments {
  display: grid;
  min-width: 0;
  gap: 10px;
}
.image-generation-stage {
  position: relative;
  width: min(100%, 420px);
  overflow: hidden;
  aspect-ratio: var(--image-generation-ratio);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  isolation: isolate;
}
.image-generation-canvas, .image-generation-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.image-generation-canvas {
  overflow: hidden;
  background: var(--openbot-bg-control);
  opacity: 1;
  transition: opacity var(--openbot-duration-overlay) ease;
}
.image-generation-canvas-failed {
  display: grid;
  place-items: center;
}
.image-generation-ready .image-generation-canvas {
  opacity: 0;
}
.image-generation-ready .image-generation-glow {
  animation: none;
}
.image-generation-dots {
  position: absolute;
  inset: 2px;
  background-image: radial-gradient(circle, var(--openbot-text-muted) 0.7px, transparent 1.3px);
  background-repeat: space;
  background-size: 11px 11px;
  opacity: 0.22;
}
.image-generation-failure-mark {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 2px solid var(--openbot-danger);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-danger-soft);
  box-shadow: 0 0 0 5px var(--openbot-danger-soft);
  color: var(--openbot-danger);
}
.image-generation-failure-mark > svg {
  width: var(--openbot-control-xl);
  height: var(--openbot-control-xl);
  stroke-width: var(--openbot-icon-stroke);
}
.image-generation-glow {
  position: absolute;
  inset: 2px;
  background-image: radial-gradient(circle, var(--openbot-text-primary) 1.1px, transparent 1.6px);
  background-repeat: space;
  background-size: 11px 11px;
  -webkit-mask-image: radial-gradient(ellipse at center, var(--openbot-text-primary) 0%, transparent 60%), radial-gradient(ellipse at center, var(--openbot-text-primary) 0%, transparent 62%);
  mask-image: radial-gradient(ellipse at center, var(--openbot-text-primary) 0%, transparent 60%), radial-gradient(ellipse at center, var(--openbot-text-primary) 0%, transparent 62%);
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-size: 72% 62%, 52% 52%;
  mask-size: 72% 62%, 52% 52%;
  -webkit-mask-position: 16% 20%, 30% 32%;
  mask-position: 16% 20%, 30% 32%;
  animation: image-generation-morph 4.2s cubic-bezier(0.35, 1.55, 0.65, 1) infinite, image-generation-breathe 1.9s cubic-bezier(0.66, 0, 0.34, 1) infinite;
}
.image-generation-resolution {
  position: absolute;
  z-index: 1;
  top: 8px;
  right: 8px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface);
  padding: 2px 7px;
  color: var(--openbot-text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--openbot-text-sm);
  white-space: nowrap;
}
.image-generation-meta {
  display: flex;
  width: min(100%, 420px);
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
}
.image-generation-label {
  background: linear-gradient( 90deg, var(--openbot-text-primary) 0%, var(--openbot-text-primary) 30%, var(--openbot-text-muted) 45%, var(--openbot-text-muted) 55%, var(--openbot-text-primary) 70%, var(--openbot-text-primary) 100% );
  background-size: 300% 100%;
  background-clip: text;
  color: transparent;
  font-size: var(--openbot-text-lg);
  font-weight: 550;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.image-generation:not(.image-generation-ready, .image-generation-failed) .image-generation-label {
  animation: image-generation-shine 2.25s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
}
.image-generation-prompt {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.image-generation-error {
  max-width: 100%;
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
  line-height: 17px;
}
.image-generation-preview {
  display: block;
  border: 0;
  background: var(--openbot-bg-control);
  cursor: pointer;
  opacity: 0;
  padding: 0;
  transition: opacity var(--openbot-duration-overlay) ease;
}
.image-generation-preview-visible {
  opacity: 1;
}
.image-generation-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.image-generation-preview:focus-visible, .image-generation-hover-download:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}
.image-generation-hover-download {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  right: 10px;
  bottom: 10px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-glass);
  padding: 5px 10px;
  color: var(--openbot-text-primary);
  cursor: pointer;
  backdrop-filter: blur(12px) saturate(1.15);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  font-size: var(--openbot-text-sm);
  font-weight: 650;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: background-color var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease, border-color var(--openbot-duration-hover) ease, opacity var(--openbot-duration-hover) ease, transform var(--openbot-duration-hover) ease;
}
.image-generation-download-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}
.image-generation-stage:hover .image-generation-hover-download, .image-generation-stage:focus-within .image-generation-hover-download {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.image-generation-hover-download:hover {
  border-color: var(--openbot-border-focus);
  background: var(--openbot-bg-glass);
  color: var(--openbot-text-primary);
}
@keyframes image-generation-morph {
  0% {
    -webkit-mask-size: 52% 46%, 40% 40%;
    mask-size: 52% 46%, 40% 40%;
    -webkit-mask-position: 16% 20%, 30% 32%;
    mask-position: 16% 20%, 30% 32%;
  }
  25% {
    -webkit-mask-size: 46% 58%, 44% 38%;
    mask-size: 46% 58%, 44% 38%;
    -webkit-mask-position: 84% 16%, 66% 30%;
    mask-position: 84% 16%, 66% 30%;
  }
  50% {
    -webkit-mask-size: 60% 44%, 38% 46%;
    mask-size: 60% 44%, 38% 46%;
    -webkit-mask-position: 82% 84%, 62% 68%;
    mask-position: 82% 84%, 62% 68%;
  }
  75% {
    -webkit-mask-size: 48% 54%, 46% 40%;
    mask-size: 48% 54%, 46% 40%;
    -webkit-mask-position: 14% 82%, 34% 66%;
    mask-position: 14% 82%, 34% 66%;
  }
  100% {
    -webkit-mask-size: 52% 46%, 40% 40%;
    mask-size: 52% 46%, 40% 40%;
    -webkit-mask-position: 16% 20%, 30% 32%;
    mask-position: 16% 20%, 30% 32%;
  }
}
@keyframes image-generation-breathe {
  0%, 100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}
@keyframes image-generation-shine {
  0%, 18% {
    background-position: 100% 0;
  }
  82%, 100% {
    background-position: 0% 0;
  }
}
.message-entry-pending .message-shell {
  opacity: 0.7;
}
.pending-send-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--openbot-space-1);
}
.pending-send-status[data-state="failed"] .pending-send-label {
  color: var(--openbot-danger-text);
}
.pending-send-error {
  margin-inline-start: var(--openbot-space-2);
  overflow-wrap: anywhere;
}
.message-entry-user .ui-bubble {
  max-width: min(420px, 100%);
}
.message-copy {
  margin: 0;
  font-size: var(--openbot-text-lg);
  line-height: 20px;
  overflow-wrap: anywhere;
  white-space: pre-line;
  user-select: text;
}
.message-markdown {
  white-space: normal;
}
.message-markdown > *, .message-markdown :is(p, ul, ol, blockquote) {
  margin: 0;
}
.message-markdown > :not(:first-child) {
  margin-top: var(--openbot-space-3);
}
.message-markdown-heading {
  margin: 0;
  color: inherit;
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: var(--openbot-tracking-tight);
}
.message-markdown-heading[data-level="1"] {
  font-size: var(--openbot-text-2xl);
  line-height: var(--openbot-leading-2xl);
}
.message-markdown-heading[data-level="2"] {
  font-size: var(--openbot-text-xl);
  line-height: var(--openbot-leading-xl);
}
.message-markdown-heading:is([data-level="3"], [data-level="4"], [data-level="5"], [data-level="6"]) {
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
.message-markdown strong {
  font-weight: var(--openbot-weight-semibold);
}
.message-markdown del {
  color: var(--openbot-text-secondary);
}
.message-markdown :is(ul, ol) {
  padding-left: var(--openbot-space-6);
}
.message-markdown ul {
  list-style: disc;
}
.message-markdown ul ul {
  list-style: circle;
}
.message-markdown ol {
  list-style: decimal;
}
.message-markdown li + li, .message-markdown li > :is(ul, ol) {
  margin-top: var(--openbot-space-1);
}
.message-markdown-task {
  display: flex;
  align-items: flex-start;
  gap: var(--openbot-space-1-5);
  list-style: none;
}
.message-markdown-checkbox {
  margin-top: var(--openbot-space-1);
  opacity: 1;
}
.message-markdown blockquote {
  border-left: var(--openbot-space-0-5) solid var(--openbot-border-strong);
  padding-left: var(--openbot-space-3);
  color: var(--openbot-text-secondary);
}
.message-markdown blockquote > :not(:first-child) {
  margin-top: var(--openbot-space-2);
}
.message-markdown :not(pre) > code {
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-0-5) var(--openbot-space-1);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-md);
  white-space: break-spaces;
}
.message-markdown hr {
  height: 1px;
  border: 0;
  background: var(--openbot-border-strong);
}
.message-markdown-raw-html {
  display: block;
  color: var(--openbot-text-secondary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-md);
  white-space: pre-wrap;
}
.message-markdown-image {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 360px;
  border-radius: var(--openbot-radius-md);
  object-fit: contain;
}
.message-markdown-image-button {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  padding: 0;
  border-radius: var(--openbot-radius-md);
  cursor: zoom-in;
}
.message-markdown-image-button:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}
.message-markdown-table-scroll {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  border-radius: var(--openbot-radius-md);
  box-shadow: 0 0 0 1px var(--openbot-data-table-ring);
}
.message-markdown-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--openbot-bg-canvas);
  color: var(--openbot-data-table-text);
}
.message-markdown-table :is(th, td) {
  border-right: 1px solid var(--openbot-data-table-border);
  border-bottom: 1px solid var(--openbot-data-table-border);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  overflow-wrap: break-word;
  text-align: left;
  vertical-align: top;
}
.message-markdown-table th {
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-data-table-header-text);
  font-weight: var(--openbot-weight-medium);
}
.message-markdown-table :is(th, td):last-child {
  border-right: 0;
}
.message-markdown-table tbody tr:last-child td {
  border-bottom: 0;
}
.message-markdown-table [data-align="center"] {
  text-align: center;
}
.message-markdown-table [data-align="right"] {
  text-align: right;
}
::highlight(openbot-message-selection) {
  background: var(--openbot-accent-strong);
  color: inherit;
}
::highlight(openbot-quote-target) {
  background: var(--openbot-warning);
  color: var(--openbot-text-on-light);
}
.selection-highlight-layer {
  position: fixed;
  z-index: 18;
  inset: 0;
  pointer-events: none;
}
.selection-highlight-layer span {
  position: fixed;
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-accent-strong);
}
.selection-actions-layer {
  position: fixed;
  z-index: 25;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px) scale(0.97);
  transform-origin: 50% 0;
  transition: opacity var(--openbot-duration-slow) ease-out, transform var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1);
  will-change: top, left, transform;
}
.selection-actions-layer[data-placement="top"] {
  transform-origin: 50% 100%;
}
.selection-actions-layer[data-ready="true"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.selection-actions-bar {
  display: flex;
  max-width: calc(100vw - 24px);
  height: 36px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface-raised);
  padding: 4px;
  box-shadow: 0 14px 34px var(--openbot-shadow-popover-ambient), 0 3px 10px var(--openbot-shadow-popover-ambient), inset 0 0 0 1px var(--openbot-shadow-ring);
  color: var(--openbot-text-primary);
  transition: width var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1);
}
.selection-actions-content, .selection-actions-presets, .selection-actions-more-presets {
  display: flex;
  width: max-content;
  min-width: 0;
  align-items: center;
}
.selection-actions-content {
  height: 28px;
  flex: 0 0 auto;
  gap: 2px;
}
.selection-actions-form-shell {
  display: flex;
  min-width: 0;
  align-items: center;
  overflow: hidden;
  opacity: 1;
  transform: translateX(0);
  transition: max-width var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1), opacity var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1), transform var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1);
}
.selection-actions-form-shell-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-8px);
}
.selection-actions-form {
  display: flex;
  height: 28px;
  flex: 0 0 auto;
  align-items: center;
  overflow: hidden;
  transition: width var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1);
}
.selection-actions-form input {
  width: 100%;
  height: 28px;
  border: 0;
  background: transparent;
  padding: 0 10px 0 11px;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: 400;
  line-height: 28px;
  outline: 0;
}
.selection-actions-form input::placeholder {
  color: var(--openbot-text-muted);
}
.selection-actions-form input:focus-visible {
  outline: 0;
}
.selection-actions-presets {
  max-width: 224px;
  gap: 2px;
  overflow: hidden;
  opacity: 1;
  transform: translateX(0);
  transition: max-width var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1), opacity var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1), transform var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1);
}
.selection-actions-presets-hidden {
  max-width: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-8px);
}
.selection-actions-more-presets {
  max-width: 0;
  gap: 2px;
  margin-left: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1), opacity var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1), margin-left var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1);
}
.selection-actions-presets-expanded .selection-actions-more-presets {
  max-width: 262px;
  margin-left: 2px;
  opacity: 1;
}
.selection-actions-send-shell {
  display: flex;
  min-width: 0;
  max-width: 0;
  align-items: center;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.88);
  transition: max-width var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1), opacity var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1), transform var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1);
}
.selection-actions-send-shell-visible {
  max-width: 30px;
  opacity: 1;
  transform: scale(1);
}
.selection-actions-control, .selection-actions-icon-button, .selection-actions-send {
  display: inline-flex;
  height: 28px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  padding: 0;
  transition: background-color var(--openbot-duration-hover) ease, border-color var(--openbot-duration-hover) ease, box-shadow var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease, opacity var(--openbot-duration-hover) ease, transform var(--openbot-duration-normal) ease;
}
.selection-actions-control {
  gap: 4px;
  border: 1px solid transparent;
  background: transparent;
  padding: 0 9px;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: 430;
  white-space: nowrap;
}
.selection-actions-icon-button, .selection-actions-send {
  width: 28px;
}
.selection-actions-kbd {
  height: 18px;
  margin-left: 2px;
  font-size: var(--openbot-text-xs);
}
.selection-actions-icon-button {
  background: transparent;
  color: var(--openbot-text-secondary);
}
.selection-actions-send {
  background: var(--openbot-text-primary);
  color: var(--openbot-bg-canvas);
}
.selection-actions-control:active, .selection-actions-icon-button:active, .selection-actions-send:active {
  transform: scale(0.94);
}
.selection-actions-divider {
  width: 1px;
  height: 16px;
  flex: 0 0 auto;
  margin: 0 3px;
  background: var(--openbot-border-strong);
}
.selection-actions-more-divider {
  margin-left: 1px;
}
.selection-actions-expand svg {
  transition: transform var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1);
}
.selection-actions-expand[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.selection-actions-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.selection-actions-status, .selection-actions-error {
  display: inline-flex;
  height: 28px;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  font-size: var(--openbot-text-sm);
  white-space: nowrap;
}
.selection-actions-status {
  color: var(--openbot-text-secondary);
}
.selection-actions-error {
  color: var(--openbot-danger);
}
.selection-actions-spinner {
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--openbot-border-strong);
  border-top-color: var(--openbot-text-secondary);
  border-radius: var(--openbot-radius-pill);
  animation: selection-actions-spin 700ms linear infinite;
}
.message-selection-quote {
  max-width: 100%;
  max-height: 124px;
  overflow: auto;
  margin: 0;
  border-left: 2px solid var(--openbot-accent);
  border-radius: 0 var(--openbot-radius-sm) var(--openbot-radius-sm) 0;
  background: var(--openbot-bg-control);
  padding: 6px 8px;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: 17px;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
@media (hover: hover) and (pointer: fine) {
  .selection-actions-control:hover {
    border-color: var(--openbot-border-focus);
    background: var(--openbot-accent-strong);
    box-shadow: 0 0 0 1px var(--openbot-accent-soft);
    color: var(--openbot-text-primary);
  }
  .selection-actions-icon-button:hover {
    background: var(--openbot-bg-control-hover);
    color: var(--openbot-text-primary);
  }
  .selection-actions-send:hover {
    opacity: 0.9;
  }
}
@media (max-width: 480px) {
  .selection-actions-control {
    width: 28px;
    padding: 0;
  }
  .selection-actions-kbd {
    display: none;
  }
  .selection-actions-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .selection-actions-presets-expanded .selection-actions-more-presets {
    max-width: 88px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .selection-actions-layer, .selection-actions-bar, .selection-actions-form, .selection-actions-form-shell, .selection-actions-presets, .selection-actions-more-presets, .selection-actions-send-shell, .selection-actions-expand svg {
    transition: none;
  }
  .selection-actions-spinner {
    animation-duration: 1.4s;
  }
}
@keyframes selection-actions-spin {
  to {
    transform: rotate(360deg);
  }
}
.message-content-blocks {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: 10px;
}
.message-content-resize {
  min-width: 0;
}
.message-content-resize[data-resizing="true"], .agent-queue-panel-resize[data-resizing="true"] {
  overflow: hidden;
  will-change: height;
}
.t-stream-w {
  animation: t-stream-in var(--stream-fade) var(--stream-ease) both;
}
@keyframes t-stream-in {
  from {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .t-stream-w {
    animation: none;
  }
}
.message-entry-agent .ui-bubble:has(:is(.message-data-table-scroll, .message-code-block)) {
  width: min(720px, 100%);
  max-width: min(720px, 100%);
}
.message-entry-agent .ui-bubble:has(.message-data-table-scroll) > .ui-bubble-content {
  width: 100%;
}
.message-entry-agent .message-shell:has(.message-data-table-scroll) {
  align-items: flex-end;
}
.message-code-block {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
}
.message-code-header {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  border-bottom: 1px solid var(--openbot-border);
  background: var(--openbot-bg-control);
  padding: 4px 6px 4px 10px;
}
.message-code-heading {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.message-code-filename {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.message-code-language {
  flex: none;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-border);
  padding: 1px 6px;
  color: var(--openbot-text-readable);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: 16px;
}
.message-code-language:only-child {
  font-family: var(--openbot-font-mono);
}
:where(.ui-button).message-code-copy {
  position: relative;
  height: 26px;
  flex: none;
  gap: var(--openbot-space-1);
  border-radius: var(--openbot-radius-sm);
  padding-inline: 7px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
}
@media (hover: hover) and (pointer: fine) {
  :where(.ui-button).message-code-copy:hover:not(:disabled) {
    background: var(--openbot-bg-control-active);
    box-shadow: 0 0 0 1px var(--openbot-border-strong);
    color: var(--openbot-text-primary);
  }
}
:where(.ui-button).message-code-copy:active:not(:disabled) {
  transform: scale(0.96);
}
:where(.ui-button).message-code-copy::after {
  position: absolute;
  width: 40px;
  height: 40px;
  content: "";
}
.message-code-copy-icons {
  position: relative;
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  display: grid;
  place-items: center;
}
.message-code-copy-icons > span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  filter: blur(4px);
  scale: 0.25;
  transition: opacity var(--openbot-duration-slow) var(--openbot-ease-out), filter var(--openbot-duration-slow) var(--openbot-ease-out), scale var(--openbot-duration-slow) var(--openbot-ease-out);
}
.message-code-copy-icons > span[data-visible="true"] {
  opacity: 1;
  filter: blur(0);
  scale: 1;
}
.message-code-copy-icons svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}
.message-code-scroll {
  width: 100%;
  max-height: 420px;
  overflow: auto;
  margin: 0;
  background: var(--openbot-bg-sidebar);
  padding-block: 8px 10px;
  color: var(--openbot-text-secondary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  line-height: 19px;
  overscroll-behavior-x: contain;
  tab-size: 2;
}
.message-code-scroll:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: -2px;
}
.message-code-scroll > code {
  min-width: 100%;
  width: max-content;
  display: block;
  font: inherit;
}
.message-code-line {
  min-height: 19px;
  display: flex;
}
.message-code-line-number {
  width: 40px;
  flex: none;
  padding-right: 8px;
  color: var(--openbot-text-dim);
  font-size: var(--openbot-text-sm);
  text-align: right;
  user-select: none;
}
.message-code-line-source {
  min-width: 0;
  padding-right: 12px;
  white-space: pre;
}
.message-code-caret {
  width: 2px;
  height: 13px;
  display: inline-block;
  margin-left: 2px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
  transform: translateY(2px);
}
[data-code-token="cmnt"] {
  color: var(--openbot-text-dim);
  font-style: italic;
}
[data-code-token="kwd"], [data-code-token="section"] {
  color: var(--openbot-accent-text);
}
[data-code-token="str"], [data-code-token="insert"] {
  color: var(--openbot-success);
}
[data-code-token="num"], [data-code-token="bool"], [data-code-token="class"] {
  color: var(--openbot-warning);
}
[data-code-token="func"], [data-code-token="type"] {
  color: var(--openbot-text-primary);
}
[data-code-token="oper"], [data-code-token="esc"] {
  color: var(--openbot-text-muted);
}
[data-code-token="err"], [data-code-token="deleted"] {
  color: var(--openbot-danger);
}
@media (prefers-reduced-motion: reduce) {
  .message-code-copy-icons > span {
    transition: none;
  }
}
.message-data-table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-radius: var(--openbot-radius-lg);
  overscroll-behavior-inline: contain;
}
.message-data-table-frame {
  width: 100%;
  min-width: 0;
}
.message-data-table-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-1);
  margin-top: var(--openbot-space-1);
}
.message-data-table-scroll:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}
.message-data-table {
  width: 100%;
  min-width: calc(var(--message-data-table-columns) * 112px);
  overflow: hidden;
  border: 1px solid var(--openbot-data-table-outer-border);
  border-radius: var(--openbot-radius-lg);
  border-spacing: 0;
  background: var(--openbot-bg-surface-raised);
  box-shadow: 0 0 0 0.5px var(--openbot-data-table-ring);
  font-size: var(--openbot-text-md);
}
.message-data-table thead {
  color: var(--openbot-data-table-header-text);
  font-weight: 500;
}
.message-data-table tbody {
  background: var(--openbot-bg-canvas);
}
.message-data-table tbody tr:not(:last-child) td {
  border-bottom: 1px solid var(--openbot-data-table-border);
}
.message-data-table th, .message-data-table td {
  padding: 9px 12px;
  color: var(--openbot-data-table-text);
  font-weight: inherit;
  overflow-wrap: break-word;
  text-align: left;
  vertical-align: top;
}
.message-data-table thead th {
  border-bottom: 1px solid var(--openbot-data-table-border);
  padding-top: 7px;
  padding-bottom: 7px;
  color: var(--openbot-data-table-header-text);
}
.message-data-table th:not(:last-child), .message-data-table td:not(:last-child) {
  border-right: 1px solid var(--openbot-data-table-border);
}
:is(.message-data-table, .message-markdown-table) :is(th, td) :is(a, code) {
  overflow-wrap: anywhere;
}
.message-data-table [data-align="center"] {
  text-align: center;
}
.message-data-table [data-align="right"] {
  text-align: right;
}
.message-comparison-table-yes {
  color: var(--openbot-success);
}
.message-comparison-table-no {
  color: var(--openbot-data-table-header-text);
}
.message-link {
  border-radius: var(--openbot-radius-xs);
  color: inherit;
  font-weight: 560;
  text-decoration-color: var(--openbot-text-muted);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--openbot-duration-hover) ease, text-decoration-color var(--openbot-duration-hover) ease;
}
.message-link-icon {
  position: relative;
  display: inline-flex;
  width: 14px;
  height: 14px;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
  color: currentColor;
  vertical-align: -2px;
}
.message-link-icon img, .message-link-fallback {
  width: 14px;
  height: 14px;
}
.message-link-icon img {
  position: absolute;
  inset: 0;
  border-radius: var(--openbot-radius-xs);
  object-fit: contain;
}
.message-link-fallback {
  opacity: 0.72;
}
.message-link:hover {
  color: var(--openbot-text-primary);
  text-decoration-color: currentColor;
}
.message-link:focus-visible {
  outline: 2px solid var(--openbot-text-secondary);
  outline-offset: 2px;
}
.message-citation {
  position: relative;
  display: inline;
}
.message-citation-mark {
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  margin: 0 2px;
  border: 0;
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-bg-control-hover);
  padding: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  vertical-align: 4px;
  transition: background var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease;
}
.message-citation-mark:hover, .message-citation-mark:focus-visible {
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
}
.message-citation-mark:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}
.anchored-tooltip {
  position: fixed;
  z-index: var(--openbot-layer-tooltip);
  box-sizing: border-box;
  width: max-content;
  max-width: min(280px, calc(100vw - 16px));
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface-raised);
  padding: 6px 8px;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: 500;
  line-height: 15px;
  overflow-wrap: anywhere;
  pointer-events: none;
  text-align: left;
  white-space: normal;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--openbot-duration-fast) ease, transform var(--openbot-duration-fast) ease;
}
.anchored-tooltip[data-placement="bottom"] {
  transform: translateY(-4px);
}
.anchored-tooltip[data-ready="true"] {
  opacity: 1;
  transform: translateY(0);
}
.anchored-tooltip-light {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-surface-light);
  color: var(--openbot-text-on-light);
}
@media (prefers-reduced-motion: reduce) {
  .anchored-tooltip, .anchored-tooltip[data-placement="bottom"], .anchored-tooltip[data-ready="true"] {
    transform: none;
  }
}
.message-citation-footer {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  border-top: 1px solid var(--openbot-border);
  padding-top: 10px;
}
.message-citation-ref {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: 425;
  line-height: 18px;
  text-decoration: none;
}
.message-citation-ref .message-citation-mark {
  flex: 0 0 18px;
  margin: 0;
}
.message-citation-ref-label {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-weight: 550;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.message-citation-separator {
  color: var(--openbot-text-dim);
}
.message-citation-ref-host {
  color: var(--openbot-text-muted);
  white-space: nowrap;
}
.message-citation-arrow {
  display: flex;
  width: 14px;
  height: 14px;
  margin-left: -2px;
  color: var(--openbot-text-dim);
  opacity: 0;
  transform: rotate(45deg) translate(-1px, 1px);
  transition: color var(--openbot-duration-hover) ease, opacity var(--openbot-duration-hover) ease, transform var(--openbot-duration-hover) ease;
}
.message-citation-arrow svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}
.message-citation-ref:hover, .message-citation-ref:focus-visible {
  color: var(--openbot-text-secondary);
}
.message-citation-ref:hover .message-citation-arrow, .message-citation-ref:focus-visible .message-citation-arrow {
  color: var(--openbot-text-secondary);
  opacity: 1;
  transform: rotate(45deg) translate(0, 0);
}
.message-citation-ref:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 3px;
}
[data-slot="bubble"][data-author="user"] .message-citation-mark {
  background: var(--openbot-surface-light);
  color: var(--openbot-text-muted-on-light);
}
[data-slot="bubble"][data-author="user"] .message-citation-mark:hover, [data-slot="bubble"][data-author="user"] .message-citation-mark:focus-visible {
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent);
}
[data-slot="bubble"][data-author="user"] .message-citation-footer {
  border-top-color: var(--openbot-border-on-light);
}
[data-slot="bubble"][data-author="user"] .message-citation-ref-label {
  color: var(--openbot-text-on-light);
}
[data-slot="bubble"][data-author="user"] .message-citation-ref-host {
  color: var(--openbot-text-muted-on-light);
}
[data-slot="bubble"][data-author="user"] .message-citation-separator {
  color: var(--openbot-text-dim-on-light);
}
.message-reply-context {
  max-width: 360px;
  margin: -1px 0 7px;
  border-left: 2px solid var(--openbot-text-dim);
  padding-left: 8px;
  color: var(--openbot-text-secondary);
}
.message-reply-context span {
  display: block;
  margin-bottom: 1px;
  font-size: var(--openbot-text-sm);
  font-weight: 550;
  line-height: 14px;
}
.message-reply-context p {
  overflow: hidden;
  margin: 0;
  font-size: var(--openbot-text-sm);
  line-height: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-slot="bubble"][data-author="user"] .message-reply-context {
  border-left-color: var(--openbot-border-strong);
  color: var(--openbot-text-readable);
}
.message-reply-context[data-opens] {
  position: relative;
  transition: border-left-color var(--openbot-duration-hover) var(--openbot-ease-out);
}
.message-reply-context[data-loading] {
  display: grid;
  align-items: center;
  column-gap: var(--openbot-space-2);
  grid-template-columns: minmax(0, 1fr) auto;
}
.message-reply-context[data-opens]:hover {
  border-left-color: var(--openbot-accent);
}
.message-reply-context .message-reply-open, .message-reply-context .message-reply-open:hover:not(:disabled):not([data-disabled]) {
  position: absolute;
  z-index: 1;
  inset: 0 0 0 -2px;
  width: auto;
  height: auto;
  min-height: 0;
  border-radius: var(--openbot-radius-xs);
  background: none;
  padding: 0;
  cursor: pointer;
}
.message-reply-context .message-reply-open:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}
.message-reply-loading {
  width: 14px;
  height: 14px;
  grid-column: 2;
  grid-row: 1 / span 2;
  animation: message-reply-spin 0.8s linear infinite;
}
.message-reply-context[data-unavailable] {
  border-left-style: dashed;
}
.message-reply-unavailable {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
  margin: -1px 0 7px;
  font-size: var(--openbot-text-sm);
  line-height: 15px;
}
.message-reply-unavailable-icon {
  width: 13px;
  height: 13px;
  flex: none;
}
@keyframes message-reply-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .message-reply-loading {
    animation: none;
  }
}
[data-slot="bubble"][data-author="user"] .message-copy {
  font-size: var(--openbot-text-lg);
}
.message-tag-unavailable {
  display: inline-flex;
  height: 22px;
  align-items: center;
  gap: 4px;
  margin: 0 1px;
  border: 1px dashed var(--openbot-border-strong);
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  padding: 0 6px;
  color: var(--openbot-text-muted);
  font: inherit;
  line-height: 20px;
  vertical-align: middle;
  white-space: nowrap;
}
.message-agent-tag .agent-avatar {
  --agent-avatar-optical-offset: -2px;
  width: 16px;
  height: 16px;
}
.message-file-reference, .composer-file-reference {
  --file-reference-color: var(--openbot-file-default);
  --file-reference-soft: var(--openbot-file-default-soft);
  display: inline-flex;
  min-width: 0;
  max-width: min(240px, calc(100% - 8px));
  align-items: center;
  gap: 4px;
  margin: 0 1px;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  padding: 1px 6px 1px 3px;
  color: var(--file-reference-color);
  font: inherit;
  font-weight: 550;
  line-height: 20px;
  vertical-align: middle;
  white-space: nowrap;
  transition: background-color var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease;
}
.reference-chip.message-reference-chip, .message-file-reference {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: text;
}
:is(.message-data-table, .message-markdown-table) .message-file-reference {
  max-width: 240px;
}
:is( .message-file-reference, .composer-file-reference, .attachment-file-visual, .files-file-visual, .composer-attachment-preview )[data-file-tone="source"] {
  --file-reference-color: var(--openbot-file-blue);
  --file-reference-soft: var(--openbot-file-blue-soft);
}
:is( .message-file-reference, .composer-file-reference, .attachment-file-visual, .files-file-visual, .composer-attachment-preview )[data-file-tone="script"] {
  --file-reference-color: var(--openbot-file-yellow);
  --file-reference-soft: var(--openbot-file-yellow-soft);
}
:is( .message-file-reference, .composer-file-reference, .attachment-file-visual, .files-file-visual, .composer-attachment-preview )[data-file-tone="markup"] {
  --file-reference-color: var(--openbot-file-orange);
  --file-reference-soft: var(--openbot-file-orange-soft);
}
:is( .message-file-reference, .composer-file-reference, .attachment-file-visual, .files-file-visual, .composer-attachment-preview )[data-file-tone="style"] {
  --file-reference-color: var(--openbot-file-teal);
  --file-reference-soft: var(--openbot-file-teal-soft);
}
:is( .message-file-reference, .composer-file-reference, .attachment-file-visual, .files-file-visual, .composer-attachment-preview )[data-file-tone="data"] {
  --file-reference-color: var(--openbot-file-green);
  --file-reference-soft: var(--openbot-file-green-soft);
}
:is( .message-file-reference, .composer-file-reference, .attachment-file-visual, .files-file-visual, .composer-attachment-preview )[data-file-tone="document"] {
  --file-reference-color: var(--openbot-file-red);
  --file-reference-soft: var(--openbot-file-red-soft);
}
:is( .message-file-reference, .composer-file-reference, .attachment-file-visual, .files-file-visual, .composer-attachment-preview )[data-file-tone="media"] {
  --file-reference-color: var(--openbot-file-pink);
  --file-reference-soft: var(--openbot-file-pink-soft);
}
.inline-file-reference-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-button.message-file-reference {
  height: 22px;
  cursor: pointer;
}
.ui-button.message-file-reference:focus-visible, .composer-file-reference:focus-visible {
  outline: 2px solid var(--file-reference-color);
  outline-offset: 2px;
  box-shadow: none;
}
.attachment-reference-visual {
  display: inline-grid;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--openbot-radius-xs);
  background: var(--file-reference-soft);
  color: var(--file-reference-color);
}
.attachment-reference-visual[data-badge-length="3"] {
  width: 20px;
}
.attachment-reference-visual[data-badge-length="4"] {
  width: 24px;
}
.attachment-reference-visual > span {
  font-size: var(--openbot-glyph-sm);
  font-weight: 750;
  letter-spacing: -0.2px;
  line-height: 1;
}
.attachment-reference-visual[data-badge-length="4"] > span {
  font-size: var(--openbot-glyph-xs);
  letter-spacing: -0.4px;
}
.attachment-reference-visual > svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: calc(var(--openbot-icon-stroke) * 20 / 24);
}
[data-slot="bubble"][data-author="user"] .message-file-reference {
  color: var(--file-reference-color);
}
@media (hover: hover) and (pointer: fine) {
  .ui-button.message-file-reference:hover:not(:disabled), .composer-file-reference:hover {
    background-color: var(--file-reference-soft);
    color: var(--file-reference-color);
  }
}
@media (hover: none), (pointer: coarse) {
  .message-file-reference, .composer-file-reference {
    max-width: calc(100% - 8px);
  }
}
.message-error-label {
  margin: 0 0 var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.attachment-file-visual {
  --file-reference-color: var(--openbot-file-default);
  --file-reference-soft: var(--openbot-file-default-soft);
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border-radius: var(--openbot-radius-md);
  background: var(--file-reference-soft);
  color: var(--file-reference-color);
}
.attachment-file-visual svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}
.choice-card {
  display: grid;
  width: min(540px, 100%);
  gap: var(--openbot-space-4);
}
.choice-card-hint {
  margin: calc(-1 * var(--openbot-space-2)) 0 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
  overflow-wrap: anywhere;
}
.choice-options {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface);
}
.choice-option {
  display: flex;
  width: 100%;
  min-height: var(--openbot-control-xl);
  align-items: center;
  gap: var(--openbot-space-2);
  border: 0;
  border-bottom: 1px solid var(--openbot-border);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-lg);
  text-align: left;
  overflow-wrap: anywhere;
}
.choice-option-item:last-child .choice-option {
  border-bottom: 0;
}
.choice-option-item:not([data-disabled]) .choice-option:hover, .choice-option-selected {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}
.choice-option-item:focus-within .choice-option {
  outline: 1px solid var(--openbot-border-focus);
  outline-offset: -1px;
}
.choice-option-item[data-disabled] {
  opacity: 0.5;
}
.choice-key {
  display: grid;
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-muted);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
}
.choice-input {
  width: 100%;
  min-width: 0;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface);
  font-size: var(--openbot-text-lg);
}
.choice-input::placeholder {
  color: var(--openbot-text-muted);
}
.reference-chip.message-reference-chip .reference-chip-icon, .message-file-reference .attachment-reference-visual {
  display: inline-block;
  margin-right: var(--openbot-space-1);
  text-align: center;
  vertical-align: top;
  user-select: none;
}
.message-file-reference .attachment-reference-visual {
  margin-top: var(--openbot-space-0-5);
  font-size: var(--openbot-glyph-sm);
  line-height: var(--openbot-space-4);
}
.message-file-reference .attachment-reference-visual[data-badge-length="4"] {
  font-size: var(--openbot-glyph-xs);
}
.reference-chip.message-reference-chip .agent-avatar {
  display: inline-block;
  height: var(--openbot-space-4);
  vertical-align: top;
}
.message-file-reference .attachment-reference-visual > svg {
  display: inline;
  margin-top: var(--openbot-space-0-5);
  vertical-align: top;
}
.reference-chip.message-reference-chip .reference-chip-icon > svg, .reference-chip.message-reference-chip .agent-avatar > svg {
  display: inline;
  vertical-align: top;
}
.reference-chip.message-reference-chip .reference-chip-icon > svg.lucide {
  margin-top: var(--openbot-space-0-5);
}
.reference-chip.message-reference-chip .agent-avatar > svg {
  margin: -14% 0 0 -14%;
}
.reference-chip.message-reference-chip .reference-chip-name, .message-file-reference .inline-file-reference-name {
  display: inline;
}
.reference-chip.message-reference-chip > .sr-only {
  user-select: none;
}
.message-math-display {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}
.message-math-display > * {
  margin: 0;
  padding: var(--openbot-space-1) 0;
}
.message-code-actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--openbot-space-0-5);
}
.message-preview-expand svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.ui-sliding-tabs.message-preview-switch {
  gap: var(--openbot-space-0-5);
  padding: var(--openbot-space-0-5);
}
.message-preview-switch .ui-sliding-tabs-trigger {
  height: 22px;
  padding: 0 var(--openbot-space-2);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
}
.message-preview-switch .ui-sliding-tabs-pill {
  top: var(--openbot-space-0-5);
  height: 22px;
}
.message-preview-resize {
  overflow: hidden;
}
.message-preview-views {
  position: relative;
}
.message-preview-view:not([data-selected]) {
  position: absolute;
  inset: 0 0 auto;
}
.message-preview-body {
  width: 100%;
  display: grid;
  place-items: center;
  background: var(--openbot-bg-sidebar);
}
.message-preview-body[data-preview-kind="mermaid"] {
  max-height: 420px;
  overflow: auto;
  padding: var(--openbot-space-3);
  overscroll-behavior-x: contain;
}
.message-preview-frame {
  width: 100%;
  height: min(var(--message-preview-height, 160px), 420px);
  display: block;
  border: 0;
  background: var(--openbot-bg-sidebar);
}
.message-preview-diagram {
  max-width: 100%;
  height: auto;
  display: block;
}
.message-preview-status {
  margin: 0;
  padding: var(--openbot-space-6) var(--openbot-space-3);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.message-preview-failure {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  border-bottom: 1px solid var(--openbot-border);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-xs);
}
.message-preview-failure-detail {
  flex-basis: 100%;
  margin: 0;
  overflow-x: auto;
  font-family: var(--openbot-font-mono);
  white-space: pre;
}
.message-preview-backdrop {
  animation: none;
}
.message-preview-dialog {
  width: min(1100px, 100%);
  height: calc(100dvh - var(--openbot-space-6) * 2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  outline: 0;
  border-radius: var(--openbot-radius-xl);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-primary);
  transform-origin: 0 0;
}
.message-preview-dialog:not([data-shown]) {
  opacity: 0;
}
.message-preview-dialog-header {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-4);
  border-bottom: 1px solid var(--openbot-border);
}
.message-preview-dialog-title {
  margin: 0;
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
}
.message-preview-dialog-body {
  min-height: 0;
  flex: 1;
  display: grid;
  overflow: auto;
  background: var(--openbot-bg-sidebar);
}
.message-preview-dialog-body[data-preview-kind="mermaid"] {
  overflow: hidden;
}
.message-preview-canvas {
  position: relative;
  min-height: 0;
  overflow: hidden;
}
.message-preview-canvas-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  outline: 0;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.message-preview-canvas-viewport[data-dragging] {
  cursor: grabbing;
}
.message-preview-canvas-viewport:focus-visible {
  box-shadow: inset 0 0 0 2px var(--openbot-border-focus);
}
.message-preview-canvas-image {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  height: auto;
  opacity: 0;
  transform-origin: 0 0;
  -webkit-user-drag: none;
}
.message-preview-canvas-image[data-ready] {
  opacity: 1;
}
.message-preview-canvas-image[data-settling] {
  transition: transform var(--openbot-duration-slow) var(--openbot-ease-out), width var(--openbot-duration-slow) var(--openbot-ease-out);
}
.message-preview-zoom {
  position: absolute;
  bottom: var(--openbot-space-4);
  left: 50%;
  display: flex;
  align-items: center;
  gap: var(--openbot-space-0-5);
  translate: -50% 0;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-overlay);
  box-shadow: 0 0 0 1px var(--openbot-border);
  padding: var(--openbot-space-1);
}
.message-preview-zoom .ui-button {
  border-radius: var(--openbot-radius-pill);
}
:where(.ui-button).message-preview-zoom-level {
  min-width: 56px;
  font-variant-numeric: tabular-nums;
}
.message-preview-dialog-body .message-preview-frame {
  height: 100%;
}
.chat-visual-frame {
  width: 100%;
  min-width: 0;
  display: block;
  border: 0;
  background: transparent;
  color-scheme: dark;
}
.chat-visual-reply {
  max-width: 720px;
}
.chat-visual-frame-fill {
  box-sizing: border-box;
  height: 100%;
  padding: 12px 16px;
}
.chat-visual-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-xs);
}
.composer-wrap {
  position: relative;
  flex: 0 0 auto;
  padding: 0 var(--openbot-space-1-5) var(--openbot-space-1-5);
}
.team-typing-dots {
  display: flex;
  align-items: center;
  gap: 2px;
}
.team-typing-dots i {
  width: 3px;
  height: 3px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success);
  animation: typing-dot-pulse 900ms ease-in-out infinite;
}
.team-typing-dots i:nth-child(2) {
  animation-delay: var(--openbot-duration-fast);
}
.team-typing-dots i:nth-child(3) {
  animation-delay: var(--openbot-duration-overlay);
}
@media (prefers-reduced-motion: reduce) {
  .agent-row-thinking-dots i, .team-typing-dots i, .image-generation-dots, .image-generation-glow, .image-generation-canvas, .image-generation-preview, .image-generation-label,  .image-generation:not(.image-generation-ready, .image-generation-failed) .image-generation-label, .agent-activity-label {
    animation: none;
    transition: none;
  }
  .image-generation-hover-download {
    transition: none;
  }
}
@media (hover: none), (pointer: coarse) {
  .image-generation-hover-download {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
}
@media (max-width: 620px) {
  .message-entry-agent .ui-bubble:has(.image-generation) {
    width: 100%;
    max-width: 100%;
  }
  .image-generation-stage, .image-generation-meta {
    width: 100%;
  }
}
.composer-reply-preview {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 10px;
  margin: 0 10px 6px;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  padding: 6px 8px 6px 12px;
  box-shadow: 0 7px 22px var(--openbot-shadow-popover-ambient);
}
.composer-reply-preview > div {
  min-width: 0;
  flex: 1;
}
.composer-reply-preview span {
  display: block;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: 550;
  line-height: 14px;
}
.composer-reply-preview p {
  overflow: hidden;
  margin: 1px 0 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.composer-reply-preview > button {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  background: transparent;
  color: var(--openbot-text-muted);
}
.composer-reply-preview > button:hover {
  background: var(--openbot-border);
  color: var(--openbot-text-secondary);
}
.composer {
  position: relative;
  z-index: 11;
  display: grid;
  max-width: none;
  min-height: 96px;
  gap: 4px;
  margin: 0 auto;
  border: 0.5px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  padding: 10px;
  box-shadow: none;
  transition: border-color var(--openbot-duration-hover) var(--openbot-ease-out), box-shadow var(--openbot-duration-hover) var(--openbot-ease-out);
}
.composer[data-compact] {
  grid-template-columns: 28px minmax(0, 1fr) auto;
  min-height: 48px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
}
.composer:focus-within {
  border-color: var(--openbot-text-dim);
  box-shadow: 0 0 0 3px var(--openbot-hover);
}
.composer:has(.composer-editor-surface[aria-disabled="true"]) {
  border-color: var(--openbot-border);
}
.composer button:disabled, .composer-editor-surface[aria-disabled="true"] {
  cursor: default;
}
.composer-button, .dictation-button, .voice-button {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  padding: 0;
  background: var(--openbot-hover);
  color: var(--openbot-text-secondary);
  transition: background-color var(--openbot-duration-hover) var(--openbot-ease-out), color var(--openbot-duration-hover) var(--openbot-ease-out), transform var(--openbot-duration-fast) var(--openbot-ease-out);
}
.composer-button:hover {
  background: var(--openbot-border);
  color: var(--openbot-text-primary);
}
.composer-primary-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.voice-model-progress {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  white-space: nowrap;
}
.voice-morph {
  --voice-morph-duration: 600ms;
  --voice-morph-exit-duration: 360ms;
  --voice-morph-ease: linear(
    0,
    0.057 3.3%,
    0.199 6.7%,
    0.386 10%,
    0.587 13.3%,
    0.773 16.7%,
    0.93 20%,
    1.049 23.3%,
    1.128 26.7%,
    1.171 30%,
    1.183 33.3%,
    1.172 36.7%,
    1.146 40%,
    1.111 43.3%,
    1.075 46.7%,
    1.041 50%,
    1.012 53.3%,
    0.991 56.7%,
    0.976 60%,
    0.967 66.7%,
    0.974 73.3%,
    0.987 80%,
    0.998 86.7%,
    1.004 93.3%,
    1
  );
  --voice-bar-width: 152px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}
.voice-morph-filter {
  position: absolute;
  width: 0;
  height: 0;
}
.voice-morph-goo {
  position: absolute;
  inset: -12px;
  pointer-events: none;
}
.voice-morph-goo-bar {
  opacity: 0.06;
}
.voice-morph-bar, .voice-morph-send-blob, .voice-morph-finish-blob {
  position: absolute;
  top: 12px;
  height: 28px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-primary);
}
.voice-morph-bar {
  right: 46px;
  width: 28px;
  transition: width var(--voice-morph-exit-duration) var(--openbot-ease-out);
}
.voice-morph-send-blob, .voice-morph-finish-blob {
  right: 12px;
  width: 28px;
  opacity: 0;
  transition: opacity 0s linear var(--voice-morph-exit-duration);
}
.voice-morph-finish-blob {
  transform: scale(0.5);
  transition: transform var(--voice-morph-exit-duration) var(--openbot-ease-out), opacity 0s linear var(--voice-morph-exit-duration);
}
.voice-morph[data-recording] .voice-morph-bar {
  width: var(--voice-bar-width);
  transition: width var(--voice-morph-duration) var(--voice-morph-ease);
}
.voice-morph[data-recording] .voice-morph-send-blob {
  opacity: 1;
  transition: none;
}
.voice-morph[data-recording] .voice-morph-finish-blob {
  opacity: 1;
  transform: translateX(-34px) scale(0.8);
  transition: transform var(--voice-morph-duration) var(--voice-morph-ease);
}
.voice-morph-send {
  position: relative;
  display: flex;
}
.voice-morph-slot {
  position: relative;
  display: flex;
  width: 28px;
  height: 28px;
  justify-content: flex-end;
  transition: width var(--voice-morph-exit-duration) var(--openbot-ease-out);
}
.voice-morph[data-recording] .voice-morph-slot {
  width: var(--voice-bar-width);
  transition: width var(--voice-morph-duration) var(--voice-morph-ease);
}
.voice-morph .dictation-button {
  background: transparent;
}
.voice-recording-status {
  display: flex;
  width: 100%;
  min-width: 0;
  height: 28px;
  align-items: center;
  gap: 4px;
  margin: 0;
  border: 0;
  overflow: hidden;
  padding: 0 3px 0 12px;
  color: var(--openbot-text-secondary);
  animation: voice-morph-content-in var(--openbot-duration-slow) var(--openbot-ease-out) var(--openbot-duration-fast) both;
}
.voice-waveform {
  display: flex;
  min-width: 0;
  height: 20px;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, currentColor 24px);
}
.voice-waveform-track {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 3px;
}
.voice-waveform-dot {
  width: 3px;
  height: calc(3px + var(--voice-level, 0) * 15px);
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-pill);
  background: currentColor;
}
.voice-recording-cancel, .voice-recording-finish {
  display: grid;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  padding: 0;
  background: transparent;
  transition: background-color var(--openbot-duration-hover) var(--openbot-ease-out), color var(--openbot-duration-hover) var(--openbot-ease-out), transform var(--openbot-duration-fast) var(--openbot-ease-out);
}
.voice-recording-cancel {
  color: var(--openbot-text-secondary);
}
.voice-recording-finish {
  color: var(--openbot-bg-sidebar);
  animation: voice-morph-content-in var(--openbot-duration-slow) var(--openbot-ease-out) var(--openbot-duration-overlay) both;
}
.voice-morph .voice-recording-cancel:hover:not(:disabled) {
  background: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-primary) 10%, transparent);
  }
  color: var(--openbot-text-primary);
}
.voice-recording-cancel:active, .voice-recording-finish:active {
  transform: scale(0.94);
}
.voice-recording-cancel svg, .voice-recording-finish svg {
  width: 14px;
  height: 14px;
}
.voice-recording-finish svg {
  stroke-width: 3;
}
@keyframes voice-morph-content-in {
  from {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .voice-morph *, .voice-recording-status, .voice-recording-finish {
    transition: none;
    animation: none;
  }
}
.dictation-button:hover:not(:disabled) {
  background: var(--openbot-border);
  color: var(--openbot-text-primary);
}
.composer-button svg, .dictation-button svg, .voice-button svg {
  width: 16px;
  height: 16px;
}
.composer-spinner {
  animation: ui-spin 720ms linear infinite;
}
.voice-button {
  background: var(--openbot-text-primary);
  color: var(--openbot-bg-sidebar);
}
.voice-button-active {
  background: var(--openbot-text-primary);
  color: var(--openbot-bg-sidebar);
}
.voice-button:hover:not(:disabled), .voice-button.ui-button:hover:not(:disabled), .voice-morph .voice-recording-finish:hover:not(:disabled) {
  background: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-primary) 84%, var(--openbot-bg-sidebar));
  }
  color: var(--openbot-bg-sidebar);
}
.composer-input-label, .composer-editor-root {
  --composer-editor-max-height: max(48px, 33dvh);
}
.composer-input-label {
  display: flex;
  min-width: 0;
  min-height: 48px;
  max-height: var(--composer-editor-max-height);
  align-items: flex-end;
  cursor: text;
}
.composer-toolbar {
  display: flex;
  min-height: 28px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.composer[data-compact] .composer-input-label {
  grid-column: 2;
  grid-row: 1;
  min-height: 28px;
}
.composer[data-compact] .composer-toolbar {
  display: contents;
}
.composer[data-compact] .composer-toolbar > .composer-button {
  grid-column: 1;
  grid-row: 1;
}
.composer[data-compact] .composer-toolbar > .composer-primary-actions {
  grid-column: 3;
  grid-row: 1;
}
.composer[data-compact] .composer-editor-root, .composer[data-compact] .composer-editor-surface {
  min-height: 28px;
}
.composer[data-compact] .composer-editor-surface {
  padding: 4px 0;
}
.composer[data-compact] .composer-editor-placeholder {
  top: 4px;
  left: 0;
}
.composer[data-has-attachments] .composer-input-label, .composer[data-has-attachments] .composer-editor-root, .composer[data-has-attachments] .composer-editor-surface {
  min-height: 28px;
}
.composer[data-has-attachments] .composer-editor-surface {
  padding: 4px;
}
.composer[data-has-attachments] .composer-editor-placeholder {
  top: 4px;
}
.composer-editor-root {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  max-height: var(--composer-editor-max-height);
  cursor: text;
}
.composer-editor-surface {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  min-height: 48px;
  max-height: var(--composer-editor-max-height);
  margin: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  resize: none;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 2px 4px 8px;
  caret-color: var(--openbot-text-primary);
  color: var(--openbot-text-primary);
  cursor: text;
  font-size: var(--openbot-text-lg);
  line-height: 20px;
  white-space: pre-wrap;
  word-break: break-word;
  user-select: text;
}
.composer-editor-surface[aria-disabled="true"] {
  pointer-events: none;
}
.composer-editor-root[data-dictating] > [role="textbox"] {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.composer-dictation-draft {
  display: inline;
}
.composer-dictation-word {
  animation: composer-dictation-word-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
  transition: color var(--openbot-duration-slow) var(--openbot-ease-out);
}
.composer-dictation-word[data-interim] {
  color: var(--openbot-text-muted);
}
.composer-dictation-caret {
  display: inline-block;
  width: 2px;
  height: 16px;
  margin-left: 2px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
  vertical-align: -3px;
  animation: composer-dictation-caret 1s ease-in-out infinite;
}
.composer-dictation[data-final] .composer-dictation-caret {
  display: none;
}
@keyframes composer-dictation-word-in {
  from {
    opacity: 0;
    filter: blur(2px);
  }
}
@keyframes composer-dictation-caret {
  50% {
    opacity: 0.2;
  }
}
@media (prefers-reduced-motion: reduce) {
  .composer-dictation-word, .composer-dictation-caret {
    transition: none;
    animation: none;
  }
}
.composer-editor-placeholder {
  position: absolute;
  top: 2px;
  left: 4px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-lg);
  line-height: 20px;
  pointer-events: none;
  user-select: none;
}
.composer-editor-root[data-size="compact"], .composer-editor-root[data-size="compact"] .composer-editor-surface {
  min-height: 28px;
}
.composer-editor-root[data-size="compact"] .composer-editor-surface {
  padding: 4px 0;
}
.composer-editor-root[data-size="compact"] .composer-editor-placeholder {
  top: 4px;
  left: 0;
}
.composer-mention-token.composer-tag-unavailable {
  border: 1px dashed var(--openbot-border-strong);
  background: transparent;
  padding-left: var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
}
.composer-file-reference {
  height: 24px;
  cursor: pointer;
  user-select: none;
}
.mention-picker {
  --mention-picker-overlap: 14px;
  --mention-picker-side-inset: calc(var(--openbot-space-1-5) + 12px);
  --mention-picker-row-height: 29px;
  --mention-picker-gutter: 5px;
  --mention-picker-visible-rows: 7;
  position: absolute;
  z-index: 10;
  right: var(--mention-picker-side-inset);
  bottom: calc(var(--mention-picker-bottom, 0px) - var(--mention-picker-overlap));
  left: var(--mention-picker-side-inset);
  border: 1px solid var(--openbot-queue-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-queue-surface);
  padding-bottom: var(--mention-picker-overlap);
  color: var(--openbot-queue-text);
  box-shadow: none;
  transform-origin: bottom center;
  animation: mention-picker-in var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1) both;
}
.mention-picker-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  height: calc(var(--mention-picker-rows, 0) * var(--mention-picker-row-height) + 2 * var(--mention-picker-gutter));
  max-height: calc( var(--mention-picker-visible-rows) * var(--mention-picker-row-height) + 2 * var(--mention-picker-gutter) );
  overflow-y: auto;
  padding: var(--mention-picker-gutter);
  overscroll-behavior: contain;
  scrollbar-width: none;
  transition: height var(--openbot-duration-normal) var(--openbot-ease-out);
  will-change: height;
}
.mention-picker-list::-webkit-scrollbar {
  display: none;
}
@keyframes mention-picker-in {
  from {
    opacity: 0;
    transform: translateY(5px) scaleY(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}
.mention-picker-option {
  display: flex;
  width: 100%;
  height: var(--mention-picker-row-height);
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  padding: 0 8px;
  color: var(--openbot-queue-text);
  text-align: left;
}
.mention-picker-file-option .attachment-reference-visual {
  width: 20px;
  height: 20px;
}
.mention-picker-option:hover, .mention-picker-option-active {
  background: var(--openbot-hover);
}
.mention-picker-option .agent-avatar {
  --agent-avatar-optical-offset: -2px;
  width: 20px;
  height: 20px;
}
.mention-picker-skill-icon {
  display: grid;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  place-items: center;
  color: var(--openbot-queue-action);
}
.mention-picker-skill-icon > svg {
  width: 15px;
  height: 15px;
}
.mention-picker-option > strong {
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  font-size: var(--openbot-text-lg);
  font-weight: 500;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mention-picker-description {
  min-width: 0;
  flex: 1 1 0;
  overflow: hidden;
  color: var(--openbot-queue-action);
  font-size: var(--openbot-text-md);
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mention-picker-slug {
  flex: 0 0 auto;
  color: var(--openbot-queue-action);
  font-size: var(--openbot-text-md);
  line-height: 18px;
  white-space: nowrap;
}
.mention-picker-status {
  display: flex;
  height: calc(var(--mention-picker-row-height) + 2 * var(--mention-picker-gutter));
  align-items: center;
  margin: 0;
  padding: 0 calc(var(--mention-picker-gutter) + 8px);
  color: var(--openbot-queue-action);
  font-size: var(--openbot-text-md);
  line-height: 18px;
}
.mention-picker-badge {
  margin-left: auto;
  flex: 0 0 auto;
  color: var(--openbot-queue-action);
}
.composer-attachments {
  position: relative;
  z-index: 11;
  display: flex;
  width: 100%;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 2px 0 4px;
}
.composer-attachment {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
}
.composer-attachment[data-kind="image"] {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  padding: 0;
}
.composer-attachment[data-kind="file"] {
  width: 220px;
  max-width: 100%;
  height: 52px;
  gap: 10px;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  padding: 7px 12px 7px 8px;
}
.composer-attachment-copy {
  display: block;
  min-width: 0;
  flex: 1;
}
.composer-attachment-copy strong, .composer-attachment-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.composer-attachment-copy strong {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: 500;
  line-height: 16px;
}
.composer-attachment-copy small {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 14px;
}
.composer-attachment-preview {
  display: grid;
  width: 36px;
  height: 36px;
  overflow: hidden;
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--openbot-radius-md);
  background: var(--file-reference-soft, var(--openbot-hover));
  color: var(--file-reference-color, var(--openbot-text-muted));
  font-size: var(--openbot-text-sm);
  font-weight: 700;
  line-height: 1;
}
.composer-attachment[data-kind="image"] .composer-attachment-preview {
  width: 100%;
  height: 100%;
  border-radius: var(--openbot-radius-media-preview);
}
.composer-attachment-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.message-attachments {
  display: grid;
  width: min(100%, 256px);
  gap: 7px;
  margin-top: 10px;
}
.message-attachment {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px 40px;
  min-width: 0;
  min-height: 56px;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface-raised);
  padding: 7px;
  transition: background-color var(--openbot-duration-hover) ease, border-color var(--openbot-duration-hover) ease;
}
[data-slot="bubble"]:not([data-variant="ghost"]) > [data-slot="bubble-content"] > .message-attachments:last-child {
  margin-bottom: var(--openbot-space-1);
}
[data-slot="bubble"]:not([data-variant="ghost"]) > [data-slot="bubble-content"] > .message-attachments-group:last-child {
  margin-bottom: var(--openbot-space-1);
}
[data-slot="bubble"]:not([data-variant="ghost"]) > [data-slot="bubble-content"] > .message-attachments:last-child .message-attachment {
  border-radius: var(--openbot-radius-bubble-inset);
}
.message-attachments-group {
  display: grid;
  width: min(100%, 256px);
  margin-top: var(--openbot-space-2);
  gap: var(--openbot-space-1-5);
}
.message-attachments-group .message-attachments {
  width: 100%;
  margin-top: 0;
}
.ui-button.attachment-preview-button {
  width: 100%;
  height: 40px;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  border: 0;
  background: transparent;
  padding: 0;
  color: inherit;
  text-align: left;
}
.attachment-preview-button:disabled {
  cursor: default;
}
.attachment-file-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.attachment-file-copy {
  display: grid;
  min-width: 0;
  gap: 1px;
}
.message-attachment strong {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: 560;
  line-height: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.message-attachment small {
  color: var(--openbot-text-readable);
  font-size: var(--openbot-text-sm);
  line-height: 15px;
}
.attachment-open-button {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  padding: 0;
  color: var(--openbot-text-muted);
  transition: background-color var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease, transform var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1);
}
.attachment-open-button svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}
.attachment-open-button:focus-visible, .attachment-preview-button:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}
.attachment-open-button:active {
  transform: scale(0.96);
}
@media (hover: hover) and (pointer: fine) {
  .message-attachment:hover {
    border-color: var(--openbot-border-strong);
    background: var(--openbot-bg-control-hover);
  }
  .attachment-open-button:hover {
    background: var(--openbot-bg-control-active);
    color: var(--openbot-text-primary);
  }
}
.agent-queue-panel {
  --queue-row-height: 29px;
  --queue-composer-overlap: 14px;
  --queue-row-inset-start: 13px;
  --queue-row-inset-end: 8px;
  --queue-row-gutter: 5px;
  position: relative;
  z-index: 10;
  overflow: visible;
  margin: 0 12px calc(-1 * var(--queue-composer-overlap));
  border: 1px solid var(--openbot-queue-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-queue-surface);
  padding-bottom: var(--queue-composer-overlap);
  box-shadow: none;
  animation: queue-panel-in var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1) both;
}
.agent-queue-slot {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.agent-queue-slot[data-open="false"] {
  grid-template-rows: 0fr;
}
.agent-queue-slot-inner {
  min-height: 0;
  overflow: hidden;
}
.agent-queue-panel-resize {
  min-height: 0;
}
.agent-queue-hold {
  margin: 0;
  padding: var(--queue-row-gutter) var(--queue-row-inset-end) 0 var(--queue-row-inset-start);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.message-attachments-group:has(.attachment-media-player), .message-attachments:has(.attachment-media-player) {
  width: min(100%, 360px);
}
.attachment-media-player {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  min-width: 0;
  border-radius: var(--openbot-radius-md);
}
.message-attachment[data-media] {
  grid-template-columns: minmax(0, 1fr) var(--openbot-control-sm) var(--openbot-control-sm);
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-3);
}
.message-attachment[data-media] .attachment-file-visual {
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-muted);
}
.message-attachment[data-media] .attachment-file-visual svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.message-attachment[data-media] .attachment-open-button {
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
}
.message-attachment[data-media] .attachment-open-button svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.message-attachment[data-media="audio"] .attachment-media-player {
  height: var(--openbot-control-xl);
}
.image-gallery {
  position: relative;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.image-gallery-item {
  position: absolute;
}
.image-gallery-tile {
  display: grid;
  width: 100%;
  height: 100%;
  overflow: hidden;
  place-items: center;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
  padding: 0;
  color: var(--openbot-text-muted);
}
.image-gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.image-gallery-tile:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}
.image-gallery-tile-missing > svg {
  width: var(--openbot-space-6);
  height: var(--openbot-space-6);
}
@media (hover: hover) and (pointer: fine) {
  .image-gallery-tile:not(:disabled):hover img {
    transform: scale(1.03);
  }
}
.ui-dialog-overlay.image-lightbox-backdrop {
  background: var(--openbot-bg-overlay);
  animation: none;
}
.ui-dialog-content.image-lightbox {
  position: fixed;
  z-index: calc(var(--openbot-layer-dialog) + 1);
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  color: var(--openbot-text-primary);
  outline: none;
  -webkit-app-region: no-drag;
}
.image-lightbox-chrome {
  animation: image-lightbox-fade-in var(--openbot-duration-overlay) var(--openbot-ease-out);
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}
.image-lightbox[data-closing] .image-lightbox-chrome {
  opacity: 0;
}
.image-lightbox-toolbar {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3) var(--openbot-space-4);
}
.image-lightbox-caption {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: var(--openbot-space-2);
}
.image-lightbox-name {
  overflow: hidden;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.image-lightbox-position {
  flex: none;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
.image-lightbox-actions {
  display: flex;
  flex: none;
  gap: var(--openbot-space-1);
}
.image-lightbox-stage {
  position: relative;
  min-height: 0;
  touch-action: pan-y;
}
.image-lightbox-track {
  position: absolute;
  inset: 0;
  will-change: transform;
}
.image-lightbox-slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  padding: 0 calc(var(--openbot-space-8) * 2);
  transform: translateX(calc(var(--image-lightbox-slide) * 100%));
}
.image-lightbox-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--openbot-radius-md);
  user-select: none;
  will-change: transform;
}
.image-lightbox-image-pending {
  opacity: 0;
}
.image-lightbox-error {
  margin: 0;
  color: var(--openbot-text-muted);
}
.image-lightbox-step {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control);
}
.image-lightbox-step-previous {
  left: var(--openbot-space-4);
}
.image-lightbox-step-next {
  right: var(--openbot-space-4);
}
.image-lightbox-strip {
  position: relative;
  display: flex;
  overflow-x: auto;
  justify-content: safe center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-3) var(--openbot-space-4) var(--openbot-space-4);
  scrollbar-width: none;
}
.image-lightbox-thumb {
  flex: none;
  width: var(--openbot-control-xl);
  height: var(--openbot-control-xl);
  overflow: hidden;
  border-radius: var(--openbot-radius-sm);
  padding: 0;
  opacity: 0.5;
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}
.image-lightbox-thumb[aria-current="true"] {
  box-shadow: 0 0 0 2px var(--openbot-text-primary);
  opacity: 1;
}
.image-lightbox-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.image-lightbox-thumb:focus-visible, .image-lightbox-step:focus-visible, .image-lightbox-action:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .image-lightbox-thumb:hover {
    opacity: 1;
  }
}
@media (max-width: 640px) {
  .image-lightbox-slide {
    padding: 0;
  }
  .image-lightbox-step {
    display: none;
  }
}
@keyframes image-lightbox-fade-in {
  from {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .image-gallery-tile img, .image-lightbox-chrome, .image-lightbox-thumb {
    animation: none;
    transition: none;
  }
}
.composer-wrap:has(.composer-attachment) .agent-queue-panel {
  margin-bottom: 0;
}
.agent-queue-panel-list {
  max-height: calc(7 * var(--queue-row-height) + 2 * var(--queue-row-gutter));
  overflow-y: auto;
  padding: var(--queue-row-gutter) var(--queue-row-inset-end) var(--queue-row-gutter) var(--queue-row-inset-start);
  overscroll-behavior: contain;
}
.agent-queue-item {
  --queue-drag-step: 0;
  position: relative;
  display: grid;
  height: var(--queue-row-height);
  min-height: 0;
  min-width: 0;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  margin: 0;
  border: 0;
  padding: 0;
  border-radius: var(--openbot-radius-md);
  color: var(--openbot-queue-text);
  cursor: grab;
  outline: 0;
  transform: translate3d(0, calc(var(--queue-drag-step) * var(--queue-row-height)), 0);
  transition: height var(--openbot-duration-slow) var(--openbot-ease-out), opacity var(--openbot-duration-fast) ease, transform var(--openbot-duration-slow) var(--openbot-ease-out);
}
.agent-queue-item-entering {
  animation: queue-item-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}
.agent-queue-item-removing {
  height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, -4px, 0) scale(0.985);
  will-change: height, opacity, transform;
}
.agent-queue-panel-dragging .agent-queue-item {
  will-change: transform;
}
.agent-queue-item::before {
  position: absolute;
  z-index: 0;
  inset: 0 calc(var(--queue-row-gutter) - var(--queue-row-inset-end)) 0 calc(var(--queue-row-gutter) - var(--queue-row-inset-start));
  border-radius: var(--openbot-radius-md);
  background: transparent;
  content: "";
  pointer-events: none;
  transition: background-color var(--openbot-duration-hover) ease;
}
.agent-queue-item > * {
  position: relative;
  z-index: 1;
}
.agent-queue-item:hover, .agent-queue-item:focus-visible, .agent-queue-item-drag-over {
  z-index: 1;
}
.agent-queue-item:hover::before, .agent-queue-item:focus-visible::before {
  background: var(--openbot-hover);
}
.agent-queue-panel-dragging .agent-queue-item:not(.agent-queue-item-dragging):hover::before {
  background: transparent;
}
.agent-queue-item:focus-visible {
  box-shadow: 0 0 0 2px var(--openbot-border-focus);
}
.agent-queue-item-dragging {
  z-index: 0;
  cursor: grabbing;
  opacity: 0;
}
.agent-queue-item-dragging::before {
  background: transparent;
  box-shadow: none;
}
.agent-queue-drag-preview {
  position: fixed;
  z-index: var(--openbot-layer-dropdown);
  box-sizing: border-box;
  min-height: 31px;
  margin: 0;
  border: 1px solid var(--openbot-border-strong);
  background: var(--openbot-bg-surface-raised);
  box-shadow: var(--openbot-shadow-raised);
  opacity: 0.96;
  pointer-events: none;
  transform: none;
}
.agent-queue-drag-preview::before {
  display: none;
}
.agent-queue-item-steering {
  color: var(--openbot-text-muted);
}
.agent-queue-item-editing {
  color: var(--openbot-text-muted);
}
.agent-queue-editing-badge {
  flex: none;
  padding: 0 6px;
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 18px;
  white-space: nowrap;
}
.agent-queue-item-has-attachment {
  grid-template-columns: 14px 24px minmax(0, 1fr) auto;
}
.agent-queue-icon {
  display: grid;
  place-items: center;
  color: var(--openbot-queue-action);
}
.agent-queue-icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}
.agent-queue-attachment {
  display: grid;
  width: 24px;
  height: 24px;
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--openbot-queue-border);
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-bg-canvas);
  color: var(--openbot-queue-action);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-glyph-xs);
  line-height: 1;
}
.agent-queue-attachment img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.agent-queue-steer svg, .agent-queue-icon-button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}
.agent-queue-message {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: var(--openbot-text-lg);
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-queue-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--openbot-queue-action);
}
.agent-queue-steer, .agent-queue-icon-button {
  display: inline-flex;
  height: 26px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  padding: 0 4px;
  color: inherit;
  font-size: var(--openbot-text-lg);
  line-height: 18px;
  transition: background var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease;
}
.agent-queue-steer:hover:not(:disabled), .agent-queue-steer:focus-visible, .agent-queue-icon-button:hover:not(:disabled), .agent-queue-icon-button:focus-visible {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
  outline: 0;
}
.agent-queue-steer:disabled, .agent-queue-icon-button:disabled {
  cursor: default;
  opacity: 0.45;
}
.agent-queue-icon-button {
  width: 26px;
  padding: 0;
}
.agent-queue-icon-button.agent-queue-delete:hover:not(:disabled), .agent-queue-icon-button.agent-queue-delete:focus-visible {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
  opacity: 1;
}
@media (max-width: 620px) {
  .agent-queue-panel {
    margin-right: 2px;
    margin-left: 2px;
  }
  .agent-queue-steer {
    width: 26px;
    padding: 0;
  }
  .agent-queue-steer span {
    display: none;
  }
}
@keyframes queue-panel-in {
  from {
    opacity: 0;
    transform: translateY(5px) scale(0.995);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes queue-item-in {
  from {
    opacity: 0;
    transform: translate3d(0, -4px, 0) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}
.agent-tasks-mark {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  --task-list-glyph: 14px;
}
.agent-tasks-menu-title {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agent-task-chips {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--openbot-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.agent-task-chip-row {
  display: flex;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  gap: var(--openbot-space-1);
}
.agent-task-chip.ui-button {
  display: inline-flex;
  min-width: 0;
  max-width: min(100%, 560px);
  height: var(--openbot-control-md);
  align-items: center;
  gap: var(--openbot-space-2);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-pill);
  padding: 0 var(--openbot-space-2) 0 var(--openbot-space-3);
  font-weight: inherit;
  --task-list-glyph: 14px;
}
.agent-task-chip-title {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-task-chip-status {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-task-chip-chevron {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
}
.agent-task-chip-close.ui-button {
  display: grid;
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  color: var(--openbot-text-muted);
}
.agent-task-chip-close svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.agent-task-list {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--openbot-space-0-5);
  min-height: 0;
  overflow-y: auto;
  padding: var(--openbot-space-2);
}
.agent-task-list .agent-tasks-mark {
  width: 16px;
}
.agent-task-list-group {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-0-5);
  margin-top: var(--openbot-space-2);
}
.agent-task-list-day {
  margin: 0;
  padding: var(--openbot-space-1) var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: 500;
}
.agent-tasks-disclosure {
  color: var(--openbot-text-secondary);
}
.agent-tasks-disclosure .agent-tasks-icon {
  color: var(--openbot-text-muted);
  transition: transform var(--openbot-duration-fast) ease;
}
.agent-tasks-disclosure[aria-expanded="true"] .agent-tasks-icon {
  transform: rotate(90deg);
}
.agent-tasks-trigger-dot {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 5px;
  height: 5px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
}
.agent-tasks-panel .file-preview-header {
  --task-list-glyph: 16px;
}
.agent-tasks-panel-origin {
  margin: 0;
  padding: var(--openbot-space-3) var(--openbot-space-4) 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.agent-tasks-panel-queued {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  padding: 0 var(--openbot-space-4);
}
.agent-tasks-panel-queued-text {
  margin: 0;
  overflow: hidden;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-tasks-panel-note {
  margin: 0;
  border-top: 1px solid var(--openbot-border);
  padding: var(--openbot-space-3) var(--openbot-space-4);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.agent-tasks-panel .composer[data-compact] {
  grid-template-columns: minmax(0, 1fr) auto;
}
.agent-tasks-panel .composer[data-compact] > .composer-input-label {
  grid-column: 1;
}
.agent-tasks-panel .composer[data-compact] .composer-primary-actions {
  grid-column: 2;
}
@media (prefers-reduced-motion: reduce) {
  .agent-tasks-disclosure .agent-tasks-icon {
    transition: none;
  }
}
.side-question-empty {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-1-5);
  padding: var(--openbot-space-8) var(--openbot-space-4);
  text-align: center;
}
.side-question-empty > svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  margin-bottom: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  stroke-width: var(--openbot-icon-stroke);
}
.side-question-empty > strong {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  font-weight: 500;
}
.side-question-empty > p {
  max-width: 320px;
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.side-question-composer.composer[data-compact] {
  grid-template-columns: minmax(0, 1fr) auto;
}
.side-question-composer.composer[data-compact] > .composer-input-label {
  grid-column: 1;
}
.side-question-composer.composer[data-compact] .composer-primary-actions {
  grid-column: 2;
}
.speaking-bar {
  display: flex;
  width: min(560px, 100%);
  align-items: center;
  gap: var(--openbot-space-3);
  margin: 0 auto var(--openbot-space-2);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface-raised);
  box-shadow: var(--openbot-shadow-raised);
  padding: var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-2);
  animation: speaking-bar-in var(--openbot-duration-normal) var(--openbot-ease-out) both;
}
@keyframes speaking-bar-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}
.speaking-bar-avatar {
  --agent-avatar-optical-offset: calc(28px * -0.14);
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
}
.speaking-bar-waveform {
  max-width: 120px;
  flex: 0 0 auto;
  color: var(--openbot-accent);
}
.speaking-bar-caption {
  min-width: 0;
  flex: 1;
  margin: 0;
  overflow: hidden;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.voice-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: var(--openbot-space-4);
}
.voice-panel-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-0-5);
}
.voice-panel-name {
  margin: 0;
  font-size: var(--openbot-text-md);
  font-weight: 600;
}
.voice-panel-phase {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.voice-panel-stage {
  display: flex;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-8);
}
.voice-panel-presence {
  position: relative;
  display: grid;
  width: 140px;
  height: 140px;
  place-items: center;
  transform: scale(var(--voice-presence-scale, 1));
  transition: transform var(--openbot-duration-fast) linear, opacity var(--openbot-duration-normal) ease;
}
.voice-panel-presence::before {
  position: absolute;
  inset: -24px;
  border-radius: var(--openbot-radius-pill);
  background: radial-gradient(closest-side, var(--openbot-accent-soft), transparent);
  content: "";
  opacity: 0.5;
  transition: opacity var(--openbot-duration-normal) ease;
}
.voice-panel-presence[data-phase="speaking"]::before {
  opacity: 1;
}
.voice-panel-presence[data-phase="thinking"]::before {
  animation: voice-panel-think 1.6s var(--openbot-ease-in-out) infinite alternate;
}
@keyframes voice-panel-think {
  to {
    opacity: 0.15;
  }
}
.voice-panel-avatar {
  --agent-avatar-optical-offset: calc(112px * -0.14);
  position: relative;
  width: 112px;
  height: 112px;
}
.voice-panel-presence[data-muted] {
  opacity: 0.5;
}
.voice-panel-waveform {
  display: flex;
  width: 141px;
  color: var(--openbot-text-secondary);
  opacity: 0;
  transition: opacity var(--openbot-duration-normal) ease;
}
.voice-panel-waveform[data-phase] {
  opacity: 1;
}
.voice-panel-waveform[data-phase="speaking"] {
  color: var(--openbot-accent);
}
.voice-panel-captions {
  width: 100%;
  min-height: calc(var(--openbot-leading-xl) * 4);
  overflow-y: auto;
  text-align: center;
}
.voice-panel-caption {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-xl);
  line-height: var(--openbot-leading-xl);
}
.voice-panel-caption[data-empty] {
  color: var(--openbot-text-muted);
}
.voice-panel-error {
  color: var(--openbot-danger);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.voice-panel-controls {
  display: flex;
  justify-content: center;
  gap: var(--openbot-space-4);
}
.voice-panel-control {
  border-radius: var(--openbot-radius-pill);
  transition: background-color var(--openbot-duration-fast) ease, color var(--openbot-duration-fast) ease;
}
@media (prefers-reduced-motion: reduce) {
  .speaking-bar, .voice-panel-presence[data-phase="thinking"]::before {
    animation: none;
  }
  .voice-panel-presence {
    transform: none;
  }
}
.voice-player {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-top: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
}
.voice-player-toggle {
  flex: none;
  border-radius: var(--openbot-radius-pill);
}
.voice-player-toggle svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}
.voice-player-track {
  flex: none;
}
.voice-player-bars {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 24px;
}
.voice-player-bar {
  width: 2px;
  height: calc(3px + var(--voice-peak, 0) * 17px);
  border-radius: var(--openbot-radius-pill);
  background: currentColor;
  opacity: 0.45;
}
.voice-player-bar[data-played] {
  background: var(--openbot-accent);
  opacity: 1;
}
.voice-player-time {
  min-width: 3ch;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
.conversation-panel:has(.settings-panel) .conversation-header, .conversation-panel:has(.settings-panel) .conversation-scroll, .conversation-panel:has(.settings-panel) .composer-wrap {
  width: calc(100% - var(--settings-panel-width, 296px));
}
.conversation-panel:has(.settings-panel) .chat-search {
  right: calc(var(--settings-panel-width, 296px) + 16px);
  max-width: calc(100% - var(--settings-panel-width, 296px) - 32px);
}
.conversation-panel:has(#browser-side-panel) .chat-search, .conversation-panel:has(#file-preview-panel) .chat-search {
  right: calc(var(--browser-panel-width, 380px) + 16px);
  max-width: calc(100% - var(--browser-panel-width, 380px) - 32px);
}
.conversation-panel:has(#browser-side-panel) .conversation-header, .conversation-panel:has(#browser-side-panel) .conversation-scroll, .conversation-panel:has(#browser-side-panel) .composer-wrap, .conversation-panel:has(#file-preview-panel) .conversation-header, .conversation-panel:has(#file-preview-panel) .conversation-scroll, .conversation-panel:has(#file-preview-panel) .composer-wrap {
  width: 100%;
}
@keyframes message-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes agent-activity-dot {
  0%, 60%, 100% {
    opacity: 0.34;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-2px);
  }
}
@keyframes agent-picker-in {
  from {
    opacity: 0;
    transform: translateY(-3px) scale(0.995);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes settings-panel-in {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes browser-control-pulse {
  0%, 100% {
    opacity: 0.55;
    transform: scale(0.88);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}
@media (prefers-reduced-motion: reduce) {
  .browser-panel, .remote-desktop-workspace, .message-entry, .chat-action-entry-animated, .agent-activity-entry, .agent-activity-content, .agent-activity-avatar, .agent-row-thinking-dots i, .agent-row-agent-status-responded, .agent-row-agent-status-unread, .mention-picker, .mention-picker-list, .settings-panel {
    animation: none;
    transition: none;
  }
  .agent-activity-avatar, .agent-activity-entry[data-state="exiting"] .agent-activity-avatar {
    transform: none;
  }
  .agent-queue-item {
    animation: none;
    transition: none;
  }
  .agent-queue-panel {
    transition: none;
  }
  .agent-queue-slot {
    transition: none;
  }
  .agent-queue-panel-resize, .message-content-resize {
    will-change: auto;
  }
  .computer-control-dot {
    animation: none;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes modal-in {
  from {
    opacity: 0;
    transform: scale(0.97) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.attachment-drop-overlay {
  position: absolute;
  z-index: 60;
  inset: 12px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px dashed color-mix(in srgb, var(--accent) 70%, var(--openbot-text-primary));
  }
  border-radius: var(--openbot-radius-lg);
  background: var(--background);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--background) 38%, transparent);
  }
  color: var(--text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: 650;
  backdrop-filter: blur(3px);
  pointer-events: none;
}
.side-panel-header {
  position: absolute;
  z-index: 16;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
  width: var(--side-panel-width, 380px);
  height: var(--left-header-height, 38px);
  min-width: 0;
  padding: 0 var(--openbot-space-2);
  container: side-panel-header / inline-size;
}
.side-panel-header::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: var(--openbot-icon-lg);
  translate: 0 -50%;
  background: var(--openbot-border-strong);
  content: "";
  pointer-events: none;
}
.side-panel-tabs {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--openbot-space-1);
  min-width: 0;
}
.side-panel-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--openbot-space-0-5);
  color: var(--openbot-text-muted);
}
.side-panel-actions svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.side-panel-tab {
  position: relative;
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: var(--openbot-space-1-5);
  min-width: 0;
  height: var(--openbot-control-sm);
  padding: 0 var(--openbot-space-2) 0 var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-md);
  color: var(--openbot-text-secondary);
}
.side-panel-tab:hover {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}
.side-panel-tab[data-selected] {
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
}
.side-panel-tab + .side-panel-tab::before {
  position: absolute;
  top: 50%;
  left: calc(var(--openbot-space-1) / -2 - 0.5px);
  width: 1px;
  height: var(--openbot-icon-lg);
  translate: 0 -50%;
  background: var(--openbot-border-strong);
  content: "";
  pointer-events: none;
}
.side-panel-tab:is([data-selected], :hover)::before, .side-panel-tab:is([data-selected], :hover) + .side-panel-tab::before {
  opacity: 0;
}
.side-panel-tab-select {
  display: block;
  height: auto;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 0;
  cursor: pointer;
}
.side-panel-tab-select:hover:not(:disabled):not([data-disabled]) {
  background: transparent;
  color: inherit;
}
.side-panel-tab-close {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  padding: 0;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.side-panel-tab-icon, .side-panel-tab-x {
  grid-area: 1 / 1;
}
.side-panel-tab-icon {
  display: grid;
  opacity: 0.7;
}
.side-panel-tab-icon svg, .side-panel-tab-x {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.side-panel-tab-x {
  opacity: 0;
}
.side-panel-tab:is(:hover, :focus-within) .side-panel-tab-close {
  background: var(--openbot-bg-control-hover);
}
.side-panel-tab:is(:hover, :focus-within) .side-panel-tab-icon {
  opacity: 0;
}
.side-panel-tab:is(:hover, :focus-within) .side-panel-tab-x {
  opacity: 1;
}
.side-panel-tab-close:hover:not(:disabled):not([data-disabled]) {
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
}
.side-panel-tab-select:focus-visible {
  box-shadow: var(--openbot-focus-ring);
  outline: none;
}
@container side-panel-header (max-width: 480px) {
  .side-panel-tabs:has(> .side-panel-tab:nth-child(4)) {
    --side-panel-tabs-compact: 1;
  }
}
@container side-panel-header (max-width: 360px) {
  .side-panel-tabs:has(> .side-panel-tab:nth-child(3)) {
    --side-panel-tabs-compact: 1;
  }
}
@container style(--side-panel-tabs-compact: 1) {
  .side-panel-tab:not([data-selected]) {
    padding: 0 var(--openbot-space-1-5);
  }
  .side-panel-tab:not([data-selected]) .side-panel-tab-select {
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }
  .side-panel-tab:not([data-selected]) .side-panel-tab-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .side-panel-tab:not([data-selected], :focus-within) .side-panel-tab-close {
    background: transparent;
  }
  .side-panel-tab:not([data-selected], :focus-within) .side-panel-tab-icon {
    opacity: 0.7;
  }
  .side-panel-tab:not([data-selected], :focus-within) .side-panel-tab-x {
    opacity: 0;
  }
}
.side-panel-docked > :is(.browser-panel, .settings-panel) {
  top: var(--left-header-height, 38px);
}
.app-frame-edge .side-panel-docked > :is(.browser-panel, .settings-panel)::before {
  top: -1px;
}
.side-panel-docked :is(.side-panel-pane-header, .side-panel-pane-title, .side-panel-pane-close) {
  display: none;
}
.side-panel-docked .settings-panel-header > .side-panel-pane-close {
  display: inline-flex;
  visibility: hidden;
}
.side-panel-empty {
  justify-content: center;
}
.side-panel-launcher {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1-5);
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  padding: var(--openbot-space-6);
}
.side-panel-launch {
  justify-content: flex-start;
  gap: var(--openbot-space-3);
}
.side-panel-maximized > :is(.browser-panel, .settings-panel, .side-panel-header) {
  width: 100%;
}
.side-panel-maximized > .side-panel-header::before, .side-panel-maximized .right-panel-resizer {
  display: none;
}
.side-panel-maximized > :is(.conversation-header, .conversation-scroll, .composer-wrap) {
  visibility: hidden;
}
:is(.side-panel-launch, .side-panel-menu-item) svg {
  flex: none;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
}
.composer-notice {
  --notice-composer-overlap: 14px;
  --notice-inset: 6px;
  --notice-accent: var(--openbot-warning);
  --notice-surface: var(--openbot-warning-soft);
  position: relative;
  z-index: 10;
  display: flex;
  margin: 0 12px calc(-1 * var(--notice-composer-overlap));
  padding: var(--notice-inset) var(--notice-inset) calc(var(--notice-inset) + var(--notice-composer-overlap)) 12px;
  align-items: center;
  gap: 10px;
  border: none;
  border-radius: var(--openbot-radius-card);
  background: var(--notice-surface);
  animation: queue-panel-in var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1) both;
}
.composer-notice[data-tone="danger"] {
  --notice-accent: var(--openbot-danger-text);
  --notice-surface: var(--openbot-danger-soft);
}
.composer-notice:not(:has(.ui-button)) {
  --notice-inset: 8px;
  padding-right: 12px;
}
.composer-notice-icon {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--notice-accent);
}
.composer-notice .ui-button {
  border-color: transparent;
  background: var(--notice-accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--notice-accent) 14%, transparent);
  }
  color: var(--notice-accent);
}
@media (hover: hover) {
  .composer-notice .ui-button:hover:not(:disabled):not([data-disabled]) {
    background: var(--notice-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--notice-accent) 24%, transparent);
    }
    color: var(--notice-accent);
  }
}
.composer-notice-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 0;
}
.composer-notice-copy strong {
  color: var(--notice-accent);
  font-size: var(--openbot-text-sm);
  font-weight: 600;
  line-height: 1.35;
}
.composer-notice-copy p {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: 1.35;
}
.composer-notice-dismiss {
  flex: none;
  align-self: flex-start;
}
.composer-notice .composer-notice-dismiss {
  background: transparent;
  color: var(--notice-accent);
}
@media (hover: hover) {
  .composer-notice .composer-notice-dismiss:hover:not(:disabled):not([data-disabled]) {
    background: var(--notice-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--notice-accent) 18%, transparent);
    }
  }
}
.composer-notice .composer-notice-code-fallback {
  flex: none;
  border-color: var(--notice-accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--notice-accent) 45%, transparent);
  }
  background: transparent;
}
.context-meter-trigger {
  color: var(--openbot-text-muted);
}
.context-meter-ring {
  width: var(--openbot-icon-md);
}
.context-meter-ring .ui-radial-progress-track, .context-meter-ring .ui-radial-progress-indicator {
  stroke-width: 6;
}
.context-meter-ring[data-level="quiet"] {
  --ui-radial-progress-color: var(--openbot-text-dim);
}
.context-meter-ring[data-level="normal"] {
  --ui-radial-progress-color: var(--openbot-text-secondary);
}
.context-meter-ring[data-compacting] {
  --ui-radial-progress-color: var(--openbot-warning);
}
.context-meter-ring[data-compacting] .ui-radial-progress-chart {
  animation: ui-spin 900ms linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .context-meter-ring[data-compacting] .ui-radial-progress-chart {
    animation: none;
  }
}
.context-meter-popover {
  z-index: var(--openbot-layer-popover);
  display: flex;
  width: 280px;
  flex-direction: column;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3) var(--openbot-space-4) var(--openbot-space-4);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  transform-origin: var(--kb-popover-content-transform-origin);
  animation: ui-menu-in var(--ui-menu-duration) var(--ui-menu-ease) both;
}
.context-meter-popover:not([data-expanded]) {
  animation: ui-menu-out var(--ui-menu-duration) var(--ui-menu-ease) both;
}
@media (prefers-reduced-motion: reduce) {
  .context-meter-popover, .context-meter-popover:not([data-expanded]) {
    animation: none;
  }
}
.context-meter-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.context-meter-title {
  margin: 0;
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
}
.context-meter-percent {
  color: var(--openbot-text-secondary);
  font-variant-numeric: tabular-nums;
}
.context-meter-percent[data-level="warning"] {
  color: var(--openbot-warning-text);
}
.context-meter-percent[data-level="danger"] {
  color: var(--openbot-danger-text);
}
.context-meter-tokens, .context-meter-note {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.context-meter-footer {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1-5);
  margin: 0 calc(-1 * var(--openbot-space-4)) calc(-1 * var(--openbot-space-4));
  border-top: 1px solid var(--openbot-border);
  padding: var(--openbot-space-1-5);
}
.context-meter-new-chat {
  width: 100%;
  height: var(--openbot-control-md);
  justify-content: flex-start;
  gap: var(--openbot-space-2);
  border-radius: var(--ui-menu-item-radius);
  padding: 0 var(--ui-menu-inset);
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-regular);
}
.context-meter-new-chat:is(:hover, :focus-visible):not(:disabled) {
  background: var(--ui-menu-item-hover);
}
.context-meter-new-chat > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  color: var(--openbot-text-secondary);
}
.context-meter-tokens {
  margin-top: calc(-1 * var(--openbot-space-2));
  font-variant-numeric: tabular-nums;
}
.context-usage-bar {
  position: relative;
  display: flex;
  height: var(--openbot-space-2);
  gap: var(--openbot-space-0-5);
}
.context-usage-segment {
  min-width: var(--openbot-space-1);
  flex-basis: 0;
  border-radius: var(--openbot-radius-xs);
  background: var(--context-color);
}
.context-usage-segment[data-category="used"] {
  --context-color: var(--openbot-text-secondary);
}
.context-meter-popover:has(.context-meter-percent[data-level="warning"]) [data-category="used"] {
  --context-color: var(--openbot-warning);
}
.context-meter-popover:has(.context-meter-percent[data-level="danger"]) [data-category="used"] {
  --context-color: var(--openbot-danger);
}
.context-usage-segment[data-category="free"] {
  min-width: 0;
  background: var(--openbot-border);
}
.context-meter-popover [data-category="systemPrompt"] {
  --context-color: var(--openbot-chart-storage-workspaces);
}
.context-meter-popover [data-category="memoryFiles"] {
  --context-color: var(--openbot-chart-storage-chats);
}
.context-meter-popover [data-category="tools"] {
  --context-color: var(--openbot-chart-storage-downloads);
}
.context-meter-popover [data-category="skills"] {
  --context-color: var(--openbot-chart-storage-runtimes);
}
.context-meter-popover [data-category="toolResults"] {
  --context-color: var(--openbot-chart-storage-files);
}
.context-meter-popover [data-category="messages"] {
  --context-color: var(--openbot-text-secondary);
}
.context-meter-popover [data-category="other"] {
  --context-color: var(--openbot-text-dim);
}
.context-meter-popover .context-meter-category[data-category="free"] {
  --context-color: var(--openbot-border);
}
.context-meter-categories {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.context-meter-category {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-0-5) 0;
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.context-meter-swatch {
  width: var(--openbot-space-2);
  height: var(--openbot-space-2);
  align-self: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--context-color);
}
.context-meter-category-label {
  overflow: hidden;
  color: var(--openbot-text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.context-meter-category-tokens {
  color: var(--openbot-text-primary);
  font-variant-numeric: tabular-nums;
}
.context-usage-threshold {
  position: absolute;
  top: calc(-1 * var(--openbot-space-1));
  bottom: calc(-1 * var(--openbot-space-1));
  width: var(--openbot-space-0-5);
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-text-primary);
  transform: translateX(-50%);
}
.context-compaction-notice[data-tone="success"] {
  --notice-accent: var(--openbot-success-text);
  --notice-surface: var(--openbot-success-soft);
}
.context-compaction-notice[data-leaving] {
  animation: context-compaction-notice-out var(--openbot-duration-toast-exit) var(--openbot-ease-in-out) forwards;
}
@keyframes context-compaction-notice-out {
  to {
    opacity: 0;
    transform: translateY(100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .context-compaction-notice[data-leaving] {
    animation: context-compaction-notice-fade 1ms forwards;
  }
}
@keyframes context-compaction-notice-fade {
  to {
    opacity: 0;
  }
}
.context-compaction-notice .composer-notice-icon {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.context-compaction-notice-copy {
  min-width: 0;
  flex: 1;
  margin: 0;
  overflow: hidden;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.context-compaction-notice-copy strong {
  color: var(--notice-accent);
  font-weight: 600;
}
.context-compaction-notice:has(.composer-notice-dismiss) {
  --notice-inset: 8px;
}
.context-compaction-notice .composer-notice-dismiss {
  width: var(--openbot-control-xs);
  height: var(--openbot-control-xs);
  min-height: 0;
  margin-block: calc(-1 * var(--openbot-space-1));
  padding: 0;
  align-self: center;
}
.context-compaction-notice-percent {
  flex: none;
  color: var(--notice-accent);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}
.context-compaction-body {
  display: flex;
  min-width: 0;
  max-width: 100%;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-2);
}
.context-compaction-icon {
  display: inline-grid;
  place-items: center;
}
.context-compaction-icon svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.context-compaction-marker[data-status="completed"] .context-compaction-icon {
  color: var(--openbot-success-text);
}
.context-compaction-marker[data-status="failed"] .context-compaction-icon {
  color: var(--openbot-warning-text);
}
.context-compaction-marker .chat-action-marker-content {
  flex-wrap: wrap;
  justify-content: center;
  min-width: 0;
  white-space: normal;
}
.context-compaction-detail {
  white-space: normal;
}
.conversation-interaction-card {
  box-sizing: border-box;
  min-width: 0;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
  padding: var(--openbot-space-4);
}
.conversation-interaction-header {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--openbot-space-3);
}
.conversation-interaction-header > :is(strong, h2) {
  min-width: 0;
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-lg);
  overflow-wrap: anywhere;
}
.conversation-interaction-status[data-slot="badge"] {
  flex: 0 0 auto;
  gap: var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-md);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.conversation-interaction-status svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.conversation-interaction-spinner {
  animation: ui-spin 1s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .conversation-interaction-spinner {
    animation: none;
  }
}
.browser-takeover-card {
  display: flex;
  width: min(540px, 100%);
  margin: var(--openbot-space-3) 0 var(--openbot-space-6);
  flex-direction: column;
  gap: var(--openbot-space-4);
  animation: browser-takeover-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}
.browser-takeover-copy {
  margin-top: calc(-1 * var(--openbot-space-2));
  display: grid;
  gap: var(--openbot-space-1);
}
.browser-takeover-copy p {
  margin: 0;
  max-width: 54ch;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-md);
}
.browser-takeover-preview {
  min-width: 0;
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-canvas);
}
.browser-takeover-preview-bar {
  display: flex;
  height: var(--openbot-control-sm);
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-1-5);
  border-bottom: 1px solid var(--openbot-border);
  background: var(--openbot-bg-control);
  padding: 0 var(--openbot-space-3);
  color: var(--openbot-text-secondary);
}
.browser-takeover-preview-bar svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.browser-takeover-preview-bar span, .browser-takeover-preview-bar small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser-takeover-preview-bar span {
  min-width: 0;
  flex: 1;
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.browser-takeover-preview-bar small {
  max-width: 42%;
  color: var(--openbot-text-readable);
  font-size: var(--openbot-text-sm);
}
.browser-takeover-preview-viewport {
  display: grid;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  place-items: stretch;
  background: var(--openbot-bg-control);
}
.browser-takeover-preview-open.ui-button {
  display: grid;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.browser-takeover-preview-open > * {
  grid-area: 1 / 1;
}
.browser-takeover-preview-open-label {
  display: inline-flex;
  align-items: center;
  justify-self: center;
  align-self: center;
  gap: var(--openbot-space-1);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-canvas);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}
.browser-takeover-preview-open-label > svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  stroke-width: var(--openbot-icon-stroke);
}
.browser-takeover-preview-open:hover .browser-takeover-preview-open-label, .browser-takeover-preview-open:focus-visible .browser-takeover-preview-open-label {
  opacity: 1;
}
.browser-takeover-preview-viewport img, .browser-takeover-preview-skeleton {
  width: 100%;
  height: 100%;
}
.browser-takeover-preview-viewport img {
  display: block;
  object-fit: cover;
}
.browser-takeover-preview-fallback {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  padding: var(--openbot-space-6);
  text-align: center;
}
.browser-takeover-preview-fallback svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  margin-bottom: var(--openbot-space-1);
  stroke-width: var(--openbot-icon-stroke);
}
.browser-takeover-preview-fallback strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser-takeover-preview-fallback span {
  max-width: 100%;
  overflow: hidden;
  color: var(--openbot-text-readable);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser-takeover-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.browser-takeover-actions .ui-button {
  transition: transform var(--openbot-duration-fast) var(--openbot-ease-out);
}
.browser-takeover-actions .ui-button:active:not(:disabled) {
  transform: scale(0.97);
}
@keyframes browser-takeover-in {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.question-prompt-bubble.ui-bubble {
  width: min(540px, 100%);
  max-width: 100%;
}
.question-prompt-bubble > .ui-bubble-content {
  width: 100%;
  border-color: var(--openbot-border);
  background: var(--openbot-bg-canvas);
}
.question-prompt-complete {
  min-width: 0;
  display: grid;
  gap: var(--openbot-space-3);
}
.question-prompt-complete-header, .question-prompt-complete-status {
  display: flex;
  align-items: center;
}
.question-prompt-complete-header {
  min-width: 0;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  min-height: 24px;
}
.question-prompt-complete-status {
  min-width: 0;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-primary);
}
.question-prompt-complete-status svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  color: var(--openbot-success);
  stroke-width: var(--openbot-icon-stroke);
}
.question-prompt-complete:not([data-state="answered"]) .question-prompt-complete-status svg {
  color: var(--openbot-text-muted);
}
.question-prompt-complete-status strong {
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-lg);
  letter-spacing: var(--openbot-tracking-tight);
}
.question-prompt-complete-answers.ui-item-group {
  gap: var(--openbot-space-3);
  border: 0;
  border-radius: 0;
  background: transparent;
}
.question-prompt-complete-answers .ui-item {
  min-height: 0;
  border: 0;
  padding: 0;
}
.question-prompt-complete-answers .ui-item-title, .question-prompt-complete-answers .ui-item-description {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}
.question-prompt-complete-answers .ui-item-title {
  font-weight: var(--openbot-weight-regular);
}
.question-prompt-header {
  min-width: 0;
  min-height: var(--openbot-control-xs);
}
.question-prompt-header h2 {
  margin: 0;
  padding-top: var(--openbot-space-0-5);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-lg);
  letter-spacing: var(--openbot-tracking-tight);
}
.question-prompt-navigation {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-0-5);
}
.question-prompt-layout {
  position: relative;
  min-width: 0;
}
.question-prompt-navigation-root.ui-questionnaire {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--openbot-space-4);
}
.question-prompt-navigation-button.ui-button {
  width: 22px;
  height: 22px;
  min-height: 22px;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  background: transparent;
  padding: 0;
  color: var(--openbot-text-muted);
  transition: none;
}
.question-prompt-navigation-button.ui-button:hover:not(:disabled) {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}
.question-prompt-navigation-button.ui-button:focus-visible {
  background: var(--openbot-bg-control-hover);
  box-shadow: 0 0 0 1px var(--openbot-border-strong);
  color: var(--openbot-text-primary);
}
.question-prompt-navigation-button.ui-button:disabled {
  background: transparent;
  color: var(--openbot-text-dim);
  opacity: 0.52;
}
.question-prompt-navigation-button svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.question-prompt-navigation .ui-questionnaire-progress {
  min-width: 48px;
  padding-inline: var(--openbot-space-1);
  font-family: var(--openbot-font-sans);
  text-align: center;
}
.question-prompt-cancel {
  margin-left: var(--openbot-space-1);
}
.question-prompt-stage {
  min-width: 0;
  overflow: hidden;
  transition: height var(--page-slide-dur) var(--page-slide-ease);
}
.question-prompt-stage .question-prompt-page {
  bottom: auto;
  display: grid;
  gap: var(--openbot-space-3);
}
.question-prompt-stage:not([data-transitioning]) .question-prompt-page:not([aria-hidden="true"]) {
  position: relative;
}
.question-prompt-stage[data-preparing], .question-prompt-stage[data-preparing] .t-page {
  transition: none;
}
.question-prompt-options.ui-item-group {
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface);
}
.question-prompt-options > :is(.ui-questionnaire-choice, .question-prompt-custom-row) {
  transition: background-color var(--openbot-duration-hover) ease, box-shadow var(--openbot-duration-hover) ease;
}
.question-prompt-options > .ui-questionnaire-choice:hover:not([data-disabled]) {
  background: var(--openbot-bg-control-hover);
}
.question-prompt-options > .ui-questionnaire-choice:focus-within {
  outline: 1px solid var(--openbot-border-strong);
  outline-offset: -1px;
  background: var(--openbot-bg-control-hover);
}
.question-prompt-options > .ui-questionnaire-choice[data-checked] {
  background: var(--openbot-bg-control-active);
}
.question-prompt-options .ui-item {
  min-height: 48px;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-2) var(--openbot-space-3);
}
.question-prompt-options .ui-item-title, .question-prompt-options .ui-item-description {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
.question-prompt-options .ui-kbd {
  width: 20px;
  min-width: 20px;
  border-color: var(--openbot-border);
  background: var(--openbot-hover);
  color: var(--openbot-text-muted);
}
.question-prompt-options > .ui-questionnaire-choice[data-checked] .ui-kbd {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-secondary);
}
.question-prompt-choice-arrow {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  color: var(--openbot-text-muted);
  opacity: 0;
  transform: translateX(-3px);
  transition: opacity var(--openbot-duration-hover) ease, transform var(--openbot-duration-hover) var(--openbot-ease-out);
}
.question-prompt-choice-arrow svg {
  width: 100%;
  height: 100%;
  stroke-width: var(--openbot-icon-stroke);
}
.question-prompt-options > .ui-questionnaire-choice:is(:hover, :focus-within, [data-checked]) .question-prompt-choice-arrow {
  opacity: 1;
  transform: translateX(0);
}
.question-prompt-custom-row {
  min-width: 0;
  min-height: 44px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-1-5) var(--openbot-space-3);
}
.question-prompt-custom-row[data-selected] {
  background: var(--openbot-bg-control-active);
}
.question-prompt-custom-row:focus-within {
  background: var(--openbot-bg-control-hover);
  box-shadow: none;
}
.question-prompt-pencil {
  width: 20px;
  height: 20px;
  display: grid;
  align-self: center;
  place-items: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-hover);
  color: var(--openbot-text-muted);
}
.question-prompt-pencil svg {
  display: block;
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  transform: translateY(-0.5px);
}
.question-prompt-custom-row:focus-within .question-prompt-pencil {
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-secondary);
}
.question-prompt-custom-row .ui-questionnaire-input {
  width: 100%;
  min-height: 30px;
  border: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.question-prompt-custom-row .ui-questionnaire-input::placeholder {
  color: var(--openbot-text-muted);
}
.question-prompt-custom-row .ui-questionnaire-input:focus {
  outline: 0;
  box-shadow: none;
}
.question-prompt-inline-actions, .question-prompt-sending {
  display: flex;
  align-items: center;
}
.question-prompt-inline-actions {
  gap: var(--openbot-space-2);
}
.question-prompt-sending {
  gap: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  white-space: nowrap;
}
.question-prompt-inline-actions [data-slot="questionnaire-skip"] {
  min-height: 28px;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-pill);
  background: transparent;
  padding-inline: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
}
.question-prompt-inline-actions [data-slot="questionnaire-skip"]:hover:not(:disabled) {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}
.question-prompt-inline-actions [data-slot="questionnaire-skip"]:focus-visible {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-control-hover);
  box-shadow: 0 0 0 1px var(--openbot-border-strong);
  color: var(--openbot-text-primary);
}
.question-prompt-empty {
  min-width: 0;
  display: grid;
  gap: var(--openbot-space-0-5);
  padding: var(--openbot-space-1);
}
.question-prompt-empty strong {
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
}
.question-prompt-empty > span {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.question-prompt-history-entry {
  width: min(540px, 100%);
}
@media (max-width: 520px) {
  .question-prompt-bubble.ui-bubble {
    width: 100%;
  }
  .question-prompt-bubble > .ui-bubble-content {
    padding: var(--openbot-space-3);
  }
  .question-prompt-header {
    gap: var(--openbot-space-2);
  }
  .question-prompt-navigation .ui-questionnaire-progress {
    min-width: 42px;
    padding-inline: 0;
  }
  .question-prompt-sending {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}
@media (prefers-reduced-motion: reduce) {
  .question-prompt-stage {
    transition: none;
  }
}
.approval-card {
  display: flex;
  width: min(540px, 100%);
  margin: var(--openbot-space-3) 0 var(--openbot-space-6);
  flex-direction: column;
  gap: var(--openbot-space-4);
  animation: approval-card-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}
.approval-card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--openbot-space-2);
}
.approval-card-footer > :last-child {
  margin-inline-start: auto;
}
.approval-button {
  border-radius: var(--openbot-radius-pill);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-regular);
}
.approval-card-content {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-3);
}
.approval-card-content:empty {
  display: none;
}
.approval-command-block, .approval-detail-row, .approval-permissions {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface);
}
.approval-command-block code {
  display: block;
  overflow-x: auto;
  padding: var(--openbot-space-3);
  color: var(--openbot-text-secondary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-md);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.approval-cwd {
  border-bottom: 1px solid var(--openbot-border);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  color: var(--openbot-text-muted);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  overflow-wrap: anywhere;
}
.approval-detail-row {
  display: grid;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-3);
}
.approval-detail-label {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.approval-detail-row strong {
  color: var(--openbot-text-secondary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  overflow-wrap: anywhere;
}
.approval-permissions {
  display: grid;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-3);
}
.approval-permissions:empty {
  display: none;
}
.approval-permissions span {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  overflow-wrap: anywhere;
}
.approval-reason {
  margin: calc(-1 * var(--openbot-space-2)) 0 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
  overflow-wrap: anywhere;
}
@keyframes approval-card-in {
  from {
    opacity: 0;
    transform: translateY(5px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (max-width: 800px) {
  .direct-private-label {
    display: none;
  }
  .direct-message-list, .direct-composer-wrap {
    padding-right: 14px;
    padding-left: 14px;
  }
  .direct-message > .ui-message-content {
    max-width: 88%;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto;
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
  }
}
.ui-block-card {
  display: flex;
  max-width: 600px;
  flex-direction: column;
  gap: var(--openbot-space-3);
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-surface);
  transition: border-color var(--openbot-duration-slow) var(--openbot-ease-out);
}
.ui-block-card[data-danger] {
  border-color: var(--openbot-danger-border);
}
.ui-block-card[data-status="expired"], .ui-block-card[data-status="closed"] {
  color: var(--openbot-text-muted);
}
.ui-block-header {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--openbot-space-3);
}
.ui-block-heading {
  min-width: 0;
}
.ui-block-title {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-xl);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-xl);
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.ui-block-subtitle {
  margin: var(--openbot-space-0-5) 0 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.ui-block-status[data-slot="badge"] {
  flex: 0 0 auto;
  gap: var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-pill);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.ui-block-status svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.ui-block-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--openbot-space-3);
}
.ui-block-body:empty {
  display: none;
}
.ui-block-outcome {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
  margin: 0;
  padding: var(--openbot-space-2) var(--openbot-space-3);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-glass-surface);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.ui-block-outcome[data-status="answered"] {
  background: var(--openbot-success-soft);
  color: var(--openbot-success-text);
}
.ui-block-outcome svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
}
.ui-block-outcome-text {
  min-width: 0;
  overflow-wrap: anywhere;
}
.ui-block-footer {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.ui-block-error {
  min-width: 0;
  flex: 1 1 auto;
  margin: 0;
  color: var(--openbot-danger-text);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  overflow-wrap: anywhere;
}
.ui-block-skip {
  margin-inline-start: auto;
}
.ui-block-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--openbot-space-2);
}
.ui-block-actions-auto > button:last-of-type {
  margin-inline-start: auto;
}
.ui-block-confirm-step {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.ui-block-confirm-question {
  padding: 0;
  margin-bottom: var(--openbot-space-2);
  font-weight: var(--openbot-weight-medium);
}
.ui-block-hint, .ui-block-counter, .ui-block-sending {
  margin: 0;
  color: var(--openbot-text-dim);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.ui-block-sending {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
}
.ui-block-fields {
  display: grid;
  grid-template-columns: minmax(64px, max-content) minmax(0, 1fr);
  align-items: center;
  gap: var(--openbot-space-2) var(--openbot-space-3);
  margin: 0;
  font-size: var(--openbot-text-lg);
}
.ui-block-fields dt {
  color: var(--openbot-text-muted);
}
.ui-block-fields dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}
.ui-block-preview {
  position: relative;
  max-height: 6.5em;
  overflow: hidden;
  padding: var(--openbot-space-3);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-lg);
}
.ui-block-preview::after {
  position: absolute;
  inset: auto 0 0;
  height: 2.4em;
  background: linear-gradient(transparent, var(--openbot-bg-surface-raised));
  content: "";
  pointer-events: none;
}
.ui-block-preview-text {
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.ui-block-hold {
  position: relative;
  overflow: hidden;
  user-select: none;
  touch-action: none;
}
.ui-block-hold-fill {
  position: absolute;
  inset: 0;
  background: currentColor;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, currentColor 22%, transparent);
  }
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--openbot-duration-fast) var(--openbot-ease-out);
  pointer-events: none;
}
.ui-block-hold[data-holding] .ui-block-hold-fill {
  transform: scaleX(1);
  transition: transform var(--ui-block-hold-duration) linear;
}
.ui-block-hold-label {
  position: relative;
}
.ui-block-options {
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-card);
}
.ui-block-option {
  position: relative;
  display: grid;
  grid-template-columns: var(--openbot-control-xs) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3);
  cursor: pointer;
  transition: background var(--openbot-duration-fast) var(--openbot-ease-out);
}
.ui-block-option + .ui-block-option {
  border-top: 1px solid var(--openbot-border-strong);
}
.ui-block-option:hover {
  background: var(--openbot-hover);
}
.ui-block-option[data-checked] {
  background: var(--openbot-question-option-soft);
}
.ui-block-option[data-disabled] {
  cursor: default;
}
.ui-block-option[data-disabled]:not([data-checked]) {
  opacity: 0.5;
}
.ui-block-option:focus-within {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: -2px;
}
.ui-block-option .ui-block-option-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: inherit;
}
.ui-block-option-key {
  display: grid;
  width: var(--openbot-control-xs);
  height: var(--openbot-control-xs);
  place-items: center;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-muted);
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
}
.ui-block-option[data-checked] .ui-block-option-key {
  border-color: var(--openbot-question-option);
  background: var(--openbot-question-option);
  color: var(--openbot-text-on-light);
}
.ui-block-option-label {
  min-width: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-medium);
  overflow-wrap: anywhere;
}
.ui-block-option-meta {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-variant-numeric: tabular-nums;
}
.ui-block-quick {
  display: flex;
  max-width: 600px;
  flex-direction: column;
  gap: var(--openbot-space-2);
}
.ui-block-quick-title {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
}
.ui-block-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-2);
}
.ui-block-chip[data-faded] {
  opacity: 0.35;
}
.ui-block-chip[data-chosen] {
  border-color: var(--openbot-accent);
  background: var(--openbot-accent-soft);
  color: var(--openbot-text-primary);
  opacity: 1;
}
.ui-block-quick-text {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.ui-block-quick-text > :first-child {
  flex: 1 1 auto;
  min-width: 0;
}
.ui-block-form-fields {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--openbot-space-3);
}
.ui-block-field {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1-5);
}
.ui-block-field-label {
  padding: 0;
  margin-bottom: var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
}
.ui-block-required {
  margin-inline-start: var(--openbot-space-0-5);
  color: var(--openbot-danger-text);
}
.ui-block-field-error {
  margin: 0;
  color: var(--openbot-danger-text);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.ui-block-segmented {
  display: flex;
  gap: var(--openbot-space-0-5);
  padding: var(--openbot-space-0-5);
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface-raised);
}
.ui-block-segment {
  flex: 1 1 0;
  min-width: 0;
  color: var(--openbot-text-muted);
}
.ui-block-segment[aria-pressed="true"] {
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
}
@media (prefers-reduced-motion: reduce) {
  .ui-block-card, .ui-block-option, .ui-block-hold-fill {
    transition: none;
  }
}
.settings-panel, .browser-panel, .remote-desktop-workspace {
  background: var(--openbot-bg-canvas);
}
.composer-reply-preview {
  border-color: var(--openbot-border);
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-primary);
}
.message-reaction-pill {
  border-color: var(--openbot-border);
  background: transparent;
  color: var(--openbot-text-primary);
}
@media (hover: hover) and (pointer: fine) {
  .message-reaction-pill:not(.message-reaction-pill-readonly):hover {
    background: var(--openbot-hover);
  }
}
.composer, .direct-composer {
  background: var(--openbot-bg-surface);
}
.direct-composer > button:hover:not(:disabled) {
  background: var(--openbot-accent-hover);
}
.remote-desktop-stage, .remote-desktop-viewer {
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-secondary);
}
.remote-desktop-header {
  background: var(--openbot-bg-sidebar);
}
.voice-button:active, .voice-button-active:active {
  transform: scale(0.97);
}
.provider-model-search {
  height: var(--openbot-control-md);
  flex-shrink: 0;
  margin-bottom: var(--ui-menu-padding);
  border-color: transparent;
  border-radius: var(--ui-menu-item-radius);
  background: var(--ui-menu-item-hover);
  padding-inline: var(--ui-menu-inset);
  font-size: var(--openbot-text-md);
}
.provider-model-search:focus-visible {
  border-color: var(--ui-menu-edge);
}
.provider-model-scroll {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.provider-model-group {
  padding: var(--openbot-space-2) var(--ui-menu-inset) var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: 500;
}
.browser-preview-sidebar[hidden] {
  display: none;
}
.browser-preview-header {
  display: flex;
  height: var(--left-header-height, 38px);
  flex: 0 0 auto;
  align-items: center;
  gap: var(--openbot-space-1);
  padding: 0 var(--openbot-space-3);
  color: var(--openbot-text-secondary);
}
.browser-preview-header > span {
  flex: 1;
  font-size: var(--openbot-text-sm);
}
.browser-preview-header > .ui-button, .browser-preview-close {
  border-radius: var(--openbot-radius-sm);
}
.browser-preview-header > .ui-button:focus-visible, .browser-preview-close:focus-visible {
  outline: 1px solid var(--openbot-text-muted);
  outline-offset: 1px;
  box-shadow: none;
}
.browser-preview-sidebar .ui-button:active:not(:disabled):not([data-disabled]) {
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
}
.browser-preview-header > .ui-button > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.browser-preview-list {
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding: var(--openbot-space-2) var(--openbot-space-4) var(--openbot-space-4);
}
.browser-preview-list > .browser-empty-state {
  height: auto;
  justify-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-8) var(--openbot-space-4);
}
.browser-preview-list > .browser-empty-state > svg, .browser-preview-image > svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  color: var(--openbot-text-muted);
  stroke-width: var(--openbot-icon-stroke);
}
.browser-preview-list > .browser-empty-state > svg {
  margin-bottom: var(--openbot-space-1);
}
.browser-preview-list > .browser-empty-state > strong {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  font-weight: 500;
}
.browser-preview-list > .browser-empty-state > .ui-button {
  margin-top: var(--openbot-space-1);
}
.browser-preview-card {
  position: relative;
  margin-bottom: var(--openbot-space-4);
}
.browser-preview-open {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-1);
  color: var(--openbot-text-secondary);
  font-weight: 400;
}
.browser-preview-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-surface);
}
.browser-preview-image img, .browser-preview-loading {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.browser-preview-title {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--openbot-text-sm);
}
.browser-preview-open-label {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  line-height: 1;
  pointer-events: none;
  opacity: 0;
}
.browser-preview-open-label > svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  stroke-width: var(--openbot-icon-stroke);
}
.browser-preview-open:hover .browser-preview-open-label {
  opacity: 1;
}
.browser-preview-close {
  position: absolute;
  top: var(--openbot-space-2);
  right: var(--openbot-space-2);
  opacity: 0;
}
.browser-preview-close > svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  stroke-width: var(--openbot-icon-stroke);
}
.browser-preview-card:hover .browser-preview-close, .browser-preview-card:focus-within .browser-preview-close {
  opacity: 1;
}
.browser-secret-card {
  --otp-slot-border: var(--openbot-glass-border);
  --otp-slot-background: var(--openbot-glass-surface);
  --otp-slot-filled-background: var(--openbot-glass-surface-hover);
  --otp-slot-shadow: inset 0 1px 0 var(--openbot-glass-highlight);
  display: grid;
  gap: var(--openbot-space-4);
  color: var(--openbot-text-primary);
}
.browser-secret-card[data-variant="island"] {
  box-sizing: border-box;
  width: min(100%, 420px);
  min-width: 0;
  padding: var(--openbot-space-4);
  border: 1px solid var(--openbot-glass-border);
  border-radius: var(--openbot-radius-xl);
  background: var(--openbot-bg-glass);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-bg-glass), var(--openbot-bg-control) 60%);
  }
  box-shadow: var(--openbot-shadow-raised);
  backdrop-filter: blur(32px) saturate(1.4);
}
.browser-secret-header {
  display: flex;
  align-items: flex-start;
  gap: var(--openbot-space-3);
}
.browser-secret-close {
  flex: none;
  margin-left: auto;
}
.browser-secret-icon {
  display: grid;
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  flex: none;
  place-items: center;
  border: 1px solid var(--openbot-glass-border);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-glass-surface);
  box-shadow: inset 0 1px 0 var(--openbot-glass-highlight);
  color: var(--openbot-text-primary);
}
.browser-secret-glyph {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.browser-secret-heading {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-0-5);
}
.browser-secret-heading h2 {
  margin: 0;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
}
.browser-secret-heading p {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.browser-secret-origin {
  color: var(--openbot-text-secondary);
  font-weight: var(--openbot-weight-medium);
}
.browser-secret-code, .browser-secret-password {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-1-5);
}
:where(.browser-secret-password) > input {
  border-color: var(--openbot-glass-border);
  background: var(--openbot-glass-surface);
}
.browser-secret-error {
  margin: 0;
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
}
.browser-secret-footer {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
  padding-top: var(--openbot-space-3);
  border-top: 1px solid var(--openbot-glass-border);
}
.browser-secret-private {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.browser-secret-glyph-sm {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: none;
}
.browser-secret-card .browser-takeover-preview-viewport {
  width: 100%;
  max-height: 280px;
}
.browser-secret-card .browser-takeover-preview-viewport img {
  min-height: 0;
  object-fit: contain;
}
html:has(.browser-dock-surface), body:has(.browser-dock-surface), #root:has(.browser-dock-surface) {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
}
.browser-dock-surface {
  position: relative;
  width: 100%;
  height: 100%;
  background: transparent;
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
}
.browser-dock {
  position: absolute;
  bottom: var(--openbot-space-4);
  left: 50%;
  display: flex;
  width: min(640px, calc(100% - 2 * var(--openbot-space-6)));
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-2);
  isolation: isolate;
  translate: -50% 0;
}
.browser-dock-glass {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-0-5);
  border: 1px solid var(--openbot-glass-border);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-glass);
  box-shadow: var(--openbot-shadow-raised);
  backdrop-filter: blur(16px);
  color: var(--openbot-text-secondary);
}
.browser-dock-composer svg, .browser-dock-island-activity svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.browser-dock-island {
  position: relative;
  z-index: 4;
  box-sizing: border-box;
  max-width: 100%;
}
.browser-dock-island[data-budding] {
  z-index: 1;
}
.browser-dock-island:is([data-mode="reply"], [data-mode="secret"]) {
  width: 100%;
  border-radius: var(--openbot-radius-lg);
}
.browser-dock-island[data-mode="secret"] {
  width: min(100%, 420px);
  border-radius: var(--openbot-radius-xl);
  background: var(--openbot-bg-glass);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-bg-glass), var(--openbot-bg-control) 60%);
  }
  backdrop-filter: blur(32px) saturate(1.4);
}
.browser-dock-island-face {
  box-sizing: border-box;
  min-width: 0;
  flex: 1;
}
.browser-dock-island-face > .browser-secret-card {
  width: 100%;
  border: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
}
.browser-dock-island-activity {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  padding: var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-2);
  font-size: var(--openbot-text-sm);
  white-space: nowrap;
}
.browser-dock-island-leaving {
  pointer-events: none;
}
.browser-dock-island.browser-dock-island-ghost {
  position: absolute;
  z-index: 1;
  translate: -50% 0;
  pointer-events: none;
}
.browser-dock-spin {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: none;
  color: var(--openbot-text-muted);
  animation: ui-spin 1s linear infinite;
}
.browser-dock-status {
  display: inline-flex;
  min-width: 0;
  overflow: hidden;
  align-items: center;
  gap: var(--openbot-space-1-5);
}
.browser-dock-status > span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.browser-dock-handoff {
  flex: none;
  margin-left: auto;
  border-radius: var(--openbot-radius-pill);
}
.browser-dock-island-reply {
  display: grid;
  gap: var(--openbot-space-1-5);
  padding: var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-3) var(--openbot-space-3);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
}
.browser-dock-reply-header {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.browser-dock-reply-header > strong {
  font-weight: var(--openbot-weight-medium);
}
.browser-dock-reply-close {
  margin-left: auto;
}
.browser-dock-reply-body {
  max-height: 160px;
  padding-right: var(--openbot-space-1);
  overflow: auto;
  line-height: var(--openbot-leading-lg);
}
.browser-dock-reply-actions {
  display: flex;
  justify-content: flex-end;
}
.browser-dock-stack {
  display: flex;
  width: 100%;
  flex-direction: column;
}
.agent-queue-panel[data-variant="floating"] {
  margin-inline: var(--openbot-space-6);
  border-color: var(--openbot-glass-border);
  background: var(--openbot-bg-glass);
  backdrop-filter: blur(16px);
  animation: none;
}
.browser-dock-stack > .agent-queue-slot {
  transition-duration: var(--browser-dock-island-duration);
  transition-timing-function: var(--browser-dock-island-easing);
}
.browser-dock-composer {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-2);
}
.browser-dock-avatar {
  width: 20px;
  height: 20px;
  flex: none;
}
.browser-dock-editor {
  min-width: 0;
  flex: 1;
  color: var(--openbot-text-primary);
}
.agent-queue-panel[data-variant="floating"] .agent-queue-item[data-arriving] .agent-queue-message {
  visibility: hidden;
}
.browser-dock-morph {
  position: absolute;
  z-index: 1;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid var(--openbot-glass-border);
  background: var(--openbot-bg-glass);
  box-shadow: var(--openbot-shadow-raised);
  backdrop-filter: blur(16px);
  pointer-events: none;
}
.browser-dock-morph > .browser-dock-glass {
  position: absolute;
  top: 50%;
  left: 50%;
  border-color: transparent;
  animation: none;
  background: none;
  backdrop-filter: none;
  box-shadow: none;
  translate: -50% -50%;
}
.browser-dock-morph-text {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  overflow: hidden;
  color: var(--openbot-text-primary);
  pointer-events: none;
  text-overflow: ellipsis;
  transform-origin: left center;
  white-space: nowrap;
  will-change: transform, opacity;
}
.agent-queue-panel[data-variant="floating"] .agent-queue-actions {
  gap: var(--openbot-space-1);
}
.agent-queue-panel[data-variant="floating"] :is(.agent-queue-steer, .agent-queue-icon-button) {
  box-sizing: border-box;
  height: 24px;
  border: 1px solid var(--openbot-glass-border);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-glass-surface);
  box-shadow: inset 0 1px 0 var(--openbot-glass-highlight);
  backdrop-filter: blur(8px);
  color: var(--openbot-text-secondary);
  transition: background var(--openbot-duration-hover) ease, border-color var(--openbot-duration-hover) ease, box-shadow var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease, opacity var(--openbot-duration-hover) ease;
}
.agent-queue-panel[data-variant="floating"] .agent-queue-steer {
  padding: 0 var(--openbot-space-2) 0 var(--openbot-space-1-5);
  font-size: var(--openbot-text-sm);
}
.agent-queue-panel[data-variant="floating"] .agent-queue-icon-button {
  width: 24px;
}
.agent-queue-panel[data-variant="floating"] :is(.agent-queue-steer, .agent-queue-icon-button) svg {
  width: 14px;
  height: 14px;
}
.agent-queue-panel[data-variant="floating"] :is(.agent-queue-steer, .agent-queue-icon-button):is(:hover:not(:disabled), :focus-visible) {
  background: var(--openbot-glass-surface-hover);
  color: var(--openbot-text-primary);
}
.agent-queue-panel[data-variant="floating"] .agent-queue-icon-button.agent-queue-delete:is(:hover:not(:disabled), :focus-visible) {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
}
.agent-queue-panel[data-variant="floating"] :is(.agent-queue-steer, .agent-queue-icon-button):focus-visible {
  box-shadow: inset 0 1px 0 var(--openbot-glass-highlight), 0 0 0 2px var(--openbot-border-focus);
}
@media (hover: hover) {
  .agent-queue-panel[data-variant="floating"] .agent-queue-item:not(:hover, :focus-within) :is(.agent-queue-steer, .agent-queue-icon-button):not(:focus-visible) {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    color: var(--openbot-text-muted);
  }
}
@media (prefers-reduced-motion: reduce) {
  .browser-dock-stack > .agent-queue-slot {
    transition: none;
  }
}
body:has(.browser-full-view) .app-frame {
  isolation: isolate;
}
.browser-expanded-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--openbot-layer-dropdown) - 2);
}
.browser-full-view {
  --browser-full-edge: var(--openbot-space-1);
  --browser-full-top-height: 38px;
  position: fixed;
  z-index: calc(var(--openbot-layer-dropdown) - 1);
  inset: 0;
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  padding: 0 var(--browser-full-edge) var(--browser-full-edge);
  background: var(--openbot-bg-canvas);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-bg-canvas) 50%, var(--openbot-bg-notch));
  }
  color: var(--openbot-text-primary);
}
.browser-full-view[hidden], .browser-expanded-backdrop[hidden] {
  display: none;
}
.browser-full-top {
  display: flex;
  height: var(--browser-full-top-height);
  min-width: 0;
  flex: none;
  align-items: center;
  gap: var(--openbot-space-1);
  padding-inline: var(--openbot-space-1) 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.browser-full-top svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.browser-full-top-spacer {
  flex: 1;
}
.browser-full-view-mac-controls .browser-full-top {
  padding-inline-start: calc(82px - var(--browser-full-edge));
}
.browser-full-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-canvas);
}
.browser-full-browser {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}
.browser-full-alert {
  margin: var(--openbot-space-2) var(--openbot-space-2) 0;
}
.browser-full-surface {
  position: relative;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}
.browser-full-surface[data-live] {
  display: grid;
  place-items: center;
  container-type: size;
}
.browser-full-surface[data-live] .browser-live-view {
  position: relative;
  inset: auto;
  width: min( calc(100cqw - 2 * var(--openbot-space-3)), calc((100cqh - 2 * var(--openbot-space-3)) * var(--browser-frame-width, 16) / var(--browser-frame-height, 10)) );
  height: auto;
  aspect-ratio: var(--browser-frame-width, 16) / var(--browser-frame-height, 10);
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface);
}
.browser-full-owner-avatar {
  width: 16px;
  height: 16px;
  flex: none;
}
.browser-full-owner-acting {
  border-radius: var(--openbot-radius-pill);
  box-shadow: 0 0 0 1.5px var(--openbot-accent);
}
.browser-full-owner-globe {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: none;
  color: var(--openbot-text-muted);
}
.browser-full-chips {
  --browser-full-fade: calc(var(--openbot-space-8) * 2);
  position: relative;
  min-width: 0;
  flex: 0 1 auto;
  overflow-x: auto;
  padding: var(--openbot-space-0-5);
  scrollbar-width: none;
}
.browser-full-chips[data-fade-start] {
  mask-image: linear-gradient(to right, transparent, var(--openbot-text-primary) var(--browser-full-fade));
}
.browser-full-chips[data-fade-end] {
  mask-image: linear-gradient(to right, var(--openbot-text-primary) calc(100% - var(--browser-full-fade)), transparent);
}
.browser-full-chips[data-fade-start][data-fade-end] {
  mask-image: linear-gradient( to right, transparent, var(--openbot-text-primary) var(--browser-full-fade), var(--openbot-text-primary) calc(100% - var(--browser-full-fade)), transparent );
}
.browser-full-chip {
  min-width: 120px;
  max-width: 200px;
  flex: 0 1 200px;
  user-select: none;
  transition: flex-basis var(--openbot-duration-normal) var(--openbot-ease-out);
}
.browser-full-chips[data-frozen] .browser-full-chip {
  flex: 0 0 var(--browser-full-chip-frozen);
}
.browser-full-chips[data-dragging] {
  cursor: grabbing;
}
.browser-full-chips[data-dragging] .browser-full-chip {
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.browser-full-chips[data-dragging] .browser-full-chip[data-dragging] {
  z-index: 1;
  background: var(--openbot-bg-surface-raised);
  box-shadow: inset 0 0 0 1px var(--openbot-border-strong), var(--openbot-shadow-raised);
  transition: none;
}
.browser-full-chips[data-dragging] .browser-full-chip::before {
  opacity: 0;
}
.browser-full-hidden-tabs {
  max-width: 320px;
}
@media (prefers-reduced-motion: reduce) {
  .browser-full-chip, .browser-full-chips[data-dragging] .browser-full-chip {
    transition: none;
  }
}
.browser-full-spin {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: none;
  color: var(--openbot-text-muted);
  animation: ui-spin 1s linear infinite;
}
.browser-full-chip .side-panel-tab-select {
  min-width: 0;
  flex: 1;
  justify-content: flex-start;
}
.browser-full-chip .side-panel-tab-label {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-align: start;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser-full-address-row {
  display: flex;
  height: 44px;
  flex: none;
  align-items: center;
  gap: var(--openbot-space-0-5);
  padding-inline: var(--openbot-space-2);
  border-bottom: 1px solid var(--openbot-border);
  color: var(--openbot-text-secondary);
}
.browser-full-address-row svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.browser-full-capsule {
  position: relative;
  display: flex;
  min-width: 0;
  height: var(--openbot-control-md);
  flex: 1;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-inline: var(--openbot-space-1);
  padding-inline: var(--openbot-space-2) var(--openbot-space-1);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  transition: background-color var(--openbot-duration-normal) var(--openbot-ease-out), box-shadow var(--openbot-duration-normal) var(--openbot-ease-out);
}
.browser-full-capsule:focus-within {
  background: var(--openbot-bg-control-active);
  box-shadow: inset 0 0 0 1px var(--openbot-border-grouped);
}
.browser-full-capsule .browser-full-capsule-input {
  height: 100%;
  min-width: 0;
  flex: 1;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
}
.browser-full-capsule .browser-full-capsule-input:focus-visible {
  outline: none;
}
.browser-full-capsule .browser-full-capsule-input::selection {
  background: var(--openbot-accent-strong);
}
.browser-full-capsule-agent {
  display: grid;
  flex: none;
  place-items: center;
}
.browser-full-suggest {
  position: absolute;
  z-index: var(--openbot-layer-dropdown);
  top: calc(100% + var(--openbot-space-1));
  right: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  padding: var(--openbot-space-1);
  border-radius: var(--openbot-radius-lg);
}
.browser-full-suggest-row {
  display: flex;
  width: 100%;
  min-width: 0;
  height: var(--openbot-control-md);
  align-items: center;
  gap: var(--openbot-space-2);
  padding-inline: var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  text-align: start;
  cursor: default;
}
.browser-full-suggest-row:hover {
  background: var(--openbot-bg-control-hover);
}
.browser-full-suggest-row[aria-selected="true"] {
  background: var(--openbot-bg-control-active);
}
.browser-full-suggest-icon {
  display: grid;
  width: var(--openbot-icon-sm);
  flex: none;
  place-items: center;
  color: var(--openbot-text-muted);
}
.browser-full-suggest-title {
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser-full-suggest-detail {
  min-width: 0;
  flex: 0 100 auto;
  overflow: hidden;
  color: var(--openbot-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser-full-suggest-switch {
  flex: none;
  margin-inline-start: auto;
  padding: 0 var(--openbot-space-2);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-pill);
  color: var(--openbot-text-muted);
}
.browser-full-switch {
  min-width: 0;
  max-width: 100%;
  justify-content: flex-start;
  gap: var(--openbot-space-2);
}
.browser-full-switch-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser-full-switch-count {
  display: grid;
  min-width: 18px;
  height: 18px;
  flex: none;
  place-items: center;
  padding-inline: var(--openbot-space-1);
  border: 1.5px solid currentcolor;
  border-radius: var(--openbot-radius-sm);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.browser-full-switch-menu {
  display: flex;
  width: min(360px, calc(100vw - 2 * var(--openbot-space-3)));
  max-height: min(480px, 70dvh);
  flex-direction: column;
  padding: var(--openbot-space-1);
}
.browser-full-switch-list {
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}
.browser-full-switch-row {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-0-5);
}
.browser-full-switch-select {
  min-width: 0;
  height: auto;
  flex: 1;
  padding-block: var(--openbot-space-1-5);
}
.browser-full-switch-select[aria-current="true"] {
  background: var(--openbot-bg-control-active);
}
.browser-full-switch-close svg, .browser-full-switch-actions svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.browser-full-switch-text {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.browser-full-switch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-1);
  margin-top: var(--openbot-space-1);
  padding-top: var(--openbot-space-1);
  border-top: 1px solid var(--openbot-border);
}
@media (max-width: 720px) {
  .browser-full-surface[data-live] {
    place-items: start center;
    padding-top: var(--openbot-space-3);
  }
}
.channel-avatar {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  min-width: var(--openbot-space-8);
  height: var(--openbot-space-8);
  color: var(--openbot-text-muted);
}
.channel-avatar .agent-avatar {
  width: var(--openbot-space-8);
  height: var(--openbot-space-8);
  flex-shrink: 0;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface);
}
.channel-avatar:not(.channel-avatar-cluster) .agent-avatar + .agent-avatar {
  margin-left: calc(-1 * var(--openbot-space-4));
}
.channel-avatar-cluster {
  --channel-avatar-size: 36px;
  --channel-avatar-pitch: calc(var(--channel-avatar-size) * 0.44);
  --channel-avatar-face: calc(var(--channel-avatar-size) * 0.48);
  display: grid;
  grid-template: repeat(2, var(--channel-avatar-pitch)) / repeat(2, var(--channel-avatar-pitch));
  place-content: center;
  place-items: center;
  width: var(--channel-avatar-size);
  min-width: var(--channel-avatar-size);
  height: var(--channel-avatar-size);
}
.channel-avatar-cluster .agent-avatar {
  --agent-avatar-optical-offset: calc(var(--channel-avatar-face) * -0.14);
  width: var(--channel-avatar-face);
  height: var(--channel-avatar-face);
  background: none;
}
.channel-avatar-cluster > :only-child {
  --channel-avatar-face: var(--channel-avatar-size);
  grid-area: 1 / 1 / 3 / 3;
}
.channel-avatar-cluster > :first-child:nth-last-child(2), .channel-avatar-cluster > :first-child:nth-last-child(2) ~ * {
  grid-row: 1 / span 2;
}
.channel-avatar-cluster > :first-child:nth-last-child(3) ~ .agent-avatar:last-child {
  grid-column: 1 / span 2;
}
.agent-row.sidebar-pinned-row .channel-avatar-cluster {
  --channel-avatar-size: 48px;
}
.agent-row.sidebar-pinned-row .channel-avatar-cluster .agent-avatar {
  width: var(--channel-avatar-face);
  height: var(--channel-avatar-face);
}
.channel-avatar-count {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: 1;
  font-weight: var(--openbot-weight-semibold);
  font-variant-numeric: tabular-nums;
}
.channel-dialog-header, .channel-editor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.channel-dialog-header h2 {
  margin: 0;
  font-size: var(--openbot-text-xl);
  line-height: var(--openbot-leading-xl);
  font-weight: var(--openbot-weight-semibold);
}
.channel-empty {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-muted);
}
.channel-empty h2 {
  font-size: var(--openbot-text-2xl);
  color: var(--openbot-text-primary);
  margin: var(--openbot-space-2) 0 0;
}
.channel-empty p {
  margin: 0;
}
.channel-empty .channel-empty-title {
  color: var(--openbot-text-primary);
}
.channel-editor {
  display: block;
}
.channel-create-form {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-3);
}
.channel-members {
  display: flex;
  margin-top: var(--settings-panel-section-gap);
  flex-direction: column;
  gap: var(--openbot-space-1);
  min-width: 0;
}
.channel-members-title, .channel-members-note {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.channel-members-title {
  font-weight: var(--openbot-weight-regular);
}
.channel-member-list:is(.ui-item-group) {
  border: 0;
  overflow: visible;
  background: transparent;
}
.channel-member-list > :not(:first-child) {
  border-top: 0;
}
.channel-member:is(.ui-item), .channel-member-add {
  min-height: var(--openbot-control-lg);
  gap: var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
  padding-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-2);
}
.channel-member:hover, .channel-member-add:hover:not(:disabled) {
  background: var(--openbot-hover);
}
.channel-member .agent-avatar, .channel-member-menu .agent-avatar {
  --agent-avatar-optical-offset: -3.25px;
  width: var(--openbot-space-6);
  height: var(--openbot-space-6);
}
.channel-member .ui-item-title {
  font-weight: var(--openbot-weight-regular);
}
.channel-member-add {
  width: 100%;
  justify-content: flex-start;
  height: auto;
  line-height: var(--openbot-leading-md);
  text-align: left;
  cursor: pointer;
}
.channel-member-add > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  margin-inline: calc((var(--openbot-space-6) - var(--openbot-icon-md)) / 2);
}
.channel-member-add:disabled {
  cursor: default;
  opacity: 0.42;
}
.channel-member-menu {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  min-width: 220px;
  max-height: min( calc(var(--openbot-space-8) * 11), calc(100dvh - var(--openbot-space-4)), var(--kb-popper-content-available-height, 100dvh) );
  margin-inline-start: calc(var(--openbot-space-1) * -1);
}
.channel-member-menu .channel-member-search {
  flex: none;
}
.channel-member-menu .channel-member-search input::-webkit-search-cancel-button {
  display: none;
}
.channel-member-options {
  min-height: 0;
  overflow-y: auto;
  outline: 0;
  scrollbar-width: thin;
}
.channel-member-option {
  display: flex;
  min-height: var(--openbot-control-md);
  align-items: center;
  gap: var(--openbot-space-2);
  border-radius: var(--ui-menu-item-radius);
  outline: 0;
  padding: var(--openbot-space-1-5) var(--ui-menu-inset);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
  white-space: nowrap;
  cursor: default;
  transition: background-color var(--openbot-duration-hover) var(--openbot-ease-out);
}
.channel-member-option:is(:hover, :focus-visible) {
  background: var(--ui-menu-item-hover);
}
.channel-member-options:has(:focus-visible) .channel-member-option:hover:not(:focus-visible) {
  background: transparent;
}
.channel-member-menu-empty {
  margin: 0;
  padding: var(--openbot-space-3) var(--ui-menu-inset);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
@media (hover: hover) and (pointer: fine) {
  .channel-member-remove, .channel-lead-toggle[aria-pressed="false"] {
    opacity: 0;
    transition: opacity var(--openbot-duration-hover) var(--openbot-ease-out);
  }
  .channel-member:hover :is(.channel-member-remove, .channel-lead-toggle), :is(.channel-member-remove, .channel-lead-toggle):focus-visible {
    opacity: 1;
  }
}
.channel-picker {
  border: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.channel-picker legend {
  margin-bottom: var(--openbot-space-2);
}
.channel-picker-list {
  margin-top: var(--openbot-space-2);
  max-height: calc(var(--openbot-space-8) * 7);
  overflow: auto;
  scrollbar-width: none;
}
.channel-picker-list::-webkit-scrollbar {
  display: none;
}
.channel-picker-entry {
  padding: var(--openbot-space-2) 0;
  cursor: pointer;
}
.channel-editor-footer {
  padding-top: var(--openbot-space-3);
  border-top: 1px solid var(--openbot-border);
}
.channel-search-icon {
  width: var(--openbot-space-4);
  height: var(--openbot-space-4);
  color: var(--openbot-text-muted);
  flex-shrink: 0;
}
.channel-picker-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-6) var(--openbot-space-3);
  text-align: center;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.channel-picker-empty > svg {
  width: var(--openbot-space-6);
  height: var(--openbot-space-6);
  margin-bottom: var(--openbot-space-1);
}
.channel-picker-empty p {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
}
.channel-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--openbot-layer-dialog);
  display: grid;
  place-items: center;
  padding: var(--openbot-space-6);
}
.channel-create-dialog {
  --channel-dialog-inset: var(--openbot-space-4);
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(440px, 100%);
  max-height: calc(100dvh - 48px);
  overflow: hidden;
  outline: 0;
  background: var(--openbot-bg-surface);
}
.channel-create-dialog .channel-dialog-header {
  padding: var(--channel-dialog-inset);
}
.channel-create-dialog .channel-dialog-header .ui-button svg {
  width: var(--openbot-space-4);
  height: var(--openbot-space-4);
}
.channel-create-form {
  min-height: 0;
  gap: var(--openbot-space-4);
}
.channel-create-form > .ui-field, .channel-create-form > .ui-alert {
  margin-inline: var(--channel-dialog-inset);
}
.channel-create-form .channel-picker {
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: 0;
}
.channel-create-form .channel-picker legend {
  margin-inline: var(--channel-dialog-inset);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
}
.channel-create-form .channel-member-search {
  height: var(--openbot-control-lg);
  margin-inline: var(--channel-dialog-inset);
  padding-inline: var(--openbot-space-3);
  gap: var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
}
.channel-create-form .channel-member-search input::-webkit-search-cancel-button {
  display: none;
}
.channel-create-form .channel-picker-list {
  min-height: 0;
  max-height: calc(var(--openbot-space-8) * 11);
  margin-top: var(--openbot-space-2);
  padding: 0;
}
.channel-create-form .channel-picker-body {
  display: flex;
  flex-direction: column;
}
.channel-create-form .channel-picker-entry {
  display: block;
  padding: var(--openbot-space-2) var(--channel-dialog-inset);
  border-radius: 0;
  transition: background-color var(--openbot-duration-normal) var(--openbot-ease-out);
}
.channel-create-form .channel-picker-entry .channel-member:is(.ui-item) {
  min-height: 0;
  padding: 0;
  background: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .channel-create-form .channel-picker-entry {
    transition: none;
  }
}
.channel-create-form .channel-picker-entry:hover {
  background: var(--openbot-bg-control-hover);
}
.channel-create-form .channel-picker-entry:has(.ui-checkbox-input:checked) {
  background: var(--openbot-accent-soft);
}
.channel-create-form .channel-picker-entry .ui-item-content {
  display: flex;
  align-items: baseline;
  gap: var(--openbot-space-2);
  overflow: hidden;
}
.channel-create-form .channel-picker-entry .ui-item-title {
  flex: 0 0 auto;
  font-weight: var(--openbot-weight-regular);
}
.channel-create-form .channel-picker-entry .ui-item-description {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.channel-create-form .channel-editor-footer {
  justify-content: flex-end;
  padding: var(--channel-dialog-inset);
}
.channel-title .channel-avatar {
  min-width: 18px;
  height: 18px;
}
.channel-title .agent-avatar {
  --agent-avatar-optical-offset: -2px;
  width: 18px;
  height: 18px;
}
.channel-title .agent-avatar + .agent-avatar {
  margin-left: -8px;
}
.channel-header-copy {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: var(--openbot-space-2);
}
.channel-header-copy h1 {
  min-width: 0;
  overflow: hidden;
  flex: 0 1 auto;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.channel-header-title {
  min-width: 0;
  overflow: hidden;
  flex: 1 1 auto;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.channel-preview-notice {
  flex-shrink: 0;
  margin: 0;
  padding: var(--openbot-space-4);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-align: center;
}
.agent-activity-content.channel-activity-content {
  padding-left: var(--openbot-space-0-5);
}
.channel-activity-faces {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}
.channel-activity-faces .agent-activity-avatar + .agent-activity-avatar {
  margin-left: calc(-1 * var(--openbot-space-2));
}
.channel-paused-tasks {
  position: relative;
  max-height: 35dvh;
  overflow-y: auto;
  margin: calc(-1 * var(--openbot-space-6)) var(--openbot-space-3) calc(-1 * var(--openbot-radius-lg));
  border-radius: var(--openbot-radius-lg) var(--openbot-radius-lg) var(--openbot-radius-md) var(--openbot-radius-md);
  background: var(--openbot-accent-strong);
  box-shadow: 0 0 0 1px var(--openbot-accent-soft);
  -webkit-backdrop-filter: blur(var(--openbot-space-3));
  backdrop-filter: blur(var(--openbot-space-3));
  padding-bottom: var(--openbot-radius-lg);
  color: var(--openbot-accent-text);
}
.awaiting-replies + .channel-paused-tasks {
  z-index: 10;
  margin-top: 0;
}
.channel-paused-task {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-2);
  align-items: center;
  justify-content: space-between;
  padding: var(--openbot-space-2) var(--openbot-space-3);
}
.channel-paused-task + .channel-paused-task {
  border-top: 1px solid var(--openbot-accent-soft);
}
.channel-paused-task-reason {
  min-width: 0;
  flex: 1 1 24ch;
  margin: 0;
  overflow-wrap: anywhere;
  font-size: var(--openbot-text-sm);
}
.channel-paused-task-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-2);
  align-items: center;
}
.channel-paused-task-actions .ui-button {
  background: var(--openbot-surface-light);
  color: var(--openbot-text-on-light);
}
.channel-paused-task-actions .ui-button:hover {
  background: var(--openbot-surface-light);
  box-shadow: 0 0 0 1px var(--openbot-text-dim-on-light);
}
.diagram-view {
  display: flex;
  height: 100%;
  min-width: 0;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  background: var(--openbot-bg-canvas);
}
.diagram-flows-notice {
  align-items: center;
  justify-content: center;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
}
.diagram-view .agent-avatar {
  grid-template: 100% / 100%;
}
.diagram-view-header {
  display: flex;
  height: 38px;
  flex: none;
  align-items: center;
  gap: var(--openbot-space-1-5);
  border-bottom: 1px solid var(--openbot-border);
  padding: 0 var(--openbot-space-3);
}
.diagram-view .diagram-view-header .header-panel-toggle[aria-expanded="true"]:not(:hover) {
  border-color: transparent;
  background: transparent;
  color: var(--openbot-text-muted);
}
.diagram-view-icon {
  display: grid;
  width: 18px;
  height: 18px;
  flex: none;
  place-items: center;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
}
.diagram-view-avatar.agent-avatar {
  width: 18px;
  height: 18px;
}
.diagram-view-icon svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.diagram-view-title {
  max-width: 32ch;
  flex: none;
  overflow: hidden;
  margin: 0;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-regular);
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diagram-view-actions {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
  margin-left: auto;
}
.diagram-view-body {
  --diagram-inspector-width: 340px;
  position: relative;
  display: flex;
  min-height: 0;
  flex: 1;
  transition: padding-right var(--panel-resize-duration, var(--openbot-duration-overlay)) cubic-bezier(0.22, 1, 0.36, 1);
}
.diagram-view-body[data-inspector="open"] {
  padding-right: var(--diagram-inspector-width);
}
.diagram-view-chat {
  position: absolute;
  bottom: var(--openbot-space-4);
  left: var(--openbot-space-4);
  z-index: 2;
  width: min(360px, calc(100% - var(--openbot-space-8)));
  pointer-events: none;
}
.diagram-board {
  position: relative;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}
.diagram-board-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  outline: 0;
  background-color: var(--openbot-bg-canvas);
  background-image: radial-gradient(circle at 1px 1px, var(--openbot-border-strong) 1px, transparent 0);
  background-position: var(--diagram-grid-x) var(--diagram-grid-y);
  background-size: var(--diagram-grid-size) var(--diagram-grid-size);
  cursor: grab;
  touch-action: none;
}
.diagram-board-viewport:focus-visible {
  box-shadow: inset var(--openbot-focus-ring);
}
.diagram-board-viewport:is([data-panning], [data-dragging]) {
  cursor: grabbing;
}
.diagram-board-world {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
}
.diagram-board-world[data-settling] {
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.diagram-board-empty {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  max-width: 280px;
  gap: var(--openbot-space-1);
  translate: -50% -50%;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  pointer-events: none;
  text-align: center;
}
.diagram-board-empty strong {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
}
.diagram-board-empty p {
  margin: 0;
}
.diagram-board-menu-area {
  display: contents;
}
.diagram-canvas-menu-avatar.agent-avatar {
  width: 20px;
  height: 20px;
  grid-template: 100% / 100%;
}
.ui-action-menu.diagram-canvas-agents:not([data-menu-layout="grid"]) [role="menuitem"] {
  height: auto;
  gap: var(--openbot-space-3);
  padding-block: var(--openbot-space-2);
}
.diagram-canvas-menu-agent {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-0-5);
  line-height: var(--openbot-leading-md);
}
.diagram-canvas-menu-agent small {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diagram-new-agent {
  position: absolute;
  top: clamp(var(--openbot-space-2), var(--diagram-new-agent-y), calc(100% - 196px));
  left: clamp(var(--openbot-space-2), var(--diagram-new-agent-x), calc(100% - 288px));
  z-index: 3;
  display: grid;
  width: 280px;
  gap: var(--openbot-space-2);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-overlay);
  box-shadow: 0 0 0 1px var(--openbot-border), var(--openbot-shadow-overlay);
  backdrop-filter: blur(16px);
  padding: var(--openbot-space-3);
  font-size: var(--openbot-text-sm);
}
.diagram-new-agent-header {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  font-weight: var(--openbot-weight-medium);
  user-select: none;
}
.diagram-new-agent-avatar.agent-avatar {
  width: 24px;
  height: 24px;
  grid-template: 100% / 100%;
}
.diagram-new-agent .provider-model-trigger-field {
  height: var(--openbot-control-sm);
  min-height: var(--openbot-control-sm);
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
  box-shadow: none;
  padding-inline: var(--openbot-space-2);
  font-size: var(--openbot-text-sm);
}
.diagram-new-agent .provider-model-trigger-field:hover:not(:disabled), .diagram-new-agent .provider-model-trigger-field[aria-expanded="true"] {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-control);
}
.diagram-new-agent .provider-model-trigger-field:focus-visible {
  border-color: var(--openbot-border-focus);
  outline: none;
  box-shadow: var(--openbot-focus-ring);
}
.diagram-new-agent-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-1);
}
.diagram-board-zoom {
  position: absolute;
  right: var(--openbot-space-4);
  bottom: var(--openbot-space-4);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1-5);
}
.diagram-board-zoom .ui-button {
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-overlay);
  box-shadow: var(--openbot-shadow-raised);
}
.diagram-board-zoom .ui-button svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  color: var(--openbot-text-muted);
}
.diagram-board-zoom .ui-button:hover svg {
  color: var(--openbot-text-primary);
}
.diagram-board-status {
  position: absolute;
  top: calc(var(--openbot-space-4) + var(--openbot-control-sm) + var(--openbot-space-2));
  left: 50%;
  z-index: 2;
  max-width: min(420px, calc(100% - 320px));
  margin: 0;
  translate: -50% 0;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-overlay);
  box-shadow: 0 0 0 1px var(--openbot-border);
  padding: var(--openbot-space-1-5) var(--openbot-space-3);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  pointer-events: none;
  text-align: center;
}
.diagram-board-status:empty {
  display: none;
}
.diagram-board-status[data-tone="danger"] {
  box-shadow: 0 0 0 1px var(--openbot-danger-border);
  color: var(--openbot-danger-text);
}
.diagram-edges {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: visible;
  pointer-events: none;
}
.diagram-edge path, .diagram-edge-draft {
  fill: none;
}
.diagram-edge-hit {
  stroke: transparent;
  stroke-width: 16px;
  pointer-events: stroke;
  cursor: pointer;
}
.diagram-edge-line {
  stroke: var(--openbot-border-strong);
  stroke-width: 2px;
  stroke-linecap: round;
}
.diagram-edge[data-state="delivered"] .diagram-edge-line {
  stroke: var(--diagram-routine-color, var(--openbot-accent));
}
.diagram-edge[data-state="running"] .diagram-edge-line {
  stroke: var(--diagram-routine-color, var(--openbot-accent));
  stroke-dasharray: 6 6;
  animation: diagram-edge-flow 0.6s linear infinite;
}
.diagram-edge[data-routine-color][data-state="idle"] .diagram-edge-line {
  stroke: var(--diagram-routine-color);
  opacity: 0.6;
}
.diagram-edge:hover .diagram-edge-line, .diagram-edge[data-selected] .diagram-edge-line {
  stroke: var(--openbot-text-primary);
  stroke-width: 3px;
}
.diagram-edge .diagram-edge-arrow {
  fill: var(--openbot-text-muted);
}
.diagram-edge:is([data-state="delivered"], [data-state="running"]) .diagram-edge-arrow {
  fill: var(--diagram-routine-color, var(--openbot-accent));
}
.diagram-edge:hover .diagram-edge-arrow, .diagram-edge[data-selected] .diagram-edge-arrow {
  fill: var(--openbot-text-primary);
}
.diagram-edge[data-state="dimmed"] .diagram-edge-arrow {
  opacity: 0.3;
}
.diagram-edge[data-routine-color][data-state="idle"] .diagram-edge-arrow {
  fill: var(--diagram-routine-color);
  opacity: 0.6;
}
.diagram-edge-draft {
  stroke: var(--openbot-accent);
  stroke-width: 2px;
  stroke-dasharray: 6 6;
}
.diagram-edge-draft[data-target="invalid"] {
  stroke: var(--openbot-danger);
}
.diagram-edge-remove.ui-button {
  position: absolute;
  top: var(--diagram-edge-y);
  left: var(--diagram-edge-x);
  z-index: 1;
  translate: -50% -50%;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface-raised);
  box-shadow: 0 0 0 1px var(--openbot-border-strong);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}
.diagram-edge-remove.ui-button:is([data-selected], :focus-visible) {
  opacity: 1;
  pointer-events: auto;
}
@keyframes diagram-edge-flow {
  to {
    stroke-dashoffset: -12;
  }
}
.diagram-node {
  position: absolute;
  top: var(--diagram-node-y);
  left: var(--diagram-node-x);
  display: flex;
  width: var(--diagram-node-width);
  flex-direction: column;
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-surface-raised);
  box-shadow: 0 0 0 1px var(--openbot-border), var(--openbot-shadow-raised);
  cursor: grab;
  transition: box-shadow var(--openbot-duration-fast) var(--openbot-ease-out), opacity var(--openbot-duration-normal) var(--openbot-ease-out);
  user-select: none;
}
.diagram-node[data-status="running"] {
  box-shadow: 0 0 0 1px var(--openbot-accent), 0 0 0 5px var(--openbot-accent-soft);
}
.diagram-node[data-status="failed"] {
  box-shadow: 0 0 0 1px var(--openbot-danger-border), var(--openbot-shadow-raised);
}
.diagram-node[data-unreachable] {
  box-shadow: 0 0 0 1px var(--openbot-warning);
}
.diagram-node[data-selected] {
  box-shadow: 0 0 0 2px var(--openbot-accent), var(--openbot-shadow-raised);
}
.diagram-node-header {
  display: flex;
  height: 52px;
  align-items: center;
  gap: var(--openbot-space-1);
  border-bottom: 1px solid var(--openbot-border);
  padding: 0 var(--openbot-space-2) 0 var(--openbot-space-1);
}
.diagram-node-select.ui-button {
  height: 44px;
  min-width: 0;
  flex: 1;
  justify-content: flex-start;
  gap: var(--openbot-space-2);
  padding: 0 var(--openbot-space-1-5);
  background: transparent;
  cursor: inherit;
  text-align: left;
}
.diagram-node-avatar.agent-avatar {
  width: 28px;
  height: 28px;
}
.diagram-node-icon {
  display: grid;
  width: 28px;
  height: 28px;
  flex: none;
  place-items: center;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
}
.diagram-node-icon svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.diagram-node-heading {
  display: grid;
  min-width: 0;
}
.diagram-node-kicker {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diagram-node-name {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diagram-node-body {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-2) var(--openbot-space-3) var(--openbot-space-3);
}
.diagram-node-task, .diagram-node-schedule {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.diagram-node-schedule {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
}
.diagram-node-preview {
  display: flex;
  min-height: 64px;
  align-items: flex-start;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.diagram-node-preview[data-empty] {
  align-items: center;
  justify-content: center;
}
.diagram-node-preview p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  white-space: pre-line;
}
.diagram-node[data-status="failed"] .diagram-node-preview {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger-text);
}
.diagram-node-preview-empty {
  color: var(--openbot-text-placeholder);
}
.diagram-node-footer {
  display: flex;
  min-height: 24px;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.diagram-node-status {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.diagram-node-status svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
:is(.diagram-node-status, .diagram-inspector-step-status)[data-status="succeeded"] {
  color: var(--openbot-success-text);
}
:is(.diagram-node-status, .diagram-inspector-step-status)[data-status="failed"] {
  color: var(--openbot-danger-text);
}
:is(.diagram-node-status, .diagram-inspector-step-status)[data-status="running"] {
  color: var(--openbot-accent-text);
}
.diagram-node-status[data-status="unreachable"] {
  color: var(--openbot-warning-text);
}
.diagram-node-duration {
  color: var(--openbot-text-muted);
}
.diagram-node-duration::before {
  content: "·";
  margin-right: var(--openbot-space-1);
}
.diagram-node-remove.ui-button, .diagram-node-run.ui-button {
  flex: none;
  margin-inline-start: auto;
}
.diagram-node-run.ui-button svg, .diagram-view-actions .ui-button-size-xs svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.diagram-port.ui-button {
  position: absolute;
  top: 19px;
  z-index: 1;
  width: 14px;
  min-width: 14px;
  height: 14px;
  border: 2px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface-raised);
  padding: 0;
  cursor: crosshair;
  transition: scale var(--openbot-duration-fast) var(--openbot-ease-out), border-color var(--openbot-duration-fast) var(--openbot-ease-out), background-color var(--openbot-duration-fast) var(--openbot-ease-out);
}
.diagram-port.ui-button::before {
  position: absolute;
  inset: -8px;
  content: "";
}
.diagram-port-in.ui-button {
  left: -7px;
}
.diagram-port-out.ui-button {
  right: -7px;
}
.diagram-port.ui-button:hover, .diagram-port-out.ui-button[data-connecting], .diagram-port-in.ui-button[data-target="valid"] {
  scale: 1.25;
  border-color: var(--openbot-accent);
  background: var(--openbot-accent-soft);
}
.diagram-port-out.ui-button[data-connecting] {
  background: var(--openbot-accent);
}
.diagram-port-in.ui-button[data-target="invalid"] {
  border-color: var(--openbot-danger);
  opacity: 0.5;
}
.diagram-port.ui-button:disabled {
  opacity: 1;
  cursor: default;
}
[data-routine-color="0"] {
  --diagram-routine-color: var(--openbot-file-blue);
  --diagram-routine-soft: var(--openbot-file-blue-soft);
}
[data-routine-color="1"] {
  --diagram-routine-color: var(--openbot-file-green);
  --diagram-routine-soft: var(--openbot-file-green-soft);
}
[data-routine-color="2"] {
  --diagram-routine-color: var(--openbot-file-orange);
  --diagram-routine-soft: var(--openbot-file-orange-soft);
}
[data-routine-color="3"] {
  --diagram-routine-color: var(--openbot-file-pink);
  --diagram-routine-soft: var(--openbot-file-pink-soft);
}
[data-routine-color="4"] {
  --diagram-routine-color: var(--openbot-file-teal);
  --diagram-routine-soft: var(--openbot-file-teal-soft);
}
[data-routine-color="5"] {
  --diagram-routine-color: var(--openbot-file-yellow);
  --diagram-routine-soft: var(--openbot-file-yellow-soft);
}
.diagram-node[data-dimmed] {
  opacity: 0.4;
}
.diagram-node[data-dimmed]:is(:hover, :focus-within) {
  opacity: 0.8;
}
.diagram-edge[data-state="dimmed"] .diagram-edge-line {
  opacity: 0.3;
}
.diagram-node-routines {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.diagram-routine-chip.ui-button {
  height: 22px;
  gap: var(--openbot-space-1);
  border-radius: var(--openbot-radius-pill);
  background: var(--diagram-routine-soft);
  padding: 0 var(--openbot-space-2);
  color: var(--diagram-routine-color);
  font-size: var(--openbot-text-sm);
}
.diagram-routine-chip.ui-button[aria-pressed="true"] {
  box-shadow: inset 0 0 0 1px var(--diagram-routine-color);
}
.diagram-routine-chip.ui-button svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.diagram-routine-chip-name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diagram-routine-webhook {
  display: grid;
  gap: var(--openbot-space-2);
}
.diagram-routine-webhook-actions {
  display: flex;
  justify-content: flex-end;
}
.diagram-view-lens-bar {
  position: absolute;
  top: var(--openbot-space-4);
  left: 50%;
  z-index: 2;
  translate: -50% 0;
}
.diagram-view-lens-bar .ui-select-trigger {
  background: var(--openbot-bg-overlay);
  box-shadow: var(--openbot-shadow-raised);
}
.diagram-view-lens-trigger.ui-select-trigger {
  min-width: 120px;
  max-width: 280px;
}
.diagram-view-lens-option {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
}
.diagram-view-lens-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diagram-view-lens-option svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: none;
}
.diagram-view-lens-dot[data-all] {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--openbot-text-muted);
}
.diagram-view-lens-dot, .diagram-inspector-routine-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: var(--openbot-radius-pill);
  background: var(--diagram-routine-color);
}
.diagram-inspector-routine.ui-button[aria-pressed="true"] {
  background: var(--diagram-routine-soft);
}
.diagram-node[data-kind="routine"][data-firing] {
  box-shadow: 0 0 0 1px var(--diagram-routine-color), 0 0 0 5px var(--diagram-routine-soft);
}
.diagram-node[data-kind="routine"] .diagram-node-icon {
  background: var(--diagram-routine-soft);
  color: var(--diagram-routine-color);
}
.diagram-node[data-kind="routine"][data-firing] .diagram-node-icon {
  animation: diagram-routine-fire 1.2s var(--openbot-ease-in-out) infinite;
}
.diagram-routine-instruction {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  border-left: 2px solid var(--diagram-routine-color, var(--openbot-accent));
  padding-left: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.diagram-routine-week {
  --diagram-week-height: 40px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--openbot-space-1);
}
.diagram-routine-week[data-size="panel"] {
  --diagram-week-height: 72px;
}
.diagram-routine-day {
  display: grid;
  justify-items: center;
  gap: var(--openbot-space-1);
}
.diagram-routine-day-track {
  position: relative;
  width: 100%;
  height: var(--diagram-week-height);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-control);
}
.diagram-routine-day[data-weekend] .diagram-routine-day-track {
  background: var(--openbot-bg-control-hover);
}
.diagram-routine-day[data-today] .diagram-routine-day-track {
  box-shadow: inset 0 0 0 1px var(--openbot-accent);
}
.diagram-routine-day-track::after {
  position: absolute;
  top: 50%;
  right: 3px;
  left: 3px;
  height: 1px;
  background: var(--openbot-border);
  content: "";
}
.diagram-routine-tick {
  position: absolute;
  top: var(--diagram-tick-at);
  right: 3px;
  left: 3px;
  z-index: 1;
  height: 3px;
  translate: 0 -50%;
  border-radius: var(--openbot-radius-pill);
  background: var(--diagram-routine-color, var(--openbot-accent));
}
.diagram-routine-day-name {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 1;
}
.diagram-routine-day[data-today] .diagram-routine-day-name {
  color: var(--openbot-accent-text);
  font-weight: var(--openbot-weight-semibold);
}
.diagram-routine-dots {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.diagram-routine-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-border-strong);
}
.diagram-routine-dot[data-status="succeeded"] {
  background: var(--openbot-success);
}
.diagram-routine-dot[data-status="failed"] {
  background: var(--openbot-danger);
}
.diagram-routine-dot[data-status="running"] {
  background: var(--openbot-accent);
}
@keyframes diagram-routine-fire {
  50% {
    scale: 1.15;
  }
}
.diagram-inspector {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  width: var(--diagram-inspector-width);
  min-height: 0;
  flex-direction: column;
  border-left: 1px solid var(--openbot-border);
  background: var(--openbot-bg-surface);
}
.diagram-inspector-header {
  display: flex;
  min-height: 52px;
  align-items: center;
  gap: var(--openbot-space-2);
  border-bottom: 1px solid var(--openbot-border);
  padding: var(--openbot-space-2) var(--openbot-space-3);
}
.diagram-inspector-title {
  overflow: hidden;
  margin: 0;
  flex: 1;
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diagram-inspector-avatar.agent-avatar {
  width: 24px;
  height: 24px;
}
.diagram-inspector-body {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: var(--openbot-space-4);
  overflow-y: auto;
  padding: var(--openbot-space-4);
}
.diagram-inspector-run {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--openbot-space-1-5) var(--openbot-space-2);
  font-size: var(--openbot-text-md);
}
.diagram-inspector-muted, .diagram-inspector-empty {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
}
.diagram-inspector-section {
  display: grid;
  gap: var(--openbot-space-1-5);
}
.diagram-inspector-section p {
  margin: 0;
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.diagram-inspector-task.ui-textarea {
  min-height: 0;
  margin: calc(-1 * var(--openbot-space-1-5));
  border-color: transparent;
  background: transparent;
  padding: var(--openbot-space-1) var(--openbot-space-1-5);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  resize: none;
  field-sizing: content;
}
.diagram-inspector-task.ui-textarea:is(:hover, :focus-visible, :focus) {
  border-color: var(--openbot-border);
  background: var(--openbot-bg-control);
}
.diagram-inspector-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.diagram-inspector-section-title {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: var(--openbot-tracking-wide);
}
.diagram-inspector-text {
  max-height: 320px;
  overflow: auto;
  margin: 0;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.diagram-inspector-text[data-tone="danger"] {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger-text);
}
.diagram-inspector-steps {
  display: grid;
  gap: var(--openbot-space-0-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.diagram-inspector-step.ui-button {
  width: 100%;
  height: auto;
  justify-content: flex-start;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-2);
  text-align: left;
}
.diagram-inspector-step-number {
  display: grid;
  width: 20px;
  height: 20px;
  flex: none;
  place-items: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  font-weight: var(--openbot-weight-semibold);
}
.diagram-inspector-step-name {
  overflow: hidden;
  flex: 1;
  font-size: var(--openbot-text-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diagram-inspector-step-status {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
.diagram-inspector-times, .diagram-inspector-history {
  display: grid;
  gap: var(--openbot-space-1);
  margin: 0;
  padding: 0;
  font-size: var(--openbot-text-md);
  list-style: none;
}
.diagram-inspector-times li {
  color: var(--openbot-text-secondary);
}
.diagram-inspector-history li {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-2);
}
.diagram-inspector-history-time {
  overflow: hidden;
  color: var(--openbot-text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diagram-inspector-history-kind {
  color: var(--openbot-text-muted);
}
.diagram-inspector-history-kind::before {
  content: " · ";
}
.diagram-inspector-step-status svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.diagram-chat, .diagram-chat-launcher.ui-button {
  background: var(--openbot-bg-glass);
  box-shadow: 0 0 0 1px var(--openbot-glass-border), var(--openbot-shadow-overlay);
  backdrop-filter: blur(16px);
}
.diagram-chat-morph {
  --diagram-chat-open-duration: var(--openbot-duration-island-content);
  --diagram-chat-close-duration: var(--openbot-duration-island-content-exit);
  --diagram-chat-open-ease: cubic-bezier(0.34, 1.25, 0.64, 1);
  --diagram-chat-launcher-height: 36px;
  --diagram-chat-blur: 2px;
  display: grid;
  align-items: end;
}
.diagram-chat-morph > * {
  grid-area: 1 / 1;
}
.diagram-chat-launcher.ui-button {
  height: var(--diagram-chat-launcher-height);
  touch-action: none;
  justify-self: start;
  gap: var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
  padding-left: var(--openbot-space-1-5);
  pointer-events: auto;
  transition: opacity var(--diagram-chat-open-duration) var(--openbot-ease-out), filter var(--diagram-chat-open-duration) var(--openbot-ease-out), scale var(--diagram-chat-open-duration) var(--openbot-ease-out);
}
.diagram-chat-morph[data-open="true"] .diagram-chat-launcher.ui-button {
  scale: 0.97;
  filter: blur(var(--diagram-chat-blur));
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out), filter var(--openbot-duration-fast) var(--openbot-ease-out), scale var(--openbot-duration-fast) var(--openbot-ease-out);
}
.diagram-chat {
  display: flex;
  max-height: 340px;
  flex-direction: column;
  border-radius: var(--openbot-radius-xl);
  overflow: hidden;
  clip-path: inset(calc(100% - var(--diagram-chat-launcher-height)) 24% 0 0 round var(--openbot-radius-pill));
  opacity: 0;
  pointer-events: none;
  transition: clip-path var(--diagram-chat-close-duration) var(--openbot-ease-out), opacity var(--diagram-chat-close-duration) var(--openbot-ease-out);
}
.diagram-chat-morph[data-open="true"] .diagram-chat {
  clip-path: inset(-32px round 0);
  opacity: 1;
  pointer-events: auto;
  transition: clip-path var(--diagram-chat-open-duration) var(--diagram-chat-open-ease), opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}
.diagram-chat > * {
  filter: blur(var(--diagram-chat-blur));
  opacity: 0;
  translate: 0 var(--openbot-space-2);
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out), filter var(--openbot-duration-fast) var(--openbot-ease-out), translate var(--openbot-duration-fast) var(--openbot-ease-out);
}
.diagram-chat-morph[data-open="true"] .diagram-chat > * {
  filter: blur(0);
  opacity: 1;
  translate: 0 0;
  transition: opacity var(--diagram-chat-open-duration) var(--openbot-ease-out) var(--openbot-duration-fast), filter var(--diagram-chat-open-duration) var(--openbot-ease-out) var(--openbot-duration-fast), translate var(--diagram-chat-open-duration) var(--openbot-ease-out) var(--openbot-duration-fast);
}
.diagram-chat-avatar.agent-avatar {
  width: 24px;
  height: 24px;
}
.diagram-chat-header {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  cursor: grab;
  touch-action: none;
  border-bottom: 1px solid var(--openbot-border);
  padding: var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-3);
}
.diagram-chat-title {
  overflow: hidden;
  margin: 0;
  flex: 1;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diagram-chat-messages {
  display: flex;
  min-height: 96px;
  flex: 1;
  flex-direction: column;
  gap: var(--openbot-space-2);
  overflow-y: auto;
  padding: var(--openbot-space-3);
}
.diagram-chat-empty {
  margin: auto 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  text-align: center;
}
.diagram-chat-bubble {
  max-width: 88%;
  font-size: var(--openbot-text-md);
}
.diagram-chat-text {
  margin: 0;
  white-space: pre-wrap;
}
.diagram-chat-markdown {
  min-width: 0;
  font-size: var(--openbot-text-md);
}
.diagram-chat-changes {
  display: grid;
  gap: var(--openbot-space-1);
  margin: var(--openbot-space-2) 0 0;
  padding: 0;
  font-size: var(--openbot-text-sm);
  list-style: none;
}
.diagram-chat-changes li {
  display: flex;
  align-items: flex-start;
  gap: var(--openbot-space-1-5);
}
.diagram-chat-changes svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: none;
  margin-top: 2px;
  color: var(--openbot-success-text);
}
.diagram-chat-working {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.diagram-chat-composer.composer[data-compact] {
  grid-template-columns: minmax(0, 1fr) auto;
  margin: var(--openbot-space-2);
}
.diagram-chat-composer.composer[data-compact] > .composer-input-label {
  grid-column: 1;
}
@media (prefers-reduced-motion: reduce) {
  .diagram-edge[data-state="running"] .diagram-edge-line {
    animation: none;
  }
  .diagram-node[data-kind="routine"][data-firing] .diagram-node-icon {
    animation: none;
  }
  .diagram-chat-launcher.ui-button, .diagram-chat, .diagram-chat > *, .diagram-board-world[data-settling], .diagram-node, .diagram-port.ui-button, .diagram-edge-remove.ui-button {
    transition: none;
  }
}
.agent-usage-secondary, .agent-usage-footer {
  font-size: var(--openbot-text-sm);
  color: var(--openbot-text-muted);
}
.agent-usage-overview {
  display: grid;
  gap: var(--openbot-space-8);
}
.agent-usage-summary {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-8);
}
.agent-usage-hero {
  font-size: var(--openbot-text-usage-total);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  margin-bottom: var(--openbot-space-3);
}
.agent-usage-providers {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-6);
}
.agent-usage-provider-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-4);
  font-size: var(--openbot-text-lg);
}
.agent-usage-provider-heading > span {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.agent-usage-series-dot {
  width: var(--openbot-space-2);
  height: var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
  flex-shrink: 0;
}
.agent-usage-provider-heading strong {
  font-weight: 550;
  font-variant-numeric: tabular-nums;
}
.agent-usage-provider p {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  margin-top: var(--openbot-space-2);
}
.agent-usage-provider-icon {
  fill: var(--openbot-provider-current);
  width: var(--openbot-space-4);
  height: var(--openbot-space-4);
  flex-shrink: 0;
}
.agent-usage-trend {
  min-width: 0;
}
.agent-usage-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-4);
  margin-bottom: var(--openbot-space-4);
}
.agent-usage-totals {
  display: flex;
  flex-wrap: nowrap;
  gap: calc(var(--openbot-space-6) * 2);
  margin-top: var(--openbot-space-4);
  overflow: hidden;
}
.agent-usage-totals dt {
  font-size: var(--openbot-text-sm);
  color: var(--openbot-text-muted);
  margin-bottom: var(--openbot-space-1);
  white-space: nowrap;
}
.agent-usage-totals dd {
  margin: 0;
  font-size: var(--openbot-text-xl);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.agent-usage-table {
  overflow-x: auto;
}
.agent-usage-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--openbot-text-lg);
  font-variant-numeric: tabular-nums;
}
.agent-usage-table th, .agent-usage-table td {
  text-align: right;
  padding: var(--openbot-space-2) var(--openbot-space-3);
  border-bottom: 1px solid var(--openbot-border-strong);
  white-space: nowrap;
  font-weight: 400;
}
.agent-usage-table th:first-child {
  text-align: left;
  padding-left: 0;
  white-space: normal;
}
.agent-usage-table td:last-child {
  padding-right: 0;
}
.agent-usage-table thead th {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.agent-usage-table td {
  color: var(--openbot-text-secondary);
}
.agent-usage-model-name {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  overflow-wrap: anywhere;
  min-width: 10rem;
}
.agent-usage-footer {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-3);
  padding-bottom: var(--openbot-space-6);
}
.agent-usage-footer summary {
  cursor: pointer;
  width: fit-content;
}
.agent-usage-footer details p {
  margin-top: var(--openbot-space-3);
  max-width: 72ch;
  line-height: 1.6;
}
.app-frame-panes {
  display: contents;
}
.app-frame-panes > * {
  min-height: 0;
}
.app-frame-page-open .app-frame-panes {
  visibility: hidden;
  pointer-events: none;
}
.app-frame.app-frame-page-open .app-frame-panes * {
  visibility: hidden;
}
.window-page {
  z-index: 1;
  min-height: 0;
  overflow: hidden;
}
.agent-usage {
  container-type: inline-size;
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 0;
  height: 100%;
  flex-direction: column;
  color: var(--openbot-text-primary);
  background: var(--openbot-bg-canvas);
}
.agent-usage-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-4) var(--openbot-space-6);
  border-bottom: 1px solid var(--openbot-border);
}
.agent-usage-identity, .agent-usage-controls {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  min-width: 0;
}
.agent-usage-identity {
  flex-wrap: wrap;
}
.agent-usage-identity .ui-icon-button {
  margin-left: calc(-1 * var(--openbot-space-2));
}
.agent-usage-identity h2 {
  display: flex;
  gap: var(--openbot-space-3);
  font-size: var(--openbot-text-lg);
  color: var(--openbot-text-muted);
}
.agent-usage-identity h2 span:last-child {
  color: var(--openbot-text-primary);
  overflow-wrap: anywhere;
}
.agent-usage-controls {
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--openbot-space-3);
}
.agent-usage-body {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding: var(--openbot-space-6);
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-8);
}
.agent-usage h3 {
  font-size: var(--openbot-text-xl);
  font-weight: 550;
}
.agent-usage-notice {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  padding: var(--openbot-space-4);
  background: var(--openbot-bg-surface);
  border-radius: var(--openbot-radius-md);
}
.agent-usage-notice .ui-button {
  margin-top: var(--openbot-space-3);
}
.agent-usage-loading {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
}
.agent-usage-placeholder {
  height: 280px;
  margin-top: var(--openbot-space-6);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface);
}
@container (min-width: 850px) {
  .agent-usage-overview {
    grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.5fr);
    gap: calc(var(--openbot-space-6) * 2);
  }
  .agent-usage-body {
    padding: var(--openbot-space-8) calc(var(--openbot-space-6) * 2);
    gap: calc(var(--openbot-space-6) * 2);
  }
}
@container (max-width: 1000px) {
  .agent-usage-totals > div:nth-child(n + 7) {
    display: none;
  }
}
@container (max-width: 820px) {
  .agent-usage-totals > div:nth-child(n + 6) {
    display: none;
  }
}
@container (max-width: 660px) {
  .agent-usage-totals > div:nth-child(n + 5) {
    display: none;
  }
}
@container (max-width: 540px) {
  .agent-usage-totals > div:nth-child(n + 4) {
    display: none;
  }
}
@container (max-width: 400px) {
  .agent-usage-totals > div:nth-child(n + 3) {
    display: none;
  }
}
@container (max-width: 480px) {
  .agent-usage-hero {
    font-size: var(--openbot-text-display);
  }
  .agent-usage-body {
    padding: var(--openbot-space-4);
  }
  .agent-usage-header {
    padding: var(--openbot-space-3);
  }
  .agent-usage-controls {
    margin-left: 0;
    justify-content: flex-start;
  }
  .agent-usage-section-header {
    flex-wrap: wrap;
  }
}
.agent-usage-controls .ui-select {
  width: auto;
  flex-shrink: 0;
}
.agent-usage-controls .ui-select-trigger {
  width: max-content;
  border-color: var(--openbot-border);
  background: var(--openbot-bg-control);
  box-shadow: none;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.app-frame-panes.server-connection-workspace {
  position: relative;
  grid-column: -2 / -1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.server-connection-workspace > .app-loading {
  z-index: 1;
}
.server-connection-content > * {
  min-height: 0;
  flex: 1;
}
.schedule-pane {
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  background: var(--openbot-bg-canvas);
  padding: var(--openbot-space-4) var(--openbot-space-6) var(--openbot-space-6);
}
.tasks-page {
  display: flex;
  height: 100%;
  min-height: 0;
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
}
.tasks-page-scroll {
  min-width: 0;
  flex: 1;
  overflow-y: auto;
  padding: 0 var(--openbot-space-6) var(--openbot-space-8);
}
.tasks-page-column {
  display: flex;
  max-width: 36rem;
  flex-direction: column;
  gap: var(--openbot-space-1);
  margin: 0 auto;
}
.tasks-page-header {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-6) var(--openbot-space-2) var(--openbot-space-3);
}
.tasks-page-header .ui-icon-button {
  margin-left: calc(-1 * var(--openbot-space-2));
}
.tasks-page-header h2 {
  min-width: 0;
  flex: 1;
  margin: 0;
  font-size: var(--openbot-text-xl);
  font-weight: var(--openbot-weight-semibold);
}
.tasks-page-agent-option > span {
  flex: 1 1 auto;
}
.tasks-page-header h2 span {
  color: var(--openbot-text-muted);
  font-weight: var(--openbot-weight-regular);
}
.tasks-page-avatar.agent-avatar {
  --agent-avatar-optical-offset: -2px;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
.tasks-page-composer.composer-wrap {
  position: sticky;
  z-index: 3;
  top: 0;
  margin-bottom: var(--openbot-space-2);
  background: var(--openbot-bg-canvas);
  padding: var(--openbot-space-1) 0 0;
}
.tasks-page-composer .composer-notice {
  margin-bottom: var(--openbot-space-2);
}
.tasks-page-composer-agent {
  display: flex;
  min-width: 0;
  align-items: center;
}
.tasks-page-agent.ui-button {
  gap: var(--openbot-space-1-5);
  font-size: var(--openbot-text-sm);
  color: var(--openbot-text-secondary);
}
.tasks-page-composer-agent .tasks-page-agent.ui-button {
  margin-left: calc(-1 * var(--openbot-space-1));
}
.tasks-page-agent-face {
  display: flex;
  flex: 0 0 auto;
}
.tasks-page-agent-face[data-entering] {
  animation: tasks-page-face-in 420ms cubic-bezier(0.34, 1.36, 0.64, 1) both;
}
@keyframes tasks-page-face-in {
  from {
    opacity: 0;
    scale: 0.6;
    filter: blur(2px);
  }
}
.tasks-page-agent-chevron {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  color: var(--openbot-text-muted);
  transition: transform var(--openbot-duration-normal) ease;
}
.tasks-page-agent[aria-expanded="true"] .tasks-page-agent-chevron {
  transform: rotate(180deg);
}
.tasks-page-agent-check {
  color: var(--openbot-text-primary);
}
.tasks-page-took {
  display: flex;
  min-height: var(--openbot-control-sm);
  align-items: center;
  gap: var(--openbot-space-1-5);
  margin-bottom: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  animation: tasks-page-rise var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.tasks-page-took .ui-button-size-sm {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.tasks-page-took-agent {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  padding: 0 var(--openbot-space-1);
}
.tasks-page-took-text {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tasks-page-section {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-0-5);
}
.tasks-page-section + .tasks-page-section {
  margin-top: var(--openbot-space-4);
}
.tasks-page-section-heading {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  margin: 0;
  padding: var(--openbot-space-1) var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.tasks-page-count {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
  font-variant-numeric: tabular-nums;
}
.tasks-page-list {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-0-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.tasks-page-row.ui-button {
  display: grid;
  width: 100%;
  height: var(--openbot-control-lg);
  align-items: center;
  justify-content: stretch;
  grid-template-columns: 16px minmax(0, 1fr) auto auto;
  gap: var(--openbot-space-3);
  border-radius: var(--openbot-radius-md);
  padding: 0 var(--openbot-space-2);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-regular);
  text-align: left;
  --task-list-glyph: 14px;
}
.tasks-page-row[data-selected] {
  background: var(--openbot-bg-control-active);
}
.tasks-page-section[data-closed] .tasks-page-row:not([data-selected]) {
  opacity: 0.55;
}
.tasks-page-row-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tasks-page-status {
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tasks-page-status[data-tone="working"] {
  color: var(--openbot-text-secondary);
}
.tasks-page-status[data-tone="attention"] {
  color: var(--openbot-accent);
}
.tasks-page-status[data-tone="danger"] {
  color: var(--openbot-danger-text);
}
.tasks-page-show-all.ui-button {
  align-self: flex-start;
  color: var(--openbot-text-muted);
}
li[data-arrived] > .tasks-page-row {
  animation: tasks-page-arrive 1600ms var(--openbot-ease-out);
}
.tasks-page-side {
  position: relative;
  flex: 0 0 380px;
  overflow: hidden;
  transition: flex-basis var(--openbot-duration-overlay) var(--openbot-ease-out), opacity var(--openbot-duration-overlay) var(--openbot-ease-out);
}
@starting-style {
  .tasks-page-side {
    flex-basis: 0;
    opacity: 0.6;
  }
}
.tasks-page-side[data-closing] {
  flex-basis: 0;
  opacity: 0.6;
  transition-duration: var(--openbot-duration-slow);
  transition-timing-function: cubic-bezier(0.5, 0, 0.75, 0);
}
.tasks-page-side-content {
  position: absolute;
  inset: 0 auto 0 0;
  display: flex;
  width: 380px;
  --browser-panel-width: 100%;
}
.tasks-page-side-content > * {
  flex: 1;
  min-width: 0;
}
.tasks-page-side-content[data-entering] {
  animation: tasks-page-side-swap var(--openbot-duration-normal) var(--openbot-ease-out);
}
@keyframes tasks-page-side-swap {
  from {
    opacity: 0;
    transform: translateX(6px);
  }
}
@keyframes tasks-page-rise {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}
@keyframes tasks-page-arrive {
  from {
    background: var(--openbot-bg-control-active);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tasks-page-took, .tasks-page-agent-face[data-entering], li[data-arrived] > .tasks-page-row, .tasks-page-side-content[data-entering] {
    animation: none;
  }
  .tasks-page-side, .tasks-page-agent-chevron {
    transition: none;
  }
}
.ui-chart {
  width: 100%;
  height: 300px;
  min-width: 0;
  font-size: var(--openbot-text-sm);
}
.ui-chart-tooltip {
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-primary);
  padding: var(--openbot-space-3);
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
.ui-chart-tooltip-row {
  display: grid;
  grid-template-columns: var(--openbot-space-4) auto 1fr;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-top: var(--openbot-space-2);
}
.ui-chart-tooltip-value {
  text-align: right;
}
.ui-chart-tooltip-mark {
  display: flex;
  align-items: center;
}
.ui-chart-tooltip-total {
  border-top: 1px solid var(--openbot-border-strong);
  padding-top: var(--openbot-space-2);
  color: var(--openbot-text-muted);
}
.storage-usage {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
}
.storage-usage [data-group="workspaces"] {
  --storage-color: var(--openbot-chart-storage-workspaces);
}
.storage-usage [data-group="files"] {
  --storage-color: var(--openbot-chart-storage-files);
}
.storage-usage [data-group="chats"] {
  --storage-color: var(--openbot-chart-storage-chats);
}
.storage-usage [data-group="downloads"] {
  --storage-color: var(--openbot-chart-storage-downloads);
}
.storage-usage [data-group="runtimes"] {
  --storage-color: var(--openbot-chart-storage-runtimes);
}
.storage-usage [data-group="app"] {
  --storage-color: var(--openbot-chart-storage-app);
}
.storage-usage-bar {
  display: flex;
  height: 10px;
  gap: var(--openbot-space-0-5);
}
.storage-usage-segment {
  min-width: 4px;
  flex-basis: 0;
  border-radius: var(--openbot-radius-xs);
  background: var(--storage-color);
  transition: opacity var(--openbot-duration-fast) ease;
}
.storage-usage[data-hovering="true"] :is(.storage-usage-segment, .storage-usage-legend-row):not([data-active]) {
  opacity: 0.35;
}
.storage-usage-legend {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--openbot-space-1) var(--openbot-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.storage-usage-legend-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-1) 0;
  font-size: var(--openbot-text-md);
  transition: opacity var(--openbot-duration-fast) ease;
}
.storage-usage-swatch {
  width: var(--openbot-space-2);
  height: var(--openbot-space-2);
  align-self: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--storage-color);
}
.storage-usage-legend-label {
  overflow: hidden;
  color: var(--openbot-text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.storage-usage-legend-value {
  color: var(--openbot-text-primary);
  font-variant-numeric: tabular-nums;
}
.storage-usage-legend-percent {
  min-width: 4ch;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.storage-overview {
  container-type: inline-size;
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--openbot-space-8);
  color: var(--openbot-text-primary);
}
.storage-summary {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
}
.storage-summary-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--openbot-space-3);
}
.storage-summary-label {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.storage-summary-total {
  margin: var(--openbot-space-1) 0;
  font-size: var(--openbot-text-display);
  font-weight: var(--openbot-weight-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.storage-summary-total-skeleton {
  width: 140px;
  height: 36px;
  margin: var(--openbot-space-1) 0;
}
.storage-summary-caption {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.storage-message {
  display: flex;
  align-items: flex-start;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-grouped);
}
.storage-message-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--openbot-text-muted);
  stroke-width: var(--openbot-icon-stroke);
}
.storage-message[role="alert"] .storage-message-icon {
  color: var(--openbot-danger-text);
}
.storage-message-title {
  margin: 0;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.storage-message-description {
  margin: var(--openbot-space-0-5) 0 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.storage-section {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
}
.storage-section-heading-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--openbot-space-3);
}
.storage-section-heading {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
}
.storage-section-aside {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.storage-rows {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-grouped);
  list-style: none;
}
.storage-rows > li + li {
  border-top: 1px solid var(--openbot-border-grouped);
}
.storage-row.ui-button {
  display: flex;
  width: 100%;
  height: auto;
  min-height: 52px;
  align-items: center;
  justify-content: flex-start;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-2) var(--openbot-space-4);
  border-radius: 0;
  text-align: left;
  font-weight: var(--openbot-weight-regular);
}
.storage-row-avatar {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
}
.storage-row-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: var(--openbot-space-0-5);
}
.storage-row-title {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.storage-row-meta {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.storage-row-share {
  width: 96px;
  height: 6px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-hover);
}
.storage-row-share-fill {
  display: block;
  height: 100%;
  min-width: 4px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-muted);
}
.storage-row-size {
  display: flex;
  min-width: 72px;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-variant-numeric: tabular-nums;
}
.storage-row-percent {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.storage-row-chevron {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--openbot-text-dim);
  stroke-width: var(--openbot-icon-stroke);
}
.storage-cleanup-row {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-2) var(--openbot-space-4);
}
.storage-cleanup-row .storage-row-meta {
  white-space: normal;
}
.storage-subview-header {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.storage-subview-back > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.storage-subview-header h3 {
  margin: 0;
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
}
@container (max-width: 520px) {
  .storage-row-share {
    display: none;
  }
}
.file-list {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--openbot-space-3);
}
.file-list-toolbar {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.file-list-search {
  position: relative;
  min-width: 0;
  flex: 1;
}
.file-list-search-icon {
  position: absolute;
  top: 50%;
  left: var(--openbot-space-2);
  width: 14px;
  height: 14px;
  color: var(--openbot-text-muted);
  pointer-events: none;
  stroke-width: var(--openbot-icon-stroke);
  transform: translateY(-50%);
}
.file-list-search .file-list-search-input {
  width: 100%;
  padding-left: calc(var(--openbot-space-2) + 14px + var(--openbot-space-1-5));
}
.file-list-toolbar > .ui-select {
  width: auto;
  flex: 0 0 auto;
}
.file-list-sort {
  width: 120px;
}
.file-list[data-compact="true"] .file-list-sort {
  width: auto;
}
.file-list-filters {
  display: flex;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  flex-wrap: wrap;
  gap: var(--openbot-space-1);
}
.file-list[data-compact="true"] .file-list-filters {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.file-list-filter.ui-button {
  flex: 0 0 auto;
  gap: var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-pill);
  color: var(--openbot-text-muted);
}
.file-list-filter.ui-button[aria-pressed="true"] {
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
}
.file-list-filter-count {
  color: var(--openbot-text-muted);
  font-variant-numeric: tabular-nums;
}
.file-list-filter[aria-pressed="true"] .file-list-filter-count {
  color: var(--openbot-text-secondary);
}
.file-list-summary {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.file-list-group {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
}
.file-list-group + .file-list-group {
  margin-top: var(--openbot-space-2);
}
.file-list-group-heading {
  margin: 0;
  padding: 0 var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.file-list-rows {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-0-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.file-list-skeleton {
  height: 48px;
  border-radius: var(--openbot-radius-md);
}
.file-list-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-8) var(--openbot-space-4);
  text-align: center;
}
.file-list-message-icon {
  width: 20px;
  height: 20px;
  color: var(--openbot-danger-text);
  stroke-width: var(--openbot-icon-stroke);
}
.file-list-message-title {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.file-list-message-description {
  max-width: 320px;
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.file-row {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
  padding-right: var(--openbot-space-1);
  border-radius: var(--openbot-radius-md);
}
.file-row:hover, .file-row:focus-within {
  background: var(--openbot-hover);
}
.file-row-main.ui-button {
  display: flex;
  min-width: 0;
  height: auto;
  flex: 1;
  align-items: center;
  justify-content: flex-start;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  text-align: left;
  font-weight: var(--openbot-weight-regular);
}
.file-row-main.ui-button:hover {
  background: transparent;
}
.file-row-main.ui-button:disabled {
  opacity: 1;
}
.files-file-visual {
  --file-reference-color: var(--openbot-file-default);
  --file-reference-soft: var(--openbot-file-default-soft);
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border-radius: var(--openbot-radius-md);
  background: var(--file-reference-soft);
  color: var(--file-reference-color);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: 0.02em;
}
.files-file-visual[data-file-tone="document"] {
  color: var(--openbot-danger-text);
}
.files-file-visual[data-status="missing"], .files-file-visual[data-status="failed"] {
  opacity: 0.5;
}
.files-file-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.file-row-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: var(--openbot-space-0-5);
}
.file-row-name {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-row[data-status="missing"] .file-row-name {
  color: var(--openbot-text-muted);
  text-decoration: line-through;
  text-decoration-color: var(--openbot-text-dim);
}
.file-row-meta {
  display: flex;
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  white-space: pre;
}
.file-row-meta-part {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-row-meta-part:first-child {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}
.file-row-status {
  flex: 0 0 auto;
}
.file-row-status.z-badge-variant-destructive-light {
  color: var(--openbot-danger-text);
}
.file-row-menu-trigger {
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
}
.file-row-menu-trigger > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: var(--openbot-icon-stroke);
}
.files-button-icon {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.agent-files-view {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--openbot-bg-canvas);
}
.agent-files-body {
  container-type: inline-size;
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: var(--openbot-space-6);
  overflow-y: auto;
  padding: var(--openbot-space-4);
}
.agent-files-summary {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-3);
}
.agent-files-total-label {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.agent-files-total {
  margin: var(--openbot-space-0-5) 0 0;
  font-size: var(--openbot-text-3xl);
  font-weight: var(--openbot-weight-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.agent-files-total-skeleton {
  width: 96px;
  height: 28px;
  margin-top: var(--openbot-space-0-5);
}
.agent-files-tiles {
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-grouped);
}
.agent-files-tile {
  display: flex;
  min-height: 36px;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-2) var(--openbot-space-3);
}
.agent-files-tile + .agent-files-tile {
  border-top: 1px solid var(--openbot-border-grouped);
}
.agent-files-tile dt {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-1);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
}
.agent-files-tile-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-files-tile dd {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-variant-numeric: tabular-nums;
}
.agent-files-tile-action {
  flex: 0 0 auto;
  margin-block: calc(var(--openbot-space-1) * -1);
  color: var(--openbot-text-muted);
}
.agent-files-tile-skeleton {
  width: 64px;
  height: 18px;
}
.agent-files-section {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
}
.conversation-files-summary {
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
.conversation-files-content {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  padding: var(--openbot-space-3);
}
.agent-import-guide {
  display: flex;
  max-width: 560px;
  flex-direction: column;
  gap: var(--openbot-space-6);
}
.agent-import-intro {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1-5);
}
.agent-import-heading {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-xl);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: -0.01em;
}
.agent-import-lede {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: 1.5;
}
.agent-import-steps {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.agent-import-step {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: var(--openbot-space-4);
  padding-bottom: var(--openbot-space-6);
}
.agent-import-step:last-child {
  padding-bottom: 0;
}
.agent-import-step:not(:last-child)::before {
  position: absolute;
  top: 28px;
  bottom: 4px;
  left: 11.5px;
  width: 1px;
  background: var(--openbot-border-grouped);
  content: "";
}
.agent-import-marker {
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  font-weight: var(--openbot-weight-medium);
}
.agent-import-step-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--openbot-space-2);
  padding-top: 2px;
}
.agent-import-step-title {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.agent-import-step-note {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 1.45;
}
.agent-import-setup {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--openbot-space-3);
}
.agent-import-setup .ui-sliding-tabs-content-slot {
  width: 100%;
}
.agent-import-setup-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--openbot-space-2);
}
.agent-import-card {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-3);
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-grouped);
}
.agent-import-card-icon {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: none;
  color: var(--openbot-text-secondary);
  stroke-width: var(--openbot-icon-stroke);
}
.agent-import-card-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}
.agent-import-card-name {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.agent-import-card-meta {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-import-prompt {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-3);
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-grouped);
}
.agent-import-prompt-text {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-import-prompt svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.agent-import-card .ui-button svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.agent-import-picker.ui-button {
  display: flex;
  width: 100%;
  height: auto;
  min-height: 64px;
  align-items: center;
  justify-content: flex-start;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-grouped);
  text-align: left;
  font-weight: var(--openbot-weight-regular);
}
.agent-import-picker.ui-button:hover:not(:disabled, [aria-disabled="true"]) {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-control-hover);
}
.agent-import-picker-icon {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  flex: 0 0 auto;
  color: var(--openbot-text-secondary);
  stroke-width: var(--openbot-icon-stroke);
}
.agent-import-picker-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--openbot-space-0-5);
}
.agent-import-picker-title {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.agent-import-picker-meta {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.agent-import-row {
  display: flex;
  min-height: 52px;
  align-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3) var(--openbot-space-4);
}
label.agent-import-row {
  cursor: pointer;
}
label.agent-import-row:hover {
  background: var(--openbot-hover);
}
label.agent-import-row:has(input:disabled) {
  cursor: default;
}
.agent-import-row-note {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 1.4;
}
.agent-import-notes {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  margin: var(--openbot-space-1) 0 0;
  padding: 0;
  list-style: none;
}
.agent-import-done {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.agent-import-done-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  color: var(--openbot-success-text);
  stroke-width: var(--openbot-icon-stroke);
}
.agent-import-skipped-icon {
  color: var(--openbot-warning-text);
}
.agent-import-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
}
.agent-import-row-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-1);
}
.agent-import-name-hint {
  display: inline-flex;
  flex: none;
  color: var(--openbot-text-muted);
  border-radius: var(--openbot-radius-sm);
}
.agent-import-name-hint:hover, .agent-import-name-hint:focus-visible {
  color: var(--openbot-text-secondary);
}
.agent-import-name-hint svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  stroke-width: var(--openbot-icon-stroke);
}
.agent-import-members {
  display: flex;
  flex: none;
  width: 44px;
}
.agent-import-member-avatar {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: var(--openbot-radius-pill);
  box-shadow: 0 0 0 2px var(--openbot-bg-grouped);
}
.agent-import-member-avatar + .agent-import-member-avatar {
  margin-left: -11px;
}
.agent-import-channel-icon {
  width: 28px;
  height: var(--openbot-icon-md);
  flex: none;
  color: var(--openbot-text-secondary);
  stroke-width: var(--openbot-icon-stroke);
}
.instance-transfer {
  display: flex;
  max-width: 720px;
  flex-direction: column;
  gap: var(--openbot-space-4);
}
.instance-transfer-start {
  justify-content: flex-start;
}
.instance-transfer-back {
  align-self: flex-start;
  padding-inline: 0;
}
.instance-transfer-link {
  align-self: flex-start;
  padding-inline: 0;
}
.instance-transfer-chip {
  padding: 0 var(--openbot-space-1-5);
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-pill);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  white-space: nowrap;
}
.instance-transfer-flow {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  margin: 0;
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-lg);
  list-style: none;
}
.instance-transfer-flow-item {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-1-5);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  text-align: center;
}
.instance-transfer-flow-icon {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  color: var(--openbot-text-primary);
}
.instance-transfer-flow-arrow {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: none;
  color: var(--openbot-text-muted);
}
.instance-transfer-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--openbot-space-3);
}
.instance-transfer-tile {
  display: flex;
  height: auto;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-4);
  text-align: left;
  white-space: normal;
}
.instance-transfer-tile-icon {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  margin-bottom: var(--openbot-space-2);
}
.instance-transfer-tile-title {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.instance-transfer-tile-text {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
}
.instance-transfer-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--openbot-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.instance-transfer-summary-item {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
}
.instance-transfer-summary-icon {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: none;
  color: var(--openbot-text-muted);
}
.instance-transfer-not-moved {
  display: flex;
  align-items: flex-start;
  gap: var(--openbot-space-2);
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 1.45;
}
.instance-transfer-not-moved-icon {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: none;
  margin-top: 2px;
}
@media (max-width: 640px) {
  .instance-transfer-tiles, .instance-transfer-summary {
    grid-template-columns: minmax(0, 1fr);
  }
}
.settings-modal-tabs-root {
  display: contents;
}
.settings-modal {
  --openbot-bg-surface: var(--openbot-bg-control);
  --openbot-text-muted: var(--openbot-settings-text-muted);
  width: min(880px, calc(100vw - 48px));
  height: min(600px, calc(100dvh - 48px));
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  overflow: hidden;
  outline: none;
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
  transform-origin: center;
  animation: settings-modal-in var(--openbot-duration-overlay) var(--openbot-ease-out) both;
  will-change: transform, opacity;
}
.settings-modal-nav {
  display: grid;
  gap: var(--openbot-space-1);
}
.settings-modal-nav-item {
  position: relative;
  width: 100%;
  height: auto;
  min-height: var(--openbot-control-md);
  display: grid;
  grid-template-columns: var(--openbot-icon-md) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-2);
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  padding: 0 var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font: inherit;
  font-size: var(--openbot-text-md);
  text-align: left;
  transition: background-color var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease;
}
.settings-modal-nav-item svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: var(--openbot-icon-stroke);
}
.settings-modal-nav-item[aria-current="page"] {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}
.settings-modal-nav-item {
  cursor: pointer;
}
.settings-modal-nav-item:focus-visible {
  outline: 0;
  box-shadow: var(--openbot-focus-ring);
}
@media (hover: hover) and (pointer: fine) {
  .settings-modal-nav-item:not([aria-current="page"]):hover {
    background: var(--openbot-hover);
    color: var(--openbot-text-primary);
  }
}
.settings-modal-main {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--openbot-bg-canvas);
}
.settings-modal-footer {
  display: contents;
}
.settings-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--openbot-space-4);
  padding: var(--openbot-space-6) var(--openbot-space-6) var(--openbot-space-4);
}
.settings-modal-title {
  margin: 0;
  font-size: var(--openbot-text-2xl);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-2xl);
  letter-spacing: var(--openbot-tracking-tight);
}
.settings-modal-description {
  margin: var(--openbot-space-1) 0 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.settings-modal-scroll-frame {
  position: relative;
  min-height: 0;
  overflow: hidden;
}
.settings-modal-scroll-frame::before, .settings-modal-scroll-frame::after {
  position: absolute;
  right: var(--openbot-space-2);
  left: 0;
  z-index: 1;
  height: var(--openbot-space-8);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--openbot-duration-normal) ease;
  content: "";
}
.settings-modal-scroll-frame::before {
  top: 0;
  background: linear-gradient( to bottom, var(--openbot-bg-canvas) 0%, var(--openbot-bg-canvas) 28%, var(--openbot-bg-canvas-clear) 100% );
}
.settings-modal-scroll-frame::after {
  bottom: 0;
  background: linear-gradient( to top, var(--openbot-bg-canvas) 0%, var(--openbot-bg-canvas) 28%, var(--openbot-bg-canvas-clear) 100% );
}
.settings-modal-scroll-frame[data-scroll-up]::before, .settings-modal-scroll-frame[data-scroll-down]::after {
  opacity: 1;
}
.settings-modal-content {
  height: 100%;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: var(--openbot-space-6);
  overflow-y: auto;
  padding: 0 var(--openbot-space-6) calc(var(--openbot-space-6) + var(--settings-modal-floating-space, 0px));
  scrollbar-gutter: stable;
}
.settings-modal-tab-panel {
  display: grid;
  align-content: start;
  gap: var(--openbot-space-6);
  animation: settings-modal-tab-in var(--openbot-duration-fast) var(--openbot-ease-out) both;
  will-change: transform, opacity;
}
.settings-modal-tab-panel:not([data-selected]) {
  display: none;
}
.settings-modal-card:is(.ui-card, .ui-item-group) {
  width: 100%;
  display: grid;
  overflow: hidden;
  border: 0;
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  box-shadow: none;
}
.settings-modal-card.ui-card {
  padding: 0 var(--openbot-space-4);
}
.settings-modal-card > .ui-switch-field, .settings-modal-card > .ui-item {
  padding: var(--openbot-space-3) var(--openbot-space-4);
}
.settings-modal-row {
  min-height: 64px;
}
.settings-modal-card > .ui-switch-field {
  width: 100%;
  justify-content: space-between;
  padding: var(--openbot-space-3) var(--openbot-space-4);
}
.settings-modal-card > :not(:first-child) {
  position: relative;
  border-top: 0;
}
.settings-modal-card > :not(:first-child)::before {
  position: absolute;
  top: 0;
  right: var(--openbot-space-4);
  left: var(--openbot-space-4);
  height: 1px;
  background: var(--openbot-border);
  pointer-events: none;
  content: "";
}
.settings-modal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-4);
}
.settings-modal-row-title {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-lg);
}
.settings-modal :where(.ui-item-title, .ui-switch-label) {
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
.settings-modal :where(.ui-item-description, .ui-switch-description), .settings-modal :where(.ui-text)[data-variant="caption"] {
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.settings-modal .ui-item-description {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
.settings-modal :where(.ui-item-content, .ui-switch-copy) {
  gap: var(--openbot-space-0-5);
}
.settings-modal :where(.ui-button, .ui-input, .ui-textarea, .ui-native-select) {
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
.settings-modal :where(.ui-button-variant-default) {
  background: var(--openbot-accent);
  color: var(--openbot-text-primary);
}
.settings-modal :where(.ui-button-variant-outline, .ui-button-variant-secondary) {
  background: var(--openbot-bg-surface-raised);
}
.settings-modal :where(.ui-button-variant-destructive) {
  background: var(--openbot-danger);
  color: var(--openbot-text-primary);
}
.settings-modal .ui-switch[data-checked] {
  background: var(--openbot-accent);
}
.settings-modal .ui-switch-thumb[data-checked] {
  background: var(--openbot-text-primary);
}
@media (hover: hover) and (pointer: fine) {
  .settings-modal :where(.ui-button-variant-default):hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-accent-hover);
  }
  .settings-modal :where(.ui-button-variant-destructive):hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-danger-hover);
    color: var(--openbot-text-primary);
  }
}
:is(.app-settings-modal-shell, .server-settings-modal-shell).settings-modal {
  width: min(920px, calc(100vw - 48px));
  height: min(640px, calc(100dvh - 48px));
  grid-template-columns: 196px minmax(0, 1fr);
  border-radius: var(--openbot-radius-card);
  box-shadow: var(--openbot-shadow-raised), 0 0 0 1px var(--openbot-dialog-ring);
}
:is(.app-settings-modal-shell, .server-settings-modal-shell) .settings-modal-nav {
  gap: var(--openbot-space-1);
}
:is(.app-settings-modal-shell, .server-settings-modal-shell) .settings-modal-nav-item {
  min-height: var(--openbot-control-md);
  padding-inline: var(--openbot-space-3);
  font-size: var(--openbot-text-lg);
}
:is(.app-settings-modal-shell, .server-settings-modal-shell) .settings-modal-nav-item[data-selected] {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}
:is(.app-settings-modal-shell, .server-settings-modal-shell) .settings-modal-header {
  align-items: center;
  padding: var(--openbot-space-4) var(--openbot-space-4) var(--openbot-space-6) var(--openbot-space-8);
}
:is(.app-settings-modal-shell, .server-settings-modal-shell) .settings-modal-description {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
:is(.app-settings-modal-shell, .server-settings-modal-shell) .settings-modal-content {
  gap: var(--openbot-space-6);
  padding: 0 var(--openbot-space-8) calc(var(--openbot-space-8) + var(--settings-modal-floating-space, 0px));
}
:is(.app-settings-modal-shell, .server-settings-modal-shell) .settings-modal-tab-panel {
  gap: var(--openbot-space-6);
  animation: none;
  will-change: auto;
}
:is(.app-settings-modal-shell, .server-settings-modal-shell) .ui-settings-section {
  gap: var(--openbot-space-2);
}
:is(.app-settings-modal-shell, .server-settings-modal-shell) .ui-settings-section-header {
  padding-inline: 0;
}
:is(.app-settings-modal-shell, .server-settings-modal-shell) .ui-settings-section-heading {
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.provider-picker-embedded {
  border: 0;
}
.provider-picker-embedded .provider-picker-list {
  overflow: hidden;
  border: 0;
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
}
.provider-picker-embedded .provider-picker-option {
  position: relative;
  min-height: 64px;
  border: 0;
  background: transparent;
  padding: 0 var(--openbot-space-4);
}
.provider-picker-embedded .provider-picker-option-selection {
  min-height: 64px;
  padding: var(--openbot-space-3) 0;
}
.provider-picker-embedded .provider-picker-check-error.provider-picker-used-by {
  margin-top: calc(-1 * var(--openbot-space-4));
  padding: 0 0 var(--openbot-space-3) 54px;
}
.provider-picker-embedded .provider-picker-accounts {
  margin-top: calc(-1 * var(--openbot-space-2));
  padding: 0 0 var(--openbot-space-2) 54px;
}
.provider-picker-embedded .provider-picker-option + .provider-picker-option, .provider-picker-embedded .provider-picker-option-custom {
  border-top: 0;
}
.provider-picker-embedded .provider-picker-option + .provider-picker-option::before, .provider-picker-embedded .provider-picker-option-custom::before {
  position: absolute;
  top: 0;
  right: var(--openbot-space-4);
  left: var(--openbot-space-4);
  height: 1px;
  background: var(--openbot-border);
  pointer-events: none;
  content: "";
}
.provider-picker-embedded .provider-picker-actions {
  gap: var(--openbot-space-2);
}
.provider-picker-embedded .provider-picker-install, .provider-picker-embedded .provider-picker-custom-count {
  margin-right: 0;
}
.settings-modal .ui-button-variant-default.provider-picker-install:not(.provider-picker-connect) {
  background: var(--openbot-surface-light);
  color: var(--openbot-text-on-light);
}
@media (hover: hover) and (pointer: fine) {
  .settings-modal .ui-button-variant-default.provider-picker-install:not(.provider-picker-connect):hover:not(:disabled):not( [data-disabled] ) {
    background: var(--openbot-surface-light);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--openbot-surface-light) 82%, transparent);
    }
  }
}
.provider-picker-embedded .provider-picker-option:hover:not(.provider-picker-option-unavailable), .provider-picker-embedded .provider-picker-option:focus-within, .provider-picker-embedded .provider-picker-option-selected {
  background: var(--openbot-bg-control-hover);
}
.settings-modal .provider-picker-name {
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-lg);
}
.settings-modal :where(.provider-picker-email, .provider-picker-check-error) {
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.settings-modal .provider-picker-account .provider-picker-name {
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.settings-modal .provider-picker-account .provider-picker-email {
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.settings-modal .provider-picker-status {
  font-variant-numeric: tabular-nums;
}
.app-settings-modal-shell .settings-modal-select {
  width: 168px;
}
.app-settings-modal-shell .settings-modal-select .ui-select-trigger {
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-secondary);
}
.app-settings-modal-shell .settings-modal-update-track-select {
  width: 112px;
}
.app-settings-modal-shell .settings-modal-update-actions {
  flex-wrap: wrap;
}
.app-settings-modal-shell .settings-modal-update-status {
  text-wrap: pretty;
}
.app-settings-modal-shell .settings-modal-update-status-active {
  color: var(--openbot-accent);
}
.app-settings-modal-shell .settings-modal-error {
  color: var(--openbot-danger);
}
.settings-identity-name-row.ui-item, .settings-identity-image-row.ui-item {
  min-height: 72px;
}
.settings-identity-name-control {
  --settings-identity-error-duration: 280ms;
  position: relative;
  width: 220px;
  height: var(--openbot-control-md);
}
.settings-identity-name-input.ui-input {
  width: 100%;
  transition: border-color var(--openbot-duration-normal) ease-out;
  will-change: transform;
}
.settings-identity-name-input.is-shaking {
  animation: settings-identity-name-shake 280ms linear;
}
.settings-identity-name-error {
  position: absolute;
  top: calc(100% + var(--openbot-space-0-5));
  right: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--settings-identity-error-duration) ease-out, visibility 0s linear var(--settings-identity-error-duration);
}
.settings-identity-name-control[data-invalid] .settings-identity-name-error {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--settings-identity-error-duration) ease-out, visibility 0s linear;
}
.settings-identity-image-control {
  gap: var(--openbot-space-2);
}
.settings-identity-image-picker {
  position: relative;
  display: flex;
}
.settings-identity-image-trigger {
  position: relative;
  width: calc(var(--openbot-control-xl) + var(--openbot-space-2));
  height: calc(var(--openbot-control-xl) + var(--openbot-space-2));
  overflow: hidden;
}
.settings-modal-save-bar {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-4);
  border-top: 1px solid var(--openbot-border);
  background: var(--openbot-bg-surface);
  padding: var(--openbot-space-3) var(--openbot-space-6);
}
.settings-modal-save-actions {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
}
.settings-modal-readonly-value {
  min-width: 180px;
  max-width: 300px;
  overflow-wrap: anywhere;
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
  text-align: right;
  user-select: text;
}
.settings-modal-profile-photo-trigger {
  border-radius: var(--openbot-radius-pill);
}
.settings-modal-avatar {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-hover);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
}
.settings-modal-avatar > img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  outline: 1px solid var(--openbot-image-outline);
  outline-offset: -1px;
}
@keyframes settings-identity-name-shake {
  0%, 100% {
    transform: translateX(0);
  }
  28.57% {
    transform: translateX(6px);
  }
  57.14% {
    transform: translateX(-6px);
  }
  78.57% {
    transform: translateX(4px);
  }
}
@keyframes settings-modal-tab-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes settings-modal-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.965);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (max-width: 720px) {
  .settings-modal {
    width: calc(100vw - 24px);
    height: calc(100dvh - 24px);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  .settings-modal-nav {
    display: flex;
    overflow-x: auto;
  }
  .settings-modal-nav-item {
    width: auto;
    flex: 0 0 auto;
  }
  .settings-modal-header {
    padding: var(--openbot-space-4);
  }
  .settings-modal-content {
    gap: var(--openbot-space-4);
    padding: 0 var(--openbot-space-4) calc(var(--openbot-space-4) + var(--settings-modal-floating-space, 0px));
  }
  :is(.app-settings-modal-shell, .server-settings-modal-shell).settings-modal {
    width: calc(100vw - 24px);
    height: calc(100dvh - 24px);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  :is(.app-settings-modal-shell, .server-settings-modal-shell) .settings-modal-header {
    padding: var(--openbot-space-4);
  }
  :is(.app-settings-modal-shell, .server-settings-modal-shell) .settings-modal-content, :is(.app-settings-modal-shell, .server-settings-modal-shell) .settings-modal-tab-panel {
    gap: var(--openbot-space-6);
  }
  :is(.app-settings-modal-shell, .server-settings-modal-shell) .settings-modal-content {
    padding: 0 var(--openbot-space-4) var(--openbot-space-4);
  }
  .settings-identity-name-row, .settings-identity-image-row, .settings-modal-account-email-row {
    align-items: flex-start;
    flex-direction: column;
  }
  .settings-identity-name-control {
    width: min(320px, 100%);
    max-width: 320px;
    height: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--openbot-control-md) var(--openbot-leading-sm);
    align-items: stretch;
    row-gap: var(--openbot-space-0-5);
  }
  .settings-identity-name-error {
    position: static;
  }
  .settings-identity-image-control, .settings-modal-account-email-row .ui-item-actions {
    width: 100%;
    max-width: none;
    justify-content: space-between;
  }
  .settings-modal-readonly-value {
    min-width: 0;
    max-width: none;
    text-align: left;
  }
  .settings-modal-save-bar {
    padding-inline: var(--openbot-space-4);
  }
}
@media (max-width: 520px) {
  .settings-modal-save-bar {
    align-items: flex-start;
    flex-direction: column;
  }
  .settings-modal-save-actions {
    width: 100%;
    justify-content: flex-end;
  }
  .app-settings-modal-shell .settings-modal-row.ui-item {
    align-items: flex-start;
    flex-direction: column;
  }
  .app-settings-modal-shell .settings-modal-row .ui-item-actions, .app-settings-modal-shell :is(.settings-modal-select, .settings-modal-update-track-select) {
    width: 100%;
  }
  .app-settings-modal-shell .settings-modal-update-actions {
    justify-content: flex-end;
  }
}
@media (prefers-reduced-motion: reduce) {
  .settings-modal {
    animation: none;
  }
  .settings-modal-scroll-frame::before, .settings-modal-scroll-frame::after {
    transition: none;
  }
  .settings-modal-tab-panel {
    animation: none;
  }
  .settings-identity-name-input.is-shaking {
    animation: none;
    transform: none;
  }
}
.settings-panel .settings-identity-name-row {
  align-items: flex-start;
  flex-direction: column;
}
.settings-panel .settings-identity-name-control {
  width: 100%;
}
.settings-modal-crumbs {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.settings-modal .settings-modal-crumb-parent {
  min-width: 0;
  height: auto;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  color: var(--openbot-text-muted);
  margin-block: calc(-1 * var(--openbot-space-1) - 1px);
  margin-inline: calc(-1 * var(--openbot-space-2) - 1px);
  padding: var(--openbot-space-1) var(--openbot-space-2);
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .settings-modal .settings-modal-crumb-parent:hover:not(:disabled) {
    background: transparent;
    color: var(--openbot-text-primary);
  }
}
.settings-modal-crumb-separator {
  flex: 0 0 auto;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
}
.settings-modal-crumb-current {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-provider-section {
  display: grid;
  gap: var(--openbot-space-2);
}
.settings-dynamic-island-size > .ui-slider-field, .settings-dynamic-island-preview {
  padding: var(--openbot-space-3) var(--openbot-space-4);
}
.settings-dynamic-island-server-mark {
  --server-gradient-logo-size: 32px;
  --server-gradient-logo-radius: var(--openbot-radius-md);
}
.settings-dynamic-island-server-mark > img {
  width: 32px;
  height: 32px;
  border-radius: var(--openbot-radius-md);
}
.settings-dynamic-island-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--openbot-space-3);
}
.settings-dynamic-island-preview-display {
  min-width: 0;
  display: grid;
  gap: var(--openbot-space-1-5);
  margin: 0;
}
.settings-dynamic-island-preview-bar {
  height: 64px;
  display: flex;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-canvas);
  box-shadow: inset 0 0 0 1px var(--openbot-border);
}
.settings-dynamic-island-preview-fit {
  margin-top: 1px;
  display: flex;
  justify-content: center;
  transform-origin: top center;
  scale: var(--settings-dynamic-island-preview-scale, 1);
  transition: scale var(--openbot-duration-slow) var(--openbot-ease-out);
}
.settings-dynamic-island-preview-caption {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-align: center;
}
.settings-voice-key {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-top: var(--openbot-space-2);
}
.settings-voice-key > .ui-input {
  flex: 1;
  min-width: 0;
}
.settings-sound-theme-row {
  flex-wrap: wrap;
}
.settings-sound-theme-row > .sound-theme-picker {
  flex-basis: 100%;
}
.window-rail {
  display: flex;
  width: 52px;
  min-height: 0;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: calc(var(--left-header-height, 38px) + var(--openbot-space-1)) 0 var(--openbot-space-3);
  -webkit-app-region: drag;
}
.window-rail-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-1-5);
  -webkit-app-region: no-drag;
}
.window-rail-button {
  position: relative;
  display: flex;
  width: var(--openbot-control-lg);
  height: var(--openbot-control-lg);
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--openbot-radius-lg);
  background: transparent;
  padding: 0;
  color: var(--openbot-text-muted);
  font: inherit;
  cursor: pointer;
  -webkit-app-region: no-drag;
}
@media (hover: hover) and (pointer: fine) {
  .window-rail-button:hover {
    background: var(--openbot-bg-control-hover);
    color: var(--openbot-text-primary);
  }
}
.window-rail-button[aria-current="page"], .window-rail-button[aria-current="page"]:hover:not(:disabled):not([data-disabled]) {
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
}
.window-rail-button:focus-visible {
  outline: 0;
  box-shadow: var(--openbot-focus-ring);
}
.window-rail-button svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
}
.window-rail-notice {
  position: absolute;
  top: var(--openbot-space-1-5);
  right: var(--openbot-space-1-5);
  width: var(--openbot-space-2);
  height: var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-badge-new);
}
.window-rail-usage-card .account-usage-refresh {
  display: none;
}
.account-usage-popover.window-rail-usage-card {
  transition: none;
  transform-origin: var(--kb-tooltip-content-transform-origin);
}
.window-rail-button.window-rail-usage {
  border-radius: var(--openbot-radius-pill);
}
.window-rail-button .window-rail-usage-ring {
  position: absolute;
  inset: 1px;
  width: 34px;
  height: 34px;
  transform: rotate(-90deg);
}
.window-rail-button .window-rail-usage-logo {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  overflow: visible;
  fill: var(--openbot-provider-current);
}
.window-rail-usage-track {
  stroke: currentcolor;
  opacity: 0.15;
}
.window-rail-usage-arc {
  stroke: var(--openbot-success);
}
.window-rail-usage-arc[data-usage-tone="warning"] {
  stroke: var(--openbot-warning);
}
.window-rail-usage-arc[data-usage-tone="critical"] {
  stroke: var(--openbot-danger);
}
.app-window {
  --window-frame: var(--openbot-bg-canvas);
  @supports (color: color-mix(in lab, red, red)) {
    --window-frame: color-mix(in srgb, var(--openbot-bg-canvas) 50%, var(--openbot-bg-notch));
  }
  --window-edge: var(--openbot-space-1);
  --window-hairline-height: var(--openbot-icon-lg);
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 0;
  grid-template-columns: auto minmax(0, 1fr);
  background: var(--window-frame);
}
.app-window > .window-rail[hidden] {
  display: none;
}
.app-window > .app-frame {
  grid-column: -2;
}
@media (max-width: 720px) {
  .app-window > .window-rail {
    display: none;
  }
}
@media (min-width: 721px) {
  .app-window > .app-frame-edge > .sidebar:not(.sidebar-compact) .sidebar-topbar {
    position: relative;
  }
  .app-window > .app-frame-platform-darwin:not(.app-frame-with-server-rail) > .sidebar:not(.sidebar-compact) .sidebar-topbar {
    padding-left: var(--openbot-space-6);
  }
  .app-window > .app-frame-edge {
    position: relative;
    isolation: isolate;
    padding: 0 calc(var(--window-edge) + 1px) calc(var(--window-edge) + 1px) 0;
    background: var(--window-frame);
  }
  .app-window > .app-frame-edge::before {
    position: absolute;
    z-index: -1;
    inset: calc(var(--left-header-height) - 1px) var(--window-edge) var(--window-edge) 0;
    border: 1px solid var(--openbot-border);
    border-radius: var(--openbot-radius-card);
    background: var(--openbot-bg-canvas);
    content: "";
    pointer-events: none;
  }
  .app-window > .app-frame-edge.app-frame-with-server-rail::before {
    left: var(--server-rail-width);
  }
  .app-window > .app-frame-edge > .server-rail {
    background: var(--window-frame);
  }
  .app-window > .app-frame-edge > .sidebar, .app-window > .app-frame-edge :is(.conversation-panel, .direct-conversation, .diagram-view), .app-window > .app-frame-edge :is(.settings-panel, .browser-panel) {
    background: transparent;
  }
  .app-window > .app-frame-edge :is(.conversation-panel, .direct-conversation)::before {
    content: none;
  }
  .app-window > .app-frame-edge > .sidebar::before {
    inset: var(--left-header-height) 0 0 auto;
    width: 1px;
    border: 0;
    border-radius: 0;
    background: var(--openbot-border);
  }
  .app-window > .app-frame-edge > .sidebar:not(.sidebar-compact) .sidebar-topbar::after, .app-window > .app-frame-edge :is(.settings-panel, .browser-panel) > :is(.settings-panel-header, .file-preview-header, .browser-preview-header)::before {
    position: absolute;
    top: 50%;
    width: 1px;
    height: var(--window-hairline-height);
    translate: 0 -50%;
    background: var(--openbot-border-strong);
    content: "";
    pointer-events: none;
  }
  .app-window > .app-frame-edge > .sidebar:not(.sidebar-compact) .sidebar-topbar::after {
    right: 0;
  }
  .app-window > .app-frame-edge :is(.settings-panel, .browser-panel) {
    border-left: 0;
  }
  .app-window > .app-frame-edge :is(.settings-panel, .browser-panel)::before {
    inset: calc(var(--left-header-height) - 1px) auto 0 0;
    width: 1px;
    border: 0;
    border-radius: 0;
    background: var(--openbot-border);
  }
  .app-window > .app-frame-edge :is(.settings-panel, .browser-panel) > :is(.settings-panel-header, .file-preview-header, .browser-preview-header) {
    position: relative;
  }
  .app-window > .app-frame-edge :is(.settings-panel, .browser-panel) > :is(.settings-panel-header, .file-preview-header, .browser-preview-header)::before {
    left: 0;
  }
  .app-window > .app-frame-edge .side-panel-docked > :is(.settings-panel, .browser-panel)::before {
    top: 0;
  }
  .app-window > .app-frame-edge .side-panel-docked > :is(.settings-panel, .browser-panel) > :is(.settings-panel-header, .file-preview-header, .browser-preview-header)::before {
    content: none;
  }
  .app-window > .app-frame-edge .side-panel-maximized > :is(.settings-panel, .browser-panel) {
    border-bottom-right-radius: calc(var(--openbot-radius-card) - 1px);
    background: var(--openbot-bg-canvas);
  }
  .app-window > .app-frame-edge .diagram-view-body {
    border-top: 0;
    border-right: 0;
    border-radius: 0 0 calc(var(--openbot-radius-card) - 1px) 0;
  }
  .app-window > .app-frame-edge .conversation-header-actions {
    gap: var(--openbot-space-2);
  }
  .app-window > .app-frame-edge .conversation-header :is(.provider-model-trigger, .header-panel-toggle) {
    height: var(--openbot-control-sm);
    border-color: transparent;
    border-radius: var(--openbot-radius-md);
    background: transparent;
    box-shadow: none;
    color: var(--openbot-text-secondary);
  }
  .app-window > .app-frame-edge .conversation-header .header-panel-toggle {
    width: var(--openbot-control-sm);
    min-width: var(--openbot-control-sm);
    padding: 0;
    color: var(--openbot-text-muted);
  }
  @media (hover: hover) and (pointer: fine) {
    .app-window > .app-frame-edge .conversation-header :is(.provider-model-trigger, .header-panel-toggle):hover {
      border-color: transparent;
      background: var(--openbot-bg-control-hover);
      color: var(--openbot-text-primary);
    }
  }
  .app-window > .app-frame-edge .conversation-header :is(.provider-model-trigger, .header-panel-toggle):is([aria-expanded="true"], [data-expanded]):not( .computer-button-agent-active, .side-panel-toggle ) {
    border-color: transparent;
    background: var(--openbot-bg-control-active);
    color: var(--openbot-text-primary);
  }
  .app-window > .app-frame-edge .conversation-header-actions > .side-panel-toggle {
    position: relative;
    margin-left: calc(var(--openbot-space-2) + 1px);
    overflow: visible;
  }
  .app-window > .app-frame-edge .conversation-header-actions > .side-panel-toggle::before {
    position: absolute;
    top: 50%;
    left: calc(-1 * var(--openbot-space-2) - 1px);
    width: 1px;
    height: var(--window-hairline-height);
    translate: 0 -50%;
    background: var(--openbot-border-strong);
    content: "";
    pointer-events: none;
  }
  .app-frame-edge > .window-page > :is(.agent-usage, .schedule-pane, .tasks-page) {
    background: transparent;
  }
  .app-window > .app-frame-edge > .window-page .agent-usage-header, .app-window > .app-frame-edge > .window-page .routine-planner-title {
    flex: none;
    height: var(--left-header-height);
    flex-wrap: nowrap;
    padding: 0 var(--openbot-space-3);
    border-bottom: 0;
    -webkit-app-region: drag;
  }
  .app-window > .app-frame-edge > .window-page :is(.agent-usage-header, .routine-planner-title) > :is(.agent-usage-identity, .agent-usage-controls, .routine-planner-identity, p) {
    flex-wrap: nowrap;
    gap: var(--openbot-space-2);
    -webkit-app-region: no-drag;
  }
  .app-window > .app-frame-edge > .window-page :is(.agent-usage-identity, .routine-planner-identity) .ui-icon-button {
    margin-left: 0;
  }
  .app-window > .app-frame-edge > .window-page :is(.agent-usage-identity, .routine-planner-title) h2 {
    gap: var(--openbot-space-2);
    font-size: var(--openbot-text-md);
    font-weight: var(--openbot-weight-medium);
    white-space: nowrap;
    color: var(--openbot-text-primary);
  }
  .app-window > .app-frame-edge > .window-page :is(.agent-usage-identity, .routine-planner-identity) {
    overflow: hidden;
  }
  .app-window > .app-frame-edge > .window-page :is(.agent-usage-controls, .routine-planner-title > p) {
    flex: none;
  }
  .app-window > .app-frame-edge > .window-page :is(.agent-usage-header, .routine-planner-title) :is(.ui-select-trigger, .ui-icon-button) {
    height: var(--openbot-control-sm);
    border-color: transparent;
    border-radius: var(--openbot-radius-md);
    background: transparent;
    box-shadow: none;
    color: var(--openbot-text-secondary);
  }
  .app-window > .app-frame-edge > .window-page :is(.agent-usage-header, .routine-planner-title) .ui-icon-button {
    width: var(--openbot-control-sm);
  }
  @media (hover: hover) {
    .app-window > .app-frame-edge > .window-page :is(.agent-usage-header, .routine-planner-title) :is(.ui-select-trigger, .ui-icon-button):hover {
      background: var(--openbot-bg-control-hover);
      color: var(--openbot-text-primary);
    }
  }
  .app-window > .app-frame-edge > .window-page > .schedule-pane {
    padding: 0;
    overflow: hidden;
  }
  .app-window > .app-frame-edge > .window-page .routine-planner {
    height: 100%;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0;
  }
  .app-window > .app-frame-edge > .window-page .routine-planner-header {
    gap: 0;
  }
  .app-window > .app-frame-edge > .window-page .routine-planner-toolbar {
    padding: var(--openbot-space-4) var(--openbot-space-6) 0;
  }
  .app-window > .app-frame-edge > .window-page .routine-planner-body {
    min-height: 0;
    overflow-y: auto;
    padding: var(--openbot-space-4) var(--openbot-space-6) var(--openbot-space-6);
  }
  .app-window > .app-frame-edge > .window-page > .tasks-page {
    box-sizing: border-box;
    padding: var(--left-header-height) calc(var(--window-edge) + 1px) calc(var(--window-edge) + 1px) 0;
  }
  .app-window > .app-frame-edge > .window-page .tasks-page-header {
    position: absolute;
    top: 0;
    right: 0;
    left: var(--left-panel-width);
    height: var(--left-header-height);
    padding: 0 var(--openbot-space-3);
    -webkit-app-region: drag;
  }
  .app-window > .app-frame-edge > .window-page .tasks-page-header h2 {
    font-size: var(--openbot-text-md);
    font-weight: var(--openbot-weight-medium);
    white-space: nowrap;
  }
  .app-window > .app-frame-edge > .window-page .tasks-page-column {
    padding-top: var(--openbot-space-6);
  }
  .app-window > .app-frame-edge > .window-page .tasks-page-side {
    border-bottom-right-radius: calc(var(--openbot-radius-card) - 1px);
  }
  .app-frame-edge:not([data-window-page-kind="agents"]) > .window-page {
    position: absolute;
    grid-row: 1 / -1;
    grid-column: 1 / -1;
    inset: 0 0 0 1px;
  }
  .app-frame-edge[data-window-page-kind="settings"] > .window-page {
    top: var(--left-header-height);
  }
  .app-frame-edge[data-window-page-kind="titled"] > .window-page {
    pointer-events: none;
  }
  .app-frame-edge.app-frame-with-server-rail:not([data-window-page-kind="agents"]) > .window-page {
    left: calc(var(--server-rail-width) + 1px);
  }
  .app-frame-edge:not([data-window-page-kind="agents"]) > .sidebar > :not(.sidebar-topbar), .app-frame-edge:not([data-window-page-kind="agents"]) > .left-panel-resizer {
    visibility: hidden;
  }
  .app-frame-edge:not([data-window-page-kind="agents"]) > .sidebar .sidebar-new-button {
    display: none;
  }
  .app-frame-edge[data-window-page-kind="titled"] > .sidebar::before {
    display: none;
  }
  .app-window > .app-frame-edge[data-window-page-kind="titled"] > .window-page :is(.agent-usage-header, .routine-planner-title, .skills-marketplace-topbar) {
    margin-left: var(--left-panel-width);
  }
  .app-frame-edge[data-window-page-kind="titled"] > .window-page :is( .agent-usage-header, .routine-planner-title, .agent-usage-body, .routine-planner-toolbar, .routine-planner-body, .marketplace-crumbs, .skills-marketplace-body, .tasks-page-header, .tasks-page-scroll, .tasks-page-side ) {
    pointer-events: auto;
  }
  .app-window > .app-frame-edge > .window-page > .skills-marketplace-page {
    grid-template-rows: var(--left-header-height) minmax(0, 1fr);
  }
  .app-window > .app-frame-edge > .window-page .skills-marketplace-topbar {
    min-height: 0;
    padding: 0 var(--openbot-space-3);
    border-bottom: 0;
    -webkit-app-region: drag;
  }
  .app-window > .app-frame-edge > .window-page .marketplace-crumbs {
    flex: 0 1 auto;
    -webkit-app-region: no-drag;
  }
  .app-window > .app-frame-edge > .window-page .skills-marketplace-topbar .marketplace-title {
    font-size: var(--openbot-text-md);
    font-weight: var(--openbot-weight-medium);
    white-space: nowrap;
  }
  .app-window > .app-frame-edge > .window-page :is(.agent-usage-identity, .routine-planner-identity, .tasks-page-header) > .ui-icon-button, .app-window > .app-frame-edge > .window-page :is(.agent-usage-identity, .routine-planner-identity, .tasks-page-header) > h2 > span {
    display: none;
  }
  .app-frame-edge > .window-page :is(.agent-usage-identity, .routine-planner-identity, .tasks-page-header) h2:focus {
    outline: none;
  }
}
.settings-page {
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 0;
  grid-template-columns: max(var(--left-panel-width, 280px), 220px) minmax(0, 1fr);
}
.settings-page-nav {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  gap: var(--openbot-space-1);
  overflow: hidden;
  border-right: 1px solid var(--openbot-border);
  padding: var(--openbot-space-4) var(--openbot-space-3) 0;
}
.settings-page-sections, .settings-page-results {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  padding-bottom: var(--openbot-space-3);
}
.settings-page-title {
  margin: 0 0 var(--openbot-space-3);
  padding: 0 var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-lg);
}
.settings-page-title:focus {
  outline: none;
}
.settings-page-search {
  flex: none;
  border-radius: var(--openbot-radius-pill);
  padding: 0 var(--openbot-space-3);
}
.settings-page-search > svg {
  flex: none;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.settings-page-search input {
  height: 100%;
  padding: 0;
}
.settings-page-sections[hidden] {
  display: none;
}
.settings-page-empty {
  margin: var(--openbot-space-4) 0 var(--openbot-space-1);
  padding: 0 var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.settings-page-server {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
}
.settings-page-server .server-menu-mark {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.settings-page-nav-group .settings-modal-nav-item {
  padding-inline: var(--openbot-space-3);
}
.settings-page-nav-group .settings-modal-nav-item[data-selected] {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}
.settings-page-results {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-0-5);
  margin: var(--openbot-space-2) 0 0;
  padding-inline: 0;
  list-style: none;
}
.settings-page-result {
  display: flex;
  width: 100%;
  height: auto;
  flex-direction: column;
  align-items: stretch;
  gap: var(--openbot-space-0-5);
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .settings-page-result:hover {
    background: var(--openbot-bg-control-hover);
  }
}
.settings-page-result:focus-visible {
  outline: 0;
  box-shadow: var(--openbot-focus-ring);
}
.settings-page-result-section {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.settings-page-result-section svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.settings-page-result-title {
  overflow: hidden;
  padding-left: calc(var(--openbot-icon-sm) + var(--openbot-space-2));
  font-size: var(--openbot-text-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-page-content {
  position: relative;
  min-width: 0;
  min-height: 0;
}
.settings-page-content > .settings-modal.settings-modal-page {
  width: 100%;
  height: 100%;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  animation: none;
  will-change: auto;
}
.settings-page-content > .settings-modal-page > .settings-modal-main {
  background: transparent;
}
.settings-page-content > .settings-modal-page :is(.settings-modal-header, .settings-modal-content) {
  width: 100%;
  max-width: 784px;
  margin-inline: auto;
}
.settings-page-content [data-search-match] {
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control-active);
}
@media (max-width: 720px) {
  .settings-page {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  .settings-page-nav {
    border-right: 0;
    border-bottom: 1px solid var(--openbot-border);
    padding: var(--openbot-space-3) var(--openbot-space-3) 0;
  }
  .settings-page-title {
    margin-bottom: var(--openbot-space-2);
  }
  .settings-page-sections, .settings-page-results {
    max-height: 40dvh;
    padding-bottom: var(--openbot-space-2);
  }
}
.opencode-key-backdrop {
  z-index: calc(var(--openbot-layer-dialog) + 1);
}
.opencode-key-dialog {
  width: min(400px, 100%);
  max-height: calc(100dvh - var(--openbot-space-6) * 2);
  overflow-y: auto;
  outline: 0;
  border-radius: var(--openbot-radius-xl);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-6);
  color: var(--openbot-text-primary);
  animation: opencode-key-dialog-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}
.opencode-key-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--openbot-space-1);
}
.opencode-key-title {
  margin: 0;
  font-size: var(--openbot-text-xl);
  line-height: var(--openbot-leading-xl);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: var(--openbot-tracking-tight);
}
.opencode-key-description {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.opencode-key-status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success);
}
.opencode-key-form {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
  margin: var(--openbot-space-4) 0 0;
}
.opencode-key-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
}
@keyframes opencode-key-dialog-in {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
}
.settings-mobile-connect-code-collapse {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows var(--openbot-duration-overlay) var(--openbot-ease-out), opacity var(--openbot-duration-normal) ease-out;
}
@starting-style {
  .settings-mobile-connect-code-collapse {
    grid-template-rows: 0fr;
    opacity: 0;
  }
}
.settings-mobile-connect-code-collapse[data-collapsing] {
  grid-template-rows: 0fr;
  opacity: 0;
}
.settings-mobile-connect-code-collapse-body {
  min-height: 0;
  overflow: hidden;
}
.settings-mobile-connect-qr-stage {
  position: relative;
  flex: 0 0 auto;
}
.settings-mobile-connect-qr-stage .ui-qr-code {
  transition: opacity var(--openbot-duration-normal) ease-out, filter var(--openbot-duration-overlay) ease-out, transform var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.settings-mobile-connect-qr-stage[data-success] .ui-qr-code {
  opacity: 0.18;
  filter: blur(2px);
  transform: scale(0.97);
}
.settings-mobile-connect-success-mark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--openbot-success);
  animation: settings-mobile-connect-success-enter var(--openbot-duration-overlay) var(--openbot-ease-out) both;
}
.settings-mobile-connect-success-mark::before {
  position: absolute;
  width: 84px;
  height: 84px;
  border: 1px solid var(--openbot-success);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success-soft);
  content: "";
  animation: settings-mobile-connect-success-ring 600ms var(--openbot-ease-out) both;
}
.settings-mobile-connect-success-mark > svg {
  position: relative;
  width: 58px;
  height: 58px;
  padding: var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface-raised);
  filter: drop-shadow(0 6px 16px var(--openbot-shadow-popover-ambient));
  stroke-width: var(--openbot-icon-stroke);
  animation: settings-mobile-connect-success-pop 420ms var(--openbot-ease-out) both;
}
.settings-mobile-connect-success-mark > svg path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: settings-mobile-connect-check-draw 360ms var(--openbot-duration-fast) var(--openbot-ease-out) forwards;
}
.settings-mobile-connect-code-copy {
  max-width: 240px;
  display: grid;
  gap: var(--openbot-space-2);
}
.settings-mobile-connect-code-title {
  font-weight: var(--openbot-weight-semibold);
}
.settings-mobile-connect-expiry {
  color: var(--openbot-accent-text);
  font-variant-numeric: tabular-nums;
}
.settings-mobile-connect-success-title {
  color: var(--openbot-success);
}
.settings-mobile-connect-expired {
  min-height: 196px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  text-align: center;
}
.settings-mobile-connect-expired > svg {
  width: calc(var(--openbot-icon-lg) + var(--openbot-space-3));
  height: calc(var(--openbot-icon-lg) + var(--openbot-space-3));
  margin-bottom: var(--openbot-space-2);
}
.settings-mobile-devices {
  display: grid;
  gap: var(--openbot-space-3);
}
.settings-mobile-devices-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
}
.settings-mobile-devices-heading h3 {
  margin: 0;
  font-weight: var(--openbot-weight-medium);
}
.settings-mobile-devices-states {
  display: grid;
}
.settings-mobile-devices-state {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(-4px);
  transition: grid-template-rows var(--openbot-duration-overlay) var(--openbot-ease-out), opacity var(--openbot-duration-normal) ease-out, transform var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.settings-mobile-devices-state[data-expanded] {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: translateY(0);
}
.settings-mobile-devices-state-body {
  min-height: 0;
  overflow: hidden;
}
.settings-mobile-devices-empty {
  min-height: 88px;
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  padding: var(--openbot-space-4);
  color: var(--openbot-text-muted);
}
.settings-mobile-devices-empty > svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  flex: 0 0 auto;
}
.settings-mobile-devices-empty > div {
  display: grid;
  gap: var(--openbot-space-1);
}
.settings-mobile-devices-empty-title {
  color: var(--openbot-text-secondary);
  font-weight: var(--openbot-weight-medium);
}
.settings-mobile-devices-table-frame {
  overflow-x: auto;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
}
.settings-mobile-devices-table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.settings-mobile-devices-table th, .settings-mobile-devices-table td {
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border-bottom: 1px solid var(--openbot-border);
  text-align: left;
  white-space: nowrap;
}
.settings-mobile-devices-table th {
  color: var(--openbot-text-muted);
  font-weight: var(--openbot-weight-medium);
}
.settings-mobile-devices-table tbody tr:last-child td {
  border-bottom: 0;
}
.settings-mobile-device-name {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}
.settings-mobile-device-name svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  color: var(--openbot-text-muted);
}
.settings-mobile-devices-table td.settings-mobile-device-action {
  width: 1%;
  text-align: right;
}
@keyframes settings-mobile-connect-success-enter {
  from {
    opacity: 0;
  }
}
@keyframes settings-mobile-connect-success-ring {
  from {
    opacity: 0.8;
    transform: scale(0.72);
  }
  to {
    opacity: 0;
    transform: scale(1.35);
  }
}
@keyframes settings-mobile-connect-success-pop {
  from {
    opacity: 0;
    transform: scale(0.62) rotate(-8deg);
  }
  70% {
    transform: scale(1.08) rotate(1deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}
@keyframes settings-mobile-connect-check-draw {
  to {
    stroke-dashoffset: 0;
  }
}
@media (max-width: 720px) {
  .settings-mobile-connect-link-code {
    align-items: center;
    flex-direction: column;
    text-align: center;
  }
  .settings-mobile-connect-code-copy {
    max-width: 320px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .settings-mobile-connect-code-collapse, .settings-mobile-connect-qr-stage .ui-qr-code, .settings-mobile-devices-state {
    transition: none;
  }
  .settings-mobile-connect-success-mark, .settings-mobile-connect-success-mark::before, .settings-mobile-connect-success-mark > svg, .settings-mobile-connect-success-mark > svg path {
    animation: none;
  }
  .settings-mobile-connect-success-mark > svg path {
    stroke-dashoffset: 0;
  }
}
.settings-mobile-app-install {
  display: contents;
}
.settings-mobile-connect-step.ui-item-media {
  min-width: 24px;
  height: 24px;
  padding-inline: var(--openbot-space-1-5);
  display: inline-grid;
  flex: 0 0 auto;
  align-self: flex-start;
  place-items: center;
  margin-top: 1px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  font-weight: var(--openbot-weight-medium);
  line-height: 1;
}
.settings-mobile-connect-generate.ui-button {
  min-width: 160px;
}
.settings-mobile-connect-link {
  padding: var(--openbot-space-3) var(--openbot-space-4);
}
.settings-mobile-connect-link-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2) var(--openbot-space-4);
}
.settings-mobile-connect-link-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-2);
}
.settings-mobile-connect-link-reveal {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows var(--openbot-duration-overlay) var(--openbot-ease-out), opacity var(--openbot-duration-normal) ease-out;
}
.settings-mobile-connect-link-reveal[data-expanded] {
  grid-template-rows: 1fr;
  opacity: 1;
}
.settings-mobile-connect-link-code {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-6);
  padding-top: var(--openbot-space-4);
}
@media (prefers-reduced-motion: reduce) {
  .settings-mobile-connect-link-reveal {
    transition: none;
  }
}
.settings-mobile-app-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
}
.settings-mobile-app-tab > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
}
.settings-mobile-app-panels {
  position: relative;
  padding: var(--openbot-space-4);
}
.settings-mobile-app-panels::before {
  position: absolute;
  top: 0;
  right: var(--openbot-space-4);
  left: var(--openbot-space-4);
  height: 1px;
  background: var(--openbot-border);
  pointer-events: none;
  content: "";
}
.settings-mobile-app-panel {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-6);
}
.settings-mobile-app-qr {
  transform: scale(0.96);
  transition: transform var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.settings-mobile-app-panel[data-selected] .settings-mobile-app-qr {
  transform: scale(1);
}
.settings-mobile-app-qr .ui-qr-code-mark {
  gap: 3px;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity var(--openbot-duration-normal) ease-out, transform var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.settings-mobile-app-panel[data-selected] .settings-mobile-app-qr .ui-qr-code-mark {
  opacity: 1;
  transform: scale(1);
  transition-delay: var(--openbot-duration-fast);
}
.settings-mobile-app-qr-platform {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}
.settings-mobile-app-qr-link {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  color: var(--openbot-text-muted-on-light);
  stroke-width: 2.5;
  opacity: 0;
  transform: rotate(-45deg) scale(0.6);
  transition: opacity var(--openbot-duration-normal) ease-out, transform var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.settings-mobile-app-panel[data-selected] .settings-mobile-app-qr-link {
  opacity: 1;
  transform: rotate(0) scale(1);
  transition-delay: calc(var(--openbot-duration-fast) * 2);
}
.settings-mobile-app-qr-logo {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}
.settings-mobile-app-details {
  min-width: 0;
  display: grid;
  justify-items: start;
  gap: var(--openbot-space-2);
}
.settings-mobile-app-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--openbot-space-2);
}
.settings-mobile-app-title {
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-semibold);
}
.settings-mobile-app-steps {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-1-5);
  margin: var(--openbot-space-1) 0;
  padding-left: var(--openbot-space-4);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  list-style: decimal;
}
.settings-mobile-app-steps > li::marker {
  color: var(--openbot-text-dim);
  font-variant-numeric: tabular-nums;
}
.settings-mobile-app-copy > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.settings-mobile-device-platform {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.settings-mobile-device-platform > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
}
.settings-mobile-devices-list {
  display: grid;
  gap: var(--openbot-space-3);
}
.settings-mobile-devices-table tbody tr {
  transition: opacity var(--openbot-duration-overlay) var(--openbot-ease-out);
}
@starting-style {
  .settings-mobile-devices-table tbody tr {
    opacity: 0;
  }
}
@media (max-width: 720px) {
  .settings-mobile-app-panel {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media (prefers-reduced-motion: reduce) {
  .settings-mobile-app-qr, .settings-mobile-app-qr .ui-qr-code-mark, .settings-mobile-app-qr-link, .settings-mobile-devices-table tbody tr {
    transition: none;
  }
  .settings-mobile-app-qr, .settings-mobile-app-qr .ui-qr-code-mark, .settings-mobile-app-qr-link {
    transform: none;
  }
}
.hosted-sites-overview {
  display: grid;
  gap: var(--openbot-space-1);
}
.hosted-sites-list .hosted-sites-row {
  min-height: 72px;
  align-items: center;
}
.hosted-sites-list .ui-item-content {
  min-width: 0;
}
.hosted-sites-link.ui-button {
  width: min(100%, 320px);
  justify-content: flex-start;
  color: var(--openbot-accent-text);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-md);
  text-align: left;
}
.hosted-sites-link-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hosted-sites-actions {
  flex-wrap: nowrap;
  justify-content: flex-end;
}
@media (max-width: 700px) {
  .hosted-sites-list .hosted-sites-row {
    align-items: flex-start;
    flex-direction: column;
  }
  .hosted-sites-actions {
    width: 100%;
    justify-content: flex-start;
  }
  .hosted-sites-actions > .ui-button {
    flex: 1;
  }
}
.integration-logo-tile {
  --integration-tile: 36px;
  display: inline-grid;
  flex: none;
  width: var(--integration-tile);
  height: var(--integration-tile);
  place-items: center;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-primary);
}
.integration-logo-tile[data-size="lg"] {
  --integration-tile: 48px;
  border-radius: var(--openbot-radius-lg);
}
.integration-logo-tile > svg {
  width: 55%;
  height: 55%;
}
.integration-status {
  gap: var(--openbot-space-1);
}
.integration-status-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--openbot-radius-pill);
  background: currentColor;
}
.integration-status[data-status="unavailable"] .integration-status-dot {
  background: var(--openbot-transparent);
  box-shadow: inset 0 0 0 1px currentColor;
}
.integration-detail-header {
  display: flex;
  gap: var(--openbot-space-3);
  align-items: center;
}
.integration-detail-copy {
  display: grid;
  flex: 1;
  gap: var(--openbot-space-1);
  min-width: 0;
}
.integration-detail-title {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
}
.integration-detail-actions {
  display: flex;
  flex: none;
  gap: var(--openbot-space-2);
}
.integration-wizard {
  display: grid;
  gap: var(--openbot-space-4);
  padding: var(--openbot-space-6);
  border-radius: var(--openbot-radius-xl);
  background: var(--openbot-bg-sheet);
  box-shadow: var(--openbot-shadow-dialog);
}
.integration-wizard-head {
  display: grid;
  gap: var(--openbot-space-2);
  justify-items: center;
  text-align: center;
}
.integration-wizard-logos {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
  margin-bottom: var(--openbot-space-2);
}
.integration-wizard-app {
  width: 36px;
  height: 36px;
}
.integration-wizard-link {
  width: 40px;
  height: 2px;
  border-radius: var(--openbot-radius-pill);
  background: radial-gradient(circle, var(--openbot-accent) 0 1px, var(--openbot-transparent) 1.5px) 0 50% / 8px 2px repeat-x;
  animation: integration-wizard-flow 0.6s linear infinite;
}
@keyframes integration-wizard-flow {
  to {
    background-position-x: 8px;
  }
}
.integration-wizard-logos[data-link="connected"] .integration-wizard-link {
  background: var(--openbot-success);
  animation: none;
}
.integration-wizard-logos[data-link="broken"] .integration-wizard-link {
  background: radial-gradient(circle, var(--openbot-border-strong) 0 1px, var(--openbot-transparent) 1.5px) 0 50% / 8px 2px repeat-x;
  animation: none;
}
.integration-wizard-target {
  display: inline-grid;
  border-radius: var(--openbot-radius-md);
}
.integration-wizard-logos[data-link="connecting"] .integration-wizard-target {
  animation: integration-wizard-pulse 1.8s var(--openbot-ease-out) infinite;
}
.integration-wizard-logos[data-link="connected"] .integration-wizard-target {
  box-shadow: 0 0 0 3px var(--openbot-success);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--openbot-success) 30%, var(--openbot-transparent));
  }
}
@keyframes integration-wizard-pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--openbot-accent) 45%, var(--openbot-transparent));
  }
  100% {
    box-shadow: 0 0 0 8px var(--openbot-transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .integration-wizard-link, .integration-wizard-logos[data-link="connecting"] .integration-wizard-target {
    animation: none;
  }
}
.integration-wizard-body {
  display: grid;
  gap: var(--openbot-space-3);
}
.integration-wizard-foot {
  display: flex;
  gap: var(--openbot-space-2);
  justify-content: flex-end;
}
.integration-wizard-foot .ui-button > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.integration-dialog-backdrop {
  z-index: calc(var(--openbot-layer-dialog) + 1);
}
.integration-wizard-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: calc(var(--openbot-layer-dialog) + 1);
  width: min(440px, calc(100vw - var(--openbot-space-6) * 2));
  max-height: calc(100dvh - var(--openbot-space-6) * 2);
  overflow-y: auto;
  outline: 0;
  transform: translate(-50%, -50%);
}
.integration-wizard-dialog h2 {
  margin: 0;
}
.integration-dialog-close {
  position: absolute;
  top: var(--openbot-space-3);
  right: var(--openbot-space-3);
}
.integration-stepper {
  display: flex;
  align-items: center;
  margin: 0 0 var(--openbot-space-2);
  padding: 0;
  list-style: none;
}
.integration-step {
  display: flex;
  align-items: center;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.integration-step + .integration-step::before {
  display: block;
  width: 24px;
  height: 2px;
  margin-inline: var(--openbot-space-1);
  border-radius: var(--openbot-radius-pill);
  background: linear-gradient(to right, var(--openbot-success), var(--openbot-accent)) no-repeat, var(--openbot-border-strong);
  background-size: 0% 100%, auto;
  content: "";
}
.integration-step + .integration-step[data-state="current"]::before {
  background-size: 100% 100%, auto;
  animation: integration-step-fill 0.4s var(--openbot-ease-out);
}
.integration-step + .integration-step[data-state="done"]::before {
  background: linear-gradient(var(--openbot-success), var(--openbot-success)) no-repeat, var(--openbot-border-strong);
  background-size: 100% 100%, auto;
  animation: integration-step-fill 0.4s var(--openbot-ease-out);
}
@keyframes integration-step-fill {
  from {
    background-size: 0% 100%, auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .integration-step + .integration-step[data-state="current"]::before, .integration-step + .integration-step[data-state="done"]::before {
    animation: none;
  }
}
.integration-step-index {
  display: inline-grid;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  font-weight: var(--openbot-weight-medium);
  line-height: 1;
}
.integration-step[data-state="current"] {
  color: var(--openbot-text-primary);
}
.integration-step[data-state="current"] .integration-step-index {
  border-color: var(--openbot-accent);
  background: var(--openbot-accent);
  color: var(--openbot-text-on-accent);
}
.integration-step[data-state="done"] .integration-step-index {
  border-color: var(--openbot-success);
  color: var(--openbot-success);
}
.integrations-hub {
  display: grid;
  gap: var(--openbot-space-6);
}
.integrations-hub-row {
  position: relative;
  border-radius: var(--openbot-radius-md);
  transition: background-color var(--openbot-duration-hover) var(--openbot-ease-out);
}
.integrations-hub-row:has(> .integrations-hub-hitarea:hover) {
  background: var(--openbot-hover);
}
.integrations-hub-hitarea {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: var(--openbot-transparent);
  cursor: pointer;
  transition: none;
}
.integrations-hub-hitarea:hover:not(:disabled):not([data-disabled]) {
  background: var(--openbot-transparent);
}
.integrations-hub-hitarea:focus-visible {
  outline: 2px solid var(--openbot-accent-strong);
  outline-offset: -2px;
}
.integrations-hub-actions {
  gap: var(--openbot-space-3);
}
.integrations-hub-actions .ui-button {
  position: relative;
  z-index: 2;
}
.integrations-hub-chevron {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  margin: 0 var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
}
.integrations-hub-title {
  display: inline-flex;
  gap: var(--openbot-space-2);
  align-items: center;
}
.integrations-hub-summary[data-status="attention"] {
  color: var(--openbot-warning-text);
}
.integrations-face-stack {
  display: inline-flex;
  gap: var(--openbot-space-0-5);
  align-items: center;
}
.integrations-face-more {
  display: inline-grid;
  min-width: 24px;
  height: 24px;
  padding: 0 var(--openbot-space-1);
  place-items: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.integrations-agent-face {
  display: inline-block;
  flex: none;
  width: 32px;
  height: 32px;
}
.integrations-agent-face[data-size="sm"] {
  width: 24px;
  height: 24px;
}
.integrations-agent-face > * {
  width: 100%;
  height: 100%;
}
.github-connector {
  display: grid;
  gap: var(--openbot-space-6);
}
.github-connector-avatar {
  display: inline-grid;
  flex: none;
  width: 32px;
  height: 32px;
  place-items: center;
  overflow: hidden;
  border-radius: var(--openbot-radius-pill);
  background: linear-gradient(135deg, var(--openbot-accent-strong), var(--openbot-onboarding-desktop-indigo));
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
}
.github-connector-avatar > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.github-connector-line {
  padding: var(--openbot-space-3) var(--openbot-space-4);
}
.github-connector-line[data-tone="danger"] {
  color: var(--openbot-danger-text);
}
.github-connector-search {
  position: relative;
  display: flex;
  align-items: center;
  padding: var(--openbot-space-3) var(--openbot-space-4) var(--openbot-space-2);
}
.github-connector-search > svg {
  position: absolute;
  left: calc(var(--openbot-space-4) + var(--openbot-space-3));
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
  pointer-events: none;
}
.github-connector-search input {
  width: 100%;
  padding-left: calc(var(--openbot-space-3) * 2 + var(--openbot-icon-sm));
}
.github-connector-repository-list {
  display: grid;
  max-height: 260px;
  margin: 0;
  padding: 0 var(--openbot-space-2) var(--openbot-space-2);
  overflow-y: auto;
  list-style: none;
}
.github-connector-repository {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
  justify-content: space-between;
  min-height: 36px;
  padding: 0 var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
  transition: background-color var(--openbot-duration-fast) var(--openbot-ease-out);
}
.github-connector-repository:hover {
  background: var(--openbot-hover);
}
.github-connector-repository-name {
  min-width: 0;
}
.github-connector-repository-owner {
  color: var(--openbot-text-muted);
}
.github-connector-private {
  flex: none;
  gap: var(--openbot-space-1);
}
.github-connector-center {
  display: grid;
  min-height: 96px;
  place-items: center;
}
.github-connector-code {
  display: flex;
  gap: var(--openbot-space-1-5);
  justify-content: center;
}
.github-connector-code-char {
  display: inline-grid;
  width: 36px;
  height: 48px;
  place-items: center;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-xl);
  font-weight: var(--openbot-weight-semibold);
}
.github-connector-code-char[data-separator="true"] {
  width: 12px;
  border-color: var(--openbot-transparent);
  background: var(--openbot-transparent);
  color: var(--openbot-text-muted);
}
.github-connector-waiting {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
  justify-content: center;
}
.github-connector-done {
  display: flex;
  gap: var(--openbot-space-3);
  align-items: center;
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-success-wash);
}
.github-connector-done > div {
  display: grid;
  flex: 1;
}
.github-connector-effects {
  display: grid;
  margin: 0;
  padding: var(--openbot-space-1);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  list-style: none;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.github-connector-effects li {
  display: flex;
  gap: var(--openbot-space-3);
  align-items: center;
  padding: var(--openbot-space-2);
}
.github-connector-effects li + li {
  border-top: 1px solid var(--openbot-border);
}
.github-connector-effect-icon {
  display: inline-grid;
  flex: none;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-muted);
}
.github-connector-effect-icon > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.github-connector-effects li[data-tone="danger"] .github-connector-effect-icon {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger-text);
}
.github-connector-effects li[data-tone="success"] .github-connector-effect-icon {
  background: var(--openbot-success-soft);
  color: var(--openbot-success);
}
.github-connector-confirm.ui-button-variant-destructive {
  color: var(--openbot-danger-text);
}
.onepassword-connector {
  display: grid;
  gap: var(--openbot-space-6);
}
.onepassword-connector-link {
  justify-self: start;
  padding-inline: 0;
}
.onepassword-connector-token {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
}
.onepassword-connector-token > :first-child {
  flex: 1;
}
.onepassword-connector-step .ui-item-description {
  white-space: normal;
}
.onepassword-connector-step .ui-item-media {
  color: var(--openbot-text-muted);
}
.onepassword-connector-step[data-step="done"] .ui-item-media {
  color: var(--openbot-success);
}
.onepassword-connector-step[data-step="waiting"] .ui-item-title {
  color: var(--openbot-text-muted);
}
.slack-integration {
  display: grid;
  gap: var(--openbot-space-6);
}
.slack-integration-note {
  margin-top: var(--openbot-space-2);
}
.slack-integration-stack {
  display: grid;
  gap: var(--openbot-space-0-5);
  justify-items: start;
}
.slack-effects {
  display: grid;
  margin: 0;
  padding: var(--openbot-space-1);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  list-style: none;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.slack-effects li {
  display: flex;
  gap: var(--openbot-space-3);
  align-items: center;
  padding: var(--openbot-space-2);
}
.slack-effects li + li {
  border-top: 1px solid var(--openbot-border);
}
.slack-effect-icon {
  display: inline-grid;
  flex: none;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-muted);
}
.slack-effect-icon > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.slack-effects li[data-tone="danger"] .slack-effect-icon {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger-text);
}
.slack-effects li[data-tone="success"] .slack-effect-icon {
  background: var(--openbot-success-soft);
  color: var(--openbot-success);
}
.slack-checklist {
  display: grid;
  gap: var(--openbot-space-2);
  margin: 0;
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  list-style: none;
  font-size: var(--openbot-text-sm);
}
.slack-checklist li {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
}
.slack-checklist li[data-state="done"] {
  color: var(--openbot-text-secondary);
}
.slack-checklist li[data-state="done"] svg {
  color: var(--openbot-success);
}
.slack-checklist-dot {
  width: 14px;
  height: 14px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
}
.slack-waiting {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
  justify-content: center;
}
.slack-orchestrator-card {
  display: flex;
  gap: var(--openbot-space-3);
  align-items: center;
  padding: var(--openbot-space-3);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
}
.slack-orchestrator-model {
  display: grid;
  gap: var(--openbot-space-1);
}
.slack-roles {
  display: grid;
  max-height: 40vh;
  margin: 0;
  padding: var(--openbot-space-1);
  overflow-y: auto;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  list-style: none;
}
.slack-role-row {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
  padding: var(--openbot-space-1) var(--openbot-space-2);
  border-radius: var(--openbot-radius-sm);
  cursor: pointer;
}
.slack-role-row:hover {
  background: var(--openbot-bg-control-hover);
}
.slack-role-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hosted-servers-add {
  display: flex;
}
.hosted-servers-loading {
  display: grid;
  place-items: center;
  padding: var(--openbot-space-8);
  animation: hosted-servers-loading-in var(--openbot-duration-normal) var(--openbot-ease-out) var(--openbot-loading-indicator-delay) both;
}
@keyframes hosted-servers-loading-in {
  from {
    opacity: 0;
  }
}
.hosted-servers-list .hosted-servers-row {
  min-height: 64px;
  align-items: center;
}
.hosted-servers-list .ui-item-content {
  min-width: 0;
}
.hosted-servers-list .ui-item-title {
  gap: var(--openbot-space-2);
}
.hosted-servers-actions {
  flex-wrap: nowrap;
  justify-content: flex-end;
}
@media (max-width: 700px) {
  .hosted-servers-list .hosted-servers-row {
    align-items: flex-start;
    flex-direction: column;
  }
  .hosted-servers-actions {
    width: 100%;
    justify-content: flex-start;
  }
}
.profile-panel {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-6);
}
.profile-hero {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
}
.profile-hero-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(var(--openbot-space-8) * 1.75);
  aspect-ratio: 1;
  border-radius: var(--openbot-radius-pill);
  overflow: hidden;
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-hover);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
}
.profile-hero-avatar > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  outline: 1px solid var(--openbot-image-outline);
  outline-offset: -1px;
  border-radius: inherit;
}
.profile-hero-text {
  min-width: 0;
}
.profile-hero-text h3 {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--openbot-text-xl);
  font-weight: var(--openbot-weight-semibold);
  color: var(--openbot-text-primary);
}
.profile-hero-text p {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--openbot-text-sm);
  color: var(--openbot-text-secondary);
}
.profile-hero-actions {
  display: flex;
  flex: none;
  gap: var(--openbot-space-2);
  margin-inline-start: auto;
}
.profile-card {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-3);
  margin: 0;
  padding: var(--openbot-space-4);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
}
.profile-card.profile-facts, .profile-card.profile-ranking, .profile-card.profile-bars {
  row-gap: 0;
  padding: var(--openbot-space-1) var(--openbot-space-4);
}
.profile-activity-placeholder {
  align-items: flex-start;
}
.profile-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--openbot-space-4);
  align-items: start;
}
.profile-columns > .ui-settings-section {
  height: 100%;
  grid-template-rows: auto 1fr;
}
.profile-facts {
  display: flex;
  flex-direction: column;
  margin: 0;
}
.profile-facts > div, .profile-ranking li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  min-height: calc(var(--openbot-space-8) + var(--openbot-space-3));
  border-top: 1px solid var(--openbot-border);
  font-size: var(--openbot-text-sm);
}
.profile-facts > div:first-child, .profile-ranking li:first-child {
  border-top: 0;
}
.profile-facts dt {
  flex: none;
  color: var(--openbot-text-secondary);
  transition: color var(--openbot-duration-normal) var(--openbot-ease-out);
}
.profile-facts dd {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  min-width: 0;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}
.profile-ranking {
  list-style: none;
}
.profile-ranking li {
  justify-content: flex-start;
  color: var(--openbot-text-primary);
  transition: opacity var(--openbot-duration-normal) var(--openbot-ease-out);
}
.profile-ranking-avatar {
  width: var(--openbot-space-6);
  height: var(--openbot-space-6);
  flex: none;
}
.profile-ranking-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-ranking strong, .profile-bar-value {
  font-variant-numeric: tabular-nums;
  font-weight: var(--openbot-weight-medium);
}
.profile-bars {
  display: grid;
  grid-template-columns: fit-content(45%) 1fr auto;
  column-gap: var(--openbot-space-4);
  margin: 0;
  list-style: none;
}
.profile-bars li {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  min-height: calc(var(--openbot-space-8) + var(--openbot-space-1));
  font-size: var(--openbot-text-sm);
  color: var(--openbot-text-primary);
  transition: opacity var(--openbot-duration-normal) var(--openbot-ease-out);
}
.profile-bar-label {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  min-width: 0;
  white-space: nowrap;
}
.profile-bar-name {
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-bar-track {
  height: var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-primary) 7%, var(--openbot-transparent));
  }
  overflow: hidden;
}
.profile-bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
}
.profile-bar-value {
  text-align: end;
  color: var(--openbot-text-secondary);
}
.profile-heatmap {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1-5);
  min-width: 0;
}
.profile-heatmap-months, .profile-heatmap-grid {
  display: grid;
  grid-template-columns: repeat(var(--profile-columns), minmax(0, 1fr));
  column-gap: var(--openbot-space-0-5);
}
.profile-heatmap-months {
  font-size: var(--openbot-text-sm);
  color: var(--openbot-text-muted);
}
.profile-heatmap-months span {
  white-space: nowrap;
}
.profile-heatmap-grid {
  grid-template-rows: repeat(7, auto);
  grid-auto-flow: column;
  row-gap: var(--openbot-space-0-5);
}
.profile-heat-cell {
  display: block;
  aspect-ratio: 1;
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-primary) 7%, var(--openbot-transparent));
  }
}
.profile-heat-cell[data-empty] {
  background: var(--openbot-transparent);
}
.profile-heat-cell[data-level="1"] {
  background: var(--openbot-accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-accent) 32%, var(--openbot-transparent));
  }
}
.profile-heat-cell[data-level="2"] {
  background: var(--openbot-accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-accent) 55%, var(--openbot-transparent));
  }
}
.profile-heat-cell[data-level="3"] {
  background: var(--openbot-accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-accent) 78%, var(--openbot-transparent));
  }
}
.profile-heat-cell[data-level="4"] {
  background: var(--openbot-accent);
}
.profile-heatmap-grid .profile-heat-cell[data-active] {
  outline: 1px solid var(--openbot-text-primary);
  outline-offset: 1px;
}
.profile-heat-tooltip {
  position: fixed;
  z-index: var(--openbot-layer-toast);
  transform: translate(-50%, calc(-100% - var(--openbot-space-2)));
  pointer-events: none;
  white-space: nowrap;
  box-shadow: var(--openbot-shadow-raised);
}
.profile-heatmap-legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--openbot-space-1);
  font-size: var(--openbot-text-sm);
  color: var(--openbot-text-muted);
}
.profile-heatmap-legend .profile-heat-cell {
  width: var(--openbot-space-3);
}
.profile-dialog {
  width: min(880px, 100%);
  max-height: calc(100dvh - 2 * var(--openbot-space-6));
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
  overflow: auto;
  padding: var(--openbot-space-6);
  outline: 0;
  border-radius: var(--openbot-radius-xl);
  border: 1px solid var(--openbot-dialog-ring);
  background: var(--openbot-bg-sidebar);
  color: var(--openbot-text-primary);
}
.profile-dialog-header, .profile-dialog-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.profile-dialog-footer {
  justify-content: flex-end;
}
.profile-dialog-title {
  margin: 0;
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
}
.profile-share-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--openbot-radius-card);
  box-shadow: var(--openbot-shadow-card);
}
.profile-share-placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: 1200 / 690;
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-surface);
}
.profile-edit {
  width: min(440px, 100%);
}
.profile-edit-form {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
}
.profile-edit-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-2);
}
.profile-edit-photo .profile-edit-photo-trigger {
  width: calc(var(--openbot-space-8) * 2.5);
  height: calc(var(--openbot-space-8) * 2.5);
  overflow: visible;
}
.profile-edit-photo .profile-edit-avatar {
  font-size: var(--openbot-text-xl);
}
.profile-edit-photo-badge {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  display: grid;
  place-items: center;
  width: var(--openbot-space-6);
  height: var(--openbot-space-6);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-secondary);
}
.profile-edit-photo-badge > svg {
  width: var(--openbot-space-3);
  height: var(--openbot-space-3);
}
.profile-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: var(--openbot-space-2);
  margin: 0;
}
.profile-tile {
  --profile-step: calc(var(--openbot-duration-fast) / 3);
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-3);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  transition: background-color var(--openbot-duration-normal) var(--openbot-ease-out);
}
.profile-tile dt {
  font-size: var(--openbot-text-sm);
  color: var(--openbot-text-secondary);
}
.profile-tile dd {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-0-5);
  margin: 0;
}
.profile-tile strong {
  font-size: var(--openbot-text-2xl);
  font-weight: var(--openbot-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--openbot-text-primary);
}
.profile-tile dd > span {
  font-size: var(--openbot-text-sm);
  color: var(--openbot-text-muted);
}
.profile-tile:hover {
  background: linear-gradient(var(--openbot-hover), var(--openbot-hover)), var(--openbot-bg-surface);
}
.profile-tile-value {
  white-space: pre;
}
.profile-tile .profile-tile-value.is-animating .t-digit {
  animation-delay: calc( var(--profile-i, 0) * var(--profile-step) * 1.5 + var(--profile-c, 0) * var(--profile-step) / 2 );
}
.profile-facts > div:hover dt {
  color: var(--openbot-text-primary);
}
.profile-ranking:hover li:not(:hover), .profile-bars:hover li:not(:hover) {
  opacity: 0.45;
}
.profile-bars li:hover .profile-bar-value {
  color: var(--openbot-text-primary);
}
@media (prefers-reduced-motion: no-preference) {
  .profile-panel {
    --profile-step: calc(var(--openbot-duration-fast) / 3);
  }
  .profile-panel > * {
    animation: profile-rise var(--openbot-duration-toast-enter) var(--openbot-ease-out) backwards;
  }
  .profile-panel > :nth-child(2) {
    animation-delay: var(--profile-step);
  }
  .profile-panel > :nth-child(3) {
    animation-delay: calc(var(--profile-step) * 2);
  }
  .profile-panel > :nth-child(4) {
    animation-delay: calc(var(--profile-step) * 3);
  }
  .profile-panel > :nth-child(n + 5) {
    animation-delay: calc(var(--profile-step) * 4);
  }
  .profile-hero-avatar {
    animation: profile-pop var(--openbot-duration-toast-enter) var(--openbot-ease-out) backwards;
  }
  .profile-tile {
    transition: background-color var(--openbot-duration-normal) var(--openbot-ease-out), transform var(--openbot-duration-normal) var(--openbot-ease-out);
  }
  .profile-tile:hover {
    transform: translateY(calc(var(--openbot-space-0-5) * -1));
  }
  .profile-heatmap-grid .profile-heat-cell {
    animation: profile-cell-in var(--openbot-duration-overlay) var(--openbot-ease-out) backwards;
    animation-delay: calc(var(--profile-col, 0) * var(--openbot-duration-fast) / 15);
    transition: transform var(--openbot-duration-fast) var(--openbot-ease-out);
  }
  .profile-heatmap-grid .profile-heat-cell[data-active] {
    position: relative;
    z-index: 1;
    transform: scale(1.35);
  }
  .profile-heat-tooltip {
    animation: profile-tip-in var(--openbot-duration-normal) var(--openbot-ease-out) backwards;
    transition: left var(--openbot-duration-fast) var(--openbot-ease-out), top var(--openbot-duration-fast) var(--openbot-ease-out);
  }
  .profile-ranking li {
    animation: profile-slide-in var(--openbot-duration-toast-enter) var(--openbot-ease-out) backwards;
    animation-delay: calc(var(--openbot-duration-slow) + var(--profile-i, 0) * var(--profile-step));
  }
  .profile-ranking-avatar {
    transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
  }
  .profile-ranking li:hover .profile-ranking-avatar {
    transform: scale(1.12) rotate(-6deg);
  }
  .profile-bar-fill {
    transform-origin: left center;
    animation: profile-grow calc(var(--openbot-duration-overlay) * 2.5) var(--openbot-ease-out) backwards;
    animation-delay: calc(var(--openbot-duration-overlay) + var(--profile-i, 0) * var(--profile-step) * 2);
  }
  .profile-hero-actions svg {
    transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
  }
  .profile-hero-actions button:hover .profile-icon-share {
    transform: translateY(calc(var(--openbot-space-0-5) * -1));
  }
  .profile-hero-actions button:hover .profile-icon-edit {
    transform: rotate(-14deg);
  }
}
@keyframes profile-rise {
  from {
    opacity: 0;
    transform: translateY(var(--openbot-space-2));
  }
}
@keyframes profile-pop {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
}
@keyframes profile-cell-in {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
}
@keyframes profile-tip-in {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-100% - var(--openbot-space-1)));
  }
}
@keyframes profile-slide-in {
  from {
    opacity: 0;
    transform: translateX(calc(var(--openbot-space-2) * -1));
  }
}
@keyframes profile-grow {
  from {
    transform: scaleX(0);
  }
}
.computer-use-settings {
  display: grid;
  gap: var(--openbot-space-6);
}
.computer-use-card:is(.ui-item-group) {
  overflow: hidden;
}
.computer-use-permission-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-accent-soft);
}
.computer-use-permission-icon svg {
  width: 16px;
  height: 16px;
  color: var(--openbot-accent-text);
}
.computer-use-alert {
  margin-top: var(--openbot-space-3);
}
.computer-use-settings > .computer-use-alert:first-child, .computer-use-compact > .computer-use-alert:first-child {
  margin-top: 0;
}
.computer-use-loading .computer-use-row {
  min-height: 60px;
}
.computer-use-skeleton-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--openbot-radius-md);
}
.computer-use-skeleton-title {
  width: 128px;
  height: 12px;
}
.computer-use-skeleton-description {
  width: min(220px, 70%);
  height: 10px;
  margin-top: var(--openbot-space-2);
}
.computer-use-compact {
  width: min(100%, 520px);
  margin-top: var(--openbot-space-4);
  text-align: left;
}
.computer-use-compact-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  margin: 0 var(--openbot-space-1) var(--openbot-space-2);
}
.computer-use-compact-header h2 {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
}
.computer-use-compact-header p {
  margin: var(--openbot-space-0-5) 0 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.computer-use-compact-header > .ui-button {
  flex: 0 0 auto;
}
.computer-use-compact .computer-use-card {
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
}
.computer-use-compact .computer-use-row {
  min-height: 58px;
  padding: var(--openbot-space-2) var(--openbot-space-3);
}
.computer-use-compact .computer-use-row + .computer-use-row {
  border-top: 1px solid var(--openbot-border);
}
.computer-use-compact .ui-item-title {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.computer-use-compact .ui-item-description {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
@media (max-width: 640px) {
  .computer-use-row.ui-item {
    align-items: flex-start;
  }
  .computer-use-row .ui-item-actions {
    width: auto;
    padding-top: var(--openbot-space-1);
  }
}
.computer-use-recheck {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--openbot-space-2);
}
.computer-use-recheck .ui-button > svg, .computer-use-compact-header .ui-button > svg, .computer-use-alert .ui-button > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.computer-use-window-highlight {
  position: absolute;
  inset: 0;
  border-radius: var(--computer-use-window-radius);
  box-shadow: inset 0 0 0 2px var(--openbot-accent), inset 0 0 44px -4px var(--openbot-accent-strong), inset 0 0 120px -8px var(--openbot-accent-soft);
  pointer-events: none;
}
html:has(.computer-use-highlight-surface), body:has(.computer-use-highlight-surface), #root:has(.computer-use-highlight-surface) {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
}
.computer-use-highlight-surface {
  position: relative;
  width: 100%;
  height: 100%;
  background: transparent;
  pointer-events: none;
}
.computer-use-highlight-surface-frame {
  position: absolute;
  pointer-events: none;
}
.computer-use-agent-cursor {
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 24px;
  overflow: visible;
  fill: var(--openbot-accent);
  stroke: var(--openbot-text-on-accent);
  stroke-width: 5;
  paint-order: stroke fill;
  filter: drop-shadow(0 0 6px var(--openbot-accent-strong));
  pointer-events: none;
}
.computer-use-grant:is(.ui-button) {
  border-color: transparent;
  background: var(--openbot-accent);
  color: var(--openbot-text-on-accent);
}
@media (hover: hover) and (pointer: fine) and (min-width: 601px) {
  .computer-use-grant:is(.ui-button):hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-accent-hover);
  }
}
.computer-use-help {
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
  padding: 44px var(--openbot-space-4) var(--openbot-space-4);
  background: var(--openbot-bg-canvas);
  text-align: left;
}
.computer-use-help-header {
  display: flex;
  align-items: flex-start;
  gap: var(--openbot-space-3);
}
.computer-use-help-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-accent-soft);
}
.computer-use-help-icon svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  color: var(--openbot-accent-text);
  stroke-width: var(--openbot-icon-stroke);
}
.computer-use-help h1 {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
}
.computer-use-help-header p {
  margin: var(--openbot-space-0-5) 0 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.computer-use-help-steps {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
  margin: 0;
  padding-left: var(--openbot-space-4);
  list-style: decimal;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.computer-use-help-status {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.computer-use-help-status svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  color: var(--openbot-success);
  stroke-width: var(--openbot-icon-stroke);
}
.computer-use-help-status.is-error {
  color: var(--openbot-danger);
}
.computer-use-drag-card {
  position: relative;
  width: 210px;
  min-height: 94px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--openbot-space-1);
  align-self: center;
  box-sizing: border-box;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-primary);
  cursor: grab;
  -webkit-app-region: no-drag;
}
.computer-use-drag-card:hover {
  border-color: var(--openbot-accent-strong);
  background: var(--openbot-bg-control-hover);
}
.computer-use-drag-card:active, .computer-use-drag-card.is-dragging {
  cursor: grabbing;
}
.computer-use-drag-handle {
  position: absolute;
  top: var(--openbot-space-2);
  right: var(--openbot-space-2);
  color: var(--openbot-text-dim);
}
.computer-use-drag-handle svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.computer-use-drag-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
}
.computer-use-drag-icon img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}
.computer-use-drag-icon svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  color: var(--openbot-text-secondary);
}
.computer-use-drag-card strong {
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.computer-use-drag-card > span:last-child {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.computer-use-help-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
}
.server-settings-modal-shell .settings-modal-main {
  background: var(--openbot-bg-canvas);
}
.server-settings-modal-shell .settings-modal-scroll-frame::before {
  background: linear-gradient( to bottom, var(--openbot-bg-canvas) 0%, var(--openbot-bg-canvas) 28%, var(--openbot-bg-canvas-clear) 100% );
}
.server-settings-modal-shell .settings-modal-scroll-frame::after {
  background: linear-gradient( to top, var(--openbot-bg-canvas) 0%, var(--openbot-bg-canvas) 28%, var(--openbot-bg-canvas-clear) 100% );
}
.server-settings-panel {
  width: 100%;
  gap: var(--openbot-space-6);
  animation: none;
}
.server-settings-logo {
  width: 40px;
  height: 40px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: var(--openbot-tracking-wide);
}
.server-settings-logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  outline: 1px solid var(--openbot-image-outline);
  outline-offset: -1px;
}
.server-settings-logo-trigger {
  border-radius: var(--openbot-radius-md);
  color: var(--openbot-text-muted);
}
.server-settings-logo-trigger .server-settings-logo {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
  pointer-events: none;
}
.server-settings-logo-placeholder {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.server-settings-item-error {
  color: var(--openbot-danger);
}
.server-settings-readonly-name.ui-item {
  min-height: 72px;
}
.server-settings-publish-setting.ui-switch-field, .server-settings-mute-setting.ui-switch-field {
  min-height: 64px;
  padding: var(--openbot-space-3) var(--openbot-space-4);
  width: 100%;
  justify-content: space-between;
  gap: var(--openbot-space-6);
}
.server-settings-readonly-value {
  min-width: 180px;
  max-width: 300px;
  overflow-wrap: anywhere;
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
  text-align: right;
  user-select: text;
}
.server-settings-address-control.ui-button {
  width: 320px;
  height: var(--openbot-control-md);
  min-width: 0;
  flex-direction: row-reverse;
  justify-content: space-between;
  overflow: visible;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
  padding-inline: var(--openbot-space-3) var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  box-shadow: inset 0 0 0 1px var(--openbot-border);
}
.server-settings-address-control > span {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  font-family: var(--openbot-font-mono);
  font-weight: var(--openbot-weight-regular);
  text-align: left;
  text-overflow: ellipsis;
}
.server-settings-address-control > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.server-settings-private-badge {
  padding: var(--openbot-space-0-5) var(--openbot-space-1-5);
}
.server-settings-address-control[data-copied] {
  color: var(--openbot-success);
}
.server-settings-error-toast {
  position: absolute;
  right: var(--openbot-space-6);
  bottom: var(--openbot-space-6);
  left: var(--openbot-space-6);
  z-index: 3;
  box-shadow: 0 12px 32px var(--openbot-shadow-dialog);
}
.server-settings-error-toast[data-with-save-bar] {
  bottom: calc(60px + var(--openbot-space-3));
}
.server-settings-members-alert {
  border: 0;
  background: var(--openbot-bg-control);
}
.server-settings-members-title {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.server-settings-search {
  position: relative;
  width: 188px;
  flex: 0 0 auto;
}
.server-settings-search > svg {
  position: absolute;
  top: 50%;
  left: var(--openbot-space-3);
  z-index: 1;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
  pointer-events: none;
  transform: translateY(-50%);
}
.server-settings-search .ui-input {
  padding-left: var(--openbot-space-8);
}
.server-settings-invite-card.ui-card {
  border: 0;
  background: var(--openbot-bg-surface);
  padding: var(--openbot-space-4);
  box-shadow: none;
}
.server-settings-invite-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px auto;
  align-items: start;
  gap: var(--openbot-space-2);
}
.server-settings-invite-composer .ui-sliding-tabs-content-slot {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
}
.server-settings-invite-composer .ui-sliding-tabs-content:not([data-selected]) {
  position: absolute;
  inset: 0;
}
.server-settings-invite-mode-panel, .server-settings-invite-email-field, .server-settings-invite-email-field .ui-input {
  min-width: 0;
  width: 100%;
}
.server-settings-invite-email-field {
  position: relative;
  width: 22rem;
  max-width: 100%;
}
.server-settings-invite-email-field > .ui-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.server-settings-invite-link-input.ui-input {
  font-family: var(--openbot-font-mono);
  cursor: text;
}
.server-settings-invite-link-input.ui-input::placeholder {
  font-family: var(--openbot-font-sans);
}
.server-settings-invite-copy > span {
  min-width: 9ch;
  text-align: center;
}
.server-settings-invite-copy > svg, .server-settings-invite-new-link > svg, .server-settings-routine-feed-row .ui-button > svg, .server-settings-routine-feed-actions .ui-button > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.server-settings-invite-hint {
  display: block;
  margin-top: var(--openbot-space-2);
}
.server-settings-role-select {
  width: 100%;
}
.server-settings-invite-result {
  border: 0;
  background: var(--openbot-bg-surface-raised);
  margin-top: var(--openbot-space-3);
}
.server-settings-member-row[data-disabled] {
  background: var(--openbot-bg-control);
}
.server-settings-member-meta {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.server-settings-member-actions {
  min-width: 92px;
}
.server-settings-member-menu-trigger {
  position: relative;
}
.server-settings-member-menu-trigger::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  content: "";
  transform: translate(-50%, -50%);
}
.server-settings-member-menu-trigger svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.server-settings-empty-row .ui-item-content {
  text-align: center;
}
.server-settings-desktop-icon {
  width: 40px;
  height: 40px;
  justify-content: center;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-secondary);
}
.server-settings-desktop-icon svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
}
.server-settings-desktop-description {
  max-width: 360px;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
.server-settings-desktop-meta {
  max-width: 260px;
  display: grid;
  justify-items: end;
  gap: var(--openbot-space-1);
  text-align: right;
}
.server-settings-desktop-hint {
  max-width: 220px;
  text-align: right;
}
.server-settings-desktop-status {
  margin-top: var(--openbot-space-1);
}
@media (max-width: 720px) {
  .server-settings-address-setting, .server-settings-readonly-name {
    align-items: flex-start;
    flex-direction: column;
  }
  .server-settings-address-control, .server-settings-readonly-name .ui-item-actions {
    width: 100%;
    max-width: none;
    justify-content: space-between;
  }
  .server-settings-readonly-value {
    min-width: 0;
    max-width: none;
    text-align: left;
  }
  .server-settings-address-control {
    width: 100%;
  }
  .server-settings-error-toast {
    right: var(--openbot-space-4);
    left: var(--openbot-space-4);
  }
  .server-settings-invite-composer {
    grid-template-columns: minmax(0, 1fr) 118px;
  }
  .server-settings-invite-email-field {
    max-width: none;
  }
  .server-settings-invite-composer > .ui-button, .server-settings-invite-share {
    grid-column: 1 / -1;
  }
  .server-settings-desktop-card .ui-item {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .server-settings-desktop-meta, .server-settings-desktop-hint {
    max-width: none;
    margin-left: 52px;
    justify-items: start;
    text-align: left;
  }
}
@media (max-width: 520px) {
  :is(.server-settings-invite-section, .server-settings-members-section) .ui-settings-section-header {
    align-items: stretch;
    flex-direction: column;
  }
  .server-settings-invite-section .ui-settings-section-actions, .server-settings-members-section .ui-settings-section-actions, .server-settings-search {
    width: 100%;
  }
  .server-settings-member-row {
    flex-wrap: wrap;
  }
  .server-settings-member-actions {
    width: 100%;
    min-width: 0;
    justify-content: flex-end;
  }
  .server-settings-invite-composer {
    grid-template-columns: minmax(0, 1fr);
  }
  .server-settings-role-select, .server-settings-invite-composer > .ui-button, .server-settings-invite-share {
    width: 100%;
    grid-column: 1;
  }
}
.server-settings-invite-share {
  display: flex;
  gap: var(--openbot-space-1);
}
.server-settings-invite-share > .ui-button:last-child {
  animation: server-settings-invite-qr-in var(--openbot-duration-normal) var(--openbot-ease-out);
}
@keyframes server-settings-invite-qr-in {
  from {
    opacity: 0;
    transform: translateX(calc(-1 * var(--openbot-space-4)));
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.server-settings-invite-qr {
  animation: server-settings-invite-panel-in var(--openbot-duration-normal) var(--openbot-ease-out);
  transform-origin: top;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-4);
}
@media (prefers-reduced-motion: reduce) {
  .server-settings-invite-share > .ui-button:last-child {
    animation: none;
  }
}
@keyframes server-settings-invite-panel-in {
  from {
    opacity: 0;
    transform: translateY(calc(-1 * var(--openbot-space-3))) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .server-settings-invite-qr {
    animation: none;
  }
}
.server-settings-routine-feed-row {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.server-settings-routine-feed-agent {
  flex: none;
  width: auto;
}
.server-settings-routine-feed-row .ui-input {
  flex: 1;
  min-width: 0;
  font-family: var(--openbot-font-mono);
  cursor: text;
}
.server-settings-routine-feed-text {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
.server-settings-routine-feed-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-1);
}
.server-settings-routine-feed-loading {
  display: grid;
  place-items: center;
  padding: var(--openbot-space-6);
  animation: server-settings-routine-feed-loading-in var(--openbot-duration-normal) var(--openbot-ease-out) var(--openbot-loading-indicator-delay) both;
}
@keyframes server-settings-routine-feed-loading-in {
  from {
    opacity: 0;
  }
}
.server-settings-routine-feed-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.server-mcp-panel {
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  min-height: 100%;
}
.server-mcp-panel.t-page-slide .t-page {
  position: static;
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-6);
  min-width: 0;
}
@starting-style {
  .settings-modal .server-mcp-panel.t-page-slide .t-page[data-page-id] {
    opacity: 0;
    transform: translateX(var(--t-page-from-x));
    filter: blur(var(--page-blur));
  }
}
.server-mcp-section {
  min-width: 0;
}
.server-mcp-error {
  display: block;
  margin-bottom: var(--openbot-space-2);
}
.server-mcp-runtime-note {
  display: block;
  margin-bottom: var(--openbot-space-2);
}
.server-mcp-test-result {
  display: block;
  overflow-wrap: anywhere;
}
.server-mcp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-3);
  border: 1px dashed var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  padding: var(--openbot-space-8) var(--openbot-space-6);
  text-align: center;
}
.server-mcp-panel .ui-button > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.server-mcp-list {
  min-width: 0;
}
.server-mcp-row-icon {
  color: var(--openbot-text-muted);
}
.server-mcp-row[data-disabled] .server-mcp-row-icon, .server-mcp-row[data-disabled] .ui-item-content {
  opacity: 0.55;
}
.server-mcp-row-title {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  min-width: 0;
  flex-wrap: wrap;
}
.server-mcp-row-next {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-top: var(--openbot-space-1);
}
.server-mcp-row-menu {
  min-width: 180px;
}
.server-mcp-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--openbot-space-6);
  min-width: 0;
}
.server-mcp-transport-panel {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-6);
  min-width: 0;
}
.server-mcp-repeat {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
  min-width: 0;
  border: 0;
  margin: 0;
  padding: 0;
}
.server-mcp-repeat-legend {
  padding: 0;
}
.server-mcp-repeat-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-2);
}
.server-mcp-repeat-row-pair {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
}
.server-mcp-repeat-add {
  justify-content: center;
  width: 100%;
}
.server-mcp-callback {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  min-width: 0;
}
.server-mcp-callback-url {
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: var(--openbot-font-mono);
}
@media (max-width: 520px) {
  .server-mcp-repeat-row-pair {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .server-mcp-repeat-row-pair > .ui-input:first-child {
    grid-column: 1 / -1;
  }
}
.skills-marketplace-backdrop {
  z-index: var(--openbot-layer-dialog-host);
  padding: var(--openbot-space-4);
}
.skills-marketplace {
  --marketplace-inset: var(--openbot-space-6);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1040px, calc(100vw - 32px));
  height: min(704px, calc(100vh - 32px));
  overflow: hidden;
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-sidebar);
  color: var(--openbot-text-primary);
}
.skills-marketplace-page {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  .skills-marketplace {
    transition: opacity var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1), transform var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1);
  }
  .skills-marketplace[data-closed] {
    opacity: 0;
    transform: scale(0.98);
  }
}
.marketplace-menu {
  z-index: calc(var(--openbot-layer-dialog-host) + 1);
}
body:has(.skills-marketplace) :is(.integration-dialog-backdrop, .integration-wizard-dialog) {
  z-index: calc(var(--openbot-layer-dialog-host) + 1);
}
.skills-marketplace-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  min-height: 48px;
  padding: var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-2) var(--marketplace-inset);
  border-bottom: 1px solid var(--openbot-border);
}
.skills-marketplace-topbar-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--openbot-space-1);
}
.skills-marketplace-body {
  position: relative;
  overflow: auto;
  scrollbar-gutter: stable;
}
.marketplace-frame {
  padding: var(--openbot-space-6) var(--marketplace-inset) var(--openbot-space-8);
}
.skills-marketplace-error {
  position: sticky;
  bottom: var(--openbot-space-4);
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  width: fit-content;
  max-width: calc(100% - 32px);
  margin: 0 auto var(--openbot-space-4);
  padding: var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-3);
  border: 1px solid var(--openbot-danger);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
  color: var(--openbot-danger);
  box-shadow: 0 12px 32px var(--openbot-shadow-dialog);
}
.marketplace-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.marketplace-crumbs {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--openbot-space-2);
  min-width: 0;
}
.marketplace-title {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-lg);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.skills-marketplace .marketplace-crumb-parent {
  flex: 0 1 auto;
  min-width: 0;
  height: auto;
  margin-block: calc(-1 * var(--openbot-space-1));
  margin-inline: calc(-1 * var(--openbot-space-2) - 1px);
  padding: var(--openbot-space-1) var(--openbot-space-2);
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-lg);
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .skills-marketplace .marketplace-crumb-parent:hover:not(:disabled) {
    border-color: var(--openbot-border-strong);
    background: var(--openbot-bg-control-hover);
    color: var(--openbot-text-primary);
  }
}
.marketplace-crumb-separator {
  flex: 0 0 auto;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
}
.marketplace-title:focus, .skills-marketplace-body h3[tabindex="-1"]:focus {
  outline: none;
}
.marketplace-view, .marketplace-stack {
  display: grid;
  align-content: start;
  gap: var(--openbot-space-6);
  min-width: 0;
}
.marketplace-head {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-4);
}
.marketplace-head-actions {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  min-width: 0;
  max-width: 50%;
  gap: var(--openbot-space-1);
}
.marketplace-head-copy {
  display: grid;
  flex: 1;
  gap: var(--openbot-space-1);
  min-width: 0;
}
.marketplace-page-title {
  margin: 0;
  overflow-wrap: anywhere;
}
.marketplace-command {
  overflow-wrap: anywhere;
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
}
.marketplace-toolbar {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
}
.marketplace-search {
  position: relative;
  flex: 0 1 240px;
  min-width: 0;
  margin-left: auto;
}
.marketplace-count {
  margin-left: var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
  font-variant-numeric: tabular-nums;
}
.marketplace-install-menu {
  min-width: 220px;
}
.marketplace-install-trigger {
  min-width: 0;
  max-width: 100%;
}
.marketplace-install-trigger svg {
  flex: none;
}
.marketplace-install-label {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.marketplace-tab-slot {
  padding-top: var(--openbot-space-4);
}
.marketplace-block {
  display: grid;
  gap: var(--openbot-space-2);
}
.marketplace-block-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.marketplace-block-copy {
  display: grid;
  gap: var(--openbot-space-0-5);
  min-width: 0;
}
.marketplace-load-more {
  justify-self: center;
}
.marketplace-avatar {
  --marketplace-avatar-size: 20px;
  display: inline-grid;
  flex: none;
  width: var(--marketplace-avatar-size);
  height: var(--marketplace-avatar-size);
}
.marketplace-avatar[data-size="xs"] {
  --marketplace-avatar-size: 16px;
}
.marketplace-avatar[data-size="md"] {
  --marketplace-avatar-size: 40px;
}
.marketplace-avatar[data-size="lg"] {
  --marketplace-avatar-size: 48px;
}
.marketplace-avatar > .agent-avatar {
  --agent-avatar-optical-offset: calc(var(--marketplace-avatar-size) * -0.14);
  width: 100%;
  height: 100%;
}
.marketplace-skill-mark {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 20px;
  height: 20px;
  overflow: hidden;
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-muted);
}
.marketplace-skill-mark[data-size="row"] {
  width: 36px;
  height: 36px;
  border-radius: var(--openbot-radius-md);
}
.marketplace-skill-mark[data-size="md"] {
  width: 40px;
  height: 40px;
  border-radius: var(--openbot-radius-md);
}
.skills-marketplace-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  color: var(--openbot-accent-text);
}
.skills-marketplace-icon:has(img) {
  border: 0;
  background: transparent;
}
.skills-marketplace-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.skills-marketplace-icon svg {
  width: 20px;
  height: 20px;
}
.marketplace-skill-mark[data-kind="icon"] > img {
  width: 100%;
  height: 100%;
}
.marketplace-skill-mark[data-kind="none"] > * {
  width: 60%;
  height: 60%;
}
.skills-marketplace .integration-logo-tile > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.marketplace-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--openbot-space-3);
}
.marketplace-card {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-rows: auto 1fr auto;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-4);
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-grouped);
  transition: background var(--openbot-duration-fast) var(--openbot-ease-out);
}
.marketplace-card:hover:not(.marketplace-card-skeleton) {
  background: var(--openbot-bg-control-hover);
}
.marketplace-card-head {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  min-width: 0;
}
.marketplace-card-name {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}
.marketplace-card-action {
  position: relative;
  z-index: 2;
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  gap: var(--openbot-space-2);
  min-width: 0;
  max-width: 60%;
}
.marketplace-card-body {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--openbot-text-secondary);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.marketplace-card-foot {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  min-height: 16px;
  font-variant-numeric: tabular-nums;
}
.marketplace-hitarea {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: transparent;
}
.marketplace-hitarea:hover:not(:disabled) {
  background: transparent;
}
.marketplace-card-skeleton {
  grid-template-rows: auto auto auto;
}
.marketplace-skeleton-mark {
  width: 40px;
  height: 40px;
  border-radius: var(--openbot-radius-md);
}
.marketplace-skeleton-line {
  width: 100%;
  height: 12px;
}
.marketplace-skeleton-line:last-child {
  width: 60%;
}
.marketplace-done {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  color: var(--openbot-success-text);
  font-size: var(--openbot-text-sm);
  white-space: nowrap;
}
.marketplace-done > svg {
  width: 14px;
  height: 14px;
}
.marketplace-rows {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.marketplace-row {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  min-height: 52px;
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
}
.marketplace-row-copy {
  display: grid;
  flex: 1;
  gap: var(--openbot-space-0-5);
  min-width: 0;
  overflow-wrap: anywhere;
}
.marketplace-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: var(--openbot-space-8);
  align-items: start;
}
.marketplace-side {
  position: sticky;
  top: var(--openbot-space-6);
  padding-left: var(--openbot-space-6);
  border-left: 1px solid var(--openbot-border);
}
.marketplace-props {
  display: grid;
  gap: var(--openbot-space-0-5);
  margin: 0;
}
.marketplace-props > dd {
  margin: 0 0 var(--openbot-space-3);
}
.marketplace-props > dd:last-child {
  margin-bottom: 0;
}
.marketplace-info {
  grid-template-columns: minmax(120px, max-content) minmax(0, 1fr);
  column-gap: var(--openbot-space-6);
  row-gap: var(--openbot-space-2);
}
.marketplace-info > dd {
  margin: 0;
}
.skills-marketplace .marketplace-link {
  height: auto;
  padding: 0;
}
.marketplace-try {
  display: grid;
  gap: var(--openbot-space-2);
}
.skill-preview-card.marketplace-try-card {
  gap: var(--openbot-space-2);
}
.marketplace-try-card .skill-preview-request {
  width: min(100%, 560px);
  line-height: var(--openbot-space-6);
}
.marketplace-try-card .skill-preview-chip {
  margin-inline-end: var(--openbot-space-0-5);
  vertical-align: top;
}
.marketplace-try-card .reference-chip-icon > :is(img, svg) {
  width: 100%;
  height: 100%;
}
.marketplace-doc {
  min-width: 0;
  padding: var(--openbot-space-4) var(--openbot-space-6);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  font-size: var(--openbot-text-sm);
  overflow-wrap: anywhere;
}
.marketplace-doc > :first-child {
  margin-top: 0;
}
.marketplace-doc > :last-child {
  margin-bottom: 0;
}
.marketplace-app-page {
  width: min(100%, 720px);
  margin-inline: auto;
}
.marketplace-empty {
  display: grid;
  justify-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-8) var(--openbot-space-6);
  border: 1px dashed var(--openbot-border-strong);
  border-radius: var(--openbot-radius-card);
  text-align: center;
}
.marketplace-empty > p {
  max-width: 440px;
  margin: 0;
}
.marketplace-empty > .ui-button {
  margin-top: var(--openbot-space-2);
}
.marketplace-empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--openbot-space-2);
}
@media (max-width: 860px) {
  .skills-marketplace {
    --marketplace-inset: var(--openbot-space-4);
  }
  .marketplace-page {
    grid-template-columns: minmax(0, 1fr);
  }
  .marketplace-side {
    position: static;
    padding: var(--openbot-space-4) 0 0;
    border-top: 1px solid var(--openbot-border);
    border-left: 0;
  }
  .marketplace-head {
    flex-wrap: wrap;
  }
}
.skills-marketplace .ui-button > svg, .marketplace-search > svg {
  width: 16px;
  height: 16px;
}
.logo-color-grid {
  display: grid;
  grid-template-columns: repeat(5, 32px);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  gap: 4px;
}
.logo-color-choice {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  transition-property: scale, background-color, box-shadow;
  transition-duration: var(--openbot-duration-normal), var(--openbot-duration-hover), var(--openbot-duration-hover);
  transition-timing-function: ease-out;
}
.logo-color-choice:hover {
  background: var(--openbot-hover);
}
.logo-color-choice:active {
  scale: 0.96;
}
.logo-color-choice-selected {
  background: var(--openbot-border);
  box-shadow: inset 0 0 0 1px var(--openbot-text-muted), 0 1px 3px var(--openbot-shadow-popover-ambient);
}
.logo-color-swatch {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: var(--openbot-radius-pill);
  box-shadow: inset 0 0 0 1px var(--openbot-border-strong);
}
.sound-theme-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  width: 100%;
  min-width: 0;
  gap: var(--openbot-space-2);
}
.sound-theme-option {
  display: flex;
  min-width: 0;
}
.sound-theme-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: var(--openbot-space-1);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  box-shadow: inset 0 0 0 1px var(--openbot-border);
  text-align: left;
  cursor: pointer;
  transition-property: scale, background-color, box-shadow;
  transition-duration: var(--openbot-duration-normal), var(--openbot-duration-hover), var(--openbot-duration-normal);
  transition-timing-function: var(--openbot-ease-out);
}
.sound-theme-card:hover {
  background: var(--openbot-bg-control-hover);
}
.sound-theme-card:active {
  scale: 0.96;
}
.sound-theme-card[data-checked] {
  box-shadow: inset 0 0 0 1.5px var(--openbot-text-primary), 0 1px 3px var(--openbot-shadow-popover-ambient);
}
.sound-theme-card[data-popped][data-checked] {
  animation: sound-theme-pop var(--openbot-duration-toast-enter) var(--openbot-ease-out);
}
.sound-theme-option:has(:focus-visible) .sound-theme-card {
  box-shadow: var(--openbot-focus-ring);
}
.sound-theme-dither {
  --sound-theme-ink: var(--openbot-sound-off-ink);
  --sound-theme-back: var(--openbot-sound-off-back);
  position: relative;
  height: 56px;
  overflow: hidden;
  clip-path: inset(0 round var(--openbot-radius-md));
  border-radius: var(--openbot-radius-md);
  color: var(--sound-theme-ink);
  background-color: var(--sound-theme-back);
  background-image: radial-gradient(var(--sound-theme-ink) 1px, transparent 1.5px), linear-gradient(135deg, transparent, var(--sound-theme-ink));
  background-size: 4px 4px, 100% 100%;
  opacity: 0.72;
  filter: saturate(0.7);
  transition-property: opacity, filter;
  transition-duration: var(--openbot-duration-overlay);
  transition-timing-function: var(--openbot-ease-out);
}
.sound-theme-dither canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.sound-theme-card:hover .sound-theme-dither, .sound-theme-card[data-checked] .sound-theme-dither {
  opacity: 1;
  filter: none;
}
.sound-theme-dither[data-choice="default"] {
  --sound-theme-ink: var(--openbot-sound-warm-ink);
  --sound-theme-back: var(--openbot-sound-warm-back);
}
.sound-theme-dither[data-choice="mech"] {
  --sound-theme-ink: var(--openbot-sound-mech-ink);
  --sound-theme-back: var(--openbot-sound-mech-back);
}
.sound-theme-dither[data-choice="bubble"] {
  --sound-theme-ink: var(--openbot-sound-bubble-ink);
  --sound-theme-back: var(--openbot-sound-bubble-back);
}
.sound-theme-dither[data-choice="press"] {
  --sound-theme-ink: var(--openbot-sound-press-ink);
  --sound-theme-back: var(--openbot-sound-press-back);
}
.sound-theme-text {
  display: grid;
  min-width: 0;
  padding: var(--openbot-space-1-5) var(--openbot-space-1) var(--openbot-space-0-5);
}
.sound-theme-name {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: inherit;
}
.sound-theme-hint {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
@keyframes sound-theme-pop {
  0% {
    scale: 1;
  }
  35% {
    scale: 1.06;
    rotate: -1.5deg;
  }
  70% {
    scale: 0.98;
    rotate: 0.8deg;
  }
  100% {
    scale: 1;
    rotate: 0deg;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sound-theme-card[data-popped][data-checked] {
    animation: none;
  }
  .sound-theme-card:active {
    scale: 1;
  }
}
.mcp-connect-backdrop {
  z-index: calc(var(--openbot-layer-dialog-host) + 2);
}
.mcp-connect-dialog {
  position: relative;
  width: min(420px, 100%);
  max-height: calc(100dvh - var(--openbot-space-6) * 2);
  overflow-y: auto;
  outline: 0;
  border-radius: var(--openbot-radius-xl);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-6);
  color: var(--openbot-text-primary);
  animation: mcp-connect-dialog-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}
.mcp-connect-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-1);
}
.mcp-connect-close {
  position: absolute;
  top: var(--openbot-space-3);
  right: var(--openbot-space-3);
}
.mcp-connect-marks {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-3);
}
.mcp-connect-mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
}
.mcp-connect-mark .app-logo {
  width: 48px;
  height: 48px;
}
.mcp-connect-dots {
  width: 28px;
  height: 2px;
  background-image: radial-gradient(circle, var(--openbot-text-muted) 1px, transparent 1px);
  background-size: 7px 2px;
  animation: mcp-connect-dots-run 900ms linear infinite;
}
.mcp-connect-marks .mcp-connect-mark-icon {
  width: 48px;
  height: 48px;
  animation: mcp-connect-mark-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}
@media (prefers-reduced-motion: reduce) {
  .mcp-connect-dots, .mcp-connect-marks .mcp-connect-mark-icon {
    animation: none;
  }
}
.mcp-connect-title {
  display: block;
  margin: var(--openbot-space-3) 0 0;
  text-align: center;
  font-size: var(--openbot-text-xl);
  line-height: var(--openbot-leading-xl);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: var(--openbot-tracking-tight);
}
.mcp-connect-description {
  margin: 0;
  text-align: center;
  text-wrap: balance;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.mcp-connect-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-grouped);
}
.mcp-connect-row {
  position: relative;
  margin: 0;
  padding: var(--openbot-space-3);
}
.mcp-connect-row + .mcp-connect-row {
  border-top: 1px solid var(--openbot-border-grouped);
}
.mcp-local-heading {
  margin: 0;
  padding-right: var(--openbot-space-6);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-sm);
}
.mcp-local-steps {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
  margin: var(--openbot-space-2) 0 0;
  padding-left: var(--openbot-space-4);
  list-style: decimal;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.mcp-local-steps > li::marker {
  color: var(--openbot-text-muted);
}
.mcp-local-address {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.mcp-local-address > code {
  overflow-wrap: anywhere;
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
}
.mcp-connect-form {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
  margin: var(--openbot-space-4) 0 0;
}
.mcp-connect-docs {
  position: absolute;
  top: var(--openbot-space-3);
  right: var(--openbot-space-3);
  gap: var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.mcp-connect-primary {
  width: 100%;
}
.mcp-connect-docs > svg, .mcp-connect-primary > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.mcp-connect-status:empty {
  display: none;
}
.mcp-connect-privacy {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.mcp-connect-privacy svg {
  flex: none;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
}
@keyframes mcp-connect-dots-run {
  to {
    background-position-x: 7px;
  }
}
@keyframes mcp-connect-mark-in {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
}
@keyframes mcp-connect-dialog-in {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
}
.mcp-connect-dialog.mcp-sign-in-page-dialog, .mcp-connect-dialog[data-page] {
  width: min(720px, 100%);
}
.mcp-sign-in-page {
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
}
.mcp-sign-in-page-dialog .mcp-sign-in-page {
  margin-top: var(--openbot-space-4);
}
.mcp-sign-in-page-note {
  min-width: 0;
  margin: 0;
}
.mcp-sign-in-relay-open {
  margin-top: var(--openbot-space-4);
}
.mcp-sign-in-relay-form {
  margin-top: var(--openbot-space-4);
}
.mcp-sign-in-relay-row {
  display: flex;
  gap: var(--openbot-space-2);
}
.mcp-sign-in-relay-row > .ui-input {
  flex: 1;
  min-width: 0;
}
.mcp-sign-in-page-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  margin-top: var(--openbot-space-4);
}
.provider-update-toast-logo {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  overflow: visible;
  fill: var(--openbot-provider-current);
}
.provider-update-toast[data-sonner-toast][data-styled="true"] [data-action] {
  grid-row: 1;
  align-self: center;
}
.provider-update-toast[data-sonner-toast][data-styled="true"]:has(.provider-update-toast-action:not([data-idle="true"])) [data-content] {
  grid-column: 2;
}
.ui-toaster.ui-toaster-closeable .provider-update-toast[data-sonner-toast][data-styled="true"] [data-action], .ui-toaster .provider-update-toast[data-sonner-toast][data-styled="true"]:has([data-close-button]) [data-action] {
  margin-right: var(--openbot-space-6);
}
.ui-toaster [data-sonner-toast] [data-action]:has(.provider-update-toast-action[data-idle="true"]) {
  display: none;
}
.provider-update-toast[data-sonner-toast][data-styled="true"] [data-description]:has(.provider-update-toast-progress) {
  display: flex;
  flex-direction: column;
}
.provider-update-toast-line {
  display: block;
  min-width: 0;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.provider-update-toast-line[data-failed="true"] {
  display: -webkit-box;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
.provider-update-toast-line[data-failed="true"][data-expanded="true"] {
  display: block;
  -webkit-line-clamp: none;
  line-clamp: none;
}
.provider-update-toast .provider-update-toast-details {
  margin-top: var(--openbot-space-1);
  color: inherit;
  font-size: inherit;
  text-decoration: underline;
}
.provider-update-toast-progress {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  margin-top: var(--openbot-space-2);
}
.ui-toaster.ui-toaster-closeable .provider-update-toast .provider-update-toast-progress, .ui-toaster .provider-update-toast:has([data-close-button]) .provider-update-toast-progress {
  margin-right: calc(-1 * var(--openbot-space-6));
}
.provider-update-toast-bar {
  flex: 1;
  min-width: 0;
}
.provider-update-toast-bar[data-provider] .ui-progress-fill {
  background: var(--openbot-provider-current);
}
.provider-update-toast-percent {
  --digit-dur: var(--openbot-duration-fast);
  --digit-distance: var(--openbot-space-1);
  --digit-blur: 0px;
  --digit-ease: ease-out;
  display: inline-flex;
  justify-content: flex-end;
  width: 4ch;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
.custom-provider-dialog {
  display: flex;
  width: min(460px, 100%);
  max-height: calc(100dvh - 48px);
  flex-direction: column;
  overflow: hidden;
  outline: 0;
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-sidebar);
  color: var(--openbot-text-primary);
}
.custom-provider-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--openbot-space-3);
  border-bottom: 1px solid var(--openbot-border);
  padding: var(--openbot-space-4);
}
.custom-provider-mark {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
}
.custom-provider-title {
  min-width: 0;
  flex: 1;
}
.custom-provider-close {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-block-start: calc(var(--openbot-space-2) * -1);
  margin-inline-end: calc(var(--openbot-space-2) * -1);
  color: var(--openbot-text-muted);
}
.custom-provider-body {
  display: flex;
  min-height: 0;
  flex-direction: column;
}
.custom-provider-form {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: var(--openbot-space-4);
  overflow-y: auto;
  padding: var(--openbot-space-4);
}
.custom-provider-list {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: var(--openbot-space-4);
  overflow-y: auto;
  padding: var(--openbot-space-4);
}
.custom-provider-list-empty {
  padding: var(--openbot-space-4) 0;
  text-align: center;
}
.custom-provider-rows {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
}
.custom-provider-rows-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--openbot-space-3);
}
.custom-provider-row {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
}
.custom-provider-row-inputs {
  display: grid;
  align-items: center;
  gap: var(--openbot-space-2);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
}
.custom-provider-row-inputs.custom-provider-row-single {
  grid-template-columns: minmax(0, 1fr) auto;
}
.custom-provider-rows-error, .custom-provider-row-error, .custom-provider-submit-error {
  display: block;
}
.custom-provider-actions {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-2);
  border-top: 1px solid var(--openbot-border);
  padding: var(--openbot-space-4);
}
.custom-provider-actions .ui-button-variant-default {
  width: 100%;
}
.custom-provider-rows > .ui-button svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.custom-provider-rows-heading > .custom-provider-discover {
  margin-inline-start: auto;
}
.custom-provider-rows-heading > .custom-provider-discover + .custom-provider-rows-error {
  display: none;
}
.custom-provider-rows-heading > .custom-provider-discover svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.custom-provider-discovery-status {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.custom-provider-discovered {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--openbot-space-1);
  list-style: none;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
}
.custom-provider-discovered-row {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-1) var(--openbot-space-2);
  border-radius: var(--openbot-radius-sm);
  cursor: pointer;
}
.custom-provider-discovered-row:hover {
  background: var(--openbot-bg-control-hover);
}
.custom-provider-discovered-id {
  min-width: 0;
  overflow: hidden;
  font-family: var(--openbot-font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.custom-provider-preset-group {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
}
.custom-provider-presets {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.custom-provider-preset.ui-button {
  display: flex;
  width: 100%;
  height: auto;
  align-items: center;
  justify-content: flex-start;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  text-align: start;
  white-space: normal;
}
.custom-provider-preset-icon {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-secondary);
}
.custom-provider-preset > .custom-provider-preset-icon svg, .custom-provider-preset-chevron {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.custom-provider-preset-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 2px;
}
.custom-provider-preset-title {
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}
.custom-provider-preset-description {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
}
.custom-provider-preset-chevron {
  flex-shrink: 0;
  color: var(--openbot-text-muted);
}
.custom-acp-presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-2);
}
.custom-acp-code {
  overflow-wrap: anywhere;
}
.custom-acp-code input, input.custom-acp-code {
  font-family: var(--openbot-font-mono);
}
.detected-providers {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
  margin-top: var(--openbot-space-4);
}
.detected-providers-heading {
  display: flex;
  min-height: 24px;
  align-items: center;
  gap: var(--openbot-space-2);
}
.detected-providers-scanning {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
}
.ui-button.detected-providers-scan {
  gap: var(--openbot-space-1-5);
  margin-inline-start: auto;
  margin-inline-end: calc(var(--openbot-space-2) * -1);
}
.detected-providers-heading > .detected-providers-scan svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.detected-providers-icon {
  color: var(--openbot-text-secondary);
}
.detected-providers .detected-providers-icon > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.ui-button.detected-providers-show-hidden {
  align-self: flex-start;
  margin-inline-start: calc(var(--openbot-space-2) * -1);
}
.ui-button.custom-agents-copy-diagnostics {
  justify-self: start;
  margin-inline-start: calc(var(--openbot-space-2) * -1);
}
.detected-providers-settings {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
  margin-top: var(--openbot-space-3);
}
.acp-registry-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-2);
}
.acp-registry-form > .ui-field {
  flex-basis: 100%;
}
.acp-registry-entry.ui-item {
  flex-wrap: wrap;
}
.acp-registry-entry .ui-item-content {
  flex-basis: 180px;
}
.acp-registry-entry .ui-item-actions {
  min-width: 0;
  flex-shrink: 1;
  flex-wrap: wrap;
  margin-inline-start: auto;
}
.agent-template-dialog {
  position: relative;
  display: flex;
  width: min(420px, 100%);
  max-height: calc(100dvh - 48px);
  flex-direction: column;
  overflow: hidden;
  outline: 0;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-sidebar);
  color: var(--openbot-text-primary);
}
.agent-template-status {
  position: absolute;
  z-index: 1;
  inset-block-start: var(--openbot-space-3);
  inset-inline-start: var(--openbot-space-3);
}
.agent-template-corner-actions {
  position: absolute;
  z-index: 1;
  display: flex;
  gap: var(--openbot-space-1);
  inset-block-start: var(--openbot-space-2);
  inset-inline-end: var(--openbot-space-2);
  color: var(--openbot-text-muted);
}
.agent-template-body {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: var(--openbot-space-4);
  padding: var(--openbot-space-6) var(--openbot-space-4) var(--openbot-space-4);
}
.agent-template-scroll {
  overflow-y: auto;
}
.agent-template-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-1);
  text-align: center;
}
.agent-template-avatar {
  width: 72px;
  height: 72px;
  margin-block-end: var(--openbot-space-3);
}
.agent-template-name {
  overflow-wrap: anywhere;
}
.agent-template-description {
  display: -webkit-box;
  margin-block-start: var(--openbot-space-1);
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}
.agent-template-rows {
  display: grid;
  overflow: hidden;
  border-radius: var(--openbot-radius-grouped);
}
.agent-template-row {
  display: grid;
  width: 100%;
  height: auto;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-3);
  border-radius: 0;
  padding: var(--openbot-space-3) var(--openbot-space-4);
  text-align: start;
  color: var(--openbot-text-muted);
}
.agent-template-row + .agent-template-row {
  border-top: 1px solid var(--openbot-border-grouped);
}
.agent-template-row-copy {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-0-5);
}
.agent-template-row-title {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.agent-template-row-detail {
  overflow: hidden;
  color: var(--openbot-text-grouped-secondary);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-template-actions {
  display: flex;
  flex-shrink: 0;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
  border-top: 1px solid var(--openbot-border);
  padding: var(--openbot-space-3) var(--openbot-space-4);
}
.agent-template-copy {
  margin-inline-end: auto;
}
.agent-template-detail-header {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-block-start: calc(var(--openbot-space-2) * -1);
}
.agent-template-detail {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: var(--openbot-space-4);
  overflow-y: auto;
}
.agent-template-section {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
}
.agent-template-prose {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  overflow-wrap: anywhere;
}
.agent-template-prose .message-markdown-heading[data-level] {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
.agent-template-prose .message-markdown-heading:not([data-level="1"], [data-level="2"]) {
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.agent-template-list {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.agent-template-list > li {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-0-5);
}
.agent-template-skill-toggle {
  justify-content: flex-start;
  align-self: flex-start;
  gap: var(--openbot-space-1);
  margin-inline-start: calc(var(--openbot-space-2) * -1);
}
.agent-template-skill-text {
  max-height: 240px;
  margin: var(--openbot-space-1) 0 0;
  overflow: auto;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-3);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  white-space: pre-wrap;
}
.agent-delete-undo-toast-host {
  width: var(--width);
}
.agent-delete-undo-toast {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-3);
  overflow: hidden;
  padding: var(--openbot-space-3);
  padding-bottom: calc(var(--openbot-space-3) + var(--openbot-space-1));
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface-raised);
  box-shadow: 0 0 0 1px var(--openbot-border), var(--openbot-shadow-raised);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
}
.agent-delete-undo-toast-avatar {
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  width: 32px;
  height: 32px;
}
.agent-delete-undo-toast-text {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.agent-delete-undo-toast-title {
  overflow: hidden;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-delete-undo-toast-detail {
  overflow: hidden;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-delete-undo-toast-bar {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
}
.agent-delete-undo-toast-bar .ui-progress-track {
  border-radius: 0;
  background: transparent;
}
.agent-delete-undo-toast-bar .ui-progress-fill {
  background: var(--openbot-accent);
  transition-duration: var(--openbot-duration-fast);
  transition-timing-function: linear;
}
.whats-new-dialog {
  position: relative;
  display: flex;
  width: min(480px, 100%);
  max-height: min(640px, calc(100dvh - 2 * var(--openbot-space-6)));
  flex-direction: column;
  overflow: hidden;
  outline: 0;
  border-radius: var(--openbot-radius-xl);
  background: var(--openbot-bg-sidebar);
  color: var(--openbot-text-primary);
}
.whats-new-close {
  position: absolute;
  z-index: 1;
  inset-block-start: var(--openbot-space-3);
  inset-inline-end: var(--openbot-space-3);
  color: var(--openbot-text-muted);
}
.whats-new-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-8) var(--openbot-space-6) var(--openbot-space-4);
  text-align: center;
}
.whats-new-logo {
  --app-logo-background: var(--openbot-surface-light);
  width: 56px;
  height: 56px;
  margin-block-end: var(--openbot-space-3);
  border-radius: var(--openbot-radius-logo);
}
.whats-new-title {
  margin: 0;
  font-size: var(--openbot-text-2xl);
  font-weight: var(--openbot-weight-bold);
  line-height: var(--openbot-leading-2xl);
}
.whats-new-body {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--openbot-space-6);
  overflow-y: auto;
  padding: var(--openbot-space-2) var(--openbot-space-6) var(--openbot-space-6);
  border-block-start: 1px solid transparent;
}
.whats-new-body.scroll-fade-top {
  border-block-start-color: var(--openbot-border);
}
.whats-new-body.scroll-fade-bottom {
  mask-image: linear-gradient(to bottom, var(--openbot-text-primary) calc(100% - 32px), transparent);
}
.whats-new-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-2);
  padding-block: var(--openbot-space-6);
  text-align: center;
}
.whats-new-state .ui-button {
  margin-block-start: var(--openbot-space-2);
}
.whats-new-state-icon {
  width: 24px;
  height: 24px;
  color: var(--openbot-warning-text);
}
.whats-new-notice {
  padding: var(--openbot-space-3) var(--openbot-space-4) var(--openbot-space-4);
  border-radius: var(--openbot-radius-card);
  background-image: linear-gradient( 180deg, var(--openbot-warning-soft), var(--openbot-warning) );
  @supports (color: color-mix(in lab, red, red)) {
    background-image: linear-gradient( 180deg, var(--openbot-warning-soft), color-mix(in srgb, var(--openbot-warning) 3%, transparent) );
  }
  box-shadow: inset 0 0 0 1px var(--openbot-warning);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--openbot-warning) 26%, transparent);
  }
  --whats-new-tone: var(--openbot-warning-text);
}
.whats-new-notice-title {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin: 0 0 var(--openbot-space-2);
  color: var(--openbot-warning-text);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
}
.whats-new-notice-title svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
.whats-new-group {
  --whats-new-tone: var(--openbot-text-muted);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--openbot-space-3);
}
.whats-new-group[data-type="added"] {
  --whats-new-tone: var(--openbot-logo-production);
}
.whats-new-group[data-type="changed"] {
  --whats-new-tone: var(--openbot-accent-text);
}
.whats-new-group[data-type="fixed"] {
  --whats-new-tone: var(--openbot-success-text);
}
.whats-new-group-title {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin: 0;
  color: var(--whats-new-tone);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.whats-new-group-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--openbot-radius-pill);
  background: var(--whats-new-tone);
  box-shadow: 0 0 10px var(--whats-new-tone);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 10px color-mix(in srgb, var(--whats-new-tone) 70%, transparent);
  }
}
.whats-new-group-count {
  padding: 0 var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-pill);
  background: var(--whats-new-tone);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--whats-new-tone) 12%, transparent);
  }
  font-family: var(--openbot-font-mono);
  font-weight: var(--openbot-weight-medium);
  letter-spacing: 0;
}
.whats-new-list {
  display: grid;
  width: 100%;
  gap: var(--openbot-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.whats-new-item {
  position: relative;
  padding-inline-start: var(--openbot-space-6);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  text-wrap: pretty;
}
.whats-new-item-headline {
  display: block;
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}
.whats-new-item-detail {
  display: block;
  margin-block-start: var(--openbot-space-0-5);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.whats-new-item::before {
  content: "";
  position: absolute;
  inset-block-start: 0.75em;
  inset-inline-start: var(--openbot-space-1);
  width: 8px;
  height: 1px;
  background: var(--whats-new-tone);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--whats-new-tone) 70%, transparent);
  }
}
.whats-new-toggle {
  margin-inline-start: calc(-1 * var(--openbot-space-2));
  color: var(--openbot-text-muted);
}
.whats-new-actions .ui-button svg, .whats-new-toggle svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.whats-new-toggle svg {
  transition: transform var(--openbot-duration-fast) var(--openbot-ease-out);
}
.whats-new-toggle[data-expanded] svg {
  transform: rotate(180deg);
}
.whats-new-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border-block-start: 1px solid var(--openbot-border);
}
@media (max-width: 560px) {
  .whats-new-backdrop {
    padding: var(--openbot-space-3);
  }
  .whats-new-header {
    padding-inline: var(--openbot-space-4);
  }
  .whats-new-body {
    padding-inline: var(--openbot-space-4);
  }
}
@media (prefers-reduced-motion: reduce) {
  .whats-new-backdrop, .whats-new-toggle svg {
    animation: none;
    transition: none;
  }
}
.help-menu {
  width: 320px;
}
.help-menu .help-menu-news {
  gap: var(--openbot-space-3);
}
.help-menu-news-headline {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.help-menu-news .ui-menu-trailing {
  flex: none;
}
.billing-panel {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
}
.billing-loading {
  display: grid;
  place-items: center;
  padding: var(--openbot-space-8);
}
.billing-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--openbot-space-3);
  min-height: 32px;
}
.billing-toolbar .ui-button {
  max-width: 100%;
  height: auto;
  white-space: normal;
}
.billing-empty {
  padding: var(--openbot-space-6) var(--openbot-space-4);
  border: 1px dashed var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  text-align: center;
}
.billing-server-logo {
  width: 32px;
  height: 32px;
  border-radius: var(--openbot-radius-md);
}
.billing-server-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
}
.billing-server .ui-item-actions {
  gap: var(--openbot-space-2);
}
.billing-server-price {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.billing-dialog-backdrop {
  background: var(--openbot-bg-overlay);
}
.billing-dialog {
  position: relative;
  display: flex;
  width: min(640px, 100%);
  max-height: calc(100dvh - 2 * var(--openbot-space-6));
  flex-direction: column;
  overflow: hidden;
  outline: 0;
  border-radius: var(--openbot-radius-modal);
  background: var(--openbot-bg-sidebar);
  color: var(--openbot-text-primary);
}
.billing-dialog-close {
  position: absolute;
  z-index: 1;
  inset-block-start: var(--openbot-space-3);
  inset-inline-end: var(--openbot-space-3);
  color: var(--openbot-text-muted);
}
.billing-dialog-header {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-6) var(--openbot-space-6) var(--openbot-space-4);
}
.billing-dialog-header p {
  margin: 0;
}
.billing-dialog-title {
  margin: 0;
  font-size: var(--openbot-text-2xl);
  font-weight: var(--openbot-weight-bold);
  line-height: var(--openbot-leading-2xl);
}
.billing-dialog-body {
  min-height: 0;
  overflow-y: auto;
  padding: 0 var(--openbot-space-6) var(--openbot-space-6);
}
.billing-license {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-3);
}
@container (max-width: 560px) {
  .billing-license .ui-alert {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }
  .billing-license .ui-alert-actions {
    grid-column: 2;
    justify-content: flex-start;
  }
}
.billing-license-icon {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-secondary);
}
.billing-license-icon svg {
  width: 18px;
  height: 18px;
}
.billing-license-row .ui-item-actions {
  gap: var(--openbot-space-2);
}
.billing-license-buy {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3) var(--openbot-space-4);
}
.billing-license-buy-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
}
.billing-license-buy-users, .billing-license-buy-total {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
}
.billing-license-buy-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.billing-license-stepper {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
  margin: 0;
  border: 0;
  padding: 0;
}
.billing-license-stepper-value {
  min-width: 3ch;
  font-weight: var(--openbot-weight-semibold);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.billing-license-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-2);
}
.billing-license-link.ui-button {
  height: auto;
  padding: 0;
}
.billing-license-divider {
  width: 100%;
  margin: var(--openbot-space-2) 0;
  border: 0;
  border-top: 1px solid var(--openbot-border);
}
.billing-license-change {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-3);
}
.billing-license-quote {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
  border-top: 1px solid var(--openbot-border);
  padding-top: var(--openbot-space-3);
}
.billing-license-lines {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.billing-license-lines div {
  display: flex;
  justify-content: space-between;
  gap: var(--openbot-space-3);
}
.billing-license-lines dd {
  margin: 0;
  color: var(--openbot-text-primary);
  font-variant-numeric: tabular-nums;
}
.billing-license-total {
  display: flex;
  align-items: baseline;
  gap: var(--openbot-space-2);
  margin: 0;
}
.billing-license-total-amount {
  font-size: var(--openbot-text-2xl);
  font-weight: var(--openbot-weight-bold);
  font-variant-numeric: tabular-nums;
}
.billing-license-users {
  max-height: 320px;
  overflow-y: auto;
}
.reference-chip, .composer-mention-token {
  display: inline-flex;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  height: var(--openbot-space-6);
  align-items: center;
  justify-content: flex-start;
  gap: var(--openbot-space-1);
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-border);
  padding: var(--openbot-space-1) var(--openbot-space-1-5) var(--openbot-space-1) var(--openbot-space-1);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: 500;
  line-height: var(--openbot-space-4);
  vertical-align: middle;
  white-space: nowrap;
  text-decoration: none;
}
.reference-chip[data-kind="mcp"], .reference-chip[data-kind="plugin"], .reference-chip[data-kind="skill"] {
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
}
.reference-chip[data-kind="quote"] {
  max-width: min(240px, 100%);
  font-weight: 450;
}
.reference-chip[data-kind="agent"]:hover, button.reference-chip[data-kind="quote"]:hover {
  background: var(--openbot-border-strong);
  color: var(--openbot-text-primary);
}
.reference-chip .reference-chip-icon {
  display: inline-grid;
  width: var(--openbot-space-4);
  height: var(--openbot-space-4);
  flex: 0 0 var(--openbot-space-4);
  place-items: center;
  overflow: hidden;
  border-radius: var(--openbot-radius-xs);
  color: inherit;
}
.reference-chip-icon > img, .reference-chip-icon > svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
:is(.message-reference-chip, .composer-mention-token) .reference-chip-icon > svg.lucide {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  stroke-width: var(--openbot-icon-stroke);
}
.reference-chip-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
:root {
  --stagger-dur: 500ms;
  --stagger-distance: 12px;
  --stagger-stagger: 40ms;
  --stagger-blur: 3px;
  --stagger-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
.t-stagger-line {
  display: block;
  opacity: 0;
  transform: translateY(var(--stagger-distance));
  filter: blur(var(--stagger-blur));
  transition: opacity var(--stagger-dur) var(--stagger-ease), transform var(--stagger-dur) var(--stagger-ease), filter var(--stagger-dur) var(--stagger-ease);
  will-change: transform, opacity, filter;
}
.t-stagger-line--2 {
  transition-delay: var(--stagger-stagger);
}
.t-stagger-line--3 {
  transition-delay: calc(var(--stagger-stagger) * 2);
}
.t-stagger.is-shown .t-stagger-line {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
@media (prefers-reduced-motion: reduce) {
  .t-stagger-line {
    transition: none !important;
  }
}
.skill-preview {
  display: grid;
  gap: var(--openbot-space-6);
  min-width: 0;
}
.skill-preview-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: var(--openbot-space-3);
  row-gap: var(--openbot-space-3);
  align-items: center;
}
.skill-preview-heading .agent-skill-icon {
  grid-column: 1;
  align-self: center;
}
.skill-preview-name {
  grid-column: 2;
  min-width: 0;
}
.skill-preview-action {
  grid-column: 3;
  justify-self: end;
}
.skill-preview-summary {
  grid-column: 1 / -1;
}
.skill-preview-heading h2, .skill-preview-heading p, .skill-preview-request p {
  margin: 0;
}
.skill-preview-heading h2 {
  font-size: var(--openbot-text-2xl);
  font-weight: var(--openbot-weight-medium);
  overflow-wrap: anywhere;
}
.skill-preview-heading p, .skill-preview-description {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-lg);
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.skill-preview-heading .skill-preview-creator {
  margin-top: var(--openbot-space-1);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-md);
}
.skill-preview-card {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 160px;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--openbot-radius-xl);
  padding: var(--openbot-space-6);
}
.skill-preview-gradient, .skill-preview-gradient canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
  clip-path: inset(0 round var(--openbot-radius-xl));
}
.skill-preview-card > :not(.skill-preview-gradient) {
  position: relative;
}
.skill-preview-request {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  width: min(100%, 520px);
  min-width: 0;
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-canvas);
  padding: var(--openbot-space-3);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-lg);
  line-height: 1.5;
}
.skill-preview-request p {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.skill-preview-request .reference-chip {
  max-width: 100%;
}
.skill-preview-request button {
  flex-shrink: 0;
}
.skill-preview-unavailable {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
}
.skill-preview-description > :first-child {
  margin-top: 0;
}
.skill-preview-description > :last-child {
  margin-bottom: 0;
}
.skill-preview-request .ui-icon-button {
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-border);
}
.agent-skills-modal:has(.agent-skill-detail) {
  width: min(760px, calc(100vw - 32px));
  height: min(640px, calc(100dvh - 48px));
}
:root {
  --page-slide-dur: 250ms;
  --page-fade-dur: 250ms;
  --page-slide-distance: 8px;
  --page-blur: 3px;
  --page-stagger: 0ms;
  --page-exit-enabled: 1;
  --page-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --page-fade-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
.t-page-slide {
  position: relative;
}
.t-page-slide .t-page[data-page-id="1"] {
  --t-page-from-x: calc(var(--page-slide-distance) * -1);
}
.t-page-slide .t-page[data-page-id="2"] {
  --t-page-from-x: var(--page-slide-distance);
}
.t-page-slide .t-page {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateX(calc(var(--t-page-from-x, 0px) * var(--page-exit-enabled)));
  filter: blur(calc(var(--page-blur) * var(--page-exit-enabled)));
  transition: opacity var(--page-fade-dur) var(--page-fade-ease), transform var(--page-slide-dur) var(--page-slide-ease), filter var(--page-slide-dur) var(--page-slide-ease);
  will-change: opacity, transform, filter;
}
.t-page-slide[data-page="1"] .t-page[data-page-id="1"], .t-page-slide[data-page="2"] .t-page[data-page-id="2"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
  filter: blur(0);
  transition-delay: var(--page-stagger);
}
@media (prefers-reduced-motion: reduce) {
  .t-page-slide .t-page {
    transition: none !important;
  }
}
.agent-skills-pages {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
@starting-style {
  .agent-skills-pages.t-page-slide .t-page {
    opacity: 0;
    transform: translateX(var(--t-page-from-x));
    filter: blur(var(--page-blur));
  }
}
:root {
  --resize-dur: 300ms;
  --resize-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
.t-resize {
  transition: width var(--resize-dur) var(--resize-ease), height var(--resize-dur) var(--resize-ease);
  will-change: width, height;
}
@media (prefers-reduced-motion: reduce) {
  .t-resize {
    transition: none !important;
  }
}
.skill-preview-heading.t-stagger-line, .skill-preview-card.t-stagger-line {
  display: grid;
}
@starting-style {
  .skill-preview.t-stagger.is-shown .t-stagger-line {
    opacity: 0;
    transform: translateY(var(--stagger-distance));
    filter: blur(var(--stagger-blur));
  }
}
.skill-preview-request .skill-preview-chip {
  color: var(--skill-logo-color, var(--openbot-accent-text));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--skill-logo-color, var(--openbot-accent-text)), var(--openbot-text-primary) 35%);
  }
  background: var(--skill-logo-color, var(--openbot-accent-text));
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--skill-logo-color, var(--openbot-accent-text)) 18%, transparent);
  }
}
.agent-skills-tabs {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.agent-skills-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--openbot-space-2);
  flex-shrink: 0;
  margin: var(--openbot-space-3);
}
.agent-skills-tab-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.agent-local-skill-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-2);
}
.agent-skills-tab-slot {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
@starting-style {
  .agent-skills-tab-content[data-selected] {
    opacity: 0;
    transform: translateY(var(--sliding-tabs-content-distance));
    filter: blur(var(--sliding-tabs-content-blur));
  }
}
.agent-local-library:not(.agent-skill-detail) {
  gap: var(--openbot-space-0-5);
  padding: 0;
}
.agent-local-skill-row:has(.agent-skill-update) {
  grid-template-columns: minmax(0, 1fr) auto auto;
}
:root {
  color-scheme: dark;
  --background: var(--openbot-bg-canvas);
  --surface: var(--openbot-bg-surface);
  --border: var(--openbot-border);
  --text-primary: var(--openbot-text-primary);
  --text-secondary: var(--openbot-text-secondary);
  --text-muted: var(--openbot-text-muted);
  --accent: var(--openbot-accent);
  --danger: var(--openbot-danger);
  --digit-dur: 500ms;
  --digit-distance: 8px;
  --digit-stagger: 70ms;
  --digit-blur: 2px;
  --digit-ease: cubic-bezier(0.34, 1.45, 0.64, 1);
  --digit-dir-x: 0;
  --digit-dir-y: 1;
  --stream-gap: 40ms;
  --stream-fade: 300ms;
  --stream-catch-up: 400ms;
  --stream-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --text-swap-dur: 150ms;
  --text-swap-translate-y: 4px;
  --text-swap-blur: 2px;
  --text-swap-ease: ease-in-out;
  --modal-open-dur: 250ms;
  --modal-close-dur: 150ms;
  --modal-scale: 0.96;
  --modal-scale-close: 0.96;
  --modal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --page-slide-dur: 250ms;
  --page-fade-dur: 250ms;
  --page-slide-distance: 8px;
  --page-blur: 3px;
  --page-stagger: 0ms;
  --page-exit-enabled: 1;
  --page-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --page-fade-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --panel-open-dur: 400ms;
  --panel-close-dur: 350ms;
  --panel-translate-x: 0px;
  --panel-translate-y: 100px;
  --panel-blur: 2px;
  --panel-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --resize-dur: 300ms;
  --resize-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shake-distance: 6px;
  --shake-overshoot: 4px;
  --shake-dur-a: 80ms;
  --shake-dur-b: 60ms;
  --shake-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --revert-hold: 3000ms;
  --revert-dur: 280ms;
  --acc-expand: 250ms;
  --acc-collapse: 250ms;
  --acc-ease: cubic-bezier(0.22, 1, 0.36, 1);
  font-family: var(--openbot-font-sans);
  font-synthesis: none;
  text-rendering: geometricPrecision;
}
.openbot-playground-root {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--openbot-bg-canvas);
}
.openbot-playground-loading {
  width: 100%;
  height: 100%;
  background: var(--openbot-bg-canvas);
}
.openbot-playground-root .unread-messages-banner {
  display: none;
}
@media (max-width: 640px) {
  .openbot-playground-root .app-frame, .openbot-playground-root .app-frame-with-server-rail {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 68px minmax(0, 1fr);
  }
  .openbot-playground-root .server-rail, .openbot-playground-root .left-panel-resizer, .openbot-playground-root .sidebar-topbar, .openbot-playground-root .sidebar-search-wrap, .openbot-playground-root .sidebar-chat-group[aria-labelledby="sidebar-people-heading"] {
    display: none;
  }
  .openbot-playground-root .sidebar {
    grid-column: 1;
    grid-row: 1;
    flex-direction: row;
    border-right: 0;
    border-bottom: 1px solid var(--openbot-border);
  }
  .openbot-playground-root .agent-list, .openbot-playground-root .sidebar-compact .agent-list {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    align-items: center;
    justify-content: center;
    gap: var(--openbot-space-1-5);
    padding: var(--openbot-space-2) var(--openbot-space-3);
  }
  .openbot-playground-root .sidebar-chat-group[aria-labelledby="sidebar-agents-heading"], .openbot-playground-root .sidebar-chat-group[aria-label="Agents"] {
    display: flex;
    align-items: center;
    gap: var(--openbot-space-1-5);
    margin: 0;
  }
  .openbot-playground-root .sidebar-chat-group[aria-labelledby="sidebar-agents-heading"] > header, .openbot-playground-root .sidebar-chat-group[aria-label="Agents"] > header {
    display: none;
  }
  .openbot-playground-root .agent-row, .openbot-playground-root .sidebar-compact .agent-row {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    margin: 0;
    padding: 6px;
  }
  .openbot-playground-root .sidebar-compact .agent-row-avatar {
    transform: none;
  }
  .openbot-playground-root .agent-row-copy {
    display: none;
  }
  .openbot-playground-root .conversation-panel, .openbot-playground-root .app-frame-with-server-rail .conversation-panel {
    grid-column: 1;
    grid-row: 2;
  }
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-ease: initial;
      --hosted-upsell-beam-angle: 0deg;
    }
  }
}


/* /@fs//app/src/renderer/src/features/web-client/web-client.css */
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties;
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-cyrillic-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-cyrillic-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-greek-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-greek-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-vietnamese-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-cyrillic-ext-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-cyrillic-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-greek-ext-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-greek-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-vietnamese-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-latin-ext-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/app/node_modules/@fontsource-variable/inter/files/inter-latin-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
      "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
      "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --spacing: 0.25rem;
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring:where(:not(iframe)) {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .\!visible {
    visibility: visible !important;
  }
  .collapse {
    visibility: collapse;
  }
  .invisible {
    visibility: hidden;
  }
  .visible {
    visibility: visible;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .static {
    position: static;
  }
  .sticky {
    position: sticky;
  }
  .isolate {
    isolation: isolate;
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .block {
    display: block;
  }
  .contents {
    display: contents;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .table {
    display: table;
  }
  .size-3 {
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
  }
  .size-4 {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }
  .size-\[14px\] {
    width: 14px;
    height: 14px;
  }
  .size-\[18px\] {
    width: 18px;
    height: 18px;
  }
  .shrink {
    flex-shrink: 1;
  }
  .flex-grow {
    flex-grow: 1;
  }
  .grow {
    flex-grow: 1;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .resize {
    resize: both;
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .fill-current {
    fill: currentcolor;
  }
  .fill-none {
    fill: none;
  }
  .stroke-current {
    stroke: currentcolor;
  }
  .lowercase {
    text-transform: lowercase;
  }
  .ring {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .backdrop-filter {
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }
  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }
}
:root {
  --openbot-provider-current: currentcolor;
  --openbot-bg-native-canvas: #141414;
  --openbot-bg-native-sidebar: #141414;
  --openbot-bg-sheet: #141414;
  --openbot-bg-grouped: #212121;
  --openbot-text-grouped-secondary: #96969b;
  --openbot-border-grouped: #333335;
  --openbot-radius-grouped: 16px;
  --openbot-bg-chrome-glass: rgba(38, 38, 40, 0.96);
  --openbot-border-chrome-glass: rgba(255, 255, 255, 0.08);
  --openbot-bg-chrome-blur: rgba(26, 26, 28, 0.62);
  --openbot-bg-canvas: #1a1a1a;
  --openbot-bg-canvas-clear: rgba(26, 26, 26, 0);
  --openbot-bg-sidebar: #1a1a1a;
  --openbot-marketplace-detail-bg: #111111;
  --openbot-bg-surface: #212121;
  --openbot-bg-surface-raised: #242424;
  --openbot-bg-control: #212121;
  --openbot-bg-control-hover: #242424;
  --openbot-bg-control-active: #2a2a2a;
  --openbot-tabs-bar-bg: #212121;
  --openbot-tabs-pill-bg: #2a2a2a;
  --openbot-bg-overlay: rgba(26, 26, 26, 0.92);
  --openbot-dialog-overlay: rgba(0, 0, 0, 0.1);
  --openbot-dialog-ring: rgba(255, 255, 255, 0.1);
  --openbot-bg-glass: rgba(33, 33, 33, 0.76);
  --openbot-glass-surface: rgba(255, 255, 255, 0.07);
  --openbot-glass-surface-hover: rgba(255, 255, 255, 0.11);
  --openbot-glass-border: rgba(255, 255, 255, 0.18);
  --openbot-glass-highlight: rgba(255, 255, 255, 0.12);
  --openbot-glass-shadow: rgba(0, 0, 0, 0.28);
  --openbot-hero-grid-line: rgba(214, 173, 242, 0.09);
  --openbot-price-metal-high: #4c4c4c;
  --openbot-price-metal-core: #1f1f1f;
  --openbot-price-metal-low: #343434;
  --openbot-price-sheen-cool: rgba(150, 196, 255, 0.92);
  --openbot-price-sheen-light: rgba(240, 244, 250, 0.98);
  --openbot-price-sheen-warm: rgba(255, 184, 132, 0.94);
  --openbot-price-sheen-cool-soft: rgba(150, 196, 255, 0.26);
  --openbot-price-sheen-warm-soft: rgba(255, 184, 132, 0.28);
  --openbot-price-sheen-cool-clear: rgba(150, 196, 255, 0);
  --openbot-price-sheen-warm-clear: rgba(255, 184, 132, 0);
  --openbot-price-rim: rgba(255, 255, 255, 0.28);
  --openbot-price-rim-under: rgba(255, 255, 255, 0.1);
  --openbot-price-glow: rgba(180, 200, 255, 0.22);
  --openbot-bg-host-inset: #101216;
  --openbot-bg-notch: #000000;
  --openbot-mask-solid: #000000;
  --openbot-transparent: rgba(0, 0, 0, 0);
  --openbot-drawer-scrim: #000000;
  --openbot-scroll-edge-overlay: rgba(0, 0, 0, 0.72);
  --openbot-queue-surface: var(--openbot-bg-surface);
  --openbot-queue-border: var(--openbot-border-strong);
  --openbot-queue-text: var(--openbot-text-primary);
  --openbot-queue-action: var(--openbot-text-muted);
  --openbot-border: rgba(255, 255, 255, 0.035);
  --openbot-border-strong: rgba(255, 255, 255, 0.045);
  --openbot-image-outline: rgba(255, 255, 255, 0.1);
  --openbot-border-focus: rgba(0, 124, 247, 0.72);
  --openbot-text-primary: #ffffff;
  --openbot-text-on-light: #141414;
  --openbot-surface-light: #f0f0f0;
  --openbot-action: #f0f0f0;
  --openbot-action-foreground: #141414;
  --openbot-qr-background: #ffffff;
  --openbot-onboarding-desktop-mist: #dbe9ff;
  --openbot-onboarding-desktop-blue: #7eb4f2;
  --openbot-onboarding-desktop-indigo: #6f7de8;
  --openbot-sound-warm-back: #d95926;
  --openbot-sound-warm-ink: #f2c46b;
  --openbot-sound-mech-back: #1f1f1f;
  --openbot-sound-mech-ink: #dbe9ff;
  --openbot-sound-bubble-back: #5b5fe0;
  --openbot-sound-bubble-ink: #8bdee8;
  --openbot-sound-press-back: #ff1e5e;
  --openbot-sound-press-ink: #ffd8a8;
  --openbot-sound-off-back: #212121;
  --openbot-sound-off-ink: #4c4c4c;
  --openbot-onboarding-window: #f3f5f8;
  --openbot-text-secondary: #dcdcdc;
  --openbot-text-muted: #979797;
  --openbot-text-dim: #6a6a6a;
  --openbot-text-readable: rgba(255, 255, 255, 0.52);
  --openbot-text-muted-on-light: rgba(20, 20, 20, 0.52);
  --openbot-text-dim-on-light: rgba(20, 20, 20, 0.36);
  --openbot-download-card-muted: rgba(20, 20, 20, 0.68);
  --openbot-download-card-chip: rgba(20, 20, 20, 0.1);
  --openbot-download-card-border: rgba(20, 20, 20, 0.16);
  --openbot-download-card-focus: rgba(242, 242, 242, 0.86);
  --openbot-text-placeholder: #bfbfbf;
  --openbot-text-on-accent: #ffffff;
  --openbot-text-on-status: #07130c;
  --openbot-accent: #007cf7;
  --openbot-accent-hover: #1f8fff;
  --openbot-accent-text: #42a0ff;
  --openbot-accent-soft: rgba(0, 124, 247, 0.16);
  --openbot-accent-strong: rgba(0, 124, 247, 0.34);
  --openbot-settings-text-muted: rgba(255, 255, 255, 0.59);
  --openbot-provider-codex: var(--openbot-text-primary);
  --openbot-provider-claude: #d97757;
  --openbot-provider-grok: var(--openbot-text-primary);
  --openbot-provider-antigravity: #8e75b2;
  --openbot-chart-series-codex: #d6adf2;
  --openbot-chart-series-claude: var(--openbot-provider-claude);
  --openbot-chart-series-grok: #6bc7d9;
  --openbot-chart-series-other: var(--openbot-text-muted);
  --openbot-chart-storage-workspaces: #3987e5;
  --openbot-chart-storage-files: #d95926;
  --openbot-chart-storage-chats: #199e70;
  --openbot-chart-storage-downloads: #9085e9;
  --openbot-chart-storage-runtimes: #c98500;
  --openbot-chart-storage-app: var(--openbot-text-dim);
  --openbot-logo-production: #d6adf2;
  --openbot-logo-eye: #040007;
  --openbot-logo-production-eye: var(--openbot-logo-eye);
  --openbot-logo-dev: #e3b866;
  --openbot-logo-preview: #61c985;
  --openbot-unread-surface: #74b9ff;
  --openbot-unread-text: #07131f;
  --openbot-success: #31cf76;
  --openbot-success-text: #31cf76;
  --openbot-warning-text: #ff9412;
  --openbot-danger-text: #ff6069;
  --openbot-success-soft: rgba(49, 207, 118, 0.12);
  --openbot-success-wash: rgba(49, 207, 118, 0.045);
  --openbot-warning: #ff9412;
  --openbot-warning-soft: rgba(255, 148, 18, 0.12);
  --openbot-question-option: #6bc7d9;
  --openbot-question-option-soft: rgba(107, 199, 217, 0.14);
  --openbot-question-option-hover: rgba(107, 199, 217, 0.2);
  --openbot-question-option-pressed: rgba(107, 199, 217, 0.26);
  --openbot-island-identity-name: var(--openbot-text-primary);
  --openbot-question-badge-text: #8bdee8;
  --openbot-question-badge-soft: rgba(107, 199, 217, 0.16);
  --openbot-message-badge-text: #91c8ff;
  --openbot-message-badge-soft: rgba(116, 185, 255, 0.16);
  --openbot-badge-new: #ff1e5e;
  --openbot-badge-new-soft: rgba(255, 30, 94, 0.16);
  --openbot-beam-teal: var(--openbot-file-teal);
  --openbot-beam-blue: var(--openbot-accent-text);
  --openbot-beam-pink: var(--openbot-file-pink);
  --openbot-approval-badge-soft: rgba(255, 148, 18, 0.18);
  --openbot-danger: #fd2f3b;
  --openbot-danger-hover: #fd5d67;
  --openbot-danger-soft: rgba(253, 47, 59, 0.16);
  --openbot-danger-soft-hover: rgba(253, 47, 59, 0.28);
  --openbot-danger-focus: rgba(253, 47, 59, 0.4);
  --openbot-danger-border: rgba(253, 47, 59, 0.5);
  --openbot-file-blue: #74b9ff;
  --openbot-file-blue-soft: rgba(116, 185, 255, 0.14);
  --openbot-file-yellow: #ff9412;
  --openbot-file-yellow-soft: rgba(255, 148, 18, 0.12);
  --openbot-file-orange: #f0a06a;
  --openbot-file-orange-soft: rgba(240, 160, 106, 0.14);
  --openbot-file-teal: #6bc7d9;
  --openbot-file-teal-soft: rgba(107, 199, 217, 0.14);
  --openbot-file-green: #31cf76;
  --openbot-file-green-soft: rgba(49, 207, 118, 0.12);
  --openbot-file-red: #fd2f3b;
  --openbot-file-red-soft: rgba(253, 47, 59, 0.16);
  --openbot-file-pink: #d98ac9;
  --openbot-file-pink-soft: rgba(217, 138, 201, 0.14);
  --openbot-file-default: #42a0ff;
  --openbot-file-default-soft: rgba(0, 124, 247, 0.14);
  --openbot-data-table-border: #303030;
  --openbot-data-table-header-text: #a1a1a1;
  --openbot-data-table-text: #f5f5f5;
  --openbot-data-table-outer-border: rgba(255, 255, 255, 0);
  --openbot-data-table-ring: rgba(255, 255, 255, 0.12);
  --openbot-shadow-popover-ambient: rgba(0, 0, 0, 0.1);
  --openbot-shadow-dialog: rgba(0, 0, 0, 0.48);
  --openbot-shadow-dynamic-island: rgba(0, 0, 0, 0.6);
  --openbot-shadow-ring: rgba(228, 228, 228, 0.04);
  --openbot-border-on-light: rgba(20, 20, 20, 0.14);
  --openbot-hover: rgba(255, 255, 255, 0.06);
  --openbot-font-sans: "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --openbot-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
  --openbot-text-sm: 12px;
  --openbot-text-md: 13px;
  --openbot-text-lg: 14px;
  --openbot-text-xl: 16px;
  --openbot-text-2xl: 18px;
  --openbot-text-3xl: 24px;
  --openbot-leading-sm: 16px;
  --openbot-leading-md: 18px;
  --openbot-leading-lg: 20px;
  --openbot-leading-xl: 22px;
  --openbot-leading-2xl: 24px;
  --openbot-leading-3xl: 30px;
  --openbot-text-display: 32px;
  --openbot-text-usage-total: clamp(2rem, 5cqi, 3.5rem);
  --openbot-leading-display: 38px;
  --openbot-text-hero: clamp(3rem, 8vw, 6.5rem);
  --openbot-glyph-xs: 7px;
  --openbot-glyph-sm: 8px;
  --openbot-weight-regular: 400;
  --openbot-weight-medium: 500;
  --openbot-weight-semibold: 600;
  --openbot-weight-bold: 700;
  --openbot-tracking-tight: -0.1px;
  --openbot-tracking-normal: 0;
  --openbot-tracking-wide: 0.02em;
  --openbot-space-0-5: 2px;
  --openbot-space-1: 4px;
  --openbot-space-1-5: 6px;
  --openbot-space-2: 8px;
  --openbot-space-3: 12px;
  --openbot-space-4: 16px;
  --openbot-space-6: 24px;
  --openbot-space-8: 32px;
  --openbot-scrollbar-size: 8px;
  --openbot-radius-xs: 4px;
  --openbot-radius-sm: 6px;
  --openbot-radius-md: 8px;
  --openbot-radius-lg: 12px;
  --openbot-radius-card: 14px;
  --openbot-radius-xl: 20px;
  --openbot-radius-bubble: 22px;
  --openbot-radius-bubble-inset: calc(var(--openbot-radius-bubble) - var(--openbot-space-3) - 1px);
  --openbot-radius-modal: 30px;
  --openbot-radius-media-preview: calc(var(--openbot-radius-lg) - 1px);
  --openbot-radius-pill: 999px;
  --openbot-radius-logo: 20%;
  --openbot-control-xs: 24px;
  --openbot-control-sm: 28px;
  --openbot-control-md: 32px;
  --openbot-control-lg: 36px;
  --openbot-control-xl: 40px;
  --openbot-switch-width: 36px;
  --openbot-switch-height: 20px;
  --openbot-switch-thumb: 16px;
  --openbot-switch-inset: 2px;
  --openbot-switch-sm-width: 24px;
  --openbot-switch-sm-height: 14px;
  --openbot-switch-sm-thumb: 12px;
  --openbot-switch-sm-inset: 1px;
  --openbot-icon-stroke: 1.5;
  --openbot-icon-xs: 12px;
  --openbot-icon-sm: 14px;
  --openbot-icon-md: 16px;
  --openbot-icon-lg: 20px;
  --openbot-chat-entry-gap: var(--openbot-space-3);
  --openbot-chat-marker-gap: var(--openbot-space-1);
  --openbot-chat-marker-height: var(--openbot-control-xs);
  --openbot-chat-marker-avatar: var(--openbot-icon-md);
  --openbot-chat-marker-width: 680px;
  --openbot-duration-fast: 120ms;
  --openbot-duration-hover: 0ms;
  --openbot-duration-dialog: 100ms;
  --openbot-duration-normal: 160ms;
  --openbot-duration-slow: 200ms;
  --openbot-duration-overlay: 240ms;
  --openbot-duration-toast-enter: 340ms;
  --openbot-duration-toast-exit: 220ms;
  --openbot-duration-island-content: 340ms;
  --openbot-duration-island-content-exit: 220ms;
  --openbot-agent-activity-exit-delay: 500ms;
  --openbot-loading-indicator-delay: 400ms;
  --openbot-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --openbot-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --openbot-shadow-raised: 0 12px 32px var(--openbot-shadow-popover-ambient);
  --openbot-shadow-card: 0 0 0 transparent;
  --openbot-shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.48);
  --openbot-focus-ring: 0 0 0 3px var(--openbot-accent-soft);
  --openbot-layer-dropdown: 40;
  --openbot-layer-popover: 60;
  --openbot-layer-dialog: 100;
  --openbot-layer-dialog-host: calc(var(--openbot-layer-dialog) + var(--openbot-layer-popover));
  --openbot-layer-toast: 120;
  --openbot-layer-tooltip: 240;
}
[data-provider] {
  --openbot-provider-current: currentcolor;
}
[data-provider="codex"] {
  --openbot-provider-current: var(--openbot-provider-codex);
}
[data-provider="claude"] {
  --openbot-provider-current: var(--openbot-provider-claude);
}
[data-provider="grok"] {
  --openbot-provider-current: var(--openbot-provider-grok);
}
[data-provider="opencode"] {
  --openbot-provider-current: var(--openbot-text-primary);
}
[data-provider="antigravity"] {
  --openbot-provider-current: var(--openbot-provider-antigravity);
}
[data-provider="cursor"] {
  --openbot-provider-current: var(--openbot-text-primary);
}
[data-provider="cline"] {
  --openbot-provider-current: var(--openbot-text-primary);
}
[data-provider="acp"] {
  --openbot-provider-current: var(--openbot-text-primary);
}
.app-logo {
  --app-logo-background: var(--openbot-logo-production);
  --app-logo-eye: var(--openbot-logo-production-eye);
  position: relative;
  display: inline-block;
  overflow: hidden;
  border-radius: var(--openbot-radius-logo);
  isolation: isolate;
}
.app-logo[data-interactive="true"]:focus {
  outline: none;
}
.app-logo[data-interactive="true"]:focus-visible {
  box-shadow: inset 0 0 0 2px var(--openbot-text-primary);
}
.app-logo[data-variant="dev"] {
  --app-logo-background: var(--openbot-logo-dev);
  --app-logo-eye: var(--openbot-logo-eye);
}
.app-logo[data-variant="preview"] {
  --app-logo-background: var(--openbot-logo-preview);
  --app-logo-eye: var(--openbot-logo-eye);
}
.app-logo-background {
  fill: var(--app-logo-background);
}
.app-logo-eye {
  fill: none;
  stroke: var(--app-logo-eye);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 9.5px;
  pointer-events: none;
  transform-box: view-box;
}
.app-logo-eye-motion {
  pointer-events: none;
  transform: translate(var(--app-logo-eye-x, 0%), var(--app-logo-eye-y, 0%)) scaleY(var(--app-logo-eye-squint, 1));
  transform-origin: center;
  transition: transform var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1);
}
.app-logo-eye-left {
  transform-origin: 28.7% 48.7%;
}
.app-logo-eye-right {
  transform-origin: 71.2% 48.8%;
}
.app-logo[data-animation="blink"] .app-logo-eye {
  animation: app-logo-blink 4.8s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
.app-logo[data-animation="look-around"] .app-logo-eye {
  animation: app-logo-look-around 6s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
.app-logo[data-animation="surprised"] .app-logo-eye {
  animation: app-logo-surprised 5.4s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
.app-logo[data-click-reaction="wink"] .app-logo-eye-left {
  animation: app-logo-wink-left 360ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.app-logo[data-click-reaction="wink"] .app-logo-eye-right {
  animation: app-logo-wink-right 360ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.app-logo[data-easter-egg="party"] .app-logo-background {
  animation: app-logo-party-colors 1.2s cubic-bezier(0.77, 0, 0.175, 1) both;
}
.app-logo[data-easter-egg="party"] .app-logo-eye-left {
  animation: app-logo-party-left 1.2s cubic-bezier(0.77, 0, 0.175, 1) both;
}
.app-logo[data-easter-egg="party"] .app-logo-eye-right {
  animation: app-logo-party-right 1.2s cubic-bezier(0.77, 0, 0.175, 1) both;
}
@keyframes app-logo-blink {
  0%, 44%, 48%, 100% {
    transform: scaleY(1);
  }
  46% {
    transform: scaleY(0.08);
  }
}
@keyframes app-logo-look-around {
  0%, 30%, 47%, 64%, 100% {
    transform: translateX(0);
  }
  35%, 42% {
    transform: translateX(-3.5%);
  }
  52%, 59% {
    transform: translateX(3.5%);
  }
}
@keyframes app-logo-surprised {
  0%, 40%, 56%, 100% {
    transform: translateY(0) scale(1);
  }
  44%, 51% {
    transform: translateY(-1.5%) scaleX(0.94) scaleY(1.12);
  }
}
@keyframes app-logo-wink-left {
  0%, 100% {
    transform: scaleY(1);
  }
  38%, 58% {
    transform: scaleY(0.08);
  }
}
@keyframes app-logo-wink-right {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  48% {
    transform: translateY(-1%) scaleX(0.96) scaleY(1.08);
  }
}
@keyframes app-logo-party-colors {
  0%, 100% {
    fill: var(--app-logo-background);
  }
  22% {
    fill: var(--openbot-logo-dev);
  }
  48% {
    fill: var(--openbot-logo-preview);
  }
  74% {
    fill: var(--openbot-logo-production);
  }
}
@keyframes app-logo-party-left {
  0%, 100% {
    transform: translate(0) rotate(0);
  }
  25% {
    transform: translateY(-6%) rotate(-8deg);
  }
  50% {
    transform: translate(4%, 2%) rotate(8deg);
  }
  75% {
    transform: translate(-4%, -2%) rotate(-4deg);
  }
}
@keyframes app-logo-party-right {
  0%, 100% {
    transform: translate(0) rotate(0);
  }
  25% {
    transform: translateY(6%) rotate(8deg);
  }
  50% {
    transform: translate(-4%, -2%) rotate(-8deg);
  }
  75% {
    transform: translate(4%, 2%) rotate(4deg);
  }
}
@media (hover: hover) and (pointer: fine) {
  .app-logo[data-interactive="true"] {
    cursor: pointer;
  }
}
@media (prefers-reduced-motion: reduce) {
  .app-logo[data-animation] .app-logo-eye, .app-logo[data-click-reaction] .app-logo-eye, .app-logo[data-easter-egg] .app-logo-eye, .app-logo[data-easter-egg] .app-logo-background {
    animation: none;
    transform: none;
  }
  .app-logo-eye-motion {
    transition: none;
    transform: none;
  }
}
:where(.ui-text, .ui-heading) {
  margin: 0;
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
}
.ui-server-gradient-logo {
  width: var(--server-gradient-logo-size, 40px);
  height: var(--server-gradient-logo-size, 40px);
  display: block;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: var(--server-gradient-logo-radius, var(--openbot-radius-lg));
  background-color: var(--server-gradient-base);
  background-image: var(--server-gradient-layers);
  background-repeat: no-repeat;
  outline: 1px solid var(--openbot-image-outline);
  outline-offset: -1px;
}
:where(.ui-text)[data-tone="secondary"], :where(.ui-heading)[data-tone="secondary"] {
  color: var(--openbot-text-secondary);
}
:where(.ui-text)[data-tone="muted"], :where(.ui-heading)[data-tone="muted"] {
  color: var(--openbot-text-muted);
}
:where(.ui-text, .ui-heading)[data-tone="danger"] {
  color: var(--openbot-danger);
}
:where(.ui-text, .ui-heading)[data-tone="success"] {
  color: var(--openbot-success);
}
:where(.ui-text, .ui-heading)[data-tone="warning"] {
  color: var(--openbot-warning);
}
:where(.ui-text)[data-variant="caption"] {
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-sm);
}
:where(.ui-text)[data-variant="label-sm"] {
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
}
:where(.ui-text)[data-variant="label"] {
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
}
:where(.ui-text)[data-variant="body-sm"] {
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-md);
}
:where(.ui-text)[data-variant="body"] {
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-lg);
}
:where(.ui-heading)[data-size="sm"] {
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
:where(.ui-heading)[data-size="md"] {
  font-size: var(--openbot-text-xl);
  line-height: var(--openbot-leading-xl);
}
:where(.ui-heading)[data-size="lg"] {
  font-size: var(--openbot-text-2xl);
  line-height: var(--openbot-leading-2xl);
}
:where(.ui-heading) {
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: var(--openbot-tracking-tight);
}
.ui-text-truncate {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:where(.ui-button) {
  min-width: 0;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-1-5);
  border: 1px solid transparent;
  border-radius: var(--openbot-radius-md);
  padding: 0 var(--openbot-space-4);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: 1;
  text-decoration: none;
  user-select: none;
  white-space: nowrap;
  transition: background-color var(--openbot-duration-hover) ease, border-color var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease, box-shadow var(--openbot-duration-hover) ease, opacity var(--openbot-duration-hover) ease;
}
.ui-button {
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-medium);
}
:where(.ui-button-size-xs) {
  height: var(--openbot-control-xs);
  padding-inline: var(--openbot-space-2);
  font-size: var(--openbot-text-sm);
}
:where(.ui-button-size-sm) {
  height: var(--openbot-control-md);
  padding-inline: var(--openbot-space-3);
  font-size: var(--openbot-text-sm);
}
:where(.ui-button-size-default) {
  height: var(--openbot-control-lg);
}
:where(.ui-button-size-lg) {
  height: var(--openbot-control-xl);
  padding-inline: var(--openbot-space-6);
}
:where(.ui-button-variant-default) {
  background: var(--openbot-surface-light);
  color: var(--openbot-text-on-light);
}
:where(.ui-button-variant-outline) {
  border-color: var(--openbot-border);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-secondary);
}
:where(.ui-button-variant-secondary) {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}
:where(.ui-button-variant-ghost) {
  background: transparent;
  color: var(--openbot-text-muted);
}
:where(.ui-button-variant-destructive) {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
}
:where(.ui-button-variant-destructive-ghost) {
  background: transparent;
  color: var(--openbot-text-muted);
}
:where(.ui-button-variant-link) {
  height: auto;
  border-radius: var(--openbot-radius-xs);
  background: transparent;
  padding: 0;
  color: var(--openbot-text-primary);
  text-underline-offset: 4px;
}
@media (hover: hover) and (pointer: fine) and (min-width: 601px) {
  :where(.ui-button-variant-default):hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-surface-light);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--openbot-surface-light) 82%, transparent);
    }
  }
  :where(.ui-button-variant-outline):hover:not(:disabled):not([data-disabled]), :where(.ui-button-variant-ghost):hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-bg-control-hover);
    color: var(--openbot-text-primary);
  }
  :where(.ui-button-variant-secondary):hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-bg-control-active);
  }
  :where(.ui-button-variant-destructive):hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-danger-soft-hover);
    color: var(--openbot-danger);
  }
  :where(.ui-button-variant-destructive-ghost):hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-danger-soft);
    color: var(--openbot-danger);
  }
  :where(.ui-button-variant-link):hover:not(:disabled):not([data-disabled]) {
    text-decoration: underline;
  }
}
:where(.ui-button-variant-outline, .ui-button-variant-secondary, .ui-button-variant-ghost)[aria-expanded="true"] {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}
:where(.ui-button):focus-visible {
  outline: 0;
  box-shadow: var(--openbot-focus-ring);
}
:where(.ui-button-variant-destructive):focus-visible {
  border-color: var(--openbot-danger-focus);
}
:where(.ui-button-variant-destructive, .ui-button-variant-destructive-ghost):focus-visible {
  box-shadow: 0 0 0 3px var(--openbot-danger-focus);
}
:where(.ui-button)[aria-invalid="true"] {
  border-color: var(--openbot-danger-border);
  box-shadow: 0 0 0 3px var(--openbot-danger-focus);
}
:where(.ui-button):disabled, :where(.ui-button)[data-disabled] {
  cursor: default;
  opacity: 0.42;
  pointer-events: none;
}
.ui-button-full {
  width: 100%;
}
:where(.ui-icon-button) {
  padding: 0;
}
:where(.ui-button-size-icon-xs) {
  width: var(--openbot-control-xs);
  height: var(--openbot-control-xs);
  padding: 0;
}
:where(.ui-button-size-icon-sm) {
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  padding: 0;
}
:where(.ui-button-size-icon) {
  width: var(--openbot-control-lg);
  height: var(--openbot-control-lg);
  padding: 0;
}
:where(.ui-button-size-icon-lg) {
  width: var(--openbot-control-xl);
  height: var(--openbot-control-xl);
  padding: 0;
}
:where(.ui-icon-button) svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
:where(.ui-button-size-icon-xs) svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.ui-removable-image {
  position: relative;
}
.ui-image-remove-button {
  position: absolute;
  z-index: 1;
  top: -8px;
  right: -8px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface-raised);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-bg-surface-raised) 72%, transparent);
  }
  backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  opacity: 0;
  scale: 0.9;
  transition: opacity var(--openbot-duration-hover) ease, scale var(--openbot-duration-hover) ease, background-color var(--openbot-duration-hover) ease;
}
.ui-removable-image:hover > .ui-image-remove-button, .ui-removable-image:focus-within > .ui-image-remove-button {
  opacity: 1;
  scale: 1;
}
@media (hover: none) {
  .ui-image-remove-button {
    opacity: 1;
    scale: 1;
  }
}
:where(.z-badge) {
  width: fit-content;
  height: 22px;
  min-width: 0;
  display: inline-flex;
  overflow: hidden;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-1);
  border: 1px solid transparent;
  border-radius: var(--openbot-radius-pill);
  padding: var(--openbot-space-0-5) var(--openbot-space-2);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
  transition: border-color var(--openbot-duration-fast) var(--openbot-ease-out), background-color var(--openbot-duration-fast) var(--openbot-ease-out), color var(--openbot-duration-fast) var(--openbot-ease-out);
  white-space: nowrap;
}
:where(.z-badge) > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
:where(.z-badge) > svg {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  pointer-events: none;
}
:where(.z-badge):has(> [data-icon="inline-start"]) {
  padding-left: var(--openbot-space-1-5);
}
:where(.z-badge):has(> [data-icon="inline-end"]) {
  padding-right: var(--openbot-space-1-5);
}
:where(.z-badge-variant-default) {
  background: var(--openbot-accent);
  color: var(--openbot-text-primary);
}
:where(.z-badge-variant-secondary) {
  background: var(--openbot-bg-control);
  color: var(--openbot-text-secondary);
}
:where(.z-badge-variant-outline) {
  border-color: var(--openbot-border-strong);
  background: transparent;
  color: var(--openbot-text-secondary);
}
:where(.z-badge-variant-ghost) {
  background: transparent;
  color: var(--openbot-text-secondary);
}
:where(.z-badge-variant-link) {
  background: transparent;
  color: var(--openbot-accent-text);
  text-decoration: underline;
  text-underline-offset: 4px;
}
:where(.z-badge-variant-primary-light) {
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
}
:where(.z-badge-variant-success-light) {
  background: var(--openbot-success-soft);
  color: var(--openbot-success);
}
:where(.z-badge-variant-warning-light) {
  background: var(--openbot-warning-soft);
  color: var(--openbot-warning);
}
:where(.z-badge-variant-destructive), :where(.z-badge-variant-destructive-light) {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
}
:where(.z-badge-variant-new) {
  background: var(--openbot-badge-new-soft);
  color: var(--openbot-badge-new);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: 0.01em;
}
:where(.z-badge-variant-info-light) {
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
}
:where(.z-badge-variant-primary-outline) {
  border-color: var(--openbot-border-strong);
  background: transparent;
  color: var(--openbot-accent-text);
}
:where(.z-badge-variant-success-outline) {
  border-color: var(--openbot-border-strong);
  background: transparent;
  color: var(--openbot-success);
}
:where(.z-badge-variant-warning-outline) {
  border-color: var(--openbot-border-strong);
  background: transparent;
  color: var(--openbot-warning);
}
:where(.z-badge-variant-destructive-outline) {
  border-color: var(--openbot-border-strong);
  background: transparent;
  color: var(--openbot-danger);
}
:where(.z-badge-variant-info-outline) {
  border-color: var(--openbot-border-strong);
  background: transparent;
  color: var(--openbot-accent-text);
}
:where(.ui-glyph-20) {
  stroke-width: calc(var(--openbot-icon-stroke) * 20 / 24);
}
:where(.ui-glyph-16) {
  stroke-width: calc(var(--openbot-icon-stroke) * 16 / 24);
}
:where(.ui-checkbox) {
  position: relative;
  display: inline-flex;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
}
.ui-checkbox-input {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
}
.ui-checkbox-visual {
  display: inline-flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-bg-control);
  color: transparent;
}
.ui-checkbox-input:checked + .ui-checkbox-visual {
  border-color: var(--openbot-accent);
  background: var(--openbot-accent);
  color: var(--openbot-text-primary);
}
.ui-checkbox-input:focus-visible + .ui-checkbox-visual {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}
.ui-checkbox-visual svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  stroke-width: 2.5;
}
:where(.ui-input, .ui-textarea, .ui-native-select) {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  outline: 0;
  background: var(--openbot-bg-control);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  transition: background-color var(--openbot-duration-hover) ease, border-color var(--openbot-duration-hover) ease, box-shadow var(--openbot-duration-hover) ease;
}
:where(.ui-input, .ui-native-select)[data-size="sm"] {
  height: var(--openbot-control-sm);
  padding-inline: var(--openbot-space-2);
}
:where(.ui-input, .ui-native-select)[data-size="md"] {
  height: var(--openbot-control-md);
  padding-inline: var(--openbot-space-3);
}
:where(.ui-input, .ui-native-select)[data-size="lg"] {
  height: var(--openbot-control-lg);
  padding-inline: var(--openbot-space-3);
}
:where(.ui-textarea) {
  min-height: 76px;
  resize: vertical;
  padding: var(--openbot-space-2) var(--openbot-space-3);
}
:where(.ui-textarea)::-webkit-resizer {
  background-color: var(--openbot-bg-control);
  background-image: linear-gradient( 135deg, transparent 46%, var(--openbot-text-muted) 46% 50%, transparent 50% 62%, var(--openbot-text-muted) 62% 66%, transparent 66% );
  background-repeat: no-repeat;
  background-position: 100% 100%;
  background-size: 50% 50%;
}
:where(.ui-input, .ui-textarea)::placeholder {
  color: var(--openbot-text-placeholder);
}
:where(.ui-input, .ui-textarea, .ui-native-select):focus-visible {
  border-color: var(--openbot-border-focus);
  box-shadow: var(--openbot-focus-ring);
}
:where(.ui-input, .ui-textarea, .ui-native-select)[aria-invalid="true"] {
  border-color: var(--openbot-danger);
}
:where(.ui-input, .ui-textarea, .ui-native-select):disabled {
  cursor: not-allowed;
  opacity: 0.42;
}
.ui-select {
  width: 100%;
  min-width: 0;
}
.ui-select-trigger {
  width: 100%;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-1-5);
  cursor: pointer;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  outline: 0;
  background: transparent;
  padding: var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-2) 10px;
  box-shadow: 0 1px 2px var(--openbot-shadow-popover-ambient);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  text-align: left;
  transition: background-color var(--openbot-duration-hover) ease, border-color var(--openbot-duration-hover) ease, box-shadow var(--openbot-duration-hover) ease;
}
.ui-select-trigger[data-size="sm"] {
  height: var(--openbot-control-md);
  font-size: var(--openbot-text-sm);
}
.ui-select-trigger[data-size="md"] {
  height: var(--openbot-control-lg);
}
.ui-select-trigger[data-expanded] {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-hover);
}
.ui-select .ui-select-trigger:focus-visible {
  border-color: var(--openbot-border-strong);
  outline: 0;
  box-shadow: 0 0 0 3px var(--openbot-hover);
}
.ui-select-trigger[data-disabled] {
  cursor: not-allowed;
  opacity: 0.42;
}
.ui-select-trigger[aria-invalid="true"] {
  border-color: var(--openbot-danger);
  box-shadow: 0 0 0 3px var(--openbot-danger-soft);
}
@media (hover: hover) and (pointer: fine) {
  .ui-select-trigger:hover:not([data-disabled]) {
    background: var(--openbot-hover);
  }
}
.ui-select-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-select-trigger-icon {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: var(--openbot-text-muted);
}
.ui-select-trigger-icon svg {
  width: 100%;
  height: 100%;
}
.ui-select-content {
  z-index: var(--openbot-layer-popover);
  max-height: 320px;
  min-width: 144px;
  overflow: hidden auto;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface-raised);
  box-shadow: 0 4px 6px -1px var(--openbot-shadow-popover-ambient), 0 2px 4px -2px var(--openbot-shadow-popover-ambient), 0 0 0 1px var(--openbot-border-strong);
  color: var(--openbot-text-primary);
  transform-origin: var(--kb-select-content-transform-origin);
  animation: ui-select-content-in var(--openbot-duration-dialog) var(--openbot-ease-out) both;
}
.ui-select-listbox {
  margin: 0;
  padding: var(--openbot-space-1);
  outline: 0;
}
.ui-select-item {
  position: relative;
  display: flex;
  align-items: center;
  cursor: default;
  user-select: none;
  border-radius: var(--openbot-radius-sm);
  outline: 0;
  padding: var(--openbot-space-1-5) var(--openbot-space-8) var(--openbot-space-1-5) var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  transition: background-color var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease;
}
.ui-select-item[data-highlighted] {
  background: var(--openbot-hover);
  color: var(--openbot-text-primary);
}
.ui-select-item[data-selected] {
  background: transparent;
  color: var(--openbot-text-primary);
}
.ui-select-item[data-selected][data-highlighted] {
  background: var(--openbot-hover);
}
.ui-select-item[data-disabled] {
  pointer-events: none;
  opacity: 0.42;
}
.ui-select-item-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-select-item-indicator {
  position: absolute;
  right: var(--openbot-space-2);
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
}
.ui-select-item-indicator svg {
  width: 100%;
  height: 100%;
}
@keyframes ui-select-content-in {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ui-select-content {
    animation-name: ui-select-content-fade-in;
  }
}
@keyframes ui-select-content-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.ui-field {
  display: grid;
  gap: var(--openbot-space-1-5);
}
.ui-label {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
}
.ui-field-required, .ui-field-error {
  color: var(--openbot-danger);
}
.ui-field-required {
  margin-left: var(--openbot-space-0-5);
}
.ui-field-description, .ui-field-error {
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.ui-field-description {
  color: var(--openbot-text-muted);
}
.ui-switch {
  --ui-switch-thumb-size: var(--openbot-switch-thumb);
  --ui-switch-inset: var(--openbot-switch-inset);
  --ui-switch-travel: calc(var(--openbot-switch-width) - var(--ui-switch-thumb-size) - (var(--ui-switch-inset) * 2));
  position: relative;
  z-index: 0;
  width: var(--openbot-switch-width);
  height: var(--openbot-switch-height);
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  outline: none;
  background: var(--openbot-bg-control);
  box-shadow: inset 0 0 0 1px var(--openbot-border-strong), 0 1px 2px var(--openbot-shadow-ring);
  transition: background-color var(--openbot-duration-hover) ease, box-shadow var(--openbot-duration-hover) ease, opacity var(--openbot-duration-hover) ease;
}
.ui-switch[data-size="sm"] {
  --ui-switch-thumb-size: var(--openbot-switch-sm-thumb);
  --ui-switch-inset: var(--openbot-switch-sm-inset);
  --ui-switch-travel: calc(var(--openbot-switch-sm-width) - var(--ui-switch-thumb-size) - (var(--ui-switch-inset) * 2));
  width: var(--openbot-switch-sm-width);
  height: var(--openbot-switch-sm-height);
}
.ui-switch[data-checked] {
  background: var(--openbot-surface-light);
}
.ui-switch[data-invalid] {
  box-shadow: 0 0 0 3px var(--openbot-danger-focus);
}
.ui-switch:not([data-pointer-focus]):has(.ui-switch-input:focus-visible) {
  box-shadow: var(--openbot-focus-ring);
}
.ui-switch[data-invalid]:not([data-pointer-focus]):has(.ui-switch-input:focus-visible) {
  box-shadow: 0 0 0 3px var(--openbot-danger-focus);
}
.ui-switch-field {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
}
.ui-switch-copy {
  min-width: 0;
  display: grid;
  gap: var(--openbot-space-0-5);
}
.ui-switch-label {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
  cursor: pointer;
}
.ui-switch-description {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.ui-switch-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.ui-switch-control {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: inherit;
  cursor: pointer;
}
.ui-switch-control[data-dragging] {
  cursor: grabbing;
}
.ui-switch-thumb {
  position: absolute;
  top: 50%;
  left: 0;
  width: var(--ui-switch-thumb-size);
  height: var(--ui-switch-thumb-size);
  display: block;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-primary);
  box-shadow: 0 1px 2px var(--openbot-shadow-ring);
  transform: translate3d( calc(var(--ui-switch-inset) + (var(--ui-switch-position, 0) * var(--ui-switch-travel))), -50%, 0 ) scale(var(--ui-switch-scale-x, 1), var(--ui-switch-scale-y, 1));
  transform-origin: center;
  will-change: transform;
  transition: background-color var(--openbot-duration-fast) var(--openbot-ease-out);
}
.ui-switch-thumb[data-checked] {
  background: var(--openbot-text-on-light);
}
.ui-slider-field {
  width: 100%;
  display: grid;
  gap: var(--openbot-space-1-5);
}
.ui-slider-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--openbot-space-3);
}
.ui-slider-label {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
}
.ui-slider-value {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  line-height: var(--openbot-leading-sm);
}
.ui-slider-description {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.ui-slider-track {
  position: relative;
  height: 4px;
  margin-block: var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-border-strong);
  cursor: pointer;
}
.ui-slider-track::before {
  content: "";
  position: absolute;
  inset: -10px 0;
}
.ui-slider-fill {
  position: absolute;
  height: 100%;
  border-radius: inherit;
  background: var(--openbot-text-secondary);
}
.ui-slider-thumb {
  top: calc(50% - (var(--openbot-switch-thumb) / 2));
  width: var(--openbot-switch-thumb);
  height: var(--openbot-switch-thumb);
  display: block;
  border-radius: var(--openbot-radius-pill);
  outline: none;
  background: var(--openbot-text-primary);
  box-shadow: 0 1px 2px var(--openbot-shadow-ring);
  cursor: grab;
}
.ui-slider-thumb:focus-visible {
  box-shadow: var(--openbot-focus-ring);
}
.ui-slider-thumb[data-dragging] {
  cursor: grabbing;
}
.ui-seek-slider {
  display: flex;
  touch-action: none;
}
.ui-seek-slider-track {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.ui-seek-slider-picture {
  display: flex;
}
.ui-seek-slider[data-disabled] .ui-seek-slider-track {
  cursor: default;
}
.ui-seek-slider-thumb {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  display: block;
  border-radius: var(--openbot-radius-pill);
  outline: none;
  background: var(--openbot-text-primary);
  opacity: 0;
}
.ui-seek-slider-track:hover .ui-seek-slider-thumb, .ui-seek-slider-thumb:focus-visible, .ui-seek-slider-thumb[data-dragging] {
  opacity: 1;
}
.ui-seek-slider-thumb:focus-visible {
  box-shadow: var(--openbot-focus-ring);
}
.ui-slider-field[data-disabled] {
  opacity: 0.5;
}
.ui-slider-field[data-disabled] .ui-slider-track, .ui-slider-field[data-disabled] .ui-slider-thumb {
  cursor: not-allowed;
}
.ui-switch[data-disabled] {
  opacity: 0.5;
}
.ui-switch[data-disabled] .ui-switch-control {
  cursor: not-allowed;
}
.ui-card {
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-surface);
}
.ui-item-group {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-surface);
}
.ui-item-group[data-surface="subtle"] {
  background: var(--openbot-bg-control);
}
.ui-item-group > :not(:first-child) {
  border-top: 1px solid var(--openbot-border);
}
.ui-item {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  padding-inline: var(--openbot-space-4);
}
.ui-item[data-size="compact"] {
  min-height: 52px;
  padding-block: var(--openbot-space-2);
}
.ui-item[data-size="default"] {
  min-height: 64px;
  padding-block: var(--openbot-space-3);
}
.ui-item[data-size="spacious"] {
  min-height: 72px;
  padding-block: var(--openbot-space-4);
}
.ui-item-media, .ui-item-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}
.ui-item-media {
  color: var(--openbot-text-muted);
}
.ui-item-content {
  min-width: 0;
  display: grid;
  flex: 1 1 auto;
  gap: var(--openbot-space-0-5);
}
.ui-item-title {
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-item-description {
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-item-actions {
  justify-content: flex-end;
  gap: var(--openbot-space-2);
}
.ui-item.ui-dynamic-island-identity {
  min-width: 0;
  width: 100%;
  min-height: 43px;
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: 0;
}
.dynamic-island-external .ui-dynamic-island-identity {
  grid-template-columns: 38px minmax(0, 1fr) auto;
}
.ui-dynamic-island-identity-avatar {
  width: 35px;
  height: 35px;
}
.dynamic-island-external .ui-dynamic-island-identity-avatar {
  width: 38px;
  height: 38px;
}
.ui-dynamic-island-identity-copy {
  gap: 2px;
}
.ui-dynamic-island-identity-title {
  display: flex;
  align-items: baseline;
  gap: var(--openbot-space-1);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-sm);
}
.ui-dynamic-island-identity-name {
  min-width: 0;
  max-width: 26ch;
  overflow: hidden;
  flex: 0 1 auto;
  color: var(--openbot-island-identity-name);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-dynamic-island-identity-status {
  flex: 0 0 auto;
  color: var(--openbot-text-secondary);
}
.ui-dynamic-island-identity-description {
  display: -webkit-box;
  overflow: hidden;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-sm);
  overflow-wrap: anywhere;
  text-wrap: pretty;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.ui-dynamic-island-identity-trailing {
  align-self: start;
  padding-top: 2px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  line-height: var(--openbot-leading-sm);
  white-space: nowrap;
}
.ui-questionnaire {
  min-width: 0;
  display: grid;
  gap: var(--openbot-space-3);
}
.ui-questionnaire-progress {
  color: var(--openbot-text-muted);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  line-height: var(--openbot-leading-sm);
}
.ui-questionnaire-item {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}
.ui-questionnaire-title {
  width: 100%;
  padding: 0;
  color: var(--openbot-text-primary);
}
.ui-questionnaire-description {
  margin: 0;
  color: var(--openbot-text-muted);
}
.ui-questionnaire-choices {
  min-width: 0;
  display: grid;
}
.ui-questionnaire-choice {
  position: relative;
  min-width: 0;
  display: block;
  cursor: pointer;
  outline: 0;
}
.ui-questionnaire-choice[data-disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}
.ui-questionnaire-choice-input {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: inherit;
  opacity: 0;
}
.ui-questionnaire-choice:focus-within {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: -2px;
}
.ui-questionnaire-error {
  margin: 0;
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.ui-questionnaire-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.ui-settings-section {
  display: grid;
  gap: var(--openbot-space-2);
}
.ui-settings-section-header {
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  padding-inline: var(--openbot-space-1);
}
.ui-settings-section-copy {
  min-width: 0;
  display: grid;
  gap: var(--openbot-space-1);
}
.ui-settings-section-heading {
  font-weight: var(--openbot-weight-regular);
}
.ui-settings-section-description {
  display: block;
}
.ui-settings-section-actions {
  min-width: 0;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--openbot-space-2);
}
.ui-qr-code {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-qr-background);
}
.ui-qr-code > * {
  grid-area: 1 / 1;
}
.ui-qr-code > img {
  width: 100%;
  height: 100%;
  display: block;
}
.ui-qr-code-mark {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  color: var(--openbot-text-on-light);
  visibility: hidden;
}
.ui-qr-code-mark[data-ready] {
  visibility: visible;
}
.ui-alert {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-3);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  padding: var(--openbot-space-3) var(--openbot-space-4);
  color: var(--openbot-text-muted);
}
.ui-alert[data-tone="success"] {
  border-color: var(--openbot-success-soft);
  background: var(--openbot-success-wash);
  color: var(--openbot-success);
}
.ui-alert[data-tone="warning"] {
  border-color: var(--openbot-warning-soft);
  background: var(--openbot-warning-soft);
  color: var(--openbot-warning);
}
.ui-alert[data-tone="danger"] {
  border-color: var(--openbot-danger-soft);
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
}
.ui-alert-icon {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}
.ui-alert-icon svg {
  width: 100%;
  height: 100%;
}
.ui-alert-content {
  min-width: 0;
  display: grid;
  gap: var(--openbot-space-0-5);
}
.ui-alert-title {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
}
.ui-alert-description {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.ui-alert[data-tone] .ui-alert-description {
  color: var(--openbot-text-secondary);
}
.ui-alert-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
}
.ui-progress {
  width: 100%;
}
.ui-progress-track {
  width: 100%;
  height: 3px;
  overflow: hidden;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-border-strong);
}
.ui-progress-fill {
  width: var(--kb-progress-fill-width, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--openbot-text-secondary);
  transition: width var(--openbot-duration-normal) var(--openbot-ease-out);
}
.ui-progress-fill[data-indeterminate] {
  width: 35%;
  animation: ui-progress-travel 1.4s var(--openbot-ease-in-out) infinite;
  transition: none;
}
@keyframes ui-progress-travel {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(286%);
  }
}
.ui-radial-progress {
  --ui-radial-progress-color: var(--openbot-accent);
  position: relative;
  display: grid;
  width: 104px;
  aspect-ratio: 1;
  place-items: center;
  color: var(--ui-radial-progress-color);
}
.ui-radial-progress[data-tone="warning"] {
  --ui-radial-progress-color: var(--openbot-warning);
}
.ui-radial-progress[data-tone="danger"] {
  --ui-radial-progress-color: var(--openbot-danger);
}
.ui-radial-progress-chart {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ui-radial-progress-track, .ui-radial-progress-indicator {
  fill: none;
}
.ui-radial-progress-track {
  stroke: var(--openbot-border-strong);
}
.ui-radial-progress-indicator {
  stroke: currentcolor;
  stroke-linecap: butt;
  transition: stroke-dasharray var(--openbot-duration-normal) var(--openbot-ease-out), stroke-dashoffset var(--openbot-duration-normal) var(--openbot-ease-out);
}
.ui-radial-progress-indicator[data-linecap="round"] {
  stroke-linecap: round;
}
.ui-radial-progress-content {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  color: var(--openbot-text-primary);
}
.ui-toaster[data-sonner-toaster][data-sonner-theme="dark"] {
  z-index: var(--openbot-layer-toast);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
  --normal-bg: var(--openbot-bg-surface-raised);
  --normal-bg-hover: var(--openbot-bg-control-hover);
  --normal-border: var(--openbot-border);
  --normal-border-hover: var(--openbot-border-focus);
  --normal-text: var(--openbot-text-primary);
  --border-radius: var(--openbot-radius-lg);
}
.ui-toaster [data-sonner-toast][data-styled="true"] {
  --ui-toast-tone: transparent;
  --ui-toast-motion-duration: var(--openbot-duration-toast-enter);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 0;
  row-gap: var(--openbot-space-2);
  min-height: var(--openbot-control-xl);
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border-color: transparent;
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface-raised);
  box-shadow: 0 0 0 1px var(--openbot-border), var(--openbot-shadow-raised);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  transition: transform var(--ui-toast-motion-duration) var(--openbot-ease-out), opacity var(--ui-toast-motion-duration) var(--openbot-ease-out), height var(--ui-toast-motion-duration) var(--openbot-ease-out), box-shadow var(--openbot-duration-normal) ease;
}
.ui-toaster [data-sonner-toast][data-styled="true"][data-removed="true"] {
  --ui-toast-motion-duration: var(--openbot-duration-toast-exit);
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-content] {
  grid-area: 1 / 2 / 2 / -1;
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-button] {
  grid-row: 2;
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-cancel] {
  grid-column: 2;
  justify-self: end;
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-action] {
  grid-column: 3;
}
.ui-toaster.ui-toaster-closeable [data-sonner-toast][data-styled="true"] [data-content], .ui-toaster [data-sonner-toast][data-styled="true"]:has([data-close-button]) [data-content] {
  padding-right: var(--openbot-space-6);
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-title] {
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-description] {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-wrap: pretty;
}
.ui-error-reference {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
  margin-top: var(--openbot-space-0-5);
  color: var(--openbot-text-muted);
}
.ui-error-reference-code {
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-xs);
  line-height: var(--openbot-leading-sm);
  user-select: text;
  overflow-wrap: anywhere;
}
.ui-toaster [data-sonner-toast][data-type="success"] {
  --ui-toast-tone: var(--openbot-success);
}
.ui-toaster [data-sonner-toast][data-type="info"] {
  --ui-toast-tone: var(--openbot-accent-text);
}
.ui-toaster [data-sonner-toast][data-type="warning"] {
  --ui-toast-tone: var(--openbot-warning);
}
.ui-toaster [data-sonner-toast][data-type="error"] {
  --ui-toast-tone: var(--openbot-danger);
}
.ui-toaster [data-sonner-toast][data-type="loading"] {
  --ui-toast-tone: var(--openbot-text-muted);
}
.ui-toaster [data-sonner-toast][data-type="success"] [data-icon], .ui-toaster [data-sonner-toast][data-type="info"] [data-icon], .ui-toaster [data-sonner-toast][data-type="warning"] [data-icon], .ui-toaster [data-sonner-toast][data-type="error"] [data-icon], .ui-toaster [data-sonner-toast][data-type="loading"] [data-icon] {
  color: var(--ui-toast-tone);
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-icon] {
  grid-area: 1 / 1;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  margin: 1px var(--openbot-space-3) 0 0;
}
.ui-toast-icon {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: var(--openbot-icon-stroke);
}
.ui-toast-loading-icon {
  animation: ui-spin 720ms linear infinite;
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-button] {
  height: var(--openbot-control-md);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control-hover);
  box-shadow: inset 0 0 0 1px var(--openbot-border);
  padding-inline: var(--openbot-space-3);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  transition: background-color var(--openbot-duration-normal) ease, color var(--openbot-duration-normal) ease, transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-cancel] {
  background: transparent;
  color: var(--openbot-text-secondary);
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-button]:focus-visible, .ui-toaster [data-sonner-toast]:focus-visible {
  outline: 0;
  box-shadow: var(--openbot-focus-ring);
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-close-button]:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 1px var(--openbot-border-strong), 0 0 0 2px var(--openbot-border-strong);
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-close-button] {
  top: var(--openbot-space-1);
  right: var(--openbot-space-1);
  left: auto;
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  color: var(--openbot-text-muted);
  pointer-events: auto;
  opacity: 1;
  transform: scale(1);
  transition: background-color var(--openbot-duration-normal) ease, box-shadow var(--openbot-duration-normal) ease, color var(--openbot-duration-normal) ease, opacity var(--openbot-duration-normal) ease, transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-close-button]::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--openbot-control-xl);
  height: var(--openbot-control-xl);
  content: "";
  transform: translate(-50%, -50%);
}
@media (hover: hover) and (pointer: fine) {
  .ui-toaster [data-sonner-toast][data-styled="true"] [data-close-button] {
    pointer-events: none;
    opacity: 0;
  }
  .ui-toaster [data-sonner-toast][data-styled="true"]:hover [data-close-button], .ui-toaster [data-sonner-toast][data-styled="true"]:focus-within [data-close-button], .ui-toaster [data-sonner-toast][data-styled="true"] [data-close-button]:focus-visible {
    pointer-events: auto;
    opacity: 1;
  }
  .ui-toaster [data-sonner-toast][data-styled="true"] [data-button]:hover {
    background: var(--openbot-bg-control-active);
  }
  .ui-toaster [data-sonner-toast][data-styled="true"] [data-close-button]:hover:not(:focus-visible) {
    background: var(--openbot-danger-soft);
    color: var(--openbot-danger);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ui-progress-fill, .ui-radial-progress-indicator {
    animation: none;
    transition: none;
  }
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-button]:active {
  transform: scale(0.96);
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-close-button]:active {
  transform: scale(0.96);
}
.ui-separator[data-orientation="horizontal"] {
  width: 100%;
  height: 1px;
  background: var(--openbot-border);
}
.ui-separator[data-orientation="vertical"] {
  width: 1px;
  height: 100%;
  background: var(--openbot-border);
}
.ui-spinner {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  display: inline-block;
  flex: 0 0 auto;
  border: 1.5px solid var(--openbot-border-strong);
  border-top-color: currentColor;
  border-radius: var(--openbot-radius-pill);
  animation: ui-spin 720ms linear infinite;
}
.ui-spinner[data-size="sm"] {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.ui-spinner[data-size="lg"] {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
}
@keyframes ui-spin {
  to {
    transform: rotate(360deg);
  }
}
.ui-skeleton {
  min-height: var(--openbot-leading-md);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-control-hover);
  animation: ui-skeleton-pulse 1.2s ease-in-out infinite;
}
@keyframes ui-skeleton-pulse {
  50% {
    opacity: 0.56;
  }
}
.ui-kbd {
  min-width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-bg-control);
  padding-inline: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  line-height: 1;
}
.ui-tooltip {
  position: relative;
  z-index: var(--openbot-layer-tooltip);
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-canvas);
  box-shadow: 0 0 0 1px var(--openbot-border-strong), var(--openbot-shadow-raised);
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-sm);
  opacity: 1;
  pointer-events: none;
  transform: translateY(0) scale(1);
  transform-origin: bottom center;
  transition: opacity var(--openbot-duration-fast) ease, transform var(--openbot-duration-fast) var(--openbot-ease-out);
  @starting-style {
    opacity: 0;
    transform: translateY(2px) scale(0.96);
  }
}
.ui-tooltip::after {
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 8px;
  height: 8px;
  background: var(--openbot-bg-canvas);
  box-shadow: 1px 1px 0 var(--openbot-border-strong);
  content: "";
  transform: translateX(-50%) rotate(45deg);
}
.ui-tooltip[data-placement="bottom"] {
  transform-origin: top center;
}
.ui-tooltip[data-placement="bottom"]::after {
  top: -4px;
  bottom: auto;
  box-shadow: -1px -1px 0 var(--openbot-border-strong);
}
.ui-tooltip:is([data-placement="left"], [data-placement="right"])::after {
  top: 50%;
  bottom: auto;
}
.ui-tooltip[data-placement="left"] {
  transform-origin: center right;
}
.ui-tooltip[data-placement="left"]::after {
  right: -4px;
  left: auto;
  box-shadow: 1px -1px 0 var(--openbot-border-strong);
  transform: translateY(-50%) rotate(45deg);
}
.ui-tooltip[data-placement="right"] {
  transform-origin: center left;
}
.ui-tooltip[data-placement="right"]::after {
  left: -4px;
  box-shadow: -1px 1px 0 var(--openbot-border-strong);
  transform: translateY(-50%) rotate(45deg);
}
@media (prefers-reduced-motion: reduce) {
  .ui-button, .ui-switch, .ui-switch-thumb, .ui-tooltip {
    transition-property: background-color, border-color, color, opacity;
  }
  .ui-spinner, .ui-skeleton {
    animation-duration: 1.8s;
  }
  .ui-toaster [data-sonner-toast], .ui-toaster [data-sonner-toast] > * {
    transition-duration: 0.01ms;
  }
  .ui-toast-loading-icon {
    animation: none;
  }
}
.ui-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--openbot-layer-dialog);
  display: grid;
  place-items: center;
  padding: var(--openbot-space-6);
  background: var(--openbot-dialog-overlay);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: ui-dialog-overlay-in var(--openbot-duration-overlay) var(--openbot-ease-out);
  -webkit-app-region: no-drag;
}
.ui-dialog-content {
  border: 0;
  border-radius: var(--openbot-radius-card);
  box-shadow: 0 0 0 1px var(--openbot-dialog-ring);
}
.ui-dialog-content[data-dialog-surface="unstyled"] {
  border-radius: 0;
  box-shadow: none;
}
.ui-stable-label {
  display: inline-grid;
}
.ui-stable-label-text, .ui-stable-label-sizer {
  grid-area: 1 / 1;
}
.ui-stable-label-sizer {
  visibility: hidden;
}
.ui-confirm-dialog-overlay {
  z-index: calc(var(--openbot-layer-dialog-host) + 2);
}
.ui-dialog-content.ui-confirm-dialog {
  width: min(460px, 100%);
  max-height: calc(100dvh - 2 * var(--openbot-space-6));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  outline: 0;
  border-radius: var(--openbot-radius-xl);
  background: var(--openbot-bg-sidebar);
  color: var(--openbot-text-primary);
  border: 1px solid var(--openbot-dialog-ring);
  box-shadow: none;
  animation: ui-confirm-dialog-in var(--openbot-duration-slow) var(--openbot-ease-out);
}
.ui-confirm-dialog-main {
  min-height: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--openbot-space-4);
  overflow-y: auto;
  padding: var(--openbot-space-6);
}
.ui-confirm-dialog-icon {
  width: var(--openbot-control-xl);
  height: var(--openbot-control-xl);
  display: grid;
  place-items: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-secondary);
}
.ui-confirm-dialog-icon svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  stroke-width: var(--openbot-icon-stroke);
}
.ui-confirm-dialog[data-tone="destructive"] .ui-confirm-dialog-icon {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger-text);
}
.ui-confirm-dialog-media {
  display: grid;
  place-items: center;
}
.ui-confirm-dialog-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
  padding-top: var(--openbot-space-1-5);
}
.ui-confirm-dialog-title {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-xl);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-xl);
  letter-spacing: var(--openbot-tracking-tight);
  overflow-wrap: anywhere;
}
.ui-confirm-dialog-description {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
.ui-confirm-dialog-body {
  margin-top: var(--openbot-space-1);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.ui-confirm-dialog-body :where(ul, ol) {
  display: grid;
  gap: var(--openbot-space-1);
  margin: 0;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-3) var(--openbot-space-4) var(--openbot-space-3) var(--openbot-space-8);
  list-style: disc;
}
.ui-confirm-dialog-body :where(ol) {
  list-style: decimal;
}
.ui-confirm-dialog-body :where(li)::marker {
  color: var(--openbot-text-dim);
}
.ui-confirm-dialog-error.ui-alert {
  margin-top: var(--openbot-space-1);
  padding: var(--openbot-space-2) var(--openbot-space-3);
}
.ui-confirm-dialog-error .ui-alert-icon {
  color: var(--openbot-danger-text);
}
.ui-confirm-dialog-actions {
  display: flex;
  flex: 0 0 auto;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
  border-top: 1px solid var(--openbot-dialog-ring);
  padding: var(--openbot-space-4) var(--openbot-space-6);
}
.ui-confirm-dialog-actions .ui-button svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: var(--openbot-icon-stroke);
}
.ui-confirm-dialog-confirm.ui-button-variant-destructive {
  color: var(--openbot-danger-text);
}
@media (hover: hover) and (pointer: fine) {
  .ui-confirm-dialog-confirm.ui-button-variant-destructive:hover:not(:disabled):not([data-disabled]) {
    color: var(--openbot-danger-text);
  }
}
.ui-confirm-dialog-actions .ui-button:active:not(:disabled):not([data-disabled]) {
  transform: scale(0.97);
}
@keyframes ui-dialog-overlay-in {
  from {
    opacity: 0;
  }
}
@keyframes ui-confirm-dialog-in {
  from {
    opacity: 0;
    transform: scale(0.97) translateY(4px);
  }
}
@media (max-width: 560px) {
  .ui-confirm-dialog-overlay {
    padding: var(--openbot-space-3);
  }
  .ui-dialog-content.ui-confirm-dialog {
    max-height: calc(100dvh - 2 * var(--openbot-space-3));
  }
  .ui-confirm-dialog-main {
    padding: var(--openbot-space-4);
  }
  .ui-confirm-dialog-actions {
    padding: var(--openbot-space-3) var(--openbot-space-4);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ui-dialog-content.ui-confirm-dialog {
    animation-name: ui-dialog-overlay-in;
  }
  .ui-confirm-dialog-actions .ui-button:active {
    transform: none;
  }
}
.ui-bubble-group {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--openbot-space-2);
}
.ui-bubble {
  position: relative;
  display: flex;
  width: fit-content;
  min-width: 0;
  max-width: min(80%, 720px);
  flex-direction: column;
  align-self: flex-start;
  gap: var(--openbot-space-1);
  color: var(--openbot-text-primary);
}
.ui-bubble[data-align="end"] {
  align-self: flex-end;
}
.ui-bubble-content {
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--openbot-radius-bubble);
  padding: 8px 12px;
  font-size: var(--openbot-text-lg);
  line-height: 1.625;
  overflow-wrap: anywhere;
  transition: border-color var(--openbot-duration-hover) ease, background var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease;
}
button.ui-bubble-content, a.ui-bubble-content {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  transition: color var(--openbot-duration-hover) ease;
}
button.ui-bubble-content {
  cursor: pointer;
}
.ui-bubble-variant-default {
  color: var(--openbot-text-on-light);
}
.ui-bubble-variant-default > .ui-bubble-content {
  background: var(--openbot-surface-light);
}
.ui-bubble-variant-default .message-reply-context {
  border-left-color: var(--openbot-text-muted-on-light);
  color: var(--openbot-text-on-light);
}
.ui-bubble-variant-secondary > .ui-bubble-content {
  background: var(--openbot-bg-surface-raised);
}
.ui-bubble-variant-muted > .ui-bubble-content {
  background: var(--openbot-bg-surface);
}
.ui-bubble-variant-tinted {
  color: var(--openbot-accent-text);
}
.ui-bubble-variant-tinted > .ui-bubble-content {
  border-color: var(--openbot-accent-strong);
  background: var(--openbot-accent-soft);
}
.ui-bubble-variant-outline > .ui-bubble-content {
  border-color: var(--openbot-border-strong);
  background: transparent;
}
.ui-bubble-variant-ghost {
  width: fit-content;
  max-width: 100%;
  border-color: transparent;
  background: transparent;
}
.ui-bubble-variant-ghost > .ui-bubble-content {
  width: fit-content;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.ui-bubble-variant-destructive {
  color: var(--openbot-danger);
}
.ui-bubble-variant-destructive > .ui-bubble-content {
  border-color: var(--openbot-danger-border);
  background: var(--openbot-danger-soft);
}
.ui-bubble-reactions {
  position: absolute;
  z-index: 1;
  display: flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: var(--openbot-space-1);
  border: 0;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface);
  padding: 2px 6px;
  box-shadow: 0 0 0 3px var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
  white-space: nowrap;
  transition: background var(--openbot-duration-hover) ease, box-shadow var(--openbot-duration-hover) ease;
}
.ui-bubble-reactions:has(button) {
  padding: 0;
}
.ui-bubble-reactions-side-top {
  top: 0;
  translate: 0 -75%;
}
.ui-bubble-reactions-side-bottom {
  bottom: 0;
  translate: 0 75%;
}
.ui-bubble-reactions-align-start {
  left: var(--openbot-space-3);
}
.ui-bubble-reactions-align-end {
  right: var(--openbot-space-3);
}
.ui-bubble-reaction-overflow {
  color: var(--openbot-text-primary);
  font: inherit;
}
.ui-marker {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
}
.ui-marker-content {
  display: flex;
  min-width: 0;
  align-items: center;
}
.ui-marker-icon {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
}
.ui-message-group {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--openbot-space-1);
}
.ui-message {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: flex-end;
  gap: var(--openbot-space-2);
}
.ui-message[data-align="end"] {
  flex-direction: row-reverse;
}
.ui-message-avatar {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  align-self: flex-end;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
}
.ui-message-content {
  display: flex;
  width: 100%;
  min-width: 0;
  max-width: 720px;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--openbot-space-1);
  overflow-wrap: anywhere;
}
.ui-message[data-align="end"] > .ui-message-content {
  align-items: flex-end;
}
.ui-message-header, .ui-message-footer {
  display: flex;
  max-width: 100%;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: 0 var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
}
.ui-message[data-align="end"] .ui-message-footer {
  justify-content: flex-end;
}
.ui-toast-layer {
  pointer-events: auto;
}
.otp-input {
  display: grid;
  gap: 10px;
  justify-items: center;
}
.otp-input-fieldset {
  position: relative;
  width: max-content;
  max-width: 100%;
  margin: 0;
  border: 0;
  padding: 0;
}
.otp-input .otp-input-native {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 0;
  color: transparent;
  caret-color: transparent;
  cursor: text;
  opacity: 0;
}
.otp-input .otp-input-native:focus {
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
}
.otp-input-slots {
  --otp-slot-size: 34px;
  --otp-slot-height: 50px;
  --otp-slot-gap: 6px;
  --otp-group-gap: 8px;
  position: relative;
  display: flex;
  gap: var(--otp-slot-gap);
}
.otp-input-slot, .otp-input-focus-ring {
  width: var(--otp-slot-size);
  height: var(--otp-slot-height);
  border-radius: var(--openbot-radius-md);
}
.otp-input-slot {
  position: relative;
  display: grid;
  flex: 0 0 var(--otp-slot-size);
  place-items: center;
  border: 1px solid var(--otp-slot-border, var(--openbot-border-strong));
  background: var(--otp-slot-background, var(--openbot-bg-control));
  box-shadow: var(--otp-slot-shadow, none);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-xl);
  font-weight: var(--openbot-weight-semibold);
  line-height: 1;
  transition: border-color var(--openbot-duration-hover) ease, background-color var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease;
}
.otp-input-slot[data-filled="true"] {
  background: var(--otp-slot-filled-background, var(--otp-slot-background, var(--openbot-bg-control)));
}
.otp-input-slot[data-group-start="true"] {
  margin-left: var(--otp-group-gap);
}
.otp-input-focus-ring {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  border: 1px solid var(--openbot-border-focus);
  box-shadow: var(--openbot-focus-ring);
  opacity: 0;
  pointer-events: none;
  transform: translateX( calc(var(--otp-active-index) * (var(--otp-slot-size) + var(--otp-slot-gap)) + var(--otp-group-offset)) );
  transition: transform var(--openbot-duration-hover) var(--openbot-ease-out), opacity var(--openbot-duration-hover) ease;
}
.otp-input-focus-ring[data-visible="true"] {
  opacity: 1;
}
.otp-input-character {
  position: relative;
  z-index: 1;
  animation: otp-character-enter var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.otp-input-caret {
  position: absolute;
  z-index: 2;
  top: calc((var(--otp-slot-height) - 24px) / 2);
  left: 50%;
  width: 1px;
  height: 24px;
  background: var(--openbot-text-primary);
  animation: otp-caret-blink 1s steps(1, end) infinite;
  transform: translateX(-50%);
}
.otp-input-caret[data-trailing="true"] {
  margin-left: 7px;
}
.otp-input[data-size="compact"] {
  container-type: inline-size;
  justify-items: start;
}
.otp-input[data-size="compact"] .otp-input-slots {
  --otp-slot-height: 48px;
  --otp-slot-gap: var(--openbot-space-2);
  --otp-group-gap: 14px;
  --otp-slot-size: min(
    var(--openbot-control-xl),
    calc((100cqw - (var(--otp-length) - 1) * var(--otp-slot-gap) - var(--otp-group-gap)) / var(--otp-length))
  );
}
.otp-input[data-status="verifying"] .otp-input-slot {
  color: var(--openbot-text-secondary);
}
.otp-input[data-status="error"] .otp-input-slot {
  border-color: var(--openbot-danger);
  background: var(--openbot-danger-soft);
}
.otp-input[data-status="error"] .otp-input-focus-ring {
  border-color: var(--openbot-danger);
  box-shadow: 0 0 0 3px var(--openbot-danger-soft);
}
.otp-input[data-status="success"] .otp-input-slot {
  border-color: var(--openbot-success);
  background: var(--openbot-success-soft);
  color: var(--openbot-success);
}
.otp-input-success {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  overflow: visible;
  color: var(--openbot-success);
}
.otp-input-success path {
  fill: none;
  stroke: currentcolor;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  animation: otp-check-draw 350ms var(--openbot-duration-fast) var(--openbot-ease-out) forwards;
}
.otp-input-message {
  min-height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 17px;
  text-align: center;
}
.otp-input[data-status="error"] .otp-input-message {
  color: var(--openbot-danger);
}
.otp-input[data-status="success"] .otp-input-message {
  color: var(--openbot-success);
}
.otp-input[data-size="compact"] .otp-input-message {
  justify-content: flex-start;
  text-align: start;
}
@keyframes otp-character-enter {
  from {
    filter: blur(2px);
    opacity: 0;
    transform: translateY(9px);
  }
}
@keyframes otp-check-draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes otp-caret-blink {
  50% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .otp-input-slot, .otp-input-focus-ring {
    transition: none;
  }
  .otp-input-character, .otp-input-caret, .otp-input-success path {
    animation: none;
  }
  .otp-input-success path {
    stroke-dashoffset: 0;
  }
}
@keyframes t-digit-pop-in {
  0% {
    transform: translate( calc(var(--digit-distance) * var(--digit-dir-x)), calc(var(--digit-distance) * var(--digit-dir-y)) );
    opacity: 0;
    filter: blur(var(--digit-blur));
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
    filter: blur(0);
  }
}
.t-digit-group {
  display: inline-flex;
  align-items: baseline;
}
.t-digit {
  display: inline-block;
  will-change: transform, opacity, filter;
}
.t-digit-group.is-animating .t-digit {
  animation: t-digit-pop-in var(--digit-dur) var(--digit-ease) both;
}
.t-digit-group.is-animating .t-digit[data-stagger="1"] {
  animation-delay: var(--digit-stagger);
}
.t-digit-group.is-animating .t-digit[data-stagger="2"] {
  animation-delay: calc(var(--digit-stagger) * 2);
}
@media (prefers-reduced-motion: reduce) {
  .t-digit-group .t-digit {
    animation: none !important;
  }
}
.t-input {
  transition: border-color var(--openbot-duration-normal) ease-out;
  will-change: transform;
}
.t-input.is-error {
  transition: border-color var(--revert-dur, 280ms) ease-out;
}
.t-error-msg {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--revert-dur, 280ms) ease-out, visibility 0s linear var(--revert-dur, 280ms);
}
.t-input-wrap.is-error .t-error-msg {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--revert-dur, 280ms) ease-out, visibility 0s linear 0s;
}
.t-input.is-shaking {
  animation: t-input-shake calc(var(--shake-dur-a) * 2 + var(--shake-dur-b) * 2) linear;
}
@keyframes t-input-shake {
  0% {
    transform: translateX(0);
    animation-timing-function: var(--shake-ease);
  }
  28.57% {
    transform: translateX(var(--shake-distance));
    animation-timing-function: var(--shake-ease);
  }
  57.14% {
    transform: translateX(calc(var(--shake-distance) * -1));
    animation-timing-function: var(--shake-ease);
  }
  78.57% {
    transform: translateX(var(--shake-overshoot));
    animation-timing-function: var(--shake-ease);
  }
  100% {
    transform: translateX(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .t-input {
    animation: none !important;
    transform: none !important;
  }
}
.t-modal {
  transform-origin: center;
  transform: scale(var(--modal-scale));
  opacity: 0;
  pointer-events: none;
  transition: transform var(--modal-open-dur) var(--modal-ease), opacity var(--modal-open-dur) var(--modal-ease);
  will-change: transform, opacity;
}
.t-modal.is-open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
.t-modal.is-closing {
  transform: scale(var(--modal-scale-close));
  opacity: 0;
  pointer-events: none;
  transition: transform var(--modal-close-dur) var(--modal-ease), opacity var(--modal-close-dur) var(--modal-ease);
}
@media (prefers-reduced-motion: reduce) {
  .t-modal {
    transition: none !important;
  }
}
.t-page-slide {
  position: relative;
}
.t-page-slide .t-page[data-page-id="1"] {
  --t-page-from-x: calc(var(--page-slide-distance) * -1);
}
.t-page-slide .t-page[data-page-id="2"] {
  --t-page-from-x: var(--page-slide-distance);
}
.t-page-slide .t-page {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateX(calc(var(--t-page-from-x, 0px) * var(--page-exit-enabled)));
  filter: blur(calc(var(--page-blur) * var(--page-exit-enabled)));
  transition: opacity var(--page-fade-dur) var(--page-fade-ease), transform var(--page-slide-dur) var(--page-slide-ease), filter var(--page-slide-dur) var(--page-slide-ease);
  will-change: opacity, transform, filter;
}
.t-page-slide[data-page="1"] .t-page[data-page-id="1"], .t-page-slide[data-page="2"] .t-page[data-page-id="2"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
  filter: blur(0);
  transition-delay: var(--page-stagger);
}
@media (prefers-reduced-motion: reduce) {
  .t-page-slide .t-page {
    transition: none !important;
  }
}
.t-text-swap {
  display: inline-block;
  transform: translateY(0);
  filter: blur(0);
  opacity: 1;
  transition: transform var(--text-swap-dur) var(--text-swap-ease), filter var(--text-swap-dur) var(--text-swap-ease), opacity var(--text-swap-dur) var(--text-swap-ease);
  will-change: transform, filter, opacity;
}
.t-text-swap.is-exit {
  transform: translateY(calc(var(--text-swap-translate-y) * -1));
  filter: blur(var(--text-swap-blur));
  opacity: 0;
}
.t-text-swap.is-enter-start {
  transform: translateY(var(--text-swap-translate-y));
  filter: blur(var(--text-swap-blur));
  opacity: 0;
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .t-text-swap {
    transition: none !important;
  }
}
.t-resize {
  transition: width var(--resize-dur) var(--resize-ease), height var(--resize-dur) var(--resize-ease);
  will-change: width, height;
}
@media (prefers-reduced-motion: reduce) {
  .t-resize {
    transition: none !important;
  }
}
.t-panel-slide {
  transform: translate(var(--panel-translate-x), var(--panel-translate-y));
  opacity: 0;
  filter: blur(var(--panel-blur));
  pointer-events: none;
  transition: transform var(--panel-close-dur) var(--panel-ease), opacity var(--panel-close-dur) var(--panel-ease), filter var(--panel-close-dur) var(--panel-ease);
  will-change: transform, opacity, filter;
}
.t-panel-slide[data-open="true"] {
  transform: translate(0, 0);
  opacity: 1;
  filter: blur(0);
  pointer-events: auto;
  transition: transform var(--panel-open-dur) var(--panel-ease), opacity var(--panel-open-dur) var(--panel-ease), filter var(--panel-open-dur) var(--panel-ease);
}
@media (prefers-reduced-motion: reduce) {
  .t-panel-slide {
    transition: none !important;
  }
}
.t-acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--acc-collapse) var(--acc-ease);
}
.t-acc[data-open="true"] .t-acc-panel {
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--acc-expand) var(--acc-ease);
}
.t-acc-panel-inner {
  overflow: hidden;
  opacity: 0;
  filter: blur(2px);
  transition: opacity var(--acc-collapse) var(--acc-ease), filter var(--acc-collapse) var(--acc-ease);
}
.t-acc[data-open="true"] .t-acc-panel-inner {
  opacity: 1;
  filter: blur(0);
  transition: opacity var(--acc-expand) var(--acc-ease), filter var(--acc-expand) var(--acc-ease);
}
@media (prefers-reduced-motion: reduce) {
  .t-acc-panel, .t-acc-panel-inner {
    transition: none !important;
  }
}
.ui-sliding-tabs {
  --sliding-tabs-duration: 250ms;
  --sliding-tabs-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-tabs-bar-bg);
  box-shadow: inset 0 0 0 1px var(--openbot-border);
  padding: 3px;
}
.ui-sliding-tabs-trigger {
  position: relative;
  z-index: 1;
  height: var(--openbot-control-sm);
  appearance: none;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  outline: 0;
  background: transparent;
  padding: 4px var(--openbot-space-3);
  color: var(--openbot-text-muted);
  font: inherit;
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-sm);
  font-weight: var(--openbot-weight-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--sliding-tabs-duration) var(--sliding-tabs-ease);
}
.ui-sliding-tabs-trigger[aria-selected="true"], .ui-sliding-tabs-trigger:not([aria-selected="true"]):hover {
  color: var(--openbot-text-primary);
}
.ui-sliding-tabs-trigger:focus-visible {
  box-shadow: var(--openbot-focus-ring);
}
.ui-sliding-tabs-trigger:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}
.ui-sliding-tabs-pill {
  position: absolute;
  top: 3px;
  left: 0;
  z-index: 0;
  width: 0;
  height: var(--openbot-control-sm);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-tabs-pill-bg);
  pointer-events: none;
  transition: transform var(--sliding-tabs-duration) var(--sliding-tabs-ease), width var(--sliding-tabs-duration) var(--sliding-tabs-ease);
  will-change: transform, width;
}
.ui-sliding-tabs-pill:is([data-initializing], [data-resizing]) {
  transition: none;
}
.ui-sliding-tabs-content-slot {
  --sliding-tabs-content-duration: 150ms;
  --sliding-tabs-content-distance: 4px;
  --sliding-tabs-content-blur: 2px;
  min-width: 0;
  display: grid;
}
.ui-sliding-tabs-content {
  min-width: 0;
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  filter: blur(var(--sliding-tabs-content-blur));
  transform: translateY(var(--sliding-tabs-content-distance));
  pointer-events: none;
  transition: transform var(--sliding-tabs-content-duration) ease-in-out, filter var(--sliding-tabs-content-duration) ease-in-out, opacity var(--sliding-tabs-content-duration) ease-in-out, visibility 0s linear var(--sliding-tabs-content-duration);
  will-change: transform, filter, opacity;
}
.ui-sliding-tabs-content[data-selected] {
  opacity: 1;
  visibility: visible;
  filter: blur(0);
  transform: translateY(0);
  pointer-events: auto;
  transition: transform var(--sliding-tabs-content-duration) ease-in-out, filter var(--sliding-tabs-content-duration) ease-in-out, opacity var(--sliding-tabs-content-duration) ease-in-out, visibility 0s linear;
}
@media (prefers-reduced-motion: reduce) {
  .ui-sliding-tabs-pill, .ui-sliding-tabs-trigger, .ui-sliding-tabs-content {
    transition: none;
  }
}
:root {
  --ui-menu-radius: var(--openbot-radius-card);
  --ui-menu-padding: var(--openbot-space-1-5);
  --ui-menu-item-radius: calc(var(--ui-menu-radius) - var(--ui-menu-padding) + var(--openbot-space-0-5));
  --ui-menu-inset: calc(var(--openbot-space-2) + var(--openbot-space-0-5));
  --ui-menu-bg: var(--openbot-bg-sheet);
  --ui-menu-edge: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --ui-menu-edge: color-mix(in srgb, var(--openbot-text-primary) 11%, transparent);
  }
  --ui-menu-highlight: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --ui-menu-highlight: color-mix(in srgb, var(--openbot-text-primary) 5%, transparent);
  }
  --ui-menu-shadow: var(--openbot-bg-notch);
  @supports (color: color-mix(in lab, red, red)) {
    --ui-menu-shadow: color-mix(in srgb, var(--openbot-bg-notch) 45%, transparent);
  }
  --ui-menu-item-hover: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --ui-menu-item-hover: color-mix(in srgb, var(--openbot-text-primary) 6%, transparent);
  }
  --ui-menu-row-highlight: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --ui-menu-row-highlight: color-mix(in srgb, var(--openbot-text-primary) 6%, var(--ui-menu-bg));
  }
  --ui-menu-panel-shadow: inset 0 1px 0 var(--ui-menu-highlight), 0 0 0 1px var(--ui-menu-edge), 0 4px 6px -1px var(--ui-menu-shadow),
    0 2px 4px -2px var(--ui-menu-shadow);
  --ui-menu-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ui-menu-duration: 150ms;
  --ui-submenu-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ui-submenu-duration: var(--openbot-duration-slow);
}
.ui-popover-menu-surface {
  border: 0;
  border-radius: var(--openbot-radius-md);
  outline: 0;
  background: var(--openbot-bg-control);
  box-shadow: 0 0 0 1px var(--openbot-border), 0 4px 6px -1px var(--openbot-shadow-popover-ambient), 0 2px 4px -2px var(--openbot-shadow-popover-ambient);
  color: var(--openbot-text-primary);
}
.ui-action-menu {
  position: relative;
  z-index: var(--openbot-layer-popover);
  width: max-content;
  min-width: 192px;
  max-width: min(288px, calc(100vw - var(--openbot-space-4)));
  overflow: hidden;
  border: 0;
  border-radius: var(--ui-menu-radius);
  outline: 0;
  background: var(--ui-menu-bg);
  box-shadow: var(--ui-menu-panel-shadow);
  padding: var(--ui-menu-padding);
  color: var(--openbot-text-primary);
  transform-origin: var(--kb-menu-content-transform-origin, var(--kb-popover-content-transform-origin));
  animation: ui-menu-in var(--ui-menu-duration) var(--ui-menu-ease) both;
}
.ui-action-menu:not([data-expanded]) {
  animation: ui-menu-out var(--ui-menu-duration) var(--ui-menu-ease) both;
}
.ui-action-menu[aria-labelledby*="sub-trigger"] {
  animation-duration: var(--ui-submenu-duration);
  animation-timing-function: var(--ui-submenu-ease);
}
.ui-action-menu:not([data-menu-layout="grid"]) :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]) {
  display: flex;
  width: 100%;
  height: var(--openbot-control-md);
  min-height: var(--openbot-control-md);
  align-items: center;
  justify-content: flex-start;
  gap: var(--openbot-space-2);
  border: 0;
  border-radius: var(--ui-menu-item-radius);
  outline: 0;
  background: transparent;
  padding: var(--openbot-space-1-5) var(--ui-menu-inset);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-lg);
  text-align: left;
  white-space: nowrap;
  transition: background-color var(--openbot-duration-hover) var(--openbot-ease-out), color var(--openbot-duration-hover) var(--openbot-ease-out);
}
.ui-action-menu:not([data-menu-layout="grid"]) :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]) > span:not(:has(svg), .ui-menu-trailing) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui-action-menu:not([data-menu-layout="grid"]) :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]):is( :hover, :focus-visible, [data-highlighted], [aria-expanded="true"] ) {
  background: var(--ui-menu-item-hover);
  color: var(--openbot-text-primary);
}
.ui-action-menu:not([data-menu-layout="grid"]) :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"])[data-disabled] {
  color: var(--openbot-text-muted);
  cursor: default;
  opacity: 0.45;
}
.ui-action-menu:not([data-menu-layout="grid"]) :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]) > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  color: var(--openbot-text-secondary);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ui-action-menu:not([data-menu-layout="grid"]) :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]) > svg:not(.ui-glyph-20, .ui-glyph-16) {
  stroke-width: var(--openbot-icon-stroke);
}
.ui-action-menu > hr, .ui-action-menu [role="separator"] {
  height: 1px;
  margin: var(--ui-menu-padding) calc(var(--ui-menu-padding) * -1);
  border: 0;
  background: var(--openbot-border);
}
.ui-action-menu:not([data-menu-layout="grid"]) :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]).ui-action-menu-danger, .ui-action-menu:not([data-menu-layout="grid"]) :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]).ui-action-menu-danger > svg {
  color: var(--openbot-danger);
}
.ui-action-menu:not([data-menu-layout="grid"]) :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]).ui-action-menu-danger:is( :hover, :focus-visible, [data-highlighted] ) {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
}
.ui-menu-label {
  padding: var(--openbot-space-1-5) var(--ui-menu-inset);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.ui-menu-check {
  display: grid;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--openbot-text-primary) 22%, transparent);
  }
  border-radius: var(--openbot-radius-pill);
  transition: background-color var(--ui-menu-duration) ease-out, border-color var(--ui-menu-duration) ease-out;
}
.ui-menu-check[data-checked] {
  border-color: transparent;
  background: var(--openbot-text-primary);
}
.ui-action-menu:not([data-menu-layout="grid"]) :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]) > .ui-menu-check > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke: var(--ui-menu-bg);
  stroke-width: 2.5;
}
.ui-menu-trailing {
  margin-left: auto;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.ui-action-menu:not([data-menu-layout="grid"]) :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]) > svg.ui-menu-trailing {
  color: var(--openbot-text-muted);
}
.ui-action-menu .agent-context-icon {
  color: var(--openbot-text-muted);
}
.ui-action-menu .agent-context-icon > * {
  fill: currentColor;
  fill-opacity: 0;
}
.ui-action-menu [class~="lucide-chart-area"] > path:first-child, .ui-action-menu [class~="lucide-bell-off"] > path:nth-child(3), .ui-action-menu [class~="lucide-app-window"] > path, .ui-action-menu [class~="lucide-bot"] > *, .ui-action-menu [class~="lucide-calendar-clock"] > * {
  fill: none;
}
.ui-action-menu :is(:hover, [data-highlighted], [aria-expanded="true"]) > .agent-context-icon {
  color: var(--openbot-text-primary);
}
.ui-action-menu :is(:hover, [data-highlighted], [aria-expanded="true"]) > .agent-context-icon > * {
  fill-opacity: 1;
}
.ui-action-menu :is(:hover, [data-highlighted], [aria-expanded="true"]) > [class~="lucide-app-window"] > path, .ui-action-menu :is(:hover, [data-highlighted], [aria-expanded="true"]) > .ui-glyph-20:has(> rect + rect + circle) > circle {
  fill: var(--ui-menu-row-highlight);
  stroke: var(--ui-menu-row-highlight);
}
.ui-motion-tooltip-trigger {
  display: flex;
}
.ui-motion-tooltip {
  z-index: var(--openbot-layer-tooltip);
  transform-origin: var(--kb-tooltip-content-transform-origin);
  animation: ui-menu-in var(--ui-submenu-duration) var(--ui-submenu-ease) both;
}
.ui-motion-tooltip:not([data-expanded]) {
  animation: ui-menu-out var(--ui-submenu-duration) var(--ui-submenu-ease) both;
}
.ui-motion-tooltip:is([data-menu-hold], [data-menu-moving], [data-menu-swap-out]) {
  overflow: hidden;
}
.ui-motion-tooltip-label {
  overflow: hidden;
  max-width: min(240px, calc(100vw - var(--openbot-space-4)));
  border-radius: var(--openbot-radius-md);
  background: var(--ui-menu-bg);
  box-shadow: var(--ui-menu-panel-shadow);
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
  overflow-wrap: anywhere;
  pointer-events: none;
}
.ui-motion-tooltip-label > span {
  display: block;
}
.ui-action-menu:is([data-menu-hold], [data-menu-swap-in], [data-menu-swap-out]), .ui-motion-tooltip:is([data-menu-hold], [data-menu-swap-in], [data-menu-swap-out]) {
  animation: none;
}
.ui-action-menu[data-menu-handoff], .ui-motion-tooltip[data-menu-handoff] {
  animation: none;
  opacity: 0;
}
.ui-action-menu[data-menu-swap-out], .ui-motion-tooltip[data-menu-swap-out] {
  background: transparent;
  box-shadow: none;
}
@keyframes ui-menu-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
}
@keyframes ui-menu-out {
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ui-action-menu, .ui-action-menu:not([data-expanded]), .ui-motion-tooltip, .ui-motion-tooltip:not([data-expanded]) {
    animation: none;
  }
  .ui-menu-check {
    transition: none;
  }
}
.dynamic-island {
  --dynamic-island-notch-width: 192px;
  --dynamic-island-notch-height: 32px;
  --dynamic-island-compact-width: 268px;
  --dynamic-island-expanded-width: 420px;
  --dynamic-island-hover-width-growth: 32px;
  --dynamic-island-hover-height-growth: 8px;
  --dynamic-island-hover-hit-top: 6px;
  --dynamic-island-hover-hit-bottom: 6px;
  --dynamic-island-hover-retention-bottom: 6px;
  --dynamic-island-hover-retention-inline-growth: 24px;
  --dynamic-island-shoulder-size: 6px;
  --dynamic-island-expanded-shoulder-size: 19px;
  --dynamic-island-bottom-radius: 14px;
  --dynamic-island-external-compact-radius: 16px;
  --dynamic-island-external-expanded-radius: 24px;
  --dynamic-island-shared-duration: 450ms;
  --dynamic-island-shared-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  display: flex;
  width: min(var(--dynamic-island-expanded-width), calc(100vw - var(--openbot-space-6)));
  height: fit-content;
  align-items: flex-start;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--openbot-text-primary);
  filter: drop-shadow(0 0 0 transparent);
  pointer-events: none;
  transition: filter var(--openbot-duration-normal) var(--openbot-ease-out);
}
.dynamic-island-shell {
  position: relative;
  display: block;
  width: fit-content;
  height: fit-content;
  overflow: clip;
  contain: layout paint;
  isolation: isolate;
  pointer-events: auto;
}
.dynamic-island[data-layout-state="expanded"] {
  --dynamic-island-shared-duration: 420ms;
  --dynamic-island-shoulder-size: 19px;
  --dynamic-island-bottom-radius: 24px;
}
.dynamic-island[data-layout-state="expanded"], .dynamic-island[data-hovered="true"] {
  filter: drop-shadow(0 0 10px var(--openbot-shadow-dynamic-island));
}
.dynamic-island-shell[data-resizing] {
  will-change: width, height;
}
.dynamic-island-size-target {
  position: relative;
  left: 50%;
  width: min(var(--dynamic-island-compact-width), calc(100vw - var(--openbot-space-6)));
  min-height: var(--dynamic-island-notch-height);
  transform: translateX(-50%);
}
.dynamic-island[data-layout-state="compact"][data-hovered="true"] .dynamic-island-size-target {
  width: min( calc(var(--dynamic-island-compact-width) + var(--dynamic-island-hover-width-growth)), calc(100vw - var(--openbot-space-6)) );
  min-height: calc(var(--dynamic-island-notch-height) + var(--dynamic-island-hover-height-growth));
}
.dynamic-island[data-layout-state="expanded"] .dynamic-island-size-target {
  width: min(var(--dynamic-island-expanded-width), calc(100vw - var(--openbot-space-6)));
  padding-top: var(--dynamic-island-notch-height);
}
.dynamic-island-silhouette {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
}
.dynamic-island-silhouette-body {
  position: absolute;
  inset: 0 var(--dynamic-island-shoulder-size);
  border-radius: 0 0 var(--dynamic-island-bottom-radius) var(--dynamic-island-bottom-radius);
  background: var(--openbot-bg-notch);
  box-shadow: inset 0 -1px 0 var(--openbot-shadow-ring);
  transition: box-shadow var(--openbot-duration-normal) var(--openbot-ease-out);
}
.dynamic-island-shoulder {
  position: absolute;
  top: 0;
  width: var(--dynamic-island-shoulder-size);
  height: var(--dynamic-island-shoulder-size);
  overflow: visible;
}
.dynamic-island-shoulder path {
  fill: var(--openbot-bg-notch);
}
.dynamic-island-shoulder-leading {
  left: 0;
}
.dynamic-island-shoulder-trailing {
  right: 0;
}
.dynamic-island-toggle {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  width: min(var(--dynamic-island-compact-width), calc(100vw - var(--openbot-space-6)));
  height: var(--dynamic-island-notch-height);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  border: 0;
  border-radius: inherit;
  background: transparent;
  padding: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  outline: none;
  transform: translateX(-50%);
}
.dynamic-island[data-pointer-toggle="false"] .dynamic-island-toggle {
  cursor: default;
}
.dynamic-island .dynamic-island-toggle:focus-visible {
  outline: none;
}
.dynamic-island-notch-safe-zone {
  width: var(--dynamic-island-notch-width);
  height: var(--dynamic-island-notch-height);
  pointer-events: none;
}
.dynamic-island-ear {
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  color: var(--openbot-text-secondary);
  transition: color var(--openbot-duration-normal) var(--openbot-ease-out);
}
.dynamic-island-ear-leading {
  justify-content: flex-end;
  padding-right: var(--openbot-space-2);
}
.dynamic-island-ear-trailing {
  justify-content: flex-start;
  padding-left: var(--openbot-space-2);
}
.dynamic-island:not(.dynamic-island-external):not(.dynamic-island-status) .dynamic-island-ear-leading {
  padding-right: 6px;
}
.dynamic-island-ear-content {
  position: relative;
  z-index: 3;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: center;
  transition: color var(--openbot-duration-normal) var(--openbot-ease-out), filter var(--openbot-duration-slow) var(--openbot-ease-out), opacity var(--openbot-duration-island-content) cubic-bezier(0.22, 1.08, 0.36, 1), transform var(--openbot-duration-island-content) cubic-bezier(0.22, 1.08, 0.36, 1);
}
.dynamic-island-shell[data-compact-resize] .dynamic-island-ear-content {
  filter: blur(calc(0.4px * var(--dynamic-island-compact-motion, 1)));
}
.dynamic-island-hover-content {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: center;
}
.dynamic-island-status .dynamic-island-hover-leading {
  width: 100%;
}
.dynamic-island-toggle:hover .dynamic-island-ear, .dynamic-island-toggle:focus-visible .dynamic-island-ear {
  color: var(--openbot-text-primary);
}
.dynamic-island-trailing-content {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  justify-content: center;
}
.dynamic-island-trailing-compact {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--openbot-duration-island-content) cubic-bezier(0.22, 1.08, 0.36, 1), transform var(--openbot-duration-island-content) cubic-bezier(0.22, 1.08, 0.36, 1);
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1);
}
.dynamic-island-status .dynamic-island-trailing-compact {
  right: auto;
  left: 0;
  justify-content: flex-start;
  transform-origin: left center;
}
.dynamic-island-external.dynamic-island-status .dynamic-island-trailing-compact {
  right: 0;
  left: auto;
  justify-content: flex-end;
  transform-origin: right center;
}
.dynamic-island[data-layout-state="expanded"] .dynamic-island-trailing-compact {
  pointer-events: none;
  opacity: 0;
  filter: none;
  transform: scale(0.92);
  transition-duration: var(--openbot-duration-island-content-exit);
  transition-timing-function: var(--dynamic-island-shared-ease);
}
.dynamic-island-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: var(--openbot-space-2) var(--openbot-space-4) var(--openbot-space-4);
}
.dynamic-island-panel[data-phase="leaving"] {
  position: absolute;
  top: var(--dynamic-island-notch-height);
  left: 50%;
  transform: translateX(-50%);
}
.dynamic-island-panel[data-phase="exiting"], .dynamic-island-panel[data-phase="leaving"] {
  pointer-events: none;
}
.dynamic-island-panel[data-phase="leaving"] {
  width: min(var(--dynamic-island-expanded-width), calc(100vw - var(--openbot-space-6)));
}
.dynamic-island-content {
  opacity: 1;
  filter: none;
  transform: scale(1);
  transform-origin: top center;
}
.dynamic-island[data-shared-leading="true"] .dynamic-island-ear-leading .dynamic-island-ear-content {
  opacity: 1;
  filter: none;
  transition: color var(--openbot-duration-normal) var(--openbot-ease-out), opacity var(--openbot-duration-island-content-exit) var(--dynamic-island-shared-ease);
}
.dynamic-island:not([data-shared-leading="true"])[data-layout-state="expanded"] .dynamic-island-ear-leading .dynamic-island-ear-content {
  opacity: 0;
  filter: none;
  transform: scale(0.92);
  transition-duration: var(--openbot-duration-normal), var(--openbot-duration-island-content-exit), var(--openbot-duration-island-content-exit);
  transition-timing-function: var(--openbot-ease-out), var(--dynamic-island-shared-ease), var(--dynamic-island-shared-ease);
}
.dynamic-island[data-layout-state="expanded"] .dynamic-island-ear-trailing .dynamic-island-ear-content {
  opacity: 1;
  filter: none;
  transform: none;
}
.dynamic-island-status .dynamic-island-trailing-compact {
  transform: scale(1);
  transition: opacity var(--openbot-duration-island-content) var(--dynamic-island-shared-ease);
}
.dynamic-island-status[data-layout-state="expanded"] .dynamic-island-trailing-compact {
  opacity: 0;
  transform: scale(1);
}
.dynamic-island-status .dynamic-island-trailing-content {
  transform-origin: left center;
}
.dynamic-island-status .dynamic-island-trailing-compact, .dynamic-island-status .dynamic-island-hover-trailing, .dynamic-island-status .dynamic-island-mode-swap[data-island-mode-slot="compact-trailing"] {
  width: max-content;
}
.dynamic-island-external.dynamic-island-status .dynamic-island-trailing-content {
  transform-origin: right center;
}
.dynamic-island-panel-wide {
  --dynamic-island-expanded-width: 590px;
}
.dynamic-island-idle .dynamic-island-ear-trailing {
  color: var(--openbot-text-primary);
  transition: none;
}
.dynamic-island.dynamic-island-idle:not(.dynamic-island-external) .dynamic-island-ear-leading {
  justify-content: flex-start;
  padding-right: 0;
  padding-left: var(--openbot-space-4);
}
.dynamic-island.dynamic-island-idle:not(.dynamic-island-external) .dynamic-island-ear-trailing {
  justify-content: flex-end;
  padding-right: var(--openbot-space-4);
  padding-left: 0;
}
.dynamic-island-hover-zone {
  position: absolute;
  top: calc(-1 * var(--dynamic-island-hover-hit-top));
  left: 50%;
  display: none;
  width: min(var(--dynamic-island-compact-width), calc(100vw - var(--openbot-space-6)));
  height: calc( var(--dynamic-island-notch-height) + var(--dynamic-island-hover-hit-top) + var(--dynamic-island-hover-hit-bottom) );
  pointer-events: auto;
  transform: translateX(-50%);
}
.dynamic-island[data-layout-state="compact"] > .dynamic-island-hover-zone {
  display: block;
}
.dynamic-island[data-layout-state="compact"][data-hovered="true"] > .dynamic-island-hover-zone {
  width: min( calc( var(--dynamic-island-compact-width) + var(--dynamic-island-hover-width-growth) + var(--dynamic-island-hover-retention-inline-growth) ), calc(100vw - var(--openbot-space-6)) );
  height: calc( var(--dynamic-island-notch-height) + var(--dynamic-island-hover-height-growth) + var(--dynamic-island-hover-hit-top) + var(--dynamic-island-hover-retention-bottom) );
}
.dynamic-island-status:not(.dynamic-island-external) .dynamic-island-ear-leading {
  justify-content: flex-start;
  padding-right: 0;
  padding-left: 12px;
}
.dynamic-island-status:not(.dynamic-island-external) .dynamic-island-ear-trailing {
  justify-content: flex-end;
  padding-right: 12px;
  padding-left: 0;
}
.dynamic-island-status:not(.dynamic-island-external) .dynamic-island-trailing-compact {
  right: 0;
  left: auto;
  justify-content: flex-end;
  transform-origin: right center;
}
.dynamic-island-status:not(.dynamic-island-external) .dynamic-island-trailing-content {
  transform-origin: right center;
}
.openbot-dynamic-island[data-layout-state="expanded"] .dynamic-island-panel, .openbot-dynamic-island .dynamic-island-panel[data-phase="exiting"], .openbot-dynamic-island .dynamic-island-panel[data-phase="leaving"] {
  padding: 14px calc(var(--dynamic-island-expanded-shoulder-size) + 20px) 20px;
}
.dynamic-island-external.openbot-dynamic-island[data-layout-state="expanded"] .dynamic-island-panel, .dynamic-island-external.openbot-dynamic-island .dynamic-island-panel[data-phase="exiting"], .dynamic-island-external.openbot-dynamic-island .dynamic-island-panel[data-phase="leaving"] {
  padding: 14px 20px 20px;
}
.openbot-dynamic-island.dynamic-island-working[data-layout-state="expanded"] .dynamic-island-panel, .openbot-dynamic-island.dynamic-island-working .dynamic-island-panel[data-phase="exiting"], .openbot-dynamic-island.dynamic-island-working .dynamic-island-panel[data-phase="leaving"] {
  padding-bottom: 14px;
}
.dynamic-island-external {
  --dynamic-island-notch-width: 16px;
  --dynamic-island-compact-width: 212px;
  --dynamic-island-external-inline-inset: 6px;
  padding-top: var(--dynamic-island-hover-hit-top);
}
.dynamic-island-external .dynamic-island-shoulder {
  display: none;
}
.dynamic-island-external .dynamic-island-silhouette {
  border-radius: var(--dynamic-island-external-compact-radius);
  background: var(--openbot-bg-notch);
  box-shadow: inset 0 -1px 0 var(--openbot-shadow-ring);
}
.dynamic-island-external .dynamic-island-silhouette-body {
  display: none;
}
.dynamic-island-external[data-layout-state="expanded"] .dynamic-island-silhouette {
  border-radius: var(--dynamic-island-external-expanded-radius);
}
.dynamic-island-shell:has(.dynamic-island-toggle:focus-visible) .dynamic-island-silhouette-body, .dynamic-island-external .dynamic-island-shell:has(.dynamic-island-toggle:focus-visible) .dynamic-island-silhouette {
  box-shadow: inset var(--openbot-focus-ring), inset 0 -1px 0 var(--openbot-shadow-ring);
}
.dynamic-island-external > .dynamic-island-hover-zone {
  top: 0;
}
.dynamic-island-external .dynamic-island-toggle {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-inline: var(--dynamic-island-external-inline-inset);
}
.dynamic-island-external .dynamic-island-notch-safe-zone {
  display: none;
}
.dynamic-island-external .dynamic-island-ear-leading {
  position: relative;
  left: 0;
  justify-content: flex-start;
  padding-right: 0;
}
.dynamic-island-external .dynamic-island-ear-trailing {
  justify-content: flex-end;
  padding-left: 0;
}
.dynamic-island-external.dynamic-island-panel-wide {
  --dynamic-island-expanded-width: 552px;
}
.dynamic-island-external.dynamic-island-status .dynamic-island-ear-leading {
  left: 0;
  justify-content: flex-start;
  padding-right: 0;
  padding-left: 0;
}
html:has(.dynamic-island-surface), body:has(.dynamic-island-surface), #root:has(.dynamic-island-surface) {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
}
.dynamic-island-surface {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  background: transparent;
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
  user-select: none;
}
.openbot-dynamic-island-transition-root {
  display: contents;
}
.dynamic-island-mode-swap {
  position: relative;
  min-width: 0;
  display: inline-grid;
  align-items: center;
}
.dynamic-island-mode-swap-block {
  width: 100%;
  display: grid;
  align-items: stretch;
}
.dynamic-island-mode-layer {
  min-width: 0;
  display: inline-flex;
  grid-area: 1 / 1;
  align-items: center;
  transform-origin: center;
}
.dynamic-island-mode-swap-block > .dynamic-island-mode-layer {
  width: 100%;
  display: block;
}
.dynamic-island-mode-layer-outgoing {
  position: absolute;
  z-index: 1;
  top: 0;
  pointer-events: none;
}
.dynamic-island-mode-swap[data-island-mode-slot="compact-leading"] > .dynamic-island-mode-layer-outgoing {
  right: 0;
}
.dynamic-island-external .dynamic-island-mode-swap[data-island-mode-slot="compact-leading"] > .dynamic-island-mode-layer-outgoing {
  right: auto;
  left: 0;
}
.dynamic-island-mode-swap[data-island-mode-slot="compact-trailing"] > .dynamic-island-mode-layer-outgoing {
  left: 0;
}
.dynamic-island-external .dynamic-island-mode-swap[data-island-mode-slot="compact-trailing"] > .dynamic-island-mode-layer-outgoing {
  right: 0;
  left: auto;
}
.dynamic-island-mode-swap-block > .dynamic-island-mode-layer-outgoing {
  inset: 0;
}
.openbot-dynamic-island-transition-root[data-mode-transitioning="true"] .dynamic-island-mode-layer {
  will-change: opacity, transform;
}
.openbot-dynamic-island-transition-root[data-mode-transitioning="true"] .dynamic-island-mode-layer[data-island-mode-layer="incoming"] {
  opacity: 0;
  transform: none;
}
.openbot-dynamic-island-transition-root[data-mode-transitioning="true"] .dynamic-island-mode-swap[data-island-mode-slot="expanded"] > .dynamic-island-mode-layer[data-island-mode-layer="incoming"] {
  transform: scale(0.965);
}
.openbot-dynamic-island-transition-root[data-mode-transitioning="true"] .dynamic-island[data-layout-state="expanded"] .dynamic-island-mode-swap[data-island-mode-slot="compact-leading"] > .dynamic-island-mode-layer[data-island-mode-layer="incoming"] {
  transform: none;
}
.openbot-dynamic-island-transition-root[data-mode-transitioning="true"] .dynamic-island-mode-layer[data-island-mode-layer="incoming"] [data-island-motion-content] {
  filter: blur(4px);
}
.dynamic-island-surface-anchor {
  width: fit-content;
  height: fit-content;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
}
.dynamic-island-surface-logo {
  width: 100%;
  height: 100%;
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-xs);
  transition: border-radius var(--openbot-duration-slow) var(--openbot-ease-out), filter var(--openbot-duration-slow) var(--openbot-ease-out), scale var(--openbot-duration-slow) var(--openbot-ease-out);
}
.dynamic-island-shell[data-compact-resize] .dynamic-island-surface-logo {
  --app-logo-eye-squint: calc(1 - 0.45 * var(--dynamic-island-compact-motion, 1));
  filter: blur(calc(0.8px * var(--dynamic-island-compact-motion, 1)));
  scale: calc(1 - 0.03 * var(--dynamic-island-compact-motion, 1));
}
.dynamic-island-shell[data-compact-motion="large"] .dynamic-island-surface-logo {
  border-radius: var(--openbot-radius-sm);
}
.dynamic-island-external.dynamic-island-idle .dynamic-island-surface-logo {
  transform: translateX(4px);
}
.dynamic-island-surface-leading-anchor {
  position: relative;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
}
.dynamic-island-idle .dynamic-island-trailing-content {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.dynamic-island-surface-idle-greeting {
  position: relative;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  display: block;
  flex: 0 0 auto;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  font-size: var(--openbot-text-xl);
  line-height: 1;
  transition: opacity var(--openbot-duration-slow) var(--openbot-ease-out), scale var(--openbot-duration-slow) var(--openbot-ease-out);
}
.dynamic-island-shell[data-compact-resize] .dynamic-island-surface-idle-greeting {
  opacity: calc(1 - 0.1 * var(--dynamic-island-compact-motion, 1));
}
.dynamic-island-shell[data-compact-settled] .dynamic-island-surface-idle-greeting {
  animation: dynamic-island-greeting-pop 600ms var(--dynamic-island-greeting-pop-ease);
}
.dynamic-island-shell {
  --dynamic-island-greeting-pop-ease: linear(
    0,
    0.571 4.2%,
    1.01 8.3%,
    1.306 12.5%,
    1.467 16.7%,
    1.517 20.8%,
    1.485 25.0%,
    1.403 29.2%,
    1.297 33.3%,
    1.188 37.5%,
    1.09 41.7%,
    1.013 45.8%,
    0.96 50.0%,
    0.928 54.2%,
    0.916 58.3%,
    0.919 62.5%,
    0.931 66.7%,
    0.947 70.8%,
    0.965 75.0%,
    0.982 79.2%,
    0.995 83.3%,
    1.005 87.5%,
    1.011 91.7%,
    1.013 95.8%,
    1
  );
}
@keyframes dynamic-island-greeting-pop {
  from {
    opacity: 0.9;
    scale: 0.98;
    rotate: -1deg;
  }
  to {
    opacity: 1;
    scale: 1;
    rotate: 0deg;
  }
}
.dynamic-island-surface-idle-greeting-layer {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 600ms var(--openbot-ease-in-out), scale 650ms var(--openbot-ease-in-out), filter 600ms var(--openbot-ease-in-out);
}
@media (prefers-reduced-motion: no-preference) {
  .dynamic-island-surface-idle-greeting-layer:not([data-active]) {
    scale: 0.88;
    filter: blur(2px);
  }
}
.dynamic-island-external.dynamic-island-idle .dynamic-island-surface-idle-greeting-layer {
  transform: translateX(-6px);
}
.dynamic-island-surface-idle-greeting[data-active-slot="0"] .dynamic-island-surface-idle-greeting-layer:first-child, .dynamic-island-surface-idle-greeting[data-active-slot="1"] .dynamic-island-surface-idle-greeting-layer:last-child {
  opacity: 1;
}
.dynamic-island-surface-idle-greeting-layer {
  perspective: 60px;
}
.dynamic-island-surface-idle-greeting-card {
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
}
.dynamic-island-surface-idle-greeting-face {
  grid-area: 1 / 1;
  backface-visibility: hidden;
}
.dynamic-island-surface-idle-greeting-face-back {
  transform: rotateY(180deg);
}
.dynamic-island-surface-idle-greeting-face:has(.dynamic-island-surface-idle-greeting-sparkle) {
  display: grid;
}
.dynamic-island-surface-idle-greeting-sparkle {
  grid-area: 1 / 1;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}
.dynamic-island-surface-idle-greeting-sparkle-large {
  transform-origin: 60% 48%;
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cpath%20d='M60%207.9Q70.3%2036.0%2094.2%2048Q70.3%2060.0%2060%2088.1Q49.7%2060.0%2025.8%2048Q49.7%2036.0%2060%207.9Z'/%3E%3C/svg%3E");
}
.dynamic-island-surface-idle-greeting-sparkle-upper {
  transform-origin: 24% 28%;
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cpath%20d='M24%207.4Q28.2%2021.8%2038.2%2028Q28.2%2034.2%2024%2048.6Q19.8%2034.2%209.8%2028Q19.8%2021.8%2024%207.4Z'/%3E%3C/svg%3E");
}
.dynamic-island-surface-idle-greeting-sparkle-lower {
  transform-origin: 36% 70%;
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cpath%20d='M36%2051.1Q40.8%2064.3%2051.9%2070Q40.8%2075.7%2036%2088.9Q31.2%2075.7%2020.1%2070Q31.2%2064.3%2036%2051.1Z'/%3E%3C/svg%3E");
}
.dynamic-island-surface-avatar-stack {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.dynamic-island-surface-avatar-stack-item {
  display: inline-flex;
  flex: 0 0 auto;
}
.dynamic-island-surface-avatar-stack > :not(:first-child) {
  margin-left: -6px;
}
.dynamic-island-surface-avatar-stack > * {
  transform: translate3d(0, 0, 0);
  transform-origin: center;
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out), transform 450ms var(--dynamic-island-shared-ease);
}
.dynamic-island-surface-avatar {
  --agent-avatar-optical-offset: -3px;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border: 1px solid var(--openbot-bg-notch);
  border-radius: var(--openbot-radius-pill);
}
.dynamic-island-surface-compact-identity {
  white-space: nowrap;
}
.dynamic-island-surface-compact-name {
  position: absolute;
  top: 50%;
  left: calc(100% + var(--openbot-space-1-5));
  width: max-content;
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-sm);
  text-align: left;
  text-overflow: ellipsis;
  transform: translateY(-50%);
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}
.dynamic-island-surface-status-badge {
  font-weight: var(--openbot-weight-semibold);
}
.dynamic-island-surface-status-badge-label {
  min-width: 0;
  display: inline-block;
  overflow: hidden;
}
.dynamic-island-surface-status-badge-icon {
  stroke-width: var(--openbot-icon-stroke);
}
.dynamic-island-surface-question-badge {
  background: var(--openbot-question-badge-soft);
  color: var(--openbot-question-badge-text);
}
.dynamic-island-surface-message-badge {
  background: var(--openbot-message-badge-soft);
  color: var(--openbot-message-badge-text);
}
.dynamic-island-surface-working-badge .ui-spinner {
  border-color: var(--openbot-success-soft);
  border-top-color: currentColor;
}
.dynamic-island[data-layout-state="expanded"] .dynamic-island-surface-compact-name {
  opacity: 0;
}
.dynamic-island-surface-leading-anchor .dynamic-island-surface-avatar {
  width: 100%;
  height: 100%;
}
.dynamic-island-surface-avatar-stack .dynamic-island-surface-avatar {
  width: 20px;
  height: 20px;
}
.dynamic-island-working[data-state="expanded"] .dynamic-island-surface-avatar-stack > * {
  transition-duration: var(--openbot-duration-fast), var(--dynamic-island-shared-duration);
}
.dynamic-island-working[data-state="expanded"] .dynamic-island-surface-avatar-stack > :nth-child(2) {
  transform: translate3d(-14px, 28.75px, 0);
}
.dynamic-island-working[data-state="expanded"] .dynamic-island-surface-avatar-stack > :nth-child(3) {
  transform: translate3d(-28px, 57.5px, 0);
}
@media (prefers-reduced-motion: reduce) {
  .dynamic-island-surface-avatar-stack > * {
    transition-duration: var(--openbot-duration-hover);
  }
}
.dynamic-island-surface-approval-badge {
  background: var(--openbot-approval-badge-soft);
  color: var(--openbot-warning);
}
.dynamic-island-surface-takeover-badge {
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
}
.dynamic-island-surface-content-swap {
  min-width: 0;
  display: flex;
}
.dynamic-island-surface-content-swap[data-swap-phase="update"] {
  animation: dynamic-island-surface-swap var(--text-swap-dur) var(--text-swap-ease) both;
}
.dynamic-island-surface-compact-swap {
  align-items: center;
}
.dynamic-island-surface-panel {
  display: grid;
  gap: 10px;
}
.dynamic-island-surface-list {
  display: grid;
  gap: 2px;
}
.dynamic-island-surface-row {
  min-width: 0;
  width: calc(100% + 2 * var(--openbot-space-2));
  height: auto;
  min-height: 44px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: var(--openbot-space-2);
  margin-inline: calc(-1 * var(--openbot-space-2));
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  color: inherit;
  cursor: pointer;
  font: inherit;
  outline: none;
  text-align: left;
  transition: background-color var(--openbot-duration-normal) var(--openbot-ease-out), transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.dynamic-island-surface-row .dynamic-island-surface-avatar, .dynamic-island-surface-working-avatar-slot {
  width: 32px;
  height: 32px;
}
@media (hover: hover) and (pointer: fine) {
  .dynamic-island-surface-row:hover {
    background: var(--openbot-hover);
  }
}
.dynamic-island-surface-row:active {
  transform: scale(0.98);
}
.dynamic-island-surface-row:focus-visible {
  background: var(--openbot-hover);
  box-shadow: inset 0 0 0 1px var(--openbot-border-focus), 0 0 0 3px var(--openbot-accent-soft);
}
.dynamic-island-surface-row-group {
  position: relative;
  min-width: 0;
}
.dynamic-island-surface-row-group:has(.dynamic-island-surface-row-stop) .dynamic-island-surface-row {
  padding-right: calc(var(--openbot-control-sm) + var(--openbot-space-2));
}
.dynamic-island-surface-row-stop {
  position: absolute;
  top: 50%;
  right: 0;
  color: var(--openbot-text-muted);
  transform: translateY(-50%);
}
@media (hover: hover) and (pointer: fine) {
  .dynamic-island-surface-row-stop:hover {
    color: var(--openbot-danger-text);
  }
}
.dynamic-island-surface-row-copy {
  min-width: 0;
  width: 100%;
  display: grid;
  gap: 1px;
}
.dynamic-island-surface-row strong {
  overflow: hidden;
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dynamic-island-surface-row small {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dynamic-island-message-first-panel {
  display: grid;
  gap: var(--openbot-space-3);
}
.dynamic-island-message-first-unread {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
  font-variant-numeric: tabular-nums;
  line-height: var(--openbot-leading-sm);
}
.dynamic-island-message-first-footer {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  border-top: 1px solid var(--openbot-border);
  padding-top: var(--openbot-space-2);
}
.dynamic-island-message-first-footer .ui-button {
  min-width: 92px;
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.dynamic-island-message-first-footer .ui-button:active {
  transform: scale(0.96);
}
.dynamic-island-message-first-footer svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.dynamic-island-surface-attention-panel {
  gap: var(--openbot-space-3);
}
.dynamic-island-reply {
  position: relative;
  min-width: 0;
  display: grid;
  gap: var(--openbot-space-1-5);
  margin: 0;
}
.dynamic-island-reply .dynamic-island-reply-input {
  height: var(--openbot-control-md);
  border-color: var(--openbot-border);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-hover);
  padding-right: calc(var(--openbot-control-md) + var(--openbot-space-1));
  padding-left: var(--openbot-space-3);
  font-size: var(--openbot-text-sm);
  user-select: text;
}
.dynamic-island-reply .dynamic-island-reply-input:focus-visible {
  border-color: var(--openbot-border-focus);
}
.dynamic-island-reply-send {
  position: absolute;
  top: calc((var(--openbot-control-md) - var(--openbot-control-xs)) / 2);
  right: calc((var(--openbot-control-md) - var(--openbot-control-xs)) / 2);
  border-radius: var(--openbot-radius-pill);
}
.dynamic-island-reply-send svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.dynamic-island-surface-question-step .dynamic-island-reply {
  margin-top: 6px;
}
.dynamic-island-surface-request-copy {
  min-width: 0;
  width: 100%;
  display: grid;
  gap: var(--openbot-space-2);
}
.dynamic-island-surface-command {
  min-width: 0;
  display: grid;
  gap: 3px;
  border-left: 1px solid var(--openbot-warning);
  padding: 2px 0 2px 10px;
}
.dynamic-island-surface-command-meta {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.dynamic-island-surface-command-meta small, .dynamic-island-surface-command-meta span {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dynamic-island-surface-command-meta small {
  flex: 0 0 auto;
}
.dynamic-island-surface-command-meta span {
  min-width: 0;
  text-align: right;
}
.dynamic-island-surface-command code {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dynamic-island-surface-context-line {
  min-width: 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--openbot-space-2);
  align-items: baseline;
}
.dynamic-island-surface-context-line small, .dynamic-island-surface-more {
  color: var(--openbot-text-dim);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
div.dynamic-island-surface-context-line span {
  overflow: hidden;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dynamic-island-surface-question-options {
  min-width: 0;
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dynamic-island-surface-question-options > li {
  min-width: 0;
}
.dynamic-island-surface-question-options button {
  width: 100%;
  min-height: 48px;
  min-width: 0;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: var(--openbot-space-2);
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-question-option-soft);
  padding: 7px 10px;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  outline: none;
  transition: background-color var(--openbot-duration-fast) var(--openbot-ease-out), transform var(--openbot-duration-fast) var(--openbot-ease-out);
}
.dynamic-island-surface-question-option-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.dynamic-island-surface-question-option-copy strong, .dynamic-island-surface-question-option-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dynamic-island-surface-question-option-copy strong {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
}
.dynamic-island-surface-question-option-copy small {
  min-width: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.dynamic-island-surface-question-option-index {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-question-option-hover);
  color: var(--openbot-question-option);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
@media (hover: hover) and (pointer: fine) {
  .dynamic-island-surface-question-options button:hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-question-option-hover);
  }
}
.dynamic-island-surface-question-options button:active:not(:disabled):not([data-disabled]) {
  background: var(--openbot-question-option-pressed);
  transform: scale(0.96);
}
.dynamic-island-surface-question-options button:focus-visible {
  box-shadow: inset 0 0 0 1px var(--openbot-question-option), 0 0 0 3px var(--openbot-question-option-soft);
}
.dynamic-island-surface-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-1);
  border-top: 1px solid var(--openbot-border);
  padding-top: var(--openbot-space-2);
}
.dynamic-island-surface-action-error {
  min-width: 0;
  margin: 0 auto 0 0;
  flex: 1 1 auto;
  align-self: center;
  color: var(--openbot-danger-text);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.dynamic-island-surface-actions svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.dynamic-island-surface-attention-panel .ui-button {
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.dynamic-island-surface-attention-panel .ui-button:active {
  transform: scale(0.96);
}
.dynamic-island-surface-question-panel {
  gap: 10px;
}
.dynamic-island-surface-question-progress {
  display: inline-flex;
  align-items: baseline;
  padding-top: 2px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  line-height: var(--openbot-leading-sm);
  white-space: nowrap;
}
.dynamic-island-surface-question-progress-stack {
  position: relative;
  width: 1.5em;
  display: inline-grid;
  overflow: hidden;
  text-align: right;
}
.dynamic-island-surface-question-progress-digit {
  grid-area: 1 / 1;
  display: inline-block;
  text-align: right;
  will-change: transform, opacity, filter;
}
.dynamic-island-surface-question-progress-digit.is-outgoing {
  position: absolute;
  inset: 0;
}
.dynamic-island-surface-question-step {
  width: 100%;
  min-width: 0;
}
.dynamic-island-surface-question-actions {
  align-items: center;
}
.dynamic-island-surface-question-actions .dynamic-island-surface-more {
  margin-right: auto;
}
.dynamic-island-surface-animated-row {
  animation: dynamic-island-surface-row-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}
.dynamic-island-surface-row-group:nth-child(2) .dynamic-island-surface-animated-row {
  animation-delay: 40ms;
}
.dynamic-island-surface-row-group:nth-child(3) .dynamic-island-surface-animated-row {
  animation-delay: 80ms;
}
@keyframes dynamic-island-surface-swap {
  from {
    opacity: 0;
    filter: blur(var(--text-swap-blur));
    transform: translateY(calc(var(--text-swap-translate-y) * -1)) scale(0.98);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}
@keyframes dynamic-island-surface-row-in {
  from {
    opacity: 0;
    filter: blur(var(--text-swap-blur));
    transform: translateY(var(--text-swap-translate-y)) scale(0.98);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}
.sidebar-mobile-app {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: var(--openbot-space-2);
  margin: var(--openbot-space-2) var(--openbot-space-3);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  padding: var(--openbot-space-3);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.sidebar-mobile-app-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-2);
}
.sidebar-mobile-app-header > strong {
  overflow: hidden;
  font-weight: var(--openbot-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-mobile-app-icon {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  color: var(--openbot-text-secondary);
}
.sidebar-mobile-app-dismiss {
  margin-right: calc(var(--openbot-space-1) * -1);
  color: var(--openbot-text-muted);
}
.sidebar-mobile-app-body {
  margin: 0;
  color: var(--openbot-text-muted);
}
.sidebar-mobile-app > .ui-button {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-community-actions {
  display: flex;
  gap: var(--openbot-space-1-5);
}
.sidebar-community-actions > .ui-button:first-child {
  flex: 1 1 auto;
  min-width: 0;
}
.sidebar-community-mark {
  flex: 0 0 auto;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
* {
  box-sizing: border-box;
}
html, body, #root {
  width: 100%;
  height: 100%;
  min-width: 0;
  margin: 0;
  overflow: hidden;
}
body {
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
  -webkit-font-smoothing: antialiased;
}
button, input, textarea {
  font: inherit;
}
.account-login-screen, .initial-setup-screen {
  position: absolute;
  z-index: var(--openbot-layer-dialog);
  inset: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow-y: auto;
  -webkit-app-region: drag;
}
.account-login-screen {
  padding: 32px 24px;
  background: var(--openbot-bg-canvas);
}
.initial-setup-screen {
  padding: 52px 24px 32px;
  background: radial-gradient(circle at 50% 18%, var(--openbot-hover), transparent 34%), var(--openbot-bg-canvas);
}
.account-login-shell {
  width: min(100%, 360px);
  display: flex;
  flex-direction: column;
  -webkit-app-region: no-drag;
}
.account-login-brand-lockup {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 24px;
  margin-bottom: 42px;
}
.account-login-logo {
  display: block;
  width: 80px;
  height: 80px;
}
.account-login-wordmark {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-display);
  font-weight: 620;
  letter-spacing: -0.015em;
  line-height: var(--openbot-leading-display);
}
.account-login {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: center;
}
.account-login h1 {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-3xl);
  font-weight: 580;
  letter-spacing: -0.035em;
  line-height: 30px;
}
.account-login-description {
  margin: 8px 0 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-lg);
  line-height: 21px;
}
.account-login-description strong {
  color: var(--openbot-text-primary);
  font-weight: 560;
}
.account-login-error {
  margin: 0;
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
  line-height: 17px;
  text-align: left;
}
.account-login > .account-login-error {
  margin-top: 18px;
}
.account-login-loader {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 28px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
}
.account-login-spinner, .account-login-button-spinner {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  border: 1.5px solid var(--openbot-border-strong);
  border-top-color: currentColor;
  border-radius: var(--openbot-radius-pill);
  animation: account-login-spin 900ms linear infinite;
}
.account-login-button-spinner {
  width: 13px;
  height: 13px;
}
.account-login-primary {
  width: 100%;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-surface-light);
  color: var(--openbot-text-on-light);
  font-size: var(--openbot-text-md);
  font-weight: 650;
  transition: background-color var(--openbot-duration-hover) ease, border-color var(--openbot-duration-hover) ease, transform var(--openbot-duration-fast) cubic-bezier(0.23, 1, 0.32, 1);
}
.account-login > .account-login-primary {
  margin-top: 30px;
}
@keyframes account-login-spin {
  to {
    transform: rotate(360deg);
  }
}
.account-login-form {
  width: 100%;
  display: grid;
  gap: 12px;
  margin-top: 24px;
}
.account-login-local-data {
  margin: 4px 0 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 17px;
  text-align: center;
  text-wrap: balance;
}
.account-login-local-data svg {
  display: inline-block;
  margin-right: 6px;
  vertical-align: -2px;
}
.account-login-email-field {
  display: grid;
  gap: 12px;
}
.account-login-form input:not(.otp-input-native) {
  width: 100%;
  height: 44px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  outline: 0;
  background: var(--openbot-bg-control);
  padding: 0 12px;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  transition: border-color var(--openbot-duration-hover) ease, background-color var(--openbot-duration-hover) ease, box-shadow var(--openbot-duration-hover) ease;
}
.account-login-form input:not(.otp-input-native):focus {
  border-color: var(--openbot-border-focus);
  background: var(--openbot-bg-surface);
  box-shadow: 0 0 0 3px var(--openbot-accent-soft);
}
.account-login-form input:not(.otp-input-native)[aria-invalid="true"] {
  border-color: var(--openbot-danger);
}
.account-login-form input:not(.otp-input-native)::placeholder {
  color: var(--openbot-text-placeholder);
}
.account-login-field-error {
  height: 16px;
  overflow: hidden;
  margin: -2px 0 0;
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-login-form input:not(.otp-input-native).t-input.is-error {
  border-color: var(--openbot-danger);
}
.account-login-primary:disabled, .account-login-primary[aria-disabled="true"], .account-login-code-action:disabled, .account-login-code-action[aria-disabled="true"] {
  cursor: default;
  opacity: 0.48;
}
.account-login-code-actions {
  width: 100%;
  min-height: var(--openbot-control-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.account-login-code-action {
  width: auto;
}
.account-login-code-action-change {
  justify-content: flex-start;
}
.account-login-code-action-resend {
  justify-content: flex-end;
}
.account-login-development-code {
  margin: 0;
  color: var(--openbot-warning);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--openbot-text-sm);
  line-height: 16px;
  text-align: left;
}
@media (hover: hover) and (pointer: fine) {
  .account-login-primary:hover:not(:disabled, [aria-disabled="true"]) {
    background: var(--openbot-text-primary);
  }
  .account-login-form input:not(.otp-input-native):hover:not(:focus) {
    border-color: var(--openbot-border-strong);
    background: var(--openbot-bg-surface);
  }
}
.account-login-primary:active:not(:disabled, [aria-disabled="true"]) {
  transform: scale(0.98);
}
.initial-setup {
  width: min(100%, 620px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  -webkit-app-region: no-drag;
}
.initial-setup-header {
  max-width: 560px;
}
.initial-setup-account-row {
  min-height: 28px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
}
.initial-setup-account {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.initial-setup-account i {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success);
  box-shadow: 0 0 0 3px var(--openbot-success-soft);
}
.initial-setup-signout, .initial-setup-back {
  border: 0;
  background: transparent;
  color: var(--openbot-text-muted);
}
.initial-setup-signout {
  margin-left: 2px;
  padding: 5px 7px;
  font-size: var(--openbot-text-sm);
}
.initial-setup-signout:hover, .initial-setup-back:hover {
  color: var(--openbot-text-secondary);
}
.initial-setup-back {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  margin-right: 3px;
  border-radius: var(--openbot-radius-pill);
  padding: 0;
}
.initial-setup-back:hover {
  background: var(--openbot-hover);
}
.initial-setup-back svg {
  width: 18px;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}
.initial-setup-eyebrow {
  margin: 0 0 9px;
  color: var(--text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.initial-setup h1 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--openbot-text-display);
  font-weight: 560;
  letter-spacing: -0.035em;
  line-height: 1.1;
}
.initial-setup-intro {
  max-width: 540px;
  margin: 12px 0 0;
  color: var(--text-secondary);
  font-size: var(--openbot-text-lg);
  line-height: 1.55;
}
.setup-route-list {
  display: grid;
  gap: 10px;
  margin-top: 30px;
  padding: 0;
  list-style: none;
}
.setup-route-button {
  width: 100%;
  min-height: 96px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 15px;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-canvas);
  padding: 15px 17px;
  color: var(--openbot-text-primary);
  text-align: left;
  transition: border-color var(--openbot-duration-hover) ease, background-color var(--openbot-duration-hover) ease, transform var(--openbot-duration-hover) ease;
}
.setup-route-button:hover {
  border-color: var(--openbot-text-dim);
  background: var(--openbot-bg-sidebar);
  transform: translateY(-1px);
}
.setup-route-button:active {
  transform: translateY(0);
  transition-duration: var(--openbot-duration-hover), var(--openbot-duration-hover), var(--openbot-duration-fast);
}
.setup-route-icon {
  position: relative;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-hover);
  color: var(--openbot-text-secondary);
}
.setup-route-icon svg {
  width: 23px;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}
.setup-route-icon i {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--openbot-bg-canvas);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
}
.setup-route-icon-local i {
  background: var(--openbot-success);
}
.setup-route-copy {
  display: grid;
  gap: 4px;
}
.setup-route-copy strong {
  font-size: var(--openbot-text-lg);
  font-weight: 600;
}
.setup-route-copy small {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 17px;
}
.setup-route-arrow {
  width: 19px;
  fill: none;
  stroke: var(--openbot-text-muted);
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--openbot-duration-hover) ease;
}
.setup-route-button:hover .setup-route-arrow {
  transform: translateX(2px);
}
.setup-local-content {
  margin-top: 28px;
}
.setup-remote-form {
  display: grid;
  gap: 15px;
  margin-top: 28px;
}
.setup-remote-form label {
  display: grid;
  gap: 7px;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: 560;
}
.setup-remote-form input, .setup-remote-form textarea {
  width: 100%;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  outline: 0;
  background: var(--openbot-bg-canvas);
  padding: 11px 12px;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: 18px;
  resize: none;
}
.setup-remote-form input {
  min-height: 43px;
}
.setup-remote-form input:focus, .setup-remote-form textarea:focus {
  border-color: var(--openbot-text-dim);
  background: var(--openbot-bg-sidebar);
}
.setup-remote-form input::placeholder, .setup-remote-form textarea::placeholder {
  color: var(--openbot-text-dim);
}
.setup-remote-note {
  margin: -2px 1px 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
}
.setup-remote-change {
  width: fit-content;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.setup-remote-change:hover:not(:disabled) {
  color: var(--openbot-text-secondary);
}
.provider-picker {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}
.provider-picker-standalone {
  margin-top: 24px;
}
.setup-local-content .provider-picker-standalone {
  margin-top: 0;
}
.provider-picker-label {
  margin-bottom: 7px;
  padding: 0;
  color: var(--text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: 560;
}
.provider-picker-heading {
  display: flex;
  min-height: 25px;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  margin-bottom: 7px;
}
.provider-picker-heading .provider-picker-label {
  margin-bottom: 0;
}
.ui-button.provider-picker-refresh {
  min-height: 25px;
  gap: var(--openbot-space-1);
  border-radius: var(--openbot-radius-md);
  color: var(--openbot-text-muted);
  padding-inline: var(--openbot-space-2);
}
.ui-button.provider-picker-refresh:hover:not(:disabled, [aria-disabled="true"]) {
  color: var(--openbot-text-primary);
}
.provider-picker-list {
  overflow: hidden;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-sidebar);
}
.provider-picker-option {
  min-height: 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  color: var(--text-primary);
}
.provider-picker-option-selection {
  min-width: 0;
  min-height: 44px;
  display: grid;
  grid-template-columns: 16px 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0 8px 12px;
  cursor: pointer;
}
.provider-picker-option + .provider-picker-option, .provider-picker-option-custom {
  border-top: 1px solid var(--openbot-border);
}
.provider-picker-option:hover:not(.provider-picker-option-unavailable), .provider-picker-option:focus-within {
  background: var(--openbot-hover);
}
.provider-picker-option-selected {
  background: var(--openbot-hover);
}
.provider-picker-option-unavailable {
  color: var(--openbot-text-muted);
}
.provider-picker-option-unavailable .provider-picker-option-selection {
  cursor: default;
}
.provider-picker-option-selectable-unavailable .provider-picker-option-selection {
  cursor: pointer;
}
.provider-picker-option-selectable-unavailable:hover {
  background: var(--openbot-hover);
}
.provider-picker-option input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--openbot-text-primary);
}
.provider-picker-actions {
  display: flex;
  align-items: center;
}
.ui-button.provider-picker-install {
  min-width: 58px;
  min-height: 28px;
  margin-right: 8px;
  border-radius: var(--openbot-radius-md);
  padding-inline: 9px;
}
.ui-button.provider-picker-connect {
  background: var(--openbot-accent);
  color: var(--openbot-text-primary);
}
@media (hover: hover) and (pointer: fine) {
  .ui-button.provider-picker-connect:hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-accent-hover);
  }
}
.provider-picker-logo {
  width: 18px;
  height: 18px;
  overflow: visible;
  fill: var(--openbot-provider-current);
}
.provider-picker-custom-mark {
  width: 18px;
  height: 18px;
  grid-column: 2;
  color: var(--openbot-text-secondary);
  stroke-width: var(--openbot-icon-stroke);
}
.provider-picker-option-unavailable .provider-picker-logo, .provider-picker-option-unavailable .provider-picker-custom-mark {
  opacity: 0.44;
}
.provider-picker-option-runtime {
  color: var(--openbot-text-primary);
}
.provider-picker-option-runtime .provider-picker-logo {
  opacity: 1;
}
.provider-picker-identity {
  display: grid;
  min-width: 0;
}
.provider-picker-name, .provider-picker-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.provider-picker-name {
  font-size: var(--openbot-text-md);
  font-weight: 530;
  line-height: 18px;
}
.provider-picker-email {
  color: var(--text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 15px;
}
.provider-picker-check-error {
  overflow: hidden;
  color: var(--openbot-warning);
  font-size: var(--openbot-text-sm);
  line-height: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.provider-picker-status-message {
  overflow: visible;
  white-space: normal;
}
.provider-picker-check-error.provider-picker-used-by {
  grid-column: 1 / -1;
  overflow: visible;
  margin-top: -6px;
  padding: 0 0 8px 66px;
  white-space: normal;
}
.provider-picker-option-selected .provider-picker-email {
  color: var(--openbot-text-readable);
}
.provider-picker-add-account svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.provider-picker-accounts {
  grid-column: 1 / -1;
  display: grid;
  gap: 4px;
  margin-top: -6px;
  padding: 0 0 8px 66px;
}
.provider-picker-account-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.provider-picker-account {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}
.provider-picker-account + .provider-picker-account {
  border-top: 1px solid var(--openbot-border);
}
.provider-picker-account-copy {
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  gap: 2px;
}
.provider-picker-account .provider-picker-check-error {
  white-space: normal;
}
.provider-picker-account-rename {
  max-width: 220px;
}
.provider-picker-state {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.provider-picker-version {
  overflow: hidden;
  color: var(--text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.provider-picker-option-selected .provider-picker-version {
  color: var(--openbot-text-readable);
}
.provider-picker-status {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
  white-space: nowrap;
}
.provider-picker-custom-count {
  color: var(--text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
  white-space: nowrap;
}
.ui-button.provider-picker-custom-count {
  min-height: 28px;
  margin-right: 8px;
  border-radius: var(--openbot-radius-md);
  padding-inline: 9px;
  color: var(--text-muted);
  font-size: var(--openbot-text-sm);
}
.provider-picker-status-available {
  color: var(--openbot-success);
}
.provider-picker-status-sign-in-required, .provider-picker-status-outdated, .provider-picker-status-update-available {
  color: var(--openbot-warning);
}
.provider-picker-status-ready {
  color: var(--openbot-success);
}
.provider-picker-status-download-error {
  color: var(--openbot-danger);
}
.provider-picker-status-finishing {
  color: var(--openbot-warning);
}
.provider-picker-status-not-installed, .provider-picker-status-checking, .provider-picker-status-error {
  color: var(--openbot-text-muted);
}
.provider-picker-status i {
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-dim);
}
.provider-picker-status-available i {
  background: var(--openbot-success);
}
.provider-picker-status-sign-in-required i, .provider-picker-status-outdated i, .provider-picker-status-update-available i {
  background: var(--openbot-warning);
}
.provider-picker-status-not-installed i, .provider-picker-status-checking i, .provider-picker-status-error i {
  background: var(--openbot-text-dim);
}
.provider-picker-hint {
  margin: 7px 0 0;
  color: var(--text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
}
.provider-picker-footer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  margin-top: 7px;
}
.provider-picker-footer .provider-picker-hint {
  margin: 0;
}
.ui-button.provider-picker-more {
  flex: 0 0 auto;
  gap: var(--openbot-space-1-5);
  margin-inline-start: auto;
  margin-inline-end: calc(var(--openbot-space-2) * -1);
}
.provider-picker-logo-stack {
  position: relative;
  z-index: 0;
  display: inline-flex;
}
.provider-picker-logo-stack-mark {
  position: relative;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control-active);
  box-shadow: 0 0 0 2px var(--openbot-bg-canvas);
}
.provider-picker-logo-stack-mark + .provider-picker-logo-stack-mark {
  z-index: -1;
  margin-inline-start: -4px;
}
.provider-picker-logo-stack-mark .provider-picker-logo {
  width: 12px;
  height: 12px;
}
.custom-provider-backdrop.provider-more-backdrop {
  align-items: start;
  padding-top: min(14vh, 120px);
}
.custom-provider-dialog.provider-more-dialog {
  width: min(400px, 100%);
  max-height: min(600px, calc(100dvh - min(14vh, 120px) - var(--openbot-space-6)));
  padding: var(--openbot-space-2);
}
.provider-more-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-3);
}
.provider-more-title {
  margin: 0;
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
}
.ui-input.provider-more-search {
  flex-shrink: 0;
  margin: var(--openbot-space-1) 0 var(--openbot-space-2);
}
.provider-more-search::-webkit-search-cancel-button {
  appearance: none;
}
.provider-more-list {
  min-height: 0;
  overflow-y: auto;
}
.ui-button.provider-more-row {
  width: 100%;
  height: auto;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  justify-content: stretch;
  align-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  border: 0;
  border-radius: var(--openbot-radius-md);
  color: inherit;
  font: inherit;
  line-height: normal;
  text-align: left;
  white-space: normal;
}
.ui-button.provider-more-row:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: -2px;
}
.provider-more-row .provider-picker-custom-mark {
  grid-column: auto;
}
.provider-more-divider {
  height: 1px;
  margin: var(--openbot-space-1) var(--openbot-space-3);
  border: 0;
  background: var(--openbot-border);
}
.provider-more-empty {
  margin: 0;
  padding: var(--openbot-space-2) var(--openbot-space-3);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.initial-setup-error {
  margin: 12px 2px 0;
  color: var(--openbot-danger);
  font-size: var(--openbot-text-md);
  line-height: 1.45;
}
.initial-setup-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 20px;
}
.initial-setup-save {
  min-height: 40px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  padding: 12px 18px;
  font-size: var(--openbot-text-md);
  font-weight: 620;
  min-width: 180px;
  background: var(--openbot-text-primary);
  color: var(--openbot-bg-sidebar);
  transition: transform var(--openbot-duration-normal) ease, background var(--openbot-duration-hover) ease;
}
.initial-setup-save:hover:not(:disabled) {
  background: var(--openbot-text-primary);
}
.initial-setup-save:disabled {
  cursor: default;
  opacity: 0.48;
}
.initial-setup-save:active:not(:disabled) {
  transform: scale(0.992);
}
@media (max-width: 620px) {
  .initial-setup-screen {
    place-items: start center;
    padding: 52px 18px 24px;
  }
  .account-login-screen {
    padding-inline: 18px;
  }
  .initial-setup-actions, .initial-setup-save {
    width: 100%;
  }
  .initial-setup-actions {
    flex-direction: column-reverse;
  }
  .setup-route-button {
    grid-template-columns: 42px minmax(0, 1fr) 18px;
    gap: 12px;
    padding-inline: 13px;
  }
  .setup-route-icon {
    width: 42px;
    height: 42px;
  }
  .initial-setup-account {
    max-width: 55vw;
  }
}
@media (max-width: 480px) {
  .account-login-screen {
    padding: 40px 20px;
  }
  .account-login-brand-lockup {
    margin-bottom: 24px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .account-login, .initial-setup {
    animation: setup-enter var(--openbot-duration-overlay) cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
  .account-login[data-transition="forward"] .account-login-title, .account-login[data-transition="forward"] .account-login-description {
    animation: account-login-copy-forward var(--openbot-duration-overlay) var(--openbot-ease-out) both;
  }
  .account-login[data-transition="back"] .account-login-title, .account-login[data-transition="back"] .account-login-description {
    animation: account-login-copy-back var(--openbot-duration-overlay) var(--openbot-ease-out) both;
  }
  .account-login[data-transition] .account-login-description {
    animation-delay: 18ms;
  }
  .account-login[data-transition="forward"] .account-login-form[data-auth-panel="code"] {
    animation: account-login-panel-forward var(--openbot-duration-overlay) 32ms var(--openbot-ease-out) both;
  }
  .account-login[data-transition="back"] .account-login-form[data-auth-panel="email"] {
    animation: account-login-panel-back var(--openbot-duration-overlay) 32ms var(--openbot-ease-out) both;
  }
  @keyframes setup-enter {
    from {
      opacity: 0;
      transform: translateY(6px);
    }
  }
  @keyframes account-login-copy-forward {
    from {
      filter: blur(4px);
      opacity: 0;
      transform: translateX(10px);
    }
  }
  @keyframes account-login-copy-back {
    from {
      filter: blur(4px);
      opacity: 0;
      transform: translateX(-10px);
    }
  }
  @keyframes account-login-panel-forward {
    from {
      filter: blur(6px);
      opacity: 0;
      transform: translateX(16px) scale(0.985);
    }
  }
  @keyframes account-login-panel-back {
    from {
      filter: blur(6px);
      opacity: 0;
      transform: translateX(-16px) scale(0.985);
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .account-login-spinner, .approval-card {
    animation: none;
  }
  .account-login[data-transition] .account-login-title, .account-login[data-transition] .account-login-description, .account-login[data-transition] .account-login-form[data-auth-panel] {
    animation: none;
  }
}
button {
  cursor: pointer;
}
button:not(.ui-button):focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}
::selection {
  background: var(--openbot-accent-strong);
}
::-webkit-scrollbar {
  width: 0;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-border-strong);
  background-clip: padding-box;
}
.scroll-fade-top:not(.scroll-fade-bottom) {
  -webkit-mask-image: linear-gradient( to bottom, transparent 0, var(--openbot-text-primary) 18px, var(--openbot-text-primary) 100% );
  mask-image: linear-gradient( to bottom, transparent 0, var(--openbot-text-primary) 18px, var(--openbot-text-primary) 100% );
}
.scroll-fade-bottom:not(.scroll-fade-top) {
  -webkit-mask-image: linear-gradient( to bottom, var(--openbot-text-primary) 0, var(--openbot-text-primary) calc(100% - 18px), transparent 100% );
  mask-image: linear-gradient( to bottom, var(--openbot-text-primary) 0, var(--openbot-text-primary) calc(100% - 18px), transparent 100% );
}
.scroll-fade-top.scroll-fade-bottom {
  -webkit-mask-image: linear-gradient( to bottom, transparent 0, var(--openbot-text-primary) 18px, var(--openbot-text-primary) calc(100% - 18px), transparent 100% );
  mask-image: linear-gradient( to bottom, transparent 0, var(--openbot-text-primary) 18px, var(--openbot-text-primary) calc(100% - 18px), transparent 100% );
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
body, .account-login-screen, .initial-setup-screen, .app-frame, .conversation-panel, .direct-conversation {
  background: var(--openbot-bg-canvas);
}
.panel-edge, .direct-conversation-header, .remote-desktop-header, .settings-panel, .browser-panel, .remote-desktop-workspace, .provider-picker-list {
  border-color: var(--openbot-border);
}
.search-field, .composer, .direct-composer, .settings-field input, .settings-field textarea, .settings-field select, .setup-remote-form input, .setup-remote-form textarea, .account-login-form input {
  border-color: var(--openbot-border);
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-primary);
}
.search-field:focus-within, .composer:focus-within, .direct-composer:focus-within, .settings-field input:focus, .settings-field textarea:focus, .settings-field select:focus, .setup-remote-form input:focus, .setup-remote-form textarea:focus, .account-login-form input:focus {
  border-color: var(--openbot-border-focus);
  background: var(--openbot-bg-surface-raised);
}
.search-field input::placeholder, .composer-editor-placeholder, .direct-composer textarea::placeholder, .settings-field input::placeholder, .settings-field textarea::placeholder, .setup-remote-form input::placeholder, .setup-remote-form textarea::placeholder, .account-login-form input::placeholder {
  color: var(--openbot-text-placeholder);
}
.provider-picker-option-selected, .provider-model-option-selected {
  border-color: var(--openbot-border-focus);
  background: var(--openbot-accent-soft);
  color: var(--openbot-text-primary);
}
.provider-picker-option, .provider-model-option {
  border-color: var(--openbot-border);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-secondary);
}
.provider-picker-option:hover:not(.provider-picker-option-unavailable), .provider-picker-option:focus-within, .provider-model-option:hover, .provider-model-option:focus-visible {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}
.voice-button, .voice-button-active, .initial-setup-save, .account-login-primary {
  background: var(--openbot-surface-light);
  color: var(--openbot-text-on-light);
}
.voice-button:hover, .voice-button-active:hover, .initial-setup-save:hover:not(:disabled), .account-login-primary:hover:not(:disabled, [aria-disabled="true"]) {
  background: var(--openbot-text-primary);
  color: var(--openbot-text-on-light);
}
.remote-desktop-overlay > button, .remote-desktop-overlay > button:hover {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}
.remote-desktop-overlay > button:hover {
  background: var(--openbot-bg-control-active);
}
.account-login-error, .initial-setup-error {
  border-color: var(--openbot-danger-soft);
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
}
.setup-route-button, .setup-route-icon, .setup-remote-form input, .setup-remote-form textarea {
  border-color: var(--openbot-border);
  background: var(--openbot-bg-surface);
}
.setup-route-button:hover, .setup-route-button:focus-visible {
  border-color: var(--openbot-border-focus);
  background: var(--openbot-bg-surface-raised);
}
.setup-route-icon-local i, .provider-picker-status-available i {
  color: var(--openbot-success);
}
.account-login-development-code, .provider-picker-status-sign-in-required i, .provider-picker-status-outdated i {
  color: var(--openbot-warning);
}
.app-loading {
  --app-loading-exit-delay: 0ms;
  --app-loading-play: running;
  --app-loading-at: 0s;
  position: absolute;
  z-index: var(--openbot-layer-dialog);
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--openbot-bg-canvas);
  -webkit-app-region: drag;
}
.app-loading-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.app-loading-row {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  padding-top: 48px;
}
.app-loading-agent {
  position: relative;
  width: 56px;
  height: 56px;
}
.app-loading-agent::after {
  position: absolute;
  z-index: -1;
  bottom: -8px;
  left: 50%;
  width: 70%;
  height: 8px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-muted);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-muted) 24%, transparent);
  }
  content: "";
  transform: translateX(-50%);
}
.app-loading-body {
  position: relative;
  width: 100%;
  height: 100%;
  transform-origin: 50% 100%;
}
.app-loading-bot {
  display: block;
  width: 100%;
  height: 100%;
}
.app-loading[data-scrub] {
  --app-loading-play: paused;
}
.app-loading-snore {
  position: absolute;
  top: 13px;
  left: 37px;
  transition: opacity var(--openbot-duration-normal) var(--openbot-ease-out);
}
.app-loading:not([data-phase="loading"]) .app-loading-snore {
  opacity: 0;
}
.app-loading-z {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 9px;
  height: 9px;
  scale: calc(0.7 + var(--app-loading-z-index) * 0.15);
  translate: calc(var(--app-loading-z-index) * 6px) calc(var(--app-loading-z-index) * -9px);
}
.app-loading-z-mark {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: var(--openbot-text-muted);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2px;
}
.app-loading-status {
  min-height: 20px;
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
}
.app-loading-line {
  display: block;
}
.app-loading:not([data-phase="loading"]) {
  pointer-events: none;
  -webkit-app-region: no-drag;
  animation: app-loading-exit var(--openbot-duration-overlay) var(--openbot-ease-in-out) var(--app-loading-exit-delay) forwards;
}
@media (prefers-reduced-motion: no-preference) {
  .app-loading[data-phase="exit"] {
    --app-loading-exit-delay: 760ms;
  }
  .app-loading-stage {
    animation: app-loading-enter var(--openbot-duration-overlay) var(--openbot-ease-out) calc(250ms - var(--app-loading-at)) both var(--app-loading-play);
  }
  .app-loading-agent:not([data-sleeper]) .app-loading-body {
    animation: app-loading-hop var(--app-loading-wave) var(--openbot-ease-in-out) calc(var(--app-loading-index) * var(--app-loading-stagger) - var(--app-loading-at)) infinite var(--app-loading-play);
  }
  .app-loading-agent:not([data-sleeper])::after {
    animation: app-loading-shadow var(--app-loading-wave) var(--openbot-ease-in-out) calc(var(--app-loading-index) * var(--app-loading-stagger) - var(--app-loading-at)) infinite var(--app-loading-play);
  }
  .app-loading-agent[data-sleeper] .app-loading-body {
    animation: app-loading-breathe 1.8s var(--openbot-ease-in-out) calc(0s - var(--app-loading-at)) infinite alternate var(--app-loading-play);
  }
  .app-loading-z {
    --app-loading-z-delay: calc(var(--app-loading-z-index) * 1.2s - var(--app-loading-at));
    opacity: 0;
    animation: app-loading-z-rise 3.6s cubic-bezier(0.33, 0.1, 0.4, 1) var(--app-loading-z-delay) infinite var(--app-loading-play), app-loading-z-fade 3.6s linear var(--app-loading-z-delay) infinite var(--app-loading-play);
  }
  .app-loading-z-mark {
    animation: app-loading-z-sway 0.9s var(--openbot-ease-in-out) var(--app-loading-z-delay) infinite alternate var(--app-loading-play);
  }
  .app-loading-line {
    animation: app-loading-line-in 280ms var(--openbot-ease-out);
  }
  .app-loading[data-scrub] .app-loading-line {
    animation: none;
  }
  .app-loading[data-phase="exit"] .app-loading-body {
    animation: app-loading-leap 640ms var(--openbot-ease-in-out) calc(var(--app-loading-index, 0) * 70ms) forwards;
  }
  .app-loading[data-phase="exit"] [data-sleeper] .app-loading-body {
    animation: app-loading-breathe 1.8s var(--openbot-ease-in-out) calc(0s - var(--app-loading-at)) infinite alternate, app-loading-drift 720ms cubic-bezier(0.5, 0, 0.9, 0.5) 200ms forwards;
  }
  .app-loading[data-phase="exit"] .app-loading-agent::after {
    animation: app-loading-shadow-out 320ms var(--openbot-ease-out) calc(var(--app-loading-index, 0) * 70ms + 120ms) forwards;
  }
  .app-loading[data-phase="exit"] [data-sleeper]::after {
    animation-delay: 480ms;
  }
  .app-loading:not([data-phase="loading"]) .app-loading-status {
    animation: app-loading-fade 200ms var(--openbot-ease-out) forwards;
  }
}
@keyframes app-loading-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}
@keyframes app-loading-hop {
  0%, 78%, 100% {
    transform: translateY(0) scale(1, 1);
  }
  10% {
    transform: translateY(0) scale(1.14, 0.86);
  }
  28% {
    transform: translateY(-30px) scale(0.9, 1.1);
  }
  44% {
    transform: translateY(-40px) scale(1, 1);
  }
  62% {
    transform: translateY(0) scale(0.94, 1.06);
  }
  68% {
    transform: translateY(0) scale(1.16, 0.84);
  }
}
@keyframes app-loading-shadow {
  0%, 62%, 100% {
    opacity: 1;
    transform: translateX(-50%) scaleX(1);
  }
  68% {
    transform: translateX(-50%) scaleX(1.15);
  }
  44% {
    opacity: 0.45;
    transform: translateX(-50%) scaleX(0.55);
  }
}
@keyframes app-loading-breathe {
  from {
    transform: scale(1, 1);
  }
  to {
    transform: scale(0.97, 1.04) rotate(-1.5deg);
  }
}
@keyframes app-loading-drift {
  from {
    opacity: 1;
    translate: 0 0;
  }
  60% {
    opacity: 1;
  }
  to {
    opacity: 0;
    translate: 0 -40vh;
  }
}
@keyframes app-loading-z-rise {
  from {
    scale: 0.45;
    translate: 0 0;
  }
  to {
    scale: 1.1;
    translate: 12px -30px;
  }
}
@keyframes app-loading-z-fade {
  0%, 100% {
    opacity: 0;
  }
  18%, 60% {
    opacity: 1;
  }
}
@keyframes app-loading-z-sway {
  from {
    transform: translateX(-2px) rotate(-14deg);
  }
  to {
    transform: translateX(2px) rotate(12deg);
  }
}
@keyframes app-loading-line-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
@keyframes app-loading-leap {
  0% {
    transform: translateY(0) scale(1, 1);
  }
  25% {
    transform: translateY(0) scale(1.2, 0.8);
  }
  45% {
    opacity: 1;
    transform: translateY(-40px) scale(0.85, 1.2);
  }
  100% {
    opacity: 0;
    transform: translateY(-70vh) scale(0.85, 1.2);
  }
}
@keyframes app-loading-shadow-out {
  to {
    opacity: 0;
    transform: translateX(-50%) scaleX(0.3);
  }
}
@keyframes app-loading-fade {
  to {
    opacity: 0;
  }
}
@keyframes app-loading-exit {
  to {
    opacity: 0;
  }
}
.server-connection-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3);
  background: var(--openbot-bg-canvas);
  border-bottom: 1px solid var(--openbot-border);
}
.server-connection-notice p {
  margin: 0;
}
.server-connection-detail {
  color: var(--openbot-text-muted);
  font-variant-numeric: tabular-nums;
  text-wrap: pretty;
}
.server-connection-actions {
  display: flex;
  gap: var(--openbot-space-2);
  -webkit-app-region: no-drag;
}
.server-connection-content {
  position: relative;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.server-connection-content[hidden] {
  display: none;
}
.language-wheel-shell {
  width: min(100%, 360px);
  min-height: 100%;
  margin-inline: auto;
  padding: var(--openbot-space-8) var(--openbot-space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-3);
  -webkit-app-region: no-drag;
}
.language-wheel-shell .account-login-brand-lockup {
  margin-bottom: var(--openbot-space-4);
}
.language-wheel-title {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.language-wheel-frame {
  position: relative;
  width: 100%;
}
.language-wheel-arrows {
  position: absolute;
  top: 50%;
  left: calc(100% + var(--openbot-space-2));
  translate: 0 -50%;
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
}
.language-wheel-arrows svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
}
.language-wheel {
  --row: 44px;
  position: relative;
  width: 100%;
  height: calc(var(--row) * 5);
  overflow: clip;
  cursor: grab;
  touch-action: none;
  user-select: none;
  mask-image: linear-gradient( transparent, var(--openbot-text-primary) 30%, var(--openbot-text-primary) 70%, transparent );
}
.language-wheel[data-dragging] {
  cursor: grabbing;
}
.language-wheel::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: calc(var(--row) * 2);
  height: var(--row);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-grouped);
}
.language-wheel:has(:focus-visible)::before {
  box-shadow: inset 0 0 0 1px var(--openbot-border-focus), var(--openbot-focus-ring);
}
.language-wheel-track {
  position: relative;
  height: 100%;
}
.language-wheel-item {
  position: absolute;
  inset-inline: 0;
  top: calc(var(--row) * 2);
  height: var(--row);
  translate: 0 calc(var(--offset) * var(--row));
  opacity: max(0, 1 - var(--distance) * 0.35);
  transition: translate var(--openbot-duration-overlay) var(--openbot-ease-out), opacity var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.language-wheel-label {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-3xl);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: -0.03em;
  line-height: 1;
  cursor: inherit;
}
.language-wheel-name {
  display: flex;
  align-items: center;
  gap: 0.4em;
  scale: max(0.6, 1 - var(--distance) * 0.2);
  transition: scale var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.language-wheel[data-dragging] :is(.language-wheel-item, .language-wheel-name) {
  transition: none;
}
.language-wheel-flag {
  scale: 0.9;
  letter-spacing: 0;
}
.language-wheel-continue {
  width: min(100%, 288px);
  min-height: 44px;
  margin-top: var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
}
.language-wheel-continue svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  transition: translate var(--openbot-duration-normal) var(--openbot-ease-out);
}
.language-wheel-continue:hover:not(:disabled) {
  background: var(--openbot-surface-light);
}
.language-wheel-continue:is(:hover, :focus-visible):not(:disabled) svg {
  translate: var(--openbot-space-1) 0;
}
.language-wheel-continue:active:not(:disabled) svg {
  translate: var(--openbot-space-2) 0;
}
@media (prefers-reduced-motion: reduce) {
  .language-wheel-item, .language-wheel-name, .language-wheel-continue svg {
    transition: none;
  }
}
.onboarding-screen {
  position: absolute;
  z-index: var(--openbot-layer-dialog);
  inset: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow-y: auto;
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
  -webkit-app-region: drag;
}
.onboarding-shell {
  width: min(100%, 680px);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 52px 24px;
  -webkit-app-region: no-drag;
}
.onboarding-progress {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  margin-bottom: 20px;
}
.onboarding-progress span {
  width: 6px;
  height: 6px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-border-strong);
  transition: width var(--openbot-duration-normal) var(--openbot-ease-out), background-color var(--openbot-duration-normal) ease;
}
.onboarding-progress span.is-complete {
  background: var(--openbot-text-muted);
}
.onboarding-progress span.is-active {
  width: 22px;
  background: var(--openbot-text-primary);
}
.onboarding-step {
  width: 100%;
  display: flex;
  justify-content: center;
}
.onboarding-panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.onboarding-panel h1 {
  max-width: 620px;
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-display);
  font-weight: var(--openbot-weight-medium);
  letter-spacing: -0.045em;
  line-height: 1.12;
}
.onboarding-description {
  max-width: 560px;
  margin: 10px 0 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-lg);
  line-height: 1.45;
}
.onboarding-computer-visual svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.onboarding-provider {
  width: min(100%, 480px);
  margin-top: 26px;
  text-align: left;
}
.onboarding-provider .provider-picker-standalone {
  margin-top: 0;
}
.onboarding-provider .provider-picker-label {
  color: var(--openbot-text-secondary);
}
.onboarding-provider .provider-picker-heading {
  padding-inline: 1px;
}
.onboarding-provider .provider-picker-list {
  background: var(--openbot-bg-control);
}
.onboarding-provider .provider-picker-hint {
  color: var(--openbot-text-muted);
}
.onboarding-computer-visual {
  position: relative;
  width: min(100%, 400px);
  margin-top: 20px;
}
.onboarding-computer-stop-mist, .onboarding-computer-highlight-start {
  stop-color: var(--openbot-onboarding-desktop-mist);
}
.onboarding-computer-stop-blue, .onboarding-computer-highlight-end {
  stop-color: var(--openbot-onboarding-desktop-blue);
}
.onboarding-computer-stop-indigo {
  stop-color: var(--openbot-onboarding-desktop-indigo);
}
.onboarding-computer-highlight-start {
  stop-opacity: 0.92;
}
.onboarding-computer-highlight-end {
  stop-opacity: 0;
}
.onboarding-computer-desktop {
  stroke: var(--openbot-border-on-light);
  stroke-width: 1;
  filter: drop-shadow(0 16px 22px var(--openbot-shadow-popover-ambient));
}
.onboarding-computer-desktop-highlight {
  pointer-events: none;
}
.onboarding-computer-desktop-beam {
  fill: var(--openbot-onboarding-desktop-mist);
  opacity: 0.16;
  pointer-events: none;
}
.onboarding-computer-window-shadow {
  fill: var(--openbot-shadow-dialog);
  opacity: 0.46;
}
.onboarding-computer-window {
  transform-box: fill-box;
  transform-origin: center;
  animation: onboarding-computer-window-drag 4.6s var(--openbot-ease-in-out) infinite;
}
.onboarding-computer-window-body {
  fill: var(--openbot-onboarding-window);
  stroke: var(--openbot-border-on-light);
  stroke-width: 1;
}
.onboarding-computer-window-bar, .onboarding-computer-window-bar-fill {
  fill: var(--openbot-text-muted-on-light);
  opacity: 0.24;
}
.onboarding-computer-window-bar {
  stroke: var(--openbot-border-on-light);
  stroke-width: 1;
}
.onboarding-computer-window-pane {
  fill: var(--openbot-text-dim-on-light);
  opacity: 0.18;
}
.onboarding-computer-window-card {
  fill: var(--openbot-text-dim-on-light);
  opacity: 0.24;
}
.onboarding-computer-window-line {
  fill: var(--openbot-text-dim-on-light);
  opacity: 0.54;
}
.onboarding-computer-window-line-short {
  opacity: 0.44;
}
.onboarding-computer-dot-danger {
  fill: var(--openbot-danger);
}
.onboarding-computer-dot-warning {
  fill: var(--openbot-warning);
}
.onboarding-computer-dot-success {
  fill: var(--openbot-success);
}
.onboarding-computer-cursor {
  transform-box: fill-box;
  transform-origin: 0 0;
  animation: onboarding-computer-cursor-drag 4.6s var(--openbot-ease-in-out) infinite;
}
.onboarding-computer-cursor path {
  fill: var(--openbot-text-on-light);
  stroke: var(--openbot-onboarding-window);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  filter: drop-shadow(0 2px 3px var(--openbot-shadow-popover-ambient));
  paint-order: stroke fill;
}
.onboarding-computer-avatar {
  position: absolute;
  z-index: 1;
  top: 40%;
  left: 73%;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  pointer-events: none;
  animation: onboarding-computer-avatar-drag 4.6s var(--openbot-ease-in-out) infinite;
}
.onboarding-computer-avatar .agent-avatar {
  width: 34px;
  height: 34px;
}
.onboarding-computer-avatar .agent-avatar > svg {
  width: 128%;
  height: 128%;
  filter: drop-shadow(0 2px 4px var(--openbot-shadow-popover-ambient));
}
@keyframes onboarding-computer-window-drag {
  0%, 34% {
    transform: translate(0, 0);
  }
  56%, 78% {
    transform: translate(18px, 8px);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes onboarding-computer-cursor-drag {
  0%, 8% {
    opacity: 0;
    transform: translate(352px, 190px) scale(0.68);
  }
  18%, 32% {
    opacity: 1;
    transform: translate(282px, 72px) scale(0.76);
  }
  38% {
    opacity: 1;
    transform: translate(282px, 72px) scale(0.71);
  }
  56%, 70% {
    opacity: 1;
    transform: translate(300px, 80px) scale(0.71);
  }
  78% {
    opacity: 1;
    transform: translate(300px, 80px) scale(0.76);
  }
  92%, 100% {
    opacity: 0;
    transform: translate(352px, 190px) scale(0.68);
  }
}
@keyframes onboarding-computer-avatar-drag {
  0%, 8% {
    opacity: 0;
    transform: translate(68px, 112px) scale(0.88);
  }
  18%, 32% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  38% {
    opacity: 1;
    transform: translate(0, 0) scale(0.94);
  }
  56%, 70% {
    opacity: 1;
    transform: translate(18px, 8px) scale(0.94);
  }
  78% {
    opacity: 1;
    transform: translate(18px, 8px) scale(1);
  }
  92%, 100% {
    opacity: 0;
    transform: translate(68px, 112px) scale(0.88);
  }
}
.onboarding-error {
  width: min(100%, 480px);
  margin: 12px 0 0;
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
  line-height: 1.45;
  text-align: center;
}
.onboarding-actions {
  width: min(100%, 288px);
  display: grid;
  gap: var(--openbot-space-2);
  margin-top: 22px;
}
.onboarding-screen[data-step="computer"] .onboarding-actions {
  margin-top: 16px;
}
.onboarding-actions .ui-button {
  width: 100%;
  min-height: 44px;
  border-radius: var(--openbot-radius-pill);
}
.onboarding-next {
  order: -1;
}
.onboarding-next-reason {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 1.45;
  text-align: center;
}
@media (max-width: 620px) {
  .onboarding-shell {
    padding: 48px 18px;
  }
  .onboarding-panel h1 {
    font-size: var(--openbot-text-3xl);
  }
  .onboarding-description {
    font-size: var(--openbot-text-md);
  }
  .onboarding-computer-visual {
    width: min(100%, 320px);
    margin-top: 16px;
  }
  .onboarding-computer-avatar {
    width: 30px;
    height: 30px;
  }
  .onboarding-computer-avatar .agent-avatar {
    width: 30px;
    height: 30px;
  }
}
@media (max-width: 460px) {
  .onboarding-provider .provider-picker-option-selection {
    grid-template-columns: 16px 18px minmax(0, 1fr);
  }
  .onboarding-provider .provider-picker-state {
    grid-column: 3;
    justify-self: start;
  }
  .onboarding-computer-visual {
    width: min(100%, 320px);
    margin-top: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .onboarding-progress span, .onboarding-computer-window, .onboarding-computer-cursor, .onboarding-computer-avatar {
    animation: none;
    transition: none;
  }
  .onboarding-computer-window {
    transform: translate(18px, 8px);
  }
  .onboarding-computer-cursor {
    opacity: 1;
    transform: translate(300px, 80px) scale(0.76);
  }
  .onboarding-computer-avatar {
    opacity: 1;
    transform: translate(18px, 8px);
  }
}
:is(.onboarding-provider, .setup-local-content) .provider-picker-list {
  overflow: visible;
}
:is(.onboarding-provider, .setup-local-content) .provider-picker-list > :first-child, :is(.onboarding-provider, .setup-local-content) .provider-picker-list > :first-child > .provider-picker-option:first-child {
  border-top-left-radius: calc(var(--openbot-radius-md) - 1px);
  border-top-right-radius: calc(var(--openbot-radius-md) - 1px);
}
:is(.onboarding-provider, .setup-local-content) .provider-picker-list > :last-child, :is(.onboarding-provider, .setup-local-content) .provider-picker-list > :last-child > .provider-picker-option:last-child {
  border-bottom-left-radius: calc(var(--openbot-radius-md) - 1px);
  border-bottom-right-radius: calc(var(--openbot-radius-md) - 1px);
}
:is(.onboarding-provider, .setup-local-content) .provider-picker-option-with-callout {
  position: relative;
}
.provider-picker-callout {
  position: absolute;
  right: calc(100% + 10px);
  bottom: 50%;
  width: 150px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--openbot-onboarding-desktop-indigo);
  pointer-events: none;
  animation: provider-picker-callout-in 420ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.provider-picker-callout-title {
  font-size: var(--openbot-text-md);
  font-weight: 620;
  line-height: 18px;
}
.provider-picker-callout-detail {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
}
.provider-picker-callout-arrow {
  width: 92px;
  height: 40px;
  align-self: flex-end;
  margin-top: 2px;
  margin-bottom: -10px;
}
@keyframes provider-picker-callout-in {
  from {
    opacity: 0;
  }
}
.provider-picker-callout-end {
  right: auto;
  left: calc(100% + 10px);
  align-items: flex-end;
  text-align: right;
}
.provider-picker-callout-end .provider-picker-callout-arrow {
  align-self: flex-start;
  transform: scaleX(-1);
}
@media (prefers-reduced-motion: reduce) {
  .provider-picker-callout {
    animation: none;
  }
}
@media (max-width: 860px) {
  .provider-picker-callout {
    display: none;
  }
}
@media (max-width: 960px) {
  .setup-local-content .provider-picker-callout {
    display: none;
  }
}
.server-onboarding-screen {
  position: fixed;
}
.server-onboarding-close {
  position: absolute;
  top: 12px;
  right: 12px;
  -webkit-app-region: no-drag;
}
.first-run-screen[data-step="choose"] .onboarding-shell {
  width: min(100%, 960px);
}
.first-run-screen .onboarding-shell > .onboarding-step {
  view-transition-name: first-run-step;
}
.first-run-screen .onboarding-shell > .onboarding-progress {
  view-transition-name: first-run-progress;
}
.first-run-screen .onboarding-shell > .onboarding-actions {
  view-transition-name: first-run-actions;
}
::view-transition-group(first-run-step), ::view-transition-group(first-run-progress), ::view-transition-group(first-run-actions) {
  animation-duration: 440ms;
  animation-timing-function: var(--openbot-ease-out);
}
::view-transition-old(first-run-step), ::view-transition-new(first-run-step) {
  inset-inline-start: 50%;
  inline-size: auto;
  translate: -50% 0;
}
html:active-view-transition-type(step)::view-transition-old(first-run-step) {
  animation: first-run-step-out 220ms var(--openbot-ease-out) both;
}
html:active-view-transition-type(step)::view-transition-new(first-run-step) {
  animation: first-run-step-in 440ms var(--openbot-ease-out) 40ms both;
}
::view-transition-old(first-run-progress):not(:only-child) {
  animation: none;
  opacity: 0;
}
::view-transition-new(first-run-progress):not(:only-child) {
  animation: none;
}
::view-transition-new(first-run-progress):only-child, ::view-transition-new(first-run-actions):only-child {
  animation: first-run-step-rise 440ms var(--openbot-ease-out) 40ms both;
}
::view-transition-old(first-run-actions), ::view-transition-old(first-run-progress):only-child {
  animation: first-run-blur-out 220ms var(--openbot-ease-out) both;
}
::view-transition-new(first-run-actions):not(:only-child) {
  animation: first-run-blur-in 440ms var(--openbot-ease-out) 40ms both;
}
html:active-view-transition-type(open)::view-transition-old(*) {
  animation: first-run-open-out 320ms var(--openbot-ease-out) both;
}
html:active-view-transition-type(open)::view-transition-new(*) {
  animation: first-run-open-in 520ms var(--openbot-ease-out) 60ms both;
}
@keyframes first-run-step-out {
  to {
    opacity: 0;
    filter: blur(6px);
  }
}
@keyframes first-run-step-in {
  from {
    opacity: 0;
    filter: blur(6px);
  }
}
@keyframes first-run-step-rise {
  from {
    opacity: 0;
    filter: blur(4px);
  }
}
@keyframes first-run-blur-out {
  to {
    opacity: 0;
    filter: blur(8px);
  }
}
@keyframes first-run-blur-in {
  from {
    opacity: 0;
    filter: blur(8px);
  }
}
@keyframes first-run-open-out {
  to {
    opacity: 0;
    filter: blur(8px);
  }
}
@keyframes first-run-open-in {
  from {
    opacity: 0;
    filter: blur(6px);
  }
}
.first-run-choice {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.first-run-choice-team {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-3);
  margin-bottom: 40px;
}
.first-run-choice-avatar {
  width: 52px;
  height: 52px;
  flex: none;
  animation: first-run-rise var(--openbot-duration-overlay) var(--openbot-ease-out) both;
}
.first-run-choice-avatar:nth-child(1), .first-run-choice-avatar:nth-child(7) {
  width: 40px;
  height: 40px;
  transform: translateY(24px);
}
.first-run-choice-avatar:nth-child(2), .first-run-choice-avatar:nth-child(6) {
  transform: translateY(8px);
}
.first-run-choice-avatar:nth-child(3), .first-run-choice-avatar:nth-child(5) {
  width: 68px;
  height: 68px;
}
.first-run-choice-avatar:nth-child(4) {
  width: 104px;
  height: 104px;
  transform: translateY(-12px);
}
.first-run-choice-avatar:nth-child(2) {
  animation-delay: calc(var(--openbot-duration-fast) * 1);
}
.first-run-choice-avatar:nth-child(3) {
  animation-delay: calc(var(--openbot-duration-fast) * 2);
}
.first-run-choice-avatar:nth-child(4) {
  animation-delay: calc(var(--openbot-duration-fast) * 3);
}
.first-run-choice-avatar:nth-child(5) {
  animation-delay: calc(var(--openbot-duration-fast) * 4);
}
.first-run-choice-avatar:nth-child(6) {
  animation-delay: calc(var(--openbot-duration-fast) * 5);
}
.first-run-choice-avatar:nth-child(7) {
  animation-delay: calc(var(--openbot-duration-fast) * 6);
}
.first-run-choice-title {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-hero);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: -0.055em;
  line-height: 1;
  text-wrap: balance;
}
.first-run-choice .onboarding-description {
  margin-top: var(--openbot-space-4);
}
.first-run-choice-rows {
  width: min(100%, 440px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-top: var(--openbot-space-8);
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-grouped);
  background: var(--openbot-bg-grouped);
}
.first-run-choice-rows .first-run-choice-row {
  height: auto;
  min-height: 64px;
  justify-content: flex-start;
  gap: var(--openbot-space-3);
  border-radius: 0;
  padding: var(--openbot-space-3) var(--openbot-space-4);
  text-align: left;
  white-space: normal;
}
.first-run-choice-rows .first-run-choice-row + .first-run-choice-row {
  border-top-color: var(--openbot-border-grouped);
}
.first-run-choice-row-text {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-sm);
}
.first-run-choice-row-text strong {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.first-run-choice-logos {
  display: flex;
  gap: 6px;
}
.first-run-choice-logo {
  width: 16px;
  height: 16px;
  overflow: visible;
  fill: var(--openbot-provider-current);
}
.first-run-choice-row-chevron {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--openbot-text-dim);
}
.first-run-choice-reason {
  margin-top: var(--openbot-space-3);
}
@keyframes first-run-rise {
  from {
    opacity: 0;
    translate: 0 16px;
  }
}
@media (max-width: 760px) {
  .first-run-choice-team {
    gap: var(--openbot-space-1-5);
  }
  .first-run-choice-avatar:nth-child(1), .first-run-choice-avatar:nth-child(7) {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .first-run-choice-avatar {
    animation: none;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .first-run-choice-avatar, .first-run-launch-avatar {
    --first-run-spring: linear(
      0,
      0.035 2.1%,
      0.281 6.7%,
      0.723 12.9%,
      0.938 16.7%,
      1.077 21%,
      1.149 24.3%,
      1.163 27%,
      1.154 29.9%,
      1.129 32.8%,
      1.051 39.6%,
      1.017 43.1%,
      0.977 51%,
      0.974 53.8%,
      0.975 57.1%,
      0.997 69.8%,
      1.003 76.9%,
      1
    );
    transition: scale 560ms var(--first-run-spring);
  }
  .first-run-choice-avatar:hover, .first-run-launch-member:hover .first-run-launch-avatar {
    scale: 1.12;
  }
  .first-run-choice-avatar:active, .first-run-launch-member:active .first-run-launch-avatar {
    scale: 0.9;
    transition-duration: var(--openbot-duration-fast);
    transition-timing-function: var(--openbot-ease-out);
  }
}
.first-run-launch {
  --first-run-launch-accent: var(--openbot-logo-production);
  position: absolute;
  z-index: var(--openbot-layer-dialog);
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--openbot-bg-canvas);
  -webkit-app-region: drag;
}
.first-run-launch[data-variant="dev"] {
  --first-run-launch-accent: var(--openbot-logo-dev);
}
.first-run-launch[data-variant="preview"] {
  --first-run-launch-accent: var(--openbot-logo-preview);
}
.first-run-launch-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.first-run-launch-team {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-3);
}
.first-run-launch-member {
  display: grid;
  flex: none;
}
.first-run-launch-avatar {
  width: 52px;
  height: 52px;
}
.first-run-launch-member:nth-child(1), .first-run-launch-member:nth-child(7) {
  translate: 0 24px;
}
.first-run-launch-member:nth-child(1) .first-run-launch-avatar, .first-run-launch-member:nth-child(7) .first-run-launch-avatar {
  width: 40px;
  height: 40px;
}
.first-run-launch-member:nth-child(2), .first-run-launch-member:nth-child(6) {
  translate: 0 8px;
}
.first-run-launch-member:nth-child(3) .first-run-launch-avatar, .first-run-launch-member:nth-child(5) .first-run-launch-avatar {
  width: 68px;
  height: 68px;
}
.first-run-launch-member:nth-child(4) {
  translate: 0 -12px;
}
.first-run-launch-member:nth-child(4) .first-run-launch-avatar {
  width: 104px;
  height: 104px;
}
.first-run-launch-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.first-run-launch-scribble {
  display: block;
  width: 112px;
  height: 14px;
  overflow: visible;
}
.first-run-launch-scribble polyline {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4px;
}
.first-run-launch-track {
  stroke: var(--first-run-launch-accent);
  @supports (color: color-mix(in lab, red, red)) {
    stroke: color-mix(in srgb, var(--first-run-launch-accent) 18%, transparent);
  }
}
.first-run-launch-fill {
  stroke: var(--first-run-launch-accent);
  stroke-dasharray: 1 1;
  stroke-dashoffset: calc(1 - var(--first-run-launch-percent));
  transition: stroke-dashoffset var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.first-run-launch-label {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
}
@media (max-width: 760px) {
  .first-run-launch-team {
    gap: var(--openbot-space-1-5);
  }
  .first-run-launch-member:nth-child(1), .first-run-launch-member:nth-child(7) {
    display: none;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .first-run-launch-avatar {
    animation: first-run-launch-hop 1.8s var(--openbot-ease-in-out) infinite;
  }
  .first-run-launch-member:nth-child(2) .first-run-launch-avatar {
    animation-delay: 120ms;
  }
  .first-run-launch-member:nth-child(3) .first-run-launch-avatar {
    animation-delay: 240ms;
  }
  .first-run-launch-member:nth-child(4) .first-run-launch-avatar {
    animation-delay: 360ms;
  }
  .first-run-launch-member:nth-child(5) .first-run-launch-avatar {
    animation-delay: 480ms;
  }
  .first-run-launch-member:nth-child(6) .first-run-launch-avatar {
    animation-delay: 600ms;
  }
  .first-run-launch-member:nth-child(7) .first-run-launch-avatar {
    animation-delay: 720ms;
  }
  .first-run-launch-progress[data-known="false"] .first-run-launch-fill {
    stroke-dasharray: 0.35 1.2;
    transition: none;
    animation: first-run-launch-scribble 1.8s var(--openbot-ease-in-out) infinite;
  }
}
@keyframes first-run-launch-hop {
  0%, 36%, 100% {
    transform: translateY(0);
  }
  16% {
    transform: translateY(-12px);
  }
}
@keyframes first-run-launch-scribble {
  from {
    stroke-dashoffset: 0.35;
  }
  to {
    stroke-dashoffset: -1.2;
  }
}
.setup-read-error-actions {
  justify-content: center;
  margin-top: var(--openbot-space-3);
}
.startup-splash {
  position: absolute;
  z-index: var(--openbot-layer-dialog);
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--openbot-bg-canvas);
  -webkit-app-region: drag;
}
.startup-splash-logo {
  display: block;
  width: 96px;
  height: 96px;
  animation: startup-splash-in var(--openbot-duration-overlay) var(--openbot-ease-out) backwards;
}
.startup-splash[data-phase="exit"] {
  pointer-events: none;
  -webkit-app-region: no-drag;
  animation: startup-splash-exit var(--openbot-duration-overlay) var(--openbot-ease-in-out) forwards;
}
@media (prefers-reduced-motion: no-preference) {
  .startup-splash-logo .app-logo-eye {
    stroke-dasharray: var(--splash-eye-length) calc(var(--splash-eye-length) + 24px);
    animation: startup-splash-eye-draw 480ms var(--openbot-ease-in-out) 160ms backwards, app-logo-blink 4.8s var(--openbot-ease-in-out) 1s infinite;
  }
}
@keyframes startup-splash-in {
  from {
    opacity: 0;
  }
}
@keyframes startup-splash-eye-draw {
  from {
    stroke-dashoffset: calc(var(--splash-eye-length) + 12px);
  }
  to {
    stroke-dashoffset: 0px;
  }
}
@keyframes startup-splash-exit {
  to {
    opacity: 0;
  }
}
.first-agent-setup-panel {
  height: 100%;
  min-height: 0;
  color: var(--openbot-text-primary);
}
.first-agent-setup-header {
  display: flex;
  height: 38px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--openbot-border);
  padding: 0 var(--openbot-space-3);
}
.first-agent-header-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-1-5);
}
.first-agent-header-identity .agent-avatar {
  --agent-avatar-optical-offset: -2px;
  width: 18px;
  height: 18px;
}
.first-agent-header-identity h1 {
  overflow: hidden;
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.first-agent-setup-content {
  display: grid;
  min-width: 0;
  min-height: 0;
  flex: 1;
  grid-template-rows: minmax(min-content, 1fr) auto;
  overflow-y: auto;
}
.first-agent-editor {
  display: grid;
  width: min(420px, calc(100% - 48px));
  align-content: center;
  justify-self: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-6) 0;
}
.first-agent-live-avatar {
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  justify-self: center;
  margin-bottom: var(--openbot-space-1);
  translate: 0 calc(0px - var(--openbot-space-2));
}
.first-agent-live-avatar .agent-avatar {
  width: 72px;
  height: 72px;
}
.first-agent-avatar-fieldset {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}
.first-agent-color-options, .first-agent-face-options {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-1);
}
.first-agent-face-options {
  gap: var(--openbot-space-0-5);
}
.ui-button.first-agent-color-choice, .ui-button.first-agent-face-choice {
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-color: transparent;
  background: transparent;
  padding: 0;
  border-radius: var(--openbot-radius-md);
}
.ui-button.first-agent-face-choice {
  display: grid;
  width: 33px;
  height: 33px;
  flex-basis: 33px;
  place-items: center;
  padding: 0;
}
.ui-button.first-agent-color-choice {
  border-radius: var(--openbot-radius-pill);
}
.ui-button.first-agent-color-choice:hover:not(:disabled), .ui-button.first-agent-face-choice:hover:not(:disabled) {
  background: var(--openbot-hover);
}
.first-agent-color-choice[aria-pressed="true"], .first-agent-face-choice[aria-pressed="true"] {
  border-color: var(--openbot-accent-text);
  box-shadow: 0 0 0 2px var(--openbot-accent-soft);
}
.first-agent-color-swatch {
  display: block;
  width: 18px;
  height: 18px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
}
.first-agent-face-choice .agent-avatar {
  --agent-avatar-optical-offset: -3.25px;
  width: 24px;
  height: 24px;
}
.first-agent-fields {
  display: grid;
  gap: var(--openbot-space-3);
  margin-top: var(--openbot-space-1);
}
.first-agent-fields .ui-textarea {
  field-sizing: content;
  min-height: 64px;
  max-height: 240px;
  overflow-y: auto;
}
.ui-button.first-agent-submit {
  min-width: 132px;
}
.first-agent-fields .provider-model-trigger-field {
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
  box-shadow: none;
}
.first-agent-fields .provider-model-trigger-field:hover:not(:disabled), .first-agent-fields .provider-model-trigger-field[aria-expanded="true"] {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-control);
}
.first-agent-fields .provider-model-trigger-field:active:not(:disabled) {
  transform: none;
}
.first-agent-fields .provider-model-trigger-field:focus-visible {
  border-color: var(--openbot-border-focus);
  outline: none;
  box-shadow: var(--openbot-focus-ring);
}
.first-agent-submit-actions {
  display: flex;
  justify-content: center;
  margin-top: var(--openbot-space-1);
}
.first-agent-error {
  margin: 0;
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-align: center;
}
.first-agent-suggestions {
  min-width: 0;
  padding: 0 var(--openbot-space-6) var(--openbot-space-4);
}
.first-agent-suggestions > h2 {
  margin: 0 0 var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
}
.first-agent-suggestion-viewport {
  position: relative;
  min-width: 0;
}
.first-agent-suggestion-viewport::before, .first-agent-suggestion-viewport::after {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: var(--openbot-space-1);
  width: 48px;
  opacity: 0;
  pointer-events: none;
  content: "";
  transition: opacity var(--openbot-duration-normal) var(--openbot-ease-out);
}
.first-agent-suggestion-viewport::before {
  left: 0;
  background: linear-gradient(to right, var(--openbot-bg-canvas), transparent);
}
.first-agent-suggestion-viewport::after {
  right: 0;
  background: linear-gradient(to left, var(--openbot-bg-canvas), transparent);
}
.first-agent-suggestion-viewport.can-scroll-back::before, .first-agent-suggestion-viewport.can-scroll-forward::after {
  opacity: 1;
}
.first-agent-suggestion-list {
  display: flex;
  min-width: 0;
  gap: var(--openbot-space-3);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  margin: 0;
  padding: 1px 1px var(--openbot-space-1);
  list-style: none;
  scrollbar-width: none;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}
.first-agent-suggestion-list::-webkit-scrollbar {
  display: none;
}
.first-agent-suggestion-item {
  width: 256px;
  flex: 0 0 256px;
  margin: 0;
}
.ui-button.first-agent-suggestion-card {
  width: 100%;
  height: 112px;
  justify-content: flex-start;
  gap: var(--openbot-space-4);
  border-color: var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: transparent;
  padding: var(--openbot-space-4);
  cursor: grab;
  text-align: left;
  white-space: normal;
  transition: border-color var(--openbot-duration-hover) var(--openbot-ease-out), background-color var(--openbot-duration-hover) var(--openbot-ease-out);
}
.ui-button.first-agent-suggestion-card:hover:not(:disabled) {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-hover);
}
.first-agent-suggestion-card[aria-pressed="true"] {
  border-color: var(--openbot-accent);
  background: var(--openbot-accent-soft);
}
.first-agent-suggestion-viewport.is-dragging, .first-agent-suggestion-viewport.is-dragging .first-agent-suggestion-list, .first-agent-suggestion-viewport.is-dragging .first-agent-suggestion-card {
  cursor: grabbing;
}
.first-agent-suggestion-card .agent-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
}
.first-agent-suggestion-card > span:last-child {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-1);
}
.first-agent-suggestion-card strong, .first-agent-suggestion-card small {
  display: block;
}
.first-agent-suggestion-card strong {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-xl);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-xl);
}
.first-agent-suggestion-card small {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-md);
}
@media (max-width: 800px) {
  .first-agent-editor {
    width: min(400px, calc(100% - 32px));
    padding-block: var(--openbot-space-4);
  }
  .first-agent-live-avatar, .first-agent-live-avatar .agent-avatar {
    width: 62px;
    height: 62px;
  }
  .first-agent-face-options {
    gap: var(--openbot-space-0-5);
    flex-wrap: wrap;
  }
  .first-agent-suggestions {
    padding-inline: var(--openbot-space-4);
  }
  .first-agent-suggestion-item {
    width: min(256px, calc(100vw - 64px));
    flex-basis: min(256px, calc(100vw - 64px));
  }
}
@media (prefers-reduced-motion: reduce) {
  .first-agent-color-choice, .first-agent-face-choice {
    transition: none;
  }
  .first-agent-suggestion-viewport .ui-button.first-agent-suggestion-card {
    transition: none;
  }
  .first-agent-suggestion-viewport::before, .first-agent-suggestion-viewport::after {
    transition: none;
  }
}
.app-frame {
  --left-header-height: 38px;
  --server-rail-width: 64px;
  position: relative;
  display: grid;
  container-type: inline-size;
  width: 100%;
  height: 100%;
  margin: 0;
  grid-template-columns: var(--left-panel-width, 280px) 0 minmax(0, 1fr);
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--openbot-bg-canvas);
  box-shadow: none;
  transition: grid-template-columns var(--panel-resize-duration, var(--openbot-duration-overlay)) cubic-bezier(0.32, 0.72, 0, 1);
}
.app-frame-with-server-rail {
  grid-template-columns: var(--server-rail-width) var(--left-panel-width, 280px) 0 minmax(0, 1fr);
}
.app-frame-platform-darwin {
  --server-rail-width: 72px;
}
.remote-compatibility-screen {
  display: flex;
  min-width: 0;
  min-height: 0;
  grid-column: 3;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: var(--openbot-space-6);
}
.app-frame-with-server-rail .remote-compatibility-screen {
  grid-column: 4;
}
.remote-compatibility-alert, .remote-compatibility-details {
  width: min(100%, 520px);
}
.remote-compatibility-details {
  display: grid;
  margin: 0;
}
.remote-compatibility-details > div {
  display: flex;
  justify-content: space-between;
  gap: var(--openbot-space-4);
  border-bottom: 1px solid var(--openbot-border);
  padding: var(--openbot-space-2) 0;
}
.remote-compatibility-details dt {
  color: var(--openbot-text-muted);
}
.remote-compatibility-details dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.global-search-dialog {
  position: fixed;
  z-index: calc(var(--openbot-layer-dialog) + 1);
  top: 112px;
  left: 50%;
  display: flex;
  width: min(640px, calc(100vw - 48px));
  max-height: calc(100dvh - 136px);
  flex-direction: column;
  overflow: hidden;
  outline: 0;
  background: var(--openbot-bg-control);
  box-shadow: 0 0 0 1px var(--openbot-dialog-ring), var(--openbot-shadow-dialog);
  color: var(--openbot-text-primary);
  transform: translateX(-50%);
  transform-origin: 50% 0;
  animation: global-search-in var(--openbot-duration-normal) var(--openbot-ease-out);
}
.global-search-dialog[data-closing] {
  animation: global-search-out var(--openbot-duration-fast) var(--openbot-ease-out) both;
}
@keyframes global-search-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-4px) scale(0.98);
  }
}
@keyframes global-search-out {
  to {
    opacity: 0;
    transform: translateX(-50%) scale(0.98);
  }
}
.global-search-control {
  display: flex;
  height: 48px;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--openbot-space-2);
  border-bottom: 1px solid var(--openbot-border);
  padding: 0 var(--openbot-space-2) 0 var(--openbot-space-4);
  color: var(--openbot-text-muted);
}
.global-search-control > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.global-search-control .global-search-input {
  min-width: 0;
  height: 100%;
  flex: 1;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
.global-search-control .global-search-input:focus {
  border: 0;
  outline: 0;
  box-shadow: none;
}
.global-search-control .global-search-input::placeholder {
  color: var(--openbot-text-muted);
}
.global-search-filters {
  flex: 0 0 auto;
}
.global-search-filters [role="tablist"] {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--openbot-space-0-5);
}
.global-search-filters [role="tab"] {
  position: relative;
  z-index: 1;
  height: var(--openbot-control-xs);
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  padding: 0 var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-family: inherit;
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
  transition: color var(--openbot-duration-normal) var(--openbot-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .global-search-filters [role="tab"]:hover {
    color: var(--openbot-text-secondary);
  }
}
.global-search-filters [role="tab"][data-selected] {
  color: var(--openbot-text-primary);
}
.global-search-filter-pill {
  position: absolute;
  top: 0;
  left: 0;
  height: var(--openbot-control-xs);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-control-active);
  pointer-events: none;
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out), width var(--openbot-duration-normal) var(--openbot-ease-out);
}
.global-search-filter-pill:is([data-initializing], [data-resizing]) {
  transition: none;
}
.global-search-filters [role="tab"]:focus-visible {
  outline: 0;
  box-shadow: var(--openbot-focus-ring);
}
.global-search-results {
  position: relative;
  inset: auto;
  width: 100%;
  max-height: min(400px, calc(100dvh - 240px));
  overflow-y: auto;
  background: transparent;
  padding: var(--openbot-space-1-5);
  transform: none;
  scrollbar-width: none;
  scroll-padding-block: var(--openbot-space-4);
  transition: height var(--openbot-duration-normal) var(--openbot-ease-out);
}
.global-search-results[data-instant] {
  transition: none;
}
.global-search-dialog [data-popper-positioner] {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  transform: none !important;
}
.global-search-results::-webkit-scrollbar {
  display: none;
}
.global-search-results [role="listbox"] {
  position: relative;
  outline: 0;
}
.global-search-results [role="listbox"] > [data-index] {
  position: absolute;
  right: 0;
  left: 0;
}
.global-search-section {
  display: flex;
  height: var(--openbot-control-sm);
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 var(--openbot-space-2) var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
}
.global-search-section[data-spaced] {
  height: calc(var(--openbot-control-sm) + var(--openbot-space-1-5));
}
.global-search-section-count {
  font-variant-numeric: tabular-nums;
}
.global-search-highlight {
  position: absolute;
  top: 0;
  right: var(--openbot-space-1-5);
  left: var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-control-active);
  pointer-events: none;
  transition: transform var(--openbot-duration-fast) var(--openbot-ease-out), height var(--openbot-duration-fast) var(--openbot-ease-out);
}
.global-search-highlight[data-instant] {
  transition: none;
}
.global-search-result {
  display: flex;
  min-height: var(--openbot-control-lg);
  align-items: center;
  gap: var(--openbot-space-2);
  border-radius: var(--openbot-radius-sm);
  padding: 0 var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  cursor: default;
  outline: 0;
}
.global-search-avatar.agent-avatar {
  --agent-avatar-optical-offset: -1px;
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  flex: 0 0 auto;
}
.global-search-icon {
  display: grid;
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  flex: 0 0 auto;
  place-items: center;
  color: var(--openbot-text-muted);
}
.global-search-icon > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: var(--openbot-icon-stroke);
}
.global-search-result-title, .global-search-result-detail {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.global-search-result-title {
  max-width: 40%;
  flex: 0 1 auto;
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}
.global-search-result-detail {
  flex: 1;
  color: var(--openbot-text-muted);
}
.global-search-result-author {
  flex: 0 0 auto;
  color: var(--openbot-text-secondary);
}
.global-search-result-time {
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
.global-search-match {
  background: transparent;
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}
.global-search-result .global-search-result-enter {
  flex: 0 0 auto;
  border: 0;
  background: var(--openbot-bg-control-hover);
  opacity: 0;
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}
.global-search-result[data-highlighted] .global-search-result-enter, .global-search-results [role="listbox"]:not(:has(.global-search-result[data-highlighted])) .global-search-result[data-first] .global-search-result-enter {
  opacity: 1;
}
.global-search-status, .global-search-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.global-search-status {
  min-height: var(--openbot-control-lg);
  animation: global-search-fade-in var(--openbot-duration-normal) var(--openbot-ease-out) var(--openbot-duration-fast) both;
}
.global-search-empty, .global-search-results:not(:has(.global-search-result)) .global-search-status {
  min-height: 96px;
}
.global-search-empty {
  animation: global-search-fade-in var(--openbot-duration-normal) var(--openbot-ease-out) both;
}
@keyframes global-search-fade-in {
  from {
    opacity: 0;
  }
}
.global-search-footer {
  display: flex;
  height: var(--openbot-control-lg);
  flex: 0 0 auto;
  align-items: center;
  gap: var(--openbot-space-4);
  border-top: 1px solid var(--openbot-border);
  padding: 0 var(--openbot-space-4);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.global-search-hint {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  white-space: nowrap;
}
.global-search-hint .ui-kbd {
  border: 0;
  background: var(--openbot-bg-control-active);
}
.global-search-footer .ui-kbd, .global-search-result .global-search-result-enter {
  font-family: var(--openbot-font-sans);
  font-weight: var(--openbot-weight-medium);
}
.global-search-footer .ui-kbd > svg, .global-search-result .global-search-result-enter > svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  stroke-width: calc(var(--openbot-icon-stroke) * 4 / 3);
}
.global-search-hint .ui-kbd + .ui-kbd {
  margin-left: calc(var(--openbot-space-0-5) * -1);
}
@media (max-width: 640px) {
  .global-search-dialog {
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 124px);
  }
  .global-search-control {
    height: auto;
    flex-wrap: wrap;
    row-gap: 0;
  }
  .global-search-control .global-search-input {
    height: 48px;
  }
  .global-search-filters {
    min-width: 0;
    flex-basis: 100%;
    overflow-x: auto;
    padding-block: var(--openbot-space-1) var(--openbot-space-2);
    scrollbar-width: none;
  }
  .global-search-footer, .global-search-result .global-search-result-enter {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .global-search-dialog, .global-search-empty {
    animation: none;
  }
  .global-search-status {
    animation-duration: 0s;
  }
  .global-search-filter-pill, .global-search-highlight, .global-search-results {
    transition: none;
  }
}
.server-rail {
  --server-rail-inline-padding: 7px;
  position: relative;
  z-index: 45;
  display: flex;
  min-width: var(--server-rail-width);
  flex-direction: column;
  justify-content: space-between;
  padding: 42px var(--server-rail-inline-padding) calc(9px + 52px);
  background: var(--openbot-bg-sidebar);
  -webkit-app-region: drag;
}
.server-rail::before {
  position: absolute;
  top: calc(var(--left-header-height) - 1px);
  right: 0;
  left: 0;
  height: 1px;
  background: var(--openbot-border);
  content: "";
  pointer-events: none;
}
.server-rail::after {
  position: absolute;
  top: var(--left-header-height);
  right: 0;
  bottom: 0;
  width: clamp(0.5px, 0.05123cqw, 1px);
  background: var(--openbot-border);
  content: "";
  pointer-events: none;
}
.server-rail-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  width: calc(100% + var(--server-rail-inline-padding) + var(--server-rail-inline-padding));
  min-height: 0;
  flex: 1 1 auto;
  margin-inline: calc(-1 * var(--server-rail-inline-padding));
  padding-inline: var(--server-rail-inline-padding);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.server-rail-list::-webkit-scrollbar {
  display: none;
}
.server-rail-tooltip-trigger {
  display: flex;
}
.server-rail-remote-list {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.server-rail-server-item {
  --server-rail-drag-step: 0;
  position: relative;
  display: flex;
  width: 100%;
  justify-content: center;
  opacity: 1;
  transform: translate3d(0, calc(var(--server-rail-drag-step) * 54px), 0);
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out), opacity var(--openbot-duration-normal) var(--openbot-ease-out);
}
.server-rail-server-item .server-rail-button {
  cursor: grab;
}
.server-rail-server-item-dragging {
  z-index: 1;
  opacity: 0.55;
}
.server-rail-drag-preview {
  position: fixed;
  z-index: var(--openbot-layer-dropdown);
  box-sizing: border-box;
  margin: 0;
  list-style: none;
  opacity: 0.96;
  pointer-events: none;
  transform: none;
  transition: none;
}
.server-rail-server-item-dragging .server-rail-button, .server-rail-remote-list[data-dragging] {
  cursor: grabbing;
}
.server-rail-remote-list[data-dragging] .server-rail-server-item {
  will-change: transform;
}
.server-rail-button {
  position: relative;
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  place-items: center;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--openbot-text-secondary);
  cursor: pointer;
  -webkit-app-region: no-drag;
}
@media (hover: hover) and (pointer: fine) {
  .ui-button.server-rail-button.ui-button-variant-outline:hover:not(:disabled) {
    background: transparent;
    color: var(--openbot-text-secondary);
  }
}
.server-rail-monogram {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: 740;
  letter-spacing: -0.02em;
}
.server-rail-logo {
  width: 40px;
  height: 40px;
  display: block;
  border-radius: var(--openbot-radius-lg);
  object-fit: cover;
  outline: 1px solid var(--openbot-image-outline);
  outline-offset: -1px;
}
.server-rail-mark {
  position: absolute;
  top: 50%;
  left: -7px;
  width: 3px;
  height: 0;
  border-radius: 0 var(--openbot-radius-xs) var(--openbot-radius-xs) 0;
  background: var(--openbot-text-primary);
  opacity: 0;
  transform: translateY(-50%);
  transition: height var(--openbot-duration-hover) var(--openbot-ease-out), opacity var(--openbot-duration-hover) ease;
}
.server-rail-button[aria-pressed="true"] .server-rail-mark {
  height: 26px;
  opacity: 1;
}
.server-rail-button[aria-pressed="false"]:hover .server-rail-mark {
  height: 12px;
  opacity: 1;
}
.server-rail-action .server-rail-monogram {
  border-style: dashed;
  background: transparent;
  color: var(--openbot-accent-text);
  font-size: var(--openbot-text-2xl);
  font-weight: 400;
}
.server-rail-action svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--openbot-icon-stroke);
}
.server-rail-tooltip {
  z-index: var(--openbot-layer-tooltip);
  max-width: min(240px, calc(100vw - 16px));
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-surface-raised);
  box-shadow: var(--openbot-shadow-raised);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-md);
  overflow-wrap: anywhere;
  pointer-events: none;
}
.server-rail-tooltip::before {
  position: absolute;
  top: 50%;
  left: -6px;
  width: 6px;
  height: 12px;
  background: var(--openbot-bg-surface-raised);
  clip-path: polygon(100% 0, 100% 100%, 0 50%);
  content: "";
  transform: translateY(-50%);
}
@media (max-width: 800px) {
  .app-frame-with-server-rail {
    --server-rail-width: 56px;
  }
  .app-frame-platform-darwin {
    --server-rail-width: 72px;
  }
  .server-rail {
    --server-rail-inline-padding: 5px;
  }
}
.panel-resizer {
  position: relative;
  z-index: 40;
  display: flex;
  width: 16px;
  height: 100%;
  align-items: center;
  justify-content: center;
  margin: 0;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: col-resize;
  touch-action: none;
  transform: translateX(-50%);
  user-select: none;
  -webkit-app-region: no-drag;
}
.panel-resizer::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  pointer-events: none;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--openbot-text-dim) 50%, transparent);
  content: "";
  opacity: 0;
  transform: translateX(-50%);
}
.panel-resizer:hover::after, .panel-resizer:focus-visible::after, .panel-resizer-active::after {
  opacity: 1;
}
.panel-resizer:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 1px var(--openbot-border-strong);
}
html.panel-resizing {
  --panel-resize-duration: 0ms;
  cursor: col-resize;
  user-select: none;
}
.right-panel-resizer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  height: auto;
}
.app-frame > * {
  min-height: 0;
}
.panel-edge {
  border-right: clamp(0.5px, 0.05123cqw, 1px) solid var(--openbot-border);
}
.window-drag {
  -webkit-app-region: drag;
}
.no-drag, button, input, textarea {
  -webkit-app-region: no-drag;
}
.sidebar {
  display: flex;
  min-width: 0;
  overflow: hidden;
  flex-direction: column;
  background: var(--openbot-bg-sidebar);
  color: var(--openbot-text-primary);
  container-type: inline-size;
}
.sidebar-topbar {
  display: flex;
  height: var(--left-header-height);
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  border-bottom: 1px solid var(--openbot-border);
  padding: 2px 3px 0 10px;
}
@media (min-width: 721px) {
  .app-frame-edge > .server-rail {
    background: var(--openbot-bg-native-sidebar);
  }
  .app-frame-edge > .server-rail::before, .app-frame-edge > .server-rail::after {
    content: none;
  }
  .app-frame-edge > .sidebar {
    position: relative;
    isolation: isolate;
    border-right: 0;
  }
  .app-frame-edge > .sidebar::before {
    position: absolute;
    z-index: -1;
    content: "";
    pointer-events: none;
  }
  .app-frame-edge .sidebar-topbar {
    border-bottom: 0;
  }
  .app-frame-edge .sidebar-search-wrap {
    padding-top: 11px;
  }
  .app-frame-edge .sidebar-compact-search {
    top: 11px;
  }
  .app-frame-edge .conversation-panel, .app-frame-edge .direct-conversation {
    isolation: isolate;
  }
  .app-frame-edge .conversation-header, .app-frame-edge .first-agent-setup-header {
    border-bottom: 0;
    background: transparent;
  }
  .app-frame-edge .diagram-view-header {
    border-bottom: 0;
    background: transparent;
  }
  .app-frame-edge .diagram-view-body {
    overflow: hidden;
    background: var(--openbot-bg-canvas);
  }
  .app-frame-edge .header-panel-toggle[aria-expanded="true"]:not(.computer-button-agent-active, .side-panel-toggle) {
    border-color: var(--openbot-border-strong);
    background: var(--openbot-bg-control-hover);
    color: var(--openbot-text-primary);
  }
  .app-frame-edge .direct-conversation-header {
    height: var(--left-header-height);
    border-bottom: 0;
    background: transparent;
  }
  .app-frame-edge .direct-conversation-person .person-avatar {
    width: 26px;
    height: 26px;
  }
  .app-frame-edge .remote-compatibility-screen {
    background: linear-gradient(var(--openbot-border-strong), var(--openbot-border-strong)) 0 calc(var(--left-header-height) - 1px) / 100% 1px no-repeat, linear-gradient(var(--openbot-bg-native-sidebar), var(--openbot-bg-native-sidebar)) 0 0 / 100% var(--left-header-height) no-repeat;
  }
  .app-frame-edge .settings-panel, .app-frame-edge .browser-panel {
    isolation: isolate;
  }
  .app-frame-edge .settings-panel::before, .app-frame-edge .browser-panel::before {
    position: absolute;
    z-index: -1;
    content: "";
    pointer-events: none;
  }
  .app-frame-edge .settings-panel-header, .app-frame-edge .file-preview-header, .app-frame-edge .browser-preview-header {
    height: var(--left-header-height);
    border-bottom: 0;
    background: transparent;
  }
}
.sidebar-server-name {
  min-width: 0;
  max-width: 100%;
  height: var(--openbot-control-sm);
  overflow: hidden;
  flex: 0 1 auto;
  justify-content: flex-start;
  gap: var(--openbot-space-1-5);
  margin-right: auto;
  border-radius: var(--openbot-radius-pill);
  padding: 0 var(--openbot-space-2) 0 var(--openbot-space-1);
  color: var(--openbot-text-primary);
  cursor: pointer;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-md);
  opacity: 1;
  text-align: left;
  transition: background-color var(--openbot-duration-hover) ease, border-color var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease, box-shadow var(--openbot-duration-hover) ease, opacity var(--openbot-duration-fast) ease;
}
.sidebar-server-name[aria-expanded="true"] {
  background: var(--ui-menu-item-hover);
}
.sidebar-server-name > .sidebar-server-name-mark {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
}
.sidebar-server-name-mark[data-entering] {
  animation: sidebar-server-mark-in 420ms cubic-bezier(0.34, 1.36, 0.64, 1) both;
}
.sidebar-server-name-label {
  min-width: 0;
  flex: 0 1 auto;
  white-space: nowrap;
}
.sidebar-server-name-label > span:not(.ui-swap-leaving) {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-server-name > .sidebar-server-name-chevron {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
}
.sidebar-server-name > .sidebar-server-name-sleep {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
}
.sidebar-server-name > .sidebar-server-name-sleep[data-state="waking"] {
  color: var(--openbot-accent);
  animation: server-sleep-waking 1200ms ease-in-out infinite;
}
@keyframes sidebar-server-mark-in {
  from {
    opacity: 0;
    scale: 0.6;
    filter: blur(2px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar-server-name-mark[data-entering] {
    animation: none;
  }
}
.app-frame-platform-darwin:not(.app-frame-with-server-rail, .web-app-frame) .sidebar-topbar {
  padding-left: 78px;
}
.app-frame-platform-darwin:not(.app-frame-with-server-rail, .web-app-frame) .sidebar-compact .sidebar-topbar {
  height: calc(var(--left-header-height) + 36px);
  align-items: flex-end;
  justify-content: center;
  padding: 0 0 2px;
}
.app-frame-platform-darwin:not(.app-frame-with-server-rail, .web-app-frame) .sidebar-compact .sidebar-server-name, .app-frame-platform-darwin:not(.app-frame-with-server-rail, .web-app-frame) .sidebar-compact .sidebar-new-button {
  display: none;
}
.app-frame-platform-darwin:not(.app-frame-with-server-rail, .web-app-frame) .sidebar-compact .sidebar-toggle-button {
  transform: none;
}
.app-frame-platform-darwin:not(.app-frame-with-server-rail, .web-app-frame) .sidebar-compact .sidebar-toggle-button:active {
  transform: scale(0.96);
}
.server-menu {
  min-width: 240px;
  max-width: 300px;
  max-height: min(520px, calc(100dvh - 16px), var(--kb-popper-content-available-height, 520px));
  overflow-y: auto;
}
.server-menu-row {
  gap: var(--openbot-space-2);
}
.server-menu-mark {
  position: relative;
  display: grid;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  overflow: hidden;
  place-items: center;
  border-radius: var(--openbot-radius-pill);
}
.server-menu-mark::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--openbot-text-primary) 12%, transparent);
  }
  content: "";
}
.server-menu-mark > * {
  width: 100%;
  height: 100%;
}
.server-menu-name {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.server-menu-muted {
  flex: 0 0 auto;
  color: var(--openbot-text-secondary);
}
.server-menu-sleep {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-muted);
}
.server-menu-sleep[data-state="waking"] {
  background: var(--openbot-accent);
  animation: server-sleep-waking 1200ms ease-in-out infinite;
}
.server-menu .server-menu-layout-chevron {
  margin-left: 0;
}
.ui-action-menu .server-menu-add {
  color: var(--openbot-text-secondary);
}
.ui-action-menu .server-menu-add:is(:hover, [data-highlighted]) {
  color: var(--openbot-text-primary);
}
.server-menu-add-circle {
  display: grid;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  place-items: center;
  border: 1px dashed var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px dashed color-mix(in srgb, var(--openbot-text-primary) 30%, transparent);
  }
  border-radius: var(--openbot-radius-pill);
}
.ui-action-menu .server-menu-add-circle > svg {
  width: var(--ui-menu-inset);
  height: var(--ui-menu-inset);
  stroke-width: 2.5;
}
.ui-action-menu .server-menu-add:is(:hover, [data-highlighted]) .server-menu-add-circle {
  border-color: transparent;
  background: var(--openbot-text-primary);
}
.ui-action-menu .server-menu-add:is(:hover, [data-highlighted]) .server-menu-add-circle > svg {
  color: var(--ui-menu-bg);
}
.sidebar-topbar-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 3px;
}
.sidebar-icon-button {
  position: relative;
  z-index: 2;
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  color: var(--openbot-text-muted);
  pointer-events: auto;
  cursor: pointer;
  -webkit-app-region: no-drag;
  transition: background-color var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease, opacity var(--openbot-duration-normal) ease, transform var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1);
}
.sidebar-icon-button:hover {
  background: var(--openbot-border);
  color: var(--openbot-text-primary);
}
.sidebar-icon-button:active {
  transform: scale(0.96);
}
.sidebar-icon-button:focus-visible {
  outline: 1px solid var(--openbot-text-muted);
  outline-offset: 1px;
}
.header-panel-toggle {
  position: relative;
  z-index: 2;
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  color: var(--openbot-text-muted);
  pointer-events: auto;
  cursor: pointer;
  -webkit-app-region: no-drag;
  transition: border-color var(--openbot-duration-hover) ease, background-color var(--openbot-duration-hover) ease, box-shadow var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease, transform var(--openbot-duration-fast) cubic-bezier(0.23, 1, 0.32, 1);
}
.header-panel-toggle:hover {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-hover);
  color: var(--openbot-text-primary);
}
.header-panel-toggle:active {
  transform: scale(0.92);
  transition-duration: var(--openbot-duration-fast);
}
.header-panel-toggle:focus-visible {
  outline: 1px solid var(--openbot-text-muted);
  outline-offset: 1px;
}
.sidebar-toggle-icon {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sidebar-marketplace-button > svg {
  width: 18px;
  height: 18px;
  stroke-width: var(--openbot-icon-stroke);
}
.sidebar-update-button, .sidebar-update-button:hover {
  color: var(--openbot-accent-text);
}
.sidebar-update-button > svg {
  width: 18px;
  height: 18px;
  stroke-width: var(--openbot-icon-stroke);
}
.sidebar-search-wrap {
  position: relative;
  padding: 8px 12px 6px;
}
.sidebar-search-trigger {
  width: 100%;
  justify-content: flex-start;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-regular);
  line-height: 18px;
  cursor: pointer;
}
.sidebar-search-trigger:hover:not(:disabled) {
  border-color: var(--openbot-text-dim);
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-dim);
}
.sidebar-search-placeholder {
  color: var(--openbot-text-muted);
}
.sidebar-compact-search {
  position: absolute;
  inset: 8px 12px 6px;
  display: grid;
  height: 32px;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  color: var(--openbot-text-muted);
  opacity: 0;
  pointer-events: none;
  transform: translateX(6px) scale(0.96);
  cursor: pointer;
  transition: background-color var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease, opacity var(--openbot-duration-fast) ease, transform var(--openbot-duration-slow) cubic-bezier(0.32, 0.72, 0, 1);
}
.sidebar-compact-search:hover {
  background: var(--openbot-hover);
  color: var(--openbot-text-primary);
}
.sidebar-compact-search:active {
  transform: scale(0.96);
}
.search-field {
  display: flex;
  height: 32px;
  align-items: center;
  gap: 8px;
  border: 0.5px solid var(--openbot-border);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-hover);
  padding: 0 9px;
  color: var(--openbot-text-dim);
  opacity: 1;
  transform: translateX(0);
  transition: border-color var(--openbot-duration-hover) ease, background-color var(--openbot-duration-hover) ease, box-shadow var(--openbot-duration-hover) ease, opacity var(--openbot-duration-fast) ease, transform var(--openbot-duration-slow) cubic-bezier(0.32, 0.72, 0, 1);
}
.search-field:focus-within {
  border-color: var(--openbot-text-dim);
  background: var(--openbot-bg-surface);
}
.search-field:has(input:focus-visible) {
  box-shadow: var(--openbot-focus-ring);
}
.search-field input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: 18px;
}
.search-field input::placeholder {
  color: var(--openbot-text-muted);
}
.agent-list {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 4px 12px 0;
  scrollbar-width: none;
}
.agent-list::-webkit-scrollbar {
  display: none;
}
.agent-list-content {
  position: relative;
}
.sidebar-list-context-trigger {
  min-height: 76px;
  flex: 1 0 76px;
}
.sidebar-chat-group + .sidebar-chat-group {
  margin-top: 6px;
  transition: margin-top var(--panel-resize-duration, var(--openbot-duration-overlay)) cubic-bezier(0.32, 0.72, 0, 1);
}
.sidebar-section, .sidebar-agent-item, .sidebar-person-item, .sidebar-pinned-item {
  --sidebar-drag-x: 0px;
  --sidebar-drag-y: 0px;
}
.sidebar-drag-shifting {
  will-change: transform;
}
.sidebar-section {
  position: relative;
  border-radius: var(--openbot-radius-md);
  opacity: 1;
  transform: translate3d(var(--sidebar-drag-x), var(--sidebar-drag-y), 0);
  transition-property: background-color, box-shadow, opacity, transform;
  transition-duration: var(--openbot-duration-fast);
  transition-timing-function: ease-out;
}
.sidebar-section-agent-drop-target {
  background: var(--openbot-accent-soft);
  box-shadow: inset 0 0 0 1px var(--openbot-accent-strong);
}
.sidebar-section-drop-before::before, .sidebar-section-drop-after::after {
  position: absolute;
  z-index: 3;
  right: 7px;
  left: 7px;
  height: 2px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent-text);
  box-shadow: 0 0 0 1px var(--openbot-bg-sidebar);
  content: "";
  pointer-events: none;
}
.sidebar-section-drop-before::before {
  top: -4px;
}
.sidebar-section-drop-after::after {
  bottom: -4px;
}
.sidebar-section-dragging {
  opacity: 0;
  transition: none;
  will-change: transform;
}
.sidebar-section-dragging * {
  animation-play-state: paused;
}
.sidebar-chat-group > header {
  display: flex;
  height: 32px;
  overflow: hidden;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  opacity: 1;
  transform: translateY(0);
  transition: height var(--panel-resize-duration, var(--openbot-duration-overlay)) cubic-bezier(0.32, 0.72, 0, 1), opacity var(--openbot-duration-fast) ease, transform var(--openbot-duration-slow) cubic-bezier(0.32, 0.72, 0, 1);
}
.sidebar-section-drag-handle, .sidebar-agent-item .agent-row, .sidebar-person-item .person-row {
  cursor: grab;
  touch-action: pan-y;
}
.agent-list[data-sidebar-dragging], .agent-list[data-sidebar-dragging] .sidebar-section-drag-handle, .agent-list[data-sidebar-dragging] .sidebar-section-toggle, .agent-list[data-sidebar-dragging] .agent-row, .agent-list[data-sidebar-dragging] .person-row {
  cursor: grabbing;
}
.agent-list[data-sidebar-dragging="chat"] .sidebar-section-toggle, .agent-list[data-sidebar-dragging="person"] .sidebar-section-toggle {
  pointer-events: none;
}
.agent-list[data-sidebar-dragging] .sidebar-section-toggle:hover, .agent-list[data-sidebar-dragging] .sidebar-section-toggle:focus-visible {
  background: transparent;
  color: var(--openbot-text-readable);
}
.agent-list[data-sidebar-dragging] .sidebar-section-toggle:hover .sidebar-section-chevron, .agent-list[data-sidebar-dragging] .sidebar-section-toggle:focus-visible .sidebar-section-chevron {
  opacity: 0;
}
.sidebar-section-toggle {
  display: flex;
  width: 100%;
  min-width: 0;
  height: 32px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-radius: var(--openbot-radius-md);
  padding: 0 7px;
  background: transparent;
  color: var(--openbot-text-readable);
  transition-property: color;
  transition-duration: var(--openbot-duration-hover);
  transition-timing-function: ease-out;
}
.sidebar-section-toggle:hover, .sidebar-section-toggle:focus-visible {
  background: transparent;
  color: var(--openbot-text-secondary);
}
.sidebar-section-toggle[aria-expanded="true"] {
  background: transparent;
}
.sidebar-section-toggle:active {
  scale: 0.96;
}
.sidebar-section-name {
  min-width: 0;
  overflow: hidden;
  font-size: var(--openbot-text-sm);
  font-weight: 400;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-section-chevron {
  flex: 0 0 auto;
  opacity: 0;
  transform: rotate(0deg);
  transition: opacity var(--openbot-duration-hover) ease-out, transform var(--openbot-duration-fast) var(--openbot-ease-out);
}
.sidebar-section-toggle:hover .sidebar-section-chevron, .sidebar-section-toggle:focus-visible .sidebar-section-chevron {
  opacity: 1;
}
.sidebar-section-chevron-collapsed {
  transform: rotate(-90deg);
}
.sidebar-section-collapse {
  display: grid;
  opacity: 1;
  grid-template-rows: 1fr;
  transition-property: grid-template-rows, opacity;
  transition-duration: var(--openbot-duration-normal), var(--openbot-duration-fast);
  transition-timing-function: var(--openbot-ease-out), ease-out;
}
.sidebar-section-collapse[data-collapsed] {
  opacity: 0;
  grid-template-rows: 0fr;
}
.sidebar-section-body {
  min-height: 0;
  overflow: hidden;
}
.sidebar-section-editor-wrap {
  position: relative;
  width: 100%;
}
.sidebar-waiting-group {
  border-bottom: 1px solid var(--openbot-border);
  padding-bottom: var(--openbot-space-2);
}
.sidebar-waiting-group-name {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
  margin: 0;
  padding: 0 7px;
  color: var(--openbot-text-readable);
  font-size: var(--openbot-text-sm);
  font-weight: 400;
  line-height: 16px;
  white-space: nowrap;
}
.sidebar-waiting-group-count {
  display: inline-grid;
  min-width: 16px;
  height: 16px;
  place-items: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-warning);
  padding: 0 4px;
  color: var(--openbot-bg-sidebar);
  font-size: var(--openbot-text-sm);
  font-weight: 650;
}
.sidebar-hidden-group-count {
  margin-inline-start: var(--openbot-space-1);
  font-variant-numeric: tabular-nums;
}
.sidebar-chat-group > .sidebar-section-editor-wrap {
  height: 36px;
}
.sidebar-section-editor {
  width: 100%;
  height: 36px;
  border-color: var(--openbot-border-focus);
  border-radius: var(--openbot-radius-md);
  padding: 0 32px 0 8px;
  background: var(--openbot-bg-control);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
}
.sidebar-section-editor[aria-invalid="true"] {
  border-color: var(--openbot-danger);
}
.sidebar-section-editor-chevron {
  position: absolute;
  top: 50%;
  right: 9px;
  color: var(--openbot-text-muted);
  pointer-events: none;
  transform: translateY(-50%);
}
.sidebar-section-draft {
  min-height: 36px;
}
.sidebar-agent-drag-preview, .sidebar-person-drag-preview, .sidebar-section-drag-preview {
  position: fixed;
  z-index: var(--openbot-layer-dropdown);
  box-sizing: border-box;
  margin: 0;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface-raised);
  box-shadow: var(--openbot-shadow-raised);
  opacity: 0.96;
  pointer-events: none;
  transform: none;
  transition: none;
}
.sidebar-agent-drag-preview *, .sidebar-person-drag-preview *, .sidebar-section-drag-preview * {
  animation: none;
  transition: none;
}
.sidebar-section-drag-preview.sidebar-section-toggle {
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-secondary);
}
.agent-row.sidebar-agent-drag-preview {
  background: var(--openbot-bg-surface-raised);
  transition: none;
}
.agent-row.sidebar-person-drag-preview {
  background: var(--openbot-bg-surface-raised);
  transition: none;
}
.agent-row.sidebar-agent-drag-preview *, .agent-row.sidebar-person-drag-preview * {
  animation: none;
  transition: none;
}
.sidebar-agent-item {
  position: relative;
  transform: translate3d(var(--sidebar-drag-x), var(--sidebar-drag-y), 0);
  transition: transform var(--openbot-duration-fast) var(--openbot-ease-out);
}
.sidebar-agent-item + .sidebar-agent-item {
  margin-top: 4px;
}
.sidebar-agent-item-dragging {
  will-change: transform;
}
.agent-list[data-sidebar-dragging="chat"] .sidebar-agent-item {
  transition: none;
  will-change: transform;
}
.agent-list[data-sidebar-dragging="person"] .sidebar-person-item {
  will-change: transform;
}
.sidebar-agent-item-dragging {
  z-index: 1;
  opacity: 0;
  transition: none;
}
.sidebar-person-item-dragging {
  pointer-events: none;
}
.sidebar-agent-row-dragging * {
  animation-play-state: paused;
}
.sidebar-agent-row-dragging {
  opacity: 0;
  transition: none;
}
.sidebar-person-item {
  position: relative;
  transform: translate3d(var(--sidebar-drag-x), var(--sidebar-drag-y), 0);
  transition: transform var(--openbot-duration-fast) var(--openbot-ease-out);
}
.sidebar-person-item + .sidebar-person-item {
  margin-top: 4px;
}
.sidebar-person-item-dragging {
  will-change: transform;
}
.sidebar-person-item-dragging .person-row * {
  animation-play-state: paused;
}
.sidebar-person-item-dragging .person-row {
  opacity: 0;
  transition: none;
}
.sidebar-pinned-group-agent-drop-target {
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-accent-soft);
  box-shadow: inset 0 0 0 1px var(--openbot-accent-strong);
}
.sidebar-pinned-group.sidebar-pinned-group-empty-target {
  display: grid;
  z-index: 4;
  width: 100%;
  grid-template-rows: 1fr;
  padding: 0;
  opacity: 1;
}
.sidebar-pinned-group-empty-target .sidebar-pinned-list {
  width: 100%;
  min-height: 0;
  padding: 4px 0 2px;
  overflow: hidden;
}
.sidebar-pinned-empty-drop {
  display: flex;
  width: 100%;
  height: 104px;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--openbot-border-strong);
  border-radius: var(--openbot-radius-lg);
  background: transparent;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 20px;
  list-style: none;
  transition: border-color var(--openbot-duration-fast) ease-out, background-color var(--openbot-duration-fast) ease-out, color var(--openbot-duration-fast) ease-out;
}
.sidebar-pinned-group-empty-target.sidebar-pinned-group-agent-drop-target {
  background: transparent;
  box-shadow: none;
}
.sidebar-pinned-group-empty-target.sidebar-pinned-group-agent-drop-target .sidebar-pinned-empty-drop {
  border-color: var(--openbot-accent-strong);
  background: var(--openbot-accent-soft);
  color: var(--openbot-text-primary);
}
.sidebar-pinned-group {
  padding: 4px 0 2px;
}
.sidebar-pinned-list {
  box-sizing: border-box;
  display: flex;
  width: min(236px, 100%);
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: center;
  margin: 0 auto;
  gap: 8px;
  list-style: none;
  padding: 2px;
}
.sidebar-pinned-item {
  position: relative;
  width: 72px;
  flex: 0 0 72px;
  opacity: 1;
  transform: translate3d(var(--sidebar-drag-x), var(--sidebar-drag-y), 0);
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.agent-row.sidebar-pinned-row {
  width: 72px;
  height: 94px;
  min-height: 94px;
  flex-direction: column;
  justify-content: flex-start;
  gap: 4px;
  padding: 4px 2px;
  cursor: grab;
  text-align: center;
}
.sidebar-pinned-row:active {
  transform: scale(0.96);
}
.agent-row.sidebar-pinned-row .sidebar-pinned-avatar {
  width: 48px;
  height: 48px;
  flex-basis: 48px;
}
.agent-row.sidebar-pinned-row .agent-avatar, .agent-row.sidebar-pinned-row.person-row .person-avatar {
  width: 48px;
  height: 48px;
}
.sidebar-pinned-copy {
  display: flex;
  width: 100%;
  min-height: 34px;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
}
.sidebar-pinned-name {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: 450;
  line-height: 16px;
  text-align: center;
  text-overflow: ellipsis;
  text-wrap: pretty;
  white-space: nowrap;
}
.sidebar-pinned-title {
  box-sizing: border-box;
  max-width: 100%;
  height: 18px;
  min-height: 18px;
  flex: 0 0 16px;
  border-color: var(--openbot-border);
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-hover);
  padding: 0 var(--openbot-space-1);
  color: var(--openbot-text-readable);
  font-weight: 400;
}
.sidebar-pinned-title > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-pinned-item-dragging {
  z-index: 1;
  opacity: 0;
}
.sidebar-pinned-list[data-dragging], .sidebar-pinned-item-dragging .sidebar-pinned-row {
  cursor: grabbing;
}
.sidebar-pinned-list[data-dragging] .sidebar-pinned-item {
  will-change: transform;
}
.sidebar-pinned-drag-preview {
  position: fixed;
  z-index: var(--openbot-layer-dropdown);
  box-sizing: border-box;
  margin: 0;
  list-style: none;
  opacity: 0.96;
  pointer-events: none;
  transform: none;
  transition: none;
}
.person-avatar {
  position: relative;
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--openbot-radius-md);
  color: var(--openbot-success);
  font-size: var(--openbot-text-sm);
  font-weight: 680;
  letter-spacing: 0.02em;
}
.person-avatar > img, .person-avatar > .person-avatar-generated {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.person-avatar > img {
  object-fit: cover;
}
.person-avatar > i {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--openbot-bg-sidebar);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control-hover);
}
.person-avatar.online > i {
  background: var(--openbot-success);
}
.person-avatar.large {
  width: 48px;
  height: 48px;
  border-radius: var(--openbot-radius-lg);
  font-size: var(--openbot-text-md);
}
.person-row .person-avatar {
  width: 34px;
  height: 34px;
}
.person-unread-badge {
  position: absolute;
  z-index: 2;
  right: -4px;
  bottom: -3px;
  display: grid;
  min-width: 17px;
  height: 17px;
  place-items: center;
  border: 2px solid var(--openbot-bg-sidebar);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-primary);
  padding: 0 3px;
  color: var(--openbot-bg-sidebar);
  font-size: var(--openbot-text-sm);
  font-weight: 680;
}
.agent-row {
  display: flex;
  width: 100%;
  height: 54px;
  min-height: 54px;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  padding: 8px;
  color: inherit;
  text-align: left;
  transition: background-color var(--openbot-duration-hover) ease, border-color var(--openbot-duration-hover) ease, transform var(--openbot-duration-normal) ease;
}
.agent-row + .agent-row {
  margin-top: 4px;
}
.agent-row:hover {
  background: var(--openbot-hover);
}
.agent-row:active {
  transform: scale(0.99);
}
.agent-row-active {
  background: var(--openbot-bg-surface);
}
.agent-row-avatar {
  position: relative;
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  transform: translateX(0);
  transition: transform var(--panel-resize-duration, var(--openbot-duration-overlay)) cubic-bezier(0.32, 0.72, 0, 1);
}
.sidebar-agent-item-user-hidden .agent-row-avatar {
  opacity: 0.5;
  filter: grayscale(1);
}
.agent-row-agent-status {
  position: absolute;
  z-index: 1;
  right: -5px;
  bottom: -3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--openbot-bg-sidebar);
  box-shadow: 0 1px 3px var(--openbot-shadow-popover-ambient);
  pointer-events: none;
}
.agent-row-active .agent-row-agent-status {
  border-color: var(--openbot-bg-control);
}
.agent-row-agent-status-working {
  width: 24px;
  height: 16px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-secondary);
}
.agent-row-thinking-dots {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.agent-row-thinking-dots i {
  width: 3px;
  height: 3px;
  border-radius: var(--openbot-radius-pill);
  background: currentColor;
  --typing-dot-travel: -1px;
  animation: typing-dot-pulse 900ms ease-in-out infinite;
}
.agent-row-thinking-dots i:nth-child(2) {
  animation-delay: var(--openbot-duration-fast);
}
.agent-row-thinking-dots i:nth-child(3) {
  animation-delay: var(--openbot-duration-overlay);
}
.agent-row-agent-status-responded {
  width: 16px;
  height: 16px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success);
  color: var(--openbot-success);
}
.agent-row-agent-status-responded svg {
  width: 10px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--openbot-icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.agent-row-agent-status-unread {
  min-width: 16px;
  height: 16px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-primary);
  padding: 0 3px;
  color: var(--openbot-bg-sidebar);
  font-size: var(--openbot-text-sm);
  font-weight: 650;
  line-height: 12px;
}
.agent-row-agent-status-routine, .agent-row-agent-status-limited {
  width: 16px;
  height: 16px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-secondary);
}
.agent-row-agent-status-routine svg, .agent-row-agent-status-limited svg {
  width: 10px;
  height: 10px;
}
.agent-row-agent-status-routine-failed {
  color: var(--openbot-danger);
}
.agent-row-agent-status-waiting {
  width: 18px;
  height: 18px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-warning);
  color: var(--openbot-bg-sidebar);
}
.agent-row-agent-status-waiting svg {
  width: 11px;
  height: 11px;
}
.agent-row-wait-chip {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 3px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-warning-soft);
  padding: 1px 7px 1px 5px;
  color: var(--openbot-warning-text);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  line-height: 16px;
  white-space: nowrap;
}
.agent-row-wait-chip svg {
  width: 11px;
  height: 11px;
}
.sidebar-agent-tooltip-trigger {
  display: block;
}
.sidebar-wait-tooltip {
  z-index: var(--openbot-layer-tooltip);
  display: grid;
  max-width: min(260px, calc(100vw - 16px));
  gap: 2px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-surface-raised);
  box-shadow: var(--openbot-shadow-raised);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  pointer-events: none;
}
.sidebar-wait-tooltip-title {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  color: var(--openbot-warning-text);
  font-weight: var(--openbot-weight-semibold);
}
.sidebar-wait-tooltip-title svg {
  width: 14px;
  height: 14px;
}
.sidebar-wait-tooltip-detail {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow-wrap: anywhere;
}
.sidebar-wait-tooltip-hint {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.agent-row-agent-status-entering {
  animation: sidebar-reply-in var(--openbot-duration-overlay) cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes typing-dot-pulse {
  0%, 60%, 100% {
    opacity: 0.34;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(var(--typing-dot-travel, -2px));
  }
}
@keyframes sidebar-reply-in {
  from {
    opacity: 0;
    transform: scale(0.55);
  }
}
.agent-context-submenu-chevron {
  margin-left: auto;
  color: var(--openbot-text-muted);
}
.agent-context-submenu {
  max-height: min(520px, calc(100vh - 16px));
  overflow-y: auto;
}
@keyframes agent-context-in {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(-3px);
  }
}
.agent-avatar {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  color: currentColor;
  overflow: visible;
}
.agent-avatar > svg {
  display: block;
  width: 128%;
  height: 128%;
  overflow: visible;
  translate: var(--agent-avatar-optical-offset-x, 0) var(--agent-avatar-optical-offset, 0);
}
.agent-avatar-custom {
  overflow: hidden;
  background: var(--openbot-hover);
  box-shadow: inset 0 0 0 1px var(--openbot-border);
}
.agent-avatar-custom > img, .composer-mention-avatar > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.agent-avatar[data-avatar="image"]:is([data-mood="working"], [data-mood="connecting"]) {
  position: relative;
  overflow: visible;
}
.agent-avatar[data-avatar="image"]:is([data-mood="working"], [data-mood="connecting"]) > img {
  border-radius: var(--openbot-radius-pill);
}
.agent-avatar[data-breathe] {
  animation: agent-avatar-breathe 2.6s ease-in-out infinite;
}
@keyframes agent-avatar-breathe {
  0%, 100% {
    scale: calc(1 - var(--agent-avatar-breathe, 0));
  }
  50% {
    scale: calc(1 + var(--agent-avatar-breathe, 0));
  }
}
.agent-avatar[data-mood="waiting"] {
  filter: drop-shadow(0 0 3px var(--openbot-accent));
}
.agent-avatar[data-mood="failed"] {
  filter: drop-shadow(0 0 3px var(--openbot-danger));
}
.agent-avatar[data-mood="asleep"] {
  opacity: 0.6;
}
@media (prefers-reduced-motion: reduce) {
  .agent-avatar[data-breathe] {
    animation: none;
  }
}
.agent-avatar > .agent-avatar-arcs {
  position: absolute;
  inset: -29%;
  width: auto;
  height: auto;
  overflow: visible;
  translate: none;
}
.agent-row .agent-avatar {
  --agent-avatar-optical-offset: -4px;
  width: 36px;
  height: 36px;
}
.person-row .person-avatar {
  width: 36px;
  height: 36px;
}
.avatar-editor {
  position: relative;
  z-index: var(--openbot-layer-popover);
  width: min(284px, calc(var(--settings-panel-width, 296px) - 30px));
  max-width: calc(100vw - 24px);
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-overlay);
  box-shadow: 0 22px 60px var(--openbot-bg-overlay), 0 3px 12px var(--openbot-shadow-popover-ambient), inset 0 1px var(--openbot-hover);
  backdrop-filter: blur(18px);
  transform-origin: var(--kb-popover-content-transform-origin);
  animation: avatar-editor-in var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1) both;
}
@keyframes avatar-editor-in {
  from {
    opacity: 0;
    transform: translateY(-5px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.avatar-editor-divider {
  height: 1px;
  background: var(--openbot-border);
}
.avatar-editor-heading {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px 3px 13px;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: 590;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.avatar-editor-heading > span {
  white-space: nowrap;
}
.avatar-editor-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}
.avatar-editor-actions button {
  min-height: 40px;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  padding: 0 9px;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: 540;
  transition-property: scale, background-color, color;
  transition-duration: var(--openbot-duration-normal), var(--openbot-duration-hover), var(--openbot-duration-hover);
  transition-timing-function: ease-out;
}
.avatar-editor-actions .ui-icon-button {
  width: var(--openbot-control-xl);
  padding: 0;
}
.avatar-editor-actions button:hover {
  background: var(--openbot-hover);
  color: var(--openbot-text-primary);
}
.avatar-editor-actions button:disabled, .avatar-image-upload:disabled {
  cursor: wait;
  opacity: 0.58;
}
.avatar-image-upload {
  display: grid;
  width: calc(100% - 20px);
  min-height: 64px;
  align-items: center;
  margin: 4px 10px 12px;
  border: 1px dashed var(--openbot-border-strong);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-hover);
  padding: 9px;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 11px;
  color: var(--openbot-text-primary);
  text-align: left;
  transition: border-color var(--openbot-duration-hover) ease, background-color var(--openbot-duration-hover) ease, transform var(--openbot-duration-normal) ease;
}
.avatar-image-upload:hover:not(:disabled) {
  border-color: var(--openbot-success);
  background: var(--openbot-success-soft);
}
.avatar-image-upload:active:not(:disabled) {
  transform: scale(0.985);
}
.avatar-image-upload-active {
  border-style: solid;
  border-color: var(--openbot-border-strong);
}
.avatar-image-upload-preview {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  overflow: hidden;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-hover);
  color: var(--openbot-text-muted);
}
.avatar-image-upload-preview > svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: var(--openbot-icon-stroke);
}
.avatar-image-upload-preview .agent-avatar {
  width: 42px;
  height: 42px;
}
.avatar-image-upload strong, .avatar-image-upload small {
  display: block;
  white-space: normal;
  text-wrap: pretty;
}
.avatar-image-upload strong {
  margin-bottom: 3px;
  font-size: var(--openbot-text-sm);
  font-weight: 580;
}
.avatar-image-upload small {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 14px;
}
.avatar-editor-actions button:active, .avatar-face-choice:active, .avatar-color-choice:active {
  scale: 0.96;
}
.avatar-face-grid {
  display: grid;
  min-width: 0;
  margin: 0;
  border: 0;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 7px 10px 12px;
}
.avatar-face-choice, .avatar-color-choice {
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  color: var(--openbot-text-secondary);
  transition-property: scale, background-color, box-shadow;
  transition-duration: var(--openbot-duration-normal), var(--openbot-duration-hover), var(--openbot-duration-hover);
  transition-timing-function: ease-out;
}
.avatar-face-choice {
  width: 100%;
  height: 48px;
}
.avatar-face-choice:hover, .avatar-color-choice:hover {
  background: var(--openbot-hover);
}
.avatar-choice-selected {
  background: var(--openbot-border);
  box-shadow: inset 0 0 0 1px var(--openbot-text-muted), 0 1px 3px var(--openbot-shadow-popover-ambient);
}
.avatar-face-choice .agent-avatar {
  width: 34px;
  height: 34px;
}
.avatar-color-grid {
  display: grid;
  min-width: 0;
  margin: 0;
  border: 0;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 5px;
  padding: 4px 10px 12px;
}
.avatar-color-choice {
  width: 100%;
  height: 40px;
}
.avatar-color-swatch {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: var(--openbot-radius-pill);
  box-shadow: inset 0 0 0 1px var(--openbot-border-strong);
}
.avatar-color-swatch-auto {
  display: grid;
  place-items: center;
  border: 1px dashed var(--openbot-text-muted);
  background: transparent;
  box-shadow: none;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: 650;
}
.conversation-title .agent-avatar {
  --agent-avatar-optical-offset: -2px;
  width: 18px;
  height: 18px;
}
.agent-row-copy {
  min-width: 0;
  flex: 1;
  opacity: 1;
  transform: translateX(0);
  transition: opacity var(--openbot-duration-fast) ease, transform var(--openbot-duration-slow) cubic-bezier(0.32, 0.72, 0, 1);
}
.agent-row-heading {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.agent-row-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  overflow: hidden;
}
.agent-row-title:has(.agent-role-badge) {
  --agent-role-badge-collapsed-width: calc(2ch + 9px);
  display: grid;
  grid-template-columns: fit-content(calc(100% - var(--agent-role-badge-collapsed-width) - 5px)) minmax(var(--agent-role-badge-collapsed-width), 1fr);
}
.agent-row-name {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 3px;
  overflow: hidden;
}
.agent-row-access {
  display: inline-flex;
  flex: none;
  color: var(--openbot-text-muted);
}
.agent-row-access svg {
  width: 12px;
  height: 12px;
}
.agent-row-title strong, .person-row .agent-row-heading strong, .channel-row .agent-row-heading strong {
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  line-height: 20px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-role-badge {
  min-width: 0;
  max-width: 100%;
  height: 18px;
  min-height: 18px;
  overflow: hidden;
  flex: 0 1 auto;
  justify-self: start;
  border: 0.5px solid var(--openbot-border);
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-hover);
  padding: 2px 4px;
  color: var(--openbot-text-readable);
  font-size: var(--openbot-text-sm);
  font-weight: 400;
  line-height: 16px;
  white-space: nowrap;
}
.agent-role-badge > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-row-time, .person-row .agent-row-heading > span, .channel-row .agent-row-time {
  min-width: 0;
  flex: 0 0 auto;
  color: var(--openbot-text-readable);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
  white-space: nowrap;
}
@container (max-width: 210px) {
  .agent-row-time, .person-row .agent-row-heading > span, .channel-row .agent-row-time {
    display: none;
  }
}
.agent-row-preview {
  display: block;
  margin-top: 0;
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar:not(.sidebar-compact) .agent-row {
  width: calc(100% + var(--openbot-space-2));
  margin-inline: calc(var(--openbot-space-1) * -1);
}
.sidebar:not(.sidebar-compact) .sidebar-section-body .agent-row {
  width: 100%;
  margin-inline: 0;
}
.sidebar:not(.sidebar-compact) .sidebar-waiting-group .agent-row {
  width: 100%;
  margin-inline: 0;
}
.sidebar-waiting-group .sidebar-agent-item .agent-row {
  cursor: default;
}
.sidebar:not(.sidebar-compact) .sidebar-pinned-row.agent-row {
  width: 72px;
  margin-inline: 0;
}
.empty-search {
  margin: 32px 0;
  color: var(--openbot-text-readable);
  font-size: var(--openbot-text-md);
  text-align: center;
}
.sidebar-first-agent-state {
  display: flex;
  min-height: 100%;
  flex-direction: column;
}
.ui-button.sidebar-first-agent-action {
  flex: 0 0 auto;
}
.account-usage-popover {
  position: relative;
  z-index: var(--openbot-layer-tooltip);
  display: grid;
  width: min(300px, calc(100vw - var(--openbot-space-4)));
  max-height: min(60vh, 420px);
  overflow: auto;
  padding: var(--openbot-space-2);
  gap: var(--openbot-space-2);
  opacity: 1;
  transform: translateY(0) scale(1);
  transform-origin: var(--kb-popover-content-transform-origin);
  transition: opacity var(--openbot-duration-fast) ease, transform var(--openbot-duration-fast) var(--openbot-ease-out);
  @starting-style {
    opacity: 0;
    transform: translateY(4px) scale(0.98);
  }
}
.account-usage-popover-header, .account-usage-popover-heading {
  display: flex;
  align-items: center;
}
.account-usage-popover-header {
  justify-content: space-between;
}
.account-usage-popover-heading {
  min-width: 0;
  padding-inline-start: var(--openbot-space-1);
  gap: var(--openbot-space-2);
}
.account-usage-popover-heading > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  color: var(--openbot-text-primary);
  stroke-width: var(--openbot-icon-stroke);
}
.account-usage-popover-title {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-md);
}
.account-usage-providers {
  display: grid;
  margin: 0;
  padding: 0;
  grid-template-columns: auto max-content minmax(0, 1fr) max-content max-content;
  column-gap: var(--openbot-space-2);
  row-gap: var(--openbot-space-1);
  list-style: none;
}
.account-usage-provider {
  display: grid;
  min-width: 0;
  align-items: center;
  border-radius: var(--openbot-radius-md);
  padding: var(--openbot-space-1);
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  row-gap: var(--openbot-space-1);
}
.account-usage-provider > .account-usage-provider-name {
  grid-column: 2 / -1;
}
.account-usage-provider-logo {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  overflow: visible;
  fill: var(--openbot-provider-current);
}
.account-usage-provider-copy {
  display: grid;
  min-width: 0;
  grid-column: 2 / 4;
}
.account-usage-provider-name {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-usage-provider-meta {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-usage-provider-remaining {
  grid-column: 4 / -1;
  justify-self: end;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: var(--openbot-leading-sm);
  white-space: nowrap;
}
.account-usage-windows, .account-usage-window {
  display: grid;
  min-width: 0;
  grid-template-columns: subgrid;
}
.account-usage-windows {
  grid-column: 2 / -1;
  row-gap: var(--openbot-space-1);
}
.account-usage-window {
  --account-usage-window-tone: var(--openbot-text-secondary);
  align-items: center;
  grid-column: 1 / -1;
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.account-usage-window[data-usage-tone="warning"] {
  --account-usage-window-tone: var(--openbot-warning);
}
.account-usage-window[data-usage-tone="critical"] {
  --account-usage-window-tone: var(--openbot-danger);
}
.account-usage-window-label, .account-usage-window-reset {
  color: var(--openbot-text-muted);
  white-space: nowrap;
}
.account-usage-window-reset {
  text-align: right;
}
.account-usage-window-bar {
  display: block;
  height: 4px;
  overflow: hidden;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-border);
}
.account-usage-window-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--account-usage-window-tone);
}
.account-usage-window-remaining {
  color: var(--openbot-text-primary);
  font-variant-numeric: tabular-nums;
  font-weight: var(--openbot-weight-semibold);
  text-align: right;
}
.account-usage-window:not([data-usage-tone="neutral"]) .account-usage-window-remaining {
  color: var(--account-usage-window-tone);
}
.account-usage-empty {
  margin: 0;
  padding: var(--openbot-space-2) var(--openbot-space-1);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.account-usage-refresh.ui-button {
  position: relative;
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-md);
  color: var(--openbot-text-muted);
}
.account-usage-refresh.ui-button::before {
  position: absolute;
  inset: calc(0px - var(--openbot-space-1));
  content: "";
}
.account-usage-refresh > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: var(--openbot-icon-stroke);
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.account-usage-refresh > svg.icon-spinning {
  animation-duration: 600ms;
}
.account-usage-popover-error {
  margin: 0;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-danger-soft);
  padding: var(--openbot-space-2);
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.sidebar-compact .sidebar-topbar {
  padding-inline: 12px;
}
.sidebar-compact .sidebar-server-name {
  opacity: 0;
  pointer-events: none;
}
.sidebar-compact .sidebar-new-button {
  opacity: 0;
  pointer-events: none;
  transform: translateX(6px) scale(0.92);
}
.sidebar-compact .sidebar-toggle-button {
  transform: translateX(13px);
}
.sidebar-compact .sidebar-toggle-button:active {
  transform: translateX(13px) scale(0.96);
}
.sidebar-compact .sidebar-search-wrap {
  padding-inline: 12px;
}
.sidebar-compact .search-field {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-8px);
}
.sidebar-compact .sidebar-compact-search {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1);
  transition-delay: 55ms;
}
.sidebar-compact .agent-list {
  padding-inline: 12px;
}
.sidebar-compact .sidebar-chat-group {
  position: relative;
}
.sidebar-compact .sidebar-chat-group + .sidebar-chat-group {
  margin-top: 4px;
}
.sidebar-compact .sidebar-chat-group > header {
  height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  white-space: nowrap;
}
.sidebar-compact .agent-row {
  padding-inline: 8px;
}
.sidebar-compact .agent-row-avatar {
  transform: translateX(6px);
}
.sidebar-compact .agent-row.sidebar-pinned-row {
  width: 60px;
  height: 60px;
  min-height: 60px;
  padding: 6px;
}
.sidebar-compact .sidebar-pinned-item {
  width: 60px;
  flex-basis: 60px;
}
.sidebar-compact .agent-row.sidebar-pinned-row .sidebar-pinned-avatar {
  transform: none;
}
.sidebar-compact .sidebar-pinned-copy {
  display: none;
}
.sidebar-compact .agent-row-copy {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-8px);
}
.agent-tasks-row {
  display: grid;
  width: 100%;
  height: var(--openbot-control-md);
  align-items: center;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  padding: 0 var(--openbot-space-2);
  grid-template-columns: 16px minmax(0, 1fr) auto;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  letter-spacing: -0.01em;
  text-align: left;
  transition: background-color var(--openbot-duration-hover) ease;
}
.agent-tasks-row:hover:not(:disabled) {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}
.agent-tasks-row:disabled {
  cursor: default;
  opacity: 0.45;
}
.agent-tasks-row:focus-visible {
  outline: 0;
  background: var(--openbot-bg-control-hover);
  box-shadow: inset 0 0 0 1px var(--openbot-border-strong);
}
.agent-tasks-row small {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.agent-tasks-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--openbot-icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--openbot-text-primary);
}
.icon-spinning {
  animation: account-update-spin 800ms linear infinite;
}
@keyframes account-update-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .server-rail-mark, .server-rail-server-item, .sidebar-section, .sidebar-pinned-item {
    transition: none;
  }
  .sidebar-section-chevron, .sidebar-section-collapse, .sidebar-section-toggle, .sidebar-pinned-group-empty-target, .sidebar-pinned-empty-drop {
    transition: none;
  }
  .account-usage-popover {
    transform: none;
    transition: opacity var(--openbot-duration-fast) ease;
    @starting-style {
      opacity: 0;
      transform: none;
    }
  }
  .account-usage-refresh > svg {
    transition: none;
  }
  .account-usage-refresh:hover:not(:disabled) > svg {
    transform: none;
  }
  .icon-spinning {
    animation-duration: 1.6s;
  }
}
.server-rail, .sidebar {
  background: var(--openbot-bg-sidebar);
}
.server-rail-monogram, .server-rail-action .server-rail-monogram {
  border-color: var(--openbot-border);
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-secondary);
}
.person-avatar.online > i {
  background: var(--openbot-success);
}
.sidebar-icon-button:hover, .header-panel-toggle:hover, .browser-toolbar-button:hover:not(:disabled), .message-action-button:hover, .message-action-button:focus-visible, .message-action-button[aria-expanded="true"], .reaction-picker-row button:hover, .reaction-picker-row button:focus-visible, .reaction-picker-row button[aria-checked="true"], .composer-button:hover, .composer-attachment > button:hover, .agent-tasks-row:hover, .agent-context-menu button:hover, .agent-context-menu button:focus-visible {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}
.sidebar-icon-button:active, .header-panel-toggle:active, .agent-row:active, .composer-button:active, .voice-button:active, .settings-panel-nav-button:active {
  transform: scale(0.97);
}
.agent-row:hover {
  background: var(--openbot-bg-control);
}
.agent-list[data-sidebar-dragging] .agent-row:hover {
  background: transparent;
}
.agent-list[data-sidebar-dragging] .agent-row.agent-row-active, .agent-list[data-sidebar-dragging] .agent-row.agent-row-active:hover {
  background: var(--openbot-bg-surface);
}
.settings-panel-content {
  color: var(--openbot-text-primary);
}
.agent-settings-notifications, .provider-model-panel, .provider-model-rail, .avatar-editor {
  border-color: var(--openbot-border);
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-primary);
}
.choice-key, .composer-mention-token, .remote-desktop-empty-mark {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-secondary);
}
.server-rail-muted {
  position: absolute;
  right: 0;
  bottom: 0;
  color: var(--openbot-text-secondary);
  background: var(--openbot-bg-sidebar);
  border-radius: var(--openbot-radius-sm);
}
@keyframes server-sleep-waking {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}
@media (prefers-reduced-motion: reduce) {
  .server-menu-sleep[data-state="waking"], .sidebar-server-name > .sidebar-server-name-sleep[data-state="waking"] {
    animation: none;
  }
}
.ui-action-menu:not([data-menu-layout="grid"]) .server-rail-menu-detail-item {
  height: auto;
}
.server-rail-menu-label {
  display: flex;
  flex-direction: column;
}
.server-rail-menu-detail {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.sidebar-view-switch {
  padding: 2px 12px 6px;
}
.sidebar-view-tabs.ui-sliding-tabs {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sidebar-view-tab.ui-sliding-tabs-trigger {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-1);
  overflow: hidden;
  padding-inline: var(--openbot-space-1);
  font-size: var(--openbot-text-sm);
  white-space: nowrap;
}
.sidebar-view-tab svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: none;
}
.account-update-island {
  --panel-open-dur: calc(var(--openbot-duration-slow) + var(--openbot-duration-slow));
  --panel-close-dur: calc(var(--openbot-duration-slow) + var(--openbot-duration-normal));
  --panel-translate-y: calc(100% - var(--openbot-space-3));
  --panel-blur: var(--openbot-space-0-5);
  --panel-ease: var(--openbot-ease-out);
  --text-swap-dur: var(--openbot-duration-normal);
  --text-swap-translate-y: var(--openbot-space-1);
  --text-swap-blur: var(--openbot-space-0-5);
  --text-swap-ease: var(--openbot-ease-in-out);
  --digit-dur: var(--openbot-duration-slow);
  --digit-distance: var(--openbot-space-1);
  --digit-stagger: calc(var(--openbot-duration-fast) - var(--openbot-duration-dialog));
  --digit-blur: var(--openbot-space-0-5);
  --digit-ease: var(--openbot-ease-out);
  --digit-dir-x: 0;
  --digit-dir-y: 1;
  position: absolute;
  z-index: 0;
  right: var(--openbot-space-4);
  bottom: var(--openbot-control-xl);
  left: var(--openbot-space-4);
  display: grid;
  min-height: calc(var(--openbot-control-xl) + var(--openbot-radius-card));
  align-items: center;
  border: 0;
  border-radius: var(--openbot-radius-lg) var(--openbot-radius-lg) var(--openbot-radius-md) var(--openbot-radius-md);
  background: var(--openbot-accent-strong);
  box-shadow: 0 0 0 1px var(--openbot-accent-soft);
  -webkit-backdrop-filter: blur(var(--openbot-space-3));
  backdrop-filter: blur(var(--openbot-space-3));
  padding: calc(var(--openbot-space-1) + 1px) var(--openbot-space-1-5) calc(var(--openbot-space-4) + var(--openbot-space-1) - 1px);
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--openbot-space-2);
  color: var(--openbot-accent-text);
  -webkit-font-smoothing: antialiased;
}
.account-update-island.t-panel-slide {
  transform: translateY(var(--panel-translate-y));
  opacity: 0;
  filter: blur(var(--panel-blur));
  pointer-events: none;
  transition: transform var(--panel-close-dur) var(--panel-ease), opacity var(--panel-close-dur) var(--panel-ease), filter var(--panel-close-dur) var(--panel-ease);
  will-change: transform, opacity, filter;
}
.account-update-island.t-panel-slide[data-open="true"] {
  transform: translateY(0);
  opacity: 1;
  filter: blur(0);
  pointer-events: auto;
  transition: transform var(--panel-open-dur) var(--panel-ease), opacity var(--panel-open-dur) var(--panel-ease), filter var(--panel-open-dur) var(--panel-ease);
}
@starting-style {
  .account-update-island.t-panel-slide[data-open="true"] {
    transform: translateY(var(--panel-translate-y));
    opacity: 0;
    filter: blur(var(--panel-blur));
  }
}
.account-update-island__copy {
  min-width: 0;
}
.account-update-island__copy strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--openbot-accent-text);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-sm);
  white-space: nowrap;
}
.account-update-island .t-update-text-swap {
  display: inline-grid;
}
.account-update-island .t-update-text-swap > [data-text] {
  grid-area: 1 / 1;
  transform: translateY(0);
  opacity: 1;
  filter: blur(0);
  transition: transform var(--text-swap-dur) var(--text-swap-ease), filter var(--text-swap-dur) var(--text-swap-ease), opacity var(--text-swap-dur) var(--text-swap-ease);
  will-change: transform, filter, opacity;
}
.account-update-island .t-update-text-swap:is([data-state="available"], [data-state="action"]) > [data-text]:is([data-text="ready"], [data-text="progress"], [data-text="error"]) {
  transform: translateY(var(--text-swap-translate-y));
  opacity: 0;
  filter: blur(var(--text-swap-blur));
}
.account-update-island .t-update-text-swap:is([data-state="ready"], [data-state="progress"]) > [data-text]:is([data-text="available"], [data-text="action"], [data-text="error"]) {
  transform: translateY(calc(var(--text-swap-translate-y) * -1));
  opacity: 0;
  filter: blur(var(--text-swap-blur));
}
.account-update-island .t-update-text-swap[data-state="error"] > [data-text]:not([data-text="error"]) {
  transform: translateY(calc(var(--text-swap-translate-y) * -1));
  opacity: 0;
  filter: blur(var(--text-swap-blur));
}
.account-update-island__action-shell {
  position: relative;
  display: grid;
  min-width: calc( var(--openbot-control-xl) + var(--openbot-control-xl) + var(--openbot-space-6) + var(--openbot-space-1) );
  flex-shrink: 0;
}
.account-update-island__action.ui-button {
  width: 100%;
  height: var(--openbot-control-sm);
  min-height: var(--openbot-control-sm);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-surface-light);
  box-shadow: 0 1px 2px var(--openbot-shadow-popover-ambient);
  padding: 0 var(--openbot-space-3) 0 var(--openbot-space-2);
  color: var(--openbot-text-on-light);
  transition: box-shadow var(--openbot-duration-normal) var(--openbot-ease-out), transform var(--openbot-duration-fast) var(--openbot-ease-out);
}
.account-update-island__action.ui-button::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% + var(--openbot-space-4));
  min-width: var(--openbot-control-xl);
  height: var(--openbot-control-xl);
  transform: translate(-50%, -50%);
  content: "";
}
.account-update-island__action.ui-button:disabled {
  cursor: progress;
  opacity: 1;
}
.account-update-island__action-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-1-5);
}
.account-update-island__action-label {
  min-width: calc(var(--openbot-control-xl) + var(--openbot-space-3));
  color: var(--openbot-text-on-light);
  font-weight: var(--openbot-weight-semibold);
  text-align: left;
}
.account-update-island__progress-value {
  display: inline-grid;
  align-items: baseline;
  grid-template-columns: 3ch max-content;
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.account-update-island__progress-digits {
  display: inline-flex;
  justify-content: flex-end;
}
.account-update-island__progress-suffix, .account-update-island__busy-label {
  display: inline-block;
}
@keyframes account-update-digit-pop-in {
  0% {
    transform: translate( calc(var(--digit-distance) * var(--digit-dir-x)), calc(var(--digit-distance) * var(--digit-dir-y)) );
    opacity: 0.4;
    filter: blur(var(--digit-blur));
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
    filter: blur(0);
  }
}
.account-update-island__progress-value .t-digit {
  display: inline-block;
  will-change: transform, opacity, filter;
}
.account-update-island__progress-digits.is-animating .t-digit {
  animation: account-update-digit-pop-in var(--digit-dur) var(--digit-ease) both;
}
.account-update-island__progress-digits.is-animating .t-digit[data-stagger="1"] {
  animation-delay: var(--digit-stagger);
}
.account-update-island__progress-digits.is-animating .t-digit[data-stagger="2"] {
  animation-delay: calc(var(--digit-stagger) * 2);
}
.account-update-island__action-shell[data-downloading="true"] .account-update-island__action-label {
  min-width: var(--openbot-control-md);
  text-align: center;
}
.account-update-island__action-shell[data-downloading="true"] .account-update-island__action.ui-button {
  padding-inline: var(--openbot-space-2);
}
.account-update-island__icon.t-icon-swap {
  --icon-swap-dur: var(--openbot-duration-overlay);
  --icon-swap-blur: var(--openbot-space-0-5);
  --icon-swap-start-scale: 0.25;
  --icon-swap-ease: var(--openbot-ease-in-out);
  position: relative;
  display: inline-grid;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  place-items: center;
}
.account-update-island__icon.t-icon-swap .t-icon {
  position: relative;
  top: 1px;
  display: grid;
  grid-area: 1 / 1;
  place-items: center;
  transition: opacity var(--icon-swap-dur) var(--icon-swap-ease), filter var(--icon-swap-dur) var(--icon-swap-ease), transform var(--icon-swap-dur) var(--icon-swap-ease);
  will-change: opacity, filter, transform;
}
.account-update-island__icon.t-icon-swap svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.account-update-island__icon.t-icon-swap .ui-spinner {
  border-color: var(--openbot-text-dim-on-light);
  border-top-color: currentColor;
}
.account-update-island__icon.t-icon-swap[data-state="a"] .t-icon[data-icon="a"], .account-update-island__icon.t-icon-swap[data-state="b"] .t-icon[data-icon="b"] {
  transform: scale(1);
  opacity: 1;
  filter: blur(0);
}
.account-update-island__icon.t-icon-swap[data-state="a"] .t-icon[data-icon="b"], .account-update-island__icon.t-icon-swap[data-state="b"] .t-icon[data-icon="a"] {
  transform: scale(var(--icon-swap-start-scale));
  opacity: 0;
  filter: blur(var(--icon-swap-blur));
}
.account-update-island__action.ui-button:active:not(:disabled):not([data-disabled]) {
  transform: scale(0.96);
}
@media (hover: hover) and (pointer: fine) {
  .account-update-island__action.ui-button:hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-surface-light);
    box-shadow: 0 0 0 1px var(--openbot-text-dim-on-light), 0 1px 2px var(--openbot-shadow-popover-ambient);
    color: var(--openbot-text-on-light);
  }
}
@media (prefers-reduced-motion: reduce) {
  .account-update-island.t-panel-slide, .account-update-island__action.ui-button, .account-update-island__icon.t-icon-swap .t-icon, .account-update-island .t-update-text-swap > [data-text] {
    transition: none;
  }
  .account-update-island__progress-value .t-digit {
    animation: none;
  }
}
.sidebar-update-island > .account-update-island {
  position: relative;
  inset: auto;
  min-height: 0;
  margin: var(--openbot-space-2) var(--openbot-space-3) var(--openbot-space-3);
  border-radius: var(--openbot-radius-lg);
  padding: var(--openbot-space-1-5) var(--openbot-space-1-5) var(--openbot-space-1-5) var(--openbot-space-3);
}
.join-server-backdrop {
  animation: join-server-backdrop-in var(--modal-open-dur) var(--modal-ease) both;
  will-change: opacity;
}
.join-server-backdrop[data-motion="closing"] {
  animation: join-server-backdrop-out var(--modal-close-dur) var(--modal-ease) both;
}
.join-server-dialog {
  position: relative;
  width: min(420px, 100%);
  max-height: calc(100dvh - 48px);
  overflow: hidden;
  outline: 0;
  border-radius: var(--openbot-radius-xl);
  background: var(--openbot-bg-sidebar);
  color: var(--openbot-text-primary);
  box-shadow: 0 0 0 1px var(--openbot-border-strong), 0 24px 64px var(--openbot-shadow-dialog);
}
.join-server-close {
  position: absolute;
  top: var(--openbot-space-6);
  right: var(--openbot-space-6);
  z-index: 2;
  color: var(--openbot-text-muted);
}
.join-server-content {
  width: 100%;
  max-height: inherit;
  overflow-y: auto;
  padding: 32px;
}
.join-server-pages {
  --join-server-reference: 0px;
  width: 100%;
  height: 336px;
  overflow: hidden;
  transition: height var(--page-slide-dur) var(--page-slide-ease);
}
.join-server-pages[data-reference] {
  --join-server-reference: calc(var(--openbot-control-xs) + var(--openbot-space-0-5));
}
.join-server-pages[data-page="1"][data-preview-error] {
  height: calc(356px + var(--join-server-reference));
}
.join-server-pages[data-page="2"] {
  height: 292px;
}
.join-server-pages[data-page="2"][data-error] {
  height: calc(364px + var(--join-server-reference));
}
.join-server-page {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--openbot-space-4) + var(--openbot-space-1));
  margin: 0;
}
.join-server-header {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.join-server-header-entry {
  gap: var(--openbot-space-2);
  padding-inline: calc(var(--openbot-space-4) + var(--openbot-space-1));
}
.join-server-header-entry .ui-heading {
  font-size: var(--openbot-text-3xl);
  font-weight: var(--openbot-weight-bold);
  line-height: var(--openbot-leading-3xl);
}
.join-server-header-entry .ui-text {
  font-size: var(--openbot-text-lg);
}
.join-server-header-verified {
  gap: var(--openbot-space-2);
  padding-inline: var(--openbot-space-2);
}
.join-server-header .ui-text {
  max-width: 296px;
  line-height: var(--openbot-leading-sm);
}
.join-server-entry-logo {
  --app-logo-background: var(--openbot-surface-light);
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  margin-bottom: var(--openbot-space-4);
  border-radius: var(--openbot-radius-xl);
  box-shadow: 0 12px 28px var(--openbot-shadow-dialog), inset 0 1px 0 var(--openbot-border-strong);
}
.join-server-field {
  gap: var(--openbot-space-2);
}
.join-server-link-input.ui-input {
  height: var(--openbot-control-xl);
  background: var(--openbot-bg-control);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
}
.join-server-link-input.ui-input:focus-visible {
  outline: none;
  box-shadow: none;
}
.join-server-link-input.ui-input.is-error {
  border-color: var(--openbot-danger);
}
.join-server-field .ui-field-error {
  min-height: var(--openbot-leading-sm);
}
.join-server-identity-logo {
  --app-logo-background: var(--openbot-surface-light);
  width: 88px;
  height: 88px;
  flex: 0 0 auto;
  margin-bottom: var(--openbot-space-6);
  border-radius: var(--openbot-radius-modal);
  box-shadow: 0 16px 36px var(--openbot-shadow-dialog), inset 0 1px 0 var(--openbot-border-strong);
}
.join-server-invite-eyebrow {
  margin-bottom: 2px;
  font-size: var(--openbot-text-lg);
}
.join-server-header-verified .ui-heading {
  font-size: var(--openbot-text-3xl);
  font-weight: var(--openbot-weight-bold);
  line-height: var(--openbot-leading-3xl);
}
.join-server-hostname.ui-text {
  max-width: 260px;
  color: var(--openbot-text-muted);
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-lg);
}
.join-server-alert.ui-alert {
  align-self: start;
  padding-block: var(--openbot-space-2);
}
.join-server-alert .ui-alert-description {
  white-space: normal;
}
.join-server-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--openbot-space-2);
  margin-top: auto;
}
.join-server-actions .ui-button {
  width: 100%;
}
.join-server-actions-verified {
  gap: var(--openbot-space-1);
}
.join-server-preview {
  display: grid;
  gap: var(--openbot-space-3);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-4);
}
.join-server-preview-signal {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.join-server-preview-signal i, .join-server-preview-signal span {
  display: block;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success);
}
.join-server-preview-signal i {
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 4px var(--openbot-success-soft);
}
.join-server-preview-signal span {
  width: 42px;
  height: 1px;
  opacity: 0.52;
}
.join-server-preview-heading {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.join-server-verified {
  color: var(--openbot-success);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.join-server-preview-heading strong, .join-server-preview-heading small, .join-server-preview dd {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.join-server-preview-heading strong {
  font-size: var(--openbot-text-lg);
}
.join-server-preview-heading small, .join-server-preview dt, .join-server-preview p {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.join-server-preview dl {
  display: grid;
  gap: var(--openbot-space-2);
  margin: 0;
}
.join-server-preview dl div {
  min-width: 0;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: var(--openbot-space-2);
}
.join-server-preview dd {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.join-server-preview p {
  margin: 0;
  line-height: var(--openbot-leading-sm);
}
@keyframes join-server-backdrop-in {
  from {
    opacity: 0;
  }
}
@keyframes join-server-backdrop-out {
  to {
    opacity: 0;
  }
}
@media (max-width: 560px) {
  .join-server-backdrop {
    padding: var(--openbot-space-3);
  }
  .join-server-dialog {
    width: 100%;
    max-height: calc(100dvh - 24px);
  }
  .join-server-close {
    top: var(--openbot-space-3);
    right: var(--openbot-space-3);
  }
  .join-server-content {
    padding: var(--openbot-space-6);
  }
  .join-server-pages {
    height: 348px;
  }
  .join-server-pages[data-page="1"][data-preview-error] {
    height: calc(368px + var(--join-server-reference));
  }
  .join-server-pages[data-page="2"] {
    height: 304px;
  }
  .join-server-pages[data-page="2"][data-error] {
    height: calc(376px + var(--join-server-reference));
  }
}
@media (prefers-reduced-motion: reduce) {
  .join-server-backdrop {
    animation: none;
  }
  .join-server-pages {
    transition: none;
  }
}
.add-server-dialog {
  width: min(460px, 100%);
  transition: width var(--openbot-duration-normal) var(--openbot-ease-out);
}
.add-server-dialog[data-step="pricing"] {
  width: min(calc(760px + var(--add-server-extra-price-chars, 0) * 48px), 100%);
}
.add-server-step {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-6);
  margin: 0;
  animation: add-server-step-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}
.add-server-step .ui-heading:focus {
  outline: none;
}
.add-server-pricing {
  gap: var(--openbot-space-4);
}
.add-server-dialog[data-step="pricing"] .join-server-content {
  padding: var(--openbot-space-6);
}
.add-server-limit.ui-alert {
  align-self: stretch;
}
.add-server-intro {
  gap: var(--openbot-space-2);
  padding-block: var(--openbot-space-2);
}
.add-server-intro .ui-heading, .add-server-intro .ui-text {
  margin: 0;
  text-wrap: balance;
}
.add-server-intro .ui-heading {
  padding-inline: calc(var(--openbot-control-md) + var(--openbot-space-2));
  font-size: var(--openbot-text-3xl);
  font-weight: var(--openbot-weight-bold);
  line-height: var(--openbot-leading-3xl);
  letter-spacing: var(--openbot-tracking-tight);
}
.add-server-intro .ui-text {
  max-width: 560px;
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
.add-server-bar {
  position: relative;
  min-height: var(--openbot-control-md);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-2);
  padding-inline: calc(var(--openbot-control-md) + var(--openbot-space-2));
}
.add-server-bar .hosted-currency {
  position: absolute;
  top: 50%;
  left: 0;
  width: auto;
  flex: 0 0 auto;
  transform: translateY(-50%);
}
.hosted-billing {
  --hosted-billing-ease: cubic-bezier(0.34, 1.36, 0.64, 1);
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 3px;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-canvas);
}
.hosted-billing::before {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control-active);
  box-shadow: inset 0 0 0 1px var(--openbot-border);
  transition: transform 300ms var(--hosted-billing-ease);
}
.hosted-billing[data-billing="yearly"]::before {
  transform: translateX(100%);
}
.hosted-billing-option {
  position: relative;
  z-index: 1;
  display: flex;
}
.hosted-billing-control {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-1) var(--openbot-space-4);
  border-radius: var(--openbot-radius-pill);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--openbot-duration-normal) var(--openbot-ease-out);
}
.hosted-billing-control[data-checked] {
  color: var(--openbot-text-primary);
}
.hosted-billing-option:has(:focus-visible) .hosted-billing-control {
  box-shadow: var(--openbot-focus-ring);
}
.hosted-billing-save {
  padding: 0 var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-md);
  transition: color var(--openbot-duration-overlay) var(--openbot-ease-out), background-color var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.hosted-billing[data-billing="yearly"] .hosted-billing-save {
  background: var(--openbot-success-soft);
  color: var(--openbot-success-text);
  animation: hosted-billing-save-pop 300ms var(--hosted-billing-ease) 80ms both;
}
.hosted-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-canvas);
  list-style: none;
}
.hosted-plan {
  position: relative;
  isolation: isolate;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: var(--openbot-space-6);
  transition: opacity var(--openbot-duration-overlay) var(--openbot-ease-out), background-color var(--openbot-duration-normal) var(--openbot-ease-out);
  animation: hosted-plan-in var(--openbot-duration-overlay) var(--openbot-ease-out) calc(var(--plan-index) * 40ms + 60ms) backwards;
}
.hosted-plan + .hosted-plan {
  border-left: 1px solid var(--openbot-border);
}
.hosted-plan[data-recommended] {
  background: var(--openbot-bg-surface);
}
.hosted-plan[data-dimmed] {
  opacity: 0.5;
}
.hosted-plan[data-recommended]::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--openbot-accent), var(--openbot-warning), transparent);
  opacity: 0.8;
  pointer-events: none;
}
.hosted-plan[data-recommended]::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  height: 50%;
  background: linear-gradient(90deg, var(--openbot-accent), var(--openbot-warning));
  opacity: 0.22;
  mask-image: radial-gradient(90% 100% at 50% 100%, var(--openbot-text-primary), transparent);
  pointer-events: none;
  transition: opacity var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.hosted-plan-head {
  height: var(--openbot-control-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.hosted-plan-name {
  margin: 0;
  color: var(--openbot-accent-text);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
}
.hosted-plan-badge {
  border-color: transparent;
  background: var(--openbot-surface-light);
  color: var(--openbot-text-on-light);
}
.hosted-plan-price {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin: var(--openbot-space-4) 0 0;
}
.hosted-plan-was {
  display: grid;
  grid-template-columns: 0fr;
  align-self: center;
  opacity: 0;
  transition: grid-template-columns var(--openbot-duration-overlay) var(--openbot-ease-out), opacity var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.hosted-plan-was[data-shown] {
  grid-template-columns: 1fr;
  opacity: 1;
}
.hosted-plan-was-inner {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.hosted-plan-was s {
  display: inline-block;
  margin-right: var(--openbot-space-2);
  color: var(--openbot-text-dim);
  font-size: var(--openbot-text-xl);
  line-height: var(--openbot-leading-xl);
  font-variant-numeric: tabular-nums;
  text-decoration-thickness: 1px;
}
.hosted-plan-now {
  display: flex;
  align-items: flex-start;
  white-space: nowrap;
}
.hosted-plan-amount {
  --digit-distance: 12px;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-display);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-display);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.hosted-plan-period {
  white-space: nowrap;
  margin-left: var(--openbot-space-1);
  padding-top: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.hosted-plan-billed {
  display: flex;
  flex-wrap: wrap;
  margin: var(--openbot-space-1) 0 0;
  color: var(--openbot-text-dim);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  animation: add-server-step-in var(--openbot-duration-overlay) var(--openbot-ease-out) both;
}
.hosted-plan-billed-total {
  white-space: nowrap;
}
.hosted-plan-saving {
  color: var(--openbot-success-text);
  white-space: nowrap;
}
.hosted-plan-saving::before {
  content: "\00b7" / "";
  margin: 0 var(--openbot-space-1);
  color: var(--openbot-text-dim);
}
.hosted-plan-summary {
  margin: var(--openbot-space-4) 0 var(--openbot-space-6);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.hosted-plan-choose.ui-button {
  margin-top: auto;
}
.hosted-plan-facts {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
  margin: var(--openbot-space-6) 0 0;
  padding: var(--openbot-space-4) 0 0;
  border-top: 1px dashed var(--openbot-border);
  list-style: none;
}
.hosted-plan-facts li {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.hosted-plan-facts svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  transition: color var(--openbot-duration-normal) var(--openbot-ease-out);
}
.add-server-custom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-4);
  padding: 0 var(--openbot-space-1);
}
.add-server-custom-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.add-server-custom-text .ui-text {
  margin: 0;
}
.add-server-custom .ui-button {
  flex: 0 0 auto;
}
.add-server-join {
  margin: 0;
  text-align: center;
}
.add-server-progress {
  align-items: stretch;
  gap: var(--openbot-space-6);
}
.add-server-progress .join-server-header {
  gap: var(--openbot-space-2);
}
.add-server-ring {
  position: relative;
  width: 96px;
  height: 96px;
  margin: var(--openbot-space-2) auto 0;
  display: grid;
  place-items: center;
}
.add-server-ring-segments {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke-width: 4;
  transform: rotate(-90deg);
}
.add-server-ring-segment circle {
  stroke-dasharray: 30.33 100;
  transition: stroke-dasharray var(--openbot-duration-normal) var(--openbot-ease-out), stroke-dashoffset var(--openbot-duration-slow) var(--openbot-ease-out), stroke var(--openbot-duration-slow) var(--openbot-ease-out);
}
.add-server-ring-segment:nth-child(1) circle {
  stroke-dashoffset: -1.5;
}
.add-server-ring-segment:nth-child(2) circle {
  stroke-dashoffset: -34.83;
}
.add-server-ring-segment:nth-child(3) circle {
  stroke-dashoffset: -68.17;
}
.add-server-ring-track {
  stroke: var(--openbot-border);
}
.add-server-ring-segment .add-server-ring-fill {
  stroke: var(--openbot-accent);
}
.add-server-ring-segment[data-state="pending"] .add-server-ring-fill {
  stroke-dasharray: 0 100;
}
.add-server-ring-segment[data-state="active"] .add-server-ring-fill {
  --add-server-step-creep: 20s;
  stroke-dasharray: 27.3 100;
  transition: stroke-dasharray var(--add-server-step-creep) cubic-bezier(0.05, 0.7, 0.1, 1);
  animation: add-server-segment-breathe 1.6s var(--openbot-ease-in-out) infinite alternate;
  @starting-style {
    stroke-dasharray: 0 100;
  }
}
.add-server-ring-segment[data-state="failed"] .add-server-ring-fill {
  stroke: var(--openbot-danger);
}
.add-server-progress[data-status="ready"] .add-server-ring-segment circle {
  stroke-dasharray: 33.4 100;
  stroke: var(--openbot-success);
}
.add-server-progress[data-status="ready"] .add-server-ring-segment:nth-child(1) circle {
  stroke-dashoffset: 0;
}
.add-server-progress[data-status="ready"] .add-server-ring-segment:nth-child(2) circle {
  stroke-dashoffset: -33.33;
}
.add-server-progress[data-status="ready"] .add-server-ring-segment:nth-child(3) circle {
  stroke-dashoffset: -66.67;
}
.add-server-ring-core {
  position: relative;
  width: 72px;
  height: 72px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--openbot-space-1);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface);
  box-shadow: inset 0 0 0 1px var(--openbot-border);
  transition: opacity var(--openbot-duration-normal) var(--openbot-ease-out), transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.add-server-light {
  position: relative;
  width: 42px;
  height: 13px;
  border: 1px solid var(--openbot-text-dim);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--openbot-text-dim) 55%, transparent);
  }
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-sidebar);
}
.add-server-light::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  width: 16px;
  height: 1px;
  background: var(--openbot-text-dim);
}
.add-server-light::after {
  content: "";
  position: absolute;
  top: 3.5px;
  right: 4px;
  width: 4px;
  height: 4px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-dim);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-dim) 55%, transparent);
  }
  transition: background var(--openbot-duration-normal) var(--openbot-ease-out), box-shadow var(--openbot-duration-normal) var(--openbot-ease-out);
}
.add-server-light[data-state="active"]::after {
  background: var(--openbot-accent);
  box-shadow: 0 0 6px var(--openbot-accent);
  animation: add-server-light-flicker 1.3s steps(1, end) infinite;
}
.add-server-light[data-state="done"]::after {
  background: var(--openbot-success);
  box-shadow: 0 0 6px var(--openbot-success);
}
.add-server-light[data-state="failed"]::after {
  background: var(--openbot-danger);
  box-shadow: 0 0 6px var(--openbot-danger);
}
.add-server-progress:is([data-status="ready"], [data-status="error"]) .add-server-ring-core {
  opacity: 0;
  transform: scale(0.7);
}
.add-server-ring-result {
  position: absolute;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success);
  color: var(--openbot-text-on-accent);
  animation: add-server-pop var(--openbot-duration-overlay) var(--openbot-ease-out) var(--openbot-duration-normal) both;
}
.add-server-ring-result[data-tone="danger"] {
  background: var(--openbot-danger);
}
.add-server-ring-result svg {
  width: 32px;
  height: 32px;
}
.add-server-ring-result svg path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: add-server-check-draw var(--openbot-duration-slow) var(--openbot-ease-out) var(--openbot-duration-slow) forwards;
}
.add-server-ticker {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  animation: add-server-detail-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}
.add-server-confetti {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.add-server-confetti i {
  position: absolute;
  top: var(--confetti-origin-y);
  left: var(--confetti-origin-x);
  width: 7px;
  height: 12px;
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-accent);
  opacity: 0;
  animation: add-server-confetti var(--confetti-duration) var(--openbot-ease-out) var(--confetti-delay) both;
}
.add-server-confetti i:nth-child(5n + 1) {
  background: var(--openbot-success);
}
.add-server-confetti i:nth-child(5n + 2) {
  background: var(--openbot-warning);
}
.add-server-confetti i:nth-child(5n + 3) {
  background: var(--openbot-danger);
}
.add-server-confetti i:nth-child(5n + 4) {
  background: var(--openbot-accent-text);
}
.add-server-confetti i:nth-child(3n) {
  width: 8px;
  height: 8px;
  border-radius: var(--openbot-radius-pill);
}
@keyframes add-server-confetti {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.3) rotate(0deg);
  }
  30% {
    opacity: 1;
    transform: translate(calc(-50% + var(--confetti-x)), calc(-50% + var(--confetti-y))) rotate(calc(var(--confetti-spin) / 2)) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--confetti-x) * 1.15), calc(-50% + var(--confetti-y) + 360px)) rotate(var(--confetti-spin)) scale(0.9);
  }
}
@keyframes hosted-billing-save-pop {
  50% {
    transform: scale(1.1);
  }
}
@keyframes hosted-plan-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}
@keyframes add-server-step-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}
@keyframes add-server-pop {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
}
@keyframes add-server-check-draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes add-server-light-flicker {
  0%, 22%, 34%, 58%, 64%, 88% {
    opacity: 1;
  }
  18%, 30%, 54%, 61%, 84% {
    opacity: 0.25;
  }
}
@keyframes add-server-segment-breathe {
  to {
    opacity: 0.55;
  }
}
@keyframes add-server-detail-in {
  from {
    opacity: 0;
    transform: translateY(8px);
    filter: blur(2px);
  }
}
@media (hover: hover) {
  .hosted-plan:not([data-recommended]):hover {
    background: var(--openbot-bg-surface);
  }
  .hosted-plan[data-recommended]:hover::after {
    opacity: 0.3;
  }
  .hosted-plan:hover .hosted-plan-facts svg {
    color: var(--openbot-text-secondary);
  }
}
@media (max-width: 720px) {
  .hosted-plans {
    grid-template-columns: minmax(0, 1fr);
  }
  .hosted-plan + .hosted-plan {
    border-top: 1px solid var(--openbot-border);
    border-left: 0;
  }
}
@media (max-width: 560px) {
  .add-server-intro .ui-heading {
    font-size: var(--openbot-text-2xl);
    line-height: var(--openbot-leading-2xl);
  }
  .add-server-intro .ui-text {
    font-size: var(--openbot-text-md);
    line-height: var(--openbot-leading-md);
  }
  .add-server-bar {
    padding: calc(var(--openbot-control-md) + var(--openbot-space-1)) 0 0;
  }
  .add-server-bar .hosted-billing {
    flex: 1;
  }
  .add-server-bar .hosted-currency {
    top: 0;
    transform: none;
  }
  .add-server-custom {
    flex-direction: column;
    align-items: stretch;
  }
  .add-server-limit.ui-alert {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }
  .add-server-limit .ui-alert-actions {
    grid-column: 2;
    justify-content: flex-start;
  }
}
@media (prefers-reduced-motion: reduce) {
  .add-server-dialog, .hosted-billing::before, .hosted-billing-control, .hosted-billing-save, .hosted-plan, .hosted-plan-was, .add-server-progress[data-status] .add-server-ring-segment circle, .add-server-progress[data-status] .add-server-ring-core {
    transition: none;
  }
  .add-server-step, .hosted-billing[data-billing="yearly"] .hosted-billing-save, .hosted-plan, .hosted-plan-billed, .add-server-ring-result, .add-server-light[data-state]::after, .add-server-ring-segment[data-state] .add-server-ring-fill, .add-server-ticker {
    animation: none;
  }
  .add-server-ring-result svg path {
    stroke-dashoffset: 0;
    animation: none;
  }
  .add-server-confetti {
    display: none;
  }
}
.hosted-upsell-notice {
  flex: none;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  margin-top: var(--openbot-space-3);
  padding: var(--openbot-space-3);
}
.hosted-upsell-notice .ui-alert-icon {
  width: var(--openbot-space-8);
  height: var(--openbot-space-8);
  padding: var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-md);
  background: linear-gradient(135deg, var(--openbot-beam-blue), var(--openbot-beam-pink));
  color: var(--openbot-text-on-accent);
}
.hosted-upsell-notice .ui-alert-title {
  text-wrap: balance;
}
.hosted-upsell-notice .ui-alert-actions {
  justify-content: flex-start;
  margin-top: var(--openbot-space-2);
}
@property --hosted-upsell-beam-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.hosted-upsell-beam {
  position: relative;
  border-color: transparent;
  background: radial-gradient(120% 140% at 0% 0%, var(--openbot-beam-blue), transparent 60%), var(--openbot-bg-surface-raised);
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--openbot-beam-blue) 12%, transparent), transparent 60%), var(--openbot-bg-surface-raised);
  }
}
.hosted-upsell-beam::before, .hosted-upsell-beam-glow > span {
  position: absolute;
  border-radius: inherit;
  content: "";
  pointer-events: none;
  mask: linear-gradient(currentColor 0 0) content-box exclude, linear-gradient(currentColor 0 0);
  animation: hosted-upsell-beam-turn 6s linear infinite;
}
.hosted-upsell-beam::before {
  inset: 0;
  padding: 1px;
  background: conic-gradient( from var(--hosted-upsell-beam-angle), var(--openbot-beam-blue) 0deg, var(--openbot-beam-blue) 180deg, var(--openbot-beam-teal) 240deg, var(--openbot-beam-blue) 290deg, var(--openbot-beam-pink) 330deg, var(--openbot-beam-blue) 360deg );
  @supports (color: color-mix(in lab, red, red)) {
    background: conic-gradient( from var(--hosted-upsell-beam-angle), color-mix(in srgb, var(--openbot-beam-blue) 18%, transparent) 0deg, color-mix(in srgb, var(--openbot-beam-blue) 18%, transparent) 180deg, var(--openbot-beam-teal) 240deg, var(--openbot-beam-blue) 290deg, var(--openbot-beam-pink) 330deg, color-mix(in srgb, var(--openbot-beam-blue) 18%, transparent) 360deg );
  }
}
.hosted-upsell-beam-glow {
  position: absolute;
  inset: calc(-1 * var(--openbot-space-3));
  border-radius: inherit;
  filter: blur(6px);
  opacity: 0.5;
  pointer-events: none;
}
.hosted-upsell-beam-glow > span {
  inset: var(--openbot-space-3);
  padding: 2px;
  background: conic-gradient( from var(--hosted-upsell-beam-angle), transparent 0deg, transparent 210deg, var(--openbot-beam-teal) 250deg, var(--openbot-beam-blue) 290deg, var(--openbot-beam-pink) 330deg, transparent 360deg );
}
@keyframes hosted-upsell-beam-turn {
  to {
    --hosted-upsell-beam-angle: 360deg;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hosted-upsell-beam::before, .hosted-upsell-beam-glow > span {
    animation: none;
  }
}
.hosted-upsell-modal {
  width: min(420px, 100%);
  display: grid;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-6);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-modal);
  outline: 0;
  color: var(--openbot-text-primary);
  background: var(--openbot-bg-sidebar);
}
.hosted-upsell-modal .hosted-upsell-modal-title {
  margin: 0;
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-lg);
  text-wrap: balance;
}
.hosted-upsell-modal .hosted-upsell-modal-description {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-wrap: pretty;
}
.hosted-upsell-modal .hosted-upsell-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
  margin-top: var(--openbot-space-3);
}
.hosted-upsell-modal .hosted-upsell-scene {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: var(--openbot-space-4);
  padding: var(--openbot-space-6) var(--openbot-space-2) var(--openbot-space-4);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
}
.hosted-upsell-modal .hosted-upsell-device {
  display: grid;
  justify-items: center;
  align-content: end;
  gap: var(--openbot-space-3);
  margin: 0;
}
.hosted-upsell-modal .hosted-upsell-device figcaption {
  display: grid;
  justify-items: center;
  gap: var(--openbot-space-1-5);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.hosted-upsell-modal .hosted-upsell-laptop {
  display: grid;
  justify-items: center;
}
.hosted-upsell-modal .hosted-upsell-laptop-lid {
  width: 88px;
  height: 58px;
  padding: 4px;
  border: 2px solid var(--openbot-border-strong);
  border-bottom: 0;
  border-radius: var(--openbot-radius-sm) var(--openbot-radius-sm) 0 0;
  transform-origin: bottom;
  animation: hosted-upsell-lid 5s ease-in-out infinite;
}
.hosted-upsell-modal .hosted-upsell-laptop-screen {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: var(--openbot-radius-xs);
  color: var(--openbot-text-secondary);
  background: var(--openbot-bg-control);
}
.hosted-upsell-modal .hosted-upsell-laptop-screen svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  animation: hosted-upsell-shown-open 5s ease-in-out infinite;
}
.hosted-upsell-modal .hosted-upsell-laptop-base {
  width: 108px;
  height: 6px;
  border-radius: 0 0 var(--openbot-radius-sm) var(--openbot-radius-sm);
  background: var(--openbot-border-strong);
}
.hosted-upsell-modal .hosted-upsell-rack {
  width: 64px;
  display: grid;
  gap: 4px;
}
.hosted-upsell-modal .hosted-upsell-rack span {
  position: relative;
  height: 18px;
  border: 2px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-sm);
}
.hosted-upsell-modal .hosted-upsell-rack span::after {
  position: absolute;
  top: 50%;
  right: 6px;
  width: 5px;
  height: 5px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success);
  transform: translateY(-50%);
  animation: hosted-upsell-light 1.6s ease-in-out infinite;
  content: "";
}
.hosted-upsell-modal .hosted-upsell-rack span:nth-child(2)::after {
  animation-delay: 0.5s;
}
.hosted-upsell-modal .hosted-upsell-rack span:nth-child(3)::after {
  animation-delay: 1s;
}
.hosted-upsell-modal .hosted-upsell-status {
  display: grid;
  justify-items: center;
  font-weight: var(--openbot-weight-medium);
}
.hosted-upsell-modal .hosted-upsell-status > span {
  grid-area: 1 / 1;
  padding: 2px var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
  white-space: nowrap;
}
.hosted-upsell-modal .hosted-upsell-status .hosted-upsell-status-on {
  color: var(--openbot-success-text);
  background: var(--openbot-success);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-success) 16%, transparent);
  }
}
.hosted-upsell-modal .hosted-upsell-status .hosted-upsell-status-off {
  color: var(--openbot-warning-text);
  background: var(--openbot-warning-text);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-warning-text) 14%, transparent);
  }
}
.hosted-upsell-modal .hosted-upsell-status-flip .hosted-upsell-status-on {
  animation: hosted-upsell-shown-open 5s ease-in-out infinite;
}
.hosted-upsell-modal .hosted-upsell-status-flip .hosted-upsell-status-off {
  animation: hosted-upsell-shown-closed 5s ease-in-out infinite;
}
@keyframes hosted-upsell-lid {
  0%, 25% {
    transform: scaleY(1);
  }
  40%, 85% {
    transform: scaleY(0.08);
  }
  100% {
    transform: scaleY(1);
  }
}
@keyframes hosted-upsell-shown-open {
  0%, 30% {
    opacity: 1;
  }
  38%, 88% {
    opacity: 0;
  }
  96%, 100% {
    opacity: 1;
  }
}
@keyframes hosted-upsell-shown-closed {
  0%, 30% {
    opacity: 0;
  }
  38%, 88% {
    opacity: 1;
  }
  96%, 100% {
    opacity: 0;
  }
}
@keyframes hosted-upsell-light {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hosted-upsell-modal .hosted-upsell-laptop-lid, .hosted-upsell-modal .hosted-upsell-laptop-screen svg, .hosted-upsell-modal .hosted-upsell-rack span::after, .hosted-upsell-modal .hosted-upsell-status-flip .hosted-upsell-status-on, .hosted-upsell-modal .hosted-upsell-status-flip .hosted-upsell-status-off {
    animation: none;
  }
  .hosted-upsell-modal .hosted-upsell-laptop-lid {
    transform: scaleY(0.08);
  }
  .hosted-upsell-modal .hosted-upsell-laptop-screen svg, .hosted-upsell-modal .hosted-upsell-status-flip .hosted-upsell-status-on {
    opacity: 0;
  }
}
.hosted-upsell-offline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--openbot-space-2);
  margin: var(--openbot-space-1) 0 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.app-loading .hosted-upsell-offline {
  justify-content: center;
}
.restart-server-steps {
  display: grid;
  gap: var(--openbot-space-1);
  margin: 0;
  padding: var(--openbot-space-2) var(--openbot-space-3);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  list-style: none;
}
.restart-server-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--openbot-space-3);
  padding-block: var(--openbot-space-1-5);
}
.restart-server-step-icon {
  display: grid;
  place-items: center;
  width: var(--openbot-icon-lg);
  height: var(--openbot-leading-md);
  color: var(--openbot-text-dim);
}
.restart-server-step-icon svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.restart-server-step[data-status="done"] .restart-server-step-icon {
  color: var(--openbot-success-text);
}
.restart-server-step[data-status="failed"] .restart-server-step-icon {
  color: var(--openbot-danger-text);
}
.restart-server-step-text {
  display: grid;
  min-width: 0;
}
.restart-server-step-label {
  overflow-wrap: anywhere;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
}
.restart-server-step[data-status="pending"] .restart-server-step-label, .restart-server-step-detail {
  color: var(--openbot-text-muted);
}
.restart-server-step-detail {
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.server-status-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  margin: var(--openbot-space-3) 0 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
.server-update-dialog-body {
  display: grid;
  gap: var(--openbot-space-3);
}
.server-update-step-progress {
  margin-top: var(--openbot-space-1-5);
}
.server-update-step-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-2);
  margin-top: var(--openbot-space-2);
}
.settings-panel {
  --settings-panel-section-gap: 25px;
  position: absolute;
  z-index: 15;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  width: var(--settings-panel-width, 296px);
  flex-direction: column;
  border-left: 1px solid var(--openbot-border);
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
  animation: settings-panel-in var(--openbot-duration-slow) cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.settings-panel-header {
  display: grid;
  height: 39px;
  flex: 0 0 auto;
  grid-template-columns: 32px 1fr 32px;
  align-items: center;
  border-bottom: 1px solid var(--openbot-border);
  padding: 0 10px;
}
.settings-panel-header h2 {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}
.settings-panel-nav-button {
  position: relative;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  padding: 0;
  background: transparent;
  color: var(--openbot-text-secondary);
  transition: background-color var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease, transform var(--openbot-duration-fast) ease;
}
.settings-panel-nav-button::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  content: "";
  transform: translate(-50%, -50%);
}
.settings-panel-nav-button > svg {
  width: 16px;
  height: 16px;
}
.settings-panel-nav-button:hover {
  background: var(--openbot-hover);
  color: var(--openbot-text-primary);
}
.settings-back-icon {
  transform: translateX(-0.5px);
}
.settings-panel-content {
  min-height: 0;
  overflow-y: auto;
  padding: 24px 15px 28px;
}
.settings-field {
  display: block;
  margin: 0 0 17px;
}
.settings-field > span {
  display: block;
  margin: 0 0 6px 8px;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  line-height: 18px;
}
.settings-field input, .settings-field textarea, .settings-field select {
  display: block;
  width: 100%;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  outline: 0;
  background: var(--openbot-shadow-popover-ambient);
  padding: 10px 11px;
  color: var(--openbot-text-primary);
  caret-color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  line-height: 19px;
  transition: border-color var(--openbot-duration-hover) ease, background var(--openbot-duration-hover) ease;
}
.settings-field input, .settings-field select {
  height: 38px;
}
.settings-field select {
  appearance: none;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--openbot-text-secondary) 50%), linear-gradient(135deg, var(--openbot-text-secondary) 50%, transparent 50%);
  background-position: calc(100% - 16px) 16px, calc(100% - 11px) 16px;
  background-repeat: no-repeat;
  background-size: 5px 5px, 5px 5px;
  padding-right: 32px;
}
.settings-field select option {
  background: var(--openbot-bg-control);
  color: var(--openbot-text-primary);
}
.settings-field textarea {
  field-sizing: content;
  min-height: 88px;
  max-height: 240px;
  overflow-y: auto;
}
.settings-field .settings-instructions-input {
  field-sizing: fixed;
  height: 120px;
  min-height: 120px;
  max-height: 120px;
  resize: none;
}
.settings-field input::placeholder, .settings-field textarea::placeholder {
  color: var(--openbot-text-muted);
}
.settings-field input:focus, .settings-field textarea:focus, .settings-field select:focus {
  border-color: var(--openbot-text-muted);
  background: var(--openbot-shadow-popover-ambient);
}
.settings-field input:focus-visible, .settings-field textarea:focus-visible, .settings-field select:focus-visible {
  outline: none;
}
.settings-link-group {
  display: grid;
  width: 100%;
  margin: 7px 0 22px;
  border-top: 1px solid var(--openbot-border);
  border-bottom: 1px solid var(--openbot-border);
}
.settings-link {
  width: 100%;
  min-height: 42px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-3);
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 var(--openbot-space-1);
  text-align: left;
  transition: none;
}
.settings-link + .settings-link {
  border-top: 1px solid var(--openbot-border);
}
.settings-link-label {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.settings-link-icon {
  display: grid;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  place-items: center;
  color: var(--openbot-text-secondary);
}
.settings-link-icon > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.settings-link-value {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
.settings-link-value svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
@media (hover: hover) and (pointer: fine) {
  .settings-link-group .settings-link:hover {
    background: var(--openbot-hover);
    color: var(--openbot-text-primary);
  }
  .settings-link:hover .settings-link-value {
    color: var(--openbot-text-secondary);
  }
}
.settings-link-section {
  display: grid;
  gap: var(--openbot-space-1-5);
}
.settings-link-section-title {
  margin: 0 0 0 var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
}
.settings-link-group-inset {
  margin: 0;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface);
}
.settings-link-group-inset > * + * {
  border-top: 1px solid var(--openbot-border);
}
.settings-link-group-inset > :first-child, .settings-link-group-inset > :first-child > button {
  border-top-left-radius: calc(var(--openbot-radius-md) - 1px);
  border-top-right-radius: calc(var(--openbot-radius-md) - 1px);
}
.settings-link-group-inset > :last-child, .settings-link-group-inset > :last-child > button {
  border-bottom-left-radius: calc(var(--openbot-radius-md) - 1px);
  border-bottom-right-radius: calc(var(--openbot-radius-md) - 1px);
}
.settings-link-group-inset .settings-link {
  min-height: 40px;
  gap: var(--openbot-space-2);
  padding: 0 var(--openbot-space-3);
}
.provider-code-login-backdrop {
  z-index: calc(var(--openbot-layer-dialog) + 1);
}
.provider-code-login-dialog {
  position: relative;
  width: min(420px, 100%);
  max-height: calc(100dvh - var(--openbot-space-6) * 2);
  overflow-y: auto;
  outline: 0;
  border-radius: var(--openbot-radius-xl);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-6);
  color: var(--openbot-text-primary);
  animation: provider-code-login-dialog-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}
.provider-code-login-dialog[data-page] {
  width: min(720px, 100%);
}
.provider-code-login-header {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  padding-right: var(--openbot-space-8);
}
.provider-code-login-title {
  margin: 0;
  font-size: var(--openbot-text-xl);
  line-height: var(--openbot-leading-xl);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: var(--openbot-tracking-tight);
}
.provider-code-login-description {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.provider-code-login-body {
  display: flex;
  flex-direction: column;
  margin-top: var(--openbot-space-6);
}
.provider-code-login-pending {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-8) 0;
  text-align: center;
}
.provider-code-login-code {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-4);
}
.provider-code-login-steps {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  margin: 0;
  padding-left: var(--openbot-space-4);
  list-style: decimal;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  align-self: stretch;
}
.provider-code-login-url {
  display: inline-flex;
  height: auto;
  gap: var(--openbot-space-1-5);
  padding: 0;
}
.provider-code-login-url > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.provider-code-login-value {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  align-self: stretch;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  padding: var(--openbot-space-3) var(--openbot-space-4);
}
.provider-code-login-copy > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.provider-code-login-digits {
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-2xl);
  line-height: var(--openbot-leading-2xl);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: var(--openbot-tracking-wide);
}
.provider-code-login-paste {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-3);
  align-self: stretch;
}
.provider-code-login-expiry {
  margin: 0;
  text-align: center;
}
.provider-use-app-actions {
  flex-direction: row;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
}
.provider-code-login-close {
  position: absolute;
  top: var(--openbot-space-3);
  right: var(--openbot-space-3);
}
@keyframes provider-code-login-dialog-in {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
}
@font-face {
  font-display: block;
  font-family: KaTeX_AMS;
  font-style: normal;
  font-weight: 400;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_AMS-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_AMS-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_AMS-Regular.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Caligraphic;
  font-style: normal;
  font-weight: 700;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Bold.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Bold.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Bold.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Caligraphic;
  font-style: normal;
  font-weight: 400;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Regular.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Fraktur;
  font-style: normal;
  font-weight: 700;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Fraktur-Bold.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Fraktur-Bold.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Fraktur-Bold.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Fraktur;
  font-style: normal;
  font-weight: 400;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Fraktur-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Fraktur-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Fraktur-Regular.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Main;
  font-style: normal;
  font-weight: 700;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-Bold.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-Bold.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-Bold.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Main;
  font-style: italic;
  font-weight: 700;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-BoldItalic.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-BoldItalic.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-BoldItalic.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Main;
  font-style: italic;
  font-weight: 400;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-Italic.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-Italic.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-Italic.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Main;
  font-style: normal;
  font-weight: 400;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Main-Regular.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Math;
  font-style: italic;
  font-weight: 700;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Math-BoldItalic.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Math-BoldItalic.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Math-BoldItalic.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Math;
  font-style: italic;
  font-weight: 400;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Math-Italic.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Math-Italic.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Math-Italic.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: "KaTeX_SansSerif";
  font-style: normal;
  font-weight: 700;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_SansSerif-Bold.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_SansSerif-Bold.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_SansSerif-Bold.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: "KaTeX_SansSerif";
  font-style: italic;
  font-weight: 400;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_SansSerif-Italic.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_SansSerif-Italic.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_SansSerif-Italic.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: "KaTeX_SansSerif";
  font-style: normal;
  font-weight: 400;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_SansSerif-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_SansSerif-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_SansSerif-Regular.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Script;
  font-style: normal;
  font-weight: 400;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Script-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Script-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Script-Regular.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Size1;
  font-style: normal;
  font-weight: 400;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size1-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size1-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size1-Regular.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Size2;
  font-style: normal;
  font-weight: 400;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size2-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size2-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size2-Regular.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Size3;
  font-style: normal;
  font-weight: 400;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size3-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size3-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size3-Regular.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Size4;
  font-style: normal;
  font-weight: 400;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size4-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size4-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Size4-Regular.ttf) format("truetype");
}
@font-face {
  font-display: block;
  font-family: KaTeX_Typewriter;
  font-style: normal;
  font-weight: 400;
  src: url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Typewriter-Regular.woff2) format("woff2"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Typewriter-Regular.woff) format("woff"),url(/@fs/app/node_modules/katex/dist/fonts/KaTeX_Typewriter-Regular.ttf) format("truetype");
}
.katex {
  font: normal 1.21em KaTeX_Main,Times New Roman,serif;
  line-height: 1.2;
  position: relative;
  text-indent: 0;
  text-rendering: auto;
}
.katex * {
  -ms-high-contrast-adjust: none !important;
  border-color: currentColor;
}
.katex .katex-version:after {
  content: "0.18.9";
}
.katex .katex-mathml {
  border: 0;
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.katex .katex-html>.katex-newline {
  display: block;
}
.katex .katex-base {
  position: relative;
  white-space: nowrap;
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
}
.katex .katex-base,.katex .katex-strut {
  display: inline-block;
}
.katex .textbf {
  font-weight: 700;
}
.katex .textit {
  font-style: italic;
}
.katex .textrm {
  font-family: KaTeX_Main;
}
.katex .textsf {
  font-family: KaTeX_SansSerif;
}
.katex .texttt {
  font-family: KaTeX_Typewriter;
}
.katex .mathnormal {
  font-family: KaTeX_Math;
  font-style: italic;
}
.katex .mathit {
  font-family: KaTeX_Main;
  font-style: italic;
}
.katex .mathrm {
  font-style: normal;
}
.katex .mathbf {
  font-family: KaTeX_Main;
  font-weight: 700;
}
.katex .boldsymbol {
  font-family: KaTeX_Math;
  font-style: italic;
  font-weight: 700;
}
.katex .amsrm,.katex .mathbb,.katex .textbb {
  font-family: KaTeX_AMS;
}
.katex .mathcal {
  font-family: KaTeX_Caligraphic;
}
.katex .mathfrak,.katex .textfrak {
  font-family: KaTeX_Fraktur;
}
.katex .mathboldfrak,.katex .textboldfrak {
  font-family: KaTeX_Fraktur;
  font-weight: 700;
}
.katex .mathtt {
  font-family: KaTeX_Typewriter;
}
.katex .mathscr,.katex .textscr {
  font-family: KaTeX_Script;
}
.katex .mathsf,.katex .textsf {
  font-family: KaTeX_SansSerif;
}
.katex .mathboldsf,.katex .textboldsf {
  font-family: KaTeX_SansSerif;
  font-weight: 700;
}
.katex .mathitsf,.katex .mathsfit,.katex .textitsf {
  font-family: KaTeX_SansSerif;
  font-style: italic;
}
.katex .mainrm {
  font-family: KaTeX_Main;
  font-style: normal;
}
.katex .vlist-t {
  border-collapse: collapse;
  display: inline-table;
  table-layout: fixed;
}
.katex .vlist-r {
  display: table-row;
}
.katex .vlist {
  display: table-cell;
  position: relative;
  vertical-align: bottom;
}
.katex .vlist>span {
  display: block;
  height: 0;
  position: relative;
}
.katex .vlist>span>span {
  display: inline-block;
}
.katex .vlist>span>.pstrut {
  overflow: hidden;
  width: 0;
}
.katex .vlist-t2 {
  margin-right: -2px;
}
.katex .vlist-s {
  display: table-cell;
  font-size: 1px;
  min-width: 2px;
  vertical-align: bottom;
  width: 2px;
}
.katex .katex-vbox {
  align-items: baseline;
  display: inline-flex;
  flex-direction: column;
}
.katex .katex-thinbox {
  display: inline-flex;
  flex-direction: row;
  max-width: 0;
  width: 0;
}
.katex .msupsub {
  text-align: left;
}
.katex .mfrac>span>span {
  text-align: center;
}
.katex .mfrac .frac-line {
  border-bottom-style: solid;
  display: inline-block;
  width: 100%;
}
.katex .katex-hdashline,.katex .katex-hline,.katex .katex-overline .overline-line,.katex .katex-rule,.katex .katex-underline .underline-line,.katex .mfrac .frac-line {
  min-height: 1px;
}
.katex .mspace {
  display: inline-block;
}
.katex .katex-smash {
  display: inline;
  line-height: 0;
}
.katex .clap,.katex .llap,.katex .rlap {
  position: relative;
  width: 0;
}
.katex .clap>.katex-inner,.katex .llap>.katex-inner,.katex .rlap>.katex-inner {
  position: absolute;
}
.katex .clap>.katex-fix,.katex .llap>.katex-fix,.katex .rlap>.katex-fix {
  display: inline-block;
}
.katex .llap>.katex-inner {
  right: 0;
}
.katex .clap>.katex-inner,.katex .rlap>.katex-inner {
  left: 0;
}
.katex .clap>.katex-inner>span {
  margin-left: -50%;
  margin-right: 50%;
}
.katex .katex-rule {
  border: 0 solid;
  display: inline-block;
  position: relative;
}
.katex .katex-hline,.katex .katex-overline .overline-line,.katex .katex-underline .underline-line {
  border-bottom-style: solid;
  display: inline-block;
  width: 100%;
}
.katex .katex-hdashline {
  border-bottom-style: dashed;
  display: inline-block;
  width: 100%;
}
.katex .sqrt>.katex-root {
  margin-left: .2777777778em;
  margin-right: -.5555555556em;
}
.katex .fontsize-ensurer.reset-size1.size1,.katex .katex-sizing.reset-size1.size1 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size1.size2,.katex .katex-sizing.reset-size1.size2 {
  font-size: 1.2em;
}
.katex .fontsize-ensurer.reset-size1.size3,.katex .katex-sizing.reset-size1.size3 {
  font-size: 1.4em;
}
.katex .fontsize-ensurer.reset-size1.size4,.katex .katex-sizing.reset-size1.size4 {
  font-size: 1.6em;
}
.katex .fontsize-ensurer.reset-size1.size5,.katex .katex-sizing.reset-size1.size5 {
  font-size: 1.8em;
}
.katex .fontsize-ensurer.reset-size1.size6,.katex .katex-sizing.reset-size1.size6 {
  font-size: 2em;
}
.katex .fontsize-ensurer.reset-size1.size7,.katex .katex-sizing.reset-size1.size7 {
  font-size: 2.4em;
}
.katex .fontsize-ensurer.reset-size1.size8,.katex .katex-sizing.reset-size1.size8 {
  font-size: 2.88em;
}
.katex .fontsize-ensurer.reset-size1.size9,.katex .katex-sizing.reset-size1.size9 {
  font-size: 3.456em;
}
.katex .fontsize-ensurer.reset-size1.size10,.katex .katex-sizing.reset-size1.size10 {
  font-size: 4.148em;
}
.katex .fontsize-ensurer.reset-size1.size11,.katex .katex-sizing.reset-size1.size11 {
  font-size: 4.976em;
}
.katex .fontsize-ensurer.reset-size2.size1,.katex .katex-sizing.reset-size2.size1 {
  font-size: .8333333333em;
}
.katex .fontsize-ensurer.reset-size2.size2,.katex .katex-sizing.reset-size2.size2 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size2.size3,.katex .katex-sizing.reset-size2.size3 {
  font-size: 1.1666666667em;
}
.katex .fontsize-ensurer.reset-size2.size4,.katex .katex-sizing.reset-size2.size4 {
  font-size: 1.3333333333em;
}
.katex .fontsize-ensurer.reset-size2.size5,.katex .katex-sizing.reset-size2.size5 {
  font-size: 1.5em;
}
.katex .fontsize-ensurer.reset-size2.size6,.katex .katex-sizing.reset-size2.size6 {
  font-size: 1.6666666667em;
}
.katex .fontsize-ensurer.reset-size2.size7,.katex .katex-sizing.reset-size2.size7 {
  font-size: 2em;
}
.katex .fontsize-ensurer.reset-size2.size8,.katex .katex-sizing.reset-size2.size8 {
  font-size: 2.4em;
}
.katex .fontsize-ensurer.reset-size2.size9,.katex .katex-sizing.reset-size2.size9 {
  font-size: 2.88em;
}
.katex .fontsize-ensurer.reset-size2.size10,.katex .katex-sizing.reset-size2.size10 {
  font-size: 3.4566666667em;
}
.katex .fontsize-ensurer.reset-size2.size11,.katex .katex-sizing.reset-size2.size11 {
  font-size: 4.1466666667em;
}
.katex .fontsize-ensurer.reset-size3.size1,.katex .katex-sizing.reset-size3.size1 {
  font-size: .7142857143em;
}
.katex .fontsize-ensurer.reset-size3.size2,.katex .katex-sizing.reset-size3.size2 {
  font-size: .8571428571em;
}
.katex .fontsize-ensurer.reset-size3.size3,.katex .katex-sizing.reset-size3.size3 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size3.size4,.katex .katex-sizing.reset-size3.size4 {
  font-size: 1.1428571429em;
}
.katex .fontsize-ensurer.reset-size3.size5,.katex .katex-sizing.reset-size3.size5 {
  font-size: 1.2857142857em;
}
.katex .fontsize-ensurer.reset-size3.size6,.katex .katex-sizing.reset-size3.size6 {
  font-size: 1.4285714286em;
}
.katex .fontsize-ensurer.reset-size3.size7,.katex .katex-sizing.reset-size3.size7 {
  font-size: 1.7142857143em;
}
.katex .fontsize-ensurer.reset-size3.size8,.katex .katex-sizing.reset-size3.size8 {
  font-size: 2.0571428571em;
}
.katex .fontsize-ensurer.reset-size3.size9,.katex .katex-sizing.reset-size3.size9 {
  font-size: 2.4685714286em;
}
.katex .fontsize-ensurer.reset-size3.size10,.katex .katex-sizing.reset-size3.size10 {
  font-size: 2.9628571429em;
}
.katex .fontsize-ensurer.reset-size3.size11,.katex .katex-sizing.reset-size3.size11 {
  font-size: 3.5542857143em;
}
.katex .fontsize-ensurer.reset-size4.size1,.katex .katex-sizing.reset-size4.size1 {
  font-size: .625em;
}
.katex .fontsize-ensurer.reset-size4.size2,.katex .katex-sizing.reset-size4.size2 {
  font-size: .75em;
}
.katex .fontsize-ensurer.reset-size4.size3,.katex .katex-sizing.reset-size4.size3 {
  font-size: .875em;
}
.katex .fontsize-ensurer.reset-size4.size4,.katex .katex-sizing.reset-size4.size4 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size4.size5,.katex .katex-sizing.reset-size4.size5 {
  font-size: 1.125em;
}
.katex .fontsize-ensurer.reset-size4.size6,.katex .katex-sizing.reset-size4.size6 {
  font-size: 1.25em;
}
.katex .fontsize-ensurer.reset-size4.size7,.katex .katex-sizing.reset-size4.size7 {
  font-size: 1.5em;
}
.katex .fontsize-ensurer.reset-size4.size8,.katex .katex-sizing.reset-size4.size8 {
  font-size: 1.8em;
}
.katex .fontsize-ensurer.reset-size4.size9,.katex .katex-sizing.reset-size4.size9 {
  font-size: 2.16em;
}
.katex .fontsize-ensurer.reset-size4.size10,.katex .katex-sizing.reset-size4.size10 {
  font-size: 2.5925em;
}
.katex .fontsize-ensurer.reset-size4.size11,.katex .katex-sizing.reset-size4.size11 {
  font-size: 3.11em;
}
.katex .fontsize-ensurer.reset-size5.size1,.katex .katex-sizing.reset-size5.size1 {
  font-size: .5555555556em;
}
.katex .fontsize-ensurer.reset-size5.size2,.katex .katex-sizing.reset-size5.size2 {
  font-size: .6666666667em;
}
.katex .fontsize-ensurer.reset-size5.size3,.katex .katex-sizing.reset-size5.size3 {
  font-size: .7777777778em;
}
.katex .fontsize-ensurer.reset-size5.size4,.katex .katex-sizing.reset-size5.size4 {
  font-size: .8888888889em;
}
.katex .fontsize-ensurer.reset-size5.size5,.katex .katex-sizing.reset-size5.size5 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size5.size6,.katex .katex-sizing.reset-size5.size6 {
  font-size: 1.1111111111em;
}
.katex .fontsize-ensurer.reset-size5.size7,.katex .katex-sizing.reset-size5.size7 {
  font-size: 1.3333333333em;
}
.katex .fontsize-ensurer.reset-size5.size8,.katex .katex-sizing.reset-size5.size8 {
  font-size: 1.6em;
}
.katex .fontsize-ensurer.reset-size5.size9,.katex .katex-sizing.reset-size5.size9 {
  font-size: 1.92em;
}
.katex .fontsize-ensurer.reset-size5.size10,.katex .katex-sizing.reset-size5.size10 {
  font-size: 2.3044444444em;
}
.katex .fontsize-ensurer.reset-size5.size11,.katex .katex-sizing.reset-size5.size11 {
  font-size: 2.7644444444em;
}
.katex .fontsize-ensurer.reset-size6.size1,.katex .katex-sizing.reset-size6.size1 {
  font-size: .5em;
}
.katex .fontsize-ensurer.reset-size6.size2,.katex .katex-sizing.reset-size6.size2 {
  font-size: .6em;
}
.katex .fontsize-ensurer.reset-size6.size3,.katex .katex-sizing.reset-size6.size3 {
  font-size: .7em;
}
.katex .fontsize-ensurer.reset-size6.size4,.katex .katex-sizing.reset-size6.size4 {
  font-size: .8em;
}
.katex .fontsize-ensurer.reset-size6.size5,.katex .katex-sizing.reset-size6.size5 {
  font-size: .9em;
}
.katex .fontsize-ensurer.reset-size6.size6,.katex .katex-sizing.reset-size6.size6 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size6.size7,.katex .katex-sizing.reset-size6.size7 {
  font-size: 1.2em;
}
.katex .fontsize-ensurer.reset-size6.size8,.katex .katex-sizing.reset-size6.size8 {
  font-size: 1.44em;
}
.katex .fontsize-ensurer.reset-size6.size9,.katex .katex-sizing.reset-size6.size9 {
  font-size: 1.728em;
}
.katex .fontsize-ensurer.reset-size6.size10,.katex .katex-sizing.reset-size6.size10 {
  font-size: 2.074em;
}
.katex .fontsize-ensurer.reset-size6.size11,.katex .katex-sizing.reset-size6.size11 {
  font-size: 2.488em;
}
.katex .fontsize-ensurer.reset-size7.size1,.katex .katex-sizing.reset-size7.size1 {
  font-size: .4166666667em;
}
.katex .fontsize-ensurer.reset-size7.size2,.katex .katex-sizing.reset-size7.size2 {
  font-size: .5em;
}
.katex .fontsize-ensurer.reset-size7.size3,.katex .katex-sizing.reset-size7.size3 {
  font-size: .5833333333em;
}
.katex .fontsize-ensurer.reset-size7.size4,.katex .katex-sizing.reset-size7.size4 {
  font-size: .6666666667em;
}
.katex .fontsize-ensurer.reset-size7.size5,.katex .katex-sizing.reset-size7.size5 {
  font-size: .75em;
}
.katex .fontsize-ensurer.reset-size7.size6,.katex .katex-sizing.reset-size7.size6 {
  font-size: .8333333333em;
}
.katex .fontsize-ensurer.reset-size7.size7,.katex .katex-sizing.reset-size7.size7 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size7.size8,.katex .katex-sizing.reset-size7.size8 {
  font-size: 1.2em;
}
.katex .fontsize-ensurer.reset-size7.size9,.katex .katex-sizing.reset-size7.size9 {
  font-size: 1.44em;
}
.katex .fontsize-ensurer.reset-size7.size10,.katex .katex-sizing.reset-size7.size10 {
  font-size: 1.7283333333em;
}
.katex .fontsize-ensurer.reset-size7.size11,.katex .katex-sizing.reset-size7.size11 {
  font-size: 2.0733333333em;
}
.katex .fontsize-ensurer.reset-size8.size1,.katex .katex-sizing.reset-size8.size1 {
  font-size: .3472222222em;
}
.katex .fontsize-ensurer.reset-size8.size2,.katex .katex-sizing.reset-size8.size2 {
  font-size: .4166666667em;
}
.katex .fontsize-ensurer.reset-size8.size3,.katex .katex-sizing.reset-size8.size3 {
  font-size: .4861111111em;
}
.katex .fontsize-ensurer.reset-size8.size4,.katex .katex-sizing.reset-size8.size4 {
  font-size: .5555555556em;
}
.katex .fontsize-ensurer.reset-size8.size5,.katex .katex-sizing.reset-size8.size5 {
  font-size: .625em;
}
.katex .fontsize-ensurer.reset-size8.size6,.katex .katex-sizing.reset-size8.size6 {
  font-size: .6944444444em;
}
.katex .fontsize-ensurer.reset-size8.size7,.katex .katex-sizing.reset-size8.size7 {
  font-size: .8333333333em;
}
.katex .fontsize-ensurer.reset-size8.size8,.katex .katex-sizing.reset-size8.size8 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size8.size9,.katex .katex-sizing.reset-size8.size9 {
  font-size: 1.2em;
}
.katex .fontsize-ensurer.reset-size8.size10,.katex .katex-sizing.reset-size8.size10 {
  font-size: 1.4402777778em;
}
.katex .fontsize-ensurer.reset-size8.size11,.katex .katex-sizing.reset-size8.size11 {
  font-size: 1.7277777778em;
}
.katex .fontsize-ensurer.reset-size9.size1,.katex .katex-sizing.reset-size9.size1 {
  font-size: .2893518519em;
}
.katex .fontsize-ensurer.reset-size9.size2,.katex .katex-sizing.reset-size9.size2 {
  font-size: .3472222222em;
}
.katex .fontsize-ensurer.reset-size9.size3,.katex .katex-sizing.reset-size9.size3 {
  font-size: .4050925926em;
}
.katex .fontsize-ensurer.reset-size9.size4,.katex .katex-sizing.reset-size9.size4 {
  font-size: .462962963em;
}
.katex .fontsize-ensurer.reset-size9.size5,.katex .katex-sizing.reset-size9.size5 {
  font-size: .5208333333em;
}
.katex .fontsize-ensurer.reset-size9.size6,.katex .katex-sizing.reset-size9.size6 {
  font-size: .5787037037em;
}
.katex .fontsize-ensurer.reset-size9.size7,.katex .katex-sizing.reset-size9.size7 {
  font-size: .6944444444em;
}
.katex .fontsize-ensurer.reset-size9.size8,.katex .katex-sizing.reset-size9.size8 {
  font-size: .8333333333em;
}
.katex .fontsize-ensurer.reset-size9.size9,.katex .katex-sizing.reset-size9.size9 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size9.size10,.katex .katex-sizing.reset-size9.size10 {
  font-size: 1.2002314815em;
}
.katex .fontsize-ensurer.reset-size9.size11,.katex .katex-sizing.reset-size9.size11 {
  font-size: 1.4398148148em;
}
.katex .fontsize-ensurer.reset-size10.size1,.katex .katex-sizing.reset-size10.size1 {
  font-size: .2410800386em;
}
.katex .fontsize-ensurer.reset-size10.size2,.katex .katex-sizing.reset-size10.size2 {
  font-size: .2892960463em;
}
.katex .fontsize-ensurer.reset-size10.size3,.katex .katex-sizing.reset-size10.size3 {
  font-size: .337512054em;
}
.katex .fontsize-ensurer.reset-size10.size4,.katex .katex-sizing.reset-size10.size4 {
  font-size: .3857280617em;
}
.katex .fontsize-ensurer.reset-size10.size5,.katex .katex-sizing.reset-size10.size5 {
  font-size: .4339440694em;
}
.katex .fontsize-ensurer.reset-size10.size6,.katex .katex-sizing.reset-size10.size6 {
  font-size: .4821600771em;
}
.katex .fontsize-ensurer.reset-size10.size7,.katex .katex-sizing.reset-size10.size7 {
  font-size: .5785920926em;
}
.katex .fontsize-ensurer.reset-size10.size8,.katex .katex-sizing.reset-size10.size8 {
  font-size: .6943105111em;
}
.katex .fontsize-ensurer.reset-size10.size9,.katex .katex-sizing.reset-size10.size9 {
  font-size: .8331726133em;
}
.katex .fontsize-ensurer.reset-size10.size10,.katex .katex-sizing.reset-size10.size10 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size10.size11,.katex .katex-sizing.reset-size10.size11 {
  font-size: 1.1996142719em;
}
.katex .fontsize-ensurer.reset-size11.size1,.katex .katex-sizing.reset-size11.size1 {
  font-size: .2009646302em;
}
.katex .fontsize-ensurer.reset-size11.size2,.katex .katex-sizing.reset-size11.size2 {
  font-size: .2411575563em;
}
.katex .fontsize-ensurer.reset-size11.size3,.katex .katex-sizing.reset-size11.size3 {
  font-size: .2813504823em;
}
.katex .fontsize-ensurer.reset-size11.size4,.katex .katex-sizing.reset-size11.size4 {
  font-size: .3215434084em;
}
.katex .fontsize-ensurer.reset-size11.size5,.katex .katex-sizing.reset-size11.size5 {
  font-size: .3617363344em;
}
.katex .fontsize-ensurer.reset-size11.size6,.katex .katex-sizing.reset-size11.size6 {
  font-size: .4019292605em;
}
.katex .fontsize-ensurer.reset-size11.size7,.katex .katex-sizing.reset-size11.size7 {
  font-size: .4823151125em;
}
.katex .fontsize-ensurer.reset-size11.size8,.katex .katex-sizing.reset-size11.size8 {
  font-size: .578778135em;
}
.katex .fontsize-ensurer.reset-size11.size9,.katex .katex-sizing.reset-size11.size9 {
  font-size: .6945337621em;
}
.katex .fontsize-ensurer.reset-size11.size10,.katex .katex-sizing.reset-size11.size10 {
  font-size: .8336012862em;
}
.katex .fontsize-ensurer.reset-size11.size11,.katex .katex-sizing.reset-size11.size11 {
  font-size: 1em;
}
.katex .delimsizing.size1 {
  font-family: KaTeX_Size1;
}
.katex .delimsizing.size2 {
  font-family: KaTeX_Size2;
}
.katex .delimsizing.size3 {
  font-family: KaTeX_Size3;
}
.katex .delimsizing.size4 {
  font-family: KaTeX_Size4;
}
.katex .delimsizing.mult .delim-size1>span {
  font-family: KaTeX_Size1;
}
.katex .delimsizing.mult .delim-size4>span {
  font-family: KaTeX_Size4;
}
.katex .nulldelimiter {
  display: inline-block;
  width: .12em;
}
.katex .delimcenter,.katex .op-symbol {
  position: relative;
}
.katex .op-symbol.small-op {
  font-family: KaTeX_Size1;
}
.katex .op-symbol.large-op {
  font-family: KaTeX_Size2;
}
.katex .katex-accent>.vlist-t,.katex .op-limits>.vlist-t {
  text-align: center;
}
.katex .katex-accent .accent-body {
  position: relative;
}
.katex .katex-accent .accent-body:not(.accent-full) {
  width: 0;
}
.katex .katex-overlay {
  display: block;
}
.katex .mtable .vertical-separator {
  display: inline-block;
  min-width: 1px;
}
.katex .mtable .arraycolsep {
  display: inline-block;
}
.katex .mtable .col-align-c>.vlist-t {
  text-align: center;
}
.katex .mtable .col-align-l>.vlist-t {
  text-align: left;
}
.katex .mtable .col-align-r>.vlist-t {
  text-align: right;
}
.katex .svg-align {
  text-align: left;
}
.katex svg {
  fill: currentColor;
  stroke: currentColor;
  display: block;
  height: inherit;
  position: absolute;
  width: 100%;
}
.katex svg path {
  stroke: none;
}
.katex svg {
  fill-rule: nonzero;
  fill-opacity: 1;
  stroke-width: 1;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-miterlimit: 4;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  stroke-opacity: 1;
}
.katex img {
  border-style: none;
  max-height: none;
  max-width: none;
  min-height: 0;
  min-width: 0;
}
.katex .katex-stretchy {
  display: block;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.katex .katex-stretchy:after,.katex .katex-stretchy:before {
  content: "";
}
.katex .hide-tail {
  overflow: hidden;
  position: relative;
  width: 100%;
}
.katex .halfarrow-left {
  left: 0;
  overflow: hidden;
  position: absolute;
  width: 50.2%;
}
.katex .halfarrow-right {
  overflow: hidden;
  position: absolute;
  right: 0;
  width: 50.2%;
}
.katex .brace-left {
  left: 0;
  overflow: hidden;
  position: absolute;
  width: 25.1%;
}
.katex .brace-center {
  left: 25%;
  overflow: hidden;
  position: absolute;
  width: 50%;
}
.katex .brace-right {
  overflow: hidden;
  position: absolute;
  right: 0;
  width: 25.1%;
}
.katex .x-arrow-pad {
  padding: 0 .5em;
}
.katex .cd-arrow-pad {
  padding: 0 .55556em 0 .27778em;
}
.katex .mover,.katex .munder,.katex .x-arrow {
  text-align: center;
}
.katex .boxpad {
  padding: 0 .3em;
}
.katex .fbox,.katex .fcolorbox {
  border: .04em solid;
  box-sizing: border-box;
}
.katex .cancel-pad {
  padding: 0 .2em;
}
.katex .cancel-lap {
  margin-left: -.2em;
  margin-right: -.2em;
}
.katex .katex-sout {
  border-bottom-style: solid;
  border-bottom-width: .08em;
}
.katex .angl {
  border-right: .049em solid;
  border-top: .049em solid;
  box-sizing: border-box;
  margin-right: .03889em;
}
.katex .anglpad {
  padding: 0 .03889em;
}
.katex .reflectbox {
  display: inline-block;
  transform: scaleX(-1);
}
.katex .eqn-num:before {
  content: "(" counter(katexEqnNo) ")";
  counter-increment: katexEqnNo;
}
.katex .mml-eqn-num:before {
  content: "(" counter(mmlEqnNo) ")";
  counter-increment: mmlEqnNo;
}
.katex .mtr-glue {
  width: 50%;
}
.katex .cd-vert-arrow {
  display: inline-block;
  position: relative;
}
.katex .cd-label-left {
  display: inline-block;
  position: absolute;
  right: calc(50% + .3em);
  text-align: left;
}
.katex .cd-label-right {
  display: inline-block;
  left: calc(50% + .3em);
  position: absolute;
  text-align: right;
}
.katex-display {
  display: block;
  margin: 1em 0;
  text-align: center;
}
.katex-display>.katex {
  display: block;
  text-align: center;
  white-space: nowrap;
}
.katex-display>.katex>.katex-html {
  display: block;
  position: relative;
}
.katex-display>.katex>.katex-html>.katex-tag {
  position: absolute;
  right: 0;
}
.katex-display.leqno>.katex>.katex-html>.katex-tag {
  left: 0;
  right: auto;
}
.katex-display.fleqn>.katex {
  padding-left: 2em;
  text-align: left;
}
body {
  counter-reset: katexEqnNo mmlEqnNo;
}
.conversation-panel {
  position: relative;
  display: flex;
  grid-column: 3;
  grid-row: 1;
  min-width: 0;
  flex-direction: column;
  background: var(--openbot-bg-canvas);
  transition: padding-right var(--panel-resize-duration, var(--openbot-duration-overlay)) cubic-bezier(0.22, 1, 0.36, 1);
}
.direct-conversation {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 0;
  grid-column: 3;
  grid-row: 1;
  flex-direction: column;
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
}
.app-frame-with-server-rail .direct-conversation {
  grid-column: 4;
}
.direct-conversation-header {
  display: flex;
  height: 46px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--openbot-hover);
  padding: 0 14px;
}
.direct-conversation-person {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}
.direct-conversation-person .person-avatar {
  --agent-avatar-optical-offset: -8px;
  width: 30px;
  height: 30px;
  border-radius: var(--openbot-radius-md);
}
.direct-conversation-person .person-avatar > i {
  display: none;
}
.direct-conversation-person h1 {
  overflow: hidden;
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: 560;
  line-height: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.direct-conversation-person div > span {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 11px;
}
.direct-conversation-person div > span i {
  width: 5px;
  height: 5px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control-hover);
}
.direct-conversation-person div > span.online {
  color: var(--openbot-success);
}
.direct-conversation-person div > span.online i {
  background: var(--openbot-success);
}
.direct-private-label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--openbot-text-readable);
  font-size: var(--openbot-text-sm);
}
.direct-private-label svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}
.direct-message-list {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  padding: 22px max(18px, calc((100% - 760px) / 2)) 28px;
}
.direct-conversation-state, .direct-conversation-empty {
  display: grid;
  min-height: 100%;
  place-content: center;
  justify-items: center;
  color: var(--openbot-text-muted);
  text-align: center;
}
.direct-conversation-empty h2 {
  margin: 14px 0 4px;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-xl);
  font-weight: 560;
}
.direct-conversation-empty p {
  max-width: 290px;
  margin: 0;
  font-size: var(--openbot-text-sm);
  line-height: 17px;
}
.direct-message-list .ui-message-group {
  gap: 0;
}
.direct-message > .ui-message-content {
  max-width: min(560px, 78%);
}
.direct-message .ui-bubble {
  max-width: 100%;
}
.direct-message .ui-bubble-content {
  font-size: var(--openbot-text-md);
  line-height: 19px;
  white-space: pre-wrap;
}
.direct-message time {
  color: var(--openbot-text-readable);
  font-size: var(--openbot-text-sm);
}
.direct-message .ui-message-footer {
  padding: 0 2px;
}
.direct-composer-wrap {
  flex: 0 0 auto;
  padding: 0 max(18px, calc((100% - 760px) / 2)) 16px;
}
.direct-typing-indicator {
  display: flex;
  min-height: 20px;
  align-items: center;
  gap: 7px;
  padding: 0 10px 4px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.direct-message-error {
  margin: 0 8px 6px;
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
}
.direct-composer {
  display: flex;
  min-height: 46px;
  align-items: flex-end;
  gap: 8px;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  padding: 6px 7px 6px 13px;
  box-shadow: 0 8px 25px var(--openbot-shadow-popover-ambient);
}
.direct-composer:focus-within {
  border-color: var(--openbot-border-strong);
}
.direct-composer textarea {
  min-width: 0;
  min-height: 32px;
  max-height: 130px;
  flex: 1;
  resize: none;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 6px 0;
  color: var(--openbot-text-primary);
  font: inherit;
  font-size: var(--openbot-text-md);
  line-height: 20px;
}
.direct-composer textarea::placeholder {
  color: var(--openbot-text-muted);
}
.direct-composer > button {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-success);
  color: var(--openbot-success);
  font-size: var(--openbot-text-xl);
  font-weight: 650;
}
.direct-composer > button:disabled {
  background: var(--openbot-border);
  color: var(--openbot-text-dim);
}
.app-frame-with-server-rail .conversation-panel {
  grid-column: 4;
}
.conversation-header {
  display: flex;
  height: 38px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  border-bottom: 0;
  padding: 0 12px 0 8px;
  background: transparent;
}
.conversation-heading-group {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}
.chat-search {
  position: absolute;
  z-index: 13;
  top: 19px;
  right: 16px;
  display: flex;
  width: min(308px, calc(100% - 32px));
  height: 34px;
  align-items: center;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  box-shadow: var(--openbot-shadow-raised);
  color: var(--openbot-text-muted);
}
.chat-search-icon {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  margin-left: 11px;
  stroke-width: var(--openbot-icon-stroke);
}
.chat-search .chat-search-input {
  min-width: 0;
  height: var(--openbot-control-md);
  flex: 1;
  border: 0;
  background: transparent;
  padding: 0 8px;
  box-shadow: none;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
}
.chat-search .chat-search-input:focus {
  border: 0;
  box-shadow: none;
  outline: 0;
}
.chat-search-input::-webkit-search-cancel-button {
  display: none;
}
.chat-search-position {
  min-width: 38px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.chat-search-separator {
  width: 1px;
  height: 20px;
  flex: 0 0 auto;
  background: var(--openbot-border);
}
.chat-search .chat-search-button {
  width: 26px;
  height: var(--openbot-control-md);
  flex: 0 0 auto;
  border: 0;
  border-radius: inherit;
  padding: 0;
}
.chat-search-button svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: var(--openbot-icon-stroke);
}
.chat-search .chat-search-close {
  margin-right: 3px;
}
::highlight(openbot-chat-search-results) {
  background: var(--openbot-accent-soft);
}
::highlight(openbot-chat-search-current) {
  background: var(--openbot-warning);
  color: var(--openbot-text-on-light);
}
.conversation-title[aria-label="View agent settings"]:hover {
  color: var(--openbot-text-primary);
}
.browser-panel {
  position: absolute;
  z-index: 14;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  width: var(--browser-panel-width, 380px);
  flex-direction: column;
  border-left: 1px solid var(--openbot-border);
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
  transition: border-color var(--openbot-duration-slow) ease, box-shadow var(--openbot-duration-slow) ease;
}
.file-preview-panel.t-panel-slide {
  --panel-translate-x: 24px;
  --panel-translate-y: 0px;
  transition: transform var(--panel-close-dur) var(--panel-ease), opacity var(--panel-close-dur) var(--panel-ease), filter var(--panel-close-dur) var(--panel-ease), border-color var(--openbot-duration-slow) ease, box-shadow var(--openbot-duration-slow) ease;
}
.file-preview-panel.t-panel-slide[data-open="true"] {
  transition: transform var(--panel-open-dur) var(--panel-ease), opacity var(--panel-open-dur) var(--panel-ease), filter var(--panel-open-dur) var(--panel-ease), border-color var(--openbot-duration-slow) ease, box-shadow var(--openbot-duration-slow) ease;
}
.file-preview-header {
  display: flex;
  height: 39px;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--openbot-border);
  padding: 0 7px 0 11px;
}
.file-preview-header h2 {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-preview-copy svg {
  width: 15px;
  height: 15px;
  stroke-width: 2;
}
.file-preview-file-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  stroke-width: var(--openbot-icon-stroke);
}
.file-preview-content {
  min-height: 0;
  flex: 1;
  overflow: auto;
  background: var(--openbot-bg-canvas);
}
.markdown-file-preview {
  min-width: 0;
}
.file-preview-markdown {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 26px 48px;
  color: var(--openbot-text-primary);
  overflow-wrap: anywhere;
}
.file-preview-markdown > .message-markdown {
  font-size: var(--openbot-text-md);
  line-height: 1.6;
}
.file-preview-markdown-status {
  min-width: 0;
  margin: 0;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface);
  padding: 18px 20px;
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  line-height: 1.55;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.file-preview-text {
  min-width: min-content;
  min-height: 100%;
  margin: 0;
  padding: 18px 20px 48px;
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  line-height: 1.55;
  tab-size: 2;
  white-space: pre;
}
.file-preview-text-wrap {
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.file-preview-image-wrap {
  display: grid;
  min-height: 100%;
  padding: 20px;
  place-items: center;
}
.file-preview-image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.file-preview-pdf {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--openbot-bg-canvas);
}
.file-preview-audio {
  display: block;
  width: calc(100% - 40px);
  margin: 20px;
}
.file-preview-video {
  display: block;
  width: 100%;
  max-height: 100%;
  background: var(--openbot-bg-canvas);
  object-fit: contain;
}
.file-preview-spreadsheet {
  min-width: 0;
  min-height: 100%;
  padding: 20px;
  color: var(--openbot-text-primary);
}
.file-preview-spreadsheet-status {
  margin: 0;
  color: var(--openbot-text-muted);
  font-family: var(--openbot-font-mono);
  white-space: pre-wrap;
}
.file-preview-spreadsheet-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  overflow-x: auto;
}
.file-preview-spreadsheet-tabs button {
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-control);
  padding: 6px 10px;
  color: var(--openbot-text-muted);
  white-space: nowrap;
}
.file-preview-spreadsheet-tabs button[aria-pressed="true"] {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-primary);
}
.file-preview-spreadsheet-table-wrap {
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface);
}
.file-preview-spreadsheet-table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: var(--openbot-text-sm);
}
.file-preview-spreadsheet-table caption {
  padding: 10px 12px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-align: left;
}
.file-preview-spreadsheet-table th, .file-preview-spreadsheet-table td {
  border-top: 1px solid var(--openbot-border);
  border-right: 1px solid var(--openbot-border);
  padding: 8px 12px;
  text-align: left;
  white-space: pre;
}
.file-preview-spreadsheet-table th {
  background: var(--openbot-bg-control);
  font-weight: 600;
}
.file-preview-spreadsheet-table td:last-child, .file-preview-spreadsheet-table th:last-child {
  border-right: 0;
}
.file-preview-spreadsheet-note {
  margin: 10px 0 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.file-preview-unsupported {
  display: grid;
  min-height: 100%;
  place-content: center;
  justify-items: center;
  gap: 8px;
  padding: 24px;
  color: var(--openbot-text-muted);
  text-align: center;
}
.file-preview-unsupported > svg {
  width: 28px;
  height: 28px;
  margin-bottom: 4px;
}
.file-preview-unsupported strong {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
}
.file-preview-unsupported span {
  max-width: 260px;
  font-size: var(--openbot-text-sm);
  line-height: 1.45;
}
.file-preview-unsupported button {
  margin-top: 6px;
}
.file-preview-truncated {
  position: sticky;
  bottom: 0;
  margin: 0;
  border-top: 1px solid var(--openbot-border);
  background: var(--openbot-bg-control);
  padding: 7px 12px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-align: center;
}
.browser-pip-window {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
}
.browser-pip-surface {
  width: 100%;
  height: 100%;
}
.file-preview-folder {
  display: grid;
  margin: 0;
  padding: 8px;
  list-style: none;
}
.file-preview-folder-entry {
  display: grid;
  width: 100%;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  justify-content: stretch;
  padding: 6px 10px;
  font-size: var(--openbot-text-sm);
  text-align: left;
}
.file-preview-folder-name {
  overflow: hidden;
  color: var(--openbot-text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-preview-folder-meta {
  color: var(--openbot-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.file-preview-folder-empty {
  margin: 0;
  padding: 24px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-align: center;
}
.conversation-panel.browser-panel-active {
  padding-right: var(--browser-panel-width, 380px);
}
.remote-desktop-workspace {
  position: fixed;
  z-index: var(--openbot-layer-toast);
  inset: 0;
  display: flex;
  min-width: 0;
  flex-direction: column;
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity var(--openbot-duration-fast) cubic-bezier(0.2, 0, 0, 1), visibility 0s linear var(--openbot-duration-fast);
}
.remote-desktop-workspace-visible {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0s;
}
.remote-desktop-workspace:focus {
  outline: none;
}
.remote-desktop-header {
  display: flex;
  height: 38px;
  min-height: 38px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  border-bottom: 1px solid var(--openbot-border);
  padding: 0 8px 0 0;
  background: var(--openbot-bg-sidebar);
}
.remote-desktop-workspace-darwin .remote-desktop-header {
  padding-left: 84px;
}
.remote-desktop-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  flex: 0 1 auto;
  justify-content: flex-end;
  gap: 4px;
  margin-left: auto;
  white-space: nowrap;
}
.remote-desktop-display-controls {
  min-width: 0;
  display: flex;
  flex: 0 1 168px;
  align-items: center;
}
.remote-desktop-back-button, .remote-desktop-disconnect-button {
  flex: 0 0 auto;
}
.remote-desktop-disconnect-button {
  color: var(--openbot-text-muted);
}
.remote-desktop-disconnect-button:hover:not(:disabled, [aria-disabled="true"]), .remote-desktop-disconnect-button:focus-visible:not(:disabled, [aria-disabled="true"]) {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
}
.remote-desktop-stage {
  position: relative;
  min-height: 0;
  flex: 1;
  overflow: hidden;
  background: var(--openbot-accent);
}
.remote-desktop-viewer, .remote-desktop-viewer > div {
  width: 100%;
  height: 100%;
}
.remote-desktop-viewer {
  overflow: hidden;
  display: block;
  object-fit: contain;
}
.remote-desktop-display-select {
  width: min(168px, 22vw);
  min-width: 112px;
  flex: 0 1 168px;
  font-size: var(--openbot-text-sm);
}
.remote-desktop-display-select-content {
  z-index: calc(var(--openbot-layer-toast) + 1);
}
.remote-desktop-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
  background: var(--openbot-bg-overlay);
  padding: 24px;
  text-align: center;
}
.remote-desktop-overlay strong {
  max-width: 330px;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: 600;
}
.remote-desktop-connecting-avatar {
  width: 56px;
  height: 56px;
  margin-bottom: 5px;
  filter: drop-shadow(0 8px 18px var(--openbot-accent-soft));
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity var(--openbot-duration-overlay) var(--openbot-ease-out), transform var(--openbot-duration-overlay) var(--openbot-ease-out);
  will-change: opacity, transform;
}
@starting-style {
  .remote-desktop-connecting-avatar {
    opacity: 0;
    transform: translateY(4px) scale(0.96);
  }
}
.remote-desktop-overlay > span:not(.ui-spinner):not(.remote-desktop-empty-mark) {
  max-width: 330px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
}
.remote-desktop-empty-mark {
  display: grid;
  width: 38px;
  height: 38px;
  margin-bottom: 5px;
  place-items: center;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-hover);
  color: var(--openbot-text-muted);
}
.remote-desktop-empty-mark svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}
.remote-desktop-overlay > button {
  height: 34px;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-border);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: 600;
}
.remote-desktop-overlay > button:hover {
  background: var(--openbot-border-strong);
}
.remote-desktop-overlay > button {
  min-width: 92px;
  margin-top: 5px;
  padding: 0 13px;
}
.remote-desktop-button-dot {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 5px;
  height: 5px;
  border: 1px solid var(--openbot-bg-sidebar);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success);
}
.browser-pip-controls-document, .browser-pip-controls-document body, .browser-pip-controls-document #root {
  background: transparent;
}
.browser-pip-hover-controls {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  padding: 4px;
  opacity: 0;
  transition: opacity var(--openbot-duration-fast) ease;
  -webkit-app-region: drag;
}
.browser-pip-hover-controls:hover, .browser-pip-hover-controls:focus-within, .browser-pip-window-hover .browser-pip-hover-controls {
  opacity: 1;
}
.browser-pip-hover-button {
  display: grid;
  width: 20px;
  height: 22px;
  flex: 0 0 20px;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  padding: 0;
  background: var(--openbot-bg-overlay);
  color: var(--openbot-text-secondary);
  -webkit-app-region: no-drag;
}
.browser-pip-hover-button:hover {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}
.browser-pip-hover-button .browser-toolbar-icon {
  width: 12px;
  height: 12px;
}
.browser-pip-hover-button:active {
  transform: scale(0.96);
  transition: transform var(--openbot-duration-fast) cubic-bezier(0.23, 1, 0.32, 1);
}
.browser-tab-control-icon {
  width: 12px;
  height: 12px;
  overflow: visible;
  fill: currentColor;
}
.browser-toolbar-button {
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--openbot-text-muted);
}
.browser-toolbar-button:hover:not(:disabled) {
  background: var(--openbot-border);
  color: var(--openbot-text-primary);
}
.browser-toolbar-button {
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  border-radius: var(--openbot-radius-sm);
}
.browser-toolbar-button:disabled {
  color: var(--openbot-text-dim);
  cursor: default;
}
.browser-toolbar-icon {
  width: 15px;
  height: 15px;
}
.browser-recording-status, .browser-diagnostic-status {
  display: inline-flex;
  height: 24px;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  border-radius: var(--openbot-radius-sm);
  padding: 0 5px;
  font-size: var(--openbot-text-sm);
  line-height: 1;
}
.browser-recording-status {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
}
.browser-diagnostic-status {
  background: var(--openbot-warning-soft);
  color: var(--openbot-warning);
}
.browser-recording-status svg, .browser-diagnostic-status svg {
  width: 12px;
  height: 12px;
}
.browser-surface {
  position: relative;
  min-height: 0;
  flex: 1;
  overflow: hidden;
  background: var(--openbot-bg-canvas);
}
.browser-live-view {
  position: absolute;
  inset: 0;
}
.browser-live-view canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.browser-empty-state {
  display: grid;
  height: 100%;
  place-content: center;
  gap: 5px;
  color: var(--openbot-text-muted);
  text-align: center;
}
.browser-empty-state strong {
  font-size: var(--openbot-text-lg);
  font-weight: 600;
}
.browser-empty-state span {
  font-size: var(--openbot-text-sm);
}
.agent-settings-avatar-picker {
  position: relative;
  z-index: 30;
  display: grid;
  width: 62px;
  height: 62px;
  margin: var(--openbot-space-2) auto var(--openbot-space-4);
  place-items: center;
}
.agent-settings-avatar {
  position: relative;
  display: grid;
  width: 62px;
  height: 62px;
  margin: 0;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  background: transparent;
}
.agent-settings-avatar .agent-avatar {
  --agent-avatar-optical-offset: calc(62px * -0.14);
  width: 62px;
  height: 62px;
}
.agent-settings-avatar .agent-avatar > svg {
  width: 128%;
  height: 128%;
}
.agent-settings-avatar:hover {
  filter: brightness(1.08);
}
.agent-settings-avatar-badge {
  position: absolute;
  right: -4px;
  bottom: -4px;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 3px solid var(--openbot-bg-canvas);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-primary);
}
.agent-settings-avatar-badge-icon {
  width: 11px;
  height: 11px;
}
.agent-routines-overlay {
  position: absolute;
  z-index: 2;
  top: 39px;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-y: auto;
  background: var(--openbot-bg-canvas);
}
.agent-routines-settings {
  min-height: 100%;
  padding: 12px 15px 28px;
}
.agent-routines-list, .agent-routine-run-list {
  display: grid;
}
.agent-routines-list {
  gap: 0;
}
.agent-routine-list-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px;
  align-items: center;
}
.agent-routine-row {
  display: grid;
  width: 100%;
  min-height: 48px;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  padding: 5px 7px;
  text-align: left;
  transition: border-color var(--openbot-duration-hover) ease, background-color var(--openbot-duration-hover) ease;
}
.agent-routine-row:focus-visible {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-hover);
}
.agent-routine-row > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 2px;
}
.agent-routine-row strong, .agent-routine-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-routine-row strong {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: 500;
}
.agent-routine-row small, .agent-routines-empty {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.agent-routine-action-buttons svg {
  width: 15px;
  height: 15px;
}
.agent-routine-status-icon-active, .agent-routine-status-icon-paused {
  display: grid;
  place-items: center;
}
.agent-routine-status-icon-active {
  color: var(--openbot-success);
}
.agent-routine-status-icon-paused {
  color: var(--openbot-text-muted);
}
.agent-routine-status-icon-active > svg, .agent-routine-status-icon-paused > svg {
  width: 14px;
  height: 14px;
  stroke-width: var(--openbot-icon-stroke);
}
@media (hover: hover) and (pointer: fine) {
  .agent-routine-row:hover {
    border-color: var(--openbot-border);
    background: var(--openbot-hover);
  }
}
.agent-routine-editor-actions {
  display: grid;
  gap: 11px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--openbot-border);
  padding-bottom: 16px;
}
.agent-routine-active-toggle, .agent-routine-action-buttons, .agent-routine-run-row {
  display: flex;
  align-items: center;
}
.agent-routine-active-toggle {
  justify-content: space-between;
}
.agent-routine-active-toggle > span {
  display: grid;
  gap: 2px;
}
.agent-routine-active-toggle strong {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
}
.agent-routine-active-toggle small {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.agent-routine-action-buttons {
  flex-wrap: wrap;
  gap: 7px;
}
.agent-routine-action-buttons button {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
  padding: 7px 9px;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.agent-routine-action-buttons button:hover:not(:disabled) {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}
.agent-routine-when, .agent-routine-history {
  margin-top: 24px;
}
.agent-routine-history {
  border-top: 1px solid var(--openbot-border);
  padding-top: 20px;
}
.agent-routine-run-list {
  margin-top: 10px;
}
.agent-routine-run-row {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  gap: 9px;
  border-bottom: 1px solid var(--openbot-border);
  padding: 9px 2px;
}
.agent-routines-overlay {
  top: 0;
  overflow: hidden;
}
.agent-routines-settings {
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
}
.agent-routines-header {
  width: 100%;
}
.agent-routines-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-0-5);
}
.agent-routines-body {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  padding: 14px 15px 28px;
  scrollbar-width: none;
}
.agent-routines-body::-webkit-scrollbar {
  display: none;
}
.agent-routine-editor {
  display: grid;
  gap: 14px;
}
.agent-routine-editor > .settings-field {
  margin-bottom: 0;
}
.agent-routine-editor-actions {
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  border: 0;
  padding: 0;
}
.agent-routine-active-toggle {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
}
.ui-switch-field.agent-routine-active-toggle {
  width: auto;
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.agent-routine-active-toggle .ui-switch-label {
  font-size: var(--openbot-text-sm);
  font-weight: inherit;
}
.agent-routine-action-buttons {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 7px;
}
.agent-routine-action-buttons button {
  min-height: 32px;
  border-radius: var(--openbot-radius-md);
  padding-inline: 11px;
  font-size: var(--openbot-text-sm);
}
.agent-routine-action-buttons .ui-button-variant-destructive {
  border-color: transparent;
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
}
.agent-routine-action-buttons .ui-button-variant-default {
  border-color: transparent;
  background: var(--openbot-surface-light);
  color: var(--openbot-text-on-light);
}
@media (hover: hover) and (pointer: fine) {
  .agent-routine-action-buttons .ui-button-variant-destructive:hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-danger-soft-hover);
    color: var(--openbot-danger);
  }
  .agent-routine-action-buttons .ui-button-variant-default:hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-surface-light);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--openbot-surface-light) 82%, transparent);
    }
    color: var(--openbot-text-on-light);
  }
}
.agent-routine-instruction-field textarea {
  height: 158px;
  min-height: 158px;
  max-height: 158px;
  overflow-y: auto;
  resize: none;
}
.agent-routine-history {
  margin-top: 2px;
}
.agent-routine-when {
  margin-top: 0;
}
.agent-routine-when h3, .agent-routine-history h3 {
  margin: 0 0 var(--openbot-space-1-5) var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  font-weight: inherit;
  line-height: var(--openbot-leading-md);
}
.agent-routine-event-filter {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) auto;
  align-items: center;
  gap: var(--openbot-space-2);
}
.agent-routine-history {
  border: 0;
  padding-top: 0;
}
.agent-routine-run-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-top: 0;
}
.agent-routine-run-row {
  display: flex;
  width: 100%;
  min-height: 32px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  padding: 5px var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  text-align: left;
}
.ui-button.agent-routine-run-link {
  cursor: pointer;
}
.agent-routine-run-text {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-wrap: wrap;
  gap: 0 var(--openbot-space-2);
  white-space: nowrap;
}
.agent-routine-run-note {
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-routine-history-error {
  margin-bottom: var(--openbot-space-2);
}
.agent-routine-run-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.agent-routine-delivery-row {
  display: flex;
  min-height: 28px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 var(--openbot-space-2) 5px;
  font-size: var(--openbot-text-sm);
}
.agent-routine-delivery-note {
  min-width: 0;
  color: var(--openbot-text-muted);
  overflow-wrap: anywhere;
  white-space: normal;
}
.agent-routine-delivery-failed, .agent-routine-delivery-uncertain {
  color: var(--openbot-warning);
}
@media (hover: hover) and (pointer: fine) {
  .ui-button.agent-routine-run-link:hover:not(:disabled) {
    background: var(--openbot-bg-control-hover);
  }
}
.agent-routine-run-icon {
  display: grid;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  place-items: center;
  color: var(--openbot-text-muted);
}
.agent-routine-run-icon > svg {
  width: 16px;
  height: 16px;
  stroke-width: var(--openbot-icon-stroke);
}
.agent-routine-run-icon-succeeded {
  color: var(--openbot-success);
}
.agent-routine-run-icon-failed {
  color: var(--openbot-danger);
}
.agent-routine-run-icon-needs-attention {
  color: var(--openbot-warning);
}
.agent-routine-run-icon-running, .agent-routine-run-icon-queued, .agent-routine-run-icon-interrupted, .agent-routine-run-icon-cancelled {
  color: var(--openbot-text-muted);
}
.agent-memories-overlay[data-closed] {
  animation: agent-dialog-overlay-out var(--openbot-duration-dialog) ease;
}
.agent-memories-modal {
  position: fixed;
  z-index: calc(var(--openbot-layer-dialog) + 1);
  top: 50%;
  left: 50%;
  width: min(560px, calc(100vw - 48px));
  height: min(456px, calc(100dvh - 48px));
  min-height: 320px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  outline: 0;
  background: var(--openbot-bg-control);
  color: var(--openbot-text-primary);
  transform: translate(-50%, -50%);
  transform-origin: center;
}
.agent-memories-header {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  border-bottom: 1px solid var(--openbot-border);
  padding: var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-3);
}
.agent-memories-heading {
  min-width: 0;
}
.agent-skills-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-1);
}
.agent-skills-parent {
  min-width: 0;
  height: auto;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--openbot-text-muted);
  padding: 0;
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-lg);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-skills-crumb {
  flex: 0 0 auto;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
}
.agent-skills-heading h2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-memories-heading h2 {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-lg);
}
.agent-memories-header-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--openbot-space-1);
}
.agent-memories-header-actions svg, .agent-memory-delete-button svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.agent-memories-add-button {
  color: var(--openbot-text-secondary);
}
.agent-memories-body {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: var(--openbot-space-2);
}
.agent-memory-composer {
  display: grid;
  gap: var(--openbot-space-2);
  margin: 0 0 var(--openbot-space-3);
  padding: var(--openbot-space-1) var(--openbot-space-1) 0;
}
.agent-memory-input {
  min-height: 64px;
  resize: none;
  border-color: var(--openbot-border);
  background: transparent;
}
.agent-memory-input:focus-visible {
  border-color: var(--openbot-border-strong);
  outline: 0;
  box-shadow: none;
}
.agent-memory-composer-actions, .agent-memory-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-1);
}
.agent-memory-inclusion-actions {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-1);
}
.agent-memory-list {
  min-height: 0;
  display: grid;
  grid-auto-rows: max-content;
  flex: 1;
  align-content: start;
  gap: var(--openbot-space-0-5);
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  scrollbar-width: none;
}
.agent-memory-row {
  min-height: 50px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--openbot-control-md) + var(--openbot-space-2));
  align-items: stretch;
  border-radius: var(--openbot-radius-md);
  overflow: hidden;
  background: transparent;
}
@media (hover: hover) and (pointer: fine) {
  .agent-memory-row:hover {
    background: var(--openbot-bg-control-hover);
  }
}
.agent-memory-row:has(.agent-memory-row-main:focus-visible) {
  background: var(--openbot-bg-control-active);
}
.agent-memory-row-main {
  min-width: 0;
  width: 100%;
  height: 100%;
  display: grid;
  align-content: center;
  justify-content: stretch;
  justify-items: start;
  gap: var(--openbot-space-1);
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  padding: var(--openbot-space-2) var(--openbot-space-3);
  color: inherit;
  font: inherit;
  text-align: left;
}
.agent-memory-row-main:focus-visible {
  box-shadow: none;
}
.agent-memory-row .agent-memory-row-main:hover {
  background: transparent;
}
.agent-memory-text {
  display: block;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  white-space: pre-wrap;
}
.agent-memory-meta {
  display: block;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.agent-memory-delete-button {
  align-self: center;
  align-items: center;
  justify-self: center;
  color: var(--openbot-text-muted);
}
.agent-memory-editor {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--openbot-space-2);
  background: transparent;
  padding: var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-2);
}
.agent-memory-row:has(.agent-memory-editor), .agent-memory-row:has(.agent-memory-editor):hover {
  background: transparent;
}
.agent-memory-state, .agent-memory-limit, .agent-memory-error {
  margin: var(--openbot-space-1);
  border-radius: var(--openbot-radius-md);
  padding: var(--openbot-space-3);
  font-size: var(--openbot-text-sm);
}
.agent-memory-state {
  min-height: 160px;
  display: grid;
  place-items: center;
  color: var(--openbot-text-muted);
  text-align: center;
}
.agent-memory-limit {
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-secondary);
}
.agent-memory-error {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
}
.shared-table-list {
  min-height: 0;
  display: grid;
  flex: 1;
  align-content: start;
  gap: var(--openbot-space-0-5);
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  scrollbar-width: none;
}
.shared-table-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
  padding: var(--openbot-space-2) var(--openbot-space-3);
}
.shared-table-main {
  min-width: 0;
  display: grid;
  gap: var(--openbot-space-1);
}
.shared-table-name {
  display: block;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-md);
}
.shared-table-confirm {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface);
  padding: var(--openbot-space-3);
}
.shared-table-confirm p {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.shared-table-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-1);
}
.agent-memories-footer {
  display: flex;
  min-height: 48px;
  align-items: center;
  padding: var(--openbot-space-2) var(--openbot-space-3) var(--openbot-space-3);
}
.agent-skill-empty {
  min-height: 160px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--openbot-space-3);
}
.agent-skill-empty .agent-memory-state {
  min-height: 0;
  padding: 0;
}
.agent-skill-rows {
  display: grid;
  align-content: start;
  gap: 2px;
}
.agent-skill-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--openbot-space-2);
  min-height: 56px;
  padding: var(--openbot-space-1) var(--openbot-space-2);
  border-radius: var(--openbot-radius-lg);
}
.agent-skill-open {
  min-width: 0;
  height: auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  justify-content: stretch;
  justify-items: stretch;
  align-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-1);
  color: inherit;
  text-align: left;
}
.agent-skill-open:hover {
  background: transparent;
}
@media (hover: hover) and (pointer: fine) {
  .agent-skill-row:hover {
    background: var(--openbot-bg-control-hover);
  }
}
.agent-skill-icon {
  width: 40px;
  height: 40px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  color: var(--openbot-accent-text);
}
.agent-skill-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.agent-skill-icon svg {
  width: 20px;
  height: 20px;
}
.agent-skill-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.agent-skill-title {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: var(--openbot-space-2);
}
.agent-skill-title strong {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-skill-row:has(.agent-skill-update) {
  grid-template-columns: minmax(0, 1fr) auto auto auto;
}
.ui-button.agent-skill-update {
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
  font-size: var(--openbot-text-sm);
}
.ui-button.agent-skill-update:hover:not(:disabled):not([data-disabled]), .ui-button.agent-skill-update:focus-visible {
  background: var(--openbot-accent-soft);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-accent-soft), var(--openbot-accent) 12%);
  }
  color: var(--openbot-accent-text);
}
.agent-skill-copy small {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-skill-row-disabled .agent-skill-title strong {
  color: var(--openbot-text-muted);
}
.agent-skill-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-secondary);
  opacity: 0;
  cursor: pointer;
}
.agent-skill-more svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.agent-skill-row:hover .agent-skill-more, .agent-skill-row:focus-within .agent-skill-more, .agent-skill-row:has([aria-expanded="true"]) .agent-skill-more {
  opacity: 1;
}
.agent-skill-menu {
  z-index: calc(var(--openbot-layer-dialog) + var(--openbot-layer-popover) + 1);
}
.agent-skills-modal .ui-switch[data-checked] {
  background: var(--openbot-accent);
}
.agent-skills-modal .ui-switch-thumb[data-checked] {
  background: var(--openbot-text-primary);
}
.agent-local-library, .agent-skill-detail {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: var(--openbot-space-4);
  overflow: auto;
  padding: var(--openbot-space-3);
  scrollbar-width: none;
}
.agent-local-library::-webkit-scrollbar, .agent-skill-detail::-webkit-scrollbar {
  display: none;
}
.agent-memories-modal[data-expanded] {
  animation: agent-dialog-content-in var(--openbot-duration-dialog) ease;
}
.agent-memories-modal[data-closed] {
  animation: agent-dialog-content-out var(--openbot-duration-dialog) ease;
}
@keyframes agent-dialog-overlay-out {
  to {
    opacity: 0;
  }
}
@keyframes agent-dialog-content-in {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
  }
}
@keyframes agent-dialog-content-out {
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
  }
}
@media (max-width: 520px) {
  .agent-memories-modal {
    width: calc(100vw - 24px);
    height: calc(100dvh - 24px);
  }
  .agent-memories-header {
    padding-left: var(--openbot-space-3);
  }
}
@media (prefers-reduced-motion: reduce) {
  .agent-memories-overlay, .agent-memories-modal {
    animation: none;
  }
}
.agent-settings-page {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
}
.agent-settings-page > .settings-field {
  margin: 0;
}
.agent-settings-switch-row {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  padding: 0 var(--openbot-space-3);
}
.agent-settings-switch-row > .settings-link-label {
  flex: 1 1 auto;
}
.agent-settings-runtime-rows .provider-model-trigger-field, .agent-settings-runtime-rows .agent-settings-runtime-row {
  width: 100%;
  height: auto;
  min-height: 40px;
  gap: var(--openbot-space-2);
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 var(--openbot-space-3);
  box-shadow: none;
  font-size: var(--openbot-text-md);
}
.agent-settings-runtime-rows .provider-model-trigger-field:hover:not(:disabled), .agent-settings-runtime-rows .provider-model-trigger-field[aria-expanded="true"], .agent-settings-runtime-rows .agent-settings-runtime-row[data-expanded] {
  background: var(--openbot-hover);
}
.agent-settings-runtime-rows .provider-model-trigger-field:focus-visible, .agent-settings-runtime-rows .ui-select .agent-settings-runtime-row:focus-visible {
  outline: 0;
  background: var(--openbot-hover);
  box-shadow: inset 0 0 0 1px var(--openbot-border-focus);
}
.agent-settings-runtime-rows .provider-model-trigger-field .provider-model-field-label, .agent-settings-runtime-label {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: 18px;
  text-align: left;
}
.agent-settings-runtime-rows .provider-model-trigger-field .provider-model-trigger-name, .agent-settings-runtime-row .ui-select-value {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
}
.agent-settings-runtime-row .ui-select-trigger-icon {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
@media (hover: hover) and (pointer: fine) {
  .agent-settings-runtime-rows .provider-model-trigger-field:hover .provider-model-trigger-name, .agent-settings-runtime-row:hover .ui-select-value {
    color: var(--openbot-text-secondary);
  }
}
.agent-settings-runtime-rows .provider-model-popover {
  width: var(--kb-popper-anchor-width);
  min-width: 0;
}
.agent-settings-runtime-path {
  display: grid;
  gap: 2px;
  padding: 11px var(--openbot-space-3);
}
.agent-settings-runtime-path > span:last-child {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 17px;
  overflow-wrap: anywhere;
  user-select: text;
}
.agent-settings-runtime-note {
  margin: 0;
  padding-inline: var(--openbot-space-1);
  text-wrap: pretty;
}
.agent-settings-save-error {
  margin: 0 var(--openbot-space-1);
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
}
.agent-settings-notifications {
  display: flex;
  min-height: 70px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-border);
  padding: 13px 12px;
}
.agent-settings-notifications > div {
  min-width: 0;
}
.agent-settings-notifications strong, .agent-settings-notifications span {
  display: block;
}
.agent-settings-notifications strong {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: 500;
  line-height: 18px;
}
.agent-settings-notifications div > span {
  max-width: 194px;
  margin-top: 2px;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: 15px;
}
.routine-trigger-row, .routine-weekday-strip, .routine-calendar-days {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}
:is(.routine-schedule-picker, .routine-popover, .routine-chip-select-content) :is(button, input, textarea):focus-visible {
  outline: 0;
}
:is(.routine-schedule-picker, .routine-popover) .ui-button:focus-visible {
  box-shadow: var(--openbot-focus-ring);
}
.routine-schedule-picker {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-1-5);
}
.routine-trigger-row {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: var(--openbot-space-2);
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-shadow-popover-ambient);
  padding: var(--openbot-space-1);
  transition: border-color var(--openbot-duration-hover) ease;
}
.routine-trigger-row:focus-within {
  border-color: var(--openbot-text-muted);
}
.routine-schedule-picker[data-density="card"] .routine-trigger-row {
  border: 0;
  background: none;
  padding: 0;
}
.routine-trigger-icon {
  display: inline-flex;
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
  color: var(--openbot-text-on-accent);
}
.routine-trigger-icon svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: 2;
}
.routine-schedule-picker[data-density="panel"] .routine-trigger-icon {
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
}
.routine-schedule-picker[data-density="card"] .routine-trigger-icon {
  display: none;
}
.routine-trigger-chips {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: var(--openbot-space-2);
  overflow: clip;
  overflow-clip-margin: var(--openbot-space-1);
}
.routine-trigger-phrase {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--openbot-space-2);
}
.routine-trigger-phrase-flexible {
  min-width: 0;
  flex-shrink: 1;
}
.routine-connector {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
.routine-chip-select {
  width: auto;
  flex: 0 0 auto;
}
.routine-chip-select-flexible {
  min-width: 0;
  flex-shrink: 1;
}
.routine-chip {
  display: inline-flex;
  height: var(--openbot-control-md);
  min-width: 0;
  max-width: 100%;
  align-items: center;
  gap: var(--openbot-space-1-5);
  cursor: pointer;
  border: 0;
  border-radius: var(--openbot-radius-md);
  outline: 0;
  background: var(--openbot-bg-control-active);
  padding: 0 var(--openbot-space-3);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
  white-space: nowrap;
  flex: 0 0 auto;
  transition: background-color var(--openbot-duration-hover) ease;
}
.routine-chip-flexible {
  flex-shrink: 1;
}
.routine-chip-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.routine-schedule-picker[data-density="panel"] .routine-chip {
  height: var(--openbot-control-sm);
  border-radius: var(--openbot-radius-xs);
}
.routine-schedule-picker[data-density="card"] .routine-chip {
  height: var(--openbot-control-sm);
  padding: 0 var(--openbot-space-2);
  font-size: var(--openbot-text-md);
}
.routine-chip:focus-visible {
  box-shadow: var(--openbot-focus-ring);
}
.routine-chip:is([aria-expanded="true"], [data-expanded]) {
  background: var(--openbot-bg-control-hover);
  box-shadow: 0 0 0 1px var(--openbot-border-strong);
}
.routine-chip:disabled, .routine-chip[data-disabled] {
  cursor: default;
  background: transparent;
  padding: 0;
  color: var(--openbot-text-secondary);
}
@media (hover: hover) and (pointer: fine) {
  .routine-chip:hover:not(:disabled, [data-disabled]) {
    background: var(--openbot-bg-control-hover);
    box-shadow: 0 0 0 1px var(--openbot-border-strong);
  }
}
.routine-chip-select-content {
  min-width: 160px;
}
.routine-chip-select-content .ui-select-item {
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
.routine-cron-input {
  min-width: 0;
  max-width: 220px;
  flex: 1 1 180px;
  font-family: var(--openbot-font-mono);
}
.routine-schedule-hint {
  margin: 0;
  padding-left: var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.routine-schedule-picker[data-density="card"] .routine-schedule-hint {
  padding-left: 0;
}
.routine-popover {
  z-index: var(--openbot-layer-popover);
  border-radius: var(--openbot-radius-lg);
  padding: var(--openbot-space-2);
}
.routine-weekday-strip {
  display: flex;
  gap: var(--openbot-space-1);
}
.routine-day-item {
  display: inline-flex;
}
.routine-day {
  display: inline-flex;
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  min-width: 0;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--openbot-radius-pill);
  padding: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.routine-day-item:has(:focus-visible) .routine-day {
  box-shadow: var(--openbot-focus-ring);
}
.routine-weekday-strip .routine-day {
  background: var(--openbot-bg-control-active);
}
@media (hover: hover) and (pointer: fine) {
  .routine-day:hover:not(:disabled, .routine-day-selected) {
    background: var(--openbot-hover);
    color: var(--openbot-text-primary);
  }
}
.routine-day.routine-day-selected, .routine-day.routine-day-selected:hover {
  background: var(--openbot-text-primary);
  color: var(--openbot-bg-canvas);
}
.routine-day.routine-day-selected:focus-visible {
  box-shadow: var(--openbot-focus-ring);
}
.routine-clock-input {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
}
.routine-clock-segment.ui-input {
  width: 48px;
  height: var(--openbot-control-lg);
  border: 0;
  background: var(--openbot-bg-control-active);
  padding: 0;
  font-size: var(--openbot-text-lg);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.routine-clock-segment.ui-input:focus-visible {
  box-shadow: var(--openbot-focus-ring);
}
.routine-clock-separator {
  color: var(--openbot-text-muted);
}
.routine-segmented {
  display: flex;
  margin-left: var(--openbot-space-1);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control-active);
  padding: var(--openbot-space-0-5);
}
.routine-segmented-control {
  display: inline-flex;
  height: calc(var(--openbot-control-lg) - 2 * var(--openbot-space-0-5));
  min-width: 44px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--openbot-radius-sm);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.routine-segmented-control label {
  cursor: pointer;
}
.routine-segmented-control[data-checked] {
  background: var(--openbot-text-primary);
  color: var(--openbot-bg-canvas);
}
.routine-segmented-item:has(:focus-visible) .routine-segmented-control {
  box-shadow: var(--openbot-focus-ring);
}
.routine-window-menu {
  display: grid;
  width: 240px;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-1);
}
.routine-window-options {
  display: grid;
  gap: var(--openbot-space-0-5);
}
.routine-window-repeat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  border-top: 1px solid var(--openbot-border);
  padding: var(--openbot-space-2) var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-3);
}
.routine-window-repeat-label {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
.routine-window-option-control {
  display: flex;
  min-height: var(--openbot-control-lg);
  align-items: center;
  gap: var(--openbot-space-2);
  cursor: pointer;
  border-radius: var(--openbot-radius-md);
  padding: var(--openbot-space-2) var(--openbot-space-3);
}
.routine-window-option-control[data-checked] {
  background: var(--openbot-hover);
}
.routine-window-option:has(:focus-visible) .routine-window-option-control {
  box-shadow: var(--openbot-focus-ring);
}
@media (hover: hover) and (pointer: fine) {
  .routine-window-option-control:hover {
    background: var(--openbot-hover);
  }
}
.routine-window-option-label {
  flex: 1;
  cursor: pointer;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
.routine-window-option-check {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
}
.routine-window-option-check svg {
  width: 100%;
  height: 100%;
}
.routine-window-range {
  display: grid;
  gap: var(--openbot-space-1-5);
  padding: var(--openbot-space-1) var(--openbot-space-3) var(--openbot-space-2);
}
.routine-window-range-times {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.routine-window-range-count {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.routine-calendar {
  display: grid;
  width: calc(7 * var(--openbot-control-md) + 6 * var(--openbot-space-0-5));
  gap: var(--openbot-space-1);
}
.routine-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--openbot-space-1);
}
.routine-calendar-title {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.routine-calendar-weekdays, .routine-calendar-days {
  display: grid;
  grid-template-columns: repeat(7, var(--openbot-control-md));
  gap: var(--openbot-space-0-5);
}
.routine-calendar-weekdays span {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-align: center;
}
.routine-calendar-day:focus-visible {
  box-shadow: var(--openbot-focus-ring);
}
.routine-calendar-day[aria-current="date"]:not(.routine-day-selected) {
  color: var(--openbot-accent-text);
}
.routine-calendar-day:disabled {
  cursor: default;
  opacity: 0.32;
}
.routine-schedule-picker:not([data-fit="roomy"]) .routine-trigger-chips {
  gap: var(--openbot-space-1-5);
}
.routine-schedule-picker:not([data-fit="roomy"]) .routine-trigger-phrase {
  gap: var(--openbot-space-1);
}
.routine-schedule-picker:not([data-fit="roomy"]) .routine-connector {
  font-size: var(--openbot-text-md);
}
.routine-schedule-picker[data-density="panel"]:not([data-fit="roomy"]) .routine-trigger-row {
  gap: var(--openbot-space-1-5);
}
.routine-schedule-picker[data-density="panel"]:not([data-fit="roomy"]) .routine-trigger-icon svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.routine-schedule-picker[data-density="panel"]:not([data-fit="roomy"]) .routine-chip {
  gap: var(--openbot-space-1);
  padding: 0 var(--openbot-space-2);
  font-size: var(--openbot-text-md);
}
.routine-schedule-picker[data-density="panel"]:is([data-fit="tight"], [data-fit="minimal"]) .routine-connector-optional {
  display: none;
}
.routine-schedule-picker[data-density="panel"]:is([data-fit="tight"], [data-fit="minimal"]) :is(.routine-trigger-row, .routine-trigger-chips) {
  gap: var(--openbot-space-1);
}
.routine-schedule-picker[data-density="panel"]:is([data-fit="tight"], [data-fit="minimal"]) .routine-trigger-icon {
  width: var(--openbot-control-xs);
  height: var(--openbot-control-xs);
  align-self: center;
}
.routine-schedule-picker[data-density="panel"]:is([data-fit="tight"], [data-fit="minimal"]) .routine-chip {
  padding: 0 var(--openbot-space-1-5);
}
.routine-schedule-picker[data-fit="minimal"] :is(.routine-trigger-icon, .routine-connector) {
  display: none;
}
.routine-schedule-picker[data-fit="minimal"] .routine-trigger-chips {
  gap: var(--openbot-space-1);
}
.routine-trigger-action {
  display: inline-flex;
  flex: 0 0 auto;
  align-self: center;
  margin-inline-start: calc(var(--openbot-space-1) * -1);
}
.routine-trigger-action:empty {
  display: none;
}
:is(.routine-trigger-row, .routine-trigger-card-header) .routine-trigger-action .ui-button {
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
  border-radius: var(--openbot-radius-xs);
}
.routine-trigger-card {
  display: grid;
  min-width: 0;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-shadow-popover-ambient);
}
.routine-trigger-card-header {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-3);
}
:is(.routine-trigger-card-header, .routine-trigger-menu) .routine-trigger-icon {
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
}
.routine-trigger-card-title {
  min-width: 0;
  flex: 1;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  text-box: trim-both ex alphabetic;
}
.routine-webhook-field {
  display: grid;
  min-height: calc(var(--openbot-control-sm) + var(--openbot-space-2) + 1px);
  grid-template-columns: minmax(84px, auto) minmax(0, 1fr) var(--openbot-control-sm);
  align-items: center;
  gap: var(--openbot-space-3);
  border: 0;
  border-top: 1px solid var(--openbot-border);
  margin: 0;
  background: none;
  padding: var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-3);
  color: inherit;
  font: inherit;
  text-align: left;
}
.routine-webhook-label {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  white-space: nowrap;
}
.routine-webhook-value {
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
code.routine-webhook-value {
  font-family: inherit;
}
code.routine-webhook-secret {
  padding-block: var(--openbot-space-1-5);
  font-family: var(--openbot-font-mono);
  overflow-wrap: anywhere;
  white-space: normal;
}
.routine-webhook-field > :last-child {
  justify-self: center;
}
.routine-webhook-field > .ui-icon-button {
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
}
.routine-webhook-field.routine-webhook-events-toggle {
  width: auto;
  min-width: 0;
  height: auto;
  justify-content: stretch;
  border-radius: 0 0 calc(var(--openbot-radius-md) - 1px) calc(var(--openbot-radius-md) - 1px);
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.routine-webhook-field.routine-webhook-events-toggle[aria-expanded="true"] {
  background: none;
}
.routine-webhook-field.routine-webhook-events-toggle:hover {
  background: var(--openbot-bg-control-hover);
}
.routine-webhook-events-toggle:focus-visible {
  outline: 0;
  box-shadow: var(--openbot-focus-ring);
}
.routine-webhook-events-toggle > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: var(--openbot-icon-stroke);
  color: var(--openbot-text-muted);
}
.ui-text.routine-webhook-value {
  white-space: normal;
}
.routine-webhook-note {
  padding: 0 var(--openbot-space-3) var(--openbot-space-2);
}
.routine-trigger-card-header + .routine-webhook-note {
  border-top: 1px solid var(--openbot-border);
  padding-top: var(--openbot-space-2);
}
.routine-webhook-secret-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.routine-webhook-events {
  display: grid;
  gap: var(--openbot-space-3);
  border-top: 1px solid var(--openbot-border);
  padding: var(--openbot-space-3);
}
.routine-webhook-events .settings-field {
  display: grid;
  margin: 0;
  gap: var(--openbot-space-1-5);
}
.routine-webhook-events .settings-field > span {
  margin: 0;
}
.routine-webhook-events .settings-field > .ui-text {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.routine-webhook-add-filter {
  justify-self: start;
  margin-left: calc(var(--openbot-space-2) * -1);
  padding-inline: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  font-weight: inherit;
}
.routine-webhook-filter-link {
  justify-self: start;
  margin: 0 0 var(--openbot-space-1) var(--openbot-space-1);
  padding-inline: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: inherit;
}
.routine-webhook-add-filter svg, .routine-webhook-filter-link svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.routine-trigger-menu {
  width: 300px;
  max-height: min(70vh, 560px);
  overflow-y: auto;
}
.routine-trigger-menu.ui-action-menu .routine-trigger-menu-item[role="menuitemradio"] {
  height: auto;
  padding-block: var(--openbot-space-1-5);
  gap: var(--openbot-space-3);
  white-space: normal;
}
.routine-trigger-menu-text {
  display: grid;
  min-width: 0;
  flex: 1;
}
.routine-trigger-menu-description {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.routine-trigger-menu.ui-action-menu .routine-trigger-menu-item > .routine-trigger-menu-check {
  color: var(--openbot-text-primary);
}
.routine-planner {
  container-type: inline-size;
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-4);
  color: var(--openbot-text-primary);
}
.routine-planner-header {
  display: grid;
  gap: var(--openbot-space-3);
}
.routine-planner-title {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
}
.routine-planner-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
}
.routine-planner-identity .ui-icon-button {
  margin-left: calc(-1 * var(--openbot-space-2));
}
.routine-planner-title h2 {
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
}
.routine-planner-title h2 span {
  color: var(--openbot-text-muted);
  font-weight: var(--openbot-weight-regular);
}
.routine-planner-title p, .routine-planner-note {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.routine-planner-toolbar {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.routine-planner-nav {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-1);
}
.routine-planner-range {
  margin-left: var(--openbot-space-2);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.routine-planner-clock-change {
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-warning-soft);
  padding: var(--openbot-space-1-5) var(--openbot-space-3);
  color: var(--openbot-warning-text);
  font-size: var(--openbot-text-sm);
}
.routine-planner-body {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
  align-items: start;
  gap: var(--openbot-space-4);
}
.routine-planner-grid {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-1);
}
.routine-planner-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.routine-planner-weekdays > * {
  padding-inline: calc(1px + var(--openbot-space-1-5));
}
.routine-planner-week {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--openbot-space-1);
}
.routine-planner-day {
  display: grid;
  min-width: 0;
  min-height: 12rem;
  align-content: start;
  gap: var(--openbot-space-1);
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  padding: var(--openbot-space-1-5);
}
.routine-planner-day[data-past] {
  background: var(--openbot-transparent);
}
.routine-planner-day[aria-current="date"] {
  border-color: var(--openbot-accent-strong);
}
.routine-planner-day-button.ui-button {
  width: 100%;
  justify-content: flex-start;
  gap: var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
}
.routine-planner-day-button strong {
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-semibold);
  font-variant-numeric: tabular-nums;
}
.routine-planner-day[aria-current="date"] .routine-planner-day-button strong {
  color: var(--openbot-accent-text);
}
.routine-planner-runs, .routine-planner-entries {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-0-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.routine-planner-status {
  display: grid;
  width: var(--openbot-space-4);
  height: var(--openbot-space-4);
  place-items: center;
}
.routine-planner-status > svg {
  width: var(--openbot-space-3);
  height: var(--openbot-space-3);
  stroke-width: 2;
}
.routine-planner-status-dot {
  width: var(--openbot-space-2);
  height: var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
}
.routine-planner-status[data-status="paused"] {
  color: var(--openbot-text-muted);
}
.routine-planner-status[data-status="failed"] {
  color: var(--openbot-danger-text);
}
.routine-planner-status[data-status="completed"] {
  color: var(--openbot-success-text);
}
.routine-planner-avatars {
  display: flex;
}
.routine-planner-avatar.agent-avatar {
  width: var(--openbot-space-4);
  height: var(--openbot-space-4);
}
.routine-planner-avatars .routine-planner-avatar + .routine-planner-avatar {
  margin-left: calc(var(--openbot-space-1-5) * -1);
}
.routine-planner-run.ui-button {
  display: grid;
  width: 100%;
  height: auto;
  min-height: var(--openbot-control-sm);
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "mark time avatars" "name name name";
  align-items: center;
  gap: var(--openbot-space-0-5) var(--openbot-space-1);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-1) var(--openbot-space-1-5);
  text-align: left;
  font-size: var(--openbot-text-sm);
}
.routine-planner-run .routine-planner-status {
  grid-area: mark;
}
.routine-planner-run-time {
  grid-area: time;
  color: var(--openbot-text-muted);
  font-variant-numeric: tabular-nums;
}
.routine-planner-run-name {
  display: -webkit-box;
  grid-area: name;
  min-width: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.3;
  overflow-wrap: break-word;
  white-space: normal;
}
.routine-planner-run .routine-planner-avatars {
  grid-area: avatars;
}
.routine-planner-run[data-status="paused"], .routine-planner-entry[data-status="paused"] {
  opacity: 0.6;
}
.routine-planner-run[data-status="paused"] {
  outline: 1px dashed var(--openbot-border-grouped);
  outline-offset: -1px;
  background: var(--openbot-transparent);
}
.routine-planner-run[data-status="failed"] {
  background: var(--openbot-danger-soft);
}
.routine-planner-run[data-status="completed"] .routine-planner-run-name {
  color: var(--openbot-text-muted);
}
.routine-planner-more.ui-button {
  justify-self: start;
  color: var(--openbot-text-muted);
}
.routine-planner[data-view="month"] .routine-planner-day {
  min-height: 7rem;
}
.routine-planner[data-view="month"] .routine-planner-day-button > span {
  display: none;
}
.routine-planner[data-view="month"] .routine-planner-run.ui-button {
  grid-template-columns: auto auto minmax(0, 1fr);
  grid-template-areas: "mark time name";
}
.routine-planner[data-view="month"] .routine-planner-run-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.routine-planner[data-view="month"] .routine-planner-run .routine-planner-avatars {
  display: none;
}
.routine-planner-day[data-outside] {
  border-color: var(--openbot-border);
  background: var(--openbot-transparent);
}
.routine-planner-day[data-outside] .routine-planner-day-button strong {
  color: var(--openbot-text-muted);
  font-weight: var(--openbot-weight-regular);
}
.routine-planner-upcoming, .routine-planner-day-view {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: var(--openbot-space-2);
}
.routine-planner-upcoming {
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-lg);
  padding: var(--openbot-space-3);
}
.routine-planner-upcoming h3, .routine-planner-hour h3 {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.routine-planner-hour {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  align-items: start;
  gap: var(--openbot-space-2);
  border-top: 1px solid var(--openbot-border-strong);
  padding-top: var(--openbot-space-2);
}
.routine-planner-hour h3 {
  padding-top: var(--openbot-space-2);
  font-variant-numeric: tabular-nums;
}
.routine-planner-entry {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-1);
}
.routine-planner-entry-main.ui-button {
  display: flex;
  min-width: 0;
  height: auto;
  flex: 1 1 auto;
  align-items: center;
  justify-content: flex-start;
  gap: var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  text-align: left;
}
.routine-planner-entry-text {
  display: grid;
  min-width: 0;
}
.routine-planner-entry-name, .routine-planner-entry-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.routine-planner-entry-name {
  font-size: var(--openbot-text-md);
}
.routine-planner-entry-meta {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
}
.routine-planner-entry[data-status="failed"] .routine-planner-entry-meta {
  color: var(--openbot-danger-text);
}
.routine-planner-entry-agents {
  display: flex;
  flex: 0 0 auto;
}
.routine-planner-agent .routine-planner-avatar.agent-avatar {
  width: var(--openbot-control-xs);
  height: var(--openbot-control-xs);
}
.routine-planner-empty {
  display: grid;
  justify-items: center;
  gap: var(--openbot-space-3);
  border: 1px dashed var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-lg);
  padding: var(--openbot-space-8) var(--openbot-space-4);
  color: var(--openbot-text-muted);
  text-align: center;
}
.routine-planner-empty > svg {
  width: var(--openbot-space-6);
  height: var(--openbot-space-6);
  stroke-width: var(--openbot-icon-stroke);
}
.routine-planner-skeleton-heading {
  height: var(--openbot-control-xs);
}
.routine-planner-skeleton-run {
  height: var(--openbot-control-md);
}
@container (max-width: 1160px) {
  .routine-planner-body {
    grid-template-columns: minmax(0, 1fr);
  }
}
@container (max-width: 920px) {
  .routine-planner-week {
    grid-template-columns: minmax(0, 1fr);
  }
  .routine-planner-day {
    min-height: 0;
    grid-template-columns: 5rem minmax(0, 1fr);
    align-items: start;
  }
  .routine-planner-day > :not(.routine-planner-day-heading) {
    grid-column: 2;
  }
  .routine-planner-loading .routine-planner-day {
    grid-template-columns: minmax(0, 1fr);
  }
  .routine-planner-loading .routine-planner-day > * {
    grid-column: 1;
  }
  .routine-planner-weekdays, .routine-planner-day[data-outside] {
    display: none;
  }
  .routine-planner[data-view="month"] .routine-planner-day {
    min-height: 0;
  }
  .routine-planner[data-view="month"] .routine-planner-day-button > span {
    display: inline;
  }
}
.chat-action-card :is(button, input, textarea):focus-visible {
  outline: 0;
}
.chat-action-card .ui-button:focus-visible {
  box-shadow: 0 0 0 1px var(--openbot-text-muted);
}
.chat-action-card.conversation-interaction-card {
  min-width: min(100%, 320px);
}
.chat-action-card {
  display: grid;
  width: fit-content;
  max-width: min(100%, 520px);
  gap: var(--openbot-space-3);
}
.chat-action-card-header {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
}
.chat-action-card-icon {
  display: inline-flex;
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
  color: var(--openbot-text-on-accent);
}
.chat-action-card-icon svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.chat-action-card-heading {
  display: grid;
  min-width: 0;
  flex: 1;
}
.chat-action-card-eyebrow {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.chat-action-card-title {
  overflow: hidden;
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-lg);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-action-card-open svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.chat-action-card-footer {
  display: flex;
  min-height: var(--openbot-leading-md);
  align-items: center;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.chat-action-card-footer-empty {
  min-height: 0;
  margin-top: calc(-1 * var(--openbot-space-3));
}
.chat-action-card-status {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
}
.chat-action-card-status svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.chat-action-card-footer-action {
  margin-left: auto;
}
.chat-action-card-error {
  color: var(--openbot-danger-text);
}
.chat-action-card-removed .chat-action-card-title {
  color: var(--openbot-text-muted);
  text-decoration: line-through;
}
.marketplace-suggestion.conversation-interaction-card {
  display: grid;
  container-type: inline-size;
  width: 100%;
  max-width: 520px;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3);
}
.marketplace-suggestion-header {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-3);
}
.marketplace-suggestion .marketplace-suggestion-icon {
  width: var(--openbot-control-lg);
  height: var(--openbot-control-lg);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-primary);
}
.marketplace-suggestion .marketplace-suggestion-icon img {
  border-radius: inherit;
}
.marketplace-suggestion-heading {
  display: grid;
  min-width: 0;
  flex: 1;
}
@container (max-width: 360px) {
  .marketplace-suggestion-header {
    flex-wrap: wrap;
  }
  .marketplace-suggestion-heading {
    flex-basis: calc(100% - var(--openbot-control-lg) - var(--openbot-control-md) - 2 * var(--openbot-space-3));
  }
  .marketplace-suggestion-action {
    order: 1;
    width: 100%;
  }
  .marketplace-suggestion-action > .ui-button {
    width: 100%;
  }
}
.marketplace-suggestion-title {
  overflow: hidden;
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.marketplace-suggestion .marketplace-suggestion-name {
  height: auto;
  padding: 0;
  color: inherit;
  font: inherit;
}
.marketplace-suggestion-description {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.marketplace-suggestion-action {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
}
.marketplace-suggestion-done[data-slot="badge"] {
  gap: var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-pill);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.marketplace-suggestion-done svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.marketplace-suggestion-unavailable {
  display: flex;
  margin: 0;
  gap: var(--openbot-space-2);
  border-top: 1px solid var(--openbot-border);
  padding-top: var(--openbot-space-3);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.marketplace-suggestion-unavailable svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  margin-top: var(--openbot-space-0-5);
  color: var(--openbot-text-muted);
}
.marketplace-suggestion-dismissed {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.backup-model-logo {
  display: inline-flex;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: none;
  align-items: center;
  justify-content: center;
}
.backup-model-logo svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  overflow: visible;
  fill: var(--openbot-provider-current);
}
.backup-model-option {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
}
.backup-models-page {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
}
.backup-models-intro {
  margin: 0;
  padding-inline: var(--openbot-space-1);
}
.backup-models-empty {
  margin: 0;
  padding: var(--openbot-space-2) var(--openbot-space-3);
}
.backup-models-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.backup-models-row {
  display: flex;
  min-height: 40px;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-1) var(--openbot-space-2) var(--openbot-space-1) var(--openbot-space-3);
}
.backup-models-number {
  width: var(--openbot-icon-sm);
  flex: none;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.backup-models-text {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}
.backup-models-name {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.backup-models-state {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.backup-models-row:not([data-state="ready"]) .backup-model-logo svg {
  opacity: 0.44;
}
.backup-models-row:not([data-state="ready"]) .backup-models-name {
  color: var(--openbot-text-muted);
  text-decoration: line-through;
}
.backup-models-actions {
  display: inline-flex;
  flex: none;
}
.usage-limit-ask-card {
  display: flex;
  max-width: 560px;
  flex-direction: column;
  gap: var(--openbot-space-3);
  margin: var(--openbot-space-4) 0 0;
}
.usage-limit-ask-body {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
}
.usage-limit-ask-select {
  max-width: 320px;
}
.usage-limit-ask-remember {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  cursor: pointer;
}
.usage-limit-ask-error {
  margin: 0;
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
}
.usage-limit-ask-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
}
.task-list {
  --task-list-glyph: var(--openbot-icon-sm);
  --task-list-ease: var(--openbot-ease-out);
  --task-list-open: 320ms;
  --task-list-close: 200ms;
  --task-list-close-ease: cubic-bezier(0.32, 0.08, 0.24, 1);
  --task-list-blur: 4px;
  --task-list-stagger: 28ms;
  box-sizing: border-box;
  width: min(100%, 448px);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
}
.task-list .task-list-header {
  display: flex;
  background: transparent;
  width: 100%;
  height: auto;
  align-items: center;
  justify-content: flex-start;
  gap: var(--openbot-space-3);
  border-radius: var(--openbot-radius-card);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-regular);
  padding: var(--openbot-space-3);
  text-align: left;
}
.task-list .task-list-header:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 1px var(--openbot-text-muted);
}
.task-list-summary-glyph {
  display: inline-flex;
  width: var(--task-list-glyph);
  height: var(--task-list-glyph);
  flex: 0 0 auto;
}
.task-list-donut {
  width: 100%;
  height: 100%;
}
.task-list-donut circle {
  stroke-width: 1.5;
}
.task-list-donut-track {
  stroke: var(--openbot-border-strong);
}
.task-list-donut-value {
  stroke: var(--openbot-text-primary);
  stroke-linecap: round;
  transition: stroke-dashoffset var(--openbot-duration-slow) var(--task-list-ease);
}
.task-list-title {
  display: grid;
  min-width: 0;
  flex: 1;
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.task-list-title-layer {
  overflow: hidden;
  min-width: 0;
  grid-area: 1 / 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: opacity var(--task-list-open) var(--task-list-ease), filter var(--task-list-open) var(--task-list-ease), transform var(--task-list-open) var(--task-list-ease);
}
.task-list-title-name {
  font-weight: var(--openbot-weight-semibold);
}
.task-list-title-task {
  font-weight: var(--openbot-weight-regular);
}
.task-list-title[data-showing="task"] .task-list-title-name, .task-list-title[data-showing="title"] .task-list-title-task {
  filter: blur(var(--task-list-blur));
  opacity: 0;
}
.task-list-title[data-showing="task"] .task-list-title-name {
  transform: translateY(calc(-1 * var(--openbot-space-1)));
}
.task-list-title[data-showing="title"] .task-list-title-task {
  transform: translateY(var(--openbot-space-1));
}
.task-list-title-task-text {
  animation: task-list-title-in var(--task-list-open) var(--task-list-ease);
}
.task-list-count {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-variant-numeric: tabular-nums;
  line-height: var(--openbot-leading-md);
}
.task-list-chevron {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  transform: rotate(-90deg);
  transition: transform var(--openbot-duration-normal) var(--task-list-ease);
}
.task-list[data-open] .task-list-chevron {
  transform: rotate(0deg);
}
.task-list-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--task-list-close) var(--task-list-close-ease);
}
.task-list[data-open] .task-list-panel {
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--task-list-open) var(--task-list-ease);
}
.task-list-items {
  display: grid;
  overflow: hidden;
  min-height: 0;
  margin: 0;
  padding: 0 var(--openbot-space-3);
  list-style: none;
  transition: padding var(--task-list-close) var(--task-list-close-ease);
}
.task-list[data-open] .task-list-items {
  padding-bottom: var(--openbot-space-3);
  transition: padding var(--task-list-open) var(--task-list-ease);
}
.task-list-item {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-0-5) 0;
  filter: blur(var(--task-list-blur));
  opacity: 0;
  transform: translateY(calc(-1 * var(--openbot-space-1))) scale(0.98);
  transform-origin: left top;
  transition: opacity var(--task-list-close) var(--task-list-close-ease), filter var(--task-list-close) var(--task-list-close-ease), transform var(--task-list-close) var(--task-list-close-ease);
}
.task-list[data-open] .task-list-item {
  filter: blur(0);
  opacity: 1;
  transform: none;
  transition: opacity var(--task-list-open) var(--task-list-ease), filter var(--task-list-open) var(--task-list-ease), transform var(--task-list-open) var(--task-list-ease);
  transition-delay: calc(min(var(--task-list-index, 0), 8) * var(--task-list-stagger));
}
.task-list-item-mark {
  display: inline-flex;
  width: var(--task-list-glyph);
  height: var(--openbot-leading-md);
  flex: 0 0 auto;
  align-items: center;
}
.task-list-item-label {
  position: relative;
  min-width: 0;
  flex: 1;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  transition: color var(--openbot-duration-normal) var(--task-list-ease);
}
.task-list-item[data-state="pending"] .task-list-item-label {
  color: var(--openbot-text-muted);
}
.task-list-item[data-state="done"] .task-list-item-label {
  color: var(--openbot-text-dim);
}
.task-list-item-text {
  position: relative;
}
.task-list-item-text::after {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--openbot-duration-slow) var(--task-list-ease);
}
.task-list-item[data-state="done"] .task-list-item-text::after {
  transform: scaleX(1);
}
.task-list-item[data-state="active"] .task-list-item-text, .task-list-title[data-showing="task"] .task-list-title-task-text {
  display: inline-block;
  color: var(--openbot-text-primary);
  animation: task-list-pulse 1.6s ease-in-out infinite;
  animation-play-state: var(--task-list-play-state, running);
}
.task-list-title[data-showing="task"] .task-list-title-task-text {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
  animation: task-list-title-in var(--task-list-open) var(--task-list-ease), task-list-pulse 1.6s ease-in-out infinite;
  animation-play-state: var(--task-list-play-state, running);
}
.task-list-item-progress {
  --digit-dur: var(--openbot-duration-overlay);
  --digit-distance: var(--openbot-space-1);
  --digit-blur: var(--openbot-space-0-5);
  --digit-stagger: 40ms;
  display: inline-flex;
  min-width: 4ch;
  flex: 0 0 auto;
  justify-content: flex-end;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  line-height: var(--openbot-leading-md);
  padding: 0 var(--openbot-space-1-5);
}
.task-list-mark {
  width: var(--task-list-glyph);
  height: var(--task-list-glyph);
  overflow: visible;
}
.task-list-mark circle, .task-list-mark path {
  transition: opacity var(--openbot-duration-normal) var(--task-list-ease), transform var(--openbot-duration-normal) var(--task-list-ease), stroke-dashoffset var(--openbot-duration-slow) var(--task-list-ease);
  transform-box: fill-box;
  transform-origin: center;
}
.task-list-mark-pending {
  opacity: 0;
  stroke: var(--openbot-text-dim);
  stroke-dasharray: 1.2 2;
  stroke-width: 1.5;
}
.task-list-mark-track {
  opacity: 0;
  stroke: var(--openbot-border-strong);
  stroke-width: 1.5;
}
.task-list-mark-arc {
  opacity: 0;
  stroke: var(--openbot-text-primary);
  stroke-dasharray: 12 100;
  stroke-linecap: round;
  stroke-width: 1.5;
}
.task-list-mark-fill {
  fill: var(--openbot-text-dim);
  opacity: 0;
  transform: scale(0.4);
}
.task-list-mark-check {
  stroke: var(--openbot-bg-canvas);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
}
.task-list-mark-cross {
  stroke: var(--openbot-bg-canvas);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
  stroke-width: 1.75;
}
.task-list-mark[data-state="pending"] .task-list-mark-pending, .task-list-mark[data-state="active"] .task-list-mark-track, .task-list-mark[data-state="active"] .task-list-mark-arc, .task-list-mark[data-state="done"] .task-list-mark-fill, .task-list-mark[data-state="failed"] .task-list-mark-fill {
  opacity: 1;
}
.task-list-mark[data-state="active"] {
  animation: task-list-turn 0.9s linear infinite;
  animation-play-state: var(--task-list-play-state, running);
}
.task-list-mark[data-state="done"] .task-list-mark-fill, .task-list-mark[data-state="failed"] .task-list-mark-fill {
  transform: scale(1);
}
.task-list-mark[data-state="failed"] .task-list-mark-fill {
  fill: var(--openbot-danger);
}
.task-list-mark[data-state="done"] .task-list-mark-check, .task-list-mark[data-state="failed"] .task-list-mark-cross {
  stroke-dashoffset: 0;
  transition-delay: var(--openbot-duration-fast);
}
@keyframes task-list-turn {
  to {
    transform: rotate(360deg);
  }
}
@keyframes task-list-title-in {
  from {
    filter: blur(var(--task-list-blur));
    opacity: 0;
    transform: translateY(var(--openbot-space-1));
  }
}
@keyframes task-list-pulse {
  50% {
    opacity: 0.6;
  }
}
.task-list:not([data-open]) .task-list-panel {
  --task-list-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .task-list-donut-value, .task-list-chevron, .task-list-panel, .task-list-items, .task-list-item, .task-list[data-open] .task-list-panel, .task-list[data-open] .task-list-items, .task-list[data-open] .task-list-item, .task-list-item-label, .task-list-title-layer, .task-list-item-text::after, .task-list-mark circle, .task-list-mark path {
    transition: none;
  }
  .task-list-mark[data-state="active"], .task-list-item[data-state="active"] .task-list-item-text, .task-list-title-task-text, .task-list-title[data-showing="task"] .task-list-title-task-text {
    animation: none;
  }
}
.subagents-elapsed {
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
.subagents-live {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.subagents-live-glyph {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: 0 0 auto;
  margin-top: 2px;
}
.subagents-live-text {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.subagents-live[data-state="failed"] {
  color: var(--openbot-danger-text);
}
.subagents-group {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: var(--openbot-space-1-5);
}
.subagents-group .subagents-group-header {
  display: flex;
  height: auto;
  align-self: flex-start;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-left: calc(-1 * var(--openbot-space-1-5));
  border-radius: var(--openbot-radius-sm);
  padding: var(--openbot-space-0-5) var(--openbot-space-1-5);
  color: inherit;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-md);
  text-align: left;
}
.subagents-group .subagents-group-header[aria-expanded="true"]:not(:hover) {
  background: transparent;
  color: inherit;
}
.subagents-group-chevron {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  color: var(--openbot-text-muted);
  transition: rotate var(--openbot-duration-fast) var(--openbot-ease-out);
}
.subagents-group-header[aria-expanded="true"] .subagents-group-chevron {
  rotate: 90deg;
}
@media (prefers-reduced-motion: reduce) {
  .subagents-group-chevron {
    transition: none;
  }
}
.subagents-group-title {
  font-weight: var(--openbot-weight-medium);
}
.subagents-progress {
  gap: var(--openbot-space-1-5);
  font-variant-numeric: tabular-nums;
}
.subagents-ring {
  width: var(--openbot-icon-xs);
}
.subagents-ring .ui-radial-progress-track, .subagents-ring .ui-radial-progress-indicator {
  stroke-width: 7;
}
.subagents-ring .ui-radial-progress-indicator {
  transition: stroke-dasharray var(--openbot-duration-slow) var(--openbot-ease-out);
}
.subagents-progress-failed {
  color: var(--openbot-danger-text);
}
@media (prefers-reduced-motion: reduce) {
  .subagents-ring .ui-radial-progress-indicator {
    transition: none;
  }
}
.subagents-list {
  display: flex;
  width: min(100%, 720px);
  flex-direction: column;
  margin: 0;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-canvas);
  padding: var(--openbot-space-1);
  list-style: none;
}
.subagents-list .subagents-row {
  display: grid;
  width: 100%;
  height: auto;
  align-items: start;
  grid-template-columns: var(--openbot-icon-sm) minmax(0, 1fr) auto auto;
  gap: 2px var(--openbot-space-2);
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  padding: var(--openbot-space-2);
  color: inherit;
  font-weight: var(--openbot-weight-regular);
  line-height: inherit;
  text-align: left;
  white-space: normal;
  cursor: pointer;
}
.subagents-list .subagents-row:hover {
  background: var(--openbot-hover);
}
.subagents-list .subagents-row.subagents-row-selected {
  background: var(--openbot-bg-surface);
}
.subagents-row:focus-visible {
  outline: 2px solid var(--openbot-focus-ring);
  outline-offset: -2px;
}
.subagents-row-copy, .subagents-row .subagents-live {
  display: contents;
}
.subagents-row-title {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.subagents-row .subagents-elapsed {
  line-height: var(--openbot-leading-md);
}
.subagents-row .subagents-live-glyph {
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  justify-self: center;
  margin-top: 0;
}
.subagents-row .subagents-live-text {
  grid-column: 2;
  grid-row: 2;
}
.subagents-row-chevron {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: 0 0 auto;
  margin-top: 4px;
  color: var(--openbot-text-muted);
  opacity: 0;
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}
.subagents-row:hover .subagents-row-chevron, .subagents-row:focus-visible .subagents-row-chevron, .subagents-row.subagents-row-selected .subagents-row-chevron {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .subagents-row-chevron {
    transition: none;
  }
}
.subagents-panel {
  overflow: hidden;
}
.subagents-panel-detail {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: var(--openbot-space-3);
  overflow-y: auto;
  padding: var(--openbot-space-4);
}
.subagents-panel-head {
  display: flex;
  align-items: flex-start;
  gap: var(--openbot-space-2);
}
.subagents-panel-head h3 {
  margin: 0;
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-lg);
  overflow-wrap: anywhere;
}
.subagents-panel-meta {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.subagents-steps {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
}
.subagents-prompt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  border-left: 2px solid var(--openbot-border-strong);
  padding-left: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.subagents-prompt-label {
  color: var(--openbot-text-muted);
  font-weight: var(--openbot-weight-medium);
}
.subagents-step-list {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.subagents-step {
  display: flex;
  align-items: flex-start;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  overflow-wrap: anywhere;
}
.subagents-step-glyph {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--openbot-text-muted);
}
.subagents-step[data-kind="thinking"] .subagents-step-text {
  color: var(--openbot-text-muted);
  font-style: italic;
}
.subagents-step[data-kind="text"] .subagents-step-text {
  color: var(--openbot-text-primary);
}
.subagents-step-text.agent-activity-label {
  -webkit-line-clamp: unset;
}
.subagents-error {
  display: flex;
  align-items: flex-start;
  gap: var(--openbot-space-2);
  margin: 0;
  color: var(--openbot-danger-text);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.subagents-error-icon {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: 0 0 auto;
  margin-top: 2px;
}
.subagents-status {
  display: inline-flex;
  width: var(--openbot-icon-sm);
  height: var(--openbot-leading-md);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}
.subagents-status-icon {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.subagents-status[data-state="running"] {
  color: var(--openbot-accent);
}
.subagents-status[data-state="running"] .subagents-status-icon {
  animation: ui-spin 1s linear infinite;
}
.subagents-status[data-state="completed"] {
  color: var(--openbot-success);
}
.subagents-status[data-state="failed"] {
  color: var(--openbot-danger);
}
.subagents-status[data-state="stopped"] {
  color: var(--openbot-text-muted);
}
@media (prefers-reduced-motion: reduce) {
  .subagents-status[data-state="running"] .subagents-status-icon {
    animation: none;
  }
}
.awaiting-replies {
  --awaiting-composer-overlap: 14px;
  position: relative;
  z-index: 9;
  width: auto;
  margin: 0 12px calc(-1 * var(--awaiting-composer-overlap));
  border-color: var(--openbot-queue-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-queue-surface);
  padding-bottom: var(--awaiting-composer-overlap);
  animation: queue-panel-in var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1) both;
}
.awaiting-replies.task-list .task-list-header {
  min-width: 0;
  flex: 1;
  border-radius: var(--openbot-radius-lg);
}
.awaiting-replies-bar {
  display: flex;
  align-items: center;
}
.awaiting-replies-dismiss {
  margin-right: var(--openbot-space-2);
  color: var(--openbot-text-muted);
}
.composer-wrap:has(.composer-attachment) .awaiting-replies:last-child {
  margin-bottom: 0;
}
.awaiting-replies-item {
  align-items: center;
}
.awaiting-replies-avatar {
  --agent-avatar-optical-offset: -1px;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
}
.awaiting-replies-text {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: baseline;
  gap: var(--openbot-space-2);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.awaiting-replies-name {
  flex: 0 0 auto;
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}
.awaiting-replies-preview {
  overflow: hidden;
  min-width: 0;
  color: var(--openbot-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.awaiting-replies-state {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-md);
}
.awaiting-replies-detail {
  color: var(--openbot-text-dim);
}
.awaiting-replies-item[data-state="failed"] .awaiting-replies-state-label {
  color: var(--openbot-danger-text);
}
.awaiting-replies-item[data-state="active"] .awaiting-replies-state-label {
  animation: task-list-pulse 1.6s ease-in-out infinite;
  animation-play-state: var(--task-list-play-state, running);
}
@media (prefers-reduced-motion: reduce) {
  .awaiting-replies {
    animation: none;
  }
  .awaiting-replies-item[data-state="active"] .awaiting-replies-state-label {
    animation: none;
  }
}
.open-waits .task-list-title-name {
  font-weight: var(--openbot-weight-medium);
}
.open-waits .task-list-count {
  color: var(--openbot-warning-text);
  font-size: var(--openbot-text-sm);
}
.open-waits-row {
  align-items: flex-start;
}
.open-waits-row-text {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: var(--openbot-space-0-5);
}
.open-waits-row-note {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.open-waits-row-meta {
  display: flex;
  min-width: 0;
  gap: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  white-space: nowrap;
}
.open-waits-row-request {
  overflow: hidden;
  min-width: 0;
  color: var(--openbot-text-dim);
  text-overflow: ellipsis;
}
[data-wait-state="woken"] .open-waits-row-state {
  color: var(--openbot-warning-text);
}
[data-wait-state="resuming"] .open-waits-row-state {
  color: var(--openbot-text-primary);
  animation: task-list-pulse 1.6s ease-in-out infinite;
  animation-play-state: var(--task-list-play-state, running);
}
@media (prefers-reduced-motion: reduce) {
  [data-wait-state="resuming"] .open-waits-row-state {
    animation: none;
  }
}
.open-waits-menu {
  flex: 0 0 auto;
  align-self: flex-start;
  color: var(--openbot-text-muted);
}
.conversation-title {
  display: flex;
  height: var(--openbot-control-sm);
  align-items: center;
  gap: 6px;
  border-radius: var(--openbot-radius-sm);
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 2px 4px;
  text-align: left;
  transition: background var(--openbot-duration-hover) ease;
}
.conversation-title:hover {
  background: var(--openbot-hover);
}
.conversation-title h1 {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0;
}
.conversation-access-lock {
  display: inline-flex;
  flex: none;
  color: var(--openbot-text-muted);
}
.conversation-access-lock svg {
  width: 14px;
  height: 14px;
}
.conversation-header-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}
.provider-model-picker {
  position: relative;
  min-width: 0;
}
.provider-model-trigger {
  display: flex;
  width: max-content;
  max-width: 240px;
  height: 28px;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-overlay);
  padding: 0 9px 0 8px;
  color: var(--openbot-text-primary);
  cursor: pointer;
  box-shadow: inset 0 1px var(--openbot-hover);
  transition: border-color var(--openbot-duration-hover) ease, background-color var(--openbot-duration-hover) ease, transform var(--openbot-duration-fast) cubic-bezier(0.23, 1, 0.32, 1);
}
.provider-model-trigger:hover:not(:disabled), .provider-model-trigger[aria-expanded="true"] {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-surface);
}
.provider-model-trigger:active:not(:disabled) {
  transform: scale(0.97);
}
.provider-model-trigger:focus-visible, .provider-model-rail-button:focus-visible, .provider-model-option:focus-visible {
  outline: 1px solid var(--openbot-accent);
  outline-offset: 1px;
}
.provider-model-trigger:disabled {
  opacity: 0.48;
  cursor: default;
}
.provider-model-trigger-value {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}
.provider-model-trigger-name {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  font-size: var(--openbot-text-md);
  font-weight: 470;
  line-height: 18px;
}
.provider-model-trigger-effort {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: 18px;
  white-space: nowrap;
}
.provider-model-trigger-effort::before {
  margin-right: var(--openbot-space-1-5);
  content: "·";
}
.provider-model-trigger:has(.provider-model-trigger-fast) {
  max-width: 296px;
}
.provider-model-trigger-fast svg {
  width: 12px;
  height: 12px;
  margin-right: var(--openbot-space-0-5);
  stroke-width: var(--openbot-icon-stroke);
}
.provider-model-trigger-account {
  min-width: 0;
  max-width: 160px;
  flex-shrink: 1;
  overflow: hidden;
}
.ui-swap {
  position: relative;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
}
.ui-swap > span, .ui-swap-digits {
  display: inline-block;
}
.ui-swap > .ui-swap-leaving {
  position: absolute;
  top: 0;
  left: 0;
}
.provider-model-trigger-value .ui-swap {
  overflow: visible;
}
.provider-model-trigger-name:not(.ui-swap) {
  overflow: hidden;
  text-overflow: ellipsis;
}
.provider-model-trigger-name > span:not(.ui-swap-leaving) {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}
.provider-model-trigger-name > .ui-swap-leaving {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.provider-model-trigger-mark {
  display: flex;
  flex: 0 0 auto;
}
.provider-model-trigger-mark[data-entering] {
  animation: provider-model-mark-in 420ms cubic-bezier(0.34, 1.36, 0.64, 1) both;
}
@keyframes provider-model-mark-in {
  from {
    opacity: 0;
    scale: 0.6;
    filter: blur(2px);
  }
}
.provider-model-picker-field {
  width: 100%;
}
.provider-model-trigger-field {
  width: 100%;
  max-width: none;
  height: 44px;
  gap: 8px;
  border: 0;
  border-radius: 0;
  background: var(--openbot-hover);
  padding: 0 11px 0 12px;
  box-shadow: none;
}
.provider-model-trigger-field:hover:not(:disabled), .provider-model-trigger-field[aria-expanded="true"] {
  border-color: transparent;
  background: var(--openbot-border);
}
.provider-model-trigger-field .provider-model-field-label {
  flex: 0 0 auto;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: 400;
  line-height: 17px;
}
.provider-model-trigger-field .provider-model-trigger-value {
  max-width: calc(100% - 84px);
  margin-left: auto;
  justify-content: flex-end;
}
.provider-model-mark {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  overflow: visible;
  fill: var(--openbot-provider-current);
}
.provider-model-mark-large {
  width: 19px;
  height: 19px;
  flex-basis: 19px;
}
.provider-model-chevron {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  fill: none;
  stroke: var(--openbot-text-muted);
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--openbot-duration-normal) ease;
}
.provider-model-trigger[aria-expanded="true"] .provider-model-chevron {
  transform: rotate(180deg);
}
.provider-model-popover {
  --provider-model-rail-bg: var(--openbot-bg-notch);
  @supports (color: color-mix(in lab, red, red)) {
    --provider-model-rail-bg: color-mix(in srgb, var(--openbot-bg-notch) 22%, var(--ui-menu-bg));
  }
  --provider-model-segment-radius: calc(var(--ui-menu-item-radius) - var(--openbot-space-0-5));
  position: relative;
  z-index: var(--openbot-layer-dropdown);
  width: min(360px, calc(100vw - 24px));
  min-height: 226px;
  overflow: hidden;
  border: 0;
  border-radius: var(--ui-menu-radius);
  background: var(--ui-menu-bg);
  color: var(--openbot-text-primary);
  box-shadow: var(--ui-menu-panel-shadow);
  transform-origin: var(--kb-popover-content-transform-origin);
  animation: ui-menu-in var(--ui-menu-duration) var(--ui-menu-ease) both;
}
.provider-model-popover:not([data-expanded]) {
  animation: ui-menu-out var(--ui-menu-duration) var(--ui-menu-ease) both;
}
.provider-model-layout {
  max-height: min(520px, calc(100dvh - 100px), var(--kb-popper-content-available-height, 520px));
  display: flex;
  width: 100%;
  min-height: inherit;
}
.provider-model-rail {
  display: flex;
  width: 52px;
  flex: 0 0 52px;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-1);
  border-right: 1px solid var(--openbot-border);
  background: var(--provider-model-rail-bg);
  padding: 9px 7px;
}
.provider-model-rail-tabs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-1);
}
.provider-model-rail-add {
  color: var(--openbot-text-muted);
}
.provider-model-rail-add:hover {
  color: var(--openbot-text-primary);
}
.provider-model-rail-tooltip-trigger {
  display: flex;
}
.provider-model-rail-tooltip {
  z-index: var(--openbot-layer-tooltip);
  display: flex;
  max-width: min(240px, calc(100vw - 16px));
  flex-direction: column;
  gap: var(--openbot-space-0-5);
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-surface-raised);
  box-shadow: var(--openbot-shadow-raised);
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-md);
  overflow-wrap: anywhere;
  pointer-events: none;
}
.provider-model-rail-tooltip small {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
}
.provider-model-rail-button {
  position: relative;
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  border: 0;
  border-radius: var(--ui-menu-item-radius);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: background-color var(--openbot-duration-hover) ease, opacity var(--openbot-duration-hover) ease;
}
.provider-model-rail-button:hover {
  background: var(--ui-menu-item-hover);
}
.provider-model-rail-button-selected {
  background: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-primary) 8%, transparent);
  }
  box-shadow: inset 0 0 0 1px var(--ui-menu-edge);
}
.provider-model-rail-button .provider-model-mark {
  opacity: 0.48;
}
.provider-model-rail-button:not(.provider-model-rail-button-selected, .provider-model-rail-button-unavailable):hover .provider-model-mark {
  opacity: 0.8;
}
.provider-model-rail-button-selected .provider-model-mark {
  fill: var(--openbot-text-primary);
  opacity: 1;
}
.provider-model-rail-button-unavailable .provider-model-mark {
  opacity: 0.28;
}
.provider-model-rail-button-unavailable:is(:hover, .provider-model-rail-button-selected) .provider-model-mark {
  opacity: 0.6;
}
.provider-model-rail-button:is( [data-state="not-installed"], [data-state="sign-in-required"], [data-state="outdated"], [data-state="error"] )::after {
  position: absolute;
  top: var(--openbot-space-1-5);
  right: var(--openbot-space-1-5);
  width: 6px;
  height: 6px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-muted);
  box-shadow: 0 0 0 2px var(--provider-model-rail-bg);
  content: "";
}
.provider-model-rail-button:is([data-state="sign-in-required"], [data-state="outdated"])::after {
  background: var(--openbot-warning);
}
.provider-model-rail-account {
  position: absolute;
  right: 2px;
  bottom: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control);
  box-shadow: 0 0 0 2px var(--provider-model-rail-bg);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.provider-model-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  flex: 1;
  padding: var(--ui-menu-padding);
}
.provider-model-panel:not([data-selected]) {
  display: none;
}
.provider-model-heading {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-1-5) 0 var(--openbot-space-2) var(--ui-menu-inset);
}
.provider-model-heading-text {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 4px;
}
.provider-model-heading .ui-button, .provider-model-empty .ui-button-variant-outline {
  border-color: transparent;
  border-radius: var(--ui-menu-item-radius);
  background: var(--ui-menu-item-hover);
  box-shadow: none;
  color: var(--openbot-text-primary);
}
.provider-model-heading .ui-button:hover, .provider-model-empty .ui-button-variant-outline:hover {
  background: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-primary) 10%, transparent);
  }
}
.provider-model-heading .ui-button svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.provider-model-heading strong, .provider-model-heading span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.provider-model-empty {
  display: grid;
  justify-items: start;
  gap: var(--openbot-space-2);
  margin-bottom: var(--ui-menu-padding);
  border: 0;
  border-radius: var(--ui-menu-item-radius);
  background: var(--ui-menu-item-hover);
  padding: var(--openbot-space-2) var(--ui-menu-inset);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: 18px;
}
.provider-model-heading strong {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: 620;
  line-height: 20px;
}
.provider-model-heading span {
  margin-top: 1px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
}
.provider-model-empty > .ui-progress {
  justify-self: stretch;
}
.provider-model-list {
  display: grid;
  gap: 0;
}
.provider-model-effort {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-1) 12px;
  margin: var(--ui-menu-padding) calc(var(--ui-menu-padding) * -1) 0;
  border-top: 1px solid var(--openbot-border);
  padding: var(--ui-menu-padding) var(--ui-menu-padding) 0 calc(var(--ui-menu-padding) + var(--ui-menu-inset));
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 17px;
}
.provider-model-effort + .provider-model-effort {
  margin-top: 0;
  border-top: 0;
  padding-top: var(--openbot-space-1);
}
.provider-model-effort > :first-child {
  display: flex;
  min-height: var(--openbot-control-md);
  align-items: center;
}
.provider-model-effort-select {
  width: 128px;
}
.provider-model-effort-segments {
  --provider-model-effort-duration: 250ms;
  --provider-model-effort-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  gap: var(--openbot-space-0-5);
  border-radius: var(--ui-menu-item-radius);
  background: var(--ui-menu-item-hover);
  padding: var(--openbot-space-0-5);
}
.provider-model-effort-segment {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}
.provider-model-effort-segment-control {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  min-width: 0;
  height: calc(var(--openbot-control-md) - 2 * var(--openbot-space-0-5));
  align-items: center;
  justify-content: center;
  border-radius: var(--provider-model-segment-radius);
  padding-inline: var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--provider-model-effort-duration) var(--provider-model-effort-ease);
}
.provider-model-effort-segment-control label {
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: inherit;
}
.provider-model-effort-segment-control:hover:not([data-disabled]), .provider-model-effort-segment-control[data-checked] {
  color: var(--openbot-text-primary);
}
.provider-model-effort-segment:has(:focus-visible) .provider-model-effort-segment-control {
  box-shadow: 0 0 0 1px var(--openbot-text-muted);
}
.provider-model-effort-segment-control[data-disabled] {
  opacity: 0.5;
  cursor: default;
}
.provider-model-effort-pill {
  position: absolute;
  top: var(--openbot-space-0-5);
  left: 0;
  z-index: 0;
  width: 0;
  height: calc(var(--openbot-control-md) - 2 * var(--openbot-space-0-5));
  border-radius: var(--provider-model-segment-radius);
  background: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-primary) 12%, transparent);
  }
  box-shadow: inset 0 1px 0 var(--ui-menu-highlight);
  pointer-events: none;
  transition: transform var(--provider-model-effort-duration) var(--provider-model-effort-ease), width var(--provider-model-effort-duration) var(--provider-model-effort-ease);
}
.provider-model-effort-pill[data-initializing] {
  transition: none;
}
.provider-model-effort-segments:has([data-disabled]) .provider-model-effort-pill {
  opacity: 0.5;
}
.provider-model-effort-select .ui-select-trigger {
  border-color: transparent;
  border-radius: var(--ui-menu-item-radius);
  background: var(--ui-menu-item-hover);
  box-shadow: none;
}
.provider-model-effort-select .ui-select-trigger:is(:hover, [data-expanded]) {
  background: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-primary) 10%, transparent);
  }
}
.provider-model-effort-content {
  border-radius: var(--ui-menu-radius);
  background: var(--ui-menu-bg);
  box-shadow: var(--ui-menu-panel-shadow);
  animation: ui-menu-in var(--ui-menu-duration) var(--ui-menu-ease) both;
}
.provider-model-effort-content .ui-select-listbox {
  padding: var(--ui-menu-padding);
}
.provider-model-effort-content .ui-select-item {
  border-radius: var(--ui-menu-item-radius);
  padding-block: var(--openbot-space-1-5);
  padding-left: var(--ui-menu-inset);
  font-size: var(--openbot-text-md);
}
.provider-model-effort-content .ui-select-item[data-highlighted] {
  background: var(--ui-menu-item-hover);
}
.provider-model-option {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 0;
  border-radius: var(--ui-menu-item-radius);
  background: transparent;
  padding: var(--openbot-space-1-5) var(--ui-menu-inset) var(--openbot-space-1-5) calc(var(--ui-menu-inset) + var(--openbot-icon-md) + var(--openbot-space-2));
  color: var(--openbot-text-primary);
  cursor: pointer;
  text-align: left;
  transition: background-color var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease;
}
.provider-model-option::before {
  position: absolute;
  top: 50%;
  left: var(--ui-menu-inset);
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  box-sizing: border-box;
  border: 1px solid var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--openbot-text-primary) 22%, transparent);
  }
  border-radius: var(--openbot-radius-pill);
  content: "";
  translate: 0 -50%;
  transition: background-color var(--ui-menu-duration) ease-out, border-color var(--ui-menu-duration) ease-out;
}
.provider-model-option-selected::before {
  border-color: transparent;
  background: var(--openbot-text-primary);
}
.provider-model-option:hover:not(:disabled), .provider-model-option:focus-visible {
  background: var(--ui-menu-item-hover);
}
.provider-model-option:disabled {
  color: var(--openbot-text-dim);
  cursor: not-allowed;
}
.provider-model-option-name {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}
.provider-model-option-name > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--openbot-text-md);
  line-height: 18px;
}
.provider-model-option-name small {
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-primary) 7%, transparent);
  }
  padding: 1px var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: 500;
  line-height: 15px;
}
.provider-model-check {
  position: absolute;
  top: 50%;
  left: calc(var(--ui-menu-inset) + (var(--openbot-icon-md) - var(--openbot-icon-sm)) / 2);
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  fill: none;
  stroke: var(--ui-menu-bg);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.5;
  translate: 0 -50%;
}
@media (max-width: 720px) {
  .provider-model-trigger:not(.provider-model-trigger-field) {
    max-width: 148px;
  }
  .provider-model-trigger-effort {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .provider-model-chevron, .provider-model-trigger, .provider-model-rail-button, .provider-model-option, .provider-model-option::before, .provider-model-effort-segment-control, .provider-model-effort-pill {
    transition: none;
  }
  .provider-model-popover, .provider-model-popover:not([data-expanded]), .provider-model-effort-content {
    animation: none;
  }
  .provider-model-trigger-mark[data-entering] {
    animation: none;
  }
}
.computer-button-agent-active {
  border-color: var(--openbot-accent);
  background: var(--openbot-accent-soft);
  box-shadow: 0 0 10px var(--openbot-accent-strong);
  color: var(--openbot-accent);
}
.computer-control-dot {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 5px;
  height: 5px;
  border: 1px solid var(--openbot-bg-canvas);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
  animation: browser-control-pulse 1.25s ease-in-out infinite;
}
.browser-toolbar-button:active:not(:disabled) {
  transform: scale(0.92);
  transition-duration: var(--openbot-duration-fast);
}
.conversation-scroll {
  min-height: 0;
  flex: 1;
  overflow-anchor: none;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 8px 12px var(--openbot-space-6);
}
.virtual-chat-list {
  position: relative;
  width: 100%;
}
.virtual-chat-row {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  padding-top: var(--openbot-chat-entry-gap);
}
.virtual-chat-row[data-grouped] {
  padding-top: var(--openbot-chat-marker-gap);
}
.virtual-chat-row > .chat-action-marker + .message-entry {
  margin-top: var(--openbot-chat-marker-gap);
}
.virtual-chat-list-static .virtual-chat-row {
  position: relative;
  inset: auto;
}
.virtual-chat-row[data-reply-flash] {
  isolation: isolate;
}
.virtual-chat-row[data-reply-flash]::before {
  position: absolute;
  z-index: -1;
  inset: var(--openbot-chat-entry-gap) -12px 0;
  background: var(--openbot-accent-soft);
  content: "";
  opacity: 0;
  pointer-events: none;
  animation: reply-flash 1.6s var(--openbot-ease-out);
}
.virtual-chat-row[data-grouped][data-reply-flash]::before {
  top: var(--openbot-chat-marker-gap);
}
@keyframes reply-flash {
  0%, 45% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.conversation-history-status {
  display: flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.scroll-to-latest {
  position: sticky;
  z-index: 3;
  top: calc(100% - 58px);
  left: 50%;
  display: flex;
  width: max-content;
  height: 44px;
  align-items: center;
  margin-bottom: -44px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface-raised);
  box-shadow: 0 8px 24px var(--openbot-shadow-popover-ambient), inset 0 0 0 1px var(--openbot-shadow-ring);
  color: var(--openbot-text-primary);
  transform: translateX(-50%);
  transition: background-color var(--openbot-duration-hover) ease;
}
.scroll-to-latest:is([data-new-messages], [data-reply-return]) {
  top: calc(100% - 50px);
  height: 36px;
  margin-bottom: -36px;
}
.scroll-to-latest[data-new-messages] {
  border-color: transparent;
  background: var(--openbot-unread-surface);
  color: var(--openbot-unread-text);
}
.scroll-to-latest-button {
  display: grid;
  width: 44px;
  height: 100%;
  place-items: center;
  border: 0;
  border-radius: inherit;
  background: none;
  color: inherit;
  transition: background-color var(--openbot-duration-hover) ease, transform var(--openbot-duration-fast) cubic-bezier(0.23, 1, 0.32, 1);
}
.scroll-to-latest:is([data-new-messages], [data-reply-return]) .scroll-to-latest-button {
  width: auto;
  grid-auto-flow: column;
  gap: var(--openbot-space-2);
  padding-inline: var(--openbot-space-1-5) var(--openbot-space-2);
}
.scroll-to-latest-count {
  font-size: var(--openbot-text-sm);
  font-weight: 620;
  white-space: nowrap;
}
.scroll-to-latest-dismiss {
  display: grid;
  height: 100%;
  place-items: center;
  border: 0;
  background: none;
  padding-inline: 0 var(--openbot-space-1-5);
  color: inherit;
  transition: transform var(--openbot-duration-fast) cubic-bezier(0.23, 1, 0.32, 1);
}
.scroll-to-latest-button svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}
.scroll-to-latest-dismiss svg {
  box-sizing: content-box;
  width: 14px;
  height: 14px;
  border-radius: var(--openbot-radius-pill);
  padding: var(--openbot-space-1);
  transition: background-color var(--openbot-duration-hover) ease;
}
.scroll-to-latest-button:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: -2px;
}
.scroll-to-latest-dismiss:focus-visible {
  outline: none;
}
.scroll-to-latest-dismiss:focus-visible svg {
  outline: 2px solid var(--openbot-border-focus);
}
.scroll-to-latest[data-new-messages] .scroll-to-latest-button:focus-visible {
  outline-color: var(--openbot-unread-text);
}
.scroll-to-latest[data-new-messages] .scroll-to-latest-dismiss:focus-visible svg {
  outline-color: var(--openbot-unread-text);
}
.scroll-to-latest-button .scroll-to-latest-reply-icon {
  width: 18px;
  height: 18px;
}
.scroll-to-latest-button:active, .scroll-to-latest-dismiss:active {
  transform: scale(0.96);
}
@media (hover: hover) and (pointer: fine) {
  .scroll-to-latest-button:hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-bg-control-active);
    color: inherit;
  }
  .scroll-to-latest-dismiss:hover:not(:disabled):not([data-disabled]) {
    background: none;
    color: inherit;
  }
  .scroll-to-latest-dismiss:hover svg {
    background: var(--openbot-bg-control-active);
  }
  .scroll-to-latest:is([data-new-messages], [data-reply-return]) .scroll-to-latest-button:hover:not(:disabled):not([data-disabled]) {
    background: none;
  }
  .scroll-to-latest[data-new-messages] .scroll-to-latest-dismiss:hover svg {
    background: var(--openbot-unread-text);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--openbot-unread-text) 18%, transparent);
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-to-latest, .scroll-to-latest-button, .scroll-to-latest-dismiss, .scroll-to-latest-dismiss svg {
    transition: none;
  }
  .scroll-to-latest-button:active, .scroll-to-latest-dismiss:active {
    transform: none;
  }
}
.unread-messages-banner {
  position: relative;
  display: flex;
  min-height: 32px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  border-radius: 0 0 var(--openbot-radius-md) var(--openbot-radius-md);
  background: var(--openbot-unread-surface);
  padding: 0 12px;
  color: var(--openbot-unread-text);
  font-size: var(--openbot-text-sm);
  font-weight: 620;
  line-height: 16px;
  transition: background-color var(--openbot-duration-hover) var(--openbot-ease-out);
}
.unread-messages-banner button {
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  color: inherit;
}
.unread-messages-jump {
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0 12px;
  font-size: var(--openbot-text-sm);
  font-weight: 620;
  line-height: 16px;
  text-align: left;
}
.unread-messages-mark-read {
  position: relative;
  z-index: 1;
  margin-left: auto;
  padding: 0;
  font-size: var(--openbot-text-sm);
  font-weight: 680;
  line-height: 14px;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: transform var(--openbot-duration-fast) cubic-bezier(0.23, 1, 0.32, 1);
}
.unread-messages-mark-read-label {
  display: inline-flex;
  align-items: center;
  border-radius: var(--openbot-radius-sm);
  padding: 3px 5px;
  transition: background-color var(--openbot-duration-hover) var(--openbot-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .unread-messages-banner:hover {
    background-color: var(--openbot-unread-surface);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--openbot-unread-surface) 88%, var(--openbot-unread-text));
    }
  }
  .unread-messages-banner .ui-button:hover:not(:disabled):not([data-disabled]) {
    background: transparent;
    color: var(--openbot-unread-text);
  }
  .unread-messages-banner .unread-messages-mark-read:hover:not(:disabled):not([data-disabled]) .unread-messages-mark-read-label {
    background: var(--openbot-unread-text);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--openbot-unread-text) 12%, transparent);
    }
  }
}
.unread-messages-banner button:focus-visible {
  outline: 2px solid var(--openbot-unread-text);
  outline-offset: 1px;
}
.unread-messages-mark-read:active:not(:disabled) {
  transform: scale(0.97);
}
.unread-messages-banner button:disabled {
  opacity: 0.55;
}
.unread-messages-divider {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  margin: var(--openbot-space-1) 0 var(--openbot-space-2);
  color: var(--openbot-unread-surface);
  font-size: var(--openbot-text-sm);
  font-weight: 720;
  letter-spacing: 0.08em;
  line-height: 12px;
}
.unread-messages-divider hr {
  width: 100%;
  height: 1px;
  flex: 1;
  border: 0;
  background: var(--openbot-unread-surface);
}
.unread-messages-divider span {
  flex: 0 0 auto;
}
.time-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 656px;
  height: 24px;
  margin: 0 auto;
  padding: 4px 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
  text-align: center;
}
.chat-scroll-rail {
  --chat-scroll-rail-accent: var(--openbot-text-muted);
  --chat-scroll-rail-track: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --chat-scroll-rail-track: color-mix(in srgb, var(--openbot-text-primary) 10%, transparent);
  }
  --chat-scroll-rail-glow: var(--chat-scroll-rail-accent);
  @supports (color: color-mix(in lab, red, red)) {
    --chat-scroll-rail-glow: color-mix(in srgb, var(--chat-scroll-rail-accent) 60%, transparent);
  }
  --chat-scroll-rail-ease: var(--openbot-ease-out);
  --chat-scroll-rail-duration: var(--openbot-duration-island-content);
  --chat-scroll-rail-quick: var(--openbot-duration-overlay);
  --chat-scroll-rail-blur: 8px;
  position: sticky;
  z-index: 3;
  top: 0;
  pointer-events: none;
}
.chat-scroll-rail-nav {
  position: absolute;
  top: 50%;
  right: calc(-1 * var(--chat-scroll-rail-inset, 0px));
  width: min(260px, 70%);
  height: min(64%, 600px);
  display: flex;
  flex-direction: column;
  padding: var(--openbot-space-3) 0;
  transform: translateY(-50%);
}
.chat-scroll-rail-nav:hover, .chat-scroll-rail-nav:has(:focus-visible) {
  pointer-events: auto;
}
.chat-scroll-rail-surface {
  position: absolute;
  inset: calc(-1 * var(--openbot-space-8)) 0 calc(-1 * var(--openbot-space-8)) calc(-2 * var(--openbot-space-8));
  background: var(--openbot-bg-canvas);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-bg-canvas) 80%, transparent);
  }
  mask-image: linear-gradient( to bottom, transparent, var(--openbot-text-primary) var(--openbot-space-8), var(--openbot-text-primary) calc(100% - var(--openbot-space-8)), transparent ), linear-gradient(to right, transparent, var(--openbot-text-primary) calc(2 * var(--openbot-space-8)));
  mask-composite: intersect;
  opacity: 0;
  transition: opacity var(--openbot-duration-slow) ease;
}
.chat-scroll-rail-eyebrow {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin: 0 0 var(--openbot-space-3);
  padding: 0 var(--openbot-space-4) 0 var(--openbot-space-4);
  color: var(--openbot-text-dim);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity var(--openbot-duration-slow) ease;
}
.chat-scroll-rail-count {
  --digit-dur: var(--openbot-duration-overlay);
  --digit-distance: var(--openbot-space-1);
  --digit-blur: var(--openbot-space-0-5);
  --digit-ease: var(--openbot-ease-out);
  color: var(--chat-scroll-rail-accent);
  font-variant-numeric: tabular-nums;
}
.chat-scroll-rail-track {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.chat-scroll-rail-list {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.chat-scroll-rail-item {
  flex-basis: 0;
  min-height: 22px;
  display: flex;
}
.chat-scroll-rail .chat-scroll-rail-link {
  flex: 1;
  min-width: 0;
  height: auto;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  gap: var(--openbot-space-3);
  padding: 0 0 0 var(--openbot-space-4);
  border: 0;
  border-radius: 0;
  color: var(--openbot-text-muted);
  font-weight: inherit;
  text-decoration: none;
  outline: none;
}
.chat-scroll-rail-item[data-state="read"] .chat-scroll-rail-link {
  color: var(--openbot-text-secondary);
}
.chat-scroll-rail-item[data-state="active"] .chat-scroll-rail-link, .chat-scroll-rail .chat-scroll-rail-link:hover, .chat-scroll-rail .chat-scroll-rail-link:focus-visible {
  color: var(--openbot-text-primary);
  text-decoration: none;
}
.chat-scroll-rail-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  margin-top: -3px;
  font-size: var(--openbot-text-sm);
  line-height: 18px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0;
  filter: blur(var(--chat-scroll-rail-blur));
  transform: translateX(var(--openbot-space-2));
  transition: color var(--openbot-duration-slow) ease, opacity var(--openbot-duration-slow) ease, filter var(--openbot-duration-slow) ease, transform var(--chat-scroll-rail-quick) var(--chat-scroll-rail-ease);
}
.chat-scroll-rail-link:focus-visible .chat-scroll-rail-label {
  text-decoration: underline;
  text-decoration-color: var(--chat-scroll-rail-accent);
  text-underline-offset: 4px;
}
.chat-scroll-rail-bar {
  position: relative;
  width: clamp(12px, var(--chat-scroll-rail-inset, 20px), 20px);
  flex: none;
  padding-bottom: var(--openbot-space-1);
}
.chat-scroll-rail .chat-scroll-rail-bar {
  pointer-events: auto;
}
.chat-scroll-rail-bar::before, .chat-scroll-rail-fill {
  content: "";
  position: absolute;
  top: 0;
  right: 5px;
  bottom: var(--openbot-space-1);
  width: 2px;
  border-radius: var(--openbot-radius-pill);
  transition: width var(--chat-scroll-rail-quick) var(--chat-scroll-rail-ease), right var(--chat-scroll-rail-quick) var(--chat-scroll-rail-ease), background-color var(--chat-scroll-rail-quick) ease;
}
.chat-scroll-rail-bar::before {
  background: var(--chat-scroll-rail-track);
}
.chat-scroll-rail-fill {
  background: var(--chat-scroll-rail-accent);
  transform: scaleY(var(--chat-scroll-rail-fill, 0));
  transform-origin: top center;
}
.chat-scroll-rail-item[data-state="active"] .chat-scroll-rail-bar::before, .chat-scroll-rail-item[data-state="active"] .chat-scroll-rail-fill {
  right: 4.5px;
  width: 3px;
}
.chat-scroll-rail-item[data-state="active"] .chat-scroll-rail-fill {
  box-shadow: 0 0 10px var(--chat-scroll-rail-glow);
}
.chat-scroll-rail-head {
  position: absolute;
  top: 0;
  right: 3px;
  width: 6px;
  height: 6px;
  border-radius: var(--openbot-radius-pill);
  background: var(--chat-scroll-rail-accent);
  box-shadow: 0 0 0 3px var(--chat-scroll-rail-accent), 0 0 12px var(--chat-scroll-rail-glow);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--chat-scroll-rail-accent) 18%, transparent), 0 0 12px var(--chat-scroll-rail-glow);
  }
  pointer-events: none;
  transform: translateY( calc( var(--chat-scroll-rail-head-top) + (var(--chat-scroll-rail-head-length) - var(--openbot-space-1)) * var(--chat-scroll-rail-fill, 0) - 50% ) );
}
.chat-scroll-rail-nav:hover .chat-scroll-rail-surface, .chat-scroll-rail-nav:has(:focus-visible) .chat-scroll-rail-surface {
  backdrop-filter: blur(var(--openbot-space-4));
  opacity: 1;
  transition: opacity var(--openbot-duration-overlay) ease;
}
.chat-scroll-rail-nav:hover .chat-scroll-rail-eyebrow, .chat-scroll-rail-nav:has(:focus-visible) .chat-scroll-rail-eyebrow {
  opacity: 1;
}
.chat-scroll-rail-nav:hover .chat-scroll-rail-label, .chat-scroll-rail-nav:has(:focus-visible) .chat-scroll-rail-label {
  --chat-scroll-rail-delay: calc(min(var(--chat-scroll-rail-index, 0), 12) * 18ms);
  opacity: 1;
  filter: blur(0);
  transform: none;
  transition: color var(--openbot-duration-slow) ease, opacity var(--chat-scroll-rail-quick) ease var(--chat-scroll-rail-delay), filter var(--chat-scroll-rail-quick) ease var(--chat-scroll-rail-delay), transform var(--chat-scroll-rail-duration) var(--chat-scroll-rail-ease) var(--chat-scroll-rail-delay);
}
@media (prefers-reduced-motion: reduce) {
  .chat-scroll-rail .chat-scroll-rail-nav *, .chat-scroll-rail .chat-scroll-rail-nav *::before, .chat-scroll-rail .chat-scroll-rail-nav *::after, .chat-scroll-rail-nav:hover .chat-scroll-rail-surface, .chat-scroll-rail-nav:has(:focus-visible) .chat-scroll-rail-surface, .chat-scroll-rail-nav:hover .chat-scroll-rail-label, .chat-scroll-rail-nav:has(:focus-visible) .chat-scroll-rail-label {
    transition: none;
  }
}
.message-entry {
  max-width: none;
}
.message-entry > .ui-message-content {
  max-width: 100%;
}
.message-action-row {
  display: flex;
  min-height: 24px;
  align-items: center;
  gap: var(--openbot-space-1);
  padding-inline: var(--openbot-space-1);
}
.message-entry-with-author {
  display: grid;
  grid-template-columns: calc(var(--openbot-space-6) + var(--openbot-space-1)) minmax(0, 1fr);
  column-gap: var(--openbot-space-2);
  row-gap: var(--openbot-space-1);
}
.message-entry-with-author > .ui-message-content {
  display: contents;
}
.message-entry-with-author .message-shell {
  grid-column: 2;
  grid-row: 2;
}
.message-entry-with-author .message-action-row {
  grid-column: 2;
  grid-row: 3;
}
.message-entry-with-author .ui-message-footer {
  grid-column: 2;
  grid-row: 4;
}
.message-author-avatar {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  overflow: visible;
  border: 0;
  background: transparent;
}
.message-author-avatar .agent-avatar {
  --agent-avatar-optical-offset: -3px;
  width: var(--openbot-space-6);
  height: var(--openbot-space-6);
}
.message-author-avatar-button {
  width: 100%;
  height: 100%;
  padding: 0;
}
.message-author-avatar-button:hover:not(:disabled):not([data-disabled]) {
  background: transparent;
}
.message-author-gutter {
  width: 28px;
  flex: 0 0 28px;
}
.message-author-name {
  grid-column: 2;
  grid-row: 1;
  padding-inline: var(--openbot-space-3);
  min-width: 0;
  color: var(--message-author-color, var(--openbot-text-muted));
  font-weight: var(--openbot-weight-regular);
  overflow-wrap: anywhere;
}
.message-author-name-button {
  height: auto;
  min-width: 0;
  margin-inline: calc(var(--openbot-space-1-5) * -1);
  padding: 0 var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-md);
  color: inherit;
  font: inherit;
  white-space: normal;
  text-align: start;
}
.message-author-name-button:hover:not(:disabled):not([data-disabled]), .message-author-name-button:focus-visible {
  background: var(--openbot-hover);
  color: inherit;
}
.message-entry-animated {
  animation: message-in var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1) both;
}
.message-entry-agent {
  width: 100%;
}
.message-shell {
  display: flex;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  gap: 5px;
}
.message-entry-user .message-shell {
  justify-content: flex-end;
}
.message-actions {
  position: relative;
  z-index: 4;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--openbot-duration-hover) ease;
}
.message-time {
  padding-inline: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--openbot-duration-hover) ease;
}
.message-author-name > .message-time {
  padding-inline: 0;
}
.message-entry-user .message-action-row > .message-time {
  order: -1;
}
.message-entry:hover .message-actions, .message-entry:focus-within .message-actions, .message-actions-open {
  opacity: 1;
  pointer-events: auto;
}
.message-entry:hover .message-time, .message-entry:focus-within .message-time, .message-entry:has(.message-actions-open) .message-time {
  opacity: 1;
}
@media (hover: none), (pointer: coarse) {
  .message-actions, .message-time {
    opacity: 1;
    pointer-events: auto;
  }
}
.message-entry-user .message-author-name {
  text-align: end;
}
.message-entry-user .message-author-name > .message-time {
  order: -1;
}
.ui-bubble.message-bubble-member > .ui-bubble-content {
  background: var(--message-author-color, var(--openbot-accent));
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix( in srgb, var(--message-author-color, var(--openbot-accent)) 22%, var(--openbot-bg-surface-raised) );
  }
}
.message-action-button {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  padding: 0;
  color: var(--openbot-text-muted);
  transition: background var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease;
}
.message-action-button:hover, .message-action-button:focus-visible, .message-action-button[aria-expanded="true"] {
  background: var(--openbot-border);
  color: var(--openbot-text-secondary);
  outline: none;
}
.message-action-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.message-action-button svg circle:not(:first-child), .message-action-button svg:has(circle:nth-child(3)) circle {
  fill: currentColor;
  stroke: none;
}
.message-action-popover-anchor {
  position: relative;
  display: grid;
  place-items: center;
}
.reaction-picker-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1px;
}
.reaction-picker-options {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1px;
}
.reaction-picker-more {
  margin-top: 3px;
  border-top: 1px solid var(--openbot-border);
  padding-top: 4px;
}
.reaction-picker-more .reaction-picker-options {
  display: grid;
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  grid-template-columns: repeat(8, minmax(0, 1fr));
}
.reaction-picker-more .reaction-picker-options [role="menuitemradio"] {
  width: 100%;
  min-width: 0;
}
.reaction-picker-row :is([role="menuitem"], [role="menuitemradio"]) {
  display: grid;
  width: 31px;
  height: 31px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  padding: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-xl);
  line-height: 1;
  transition: background var(--openbot-duration-hover) ease, transform var(--openbot-duration-hover) ease;
}
.reaction-picker-row :is([role="menuitem"], [role="menuitemradio"]):hover, .reaction-picker-row :is([role="menuitem"], [role="menuitemradio"]):focus-visible, .reaction-picker-row :is([role="menuitem"], [role="menuitemradio"])[data-highlighted], .reaction-picker-row [role="menuitemradio"][aria-checked="true"] {
  background: var(--openbot-border);
  outline: none;
  transform: scale(1.08);
}
.reaction-picker-row .reaction-more-button {
  color: var(--openbot-text-muted);
}
.reaction-more-button svg {
  width: 15px;
  height: 15px;
}
.message-reaction-pill {
  display: flex;
  min-width: 0;
  height: var(--openbot-icon-lg);
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  padding: 0;
  color: inherit;
  font-size: var(--openbot-text-lg);
  line-height: 1;
  transition: background var(--openbot-duration-hover) ease;
}
.message-entry:has(.message-reaction-anchor) > .ui-message-content {
  padding-bottom: var(--openbot-space-3);
}
.message-reaction-anchor .message-reaction-pill {
  gap: 2px;
  margin: 0;
  border-radius: inherit;
}
.ui-bubble-reactions.message-reaction-anchor {
  padding: 2px 6px;
}
.ui-bubble-reactions.message-reaction-anchor:has(> .message-reaction-pill:only-child) {
  width: var(--openbot-control-xs);
  padding-inline: 2px;
}
.ui-bubble-reactions.message-reaction-anchor:has(> .message-reaction-pill:only-child) > .message-reaction-pill {
  width: var(--openbot-icon-lg);
  border-radius: var(--openbot-radius-pill);
}
.message-reaction-anchor .ui-bubble-reaction-overflow {
  padding-right: 6px;
}
.message-reaction-pill:hover {
  background: var(--openbot-hover);
}
.message-reaction-pill-readonly:hover {
  background: transparent;
}
.message-reaction-anchor:has(.message-reaction-pill:focus-visible) {
  box-shadow: 0 0 0 3px var(--openbot-bg-canvas), 0 0 0 5px var(--openbot-border-focus);
}
.message-reaction-pill:focus-visible {
  outline: none;
}
.chat-action-entry-animated {
  width: 100%;
  animation: message-in var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1) both;
}
.agent-activity-slot[data-reserved="true"] {
  min-height: 44px;
}
.agent-activity-entry {
  width: 100%;
  display: grid;
  grid-template-rows: 1fr;
  pointer-events: none;
  transition: grid-template-rows var(--openbot-duration-overlay) var(--openbot-ease-out);
}
@starting-style {
  .agent-activity-entry {
    grid-template-rows: 0fr;
  }
}
.agent-activity-entry[data-state="exiting"] {
  grid-template-rows: 0fr;
}
.agent-activity-content {
  min-height: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  padding: 4px 0 8px 8px;
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  transition: opacity var(--openbot-duration-overlay) var(--openbot-ease-out), filter var(--openbot-duration-overlay) var(--openbot-ease-out), transform var(--openbot-duration-overlay) var(--openbot-ease-out);
  will-change: opacity, filter, transform;
}
@starting-style {
  .agent-activity-content {
    opacity: 0;
    filter: blur(2px);
    transform: translateY(4px);
  }
}
.agent-activity-entry[data-state="exiting"] .agent-activity-content {
  opacity: 0;
  filter: blur(2px);
  transform: translateY(2px);
}
.agent-activity-avatar {
  --agent-avatar-optical-offset: -2px;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  align-self: center;
  transform: translateY(0) scale(1);
  transition: transform var(--openbot-duration-overlay) var(--openbot-ease-out);
  will-change: transform;
}
@starting-style {
  .agent-activity-avatar {
    transform: translateY(3px) scale(0.96);
  }
}
.agent-activity-entry[data-state="exiting"] .agent-activity-avatar {
  transform: translateY(0) scale(0.98);
}
.agent-activity-label {
  display: -webkit-box;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  background: linear-gradient( 90deg, var(--openbot-text-primary) 0%, var(--openbot-text-primary) 30%, var(--openbot-text-muted) 45%, var(--openbot-text-muted) 55%, var(--openbot-text-primary) 70%, var(--openbot-text-primary) 100% );
  background-size: 300% 100%;
  background-clip: text;
  color: transparent;
  font-size: var(--openbot-text-sm);
  line-height: 20px;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: image-generation-shine 2.25s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
}
.agent-activity-elapsed {
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  line-height: 20px;
}
.chat-action-marker {
  width: min(var(--openbot-chat-marker-width), calc(100% - var(--openbot-space-6)));
  min-height: var(--openbot-chat-marker-height);
  justify-content: center;
  margin: 0 auto;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  letter-spacing: var(--openbot-tracking-normal);
  text-align: center;
}
.chat-action-marker-content {
  max-width: 100%;
  gap: var(--openbot-space-1);
}
.chat-action-marker-summary {
  --chat-action-history-open: 340ms;
  --chat-action-history-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --chat-action-history-close: 200ms;
  --chat-action-history-close-ease: cubic-bezier(0.32, 0.08, 0.24, 1);
  --chat-action-history-lift: 170ms;
  --chat-action-history-fade: 22px;
  --chat-action-history-entry: 260ms;
  --chat-action-history-stagger: 60ms;
  display: flex;
  min-width: 0;
  max-width: 100%;
  flex-direction: column;
  align-items: center;
}
.ui-button.chat-action-history-toggle {
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
}
.chat-action-history-toggle svg {
  transition: transform var(--chat-action-history-close) var(--openbot-ease-out);
}
.chat-action-history-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.chat-action-history-panel {
  display: grid;
  width: 100%;
  grid-template-rows: 1fr;
}
.chat-action-history-panel[data-state="open"] {
  animation: chat-action-history-open var(--chat-action-history-open) var(--chat-action-history-ease);
}
.chat-action-history-panel[data-state="closed"] {
  animation: chat-action-history-close var(--chat-action-history-close) var(--chat-action-history-close-ease) forwards;
}
@keyframes chat-action-history-open {
  from {
    grid-template-rows: 0fr;
  }
}
@keyframes chat-action-history-close {
  to {
    grid-template-rows: 0fr;
  }
}
.chat-action-history-panel[data-state="open"] .chat-action-history {
  animation: chat-action-history-settle var(--chat-action-history-open) var(--openbot-ease-out);
}
.chat-action-history-panel[data-state="closed"] .chat-action-history {
  animation: chat-action-history-lift var(--chat-action-history-lift) var(--openbot-ease-out) forwards;
}
@keyframes chat-action-history-settle {
  from {
    transform: translateY(-25%);
  }
}
@keyframes chat-action-history-lift {
  to {
    transform: translateY(-8%);
    opacity: 0;
  }
}
.chat-action-history-clip {
  min-height: 0;
  overflow: hidden;
}
.chat-action-history-panel[data-state="closed"] .chat-action-history-clip {
  -webkit-mask-image: linear-gradient( to bottom, var(--openbot-text-primary) calc(100% - var(--chat-action-history-fade)), transparent );
  mask-image: linear-gradient( to bottom, var(--openbot-text-primary) calc(100% - var(--chat-action-history-fade)), transparent );
}
.chat-action-history {
  box-sizing: border-box;
  display: grid;
  width: 100%;
  gap: var(--openbot-space-1);
  margin: var(--openbot-space-1) 0 0;
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  border-inline-start: 1px solid var(--openbot-border-grouped);
  list-style: none;
  text-align: left;
}
.chat-action-history-entry {
  display: grid;
  grid-template-columns: var(--openbot-icon-xs) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-1-5);
  color: var(--openbot-text-secondary);
}
.chat-action-history-panel[data-state="open"] .chat-action-history-entry {
  animation: chat-action-history-entry-in var(--chat-action-history-entry) var(--openbot-ease-out) backwards;
}
.chat-action-history-panel[data-state="open"] .chat-action-history-entry:nth-child(2) {
  animation-delay: var(--chat-action-history-stagger);
}
.chat-action-history-panel[data-state="open"] .chat-action-history-entry:nth-child(3) {
  animation-delay: calc(var(--chat-action-history-stagger) * 2);
}
.chat-action-history-panel[data-state="open"] .chat-action-history-entry:nth-child(n + 4) {
  animation-delay: calc(var(--chat-action-history-stagger) * 3);
}
@keyframes chat-action-history-entry-in {
  from {
    transform: translateX(calc(var(--openbot-space-1) * -1));
    opacity: 0;
    filter: blur(2px);
  }
}
.chat-action-history-entry time {
  color: var(--openbot-text-muted);
  white-space: nowrap;
}
.chat-action-history-icon, .chat-action-history-icon svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.chat-action-history-status-completed .chat-action-history-icon {
  color: var(--openbot-success);
}
.chat-action-history-status-failed .chat-action-history-icon, .chat-action-history-status-interrupted .chat-action-history-icon, .chat-action-history-status-cancelled .chat-action-history-icon {
  color: var(--openbot-danger);
}
.chat-action-history-status-needs-attention .chat-action-history-icon {
  color: var(--openbot-warning);
}
.chat-action-history-status-in-progress .chat-action-history-icon {
  color: var(--openbot-accent);
}
@media (prefers-reduced-motion: reduce) {
  .chat-action-history-panel, .chat-action-history, .chat-action-history-entry {
    animation: none;
  }
  .chat-action-history-toggle svg {
    transition: none;
  }
}
.chat-action-marker-label, .chat-action-marker-time {
  flex: 0 0 auto;
  white-space: nowrap;
}
.chat-action-marker-time {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.chat-action-target {
  box-sizing: border-box;
  display: inline-flex;
  min-width: 0;
  max-width: min(280px, 100%);
  height: auto;
  min-height: var(--openbot-chat-marker-height);
  flex: 0 1 auto;
  align-items: center;
  gap: var(--openbot-space-1);
  border: 0;
  border-radius: var(--openbot-radius-pill);
  background: transparent;
  padding: 0 var(--openbot-space-1-5);
  color: var(--openbot-text-secondary);
  font: inherit;
  line-height: inherit;
  outline: none;
  text-align: left;
  white-space: nowrap;
  transition: background-color var(--openbot-duration-hover) var(--openbot-ease-out), box-shadow var(--openbot-duration-hover) var(--openbot-ease-out), color var(--openbot-duration-hover) var(--openbot-ease-out), scale var(--openbot-duration-fast) var(--openbot-ease-out);
}
button.chat-action-target:hover, .chat-action-agent-menu-trigger:hover, .chat-action-agent-menu-trigger[aria-expanded="true"] {
  background: var(--openbot-bg-control-hover);
  box-shadow: 0 0 0 1px var(--openbot-border-strong);
  color: var(--openbot-text-primary);
}
button.chat-action-target:focus-visible, .chat-action-agent-menu-trigger:focus-visible {
  background: var(--openbot-bg-control-hover);
  box-shadow: var(--openbot-focus-ring);
  color: var(--openbot-text-primary);
}
button.chat-action-target:active, .chat-action-agent-menu-trigger:active {
  background: var(--openbot-bg-control-active);
  scale: 0.96;
}
.chat-action-target-unavailable {
  color: var(--openbot-text-muted);
}
.chat-action-marker-unavailable .chat-action-marker-label, .chat-action-marker-context-reset .chat-action-marker-label, .chat-action-marker-model-switch .chat-action-marker-label {
  padding-inline-end: var(--openbot-space-1-5);
}
.chat-action-target-name, .chat-action-target > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-action-target .ui-marker-icon, .chat-action-target .ui-marker-icon svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: 0 0 var(--openbot-icon-xs);
}
.chat-action-target .ui-marker-icon {
  translate: 0 -0.5px;
}
.chat-action-agent-avatar {
  --agent-avatar-optical-offset: -2px;
  position: relative;
  width: var(--openbot-chat-marker-avatar);
  height: var(--openbot-chat-marker-avatar);
  flex: 0 0 var(--openbot-chat-marker-avatar);
  border: 0;
  background: transparent;
  translate: 0 -0.5px;
}
.chat-action-marker-agent-message .chat-action-target {
  --chat-action-agent-color: var(--openbot-accent);
}
.chat-action-marker-agent-message button.chat-action-target:hover, .chat-action-marker-agent-message .chat-action-agent-menu-trigger:hover, .chat-action-marker-agent-message .chat-action-agent-menu-trigger[aria-expanded="true"] {
  background: var(--chat-action-agent-color);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--chat-action-agent-color) 16%, transparent);
  }
  box-shadow: none;
  color: var(--chat-action-agent-color);
}
.chat-action-marker-agent-message button.chat-action-target:focus-visible, .chat-action-marker-agent-message .chat-action-agent-menu-trigger:focus-visible {
  background: var(--chat-action-agent-color);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--chat-action-agent-color) 16%, transparent);
  }
  box-shadow: var(--openbot-focus-ring);
  color: var(--chat-action-agent-color);
}
.chat-action-marker-agent-message button.chat-action-target:active, .chat-action-marker-agent-message .chat-action-agent-menu-trigger:active {
  background: var(--chat-action-agent-color);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--chat-action-agent-color) 34%, transparent);
  }
  color: var(--openbot-text-primary);
}
.chat-action-target-status-in-progress .ui-marker-icon {
  color: var(--openbot-accent);
}
.chat-action-target-status-completed .ui-marker-icon {
  color: var(--openbot-success);
}
.chat-action-target-status-failed .ui-marker-icon, .chat-action-target-status-cancelled .ui-marker-icon, .chat-action-target-status-interrupted .ui-marker-icon {
  color: var(--openbot-danger);
}
.chat-action-target-status-needs-attention .ui-marker-icon {
  color: var(--openbot-warning);
}
.chat-action-target-status-in-progress .ui-marker-icon svg {
  animation: ui-spin 1s linear infinite;
}
.chat-action-avatar-stack {
  display: inline-flex;
  min-width: 0;
  height: var(--openbot-chat-marker-avatar);
  align-items: center;
}
.chat-action-avatar-stack .chat-action-agent-avatar + .chat-action-agent-avatar {
  margin-left: -6px;
}
.chat-action-group-list {
  padding-inline: 0;
  border-inline-start: 0;
  text-align: center;
}
.chat-action-group-list > .chat-action-history-entry {
  display: block;
}
.chat-action-group-list .chat-action-marker {
  width: 100%;
}
.chat-action-marker-routine-run-group > .chat-action-marker-summary > .chat-action-marker-content {
  flex-wrap: wrap;
  justify-content: center;
}
.chat-action-run-group-details {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--openbot-space-1);
}
.chat-action-run-group-count::before, .chat-action-run-group-time::before {
  content: "·" / "";
  margin-inline-end: var(--openbot-space-1);
}
.ui-action-menu.chat-action-agent-menu {
  min-width: 220px;
  max-width: min(320px, calc(100vw - var(--openbot-space-4)));
}
.ui-action-menu.chat-action-agent-menu .chat-action-agent-menu-item[role="menuitem"] {
  display: grid;
  align-items: center;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: var(--openbot-space-2);
}
.chat-action-agent-menu-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-action-agent-menu-item .chat-action-agent-avatar {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
}
.chat-action-agent-menu-status {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  white-space: nowrap;
}
.chat-action-attachments {
  margin-top: var(--openbot-space-2);
}
.chat-row-unavailable {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .chat-action-target-status-in-progress .ui-marker-icon svg {
    animation: none;
  }
}
.message-entry .ui-bubble {
  letter-spacing: -0.15px;
}
.message-entry-agent .ui-bubble {
  max-width: min(720px, 100%);
}
.message-entry-agent .ui-bubble:has(.choice-card) {
  width: min(500px, 100%);
  max-width: min(500px, 100%);
}
.message-entry-agent .ui-bubble:has(.image-generation) {
  width: min(420px, 100%);
  max-width: min(420px, 100%);
}
.message-entry-agent .ui-bubble:has(.image-gallery) {
  width: min(520px, 100%);
  max-width: min(520px, 100%);
}
.message-entry-agent .ui-bubble-variant-ghost:has( :is(.choice-card, .image-generation, .image-gallery, .message-code-block, .message-data-table-scroll) ) > .ui-bubble-content {
  width: 100%;
}
.image-generation {
  display: grid;
  min-width: 0;
  justify-items: start;
  gap: 14px;
}
.message-image-attachments {
  display: grid;
  min-width: 0;
  gap: 10px;
}
.image-generation-stage {
  position: relative;
  width: min(100%, 420px);
  overflow: hidden;
  aspect-ratio: var(--image-generation-ratio);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  isolation: isolate;
}
.image-generation-canvas, .image-generation-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.image-generation-canvas {
  overflow: hidden;
  background: var(--openbot-bg-control);
  opacity: 1;
  transition: opacity var(--openbot-duration-overlay) ease;
}
.image-generation-canvas-failed {
  display: grid;
  place-items: center;
}
.image-generation-ready .image-generation-canvas {
  opacity: 0;
}
.image-generation-ready .image-generation-glow {
  animation: none;
}
.image-generation-dots {
  position: absolute;
  inset: 2px;
  background-image: radial-gradient(circle, var(--openbot-text-muted) 0.7px, transparent 1.3px);
  background-repeat: space;
  background-size: 11px 11px;
  opacity: 0.22;
}
.image-generation-failure-mark {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 2px solid var(--openbot-danger);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-danger-soft);
  box-shadow: 0 0 0 5px var(--openbot-danger-soft);
  color: var(--openbot-danger);
}
.image-generation-failure-mark > svg {
  width: var(--openbot-control-xl);
  height: var(--openbot-control-xl);
  stroke-width: var(--openbot-icon-stroke);
}
.image-generation-glow {
  position: absolute;
  inset: 2px;
  background-image: radial-gradient(circle, var(--openbot-text-primary) 1.1px, transparent 1.6px);
  background-repeat: space;
  background-size: 11px 11px;
  -webkit-mask-image: radial-gradient(ellipse at center, var(--openbot-text-primary) 0%, transparent 60%), radial-gradient(ellipse at center, var(--openbot-text-primary) 0%, transparent 62%);
  mask-image: radial-gradient(ellipse at center, var(--openbot-text-primary) 0%, transparent 60%), radial-gradient(ellipse at center, var(--openbot-text-primary) 0%, transparent 62%);
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-size: 72% 62%, 52% 52%;
  mask-size: 72% 62%, 52% 52%;
  -webkit-mask-position: 16% 20%, 30% 32%;
  mask-position: 16% 20%, 30% 32%;
  animation: image-generation-morph 4.2s cubic-bezier(0.35, 1.55, 0.65, 1) infinite, image-generation-breathe 1.9s cubic-bezier(0.66, 0, 0.34, 1) infinite;
}
.image-generation-resolution {
  position: absolute;
  z-index: 1;
  top: 8px;
  right: 8px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface);
  padding: 2px 7px;
  color: var(--openbot-text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--openbot-text-sm);
  white-space: nowrap;
}
.image-generation-meta {
  display: flex;
  width: min(100%, 420px);
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
}
.image-generation-label {
  background: linear-gradient( 90deg, var(--openbot-text-primary) 0%, var(--openbot-text-primary) 30%, var(--openbot-text-muted) 45%, var(--openbot-text-muted) 55%, var(--openbot-text-primary) 70%, var(--openbot-text-primary) 100% );
  background-size: 300% 100%;
  background-clip: text;
  color: transparent;
  font-size: var(--openbot-text-lg);
  font-weight: 550;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.image-generation:not(.image-generation-ready, .image-generation-failed) .image-generation-label {
  animation: image-generation-shine 2.25s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
}
.image-generation-prompt {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.image-generation-error {
  max-width: 100%;
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
  line-height: 17px;
}
.image-generation-preview {
  display: block;
  border: 0;
  background: var(--openbot-bg-control);
  cursor: pointer;
  opacity: 0;
  padding: 0;
  transition: opacity var(--openbot-duration-overlay) ease;
}
.image-generation-preview-visible {
  opacity: 1;
}
.image-generation-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.image-generation-preview:focus-visible, .image-generation-hover-download:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}
.image-generation-hover-download {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  right: 10px;
  bottom: 10px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-glass);
  padding: 5px 10px;
  color: var(--openbot-text-primary);
  cursor: pointer;
  backdrop-filter: blur(12px) saturate(1.15);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  font-size: var(--openbot-text-sm);
  font-weight: 650;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: background-color var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease, border-color var(--openbot-duration-hover) ease, opacity var(--openbot-duration-hover) ease, transform var(--openbot-duration-hover) ease;
}
.image-generation-download-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}
.image-generation-stage:hover .image-generation-hover-download, .image-generation-stage:focus-within .image-generation-hover-download {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.image-generation-hover-download:hover {
  border-color: var(--openbot-border-focus);
  background: var(--openbot-bg-glass);
  color: var(--openbot-text-primary);
}
@keyframes image-generation-morph {
  0% {
    -webkit-mask-size: 52% 46%, 40% 40%;
    mask-size: 52% 46%, 40% 40%;
    -webkit-mask-position: 16% 20%, 30% 32%;
    mask-position: 16% 20%, 30% 32%;
  }
  25% {
    -webkit-mask-size: 46% 58%, 44% 38%;
    mask-size: 46% 58%, 44% 38%;
    -webkit-mask-position: 84% 16%, 66% 30%;
    mask-position: 84% 16%, 66% 30%;
  }
  50% {
    -webkit-mask-size: 60% 44%, 38% 46%;
    mask-size: 60% 44%, 38% 46%;
    -webkit-mask-position: 82% 84%, 62% 68%;
    mask-position: 82% 84%, 62% 68%;
  }
  75% {
    -webkit-mask-size: 48% 54%, 46% 40%;
    mask-size: 48% 54%, 46% 40%;
    -webkit-mask-position: 14% 82%, 34% 66%;
    mask-position: 14% 82%, 34% 66%;
  }
  100% {
    -webkit-mask-size: 52% 46%, 40% 40%;
    mask-size: 52% 46%, 40% 40%;
    -webkit-mask-position: 16% 20%, 30% 32%;
    mask-position: 16% 20%, 30% 32%;
  }
}
@keyframes image-generation-breathe {
  0%, 100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}
@keyframes image-generation-shine {
  0%, 18% {
    background-position: 100% 0;
  }
  82%, 100% {
    background-position: 0% 0;
  }
}
.message-entry-pending .message-shell {
  opacity: 0.7;
}
.pending-send-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--openbot-space-1);
}
.pending-send-status[data-state="failed"] .pending-send-label {
  color: var(--openbot-danger-text);
}
.pending-send-error {
  margin-inline-start: var(--openbot-space-2);
  overflow-wrap: anywhere;
}
.message-entry-user .ui-bubble {
  max-width: min(420px, 100%);
}
.message-copy {
  margin: 0;
  font-size: var(--openbot-text-lg);
  line-height: 20px;
  overflow-wrap: anywhere;
  white-space: pre-line;
  user-select: text;
}
.message-markdown {
  white-space: normal;
}
.message-markdown > *, .message-markdown :is(p, ul, ol, blockquote) {
  margin: 0;
}
.message-markdown > :not(:first-child) {
  margin-top: var(--openbot-space-3);
}
.message-markdown-heading {
  margin: 0;
  color: inherit;
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: var(--openbot-tracking-tight);
}
.message-markdown-heading[data-level="1"] {
  font-size: var(--openbot-text-2xl);
  line-height: var(--openbot-leading-2xl);
}
.message-markdown-heading[data-level="2"] {
  font-size: var(--openbot-text-xl);
  line-height: var(--openbot-leading-xl);
}
.message-markdown-heading:is([data-level="3"], [data-level="4"], [data-level="5"], [data-level="6"]) {
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
.message-markdown strong {
  font-weight: var(--openbot-weight-semibold);
}
.message-markdown del {
  color: var(--openbot-text-secondary);
}
.message-markdown :is(ul, ol) {
  padding-left: var(--openbot-space-6);
}
.message-markdown ul {
  list-style: disc;
}
.message-markdown ul ul {
  list-style: circle;
}
.message-markdown ol {
  list-style: decimal;
}
.message-markdown li + li, .message-markdown li > :is(ul, ol) {
  margin-top: var(--openbot-space-1);
}
.message-markdown-task {
  display: flex;
  align-items: flex-start;
  gap: var(--openbot-space-1-5);
  list-style: none;
}
.message-markdown-checkbox {
  margin-top: var(--openbot-space-1);
  opacity: 1;
}
.message-markdown blockquote {
  border-left: var(--openbot-space-0-5) solid var(--openbot-border-strong);
  padding-left: var(--openbot-space-3);
  color: var(--openbot-text-secondary);
}
.message-markdown blockquote > :not(:first-child) {
  margin-top: var(--openbot-space-2);
}
.message-markdown :not(pre) > code {
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-0-5) var(--openbot-space-1);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-md);
  white-space: break-spaces;
}
.message-markdown hr {
  height: 1px;
  border: 0;
  background: var(--openbot-border-strong);
}
.message-markdown-raw-html {
  display: block;
  color: var(--openbot-text-secondary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-md);
  white-space: pre-wrap;
}
.message-markdown-image {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 360px;
  border-radius: var(--openbot-radius-md);
  object-fit: contain;
}
.message-markdown-image-button {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  padding: 0;
  border-radius: var(--openbot-radius-md);
  cursor: zoom-in;
}
.message-markdown-image-button:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}
.message-markdown-table-scroll {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  border-radius: var(--openbot-radius-md);
  box-shadow: 0 0 0 1px var(--openbot-data-table-ring);
}
.message-markdown-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--openbot-bg-canvas);
  color: var(--openbot-data-table-text);
}
.message-markdown-table :is(th, td) {
  border-right: 1px solid var(--openbot-data-table-border);
  border-bottom: 1px solid var(--openbot-data-table-border);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  overflow-wrap: break-word;
  text-align: left;
  vertical-align: top;
}
.message-markdown-table th {
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-data-table-header-text);
  font-weight: var(--openbot-weight-medium);
}
.message-markdown-table :is(th, td):last-child {
  border-right: 0;
}
.message-markdown-table tbody tr:last-child td {
  border-bottom: 0;
}
.message-markdown-table [data-align="center"] {
  text-align: center;
}
.message-markdown-table [data-align="right"] {
  text-align: right;
}
::highlight(openbot-message-selection) {
  background: var(--openbot-accent-strong);
  color: inherit;
}
::highlight(openbot-quote-target) {
  background: var(--openbot-warning);
  color: var(--openbot-text-on-light);
}
.selection-highlight-layer {
  position: fixed;
  z-index: 18;
  inset: 0;
  pointer-events: none;
}
.selection-highlight-layer span {
  position: fixed;
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-accent-strong);
}
.selection-actions-layer {
  position: fixed;
  z-index: 25;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px) scale(0.97);
  transform-origin: 50% 0;
  transition: opacity var(--openbot-duration-slow) ease-out, transform var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1);
  will-change: top, left, transform;
}
.selection-actions-layer[data-placement="top"] {
  transform-origin: 50% 100%;
}
.selection-actions-layer[data-ready="true"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.selection-actions-bar {
  display: flex;
  max-width: calc(100vw - 24px);
  height: 36px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface-raised);
  padding: 4px;
  box-shadow: 0 14px 34px var(--openbot-shadow-popover-ambient), 0 3px 10px var(--openbot-shadow-popover-ambient), inset 0 0 0 1px var(--openbot-shadow-ring);
  color: var(--openbot-text-primary);
  transition: width var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1);
}
.selection-actions-content, .selection-actions-presets, .selection-actions-more-presets {
  display: flex;
  width: max-content;
  min-width: 0;
  align-items: center;
}
.selection-actions-content {
  height: 28px;
  flex: 0 0 auto;
  gap: 2px;
}
.selection-actions-form-shell {
  display: flex;
  min-width: 0;
  align-items: center;
  overflow: hidden;
  opacity: 1;
  transform: translateX(0);
  transition: max-width var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1), opacity var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1), transform var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1);
}
.selection-actions-form-shell-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-8px);
}
.selection-actions-form {
  display: flex;
  height: 28px;
  flex: 0 0 auto;
  align-items: center;
  overflow: hidden;
  transition: width var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1);
}
.selection-actions-form input {
  width: 100%;
  height: 28px;
  border: 0;
  background: transparent;
  padding: 0 10px 0 11px;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: 400;
  line-height: 28px;
  outline: 0;
}
.selection-actions-form input::placeholder {
  color: var(--openbot-text-muted);
}
.selection-actions-form input:focus-visible {
  outline: 0;
}
.selection-actions-presets {
  max-width: 224px;
  gap: 2px;
  overflow: hidden;
  opacity: 1;
  transform: translateX(0);
  transition: max-width var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1), opacity var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1), transform var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1);
}
.selection-actions-presets-hidden {
  max-width: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-8px);
}
.selection-actions-more-presets {
  max-width: 0;
  gap: 2px;
  margin-left: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1), opacity var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1), margin-left var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1);
}
.selection-actions-presets-expanded .selection-actions-more-presets {
  max-width: 262px;
  margin-left: 2px;
  opacity: 1;
}
.selection-actions-send-shell {
  display: flex;
  min-width: 0;
  max-width: 0;
  align-items: center;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.88);
  transition: max-width var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1), opacity var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1), transform var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1);
}
.selection-actions-send-shell-visible {
  max-width: 30px;
  opacity: 1;
  transform: scale(1);
}
.selection-actions-control, .selection-actions-icon-button, .selection-actions-send {
  display: inline-flex;
  height: 28px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  padding: 0;
  transition: background-color var(--openbot-duration-hover) ease, border-color var(--openbot-duration-hover) ease, box-shadow var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease, opacity var(--openbot-duration-hover) ease, transform var(--openbot-duration-normal) ease;
}
.selection-actions-control {
  gap: 4px;
  border: 1px solid transparent;
  background: transparent;
  padding: 0 9px;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: 430;
  white-space: nowrap;
}
.selection-actions-icon-button, .selection-actions-send {
  width: 28px;
}
.selection-actions-kbd {
  height: 18px;
  margin-left: 2px;
  font-size: var(--openbot-text-xs);
}
.selection-actions-icon-button {
  background: transparent;
  color: var(--openbot-text-secondary);
}
.selection-actions-send {
  background: var(--openbot-text-primary);
  color: var(--openbot-bg-canvas);
}
.selection-actions-control:active, .selection-actions-icon-button:active, .selection-actions-send:active {
  transform: scale(0.94);
}
.selection-actions-divider {
  width: 1px;
  height: 16px;
  flex: 0 0 auto;
  margin: 0 3px;
  background: var(--openbot-border-strong);
}
.selection-actions-more-divider {
  margin-left: 1px;
}
.selection-actions-expand svg {
  transition: transform var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1);
}
.selection-actions-expand[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.selection-actions-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.selection-actions-status, .selection-actions-error {
  display: inline-flex;
  height: 28px;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  font-size: var(--openbot-text-sm);
  white-space: nowrap;
}
.selection-actions-status {
  color: var(--openbot-text-secondary);
}
.selection-actions-error {
  color: var(--openbot-danger);
}
.selection-actions-spinner {
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--openbot-border-strong);
  border-top-color: var(--openbot-text-secondary);
  border-radius: var(--openbot-radius-pill);
  animation: selection-actions-spin 700ms linear infinite;
}
.message-selection-quote {
  max-width: 100%;
  max-height: 124px;
  overflow: auto;
  margin: 0;
  border-left: 2px solid var(--openbot-accent);
  border-radius: 0 var(--openbot-radius-sm) var(--openbot-radius-sm) 0;
  background: var(--openbot-bg-control);
  padding: 6px 8px;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: 17px;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
@media (hover: hover) and (pointer: fine) {
  .selection-actions-control:hover {
    border-color: var(--openbot-border-focus);
    background: var(--openbot-accent-strong);
    box-shadow: 0 0 0 1px var(--openbot-accent-soft);
    color: var(--openbot-text-primary);
  }
  .selection-actions-icon-button:hover {
    background: var(--openbot-bg-control-hover);
    color: var(--openbot-text-primary);
  }
  .selection-actions-send:hover {
    opacity: 0.9;
  }
}
@media (max-width: 480px) {
  .selection-actions-control {
    width: 28px;
    padding: 0;
  }
  .selection-actions-kbd {
    display: none;
  }
  .selection-actions-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .selection-actions-presets-expanded .selection-actions-more-presets {
    max-width: 88px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .selection-actions-layer, .selection-actions-bar, .selection-actions-form, .selection-actions-form-shell, .selection-actions-presets, .selection-actions-more-presets, .selection-actions-send-shell, .selection-actions-expand svg {
    transition: none;
  }
  .selection-actions-spinner {
    animation-duration: 1.4s;
  }
}
@keyframes selection-actions-spin {
  to {
    transform: rotate(360deg);
  }
}
.message-content-blocks {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: 10px;
}
.message-content-resize {
  min-width: 0;
}
.message-content-resize[data-resizing="true"], .agent-queue-panel-resize[data-resizing="true"] {
  overflow: hidden;
  will-change: height;
}
.t-stream-w {
  animation: t-stream-in var(--stream-fade) var(--stream-ease) both;
}
@keyframes t-stream-in {
  from {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .t-stream-w {
    animation: none;
  }
}
.message-entry-agent .ui-bubble:has(:is(.message-data-table-scroll, .message-code-block)) {
  width: min(720px, 100%);
  max-width: min(720px, 100%);
}
.message-entry-agent .ui-bubble:has(.message-data-table-scroll) > .ui-bubble-content {
  width: 100%;
}
.message-entry-agent .message-shell:has(.message-data-table-scroll) {
  align-items: flex-end;
}
.message-code-block {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
}
.message-code-header {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  border-bottom: 1px solid var(--openbot-border);
  background: var(--openbot-bg-control);
  padding: 4px 6px 4px 10px;
}
.message-code-heading {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.message-code-filename {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.message-code-language {
  flex: none;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-border);
  padding: 1px 6px;
  color: var(--openbot-text-readable);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: 16px;
}
.message-code-language:only-child {
  font-family: var(--openbot-font-mono);
}
:where(.ui-button).message-code-copy {
  position: relative;
  height: 26px;
  flex: none;
  gap: var(--openbot-space-1);
  border-radius: var(--openbot-radius-sm);
  padding-inline: 7px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
}
@media (hover: hover) and (pointer: fine) {
  :where(.ui-button).message-code-copy:hover:not(:disabled) {
    background: var(--openbot-bg-control-active);
    box-shadow: 0 0 0 1px var(--openbot-border-strong);
    color: var(--openbot-text-primary);
  }
}
:where(.ui-button).message-code-copy:active:not(:disabled) {
  transform: scale(0.96);
}
:where(.ui-button).message-code-copy::after {
  position: absolute;
  width: 40px;
  height: 40px;
  content: "";
}
.message-code-copy-icons {
  position: relative;
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  display: grid;
  place-items: center;
}
.message-code-copy-icons > span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  filter: blur(4px);
  scale: 0.25;
  transition: opacity var(--openbot-duration-slow) var(--openbot-ease-out), filter var(--openbot-duration-slow) var(--openbot-ease-out), scale var(--openbot-duration-slow) var(--openbot-ease-out);
}
.message-code-copy-icons > span[data-visible="true"] {
  opacity: 1;
  filter: blur(0);
  scale: 1;
}
.message-code-copy-icons svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}
.message-code-scroll {
  width: 100%;
  max-height: 420px;
  overflow: auto;
  margin: 0;
  background: var(--openbot-bg-sidebar);
  padding-block: 8px 10px;
  color: var(--openbot-text-secondary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  line-height: 19px;
  overscroll-behavior-x: contain;
  tab-size: 2;
}
.message-code-scroll:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: -2px;
}
.message-code-scroll > code {
  min-width: 100%;
  width: max-content;
  display: block;
  font: inherit;
}
.message-code-line {
  min-height: 19px;
  display: flex;
}
.message-code-line-number {
  width: 40px;
  flex: none;
  padding-right: 8px;
  color: var(--openbot-text-dim);
  font-size: var(--openbot-text-sm);
  text-align: right;
  user-select: none;
}
.message-code-line-source {
  min-width: 0;
  padding-right: 12px;
  white-space: pre;
}
.message-code-caret {
  width: 2px;
  height: 13px;
  display: inline-block;
  margin-left: 2px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
  transform: translateY(2px);
}
[data-code-token="cmnt"] {
  color: var(--openbot-text-dim);
  font-style: italic;
}
[data-code-token="kwd"], [data-code-token="section"] {
  color: var(--openbot-accent-text);
}
[data-code-token="str"], [data-code-token="insert"] {
  color: var(--openbot-success);
}
[data-code-token="num"], [data-code-token="bool"], [data-code-token="class"] {
  color: var(--openbot-warning);
}
[data-code-token="func"], [data-code-token="type"] {
  color: var(--openbot-text-primary);
}
[data-code-token="oper"], [data-code-token="esc"] {
  color: var(--openbot-text-muted);
}
[data-code-token="err"], [data-code-token="deleted"] {
  color: var(--openbot-danger);
}
@media (prefers-reduced-motion: reduce) {
  .message-code-copy-icons > span {
    transition: none;
  }
}
.message-data-table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-radius: var(--openbot-radius-lg);
  overscroll-behavior-inline: contain;
}
.message-data-table-frame {
  width: 100%;
  min-width: 0;
}
.message-data-table-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-1);
  margin-top: var(--openbot-space-1);
}
.message-data-table-scroll:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}
.message-data-table {
  width: 100%;
  min-width: calc(var(--message-data-table-columns) * 112px);
  overflow: hidden;
  border: 1px solid var(--openbot-data-table-outer-border);
  border-radius: var(--openbot-radius-lg);
  border-spacing: 0;
  background: var(--openbot-bg-surface-raised);
  box-shadow: 0 0 0 0.5px var(--openbot-data-table-ring);
  font-size: var(--openbot-text-md);
}
.message-data-table thead {
  color: var(--openbot-data-table-header-text);
  font-weight: 500;
}
.message-data-table tbody {
  background: var(--openbot-bg-canvas);
}
.message-data-table tbody tr:not(:last-child) td {
  border-bottom: 1px solid var(--openbot-data-table-border);
}
.message-data-table th, .message-data-table td {
  padding: 9px 12px;
  color: var(--openbot-data-table-text);
  font-weight: inherit;
  overflow-wrap: break-word;
  text-align: left;
  vertical-align: top;
}
.message-data-table thead th {
  border-bottom: 1px solid var(--openbot-data-table-border);
  padding-top: 7px;
  padding-bottom: 7px;
  color: var(--openbot-data-table-header-text);
}
.message-data-table th:not(:last-child), .message-data-table td:not(:last-child) {
  border-right: 1px solid var(--openbot-data-table-border);
}
:is(.message-data-table, .message-markdown-table) :is(th, td) :is(a, code) {
  overflow-wrap: anywhere;
}
.message-data-table [data-align="center"] {
  text-align: center;
}
.message-data-table [data-align="right"] {
  text-align: right;
}
.message-comparison-table-yes {
  color: var(--openbot-success);
}
.message-comparison-table-no {
  color: var(--openbot-data-table-header-text);
}
.message-link {
  border-radius: var(--openbot-radius-xs);
  color: inherit;
  font-weight: 560;
  text-decoration-color: var(--openbot-text-muted);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--openbot-duration-hover) ease, text-decoration-color var(--openbot-duration-hover) ease;
}
.message-link-icon {
  position: relative;
  display: inline-flex;
  width: 14px;
  height: 14px;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
  color: currentColor;
  vertical-align: -2px;
}
.message-link-icon img, .message-link-fallback {
  width: 14px;
  height: 14px;
}
.message-link-icon img {
  position: absolute;
  inset: 0;
  border-radius: var(--openbot-radius-xs);
  object-fit: contain;
}
.message-link-fallback {
  opacity: 0.72;
}
.message-link:hover {
  color: var(--openbot-text-primary);
  text-decoration-color: currentColor;
}
.message-link:focus-visible {
  outline: 2px solid var(--openbot-text-secondary);
  outline-offset: 2px;
}
.message-citation {
  position: relative;
  display: inline;
}
.message-citation-mark {
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  margin: 0 2px;
  border: 0;
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-bg-control-hover);
  padding: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  vertical-align: 4px;
  transition: background var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease;
}
.message-citation-mark:hover, .message-citation-mark:focus-visible {
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
}
.message-citation-mark:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}
.anchored-tooltip {
  position: fixed;
  z-index: var(--openbot-layer-tooltip);
  box-sizing: border-box;
  width: max-content;
  max-width: min(280px, calc(100vw - 16px));
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface-raised);
  padding: 6px 8px;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: 500;
  line-height: 15px;
  overflow-wrap: anywhere;
  pointer-events: none;
  text-align: left;
  white-space: normal;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--openbot-duration-fast) ease, transform var(--openbot-duration-fast) ease;
}
.anchored-tooltip[data-placement="bottom"] {
  transform: translateY(-4px);
}
.anchored-tooltip[data-ready="true"] {
  opacity: 1;
  transform: translateY(0);
}
.anchored-tooltip-light {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-surface-light);
  color: var(--openbot-text-on-light);
}
@media (prefers-reduced-motion: reduce) {
  .anchored-tooltip, .anchored-tooltip[data-placement="bottom"], .anchored-tooltip[data-ready="true"] {
    transform: none;
  }
}
.message-citation-footer {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  border-top: 1px solid var(--openbot-border);
  padding-top: 10px;
}
.message-citation-ref {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: 425;
  line-height: 18px;
  text-decoration: none;
}
.message-citation-ref .message-citation-mark {
  flex: 0 0 18px;
  margin: 0;
}
.message-citation-ref-label {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-weight: 550;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.message-citation-separator {
  color: var(--openbot-text-dim);
}
.message-citation-ref-host {
  color: var(--openbot-text-muted);
  white-space: nowrap;
}
.message-citation-arrow {
  display: flex;
  width: 14px;
  height: 14px;
  margin-left: -2px;
  color: var(--openbot-text-dim);
  opacity: 0;
  transform: rotate(45deg) translate(-1px, 1px);
  transition: color var(--openbot-duration-hover) ease, opacity var(--openbot-duration-hover) ease, transform var(--openbot-duration-hover) ease;
}
.message-citation-arrow svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}
.message-citation-ref:hover, .message-citation-ref:focus-visible {
  color: var(--openbot-text-secondary);
}
.message-citation-ref:hover .message-citation-arrow, .message-citation-ref:focus-visible .message-citation-arrow {
  color: var(--openbot-text-secondary);
  opacity: 1;
  transform: rotate(45deg) translate(0, 0);
}
.message-citation-ref:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 3px;
}
[data-slot="bubble"][data-author="user"] .message-citation-mark {
  background: var(--openbot-surface-light);
  color: var(--openbot-text-muted-on-light);
}
[data-slot="bubble"][data-author="user"] .message-citation-mark:hover, [data-slot="bubble"][data-author="user"] .message-citation-mark:focus-visible {
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent);
}
[data-slot="bubble"][data-author="user"] .message-citation-footer {
  border-top-color: var(--openbot-border-on-light);
}
[data-slot="bubble"][data-author="user"] .message-citation-ref-label {
  color: var(--openbot-text-on-light);
}
[data-slot="bubble"][data-author="user"] .message-citation-ref-host {
  color: var(--openbot-text-muted-on-light);
}
[data-slot="bubble"][data-author="user"] .message-citation-separator {
  color: var(--openbot-text-dim-on-light);
}
.message-reply-context {
  max-width: 360px;
  margin: -1px 0 7px;
  border-left: 2px solid var(--openbot-text-dim);
  padding-left: 8px;
  color: var(--openbot-text-secondary);
}
.message-reply-context span {
  display: block;
  margin-bottom: 1px;
  font-size: var(--openbot-text-sm);
  font-weight: 550;
  line-height: 14px;
}
.message-reply-context p {
  overflow: hidden;
  margin: 0;
  font-size: var(--openbot-text-sm);
  line-height: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-slot="bubble"][data-author="user"] .message-reply-context {
  border-left-color: var(--openbot-border-strong);
  color: var(--openbot-text-readable);
}
.message-reply-context[data-opens] {
  position: relative;
  transition: border-left-color var(--openbot-duration-hover) var(--openbot-ease-out);
}
.message-reply-context[data-loading] {
  display: grid;
  align-items: center;
  column-gap: var(--openbot-space-2);
  grid-template-columns: minmax(0, 1fr) auto;
}
.message-reply-context[data-opens]:hover {
  border-left-color: var(--openbot-accent);
}
.message-reply-context .message-reply-open, .message-reply-context .message-reply-open:hover:not(:disabled):not([data-disabled]) {
  position: absolute;
  z-index: 1;
  inset: 0 0 0 -2px;
  width: auto;
  height: auto;
  min-height: 0;
  border-radius: var(--openbot-radius-xs);
  background: none;
  padding: 0;
  cursor: pointer;
}
.message-reply-context .message-reply-open:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}
.message-reply-loading {
  width: 14px;
  height: 14px;
  grid-column: 2;
  grid-row: 1 / span 2;
  animation: message-reply-spin 0.8s linear infinite;
}
.message-reply-context[data-unavailable] {
  border-left-style: dashed;
}
.message-reply-unavailable {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
  margin: -1px 0 7px;
  font-size: var(--openbot-text-sm);
  line-height: 15px;
}
.message-reply-unavailable-icon {
  width: 13px;
  height: 13px;
  flex: none;
}
@keyframes message-reply-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .message-reply-loading {
    animation: none;
  }
}
[data-slot="bubble"][data-author="user"] .message-copy {
  font-size: var(--openbot-text-lg);
}
.message-tag-unavailable {
  display: inline-flex;
  height: 22px;
  align-items: center;
  gap: 4px;
  margin: 0 1px;
  border: 1px dashed var(--openbot-border-strong);
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  padding: 0 6px;
  color: var(--openbot-text-muted);
  font: inherit;
  line-height: 20px;
  vertical-align: middle;
  white-space: nowrap;
}
.message-agent-tag .agent-avatar {
  --agent-avatar-optical-offset: -2px;
  width: 16px;
  height: 16px;
}
.message-file-reference, .composer-file-reference {
  --file-reference-color: var(--openbot-file-default);
  --file-reference-soft: var(--openbot-file-default-soft);
  display: inline-flex;
  min-width: 0;
  max-width: min(240px, calc(100% - 8px));
  align-items: center;
  gap: 4px;
  margin: 0 1px;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  padding: 1px 6px 1px 3px;
  color: var(--file-reference-color);
  font: inherit;
  font-weight: 550;
  line-height: 20px;
  vertical-align: middle;
  white-space: nowrap;
  transition: background-color var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease;
}
.reference-chip.message-reference-chip, .message-file-reference {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: text;
}
:is(.message-data-table, .message-markdown-table) .message-file-reference {
  max-width: 240px;
}
:is( .message-file-reference, .composer-file-reference, .attachment-file-visual, .files-file-visual, .composer-attachment-preview )[data-file-tone="source"] {
  --file-reference-color: var(--openbot-file-blue);
  --file-reference-soft: var(--openbot-file-blue-soft);
}
:is( .message-file-reference, .composer-file-reference, .attachment-file-visual, .files-file-visual, .composer-attachment-preview )[data-file-tone="script"] {
  --file-reference-color: var(--openbot-file-yellow);
  --file-reference-soft: var(--openbot-file-yellow-soft);
}
:is( .message-file-reference, .composer-file-reference, .attachment-file-visual, .files-file-visual, .composer-attachment-preview )[data-file-tone="markup"] {
  --file-reference-color: var(--openbot-file-orange);
  --file-reference-soft: var(--openbot-file-orange-soft);
}
:is( .message-file-reference, .composer-file-reference, .attachment-file-visual, .files-file-visual, .composer-attachment-preview )[data-file-tone="style"] {
  --file-reference-color: var(--openbot-file-teal);
  --file-reference-soft: var(--openbot-file-teal-soft);
}
:is( .message-file-reference, .composer-file-reference, .attachment-file-visual, .files-file-visual, .composer-attachment-preview )[data-file-tone="data"] {
  --file-reference-color: var(--openbot-file-green);
  --file-reference-soft: var(--openbot-file-green-soft);
}
:is( .message-file-reference, .composer-file-reference, .attachment-file-visual, .files-file-visual, .composer-attachment-preview )[data-file-tone="document"] {
  --file-reference-color: var(--openbot-file-red);
  --file-reference-soft: var(--openbot-file-red-soft);
}
:is( .message-file-reference, .composer-file-reference, .attachment-file-visual, .files-file-visual, .composer-attachment-preview )[data-file-tone="media"] {
  --file-reference-color: var(--openbot-file-pink);
  --file-reference-soft: var(--openbot-file-pink-soft);
}
.inline-file-reference-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-button.message-file-reference {
  height: 22px;
  cursor: pointer;
}
.ui-button.message-file-reference:focus-visible, .composer-file-reference:focus-visible {
  outline: 2px solid var(--file-reference-color);
  outline-offset: 2px;
  box-shadow: none;
}
.attachment-reference-visual {
  display: inline-grid;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--openbot-radius-xs);
  background: var(--file-reference-soft);
  color: var(--file-reference-color);
}
.attachment-reference-visual[data-badge-length="3"] {
  width: 20px;
}
.attachment-reference-visual[data-badge-length="4"] {
  width: 24px;
}
.attachment-reference-visual > span {
  font-size: var(--openbot-glyph-sm);
  font-weight: 750;
  letter-spacing: -0.2px;
  line-height: 1;
}
.attachment-reference-visual[data-badge-length="4"] > span {
  font-size: var(--openbot-glyph-xs);
  letter-spacing: -0.4px;
}
.attachment-reference-visual > svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: calc(var(--openbot-icon-stroke) * 20 / 24);
}
[data-slot="bubble"][data-author="user"] .message-file-reference {
  color: var(--file-reference-color);
}
@media (hover: hover) and (pointer: fine) {
  .ui-button.message-file-reference:hover:not(:disabled), .composer-file-reference:hover {
    background-color: var(--file-reference-soft);
    color: var(--file-reference-color);
  }
}
@media (hover: none), (pointer: coarse) {
  .message-file-reference, .composer-file-reference {
    max-width: calc(100% - 8px);
  }
}
.message-error-label {
  margin: 0 0 var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.attachment-file-visual {
  --file-reference-color: var(--openbot-file-default);
  --file-reference-soft: var(--openbot-file-default-soft);
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border-radius: var(--openbot-radius-md);
  background: var(--file-reference-soft);
  color: var(--file-reference-color);
}
.attachment-file-visual svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}
.choice-card {
  display: grid;
  width: min(540px, 100%);
  gap: var(--openbot-space-4);
}
.choice-card-hint {
  margin: calc(-1 * var(--openbot-space-2)) 0 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
  overflow-wrap: anywhere;
}
.choice-options {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface);
}
.choice-option {
  display: flex;
  width: 100%;
  min-height: var(--openbot-control-xl);
  align-items: center;
  gap: var(--openbot-space-2);
  border: 0;
  border-bottom: 1px solid var(--openbot-border);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-lg);
  text-align: left;
  overflow-wrap: anywhere;
}
.choice-option-item:last-child .choice-option {
  border-bottom: 0;
}
.choice-option-item:not([data-disabled]) .choice-option:hover, .choice-option-selected {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}
.choice-option-item:focus-within .choice-option {
  outline: 1px solid var(--openbot-border-focus);
  outline-offset: -1px;
}
.choice-option-item[data-disabled] {
  opacity: 0.5;
}
.choice-key {
  display: grid;
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-muted);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
}
.choice-input {
  width: 100%;
  min-width: 0;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface);
  font-size: var(--openbot-text-lg);
}
.choice-input::placeholder {
  color: var(--openbot-text-muted);
}
.reference-chip.message-reference-chip .reference-chip-icon, .message-file-reference .attachment-reference-visual {
  display: inline-block;
  margin-right: var(--openbot-space-1);
  text-align: center;
  vertical-align: top;
  user-select: none;
}
.message-file-reference .attachment-reference-visual {
  margin-top: var(--openbot-space-0-5);
  font-size: var(--openbot-glyph-sm);
  line-height: var(--openbot-space-4);
}
.message-file-reference .attachment-reference-visual[data-badge-length="4"] {
  font-size: var(--openbot-glyph-xs);
}
.reference-chip.message-reference-chip .agent-avatar {
  display: inline-block;
  height: var(--openbot-space-4);
  vertical-align: top;
}
.message-file-reference .attachment-reference-visual > svg {
  display: inline;
  margin-top: var(--openbot-space-0-5);
  vertical-align: top;
}
.reference-chip.message-reference-chip .reference-chip-icon > svg, .reference-chip.message-reference-chip .agent-avatar > svg {
  display: inline;
  vertical-align: top;
}
.reference-chip.message-reference-chip .reference-chip-icon > svg.lucide {
  margin-top: var(--openbot-space-0-5);
}
.reference-chip.message-reference-chip .agent-avatar > svg {
  margin: -14% 0 0 -14%;
}
.reference-chip.message-reference-chip .reference-chip-name, .message-file-reference .inline-file-reference-name {
  display: inline;
}
.reference-chip.message-reference-chip > .sr-only {
  user-select: none;
}
.message-math-display {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}
.message-math-display > * {
  margin: 0;
  padding: var(--openbot-space-1) 0;
}
.message-code-actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--openbot-space-0-5);
}
.message-preview-expand svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.ui-sliding-tabs.message-preview-switch {
  gap: var(--openbot-space-0-5);
  padding: var(--openbot-space-0-5);
}
.message-preview-switch .ui-sliding-tabs-trigger {
  height: 22px;
  padding: 0 var(--openbot-space-2);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
}
.message-preview-switch .ui-sliding-tabs-pill {
  top: var(--openbot-space-0-5);
  height: 22px;
}
.message-preview-resize {
  overflow: hidden;
}
.message-preview-views {
  position: relative;
}
.message-preview-view:not([data-selected]) {
  position: absolute;
  inset: 0 0 auto;
}
.message-preview-body {
  width: 100%;
  display: grid;
  place-items: center;
  background: var(--openbot-bg-sidebar);
}
.message-preview-body[data-preview-kind="mermaid"] {
  max-height: 420px;
  overflow: auto;
  padding: var(--openbot-space-3);
  overscroll-behavior-x: contain;
}
.message-preview-frame {
  width: 100%;
  height: min(var(--message-preview-height, 160px), 420px);
  display: block;
  border: 0;
  background: var(--openbot-bg-sidebar);
}
.message-preview-diagram {
  max-width: 100%;
  height: auto;
  display: block;
}
.message-preview-status {
  margin: 0;
  padding: var(--openbot-space-6) var(--openbot-space-3);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.message-preview-failure {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  border-bottom: 1px solid var(--openbot-border);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-xs);
}
.message-preview-failure-detail {
  flex-basis: 100%;
  margin: 0;
  overflow-x: auto;
  font-family: var(--openbot-font-mono);
  white-space: pre;
}
.message-preview-backdrop {
  animation: none;
}
.message-preview-dialog {
  width: min(1100px, 100%);
  height: calc(100dvh - var(--openbot-space-6) * 2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  outline: 0;
  border-radius: var(--openbot-radius-xl);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-primary);
  transform-origin: 0 0;
}
.message-preview-dialog:not([data-shown]) {
  opacity: 0;
}
.message-preview-dialog-header {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-4);
  border-bottom: 1px solid var(--openbot-border);
}
.message-preview-dialog-title {
  margin: 0;
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
}
.message-preview-dialog-body {
  min-height: 0;
  flex: 1;
  display: grid;
  overflow: auto;
  background: var(--openbot-bg-sidebar);
}
.message-preview-dialog-body[data-preview-kind="mermaid"] {
  overflow: hidden;
}
.message-preview-canvas {
  position: relative;
  min-height: 0;
  overflow: hidden;
}
.message-preview-canvas-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  outline: 0;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.message-preview-canvas-viewport[data-dragging] {
  cursor: grabbing;
}
.message-preview-canvas-viewport:focus-visible {
  box-shadow: inset 0 0 0 2px var(--openbot-border-focus);
}
.message-preview-canvas-image {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  height: auto;
  opacity: 0;
  transform-origin: 0 0;
  -webkit-user-drag: none;
}
.message-preview-canvas-image[data-ready] {
  opacity: 1;
}
.message-preview-canvas-image[data-settling] {
  transition: transform var(--openbot-duration-slow) var(--openbot-ease-out), width var(--openbot-duration-slow) var(--openbot-ease-out);
}
.message-preview-zoom {
  position: absolute;
  bottom: var(--openbot-space-4);
  left: 50%;
  display: flex;
  align-items: center;
  gap: var(--openbot-space-0-5);
  translate: -50% 0;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-overlay);
  box-shadow: 0 0 0 1px var(--openbot-border);
  padding: var(--openbot-space-1);
}
.message-preview-zoom .ui-button {
  border-radius: var(--openbot-radius-pill);
}
:where(.ui-button).message-preview-zoom-level {
  min-width: 56px;
  font-variant-numeric: tabular-nums;
}
.message-preview-dialog-body .message-preview-frame {
  height: 100%;
}
.chat-visual-frame {
  width: 100%;
  min-width: 0;
  display: block;
  border: 0;
  background: transparent;
  color-scheme: dark;
}
.chat-visual-reply {
  max-width: 720px;
}
.chat-visual-frame-fill {
  box-sizing: border-box;
  height: 100%;
  padding: 12px 16px;
}
.chat-visual-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-xs);
}
.composer-wrap {
  position: relative;
  flex: 0 0 auto;
  padding: 0 var(--openbot-space-1-5) var(--openbot-space-1-5);
}
.team-typing-dots {
  display: flex;
  align-items: center;
  gap: 2px;
}
.team-typing-dots i {
  width: 3px;
  height: 3px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success);
  animation: typing-dot-pulse 900ms ease-in-out infinite;
}
.team-typing-dots i:nth-child(2) {
  animation-delay: var(--openbot-duration-fast);
}
.team-typing-dots i:nth-child(3) {
  animation-delay: var(--openbot-duration-overlay);
}
@media (prefers-reduced-motion: reduce) {
  .agent-row-thinking-dots i, .team-typing-dots i, .image-generation-dots, .image-generation-glow, .image-generation-canvas, .image-generation-preview, .image-generation-label,  .image-generation:not(.image-generation-ready, .image-generation-failed) .image-generation-label, .agent-activity-label {
    animation: none;
    transition: none;
  }
  .image-generation-hover-download {
    transition: none;
  }
}
@media (hover: none), (pointer: coarse) {
  .image-generation-hover-download {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
}
@media (max-width: 620px) {
  .message-entry-agent .ui-bubble:has(.image-generation) {
    width: 100%;
    max-width: 100%;
  }
  .image-generation-stage, .image-generation-meta {
    width: 100%;
  }
}
.composer-reply-preview {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 10px;
  margin: 0 10px 6px;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  padding: 6px 8px 6px 12px;
  box-shadow: 0 7px 22px var(--openbot-shadow-popover-ambient);
}
.composer-reply-preview > div {
  min-width: 0;
  flex: 1;
}
.composer-reply-preview span {
  display: block;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: 550;
  line-height: 14px;
}
.composer-reply-preview p {
  overflow: hidden;
  margin: 1px 0 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.composer-reply-preview > button {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  background: transparent;
  color: var(--openbot-text-muted);
}
.composer-reply-preview > button:hover {
  background: var(--openbot-border);
  color: var(--openbot-text-secondary);
}
.composer {
  position: relative;
  z-index: 11;
  display: grid;
  max-width: none;
  min-height: 96px;
  gap: 4px;
  margin: 0 auto;
  border: 0.5px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  padding: 10px;
  box-shadow: none;
  transition: border-color var(--openbot-duration-hover) var(--openbot-ease-out), box-shadow var(--openbot-duration-hover) var(--openbot-ease-out);
}
.composer[data-compact] {
  grid-template-columns: 28px minmax(0, 1fr) auto;
  min-height: 48px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
}
.composer:focus-within {
  border-color: var(--openbot-text-dim);
  box-shadow: 0 0 0 3px var(--openbot-hover);
}
.composer:has(.composer-editor-surface[aria-disabled="true"]) {
  border-color: var(--openbot-border);
}
.composer button:disabled, .composer-editor-surface[aria-disabled="true"] {
  cursor: default;
}
.composer-button, .dictation-button, .voice-button {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  padding: 0;
  background: var(--openbot-hover);
  color: var(--openbot-text-secondary);
  transition: background-color var(--openbot-duration-hover) var(--openbot-ease-out), color var(--openbot-duration-hover) var(--openbot-ease-out), transform var(--openbot-duration-fast) var(--openbot-ease-out);
}
.composer-button:hover {
  background: var(--openbot-border);
  color: var(--openbot-text-primary);
}
.composer-primary-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.voice-model-progress {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  white-space: nowrap;
}
.voice-morph {
  --voice-morph-duration: 600ms;
  --voice-morph-exit-duration: 360ms;
  --voice-morph-ease: linear(
    0,
    0.057 3.3%,
    0.199 6.7%,
    0.386 10%,
    0.587 13.3%,
    0.773 16.7%,
    0.93 20%,
    1.049 23.3%,
    1.128 26.7%,
    1.171 30%,
    1.183 33.3%,
    1.172 36.7%,
    1.146 40%,
    1.111 43.3%,
    1.075 46.7%,
    1.041 50%,
    1.012 53.3%,
    0.991 56.7%,
    0.976 60%,
    0.967 66.7%,
    0.974 73.3%,
    0.987 80%,
    0.998 86.7%,
    1.004 93.3%,
    1
  );
  --voice-bar-width: 152px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}
.voice-morph-filter {
  position: absolute;
  width: 0;
  height: 0;
}
.voice-morph-goo {
  position: absolute;
  inset: -12px;
  pointer-events: none;
}
.voice-morph-goo-bar {
  opacity: 0.06;
}
.voice-morph-bar, .voice-morph-send-blob, .voice-morph-finish-blob {
  position: absolute;
  top: 12px;
  height: 28px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-primary);
}
.voice-morph-bar {
  right: 46px;
  width: 28px;
  transition: width var(--voice-morph-exit-duration) var(--openbot-ease-out);
}
.voice-morph-send-blob, .voice-morph-finish-blob {
  right: 12px;
  width: 28px;
  opacity: 0;
  transition: opacity 0s linear var(--voice-morph-exit-duration);
}
.voice-morph-finish-blob {
  transform: scale(0.5);
  transition: transform var(--voice-morph-exit-duration) var(--openbot-ease-out), opacity 0s linear var(--voice-morph-exit-duration);
}
.voice-morph[data-recording] .voice-morph-bar {
  width: var(--voice-bar-width);
  transition: width var(--voice-morph-duration) var(--voice-morph-ease);
}
.voice-morph[data-recording] .voice-morph-send-blob {
  opacity: 1;
  transition: none;
}
.voice-morph[data-recording] .voice-morph-finish-blob {
  opacity: 1;
  transform: translateX(-34px) scale(0.8);
  transition: transform var(--voice-morph-duration) var(--voice-morph-ease);
}
.voice-morph-send {
  position: relative;
  display: flex;
}
.voice-morph-slot {
  position: relative;
  display: flex;
  width: 28px;
  height: 28px;
  justify-content: flex-end;
  transition: width var(--voice-morph-exit-duration) var(--openbot-ease-out);
}
.voice-morph[data-recording] .voice-morph-slot {
  width: var(--voice-bar-width);
  transition: width var(--voice-morph-duration) var(--voice-morph-ease);
}
.voice-morph .dictation-button {
  background: transparent;
}
.voice-recording-status {
  display: flex;
  width: 100%;
  min-width: 0;
  height: 28px;
  align-items: center;
  gap: 4px;
  margin: 0;
  border: 0;
  overflow: hidden;
  padding: 0 3px 0 12px;
  color: var(--openbot-text-secondary);
  animation: voice-morph-content-in var(--openbot-duration-slow) var(--openbot-ease-out) var(--openbot-duration-fast) both;
}
.voice-waveform {
  display: flex;
  min-width: 0;
  height: 20px;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, currentColor 24px);
}
.voice-waveform-track {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 3px;
}
.voice-waveform-dot {
  width: 3px;
  height: calc(3px + var(--voice-level, 0) * 15px);
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-pill);
  background: currentColor;
}
.voice-recording-cancel, .voice-recording-finish {
  display: grid;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  padding: 0;
  background: transparent;
  transition: background-color var(--openbot-duration-hover) var(--openbot-ease-out), color var(--openbot-duration-hover) var(--openbot-ease-out), transform var(--openbot-duration-fast) var(--openbot-ease-out);
}
.voice-recording-cancel {
  color: var(--openbot-text-secondary);
}
.voice-recording-finish {
  color: var(--openbot-bg-sidebar);
  animation: voice-morph-content-in var(--openbot-duration-slow) var(--openbot-ease-out) var(--openbot-duration-overlay) both;
}
.voice-morph .voice-recording-cancel:hover:not(:disabled) {
  background: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-primary) 10%, transparent);
  }
  color: var(--openbot-text-primary);
}
.voice-recording-cancel:active, .voice-recording-finish:active {
  transform: scale(0.94);
}
.voice-recording-cancel svg, .voice-recording-finish svg {
  width: 14px;
  height: 14px;
}
.voice-recording-finish svg {
  stroke-width: 3;
}
@keyframes voice-morph-content-in {
  from {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .voice-morph *, .voice-recording-status, .voice-recording-finish {
    transition: none;
    animation: none;
  }
}
.dictation-button:hover:not(:disabled) {
  background: var(--openbot-border);
  color: var(--openbot-text-primary);
}
.composer-button svg, .dictation-button svg, .voice-button svg {
  width: 16px;
  height: 16px;
}
.composer-spinner {
  animation: ui-spin 720ms linear infinite;
}
.voice-button {
  background: var(--openbot-text-primary);
  color: var(--openbot-bg-sidebar);
}
.voice-button-active {
  background: var(--openbot-text-primary);
  color: var(--openbot-bg-sidebar);
}
.voice-button:hover:not(:disabled), .voice-button.ui-button:hover:not(:disabled), .voice-morph .voice-recording-finish:hover:not(:disabled) {
  background: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-primary) 84%, var(--openbot-bg-sidebar));
  }
  color: var(--openbot-bg-sidebar);
}
.composer-input-label, .composer-editor-root {
  --composer-editor-max-height: max(48px, 33dvh);
}
.composer-input-label {
  display: flex;
  min-width: 0;
  min-height: 48px;
  max-height: var(--composer-editor-max-height);
  align-items: flex-end;
  cursor: text;
}
.composer-toolbar {
  display: flex;
  min-height: 28px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.composer[data-compact] .composer-input-label {
  grid-column: 2;
  grid-row: 1;
  min-height: 28px;
}
.composer[data-compact] .composer-toolbar {
  display: contents;
}
.composer[data-compact] .composer-toolbar > .composer-button {
  grid-column: 1;
  grid-row: 1;
}
.composer[data-compact] .composer-toolbar > .composer-primary-actions {
  grid-column: 3;
  grid-row: 1;
}
.composer[data-compact] .composer-editor-root, .composer[data-compact] .composer-editor-surface {
  min-height: 28px;
}
.composer[data-compact] .composer-editor-surface {
  padding: 4px 0;
}
.composer[data-compact] .composer-editor-placeholder {
  top: 4px;
  left: 0;
}
.composer[data-has-attachments] .composer-input-label, .composer[data-has-attachments] .composer-editor-root, .composer[data-has-attachments] .composer-editor-surface {
  min-height: 28px;
}
.composer[data-has-attachments] .composer-editor-surface {
  padding: 4px;
}
.composer[data-has-attachments] .composer-editor-placeholder {
  top: 4px;
}
.composer-editor-root {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  max-height: var(--composer-editor-max-height);
  cursor: text;
}
.composer-editor-surface {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  min-height: 48px;
  max-height: var(--composer-editor-max-height);
  margin: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  resize: none;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 2px 4px 8px;
  caret-color: var(--openbot-text-primary);
  color: var(--openbot-text-primary);
  cursor: text;
  font-size: var(--openbot-text-lg);
  line-height: 20px;
  white-space: pre-wrap;
  word-break: break-word;
  user-select: text;
}
.composer-editor-surface[aria-disabled="true"] {
  pointer-events: none;
}
.composer-editor-root[data-dictating] > [role="textbox"] {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.composer-dictation-draft {
  display: inline;
}
.composer-dictation-word {
  animation: composer-dictation-word-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
  transition: color var(--openbot-duration-slow) var(--openbot-ease-out);
}
.composer-dictation-word[data-interim] {
  color: var(--openbot-text-muted);
}
.composer-dictation-caret {
  display: inline-block;
  width: 2px;
  height: 16px;
  margin-left: 2px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
  vertical-align: -3px;
  animation: composer-dictation-caret 1s ease-in-out infinite;
}
.composer-dictation[data-final] .composer-dictation-caret {
  display: none;
}
@keyframes composer-dictation-word-in {
  from {
    opacity: 0;
    filter: blur(2px);
  }
}
@keyframes composer-dictation-caret {
  50% {
    opacity: 0.2;
  }
}
@media (prefers-reduced-motion: reduce) {
  .composer-dictation-word, .composer-dictation-caret {
    transition: none;
    animation: none;
  }
}
.composer-editor-placeholder {
  position: absolute;
  top: 2px;
  left: 4px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-lg);
  line-height: 20px;
  pointer-events: none;
  user-select: none;
}
.composer-editor-root[data-size="compact"], .composer-editor-root[data-size="compact"] .composer-editor-surface {
  min-height: 28px;
}
.composer-editor-root[data-size="compact"] .composer-editor-surface {
  padding: 4px 0;
}
.composer-editor-root[data-size="compact"] .composer-editor-placeholder {
  top: 4px;
  left: 0;
}
.composer-mention-token.composer-tag-unavailable {
  border: 1px dashed var(--openbot-border-strong);
  background: transparent;
  padding-left: var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
}
.composer-file-reference {
  height: 24px;
  cursor: pointer;
  user-select: none;
}
.mention-picker {
  --mention-picker-overlap: 14px;
  --mention-picker-side-inset: calc(var(--openbot-space-1-5) + 12px);
  --mention-picker-row-height: 29px;
  --mention-picker-gutter: 5px;
  --mention-picker-visible-rows: 7;
  position: absolute;
  z-index: 10;
  right: var(--mention-picker-side-inset);
  bottom: calc(var(--mention-picker-bottom, 0px) - var(--mention-picker-overlap));
  left: var(--mention-picker-side-inset);
  border: 1px solid var(--openbot-queue-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-queue-surface);
  padding-bottom: var(--mention-picker-overlap);
  color: var(--openbot-queue-text);
  box-shadow: none;
  transform-origin: bottom center;
  animation: mention-picker-in var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1) both;
}
.mention-picker-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  height: calc(var(--mention-picker-rows, 0) * var(--mention-picker-row-height) + 2 * var(--mention-picker-gutter));
  max-height: calc( var(--mention-picker-visible-rows) * var(--mention-picker-row-height) + 2 * var(--mention-picker-gutter) );
  overflow-y: auto;
  padding: var(--mention-picker-gutter);
  overscroll-behavior: contain;
  scrollbar-width: none;
  transition: height var(--openbot-duration-normal) var(--openbot-ease-out);
  will-change: height;
}
.mention-picker-list::-webkit-scrollbar {
  display: none;
}
@keyframes mention-picker-in {
  from {
    opacity: 0;
    transform: translateY(5px) scaleY(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}
.mention-picker-option {
  display: flex;
  width: 100%;
  height: var(--mention-picker-row-height);
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  padding: 0 8px;
  color: var(--openbot-queue-text);
  text-align: left;
}
.mention-picker-file-option .attachment-reference-visual {
  width: 20px;
  height: 20px;
}
.mention-picker-option:hover, .mention-picker-option-active {
  background: var(--openbot-hover);
}
.mention-picker-option .agent-avatar {
  --agent-avatar-optical-offset: -2px;
  width: 20px;
  height: 20px;
}
.mention-picker-skill-icon {
  display: grid;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  place-items: center;
  color: var(--openbot-queue-action);
}
.mention-picker-skill-icon > svg {
  width: 15px;
  height: 15px;
}
.mention-picker-option > strong {
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  font-size: var(--openbot-text-lg);
  font-weight: 500;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mention-picker-description {
  min-width: 0;
  flex: 1 1 0;
  overflow: hidden;
  color: var(--openbot-queue-action);
  font-size: var(--openbot-text-md);
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mention-picker-slug {
  flex: 0 0 auto;
  color: var(--openbot-queue-action);
  font-size: var(--openbot-text-md);
  line-height: 18px;
  white-space: nowrap;
}
.mention-picker-status {
  display: flex;
  height: calc(var(--mention-picker-row-height) + 2 * var(--mention-picker-gutter));
  align-items: center;
  margin: 0;
  padding: 0 calc(var(--mention-picker-gutter) + 8px);
  color: var(--openbot-queue-action);
  font-size: var(--openbot-text-md);
  line-height: 18px;
}
.mention-picker-badge {
  margin-left: auto;
  flex: 0 0 auto;
  color: var(--openbot-queue-action);
}
.composer-attachments {
  position: relative;
  z-index: 11;
  display: flex;
  width: 100%;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 2px 0 4px;
}
.composer-attachment {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
}
.composer-attachment[data-kind="image"] {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  padding: 0;
}
.composer-attachment[data-kind="file"] {
  width: 220px;
  max-width: 100%;
  height: 52px;
  gap: 10px;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  padding: 7px 12px 7px 8px;
}
.composer-attachment-copy {
  display: block;
  min-width: 0;
  flex: 1;
}
.composer-attachment-copy strong, .composer-attachment-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.composer-attachment-copy strong {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: 500;
  line-height: 16px;
}
.composer-attachment-copy small {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 14px;
}
.composer-attachment-preview {
  display: grid;
  width: 36px;
  height: 36px;
  overflow: hidden;
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--openbot-radius-md);
  background: var(--file-reference-soft, var(--openbot-hover));
  color: var(--file-reference-color, var(--openbot-text-muted));
  font-size: var(--openbot-text-sm);
  font-weight: 700;
  line-height: 1;
}
.composer-attachment[data-kind="image"] .composer-attachment-preview {
  width: 100%;
  height: 100%;
  border-radius: var(--openbot-radius-media-preview);
}
.composer-attachment-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.message-attachments {
  display: grid;
  width: min(100%, 256px);
  gap: 7px;
  margin-top: 10px;
}
.message-attachment {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px 40px;
  min-width: 0;
  min-height: 56px;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface-raised);
  padding: 7px;
  transition: background-color var(--openbot-duration-hover) ease, border-color var(--openbot-duration-hover) ease;
}
[data-slot="bubble"]:not([data-variant="ghost"]) > [data-slot="bubble-content"] > .message-attachments:last-child {
  margin-bottom: var(--openbot-space-1);
}
[data-slot="bubble"]:not([data-variant="ghost"]) > [data-slot="bubble-content"] > .message-attachments-group:last-child {
  margin-bottom: var(--openbot-space-1);
}
[data-slot="bubble"]:not([data-variant="ghost"]) > [data-slot="bubble-content"] > .message-attachments:last-child .message-attachment {
  border-radius: var(--openbot-radius-bubble-inset);
}
.message-attachments-group {
  display: grid;
  width: min(100%, 256px);
  margin-top: var(--openbot-space-2);
  gap: var(--openbot-space-1-5);
}
.message-attachments-group .message-attachments {
  width: 100%;
  margin-top: 0;
}
.ui-button.attachment-preview-button {
  width: 100%;
  height: 40px;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  border: 0;
  background: transparent;
  padding: 0;
  color: inherit;
  text-align: left;
}
.attachment-preview-button:disabled {
  cursor: default;
}
.attachment-file-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.attachment-file-copy {
  display: grid;
  min-width: 0;
  gap: 1px;
}
.message-attachment strong {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: 560;
  line-height: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.message-attachment small {
  color: var(--openbot-text-readable);
  font-size: var(--openbot-text-sm);
  line-height: 15px;
}
.attachment-open-button {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  padding: 0;
  color: var(--openbot-text-muted);
  transition: background-color var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease, transform var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1);
}
.attachment-open-button svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}
.attachment-open-button:focus-visible, .attachment-preview-button:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}
.attachment-open-button:active {
  transform: scale(0.96);
}
@media (hover: hover) and (pointer: fine) {
  .message-attachment:hover {
    border-color: var(--openbot-border-strong);
    background: var(--openbot-bg-control-hover);
  }
  .attachment-open-button:hover {
    background: var(--openbot-bg-control-active);
    color: var(--openbot-text-primary);
  }
}
.agent-queue-panel {
  --queue-row-height: 29px;
  --queue-composer-overlap: 14px;
  --queue-row-inset-start: 13px;
  --queue-row-inset-end: 8px;
  --queue-row-gutter: 5px;
  position: relative;
  z-index: 10;
  overflow: visible;
  margin: 0 12px calc(-1 * var(--queue-composer-overlap));
  border: 1px solid var(--openbot-queue-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-queue-surface);
  padding-bottom: var(--queue-composer-overlap);
  box-shadow: none;
  animation: queue-panel-in var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1) both;
}
.agent-queue-slot {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.agent-queue-slot[data-open="false"] {
  grid-template-rows: 0fr;
}
.agent-queue-slot-inner {
  min-height: 0;
  overflow: hidden;
}
.agent-queue-panel-resize {
  min-height: 0;
}
.agent-queue-hold {
  margin: 0;
  padding: var(--queue-row-gutter) var(--queue-row-inset-end) 0 var(--queue-row-inset-start);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.message-attachments-group:has(.attachment-media-player), .message-attachments:has(.attachment-media-player) {
  width: min(100%, 360px);
}
.attachment-media-player {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  min-width: 0;
  border-radius: var(--openbot-radius-md);
}
.message-attachment[data-media] {
  grid-template-columns: minmax(0, 1fr) var(--openbot-control-sm) var(--openbot-control-sm);
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-3);
}
.message-attachment[data-media] .attachment-file-visual {
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-muted);
}
.message-attachment[data-media] .attachment-file-visual svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.message-attachment[data-media] .attachment-open-button {
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
}
.message-attachment[data-media] .attachment-open-button svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.message-attachment[data-media="audio"] .attachment-media-player {
  height: var(--openbot-control-xl);
}
.image-gallery {
  position: relative;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.image-gallery-item {
  position: absolute;
}
.image-gallery-tile {
  display: grid;
  width: 100%;
  height: 100%;
  overflow: hidden;
  place-items: center;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
  padding: 0;
  color: var(--openbot-text-muted);
}
.image-gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.image-gallery-tile:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}
.image-gallery-tile-missing > svg {
  width: var(--openbot-space-6);
  height: var(--openbot-space-6);
}
@media (hover: hover) and (pointer: fine) {
  .image-gallery-tile:not(:disabled):hover img {
    transform: scale(1.03);
  }
}
.ui-dialog-overlay.image-lightbox-backdrop {
  background: var(--openbot-bg-overlay);
  animation: none;
}
.ui-dialog-content.image-lightbox {
  position: fixed;
  z-index: calc(var(--openbot-layer-dialog) + 1);
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  color: var(--openbot-text-primary);
  outline: none;
  -webkit-app-region: no-drag;
}
.image-lightbox-chrome {
  animation: image-lightbox-fade-in var(--openbot-duration-overlay) var(--openbot-ease-out);
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}
.image-lightbox[data-closing] .image-lightbox-chrome {
  opacity: 0;
}
.image-lightbox-toolbar {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3) var(--openbot-space-4);
}
.image-lightbox-caption {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: var(--openbot-space-2);
}
.image-lightbox-name {
  overflow: hidden;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.image-lightbox-position {
  flex: none;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
.image-lightbox-actions {
  display: flex;
  flex: none;
  gap: var(--openbot-space-1);
}
.image-lightbox-stage {
  position: relative;
  min-height: 0;
  touch-action: pan-y;
}
.image-lightbox-track {
  position: absolute;
  inset: 0;
  will-change: transform;
}
.image-lightbox-slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  padding: 0 calc(var(--openbot-space-8) * 2);
  transform: translateX(calc(var(--image-lightbox-slide) * 100%));
}
.image-lightbox-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--openbot-radius-md);
  user-select: none;
  will-change: transform;
}
.image-lightbox-image-pending {
  opacity: 0;
}
.image-lightbox-error {
  margin: 0;
  color: var(--openbot-text-muted);
}
.image-lightbox-step {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control);
}
.image-lightbox-step-previous {
  left: var(--openbot-space-4);
}
.image-lightbox-step-next {
  right: var(--openbot-space-4);
}
.image-lightbox-strip {
  position: relative;
  display: flex;
  overflow-x: auto;
  justify-content: safe center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-3) var(--openbot-space-4) var(--openbot-space-4);
  scrollbar-width: none;
}
.image-lightbox-thumb {
  flex: none;
  width: var(--openbot-control-xl);
  height: var(--openbot-control-xl);
  overflow: hidden;
  border-radius: var(--openbot-radius-sm);
  padding: 0;
  opacity: 0.5;
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}
.image-lightbox-thumb[aria-current="true"] {
  box-shadow: 0 0 0 2px var(--openbot-text-primary);
  opacity: 1;
}
.image-lightbox-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.image-lightbox-thumb:focus-visible, .image-lightbox-step:focus-visible, .image-lightbox-action:focus-visible {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .image-lightbox-thumb:hover {
    opacity: 1;
  }
}
@media (max-width: 640px) {
  .image-lightbox-slide {
    padding: 0;
  }
  .image-lightbox-step {
    display: none;
  }
}
@keyframes image-lightbox-fade-in {
  from {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .image-gallery-tile img, .image-lightbox-chrome, .image-lightbox-thumb {
    animation: none;
    transition: none;
  }
}
.composer-wrap:has(.composer-attachment) .agent-queue-panel {
  margin-bottom: 0;
}
.agent-queue-panel-list {
  max-height: calc(7 * var(--queue-row-height) + 2 * var(--queue-row-gutter));
  overflow-y: auto;
  padding: var(--queue-row-gutter) var(--queue-row-inset-end) var(--queue-row-gutter) var(--queue-row-inset-start);
  overscroll-behavior: contain;
}
.agent-queue-item {
  --queue-drag-step: 0;
  position: relative;
  display: grid;
  height: var(--queue-row-height);
  min-height: 0;
  min-width: 0;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  margin: 0;
  border: 0;
  padding: 0;
  border-radius: var(--openbot-radius-md);
  color: var(--openbot-queue-text);
  cursor: grab;
  outline: 0;
  transform: translate3d(0, calc(var(--queue-drag-step) * var(--queue-row-height)), 0);
  transition: height var(--openbot-duration-slow) var(--openbot-ease-out), opacity var(--openbot-duration-fast) ease, transform var(--openbot-duration-slow) var(--openbot-ease-out);
}
.agent-queue-item-entering {
  animation: queue-item-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}
.agent-queue-item-removing {
  height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, -4px, 0) scale(0.985);
  will-change: height, opacity, transform;
}
.agent-queue-panel-dragging .agent-queue-item {
  will-change: transform;
}
.agent-queue-item::before {
  position: absolute;
  z-index: 0;
  inset: 0 calc(var(--queue-row-gutter) - var(--queue-row-inset-end)) 0 calc(var(--queue-row-gutter) - var(--queue-row-inset-start));
  border-radius: var(--openbot-radius-md);
  background: transparent;
  content: "";
  pointer-events: none;
  transition: background-color var(--openbot-duration-hover) ease;
}
.agent-queue-item > * {
  position: relative;
  z-index: 1;
}
.agent-queue-item:hover, .agent-queue-item:focus-visible, .agent-queue-item-drag-over {
  z-index: 1;
}
.agent-queue-item:hover::before, .agent-queue-item:focus-visible::before {
  background: var(--openbot-hover);
}
.agent-queue-panel-dragging .agent-queue-item:not(.agent-queue-item-dragging):hover::before {
  background: transparent;
}
.agent-queue-item:focus-visible {
  box-shadow: 0 0 0 2px var(--openbot-border-focus);
}
.agent-queue-item-dragging {
  z-index: 0;
  cursor: grabbing;
  opacity: 0;
}
.agent-queue-item-dragging::before {
  background: transparent;
  box-shadow: none;
}
.agent-queue-drag-preview {
  position: fixed;
  z-index: var(--openbot-layer-dropdown);
  box-sizing: border-box;
  min-height: 31px;
  margin: 0;
  border: 1px solid var(--openbot-border-strong);
  background: var(--openbot-bg-surface-raised);
  box-shadow: var(--openbot-shadow-raised);
  opacity: 0.96;
  pointer-events: none;
  transform: none;
}
.agent-queue-drag-preview::before {
  display: none;
}
.agent-queue-item-steering {
  color: var(--openbot-text-muted);
}
.agent-queue-item-editing {
  color: var(--openbot-text-muted);
}
.agent-queue-editing-badge {
  flex: none;
  padding: 0 6px;
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 18px;
  white-space: nowrap;
}
.agent-queue-item-has-attachment {
  grid-template-columns: 14px 24px minmax(0, 1fr) auto;
}
.agent-queue-icon {
  display: grid;
  place-items: center;
  color: var(--openbot-queue-action);
}
.agent-queue-icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}
.agent-queue-attachment {
  display: grid;
  width: 24px;
  height: 24px;
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--openbot-queue-border);
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-bg-canvas);
  color: var(--openbot-queue-action);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-glyph-xs);
  line-height: 1;
}
.agent-queue-attachment img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.agent-queue-steer svg, .agent-queue-icon-button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--openbot-icon-stroke);
}
.agent-queue-message {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: var(--openbot-text-lg);
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-queue-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--openbot-queue-action);
}
.agent-queue-steer, .agent-queue-icon-button {
  display: inline-flex;
  height: 26px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  padding: 0 4px;
  color: inherit;
  font-size: var(--openbot-text-lg);
  line-height: 18px;
  transition: background var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease;
}
.agent-queue-steer:hover:not(:disabled), .agent-queue-steer:focus-visible, .agent-queue-icon-button:hover:not(:disabled), .agent-queue-icon-button:focus-visible {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
  outline: 0;
}
.agent-queue-steer:disabled, .agent-queue-icon-button:disabled {
  cursor: default;
  opacity: 0.45;
}
.agent-queue-icon-button {
  width: 26px;
  padding: 0;
}
.agent-queue-icon-button.agent-queue-delete:hover:not(:disabled), .agent-queue-icon-button.agent-queue-delete:focus-visible {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
  opacity: 1;
}
@media (max-width: 620px) {
  .agent-queue-panel {
    margin-right: 2px;
    margin-left: 2px;
  }
  .agent-queue-steer {
    width: 26px;
    padding: 0;
  }
  .agent-queue-steer span {
    display: none;
  }
}
@keyframes queue-panel-in {
  from {
    opacity: 0;
    transform: translateY(5px) scale(0.995);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes queue-item-in {
  from {
    opacity: 0;
    transform: translate3d(0, -4px, 0) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}
.agent-tasks-mark {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  --task-list-glyph: 14px;
}
.agent-tasks-menu-title {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agent-task-chips {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--openbot-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.agent-task-chip-row {
  display: flex;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  gap: var(--openbot-space-1);
}
.agent-task-chip.ui-button {
  display: inline-flex;
  min-width: 0;
  max-width: min(100%, 560px);
  height: var(--openbot-control-md);
  align-items: center;
  gap: var(--openbot-space-2);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-pill);
  padding: 0 var(--openbot-space-2) 0 var(--openbot-space-3);
  font-weight: inherit;
  --task-list-glyph: 14px;
}
.agent-task-chip-title {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-task-chip-status {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-task-chip-chevron {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
}
.agent-task-chip-close.ui-button {
  display: grid;
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  color: var(--openbot-text-muted);
}
.agent-task-chip-close svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.agent-task-list {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--openbot-space-0-5);
  min-height: 0;
  overflow-y: auto;
  padding: var(--openbot-space-2);
}
.agent-task-list .agent-tasks-mark {
  width: 16px;
}
.agent-task-list-group {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-0-5);
  margin-top: var(--openbot-space-2);
}
.agent-task-list-day {
  margin: 0;
  padding: var(--openbot-space-1) var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: 500;
}
.agent-tasks-disclosure {
  color: var(--openbot-text-secondary);
}
.agent-tasks-disclosure .agent-tasks-icon {
  color: var(--openbot-text-muted);
  transition: transform var(--openbot-duration-fast) ease;
}
.agent-tasks-disclosure[aria-expanded="true"] .agent-tasks-icon {
  transform: rotate(90deg);
}
.agent-tasks-trigger-dot {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 5px;
  height: 5px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
}
.agent-tasks-panel .file-preview-header {
  --task-list-glyph: 16px;
}
.agent-tasks-panel-origin {
  margin: 0;
  padding: var(--openbot-space-3) var(--openbot-space-4) 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.agent-tasks-panel-queued {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  padding: 0 var(--openbot-space-4);
}
.agent-tasks-panel-queued-text {
  margin: 0;
  overflow: hidden;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-tasks-panel-note {
  margin: 0;
  border-top: 1px solid var(--openbot-border);
  padding: var(--openbot-space-3) var(--openbot-space-4);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.agent-tasks-panel .composer[data-compact] {
  grid-template-columns: minmax(0, 1fr) auto;
}
.agent-tasks-panel .composer[data-compact] > .composer-input-label {
  grid-column: 1;
}
.agent-tasks-panel .composer[data-compact] .composer-primary-actions {
  grid-column: 2;
}
@media (prefers-reduced-motion: reduce) {
  .agent-tasks-disclosure .agent-tasks-icon {
    transition: none;
  }
}
.side-question-empty {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-1-5);
  padding: var(--openbot-space-8) var(--openbot-space-4);
  text-align: center;
}
.side-question-empty > svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  margin-bottom: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  stroke-width: var(--openbot-icon-stroke);
}
.side-question-empty > strong {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  font-weight: 500;
}
.side-question-empty > p {
  max-width: 320px;
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.side-question-composer.composer[data-compact] {
  grid-template-columns: minmax(0, 1fr) auto;
}
.side-question-composer.composer[data-compact] > .composer-input-label {
  grid-column: 1;
}
.side-question-composer.composer[data-compact] .composer-primary-actions {
  grid-column: 2;
}
.speaking-bar {
  display: flex;
  width: min(560px, 100%);
  align-items: center;
  gap: var(--openbot-space-3);
  margin: 0 auto var(--openbot-space-2);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface-raised);
  box-shadow: var(--openbot-shadow-raised);
  padding: var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-2);
  animation: speaking-bar-in var(--openbot-duration-normal) var(--openbot-ease-out) both;
}
@keyframes speaking-bar-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}
.speaking-bar-avatar {
  --agent-avatar-optical-offset: calc(28px * -0.14);
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
}
.speaking-bar-waveform {
  max-width: 120px;
  flex: 0 0 auto;
  color: var(--openbot-accent);
}
.speaking-bar-caption {
  min-width: 0;
  flex: 1;
  margin: 0;
  overflow: hidden;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.voice-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: var(--openbot-space-4);
}
.voice-panel-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-0-5);
}
.voice-panel-name {
  margin: 0;
  font-size: var(--openbot-text-md);
  font-weight: 600;
}
.voice-panel-phase {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.voice-panel-stage {
  display: flex;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-8);
}
.voice-panel-presence {
  position: relative;
  display: grid;
  width: 140px;
  height: 140px;
  place-items: center;
  transform: scale(var(--voice-presence-scale, 1));
  transition: transform var(--openbot-duration-fast) linear, opacity var(--openbot-duration-normal) ease;
}
.voice-panel-presence::before {
  position: absolute;
  inset: -24px;
  border-radius: var(--openbot-radius-pill);
  background: radial-gradient(closest-side, var(--openbot-accent-soft), transparent);
  content: "";
  opacity: 0.5;
  transition: opacity var(--openbot-duration-normal) ease;
}
.voice-panel-presence[data-phase="speaking"]::before {
  opacity: 1;
}
.voice-panel-presence[data-phase="thinking"]::before {
  animation: voice-panel-think 1.6s var(--openbot-ease-in-out) infinite alternate;
}
@keyframes voice-panel-think {
  to {
    opacity: 0.15;
  }
}
.voice-panel-avatar {
  --agent-avatar-optical-offset: calc(112px * -0.14);
  position: relative;
  width: 112px;
  height: 112px;
}
.voice-panel-presence[data-muted] {
  opacity: 0.5;
}
.voice-panel-waveform {
  display: flex;
  width: 141px;
  color: var(--openbot-text-secondary);
  opacity: 0;
  transition: opacity var(--openbot-duration-normal) ease;
}
.voice-panel-waveform[data-phase] {
  opacity: 1;
}
.voice-panel-waveform[data-phase="speaking"] {
  color: var(--openbot-accent);
}
.voice-panel-captions {
  width: 100%;
  min-height: calc(var(--openbot-leading-xl) * 4);
  overflow-y: auto;
  text-align: center;
}
.voice-panel-caption {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-xl);
  line-height: var(--openbot-leading-xl);
}
.voice-panel-caption[data-empty] {
  color: var(--openbot-text-muted);
}
.voice-panel-error {
  color: var(--openbot-danger);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.voice-panel-controls {
  display: flex;
  justify-content: center;
  gap: var(--openbot-space-4);
}
.voice-panel-control {
  border-radius: var(--openbot-radius-pill);
  transition: background-color var(--openbot-duration-fast) ease, color var(--openbot-duration-fast) ease;
}
@media (prefers-reduced-motion: reduce) {
  .speaking-bar, .voice-panel-presence[data-phase="thinking"]::before {
    animation: none;
  }
  .voice-panel-presence {
    transform: none;
  }
}
.voice-player {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-top: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
}
.voice-player-toggle {
  flex: none;
  border-radius: var(--openbot-radius-pill);
}
.voice-player-toggle svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}
.voice-player-track {
  flex: none;
}
.voice-player-bars {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 24px;
}
.voice-player-bar {
  width: 2px;
  height: calc(3px + var(--voice-peak, 0) * 17px);
  border-radius: var(--openbot-radius-pill);
  background: currentColor;
  opacity: 0.45;
}
.voice-player-bar[data-played] {
  background: var(--openbot-accent);
  opacity: 1;
}
.voice-player-time {
  min-width: 3ch;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
.conversation-panel:has(.settings-panel) .conversation-header, .conversation-panel:has(.settings-panel) .conversation-scroll, .conversation-panel:has(.settings-panel) .composer-wrap {
  width: calc(100% - var(--settings-panel-width, 296px));
}
.conversation-panel:has(.settings-panel) .chat-search {
  right: calc(var(--settings-panel-width, 296px) + 16px);
  max-width: calc(100% - var(--settings-panel-width, 296px) - 32px);
}
.conversation-panel:has(#browser-side-panel) .chat-search, .conversation-panel:has(#file-preview-panel) .chat-search {
  right: calc(var(--browser-panel-width, 380px) + 16px);
  max-width: calc(100% - var(--browser-panel-width, 380px) - 32px);
}
.conversation-panel:has(#browser-side-panel) .conversation-header, .conversation-panel:has(#browser-side-panel) .conversation-scroll, .conversation-panel:has(#browser-side-panel) .composer-wrap, .conversation-panel:has(#file-preview-panel) .conversation-header, .conversation-panel:has(#file-preview-panel) .conversation-scroll, .conversation-panel:has(#file-preview-panel) .composer-wrap {
  width: 100%;
}
@keyframes message-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes agent-activity-dot {
  0%, 60%, 100% {
    opacity: 0.34;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-2px);
  }
}
@keyframes agent-picker-in {
  from {
    opacity: 0;
    transform: translateY(-3px) scale(0.995);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes settings-panel-in {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes browser-control-pulse {
  0%, 100% {
    opacity: 0.55;
    transform: scale(0.88);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}
@media (prefers-reduced-motion: reduce) {
  .browser-panel, .remote-desktop-workspace, .message-entry, .chat-action-entry-animated, .agent-activity-entry, .agent-activity-content, .agent-activity-avatar, .agent-row-thinking-dots i, .agent-row-agent-status-responded, .agent-row-agent-status-unread, .mention-picker, .mention-picker-list, .settings-panel {
    animation: none;
    transition: none;
  }
  .agent-activity-avatar, .agent-activity-entry[data-state="exiting"] .agent-activity-avatar {
    transform: none;
  }
  .agent-queue-item {
    animation: none;
    transition: none;
  }
  .agent-queue-panel {
    transition: none;
  }
  .agent-queue-slot {
    transition: none;
  }
  .agent-queue-panel-resize, .message-content-resize {
    will-change: auto;
  }
  .computer-control-dot {
    animation: none;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes modal-in {
  from {
    opacity: 0;
    transform: scale(0.97) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.attachment-drop-overlay {
  position: absolute;
  z-index: 60;
  inset: 12px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px dashed color-mix(in srgb, var(--accent) 70%, var(--openbot-text-primary));
  }
  border-radius: var(--openbot-radius-lg);
  background: var(--background);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--background) 38%, transparent);
  }
  color: var(--text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: 650;
  backdrop-filter: blur(3px);
  pointer-events: none;
}
.side-panel-header {
  position: absolute;
  z-index: 16;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
  width: var(--side-panel-width, 380px);
  height: var(--left-header-height, 38px);
  min-width: 0;
  padding: 0 var(--openbot-space-2);
  container: side-panel-header / inline-size;
}
.side-panel-header::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: var(--openbot-icon-lg);
  translate: 0 -50%;
  background: var(--openbot-border-strong);
  content: "";
  pointer-events: none;
}
.side-panel-tabs {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--openbot-space-1);
  min-width: 0;
}
.side-panel-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--openbot-space-0-5);
  color: var(--openbot-text-muted);
}
.side-panel-actions svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.side-panel-tab {
  position: relative;
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: var(--openbot-space-1-5);
  min-width: 0;
  height: var(--openbot-control-sm);
  padding: 0 var(--openbot-space-2) 0 var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-md);
  color: var(--openbot-text-secondary);
}
.side-panel-tab:hover {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}
.side-panel-tab[data-selected] {
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
}
.side-panel-tab + .side-panel-tab::before {
  position: absolute;
  top: 50%;
  left: calc(var(--openbot-space-1) / -2 - 0.5px);
  width: 1px;
  height: var(--openbot-icon-lg);
  translate: 0 -50%;
  background: var(--openbot-border-strong);
  content: "";
  pointer-events: none;
}
.side-panel-tab:is([data-selected], :hover)::before, .side-panel-tab:is([data-selected], :hover) + .side-panel-tab::before {
  opacity: 0;
}
.side-panel-tab-select {
  display: block;
  height: auto;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 0;
  cursor: pointer;
}
.side-panel-tab-select:hover:not(:disabled):not([data-disabled]) {
  background: transparent;
  color: inherit;
}
.side-panel-tab-close {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  padding: 0;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.side-panel-tab-icon, .side-panel-tab-x {
  grid-area: 1 / 1;
}
.side-panel-tab-icon {
  display: grid;
  opacity: 0.7;
}
.side-panel-tab-icon svg, .side-panel-tab-x {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.side-panel-tab-x {
  opacity: 0;
}
.side-panel-tab:is(:hover, :focus-within) .side-panel-tab-close {
  background: var(--openbot-bg-control-hover);
}
.side-panel-tab:is(:hover, :focus-within) .side-panel-tab-icon {
  opacity: 0;
}
.side-panel-tab:is(:hover, :focus-within) .side-panel-tab-x {
  opacity: 1;
}
.side-panel-tab-close:hover:not(:disabled):not([data-disabled]) {
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
}
.side-panel-tab-select:focus-visible {
  box-shadow: var(--openbot-focus-ring);
  outline: none;
}
@container side-panel-header (max-width: 480px) {
  .side-panel-tabs:has(> .side-panel-tab:nth-child(4)) {
    --side-panel-tabs-compact: 1;
  }
}
@container side-panel-header (max-width: 360px) {
  .side-panel-tabs:has(> .side-panel-tab:nth-child(3)) {
    --side-panel-tabs-compact: 1;
  }
}
@container style(--side-panel-tabs-compact: 1) {
  .side-panel-tab:not([data-selected]) {
    padding: 0 var(--openbot-space-1-5);
  }
  .side-panel-tab:not([data-selected]) .side-panel-tab-select {
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }
  .side-panel-tab:not([data-selected]) .side-panel-tab-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .side-panel-tab:not([data-selected], :focus-within) .side-panel-tab-close {
    background: transparent;
  }
  .side-panel-tab:not([data-selected], :focus-within) .side-panel-tab-icon {
    opacity: 0.7;
  }
  .side-panel-tab:not([data-selected], :focus-within) .side-panel-tab-x {
    opacity: 0;
  }
}
.side-panel-docked > :is(.browser-panel, .settings-panel) {
  top: var(--left-header-height, 38px);
}
.app-frame-edge .side-panel-docked > :is(.browser-panel, .settings-panel)::before {
  top: -1px;
}
.side-panel-docked :is(.side-panel-pane-header, .side-panel-pane-title, .side-panel-pane-close) {
  display: none;
}
.side-panel-docked .settings-panel-header > .side-panel-pane-close {
  display: inline-flex;
  visibility: hidden;
}
.side-panel-empty {
  justify-content: center;
}
.side-panel-launcher {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1-5);
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  padding: var(--openbot-space-6);
}
.side-panel-launch {
  justify-content: flex-start;
  gap: var(--openbot-space-3);
}
.side-panel-maximized > :is(.browser-panel, .settings-panel, .side-panel-header) {
  width: 100%;
}
.side-panel-maximized > .side-panel-header::before, .side-panel-maximized .right-panel-resizer {
  display: none;
}
.side-panel-maximized > :is(.conversation-header, .conversation-scroll, .composer-wrap) {
  visibility: hidden;
}
:is(.side-panel-launch, .side-panel-menu-item) svg {
  flex: none;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
}
.composer-notice {
  --notice-composer-overlap: 14px;
  --notice-inset: 6px;
  --notice-accent: var(--openbot-warning);
  --notice-surface: var(--openbot-warning-soft);
  position: relative;
  z-index: 10;
  display: flex;
  margin: 0 12px calc(-1 * var(--notice-composer-overlap));
  padding: var(--notice-inset) var(--notice-inset) calc(var(--notice-inset) + var(--notice-composer-overlap)) 12px;
  align-items: center;
  gap: 10px;
  border: none;
  border-radius: var(--openbot-radius-card);
  background: var(--notice-surface);
  animation: queue-panel-in var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1) both;
}
.composer-notice[data-tone="danger"] {
  --notice-accent: var(--openbot-danger-text);
  --notice-surface: var(--openbot-danger-soft);
}
.composer-notice:not(:has(.ui-button)) {
  --notice-inset: 8px;
  padding-right: 12px;
}
.composer-notice-icon {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--notice-accent);
}
.composer-notice .ui-button {
  border-color: transparent;
  background: var(--notice-accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--notice-accent) 14%, transparent);
  }
  color: var(--notice-accent);
}
@media (hover: hover) {
  .composer-notice .ui-button:hover:not(:disabled):not([data-disabled]) {
    background: var(--notice-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--notice-accent) 24%, transparent);
    }
    color: var(--notice-accent);
  }
}
.composer-notice-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 0;
}
.composer-notice-copy strong {
  color: var(--notice-accent);
  font-size: var(--openbot-text-sm);
  font-weight: 600;
  line-height: 1.35;
}
.composer-notice-copy p {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: 1.35;
}
.composer-notice-dismiss {
  flex: none;
  align-self: flex-start;
}
.composer-notice .composer-notice-dismiss {
  background: transparent;
  color: var(--notice-accent);
}
@media (hover: hover) {
  .composer-notice .composer-notice-dismiss:hover:not(:disabled):not([data-disabled]) {
    background: var(--notice-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--notice-accent) 18%, transparent);
    }
  }
}
.composer-notice .composer-notice-code-fallback {
  flex: none;
  border-color: var(--notice-accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--notice-accent) 45%, transparent);
  }
  background: transparent;
}
.context-meter-trigger {
  color: var(--openbot-text-muted);
}
.context-meter-ring {
  width: var(--openbot-icon-md);
}
.context-meter-ring .ui-radial-progress-track, .context-meter-ring .ui-radial-progress-indicator {
  stroke-width: 6;
}
.context-meter-ring[data-level="quiet"] {
  --ui-radial-progress-color: var(--openbot-text-dim);
}
.context-meter-ring[data-level="normal"] {
  --ui-radial-progress-color: var(--openbot-text-secondary);
}
.context-meter-ring[data-compacting] {
  --ui-radial-progress-color: var(--openbot-warning);
}
.context-meter-ring[data-compacting] .ui-radial-progress-chart {
  animation: ui-spin 900ms linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .context-meter-ring[data-compacting] .ui-radial-progress-chart {
    animation: none;
  }
}
.context-meter-popover {
  z-index: var(--openbot-layer-popover);
  display: flex;
  width: 280px;
  flex-direction: column;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3) var(--openbot-space-4) var(--openbot-space-4);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  transform-origin: var(--kb-popover-content-transform-origin);
  animation: ui-menu-in var(--ui-menu-duration) var(--ui-menu-ease) both;
}
.context-meter-popover:not([data-expanded]) {
  animation: ui-menu-out var(--ui-menu-duration) var(--ui-menu-ease) both;
}
@media (prefers-reduced-motion: reduce) {
  .context-meter-popover, .context-meter-popover:not([data-expanded]) {
    animation: none;
  }
}
.context-meter-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.context-meter-title {
  margin: 0;
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
}
.context-meter-percent {
  color: var(--openbot-text-secondary);
  font-variant-numeric: tabular-nums;
}
.context-meter-percent[data-level="warning"] {
  color: var(--openbot-warning-text);
}
.context-meter-percent[data-level="danger"] {
  color: var(--openbot-danger-text);
}
.context-meter-tokens, .context-meter-note {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.context-meter-footer {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1-5);
  margin: 0 calc(-1 * var(--openbot-space-4)) calc(-1 * var(--openbot-space-4));
  border-top: 1px solid var(--openbot-border);
  padding: var(--openbot-space-1-5);
}
.context-meter-new-chat {
  width: 100%;
  height: var(--openbot-control-md);
  justify-content: flex-start;
  gap: var(--openbot-space-2);
  border-radius: var(--ui-menu-item-radius);
  padding: 0 var(--ui-menu-inset);
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-regular);
}
.context-meter-new-chat:is(:hover, :focus-visible):not(:disabled) {
  background: var(--ui-menu-item-hover);
}
.context-meter-new-chat > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  color: var(--openbot-text-secondary);
}
.context-meter-tokens {
  margin-top: calc(-1 * var(--openbot-space-2));
  font-variant-numeric: tabular-nums;
}
.context-usage-bar {
  position: relative;
  display: flex;
  height: var(--openbot-space-2);
  gap: var(--openbot-space-0-5);
}
.context-usage-segment {
  min-width: var(--openbot-space-1);
  flex-basis: 0;
  border-radius: var(--openbot-radius-xs);
  background: var(--context-color);
}
.context-usage-segment[data-category="used"] {
  --context-color: var(--openbot-text-secondary);
}
.context-meter-popover:has(.context-meter-percent[data-level="warning"]) [data-category="used"] {
  --context-color: var(--openbot-warning);
}
.context-meter-popover:has(.context-meter-percent[data-level="danger"]) [data-category="used"] {
  --context-color: var(--openbot-danger);
}
.context-usage-segment[data-category="free"] {
  min-width: 0;
  background: var(--openbot-border);
}
.context-meter-popover [data-category="systemPrompt"] {
  --context-color: var(--openbot-chart-storage-workspaces);
}
.context-meter-popover [data-category="memoryFiles"] {
  --context-color: var(--openbot-chart-storage-chats);
}
.context-meter-popover [data-category="tools"] {
  --context-color: var(--openbot-chart-storage-downloads);
}
.context-meter-popover [data-category="skills"] {
  --context-color: var(--openbot-chart-storage-runtimes);
}
.context-meter-popover [data-category="toolResults"] {
  --context-color: var(--openbot-chart-storage-files);
}
.context-meter-popover [data-category="messages"] {
  --context-color: var(--openbot-text-secondary);
}
.context-meter-popover [data-category="other"] {
  --context-color: var(--openbot-text-dim);
}
.context-meter-popover .context-meter-category[data-category="free"] {
  --context-color: var(--openbot-border);
}
.context-meter-categories {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.context-meter-category {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-0-5) 0;
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.context-meter-swatch {
  width: var(--openbot-space-2);
  height: var(--openbot-space-2);
  align-self: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--context-color);
}
.context-meter-category-label {
  overflow: hidden;
  color: var(--openbot-text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.context-meter-category-tokens {
  color: var(--openbot-text-primary);
  font-variant-numeric: tabular-nums;
}
.context-usage-threshold {
  position: absolute;
  top: calc(-1 * var(--openbot-space-1));
  bottom: calc(-1 * var(--openbot-space-1));
  width: var(--openbot-space-0-5);
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-text-primary);
  transform: translateX(-50%);
}
.context-compaction-notice[data-tone="success"] {
  --notice-accent: var(--openbot-success-text);
  --notice-surface: var(--openbot-success-soft);
}
.context-compaction-notice[data-leaving] {
  animation: context-compaction-notice-out var(--openbot-duration-toast-exit) var(--openbot-ease-in-out) forwards;
}
@keyframes context-compaction-notice-out {
  to {
    opacity: 0;
    transform: translateY(100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .context-compaction-notice[data-leaving] {
    animation: context-compaction-notice-fade 1ms forwards;
  }
}
@keyframes context-compaction-notice-fade {
  to {
    opacity: 0;
  }
}
.context-compaction-notice .composer-notice-icon {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.context-compaction-notice-copy {
  min-width: 0;
  flex: 1;
  margin: 0;
  overflow: hidden;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.context-compaction-notice-copy strong {
  color: var(--notice-accent);
  font-weight: 600;
}
.context-compaction-notice:has(.composer-notice-dismiss) {
  --notice-inset: 8px;
}
.context-compaction-notice .composer-notice-dismiss {
  width: var(--openbot-control-xs);
  height: var(--openbot-control-xs);
  min-height: 0;
  margin-block: calc(-1 * var(--openbot-space-1));
  padding: 0;
  align-self: center;
}
.context-compaction-notice-percent {
  flex: none;
  color: var(--notice-accent);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}
.context-compaction-body {
  display: flex;
  min-width: 0;
  max-width: 100%;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-2);
}
.context-compaction-icon {
  display: inline-grid;
  place-items: center;
}
.context-compaction-icon svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.context-compaction-marker[data-status="completed"] .context-compaction-icon {
  color: var(--openbot-success-text);
}
.context-compaction-marker[data-status="failed"] .context-compaction-icon {
  color: var(--openbot-warning-text);
}
.context-compaction-marker .chat-action-marker-content {
  flex-wrap: wrap;
  justify-content: center;
  min-width: 0;
  white-space: normal;
}
.context-compaction-detail {
  white-space: normal;
}
.conversation-interaction-card {
  box-sizing: border-box;
  min-width: 0;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
  padding: var(--openbot-space-4);
}
.conversation-interaction-header {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--openbot-space-3);
}
.conversation-interaction-header > :is(strong, h2) {
  min-width: 0;
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-lg);
  overflow-wrap: anywhere;
}
.conversation-interaction-status[data-slot="badge"] {
  flex: 0 0 auto;
  gap: var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-md);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.conversation-interaction-status svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.conversation-interaction-spinner {
  animation: ui-spin 1s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .conversation-interaction-spinner {
    animation: none;
  }
}
.browser-takeover-card {
  display: flex;
  width: min(540px, 100%);
  margin: var(--openbot-space-3) 0 var(--openbot-space-6);
  flex-direction: column;
  gap: var(--openbot-space-4);
  animation: browser-takeover-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}
.browser-takeover-copy {
  margin-top: calc(-1 * var(--openbot-space-2));
  display: grid;
  gap: var(--openbot-space-1);
}
.browser-takeover-copy p {
  margin: 0;
  max-width: 54ch;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-md);
}
.browser-takeover-preview {
  min-width: 0;
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-canvas);
}
.browser-takeover-preview-bar {
  display: flex;
  height: var(--openbot-control-sm);
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-1-5);
  border-bottom: 1px solid var(--openbot-border);
  background: var(--openbot-bg-control);
  padding: 0 var(--openbot-space-3);
  color: var(--openbot-text-secondary);
}
.browser-takeover-preview-bar svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.browser-takeover-preview-bar span, .browser-takeover-preview-bar small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser-takeover-preview-bar span {
  min-width: 0;
  flex: 1;
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.browser-takeover-preview-bar small {
  max-width: 42%;
  color: var(--openbot-text-readable);
  font-size: var(--openbot-text-sm);
}
.browser-takeover-preview-viewport {
  display: grid;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  place-items: stretch;
  background: var(--openbot-bg-control);
}
.browser-takeover-preview-open.ui-button {
  display: grid;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.browser-takeover-preview-open > * {
  grid-area: 1 / 1;
}
.browser-takeover-preview-open-label {
  display: inline-flex;
  align-items: center;
  justify-self: center;
  align-self: center;
  gap: var(--openbot-space-1);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-canvas);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}
.browser-takeover-preview-open-label > svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  stroke-width: var(--openbot-icon-stroke);
}
.browser-takeover-preview-open:hover .browser-takeover-preview-open-label, .browser-takeover-preview-open:focus-visible .browser-takeover-preview-open-label {
  opacity: 1;
}
.browser-takeover-preview-viewport img, .browser-takeover-preview-skeleton {
  width: 100%;
  height: 100%;
}
.browser-takeover-preview-viewport img {
  display: block;
  object-fit: cover;
}
.browser-takeover-preview-fallback {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  padding: var(--openbot-space-6);
  text-align: center;
}
.browser-takeover-preview-fallback svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  margin-bottom: var(--openbot-space-1);
  stroke-width: var(--openbot-icon-stroke);
}
.browser-takeover-preview-fallback strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser-takeover-preview-fallback span {
  max-width: 100%;
  overflow: hidden;
  color: var(--openbot-text-readable);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser-takeover-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.browser-takeover-actions .ui-button {
  transition: transform var(--openbot-duration-fast) var(--openbot-ease-out);
}
.browser-takeover-actions .ui-button:active:not(:disabled) {
  transform: scale(0.97);
}
@keyframes browser-takeover-in {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.question-prompt-bubble.ui-bubble {
  width: min(540px, 100%);
  max-width: 100%;
}
.question-prompt-bubble > .ui-bubble-content {
  width: 100%;
  border-color: var(--openbot-border);
  background: var(--openbot-bg-canvas);
}
.question-prompt-complete {
  min-width: 0;
  display: grid;
  gap: var(--openbot-space-3);
}
.question-prompt-complete-header, .question-prompt-complete-status {
  display: flex;
  align-items: center;
}
.question-prompt-complete-header {
  min-width: 0;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  min-height: 24px;
}
.question-prompt-complete-status {
  min-width: 0;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-primary);
}
.question-prompt-complete-status svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  color: var(--openbot-success);
  stroke-width: var(--openbot-icon-stroke);
}
.question-prompt-complete:not([data-state="answered"]) .question-prompt-complete-status svg {
  color: var(--openbot-text-muted);
}
.question-prompt-complete-status strong {
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-lg);
  letter-spacing: var(--openbot-tracking-tight);
}
.question-prompt-complete-answers.ui-item-group {
  gap: var(--openbot-space-3);
  border: 0;
  border-radius: 0;
  background: transparent;
}
.question-prompt-complete-answers .ui-item {
  min-height: 0;
  border: 0;
  padding: 0;
}
.question-prompt-complete-answers .ui-item-title, .question-prompt-complete-answers .ui-item-description {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}
.question-prompt-complete-answers .ui-item-title {
  font-weight: var(--openbot-weight-regular);
}
.question-prompt-header {
  min-width: 0;
  min-height: var(--openbot-control-xs);
}
.question-prompt-header h2 {
  margin: 0;
  padding-top: var(--openbot-space-0-5);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-lg);
  letter-spacing: var(--openbot-tracking-tight);
}
.question-prompt-navigation {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-0-5);
}
.question-prompt-layout {
  position: relative;
  min-width: 0;
}
.question-prompt-navigation-root.ui-questionnaire {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--openbot-space-4);
}
.question-prompt-navigation-button.ui-button {
  width: 22px;
  height: 22px;
  min-height: 22px;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  background: transparent;
  padding: 0;
  color: var(--openbot-text-muted);
  transition: none;
}
.question-prompt-navigation-button.ui-button:hover:not(:disabled) {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}
.question-prompt-navigation-button.ui-button:focus-visible {
  background: var(--openbot-bg-control-hover);
  box-shadow: 0 0 0 1px var(--openbot-border-strong);
  color: var(--openbot-text-primary);
}
.question-prompt-navigation-button.ui-button:disabled {
  background: transparent;
  color: var(--openbot-text-dim);
  opacity: 0.52;
}
.question-prompt-navigation-button svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.question-prompt-navigation .ui-questionnaire-progress {
  min-width: 48px;
  padding-inline: var(--openbot-space-1);
  font-family: var(--openbot-font-sans);
  text-align: center;
}
.question-prompt-cancel {
  margin-left: var(--openbot-space-1);
}
.question-prompt-stage {
  min-width: 0;
  overflow: hidden;
  transition: height var(--page-slide-dur) var(--page-slide-ease);
}
.question-prompt-stage .question-prompt-page {
  bottom: auto;
  display: grid;
  gap: var(--openbot-space-3);
}
.question-prompt-stage:not([data-transitioning]) .question-prompt-page:not([aria-hidden="true"]) {
  position: relative;
}
.question-prompt-stage[data-preparing], .question-prompt-stage[data-preparing] .t-page {
  transition: none;
}
.question-prompt-options.ui-item-group {
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface);
}
.question-prompt-options > :is(.ui-questionnaire-choice, .question-prompt-custom-row) {
  transition: background-color var(--openbot-duration-hover) ease, box-shadow var(--openbot-duration-hover) ease;
}
.question-prompt-options > .ui-questionnaire-choice:hover:not([data-disabled]) {
  background: var(--openbot-bg-control-hover);
}
.question-prompt-options > .ui-questionnaire-choice:focus-within {
  outline: 1px solid var(--openbot-border-strong);
  outline-offset: -1px;
  background: var(--openbot-bg-control-hover);
}
.question-prompt-options > .ui-questionnaire-choice[data-checked] {
  background: var(--openbot-bg-control-active);
}
.question-prompt-options .ui-item {
  min-height: 48px;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-2) var(--openbot-space-3);
}
.question-prompt-options .ui-item-title, .question-prompt-options .ui-item-description {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
.question-prompt-options .ui-kbd {
  width: 20px;
  min-width: 20px;
  border-color: var(--openbot-border);
  background: var(--openbot-hover);
  color: var(--openbot-text-muted);
}
.question-prompt-options > .ui-questionnaire-choice[data-checked] .ui-kbd {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-secondary);
}
.question-prompt-choice-arrow {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  color: var(--openbot-text-muted);
  opacity: 0;
  transform: translateX(-3px);
  transition: opacity var(--openbot-duration-hover) ease, transform var(--openbot-duration-hover) var(--openbot-ease-out);
}
.question-prompt-choice-arrow svg {
  width: 100%;
  height: 100%;
  stroke-width: var(--openbot-icon-stroke);
}
.question-prompt-options > .ui-questionnaire-choice:is(:hover, :focus-within, [data-checked]) .question-prompt-choice-arrow {
  opacity: 1;
  transform: translateX(0);
}
.question-prompt-custom-row {
  min-width: 0;
  min-height: 44px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-1-5) var(--openbot-space-3);
}
.question-prompt-custom-row[data-selected] {
  background: var(--openbot-bg-control-active);
}
.question-prompt-custom-row:focus-within {
  background: var(--openbot-bg-control-hover);
  box-shadow: none;
}
.question-prompt-pencil {
  width: 20px;
  height: 20px;
  display: grid;
  align-self: center;
  place-items: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-hover);
  color: var(--openbot-text-muted);
}
.question-prompt-pencil svg {
  display: block;
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  transform: translateY(-0.5px);
}
.question-prompt-custom-row:focus-within .question-prompt-pencil {
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-secondary);
}
.question-prompt-custom-row .ui-questionnaire-input {
  width: 100%;
  min-height: 30px;
  border: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.question-prompt-custom-row .ui-questionnaire-input::placeholder {
  color: var(--openbot-text-muted);
}
.question-prompt-custom-row .ui-questionnaire-input:focus {
  outline: 0;
  box-shadow: none;
}
.question-prompt-inline-actions, .question-prompt-sending {
  display: flex;
  align-items: center;
}
.question-prompt-inline-actions {
  gap: var(--openbot-space-2);
}
.question-prompt-sending {
  gap: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  white-space: nowrap;
}
.question-prompt-inline-actions [data-slot="questionnaire-skip"] {
  min-height: 28px;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-pill);
  background: transparent;
  padding-inline: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
}
.question-prompt-inline-actions [data-slot="questionnaire-skip"]:hover:not(:disabled) {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}
.question-prompt-inline-actions [data-slot="questionnaire-skip"]:focus-visible {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-control-hover);
  box-shadow: 0 0 0 1px var(--openbot-border-strong);
  color: var(--openbot-text-primary);
}
.question-prompt-empty {
  min-width: 0;
  display: grid;
  gap: var(--openbot-space-0-5);
  padding: var(--openbot-space-1);
}
.question-prompt-empty strong {
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
}
.question-prompt-empty > span {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.question-prompt-history-entry {
  width: min(540px, 100%);
}
@media (max-width: 520px) {
  .question-prompt-bubble.ui-bubble {
    width: 100%;
  }
  .question-prompt-bubble > .ui-bubble-content {
    padding: var(--openbot-space-3);
  }
  .question-prompt-header {
    gap: var(--openbot-space-2);
  }
  .question-prompt-navigation .ui-questionnaire-progress {
    min-width: 42px;
    padding-inline: 0;
  }
  .question-prompt-sending {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}
@media (prefers-reduced-motion: reduce) {
  .question-prompt-stage {
    transition: none;
  }
}
.approval-card {
  display: flex;
  width: min(540px, 100%);
  margin: var(--openbot-space-3) 0 var(--openbot-space-6);
  flex-direction: column;
  gap: var(--openbot-space-4);
  animation: approval-card-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}
.approval-card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--openbot-space-2);
}
.approval-card-footer > :last-child {
  margin-inline-start: auto;
}
.approval-button {
  border-radius: var(--openbot-radius-pill);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-regular);
}
.approval-card-content {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-3);
}
.approval-card-content:empty {
  display: none;
}
.approval-command-block, .approval-detail-row, .approval-permissions {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface);
}
.approval-command-block code {
  display: block;
  overflow-x: auto;
  padding: var(--openbot-space-3);
  color: var(--openbot-text-secondary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-md);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.approval-cwd {
  border-bottom: 1px solid var(--openbot-border);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  color: var(--openbot-text-muted);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  overflow-wrap: anywhere;
}
.approval-detail-row {
  display: grid;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-3);
}
.approval-detail-label {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.approval-detail-row strong {
  color: var(--openbot-text-secondary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  overflow-wrap: anywhere;
}
.approval-permissions {
  display: grid;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-3);
}
.approval-permissions:empty {
  display: none;
}
.approval-permissions span {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  overflow-wrap: anywhere;
}
.approval-reason {
  margin: calc(-1 * var(--openbot-space-2)) 0 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
  overflow-wrap: anywhere;
}
@keyframes approval-card-in {
  from {
    opacity: 0;
    transform: translateY(5px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (max-width: 800px) {
  .direct-private-label {
    display: none;
  }
  .direct-message-list, .direct-composer-wrap {
    padding-right: 14px;
    padding-left: 14px;
  }
  .direct-message > .ui-message-content {
    max-width: 88%;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto;
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
  }
}
.ui-block-card {
  display: flex;
  max-width: 600px;
  flex-direction: column;
  gap: var(--openbot-space-3);
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-surface);
  transition: border-color var(--openbot-duration-slow) var(--openbot-ease-out);
}
.ui-block-card[data-danger] {
  border-color: var(--openbot-danger-border);
}
.ui-block-card[data-status="expired"], .ui-block-card[data-status="closed"] {
  color: var(--openbot-text-muted);
}
.ui-block-header {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--openbot-space-3);
}
.ui-block-heading {
  min-width: 0;
}
.ui-block-title {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-xl);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-xl);
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.ui-block-subtitle {
  margin: var(--openbot-space-0-5) 0 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.ui-block-status[data-slot="badge"] {
  flex: 0 0 auto;
  gap: var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-pill);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.ui-block-status svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.ui-block-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--openbot-space-3);
}
.ui-block-body:empty {
  display: none;
}
.ui-block-outcome {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
  margin: 0;
  padding: var(--openbot-space-2) var(--openbot-space-3);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-glass-surface);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.ui-block-outcome[data-status="answered"] {
  background: var(--openbot-success-soft);
  color: var(--openbot-success-text);
}
.ui-block-outcome svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
}
.ui-block-outcome-text {
  min-width: 0;
  overflow-wrap: anywhere;
}
.ui-block-footer {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.ui-block-error {
  min-width: 0;
  flex: 1 1 auto;
  margin: 0;
  color: var(--openbot-danger-text);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  overflow-wrap: anywhere;
}
.ui-block-skip {
  margin-inline-start: auto;
}
.ui-block-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--openbot-space-2);
}
.ui-block-actions-auto > button:last-of-type {
  margin-inline-start: auto;
}
.ui-block-confirm-step {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.ui-block-confirm-question {
  padding: 0;
  margin-bottom: var(--openbot-space-2);
  font-weight: var(--openbot-weight-medium);
}
.ui-block-hint, .ui-block-counter, .ui-block-sending {
  margin: 0;
  color: var(--openbot-text-dim);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.ui-block-sending {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
}
.ui-block-fields {
  display: grid;
  grid-template-columns: minmax(64px, max-content) minmax(0, 1fr);
  align-items: center;
  gap: var(--openbot-space-2) var(--openbot-space-3);
  margin: 0;
  font-size: var(--openbot-text-lg);
}
.ui-block-fields dt {
  color: var(--openbot-text-muted);
}
.ui-block-fields dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}
.ui-block-preview {
  position: relative;
  max-height: 6.5em;
  overflow: hidden;
  padding: var(--openbot-space-3);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-lg);
}
.ui-block-preview::after {
  position: absolute;
  inset: auto 0 0;
  height: 2.4em;
  background: linear-gradient(transparent, var(--openbot-bg-surface-raised));
  content: "";
  pointer-events: none;
}
.ui-block-preview-text {
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.ui-block-hold {
  position: relative;
  overflow: hidden;
  user-select: none;
  touch-action: none;
}
.ui-block-hold-fill {
  position: absolute;
  inset: 0;
  background: currentColor;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, currentColor 22%, transparent);
  }
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--openbot-duration-fast) var(--openbot-ease-out);
  pointer-events: none;
}
.ui-block-hold[data-holding] .ui-block-hold-fill {
  transform: scaleX(1);
  transition: transform var(--ui-block-hold-duration) linear;
}
.ui-block-hold-label {
  position: relative;
}
.ui-block-options {
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-card);
}
.ui-block-option {
  position: relative;
  display: grid;
  grid-template-columns: var(--openbot-control-xs) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3);
  cursor: pointer;
  transition: background var(--openbot-duration-fast) var(--openbot-ease-out);
}
.ui-block-option + .ui-block-option {
  border-top: 1px solid var(--openbot-border-strong);
}
.ui-block-option:hover {
  background: var(--openbot-hover);
}
.ui-block-option[data-checked] {
  background: var(--openbot-question-option-soft);
}
.ui-block-option[data-disabled] {
  cursor: default;
}
.ui-block-option[data-disabled]:not([data-checked]) {
  opacity: 0.5;
}
.ui-block-option:focus-within {
  outline: 2px solid var(--openbot-border-focus);
  outline-offset: -2px;
}
.ui-block-option .ui-block-option-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: inherit;
}
.ui-block-option-key {
  display: grid;
  width: var(--openbot-control-xs);
  height: var(--openbot-control-xs);
  place-items: center;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-muted);
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
}
.ui-block-option[data-checked] .ui-block-option-key {
  border-color: var(--openbot-question-option);
  background: var(--openbot-question-option);
  color: var(--openbot-text-on-light);
}
.ui-block-option-label {
  min-width: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-medium);
  overflow-wrap: anywhere;
}
.ui-block-option-meta {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-variant-numeric: tabular-nums;
}
.ui-block-quick {
  display: flex;
  max-width: 600px;
  flex-direction: column;
  gap: var(--openbot-space-2);
}
.ui-block-quick-title {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
}
.ui-block-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-2);
}
.ui-block-chip[data-faded] {
  opacity: 0.35;
}
.ui-block-chip[data-chosen] {
  border-color: var(--openbot-accent);
  background: var(--openbot-accent-soft);
  color: var(--openbot-text-primary);
  opacity: 1;
}
.ui-block-quick-text {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.ui-block-quick-text > :first-child {
  flex: 1 1 auto;
  min-width: 0;
}
.ui-block-form-fields {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--openbot-space-3);
}
.ui-block-field {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1-5);
}
.ui-block-field-label {
  padding: 0;
  margin-bottom: var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
}
.ui-block-required {
  margin-inline-start: var(--openbot-space-0-5);
  color: var(--openbot-danger-text);
}
.ui-block-field-error {
  margin: 0;
  color: var(--openbot-danger-text);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.ui-block-segmented {
  display: flex;
  gap: var(--openbot-space-0-5);
  padding: var(--openbot-space-0-5);
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface-raised);
}
.ui-block-segment {
  flex: 1 1 0;
  min-width: 0;
  color: var(--openbot-text-muted);
}
.ui-block-segment[aria-pressed="true"] {
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
}
@media (prefers-reduced-motion: reduce) {
  .ui-block-card, .ui-block-option, .ui-block-hold-fill {
    transition: none;
  }
}
.settings-panel, .browser-panel, .remote-desktop-workspace {
  background: var(--openbot-bg-canvas);
}
.composer-reply-preview {
  border-color: var(--openbot-border);
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-primary);
}
.message-reaction-pill {
  border-color: var(--openbot-border);
  background: transparent;
  color: var(--openbot-text-primary);
}
@media (hover: hover) and (pointer: fine) {
  .message-reaction-pill:not(.message-reaction-pill-readonly):hover {
    background: var(--openbot-hover);
  }
}
.composer, .direct-composer {
  background: var(--openbot-bg-surface);
}
.direct-composer > button:hover:not(:disabled) {
  background: var(--openbot-accent-hover);
}
.remote-desktop-stage, .remote-desktop-viewer {
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-secondary);
}
.remote-desktop-header {
  background: var(--openbot-bg-sidebar);
}
.voice-button:active, .voice-button-active:active {
  transform: scale(0.97);
}
.provider-model-search {
  height: var(--openbot-control-md);
  flex-shrink: 0;
  margin-bottom: var(--ui-menu-padding);
  border-color: transparent;
  border-radius: var(--ui-menu-item-radius);
  background: var(--ui-menu-item-hover);
  padding-inline: var(--ui-menu-inset);
  font-size: var(--openbot-text-md);
}
.provider-model-search:focus-visible {
  border-color: var(--ui-menu-edge);
}
.provider-model-scroll {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.provider-model-group {
  padding: var(--openbot-space-2) var(--ui-menu-inset) var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: 500;
}
.browser-preview-sidebar[hidden] {
  display: none;
}
.browser-preview-header {
  display: flex;
  height: var(--left-header-height, 38px);
  flex: 0 0 auto;
  align-items: center;
  gap: var(--openbot-space-1);
  padding: 0 var(--openbot-space-3);
  color: var(--openbot-text-secondary);
}
.browser-preview-header > span {
  flex: 1;
  font-size: var(--openbot-text-sm);
}
.browser-preview-header > .ui-button, .browser-preview-close {
  border-radius: var(--openbot-radius-sm);
}
.browser-preview-header > .ui-button:focus-visible, .browser-preview-close:focus-visible {
  outline: 1px solid var(--openbot-text-muted);
  outline-offset: 1px;
  box-shadow: none;
}
.browser-preview-sidebar .ui-button:active:not(:disabled):not([data-disabled]) {
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
}
.browser-preview-header > .ui-button > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.browser-preview-list {
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding: var(--openbot-space-2) var(--openbot-space-4) var(--openbot-space-4);
}
.browser-preview-list > .browser-empty-state {
  height: auto;
  justify-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-8) var(--openbot-space-4);
}
.browser-preview-list > .browser-empty-state > svg, .browser-preview-image > svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  color: var(--openbot-text-muted);
  stroke-width: var(--openbot-icon-stroke);
}
.browser-preview-list > .browser-empty-state > svg {
  margin-bottom: var(--openbot-space-1);
}
.browser-preview-list > .browser-empty-state > strong {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  font-weight: 500;
}
.browser-preview-list > .browser-empty-state > .ui-button {
  margin-top: var(--openbot-space-1);
}
.browser-preview-card {
  position: relative;
  margin-bottom: var(--openbot-space-4);
}
.browser-preview-open {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-1);
  color: var(--openbot-text-secondary);
  font-weight: 400;
}
.browser-preview-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-surface);
}
.browser-preview-image img, .browser-preview-loading {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.browser-preview-title {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--openbot-text-sm);
}
.browser-preview-open-label {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  line-height: 1;
  pointer-events: none;
  opacity: 0;
}
.browser-preview-open-label > svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  stroke-width: var(--openbot-icon-stroke);
}
.browser-preview-open:hover .browser-preview-open-label {
  opacity: 1;
}
.browser-preview-close {
  position: absolute;
  top: var(--openbot-space-2);
  right: var(--openbot-space-2);
  opacity: 0;
}
.browser-preview-close > svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  stroke-width: var(--openbot-icon-stroke);
}
.browser-preview-card:hover .browser-preview-close, .browser-preview-card:focus-within .browser-preview-close {
  opacity: 1;
}
.browser-secret-card {
  --otp-slot-border: var(--openbot-glass-border);
  --otp-slot-background: var(--openbot-glass-surface);
  --otp-slot-filled-background: var(--openbot-glass-surface-hover);
  --otp-slot-shadow: inset 0 1px 0 var(--openbot-glass-highlight);
  display: grid;
  gap: var(--openbot-space-4);
  color: var(--openbot-text-primary);
}
.browser-secret-card[data-variant="island"] {
  box-sizing: border-box;
  width: min(100%, 420px);
  min-width: 0;
  padding: var(--openbot-space-4);
  border: 1px solid var(--openbot-glass-border);
  border-radius: var(--openbot-radius-xl);
  background: var(--openbot-bg-glass);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-bg-glass), var(--openbot-bg-control) 60%);
  }
  box-shadow: var(--openbot-shadow-raised);
  backdrop-filter: blur(32px) saturate(1.4);
}
.browser-secret-header {
  display: flex;
  align-items: flex-start;
  gap: var(--openbot-space-3);
}
.browser-secret-close {
  flex: none;
  margin-left: auto;
}
.browser-secret-icon {
  display: grid;
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  flex: none;
  place-items: center;
  border: 1px solid var(--openbot-glass-border);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-glass-surface);
  box-shadow: inset 0 1px 0 var(--openbot-glass-highlight);
  color: var(--openbot-text-primary);
}
.browser-secret-glyph {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.browser-secret-heading {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-0-5);
}
.browser-secret-heading h2 {
  margin: 0;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
}
.browser-secret-heading p {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.browser-secret-origin {
  color: var(--openbot-text-secondary);
  font-weight: var(--openbot-weight-medium);
}
.browser-secret-code, .browser-secret-password {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-1-5);
}
:where(.browser-secret-password) > input {
  border-color: var(--openbot-glass-border);
  background: var(--openbot-glass-surface);
}
.browser-secret-error {
  margin: 0;
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
}
.browser-secret-footer {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
  padding-top: var(--openbot-space-3);
  border-top: 1px solid var(--openbot-glass-border);
}
.browser-secret-private {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.browser-secret-glyph-sm {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: none;
}
.browser-secret-card .browser-takeover-preview-viewport {
  width: 100%;
  max-height: 280px;
}
.browser-secret-card .browser-takeover-preview-viewport img {
  min-height: 0;
  object-fit: contain;
}
html:has(.browser-dock-surface), body:has(.browser-dock-surface), #root:has(.browser-dock-surface) {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
}
.browser-dock-surface {
  position: relative;
  width: 100%;
  height: 100%;
  background: transparent;
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
}
.browser-dock {
  position: absolute;
  bottom: var(--openbot-space-4);
  left: 50%;
  display: flex;
  width: min(640px, calc(100% - 2 * var(--openbot-space-6)));
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-2);
  isolation: isolate;
  translate: -50% 0;
}
.browser-dock-glass {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-0-5);
  border: 1px solid var(--openbot-glass-border);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-glass);
  box-shadow: var(--openbot-shadow-raised);
  backdrop-filter: blur(16px);
  color: var(--openbot-text-secondary);
}
.browser-dock-composer svg, .browser-dock-island-activity svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.browser-dock-island {
  position: relative;
  z-index: 4;
  box-sizing: border-box;
  max-width: 100%;
}
.browser-dock-island[data-budding] {
  z-index: 1;
}
.browser-dock-island:is([data-mode="reply"], [data-mode="secret"]) {
  width: 100%;
  border-radius: var(--openbot-radius-lg);
}
.browser-dock-island[data-mode="secret"] {
  width: min(100%, 420px);
  border-radius: var(--openbot-radius-xl);
  background: var(--openbot-bg-glass);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-bg-glass), var(--openbot-bg-control) 60%);
  }
  backdrop-filter: blur(32px) saturate(1.4);
}
.browser-dock-island-face {
  box-sizing: border-box;
  min-width: 0;
  flex: 1;
}
.browser-dock-island-face > .browser-secret-card {
  width: 100%;
  border: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
}
.browser-dock-island-activity {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  padding: var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-2);
  font-size: var(--openbot-text-sm);
  white-space: nowrap;
}
.browser-dock-island-leaving {
  pointer-events: none;
}
.browser-dock-island.browser-dock-island-ghost {
  position: absolute;
  z-index: 1;
  translate: -50% 0;
  pointer-events: none;
}
.browser-dock-spin {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: none;
  color: var(--openbot-text-muted);
  animation: ui-spin 1s linear infinite;
}
.browser-dock-status {
  display: inline-flex;
  min-width: 0;
  overflow: hidden;
  align-items: center;
  gap: var(--openbot-space-1-5);
}
.browser-dock-status > span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.browser-dock-handoff {
  flex: none;
  margin-left: auto;
  border-radius: var(--openbot-radius-pill);
}
.browser-dock-island-reply {
  display: grid;
  gap: var(--openbot-space-1-5);
  padding: var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-3) var(--openbot-space-3);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
}
.browser-dock-reply-header {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.browser-dock-reply-header > strong {
  font-weight: var(--openbot-weight-medium);
}
.browser-dock-reply-close {
  margin-left: auto;
}
.browser-dock-reply-body {
  max-height: 160px;
  padding-right: var(--openbot-space-1);
  overflow: auto;
  line-height: var(--openbot-leading-lg);
}
.browser-dock-reply-actions {
  display: flex;
  justify-content: flex-end;
}
.browser-dock-stack {
  display: flex;
  width: 100%;
  flex-direction: column;
}
.agent-queue-panel[data-variant="floating"] {
  margin-inline: var(--openbot-space-6);
  border-color: var(--openbot-glass-border);
  background: var(--openbot-bg-glass);
  backdrop-filter: blur(16px);
  animation: none;
}
.browser-dock-stack > .agent-queue-slot {
  transition-duration: var(--browser-dock-island-duration);
  transition-timing-function: var(--browser-dock-island-easing);
}
.browser-dock-composer {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-2);
}
.browser-dock-avatar {
  width: 20px;
  height: 20px;
  flex: none;
}
.browser-dock-editor {
  min-width: 0;
  flex: 1;
  color: var(--openbot-text-primary);
}
.agent-queue-panel[data-variant="floating"] .agent-queue-item[data-arriving] .agent-queue-message {
  visibility: hidden;
}
.browser-dock-morph {
  position: absolute;
  z-index: 1;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid var(--openbot-glass-border);
  background: var(--openbot-bg-glass);
  box-shadow: var(--openbot-shadow-raised);
  backdrop-filter: blur(16px);
  pointer-events: none;
}
.browser-dock-morph > .browser-dock-glass {
  position: absolute;
  top: 50%;
  left: 50%;
  border-color: transparent;
  animation: none;
  background: none;
  backdrop-filter: none;
  box-shadow: none;
  translate: -50% -50%;
}
.browser-dock-morph-text {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  overflow: hidden;
  color: var(--openbot-text-primary);
  pointer-events: none;
  text-overflow: ellipsis;
  transform-origin: left center;
  white-space: nowrap;
  will-change: transform, opacity;
}
.agent-queue-panel[data-variant="floating"] .agent-queue-actions {
  gap: var(--openbot-space-1);
}
.agent-queue-panel[data-variant="floating"] :is(.agent-queue-steer, .agent-queue-icon-button) {
  box-sizing: border-box;
  height: 24px;
  border: 1px solid var(--openbot-glass-border);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-glass-surface);
  box-shadow: inset 0 1px 0 var(--openbot-glass-highlight);
  backdrop-filter: blur(8px);
  color: var(--openbot-text-secondary);
  transition: background var(--openbot-duration-hover) ease, border-color var(--openbot-duration-hover) ease, box-shadow var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease, opacity var(--openbot-duration-hover) ease;
}
.agent-queue-panel[data-variant="floating"] .agent-queue-steer {
  padding: 0 var(--openbot-space-2) 0 var(--openbot-space-1-5);
  font-size: var(--openbot-text-sm);
}
.agent-queue-panel[data-variant="floating"] .agent-queue-icon-button {
  width: 24px;
}
.agent-queue-panel[data-variant="floating"] :is(.agent-queue-steer, .agent-queue-icon-button) svg {
  width: 14px;
  height: 14px;
}
.agent-queue-panel[data-variant="floating"] :is(.agent-queue-steer, .agent-queue-icon-button):is(:hover:not(:disabled), :focus-visible) {
  background: var(--openbot-glass-surface-hover);
  color: var(--openbot-text-primary);
}
.agent-queue-panel[data-variant="floating"] .agent-queue-icon-button.agent-queue-delete:is(:hover:not(:disabled), :focus-visible) {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
}
.agent-queue-panel[data-variant="floating"] :is(.agent-queue-steer, .agent-queue-icon-button):focus-visible {
  box-shadow: inset 0 1px 0 var(--openbot-glass-highlight), 0 0 0 2px var(--openbot-border-focus);
}
@media (hover: hover) {
  .agent-queue-panel[data-variant="floating"] .agent-queue-item:not(:hover, :focus-within) :is(.agent-queue-steer, .agent-queue-icon-button):not(:focus-visible) {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    color: var(--openbot-text-muted);
  }
}
@media (prefers-reduced-motion: reduce) {
  .browser-dock-stack > .agent-queue-slot {
    transition: none;
  }
}
body:has(.browser-full-view) .app-frame {
  isolation: isolate;
}
.browser-expanded-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--openbot-layer-dropdown) - 2);
}
.browser-full-view {
  --browser-full-edge: var(--openbot-space-1);
  --browser-full-top-height: 38px;
  position: fixed;
  z-index: calc(var(--openbot-layer-dropdown) - 1);
  inset: 0;
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  padding: 0 var(--browser-full-edge) var(--browser-full-edge);
  background: var(--openbot-bg-canvas);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-bg-canvas) 50%, var(--openbot-bg-notch));
  }
  color: var(--openbot-text-primary);
}
.browser-full-view[hidden], .browser-expanded-backdrop[hidden] {
  display: none;
}
.browser-full-top {
  display: flex;
  height: var(--browser-full-top-height);
  min-width: 0;
  flex: none;
  align-items: center;
  gap: var(--openbot-space-1);
  padding-inline: var(--openbot-space-1) 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.browser-full-top svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.browser-full-top-spacer {
  flex: 1;
}
.browser-full-view-mac-controls .browser-full-top {
  padding-inline-start: calc(82px - var(--browser-full-edge));
}
.browser-full-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-canvas);
}
.browser-full-browser {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}
.browser-full-alert {
  margin: var(--openbot-space-2) var(--openbot-space-2) 0;
}
.browser-full-surface {
  position: relative;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}
.browser-full-surface[data-live] {
  display: grid;
  place-items: center;
  container-type: size;
}
.browser-full-surface[data-live] .browser-live-view {
  position: relative;
  inset: auto;
  width: min( calc(100cqw - 2 * var(--openbot-space-3)), calc((100cqh - 2 * var(--openbot-space-3)) * var(--browser-frame-width, 16) / var(--browser-frame-height, 10)) );
  height: auto;
  aspect-ratio: var(--browser-frame-width, 16) / var(--browser-frame-height, 10);
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface);
}
.browser-full-owner-avatar {
  width: 16px;
  height: 16px;
  flex: none;
}
.browser-full-owner-acting {
  border-radius: var(--openbot-radius-pill);
  box-shadow: 0 0 0 1.5px var(--openbot-accent);
}
.browser-full-owner-globe {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: none;
  color: var(--openbot-text-muted);
}
.browser-full-chips {
  --browser-full-fade: calc(var(--openbot-space-8) * 2);
  position: relative;
  min-width: 0;
  flex: 0 1 auto;
  overflow-x: auto;
  padding: var(--openbot-space-0-5);
  scrollbar-width: none;
}
.browser-full-chips[data-fade-start] {
  mask-image: linear-gradient(to right, transparent, var(--openbot-text-primary) var(--browser-full-fade));
}
.browser-full-chips[data-fade-end] {
  mask-image: linear-gradient(to right, var(--openbot-text-primary) calc(100% - var(--browser-full-fade)), transparent);
}
.browser-full-chips[data-fade-start][data-fade-end] {
  mask-image: linear-gradient( to right, transparent, var(--openbot-text-primary) var(--browser-full-fade), var(--openbot-text-primary) calc(100% - var(--browser-full-fade)), transparent );
}
.browser-full-chip {
  min-width: 120px;
  max-width: 200px;
  flex: 0 1 200px;
  user-select: none;
  transition: flex-basis var(--openbot-duration-normal) var(--openbot-ease-out);
}
.browser-full-chips[data-frozen] .browser-full-chip {
  flex: 0 0 var(--browser-full-chip-frozen);
}
.browser-full-chips[data-dragging] {
  cursor: grabbing;
}
.browser-full-chips[data-dragging] .browser-full-chip {
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.browser-full-chips[data-dragging] .browser-full-chip[data-dragging] {
  z-index: 1;
  background: var(--openbot-bg-surface-raised);
  box-shadow: inset 0 0 0 1px var(--openbot-border-strong), var(--openbot-shadow-raised);
  transition: none;
}
.browser-full-chips[data-dragging] .browser-full-chip::before {
  opacity: 0;
}
.browser-full-hidden-tabs {
  max-width: 320px;
}
@media (prefers-reduced-motion: reduce) {
  .browser-full-chip, .browser-full-chips[data-dragging] .browser-full-chip {
    transition: none;
  }
}
.browser-full-spin {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: none;
  color: var(--openbot-text-muted);
  animation: ui-spin 1s linear infinite;
}
.browser-full-chip .side-panel-tab-select {
  min-width: 0;
  flex: 1;
  justify-content: flex-start;
}
.browser-full-chip .side-panel-tab-label {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-align: start;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser-full-address-row {
  display: flex;
  height: 44px;
  flex: none;
  align-items: center;
  gap: var(--openbot-space-0-5);
  padding-inline: var(--openbot-space-2);
  border-bottom: 1px solid var(--openbot-border);
  color: var(--openbot-text-secondary);
}
.browser-full-address-row svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.browser-full-capsule {
  position: relative;
  display: flex;
  min-width: 0;
  height: var(--openbot-control-md);
  flex: 1;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-inline: var(--openbot-space-1);
  padding-inline: var(--openbot-space-2) var(--openbot-space-1);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  transition: background-color var(--openbot-duration-normal) var(--openbot-ease-out), box-shadow var(--openbot-duration-normal) var(--openbot-ease-out);
}
.browser-full-capsule:focus-within {
  background: var(--openbot-bg-control-active);
  box-shadow: inset 0 0 0 1px var(--openbot-border-grouped);
}
.browser-full-capsule .browser-full-capsule-input {
  height: 100%;
  min-width: 0;
  flex: 1;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
}
.browser-full-capsule .browser-full-capsule-input:focus-visible {
  outline: none;
}
.browser-full-capsule .browser-full-capsule-input::selection {
  background: var(--openbot-accent-strong);
}
.browser-full-capsule-agent {
  display: grid;
  flex: none;
  place-items: center;
}
.browser-full-suggest {
  position: absolute;
  z-index: var(--openbot-layer-dropdown);
  top: calc(100% + var(--openbot-space-1));
  right: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  padding: var(--openbot-space-1);
  border-radius: var(--openbot-radius-lg);
}
.browser-full-suggest-row {
  display: flex;
  width: 100%;
  min-width: 0;
  height: var(--openbot-control-md);
  align-items: center;
  gap: var(--openbot-space-2);
  padding-inline: var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  text-align: start;
  cursor: default;
}
.browser-full-suggest-row:hover {
  background: var(--openbot-bg-control-hover);
}
.browser-full-suggest-row[aria-selected="true"] {
  background: var(--openbot-bg-control-active);
}
.browser-full-suggest-icon {
  display: grid;
  width: var(--openbot-icon-sm);
  flex: none;
  place-items: center;
  color: var(--openbot-text-muted);
}
.browser-full-suggest-title {
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser-full-suggest-detail {
  min-width: 0;
  flex: 0 100 auto;
  overflow: hidden;
  color: var(--openbot-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser-full-suggest-switch {
  flex: none;
  margin-inline-start: auto;
  padding: 0 var(--openbot-space-2);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-pill);
  color: var(--openbot-text-muted);
}
.browser-full-switch {
  min-width: 0;
  max-width: 100%;
  justify-content: flex-start;
  gap: var(--openbot-space-2);
}
.browser-full-switch-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser-full-switch-count {
  display: grid;
  min-width: 18px;
  height: 18px;
  flex: none;
  place-items: center;
  padding-inline: var(--openbot-space-1);
  border: 1.5px solid currentcolor;
  border-radius: var(--openbot-radius-sm);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.browser-full-switch-menu {
  display: flex;
  width: min(360px, calc(100vw - 2 * var(--openbot-space-3)));
  max-height: min(480px, 70dvh);
  flex-direction: column;
  padding: var(--openbot-space-1);
}
.browser-full-switch-list {
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}
.browser-full-switch-row {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-0-5);
}
.browser-full-switch-select {
  min-width: 0;
  height: auto;
  flex: 1;
  padding-block: var(--openbot-space-1-5);
}
.browser-full-switch-select[aria-current="true"] {
  background: var(--openbot-bg-control-active);
}
.browser-full-switch-close svg, .browser-full-switch-actions svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.browser-full-switch-text {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.browser-full-switch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-1);
  margin-top: var(--openbot-space-1);
  padding-top: var(--openbot-space-1);
  border-top: 1px solid var(--openbot-border);
}
@media (max-width: 720px) {
  .browser-full-surface[data-live] {
    place-items: start center;
    padding-top: var(--openbot-space-3);
  }
}
.channel-avatar {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  min-width: var(--openbot-space-8);
  height: var(--openbot-space-8);
  color: var(--openbot-text-muted);
}
.channel-avatar .agent-avatar {
  width: var(--openbot-space-8);
  height: var(--openbot-space-8);
  flex-shrink: 0;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface);
}
.channel-avatar:not(.channel-avatar-cluster) .agent-avatar + .agent-avatar {
  margin-left: calc(-1 * var(--openbot-space-4));
}
.channel-avatar-cluster {
  --channel-avatar-size: 36px;
  --channel-avatar-pitch: calc(var(--channel-avatar-size) * 0.44);
  --channel-avatar-face: calc(var(--channel-avatar-size) * 0.48);
  display: grid;
  grid-template: repeat(2, var(--channel-avatar-pitch)) / repeat(2, var(--channel-avatar-pitch));
  place-content: center;
  place-items: center;
  width: var(--channel-avatar-size);
  min-width: var(--channel-avatar-size);
  height: var(--channel-avatar-size);
}
.channel-avatar-cluster .agent-avatar {
  --agent-avatar-optical-offset: calc(var(--channel-avatar-face) * -0.14);
  width: var(--channel-avatar-face);
  height: var(--channel-avatar-face);
  background: none;
}
.channel-avatar-cluster > :only-child {
  --channel-avatar-face: var(--channel-avatar-size);
  grid-area: 1 / 1 / 3 / 3;
}
.channel-avatar-cluster > :first-child:nth-last-child(2), .channel-avatar-cluster > :first-child:nth-last-child(2) ~ * {
  grid-row: 1 / span 2;
}
.channel-avatar-cluster > :first-child:nth-last-child(3) ~ .agent-avatar:last-child {
  grid-column: 1 / span 2;
}
.agent-row.sidebar-pinned-row .channel-avatar-cluster {
  --channel-avatar-size: 48px;
}
.agent-row.sidebar-pinned-row .channel-avatar-cluster .agent-avatar {
  width: var(--channel-avatar-face);
  height: var(--channel-avatar-face);
}
.channel-avatar-count {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: 1;
  font-weight: var(--openbot-weight-semibold);
  font-variant-numeric: tabular-nums;
}
.channel-dialog-header, .channel-editor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.channel-dialog-header h2 {
  margin: 0;
  font-size: var(--openbot-text-xl);
  line-height: var(--openbot-leading-xl);
  font-weight: var(--openbot-weight-semibold);
}
.channel-empty {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-muted);
}
.channel-empty h2 {
  font-size: var(--openbot-text-2xl);
  color: var(--openbot-text-primary);
  margin: var(--openbot-space-2) 0 0;
}
.channel-empty p {
  margin: 0;
}
.channel-empty .channel-empty-title {
  color: var(--openbot-text-primary);
}
.channel-editor {
  display: block;
}
.channel-create-form {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-3);
}
.channel-members {
  display: flex;
  margin-top: var(--settings-panel-section-gap);
  flex-direction: column;
  gap: var(--openbot-space-1);
  min-width: 0;
}
.channel-members-title, .channel-members-note {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.channel-members-title {
  font-weight: var(--openbot-weight-regular);
}
.channel-member-list:is(.ui-item-group) {
  border: 0;
  overflow: visible;
  background: transparent;
}
.channel-member-list > :not(:first-child) {
  border-top: 0;
}
.channel-member:is(.ui-item), .channel-member-add {
  min-height: var(--openbot-control-lg);
  gap: var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
  padding-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-2);
}
.channel-member:hover, .channel-member-add:hover:not(:disabled) {
  background: var(--openbot-hover);
}
.channel-member .agent-avatar, .channel-member-menu .agent-avatar {
  --agent-avatar-optical-offset: -3.25px;
  width: var(--openbot-space-6);
  height: var(--openbot-space-6);
}
.channel-member .ui-item-title {
  font-weight: var(--openbot-weight-regular);
}
.channel-member-add {
  width: 100%;
  justify-content: flex-start;
  height: auto;
  line-height: var(--openbot-leading-md);
  text-align: left;
  cursor: pointer;
}
.channel-member-add > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  margin-inline: calc((var(--openbot-space-6) - var(--openbot-icon-md)) / 2);
}
.channel-member-add:disabled {
  cursor: default;
  opacity: 0.42;
}
.channel-member-menu {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  min-width: 220px;
  max-height: min( calc(var(--openbot-space-8) * 11), calc(100dvh - var(--openbot-space-4)), var(--kb-popper-content-available-height, 100dvh) );
  margin-inline-start: calc(var(--openbot-space-1) * -1);
}
.channel-member-menu .channel-member-search {
  flex: none;
}
.channel-member-menu .channel-member-search input::-webkit-search-cancel-button {
  display: none;
}
.channel-member-options {
  min-height: 0;
  overflow-y: auto;
  outline: 0;
  scrollbar-width: thin;
}
.channel-member-option {
  display: flex;
  min-height: var(--openbot-control-md);
  align-items: center;
  gap: var(--openbot-space-2);
  border-radius: var(--ui-menu-item-radius);
  outline: 0;
  padding: var(--openbot-space-1-5) var(--ui-menu-inset);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
  white-space: nowrap;
  cursor: default;
  transition: background-color var(--openbot-duration-hover) var(--openbot-ease-out);
}
.channel-member-option:is(:hover, :focus-visible) {
  background: var(--ui-menu-item-hover);
}
.channel-member-options:has(:focus-visible) .channel-member-option:hover:not(:focus-visible) {
  background: transparent;
}
.channel-member-menu-empty {
  margin: 0;
  padding: var(--openbot-space-3) var(--ui-menu-inset);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
@media (hover: hover) and (pointer: fine) {
  .channel-member-remove, .channel-lead-toggle[aria-pressed="false"] {
    opacity: 0;
    transition: opacity var(--openbot-duration-hover) var(--openbot-ease-out);
  }
  .channel-member:hover :is(.channel-member-remove, .channel-lead-toggle), :is(.channel-member-remove, .channel-lead-toggle):focus-visible {
    opacity: 1;
  }
}
.channel-picker {
  border: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.channel-picker legend {
  margin-bottom: var(--openbot-space-2);
}
.channel-picker-list {
  margin-top: var(--openbot-space-2);
  max-height: calc(var(--openbot-space-8) * 7);
  overflow: auto;
  scrollbar-width: none;
}
.channel-picker-list::-webkit-scrollbar {
  display: none;
}
.channel-picker-entry {
  padding: var(--openbot-space-2) 0;
  cursor: pointer;
}
.channel-editor-footer {
  padding-top: var(--openbot-space-3);
  border-top: 1px solid var(--openbot-border);
}
.channel-search-icon {
  width: var(--openbot-space-4);
  height: var(--openbot-space-4);
  color: var(--openbot-text-muted);
  flex-shrink: 0;
}
.channel-picker-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-6) var(--openbot-space-3);
  text-align: center;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.channel-picker-empty > svg {
  width: var(--openbot-space-6);
  height: var(--openbot-space-6);
  margin-bottom: var(--openbot-space-1);
}
.channel-picker-empty p {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
}
.channel-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--openbot-layer-dialog);
  display: grid;
  place-items: center;
  padding: var(--openbot-space-6);
}
.channel-create-dialog {
  --channel-dialog-inset: var(--openbot-space-4);
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(440px, 100%);
  max-height: calc(100dvh - 48px);
  overflow: hidden;
  outline: 0;
  background: var(--openbot-bg-surface);
}
.channel-create-dialog .channel-dialog-header {
  padding: var(--channel-dialog-inset);
}
.channel-create-dialog .channel-dialog-header .ui-button svg {
  width: var(--openbot-space-4);
  height: var(--openbot-space-4);
}
.channel-create-form {
  min-height: 0;
  gap: var(--openbot-space-4);
}
.channel-create-form > .ui-field, .channel-create-form > .ui-alert {
  margin-inline: var(--channel-dialog-inset);
}
.channel-create-form .channel-picker {
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: 0;
}
.channel-create-form .channel-picker legend {
  margin-inline: var(--channel-dialog-inset);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
}
.channel-create-form .channel-member-search {
  height: var(--openbot-control-lg);
  margin-inline: var(--channel-dialog-inset);
  padding-inline: var(--openbot-space-3);
  gap: var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
}
.channel-create-form .channel-member-search input::-webkit-search-cancel-button {
  display: none;
}
.channel-create-form .channel-picker-list {
  min-height: 0;
  max-height: calc(var(--openbot-space-8) * 11);
  margin-top: var(--openbot-space-2);
  padding: 0;
}
.channel-create-form .channel-picker-body {
  display: flex;
  flex-direction: column;
}
.channel-create-form .channel-picker-entry {
  display: block;
  padding: var(--openbot-space-2) var(--channel-dialog-inset);
  border-radius: 0;
  transition: background-color var(--openbot-duration-normal) var(--openbot-ease-out);
}
.channel-create-form .channel-picker-entry .channel-member:is(.ui-item) {
  min-height: 0;
  padding: 0;
  background: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .channel-create-form .channel-picker-entry {
    transition: none;
  }
}
.channel-create-form .channel-picker-entry:hover {
  background: var(--openbot-bg-control-hover);
}
.channel-create-form .channel-picker-entry:has(.ui-checkbox-input:checked) {
  background: var(--openbot-accent-soft);
}
.channel-create-form .channel-picker-entry .ui-item-content {
  display: flex;
  align-items: baseline;
  gap: var(--openbot-space-2);
  overflow: hidden;
}
.channel-create-form .channel-picker-entry .ui-item-title {
  flex: 0 0 auto;
  font-weight: var(--openbot-weight-regular);
}
.channel-create-form .channel-picker-entry .ui-item-description {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.channel-create-form .channel-editor-footer {
  justify-content: flex-end;
  padding: var(--channel-dialog-inset);
}
.channel-title .channel-avatar {
  min-width: 18px;
  height: 18px;
}
.channel-title .agent-avatar {
  --agent-avatar-optical-offset: -2px;
  width: 18px;
  height: 18px;
}
.channel-title .agent-avatar + .agent-avatar {
  margin-left: -8px;
}
.channel-header-copy {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: var(--openbot-space-2);
}
.channel-header-copy h1 {
  min-width: 0;
  overflow: hidden;
  flex: 0 1 auto;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.channel-header-title {
  min-width: 0;
  overflow: hidden;
  flex: 1 1 auto;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.channel-preview-notice {
  flex-shrink: 0;
  margin: 0;
  padding: var(--openbot-space-4);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-align: center;
}
.agent-activity-content.channel-activity-content {
  padding-left: var(--openbot-space-0-5);
}
.channel-activity-faces {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}
.channel-activity-faces .agent-activity-avatar + .agent-activity-avatar {
  margin-left: calc(-1 * var(--openbot-space-2));
}
.channel-paused-tasks {
  position: relative;
  max-height: 35dvh;
  overflow-y: auto;
  margin: calc(-1 * var(--openbot-space-6)) var(--openbot-space-3) calc(-1 * var(--openbot-radius-lg));
  border-radius: var(--openbot-radius-lg) var(--openbot-radius-lg) var(--openbot-radius-md) var(--openbot-radius-md);
  background: var(--openbot-accent-strong);
  box-shadow: 0 0 0 1px var(--openbot-accent-soft);
  -webkit-backdrop-filter: blur(var(--openbot-space-3));
  backdrop-filter: blur(var(--openbot-space-3));
  padding-bottom: var(--openbot-radius-lg);
  color: var(--openbot-accent-text);
}
.awaiting-replies + .channel-paused-tasks {
  z-index: 10;
  margin-top: 0;
}
.channel-paused-task {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-2);
  align-items: center;
  justify-content: space-between;
  padding: var(--openbot-space-2) var(--openbot-space-3);
}
.channel-paused-task + .channel-paused-task {
  border-top: 1px solid var(--openbot-accent-soft);
}
.channel-paused-task-reason {
  min-width: 0;
  flex: 1 1 24ch;
  margin: 0;
  overflow-wrap: anywhere;
  font-size: var(--openbot-text-sm);
}
.channel-paused-task-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-2);
  align-items: center;
}
.channel-paused-task-actions .ui-button {
  background: var(--openbot-surface-light);
  color: var(--openbot-text-on-light);
}
.channel-paused-task-actions .ui-button:hover {
  background: var(--openbot-surface-light);
  box-shadow: 0 0 0 1px var(--openbot-text-dim-on-light);
}
.diagram-view {
  display: flex;
  height: 100%;
  min-width: 0;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  background: var(--openbot-bg-canvas);
}
.diagram-flows-notice {
  align-items: center;
  justify-content: center;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
}
.diagram-view .agent-avatar {
  grid-template: 100% / 100%;
}
.diagram-view-header {
  display: flex;
  height: 38px;
  flex: none;
  align-items: center;
  gap: var(--openbot-space-1-5);
  border-bottom: 1px solid var(--openbot-border);
  padding: 0 var(--openbot-space-3);
}
.diagram-view .diagram-view-header .header-panel-toggle[aria-expanded="true"]:not(:hover) {
  border-color: transparent;
  background: transparent;
  color: var(--openbot-text-muted);
}
.diagram-view-icon {
  display: grid;
  width: 18px;
  height: 18px;
  flex: none;
  place-items: center;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
}
.diagram-view-avatar.agent-avatar {
  width: 18px;
  height: 18px;
}
.diagram-view-icon svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.diagram-view-title {
  max-width: 32ch;
  flex: none;
  overflow: hidden;
  margin: 0;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-regular);
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diagram-view-actions {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
  margin-left: auto;
}
.diagram-view-body {
  --diagram-inspector-width: 340px;
  position: relative;
  display: flex;
  min-height: 0;
  flex: 1;
  transition: padding-right var(--panel-resize-duration, var(--openbot-duration-overlay)) cubic-bezier(0.22, 1, 0.36, 1);
}
.diagram-view-body[data-inspector="open"] {
  padding-right: var(--diagram-inspector-width);
}
.diagram-view-chat {
  position: absolute;
  bottom: var(--openbot-space-4);
  left: var(--openbot-space-4);
  z-index: 2;
  width: min(360px, calc(100% - var(--openbot-space-8)));
  pointer-events: none;
}
.diagram-board {
  position: relative;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}
.diagram-board-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  outline: 0;
  background-color: var(--openbot-bg-canvas);
  background-image: radial-gradient(circle at 1px 1px, var(--openbot-border-strong) 1px, transparent 0);
  background-position: var(--diagram-grid-x) var(--diagram-grid-y);
  background-size: var(--diagram-grid-size) var(--diagram-grid-size);
  cursor: grab;
  touch-action: none;
}
.diagram-board-viewport:focus-visible {
  box-shadow: inset var(--openbot-focus-ring);
}
.diagram-board-viewport:is([data-panning], [data-dragging]) {
  cursor: grabbing;
}
.diagram-board-world {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
}
.diagram-board-world[data-settling] {
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.diagram-board-empty {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  max-width: 280px;
  gap: var(--openbot-space-1);
  translate: -50% -50%;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  pointer-events: none;
  text-align: center;
}
.diagram-board-empty strong {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
}
.diagram-board-empty p {
  margin: 0;
}
.diagram-board-menu-area {
  display: contents;
}
.diagram-canvas-menu-avatar.agent-avatar {
  width: 20px;
  height: 20px;
  grid-template: 100% / 100%;
}
.ui-action-menu.diagram-canvas-agents:not([data-menu-layout="grid"]) [role="menuitem"] {
  height: auto;
  gap: var(--openbot-space-3);
  padding-block: var(--openbot-space-2);
}
.diagram-canvas-menu-agent {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-0-5);
  line-height: var(--openbot-leading-md);
}
.diagram-canvas-menu-agent small {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diagram-new-agent {
  position: absolute;
  top: clamp(var(--openbot-space-2), var(--diagram-new-agent-y), calc(100% - 196px));
  left: clamp(var(--openbot-space-2), var(--diagram-new-agent-x), calc(100% - 288px));
  z-index: 3;
  display: grid;
  width: 280px;
  gap: var(--openbot-space-2);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-overlay);
  box-shadow: 0 0 0 1px var(--openbot-border), var(--openbot-shadow-overlay);
  backdrop-filter: blur(16px);
  padding: var(--openbot-space-3);
  font-size: var(--openbot-text-sm);
}
.diagram-new-agent-header {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  font-weight: var(--openbot-weight-medium);
  user-select: none;
}
.diagram-new-agent-avatar.agent-avatar {
  width: 24px;
  height: 24px;
  grid-template: 100% / 100%;
}
.diagram-new-agent .provider-model-trigger-field {
  height: var(--openbot-control-sm);
  min-height: var(--openbot-control-sm);
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
  box-shadow: none;
  padding-inline: var(--openbot-space-2);
  font-size: var(--openbot-text-sm);
}
.diagram-new-agent .provider-model-trigger-field:hover:not(:disabled), .diagram-new-agent .provider-model-trigger-field[aria-expanded="true"] {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-control);
}
.diagram-new-agent .provider-model-trigger-field:focus-visible {
  border-color: var(--openbot-border-focus);
  outline: none;
  box-shadow: var(--openbot-focus-ring);
}
.diagram-new-agent-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-1);
}
.diagram-board-zoom {
  position: absolute;
  right: var(--openbot-space-4);
  bottom: var(--openbot-space-4);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1-5);
}
.diagram-board-zoom .ui-button {
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-overlay);
  box-shadow: var(--openbot-shadow-raised);
}
.diagram-board-zoom .ui-button svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  color: var(--openbot-text-muted);
}
.diagram-board-zoom .ui-button:hover svg {
  color: var(--openbot-text-primary);
}
.diagram-board-status {
  position: absolute;
  top: calc(var(--openbot-space-4) + var(--openbot-control-sm) + var(--openbot-space-2));
  left: 50%;
  z-index: 2;
  max-width: min(420px, calc(100% - 320px));
  margin: 0;
  translate: -50% 0;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-overlay);
  box-shadow: 0 0 0 1px var(--openbot-border);
  padding: var(--openbot-space-1-5) var(--openbot-space-3);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  pointer-events: none;
  text-align: center;
}
.diagram-board-status:empty {
  display: none;
}
.diagram-board-status[data-tone="danger"] {
  box-shadow: 0 0 0 1px var(--openbot-danger-border);
  color: var(--openbot-danger-text);
}
.diagram-edges {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: visible;
  pointer-events: none;
}
.diagram-edge path, .diagram-edge-draft {
  fill: none;
}
.diagram-edge-hit {
  stroke: transparent;
  stroke-width: 16px;
  pointer-events: stroke;
  cursor: pointer;
}
.diagram-edge-line {
  stroke: var(--openbot-border-strong);
  stroke-width: 2px;
  stroke-linecap: round;
}
.diagram-edge[data-state="delivered"] .diagram-edge-line {
  stroke: var(--diagram-routine-color, var(--openbot-accent));
}
.diagram-edge[data-state="running"] .diagram-edge-line {
  stroke: var(--diagram-routine-color, var(--openbot-accent));
  stroke-dasharray: 6 6;
  animation: diagram-edge-flow 0.6s linear infinite;
}
.diagram-edge[data-routine-color][data-state="idle"] .diagram-edge-line {
  stroke: var(--diagram-routine-color);
  opacity: 0.6;
}
.diagram-edge:hover .diagram-edge-line, .diagram-edge[data-selected] .diagram-edge-line {
  stroke: var(--openbot-text-primary);
  stroke-width: 3px;
}
.diagram-edge .diagram-edge-arrow {
  fill: var(--openbot-text-muted);
}
.diagram-edge:is([data-state="delivered"], [data-state="running"]) .diagram-edge-arrow {
  fill: var(--diagram-routine-color, var(--openbot-accent));
}
.diagram-edge:hover .diagram-edge-arrow, .diagram-edge[data-selected] .diagram-edge-arrow {
  fill: var(--openbot-text-primary);
}
.diagram-edge[data-state="dimmed"] .diagram-edge-arrow {
  opacity: 0.3;
}
.diagram-edge[data-routine-color][data-state="idle"] .diagram-edge-arrow {
  fill: var(--diagram-routine-color);
  opacity: 0.6;
}
.diagram-edge-draft {
  stroke: var(--openbot-accent);
  stroke-width: 2px;
  stroke-dasharray: 6 6;
}
.diagram-edge-draft[data-target="invalid"] {
  stroke: var(--openbot-danger);
}
.diagram-edge-remove.ui-button {
  position: absolute;
  top: var(--diagram-edge-y);
  left: var(--diagram-edge-x);
  z-index: 1;
  translate: -50% -50%;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface-raised);
  box-shadow: 0 0 0 1px var(--openbot-border-strong);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}
.diagram-edge-remove.ui-button:is([data-selected], :focus-visible) {
  opacity: 1;
  pointer-events: auto;
}
@keyframes diagram-edge-flow {
  to {
    stroke-dashoffset: -12;
  }
}
.diagram-node {
  position: absolute;
  top: var(--diagram-node-y);
  left: var(--diagram-node-x);
  display: flex;
  width: var(--diagram-node-width);
  flex-direction: column;
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-surface-raised);
  box-shadow: 0 0 0 1px var(--openbot-border), var(--openbot-shadow-raised);
  cursor: grab;
  transition: box-shadow var(--openbot-duration-fast) var(--openbot-ease-out), opacity var(--openbot-duration-normal) var(--openbot-ease-out);
  user-select: none;
}
.diagram-node[data-status="running"] {
  box-shadow: 0 0 0 1px var(--openbot-accent), 0 0 0 5px var(--openbot-accent-soft);
}
.diagram-node[data-status="failed"] {
  box-shadow: 0 0 0 1px var(--openbot-danger-border), var(--openbot-shadow-raised);
}
.diagram-node[data-unreachable] {
  box-shadow: 0 0 0 1px var(--openbot-warning);
}
.diagram-node[data-selected] {
  box-shadow: 0 0 0 2px var(--openbot-accent), var(--openbot-shadow-raised);
}
.diagram-node-header {
  display: flex;
  height: 52px;
  align-items: center;
  gap: var(--openbot-space-1);
  border-bottom: 1px solid var(--openbot-border);
  padding: 0 var(--openbot-space-2) 0 var(--openbot-space-1);
}
.diagram-node-select.ui-button {
  height: 44px;
  min-width: 0;
  flex: 1;
  justify-content: flex-start;
  gap: var(--openbot-space-2);
  padding: 0 var(--openbot-space-1-5);
  background: transparent;
  cursor: inherit;
  text-align: left;
}
.diagram-node-avatar.agent-avatar {
  width: 28px;
  height: 28px;
}
.diagram-node-icon {
  display: grid;
  width: 28px;
  height: 28px;
  flex: none;
  place-items: center;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
}
.diagram-node-icon svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.diagram-node-heading {
  display: grid;
  min-width: 0;
}
.diagram-node-kicker {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diagram-node-name {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diagram-node-body {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-2) var(--openbot-space-3) var(--openbot-space-3);
}
.diagram-node-task, .diagram-node-schedule {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.diagram-node-schedule {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
}
.diagram-node-preview {
  display: flex;
  min-height: 64px;
  align-items: flex-start;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.diagram-node-preview[data-empty] {
  align-items: center;
  justify-content: center;
}
.diagram-node-preview p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  white-space: pre-line;
}
.diagram-node[data-status="failed"] .diagram-node-preview {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger-text);
}
.diagram-node-preview-empty {
  color: var(--openbot-text-placeholder);
}
.diagram-node-footer {
  display: flex;
  min-height: 24px;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.diagram-node-status {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.diagram-node-status svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
:is(.diagram-node-status, .diagram-inspector-step-status)[data-status="succeeded"] {
  color: var(--openbot-success-text);
}
:is(.diagram-node-status, .diagram-inspector-step-status)[data-status="failed"] {
  color: var(--openbot-danger-text);
}
:is(.diagram-node-status, .diagram-inspector-step-status)[data-status="running"] {
  color: var(--openbot-accent-text);
}
.diagram-node-status[data-status="unreachable"] {
  color: var(--openbot-warning-text);
}
.diagram-node-duration {
  color: var(--openbot-text-muted);
}
.diagram-node-duration::before {
  content: "·";
  margin-right: var(--openbot-space-1);
}
.diagram-node-remove.ui-button, .diagram-node-run.ui-button {
  flex: none;
  margin-inline-start: auto;
}
.diagram-node-run.ui-button svg, .diagram-view-actions .ui-button-size-xs svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.diagram-port.ui-button {
  position: absolute;
  top: 19px;
  z-index: 1;
  width: 14px;
  min-width: 14px;
  height: 14px;
  border: 2px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface-raised);
  padding: 0;
  cursor: crosshair;
  transition: scale var(--openbot-duration-fast) var(--openbot-ease-out), border-color var(--openbot-duration-fast) var(--openbot-ease-out), background-color var(--openbot-duration-fast) var(--openbot-ease-out);
}
.diagram-port.ui-button::before {
  position: absolute;
  inset: -8px;
  content: "";
}
.diagram-port-in.ui-button {
  left: -7px;
}
.diagram-port-out.ui-button {
  right: -7px;
}
.diagram-port.ui-button:hover, .diagram-port-out.ui-button[data-connecting], .diagram-port-in.ui-button[data-target="valid"] {
  scale: 1.25;
  border-color: var(--openbot-accent);
  background: var(--openbot-accent-soft);
}
.diagram-port-out.ui-button[data-connecting] {
  background: var(--openbot-accent);
}
.diagram-port-in.ui-button[data-target="invalid"] {
  border-color: var(--openbot-danger);
  opacity: 0.5;
}
.diagram-port.ui-button:disabled {
  opacity: 1;
  cursor: default;
}
[data-routine-color="0"] {
  --diagram-routine-color: var(--openbot-file-blue);
  --diagram-routine-soft: var(--openbot-file-blue-soft);
}
[data-routine-color="1"] {
  --diagram-routine-color: var(--openbot-file-green);
  --diagram-routine-soft: var(--openbot-file-green-soft);
}
[data-routine-color="2"] {
  --diagram-routine-color: var(--openbot-file-orange);
  --diagram-routine-soft: var(--openbot-file-orange-soft);
}
[data-routine-color="3"] {
  --diagram-routine-color: var(--openbot-file-pink);
  --diagram-routine-soft: var(--openbot-file-pink-soft);
}
[data-routine-color="4"] {
  --diagram-routine-color: var(--openbot-file-teal);
  --diagram-routine-soft: var(--openbot-file-teal-soft);
}
[data-routine-color="5"] {
  --diagram-routine-color: var(--openbot-file-yellow);
  --diagram-routine-soft: var(--openbot-file-yellow-soft);
}
.diagram-node[data-dimmed] {
  opacity: 0.4;
}
.diagram-node[data-dimmed]:is(:hover, :focus-within) {
  opacity: 0.8;
}
.diagram-edge[data-state="dimmed"] .diagram-edge-line {
  opacity: 0.3;
}
.diagram-node-routines {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.diagram-routine-chip.ui-button {
  height: 22px;
  gap: var(--openbot-space-1);
  border-radius: var(--openbot-radius-pill);
  background: var(--diagram-routine-soft);
  padding: 0 var(--openbot-space-2);
  color: var(--diagram-routine-color);
  font-size: var(--openbot-text-sm);
}
.diagram-routine-chip.ui-button[aria-pressed="true"] {
  box-shadow: inset 0 0 0 1px var(--diagram-routine-color);
}
.diagram-routine-chip.ui-button svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.diagram-routine-chip-name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diagram-routine-webhook {
  display: grid;
  gap: var(--openbot-space-2);
}
.diagram-routine-webhook-actions {
  display: flex;
  justify-content: flex-end;
}
.diagram-view-lens-bar {
  position: absolute;
  top: var(--openbot-space-4);
  left: 50%;
  z-index: 2;
  translate: -50% 0;
}
.diagram-view-lens-bar .ui-select-trigger {
  background: var(--openbot-bg-overlay);
  box-shadow: var(--openbot-shadow-raised);
}
.diagram-view-lens-trigger.ui-select-trigger {
  min-width: 120px;
  max-width: 280px;
}
.diagram-view-lens-option {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
}
.diagram-view-lens-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diagram-view-lens-option svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: none;
}
.diagram-view-lens-dot[data-all] {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--openbot-text-muted);
}
.diagram-view-lens-dot, .diagram-inspector-routine-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: var(--openbot-radius-pill);
  background: var(--diagram-routine-color);
}
.diagram-inspector-routine.ui-button[aria-pressed="true"] {
  background: var(--diagram-routine-soft);
}
.diagram-node[data-kind="routine"][data-firing] {
  box-shadow: 0 0 0 1px var(--diagram-routine-color), 0 0 0 5px var(--diagram-routine-soft);
}
.diagram-node[data-kind="routine"] .diagram-node-icon {
  background: var(--diagram-routine-soft);
  color: var(--diagram-routine-color);
}
.diagram-node[data-kind="routine"][data-firing] .diagram-node-icon {
  animation: diagram-routine-fire 1.2s var(--openbot-ease-in-out) infinite;
}
.diagram-routine-instruction {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  border-left: 2px solid var(--diagram-routine-color, var(--openbot-accent));
  padding-left: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.diagram-routine-week {
  --diagram-week-height: 40px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--openbot-space-1);
}
.diagram-routine-week[data-size="panel"] {
  --diagram-week-height: 72px;
}
.diagram-routine-day {
  display: grid;
  justify-items: center;
  gap: var(--openbot-space-1);
}
.diagram-routine-day-track {
  position: relative;
  width: 100%;
  height: var(--diagram-week-height);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-control);
}
.diagram-routine-day[data-weekend] .diagram-routine-day-track {
  background: var(--openbot-bg-control-hover);
}
.diagram-routine-day[data-today] .diagram-routine-day-track {
  box-shadow: inset 0 0 0 1px var(--openbot-accent);
}
.diagram-routine-day-track::after {
  position: absolute;
  top: 50%;
  right: 3px;
  left: 3px;
  height: 1px;
  background: var(--openbot-border);
  content: "";
}
.diagram-routine-tick {
  position: absolute;
  top: var(--diagram-tick-at);
  right: 3px;
  left: 3px;
  z-index: 1;
  height: 3px;
  translate: 0 -50%;
  border-radius: var(--openbot-radius-pill);
  background: var(--diagram-routine-color, var(--openbot-accent));
}
.diagram-routine-day-name {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 1;
}
.diagram-routine-day[data-today] .diagram-routine-day-name {
  color: var(--openbot-accent-text);
  font-weight: var(--openbot-weight-semibold);
}
.diagram-routine-dots {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.diagram-routine-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-border-strong);
}
.diagram-routine-dot[data-status="succeeded"] {
  background: var(--openbot-success);
}
.diagram-routine-dot[data-status="failed"] {
  background: var(--openbot-danger);
}
.diagram-routine-dot[data-status="running"] {
  background: var(--openbot-accent);
}
@keyframes diagram-routine-fire {
  50% {
    scale: 1.15;
  }
}
.diagram-inspector {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  width: var(--diagram-inspector-width);
  min-height: 0;
  flex-direction: column;
  border-left: 1px solid var(--openbot-border);
  background: var(--openbot-bg-surface);
}
.diagram-inspector-header {
  display: flex;
  min-height: 52px;
  align-items: center;
  gap: var(--openbot-space-2);
  border-bottom: 1px solid var(--openbot-border);
  padding: var(--openbot-space-2) var(--openbot-space-3);
}
.diagram-inspector-title {
  overflow: hidden;
  margin: 0;
  flex: 1;
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diagram-inspector-avatar.agent-avatar {
  width: 24px;
  height: 24px;
}
.diagram-inspector-body {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: var(--openbot-space-4);
  overflow-y: auto;
  padding: var(--openbot-space-4);
}
.diagram-inspector-run {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--openbot-space-1-5) var(--openbot-space-2);
  font-size: var(--openbot-text-md);
}
.diagram-inspector-muted, .diagram-inspector-empty {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
}
.diagram-inspector-section {
  display: grid;
  gap: var(--openbot-space-1-5);
}
.diagram-inspector-section p {
  margin: 0;
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.diagram-inspector-task.ui-textarea {
  min-height: 0;
  margin: calc(-1 * var(--openbot-space-1-5));
  border-color: transparent;
  background: transparent;
  padding: var(--openbot-space-1) var(--openbot-space-1-5);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  resize: none;
  field-sizing: content;
}
.diagram-inspector-task.ui-textarea:is(:hover, :focus-visible, :focus) {
  border-color: var(--openbot-border);
  background: var(--openbot-bg-control);
}
.diagram-inspector-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.diagram-inspector-section-title {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: var(--openbot-tracking-wide);
}
.diagram-inspector-text {
  max-height: 320px;
  overflow: auto;
  margin: 0;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.diagram-inspector-text[data-tone="danger"] {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger-text);
}
.diagram-inspector-steps {
  display: grid;
  gap: var(--openbot-space-0-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.diagram-inspector-step.ui-button {
  width: 100%;
  height: auto;
  justify-content: flex-start;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-2);
  text-align: left;
}
.diagram-inspector-step-number {
  display: grid;
  width: 20px;
  height: 20px;
  flex: none;
  place-items: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  font-weight: var(--openbot-weight-semibold);
}
.diagram-inspector-step-name {
  overflow: hidden;
  flex: 1;
  font-size: var(--openbot-text-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diagram-inspector-step-status {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
.diagram-inspector-times, .diagram-inspector-history {
  display: grid;
  gap: var(--openbot-space-1);
  margin: 0;
  padding: 0;
  font-size: var(--openbot-text-md);
  list-style: none;
}
.diagram-inspector-times li {
  color: var(--openbot-text-secondary);
}
.diagram-inspector-history li {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-2);
}
.diagram-inspector-history-time {
  overflow: hidden;
  color: var(--openbot-text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diagram-inspector-history-kind {
  color: var(--openbot-text-muted);
}
.diagram-inspector-history-kind::before {
  content: " · ";
}
.diagram-inspector-step-status svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.diagram-chat, .diagram-chat-launcher.ui-button {
  background: var(--openbot-bg-glass);
  box-shadow: 0 0 0 1px var(--openbot-glass-border), var(--openbot-shadow-overlay);
  backdrop-filter: blur(16px);
}
.diagram-chat-morph {
  --diagram-chat-open-duration: var(--openbot-duration-island-content);
  --diagram-chat-close-duration: var(--openbot-duration-island-content-exit);
  --diagram-chat-open-ease: cubic-bezier(0.34, 1.25, 0.64, 1);
  --diagram-chat-launcher-height: 36px;
  --diagram-chat-blur: 2px;
  display: grid;
  align-items: end;
}
.diagram-chat-morph > * {
  grid-area: 1 / 1;
}
.diagram-chat-launcher.ui-button {
  height: var(--diagram-chat-launcher-height);
  touch-action: none;
  justify-self: start;
  gap: var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
  padding-left: var(--openbot-space-1-5);
  pointer-events: auto;
  transition: opacity var(--diagram-chat-open-duration) var(--openbot-ease-out), filter var(--diagram-chat-open-duration) var(--openbot-ease-out), scale var(--diagram-chat-open-duration) var(--openbot-ease-out);
}
.diagram-chat-morph[data-open="true"] .diagram-chat-launcher.ui-button {
  scale: 0.97;
  filter: blur(var(--diagram-chat-blur));
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out), filter var(--openbot-duration-fast) var(--openbot-ease-out), scale var(--openbot-duration-fast) var(--openbot-ease-out);
}
.diagram-chat {
  display: flex;
  max-height: 340px;
  flex-direction: column;
  border-radius: var(--openbot-radius-xl);
  overflow: hidden;
  clip-path: inset(calc(100% - var(--diagram-chat-launcher-height)) 24% 0 0 round var(--openbot-radius-pill));
  opacity: 0;
  pointer-events: none;
  transition: clip-path var(--diagram-chat-close-duration) var(--openbot-ease-out), opacity var(--diagram-chat-close-duration) var(--openbot-ease-out);
}
.diagram-chat-morph[data-open="true"] .diagram-chat {
  clip-path: inset(-32px round 0);
  opacity: 1;
  pointer-events: auto;
  transition: clip-path var(--diagram-chat-open-duration) var(--diagram-chat-open-ease), opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}
.diagram-chat > * {
  filter: blur(var(--diagram-chat-blur));
  opacity: 0;
  translate: 0 var(--openbot-space-2);
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out), filter var(--openbot-duration-fast) var(--openbot-ease-out), translate var(--openbot-duration-fast) var(--openbot-ease-out);
}
.diagram-chat-morph[data-open="true"] .diagram-chat > * {
  filter: blur(0);
  opacity: 1;
  translate: 0 0;
  transition: opacity var(--diagram-chat-open-duration) var(--openbot-ease-out) var(--openbot-duration-fast), filter var(--diagram-chat-open-duration) var(--openbot-ease-out) var(--openbot-duration-fast), translate var(--diagram-chat-open-duration) var(--openbot-ease-out) var(--openbot-duration-fast);
}
.diagram-chat-avatar.agent-avatar {
  width: 24px;
  height: 24px;
}
.diagram-chat-header {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  cursor: grab;
  touch-action: none;
  border-bottom: 1px solid var(--openbot-border);
  padding: var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-3);
}
.diagram-chat-title {
  overflow: hidden;
  margin: 0;
  flex: 1;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diagram-chat-messages {
  display: flex;
  min-height: 96px;
  flex: 1;
  flex-direction: column;
  gap: var(--openbot-space-2);
  overflow-y: auto;
  padding: var(--openbot-space-3);
}
.diagram-chat-empty {
  margin: auto 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  text-align: center;
}
.diagram-chat-bubble {
  max-width: 88%;
  font-size: var(--openbot-text-md);
}
.diagram-chat-text {
  margin: 0;
  white-space: pre-wrap;
}
.diagram-chat-markdown {
  min-width: 0;
  font-size: var(--openbot-text-md);
}
.diagram-chat-changes {
  display: grid;
  gap: var(--openbot-space-1);
  margin: var(--openbot-space-2) 0 0;
  padding: 0;
  font-size: var(--openbot-text-sm);
  list-style: none;
}
.diagram-chat-changes li {
  display: flex;
  align-items: flex-start;
  gap: var(--openbot-space-1-5);
}
.diagram-chat-changes svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: none;
  margin-top: 2px;
  color: var(--openbot-success-text);
}
.diagram-chat-working {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.diagram-chat-composer.composer[data-compact] {
  grid-template-columns: minmax(0, 1fr) auto;
  margin: var(--openbot-space-2);
}
.diagram-chat-composer.composer[data-compact] > .composer-input-label {
  grid-column: 1;
}
@media (prefers-reduced-motion: reduce) {
  .diagram-edge[data-state="running"] .diagram-edge-line {
    animation: none;
  }
  .diagram-node[data-kind="routine"][data-firing] .diagram-node-icon {
    animation: none;
  }
  .diagram-chat-launcher.ui-button, .diagram-chat, .diagram-chat > *, .diagram-board-world[data-settling], .diagram-node, .diagram-port.ui-button, .diagram-edge-remove.ui-button {
    transition: none;
  }
}
.agent-usage-secondary, .agent-usage-footer {
  font-size: var(--openbot-text-sm);
  color: var(--openbot-text-muted);
}
.agent-usage-overview {
  display: grid;
  gap: var(--openbot-space-8);
}
.agent-usage-summary {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-8);
}
.agent-usage-hero {
  font-size: var(--openbot-text-usage-total);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  margin-bottom: var(--openbot-space-3);
}
.agent-usage-providers {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-6);
}
.agent-usage-provider-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-4);
  font-size: var(--openbot-text-lg);
}
.agent-usage-provider-heading > span {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.agent-usage-series-dot {
  width: var(--openbot-space-2);
  height: var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
  flex-shrink: 0;
}
.agent-usage-provider-heading strong {
  font-weight: 550;
  font-variant-numeric: tabular-nums;
}
.agent-usage-provider p {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  margin-top: var(--openbot-space-2);
}
.agent-usage-provider-icon {
  fill: var(--openbot-provider-current);
  width: var(--openbot-space-4);
  height: var(--openbot-space-4);
  flex-shrink: 0;
}
.agent-usage-trend {
  min-width: 0;
}
.agent-usage-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-4);
  margin-bottom: var(--openbot-space-4);
}
.agent-usage-totals {
  display: flex;
  flex-wrap: nowrap;
  gap: calc(var(--openbot-space-6) * 2);
  margin-top: var(--openbot-space-4);
  overflow: hidden;
}
.agent-usage-totals dt {
  font-size: var(--openbot-text-sm);
  color: var(--openbot-text-muted);
  margin-bottom: var(--openbot-space-1);
  white-space: nowrap;
}
.agent-usage-totals dd {
  margin: 0;
  font-size: var(--openbot-text-xl);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.agent-usage-table {
  overflow-x: auto;
}
.agent-usage-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--openbot-text-lg);
  font-variant-numeric: tabular-nums;
}
.agent-usage-table th, .agent-usage-table td {
  text-align: right;
  padding: var(--openbot-space-2) var(--openbot-space-3);
  border-bottom: 1px solid var(--openbot-border-strong);
  white-space: nowrap;
  font-weight: 400;
}
.agent-usage-table th:first-child {
  text-align: left;
  padding-left: 0;
  white-space: normal;
}
.agent-usage-table td:last-child {
  padding-right: 0;
}
.agent-usage-table thead th {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.agent-usage-table td {
  color: var(--openbot-text-secondary);
}
.agent-usage-model-name {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  overflow-wrap: anywhere;
  min-width: 10rem;
}
.agent-usage-footer {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-3);
  padding-bottom: var(--openbot-space-6);
}
.agent-usage-footer summary {
  cursor: pointer;
  width: fit-content;
}
.agent-usage-footer details p {
  margin-top: var(--openbot-space-3);
  max-width: 72ch;
  line-height: 1.6;
}
.app-frame-panes {
  display: contents;
}
.app-frame-panes > * {
  min-height: 0;
}
.app-frame-page-open .app-frame-panes {
  visibility: hidden;
  pointer-events: none;
}
.app-frame.app-frame-page-open .app-frame-panes * {
  visibility: hidden;
}
.window-page {
  z-index: 1;
  min-height: 0;
  overflow: hidden;
}
.agent-usage {
  container-type: inline-size;
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 0;
  height: 100%;
  flex-direction: column;
  color: var(--openbot-text-primary);
  background: var(--openbot-bg-canvas);
}
.agent-usage-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-4) var(--openbot-space-6);
  border-bottom: 1px solid var(--openbot-border);
}
.agent-usage-identity, .agent-usage-controls {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  min-width: 0;
}
.agent-usage-identity {
  flex-wrap: wrap;
}
.agent-usage-identity .ui-icon-button {
  margin-left: calc(-1 * var(--openbot-space-2));
}
.agent-usage-identity h2 {
  display: flex;
  gap: var(--openbot-space-3);
  font-size: var(--openbot-text-lg);
  color: var(--openbot-text-muted);
}
.agent-usage-identity h2 span:last-child {
  color: var(--openbot-text-primary);
  overflow-wrap: anywhere;
}
.agent-usage-controls {
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--openbot-space-3);
}
.agent-usage-body {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding: var(--openbot-space-6);
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-8);
}
.agent-usage h3 {
  font-size: var(--openbot-text-xl);
  font-weight: 550;
}
.agent-usage-notice {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  padding: var(--openbot-space-4);
  background: var(--openbot-bg-surface);
  border-radius: var(--openbot-radius-md);
}
.agent-usage-notice .ui-button {
  margin-top: var(--openbot-space-3);
}
.agent-usage-loading {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
}
.agent-usage-placeholder {
  height: 280px;
  margin-top: var(--openbot-space-6);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface);
}
@container (min-width: 850px) {
  .agent-usage-overview {
    grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.5fr);
    gap: calc(var(--openbot-space-6) * 2);
  }
  .agent-usage-body {
    padding: var(--openbot-space-8) calc(var(--openbot-space-6) * 2);
    gap: calc(var(--openbot-space-6) * 2);
  }
}
@container (max-width: 1000px) {
  .agent-usage-totals > div:nth-child(n + 7) {
    display: none;
  }
}
@container (max-width: 820px) {
  .agent-usage-totals > div:nth-child(n + 6) {
    display: none;
  }
}
@container (max-width: 660px) {
  .agent-usage-totals > div:nth-child(n + 5) {
    display: none;
  }
}
@container (max-width: 540px) {
  .agent-usage-totals > div:nth-child(n + 4) {
    display: none;
  }
}
@container (max-width: 400px) {
  .agent-usage-totals > div:nth-child(n + 3) {
    display: none;
  }
}
@container (max-width: 480px) {
  .agent-usage-hero {
    font-size: var(--openbot-text-display);
  }
  .agent-usage-body {
    padding: var(--openbot-space-4);
  }
  .agent-usage-header {
    padding: var(--openbot-space-3);
  }
  .agent-usage-controls {
    margin-left: 0;
    justify-content: flex-start;
  }
  .agent-usage-section-header {
    flex-wrap: wrap;
  }
}
.agent-usage-controls .ui-select {
  width: auto;
  flex-shrink: 0;
}
.agent-usage-controls .ui-select-trigger {
  width: max-content;
  border-color: var(--openbot-border);
  background: var(--openbot-bg-control);
  box-shadow: none;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.app-frame-panes.server-connection-workspace {
  position: relative;
  grid-column: -2 / -1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.server-connection-workspace > .app-loading {
  z-index: 1;
}
.server-connection-content > * {
  min-height: 0;
  flex: 1;
}
.schedule-pane {
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  background: var(--openbot-bg-canvas);
  padding: var(--openbot-space-4) var(--openbot-space-6) var(--openbot-space-6);
}
.tasks-page {
  display: flex;
  height: 100%;
  min-height: 0;
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
}
.tasks-page-scroll {
  min-width: 0;
  flex: 1;
  overflow-y: auto;
  padding: 0 var(--openbot-space-6) var(--openbot-space-8);
}
.tasks-page-column {
  display: flex;
  max-width: 36rem;
  flex-direction: column;
  gap: var(--openbot-space-1);
  margin: 0 auto;
}
.tasks-page-header {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-6) var(--openbot-space-2) var(--openbot-space-3);
}
.tasks-page-header .ui-icon-button {
  margin-left: calc(-1 * var(--openbot-space-2));
}
.tasks-page-header h2 {
  min-width: 0;
  flex: 1;
  margin: 0;
  font-size: var(--openbot-text-xl);
  font-weight: var(--openbot-weight-semibold);
}
.tasks-page-agent-option > span {
  flex: 1 1 auto;
}
.tasks-page-header h2 span {
  color: var(--openbot-text-muted);
  font-weight: var(--openbot-weight-regular);
}
.tasks-page-avatar.agent-avatar {
  --agent-avatar-optical-offset: -2px;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
.tasks-page-composer.composer-wrap {
  position: sticky;
  z-index: 3;
  top: 0;
  margin-bottom: var(--openbot-space-2);
  background: var(--openbot-bg-canvas);
  padding: var(--openbot-space-1) 0 0;
}
.tasks-page-composer .composer-notice {
  margin-bottom: var(--openbot-space-2);
}
.tasks-page-composer-agent {
  display: flex;
  min-width: 0;
  align-items: center;
}
.tasks-page-agent.ui-button {
  gap: var(--openbot-space-1-5);
  font-size: var(--openbot-text-sm);
  color: var(--openbot-text-secondary);
}
.tasks-page-composer-agent .tasks-page-agent.ui-button {
  margin-left: calc(-1 * var(--openbot-space-1));
}
.tasks-page-agent-face {
  display: flex;
  flex: 0 0 auto;
}
.tasks-page-agent-face[data-entering] {
  animation: tasks-page-face-in 420ms cubic-bezier(0.34, 1.36, 0.64, 1) both;
}
@keyframes tasks-page-face-in {
  from {
    opacity: 0;
    scale: 0.6;
    filter: blur(2px);
  }
}
.tasks-page-agent-chevron {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  color: var(--openbot-text-muted);
  transition: transform var(--openbot-duration-normal) ease;
}
.tasks-page-agent[aria-expanded="true"] .tasks-page-agent-chevron {
  transform: rotate(180deg);
}
.tasks-page-agent-check {
  color: var(--openbot-text-primary);
}
.tasks-page-took {
  display: flex;
  min-height: var(--openbot-control-sm);
  align-items: center;
  gap: var(--openbot-space-1-5);
  margin-bottom: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  animation: tasks-page-rise var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.tasks-page-took .ui-button-size-sm {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.tasks-page-took-agent {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  padding: 0 var(--openbot-space-1);
}
.tasks-page-took-text {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tasks-page-section {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-0-5);
}
.tasks-page-section + .tasks-page-section {
  margin-top: var(--openbot-space-4);
}
.tasks-page-section-heading {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  margin: 0;
  padding: var(--openbot-space-1) var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.tasks-page-count {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
  font-variant-numeric: tabular-nums;
}
.tasks-page-list {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-0-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.tasks-page-row.ui-button {
  display: grid;
  width: 100%;
  height: var(--openbot-control-lg);
  align-items: center;
  justify-content: stretch;
  grid-template-columns: 16px minmax(0, 1fr) auto auto;
  gap: var(--openbot-space-3);
  border-radius: var(--openbot-radius-md);
  padding: 0 var(--openbot-space-2);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-regular);
  text-align: left;
  --task-list-glyph: 14px;
}
.tasks-page-row[data-selected] {
  background: var(--openbot-bg-control-active);
}
.tasks-page-section[data-closed] .tasks-page-row:not([data-selected]) {
  opacity: 0.55;
}
.tasks-page-row-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tasks-page-status {
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tasks-page-status[data-tone="working"] {
  color: var(--openbot-text-secondary);
}
.tasks-page-status[data-tone="attention"] {
  color: var(--openbot-accent);
}
.tasks-page-status[data-tone="danger"] {
  color: var(--openbot-danger-text);
}
.tasks-page-show-all.ui-button {
  align-self: flex-start;
  color: var(--openbot-text-muted);
}
li[data-arrived] > .tasks-page-row {
  animation: tasks-page-arrive 1600ms var(--openbot-ease-out);
}
.tasks-page-side {
  position: relative;
  flex: 0 0 380px;
  overflow: hidden;
  transition: flex-basis var(--openbot-duration-overlay) var(--openbot-ease-out), opacity var(--openbot-duration-overlay) var(--openbot-ease-out);
}
@starting-style {
  .tasks-page-side {
    flex-basis: 0;
    opacity: 0.6;
  }
}
.tasks-page-side[data-closing] {
  flex-basis: 0;
  opacity: 0.6;
  transition-duration: var(--openbot-duration-slow);
  transition-timing-function: cubic-bezier(0.5, 0, 0.75, 0);
}
.tasks-page-side-content {
  position: absolute;
  inset: 0 auto 0 0;
  display: flex;
  width: 380px;
  --browser-panel-width: 100%;
}
.tasks-page-side-content > * {
  flex: 1;
  min-width: 0;
}
.tasks-page-side-content[data-entering] {
  animation: tasks-page-side-swap var(--openbot-duration-normal) var(--openbot-ease-out);
}
@keyframes tasks-page-side-swap {
  from {
    opacity: 0;
    transform: translateX(6px);
  }
}
@keyframes tasks-page-rise {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}
@keyframes tasks-page-arrive {
  from {
    background: var(--openbot-bg-control-active);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tasks-page-took, .tasks-page-agent-face[data-entering], li[data-arrived] > .tasks-page-row, .tasks-page-side-content[data-entering] {
    animation: none;
  }
  .tasks-page-side, .tasks-page-agent-chevron {
    transition: none;
  }
}
.ui-chart {
  width: 100%;
  height: 300px;
  min-width: 0;
  font-size: var(--openbot-text-sm);
}
.ui-chart-tooltip {
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-primary);
  padding: var(--openbot-space-3);
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
.ui-chart-tooltip-row {
  display: grid;
  grid-template-columns: var(--openbot-space-4) auto 1fr;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-top: var(--openbot-space-2);
}
.ui-chart-tooltip-value {
  text-align: right;
}
.ui-chart-tooltip-mark {
  display: flex;
  align-items: center;
}
.ui-chart-tooltip-total {
  border-top: 1px solid var(--openbot-border-strong);
  padding-top: var(--openbot-space-2);
  color: var(--openbot-text-muted);
}
.storage-usage {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
}
.storage-usage [data-group="workspaces"] {
  --storage-color: var(--openbot-chart-storage-workspaces);
}
.storage-usage [data-group="files"] {
  --storage-color: var(--openbot-chart-storage-files);
}
.storage-usage [data-group="chats"] {
  --storage-color: var(--openbot-chart-storage-chats);
}
.storage-usage [data-group="downloads"] {
  --storage-color: var(--openbot-chart-storage-downloads);
}
.storage-usage [data-group="runtimes"] {
  --storage-color: var(--openbot-chart-storage-runtimes);
}
.storage-usage [data-group="app"] {
  --storage-color: var(--openbot-chart-storage-app);
}
.storage-usage-bar {
  display: flex;
  height: 10px;
  gap: var(--openbot-space-0-5);
}
.storage-usage-segment {
  min-width: 4px;
  flex-basis: 0;
  border-radius: var(--openbot-radius-xs);
  background: var(--storage-color);
  transition: opacity var(--openbot-duration-fast) ease;
}
.storage-usage[data-hovering="true"] :is(.storage-usage-segment, .storage-usage-legend-row):not([data-active]) {
  opacity: 0.35;
}
.storage-usage-legend {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--openbot-space-1) var(--openbot-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.storage-usage-legend-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-1) 0;
  font-size: var(--openbot-text-md);
  transition: opacity var(--openbot-duration-fast) ease;
}
.storage-usage-swatch {
  width: var(--openbot-space-2);
  height: var(--openbot-space-2);
  align-self: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--storage-color);
}
.storage-usage-legend-label {
  overflow: hidden;
  color: var(--openbot-text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.storage-usage-legend-value {
  color: var(--openbot-text-primary);
  font-variant-numeric: tabular-nums;
}
.storage-usage-legend-percent {
  min-width: 4ch;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.storage-overview {
  container-type: inline-size;
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--openbot-space-8);
  color: var(--openbot-text-primary);
}
.storage-summary {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
}
.storage-summary-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--openbot-space-3);
}
.storage-summary-label {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.storage-summary-total {
  margin: var(--openbot-space-1) 0;
  font-size: var(--openbot-text-display);
  font-weight: var(--openbot-weight-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.storage-summary-total-skeleton {
  width: 140px;
  height: 36px;
  margin: var(--openbot-space-1) 0;
}
.storage-summary-caption {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.storage-message {
  display: flex;
  align-items: flex-start;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-grouped);
}
.storage-message-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--openbot-text-muted);
  stroke-width: var(--openbot-icon-stroke);
}
.storage-message[role="alert"] .storage-message-icon {
  color: var(--openbot-danger-text);
}
.storage-message-title {
  margin: 0;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.storage-message-description {
  margin: var(--openbot-space-0-5) 0 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.storage-section {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
}
.storage-section-heading-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--openbot-space-3);
}
.storage-section-heading {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
}
.storage-section-aside {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.storage-rows {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-grouped);
  list-style: none;
}
.storage-rows > li + li {
  border-top: 1px solid var(--openbot-border-grouped);
}
.storage-row.ui-button {
  display: flex;
  width: 100%;
  height: auto;
  min-height: 52px;
  align-items: center;
  justify-content: flex-start;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-2) var(--openbot-space-4);
  border-radius: 0;
  text-align: left;
  font-weight: var(--openbot-weight-regular);
}
.storage-row-avatar {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
}
.storage-row-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: var(--openbot-space-0-5);
}
.storage-row-title {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.storage-row-meta {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.storage-row-share {
  width: 96px;
  height: 6px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-hover);
}
.storage-row-share-fill {
  display: block;
  height: 100%;
  min-width: 4px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-muted);
}
.storage-row-size {
  display: flex;
  min-width: 72px;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-variant-numeric: tabular-nums;
}
.storage-row-percent {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.storage-row-chevron {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--openbot-text-dim);
  stroke-width: var(--openbot-icon-stroke);
}
.storage-cleanup-row {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-2) var(--openbot-space-4);
}
.storage-cleanup-row .storage-row-meta {
  white-space: normal;
}
.storage-subview-header {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.storage-subview-back > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.storage-subview-header h3 {
  margin: 0;
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
}
@container (max-width: 520px) {
  .storage-row-share {
    display: none;
  }
}
.file-list {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--openbot-space-3);
}
.file-list-toolbar {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.file-list-search {
  position: relative;
  min-width: 0;
  flex: 1;
}
.file-list-search-icon {
  position: absolute;
  top: 50%;
  left: var(--openbot-space-2);
  width: 14px;
  height: 14px;
  color: var(--openbot-text-muted);
  pointer-events: none;
  stroke-width: var(--openbot-icon-stroke);
  transform: translateY(-50%);
}
.file-list-search .file-list-search-input {
  width: 100%;
  padding-left: calc(var(--openbot-space-2) + 14px + var(--openbot-space-1-5));
}
.file-list-toolbar > .ui-select {
  width: auto;
  flex: 0 0 auto;
}
.file-list-sort {
  width: 120px;
}
.file-list[data-compact="true"] .file-list-sort {
  width: auto;
}
.file-list-filters {
  display: flex;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  flex-wrap: wrap;
  gap: var(--openbot-space-1);
}
.file-list[data-compact="true"] .file-list-filters {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.file-list-filter.ui-button {
  flex: 0 0 auto;
  gap: var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-pill);
  color: var(--openbot-text-muted);
}
.file-list-filter.ui-button[aria-pressed="true"] {
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
}
.file-list-filter-count {
  color: var(--openbot-text-muted);
  font-variant-numeric: tabular-nums;
}
.file-list-filter[aria-pressed="true"] .file-list-filter-count {
  color: var(--openbot-text-secondary);
}
.file-list-summary {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.file-list-group {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
}
.file-list-group + .file-list-group {
  margin-top: var(--openbot-space-2);
}
.file-list-group-heading {
  margin: 0;
  padding: 0 var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.file-list-rows {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-0-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.file-list-skeleton {
  height: 48px;
  border-radius: var(--openbot-radius-md);
}
.file-list-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-8) var(--openbot-space-4);
  text-align: center;
}
.file-list-message-icon {
  width: 20px;
  height: 20px;
  color: var(--openbot-danger-text);
  stroke-width: var(--openbot-icon-stroke);
}
.file-list-message-title {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.file-list-message-description {
  max-width: 320px;
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.file-row {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
  padding-right: var(--openbot-space-1);
  border-radius: var(--openbot-radius-md);
}
.file-row:hover, .file-row:focus-within {
  background: var(--openbot-hover);
}
.file-row-main.ui-button {
  display: flex;
  min-width: 0;
  height: auto;
  flex: 1;
  align-items: center;
  justify-content: flex-start;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  text-align: left;
  font-weight: var(--openbot-weight-regular);
}
.file-row-main.ui-button:hover {
  background: transparent;
}
.file-row-main.ui-button:disabled {
  opacity: 1;
}
.files-file-visual {
  --file-reference-color: var(--openbot-file-default);
  --file-reference-soft: var(--openbot-file-default-soft);
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border-radius: var(--openbot-radius-md);
  background: var(--file-reference-soft);
  color: var(--file-reference-color);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: 0.02em;
}
.files-file-visual[data-file-tone="document"] {
  color: var(--openbot-danger-text);
}
.files-file-visual[data-status="missing"], .files-file-visual[data-status="failed"] {
  opacity: 0.5;
}
.files-file-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.file-row-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: var(--openbot-space-0-5);
}
.file-row-name {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-row[data-status="missing"] .file-row-name {
  color: var(--openbot-text-muted);
  text-decoration: line-through;
  text-decoration-color: var(--openbot-text-dim);
}
.file-row-meta {
  display: flex;
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  white-space: pre;
}
.file-row-meta-part {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-row-meta-part:first-child {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}
.file-row-status {
  flex: 0 0 auto;
}
.file-row-status.z-badge-variant-destructive-light {
  color: var(--openbot-danger-text);
}
.file-row-menu-trigger {
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
}
.file-row-menu-trigger > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: var(--openbot-icon-stroke);
}
.files-button-icon {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.agent-files-view {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--openbot-bg-canvas);
}
.agent-files-body {
  container-type: inline-size;
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: var(--openbot-space-6);
  overflow-y: auto;
  padding: var(--openbot-space-4);
}
.agent-files-summary {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-3);
}
.agent-files-total-label {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.agent-files-total {
  margin: var(--openbot-space-0-5) 0 0;
  font-size: var(--openbot-text-3xl);
  font-weight: var(--openbot-weight-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.agent-files-total-skeleton {
  width: 96px;
  height: 28px;
  margin-top: var(--openbot-space-0-5);
}
.agent-files-tiles {
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-grouped);
}
.agent-files-tile {
  display: flex;
  min-height: 36px;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-2) var(--openbot-space-3);
}
.agent-files-tile + .agent-files-tile {
  border-top: 1px solid var(--openbot-border-grouped);
}
.agent-files-tile dt {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-1);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
}
.agent-files-tile-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-files-tile dd {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-variant-numeric: tabular-nums;
}
.agent-files-tile-action {
  flex: 0 0 auto;
  margin-block: calc(var(--openbot-space-1) * -1);
  color: var(--openbot-text-muted);
}
.agent-files-tile-skeleton {
  width: 64px;
  height: 18px;
}
.agent-files-section {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
}
.conversation-files-summary {
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
.conversation-files-content {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  padding: var(--openbot-space-3);
}
.agent-import-guide {
  display: flex;
  max-width: 560px;
  flex-direction: column;
  gap: var(--openbot-space-6);
}
.agent-import-intro {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1-5);
}
.agent-import-heading {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-xl);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: -0.01em;
}
.agent-import-lede {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: 1.5;
}
.agent-import-steps {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.agent-import-step {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: var(--openbot-space-4);
  padding-bottom: var(--openbot-space-6);
}
.agent-import-step:last-child {
  padding-bottom: 0;
}
.agent-import-step:not(:last-child)::before {
  position: absolute;
  top: 28px;
  bottom: 4px;
  left: 11.5px;
  width: 1px;
  background: var(--openbot-border-grouped);
  content: "";
}
.agent-import-marker {
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  font-weight: var(--openbot-weight-medium);
}
.agent-import-step-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--openbot-space-2);
  padding-top: 2px;
}
.agent-import-step-title {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.agent-import-step-note {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 1.45;
}
.agent-import-setup {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--openbot-space-3);
}
.agent-import-setup .ui-sliding-tabs-content-slot {
  width: 100%;
}
.agent-import-setup-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--openbot-space-2);
}
.agent-import-card {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-3);
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-grouped);
}
.agent-import-card-icon {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: none;
  color: var(--openbot-text-secondary);
  stroke-width: var(--openbot-icon-stroke);
}
.agent-import-card-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}
.agent-import-card-name {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.agent-import-card-meta {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-import-prompt {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-3);
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-grouped);
}
.agent-import-prompt-text {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-import-prompt svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.agent-import-card .ui-button svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.agent-import-picker.ui-button {
  display: flex;
  width: 100%;
  height: auto;
  min-height: 64px;
  align-items: center;
  justify-content: flex-start;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-grouped);
  text-align: left;
  font-weight: var(--openbot-weight-regular);
}
.agent-import-picker.ui-button:hover:not(:disabled, [aria-disabled="true"]) {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-control-hover);
}
.agent-import-picker-icon {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  flex: 0 0 auto;
  color: var(--openbot-text-secondary);
  stroke-width: var(--openbot-icon-stroke);
}
.agent-import-picker-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--openbot-space-0-5);
}
.agent-import-picker-title {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.agent-import-picker-meta {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.agent-import-row {
  display: flex;
  min-height: 52px;
  align-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3) var(--openbot-space-4);
}
label.agent-import-row {
  cursor: pointer;
}
label.agent-import-row:hover {
  background: var(--openbot-hover);
}
label.agent-import-row:has(input:disabled) {
  cursor: default;
}
.agent-import-row-note {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 1.4;
}
.agent-import-notes {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  margin: var(--openbot-space-1) 0 0;
  padding: 0;
  list-style: none;
}
.agent-import-done {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.agent-import-done-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  color: var(--openbot-success-text);
  stroke-width: var(--openbot-icon-stroke);
}
.agent-import-skipped-icon {
  color: var(--openbot-warning-text);
}
.agent-import-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
}
.agent-import-row-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-1);
}
.agent-import-name-hint {
  display: inline-flex;
  flex: none;
  color: var(--openbot-text-muted);
  border-radius: var(--openbot-radius-sm);
}
.agent-import-name-hint:hover, .agent-import-name-hint:focus-visible {
  color: var(--openbot-text-secondary);
}
.agent-import-name-hint svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  stroke-width: var(--openbot-icon-stroke);
}
.agent-import-members {
  display: flex;
  flex: none;
  width: 44px;
}
.agent-import-member-avatar {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: var(--openbot-radius-pill);
  box-shadow: 0 0 0 2px var(--openbot-bg-grouped);
}
.agent-import-member-avatar + .agent-import-member-avatar {
  margin-left: -11px;
}
.agent-import-channel-icon {
  width: 28px;
  height: var(--openbot-icon-md);
  flex: none;
  color: var(--openbot-text-secondary);
  stroke-width: var(--openbot-icon-stroke);
}
.instance-transfer {
  display: flex;
  max-width: 720px;
  flex-direction: column;
  gap: var(--openbot-space-4);
}
.instance-transfer-start {
  justify-content: flex-start;
}
.instance-transfer-back {
  align-self: flex-start;
  padding-inline: 0;
}
.instance-transfer-link {
  align-self: flex-start;
  padding-inline: 0;
}
.instance-transfer-chip {
  padding: 0 var(--openbot-space-1-5);
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-pill);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  white-space: nowrap;
}
.instance-transfer-flow {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  margin: 0;
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-lg);
  list-style: none;
}
.instance-transfer-flow-item {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-1-5);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  text-align: center;
}
.instance-transfer-flow-icon {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  color: var(--openbot-text-primary);
}
.instance-transfer-flow-arrow {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: none;
  color: var(--openbot-text-muted);
}
.instance-transfer-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--openbot-space-3);
}
.instance-transfer-tile {
  display: flex;
  height: auto;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-4);
  text-align: left;
  white-space: normal;
}
.instance-transfer-tile-icon {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  margin-bottom: var(--openbot-space-2);
}
.instance-transfer-tile-title {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.instance-transfer-tile-text {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
}
.instance-transfer-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--openbot-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.instance-transfer-summary-item {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
}
.instance-transfer-summary-icon {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: none;
  color: var(--openbot-text-muted);
}
.instance-transfer-not-moved {
  display: flex;
  align-items: flex-start;
  gap: var(--openbot-space-2);
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 1.45;
}
.instance-transfer-not-moved-icon {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: none;
  margin-top: 2px;
}
@media (max-width: 640px) {
  .instance-transfer-tiles, .instance-transfer-summary {
    grid-template-columns: minmax(0, 1fr);
  }
}
.settings-modal-tabs-root {
  display: contents;
}
.settings-modal {
  --openbot-bg-surface: var(--openbot-bg-control);
  --openbot-text-muted: var(--openbot-settings-text-muted);
  width: min(880px, calc(100vw - 48px));
  height: min(600px, calc(100dvh - 48px));
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  overflow: hidden;
  outline: none;
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
  transform-origin: center;
  animation: settings-modal-in var(--openbot-duration-overlay) var(--openbot-ease-out) both;
  will-change: transform, opacity;
}
.settings-modal-nav {
  display: grid;
  gap: var(--openbot-space-1);
}
.settings-modal-nav-item {
  position: relative;
  width: 100%;
  height: auto;
  min-height: var(--openbot-control-md);
  display: grid;
  grid-template-columns: var(--openbot-icon-md) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-2);
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  padding: 0 var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font: inherit;
  font-size: var(--openbot-text-md);
  text-align: left;
  transition: background-color var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease;
}
.settings-modal-nav-item svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: var(--openbot-icon-stroke);
}
.settings-modal-nav-item[aria-current="page"] {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}
.settings-modal-nav-item {
  cursor: pointer;
}
.settings-modal-nav-item:focus-visible {
  outline: 0;
  box-shadow: var(--openbot-focus-ring);
}
@media (hover: hover) and (pointer: fine) {
  .settings-modal-nav-item:not([aria-current="page"]):hover {
    background: var(--openbot-hover);
    color: var(--openbot-text-primary);
  }
}
.settings-modal-main {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--openbot-bg-canvas);
}
.settings-modal-footer {
  display: contents;
}
.settings-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--openbot-space-4);
  padding: var(--openbot-space-6) var(--openbot-space-6) var(--openbot-space-4);
}
.settings-modal-title {
  margin: 0;
  font-size: var(--openbot-text-2xl);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-2xl);
  letter-spacing: var(--openbot-tracking-tight);
}
.settings-modal-description {
  margin: var(--openbot-space-1) 0 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.settings-modal-scroll-frame {
  position: relative;
  min-height: 0;
  overflow: hidden;
}
.settings-modal-scroll-frame::before, .settings-modal-scroll-frame::after {
  position: absolute;
  right: var(--openbot-space-2);
  left: 0;
  z-index: 1;
  height: var(--openbot-space-8);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--openbot-duration-normal) ease;
  content: "";
}
.settings-modal-scroll-frame::before {
  top: 0;
  background: linear-gradient( to bottom, var(--openbot-bg-canvas) 0%, var(--openbot-bg-canvas) 28%, var(--openbot-bg-canvas-clear) 100% );
}
.settings-modal-scroll-frame::after {
  bottom: 0;
  background: linear-gradient( to top, var(--openbot-bg-canvas) 0%, var(--openbot-bg-canvas) 28%, var(--openbot-bg-canvas-clear) 100% );
}
.settings-modal-scroll-frame[data-scroll-up]::before, .settings-modal-scroll-frame[data-scroll-down]::after {
  opacity: 1;
}
.settings-modal-content {
  height: 100%;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: var(--openbot-space-6);
  overflow-y: auto;
  padding: 0 var(--openbot-space-6) calc(var(--openbot-space-6) + var(--settings-modal-floating-space, 0px));
  scrollbar-gutter: stable;
}
.settings-modal-tab-panel {
  display: grid;
  align-content: start;
  gap: var(--openbot-space-6);
  animation: settings-modal-tab-in var(--openbot-duration-fast) var(--openbot-ease-out) both;
  will-change: transform, opacity;
}
.settings-modal-tab-panel:not([data-selected]) {
  display: none;
}
.settings-modal-card:is(.ui-card, .ui-item-group) {
  width: 100%;
  display: grid;
  overflow: hidden;
  border: 0;
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  box-shadow: none;
}
.settings-modal-card.ui-card {
  padding: 0 var(--openbot-space-4);
}
.settings-modal-card > .ui-switch-field, .settings-modal-card > .ui-item {
  padding: var(--openbot-space-3) var(--openbot-space-4);
}
.settings-modal-row {
  min-height: 64px;
}
.settings-modal-card > .ui-switch-field {
  width: 100%;
  justify-content: space-between;
  padding: var(--openbot-space-3) var(--openbot-space-4);
}
.settings-modal-card > :not(:first-child) {
  position: relative;
  border-top: 0;
}
.settings-modal-card > :not(:first-child)::before {
  position: absolute;
  top: 0;
  right: var(--openbot-space-4);
  left: var(--openbot-space-4);
  height: 1px;
  background: var(--openbot-border);
  pointer-events: none;
  content: "";
}
.settings-modal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-4);
}
.settings-modal-row-title {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-lg);
}
.settings-modal :where(.ui-item-title, .ui-switch-label) {
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
.settings-modal :where(.ui-item-description, .ui-switch-description), .settings-modal :where(.ui-text)[data-variant="caption"] {
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.settings-modal .ui-item-description {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
.settings-modal :where(.ui-item-content, .ui-switch-copy) {
  gap: var(--openbot-space-0-5);
}
.settings-modal :where(.ui-button, .ui-input, .ui-textarea, .ui-native-select) {
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
.settings-modal :where(.ui-button-variant-default) {
  background: var(--openbot-accent);
  color: var(--openbot-text-primary);
}
.settings-modal :where(.ui-button-variant-outline, .ui-button-variant-secondary) {
  background: var(--openbot-bg-surface-raised);
}
.settings-modal :where(.ui-button-variant-destructive) {
  background: var(--openbot-danger);
  color: var(--openbot-text-primary);
}
.settings-modal .ui-switch[data-checked] {
  background: var(--openbot-accent);
}
.settings-modal .ui-switch-thumb[data-checked] {
  background: var(--openbot-text-primary);
}
@media (hover: hover) and (pointer: fine) {
  .settings-modal :where(.ui-button-variant-default):hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-accent-hover);
  }
  .settings-modal :where(.ui-button-variant-destructive):hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-danger-hover);
    color: var(--openbot-text-primary);
  }
}
:is(.app-settings-modal-shell, .server-settings-modal-shell).settings-modal {
  width: min(920px, calc(100vw - 48px));
  height: min(640px, calc(100dvh - 48px));
  grid-template-columns: 196px minmax(0, 1fr);
  border-radius: var(--openbot-radius-card);
  box-shadow: var(--openbot-shadow-raised), 0 0 0 1px var(--openbot-dialog-ring);
}
:is(.app-settings-modal-shell, .server-settings-modal-shell) .settings-modal-nav {
  gap: var(--openbot-space-1);
}
:is(.app-settings-modal-shell, .server-settings-modal-shell) .settings-modal-nav-item {
  min-height: var(--openbot-control-md);
  padding-inline: var(--openbot-space-3);
  font-size: var(--openbot-text-lg);
}
:is(.app-settings-modal-shell, .server-settings-modal-shell) .settings-modal-nav-item[data-selected] {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}
:is(.app-settings-modal-shell, .server-settings-modal-shell) .settings-modal-header {
  align-items: center;
  padding: var(--openbot-space-4) var(--openbot-space-4) var(--openbot-space-6) var(--openbot-space-8);
}
:is(.app-settings-modal-shell, .server-settings-modal-shell) .settings-modal-description {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
:is(.app-settings-modal-shell, .server-settings-modal-shell) .settings-modal-content {
  gap: var(--openbot-space-6);
  padding: 0 var(--openbot-space-8) calc(var(--openbot-space-8) + var(--settings-modal-floating-space, 0px));
}
:is(.app-settings-modal-shell, .server-settings-modal-shell) .settings-modal-tab-panel {
  gap: var(--openbot-space-6);
  animation: none;
  will-change: auto;
}
:is(.app-settings-modal-shell, .server-settings-modal-shell) .ui-settings-section {
  gap: var(--openbot-space-2);
}
:is(.app-settings-modal-shell, .server-settings-modal-shell) .ui-settings-section-header {
  padding-inline: 0;
}
:is(.app-settings-modal-shell, .server-settings-modal-shell) .ui-settings-section-heading {
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.provider-picker-embedded {
  border: 0;
}
.provider-picker-embedded .provider-picker-list {
  overflow: hidden;
  border: 0;
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
}
.provider-picker-embedded .provider-picker-option {
  position: relative;
  min-height: 64px;
  border: 0;
  background: transparent;
  padding: 0 var(--openbot-space-4);
}
.provider-picker-embedded .provider-picker-option-selection {
  min-height: 64px;
  padding: var(--openbot-space-3) 0;
}
.provider-picker-embedded .provider-picker-check-error.provider-picker-used-by {
  margin-top: calc(-1 * var(--openbot-space-4));
  padding: 0 0 var(--openbot-space-3) 54px;
}
.provider-picker-embedded .provider-picker-accounts {
  margin-top: calc(-1 * var(--openbot-space-2));
  padding: 0 0 var(--openbot-space-2) 54px;
}
.provider-picker-embedded .provider-picker-option + .provider-picker-option, .provider-picker-embedded .provider-picker-option-custom {
  border-top: 0;
}
.provider-picker-embedded .provider-picker-option + .provider-picker-option::before, .provider-picker-embedded .provider-picker-option-custom::before {
  position: absolute;
  top: 0;
  right: var(--openbot-space-4);
  left: var(--openbot-space-4);
  height: 1px;
  background: var(--openbot-border);
  pointer-events: none;
  content: "";
}
.provider-picker-embedded .provider-picker-actions {
  gap: var(--openbot-space-2);
}
.provider-picker-embedded .provider-picker-install, .provider-picker-embedded .provider-picker-custom-count {
  margin-right: 0;
}
.settings-modal .ui-button-variant-default.provider-picker-install:not(.provider-picker-connect) {
  background: var(--openbot-surface-light);
  color: var(--openbot-text-on-light);
}
@media (hover: hover) and (pointer: fine) {
  .settings-modal .ui-button-variant-default.provider-picker-install:not(.provider-picker-connect):hover:not(:disabled):not( [data-disabled] ) {
    background: var(--openbot-surface-light);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--openbot-surface-light) 82%, transparent);
    }
  }
}
.provider-picker-embedded .provider-picker-option:hover:not(.provider-picker-option-unavailable), .provider-picker-embedded .provider-picker-option:focus-within, .provider-picker-embedded .provider-picker-option-selected {
  background: var(--openbot-bg-control-hover);
}
.settings-modal .provider-picker-name {
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-lg);
}
.settings-modal :where(.provider-picker-email, .provider-picker-check-error) {
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.settings-modal .provider-picker-account .provider-picker-name {
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.settings-modal .provider-picker-account .provider-picker-email {
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.settings-modal .provider-picker-status {
  font-variant-numeric: tabular-nums;
}
.app-settings-modal-shell .settings-modal-select {
  width: 168px;
}
.app-settings-modal-shell .settings-modal-select .ui-select-trigger {
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-secondary);
}
.app-settings-modal-shell .settings-modal-update-track-select {
  width: 112px;
}
.app-settings-modal-shell .settings-modal-update-actions {
  flex-wrap: wrap;
}
.app-settings-modal-shell .settings-modal-update-status {
  text-wrap: pretty;
}
.app-settings-modal-shell .settings-modal-update-status-active {
  color: var(--openbot-accent);
}
.app-settings-modal-shell .settings-modal-error {
  color: var(--openbot-danger);
}
.settings-identity-name-row.ui-item, .settings-identity-image-row.ui-item {
  min-height: 72px;
}
.settings-identity-name-control {
  --settings-identity-error-duration: 280ms;
  position: relative;
  width: 220px;
  height: var(--openbot-control-md);
}
.settings-identity-name-input.ui-input {
  width: 100%;
  transition: border-color var(--openbot-duration-normal) ease-out;
  will-change: transform;
}
.settings-identity-name-input.is-shaking {
  animation: settings-identity-name-shake 280ms linear;
}
.settings-identity-name-error {
  position: absolute;
  top: calc(100% + var(--openbot-space-0-5));
  right: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--settings-identity-error-duration) ease-out, visibility 0s linear var(--settings-identity-error-duration);
}
.settings-identity-name-control[data-invalid] .settings-identity-name-error {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--settings-identity-error-duration) ease-out, visibility 0s linear;
}
.settings-identity-image-control {
  gap: var(--openbot-space-2);
}
.settings-identity-image-picker {
  position: relative;
  display: flex;
}
.settings-identity-image-trigger {
  position: relative;
  width: calc(var(--openbot-control-xl) + var(--openbot-space-2));
  height: calc(var(--openbot-control-xl) + var(--openbot-space-2));
  overflow: hidden;
}
.settings-modal-save-bar {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-4);
  border-top: 1px solid var(--openbot-border);
  background: var(--openbot-bg-surface);
  padding: var(--openbot-space-3) var(--openbot-space-6);
}
.settings-modal-save-actions {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
}
.settings-modal-readonly-value {
  min-width: 180px;
  max-width: 300px;
  overflow-wrap: anywhere;
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
  text-align: right;
  user-select: text;
}
.settings-modal-profile-photo-trigger {
  border-radius: var(--openbot-radius-pill);
}
.settings-modal-avatar {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-hover);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
}
.settings-modal-avatar > img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  outline: 1px solid var(--openbot-image-outline);
  outline-offset: -1px;
}
@keyframes settings-identity-name-shake {
  0%, 100% {
    transform: translateX(0);
  }
  28.57% {
    transform: translateX(6px);
  }
  57.14% {
    transform: translateX(-6px);
  }
  78.57% {
    transform: translateX(4px);
  }
}
@keyframes settings-modal-tab-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes settings-modal-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.965);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (max-width: 720px) {
  .settings-modal {
    width: calc(100vw - 24px);
    height: calc(100dvh - 24px);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  .settings-modal-nav {
    display: flex;
    overflow-x: auto;
  }
  .settings-modal-nav-item {
    width: auto;
    flex: 0 0 auto;
  }
  .settings-modal-header {
    padding: var(--openbot-space-4);
  }
  .settings-modal-content {
    gap: var(--openbot-space-4);
    padding: 0 var(--openbot-space-4) calc(var(--openbot-space-4) + var(--settings-modal-floating-space, 0px));
  }
  :is(.app-settings-modal-shell, .server-settings-modal-shell).settings-modal {
    width: calc(100vw - 24px);
    height: calc(100dvh - 24px);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  :is(.app-settings-modal-shell, .server-settings-modal-shell) .settings-modal-header {
    padding: var(--openbot-space-4);
  }
  :is(.app-settings-modal-shell, .server-settings-modal-shell) .settings-modal-content, :is(.app-settings-modal-shell, .server-settings-modal-shell) .settings-modal-tab-panel {
    gap: var(--openbot-space-6);
  }
  :is(.app-settings-modal-shell, .server-settings-modal-shell) .settings-modal-content {
    padding: 0 var(--openbot-space-4) var(--openbot-space-4);
  }
  .settings-identity-name-row, .settings-identity-image-row, .settings-modal-account-email-row {
    align-items: flex-start;
    flex-direction: column;
  }
  .settings-identity-name-control {
    width: min(320px, 100%);
    max-width: 320px;
    height: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--openbot-control-md) var(--openbot-leading-sm);
    align-items: stretch;
    row-gap: var(--openbot-space-0-5);
  }
  .settings-identity-name-error {
    position: static;
  }
  .settings-identity-image-control, .settings-modal-account-email-row .ui-item-actions {
    width: 100%;
    max-width: none;
    justify-content: space-between;
  }
  .settings-modal-readonly-value {
    min-width: 0;
    max-width: none;
    text-align: left;
  }
  .settings-modal-save-bar {
    padding-inline: var(--openbot-space-4);
  }
}
@media (max-width: 520px) {
  .settings-modal-save-bar {
    align-items: flex-start;
    flex-direction: column;
  }
  .settings-modal-save-actions {
    width: 100%;
    justify-content: flex-end;
  }
  .app-settings-modal-shell .settings-modal-row.ui-item {
    align-items: flex-start;
    flex-direction: column;
  }
  .app-settings-modal-shell .settings-modal-row .ui-item-actions, .app-settings-modal-shell :is(.settings-modal-select, .settings-modal-update-track-select) {
    width: 100%;
  }
  .app-settings-modal-shell .settings-modal-update-actions {
    justify-content: flex-end;
  }
}
@media (prefers-reduced-motion: reduce) {
  .settings-modal {
    animation: none;
  }
  .settings-modal-scroll-frame::before, .settings-modal-scroll-frame::after {
    transition: none;
  }
  .settings-modal-tab-panel {
    animation: none;
  }
  .settings-identity-name-input.is-shaking {
    animation: none;
    transform: none;
  }
}
.settings-panel .settings-identity-name-row {
  align-items: flex-start;
  flex-direction: column;
}
.settings-panel .settings-identity-name-control {
  width: 100%;
}
.settings-modal-crumbs {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.settings-modal .settings-modal-crumb-parent {
  min-width: 0;
  height: auto;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  color: var(--openbot-text-muted);
  margin-block: calc(-1 * var(--openbot-space-1) - 1px);
  margin-inline: calc(-1 * var(--openbot-space-2) - 1px);
  padding: var(--openbot-space-1) var(--openbot-space-2);
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .settings-modal .settings-modal-crumb-parent:hover:not(:disabled) {
    background: transparent;
    color: var(--openbot-text-primary);
  }
}
.settings-modal-crumb-separator {
  flex: 0 0 auto;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
}
.settings-modal-crumb-current {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-provider-section {
  display: grid;
  gap: var(--openbot-space-2);
}
.settings-dynamic-island-size > .ui-slider-field, .settings-dynamic-island-preview {
  padding: var(--openbot-space-3) var(--openbot-space-4);
}
.settings-dynamic-island-server-mark {
  --server-gradient-logo-size: 32px;
  --server-gradient-logo-radius: var(--openbot-radius-md);
}
.settings-dynamic-island-server-mark > img {
  width: 32px;
  height: 32px;
  border-radius: var(--openbot-radius-md);
}
.settings-dynamic-island-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--openbot-space-3);
}
.settings-dynamic-island-preview-display {
  min-width: 0;
  display: grid;
  gap: var(--openbot-space-1-5);
  margin: 0;
}
.settings-dynamic-island-preview-bar {
  height: 64px;
  display: flex;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-canvas);
  box-shadow: inset 0 0 0 1px var(--openbot-border);
}
.settings-dynamic-island-preview-fit {
  margin-top: 1px;
  display: flex;
  justify-content: center;
  transform-origin: top center;
  scale: var(--settings-dynamic-island-preview-scale, 1);
  transition: scale var(--openbot-duration-slow) var(--openbot-ease-out);
}
.settings-dynamic-island-preview-caption {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-align: center;
}
.settings-voice-key {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-top: var(--openbot-space-2);
}
.settings-voice-key > .ui-input {
  flex: 1;
  min-width: 0;
}
.settings-sound-theme-row {
  flex-wrap: wrap;
}
.settings-sound-theme-row > .sound-theme-picker {
  flex-basis: 100%;
}
.window-rail {
  display: flex;
  width: 52px;
  min-height: 0;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: calc(var(--left-header-height, 38px) + var(--openbot-space-1)) 0 var(--openbot-space-3);
  -webkit-app-region: drag;
}
.window-rail-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-1-5);
  -webkit-app-region: no-drag;
}
.window-rail-button {
  position: relative;
  display: flex;
  width: var(--openbot-control-lg);
  height: var(--openbot-control-lg);
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--openbot-radius-lg);
  background: transparent;
  padding: 0;
  color: var(--openbot-text-muted);
  font: inherit;
  cursor: pointer;
  -webkit-app-region: no-drag;
}
@media (hover: hover) and (pointer: fine) {
  .window-rail-button:hover {
    background: var(--openbot-bg-control-hover);
    color: var(--openbot-text-primary);
  }
}
.window-rail-button[aria-current="page"], .window-rail-button[aria-current="page"]:hover:not(:disabled):not([data-disabled]) {
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
}
.window-rail-button:focus-visible {
  outline: 0;
  box-shadow: var(--openbot-focus-ring);
}
.window-rail-button svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
}
.window-rail-notice {
  position: absolute;
  top: var(--openbot-space-1-5);
  right: var(--openbot-space-1-5);
  width: var(--openbot-space-2);
  height: var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-badge-new);
}
.window-rail-usage-card .account-usage-refresh {
  display: none;
}
.account-usage-popover.window-rail-usage-card {
  transition: none;
  transform-origin: var(--kb-tooltip-content-transform-origin);
}
.window-rail-button.window-rail-usage {
  border-radius: var(--openbot-radius-pill);
}
.window-rail-button .window-rail-usage-ring {
  position: absolute;
  inset: 1px;
  width: 34px;
  height: 34px;
  transform: rotate(-90deg);
}
.window-rail-button .window-rail-usage-logo {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  overflow: visible;
  fill: var(--openbot-provider-current);
}
.window-rail-usage-track {
  stroke: currentcolor;
  opacity: 0.15;
}
.window-rail-usage-arc {
  stroke: var(--openbot-success);
}
.window-rail-usage-arc[data-usage-tone="warning"] {
  stroke: var(--openbot-warning);
}
.window-rail-usage-arc[data-usage-tone="critical"] {
  stroke: var(--openbot-danger);
}
.app-window {
  --window-frame: var(--openbot-bg-canvas);
  @supports (color: color-mix(in lab, red, red)) {
    --window-frame: color-mix(in srgb, var(--openbot-bg-canvas) 50%, var(--openbot-bg-notch));
  }
  --window-edge: var(--openbot-space-1);
  --window-hairline-height: var(--openbot-icon-lg);
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 0;
  grid-template-columns: auto minmax(0, 1fr);
  background: var(--window-frame);
}
.app-window > .window-rail[hidden] {
  display: none;
}
.app-window > .app-frame {
  grid-column: -2;
}
@media (max-width: 720px) {
  .app-window > .window-rail {
    display: none;
  }
}
@media (min-width: 721px) {
  .app-window > .app-frame-edge > .sidebar:not(.sidebar-compact) .sidebar-topbar {
    position: relative;
  }
  .app-window > .app-frame-platform-darwin:not(.app-frame-with-server-rail) > .sidebar:not(.sidebar-compact) .sidebar-topbar {
    padding-left: var(--openbot-space-6);
  }
  .app-window > .app-frame-edge {
    position: relative;
    isolation: isolate;
    padding: 0 calc(var(--window-edge) + 1px) calc(var(--window-edge) + 1px) 0;
    background: var(--window-frame);
  }
  .app-window > .app-frame-edge::before {
    position: absolute;
    z-index: -1;
    inset: calc(var(--left-header-height) - 1px) var(--window-edge) var(--window-edge) 0;
    border: 1px solid var(--openbot-border);
    border-radius: var(--openbot-radius-card);
    background: var(--openbot-bg-canvas);
    content: "";
    pointer-events: none;
  }
  .app-window > .app-frame-edge.app-frame-with-server-rail::before {
    left: var(--server-rail-width);
  }
  .app-window > .app-frame-edge > .server-rail {
    background: var(--window-frame);
  }
  .app-window > .app-frame-edge > .sidebar, .app-window > .app-frame-edge :is(.conversation-panel, .direct-conversation, .diagram-view), .app-window > .app-frame-edge :is(.settings-panel, .browser-panel) {
    background: transparent;
  }
  .app-window > .app-frame-edge :is(.conversation-panel, .direct-conversation)::before {
    content: none;
  }
  .app-window > .app-frame-edge > .sidebar::before {
    inset: var(--left-header-height) 0 0 auto;
    width: 1px;
    border: 0;
    border-radius: 0;
    background: var(--openbot-border);
  }
  .app-window > .app-frame-edge > .sidebar:not(.sidebar-compact) .sidebar-topbar::after, .app-window > .app-frame-edge :is(.settings-panel, .browser-panel) > :is(.settings-panel-header, .file-preview-header, .browser-preview-header)::before {
    position: absolute;
    top: 50%;
    width: 1px;
    height: var(--window-hairline-height);
    translate: 0 -50%;
    background: var(--openbot-border-strong);
    content: "";
    pointer-events: none;
  }
  .app-window > .app-frame-edge > .sidebar:not(.sidebar-compact) .sidebar-topbar::after {
    right: 0;
  }
  .app-window > .app-frame-edge :is(.settings-panel, .browser-panel) {
    border-left: 0;
  }
  .app-window > .app-frame-edge :is(.settings-panel, .browser-panel)::before {
    inset: calc(var(--left-header-height) - 1px) auto 0 0;
    width: 1px;
    border: 0;
    border-radius: 0;
    background: var(--openbot-border);
  }
  .app-window > .app-frame-edge :is(.settings-panel, .browser-panel) > :is(.settings-panel-header, .file-preview-header, .browser-preview-header) {
    position: relative;
  }
  .app-window > .app-frame-edge :is(.settings-panel, .browser-panel) > :is(.settings-panel-header, .file-preview-header, .browser-preview-header)::before {
    left: 0;
  }
  .app-window > .app-frame-edge .side-panel-docked > :is(.settings-panel, .browser-panel)::before {
    top: 0;
  }
  .app-window > .app-frame-edge .side-panel-docked > :is(.settings-panel, .browser-panel) > :is(.settings-panel-header, .file-preview-header, .browser-preview-header)::before {
    content: none;
  }
  .app-window > .app-frame-edge .side-panel-maximized > :is(.settings-panel, .browser-panel) {
    border-bottom-right-radius: calc(var(--openbot-radius-card) - 1px);
    background: var(--openbot-bg-canvas);
  }
  .app-window > .app-frame-edge .diagram-view-body {
    border-top: 0;
    border-right: 0;
    border-radius: 0 0 calc(var(--openbot-radius-card) - 1px) 0;
  }
  .app-window > .app-frame-edge .conversation-header-actions {
    gap: var(--openbot-space-2);
  }
  .app-window > .app-frame-edge .conversation-header :is(.provider-model-trigger, .header-panel-toggle) {
    height: var(--openbot-control-sm);
    border-color: transparent;
    border-radius: var(--openbot-radius-md);
    background: transparent;
    box-shadow: none;
    color: var(--openbot-text-secondary);
  }
  .app-window > .app-frame-edge .conversation-header .header-panel-toggle {
    width: var(--openbot-control-sm);
    min-width: var(--openbot-control-sm);
    padding: 0;
    color: var(--openbot-text-muted);
  }
  @media (hover: hover) and (pointer: fine) {
    .app-window > .app-frame-edge .conversation-header :is(.provider-model-trigger, .header-panel-toggle):hover {
      border-color: transparent;
      background: var(--openbot-bg-control-hover);
      color: var(--openbot-text-primary);
    }
  }
  .app-window > .app-frame-edge .conversation-header :is(.provider-model-trigger, .header-panel-toggle):is([aria-expanded="true"], [data-expanded]):not( .computer-button-agent-active, .side-panel-toggle ) {
    border-color: transparent;
    background: var(--openbot-bg-control-active);
    color: var(--openbot-text-primary);
  }
  .app-window > .app-frame-edge .conversation-header-actions > .side-panel-toggle {
    position: relative;
    margin-left: calc(var(--openbot-space-2) + 1px);
    overflow: visible;
  }
  .app-window > .app-frame-edge .conversation-header-actions > .side-panel-toggle::before {
    position: absolute;
    top: 50%;
    left: calc(-1 * var(--openbot-space-2) - 1px);
    width: 1px;
    height: var(--window-hairline-height);
    translate: 0 -50%;
    background: var(--openbot-border-strong);
    content: "";
    pointer-events: none;
  }
  .app-frame-edge > .window-page > :is(.agent-usage, .schedule-pane, .tasks-page) {
    background: transparent;
  }
  .app-window > .app-frame-edge > .window-page .agent-usage-header, .app-window > .app-frame-edge > .window-page .routine-planner-title {
    flex: none;
    height: var(--left-header-height);
    flex-wrap: nowrap;
    padding: 0 var(--openbot-space-3);
    border-bottom: 0;
    -webkit-app-region: drag;
  }
  .app-window > .app-frame-edge > .window-page :is(.agent-usage-header, .routine-planner-title) > :is(.agent-usage-identity, .agent-usage-controls, .routine-planner-identity, p) {
    flex-wrap: nowrap;
    gap: var(--openbot-space-2);
    -webkit-app-region: no-drag;
  }
  .app-window > .app-frame-edge > .window-page :is(.agent-usage-identity, .routine-planner-identity) .ui-icon-button {
    margin-left: 0;
  }
  .app-window > .app-frame-edge > .window-page :is(.agent-usage-identity, .routine-planner-title) h2 {
    gap: var(--openbot-space-2);
    font-size: var(--openbot-text-md);
    font-weight: var(--openbot-weight-medium);
    white-space: nowrap;
    color: var(--openbot-text-primary);
  }
  .app-window > .app-frame-edge > .window-page :is(.agent-usage-identity, .routine-planner-identity) {
    overflow: hidden;
  }
  .app-window > .app-frame-edge > .window-page :is(.agent-usage-controls, .routine-planner-title > p) {
    flex: none;
  }
  .app-window > .app-frame-edge > .window-page :is(.agent-usage-header, .routine-planner-title) :is(.ui-select-trigger, .ui-icon-button) {
    height: var(--openbot-control-sm);
    border-color: transparent;
    border-radius: var(--openbot-radius-md);
    background: transparent;
    box-shadow: none;
    color: var(--openbot-text-secondary);
  }
  .app-window > .app-frame-edge > .window-page :is(.agent-usage-header, .routine-planner-title) .ui-icon-button {
    width: var(--openbot-control-sm);
  }
  @media (hover: hover) {
    .app-window > .app-frame-edge > .window-page :is(.agent-usage-header, .routine-planner-title) :is(.ui-select-trigger, .ui-icon-button):hover {
      background: var(--openbot-bg-control-hover);
      color: var(--openbot-text-primary);
    }
  }
  .app-window > .app-frame-edge > .window-page > .schedule-pane {
    padding: 0;
    overflow: hidden;
  }
  .app-window > .app-frame-edge > .window-page .routine-planner {
    height: 100%;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0;
  }
  .app-window > .app-frame-edge > .window-page .routine-planner-header {
    gap: 0;
  }
  .app-window > .app-frame-edge > .window-page .routine-planner-toolbar {
    padding: var(--openbot-space-4) var(--openbot-space-6) 0;
  }
  .app-window > .app-frame-edge > .window-page .routine-planner-body {
    min-height: 0;
    overflow-y: auto;
    padding: var(--openbot-space-4) var(--openbot-space-6) var(--openbot-space-6);
  }
  .app-window > .app-frame-edge > .window-page > .tasks-page {
    box-sizing: border-box;
    padding: var(--left-header-height) calc(var(--window-edge) + 1px) calc(var(--window-edge) + 1px) 0;
  }
  .app-window > .app-frame-edge > .window-page .tasks-page-header {
    position: absolute;
    top: 0;
    right: 0;
    left: var(--left-panel-width);
    height: var(--left-header-height);
    padding: 0 var(--openbot-space-3);
    -webkit-app-region: drag;
  }
  .app-window > .app-frame-edge > .window-page .tasks-page-header h2 {
    font-size: var(--openbot-text-md);
    font-weight: var(--openbot-weight-medium);
    white-space: nowrap;
  }
  .app-window > .app-frame-edge > .window-page .tasks-page-column {
    padding-top: var(--openbot-space-6);
  }
  .app-window > .app-frame-edge > .window-page .tasks-page-side {
    border-bottom-right-radius: calc(var(--openbot-radius-card) - 1px);
  }
  .app-frame-edge:not([data-window-page-kind="agents"]) > .window-page {
    position: absolute;
    grid-row: 1 / -1;
    grid-column: 1 / -1;
    inset: 0 0 0 1px;
  }
  .app-frame-edge[data-window-page-kind="settings"] > .window-page {
    top: var(--left-header-height);
  }
  .app-frame-edge[data-window-page-kind="titled"] > .window-page {
    pointer-events: none;
  }
  .app-frame-edge.app-frame-with-server-rail:not([data-window-page-kind="agents"]) > .window-page {
    left: calc(var(--server-rail-width) + 1px);
  }
  .app-frame-edge:not([data-window-page-kind="agents"]) > .sidebar > :not(.sidebar-topbar), .app-frame-edge:not([data-window-page-kind="agents"]) > .left-panel-resizer {
    visibility: hidden;
  }
  .app-frame-edge:not([data-window-page-kind="agents"]) > .sidebar .sidebar-new-button {
    display: none;
  }
  .app-frame-edge[data-window-page-kind="titled"] > .sidebar::before {
    display: none;
  }
  .app-window > .app-frame-edge[data-window-page-kind="titled"] > .window-page :is(.agent-usage-header, .routine-planner-title, .skills-marketplace-topbar) {
    margin-left: var(--left-panel-width);
  }
  .app-frame-edge[data-window-page-kind="titled"] > .window-page :is( .agent-usage-header, .routine-planner-title, .agent-usage-body, .routine-planner-toolbar, .routine-planner-body, .marketplace-crumbs, .skills-marketplace-body, .tasks-page-header, .tasks-page-scroll, .tasks-page-side ) {
    pointer-events: auto;
  }
  .app-window > .app-frame-edge > .window-page > .skills-marketplace-page {
    grid-template-rows: var(--left-header-height) minmax(0, 1fr);
  }
  .app-window > .app-frame-edge > .window-page .skills-marketplace-topbar {
    min-height: 0;
    padding: 0 var(--openbot-space-3);
    border-bottom: 0;
    -webkit-app-region: drag;
  }
  .app-window > .app-frame-edge > .window-page .marketplace-crumbs {
    flex: 0 1 auto;
    -webkit-app-region: no-drag;
  }
  .app-window > .app-frame-edge > .window-page .skills-marketplace-topbar .marketplace-title {
    font-size: var(--openbot-text-md);
    font-weight: var(--openbot-weight-medium);
    white-space: nowrap;
  }
  .app-window > .app-frame-edge > .window-page :is(.agent-usage-identity, .routine-planner-identity, .tasks-page-header) > .ui-icon-button, .app-window > .app-frame-edge > .window-page :is(.agent-usage-identity, .routine-planner-identity, .tasks-page-header) > h2 > span {
    display: none;
  }
  .app-frame-edge > .window-page :is(.agent-usage-identity, .routine-planner-identity, .tasks-page-header) h2:focus {
    outline: none;
  }
}
.settings-page {
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 0;
  grid-template-columns: max(var(--left-panel-width, 280px), 220px) minmax(0, 1fr);
}
.settings-page-nav {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  gap: var(--openbot-space-1);
  overflow: hidden;
  border-right: 1px solid var(--openbot-border);
  padding: var(--openbot-space-4) var(--openbot-space-3) 0;
}
.settings-page-sections, .settings-page-results {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  padding-bottom: var(--openbot-space-3);
}
.settings-page-title {
  margin: 0 0 var(--openbot-space-3);
  padding: 0 var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-lg);
}
.settings-page-title:focus {
  outline: none;
}
.settings-page-search {
  flex: none;
  border-radius: var(--openbot-radius-pill);
  padding: 0 var(--openbot-space-3);
}
.settings-page-search > svg {
  flex: none;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.settings-page-search input {
  height: 100%;
  padding: 0;
}
.settings-page-sections[hidden] {
  display: none;
}
.settings-page-empty {
  margin: var(--openbot-space-4) 0 var(--openbot-space-1);
  padding: 0 var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.settings-page-server {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
}
.settings-page-server .server-menu-mark {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.settings-page-nav-group .settings-modal-nav-item {
  padding-inline: var(--openbot-space-3);
}
.settings-page-nav-group .settings-modal-nav-item[data-selected] {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}
.settings-page-results {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-0-5);
  margin: var(--openbot-space-2) 0 0;
  padding-inline: 0;
  list-style: none;
}
.settings-page-result {
  display: flex;
  width: 100%;
  height: auto;
  flex-direction: column;
  align-items: stretch;
  gap: var(--openbot-space-0-5);
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .settings-page-result:hover {
    background: var(--openbot-bg-control-hover);
  }
}
.settings-page-result:focus-visible {
  outline: 0;
  box-shadow: var(--openbot-focus-ring);
}
.settings-page-result-section {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.settings-page-result-section svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.settings-page-result-title {
  overflow: hidden;
  padding-left: calc(var(--openbot-icon-sm) + var(--openbot-space-2));
  font-size: var(--openbot-text-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-page-content {
  position: relative;
  min-width: 0;
  min-height: 0;
}
.settings-page-content > .settings-modal.settings-modal-page {
  width: 100%;
  height: 100%;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  animation: none;
  will-change: auto;
}
.settings-page-content > .settings-modal-page > .settings-modal-main {
  background: transparent;
}
.settings-page-content > .settings-modal-page :is(.settings-modal-header, .settings-modal-content) {
  width: 100%;
  max-width: 784px;
  margin-inline: auto;
}
.settings-page-content [data-search-match] {
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control-active);
}
@media (max-width: 720px) {
  .settings-page {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  .settings-page-nav {
    border-right: 0;
    border-bottom: 1px solid var(--openbot-border);
    padding: var(--openbot-space-3) var(--openbot-space-3) 0;
  }
  .settings-page-title {
    margin-bottom: var(--openbot-space-2);
  }
  .settings-page-sections, .settings-page-results {
    max-height: 40dvh;
    padding-bottom: var(--openbot-space-2);
  }
}
.opencode-key-backdrop {
  z-index: calc(var(--openbot-layer-dialog) + 1);
}
.opencode-key-dialog {
  width: min(400px, 100%);
  max-height: calc(100dvh - var(--openbot-space-6) * 2);
  overflow-y: auto;
  outline: 0;
  border-radius: var(--openbot-radius-xl);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-6);
  color: var(--openbot-text-primary);
  animation: opencode-key-dialog-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}
.opencode-key-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--openbot-space-1);
}
.opencode-key-title {
  margin: 0;
  font-size: var(--openbot-text-xl);
  line-height: var(--openbot-leading-xl);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: var(--openbot-tracking-tight);
}
.opencode-key-description {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.opencode-key-status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success);
}
.opencode-key-form {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
  margin: var(--openbot-space-4) 0 0;
}
.opencode-key-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
}
@keyframes opencode-key-dialog-in {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
}
.settings-mobile-connect-code-collapse {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows var(--openbot-duration-overlay) var(--openbot-ease-out), opacity var(--openbot-duration-normal) ease-out;
}
@starting-style {
  .settings-mobile-connect-code-collapse {
    grid-template-rows: 0fr;
    opacity: 0;
  }
}
.settings-mobile-connect-code-collapse[data-collapsing] {
  grid-template-rows: 0fr;
  opacity: 0;
}
.settings-mobile-connect-code-collapse-body {
  min-height: 0;
  overflow: hidden;
}
.settings-mobile-connect-qr-stage {
  position: relative;
  flex: 0 0 auto;
}
.settings-mobile-connect-qr-stage .ui-qr-code {
  transition: opacity var(--openbot-duration-normal) ease-out, filter var(--openbot-duration-overlay) ease-out, transform var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.settings-mobile-connect-qr-stage[data-success] .ui-qr-code {
  opacity: 0.18;
  filter: blur(2px);
  transform: scale(0.97);
}
.settings-mobile-connect-success-mark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--openbot-success);
  animation: settings-mobile-connect-success-enter var(--openbot-duration-overlay) var(--openbot-ease-out) both;
}
.settings-mobile-connect-success-mark::before {
  position: absolute;
  width: 84px;
  height: 84px;
  border: 1px solid var(--openbot-success);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success-soft);
  content: "";
  animation: settings-mobile-connect-success-ring 600ms var(--openbot-ease-out) both;
}
.settings-mobile-connect-success-mark > svg {
  position: relative;
  width: 58px;
  height: 58px;
  padding: var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface-raised);
  filter: drop-shadow(0 6px 16px var(--openbot-shadow-popover-ambient));
  stroke-width: var(--openbot-icon-stroke);
  animation: settings-mobile-connect-success-pop 420ms var(--openbot-ease-out) both;
}
.settings-mobile-connect-success-mark > svg path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: settings-mobile-connect-check-draw 360ms var(--openbot-duration-fast) var(--openbot-ease-out) forwards;
}
.settings-mobile-connect-code-copy {
  max-width: 240px;
  display: grid;
  gap: var(--openbot-space-2);
}
.settings-mobile-connect-code-title {
  font-weight: var(--openbot-weight-semibold);
}
.settings-mobile-connect-expiry {
  color: var(--openbot-accent-text);
  font-variant-numeric: tabular-nums;
}
.settings-mobile-connect-success-title {
  color: var(--openbot-success);
}
.settings-mobile-connect-expired {
  min-height: 196px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  text-align: center;
}
.settings-mobile-connect-expired > svg {
  width: calc(var(--openbot-icon-lg) + var(--openbot-space-3));
  height: calc(var(--openbot-icon-lg) + var(--openbot-space-3));
  margin-bottom: var(--openbot-space-2);
}
.settings-mobile-devices {
  display: grid;
  gap: var(--openbot-space-3);
}
.settings-mobile-devices-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
}
.settings-mobile-devices-heading h3 {
  margin: 0;
  font-weight: var(--openbot-weight-medium);
}
.settings-mobile-devices-states {
  display: grid;
}
.settings-mobile-devices-state {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(-4px);
  transition: grid-template-rows var(--openbot-duration-overlay) var(--openbot-ease-out), opacity var(--openbot-duration-normal) ease-out, transform var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.settings-mobile-devices-state[data-expanded] {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: translateY(0);
}
.settings-mobile-devices-state-body {
  min-height: 0;
  overflow: hidden;
}
.settings-mobile-devices-empty {
  min-height: 88px;
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  padding: var(--openbot-space-4);
  color: var(--openbot-text-muted);
}
.settings-mobile-devices-empty > svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  flex: 0 0 auto;
}
.settings-mobile-devices-empty > div {
  display: grid;
  gap: var(--openbot-space-1);
}
.settings-mobile-devices-empty-title {
  color: var(--openbot-text-secondary);
  font-weight: var(--openbot-weight-medium);
}
.settings-mobile-devices-table-frame {
  overflow-x: auto;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
}
.settings-mobile-devices-table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.settings-mobile-devices-table th, .settings-mobile-devices-table td {
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border-bottom: 1px solid var(--openbot-border);
  text-align: left;
  white-space: nowrap;
}
.settings-mobile-devices-table th {
  color: var(--openbot-text-muted);
  font-weight: var(--openbot-weight-medium);
}
.settings-mobile-devices-table tbody tr:last-child td {
  border-bottom: 0;
}
.settings-mobile-device-name {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}
.settings-mobile-device-name svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  color: var(--openbot-text-muted);
}
.settings-mobile-devices-table td.settings-mobile-device-action {
  width: 1%;
  text-align: right;
}
@keyframes settings-mobile-connect-success-enter {
  from {
    opacity: 0;
  }
}
@keyframes settings-mobile-connect-success-ring {
  from {
    opacity: 0.8;
    transform: scale(0.72);
  }
  to {
    opacity: 0;
    transform: scale(1.35);
  }
}
@keyframes settings-mobile-connect-success-pop {
  from {
    opacity: 0;
    transform: scale(0.62) rotate(-8deg);
  }
  70% {
    transform: scale(1.08) rotate(1deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}
@keyframes settings-mobile-connect-check-draw {
  to {
    stroke-dashoffset: 0;
  }
}
@media (max-width: 720px) {
  .settings-mobile-connect-link-code {
    align-items: center;
    flex-direction: column;
    text-align: center;
  }
  .settings-mobile-connect-code-copy {
    max-width: 320px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .settings-mobile-connect-code-collapse, .settings-mobile-connect-qr-stage .ui-qr-code, .settings-mobile-devices-state {
    transition: none;
  }
  .settings-mobile-connect-success-mark, .settings-mobile-connect-success-mark::before, .settings-mobile-connect-success-mark > svg, .settings-mobile-connect-success-mark > svg path {
    animation: none;
  }
  .settings-mobile-connect-success-mark > svg path {
    stroke-dashoffset: 0;
  }
}
.settings-mobile-app-install {
  display: contents;
}
.settings-mobile-connect-step.ui-item-media {
  min-width: 24px;
  height: 24px;
  padding-inline: var(--openbot-space-1-5);
  display: inline-grid;
  flex: 0 0 auto;
  align-self: flex-start;
  place-items: center;
  margin-top: 1px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  font-weight: var(--openbot-weight-medium);
  line-height: 1;
}
.settings-mobile-connect-generate.ui-button {
  min-width: 160px;
}
.settings-mobile-connect-link {
  padding: var(--openbot-space-3) var(--openbot-space-4);
}
.settings-mobile-connect-link-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2) var(--openbot-space-4);
}
.settings-mobile-connect-link-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-2);
}
.settings-mobile-connect-link-reveal {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows var(--openbot-duration-overlay) var(--openbot-ease-out), opacity var(--openbot-duration-normal) ease-out;
}
.settings-mobile-connect-link-reveal[data-expanded] {
  grid-template-rows: 1fr;
  opacity: 1;
}
.settings-mobile-connect-link-code {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-6);
  padding-top: var(--openbot-space-4);
}
@media (prefers-reduced-motion: reduce) {
  .settings-mobile-connect-link-reveal {
    transition: none;
  }
}
.settings-mobile-app-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
}
.settings-mobile-app-tab > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
}
.settings-mobile-app-panels {
  position: relative;
  padding: var(--openbot-space-4);
}
.settings-mobile-app-panels::before {
  position: absolute;
  top: 0;
  right: var(--openbot-space-4);
  left: var(--openbot-space-4);
  height: 1px;
  background: var(--openbot-border);
  pointer-events: none;
  content: "";
}
.settings-mobile-app-panel {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-6);
}
.settings-mobile-app-qr {
  transform: scale(0.96);
  transition: transform var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.settings-mobile-app-panel[data-selected] .settings-mobile-app-qr {
  transform: scale(1);
}
.settings-mobile-app-qr .ui-qr-code-mark {
  gap: 3px;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity var(--openbot-duration-normal) ease-out, transform var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.settings-mobile-app-panel[data-selected] .settings-mobile-app-qr .ui-qr-code-mark {
  opacity: 1;
  transform: scale(1);
  transition-delay: var(--openbot-duration-fast);
}
.settings-mobile-app-qr-platform {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}
.settings-mobile-app-qr-link {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  color: var(--openbot-text-muted-on-light);
  stroke-width: 2.5;
  opacity: 0;
  transform: rotate(-45deg) scale(0.6);
  transition: opacity var(--openbot-duration-normal) ease-out, transform var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.settings-mobile-app-panel[data-selected] .settings-mobile-app-qr-link {
  opacity: 1;
  transform: rotate(0) scale(1);
  transition-delay: calc(var(--openbot-duration-fast) * 2);
}
.settings-mobile-app-qr-logo {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}
.settings-mobile-app-details {
  min-width: 0;
  display: grid;
  justify-items: start;
  gap: var(--openbot-space-2);
}
.settings-mobile-app-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--openbot-space-2);
}
.settings-mobile-app-title {
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-semibold);
}
.settings-mobile-app-steps {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-1-5);
  margin: var(--openbot-space-1) 0;
  padding-left: var(--openbot-space-4);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  list-style: decimal;
}
.settings-mobile-app-steps > li::marker {
  color: var(--openbot-text-dim);
  font-variant-numeric: tabular-nums;
}
.settings-mobile-app-copy > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.settings-mobile-device-platform {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.settings-mobile-device-platform > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
}
.settings-mobile-devices-list {
  display: grid;
  gap: var(--openbot-space-3);
}
.settings-mobile-devices-table tbody tr {
  transition: opacity var(--openbot-duration-overlay) var(--openbot-ease-out);
}
@starting-style {
  .settings-mobile-devices-table tbody tr {
    opacity: 0;
  }
}
@media (max-width: 720px) {
  .settings-mobile-app-panel {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media (prefers-reduced-motion: reduce) {
  .settings-mobile-app-qr, .settings-mobile-app-qr .ui-qr-code-mark, .settings-mobile-app-qr-link, .settings-mobile-devices-table tbody tr {
    transition: none;
  }
  .settings-mobile-app-qr, .settings-mobile-app-qr .ui-qr-code-mark, .settings-mobile-app-qr-link {
    transform: none;
  }
}
.hosted-sites-overview {
  display: grid;
  gap: var(--openbot-space-1);
}
.hosted-sites-list .hosted-sites-row {
  min-height: 72px;
  align-items: center;
}
.hosted-sites-list .ui-item-content {
  min-width: 0;
}
.hosted-sites-link.ui-button {
  width: min(100%, 320px);
  justify-content: flex-start;
  color: var(--openbot-accent-text);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-md);
  text-align: left;
}
.hosted-sites-link-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hosted-sites-actions {
  flex-wrap: nowrap;
  justify-content: flex-end;
}
@media (max-width: 700px) {
  .hosted-sites-list .hosted-sites-row {
    align-items: flex-start;
    flex-direction: column;
  }
  .hosted-sites-actions {
    width: 100%;
    justify-content: flex-start;
  }
  .hosted-sites-actions > .ui-button {
    flex: 1;
  }
}
.integration-logo-tile {
  --integration-tile: 36px;
  display: inline-grid;
  flex: none;
  width: var(--integration-tile);
  height: var(--integration-tile);
  place-items: center;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-primary);
}
.integration-logo-tile[data-size="lg"] {
  --integration-tile: 48px;
  border-radius: var(--openbot-radius-lg);
}
.integration-logo-tile > svg {
  width: 55%;
  height: 55%;
}
.integration-status {
  gap: var(--openbot-space-1);
}
.integration-status-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--openbot-radius-pill);
  background: currentColor;
}
.integration-status[data-status="unavailable"] .integration-status-dot {
  background: var(--openbot-transparent);
  box-shadow: inset 0 0 0 1px currentColor;
}
.integration-detail-header {
  display: flex;
  gap: var(--openbot-space-3);
  align-items: center;
}
.integration-detail-copy {
  display: grid;
  flex: 1;
  gap: var(--openbot-space-1);
  min-width: 0;
}
.integration-detail-title {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
}
.integration-detail-actions {
  display: flex;
  flex: none;
  gap: var(--openbot-space-2);
}
.integration-wizard {
  display: grid;
  gap: var(--openbot-space-4);
  padding: var(--openbot-space-6);
  border-radius: var(--openbot-radius-xl);
  background: var(--openbot-bg-sheet);
  box-shadow: var(--openbot-shadow-dialog);
}
.integration-wizard-head {
  display: grid;
  gap: var(--openbot-space-2);
  justify-items: center;
  text-align: center;
}
.integration-wizard-logos {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
  margin-bottom: var(--openbot-space-2);
}
.integration-wizard-app {
  width: 36px;
  height: 36px;
}
.integration-wizard-link {
  width: 40px;
  height: 2px;
  border-radius: var(--openbot-radius-pill);
  background: radial-gradient(circle, var(--openbot-accent) 0 1px, var(--openbot-transparent) 1.5px) 0 50% / 8px 2px repeat-x;
  animation: integration-wizard-flow 0.6s linear infinite;
}
@keyframes integration-wizard-flow {
  to {
    background-position-x: 8px;
  }
}
.integration-wizard-logos[data-link="connected"] .integration-wizard-link {
  background: var(--openbot-success);
  animation: none;
}
.integration-wizard-logos[data-link="broken"] .integration-wizard-link {
  background: radial-gradient(circle, var(--openbot-border-strong) 0 1px, var(--openbot-transparent) 1.5px) 0 50% / 8px 2px repeat-x;
  animation: none;
}
.integration-wizard-target {
  display: inline-grid;
  border-radius: var(--openbot-radius-md);
}
.integration-wizard-logos[data-link="connecting"] .integration-wizard-target {
  animation: integration-wizard-pulse 1.8s var(--openbot-ease-out) infinite;
}
.integration-wizard-logos[data-link="connected"] .integration-wizard-target {
  box-shadow: 0 0 0 3px var(--openbot-success);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--openbot-success) 30%, var(--openbot-transparent));
  }
}
@keyframes integration-wizard-pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--openbot-accent) 45%, var(--openbot-transparent));
  }
  100% {
    box-shadow: 0 0 0 8px var(--openbot-transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .integration-wizard-link, .integration-wizard-logos[data-link="connecting"] .integration-wizard-target {
    animation: none;
  }
}
.integration-wizard-body {
  display: grid;
  gap: var(--openbot-space-3);
}
.integration-wizard-foot {
  display: flex;
  gap: var(--openbot-space-2);
  justify-content: flex-end;
}
.integration-wizard-foot .ui-button > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.integration-dialog-backdrop {
  z-index: calc(var(--openbot-layer-dialog) + 1);
}
.integration-wizard-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: calc(var(--openbot-layer-dialog) + 1);
  width: min(440px, calc(100vw - var(--openbot-space-6) * 2));
  max-height: calc(100dvh - var(--openbot-space-6) * 2);
  overflow-y: auto;
  outline: 0;
  transform: translate(-50%, -50%);
}
.integration-wizard-dialog h2 {
  margin: 0;
}
.integration-dialog-close {
  position: absolute;
  top: var(--openbot-space-3);
  right: var(--openbot-space-3);
}
.integration-stepper {
  display: flex;
  align-items: center;
  margin: 0 0 var(--openbot-space-2);
  padding: 0;
  list-style: none;
}
.integration-step {
  display: flex;
  align-items: center;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.integration-step + .integration-step::before {
  display: block;
  width: 24px;
  height: 2px;
  margin-inline: var(--openbot-space-1);
  border-radius: var(--openbot-radius-pill);
  background: linear-gradient(to right, var(--openbot-success), var(--openbot-accent)) no-repeat, var(--openbot-border-strong);
  background-size: 0% 100%, auto;
  content: "";
}
.integration-step + .integration-step[data-state="current"]::before {
  background-size: 100% 100%, auto;
  animation: integration-step-fill 0.4s var(--openbot-ease-out);
}
.integration-step + .integration-step[data-state="done"]::before {
  background: linear-gradient(var(--openbot-success), var(--openbot-success)) no-repeat, var(--openbot-border-strong);
  background-size: 100% 100%, auto;
  animation: integration-step-fill 0.4s var(--openbot-ease-out);
}
@keyframes integration-step-fill {
  from {
    background-size: 0% 100%, auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .integration-step + .integration-step[data-state="current"]::before, .integration-step + .integration-step[data-state="done"]::before {
    animation: none;
  }
}
.integration-step-index {
  display: inline-grid;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  font-weight: var(--openbot-weight-medium);
  line-height: 1;
}
.integration-step[data-state="current"] {
  color: var(--openbot-text-primary);
}
.integration-step[data-state="current"] .integration-step-index {
  border-color: var(--openbot-accent);
  background: var(--openbot-accent);
  color: var(--openbot-text-on-accent);
}
.integration-step[data-state="done"] .integration-step-index {
  border-color: var(--openbot-success);
  color: var(--openbot-success);
}
.integrations-hub {
  display: grid;
  gap: var(--openbot-space-6);
}
.integrations-hub-row {
  position: relative;
  border-radius: var(--openbot-radius-md);
  transition: background-color var(--openbot-duration-hover) var(--openbot-ease-out);
}
.integrations-hub-row:has(> .integrations-hub-hitarea:hover) {
  background: var(--openbot-hover);
}
.integrations-hub-hitarea {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: var(--openbot-transparent);
  cursor: pointer;
  transition: none;
}
.integrations-hub-hitarea:hover:not(:disabled):not([data-disabled]) {
  background: var(--openbot-transparent);
}
.integrations-hub-hitarea:focus-visible {
  outline: 2px solid var(--openbot-accent-strong);
  outline-offset: -2px;
}
.integrations-hub-actions {
  gap: var(--openbot-space-3);
}
.integrations-hub-actions .ui-button {
  position: relative;
  z-index: 2;
}
.integrations-hub-chevron {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  margin: 0 var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
}
.integrations-hub-title {
  display: inline-flex;
  gap: var(--openbot-space-2);
  align-items: center;
}
.integrations-hub-summary[data-status="attention"] {
  color: var(--openbot-warning-text);
}
.integrations-face-stack {
  display: inline-flex;
  gap: var(--openbot-space-0-5);
  align-items: center;
}
.integrations-face-more {
  display: inline-grid;
  min-width: 24px;
  height: 24px;
  padding: 0 var(--openbot-space-1);
  place-items: center;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.integrations-agent-face {
  display: inline-block;
  flex: none;
  width: 32px;
  height: 32px;
}
.integrations-agent-face[data-size="sm"] {
  width: 24px;
  height: 24px;
}
.integrations-agent-face > * {
  width: 100%;
  height: 100%;
}
.github-connector {
  display: grid;
  gap: var(--openbot-space-6);
}
.github-connector-avatar {
  display: inline-grid;
  flex: none;
  width: 32px;
  height: 32px;
  place-items: center;
  overflow: hidden;
  border-radius: var(--openbot-radius-pill);
  background: linear-gradient(135deg, var(--openbot-accent-strong), var(--openbot-onboarding-desktop-indigo));
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
}
.github-connector-avatar > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.github-connector-line {
  padding: var(--openbot-space-3) var(--openbot-space-4);
}
.github-connector-line[data-tone="danger"] {
  color: var(--openbot-danger-text);
}
.github-connector-search {
  position: relative;
  display: flex;
  align-items: center;
  padding: var(--openbot-space-3) var(--openbot-space-4) var(--openbot-space-2);
}
.github-connector-search > svg {
  position: absolute;
  left: calc(var(--openbot-space-4) + var(--openbot-space-3));
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
  pointer-events: none;
}
.github-connector-search input {
  width: 100%;
  padding-left: calc(var(--openbot-space-3) * 2 + var(--openbot-icon-sm));
}
.github-connector-repository-list {
  display: grid;
  max-height: 260px;
  margin: 0;
  padding: 0 var(--openbot-space-2) var(--openbot-space-2);
  overflow-y: auto;
  list-style: none;
}
.github-connector-repository {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
  justify-content: space-between;
  min-height: 36px;
  padding: 0 var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
  transition: background-color var(--openbot-duration-fast) var(--openbot-ease-out);
}
.github-connector-repository:hover {
  background: var(--openbot-hover);
}
.github-connector-repository-name {
  min-width: 0;
}
.github-connector-repository-owner {
  color: var(--openbot-text-muted);
}
.github-connector-private {
  flex: none;
  gap: var(--openbot-space-1);
}
.github-connector-center {
  display: grid;
  min-height: 96px;
  place-items: center;
}
.github-connector-code {
  display: flex;
  gap: var(--openbot-space-1-5);
  justify-content: center;
}
.github-connector-code-char {
  display: inline-grid;
  width: 36px;
  height: 48px;
  place-items: center;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-xl);
  font-weight: var(--openbot-weight-semibold);
}
.github-connector-code-char[data-separator="true"] {
  width: 12px;
  border-color: var(--openbot-transparent);
  background: var(--openbot-transparent);
  color: var(--openbot-text-muted);
}
.github-connector-waiting {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
  justify-content: center;
}
.github-connector-done {
  display: flex;
  gap: var(--openbot-space-3);
  align-items: center;
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-success-wash);
}
.github-connector-done > div {
  display: grid;
  flex: 1;
}
.github-connector-effects {
  display: grid;
  margin: 0;
  padding: var(--openbot-space-1);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  list-style: none;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.github-connector-effects li {
  display: flex;
  gap: var(--openbot-space-3);
  align-items: center;
  padding: var(--openbot-space-2);
}
.github-connector-effects li + li {
  border-top: 1px solid var(--openbot-border);
}
.github-connector-effect-icon {
  display: inline-grid;
  flex: none;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-muted);
}
.github-connector-effect-icon > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.github-connector-effects li[data-tone="danger"] .github-connector-effect-icon {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger-text);
}
.github-connector-effects li[data-tone="success"] .github-connector-effect-icon {
  background: var(--openbot-success-soft);
  color: var(--openbot-success);
}
.github-connector-confirm.ui-button-variant-destructive {
  color: var(--openbot-danger-text);
}
.onepassword-connector {
  display: grid;
  gap: var(--openbot-space-6);
}
.onepassword-connector-link {
  justify-self: start;
  padding-inline: 0;
}
.onepassword-connector-token {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
}
.onepassword-connector-token > :first-child {
  flex: 1;
}
.onepassword-connector-step .ui-item-description {
  white-space: normal;
}
.onepassword-connector-step .ui-item-media {
  color: var(--openbot-text-muted);
}
.onepassword-connector-step[data-step="done"] .ui-item-media {
  color: var(--openbot-success);
}
.onepassword-connector-step[data-step="waiting"] .ui-item-title {
  color: var(--openbot-text-muted);
}
.slack-integration {
  display: grid;
  gap: var(--openbot-space-6);
}
.slack-integration-note {
  margin-top: var(--openbot-space-2);
}
.slack-integration-stack {
  display: grid;
  gap: var(--openbot-space-0-5);
  justify-items: start;
}
.slack-effects {
  display: grid;
  margin: 0;
  padding: var(--openbot-space-1);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  list-style: none;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.slack-effects li {
  display: flex;
  gap: var(--openbot-space-3);
  align-items: center;
  padding: var(--openbot-space-2);
}
.slack-effects li + li {
  border-top: 1px solid var(--openbot-border);
}
.slack-effect-icon {
  display: inline-grid;
  flex: none;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-muted);
}
.slack-effect-icon > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.slack-effects li[data-tone="danger"] .slack-effect-icon {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger-text);
}
.slack-effects li[data-tone="success"] .slack-effect-icon {
  background: var(--openbot-success-soft);
  color: var(--openbot-success);
}
.slack-checklist {
  display: grid;
  gap: var(--openbot-space-2);
  margin: 0;
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  list-style: none;
  font-size: var(--openbot-text-sm);
}
.slack-checklist li {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
}
.slack-checklist li[data-state="done"] {
  color: var(--openbot-text-secondary);
}
.slack-checklist li[data-state="done"] svg {
  color: var(--openbot-success);
}
.slack-checklist-dot {
  width: 14px;
  height: 14px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
}
.slack-waiting {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
  justify-content: center;
}
.slack-orchestrator-card {
  display: flex;
  gap: var(--openbot-space-3);
  align-items: center;
  padding: var(--openbot-space-3);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
}
.slack-orchestrator-model {
  display: grid;
  gap: var(--openbot-space-1);
}
.slack-roles {
  display: grid;
  max-height: 40vh;
  margin: 0;
  padding: var(--openbot-space-1);
  overflow-y: auto;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  list-style: none;
}
.slack-role-row {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
  padding: var(--openbot-space-1) var(--openbot-space-2);
  border-radius: var(--openbot-radius-sm);
  cursor: pointer;
}
.slack-role-row:hover {
  background: var(--openbot-bg-control-hover);
}
.slack-role-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hosted-servers-add {
  display: flex;
}
.hosted-servers-loading {
  display: grid;
  place-items: center;
  padding: var(--openbot-space-8);
  animation: hosted-servers-loading-in var(--openbot-duration-normal) var(--openbot-ease-out) var(--openbot-loading-indicator-delay) both;
}
@keyframes hosted-servers-loading-in {
  from {
    opacity: 0;
  }
}
.hosted-servers-list .hosted-servers-row {
  min-height: 64px;
  align-items: center;
}
.hosted-servers-list .ui-item-content {
  min-width: 0;
}
.hosted-servers-list .ui-item-title {
  gap: var(--openbot-space-2);
}
.hosted-servers-actions {
  flex-wrap: nowrap;
  justify-content: flex-end;
}
@media (max-width: 700px) {
  .hosted-servers-list .hosted-servers-row {
    align-items: flex-start;
    flex-direction: column;
  }
  .hosted-servers-actions {
    width: 100%;
    justify-content: flex-start;
  }
}
.profile-panel {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-6);
}
.profile-hero {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
}
.profile-hero-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(var(--openbot-space-8) * 1.75);
  aspect-ratio: 1;
  border-radius: var(--openbot-radius-pill);
  overflow: hidden;
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-hover);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
}
.profile-hero-avatar > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  outline: 1px solid var(--openbot-image-outline);
  outline-offset: -1px;
  border-radius: inherit;
}
.profile-hero-text {
  min-width: 0;
}
.profile-hero-text h3 {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--openbot-text-xl);
  font-weight: var(--openbot-weight-semibold);
  color: var(--openbot-text-primary);
}
.profile-hero-text p {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--openbot-text-sm);
  color: var(--openbot-text-secondary);
}
.profile-hero-actions {
  display: flex;
  flex: none;
  gap: var(--openbot-space-2);
  margin-inline-start: auto;
}
.profile-card {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-3);
  margin: 0;
  padding: var(--openbot-space-4);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
}
.profile-card.profile-facts, .profile-card.profile-ranking, .profile-card.profile-bars {
  row-gap: 0;
  padding: var(--openbot-space-1) var(--openbot-space-4);
}
.profile-activity-placeholder {
  align-items: flex-start;
}
.profile-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--openbot-space-4);
  align-items: start;
}
.profile-columns > .ui-settings-section {
  height: 100%;
  grid-template-rows: auto 1fr;
}
.profile-facts {
  display: flex;
  flex-direction: column;
  margin: 0;
}
.profile-facts > div, .profile-ranking li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  min-height: calc(var(--openbot-space-8) + var(--openbot-space-3));
  border-top: 1px solid var(--openbot-border);
  font-size: var(--openbot-text-sm);
}
.profile-facts > div:first-child, .profile-ranking li:first-child {
  border-top: 0;
}
.profile-facts dt {
  flex: none;
  color: var(--openbot-text-secondary);
  transition: color var(--openbot-duration-normal) var(--openbot-ease-out);
}
.profile-facts dd {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  min-width: 0;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}
.profile-ranking {
  list-style: none;
}
.profile-ranking li {
  justify-content: flex-start;
  color: var(--openbot-text-primary);
  transition: opacity var(--openbot-duration-normal) var(--openbot-ease-out);
}
.profile-ranking-avatar {
  width: var(--openbot-space-6);
  height: var(--openbot-space-6);
  flex: none;
}
.profile-ranking-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-ranking strong, .profile-bar-value {
  font-variant-numeric: tabular-nums;
  font-weight: var(--openbot-weight-medium);
}
.profile-bars {
  display: grid;
  grid-template-columns: fit-content(45%) 1fr auto;
  column-gap: var(--openbot-space-4);
  margin: 0;
  list-style: none;
}
.profile-bars li {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  min-height: calc(var(--openbot-space-8) + var(--openbot-space-1));
  font-size: var(--openbot-text-sm);
  color: var(--openbot-text-primary);
  transition: opacity var(--openbot-duration-normal) var(--openbot-ease-out);
}
.profile-bar-label {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  min-width: 0;
  white-space: nowrap;
}
.profile-bar-name {
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-bar-track {
  height: var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-primary) 7%, var(--openbot-transparent));
  }
  overflow: hidden;
}
.profile-bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
}
.profile-bar-value {
  text-align: end;
  color: var(--openbot-text-secondary);
}
.profile-heatmap {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1-5);
  min-width: 0;
}
.profile-heatmap-months, .profile-heatmap-grid {
  display: grid;
  grid-template-columns: repeat(var(--profile-columns), minmax(0, 1fr));
  column-gap: var(--openbot-space-0-5);
}
.profile-heatmap-months {
  font-size: var(--openbot-text-sm);
  color: var(--openbot-text-muted);
}
.profile-heatmap-months span {
  white-space: nowrap;
}
.profile-heatmap-grid {
  grid-template-rows: repeat(7, auto);
  grid-auto-flow: column;
  row-gap: var(--openbot-space-0-5);
}
.profile-heat-cell {
  display: block;
  aspect-ratio: 1;
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-primary) 7%, var(--openbot-transparent));
  }
}
.profile-heat-cell[data-empty] {
  background: var(--openbot-transparent);
}
.profile-heat-cell[data-level="1"] {
  background: var(--openbot-accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-accent) 32%, var(--openbot-transparent));
  }
}
.profile-heat-cell[data-level="2"] {
  background: var(--openbot-accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-accent) 55%, var(--openbot-transparent));
  }
}
.profile-heat-cell[data-level="3"] {
  background: var(--openbot-accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-accent) 78%, var(--openbot-transparent));
  }
}
.profile-heat-cell[data-level="4"] {
  background: var(--openbot-accent);
}
.profile-heatmap-grid .profile-heat-cell[data-active] {
  outline: 1px solid var(--openbot-text-primary);
  outline-offset: 1px;
}
.profile-heat-tooltip {
  position: fixed;
  z-index: var(--openbot-layer-toast);
  transform: translate(-50%, calc(-100% - var(--openbot-space-2)));
  pointer-events: none;
  white-space: nowrap;
  box-shadow: var(--openbot-shadow-raised);
}
.profile-heatmap-legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--openbot-space-1);
  font-size: var(--openbot-text-sm);
  color: var(--openbot-text-muted);
}
.profile-heatmap-legend .profile-heat-cell {
  width: var(--openbot-space-3);
}
.profile-dialog {
  width: min(880px, 100%);
  max-height: calc(100dvh - 2 * var(--openbot-space-6));
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
  overflow: auto;
  padding: var(--openbot-space-6);
  outline: 0;
  border-radius: var(--openbot-radius-xl);
  border: 1px solid var(--openbot-dialog-ring);
  background: var(--openbot-bg-sidebar);
  color: var(--openbot-text-primary);
}
.profile-dialog-header, .profile-dialog-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.profile-dialog-footer {
  justify-content: flex-end;
}
.profile-dialog-title {
  margin: 0;
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
}
.profile-share-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--openbot-radius-card);
  box-shadow: var(--openbot-shadow-card);
}
.profile-share-placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: 1200 / 690;
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-surface);
}
.profile-edit {
  width: min(440px, 100%);
}
.profile-edit-form {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
}
.profile-edit-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-2);
}
.profile-edit-photo .profile-edit-photo-trigger {
  width: calc(var(--openbot-space-8) * 2.5);
  height: calc(var(--openbot-space-8) * 2.5);
  overflow: visible;
}
.profile-edit-photo .profile-edit-avatar {
  font-size: var(--openbot-text-xl);
}
.profile-edit-photo-badge {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  display: grid;
  place-items: center;
  width: var(--openbot-space-6);
  height: var(--openbot-space-6);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-secondary);
}
.profile-edit-photo-badge > svg {
  width: var(--openbot-space-3);
  height: var(--openbot-space-3);
}
.profile-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: var(--openbot-space-2);
  margin: 0;
}
.profile-tile {
  --profile-step: calc(var(--openbot-duration-fast) / 3);
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-3);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  transition: background-color var(--openbot-duration-normal) var(--openbot-ease-out);
}
.profile-tile dt {
  font-size: var(--openbot-text-sm);
  color: var(--openbot-text-secondary);
}
.profile-tile dd {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-0-5);
  margin: 0;
}
.profile-tile strong {
  font-size: var(--openbot-text-2xl);
  font-weight: var(--openbot-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--openbot-text-primary);
}
.profile-tile dd > span {
  font-size: var(--openbot-text-sm);
  color: var(--openbot-text-muted);
}
.profile-tile:hover {
  background: linear-gradient(var(--openbot-hover), var(--openbot-hover)), var(--openbot-bg-surface);
}
.profile-tile-value {
  white-space: pre;
}
.profile-tile .profile-tile-value.is-animating .t-digit {
  animation-delay: calc( var(--profile-i, 0) * var(--profile-step) * 1.5 + var(--profile-c, 0) * var(--profile-step) / 2 );
}
.profile-facts > div:hover dt {
  color: var(--openbot-text-primary);
}
.profile-ranking:hover li:not(:hover), .profile-bars:hover li:not(:hover) {
  opacity: 0.45;
}
.profile-bars li:hover .profile-bar-value {
  color: var(--openbot-text-primary);
}
@media (prefers-reduced-motion: no-preference) {
  .profile-panel {
    --profile-step: calc(var(--openbot-duration-fast) / 3);
  }
  .profile-panel > * {
    animation: profile-rise var(--openbot-duration-toast-enter) var(--openbot-ease-out) backwards;
  }
  .profile-panel > :nth-child(2) {
    animation-delay: var(--profile-step);
  }
  .profile-panel > :nth-child(3) {
    animation-delay: calc(var(--profile-step) * 2);
  }
  .profile-panel > :nth-child(4) {
    animation-delay: calc(var(--profile-step) * 3);
  }
  .profile-panel > :nth-child(n + 5) {
    animation-delay: calc(var(--profile-step) * 4);
  }
  .profile-hero-avatar {
    animation: profile-pop var(--openbot-duration-toast-enter) var(--openbot-ease-out) backwards;
  }
  .profile-tile {
    transition: background-color var(--openbot-duration-normal) var(--openbot-ease-out), transform var(--openbot-duration-normal) var(--openbot-ease-out);
  }
  .profile-tile:hover {
    transform: translateY(calc(var(--openbot-space-0-5) * -1));
  }
  .profile-heatmap-grid .profile-heat-cell {
    animation: profile-cell-in var(--openbot-duration-overlay) var(--openbot-ease-out) backwards;
    animation-delay: calc(var(--profile-col, 0) * var(--openbot-duration-fast) / 15);
    transition: transform var(--openbot-duration-fast) var(--openbot-ease-out);
  }
  .profile-heatmap-grid .profile-heat-cell[data-active] {
    position: relative;
    z-index: 1;
    transform: scale(1.35);
  }
  .profile-heat-tooltip {
    animation: profile-tip-in var(--openbot-duration-normal) var(--openbot-ease-out) backwards;
    transition: left var(--openbot-duration-fast) var(--openbot-ease-out), top var(--openbot-duration-fast) var(--openbot-ease-out);
  }
  .profile-ranking li {
    animation: profile-slide-in var(--openbot-duration-toast-enter) var(--openbot-ease-out) backwards;
    animation-delay: calc(var(--openbot-duration-slow) + var(--profile-i, 0) * var(--profile-step));
  }
  .profile-ranking-avatar {
    transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
  }
  .profile-ranking li:hover .profile-ranking-avatar {
    transform: scale(1.12) rotate(-6deg);
  }
  .profile-bar-fill {
    transform-origin: left center;
    animation: profile-grow calc(var(--openbot-duration-overlay) * 2.5) var(--openbot-ease-out) backwards;
    animation-delay: calc(var(--openbot-duration-overlay) + var(--profile-i, 0) * var(--profile-step) * 2);
  }
  .profile-hero-actions svg {
    transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
  }
  .profile-hero-actions button:hover .profile-icon-share {
    transform: translateY(calc(var(--openbot-space-0-5) * -1));
  }
  .profile-hero-actions button:hover .profile-icon-edit {
    transform: rotate(-14deg);
  }
}
@keyframes profile-rise {
  from {
    opacity: 0;
    transform: translateY(var(--openbot-space-2));
  }
}
@keyframes profile-pop {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
}
@keyframes profile-cell-in {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
}
@keyframes profile-tip-in {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-100% - var(--openbot-space-1)));
  }
}
@keyframes profile-slide-in {
  from {
    opacity: 0;
    transform: translateX(calc(var(--openbot-space-2) * -1));
  }
}
@keyframes profile-grow {
  from {
    transform: scaleX(0);
  }
}
.computer-use-settings {
  display: grid;
  gap: var(--openbot-space-6);
}
.computer-use-card:is(.ui-item-group) {
  overflow: hidden;
}
.computer-use-permission-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-accent-soft);
}
.computer-use-permission-icon svg {
  width: 16px;
  height: 16px;
  color: var(--openbot-accent-text);
}
.computer-use-alert {
  margin-top: var(--openbot-space-3);
}
.computer-use-settings > .computer-use-alert:first-child, .computer-use-compact > .computer-use-alert:first-child {
  margin-top: 0;
}
.computer-use-loading .computer-use-row {
  min-height: 60px;
}
.computer-use-skeleton-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--openbot-radius-md);
}
.computer-use-skeleton-title {
  width: 128px;
  height: 12px;
}
.computer-use-skeleton-description {
  width: min(220px, 70%);
  height: 10px;
  margin-top: var(--openbot-space-2);
}
.computer-use-compact {
  width: min(100%, 520px);
  margin-top: var(--openbot-space-4);
  text-align: left;
}
.computer-use-compact-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  margin: 0 var(--openbot-space-1) var(--openbot-space-2);
}
.computer-use-compact-header h2 {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
}
.computer-use-compact-header p {
  margin: var(--openbot-space-0-5) 0 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.computer-use-compact-header > .ui-button {
  flex: 0 0 auto;
}
.computer-use-compact .computer-use-card {
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
}
.computer-use-compact .computer-use-row {
  min-height: 58px;
  padding: var(--openbot-space-2) var(--openbot-space-3);
}
.computer-use-compact .computer-use-row + .computer-use-row {
  border-top: 1px solid var(--openbot-border);
}
.computer-use-compact .ui-item-title {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.computer-use-compact .ui-item-description {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
@media (max-width: 640px) {
  .computer-use-row.ui-item {
    align-items: flex-start;
  }
  .computer-use-row .ui-item-actions {
    width: auto;
    padding-top: var(--openbot-space-1);
  }
}
.computer-use-recheck {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--openbot-space-2);
}
.computer-use-recheck .ui-button > svg, .computer-use-compact-header .ui-button > svg, .computer-use-alert .ui-button > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.computer-use-window-highlight {
  position: absolute;
  inset: 0;
  border-radius: var(--computer-use-window-radius);
  box-shadow: inset 0 0 0 2px var(--openbot-accent), inset 0 0 44px -4px var(--openbot-accent-strong), inset 0 0 120px -8px var(--openbot-accent-soft);
  pointer-events: none;
}
html:has(.computer-use-highlight-surface), body:has(.computer-use-highlight-surface), #root:has(.computer-use-highlight-surface) {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
}
.computer-use-highlight-surface {
  position: relative;
  width: 100%;
  height: 100%;
  background: transparent;
  pointer-events: none;
}
.computer-use-highlight-surface-frame {
  position: absolute;
  pointer-events: none;
}
.computer-use-agent-cursor {
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 24px;
  overflow: visible;
  fill: var(--openbot-accent);
  stroke: var(--openbot-text-on-accent);
  stroke-width: 5;
  paint-order: stroke fill;
  filter: drop-shadow(0 0 6px var(--openbot-accent-strong));
  pointer-events: none;
}
.computer-use-grant:is(.ui-button) {
  border-color: transparent;
  background: var(--openbot-accent);
  color: var(--openbot-text-on-accent);
}
@media (hover: hover) and (pointer: fine) and (min-width: 601px) {
  .computer-use-grant:is(.ui-button):hover:not(:disabled):not([data-disabled]) {
    background: var(--openbot-accent-hover);
  }
}
.computer-use-help {
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
  padding: 44px var(--openbot-space-4) var(--openbot-space-4);
  background: var(--openbot-bg-canvas);
  text-align: left;
}
.computer-use-help-header {
  display: flex;
  align-items: flex-start;
  gap: var(--openbot-space-3);
}
.computer-use-help-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-accent-soft);
}
.computer-use-help-icon svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  color: var(--openbot-accent-text);
  stroke-width: var(--openbot-icon-stroke);
}
.computer-use-help h1 {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
}
.computer-use-help-header p {
  margin: var(--openbot-space-0-5) 0 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.computer-use-help-steps {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
  margin: 0;
  padding-left: var(--openbot-space-4);
  list-style: decimal;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.computer-use-help-status {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.computer-use-help-status svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  color: var(--openbot-success);
  stroke-width: var(--openbot-icon-stroke);
}
.computer-use-help-status.is-error {
  color: var(--openbot-danger);
}
.computer-use-drag-card {
  position: relative;
  width: 210px;
  min-height: 94px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--openbot-space-1);
  align-self: center;
  box-sizing: border-box;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-primary);
  cursor: grab;
  -webkit-app-region: no-drag;
}
.computer-use-drag-card:hover {
  border-color: var(--openbot-accent-strong);
  background: var(--openbot-bg-control-hover);
}
.computer-use-drag-card:active, .computer-use-drag-card.is-dragging {
  cursor: grabbing;
}
.computer-use-drag-handle {
  position: absolute;
  top: var(--openbot-space-2);
  right: var(--openbot-space-2);
  color: var(--openbot-text-dim);
}
.computer-use-drag-handle svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.computer-use-drag-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
}
.computer-use-drag-icon img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}
.computer-use-drag-icon svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  color: var(--openbot-text-secondary);
}
.computer-use-drag-card strong {
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.computer-use-drag-card > span:last-child {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.computer-use-help-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
}
.server-settings-modal-shell .settings-modal-main {
  background: var(--openbot-bg-canvas);
}
.server-settings-modal-shell .settings-modal-scroll-frame::before {
  background: linear-gradient( to bottom, var(--openbot-bg-canvas) 0%, var(--openbot-bg-canvas) 28%, var(--openbot-bg-canvas-clear) 100% );
}
.server-settings-modal-shell .settings-modal-scroll-frame::after {
  background: linear-gradient( to top, var(--openbot-bg-canvas) 0%, var(--openbot-bg-canvas) 28%, var(--openbot-bg-canvas-clear) 100% );
}
.server-settings-panel {
  width: 100%;
  gap: var(--openbot-space-6);
  animation: none;
}
.server-settings-logo {
  width: 40px;
  height: 40px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: var(--openbot-tracking-wide);
}
.server-settings-logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  outline: 1px solid var(--openbot-image-outline);
  outline-offset: -1px;
}
.server-settings-logo-trigger {
  border-radius: var(--openbot-radius-md);
  color: var(--openbot-text-muted);
}
.server-settings-logo-trigger .server-settings-logo {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
  pointer-events: none;
}
.server-settings-logo-placeholder {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.server-settings-item-error {
  color: var(--openbot-danger);
}
.server-settings-readonly-name.ui-item {
  min-height: 72px;
}
.server-settings-publish-setting.ui-switch-field, .server-settings-mute-setting.ui-switch-field {
  min-height: 64px;
  padding: var(--openbot-space-3) var(--openbot-space-4);
  width: 100%;
  justify-content: space-between;
  gap: var(--openbot-space-6);
}
.server-settings-readonly-value {
  min-width: 180px;
  max-width: 300px;
  overflow-wrap: anywhere;
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
  text-align: right;
  user-select: text;
}
.server-settings-address-control.ui-button {
  width: 320px;
  height: var(--openbot-control-md);
  min-width: 0;
  flex-direction: row-reverse;
  justify-content: space-between;
  overflow: visible;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
  padding-inline: var(--openbot-space-3) var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  box-shadow: inset 0 0 0 1px var(--openbot-border);
}
.server-settings-address-control > span {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  font-family: var(--openbot-font-mono);
  font-weight: var(--openbot-weight-regular);
  text-align: left;
  text-overflow: ellipsis;
}
.server-settings-address-control > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.server-settings-private-badge {
  padding: var(--openbot-space-0-5) var(--openbot-space-1-5);
}
.server-settings-address-control[data-copied] {
  color: var(--openbot-success);
}
.server-settings-error-toast {
  position: absolute;
  right: var(--openbot-space-6);
  bottom: var(--openbot-space-6);
  left: var(--openbot-space-6);
  z-index: 3;
  box-shadow: 0 12px 32px var(--openbot-shadow-dialog);
}
.server-settings-error-toast[data-with-save-bar] {
  bottom: calc(60px + var(--openbot-space-3));
}
.server-settings-members-alert {
  border: 0;
  background: var(--openbot-bg-control);
}
.server-settings-members-title {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.server-settings-search {
  position: relative;
  width: 188px;
  flex: 0 0 auto;
}
.server-settings-search > svg {
  position: absolute;
  top: 50%;
  left: var(--openbot-space-3);
  z-index: 1;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
  pointer-events: none;
  transform: translateY(-50%);
}
.server-settings-search .ui-input {
  padding-left: var(--openbot-space-8);
}
.server-settings-invite-card.ui-card {
  border: 0;
  background: var(--openbot-bg-surface);
  padding: var(--openbot-space-4);
  box-shadow: none;
}
.server-settings-invite-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px auto;
  align-items: start;
  gap: var(--openbot-space-2);
}
.server-settings-invite-composer .ui-sliding-tabs-content-slot {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
}
.server-settings-invite-composer .ui-sliding-tabs-content:not([data-selected]) {
  position: absolute;
  inset: 0;
}
.server-settings-invite-mode-panel, .server-settings-invite-email-field, .server-settings-invite-email-field .ui-input {
  min-width: 0;
  width: 100%;
}
.server-settings-invite-email-field {
  position: relative;
  width: 22rem;
  max-width: 100%;
}
.server-settings-invite-email-field > .ui-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.server-settings-invite-link-input.ui-input {
  font-family: var(--openbot-font-mono);
  cursor: text;
}
.server-settings-invite-link-input.ui-input::placeholder {
  font-family: var(--openbot-font-sans);
}
.server-settings-invite-copy > span {
  min-width: 9ch;
  text-align: center;
}
.server-settings-invite-copy > svg, .server-settings-invite-new-link > svg, .server-settings-routine-feed-row .ui-button > svg, .server-settings-routine-feed-actions .ui-button > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.server-settings-invite-hint {
  display: block;
  margin-top: var(--openbot-space-2);
}
.server-settings-role-select {
  width: 100%;
}
.server-settings-invite-result {
  border: 0;
  background: var(--openbot-bg-surface-raised);
  margin-top: var(--openbot-space-3);
}
.server-settings-member-row[data-disabled] {
  background: var(--openbot-bg-control);
}
.server-settings-member-meta {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.server-settings-member-actions {
  min-width: 92px;
}
.server-settings-member-menu-trigger {
  position: relative;
}
.server-settings-member-menu-trigger::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  content: "";
  transform: translate(-50%, -50%);
}
.server-settings-member-menu-trigger svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.server-settings-empty-row .ui-item-content {
  text-align: center;
}
.server-settings-desktop-icon {
  width: 40px;
  height: 40px;
  justify-content: center;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-secondary);
}
.server-settings-desktop-icon svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
}
.server-settings-desktop-description {
  max-width: 360px;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
.server-settings-desktop-meta {
  max-width: 260px;
  display: grid;
  justify-items: end;
  gap: var(--openbot-space-1);
  text-align: right;
}
.server-settings-desktop-hint {
  max-width: 220px;
  text-align: right;
}
.server-settings-desktop-status {
  margin-top: var(--openbot-space-1);
}
@media (max-width: 720px) {
  .server-settings-address-setting, .server-settings-readonly-name {
    align-items: flex-start;
    flex-direction: column;
  }
  .server-settings-address-control, .server-settings-readonly-name .ui-item-actions {
    width: 100%;
    max-width: none;
    justify-content: space-between;
  }
  .server-settings-readonly-value {
    min-width: 0;
    max-width: none;
    text-align: left;
  }
  .server-settings-address-control {
    width: 100%;
  }
  .server-settings-error-toast {
    right: var(--openbot-space-4);
    left: var(--openbot-space-4);
  }
  .server-settings-invite-composer {
    grid-template-columns: minmax(0, 1fr) 118px;
  }
  .server-settings-invite-email-field {
    max-width: none;
  }
  .server-settings-invite-composer > .ui-button, .server-settings-invite-share {
    grid-column: 1 / -1;
  }
  .server-settings-desktop-card .ui-item {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .server-settings-desktop-meta, .server-settings-desktop-hint {
    max-width: none;
    margin-left: 52px;
    justify-items: start;
    text-align: left;
  }
}
@media (max-width: 520px) {
  :is(.server-settings-invite-section, .server-settings-members-section) .ui-settings-section-header {
    align-items: stretch;
    flex-direction: column;
  }
  .server-settings-invite-section .ui-settings-section-actions, .server-settings-members-section .ui-settings-section-actions, .server-settings-search {
    width: 100%;
  }
  .server-settings-member-row {
    flex-wrap: wrap;
  }
  .server-settings-member-actions {
    width: 100%;
    min-width: 0;
    justify-content: flex-end;
  }
  .server-settings-invite-composer {
    grid-template-columns: minmax(0, 1fr);
  }
  .server-settings-role-select, .server-settings-invite-composer > .ui-button, .server-settings-invite-share {
    width: 100%;
    grid-column: 1;
  }
}
.server-settings-invite-share {
  display: flex;
  gap: var(--openbot-space-1);
}
.server-settings-invite-share > .ui-button:last-child {
  animation: server-settings-invite-qr-in var(--openbot-duration-normal) var(--openbot-ease-out);
}
@keyframes server-settings-invite-qr-in {
  from {
    opacity: 0;
    transform: translateX(calc(-1 * var(--openbot-space-4)));
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.server-settings-invite-qr {
  animation: server-settings-invite-panel-in var(--openbot-duration-normal) var(--openbot-ease-out);
  transform-origin: top;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-4);
}
@media (prefers-reduced-motion: reduce) {
  .server-settings-invite-share > .ui-button:last-child {
    animation: none;
  }
}
@keyframes server-settings-invite-panel-in {
  from {
    opacity: 0;
    transform: translateY(calc(-1 * var(--openbot-space-3))) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .server-settings-invite-qr {
    animation: none;
  }
}
.server-settings-routine-feed-row {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.server-settings-routine-feed-agent {
  flex: none;
  width: auto;
}
.server-settings-routine-feed-row .ui-input {
  flex: 1;
  min-width: 0;
  font-family: var(--openbot-font-mono);
  cursor: text;
}
.server-settings-routine-feed-text {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
.server-settings-routine-feed-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-1);
}
.server-settings-routine-feed-loading {
  display: grid;
  place-items: center;
  padding: var(--openbot-space-6);
  animation: server-settings-routine-feed-loading-in var(--openbot-duration-normal) var(--openbot-ease-out) var(--openbot-loading-indicator-delay) both;
}
@keyframes server-settings-routine-feed-loading-in {
  from {
    opacity: 0;
  }
}
.server-settings-routine-feed-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.server-mcp-panel {
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  min-height: 100%;
}
.server-mcp-panel.t-page-slide .t-page {
  position: static;
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-6);
  min-width: 0;
}
@starting-style {
  .settings-modal .server-mcp-panel.t-page-slide .t-page[data-page-id] {
    opacity: 0;
    transform: translateX(var(--t-page-from-x));
    filter: blur(var(--page-blur));
  }
}
.server-mcp-section {
  min-width: 0;
}
.server-mcp-error {
  display: block;
  margin-bottom: var(--openbot-space-2);
}
.server-mcp-runtime-note {
  display: block;
  margin-bottom: var(--openbot-space-2);
}
.server-mcp-test-result {
  display: block;
  overflow-wrap: anywhere;
}
.server-mcp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-3);
  border: 1px dashed var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  padding: var(--openbot-space-8) var(--openbot-space-6);
  text-align: center;
}
.server-mcp-panel .ui-button > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.server-mcp-list {
  min-width: 0;
}
.server-mcp-row-icon {
  color: var(--openbot-text-muted);
}
.server-mcp-row[data-disabled] .server-mcp-row-icon, .server-mcp-row[data-disabled] .ui-item-content {
  opacity: 0.55;
}
.server-mcp-row-title {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  min-width: 0;
  flex-wrap: wrap;
}
.server-mcp-row-next {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-top: var(--openbot-space-1);
}
.server-mcp-row-menu {
  min-width: 180px;
}
.server-mcp-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--openbot-space-6);
  min-width: 0;
}
.server-mcp-transport-panel {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-6);
  min-width: 0;
}
.server-mcp-repeat {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
  min-width: 0;
  border: 0;
  margin: 0;
  padding: 0;
}
.server-mcp-repeat-legend {
  padding: 0;
}
.server-mcp-repeat-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-2);
}
.server-mcp-repeat-row-pair {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
}
.server-mcp-repeat-add {
  justify-content: center;
  width: 100%;
}
.server-mcp-callback {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  min-width: 0;
}
.server-mcp-callback-url {
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: var(--openbot-font-mono);
}
@media (max-width: 520px) {
  .server-mcp-repeat-row-pair {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .server-mcp-repeat-row-pair > .ui-input:first-child {
    grid-column: 1 / -1;
  }
}
.skills-marketplace-backdrop {
  z-index: var(--openbot-layer-dialog-host);
  padding: var(--openbot-space-4);
}
.skills-marketplace {
  --marketplace-inset: var(--openbot-space-6);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1040px, calc(100vw - 32px));
  height: min(704px, calc(100vh - 32px));
  overflow: hidden;
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-sidebar);
  color: var(--openbot-text-primary);
}
.skills-marketplace-page {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  .skills-marketplace {
    transition: opacity var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1), transform var(--openbot-duration-normal) cubic-bezier(0.23, 1, 0.32, 1);
  }
  .skills-marketplace[data-closed] {
    opacity: 0;
    transform: scale(0.98);
  }
}
.marketplace-menu {
  z-index: calc(var(--openbot-layer-dialog-host) + 1);
}
body:has(.skills-marketplace) :is(.integration-dialog-backdrop, .integration-wizard-dialog) {
  z-index: calc(var(--openbot-layer-dialog-host) + 1);
}
.skills-marketplace-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  min-height: 48px;
  padding: var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-2) var(--marketplace-inset);
  border-bottom: 1px solid var(--openbot-border);
}
.skills-marketplace-topbar-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--openbot-space-1);
}
.skills-marketplace-body {
  position: relative;
  overflow: auto;
  scrollbar-gutter: stable;
}
.marketplace-frame {
  padding: var(--openbot-space-6) var(--marketplace-inset) var(--openbot-space-8);
}
.skills-marketplace-error {
  position: sticky;
  bottom: var(--openbot-space-4);
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  width: fit-content;
  max-width: calc(100% - 32px);
  margin: 0 auto var(--openbot-space-4);
  padding: var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-1) var(--openbot-space-3);
  border: 1px solid var(--openbot-danger);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
  color: var(--openbot-danger);
  box-shadow: 0 12px 32px var(--openbot-shadow-dialog);
}
.marketplace-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.marketplace-crumbs {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--openbot-space-2);
  min-width: 0;
}
.marketplace-title {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-lg);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.skills-marketplace .marketplace-crumb-parent {
  flex: 0 1 auto;
  min-width: 0;
  height: auto;
  margin-block: calc(-1 * var(--openbot-space-1));
  margin-inline: calc(-1 * var(--openbot-space-2) - 1px);
  padding: var(--openbot-space-1) var(--openbot-space-2);
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-lg);
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .skills-marketplace .marketplace-crumb-parent:hover:not(:disabled) {
    border-color: var(--openbot-border-strong);
    background: var(--openbot-bg-control-hover);
    color: var(--openbot-text-primary);
  }
}
.marketplace-crumb-separator {
  flex: 0 0 auto;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
}
.marketplace-title:focus, .skills-marketplace-body h3[tabindex="-1"]:focus {
  outline: none;
}
.marketplace-view, .marketplace-stack {
  display: grid;
  align-content: start;
  gap: var(--openbot-space-6);
  min-width: 0;
}
.marketplace-head {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-4);
}
.marketplace-head-actions {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  min-width: 0;
  max-width: 50%;
  gap: var(--openbot-space-1);
}
.marketplace-head-copy {
  display: grid;
  flex: 1;
  gap: var(--openbot-space-1);
  min-width: 0;
}
.marketplace-page-title {
  margin: 0;
  overflow-wrap: anywhere;
}
.marketplace-command {
  overflow-wrap: anywhere;
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
}
.marketplace-toolbar {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
}
.marketplace-search {
  position: relative;
  flex: 0 1 240px;
  min-width: 0;
  margin-left: auto;
}
.marketplace-count {
  margin-left: var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
  font-variant-numeric: tabular-nums;
}
.marketplace-install-menu {
  min-width: 220px;
}
.marketplace-install-trigger {
  min-width: 0;
  max-width: 100%;
}
.marketplace-install-trigger svg {
  flex: none;
}
.marketplace-install-label {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.marketplace-tab-slot {
  padding-top: var(--openbot-space-4);
}
.marketplace-block {
  display: grid;
  gap: var(--openbot-space-2);
}
.marketplace-block-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.marketplace-block-copy {
  display: grid;
  gap: var(--openbot-space-0-5);
  min-width: 0;
}
.marketplace-load-more {
  justify-self: center;
}
.marketplace-avatar {
  --marketplace-avatar-size: 20px;
  display: inline-grid;
  flex: none;
  width: var(--marketplace-avatar-size);
  height: var(--marketplace-avatar-size);
}
.marketplace-avatar[data-size="xs"] {
  --marketplace-avatar-size: 16px;
}
.marketplace-avatar[data-size="md"] {
  --marketplace-avatar-size: 40px;
}
.marketplace-avatar[data-size="lg"] {
  --marketplace-avatar-size: 48px;
}
.marketplace-avatar > .agent-avatar {
  --agent-avatar-optical-offset: calc(var(--marketplace-avatar-size) * -0.14);
  width: 100%;
  height: 100%;
}
.marketplace-skill-mark {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 20px;
  height: 20px;
  overflow: hidden;
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-muted);
}
.marketplace-skill-mark[data-size="row"] {
  width: 36px;
  height: 36px;
  border-radius: var(--openbot-radius-md);
}
.marketplace-skill-mark[data-size="md"] {
  width: 40px;
  height: 40px;
  border-radius: var(--openbot-radius-md);
}
.skills-marketplace-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  color: var(--openbot-accent-text);
}
.skills-marketplace-icon:has(img) {
  border: 0;
  background: transparent;
}
.skills-marketplace-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.skills-marketplace-icon svg {
  width: 20px;
  height: 20px;
}
.marketplace-skill-mark[data-kind="icon"] > img {
  width: 100%;
  height: 100%;
}
.marketplace-skill-mark[data-kind="none"] > * {
  width: 60%;
  height: 60%;
}
.skills-marketplace .integration-logo-tile > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.marketplace-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--openbot-space-3);
}
.marketplace-card {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-rows: auto 1fr auto;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-4);
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-grouped);
  transition: background var(--openbot-duration-fast) var(--openbot-ease-out);
}
.marketplace-card:hover:not(.marketplace-card-skeleton) {
  background: var(--openbot-bg-control-hover);
}
.marketplace-card-head {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  min-width: 0;
}
.marketplace-card-name {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}
.marketplace-card-action {
  position: relative;
  z-index: 2;
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  gap: var(--openbot-space-2);
  min-width: 0;
  max-width: 60%;
}
.marketplace-card-body {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--openbot-text-secondary);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.marketplace-card-foot {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  min-height: 16px;
  font-variant-numeric: tabular-nums;
}
.marketplace-hitarea {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: transparent;
}
.marketplace-hitarea:hover:not(:disabled) {
  background: transparent;
}
.marketplace-card-skeleton {
  grid-template-rows: auto auto auto;
}
.marketplace-skeleton-mark {
  width: 40px;
  height: 40px;
  border-radius: var(--openbot-radius-md);
}
.marketplace-skeleton-line {
  width: 100%;
  height: 12px;
}
.marketplace-skeleton-line:last-child {
  width: 60%;
}
.marketplace-done {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  color: var(--openbot-success-text);
  font-size: var(--openbot-text-sm);
  white-space: nowrap;
}
.marketplace-done > svg {
  width: 14px;
  height: 14px;
}
.marketplace-rows {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.marketplace-row {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  min-height: 52px;
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
}
.marketplace-row-copy {
  display: grid;
  flex: 1;
  gap: var(--openbot-space-0-5);
  min-width: 0;
  overflow-wrap: anywhere;
}
.marketplace-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: var(--openbot-space-8);
  align-items: start;
}
.marketplace-side {
  position: sticky;
  top: var(--openbot-space-6);
  padding-left: var(--openbot-space-6);
  border-left: 1px solid var(--openbot-border);
}
.marketplace-props {
  display: grid;
  gap: var(--openbot-space-0-5);
  margin: 0;
}
.marketplace-props > dd {
  margin: 0 0 var(--openbot-space-3);
}
.marketplace-props > dd:last-child {
  margin-bottom: 0;
}
.marketplace-info {
  grid-template-columns: minmax(120px, max-content) minmax(0, 1fr);
  column-gap: var(--openbot-space-6);
  row-gap: var(--openbot-space-2);
}
.marketplace-info > dd {
  margin: 0;
}
.skills-marketplace .marketplace-link {
  height: auto;
  padding: 0;
}
.marketplace-try {
  display: grid;
  gap: var(--openbot-space-2);
}
.skill-preview-card.marketplace-try-card {
  gap: var(--openbot-space-2);
}
.marketplace-try-card .skill-preview-request {
  width: min(100%, 560px);
  line-height: var(--openbot-space-6);
}
.marketplace-try-card .skill-preview-chip {
  margin-inline-end: var(--openbot-space-0-5);
  vertical-align: top;
}
.marketplace-try-card .reference-chip-icon > :is(img, svg) {
  width: 100%;
  height: 100%;
}
.marketplace-doc {
  min-width: 0;
  padding: var(--openbot-space-4) var(--openbot-space-6);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  font-size: var(--openbot-text-sm);
  overflow-wrap: anywhere;
}
.marketplace-doc > :first-child {
  margin-top: 0;
}
.marketplace-doc > :last-child {
  margin-bottom: 0;
}
.marketplace-app-page {
  width: min(100%, 720px);
  margin-inline: auto;
}
.marketplace-empty {
  display: grid;
  justify-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-8) var(--openbot-space-6);
  border: 1px dashed var(--openbot-border-strong);
  border-radius: var(--openbot-radius-card);
  text-align: center;
}
.marketplace-empty > p {
  max-width: 440px;
  margin: 0;
}
.marketplace-empty > .ui-button {
  margin-top: var(--openbot-space-2);
}
.marketplace-empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--openbot-space-2);
}
@media (max-width: 860px) {
  .skills-marketplace {
    --marketplace-inset: var(--openbot-space-4);
  }
  .marketplace-page {
    grid-template-columns: minmax(0, 1fr);
  }
  .marketplace-side {
    position: static;
    padding: var(--openbot-space-4) 0 0;
    border-top: 1px solid var(--openbot-border);
    border-left: 0;
  }
  .marketplace-head {
    flex-wrap: wrap;
  }
}
.skills-marketplace .ui-button > svg, .marketplace-search > svg {
  width: 16px;
  height: 16px;
}
.logo-color-grid {
  display: grid;
  grid-template-columns: repeat(5, 32px);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  gap: 4px;
}
.logo-color-choice {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  transition-property: scale, background-color, box-shadow;
  transition-duration: var(--openbot-duration-normal), var(--openbot-duration-hover), var(--openbot-duration-hover);
  transition-timing-function: ease-out;
}
.logo-color-choice:hover {
  background: var(--openbot-hover);
}
.logo-color-choice:active {
  scale: 0.96;
}
.logo-color-choice-selected {
  background: var(--openbot-border);
  box-shadow: inset 0 0 0 1px var(--openbot-text-muted), 0 1px 3px var(--openbot-shadow-popover-ambient);
}
.logo-color-swatch {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: var(--openbot-radius-pill);
  box-shadow: inset 0 0 0 1px var(--openbot-border-strong);
}
.sound-theme-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  width: 100%;
  min-width: 0;
  gap: var(--openbot-space-2);
}
.sound-theme-option {
  display: flex;
  min-width: 0;
}
.sound-theme-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: var(--openbot-space-1);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  box-shadow: inset 0 0 0 1px var(--openbot-border);
  text-align: left;
  cursor: pointer;
  transition-property: scale, background-color, box-shadow;
  transition-duration: var(--openbot-duration-normal), var(--openbot-duration-hover), var(--openbot-duration-normal);
  transition-timing-function: var(--openbot-ease-out);
}
.sound-theme-card:hover {
  background: var(--openbot-bg-control-hover);
}
.sound-theme-card:active {
  scale: 0.96;
}
.sound-theme-card[data-checked] {
  box-shadow: inset 0 0 0 1.5px var(--openbot-text-primary), 0 1px 3px var(--openbot-shadow-popover-ambient);
}
.sound-theme-card[data-popped][data-checked] {
  animation: sound-theme-pop var(--openbot-duration-toast-enter) var(--openbot-ease-out);
}
.sound-theme-option:has(:focus-visible) .sound-theme-card {
  box-shadow: var(--openbot-focus-ring);
}
.sound-theme-dither {
  --sound-theme-ink: var(--openbot-sound-off-ink);
  --sound-theme-back: var(--openbot-sound-off-back);
  position: relative;
  height: 56px;
  overflow: hidden;
  clip-path: inset(0 round var(--openbot-radius-md));
  border-radius: var(--openbot-radius-md);
  color: var(--sound-theme-ink);
  background-color: var(--sound-theme-back);
  background-image: radial-gradient(var(--sound-theme-ink) 1px, transparent 1.5px), linear-gradient(135deg, transparent, var(--sound-theme-ink));
  background-size: 4px 4px, 100% 100%;
  opacity: 0.72;
  filter: saturate(0.7);
  transition-property: opacity, filter;
  transition-duration: var(--openbot-duration-overlay);
  transition-timing-function: var(--openbot-ease-out);
}
.sound-theme-dither canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.sound-theme-card:hover .sound-theme-dither, .sound-theme-card[data-checked] .sound-theme-dither {
  opacity: 1;
  filter: none;
}
.sound-theme-dither[data-choice="default"] {
  --sound-theme-ink: var(--openbot-sound-warm-ink);
  --sound-theme-back: var(--openbot-sound-warm-back);
}
.sound-theme-dither[data-choice="mech"] {
  --sound-theme-ink: var(--openbot-sound-mech-ink);
  --sound-theme-back: var(--openbot-sound-mech-back);
}
.sound-theme-dither[data-choice="bubble"] {
  --sound-theme-ink: var(--openbot-sound-bubble-ink);
  --sound-theme-back: var(--openbot-sound-bubble-back);
}
.sound-theme-dither[data-choice="press"] {
  --sound-theme-ink: var(--openbot-sound-press-ink);
  --sound-theme-back: var(--openbot-sound-press-back);
}
.sound-theme-text {
  display: grid;
  min-width: 0;
  padding: var(--openbot-space-1-5) var(--openbot-space-1) var(--openbot-space-0-5);
}
.sound-theme-name {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: inherit;
}
.sound-theme-hint {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
@keyframes sound-theme-pop {
  0% {
    scale: 1;
  }
  35% {
    scale: 1.06;
    rotate: -1.5deg;
  }
  70% {
    scale: 0.98;
    rotate: 0.8deg;
  }
  100% {
    scale: 1;
    rotate: 0deg;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sound-theme-card[data-popped][data-checked] {
    animation: none;
  }
  .sound-theme-card:active {
    scale: 1;
  }
}
.mcp-connect-backdrop {
  z-index: calc(var(--openbot-layer-dialog-host) + 2);
}
.mcp-connect-dialog {
  position: relative;
  width: min(420px, 100%);
  max-height: calc(100dvh - var(--openbot-space-6) * 2);
  overflow-y: auto;
  outline: 0;
  border-radius: var(--openbot-radius-xl);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-6);
  color: var(--openbot-text-primary);
  animation: mcp-connect-dialog-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}
.mcp-connect-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-1);
}
.mcp-connect-close {
  position: absolute;
  top: var(--openbot-space-3);
  right: var(--openbot-space-3);
}
.mcp-connect-marks {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-3);
}
.mcp-connect-mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
}
.mcp-connect-mark .app-logo {
  width: 48px;
  height: 48px;
}
.mcp-connect-dots {
  width: 28px;
  height: 2px;
  background-image: radial-gradient(circle, var(--openbot-text-muted) 1px, transparent 1px);
  background-size: 7px 2px;
  animation: mcp-connect-dots-run 900ms linear infinite;
}
.mcp-connect-marks .mcp-connect-mark-icon {
  width: 48px;
  height: 48px;
  animation: mcp-connect-mark-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}
@media (prefers-reduced-motion: reduce) {
  .mcp-connect-dots, .mcp-connect-marks .mcp-connect-mark-icon {
    animation: none;
  }
}
.mcp-connect-title {
  display: block;
  margin: var(--openbot-space-3) 0 0;
  text-align: center;
  font-size: var(--openbot-text-xl);
  line-height: var(--openbot-leading-xl);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: var(--openbot-tracking-tight);
}
.mcp-connect-description {
  margin: 0;
  text-align: center;
  text-wrap: balance;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.mcp-connect-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-grouped);
}
.mcp-connect-row {
  position: relative;
  margin: 0;
  padding: var(--openbot-space-3);
}
.mcp-connect-row + .mcp-connect-row {
  border-top: 1px solid var(--openbot-border-grouped);
}
.mcp-local-heading {
  margin: 0;
  padding-right: var(--openbot-space-6);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-sm);
}
.mcp-local-steps {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
  margin: var(--openbot-space-2) 0 0;
  padding-left: var(--openbot-space-4);
  list-style: decimal;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.mcp-local-steps > li::marker {
  color: var(--openbot-text-muted);
}
.mcp-local-address {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.mcp-local-address > code {
  overflow-wrap: anywhere;
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
}
.mcp-connect-form {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
  margin: var(--openbot-space-4) 0 0;
}
.mcp-connect-docs {
  position: absolute;
  top: var(--openbot-space-3);
  right: var(--openbot-space-3);
  gap: var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.mcp-connect-primary {
  width: 100%;
}
.mcp-connect-docs > svg, .mcp-connect-primary > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.mcp-connect-status:empty {
  display: none;
}
.mcp-connect-privacy {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.mcp-connect-privacy svg {
  flex: none;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
}
@keyframes mcp-connect-dots-run {
  to {
    background-position-x: 7px;
  }
}
@keyframes mcp-connect-mark-in {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
}
@keyframes mcp-connect-dialog-in {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
}
.mcp-connect-dialog.mcp-sign-in-page-dialog, .mcp-connect-dialog[data-page] {
  width: min(720px, 100%);
}
.mcp-sign-in-page {
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
}
.mcp-sign-in-page-dialog .mcp-sign-in-page {
  margin-top: var(--openbot-space-4);
}
.mcp-sign-in-page-note {
  min-width: 0;
  margin: 0;
}
.mcp-sign-in-relay-open {
  margin-top: var(--openbot-space-4);
}
.mcp-sign-in-relay-form {
  margin-top: var(--openbot-space-4);
}
.mcp-sign-in-relay-row {
  display: flex;
  gap: var(--openbot-space-2);
}
.mcp-sign-in-relay-row > .ui-input {
  flex: 1;
  min-width: 0;
}
.mcp-sign-in-page-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  margin-top: var(--openbot-space-4);
}
.provider-update-toast-logo {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  overflow: visible;
  fill: var(--openbot-provider-current);
}
.provider-update-toast[data-sonner-toast][data-styled="true"] [data-action] {
  grid-row: 1;
  align-self: center;
}
.provider-update-toast[data-sonner-toast][data-styled="true"]:has(.provider-update-toast-action:not([data-idle="true"])) [data-content] {
  grid-column: 2;
}
.ui-toaster.ui-toaster-closeable .provider-update-toast[data-sonner-toast][data-styled="true"] [data-action], .ui-toaster .provider-update-toast[data-sonner-toast][data-styled="true"]:has([data-close-button]) [data-action] {
  margin-right: var(--openbot-space-6);
}
.ui-toaster [data-sonner-toast] [data-action]:has(.provider-update-toast-action[data-idle="true"]) {
  display: none;
}
.provider-update-toast[data-sonner-toast][data-styled="true"] [data-description]:has(.provider-update-toast-progress) {
  display: flex;
  flex-direction: column;
}
.provider-update-toast-line {
  display: block;
  min-width: 0;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.provider-update-toast-line[data-failed="true"] {
  display: -webkit-box;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
.provider-update-toast-line[data-failed="true"][data-expanded="true"] {
  display: block;
  -webkit-line-clamp: none;
  line-clamp: none;
}
.provider-update-toast .provider-update-toast-details {
  margin-top: var(--openbot-space-1);
  color: inherit;
  font-size: inherit;
  text-decoration: underline;
}
.provider-update-toast-progress {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  margin-top: var(--openbot-space-2);
}
.ui-toaster.ui-toaster-closeable .provider-update-toast .provider-update-toast-progress, .ui-toaster .provider-update-toast:has([data-close-button]) .provider-update-toast-progress {
  margin-right: calc(-1 * var(--openbot-space-6));
}
.provider-update-toast-bar {
  flex: 1;
  min-width: 0;
}
.provider-update-toast-bar[data-provider] .ui-progress-fill {
  background: var(--openbot-provider-current);
}
.provider-update-toast-percent {
  --digit-dur: var(--openbot-duration-fast);
  --digit-distance: var(--openbot-space-1);
  --digit-blur: 0px;
  --digit-ease: ease-out;
  display: inline-flex;
  justify-content: flex-end;
  width: 4ch;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
.custom-provider-dialog {
  display: flex;
  width: min(460px, 100%);
  max-height: calc(100dvh - 48px);
  flex-direction: column;
  overflow: hidden;
  outline: 0;
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-sidebar);
  color: var(--openbot-text-primary);
}
.custom-provider-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--openbot-space-3);
  border-bottom: 1px solid var(--openbot-border);
  padding: var(--openbot-space-4);
}
.custom-provider-mark {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
}
.custom-provider-title {
  min-width: 0;
  flex: 1;
}
.custom-provider-close {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-block-start: calc(var(--openbot-space-2) * -1);
  margin-inline-end: calc(var(--openbot-space-2) * -1);
  color: var(--openbot-text-muted);
}
.custom-provider-body {
  display: flex;
  min-height: 0;
  flex-direction: column;
}
.custom-provider-form {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: var(--openbot-space-4);
  overflow-y: auto;
  padding: var(--openbot-space-4);
}
.custom-provider-list {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: var(--openbot-space-4);
  overflow-y: auto;
  padding: var(--openbot-space-4);
}
.custom-provider-list-empty {
  padding: var(--openbot-space-4) 0;
  text-align: center;
}
.custom-provider-rows {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
}
.custom-provider-rows-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--openbot-space-3);
}
.custom-provider-row {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
}
.custom-provider-row-inputs {
  display: grid;
  align-items: center;
  gap: var(--openbot-space-2);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
}
.custom-provider-row-inputs.custom-provider-row-single {
  grid-template-columns: minmax(0, 1fr) auto;
}
.custom-provider-rows-error, .custom-provider-row-error, .custom-provider-submit-error {
  display: block;
}
.custom-provider-actions {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-2);
  border-top: 1px solid var(--openbot-border);
  padding: var(--openbot-space-4);
}
.custom-provider-actions .ui-button-variant-default {
  width: 100%;
}
.custom-provider-rows > .ui-button svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.custom-provider-rows-heading > .custom-provider-discover {
  margin-inline-start: auto;
}
.custom-provider-rows-heading > .custom-provider-discover + .custom-provider-rows-error {
  display: none;
}
.custom-provider-rows-heading > .custom-provider-discover svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.custom-provider-discovery-status {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.custom-provider-discovered {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--openbot-space-1);
  list-style: none;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
}
.custom-provider-discovered-row {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-1) var(--openbot-space-2);
  border-radius: var(--openbot-radius-sm);
  cursor: pointer;
}
.custom-provider-discovered-row:hover {
  background: var(--openbot-bg-control-hover);
}
.custom-provider-discovered-id {
  min-width: 0;
  overflow: hidden;
  font-family: var(--openbot-font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.custom-provider-preset-group {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
}
.custom-provider-presets {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.custom-provider-preset.ui-button {
  display: flex;
  width: 100%;
  height: auto;
  align-items: center;
  justify-content: flex-start;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  text-align: start;
  white-space: normal;
}
.custom-provider-preset-icon {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-secondary);
}
.custom-provider-preset > .custom-provider-preset-icon svg, .custom-provider-preset-chevron {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.custom-provider-preset-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 2px;
}
.custom-provider-preset-title {
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}
.custom-provider-preset-description {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
}
.custom-provider-preset-chevron {
  flex-shrink: 0;
  color: var(--openbot-text-muted);
}
.custom-acp-presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-2);
}
.custom-acp-code {
  overflow-wrap: anywhere;
}
.custom-acp-code input, input.custom-acp-code {
  font-family: var(--openbot-font-mono);
}
.detected-providers {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
  margin-top: var(--openbot-space-4);
}
.detected-providers-heading {
  display: flex;
  min-height: 24px;
  align-items: center;
  gap: var(--openbot-space-2);
}
.detected-providers-scanning {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
}
.ui-button.detected-providers-scan {
  gap: var(--openbot-space-1-5);
  margin-inline-start: auto;
  margin-inline-end: calc(var(--openbot-space-2) * -1);
}
.detected-providers-heading > .detected-providers-scan svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.detected-providers-icon {
  color: var(--openbot-text-secondary);
}
.detected-providers .detected-providers-icon > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.ui-button.detected-providers-show-hidden {
  align-self: flex-start;
  margin-inline-start: calc(var(--openbot-space-2) * -1);
}
.ui-button.custom-agents-copy-diagnostics {
  justify-self: start;
  margin-inline-start: calc(var(--openbot-space-2) * -1);
}
.detected-providers-settings {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
  margin-top: var(--openbot-space-3);
}
.acp-registry-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-2);
}
.acp-registry-form > .ui-field {
  flex-basis: 100%;
}
.acp-registry-entry.ui-item {
  flex-wrap: wrap;
}
.acp-registry-entry .ui-item-content {
  flex-basis: 180px;
}
.acp-registry-entry .ui-item-actions {
  min-width: 0;
  flex-shrink: 1;
  flex-wrap: wrap;
  margin-inline-start: auto;
}
.agent-template-dialog {
  position: relative;
  display: flex;
  width: min(420px, 100%);
  max-height: calc(100dvh - 48px);
  flex-direction: column;
  overflow: hidden;
  outline: 0;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-sidebar);
  color: var(--openbot-text-primary);
}
.agent-template-status {
  position: absolute;
  z-index: 1;
  inset-block-start: var(--openbot-space-3);
  inset-inline-start: var(--openbot-space-3);
}
.agent-template-corner-actions {
  position: absolute;
  z-index: 1;
  display: flex;
  gap: var(--openbot-space-1);
  inset-block-start: var(--openbot-space-2);
  inset-inline-end: var(--openbot-space-2);
  color: var(--openbot-text-muted);
}
.agent-template-body {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: var(--openbot-space-4);
  padding: var(--openbot-space-6) var(--openbot-space-4) var(--openbot-space-4);
}
.agent-template-scroll {
  overflow-y: auto;
}
.agent-template-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-1);
  text-align: center;
}
.agent-template-avatar {
  width: 72px;
  height: 72px;
  margin-block-end: var(--openbot-space-3);
}
.agent-template-name {
  overflow-wrap: anywhere;
}
.agent-template-description {
  display: -webkit-box;
  margin-block-start: var(--openbot-space-1);
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}
.agent-template-rows {
  display: grid;
  overflow: hidden;
  border-radius: var(--openbot-radius-grouped);
}
.agent-template-row {
  display: grid;
  width: 100%;
  height: auto;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-3);
  border-radius: 0;
  padding: var(--openbot-space-3) var(--openbot-space-4);
  text-align: start;
  color: var(--openbot-text-muted);
}
.agent-template-row + .agent-template-row {
  border-top: 1px solid var(--openbot-border-grouped);
}
.agent-template-row-copy {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-0-5);
}
.agent-template-row-title {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.agent-template-row-detail {
  overflow: hidden;
  color: var(--openbot-text-grouped-secondary);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-template-actions {
  display: flex;
  flex-shrink: 0;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
  border-top: 1px solid var(--openbot-border);
  padding: var(--openbot-space-3) var(--openbot-space-4);
}
.agent-template-copy {
  margin-inline-end: auto;
}
.agent-template-detail-header {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-block-start: calc(var(--openbot-space-2) * -1);
}
.agent-template-detail {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: var(--openbot-space-4);
  overflow-y: auto;
}
.agent-template-section {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
}
.agent-template-prose {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  overflow-wrap: anywhere;
}
.agent-template-prose .message-markdown-heading[data-level] {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
.agent-template-prose .message-markdown-heading:not([data-level="1"], [data-level="2"]) {
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.agent-template-list {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.agent-template-list > li {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-0-5);
}
.agent-template-skill-toggle {
  justify-content: flex-start;
  align-self: flex-start;
  gap: var(--openbot-space-1);
  margin-inline-start: calc(var(--openbot-space-2) * -1);
}
.agent-template-skill-text {
  max-height: 240px;
  margin: var(--openbot-space-1) 0 0;
  overflow: auto;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-3);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  white-space: pre-wrap;
}
.agent-delete-undo-toast-host {
  width: var(--width);
}
.agent-delete-undo-toast {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-3);
  overflow: hidden;
  padding: var(--openbot-space-3);
  padding-bottom: calc(var(--openbot-space-3) + var(--openbot-space-1));
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface-raised);
  box-shadow: 0 0 0 1px var(--openbot-border), var(--openbot-shadow-raised);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
}
.agent-delete-undo-toast-avatar {
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  width: 32px;
  height: 32px;
}
.agent-delete-undo-toast-text {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.agent-delete-undo-toast-title {
  overflow: hidden;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-delete-undo-toast-detail {
  overflow: hidden;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-delete-undo-toast-bar {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
}
.agent-delete-undo-toast-bar .ui-progress-track {
  border-radius: 0;
  background: transparent;
}
.agent-delete-undo-toast-bar .ui-progress-fill {
  background: var(--openbot-accent);
  transition-duration: var(--openbot-duration-fast);
  transition-timing-function: linear;
}
.whats-new-dialog {
  position: relative;
  display: flex;
  width: min(480px, 100%);
  max-height: min(640px, calc(100dvh - 2 * var(--openbot-space-6)));
  flex-direction: column;
  overflow: hidden;
  outline: 0;
  border-radius: var(--openbot-radius-xl);
  background: var(--openbot-bg-sidebar);
  color: var(--openbot-text-primary);
}
.whats-new-close {
  position: absolute;
  z-index: 1;
  inset-block-start: var(--openbot-space-3);
  inset-inline-end: var(--openbot-space-3);
  color: var(--openbot-text-muted);
}
.whats-new-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-8) var(--openbot-space-6) var(--openbot-space-4);
  text-align: center;
}
.whats-new-logo {
  --app-logo-background: var(--openbot-surface-light);
  width: 56px;
  height: 56px;
  margin-block-end: var(--openbot-space-3);
  border-radius: var(--openbot-radius-logo);
}
.whats-new-title {
  margin: 0;
  font-size: var(--openbot-text-2xl);
  font-weight: var(--openbot-weight-bold);
  line-height: var(--openbot-leading-2xl);
}
.whats-new-body {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--openbot-space-6);
  overflow-y: auto;
  padding: var(--openbot-space-2) var(--openbot-space-6) var(--openbot-space-6);
  border-block-start: 1px solid transparent;
}
.whats-new-body.scroll-fade-top {
  border-block-start-color: var(--openbot-border);
}
.whats-new-body.scroll-fade-bottom {
  mask-image: linear-gradient(to bottom, var(--openbot-text-primary) calc(100% - 32px), transparent);
}
.whats-new-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-2);
  padding-block: var(--openbot-space-6);
  text-align: center;
}
.whats-new-state .ui-button {
  margin-block-start: var(--openbot-space-2);
}
.whats-new-state-icon {
  width: 24px;
  height: 24px;
  color: var(--openbot-warning-text);
}
.whats-new-notice {
  padding: var(--openbot-space-3) var(--openbot-space-4) var(--openbot-space-4);
  border-radius: var(--openbot-radius-card);
  background-image: linear-gradient( 180deg, var(--openbot-warning-soft), var(--openbot-warning) );
  @supports (color: color-mix(in lab, red, red)) {
    background-image: linear-gradient( 180deg, var(--openbot-warning-soft), color-mix(in srgb, var(--openbot-warning) 3%, transparent) );
  }
  box-shadow: inset 0 0 0 1px var(--openbot-warning);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--openbot-warning) 26%, transparent);
  }
  --whats-new-tone: var(--openbot-warning-text);
}
.whats-new-notice-title {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin: 0 0 var(--openbot-space-2);
  color: var(--openbot-warning-text);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
}
.whats-new-notice-title svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
.whats-new-group {
  --whats-new-tone: var(--openbot-text-muted);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--openbot-space-3);
}
.whats-new-group[data-type="added"] {
  --whats-new-tone: var(--openbot-logo-production);
}
.whats-new-group[data-type="changed"] {
  --whats-new-tone: var(--openbot-accent-text);
}
.whats-new-group[data-type="fixed"] {
  --whats-new-tone: var(--openbot-success-text);
}
.whats-new-group-title {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin: 0;
  color: var(--whats-new-tone);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.whats-new-group-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--openbot-radius-pill);
  background: var(--whats-new-tone);
  box-shadow: 0 0 10px var(--whats-new-tone);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 10px color-mix(in srgb, var(--whats-new-tone) 70%, transparent);
  }
}
.whats-new-group-count {
  padding: 0 var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-pill);
  background: var(--whats-new-tone);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--whats-new-tone) 12%, transparent);
  }
  font-family: var(--openbot-font-mono);
  font-weight: var(--openbot-weight-medium);
  letter-spacing: 0;
}
.whats-new-list {
  display: grid;
  width: 100%;
  gap: var(--openbot-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.whats-new-item {
  position: relative;
  padding-inline-start: var(--openbot-space-6);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  text-wrap: pretty;
}
.whats-new-item-headline {
  display: block;
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}
.whats-new-item-detail {
  display: block;
  margin-block-start: var(--openbot-space-0-5);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.whats-new-item::before {
  content: "";
  position: absolute;
  inset-block-start: 0.75em;
  inset-inline-start: var(--openbot-space-1);
  width: 8px;
  height: 1px;
  background: var(--whats-new-tone);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--whats-new-tone) 70%, transparent);
  }
}
.whats-new-toggle {
  margin-inline-start: calc(-1 * var(--openbot-space-2));
  color: var(--openbot-text-muted);
}
.whats-new-actions .ui-button svg, .whats-new-toggle svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.whats-new-toggle svg {
  transition: transform var(--openbot-duration-fast) var(--openbot-ease-out);
}
.whats-new-toggle[data-expanded] svg {
  transform: rotate(180deg);
}
.whats-new-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border-block-start: 1px solid var(--openbot-border);
}
@media (max-width: 560px) {
  .whats-new-backdrop {
    padding: var(--openbot-space-3);
  }
  .whats-new-header {
    padding-inline: var(--openbot-space-4);
  }
  .whats-new-body {
    padding-inline: var(--openbot-space-4);
  }
}
@media (prefers-reduced-motion: reduce) {
  .whats-new-backdrop, .whats-new-toggle svg {
    animation: none;
    transition: none;
  }
}
.help-menu {
  width: 320px;
}
.help-menu .help-menu-news {
  gap: var(--openbot-space-3);
}
.help-menu-news-headline {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.help-menu-news .ui-menu-trailing {
  flex: none;
}
.billing-panel {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
}
.billing-loading {
  display: grid;
  place-items: center;
  padding: var(--openbot-space-8);
}
.billing-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--openbot-space-3);
  min-height: 32px;
}
.billing-toolbar .ui-button {
  max-width: 100%;
  height: auto;
  white-space: normal;
}
.billing-empty {
  padding: var(--openbot-space-6) var(--openbot-space-4);
  border: 1px dashed var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  text-align: center;
}
.billing-server-logo {
  width: 32px;
  height: 32px;
  border-radius: var(--openbot-radius-md);
}
.billing-server-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
}
.billing-server .ui-item-actions {
  gap: var(--openbot-space-2);
}
.billing-server-price {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.billing-dialog-backdrop {
  background: var(--openbot-bg-overlay);
}
.billing-dialog {
  position: relative;
  display: flex;
  width: min(640px, 100%);
  max-height: calc(100dvh - 2 * var(--openbot-space-6));
  flex-direction: column;
  overflow: hidden;
  outline: 0;
  border-radius: var(--openbot-radius-modal);
  background: var(--openbot-bg-sidebar);
  color: var(--openbot-text-primary);
}
.billing-dialog-close {
  position: absolute;
  z-index: 1;
  inset-block-start: var(--openbot-space-3);
  inset-inline-end: var(--openbot-space-3);
  color: var(--openbot-text-muted);
}
.billing-dialog-header {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-6) var(--openbot-space-6) var(--openbot-space-4);
}
.billing-dialog-header p {
  margin: 0;
}
.billing-dialog-title {
  margin: 0;
  font-size: var(--openbot-text-2xl);
  font-weight: var(--openbot-weight-bold);
  line-height: var(--openbot-leading-2xl);
}
.billing-dialog-body {
  min-height: 0;
  overflow-y: auto;
  padding: 0 var(--openbot-space-6) var(--openbot-space-6);
}
.billing-license {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-3);
}
@container (max-width: 560px) {
  .billing-license .ui-alert {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }
  .billing-license .ui-alert-actions {
    grid-column: 2;
    justify-content: flex-start;
  }
}
.billing-license-icon {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-secondary);
}
.billing-license-icon svg {
  width: 18px;
  height: 18px;
}
.billing-license-row .ui-item-actions {
  gap: var(--openbot-space-2);
}
.billing-license-buy {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3) var(--openbot-space-4);
}
.billing-license-buy-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
}
.billing-license-buy-users, .billing-license-buy-total {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
}
.billing-license-buy-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.billing-license-stepper {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
  margin: 0;
  border: 0;
  padding: 0;
}
.billing-license-stepper-value {
  min-width: 3ch;
  font-weight: var(--openbot-weight-semibold);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.billing-license-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-2);
}
.billing-license-link.ui-button {
  height: auto;
  padding: 0;
}
.billing-license-divider {
  width: 100%;
  margin: var(--openbot-space-2) 0;
  border: 0;
  border-top: 1px solid var(--openbot-border);
}
.billing-license-change {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-3);
}
.billing-license-quote {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
  border-top: 1px solid var(--openbot-border);
  padding-top: var(--openbot-space-3);
}
.billing-license-lines {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.billing-license-lines div {
  display: flex;
  justify-content: space-between;
  gap: var(--openbot-space-3);
}
.billing-license-lines dd {
  margin: 0;
  color: var(--openbot-text-primary);
  font-variant-numeric: tabular-nums;
}
.billing-license-total {
  display: flex;
  align-items: baseline;
  gap: var(--openbot-space-2);
  margin: 0;
}
.billing-license-total-amount {
  font-size: var(--openbot-text-2xl);
  font-weight: var(--openbot-weight-bold);
  font-variant-numeric: tabular-nums;
}
.billing-license-users {
  max-height: 320px;
  overflow-y: auto;
}
.reference-chip, .composer-mention-token {
  display: inline-flex;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  height: var(--openbot-space-6);
  align-items: center;
  justify-content: flex-start;
  gap: var(--openbot-space-1);
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-border);
  padding: var(--openbot-space-1) var(--openbot-space-1-5) var(--openbot-space-1) var(--openbot-space-1);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: 500;
  line-height: var(--openbot-space-4);
  vertical-align: middle;
  white-space: nowrap;
  text-decoration: none;
}
.reference-chip[data-kind="mcp"], .reference-chip[data-kind="plugin"], .reference-chip[data-kind="skill"] {
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
}
.reference-chip[data-kind="quote"] {
  max-width: min(240px, 100%);
  font-weight: 450;
}
.reference-chip[data-kind="agent"]:hover, button.reference-chip[data-kind="quote"]:hover {
  background: var(--openbot-border-strong);
  color: var(--openbot-text-primary);
}
.reference-chip .reference-chip-icon {
  display: inline-grid;
  width: var(--openbot-space-4);
  height: var(--openbot-space-4);
  flex: 0 0 var(--openbot-space-4);
  place-items: center;
  overflow: hidden;
  border-radius: var(--openbot-radius-xs);
  color: inherit;
}
.reference-chip-icon > img, .reference-chip-icon > svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
:is(.message-reference-chip, .composer-mention-token) .reference-chip-icon > svg.lucide {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  stroke-width: var(--openbot-icon-stroke);
}
.reference-chip-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
:root {
  --stagger-dur: 500ms;
  --stagger-distance: 12px;
  --stagger-stagger: 40ms;
  --stagger-blur: 3px;
  --stagger-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
.t-stagger-line {
  display: block;
  opacity: 0;
  transform: translateY(var(--stagger-distance));
  filter: blur(var(--stagger-blur));
  transition: opacity var(--stagger-dur) var(--stagger-ease), transform var(--stagger-dur) var(--stagger-ease), filter var(--stagger-dur) var(--stagger-ease);
  will-change: transform, opacity, filter;
}
.t-stagger-line--2 {
  transition-delay: var(--stagger-stagger);
}
.t-stagger-line--3 {
  transition-delay: calc(var(--stagger-stagger) * 2);
}
.t-stagger.is-shown .t-stagger-line {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
@media (prefers-reduced-motion: reduce) {
  .t-stagger-line {
    transition: none !important;
  }
}
.skill-preview {
  display: grid;
  gap: var(--openbot-space-6);
  min-width: 0;
}
.skill-preview-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: var(--openbot-space-3);
  row-gap: var(--openbot-space-3);
  align-items: center;
}
.skill-preview-heading .agent-skill-icon {
  grid-column: 1;
  align-self: center;
}
.skill-preview-name {
  grid-column: 2;
  min-width: 0;
}
.skill-preview-action {
  grid-column: 3;
  justify-self: end;
}
.skill-preview-summary {
  grid-column: 1 / -1;
}
.skill-preview-heading h2, .skill-preview-heading p, .skill-preview-request p {
  margin: 0;
}
.skill-preview-heading h2 {
  font-size: var(--openbot-text-2xl);
  font-weight: var(--openbot-weight-medium);
  overflow-wrap: anywhere;
}
.skill-preview-heading p, .skill-preview-description {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-lg);
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.skill-preview-heading .skill-preview-creator {
  margin-top: var(--openbot-space-1);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-md);
}
.skill-preview-card {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 160px;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--openbot-radius-xl);
  padding: var(--openbot-space-6);
}
.skill-preview-gradient, .skill-preview-gradient canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
  clip-path: inset(0 round var(--openbot-radius-xl));
}
.skill-preview-card > :not(.skill-preview-gradient) {
  position: relative;
}
.skill-preview-request {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  width: min(100%, 520px);
  min-width: 0;
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-canvas);
  padding: var(--openbot-space-3);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-lg);
  line-height: 1.5;
}
.skill-preview-request p {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.skill-preview-request .reference-chip {
  max-width: 100%;
}
.skill-preview-request button {
  flex-shrink: 0;
}
.skill-preview-unavailable {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
}
.skill-preview-description > :first-child {
  margin-top: 0;
}
.skill-preview-description > :last-child {
  margin-bottom: 0;
}
.skill-preview-request .ui-icon-button {
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-border);
}
.agent-skills-modal:has(.agent-skill-detail) {
  width: min(760px, calc(100vw - 32px));
  height: min(640px, calc(100dvh - 48px));
}
:root {
  --page-slide-dur: 250ms;
  --page-fade-dur: 250ms;
  --page-slide-distance: 8px;
  --page-blur: 3px;
  --page-stagger: 0ms;
  --page-exit-enabled: 1;
  --page-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --page-fade-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
.t-page-slide {
  position: relative;
}
.t-page-slide .t-page[data-page-id="1"] {
  --t-page-from-x: calc(var(--page-slide-distance) * -1);
}
.t-page-slide .t-page[data-page-id="2"] {
  --t-page-from-x: var(--page-slide-distance);
}
.t-page-slide .t-page {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateX(calc(var(--t-page-from-x, 0px) * var(--page-exit-enabled)));
  filter: blur(calc(var(--page-blur) * var(--page-exit-enabled)));
  transition: opacity var(--page-fade-dur) var(--page-fade-ease), transform var(--page-slide-dur) var(--page-slide-ease), filter var(--page-slide-dur) var(--page-slide-ease);
  will-change: opacity, transform, filter;
}
.t-page-slide[data-page="1"] .t-page[data-page-id="1"], .t-page-slide[data-page="2"] .t-page[data-page-id="2"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
  filter: blur(0);
  transition-delay: var(--page-stagger);
}
@media (prefers-reduced-motion: reduce) {
  .t-page-slide .t-page {
    transition: none !important;
  }
}
.agent-skills-pages {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
@starting-style {
  .agent-skills-pages.t-page-slide .t-page {
    opacity: 0;
    transform: translateX(var(--t-page-from-x));
    filter: blur(var(--page-blur));
  }
}
:root {
  --resize-dur: 300ms;
  --resize-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
.t-resize {
  transition: width var(--resize-dur) var(--resize-ease), height var(--resize-dur) var(--resize-ease);
  will-change: width, height;
}
@media (prefers-reduced-motion: reduce) {
  .t-resize {
    transition: none !important;
  }
}
.skill-preview-heading.t-stagger-line, .skill-preview-card.t-stagger-line {
  display: grid;
}
@starting-style {
  .skill-preview.t-stagger.is-shown .t-stagger-line {
    opacity: 0;
    transform: translateY(var(--stagger-distance));
    filter: blur(var(--stagger-blur));
  }
}
.skill-preview-request .skill-preview-chip {
  color: var(--skill-logo-color, var(--openbot-accent-text));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--skill-logo-color, var(--openbot-accent-text)), var(--openbot-text-primary) 35%);
  }
  background: var(--skill-logo-color, var(--openbot-accent-text));
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--skill-logo-color, var(--openbot-accent-text)) 18%, transparent);
  }
}
.agent-skills-tabs {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.agent-skills-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--openbot-space-2);
  flex-shrink: 0;
  margin: var(--openbot-space-3);
}
.agent-skills-tab-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.agent-local-skill-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-2);
}
.agent-skills-tab-slot {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
@starting-style {
  .agent-skills-tab-content[data-selected] {
    opacity: 0;
    transform: translateY(var(--sliding-tabs-content-distance));
    filter: blur(var(--sliding-tabs-content-blur));
  }
}
.agent-local-library:not(.agent-skill-detail) {
  gap: var(--openbot-space-0-5);
  padding: 0;
}
.agent-local-skill-row:has(.agent-skill-update) {
  grid-template-columns: minmax(0, 1fr) auto auto;
}
:root {
  color-scheme: dark;
  --background: var(--openbot-bg-canvas);
  --surface: var(--openbot-bg-surface);
  --border: var(--openbot-border);
  --text-primary: var(--openbot-text-primary);
  --text-secondary: var(--openbot-text-secondary);
  --text-muted: var(--openbot-text-muted);
  --accent: var(--openbot-accent);
  --danger: var(--openbot-danger);
  --digit-dur: 500ms;
  --digit-distance: 8px;
  --digit-stagger: 70ms;
  --digit-blur: 2px;
  --digit-ease: cubic-bezier(0.34, 1.45, 0.64, 1);
  --digit-dir-x: 0;
  --digit-dir-y: 1;
  --stream-gap: 40ms;
  --stream-fade: 300ms;
  --stream-catch-up: 400ms;
  --stream-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --text-swap-dur: 150ms;
  --text-swap-translate-y: 4px;
  --text-swap-blur: 2px;
  --text-swap-ease: ease-in-out;
  --modal-open-dur: 250ms;
  --modal-close-dur: 150ms;
  --modal-scale: 0.96;
  --modal-scale-close: 0.96;
  --modal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --page-slide-dur: 250ms;
  --page-fade-dur: 250ms;
  --page-slide-distance: 8px;
  --page-blur: 3px;
  --page-stagger: 0ms;
  --page-exit-enabled: 1;
  --page-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --page-fade-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --panel-open-dur: 400ms;
  --panel-close-dur: 350ms;
  --panel-translate-x: 0px;
  --panel-translate-y: 100px;
  --panel-blur: 2px;
  --panel-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --resize-dur: 300ms;
  --resize-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shake-distance: 6px;
  --shake-overshoot: 4px;
  --shake-dur-a: 80ms;
  --shake-dur-b: 60ms;
  --shake-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --revert-hold: 3000ms;
  --revert-dur: 280ms;
  --acc-expand: 250ms;
  --acc-collapse: 250ms;
  --acc-ease: cubic-bezier(0.22, 1, 0.36, 1);
  font-family: var(--openbot-font-sans);
  font-synthesis: none;
  text-rendering: geometricPrecision;
}
.web-app {
  min-width: 0;
  height: 100dvh;
  color: var(--openbot-text-primary);
  background: var(--openbot-bg-canvas);
}
.web-app-frame {
  min-width: 0;
  height: 100%;
}
.web-app-frame > .server-rail {
  padding-top: var(--openbot-space-3);
}
.web-app-frame > .server-rail::before {
  display: none;
}
.web-app-frame > .server-rail::after {
  top: 0;
}
.web-mobile-navigation {
  display: none;
}
@media (max-width: 720px) {
  .web-app-window {
    --web-mobile-navigation-height: 64px;
  }
  .web-app-window:has(> .web-app-frame[data-web-mobile-pane="workspace"]) > .window-rail {
    display: flex;
    padding-bottom: calc( var(--web-mobile-navigation-height) + env(safe-area-inset-bottom, 0px) + var(--openbot-space-3) );
  }
  .web-app-frame {
    --server-rail-width: 56px;
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: calc(var(--web-mobile-navigation-height) + env(safe-area-inset-bottom, 0px));
  }
  .web-app-frame[data-web-mobile-pane="conversation"] {
    grid-template-columns: minmax(0, 1fr);
  }
  .web-app-frame[data-web-mobile-pane="conversation"] > .server-rail, .web-app-frame[data-web-mobile-pane="conversation"] > .sidebar {
    display: none;
  }
  .web-app-frame > .left-panel-resizer {
    display: none;
  }
  .web-app-frame[data-web-mobile-pane="conversation"] .conversation-panel, .web-app-frame[data-web-mobile-pane="conversation"] .diagram-view, .web-app-frame[data-web-mobile-pane="conversation"] .remote-compatibility-screen {
    grid-column: 1;
    min-width: 0;
  }
  .web-app-frame[data-web-mobile-pane="workspace"] {
    grid-template-columns: 56px minmax(0, 1fr);
  }
  .web-app-frame[data-web-mobile-pane="workspace"] .conversation-panel, .web-app-frame[data-web-mobile-pane="workspace"] .diagram-view, .web-app-frame[data-web-mobile-pane="workspace"] .remote-compatibility-screen, .web-app-frame[data-web-mobile-pane="workspace"] > .server-connection-workspace {
    display: none;
  }
  .web-app-frame[data-web-mobile-pane="workspace"] > .server-rail {
    display: flex;
    grid-column: 1;
    grid-row: 1;
  }
  .web-app-frame[data-web-mobile-pane="workspace"] > .sidebar {
    display: flex;
    grid-column: 2;
    grid-row: 1;
    width: auto;
  }
  .web-app-frame[data-web-mobile-pane="workspace"]:not(.app-frame-with-server-rail) {
    grid-template-columns: minmax(0, 1fr);
  }
  .web-app-frame[data-web-mobile-pane="workspace"]:not(.app-frame-with-server-rail) > .sidebar {
    grid-column: 1;
  }
  .web-mobile-navigation {
    position: fixed;
    z-index: var(--openbot-layer-popover);
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    min-height: var(--web-mobile-navigation-height);
    align-items: center;
    justify-content: center;
    border-top: 1px solid var(--openbot-border);
    background: var(--openbot-bg-sidebar);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--openbot-bg-sidebar) 94%, transparent);
    }
    padding: var(--openbot-space-2) max(var(--openbot-space-3), env(safe-area-inset-left, 0px)) calc(var(--openbot-space-2) + env(safe-area-inset-bottom, 0px)) max(var(--openbot-space-3), env(safe-area-inset-right, 0px));
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
  }
  .web-mobile-navigation-list {
    display: grid;
    width: min(100%, 360px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--openbot-space-1);
  }
  .web-mobile-navigation-button {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: var(--openbot-space-2);
    border: 1px solid transparent;
    border-radius: var(--openbot-radius-lg);
    color: var(--openbot-text-muted);
    font-size: var(--openbot-text-sm);
    font-weight: var(--openbot-weight-semibold);
  }
  .web-mobile-navigation-button > svg {
    width: var(--openbot-icon-md);
    height: var(--openbot-icon-md);
    stroke-width: var(--openbot-icon-stroke);
  }
  .web-mobile-navigation-button[data-active="true"] {
    border-color: var(--openbot-border);
    background: var(--openbot-bg-control);
    color: var(--openbot-text-primary);
  }
  .web-app-frame[data-web-mobile-pane="conversation"] .conversation-header {
    padding-inline: var(--openbot-space-2);
  }
  .web-app-frame[data-web-mobile-pane="conversation"] .conversation-header-actions {
    gap: var(--openbot-space-1);
  }
  .web-app-frame[data-web-mobile-pane="conversation"] .conversation-header .provider-model-trigger {
    max-width: 132px;
  }
  .web-app-frame[data-web-mobile-pane="conversation"] .conversation-panel:has(.settings-panel) .settings-panel {
    width: 100%;
  }
  .web-app-frame[data-web-mobile-pane="conversation"] .conversation-panel.browser-panel-active {
    padding-right: 0;
  }
  .web-app-frame[data-web-mobile-pane="conversation"] .browser-panel {
    width: 100%;
    max-width: 100%;
  }
  .web-app .join-server-backdrop {
    padding: var(--openbot-space-3);
  }
  .web-app .join-server-content {
    padding: var(--openbot-space-6) var(--openbot-space-4);
  }
  .web-app .ui-dialog-content {
    max-width: calc(100vw - 24px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .web-mobile-navigation-button {
    transition: none;
  }
}
.web-connect.conversation-panel {
  display: grid;
  place-items: center;
  overflow-y: auto;
  padding: var(--openbot-space-8) var(--openbot-space-4);
}
.web-connect-card {
  display: flex;
  width: min(420px, 100%);
  flex-direction: column;
  gap: var(--openbot-space-6);
}
.web-connect-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-2);
  text-align: center;
}
.web-connect-header .ui-heading {
  font-size: var(--openbot-text-3xl);
  font-weight: var(--openbot-weight-bold);
  line-height: var(--openbot-leading-3xl);
}
.web-connect-header .ui-text {
  max-width: 340px;
  line-height: var(--openbot-leading-sm);
}
.web-connect-logo {
  --app-logo-background: var(--openbot-surface-light);
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  margin-bottom: var(--openbot-space-4);
  border-radius: var(--openbot-radius-xl);
  box-shadow: 0 12px 28px var(--openbot-shadow-dialog), inset 0 1px 0 var(--openbot-border-strong);
}
.web-connect-steps {
  display: grid;
  margin: 0;
  padding: var(--openbot-space-1);
  list-style: none;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
}
.web-connect-steps li {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-2) var(--openbot-space-3);
}
.web-connect-steps li + li {
  border-top: 1px solid var(--openbot-border);
}
.web-connect-steps .ui-text {
  min-width: 0;
  overflow-wrap: anywhere;
}
.web-connect-step-number {
  display: grid;
  width: var(--openbot-control-xs);
  height: var(--openbot-control-xs);
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
}
.web-connect-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-3);
}
.web-connect-primary-actions {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  gap: var(--openbot-space-2);
}
.web-connect-primary-actions .ui-button {
  min-width: 160px;
  flex: 1 1 0;
}
.web-connect-download.ui-button-variant-default, .web-connect-download.ui-button-variant-default:hover {
  color: var(--openbot-text-on-light);
}
.web-connect-download.ui-button-variant-outline {
  color: var(--openbot-text-secondary);
}
@media (hover: hover) and (pointer: fine) and (min-width: 601px) {
  .web-connect-download.ui-button-variant-outline:hover {
    color: var(--openbot-text-primary);
  }
}
.web-connect-hosted.ui-button {
  width: 100%;
}
.web-connect-refresh.ui-button {
  color: var(--openbot-text-muted);
}
.web-connect-hosted.ui-button svg, .web-connect-actions .ui-button svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.web-connect-refresh.ui-button svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-ease: initial;
      --hosted-upsell-beam-angle: 0deg;
    }
  }
}