/* /@fs/home/ubuntu/openbot/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%;
}

/* `AppLogo` starts each blink. A loop over the whole period, with the eyes still for most of it, makes
   the page draw a frame on every display refresh, because Chromium runs SVG animations on the main thread. */
.app-logo[data-animation="blink"]:where([data-blink]) .app-logo-eye {
  animation: app-logo-blink 192ms cubic-bezier(0.77, 0, 0.175, 1);
}

.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%,
  100% {
    transform: scaleY(1);
  }

  50% {
    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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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;
    --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;
  }
  .relative {
    position: relative;
  }
  .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;
  }
  .h-1 {
    height: var(--spacing);
  }
  .h-2 {
    height: calc(var(--spacing) * 2);
  }
  .h-3 {
    height: calc(var(--spacing) * 3);
  }
  .h-4 {
    height: calc(var(--spacing) * 4);
  }
  .h-5 {
    height: calc(var(--spacing) * 5);
  }
  .h-6 {
    height: calc(var(--spacing) * 6);
  }
  .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-frame: #0d0d0d;
  --openbot-bg-sheet-inset: #101010;
  --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-wash-front: linear-gradient(
    to top,
    rgba(111, 255, 196, 0),
    #6fffc4 20%,
    #6db8ff 38%,
    #bb66ff 56%,
    #ff66c0 74%,
    #ffb875 88%,
    rgba(255, 184, 117, 0)
  );
  --openbot-color-picker-light: #ffffff;
  --openbot-color-picker-dark: #000000;
  --openbot-color-picker-spectrum: linear-gradient(
    to right,
    #ff0000,
    #ffff00,
    #00ff00,
    #00ffff,
    #0000ff,
    #ff00ff,
    #ff0000
  );
  --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: var(--openbot-text-muted);
  --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-paper: #f0f0f0;
  --openbot-paper-text: #141414;
  --openbot-paper-text-muted: rgba(20, 20, 20, 0.52);
  --openbot-paper-text-dim: rgba(20, 20, 20, 0.36);
  --openbot-paper-border: rgba(20, 20, 20, 0.14);
  --openbot-onboarding-desktop-mist: #dbe9ff;
  --openbot-onboarding-desktop-blue: #7eb4f2;
  --openbot-onboarding-desktop-indigo: #6f7de8;
  --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-felt-plum-top: rgb(112 80 131);
  --openbot-felt-plum-bottom: rgb(74 40 92);
  --openbot-felt-raspberry-top: rgb(245 32 112);
  --openbot-felt-raspberry-bottom: rgb(180 6 65);
  --openbot-felt-amber-top: rgb(255 149 17);
  --openbot-felt-amber-bottom: rgb(203 104 12);
  --openbot-felt-cream: #f6efe2;
  --openbot-felt-cream-stroke: #efe4d2;
  --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-star: #facc15;
  --openbot-star-edge: #ca8a04;
  --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-menu: rgba(0, 0, 0, 0.45);
  --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-default: "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Arabic", sans-serif;
  --openbot-font-mono-default: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
  --openbot-font-sans: var(--openbot-font-sans-default);
  --openbot-font-mono: var(--openbot-font-mono-default);
  --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, 3.5cqi, 2.75rem);
  --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: 2;
  --openbot-icon-stroke-lg: 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-show-delay: 750ms;
  --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 1px var(--openbot-border-focus);
  --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="kimi"] {
  --openbot-provider-current: var(--openbot-text-primary);
}
[data-provider="devin"] {
  --openbot-provider-current: var(--openbot-text-primary);
}
[data-provider="copilot"] {
  --openbot-provider-current: var(--openbot-text-primary);
}
[data-provider="mistral"] {
  --openbot-provider-current: var(--openbot-text-primary);
}
[data-provider="acp"] {
  --openbot-provider-current: var(--openbot-text-primary);
}
:root[data-openbot-color-scheme="light"] {
  color-scheme: light;
  --openbot-bg-canvas: #f5f5f6;
  --openbot-bg-canvas-clear: rgba(245, 245, 246, 0);
  --openbot-bg-frame: #e8e8eb;
  --openbot-bg-sidebar: #f5f5f6;
  --openbot-bg-native-sidebar: #f5f5f6;
  --openbot-bg-sheet: #ffffff;
  --openbot-bg-sheet-inset: #f0f0f2;
  --openbot-bg-grouped: #ffffff;
  --openbot-text-grouped-secondary: #6b6b70;
  --openbot-border-grouped: #e3e3e6;
  --openbot-marketplace-detail-bg: #ececee;
  --openbot-bg-surface: #ffffff;
  --openbot-bg-surface-raised: #fcfcfc;
  --openbot-bg-control: #ffffff;
  --openbot-bg-control-hover: #f0f0f2;
  --openbot-bg-control-active: #e8e8eb;
  --openbot-tabs-bar-bg: #ececee;
  --openbot-tabs-pill-bg: #ffffff;
  --openbot-bg-overlay: rgba(245, 245, 246, 0.92);
  --openbot-dialog-overlay: rgba(20, 20, 20, 0.12);
  --openbot-dialog-ring: rgba(20, 20, 20, 0.1);
  --openbot-bg-glass: rgba(255, 255, 255, 0.76);
  --openbot-glass-surface: rgba(20, 20, 20, 0.04);
  --openbot-glass-surface-hover: rgba(20, 20, 20, 0.07);
  --openbot-glass-border: rgba(20, 20, 20, 0.12);
  --openbot-glass-highlight: rgba(255, 255, 255, 0.6);
  --openbot-glass-shadow: transparent;
  --openbot-scroll-edge-overlay: rgba(245, 245, 246, 0.72);
  --openbot-border: rgba(20, 20, 20, 0.07);
  --openbot-border-strong: rgba(20, 20, 20, 0.1);
  --openbot-image-outline: rgba(20, 20, 20, 0.1);
  --openbot-hover: rgba(20, 20, 20, 0.05);
  --openbot-text-primary: #141414;
  --openbot-text-secondary: #3a3a3c;
  --openbot-text-muted: #6b6b70;
  --openbot-text-dim: #8e8e93;
  --openbot-text-placeholder: #5c5c61;
  --openbot-text-readable: rgba(20, 20, 20, 0.6);
  --openbot-settings-text-muted: rgba(20, 20, 20, 0.6);
  --openbot-surface-light: #1c1c1e;
  --openbot-text-on-light: #ffffff;
  --openbot-text-muted-on-light: rgba(255, 255, 255, 0.64);
  --openbot-text-dim-on-light: rgba(255, 255, 255, 0.4);
  --openbot-border-on-light: rgba(255, 255, 255, 0.16);
  --openbot-accent-hover: #006ad4;
  --openbot-accent-text: #0064c8;
  --openbot-accent-soft: rgba(0, 124, 247, 0.12);
  --openbot-accent-strong: rgba(0, 124, 247, 0.26);
  --openbot-chart-series-codex: #8e4fc0;
  --openbot-chart-series-grok: #16849b;
  --openbot-chart-storage-workspaces: #2f74c9;
  --openbot-chart-storage-files: #c64d1d;
  --openbot-chart-storage-chats: #148a61;
  --openbot-chart-storage-downloads: #6f62d6;
  --openbot-chart-storage-runtimes: #a86f00;
  --openbot-success: #1fa85a;
  --openbot-success-text: #187a41;
  --openbot-success-soft: rgba(31, 168, 90, 0.12);
  --openbot-success-wash: rgba(31, 168, 90, 0.06);
  --openbot-warning: #f08a00;
  --openbot-warning-text: #9c5200;
  --openbot-warning-soft: rgba(240, 138, 0, 0.14);
  --openbot-approval-badge-soft: rgba(240, 138, 0, 0.18);
  --openbot-danger: #e8222d;
  --openbot-danger-hover: #f04a53;
  --openbot-danger-text: #c0141d;
  --openbot-danger-soft: rgba(232, 34, 45, 0.12);
  --openbot-danger-soft-hover: rgba(232, 34, 45, 0.2);
  --openbot-danger-focus: rgba(232, 34, 45, 0.36);
  --openbot-danger-border: rgba(232, 34, 45, 0.45);
  --openbot-question-option: #16849b;
  --openbot-question-option-soft: rgba(22, 132, 155, 0.12);
  --openbot-question-option-hover: rgba(22, 132, 155, 0.18);
  --openbot-question-option-pressed: rgba(22, 132, 155, 0.24);
  --openbot-question-badge-text: #0f6a7d;
  --openbot-question-badge-soft: rgba(22, 132, 155, 0.14);
  --openbot-message-badge-text: #0a5fb8;
  --openbot-message-badge-soft: rgba(0, 124, 247, 0.12);
  --openbot-badge-new: #e0004a;
  --openbot-badge-new-soft: rgba(224, 0, 74, 0.12);
  --openbot-file-blue: #1a66c4;
  --openbot-file-blue-soft: rgba(31, 111, 209, 0.12);
  --openbot-file-yellow: #9c5200;
  --openbot-file-yellow-soft: rgba(240, 138, 0, 0.14);
  --openbot-file-orange: #a8521a;
  --openbot-file-orange-soft: rgba(181, 90, 31, 0.12);
  --openbot-file-teal: #127589;
  --openbot-file-teal-soft: rgba(22, 132, 155, 0.12);
  --openbot-file-green: #187a41;
  --openbot-file-green-soft: rgba(31, 168, 90, 0.12);
  --openbot-file-red: #c0141d;
  --openbot-file-red-soft: rgba(232, 34, 45, 0.12);
  --openbot-file-pink: #a3478f;
  --openbot-file-pink-soft: rgba(163, 71, 143, 0.12);
  --openbot-file-default: #0064c8;
  --openbot-file-default-soft: rgba(0, 124, 247, 0.12);
  --openbot-data-table-border: #e3e3e6;
  --openbot-data-table-header-text: #6b6b70;
  --openbot-data-table-text: #1c1c1e;
  --openbot-data-table-outer-border: rgba(20, 20, 20, 0);
  --openbot-data-table-ring: rgba(20, 20, 20, 0.1);
  --openbot-shadow-popover-ambient: transparent;
  --openbot-shadow-dialog: transparent;
  --openbot-shadow-menu: transparent;
  --openbot-shadow-ring: rgba(20, 20, 20, 0.04);
  --openbot-shadow-overlay: 0 0 0 transparent;
}
: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;
  }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
@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", "Noto Sans Arabic",
    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"], .site-panel[data-kind="resources"] {
  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(--openbot-duration-slow) var(--openbot-ease-out);
  will-change: transform;
}
.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-resource-icon {
  width: 20px;
  height: 20px;
}
.site-panel-resource-logo {
  background: none;
  box-shadow: none;
}
.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;
}
.site-language-menu {
  position: relative;
}
.site-language-list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 2;
  min-width: 200px;
  margin: 0;
  padding: 6px;
  border-radius: 14px;
  background: rgba(22, 22, 22, 0.8);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07);
  list-style: none;
  backdrop-filter: blur(40px) saturate(180%);
}
.site-language-list[hidden] {
  display: none;
}
.site-language-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 9px;
  color: var(--openbot-text-primary);
  font-size: 14px;
}
.site-language-list a:hover, .site-language-list a:focus-visible {
  outline: 0;
  background: rgba(255, 255, 255, 0.05);
}
.site-language-flag {
  display: inline-flex;
  flex: 0 0 auto;
  width: 20px;
  height: 14px;
  overflow: hidden;
  border-radius: 3px;
}
.site-language-flag svg {
  width: 100%;
  height: 100%;
}
.site-language-name {
  flex: 1 1 auto;
  white-space: nowrap;
}
.site-language-check {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--openbot-text-secondary);
}
@media (min-width: 1101px) and (max-width: 1280px) {
  .landing-header {
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    padding-inline: 24px;
  }
  .site-nav {
    justify-self: center;
  }
  .site-nav-trigger {
    padding: 0 7px 0 10px;
  }
  .site-nav-link {
    padding: 0 10px;
  }
}
@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 (max-width: 1100px) {
  .landing-header {
    display: flex;
    justify-content: space-between;
  }
  .site-nav, .site-header-actions > .site-header-secondary {
    display: none;
  }
  .site-header-actions {
    position: relative;
  }
  .site-language-menu {
    position: static;
  }
  .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");
}
.landing-button[data-icon="copy"]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 3h11a2 2 0 0 1 2 2v11h-2V5H8V3Zm-3 4h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2Zm0 2v10h10V9H5Z'/%3E%3C/svg%3E");
}
.landing-button[data-icon="check"]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17Z'/%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;
}
.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-actions[hidden] {
  display: none;
}
.join-card-actions-full {
  grid-template-columns: 1fr;
}
.join-card-alternatives {
  margin: 16px 0 0;
  color: var(--openbot-text-secondary);
  font-size: 14px;
  line-height: 1.5;
}
.join-card-alternatives a {
  color: var(--openbot-text-primary);
  text-decoration: underline;
  text-decoration-color: var(--openbot-text-muted);
  text-underline-offset: 3px;
}
.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;
}
@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);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
}
.site-header-actions > .landing-button-glass, .landing-availability {
  border-color: rgba(255, 255, 255, 0.14);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(255, 255, 255, 0.04), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}
.landing-button[data-beam-source] {
  position: relative;
}
.landing-button[data-beam-source]::after {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: 0 0 8px 1px rgba(var(--landing-beam-rim, 164, 108, 245), 0.55);
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--openbot-duration-normal) var(--openbot-ease-out);
}
.landing-button[data-beam-struck]::after {
  opacity: 1;
}
.landing-button:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--openbot-accent-strong);
}
.landing-button:active {
  transform: scale(0.97);
}
.site-language-trigger {
  gap: 6px;
  padding: 0 12px;
  cursor: pointer;
}
.site-language-trigger::before {
  content: none;
}
.site-language-trigger svg {
  width: 14px;
  height: 14px;
}
@media (max-width: 1280px) {
  .site-language-trigger {
    width: 38px;
    height: 38px;
    padding: 0;
    justify-content: center;
  }
  .site-language-trigger > :not(:first-child) {
    display: none;
  }
  .site-language-trigger svg {
    width: 18px;
    height: 18px;
  }
}
.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-beam {
  position: absolute;
  z-index: 0;
  top: -76px;
  bottom: 0;
  left: 50%;
  width: 100vw;
  pointer-events: none;
  transform: translateX(-50%);
  mask-image: linear-gradient(var(--openbot-transparent), var(--openbot-mask-solid) 120px);
}
.landing-beam[data-source] {
  mask-image: none;
}
.landing-beam-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.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-width: 1px;
  border-style: solid;
  border-radius: var(--openbot-radius-pill);
  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: inset 0 1px var(--openbot-glass-highlight);
}
.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-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
  margin: 0;
  padding: 0;
  color: var(--openbot-text-secondary);
  font-size: clamp(16px, 1.8vw, 18px);
  line-height: 1.5;
  list-style: none;
}
.landing-pricing-facts li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.landing-pricing-fact-icon {
  flex: none;
  width: 18px;
  height: 18px;
}
.landing-pricing-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 36px;
}
.landing-pricing [data-revealed="false"] {
  opacity: 0;
}
.landing-pricing-eyebrow[data-revealed="true"], .landing-pricing-facts[data-revealed="true"], .landing-pricing-actions[data-revealed="true"] {
  animation: landing-download-reveal 760ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.landing-pricing-facts[data-revealed="true"] {
  animation-delay: 320ms;
}
.landing-pricing-actions[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="multiplayer"] {
  grid-column: 1 / 9;
  grid-row: 3;
}
.landing-feature[data-feature="persist"] {
  grid-column: 1 / 9;
  grid-row: 4;
}
.landing-feature[data-feature="workflows"] {
  grid-column: 9 / 13;
  grid-row: 3 / 5;
}
.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:is([data-feature="team"], [data-feature="multiplayer"], [data-feature="persist"]) p {
  max-width: 64ch;
}
.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;
  align-items: stretch;
  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="multiplayer"] .landing-feature-visual {
  display: flex;
  padding: 36px 0 0 36px;
}
.landing-multiplayer-window .landing-team-stack {
  padding-right: 0;
}
.landing-multiplayer-window .landing-team-stack > * + * {
  margin-left: 4px;
}
.landing-feature .landing-face {
  overflow: hidden;
  background: var(--landing-face-background);
}
.landing-face-art {
  display: block;
  width: 100%;
  height: 100%;
}
.landing-face-skin {
  fill: var(--landing-face-skin);
}
.landing-face-shade {
  fill: var(--landing-face-shade);
}
.landing-face-hair {
  fill: var(--landing-face-hair);
}
.landing-face-shirt {
  fill: var(--landing-face-shirt);
}
.landing-face-brow {
  fill: none;
  stroke: var(--landing-face-brow);
  stroke-linecap: round;
  stroke-width: 1.1;
}
.landing-face-ink {
  fill: #3a2a24;
}
.landing-face-blush {
  fill: #ff7f8a;
  opacity: 0.35;
}
.landing-face-freckle {
  fill: #d98a5f;
}
.landing-face-glasses {
  fill: none;
  stroke: #3a2a24;
  stroke-width: 0.85;
}
.landing-face-mouth {
  fill: #c9524f;
  stroke: #3a2a24;
  stroke-linejoin: round;
  stroke-width: 0.7;
}
.landing-face[data-person="maya"] {
  --landing-face-background: #ffd6df;
  --landing-face-skin: #f8d2b4;
  --landing-face-shade: #ecb994;
  --landing-face-hair: #c56d3e;
  --landing-face-brow: #9c4f28;
  --landing-face-shirt: #8b7cf6;
}
.landing-face[data-person="sam"] {
  --landing-face-background: #cdeeff;
  --landing-face-skin: #ebbb94;
  --landing-face-shade: #d9a07a;
  --landing-face-hair: #8a5634;
  --landing-face-brow: #6e4127;
  --landing-face-shirt: #ffb547;
}
.landing-face[data-person="theo"] {
  --landing-face-background: #d6f5cc;
  --landing-face-skin: #fde3cf;
  --landing-face-shade: #f3c9ab;
  --landing-face-hair: #ef8a45;
  --landing-face-brow: #c8692d;
  --landing-face-shirt: #5b95f7;
}
.landing-multiplayer-joined {
  display: flex;
  justify-content: flex-end;
  width: 0;
  opacity: 0;
  transform: scale(0.6);
  transition: width 360ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease, transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}
.landing-multiplayer-window .landing-team-stack > .landing-multiplayer-joined {
  margin-left: 0;
}
.landing-feature[data-feature="multiplayer"]:hover .landing-multiplayer-joined {
  width: 32px;
  opacity: 1;
  transform: none;
  transition-delay: 160ms;
}
.landing-multiplayer-invite {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  margin-right: 24px;
  padding: 5px 10px;
  border: 1px solid var(--landing-card-border);
  border-radius: var(--openbot-radius-pill);
  color: var(--openbot-text-secondary);
  font-size: 12px;
  font-weight: 500;
  transition: border-color 200ms ease;
}
.landing-feature[data-feature="multiplayer"]:hover .landing-multiplayer-invite {
  border-color: var(--landing-card-border-hover);
}
.landing-multiplayer-invite-icon {
  width: 14px;
  height: 14px;
}
.landing-feature[data-feature="workflows"] .landing-feature-visual {
  container: landing-workflow / inline-size;
  place-items: center stretch;
  padding: 36px 32px 4px;
}
.landing-workflow {
  --landing-workflow-line: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --landing-workflow-line: color-mix(in srgb, var(--openbot-text-primary) 26%, transparent);
  }
  --landing-workflow-line-done: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --landing-workflow-line-done: color-mix(in srgb, var(--openbot-text-primary) 66%, transparent);
  }
  position: relative;
}
.landing-workflow-edges {
  --landing-workflow-clip: inset(-4px 100% -4px 0);
  --landing-workflow-clip-end: inset(-4px 0);
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.landing-workflow-edges-tall {
  --landing-workflow-clip: inset(0 -4px 100% -4px);
  --landing-workflow-clip-end: inset(0 -4px);
  display: none;
}
.landing-workflow-edge, .landing-workflow-edge-run {
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.landing-workflow-edge {
  stroke: var(--landing-workflow-line);
  stroke-dasharray: 4 5;
}
.landing-workflow-edge-run {
  stroke: var(--landing-workflow-line-done);
  clip-path: var(--landing-workflow-clip);
}
.landing-feature[data-feature="workflows"]:hover .landing-workflow-edge-run {
  animation: landing-workflow-draw var(--landing-workflow-edge) ease-in-out var(--landing-workflow-start) both;
}
.landing-workflow-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  column-gap: 8%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.landing-workflow-node {
  position: relative;
  grid-column: var(--landing-workflow-column);
  grid-row: 1 / -1;
  min-width: 0;
  display: grid;
  align-items: center;
  padding-block: 9px;
}
.landing-workflow-node[data-lane] {
  align-items: stretch;
}
.landing-workflow-node[data-lane="0"] {
  grid-row: 1;
}
.landing-workflow-node[data-lane="1"] {
  grid-row: 2;
}
.landing-workflow-node:not([data-step="trigger"])::before, .landing-workflow-node:not([data-step="approval"])::after {
  content: "";
  position: absolute;
  top: 50%;
  z-index: 1;
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--landing-workflow-line);
  border-radius: 50%;
  background: var(--openbot-bg-canvas);
  translate: 0 -50%;
}
.landing-workflow-node::before {
  left: -4.5px;
}
.landing-workflow-node::after {
  right: -4.5px;
}
.landing-feature[data-feature="workflows"]:hover .landing-workflow-node::before {
  animation: landing-workflow-port 200ms ease var(--landing-workflow-start) both;
}
.landing-feature[data-feature="workflows"]:hover .landing-workflow-node::after {
  animation: landing-workflow-port 200ms ease calc(var(--landing-workflow-start) + var(--landing-workflow-run)) both;
}
.landing-workflow-card {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  padding: 11px 12px 13px;
  border: 1px solid var(--landing-card-border);
  border-radius: 14px;
  background: var(--openbot-bg-canvas);
}
.landing-workflow-card::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(var(--openbot-text-secondary), var(--openbot-text-secondary)) left / 0 100% no-repeat;
}
.landing-feature[data-feature="workflows"]:hover .landing-workflow-card {
  animation: landing-workflow-active var(--landing-workflow-run) var(--landing-workflow-start);
}
.landing-feature[data-feature="workflows"]:hover .landing-workflow-card::after {
  animation: landing-workflow-progress var(--landing-workflow-run) linear var(--landing-workflow-start) both;
}
.landing-workflow-head {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--openbot-text-primary);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}
.landing-workflow-head .landing-team-avatar-small {
  --landing-team-avatar-size: 22px;
  box-shadow: none;
}
.landing-workflow-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.landing-workflow-badge {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-primary) 9%, transparent);
  }
  color: var(--openbot-text-secondary);
}
.landing-workflow-icon {
  flex: none;
  width: 13px;
  height: 13px;
}
.landing-workflow-provider {
  flex: none;
  width: 14px;
  height: 14px;
}
.landing-workflow-status {
  flex: none;
  display: grid;
  width: 16px;
  height: 16px;
  margin-left: auto;
}
.landing-workflow-spinner, .landing-workflow-done {
  grid-area: 1 / 1;
  width: 16px;
  height: 16px;
  border-radius: 50%;
}
.landing-workflow-spinner {
  border: 1.5px solid var(--landing-workflow-line);
}
.landing-feature[data-feature="workflows"]:hover .landing-workflow-spinner {
  animation: landing-workflow-spin 700ms linear infinite, landing-workflow-running var(--landing-workflow-run) var(--landing-workflow-start), landing-workflow-out 1ms calc(var(--landing-workflow-start) + var(--landing-workflow-run)) forwards;
}
.landing-workflow-done {
  padding: 2.5px;
  background: var(--openbot-text-primary);
  color: var(--openbot-bg-canvas);
  opacity: 0;
}
.landing-feature[data-feature="workflows"]:hover .landing-workflow-done {
  animation: landing-workflow-pop 360ms cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--landing-workflow-start) + var(--landing-workflow-run)) both;
}
.landing-workflow-text {
  color: var(--openbot-text-secondary);
  font-size: 13px;
  line-height: 1.45;
}
.landing-workflow-decision {
  display: grid;
}
.landing-workflow-approve, .landing-workflow-approved {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--openbot-radius-pill);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.landing-workflow-approve {
  background: var(--openbot-text-primary);
  color: var(--openbot-text-on-light);
}
.landing-workflow-approved {
  padding-inline: 0;
  color: var(--openbot-text-primary);
  opacity: 0;
}
.landing-feature[data-feature="workflows"]:hover .landing-workflow-approve {
  animation: landing-workflow-press 240ms ease calc(var(--landing-workflow-start) + var(--landing-workflow-run) - 240ms), landing-workflow-out 160ms ease calc(var(--landing-workflow-start) + var(--landing-workflow-run)) forwards;
}
.landing-feature[data-feature="workflows"]:hover .landing-workflow-approved {
  animation: landing-workflow-rise 300ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--landing-workflow-start) + var(--landing-workflow-run) + 80ms) both;
}
@keyframes landing-workflow-draw {
  from {
    clip-path: var(--landing-workflow-clip);
  }
  to {
    clip-path: var(--landing-workflow-clip-end);
  }
}
@keyframes landing-workflow-port {
  from {
    border-color: var(--landing-workflow-line);
    background: var(--openbot-bg-canvas);
  }
  to {
    border-color: var(--landing-workflow-line-done);
    background: var(--landing-workflow-line-done);
  }
}
@keyframes landing-workflow-active {
  from, to {
    border-color: var(--landing-workflow-line-done);
  }
}
@keyframes landing-workflow-progress {
  from {
    background-size: 0 100%;
  }
  to {
    background-size: 100% 100%;
  }
}
@keyframes landing-workflow-spin {
  to {
    rotate: 360deg;
  }
}
@keyframes landing-workflow-running {
  from, to {
    border-top-color: var(--openbot-text-primary);
  }
}
@keyframes landing-workflow-out {
  to {
    opacity: 0;
  }
}
@keyframes landing-workflow-pop {
  from {
    opacity: 0;
    scale: 0.5;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}
@keyframes landing-workflow-press {
  50% {
    scale: 0.9;
  }
}
@keyframes landing-workflow-rise {
  from {
    opacity: 0;
    translate: 0 6px;
  }
  to {
    opacity: 1;
    translate: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .landing-feature[data-feature="workflows"]:hover .landing-workflow-spinner {
    animation: landing-workflow-running var(--landing-workflow-run) var(--landing-workflow-start), landing-workflow-out 1ms calc(var(--landing-workflow-start) + var(--landing-workflow-run)) forwards;
  }
  .landing-feature[data-feature="workflows"]:hover .landing-workflow-done {
    animation-timing-function: step-start;
  }
  .landing-feature[data-feature="workflows"]:hover .landing-workflow-approve {
    animation: landing-workflow-out 1ms calc(var(--landing-workflow-start) + var(--landing-workflow-run)) forwards;
  }
  .landing-feature[data-feature="workflows"]:hover .landing-workflow-approved {
    animation-timing-function: step-start;
  }
}
@container landing-workflow (max-width: 640px) {
  .landing-workflow-card {
    padding-inline: 10px;
  }
  .landing-workflow-head {
    gap: 6px;
  }
  .landing-workflow-edges-wide {
    display: none;
  }
  .landing-workflow-edges-tall {
    display: block;
  }
  .landing-workflow-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
    column-gap: 0;
  }
  .landing-workflow-node {
    grid-column: 1 / -1;
    grid-row: var(--landing-workflow-column);
    justify-items: center;
    padding-block: 12px;
  }
  .landing-workflow-node[data-lane] {
    align-items: center;
    justify-items: stretch;
    padding-inline: 5px;
  }
  .landing-workflow-node[data-lane="0"] {
    grid-column: 1;
    grid-row: var(--landing-workflow-column);
  }
  .landing-workflow-node[data-lane="1"] {
    grid-column: 2;
    grid-row: var(--landing-workflow-column);
  }
  .landing-workflow-node:not([data-lane]) .landing-workflow-card {
    width: min(72%, 300px);
  }
  .landing-workflow-node:not([data-step="trigger"])::before, .landing-workflow-node:not([data-step="approval"])::after {
    content: none;
  }
}
.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-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="workflows"]) {
    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-feature[data-feature="multiplayer"] .landing-feature-visual {
    padding: 24px 0 0 20px;
  }
  .landing-faq-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .landing-faq-heading {
    position: static;
  }
}
@media (max-width: 600px) {
  .landing-feature[data-feature="workflows"] .landing-feature-visual {
    padding: 28px 16px 0;
  }
  .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;
  flex-wrap: wrap;
  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-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);
  }
  .site-header-actions > .landing-button-glass:hover {
    border-color: rgba(255, 255, 255, 0.22);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06));
  }
  .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: 1100px) {
  .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-pricing-facts {
    flex-direction: column;
    align-items: center;
  }
  .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 {
    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;
}
.landing-faq-body .compare-faq-answer a {
  color: var(--openbot-text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--openbot-duration-normal) ease;
}
.landing-faq-body .compare-faq-answer a:hover, .landing-faq-body .compare-faq-answer a:focus-visible {
  color: var(--openbot-logo-production);
}
.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);
}
.provider-adds-grid.plugin-uses {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0;
}
.plugin-uses .provider-add:first-child {
  border-color: var(--openbot-border);
  background: var(--openbot-bg-surface);
}
.plugin-uses .provider-add-title {
  margin-top: 0;
}
.provider-steps.plugin-connect {
  margin-top: 0;
}
.plugin-connect-fields {
  display: grid;
  gap: 6px;
  max-width: 68ch;
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--openbot-text-secondary);
  font-size: 15px;
  line-height: 1.6;
}
.plugin-connect-field-label {
  color: var(--openbot-text-primary);
  font-weight: 500;
}
@media (max-width: 640px) {
  .provider-adds-grid.plugin-uses {
    grid-template-columns: minmax(0, 1fr);
  }
}
@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-store[data-state="skipped"] {
  color: var(--openbot-text-dim);
}
.changelog-store[data-state="skipped"] .changelog-store-dot {
  background: transparent;
  box-shadow: inset 0 0 0 1px currentColor;
}
.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);
}
.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;
}
.brand-hero-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 32px;
  padding: clamp(32px, 4vw, 56px) 0 clamp(36px, 4.5vw, 56px);
}
.brand-hero-text {
  min-width: 0;
  max-width: 640px;
}
.brand-hero-title {
  margin-top: 0;
}
.brand-hero-intro {
  margin-top: 12px;
}
.brand-hero {
  padding-top: clamp(20px, 3vw, 36px);
}
.brand-stage {
  display: grid;
  place-items: center;
  aspect-ratio: 21 / 8;
  border-radius: var(--openbot-radius-modal);
  background: var(--openbot-logo-production);
}
.brand-stage-logo {
  width: auto;
  height: 82%;
}
.brand-stage .app-logo-background {
  visibility: hidden;
}
.brand-stage:has(.app-logo[data-easter-egg="party"]) {
  animation: brand-stage-party 1.2s cubic-bezier(0.77, 0, 0.175, 1) both;
}
@keyframes brand-stage-party {
  0%, 100% {
    background-color: var(--openbot-logo-production);
  }
  22% {
    background-color: var(--openbot-logo-dev);
  }
  48% {
    background-color: var(--openbot-logo-preview);
  }
  74% {
    background-color: var(--openbot-logo-production);
  }
}
.brand-stage .app-logo[data-interactive="true"]:focus-visible {
  box-shadow: none;
}
.brand-stage:has(.app-logo:focus-visible) {
  outline: 2px solid var(--openbot-text-primary);
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .brand-stage {
    cursor: pointer;
  }
}
@media (prefers-reduced-motion: reduce) {
  .brand-stage:has(.app-logo[data-easter-egg]) {
    animation: none;
  }
}
@media (max-width: 560px) {
  .brand-stage {
    aspect-ratio: 4 / 3;
  }
}
.site-logo-trigger {
  display: contents;
}
.site-logo-menu {
  z-index: 60;
  min-width: 236px;
  border-radius: 14px;
  background: rgba(22, 22, 22, 0.8);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(40px) saturate(180%);
  padding: 6px;
  outline: 0;
}
.site-logo-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 9px;
  padding: 8px 10px;
  color: var(--openbot-text-primary);
  font-size: 14px;
  cursor: default;
  outline: 0;
}
.site-logo-menu-item[data-highlighted] {
  background: rgba(255, 255, 255, 0.05);
}
.site-logo-menu-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--openbot-text-secondary);
}
.site-logo-menu-separator {
  margin: 6px 4px;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.brand-card-art[data-surface="dark"] {
  background: var(--openbot-bg-frame);
}
.brand-card-art[data-surface="light"] {
  background: var(--openbot-surface-light);
}
.brand-groups {
  display: grid;
  gap: clamp(40px, 5vw, 64px);
}
.brand-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 18px;
}
.brand-group-title {
  margin: 0;
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 600;
  letter-spacing: -0.03em;
}
.brand-space-toggle {
  margin-bottom: 0;
}
.brand-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.brand-cards[data-wide="true"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.brand-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-xl);
  background: var(--openbot-bg-surface);
}
.brand-card-art {
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  padding: 12%;
}
.brand-card-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: 100%;
}
.brand-cards[data-wide="true"] .brand-card-image {
  width: 100%;
  height: auto;
}
.brand-card-body {
  display: grid;
  gap: 14px;
  padding: 18px 20px 20px;
}
.brand-card-name {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
}
.brand-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
@media (max-width: 900px) {
  .brand-cards, .brand-cards[data-wide="true"] {
    grid-template-columns: minmax(0, 1fr);
  }
}
.marketplace-site a {
  text-decoration: none;
}
.marketplace-site-intro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
}
.marketplace-site-switch {
  display: flex;
  gap: 2px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface);
  padding: 4px;
}
.marketplace-site-switch-option {
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  height: 36px;
  border-radius: var(--openbot-radius-pill);
  padding: 0 20px;
  color: var(--openbot-text-secondary);
  font-size: 14px;
  font-weight: 500;
  transition: background-color var(--openbot-duration-normal) ease, color var(--openbot-duration-normal) ease;
}
.marketplace-site-switch-option[aria-current="page"] {
  background: var(--openbot-surface-light);
  color: var(--openbot-text-on-light);
}
.marketplace-site-search {
  position: relative;
  margin-bottom: clamp(28px, 3.4vw, 40px);
}
.marketplace-site-search-icon {
  position: absolute;
  top: 50%;
  left: 18px;
  width: 17px;
  height: 17px;
  color: var(--openbot-text-dim);
  transform: translateY(-50%);
  pointer-events: none;
}
.marketplace-site-search-input {
  width: 100%;
  height: 48px;
  border: 1px solid transparent;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface);
  padding: 0 20px 0 46px;
  color: var(--openbot-text-primary);
  font: inherit;
  font-size: 15px;
}
.marketplace-site-search-input::placeholder {
  color: var(--openbot-text-dim);
}
.marketplace-site-search-input:focus-visible {
  border-color: var(--openbot-border-strong);
  outline: 0;
}
.marketplace-site-switch-option:focus-visible, .marketplace-site-crumb:focus-visible, .marketplace-site-view-all:focus-visible, .marketplace-site-row:focus-visible, .marketplace-site-feature:focus-visible {
  outline: 2px solid var(--openbot-border-strong);
  outline-offset: 2px;
}
.marketplace-site-list {
  margin-top: clamp(24px, 3vw, 36px);
}
.marketplace-site-categories .plugin-tag-button[aria-current="page"] {
  border-color: var(--openbot-surface-light);
  background: var(--openbot-surface-light);
  color: var(--openbot-text-on-light);
}
.marketplace-site-empty {
  padding: clamp(32px, 5vw, 56px) 0;
}
.marketplace-site-name {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  min-width: 0;
}
.marketplace-site-verified {
  flex: 0 0 auto;
  width: 0.9em;
  height: 0.9em;
  color: var(--openbot-text-dim);
}
.marketplace-site-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--openbot-accent-text);
  pointer-events: none;
}
.marketplace-site-avatar-art, .marketplace-site-avatar-art > svg {
  display: block;
  width: 100%;
  height: 100%;
}
.marketplace-site-avatar .bloub-avatar-svg {
  scale: calc(1.45 / 1.15);
}
.marketplace-site-glyph {
  position: relative;
  width: auto;
  height: 28%;
  color: var(--openbot-text-primary);
}
.marketplace-site-trust {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 0;
  color: var(--openbot-text-dim);
  font-size: 14px;
  line-height: 1.45;
}
.marketplace-site-trust > svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}
.marketplace-site-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
}
.marketplace-site-actions .plugin-actions-row {
  justify-content: flex-start;
}
.marketplace-site-missing {
  max-width: 34em;
}
.marketplace-site-missing-actions {
  display: flex;
  margin: 28px 0 clamp(80px, 12vw, 160px);
}
.marketplace-site-group + .marketplace-site-group {
  margin-top: clamp(40px, 5vw, 56px);
}
.marketplace-site-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.marketplace-site-group-title {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.marketplace-site-view-all {
  color: var(--openbot-text-dim);
  font-size: 14px;
  transition: color var(--openbot-duration-normal) ease;
}
.marketplace-site-features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.marketplace-site-feature {
  display: grid;
  justify-items: center;
  gap: 4px;
  height: 100%;
  border-radius: 16px;
  background: var(--openbot-bg-surface);
  padding: 22px 16px 20px;
  color: var(--openbot-text-primary);
  text-align: center;
  transition: background-color var(--openbot-duration-normal) ease;
}
.marketplace-site-feature-mark {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  margin-bottom: 12px;
}
.marketplace-site-feature-name {
  display: block;
  font-size: 15px;
  font-weight: 500;
  text-wrap: balance;
}
.marketplace-site-feature-name .marketplace-site-verified {
  display: inline;
  margin-left: 0.3em;
  vertical-align: -0.1em;
}
.marketplace-site-feature-by {
  color: var(--openbot-text-dim);
  font-size: 13px;
}
.marketplace-site-rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px clamp(24px, 4vw, 56px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.marketplace-site-row {
  display: flex;
  align-items: center;
  gap: 14px;
  border-radius: 14px;
  padding: 12px;
  margin-inline: -12px;
  color: var(--openbot-text-primary);
  transition: background-color var(--openbot-duration-normal) ease;
}
.marketplace-site-row-mark {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 44px;
  height: 44px;
}
.marketplace-site-row-text {
  display: grid;
  flex: 1 1 auto;
  gap: 2px;
  min-width: 0;
}
.marketplace-site-row-title, .marketplace-site-row-line {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.marketplace-site-row-title {
  font-size: 15px;
  font-weight: 500;
}
.marketplace-site-row-by {
  color: var(--openbot-text-secondary);
  font-weight: 400;
}
.marketplace-site-row-line {
  color: var(--openbot-text-dim);
  font-size: 14px;
}
.marketplace-site-row-add {
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface);
  padding: 7px 16px;
  color: var(--openbot-text-primary);
  font-size: 14px;
  font-weight: 500;
  transition: background-color var(--openbot-duration-normal) ease;
}
.marketplace-site-skill-icon {
  display: block;
  width: 88%;
  height: 88%;
  border-radius: 22%;
}
.marketplace-site-detail-head {
  padding-bottom: clamp(32px, 4vw, 44px);
  border-bottom: 1px solid var(--openbot-border-strong);
}
.marketplace-site-crumbs {
  margin-top: clamp(28px, 3.5vw, 50px);
}
.marketplace-site-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}
.marketplace-site-crumbs li + li::before {
  content: "/";
  margin-inline: 8px;
  color: var(--openbot-text-dim);
}
.marketplace-site-crumb {
  color: var(--openbot-text-dim);
  transition: color var(--openbot-duration-normal) ease;
}
.marketplace-site-detail-row {
  align-items: flex-start;
  margin-top: clamp(24px, 3vw, 32px);
}
.marketplace-site-detail-row .plugin-hero-heading {
  flex: 1 1 0;
  align-items: flex-start;
  min-width: min(100%, 440px);
}
.marketplace-site-detail-row .marketplace-site-actions {
  margin-top: 0;
}
.marketplace-site-detail-mark {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 96px;
  height: 96px;
}
.marketplace-site-detail-title {
  margin: 0;
}
.marketplace-site-detail-title .marketplace-site-name {
  display: inline;
}
.marketplace-site-detail-title .marketplace-site-verified {
  display: inline;
  margin-left: 0.25em;
  vertical-align: -0.08em;
}
.marketplace-site-detail-by {
  margin: 6px 0 0;
  color: var(--openbot-text-secondary);
  font-size: 15px;
}
.marketplace-site-detail-head .marketplace-site-trust {
  margin-top: 8px;
}
.marketplace-site-detail-description {
  max-width: 46em;
  margin: clamp(20px, 2.4vw, 28px) 0 0;
  color: var(--openbot-text-readable);
  font-size: 17px;
  line-height: 1.6;
}
.marketplace-site-detail-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  padding-top: clamp(32px, 4vw, 44px);
}
.marketplace-site-detail-main:empty {
  display: none;
}
.marketplace-site-detail-rows {
  grid-template-columns: minmax(0, 1fr);
}
.marketplace-site-detail-rows .marketplace-site-row-line {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
}
.marketplace-site-routine-mark {
  display: grid;
  place-items: center;
  width: 88%;
  height: 88%;
  border-radius: 22%;
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-secondary);
}
.marketplace-site-routine-mark > svg {
  width: 45%;
  height: 45%;
}
.marketplace-site-facts .plugin-fact {
  grid-template-columns: 96px minmax(0, 1fr);
}
@media (hover: hover) and (pointer: fine) {
  .marketplace-site-view-all:hover, .marketplace-site-crumb:hover, .marketplace-site-switch-option:not([aria-current="page"]):hover {
    color: var(--openbot-text-primary);
  }
  a.marketplace-site-row:hover, .marketplace-site-feature:hover {
    background: var(--openbot-bg-surface);
  }
  .marketplace-site-feature:hover, a.marketplace-site-row:hover .marketplace-site-row-add {
    background: var(--openbot-bg-surface-raised);
  }
}
@media (max-width: 900px) {
  .marketplace-site-detail-body {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 640px) {
  .marketplace-site-switch {
    flex: 1 1 100%;
  }
  .marketplace-site-categories {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: -20px;
    padding-inline: 20px;
    scrollbar-width: none;
  }
  .marketplace-site-categories > * {
    flex: 0 0 auto;
  }
  .marketplace-site-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .marketplace-site-feature-mark {
    width: 72px;
    height: 72px;
  }
  .marketplace-site-rows {
    grid-template-columns: minmax(0, 1fr);
  }
  .marketplace-site-detail-mark {
    width: 72px;
    height: 72px;
  }
  .marketplace-site-detail-title {
    font-size: 26px;
  }
  .marketplace-site-actions, .marketplace-site-actions .plugin-actions-row, .marketplace-site-missing-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .marketplace-site-detail-row .marketplace-site-actions {
    flex: 1 1 100%;
  }
}
@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//home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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//home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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//home/ubuntu/openbot/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;
    --spacing: 0.25rem;
    --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;
  }
  .relative {
    position: relative;
  }
  .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;
  }
  .h-1 {
    height: var(--spacing);
  }
  .h-2 {
    height: calc(var(--spacing) * 2);
  }
  .h-3 {
    height: calc(var(--spacing) * 3);
  }
  .h-4 {
    height: calc(var(--spacing) * 4);
  }
  .h-5 {
    height: calc(var(--spacing) * 5);
  }
  .h-6 {
    height: calc(var(--spacing) * 6);
  }
  .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//home/ubuntu/openbot/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, dark palette. The desktop app and the web client
 * layer tokens-light.css on top of this file for their light appearance; mobile
 * layers tokens-native.css. Both change values only; neither declares a new token.
 */

:root {
  --openbot-provider-current: currentcolor;
  /* Main screen canvas and drawer, used by the native app. The desktop also uses the sidebar, the
     sheet (its menus) and the grouped tokens, so tokens-light.css sets them too. */
  --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;
  /* The window frame around the page card, darker than the card, so the card comes forward. */
  --openbot-bg-frame: #0d0d0d;
  /* A rail inside a menu, a step darker than the menu sheet. */
  --openbot-bg-sheet-inset: #101010;
  --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);

  /* Translucent glass surfaces: the landing page, and the browser dock and previews of the desktop. */
  --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);
  /* The wash front of the theme change, as a band that goes up the agent dock's edge strip while an
     agent asks something. It is the same light in both themes. */
  --openbot-wash-front: linear-gradient(
    to top,
    rgba(111, 255, 196, 0),
    #6fffc4 20%,
    #6db8ff 38%,
    #bb66ff 56%,
    #ff66c0 74%,
    #ffb875 88%,
    rgba(255, 184, 117, 0)
  );
  /* The color picker draws real colors, so these stay the same in both themes: the rim and the
     ends of the saturation area, and the hue spectrum. */
  --openbot-color-picker-light: #ffffff;
  --openbot-color-picker-dark: #000000;
  --openbot-color-picker-spectrum: linear-gradient(
    to right,
    #ff0000,
    #ffff00,
    #00ff00,
    #00ffff,
    #0000ff,
    #ff00ff,
    #ff0000
  );
  --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);
  /* Focus is neutral: a grey border or a thin grey ring, never blue and never a halo. */
  --openbot-border-focus: var(--openbot-text-muted);
  --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;
  /* Ink on paper that is always light, in both themes: a QR code, the onboarding drawing of a
     computer, the profile image that is shared. The on-light tokens above turn dark in the light
     theme, because there they are the inverted element; these never change. */
  --openbot-paper: #f0f0f0;
  --openbot-paper-text: #141414;
  --openbot-paper-text-muted: rgba(20, 20, 20, 0.52);
  --openbot-paper-text-dim: rgba(20, 20, 20, 0.36);
  --openbot-paper-border: rgba(20, 20, 20, 0.14);
  --openbot-onboarding-desktop-mist: #dbe9ff;
  --openbot-onboarding-desktop-blue: #7eb4f2;
  --openbot-onboarding-desktop-indigo: #6f7de8;
  --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);
  /* The felt sidebar badges. The fills are the colours of the felt art at its edge (light at the
     top, dark at the bottom), under `assets/plush/felt-pill-lilac.webp` darkened to plum,
     `felt-pill-amber.webp` and `felt-x-ball.webp`. They are art colours, so both themes use them.
     The digits and the wait icons are cream yarn. */
  --openbot-felt-plum-top: rgb(112 80 131);
  --openbot-felt-plum-bottom: rgb(74 40 92);
  --openbot-felt-raspberry-top: rgb(245 32 112);
  --openbot-felt-raspberry-bottom: rgb(180 6 65);
  --openbot-felt-amber-top: rgb(255 149 17);
  --openbot-felt-amber-bottom: rgb(203 104 12);
  --openbot-felt-cream: #f6efe2;
  --openbot-felt-cream-stroke: #efe4d2;
  --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 star of a GitHub star request: a full yellow fill and a darker edge, so the star reads on
     a white button as well as on a dark surface. Both themes use the same pair. */
  --openbot-star: #facc15;
  --openbot-star-edge: #ca8a04;
  /* 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-menu: rgba(0, 0, 0, 0.45);
  --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);
  /* The default fonts. The desktop puts a font that the user chooses in Settings before them, in
   * --openbot-font-sans and --openbot-font-mono, so a letter that the chosen font does not have still
   * shows. Noto Sans Arabic draws Arabic on Linux, where the system fallback is often DejaVu Sans. */
  --openbot-font-sans-default:
    "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Arabic", sans-serif;
  --openbot-font-mono-default: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
  --openbot-font-sans: var(--openbot-font-sans-default);
  --openbot-font-mono: var(--openbot-font-mono-default);
  /* 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, 3.5cqi, 2.75rem);
  --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. 2 user units paint 1.33 px at 16px, which is the
   * weight of the Linear sidebar icons (1.5 on a 16-unit grid at 14px). The line stays the
   * same on hover and selection; only the color changes.
   *
   * The line scales with the icon, so an icon of 18px or more uses --openbot-icon-stroke-lg:
   * 1.5 paints 1.13 px at 18px, 1.25 px at 20px and 1.5 px at 24px. With 2, a 20px icon
   * paints 1.67 px and looks heavier than the 16px icons beside it. Icons smaller than 12px
   * occur only on a zoomed canvas, where the line shrinks with the drawing.
   *
   * 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: 2;
  --openbot-icon-stroke-lg: 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;
  /*
   * A new turn shows the working agent after this wait. The local host starts a turn at once, so a
   * shorter wait shows the agent while the sent message still moves in. Grok Bot shows it after 670–900ms.
   */
  --openbot-agent-activity-show-delay: 750ms;
  --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 1px var(--openbot-border-focus);
  --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="kimi"] {
  --openbot-provider-current: var(--openbot-text-primary);
}

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

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

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

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


/* /@fs//home/ubuntu/openbot/packages/brand/src/tokens-light.css */
/*
 * The light palette of the desktop app and the web client. tokens.css declares every
 * token, dark; this file changes only the colors that must change, when the root element
 * has data-openbot-color-scheme="light". Each desktop window and the web client set that
 * attribute from the saved choice, and resolve System from prefers-color-scheme. The public
 * site never sets it, so it stays dark.
 *
 * The rules of the dark palette stay true here, turned over: a raised surface is lighter
 * than the canvas, and a hover or a border is a translucent ink. In the dark palette that
 * ink is white; here it is the primary text color, #141414.
 *
 * Not here, on purpose:
 * - The native-only tokens (bg-native-canvas, chrome-*): mobile has its own light theme in
 *   tokens-native.css. The desktop uses the native sidebar, sheet and grouped tokens, so they are here.
 * - The landing-page materials (price-*, hero-grid, download-card-*): the public site is dark only.
 * - The paper-* tokens: they stay on paper that is always light, such as a QR code.
 * - Illustration and brand colors (logo-*, onboarding-*, sound-*, provider logos): a drawing
 *   keeps its colors in both themes.
 * - The Dynamic Island: it imitates the camera housing, so its window never sets the attribute.
 */

:root[data-openbot-color-scheme="light"] {
  color-scheme: light;

  --openbot-bg-canvas: #f5f5f6;
  --openbot-bg-canvas-clear: rgba(245, 245, 246, 0);
  --openbot-bg-frame: #e8e8eb;
  --openbot-bg-sidebar: #f5f5f6;
  --openbot-bg-native-sidebar: #f5f5f6;
  --openbot-bg-sheet: #ffffff;
  --openbot-bg-sheet-inset: #f0f0f2;
  --openbot-bg-grouped: #ffffff;
  --openbot-text-grouped-secondary: #6b6b70;
  --openbot-border-grouped: #e3e3e6;
  --openbot-marketplace-detail-bg: #ececee;
  --openbot-bg-surface: #ffffff;
  --openbot-bg-surface-raised: #fcfcfc;
  --openbot-bg-control: #ffffff;
  --openbot-bg-control-hover: #f0f0f2;
  --openbot-bg-control-active: #e8e8eb;
  --openbot-tabs-bar-bg: #ececee;
  --openbot-tabs-pill-bg: #ffffff;
  --openbot-bg-overlay: rgba(245, 245, 246, 0.92);
  --openbot-dialog-overlay: rgba(20, 20, 20, 0.12);
  --openbot-dialog-ring: rgba(20, 20, 20, 0.1);
  --openbot-bg-glass: rgba(255, 255, 255, 0.76);
  --openbot-glass-surface: rgba(20, 20, 20, 0.04);
  --openbot-glass-surface-hover: rgba(20, 20, 20, 0.07);
  --openbot-glass-border: rgba(20, 20, 20, 0.12);
  --openbot-glass-highlight: rgba(255, 255, 255, 0.6);
  --openbot-glass-shadow: transparent;
  --openbot-scroll-edge-overlay: rgba(245, 245, 246, 0.72);

  --openbot-border: rgba(20, 20, 20, 0.07);
  --openbot-border-strong: rgba(20, 20, 20, 0.1);
  --openbot-image-outline: rgba(20, 20, 20, 0.1);
  --openbot-hover: rgba(20, 20, 20, 0.05);

  /* Contrast on the canvas: primary 17:1, secondary 10:1, muted 4.9:1. Dim is for
     marks and disabled text, as in the dark palette. */
  --openbot-text-primary: #141414;
  --openbot-text-secondary: #3a3a3c;
  --openbot-text-muted: #6b6b70;
  --openbot-text-dim: #8e8e93;
  --openbot-text-placeholder: #5c5c61;
  --openbot-text-readable: rgba(20, 20, 20, 0.6);
  --openbot-settings-text-muted: rgba(20, 20, 20, 0.6);

  /* The on-light family is the high-contrast inverted element: the default button, a checked
     switch, the user's bubble, the light tooltip. On a light canvas it turns dark. */
  --openbot-surface-light: #1c1c1e;
  --openbot-text-on-light: #ffffff;
  --openbot-text-muted-on-light: rgba(255, 255, 255, 0.64);
  --openbot-text-dim-on-light: rgba(255, 255, 255, 0.4);
  --openbot-border-on-light: rgba(255, 255, 255, 0.16);

  /* The same hue 210 as the dark accent. The fill keeps its value, so a button looks the same
     in both themes; text and hover go darker for contrast (accent-text 5.3:1 on the canvas). */
  --openbot-accent-hover: #006ad4;
  --openbot-accent-text: #0064c8;
  --openbot-accent-soft: rgba(0, 124, 247, 0.12);
  --openbot-accent-strong: rgba(0, 124, 247, 0.26);

  /* Chart series: darker steps of the dark-palette hues, so each series reads on white.
     Not yet checked with the dataviz palette validator in light mode. */
  --openbot-chart-series-codex: #8e4fc0;
  --openbot-chart-series-grok: #16849b;
  --openbot-chart-storage-workspaces: #2f74c9;
  --openbot-chart-storage-files: #c64d1d;
  --openbot-chart-storage-chats: #148a61;
  --openbot-chart-storage-downloads: #6f62d6;
  --openbot-chart-storage-runtimes: #a86f00;

  /* Status fills keep their hue. Status text is darker, for AA on white. */
  --openbot-success: #1fa85a;
  --openbot-success-text: #187a41;
  --openbot-success-soft: rgba(31, 168, 90, 0.12);
  --openbot-success-wash: rgba(31, 168, 90, 0.06);
  --openbot-warning: #f08a00;
  --openbot-warning-text: #9c5200;
  --openbot-warning-soft: rgba(240, 138, 0, 0.14);
  --openbot-approval-badge-soft: rgba(240, 138, 0, 0.18);
  --openbot-danger: #e8222d;
  --openbot-danger-hover: #f04a53;
  --openbot-danger-text: #c0141d;
  --openbot-danger-soft: rgba(232, 34, 45, 0.12);
  --openbot-danger-soft-hover: rgba(232, 34, 45, 0.2);
  --openbot-danger-focus: rgba(232, 34, 45, 0.36);
  --openbot-danger-border: rgba(232, 34, 45, 0.45);

  --openbot-question-option: #16849b;
  --openbot-question-option-soft: rgba(22, 132, 155, 0.12);
  --openbot-question-option-hover: rgba(22, 132, 155, 0.18);
  --openbot-question-option-pressed: rgba(22, 132, 155, 0.24);
  --openbot-question-badge-text: #0f6a7d;
  --openbot-question-badge-soft: rgba(22, 132, 155, 0.14);
  --openbot-message-badge-text: #0a5fb8;
  --openbot-message-badge-soft: rgba(0, 124, 247, 0.12);
  --openbot-badge-new: #e0004a;
  --openbot-badge-new-soft: rgba(224, 0, 74, 0.12);

  /* File references: the hues of the dark palette, darker so the name reads on white. */
  --openbot-file-blue: #1a66c4;
  --openbot-file-blue-soft: rgba(31, 111, 209, 0.12);
  --openbot-file-yellow: #9c5200;
  --openbot-file-yellow-soft: rgba(240, 138, 0, 0.14);
  --openbot-file-orange: #a8521a;
  --openbot-file-orange-soft: rgba(181, 90, 31, 0.12);
  --openbot-file-teal: #127589;
  --openbot-file-teal-soft: rgba(22, 132, 155, 0.12);
  --openbot-file-green: #187a41;
  --openbot-file-green-soft: rgba(31, 168, 90, 0.12);
  --openbot-file-red: #c0141d;
  --openbot-file-red-soft: rgba(232, 34, 45, 0.12);
  --openbot-file-pink: #a3478f;
  --openbot-file-pink-soft: rgba(163, 71, 143, 0.12);
  --openbot-file-default: #0064c8;
  --openbot-file-default-soft: rgba(0, 124, 247, 0.12);

  --openbot-data-table-border: #e3e3e6;
  --openbot-data-table-header-text: #6b6b70;
  --openbot-data-table-text: #1c1c1e;
  --openbot-data-table-outer-border: rgba(20, 20, 20, 0);
  --openbot-data-table-ring: rgba(20, 20, 20, 0.1);

  /* No drop shadows: on the dark canvas they do not show, but on white they read as a halo.
     A raised surface keeps its 1px ring. */
  --openbot-shadow-popover-ambient: transparent;
  --openbot-shadow-dialog: transparent;
  --openbot-shadow-menu: transparent;
  --openbot-shadow-ring: rgba(20, 20, 20, 0.04);
  --openbot-shadow-overlay: 0 0 0 transparent;
}


/* /@fs//home/ubuntu/openbot/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//home/ubuntu/openbot/packages/ui/src/styles/sr-only.css */
/* Text for screen readers only. It keeps its place in the accessibility tree but takes no space. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* /@fs//home/ubuntu/openbot/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//home/ubuntu/openbot/apps/auth-api/src/components/pricing/PricingPage.css */
/* The /pricing page around the shared order form (`@openbot/ui/features/billing/order-form.css`). Every rule is
   scoped under `.pricing-page`. */

.pricing-page .pricing-hero {
  /* The accent colour as channels. The page sets it from the size of the order. */
  --pricing-accent: 236, 72, 153;
  padding-bottom: clamp(72px, 8vw, 120px);
}

/* The order form takes the colour of the order. */
.pricing-page .order-form {
  --order-accent: rgb(var(--pricing-accent));
}

.pricing-page .pricing-heading {
  max-width: 520px;
}

/* A soft light of the accent colour behind the form, across the full page width. */
.pricing-page .pricing-hero::before {
  position: absolute;
  z-index: -1;
  inset: 0 auto 0 50%;
  width: 100vw;
  background: radial-gradient(36% 26% at 50% 34%, rgba(var(--pricing-accent), 0.14), var(--openbot-transparent) 70%);
  content: "";
  pointer-events: none;
  transform: translateX(-50%);
  transition: background 600ms ease;
}

.pricing-page .pricing-enterprise h2 {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.pricing-page .pricing-cta {
  min-width: 240px;
}

/* Off until the buyer ticks the consent box. The hover colour of the site's primary button stays off too. */
.pricing-page .pricing-cta[data-disabled],
.pricing-page .pricing-cta[data-disabled]:hover {
  background: var(--openbot-surface-light);
  cursor: not-allowed;
  opacity: 0.45;
}

/* The consent checkbox above the buy button. The site does not load the app's primitives, so the checkbox rules
   of `primitives.css` are repeated here. The column is wide enough for the English sentence on one line; a longer
   language wraps to two lines. */
.pricing-page .pricing-consent-action {
  display: flex;
  max-width: 420px;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

.pricing-page .pricing-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.pricing-page .pricing-consent-label {
  color: var(--openbot-text-secondary);
  font-size: 13px;
  line-height: 1.45;
  cursor: pointer;
}

.pricing-page .pricing-consent-label a {
  color: var(--openbot-text-primary);
  text-decoration: underline;
  text-decoration-color: var(--openbot-border-focus);
  text-underline-offset: 2px;
}

.pricing-page .pricing-consent-box {
  position: relative;
  display: inline-flex;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  margin-top: 2px;
}

.pricing-page .pricing-consent-box .ui-checkbox-input {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  opacity: 0;
}

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

.pricing-page .pricing-consent-box .ui-checkbox-input:checked + .ui-checkbox-visual {
  border-color: var(--openbot-surface-light);
  background: var(--openbot-surface-light);
  color: var(--openbot-text-on-light);
}

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

.pricing-page .pricing-consent-box .ui-checkbox-visual svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  stroke-width: 2.5;
}

/*
 * Enterprise: a band of light crosses the strip every 6 s, as on a rare card. The band lights the edge as it passes,
 * and Contact sales catches a glint when the band reaches it. A sheen hairline of the home page price runs along the top.
 */
@keyframes pricing-sweep {
  0% {
    background-position: 120% 0;
  }

  45%,
  100% {
    background-position: -20% 0;
  }
}

/* The band reaches the button at about a third of the cycle on a wide screen. */
@keyframes pricing-glint {
  0%,
  22% {
    background-position: 160% 0;
  }

  38%,
  100% {
    background-position: -60% 0;
  }
}

.pricing-page .pricing-enterprise {
  --pricing-band: linear-gradient(
    105deg,
    var(--openbot-price-sheen-cool-clear) 38%,
    var(--openbot-price-sheen-cool-soft) 46%,
    var(--openbot-price-sheen-light) 50%,
    var(--openbot-price-sheen-warm-soft) 54%,
    var(--openbot-price-sheen-warm-clear) 62%
  );
  position: relative;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
  padding: 22px 24px;
  border: 1px solid var(--openbot-price-rim-under);
  border-radius: 18px;
  background:
    linear-gradient(
      90deg,
      var(--openbot-price-sheen-cool-clear),
      var(--openbot-price-sheen-cool) 35%,
      var(--openbot-price-sheen-light) 50%,
      var(--openbot-price-sheen-warm) 65%,
      var(--openbot-price-sheen-warm-clear)
    )
    top center / 70% 1px no-repeat,
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--openbot-price-rim-under) 35%, var(--openbot-transparent)),
      var(--openbot-transparent) 70%
    );
  box-shadow:
    inset 0 1px 0 var(--openbot-price-rim-under),
    0 28px 90px -44px var(--openbot-price-glow);
  overflow: hidden;
}

/* The personal strip is the first block of the hero, so it has the space under it, not above it. */
.pricing-page .pricing-personal {
  margin-top: 0;
  margin-bottom: clamp(32px, 4vw, 48px);
}

/* The soft band across the face of the strip. */
.pricing-page .pricing-enterprise::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--pricing-band) 0 0 / 250% 100% no-repeat;
  content: "";
  opacity: 0.45;
  pointer-events: none;
  animation: pricing-sweep 6s ease-in-out infinite;
}

/* The same band, cut to the 1px edge at full strength, so the border lights up where the band is. */
.pricing-page .pricing-enterprise::before {
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: var(--pricing-band) 0 0 / 250% 100% no-repeat;
  content: "";
  pointer-events: none;
  mask:
    linear-gradient(var(--openbot-mask-solid) 0 0) content-box exclude,
    linear-gradient(var(--openbot-mask-solid) 0 0);
  animation: pricing-sweep 6s ease-in-out infinite;
}

.pricing-page .pricing-enterprise .landing-button {
  background:
    linear-gradient(
      105deg,
      var(--openbot-price-sheen-cool-clear) 35%,
      color-mix(in srgb, var(--openbot-price-sheen-cool) 50%, var(--openbot-price-sheen-cool-clear)) 47%,
      color-mix(in srgb, var(--openbot-price-sheen-warm) 50%, var(--openbot-price-sheen-warm-clear)) 53%,
      var(--openbot-price-sheen-warm-clear) 65%
    )
    0 0 / 300% 100% no-repeat,
    var(--openbot-surface-light);
  box-shadow: 0 0 30px -10px var(--openbot-price-glow);
  animation: pricing-glint 6s ease-in-out infinite;
}

@media (hover: hover) {
  .pricing-page .pricing-enterprise .landing-button:hover {
    background-color: var(--openbot-text-primary);
  }
}

.pricing-page .pricing-enterprise-body {
  margin: 4px 0 0;
  color: var(--openbot-text-muted);
  font-size: 14px;
  line-height: 1.45;
}

@media (max-width: 760px) {
  .pricing-page .pricing-cta,
  .pricing-page .pricing-consent-action {
    width: 100%;
  }

  .pricing-page .pricing-consent-action {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pricing-page .pricing-hero::before {
    transition: none;
  }

  .pricing-page .pricing-enterprise::before,
  .pricing-page .pricing-enterprise::after,
  .pricing-page .pricing-enterprise .landing-button {
    animation: none;
  }
}


/* /@fs//home/ubuntu/openbot/apps/auth-api/src/components/marketplace/MarketplaceShareCardPrototype.css */
/* The share card prototype. The card is 1200 × 630 and scales with its frame: every length is in
   `--px`, one pixel of the 1200-wide card. The card is the container, so the `cqw` in it resolves
   against the card wherever a child uses it. */

.marketplace-share-card {
  --px: calc(100cqw / 1200);
  position: relative;
  container-type: inline-size;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1200 / 630;
  background: var(--openbot-bg-canvas);
  color: #fff;
  font-family: var(--openbot-font-sans);
}

.marketplace-share-avatar {
  position: absolute;
  display: block;
}

.marketplace-share-brand {
  position: absolute;
  top: calc(48 * var(--px));
  left: calc(56 * var(--px));
  display: flex;
  align-items: center;
  gap: calc(14 * var(--px));
  font-size: calc(32 * var(--px));
  font-weight: 600;
  letter-spacing: -0.02em;
}

.marketplace-share-logo {
  width: calc(48 * var(--px));
  height: calc(48 * var(--px));
}

.marketplace-share-copy {
  position: absolute;
  display: grid;
  gap: calc(14 * var(--px));
}

.marketplace-share-name {
  font-size: calc(92 * var(--px));
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  text-wrap: balance;
}

/* In the line of the name, after its last word, as the agent page shows it. */
.marketplace-share-shield {
  display: inline-block;
  width: 0.62em;
  height: 0.62em;
  margin-left: 0.16em;
  vertical-align: -0.04em;
}

.marketplace-share-role {
  font-size: calc(40 * var(--px));
  font-weight: 500;
  letter-spacing: -0.02em;
}

.marketplace-share-source {
  margin-top: calc(10 * var(--px));
  font-size: calc(30 * var(--px));
  font-weight: 500;
}

/* The avatar on the left, without a plate; the mark heads the text column beside it. */
.marketplace-share-avatar {
  top: 50%;
  left: calc(24 * var(--px));
  width: calc(540 * var(--px));
  height: calc(540 * var(--px));
  transform: translateY(-50%);
}

.marketplace-share-brand {
  top: calc(96 * var(--px));
  left: calc(590 * var(--px));
}

.marketplace-share-copy {
  top: 50%;
  left: calc(590 * var(--px));
  max-width: calc(560 * var(--px));
  transform: translateY(-38%);
}

.marketplace-share-role,
.marketplace-share-source,
.marketplace-share-shield {
  color: var(--openbot-text-secondary);
}

/* The story page. */
.marketplace-share-page {
  min-height: 100vh;
  background: #000;
  padding: 32px;
  color: var(--openbot-text-primary);
}

.marketplace-share-heading {
  margin: 0 0 12px;
  color: var(--openbot-text-dim);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.marketplace-share-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 1376px;
  margin-bottom: 48px;
}

.marketplace-share-cards .marketplace-share-card {
  border-radius: 16px;
}

.marketplace-share-frames {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 40px;
}

.marketplace-share-frames > section {
  display: grid;
  gap: 12px;
}

/* The frames, in each app's own dark colours: the frame is theirs, not OpenBot's. */
.marketplace-share-x,
.marketplace-share-messages,
.marketplace-share-slack {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.marketplace-share-x {
  width: 506px;
}

.marketplace-share-x-media {
  position: relative;
  overflow: hidden;
  border: 1px solid #2f3336;
  border-radius: 16px;
}

.marketplace-share-x-title {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 2;
  max-width: calc(100% - 24px);
  overflow: hidden;
  border-radius: 4px;
  background: rgb(0 0 0 / 77%);
  padding: 0 4px;
  color: #fff;
  font-size: 13px;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketplace-share-x-source {
  margin-top: 4px;
  color: #71767b;
  font-size: 13px;
}

.marketplace-share-messages {
  width: 300px;
  overflow: hidden;
  border-radius: 18px;
  background: #262628;
}

.marketplace-share-messages-text {
  display: grid;
  gap: 2px;
  padding: 9px 12px 11px;
}

.marketplace-share-messages-title {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

.marketplace-share-messages-host {
  color: #98989f;
  font-size: 13px;
}

.marketplace-share-slack {
  display: grid;
  gap: 2px;
  width: 400px;
  border-left: 4px solid #4a4d55;
  border-radius: 2px;
  background: #1a1d21;
  padding: 2px 0 2px 12px;
  font-size: 15px;
  line-height: 1.45;
}

.marketplace-share-slack-site {
  color: #d1d2d3;
  font-weight: 700;
}

.marketplace-share-slack-title {
  color: #1d9bd1;
  font-weight: 700;
}

.marketplace-share-slack-description {
  color: #d1d2d3;
}

.marketplace-share-slack-media {
  overflow: hidden;
  max-width: 360px;
  margin-top: 6px;
  border-radius: 8px;
}


/* /src/components/pricing/PricingPage.css */
/* The /pricing page around the shared order form (`@openbot/ui/features/billing/order-form.css`). Every rule is
   scoped under `.pricing-page`. */

.pricing-page .pricing-hero {
  /* The accent colour as channels. The page sets it from the size of the order. */
  --pricing-accent: 236, 72, 153;
  padding-bottom: clamp(72px, 8vw, 120px);
}

/* The order form takes the colour of the order. */
.pricing-page .order-form {
  --order-accent: rgb(var(--pricing-accent));
}

.pricing-page .pricing-heading {
  max-width: 520px;
}

/* A soft light of the accent colour behind the form, across the full page width. */
.pricing-page .pricing-hero::before {
  position: absolute;
  z-index: -1;
  inset: 0 auto 0 50%;
  width: 100vw;
  background: radial-gradient(36% 26% at 50% 34%, rgba(var(--pricing-accent), 0.14), var(--openbot-transparent) 70%);
  content: "";
  pointer-events: none;
  transform: translateX(-50%);
  transition: background 600ms ease;
}

.pricing-page .pricing-enterprise h2 {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.pricing-page .pricing-cta {
  min-width: 240px;
}

/* Off until the buyer ticks the consent box. The hover colour of the site's primary button stays off too. */
.pricing-page .pricing-cta[data-disabled],
.pricing-page .pricing-cta[data-disabled]:hover {
  background: var(--openbot-surface-light);
  cursor: not-allowed;
  opacity: 0.45;
}

/* The consent checkbox above the buy button. The site does not load the app's primitives, so the checkbox rules
   of `primitives.css` are repeated here. The column is wide enough for the English sentence on one line; a longer
   language wraps to two lines. */
.pricing-page .pricing-consent-action {
  display: flex;
  max-width: 420px;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

.pricing-page .pricing-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.pricing-page .pricing-consent-label {
  color: var(--openbot-text-secondary);
  font-size: 13px;
  line-height: 1.45;
  cursor: pointer;
}

.pricing-page .pricing-consent-label a {
  color: var(--openbot-text-primary);
  text-decoration: underline;
  text-decoration-color: var(--openbot-border-focus);
  text-underline-offset: 2px;
}

.pricing-page .pricing-consent-box {
  position: relative;
  display: inline-flex;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  margin-top: 2px;
}

.pricing-page .pricing-consent-box .ui-checkbox-input {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  opacity: 0;
}

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

.pricing-page .pricing-consent-box .ui-checkbox-input:checked + .ui-checkbox-visual {
  border-color: var(--openbot-surface-light);
  background: var(--openbot-surface-light);
  color: var(--openbot-text-on-light);
}

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

.pricing-page .pricing-consent-box .ui-checkbox-visual svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  stroke-width: 2.5;
}

/*
 * Enterprise: a band of light crosses the strip every 6 s, as on a rare card. The band lights the edge as it passes,
 * and Contact sales catches a glint when the band reaches it. A sheen hairline of the home page price runs along the top.
 */
@keyframes pricing-sweep {
  0% {
    background-position: 120% 0;
  }

  45%,
  100% {
    background-position: -20% 0;
  }
}

/* The band reaches the button at about a third of the cycle on a wide screen. */
@keyframes pricing-glint {
  0%,
  22% {
    background-position: 160% 0;
  }

  38%,
  100% {
    background-position: -60% 0;
  }
}

.pricing-page .pricing-enterprise {
  --pricing-band: linear-gradient(
    105deg,
    var(--openbot-price-sheen-cool-clear) 38%,
    var(--openbot-price-sheen-cool-soft) 46%,
    var(--openbot-price-sheen-light) 50%,
    var(--openbot-price-sheen-warm-soft) 54%,
    var(--openbot-price-sheen-warm-clear) 62%
  );
  position: relative;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
  padding: 22px 24px;
  border: 1px solid var(--openbot-price-rim-under);
  border-radius: 18px;
  background:
    linear-gradient(
      90deg,
      var(--openbot-price-sheen-cool-clear),
      var(--openbot-price-sheen-cool) 35%,
      var(--openbot-price-sheen-light) 50%,
      var(--openbot-price-sheen-warm) 65%,
      var(--openbot-price-sheen-warm-clear)
    )
    top center / 70% 1px no-repeat,
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--openbot-price-rim-under) 35%, var(--openbot-transparent)),
      var(--openbot-transparent) 70%
    );
  box-shadow:
    inset 0 1px 0 var(--openbot-price-rim-under),
    0 28px 90px -44px var(--openbot-price-glow);
  overflow: hidden;
}

/* The personal strip is the first block of the hero, so it has the space under it, not above it. */
.pricing-page .pricing-personal {
  margin-top: 0;
  margin-bottom: clamp(32px, 4vw, 48px);
}

/* The soft band across the face of the strip. */
.pricing-page .pricing-enterprise::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--pricing-band) 0 0 / 250% 100% no-repeat;
  content: "";
  opacity: 0.45;
  pointer-events: none;
  animation: pricing-sweep 6s ease-in-out infinite;
}

/* The same band, cut to the 1px edge at full strength, so the border lights up where the band is. */
.pricing-page .pricing-enterprise::before {
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: var(--pricing-band) 0 0 / 250% 100% no-repeat;
  content: "";
  pointer-events: none;
  mask:
    linear-gradient(var(--openbot-mask-solid) 0 0) content-box exclude,
    linear-gradient(var(--openbot-mask-solid) 0 0);
  animation: pricing-sweep 6s ease-in-out infinite;
}

.pricing-page .pricing-enterprise .landing-button {
  background:
    linear-gradient(
      105deg,
      var(--openbot-price-sheen-cool-clear) 35%,
      color-mix(in srgb, var(--openbot-price-sheen-cool) 50%, var(--openbot-price-sheen-cool-clear)) 47%,
      color-mix(in srgb, var(--openbot-price-sheen-warm) 50%, var(--openbot-price-sheen-warm-clear)) 53%,
      var(--openbot-price-sheen-warm-clear) 65%
    )
    0 0 / 300% 100% no-repeat,
    var(--openbot-surface-light);
  box-shadow: 0 0 30px -10px var(--openbot-price-glow);
  animation: pricing-glint 6s ease-in-out infinite;
}

@media (hover: hover) {
  .pricing-page .pricing-enterprise .landing-button:hover {
    background-color: var(--openbot-text-primary);
  }
}

.pricing-page .pricing-enterprise-body {
  margin: 4px 0 0;
  color: var(--openbot-text-muted);
  font-size: 14px;
  line-height: 1.45;
}

@media (max-width: 760px) {
  .pricing-page .pricing-cta,
  .pricing-page .pricing-consent-action {
    width: 100%;
  }

  .pricing-page .pricing-consent-action {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pricing-page .pricing-hero::before {
    transition: none;
  }

  .pricing-page .pricing-enterprise::before,
  .pricing-page .pricing-enterprise::after,
  .pricing-page .pricing-enterprise .landing-button {
    animation: none;
  }
}


/* /@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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-in: cubic-bezier(0.4, 0, 1, 1);
    --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;
  }
  .relative {
    position: relative;
  }
  .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;
  }
  .h-1 {
    height: var(--spacing);
  }
  .h-2 {
    height: calc(var(--spacing) * 2);
  }
  .h-3 {
    height: calc(var(--spacing) * 3);
  }
  .h-4 {
    height: calc(var(--spacing) * 4);
  }
  .h-5 {
    height: calc(var(--spacing) * 5);
  }
  .h-6 {
    height: calc(var(--spacing) * 6);
  }
  .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;
  }
  .italic {
    font-style: italic;
  }
  .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) !important;
    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,) !important;
  }
  .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 {
    --tw-ease: var(--ease-in);
    transition-timing-function: var(--ease-in);
  }
  .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-frame: #0d0d0d;
  --openbot-bg-sheet-inset: #101010;
  --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-wash-front: linear-gradient(
    to top,
    rgba(111, 255, 196, 0),
    #6fffc4 20%,
    #6db8ff 38%,
    #bb66ff 56%,
    #ff66c0 74%,
    #ffb875 88%,
    rgba(255, 184, 117, 0)
  );
  --openbot-color-picker-light: #ffffff;
  --openbot-color-picker-dark: #000000;
  --openbot-color-picker-spectrum: linear-gradient(
    to right,
    #ff0000,
    #ffff00,
    #00ff00,
    #00ffff,
    #0000ff,
    #ff00ff,
    #ff0000
  );
  --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: var(--openbot-text-muted);
  --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-paper: #f0f0f0;
  --openbot-paper-text: #141414;
  --openbot-paper-text-muted: rgba(20, 20, 20, 0.52);
  --openbot-paper-text-dim: rgba(20, 20, 20, 0.36);
  --openbot-paper-border: rgba(20, 20, 20, 0.14);
  --openbot-onboarding-desktop-mist: #dbe9ff;
  --openbot-onboarding-desktop-blue: #7eb4f2;
  --openbot-onboarding-desktop-indigo: #6f7de8;
  --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-felt-plum-top: rgb(112 80 131);
  --openbot-felt-plum-bottom: rgb(74 40 92);
  --openbot-felt-raspberry-top: rgb(245 32 112);
  --openbot-felt-raspberry-bottom: rgb(180 6 65);
  --openbot-felt-amber-top: rgb(255 149 17);
  --openbot-felt-amber-bottom: rgb(203 104 12);
  --openbot-felt-cream: #f6efe2;
  --openbot-felt-cream-stroke: #efe4d2;
  --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-star: #facc15;
  --openbot-star-edge: #ca8a04;
  --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-menu: rgba(0, 0, 0, 0.45);
  --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-default: "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Arabic", sans-serif;
  --openbot-font-mono-default: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
  --openbot-font-sans: var(--openbot-font-sans-default);
  --openbot-font-mono: var(--openbot-font-mono-default);
  --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, 3.5cqi, 2.75rem);
  --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: 2;
  --openbot-icon-stroke-lg: 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-show-delay: 750ms;
  --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 1px var(--openbot-border-focus);
  --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="kimi"] {
  --openbot-provider-current: var(--openbot-text-primary);
}
[data-provider="devin"] {
  --openbot-provider-current: var(--openbot-text-primary);
}
[data-provider="copilot"] {
  --openbot-provider-current: var(--openbot-text-primary);
}
[data-provider="mistral"] {
  --openbot-provider-current: var(--openbot-text-primary);
}
[data-provider="acp"] {
  --openbot-provider-current: var(--openbot-text-primary);
}
:root[data-openbot-color-scheme="light"] {
  color-scheme: light;
  --openbot-bg-canvas: #f5f5f6;
  --openbot-bg-canvas-clear: rgba(245, 245, 246, 0);
  --openbot-bg-frame: #e8e8eb;
  --openbot-bg-sidebar: #f5f5f6;
  --openbot-bg-native-sidebar: #f5f5f6;
  --openbot-bg-sheet: #ffffff;
  --openbot-bg-sheet-inset: #f0f0f2;
  --openbot-bg-grouped: #ffffff;
  --openbot-text-grouped-secondary: #6b6b70;
  --openbot-border-grouped: #e3e3e6;
  --openbot-marketplace-detail-bg: #ececee;
  --openbot-bg-surface: #ffffff;
  --openbot-bg-surface-raised: #fcfcfc;
  --openbot-bg-control: #ffffff;
  --openbot-bg-control-hover: #f0f0f2;
  --openbot-bg-control-active: #e8e8eb;
  --openbot-tabs-bar-bg: #ececee;
  --openbot-tabs-pill-bg: #ffffff;
  --openbot-bg-overlay: rgba(245, 245, 246, 0.92);
  --openbot-dialog-overlay: rgba(20, 20, 20, 0.12);
  --openbot-dialog-ring: rgba(20, 20, 20, 0.1);
  --openbot-bg-glass: rgba(255, 255, 255, 0.76);
  --openbot-glass-surface: rgba(20, 20, 20, 0.04);
  --openbot-glass-surface-hover: rgba(20, 20, 20, 0.07);
  --openbot-glass-border: rgba(20, 20, 20, 0.12);
  --openbot-glass-highlight: rgba(255, 255, 255, 0.6);
  --openbot-glass-shadow: transparent;
  --openbot-scroll-edge-overlay: rgba(245, 245, 246, 0.72);
  --openbot-border: rgba(20, 20, 20, 0.07);
  --openbot-border-strong: rgba(20, 20, 20, 0.1);
  --openbot-image-outline: rgba(20, 20, 20, 0.1);
  --openbot-hover: rgba(20, 20, 20, 0.05);
  --openbot-text-primary: #141414;
  --openbot-text-secondary: #3a3a3c;
  --openbot-text-muted: #6b6b70;
  --openbot-text-dim: #8e8e93;
  --openbot-text-placeholder: #5c5c61;
  --openbot-text-readable: rgba(20, 20, 20, 0.6);
  --openbot-settings-text-muted: rgba(20, 20, 20, 0.6);
  --openbot-surface-light: #1c1c1e;
  --openbot-text-on-light: #ffffff;
  --openbot-text-muted-on-light: rgba(255, 255, 255, 0.64);
  --openbot-text-dim-on-light: rgba(255, 255, 255, 0.4);
  --openbot-border-on-light: rgba(255, 255, 255, 0.16);
  --openbot-accent-hover: #006ad4;
  --openbot-accent-text: #0064c8;
  --openbot-accent-soft: rgba(0, 124, 247, 0.12);
  --openbot-accent-strong: rgba(0, 124, 247, 0.26);
  --openbot-chart-series-codex: #8e4fc0;
  --openbot-chart-series-grok: #16849b;
  --openbot-chart-storage-workspaces: #2f74c9;
  --openbot-chart-storage-files: #c64d1d;
  --openbot-chart-storage-chats: #148a61;
  --openbot-chart-storage-downloads: #6f62d6;
  --openbot-chart-storage-runtimes: #a86f00;
  --openbot-success: #1fa85a;
  --openbot-success-text: #187a41;
  --openbot-success-soft: rgba(31, 168, 90, 0.12);
  --openbot-success-wash: rgba(31, 168, 90, 0.06);
  --openbot-warning: #f08a00;
  --openbot-warning-text: #9c5200;
  --openbot-warning-soft: rgba(240, 138, 0, 0.14);
  --openbot-approval-badge-soft: rgba(240, 138, 0, 0.18);
  --openbot-danger: #e8222d;
  --openbot-danger-hover: #f04a53;
  --openbot-danger-text: #c0141d;
  --openbot-danger-soft: rgba(232, 34, 45, 0.12);
  --openbot-danger-soft-hover: rgba(232, 34, 45, 0.2);
  --openbot-danger-focus: rgba(232, 34, 45, 0.36);
  --openbot-danger-border: rgba(232, 34, 45, 0.45);
  --openbot-question-option: #16849b;
  --openbot-question-option-soft: rgba(22, 132, 155, 0.12);
  --openbot-question-option-hover: rgba(22, 132, 155, 0.18);
  --openbot-question-option-pressed: rgba(22, 132, 155, 0.24);
  --openbot-question-badge-text: #0f6a7d;
  --openbot-question-badge-soft: rgba(22, 132, 155, 0.14);
  --openbot-message-badge-text: #0a5fb8;
  --openbot-message-badge-soft: rgba(0, 124, 247, 0.12);
  --openbot-badge-new: #e0004a;
  --openbot-badge-new-soft: rgba(224, 0, 74, 0.12);
  --openbot-file-blue: #1a66c4;
  --openbot-file-blue-soft: rgba(31, 111, 209, 0.12);
  --openbot-file-yellow: #9c5200;
  --openbot-file-yellow-soft: rgba(240, 138, 0, 0.14);
  --openbot-file-orange: #a8521a;
  --openbot-file-orange-soft: rgba(181, 90, 31, 0.12);
  --openbot-file-teal: #127589;
  --openbot-file-teal-soft: rgba(22, 132, 155, 0.12);
  --openbot-file-green: #187a41;
  --openbot-file-green-soft: rgba(31, 168, 90, 0.12);
  --openbot-file-red: #c0141d;
  --openbot-file-red-soft: rgba(232, 34, 45, 0.12);
  --openbot-file-pink: #a3478f;
  --openbot-file-pink-soft: rgba(163, 71, 143, 0.12);
  --openbot-file-default: #0064c8;
  --openbot-file-default-soft: rgba(0, 124, 247, 0.12);
  --openbot-data-table-border: #e3e3e6;
  --openbot-data-table-header-text: #6b6b70;
  --openbot-data-table-text: #1c1c1e;
  --openbot-data-table-outer-border: rgba(20, 20, 20, 0);
  --openbot-data-table-ring: rgba(20, 20, 20, 0.1);
  --openbot-shadow-popover-ambient: transparent;
  --openbot-shadow-dialog: transparent;
  --openbot-shadow-menu: transparent;
  --openbot-shadow-ring: rgba(20, 20, 20, 0.04);
  --openbot-shadow-overlay: 0 0 0 transparent;
}
.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"]:where([data-blink]) .app-logo-eye {
  animation: app-logo-blink 192ms cubic-bezier(0.77, 0, 0.175, 1);
}
.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%, 100% {
    transform: scaleY(1);
  }
  50% {
    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 > svg[width="24"]) {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
:where(.ui-button-size-xs > svg[width="24"], .ui-button-size-sm > svg[width="24"]) {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
: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)[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;
  inset-inline-end: -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-inline-start: var(--openbot-space-1-5);
}
:where(.z-badge):has(> [data-icon="inline-end"]) {
  padding-inline-end: 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(svg.lucide) {
  stroke-width: var(--openbot-icon-stroke);
}
: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%;
}
.ui-textarea-resizable {
  position: relative;
  display: grid;
}
.ui-textarea-resizer {
  --ui-textarea-grip: var(--openbot-text-dim);
  position: absolute;
  inset-inline-end: 1px;
  bottom: 1px;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 0;
  border-end-end-radius: var(--openbot-radius-md);
  padding: 0;
  background-image: linear-gradient( 135deg, transparent 48%, var(--ui-textarea-grip) 48% 56%, transparent 56% 68%, var(--ui-textarea-grip) 68% 76%, transparent 76% );
  background-repeat: no-repeat;
  background-position: right 3px bottom 3px;
  background-size: 12px 12px;
  cursor: ns-resize;
  touch-action: none;
  user-select: none;
}
.ui-textarea-resizer:hover, .ui-textarea-resizer:focus-visible, .ui-textarea-resizer[data-active] {
  --ui-textarea-grip: var(--openbot-text-primary);
}
.ui-textarea-resizer:focus-visible {
  outline: 0;
}
.ui-textarea-resizer:dir(rtl) {
  scale: -1 1;
}
html.ui-textarea-resizing {
  cursor: ns-resize;
  user-select: none;
}
: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);
}
: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-block: var(--openbot-space-2);
  padding-inline: 10px var(--openbot-space-2);
  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: start;
  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-focus);
  outline: 0;
}
.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-search-select-content {
  display: flex;
  flex-direction: column;
  width: max(var(--kb-popper-anchor-width, 0px), 240px);
  overflow: hidden;
  transform-origin: var(--kb-popover-content-transform-origin);
}
.ui-search-select-search {
  position: relative;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--openbot-border);
  padding: var(--openbot-space-1);
}
.ui-search-select-search > svg {
  position: absolute;
  top: 50%;
  inset-inline-start: var(--openbot-space-3);
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
  transform: translateY(-50%);
  pointer-events: none;
}
.ui-search-select-input {
  width: 100%;
  padding-inline-start: var(--openbot-space-8);
}
.ui-search-select-root {
  min-height: 0;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}
.ui-search-select-content .ui-select-listbox {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
}
.ui-search-select-empty {
  margin: 0;
  padding: var(--openbot-space-2) var(--openbot-space-3);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.ui-select-footer {
  border-top: 1px solid var(--openbot-border);
  padding: var(--openbot-space-1);
}
.ui-select-section {
  padding: var(--openbot-space-2) 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);
  list-style: none;
}
.ui-select-item {
  position: relative;
  display: flex;
  align-items: center;
  cursor: default;
  user-select: none;
  border-radius: var(--openbot-radius-sm);
  outline: 0;
  padding-block: var(--openbot-space-1-5);
  padding-inline: var(--openbot-space-2) var(--openbot-space-8);
  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;
  inset-inline-end: 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-inline-start: 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-field-limit {
  display: grid;
  gap: var(--openbot-space-0-5);
}
.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);
}
:where(.ui-item-media) > svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  stroke-width: var(--openbot-icon-stroke-lg);
}
.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-paper-text);
  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-progress-fill[data-indeterminate]:dir(rtl) {
  animation-name: ui-progress-travel-rtl;
}
@keyframes ui-progress-travel-rtl {
  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] {
  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-card);
}
.ui-toaster [data-sonner-toast][data-styled="true"] {
  --ui-toast-tone: transparent;
  --ui-toast-motion-duration: var(--openbot-duration-toast-enter);
  --toast-svg-margin-start: 0px;
  --toast-svg-margin-end: 0px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) max-content max-content;
  align-items: start;
  column-gap: 0;
  row-gap: var(--openbot-space-3);
  min-height: var(--openbot-control-xl);
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border-color: transparent;
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-surface-raised);
  box-shadow: 0 0 0 1px var(--openbot-border);
  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"]:has([data-button]) {
  padding-bottom: var(--openbot-space-2);
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-content] {
  grid-area: 1 / 2 / 2 / -1;
  gap: var(--openbot-space-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: 3;
  justify-self: end;
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-action] {
  grid-column: 4;
}
.ui-toaster [data-sonner-toast][data-styled="true"]:has([data-cancel]) [data-action] {
  margin-inline-start: var(--openbot-space-1);
}
.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-inline-end: var(--openbot-space-1);
}
.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);
  text-wrap: balance;
}
.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-block: 1px 0;
  margin-inline: 0 var(--openbot-space-3);
}
.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-sm);
  margin: 0;
  border: 1px solid transparent;
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-surface-light);
  box-shadow: none;
  padding-inline: var(--openbot-space-3);
  color: var(--openbot-text-on-light);
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  transition: background-color var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease, transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-button]:last-of-type {
  margin-inline-end: calc(var(--openbot-space-2) - var(--openbot-space-4));
}
.ui-toaster[data-sonner-toaster][data-sonner-theme] [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, .ui-toast-card-close: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], .ui-toast-card-close {
  position: absolute;
  top: calc(-1 * var(--openbot-space-1-5));
  inset-inline-end: calc(-1 * var(--openbot-space-1-5));
  inset-inline-start: auto;
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  border: 0;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface-raised);
  box-shadow: 0 0 0 1px var(--openbot-border-strong);
  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, .ui-toast-card-close::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], .ui-toast-card-close {
    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, [data-sonner-toast]:hover .ui-toast-card-close, [data-sonner-toast]:focus-within .ui-toast-card-close {
    pointer-events: auto;
    opacity: 1;
  }
  .ui-toaster [data-sonner-toast][data-styled="true"] [data-action]:hover {
    background: var(--openbot-surface-light);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--openbot-surface-light) 82%, transparent);
    }
  }
  .ui-toaster[data-sonner-toaster][data-sonner-theme] [data-sonner-toast][data-styled="true"] [data-cancel]:hover {
    background: var(--openbot-bg-control-hover);
    color: var(--openbot-text-primary);
  }
  .ui-toaster [data-sonner-toast][data-styled="true"] [data-close-button]:hover:not(:focus-visible), .ui-toast-card-close:hover:not(:focus-visible) {
    background: var(--openbot-bg-control-active);
    color: var(--openbot-text-primary);
  }
}
@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, .ui-toast-card-close:active {
  transform: scale(0.96);
}
.ui-toast-card-close > svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.ui-toast-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--openbot-space-1);
  margin-inline-end: calc(var(--openbot-space-2) - var(--openbot-space-4));
}
.ui-toast-card-actions .ui-button {
  height: var(--openbot-control-sm);
  border-radius: var(--openbot-radius-sm);
  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, transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.ui-toast-card-actions .ui-button-variant-ghost {
  color: var(--openbot-text-secondary);
}
.ui-toast-card-actions .ui-button:active {
  transform: scale(0.96);
}
@media (hover: hover) and (pointer: fine) {
  .ui-toast-card-actions .ui-button-variant-ghost:hover {
    background: var(--openbot-bg-control-hover);
    color: var(--openbot-text-primary);
  }
}
.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-plush-loader {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: flex-end;
  gap: calc(var(--ui-plush-size) * 0.18);
}
.ui-plush-loader[data-layout="stack"] {
  flex-direction: column;
  align-items: center;
  gap: calc(var(--ui-plush-size) * 0.3);
}
.ui-plush-mascot {
  --ui-plush-look: calc(var(--ui-plush-size) * 0.035);
  position: relative;
  display: block;
  width: var(--ui-plush-size);
  flex: 0 0 auto;
}
.ui-plush-body {
  position: relative;
  display: block;
  transform-origin: 50% 100%;
}
.ui-plush-body-image, .ui-plush-ball {
  display: block;
  width: 100%;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}
.ui-plush-eyes, .ui-plush-eye {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}
.ui-plush-eye {
  transform-origin: 35.6% 48.1%;
  transition: scale var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.ui-plush-eye[data-side="right"] {
  transform-origin: 64.4% 48.1%;
}
.ui-plush-mascot[data-face="wide"] .ui-plush-eye {
  scale: 1.18;
}
.ui-plush-balls {
  display: flex;
  gap: calc(var(--ui-plush-size) * 0.08);
  padding-bottom: calc(var(--ui-plush-size) * 0.04);
}
.ui-plush-ball {
  width: calc(var(--ui-plush-size) * 0.24);
  transform-origin: 50% 100%;
}
.ui-plush-loader[data-layout="stack"] .ui-plush-balls {
  padding-bottom: 0;
}
.ui-plush-loader[data-layout="stack"] .ui-plush-ball {
  width: calc(var(--ui-plush-size) * 0.2);
}
@media (prefers-reduced-motion: no-preference) {
  .ui-plush-body {
    animation: ui-plush-breathe 3.2s ease-in-out 600ms infinite;
  }
  .ui-plush-eye {
    animation: ui-plush-blink 5.2s ease-in-out 1.8s infinite;
  }
  .ui-plush-eyes {
    animation: ui-plush-look 6s ease-in-out 2.2s infinite;
  }
  .ui-plush-mascot[data-face="wink"] .ui-plush-eye[data-side="left"] {
    animation: ui-plush-wink 600ms var(--openbot-ease-out);
  }
  .ui-plush-mascot[data-face="happy"] .ui-plush-eye {
    animation: ui-plush-squint 220ms var(--openbot-ease-out) forwards;
  }
  .ui-plush-loader > .ui-plush-mascot {
    animation: ui-plush-pop-in 520ms var(--openbot-ease-out) both;
  }
  .ui-plush-loader .ui-plush-eyes {
    animation: ui-plush-follow 1.2s ease-in-out 700ms infinite;
  }
  .ui-plush-ball {
    animation: ui-plush-pop-in 360ms var(--openbot-ease-out) 300ms backwards, ui-plush-ball-bounce 1.2s ease-in-out 700ms infinite;
  }
  .ui-plush-ball:nth-child(2) {
    animation-delay: 380ms, 850ms;
  }
  .ui-plush-ball:nth-child(3) {
    animation-delay: 460ms, 1s;
  }
}
@keyframes ui-plush-pop-in {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
}
@keyframes ui-plush-breathe {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.012, 0.978);
  }
}
@keyframes ui-plush-blink {
  0%, 93%, 100% {
    transform: scaleY(1);
  }
  96% {
    transform: scaleY(0.1);
  }
}
@keyframes ui-plush-wink {
  0%, 100% {
    transform: scaleY(1);
  }
  30%, 60% {
    transform: scaleY(0.1);
  }
}
@keyframes ui-plush-squint {
  to {
    transform: translateY(-1.5%) scaleY(0.35);
  }
}
@keyframes ui-plush-look {
  0%, 28%, 86%, 100% {
    transform: translate(0, 0);
  }
  34%, 50% {
    transform: translate(calc(var(--ui-plush-look) * -1), calc(var(--ui-plush-look) * 0.2));
  }
  58%, 78% {
    transform: translate(var(--ui-plush-look), calc(var(--ui-plush-look) * -0.3));
  }
}
@keyframes ui-plush-follow {
  0%, 18% {
    transform: translate(calc(var(--ui-plush-look) * -0.9), calc(var(--ui-plush-look) * 0.6));
  }
  32% {
    transform: translate(0, calc(var(--ui-plush-look) * 0.6));
  }
  46%, 70% {
    transform: translate(calc(var(--ui-plush-look) * 0.9), calc(var(--ui-plush-look) * 0.6));
  }
  100% {
    transform: translate(calc(var(--ui-plush-look) * -0.9), calc(var(--ui-plush-look) * 0.6));
  }
}
@keyframes ui-plush-ball-bounce {
  0%, 60%, 100% {
    transform: translateY(0) scale(1);
  }
  22% {
    transform: translateY(-110%) scale(0.95, 1.06);
  }
  42% {
    transform: translateY(0) scale(1.14, 0.84);
  }
  50% {
    transform: translateY(0) scale(1);
  }
}
.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;
  }
}
:where( svg:is( [class~="lucide-chevron-left"], [class~="lucide-chevron-right"], [class~="lucide-chevrons-left"], [class~="lucide-chevrons-right"], [class~="lucide-arrow-left"], [class~="lucide-arrow-right"], [class~="lucide-arrow-right-to-line"], [class~="lucide-panel-left"], [class~="lucide-panel-right"], [class~="lucide-undo-2"], [class~="lucide-redo-2"], [class~="lucide-log-in"], [class~="lucide-log-out"], [class~="lucide-corner-down-left"], [class~="lucide-message-square-reply"], .ui-rtl-mirror ):dir(rtl):not(.ui-kbd *) ) {
  transform: scaleX(-1);
}
.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;
  direction: ltr;
  unicode-bidi: isolate;
}
.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;
  }
}
:root[data-openbot-software-rendering] *, :root[data-openbot-software-rendering] *::before, :root[data-openbot-software-rendering] *::after {
  backdrop-filter: none !important;
}
.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 {
  --agent-avatar-outline: var(--openbot-bg-sidebar);
  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-lg);
}
.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-block: var(--openbot-space-3);
  padding-inline: var(--openbot-space-8) var(--openbot-space-4);
  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: start;
  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-inline-start-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 {
  inset-inline-start: var(--openbot-space-3);
}
.ui-bubble-reactions-align-end {
  inset-inline-end: 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;
}
.ui-toaster [data-sonner-toast], .ui-toaster [data-sonner-toast]::after {
  -webkit-app-region: no-drag;
}
.otp-input {
  display: grid;
  gap: 10px;
  justify-items: center;
}
.otp-input-fieldset {
  position: relative;
  direction: ltr;
  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;
  direction: ltr;
  unicode-bidi: isolate;
}
.t-digit-run {
  display: inline-flex;
  align-items: baseline;
}
.t-digit-word {
  white-space: pre;
}
.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[data-page-id="1"]:dir(rtl) {
  --t-page-from-x: var(--page-slide-distance);
}
.t-page-slide .t-page[data-page-id="2"]:dir(rtl) {
  --t-page-from-x: calc(var(--page-slide-distance) * -1);
}
.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;
  }
}
.theme-sweep-canvas {
  position: fixed;
  inset: 0;
  inline-size: 100vw;
  block-size: 100vh;
  pointer-events: none;
  view-transition-name: theme-sweep;
}
.theme-sweep-beam {
  position: fixed;
  inset: 0;
  z-index: calc(var(--openbot-layer-tooltip) + 1);
  inline-size: 100vw;
  block-size: 100vh;
  pointer-events: none;
}
.theme-sweep-ripple {
  position: absolute;
  inline-size: 0;
  block-size: 0;
}
html:active-view-transition-type(theme-sweep)::view-transition-group(*), html:active-view-transition-type(theme-sweep)::view-transition-old(*), html:active-view-transition-type(theme-sweep)::view-transition-new(*) {
  animation: none;
}
html:active-view-transition-type(theme-sweep)::view-transition-new(root) {
  mix-blend-mode: normal;
  mask-image: radial-gradient( 100% var(--theme-sweep-radius) at 50% var(--theme-sweep-origin, 100%), var(--openbot-text-primary) var(--theme-sweep-reveal-from), var(--openbot-transparent) var(--theme-sweep-reveal-to) );
}
html:active-view-transition-type(theme-sweep)::view-transition-image-pair(root) {
  filter: url("#theme-sweep-ripple");
}
html:active-view-transition-type(theme-sweep)::view-transition-new(theme-sweep) {
  mix-blend-mode: normal;
}
.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-shadow-menu);
  --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-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: start;
  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-muted);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ui-action-menu:not([data-menu-layout="grid"]) :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]):is( :hover, :focus-visible, [data-highlighted], [aria-expanded="true"] ) > svg {
  color: var(--openbot-text-primary);
}
.ui-action-menu:not([data-menu-layout="grid"]) :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"])[data-disabled] > svg {
  color: var(--openbot-text-muted);
}
.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-inline-start: 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-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%);
  direction: ltr;
}
.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;
}
@font-face {
  font-family: "OpenBot Greeting Emoji";
  src: url("/@fs/home/ubuntu/openbot/packages/ui/src/assets/fonts/noto-greeting-emoji.woff2") format("woff2");
  unicode-range: U+2728, U+1F44B, U+1F44F, U+1F604, U+1F60A, U+1F64C, U+1FAF6;
  font-display: block;
}
:root[data-surface="dynamic-island"], :root[data-surface="dynamic-island"] body, :root[data-surface="dynamic-island"] #root {
  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", "Noto Color Emoji", "OpenBot Greeting 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;
}
.openbot-dynamic-island-transition-root[data-ambient-motion="paused"] .ui-spinner {
  animation-play-state: paused;
}
.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: start;
  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);
}
.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-inline-end: calc(var(--openbot-control-sm) + var(--openbot-space-2));
}
.dynamic-island-surface-row-stop {
  position: absolute;
  top: 50%;
  inset-inline-end: 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-inline-end: calc(var(--openbot-control-md) + var(--openbot-space-1));
  padding-inline-start: 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);
  inset-inline-end: 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-inline-start: 1px solid var(--openbot-warning);
  padding-block: 2px;
  padding-inline: 10px 0;
}
.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: end;
}
.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: start;
  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-block: 0;
  margin-inline: 0 auto;
  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;
  direction: ltr;
  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-inline-end: 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-inline-end: 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);
}
.sidebar-storage[data-level="full"] {
  border-color: var(--openbot-danger-border);
  background: var(--openbot-danger-soft);
}
.sidebar-storage-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-3);
}
.sidebar-storage-row > .sidebar-mobile-app-dismiss {
  align-self: start;
}
.sidebar-storage-ring {
  width: 48px;
}
.sidebar-storage-percent {
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  font-weight: var(--openbot-weight-semibold);
  line-height: 1;
}
.sidebar-storage-text {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-0-5);
}
.sidebar-storage-text > strong {
  font-weight: var(--openbot-weight-semibold);
}
* {
  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;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.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: start;
}
.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-footer {
  display: grid;
  gap: 4px;
}
.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-inline-end: 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);
}
.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: start;
  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-language {
  align-self: center;
  width: auto;
  margin-top: var(--openbot-space-6);
  color: var(--openbot-text-muted);
}
.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: start;
}
@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: start;
  -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-inline-start: 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-inline-end: 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-lg);
}
.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: start;
  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-lg);
}
.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-route-button:hover .setup-route-arrow:dir(rtl) {
  transform: translateX(-2px) scaleX(-1);
}
.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-block: 8px;
  padding-inline: 12px 0;
  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-inline-end: 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-lg);
}
.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-block: 0 8px;
  padding-inline: 66px 0;
  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-block: 0 8px;
  padding-inline: 66px 0;
}
.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-inline-end: 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-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-3) var(--openbot-space-1);
}
.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: start;
  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:is([data-auth-panel="code"], [data-auth-panel="company"]) {
    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;
  }
  .account-login:dir(rtl)[data-transition="forward"] :is(.account-login-title, .account-login-description) {
    animation-name: account-login-copy-back;
  }
  .account-login:dir(rtl)[data-transition="back"] :is(.account-login-title, .account-login-description) {
    animation-name: account-login-copy-forward;
  }
  .account-login:dir(rtl)[data-transition="forward"] .account-login-form[data-auth-panel="code"] {
    animation-name: account-login-panel-back;
  }
  .account-login:dir(rtl)[data-transition="back"] .account-login-form[data-auth-panel="email"] {
    animation-name: account-login-panel-forward;
  }
  @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:not(.ui-input):focus-visible, textarea:not(.ui-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% );
}
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);
}
.account-login-code-action-change > svg[class~="lucide-arrow-left"]:dir(rtl) {
  transform: scaleX(-1);
}
.app-loading {
  --app-loading-at: 0s;
  --app-loading-exit-delay: 300ms;
  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[data-scene="pile"] .app-loading-stage {
  position: absolute;
  inset: 0;
  justify-content: center;
}
.app-loading-pit-frame {
  position: absolute;
  inset: 0;
}
.app-loading-pit {
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
  transform-origin: 50% 100%;
}
.app-loading-plush {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}
.app-loading-squash {
  width: 100%;
  height: 100%;
  will-change: transform;
}
.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;
}
.app-loading:is([data-phase="fade"], [data-phase="exit"]) {
  animation: app-loading-exit var(--openbot-duration-overlay) var(--openbot-ease-in-out) forwards;
}
@media (prefers-reduced-motion: no-preference) {
  .app-loading[data-phase="exit"] {
    animation-duration: 1100ms;
    animation-delay: var(--app-loading-exit-delay);
  }
  .app-loading-stage {
    animation: app-loading-enter var(--openbot-duration-overlay) var(--openbot-ease-out) calc(250ms - var(--app-loading-at)) both;
  }
  .app-loading-line {
    animation: app-loading-line-in 280ms var(--openbot-ease-out);
  }
  .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-line-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
@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-toast-host {
  width: var(--width);
}
.server-connection-toast {
  position: relative;
  display: grid;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-4) var(--openbot-space-4) var(--openbot-space-2);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-surface-raised);
  box-shadow: 0 0 0 1px var(--openbot-border);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.server-connection-toast-title {
  padding-right: var(--openbot-space-1);
  font-weight: var(--openbot-weight-semibold);
  text-wrap: balance;
}
.server-connection-toast-body {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  font-variant-numeric: tabular-nums;
  text-wrap: pretty;
}
.server-connection-toast-actions {
  margin-top: var(--openbot-space-1);
}
.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%;
  inset-inline-start: 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);
  stroke-width: var(--openbot-icon-stroke-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);
  stroke-width: var(--openbot-icon-stroke-lg);
}
.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;
}
.language-wheel-continue svg:dir(rtl) {
  transform: scaleX(-1);
}
.language-wheel-continue:is(:hover, :focus-visible):not(:disabled) svg:dir(rtl) {
  translate: calc(var(--openbot-space-1) * -1) 0;
}
.language-wheel-continue:active:not(:disabled) svg:dir(rtl) {
  translate: calc(var(--openbot-space-2) * -1) 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: start;
}
.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-paper-border);
  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-paper-border);
  stroke-width: 1;
}
.onboarding-computer-window-bar, .onboarding-computer-window-bar-fill {
  fill: var(--openbot-paper-text-muted);
  opacity: 0.24;
}
.onboarding-computer-window-bar {
  stroke: var(--openbot-paper-border);
  stroke-width: 1;
}
.onboarding-computer-window-pane {
  fill: var(--openbot-paper-text-dim);
  opacity: 0.18;
}
.onboarding-computer-window-card {
  fill: var(--openbot-paper-text-dim);
  opacity: 0.24;
}
.onboarding-computer-window-line {
  fill: var(--openbot-paper-text-dim);
  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-paper-text);
  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;
  inset-inline-end: 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 {
  inset-inline-end: auto;
  inset-inline-start: calc(100% + 10px);
  align-items: flex-end;
  text-align: end;
}
.provider-picker-callout-end .provider-picker-callout-arrow {
  align-self: flex-start;
  transform: scaleX(-1);
}
.provider-picker-callout:dir(rtl) .provider-picker-callout-arrow {
  transform: scaleX(-1);
}
.provider-picker-callout-end:dir(rtl) .provider-picker-callout-arrow {
  transform: none;
}
:is(.setup-route-arrow, .first-run-choice-row-chevron):dir(rtl) {
  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) {
  left: 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: start;
  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);
}
.first-run-choice-improve {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  border-top: 1px solid var(--openbot-border-grouped);
  padding: var(--openbot-space-3) var(--openbot-space-4);
  text-align: start;
  cursor: pointer;
}
.first-run-choice-improve-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.first-run-choice-improve-text strong {
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}
.first-run-choice-improve-pop {
  position: absolute;
  top: var(--openbot-space-2);
  inset-inline-end: var(--openbot-space-4);
  display: flex;
  align-items: flex-end;
  gap: var(--openbot-space-1);
  pointer-events: none;
}
.first-run-choice-improve-agent.agent-avatar {
  width: 20px;
  height: 20px;
  animation: first-run-improve-pop 1600ms var(--openbot-ease-out) both;
}
.first-run-choice-improve-agent:nth-child(2) {
  animation-delay: 90ms;
}
.first-run-choice-improve-agent:nth-child(3) {
  animation-delay: 180ms;
}
@keyframes first-run-improve-pop {
  0% {
    opacity: 0;
    translate: 0 14px;
    scale: 0.4;
  }
  20% {
    opacity: 1;
    translate: 0 -6px;
    scale: 1;
  }
  32% {
    translate: 0 0;
  }
  80% {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
  100% {
    opacity: 0;
    translate: 0 14px;
    scale: 0.6;
  }
}
.first-run-consent-notice {
  width: min(100%, 440px);
  margin: var(--openbot-space-4) 0 0;
  color: var(--openbot-text-muted);
  text-align: center;
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.first-run-consent-notice .first-run-consent-link {
  display: inline;
  vertical-align: baseline;
  font: inherit;
  color: var(--openbot-text-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
@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;
  }
  .first-run-choice-improve-pop {
    display: 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);
}
.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-live-avatar .agent-avatar > svg {
  pointer-events: none;
}
.first-agent-avatar-fieldset {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}
.first-agent-color-options {
  display: grid;
  grid-template-columns: repeat(9, 28px);
  justify-content: center;
  gap: var(--openbot-space-1);
}
.first-agent-face-options {
  display: flex;
  align-items: center;
  justify-content: center;
  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-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-color-choice[aria-pressed="true"] .first-agent-color-swatch {
  outline: 1px solid var(--openbot-accent-text);
  outline-offset: 4px;
}
.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;
}
.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: start;
  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-block: 0;
  padding-inline: var(--openbot-space-4) var(--openbot-space-2);
  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: calc(var(--openbot-icon-lg) * -0.14);
  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: 148px;
}
.global-search-empty {
  flex-direction: column;
  padding-block: var(--openbot-space-3);
  animation: global-search-fade-in var(--openbot-duration-normal) var(--openbot-ease-out) both;
}
.global-search-plush {
  --ui-plush-size: 56px;
  display: block;
  transform-origin: 50% 100%;
}
.global-search-plush[data-gaze="follow"] .ui-plush-eyes {
  animation: none;
  translate: calc(var(--global-search-gaze-x) * var(--ui-plush-size) * 0.07) calc(var(--global-search-gaze-y) * var(--ui-plush-size) * 0.05);
  transition: translate var(--openbot-duration-fast) var(--openbot-ease-out);
}
@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-inline-start: 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);
  inset-inline-end: 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%;
  inset-inline-start: -7px;
  width: 3px;
  height: 0;
  border-start-start-radius: 0;
  border-start-end-radius: var(--openbot-radius-xs);
  border-end-end-radius: var(--openbot-radius-xs);
  border-end-start-radius: 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-lg);
}
.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;
  inset-inline-start: 0;
  height: auto;
}
.app-frame > * {
  min-height: 0;
}
.panel-edge {
  border-inline-end: 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-block: 2px 0;
  padding-inline: 10px 3px;
}
@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-inline-end: 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 {
    --agent-avatar-optical-offset: calc(26px * -0.14);
    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 {
    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-inline-end: auto;
  border-radius: var(--openbot-radius-pill);
  padding-block: 0;
  padding-inline: var(--openbot-space-1) var(--openbot-space-2);
  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: start;
  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-inline-start: 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-inline-start: 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-lg);
}
.sidebar-history-button > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: var(--openbot-icon-stroke);
}
.sidebar-history-button:disabled, .sidebar-history-button:disabled:hover {
  background: transparent;
  color: var(--openbot-text-muted);
  cursor: default;
  opacity: 0.4;
}
.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-lg);
}
.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);
}
:is(.sidebar-section-agent-drop-target, .sidebar-pinned-group-agent-drop-target) {
  --agent-avatar-outline-tinted: var(--openbot-accent-soft);
  @supports (color: color-mix(in lab, red, red)) {
    --agent-avatar-outline-tinted: color-mix(
    in srgb,
    var(--openbot-accent-soft) 54%,
    var(--agent-avatar-outline, transparent)
  );
  }
}
:is(.sidebar-section-agent-drop-target, .sidebar-pinned-group-agent-drop-target) > * {
  --agent-avatar-outline: color(from var(--agent-avatar-outline-tinted) srgb r g b / 1);
}
.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-chevron-collapsed:dir(rtl) {
  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-unread-group .sidebar-waiting-group-count {
  background: var(--openbot-bg-control);
  color: var(--openbot-text-readable);
}
.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-block: 0;
  padding-inline: 8px 32px;
  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%;
  inset-inline-end: 9px;
  color: var(--openbot-text-muted);
  pointer-events: none;
  transform: translateY(-50%);
}
.sidebar-section-draft {
  min-height: 36px;
}
.sidebar:not(.sidebar-compact) .sidebar-folder > header {
  position: sticky;
  top: -4px;
  z-index: 2;
  background: var(--openbot-bg-sidebar);
}
.sidebar:not(.sidebar-compact) .sidebar-folder[data-depth="1"] > header {
  top: calc(-4px + 32px);
  z-index: 3;
}
.sidebar:not(.sidebar-compact) .sidebar-folder[data-depth="2"] > header {
  top: calc(-4px + 64px);
  z-index: 4;
}
@property --agent-list-stuck-height {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --agent-list-fade-top {
  syntax: "*";
  inherits: false;
}
@property --agent-list-fade-bottom {
  syntax: "*";
  inherits: false;
}
.sidebar .agent-list:is(.scroll-fade-top, .scroll-fade-bottom) {
  --agent-list-fade-top: linear-gradient(var(--openbot-text-primary), var(--openbot-text-primary));
  --agent-list-fade-bottom: linear-gradient(var(--openbot-text-primary), var(--openbot-text-primary));
  -webkit-mask-image: var(--agent-list-fade-top), var(--agent-list-fade-bottom);
  mask-image: var(--agent-list-fade-top), var(--agent-list-fade-bottom);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.sidebar .agent-list.scroll-fade-top {
  --agent-list-fade-top: linear-gradient(
    to bottom,
    var(--openbot-text-primary) var(--agent-list-stuck-height),
    transparent var(--agent-list-stuck-height),
    var(--openbot-text-primary) calc(var(--agent-list-stuck-height) + var(--agent-list-fade-size, 18px))
  );
}
.sidebar .agent-list.scroll-fade-bottom {
  --agent-list-fade-bottom: linear-gradient(
    to bottom,
    var(--openbot-text-primary) calc(100% - var(--agent-list-fade-size, 18px)),
    transparent 100%
  );
}
.sidebar-folder > header .sidebar-section-toggle {
  padding-inline: calc(var(--openbot-space-2) - 1px);
  color: var(--openbot-text-primary);
}
.sidebar-folder > header .sidebar-section-toggle:hover, .sidebar-folder > header .sidebar-section-toggle:focus-visible {
  background: var(--openbot-bg-control);
  color: var(--openbot-text-primary);
}
.sidebar-folder > header .sidebar-section-name {
  font-weight: 600;
}
.sidebar-folder:not([data-depth="0"]) > header .sidebar-section-name {
  font-weight: 500;
}
.sidebar-folder-parent {
  color: var(--openbot-text-muted);
  font-weight: 500;
}
.sidebar-folder-end {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--openbot-space-2);
}
.sidebar-folder-icon {
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
}
.sidebar-folder > header .sidebar-section-toggle:hover .sidebar-folder-icon {
  color: var(--openbot-text-secondary);
}
.sidebar-folder-unread {
  min-width: 18px;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}
.sidebar-folder > .sidebar-section-collapse {
  grid-template-columns: minmax(0, 1fr);
}
.sidebar-folder > .sidebar-section-collapse > .sidebar-section-body {
  min-width: 0;
  overflow: clip;
}
.sidebar:not(.sidebar-compact) .sidebar-folder > .sidebar-section-collapse > .sidebar-section-body > .sidebar-folder {
  margin-top: var(--openbot-space-1-5);
}
.sidebar-folder.sidebar-section-agent-drop-target header {
  background: linear-gradient(var(--openbot-accent-soft), var(--openbot-accent-soft)), var(--openbot-bg-sidebar);
}
.sidebar-folder.sidebar-section-agent-drop-target:not(.sidebar-section-drop-after)::after {
  position: absolute;
  z-index: 5;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--openbot-accent-strong);
  content: "";
  pointer-events: none;
}
.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 {
  --agent-avatar-outline: var(--openbot-bg-surface-raised);
  background: var(--openbot-bg-surface-raised);
  transition: none;
}
.agent-row.sidebar-person-drag-preview {
  --agent-avatar-outline: var(--openbot-bg-surface-raised);
  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: 112px;
  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 {
  --sidebar-pinned-avatar-size: 56px;
  width: 72px;
  height: 102px;
  min-height: 102px;
  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: var(--sidebar-pinned-avatar-size);
  height: var(--sidebar-pinned-avatar-size);
  flex-basis: var(--sidebar-pinned-avatar-size);
}
.agent-row.sidebar-pinned-row .agent-avatar, .agent-row.sidebar-pinned-row.person-row .person-avatar {
  width: var(--sidebar-pinned-avatar-size);
  height: var(--sidebar-pinned-avatar-size);
}
.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.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;
}
.agent-row {
  --agent-row-avatar-size: 46px;
  display: flex;
  width: 100%;
  height: 62px;
  min-height: 62px;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  padding: 8px;
  color: inherit;
  text-align: start;
  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 {
  --agent-avatar-outline: var(--openbot-bg-surface);
  background: var(--openbot-bg-surface);
}
.agent-row-avatar {
  position: relative;
  display: grid;
  width: var(--agent-row-avatar-size);
  height: var(--agent-row-avatar-size);
  flex: 0 0 var(--agent-row-avatar-size);
  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;
  inset-inline-end: -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);
}
:root[data-openbot-color-scheme="light"] .sidebar {
  --sidebar-row-selected: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --sidebar-row-selected: color-mix(in srgb, var(--openbot-text-primary) 10%, var(--openbot-bg-sidebar));
  }
}
:root[data-openbot-color-scheme="light"] .sidebar .agent-row.agent-row-active:not(.sidebar-first-agent-action) {
  --agent-avatar-outline: var(--sidebar-row-selected);
  background: var(--sidebar-row-selected);
}
:root[data-openbot-color-scheme="light"] .sidebar .agent-row-active .agent-row-agent-status {
  border-color: var(--sidebar-row-selected);
}
.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-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-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-block: 1px;
  padding-inline: 5px 7px;
  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-inline-start: 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);
}
.bloub-avatar-svg > g:nth-of-type(2) > path:first-child {
  stroke: var(--agent-avatar-outline, transparent);
  stroke-width: calc(var(--agent-avatar-outline-width, 1.5px) * 2);
  stroke-linejoin: round;
  paint-order: stroke fill;
  vector-effect: non-scaling-stroke;
}
.bloub-avatar-svg:has(image) {
  --agent-avatar-ring-color: var(--agent-avatar-outline, transparent);
  --agent-avatar-ring-width: var(--agent-avatar-outline-width, 1.5px);
  filter: drop-shadow(var(--agent-avatar-ring-width) 0 0 var(--agent-avatar-ring-color)) drop-shadow(calc(-1 * var(--agent-avatar-ring-width)) 0 0 var(--agent-avatar-ring-color)) drop-shadow(0 var(--agent-avatar-ring-width) 0 var(--agent-avatar-ring-color)) drop-shadow(0 calc(-1 * var(--agent-avatar-ring-width)) 0 var(--agent-avatar-ring-color));
}
.agent-avatar-custom {
  overflow: hidden;
}
.agent-avatar-custom > img, .composer-mention-avatar > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.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-avatar="image"][data-mood="asleep"] {
  opacity: 0.6;
}
@media (prefers-reduced-motion: reduce) {
  .agent-avatar[data-breathe] {
    animation: none;
  }
}
.agent-row .agent-avatar {
  --agent-avatar-optical-offset: calc(var(--agent-row-avatar-size) * -0.14);
  width: var(--agent-row-avatar-size);
  height: var(--agent-row-avatar-size);
}
.person-row .person-avatar {
  width: var(--agent-row-avatar-size);
  height: var(--agent-row-avatar-size);
}
.avatar-editor {
  position: relative;
  z-index: var(--openbot-layer-popover);
  width: min(284px, calc(var(--settings-panel-width, 360px) - 30px));
  max-width: calc(100vw - 24px);
  max-height: var(--kb-popper-content-available-height, none);
  margin: 0;
  overflow: hidden auto;
  overscroll-behavior: contain;
  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-block: 7px 3px;
  padding-inline: 13px 10px;
  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-heading-end {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.avatar-style-tabs {
  text-transform: none;
  letter-spacing: normal;
}
.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);
  height: auto;
  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: start;
  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-lg);
}
.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: 15px;
  text-wrap: balance;
}
.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: 4px;
  padding: 4px 10px 12px;
}
.avatar-shape-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.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: 44px;
}
.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 {
  --agent-avatar-optical-offset: calc(30px * -0.14);
  width: 30px;
  height: 30px;
}
.avatar-eyes-grid .avatar-face-choice {
  height: 46px;
}
.avatar-eyes-grid .agent-avatar {
  --agent-avatar-optical-offset: calc(38px * -0.14);
  width: 38px;
  height: 38px;
}
.avatar-color-grid {
  display: grid;
  min-width: 0;
  margin: 0;
  border: 0;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 2px;
  padding: 4px 10px 12px;
}
.avatar-color-choice {
  width: 100%;
  height: 32px;
  padding: 0;
}
.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: 600;
  line-height: 1;
}
.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: 300px) {
  .agent-row-wait-chip:has(.agent-row-wait-chip-label) {
    width: 18px;
    height: 18px;
    justify-content: center;
    padding: 0;
  }
  .agent-row-wait-chip:has(.agent-row-wait-chip-label) svg {
    width: 12px;
    height: 12px;
  }
  .agent-row-wait-chip-label {
    display: none;
  }
}
@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(340px, 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 minmax(0, max-content) minmax(var(--openbot-space-8), 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-label {
  overflow: hidden;
  text-overflow: ellipsis;
}
.account-usage-window-reset {
  text-align: end;
}
.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: end;
}
.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 {
  --agent-list-fade-size: 32px;
  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(4px);
}
.sidebar-compact .agent-row.sidebar-pinned-row {
  --sidebar-pinned-avatar-size: 48px;
  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);
}
.sidebar-compact .sidebar-new-button:dir(rtl) {
  transform: translateX(-6px) scale(0.92);
}
.sidebar-compact .sidebar-toggle-button:dir(rtl) {
  transform: translateX(-13px);
}
.sidebar-compact .sidebar-toggle-button:dir(rtl):active {
  transform: translateX(-13px) scale(0.96);
}
.sidebar-compact .search-field:dir(rtl) {
  transform: translateX(8px);
}
.sidebar-compact .agent-row-avatar:dir(rtl) {
  transform: translateX(-4px);
}
.sidebar-compact .agent-row-copy:dir(rtl) {
  transform: translateX(8px);
}
.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);
}
.sidebar {
  --agent-avatar-outline: 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);
}
.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-button[aria-expanded="true"], .composer-attachment > button: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 {
  --agent-avatar-outline: var(--openbot-bg-control);
  background: var(--openbot-bg-control);
}
@media (hover: hover) and (pointer: fine) and (min-width: 601px) {
  .agent-row:hover {
    --agent-avatar-outline: var(--openbot-bg-control-hover);
  }
}
.agent-list[data-sidebar-dragging] .agent-row:hover {
  --agent-avatar-outline: inherit;
  background: transparent;
}
.agent-list[data-sidebar-dragging] .agent-row.agent-row-active, .agent-list[data-sidebar-dragging] .agent-row.agent-row-active:hover {
  --agent-avatar-outline: var(--openbot-bg-surface);
  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);
}
.composer-mention-token, .remote-desktop-empty-mark {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-secondary);
}
.server-rail-muted {
  position: absolute;
  inset-inline-end: 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;
}
.sidebar-history-button > svg:dir(rtl) {
  transform: scaleX(-1);
}
.agent-row-agent-status-working {
  width: 30px;
  height: 16px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface);
  box-shadow: none;
}
.agent-row-agent-status-working .agent-row-thinking-dots {
  align-items: flex-end;
  gap: 1px;
  height: 7px;
}
.agent-row-agent-status-working .agent-row-thinking-dots i {
  width: 7px;
  height: 7px;
  border-radius: var(--openbot-radius-pill);
  background: url("/@fs/home/ubuntu/openbot/packages/ui/src/assets/plush/ball-lilac.webp") center / contain no-repeat;
  transform-origin: 50% 100%;
  animation: none;
}
.agent-row-agent-status-working .agent-row-thinking-dots i:nth-child(2) {
  background-image: url("/@fs/home/ubuntu/openbot/packages/ui/src/assets/plush/ball-mint.webp");
}
.agent-row-agent-status-working .agent-row-thinking-dots i:nth-child(3) {
  background-image: url("/@fs/home/ubuntu/openbot/packages/ui/src/assets/plush/ball-pink.webp");
}
@media (prefers-reduced-motion: no-preference) {
  .agent-row-agent-status-working .agent-row-thinking-dots i {
    animation: agent-row-ball-hop 960ms cubic-bezier(0.5, 0, 0.5, 1) infinite;
  }
  .agent-row-agent-status-working .agent-row-thinking-dots i:nth-child(2) {
    animation-delay: 130ms;
  }
  .agent-row-agent-status-working .agent-row-thinking-dots i:nth-child(3) {
    animation-delay: 260ms;
  }
}
@keyframes agent-row-ball-hop {
  0%, 62%, 100% {
    translate: 0 0;
    scale: 1 1;
  }
  8% {
    scale: 1.1 0.9;
  }
  26% {
    translate: 0 -1.75px;
    scale: 0.94 1.06;
  }
  44% {
    translate: 0 0;
    scale: 1.08 0.92;
  }
  54% {
    scale: 0.98 1.02;
  }
}
.agent-row-agent-status:is( .agent-row-agent-status-unread, .agent-row-agent-status-routine-failed, .agent-row-agent-status-waiting ) {
  --sidebar-felt-ring: var(--agent-avatar-outline, var(--openbot-bg-sidebar));
  --sidebar-felt-ring-width: 3.5px;
  --sidebar-felt-ring-border: 3px;
  --sidebar-felt-box: 16px;
  inset-inline-end: calc(-3px - var(--sidebar-felt-ring-border));
  bottom: calc(-1px - var(--sidebar-felt-ring-border));
  box-sizing: border-box;
  min-width: calc(var(--sidebar-felt-box) + 2 * var(--sidebar-felt-ring-border));
  height: calc(var(--sidebar-felt-box) + 2 * var(--sidebar-felt-ring-border));
  isolation: isolate;
  border: var(--sidebar-felt-ring-border) solid var(--sidebar-felt-ring);
  border-radius: var(--openbot-radius-pill);
  background: var(--sidebar-felt-under) padding-box;
  box-shadow: 0 0 0 calc(var(--sidebar-felt-ring-width) - var(--sidebar-felt-ring-border)) var(--sidebar-felt-ring);
}
.agent-row-agent-status-unread {
  --sidebar-felt-under: linear-gradient(to bottom, var(--openbot-felt-plum-top), var(--openbot-felt-plum-bottom));
  --felt-box: var(--sidebar-felt-box);
  overflow: clip;
  padding: 0 3px;
  color: var(--openbot-felt-cream);
  font-size: var(--openbot-text-lg);
  line-height: 16px;
}
.agent-row-unread-count {
  position: relative;
  margin-inline-end: -0.06em;
  letter-spacing: 0.06em;
}
.agent-row-agent-status.agent-row-agent-status-routine-failed {
  --sidebar-felt-under: linear-gradient(
    to bottom,
    var(--openbot-felt-raspberry-top),
    var(--openbot-felt-raspberry-bottom)
  );
  inset-inline-end: calc(-1px - var(--sidebar-felt-ring-border));
  bottom: calc(1px - var(--sidebar-felt-ring-border));
  width: calc(var(--sidebar-felt-box) + 2 * var(--sidebar-felt-ring-border));
}
.agent-row-agent-status-routine-failed::before {
  position: absolute;
  z-index: -1;
  inset: -0.75px;
  background: url("/@fs/home/ubuntu/openbot/packages/ui/src/assets/plush/felt-x-ball.webp") center / 100% 100% no-repeat;
  clip-path: circle(calc(50% - 1px));
  content: "";
}
.agent-row-agent-status-routine-failed svg {
  display: none;
}
.agent-row-agent-status.agent-row-agent-status-waiting {
  --sidebar-felt-box: 18px;
  --sidebar-felt-under: linear-gradient(to bottom, var(--openbot-felt-amber-top), var(--openbot-felt-amber-bottom));
  --felt-box: var(--sidebar-felt-box);
  width: calc(var(--sidebar-felt-box) + 2 * var(--sidebar-felt-ring-border));
  color: var(--openbot-felt-cream);
}
.agent-row-agent-status-waiting svg {
  width: 12px;
  height: 12px;
  stroke-width: 2.75;
}
.agent-row-agent-status:is( .agent-row-agent-status-unread, .agent-row-agent-status-routine-failed, .agent-row-agent-status-waiting ) {
  transform-origin: 50% 100%;
}
.agent-row-unread-count.agent-row-unread-count-old {
  position: absolute;
  inset: 0;
  display: grid;
  margin: 0;
  place-items: center;
}
.agent-row-unread-count.agent-row-unread-count-roll-gone {
  visibility: hidden;
}
@media (prefers-reduced-motion: no-preference) {
  .agent-row-agent-status:is( .agent-row-agent-status-unread, .agent-row-agent-status-routine-failed, .agent-row-agent-status-waiting ).agent-row-agent-status-entering {
    animation: sidebar-felt-in var(--openbot-duration-slow) cubic-bezier(0.2, 0, 0, 1) both;
  }
  .agent-row-agent-status-unread.agent-row-agent-status-bumping {
    animation: sidebar-felt-bump 360ms ease-out;
  }
  .agent-row-agent-status-unread.agent-row-agent-status-bumping-b {
    animation: sidebar-felt-bump-b 360ms ease-out;
  }
  .agent-row-agent-status:is( .agent-row-agent-status-unread, .agent-row-agent-status-routine-failed ).agent-row-agent-status-leaving {
    animation: sidebar-felt-out var(--openbot-duration-overlay) cubic-bezier(0.5, 0, 0.75, 0) both;
  }
  .agent-row-unread-count.agent-row-unread-count-roll-in {
    animation: sidebar-felt-roll-in 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .agent-row-unread-count.agent-row-unread-count-roll-in-b {
    animation: sidebar-felt-roll-in-b 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .agent-row-unread-count.agent-row-unread-count-roll-out {
    animation: sidebar-felt-roll-out 200ms ease-in both;
  }
  .agent-row-unread-count.agent-row-unread-count-roll-out-b {
    animation: sidebar-felt-roll-out-b 200ms ease-in both;
  }
}
@keyframes sidebar-felt-in {
  from {
    opacity: 0;
    scale: 0.7;
  }
}
@keyframes sidebar-felt-bump {
  35% {
    scale: 1.12 0.88;
  }
  65% {
    scale: 0.97 1.04;
  }
}
@keyframes sidebar-felt-bump-b {
  35% {
    scale: 1.12 0.88;
  }
  65% {
    scale: 0.97 1.04;
  }
}
@keyframes sidebar-felt-out {
  30% {
    scale: 1.1 0.9;
  }
  100% {
    opacity: 0;
    scale: 0.2;
  }
}
@keyframes sidebar-felt-roll-in {
  from {
    opacity: 0;
    translate: 0 65%;
  }
}
@keyframes sidebar-felt-roll-in-b {
  from {
    opacity: 0;
    translate: 0 65%;
  }
}
@keyframes sidebar-felt-roll-out {
  to {
    opacity: 0;
    translate: 0 -65%;
  }
}
@keyframes sidebar-felt-roll-out-b {
  to {
    opacity: 0;
    translate: 0 -65%;
  }
}
.sidebar-plush-ring-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}
.agent-dock {
  --agent-dock-fill: var(--window-solid-frame, var(--openbot-bg-frame));
  --agent-avatar-outline: var(--agent-dock-fill);
  --agent-row-avatar-size: 40px;
  position: fixed;
  z-index: var(--openbot-layer-dropdown);
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  translate: var(--agent-dock-tuck, 0px) 0;
  pointer-events: none;
}
.agent-dock[data-side="left"] {
  right: auto;
  left: 0;
  transform: translateY(-50%) scaleX(-1);
  translate: calc(-1 * var(--agent-dock-tuck, 0px)) 0;
}
.agent-dock-hit {
  position: absolute;
  pointer-events: auto;
}
.agent-dock-handle {
  position: absolute;
  top: -40px;
  left: -40px;
  overflow: visible;
  fill: none;
}
.agent-dock:not([data-draggable]) .agent-dock-handle {
  display: none;
}
.agent-dock-handle-arc {
  stroke: var(--agent-dock-fill);
  stroke-linecap: round;
  transition: stroke-width var(--openbot-duration-normal) var(--openbot-ease-out), translate var(--openbot-duration-normal) var(--openbot-ease-out);
}
.agent-dock-handle:has(.agent-dock-handle-hit:hover) .agent-dock-handle-arc {
  stroke-width: 5.5px;
  translate: 0 -2px;
}
.agent-dock[data-dragging] .agent-dock-handle .agent-dock-handle-arc {
  stroke-width: 6px;
  translate: 0 -3px;
}
.agent-dock-handle-hit {
  stroke: var(--openbot-transparent);
  stroke-linecap: round;
  pointer-events: stroke;
  cursor: grab;
}
.agent-dock-handle-hit:active {
  cursor: grabbing;
}
.agent-dock-filter {
  position: absolute;
}
.agent-dock-liquid {
  position: absolute;
  inset: -40px -60px -40px -40px;
}
.agent-dock-liquid > * {
  position: absolute;
  background: var(--agent-dock-fill);
}
.agent-dock-liquid > .agent-dock-shapes {
  top: 0;
  left: 0;
  overflow: visible;
  background: var(--openbot-transparent);
  fill: var(--agent-dock-fill);
}
.agent-dock-edge {
  position: absolute;
  top: -40px;
  left: -40px;
  overflow: visible;
  fill: var(--agent-dock-fill);
}
.agent-dock-panel-body {
  margin-left: 40px;
  margin-top: 40px;
  opacity: 0;
}
.agent-dock-drop {
  top: 40px;
  left: 40px;
  width: 44px;
  height: 44px;
  border-radius: var(--openbot-radius-pill);
  transform: scale(0);
}
.agent-dock-seats {
  position: absolute;
  inset: 0;
}
.agent-dock-seat {
  position: absolute;
  top: 0;
  width: 44px;
  height: 44px;
  pointer-events: auto;
  transform-origin: 50% 50%;
}
.agent-dock-seat-scroll {
  position: absolute;
  top: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  pointer-events: auto;
  scrollbar-width: none;
  --agent-dock-seat-fade-top: 0px;
  --agent-dock-seat-fade-bottom: 0px;
}
.agent-dock-seat-scroll::-webkit-scrollbar {
  display: none;
}
.agent-dock-seat-list {
  position: relative;
  overflow: clip;
}
.agent-dock-seats .agent-dock-seat-scroll:is(.scroll-fade-top, .scroll-fade-bottom) {
  -webkit-mask-image: linear-gradient( to bottom, transparent, var(--openbot-text-primary) var(--agent-dock-seat-fade-top), var(--openbot-text-primary) calc(100% - var(--agent-dock-seat-fade-bottom)), transparent );
  mask-image: linear-gradient( to bottom, transparent, var(--openbot-text-primary) var(--agent-dock-seat-fade-top), var(--openbot-text-primary) calc(100% - var(--agent-dock-seat-fade-bottom)), transparent );
}
.agent-dock-seat-scroll.scroll-fade-top {
  --agent-dock-seat-fade-top: var(--agent-dock-seat-fade);
}
.agent-dock-seat-scroll.scroll-fade-bottom {
  --agent-dock-seat-fade-bottom: var(--agent-dock-seat-fade);
}
.agent-dock-seat-button {
  position: relative;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  padding: 0;
  background: var(--openbot-transparent);
  color: var(--openbot-text-muted);
  cursor: pointer;
  transition: color var(--openbot-duration-normal) var(--openbot-ease-out), transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.agent-dock-seat-button * {
  pointer-events: none;
}
.agent-dock-seat-button:hover {
  color: var(--openbot-text-primary);
  transform: scale(1.06);
}
.agent-dock-seat-button:active {
  transform: scale(0.92);
}
.agent-dock-seat-button:focus-visible {
  outline: 1px solid var(--openbot-border-focus);
  outline-offset: 2px;
}
.agent-dock-seat-button[data-open] {
  transform: scale(1.12);
}
.agent-dock-seat[data-dragging] {
  z-index: 1;
}
.agent-dock-seat[data-dragging] .agent-dock-seat-button {
  color: var(--openbot-text-primary);
  cursor: grabbing;
  transform: scale(1.12);
}
.agent-dock-seat-button .agent-avatar {
  --agent-avatar-optical-offset: calc(40px * -0.14);
  width: 40px;
  height: 40px;
}
.agent-dock-seat-button .agent-row-agent-status {
  border-color: var(--agent-dock-fill);
}
.agent-dock-add svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.agent-dock-add-menu.ui-action-menu {
  display: flex;
  max-height: min(560px, calc(100dvh - 16px), var(--kb-popper-content-available-height, 560px));
  flex-direction: column;
}
.agent-dock-add-menu-search.ui-action-menu {
  width: 232px;
}
.agent-dock-add-list {
  min-height: 0;
  flex: 1 1 auto;
  margin-inline: calc(var(--ui-menu-padding) * -1);
  padding-inline: var(--ui-menu-padding);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.agent-dock-add-list > [role="menuitem"] {
  overflow-y: clip;
}
.agent-dock-add-list::-webkit-scrollbar {
  display: none;
}
.agent-dock-add-list > hr {
  height: 1px;
  margin: var(--ui-menu-padding) calc(var(--ui-menu-padding) * -1);
  border: 0;
  background: var(--openbot-border);
}
.agent-dock-add-search {
  margin: calc(var(--ui-menu-padding) * -1) calc(var(--ui-menu-padding) * -1) var(--openbot-space-1);
}
.agent-dock-add-search .agent-dock-add-search-input {
  border: 0;
  background: transparent;
  box-shadow: none;
}
.agent-dock-add-search .agent-dock-add-search-input:focus-visible {
  outline: none;
  box-shadow: none;
}
.agent-dock-menu-avatar.agent-avatar {
  width: 20px;
  height: 20px;
}
.agent-dock-menu-channel {
  display: inline-flex;
}
.agent-dock-menu-channel .channel-avatar-cluster {
  --channel-avatar-size: 20px;
  --agent-avatar-outline-width: 1px;
}
.agent-dock-panel {
  position: absolute;
  top: 0;
  color: var(--openbot-text-primary);
  opacity: 0;
  transform-origin: 100% 50%;
}
.agent-dock-panel[data-open] {
  pointer-events: auto;
}
.agent-dock-chat {
  display: flex;
  height: 100%;
  flex-direction: column;
  animation: agent-dock-swap var(--openbot-duration-island-content) var(--openbot-ease-out);
}
@keyframes agent-dock-swap {
  from {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(8px);
  }
}
.agent-dock-chat-header {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-3) var(--openbot-space-3) var(--openbot-space-2) var(--openbot-space-4);
}
.agent-dock-chat-avatar.agent-avatar {
  --agent-avatar-optical-offset: calc(34px * -0.14);
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
}
.agent-dock-chat-channel {
  display: inline-flex;
  flex: 0 0 auto;
}
.agent-dock-chat-channel .channel-avatar-cluster {
  --channel-avatar-size: 34px;
}
.agent-dock-chat-title {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  line-height: var(--openbot-leading-sm);
}
.agent-dock-chat-title strong {
  overflow: hidden;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-dock-chat-title span {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-dock-icon {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  padding: 0;
  background: var(--openbot-transparent);
  color: var(--openbot-text-muted);
  cursor: pointer;
}
.agent-dock-icon:hover {
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-primary);
}
.agent-dock-icon svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.agent-dock-log {
  position: relative;
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}
.agent-dock-messages {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  padding: var(--openbot-space-2) var(--openbot-space-4) var(--openbot-space-3);
  scrollbar-width: none;
  --agent-dock-fade-top: 0px;
  --agent-dock-fade-bottom: 0px;
}
.agent-dock-messages::-webkit-scrollbar {
  display: none;
}
.agent-dock-messages-content {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  gap: var(--openbot-space-2);
}
.agent-dock-scroll-thumb {
  position: absolute;
  top: 0;
  right: 3px;
  width: 3px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-muted);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.agent-dock-scroll-thumb[data-scrollable][data-shown] {
  opacity: 0.5;
}
.agent-dock-chat .agent-dock-messages:is(.scroll-fade-top, .scroll-fade-bottom) {
  -webkit-mask-image: linear-gradient( to bottom, transparent, var(--openbot-text-primary) var(--agent-dock-fade-top), var(--openbot-text-primary) calc(100% - var(--agent-dock-fade-bottom)), transparent );
  mask-image: linear-gradient( to bottom, transparent, var(--openbot-text-primary) var(--agent-dock-fade-top), var(--openbot-text-primary) calc(100% - var(--agent-dock-fade-bottom)), transparent );
}
.agent-dock-messages.scroll-fade-top {
  --agent-dock-fade-top: 32px;
}
.agent-dock-messages.scroll-fade-bottom {
  --agent-dock-fade-bottom: 32px;
}
.agent-dock-empty {
  margin: auto 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  text-align: center;
}
.agent-dock-bubble {
  max-width: 85%;
  flex: none;
  font-size: var(--openbot-text-md);
  overflow-wrap: anywhere;
}
.agent-dock-bubble[data-pending] {
  opacity: 0.6;
}
.agent-dock-bubble[data-error] {
  color: var(--openbot-danger-text);
}
.agent-dock-author {
  display: block;
  margin-block-end: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: 500;
}
.agent-dock-text {
  margin: 0;
  white-space: pre-wrap;
}
.agent-dock-markdown {
  min-width: 0;
  font-size: var(--openbot-text-md);
}
.agent-dock-typing {
  display: flex;
  padding-block: var(--openbot-space-1);
}
.agent-dock-typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.agent-dock-typing-dots i {
  width: 6px;
  height: 6px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-muted);
  animation: agent-dock-dot 1s var(--openbot-ease-in-out) infinite;
}
.agent-dock-typing-dots i:nth-child(2) {
  animation-delay: 0.15s;
}
.agent-dock-typing-dots i:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes agent-dock-dot {
  50% {
    opacity: 0.3;
    transform: translateY(-3px);
  }
}
.agent-dock-sr {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  white-space: nowrap;
}
.agent-dock-wait {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin: 0 var(--openbot-space-3);
  border-radius: var(--openbot-radius-lg);
  padding: var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-3);
  background: var(--openbot-bg-surface);
  font-size: var(--openbot-text-sm);
}
.agent-dock-wait-icon {
  display: grid;
  flex: none;
  place-items: center;
  color: var(--openbot-text-muted);
}
.agent-dock-wait-icon svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.agent-dock-wait-title {
  min-width: 0;
  flex: 1;
}
.agent-dock-error {
  margin: var(--openbot-space-2) var(--openbot-space-4) 0;
  color: var(--openbot-danger-text);
  font-size: var(--openbot-text-sm);
}
.agent-dock-composer-wrap.composer-wrap {
  --composer-editor-limit: initial;
  padding: 0;
}
.agent-dock-composer-wrap .mention-picker {
  --mention-picker-side-inset: calc(var(--openbot-space-3) + 12px);
}
.agent-dock-composer.composer[data-compact] {
  grid-template-columns: minmax(0, 1fr) auto;
  margin: var(--openbot-space-2) var(--openbot-space-3) var(--openbot-space-3);
}
.agent-dock-composer.composer[data-compact]:focus-within {
  box-shadow: none;
}
.agent-dock-composer.composer[data-compact] > .composer-input-label {
  grid-column: 1;
}
.agent-dock-shelf {
  --agent-dock-shelf-toward: 1;
  position: absolute;
  display: grid;
  justify-items: end;
  gap: var(--openbot-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.agent-dock-shelf[hidden] {
  display: none;
}
.agent-dock-shelf-item {
  animation: agent-dock-shelf-drip 560ms cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
  transition: opacity var(--openbot-duration-normal) ease-out, translate var(--openbot-duration-normal) ease-out;
}
.agent-dock-shelf-item[data-leaving] {
  opacity: 0;
  translate: calc(var(--agent-dock-shelf-toward) * 24px) 0;
}
@keyframes agent-dock-shelf-drip {
  from {
    opacity: 0;
    scale: 0.6;
    translate: calc(var(--agent-dock-shelf-toward) * 32px) 0;
  }
}
.agent-dock-shelf :is(.agent-dock-result, .agent-dock-shelf-more) {
  gap: 0;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  background: var(--agent-dock-fill);
  font: inherit;
  font-size: var(--openbot-text-sm);
  white-space: nowrap;
  pointer-events: auto;
  cursor: pointer;
}
.agent-dock-shelf :is(.agent-dock-result, .agent-dock-shelf-more):focus-visible {
  outline: 1px solid var(--openbot-border-focus);
  outline-offset: 2px;
  box-shadow: none;
}
.agent-dock-shelf :is(.agent-dock-result, .agent-dock-shelf-more):hover:not(:disabled) {
  background: var(--agent-dock-fill);
}
.agent-dock-result {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 var(--openbot-space-4) 0 var(--openbot-space-1);
  color: var(--openbot-text-primary);
  transition: translate var(--openbot-duration-normal) cubic-bezier(0.34, 1.56, 0.64, 1);
}
.agent-dock-result:hover {
  translate: calc(var(--agent-dock-shelf-toward) * -4px) 0;
}
.agent-dock-result .agent-avatar {
  --agent-avatar-optical-offset: calc(32px * -0.14);
  flex: none;
  width: 32px;
  height: 32px;
}
.agent-dock-result > svg {
  flex: none;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  margin-left: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
}
.agent-dock-result-label {
  max-width: 240px;
  overflow: hidden;
  margin-left: var(--openbot-space-2);
  font-weight: var(--openbot-weight-medium);
  text-overflow: ellipsis;
}
.agent-dock-shelf-more {
  height: 28px;
  padding: 0 var(--openbot-space-3);
  color: var(--openbot-text-secondary);
  font-variant-numeric: tabular-nums;
}
.agent-dock-shelf-more:hover {
  color: var(--openbot-text-primary);
}
.agent-dock[data-side="left"] .agent-dock-seat, .agent-dock[data-side="left"] .agent-dock-panel {
  scale: -1 1;
}
.agent-dock[data-side="left"] .agent-dock-panel {
  transform-origin: 50% 50%;
}
.agent-dock[data-side="left"] .agent-dock-shelf {
  --agent-dock-shelf-toward: -1;
  justify-items: start;
  scale: -1 1;
}
.agent-dock[data-ambient-motion="paused"] :is(.ui-spinner, .agent-row-thinking-dots i) {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .agent-dock-handle-arc, .agent-dock-scroll-thumb {
    transition: none;
  }
  .agent-dock-chat, .agent-dock-typing-dots i {
    animation: none;
  }
  .agent-dock-seat-button, .agent-dock-result {
    transition: none;
  }
  .agent-dock-shelf-item {
    animation: none;
  }
}
:root[data-surface="agent-dock"], :root[data-surface="agent-dock"] body, :root[data-surface="agent-dock"] #root {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
}
:root[data-surface="agent-dock"] .agent-dock {
  right: -5px;
}
.agent-dock-seat-button .channel-avatar-cluster .agent-avatar, .agent-dock-chat-channel .channel-avatar-cluster .agent-avatar, .agent-dock-menu-channel .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);
}
.agent-dock-strip {
  --agent-dock-strip-near: 0;
  position: fixed;
  z-index: calc(var(--openbot-layer-dropdown) - 1);
  top: 50%;
  right: 0;
  width: calc(var(--agent-dock-strip-width) + 22px * var(--agent-dock-strip-near));
  height: calc( var(--agent-dock-strip-height, 240px) * (var(--agent-dock-strip-rest) + (1 - var(--agent-dock-strip-rest)) * var(--agent-dock-strip-near)) );
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--openbot-radius-pill) 0 0 var(--openbot-radius-pill);
  background: var(--window-solid-frame, var(--openbot-bg-frame));
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
  transition: width var(--openbot-duration-fast) var(--openbot-ease-out), height var(--openbot-duration-fast) var(--openbot-ease-out), opacity var(--openbot-duration-fast) var(--openbot-ease-out) var(--openbot-duration-fast);
}
.agent-dock-strip[data-side="left"] {
  right: auto;
  left: 0;
  border-radius: 0 var(--openbot-radius-pill) var(--openbot-radius-pill) 0;
}
.agent-dock-strip[data-shown] {
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
  transition: width var(--openbot-duration-fast) var(--openbot-ease-out), height var(--openbot-duration-fast) var(--openbot-ease-out), opacity var(--openbot-duration-fast) var(--openbot-ease-out) var(--openbot-duration-normal);
}
.agent-dock-strip:hover:not(:disabled):not([data-disabled]) {
  background: var(--window-solid-frame, var(--openbot-bg-frame));
}
.agent-dock-strip:focus-visible {
  outline: 1px solid var(--openbot-border-focus);
  outline-offset: 1px;
  box-shadow: none;
}
.agent-dock-strip::after {
  position: absolute;
  inset: 0 -4px;
  content: "";
  background: var(--openbot-wash-front);
  opacity: 0;
  pointer-events: none;
  translate: 0 110%;
  transition: opacity var(--openbot-duration-normal) var(--openbot-ease-out);
}
.agent-dock-strip[data-asks]::after {
  opacity: 1;
}
.agent-dock-strip[data-asks][data-wave]::after {
  animation: agent-dock-strip-wave 2.24s cubic-bezier(0.45, 0, 0.25, 1) 2;
}
@keyframes agent-dock-strip-wave {
  0% {
    translate: 0 105%;
  }
  100% {
    translate: 0 -105%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .agent-dock-strip[data-asks]::after, .agent-dock-strip[data-asks][data-wave]::after {
    animation: none;
    translate: 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-block: 0;
  padding-inline: var(--openbot-space-2) var(--openbot-space-3);
  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: start;
}
.account-update-island__progress-value {
  display: inline-grid;
  align-items: baseline;
  grid-template-columns: 3ch max-content;
  direction: ltr;
  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-block: var(--openbot-space-1-5);
  padding-inline: var(--openbot-space-3) var(--openbot-space-1-5);
}
.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);
}
.join-server-close {
  position: absolute;
  top: var(--openbot-space-6);
  inset-inline-end: 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);
    inset-inline-end: 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-dialog:has(.add-server-other) .add-server-intro .ui-heading {
  padding-inline: 160px;
}
.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%;
  inset-inline-start: 0;
  width: auto;
  flex: 0 0 auto;
  transform: translateY(-50%);
}
.hosted-currency-locked {
  display: inline-flex;
  align-items: center;
  height: var(--openbot-control-md);
  padding-inline: 10px;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.add-server-bar[data-license] {
  justify-content: flex-end;
  padding-inline: 0;
}
.add-server-bar[data-license] .hosted-use {
  margin-inline-end: auto;
}
.add-server-bar[data-license] .hosted-currency {
  position: static;
  transform: none;
}
.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;
  inset-inline-start: 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, .hosted-billing[data-use="work"]::before {
  transform: translateX(100%);
}
.hosted-billing:dir(rtl):is([data-billing="yearly"], [data-use="work"])::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;
}
.add-server-bar[data-license] .hosted-billing-save {
  font-variant-numeric: tabular-nums;
}
.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-inline-start: 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-inline-end: 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-inline-start: 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-bundle {
  padding: 0 var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success-soft);
  color: var(--openbot-success-text);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-md);
  white-space: nowrap;
}
.hosted-plan-summary[data-license] {
  display: flex;
  align-items: baseline;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}
.hosted-plan-summary svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  translate: 0 calc((var(--openbot-icon-sm) - 1cap) / 2);
  color: var(--openbot-success-text);
}
.hosted-plans[data-license] .hosted-plan-summary {
  min-height: 2lh;
}
.hosted-plans[data-license] .hosted-plan-price {
  position: relative;
}
.hosted-plan-longest {
  position: absolute;
  inset: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  visibility: hidden;
  pointer-events: none;
}
.hosted-plans[data-stacked] .hosted-plan-price > .hosted-plan-was[data-shown] {
  flex-basis: 100%;
}
.hosted-plans[data-license] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.hosted-license-people {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3) var(--openbot-space-6);
  border: 1px solid var(--openbot-border);
  border-top: 0;
  border-radius: 0 0 var(--openbot-radius-card) var(--openbot-radius-card);
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  transition: color var(--openbot-duration-normal) var(--openbot-ease-out);
}
.hosted-license-people[data-disabled] {
  color: var(--openbot-text-muted);
}
.hosted-license-people > span {
  white-space: nowrap;
}
.hosted-license-stepper {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin: 0;
  padding: 0;
  border: 0;
  font-variant-numeric: tabular-nums;
}
.hosted-license-stepper > span {
  min-width: 11ch;
  text-align: center;
  white-space: nowrap;
}
.hosted-license-stepper .ui-icon-button {
  border-radius: var(--openbot-radius-pill);
}
.hosted-plan-choose.ui-button {
  margin-top: auto;
}
.hosted-plans[data-license] .hosted-plan-choose.ui-button {
  margin-top: 0;
}
.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-other {
  position: absolute;
  top: var(--openbot-space-6);
  inset-inline-start: var(--openbot-space-6);
  z-index: 2;
}
.add-server-other .ui-button {
  color: var(--openbot-text-muted);
}
.ui-action-menu.add-server-other-menu {
  z-index: calc(var(--openbot-layer-dialog) + 1);
}
.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-inline-start: 0;
  }
}
@media (max-width: 560px) {
  .add-server-intro .ui-heading {
    font-size: var(--openbot-text-2xl);
    line-height: var(--openbot-leading-2xl);
  }
  .add-server-dialog:has(.add-server-other) .add-server-intro {
    padding-top: calc(var(--openbot-control-md) + var(--openbot-space-1));
  }
  .add-server-dialog:has(.add-server-other) .add-server-intro .ui-heading {
    padding-inline: 0;
  }
  .add-server-other {
    top: var(--openbot-space-3);
    inset-inline-start: var(--openbot-space-3);
  }
  .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-bar[data-license] {
    flex-wrap: wrap;
    padding-top: 0;
  }
  .add-server-bar[data-license] .hosted-billing:not(.hosted-use) {
    flex: 1 1 100%;
  }
  .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, .hosted-license-people, .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;
  }
}
.create-local-server-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: create-local-server-dialog-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}
.create-local-server-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--openbot-space-1);
}
.create-local-server-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);
}
.create-local-server-description {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.create-local-server-form {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
  margin: var(--openbot-space-4) 0 0;
}
.create-local-server-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
}
@keyframes create-local-server-dialog-in {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
}
.install-server-dialog.join-server-dialog {
  width: min(560px, 100%);
}
.install-server-page {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--openbot-space-4) + var(--openbot-space-1));
}
.install-server-block {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
}
.install-server-block[data-expired] .message-code-block pre {
  opacity: 0.5;
}
.install-server-code-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.install-server-status, .install-server-placeholder {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  min-height: var(--openbot-control-sm);
}
.install-server-placeholder {
  flex-direction: column;
  justify-content: center;
  min-height: 120px;
  text-align: center;
}
.install-server-status svg, .install-server-placeholder svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
.install-server-spin {
  color: var(--openbot-text-muted);
  animation: install-server-spin 1s linear infinite;
}
.install-server-ok {
  color: var(--openbot-success);
}
.install-server-warning {
  color: var(--openbot-warning);
}
.install-server-danger {
  color: var(--openbot-danger);
}
@keyframes install-server-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .install-server-spin {
    animation: none;
  }
}
.hosted-upsell-notice {
  flex: none;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  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 {
  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;
}
.server-upgrade-modal {
  width: min(480px, 100%);
}
.server-upgrade-meter {
  display: grid;
  gap: var(--openbot-space-1-5);
  margin: var(--openbot-space-1) 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.server-upgrade-meter .ui-progress-fill {
  background: var(--openbot-warning);
}
.server-upgrade-meter[data-level="full"] .ui-progress-fill {
  background: var(--openbot-danger);
}
.server-upgrade-compare {
  width: 100%;
  margin-top: var(--openbot-space-2);
  border-collapse: collapse;
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
.server-upgrade-compare th, .server-upgrade-compare td {
  padding: var(--openbot-space-2) 0;
  border-bottom: 1px solid var(--openbot-border);
  text-align: start;
}
.server-upgrade-compare thead th {
  color: var(--openbot-text-muted);
  font-weight: var(--openbot-weight-medium);
}
.server-upgrade-compare tbody th {
  color: var(--openbot-text-secondary);
  font-weight: var(--openbot-weight-regular);
}
.server-upgrade-compare tbody td:last-child {
  font-weight: var(--openbot-weight-semibold);
}
.server-upgrade-compare tbody tr:last-child > * {
  border-bottom: 0;
}
.server-upgrade-error {
  margin: 0;
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
}
.server-upgrade-modal .hosted-upsell-modal-actions {
  flex-wrap: wrap;
}
.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-roles-icon {
  color: var(--openbot-text-secondary);
}
.server-roles-member-count {
  min-width: 72px;
  text-align: end;
}
.server-roles-level {
  min-width: 128px;
}
.server-roles-agent-level {
  min-width: 176px;
}
.server-roles-name-row {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.server-roles-member-trigger {
  max-width: 240px;
}
.server-roles-member-summary {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:is(.server-roles-create, .server-roles-member-trigger) > svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}
.server-roles-level-source {
  color: var(--openbot-text-secondary);
}
.server-roles-level-menu {
  min-width: 176px;
}
.server-roles-level-menu .server-roles-open-everyone {
  margin-top: var(--openbot-space-1);
  border-top: 1px solid var(--openbot-border);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.server-audit-controls {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.server-audit-time {
  white-space: nowrap;
}
.server-audit-row .server-audit-title {
  color: var(--openbot-text-secondary);
  font-weight: var(--openbot-weight-regular);
}
.server-audit-key {
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}
.server-audit-key[data-level="none"] {
  color: var(--openbot-danger);
}
.server-audit-key[data-level="chat"] {
  color: var(--openbot-success);
}
.server-audit-key[data-level="manage"] {
  color: var(--openbot-warning);
}
.server-audit-arrow svg {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-inline: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  vertical-align: -2px;
}
.server-audit-arrow svg:dir(rtl) {
  transform: scaleX(-1);
}
.server-audit-mark {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: var(--openbot-radius-md);
}
.server-audit-mark svg {
  width: 16px;
  height: 16px;
}
.server-audit-mark[data-tone="success"] {
  background: var(--openbot-success-soft);
  color: var(--openbot-success);
}
.server-audit-mark[data-tone="danger"] {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
}
.server-audit-mark[data-tone="accent"] {
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
}
.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;
  inset-inline-end: 0;
  bottom: 0;
  display: flex;
  width: var(--settings-panel-width, 360px);
  flex-direction: column;
  border-inline-start: 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:dir(rtl) {
  animation-name: settings-panel-in-rtl;
}
@keyframes settings-panel-in-rtl {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.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-back-icon:dir(rtl) {
  transform: scaleX(-1) translateX(-0.5px);
}
.settings-forward-icon:dir(rtl), .settings-link-value > svg[class~="lucide-chevron-right"]:dir(rtl) {
  transform: scaleX(-1);
}
.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-block: 0 6px;
  margin-inline: 8px 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  line-height: 18px;
}
.settings-field > .ui-field-limit {
  display: grid;
  margin-block: var(--openbot-space-1-5) 0;
  margin-inline: var(--openbot-space-2) 0;
}
.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: none;
  resize: none;
}
.settings-field .settings-description-input {
  height: 72px;
  min-height: 72px;
}
.agent-instructions-bar {
  position: sticky;
  z-index: 1;
  top: calc(var(--openbot-space-6) * -1);
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-top: calc(var(--openbot-space-6) * -1);
  border-bottom: 1px solid var(--openbot-border);
  background: var(--openbot-bg-canvas);
  padding: var(--openbot-space-6) 0 var(--openbot-space-3);
}
.agent-instructions-bar-icon {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  flex: none;
  color: var(--openbot-text-muted);
  stroke-width: var(--openbot-icon-stroke-lg);
}
.agent-instructions-bar-file {
  display: grid;
  min-width: 0;
  flex: 1;
}
.agent-instructions-bar-name {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.agent-instructions-bar-folder {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  overflow-wrap: anywhere;
  user-select: text;
}
.agent-instructions-text {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-lg);
  overflow-wrap: anywhere;
}
.agent-instructions-text .message-markdown-heading[data-level] {
  margin: var(--openbot-space-6) 0 var(--openbot-space-1-5);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-md);
}
.agent-instructions-text .message-markdown-heading[data-level="1"] {
  font-size: var(--openbot-text-xl);
  line-height: var(--openbot-leading-2xl);
}
.agent-instructions-text > .message-markdown-heading:first-child {
  margin-top: 0;
}
.agent-instructions-text :is(ul, ol) {
  margin: 0;
  padding-inline-start: var(--openbot-space-4);
}
.agent-instructions-text li + li {
  margin-top: var(--openbot-space-1);
}
.agent-instructions-empty {
  margin: 0;
  color: var(--openbot-text-muted);
}
.agent-memories-field.agent-instructions-field {
  max-height: none;
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-lg);
}
.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[aria-invalid="true"], .settings-field textarea[aria-invalid="true"] {
  border-color: var(--openbot-danger);
}
.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, auto) minmax(0, max-content);
  justify-content: space-between;
  align-items: center;
  gap: var(--openbot-space-3);
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 var(--openbot-space-1);
  text-align: start;
  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;
  min-width: 0;
  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-text {
  line-height: var(--openbot-leading-md);
}
.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-block: 0;
  margin-inline: var(--openbot-space-1) 0;
  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-inline-end: 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;
  gap: var(--openbot-space-3);
  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-inline-start: 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);
  inset-inline-end: 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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_AMS-Regular.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_AMS-Regular.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Bold.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Bold.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Regular.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Regular.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Fraktur-Bold.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Fraktur-Bold.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Fraktur-Regular.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Fraktur-Regular.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Main-Bold.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Main-Bold.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Main-BoldItalic.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Main-BoldItalic.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Main-Italic.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Main-Italic.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Main-Regular.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Main-Regular.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Math-BoldItalic.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Math-BoldItalic.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Math-Italic.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Math-Italic.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_SansSerif-Bold.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_SansSerif-Bold.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_SansSerif-Italic.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_SansSerif-Italic.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_SansSerif-Regular.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_SansSerif-Regular.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Script-Regular.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Script-Regular.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Size1-Regular.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Size1-Regular.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Size2-Regular.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Size2-Regular.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Size3-Regular.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Size3-Regular.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Size4-Regular.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Size4-Regular.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Typewriter-Regular.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Typewriter-Regular.woff) format("woff"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Typewriter-Regular.ttf) format("truetype");
}
.katex {
  font: normal 1.21em KaTeX_Main,math,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.19.0";
}
.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-inline-end var(--panel-resize-duration, var(--openbot-duration-overlay)) cubic-bezier(0.22, 1, 0.36, 1);
  --conversation-column-width: clamp(1440px, 65vw, 1920px);
}
.conversation-panel > .conversation-scroll > :is(.virtual-chat-list, .conversation-live) {
  max-width: var(--conversation-column-width);
  margin-inline: auto;
}
.conversation-panel > .composer-wrap {
  padding-inline: max(var(--openbot-space-1-5), calc((100% - var(--conversation-column-width) - 12px) / 2));
}
.conversation-panel[data-settings-panel] > .composer-wrap {
  padding-inline: max( var(--openbot-space-1-5), calc((100% - var(--settings-panel-width, 360px) - var(--conversation-column-width) - 12px) / 2) );
}
.conversation-panel > .conversation-covered {
  position: absolute;
  inset: 0;
  visibility: hidden;
}
.conversation-panel > :is(.conversation-scroll, .composer-wrap) > * {
  contain-intrinsic-size: auto none;
}
.conversation-panel > .conversation-covered > * {
  content-visibility: hidden;
}
.conversation-panel > .composer-wrap.conversation-covered {
  top: auto;
}
.conversation-panel > .composer-wrap .mention-picker {
  --mention-picker-side-inset: max(
    calc(var(--openbot-space-1-5) + 12px),
    calc((100% - var(--conversation-column-width) + 12px) / 2)
  );
}
.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: calc(30px * -0.14);
  width: 30px;
  height: 30px;
  border-radius: var(--openbot-radius-md);
}
.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-block: 6px;
  padding-inline: 13px 7px;
  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-block: 0;
  padding-inline: 8px 12px;
  background: transparent;
}
.conversation-heading-group {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}
.chat-search {
  position: absolute;
  z-index: 13;
  top: 19px;
  inset-inline-end: 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-inline-start: 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-inline-end: 3px;
}
::highlight(openbot-chat-search-results) {
  background: var(--openbot-accent-soft);
}
::highlight(openbot-chat-search-current) {
  background: var(--openbot-warning);
  color: var(--openbot-paper-text);
}
.conversation-title[aria-label="View agent settings"]:hover {
  color: var(--openbot-text-primary);
}
.browser-panel {
  position: absolute;
  z-index: 14;
  top: 0;
  inset-inline-end: 0;
  bottom: 0;
  display: flex;
  width: var(--browser-panel-width, 380px);
  flex-direction: column;
  border-inline-start: 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-block: 0;
  padding-inline: 11px 7px;
}
.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: start;
}
.file-preview-spreadsheet-table th, .file-preview-spreadsheet-table td {
  border-top: 1px solid var(--openbot-border);
  border-inline-end: 1px solid var(--openbot-border);
  padding: 8px 12px;
  text-align: start;
  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-inline-end: 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: start;
}
.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;
}
:dir(rtl) .file-preview-panel.t-panel-slide {
  --panel-translate-x: -24px;
}
:dir(rtl) .file-preview-header svg[class~="lucide-arrow-left"] {
  transform: scaleX(-1);
}
.conversation-panel.browser-panel-active {
  padding-inline-end: 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-block: 0;
  padding-inline: 0 8px;
  background: var(--openbot-bg-sidebar);
}
.remote-desktop-workspace-darwin .remote-desktop-header {
  padding-inline-start: 84px;
}
.remote-desktop-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  flex: 0 1 auto;
  justify-content: flex-end;
  gap: 4px;
  margin-inline-start: 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-lg);
}
.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;
  inset-inline-end: 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-profile-status, .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-profile-status {
  min-width: 0;
  max-width: 240px;
  flex-shrink: 1;
  background: var(--openbot-bg-control);
  color: var(--openbot-text-secondary);
}
.browser-profile-dot {
  display: block;
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-pill);
}
.browser-profile-dot-shared {
  background: var(--openbot-text-muted);
}
.browser-profile-status-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser-profile-status svg, .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:not(:has(.agent-avatar-custom)) {
  filter: brightness(1.08);
}
.agent-settings-avatar-badge {
  position: absolute;
  inset-inline-end: -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: var(--openbot-space-2);
}
.agent-routine-list-item {
  display: grid;
  min-height: 52px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--openbot-space-3);
  align-items: center;
  padding-inline-end: var(--openbot-space-4);
}
.agent-routine-row {
  display: grid;
  width: 100%;
  height: auto;
  align-self: stretch;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: var(--openbot-space-3);
  align-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding-block: var(--openbot-space-2);
  padding-inline: var(--openbot-space-4) 0;
  text-align: start;
}
.agent-routine-row:focus-visible {
  outline: none;
}
.agent-routine-card {
  transition: background-color var(--openbot-duration-hover) ease;
}
.agent-routine-card:has(.agent-routine-row:focus-visible) {
  border-color: var(--openbot-border-strong);
}
.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: 16px;
  height: 16px;
  stroke-width: var(--openbot-icon-stroke);
}
@media (hover: hover) and (pointer: fine) {
  .agent-routine-card:has(.agent-routine-row:hover) {
    background: var(--openbot-hover);
  }
  .agent-routine-list-item > .agent-routine-row:hover:not(:disabled) {
    background: transparent;
  }
}
.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-run-in {
  padding-inline-start: var(--openbot-space-2);
}
.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-routines-footer {
  flex: none;
  padding: 0 15px 15px;
}
.agent-routines-footer:empty {
  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-field-error {
  margin-block: var(--openbot-space-1-5) 0;
  margin-inline: var(--openbot-space-2) 0;
}
.agent-routine-trigger-kind {
  display: grid;
  min-width: 0;
  grid-template-columns: 1fr 1fr;
  gap: var(--openbot-space-1);
  margin: 0 0 var(--openbot-space-2);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  padding: var(--openbot-space-0-5);
}
.agent-routine-trigger-kind-icon {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.agent-routine-when h3, .agent-routine-history h3 {
  margin-block: 0 var(--openbot-space-1-5);
  margin-inline: var(--openbot-space-2) 0;
  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: start;
}
.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-block: var(--openbot-space-2);
  padding-inline: var(--openbot-space-3) var(--openbot-space-2);
}
.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-body {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: var(--openbot-space-2);
}
.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: start;
}
.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-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);
}
.agent-memories-view {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
}
.agent-memories-view .settings-panel-header h2 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-memories-page {
  display: grid;
  width: min(100%, 680px);
  gap: var(--openbot-space-6);
  margin-inline: auto;
}
.agent-memories-page .settings-link-group, .agent-memories-page :is(.agent-memory-state, .agent-memory-limit, .agent-memory-error) {
  margin: 0;
}
.agent-memories-search {
  position: relative;
  min-width: 0;
}
.agent-memories-search-icon {
  position: absolute;
  top: 50%;
  inset-inline-start: calc(var(--openbot-space-3) + 1px);
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
  pointer-events: none;
  stroke-width: var(--openbot-icon-stroke);
  transform: translateY(-50%);
}
.agent-memories-search .agent-memories-search-input {
  width: 100%;
  height: 42px;
  padding-inline: calc(var(--openbot-space-3) + var(--openbot-icon-sm) + var(--openbot-space-2)) var(--openbot-space-3);
  border-color: var(--openbot-border);
  background: var(--openbot-bg-surface);
  font-size: var(--openbot-text-md);
}
.agent-memories-search-input::-webkit-search-cancel-button {
  display: none;
}
.agent-memories-reading {
  display: grid;
  gap: var(--openbot-space-3);
}
.agent-memories-text {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-xl);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.agent-memories-meta {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.agent-memories-actions, .agent-memories-clear {
  display: flex;
  gap: var(--openbot-space-2);
}
.agent-memories-editor {
  display: grid;
  gap: var(--openbot-space-2);
}
.agent-memories-field {
  min-height: 0;
  max-height: 320px;
  field-sizing: content;
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-xl);
}
.agent-memories-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
}
.agent-memories-view-empty {
  display: flex;
  min-height: 456px;
  flex-direction: column;
}
.agent-memories-empty {
  display: grid;
  flex: 1;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) auto;
}
.agent-memories-empty-list {
  min-width: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  mask-image: linear-gradient(var(--openbot-text-primary) 45%, var(--openbot-transparent));
  transition: opacity 700ms var(--openbot-ease-out), filter 700ms var(--openbot-ease-out);
}
.agent-memories-empty-list[data-clearing] {
  opacity: 0;
  filter: blur(3px);
}
.agent-memories-empty-item {
  display: grid;
  grid-template-rows: 1fr;
  animation: agent-memories-empty-open 520ms var(--openbot-ease-out) both;
  transition: opacity 640ms var(--openbot-ease-out);
}
.agent-memories-empty-item > *, .agent-memories-empty-fold > * {
  min-height: 0;
  overflow: hidden;
}
@keyframes agent-memories-empty-open {
  from {
    grid-template-rows: 0fr;
    opacity: 0;
  }
}
.agent-memories-empty-item[data-age="1"] {
  opacity: 0.6;
}
.agent-memories-empty-item[data-age="2"] {
  opacity: 0.4;
}
.agent-memories-empty-item[data-age="3"] {
  opacity: 0.25;
}
.agent-memories-empty-row {
  min-height: 0;
}
.agent-memories-empty-row .agent-memory-row-main {
  height: auto;
}
.agent-memories-empty-fold {
  display: grid;
  transition: grid-template-rows 640ms var(--openbot-ease-out), opacity 640ms var(--openbot-ease-out);
}
.agent-memories-empty-fold-hand {
  grid-template-rows: 1fr;
}
.agent-memories-empty-fold-typed {
  grid-template-rows: 0fr;
  opacity: 0;
}
.agent-memories-empty-item[data-dry] .agent-memories-empty-fold-hand {
  grid-template-rows: 0fr;
  opacity: 0;
}
.agent-memories-empty-item[data-dry] .agent-memories-empty-fold-typed {
  grid-template-rows: 1fr;
  opacity: 1;
}
.agent-memories-hand {
  color: var(--openbot-accent-text);
  font-family: "Bradley Hand", "Noteworthy", "Segoe Print", cursive;
  font-weight: var(--openbot-weight-semibold);
}
.agent-memories-empty-hand {
  display: grid;
  padding-block: var(--openbot-space-0-5);
  font-size: var(--openbot-text-xl);
  line-height: 1.3;
  transform: rotate(-0.6deg);
  transform-origin: left top;
}
.agent-memories-empty-line {
  white-space: nowrap;
  clip-path: inset(-0.4em calc(100% + 0.2em) -0.4em -0.2em);
  animation: agent-memories-empty-write var(--agent-memories-empty-length) linear var(--agent-memories-empty-delay) forwards;
}
@keyframes agent-memories-empty-write {
  to {
    clip-path: inset(-0.4em -0.2em -0.4em -0.2em);
  }
}
:dir(rtl) .agent-memories-empty-hand {
  transform-origin: right top;
}
:dir(rtl) .agent-memories-empty-line {
  clip-path: inset(-0.4em -0.2em -0.4em calc(100% + 0.2em));
}
.agent-memories-empty-meta {
  opacity: 0;
  animation: agent-memories-empty-show 360ms var(--openbot-ease-out) var(--agent-memories-empty-delay) forwards;
}
@keyframes agent-memories-empty-show {
  to {
    opacity: 1;
  }
}
.agent-memories-empty-pitch {
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3) var(--openbot-space-4);
  text-align: center;
}
.agent-memories-empty-title {
  display: grid;
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-3xl);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.agent-memories-empty-title > .agent-memories-empty-lead {
  color: var(--openbot-text-muted);
}
.agent-memories-empty-word {
  line-height: 1;
  clip-path: inset(-0.4em calc(100% + 0.2em) -0.4em -0.2em);
  animation: agent-memories-empty-write 640ms linear 400ms forwards;
}
.agent-memories-empty-lines {
  display: grid;
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
.agent-memories-empty-action {
  margin-top: var(--openbot-space-1);
}
.agent-memories-empty[data-still] :is( .agent-memories-empty-item, .agent-memories-empty-fold, .agent-memories-empty-line, .agent-memories-empty-meta, .agent-memories-empty-word ) {
  animation: none;
  transition: none;
  clip-path: none;
}
.agent-memories-empty[data-still] :is(.agent-memories-empty-line, .agent-memories-empty-meta, .agent-memories-empty-word) {
  opacity: 1;
}
.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-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: start;
}
.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-on-accent);
}
.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-inline-start: 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-session-setting > .ui-select, .agent-session-setting .agent-settings-runtime-row {
  border-radius: inherit;
}
.agent-session-setting-notes {
  display: grid;
  justify-items: start;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-2) var(--openbot-space-3);
}
.agent-session-setting > .agent-session-setting-notes {
  padding-top: 0;
}
.agent-session-setting-notes:empty {
  display: none;
}
.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: start;
}
.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;
}
.agent-folders-entry {
  position: relative;
}
.agent-folders-entry-add-slot {
  flex: none;
  width: 24px;
}
.agent-folders-entry-add {
  position: absolute;
  top: 50%;
  inset-inline-end: calc(var(--openbot-space-3) + 14px + var(--openbot-space-2));
  color: var(--openbot-text-muted);
  transform: translateY(-50%);
}
.agent-folders-entry-add::before {
  position: absolute;
  inset: -8px;
  content: "";
}
.agent-folders-count, .agent-folders-lost {
  font-variant-numeric: tabular-nums;
}
.agent-folders-lost {
  color: var(--openbot-warning-text);
}
.agent-folders-dot {
  margin-inline: calc(var(--openbot-space-1) * -1);
}
.agent-folders-entry, .agent-folders-drop-target {
  outline: 1px dashed transparent;
  outline-offset: -1px;
  transition: outline-color var(--openbot-duration-fast) var(--openbot-ease-out), background-color var(--openbot-duration-fast) var(--openbot-ease-out);
}
.agent-folders-entry[data-dragging], .agent-folders-drop-target[data-dragging] {
  outline-color: var(--openbot-text-muted);
  background-color: var(--openbot-hover);
}
.agent-folders-page {
  display: grid;
  gap: var(--openbot-space-4);
}
.agent-folders-row {
  display: grid;
  grid-auto-columns: auto;
  grid-auto-flow: column;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--openbot-space-2);
  min-height: 48px;
  padding-block: var(--openbot-space-1-5);
  padding-inline: var(--openbot-space-3) var(--openbot-space-1-5);
}
.agent-folders-text {
  display: grid;
  min-width: 0;
}
.agent-folders-name {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-folders-path {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-folders-row[data-missing] .settings-link-icon, .agent-folders-row[data-missing] .agent-folders-path {
  color: var(--openbot-warning-text);
}
.agent-folders-access {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-2);
  padding-block: var(--openbot-space-2);
  padding-inline: var(--openbot-space-3) var(--openbot-space-2);
}
.agent-folders-access-text {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  text-wrap: pretty;
}
.agent-folders-remove {
  position: relative;
  color: var(--openbot-text-muted);
}
.agent-folders-remove::before {
  position: absolute;
  inset: -6px;
  content: "";
}
.agent-folders-add {
  color: var(--openbot-text-secondary);
}
.agent-folders-drop-target[data-dragging] .agent-folders-add {
  color: var(--openbot-text-primary);
}
@media (prefers-reduced-motion: no-preference) {
  .agent-folders-row[data-fresh] {
    animation: agent-folders-row-in var(--openbot-duration-normal) var(--openbot-ease-out) both;
  }
  .agent-folders-chat-drop {
    animation: agent-folders-fade-in var(--openbot-duration-fast) var(--openbot-ease-out) both;
  }
  .agent-folders-row[data-flash], .agent-folders-entry[data-flash] {
    animation: agent-folders-row-flash 900ms var(--openbot-ease-out);
  }
}
@media (prefers-reduced-motion: reduce) {
  .agent-folders-row[data-flash], .agent-folders-entry[data-flash] {
    animation: agent-folders-row-flash 900ms steps(1, end);
  }
}
@keyframes agent-folders-row-flash {
  from, 40% {
    background-color: var(--openbot-hover);
  }
}
@keyframes agent-folders-row-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}
@keyframes agent-folders-fade-in {
  from {
    opacity: 0;
  }
}
.agent-folders-chat-drop {
  position: absolute;
  z-index: 60;
  inset: var(--openbot-space-3);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--openbot-space-3);
  border-radius: var(--openbot-radius-lg);
  background: var(--background);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--background) 70%, transparent);
  }
  pointer-events: none;
  backdrop-filter: blur(3px);
}
.conversation-panel[data-settings-panel] .agent-folders-chat-drop {
  inset-inline-end: calc(var(--settings-panel-width, 360px) + var(--openbot-space-3));
}
.agent-folders-chat-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-6);
  border: 1px dashed var(--openbot-text-muted);
  border-radius: var(--openbot-radius-lg);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
  text-align: center;
  text-wrap: balance;
  transition: border-color var(--openbot-duration-fast) var(--openbot-ease-out), background-color var(--openbot-duration-fast) var(--openbot-ease-out);
}
.agent-folders-chat-zone > span {
  max-width: 28ch;
}
.agent-folders-chat-zone-folder {
  pointer-events: auto;
}
.agent-folders-chat-zone[data-dragging] {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 70%, var(--openbot-text-primary));
  }
  background: var(--openbot-hover);
}
.agent-folders-chat-zone svg {
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--openbot-text-secondary);
  transition: color var(--openbot-duration-fast) var(--openbot-ease-out);
}
.agent-folders-chat-zone[data-dragging] svg {
  color: var(--openbot-text-primary);
}
.host-folder-picker-places {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-1);
  padding: 0 var(--openbot-space-3) var(--openbot-space-2);
}
.host-folder-picker-path {
  margin: 0;
  padding: 0 var(--openbot-space-3) var(--openbot-space-2);
  overflow-wrap: anywhere;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.host-folder-picker .provider-more-list {
  flex: 1 1 auto;
  min-height: 160px;
}
.host-folder-picker-note {
  margin: 0;
  padding: var(--openbot-space-2) var(--openbot-space-3);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.host-folder-picker-footer {
  display: flex;
  flex-shrink: 0;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-2) var(--openbot-space-1) var(--openbot-space-1);
}
.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-inline-start: 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-inline-start: 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-separator {
  color: var(--openbot-text-muted);
}
.routine-segmented {
  display: flex;
  margin-inline-start: 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-block: var(--openbot-space-2) var(--openbot-space-1);
  padding-inline: var(--openbot-space-3) var(--openbot-space-1);
}
.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-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-3) var(--openbot-space-1);
}
: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-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-3) var(--openbot-space-1);
  color: inherit;
  font: inherit;
  text-align: start;
}
.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, .routine-webhook-actions > .ui-icon-button {
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
}
.routine-webhook-field:has(> .routine-webhook-actions) {
  grid-template-columns: minmax(84px, auto) minmax(0, 1fr) minmax(var(--openbot-control-sm), auto);
}
.routine-webhook-actions {
  display: flex;
  align-items: center;
}
.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-card-endpoint {
  display: grid;
  border-bottom: 1px solid var(--openbot-border);
}
.routine-webhook-card-endpoint > .routine-webhook-field, .routine-webhook-card-endpoint > .routine-webhook-note {
  padding-inline-start: 0;
}
.routine-webhook-steps {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.routine-webhook-steps > li {
  display: grid;
  grid-template-columns: var(--openbot-control-sm) minmax(0, 1fr);
  gap: var(--openbot-space-2);
  border-top: 1px solid var(--openbot-border);
  padding: var(--openbot-space-3);
}
.routine-webhook-step-body {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-1-5);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.routine-webhook-step-body > strong {
  font-weight: var(--openbot-weight-medium);
}
.routine-webhook-steps > li[data-disabled] .routine-webhook-step-body > strong {
  color: var(--openbot-text-muted);
}
.routine-webhook-step-marker {
  display: inline-grid;
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
  place-items: 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);
}
.routine-webhook-step-marker[data-done] {
  border-color: var(--openbot-success);
  background: var(--openbot-success-soft);
  color: var(--openbot-success-text);
}
.routine-webhook-step-check {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.routine-webhook-inset {
  min-width: 0;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-sm);
}
.routine-webhook-inset > .routine-webhook-field {
  border-top: 0;
}
.routine-webhook-step-button {
  justify-self: start;
}
.routine-webhook-disclosure {
  justify-self: start;
  margin-inline-start: calc(var(--openbot-space-2) * -1);
  padding-inline: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: inherit;
}
.routine-webhook-disclosure-icon {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.routine-webhook-filter {
  display: grid;
  gap: var(--openbot-space-1);
}
.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-inline-start: 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-block: 0 var(--openbot-space-1);
  margin-inline: var(--openbot-space-1) 0;
  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(560px, calc(100dvh - 16px), var(--kb-popper-content-available-height, 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);
}
:dir(rtl) .routine-calendar-header :is(svg[class~="lucide-chevron-left"], svg[class~="lucide-chevron-right"]), :dir(rtl) .routine-webhook-events-toggle > svg[class~="lucide-chevron-right"], :dir(rtl) svg[class~="lucide-chevron-right"].routine-webhook-disclosure-icon {
  transform: scaleX(-1);
}
.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-inline-start: 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-inline-start: 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-inline-start: 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: start;
  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: start;
}
.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, .routine-planner-empty-board {
  display: grid;
  min-width: 0;
}
.routine-planner-empty > *, .routine-planner-empty-board > * {
  grid-area: 1 / 1;
}
.routine-planner-empty-board {
  pointer-events: none;
  user-select: none;
}
.routine-planner-empty-cells, .routine-planner-empty-runs {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: 10rem;
}
.routine-planner-empty-cells {
  mask-image: radial-gradient(ellipse 36% 36% at 50% 50%, var(--openbot-transparent) 68%, var(--openbot-text-primary) 100%), radial-gradient(ellipse 72% 78% at 50% 50%, var(--openbot-text-primary) 50%, var(--openbot-transparent) 100%);
  mask-composite: intersect;
}
.routine-planner-empty-cell {
  border-top: 1px solid var(--openbot-border);
  border-inline-start: 1px solid var(--openbot-border);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  color: var(--openbot-text-dim);
  font-size: var(--openbot-text-md);
}
.routine-planner-empty-cell[data-outside] {
  opacity: 0.45;
}
.routine-planner-empty-cell[data-today] {
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-semibold);
}
.routine-planner-empty-run {
  display: grid;
  min-width: 0;
  align-self: start;
  justify-items: start;
  gap: var(--openbot-space-2);
  grid-row: var(--routine-planner-empty-row);
  grid-column: var(--routine-planner-empty-column);
  margin-top: calc(var(--openbot-space-8) + var(--openbot-space-1));
  padding-inline: var(--openbot-space-2);
  animation: routine-planner-empty-life var(--routine-planner-empty-life) var(--openbot-ease-out) both;
}
.routine-planner-empty-run > .routine-planner-run {
  width: 100%;
}
.routine-planner-empty-day {
  display: none;
}
.routine-planner-empty-check {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  opacity: 0;
  animation: routine-planner-empty-draw 420ms var(--openbot-ease-out) 380ms forwards;
}
@keyframes routine-planner-empty-life {
  0% {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(10px) scale(0.96);
  }
  8%, 88% {
    opacity: 1;
    filter: blur(0);
    transform: none;
  }
  100% {
    opacity: 0;
    filter: blur(3px);
    transform: translateY(-4px);
  }
}
@keyframes routine-planner-empty-draw {
  from {
    opacity: 1;
  }
  to {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}
.routine-planner-hand {
  color: var(--openbot-accent-text);
  font-family: "Bradley Hand", "Noteworthy", "Segoe Print", cursive;
  font-weight: var(--openbot-weight-semibold);
}
.routine-planner-empty-note {
  display: grid;
  width: fit-content;
  padding-inline: var(--openbot-space-1);
  font-size: var(--openbot-text-xl);
  line-height: 1.3;
  transform: rotate(-1.5deg);
  transform-origin: left top;
}
.routine-planner-empty-line {
  clip-path: inset(-0.4em 100% -0.4em -0.2em);
  animation: routine-planner-empty-write var(--routine-planner-empty-length) linear var(--routine-planner-empty-delay) forwards;
}
@keyframes routine-planner-empty-write {
  to {
    clip-path: inset(-0.4em -0.2em -0.4em -0.2em);
  }
}
.routine-planner-empty-underline {
  width: 100%;
  height: var(--openbot-space-2);
  overflow: visible;
}
.routine-planner-empty-underline path {
  fill: none;
  stroke: currentColor;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
  opacity: 0;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  animation: routine-planner-empty-draw 520ms var(--openbot-ease-out) var(--routine-planner-empty-delay) forwards;
}
.routine-planner-empty-pitch {
  z-index: 1;
  display: grid;
  max-width: 34rem;
  place-self: center;
  justify-items: center;
  gap: var(--openbot-space-4);
  padding: var(--openbot-space-6);
  text-align: center;
}
.routine-planner-empty-title {
  display: grid;
  font-size: var(--openbot-text-display);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.routine-planner-empty-title > .routine-planner-empty-lead {
  color: var(--openbot-text-muted);
}
.routine-planner-empty-done {
  clip-path: inset(-0.4em 100% -0.4em -0.2em);
  animation: routine-planner-empty-write 520ms linear 500ms forwards;
}
.routine-planner-empty-lines {
  display: grid;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-xl);
  line-height: 1.5;
}
.routine-planner-empty-action.ui-button {
  width: 100%;
  max-width: 22rem;
  height: var(--openbot-control-lg);
  margin-top: var(--openbot-space-2);
}
.routine-planner-empty-menu {
  min-width: 14rem;
  max-height: min(520px, calc(100dvh - 16px), var(--kb-popper-content-available-height, 520px));
  overflow-y: auto;
}
.routine-planner-empty[data-still] :is( .routine-planner-empty-run, .routine-planner-empty-check, .routine-planner-empty-line, .routine-planner-empty-underline path, .routine-planner-empty-done ) {
  animation: none;
  clip-path: none;
  stroke-dashoffset: 0;
  opacity: 1;
}
.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;
  }
  .routine-planner-empty > .routine-planner-empty-board {
    grid-area: 2 / 1;
  }
  .routine-planner-empty-pitch {
    padding-inline: 0;
  }
  .routine-planner-empty-title {
    font-size: var(--openbot-text-3xl);
  }
  .routine-planner-empty-lines {
    font-size: var(--openbot-text-lg);
  }
  .routine-planner-empty-cells {
    display: none;
  }
  .routine-planner-empty-runs {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(3, 8rem);
    grid-auto-rows: 0;
  }
  .routine-planner-empty-run {
    width: 100%;
    grid-row: var(--routine-planner-empty-slot);
    grid-column: 1;
    margin-top: 0;
    padding-inline: 0;
  }
  .routine-planner-empty-day {
    display: block;
    color: var(--openbot-text-dim);
    font-size: var(--openbot-text-sm);
  }
  .routine-planner-empty-note {
    font-size: var(--openbot-text-lg);
  }
}
:dir(rtl) .routine-planner-empty-note {
  transform-origin: right top;
}
:dir(rtl) .routine-planner-empty-line {
  clip-path: inset(-0.4em -0.2em -0.4em 100%);
}
:dir(rtl) .routine-planner-identity svg[class~="lucide-arrow-left"], :dir(rtl) .routine-planner-nav :is(svg[class~="lucide-chevron-left"], svg[class~="lucide-chevron-right"]) {
  transform: scaleX(-1);
}
.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-inline-start: 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;
}
:dir(rtl) .chat-action-card-open svg[class~="lucide-chevron-right"] {
  transform: scaleX(-1);
}
.marketplace-suggestion.ui-block-card {
  max-width: 520px;
}
.marketplace-suggestion .marketplace-suggestion-icon {
  width: var(--openbot-control-lg);
  height: var(--openbot-control-lg);
  flex: none;
  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 .marketplace-suggestion-icon > .connector-brand-tile {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.marketplace-suggestion .ui-block-title, .marketplace-suggestion .ui-block-subtitle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.marketplace-suggestion .marketplace-suggestion-name {
  display: inline-block;
  height: auto;
  max-width: 100%;
  overflow: hidden;
  padding: 0;
  color: inherit;
  font: inherit;
  text-overflow: ellipsis;
  vertical-align: top;
  white-space: nowrap;
}
.marketplace-suggestion-controls {
  display: contents;
}
.marketplace-suggestion-question {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  overflow-wrap: anywhere;
}
.marketplace-suggestion-action {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
}
.marketplace-suggestion .marketplace-suggestion-button {
  overflow: clip;
}
.marketplace-suggestion .marketplace-suggestion-button.ui-button[data-state="connected"], .marketplace-suggestion .marketplace-suggestion-button.ui-button[data-state="connected"]:hover {
  border-color: transparent;
  background: var(--openbot-success);
  color: var(--openbot-text-on-light);
  cursor: default;
}
:root[data-openbot-color-scheme="light"] .marketplace-suggestion .marketplace-suggestion-button.ui-button[data-state="connected"] {
  background: var(--openbot-success-text);
}
.marketplace-suggestion-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  justify-items: center;
}
.marketplace-suggestion-layer {
  display: inline-flex;
  grid-area: 1 / 1;
  align-items: center;
  gap: var(--openbot-space-1-5);
  white-space: nowrap;
}
.marketplace-suggestion-button[data-state="connected"] [data-layer="start"], .marketplace-suggestion-button:not([data-state="connected"]) [data-layer="done"] {
  opacity: 0;
}
.marketplace-suggestion-layer > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.marketplace-suggestion-spinner {
  display: inline-flex;
  width: 0;
  margin-inline-end: calc(-1 * var(--openbot-space-1-5));
  opacity: 0;
}
.marketplace-suggestion-button[data-state="busy"] .marketplace-suggestion-spinner {
  width: auto;
  margin-inline-end: 0;
  opacity: 1;
}
.marketplace-suggestion-controls[data-state="connected"] .marketplace-suggestion-dismiss {
  width: 0;
  min-width: 0;
  margin-inline-start: calc(-1 * var(--openbot-space-2));
  overflow: hidden;
  border-width: 0;
  padding: 0;
  opacity: 0;
  visibility: hidden;
}
.marketplace-suggestion-controls[data-motion] .marketplace-suggestion-button.ui-button {
  transition: background-color var(--openbot-duration-slow) var(--openbot-ease-out), color var(--openbot-duration-slow) var(--openbot-ease-out), opacity var(--openbot-duration-normal) var(--openbot-ease-out);
}
.marketplace-suggestion-controls[data-motion] .marketplace-suggestion-layer {
  transition: opacity var(--openbot-duration-normal) var(--openbot-ease-out);
}
@media (prefers-reduced-motion: no-preference) {
  .marketplace-suggestion-controls[data-motion] .marketplace-suggestion-stage {
    transition: width var(--openbot-duration-slow) var(--openbot-ease-out);
  }
  .marketplace-suggestion-controls[data-motion] .marketplace-suggestion-layer {
    transition: opacity var(--openbot-duration-normal) var(--openbot-ease-out), transform var(--openbot-duration-slow) var(--openbot-ease-out);
  }
  .marketplace-suggestion-button[data-state="connected"] [data-layer="start"] {
    transform: translateY(-40%);
  }
  .marketplace-suggestion-button:not([data-state="connected"]) [data-layer="done"] {
    transform: translateY(40%);
  }
  .marketplace-suggestion-controls[data-motion] .marketplace-suggestion-layer > svg path {
    stroke-dasharray: 24 24;
    stroke-dashoffset: -24;
    transition: stroke-dashoffset var(--openbot-duration-overlay) var(--openbot-ease-out) var(--openbot-duration-fast);
  }
  .marketplace-suggestion-controls[data-motion] .marketplace-suggestion-button[data-state="connected"] svg path {
    stroke-dashoffset: 0;
  }
  .marketplace-suggestion-controls[data-motion] .marketplace-suggestion-spinner {
    transform: scale(0.6);
    transition: opacity var(--openbot-duration-normal) var(--openbot-ease-out), transform var(--openbot-duration-normal) var(--openbot-ease-out);
  }
  .marketplace-suggestion-controls[data-motion] .marketplace-suggestion-button[data-state="busy"] .marketplace-suggestion-spinner {
    transform: none;
  }
  .marketplace-suggestion-controls[data-motion] .marketplace-suggestion-dismiss {
    transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out), width var(--openbot-duration-slow) var(--openbot-ease-out), margin var(--openbot-duration-slow) var(--openbot-ease-out), visibility 0s linear var(--openbot-duration-slow);
  }
}
.marketplace-suggestion-unavailable {
  display: flex;
  margin: 0;
  gap: var(--openbot-space-2);
  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);
}
.server-install-card[data-step="expired"] .server-install-card-status {
  color: var(--openbot-warning);
}
.server-install-card-status-text {
  display: inline-block;
}
.server-install-card-tile {
  --server-install-size: var(--openbot-control-lg);
  --server-install-radius: var(--openbot-radius-md);
  --server-install-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  display: grid;
  flex: 0 0 auto;
  width: var(--server-install-size);
  height: var(--server-install-size);
  place-items: center;
  border-radius: var(--server-install-radius);
}
.server-install-card-tile[data-step="expired"] {
  box-sizing: border-box;
  border: 1px solid var(--openbot-border);
  background: var(--openbot-bg-surface-raised);
}
.server-install-card-tile > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.server-install-card-tile[data-step] .server-install-card-face {
  display: grid;
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  place-items: center;
  border-radius: var(--server-install-radius);
}
.server-install-card-tile[data-step] .server-install-card-logo {
  --server-gradient-logo-size: var(--server-install-size);
  --server-gradient-logo-radius: var(--server-install-radius);
  position: relative;
  overflow: hidden;
  animation: server-install-pop-in 520ms var(--server-install-spring) 380ms backwards;
}
.server-install-card-logo > img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.server-install-card-tile:is([data-step="starting"], [data-step="connected"], [data-step="offline"]) .ui-plush-eye {
  animation: ui-plush-squint 220ms var(--openbot-ease-out) forwards;
}
.server-install-card-tile:is([data-step="starting"], [data-step="connected"], [data-step="offline"]) .server-install-card-loader {
  animation: server-install-pop-out 420ms var(--openbot-ease-out) 200ms forwards;
}
.server-install-card-tile[data-step="starting"] .server-install-card-logo {
  animation: server-install-pop-in 520ms var(--server-install-spring) 380ms backwards, server-install-breathe 1.8s ease-in-out 900ms infinite;
}
.server-install-card-tile[data-step="connected"] .server-install-card-logo {
  animation: server-install-pop-in 520ms var(--server-install-spring) 380ms backwards, server-install-settle 420ms var(--server-install-spring);
}
.server-install-card-badge {
  position: absolute;
  right: -5px;
  bottom: -5px;
  display: grid;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  place-items: center;
  border: 2px solid var(--openbot-bg-canvas);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-muted);
  transition: background-color var(--openbot-duration-normal) var(--openbot-ease-out), color var(--openbot-duration-normal) var(--openbot-ease-out);
  animation: server-install-badge-in 360ms var(--server-install-spring) 640ms backwards;
}
.server-install-card-badge[data-step="connected"] {
  background: var(--openbot-success);
  color: var(--openbot-bg-canvas);
}
.server-install-card-badge > svg {
  width: 10px;
  height: 10px;
}
.server-install-card-check * {
  stroke-dasharray: 20;
  animation: server-install-draw 360ms var(--openbot-ease-out) 80ms backwards;
}
.server-install-card-status-text, .server-install-card-action {
  animation: server-install-text-in var(--openbot-duration-slow) var(--openbot-ease-out);
}
.server-install-card-tile[data-revealed][data-step] .server-install-card-face, .server-install-card-tile[data-revealed] .server-install-card-badge, .server-install-card-tile[data-revealed] .server-install-card-check * {
  animation: none;
}
.server-install-card-tile[data-revealed][data-step="starting"] .server-install-card-logo {
  animation: server-install-breathe 1.8s ease-in-out infinite;
}
@keyframes server-install-pop-out {
  30% {
    opacity: 1;
    transform: translateY(-3px) scale(1.06);
  }
  100% {
    opacity: 0;
    transform: scale(0.4);
  }
}
@keyframes server-install-pop-in {
  from {
    opacity: 0;
    transform: scale(0.3);
  }
}
@keyframes server-install-breathe {
  50% {
    opacity: 0.6;
    transform: scale(0.94);
  }
}
@keyframes server-install-settle {
  from {
    opacity: 0.7;
    transform: scale(0.92);
  }
}
@keyframes server-install-badge-in {
  from {
    transform: scale(0);
  }
}
@keyframes server-install-draw {
  from {
    stroke-dashoffset: 20;
  }
}
@keyframes server-install-text-in {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .server-install-card .server-install-card-tile[data-step] .server-install-card-face, .server-install-card .server-install-card-badge, .server-install-card .server-install-card-check *, .server-install-card .server-install-card-status-text, .server-install-card .server-install-card-action {
    animation: none;
    transition: none;
  }
  .server-install-card .server-install-card-tile:is([data-step="starting"], [data-step="connected"], [data-step="offline"]) .server-install-card-loader {
    opacity: 0;
  }
}
.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-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-3) var(--openbot-space-2);
}
.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 {
  max-width: 560px;
  margin: var(--openbot-space-4) 0 0;
}
.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);
}
.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: start;
}
.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);
}
:dir(rtl) .task-list-chevron {
  transform: rotate(90deg);
}
.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);
}
:dir(rtl) .task-list-item {
  transform-origin: right top;
}
.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);
}
:dir(rtl) .task-list-item-text::after {
  transform-origin: right center;
}
.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-inline-start: 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: start;
}
.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-dock {
  position: relative;
  z-index: 3;
  width: calc(100% - 2 * var(--openbot-space-3));
  max-width: var(--conversation-column-width, none);
  height: 0;
  flex: 0 0 auto;
  margin-inline: auto;
}
.subagents-dock .subagents-dock-bar {
  position: absolute;
  top: var(--openbot-space-1);
  inset-inline-start: 0;
  display: flex;
  width: var(--message-wide-bubble-width);
  height: auto;
  align-items: center;
  gap: var(--openbot-space-2);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-canvas);
  padding: var(--openbot-space-1-5) var(--openbot-space-3);
  color: inherit;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-md);
  text-align: start;
}
.subagents-dock .subagents-dock-bar:hover {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-canvas);
}
.subagents-dock-live {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
}
.subagents-dock-chevron {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  rotate: 90deg;
}
.subagents-list {
  display: flex;
  width: var(--message-wide-bubble-width);
  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: start;
  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-inline-start: 2px solid var(--openbot-border-strong);
  padding-inline-start: 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;
  }
}
:dir(rtl) svg[class~="lucide-chevron-right"].subagents-group-chevron {
  transform: scaleX(-1);
}
:dir(rtl) .subagents-group-header[aria-expanded="true"] svg[class~="lucide-chevron-right"].subagents-group-chevron {
  rotate: -90deg;
}
:dir(rtl) svg[class~="lucide-chevron-right"].subagents-row-chevron {
  transform: scaleX(-1);
}
.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-inline-end: var(--openbot-space-2);
  color: var(--openbot-text-muted);
}
.awaiting-replies-item {
  align-items: center;
}
.awaiting-replies-avatar {
  --agent-avatar-optical-offset: calc(var(--openbot-icon-md) * -0.14);
  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-wait] .awaiting-replies-state-label {
  color: var(--openbot-warning-text);
}
.awaiting-replies-open, .awaiting-replies-steer, .awaiting-replies-stop {
  flex: 0 0 auto;
}
.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: start;
  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;
}
.conversation-model-pending {
  flex: none;
  gap: 4px;
}
.conversation-model-pending svg {
  width: 12px;
  height: 12px;
}
.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-block: 0;
  padding-inline: 8px 9px;
  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-border-focus);
  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-inline-end: var(--openbot-space-1-5);
  content: "·";
}
.conversation-header .provider-model-trigger {
  interpolate-size: allow-keywords;
}
.conversation-header .provider-model-trigger :is(.provider-model-trigger-name, .provider-model-trigger-effort) {
  overflow: hidden;
  font-size: var(--openbot-text-sm);
  transition: width var(--openbot-duration-normal) var(--openbot-ease-out), margin var(--openbot-duration-normal) var(--openbot-ease-out), opacity var(--openbot-duration-normal) var(--openbot-ease-out);
}
.conversation-header[data-model-fit] .provider-model-trigger-effort, .conversation-header[data-model-fit="icon"] .provider-model-trigger-name, .conversation-header:where(:has(.agent-threads-header:not([data-mode="tabs"]))) .provider-model-trigger :is(.provider-model-trigger-name, .provider-model-trigger-effort) {
  width: 0;
  margin-inline-start: calc(var(--openbot-space-1-5) * -1);
  opacity: 0;
}
.conversation-header[data-model-measure] .provider-model-trigger :is(.provider-model-trigger-name, .provider-model-trigger-effort) {
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .conversation-header .provider-model-trigger :is(.provider-model-trigger-name, .provider-model-trigger-effort) {
    transition: none;
  }
}
.provider-model-trigger:where(:not(.provider-model-trigger-field)):has(.provider-model-trigger-fast) {
  max-width: 296px;
}
.provider-model-trigger-fast svg {
  width: 12px;
  height: 12px;
  margin-inline-end: 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;
  inset-inline-start: 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-block: 0;
  padding-inline: 12px 11px;
  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-inline-start: 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-sheet-inset);
  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-inline-end: 1px solid var(--openbot-border);
  background: var(--provider-model-rail-bg);
  padding: 9px 7px;
}
.provider-model-rail-tabs {
  display: flex;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-1);
  overflow-y: auto;
  scrollbar-width: none;
  margin: -5px;
  padding: 5px;
}
.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);
  inset-inline-end: 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;
  inset-inline-end: -3px;
  bottom: -3px;
  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-rail-account svg {
  width: 11px;
  height: 11px;
  stroke-width: 2.75;
}
.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-block: var(--openbot-space-1-5) var(--openbot-space-2);
  padding-inline: var(--ui-menu-inset) 0;
}
.provider-model-heading-text {
  flex: 1 1 auto;
  min-width: 0;
  padding-inline-end: 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-heading-limited {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--openbot-space-1-5);
}
.provider-model-heading-limited > span {
  grid-column: 1 / -1;
}
.provider-model-limit {
  display: block;
  justify-self: start;
  max-width: 100%;
  height: auto;
  padding: 1px var(--openbot-space-1-5);
  color: var(--openbot-danger-text);
  line-height: 15px;
  text-overflow: ellipsis;
}
.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;
  grid-template-columns: minmax(0, 1fr);
  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-block: var(--ui-menu-padding) 0;
  padding-inline: calc(var(--ui-menu-padding) + var(--ui-menu-inset)) var(--ui-menu-padding);
  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-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-inline-start: 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-speed-content {
  width: 300px;
}
.provider-model-speed-item .ui-select-item-label {
  display: flex;
  flex-direction: column;
  white-space: normal;
}
.provider-model-speed-name {
  color: var(--openbot-text-primary);
}
.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-block: var(--openbot-space-1-5);
  padding-inline: calc(var(--ui-menu-inset) + var(--openbot-icon-md) + var(--openbot-space-2)) var(--ui-menu-inset);
  color: var(--openbot-text-primary);
  cursor: pointer;
  text-align: start;
  transition: background-color var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease;
}
.provider-model-option::before {
  position: absolute;
  top: 50%;
  inset-inline-start: 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-wrap: anywhere;
  text-wrap: pretty;
  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-older {
  color: var(--openbot-text-secondary);
}
.provider-model-older::before {
  content: none;
}
.provider-model-older.ui-button {
  height: auto;
  font: inherit;
}
.provider-model-older[aria-expanded="true"] .provider-model-chevron {
  transform: rotate(180deg);
}
.provider-model-option-name > .provider-model-option-settings {
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  white-space: nowrap;
}
.provider-model-check {
  position: absolute;
  top: 50%;
  inset-inline-start: 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:not(.provider-model-trigger-field) .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 {
    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;
  inset-inline-end: 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-list[data-pushing] {
  overflow-y: clip;
}
.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-lg);
}
.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: start;
}
.unread-messages-mark-read {
  position: relative;
  z-index: 1;
  margin-inline-start: 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;
}
.unread-messages-divider[data-arrive] span {
  animation: unread-divider-badge-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}
.unread-messages-divider[data-arrive] hr {
  animation: unread-divider-line-in var(--openbot-duration-toast-enter) var(--openbot-ease-out) 60ms both;
}
.unread-messages-divider[data-arrive] hr:first-child {
  transform-origin: right center;
}
.unread-messages-divider[data-arrive] hr:last-child {
  transform-origin: left center;
}
@keyframes unread-divider-badge-in {
  from {
    opacity: 0;
    transform: scale(0.9);
    filter: blur(2px);
  }
}
@keyframes unread-divider-line-in {
  from {
    opacity: 0;
    transform: scaleX(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .unread-messages-divider[data-arrive] :is(hr, span) {
    animation: none;
  }
}
.time-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 656px;
  height: 24px;
  margin: var(--openbot-space-2) auto var(--openbot-space-4);
  padding: 4px 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
  text-align: center;
}
:dir(rtl) .unread-messages-divider[data-arrive] hr:first-child {
  transform-origin: left center;
}
:dir(rtl) .unread-messages-divider[data-arrive] hr:last-child {
  transform-origin: right center;
}
.chat-scroll-rail {
  --chat-scroll-rail-pitch: var(--openbot-space-2);
  --chat-scroll-rail-hit: clamp(12px, var(--chat-scroll-rail-inset, 20px), 20px);
  --chat-scroll-rail-ease: var(--openbot-ease-out);
  --chat-scroll-rail-quick: var(--openbot-duration-overlay);
  position: sticky;
  z-index: 3;
  top: 0;
  pointer-events: none;
}
.chat-scroll-rail-nav {
  position: absolute;
  top: 50%;
  inset-inline-end: calc(-1 * var(--chat-scroll-rail-inset, 0px));
  width: calc(var(--chat-scroll-rail-hit) + var(--openbot-space-2));
  height: min(64%, 600px);
  display: flex;
  flex-direction: column;
  transform: translateY(-50%);
}
.chat-scroll-rail-track {
  position: relative;
  transition: opacity var(--chat-scroll-rail-quick) ease;
  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;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.chat-scroll-rail-item {
  flex: none;
  height: var(--chat-scroll-rail-pitch);
  display: flex;
}
.chat-scroll-rail .chat-scroll-rail-link {
  position: relative;
  flex: none;
  width: var(--chat-scroll-rail-hit);
  height: auto;
  margin-inline-start: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: none;
  pointer-events: auto;
}
@media (hover: hover) {
  .chat-scroll-rail:not([data-near]) .chat-scroll-rail-nav:not(:has(:focus-visible)) .chat-scroll-rail-track {
    opacity: 0;
  }
}
.chat-scroll-rail-tick {
  position: absolute;
  top: 50%;
  inset-inline-end: var(--openbot-space-1);
  width: var(--openbot-space-1);
  height: 2px;
  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) 18%, transparent);
  }
  transform: translateY(-50%);
  transition: width var(--chat-scroll-rail-quick) var(--chat-scroll-rail-ease), background-color var(--chat-scroll-rail-quick) ease;
}
.chat-scroll-rail-item[data-state="read"] .chat-scroll-rail-tick {
  background: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-primary) 36%, transparent);
  }
}
.chat-scroll-rail-item[data-state="active"] .chat-scroll-rail-tick {
  width: var(--openbot-space-2);
  background: var(--openbot-text-secondary);
}
.chat-scroll-rail-nav:is(:hover, :has(:focus-visible)) .chat-scroll-rail-tick {
  width: var(--openbot-space-2);
}
.chat-scroll-rail-nav:is(:hover, :has(:focus-visible)) :is(.chat-scroll-rail-item[data-open] + * + *, .chat-scroll-rail-item:has(+ * + [data-open])) .chat-scroll-rail-tick {
  width: 10px;
}
.chat-scroll-rail-nav:is(:hover, :has(:focus-visible)) :is( .chat-scroll-rail-item[data-state="active"], .chat-scroll-rail-item[data-open] + *, .chat-scroll-rail-item:has(+ [data-open]) ) .chat-scroll-rail-tick {
  width: var(--openbot-space-3);
}
.chat-scroll-rail-nav:is(:hover, :has(:focus-visible)) .chat-scroll-rail-item[data-open] .chat-scroll-rail-tick {
  width: var(--openbot-space-4);
  background: var(--openbot-text-primary);
}
.chat-scroll-rail-card {
  --chat-scroll-rail-quick: var(--openbot-duration-overlay);
  --chat-scroll-rail-ease: var(--openbot-ease-out);
  position: fixed;
  z-index: var(--openbot-layer-tooltip);
  top: var(--chat-scroll-rail-card-top);
  right: calc(100vw - var(--chat-scroll-rail-card-left) + var(--openbot-space-2));
  width: max-content;
  max-width: min(300px, 60vw);
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-3);
  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) 8%, transparent);
  }
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-glass);
  backdrop-filter: blur(var(--openbot-space-4));
  font-size: var(--openbot-text-md);
  line-height: 18px;
  pointer-events: none;
  opacity: 0;
  filter: blur(var(--openbot-space-1));
  transform: translateY(-50%) translateX(var(--openbot-space-1));
  transition: opacity var(--chat-scroll-rail-quick) ease, filter var(--chat-scroll-rail-quick) ease, transform var(--chat-scroll-rail-quick) var(--chat-scroll-rail-ease);
}
:dir(rtl) .chat-scroll-rail-card {
  right: auto;
  left: calc(var(--chat-scroll-rail-card-right) + var(--openbot-space-2));
  transform: translateY(-50%) translateX(calc(-1 * var(--openbot-space-1)));
}
.chat-scroll-rail-card[data-open] {
  opacity: 1;
  filter: blur(0);
  transform: translateY(-50%);
}
.chat-scroll-rail-card-title {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-scroll-rail-card-reply {
  display: -webkit-box;
  overflow: hidden;
  color: var(--openbot-text-muted);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
@media (prefers-reduced-motion: reduce) {
  .chat-scroll-rail .chat-scroll-rail-track, .chat-scroll-rail .chat-scroll-rail-tick, .chat-scroll-rail-card.chat-scroll-rail-card {
    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, .message-author-gutter, .chat-visual-with-author {
  --message-author-face-size: var(--openbot-space-8);
  --message-author-column: calc(var(--message-author-face-size) + var(--openbot-space-1));
}
.message-entry-with-author {
  display: grid;
  grid-template-columns: var(--message-author-column) 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-author-avatar {
  width: var(--message-author-column);
  height: var(--message-author-column);
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  overflow: visible;
  border: 0;
  background: transparent;
}
.message-author-avatar .agent-avatar {
  --agent-avatar-optical-offset: -4px;
  width: var(--message-author-face-size);
  height: var(--message-author-face-size);
}
.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: var(--message-author-column);
  flex: 0 0 var(--message-author-column);
}
.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 {
  transform-origin: left bottom;
  animation: message-bubble-in 280ms cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
}
.message-entry-animated.message-entry-user {
  transform-origin: right bottom;
}
@media (prefers-reduced-motion: no-preference) {
  .message-entry-animated.message-entry-user {
    animation: message-sent-in 240ms 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-stack {
  display: grid;
  width: 100%;
  min-width: 0;
  justify-items: end;
  gap: var(--openbot-space-1);
}
.message-media-before {
  width: min(420px, 100%);
}
.message-media-before:has(.image-gallery) {
  width: min(520px, 100%);
}
.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;
}
.message-entry-actions-beside .message-shell {
  flex-wrap: wrap;
  row-gap: var(--openbot-space-1);
}
@supports (position-anchor: --message-bubble) and (anchor-scope: --message-bubble) {
  .message-entry-actions-beside {
    anchor-scope: --message-bubble;
  }
  .message-entry-actions-beside .message-shell .ui-bubble {
    anchor-name: --message-bubble;
  }
  .message-entry-actions-beside .message-author-avatar {
    position: absolute;
    bottom: anchor(--message-bubble bottom);
    left: 0;
  }
}
.message-steps {
  min-width: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--openbot-duration-hover) ease;
}
.message-steps > .agent-steps {
  margin-bottom: 0;
}
.message-steps .agent-steps .agent-steps-header {
  height: 24px;
  margin-inline-start: 0;
  padding-block: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  transition: background var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease;
}
.message-steps .agent-steps .agent-steps-header:is(:hover, :focus-visible) {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
  outline: none;
}
.message-steps .agent-steps-header :is(.agent-steps-duration, .agent-steps-chevron) {
  color: inherit;
  transition: color var(--openbot-duration-hover) ease, rotate var(--openbot-duration-fast) var(--openbot-ease-out);
}
.message-steps .agent-steps-summary {
  font-weight: var(--openbot-weight-regular);
}
.message-entry:hover .message-steps, .message-entry:focus-within .message-steps, .message-entry:has(.message-actions-open) .message-steps {
  opacity: 1;
  pointer-events: auto;
}
@media (hover: none), (pointer: coarse) {
  .message-actions, .message-time, .message-steps {
    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 {
  --message-bubble-tint: var(--message-author-color, var(--openbot-accent));
  --message-bubble-tint-amount: 22%;
}
.ui-bubble.message-bubble-colored {
  --message-bubble-tint: var(--message-chat-color);
  --message-bubble-tint-amount: 30%;
}
:root[data-openbot-color-scheme="light"] .ui-bubble.message-bubble-colored {
  --message-bubble-tint-amount: 22%;
}
.ui-bubble:is(.message-bubble-member, .message-bubble-colored) {
  --message-plain-canvas: var(--openbot-bg-canvas);
  --message-plain-sidebar: var(--openbot-bg-sidebar);
  --message-plain-surface: var(--openbot-bg-surface);
  --message-plain-surface-raised: var(--openbot-bg-surface-raised);
  --message-plain-control: var(--openbot-bg-control);
  --message-plain-control-hover: var(--openbot-bg-control-hover);
  --message-plain-control-active: var(--openbot-bg-control-active);
  --message-bubble-base: var(--openbot-bg-surface-raised);
}
.message-entry-agent .ui-bubble-variant-muted.message-bubble-colored {
  --message-bubble-base: var(--openbot-bg-surface);
}
.ui-bubble.message-bubble-member > .ui-bubble-content {
  background: var(--message-bubble-tint);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix( in srgb, var(--message-bubble-tint) var(--message-bubble-tint-amount), var(--message-bubble-base) );
  }
}
.message-entry-user .ui-bubble.message-bubble-colored > .ui-bubble-content, .message-entry-agent .ui-bubble-variant-muted.message-bubble-colored > .ui-bubble-content {
  --message-surface-lift: 5%;
  --openbot-bg-canvas: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --openbot-bg-canvas: color-mix(
    in srgb,
    var(--openbot-text-primary) var(--message-surface-lift),
    color-mix(in srgb, var(--message-bubble-tint) var(--message-bubble-tint-amount), var(--message-plain-canvas))
  );
  }
  --openbot-bg-sidebar: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --openbot-bg-sidebar: color-mix(
    in srgb,
    var(--openbot-text-primary) var(--message-surface-lift),
    color-mix(in srgb, var(--message-bubble-tint) var(--message-bubble-tint-amount), var(--message-plain-sidebar))
  );
  }
  --openbot-bg-surface: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --openbot-bg-surface: color-mix(
    in srgb,
    var(--openbot-text-primary) var(--message-surface-lift),
    color-mix(in srgb, var(--message-bubble-tint) var(--message-bubble-tint-amount), var(--message-plain-surface))
  );
  }
  --openbot-bg-surface-raised: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --openbot-bg-surface-raised: color-mix(
    in srgb,
    var(--openbot-text-primary) var(--message-surface-lift),
    color-mix(
      in srgb,
      var(--message-bubble-tint) var(--message-bubble-tint-amount),
      var(--message-plain-surface-raised)
    )
  );
  }
  --openbot-bg-control: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --openbot-bg-control: color-mix(
    in srgb,
    var(--openbot-text-primary) var(--message-surface-lift),
    color-mix(in srgb, var(--message-bubble-tint) var(--message-bubble-tint-amount), var(--message-plain-control))
  );
  }
  --openbot-bg-control-hover: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --openbot-bg-control-hover: color-mix(
    in srgb,
    var(--openbot-text-primary) var(--message-surface-lift),
    color-mix(in srgb, var(--message-bubble-tint) var(--message-bubble-tint-amount), var(--message-plain-control-hover))
  );
  }
  --openbot-bg-control-active: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --openbot-bg-control-active: color-mix(
    in srgb,
    var(--openbot-text-primary) var(--message-surface-lift),
    color-mix(
      in srgb,
      var(--message-bubble-tint) var(--message-bubble-tint-amount),
      var(--message-plain-control-active)
    )
  );
  }
  background: var(--message-bubble-tint);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix( in srgb, var(--message-bubble-tint) var(--message-bubble-tint-amount), var(--message-bubble-base) );
  }
}
.ui-bubble.message-bubble-colored :is([data-popper-positioner], [role="dialog"], [role="menu"], [role="listbox"], [role="tooltip"]) {
  --openbot-bg-canvas: var(--message-plain-canvas);
  --openbot-bg-sidebar: var(--message-plain-sidebar);
  --openbot-bg-surface: var(--message-plain-surface);
  --openbot-bg-surface-raised: var(--message-plain-surface-raised);
  --openbot-bg-control: var(--message-plain-control);
  --openbot-bg-control-hover: var(--message-plain-control-hover);
  --openbot-bg-control-active: var(--message-plain-control-active);
}
:is( .message-entry-user .ui-bubble.message-bubble-colored > .ui-bubble-content, .message-entry-agent .ui-bubble-variant-muted.message-bubble-colored > .ui-bubble-content ) :is(.attachment-file-visual, .attachment-reference-visual):not(.message-attachment[data-media] *) {
  background: linear-gradient(var(--file-reference-soft) 0 0), var(--message-plain-control);
}
.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-bg-control-hover);
  color: var(--openbot-text-primary);
  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-inline-end: 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%;
  transform-origin: left bottom;
  animation: message-bubble-in 280ms cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
}
.agent-activity-slot[data-reserved="true"] {
  min-height: 52px;
}
.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-slot[data-reserved="true"] > .agent-activity-entry[data-plain="true"], .agent-activity-slot[data-reserved="true"] > .agent-activity-entry[data-plain="true"][data-state="exiting"] {
  grid-template-rows: 1fr;
  transition: none;
}
.agent-activity-content {
  min-height: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: clip;
  overflow-clip-margin: var(--openbot-space-3);
  padding-block: var(--openbot-space-3) 8px;
  padding-inline: 8px 0;
  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: calc(32px * -0.14);
  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;
}
.agent-activity-entry .agent-activity-avatar {
  transform-origin: center bottom;
  animation: agent-activity-avatar-in 420ms cubic-bezier(0.34, 1.45, 0.64, 1) backwards;
}
@keyframes agent-activity-avatar-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.5);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.agent-activity-entry[data-state="exiting"] .agent-activity-avatar {
  transform: translateY(4px) scale(0.6);
}
.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-entry[data-waiting="true"] .agent-activity-label {
  animation: none;
  background: none;
  color: var(--openbot-text-secondary);
  -webkit-text-fill-color: currentColor;
}
.agent-activity-entry[data-plain="true"]:not([data-waiting="true"]) .agent-activity-label {
  background: linear-gradient( 90deg, var(--openbot-text-primary) 0%, var(--openbot-text-primary) 25%, var(--openbot-text-primary) 60%, var(--openbot-text-primary) 75%, var(--openbot-text-primary) 100% );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient( 90deg, color-mix(in srgb, var(--openbot-text-primary) 40%, transparent) 0%, color-mix(in srgb, var(--openbot-text-primary) 40%, transparent) 25%, var(--openbot-text-primary) 60%, color-mix(in srgb, var(--openbot-text-primary) 40%, transparent) 75%, color-mix(in srgb, var(--openbot-text-primary) 40%, transparent) 100% );
  }
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  animation: agent-activity-label-enter 350ms cubic-bezier(0.2, 0.8, 0.3, 1) backwards, agent-activity-label-shine 2.2s steps(60, end) infinite;
}
.agent-activity-entry[data-plain="true"][data-waiting="true"] .agent-activity-label {
  animation: agent-activity-label-enter 350ms cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
}
@keyframes agent-activity-label-enter {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
}
@keyframes agent-activity-label-shine {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}
@keyframes agent-activity-label-fade {
  from {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .agent-activity-entry[data-plain="true"] .agent-activity-label, .agent-activity-entry[data-plain="true"]:not([data-waiting="true"]) .agent-activity-label {
    animation: agent-activity-label-fade 120ms ease-out backwards;
  }
}
.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);
}
.ui-button.chat-action-routine-thread {
  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: start;
}
.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: start;
  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-routing-targets {
  display: inline-flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.chat-action-routing-separator {
  margin-inline-start: calc(-1 * var(--openbot-space-1-5));
  white-space: pre;
}
.chat-action-target-entering {
  transform-origin: left center;
  animation: message-bubble-in 280ms cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
}
.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, .chat-action-marker-channel-change .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-message-text {
  align-self: stretch;
  margin-block: var(--openbot-space-2);
  text-align: start;
}
.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-inline-start: -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;
}
:root {
  --message-wide-bubble-width: min(100%, max(720px, 70%), 1200px);
  --message-narrow-bubble-width: min(92%, max(420px, 50%), 800px);
}
.message-entry-agent .ui-bubble {
  max-width: var(--message-wide-bubble-width);
}
.message-entry .ui-bubble:has(.image-generation) {
  width: min(420px, 100%);
  max-width: min(420px, 100%);
}
.message-entry .ui-bubble:has(.image-gallery) {
  width: min(520px, 100%);
  max-width: min(520px, 100%);
}
.message-entry-agent .ui-bubble-variant-ghost:has(:is(.image-generation, .image-gallery, .message-code-block, .message-data-table-scroll)) > .ui-bubble-content {
  width: 100%;
}
.message-entry-user .ui-bubble:has(:is(.image-generation, .image-gallery)) > .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;
  inset-inline-end: 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: start;
}
.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;
  inset-inline-end: 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;
  }
}
.pending-send-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.pending-send-label {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  color: var(--openbot-danger-text);
}
.pending-send-label:not(:empty) {
  margin-inline-end: var(--openbot-space-1);
}
.pending-send-label > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: none;
}
.pending-send-error {
  color: var(--openbot-text-muted);
  overflow-wrap: anywhere;
}
.pending-send-error::before {
  content: "·";
  margin-inline-end: var(--openbot-space-1);
}
.message-entry-user.message-entry-actions-beside .message-stack:not(:has(.message-media-before)) {
  width: auto;
  max-width: min(80%, 720px);
  flex: 0 1 auto;
}
.message-entry-user.message-entry-actions-beside .message-stack:not(:has(.message-media-before)) > .ui-bubble {
  max-width: 100%;
}
.message-entry-user.message-entry-actions-beside .message-stack:not(:has(.message-media-before)) + .message-action-row {
  order: -1;
}
.virtual-chat-row[data-grouped="sender"] > .message-entry-agent:first-child .message-shell > .ui-bubble > .ui-bubble-content {
  border-start-start-radius: var(--openbot-radius-sm);
}
.virtual-chat-row[data-grouped="sender"] > .message-entry-user:first-child .message-stack > .ui-bubble:first-child > .ui-bubble-content {
  border-start-end-radius: var(--openbot-radius-sm);
}
.virtual-chat-row:has(+ .virtual-chat-row[data-grouped="sender"] > .message-entry-agent:first-child) > .message-entry-agent:last-child .message-shell > .ui-bubble > .ui-bubble-content {
  border-end-start-radius: var(--openbot-radius-sm);
}
.virtual-chat-row:has(+ .virtual-chat-row[data-grouped="sender"] > .message-entry-user:first-child) > .message-entry-user:last-child .message-stack > .ui-bubble:last-child > .ui-bubble-content {
  border-end-end-radius: var(--openbot-radius-sm);
}
.agent-activity-body {
  min-height: 0;
  overflow: clip;
  overflow-clip-margin: var(--openbot-space-3);
}
.agent-activity-entry[data-state="exiting"] .agent-activity-body {
  overflow-clip-margin: 0;
}
.agent-activity-content .agent-steps-toggle, .agent-activity-steps {
  pointer-events: auto;
}
.agent-activity-content .agent-steps-toggle {
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
}
.agent-activity-content .agent-steps-toggle[aria-expanded="true"]:not(:hover) {
  background: transparent;
}
.agent-activity-steps {
  padding-block: 0 var(--openbot-space-2);
  padding-inline: var(--openbot-space-6) 0;
}
.agent-steps-chevron {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  transition: rotate var(--openbot-duration-fast) var(--openbot-ease-out);
}
.agent-steps-toggle[aria-expanded="true"] .agent-steps-chevron {
  rotate: 180deg;
}
.agent-steps-header[aria-expanded="true"] .agent-steps-chevron {
  rotate: 90deg;
}
.agent-steps {
  display: grid;
  justify-items: start;
  margin-bottom: var(--openbot-space-1);
}
.agent-steps .agent-steps-header {
  display: flex;
  height: auto;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-inline-start: 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: start;
}
.agent-steps .agent-steps-header[aria-expanded="true"]:not(:hover) {
  background: transparent;
  color: inherit;
}
.agent-step-icon {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
}
.agent-steps-summary {
  overflow: hidden;
  font-weight: var(--openbot-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-steps-failed {
  flex: 0 0 auto;
  color: var(--openbot-danger-text);
  font-variant-numeric: tabular-nums;
}
.agent-steps-duration {
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
.agent-steps-panel {
  display: grid;
  width: 100%;
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows var(--openbot-duration-overlay) var(--openbot-ease-out), opacity var(--openbot-duration-normal) var(--openbot-ease-out);
}
@starting-style {
  .agent-steps-panel {
    grid-template-rows: 0fr;
    opacity: 0;
  }
}
.agent-steps-viewport {
  max-height: 220px;
  overflow: hidden;
  padding-inline-start: var(--openbot-space-3);
  border-inline-start: 1px solid var(--openbot-border);
}
.agent-steps-viewport[data-scrolls] {
  overflow-y: auto;
}
.agent-steps-panel > .agent-steps-viewport {
  min-height: 0;
  margin-inline-start: var(--openbot-space-3);
}
.agent-steps-list {
  display: grid;
  gap: var(--openbot-space-1);
  margin: 0;
  padding: var(--openbot-space-1-5) 0;
  list-style: none;
  transition: transform var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.agent-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;
  animation: message-in var(--openbot-duration-normal) var(--openbot-ease-out) both;
}
.agent-step[data-focused] {
  border-radius: var(--openbot-radius-xs);
  animation: agent-step-picked calc(var(--openbot-duration-overlay) * 6) var(--openbot-ease-out) both;
}
@keyframes agent-step-picked {
  from {
    background: var(--openbot-hover);
  }
  to {
    background: transparent;
  }
}
.agent-step .agent-step-icon {
  margin-top: 2px;
}
.agent-step[data-kind="thinking"] .agent-step-text {
  color: var(--openbot-text-muted);
  font-style: italic;
}
.agent-step-text.agent-activity-label {
  display: inline;
  -webkit-line-clamp: unset;
}
.agent-step-memory {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0 var(--openbot-space-2);
  color: var(--openbot-text-primary);
}
.agent-step-memory-action, .agent-step-memory-previous, .agent-step-memory[data-action="forgotten"] s {
  color: var(--openbot-text-muted);
}
.agent-step-failed {
  display: grid;
  min-width: 0;
  flex: 1 1 auto;
  justify-items: start;
}
.agent-step .agent-step-error-toggle {
  display: inline-flex;
  height: auto;
  align-items: center;
  gap: var(--openbot-space-1);
  margin-inline-start: calc(-1 * var(--openbot-space-1));
  border-radius: var(--openbot-radius-xs);
  padding: 0 var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: inherit;
  font-weight: var(--openbot-weight-regular);
  line-height: inherit;
}
.agent-step-error-toggle[aria-expanded="true"] .agent-steps-chevron {
  rotate: 90deg;
}
.agent-step-error {
  max-height: 160px;
  justify-self: stretch;
  margin: var(--openbot-space-1) 0 0;
  overflow: auto;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
@media (prefers-reduced-motion: reduce) {
  .agent-steps-chevron, .agent-steps-panel, .agent-steps-list {
    transition: none;
  }
  .agent-step {
    animation: none;
  }
}
:dir(rtl) svg[class~="lucide-chevron-right"].agent-steps-chevron {
  transform: scaleX(-1);
}
:dir(rtl) .agent-steps-header[aria-expanded="true"] svg[class~="lucide-chevron-right"].agent-steps-chevron, :dir(rtl) .agent-step-error-toggle[aria-expanded="true"] svg[class~="lucide-chevron-right"].agent-steps-chevron {
  rotate: -90deg;
}
.trace {
  --trace-surface: var(--openbot-bg-surface);
  --trace-name-width: min(260px, 45cqw);
  --trace-label-room: min(150px, 25cqw);
  --trace-lane-pad: var(--openbot-space-3);
  --trace-row-height: 36px;
  --trace-bar-height: 16px;
  --trace-hue: var(--openbot-text-muted);
  display: flex;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  background: var(--trace-surface);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.trace-header {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  padding-block: var(--openbot-space-2);
  padding-inline: var(--openbot-space-4) var(--openbot-space-2);
  border-bottom: 1px solid var(--openbot-border);
}
.trace-title {
  flex: 1 1 auto;
  margin: 0;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-md);
}
.ui-select.trace-select {
  width: auto;
  flex: 0 0 auto;
}
.trace-select .trace-select-trigger {
  width: auto;
  gap: var(--openbot-space-1);
  padding-inline: var(--openbot-space-2) var(--openbot-space-1-5);
  font-variant-numeric: tabular-nums;
}
.trace-search {
  position: relative;
  width: min(240px, 100%);
}
.trace-search-icon {
  position: absolute;
  top: 50%;
  inset-inline-start: var(--openbot-space-2);
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  color: var(--openbot-text-muted);
  translate: 0 -50%;
  pointer-events: none;
}
.trace-search .trace-search-input {
  width: 100%;
  padding-inline: calc(var(--openbot-space-2) * 2 + var(--openbot-icon-xs)) var(--openbot-space-8);
}
.trace-search .trace-search-input:focus-visible {
  border-color: var(--openbot-text-muted);
  box-shadow: none;
  outline: none;
}
.trace-search-input::-webkit-search-cancel-button {
  display: none;
}
.trace-search-kbd {
  position: absolute;
  top: 50%;
  inset-inline-end: var(--openbot-space-1-5);
  translate: 0 -50%;
  pointer-events: none;
}
.trace-totals {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  margin-block: 0;
  margin-inline: 0 -1px;
}
.trace-total {
  display: grid;
  flex: 1 1 96px;
  gap: var(--openbot-space-0-5);
  min-width: 0;
  padding: var(--openbot-space-2) var(--openbot-space-3);
  border-inline-end: 1px solid var(--openbot-border);
  border-bottom: 1px solid var(--openbot-border);
}
.trace-total-label {
  overflow: hidden;
  color: var(--openbot-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trace-total-value {
  --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);
  margin: 0;
  font-size: var(--openbot-text-lg);
  font-variant-numeric: tabular-nums;
  line-height: var(--openbot-leading-lg);
}
.trace-body {
  --trace-fade: var(--openbot-space-6);
  --trace-mask-top: linear-gradient(var(--openbot-text-primary), var(--openbot-text-primary));
  --trace-mask-bottom: linear-gradient(var(--openbot-text-primary), var(--openbot-text-primary));
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  container-type: inline-size;
  scrollbar-width: none;
  direction: ltr;
}
.trace-body::-webkit-scrollbar {
  display: none;
}
.trace-body.scroll-fade-top, .trace-body.scroll-fade-bottom {
  mask-image: var(--trace-mask-top), var(--trace-mask-bottom);
  mask-composite: intersect;
}
.trace-body.scroll-fade-top {
  --trace-mask-top: linear-gradient(
    to bottom,
    var(--openbot-text-primary) var(--trace-stack),
    transparent var(--trace-stack),
    var(--openbot-text-primary) calc(var(--trace-stack) + var(--trace-fade))
  );
}
.trace-body.scroll-fade-bottom {
  --trace-mask-bottom: linear-gradient(
    to bottom,
    var(--openbot-text-primary) calc(100% - var(--trace-fade)),
    transparent
  );
}
.trace-grid {
  position: relative;
  z-index: 0;
}
.trace-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}
.trace-row {
  display: grid;
  height: var(--trace-row-height);
  box-sizing: border-box;
  grid-template-columns: var(--trace-name-width) minmax(0, 1fr);
  border-bottom: 1px solid var(--openbot-border);
}
.trace-branch-children {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--openbot-duration-slow) var(--openbot-ease-out);
}
.trace-branch-children[data-open] {
  grid-template-rows: 1fr;
}
.trace-branch-clip {
  min-height: 0;
  overflow: clip;
  opacity: 0;
  transition: opacity var(--openbot-duration-slow) var(--openbot-ease-out);
}
.trace-branch-children[data-open] > .trace-branch-clip {
  opacity: 1;
}
.trace-row {
  transition: opacity var(--openbot-duration-slow) var(--openbot-ease-out);
}
@starting-style {
  .trace-row {
    opacity: 0;
  }
}
.trace-row[data-parent] {
  position: sticky;
  top: calc((var(--trace-depth) + 1) * var(--trace-row-height));
  z-index: 4;
  background: var(--trace-surface);
}
.trace-row[data-hue="1"], .trace-handoff[data-hue="1"] {
  --trace-hue: var(--openbot-chart-storage-downloads);
}
.trace-row[data-hue="2"], .trace-handoff[data-hue="2"] {
  --trace-hue: var(--openbot-chart-storage-files);
}
.trace-row[data-hue="3"], .trace-handoff[data-hue="3"] {
  --trace-hue: var(--openbot-chart-storage-chats);
}
.trace-row[data-hue="4"], .trace-handoff[data-hue="4"] {
  --trace-hue: var(--openbot-chart-storage-workspaces);
}
.trace-row[data-hue="5"], .trace-handoff[data-hue="5"] {
  --trace-hue: var(--openbot-chart-storage-runtimes);
}
.trace-name {
  position: sticky;
  left: 0;
  z-index: 3;
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-1-5);
  --trace-indent: var(--openbot-space-4);
  --trace-guide-at: calc(var(--openbot-control-xs) / 2);
  padding-inline: calc(var(--openbot-space-2) + var(--trace-depth, 0) * var(--trace-indent)) var(--openbot-space-2);
  border-right: 1px solid var(--openbot-border);
  background: linear-gradient(var(--trace-row-tint), var(--trace-row-tint)), repeating-linear-gradient( to right, transparent 0 var(--trace-guide-at), var(--openbot-border) var(--trace-guide-at) calc(var(--trace-guide-at) + 1px), transparent calc(var(--trace-guide-at) + 1px) var(--trace-indent) ) var(--openbot-space-2) 0 / calc(var(--trace-depth, 0) * var(--trace-indent)) 100% no-repeat, var(--trace-surface);
}
.trace-row {
  --trace-row-tint: transparent;
}
.trace-row[data-hovered], .trace-row:has(.trace-name-button:focus-visible) {
  --trace-row-tint: var(--openbot-hover);
}
.trace-row[data-hovered] .trace-bar:not(.trace-segment), .trace-segment[data-hovered] {
  outline: 1px solid var(--openbot-text-secondary);
  outline-offset: 1px;
}
.trace-name .trace-name-button.ui-button {
  height: auto;
  min-width: 0;
  flex: 1 1 auto;
  justify-content: flex-start;
  gap: var(--openbot-space-1-5);
  padding: 0;
  border-radius: var(--openbot-radius-xs);
  background: transparent;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-align: start;
  cursor: default;
}
.trace-row[data-selectable] .trace-name-button.ui-button {
  cursor: pointer;
}
.trace-name .trace-name-button.ui-button:focus-visible {
  box-shadow: none;
  outline: 1px solid var(--openbot-text-muted);
  outline-offset: 1px;
}
.trace-axis-row {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--trace-surface);
}
.trace-axis-name {
  color: var(--openbot-text-muted);
}
.trace-name .trace-toggle[aria-expanded="true"]:not(:hover) {
  background: transparent;
}
.trace-toggle-icon {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  transition: rotate var(--openbot-duration-fast) var(--openbot-ease-out);
}
.trace-toggle[aria-expanded="false"] .trace-toggle-icon {
  rotate: -90deg;
}
.trace-toggle-space {
  width: var(--openbot-control-xs);
  flex: 0 0 auto;
}
.trace-icon {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
}
.trace-glyph {
  display: grid;
  width: 22px;
  height: 22px;
  box-sizing: border-box;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-primary) 4%, var(--trace-surface));
  }
  color: var(--openbot-text-secondary);
}
.trace-glyph[data-agent] {
  color: var(--trace-hue);
}
.trace-row:not([data-hue]) .trace-glyph[data-agent] {
  color: var(--openbot-text-primary);
}
.trace-glyph[data-failed] {
  color: var(--openbot-danger-text);
}
.trace-glyph-icon {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.trace-spinner {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  animation: ui-spin 1s linear infinite;
}
.trace-span-name {
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trace-row[data-parent] .trace-span-name {
  font-weight: var(--openbot-weight-semibold);
}
.trace-row[data-failed] .trace-span-name {
  color: var(--openbot-danger-text);
}
.trace-span-error-row {
  position: relative;
  z-index: 2;
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  padding-inline-start: calc(var(--openbot-space-2) + (var(--trace-depth, 0) + 1) * var(--openbot-space-4));
  border-bottom: 1px solid var(--openbot-border);
  background: var(--trace-surface);
}
.trace-span-error {
  max-height: 160px;
  margin: 0;
  overflow: auto;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.trace-row[data-running] .trace-span-name {
  background: linear-gradient( 90deg, var(--openbot-text-muted) 0%, var(--openbot-text-muted) 35%, var(--openbot-text-primary) 50%, var(--openbot-text-muted) 65%, var(--openbot-text-muted) 100% ) 0 0 / 300% 100%;
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: trace-shine 2s linear infinite;
}
@keyframes trace-shine {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0 0;
  }
}
.trace-span-detail {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trace-lane {
  --trace-scale: calc(100% - var(--trace-lane-pad) - var(--trace-label-room));
  position: relative;
  z-index: 1;
  min-width: 0;
}
.trace-row[data-hovered] .trace-lane {
  background: var(--trace-row-tint);
}
.trace-overlay {
  --trace-scale: calc(100% - var(--trace-lane-pad) - var(--trace-label-room));
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: var(--trace-name-width);
  pointer-events: none;
}
.trace-tick, .trace-gridline, .trace-now, .trace-now-dot, .trace-bar, .trace-handoff, .trace-bar-label {
  position: absolute;
  left: calc(var(--trace-lane-pad) + var(--trace-scale) * var(--trace-at));
}
.trace-tick {
  top: 50%;
  padding-left: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-variant-numeric: tabular-nums;
  translate: 0 -50%;
  white-space: nowrap;
}
.trace-gridline, .trace-now {
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--openbot-border);
}
.trace-now {
  z-index: 2;
  background: var(--openbot-text-dim);
}
.trace-now-dot {
  bottom: 0;
  width: 7px;
  height: 7px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-primary);
  translate: -3px 50%;
}
.trace-bar {
  transform-origin: left center;
  transition: scale var(--openbot-duration-overlay) var(--openbot-ease-out);
}
@starting-style {
  .trace-bar {
    scale: 0 1;
  }
}
.trace-bar {
  top: 50%;
  display: grid;
  width: max(3px, calc(var(--trace-scale) * var(--trace-width)));
  height: var(--trace-bar-height);
  box-sizing: border-box;
  place-items: center;
  overflow: hidden;
  border-radius: var(--openbot-radius-xs);
  translate: 0 -50%;
}
.trace-bar[data-kind="model"], .trace-swatch[data-kind="model"] {
  background-color: var(--trace-hue);
}
.trace-bar[data-kind="tool"], .trace-swatch[data-kind="tool"] {
  background-color: var(--trace-hue);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--trace-hue) 45%, var(--trace-surface));
  }
}
.trace-bar[data-kind="waiting"], .trace-swatch[data-kind="waiting"] {
  border: 1px solid var(--trace-hue);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--trace-hue) 60%, transparent);
  }
  background: repeating-linear-gradient( -45deg, var(--trace-hue) 0 1px, transparent 1px 5px );
  @supports (color: color-mix(in lab, red, red)) {
    background: repeating-linear-gradient( -45deg, color-mix(in srgb, var(--trace-hue) 60%, transparent) 0 1px, transparent 1px 5px );
  }
}
.trace-bar[data-kind="handoff"] {
  border: 1px solid var(--trace-hue);
  background-color: transparent;
}
.trace-bar[data-failed], .trace-swatch[data-failed] {
  border: 0;
  background: var(--openbot-danger);
}
.trace-bar.trace-track {
  border: 0;
  background: var(--trace-hue);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--trace-hue) 16%, transparent);
  }
}
.trace-bar[data-running]:not([data-kind="waiting"]) {
  background-image: linear-gradient( 90deg, transparent 0%, var(--openbot-text-primary) 50%, transparent 100% );
  @supports (color: color-mix(in lab, red, red)) {
    background-image: linear-gradient( 90deg, transparent 0%, color-mix(in srgb, var(--openbot-text-primary) 35%, transparent) 50%, transparent 100% );
  }
  background-repeat: no-repeat;
  background-size: 50% 100%;
  animation: trace-bar-shine 1.6s linear infinite;
}
@keyframes trace-bar-shine {
  from {
    background-position: -100% 0;
  }
  to {
    background-position: 200% 0;
  }
}
.trace-bar-icon {
  width: 12px;
  height: 12px;
  color: var(--openbot-text-on-accent);
}
.trace-handoff {
  --trace-elbow: var(--openbot-space-2);
  --trace-line-top: calc((var(--trace-from) + 1.5) * var(--trace-row-height) + var(--trace-bar-height) / 2);
  --trace-line-rows: calc(var(--trace-to) - var(--trace-from) - 0.5);
  top: calc(var(--trace-line-top) + var(--trace-from-shift, 0px));
  width: var(--trace-elbow);
  height: calc(var(--trace-line-rows) * var(--trace-row-height) - var(--trace-bar-height) / 2 + var(--trace-grow, 0px));
  box-sizing: border-box;
  border-left: 2px dotted var(--trace-hue);
  translate: calc(-1 * var(--trace-elbow)) 0;
  transition: top var(--openbot-duration-slow) var(--openbot-ease-out), height var(--openbot-duration-slow) var(--openbot-ease-out);
}
.trace-handoff:not([data-hue]) {
  --trace-hue: var(--openbot-text-muted);
}
.trace-handoff.trace-handoff-end {
  top: 0;
  height: 50%;
  border-bottom: 2px dotted var(--trace-hue);
  border-left: 0;
}
.trace-handoff.trace-handoff-end[data-last] {
  border-left: 2px dotted var(--trace-hue);
  border-bottom-left-radius: var(--openbot-radius-xs);
}
.trace-handoff.trace-handoff-pass {
  top: 0;
  height: 100%;
}
.trace-bar-label {
  top: 50%;
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  padding-left: var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
  font-variant-numeric: tabular-nums;
  translate: 0 -50%;
  white-space: nowrap;
}
.trace-empty {
  display: grid;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-8) var(--openbot-space-4);
  text-align: center;
}
.trace-empty-title, .trace-empty-description {
  margin: 0;
}
.trace-empty-title {
  font-weight: var(--openbot-weight-medium);
}
.trace-empty-description {
  color: var(--openbot-text-muted);
}
.trace-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2) var(--openbot-space-4);
  padding-block: var(--openbot-space-2);
  padding-inline: var(--openbot-space-4) var(--openbot-space-2);
  border-top: 1px solid var(--openbot-border);
}
.trace-legend {
  --trace-hue: var(--openbot-text-secondary);
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-1) var(--openbot-space-4);
  margin: 0;
  padding: 0;
  color: var(--openbot-text-muted);
  list-style: none;
}
.trace-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.trace-swatch {
  width: 16px;
  height: 8px;
  flex: none;
  box-sizing: border-box;
  border-radius: var(--openbot-radius-xs);
}
.trace-swatch[data-kind="handoff"] {
  height: 2px;
  border-top: 2px dotted var(--trace-hue);
  border-radius: 0;
}
.trace-replay {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
}
.trace-replay .trace-play {
  border-radius: var(--openbot-radius-pill);
}
.trace-replay .trace-select {
  margin-inline-start: var(--openbot-space-1);
}
.ui-dialog-content.trace-dialog {
  width: min(1040px, 100%);
  max-height: min(680px, calc(100dvh - 2 * var(--openbot-space-6)));
  display: flex;
  overflow: hidden;
  outline: 0;
  background: var(--openbot-bg-surface);
}
.trace.trace-in-dialog {
  border: 0;
  border-radius: 0;
}
@media (prefers-reduced-motion: reduce) {
  .trace-branch-children, .trace-branch-clip, .trace-row, .trace-bar, .trace-handoff {
    transition: none;
  }
  .trace-spinner, .trace-row[data-running] .trace-span-name, .trace-bar[data-running] {
    animation: none;
  }
  .trace-toggle-icon {
    transition: none;
  }
}
.agent-chat-empty {
  box-sizing: border-box;
  height: 100%;
  display: grid;
  grid-auto-rows: auto minmax(0, 21rem);
  align-content: center;
  justify-items: center;
  gap: var(--openbot-space-6);
  padding: var(--openbot-space-6) 0;
  container-type: inline-size;
}
.agent-chat-empty-pitch {
  --agent-chat-empty-title-size: var(--openbot-text-display);
  --agent-chat-empty-hand-size: calc(var(--agent-chat-empty-title-size) * 1.2);
  display: grid;
  justify-items: center;
  gap: var(--openbot-space-2);
  text-align: center;
}
.agent-chat-empty-avatar.agent-avatar {
  width: calc(var(--openbot-control-xl) * 1.6);
  height: calc(var(--openbot-control-xl) * 1.6);
  margin-bottom: var(--openbot-space-2);
}
.agent-chat-empty-title {
  margin: 0;
  font-size: var(--agent-chat-empty-title-size);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.agent-chat-empty-title > span {
  display: block;
}
.agent-chat-empty-ready, .agent-chat-empty-description {
  color: var(--openbot-text-muted);
}
.agent-chat-empty-description {
  max-width: 30rem;
  margin: 0;
  font-size: var(--openbot-text-xl);
  line-height: 1.5;
  text-wrap: balance;
}
.agent-chat-empty-hand {
  display: inline-block;
  color: var(--openbot-accent-text);
  font-family: "Bradley Hand", "Noteworthy", "Segoe Print", cursive;
  font-size: var(--agent-chat-empty-hand-size);
  line-height: 1;
  transform: rotate(-2deg);
  clip-path: inset(-0.4em 100% -0.4em -0.2em);
  animation: agent-chat-empty-write calc(var(--openbot-duration-slow) * 2.8) linear calc(var(--openbot-duration-slow) * 2.5) forwards;
}
@keyframes agent-chat-empty-write {
  to {
    clip-path: inset(-0.4em -0.2em -0.4em -0.2em);
  }
}
:dir(rtl) .agent-chat-empty-hand {
  clip-path: inset(-0.4em -0.2em -0.4em 100%);
}
.agent-chat-empty-turn {
  width: min(100%, 40rem);
  min-height: 0;
  overflow: hidden;
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
  mask-image: radial-gradient(ellipse 70% 90% at 50% 20%, var(--openbot-text-primary) 45%, var(--openbot-transparent));
}
.agent-chat-empty-row {
  padding-top: var(--openbot-chat-entry-gap);
}
.agent-chat-empty-showing {
  transition: opacity calc(var(--openbot-duration-slow) * 3.5) var(--openbot-ease-out), filter calc(var(--openbot-duration-slow) * 3.5) var(--openbot-ease-out), transform calc(var(--openbot-duration-slow) * 3.5) var(--openbot-ease-out);
}
.agent-chat-empty-showing[data-leaving] {
  opacity: 0;
  filter: blur(3px);
  transform: translateY(-6px);
}
@container (max-width: 520px) {
  .agent-chat-empty-pitch {
    --agent-chat-empty-title-size: var(--openbot-text-3xl);
  }
  .agent-chat-empty-description {
    font-size: var(--openbot-text-lg);
  }
}
.agent-chat-empty[data-still] .agent-chat-empty-hand {
  animation: none;
  clip-path: none;
}
.message-entry-user .ui-bubble {
  max-width: var(--message-narrow-bubble-width);
}
.message-entry-user .ui-bubble:has(.message-markdown-table-scroll) {
  max-width: var(--message-wide-bubble-width);
}
.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 :is(p, li, h1, h2, h3, h4, h5, h6, th, td) {
  unicode-bidi: plaintext;
}
.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-inline-start: 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-inline-start: var(--openbot-space-0-5) solid var(--openbot-border-strong);
  padding-inline-start: 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%;
  min-width: calc(var(--message-markdown-table-columns) * 112px);
  border-collapse: collapse;
  background: var(--openbot-bg-canvas);
  color: var(--openbot-data-table-text);
}
.message-markdown-table :is(th, td) {
  border-inline-end: 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: start;
  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-inline-end: 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-paper-text);
}
.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-block: 0;
  padding-inline: 11px 10px;
  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);
}
:dir(rtl) :is(.selection-actions-form-shell-hidden, .selection-actions-presets-hidden) {
  transform: translateX(8px);
}
.selection-actions-more-presets {
  max-width: 0;
  gap: 2px;
  margin-inline-start: 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-inline-start var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1);
}
.selection-actions-presets-expanded .selection-actions-more-presets {
  max-width: 262px;
  margin-inline-start: 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-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-inline-start: 1px;
}
.selection-actions-expand svg {
  transition: transform var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1);
}
:dir(rtl) .selection-actions-expand svg {
  scale: -1 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-inline-start: 2px solid var(--openbot-accent);
  border-start-start-radius: 0;
  border-start-end-radius: var(--openbot-radius-sm);
  border-end-end-radius: var(--openbot-radius-sm);
  border-end-start-radius: 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-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-show-full {
  justify-self: start;
}
.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: var(--message-wide-bubble-width);
  max-width: var(--message-wide-bubble-width);
}
.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-block: 4px;
  padding-inline: 10px 6px;
}
.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%;
  display: block;
  font: inherit;
}
.message-code-line {
  min-height: 19px;
  display: flex;
}
.message-code-line-number {
  width: 40px;
  flex: none;
  padding-inline-end: 8px;
  color: var(--openbot-text-dim);
  font-size: var(--openbot-text-sm);
  text-align: end;
  user-select: none;
}
.message-code-line-source {
  min-width: 0;
  padding-inline-end: 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.message-code-caret {
  width: 2px;
  height: 13px;
  display: inline-block;
  margin-inline-start: 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: start;
  vertical-align: top;
  unicode-bidi: plaintext;
}
.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-inline-end: 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-inline-end: 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: start;
  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-inline-start: -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-inline-start: 2px solid var(--openbot-text-dim);
  padding-inline-start: 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-quote {
  max-height: 60px;
  overflow: hidden;
  font-size: var(--openbot-text-sm);
  line-height: 15px;
  overflow-wrap: anywhere;
}
.message-reply-quote[data-clipped] {
  mask-image: linear-gradient(to bottom, var(--openbot-text-primary) 45px, transparent 60px);
}
.message-reply-quote blockquote > :not(:first-child) {
  margin-top: var(--openbot-space-1);
}
.message-reply-quote > .message-markdown > :not(:first-child) {
  margin-top: var(--openbot-space-1);
}
.message-reply-quote .message-markdown-heading {
  font-size: inherit;
  line-height: inherit;
}
.message-reply-quote :not(pre) > code {
  padding-block: 0;
  font-size: inherit;
}
.message-reply-quote .message-markdown-excerpt-code {
  font-family: var(--openbot-font-mono);
  white-space: pre-wrap;
}
[data-slot="bubble"][data-author="user"] .message-reply-context {
  border-inline-start-color: var(--openbot-border-strong);
  color: var(--openbot-text-readable);
}
.message-reply-context[data-opens] {
  position: relative;
  transition: border-inline-start-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-inline-start-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-block: 0;
  inset-inline: -2px 0;
  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-inline-start-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 {
  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-block: 1px;
  padding-inline: 3px 6px;
  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, .side-panel-file-badge )[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, .side-panel-file-badge )[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, .side-panel-file-badge )[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, .side-panel-file-badge )[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, .side-panel-file-badge )[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, .side-panel-file-badge )[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, .side-panel-file-badge )[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-lg);
}
.reference-chip.message-reference-chip .reference-chip-icon, .message-file-reference .attachment-reference-visual {
  display: inline-block;
  margin-inline-end: 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-block: -14% 0;
  margin-inline: -14% 0;
}
.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-block: var(--openbot-space-2);
  padding-inline: var(--openbot-space-4) var(--openbot-space-2);
  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: var(--message-wide-bubble-width);
}
.chat-visual-with-author {
  padding-inline-start: calc(var(--message-author-column) + var(--openbot-space-2));
}
.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);
}
.chat-visual-box {
  position: relative;
  min-width: 0;
}
.chat-visual-box[popover]:not(:popover-open) {
  position: relative;
  inset: auto;
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
}
.chat-visual-box-fill {
  height: 100%;
}
.chat-visual-box:not(:popover-open) > .chat-visual-surface {
  display: contents;
}
.chat-visual-box:popover-open {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  display: grid;
  place-items: center;
  margin: 0;
  border: 0;
  padding: var(--openbot-space-6);
  background: var(--openbot-dialog-overlay);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--openbot-text-primary);
  -webkit-app-region: no-drag;
}
.chat-visual-box:popover-open::backdrop {
  background: transparent;
}
.chat-visual-box:popover-open > .chat-visual-surface {
  width: min(1100px, 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--openbot-radius-xl);
  background: var(--openbot-bg-control);
  box-shadow: 0 0 0 1px var(--openbot-dialog-ring);
}
.chat-visual-box:popover-open .chat-visual-frame {
  min-height: 0;
  flex: 1;
  background: var(--openbot-bg-sidebar);
}
.chat-visual-actions {
  position: absolute;
  top: var(--openbot-space-2);
  inset-inline-end: var(--openbot-space-2);
  display: flex;
  gap: var(--openbot-space-1);
  opacity: 0;
  transition: opacity var(--openbot-duration-hover) var(--openbot-ease-out);
}
.chat-visual-actions svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.chat-visual-box:popover-open > .chat-visual-actions {
  display: none;
}
.chat-visual-box:hover > .chat-visual-actions, .chat-visual-box:focus-within > .chat-visual-actions {
  opacity: 1;
}
@media (hover: none) {
  .chat-visual-actions {
    opacity: 1;
  }
}
.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-block: 6px;
  padding-inline: 12px 8px;
  box-shadow: 0 7px 22px var(--openbot-shadow-popover-ambient);
}
.composer-reply-preview > div {
  min-width: 0;
  flex: 1;
}
.composer-reply-preview > div > span {
  display: block;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: 550;
  line-height: 14px;
}
.composer-reply-preview .message-reply-quote {
  margin: 1px 0 0;
  color: var(--openbot-text-secondary);
}
.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 {
  --composer-resize-duration: 300ms;
  --composer-resize-ease: linear(
    0,
    0.01588 2%,
    0.05618 4%,
    0.11201 6%,
    0.1768 8%,
    0.2458 10%,
    0.31562 12%,
    0.38392 14%,
    0.44914 16%,
    0.51029 18%,
    0.56683 20%,
    0.61852 22%,
    0.66534 24%,
    0.70743 26%,
    0.74501 28%,
    0.77838 30%,
    0.80788 32%,
    0.83383 34%,
    0.85658 36%,
    0.87645 38%,
    0.89376 40%,
    0.92183 44%,
    0.94282 48%,
    0.95838 52%,
    0.96984 56%,
    0.97823 60%,
    0.98435 64%,
    0.98878 68%,
    0.99198 72%,
    0.99594 80%,
    0.99829 90%,
    1
  );
  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), height var(--composer-resize-duration) var(--composer-resize-ease);
}
.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-muted);
  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 {
  inset-inline-end: 46px;
  width: 28px;
  transition: width var(--voice-morph-exit-duration) var(--openbot-ease-out);
}
.voice-morph-send-blob, .voice-morph-finish-blob {
  inset-inline-end: 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);
}
:dir(rtl) .voice-morph[data-recording] .voice-morph-finish-blob {
  transform: translateX(34px) scale(0.8);
}
.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-block: 0;
  padding-inline: 12px 3px;
  color: var(--openbot-text-secondary);
  animation: voice-morph-content-in var(--openbot-duration-slow) var(--openbot-ease-out) var(--openbot-duration-fast) both;
}
.voice-morph[data-countdown] {
  --voice-bar-width: 188px;
}
.voice-recording-status[data-tone="warning"] {
  color: var(--openbot-warning-text);
}
.voice-recording-remaining {
  flex: 0 0 auto;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
.voice-recording-status[data-tone="warning"] .voice-recording-remaining {
  color: var(--openbot-warning-text);
}
.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);
  direction: ltr;
}
.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: var(--composer-editor-limit, max(48px, 33dvh));
}
.composer-wrap {
  --composer-editor-limit: max(48px, min(130px, 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-surface:has(.composer-mention-token) {
  padding-block: 2px;
  line-height: 24px;
}
.composer[data-compact] .composer-editor-placeholder {
  top: 4px;
  inset-inline-start: 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;
  unicode-bidi: plaintext;
}
.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-inline-start: 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;
  inset-inline-start: 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;
  inset-inline-start: 0;
}
.composer[data-resizing] {
  min-height: 0;
  overflow: clip;
}
.composer[data-resizing][data-compact] {
  align-content: end;
}
.composer[data-resizing]:not([data-compact]) .composer-input-label {
  min-height: 0;
  align-items: flex-start;
  overflow: clip;
}
@media (prefers-reduced-motion: reduce) {
  .composer {
    --composer-resize-duration: 120ms;
    --composer-resize-ease: ease;
  }
}
.composer-mention-token.composer-tag-unavailable {
  border: 1px dashed var(--openbot-border-strong);
  background: transparent;
  padding-inline-start: var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
}
.composer-file-reference {
  height: 24px;
  cursor: pointer;
  user-select: none;
}
.composer-file-reference-image {
  width: var(--openbot-space-4);
  height: var(--openbot-space-4);
  flex: none;
  border-radius: var(--openbot-radius-sm);
  object-fit: cover;
}
.composer-file-reference-size {
  flex: none;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
  font-variant-numeric: tabular-nums;
}
.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 {
  --mention-picker-title-height: 24px;
  --mention-picker-section-gap: var(--openbot-space-1);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  height: calc( var(--mention-picker-rows, 0) * var(--mention-picker-row-height) + var(--mention-picker-sections, 0) * var(--mention-picker-title-height) + max(var(--mention-picker-sections, 0) - 1, 0) * var(--mention-picker-section-gap) + 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;
  scroll-padding-block: var(--openbot-space-4);
  transition: none;
}
.mention-picker-section {
  display: flex;
  height: var(--mention-picker-title-height);
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 8px 4px;
  color: var(--openbot-queue-action);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.mention-picker-section-count {
  font-variant-numeric: tabular-nums;
}
.mention-picker-option + .mention-picker-section {
  margin-top: var(--mention-picker-section-gap);
}
.mention-picker-highlight {
  position: absolute;
  top: 0;
  right: var(--mention-picker-gutter);
  left: var(--mention-picker-gutter);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-hover);
  pointer-events: none;
  transition: transform var(--openbot-duration-fast) var(--openbot-ease-out), height var(--openbot-duration-fast) var(--openbot-ease-out);
}
.mention-picker-highlight[data-instant] {
  transition: none;
}
.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%;
  position: relative;
  z-index: 1;
  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: start;
}
.mention-picker-file-option .attachment-reference-visual {
  width: 20px;
  height: 20px;
}
.mention-picker-option[data-entering] {
  animation: mention-picker-row-in var(--openbot-duration-fast) var(--openbot-ease-out) both;
}
@keyframes mention-picker-row-in {
  from {
    opacity: 0;
  }
}
.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;
  color: var(--mention-picker-name-color);
  max-width: 50%;
  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-option[data-filtering] {
  --mention-picker-name-color: var(--openbot-queue-action);
}
.mention-picker-match {
  background: transparent;
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}
.mention-picker-badge {
  margin-inline-start: auto;
  flex: 0 0 auto;
  color: var(--openbot-queue-action);
}
.mention-picker-badge > svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.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-block: 7px;
  padding-inline: 8px 12px;
}
.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;
}
.composer-attachment-preview.ui-button {
  border: 0;
  padding: 0;
  cursor: zoom-in;
}
.composer-attachment[data-pending] .composer-attachment-preview img {
  opacity: 0.5;
}
.composer-attachment[data-pending] > .ui-spinner {
  position: absolute;
  inset: 0;
  margin: auto;
}
.composer-attachment[data-upload="uploading"] {
  border-style: dashed;
}
.composer-attachment[data-upload="failed"] {
  border-color: var(--openbot-danger);
}
.composer-attachment[data-upload="failed"] .composer-attachment-copy small {
  color: var(--openbot-danger-text);
}
.composer-upload-ring {
  width: 28px;
}
.composer-upload-failed-icon {
  width: 18px;
  height: 18px;
  color: var(--openbot-danger-text);
}
.composer-upload-retry {
  flex: none;
  margin-inline-end: -4px;
  color: var(--openbot-danger-text);
}
.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: start;
}
.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);
  }
}
.attachment-download-ring {
  --ui-radial-progress-color: var(--openbot-text-primary);
  width: var(--openbot-control-xs);
}
.attachment-download-stop .ui-radial-progress-chart {
  width: 100%;
  height: 100%;
}
.attachment-download-stop .ui-radial-progress-content {
  padding: 0;
}
.attachment-download-stop .ui-radial-progress-content svg {
  width: var(--openbot-glyph-sm);
  height: var(--openbot-glyph-sm);
  fill: currentcolor;
  stroke: none;
}
.message-attachment[data-download] small {
  overflow: hidden;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.message-attachment[data-download="failed"] small {
  color: var(--openbot-danger);
}
.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-block: var(--queue-row-gutter) 0;
  padding-inline: var(--queue-row-inset-start) var(--queue-row-inset-end);
  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-loading {
  position: relative;
  z-index: 1;
  display: grid;
  grid-area: 1 / 1;
  animation: image-gallery-loading-in 0s 400ms both;
}
@keyframes image-gallery-loading-in {
  from {
    visibility: hidden;
  }
}
.image-gallery-tile img {
  grid-area: 1 / 1;
  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-mac-controls .image-lightbox-toolbar {
  padding-inline-start: 82px;
}
.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-copy svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
}
.image-lightbox-zoom {
  display: flex;
  align-items: center;
}
:where(.ui-button).image-lightbox-zoom-level {
  min-width: 56px;
  font-variant-numeric: tabular-nums;
}
.image-lightbox-stage {
  position: relative;
  min-height: 0;
  touch-action: none;
}
.image-lightbox-stage[data-zoomed] {
  overflow: hidden;
}
.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;
  -webkit-user-drag: none;
}
.image-lightbox-image[data-zoomed] {
  will-change: auto;
  cursor: grab;
}
.image-lightbox-stage[data-dragging] .image-lightbox-image {
  cursor: grabbing;
}
.image-lightbox-image[data-settling] {
  transition: scale var(--openbot-duration-slow) var(--openbot-ease-out), translate var(--openbot-duration-slow) var(--openbot-ease-out);
}
.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;
  direction: ltr;
}
.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;
  }
}
.agent-queue-panel-list {
  max-height: calc(7 * var(--queue-row-height) + 2 * var(--queue-row-gutter));
  overflow-y: auto;
  padding-block: var(--queue-row-gutter);
  padding-inline: var(--queue-row-inset-start) var(--queue-row-inset-end);
  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-block: 0;
  inset-inline: calc(var(--queue-row-gutter) - var(--queue-row-inset-start)) calc(var(--queue-row-gutter) - var(--queue-row-inset-end));
  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-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;
}
.conversation-heading-group:has(.agent-threads-header) {
  min-width: 0;
  flex: 1 1 0;
  margin-inline-end: 6px;
}
.agent-threads-header {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 3px;
  margin-inline-start: 4px;
}
.conversation-title.ui-button[data-tab] {
  height: var(--openbot-control-sm);
  gap: var(--openbot-space-1-5);
  padding-block: 0;
  padding-inline: var(--openbot-space-1-5) var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
  color: var(--openbot-text-secondary);
}
.conversation-title.ui-button[data-tab] h1 {
  color: inherit;
  font-size: var(--openbot-text-sm);
}
.conversation-title.ui-button[data-tab]:hover {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}
.conversation-title.ui-button[data-tab][data-selected] {
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
}
.conversation-heading-group:has(> .conversation-title[data-tab] + .agent-threads-header) {
  gap: 0;
}
.conversation-heading-group:has(.conversation-title[data-tab]) .agent-threads-header {
  margin-inline-start: 1px;
}
.agent-threads-header[data-mode="minimal"] {
  flex-shrink: 0;
}
.conversation-heading-group:has(.agent-threads-header[data-mode="minimal"]) .conversation-title {
  min-width: 0;
  flex-shrink: 1;
}
.conversation-heading-group:has(.agent-threads-header[data-fold]) .conversation-title {
  position: relative;
  flex-shrink: 0;
  padding-inline-end: var(--openbot-space-1-5);
}
.conversation-heading-group:has(.agent-threads-header[data-fold]) .conversation-title h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.conversation-heading-group:has(.agent-threads-header[data-fold]:not([data-fold="name"])) {
  overflow: clip;
}
.conversation-header:has(.agent-threads-header[data-fold]:not([data-fold="name"])) .provider-model-trigger > .provider-model-chevron {
  display: none;
}
.agent-threads-header:is([data-fold="list"], [data-fold="all"]), .conversation-heading-group:has(.agent-threads-header[data-fold="all"]) .conversation-title {
  visibility: hidden;
}
.agent-threads-tabs-area {
  position: relative;
  display: flex;
  min-width: 0;
}
.agent-threads-tabs-trigger, .agent-threads-tabs-root {
  display: flex;
  min-width: 0;
}
.agent-threads-rename.ui-input {
  position: absolute;
  top: 50%;
  z-index: 2;
  height: var(--openbot-control-sm);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: var(--openbot-text-sm);
  transform: translateY(-50%);
}
.agent-threads-tabs.ui-sliding-tabs {
  min-width: 0;
  max-width: 100%;
  padding-inline-end: 0;
  overflow-x: auto;
  gap: var(--openbot-space-1);
  background: transparent;
  box-shadow: none;
  scrollbar-width: none;
  direction: ltr;
}
.agent-threads-tabs[data-more-before] {
  mask-image: linear-gradient(to right, transparent, var(--openbot-text-primary) 24px);
}
.agent-threads-tabs[data-more-after] {
  mask-image: linear-gradient(to left, transparent, var(--openbot-text-primary) 24px);
}
.agent-threads-tabs[data-more-before][data-more-after] {
  mask-image: linear-gradient( to right, transparent, var(--openbot-text-primary) 24px, var(--openbot-text-primary) calc(100% - 24px), transparent );
}
.agent-threads-tabs .agent-threads-fill {
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control-active);
}
.agent-threads-tabs .agent-threads-main-key {
  display: none;
}
.agent-threads-tab.ui-sliding-tabs-trigger {
  display: inline-flex;
  width: 140px;
  min-width: 96px;
  max-width: 140px;
  flex: 0 1 auto;
  align-items: center;
  gap: var(--openbot-space-1-5);
  padding-block: 0;
  padding-inline: var(--openbot-space-1-5) var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
  animation: agent-threads-tab-in var(--openbot-duration-normal) var(--openbot-ease-out);
  transition: color var(--sliding-tabs-duration) var(--sliding-tabs-ease), transform var(--sliding-tabs-duration) var(--sliding-tabs-ease);
}
.agent-threads-tab-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agent-threads-title-numbered {
  display: flex;
  white-space: nowrap;
}
.agent-threads-title-root {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agent-threads-title-number {
  flex: none;
  white-space: pre;
}
.agent-threads-tab.ui-sliding-tabs-trigger[data-renaming] {
  outline: 1px solid var(--openbot-border-focus);
  outline-offset: -1px;
  background-color: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
}
.agent-threads-tab[data-renaming] .agent-threads-tab-title {
  visibility: hidden;
}
.agent-threads-tab.ui-sliding-tabs-trigger:not([aria-selected="true"], [data-renaming]):is(:hover, [data-menu-open]) {
  background-color: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}
.agent-threads-tab-close {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  border-radius: var(--openbot-radius-pill);
}
.agent-threads-tab-icon, .agent-threads-tab-x {
  grid-area: 1 / 1;
}
.agent-threads-tab-icon {
  display: grid;
  opacity: 0.7;
}
.agent-threads-tab-icon > svg, .agent-threads-tab-x {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.agent-threads-tab-x {
  opacity: 0;
}
.agent-threads-tab:hover:where(:not([data-renaming])) .agent-threads-tab-close {
  background: var(--openbot-bg-control-hover);
}
.agent-threads-tab:hover:where(:not([data-renaming])) .agent-threads-tab-icon {
  opacity: 0;
}
.agent-threads-tab:hover:where(:not([data-renaming])) .agent-threads-tab-x {
  opacity: 1;
}
.agent-threads-tab-close:hover {
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
}
.agent-threads-tab[data-renaming] .agent-threads-tab-close {
  pointer-events: none;
}
.agent-threads-tab-close:has(.agent-threads-state) {
  width: auto;
  min-width: var(--openbot-icon-md);
  height: auto;
  min-height: var(--openbot-icon-md);
}
.agent-threads-tab:not(:hover) .agent-threads-tab-icon:has(.agent-threads-state) {
  opacity: 1;
}
.agent-threads-icon-button.ui-button {
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-sm);
  color: var(--openbot-text-muted);
}
.agent-threads-switcher.ui-button {
  min-width: 0;
  max-width: 200px;
  height: var(--openbot-control-sm);
  flex: 0 1 auto;
  gap: var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-md);
  background-color: var(--openbot-bg-control-active);
  padding-block: 0;
  padding-inline: var(--openbot-space-1-5) var(--openbot-space-1);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
}
.agent-threads-switcher.ui-button:hover, .agent-threads-switcher.ui-button[aria-expanded="true"] {
  background-color: var(--openbot-bg-control-hover);
}
.agent-threads-switcher-icon {
  display: grid;
  flex: none;
  place-items: center;
  min-width: var(--openbot-icon-md);
  min-height: var(--openbot-icon-md);
}
.agent-threads-switcher-icon > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  opacity: 0.7;
}
.agent-threads-switcher-chevron {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: none;
  color: var(--openbot-text-muted);
}
.agent-threads-menu {
  width: 320px;
}
.agent-threads-menu-list {
  --agent-threads-fade-top: 0px;
  --agent-threads-fade-bottom: 0px;
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: none;
}
.agent-threads-menu .agent-threads-menu-list:is(.scroll-fade-top, .scroll-fade-bottom) {
  mask-image: linear-gradient( to bottom, transparent, var(--openbot-text-primary) var(--agent-threads-fade-top), var(--openbot-text-primary) calc(100% - var(--agent-threads-fade-bottom)), transparent );
}
.agent-threads-menu-list.scroll-fade-top {
  --agent-threads-fade-top: 24px;
}
.agent-threads-menu-list.scroll-fade-bottom {
  --agent-threads-fade-bottom: 24px;
}
.agent-threads-menu-item {
  gap: 8px;
}
.agent-threads-menu .agent-threads-menu-list .agent-threads-menu-item[aria-current] {
  background: var(--ui-menu-item-hover);
}
.agent-threads-menu-stem {
  display: flex;
  flex: none;
  align-self: stretch;
  margin-block: calc(var(--openbot-space-1-5) * -1);
}
.agent-threads-stem-rail, .agent-threads-stem-elbow {
  position: relative;
  width: 16px;
}
.agent-threads-stem-line::before, .agent-threads-stem-elbow::before, .agent-threads-stem-elbow::after {
  position: absolute;
  inset-inline-start: 7px;
  border: 0 solid var(--openbot-text-muted);
  @supports (color: color-mix(in lab, red, red)) {
    border: 0 solid color-mix(in srgb, var(--openbot-text-muted) 60%, transparent);
  }
  content: "";
}
.agent-threads-stem-line::before, .agent-threads-stem-elbow::before {
  inset-block: 0;
  border-inline-start-width: 1px;
}
.agent-threads-stem-elbow::after {
  top: 50%;
  inset-inline-end: 0;
  border-top-width: 1px;
}
.agent-threads-stem-last::before {
  inset-inline-end: 0;
  bottom: 50%;
  border-bottom-width: 1px;
  border-end-start-radius: 6px;
}
.agent-threads-stem-last::after {
  content: none;
}
.agent-threads-menu-title {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-threads-menu-time {
  min-width: 44px;
  flex: 0 0 auto;
  white-space: nowrap;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  text-align: end;
}
.agent-threads-state {
  display: inline-flex;
  height: 16px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: var(--openbot-radius-pill);
}
.agent-threads-unread {
  width: 8px;
  height: 8px;
  background: var(--openbot-unread-surface);
}
.agent-threads-state-working {
  width: 24px;
  background: var(--openbot-bg-control);
  color: var(--openbot-text-secondary);
}
@keyframes agent-threads-tab-in {
  from {
    opacity: 0;
    transform: translateY(2px);
  }
}
.agent-threads-tab[data-attention], .agent-threads-switcher[data-attention], .side-panel-thread-tab[data-attention] {
  background-image: linear-gradient(var(--agent-threads-tint), var(--agent-threads-tint));
}
:is(.agent-threads-tab, .agent-threads-switcher, .side-panel-thread-tab)[data-attention="waiting"] {
  --agent-threads-tint: var(--openbot-warning-soft);
  @supports (color: color-mix(in lab, red, red)) {
    --agent-threads-tint: color-mix(in srgb, var(--openbot-warning-soft) 40%, var(--openbot-transparent));
  }
}
:is(.agent-threads-tab, .agent-threads-switcher, .side-panel-thread-tab)[data-attention="failed"] {
  --agent-threads-tint: var(--openbot-danger-soft);
  @supports (color: color-mix(in lab, red, red)) {
    --agent-threads-tint: color-mix(in srgb, var(--openbot-danger-soft) 40%, var(--openbot-transparent));
  }
}
.agent-threads-tabs .ui-sliding-tabs-pill:not(.agent-threads-fill) {
  display: none;
}
.agent-threads-tab + .agent-threads-tab::before, :where(.conversation-heading-group:has(.conversation-title[data-tab])) .agent-threads-main-key + .agent-threads-tab::before {
  position: absolute;
  top: 50%;
  inset-inline-start: calc(var(--openbot-space-1) / -2 - 0.5px);
  width: 1px;
  height: var(--openbot-icon-lg);
  background: var(--openbot-border-strong);
  content: "";
  transform: translateY(-50%);
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}
:where(.conversation-heading-group:has(.conversation-title:is([data-selected], :hover))) .agent-threads-main-key + .agent-threads-tab::before {
  opacity: 0;
}
.agent-threads-tab[aria-selected="true"]::before, .agent-threads-tab[aria-selected="true"] + .agent-threads-tab::before, .agent-threads-tab[data-attention]::before, .agent-threads-tab[data-attention] + .agent-threads-tab::before, .agent-threads-tab:hover::before, .agent-threads-tab:hover + .agent-threads-tab::before {
  opacity: 0;
}
.agent-threads-tabs[data-dragging] {
  cursor: grabbing;
  user-select: none;
}
.agent-threads-tabs[data-dragging] .agent-threads-tab {
  cursor: grabbing;
}
.agent-threads-tab.ui-sliding-tabs-trigger[data-dragged=""] {
  z-index: 2;
  background-color: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
  transition: color var(--sliding-tabs-duration) var(--sliding-tabs-ease);
}
.agent-threads-tab.ui-sliding-tabs-trigger[data-dragged="away"] {
  opacity: 0.4;
}
.agent-threads-tabs[data-dragging] .agent-threads-fill {
  transition: none;
}
.agent-threads-tabs[data-dragging] .agent-threads-tab::before, .agent-threads-tabs[data-dragging] .agent-threads-tab-x {
  opacity: 0;
}
.agent-threads-tabs[data-dragging] .agent-threads-tab-close {
  background: transparent;
}
.agent-threads-tabs[data-dragging] .agent-threads-tab-icon {
  opacity: 0.7;
}
.agent-threads-tabs[data-dragging] .agent-threads-tab-icon:has(.agent-threads-state) {
  opacity: 1;
}
.agent-threads-header[data-drop-target] {
  border-radius: var(--openbot-radius-md);
  outline: 1px dashed var(--openbot-text-secondary);
  outline-offset: 2px;
  background: var(--openbot-bg-control-hover);
}
.agent-threads-tab-mark-slot {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: 0fr;
  margin-inline-start: -4px;
  opacity: 0;
  transition: grid-template-columns var(--sliding-tabs-duration) var(--sliding-tabs-ease), margin-inline-start var(--sliding-tabs-duration) var(--sliding-tabs-ease), opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}
.agent-threads-tab-mark-slot[data-open] {
  grid-template-columns: 1fr;
  margin-inline-start: 0;
  opacity: 1;
}
.agent-threads-tab-mark {
  min-width: 0;
  overflow-x: clip;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  color: var(--openbot-text-secondary);
}
.agent-threads-menu-item .agent-threads-tab-mark {
  width: 24px;
  justify-content: center;
}
.agent-threads-state-icon {
  width: 20px;
  height: 20px;
  background: var(--openbot-bg-control);
  color: var(--openbot-text-muted);
}
.agent-threads-state-icon svg {
  width: 12px;
  height: 12px;
}
.agent-threads-tab-mark[data-kind="waiting"] .agent-threads-state-icon {
  background: var(--openbot-warning-soft);
  color: var(--openbot-warning-text);
}
.agent-threads-tab-mark[data-kind="failed"] .agent-threads-state-icon {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger-text);
}
.agent-thread-origin {
  margin: 0;
  padding-top: var(--openbot-chat-entry-gap);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.agent-thread-branch-divider {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--openbot-space-2);
  margin: var(--openbot-space-2) 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.agent-thread-branch-divider hr {
  height: 1px;
  flex: 1;
  border: 0;
  background: var(--openbot-border);
}
.agent-thread-branch-text, .agent-thread-branch-divider .agent-thread-branch-link {
  display: inline-flex;
  flex: 0 1 auto;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-1);
  color: inherit;
  font-size: inherit;
}
.agent-thread-branch-text svg, .agent-thread-branch-link svg {
  width: 14px;
  height: 14px;
  flex: none;
}
.agent-thread-branch-text span, .agent-thread-branch-link span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-thread-queued {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  padding-top: var(--openbot-chat-entry-gap);
}
.agent-thread-queued-text {
  margin: 0;
  overflow: hidden;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-thread-composer .composer-editor-placeholder {
  inset-inline-end: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .agent-threads-tab.ui-sliding-tabs-trigger {
    animation: none;
    transition: none;
  }
  .agent-threads-tab-mark-slot {
    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-lg);
}
.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-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-2) var(--openbot-space-1);
  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;
}
.voice-panel-speed {
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
@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;
}
.voice-player-speed {
  flex: none;
  width: calc(var(--openbot-space-6) * 2);
  padding-inline: 0;
  border-radius: var(--openbot-radius-pill);
  font-variant-numeric: tabular-nums;
}
.conversation-panel[data-settings-panel] .conversation-header, .conversation-panel[data-settings-panel] .conversation-scroll, .conversation-panel[data-settings-panel] .composer-wrap {
  width: calc(100% - var(--settings-panel-width, 360px));
}
.conversation-panel[data-settings-panel] .chat-search {
  inset-inline-end: calc(var(--settings-panel-width, 360px) + 16px);
  max-width: calc(100% - var(--settings-panel-width, 360px) - 32px);
}
.conversation-panel[data-browser-side-panel] .chat-search, .conversation-panel[data-file-preview-panel] .chat-search {
  inset-inline-end: calc(var(--browser-panel-width, 380px) + 16px);
  max-width: calc(100% - var(--browser-panel-width, 380px) - 32px);
}
.conversation-panel[data-browser-side-panel] .conversation-header, .conversation-panel[data-browser-side-panel] .conversation-scroll, .conversation-panel[data-browser-side-panel] .composer-wrap, .conversation-panel[data-file-preview-panel] .conversation-header, .conversation-panel[data-file-preview-panel] .conversation-scroll, .conversation-panel[data-file-preview-panel] .composer-wrap {
  width: 100%;
}
@keyframes message-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes message-bubble-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes message-sent-in {
  from {
    transform: translateY(12px);
  }
  to {
    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, .message-entry-animated, .chat-action-entry-animated, .chat-action-target-entering, .agent-activity-entry, .agent-activity-content, .agent-activity-avatar, .agent-activity-entry .agent-activity-avatar, .agent-row-thinking-dots i, .agent-row-agent-status-responded, .agent-row-agent-status-unread, .mention-picker, .mention-picker-list, .mention-picker-highlight, .mention-picker-option[data-entering], .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;
  inset-inline-end: 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%;
  inset-inline-start: 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;
  direction: ltr;
}
.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-block: 0;
  padding-inline: var(--openbot-space-1-5) var(--openbot-space-2);
  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%;
  inset-inline-start: 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-file-tab .side-panel-tab-close {
  width: auto;
  min-width: var(--openbot-icon-md);
}
.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]) {
    width: auto;
    min-width: 0;
    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);
}
.side-panel-file-tab {
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.side-panel-file-badge {
  display: inline-flex;
}
.side-panel-file-badge > .attachment-reference-visual > svg {
  width: 12px;
  height: 12px;
}
.side-panel-file-tab .side-panel-tab-select {
  flex: 0 1 auto;
}
.side-panel-docked .file-preview-header > .file-preview-file-icon {
  display: none;
}
.side-panel-docked .file-preview-header > h2 {
  visibility: hidden;
}
.side-panel-docked > .file-preview-panel.t-panel-slide {
  transition: none;
}
.side-panel-tab-close:has(.agent-threads-state) {
  width: auto;
  min-width: var(--openbot-icon-md);
  height: auto;
  min-height: var(--openbot-icon-md);
}
.side-panel-tab:not(:hover, :focus-within) .side-panel-tab-icon:has(.agent-threads-state) {
  opacity: 1;
}
.side-panel-tab-icon .agent-threads-state-icon svg {
  width: 12px;
  height: 12px;
}
.side-panel-thread-tab {
  flex: 0 1 auto;
  width: 140px;
  min-width: 96px;
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.side-panel-thread-tab .side-panel-tab-select {
  flex: 1;
  text-align: start;
}
.side-panel-tabs[data-dragging], .side-panel-tabs[data-dragging] .side-panel-tab-select {
  cursor: grabbing;
  user-select: none;
}
.side-panel-tabs[data-dragging] > :is(.side-panel-thread-tab, .side-panel-file-tab)[data-dragged=""] {
  z-index: 2;
  background-color: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
  transition: none;
}
.side-panel-tabs[data-dragging] > .side-panel-thread-tab[data-dragged="away"] {
  opacity: 0.4;
}
.side-panel-tabs[data-dragging] > .side-panel-tab::before, .side-panel-tabs[data-dragging] .side-panel-tab-x {
  opacity: 0;
}
.side-panel-tabs[data-dragging] .side-panel-tab-close {
  background: transparent;
}
.side-panel-tabs[data-dragging] .side-panel-tab-icon {
  opacity: 0.7;
}
.side-panel-tabs[data-dragging] .side-panel-tab-icon:has(.agent-threads-state) {
  opacity: 1;
}
.thread-tab-ghost {
  position: fixed;
  z-index: 1000;
  max-width: 140px;
  white-space: nowrap;
  border: 1px solid var(--openbot-border);
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
  pointer-events: none;
  translate: -50% -50%;
}
.thread-tab-ghost .side-panel-tab-label {
  overflow: hidden;
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
}
.side-panel-drop {
  position: absolute;
  z-index: 17;
  top: calc(var(--left-header-height, 38px) + var(--openbot-space-2));
  inset-inline-end: var(--openbot-space-2);
  bottom: var(--openbot-space-2);
  display: grid;
  width: calc(var(--side-panel-width, 380px) - 2 * var(--openbot-space-2));
  place-items: start center;
  padding-top: var(--openbot-space-6);
  border: 1px dashed var(--openbot-text-secondary);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .side-panel-thread-tab, .side-panel-file-tab {
    transition: none;
  }
}
.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-block: var(--notice-inset) calc(var(--notice-inset) + var(--notice-composer-overlap));
  padding-inline: 12px var(--notice-inset);
  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-inline-end: 12px;
}
.composer-notice-icon {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--notice-accent);
  stroke-width: var(--openbot-icon-stroke-lg);
}
.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-action {
  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-action:is(:hover, :focus-visible):not(:disabled) {
  background: var(--ui-menu-item-hover);
}
.context-meter-action > 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);
  direction: ltr;
}
.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);
  stroke-width: var(--openbot-icon-stroke);
}
.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;
}
.composer-stack {
  --composer-stack-inset: var(--openbot-space-3);
}
@media (max-width: 620px) {
  .composer-stack {
    --composer-stack-inset: 2px;
  }
}
.composer-stack:has(> :not(.agent-queue-slot), > .agent-queue-slot > .agent-queue-slot-inner > *) {
  --composer-stack-overlap: 14px;
  position: relative;
  z-index: 10;
  overflow: hidden;
  margin: 0 var(--composer-stack-inset) calc(-1 * var(--composer-stack-overlap));
  border: 1px solid var(--openbot-queue-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-queue-surface);
  padding-bottom: var(--composer-stack-overlap);
}
.composer-stack :is(.awaiting-replies, .agent-queue-panel, .composer-notice, .composer-reply-preview) {
  z-index: auto;
  margin: -1px 0 0;
  border: 0;
  border-top: 1px solid var(--openbot-queue-border);
  border-radius: 0;
  box-shadow: none;
}
.composer-stack :is(.awaiting-replies, .agent-queue-panel) {
  padding-bottom: 0;
}
.composer-stack .composer-notice {
  padding-bottom: var(--notice-inset);
}
@media (prefers-reduced-motion: no-preference) {
  .composer-stack:has(> .context-compaction-notice[data-leaving]):not( :has(> :not(.agent-queue-slot, [data-leaving]), > .agent-queue-slot > .agent-queue-slot-inner > *) ) {
    animation: context-compaction-notice-out var(--openbot-duration-toast-exit) var(--openbot-ease-in-out) forwards;
  }
}
.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 {
  width: min(540px, 100%);
  margin: var(--openbot-space-3) 0 var(--openbot-space-6);
  animation: browser-takeover-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}
.browser-takeover-preview {
  min-width: 0;
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  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-surface-raised);
  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-lg);
}
.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;
}
@keyframes browser-takeover-in {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.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-button {
  border-radius: var(--openbot-radius-pill);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-regular);
}
.approval-command-block, .approval-detail-row, .approval-permissions {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface-raised);
}
.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;
}
@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;
  }
}
.feedback-offer {
  align-items: center;
  gap: var(--openbot-space-3);
  text-align: center;
}
.feedback-offer-emoji {
  font-size: var(--openbot-text-display);
  line-height: 1;
  animation: feedback-offer-wiggle 900ms var(--openbot-ease-out) 200ms both;
}
.feedback-offer-headline {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-xl);
  font-weight: var(--openbot-weight-semibold);
}
.feedback-offer-quote {
  display: grid;
  width: 100%;
  box-sizing: border-box;
  gap: var(--openbot-space-1);
  margin: 0;
  border-inline-start: 3px solid var(--openbot-border);
  color: var(--openbot-text-secondary);
  padding-inline-start: var(--openbot-space-3);
  text-align: start;
}
.feedback-offer-quote strong {
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
  overflow-wrap: anywhere;
}
.feedback-offer-quote p {
  margin: 0;
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.feedback-offer-actions {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--openbot-space-2);
}
.feedback-offer-actions > :last-child {
  flex: 1;
}
.feedback-sent {
  gap: var(--openbot-space-3);
}
.feedback-sent > * {
  animation: feedback-sent-in 320ms var(--openbot-ease-out) 80ms both;
}
.feedback-sent-badge {
  animation: feedback-sent-pop 420ms var(--openbot-ease-out) 260ms both;
}
.feedback-sent-body {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
.feedback-sent-footer {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  border-top: 1px solid var(--openbot-border);
  padding-top: var(--openbot-space-3);
}
.feedback-sent-footer > a {
  margin-inline-start: auto;
}
.feedback-sent-title {
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
@keyframes feedback-offer-wiggle {
  0% {
    opacity: 0;
    transform: scale(0.6) rotate(0);
  }
  40% {
    opacity: 1;
    transform: scale(1.1) rotate(-10deg);
  }
  70% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes feedback-sent-in {
  from {
    opacity: 0;
    transform: translateY(6px);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}
@keyframes feedback-sent-pop {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  60% {
    opacity: 1;
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .feedback-offer-emoji, .feedback-sent > *, .feedback-sent-badge {
    animation: none;
  }
}
.question-prompt-bubble.ui-bubble {
  width: min(540px, 100%);
  max-width: 100%;
}
.question-prompt-bubble[data-entrance] {
  animation: question-prompt-in var(--page-slide-dur) var(--page-slide-ease) both;
}
@keyframes question-prompt-in {
  from {
    opacity: 0;
    transform: translateY(var(--page-slide-distance));
    filter: blur(var(--page-blur));
  }
}
.question-prompt-bubble > .ui-bubble-content {
  width: 100%;
  padding: var(--openbot-space-4) var(--openbot-space-2) var(--openbot-space-2);
}
.question-prompt-form.ui-questionnaire {
  position: relative;
  gap: 0;
}
.question-prompt-cancel.ui-button {
  position: absolute;
  z-index: 2;
  inset-block-start: calc(-1 * var(--openbot-space-2));
  inset-inline-end: 0;
  color: var(--openbot-text-muted);
}
.question-prompt-stage {
  display: grid;
  overflow: hidden;
  outline: 0;
  transition: height var(--page-slide-dur) var(--page-slide-ease);
}
.question-prompt-page {
  grid-area: 1 / 1;
  align-self: start;
  min-width: 0;
  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), visibility 0s linear var(--page-slide-dur);
}
.question-prompt-page[data-pos="prev"], .question-prompt-page[data-pos="next"] {
  opacity: 0;
  filter: blur(var(--page-blur));
  visibility: hidden;
}
.question-prompt-page[data-pos="prev"] {
  transform: translateX(calc(-1 * var(--page-slide-distance)));
}
.question-prompt-page[data-pos="next"] {
  transform: translateX(var(--page-slide-distance));
}
:dir(rtl) .question-prompt-page[data-pos="prev"] {
  transform: translateX(var(--page-slide-distance));
}
:dir(rtl) .question-prompt-page[data-pos="next"] {
  transform: translateX(calc(-1 * var(--page-slide-distance)));
}
.question-prompt-page[data-pos="current"] {
  transition-delay: 0s, 0s, 0s, 0s;
}
.question-prompt-fold {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--acc-collapse) var(--acc-ease);
}
.question-prompt-fold[data-open="true"] {
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--acc-expand) var(--acc-ease);
}
.question-prompt-fold-inner {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  filter: blur(var(--text-swap-blur));
  transition: opacity var(--acc-collapse) var(--acc-ease), filter var(--acc-collapse) var(--acc-ease);
}
.question-prompt-fold[data-open="true"] .question-prompt-fold-inner {
  opacity: 1;
  filter: blur(0);
  transition: opacity var(--acc-expand) var(--acc-ease), filter var(--acc-expand) var(--acc-ease);
}
.question-prompt-header {
  display: grid;
  gap: var(--openbot-space-0-5);
  padding: 0 var(--openbot-space-2) var(--openbot-space-2);
}
.question-prompt-page:not(.question-prompt-summary) .question-prompt-header {
  padding-inline-end: var(--openbot-space-8);
}
.question-prompt-title {
  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);
  letter-spacing: var(--openbot-tracking-tight);
  overflow-wrap: anywhere;
}
.question-prompt-detail {
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.question-prompt-options {
  gap: var(--openbot-space-0-5);
}
.question-prompt-options > .question-prompt-option {
  position: relative;
  min-width: 0;
  min-height: 40px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: var(--openbot-space-3);
  border-radius: var(--openbot-radius-md);
  padding: var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  cursor: pointer;
  transition: background-color var(--openbot-duration-fast) ease-out;
}
.question-prompt-option:hover:not([data-disabled]), .question-prompt-custom:focus-within {
  background: var(--openbot-question-option-soft);
}
.question-prompt-option[data-checked] {
  background: var(--openbot-question-option-hover);
}
.question-prompt-option:active:not([data-disabled]) {
  background: var(--openbot-question-option-pressed);
}
.question-prompt-option.ui-questionnaire-choice:focus-within {
  outline: 0;
}
.question-prompt-option:has(.ui-questionnaire-choice-input:focus-visible) {
  background: var(--openbot-question-option-soft);
  box-shadow: inset 0 0 0 1px var(--openbot-question-option);
}
.question-prompt-option-text {
  min-width: 0;
  display: grid;
}
.question-prompt-option-label {
  overflow-wrap: anywhere;
}
.question-prompt-option-description {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  overflow-wrap: anywhere;
}
.question-prompt-letter.ui-kbd {
  width: 22px;
  min-width: 22px;
  height: 22px;
  border-color: transparent;
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-question-badge-soft);
  color: var(--openbot-question-badge-text);
  font-family: var(--openbot-font-sans);
  font-weight: var(--openbot-weight-semibold);
  transition: background-color var(--openbot-duration-fast) ease-out, color var(--openbot-duration-fast) ease-out;
}
.question-prompt-answer-skipped .question-prompt-letter.ui-kbd {
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-muted);
}
.question-prompt-option[data-checked] .question-prompt-letter.ui-kbd {
  background: var(--openbot-question-option);
  color: var(--openbot-text-on-status);
  animation: question-prompt-badge-pop var(--openbot-duration-slow) var(--openbot-ease-out);
}
.question-prompt-letter[data-answered].ui-kbd {
  background: var(--openbot-success);
  color: var(--openbot-text-on-status);
}
.question-prompt-bubble[data-entrance][data-state="done"] .question-prompt-letter[data-answered].ui-kbd {
  animation: question-prompt-badge-pop var(--openbot-duration-slow) var(--openbot-ease-out) var(--openbot-duration-fast) both;
}
@keyframes question-prompt-badge-pop {
  from {
    transform: scale(0.8);
  }
}
.question-prompt-custom {
  cursor: text;
}
.question-prompt-custom-input.ui-input {
  width: 100%;
  min-width: 0;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  color: var(--openbot-text-primary);
  font: inherit;
}
.question-prompt-custom-input.ui-input::placeholder {
  color: var(--openbot-text-muted);
}
.question-prompt-custom-input.ui-input:focus, .question-prompt-custom-input.ui-input:focus-visible {
  outline: 0;
  box-shadow: none;
}
.question-prompt-footer {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  padding-block: var(--openbot-space-3) var(--openbot-space-1);
  padding-inline: var(--openbot-space-2) var(--openbot-space-1);
}
.question-prompt-progress.ui-questionnaire-progress {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
}
.question-prompt-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-dim);
  transition: width var(--page-slide-dur) var(--page-slide-ease), background-color var(--page-slide-dur) var(--page-slide-ease), opacity var(--page-slide-dur) var(--page-slide-ease);
}
.question-prompt-dot[data-state="done"] {
  background: var(--openbot-question-badge-text);
  opacity: 0.55;
}
.question-prompt-dot[data-state="current"] {
  width: 18px;
  background: var(--openbot-question-option);
}
.question-prompt-actions {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-inline-start: auto;
}
.question-prompt-pill.ui-button {
  border-radius: var(--openbot-radius-pill);
  padding-inline: var(--openbot-space-4);
  font-size: var(--openbot-text-md);
}
.question-prompt-summary {
  display: grid;
}
.question-prompt-section .question-prompt-title {
  padding: 0 var(--openbot-space-2) var(--openbot-space-1);
  color: var(--openbot-text-muted);
}
.question-prompt-section + .question-prompt-section {
  margin-top: var(--openbot-space-2);
  border-top: 1px solid var(--openbot-border);
  padding-top: var(--openbot-space-3);
}
.question-prompt-answers {
  display: grid;
  gap: var(--openbot-space-1);
  margin: 0;
  list-style: none;
}
.question-prompt-answers, .question-prompt-answer-skipped {
  padding: var(--openbot-space-0-5) var(--openbot-space-2) var(--openbot-space-2);
}
.question-prompt-answer {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: var(--openbot-space-3);
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  overflow-wrap: anywhere;
}
.question-prompt-answer-skipped {
  color: var(--openbot-text-muted);
}
.question-prompt-closed {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin: 0;
  padding: 0 var(--openbot-space-2) var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.question-prompt-closed svg {
  width: 16px;
  height: 16px;
  flex: none;
}
.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-footer {
    flex-wrap: wrap;
  }
  .question-prompt-pill.ui-button {
    padding-inline: var(--openbot-space-3);
  }
}
@media (prefers-reduced-motion: reduce) {
  .question-prompt-bubble[data-entrance], .question-prompt-letter.ui-kbd, .question-prompt-option[data-checked] .question-prompt-letter.ui-kbd, .question-prompt-bubble[data-entrance][data-state="done"] .question-prompt-letter[data-answered].ui-kbd {
    animation: none;
  }
  :is( .question-prompt-stage, .question-prompt-page, .question-prompt-fold, .question-prompt-fold-inner, .question-prompt-letter, .question-prompt-dot, .question-prompt-option ) {
    transition: none;
  }
}
.ui-block-card.ui-bubble {
  width: min(540px, 100%);
  max-width: 100%;
}
.ui-block-card > .ui-block-content {
  container: ui-block / inline-size;
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-4) var(--openbot-space-4) var(--openbot-space-3);
}
.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;
  gap: var(--openbot-space-3);
}
.ui-block-heading {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: var(--openbot-space-0-5);
}
.ui-block-title {
  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);
  letter-spacing: var(--openbot-tracking-tight);
  overflow-wrap: anywhere;
}
.ui-block-subtitle {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.ui-block-header:has(> .ui-block-status) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--openbot-space-3);
  row-gap: var(--openbot-space-0-5);
}
.ui-block-header:has(> .ui-block-status) > .ui-block-heading {
  display: contents;
}
.ui-block-header:has(> .ui-block-status):has(> .ui-block-icon) {
  grid-template-columns: auto minmax(0, 1fr) auto;
}
.ui-block-header:has(> .ui-block-status) > .ui-block-icon {
  grid-row: 1 / span 2;
  grid-column: 1;
}
.ui-block-header:has(> .ui-block-status):has(> .ui-block-icon):not(:has(.ui-block-subtitle)) > :is(.ui-block-icon, .ui-block-status) {
  grid-row: 1;
  align-self: center;
}
.ui-block-header:has(> .ui-block-status) .ui-block-title {
  grid-row: 1;
  grid-column: -3 / -2;
  align-self: center;
}
.ui-block-header:has(> .ui-block-status) .ui-block-subtitle {
  grid-column: -3 / -1;
}
.ui-block-status {
  grid-row: 1;
  grid-column: -2 / -1;
  align-self: start;
}
.ui-block-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--openbot-space-3);
}
.ui-block-body:empty {
  display: none;
}
.ui-block-card-footer {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--openbot-space-2);
}
.ui-block-footer-select {
  width: auto;
  max-width: 100%;
  flex: none;
}
.ui-block-footer-select > .ui-select-trigger {
  width: auto;
  max-width: 100%;
}
.ui-block-card[data-inline-actions] > .ui-block-content {
  flex-flow: row wrap;
  align-items: center;
  column-gap: var(--openbot-space-4);
  padding-block: var(--openbot-space-3);
}
.ui-block-card[data-inline-actions] > .ui-block-content > .ui-block-header {
  flex: 1 1 240px;
}
.ui-block-card[data-inline-actions] > .ui-block-content > .ui-block-card-footer {
  flex: none;
  margin-inline-start: auto;
}
.ui-block-card[data-inline-actions] > .ui-block-content > :is(.ui-block-body, .ui-block-error, .ui-block-outcome) {
  flex-basis: 100%;
  order: 1;
}
.ui-block-card[data-inline-actions] .ui-block-header:has(> .ui-block-status):has(.ui-block-subtitle) > :is(.ui-block-icon, .ui-block-status) {
  grid-row: 1 / span 2;
  align-self: center;
}
.ui-block-card[data-inline-actions] .ui-block-header:has(> .ui-block-status):has(.ui-block-subtitle) .ui-block-subtitle {
  grid-row: 2;
  grid-column: -3 / -2;
}
.ui-block-card[data-inline-actions] > .ui-block-content > .ui-block-header {
  min-height: calc(var(--openbot-leading-lg) + var(--openbot-space-0-5) + var(--openbot-leading-md));
}
.ui-block-card[data-settled] .ui-block-header > .ui-block-status {
  animation: ui-block-status-in var(--openbot-duration-overlay) var(--openbot-ease-out) both;
}
@keyframes ui-block-status-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}
.ui-block-card[data-inline-actions] .ui-block-header > .ui-block-status {
  height: var(--openbot-control-md);
  padding-inline: var(--openbot-space-4);
  border-radius: var(--openbot-radius-pill);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.ui-block-card[data-inline-actions][data-status="answered"] .ui-block-header > .ui-block-status {
  border-color: transparent;
  background: var(--openbot-success);
  color: var(--openbot-text-on-light);
}
:root[data-openbot-color-scheme="light"] .ui-block-card[data-inline-actions][data-status="answered"] .ui-block-header > .ui-block-status {
  background: var(--openbot-success-text);
}
.ui-block-card[data-danger][data-status="pending"] > .ui-block-content {
  border-color: var(--openbot-danger-border);
}
.ui-block-outcome {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.ui-block-outcome[data-status="answered"] {
  color: var(--openbot-text-secondary);
}
.ui-block-outcome svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
}
.ui-block-outcome-check {
  color: var(--openbot-success-text);
}
.ui-block-outcome-text {
  min-width: 0;
  overflow-wrap: anywhere;
}
.ui-block-error {
  min-width: 0;
  margin: 0;
  color: var(--openbot-danger-text);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  overflow-wrap: anywhere;
}
.ui-block-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--openbot-space-2);
}
.ui-block-card-footer > .ui-block-actions {
  justify-content: flex-end;
  margin-inline-start: auto;
}
.ui-block-card-footer > .ui-block-actions > .ui-button {
  flex-grow: 1;
}
.ui-block-card .ui-block-actions .ui-button {
  border-radius: var(--openbot-radius-pill);
  padding-inline: var(--openbot-space-4);
  font-size: var(--openbot-text-md);
}
.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-confirm-step > .ui-block-actions {
  justify-content: flex-end;
}
.ui-block-hint, .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 {
  max-height: 16em;
  overflow-y: auto;
  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[data-expanded="true"] {
  max-height: none;
}
.ui-block-preview[data-clamped="true"] {
  position: relative;
  overflow: clip;
}
.ui-block-preview[data-clamped="true"]::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2.5em;
  background: linear-gradient(to bottom, transparent, var(--openbot-bg-surface-raised));
  pointer-events: none;
}
.ui-block-preview-toggle {
  align-self: flex-start;
  margin-top: calc(var(--openbot-space-2) * -1);
}
.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;
}
:dir(rtl) .ui-block-hold-fill {
  transform-origin: right;
}
.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 {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-0-5);
  margin: 0 calc(-1 * var(--openbot-space-2));
  padding: 0;
  border: 0;
}
.ui-block-option {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 40px;
  grid-template-columns: 22px minmax(0, 1fr) fit-content(40%);
  align-items: center;
  gap: var(--openbot-space-3);
  border-radius: var(--openbot-radius-md);
  padding: var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  cursor: pointer;
  transition: background-color var(--openbot-duration-fast) ease-out;
}
.ui-block-option:hover:not([data-disabled]) {
  background: var(--openbot-question-option-soft);
}
.ui-block-option[data-checked] {
  background: var(--openbot-question-option-hover);
}
.ui-block-option:active:not([data-disabled]) {
  background: var(--openbot-question-option-pressed);
}
.ui-block-option[data-disabled] {
  cursor: default;
}
.ui-block-option[data-disabled]:not([data-checked]) {
  opacity: 0.5;
}
.ui-block-option:has(.ui-block-option-input:focus-visible) {
  background: var(--openbot-question-option-soft);
  box-shadow: inset 0 0 0 1px var(--openbot-question-option);
}
.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.ui-kbd {
  width: 22px;
  min-width: 22px;
  height: 22px;
  border-color: transparent;
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-question-badge-soft);
  color: var(--openbot-question-badge-text);
  font-family: var(--openbot-font-sans);
  font-weight: var(--openbot-weight-semibold);
  transition: background-color var(--openbot-duration-fast) ease-out, color var(--openbot-duration-fast) ease-out;
}
.ui-block-option[data-checked] .ui-block-option-key.ui-kbd {
  background: var(--openbot-question-option);
  color: var(--openbot-text-on-status);
}
.ui-block-option-label {
  min-width: 0;
  overflow-wrap: anywhere;
}
.ui-block-option-meta {
  min-width: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.ui-block-option-custom {
  cursor: text;
}
.ui-block-option-custom:focus-within {
  background: var(--openbot-question-option-soft);
}
.ui-block-option-custom-input.ui-input {
  width: 100%;
  min-width: 0;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  color: var(--openbot-text-primary);
  font: inherit;
}
.ui-block-option-custom-input.ui-input::placeholder {
  color: var(--openbot-text-muted);
}
.ui-block-option-custom-input.ui-input:focus, .ui-block-option-custom-input.ui-input:focus-visible {
  outline: 0;
  box-shadow: none;
}
.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);
}
.ui-block-header:has(> .ui-block-icon) {
  align-items: center;
}
.ui-block-answer-rows {
  display: flex;
  min-width: 0;
  flex-direction: column;
  margin: 0;
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-canvas);
}
.ui-block-answer-row {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--openbot-space-4);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.ui-block-answer-row + .ui-block-answer-row {
  border-top: 1px solid var(--openbot-border-grouped);
}
.ui-block-answer-row > dt {
  flex: none;
  color: var(--openbot-text-muted);
}
.ui-block-answer-row > dd {
  min-width: 0;
  margin: 0;
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
  text-align: end;
}
.ui-block-answer-value {
  overflow-wrap: anywhere;
}
.ui-block-answer-hidden {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  color: var(--openbot-text-dim);
  vertical-align: top;
}
.ui-block-answer-hidden > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: none;
  color: var(--openbot-text-muted);
}
@media (prefers-reduced-motion: reduce) {
  .ui-block-option, .ui-block-option-key.ui-kbd, .ui-block-hold-fill {
    transition: none;
  }
  .ui-block-card[data-settled] .ui-block-header > .ui-block-status {
    animation: none;
  }
}
@container ui-block (width < 360px) {
  .ui-block-card.ui-bubble > .ui-block-content > .ui-block-header:has(> .ui-block-status) {
    grid-template-columns: minmax(0, 1fr);
  }
  .ui-block-card.ui-bubble > .ui-block-content > .ui-block-header:has(> .ui-block-status):has(> .ui-block-icon) {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .ui-block-card.ui-bubble > .ui-block-content > .ui-block-header:has(> .ui-block-status) .ui-block-title {
    grid-row: 1;
    grid-column: -2 / -1;
  }
  .ui-block-card.ui-bubble > .ui-block-content > .ui-block-header:has(> .ui-block-status) .ui-block-subtitle {
    grid-row: 2;
    grid-column: -2 / -1;
  }
  .ui-block-card.ui-bubble > .ui-block-content > .ui-block-header:has(> .ui-block-status) > .ui-block-icon {
    grid-row: 1 / span 2;
    grid-column: 1;
    align-self: start;
  }
  .ui-block-card.ui-bubble > .ui-block-content > .ui-block-header:has(> .ui-block-status) > .ui-block-status {
    grid-row: 3;
    grid-column: -2 / -1;
    justify-self: start;
    align-self: start;
    margin-top: var(--openbot-space-1);
  }
  .ui-block-card.ui-bubble[data-inline-actions] > .ui-block-content > .ui-block-header:has(> .ui-block-status) > .ui-block-status {
    justify-self: end;
  }
  .ui-block-card.ui-bubble > .ui-block-content > .ui-block-card-footer > .ui-block-actions {
    flex: 1 1 100%;
    flex-wrap: wrap;
  }
  .ui-block-card.ui-bubble > .ui-block-content > .ui-block-card-footer > .ui-block-actions > .ui-button {
    flex: 1 1 auto;
  }
}
.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 {
  flex: 1 1 auto;
  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-close {
  border-radius: var(--openbot-radius-sm);
}
.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-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-lg);
}
.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);
  inset-inline-end: 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);
  color: var(--openbot-text-primary);
}
.browser-secret-card .ui-block-subtitle {
  overflow-wrap: anywhere;
}
.browser-secret-fields {
  display: grid;
  min-width: 0;
}
.browser-secret-card[data-variant="island"] {
  display: grid;
  gap: var(--openbot-space-4);
  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-inline-start: 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-save-option {
  display: grid;
  gap: var(--openbot-space-0-5);
}
.browser-secret-save {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  font-size: var(--openbot-text-sm);
}
.browser-secret-save-server {
  font-weight: var(--openbot-weight-medium);
}
.browser-secret-save-hint {
  margin: 0;
  padding-inline-start: calc(var(--openbot-icon-sm) + var(--openbot-space-1-5));
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.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-card .ui-block-card-footer > .browser-secret-private {
  flex: 1 1 12rem;
}
.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;
}
:root[data-surface="browser-dock"], :root[data-surface="browser-dock"] body, :root[data-surface="browser-dock"] #root {
  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);
  inset-inline-end: var(--openbot-space-4);
  display: flex;
  width: min(560px, calc(100% - 2 * var(--openbot-space-4)));
  flex-direction: column;
  align-items: flex-end;
  gap: var(--openbot-space-2);
  isolation: isolate;
}
.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-tab 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"], [data-mode="prompt"], [data-mode="approval"]) {
  width: 100%;
  border-radius: var(--openbot-radius-lg);
}
.browser-dock-island:is([data-mode="secret"], [data-mode="prompt"], [data-mode="approval"]) {
  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[data-mode="secret"] {
  width: min(100%, 420px);
}
.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-card {
  display: grid;
  max-height: 420px;
  gap: var(--openbot-space-2);
  overflow: auto;
  padding: var(--openbot-space-3);
  color: var(--openbot-text-primary);
}
.browser-dock-island-card :is(.question-prompt-bubble, .ui-bubble-content, .approval-card) {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
}
.browser-dock-island-card > * {
  margin: 0;
}
.browser-dock-island-activity {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  padding-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-2) var(--openbot-space-1);
  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-inline-start: auto;
  border-radius: var(--openbot-radius-pill);
}
.browser-dock-island-reply {
  display: grid;
  gap: var(--openbot-space-1-5);
  padding-block: var(--openbot-space-2) var(--openbot-space-3);
  padding-inline: var(--openbot-space-3) var(--openbot-space-2);
  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-inline-start: auto;
}
.browser-dock-reply-body {
  max-height: 160px;
  padding-inline-end: 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-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-2) var(--openbot-space-1);
}
.browser-dock-avatar {
  width: 20px;
  height: 20px;
  flex: none;
}
.browser-dock[data-glassless] .browser-dock-composer {
  border-color: transparent;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
}
.browser-dock-hide {
  border-radius: var(--openbot-radius-pill);
}
.browser-dock .browser-dock-tab {
  position: absolute;
  bottom: 0;
  overflow: hidden;
  max-width: min(360px, 100%);
  height: auto;
  box-sizing: border-box;
  justify-content: flex-start;
  padding-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-2) var(--openbot-space-3);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: inherit;
  gap: var(--openbot-space-2);
  inset-inline-end: 0;
  line-height: 1;
  white-space: nowrap;
}
.browser-dock:is([data-tucked], [data-phase="showing"]) > :not(.browser-dock-tab, .browser-dock-tuck-glass) {
  visibility: hidden;
}
.browser-dock:not([data-tucked]) > .browser-dock-tab {
  visibility: hidden;
}
.browser-dock .browser-dock-glass.browser-dock-tab:hover {
  background: var(--openbot-bg-glass);
}
.browser-dock-tab-avatar {
  position: relative;
  display: flex;
  height: 28px;
  flex: none;
  align-items: center;
}
.browser-dock-tab-avatar[data-working]::after {
  position: absolute;
  border: 1.5px solid transparent;
  border-radius: var(--openbot-radius-pill);
  border-top-color: var(--openbot-accent);
  border-right-color: var(--openbot-accent);
  animation: ui-spin 900ms linear infinite;
  content: "";
  inset: 3px -1px;
}
.browser-dock-tab-avatar[data-unread]::after {
  position: absolute;
  top: 3px;
  right: -2px;
  width: 7px;
  height: 7px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
  content: "";
}
.browser-dock-tab-label {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
}
.browser-dock .browser-dock-tab .browser-dock-tab-chevron {
  flex: none;
  color: var(--openbot-text-secondary);
  transition: translate var(--openbot-duration-normal) var(--openbot-ease-out);
}
.browser-dock-tab:hover .browser-dock-tab-chevron {
  translate: 0 -2px;
}
.browser-dock-tuck-glass {
  z-index: 0;
  border-radius: var(--openbot-radius-pill);
}
.browser-dock:is([data-tucked], [data-phase="showing"]) {
  width: var(--browser-dock-open-width, min(560px, calc(100% - 2 * var(--openbot-space-4))));
  pointer-events: none;
}
.browser-dock[data-tucked] > .browser-dock-tab {
  pointer-events: auto;
}
.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-block: 0;
  padding-inline: var(--openbot-space-1-5) var(--openbot-space-2);
  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;
  }
  .browser-dock-tab-avatar[data-working]::after {
    animation: none;
  }
}
body[data-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-frame);
  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;
  direction: ltr;
  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-chip[data-profile-color]::after {
  position: absolute;
  right: var(--openbot-space-2);
  bottom: 2px;
  left: var(--openbot-space-2);
  height: 2px;
  border-radius: var(--openbot-radius-pill);
  background: var(--browser-profile-color);
  content: "";
  pointer-events: none;
}
.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 {
  position: relative;
  width: var(--openbot-space-8);
  height: var(--openbot-space-8);
  flex-shrink: 0;
  border-radius: var(--openbot-radius-pill);
}
.channel-avatar-cluster {
  --channel-avatar-size: var(--agent-row-avatar-size, 36px);
  --channel-avatar-pitch: calc(var(--channel-avatar-size) * 0.38);
  --channel-avatar-face: calc(var(--channel-avatar-size) * 0.54);
  --agent-avatar-outline-width: 2px;
  --channel-avatar-ring-outline: 2px;
  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 .agent-avatar-custom {
  --channel-avatar-face: calc(var(--channel-avatar-size) * 0.46);
}
.channel-avatar:where(:not(.channel-avatar-cluster)) .agent-avatar + .agent-avatar {
  margin-inline-start: calc(-1 * var(--openbot-space-4));
}
.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) ~ :last-child {
  grid-column: 1 / span 2;
}
.sidebar .channel-avatar-cluster {
  --agent-avatar-outline-width: 3.5px;
  --channel-avatar-ring-outline: 3px;
}
.agent-row.sidebar-pinned-row .channel-avatar-cluster {
  --channel-avatar-size: var(--sidebar-pinned-avatar-size, 56px);
}
.agent-row.sidebar-pinned-row .channel-avatar-cluster .agent-avatar {
  width: var(--channel-avatar-face);
  height: var(--channel-avatar-face);
}
.channel-avatar-count {
  --felt-box: calc(var(--channel-avatar-size) * 0.46);
  position: relative;
  display: grid;
  box-sizing: border-box;
  min-width: var(--felt-box);
  height: var(--felt-box);
  isolation: isolate;
  padding-inline: 4px;
  place-items: center;
  border-radius: var(--openbot-radius-pill);
  outline: var(--channel-avatar-ring-outline) solid var(--agent-avatar-outline, transparent);
  box-shadow: 0 0 0 var(--agent-avatar-outline-width) var(--agent-avatar-outline, transparent);
  background: linear-gradient(to bottom, var(--openbot-felt-plum-top), var(--openbot-felt-plum-bottom));
  color: var(--openbot-felt-cream);
  font-size: var(--openbot-text-sm);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
:is(.channel-avatar-count, .agent-row-unread-count) {
  font-weight: 800;
  paint-order: stroke fill;
  -webkit-text-stroke: 0.7px var(--openbot-felt-cream-stroke);
}
:is(.channel-avatar-count, .agent-row-agent-status-unread, .agent-row-agent-status-waiting)::before {
  --felt-slice: calc(var(--felt-box) / 1.62);
  --felt-edge: calc(var(--felt-slice) * 0.19);
  position: absolute;
  z-index: -1;
  inset: calc(-1 * var(--felt-edge));
  border: var(--felt-slice) solid transparent;
  border-image: url("/@fs/home/ubuntu/openbot/packages/ui/src/assets/plush/felt-pill-lilac.webp") 49% fill / var(--felt-slice) stretch;
  clip-path: inset(calc(var(--felt-edge) + 0.25px) round calc(var(--felt-box) / 2 - 0.25px));
  filter: brightness(0.52) saturate(1.35) contrast(1.1);
  content: "";
}
.agent-row-agent-status-waiting::before {
  border-image-source: url("/@fs/home/ubuntu/openbot/packages/ui/src/assets/plush/felt-pill-amber.webp");
  filter: none;
}
.sidebar .channel-avatar-cluster .channel-avatar-count {
  translate: 0 1.5px;
}
.sidebar .channel-avatar-cluster .agent-avatar:has(> .bloub-avatar-svg image) {
  filter: url("#sidebar-plush-ring");
}
.sidebar .channel-avatar-cluster .agent-avatar:has(> .bloub-avatar-svg image) > .bloub-avatar-svg {
  filter: none;
}
.sidebar :is(.agent-row:hover, .agent-row-active) .channel-avatar-cluster .agent-avatar:has(> .bloub-avatar-svg image) {
  filter: url("#sidebar-plush-ring-raised");
}
@media (hover: hover) and (pointer: fine) and (min-width: 601px) {
  .sidebar .agent-row:hover .channel-avatar-cluster .agent-avatar:has(> .bloub-avatar-svg image) {
    filter: url("#sidebar-plush-ring-hover");
  }
}
:root[data-openbot-color-scheme="light"] .sidebar .agent-row-active .channel-avatar-cluster .agent-avatar:has(> .bloub-avatar-svg image) {
  filter: url("#sidebar-plush-ring-selected");
}
.sidebar .agent-list[data-sidebar-dragging] .agent-row:hover:not(.agent-row-active) .channel-avatar-cluster .agent-avatar:has(> .bloub-avatar-svg image) {
  filter: url("#sidebar-plush-ring");
}
.channel-avatar-picture {
  width: var(--channel-avatar-size, var(--openbot-space-8));
  min-width: var(--channel-avatar-size, var(--openbot-space-8));
  height: var(--channel-avatar-size, var(--openbot-space-8));
}
.channel-picture {
  display: grid;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  place-items: center;
  overflow: hidden;
  border-radius: var(--openbot-radius-sm);
  background: var(--channel-picture-hue);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in oklab, var(--channel-picture-hue) 26%, var(--openbot-bg-control));
  }
  color: var(--channel-picture-hue);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, var(--channel-picture-hue) 78%, var(--openbot-text-primary));
  }
}
.channel-picture > svg {
  width: 55%;
  height: 55%;
}
.channel-picture-image {
  object-fit: cover;
  background: var(--openbot-bg-control);
}
.channel-icon-grid .channel-picture {
  width: 32px;
  height: 32px;
}
.channel-icon-grid .channel-picture > svg {
  width: 18px;
  height: 18px;
}
.channel-avatar-cluster .channel-picture {
  border-radius: var(--openbot-radius-lg);
}
.channel-picture-trigger .channel-picture {
  border-radius: var(--openbot-radius-xl);
}
.channel-picture-editor .avatar-image-upload-preview .channel-picture {
  width: 100%;
  height: 100%;
}
.agent-row.sidebar-pinned-row .channel-avatar-cluster .channel-picture {
  border-radius: var(--openbot-radius-xl);
}
.channel-picture-trigger {
  --agent-row-avatar-size: 62px;
  position: relative;
  display: grid;
  width: 62px;
  height: 62px;
  margin: 0;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-xl);
  background: transparent;
}
.channel-picture-trigger:hover {
  filter: brightness(1.08);
}
.channel-picture-editor .avatar-image-upload-preview {
  border-radius: var(--openbot-radius-md);
}
.channel-picture-editor .channel-icon-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.channel-icon-grid .channel-icon-choice {
  height: 44px;
}
.channel-picture-editor .channel-icon-color-grid {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}
.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: start;
  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 .channel-avatar-picture {
  --channel-avatar-size: 20px;
}
.channel-title .agent-avatar {
  --agent-avatar-optical-offset: -2px;
  width: 18px;
  height: 18px;
}
.channel-title .channel-avatar .agent-avatar + .agent-avatar {
  margin-inline-start: -8px;
}
.channel-title, .channel-empty {
  --agent-avatar-outline: var(--openbot-bg-canvas);
}
@media (hover: hover) and (pointer: fine) and (min-width: 601px) {
  .conversation-header .channel-title:hover:not(:disabled) {
    --agent-avatar-outline: var(--openbot-bg-control-hover);
  }
}
.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-inline-start: var(--openbot-space-0-5);
}
.channel-activity-faces {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}
.channel-activity-faces .agent-activity-avatar {
  transition: transform var(--openbot-duration-overlay) var(--openbot-ease-out), opacity var(--openbot-duration-overlay) var(--openbot-ease-out), margin-inline-end var(--openbot-duration-overlay) var(--openbot-ease-in-out);
}
.channel-activity-faces .agent-activity-avatar + .agent-activity-avatar {
  margin-inline-start: calc(-1 * var(--openbot-space-2));
}
.channel-activity-faces .channel-activity-face-leaving {
  margin-inline-end: calc(-1 * var(--openbot-space-6));
  opacity: 0;
  transform: translateY(4px) scale(0.6);
}
@media (prefers-reduced-motion: reduce) {
  .channel-activity-faces .agent-activity-avatar {
    transition: none;
  }
}
.channel-activity-names {
  flex: 0 1 auto;
  min-width: 0;
  margin-inline-start: var(--openbot-space-2);
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.channel-activity-name {
  color: var(--channel-activity-name-color, var(--openbot-text-muted));
}
.channel-activity-content .agent-activity-label {
  flex-shrink: 0;
}
.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-text {
  min-width: 0;
  flex: 1 1 24ch;
}
.channel-paused-task-subject {
  margin: 0;
  overflow: hidden;
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.channel-paused-task-reason {
  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);
}
.channel-context-actions .ui-item-description {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
.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-actions .header-panel-toggle > svg:dir(rtl), .diagram-inspector .header-panel-toggle > svg:dir(rtl) {
  transform: scaleX(-1);
}
.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-inline-start: auto;
}
.diagram-view-body {
  --diagram-inspector-width: 340px;
  position: relative;
  display: flex;
  min-height: 0;
  flex: 1;
  transition: padding-inline-end var(--panel-resize-duration, var(--openbot-duration-overlay)) cubic-bezier(0.22, 1, 0.36, 1);
}
.diagram-view-body[data-inspector="open"] {
  padding-inline-end: var(--diagram-inspector-width);
}
.diagram-view-canvas {
  position: relative;
  display: flex;
  min-width: 0;
  flex: 1;
}
.diagram-view-chat {
  position: absolute;
  bottom: var(--openbot-space-4);
  inset-inline-start: 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;
  direction: ltr;
  transform-origin: 0 0;
}
.diagram-board-world[data-settling] {
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.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% - var(--diagram-new-agent-height, 188px) - var(--openbot-space-2)) );
  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;
}
.diagram-new-agent-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-1);
}
.diagram-board-zoom {
  position: absolute;
  inset-inline-end: 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;
  inset-inline-end: 0;
  bottom: 0;
  display: flex;
  width: var(--diagram-inspector-width);
  min-height: 0;
  flex-direction: column;
  border-inline-start: 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: start;
}
.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-inline-start: 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-block: var(--openbot-space-2);
  padding-inline: var(--openbot-space-3) var(--openbot-space-2);
}
.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;
  }
}
.diagram-empty {
  container-type: inline-size;
}
.diagram-empty-viewport {
  display: grid;
  background-image: none;
  cursor: default;
}
.diagram-empty-backdrop {
  position: relative;
  grid-area: 1 / 1;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  opacity: 0.62;
  mask-image: radial-gradient(ellipse 30% 30% at 50% 50%, var(--openbot-transparent) 55%, var(--openbot-text-primary) 100%), radial-gradient(ellipse 80% 85% at 50% 50%, var(--openbot-text-primary) 55%, var(--openbot-transparent) 100%);
  mask-composite: intersect;
}
.diagram-empty-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, var(--openbot-border-strong) 1px, var(--openbot-transparent) 0);
  background-size: 24px 24px;
}
.diagram-empty-world {
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  transform-origin: center;
  scale: var(--diagram-empty-scale);
  transition: opacity 900ms var(--openbot-ease-out), filter 900ms var(--openbot-ease-out);
}
.diagram-empty-backdrop[data-leaving] .diagram-empty-world {
  opacity: 0;
  filter: blur(4px);
}
.diagram-empty-node {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(12px) scale(0.96);
  transition: opacity 700ms var(--openbot-ease-out), filter 700ms var(--openbot-ease-out), transform 700ms var(--openbot-ease-out);
}
.diagram-empty-node[data-shown] {
  opacity: 1;
  filter: blur(0);
  transform: none;
}
.diagram-empty-node .diagram-node {
  cursor: default;
}
.diagram-empty .diagram-empty-edge[data-state="idle"] .diagram-edge-line {
  stroke-dasharray: 1600;
  stroke-dashoffset: 1600;
  transition: stroke-dashoffset 900ms var(--openbot-ease-in-out) 350ms;
}
.diagram-empty .diagram-empty-edge[data-drawn] .diagram-edge-line {
  stroke-dashoffset: 0;
}
.diagram-empty .diagram-empty-edge[data-state] .diagram-edge-arrow {
  opacity: 0;
  transition: opacity 300ms var(--openbot-ease-out) 1100ms;
}
.diagram-empty .diagram-empty-edge[data-drawn] .diagram-edge-arrow {
  opacity: 1;
}
.diagram-empty-pulse {
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: var(--openbot-radius-pill);
  background: var(--diagram-routine-color, var(--openbot-accent));
  outline: 4px solid var(--diagram-routine-soft, var(--openbot-accent-soft));
  offset-rotate: 0deg;
  animation: diagram-empty-pulse 900ms var(--openbot-ease-in-out) both;
}
@keyframes diagram-empty-pulse {
  0% {
    offset-distance: 0%;
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}
.diagram-empty-pitch {
  z-index: 1;
  display: grid;
  grid-area: 1 / 1;
  max-width: 34rem;
  place-self: center;
  justify-items: center;
  gap: var(--openbot-space-4);
  padding: var(--openbot-space-6);
  text-align: center;
}
.diagram-empty-title {
  margin: 0;
  font-size: var(--openbot-text-display);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.diagram-empty-title > span {
  display: block;
}
.diagram-empty-lead {
  color: var(--openbot-text-muted);
}
.diagram-empty-title .diagram-empty-hand {
  display: inline;
  color: var(--openbot-accent-text);
  font-family: "Bradley Hand", "Noteworthy", "Segoe Print", cursive;
  font-size-adjust: 0.62;
  font-weight: var(--openbot-weight-semibold);
  line-height: 1;
  clip-path: inset(-0.4em 100% -0.4em -0.2em);
  animation: diagram-empty-write 520ms linear 500ms forwards;
}
@keyframes diagram-empty-write {
  to {
    clip-path: inset(-0.4em -0.2em -0.4em -0.2em);
  }
}
.diagram-empty-lines {
  display: grid;
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-xl);
  line-height: 1.5;
}
.diagram-empty-action.ui-button {
  width: 100%;
  max-width: 22rem;
  height: var(--openbot-control-lg);
  margin-top: var(--openbot-space-2);
}
@container (max-width: 720px) {
  .diagram-empty-title {
    font-size: var(--openbot-text-3xl);
  }
  .diagram-empty-lines {
    font-size: var(--openbot-text-lg);
  }
  .diagram-empty-backdrop {
    opacity: 0.45;
  }
}
.diagram-empty[data-still] :is(.diagram-empty-world, .diagram-empty-node, .diagram-empty-hand), .diagram-empty[data-still] .diagram-empty-edge[data-state] path {
  animation: none;
  transition: none;
  clip-path: none;
}
.diagram-empty[data-still] .diagram-empty-pulse {
  display: none;
}
:where(.wfn-stage, .wfn-menu, .wfn-popover) {
  --wfn-card: var(--openbot-bg-canvas);
  --wfn-field: var(--openbot-bg-surface-raised);
  --wfn-ring: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --wfn-ring: color-mix(in srgb, var(--openbot-text-primary) 6%, transparent);
  }
  --wfn-ring-strong: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --wfn-ring-strong: color-mix(in srgb, var(--openbot-text-primary) 10%, transparent);
  }
  --wfn-hover: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --wfn-hover: color-mix(in srgb, var(--openbot-text-primary) 6%, transparent);
  }
  --wfn-port: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --wfn-port: color-mix(in srgb, var(--openbot-text-primary) 10%, var(--openbot-bg-canvas));
  }
  --wfn-glass: var(--openbot-bg-surface-raised);
  @supports (color: color-mix(in lab, red, red)) {
    --wfn-glass: color-mix(in srgb, var(--openbot-bg-surface-raised) 75%, transparent);
  }
  --wfn-glass-blur: blur(40px) saturate(1.4);
  --wfn-radius-card: calc(var(--openbot-radius-lg) + var(--openbot-space-1));
  --wfn-small: calc(var(--openbot-text-sm) - 1px);
  --wfn-radius-row: calc(var(--openbot-radius-sm) + var(--openbot-space-1));
  --wfn-radius-run: calc(var(--openbot-radius-md) + 2px);
  --wfn-text-title: calc(var(--openbot-text-display) * 1.25);
  --openbot-focus-ring: 0 0 0 1px var(--openbot-text-muted);
}
:root[data-openbot-color-scheme="light"] :where(.wfn-stage, .wfn-menu, .wfn-popover) {
  --wfn-card: var(--openbot-bg-surface);
  --wfn-field: var(--openbot-bg-control-hover);
}
.wfn-node {
  position: relative;
  display: grid;
  gap: var(--openbot-space-1-5);
  width: var(--wfn-width);
  transition: width var(--openbot-duration-slow) var(--openbot-ease-out);
}
.wfn-node[data-kind="prompt"] {
  --wfn-width: 296px;
  --wfn-height: 151px;
}
.wfn-node[data-kind="agent"], .wfn-node[data-kind="llm"] {
  --wfn-width: 350px;
}
.wfn-node[data-kind="image"] {
  --wfn-width: 300px;
}
.wfn-node[data-kind="asset"] {
  --wfn-width: 240px;
}
.wfn-label {
  display: flex;
  gap: var(--openbot-space-1);
  align-items: center;
  color: var(--openbot-text-muted);
  font-size: var(--wfn-small);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-sm);
  user-select: none;
}
.wfn-label svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.wfn-card {
  position: relative;
  display: grid;
  gap: var(--openbot-space-2);
  align-content: start;
  min-height: var(--wfn-height, auto);
  padding: var(--openbot-space-2);
  border-radius: var(--wfn-radius-card);
  background: var(--wfn-card);
  box-shadow: 0 0 0 1px var(--wfn-ring);
  transition: box-shadow var(--openbot-duration-hover) var(--openbot-ease-out);
}
.wfn-card[data-media] {
  aspect-ratio: var(--wfn-aspect, auto);
  padding: 0;
  overflow: hidden;
}
.wfn-field {
  display: grid;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-3);
  border-radius: var(--openbot-radius-md);
  background: var(--wfn-field);
  transition: box-shadow var(--openbot-duration-hover) var(--openbot-ease-out);
}
.wfn-field:focus-within {
  box-shadow: inset 0 0 0 1px var(--wfn-ring-strong);
}
.wfn-field-fill {
  min-height: calc(var(--wfn-height) - var(--openbot-space-4));
}
.wfn-field-task {
  grid-template-rows: 1fr auto;
  min-height: 150px;
}
.wfn-stage .wfn-input {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  resize: none;
  field-sizing: content;
}
.wfn-stage .wfn-input::placeholder, .wfn-stage .wfn-text-input::placeholder {
  color: var(--openbot-text-muted);
}
.wfn-stage .wfn-input:focus-visible {
  outline: none;
  box-shadow: none;
}
.wfn-field-fill .wfn-input {
  height: 100%;
}
.wfn-field-foot {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}
.wfn-field-result p {
  max-height: 120px;
  margin: 0;
  overflow-y: auto;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.wfn-field-result p[data-failed] {
  color: var(--openbot-text-muted);
}
.wfn-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: calc(var(--openbot-space-1) * -1) 0;
  color: var(--openbot-text-muted);
  font-size: var(--wfn-small);
  font-weight: var(--openbot-weight-semibold);
}
.wfn-stage .wfn-pill {
  gap: var(--openbot-space-1-5);
  min-width: 0;
  height: 20px;
  padding: 0 var(--openbot-space-1);
  border: 0;
  border-radius: var(--openbot-radius-pill);
  background: transparent;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.wfn-stage .wfn-model-pill {
  flex-shrink: 1;
}
.wfn-stage .wfn-agent-pill:has(+ .wfn-model-pill) {
  max-width: calc(100% - 96px - var(--openbot-space-2));
}
.wfn-stage .wfn-field-foot .provider-model-trigger {
  gap: var(--openbot-space-1);
  height: 20px;
  padding: 0 var(--openbot-space-1);
  border: 0;
  background: transparent;
  box-shadow: none;
}
.wfn-stage .wfn-field-foot .provider-model-trigger-name {
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
}
.wfn-stage .wfn-field-foot .provider-model-trigger:is(:hover, [aria-expanded="true"]), .wfn-stage .wfn-pill:hover {
  background: var(--wfn-hover);
}
.wfn-pill > svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  color: var(--openbot-text-muted);
}
.wfn-pill > svg.wfn-model-logo, .wfn-menu.ui-action-menu [role="menuitem"] > svg.wfn-model-logo {
  flex: none;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-primary);
  fill: currentcolor;
  stroke: none;
}
.wfn-avatar.agent-avatar {
  --agent-avatar-optical-offset: -2px;
  flex: none;
  width: 16px;
  height: 16px;
}
.wfn-stage .wfn-run {
  height: var(--openbot-control-lg);
  border-radius: var(--wfn-radius-run);
  font-weight: var(--openbot-weight-semibold);
}
.wfn-ports {
  position: absolute;
  top: 50%;
  display: grid;
  gap: 10px;
  translate: 0 calc(-50% + 11px);
}
.wfn-ports[data-side="in"] {
  right: calc(100% + var(--openbot-space-3));
}
.wfn-ports[data-side="out"] {
  left: calc(100% + var(--openbot-space-3));
}
.wfn-port-slot {
  position: relative;
  display: grid;
}
.wfn-stage .wfn-port {
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
  border-radius: var(--openbot-radius-pill);
  background: var(--wfn-port);
  box-shadow: 0 0 0 1px var(--wfn-ring);
  color: var(--openbot-text-secondary);
  opacity: 0;
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out), scale var(--openbot-duration-fast) var(--openbot-ease-out), background-color var(--openbot-duration-hover) var(--openbot-ease-out);
}
.wfn-port svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.wfn-node:is(:hover, :focus-within, [data-selected]) .wfn-port {
  opacity: 1;
}
.wfn-stage .wfn-port:hover {
  background: var(--openbot-text-primary);
  color: var(--openbot-bg-canvas);
}
.wfn-port-chip {
  position: absolute;
  top: 50%;
  padding: calc((1lh - 1cap) / 2 + 2px) var(--openbot-space-2);
  text-box: trim-both cap alphabetic;
  border-radius: var(--openbot-radius-sm);
  background: var(--wfn-card);
  box-shadow: 0 0 0 1px var(--wfn-ring-strong);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  translate: 0 -50%;
  transition: opacity var(--openbot-duration-hover) var(--openbot-ease-out);
}
.wfn-port-slot[data-side="out"] .wfn-port-chip {
  left: calc(100% + var(--openbot-space-2));
}
.wfn-port-slot[data-side="in"] .wfn-port-chip {
  right: calc(100% + var(--openbot-space-2));
}
.wfn-port-slot:has(.wfn-port:is(:hover, :focus-visible)) .wfn-port-chip {
  opacity: 1;
}
.wfn-toolbar {
  position: absolute;
  bottom: calc(100% + var(--openbot-space-3) / var(--wfn-scale, 1));
  left: round(50%, 1px);
  z-index: 2;
  display: flex;
  gap: var(--openbot-space-0-5);
  align-items: center;
  padding: var(--openbot-space-1);
  border-radius: var(--openbot-radius-pill);
  white-space: nowrap;
  background: var(--wfn-glass);
  box-shadow: 0 0 0 1px var(--wfn-ring-strong);
  translate: calc(round(-50%, 1px) + var(--wfn-snap-x, 0px) / var(--wfn-scale, 1)) calc(var(--wfn-snap-y, 0px) / var(--wfn-scale, 1));
  transform-origin: bottom center;
  scale: calc(1 / var(--wfn-scale, 1));
  backdrop-filter: var(--wfn-glass-blur);
}
.wfn-toolbar[data-side="below"] {
  top: calc(100% + var(--openbot-space-3) / var(--wfn-scale, 1));
  bottom: auto;
  transform-origin: top center;
}
.wfn-toolbar[data-side="below"][data-strip] {
  top: calc(100% + (8px + 52px + var(--openbot-space-2)) / var(--wfn-scale, 1));
}
.wfn-stage .wfn-toolbar :is(.ui-button, .wfn-toolbar-select) {
  border-radius: var(--openbot-radius-pill);
  box-shadow: none;
  color: var(--openbot-text-secondary);
}
.wfn-stage .wfn-toolbar :is(.ui-button, .wfn-toolbar-select):is(:hover, :focus-visible, [aria-pressed="true"]) {
  background: var(--wfn-hover);
  color: var(--openbot-text-primary);
}
.wfn-stage .wfn-toolbar .wfn-tool-action {
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  padding: 0;
}
.wfn-stage .wfn-toolbar .wfn-tool-action svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.wfn-stage .wfn-toolbar .wfn-tool-action[data-tone="danger"]:is(:hover, :focus-visible) {
  background: var(--openbot-danger);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-danger) 16%, transparent);
  }
  color: var(--openbot-danger-text);
}
.wfn-toolbar-separator {
  width: 1px;
  height: 16px;
  margin: 0 var(--openbot-space-1);
  background: var(--wfn-ring-strong);
}
.wfn-toolbar-separator:first-child {
  display: none;
}
.wfn-stage .wfn-toolbar-select {
  gap: var(--openbot-space-1);
  height: var(--openbot-control-md);
  padding-inline: var(--openbot-space-2);
  font-size: var(--openbot-text-sm);
}
.wfn-toolbar-select svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  color: var(--openbot-text-muted);
}
.wfn-text {
  width: auto;
  min-width: 120px;
}
.wfn-stage .wfn-text-input {
  min-height: 0;
  padding: var(--openbot-space-1) var(--openbot-space-1-5);
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  box-shadow: none;
  color: var(--wfn-text-ink, var(--openbot-text-primary));
  font-size: var(--openbot-text-lg);
  line-height: 1.4;
  resize: none;
  field-sizing: content;
}
.wfn-stage .wfn-text-input[data-font="mono"] {
  font-family: var(--openbot-font-mono);
}
.wfn-stage .wfn-text-input[data-text-size="lg"] {
  font-size: var(--openbot-text-3xl);
  letter-spacing: var(--openbot-tracking-tight);
}
.wfn-stage .wfn-text-input[data-text-size="xl"] {
  font-size: var(--wfn-text-title);
  letter-spacing: var(--openbot-tracking-tight);
}
.wfn-stage .wfn-text-input[data-bold] {
  font-weight: var(--openbot-weight-bold);
}
.wfn-stage .wfn-text-input:focus-visible {
  outline: none;
  box-shadow: none;
}
.wfn-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wfn-card[data-media] > .wfn-media {
  position: absolute;
  inset: 0;
}
.wfn-media-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--openbot-text-primary) 14%, transparent);
  }
}
.wfn-media-empty svg {
  width: 40px;
  height: 40px;
  stroke-width: 1.25;
}
.wfn-overlay {
  position: absolute;
  inset: auto 0 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--openbot-space-1);
  max-height: 100%;
  padding: var(--openbot-space-2);
  opacity: 0;
  translate: 0 4px;
  transition: opacity var(--openbot-duration-normal) var(--openbot-ease-out), translate var(--openbot-duration-normal) var(--openbot-ease-out);
}
.wfn-node:is(:hover, :focus-within, [data-selected]) .wfn-overlay {
  opacity: 1;
  translate: 0 0;
}
.wfn-overlay-bar {
  display: flex;
  gap: var(--openbot-space-1);
  align-items: center;
}
.wfn-stage .wfn-chip {
  display: inline-flex;
  gap: var(--openbot-space-1);
  align-items: center;
  height: var(--openbot-control-xs);
  padding: 0 var(--openbot-space-1-5);
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: var(--wfn-glass);
  box-shadow: inset 0 0 0 1px var(--wfn-ring-strong);
  color: var(--openbot-text-primary);
  font-size: var(--wfn-small);
  font-weight: var(--openbot-weight-medium);
  backdrop-filter: var(--wfn-glass-blur);
  cursor: pointer;
}
.wfn-chip svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.wfn-stage .wfn-collapse {
  margin-left: auto;
  border-radius: var(--openbot-radius-sm);
  color: var(--openbot-text-primary);
}
.wfn-panel {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--openbot-space-2);
  min-height: 0;
  padding: 10px;
  border-radius: var(--openbot-radius-md);
  background: var(--wfn-glass);
  box-shadow: inset 0 0 0 1px var(--wfn-ring);
  backdrop-filter: var(--wfn-glass-blur);
}
.wfn-panel .wfn-input {
  max-height: calc(var(--openbot-leading-sm) * 3);
  overflow-y: auto;
  font-weight: var(--openbot-weight-medium);
  scrollbar-width: none;
}
.wfn-stage .wfn-run-pill {
  gap: var(--openbot-space-1);
  height: var(--openbot-control-xs);
  padding: 0 10px 0 var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-pill);
  font-size: var(--openbot-text-sm);
}
.wfn-run-pill svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.wfn-stage .wfn-run-pill[aria-busy="true"] svg {
  display: none;
}
.wfn-stage .wfn-asset-trigger {
  display: grid;
  width: 100%;
  min-height: 120px;
  padding: 0;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: var(--wfn-field);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.wfn-node[data-kind="asset"] .wfn-card {
  align-content: stretch;
}
.wfn-node[data-height] .wfn-card[data-media] {
  aspect-ratio: auto;
  height: var(--wfn-height);
}
.wfn-node[data-height] .wfn-card[data-media] .wfn-asset-trigger > .wfn-media {
  position: absolute;
  inset: 0;
}
.wfn-card[data-media] .wfn-asset-trigger {
  position: absolute;
  inset: 0;
  border-radius: 0;
}
.wfn-asset-trigger:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 1px var(--openbot-text-muted);
}
.wfn-stage .wfn-asset-trigger[data-dropping] {
  background: var(--wfn-hover);
}
.wfn-asset-empty {
  display: grid;
  gap: var(--openbot-space-2);
  place-content: center;
  justify-items: center;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.wfn-asset-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--openbot-radius-pill);
  background: var(--wfn-hover);
  box-shadow: inset 0 0 0 1px var(--wfn-ring-strong);
  transition: background-color var(--openbot-duration-hover) var(--openbot-ease-out);
}
.wfn-asset-icon svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.wfn-asset-trigger:is(:hover, [data-dropping]) .wfn-asset-icon {
  background: var(--wfn-ring-strong);
}
.wfn-asset-caption {
  position: absolute;
  bottom: var(--openbot-space-2);
  left: var(--openbot-space-2);
  max-width: calc(100% - var(--openbot-space-4));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wfn-asset-file {
  display: flex;
  gap: var(--openbot-space-3);
  align-items: center;
  min-width: 0;
  padding: var(--openbot-space-3);
  text-align: left;
}
.wfn-asset-glyph {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 48px;
  border-radius: var(--openbot-radius-sm);
  background: var(--wfn-hover);
  box-shadow: inset 0 0 0 1px var(--wfn-ring-strong);
  color: var(--openbot-text-muted);
}
.wfn-asset-glyph svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  translate: 0 -4px;
}
.wfn-asset-glyph span {
  position: absolute;
  bottom: var(--openbot-space-1);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-glyph-sm);
  font-weight: var(--openbot-weight-bold);
  letter-spacing: var(--openbot-tracking-wide);
}
.wfn-asset-text {
  display: grid;
  min-width: 0;
}
.wfn-asset-name {
  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;
}
.wfn-asset-meta {
  color: var(--openbot-text-muted);
  font-size: var(--wfn-small);
  line-height: var(--openbot-leading-sm);
}
.wfn-menu {
  --ui-menu-bg: var(--wfn-glass);
  --ui-menu-panel-shadow: 0 0 0 1px var(--wfn-ring-strong);
  --ui-menu-item-hover: var(--wfn-hover);
  --ui-menu-radius: var(--openbot-radius-lg);
  backdrop-filter: var(--wfn-glass-blur);
}
.wfn-picker.ui-action-menu {
  --ui-menu-radius: var(--wfn-radius-card);
  display: flex;
  flex-direction: column;
  min-width: 232px;
  max-width: min(320px, calc(100vw - var(--openbot-space-4)));
  max-height: min(440px, var(--kb-popper-content-available-height, 440px));
  padding: 0;
}
.wfn-picker-search {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: 0 var(--openbot-space-3);
  border-bottom: 1px solid var(--wfn-ring-strong);
}
.wfn-picker.ui-action-menu .wfn-picker-search > svg {
  flex: none;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
}
.wfn-picker .wfn-picker-field {
  flex: 1;
  min-width: 0;
  height: var(--openbot-control-lg);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
}
.wfn-picker .wfn-picker-field::placeholder {
  color: var(--openbot-text-muted);
}
.wfn-picker .wfn-picker-field:focus-visible {
  outline: none;
  box-shadow: none;
}
.wfn-picker-list {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--openbot-space-1-5);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
fieldset.wfn-picker-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.wfn-picker-group + .wfn-picker-group {
  margin-top: var(--openbot-space-1-5);
}
.wfn-picker-heading {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  padding: var(--openbot-space-1-5) var(--openbot-space-2) var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--wfn-small);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
}
.wfn-picker.ui-action-menu .wfn-picker-heading > svg {
  flex: none;
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  fill: currentcolor;
}
.wfn-picker.ui-action-menu .wfn-picker-row:is([role^="menuitem"]) {
  height: auto;
  min-height: calc(var(--openbot-control-md) + var(--openbot-space-2));
  gap: calc(var(--openbot-space-2) + var(--openbot-space-0-5));
  padding-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-1) var(--openbot-space-2);
  border-radius: var(--wfn-radius-row);
  white-space: normal;
}
.wfn-picker.ui-action-menu .wfn-picker-row:is([role^="menuitem"])[data-checked] {
  background: var(--wfn-hover);
}
.wfn-picker.ui-action-menu .wfn-picker-row:is([role^="menuitem"])[data-checked]:is(:hover, :focus-visible, [data-highlighted]) {
  background: var(--wfn-ring-strong);
}
.wfn-picker-tile {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  overflow: hidden;
  border-radius: var(--openbot-radius-sm);
  background: var(--wfn-field);
  box-shadow: inset 0 0 0 1px var(--wfn-ring);
  color: var(--openbot-text-secondary);
  transition: color var(--openbot-duration-fast) var(--openbot-ease-out);
}
.wfn-picker-tile[data-kind] {
  --wfn-kind: var(--openbot-text-secondary);
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  background: none;
  box-shadow: none;
  color: var(--wfn-kind);
}
.wfn-picker.ui-action-menu:has(.wfn-picker-tile[data-kind]) {
  max-height: min(560px, var(--kb-popper-content-available-height, 560px));
}
.wfn-picker.ui-action-menu .wfn-picker-row:has(> .wfn-picker-tile[data-kind]) {
  min-height: var(--openbot-control-md);
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-1) var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
}
.wfn-picker-row[data-checked] .wfn-picker-tile {
  box-shadow: inset 0 0 0 1px var(--wfn-ring-strong);
  color: var(--openbot-text-primary);
}
:is(.wfn-picker.ui-action-menu, .wfn-drop-menu) .wfn-picker-tile > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: var(--openbot-icon-stroke);
}
.wfn-picker.ui-action-menu .wfn-picker-tile > svg.wfn-model-logo, .wfn-picker.ui-action-menu .wfn-picker-chip > svg.wfn-model-logo {
  fill: currentcolor;
  stroke: none;
}
.wfn-picker-tile > .wfn-swatch {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.wfn-picker-tile:has(> .agent-avatar), .wfn-picker-row[data-checked] .wfn-picker-tile:has(> .agent-avatar) {
  overflow: visible;
  background: none;
  box-shadow: none;
}
.wfn-picker-tile > .agent-avatar {
  --agent-avatar-optical-offset: calc(var(--openbot-control-sm) * -0.14);
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
}
.wfn-picker-tile > .wfn-font-sample {
  font-size: var(--openbot-text-lg);
}
.wfn-picker-tile > .wfn-font-sample[data-step="1"] {
  font-size: var(--openbot-text-sm);
}
.wfn-picker-tile > .wfn-font-sample[data-step="3"] {
  font-size: var(--openbot-text-2xl);
}
.wfn-picker-tile > .wfn-font-sample[data-step="4"] {
  font-size: var(--openbot-text-3xl);
}
.wfn-picker-aspect {
  width: calc(var(--openbot-icon-md) * var(--wfn-aspect-w));
  height: calc(var(--openbot-icon-md) * var(--wfn-aspect-h));
  border: 1.5px solid currentcolor;
  border-radius: var(--openbot-radius-xs);
}
.wfn-picker-meter {
  display: flex;
  align-items: flex-end;
  gap: var(--openbot-space-0-5);
  height: var(--openbot-icon-md);
}
.wfn-picker-meter > i {
  width: 3px;
  border-radius: var(--openbot-radius-pill);
  background: var(--wfn-ring-strong);
}
.wfn-picker-meter > i[data-on] {
  background: currentcolor;
}
.wfn-picker-meter > i:nth-child(1) {
  height: 20%;
}
.wfn-picker-meter > i:nth-child(2) {
  height: 40%;
}
.wfn-picker-meter > i:nth-child(3) {
  height: 60%;
}
.wfn-picker-meter > i:nth-child(4) {
  height: 80%;
}
.wfn-picker-meter > i:nth-child(5) {
  height: 100%;
}
.wfn-picker-body {
  display: grid;
  flex: 1;
  gap: var(--openbot-space-1);
  min-width: 0;
}
.wfn-picker-name {
  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;
}
.wfn-picker-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-1);
}
.wfn-picker-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  height: 18px;
  padding: 0 var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-xs);
  background: var(--wfn-hover);
  color: var(--openbot-text-secondary);
  font-size: var(--wfn-small);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}
.wfn-picker.ui-action-menu .wfn-picker-chip > svg {
  flex: none;
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.wfn-picker.ui-action-menu .wfn-picker-row > svg.wfn-picker-check {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  margin-inline-start: auto;
  color: var(--openbot-text-primary);
}
.wfn-picker-empty {
  margin: 0;
  padding: var(--openbot-space-4) var(--openbot-space-3);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-align: center;
}
.wfn-model-picker.wfn-picker.ui-action-menu {
  width: min(360px, calc(100vw - var(--openbot-space-4)));
  max-width: none;
}
.wfn-model-layout {
  display: flex;
  min-height: 0;
  max-height: inherit;
}
.wfn-model-rail {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-2);
  border-inline-end: 1px solid var(--wfn-ring-strong);
}
.wfn-model-tab-hint {
  display: flex;
}
.wfn-model-tab {
  display: grid;
  place-items: center;
  width: var(--openbot-control-lg);
  height: var(--openbot-control-lg);
  padding: 0;
  border: 0;
  border-radius: var(--openbot-radius-md);
  outline: 0;
  background: transparent;
  color: var(--openbot-text-primary);
  cursor: pointer;
  transition: background-color var(--openbot-duration-hover) var(--openbot-ease-out);
}
.wfn-model-tab:hover {
  background: var(--wfn-hover);
}
.wfn-model-tab[data-selected] {
  background: var(--wfn-hover);
  box-shadow: inset 0 0 0 1px var(--wfn-ring-strong);
}
.wfn-model-picker .wfn-model-tab:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--openbot-text-muted);
}
.wfn-model-tab > .wfn-model-mark {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  fill: currentcolor;
  opacity: 0.48;
  transition: opacity var(--openbot-duration-hover) var(--openbot-ease-out);
}
.wfn-model-tab:hover > .wfn-model-mark {
  opacity: 0.8;
}
.wfn-model-tab[data-selected] > .wfn-model-mark {
  opacity: 1;
}
.wfn-model-panel {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.wfn-model-heading {
  overflow: hidden;
  padding: var(--openbot-space-3) var(--openbot-space-3) var(--openbot-space-1);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wfn-model-list {
  margin: 0;
  list-style: none;
}
.wfn-model-list .wfn-picker-row[role="option"] {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  min-height: calc(var(--openbot-control-md) + var(--openbot-space-2));
  padding-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-1-5) var(--openbot-space-2);
  border-radius: var(--wfn-radius-row);
  outline: 0;
  color: var(--openbot-text-primary);
  cursor: pointer;
  transition: background-color var(--openbot-duration-hover) var(--openbot-ease-out);
}
.wfn-model-list .wfn-picker-row[role="option"]:is(:hover, [data-highlighted], [data-selected]) {
  background: var(--wfn-hover);
}
.wfn-model-list .wfn-picker-row[role="option"][data-selected]:is(:hover, [data-highlighted]) {
  background: var(--wfn-ring-strong);
}
.ui-popover-menu-surface.wfn-popover {
  display: grid;
  gap: var(--openbot-space-3);
  width: 344px;
  padding: var(--openbot-space-3);
  border-radius: var(--wfn-radius-card);
  background: var(--wfn-glass);
  box-shadow: 0 0 0 1px var(--wfn-ring-strong);
  backdrop-filter: var(--wfn-glass-blur);
}
.wfn-popover-head {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
  justify-content: space-between;
  margin-block: calc(var(--openbot-space-1) * -1);
}
.wfn-popover-head .ui-button {
  font-size: var(--openbot-text-sm);
}
.wfn-popover-title {
  margin: 0;
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
}
.wfn-library {
  display: grid;
  gap: var(--openbot-space-3);
}
.wfn-popover .wfn-library-tabs {
  padding: 0;
  background: transparent;
}
.wfn-popover .wfn-library-tabs .ui-sliding-tabs-trigger {
  border-radius: var(--openbot-radius-pill);
  font-size: var(--openbot-text-sm);
}
.wfn-popover .wfn-library-tabs .ui-sliding-tabs-pill {
  top: 0;
  border-radius: var(--openbot-radius-pill);
  background: var(--wfn-ring-strong);
}
.wfn-library-search {
  display: flex;
  gap: var(--openbot-space-1-5);
  align-items: center;
  height: var(--openbot-control-md);
  padding: 0 var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
  background: var(--wfn-field);
  transition: box-shadow var(--openbot-duration-hover) var(--openbot-ease-out);
}
.wfn-library-search:focus-within {
  box-shadow: inset 0 0 0 1px var(--wfn-ring-strong);
}
.wfn-library-search > svg {
  flex: none;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
}
.wfn-popover .wfn-library-search .ui-input {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: var(--openbot-text-sm);
}
.wfn-popover .wfn-library-search .ui-input:focus-visible {
  outline: none;
  box-shadow: none;
}
.wfn-scroll {
  position: relative;
}
.wfn-library-scroll {
  max-height: 280px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.wfn-library-scroll::-webkit-scrollbar {
  display: none;
}
.wfn-library-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--openbot-space-2);
}
.wfn-library-empty {
  margin: 0;
  padding: var(--openbot-space-6) var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-align: center;
  text-wrap: pretty;
}
.wfn-scroll-track {
  position: absolute;
  top: 0;
  right: calc(-1 * var(--openbot-space-3));
  bottom: 0;
  width: var(--openbot-space-3);
}
.wfn-scroll-thumb {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--openbot-space-1);
  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) 24%, transparent);
  }
  opacity: 0;
  transition-property: opacity, width, background-color;
  transition-duration: var(--openbot-duration-fast);
  transition-timing-function: var(--openbot-ease-out);
}
.wfn-scroll:is(:hover, :focus-within) .wfn-scroll-thumb, .wfn-scroll-track[data-dragging] .wfn-scroll-thumb {
  opacity: 1;
}
.wfn-scroll-track:hover .wfn-scroll-thumb, .wfn-scroll-track[data-dragging] .wfn-scroll-thumb {
  width: var(--openbot-space-1-5);
  background: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-primary) 40%, transparent);
  }
}
.wfn-popover .wfn-library-tile {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--openbot-space-1);
  height: auto;
  padding: var(--openbot-space-1);
  border-radius: var(--openbot-radius-md);
  text-align: start;
}
.wfn-popover .wfn-library-tile[aria-pressed="true"] {
  box-shadow: inset 0 0 0 1px var(--openbot-text-primary);
}
.wfn-popover .wfn-library-tile:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--openbot-text-primary) 40%, transparent);
  }
}
.wfn-popover .wfn-library-tile[aria-pressed="true"]:focus-visible {
  box-shadow: inset 0 0 0 2px var(--openbot-text-primary);
}
.wfn-library-thumb {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--openbot-radius-sm);
  background: var(--wfn-hover);
}
.wfn-library-name {
  overflow: hidden;
  color: var(--openbot-text-secondary);
  font-size: var(--wfn-small);
  font-weight: var(--openbot-weight-regular);
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .wfn-overlay {
    translate: 0 0;
  }
}
.wfn-stage :is(.wfn-node, .wfn-text) {
  z-index: 1;
}
.wfn-edges {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: visible;
  pointer-events: none;
}
.wfn-edge {
  --wfn-edge: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --wfn-edge: color-mix(in srgb, var(--openbot-text-primary) 32%, transparent);
  }
  color: var(--wfn-edge);
}
.wfn-edge[data-tone="done"] {
  --wfn-edge: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --wfn-edge: color-mix(in srgb, var(--openbot-text-primary) 60%, transparent);
  }
}
.wfn-edge[data-tone="run"] {
  --wfn-edge: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --wfn-edge: color-mix(in srgb, var(--openbot-text-primary) 72%, transparent);
  }
}
.wfn-edge[data-selected] {
  --wfn-edge: var(--openbot-text-primary);
}
.wfn-edge[data-removing] {
  --wfn-edge: var(--openbot-danger);
}
.wfn-edge-line, .wfn-edge-comet, .wfn-edge-draft {
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
}
.wfn-edge-line {
  stroke-width: 1.5;
  stroke-dasharray: 5 5;
  transition: color var(--openbot-duration-hover) var(--openbot-ease-out);
}
.wfn-edge:is([data-tone="done"], [data-selected]) .wfn-edge-line {
  stroke-dasharray: none;
}
.wfn-edge[data-motion] .wfn-edge-line {
  animation: wfn-march 1.2s linear infinite;
}
.wfn-edge:is([data-tone="done"], [data-selected]) .wfn-edge-line {
  animation: none;
}
@keyframes wfn-march {
  to {
    stroke-dashoffset: -10;
  }
}
.wfn-edge-comet {
  stroke: var(--openbot-text-primary);
  stroke-width: 3;
  stroke-dasharray: 0.12 1;
  animation: wfn-comet 1.1s var(--openbot-ease-out) infinite;
}
@keyframes wfn-comet {
  from {
    stroke-dashoffset: 0.12;
  }
  to {
    stroke-dashoffset: -1;
  }
}
.wfn-edge-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 14;
  pointer-events: stroke;
  cursor: pointer;
}
.wfn-edge-draft {
  color: var(--openbot-text-muted);
  stroke-width: 2;
  stroke-dasharray: 5 5;
  transition: color var(--openbot-duration-hover) var(--openbot-ease-out);
}
.wfn-edge-draft[data-state="ok"] {
  color: var(--openbot-text-primary);
  stroke-dasharray: none;
}
.wfn-edge-draft[data-state="refused"] {
  color: var(--openbot-danger);
}
.wfn-edge-draft[data-state="loop"] {
  color: var(--openbot-warning);
  stroke-dasharray: none;
}
.wfn-draft-reason {
  position: absolute;
  z-index: 3;
  padding: 2px var(--openbot-space-2);
  border-radius: var(--openbot-radius-sm);
  background: var(--wfn-card);
  box-shadow: 0 0 0 1px var(--openbot-danger-border);
  color: var(--openbot-danger-text);
  font-size: var(--openbot-text-sm);
  white-space: nowrap;
  pointer-events: none;
  transform-origin: 0 0;
  translate: calc(14px / var(--wfn-scale, 1)) calc(14px / var(--wfn-scale, 1));
  scale: calc(1 / var(--wfn-scale, 1));
}
.wfn-draft-reason[data-tone="loop"] {
  box-shadow: 0 0 0 1px var(--openbot-warning);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--openbot-warning) 45%, transparent);
  }
  color: var(--openbot-warning-text);
}
.wfn-edge-actions {
  position: absolute;
  z-index: 2;
  display: flex;
  transform-origin: 0 0;
  translate: calc(-50% / var(--wfn-scale, 1)) calc(-50% / var(--wfn-scale, 1));
  scale: calc(1 / var(--wfn-scale, 1));
}
.wfn-stage .wfn-edge-actions .wfn-edge-remove {
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-danger);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-danger) 14%, var(--wfn-card));
  }
  box-shadow: 0 0 0 1px var(--openbot-danger-border);
  color: var(--openbot-danger-text);
  opacity: 1;
  scale: 1;
  transition-property: opacity, scale, background-color;
  transition-duration: var(--openbot-duration-fast);
  transition-timing-function: var(--openbot-ease-out);
}
.wfn-stage .wfn-edge-actions .wfn-edge-remove:hover {
  background: var(--openbot-danger);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-danger) 28%, var(--wfn-card));
  }
  color: var(--openbot-danger-text);
}
@starting-style {
  .wfn-stage .wfn-edge-actions .wfn-edge-remove {
    opacity: 0;
    scale: 0.6;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wfn-stage .wfn-edge-actions .wfn-edge-remove {
    transition: none;
  }
}
.wfn-stage .wfn-port[data-connected] {
  opacity: 1;
}
.wfn-stage .wfn-port:is([data-armed], [data-target]) {
  background: var(--openbot-text-primary);
  color: var(--openbot-bg-canvas);
  opacity: 1;
}
.wfn-stage .wfn-port[data-dim] {
  opacity: 0.25;
}
.wfn-stage .wfn-port[data-refused] {
  background: var(--openbot-danger);
  color: var(--openbot-text-primary);
  opacity: 1;
}
.wfn-stage .wfn-node:not(:hover, :focus-within, [data-selected]) .wfn-port:not([data-connected], [data-armed], [data-target], [data-dim], [data-refused], [data-missing]) {
  scale: 0.5;
}
.wfn-node[data-status="running"] .wfn-card {
  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) 16%, transparent);
  }
}
.wfn-node[data-status="running"] .wfn-card-frame::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: -1.5px;
  padding: 1.5px;
  --wfn-radius-ring: calc(var(--wfn-radius-card) + 1.5px);
  border-radius: var(--wfn-radius-ring);
  background: conic-gradient( from var(--wfn-sweep), transparent 0turn 0.45turn, var(--openbot-text-primary) 0.72turn, var(--openbot-text-primary) 0.9turn, var(--openbot-text-primary) 0.985turn, transparent 1turn );
  @supports (color: color-mix(in lab, red, red)) {
    background: conic-gradient( from var(--wfn-sweep), transparent 0turn 0.45turn, color-mix(in srgb, var(--openbot-text-primary) 24%, transparent) 0.72turn, color-mix(in srgb, var(--openbot-text-primary) 72%, transparent) 0.9turn, var(--openbot-text-primary) 0.985turn, transparent 1turn );
  }
  mask: linear-gradient(var(--openbot-text-primary) 0 0) content-box, linear-gradient(var(--openbot-text-primary) 0 0);
  mask-composite: exclude;
  pointer-events: none;
  animation: wfn-sweep 1.6s linear infinite;
}
@property --wfn-sweep {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0turn;
}
@keyframes wfn-sweep {
  to {
    --wfn-sweep: 1turn;
  }
}
.wfn-run-time {
  display: inline-flex;
  gap: var(--openbot-space-1);
  align-items: center;
  margin-inline-start: auto;
  color: var(--openbot-text-secondary);
  font-weight: var(--openbot-weight-medium);
  font-variant-numeric: tabular-nums;
  transition: opacity var(--openbot-duration-hover) var(--openbot-ease-out);
  @starting-style {
    opacity: 0;
  }
}
.wfn-run-time[data-done] {
  color: var(--openbot-success-text);
  animation: wfn-run-time-out 1.8s var(--openbot-ease-out) forwards;
}
.wfn-run-time[data-failed] {
  color: var(--openbot-danger-text);
}
@keyframes wfn-run-time-out {
  0%, 70% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.wfn-result-pending {
  display: grid;
  gap: var(--openbot-space-2);
  padding-block: var(--openbot-space-1);
}
.wfn-result-pending .ui-skeleton {
  min-height: var(--openbot-space-2);
  background: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-primary) 9%, transparent);
  }
}
.wfn-result-pending .ui-skeleton:nth-child(2) {
  width: 88%;
  animation-delay: 120ms;
}
.wfn-result-pending .ui-skeleton:nth-child(3) {
  width: 56%;
  animation-delay: 240ms;
}
.wfn-result-body {
  position: relative;
}
.wfn-result-body[data-running] p {
  visibility: hidden;
}
.wfn-result-body p + .wfn-result-pending {
  position: absolute;
  inset: 0;
  align-content: start;
  overflow: hidden;
}
.wfn-node[data-status="running"] .wfn-card[data-media]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient( 100deg, transparent 30%, var(--openbot-text-primary) 50%, transparent 70% );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient( 100deg, transparent 30%, color-mix(in srgb, var(--openbot-text-primary) 12%, transparent) 50%, transparent 70% );
  }
  background-size: 250% 100%;
  pointer-events: none;
  animation: wfn-sheen 1.4s var(--openbot-ease-in-out) infinite;
}
@keyframes wfn-sheen {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0% 0;
  }
}
.wfn-art-layer {
  --wfn-art-spring: cubic-bezier(0.34, 1.35, 0.64, 1);
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transition-property: rotate, translate, scale, opacity;
  transition-duration: var(--openbot-duration-slow);
  transition-timing-function: var(--wfn-art-spring);
}
.wfn-art-color {
  fill: var(--wfn-art-color);
}
.wfn-art-face-light {
  fill: var(--wfn-art-light);
}
.wfn-art-face-dark {
  fill: var(--wfn-art-dark);
}
.wfn-art-gloss {
  fill: var(--openbot-paper);
  @supports (color: color-mix(in lab, red, red)) {
    fill: color-mix(in srgb, var(--openbot-paper) 55%, transparent);
  }
}
.wfn-art-wood {
  fill: var(--wfn-art-wood-color);
}
.wfn-art-wood-shade {
  fill: var(--wfn-art-wood-color);
  @supports (color: color-mix(in lab, red, red)) {
    fill: color-mix(in srgb, var(--wfn-art-wood-color) 84%, var(--openbot-paper-text));
  }
}
.wfn-art-rubber {
  fill: var(--openbot-file-pink);
}
.wfn-art-rubber-shade {
  fill: var(--openbot-file-pink);
  @supports (color: color-mix(in lab, red, red)) {
    fill: color-mix(in srgb, var(--openbot-file-pink) 80%, var(--openbot-paper-text));
  }
}
.wfn-art-metal {
  fill: var(--wfn-art-metal-color);
}
.wfn-art-metal-groove {
  fill: var(--wfn-art-metal-color);
  @supports (color: color-mix(in lab, red, red)) {
    fill: color-mix(in srgb, var(--wfn-art-metal-color) 70%, var(--openbot-paper-text));
  }
}
.wfn-art-tint-back {
  fill: var(--wfn-art-base);
  @supports (color: color-mix(in lab, red, red)) {
    fill: color-mix(in srgb, var(--wfn-art-base) 36%, var(--wfn-card));
  }
}
.wfn-art-tint-middle {
  fill: var(--wfn-art-base);
  @supports (color: color-mix(in lab, red, red)) {
    fill: color-mix(in srgb, var(--wfn-art-base) 62%, var(--wfn-card));
  }
}
.wfn-art-curl {
  fill: var(--wfn-art-light);
}
.wfn-art-stop-light {
  stop-color: var(--wfn-art-light);
}
.wfn-art-stop-color {
  stop-color: var(--wfn-art-base);
}
.wfn-art-stop-edge {
  stop-color: var(--openbot-paper);
  @supports (color: color-mix(in lab, red, red)) {
    stop-color: color-mix(in srgb, var(--openbot-paper) 70%, transparent);
  }
}
.wfn-art-stop-clear {
  stop-color: transparent;
}
.wfn-art-cut {
  stroke: var(--openbot-bg-surface-raised);
  @supports (color: color-mix(in lab, red, red)) {
    stroke: color-mix(in srgb, var(--openbot-bg-surface-raised) 75%, var(--wfn-card));
  }
  stroke-width: 2;
  stroke-linejoin: round;
  paint-order: stroke;
}
.wfn-art-edge {
  fill: none;
  stroke-width: 0.8;
  stroke-linejoin: round;
}
.wfn-tool-art [data-layer="eraser"], .wfn-tool-art[data-eraser] [data-layer="pen"] {
  opacity: 0;
  scale: 0.25;
}
.wfn-tool-art[data-eraser] [data-layer="eraser"] {
  opacity: 1;
  scale: 1;
}
.wfn-tool-art [data-layer="back"] {
  rotate: -10deg;
}
.wfn-tool-art [data-layer="middle"] {
  rotate: 6deg;
}
.wfn-menu :is([role="menuitem"], [role="menuitemcheckbox"]) .wfn-keys {
  margin-inline-start: auto;
  padding-inline-start: var(--openbot-space-4);
}
.wfn-keys {
  display: inline-flex;
  gap: 2px;
  align-items: center;
}
.wfn-keys .ui-kbd {
  min-width: 18px;
  height: 18px;
  border: 0;
  background: var(--wfn-hover);
  color: var(--openbot-text-muted);
  font-family: inherit;
  font-size: var(--wfn-small);
}
.wfn-hint {
  display: inline-flex;
  gap: var(--openbot-space-2);
  align-items: center;
}
.ui-tooltip.wfn-tooltip {
  border-radius: var(--openbot-radius-md);
  box-shadow: 0 0 0 1px var(--openbot-border-strong);
  font-weight: var(--openbot-weight-medium);
}
.ui-tooltip.wfn-tooltip:has(.wfn-keys) {
  padding-inline-end: var(--openbot-space-1-5);
}
.wfn-strip {
  position: absolute;
  top: calc(100% + 8px / var(--wfn-scale, 1));
  left: round(50%, 1px);
  transform-origin: top center;
  scale: calc(1 / var(--wfn-scale, 1));
  z-index: 2;
  display: flex;
  gap: var(--openbot-space-1);
  align-items: center;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--openbot-text-secondary);
  translate: calc(round(-50%, 1px) + var(--wfn-snap-x, 0px) / var(--wfn-scale, 1)) calc(var(--wfn-snap-y, 0px) / var(--wfn-scale, 1));
}
.wfn-strip-list {
  display: flex;
  gap: var(--openbot-space-1-5);
  align-items: center;
  max-width: calc(7 * 36px + 6 * var(--openbot-space-1-5) + 16px);
  height: 52px;
  overflow-x: auto;
  padding: 0 var(--openbot-space-1);
  scrollbar-width: none;
}
.wfn-strip-item {
  --wfn-strip-size: 36px;
  display: grid;
  flex: none;
  place-items: center;
  width: var(--wfn-strip-size);
  height: var(--wfn-strip-size);
  overflow: hidden;
  padding: 2px;
  border: 2px solid var(--wfn-kind);
  @supports (color: color-mix(in lab, red, red)) {
    border: 2px solid color-mix(in srgb, var(--wfn-kind) 40%, transparent);
  }
  border-radius: var(--openbot-radius-pill);
  background: var(--wfn-glass);
  color: var(--openbot-text-secondary);
  font-size: var(--wfn-small);
  font-variant-numeric: tabular-nums;
  font-weight: var(--openbot-weight-semibold);
  cursor: pointer;
  backdrop-filter: var(--wfn-glass-blur);
  transition-property: width, height, border-color, color, scale;
  transition-duration: var(--openbot-duration-fast);
  transition-timing-function: var(--openbot-ease-out);
}
.wfn-strip-item:hover {
  border-color: var(--wfn-kind);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--wfn-kind) 72%, transparent);
  }
  color: var(--openbot-text-primary);
}
.wfn-strip-item[aria-pressed="true"] {
  --wfn-strip-size: 44px;
  border-color: var(--wfn-kind);
  color: var(--openbot-text-primary);
}
.wfn-strip-item:active {
  scale: 0.96;
}
.wfn-strip-item:focus-visible {
  outline: 2px solid var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    outline: 2px solid color-mix(in srgb, var(--openbot-text-primary) 40%, transparent);
  }
  outline-offset: 1px;
}
.wfn-strip-item img {
  width: 100%;
  height: 100%;
  border-radius: var(--openbot-radius-pill);
  object-fit: cover;
}
.wfn-strip-item[data-failed] {
  color: var(--openbot-danger-text);
}
.wfn-strip-failed {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
:is(.wfn-menu-icon, .wfn-picker-tile, .wfn-node, .wfn-minimap-node)[data-kind="text"] {
  --wfn-kind: var(--openbot-file-teal);
}
:is(.wfn-menu-icon, .wfn-picker-tile, .wfn-node, .wfn-minimap-node)[data-kind="prompt"] {
  --wfn-kind: var(--openbot-file-blue);
}
:is(.wfn-menu-icon, .wfn-picker-tile, .wfn-node, .wfn-minimap-node)[data-kind="asset"] {
  --wfn-kind: var(--openbot-file-orange);
}
:is(.wfn-menu-icon, .wfn-picker-tile, .wfn-node, .wfn-minimap-node)[data-kind="llm"] {
  --wfn-kind: var(--openbot-chart-storage-downloads);
}
:is(.wfn-menu-icon, .wfn-picker-tile, .wfn-node, .wfn-minimap-node)[data-kind="agent"] {
  --wfn-kind: var(--openbot-file-green);
}
:is(.wfn-menu-icon, .wfn-picker-tile, .wfn-node, .wfn-minimap-node)[data-kind="image"] {
  --wfn-kind: var(--openbot-file-pink);
}
@media (prefers-reduced-motion: reduce) {
  .wfn-node[data-status="running"] .wfn-card-frame::before {
    background: var(--openbot-text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--openbot-text-primary) 56%, transparent);
    }
    animation: none;
  }
  .wfn-node[data-status="running"] .wfn-card[data-media]::after {
    background-position: 50% 0;
    animation: none;
  }
  .wfn-run-time[data-done] {
    animation: none;
  }
}
.wfn-card-frame {
  position: relative;
  display: grid;
}
.wfn-node {
  --wfn-select-line: calc(1.5px / var(--wfn-scale, 1));
  --wfn-select-gap: calc(3px / var(--wfn-scale, 1));
}
.wfn-node .wfn-card {
  outline: var(--wfn-select-line) solid transparent;
  outline-offset: var(--wfn-select-gap);
  transition-property: box-shadow, outline-color, min-height, height;
  transition-duration: var(--openbot-duration-hover), var(--openbot-duration-hover), var(--openbot-duration-slow), var(--openbot-duration-slow);
  transition-timing-function: var(--openbot-ease-out);
}
.wfn-node:not([data-selected]) .wfn-card-frame:hover .wfn-card {
  box-shadow: 0 0 0 1px var(--wfn-ring-strong);
}
.wfn-node[data-selected] .wfn-card {
  outline-color: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    outline-color: color-mix(in srgb, var(--openbot-text-primary) 40%, transparent);
  }
}
.wfn-text {
  --wfn-select-line: calc(1px / var(--wfn-scale, 1));
  --wfn-select-gap: calc(4px / var(--wfn-scale, 1));
}
.wfn-text[data-selected] .wfn-text-input {
  outline: var(--wfn-select-line) solid var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    outline: var(--wfn-select-line) solid color-mix(in srgb, var(--openbot-text-primary) 32%, transparent);
  }
  outline-offset: var(--wfn-select-gap);
}
.wfn-grip {
  --wfn-grip-size: calc(18px / var(--wfn-scale, 1));
  --wfn-grip-line: calc(3px / var(--wfn-scale, 1));
  --wfn-grip-out: calc(var(--wfn-select-gap) + var(--wfn-select-line) / 2 + var(--wfn-grip-line) / 2);
  --wfn-grip-radius: calc(var(--wfn-radius-card) + var(--wfn-grip-out));
  --wfn-grip-arc: var(--wfn-grip-line) solid var(--wfn-grip-color, transparent);
  --wfn-grip-band: calc(12px / var(--wfn-scale, 1));
  --wfn-grip-band-out: calc(var(--wfn-grip-out) * -1 - var(--wfn-grip-band) / 2);
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
  width: var(--wfn-grip-size);
  height: var(--wfn-grip-size);
  transition: border-color var(--openbot-duration-fast) var(--openbot-ease-out);
}
.wfn-grip::after {
  position: absolute;
  inset: calc(-6px / var(--wfn-scale, 1));
  content: "";
}
.wfn-grip[data-corner="nw"] {
  top: calc(var(--wfn-grip-out) * -1);
  left: calc(var(--wfn-grip-out) * -1);
}
.wfn-grip[data-corner="ne"] {
  top: calc(var(--wfn-grip-out) * -1);
  right: calc(var(--wfn-grip-out) * -1);
}
.wfn-grip[data-corner="se"] {
  right: calc(var(--wfn-grip-out) * -1);
  bottom: calc(var(--wfn-grip-out) * -1);
  border-right: var(--wfn-grip-arc);
  border-bottom: var(--wfn-grip-arc);
  border-bottom-right-radius: var(--wfn-grip-radius);
}
.wfn-grip[data-corner="sw"] {
  bottom: calc(var(--wfn-grip-out) * -1);
  left: calc(var(--wfn-grip-out) * -1);
}
.wfn-grip[data-side] {
  z-index: 1;
  width: auto;
  height: auto;
}
.wfn-grip[data-side]::after {
  display: none;
}
.wfn-grip:is([data-corner="n"], [data-corner="s"]) {
  right: var(--wfn-grip-size);
  left: var(--wfn-grip-size);
  height: var(--wfn-grip-band);
}
.wfn-grip:is([data-corner="e"], [data-corner="w"]) {
  top: var(--wfn-grip-size);
  bottom: var(--wfn-grip-size);
  width: var(--wfn-grip-band);
}
.wfn-grip[data-corner="n"] {
  top: var(--wfn-grip-band-out);
}
.wfn-grip[data-corner="s"] {
  bottom: var(--wfn-grip-band-out);
}
.wfn-grip[data-corner="e"] {
  right: var(--wfn-grip-band-out);
}
.wfn-grip[data-corner="w"] {
  left: var(--wfn-grip-band-out);
}
.wfn-ports {
  z-index: 1;
}
.wfn-text .wfn-grip {
  --wfn-grip-size: calc(12px / var(--wfn-scale, 1));
  --wfn-grip-line: calc(2px / var(--wfn-scale, 1));
  --wfn-grip-radius: calc(var(--openbot-radius-sm) + var(--wfn-grip-out));
}
.wfn-node:is(:hover, [data-selected]) .wfn-grip {
  --wfn-grip-color: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --wfn-grip-color: color-mix(in srgb, var(--openbot-text-primary) 32%, transparent);
  }
}
.wfn-node[data-selected] .wfn-grip, .wfn-node[data-resizing] .wfn-grip, .wfn-grip:hover {
  --wfn-grip-color: var(--openbot-text-primary);
}
.wfn-node[data-doomed] .wfn-card {
  outline-color: var(--openbot-danger);
}
.wfn-text[data-doomed] .wfn-text-input {
  outline: var(--wfn-select-line) solid var(--openbot-danger);
  outline-offset: var(--wfn-select-gap);
}
.wfn-node[data-doomed] .wfn-grip {
  --wfn-grip-color: var(--openbot-danger);
}
.wfn-grip[data-cursor="ew"] {
  cursor: ew-resize;
}
.wfn-grip[data-cursor="ns"] {
  cursor: ns-resize;
}
.wfn-grip[data-cursor="nwse"] {
  cursor: nwse-resize;
}
.wfn-grip[data-cursor="nesw"] {
  cursor: nesw-resize;
}
.wfn-node[data-height] .wfn-card:has(> .wfn-field-task) {
  grid-template-rows: 1fr;
}
.wfn-node[data-locked] :is(.wfn-label, .wfn-card) {
  cursor: default;
}
.wfn-lock-badge {
  display: inline-flex;
  color: var(--openbot-text-muted);
}
.wfn-lock-badge svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.wfn-text[data-sized] .wfn-text-input {
  width: 100%;
}
.wfn-node:focus-visible {
  outline: none;
}
.wfn-node:not(.wfn-text):focus-visible:not([data-selected]) .wfn-card {
  outline-color: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    outline-color: color-mix(in srgb, var(--openbot-text-primary) 40%, transparent);
  }
}
.wfn-hud-spin {
  animation: wfn-spin 1s linear infinite;
}
@keyframes wfn-spin {
  to {
    rotate: 360deg;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wfn-hud-spin {
    animation: none;
  }
  .wfn-art-layer {
    transition: none;
  }
  .wfn-node, .wfn-node .wfn-card, .wfn-stage .wfn-port, .wfn-grip {
    transition: none;
  }
}
@property --wfn-fade-start {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --wfn-fade-end {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@supports (animation-timeline: scroll()) {
  .wfn-node :is(textarea, .wfn-field-result p), .wfn-strip-list {
    --wfn-fade-size: var(--openbot-space-4);
    --wfn-fade-side: to bottom;
    mask-image: linear-gradient( var(--wfn-fade-side), transparent, var(--openbot-text-primary) var(--wfn-fade-start), var(--openbot-text-primary) calc(100% - var(--wfn-fade-end)), transparent );
    animation: wfn-fade-start linear both, wfn-fade-end linear both;
    animation-timeline: scroll(self block), scroll(self block);
    animation-range: 0 var(--wfn-fade-size), calc(100% - var(--wfn-fade-size)) 100%;
  }
  .wfn-strip-list {
    --wfn-fade-size: var(--openbot-space-6);
    --wfn-fade-side: to right;
    animation-timeline: scroll(self inline), scroll(self inline);
  }
}
@keyframes wfn-fade-start {
  from {
    --wfn-fade-start: 0px;
  }
  to {
    --wfn-fade-start: var(--wfn-fade-size);
  }
}
@keyframes wfn-fade-end {
  from {
    --wfn-fade-end: var(--wfn-fade-size);
  }
  to {
    --wfn-fade-end: 0px;
  }
}
.wfn-node[data-kind="trigger"], .wfn-node[data-kind="output"] {
  --wfn-width: 280px;
}
.wfn-node[data-kind="condition"], .wfn-node[data-kind="approval"] {
  --wfn-width: 300px;
}
.wfn-node[data-kind="note"] {
  --wfn-width: 240px;
  --wfn-height: 240px;
}
.wfn-node[data-kind="shape"] {
  --wfn-width: 208px;
  --wfn-height: 128px;
  --wfn-radius-card: var(--openbot-radius-md);
}
:is(.wfn-menu-icon, .wfn-picker-tile, .wfn-node, .wfn-minimap-node)[data-kind="trigger"] {
  --wfn-kind: var(--openbot-file-yellow);
}
:is(.wfn-menu-icon, .wfn-picker-tile, .wfn-node, .wfn-minimap-node)[data-kind="condition"] {
  --wfn-kind: var(--openbot-chart-series-codex);
}
:is(.wfn-menu-icon, .wfn-picker-tile, .wfn-node, .wfn-minimap-node)[data-kind="output"] {
  --wfn-kind: var(--openbot-chart-storage-workspaces);
}
:is(.wfn-menu-icon, .wfn-picker-tile, .wfn-node, .wfn-minimap-node)[data-kind="approval"] {
  --wfn-kind: var(--openbot-chart-storage-files);
}
:is(.wfn-menu-icon, .wfn-picker-tile, .wfn-node, .wfn-minimap-node)[data-kind="note"] {
  --wfn-kind: var(--openbot-file-yellow);
}
:is(.wfn-menu-icon, .wfn-picker-tile, .wfn-node, .wfn-minimap-node)[data-kind="shape"] {
  --wfn-kind: var(--openbot-text-secondary);
}
.wfn-stage .wfn-block-field > .wfn-pill {
  justify-self: start;
}
.wfn-block-field > .wfn-field-foot {
  justify-content: flex-start;
}
.wfn-block-field > .wfn-condition-foot {
  justify-content: space-between;
}
.wfn-block-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--openbot-space-2);
}
.wfn-github-mark {
  flex: none;
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  fill: currentcolor;
}
.wfn-settings {
  --wfn-settings-gap: 2px;
  display: grid;
  gap: var(--wfn-settings-gap);
  padding: var(--openbot-space-1);
  border-radius: var(--openbot-radius-md);
  background: var(--wfn-field);
}
.wfn-settings-head:not(:last-child) {
  padding-bottom: var(--openbot-space-1);
  border-bottom: 1px solid var(--wfn-ring);
  margin-bottom: calc(var(--openbot-space-1) - var(--wfn-settings-gap));
}
.wfn-settings-foot {
  padding-top: var(--openbot-space-1);
  border-top: 1px solid var(--wfn-ring);
  margin-top: calc(var(--openbot-space-1) - var(--wfn-settings-gap));
}
.wfn-settings > .ui-button {
  justify-self: start;
  margin: var(--openbot-space-1);
}
.wfn-settings > .wfn-alert {
  margin: var(--openbot-space-1);
}
.wfn-settings-block {
  padding: var(--openbot-space-1) var(--openbot-space-2);
}
.wfn-row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  gap: var(--openbot-space-2);
  align-items: center;
  width: 100%;
  min-height: 36px;
  padding: var(--openbot-space-1) var(--openbot-space-2);
  border: 0;
  border-radius: var(--wfn-radius-row);
  background: transparent;
  color: var(--openbot-text-primary);
  font: inherit;
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--openbot-duration-hover) var(--openbot-ease-out);
}
.wfn-row:not([data-static]):is(:hover, [aria-expanded="true"]) {
  background: var(--wfn-hover);
}
.wfn-row:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--wfn-ring-strong);
}
.wfn-row[data-static] {
  cursor: default;
}
.wfn-row:disabled {
  cursor: default;
  opacity: 0.6;
}
.wfn-row-name {
  color: var(--openbot-text-muted);
}
.wfn-row-value {
  display: flex;
  gap: var(--openbot-space-1-5);
  align-items: center;
  min-width: 0;
  font-weight: var(--openbot-weight-medium);
}
.wfn-row-value:has(> .wfn-tag) {
  flex-wrap: wrap;
}
.wfn-row-value[data-empty] {
  color: var(--openbot-text-secondary);
  font-weight: var(--openbot-weight-regular);
}
.wfn-row-value > svg {
  flex: none;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-secondary);
}
.wfn-row-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wfn-row-arrow {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  color: var(--openbot-text-muted);
  transition: opacity var(--openbot-duration-hover) var(--openbot-ease-out);
}
:is(.wfn-settings, .wfn-settings-foot) > .wfn-row:not(:hover, :focus-visible, [aria-expanded="true"]) .wfn-row-arrow {
  opacity: 0;
}
.wfn-settings-head .wfn-row {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 40px;
}
.wfn-settings-head .wfn-row-value {
  font-weight: var(--openbot-weight-semibold);
}
.wfn-settings-head .wfn-row-name {
  display: none;
}
.wfn-settings-head .wfn-row-value > svg {
  box-sizing: content-box;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  padding: var(--openbot-space-1);
  border-radius: var(--openbot-radius-sm);
  background: var(--wfn-kind);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--wfn-kind) 16%, transparent);
  }
  box-shadow: inset 0 0 0 1px var(--wfn-kind);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wfn-kind) 14%, transparent);
  }
  color: var(--wfn-kind);
}
.wfn-row[data-input] {
  cursor: text;
}
.wfn-row[data-input]:focus-within {
  box-shadow: inset 0 0 0 1px var(--wfn-ring-strong);
}
.wfn-stage .wfn-row-input {
  grid-column: 2 / -1;
  min-width: 0;
  height: auto;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.wfn-stage .wfn-row-input:focus, .wfn-stage .wfn-row-input:focus-visible {
  outline: none;
  box-shadow: none;
}
.wfn-row-code {
  display: block;
  overflow: hidden;
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wfn-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  min-width: 0;
  max-width: 100%;
  height: 22px;
  padding: 0 var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
  background: var(--wfn-hover);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  white-space: nowrap;
}
.wfn-tag-text {
  overflow: hidden;
  text-overflow: ellipsis;
}
.wfn-tag > svg {
  flex: none;
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.wfn-tag[data-warning] {
  color: var(--openbot-warning-text);
}
.wfn-tag[data-tone] {
  background: var(--wfn-tone);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--wfn-tone) 16%, transparent);
  }
  box-shadow: inset 0 0 0 1px var(--wfn-tone);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wfn-tone) 24%, transparent);
  }
  color: var(--wfn-tone);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--wfn-tone) 80%, var(--openbot-text-primary));
  }
}
.wfn-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--openbot-radius-pill);
  background: var(--wfn-tone);
}
.wfn-row-value[data-one-line] {
  flex-wrap: nowrap;
}
.wfn-row-value[data-one-line] > .wfn-row-text {
  flex: 1 1 auto;
}
.wfn-row-value[data-one-line] > .wfn-tag {
  flex: none;
}
.wfn-branch {
  position: relative;
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
  min-height: var(--openbot-control-sm);
  padding: 0 var(--openbot-space-3);
  border-radius: var(--openbot-radius-md);
  background: var(--wfn-field);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  transition: opacity var(--openbot-duration-hover) var(--openbot-ease-out);
}
.wfn-branch[data-skipped] {
  opacity: 0.5;
}
.wfn-branch-check {
  display: inline-grid;
  margin-left: auto;
  color: var(--openbot-success);
}
.wfn-branch-check svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.wfn-branch-port {
  position: absolute;
  top: 50%;
  left: calc(100% + var(--openbot-space-2) + 6px);
  translate: 0 -50%;
}
.wfn-edge-label {
  position: absolute;
  z-index: 1;
  padding: 0 var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-pill);
  background: var(--wfn-card);
  box-shadow: 0 0 0 1px var(--wfn-ring-strong);
  color: var(--openbot-text-secondary);
  font-size: var(--wfn-small);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
  text-transform: capitalize;
  pointer-events: none;
  translate: -50% -50%;
}
.wfn-edge-loop {
  position: absolute;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  padding: 0 var(--openbot-space-2) 0 var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-pill);
  background: var(--wfn-card);
  box-shadow: 0 0 0 1px var(--wfn-ring-strong);
  color: var(--openbot-text-secondary);
  font-size: var(--wfn-small);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
  white-space: nowrap;
  pointer-events: none;
  translate: -50% -50%;
}
.wfn-edge-loop svg {
  width: 0.875em;
  height: 0.875em;
}
.wfn-edge-loop[data-endless] {
  background: linear-gradient(var(--openbot-warning-soft) 0 0), var(--wfn-card);
  box-shadow: 0 0 0 1px var(--openbot-warning);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--openbot-warning) 45%, transparent);
  }
  color: var(--openbot-warning-text);
}
:is(.wfn-node, .wfn-ghost)[data-kind="note"] {
  --wfn-note-paper: oklch(from var(--wfn-note) 0.88 calc(c * 0.5) h);
  --wfn-note-edge: oklch(from var(--wfn-note) 0.76 calc(c * 0.6) h);
}
.wfn-node[data-kind="note"] .wfn-card {
  grid-template-rows: minmax(0, 1fr) auto;
  align-content: stretch;
  height: var(--wfn-height);
  padding: var(--openbot-space-4) var(--openbot-space-4) var(--openbot-space-3);
  background: var(--wfn-note-paper);
  box-shadow: 0 0 0 1px var(--wfn-note-edge);
}
.wfn-stage .wfn-note-input {
  height: 100%;
  overflow-y: auto;
  color: var(--wfn-note-ink);
  font-size: var(--openbot-text-2xl);
  font-weight: var(--openbot-weight-medium);
  line-height: 1.35;
  text-wrap: pretty;
  field-sizing: fixed;
  scrollbar-width: none;
}
.wfn-stage .wfn-note-input::placeholder {
  color: var(--openbot-paper-text-dim);
}
.wfn-stage .wfn-note-input[data-font="mono"] {
  font-family: var(--openbot-font-mono);
}
.wfn-stage .wfn-note-input[data-text-size="lg"] {
  font-size: var(--openbot-text-lg);
}
.wfn-stage .wfn-note-input[data-text-size="3xl"] {
  font-size: var(--openbot-text-3xl);
  letter-spacing: var(--openbot-tracking-tight);
}
.wfn-stage .wfn-note-input[data-text-size="display"] {
  font-size: var(--openbot-text-display);
  line-height: 1.2;
  letter-spacing: var(--openbot-tracking-tight);
}
.wfn-stage .wfn-note-input[data-bold] {
  font-weight: var(--openbot-weight-bold);
}
.wfn-note-author {
  overflow: hidden;
  color: var(--openbot-paper-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
  white-space: nowrap;
  text-overflow: ellipsis;
  user-select: none;
}
.wfn-font-sample {
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
  line-height: 1;
}
.wfn-font-sample[data-font="mono"] {
  font-family: var(--openbot-font-mono);
}
.wfn-swatch {
  flex: none;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  border-radius: var(--openbot-radius-pill);
  background: var(--wfn-swatch);
  box-shadow: inset 0 0 0 1px var(--wfn-ring-strong);
}
.wfn-alert {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: var(--openbot-space-1-5) var(--openbot-space-2) var(--openbot-space-1-5) var(--openbot-space-3);
  border-radius: var(--openbot-radius-md);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  transition: opacity var(--openbot-duration-hover) var(--openbot-ease-out);
}
.wfn-alert > svg {
  flex: none;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.wfn-alert-text {
  display: -webkit-box;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.wfn-alert[data-tone="danger"] {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger-text);
}
.wfn-alert[data-tone="warning"] {
  background: var(--openbot-warning-soft);
  color: var(--openbot-warning-text);
}
.wfn-alert[data-tone="success"] {
  background: var(--openbot-success-soft);
  color: var(--openbot-success-text);
}
.wfn-alert[data-stale] {
  opacity: 0.5;
}
.wfn-alert[data-pending] {
  background: var(--wfn-field);
}
.wfn-alert[data-pending] .ui-skeleton {
  width: 64%;
  min-height: var(--openbot-space-2);
  margin-block: var(--openbot-space-1);
  background: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-primary) 9%, transparent);
  }
}
.wfn-stage .wfn-alert .ui-button {
  flex: none;
  color: inherit;
}
.wfn-node[data-status="approval"] .wfn-card {
  box-shadow: 0 0 0 1px var(--openbot-warning);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--openbot-warning) 64%, transparent);
  }
}
.wfn-stage .wfn-port[data-missing]:not([data-target], [data-armed]) {
  opacity: 1;
}
.wfn-stage .wfn-pill[data-missing] {
  color: var(--openbot-warning-text);
}
.wfn-stage .wfn-pill[data-missing] > svg:first-child {
  color: inherit;
}
.wfn-pill-action {
  color: var(--openbot-text-muted);
}
.wfn-stage :is(.wfn-field-task, .wfn-field-fill, .wfn-field-system, .wfn-block-field) .wfn-input {
  max-height: 200px;
  overflow-y: auto;
}
.wfn-stage .wfn-node[data-height] :is(.wfn-field-task, .wfn-field-fill) .wfn-input {
  max-height: none;
}
.wfn-stage .wfn-pill > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wfn-stage .wfn-pill > :is(svg, .wfn-avatar) {
  flex: none;
}
.wfn-label[data-bare] {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: var(--openbot-space-1-5);
}
.wfn-stage .wfn-node[data-kind="shape"] .wfn-card {
  grid-template-rows: none;
  align-content: center;
  place-items: center;
  height: var(--wfn-height);
  padding: var(--openbot-space-3);
  background: transparent;
  box-shadow: none;
}
.wfn-stage .wfn-node[data-kind="shape"]:not([data-selected]) .wfn-card-frame:hover .wfn-card {
  box-shadow: none;
}
.wfn-shape-surface {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
span.wfn-shape-surface {
  border-radius: var(--wfn-radius-card);
  background: var(--wfn-shape);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--wfn-shape) 16%, transparent);
  }
  box-shadow: inset 0 0 0 2px var(--wfn-shape);
}
span.wfn-shape-surface:is([data-shape="circle"], [data-shape="oval"]) {
  border-radius: var(--openbot-radius-pill);
}
svg.wfn-shape-surface {
  fill: var(--wfn-shape);
  @supports (color: color-mix(in lab, red, red)) {
    fill: color-mix(in srgb, var(--wfn-shape) 16%, transparent);
  }
  stroke: var(--wfn-shape);
  stroke-width: 2;
  stroke-linejoin: round;
}
:root[data-openbot-color-scheme="light"] span.wfn-shape-surface[data-color="ink"] {
  background: var(--wfn-shape);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--wfn-shape) 5%, transparent);
  }
  box-shadow: inset 0 0 0 1.5px var(--wfn-shape);
}
:root[data-openbot-color-scheme="light"] svg.wfn-shape-surface[data-color="ink"] {
  fill: var(--wfn-shape);
  @supports (color: color-mix(in lab, red, red)) {
    fill: color-mix(in srgb, var(--wfn-shape) 5%, transparent);
  }
  stroke-width: 1.5;
}
.wfn-stage .wfn-shape-input {
  position: relative;
  width: 100%;
  max-height: 100%;
  overflow: hidden;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
  text-align: center;
  field-sizing: content;
}
.wfn-shape-icon {
  flex: none;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.wfn-stage .wfn-toolbar-select :is(.wfn-shape-icon, .wfn-swatch) {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-primary);
}
@media (prefers-reduced-motion: reduce) {
  .wfn-branch {
    transition: none;
  }
}
.wfn-emoji {
  display: inline-flex;
  flex: none;
  justify-content: center;
  width: var(--openbot-icon-xs);
}
.wfn-peer-cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  display: flex;
  width: max-content;
  align-items: flex-start;
  pointer-events: none;
  transform-origin: 0 0;
  scale: calc(1 / var(--wfn-scale, 1));
  transition: translate var(--wfn-peer-feed) var(--wfn-peer-ease, linear), opacity var(--openbot-duration-normal) var(--openbot-ease-out);
  animation: wfn-fade-in var(--openbot-duration-normal) var(--openbot-ease-out);
}
.wfn-peer-cursor[data-leaving] {
  opacity: 0;
}
.wfn-slot[data-build="unbuilt"], .wfn-edge[data-build="unbuilt"], .wfn-edge-label[data-build="unbuilt"] {
  visibility: hidden;
}
.wfn-slot[data-build="arrived"] {
  animation: wfn-build-arrive var(--openbot-duration-slow) var(--openbot-ease-out);
}
.wfn-edge[data-build="arrived"], .wfn-edge-label[data-build="arrived"] {
  animation: wfn-fade-in var(--openbot-duration-slow) var(--openbot-ease-out);
}
@keyframes wfn-build-arrive {
  from {
    opacity: 0;
    scale: 0.94;
  }
}
.wfn-peer-arrow {
  flex: none;
  width: 19px;
  height: 20px;
  fill: var(--wfn-peer);
  stroke: var(--openbot-paper);
  stroke-width: 3;
  stroke-linejoin: round;
  paint-order: stroke;
}
.wfn-peer-name, .wfn-peer-tag {
  padding: 1px var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-xs);
  background: var(--wfn-peer);
  color: var(--openbot-paper-text);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: 18px;
  white-space: nowrap;
}
.wfn-peer-name {
  margin: 17px 0 0 -11px;
  padding: 2px var(--openbot-space-2);
  border-radius: var(--openbot-radius-sm);
  outline: 1.5px solid var(--openbot-paper);
  font-weight: var(--openbot-weight-bold);
}
.wfn-slot[data-peer] .wfn-node:not([data-selected]) .wfn-card {
  outline-color: var(--wfn-peer);
}
.wfn-slot[data-peer] .wfn-text:not([data-selected]) .wfn-text-input {
  outline: var(--wfn-select-line) solid var(--wfn-peer);
  outline-offset: var(--wfn-select-gap);
}
.wfn-peer-tag {
  position: absolute;
  top: calc(100% + var(--openbot-space-2) / var(--wfn-scale, 1));
  left: 0;
  z-index: 2;
  pointer-events: none;
  transform-origin: 0 0;
  scale: calc(1 / var(--wfn-scale, 1));
  animation: wfn-fade-in var(--openbot-duration-normal) var(--openbot-ease-out);
}
.wfn-slot:has(> [data-selected]) .wfn-peer-tag {
  display: none;
}
.wfn-stage .wfn-hud-button.wfn-presence-person, .wfn-presence-self {
  display: grid;
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  padding: 0;
  place-items: center;
  border-radius: var(--openbot-radius-pill);
}
.wfn-presence-person .person-avatar {
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
  overflow: hidden;
  border-radius: var(--openbot-radius-pill);
  background: var(--wfn-peer, var(--openbot-text-primary));
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--wfn-peer, var(--openbot-text-primary)) 16%, transparent);
  }
}
.wfn-stage .wfn-hud-presence .wfn-presence-person .person-avatar-generated > svg {
  width: 100%;
  height: 100%;
}
.wfn-presence-person .person-avatar > i {
  display: none;
}
.wfn-presence-person[aria-pressed="true"] .person-avatar {
  outline: 2px solid var(--wfn-peer);
  outline-offset: 0;
}
.wfn-follow-frame {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  border: 2px solid var(--wfn-peer);
  pointer-events: none;
  animation: wfn-fade-in var(--openbot-duration-normal) var(--openbot-ease-out);
}
.wfn-follow-name {
  height: fit-content;
  padding: 1px var(--openbot-space-2) var(--openbot-space-0-5);
  border-radius: 0 0 var(--openbot-radius-sm) var(--openbot-radius-sm);
  background: var(--wfn-peer);
  color: var(--openbot-paper-text);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: 18px;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .wfn-peer-cursor {
    transition: none;
  }
  .wfn-peer-cursor, .wfn-peer-tag, .wfn-follow-frame, .wfn-slot[data-build], .wfn-edge[data-build], .wfn-edge-label[data-build] {
    animation: none;
  }
}
:where(.wfn-stage) {
  --wfn-tool-radius: calc(var(--openbot-radius-grouped) - var(--openbot-space-1-5));
  --wfn-card-inner-radius: calc(var(--openbot-radius-card) - 1px);
}
.wfn-stage {
  display: flex;
  flex-wrap: wrap;
  gap: 120px;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 120px var(--openbot-space-8);
  background-color: var(--openbot-bg-frame);
  background-image: radial-gradient( var(--openbot-text-primary) 1px, transparent 1px );
  @supports (color: color-mix(in lab, red, red)) {
    background-image: radial-gradient( color-mix(in srgb, var(--openbot-text-primary) 9%, transparent) 1px, transparent 1px );
  }
  background-size: 20px 20px;
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
}
.wfn-menu-text {
  font-size: var(--openbot-text-sm);
}
.wfn-menu-meta {
  color: var(--openbot-text-muted);
  font-size: var(--wfn-small);
}
.wfn-menu-check {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  margin-inline-start: auto;
  color: var(--openbot-text-primary);
}
.wfn-stage {
  position: relative;
}
.wfn-stage.wfn-canvas {
  display: block;
  height: 100vh;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background-image: none;
}
.wfn-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: default;
  touch-action: none;
}
.wfn-viewport::after {
  --wfn-edge-fade: var(--openbot-space-8);
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background: linear-gradient(to right, var(--openbot-bg-frame), transparent) left / var(--wfn-edge-fade) 100% no-repeat, linear-gradient(to left, var(--openbot-bg-frame), transparent) right / var(--wfn-edge-fade) 100% no-repeat, linear-gradient(to bottom, var(--openbot-bg-frame), transparent) top / 100% var(--wfn-edge-fade) no-repeat, linear-gradient(to top, var(--openbot-bg-frame), transparent) bottom / 100% var(--wfn-edge-fade) no-repeat;
  pointer-events: none;
}
.wfn-dots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  mask-image: radial-gradient(ellipse 85% 75% at 50% 50%, var(--openbot-text-primary) 45%, transparent 100%);
  pointer-events: none;
}
.wfn-dots circle {
  fill: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    fill: color-mix(in srgb, var(--openbot-text-primary) 15%, transparent);
  }
}
.wfn-viewport[data-space] {
  cursor: grab;
}
.wfn-viewport:is([data-panning], [data-dragging]) {
  cursor: grabbing;
  user-select: none;
}
.wfn-world {
  position: absolute;
  top: 0;
  left: 0;
  direction: ltr;
  transform-origin: 0 0;
  interpolate-size: allow-keywords;
}
.wfn-viewport[data-camera-moving] .wfn-world {
  pointer-events: none;
}
.wfn-slot {
  position: absolute;
  width: max-content;
  cursor: default;
}
.wfn-slot :is(.wfn-label, .wfn-card) {
  cursor: grab;
}
.wfn-viewport[data-dragging] .wfn-slot :is(.wfn-label, .wfn-card) {
  cursor: grabbing;
}
.wfn-canvas {
  --wfn-hud-inset: var(--openbot-space-4);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.wfn-hud {
  position: absolute;
  z-index: 3;
  display: flex;
  gap: 2px;
  align-items: center;
  height: calc(var(--openbot-control-md) + var(--openbot-space-2));
  padding: var(--openbot-space-1);
  border-radius: var(--openbot-radius-lg);
  background: var(--wfn-glass);
  box-shadow: 0 0 0 1px var(--wfn-ring-strong);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  backdrop-filter: var(--wfn-glass-blur);
}
.wfn-hud-top {
  position: absolute;
  top: var(--openbot-space-4);
  inset-inline-end: var(--openbot-space-4);
  inset-inline-start: var(--openbot-space-4);
  z-index: 3;
  display: flex;
  gap: var(--openbot-space-2);
  align-items: flex-start;
  justify-content: space-between;
  pointer-events: none;
}
.wfn-hud-top .wfn-hud {
  position: relative;
  pointer-events: auto;
}
.wfn-hud-group {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
}
.wfn-hud-tools {
  bottom: var(--wfn-hud-inset);
  left: round(50%, 1px);
  translate: round(-50%, 1px) 0;
}
.wfn-stage .wfn-hud-add-button {
  margin-inline-start: var(--openbot-space-1);
}
.wfn-stage .wfn-hud .wfn-hud-tool[aria-pressed="true"] {
  background: var(--wfn-hover);
  color: var(--openbot-text-primary);
}
.wfn-stage .wfn-hud .wfn-hud-tool svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.wfn-stage .wfn-hud-title .wfn-hud-switcher {
  gap: var(--openbot-space-1-5);
  min-width: 0;
  padding-inline: var(--openbot-space-3) calc(var(--openbot-space-2) + var(--openbot-space-0-5));
}
.wfn-stage .wfn-hud-switcher-name {
  overflow: hidden;
  max-width: 40ch;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wfn-stage .wfn-hud-switcher .wfn-hud-chevron {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  color: var(--openbot-text-muted);
}
.wfn-canvas[data-frame="window"] > * {
  pointer-events: auto;
}
.wfn-canvas:is([data-tool="draw"], [data-tool="note"], [data-tool="shape"]) .wfn-world * {
  pointer-events: none;
}
.wfn-canvas[data-tool="pan"] .wfn-viewport, .wfn-canvas[data-tool="pan"] .wfn-slot :is(.wfn-label, .wfn-card, .wfn-card *) {
  cursor: grab;
}
.wfn-canvas[data-tool="pan"] .wfn-viewport[data-panning], .wfn-canvas[data-tool="pan"] .wfn-viewport[data-panning] * {
  cursor: grabbing;
}
.wfn-canvas[data-tool="draw"] .wfn-viewport {
  cursor: crosshair;
}
.wfn-canvas[data-draw="eraser"] .wfn-viewport {
  cursor: none;
}
.wfn-hud.wfn-hud-sub {
  right: 0;
  bottom: calc(var(--wfn-hud-inset) + var(--openbot-control-lg) + var(--openbot-space-3) + var(--openbot-space-2));
  left: 0;
  gap: var(--openbot-space-1);
  width: fit-content;
  margin-inline: auto;
}
.wfn-stage .wfn-hud-sub .wfn-hud-tool {
  width: var(--openbot-control-md);
}
.wfn-stage .wfn-hud-sub .wfn-shape-icon {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.wfn-stage .wfn-hud .wfn-hud-fill {
  gap: var(--openbot-space-1);
  padding-inline: var(--openbot-space-2) var(--openbot-space-1-5);
}
.wfn-stage .wfn-hud-fill .wfn-hud-chevron {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  color: var(--openbot-text-muted);
}
.wfn-ghost {
  position: absolute;
  z-index: 3;
  opacity: 0.5;
  translate: -50% -50%;
  pointer-events: none;
  animation: wfn-fade-in var(--openbot-duration-fast) var(--openbot-ease-out);
}
.wfn-ghost[data-drawn] {
  translate: none;
  animation: none;
}
.wfn-ghost[data-kind="note"] {
  border-radius: var(--wfn-radius-card);
  background: var(--wfn-note-paper);
  box-shadow: 0 0 0 1px var(--wfn-note-edge);
}
.wfn-ghost span.wfn-shape-surface {
  background: var(--wfn-shape);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--wfn-shape) 16%, transparent);
  }
  box-shadow: none;
  outline: 1px dashed var(--wfn-shape);
  outline-offset: -1px;
}
.wfn-ghost svg.wfn-shape-surface {
  stroke-dasharray: 4 3;
  stroke-width: 1;
}
.wfn-ink-dot {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  border-radius: var(--openbot-radius-pill);
  background: var(--wfn-ink);
  box-shadow: inset 0 0 0 1px var(--wfn-ring-strong);
  transition-property: box-shadow;
  transition-duration: var(--openbot-duration-fast);
  transition-timing-function: var(--openbot-ease-out);
}
.wfn-stage .wfn-hud .wfn-ink-swatch[aria-pressed="true"] {
  background: transparent;
}
.wfn-ink-swatch[aria-pressed="true"] .wfn-ink-dot {
  box-shadow: 0 0 0 2px var(--wfn-glass), 0 0 0 3.5px var(--openbot-text-primary);
}
.wfn-ink {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 1px;
  height: 1px;
  overflow: visible;
  pointer-events: none;
}
.wfn-ink-line {
  fill: none;
  stroke: var(--wfn-ink);
  stroke-linecap: round;
  stroke-linejoin: round;
  transition-property: opacity;
  transition-duration: var(--openbot-duration-fast);
  transition-timing-function: var(--openbot-ease-out);
}
.wfn-ink-line[data-brush="marker"] {
  stroke-opacity: 0.45;
}
.wfn-ink-line[data-erasing] {
  opacity: 0.25;
}
.wfn-eraser {
  position: absolute;
  z-index: 3;
  width: var(--openbot-space-4);
  height: var(--openbot-space-4);
  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) 8%, transparent);
  }
  box-shadow: inset 0 0 0 1px var(--openbot-text-primary);
  translate: -50% -50%;
  pointer-events: none;
}
.wfn-canvas[data-hud-hidden] :is(.wfn-hud, .wfn-hud-top) {
  visibility: hidden;
  opacity: 0;
}
.wfn-stage .wfn-hud-show {
  position: absolute;
  inset-inline-end: var(--wfn-hud-inset);
  bottom: var(--wfn-hud-inset);
  z-index: 3;
  gap: var(--openbot-space-1-5);
  animation: wfn-fade-in var(--openbot-duration-normal) var(--openbot-ease-out);
}
.wfn-hud-zoom {
  bottom: var(--wfn-hud-inset);
  inset-inline-start: var(--wfn-hud-inset);
}
.wfn-hud-separator {
  width: 1px;
  height: var(--openbot-space-4);
  margin: 0 var(--openbot-space-1);
  background: var(--wfn-ring-strong);
}
.wfn-stage .wfn-hud .ui-button {
  border-radius: var(--openbot-radius-md);
}
.wfn-stage :is(.wfn-hud, .wfn-toolbar) .ui-button {
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  transition-property: background-color, color, opacity, scale;
  transition-duration: var(--openbot-duration-fast);
  transition-timing-function: var(--openbot-ease-out);
}
.wfn-stage :is(.wfn-hud, .wfn-toolbar) .ui-button:active:not(:disabled) {
  scale: 0.96;
}
.wfn-stage .wfn-hud .ui-button-variant-ghost {
  color: var(--openbot-text-secondary);
}
.wfn-stage .wfn-hud .ui-button-variant-ghost:hover:not(:disabled), .wfn-stage .wfn-hud .ui-button-variant-ghost[data-expanded] {
  background: var(--wfn-hover);
  color: var(--openbot-text-primary);
}
.wfn-stage .wfn-hud-button {
  gap: var(--openbot-space-1-5);
  height: var(--openbot-control-md);
  padding-inline: var(--openbot-space-3);
}
.wfn-stage .wfn-hud-button:has(> svg:first-child) {
  padding-inline-start: calc(var(--openbot-space-2) + var(--openbot-space-0-5));
}
.wfn-stage .wfn-hud-button svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.wfn-stage .wfn-hud-tools {
  gap: var(--openbot-space-1-5);
  height: calc(var(--openbot-control-lg) + var(--openbot-space-3));
  padding: var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-grouped);
}
.wfn-stage .wfn-hud-tools .ui-button {
  height: var(--openbot-control-lg);
  border-radius: var(--wfn-tool-radius);
}
.wfn-stage .wfn-hud-tools .wfn-hud-tool {
  width: var(--openbot-control-lg);
}
.wfn-stage .wfn-hud-tools .wfn-hud-tool svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  stroke-width: var(--openbot-icon-stroke-lg);
}
.wfn-stage .wfn-hud-tools .wfn-hud-add-button svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: var(--openbot-icon-stroke);
}
.wfn-stage .wfn-hud-tools {
  overflow: clip;
}
.wfn-stage .wfn-hud-tools .wfn-hud-tool[data-art] {
  position: relative;
  width: calc(var(--openbot-control-lg) + var(--openbot-space-2));
  padding: 0;
  overflow: visible;
}
.wfn-stage .wfn-hud-tools .wfn-hud-tool:is([data-art="note"], [data-art="shape"]) {
  width: calc(var(--openbot-control-lg) + var(--openbot-space-4));
}
.wfn-stage .wfn-hud .wfn-hud-tool[data-art]:is(:hover, [aria-pressed="true"]) {
  background: transparent;
}
.wfn-stage .wfn-hud-tools .wfn-hud-tool[data-art] .wfn-tool-art {
  --wfn-art-base: var(--wfn-art-color);
  --wfn-art-light: var(--wfn-art-color);
  @supports (color: color-mix(in lab, red, red)) {
    --wfn-art-light: color-mix(in srgb, var(--wfn-art-color) 58%, var(--openbot-paper));
  }
  --wfn-art-dark: var(--wfn-art-color);
  @supports (color: color-mix(in lab, red, red)) {
    --wfn-art-dark: color-mix(in srgb, var(--wfn-art-color) 72%, var(--openbot-paper-text));
  }
  --wfn-art-wood-color: var(--openbot-file-orange);
  @supports (color: color-mix(in lab, red, red)) {
    --wfn-art-wood-color: color-mix(in srgb, var(--openbot-file-orange) 38%, var(--openbot-paper));
  }
  --wfn-art-metal-color: var(--openbot-paper);
  @supports (color: color-mix(in lab, red, red)) {
    --wfn-art-metal-color: color-mix(in srgb, var(--openbot-paper) 78%, var(--openbot-paper-text));
  }
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  overflow: visible;
}
:root[data-openbot-color-scheme="light"] .wfn-stage .wfn-hud-tools .wfn-hud-tool[data-art] .wfn-tool-art {
  --wfn-art-base: oklch(from var(--wfn-art-color) 0.82 calc(c * 0.75) h);
  --wfn-art-light: oklch(from var(--wfn-art-color) 0.93 calc(c * 0.35) h);
}
.wfn-hud-tool[data-art="draw"]:is(:hover, [aria-pressed="true"]) .wfn-art-layer {
  translate: 0 calc(var(--openbot-space-1-5) * -1);
}
.wfn-hud-tool[data-art="note"]:is(:hover, [aria-pressed="true"]) [data-layer="back"] {
  rotate: -15deg;
  translate: calc(var(--openbot-space-1) * -1) calc(var(--openbot-space-0-5) * -1);
}
.wfn-hud-tool[data-art="note"]:is(:hover, [aria-pressed="true"]) [data-layer="middle"] {
  rotate: 4deg;
  translate: 0 calc(var(--openbot-space-1) * -1);
}
.wfn-hud-tool[data-art="note"]:is(:hover, [aria-pressed="true"]) [data-layer="front"] {
  rotate: 4deg;
  translate: var(--openbot-space-1) calc(var(--openbot-space-1-5) * -1);
}
.wfn-hud-tool[data-art="shape"]:is(:hover, [aria-pressed="true"]) [data-layer="back"] {
  rotate: -17deg;
  translate: calc(var(--openbot-space-1) * -1) calc(var(--openbot-space-0-5) * -1);
  scale: 1.06;
}
.wfn-hud-tool[data-art="shape"]:is(:hover, [aria-pressed="true"]) [data-layer="middle"] {
  rotate: 12deg;
  translate: var(--openbot-space-1) var(--openbot-space-0-5);
}
.wfn-hud-tool[data-art="shape"]:is(:hover, [aria-pressed="true"]) [data-layer="front"] {
  rotate: 6deg;
  translate: var(--openbot-space-0-5) calc(var(--openbot-space-1-5) * -1);
}
.wfn-hud-tools .wfn-hud-separator {
  height: calc(var(--openbot-space-4) + var(--openbot-space-1));
  margin: 0 var(--openbot-space-0-5);
}
.wfn-hud-icon {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  border-radius: var(--openbot-radius-md);
  background: var(--wfn-hover);
  color: var(--openbot-text-secondary);
}
.wfn-stage .wfn-hud-icon svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.wfn-stage .wfn-hud-name {
  field-sizing: content;
  min-width: 8ch;
  max-width: 40ch;
  height: var(--openbot-control-md);
  padding: 0 var(--openbot-space-2);
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  box-shadow: none;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  text-overflow: ellipsis;
  transition-property: background-color, box-shadow;
  transition-duration: var(--openbot-duration-fast);
}
.wfn-stage .wfn-hud-name:hover {
  background: var(--wfn-hover);
}
.wfn-stage .wfn-hud-name:focus-visible {
  outline: none;
  background: var(--wfn-hover);
  box-shadow: inset 0 0 0 1px var(--wfn-ring-strong);
}
.wfn-hud-viewing {
  gap: var(--openbot-space-1-5);
  padding-inline-start: var(--openbot-space-3);
  font-variant-numeric: tabular-nums;
}
.wfn-stage .wfn-hud-viewing > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
}
.wfn-hud[hidden] {
  display: none;
}
.wfn-hud-version {
  bottom: var(--wfn-hud-inset);
  left: round(50%, 1px);
  gap: var(--openbot-space-1-5);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  translate: round(-50%, 1px) 0;
}
.wfn-hud-lock {
  display: inline-flex;
  gap: var(--openbot-space-1);
  align-items: center;
  margin-inline-end: var(--openbot-space-1);
  color: var(--openbot-text-muted);
}
.wfn-hud-lock-icon {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.wfn-canvas[data-preview] .wfn-viewport {
  cursor: grab;
}
.wfn-canvas[data-preview] .wfn-viewport[data-panning] {
  cursor: grabbing;
}
.wfn-hud-label {
  font-weight: var(--openbot-weight-medium);
}
.wfn-hud-meta {
  margin-inline-end: var(--openbot-space-1);
  color: var(--openbot-text-muted);
}
.wfn-hud-count {
  min-width: var(--openbot-space-4);
  padding: 0 var(--openbot-space-1);
  border-radius: var(--openbot-radius-xs);
  background: var(--wfn-hover);
  color: var(--openbot-text-muted);
  font-size: var(--wfn-small);
  font-variant-numeric: tabular-nums;
  line-height: var(--openbot-leading-sm);
  text-align: center;
}
.wfn-hud-progress {
  display: inline-flex;
  gap: var(--openbot-space-1-5);
  align-items: center;
  padding: 0 var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-variant-numeric: tabular-nums;
  animation: wfn-fade-in var(--openbot-duration-fast) var(--openbot-ease-out);
}
.wfn-hud-progress .wfn-hud-ring {
  --ui-radial-progress-color: var(--openbot-text-primary);
  width: var(--openbot-icon-md);
}
.wfn-stage .wfn-hud-stop {
  animation: wfn-fade-in var(--openbot-duration-fast) var(--openbot-ease-out);
}
.wfn-stage .wfn-hud-stop svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  fill: currentColor;
}
@keyframes wfn-fade-in {
  from {
    opacity: 0;
  }
}
.wfn-stage .wfn-zoom-value {
  justify-content: center;
  min-width: 6ch;
  padding-inline: var(--openbot-space-1);
  font-variant-numeric: tabular-nums;
}
.wfn-zoom-menu {
  min-width: 200px;
}
.wfn-zoom-menu .wfn-menu-text {
  margin-inline-end: auto;
}
.wfn-zoom-presets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
.wfn-zoom-menu.ui-action-menu .wfn-zoom-presets .wfn-zoom-preset {
  justify-content: center;
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
.wfn-zoom-menu.ui-action-menu .wfn-zoom-presets .wfn-zoom-preset[data-current] {
  background: var(--wfn-hover);
  color: var(--openbot-text-primary);
}
.wfn-menu-glyph {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  color: var(--openbot-text-secondary);
}
.wfn-menu-glyph svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.wfn-menu .ui-action-menu-danger .wfn-menu-glyph {
  color: var(--openbot-danger);
}
.wfn-hud.wfn-search {
  bottom: calc(var(--wfn-hud-inset) + var(--openbot-control-md) + var(--openbot-space-2) + var(--openbot-space-2));
  left: round(50%, 1px);
  display: grid;
  gap: var(--openbot-space-1);
  align-items: stretch;
  width: min(480px, calc(100% - var(--openbot-space-8)));
  height: auto;
  translate: round(-50%, 1px) 0;
}
.wfn-search-field {
  display: flex;
  gap: var(--openbot-space-1);
  align-items: center;
  padding-inline-start: var(--openbot-space-2);
  border-radius: var(--wfn-tool-radius);
}
.wfn-search-field:has(.wfn-search-input:focus-visible) {
  box-shadow: inset 0 0 0 1px var(--openbot-border-focus);
}
.wfn-stage .wfn-search-icon {
  flex: 0 0 auto;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
}
.wfn-stage .wfn-search-input {
  flex: 1 1 auto;
  height: var(--openbot-control-md);
  padding: 0 var(--openbot-space-1);
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: var(--openbot-text-sm);
}
.wfn-stage .wfn-search-input:focus-visible {
  outline: none;
  box-shadow: none;
}
.wfn-search-empty {
  margin: 0;
  padding: var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-3);
  border-top: 1px solid var(--wfn-ring);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-wrap: pretty;
}
.wfn-search-results {
  display: grid;
  gap: 2px;
  max-height: 320px;
  margin: 0;
  padding: var(--openbot-space-1) 0 0;
  overflow-y: auto;
  border-top: 1px solid var(--wfn-ring);
  list-style: none;
}
.wfn-stage .wfn-hud .wfn-search-result {
  justify-content: flex-start;
  gap: var(--openbot-space-2);
  width: 100%;
  height: auto;
  min-height: var(--openbot-control-md);
  padding: var(--openbot-space-1) var(--openbot-space-2);
  color: var(--openbot-text-primary);
  text-align: start;
}
.wfn-search-result .wfn-menu-text {
  flex: 0 0 auto;
}
.wfn-hud.wfn-search.wfn-drop-menu {
  position: relative;
  bottom: auto;
  left: auto;
  width: 240px;
  translate: none;
}
.wfn-hud.wfn-drop-menu .wfn-search-results {
  display: block;
  max-height: min(560px, calc(100vh - var(--openbot-space-8)));
  padding: var(--openbot-space-1) 0 0;
}
.wfn-drop-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wfn-drop-menu:has(.wfn-search-input:focus) .wfn-search-result[data-first] {
  background: var(--wfn-hover);
}
.wfn-search-snippet {
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--wfn-small);
  font-weight: var(--openbot-weight-regular);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wfn-hud.wfn-minimap {
  bottom: calc(var(--wfn-hud-inset) + var(--openbot-control-md) + var(--openbot-space-2) + var(--openbot-space-2));
  inset-inline-start: var(--wfn-hud-inset);
  height: auto;
  padding: 0;
  overflow: hidden;
}
.wfn-minimap svg {
  display: block;
  cursor: pointer;
  touch-action: none;
}
.wfn-minimap-node {
  fill: var(--wfn-kind, var(--openbot-text-primary));
  @supports (color: color-mix(in lab, red, red)) {
    fill: color-mix(in srgb, var(--wfn-kind, var(--openbot-text-primary)) 40%, transparent);
  }
}
.wfn-minimap-node[data-selected] {
  fill: var(--openbot-text-primary);
}
.wfn-minimap-line {
  fill: none;
  stroke: var(--wfn-ink);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wfn-minimap-line[data-brush="marker"] {
  stroke-opacity: 0.45;
}
.wfn-minimap-view {
  fill: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    fill: color-mix(in srgb, var(--openbot-text-primary) 4%, transparent);
  }
  stroke: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    stroke: color-mix(in srgb, var(--openbot-text-primary) 64%, transparent);
  }
  stroke-width: 1.5;
}
.wfn-results-menu {
  min-width: 220px;
}
.wfn-results-menu .wfn-menu-text {
  margin-inline-end: auto;
}
.wfn-results-menu .wfn-menu-meta {
  font-variant-numeric: tabular-nums;
}
.wfn-results-menu .wfn-menu-check {
  margin-inline-start: 0;
}
.wfn-menu-check[data-off] {
  visibility: hidden;
}
.wfn-menu-icon {
  --wfn-kind: var(--openbot-text-secondary);
  display: inline-grid;
  flex: none;
  place-items: center;
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  margin-inline-start: calc(var(--openbot-space-1) * -1);
  border-radius: var(--openbot-radius-sm);
  background: var(--wfn-kind);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--wfn-kind) 16%, transparent);
  }
  box-shadow: inset 0 0 0 1px var(--wfn-kind);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wfn-kind) 14%, transparent);
  }
  color: var(--wfn-kind);
}
:is(.wfn-menu, .wfn-search) .wfn-menu-icon svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: inherit;
  stroke-width: var(--openbot-icon-stroke);
}
@media (prefers-reduced-motion: reduce) {
  .wfn-edge-line, .wfn-edge-comet, .wfn-hud-progress, .wfn-stage .wfn-hud-stop {
    animation: none;
  }
  .wfn-stage :is(.wfn-hud, .wfn-toolbar) .ui-button:active:not(:disabled) {
    scale: 1;
  }
}
.wfn-world[data-group] .wfn-grip {
  display: none;
}
.wfn-viewport:is([data-resizing], [data-dragging]) .wfn-node:not([data-resizing], [data-selected]) .wfn-grip {
  --wfn-grip-color: transparent;
}
.wfn-viewport[data-resizing], .wfn-viewport[data-resizing] .wfn-slot :is(.wfn-label, .wfn-card, .wfn-grip) {
  cursor: ew-resize;
  user-select: none;
}
.wfn-viewport[data-resizing="ns"], .wfn-viewport[data-resizing="ns"] .wfn-slot :is(.wfn-label, .wfn-card, .wfn-grip) {
  cursor: ns-resize;
}
.wfn-viewport[data-resizing="nwse"], .wfn-viewport[data-resizing="nwse"] .wfn-slot :is(.wfn-label, .wfn-card, .wfn-grip) {
  cursor: nwse-resize;
}
.wfn-viewport[data-resizing="nesw"], .wfn-viewport[data-resizing="nesw"] .wfn-slot :is(.wfn-label, .wfn-card, .wfn-grip) {
  cursor: nesw-resize;
}
.wfn-viewport[data-resizing] .wfn-slot :is(.wfn-node, .wfn-card) {
  transition: none;
}
.wfn-empty {
  position: absolute;
  inset: 0;
  display: grid;
  gap: var(--openbot-space-3);
  place-content: center;
  justify-items: center;
  pointer-events: none;
  animation: wfn-fade-in var(--openbot-duration-normal) var(--openbot-ease-out);
}
.wfn-empty > * {
  pointer-events: auto;
}
.wfn-stage .wfn-empty-icon {
  width: var(--openbot-control-lg);
  height: var(--openbot-control-lg);
  border-radius: var(--openbot-radius-lg);
}
.wfn-stage .wfn-empty-icon svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.wfn-empty-title {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  text-wrap: balance;
}
.wfn-marquee {
  position: absolute;
  z-index: 3;
  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) 4%, transparent);
  }
  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) 32%, transparent);
  }
  pointer-events: none;
}
.wfn-group {
  position: absolute;
  z-index: 2;
  border-radius: var(--wfn-radius-card);
  outline: calc(1px / var(--wfn-scale, 1)) dashed var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    outline: calc(1px / var(--wfn-scale, 1)) dashed color-mix(in srgb, var(--openbot-text-primary) 24%, transparent);
  }
  outline-offset: calc(12px / var(--wfn-scale, 1));
  pointer-events: none;
}
.wfn-group .wfn-group-bar {
  bottom: calc(100% + (12px + var(--openbot-space-3)) / var(--wfn-scale, 1));
  pointer-events: auto;
}
.wfn-group-count {
  padding: 0 var(--openbot-space-1) 0 var(--openbot-space-3);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.wfn-viewport[data-dragging] .wfn-group-bar {
  opacity: 0;
}
.wfn-guide {
  position: absolute;
  z-index: 3;
  background: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-primary) 22%, transparent);
  }
  pointer-events: none;
  opacity: 1;
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}
@starting-style {
  .wfn-guide {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wfn-guide {
    transition: none;
  }
}
.wfn-guide[data-axis="x"] {
  width: calc(1px / var(--wfn-scale, 1));
  translate: calc(-0.5px / var(--wfn-scale, 1)) 0;
}
.wfn-guide[data-axis="y"] {
  height: calc(1px / var(--wfn-scale, 1));
  translate: 0 calc(-0.5px / var(--wfn-scale, 1));
}
.wfn-hud-live {
  display: contents;
}
.wfn-stage .wfn-hud-step {
  gap: var(--openbot-space-1-5);
  max-width: 360px;
  font-variant-numeric: tabular-nums;
}
.wfn-stage .wfn-hud .wfn-hud-step > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: none;
  color: var(--openbot-text-muted);
}
.wfn-stage .wfn-hud-status[data-status="failed"] .wfn-hud-step > svg {
  color: var(--openbot-danger-text);
}
.wfn-hud-step .wfn-hud-meta {
  margin-inline-end: 0;
}
.wfn-hud-step-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .wfn-ghost {
    animation: none;
  }
}
.wfn-stage[data-deleted] {
  visibility: hidden;
}
.wfn-undo-toast-tile {
  display: grid;
  place-items: center;
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-control);
  box-shadow: inset 0 0 0 1px var(--openbot-border);
  color: var(--openbot-text-secondary);
}
.wfn-undo-toast-icon {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.app-window.wfn-app {
  height: 100vh;
}
.wfn-stage.wfn-canvas[data-frame="window"] {
  --wfn-hud-inset: var(--openbot-space-2);
  height: 100%;
  background: transparent;
}
.wfn-canvas[data-frame="window"] :is(.wfn-viewport, .wfn-empty) {
  top: var(--left-header-height);
}
.wfn-canvas[data-frame="window"] .wfn-viewport {
  border-radius: var(--wfn-card-inner-radius);
  background: var(--openbot-bg-frame);
}
.wfn-canvas[data-frame="window"] .wfn-follow-frame {
  top: var(--left-header-height);
  border-radius: var(--wfn-card-inner-radius);
}
.wfn-app .sidebar-marketplace-button {
  display: none;
}
.wfn-canvas[data-frame="window"] .wfn-hud-top {
  top: 0;
  inset-inline-end: var(--openbot-space-3);
  inset-inline-start: calc(var(--left-panel-width) + var(--openbot-space-3));
  height: var(--left-header-height);
  align-items: center;
}
.wfn-canvas[data-frame="window"] .wfn-hud-top .wfn-hud {
  height: auto;
  padding: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.wfn-canvas[data-frame="window"] .wfn-hud-top .wfn-hud-button {
  height: var(--openbot-control-xs);
  padding-inline: var(--openbot-space-2);
  font-size: var(--openbot-text-lg);
}
.wfn-canvas[data-frame="window"] .wfn-hud-top .wfn-hud-button svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.wfn-canvas[data-frame="window"][data-hud-hidden] .wfn-hud-top, .wfn-canvas[data-frame="window"][data-hud-hidden] .wfn-hud-top .wfn-hud {
  visibility: visible;
  opacity: 1;
}
.wfs-menu.ui-action-menu {
  --ui-menu-panel-shadow: inset 0 1px 0 var(--ui-menu-highlight), 0 0 0 1px var(--ui-menu-edge);
  min-width: 260px;
  max-width: min(320px, calc(100vw - var(--openbot-space-4)));
  max-height: min(520px, var(--kb-popper-content-available-height, 520px));
  overflow-y: auto;
}
.wfs-menu .wfs-name {
  flex: 1 1 auto;
}
.wfs-menu .ui-menu-trailing {
  flex: none;
  font-variant-numeric: tabular-nums;
}
.wfn-hud-version .wfn-hud-button > svg[class~="lucide-arrow-left"]:dir(rtl) {
  transform: scaleX(-1);
}
.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: normal;
  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: wrap;
  gap: var(--openbot-space-4) calc(var(--openbot-space-6) * 2);
  max-height: calc(var(--openbot-leading-sm) + var(--openbot-space-1) + var(--openbot-leading-xl));
  margin-top: var(--openbot-space-4);
  overflow: hidden;
}
.agent-usage-totals dt {
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-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);
  line-height: var(--openbot-leading-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: end;
  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: start;
  padding-inline-start: 0;
  white-space: normal;
}
.agent-usage-table td:last-child {
  padding-inline-end: 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-table td.agent-usage-table-empty {
  padding-inline-start: 0;
  text-align: start;
  white-space: normal;
  color: var(--openbot-text-muted);
}
.agent-usage-breakdown {
  position: relative;
}
.agent-usage-breakdown > .ui-sliding-tabs-content:not([data-selected]) {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.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;
}
.usage-machine-icon {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex-shrink: 0;
}
.usage-machine-trigger {
  flex-shrink: 0;
  gap: var(--openbot-space-3);
  color: var(--openbot-text-muted);
}
.usage-machine-item {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
}
.usage-machine-value {
  font-variant-numeric: tabular-nums;
}
.usage-machine-ring {
  width: var(--openbot-icon-md);
  --ui-radial-progress-color: var(--openbot-text-secondary);
}
.usage-machine-ring .ui-radial-progress-track, .usage-machine-ring .ui-radial-progress-indicator {
  stroke-width: 6;
}
.usage-machine-ring .ui-radial-progress-track {
  stroke: var(--openbot-text-dim);
  stroke-opacity: 0.35;
}
.usage-machine-item[data-tone="warning"] {
  color: var(--openbot-warning-text);
}
.usage-machine-item[data-tone="danger"] {
  color: var(--openbot-danger-text);
}
.ui-popover-menu-surface.usage-machine-popover {
  animation: ui-select-content-in var(--openbot-duration-dialog) var(--openbot-ease-out) both;
}
@media (prefers-reduced-motion: reduce) {
  .ui-popover-menu-surface.usage-machine-popover {
    animation-name: ui-select-content-fade-in;
  }
}
.usage-machine-popover .usage-machine-detail {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1-5);
}
.usage-machine-popover .usage-machine-detail-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.usage-machine-popover .usage-machine-detail-name {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.usage-machine-popover .usage-machine-icon {
  color: var(--openbot-text-secondary);
}
.usage-machine-popover .usage-machine-detail-value {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  color: var(--openbot-text-secondary);
  font-variant-numeric: tabular-nums;
}
.usage-machine-popover [data-tone="warning"] .usage-machine-detail-value {
  color: var(--openbot-warning-text);
}
.usage-machine-popover [data-tone="danger"] .usage-machine-detail-value {
  color: var(--openbot-danger-text);
}
.usage-machine-popover .usage-machine-bar .ui-progress-track {
  height: 6px;
}
.usage-machine-popover [data-tone="warning"] .ui-progress-fill {
  background: var(--openbot-warning);
}
.usage-machine-popover [data-tone="danger"] .ui-progress-fill {
  background: var(--openbot-danger);
}
.usage-machine-popover .context-meter-action.usage-machine-storage {
  height: auto;
  flex-direction: column;
  align-items: stretch;
  gap: var(--openbot-space-1-5);
  padding-block: var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-weight: inherit;
  text-align: start;
}
.usage-machine-popover .usage-machine-storage .usage-machine-chevron {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
}
.usage-machine-popover .usage-machine-detail-size {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
.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-inline-start: calc(-1 * var(--openbot-space-2));
}
.agent-usage-identity > .ui-icon-button > svg:dir(rtl) {
  transform: scaleX(-1);
}
.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-inline-start: 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: 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-inline-start: 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;
}
.app-window > .app-loading {
  position: fixed;
}
.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-inline-start: calc(-1 * var(--openbot-space-2));
}
.tasks-page-header svg:is([class~="lucide-arrow-left"], [class~="lucide-panel-left"]):dir(rtl) {
  transform: scaleX(-1);
}
.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-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-inline-start: 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-agent-menu.ui-action-menu {
  --tasks-agent-max: min(420px, calc(100dvh - 16px), var(--kb-popper-content-available-height, 420px));
  display: flex;
  width: 240px;
  max-height: var(--tasks-agent-max);
  flex-direction: column;
}
.tasks-page-agent-picker {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--ui-menu-padding);
}
.tasks-page-agent-search {
  display: flex;
  height: var(--openbot-control-md);
  flex: none;
  align-items: center;
  gap: var(--openbot-space-2);
  border-radius: var(--ui-menu-item-radius);
  background: var(--ui-menu-item-hover);
  padding-inline: var(--ui-menu-inset);
  cursor: text;
}
.tasks-page-agent-search > svg {
  width: 18px;
  height: var(--openbot-icon-sm);
  flex: none;
  color: var(--openbot-text-muted);
  stroke-width: var(--openbot-icon-stroke);
}
.tasks-page-agent-search .tasks-page-agent-search-input {
  min-width: 0;
  height: 100%;
  flex: 1;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  color: var(--openbot-text-primary);
  font: inherit;
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
.tasks-page-agent-search .tasks-page-agent-search-input:focus-visible {
  outline: 0;
  box-shadow: none;
}
.tasks-page-agent-search-input::placeholder {
  color: var(--openbot-text-muted);
}
.tasks-page-agent-list {
  height: min( calc(var(--tasks-agent-rows, 0) * var(--openbot-control-md)), calc(var(--tasks-agent-max) - var(--openbot-control-md) - 3 * var(--ui-menu-padding)) );
  min-height: 0;
  flex: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  outline: 0;
  padding: 0;
  scrollbar-width: none;
  transition: height var(--openbot-duration-slow) var(--ui-menu-ease);
}
.tasks-page-agent-list::-webkit-scrollbar {
  display: none;
}
.tasks-page-agent-option {
  display: flex;
  height: var(--openbot-control-md);
  align-items: center;
  gap: var(--openbot-space-2);
  border-radius: var(--ui-menu-item-radius);
  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;
}
.tasks-page-agent-option > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.tasks-page-agent-option[data-highlighted] {
  background: var(--ui-menu-item-hover);
}
.tasks-page-agent-name {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tasks-page-agent-name b {
  font-weight: var(--openbot-weight-semibold);
}
.tasks-page-agent-empty {
  margin: 0;
  padding: var(--openbot-space-1) var(--ui-menu-inset) var(--openbot-space-1-5) calc(var(--ui-menu-inset) + 18px + var(--openbot-space-2));
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  overflow-wrap: anywhere;
  transition: opacity var(--openbot-duration-normal) var(--openbot-ease-out) var(--openbot-duration-fast);
  @starting-style {
    opacity: 0;
  }
}
.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: start;
  --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 var(--tasks-page-side-width, 420px);
  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);
}
html.panel-resizing .tasks-page-side {
  transition: none;
}
.tasks-page-side[data-closing] > .panel-resizer {
  visibility: hidden;
}
.tasks-page-side-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}
.tasks-page-side-content {
  position: absolute;
  inset-block: 0;
  inset-inline: 0 auto;
  display: flex;
  width: var(--tasks-page-side-width, 420px);
  --browser-panel-width: 100%;
}
.tasks-page-side-content > * {
  flex: 1;
  min-width: 0;
}
.tasks-panel .file-preview-header {
  --task-list-glyph: 16px;
}
.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);
  }
}
.tasks-page[data-empty] .tasks-page-column {
  min-height: 100%;
}
.tasks-page[data-empty] .tasks-page-composer.composer-wrap {
  position: static;
}
.tasks-page-empty-pitch {
  display: grid;
  justify-items: center;
  gap: var(--openbot-space-3);
  margin-top: auto;
  padding: 0 var(--openbot-space-2) var(--openbot-space-6);
  text-align: center;
}
.tasks-page-empty-title {
  --tasks-page-empty-hand-size: calc(var(--openbot-text-display) * 1.2);
  display: grid;
  margin: 0;
  font-size: var(--openbot-text-display);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.tasks-page-empty-lead {
  color: var(--openbot-text-muted);
}
.tasks-page-empty-word {
  color: var(--openbot-accent-text);
  font-family: "Bradley Hand", "Noteworthy", "Segoe Print", cursive;
  font-size: var(--tasks-page-empty-hand-size);
  clip-path: inset(-0.4em 100% -0.4em -0.2em);
  animation: tasks-page-empty-write 640ms linear 500ms forwards;
}
@keyframes tasks-page-empty-write {
  to {
    clip-path: inset(-0.4em -0.2em -0.4em -0.2em);
  }
}
.tasks-page-empty-lines {
  display: grid;
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-lg);
  line-height: 1.5;
}
.tasks-page-empty-board {
  --tasks-page-empty-head: 1.75rem;
  --tasks-page-empty-block: calc(var(--tasks-page-empty-head) + var(--openbot-control-lg) + var(--openbot-space-4));
  position: relative;
  display: grid;
  grid-template-rows: repeat(3, var(--tasks-page-empty-block));
  margin: var(--openbot-space-2) 0 auto;
  padding-bottom: var(--openbot-space-8);
  opacity: 0.6;
  pointer-events: none;
  user-select: none;
  mask-image: radial-gradient( ellipse 80% 100% at 50% 45%, var(--openbot-text-primary) 45%, var(--openbot-transparent) 100% );
}
.tasks-page-empty-section.tasks-page-section {
  margin-top: 0;
}
.tasks-page-empty-section .tasks-page-section-heading {
  height: var(--tasks-page-empty-head);
}
.tasks-page-empty-rows {
  position: absolute;
  inset: 0;
}
.tasks-page-empty-row {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  transform: translateY( calc( var(--tasks-page-empty-slot) * var(--tasks-page-empty-block) + var(--tasks-page-empty-head) + var(--openbot-space-0-5) ) );
  transition: transform 760ms var(--openbot-ease-out), opacity 600ms var(--openbot-ease-out), filter 600ms var(--openbot-ease-out), translate 600ms var(--openbot-ease-out);
  animation: tasks-page-empty-arrive 620ms var(--openbot-ease-out) both;
}
@keyframes tasks-page-empty-arrive {
  from {
    opacity: 0;
    filter: blur(4px);
    translate: 0 10px;
    scale: 0.97;
  }
}
.tasks-page-empty-row[data-age="3"] {
  opacity: 0;
  filter: blur(3px);
  translate: 0 -8px;
}
@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], .tasks-page-empty-row {
    animation: none;
  }
  .tasks-page-empty-word {
    clip-path: none;
    animation: none;
  }
  .tasks-page-side, .tasks-page-agent-chevron, .tasks-page-agent-list, .tasks-page-agent-empty, .tasks-page-empty-row {
    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: end;
}
.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: end;
}
.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-lg);
}
.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: start;
  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-row-chevron:dir(rtl) {
  transform: scaleX(-1);
}
.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%;
  inset-inline-start: 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-inline-start: 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-lg);
}
.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-inline-end: 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: start;
  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);
}
.machine-resources-metrics, .machine-resources-settings {
  margin: 0;
  padding: 0;
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-grouped);
  list-style: none;
}
.machine-resources-metric {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 96px 44px;
  align-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3) var(--openbot-space-4);
}
.machine-resources-metric + .machine-resources-metric {
  border-top: 1px solid var(--openbot-border-grouped);
}
.machine-resources-icon {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-secondary);
}
.machine-resources-metric[data-tone="warning"] .machine-resources-icon {
  color: var(--openbot-warning);
}
.machine-resources-metric[data-tone="danger"] .machine-resources-icon {
  color: var(--openbot-danger);
}
.machine-resources-copy {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-0-5);
}
.machine-resources-title {
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.machine-resources-meta {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.machine-resources-bar {
  position: relative;
  display: flex;
  align-items: center;
}
.machine-resources-bar .ui-progress-track {
  height: 6px;
}
.machine-resources-metric[data-tone="warning"] .ui-progress-fill {
  background: var(--openbot-warning);
}
.machine-resources-metric[data-tone="danger"] .ui-progress-fill {
  background: var(--openbot-danger);
}
.machine-resources-threshold {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-secondary);
}
.machine-resources-value {
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  text-align: end;
}
.storage-message.machine-resources-alert .storage-message-icon {
  color: var(--openbot-warning);
}
.machine-resources-settings {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
  padding: var(--openbot-space-4);
}
.machine-resources-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-4);
}
.machine-resources-select {
  flex: 0 0 220px;
}
@container (max-width: 520px) {
  .machine-resources-metric {
    grid-template-columns: auto minmax(0, 1fr) 44px;
  }
  .machine-resources-bar {
    display: none;
  }
  .machine-resources-setting {
    flex-direction: column;
    align-items: stretch;
  }
  .machine-resources-select {
    flex-basis: auto;
  }
}
.library-frame {
  position: relative;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.library-page {
  position: relative;
  display: flex;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  gap: var(--openbot-space-4);
  overflow-y: auto;
  padding: var(--openbot-space-8) var(--openbot-space-8) var(--openbot-space-6);
}
.library-frame[data-pill] .library-page {
  padding-bottom: calc(var(--openbot-space-8) * 3);
}
.library-page[data-marquee] {
  cursor: default;
  user-select: none;
}
.library-marquee {
  position: absolute;
  z-index: 2;
  border: 1px solid var(--openbot-accent);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-accent-soft);
  pointer-events: none;
}
.library-pill {
  position: absolute;
  z-index: 5;
  bottom: var(--openbot-space-6);
  left: 50%;
  display: flex;
  box-sizing: border-box;
  height: 44px;
  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);
  box-shadow: inset 0 0 0 1px var(--openbot-shadow-ring);
  color: var(--openbot-text-primary);
  translate: -50% 0;
  transition: background-color var(--openbot-duration-normal) var(--openbot-ease-out), border-color var(--openbot-duration-normal) var(--openbot-ease-out);
}
.library-pill[data-tone="danger"] {
  border-color: var(--openbot-danger-border);
  background: linear-gradient(var(--openbot-danger-soft), var(--openbot-danger-soft)), var(--openbot-bg-surface-raised);
}
.library-pill-face {
  position: relative;
  display: flex;
  width: max-content;
  flex: none;
  align-items: center;
  gap: var(--openbot-space-1);
  padding-inline: var(--openbot-space-1-5);
  white-space: nowrap;
}
.library-pill-progress {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  background: var(--openbot-accent-soft);
  transition: width var(--openbot-duration-slow) var(--openbot-ease-out);
}
.library-pill-count, .library-pill-text {
  display: inline-flex;
  overflow: hidden;
  align-items: center;
  gap: var(--openbot-space-1-5);
  padding-inline: var(--openbot-space-2);
  font-size: var(--openbot-text-sm);
  font-weight: 620;
  font-variant-numeric: tabular-nums;
}
.library-pill-count > span {
  display: inline-block;
}
.library-pill-status {
  padding-inline: var(--openbot-space-3);
}
.ui-button.library-pill-button {
  border-radius: var(--openbot-radius-pill);
}
.library-pill-rule {
  width: 1px;
  height: 18px;
  margin-inline: var(--openbot-space-0-5);
  background: var(--openbot-border);
}
@media (prefers-reduced-motion: reduce) {
  .library-pill, .library-pill-progress {
    transition: none;
  }
}
.library-truncate {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.library-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
}
.library-title {
  margin: 0;
  font-size: var(--openbot-text-2xl);
  font-weight: var(--openbot-weight-semibold);
}
.library-tools {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
}
.library-views {
  display: flex;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
  gap: var(--openbot-space-0-5);
}
.library-views [aria-pressed="true"] {
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
}
.library-search {
  width: min(320px, 40vw);
}
.library-grid {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 4 220px;
  column-gap: var(--openbot-space-3);
}
.library-tile {
  position: relative;
  margin-bottom: var(--openbot-space-3);
  break-inside: avoid;
}
.ui-button.library-picture, .ui-button.library-file-card {
  display: block;
  width: 100%;
  height: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-surface);
  color: inherit;
  font: inherit;
  text-align: start;
  white-space: normal;
  cursor: pointer;
}
.library-picture img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto 1 / 1;
}
.ui-button.library-file-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3);
}
.library-file-name {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  min-width: 0;
  padding-inline-end: var(--openbot-space-6);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.library-file-source {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.library-file-source:empty {
  display: none;
}
.library-tile-menu {
  position: absolute;
  top: var(--openbot-space-2);
  inset-inline-end: var(--openbot-space-2);
  opacity: 0;
}
.library-tile[data-kind="image"] .library-tile-menu {
  background: var(--openbot-bg-overlay);
}
.library-tile:is(:hover, :focus-within) .library-tile-menu, .library-tile-menu[data-expanded] {
  opacity: 1;
}
.file-select-mark {
  display: inline-flex;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  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;
}
.file-select-mark[data-selected] {
  border-color: var(--openbot-accent);
  background: var(--openbot-accent);
  color: var(--openbot-text-on-accent);
}
.file-select-mark svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  stroke-width: 2.5;
}
.file-row[data-selected] {
  background: var(--openbot-accent-soft);
}
.library-tile-mark {
  position: absolute;
  top: var(--openbot-space-2);
  inset-inline-end: var(--openbot-space-2);
  pointer-events: none;
}
.library-tile[data-kind="image"] .library-tile-mark:not([data-selected]) {
  background: var(--openbot-bg-overlay);
}
.library-tile[data-selected] :is(.library-picture, .library-file-card).ui-button {
  border-color: var(--openbot-accent);
  outline: 1px solid var(--openbot-accent);
}
@media (hover: hover) {
  .ui-button.library-picture:hover, .ui-button.library-file-card:hover {
    border-color: var(--openbot-border-strong);
    background: var(--openbot-bg-surface);
    color: inherit;
  }
}
@media (max-width: 720px) {
  .library-page {
    padding: var(--openbot-space-4);
  }
  .library-head {
    flex-wrap: wrap;
  }
  .library-search {
    width: auto;
    flex: 1;
  }
}
.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;
  inset-inline-start: 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-folder:not([data-selected]) {
  display: none;
}
.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-block: var(--openbot-space-2);
  padding-inline: var(--openbot-space-3) var(--openbot-space-2);
  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-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-3) var(--openbot-space-1);
  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: start;
  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-lg);
}
.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-lg);
}
.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-inline-start: -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);
}
.agent-import-sources {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.agent-import-source .agent-import-picker-copy {
  flex: 1;
}
.agent-import-source-logo {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  flex: 0 0 auto;
  color: var(--openbot-text-primary);
  fill: currentColor;
}
.agent-import-back.ui-button {
  align-self: flex-start;
}
.agent-import-back.ui-button svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.agent-import-back.ui-button > svg[class~="lucide-arrow-left"]:dir(rtl) {
  transform: scaleX(-1);
}
.hermes-logo-tile {
  fill: var(--openbot-text-primary);
}
.hermes-logo-mark {
  fill: var(--openbot-bg-canvas);
}
.agent-import-source-label {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
}
.agent-import-source-label-logo {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
}
.agent-import-profile {
  gap: var(--openbot-space-2);
}
.agent-import-profile-head {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
}
.agent-import-profile-name {
  margin: 0;
}
.agent-import-chevron {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.agent-import-chevron-open {
  transform: rotate(180deg);
}
.agent-import-rerun {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-grouped);
}
.agent-import-items[data-muted="true"] {
  opacity: 0.5;
}
.agent-import-item {
  align-items: flex-start;
}
.agent-import-allow {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--openbot-space-1-5);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  cursor: pointer;
}
.agent-import-command {
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  overflow-wrap: anywhere;
  white-space: normal;
}
.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-flow-arrow:dir(rtl), .instance-transfer-back > svg[class~="lucide-chevron-left"]:dir(rtl) {
  transform: scaleX(-1);
}
.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: start;
  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: start;
  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]):hover {
    background: var(--openbot-hover);
    color: var(--openbot-text-primary);
  }
}
.settings-modal-nav-item > svg:first-child {
  color: var(--openbot-text-muted);
}
.settings-modal-nav-item:is([aria-current], [data-selected], :focus-visible) > svg:first-child {
  color: var(--openbot-text-primary);
}
@media (hover: hover) and (pointer: fine) {
  .settings-modal-nav-item:hover > svg:first-child {
    color: var(--openbot-text-primary);
  }
}
.settings-modal-main {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  background: var(--openbot-bg-canvas);
}
.settings-modal-footer {
  display: contents;
}
.settings-page-path {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-1-5);
  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);
  white-space: nowrap;
}
.settings-page-path .settings-page-path-parent {
  flex: 0 1 auto;
  min-width: 0;
  margin-inline: calc(-1 * var(--openbot-space-2) - 1px) calc(-1 * var(--openbot-space-1));
  overflow: hidden;
  border-color: transparent;
  background: transparent;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-page-path .settings-page-path-parent:focus-visible {
  border-color: var(--openbot-border);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-primary);
}
@media (hover: hover) and (pointer: fine) {
  .settings-page-path .settings-page-path-parent:hover:not(:disabled) {
    border-color: var(--openbot-border);
    background: var(--openbot-bg-control);
    color: var(--openbot-text-primary);
  }
}
.settings-page-path-separator {
  flex: 0 0 auto;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
}
.settings-page-path-separator:dir(rtl) {
  transform: scaleX(-1);
}
.settings-page-path-current {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font: inherit;
  text-overflow: ellipsis;
}
.settings-page-description {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.settings-modal-scroll-frame {
  position: relative;
  min-height: 0;
  overflow: hidden;
}
.settings-modal-scroll-frame::before, .settings-modal-scroll-frame::after {
  position: absolute;
  inset-inline-end: var(--openbot-space-2);
  inset-inline-start: 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-on-accent);
}
.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-on-accent);
}
.settings-modal .ui-switch[data-checked] {
  background: var(--openbot-accent);
}
.settings-modal .ui-switch-thumb[data-checked] {
  background: var(--openbot-text-on-accent);
}
@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-on-accent);
  }
}
: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-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-block: 0 var(--openbot-space-3);
  padding-inline: 54px 0;
}
.provider-picker-embedded .provider-picker-accounts {
  margin-top: calc(-1 * var(--openbot-space-2));
  padding-block: 0 var(--openbot-space-2);
  padding-inline: 54px 0;
}
.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-inline-end: 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-link-select {
  width: 220px;
}
.ui-select-item.settings-modal-select-group-end {
  margin-bottom: var(--openbot-space-1);
  border-bottom: 1px solid var(--openbot-border);
}
.settings-modal-link-command {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: var(--openbot-space-2);
}
.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: end;
  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-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-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: start;
  }
  .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-mobile-dialog-footer svg:is([class~="lucide-arrow-left"], [class~="lucide-arrow-right"]):dir(rtl) {
  transform: scaleX(-1);
}
.settings-modal-page > .settings-modal-main > .settings-modal-scroll-frame > .settings-modal-content {
  padding-top: var(--openbot-space-6);
}
.settings-provider-section {
  display: grid;
  gap: var(--openbot-space-2);
}
.settings-dynamic-island-size > .ui-slider-field, .settings-dynamic-island-preview, .settings-agent-dock-size {
  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-agent-dock-avatar {
  width: 32px;
  height: 32px;
}
.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-model-actions {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.settings-voice-key-field > .ui-input {
  width: 100%;
}
.settings-modal-row .settings-voice-needs-key {
  color: var(--openbot-warning-text);
}
.settings-voice-toast-progress {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-top: var(--openbot-space-1);
}
.settings-voice-toast-progress > .ui-progress {
  flex: 1;
}
.settings-voice-toast-percent {
  font-variant-numeric: tabular-nums;
}
.custom-provider-dialog.voice-server-dialog {
  width: min(640px, 100%);
}
.voice-server-dialog .voice-server-line {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) minmax(0, 2fr) auto;
  gap: var(--openbot-space-2) var(--openbot-space-3);
  align-items: center;
  padding: var(--openbot-space-3) var(--openbot-space-4);
}
.voice-server-dialog .voice-server-name {
  display: grid;
  grid-column: 1;
  min-width: 0;
}
.voice-server-dialog .voice-server-model {
  grid-column: 2;
  min-width: 0;
}
.voice-server-dialog .voice-server-wide {
  grid-column: 2 / 4;
}
.voice-server-dialog .voice-server-voice {
  grid-column: 3;
  min-width: 0;
}
.voice-server-dialog .voice-server-end {
  display: flex;
  grid-column: 4;
  justify-content: flex-end;
}
.voice-server-dialog .voice-server-line .settings-modal-select {
  width: 100%;
}
.window-rail {
  position: relative;
  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-logo {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  height: var(--left-header-height, 38px);
  align-items: center;
  justify-content: center;
  padding-top: 2px;
}
.window-rail-logo .app-logo {
  display: block;
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
}
.window-rail-logo-link {
  display: flex;
  border-radius: var(--openbot-radius-logo);
  -webkit-app-region: no-drag;
}
.window-rail-logo-link:focus-visible {
  outline: 0;
  box-shadow: var(--openbot-focus-ring);
}
.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 {
  --openbot-icon-stroke: var(--openbot-icon-stroke-lg);
  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);
  inset-inline-end: 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);
}
.window-rail-button .window-rail-agent-usage-logo {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.window-rail-agent-usage {
  display: grid;
  padding-inline: var(--openbot-space-1);
  gap: var(--openbot-space-1);
}
.window-rail-agent-usage-text {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.window-rail-more-menu .window-rail-more-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--openbot-control-md);
  align-items: center;
  border-radius: var(--ui-menu-item-radius);
  transition: background-color var(--openbot-duration-hover) var(--openbot-ease-out);
}
.ui-action-menu.window-rail-more-menu .window-rail-more-row:is(:hover, :has([data-highlighted])) {
  background: var(--ui-menu-item-hover);
}
.ui-action-menu.window-rail-more-menu .window-rail-more-row :is([role="menuitem"], [role="menuitemcheckbox"]):is(:hover, :focus-visible, [data-highlighted]) {
  background: transparent;
}
.ui-action-menu.window-rail-more-menu .window-rail-more-pin[role="menuitemcheckbox"] {
  justify-content: center;
  padding: 0;
  opacity: 0;
}
.ui-action-menu.window-rail-more-menu .window-rail-more-row:is([data-pinned], :hover, :focus-within) .window-rail-more-pin {
  opacity: 1;
}
@media (hover: none) {
  .ui-action-menu.window-rail-more-menu .window-rail-more-pin[role="menuitemcheckbox"] {
    opacity: 1;
  }
}
.window-rail-more-menu .window-rail-more-row[data-pinned] .window-rail-more-pin > .agent-context-icon {
  color: var(--openbot-text-primary);
}
.ui-action-menu.window-rail-more-menu .window-rail-more-row:is(:hover, :has([data-highlighted])) > [role="menuitem"] > .agent-context-icon {
  color: var(--openbot-text-primary);
}
.app-window {
  --window-frame: var(--openbot-bg-frame);
  --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;
  }
  .app-frame .tasks-page-header > .side-panel-toggle {
    display: none;
  }
}
.app-window > :is(.web-app-frame, .app-frame:not(.app-frame-platform-darwin)):not(.app-frame-with-server-rail) > .sidebar:not(.sidebar-compact) .sidebar-topbar {
  padding-inline-start: var(--openbot-space-3);
}
@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, .web-app-frame) > .sidebar:not(.sidebar-compact) .sidebar-topbar {
    padding-inline-start: var(--openbot-space-6);
  }
  .app-window > .app-frame-edge {
    position: relative;
    isolation: isolate;
    padding-block: 0 calc(var(--window-edge) + 1px);
    padding-inline: 0 calc(var(--window-edge) + 1px);
    background: var(--window-frame);
  }
  .app-window > .app-frame-edge::before {
    position: absolute;
    z-index: -1;
    inset-block: calc(var(--left-header-height) - 1px) var(--window-edge);
    inset-inline: 0 var(--window-edge);
    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 {
    inset-inline-start: var(--server-rail-width);
  }
  .app-window > .app-frame-edge.app-frame-agent-dock {
    --agent-dock-column: calc(64px - var(--window-edge) - 1px);
    padding-inline-end: calc(var(--window-edge) + 1px + var(--agent-dock-column));
  }
  .app-window > .app-frame-edge.app-frame-agent-dock::before {
    inset-inline-end: calc(var(--window-edge) + var(--agent-dock-column));
  }
  .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 > .sidebar {
    --agent-avatar-outline: var(--openbot-bg-canvas);
  }
  .app-window > .app-frame-edge .channel-title {
    --agent-avatar-outline: var(--window-frame);
  }
  .app-window > .app-frame-edge :is(.conversation-panel, .direct-conversation)::before {
    content: none;
  }
  .app-window > .app-frame-edge > .sidebar::before {
    inset-block: var(--left-header-height) 0;
    inset-inline: auto 0;
    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)::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 {
    inset-inline-end: 0;
  }
  .app-window > .app-frame-edge :is(.settings-panel, .browser-panel) {
    border-inline-start: 0;
  }
  .app-window > .app-frame-edge :is(.settings-panel, .browser-panel)::before {
    inset-block: calc(var(--left-header-height) - 1px) 0;
    inset-inline: 0 auto;
    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) {
    position: relative;
  }
  .app-window > .app-frame-edge :is(.settings-panel, .browser-panel) > :is(.settings-panel-header, .file-preview-header)::before {
    inset-inline-start: 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)::before {
    content: none;
  }
  .app-window > .app-frame-edge .side-panel-maximized > :is(.settings-panel, .browser-panel) {
    border-end-end-radius: calc(var(--openbot-radius-card) - 1px);
    background: var(--openbot-bg-canvas);
  }
  .app-window > .app-frame-edge .diagram-view-body {
    border-top: 0;
    border-inline-end: 0;
    border-radius: 0;
    border-end-end-radius: calc(var(--openbot-radius-card) - 1px);
  }
  .app-window > .app-frame-edge .conversation-header-actions {
    gap: var(--openbot-space-2);
  }
  .app-window > .app-frame-edge :is(.conversation-header, .tasks-page-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 :is(.conversation-header, .tasks-page-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 :is(.conversation-header, .tasks-page-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-inline-start: calc(var(--openbot-space-2) + 1px);
    overflow: visible;
  }
  .app-window > .app-frame-edge .conversation-header-actions > .side-panel-toggle::before {
    position: absolute;
    top: 50%;
    inset-inline-start: 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) {
    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-inline-start: 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 .routine-planner-empty {
    min-height: 0;
    overflow-y: auto;
    grid-template-rows: minmax(0, 1fr);
  }
  .app-window > .app-frame-edge > .window-page :is(.routine-planner-empty-board, .routine-planner-empty-board > *) {
    min-height: 0;
    overflow: hidden;
  }
  .app-window > .app-frame-edge > .window-page .routine-planner-empty-board {
    grid-template-rows: minmax(0, 1fr);
  }
  @container (max-width: 920px) {
    .app-window > .app-frame-edge > .window-page .routine-planner-empty {
      grid-template-rows: none;
    }
  }
  .app-window > .app-frame-edge > .app-frame-panes .tasks-page {
    position: relative;
    box-sizing: border-box;
    padding-top: var(--left-header-height);
    background: transparent;
  }
  .app-window > .app-frame-edge > .app-frame-panes .tasks-page-header {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: var(--left-header-height);
    padding: 0 var(--openbot-space-3);
    -webkit-app-region: drag;
  }
  .app-window > .app-frame-edge > .app-frame-panes .tasks-page-header h2 {
    font-size: var(--openbot-text-md);
    font-weight: var(--openbot-weight-medium);
    white-space: nowrap;
  }
  .app-window > .app-frame-edge > .app-frame-panes .tasks-page-header > .ui-icon-button, .app-window > .app-frame-edge > .app-frame-panes .tasks-page-header > h2 > span {
    display: none;
  }
  .app-frame-edge > .app-frame-panes .tasks-page-header h2:focus {
    outline: none;
  }
  .app-window > .app-frame-edge > .app-frame-panes .tasks-page-column {
    padding-top: var(--openbot-space-6);
  }
  .app-window > .app-frame-edge > .app-frame-panes .tasks-page-side {
    border-end-end-radius: calc(var(--openbot-radius-card) - 1px);
  }
  .app-frame-edge.app-frame-sidebar-hidden > .sidebar > :not(.sidebar-topbar), .app-frame-edge.app-frame-sidebar-hidden > .left-panel-resizer {
    visibility: hidden;
  }
  .app-frame-edge.app-frame-sidebar-hidden > .sidebar .sidebar-new-button, .app-frame-edge.app-frame-sidebar-hidden > .sidebar::before {
    display: none;
  }
  .app-window > .app-frame-edge.app-frame-sidebar-hidden > .app-frame-panes {
    position: absolute;
    grid-row: 1 / -1;
    grid-column: -4 / -1;
    inset: 0;
    pointer-events: none;
  }
  .app-window > .app-frame-edge.app-frame-sidebar-hidden > .app-frame-panes .tasks-page-header {
    inset-inline-start: var(--left-panel-width);
  }
  .app-window > .app-frame-edge.app-frame-sidebar-hidden > .app-frame-panes :is(.tasks-page-scroll, .tasks-page-side) {
    pointer-events: auto;
  }
  .app-frame-edge:not([data-window-page-kind="agents"]) > .window-page {
    position: absolute;
    grid-row: 1 / -1;
    grid-column: 1 / -1;
    inset-block: 0;
    inset-inline: 1px 0;
  }
  .app-frame-edge[data-window-page-kind="settings"] > .window-page {
    pointer-events: none;
  }
  .app-frame-edge[data-window-page-kind="settings"] > .window-page > .settings-page {
    grid-template-rows: var(--left-header-height) minmax(0, 1fr);
  }
  .app-frame-edge[data-window-page-kind="settings"] > .window-page > .settings-page > .settings-page-nav {
    grid-row: 2;
  }
  .app-frame-edge[data-window-page-kind="settings"] > .window-page > .settings-page :is(.settings-page-nav, .settings-page-content, .settings-page-path) {
    pointer-events: auto;
    -webkit-app-region: no-drag;
  }
  .app-frame-edge[data-window-page-kind="settings"] > .window-page > .settings-page > .settings-page-path-row {
    padding: 0 var(--openbot-space-3);
    -webkit-app-region: drag;
  }
  .app-frame-edge[data-window-page-kind="settings"] > .window-page > .settings-page > .settings-page-path-row > .settings-page-path {
    width: auto;
    flex: 0 1 auto;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
  }
  .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 {
    inset-inline-start: 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-inline-start: 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, .routine-planner-empty, .routine-planner-error, .marketplace-heading, .marketplace-nav, .skills-marketplace-body ) {
    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-heading {
    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) > .ui-icon-button, .app-window > .app-frame-edge > .window-page :is(.agent-usage-identity, .routine-planner-identity) > h2 > span {
    display: none;
  }
  .app-frame-edge > .window-page :is(.agent-usage-identity, .routine-planner-identity) 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);
  grid-template-rows: auto minmax(0, 1fr);
}
.settings-page-path-row {
  display: flex;
  min-width: 0;
  grid-column: 2;
  grid-row: 1;
  align-items: center;
  padding: var(--openbot-space-4) 0 0;
}
.settings-page-path-row:empty {
  display: none;
}
.settings-page-path-row > .settings-page-path {
  width: 100%;
  max-width: 784px;
  margin-inline: auto;
  padding-inline: var(--openbot-space-8);
}
.settings-page-nav {
  display: flex;
  grid-row: 1 / -1;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  gap: var(--openbot-space-1);
  overflow: hidden;
  border-inline-end: 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);
}
@property --settings-page-fade-start {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --settings-page-fade-end {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@supports (animation-timeline: scroll()) {
  .settings-page-sections, .settings-page-results {
    --settings-page-fade-size: var(--openbot-space-6);
    mask-image: linear-gradient( to bottom, transparent, var(--openbot-text-primary) var(--settings-page-fade-start), var(--openbot-text-primary) calc(100% - var(--settings-page-fade-end)), transparent );
    animation: settings-page-fade-start linear both, settings-page-fade-end linear both;
    animation-timeline: scroll(self block), scroll(self block);
    animation-range: 0 var(--settings-page-fade-size), calc(100% - var(--settings-page-fade-size)) 100%;
  }
}
@keyframes settings-page-fade-start {
  from {
    --settings-page-fade-start: 0px;
  }
  to {
    --settings-page-fade-start: var(--settings-page-fade-size);
  }
}
@keyframes settings-page-fade-end {
  from {
    --settings-page-fade-end: var(--settings-page-fade-size);
  }
  to {
    --settings-page-fade-end: 0px;
  }
}
.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;
  margin-bottom: var(--openbot-space-2);
  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-footer {
  flex: none;
  margin-inline: calc(-1 * var(--openbot-space-3));
  --settings-page-switch-radius: calc(var(--openbot-radius-card) - var(--openbot-space-1));
  border-top: 1px solid var(--openbot-border);
  padding: var(--openbot-space-1);
}
.settings-page-footer:empty {
  display: none;
}
.settings-page-footer > .settings-page-switch {
  min-height: var(--openbot-control-xl);
  border-radius: var(--settings-page-switch-radius);
  padding-inline: var(--openbot-space-3) calc(var(--openbot-space-3) - var(--openbot-icon-md) / 3);
  font-size: var(--openbot-text-md);
  font-weight: inherit;
}
.settings-page-switch .server-menu-mark, .settings-page-switch-avatar {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.settings-page-switch-avatar {
  display: block;
  overflow: hidden;
  border-radius: var(--openbot-radius-pill);
}
.settings-page-switch-avatar > img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  outline: 1px solid var(--openbot-image-outline);
  outline-offset: -1px;
}
.settings-page-switch-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-page-switch-chevron {
  color: var(--openbot-text-muted);
}
.settings-page-switch-chevron:dir(rtl) {
  transform: scaleX(-1);
}
.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: start;
  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-inline-start: 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;
  grid-column: 2;
  grid-row: 2;
  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 .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 auto minmax(0, 1fr);
  }
  .settings-page-path-row {
    grid-column: 1;
    grid-row: 2;
  }
  .settings-page-path-row > .settings-page-path {
    padding-inline: var(--openbot-space-4);
  }
  .settings-page-content {
    grid-column: 1;
    grid-row: 3;
  }
  .settings-page-nav {
    grid-column: 1;
    grid-row: 1;
    border-inline-end: 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);
  }
}
.app-window > .app-frame.app-frame-chat-window {
  grid-template-columns: 0 0 minmax(0, 1fr);
}
.app-frame-chat-window > .left-panel-resizer {
  display: none;
}
.app-frame-chat-window.app-frame-platform-darwin .conversation-header {
  padding-inline-start: 76px;
}
.quit-shortcut-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--openbot-layer-tooltip);
  display: grid;
  place-items: center;
  background: var(--openbot-dialog-overlay);
  backdrop-filter: blur(var(--openbot-space-2));
  pointer-events: none;
  animation: quit-shortcut-in var(--openbot-duration-fast) var(--openbot-ease-out);
}
.quit-shortcut-hint {
  --agent-avatar-outline: var(--openbot-bg-surface-raised);
  display: flex;
  align-items: center;
  gap: var(--openbot-space-4);
  max-width: calc(100vw - 2 * var(--openbot-space-4));
  padding: var(--openbot-space-3) var(--openbot-space-8) var(--openbot-space-3) var(--openbot-space-3);
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-primary);
}
.quit-shortcut-avatars {
  display: flex;
  flex: none;
  align-items: center;
}
.quit-shortcut-avatars .agent-avatar {
  --agent-avatar-optical-offset: -5px;
  width: 40px;
  height: 40px;
}
.quit-shortcut-avatars .agent-avatar + .agent-avatar {
  margin-inline-start: calc(-1 * var(--openbot-space-2));
}
.quit-shortcut-copy {
  display: grid;
  gap: var(--openbot-space-0-5);
  min-width: 0;
}
.quit-shortcut-agents {
  font-size: var(--openbot-text-xl);
  font-weight: 500;
  line-height: var(--openbot-leading-xl);
  text-wrap: balance;
}
.quit-shortcut-instruction {
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
  white-space: nowrap;
}
@keyframes quit-shortcut-in {
  from {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .quit-shortcut-backdrop {
    animation: none;
  }
}
.library-panel {
  display: grid;
  height: 100%;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr);
}
.library-panel > * {
  grid-row: 1;
  grid-column: 1;
  min-height: 0;
}
@media (min-width: 721px) {
  .app-frame-edge[data-window-page-kind="titled"] > .window-page > .library-panel {
    grid-template-rows: var(--left-header-height) minmax(0, 1fr);
  }
  .app-frame-edge[data-window-page-kind="titled"] > .window-page > .library-panel > * {
    grid-row: 2;
    pointer-events: auto;
  }
}
.library-panel-content[inert] {
  visibility: hidden;
}
.library-viewer {
  position: relative;
  overflow: hidden;
  border-end-start-radius: calc(var(--openbot-radius-card) - 1px);
  border-end-end-radius: calc(var(--openbot-radius-card) - 1px);
  outline: none;
}
.library-viewer .browser-panel {
  width: 100%;
  border-inline-start: 0;
}
.library-viewer :is(.browser-panel, .file-preview-header)::before {
  content: none;
}
.library-viewer .right-panel-resizer {
  display: none;
}
.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-inline-end: 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-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-qr-platform {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}
.settings-mobile-app-qr-logo {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}
.settings-mobile-qr {
  display: grid;
  justify-items: center;
  gap: var(--openbot-space-2);
}
.settings-mobile-qr .ui-qr-code {
  overflow: hidden;
  border-radius: var(--openbot-radius-md);
}
.settings-mobile-qr-code {
  animation: settings-mobile-qr-in var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.settings-mobile-qr-slot {
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--openbot-space-2);
  border: 1px dashed var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
}
.settings-mobile-qr-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  min-height: 24px;
  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);
  font-weight: var(--openbot-weight-medium);
  white-space: nowrap;
}
.settings-mobile-qr-tag > svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: 0 0 auto;
}
.settings-mobile-qr-tag[data-kind="signin"] {
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
}
.settings-mobile-qr-tag[data-kind="permanent"] {
  background: var(--openbot-warning-soft);
  color: var(--openbot-warning-text);
}
.settings-mobile-qr-tag[data-kind="success"] {
  background: var(--openbot-success-soft);
  color: var(--openbot-success-text);
}
.settings-mobile-qr-tag-time {
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
}
.settings-mobile-link-warning {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  color: var(--openbot-warning-text);
}
.settings-mobile-link-warning > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.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-phones {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--openbot-space-2);
}
.settings-mobile-phones-empty {
  grid-column: 1 / -1;
  display: grid;
  justify-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-8) var(--openbot-space-6);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  text-align: center;
}
.settings-mobile-phones-empty > .ui-button {
  margin-top: var(--openbot-space-2);
}
.settings-mobile-phones-empty-title, .settings-mobile-phone-name {
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-semibold);
}
.settings-mobile-phones-empty-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--openbot-space-1);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
}
.settings-mobile-phones-empty-icon > svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
}
.settings-mobile-phone-card {
  display: flex;
  align-items: flex-start;
  gap: var(--openbot-space-3);
  min-width: 0;
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  transition: opacity var(--openbot-duration-overlay) var(--openbot-ease-out);
}
@starting-style {
  .settings-mobile-phone-card {
    opacity: 0;
  }
}
.settings-mobile-phone-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-secondary);
}
.settings-mobile-phone-icon[data-active] {
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
}
.settings-mobile-phone-icon > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.settings-mobile-phone-copy {
  min-width: 0;
  display: grid;
  flex: 1;
  gap: var(--openbot-space-0-5);
}
.settings-mobile-phone-via {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  margin-top: var(--openbot-space-1);
  color: var(--openbot-text-dim);
  font-size: var(--openbot-text-sm);
}
.settings-mobile-phone-via > svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.settings-mobile-link-card-slot {
  display: grid;
  gap: var(--openbot-space-1);
}
.settings-mobile-link-card.ui-button {
  height: auto;
  justify-content: flex-start;
  border-style: dashed;
  font-weight: var(--openbot-weight-regular);
  text-align: start;
  white-space: normal;
}
.settings-mobile-link-card-hint {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.settings-mobile-link-card-actions {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
}
.settings-mobile-route-chip.ui-button > svg:last-child {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  color: var(--openbot-text-dim);
}
.settings-mobile-route-popover.ui-popover-menu-surface {
  width: 340px;
  display: grid;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-3);
}
.settings-mobile-route-popover-title {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
}
.settings-mobile-route-popover-description {
  margin: 0 0 var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.settings-mobile-dialog.ui-dialog-content {
  width: min(460px, 100%);
  display: grid;
  overflow: hidden;
  outline: 0;
  background: var(--openbot-bg-sidebar);
}
.settings-mobile-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--openbot-space-4) 0;
  padding-inline: var(--openbot-space-6) var(--openbot-space-4);
}
.settings-mobile-dialog-title {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-xl);
  font-weight: var(--openbot-weight-semibold);
}
.settings-mobile-dialog-body {
  min-height: 300px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--openbot-space-4);
  padding: var(--openbot-space-4) var(--openbot-space-6) var(--openbot-space-6);
  text-align: center;
}
.settings-mobile-dialog-note {
  max-width: 320px;
}
.settings-mobile-dialog-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border-top: 1px solid var(--openbot-border);
}
.settings-mobile-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-2);
}
.settings-mobile-choices {
  width: 100%;
  display: grid;
  gap: var(--openbot-space-2);
}
.settings-mobile-choice.ui-button {
  height: auto;
  justify-content: flex-start;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3) var(--openbot-space-4);
  text-align: start;
  white-space: normal;
}
.settings-mobile-choice.ui-button > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  color: var(--openbot-text-secondary);
}
.settings-mobile-choice-text {
  display: grid;
  gap: var(--openbot-space-0-5);
}
.settings-mobile-choice-title {
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-semibold);
}
.settings-mobile-choice-hint {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
}
.settings-mobile-steps {
  display: grid;
  gap: var(--openbot-space-1-5);
  margin: 0;
  padding-inline-start: var(--openbot-space-4);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-align: start;
}
.settings-mobile-steps > li::marker {
  color: var(--openbot-text-dim);
  font-variant-numeric: tabular-nums;
}
.settings-mobile-link-intro, .settings-mobile-link-code {
  max-width: 340px;
  display: grid;
  justify-items: center;
  gap: var(--openbot-space-2);
}
.settings-mobile-link-intro > .ui-button, .settings-mobile-link-code > .settings-mobile-dialog-actions {
  margin-top: var(--openbot-space-2);
}
.settings-mobile-link-code > .settings-mobile-qr {
  margin-bottom: var(--openbot-space-2);
}
.settings-mobile-link-warning-title {
  color: inherit;
  font-weight: var(--openbot-weight-semibold);
}
.settings-mobile-enter {
  animation: settings-mobile-enter var(--openbot-duration-slow) var(--openbot-ease-out);
}
@keyframes settings-mobile-enter {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}
@keyframes settings-mobile-qr-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}
@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 (prefers-reduced-motion: reduce) {
  .settings-mobile-connect-qr-stage .ui-qr-code, .settings-mobile-phone-card {
    transition: none;
  }
  .settings-mobile-enter, .settings-mobile-qr-code, .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-route-choice {
  display: grid;
  gap: var(--openbot-space-2);
}
.settings-mobile-route-option {
  display: flex;
  min-width: 0;
}
.settings-mobile-route-card {
  display: flex;
  flex: 1;
  align-items: flex-start;
  gap: var(--openbot-space-3);
  min-width: 0;
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  box-shadow: inset 0 0 0 1px var(--openbot-border);
  cursor: pointer;
  transition-property: background-color, box-shadow;
  transition-duration: var(--openbot-duration-hover), var(--openbot-duration-normal);
  transition-timing-function: var(--openbot-ease-out);
}
.settings-mobile-route-card:hover {
  background: var(--openbot-bg-control-hover);
}
.settings-mobile-route-card[data-disabled] {
  cursor: default;
}
.settings-mobile-route-card[data-checked] {
  box-shadow: inset 0 0 0 1.5px var(--openbot-accent), 0 1px 3px var(--openbot-shadow-popover-ambient);
}
.settings-mobile-route-dot {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  margin-top: 1px;
  border-radius: var(--openbot-radius-pill);
  box-shadow: inset 0 0 0 1.5px var(--openbot-text-muted);
  transition: box-shadow var(--openbot-duration-normal) var(--openbot-ease-out);
}
.settings-mobile-route-dot::after {
  width: 8px;
  height: 8px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
  content: "";
  transform: scale(0);
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.settings-mobile-route-card[data-checked] .settings-mobile-route-dot {
  box-shadow: inset 0 0 0 1.5px var(--openbot-accent);
}
.settings-mobile-route-card[data-checked] .settings-mobile-route-dot::after {
  transform: scale(1);
}
.settings-mobile-route-option:has(:focus-visible) .settings-mobile-route-card {
  box-shadow: var(--openbot-focus-ring);
}
.settings-mobile-route-text {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  min-width: 0;
}
.settings-mobile-route-name {
  display: flex;
  flex-wrap: wrap;
  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-mobile-route-hint {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.hosted-sites-overview {
  display: grid;
  gap: var(--openbot-space-1);
}
.hosted-sites-usage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.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: start;
}
.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%;
  stroke-width: var(--openbot-icon-stroke-lg);
}
.integration-logo-tile > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.integration-logo-tile > .connector-brand-tile {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.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-page {
  display: grid;
  gap: var(--openbot-space-6);
}
.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-name {
  display: inline-flex;
  gap: var(--openbot-space-1-5);
  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-body:empty {
  display: none;
}
.integration-wizard-form {
  display: grid;
  gap: var(--openbot-space-4);
}
.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[data-wide] {
  width: min(720px, calc(100vw - var(--openbot-space-6) * 2));
}
:is(.integration-dialog-backdrop, .integration-wizard-dialog)[data-nested] {
  z-index: calc(var(--openbot-layer-dialog-host) + 2);
}
.integration-wizard-dialog h2 {
  margin: 0;
}
.integration-dialog-close {
  position: absolute;
  top: var(--openbot-space-3);
  inset-inline-end: 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);
}
.integration-card-body {
  display: grid;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3) var(--openbot-space-4);
}
.integration-card-body :where(.ui-input) {
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
.integration-card-note {
  padding: var(--openbot-space-3) var(--openbot-space-4);
}
.integration-card-note[data-tone="danger"] {
  color: var(--openbot-danger-text);
}
.integration-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);
}
.integration-effects li {
  display: flex;
  gap: var(--openbot-space-3);
  align-items: center;
  padding: var(--openbot-space-2);
}
.integration-effects li + li {
  border-top: 1px solid var(--openbot-border);
}
.integration-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);
}
.integration-effects .integration-effect-icon > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.integration-effects li[data-tone="danger"] .integration-effect-icon {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger-text);
}
.integration-effects li[data-tone="success"] .integration-effect-icon {
  background: var(--openbot-success-soft);
  color: var(--openbot-success);
}
.integration-confirm.ui-button-variant-destructive {
  color: var(--openbot-danger-text);
}
.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-border-focus);
  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-chevron:dir(rtl) {
  transform: scaleX(-1);
}
.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 {
  --integrations-agent-face-size: 32px;
  display: inline-block;
  flex: none;
  width: var(--integrations-agent-face-size);
  height: var(--integrations-agent-face-size);
}
.integrations-agent-face[data-size="sm"] {
  --integrations-agent-face-size: 24px;
}
.ui-item-group:has(.integrations-agent-face:not([data-size="sm"])) .ui-item-media > svg {
  margin-inline: calc((32px - var(--openbot-icon-lg)) / 2);
}
.integrations-agent-face > * {
  --agent-avatar-optical-offset: calc(var(--integrations-agent-face-size) * -0.14);
  width: 100%;
  height: 100%;
}
.provider-settings-stack {
  display: grid;
  gap: var(--openbot-space-6);
}
.provider-settings-select {
  width: 168px;
}
.provider-settings-select .ui-select-value, .provider-settings-select-option {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.provider-settings-logo-off {
  opacity: 0.44;
}
.provider-settings-stack .ui-item-description.provider-settings-warning {
  color: var(--openbot-warning-text);
}
.provider-settings-stack .ui-item-description.provider-settings-error {
  color: var(--openbot-danger-text);
}
.provider-settings-account.ui-item {
  align-items: flex-start;
}
.provider-settings-account .ui-item-content {
  gap: var(--openbot-space-1);
}
.provider-settings-account .provider-picker-account-rename {
  max-width: 280px;
}
.provider-settings-usage-badge {
  cursor: pointer;
  font: inherit;
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
}
.provider-settings-usage-badge:focus-visible {
  outline: 2px solid var(--openbot-focus-ring);
  outline-offset: 2px;
}
.provider-settings-progress {
  max-width: 320px;
}
.provider-settings-models.settings-modal-card {
  max-height: 360px;
  padding: 0;
  overflow-y: auto;
}
.provider-settings-models-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--openbot-space-1) 0;
  list-style: none;
}
.provider-settings-models-row {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  min-height: 32px;
  padding: 0 var(--openbot-space-3);
}
.provider-settings-models-row:hover {
  background: var(--openbot-bg-control-hover);
}
.provider-settings-models-name {
  display: flex;
  flex: 1;
  align-items: baseline;
  gap: var(--openbot-space-2);
  min-width: 0;
}
.provider-settings-models-name > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.provider-settings-models-name > :first-child {
  flex: none;
  max-width: 70%;
}
.provider-settings-models-id {
  min-width: 0;
  font-family: var(--openbot-font-mono);
}
.provider-settings-models-empty {
  display: block;
  padding: var(--openbot-space-3);
}
.provider-settings-models-error {
  color: var(--openbot-danger-text);
}
.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-search {
  position: relative;
  display: flex;
  align-items: center;
}
.github-connector-search > svg {
  position: absolute;
  inset-inline-start: 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-inline-start: calc(var(--openbot-space-3) * 2 + var(--openbot-icon-sm));
}
.github-connector-repository-list {
  display: grid;
  max-height: 260px;
  margin: 0 calc(var(--openbot-space-2) * -1);
  padding: 0;
  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;
}
.vault-secret-form {
  display: flex;
  align-items: flex-end;
  gap: var(--openbot-space-3);
}
.vault-secret-form > .ui-field {
  flex: 1;
  min-width: 0;
}
.vault-secret-actions {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
}
.bitwarden-connector-host-form {
  display: grid;
  gap: var(--openbot-space-3);
}
.bitwarden-connector-actions {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
}
.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);
}
.channel-stack {
  display: grid;
  gap: var(--openbot-space-0-5);
  justify-items: start;
}
.channel-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);
}
.channel-checklist li {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
}
.channel-checklist li[data-state="done"] {
  color: var(--openbot-text-secondary);
}
.channel-checklist li[data-state="done"] svg {
  color: var(--openbot-success);
}
.channel-checklist-dot {
  width: 14px;
  height: 14px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
}
.channel-waiting {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
  justify-content: center;
}
.channel-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);
}
.channel-orchestrator-model {
  display: grid;
  gap: var(--openbot-space-1);
}
.discord-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;
}
.discord-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;
}
.discord-role-row:hover {
  background: var(--openbot-bg-control-hover);
}
.discord-role-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whatsapp-choice {
  display: grid;
  gap: var(--openbot-space-2);
}
.whatsapp-choice[data-layout="row"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.whatsapp-choice-option {
  display: flex;
  min-width: 0;
}
.whatsapp-choice-card {
  display: flex;
  flex: 1;
  align-items: flex-start;
  gap: var(--openbot-space-3);
  min-width: 0;
  padding: var(--openbot-space-2) var(--openbot-space-3);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  box-shadow: inset 0 0 0 1px var(--openbot-border);
  cursor: pointer;
  transition-property: background-color, box-shadow;
  transition-duration: var(--openbot-duration-hover), var(--openbot-duration-normal);
  transition-timing-function: var(--openbot-ease-out);
}
.whatsapp-choice-card:hover {
  background: var(--openbot-bg-control-hover);
}
.whatsapp-choice-card[data-disabled] {
  cursor: default;
}
.whatsapp-choice-card[data-checked] {
  box-shadow: inset 0 0 0 1.5px var(--openbot-accent);
}
.whatsapp-choice-option:has(:focus-visible) .whatsapp-choice-card {
  box-shadow: var(--openbot-focus-ring);
}
.whatsapp-choice-dot {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  margin-top: 1px;
  border-radius: var(--openbot-radius-pill);
  box-shadow: inset 0 0 0 1.5px var(--openbot-text-muted);
  transition: box-shadow var(--openbot-duration-normal) var(--openbot-ease-out);
}
.whatsapp-choice-dot::after {
  width: 8px;
  height: 8px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
  content: "";
  transform: scale(0);
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.whatsapp-choice-card[data-checked] .whatsapp-choice-dot {
  box-shadow: inset 0 0 0 1.5px var(--openbot-accent);
}
.whatsapp-choice-card[data-checked] .whatsapp-choice-dot::after {
  transform: scale(1);
}
.whatsapp-choice-text {
  display: grid;
  gap: var(--openbot-space-0-5);
  min-width: 0;
}
.whatsapp-choice-name {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.whatsapp-choice-hint {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.whatsapp-link-qr {
  display: grid;
  gap: var(--openbot-space-3);
  justify-items: center;
}
.whatsapp-link-qr > .channel-checklist {
  justify-self: stretch;
}
.whatsapp-link-step-index {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.whatsapp-pairing-code {
  display: flex;
  gap: var(--openbot-space-3);
  align-items: center;
  justify-content: center;
  padding: var(--openbot-space-3);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
}
.whatsapp-pairing-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);
}
.whatsapp-groups {
  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;
}
.whatsapp-group-row {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
  justify-content: space-between;
  padding: var(--openbot-space-1) var(--openbot-space-2);
  border-radius: var(--openbot-radius-sm);
}
.whatsapp-group-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 {
  direction: ltr;
  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-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-bar-fill:dir(rtl) {
    transform-origin: right center;
  }
  .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-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;
  stroke-width: var(--openbot-icon-stroke);
  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: start;
}
.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;
}
:root[data-surface="computer-use-highlight"], :root[data-surface="computer-use-highlight"] body, :root[data-surface="computer-use-highlight"] #root {
  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: start;
}
.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-inline-start: 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);
  inset-inline-end: 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-publish-setting.ui-switch-field {
  padding: var(--openbot-space-3) var(--openbot-space-4);
}
.server-settings-publish-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: end;
  user-select: text;
}
.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-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%;
  inset-inline-start: 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-inline-start: 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: end;
}
.server-settings-desktop-hint {
  max-width: 220px;
  text-align: end;
}
.server-settings-desktop-status {
  margin-top: var(--openbot-space-1);
}
@media (max-width: 720px) {
  .server-settings-readonly-name {
    align-items: flex-start;
    flex-direction: column;
  }
  .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: start;
  }
  .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-inline-start: 52px;
    justify-items: start;
    text-align: start;
  }
}
@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-invites-empty {
  display: grid;
}
.server-invites-empty > * {
  grid-area: 1 / 1;
}
.server-invites-empty-board {
  min-height: calc(4 * 3.75rem);
  display: grid;
  align-content: start;
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
  mask-image: radial-gradient(ellipse 46% 72% at 50% 50%, var(--openbot-transparent) 58%, var(--openbot-text-primary) 100%), linear-gradient(var(--openbot-text-primary) 70%, var(--openbot-transparent));
  mask-composite: intersect;
}
.server-invites-empty-row {
  animation: server-invites-empty-land 560ms var(--openbot-ease-out) both;
}
.server-invites-empty-row > .ui-item {
  padding: var(--openbot-space-3) var(--openbot-space-4);
}
.server-invites-empty-row + .server-invites-empty-row {
  position: relative;
}
.server-invites-empty-row + .server-invites-empty-row::before {
  position: absolute;
  top: 0;
  right: var(--openbot-space-4);
  left: var(--openbot-space-4);
  height: 1px;
  background: var(--openbot-border);
  content: "";
}
.server-invites-empty-board[data-leaving] .server-invites-empty-row {
  animation: server-invites-empty-leave 700ms var(--openbot-ease-out) both;
}
@keyframes server-invites-empty-land {
  from {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(10px) scale(0.98);
  }
}
@keyframes server-invites-empty-leave {
  to {
    opacity: 0;
    filter: blur(3px);
    transform: translateY(-4px);
  }
}
.server-invites-empty-pitch {
  z-index: 1;
  width: 100%;
  max-width: 30rem;
  display: grid;
  place-self: center;
  justify-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-8) var(--openbot-space-6);
  text-align: center;
}
.server-invites-empty-title {
  display: grid;
  font-size: var(--openbot-text-3xl);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.server-invites-empty-quiet {
  color: var(--openbot-text-muted);
}
.server-invites-empty-hand {
  display: inline-block;
  color: var(--openbot-accent-text);
  font-family: "Bradley Hand", "Noteworthy", "Segoe Print", cursive;
  line-height: 1;
  clip-path: inset(-0.4em 100% -0.4em -0.2em);
  animation: server-invites-empty-write 560ms linear 450ms forwards;
}
@keyframes server-invites-empty-write {
  to {
    clip-path: inset(-0.4em -0.2em -0.4em -0.2em);
  }
}
.server-invites-empty-action {
  width: 100%;
  max-width: 20rem;
  height: var(--openbot-control-lg);
  margin-top: var(--openbot-space-2);
}
@media (prefers-reduced-motion: reduce) {
  .server-invites-empty-row, .server-invites-empty-hand {
    animation: none;
    clip-path: none;
  }
}
.server-settings-timezone-pending {
  width: 200px;
  min-height: var(--openbot-control-sm);
}
.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;
  }
}
.custom-provider-dialog.company-sign-in-dialog {
  width: min(520px, 100%);
}
.company-sign-in-copy-row {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-top: var(--openbot-space-2);
}
.company-sign-in-copy-row > .ui-input, .company-sign-in-copy-row > input {
  flex: 1;
  min-width: 0;
}
.company-sign-in-passed {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
}
.company-sign-in-passed svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-success);
}
.company-sign-in-secondary {
  display: flex;
  justify-content: center;
  gap: var(--openbot-space-2);
}
.skills-marketplace {
  --marketplace-inset: var(--openbot-space-6);
  display: grid;
  grid-template-columns: max(var(--left-panel-width, 280px), 220px) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: var(--openbot-text-primary);
}
.marketplace-menu {
  z-index: calc(var(--openbot-layer-dialog-host) + 1);
}
body[data-skills-marketplace] :is(.integration-dialog-backdrop, .integration-wizard-dialog):not([data-nested]) {
  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);
  grid-column: 1 / -1;
  min-height: 48px;
  padding-block: var(--openbot-space-2);
  padding-inline: var(--marketplace-inset) var(--openbot-space-2);
  border-bottom: 1px solid var(--openbot-border);
}
.marketplace-nav {
  display: flex;
  grid-row: 2;
  grid-column: 1;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  gap: var(--openbot-space-1);
  overflow-y: auto;
  padding: var(--openbot-space-4) var(--openbot-space-3) var(--openbot-space-3);
  border-inline-end: 1px solid var(--openbot-border);
}
.marketplace-nav-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);
}
.marketplace-nav-title:focus {
  outline: none;
}
.marketplace-nav-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.marketplace-nav-item {
  grid-template-columns: var(--openbot-icon-lg) minmax(0, 1fr) auto;
}
.ui-button.marketplace-nav-item {
  font: inherit;
  font-size: var(--openbot-text-md);
  white-space: normal;
}
.ui-button.marketplace-nav-item[aria-current] {
  font-weight: var(--openbot-weight-medium);
}
.marketplace-nav-item[aria-current="location"] {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}
.marketplace-nav-item > svg:first-child {
  justify-self: center;
}
.marketplace-nav-count {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
  font-variant-numeric: tabular-nums;
}
.marketplace-nav-heading {
  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);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
}
.marketplace-nav-mark {
  display: grid;
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  place-items: center;
  overflow: hidden;
  border-radius: var(--openbot-radius-xs);
}
.marketplace-nav-mark > :is(svg, img) {
  width: 100%;
  height: 100%;
  stroke-width: var(--openbot-icon-stroke-lg);
}
.marketplace-nav-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.marketplace-nav-item > .marketplace-nav-warning {
  color: var(--openbot-warning-text);
}
.skills-marketplace-body {
  position: relative;
  grid-row: 2;
  grid-column: 2;
  overflow: auto;
  scrollbar-gutter: stable;
}
.marketplace-frame {
  padding: calc(var(--openbot-space-8) + var(--openbot-space-2)) var(--marketplace-inset) var(--openbot-space-8);
}
.marketplace-frame > * {
  width: min(100%, 880px);
  margin-inline: auto;
}
.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-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-3) var(--openbot-space-1);
  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-heading {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--openbot-space-1-5);
  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;
  margin-inline: calc(-1 * var(--openbot-space-2) - 1px) calc(-1 * var(--openbot-space-1));
  overflow: hidden;
  border-color: transparent;
  background: transparent;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.skills-marketplace .marketplace-crumb-parent:focus-visible {
  border-color: var(--openbot-border);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-primary);
}
@media (hover: hover) and (pointer: fine) {
  .skills-marketplace .marketplace-crumb-parent:hover:not(:disabled) {
    border-color: var(--openbot-border);
    background: var(--openbot-bg-control);
    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-crumb-separator:dir(rtl), .marketplace-skill-group-head .ui-button > svg[class~="lucide-chevron-right"]:dir(rtl) {
  transform: scaleX(-1);
}
.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-app-reason {
  white-space: normal;
}
.marketplace-command {
  overflow-wrap: anywhere;
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
}
.marketplace-browse {
  gap: var(--openbot-space-8);
}
.marketplace-browse-head {
  display: grid;
  gap: var(--openbot-space-6);
}
.marketplace-browse-copy {
  display: grid;
  gap: var(--openbot-space-1);
}
.marketplace-browse-copy > p {
  margin: 0;
}
.marketplace-browse-title {
  margin: 0;
  font-size: var(--openbot-text-3xl);
}
.marketplace-toolbar {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.marketplace-search {
  position: relative;
  flex: 1;
  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;
  stroke-width: var(--openbot-icon-stroke-lg);
}
.marketplace-skill-mark[data-kind="icon"] > img {
  width: 100%;
  height: 100%;
}
.marketplace-skill-mark[data-kind="none"] > * {
  width: 60%;
  height: 60%;
}
.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: var(--marketplace-done-icon, 14px);
  height: var(--marketplace-done-icon, 14px);
  color: var(--marketplace-done-mark, currentColor);
}
.marketplace-app-group {
  display: grid;
  gap: var(--openbot-space-3);
  padding-top: var(--openbot-space-4);
  border-top: 1px solid var(--openbot-border);
}
.marketplace-app-group-title {
  display: flex;
  align-items: baseline;
  gap: var(--openbot-space-2);
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
}
.marketplace-app-group-count {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-regular);
  font-variant-numeric: tabular-nums;
}
.marketplace-app-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  column-gap: var(--openbot-space-6);
  row-gap: var(--openbot-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.marketplace-app-row {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-2);
  border-radius: var(--openbot-radius-lg);
}
@media (hover: hover) and (pointer: fine) {
  .marketplace-app-row:hover {
    background: var(--openbot-bg-control-hover);
  }
  .marketplace-app-row:hover .marketplace-app-action[data-variant="secondary"]:not([data-disabled]) {
    background: var(--openbot-bg-control-active);
  }
}
.skills-marketplace .marketplace-app-row-hit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border-radius: inherit;
  background: transparent;
}
.skills-marketplace .marketplace-app-row-hit:hover:not(:disabled) {
  background: transparent;
}
.marketplace-app-row > .integration-logo-tile {
  --integration-tile: 40px;
  pointer-events: none;
}
.marketplace-app-row-copy {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: var(--openbot-space-0-5);
  pointer-events: none;
}
.marketplace-app-row-name {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.marketplace-app-row-tagline {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.marketplace-app-row-status {
  position: relative;
  display: inline-flex;
  flex: none;
}
.marketplace-app-row-status > .marketplace-done {
  height: var(--openbot-control-md);
  gap: var(--openbot-space-1-5);
  padding-inline: var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  --marketplace-done-icon: var(--openbot-icon-md);
  --marketplace-done-mark: var(--openbot-success);
}
.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;
  font-size: var(--openbot-text-md);
}
.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-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-plush {
  display: block;
  width: 160px;
  aspect-ratio: 1;
  pointer-events: none;
  user-select: none;
}
.marketplace-empty-plush > img, .marketplace-empty-plush > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.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);
}
.marketplace-skill-attention {
  color: var(--openbot-text-secondary);
}
.marketplace-skill-row > .marketplace-skill-mark {
  pointer-events: none;
}
.marketplace-skill-row-actions {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.marketplace-skill-group-head {
  display: flex;
  min-height: var(--openbot-control-md);
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.marketplace-skill-empty {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  border: 1px dashed var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  padding: var(--openbot-space-4);
}
:is(.marketplace-skill-picker-search, .marketplace-skill-page-search) > svg {
  width: var(--openbot-space-4);
  height: var(--openbot-space-4);
  flex: none;
}
.marketplace-skill-agents-trigger {
  gap: var(--openbot-space-1-5);
}
.marketplace-skill-stack {
  display: inline-flex;
}
.marketplace-skill-stack > :not(:first-child) {
  margin-inline-start: calc(var(--openbot-space-1) * -1);
}
.marketplace-skill-picker {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  font-size: var(--openbot-text-md);
}
.marketplace-skill-picker-search {
  margin-block-end: var(--openbot-space-1);
}
.marketplace-skill-picker-list {
  --marketplace-skill-fade-top: 0px;
  --marketplace-skill-fade-bottom: 0px;
  display: flex;
  max-height: calc(var(--openbot-space-1) * 90);
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex-direction: column;
  list-style: none;
  scrollbar-width: none;
  mask-image: linear-gradient( to bottom, var(--openbot-transparent), var(--openbot-text-primary) var(--marketplace-skill-fade-top), var(--openbot-text-primary) calc(100% - var(--marketplace-skill-fade-bottom)), var(--openbot-transparent) );
}
.marketplace-skill-picker-list::-webkit-scrollbar {
  display: none;
}
.marketplace-skill-picker-list.scroll-fade-top {
  --marketplace-skill-fade-top: calc(var(--openbot-space-1) * 6);
}
.marketplace-skill-picker-list.scroll-fade-bottom {
  --marketplace-skill-fade-bottom: calc(var(--openbot-space-1) * 6);
}
.marketplace-skill-picker-list:has(label.marketplace-skill-picker-row) {
  user-select: none;
}
.marketplace-skill-picker-row {
  display: flex;
  width: 100%;
  min-height: calc(var(--openbot-space-1) * 9);
  align-items: center;
  justify-content: flex-start;
  gap: var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
  padding-inline: var(--openbot-space-2);
  cursor: pointer;
  font-weight: inherit;
  text-align: start;
}
label.marketplace-skill-picker-row:hover {
  background: var(--openbot-hover);
}
.marketplace-skill-picker-list[data-dragging] label.marketplace-skill-picker-row:hover {
  background: none;
}
.marketplace-skill-picker-row[aria-current="true"] {
  background: var(--openbot-bg-control-active);
}
.marketplace-skill-picker-all {
  border-block-end: 1px solid var(--openbot-border);
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}
.marketplace-skill-picker-name {
  min-width: 0;
  overflow: hidden;
  flex: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.marketplace-skill-picker-agent {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: var(--openbot-space-1);
}
.marketplace-skill-picker-agent: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) - var(--openbot-space-1))) minmax(var(--agent-role-badge-collapsed-width), 1fr);
}
.marketplace-skill-picker-none {
  padding: var(--openbot-space-2);
}
.marketplace-skill-dialog-head {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-3);
  margin-block: calc(var(--openbot-space-2) * -1) calc(var(--openbot-space-1) * -1);
}
.marketplace-skill-dialog-head h2 {
  min-width: 0;
  overflow: hidden;
  flex: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.integration-wizard-dialog.marketplace-skill-agents-dialog {
  overflow: hidden;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
}
.marketplace-skill-agents-dialog .integration-wizard-form {
  min-height: 0;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
}
.marketplace-skill-agents-dialog .integration-wizard-body {
  display: flex;
  min-height: 0;
  flex-direction: column;
}
.marketplace-skill-agents-dialog .marketplace-skill-picker {
  min-height: 0;
}
.marketplace-skill-agents-dialog .marketplace-skill-picker-list {
  min-height: 0;
  flex: 1 1 auto;
}
.marketplace-skill-agents-dialog .integration-wizard-foot > .ui-button {
  flex-shrink: 0;
}
.marketplace-skill-agents-dialog .integration-wizard-foot > .marketplace-skill-dialog-submit {
  min-width: 0;
  flex-shrink: 1;
}
.marketplace-skill-dialog-submit > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.marketplace-skill-page-search {
  width: calc(var(--openbot-space-1) * 56);
}
.marketplace-skill-name {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
  min-width: 0;
}
.marketplace-skill-verified {
  flex: none;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-secondary);
}
.marketplace-skill-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--openbot-space-4);
}
.marketplace-skill-source .ui-sliding-tabs-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  white-space: nowrap;
}
.marketplace-skill-group-page {
  display: grid;
  align-content: start;
  gap: var(--openbot-space-4);
}
.marketplace-skill-group-bar {
  position: sticky;
  z-index: 1;
  top: 0;
  padding-block: var(--openbot-space-3);
  border-bottom: 1px solid var(--openbot-border);
  background: var(--openbot-bg-canvas);
}
.marketplace-skill-group-list {
  display: grid;
  gap: var(--openbot-space-3);
}
.marketplace-skill-featured {
  display: grid;
  gap: var(--openbot-space-3);
}
.marketplace-skill-featured-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--openbot-space-3);
}
.marketplace-skill-feature {
  isolation: isolate;
  grid-template-rows: auto auto 1fr auto;
  padding: var(--openbot-space-3);
}
.marketplace-skill-feature > :not(.marketplace-hitarea, .marketplace-skill-feature-art) {
  padding-inline: var(--openbot-space-1);
}
.marketplace-skill-feature-art {
  position: relative;
  display: grid;
  place-items: center;
  height: calc(var(--openbot-space-1) * 24);
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--openbot-radius-xl);
}
.marketplace-skill-feature-art > :not(.skill-preview-gradient) {
  position: relative;
}
.marketplace-skill-feature .marketplace-skill-verified {
  display: inline-block;
  margin-inline-start: var(--openbot-space-1);
  vertical-align: text-bottom;
}
.marketplace-agent-feature {
  isolation: isolate;
  grid-template-rows: auto auto 1fr auto;
}
.marketplace-agent-feature .marketplace-card-head {
  justify-content: space-between;
}
.marketplace-agent-feature-copy {
  display: grid;
  gap: var(--openbot-space-0-5);
  min-width: 0;
}
.marketplace-agent-feature .marketplace-card-body {
  align-self: start;
  min-height: 2lh;
}
.marketplace-agent-feature .marketplace-skill-verified {
  display: inline-block;
  margin-inline-start: var(--openbot-space-1);
  vertical-align: text-bottom;
}
.marketplace-agent-by {
  flex: 0 100 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.marketplace-agent-row .marketplace-skill-name {
  align-items: baseline;
}
.marketplace-agent-row .marketplace-app-row-name {
  min-width: 0;
}
.marketplace-agent-row .marketplace-skill-verified {
  align-self: center;
}
.marketplace-agent-trust {
  display: flex;
  gap: var(--openbot-space-1-5);
  align-items: center;
}
.marketplace-agent-trust svg {
  flex: none;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
html:active-view-transition-type(marketplace-forward, marketplace-back, marketplace-tab, marketplace-swap) {
  --marketplace-skill-blur: calc(var(--openbot-space-0-5) * 1.5);
  --marketplace-skill-blur-small: var(--openbot-space-0-5);
}
html:active-view-transition-type(marketplace-forward, marketplace-back, marketplace-tab, marketplace-swap) .skills-marketplace-body {
  view-transition-name: marketplace-page;
}
html:active-view-transition-type(marketplace-forward, marketplace-back, marketplace-tab, marketplace-swap) .skills-marketplace .marketplace-heading {
  view-transition-name: marketplace-crumbs;
}
html:active-view-transition-type(marketplace-swap) .marketplace-skill-source {
  view-transition-name: marketplace-skill-source;
}
html:active-view-transition-type( marketplace-forward, marketplace-back, marketplace-tab, marketplace-swap )::view-transition-group(root), ::view-transition-group(marketplace-page), ::view-transition-group(marketplace-crumbs) {
  animation-duration: var(--openbot-duration-overlay);
  animation-timing-function: var(--openbot-ease-out);
}
html:active-view-transition-type(marketplace-forward)::view-transition-old(marketplace-page) {
  --marketplace-skill-to: calc(var(--openbot-space-2) * -1);
  animation: marketplace-skill-page-out var(--openbot-duration-normal) var(--openbot-ease-out) both;
}
html:active-view-transition-type(marketplace-forward)::view-transition-new(marketplace-page) {
  --marketplace-skill-from: var(--openbot-space-2);
  animation: marketplace-skill-page-in var(--openbot-duration-overlay) var(--openbot-ease-out) both;
}
html:active-view-transition-type(marketplace-back)::view-transition-old(marketplace-page) {
  --marketplace-skill-to: var(--openbot-space-2);
  animation: marketplace-skill-page-out var(--openbot-duration-normal) var(--openbot-ease-out) both;
}
html:active-view-transition-type(marketplace-back)::view-transition-new(marketplace-page) {
  --marketplace-skill-from: calc(var(--openbot-space-2) * -1);
  animation: marketplace-skill-page-in var(--openbot-duration-overlay) var(--openbot-ease-out) both;
}
html:dir(rtl):active-view-transition-type(marketplace-forward)::view-transition-old(marketplace-page) {
  --marketplace-skill-to: var(--openbot-space-2);
}
html:dir(rtl):active-view-transition-type(marketplace-forward)::view-transition-new(marketplace-page) {
  --marketplace-skill-from: calc(var(--openbot-space-2) * -1);
}
html:dir(rtl):active-view-transition-type(marketplace-back)::view-transition-old(marketplace-page) {
  --marketplace-skill-to: calc(var(--openbot-space-2) * -1);
}
html:dir(rtl):active-view-transition-type(marketplace-back)::view-transition-new(marketplace-page) {
  --marketplace-skill-from: var(--openbot-space-2);
}
html:active-view-transition-type(marketplace-tab)::view-transition-old(marketplace-page) {
  animation: marketplace-skill-blur-out var(--openbot-duration-normal) var(--openbot-ease-out) both;
}
html:active-view-transition-type(marketplace-tab)::view-transition-new(marketplace-page) {
  animation: marketplace-skill-rise-in var(--openbot-duration-overlay) var(--openbot-ease-out) both;
}
html:active-view-transition-type(marketplace-swap)::view-transition-old(marketplace-page) {
  animation: marketplace-skill-blur-out var(--openbot-duration-fast) var(--openbot-ease-out) both;
}
html:active-view-transition-type(marketplace-swap)::view-transition-new(marketplace-page) {
  animation: marketplace-skill-blur-in var(--openbot-duration-normal) var(--openbot-ease-out) both;
}
::view-transition-old(marketplace-skill-source) {
  animation: none;
  opacity: 0;
}
::view-transition-new(marketplace-skill-source) {
  animation: none;
}
html:active-view-transition-type(marketplace-group) [data-marketplace-shared] :is(.marketplace-app-group-title, .marketplace-browse-title) {
  view-transition-name: marketplace-group-title;
}
html:active-view-transition-type(marketplace-group) [data-marketplace-shared] .marketplace-app-row:nth-child(1) {
  view-transition-name: marketplace-group-row-1;
}
html:active-view-transition-type(marketplace-group) [data-marketplace-shared] .marketplace-app-row:nth-child(2) {
  view-transition-name: marketplace-group-row-2;
}
html:active-view-transition-type(marketplace-group) [data-marketplace-shared] .marketplace-app-row:nth-child(3) {
  view-transition-name: marketplace-group-row-3;
}
html:active-view-transition-type(marketplace-group) [data-marketplace-shared] .marketplace-app-row:nth-child(4) {
  view-transition-name: marketplace-group-row-4;
}
html:active-view-transition-type(marketplace-group) [data-marketplace-shared] .marketplace-app-row:nth-child(5) {
  view-transition-name: marketplace-group-row-5;
}
html:active-view-transition-type(marketplace-group) [data-marketplace-shared] .marketplace-app-row:nth-child(6) {
  view-transition-name: marketplace-group-row-6;
}
::view-transition-group(marketplace-group-title), ::view-transition-group(marketplace-group-row-1), ::view-transition-group(marketplace-group-row-2), ::view-transition-group(marketplace-group-row-3), ::view-transition-group(marketplace-group-row-4), ::view-transition-group(marketplace-group-row-5), ::view-transition-group(marketplace-group-row-6) {
  animation-duration: var(--openbot-duration-overlay);
  animation-timing-function: var(--openbot-ease-out);
}
::view-transition-old(marketplace-group-title), ::view-transition-new(marketplace-group-title) {
  width: auto;
  height: 100%;
}
::view-transition-old(marketplace-group-title) {
  animation: marketplace-skill-blur-out var(--openbot-duration-fast) var(--openbot-ease-out) both;
}
::view-transition-new(marketplace-group-title) {
  animation: marketplace-skill-blur-in var(--openbot-duration-normal) var(--openbot-ease-out) both;
}
::view-transition-old(marketplace-group-row-1), ::view-transition-old(marketplace-group-row-2), ::view-transition-old(marketplace-group-row-3), ::view-transition-old(marketplace-group-row-4), ::view-transition-old(marketplace-group-row-5), ::view-transition-old(marketplace-group-row-6) {
  animation: none;
}
::view-transition-new(marketplace-group-row-1), ::view-transition-new(marketplace-group-row-2), ::view-transition-new(marketplace-group-row-3), ::view-transition-new(marketplace-group-row-4), ::view-transition-new(marketplace-group-row-5), ::view-transition-new(marketplace-group-row-6) {
  animation: marketplace-skill-blur-in var(--openbot-duration-overlay) var(--openbot-ease-out) both;
}
::view-transition-old(marketplace-crumbs) {
  animation: marketplace-skill-blur-out var(--openbot-duration-fast) var(--openbot-ease-out) both;
}
::view-transition-new(marketplace-crumbs) {
  animation: marketplace-skill-blur-in var(--openbot-duration-normal) var(--openbot-ease-out) both;
}
@keyframes marketplace-skill-page-out {
  to {
    opacity: 0;
    transform: translateX(var(--marketplace-skill-to));
    filter: blur(var(--marketplace-skill-blur));
  }
}
@keyframes marketplace-skill-page-in {
  from {
    opacity: 0;
    transform: translateX(var(--marketplace-skill-from));
    filter: blur(var(--marketplace-skill-blur));
  }
}
@keyframes marketplace-skill-rise-in {
  from {
    opacity: 0;
    transform: translateY(var(--openbot-space-2));
    filter: blur(var(--marketplace-skill-blur));
  }
}
@keyframes marketplace-skill-blur-out {
  to {
    opacity: 0;
    filter: blur(var(--marketplace-skill-blur-small));
  }
}
@keyframes marketplace-skill-blur-in {
  from {
    opacity: 0;
    filter: blur(var(--marketplace-skill-blur-small));
  }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(marketplace-page), ::view-transition-group(marketplace-crumbs), ::view-transition-old(marketplace-page), ::view-transition-new(marketplace-page), ::view-transition-old(marketplace-crumbs), ::view-transition-new(marketplace-crumbs), ::view-transition-group(marketplace-group-title), ::view-transition-old(marketplace-group-title), ::view-transition-new(marketplace-group-title), ::view-transition-group(marketplace-group-row-1), ::view-transition-group(marketplace-group-row-2), ::view-transition-group(marketplace-group-row-3), ::view-transition-group(marketplace-group-row-4), ::view-transition-group(marketplace-group-row-5), ::view-transition-group(marketplace-group-row-6), ::view-transition-new(marketplace-group-row-1), ::view-transition-new(marketplace-group-row-2), ::view-transition-new(marketplace-group-row-3), ::view-transition-new(marketplace-group-row-4), ::view-transition-new(marketplace-group-row-5), ::view-transition-new(marketplace-group-row-6) {
    animation: none;
  }
}
@media (max-width: 720px) {
  .skills-marketplace {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
  }
  .marketplace-nav {
    grid-row: 2;
    overflow-x: auto;
    padding: var(--openbot-space-2) var(--openbot-space-3);
    border-inline-end: 0;
    border-bottom: 1px solid var(--openbot-border);
  }
  .marketplace-nav-title, .marketplace-nav-group {
    display: none;
  }
  .marketplace-nav-list {
    grid-auto-columns: max-content;
    grid-auto-flow: column;
  }
  .skills-marketplace-body {
    grid-row: 3;
    grid-column: 1;
  }
}
@media (max-width: 860px) {
  .skills-marketplace {
    --marketplace-inset: var(--openbot-space-4);
  }
  .marketplace-head {
    flex-wrap: wrap;
  }
}
.skills-marketplace .ui-button > svg, .marketplace-search > svg {
  width: 16px;
  height: 16px;
}
.marketplace-app-action[data-status="attention"] > svg {
  color: var(--openbot-warning-text);
}
:is(.marketplace-skill-agents-trigger, .marketplace-skill-picker-row) .agent-avatar > svg {
  width: 128%;
  height: 128%;
}
.marketplace-skill-source .ui-sliding-tabs-trigger svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: none;
}
.marketplace-agent-update-frame {
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  overflow: hidden;
}
.ui-confirm-dialog-body .marketplace-agent-update-list {
  --marketplace-agent-update-fade-top: 0px;
  --marketplace-agent-update-fade-bottom: 0px;
  display: flex;
  max-height: calc(var(--openbot-space-8) * 7);
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  flex-direction: column;
  list-style: none;
  scrollbar-width: none;
  mask-image: linear-gradient( to bottom, var(--openbot-transparent), var(--openbot-text-primary) var(--marketplace-agent-update-fade-top), var(--openbot-text-primary) calc(100% - var(--marketplace-agent-update-fade-bottom)), var(--openbot-transparent) );
}
.marketplace-agent-update-list::-webkit-scrollbar {
  display: none;
}
.marketplace-agent-update-list.scroll-fade-top {
  --marketplace-agent-update-fade-top: calc(var(--openbot-space-1) * 6);
}
.marketplace-agent-update-list.scroll-fade-bottom {
  --marketplace-agent-update-fade-bottom: calc(var(--openbot-space-1) * 6);
}
.marketplace-agent-update-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-2) var(--openbot-space-3);
}
.marketplace-agent-update-row + .marketplace-agent-update-row {
  border-top: 1px solid var(--openbot-border);
}
.marketplace-agent-update-text {
  display: grid;
  min-width: 0;
}
.marketplace-agent-update-name {
  overflow: hidden;
  color: var(--openbot-text-secondary);
  font-weight: var(--openbot-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.marketplace-agent-update-state {
  color: var(--openbot-text-dim);
  font-size: var(--openbot-text-sm);
}
.marketplace-agent-update-row[data-replace] .marketplace-agent-update-state {
  color: var(--openbot-warning-text);
}
.marketplace-agent-update-choice {
  display: inline-flex;
  flex: none;
  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;
}
.marketplace-agent-update-option {
  display: grid;
}
.marketplace-agent-update-option-label {
  display: inline-flex;
  height: var(--openbot-control-sm);
  align-items: center;
  border-radius: var(--openbot-radius-sm);
  padding: 0 var(--openbot-space-3);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--openbot-duration-fast) ease, color var(--openbot-duration-fast) ease;
}
.marketplace-agent-update-option-label:hover, .marketplace-agent-update-option[data-checked] .marketplace-agent-update-option-label {
  color: var(--openbot-text-primary);
}
.marketplace-agent-update-option[data-checked] .marketplace-agent-update-option-label {
  background: var(--openbot-tabs-pill-bg);
}
.marketplace-agent-update-option:has(input:focus-visible) .marketplace-agent-update-option-label {
  box-shadow: var(--openbot-focus-ring);
}
.marketplace-agent-update-option[data-choice="replace"][data-checked] .marketplace-agent-update-option-label {
  color: var(--openbot-warning-text);
}
.marketplace-agent-update-others {
  margin: var(--openbot-space-2) 0 0;
  color: var(--openbot-text-dim);
  font-size: var(--openbot-text-sm);
}
.chat-color-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  margin-inline-start: auto;
  border-radius: var(--openbot-radius-pill);
  background: var(--chat-color-value);
  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) 18%, transparent);
  }
}
.chat-color-dot.chat-color-dot-open {
  outline: 1px solid var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    outline: 1px solid color-mix(in srgb, var(--openbot-text-primary) 40%, transparent);
  }
  outline-offset: 2px;
}
.chat-color-own-trigger .chat-color-dot {
  margin-inline: 0 var(--openbot-space-2);
}
.chat-color-own-trigger .ui-select-value {
  flex: 1 1 auto;
  text-align: start;
}
.chat-color-popover {
  --chat-color-shift: -6px;
  position: fixed;
  z-index: var(--openbot-layer-popover);
  padding: var(--openbot-space-3);
  border-radius: var(--ui-menu-radius);
  background: var(--ui-menu-bg);
  box-shadow: 0 0 0 1px var(--ui-menu-edge);
  color: var(--openbot-text-primary);
  animation: chat-color-popover-in var(--openbot-duration-normal) var(--openbot-ease-out) both;
}
@keyframes chat-color-popover-in {
  from {
    opacity: 0;
    transform: translateY(var(--chat-color-shift)) scale(0.96);
  }
}
.chat-color-picker, .chat-color-picker-presets {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}
.chat-color-picker {
  --chat-color-edge: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --chat-color-edge: color-mix(in srgb, var(--openbot-text-primary) 11%, transparent);
  }
  --chat-color-edge-hover: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --chat-color-edge-hover: color-mix(in srgb, var(--openbot-text-primary) 20%, transparent);
  }
  --chat-color-inset: inset 0 0 0 1px var(--openbot-color-picker-dark);
  @supports (color: color-mix(in lab, red, red)) {
    --chat-color-inset: inset 0 0 0 1px color-mix(in srgb, var(--openbot-color-picker-dark) 10%, transparent);
  }
  position: relative;
  display: grid;
  width: 264px;
  gap: var(--openbot-space-3);
}
.chat-color-picker-row {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
}
.chat-color-picker-area, .chat-color-picker-hue, .chat-color-picker-row.chat-color-picker-fields {
  direction: ltr;
}
.chat-color-picker-row.chat-color-picker-fields {
  gap: var(--openbot-space-1-5);
}
.chat-color-picker-area {
  position: relative;
  height: 160px;
  border-radius: var(--openbot-radius-lg);
  background: linear-gradient(to top, var(--openbot-color-picker-dark), transparent), linear-gradient(to right, var(--openbot-color-picker-light), var(--chat-color-pure));
  cursor: crosshair;
  touch-action: none;
}
.chat-color-picker-ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--chat-color-inset);
  pointer-events: none;
}
.chat-color-picker-track {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.chat-color-picker-thumb {
  position: absolute;
  border: 0;
  padding: 0;
  top: calc(var(--chat-color-y) * 1%);
  left: calc(var(--chat-color-x) * 1%);
  width: 18px;
  height: 18px;
  border-radius: var(--openbot-radius-pill);
  background: transparent;
  outline: 0;
  pointer-events: auto;
  translate: -50% -50%;
  transition: top var(--chat-color-layout-duration) var(--chat-color-layout-ease), left var(--chat-color-layout-duration) var(--chat-color-layout-ease);
}
.chat-color-picker-hue .chat-color-picker-thumb {
  top: 50%;
}
.chat-color-picker-dragging .chat-color-picker-thumb {
  transition: none;
}
.chat-color-picker-thumb:focus-visible {
  outline: 2px solid var(--openbot-text-primary);
  outline-offset: 2px;
}
.chat-color-picker-thumb-dot {
  position: absolute;
  inset: 0;
  border: 3px solid var(--openbot-color-picker-light);
  border-radius: inherit;
  background: var(--chat-color-value);
  box-shadow: 0 0 0 1px var(--openbot-color-picker-dark);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--openbot-color-picker-dark) 12%, transparent);
  }
  transition: scale var(--chat-color-press-duration) var(--chat-color-press-ease);
}
.chat-color-picker-dragging .chat-color-picker-thumb-dot {
  scale: 0.78;
}
.chat-color-picker-loupe {
  position: absolute;
  z-index: 1;
  bottom: calc(100% + 12px);
  left: 50%;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  transform: rotate(var(--chat-color-tilt));
  transform-origin: 50% 130%;
  transition: transform 220ms var(--openbot-ease-out);
  animation: chat-color-loupe-lift var(--chat-color-lift-duration) var(--chat-color-lift-ease) both;
}
.chat-color-picker-loupe-drop {
  position: absolute;
  inset: 0;
  border: 3px solid var(--openbot-color-picker-light);
  border-radius: var(--openbot-radius-pill) var(--openbot-radius-pill) var(--openbot-radius-pill) 0;
  background: var(--chat-color-value);
  box-shadow: 0 0 0 1px var(--openbot-color-picker-dark);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--openbot-color-picker-dark) 10%, transparent);
  }
  rotate: -45deg;
}
@keyframes chat-color-loupe-lift {
  from {
    opacity: 0;
    translate: 0 16px;
    scale: 0.3;
  }
}
.chat-color-picker-hue {
  position: relative;
  height: 14px;
  flex: 1 1 auto;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-color-picker-spectrum);
  cursor: pointer;
  touch-action: none;
}
.chat-color-picker-hue-rail {
  position: absolute;
  inset: 0 9px;
}
.chat-color-picker-icon-button, .chat-color-picker-format {
  display: inline-grid;
  height: var(--openbot-control-lg);
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--chat-color-edge);
  border-radius: var(--openbot-radius-md);
  outline: 0;
  background: transparent;
  padding: 0;
  color: var(--openbot-text-muted);
  transition: color var(--openbot-duration-hover) var(--openbot-ease-out), border-color var(--openbot-duration-hover) var(--openbot-ease-out), scale var(--chat-color-press-duration) var(--chat-color-press-ease);
}
.chat-color-picker-icon-button {
  width: var(--openbot-control-lg);
}
.chat-color-picker-format {
  width: 48px;
  overflow: hidden;
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.chat-color-picker-icon-button:hover, .chat-color-picker-format:hover {
  color: var(--openbot-text-primary);
}
.chat-color-picker-icon-button:active {
  scale: 0.92;
}
.chat-color-picker-icon-button:focus-visible, .chat-color-picker-format:focus-visible {
  border-color: var(--chat-color-edge-hover);
  color: var(--openbot-text-primary);
}
.chat-color-picker-icon-button > svg {
  width: 16px;
  height: 16px;
}
.chat-color-picker-format-label {
  grid-area: 1 / 1;
  animation: chat-color-format-in var(--chat-color-press-duration) var(--chat-color-press-ease) both;
}
@keyframes chat-color-format-in {
  from {
    opacity: 0;
    translate: 0 10px;
  }
}
.chat-color-picker-hex {
  position: relative;
  min-width: 0;
  flex: 1 1 auto;
}
.chat-color-picker-hex-hash {
  position: absolute;
  top: 50%;
  left: var(--openbot-space-3);
  translate: 0 -50%;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-lg);
  pointer-events: none;
}
.chat-color-picker-field {
  width: 100%;
  height: var(--openbot-control-lg);
  min-width: 0;
  border: 1px solid var(--chat-color-edge);
  border-radius: var(--openbot-radius-md);
  outline: 0;
  background: transparent;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-variant-numeric: tabular-nums;
  transition: border-color var(--openbot-duration-hover) var(--openbot-ease-out);
}
.chat-color-picker-field:focus-visible {
  border-color: var(--chat-color-edge-hover);
}
.chat-color-picker-field.chat-color-picker-hex-input {
  padding: 0 var(--openbot-space-3) 0 var(--openbot-space-6);
  font-family: var(--openbot-font-mono);
  text-transform: uppercase;
}
.chat-color-picker-field.chat-color-picker-hex-input::placeholder {
  color: var(--openbot-text-placeholder);
  text-transform: none;
}
.chat-color-picker-channels {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  gap: var(--openbot-space-1-5);
}
.chat-color-picker-channel {
  position: relative;
  min-width: 0;
  flex: 1 1 0;
}
.chat-color-picker-field.chat-color-picker-channel-input {
  padding: 0 var(--openbot-space-2) 0 var(--openbot-space-6);
}
.chat-color-picker-channel-label {
  position: absolute;
  top: 50%;
  left: var(--openbot-space-3);
  translate: 0 -50%;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  pointer-events: none;
}
.chat-color-picker-swatch {
  width: var(--openbot-control-lg);
  height: var(--openbot-control-lg);
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-md);
  background: var(--chat-color-value);
  box-shadow: var(--chat-color-inset);
  transition: background-color 150ms var(--openbot-ease-out);
}
.chat-color-picker-presets {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 24px);
  justify-content: space-between;
  row-gap: var(--openbot-space-2);
  padding: var(--openbot-space-1) var(--openbot-space-0-5) 0;
}
.chat-color-picker-preset {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  outline: 0;
  background: var(--chat-color-value);
  box-shadow: var(--chat-color-inset);
  padding: 0;
  cursor: pointer;
  transition: scale var(--chat-color-press-duration) var(--chat-color-press-ease);
}
.chat-color-picker-preset:active {
  scale: 0.88;
}
.chat-color-picker-preset:focus-visible {
  outline: 2px solid var(--openbot-text-primary);
  outline-offset: 3px;
}
.chat-color-picker-preset-ring {
  position: absolute;
  top: -3px;
  left: -3px;
  width: 30px;
  height: 30px;
  border: 2px solid var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    border: 2px solid color-mix(in srgb, var(--openbot-text-primary) 70%, transparent);
  }
  border-radius: var(--openbot-radius-pill);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}
.chat-color-picker-preset-ring[data-visible="true"] {
  opacity: 1;
}
.chat-color-dot.chat-color-none, .chat-color-picker-swatch.chat-color-none, .chat-color-picker-preset.chat-color-none {
  background: linear-gradient( to top right, transparent calc(50% - 1px), var(--openbot-text-muted) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px) ), var(--openbot-bg-control);
  box-shadow: inset 0 0 0 1px var(--chat-color-edge, var(--ui-menu-edge));
}
@media (prefers-reduced-motion: reduce) {
  .chat-color-picker .chat-color-picker-loupe, .chat-color-picker .chat-color-picker-format-label {
    animation: none;
  }
  .chat-color-popover {
    animation-name: ui-select-content-fade-in;
  }
  .chat-color-picker .chat-color-picker-thumb, .chat-color-picker .chat-color-picker-thumb-dot, .chat-color-picker .chat-color-picker-preset, .chat-color-picker .chat-color-picker-preset-ring, .chat-color-picker .chat-color-picker-icon-button, .chat-color-picker .chat-color-picker-format {
    transition: none;
  }
}
.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);
}
.ui-select-item-label:has(.sound-choice-item) {
  flex: 1;
}
.sound-choice-item {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.sound-choice-item-play {
  flex: none;
}
.sound-choice-item-name {
  overflow: hidden;
  text-overflow: ellipsis;
}
.notification-scope-title {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.notification-matrix {
  display: grid;
  gap: var(--openbot-space-3);
}
.notification-matrix-server-mark {
  --server-gradient-logo-size: 32px;
  --server-gradient-logo-radius: var(--openbot-radius-md);
}
.notification-matrix-server-mark > img {
  width: 32px;
  height: 32px;
  border-radius: var(--openbot-radius-md);
}
.notification-matrix-agent > .ui-item-media {
  width: 32px;
  justify-content: center;
}
.notification-matrix-level {
  min-width: 72px;
}
.notification-matrix-add {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--openbot-space-4);
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border: 0;
  background: transparent;
  color: var(--openbot-text-muted);
  font: inherit;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
  text-align: start;
  cursor: pointer;
}
.notification-matrix-add:hover, .notification-matrix-add[data-expanded] {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}
.notification-matrix-add:focus-visible {
  outline: 1px solid var(--openbot-border-strong);
  outline-offset: -1px;
}
.notification-matrix-add-icon {
  display: inline-flex;
  width: 32px;
  height: 32px;
  flex: none;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
}
.notification-matrix-add-icon > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.ui-item-description.notification-matrix-notes {
  white-space: normal;
}
.plan-start-popover {
  display: grid;
  width: 260px;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-3);
}
.plan-start-popover-title, .plan-start-popover-note {
  margin: 0;
}
.plan-start-popover-title {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: 500;
}
.plan-start-popover-controls {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.plan-start-amount {
  width: 56px;
  text-align: end;
}
.plan-start-popover-note {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.plan-start-popover-note[data-invalid] {
  color: var(--openbot-danger);
}
.plan-start-popover-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
}
.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-inline-end: 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-inline-start: 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-docs {
  position: absolute;
  top: var(--openbot-space-3);
  inset-inline-end: 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-docs > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.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);
}
.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-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);
}
:is(.integration-wizard-body, .provider-code-login-body) > :is(.mcp-sign-in-relay-open, .mcp-sign-in-relay-form) {
  margin-top: 0;
}
.integration-wizard-body > .mcp-sign-in-relay-open {
  justify-self: start;
}
.mcp-sign-in-relay-row {
  display: flex;
  gap: var(--openbot-space-2);
}
.mcp-sign-in-relay-row > .ui-input {
  flex: 1;
  min-width: 0;
}
.provider-update-toast-logo {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  overflow: visible;
  fill: var(--openbot-provider-current);
}
.ui-toaster [data-sonner-toast] [data-action]:has(.provider-update-toast-action[data-idle="true"]) {
  display: none;
}
.ui-toaster .provider-update-toast[data-sonner-toast][data-styled="true"]:has(.provider-update-toast-action[data-idle="true"]) {
  padding-bottom: var(--openbot-space-3);
}
.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);
}
.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-mark > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.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-row-inputs.custom-provider-row-triple {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.6fr) auto;
}
.custom-provider-row-inputs.custom-provider-row-quad {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(9ch, 0.8fr) minmax(9ch, 0.8fr) auto;
}
.custom-provider-efforts {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--openbot-space-1) var(--openbot-space-2);
}
.custom-provider-effort {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  cursor: pointer;
}
.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-provider-preset-chevron:dir(rtl), .custom-provider-header .ui-icon-button > svg[class~="lucide-arrow-left"]:dir(rtl) {
  transform: scaleX(-1);
}
.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;
}
.custom-provider-harness {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.custom-provider-harness-item .ui-select-item-label {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--openbot-space-3);
}
.custom-provider-harness-item[data-action]:not([data-selected]) {
  padding-inline-end: var(--openbot-space-1-5);
}
.custom-provider-harness-action {
  margin-inline-start: auto;
}
.custom-provider-harness-button {
  gap: var(--openbot-space-1);
  font-size: inherit;
  pointer-events: none;
}
.custom-provider-harness-item .custom-provider-harness-button svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.custom-provider-harness-value {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--openbot-space-3);
}
.custom-provider-harness-progress {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  margin-inline-start: auto;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.browser-profiles-panel {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-3);
}
.browser-profiles-row {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: var(--openbot-space-2);
}
.browser-profiles-name {
  min-width: 0;
  flex: 1;
}
.ui-select-item.browser-profile-select-new {
  margin-top: calc(var(--openbot-space-1) * 2 + 1px);
}
.ui-select-item.browser-profile-select-new::before {
  position: absolute;
  top: calc(-1 * var(--openbot-space-1) - 1px);
  right: calc(-1 * var(--openbot-space-1));
  left: calc(-1 * var(--openbot-space-1));
  border-top: 1px solid var(--openbot-border);
  content: "";
}
.ui-select-item.browser-profile-select-new[hidden] {
  display: none;
}
.browser-profile-select-option .ui-select-item-label, .browser-profile-select-value {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
}
.browser-profile-select-proxy {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-1);
  color: var(--openbot-text-muted);
}
.browser-profile-select-proxy svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
}
.browser-profile-select-proxy span {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser-profile-select-mark {
  display: inline-flex;
  width: var(--openbot-icon-sm);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}
.browser-profile-select-mark svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.browser-profile-shared-mark {
  display: inline-flex;
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  align-items: center;
  justify-content: center;
}
.browser-profile-color-trigger .browser-profile-dot {
  width: 12px;
  height: 12px;
}
.browser-profile-color-option {
  gap: var(--openbot-space-2);
}
.browser-profile-color-option > span:not(.browser-profile-dot) {
  flex: 1 1 auto;
}
.browser-profile-select-form {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
}
.browser-profile-select-form .browser-profiles-name {
  font-size: var(--openbot-text-sm);
}
.browser-profile-select-form .ui-text {
  padding-inline: var(--openbot-space-2);
}
.browser-profiles-panel:has(> .ui-settings-section) {
  gap: var(--openbot-space-6);
}
.browser-profiles-panel > .ui-settings-section {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-3);
}
.browser-profiles-panel > .ui-settings-section .browser-profiles-row {
  flex: none;
}
.browser-proxy-badge svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.browser-proxy-icon {
  display: inline-flex;
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  align-items: center;
  justify-content: center;
  color: var(--openbot-text-muted);
}
.browser-proxy-icon svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.browser-proxy-submenu-chevron {
  margin-inline-start: auto;
  color: var(--openbot-text-muted);
}
.vault-panel {
  display: grid;
  gap: var(--openbot-space-6);
  min-width: 0;
}
.vault-truncate, .ui-item-content > .vault-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vault-icon {
  display: inline-grid;
  flex: none;
  place-items: center;
}
.vault-icon svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.vault-letter {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
}
.vault-card-logo {
  display: inline-grid;
  flex: none;
  width: var(--integration-tile, 36px);
  height: calc(var(--integration-tile, 36px) * 2 / 3);
  place-items: center;
  border: 1px solid var(--openbot-paper-border);
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-paper);
  color: var(--openbot-paper-text);
}
.vault-card-logo > svg {
  width: 70%;
  height: 70%;
}
.vault-avatar {
  display: inline-grid;
  flex: none;
  width: var(--integration-tile, 36px);
  height: var(--integration-tile, 36px);
  place-items: center;
  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);
}
.vault-avatar > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.vault-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-3);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--openbot-space-1);
}
.vault-count {
  margin-inline-start: var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
  font-variant-numeric: tabular-nums;
}
.vault-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--openbot-space-3) var(--openbot-space-4);
}
.vault-wide {
  grid-column: 1 / -1;
}
.vault-fill-sites {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}
.vault-fill-sites > .ui-label {
  margin-block-end: var(--openbot-space-1-5);
  padding: 0;
}
.vault-sites {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.vault-site {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  min-width: 0;
}
.vault-secret {
  position: relative;
  display: flex;
  align-items: center;
}
.vault-secret .ui-input {
  flex: 1;
  padding-inline-end: var(--openbot-space-8);
}
.vault-secret .ui-icon-button {
  position: absolute;
  inset-inline-end: var(--openbot-space-1);
}
.vault-toolbar .server-settings-search {
  align-self: stretch;
}
.vault-toolbar .server-settings-search .ui-input {
  height: 100%;
  border-color: var(--openbot-transparent);
  font-size: var(--openbot-text-md);
}
.vault-toolbar .server-settings-search .ui-input:focus-visible {
  border-color: var(--openbot-border-focus);
}
.vault-dialog.ui-confirm-dialog {
  width: min(520px, 100%);
}
.vault-dialog-form {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.vault-dialog-header {
  display: flex;
  gap: var(--openbot-space-3);
  align-items: center;
  padding-block: var(--openbot-space-4) 0;
  padding-inline: var(--openbot-space-6) var(--openbot-space-4);
}
.vault-dialog-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vault-dialog-body {
  display: grid;
  gap: var(--openbot-space-3);
  min-height: 0;
  overflow-y: auto;
  padding: var(--openbot-space-4) var(--openbot-space-6) var(--openbot-space-6);
}
.vault-link-accounts {
  display: grid;
  gap: var(--openbot-space-2);
  margin-bottom: var(--openbot-space-3);
}
.vault-group-label {
  padding: 0 var(--openbot-space-3);
}
.vault-link-logo > svg {
  width: 92%;
  height: 92%;
}
.ui-item-content > .vault-link-error {
  color: var(--openbot-danger-text);
}
.vault-request {
  max-width: 520px;
}
.vault-request-logo {
  display: flex;
  flex: none;
}
.vault-two-step-digits {
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-lg);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--openbot-text-primary);
}
.vault-two-step-timer.ui-radial-progress {
  width: var(--openbot-icon-md);
}
.vault-two-step-code {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.vault-two-step-code[data-size="lg"] {
  gap: var(--openbot-space-3);
  justify-content: center;
  padding: var(--openbot-space-4) 0;
}
.vault-two-step-code[data-size="lg"] .vault-two-step-digits {
  font-size: var(--openbot-text-3xl);
}
.vault-two-step-code[data-size="lg"] .vault-two-step-timer.ui-radial-progress {
  width: var(--openbot-icon-lg, 20px);
}
.vault-two-step-row-code {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-2);
  height: auto;
  border-radius: var(--openbot-radius-sm);
  padding: var(--openbot-space-1) var(--openbot-space-2);
  color: inherit;
}
.vault-two-step-setup {
  display: grid;
  gap: var(--openbot-space-3);
}
.vault-two-step-or {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.vault-two-step-or::before, .vault-two-step-or::after {
  flex: 1;
  height: 1px;
  background: var(--openbot-border);
  content: "";
}
.vault-two-step-check {
  text-align: center;
}
.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-template-row > svg[class~="lucide-chevron-right"]:dir(rtl), .agent-template-skill-toggle > svg[class~="lucide-chevron-right"]:dir(rtl), .agent-template-detail-header .ui-icon-button > svg[class~="lucide-arrow-left"]:dir(rtl) {
  transform: scaleX(-1);
}
.agent-delete-undo-toast-host {
  width: var(--width);
}
.agent-delete-undo-toast {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--openbot-space-3);
  overflow: hidden;
  padding: var(--openbot-space-3) var(--openbot-space-4) var(--openbot-space-2);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-surface-raised);
  box-shadow: 0 0 0 1px var(--openbot-border);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
}
.agent-delete-undo-toast-actions {
  grid-column: 1 / -1;
}
.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;
}
.github-star-toast-host {
  width: var(--width);
}
.github-star-toast {
  position: relative;
  display: grid;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-4);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-surface-raised);
  box-shadow: 0 0 0 1px var(--openbot-border);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.github-star-toast:has(.github-star-toast-actions) {
  padding-bottom: var(--openbot-space-2);
}
.github-star-toast-head {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  padding-inline-end: var(--openbot-space-1);
}
.github-star-toast-head > strong {
  font-weight: var(--openbot-weight-semibold);
  text-wrap: balance;
}
.github-star-toast-mark {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  flex: none;
}
.github-star-toast-star {
  color: var(--openbot-star-edge);
  fill: var(--openbot-star);
}
.github-star-toast-body {
  margin: 0;
  padding-inline-start: calc(var(--openbot-icon-lg) + var(--openbot-space-2));
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-wrap: pretty;
}
.github-star-toast-actions {
  margin-top: var(--openbot-space-1);
}
.social-follow-toast-host {
  width: var(--width);
}
.social-follow-toast {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: var(--openbot-space-3);
  padding: var(--openbot-space-4);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-surface-raised);
  box-shadow: 0 0 0 1px var(--openbot-border);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
}
.social-follow-toast-plush {
  position: relative;
  display: inline-flex;
  animation: social-follow-plush-hop 560ms var(--openbot-ease-out) 120ms both;
}
.social-follow-plush {
  --ui-plush-size: 56px;
  display: inline-flex;
  flex: none;
  transition: rotate var(--openbot-duration-normal) var(--openbot-ease-out), translate var(--openbot-duration-normal) var(--openbot-ease-out);
}
.social-follow-toast-plush[data-face="wide"] .social-follow-plush {
  rotate: 6deg;
  translate: 2px -2px;
}
.social-follow-toast-plush[data-face="happy"] .social-follow-plush {
  animation: social-follow-plush-bounce 520ms var(--openbot-ease-out);
}
.social-follow-toast-main {
  display: grid;
  gap: var(--openbot-space-3);
  min-width: 0;
}
.social-follow-toast-copy {
  display: grid;
  gap: var(--openbot-space-0-5);
  padding-inline-end: var(--openbot-space-1);
}
.social-follow-toast-copy strong {
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  font-weight: var(--openbot-weight-semibold);
  text-wrap: balance;
}
.social-follow-toast-copy p {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-wrap: pretty;
}
.social-follow-toast-copy[data-thanks] {
  animation: social-follow-rise var(--openbot-duration-overlay) var(--openbot-ease-out) both;
}
.social-follow-networks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.social-follow-networks li {
  animation: social-follow-rise var(--openbot-duration-overlay) var(--openbot-ease-out) both;
}
.social-follow-networks li:nth-child(1) {
  animation-delay: 160ms;
}
.social-follow-networks li:nth-child(2) {
  animation-delay: 190ms;
}
.social-follow-networks li:nth-child(3) {
  animation-delay: 220ms;
}
.social-follow-networks li:nth-child(4) {
  animation-delay: 250ms;
}
.social-follow-networks li:nth-child(5) {
  animation-delay: 280ms;
}
.social-follow-networks li:nth-child(6) {
  animation-delay: 310ms;
}
.social-follow-networks li:nth-child(7) {
  animation-delay: 340ms;
}
.social-follow-toast .social-follow-toast-follow {
  justify-content: flex-start;
  margin-inline-end: 0;
  animation: social-follow-rise var(--openbot-duration-overlay) var(--openbot-ease-out) 120ms both;
}
.social-follow-toast .social-follow-network {
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-secondary);
  transition: background var(--openbot-duration-fast) var(--openbot-ease-out), color var(--openbot-duration-fast) var(--openbot-ease-out), translate var(--openbot-duration-normal) var(--openbot-ease-out), scale var(--openbot-duration-fast) var(--openbot-ease-out);
}
.social-follow-toast .social-follow-network:hover {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
  translate: 0 -2px;
}
.social-follow-toast .social-follow-network:active {
  scale: 0.92;
}
.social-follow-mark {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: none;
}
.social-follow-hearts {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.social-follow-heart {
  position: absolute;
  fill: currentColor;
  top: 0;
  left: 50%;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-beam-pink);
  opacity: 0;
  animation: social-follow-heart 1100ms var(--openbot-ease-out) forwards;
}
.social-follow-heart[data-index="0"] {
  --social-follow-heart-x: -18px;
  animation-delay: 80ms;
}
.social-follow-heart[data-index="1"] {
  --social-follow-heart-x: 2px;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.social-follow-heart[data-index="2"] {
  --social-follow-heart-x: 18px;
  animation-delay: 180ms;
}
@keyframes social-follow-plush-hop {
  0% {
    opacity: 0;
    translate: 0 10px;
    scale: 0.7;
    rotate: -10deg;
  }
  60% {
    opacity: 1;
    translate: 0 -3px;
    scale: 1.04;
    rotate: 3deg;
  }
}
@keyframes social-follow-plush-bounce {
  30% {
    translate: 0 -5px;
    scale: 1.06 0.96;
  }
  60% {
    translate: 0 0;
    scale: 0.97 1.03;
  }
}
@keyframes social-follow-rise {
  from {
    opacity: 0;
    translate: 0 6px;
  }
}
@keyframes social-follow-heart {
  0% {
    opacity: 0;
    translate: -50% 8px;
    scale: 0.4;
  }
  25% {
    opacity: 1;
    scale: 1;
  }
  100% {
    opacity: 0;
    translate: calc(-50% + var(--social-follow-heart-x)) -30px;
    scale: 0.9;
  }
}
@media (prefers-reduced-motion: reduce) {
  .social-follow-toast-plush, .social-follow-toast-plush[data-face="happy"] .social-follow-plush, .social-follow-toast-copy[data-thanks], .social-follow-toast-follow, .social-follow-networks li {
    animation: none;
  }
  .social-follow-toast-plush[data-face="wide"] .social-follow-plush, .social-follow-toast .social-follow-network:hover {
    rotate: none;
    translate: none;
  }
  .social-follow-heart {
    display: none;
  }
}
.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;
  stroke-width: var(--openbot-icon-stroke-lg);
}
.billing-license-row .ui-item-actions {
  gap: var(--openbot-space-2);
}
.billing-license-menu.ui-action-menu {
  z-index: var(--openbot-layer-dialog-host);
}
.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-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-1) var(--openbot-space-1-5);
  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:is([data-kind="tab"], [data-kind="thread"]) {
  max-width: min(260px, 100%);
}
.reference-chip[data-kind="quote"] {
  max-width: min(240px, 100%);
  font-weight: 450;
}
.reference-chip[data-kind="agent"]:hover, button.reference-chip:is([data-kind="quote"], [data-kind="tab"], [data-kind="thread"]):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-request .ui-icon-button > svg[class~="lucide-arrow-right"]:dir(rtl) {
  transform: scaleX(-1);
}
.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:dir(rtl) .t-page[data-page-id="1"] {
  --t-page-from-x: var(--page-slide-distance);
}
.t-page-slide:dir(rtl) .t-page[data-page-id="2"] {
  --t-page-from-x: calc(var(--page-slide-distance) * -1);
}
.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[data-openbot-window-glass] {
  --window-glass-frame: var(--openbot-bg-frame);
  @supports (color: color-mix(in lab, red, red)) {
    --window-glass-frame: color-mix(in srgb, var(--openbot-bg-frame) 20%, transparent);
  }
  --window-glass-card: var(--openbot-bg-canvas);
  @supports (color: color-mix(in lab, red, red)) {
    --window-glass-card: color-mix(in srgb, var(--openbot-bg-canvas) 30%, transparent);
  }
  --window-glass-canvas: var(--openbot-bg-canvas);
  @supports (color: color-mix(in lab, red, red)) {
    --window-glass-canvas: color-mix(in srgb, var(--openbot-bg-canvas) 25%, transparent);
  }
  --window-glass-sidebar: var(--openbot-bg-sidebar);
  @supports (color: color-mix(in lab, red, red)) {
    --window-glass-sidebar: color-mix(in srgb, var(--openbot-bg-sidebar) 25%, transparent);
  }
  --window-glass-frame-fill: var(--openbot-bg-frame);
  @supports (color: color-mix(in lab, red, red)) {
    --window-glass-frame-fill: color-mix(in srgb, var(--openbot-bg-frame) 30%, transparent);
  }
  --window-glass-sheet: var(--openbot-bg-sheet);
  @supports (color: color-mix(in lab, red, red)) {
    --window-glass-sheet: color-mix(in srgb, var(--openbot-bg-sheet) 35%, transparent);
  }
  --window-glass-sheet-inset: var(--openbot-bg-sheet-inset);
  @supports (color: color-mix(in lab, red, red)) {
    --window-glass-sheet-inset: color-mix(in srgb, var(--openbot-bg-sheet-inset) 25%, transparent);
  }
  --window-glass-grouped: var(--openbot-bg-grouped);
  @supports (color: color-mix(in lab, red, red)) {
    --window-glass-grouped: color-mix(in srgb, var(--openbot-bg-grouped) 35%, transparent);
  }
  --window-glass-surface: var(--openbot-bg-surface);
  @supports (color: color-mix(in lab, red, red)) {
    --window-glass-surface: color-mix(in srgb, var(--openbot-bg-surface) 35%, transparent);
  }
  --window-glass-surface-raised: var(--openbot-bg-surface-raised);
  @supports (color: color-mix(in lab, red, red)) {
    --window-glass-surface-raised: color-mix(in srgb, var(--openbot-bg-surface-raised) 40%, transparent);
  }
  --window-glass-control: var(--openbot-bg-control);
  @supports (color: color-mix(in lab, red, red)) {
    --window-glass-control: color-mix(in srgb, var(--openbot-bg-control) 35%, transparent);
  }
  --window-glass-control-hover: var(--openbot-bg-control-hover);
  @supports (color: color-mix(in lab, red, red)) {
    --window-glass-control-hover: color-mix(in srgb, var(--openbot-bg-control-hover) 45%, transparent);
  }
  --window-glass-control-active: var(--openbot-bg-control-active);
  @supports (color: color-mix(in lab, red, red)) {
    --window-glass-control-active: color-mix(in srgb, var(--openbot-bg-control-active) 55%, transparent);
  }
  --window-glass-tabs-bar: var(--openbot-tabs-bar-bg);
  @supports (color: color-mix(in lab, red, red)) {
    --window-glass-tabs-bar: color-mix(in srgb, var(--openbot-tabs-bar-bg) 35%, transparent);
  }
  --window-glass-tabs-pill: var(--openbot-tabs-pill-bg);
  @supports (color: color-mix(in lab, red, red)) {
    --window-glass-tabs-pill: color-mix(in srgb, var(--openbot-tabs-pill-bg) 45%, transparent);
  }
  --window-solid-canvas: var(--openbot-bg-canvas);
  --window-solid-sidebar: var(--openbot-bg-sidebar);
  --window-solid-frame: var(--openbot-bg-frame);
  --window-solid-sheet: var(--openbot-bg-sheet);
  --window-solid-sheet-inset: var(--openbot-bg-sheet-inset);
  --window-solid-grouped: var(--openbot-bg-grouped);
  --window-solid-surface: var(--openbot-bg-surface);
  --window-solid-surface-raised: var(--openbot-bg-surface-raised);
  --window-solid-control: var(--openbot-bg-control);
  --window-solid-control-hover: var(--openbot-bg-control-hover);
  --window-solid-control-active: var(--openbot-bg-control-active);
  --window-solid-tabs-bar: var(--openbot-tabs-bar-bg);
  --window-solid-tabs-pill: var(--openbot-tabs-pill-bg);
}
:root[data-openbot-window-glass] .app-window {
  --openbot-bg-canvas: var(--window-glass-canvas);
  --openbot-bg-sidebar: var(--window-glass-sidebar);
  --openbot-bg-frame: var(--window-glass-frame-fill);
  --openbot-bg-sheet: var(--window-glass-sheet);
  --openbot-bg-sheet-inset: var(--window-glass-sheet-inset);
  --openbot-bg-grouped: var(--window-glass-grouped);
  --openbot-bg-surface: var(--window-glass-surface);
  --openbot-bg-surface-raised: var(--window-glass-surface-raised);
  --openbot-bg-control: var(--window-glass-control);
  --openbot-bg-control-hover: var(--window-glass-control-hover);
  --openbot-bg-control-active: var(--window-glass-control-active);
  --openbot-tabs-bar-bg: var(--window-glass-tabs-bar);
  --openbot-tabs-pill-bg: var(--window-glass-tabs-pill);
  --openbot-queue-surface: var(--openbot-bg-surface);
  --background: var(--openbot-bg-canvas);
  --surface: var(--openbot-bg-surface);
}
:root[data-openbot-window-glass] .app-window :is( [data-popper-positioner], [role="dialog"], [role="alertdialog"], [role="menu"], [role="listbox"], [role="tooltip"], .ui-popover-menu-surface, .sidebar-agent-drag-preview, .sidebar-person-drag-preview, .sidebar-section-drag-preview ) {
  --openbot-bg-canvas: var(--window-solid-canvas);
  --openbot-bg-sidebar: var(--window-solid-sidebar);
  --openbot-bg-frame: var(--window-solid-frame);
  --openbot-bg-sheet: var(--window-solid-sheet);
  --openbot-bg-sheet-inset: var(--window-solid-sheet-inset);
  --openbot-bg-grouped: var(--window-solid-grouped);
  --openbot-bg-surface: var(--window-solid-surface);
  --openbot-bg-surface-raised: var(--window-solid-surface-raised);
  --openbot-bg-control: var(--window-solid-control);
  --openbot-bg-control-hover: var(--window-solid-control-hover);
  --openbot-bg-control-active: var(--window-solid-control-active);
  --openbot-tabs-bar-bg: var(--window-solid-tabs-bar);
  --openbot-tabs-pill-bg: var(--window-solid-tabs-pill);
  --openbot-queue-surface: var(--openbot-bg-surface);
  --background: var(--openbot-bg-canvas);
  --surface: var(--openbot-bg-surface);
}
:root[data-openbot-window-glass] body {
  background: transparent;
}
:root[data-openbot-window-glass] .app-window {
  --window-frame: var(--window-glass-frame);
}
@media (max-width: 720px) {
  :root[data-openbot-window-glass] .app-window > .app-frame-edge {
    background: var(--window-glass-card);
  }
}
@media (min-width: 721px) {
  :root[data-openbot-window-glass] .app-window > .app-frame-edge, :root[data-openbot-window-glass] .app-window > .app-frame-edge > .server-rail {
    background: transparent;
  }
  :root[data-openbot-window-glass] .app-window > .app-frame-edge::before, :root[data-openbot-window-glass] .app-window > .app-frame-edge .side-panel-maximized > :is(.settings-panel, .browser-panel), :root[data-openbot-window-glass] .app-frame-edge .diagram-view-body {
    background: var(--window-glass-card);
  }
}
:root[data-openbot-window-glass] .app-window > .app-frame-edge > .sidebar, :root[data-openbot-window-glass] .app-window > .app-frame-edge :is(.channel-empty, .channel-title), :root[data-openbot-window-glass] .app-window > .app-frame-edge > .sidebar :is(.sidebar-section-agent-drop-target, .sidebar-pinned-group-agent-drop-target) > * {
  --agent-avatar-outline: transparent;
}
:root[data-openbot-window-glass] .app-window > .app-frame-edge > .sidebar .agent-row:not(:hover, .agent-row-active) .channel-avatar-cluster .agent-avatar:has(> .bloub-avatar-svg image), :root[data-openbot-window-glass] .app-window > .app-frame-edge > .sidebar .agent-list[data-sidebar-dragging] .agent-row:hover:not(.agent-row-active) .channel-avatar-cluster .agent-avatar:has(> .bloub-avatar-svg image) {
  filter: none;
}
:root[data-openbot-window-glass] .app-window > .app-frame-edge :is(.channel-empty, .channel-title) .channel-avatar .agent-avatar + .agent-avatar {
  margin-inline-start: 0;
}
:root[data-openbot-window-glass] .app-window :is(.schedule-pane, .agent-usage, .tasks-page, .diagram-view, .settings-page-content .agent-files-view) {
  background: transparent;
}
:root[data-openbot-window-glass] .app-window .diagram-board-viewport {
  background-color: transparent;
}
:root[data-openbot-window-glass] .app-window .tasks-page-composer.composer-wrap {
  background: var(--window-glass-card);
}
:root[data-openbot-window-glass] .app-window .settings-page-content .settings-modal-scroll-frame::before {
  background: linear-gradient(to bottom, var(--window-glass-card) 28%, transparent 100%);
}
:root[data-openbot-window-glass] .app-window .settings-page-content .settings-modal-scroll-frame::after {
  background: linear-gradient(to top, var(--window-glass-card) 28%, transparent 100%);
}
:root[data-openbot-window-glass] .app-window :is( .sidebar-folder > header, .marketplace-skill-group-bar, .agent-instructions-bar, .trace-row[data-parent], .trace-axis-row ) {
  backdrop-filter: blur(var(--openbot-space-4));
}
:root[data-openbot-window-glass] .app-window .wfn-stage {
  --wfn-card: var(--window-solid-canvas);
  --wfn-field: var(--window-solid-surface-raised);
  --wfn-port: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --wfn-port: color-mix(in srgb, var(--openbot-text-primary) 10%, var(--window-solid-canvas));
  }
}
:root[data-openbot-window-glass][data-openbot-color-scheme="light"] .app-window .wfn-stage {
  --wfn-card: var(--window-solid-surface);
  --wfn-field: var(--window-solid-control-hover);
}
:root[data-openbot-window-glass] .browser-full-view {
  background: var(--window-glass-frame);
}
:root[data-openbot-window-glass] .app-window .ui-bubble.message-bubble-colored > .ui-bubble-content {
  --openbot-bg-canvas: var(--window-glass-canvas);
  --openbot-bg-sidebar: var(--window-glass-sidebar);
  --openbot-bg-surface: var(--window-glass-surface);
  --openbot-bg-surface-raised: var(--window-glass-surface-raised);
  --openbot-bg-control: var(--window-glass-control);
  --openbot-bg-control-hover: var(--window-glass-control-hover);
  --openbot-bg-control-active: var(--window-glass-control-active);
}
:root[data-openbot-window-glass] .app-window .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, color-mix(in srgb, var(--message-author-color, var(--openbot-accent)) 22%, var(--window-solid-surface-raised)) 40%, transparent );
  }
}
:root[data-openbot-window-glass] .app-window .message-entry-agent .ui-bubble-variant-muted.message-bubble-colored > .ui-bubble-content {
  background: var(--message-chat-color);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix( in srgb, color-mix(in srgb, var(--message-chat-color) var(--message-bubble-tint-amount), var(--window-solid-surface)) 35%, transparent );
  }
}
:root[data-openbot-window-glass] .app-window .message-entry-user .ui-bubble.message-bubble-colored > .ui-bubble-content {
  background: var(--message-chat-color);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix( in srgb, color-mix(in srgb, var(--message-chat-color) var(--message-bubble-tint-amount), var(--window-solid-surface-raised)) 40%, transparent );
  }
}
:root[data-openbot-color-scheme="dark"][data-openbot-chat-background-dark] {
  --chat-background: oklch(from var(--openbot-chat-background-dark) min(l, 0.3) min(c, 0.05) h);
}
:root[data-openbot-color-scheme="light"][data-openbot-chat-background-light] {
  --chat-background: oklch(from var(--openbot-chat-background-light) max(l, 0.95) min(c, 0.02) h);
}
:root[data-openbot-color-scheme="dark"][data-openbot-chat-background-dark] :is(.conversation-panel:not(.window-page), .direct-conversation), :root[data-openbot-color-scheme="light"][data-openbot-chat-background-light] :is(.conversation-panel:not(.window-page), .direct-conversation) {
  --openbot-bg-canvas: var(--chat-background);
  --openbot-bg-canvas-clear: oklch(from var(--chat-background) l c h / 0);
}
:root[data-openbot-color-scheme="light"][data-openbot-chat-background-light] :is(.conversation-panel:not(.window-page), .direct-conversation) {
  --openbot-scroll-edge-overlay: oklch(from var(--chat-background) l c h / 0.72);
}
:root[data-openbot-window-glass][data-openbot-color-scheme="dark"][data-openbot-chat-background-dark] .app-window :is(.conversation-panel:not(.window-page), .direct-conversation), :root[data-openbot-window-glass][data-openbot-color-scheme="light"][data-openbot-chat-background-light] .app-window :is(.conversation-panel:not(.window-page), .direct-conversation) {
  --openbot-bg-canvas: var(--chat-background);
  @supports (color: color-mix(in lab, red, red)) {
    --openbot-bg-canvas: color-mix(in srgb, var(--chat-background) 25%, transparent);
  }
}
@media (min-width: 721px) {
  :root[data-openbot-color-scheme="dark"][data-openbot-chat-background-dark] .app-window > .app-frame-edge :is(.conversation-panel:not(.window-page), .direct-conversation)::before, :root[data-openbot-color-scheme="light"][data-openbot-chat-background-light] .app-window > .app-frame-edge :is(.conversation-panel:not(.window-page), .direct-conversation)::before {
    position: absolute;
    z-index: -1;
    inset: var(--left-header-height) 0 0;
    border-start-end-radius: calc(var(--openbot-radius-card) - 1px);
    border-end-end-radius: calc(var(--openbot-radius-card) - 1px);
    background: var(--openbot-bg-canvas);
    content: "";
    pointer-events: none;
  }
}
: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, .web-other-tab-window > .server-rail {
  padding-top: var(--openbot-space-3);
}
.web-app-frame > .server-rail::before, .web-other-tab-window > .server-rail::before {
  display: none;
}
.web-app-frame > .server-rail::after, .web-other-tab-window > .server-rail::after {
  top: 0;
}
.web-mobile-navigation {
  display: none;
}
.web-consent-row.first-run-choice-improve {
  align-items: flex-start;
  border-top: 0;
  padding: var(--openbot-space-1) 0 0;
}
.web-consent-row .ui-checkbox {
  margin-top: 1px;
}
.web-consent-row + .account-login-footer {
  margin-top: var(--openbot-space-3);
}
.account-login-footer .first-run-consent-notice {
  width: 100%;
  margin: 0;
}
.web-consent-row .first-run-choice-improve-pop {
  top: 0;
  inset-inline-end: 0;
}
@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[data-settings-panel] .settings-panel {
    width: 100%;
  }
  .web-app-frame[data-web-mobile-pane="conversation"] .conversation-panel.browser-panel-active {
    padding-inline-end: 0;
  }
  .web-app-frame[data-web-mobile-pane="conversation"] .browser-panel {
    width: 100%;
    max-width: 100%;
  }
  .web-app-frame[data-web-mobile-pane="conversation"] .side-panel-docked:not(.side-panel-maximized) > .conversation-header {
    width: 100%;
  }
  .web-app-frame[data-web-mobile-pane="conversation"] .side-panel-docked > :is(.conversation-scroll, .composer-wrap, .unread-messages-banner, .chat-search, .subagents-dock) {
    visibility: hidden;
  }
  .web-app-frame[data-web-mobile-pane="conversation"] .side-panel-docked > .side-panel-header {
    width: 100%;
  }
  .web-app-frame[data-web-mobile-pane="conversation"] .side-panel-docked:not(.side-panel-maximized) > .side-panel-header {
    top: var(--left-header-height, 38px);
  }
  .web-app-frame[data-web-mobile-pane="conversation"] .side-panel-docked > .side-panel-header::before, .web-app-frame[data-web-mobile-pane="conversation"] .side-panel-docked .right-panel-resizer {
    display: none;
  }
  .web-app-frame[data-web-mobile-pane="conversation"] .side-panel-docked:not(.side-panel-maximized) > :is(.browser-panel, .settings-panel) {
    top: calc(2 * var(--left-header-height, 38px));
  }
  .web-app-frame[data-web-mobile-pane="conversation"] .side-panel-docked:has(> .side-panel-empty) > .side-panel-header {
    display: none;
  }
  .web-app-frame[data-web-mobile-pane="conversation"] .side-panel-docked:has(> .side-panel-empty) > .side-panel-empty {
    top: var(--left-header-height, 38px);
  }
  .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);
}
.web-other-tab-window {
  display: flex;
  height: 100%;
}
.web-other-tab.web-connect.conversation-panel {
  height: 100%;
  flex: 1;
  min-width: 0;
}
.web-other-tab-use.ui-button {
  min-width: 200px;
}
@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;
      --agent-list-stuck-height: 0px;
      --agent-list-fade-top: initial;
      --agent-list-fade-bottom: initial;
      --hosted-upsell-beam-angle: 0deg;
      --wfn-sweep: 0turn;
      --wfn-fade-start: 0px;
      --wfn-fade-end: 0px;
      --settings-page-fade-start: 0px;
      --settings-page-fade-end: 0px;
    }
  }
}


/* /@fs//home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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-in: cubic-bezier(0.4, 0, 1, 1);
    --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;
  }
  .relative {
    position: relative;
  }
  .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;
  }
  .h-1 {
    height: var(--spacing);
  }
  .h-2 {
    height: calc(var(--spacing) * 2);
  }
  .h-3 {
    height: calc(var(--spacing) * 3);
  }
  .h-4 {
    height: calc(var(--spacing) * 4);
  }
  .h-5 {
    height: calc(var(--spacing) * 5);
  }
  .h-6 {
    height: calc(var(--spacing) * 6);
  }
  .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;
  }
  .italic {
    font-style: italic;
  }
  .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 {
    --tw-ease: var(--ease-in);
    transition-timing-function: var(--ease-in);
  }
  .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-frame: #0d0d0d;
  --openbot-bg-sheet-inset: #101010;
  --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-wash-front: linear-gradient(
    to top,
    rgba(111, 255, 196, 0),
    #6fffc4 20%,
    #6db8ff 38%,
    #bb66ff 56%,
    #ff66c0 74%,
    #ffb875 88%,
    rgba(255, 184, 117, 0)
  );
  --openbot-color-picker-light: #ffffff;
  --openbot-color-picker-dark: #000000;
  --openbot-color-picker-spectrum: linear-gradient(
    to right,
    #ff0000,
    #ffff00,
    #00ff00,
    #00ffff,
    #0000ff,
    #ff00ff,
    #ff0000
  );
  --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: var(--openbot-text-muted);
  --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-paper: #f0f0f0;
  --openbot-paper-text: #141414;
  --openbot-paper-text-muted: rgba(20, 20, 20, 0.52);
  --openbot-paper-text-dim: rgba(20, 20, 20, 0.36);
  --openbot-paper-border: rgba(20, 20, 20, 0.14);
  --openbot-onboarding-desktop-mist: #dbe9ff;
  --openbot-onboarding-desktop-blue: #7eb4f2;
  --openbot-onboarding-desktop-indigo: #6f7de8;
  --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-felt-plum-top: rgb(112 80 131);
  --openbot-felt-plum-bottom: rgb(74 40 92);
  --openbot-felt-raspberry-top: rgb(245 32 112);
  --openbot-felt-raspberry-bottom: rgb(180 6 65);
  --openbot-felt-amber-top: rgb(255 149 17);
  --openbot-felt-amber-bottom: rgb(203 104 12);
  --openbot-felt-cream: #f6efe2;
  --openbot-felt-cream-stroke: #efe4d2;
  --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-star: #facc15;
  --openbot-star-edge: #ca8a04;
  --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-menu: rgba(0, 0, 0, 0.45);
  --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-default: "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Arabic", sans-serif;
  --openbot-font-mono-default: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
  --openbot-font-sans: var(--openbot-font-sans-default);
  --openbot-font-mono: var(--openbot-font-mono-default);
  --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, 3.5cqi, 2.75rem);
  --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: 2;
  --openbot-icon-stroke-lg: 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-show-delay: 750ms;
  --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 1px var(--openbot-border-focus);
  --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="kimi"] {
  --openbot-provider-current: var(--openbot-text-primary);
}
[data-provider="devin"] {
  --openbot-provider-current: var(--openbot-text-primary);
}
[data-provider="copilot"] {
  --openbot-provider-current: var(--openbot-text-primary);
}
[data-provider="mistral"] {
  --openbot-provider-current: var(--openbot-text-primary);
}
[data-provider="acp"] {
  --openbot-provider-current: var(--openbot-text-primary);
}
:root[data-openbot-color-scheme="light"] {
  color-scheme: light;
  --openbot-bg-canvas: #f5f5f6;
  --openbot-bg-canvas-clear: rgba(245, 245, 246, 0);
  --openbot-bg-frame: #e8e8eb;
  --openbot-bg-sidebar: #f5f5f6;
  --openbot-bg-native-sidebar: #f5f5f6;
  --openbot-bg-sheet: #ffffff;
  --openbot-bg-sheet-inset: #f0f0f2;
  --openbot-bg-grouped: #ffffff;
  --openbot-text-grouped-secondary: #6b6b70;
  --openbot-border-grouped: #e3e3e6;
  --openbot-marketplace-detail-bg: #ececee;
  --openbot-bg-surface: #ffffff;
  --openbot-bg-surface-raised: #fcfcfc;
  --openbot-bg-control: #ffffff;
  --openbot-bg-control-hover: #f0f0f2;
  --openbot-bg-control-active: #e8e8eb;
  --openbot-tabs-bar-bg: #ececee;
  --openbot-tabs-pill-bg: #ffffff;
  --openbot-bg-overlay: rgba(245, 245, 246, 0.92);
  --openbot-dialog-overlay: rgba(20, 20, 20, 0.12);
  --openbot-dialog-ring: rgba(20, 20, 20, 0.1);
  --openbot-bg-glass: rgba(255, 255, 255, 0.76);
  --openbot-glass-surface: rgba(20, 20, 20, 0.04);
  --openbot-glass-surface-hover: rgba(20, 20, 20, 0.07);
  --openbot-glass-border: rgba(20, 20, 20, 0.12);
  --openbot-glass-highlight: rgba(255, 255, 255, 0.6);
  --openbot-glass-shadow: transparent;
  --openbot-scroll-edge-overlay: rgba(245, 245, 246, 0.72);
  --openbot-border: rgba(20, 20, 20, 0.07);
  --openbot-border-strong: rgba(20, 20, 20, 0.1);
  --openbot-image-outline: rgba(20, 20, 20, 0.1);
  --openbot-hover: rgba(20, 20, 20, 0.05);
  --openbot-text-primary: #141414;
  --openbot-text-secondary: #3a3a3c;
  --openbot-text-muted: #6b6b70;
  --openbot-text-dim: #8e8e93;
  --openbot-text-placeholder: #5c5c61;
  --openbot-text-readable: rgba(20, 20, 20, 0.6);
  --openbot-settings-text-muted: rgba(20, 20, 20, 0.6);
  --openbot-surface-light: #1c1c1e;
  --openbot-text-on-light: #ffffff;
  --openbot-text-muted-on-light: rgba(255, 255, 255, 0.64);
  --openbot-text-dim-on-light: rgba(255, 255, 255, 0.4);
  --openbot-border-on-light: rgba(255, 255, 255, 0.16);
  --openbot-accent-hover: #006ad4;
  --openbot-accent-text: #0064c8;
  --openbot-accent-soft: rgba(0, 124, 247, 0.12);
  --openbot-accent-strong: rgba(0, 124, 247, 0.26);
  --openbot-chart-series-codex: #8e4fc0;
  --openbot-chart-series-grok: #16849b;
  --openbot-chart-storage-workspaces: #2f74c9;
  --openbot-chart-storage-files: #c64d1d;
  --openbot-chart-storage-chats: #148a61;
  --openbot-chart-storage-downloads: #6f62d6;
  --openbot-chart-storage-runtimes: #a86f00;
  --openbot-success: #1fa85a;
  --openbot-success-text: #187a41;
  --openbot-success-soft: rgba(31, 168, 90, 0.12);
  --openbot-success-wash: rgba(31, 168, 90, 0.06);
  --openbot-warning: #f08a00;
  --openbot-warning-text: #9c5200;
  --openbot-warning-soft: rgba(240, 138, 0, 0.14);
  --openbot-approval-badge-soft: rgba(240, 138, 0, 0.18);
  --openbot-danger: #e8222d;
  --openbot-danger-hover: #f04a53;
  --openbot-danger-text: #c0141d;
  --openbot-danger-soft: rgba(232, 34, 45, 0.12);
  --openbot-danger-soft-hover: rgba(232, 34, 45, 0.2);
  --openbot-danger-focus: rgba(232, 34, 45, 0.36);
  --openbot-danger-border: rgba(232, 34, 45, 0.45);
  --openbot-question-option: #16849b;
  --openbot-question-option-soft: rgba(22, 132, 155, 0.12);
  --openbot-question-option-hover: rgba(22, 132, 155, 0.18);
  --openbot-question-option-pressed: rgba(22, 132, 155, 0.24);
  --openbot-question-badge-text: #0f6a7d;
  --openbot-question-badge-soft: rgba(22, 132, 155, 0.14);
  --openbot-message-badge-text: #0a5fb8;
  --openbot-message-badge-soft: rgba(0, 124, 247, 0.12);
  --openbot-badge-new: #e0004a;
  --openbot-badge-new-soft: rgba(224, 0, 74, 0.12);
  --openbot-file-blue: #1a66c4;
  --openbot-file-blue-soft: rgba(31, 111, 209, 0.12);
  --openbot-file-yellow: #9c5200;
  --openbot-file-yellow-soft: rgba(240, 138, 0, 0.14);
  --openbot-file-orange: #a8521a;
  --openbot-file-orange-soft: rgba(181, 90, 31, 0.12);
  --openbot-file-teal: #127589;
  --openbot-file-teal-soft: rgba(22, 132, 155, 0.12);
  --openbot-file-green: #187a41;
  --openbot-file-green-soft: rgba(31, 168, 90, 0.12);
  --openbot-file-red: #c0141d;
  --openbot-file-red-soft: rgba(232, 34, 45, 0.12);
  --openbot-file-pink: #a3478f;
  --openbot-file-pink-soft: rgba(163, 71, 143, 0.12);
  --openbot-file-default: #0064c8;
  --openbot-file-default-soft: rgba(0, 124, 247, 0.12);
  --openbot-data-table-border: #e3e3e6;
  --openbot-data-table-header-text: #6b6b70;
  --openbot-data-table-text: #1c1c1e;
  --openbot-data-table-outer-border: rgba(20, 20, 20, 0);
  --openbot-data-table-ring: rgba(20, 20, 20, 0.1);
  --openbot-shadow-popover-ambient: transparent;
  --openbot-shadow-dialog: transparent;
  --openbot-shadow-menu: transparent;
  --openbot-shadow-ring: rgba(20, 20, 20, 0.04);
  --openbot-shadow-overlay: 0 0 0 transparent;
}
.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"]:where([data-blink]) .app-logo-eye {
  animation: app-logo-blink 192ms cubic-bezier(0.77, 0, 0.175, 1);
}
.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%, 100% {
    transform: scaleY(1);
  }
  50% {
    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 > svg[width="24"]) {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
:where(.ui-button-size-xs > svg[width="24"], .ui-button-size-sm > svg[width="24"]) {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
: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)[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;
  inset-inline-end: -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-inline-start: var(--openbot-space-1-5);
}
:where(.z-badge):has(> [data-icon="inline-end"]) {
  padding-inline-end: 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(svg.lucide) {
  stroke-width: var(--openbot-icon-stroke);
}
: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%;
}
.ui-textarea-resizable {
  position: relative;
  display: grid;
}
.ui-textarea-resizer {
  --ui-textarea-grip: var(--openbot-text-dim);
  position: absolute;
  inset-inline-end: 1px;
  bottom: 1px;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 0;
  border-end-end-radius: var(--openbot-radius-md);
  padding: 0;
  background-image: linear-gradient( 135deg, transparent 48%, var(--ui-textarea-grip) 48% 56%, transparent 56% 68%, var(--ui-textarea-grip) 68% 76%, transparent 76% );
  background-repeat: no-repeat;
  background-position: right 3px bottom 3px;
  background-size: 12px 12px;
  cursor: ns-resize;
  touch-action: none;
  user-select: none;
}
.ui-textarea-resizer:hover, .ui-textarea-resizer:focus-visible, .ui-textarea-resizer[data-active] {
  --ui-textarea-grip: var(--openbot-text-primary);
}
.ui-textarea-resizer:focus-visible {
  outline: 0;
}
.ui-textarea-resizer:dir(rtl) {
  scale: -1 1;
}
html.ui-textarea-resizing {
  cursor: ns-resize;
  user-select: none;
}
: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);
}
: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-block: var(--openbot-space-2);
  padding-inline: 10px var(--openbot-space-2);
  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: start;
  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-focus);
  outline: 0;
}
.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-search-select-content {
  display: flex;
  flex-direction: column;
  width: max(var(--kb-popper-anchor-width, 0px), 240px);
  overflow: hidden;
  transform-origin: var(--kb-popover-content-transform-origin);
}
.ui-search-select-search {
  position: relative;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--openbot-border);
  padding: var(--openbot-space-1);
}
.ui-search-select-search > svg {
  position: absolute;
  top: 50%;
  inset-inline-start: var(--openbot-space-3);
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
  transform: translateY(-50%);
  pointer-events: none;
}
.ui-search-select-input {
  width: 100%;
  padding-inline-start: var(--openbot-space-8);
}
.ui-search-select-root {
  min-height: 0;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}
.ui-search-select-content .ui-select-listbox {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
}
.ui-search-select-empty {
  margin: 0;
  padding: var(--openbot-space-2) var(--openbot-space-3);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.ui-select-footer {
  border-top: 1px solid var(--openbot-border);
  padding: var(--openbot-space-1);
}
.ui-select-section {
  padding: var(--openbot-space-2) 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);
  list-style: none;
}
.ui-select-item {
  position: relative;
  display: flex;
  align-items: center;
  cursor: default;
  user-select: none;
  border-radius: var(--openbot-radius-sm);
  outline: 0;
  padding-block: var(--openbot-space-1-5);
  padding-inline: var(--openbot-space-2) var(--openbot-space-8);
  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;
  inset-inline-end: 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-inline-start: 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-field-limit {
  display: grid;
  gap: var(--openbot-space-0-5);
}
.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);
}
:where(.ui-item-media) > svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  stroke-width: var(--openbot-icon-stroke-lg);
}
.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-paper-text);
  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-progress-fill[data-indeterminate]:dir(rtl) {
  animation-name: ui-progress-travel-rtl;
}
@keyframes ui-progress-travel-rtl {
  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] {
  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-card);
}
.ui-toaster [data-sonner-toast][data-styled="true"] {
  --ui-toast-tone: transparent;
  --ui-toast-motion-duration: var(--openbot-duration-toast-enter);
  --toast-svg-margin-start: 0px;
  --toast-svg-margin-end: 0px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) max-content max-content;
  align-items: start;
  column-gap: 0;
  row-gap: var(--openbot-space-3);
  min-height: var(--openbot-control-xl);
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border-color: transparent;
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-surface-raised);
  box-shadow: 0 0 0 1px var(--openbot-border);
  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"]:has([data-button]) {
  padding-bottom: var(--openbot-space-2);
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-content] {
  grid-area: 1 / 2 / 2 / -1;
  gap: var(--openbot-space-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: 3;
  justify-self: end;
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-action] {
  grid-column: 4;
}
.ui-toaster [data-sonner-toast][data-styled="true"]:has([data-cancel]) [data-action] {
  margin-inline-start: var(--openbot-space-1);
}
.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-inline-end: var(--openbot-space-1);
}
.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);
  text-wrap: balance;
}
.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-block: 1px 0;
  margin-inline: 0 var(--openbot-space-3);
}
.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-sm);
  margin: 0;
  border: 1px solid transparent;
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-surface-light);
  box-shadow: none;
  padding-inline: var(--openbot-space-3);
  color: var(--openbot-text-on-light);
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  transition: background-color var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease, transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-button]:last-of-type {
  margin-inline-end: calc(var(--openbot-space-2) - var(--openbot-space-4));
}
.ui-toaster[data-sonner-toaster][data-sonner-theme] [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, .ui-toast-card-close: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], .ui-toast-card-close {
  position: absolute;
  top: calc(-1 * var(--openbot-space-1-5));
  inset-inline-end: calc(-1 * var(--openbot-space-1-5));
  inset-inline-start: auto;
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  border: 0;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface-raised);
  box-shadow: 0 0 0 1px var(--openbot-border-strong);
  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, .ui-toast-card-close::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], .ui-toast-card-close {
    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, [data-sonner-toast]:hover .ui-toast-card-close, [data-sonner-toast]:focus-within .ui-toast-card-close {
    pointer-events: auto;
    opacity: 1;
  }
  .ui-toaster [data-sonner-toast][data-styled="true"] [data-action]:hover {
    background: var(--openbot-surface-light);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--openbot-surface-light) 82%, transparent);
    }
  }
  .ui-toaster[data-sonner-toaster][data-sonner-theme] [data-sonner-toast][data-styled="true"] [data-cancel]:hover {
    background: var(--openbot-bg-control-hover);
    color: var(--openbot-text-primary);
  }
  .ui-toaster [data-sonner-toast][data-styled="true"] [data-close-button]:hover:not(:focus-visible), .ui-toast-card-close:hover:not(:focus-visible) {
    background: var(--openbot-bg-control-active);
    color: var(--openbot-text-primary);
  }
}
@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, .ui-toast-card-close:active {
  transform: scale(0.96);
}
.ui-toast-card-close > svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.ui-toast-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--openbot-space-1);
  margin-inline-end: calc(var(--openbot-space-2) - var(--openbot-space-4));
}
.ui-toast-card-actions .ui-button {
  height: var(--openbot-control-sm);
  border-radius: var(--openbot-radius-sm);
  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, transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.ui-toast-card-actions .ui-button-variant-ghost {
  color: var(--openbot-text-secondary);
}
.ui-toast-card-actions .ui-button:active {
  transform: scale(0.96);
}
@media (hover: hover) and (pointer: fine) {
  .ui-toast-card-actions .ui-button-variant-ghost:hover {
    background: var(--openbot-bg-control-hover);
    color: var(--openbot-text-primary);
  }
}
.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-plush-loader {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: flex-end;
  gap: calc(var(--ui-plush-size) * 0.18);
}
.ui-plush-loader[data-layout="stack"] {
  flex-direction: column;
  align-items: center;
  gap: calc(var(--ui-plush-size) * 0.3);
}
.ui-plush-mascot {
  --ui-plush-look: calc(var(--ui-plush-size) * 0.035);
  position: relative;
  display: block;
  width: var(--ui-plush-size);
  flex: 0 0 auto;
}
.ui-plush-body {
  position: relative;
  display: block;
  transform-origin: 50% 100%;
}
.ui-plush-body-image, .ui-plush-ball {
  display: block;
  width: 100%;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}
.ui-plush-eyes, .ui-plush-eye {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}
.ui-plush-eye {
  transform-origin: 35.6% 48.1%;
  transition: scale var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.ui-plush-eye[data-side="right"] {
  transform-origin: 64.4% 48.1%;
}
.ui-plush-mascot[data-face="wide"] .ui-plush-eye {
  scale: 1.18;
}
.ui-plush-balls {
  display: flex;
  gap: calc(var(--ui-plush-size) * 0.08);
  padding-bottom: calc(var(--ui-plush-size) * 0.04);
}
.ui-plush-ball {
  width: calc(var(--ui-plush-size) * 0.24);
  transform-origin: 50% 100%;
}
.ui-plush-loader[data-layout="stack"] .ui-plush-balls {
  padding-bottom: 0;
}
.ui-plush-loader[data-layout="stack"] .ui-plush-ball {
  width: calc(var(--ui-plush-size) * 0.2);
}
@media (prefers-reduced-motion: no-preference) {
  .ui-plush-body {
    animation: ui-plush-breathe 3.2s ease-in-out 600ms infinite;
  }
  .ui-plush-eye {
    animation: ui-plush-blink 5.2s ease-in-out 1.8s infinite;
  }
  .ui-plush-eyes {
    animation: ui-plush-look 6s ease-in-out 2.2s infinite;
  }
  .ui-plush-mascot[data-face="wink"] .ui-plush-eye[data-side="left"] {
    animation: ui-plush-wink 600ms var(--openbot-ease-out);
  }
  .ui-plush-mascot[data-face="happy"] .ui-plush-eye {
    animation: ui-plush-squint 220ms var(--openbot-ease-out) forwards;
  }
  .ui-plush-loader > .ui-plush-mascot {
    animation: ui-plush-pop-in 520ms var(--openbot-ease-out) both;
  }
  .ui-plush-loader .ui-plush-eyes {
    animation: ui-plush-follow 1.2s ease-in-out 700ms infinite;
  }
  .ui-plush-ball {
    animation: ui-plush-pop-in 360ms var(--openbot-ease-out) 300ms backwards, ui-plush-ball-bounce 1.2s ease-in-out 700ms infinite;
  }
  .ui-plush-ball:nth-child(2) {
    animation-delay: 380ms, 850ms;
  }
  .ui-plush-ball:nth-child(3) {
    animation-delay: 460ms, 1s;
  }
}
@keyframes ui-plush-pop-in {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
}
@keyframes ui-plush-breathe {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.012, 0.978);
  }
}
@keyframes ui-plush-blink {
  0%, 93%, 100% {
    transform: scaleY(1);
  }
  96% {
    transform: scaleY(0.1);
  }
}
@keyframes ui-plush-wink {
  0%, 100% {
    transform: scaleY(1);
  }
  30%, 60% {
    transform: scaleY(0.1);
  }
}
@keyframes ui-plush-squint {
  to {
    transform: translateY(-1.5%) scaleY(0.35);
  }
}
@keyframes ui-plush-look {
  0%, 28%, 86%, 100% {
    transform: translate(0, 0);
  }
  34%, 50% {
    transform: translate(calc(var(--ui-plush-look) * -1), calc(var(--ui-plush-look) * 0.2));
  }
  58%, 78% {
    transform: translate(var(--ui-plush-look), calc(var(--ui-plush-look) * -0.3));
  }
}
@keyframes ui-plush-follow {
  0%, 18% {
    transform: translate(calc(var(--ui-plush-look) * -0.9), calc(var(--ui-plush-look) * 0.6));
  }
  32% {
    transform: translate(0, calc(var(--ui-plush-look) * 0.6));
  }
  46%, 70% {
    transform: translate(calc(var(--ui-plush-look) * 0.9), calc(var(--ui-plush-look) * 0.6));
  }
  100% {
    transform: translate(calc(var(--ui-plush-look) * -0.9), calc(var(--ui-plush-look) * 0.6));
  }
}
@keyframes ui-plush-ball-bounce {
  0%, 60%, 100% {
    transform: translateY(0) scale(1);
  }
  22% {
    transform: translateY(-110%) scale(0.95, 1.06);
  }
  42% {
    transform: translateY(0) scale(1.14, 0.84);
  }
  50% {
    transform: translateY(0) scale(1);
  }
}
.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;
  }
}
:where( svg:is( [class~="lucide-chevron-left"], [class~="lucide-chevron-right"], [class~="lucide-chevrons-left"], [class~="lucide-chevrons-right"], [class~="lucide-arrow-left"], [class~="lucide-arrow-right"], [class~="lucide-arrow-right-to-line"], [class~="lucide-panel-left"], [class~="lucide-panel-right"], [class~="lucide-undo-2"], [class~="lucide-redo-2"], [class~="lucide-log-in"], [class~="lucide-log-out"], [class~="lucide-corner-down-left"], [class~="lucide-message-square-reply"], .ui-rtl-mirror ):dir(rtl):not(.ui-kbd *) ) {
  transform: scaleX(-1);
}
.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;
  direction: ltr;
  unicode-bidi: isolate;
}
.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;
  }
}
:root[data-openbot-software-rendering] *, :root[data-openbot-software-rendering] *::before, :root[data-openbot-software-rendering] *::after {
  backdrop-filter: none !important;
}
.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 {
  --agent-avatar-outline: var(--openbot-bg-sidebar);
  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-lg);
}
.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-block: var(--openbot-space-3);
  padding-inline: var(--openbot-space-8) var(--openbot-space-4);
  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: start;
  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-inline-start-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 {
  inset-inline-start: var(--openbot-space-3);
}
.ui-bubble-reactions-align-end {
  inset-inline-end: 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;
}
.ui-toaster [data-sonner-toast], .ui-toaster [data-sonner-toast]::after {
  -webkit-app-region: no-drag;
}
.otp-input {
  display: grid;
  gap: 10px;
  justify-items: center;
}
.otp-input-fieldset {
  position: relative;
  direction: ltr;
  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;
  direction: ltr;
  unicode-bidi: isolate;
}
.t-digit-run {
  display: inline-flex;
  align-items: baseline;
}
.t-digit-word {
  white-space: pre;
}
.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[data-page-id="1"]:dir(rtl) {
  --t-page-from-x: var(--page-slide-distance);
}
.t-page-slide .t-page[data-page-id="2"]:dir(rtl) {
  --t-page-from-x: calc(var(--page-slide-distance) * -1);
}
.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;
  }
}
.theme-sweep-canvas {
  position: fixed;
  inset: 0;
  inline-size: 100vw;
  block-size: 100vh;
  pointer-events: none;
  view-transition-name: theme-sweep;
}
.theme-sweep-beam {
  position: fixed;
  inset: 0;
  z-index: calc(var(--openbot-layer-tooltip) + 1);
  inline-size: 100vw;
  block-size: 100vh;
  pointer-events: none;
}
.theme-sweep-ripple {
  position: absolute;
  inline-size: 0;
  block-size: 0;
}
html:active-view-transition-type(theme-sweep)::view-transition-group(*), html:active-view-transition-type(theme-sweep)::view-transition-old(*), html:active-view-transition-type(theme-sweep)::view-transition-new(*) {
  animation: none;
}
html:active-view-transition-type(theme-sweep)::view-transition-new(root) {
  mix-blend-mode: normal;
  mask-image: radial-gradient( 100% var(--theme-sweep-radius) at 50% var(--theme-sweep-origin, 100%), var(--openbot-text-primary) var(--theme-sweep-reveal-from), var(--openbot-transparent) var(--theme-sweep-reveal-to) );
}
html:active-view-transition-type(theme-sweep)::view-transition-image-pair(root) {
  filter: url("#theme-sweep-ripple");
}
html:active-view-transition-type(theme-sweep)::view-transition-new(theme-sweep) {
  mix-blend-mode: normal;
}
.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-shadow-menu);
  --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-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: start;
  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-muted);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ui-action-menu:not([data-menu-layout="grid"]) :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]):is( :hover, :focus-visible, [data-highlighted], [aria-expanded="true"] ) > svg {
  color: var(--openbot-text-primary);
}
.ui-action-menu:not([data-menu-layout="grid"]) :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"])[data-disabled] > svg {
  color: var(--openbot-text-muted);
}
.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-inline-start: 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-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%);
  direction: ltr;
}
.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;
}
@font-face {
  font-family: "OpenBot Greeting Emoji";
  src: url("/@fs/home/ubuntu/openbot/packages/ui/src/assets/fonts/noto-greeting-emoji.woff2") format("woff2");
  unicode-range: U+2728, U+1F44B, U+1F44F, U+1F604, U+1F60A, U+1F64C, U+1FAF6;
  font-display: block;
}
:root[data-surface="dynamic-island"], :root[data-surface="dynamic-island"] body, :root[data-surface="dynamic-island"] #root {
  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", "Noto Color Emoji", "OpenBot Greeting 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;
}
.openbot-dynamic-island-transition-root[data-ambient-motion="paused"] .ui-spinner {
  animation-play-state: paused;
}
.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: start;
  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);
}
.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-inline-end: calc(var(--openbot-control-sm) + var(--openbot-space-2));
}
.dynamic-island-surface-row-stop {
  position: absolute;
  top: 50%;
  inset-inline-end: 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-inline-end: calc(var(--openbot-control-md) + var(--openbot-space-1));
  padding-inline-start: 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);
  inset-inline-end: 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-inline-start: 1px solid var(--openbot-warning);
  padding-block: 2px;
  padding-inline: 10px 0;
}
.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: end;
}
.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: start;
  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-block: 0;
  margin-inline: 0 auto;
  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;
  direction: ltr;
  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-inline-end: 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-inline-end: 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);
}
.sidebar-storage[data-level="full"] {
  border-color: var(--openbot-danger-border);
  background: var(--openbot-danger-soft);
}
.sidebar-storage-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-3);
}
.sidebar-storage-row > .sidebar-mobile-app-dismiss {
  align-self: start;
}
.sidebar-storage-ring {
  width: 48px;
}
.sidebar-storage-percent {
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  font-weight: var(--openbot-weight-semibold);
  line-height: 1;
}
.sidebar-storage-text {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-0-5);
}
.sidebar-storage-text > strong {
  font-weight: var(--openbot-weight-semibold);
}
* {
  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;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.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: start;
}
.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-footer {
  display: grid;
  gap: 4px;
}
.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-inline-end: 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);
}
.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: start;
  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-language {
  align-self: center;
  width: auto;
  margin-top: var(--openbot-space-6);
  color: var(--openbot-text-muted);
}
.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: start;
}
@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: start;
  -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-inline-start: 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-inline-end: 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-lg);
}
.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: start;
  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-lg);
}
.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-route-button:hover .setup-route-arrow:dir(rtl) {
  transform: translateX(-2px) scaleX(-1);
}
.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-block: 8px;
  padding-inline: 12px 0;
  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-inline-end: 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-lg);
}
.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-block: 0 8px;
  padding-inline: 66px 0;
  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-block: 0 8px;
  padding-inline: 66px 0;
}
.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-inline-end: 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-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-3) var(--openbot-space-1);
}
.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: start;
  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:is([data-auth-panel="code"], [data-auth-panel="company"]) {
    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;
  }
  .account-login:dir(rtl)[data-transition="forward"] :is(.account-login-title, .account-login-description) {
    animation-name: account-login-copy-back;
  }
  .account-login:dir(rtl)[data-transition="back"] :is(.account-login-title, .account-login-description) {
    animation-name: account-login-copy-forward;
  }
  .account-login:dir(rtl)[data-transition="forward"] .account-login-form[data-auth-panel="code"] {
    animation-name: account-login-panel-back;
  }
  .account-login:dir(rtl)[data-transition="back"] .account-login-form[data-auth-panel="email"] {
    animation-name: account-login-panel-forward;
  }
  @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:not(.ui-input):focus-visible, textarea:not(.ui-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% );
}
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);
}
.account-login-code-action-change > svg[class~="lucide-arrow-left"]:dir(rtl) {
  transform: scaleX(-1);
}
.app-loading {
  --app-loading-at: 0s;
  --app-loading-exit-delay: 300ms;
  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[data-scene="pile"] .app-loading-stage {
  position: absolute;
  inset: 0;
  justify-content: center;
}
.app-loading-pit-frame {
  position: absolute;
  inset: 0;
}
.app-loading-pit {
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
  transform-origin: 50% 100%;
}
.app-loading-plush {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}
.app-loading-squash {
  width: 100%;
  height: 100%;
  will-change: transform;
}
.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;
}
.app-loading:is([data-phase="fade"], [data-phase="exit"]) {
  animation: app-loading-exit var(--openbot-duration-overlay) var(--openbot-ease-in-out) forwards;
}
@media (prefers-reduced-motion: no-preference) {
  .app-loading[data-phase="exit"] {
    animation-duration: 1100ms;
    animation-delay: var(--app-loading-exit-delay);
  }
  .app-loading-stage {
    animation: app-loading-enter var(--openbot-duration-overlay) var(--openbot-ease-out) calc(250ms - var(--app-loading-at)) both;
  }
  .app-loading-line {
    animation: app-loading-line-in 280ms var(--openbot-ease-out);
  }
  .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-line-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
@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-toast-host {
  width: var(--width);
}
.server-connection-toast {
  position: relative;
  display: grid;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-4) var(--openbot-space-4) var(--openbot-space-2);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-surface-raised);
  box-shadow: 0 0 0 1px var(--openbot-border);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.server-connection-toast-title {
  padding-right: var(--openbot-space-1);
  font-weight: var(--openbot-weight-semibold);
  text-wrap: balance;
}
.server-connection-toast-body {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  font-variant-numeric: tabular-nums;
  text-wrap: pretty;
}
.server-connection-toast-actions {
  margin-top: var(--openbot-space-1);
}
.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%;
  inset-inline-start: 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);
  stroke-width: var(--openbot-icon-stroke-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);
  stroke-width: var(--openbot-icon-stroke-lg);
}
.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;
}
.language-wheel-continue svg:dir(rtl) {
  transform: scaleX(-1);
}
.language-wheel-continue:is(:hover, :focus-visible):not(:disabled) svg:dir(rtl) {
  translate: calc(var(--openbot-space-1) * -1) 0;
}
.language-wheel-continue:active:not(:disabled) svg:dir(rtl) {
  translate: calc(var(--openbot-space-2) * -1) 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: start;
}
.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-paper-border);
  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-paper-border);
  stroke-width: 1;
}
.onboarding-computer-window-bar, .onboarding-computer-window-bar-fill {
  fill: var(--openbot-paper-text-muted);
  opacity: 0.24;
}
.onboarding-computer-window-bar {
  stroke: var(--openbot-paper-border);
  stroke-width: 1;
}
.onboarding-computer-window-pane {
  fill: var(--openbot-paper-text-dim);
  opacity: 0.18;
}
.onboarding-computer-window-card {
  fill: var(--openbot-paper-text-dim);
  opacity: 0.24;
}
.onboarding-computer-window-line {
  fill: var(--openbot-paper-text-dim);
  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-paper-text);
  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;
  inset-inline-end: 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 {
  inset-inline-end: auto;
  inset-inline-start: calc(100% + 10px);
  align-items: flex-end;
  text-align: end;
}
.provider-picker-callout-end .provider-picker-callout-arrow {
  align-self: flex-start;
  transform: scaleX(-1);
}
.provider-picker-callout:dir(rtl) .provider-picker-callout-arrow {
  transform: scaleX(-1);
}
.provider-picker-callout-end:dir(rtl) .provider-picker-callout-arrow {
  transform: none;
}
:is(.setup-route-arrow, .first-run-choice-row-chevron):dir(rtl) {
  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) {
  left: 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: start;
  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);
}
.first-run-choice-improve {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  border-top: 1px solid var(--openbot-border-grouped);
  padding: var(--openbot-space-3) var(--openbot-space-4);
  text-align: start;
  cursor: pointer;
}
.first-run-choice-improve-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.first-run-choice-improve-text strong {
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}
.first-run-choice-improve-pop {
  position: absolute;
  top: var(--openbot-space-2);
  inset-inline-end: var(--openbot-space-4);
  display: flex;
  align-items: flex-end;
  gap: var(--openbot-space-1);
  pointer-events: none;
}
.first-run-choice-improve-agent.agent-avatar {
  width: 20px;
  height: 20px;
  animation: first-run-improve-pop 1600ms var(--openbot-ease-out) both;
}
.first-run-choice-improve-agent:nth-child(2) {
  animation-delay: 90ms;
}
.first-run-choice-improve-agent:nth-child(3) {
  animation-delay: 180ms;
}
@keyframes first-run-improve-pop {
  0% {
    opacity: 0;
    translate: 0 14px;
    scale: 0.4;
  }
  20% {
    opacity: 1;
    translate: 0 -6px;
    scale: 1;
  }
  32% {
    translate: 0 0;
  }
  80% {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
  100% {
    opacity: 0;
    translate: 0 14px;
    scale: 0.6;
  }
}
.first-run-consent-notice {
  width: min(100%, 440px);
  margin: var(--openbot-space-4) 0 0;
  color: var(--openbot-text-muted);
  text-align: center;
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.first-run-consent-notice .first-run-consent-link {
  display: inline;
  vertical-align: baseline;
  font: inherit;
  color: var(--openbot-text-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
@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;
  }
  .first-run-choice-improve-pop {
    display: 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);
}
.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-live-avatar .agent-avatar > svg {
  pointer-events: none;
}
.first-agent-avatar-fieldset {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}
.first-agent-color-options {
  display: grid;
  grid-template-columns: repeat(9, 28px);
  justify-content: center;
  gap: var(--openbot-space-1);
}
.first-agent-face-options {
  display: flex;
  align-items: center;
  justify-content: center;
  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-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-color-choice[aria-pressed="true"] .first-agent-color-swatch {
  outline: 1px solid var(--openbot-accent-text);
  outline-offset: 4px;
}
.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;
}
.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: start;
  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-block: 0;
  padding-inline: var(--openbot-space-4) var(--openbot-space-2);
  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: calc(var(--openbot-icon-lg) * -0.14);
  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: 148px;
}
.global-search-empty {
  flex-direction: column;
  padding-block: var(--openbot-space-3);
  animation: global-search-fade-in var(--openbot-duration-normal) var(--openbot-ease-out) both;
}
.global-search-plush {
  --ui-plush-size: 56px;
  display: block;
  transform-origin: 50% 100%;
}
.global-search-plush[data-gaze="follow"] .ui-plush-eyes {
  animation: none;
  translate: calc(var(--global-search-gaze-x) * var(--ui-plush-size) * 0.07) calc(var(--global-search-gaze-y) * var(--ui-plush-size) * 0.05);
  transition: translate var(--openbot-duration-fast) var(--openbot-ease-out);
}
@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-inline-start: 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);
  inset-inline-end: 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%;
  inset-inline-start: -7px;
  width: 3px;
  height: 0;
  border-start-start-radius: 0;
  border-start-end-radius: var(--openbot-radius-xs);
  border-end-end-radius: var(--openbot-radius-xs);
  border-end-start-radius: 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-lg);
}
.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;
  inset-inline-start: 0;
  height: auto;
}
.app-frame > * {
  min-height: 0;
}
.panel-edge {
  border-inline-end: 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-block: 2px 0;
  padding-inline: 10px 3px;
}
@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-inline-end: 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 {
    --agent-avatar-optical-offset: calc(26px * -0.14);
    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 {
    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-inline-end: auto;
  border-radius: var(--openbot-radius-pill);
  padding-block: 0;
  padding-inline: var(--openbot-space-1) var(--openbot-space-2);
  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: start;
  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-inline-start: 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-inline-start: 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-lg);
}
.sidebar-history-button > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: var(--openbot-icon-stroke);
}
.sidebar-history-button:disabled, .sidebar-history-button:disabled:hover {
  background: transparent;
  color: var(--openbot-text-muted);
  cursor: default;
  opacity: 0.4;
}
.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-lg);
}
.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);
}
:is(.sidebar-section-agent-drop-target, .sidebar-pinned-group-agent-drop-target) {
  --agent-avatar-outline-tinted: var(--openbot-accent-soft);
  @supports (color: color-mix(in lab, red, red)) {
    --agent-avatar-outline-tinted: color-mix(
    in srgb,
    var(--openbot-accent-soft) 54%,
    var(--agent-avatar-outline, transparent)
  );
  }
}
:is(.sidebar-section-agent-drop-target, .sidebar-pinned-group-agent-drop-target) > * {
  --agent-avatar-outline: color(from var(--agent-avatar-outline-tinted) srgb r g b / 1);
}
.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-chevron-collapsed:dir(rtl) {
  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-unread-group .sidebar-waiting-group-count {
  background: var(--openbot-bg-control);
  color: var(--openbot-text-readable);
}
.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-block: 0;
  padding-inline: 8px 32px;
  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%;
  inset-inline-end: 9px;
  color: var(--openbot-text-muted);
  pointer-events: none;
  transform: translateY(-50%);
}
.sidebar-section-draft {
  min-height: 36px;
}
.sidebar:not(.sidebar-compact) .sidebar-folder > header {
  position: sticky;
  top: -4px;
  z-index: 2;
  background: var(--openbot-bg-sidebar);
}
.sidebar:not(.sidebar-compact) .sidebar-folder[data-depth="1"] > header {
  top: calc(-4px + 32px);
  z-index: 3;
}
.sidebar:not(.sidebar-compact) .sidebar-folder[data-depth="2"] > header {
  top: calc(-4px + 64px);
  z-index: 4;
}
@property --agent-list-stuck-height {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --agent-list-fade-top {
  syntax: "*";
  inherits: false;
}
@property --agent-list-fade-bottom {
  syntax: "*";
  inherits: false;
}
.sidebar .agent-list:is(.scroll-fade-top, .scroll-fade-bottom) {
  --agent-list-fade-top: linear-gradient(var(--openbot-text-primary), var(--openbot-text-primary));
  --agent-list-fade-bottom: linear-gradient(var(--openbot-text-primary), var(--openbot-text-primary));
  -webkit-mask-image: var(--agent-list-fade-top), var(--agent-list-fade-bottom);
  mask-image: var(--agent-list-fade-top), var(--agent-list-fade-bottom);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.sidebar .agent-list.scroll-fade-top {
  --agent-list-fade-top: linear-gradient(
    to bottom,
    var(--openbot-text-primary) var(--agent-list-stuck-height),
    transparent var(--agent-list-stuck-height),
    var(--openbot-text-primary) calc(var(--agent-list-stuck-height) + var(--agent-list-fade-size, 18px))
  );
}
.sidebar .agent-list.scroll-fade-bottom {
  --agent-list-fade-bottom: linear-gradient(
    to bottom,
    var(--openbot-text-primary) calc(100% - var(--agent-list-fade-size, 18px)),
    transparent 100%
  );
}
.sidebar-folder > header .sidebar-section-toggle {
  padding-inline: calc(var(--openbot-space-2) - 1px);
  color: var(--openbot-text-primary);
}
.sidebar-folder > header .sidebar-section-toggle:hover, .sidebar-folder > header .sidebar-section-toggle:focus-visible {
  background: var(--openbot-bg-control);
  color: var(--openbot-text-primary);
}
.sidebar-folder > header .sidebar-section-name {
  font-weight: 600;
}
.sidebar-folder:not([data-depth="0"]) > header .sidebar-section-name {
  font-weight: 500;
}
.sidebar-folder-parent {
  color: var(--openbot-text-muted);
  font-weight: 500;
}
.sidebar-folder-end {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--openbot-space-2);
}
.sidebar-folder-icon {
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
}
.sidebar-folder > header .sidebar-section-toggle:hover .sidebar-folder-icon {
  color: var(--openbot-text-secondary);
}
.sidebar-folder-unread {
  min-width: 18px;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}
.sidebar-folder > .sidebar-section-collapse {
  grid-template-columns: minmax(0, 1fr);
}
.sidebar-folder > .sidebar-section-collapse > .sidebar-section-body {
  min-width: 0;
  overflow: clip;
}
.sidebar:not(.sidebar-compact) .sidebar-folder > .sidebar-section-collapse > .sidebar-section-body > .sidebar-folder {
  margin-top: var(--openbot-space-1-5);
}
.sidebar-folder.sidebar-section-agent-drop-target header {
  background: linear-gradient(var(--openbot-accent-soft), var(--openbot-accent-soft)), var(--openbot-bg-sidebar);
}
.sidebar-folder.sidebar-section-agent-drop-target:not(.sidebar-section-drop-after)::after {
  position: absolute;
  z-index: 5;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--openbot-accent-strong);
  content: "";
  pointer-events: none;
}
.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 {
  --agent-avatar-outline: var(--openbot-bg-surface-raised);
  background: var(--openbot-bg-surface-raised);
  transition: none;
}
.agent-row.sidebar-person-drag-preview {
  --agent-avatar-outline: var(--openbot-bg-surface-raised);
  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: 112px;
  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 {
  --sidebar-pinned-avatar-size: 56px;
  width: 72px;
  height: 102px;
  min-height: 102px;
  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: var(--sidebar-pinned-avatar-size);
  height: var(--sidebar-pinned-avatar-size);
  flex-basis: var(--sidebar-pinned-avatar-size);
}
.agent-row.sidebar-pinned-row .agent-avatar, .agent-row.sidebar-pinned-row.person-row .person-avatar {
  width: var(--sidebar-pinned-avatar-size);
  height: var(--sidebar-pinned-avatar-size);
}
.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.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;
}
.agent-row {
  --agent-row-avatar-size: 46px;
  display: flex;
  width: 100%;
  height: 62px;
  min-height: 62px;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  padding: 8px;
  color: inherit;
  text-align: start;
  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 {
  --agent-avatar-outline: var(--openbot-bg-surface);
  background: var(--openbot-bg-surface);
}
.agent-row-avatar {
  position: relative;
  display: grid;
  width: var(--agent-row-avatar-size);
  height: var(--agent-row-avatar-size);
  flex: 0 0 var(--agent-row-avatar-size);
  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;
  inset-inline-end: -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);
}
:root[data-openbot-color-scheme="light"] .sidebar {
  --sidebar-row-selected: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --sidebar-row-selected: color-mix(in srgb, var(--openbot-text-primary) 10%, var(--openbot-bg-sidebar));
  }
}
:root[data-openbot-color-scheme="light"] .sidebar .agent-row.agent-row-active:not(.sidebar-first-agent-action) {
  --agent-avatar-outline: var(--sidebar-row-selected);
  background: var(--sidebar-row-selected);
}
:root[data-openbot-color-scheme="light"] .sidebar .agent-row-active .agent-row-agent-status {
  border-color: var(--sidebar-row-selected);
}
.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-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-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-block: 1px;
  padding-inline: 5px 7px;
  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-inline-start: 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);
}
.bloub-avatar-svg > g:nth-of-type(2) > path:first-child {
  stroke: var(--agent-avatar-outline, transparent);
  stroke-width: calc(var(--agent-avatar-outline-width, 1.5px) * 2);
  stroke-linejoin: round;
  paint-order: stroke fill;
  vector-effect: non-scaling-stroke;
}
.bloub-avatar-svg:has(image) {
  --agent-avatar-ring-color: var(--agent-avatar-outline, transparent);
  --agent-avatar-ring-width: var(--agent-avatar-outline-width, 1.5px);
  filter: drop-shadow(var(--agent-avatar-ring-width) 0 0 var(--agent-avatar-ring-color)) drop-shadow(calc(-1 * var(--agent-avatar-ring-width)) 0 0 var(--agent-avatar-ring-color)) drop-shadow(0 var(--agent-avatar-ring-width) 0 var(--agent-avatar-ring-color)) drop-shadow(0 calc(-1 * var(--agent-avatar-ring-width)) 0 var(--agent-avatar-ring-color));
}
.agent-avatar-custom {
  overflow: hidden;
}
.agent-avatar-custom > img, .composer-mention-avatar > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.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-avatar="image"][data-mood="asleep"] {
  opacity: 0.6;
}
@media (prefers-reduced-motion: reduce) {
  .agent-avatar[data-breathe] {
    animation: none;
  }
}
.agent-row .agent-avatar {
  --agent-avatar-optical-offset: calc(var(--agent-row-avatar-size) * -0.14);
  width: var(--agent-row-avatar-size);
  height: var(--agent-row-avatar-size);
}
.person-row .person-avatar {
  width: var(--agent-row-avatar-size);
  height: var(--agent-row-avatar-size);
}
.avatar-editor {
  position: relative;
  z-index: var(--openbot-layer-popover);
  width: min(284px, calc(var(--settings-panel-width, 360px) - 30px));
  max-width: calc(100vw - 24px);
  max-height: var(--kb-popper-content-available-height, none);
  margin: 0;
  overflow: hidden auto;
  overscroll-behavior: contain;
  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-block: 7px 3px;
  padding-inline: 13px 10px;
  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-heading-end {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.avatar-style-tabs {
  text-transform: none;
  letter-spacing: normal;
}
.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);
  height: auto;
  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: start;
  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-lg);
}
.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: 15px;
  text-wrap: balance;
}
.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: 4px;
  padding: 4px 10px 12px;
}
.avatar-shape-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.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: 44px;
}
.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 {
  --agent-avatar-optical-offset: calc(30px * -0.14);
  width: 30px;
  height: 30px;
}
.avatar-eyes-grid .avatar-face-choice {
  height: 46px;
}
.avatar-eyes-grid .agent-avatar {
  --agent-avatar-optical-offset: calc(38px * -0.14);
  width: 38px;
  height: 38px;
}
.avatar-color-grid {
  display: grid;
  min-width: 0;
  margin: 0;
  border: 0;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 2px;
  padding: 4px 10px 12px;
}
.avatar-color-choice {
  width: 100%;
  height: 32px;
  padding: 0;
}
.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: 600;
  line-height: 1;
}
.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: 300px) {
  .agent-row-wait-chip:has(.agent-row-wait-chip-label) {
    width: 18px;
    height: 18px;
    justify-content: center;
    padding: 0;
  }
  .agent-row-wait-chip:has(.agent-row-wait-chip-label) svg {
    width: 12px;
    height: 12px;
  }
  .agent-row-wait-chip-label {
    display: none;
  }
}
@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(340px, 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 minmax(0, max-content) minmax(var(--openbot-space-8), 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-label {
  overflow: hidden;
  text-overflow: ellipsis;
}
.account-usage-window-reset {
  text-align: end;
}
.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: end;
}
.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 {
  --agent-list-fade-size: 32px;
  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(4px);
}
.sidebar-compact .agent-row.sidebar-pinned-row {
  --sidebar-pinned-avatar-size: 48px;
  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);
}
.sidebar-compact .sidebar-new-button:dir(rtl) {
  transform: translateX(-6px) scale(0.92);
}
.sidebar-compact .sidebar-toggle-button:dir(rtl) {
  transform: translateX(-13px);
}
.sidebar-compact .sidebar-toggle-button:dir(rtl):active {
  transform: translateX(-13px) scale(0.96);
}
.sidebar-compact .search-field:dir(rtl) {
  transform: translateX(8px);
}
.sidebar-compact .agent-row-avatar:dir(rtl) {
  transform: translateX(-4px);
}
.sidebar-compact .agent-row-copy:dir(rtl) {
  transform: translateX(8px);
}
.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);
}
.sidebar {
  --agent-avatar-outline: 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);
}
.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-button[aria-expanded="true"], .composer-attachment > button: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 {
  --agent-avatar-outline: var(--openbot-bg-control);
  background: var(--openbot-bg-control);
}
@media (hover: hover) and (pointer: fine) and (min-width: 601px) {
  .agent-row:hover {
    --agent-avatar-outline: var(--openbot-bg-control-hover);
  }
}
.agent-list[data-sidebar-dragging] .agent-row:hover {
  --agent-avatar-outline: inherit;
  background: transparent;
}
.agent-list[data-sidebar-dragging] .agent-row.agent-row-active, .agent-list[data-sidebar-dragging] .agent-row.agent-row-active:hover {
  --agent-avatar-outline: var(--openbot-bg-surface);
  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);
}
.composer-mention-token, .remote-desktop-empty-mark {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-secondary);
}
.server-rail-muted {
  position: absolute;
  inset-inline-end: 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;
}
.sidebar-history-button > svg:dir(rtl) {
  transform: scaleX(-1);
}
.agent-row-agent-status-working {
  width: 30px;
  height: 16px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface);
  box-shadow: none;
}
.agent-row-agent-status-working .agent-row-thinking-dots {
  align-items: flex-end;
  gap: 1px;
  height: 7px;
}
.agent-row-agent-status-working .agent-row-thinking-dots i {
  width: 7px;
  height: 7px;
  border-radius: var(--openbot-radius-pill);
  background: url("/@fs/home/ubuntu/openbot/packages/ui/src/assets/plush/ball-lilac.webp") center / contain no-repeat;
  transform-origin: 50% 100%;
  animation: none;
}
.agent-row-agent-status-working .agent-row-thinking-dots i:nth-child(2) {
  background-image: url("/@fs/home/ubuntu/openbot/packages/ui/src/assets/plush/ball-mint.webp");
}
.agent-row-agent-status-working .agent-row-thinking-dots i:nth-child(3) {
  background-image: url("/@fs/home/ubuntu/openbot/packages/ui/src/assets/plush/ball-pink.webp");
}
@media (prefers-reduced-motion: no-preference) {
  .agent-row-agent-status-working .agent-row-thinking-dots i {
    animation: agent-row-ball-hop 960ms cubic-bezier(0.5, 0, 0.5, 1) infinite;
  }
  .agent-row-agent-status-working .agent-row-thinking-dots i:nth-child(2) {
    animation-delay: 130ms;
  }
  .agent-row-agent-status-working .agent-row-thinking-dots i:nth-child(3) {
    animation-delay: 260ms;
  }
}
@keyframes agent-row-ball-hop {
  0%, 62%, 100% {
    translate: 0 0;
    scale: 1 1;
  }
  8% {
    scale: 1.1 0.9;
  }
  26% {
    translate: 0 -1.75px;
    scale: 0.94 1.06;
  }
  44% {
    translate: 0 0;
    scale: 1.08 0.92;
  }
  54% {
    scale: 0.98 1.02;
  }
}
.agent-row-agent-status:is( .agent-row-agent-status-unread, .agent-row-agent-status-routine-failed, .agent-row-agent-status-waiting ) {
  --sidebar-felt-ring: var(--agent-avatar-outline, var(--openbot-bg-sidebar));
  --sidebar-felt-ring-width: 3.5px;
  --sidebar-felt-ring-border: 3px;
  --sidebar-felt-box: 16px;
  inset-inline-end: calc(-3px - var(--sidebar-felt-ring-border));
  bottom: calc(-1px - var(--sidebar-felt-ring-border));
  box-sizing: border-box;
  min-width: calc(var(--sidebar-felt-box) + 2 * var(--sidebar-felt-ring-border));
  height: calc(var(--sidebar-felt-box) + 2 * var(--sidebar-felt-ring-border));
  isolation: isolate;
  border: var(--sidebar-felt-ring-border) solid var(--sidebar-felt-ring);
  border-radius: var(--openbot-radius-pill);
  background: var(--sidebar-felt-under) padding-box;
  box-shadow: 0 0 0 calc(var(--sidebar-felt-ring-width) - var(--sidebar-felt-ring-border)) var(--sidebar-felt-ring);
}
.agent-row-agent-status-unread {
  --sidebar-felt-under: linear-gradient(to bottom, var(--openbot-felt-plum-top), var(--openbot-felt-plum-bottom));
  --felt-box: var(--sidebar-felt-box);
  overflow: clip;
  padding: 0 3px;
  color: var(--openbot-felt-cream);
  font-size: var(--openbot-text-lg);
  line-height: 16px;
}
.agent-row-unread-count {
  position: relative;
  margin-inline-end: -0.06em;
  letter-spacing: 0.06em;
}
.agent-row-agent-status.agent-row-agent-status-routine-failed {
  --sidebar-felt-under: linear-gradient(
    to bottom,
    var(--openbot-felt-raspberry-top),
    var(--openbot-felt-raspberry-bottom)
  );
  inset-inline-end: calc(-1px - var(--sidebar-felt-ring-border));
  bottom: calc(1px - var(--sidebar-felt-ring-border));
  width: calc(var(--sidebar-felt-box) + 2 * var(--sidebar-felt-ring-border));
}
.agent-row-agent-status-routine-failed::before {
  position: absolute;
  z-index: -1;
  inset: -0.75px;
  background: url("/@fs/home/ubuntu/openbot/packages/ui/src/assets/plush/felt-x-ball.webp") center / 100% 100% no-repeat;
  clip-path: circle(calc(50% - 1px));
  content: "";
}
.agent-row-agent-status-routine-failed svg {
  display: none;
}
.agent-row-agent-status.agent-row-agent-status-waiting {
  --sidebar-felt-box: 18px;
  --sidebar-felt-under: linear-gradient(to bottom, var(--openbot-felt-amber-top), var(--openbot-felt-amber-bottom));
  --felt-box: var(--sidebar-felt-box);
  width: calc(var(--sidebar-felt-box) + 2 * var(--sidebar-felt-ring-border));
  color: var(--openbot-felt-cream);
}
.agent-row-agent-status-waiting svg {
  width: 12px;
  height: 12px;
  stroke-width: 2.75;
}
.agent-row-agent-status:is( .agent-row-agent-status-unread, .agent-row-agent-status-routine-failed, .agent-row-agent-status-waiting ) {
  transform-origin: 50% 100%;
}
.agent-row-unread-count.agent-row-unread-count-old {
  position: absolute;
  inset: 0;
  display: grid;
  margin: 0;
  place-items: center;
}
.agent-row-unread-count.agent-row-unread-count-roll-gone {
  visibility: hidden;
}
@media (prefers-reduced-motion: no-preference) {
  .agent-row-agent-status:is( .agent-row-agent-status-unread, .agent-row-agent-status-routine-failed, .agent-row-agent-status-waiting ).agent-row-agent-status-entering {
    animation: sidebar-felt-in var(--openbot-duration-slow) cubic-bezier(0.2, 0, 0, 1) both;
  }
  .agent-row-agent-status-unread.agent-row-agent-status-bumping {
    animation: sidebar-felt-bump 360ms ease-out;
  }
  .agent-row-agent-status-unread.agent-row-agent-status-bumping-b {
    animation: sidebar-felt-bump-b 360ms ease-out;
  }
  .agent-row-agent-status:is( .agent-row-agent-status-unread, .agent-row-agent-status-routine-failed ).agent-row-agent-status-leaving {
    animation: sidebar-felt-out var(--openbot-duration-overlay) cubic-bezier(0.5, 0, 0.75, 0) both;
  }
  .agent-row-unread-count.agent-row-unread-count-roll-in {
    animation: sidebar-felt-roll-in 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .agent-row-unread-count.agent-row-unread-count-roll-in-b {
    animation: sidebar-felt-roll-in-b 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .agent-row-unread-count.agent-row-unread-count-roll-out {
    animation: sidebar-felt-roll-out 200ms ease-in both;
  }
  .agent-row-unread-count.agent-row-unread-count-roll-out-b {
    animation: sidebar-felt-roll-out-b 200ms ease-in both;
  }
}
@keyframes sidebar-felt-in {
  from {
    opacity: 0;
    scale: 0.7;
  }
}
@keyframes sidebar-felt-bump {
  35% {
    scale: 1.12 0.88;
  }
  65% {
    scale: 0.97 1.04;
  }
}
@keyframes sidebar-felt-bump-b {
  35% {
    scale: 1.12 0.88;
  }
  65% {
    scale: 0.97 1.04;
  }
}
@keyframes sidebar-felt-out {
  30% {
    scale: 1.1 0.9;
  }
  100% {
    opacity: 0;
    scale: 0.2;
  }
}
@keyframes sidebar-felt-roll-in {
  from {
    opacity: 0;
    translate: 0 65%;
  }
}
@keyframes sidebar-felt-roll-in-b {
  from {
    opacity: 0;
    translate: 0 65%;
  }
}
@keyframes sidebar-felt-roll-out {
  to {
    opacity: 0;
    translate: 0 -65%;
  }
}
@keyframes sidebar-felt-roll-out-b {
  to {
    opacity: 0;
    translate: 0 -65%;
  }
}
.sidebar-plush-ring-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}
.agent-dock {
  --agent-dock-fill: var(--window-solid-frame, var(--openbot-bg-frame));
  --agent-avatar-outline: var(--agent-dock-fill);
  --agent-row-avatar-size: 40px;
  position: fixed;
  z-index: var(--openbot-layer-dropdown);
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  translate: var(--agent-dock-tuck, 0px) 0;
  pointer-events: none;
}
.agent-dock[data-side="left"] {
  right: auto;
  left: 0;
  transform: translateY(-50%) scaleX(-1);
  translate: calc(-1 * var(--agent-dock-tuck, 0px)) 0;
}
.agent-dock-hit {
  position: absolute;
  pointer-events: auto;
}
.agent-dock-handle {
  position: absolute;
  top: -40px;
  left: -40px;
  overflow: visible;
  fill: none;
}
.agent-dock:not([data-draggable]) .agent-dock-handle {
  display: none;
}
.agent-dock-handle-arc {
  stroke: var(--agent-dock-fill);
  stroke-linecap: round;
  transition: stroke-width var(--openbot-duration-normal) var(--openbot-ease-out), translate var(--openbot-duration-normal) var(--openbot-ease-out);
}
.agent-dock-handle:has(.agent-dock-handle-hit:hover) .agent-dock-handle-arc {
  stroke-width: 5.5px;
  translate: 0 -2px;
}
.agent-dock[data-dragging] .agent-dock-handle .agent-dock-handle-arc {
  stroke-width: 6px;
  translate: 0 -3px;
}
.agent-dock-handle-hit {
  stroke: var(--openbot-transparent);
  stroke-linecap: round;
  pointer-events: stroke;
  cursor: grab;
}
.agent-dock-handle-hit:active {
  cursor: grabbing;
}
.agent-dock-filter {
  position: absolute;
}
.agent-dock-liquid {
  position: absolute;
  inset: -40px -60px -40px -40px;
}
.agent-dock-liquid > * {
  position: absolute;
  background: var(--agent-dock-fill);
}
.agent-dock-liquid > .agent-dock-shapes {
  top: 0;
  left: 0;
  overflow: visible;
  background: var(--openbot-transparent);
  fill: var(--agent-dock-fill);
}
.agent-dock-edge {
  position: absolute;
  top: -40px;
  left: -40px;
  overflow: visible;
  fill: var(--agent-dock-fill);
}
.agent-dock-panel-body {
  margin-left: 40px;
  margin-top: 40px;
  opacity: 0;
}
.agent-dock-drop {
  top: 40px;
  left: 40px;
  width: 44px;
  height: 44px;
  border-radius: var(--openbot-radius-pill);
  transform: scale(0);
}
.agent-dock-seats {
  position: absolute;
  inset: 0;
}
.agent-dock-seat {
  position: absolute;
  top: 0;
  width: 44px;
  height: 44px;
  pointer-events: auto;
  transform-origin: 50% 50%;
}
.agent-dock-seat-scroll {
  position: absolute;
  top: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  pointer-events: auto;
  scrollbar-width: none;
  --agent-dock-seat-fade-top: 0px;
  --agent-dock-seat-fade-bottom: 0px;
}
.agent-dock-seat-scroll::-webkit-scrollbar {
  display: none;
}
.agent-dock-seat-list {
  position: relative;
  overflow: clip;
}
.agent-dock-seats .agent-dock-seat-scroll:is(.scroll-fade-top, .scroll-fade-bottom) {
  -webkit-mask-image: linear-gradient( to bottom, transparent, var(--openbot-text-primary) var(--agent-dock-seat-fade-top), var(--openbot-text-primary) calc(100% - var(--agent-dock-seat-fade-bottom)), transparent );
  mask-image: linear-gradient( to bottom, transparent, var(--openbot-text-primary) var(--agent-dock-seat-fade-top), var(--openbot-text-primary) calc(100% - var(--agent-dock-seat-fade-bottom)), transparent );
}
.agent-dock-seat-scroll.scroll-fade-top {
  --agent-dock-seat-fade-top: var(--agent-dock-seat-fade);
}
.agent-dock-seat-scroll.scroll-fade-bottom {
  --agent-dock-seat-fade-bottom: var(--agent-dock-seat-fade);
}
.agent-dock-seat-button {
  position: relative;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  padding: 0;
  background: var(--openbot-transparent);
  color: var(--openbot-text-muted);
  cursor: pointer;
  transition: color var(--openbot-duration-normal) var(--openbot-ease-out), transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.agent-dock-seat-button * {
  pointer-events: none;
}
.agent-dock-seat-button:hover {
  color: var(--openbot-text-primary);
  transform: scale(1.06);
}
.agent-dock-seat-button:active {
  transform: scale(0.92);
}
.agent-dock-seat-button:focus-visible {
  outline: 1px solid var(--openbot-border-focus);
  outline-offset: 2px;
}
.agent-dock-seat-button[data-open] {
  transform: scale(1.12);
}
.agent-dock-seat[data-dragging] {
  z-index: 1;
}
.agent-dock-seat[data-dragging] .agent-dock-seat-button {
  color: var(--openbot-text-primary);
  cursor: grabbing;
  transform: scale(1.12);
}
.agent-dock-seat-button .agent-avatar {
  --agent-avatar-optical-offset: calc(40px * -0.14);
  width: 40px;
  height: 40px;
}
.agent-dock-seat-button .agent-row-agent-status {
  border-color: var(--agent-dock-fill);
}
.agent-dock-add svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.agent-dock-add-menu.ui-action-menu {
  display: flex;
  max-height: min(560px, calc(100dvh - 16px), var(--kb-popper-content-available-height, 560px));
  flex-direction: column;
}
.agent-dock-add-menu-search.ui-action-menu {
  width: 232px;
}
.agent-dock-add-list {
  min-height: 0;
  flex: 1 1 auto;
  margin-inline: calc(var(--ui-menu-padding) * -1);
  padding-inline: var(--ui-menu-padding);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.agent-dock-add-list > [role="menuitem"] {
  overflow-y: clip;
}
.agent-dock-add-list::-webkit-scrollbar {
  display: none;
}
.agent-dock-add-list > hr {
  height: 1px;
  margin: var(--ui-menu-padding) calc(var(--ui-menu-padding) * -1);
  border: 0;
  background: var(--openbot-border);
}
.agent-dock-add-search {
  margin: calc(var(--ui-menu-padding) * -1) calc(var(--ui-menu-padding) * -1) var(--openbot-space-1);
}
.agent-dock-add-search .agent-dock-add-search-input {
  border: 0;
  background: transparent;
  box-shadow: none;
}
.agent-dock-add-search .agent-dock-add-search-input:focus-visible {
  outline: none;
  box-shadow: none;
}
.agent-dock-menu-avatar.agent-avatar {
  width: 20px;
  height: 20px;
}
.agent-dock-menu-channel {
  display: inline-flex;
}
.agent-dock-menu-channel .channel-avatar-cluster {
  --channel-avatar-size: 20px;
  --agent-avatar-outline-width: 1px;
}
.agent-dock-panel {
  position: absolute;
  top: 0;
  color: var(--openbot-text-primary);
  opacity: 0;
  transform-origin: 100% 50%;
}
.agent-dock-panel[data-open] {
  pointer-events: auto;
}
.agent-dock-chat {
  display: flex;
  height: 100%;
  flex-direction: column;
  animation: agent-dock-swap var(--openbot-duration-island-content) var(--openbot-ease-out);
}
@keyframes agent-dock-swap {
  from {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(8px);
  }
}
.agent-dock-chat-header {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-3) var(--openbot-space-3) var(--openbot-space-2) var(--openbot-space-4);
}
.agent-dock-chat-avatar.agent-avatar {
  --agent-avatar-optical-offset: calc(34px * -0.14);
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
}
.agent-dock-chat-channel {
  display: inline-flex;
  flex: 0 0 auto;
}
.agent-dock-chat-channel .channel-avatar-cluster {
  --channel-avatar-size: 34px;
}
.agent-dock-chat-title {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  line-height: var(--openbot-leading-sm);
}
.agent-dock-chat-title strong {
  overflow: hidden;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-dock-chat-title span {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-dock-icon {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  padding: 0;
  background: var(--openbot-transparent);
  color: var(--openbot-text-muted);
  cursor: pointer;
}
.agent-dock-icon:hover {
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-primary);
}
.agent-dock-icon svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.agent-dock-log {
  position: relative;
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}
.agent-dock-messages {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  padding: var(--openbot-space-2) var(--openbot-space-4) var(--openbot-space-3);
  scrollbar-width: none;
  --agent-dock-fade-top: 0px;
  --agent-dock-fade-bottom: 0px;
}
.agent-dock-messages::-webkit-scrollbar {
  display: none;
}
.agent-dock-messages-content {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  gap: var(--openbot-space-2);
}
.agent-dock-scroll-thumb {
  position: absolute;
  top: 0;
  right: 3px;
  width: 3px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-muted);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.agent-dock-scroll-thumb[data-scrollable][data-shown] {
  opacity: 0.5;
}
.agent-dock-chat .agent-dock-messages:is(.scroll-fade-top, .scroll-fade-bottom) {
  -webkit-mask-image: linear-gradient( to bottom, transparent, var(--openbot-text-primary) var(--agent-dock-fade-top), var(--openbot-text-primary) calc(100% - var(--agent-dock-fade-bottom)), transparent );
  mask-image: linear-gradient( to bottom, transparent, var(--openbot-text-primary) var(--agent-dock-fade-top), var(--openbot-text-primary) calc(100% - var(--agent-dock-fade-bottom)), transparent );
}
.agent-dock-messages.scroll-fade-top {
  --agent-dock-fade-top: 32px;
}
.agent-dock-messages.scroll-fade-bottom {
  --agent-dock-fade-bottom: 32px;
}
.agent-dock-empty {
  margin: auto 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  text-align: center;
}
.agent-dock-bubble {
  max-width: 85%;
  flex: none;
  font-size: var(--openbot-text-md);
  overflow-wrap: anywhere;
}
.agent-dock-bubble[data-pending] {
  opacity: 0.6;
}
.agent-dock-bubble[data-error] {
  color: var(--openbot-danger-text);
}
.agent-dock-author {
  display: block;
  margin-block-end: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: 500;
}
.agent-dock-text {
  margin: 0;
  white-space: pre-wrap;
}
.agent-dock-markdown {
  min-width: 0;
  font-size: var(--openbot-text-md);
}
.agent-dock-typing {
  display: flex;
  padding-block: var(--openbot-space-1);
}
.agent-dock-typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.agent-dock-typing-dots i {
  width: 6px;
  height: 6px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-muted);
  animation: agent-dock-dot 1s var(--openbot-ease-in-out) infinite;
}
.agent-dock-typing-dots i:nth-child(2) {
  animation-delay: 0.15s;
}
.agent-dock-typing-dots i:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes agent-dock-dot {
  50% {
    opacity: 0.3;
    transform: translateY(-3px);
  }
}
.agent-dock-sr {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  white-space: nowrap;
}
.agent-dock-wait {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin: 0 var(--openbot-space-3);
  border-radius: var(--openbot-radius-lg);
  padding: var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-3);
  background: var(--openbot-bg-surface);
  font-size: var(--openbot-text-sm);
}
.agent-dock-wait-icon {
  display: grid;
  flex: none;
  place-items: center;
  color: var(--openbot-text-muted);
}
.agent-dock-wait-icon svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.agent-dock-wait-title {
  min-width: 0;
  flex: 1;
}
.agent-dock-error {
  margin: var(--openbot-space-2) var(--openbot-space-4) 0;
  color: var(--openbot-danger-text);
  font-size: var(--openbot-text-sm);
}
.agent-dock-composer-wrap.composer-wrap {
  --composer-editor-limit: initial;
  padding: 0;
}
.agent-dock-composer-wrap .mention-picker {
  --mention-picker-side-inset: calc(var(--openbot-space-3) + 12px);
}
.agent-dock-composer.composer[data-compact] {
  grid-template-columns: minmax(0, 1fr) auto;
  margin: var(--openbot-space-2) var(--openbot-space-3) var(--openbot-space-3);
}
.agent-dock-composer.composer[data-compact]:focus-within {
  box-shadow: none;
}
.agent-dock-composer.composer[data-compact] > .composer-input-label {
  grid-column: 1;
}
.agent-dock-shelf {
  --agent-dock-shelf-toward: 1;
  position: absolute;
  display: grid;
  justify-items: end;
  gap: var(--openbot-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.agent-dock-shelf[hidden] {
  display: none;
}
.agent-dock-shelf-item {
  animation: agent-dock-shelf-drip 560ms cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
  transition: opacity var(--openbot-duration-normal) ease-out, translate var(--openbot-duration-normal) ease-out;
}
.agent-dock-shelf-item[data-leaving] {
  opacity: 0;
  translate: calc(var(--agent-dock-shelf-toward) * 24px) 0;
}
@keyframes agent-dock-shelf-drip {
  from {
    opacity: 0;
    scale: 0.6;
    translate: calc(var(--agent-dock-shelf-toward) * 32px) 0;
  }
}
.agent-dock-shelf :is(.agent-dock-result, .agent-dock-shelf-more) {
  gap: 0;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  background: var(--agent-dock-fill);
  font: inherit;
  font-size: var(--openbot-text-sm);
  white-space: nowrap;
  pointer-events: auto;
  cursor: pointer;
}
.agent-dock-shelf :is(.agent-dock-result, .agent-dock-shelf-more):focus-visible {
  outline: 1px solid var(--openbot-border-focus);
  outline-offset: 2px;
  box-shadow: none;
}
.agent-dock-shelf :is(.agent-dock-result, .agent-dock-shelf-more):hover:not(:disabled) {
  background: var(--agent-dock-fill);
}
.agent-dock-result {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 var(--openbot-space-4) 0 var(--openbot-space-1);
  color: var(--openbot-text-primary);
  transition: translate var(--openbot-duration-normal) cubic-bezier(0.34, 1.56, 0.64, 1);
}
.agent-dock-result:hover {
  translate: calc(var(--agent-dock-shelf-toward) * -4px) 0;
}
.agent-dock-result .agent-avatar {
  --agent-avatar-optical-offset: calc(32px * -0.14);
  flex: none;
  width: 32px;
  height: 32px;
}
.agent-dock-result > svg {
  flex: none;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  margin-left: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
}
.agent-dock-result-label {
  max-width: 240px;
  overflow: hidden;
  margin-left: var(--openbot-space-2);
  font-weight: var(--openbot-weight-medium);
  text-overflow: ellipsis;
}
.agent-dock-shelf-more {
  height: 28px;
  padding: 0 var(--openbot-space-3);
  color: var(--openbot-text-secondary);
  font-variant-numeric: tabular-nums;
}
.agent-dock-shelf-more:hover {
  color: var(--openbot-text-primary);
}
.agent-dock[data-side="left"] .agent-dock-seat, .agent-dock[data-side="left"] .agent-dock-panel {
  scale: -1 1;
}
.agent-dock[data-side="left"] .agent-dock-panel {
  transform-origin: 50% 50%;
}
.agent-dock[data-side="left"] .agent-dock-shelf {
  --agent-dock-shelf-toward: -1;
  justify-items: start;
  scale: -1 1;
}
.agent-dock[data-ambient-motion="paused"] :is(.ui-spinner, .agent-row-thinking-dots i) {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .agent-dock-handle-arc, .agent-dock-scroll-thumb {
    transition: none;
  }
  .agent-dock-chat, .agent-dock-typing-dots i {
    animation: none;
  }
  .agent-dock-seat-button, .agent-dock-result {
    transition: none;
  }
  .agent-dock-shelf-item {
    animation: none;
  }
}
:root[data-surface="agent-dock"], :root[data-surface="agent-dock"] body, :root[data-surface="agent-dock"] #root {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
}
:root[data-surface="agent-dock"] .agent-dock {
  right: -5px;
}
.agent-dock-seat-button .channel-avatar-cluster .agent-avatar, .agent-dock-chat-channel .channel-avatar-cluster .agent-avatar, .agent-dock-menu-channel .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);
}
.agent-dock-strip {
  --agent-dock-strip-near: 0;
  position: fixed;
  z-index: calc(var(--openbot-layer-dropdown) - 1);
  top: 50%;
  right: 0;
  width: calc(var(--agent-dock-strip-width) + 22px * var(--agent-dock-strip-near));
  height: calc( var(--agent-dock-strip-height, 240px) * (var(--agent-dock-strip-rest) + (1 - var(--agent-dock-strip-rest)) * var(--agent-dock-strip-near)) );
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--openbot-radius-pill) 0 0 var(--openbot-radius-pill);
  background: var(--window-solid-frame, var(--openbot-bg-frame));
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
  transition: width var(--openbot-duration-fast) var(--openbot-ease-out), height var(--openbot-duration-fast) var(--openbot-ease-out), opacity var(--openbot-duration-fast) var(--openbot-ease-out) var(--openbot-duration-fast);
}
.agent-dock-strip[data-side="left"] {
  right: auto;
  left: 0;
  border-radius: 0 var(--openbot-radius-pill) var(--openbot-radius-pill) 0;
}
.agent-dock-strip[data-shown] {
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
  transition: width var(--openbot-duration-fast) var(--openbot-ease-out), height var(--openbot-duration-fast) var(--openbot-ease-out), opacity var(--openbot-duration-fast) var(--openbot-ease-out) var(--openbot-duration-normal);
}
.agent-dock-strip:hover:not(:disabled):not([data-disabled]) {
  background: var(--window-solid-frame, var(--openbot-bg-frame));
}
.agent-dock-strip:focus-visible {
  outline: 1px solid var(--openbot-border-focus);
  outline-offset: 1px;
  box-shadow: none;
}
.agent-dock-strip::after {
  position: absolute;
  inset: 0 -4px;
  content: "";
  background: var(--openbot-wash-front);
  opacity: 0;
  pointer-events: none;
  translate: 0 110%;
  transition: opacity var(--openbot-duration-normal) var(--openbot-ease-out);
}
.agent-dock-strip[data-asks]::after {
  opacity: 1;
}
.agent-dock-strip[data-asks][data-wave]::after {
  animation: agent-dock-strip-wave 2.24s cubic-bezier(0.45, 0, 0.25, 1) 2;
}
@keyframes agent-dock-strip-wave {
  0% {
    translate: 0 105%;
  }
  100% {
    translate: 0 -105%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .agent-dock-strip[data-asks]::after, .agent-dock-strip[data-asks][data-wave]::after {
    animation: none;
    translate: 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-block: 0;
  padding-inline: var(--openbot-space-2) var(--openbot-space-3);
  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: start;
}
.account-update-island__progress-value {
  display: inline-grid;
  align-items: baseline;
  grid-template-columns: 3ch max-content;
  direction: ltr;
  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-block: var(--openbot-space-1-5);
  padding-inline: var(--openbot-space-3) var(--openbot-space-1-5);
}
.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);
}
.join-server-close {
  position: absolute;
  top: var(--openbot-space-6);
  inset-inline-end: 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);
    inset-inline-end: 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-dialog:has(.add-server-other) .add-server-intro .ui-heading {
  padding-inline: 160px;
}
.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%;
  inset-inline-start: 0;
  width: auto;
  flex: 0 0 auto;
  transform: translateY(-50%);
}
.hosted-currency-locked {
  display: inline-flex;
  align-items: center;
  height: var(--openbot-control-md);
  padding-inline: 10px;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.add-server-bar[data-license] {
  justify-content: flex-end;
  padding-inline: 0;
}
.add-server-bar[data-license] .hosted-use {
  margin-inline-end: auto;
}
.add-server-bar[data-license] .hosted-currency {
  position: static;
  transform: none;
}
.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;
  inset-inline-start: 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, .hosted-billing[data-use="work"]::before {
  transform: translateX(100%);
}
.hosted-billing:dir(rtl):is([data-billing="yearly"], [data-use="work"])::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;
}
.add-server-bar[data-license] .hosted-billing-save {
  font-variant-numeric: tabular-nums;
}
.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-inline-start: 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-inline-end: 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-inline-start: 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-bundle {
  padding: 0 var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success-soft);
  color: var(--openbot-success-text);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-md);
  white-space: nowrap;
}
.hosted-plan-summary[data-license] {
  display: flex;
  align-items: baseline;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}
.hosted-plan-summary svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  translate: 0 calc((var(--openbot-icon-sm) - 1cap) / 2);
  color: var(--openbot-success-text);
}
.hosted-plans[data-license] .hosted-plan-summary {
  min-height: 2lh;
}
.hosted-plans[data-license] .hosted-plan-price {
  position: relative;
}
.hosted-plan-longest {
  position: absolute;
  inset: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  visibility: hidden;
  pointer-events: none;
}
.hosted-plans[data-stacked] .hosted-plan-price > .hosted-plan-was[data-shown] {
  flex-basis: 100%;
}
.hosted-plans[data-license] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.hosted-license-people {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3) var(--openbot-space-6);
  border: 1px solid var(--openbot-border);
  border-top: 0;
  border-radius: 0 0 var(--openbot-radius-card) var(--openbot-radius-card);
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  transition: color var(--openbot-duration-normal) var(--openbot-ease-out);
}
.hosted-license-people[data-disabled] {
  color: var(--openbot-text-muted);
}
.hosted-license-people > span {
  white-space: nowrap;
}
.hosted-license-stepper {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin: 0;
  padding: 0;
  border: 0;
  font-variant-numeric: tabular-nums;
}
.hosted-license-stepper > span {
  min-width: 11ch;
  text-align: center;
  white-space: nowrap;
}
.hosted-license-stepper .ui-icon-button {
  border-radius: var(--openbot-radius-pill);
}
.hosted-plan-choose.ui-button {
  margin-top: auto;
}
.hosted-plans[data-license] .hosted-plan-choose.ui-button {
  margin-top: 0;
}
.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-other {
  position: absolute;
  top: var(--openbot-space-6);
  inset-inline-start: var(--openbot-space-6);
  z-index: 2;
}
.add-server-other .ui-button {
  color: var(--openbot-text-muted);
}
.ui-action-menu.add-server-other-menu {
  z-index: calc(var(--openbot-layer-dialog) + 1);
}
.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-inline-start: 0;
  }
}
@media (max-width: 560px) {
  .add-server-intro .ui-heading {
    font-size: var(--openbot-text-2xl);
    line-height: var(--openbot-leading-2xl);
  }
  .add-server-dialog:has(.add-server-other) .add-server-intro {
    padding-top: calc(var(--openbot-control-md) + var(--openbot-space-1));
  }
  .add-server-dialog:has(.add-server-other) .add-server-intro .ui-heading {
    padding-inline: 0;
  }
  .add-server-other {
    top: var(--openbot-space-3);
    inset-inline-start: var(--openbot-space-3);
  }
  .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-bar[data-license] {
    flex-wrap: wrap;
    padding-top: 0;
  }
  .add-server-bar[data-license] .hosted-billing:not(.hosted-use) {
    flex: 1 1 100%;
  }
  .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, .hosted-license-people, .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;
  }
}
.create-local-server-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: create-local-server-dialog-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}
.create-local-server-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--openbot-space-1);
}
.create-local-server-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);
}
.create-local-server-description {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.create-local-server-form {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
  margin: var(--openbot-space-4) 0 0;
}
.create-local-server-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
}
@keyframes create-local-server-dialog-in {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
}
.install-server-dialog.join-server-dialog {
  width: min(560px, 100%);
}
.install-server-page {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--openbot-space-4) + var(--openbot-space-1));
}
.install-server-block {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
}
.install-server-block[data-expired] .message-code-block pre {
  opacity: 0.5;
}
.install-server-code-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.install-server-status, .install-server-placeholder {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  min-height: var(--openbot-control-sm);
}
.install-server-placeholder {
  flex-direction: column;
  justify-content: center;
  min-height: 120px;
  text-align: center;
}
.install-server-status svg, .install-server-placeholder svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
.install-server-spin {
  color: var(--openbot-text-muted);
  animation: install-server-spin 1s linear infinite;
}
.install-server-ok {
  color: var(--openbot-success);
}
.install-server-warning {
  color: var(--openbot-warning);
}
.install-server-danger {
  color: var(--openbot-danger);
}
@keyframes install-server-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .install-server-spin {
    animation: none;
  }
}
.hosted-upsell-notice {
  flex: none;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  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 {
  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;
}
.server-upgrade-modal {
  width: min(480px, 100%);
}
.server-upgrade-meter {
  display: grid;
  gap: var(--openbot-space-1-5);
  margin: var(--openbot-space-1) 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.server-upgrade-meter .ui-progress-fill {
  background: var(--openbot-warning);
}
.server-upgrade-meter[data-level="full"] .ui-progress-fill {
  background: var(--openbot-danger);
}
.server-upgrade-compare {
  width: 100%;
  margin-top: var(--openbot-space-2);
  border-collapse: collapse;
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
.server-upgrade-compare th, .server-upgrade-compare td {
  padding: var(--openbot-space-2) 0;
  border-bottom: 1px solid var(--openbot-border);
  text-align: start;
}
.server-upgrade-compare thead th {
  color: var(--openbot-text-muted);
  font-weight: var(--openbot-weight-medium);
}
.server-upgrade-compare tbody th {
  color: var(--openbot-text-secondary);
  font-weight: var(--openbot-weight-regular);
}
.server-upgrade-compare tbody td:last-child {
  font-weight: var(--openbot-weight-semibold);
}
.server-upgrade-compare tbody tr:last-child > * {
  border-bottom: 0;
}
.server-upgrade-error {
  margin: 0;
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
}
.server-upgrade-modal .hosted-upsell-modal-actions {
  flex-wrap: wrap;
}
.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-roles-icon {
  color: var(--openbot-text-secondary);
}
.server-roles-member-count {
  min-width: 72px;
  text-align: end;
}
.server-roles-level {
  min-width: 128px;
}
.server-roles-agent-level {
  min-width: 176px;
}
.server-roles-name-row {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.server-roles-member-trigger {
  max-width: 240px;
}
.server-roles-member-summary {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:is(.server-roles-create, .server-roles-member-trigger) > svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}
.server-roles-level-source {
  color: var(--openbot-text-secondary);
}
.server-roles-level-menu {
  min-width: 176px;
}
.server-roles-level-menu .server-roles-open-everyone {
  margin-top: var(--openbot-space-1);
  border-top: 1px solid var(--openbot-border);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.server-audit-controls {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.server-audit-time {
  white-space: nowrap;
}
.server-audit-row .server-audit-title {
  color: var(--openbot-text-secondary);
  font-weight: var(--openbot-weight-regular);
}
.server-audit-key {
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}
.server-audit-key[data-level="none"] {
  color: var(--openbot-danger);
}
.server-audit-key[data-level="chat"] {
  color: var(--openbot-success);
}
.server-audit-key[data-level="manage"] {
  color: var(--openbot-warning);
}
.server-audit-arrow svg {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-inline: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  vertical-align: -2px;
}
.server-audit-arrow svg:dir(rtl) {
  transform: scaleX(-1);
}
.server-audit-mark {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: var(--openbot-radius-md);
}
.server-audit-mark svg {
  width: 16px;
  height: 16px;
}
.server-audit-mark[data-tone="success"] {
  background: var(--openbot-success-soft);
  color: var(--openbot-success);
}
.server-audit-mark[data-tone="danger"] {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
}
.server-audit-mark[data-tone="accent"] {
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
}
.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;
  inset-inline-end: 0;
  bottom: 0;
  display: flex;
  width: var(--settings-panel-width, 360px);
  flex-direction: column;
  border-inline-start: 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:dir(rtl) {
  animation-name: settings-panel-in-rtl;
}
@keyframes settings-panel-in-rtl {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.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-back-icon:dir(rtl) {
  transform: scaleX(-1) translateX(-0.5px);
}
.settings-forward-icon:dir(rtl), .settings-link-value > svg[class~="lucide-chevron-right"]:dir(rtl) {
  transform: scaleX(-1);
}
.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-block: 0 6px;
  margin-inline: 8px 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  line-height: 18px;
}
.settings-field > .ui-field-limit {
  display: grid;
  margin-block: var(--openbot-space-1-5) 0;
  margin-inline: var(--openbot-space-2) 0;
}
.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: none;
  resize: none;
}
.settings-field .settings-description-input {
  height: 72px;
  min-height: 72px;
}
.agent-instructions-bar {
  position: sticky;
  z-index: 1;
  top: calc(var(--openbot-space-6) * -1);
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-top: calc(var(--openbot-space-6) * -1);
  border-bottom: 1px solid var(--openbot-border);
  background: var(--openbot-bg-canvas);
  padding: var(--openbot-space-6) 0 var(--openbot-space-3);
}
.agent-instructions-bar-icon {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  flex: none;
  color: var(--openbot-text-muted);
  stroke-width: var(--openbot-icon-stroke-lg);
}
.agent-instructions-bar-file {
  display: grid;
  min-width: 0;
  flex: 1;
}
.agent-instructions-bar-name {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.agent-instructions-bar-folder {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  overflow-wrap: anywhere;
  user-select: text;
}
.agent-instructions-text {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-lg);
  overflow-wrap: anywhere;
}
.agent-instructions-text .message-markdown-heading[data-level] {
  margin: var(--openbot-space-6) 0 var(--openbot-space-1-5);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-md);
}
.agent-instructions-text .message-markdown-heading[data-level="1"] {
  font-size: var(--openbot-text-xl);
  line-height: var(--openbot-leading-2xl);
}
.agent-instructions-text > .message-markdown-heading:first-child {
  margin-top: 0;
}
.agent-instructions-text :is(ul, ol) {
  margin: 0;
  padding-inline-start: var(--openbot-space-4);
}
.agent-instructions-text li + li {
  margin-top: var(--openbot-space-1);
}
.agent-instructions-empty {
  margin: 0;
  color: var(--openbot-text-muted);
}
.agent-memories-field.agent-instructions-field {
  max-height: none;
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-lg);
}
.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[aria-invalid="true"], .settings-field textarea[aria-invalid="true"] {
  border-color: var(--openbot-danger);
}
.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, auto) minmax(0, max-content);
  justify-content: space-between;
  align-items: center;
  gap: var(--openbot-space-3);
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 var(--openbot-space-1);
  text-align: start;
  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;
  min-width: 0;
  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-text {
  line-height: var(--openbot-leading-md);
}
.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-block: 0;
  margin-inline: var(--openbot-space-1) 0;
  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-inline-end: 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;
  gap: var(--openbot-space-3);
  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-inline-start: 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);
  inset-inline-end: 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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_AMS-Regular.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_AMS-Regular.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Bold.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Bold.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Regular.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Regular.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Fraktur-Bold.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Fraktur-Bold.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Fraktur-Regular.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Fraktur-Regular.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Main-Bold.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Main-Bold.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Main-BoldItalic.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Main-BoldItalic.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Main-Italic.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Main-Italic.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Main-Regular.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Main-Regular.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Math-BoldItalic.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Math-BoldItalic.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Math-Italic.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Math-Italic.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_SansSerif-Bold.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_SansSerif-Bold.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_SansSerif-Italic.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_SansSerif-Italic.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_SansSerif-Regular.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_SansSerif-Regular.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Script-Regular.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Script-Regular.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Size1-Regular.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Size1-Regular.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Size2-Regular.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Size2-Regular.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Size3-Regular.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Size3-Regular.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Size4-Regular.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Size4-Regular.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Typewriter-Regular.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Typewriter-Regular.woff) format("woff"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Typewriter-Regular.ttf) format("truetype");
}
.katex {
  font: normal 1.21em KaTeX_Main,math,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.19.0";
}
.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-inline-end var(--panel-resize-duration, var(--openbot-duration-overlay)) cubic-bezier(0.22, 1, 0.36, 1);
  --conversation-column-width: clamp(1440px, 65vw, 1920px);
}
.conversation-panel > .conversation-scroll > :is(.virtual-chat-list, .conversation-live) {
  max-width: var(--conversation-column-width);
  margin-inline: auto;
}
.conversation-panel > .composer-wrap {
  padding-inline: max(var(--openbot-space-1-5), calc((100% - var(--conversation-column-width) - 12px) / 2));
}
.conversation-panel[data-settings-panel] > .composer-wrap {
  padding-inline: max( var(--openbot-space-1-5), calc((100% - var(--settings-panel-width, 360px) - var(--conversation-column-width) - 12px) / 2) );
}
.conversation-panel > .conversation-covered {
  position: absolute;
  inset: 0;
  visibility: hidden;
}
.conversation-panel > :is(.conversation-scroll, .composer-wrap) > * {
  contain-intrinsic-size: auto none;
}
.conversation-panel > .conversation-covered > * {
  content-visibility: hidden;
}
.conversation-panel > .composer-wrap.conversation-covered {
  top: auto;
}
.conversation-panel > .composer-wrap .mention-picker {
  --mention-picker-side-inset: max(
    calc(var(--openbot-space-1-5) + 12px),
    calc((100% - var(--conversation-column-width) + 12px) / 2)
  );
}
.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: calc(30px * -0.14);
  width: 30px;
  height: 30px;
  border-radius: var(--openbot-radius-md);
}
.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-block: 6px;
  padding-inline: 13px 7px;
  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-block: 0;
  padding-inline: 8px 12px;
  background: transparent;
}
.conversation-heading-group {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}
.chat-search {
  position: absolute;
  z-index: 13;
  top: 19px;
  inset-inline-end: 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-inline-start: 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-inline-end: 3px;
}
::highlight(openbot-chat-search-results) {
  background: var(--openbot-accent-soft);
}
::highlight(openbot-chat-search-current) {
  background: var(--openbot-warning);
  color: var(--openbot-paper-text);
}
.conversation-title[aria-label="View agent settings"]:hover {
  color: var(--openbot-text-primary);
}
.browser-panel {
  position: absolute;
  z-index: 14;
  top: 0;
  inset-inline-end: 0;
  bottom: 0;
  display: flex;
  width: var(--browser-panel-width, 380px);
  flex-direction: column;
  border-inline-start: 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-block: 0;
  padding-inline: 11px 7px;
}
.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: start;
}
.file-preview-spreadsheet-table th, .file-preview-spreadsheet-table td {
  border-top: 1px solid var(--openbot-border);
  border-inline-end: 1px solid var(--openbot-border);
  padding: 8px 12px;
  text-align: start;
  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-inline-end: 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: start;
}
.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;
}
:dir(rtl) .file-preview-panel.t-panel-slide {
  --panel-translate-x: -24px;
}
:dir(rtl) .file-preview-header svg[class~="lucide-arrow-left"] {
  transform: scaleX(-1);
}
.conversation-panel.browser-panel-active {
  padding-inline-end: 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-block: 0;
  padding-inline: 0 8px;
  background: var(--openbot-bg-sidebar);
}
.remote-desktop-workspace-darwin .remote-desktop-header {
  padding-inline-start: 84px;
}
.remote-desktop-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  flex: 0 1 auto;
  justify-content: flex-end;
  gap: 4px;
  margin-inline-start: 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-lg);
}
.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;
  inset-inline-end: 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-profile-status, .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-profile-status {
  min-width: 0;
  max-width: 240px;
  flex-shrink: 1;
  background: var(--openbot-bg-control);
  color: var(--openbot-text-secondary);
}
.browser-profile-dot {
  display: block;
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-pill);
}
.browser-profile-dot-shared {
  background: var(--openbot-text-muted);
}
.browser-profile-status-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser-profile-status svg, .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:not(:has(.agent-avatar-custom)) {
  filter: brightness(1.08);
}
.agent-settings-avatar-badge {
  position: absolute;
  inset-inline-end: -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: var(--openbot-space-2);
}
.agent-routine-list-item {
  display: grid;
  min-height: 52px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--openbot-space-3);
  align-items: center;
  padding-inline-end: var(--openbot-space-4);
}
.agent-routine-row {
  display: grid;
  width: 100%;
  height: auto;
  align-self: stretch;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: var(--openbot-space-3);
  align-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding-block: var(--openbot-space-2);
  padding-inline: var(--openbot-space-4) 0;
  text-align: start;
}
.agent-routine-row:focus-visible {
  outline: none;
}
.agent-routine-card {
  transition: background-color var(--openbot-duration-hover) ease;
}
.agent-routine-card:has(.agent-routine-row:focus-visible) {
  border-color: var(--openbot-border-strong);
}
.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: 16px;
  height: 16px;
  stroke-width: var(--openbot-icon-stroke);
}
@media (hover: hover) and (pointer: fine) {
  .agent-routine-card:has(.agent-routine-row:hover) {
    background: var(--openbot-hover);
  }
  .agent-routine-list-item > .agent-routine-row:hover:not(:disabled) {
    background: transparent;
  }
}
.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-run-in {
  padding-inline-start: var(--openbot-space-2);
}
.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-routines-footer {
  flex: none;
  padding: 0 15px 15px;
}
.agent-routines-footer:empty {
  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-field-error {
  margin-block: var(--openbot-space-1-5) 0;
  margin-inline: var(--openbot-space-2) 0;
}
.agent-routine-trigger-kind {
  display: grid;
  min-width: 0;
  grid-template-columns: 1fr 1fr;
  gap: var(--openbot-space-1);
  margin: 0 0 var(--openbot-space-2);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  padding: var(--openbot-space-0-5);
}
.agent-routine-trigger-kind-icon {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.agent-routine-when h3, .agent-routine-history h3 {
  margin-block: 0 var(--openbot-space-1-5);
  margin-inline: var(--openbot-space-2) 0;
  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: start;
}
.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-block: var(--openbot-space-2);
  padding-inline: var(--openbot-space-3) var(--openbot-space-2);
}
.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-body {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: var(--openbot-space-2);
}
.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: start;
}
.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-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);
}
.agent-memories-view {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
}
.agent-memories-view .settings-panel-header h2 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-memories-page {
  display: grid;
  width: min(100%, 680px);
  gap: var(--openbot-space-6);
  margin-inline: auto;
}
.agent-memories-page .settings-link-group, .agent-memories-page :is(.agent-memory-state, .agent-memory-limit, .agent-memory-error) {
  margin: 0;
}
.agent-memories-search {
  position: relative;
  min-width: 0;
}
.agent-memories-search-icon {
  position: absolute;
  top: 50%;
  inset-inline-start: calc(var(--openbot-space-3) + 1px);
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
  pointer-events: none;
  stroke-width: var(--openbot-icon-stroke);
  transform: translateY(-50%);
}
.agent-memories-search .agent-memories-search-input {
  width: 100%;
  height: 42px;
  padding-inline: calc(var(--openbot-space-3) + var(--openbot-icon-sm) + var(--openbot-space-2)) var(--openbot-space-3);
  border-color: var(--openbot-border);
  background: var(--openbot-bg-surface);
  font-size: var(--openbot-text-md);
}
.agent-memories-search-input::-webkit-search-cancel-button {
  display: none;
}
.agent-memories-reading {
  display: grid;
  gap: var(--openbot-space-3);
}
.agent-memories-text {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-xl);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.agent-memories-meta {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.agent-memories-actions, .agent-memories-clear {
  display: flex;
  gap: var(--openbot-space-2);
}
.agent-memories-editor {
  display: grid;
  gap: var(--openbot-space-2);
}
.agent-memories-field {
  min-height: 0;
  max-height: 320px;
  field-sizing: content;
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-xl);
}
.agent-memories-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
}
.agent-memories-view-empty {
  display: flex;
  min-height: 456px;
  flex-direction: column;
}
.agent-memories-empty {
  display: grid;
  flex: 1;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) auto;
}
.agent-memories-empty-list {
  min-width: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  mask-image: linear-gradient(var(--openbot-text-primary) 45%, var(--openbot-transparent));
  transition: opacity 700ms var(--openbot-ease-out), filter 700ms var(--openbot-ease-out);
}
.agent-memories-empty-list[data-clearing] {
  opacity: 0;
  filter: blur(3px);
}
.agent-memories-empty-item {
  display: grid;
  grid-template-rows: 1fr;
  animation: agent-memories-empty-open 520ms var(--openbot-ease-out) both;
  transition: opacity 640ms var(--openbot-ease-out);
}
.agent-memories-empty-item > *, .agent-memories-empty-fold > * {
  min-height: 0;
  overflow: hidden;
}
@keyframes agent-memories-empty-open {
  from {
    grid-template-rows: 0fr;
    opacity: 0;
  }
}
.agent-memories-empty-item[data-age="1"] {
  opacity: 0.6;
}
.agent-memories-empty-item[data-age="2"] {
  opacity: 0.4;
}
.agent-memories-empty-item[data-age="3"] {
  opacity: 0.25;
}
.agent-memories-empty-row {
  min-height: 0;
}
.agent-memories-empty-row .agent-memory-row-main {
  height: auto;
}
.agent-memories-empty-fold {
  display: grid;
  transition: grid-template-rows 640ms var(--openbot-ease-out), opacity 640ms var(--openbot-ease-out);
}
.agent-memories-empty-fold-hand {
  grid-template-rows: 1fr;
}
.agent-memories-empty-fold-typed {
  grid-template-rows: 0fr;
  opacity: 0;
}
.agent-memories-empty-item[data-dry] .agent-memories-empty-fold-hand {
  grid-template-rows: 0fr;
  opacity: 0;
}
.agent-memories-empty-item[data-dry] .agent-memories-empty-fold-typed {
  grid-template-rows: 1fr;
  opacity: 1;
}
.agent-memories-hand {
  color: var(--openbot-accent-text);
  font-family: "Bradley Hand", "Noteworthy", "Segoe Print", cursive;
  font-weight: var(--openbot-weight-semibold);
}
.agent-memories-empty-hand {
  display: grid;
  padding-block: var(--openbot-space-0-5);
  font-size: var(--openbot-text-xl);
  line-height: 1.3;
  transform: rotate(-0.6deg);
  transform-origin: left top;
}
.agent-memories-empty-line {
  white-space: nowrap;
  clip-path: inset(-0.4em calc(100% + 0.2em) -0.4em -0.2em);
  animation: agent-memories-empty-write var(--agent-memories-empty-length) linear var(--agent-memories-empty-delay) forwards;
}
@keyframes agent-memories-empty-write {
  to {
    clip-path: inset(-0.4em -0.2em -0.4em -0.2em);
  }
}
:dir(rtl) .agent-memories-empty-hand {
  transform-origin: right top;
}
:dir(rtl) .agent-memories-empty-line {
  clip-path: inset(-0.4em -0.2em -0.4em calc(100% + 0.2em));
}
.agent-memories-empty-meta {
  opacity: 0;
  animation: agent-memories-empty-show 360ms var(--openbot-ease-out) var(--agent-memories-empty-delay) forwards;
}
@keyframes agent-memories-empty-show {
  to {
    opacity: 1;
  }
}
.agent-memories-empty-pitch {
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3) var(--openbot-space-4);
  text-align: center;
}
.agent-memories-empty-title {
  display: grid;
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-3xl);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.agent-memories-empty-title > .agent-memories-empty-lead {
  color: var(--openbot-text-muted);
}
.agent-memories-empty-word {
  line-height: 1;
  clip-path: inset(-0.4em calc(100% + 0.2em) -0.4em -0.2em);
  animation: agent-memories-empty-write 640ms linear 400ms forwards;
}
.agent-memories-empty-lines {
  display: grid;
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
.agent-memories-empty-action {
  margin-top: var(--openbot-space-1);
}
.agent-memories-empty[data-still] :is( .agent-memories-empty-item, .agent-memories-empty-fold, .agent-memories-empty-line, .agent-memories-empty-meta, .agent-memories-empty-word ) {
  animation: none;
  transition: none;
  clip-path: none;
}
.agent-memories-empty[data-still] :is(.agent-memories-empty-line, .agent-memories-empty-meta, .agent-memories-empty-word) {
  opacity: 1;
}
.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-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: start;
}
.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-on-accent);
}
.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-inline-start: 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-session-setting > .ui-select, .agent-session-setting .agent-settings-runtime-row {
  border-radius: inherit;
}
.agent-session-setting-notes {
  display: grid;
  justify-items: start;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-2) var(--openbot-space-3);
}
.agent-session-setting > .agent-session-setting-notes {
  padding-top: 0;
}
.agent-session-setting-notes:empty {
  display: none;
}
.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: start;
}
.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;
}
.agent-folders-entry {
  position: relative;
}
.agent-folders-entry-add-slot {
  flex: none;
  width: 24px;
}
.agent-folders-entry-add {
  position: absolute;
  top: 50%;
  inset-inline-end: calc(var(--openbot-space-3) + 14px + var(--openbot-space-2));
  color: var(--openbot-text-muted);
  transform: translateY(-50%);
}
.agent-folders-entry-add::before {
  position: absolute;
  inset: -8px;
  content: "";
}
.agent-folders-count, .agent-folders-lost {
  font-variant-numeric: tabular-nums;
}
.agent-folders-lost {
  color: var(--openbot-warning-text);
}
.agent-folders-dot {
  margin-inline: calc(var(--openbot-space-1) * -1);
}
.agent-folders-entry, .agent-folders-drop-target {
  outline: 1px dashed transparent;
  outline-offset: -1px;
  transition: outline-color var(--openbot-duration-fast) var(--openbot-ease-out), background-color var(--openbot-duration-fast) var(--openbot-ease-out);
}
.agent-folders-entry[data-dragging], .agent-folders-drop-target[data-dragging] {
  outline-color: var(--openbot-text-muted);
  background-color: var(--openbot-hover);
}
.agent-folders-page {
  display: grid;
  gap: var(--openbot-space-4);
}
.agent-folders-row {
  display: grid;
  grid-auto-columns: auto;
  grid-auto-flow: column;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--openbot-space-2);
  min-height: 48px;
  padding-block: var(--openbot-space-1-5);
  padding-inline: var(--openbot-space-3) var(--openbot-space-1-5);
}
.agent-folders-text {
  display: grid;
  min-width: 0;
}
.agent-folders-name {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-folders-path {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-folders-row[data-missing] .settings-link-icon, .agent-folders-row[data-missing] .agent-folders-path {
  color: var(--openbot-warning-text);
}
.agent-folders-access {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-2);
  padding-block: var(--openbot-space-2);
  padding-inline: var(--openbot-space-3) var(--openbot-space-2);
}
.agent-folders-access-text {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  text-wrap: pretty;
}
.agent-folders-remove {
  position: relative;
  color: var(--openbot-text-muted);
}
.agent-folders-remove::before {
  position: absolute;
  inset: -6px;
  content: "";
}
.agent-folders-add {
  color: var(--openbot-text-secondary);
}
.agent-folders-drop-target[data-dragging] .agent-folders-add {
  color: var(--openbot-text-primary);
}
@media (prefers-reduced-motion: no-preference) {
  .agent-folders-row[data-fresh] {
    animation: agent-folders-row-in var(--openbot-duration-normal) var(--openbot-ease-out) both;
  }
  .agent-folders-chat-drop {
    animation: agent-folders-fade-in var(--openbot-duration-fast) var(--openbot-ease-out) both;
  }
  .agent-folders-row[data-flash], .agent-folders-entry[data-flash] {
    animation: agent-folders-row-flash 900ms var(--openbot-ease-out);
  }
}
@media (prefers-reduced-motion: reduce) {
  .agent-folders-row[data-flash], .agent-folders-entry[data-flash] {
    animation: agent-folders-row-flash 900ms steps(1, end);
  }
}
@keyframes agent-folders-row-flash {
  from, 40% {
    background-color: var(--openbot-hover);
  }
}
@keyframes agent-folders-row-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}
@keyframes agent-folders-fade-in {
  from {
    opacity: 0;
  }
}
.agent-folders-chat-drop {
  position: absolute;
  z-index: 60;
  inset: var(--openbot-space-3);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--openbot-space-3);
  border-radius: var(--openbot-radius-lg);
  background: var(--background);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--background) 70%, transparent);
  }
  pointer-events: none;
  backdrop-filter: blur(3px);
}
.conversation-panel[data-settings-panel] .agent-folders-chat-drop {
  inset-inline-end: calc(var(--settings-panel-width, 360px) + var(--openbot-space-3));
}
.agent-folders-chat-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-6);
  border: 1px dashed var(--openbot-text-muted);
  border-radius: var(--openbot-radius-lg);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
  text-align: center;
  text-wrap: balance;
  transition: border-color var(--openbot-duration-fast) var(--openbot-ease-out), background-color var(--openbot-duration-fast) var(--openbot-ease-out);
}
.agent-folders-chat-zone > span {
  max-width: 28ch;
}
.agent-folders-chat-zone-folder {
  pointer-events: auto;
}
.agent-folders-chat-zone[data-dragging] {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 70%, var(--openbot-text-primary));
  }
  background: var(--openbot-hover);
}
.agent-folders-chat-zone svg {
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--openbot-text-secondary);
  transition: color var(--openbot-duration-fast) var(--openbot-ease-out);
}
.agent-folders-chat-zone[data-dragging] svg {
  color: var(--openbot-text-primary);
}
.host-folder-picker-places {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-1);
  padding: 0 var(--openbot-space-3) var(--openbot-space-2);
}
.host-folder-picker-path {
  margin: 0;
  padding: 0 var(--openbot-space-3) var(--openbot-space-2);
  overflow-wrap: anywhere;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.host-folder-picker .provider-more-list {
  flex: 1 1 auto;
  min-height: 160px;
}
.host-folder-picker-note {
  margin: 0;
  padding: var(--openbot-space-2) var(--openbot-space-3);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.host-folder-picker-footer {
  display: flex;
  flex-shrink: 0;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-2) var(--openbot-space-1) var(--openbot-space-1);
}
.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-inline-start: 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-inline-start: 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-separator {
  color: var(--openbot-text-muted);
}
.routine-segmented {
  display: flex;
  margin-inline-start: 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-block: var(--openbot-space-2) var(--openbot-space-1);
  padding-inline: var(--openbot-space-3) var(--openbot-space-1);
}
.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-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-3) var(--openbot-space-1);
}
: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-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-3) var(--openbot-space-1);
  color: inherit;
  font: inherit;
  text-align: start;
}
.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, .routine-webhook-actions > .ui-icon-button {
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
}
.routine-webhook-field:has(> .routine-webhook-actions) {
  grid-template-columns: minmax(84px, auto) minmax(0, 1fr) minmax(var(--openbot-control-sm), auto);
}
.routine-webhook-actions {
  display: flex;
  align-items: center;
}
.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-card-endpoint {
  display: grid;
  border-bottom: 1px solid var(--openbot-border);
}
.routine-webhook-card-endpoint > .routine-webhook-field, .routine-webhook-card-endpoint > .routine-webhook-note {
  padding-inline-start: 0;
}
.routine-webhook-steps {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.routine-webhook-steps > li {
  display: grid;
  grid-template-columns: var(--openbot-control-sm) minmax(0, 1fr);
  gap: var(--openbot-space-2);
  border-top: 1px solid var(--openbot-border);
  padding: var(--openbot-space-3);
}
.routine-webhook-step-body {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-1-5);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.routine-webhook-step-body > strong {
  font-weight: var(--openbot-weight-medium);
}
.routine-webhook-steps > li[data-disabled] .routine-webhook-step-body > strong {
  color: var(--openbot-text-muted);
}
.routine-webhook-step-marker {
  display: inline-grid;
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
  place-items: 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);
}
.routine-webhook-step-marker[data-done] {
  border-color: var(--openbot-success);
  background: var(--openbot-success-soft);
  color: var(--openbot-success-text);
}
.routine-webhook-step-check {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.routine-webhook-inset {
  min-width: 0;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-sm);
}
.routine-webhook-inset > .routine-webhook-field {
  border-top: 0;
}
.routine-webhook-step-button {
  justify-self: start;
}
.routine-webhook-disclosure {
  justify-self: start;
  margin-inline-start: calc(var(--openbot-space-2) * -1);
  padding-inline: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: inherit;
}
.routine-webhook-disclosure-icon {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.routine-webhook-filter {
  display: grid;
  gap: var(--openbot-space-1);
}
.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-inline-start: 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-block: 0 var(--openbot-space-1);
  margin-inline: var(--openbot-space-1) 0;
  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(560px, calc(100dvh - 16px), var(--kb-popper-content-available-height, 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);
}
:dir(rtl) .routine-calendar-header :is(svg[class~="lucide-chevron-left"], svg[class~="lucide-chevron-right"]), :dir(rtl) .routine-webhook-events-toggle > svg[class~="lucide-chevron-right"], :dir(rtl) svg[class~="lucide-chevron-right"].routine-webhook-disclosure-icon {
  transform: scaleX(-1);
}
.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-inline-start: 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-inline-start: 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-inline-start: 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: start;
  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: start;
}
.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, .routine-planner-empty-board {
  display: grid;
  min-width: 0;
}
.routine-planner-empty > *, .routine-planner-empty-board > * {
  grid-area: 1 / 1;
}
.routine-planner-empty-board {
  pointer-events: none;
  user-select: none;
}
.routine-planner-empty-cells, .routine-planner-empty-runs {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: 10rem;
}
.routine-planner-empty-cells {
  mask-image: radial-gradient(ellipse 36% 36% at 50% 50%, var(--openbot-transparent) 68%, var(--openbot-text-primary) 100%), radial-gradient(ellipse 72% 78% at 50% 50%, var(--openbot-text-primary) 50%, var(--openbot-transparent) 100%);
  mask-composite: intersect;
}
.routine-planner-empty-cell {
  border-top: 1px solid var(--openbot-border);
  border-inline-start: 1px solid var(--openbot-border);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  color: var(--openbot-text-dim);
  font-size: var(--openbot-text-md);
}
.routine-planner-empty-cell[data-outside] {
  opacity: 0.45;
}
.routine-planner-empty-cell[data-today] {
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-semibold);
}
.routine-planner-empty-run {
  display: grid;
  min-width: 0;
  align-self: start;
  justify-items: start;
  gap: var(--openbot-space-2);
  grid-row: var(--routine-planner-empty-row);
  grid-column: var(--routine-planner-empty-column);
  margin-top: calc(var(--openbot-space-8) + var(--openbot-space-1));
  padding-inline: var(--openbot-space-2);
  animation: routine-planner-empty-life var(--routine-planner-empty-life) var(--openbot-ease-out) both;
}
.routine-planner-empty-run > .routine-planner-run {
  width: 100%;
}
.routine-planner-empty-day {
  display: none;
}
.routine-planner-empty-check {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  opacity: 0;
  animation: routine-planner-empty-draw 420ms var(--openbot-ease-out) 380ms forwards;
}
@keyframes routine-planner-empty-life {
  0% {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(10px) scale(0.96);
  }
  8%, 88% {
    opacity: 1;
    filter: blur(0);
    transform: none;
  }
  100% {
    opacity: 0;
    filter: blur(3px);
    transform: translateY(-4px);
  }
}
@keyframes routine-planner-empty-draw {
  from {
    opacity: 1;
  }
  to {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}
.routine-planner-hand {
  color: var(--openbot-accent-text);
  font-family: "Bradley Hand", "Noteworthy", "Segoe Print", cursive;
  font-weight: var(--openbot-weight-semibold);
}
.routine-planner-empty-note {
  display: grid;
  width: fit-content;
  padding-inline: var(--openbot-space-1);
  font-size: var(--openbot-text-xl);
  line-height: 1.3;
  transform: rotate(-1.5deg);
  transform-origin: left top;
}
.routine-planner-empty-line {
  clip-path: inset(-0.4em 100% -0.4em -0.2em);
  animation: routine-planner-empty-write var(--routine-planner-empty-length) linear var(--routine-planner-empty-delay) forwards;
}
@keyframes routine-planner-empty-write {
  to {
    clip-path: inset(-0.4em -0.2em -0.4em -0.2em);
  }
}
.routine-planner-empty-underline {
  width: 100%;
  height: var(--openbot-space-2);
  overflow: visible;
}
.routine-planner-empty-underline path {
  fill: none;
  stroke: currentColor;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
  opacity: 0;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  animation: routine-planner-empty-draw 520ms var(--openbot-ease-out) var(--routine-planner-empty-delay) forwards;
}
.routine-planner-empty-pitch {
  z-index: 1;
  display: grid;
  max-width: 34rem;
  place-self: center;
  justify-items: center;
  gap: var(--openbot-space-4);
  padding: var(--openbot-space-6);
  text-align: center;
}
.routine-planner-empty-title {
  display: grid;
  font-size: var(--openbot-text-display);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.routine-planner-empty-title > .routine-planner-empty-lead {
  color: var(--openbot-text-muted);
}
.routine-planner-empty-done {
  clip-path: inset(-0.4em 100% -0.4em -0.2em);
  animation: routine-planner-empty-write 520ms linear 500ms forwards;
}
.routine-planner-empty-lines {
  display: grid;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-xl);
  line-height: 1.5;
}
.routine-planner-empty-action.ui-button {
  width: 100%;
  max-width: 22rem;
  height: var(--openbot-control-lg);
  margin-top: var(--openbot-space-2);
}
.routine-planner-empty-menu {
  min-width: 14rem;
  max-height: min(520px, calc(100dvh - 16px), var(--kb-popper-content-available-height, 520px));
  overflow-y: auto;
}
.routine-planner-empty[data-still] :is( .routine-planner-empty-run, .routine-planner-empty-check, .routine-planner-empty-line, .routine-planner-empty-underline path, .routine-planner-empty-done ) {
  animation: none;
  clip-path: none;
  stroke-dashoffset: 0;
  opacity: 1;
}
.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;
  }
  .routine-planner-empty > .routine-planner-empty-board {
    grid-area: 2 / 1;
  }
  .routine-planner-empty-pitch {
    padding-inline: 0;
  }
  .routine-planner-empty-title {
    font-size: var(--openbot-text-3xl);
  }
  .routine-planner-empty-lines {
    font-size: var(--openbot-text-lg);
  }
  .routine-planner-empty-cells {
    display: none;
  }
  .routine-planner-empty-runs {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(3, 8rem);
    grid-auto-rows: 0;
  }
  .routine-planner-empty-run {
    width: 100%;
    grid-row: var(--routine-planner-empty-slot);
    grid-column: 1;
    margin-top: 0;
    padding-inline: 0;
  }
  .routine-planner-empty-day {
    display: block;
    color: var(--openbot-text-dim);
    font-size: var(--openbot-text-sm);
  }
  .routine-planner-empty-note {
    font-size: var(--openbot-text-lg);
  }
}
:dir(rtl) .routine-planner-empty-note {
  transform-origin: right top;
}
:dir(rtl) .routine-planner-empty-line {
  clip-path: inset(-0.4em -0.2em -0.4em 100%);
}
:dir(rtl) .routine-planner-identity svg[class~="lucide-arrow-left"], :dir(rtl) .routine-planner-nav :is(svg[class~="lucide-chevron-left"], svg[class~="lucide-chevron-right"]) {
  transform: scaleX(-1);
}
.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-inline-start: 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;
}
:dir(rtl) .chat-action-card-open svg[class~="lucide-chevron-right"] {
  transform: scaleX(-1);
}
.marketplace-suggestion.ui-block-card {
  max-width: 520px;
}
.marketplace-suggestion .marketplace-suggestion-icon {
  width: var(--openbot-control-lg);
  height: var(--openbot-control-lg);
  flex: none;
  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 .marketplace-suggestion-icon > .connector-brand-tile {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.marketplace-suggestion .ui-block-title, .marketplace-suggestion .ui-block-subtitle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.marketplace-suggestion .marketplace-suggestion-name {
  display: inline-block;
  height: auto;
  max-width: 100%;
  overflow: hidden;
  padding: 0;
  color: inherit;
  font: inherit;
  text-overflow: ellipsis;
  vertical-align: top;
  white-space: nowrap;
}
.marketplace-suggestion-controls {
  display: contents;
}
.marketplace-suggestion-question {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  overflow-wrap: anywhere;
}
.marketplace-suggestion-action {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
}
.marketplace-suggestion .marketplace-suggestion-button {
  overflow: clip;
}
.marketplace-suggestion .marketplace-suggestion-button.ui-button[data-state="connected"], .marketplace-suggestion .marketplace-suggestion-button.ui-button[data-state="connected"]:hover {
  border-color: transparent;
  background: var(--openbot-success);
  color: var(--openbot-text-on-light);
  cursor: default;
}
:root[data-openbot-color-scheme="light"] .marketplace-suggestion .marketplace-suggestion-button.ui-button[data-state="connected"] {
  background: var(--openbot-success-text);
}
.marketplace-suggestion-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  justify-items: center;
}
.marketplace-suggestion-layer {
  display: inline-flex;
  grid-area: 1 / 1;
  align-items: center;
  gap: var(--openbot-space-1-5);
  white-space: nowrap;
}
.marketplace-suggestion-button[data-state="connected"] [data-layer="start"], .marketplace-suggestion-button:not([data-state="connected"]) [data-layer="done"] {
  opacity: 0;
}
.marketplace-suggestion-layer > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.marketplace-suggestion-spinner {
  display: inline-flex;
  width: 0;
  margin-inline-end: calc(-1 * var(--openbot-space-1-5));
  opacity: 0;
}
.marketplace-suggestion-button[data-state="busy"] .marketplace-suggestion-spinner {
  width: auto;
  margin-inline-end: 0;
  opacity: 1;
}
.marketplace-suggestion-controls[data-state="connected"] .marketplace-suggestion-dismiss {
  width: 0;
  min-width: 0;
  margin-inline-start: calc(-1 * var(--openbot-space-2));
  overflow: hidden;
  border-width: 0;
  padding: 0;
  opacity: 0;
  visibility: hidden;
}
.marketplace-suggestion-controls[data-motion] .marketplace-suggestion-button.ui-button {
  transition: background-color var(--openbot-duration-slow) var(--openbot-ease-out), color var(--openbot-duration-slow) var(--openbot-ease-out), opacity var(--openbot-duration-normal) var(--openbot-ease-out);
}
.marketplace-suggestion-controls[data-motion] .marketplace-suggestion-layer {
  transition: opacity var(--openbot-duration-normal) var(--openbot-ease-out);
}
@media (prefers-reduced-motion: no-preference) {
  .marketplace-suggestion-controls[data-motion] .marketplace-suggestion-stage {
    transition: width var(--openbot-duration-slow) var(--openbot-ease-out);
  }
  .marketplace-suggestion-controls[data-motion] .marketplace-suggestion-layer {
    transition: opacity var(--openbot-duration-normal) var(--openbot-ease-out), transform var(--openbot-duration-slow) var(--openbot-ease-out);
  }
  .marketplace-suggestion-button[data-state="connected"] [data-layer="start"] {
    transform: translateY(-40%);
  }
  .marketplace-suggestion-button:not([data-state="connected"]) [data-layer="done"] {
    transform: translateY(40%);
  }
  .marketplace-suggestion-controls[data-motion] .marketplace-suggestion-layer > svg path {
    stroke-dasharray: 24 24;
    stroke-dashoffset: -24;
    transition: stroke-dashoffset var(--openbot-duration-overlay) var(--openbot-ease-out) var(--openbot-duration-fast);
  }
  .marketplace-suggestion-controls[data-motion] .marketplace-suggestion-button[data-state="connected"] svg path {
    stroke-dashoffset: 0;
  }
  .marketplace-suggestion-controls[data-motion] .marketplace-suggestion-spinner {
    transform: scale(0.6);
    transition: opacity var(--openbot-duration-normal) var(--openbot-ease-out), transform var(--openbot-duration-normal) var(--openbot-ease-out);
  }
  .marketplace-suggestion-controls[data-motion] .marketplace-suggestion-button[data-state="busy"] .marketplace-suggestion-spinner {
    transform: none;
  }
  .marketplace-suggestion-controls[data-motion] .marketplace-suggestion-dismiss {
    transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out), width var(--openbot-duration-slow) var(--openbot-ease-out), margin var(--openbot-duration-slow) var(--openbot-ease-out), visibility 0s linear var(--openbot-duration-slow);
  }
}
.marketplace-suggestion-unavailable {
  display: flex;
  margin: 0;
  gap: var(--openbot-space-2);
  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);
}
.server-install-card[data-step="expired"] .server-install-card-status {
  color: var(--openbot-warning);
}
.server-install-card-status-text {
  display: inline-block;
}
.server-install-card-tile {
  --server-install-size: var(--openbot-control-lg);
  --server-install-radius: var(--openbot-radius-md);
  --server-install-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  display: grid;
  flex: 0 0 auto;
  width: var(--server-install-size);
  height: var(--server-install-size);
  place-items: center;
  border-radius: var(--server-install-radius);
}
.server-install-card-tile[data-step="expired"] {
  box-sizing: border-box;
  border: 1px solid var(--openbot-border);
  background: var(--openbot-bg-surface-raised);
}
.server-install-card-tile > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.server-install-card-tile[data-step] .server-install-card-face {
  display: grid;
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  place-items: center;
  border-radius: var(--server-install-radius);
}
.server-install-card-tile[data-step] .server-install-card-logo {
  --server-gradient-logo-size: var(--server-install-size);
  --server-gradient-logo-radius: var(--server-install-radius);
  position: relative;
  overflow: hidden;
  animation: server-install-pop-in 520ms var(--server-install-spring) 380ms backwards;
}
.server-install-card-logo > img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.server-install-card-tile:is([data-step="starting"], [data-step="connected"], [data-step="offline"]) .ui-plush-eye {
  animation: ui-plush-squint 220ms var(--openbot-ease-out) forwards;
}
.server-install-card-tile:is([data-step="starting"], [data-step="connected"], [data-step="offline"]) .server-install-card-loader {
  animation: server-install-pop-out 420ms var(--openbot-ease-out) 200ms forwards;
}
.server-install-card-tile[data-step="starting"] .server-install-card-logo {
  animation: server-install-pop-in 520ms var(--server-install-spring) 380ms backwards, server-install-breathe 1.8s ease-in-out 900ms infinite;
}
.server-install-card-tile[data-step="connected"] .server-install-card-logo {
  animation: server-install-pop-in 520ms var(--server-install-spring) 380ms backwards, server-install-settle 420ms var(--server-install-spring);
}
.server-install-card-badge {
  position: absolute;
  right: -5px;
  bottom: -5px;
  display: grid;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  place-items: center;
  border: 2px solid var(--openbot-bg-canvas);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-muted);
  transition: background-color var(--openbot-duration-normal) var(--openbot-ease-out), color var(--openbot-duration-normal) var(--openbot-ease-out);
  animation: server-install-badge-in 360ms var(--server-install-spring) 640ms backwards;
}
.server-install-card-badge[data-step="connected"] {
  background: var(--openbot-success);
  color: var(--openbot-bg-canvas);
}
.server-install-card-badge > svg {
  width: 10px;
  height: 10px;
}
.server-install-card-check * {
  stroke-dasharray: 20;
  animation: server-install-draw 360ms var(--openbot-ease-out) 80ms backwards;
}
.server-install-card-status-text, .server-install-card-action {
  animation: server-install-text-in var(--openbot-duration-slow) var(--openbot-ease-out);
}
.server-install-card-tile[data-revealed][data-step] .server-install-card-face, .server-install-card-tile[data-revealed] .server-install-card-badge, .server-install-card-tile[data-revealed] .server-install-card-check * {
  animation: none;
}
.server-install-card-tile[data-revealed][data-step="starting"] .server-install-card-logo {
  animation: server-install-breathe 1.8s ease-in-out infinite;
}
@keyframes server-install-pop-out {
  30% {
    opacity: 1;
    transform: translateY(-3px) scale(1.06);
  }
  100% {
    opacity: 0;
    transform: scale(0.4);
  }
}
@keyframes server-install-pop-in {
  from {
    opacity: 0;
    transform: scale(0.3);
  }
}
@keyframes server-install-breathe {
  50% {
    opacity: 0.6;
    transform: scale(0.94);
  }
}
@keyframes server-install-settle {
  from {
    opacity: 0.7;
    transform: scale(0.92);
  }
}
@keyframes server-install-badge-in {
  from {
    transform: scale(0);
  }
}
@keyframes server-install-draw {
  from {
    stroke-dashoffset: 20;
  }
}
@keyframes server-install-text-in {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .server-install-card .server-install-card-tile[data-step] .server-install-card-face, .server-install-card .server-install-card-badge, .server-install-card .server-install-card-check *, .server-install-card .server-install-card-status-text, .server-install-card .server-install-card-action {
    animation: none;
    transition: none;
  }
  .server-install-card .server-install-card-tile:is([data-step="starting"], [data-step="connected"], [data-step="offline"]) .server-install-card-loader {
    opacity: 0;
  }
}
.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-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-3) var(--openbot-space-2);
}
.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 {
  max-width: 560px;
  margin: var(--openbot-space-4) 0 0;
}
.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);
}
.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: start;
}
.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);
}
:dir(rtl) .task-list-chevron {
  transform: rotate(90deg);
}
.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);
}
:dir(rtl) .task-list-item {
  transform-origin: right top;
}
.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);
}
:dir(rtl) .task-list-item-text::after {
  transform-origin: right center;
}
.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-inline-start: 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: start;
}
.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-dock {
  position: relative;
  z-index: 3;
  width: calc(100% - 2 * var(--openbot-space-3));
  max-width: var(--conversation-column-width, none);
  height: 0;
  flex: 0 0 auto;
  margin-inline: auto;
}
.subagents-dock .subagents-dock-bar {
  position: absolute;
  top: var(--openbot-space-1);
  inset-inline-start: 0;
  display: flex;
  width: var(--message-wide-bubble-width);
  height: auto;
  align-items: center;
  gap: var(--openbot-space-2);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-canvas);
  padding: var(--openbot-space-1-5) var(--openbot-space-3);
  color: inherit;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-md);
  text-align: start;
}
.subagents-dock .subagents-dock-bar:hover {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-canvas);
}
.subagents-dock-live {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
}
.subagents-dock-chevron {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  rotate: 90deg;
}
.subagents-list {
  display: flex;
  width: var(--message-wide-bubble-width);
  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: start;
  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-inline-start: 2px solid var(--openbot-border-strong);
  padding-inline-start: 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;
  }
}
:dir(rtl) svg[class~="lucide-chevron-right"].subagents-group-chevron {
  transform: scaleX(-1);
}
:dir(rtl) .subagents-group-header[aria-expanded="true"] svg[class~="lucide-chevron-right"].subagents-group-chevron {
  rotate: -90deg;
}
:dir(rtl) svg[class~="lucide-chevron-right"].subagents-row-chevron {
  transform: scaleX(-1);
}
.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-inline-end: var(--openbot-space-2);
  color: var(--openbot-text-muted);
}
.awaiting-replies-item {
  align-items: center;
}
.awaiting-replies-avatar {
  --agent-avatar-optical-offset: calc(var(--openbot-icon-md) * -0.14);
  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-wait] .awaiting-replies-state-label {
  color: var(--openbot-warning-text);
}
.awaiting-replies-open, .awaiting-replies-steer, .awaiting-replies-stop {
  flex: 0 0 auto;
}
.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: start;
  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;
}
.conversation-model-pending {
  flex: none;
  gap: 4px;
}
.conversation-model-pending svg {
  width: 12px;
  height: 12px;
}
.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-block: 0;
  padding-inline: 8px 9px;
  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-border-focus);
  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-inline-end: var(--openbot-space-1-5);
  content: "·";
}
.conversation-header .provider-model-trigger {
  interpolate-size: allow-keywords;
}
.conversation-header .provider-model-trigger :is(.provider-model-trigger-name, .provider-model-trigger-effort) {
  overflow: hidden;
  font-size: var(--openbot-text-sm);
  transition: width var(--openbot-duration-normal) var(--openbot-ease-out), margin var(--openbot-duration-normal) var(--openbot-ease-out), opacity var(--openbot-duration-normal) var(--openbot-ease-out);
}
.conversation-header[data-model-fit] .provider-model-trigger-effort, .conversation-header[data-model-fit="icon"] .provider-model-trigger-name, .conversation-header:where(:has(.agent-threads-header:not([data-mode="tabs"]))) .provider-model-trigger :is(.provider-model-trigger-name, .provider-model-trigger-effort) {
  width: 0;
  margin-inline-start: calc(var(--openbot-space-1-5) * -1);
  opacity: 0;
}
.conversation-header[data-model-measure] .provider-model-trigger :is(.provider-model-trigger-name, .provider-model-trigger-effort) {
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .conversation-header .provider-model-trigger :is(.provider-model-trigger-name, .provider-model-trigger-effort) {
    transition: none;
  }
}
.provider-model-trigger:where(:not(.provider-model-trigger-field)):has(.provider-model-trigger-fast) {
  max-width: 296px;
}
.provider-model-trigger-fast svg {
  width: 12px;
  height: 12px;
  margin-inline-end: 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;
  inset-inline-start: 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-block: 0;
  padding-inline: 12px 11px;
  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-inline-start: 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-sheet-inset);
  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-inline-end: 1px solid var(--openbot-border);
  background: var(--provider-model-rail-bg);
  padding: 9px 7px;
}
.provider-model-rail-tabs {
  display: flex;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-1);
  overflow-y: auto;
  scrollbar-width: none;
  margin: -5px;
  padding: 5px;
}
.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);
  inset-inline-end: 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;
  inset-inline-end: -3px;
  bottom: -3px;
  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-rail-account svg {
  width: 11px;
  height: 11px;
  stroke-width: 2.75;
}
.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-block: var(--openbot-space-1-5) var(--openbot-space-2);
  padding-inline: var(--ui-menu-inset) 0;
}
.provider-model-heading-text {
  flex: 1 1 auto;
  min-width: 0;
  padding-inline-end: 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-heading-limited {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--openbot-space-1-5);
}
.provider-model-heading-limited > span {
  grid-column: 1 / -1;
}
.provider-model-limit {
  display: block;
  justify-self: start;
  max-width: 100%;
  height: auto;
  padding: 1px var(--openbot-space-1-5);
  color: var(--openbot-danger-text);
  line-height: 15px;
  text-overflow: ellipsis;
}
.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;
  grid-template-columns: minmax(0, 1fr);
  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-block: var(--ui-menu-padding) 0;
  padding-inline: calc(var(--ui-menu-padding) + var(--ui-menu-inset)) var(--ui-menu-padding);
  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-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-inline-start: 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-speed-content {
  width: 300px;
}
.provider-model-speed-item .ui-select-item-label {
  display: flex;
  flex-direction: column;
  white-space: normal;
}
.provider-model-speed-name {
  color: var(--openbot-text-primary);
}
.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-block: var(--openbot-space-1-5);
  padding-inline: calc(var(--ui-menu-inset) + var(--openbot-icon-md) + var(--openbot-space-2)) var(--ui-menu-inset);
  color: var(--openbot-text-primary);
  cursor: pointer;
  text-align: start;
  transition: background-color var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease;
}
.provider-model-option::before {
  position: absolute;
  top: 50%;
  inset-inline-start: 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-wrap: anywhere;
  text-wrap: pretty;
  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-older {
  color: var(--openbot-text-secondary);
}
.provider-model-older::before {
  content: none;
}
.provider-model-older.ui-button {
  height: auto;
  font: inherit;
}
.provider-model-older[aria-expanded="true"] .provider-model-chevron {
  transform: rotate(180deg);
}
.provider-model-option-name > .provider-model-option-settings {
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  white-space: nowrap;
}
.provider-model-check {
  position: absolute;
  top: 50%;
  inset-inline-start: 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:not(.provider-model-trigger-field) .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 {
    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;
  inset-inline-end: 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-list[data-pushing] {
  overflow-y: clip;
}
.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-lg);
}
.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: start;
}
.unread-messages-mark-read {
  position: relative;
  z-index: 1;
  margin-inline-start: 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;
}
.unread-messages-divider[data-arrive] span {
  animation: unread-divider-badge-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}
.unread-messages-divider[data-arrive] hr {
  animation: unread-divider-line-in var(--openbot-duration-toast-enter) var(--openbot-ease-out) 60ms both;
}
.unread-messages-divider[data-arrive] hr:first-child {
  transform-origin: right center;
}
.unread-messages-divider[data-arrive] hr:last-child {
  transform-origin: left center;
}
@keyframes unread-divider-badge-in {
  from {
    opacity: 0;
    transform: scale(0.9);
    filter: blur(2px);
  }
}
@keyframes unread-divider-line-in {
  from {
    opacity: 0;
    transform: scaleX(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .unread-messages-divider[data-arrive] :is(hr, span) {
    animation: none;
  }
}
.time-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 656px;
  height: 24px;
  margin: var(--openbot-space-2) auto var(--openbot-space-4);
  padding: 4px 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
  text-align: center;
}
:dir(rtl) .unread-messages-divider[data-arrive] hr:first-child {
  transform-origin: left center;
}
:dir(rtl) .unread-messages-divider[data-arrive] hr:last-child {
  transform-origin: right center;
}
.chat-scroll-rail {
  --chat-scroll-rail-pitch: var(--openbot-space-2);
  --chat-scroll-rail-hit: clamp(12px, var(--chat-scroll-rail-inset, 20px), 20px);
  --chat-scroll-rail-ease: var(--openbot-ease-out);
  --chat-scroll-rail-quick: var(--openbot-duration-overlay);
  position: sticky;
  z-index: 3;
  top: 0;
  pointer-events: none;
}
.chat-scroll-rail-nav {
  position: absolute;
  top: 50%;
  inset-inline-end: calc(-1 * var(--chat-scroll-rail-inset, 0px));
  width: calc(var(--chat-scroll-rail-hit) + var(--openbot-space-2));
  height: min(64%, 600px);
  display: flex;
  flex-direction: column;
  transform: translateY(-50%);
}
.chat-scroll-rail-track {
  position: relative;
  transition: opacity var(--chat-scroll-rail-quick) ease;
  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;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.chat-scroll-rail-item {
  flex: none;
  height: var(--chat-scroll-rail-pitch);
  display: flex;
}
.chat-scroll-rail .chat-scroll-rail-link {
  position: relative;
  flex: none;
  width: var(--chat-scroll-rail-hit);
  height: auto;
  margin-inline-start: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: none;
  pointer-events: auto;
}
@media (hover: hover) {
  .chat-scroll-rail:not([data-near]) .chat-scroll-rail-nav:not(:has(:focus-visible)) .chat-scroll-rail-track {
    opacity: 0;
  }
}
.chat-scroll-rail-tick {
  position: absolute;
  top: 50%;
  inset-inline-end: var(--openbot-space-1);
  width: var(--openbot-space-1);
  height: 2px;
  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) 18%, transparent);
  }
  transform: translateY(-50%);
  transition: width var(--chat-scroll-rail-quick) var(--chat-scroll-rail-ease), background-color var(--chat-scroll-rail-quick) ease;
}
.chat-scroll-rail-item[data-state="read"] .chat-scroll-rail-tick {
  background: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-primary) 36%, transparent);
  }
}
.chat-scroll-rail-item[data-state="active"] .chat-scroll-rail-tick {
  width: var(--openbot-space-2);
  background: var(--openbot-text-secondary);
}
.chat-scroll-rail-nav:is(:hover, :has(:focus-visible)) .chat-scroll-rail-tick {
  width: var(--openbot-space-2);
}
.chat-scroll-rail-nav:is(:hover, :has(:focus-visible)) :is(.chat-scroll-rail-item[data-open] + * + *, .chat-scroll-rail-item:has(+ * + [data-open])) .chat-scroll-rail-tick {
  width: 10px;
}
.chat-scroll-rail-nav:is(:hover, :has(:focus-visible)) :is( .chat-scroll-rail-item[data-state="active"], .chat-scroll-rail-item[data-open] + *, .chat-scroll-rail-item:has(+ [data-open]) ) .chat-scroll-rail-tick {
  width: var(--openbot-space-3);
}
.chat-scroll-rail-nav:is(:hover, :has(:focus-visible)) .chat-scroll-rail-item[data-open] .chat-scroll-rail-tick {
  width: var(--openbot-space-4);
  background: var(--openbot-text-primary);
}
.chat-scroll-rail-card {
  --chat-scroll-rail-quick: var(--openbot-duration-overlay);
  --chat-scroll-rail-ease: var(--openbot-ease-out);
  position: fixed;
  z-index: var(--openbot-layer-tooltip);
  top: var(--chat-scroll-rail-card-top);
  right: calc(100vw - var(--chat-scroll-rail-card-left) + var(--openbot-space-2));
  width: max-content;
  max-width: min(300px, 60vw);
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-3);
  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) 8%, transparent);
  }
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-glass);
  backdrop-filter: blur(var(--openbot-space-4));
  font-size: var(--openbot-text-md);
  line-height: 18px;
  pointer-events: none;
  opacity: 0;
  filter: blur(var(--openbot-space-1));
  transform: translateY(-50%) translateX(var(--openbot-space-1));
  transition: opacity var(--chat-scroll-rail-quick) ease, filter var(--chat-scroll-rail-quick) ease, transform var(--chat-scroll-rail-quick) var(--chat-scroll-rail-ease);
}
:dir(rtl) .chat-scroll-rail-card {
  right: auto;
  left: calc(var(--chat-scroll-rail-card-right) + var(--openbot-space-2));
  transform: translateY(-50%) translateX(calc(-1 * var(--openbot-space-1)));
}
.chat-scroll-rail-card[data-open] {
  opacity: 1;
  filter: blur(0);
  transform: translateY(-50%);
}
.chat-scroll-rail-card-title {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-scroll-rail-card-reply {
  display: -webkit-box;
  overflow: hidden;
  color: var(--openbot-text-muted);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
@media (prefers-reduced-motion: reduce) {
  .chat-scroll-rail .chat-scroll-rail-track, .chat-scroll-rail .chat-scroll-rail-tick, .chat-scroll-rail-card.chat-scroll-rail-card {
    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, .message-author-gutter, .chat-visual-with-author {
  --message-author-face-size: var(--openbot-space-8);
  --message-author-column: calc(var(--message-author-face-size) + var(--openbot-space-1));
}
.message-entry-with-author {
  display: grid;
  grid-template-columns: var(--message-author-column) 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-author-avatar {
  width: var(--message-author-column);
  height: var(--message-author-column);
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  overflow: visible;
  border: 0;
  background: transparent;
}
.message-author-avatar .agent-avatar {
  --agent-avatar-optical-offset: -4px;
  width: var(--message-author-face-size);
  height: var(--message-author-face-size);
}
.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: var(--message-author-column);
  flex: 0 0 var(--message-author-column);
}
.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 {
  transform-origin: left bottom;
  animation: message-bubble-in 280ms cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
}
.message-entry-animated.message-entry-user {
  transform-origin: right bottom;
}
@media (prefers-reduced-motion: no-preference) {
  .message-entry-animated.message-entry-user {
    animation: message-sent-in 240ms 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-stack {
  display: grid;
  width: 100%;
  min-width: 0;
  justify-items: end;
  gap: var(--openbot-space-1);
}
.message-media-before {
  width: min(420px, 100%);
}
.message-media-before:has(.image-gallery) {
  width: min(520px, 100%);
}
.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;
}
.message-entry-actions-beside .message-shell {
  flex-wrap: wrap;
  row-gap: var(--openbot-space-1);
}
@supports (position-anchor: --message-bubble) and (anchor-scope: --message-bubble) {
  .message-entry-actions-beside {
    anchor-scope: --message-bubble;
  }
  .message-entry-actions-beside .message-shell .ui-bubble {
    anchor-name: --message-bubble;
  }
  .message-entry-actions-beside .message-author-avatar {
    position: absolute;
    bottom: anchor(--message-bubble bottom);
    left: 0;
  }
}
.message-steps {
  min-width: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--openbot-duration-hover) ease;
}
.message-steps > .agent-steps {
  margin-bottom: 0;
}
.message-steps .agent-steps .agent-steps-header {
  height: 24px;
  margin-inline-start: 0;
  padding-block: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  transition: background var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease;
}
.message-steps .agent-steps .agent-steps-header:is(:hover, :focus-visible) {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
  outline: none;
}
.message-steps .agent-steps-header :is(.agent-steps-duration, .agent-steps-chevron) {
  color: inherit;
  transition: color var(--openbot-duration-hover) ease, rotate var(--openbot-duration-fast) var(--openbot-ease-out);
}
.message-steps .agent-steps-summary {
  font-weight: var(--openbot-weight-regular);
}
.message-entry:hover .message-steps, .message-entry:focus-within .message-steps, .message-entry:has(.message-actions-open) .message-steps {
  opacity: 1;
  pointer-events: auto;
}
@media (hover: none), (pointer: coarse) {
  .message-actions, .message-time, .message-steps {
    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 {
  --message-bubble-tint: var(--message-author-color, var(--openbot-accent));
  --message-bubble-tint-amount: 22%;
}
.ui-bubble.message-bubble-colored {
  --message-bubble-tint: var(--message-chat-color);
  --message-bubble-tint-amount: 30%;
}
:root[data-openbot-color-scheme="light"] .ui-bubble.message-bubble-colored {
  --message-bubble-tint-amount: 22%;
}
.ui-bubble:is(.message-bubble-member, .message-bubble-colored) {
  --message-plain-canvas: var(--openbot-bg-canvas);
  --message-plain-sidebar: var(--openbot-bg-sidebar);
  --message-plain-surface: var(--openbot-bg-surface);
  --message-plain-surface-raised: var(--openbot-bg-surface-raised);
  --message-plain-control: var(--openbot-bg-control);
  --message-plain-control-hover: var(--openbot-bg-control-hover);
  --message-plain-control-active: var(--openbot-bg-control-active);
  --message-bubble-base: var(--openbot-bg-surface-raised);
}
.message-entry-agent .ui-bubble-variant-muted.message-bubble-colored {
  --message-bubble-base: var(--openbot-bg-surface);
}
.ui-bubble.message-bubble-member > .ui-bubble-content {
  background: var(--message-bubble-tint);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix( in srgb, var(--message-bubble-tint) var(--message-bubble-tint-amount), var(--message-bubble-base) );
  }
}
.message-entry-user .ui-bubble.message-bubble-colored > .ui-bubble-content, .message-entry-agent .ui-bubble-variant-muted.message-bubble-colored > .ui-bubble-content {
  --message-surface-lift: 5%;
  --openbot-bg-canvas: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --openbot-bg-canvas: color-mix(
    in srgb,
    var(--openbot-text-primary) var(--message-surface-lift),
    color-mix(in srgb, var(--message-bubble-tint) var(--message-bubble-tint-amount), var(--message-plain-canvas))
  );
  }
  --openbot-bg-sidebar: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --openbot-bg-sidebar: color-mix(
    in srgb,
    var(--openbot-text-primary) var(--message-surface-lift),
    color-mix(in srgb, var(--message-bubble-tint) var(--message-bubble-tint-amount), var(--message-plain-sidebar))
  );
  }
  --openbot-bg-surface: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --openbot-bg-surface: color-mix(
    in srgb,
    var(--openbot-text-primary) var(--message-surface-lift),
    color-mix(in srgb, var(--message-bubble-tint) var(--message-bubble-tint-amount), var(--message-plain-surface))
  );
  }
  --openbot-bg-surface-raised: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --openbot-bg-surface-raised: color-mix(
    in srgb,
    var(--openbot-text-primary) var(--message-surface-lift),
    color-mix(
      in srgb,
      var(--message-bubble-tint) var(--message-bubble-tint-amount),
      var(--message-plain-surface-raised)
    )
  );
  }
  --openbot-bg-control: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --openbot-bg-control: color-mix(
    in srgb,
    var(--openbot-text-primary) var(--message-surface-lift),
    color-mix(in srgb, var(--message-bubble-tint) var(--message-bubble-tint-amount), var(--message-plain-control))
  );
  }
  --openbot-bg-control-hover: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --openbot-bg-control-hover: color-mix(
    in srgb,
    var(--openbot-text-primary) var(--message-surface-lift),
    color-mix(in srgb, var(--message-bubble-tint) var(--message-bubble-tint-amount), var(--message-plain-control-hover))
  );
  }
  --openbot-bg-control-active: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --openbot-bg-control-active: color-mix(
    in srgb,
    var(--openbot-text-primary) var(--message-surface-lift),
    color-mix(
      in srgb,
      var(--message-bubble-tint) var(--message-bubble-tint-amount),
      var(--message-plain-control-active)
    )
  );
  }
  background: var(--message-bubble-tint);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix( in srgb, var(--message-bubble-tint) var(--message-bubble-tint-amount), var(--message-bubble-base) );
  }
}
.ui-bubble.message-bubble-colored :is([data-popper-positioner], [role="dialog"], [role="menu"], [role="listbox"], [role="tooltip"]) {
  --openbot-bg-canvas: var(--message-plain-canvas);
  --openbot-bg-sidebar: var(--message-plain-sidebar);
  --openbot-bg-surface: var(--message-plain-surface);
  --openbot-bg-surface-raised: var(--message-plain-surface-raised);
  --openbot-bg-control: var(--message-plain-control);
  --openbot-bg-control-hover: var(--message-plain-control-hover);
  --openbot-bg-control-active: var(--message-plain-control-active);
}
:is( .message-entry-user .ui-bubble.message-bubble-colored > .ui-bubble-content, .message-entry-agent .ui-bubble-variant-muted.message-bubble-colored > .ui-bubble-content ) :is(.attachment-file-visual, .attachment-reference-visual):not(.message-attachment[data-media] *) {
  background: linear-gradient(var(--file-reference-soft) 0 0), var(--message-plain-control);
}
.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-bg-control-hover);
  color: var(--openbot-text-primary);
  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-inline-end: 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%;
  transform-origin: left bottom;
  animation: message-bubble-in 280ms cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
}
.agent-activity-slot[data-reserved="true"] {
  min-height: 52px;
}
.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-slot[data-reserved="true"] > .agent-activity-entry[data-plain="true"], .agent-activity-slot[data-reserved="true"] > .agent-activity-entry[data-plain="true"][data-state="exiting"] {
  grid-template-rows: 1fr;
  transition: none;
}
.agent-activity-content {
  min-height: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: clip;
  overflow-clip-margin: var(--openbot-space-3);
  padding-block: var(--openbot-space-3) 8px;
  padding-inline: 8px 0;
  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: calc(32px * -0.14);
  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;
}
.agent-activity-entry .agent-activity-avatar {
  transform-origin: center bottom;
  animation: agent-activity-avatar-in 420ms cubic-bezier(0.34, 1.45, 0.64, 1) backwards;
}
@keyframes agent-activity-avatar-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.5);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.agent-activity-entry[data-state="exiting"] .agent-activity-avatar {
  transform: translateY(4px) scale(0.6);
}
.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-entry[data-waiting="true"] .agent-activity-label {
  animation: none;
  background: none;
  color: var(--openbot-text-secondary);
  -webkit-text-fill-color: currentColor;
}
.agent-activity-entry[data-plain="true"]:not([data-waiting="true"]) .agent-activity-label {
  background: linear-gradient( 90deg, var(--openbot-text-primary) 0%, var(--openbot-text-primary) 25%, var(--openbot-text-primary) 60%, var(--openbot-text-primary) 75%, var(--openbot-text-primary) 100% );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient( 90deg, color-mix(in srgb, var(--openbot-text-primary) 40%, transparent) 0%, color-mix(in srgb, var(--openbot-text-primary) 40%, transparent) 25%, var(--openbot-text-primary) 60%, color-mix(in srgb, var(--openbot-text-primary) 40%, transparent) 75%, color-mix(in srgb, var(--openbot-text-primary) 40%, transparent) 100% );
  }
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  animation: agent-activity-label-enter 350ms cubic-bezier(0.2, 0.8, 0.3, 1) backwards, agent-activity-label-shine 2.2s steps(60, end) infinite;
}
.agent-activity-entry[data-plain="true"][data-waiting="true"] .agent-activity-label {
  animation: agent-activity-label-enter 350ms cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
}
@keyframes agent-activity-label-enter {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
}
@keyframes agent-activity-label-shine {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}
@keyframes agent-activity-label-fade {
  from {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .agent-activity-entry[data-plain="true"] .agent-activity-label, .agent-activity-entry[data-plain="true"]:not([data-waiting="true"]) .agent-activity-label {
    animation: agent-activity-label-fade 120ms ease-out backwards;
  }
}
.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);
}
.ui-button.chat-action-routine-thread {
  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: start;
}
.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: start;
  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-routing-targets {
  display: inline-flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.chat-action-routing-separator {
  margin-inline-start: calc(-1 * var(--openbot-space-1-5));
  white-space: pre;
}
.chat-action-target-entering {
  transform-origin: left center;
  animation: message-bubble-in 280ms cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
}
.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, .chat-action-marker-channel-change .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-message-text {
  align-self: stretch;
  margin-block: var(--openbot-space-2);
  text-align: start;
}
.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-inline-start: -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;
}
:root {
  --message-wide-bubble-width: min(100%, max(720px, 70%), 1200px);
  --message-narrow-bubble-width: min(92%, max(420px, 50%), 800px);
}
.message-entry-agent .ui-bubble {
  max-width: var(--message-wide-bubble-width);
}
.message-entry .ui-bubble:has(.image-generation) {
  width: min(420px, 100%);
  max-width: min(420px, 100%);
}
.message-entry .ui-bubble:has(.image-gallery) {
  width: min(520px, 100%);
  max-width: min(520px, 100%);
}
.message-entry-agent .ui-bubble-variant-ghost:has(:is(.image-generation, .image-gallery, .message-code-block, .message-data-table-scroll)) > .ui-bubble-content {
  width: 100%;
}
.message-entry-user .ui-bubble:has(:is(.image-generation, .image-gallery)) > .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;
  inset-inline-end: 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: start;
}
.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;
  inset-inline-end: 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;
  }
}
.pending-send-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.pending-send-label {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  color: var(--openbot-danger-text);
}
.pending-send-label:not(:empty) {
  margin-inline-end: var(--openbot-space-1);
}
.pending-send-label > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: none;
}
.pending-send-error {
  color: var(--openbot-text-muted);
  overflow-wrap: anywhere;
}
.pending-send-error::before {
  content: "·";
  margin-inline-end: var(--openbot-space-1);
}
.message-entry-user.message-entry-actions-beside .message-stack:not(:has(.message-media-before)) {
  width: auto;
  max-width: min(80%, 720px);
  flex: 0 1 auto;
}
.message-entry-user.message-entry-actions-beside .message-stack:not(:has(.message-media-before)) > .ui-bubble {
  max-width: 100%;
}
.message-entry-user.message-entry-actions-beside .message-stack:not(:has(.message-media-before)) + .message-action-row {
  order: -1;
}
.virtual-chat-row[data-grouped="sender"] > .message-entry-agent:first-child .message-shell > .ui-bubble > .ui-bubble-content {
  border-start-start-radius: var(--openbot-radius-sm);
}
.virtual-chat-row[data-grouped="sender"] > .message-entry-user:first-child .message-stack > .ui-bubble:first-child > .ui-bubble-content {
  border-start-end-radius: var(--openbot-radius-sm);
}
.virtual-chat-row:has(+ .virtual-chat-row[data-grouped="sender"] > .message-entry-agent:first-child) > .message-entry-agent:last-child .message-shell > .ui-bubble > .ui-bubble-content {
  border-end-start-radius: var(--openbot-radius-sm);
}
.virtual-chat-row:has(+ .virtual-chat-row[data-grouped="sender"] > .message-entry-user:first-child) > .message-entry-user:last-child .message-stack > .ui-bubble:last-child > .ui-bubble-content {
  border-end-end-radius: var(--openbot-radius-sm);
}
.agent-activity-body {
  min-height: 0;
  overflow: clip;
  overflow-clip-margin: var(--openbot-space-3);
}
.agent-activity-entry[data-state="exiting"] .agent-activity-body {
  overflow-clip-margin: 0;
}
.agent-activity-content .agent-steps-toggle, .agent-activity-steps {
  pointer-events: auto;
}
.agent-activity-content .agent-steps-toggle {
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
}
.agent-activity-content .agent-steps-toggle[aria-expanded="true"]:not(:hover) {
  background: transparent;
}
.agent-activity-steps {
  padding-block: 0 var(--openbot-space-2);
  padding-inline: var(--openbot-space-6) 0;
}
.agent-steps-chevron {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  transition: rotate var(--openbot-duration-fast) var(--openbot-ease-out);
}
.agent-steps-toggle[aria-expanded="true"] .agent-steps-chevron {
  rotate: 180deg;
}
.agent-steps-header[aria-expanded="true"] .agent-steps-chevron {
  rotate: 90deg;
}
.agent-steps {
  display: grid;
  justify-items: start;
  margin-bottom: var(--openbot-space-1);
}
.agent-steps .agent-steps-header {
  display: flex;
  height: auto;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-inline-start: 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: start;
}
.agent-steps .agent-steps-header[aria-expanded="true"]:not(:hover) {
  background: transparent;
  color: inherit;
}
.agent-step-icon {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
}
.agent-steps-summary {
  overflow: hidden;
  font-weight: var(--openbot-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-steps-failed {
  flex: 0 0 auto;
  color: var(--openbot-danger-text);
  font-variant-numeric: tabular-nums;
}
.agent-steps-duration {
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
.agent-steps-panel {
  display: grid;
  width: 100%;
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows var(--openbot-duration-overlay) var(--openbot-ease-out), opacity var(--openbot-duration-normal) var(--openbot-ease-out);
}
@starting-style {
  .agent-steps-panel {
    grid-template-rows: 0fr;
    opacity: 0;
  }
}
.agent-steps-viewport {
  max-height: 220px;
  overflow: hidden;
  padding-inline-start: var(--openbot-space-3);
  border-inline-start: 1px solid var(--openbot-border);
}
.agent-steps-viewport[data-scrolls] {
  overflow-y: auto;
}
.agent-steps-panel > .agent-steps-viewport {
  min-height: 0;
  margin-inline-start: var(--openbot-space-3);
}
.agent-steps-list {
  display: grid;
  gap: var(--openbot-space-1);
  margin: 0;
  padding: var(--openbot-space-1-5) 0;
  list-style: none;
  transition: transform var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.agent-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;
  animation: message-in var(--openbot-duration-normal) var(--openbot-ease-out) both;
}
.agent-step[data-focused] {
  border-radius: var(--openbot-radius-xs);
  animation: agent-step-picked calc(var(--openbot-duration-overlay) * 6) var(--openbot-ease-out) both;
}
@keyframes agent-step-picked {
  from {
    background: var(--openbot-hover);
  }
  to {
    background: transparent;
  }
}
.agent-step .agent-step-icon {
  margin-top: 2px;
}
.agent-step[data-kind="thinking"] .agent-step-text {
  color: var(--openbot-text-muted);
  font-style: italic;
}
.agent-step-text.agent-activity-label {
  display: inline;
  -webkit-line-clamp: unset;
}
.agent-step-memory {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0 var(--openbot-space-2);
  color: var(--openbot-text-primary);
}
.agent-step-memory-action, .agent-step-memory-previous, .agent-step-memory[data-action="forgotten"] s {
  color: var(--openbot-text-muted);
}
.agent-step-failed {
  display: grid;
  min-width: 0;
  flex: 1 1 auto;
  justify-items: start;
}
.agent-step .agent-step-error-toggle {
  display: inline-flex;
  height: auto;
  align-items: center;
  gap: var(--openbot-space-1);
  margin-inline-start: calc(-1 * var(--openbot-space-1));
  border-radius: var(--openbot-radius-xs);
  padding: 0 var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: inherit;
  font-weight: var(--openbot-weight-regular);
  line-height: inherit;
}
.agent-step-error-toggle[aria-expanded="true"] .agent-steps-chevron {
  rotate: 90deg;
}
.agent-step-error {
  max-height: 160px;
  justify-self: stretch;
  margin: var(--openbot-space-1) 0 0;
  overflow: auto;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
@media (prefers-reduced-motion: reduce) {
  .agent-steps-chevron, .agent-steps-panel, .agent-steps-list {
    transition: none;
  }
  .agent-step {
    animation: none;
  }
}
:dir(rtl) svg[class~="lucide-chevron-right"].agent-steps-chevron {
  transform: scaleX(-1);
}
:dir(rtl) .agent-steps-header[aria-expanded="true"] svg[class~="lucide-chevron-right"].agent-steps-chevron, :dir(rtl) .agent-step-error-toggle[aria-expanded="true"] svg[class~="lucide-chevron-right"].agent-steps-chevron {
  rotate: -90deg;
}
.trace {
  --trace-surface: var(--openbot-bg-surface);
  --trace-name-width: min(260px, 45cqw);
  --trace-label-room: min(150px, 25cqw);
  --trace-lane-pad: var(--openbot-space-3);
  --trace-row-height: 36px;
  --trace-bar-height: 16px;
  --trace-hue: var(--openbot-text-muted);
  display: flex;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  background: var(--trace-surface);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.trace-header {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  padding-block: var(--openbot-space-2);
  padding-inline: var(--openbot-space-4) var(--openbot-space-2);
  border-bottom: 1px solid var(--openbot-border);
}
.trace-title {
  flex: 1 1 auto;
  margin: 0;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-md);
}
.ui-select.trace-select {
  width: auto;
  flex: 0 0 auto;
}
.trace-select .trace-select-trigger {
  width: auto;
  gap: var(--openbot-space-1);
  padding-inline: var(--openbot-space-2) var(--openbot-space-1-5);
  font-variant-numeric: tabular-nums;
}
.trace-search {
  position: relative;
  width: min(240px, 100%);
}
.trace-search-icon {
  position: absolute;
  top: 50%;
  inset-inline-start: var(--openbot-space-2);
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  color: var(--openbot-text-muted);
  translate: 0 -50%;
  pointer-events: none;
}
.trace-search .trace-search-input {
  width: 100%;
  padding-inline: calc(var(--openbot-space-2) * 2 + var(--openbot-icon-xs)) var(--openbot-space-8);
}
.trace-search .trace-search-input:focus-visible {
  border-color: var(--openbot-text-muted);
  box-shadow: none;
  outline: none;
}
.trace-search-input::-webkit-search-cancel-button {
  display: none;
}
.trace-search-kbd {
  position: absolute;
  top: 50%;
  inset-inline-end: var(--openbot-space-1-5);
  translate: 0 -50%;
  pointer-events: none;
}
.trace-totals {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  margin-block: 0;
  margin-inline: 0 -1px;
}
.trace-total {
  display: grid;
  flex: 1 1 96px;
  gap: var(--openbot-space-0-5);
  min-width: 0;
  padding: var(--openbot-space-2) var(--openbot-space-3);
  border-inline-end: 1px solid var(--openbot-border);
  border-bottom: 1px solid var(--openbot-border);
}
.trace-total-label {
  overflow: hidden;
  color: var(--openbot-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trace-total-value {
  --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);
  margin: 0;
  font-size: var(--openbot-text-lg);
  font-variant-numeric: tabular-nums;
  line-height: var(--openbot-leading-lg);
}
.trace-body {
  --trace-fade: var(--openbot-space-6);
  --trace-mask-top: linear-gradient(var(--openbot-text-primary), var(--openbot-text-primary));
  --trace-mask-bottom: linear-gradient(var(--openbot-text-primary), var(--openbot-text-primary));
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  container-type: inline-size;
  scrollbar-width: none;
  direction: ltr;
}
.trace-body::-webkit-scrollbar {
  display: none;
}
.trace-body.scroll-fade-top, .trace-body.scroll-fade-bottom {
  mask-image: var(--trace-mask-top), var(--trace-mask-bottom);
  mask-composite: intersect;
}
.trace-body.scroll-fade-top {
  --trace-mask-top: linear-gradient(
    to bottom,
    var(--openbot-text-primary) var(--trace-stack),
    transparent var(--trace-stack),
    var(--openbot-text-primary) calc(var(--trace-stack) + var(--trace-fade))
  );
}
.trace-body.scroll-fade-bottom {
  --trace-mask-bottom: linear-gradient(
    to bottom,
    var(--openbot-text-primary) calc(100% - var(--trace-fade)),
    transparent
  );
}
.trace-grid {
  position: relative;
  z-index: 0;
}
.trace-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}
.trace-row {
  display: grid;
  height: var(--trace-row-height);
  box-sizing: border-box;
  grid-template-columns: var(--trace-name-width) minmax(0, 1fr);
  border-bottom: 1px solid var(--openbot-border);
}
.trace-branch-children {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--openbot-duration-slow) var(--openbot-ease-out);
}
.trace-branch-children[data-open] {
  grid-template-rows: 1fr;
}
.trace-branch-clip {
  min-height: 0;
  overflow: clip;
  opacity: 0;
  transition: opacity var(--openbot-duration-slow) var(--openbot-ease-out);
}
.trace-branch-children[data-open] > .trace-branch-clip {
  opacity: 1;
}
.trace-row {
  transition: opacity var(--openbot-duration-slow) var(--openbot-ease-out);
}
@starting-style {
  .trace-row {
    opacity: 0;
  }
}
.trace-row[data-parent] {
  position: sticky;
  top: calc((var(--trace-depth) + 1) * var(--trace-row-height));
  z-index: 4;
  background: var(--trace-surface);
}
.trace-row[data-hue="1"], .trace-handoff[data-hue="1"] {
  --trace-hue: var(--openbot-chart-storage-downloads);
}
.trace-row[data-hue="2"], .trace-handoff[data-hue="2"] {
  --trace-hue: var(--openbot-chart-storage-files);
}
.trace-row[data-hue="3"], .trace-handoff[data-hue="3"] {
  --trace-hue: var(--openbot-chart-storage-chats);
}
.trace-row[data-hue="4"], .trace-handoff[data-hue="4"] {
  --trace-hue: var(--openbot-chart-storage-workspaces);
}
.trace-row[data-hue="5"], .trace-handoff[data-hue="5"] {
  --trace-hue: var(--openbot-chart-storage-runtimes);
}
.trace-name {
  position: sticky;
  left: 0;
  z-index: 3;
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-1-5);
  --trace-indent: var(--openbot-space-4);
  --trace-guide-at: calc(var(--openbot-control-xs) / 2);
  padding-inline: calc(var(--openbot-space-2) + var(--trace-depth, 0) * var(--trace-indent)) var(--openbot-space-2);
  border-right: 1px solid var(--openbot-border);
  background: linear-gradient(var(--trace-row-tint), var(--trace-row-tint)), repeating-linear-gradient( to right, transparent 0 var(--trace-guide-at), var(--openbot-border) var(--trace-guide-at) calc(var(--trace-guide-at) + 1px), transparent calc(var(--trace-guide-at) + 1px) var(--trace-indent) ) var(--openbot-space-2) 0 / calc(var(--trace-depth, 0) * var(--trace-indent)) 100% no-repeat, var(--trace-surface);
}
.trace-row {
  --trace-row-tint: transparent;
}
.trace-row[data-hovered], .trace-row:has(.trace-name-button:focus-visible) {
  --trace-row-tint: var(--openbot-hover);
}
.trace-row[data-hovered] .trace-bar:not(.trace-segment), .trace-segment[data-hovered] {
  outline: 1px solid var(--openbot-text-secondary);
  outline-offset: 1px;
}
.trace-name .trace-name-button.ui-button {
  height: auto;
  min-width: 0;
  flex: 1 1 auto;
  justify-content: flex-start;
  gap: var(--openbot-space-1-5);
  padding: 0;
  border-radius: var(--openbot-radius-xs);
  background: transparent;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-align: start;
  cursor: default;
}
.trace-row[data-selectable] .trace-name-button.ui-button {
  cursor: pointer;
}
.trace-name .trace-name-button.ui-button:focus-visible {
  box-shadow: none;
  outline: 1px solid var(--openbot-text-muted);
  outline-offset: 1px;
}
.trace-axis-row {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--trace-surface);
}
.trace-axis-name {
  color: var(--openbot-text-muted);
}
.trace-name .trace-toggle[aria-expanded="true"]:not(:hover) {
  background: transparent;
}
.trace-toggle-icon {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  transition: rotate var(--openbot-duration-fast) var(--openbot-ease-out);
}
.trace-toggle[aria-expanded="false"] .trace-toggle-icon {
  rotate: -90deg;
}
.trace-toggle-space {
  width: var(--openbot-control-xs);
  flex: 0 0 auto;
}
.trace-icon {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
}
.trace-glyph {
  display: grid;
  width: 22px;
  height: 22px;
  box-sizing: border-box;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-primary) 4%, var(--trace-surface));
  }
  color: var(--openbot-text-secondary);
}
.trace-glyph[data-agent] {
  color: var(--trace-hue);
}
.trace-row:not([data-hue]) .trace-glyph[data-agent] {
  color: var(--openbot-text-primary);
}
.trace-glyph[data-failed] {
  color: var(--openbot-danger-text);
}
.trace-glyph-icon {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.trace-spinner {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  animation: ui-spin 1s linear infinite;
}
.trace-span-name {
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trace-row[data-parent] .trace-span-name {
  font-weight: var(--openbot-weight-semibold);
}
.trace-row[data-failed] .trace-span-name {
  color: var(--openbot-danger-text);
}
.trace-span-error-row {
  position: relative;
  z-index: 2;
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  padding-inline-start: calc(var(--openbot-space-2) + (var(--trace-depth, 0) + 1) * var(--openbot-space-4));
  border-bottom: 1px solid var(--openbot-border);
  background: var(--trace-surface);
}
.trace-span-error {
  max-height: 160px;
  margin: 0;
  overflow: auto;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.trace-row[data-running] .trace-span-name {
  background: linear-gradient( 90deg, var(--openbot-text-muted) 0%, var(--openbot-text-muted) 35%, var(--openbot-text-primary) 50%, var(--openbot-text-muted) 65%, var(--openbot-text-muted) 100% ) 0 0 / 300% 100%;
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: trace-shine 2s linear infinite;
}
@keyframes trace-shine {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0 0;
  }
}
.trace-span-detail {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trace-lane {
  --trace-scale: calc(100% - var(--trace-lane-pad) - var(--trace-label-room));
  position: relative;
  z-index: 1;
  min-width: 0;
}
.trace-row[data-hovered] .trace-lane {
  background: var(--trace-row-tint);
}
.trace-overlay {
  --trace-scale: calc(100% - var(--trace-lane-pad) - var(--trace-label-room));
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: var(--trace-name-width);
  pointer-events: none;
}
.trace-tick, .trace-gridline, .trace-now, .trace-now-dot, .trace-bar, .trace-handoff, .trace-bar-label {
  position: absolute;
  left: calc(var(--trace-lane-pad) + var(--trace-scale) * var(--trace-at));
}
.trace-tick {
  top: 50%;
  padding-left: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-variant-numeric: tabular-nums;
  translate: 0 -50%;
  white-space: nowrap;
}
.trace-gridline, .trace-now {
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--openbot-border);
}
.trace-now {
  z-index: 2;
  background: var(--openbot-text-dim);
}
.trace-now-dot {
  bottom: 0;
  width: 7px;
  height: 7px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-primary);
  translate: -3px 50%;
}
.trace-bar {
  transform-origin: left center;
  transition: scale var(--openbot-duration-overlay) var(--openbot-ease-out);
}
@starting-style {
  .trace-bar {
    scale: 0 1;
  }
}
.trace-bar {
  top: 50%;
  display: grid;
  width: max(3px, calc(var(--trace-scale) * var(--trace-width)));
  height: var(--trace-bar-height);
  box-sizing: border-box;
  place-items: center;
  overflow: hidden;
  border-radius: var(--openbot-radius-xs);
  translate: 0 -50%;
}
.trace-bar[data-kind="model"], .trace-swatch[data-kind="model"] {
  background-color: var(--trace-hue);
}
.trace-bar[data-kind="tool"], .trace-swatch[data-kind="tool"] {
  background-color: var(--trace-hue);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--trace-hue) 45%, var(--trace-surface));
  }
}
.trace-bar[data-kind="waiting"], .trace-swatch[data-kind="waiting"] {
  border: 1px solid var(--trace-hue);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--trace-hue) 60%, transparent);
  }
  background: repeating-linear-gradient( -45deg, var(--trace-hue) 0 1px, transparent 1px 5px );
  @supports (color: color-mix(in lab, red, red)) {
    background: repeating-linear-gradient( -45deg, color-mix(in srgb, var(--trace-hue) 60%, transparent) 0 1px, transparent 1px 5px );
  }
}
.trace-bar[data-kind="handoff"] {
  border: 1px solid var(--trace-hue);
  background-color: transparent;
}
.trace-bar[data-failed], .trace-swatch[data-failed] {
  border: 0;
  background: var(--openbot-danger);
}
.trace-bar.trace-track {
  border: 0;
  background: var(--trace-hue);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--trace-hue) 16%, transparent);
  }
}
.trace-bar[data-running]:not([data-kind="waiting"]) {
  background-image: linear-gradient( 90deg, transparent 0%, var(--openbot-text-primary) 50%, transparent 100% );
  @supports (color: color-mix(in lab, red, red)) {
    background-image: linear-gradient( 90deg, transparent 0%, color-mix(in srgb, var(--openbot-text-primary) 35%, transparent) 50%, transparent 100% );
  }
  background-repeat: no-repeat;
  background-size: 50% 100%;
  animation: trace-bar-shine 1.6s linear infinite;
}
@keyframes trace-bar-shine {
  from {
    background-position: -100% 0;
  }
  to {
    background-position: 200% 0;
  }
}
.trace-bar-icon {
  width: 12px;
  height: 12px;
  color: var(--openbot-text-on-accent);
}
.trace-handoff {
  --trace-elbow: var(--openbot-space-2);
  --trace-line-top: calc((var(--trace-from) + 1.5) * var(--trace-row-height) + var(--trace-bar-height) / 2);
  --trace-line-rows: calc(var(--trace-to) - var(--trace-from) - 0.5);
  top: calc(var(--trace-line-top) + var(--trace-from-shift, 0px));
  width: var(--trace-elbow);
  height: calc(var(--trace-line-rows) * var(--trace-row-height) - var(--trace-bar-height) / 2 + var(--trace-grow, 0px));
  box-sizing: border-box;
  border-left: 2px dotted var(--trace-hue);
  translate: calc(-1 * var(--trace-elbow)) 0;
  transition: top var(--openbot-duration-slow) var(--openbot-ease-out), height var(--openbot-duration-slow) var(--openbot-ease-out);
}
.trace-handoff:not([data-hue]) {
  --trace-hue: var(--openbot-text-muted);
}
.trace-handoff.trace-handoff-end {
  top: 0;
  height: 50%;
  border-bottom: 2px dotted var(--trace-hue);
  border-left: 0;
}
.trace-handoff.trace-handoff-end[data-last] {
  border-left: 2px dotted var(--trace-hue);
  border-bottom-left-radius: var(--openbot-radius-xs);
}
.trace-handoff.trace-handoff-pass {
  top: 0;
  height: 100%;
}
.trace-bar-label {
  top: 50%;
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  padding-left: var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
  font-variant-numeric: tabular-nums;
  translate: 0 -50%;
  white-space: nowrap;
}
.trace-empty {
  display: grid;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-8) var(--openbot-space-4);
  text-align: center;
}
.trace-empty-title, .trace-empty-description {
  margin: 0;
}
.trace-empty-title {
  font-weight: var(--openbot-weight-medium);
}
.trace-empty-description {
  color: var(--openbot-text-muted);
}
.trace-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2) var(--openbot-space-4);
  padding-block: var(--openbot-space-2);
  padding-inline: var(--openbot-space-4) var(--openbot-space-2);
  border-top: 1px solid var(--openbot-border);
}
.trace-legend {
  --trace-hue: var(--openbot-text-secondary);
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-1) var(--openbot-space-4);
  margin: 0;
  padding: 0;
  color: var(--openbot-text-muted);
  list-style: none;
}
.trace-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.trace-swatch {
  width: 16px;
  height: 8px;
  flex: none;
  box-sizing: border-box;
  border-radius: var(--openbot-radius-xs);
}
.trace-swatch[data-kind="handoff"] {
  height: 2px;
  border-top: 2px dotted var(--trace-hue);
  border-radius: 0;
}
.trace-replay {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
}
.trace-replay .trace-play {
  border-radius: var(--openbot-radius-pill);
}
.trace-replay .trace-select {
  margin-inline-start: var(--openbot-space-1);
}
.ui-dialog-content.trace-dialog {
  width: min(1040px, 100%);
  max-height: min(680px, calc(100dvh - 2 * var(--openbot-space-6)));
  display: flex;
  overflow: hidden;
  outline: 0;
  background: var(--openbot-bg-surface);
}
.trace.trace-in-dialog {
  border: 0;
  border-radius: 0;
}
@media (prefers-reduced-motion: reduce) {
  .trace-branch-children, .trace-branch-clip, .trace-row, .trace-bar, .trace-handoff {
    transition: none;
  }
  .trace-spinner, .trace-row[data-running] .trace-span-name, .trace-bar[data-running] {
    animation: none;
  }
  .trace-toggle-icon {
    transition: none;
  }
}
.agent-chat-empty {
  box-sizing: border-box;
  height: 100%;
  display: grid;
  grid-auto-rows: auto minmax(0, 21rem);
  align-content: center;
  justify-items: center;
  gap: var(--openbot-space-6);
  padding: var(--openbot-space-6) 0;
  container-type: inline-size;
}
.agent-chat-empty-pitch {
  --agent-chat-empty-title-size: var(--openbot-text-display);
  --agent-chat-empty-hand-size: calc(var(--agent-chat-empty-title-size) * 1.2);
  display: grid;
  justify-items: center;
  gap: var(--openbot-space-2);
  text-align: center;
}
.agent-chat-empty-avatar.agent-avatar {
  width: calc(var(--openbot-control-xl) * 1.6);
  height: calc(var(--openbot-control-xl) * 1.6);
  margin-bottom: var(--openbot-space-2);
}
.agent-chat-empty-title {
  margin: 0;
  font-size: var(--agent-chat-empty-title-size);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.agent-chat-empty-title > span {
  display: block;
}
.agent-chat-empty-ready, .agent-chat-empty-description {
  color: var(--openbot-text-muted);
}
.agent-chat-empty-description {
  max-width: 30rem;
  margin: 0;
  font-size: var(--openbot-text-xl);
  line-height: 1.5;
  text-wrap: balance;
}
.agent-chat-empty-hand {
  display: inline-block;
  color: var(--openbot-accent-text);
  font-family: "Bradley Hand", "Noteworthy", "Segoe Print", cursive;
  font-size: var(--agent-chat-empty-hand-size);
  line-height: 1;
  transform: rotate(-2deg);
  clip-path: inset(-0.4em 100% -0.4em -0.2em);
  animation: agent-chat-empty-write calc(var(--openbot-duration-slow) * 2.8) linear calc(var(--openbot-duration-slow) * 2.5) forwards;
}
@keyframes agent-chat-empty-write {
  to {
    clip-path: inset(-0.4em -0.2em -0.4em -0.2em);
  }
}
:dir(rtl) .agent-chat-empty-hand {
  clip-path: inset(-0.4em -0.2em -0.4em 100%);
}
.agent-chat-empty-turn {
  width: min(100%, 40rem);
  min-height: 0;
  overflow: hidden;
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
  mask-image: radial-gradient(ellipse 70% 90% at 50% 20%, var(--openbot-text-primary) 45%, var(--openbot-transparent));
}
.agent-chat-empty-row {
  padding-top: var(--openbot-chat-entry-gap);
}
.agent-chat-empty-showing {
  transition: opacity calc(var(--openbot-duration-slow) * 3.5) var(--openbot-ease-out), filter calc(var(--openbot-duration-slow) * 3.5) var(--openbot-ease-out), transform calc(var(--openbot-duration-slow) * 3.5) var(--openbot-ease-out);
}
.agent-chat-empty-showing[data-leaving] {
  opacity: 0;
  filter: blur(3px);
  transform: translateY(-6px);
}
@container (max-width: 520px) {
  .agent-chat-empty-pitch {
    --agent-chat-empty-title-size: var(--openbot-text-3xl);
  }
  .agent-chat-empty-description {
    font-size: var(--openbot-text-lg);
  }
}
.agent-chat-empty[data-still] .agent-chat-empty-hand {
  animation: none;
  clip-path: none;
}
.message-entry-user .ui-bubble {
  max-width: var(--message-narrow-bubble-width);
}
.message-entry-user .ui-bubble:has(.message-markdown-table-scroll) {
  max-width: var(--message-wide-bubble-width);
}
.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 :is(p, li, h1, h2, h3, h4, h5, h6, th, td) {
  unicode-bidi: plaintext;
}
.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-inline-start: 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-inline-start: var(--openbot-space-0-5) solid var(--openbot-border-strong);
  padding-inline-start: 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%;
  min-width: calc(var(--message-markdown-table-columns) * 112px);
  border-collapse: collapse;
  background: var(--openbot-bg-canvas);
  color: var(--openbot-data-table-text);
}
.message-markdown-table :is(th, td) {
  border-inline-end: 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: start;
  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-inline-end: 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-paper-text);
}
.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-block: 0;
  padding-inline: 11px 10px;
  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);
}
:dir(rtl) :is(.selection-actions-form-shell-hidden, .selection-actions-presets-hidden) {
  transform: translateX(8px);
}
.selection-actions-more-presets {
  max-width: 0;
  gap: 2px;
  margin-inline-start: 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-inline-start var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1);
}
.selection-actions-presets-expanded .selection-actions-more-presets {
  max-width: 262px;
  margin-inline-start: 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-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-inline-start: 1px;
}
.selection-actions-expand svg {
  transition: transform var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1);
}
:dir(rtl) .selection-actions-expand svg {
  scale: -1 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-inline-start: 2px solid var(--openbot-accent);
  border-start-start-radius: 0;
  border-start-end-radius: var(--openbot-radius-sm);
  border-end-end-radius: var(--openbot-radius-sm);
  border-end-start-radius: 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-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-show-full {
  justify-self: start;
}
.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: var(--message-wide-bubble-width);
  max-width: var(--message-wide-bubble-width);
}
.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-block: 4px;
  padding-inline: 10px 6px;
}
.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%;
  display: block;
  font: inherit;
}
.message-code-line {
  min-height: 19px;
  display: flex;
}
.message-code-line-number {
  width: 40px;
  flex: none;
  padding-inline-end: 8px;
  color: var(--openbot-text-dim);
  font-size: var(--openbot-text-sm);
  text-align: end;
  user-select: none;
}
.message-code-line-source {
  min-width: 0;
  padding-inline-end: 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.message-code-caret {
  width: 2px;
  height: 13px;
  display: inline-block;
  margin-inline-start: 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: start;
  vertical-align: top;
  unicode-bidi: plaintext;
}
.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-inline-end: 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-inline-end: 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: start;
  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-inline-start: -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-inline-start: 2px solid var(--openbot-text-dim);
  padding-inline-start: 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-quote {
  max-height: 60px;
  overflow: hidden;
  font-size: var(--openbot-text-sm);
  line-height: 15px;
  overflow-wrap: anywhere;
}
.message-reply-quote[data-clipped] {
  mask-image: linear-gradient(to bottom, var(--openbot-text-primary) 45px, transparent 60px);
}
.message-reply-quote blockquote > :not(:first-child) {
  margin-top: var(--openbot-space-1);
}
.message-reply-quote > .message-markdown > :not(:first-child) {
  margin-top: var(--openbot-space-1);
}
.message-reply-quote .message-markdown-heading {
  font-size: inherit;
  line-height: inherit;
}
.message-reply-quote :not(pre) > code {
  padding-block: 0;
  font-size: inherit;
}
.message-reply-quote .message-markdown-excerpt-code {
  font-family: var(--openbot-font-mono);
  white-space: pre-wrap;
}
[data-slot="bubble"][data-author="user"] .message-reply-context {
  border-inline-start-color: var(--openbot-border-strong);
  color: var(--openbot-text-readable);
}
.message-reply-context[data-opens] {
  position: relative;
  transition: border-inline-start-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-inline-start-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-block: 0;
  inset-inline: -2px 0;
  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-inline-start-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 {
  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-block: 1px;
  padding-inline: 3px 6px;
  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, .side-panel-file-badge )[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, .side-panel-file-badge )[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, .side-panel-file-badge )[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, .side-panel-file-badge )[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, .side-panel-file-badge )[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, .side-panel-file-badge )[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, .side-panel-file-badge )[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-lg);
}
.reference-chip.message-reference-chip .reference-chip-icon, .message-file-reference .attachment-reference-visual {
  display: inline-block;
  margin-inline-end: 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-block: -14% 0;
  margin-inline: -14% 0;
}
.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-block: var(--openbot-space-2);
  padding-inline: var(--openbot-space-4) var(--openbot-space-2);
  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: var(--message-wide-bubble-width);
}
.chat-visual-with-author {
  padding-inline-start: calc(var(--message-author-column) + var(--openbot-space-2));
}
.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);
}
.chat-visual-box {
  position: relative;
  min-width: 0;
}
.chat-visual-box[popover]:not(:popover-open) {
  position: relative;
  inset: auto;
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
}
.chat-visual-box-fill {
  height: 100%;
}
.chat-visual-box:not(:popover-open) > .chat-visual-surface {
  display: contents;
}
.chat-visual-box:popover-open {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  display: grid;
  place-items: center;
  margin: 0;
  border: 0;
  padding: var(--openbot-space-6);
  background: var(--openbot-dialog-overlay);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--openbot-text-primary);
  -webkit-app-region: no-drag;
}
.chat-visual-box:popover-open::backdrop {
  background: transparent;
}
.chat-visual-box:popover-open > .chat-visual-surface {
  width: min(1100px, 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--openbot-radius-xl);
  background: var(--openbot-bg-control);
  box-shadow: 0 0 0 1px var(--openbot-dialog-ring);
}
.chat-visual-box:popover-open .chat-visual-frame {
  min-height: 0;
  flex: 1;
  background: var(--openbot-bg-sidebar);
}
.chat-visual-actions {
  position: absolute;
  top: var(--openbot-space-2);
  inset-inline-end: var(--openbot-space-2);
  display: flex;
  gap: var(--openbot-space-1);
  opacity: 0;
  transition: opacity var(--openbot-duration-hover) var(--openbot-ease-out);
}
.chat-visual-actions svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.chat-visual-box:popover-open > .chat-visual-actions {
  display: none;
}
.chat-visual-box:hover > .chat-visual-actions, .chat-visual-box:focus-within > .chat-visual-actions {
  opacity: 1;
}
@media (hover: none) {
  .chat-visual-actions {
    opacity: 1;
  }
}
.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-block: 6px;
  padding-inline: 12px 8px;
  box-shadow: 0 7px 22px var(--openbot-shadow-popover-ambient);
}
.composer-reply-preview > div {
  min-width: 0;
  flex: 1;
}
.composer-reply-preview > div > span {
  display: block;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: 550;
  line-height: 14px;
}
.composer-reply-preview .message-reply-quote {
  margin: 1px 0 0;
  color: var(--openbot-text-secondary);
}
.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 {
  --composer-resize-duration: 300ms;
  --composer-resize-ease: linear(
    0,
    0.01588 2%,
    0.05618 4%,
    0.11201 6%,
    0.1768 8%,
    0.2458 10%,
    0.31562 12%,
    0.38392 14%,
    0.44914 16%,
    0.51029 18%,
    0.56683 20%,
    0.61852 22%,
    0.66534 24%,
    0.70743 26%,
    0.74501 28%,
    0.77838 30%,
    0.80788 32%,
    0.83383 34%,
    0.85658 36%,
    0.87645 38%,
    0.89376 40%,
    0.92183 44%,
    0.94282 48%,
    0.95838 52%,
    0.96984 56%,
    0.97823 60%,
    0.98435 64%,
    0.98878 68%,
    0.99198 72%,
    0.99594 80%,
    0.99829 90%,
    1
  );
  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), height var(--composer-resize-duration) var(--composer-resize-ease);
}
.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-muted);
  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 {
  inset-inline-end: 46px;
  width: 28px;
  transition: width var(--voice-morph-exit-duration) var(--openbot-ease-out);
}
.voice-morph-send-blob, .voice-morph-finish-blob {
  inset-inline-end: 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);
}
:dir(rtl) .voice-morph[data-recording] .voice-morph-finish-blob {
  transform: translateX(34px) scale(0.8);
}
.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-block: 0;
  padding-inline: 12px 3px;
  color: var(--openbot-text-secondary);
  animation: voice-morph-content-in var(--openbot-duration-slow) var(--openbot-ease-out) var(--openbot-duration-fast) both;
}
.voice-morph[data-countdown] {
  --voice-bar-width: 188px;
}
.voice-recording-status[data-tone="warning"] {
  color: var(--openbot-warning-text);
}
.voice-recording-remaining {
  flex: 0 0 auto;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
.voice-recording-status[data-tone="warning"] .voice-recording-remaining {
  color: var(--openbot-warning-text);
}
.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);
  direction: ltr;
}
.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: var(--composer-editor-limit, max(48px, 33dvh));
}
.composer-wrap {
  --composer-editor-limit: max(48px, min(130px, 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-surface:has(.composer-mention-token) {
  padding-block: 2px;
  line-height: 24px;
}
.composer[data-compact] .composer-editor-placeholder {
  top: 4px;
  inset-inline-start: 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;
  unicode-bidi: plaintext;
}
.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-inline-start: 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;
  inset-inline-start: 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;
  inset-inline-start: 0;
}
.composer[data-resizing] {
  min-height: 0;
  overflow: clip;
}
.composer[data-resizing][data-compact] {
  align-content: end;
}
.composer[data-resizing]:not([data-compact]) .composer-input-label {
  min-height: 0;
  align-items: flex-start;
  overflow: clip;
}
@media (prefers-reduced-motion: reduce) {
  .composer {
    --composer-resize-duration: 120ms;
    --composer-resize-ease: ease;
  }
}
.composer-mention-token.composer-tag-unavailable {
  border: 1px dashed var(--openbot-border-strong);
  background: transparent;
  padding-inline-start: var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
}
.composer-file-reference {
  height: 24px;
  cursor: pointer;
  user-select: none;
}
.composer-file-reference-image {
  width: var(--openbot-space-4);
  height: var(--openbot-space-4);
  flex: none;
  border-radius: var(--openbot-radius-sm);
  object-fit: cover;
}
.composer-file-reference-size {
  flex: none;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
  font-variant-numeric: tabular-nums;
}
.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 {
  --mention-picker-title-height: 24px;
  --mention-picker-section-gap: var(--openbot-space-1);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  height: calc( var(--mention-picker-rows, 0) * var(--mention-picker-row-height) + var(--mention-picker-sections, 0) * var(--mention-picker-title-height) + max(var(--mention-picker-sections, 0) - 1, 0) * var(--mention-picker-section-gap) + 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;
  scroll-padding-block: var(--openbot-space-4);
  transition: none;
}
.mention-picker-section {
  display: flex;
  height: var(--mention-picker-title-height);
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 8px 4px;
  color: var(--openbot-queue-action);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.mention-picker-section-count {
  font-variant-numeric: tabular-nums;
}
.mention-picker-option + .mention-picker-section {
  margin-top: var(--mention-picker-section-gap);
}
.mention-picker-highlight {
  position: absolute;
  top: 0;
  right: var(--mention-picker-gutter);
  left: var(--mention-picker-gutter);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-hover);
  pointer-events: none;
  transition: transform var(--openbot-duration-fast) var(--openbot-ease-out), height var(--openbot-duration-fast) var(--openbot-ease-out);
}
.mention-picker-highlight[data-instant] {
  transition: none;
}
.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%;
  position: relative;
  z-index: 1;
  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: start;
}
.mention-picker-file-option .attachment-reference-visual {
  width: 20px;
  height: 20px;
}
.mention-picker-option[data-entering] {
  animation: mention-picker-row-in var(--openbot-duration-fast) var(--openbot-ease-out) both;
}
@keyframes mention-picker-row-in {
  from {
    opacity: 0;
  }
}
.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;
  color: var(--mention-picker-name-color);
  max-width: 50%;
  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-option[data-filtering] {
  --mention-picker-name-color: var(--openbot-queue-action);
}
.mention-picker-match {
  background: transparent;
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}
.mention-picker-badge {
  margin-inline-start: auto;
  flex: 0 0 auto;
  color: var(--openbot-queue-action);
}
.mention-picker-badge > svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.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-block: 7px;
  padding-inline: 8px 12px;
}
.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;
}
.composer-attachment-preview.ui-button {
  border: 0;
  padding: 0;
  cursor: zoom-in;
}
.composer-attachment[data-pending] .composer-attachment-preview img {
  opacity: 0.5;
}
.composer-attachment[data-pending] > .ui-spinner {
  position: absolute;
  inset: 0;
  margin: auto;
}
.composer-attachment[data-upload="uploading"] {
  border-style: dashed;
}
.composer-attachment[data-upload="failed"] {
  border-color: var(--openbot-danger);
}
.composer-attachment[data-upload="failed"] .composer-attachment-copy small {
  color: var(--openbot-danger-text);
}
.composer-upload-ring {
  width: 28px;
}
.composer-upload-failed-icon {
  width: 18px;
  height: 18px;
  color: var(--openbot-danger-text);
}
.composer-upload-retry {
  flex: none;
  margin-inline-end: -4px;
  color: var(--openbot-danger-text);
}
.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: start;
}
.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);
  }
}
.attachment-download-ring {
  --ui-radial-progress-color: var(--openbot-text-primary);
  width: var(--openbot-control-xs);
}
.attachment-download-stop .ui-radial-progress-chart {
  width: 100%;
  height: 100%;
}
.attachment-download-stop .ui-radial-progress-content {
  padding: 0;
}
.attachment-download-stop .ui-radial-progress-content svg {
  width: var(--openbot-glyph-sm);
  height: var(--openbot-glyph-sm);
  fill: currentcolor;
  stroke: none;
}
.message-attachment[data-download] small {
  overflow: hidden;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.message-attachment[data-download="failed"] small {
  color: var(--openbot-danger);
}
.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-block: var(--queue-row-gutter) 0;
  padding-inline: var(--queue-row-inset-start) var(--queue-row-inset-end);
  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-loading {
  position: relative;
  z-index: 1;
  display: grid;
  grid-area: 1 / 1;
  animation: image-gallery-loading-in 0s 400ms both;
}
@keyframes image-gallery-loading-in {
  from {
    visibility: hidden;
  }
}
.image-gallery-tile img {
  grid-area: 1 / 1;
  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-mac-controls .image-lightbox-toolbar {
  padding-inline-start: 82px;
}
.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-copy svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
}
.image-lightbox-zoom {
  display: flex;
  align-items: center;
}
:where(.ui-button).image-lightbox-zoom-level {
  min-width: 56px;
  font-variant-numeric: tabular-nums;
}
.image-lightbox-stage {
  position: relative;
  min-height: 0;
  touch-action: none;
}
.image-lightbox-stage[data-zoomed] {
  overflow: hidden;
}
.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;
  -webkit-user-drag: none;
}
.image-lightbox-image[data-zoomed] {
  will-change: auto;
  cursor: grab;
}
.image-lightbox-stage[data-dragging] .image-lightbox-image {
  cursor: grabbing;
}
.image-lightbox-image[data-settling] {
  transition: scale var(--openbot-duration-slow) var(--openbot-ease-out), translate var(--openbot-duration-slow) var(--openbot-ease-out);
}
.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;
  direction: ltr;
}
.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;
  }
}
.agent-queue-panel-list {
  max-height: calc(7 * var(--queue-row-height) + 2 * var(--queue-row-gutter));
  overflow-y: auto;
  padding-block: var(--queue-row-gutter);
  padding-inline: var(--queue-row-inset-start) var(--queue-row-inset-end);
  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-block: 0;
  inset-inline: calc(var(--queue-row-gutter) - var(--queue-row-inset-start)) calc(var(--queue-row-gutter) - var(--queue-row-inset-end));
  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-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;
}
.conversation-heading-group:has(.agent-threads-header) {
  min-width: 0;
  flex: 1 1 0;
  margin-inline-end: 6px;
}
.agent-threads-header {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 3px;
  margin-inline-start: 4px;
}
.conversation-title.ui-button[data-tab] {
  height: var(--openbot-control-sm);
  gap: var(--openbot-space-1-5);
  padding-block: 0;
  padding-inline: var(--openbot-space-1-5) var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
  color: var(--openbot-text-secondary);
}
.conversation-title.ui-button[data-tab] h1 {
  color: inherit;
  font-size: var(--openbot-text-sm);
}
.conversation-title.ui-button[data-tab]:hover {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}
.conversation-title.ui-button[data-tab][data-selected] {
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
}
.conversation-heading-group:has(> .conversation-title[data-tab] + .agent-threads-header) {
  gap: 0;
}
.conversation-heading-group:has(.conversation-title[data-tab]) .agent-threads-header {
  margin-inline-start: 1px;
}
.agent-threads-header[data-mode="minimal"] {
  flex-shrink: 0;
}
.conversation-heading-group:has(.agent-threads-header[data-mode="minimal"]) .conversation-title {
  min-width: 0;
  flex-shrink: 1;
}
.conversation-heading-group:has(.agent-threads-header[data-fold]) .conversation-title {
  position: relative;
  flex-shrink: 0;
  padding-inline-end: var(--openbot-space-1-5);
}
.conversation-heading-group:has(.agent-threads-header[data-fold]) .conversation-title h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.conversation-heading-group:has(.agent-threads-header[data-fold]:not([data-fold="name"])) {
  overflow: clip;
}
.conversation-header:has(.agent-threads-header[data-fold]:not([data-fold="name"])) .provider-model-trigger > .provider-model-chevron {
  display: none;
}
.agent-threads-header:is([data-fold="list"], [data-fold="all"]), .conversation-heading-group:has(.agent-threads-header[data-fold="all"]) .conversation-title {
  visibility: hidden;
}
.agent-threads-tabs-area {
  position: relative;
  display: flex;
  min-width: 0;
}
.agent-threads-tabs-trigger, .agent-threads-tabs-root {
  display: flex;
  min-width: 0;
}
.agent-threads-rename.ui-input {
  position: absolute;
  top: 50%;
  z-index: 2;
  height: var(--openbot-control-sm);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: var(--openbot-text-sm);
  transform: translateY(-50%);
}
.agent-threads-tabs.ui-sliding-tabs {
  min-width: 0;
  max-width: 100%;
  padding-inline-end: 0;
  overflow-x: auto;
  gap: var(--openbot-space-1);
  background: transparent;
  box-shadow: none;
  scrollbar-width: none;
  direction: ltr;
}
.agent-threads-tabs[data-more-before] {
  mask-image: linear-gradient(to right, transparent, var(--openbot-text-primary) 24px);
}
.agent-threads-tabs[data-more-after] {
  mask-image: linear-gradient(to left, transparent, var(--openbot-text-primary) 24px);
}
.agent-threads-tabs[data-more-before][data-more-after] {
  mask-image: linear-gradient( to right, transparent, var(--openbot-text-primary) 24px, var(--openbot-text-primary) calc(100% - 24px), transparent );
}
.agent-threads-tabs .agent-threads-fill {
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control-active);
}
.agent-threads-tabs .agent-threads-main-key {
  display: none;
}
.agent-threads-tab.ui-sliding-tabs-trigger {
  display: inline-flex;
  width: 140px;
  min-width: 96px;
  max-width: 140px;
  flex: 0 1 auto;
  align-items: center;
  gap: var(--openbot-space-1-5);
  padding-block: 0;
  padding-inline: var(--openbot-space-1-5) var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
  animation: agent-threads-tab-in var(--openbot-duration-normal) var(--openbot-ease-out);
  transition: color var(--sliding-tabs-duration) var(--sliding-tabs-ease), transform var(--sliding-tabs-duration) var(--sliding-tabs-ease);
}
.agent-threads-tab-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agent-threads-title-numbered {
  display: flex;
  white-space: nowrap;
}
.agent-threads-title-root {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agent-threads-title-number {
  flex: none;
  white-space: pre;
}
.agent-threads-tab.ui-sliding-tabs-trigger[data-renaming] {
  outline: 1px solid var(--openbot-border-focus);
  outline-offset: -1px;
  background-color: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
}
.agent-threads-tab[data-renaming] .agent-threads-tab-title {
  visibility: hidden;
}
.agent-threads-tab.ui-sliding-tabs-trigger:not([aria-selected="true"], [data-renaming]):is(:hover, [data-menu-open]) {
  background-color: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}
.agent-threads-tab-close {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  border-radius: var(--openbot-radius-pill);
}
.agent-threads-tab-icon, .agent-threads-tab-x {
  grid-area: 1 / 1;
}
.agent-threads-tab-icon {
  display: grid;
  opacity: 0.7;
}
.agent-threads-tab-icon > svg, .agent-threads-tab-x {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.agent-threads-tab-x {
  opacity: 0;
}
.agent-threads-tab:hover:where(:not([data-renaming])) .agent-threads-tab-close {
  background: var(--openbot-bg-control-hover);
}
.agent-threads-tab:hover:where(:not([data-renaming])) .agent-threads-tab-icon {
  opacity: 0;
}
.agent-threads-tab:hover:where(:not([data-renaming])) .agent-threads-tab-x {
  opacity: 1;
}
.agent-threads-tab-close:hover {
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
}
.agent-threads-tab[data-renaming] .agent-threads-tab-close {
  pointer-events: none;
}
.agent-threads-tab-close:has(.agent-threads-state) {
  width: auto;
  min-width: var(--openbot-icon-md);
  height: auto;
  min-height: var(--openbot-icon-md);
}
.agent-threads-tab:not(:hover) .agent-threads-tab-icon:has(.agent-threads-state) {
  opacity: 1;
}
.agent-threads-icon-button.ui-button {
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-sm);
  color: var(--openbot-text-muted);
}
.agent-threads-switcher.ui-button {
  min-width: 0;
  max-width: 200px;
  height: var(--openbot-control-sm);
  flex: 0 1 auto;
  gap: var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-md);
  background-color: var(--openbot-bg-control-active);
  padding-block: 0;
  padding-inline: var(--openbot-space-1-5) var(--openbot-space-1);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
}
.agent-threads-switcher.ui-button:hover, .agent-threads-switcher.ui-button[aria-expanded="true"] {
  background-color: var(--openbot-bg-control-hover);
}
.agent-threads-switcher-icon {
  display: grid;
  flex: none;
  place-items: center;
  min-width: var(--openbot-icon-md);
  min-height: var(--openbot-icon-md);
}
.agent-threads-switcher-icon > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  opacity: 0.7;
}
.agent-threads-switcher-chevron {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: none;
  color: var(--openbot-text-muted);
}
.agent-threads-menu {
  width: 320px;
}
.agent-threads-menu-list {
  --agent-threads-fade-top: 0px;
  --agent-threads-fade-bottom: 0px;
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: none;
}
.agent-threads-menu .agent-threads-menu-list:is(.scroll-fade-top, .scroll-fade-bottom) {
  mask-image: linear-gradient( to bottom, transparent, var(--openbot-text-primary) var(--agent-threads-fade-top), var(--openbot-text-primary) calc(100% - var(--agent-threads-fade-bottom)), transparent );
}
.agent-threads-menu-list.scroll-fade-top {
  --agent-threads-fade-top: 24px;
}
.agent-threads-menu-list.scroll-fade-bottom {
  --agent-threads-fade-bottom: 24px;
}
.agent-threads-menu-item {
  gap: 8px;
}
.agent-threads-menu .agent-threads-menu-list .agent-threads-menu-item[aria-current] {
  background: var(--ui-menu-item-hover);
}
.agent-threads-menu-stem {
  display: flex;
  flex: none;
  align-self: stretch;
  margin-block: calc(var(--openbot-space-1-5) * -1);
}
.agent-threads-stem-rail, .agent-threads-stem-elbow {
  position: relative;
  width: 16px;
}
.agent-threads-stem-line::before, .agent-threads-stem-elbow::before, .agent-threads-stem-elbow::after {
  position: absolute;
  inset-inline-start: 7px;
  border: 0 solid var(--openbot-text-muted);
  @supports (color: color-mix(in lab, red, red)) {
    border: 0 solid color-mix(in srgb, var(--openbot-text-muted) 60%, transparent);
  }
  content: "";
}
.agent-threads-stem-line::before, .agent-threads-stem-elbow::before {
  inset-block: 0;
  border-inline-start-width: 1px;
}
.agent-threads-stem-elbow::after {
  top: 50%;
  inset-inline-end: 0;
  border-top-width: 1px;
}
.agent-threads-stem-last::before {
  inset-inline-end: 0;
  bottom: 50%;
  border-bottom-width: 1px;
  border-end-start-radius: 6px;
}
.agent-threads-stem-last::after {
  content: none;
}
.agent-threads-menu-title {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-threads-menu-time {
  min-width: 44px;
  flex: 0 0 auto;
  white-space: nowrap;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  text-align: end;
}
.agent-threads-state {
  display: inline-flex;
  height: 16px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: var(--openbot-radius-pill);
}
.agent-threads-unread {
  width: 8px;
  height: 8px;
  background: var(--openbot-unread-surface);
}
.agent-threads-state-working {
  width: 24px;
  background: var(--openbot-bg-control);
  color: var(--openbot-text-secondary);
}
@keyframes agent-threads-tab-in {
  from {
    opacity: 0;
    transform: translateY(2px);
  }
}
.agent-threads-tab[data-attention], .agent-threads-switcher[data-attention], .side-panel-thread-tab[data-attention] {
  background-image: linear-gradient(var(--agent-threads-tint), var(--agent-threads-tint));
}
:is(.agent-threads-tab, .agent-threads-switcher, .side-panel-thread-tab)[data-attention="waiting"] {
  --agent-threads-tint: var(--openbot-warning-soft);
  @supports (color: color-mix(in lab, red, red)) {
    --agent-threads-tint: color-mix(in srgb, var(--openbot-warning-soft) 40%, var(--openbot-transparent));
  }
}
:is(.agent-threads-tab, .agent-threads-switcher, .side-panel-thread-tab)[data-attention="failed"] {
  --agent-threads-tint: var(--openbot-danger-soft);
  @supports (color: color-mix(in lab, red, red)) {
    --agent-threads-tint: color-mix(in srgb, var(--openbot-danger-soft) 40%, var(--openbot-transparent));
  }
}
.agent-threads-tabs .ui-sliding-tabs-pill:not(.agent-threads-fill) {
  display: none;
}
.agent-threads-tab + .agent-threads-tab::before, :where(.conversation-heading-group:has(.conversation-title[data-tab])) .agent-threads-main-key + .agent-threads-tab::before {
  position: absolute;
  top: 50%;
  inset-inline-start: calc(var(--openbot-space-1) / -2 - 0.5px);
  width: 1px;
  height: var(--openbot-icon-lg);
  background: var(--openbot-border-strong);
  content: "";
  transform: translateY(-50%);
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}
:where(.conversation-heading-group:has(.conversation-title:is([data-selected], :hover))) .agent-threads-main-key + .agent-threads-tab::before {
  opacity: 0;
}
.agent-threads-tab[aria-selected="true"]::before, .agent-threads-tab[aria-selected="true"] + .agent-threads-tab::before, .agent-threads-tab[data-attention]::before, .agent-threads-tab[data-attention] + .agent-threads-tab::before, .agent-threads-tab:hover::before, .agent-threads-tab:hover + .agent-threads-tab::before {
  opacity: 0;
}
.agent-threads-tabs[data-dragging] {
  cursor: grabbing;
  user-select: none;
}
.agent-threads-tabs[data-dragging] .agent-threads-tab {
  cursor: grabbing;
}
.agent-threads-tab.ui-sliding-tabs-trigger[data-dragged=""] {
  z-index: 2;
  background-color: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
  transition: color var(--sliding-tabs-duration) var(--sliding-tabs-ease);
}
.agent-threads-tab.ui-sliding-tabs-trigger[data-dragged="away"] {
  opacity: 0.4;
}
.agent-threads-tabs[data-dragging] .agent-threads-fill {
  transition: none;
}
.agent-threads-tabs[data-dragging] .agent-threads-tab::before, .agent-threads-tabs[data-dragging] .agent-threads-tab-x {
  opacity: 0;
}
.agent-threads-tabs[data-dragging] .agent-threads-tab-close {
  background: transparent;
}
.agent-threads-tabs[data-dragging] .agent-threads-tab-icon {
  opacity: 0.7;
}
.agent-threads-tabs[data-dragging] .agent-threads-tab-icon:has(.agent-threads-state) {
  opacity: 1;
}
.agent-threads-header[data-drop-target] {
  border-radius: var(--openbot-radius-md);
  outline: 1px dashed var(--openbot-text-secondary);
  outline-offset: 2px;
  background: var(--openbot-bg-control-hover);
}
.agent-threads-tab-mark-slot {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: 0fr;
  margin-inline-start: -4px;
  opacity: 0;
  transition: grid-template-columns var(--sliding-tabs-duration) var(--sliding-tabs-ease), margin-inline-start var(--sliding-tabs-duration) var(--sliding-tabs-ease), opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}
.agent-threads-tab-mark-slot[data-open] {
  grid-template-columns: 1fr;
  margin-inline-start: 0;
  opacity: 1;
}
.agent-threads-tab-mark {
  min-width: 0;
  overflow-x: clip;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  color: var(--openbot-text-secondary);
}
.agent-threads-menu-item .agent-threads-tab-mark {
  width: 24px;
  justify-content: center;
}
.agent-threads-state-icon {
  width: 20px;
  height: 20px;
  background: var(--openbot-bg-control);
  color: var(--openbot-text-muted);
}
.agent-threads-state-icon svg {
  width: 12px;
  height: 12px;
}
.agent-threads-tab-mark[data-kind="waiting"] .agent-threads-state-icon {
  background: var(--openbot-warning-soft);
  color: var(--openbot-warning-text);
}
.agent-threads-tab-mark[data-kind="failed"] .agent-threads-state-icon {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger-text);
}
.agent-thread-origin {
  margin: 0;
  padding-top: var(--openbot-chat-entry-gap);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.agent-thread-branch-divider {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--openbot-space-2);
  margin: var(--openbot-space-2) 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.agent-thread-branch-divider hr {
  height: 1px;
  flex: 1;
  border: 0;
  background: var(--openbot-border);
}
.agent-thread-branch-text, .agent-thread-branch-divider .agent-thread-branch-link {
  display: inline-flex;
  flex: 0 1 auto;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-1);
  color: inherit;
  font-size: inherit;
}
.agent-thread-branch-text svg, .agent-thread-branch-link svg {
  width: 14px;
  height: 14px;
  flex: none;
}
.agent-thread-branch-text span, .agent-thread-branch-link span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-thread-queued {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  padding-top: var(--openbot-chat-entry-gap);
}
.agent-thread-queued-text {
  margin: 0;
  overflow: hidden;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-thread-composer .composer-editor-placeholder {
  inset-inline-end: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .agent-threads-tab.ui-sliding-tabs-trigger {
    animation: none;
    transition: none;
  }
  .agent-threads-tab-mark-slot {
    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-lg);
}
.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-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-2) var(--openbot-space-1);
  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;
}
.voice-panel-speed {
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
@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;
}
.voice-player-speed {
  flex: none;
  width: calc(var(--openbot-space-6) * 2);
  padding-inline: 0;
  border-radius: var(--openbot-radius-pill);
  font-variant-numeric: tabular-nums;
}
.conversation-panel[data-settings-panel] .conversation-header, .conversation-panel[data-settings-panel] .conversation-scroll, .conversation-panel[data-settings-panel] .composer-wrap {
  width: calc(100% - var(--settings-panel-width, 360px));
}
.conversation-panel[data-settings-panel] .chat-search {
  inset-inline-end: calc(var(--settings-panel-width, 360px) + 16px);
  max-width: calc(100% - var(--settings-panel-width, 360px) - 32px);
}
.conversation-panel[data-browser-side-panel] .chat-search, .conversation-panel[data-file-preview-panel] .chat-search {
  inset-inline-end: calc(var(--browser-panel-width, 380px) + 16px);
  max-width: calc(100% - var(--browser-panel-width, 380px) - 32px);
}
.conversation-panel[data-browser-side-panel] .conversation-header, .conversation-panel[data-browser-side-panel] .conversation-scroll, .conversation-panel[data-browser-side-panel] .composer-wrap, .conversation-panel[data-file-preview-panel] .conversation-header, .conversation-panel[data-file-preview-panel] .conversation-scroll, .conversation-panel[data-file-preview-panel] .composer-wrap {
  width: 100%;
}
@keyframes message-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes message-bubble-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes message-sent-in {
  from {
    transform: translateY(12px);
  }
  to {
    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, .message-entry-animated, .chat-action-entry-animated, .chat-action-target-entering, .agent-activity-entry, .agent-activity-content, .agent-activity-avatar, .agent-activity-entry .agent-activity-avatar, .agent-row-thinking-dots i, .agent-row-agent-status-responded, .agent-row-agent-status-unread, .mention-picker, .mention-picker-list, .mention-picker-highlight, .mention-picker-option[data-entering], .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;
  inset-inline-end: 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%;
  inset-inline-start: 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;
  direction: ltr;
}
.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-block: 0;
  padding-inline: var(--openbot-space-1-5) var(--openbot-space-2);
  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%;
  inset-inline-start: 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-file-tab .side-panel-tab-close {
  width: auto;
  min-width: var(--openbot-icon-md);
}
.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]) {
    width: auto;
    min-width: 0;
    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);
}
.side-panel-file-tab {
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.side-panel-file-badge {
  display: inline-flex;
}
.side-panel-file-badge > .attachment-reference-visual > svg {
  width: 12px;
  height: 12px;
}
.side-panel-file-tab .side-panel-tab-select {
  flex: 0 1 auto;
}
.side-panel-docked .file-preview-header > .file-preview-file-icon {
  display: none;
}
.side-panel-docked .file-preview-header > h2 {
  visibility: hidden;
}
.side-panel-docked > .file-preview-panel.t-panel-slide {
  transition: none;
}
.side-panel-tab-close:has(.agent-threads-state) {
  width: auto;
  min-width: var(--openbot-icon-md);
  height: auto;
  min-height: var(--openbot-icon-md);
}
.side-panel-tab:not(:hover, :focus-within) .side-panel-tab-icon:has(.agent-threads-state) {
  opacity: 1;
}
.side-panel-tab-icon .agent-threads-state-icon svg {
  width: 12px;
  height: 12px;
}
.side-panel-thread-tab {
  flex: 0 1 auto;
  width: 140px;
  min-width: 96px;
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.side-panel-thread-tab .side-panel-tab-select {
  flex: 1;
  text-align: start;
}
.side-panel-tabs[data-dragging], .side-panel-tabs[data-dragging] .side-panel-tab-select {
  cursor: grabbing;
  user-select: none;
}
.side-panel-tabs[data-dragging] > :is(.side-panel-thread-tab, .side-panel-file-tab)[data-dragged=""] {
  z-index: 2;
  background-color: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
  transition: none;
}
.side-panel-tabs[data-dragging] > .side-panel-thread-tab[data-dragged="away"] {
  opacity: 0.4;
}
.side-panel-tabs[data-dragging] > .side-panel-tab::before, .side-panel-tabs[data-dragging] .side-panel-tab-x {
  opacity: 0;
}
.side-panel-tabs[data-dragging] .side-panel-tab-close {
  background: transparent;
}
.side-panel-tabs[data-dragging] .side-panel-tab-icon {
  opacity: 0.7;
}
.side-panel-tabs[data-dragging] .side-panel-tab-icon:has(.agent-threads-state) {
  opacity: 1;
}
.thread-tab-ghost {
  position: fixed;
  z-index: 1000;
  max-width: 140px;
  white-space: nowrap;
  border: 1px solid var(--openbot-border);
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
  pointer-events: none;
  translate: -50% -50%;
}
.thread-tab-ghost .side-panel-tab-label {
  overflow: hidden;
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
}
.side-panel-drop {
  position: absolute;
  z-index: 17;
  top: calc(var(--left-header-height, 38px) + var(--openbot-space-2));
  inset-inline-end: var(--openbot-space-2);
  bottom: var(--openbot-space-2);
  display: grid;
  width: calc(var(--side-panel-width, 380px) - 2 * var(--openbot-space-2));
  place-items: start center;
  padding-top: var(--openbot-space-6);
  border: 1px dashed var(--openbot-text-secondary);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .side-panel-thread-tab, .side-panel-file-tab {
    transition: none;
  }
}
.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-block: var(--notice-inset) calc(var(--notice-inset) + var(--notice-composer-overlap));
  padding-inline: 12px var(--notice-inset);
  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-inline-end: 12px;
}
.composer-notice-icon {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--notice-accent);
  stroke-width: var(--openbot-icon-stroke-lg);
}
.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-action {
  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-action:is(:hover, :focus-visible):not(:disabled) {
  background: var(--ui-menu-item-hover);
}
.context-meter-action > 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);
  direction: ltr;
}
.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);
  stroke-width: var(--openbot-icon-stroke);
}
.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;
}
.composer-stack {
  --composer-stack-inset: var(--openbot-space-3);
}
@media (max-width: 620px) {
  .composer-stack {
    --composer-stack-inset: 2px;
  }
}
.composer-stack:has(> :not(.agent-queue-slot), > .agent-queue-slot > .agent-queue-slot-inner > *) {
  --composer-stack-overlap: 14px;
  position: relative;
  z-index: 10;
  overflow: hidden;
  margin: 0 var(--composer-stack-inset) calc(-1 * var(--composer-stack-overlap));
  border: 1px solid var(--openbot-queue-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-queue-surface);
  padding-bottom: var(--composer-stack-overlap);
}
.composer-stack :is(.awaiting-replies, .agent-queue-panel, .composer-notice, .composer-reply-preview) {
  z-index: auto;
  margin: -1px 0 0;
  border: 0;
  border-top: 1px solid var(--openbot-queue-border);
  border-radius: 0;
  box-shadow: none;
}
.composer-stack :is(.awaiting-replies, .agent-queue-panel) {
  padding-bottom: 0;
}
.composer-stack .composer-notice {
  padding-bottom: var(--notice-inset);
}
@media (prefers-reduced-motion: no-preference) {
  .composer-stack:has(> .context-compaction-notice[data-leaving]):not( :has(> :not(.agent-queue-slot, [data-leaving]), > .agent-queue-slot > .agent-queue-slot-inner > *) ) {
    animation: context-compaction-notice-out var(--openbot-duration-toast-exit) var(--openbot-ease-in-out) forwards;
  }
}
.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 {
  width: min(540px, 100%);
  margin: var(--openbot-space-3) 0 var(--openbot-space-6);
  animation: browser-takeover-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}
.browser-takeover-preview {
  min-width: 0;
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  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-surface-raised);
  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-lg);
}
.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;
}
@keyframes browser-takeover-in {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.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-button {
  border-radius: var(--openbot-radius-pill);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-regular);
}
.approval-command-block, .approval-detail-row, .approval-permissions {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface-raised);
}
.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;
}
@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;
  }
}
.feedback-offer {
  align-items: center;
  gap: var(--openbot-space-3);
  text-align: center;
}
.feedback-offer-emoji {
  font-size: var(--openbot-text-display);
  line-height: 1;
  animation: feedback-offer-wiggle 900ms var(--openbot-ease-out) 200ms both;
}
.feedback-offer-headline {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-xl);
  font-weight: var(--openbot-weight-semibold);
}
.feedback-offer-quote {
  display: grid;
  width: 100%;
  box-sizing: border-box;
  gap: var(--openbot-space-1);
  margin: 0;
  border-inline-start: 3px solid var(--openbot-border);
  color: var(--openbot-text-secondary);
  padding-inline-start: var(--openbot-space-3);
  text-align: start;
}
.feedback-offer-quote strong {
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
  overflow-wrap: anywhere;
}
.feedback-offer-quote p {
  margin: 0;
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.feedback-offer-actions {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--openbot-space-2);
}
.feedback-offer-actions > :last-child {
  flex: 1;
}
.feedback-sent {
  gap: var(--openbot-space-3);
}
.feedback-sent > * {
  animation: feedback-sent-in 320ms var(--openbot-ease-out) 80ms both;
}
.feedback-sent-badge {
  animation: feedback-sent-pop 420ms var(--openbot-ease-out) 260ms both;
}
.feedback-sent-body {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
.feedback-sent-footer {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  border-top: 1px solid var(--openbot-border);
  padding-top: var(--openbot-space-3);
}
.feedback-sent-footer > a {
  margin-inline-start: auto;
}
.feedback-sent-title {
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
@keyframes feedback-offer-wiggle {
  0% {
    opacity: 0;
    transform: scale(0.6) rotate(0);
  }
  40% {
    opacity: 1;
    transform: scale(1.1) rotate(-10deg);
  }
  70% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes feedback-sent-in {
  from {
    opacity: 0;
    transform: translateY(6px);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}
@keyframes feedback-sent-pop {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  60% {
    opacity: 1;
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .feedback-offer-emoji, .feedback-sent > *, .feedback-sent-badge {
    animation: none;
  }
}
.question-prompt-bubble.ui-bubble {
  width: min(540px, 100%);
  max-width: 100%;
}
.question-prompt-bubble[data-entrance] {
  animation: question-prompt-in var(--page-slide-dur) var(--page-slide-ease) both;
}
@keyframes question-prompt-in {
  from {
    opacity: 0;
    transform: translateY(var(--page-slide-distance));
    filter: blur(var(--page-blur));
  }
}
.question-prompt-bubble > .ui-bubble-content {
  width: 100%;
  padding: var(--openbot-space-4) var(--openbot-space-2) var(--openbot-space-2);
}
.question-prompt-form.ui-questionnaire {
  position: relative;
  gap: 0;
}
.question-prompt-cancel.ui-button {
  position: absolute;
  z-index: 2;
  inset-block-start: calc(-1 * var(--openbot-space-2));
  inset-inline-end: 0;
  color: var(--openbot-text-muted);
}
.question-prompt-stage {
  display: grid;
  overflow: hidden;
  outline: 0;
  transition: height var(--page-slide-dur) var(--page-slide-ease);
}
.question-prompt-page {
  grid-area: 1 / 1;
  align-self: start;
  min-width: 0;
  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), visibility 0s linear var(--page-slide-dur);
}
.question-prompt-page[data-pos="prev"], .question-prompt-page[data-pos="next"] {
  opacity: 0;
  filter: blur(var(--page-blur));
  visibility: hidden;
}
.question-prompt-page[data-pos="prev"] {
  transform: translateX(calc(-1 * var(--page-slide-distance)));
}
.question-prompt-page[data-pos="next"] {
  transform: translateX(var(--page-slide-distance));
}
:dir(rtl) .question-prompt-page[data-pos="prev"] {
  transform: translateX(var(--page-slide-distance));
}
:dir(rtl) .question-prompt-page[data-pos="next"] {
  transform: translateX(calc(-1 * var(--page-slide-distance)));
}
.question-prompt-page[data-pos="current"] {
  transition-delay: 0s, 0s, 0s, 0s;
}
.question-prompt-fold {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--acc-collapse) var(--acc-ease);
}
.question-prompt-fold[data-open="true"] {
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--acc-expand) var(--acc-ease);
}
.question-prompt-fold-inner {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  filter: blur(var(--text-swap-blur));
  transition: opacity var(--acc-collapse) var(--acc-ease), filter var(--acc-collapse) var(--acc-ease);
}
.question-prompt-fold[data-open="true"] .question-prompt-fold-inner {
  opacity: 1;
  filter: blur(0);
  transition: opacity var(--acc-expand) var(--acc-ease), filter var(--acc-expand) var(--acc-ease);
}
.question-prompt-header {
  display: grid;
  gap: var(--openbot-space-0-5);
  padding: 0 var(--openbot-space-2) var(--openbot-space-2);
}
.question-prompt-page:not(.question-prompt-summary) .question-prompt-header {
  padding-inline-end: var(--openbot-space-8);
}
.question-prompt-title {
  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);
  letter-spacing: var(--openbot-tracking-tight);
  overflow-wrap: anywhere;
}
.question-prompt-detail {
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.question-prompt-options {
  gap: var(--openbot-space-0-5);
}
.question-prompt-options > .question-prompt-option {
  position: relative;
  min-width: 0;
  min-height: 40px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: var(--openbot-space-3);
  border-radius: var(--openbot-radius-md);
  padding: var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  cursor: pointer;
  transition: background-color var(--openbot-duration-fast) ease-out;
}
.question-prompt-option:hover:not([data-disabled]), .question-prompt-custom:focus-within {
  background: var(--openbot-question-option-soft);
}
.question-prompt-option[data-checked] {
  background: var(--openbot-question-option-hover);
}
.question-prompt-option:active:not([data-disabled]) {
  background: var(--openbot-question-option-pressed);
}
.question-prompt-option.ui-questionnaire-choice:focus-within {
  outline: 0;
}
.question-prompt-option:has(.ui-questionnaire-choice-input:focus-visible) {
  background: var(--openbot-question-option-soft);
  box-shadow: inset 0 0 0 1px var(--openbot-question-option);
}
.question-prompt-option-text {
  min-width: 0;
  display: grid;
}
.question-prompt-option-label {
  overflow-wrap: anywhere;
}
.question-prompt-option-description {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  overflow-wrap: anywhere;
}
.question-prompt-letter.ui-kbd {
  width: 22px;
  min-width: 22px;
  height: 22px;
  border-color: transparent;
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-question-badge-soft);
  color: var(--openbot-question-badge-text);
  font-family: var(--openbot-font-sans);
  font-weight: var(--openbot-weight-semibold);
  transition: background-color var(--openbot-duration-fast) ease-out, color var(--openbot-duration-fast) ease-out;
}
.question-prompt-answer-skipped .question-prompt-letter.ui-kbd {
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-muted);
}
.question-prompt-option[data-checked] .question-prompt-letter.ui-kbd {
  background: var(--openbot-question-option);
  color: var(--openbot-text-on-status);
  animation: question-prompt-badge-pop var(--openbot-duration-slow) var(--openbot-ease-out);
}
.question-prompt-letter[data-answered].ui-kbd {
  background: var(--openbot-success);
  color: var(--openbot-text-on-status);
}
.question-prompt-bubble[data-entrance][data-state="done"] .question-prompt-letter[data-answered].ui-kbd {
  animation: question-prompt-badge-pop var(--openbot-duration-slow) var(--openbot-ease-out) var(--openbot-duration-fast) both;
}
@keyframes question-prompt-badge-pop {
  from {
    transform: scale(0.8);
  }
}
.question-prompt-custom {
  cursor: text;
}
.question-prompt-custom-input.ui-input {
  width: 100%;
  min-width: 0;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  color: var(--openbot-text-primary);
  font: inherit;
}
.question-prompt-custom-input.ui-input::placeholder {
  color: var(--openbot-text-muted);
}
.question-prompt-custom-input.ui-input:focus, .question-prompt-custom-input.ui-input:focus-visible {
  outline: 0;
  box-shadow: none;
}
.question-prompt-footer {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  padding-block: var(--openbot-space-3) var(--openbot-space-1);
  padding-inline: var(--openbot-space-2) var(--openbot-space-1);
}
.question-prompt-progress.ui-questionnaire-progress {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
}
.question-prompt-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-dim);
  transition: width var(--page-slide-dur) var(--page-slide-ease), background-color var(--page-slide-dur) var(--page-slide-ease), opacity var(--page-slide-dur) var(--page-slide-ease);
}
.question-prompt-dot[data-state="done"] {
  background: var(--openbot-question-badge-text);
  opacity: 0.55;
}
.question-prompt-dot[data-state="current"] {
  width: 18px;
  background: var(--openbot-question-option);
}
.question-prompt-actions {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-inline-start: auto;
}
.question-prompt-pill.ui-button {
  border-radius: var(--openbot-radius-pill);
  padding-inline: var(--openbot-space-4);
  font-size: var(--openbot-text-md);
}
.question-prompt-summary {
  display: grid;
}
.question-prompt-section .question-prompt-title {
  padding: 0 var(--openbot-space-2) var(--openbot-space-1);
  color: var(--openbot-text-muted);
}
.question-prompt-section + .question-prompt-section {
  margin-top: var(--openbot-space-2);
  border-top: 1px solid var(--openbot-border);
  padding-top: var(--openbot-space-3);
}
.question-prompt-answers {
  display: grid;
  gap: var(--openbot-space-1);
  margin: 0;
  list-style: none;
}
.question-prompt-answers, .question-prompt-answer-skipped {
  padding: var(--openbot-space-0-5) var(--openbot-space-2) var(--openbot-space-2);
}
.question-prompt-answer {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: var(--openbot-space-3);
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  overflow-wrap: anywhere;
}
.question-prompt-answer-skipped {
  color: var(--openbot-text-muted);
}
.question-prompt-closed {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin: 0;
  padding: 0 var(--openbot-space-2) var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.question-prompt-closed svg {
  width: 16px;
  height: 16px;
  flex: none;
}
.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-footer {
    flex-wrap: wrap;
  }
  .question-prompt-pill.ui-button {
    padding-inline: var(--openbot-space-3);
  }
}
@media (prefers-reduced-motion: reduce) {
  .question-prompt-bubble[data-entrance], .question-prompt-letter.ui-kbd, .question-prompt-option[data-checked] .question-prompt-letter.ui-kbd, .question-prompt-bubble[data-entrance][data-state="done"] .question-prompt-letter[data-answered].ui-kbd {
    animation: none;
  }
  :is( .question-prompt-stage, .question-prompt-page, .question-prompt-fold, .question-prompt-fold-inner, .question-prompt-letter, .question-prompt-dot, .question-prompt-option ) {
    transition: none;
  }
}
.ui-block-card.ui-bubble {
  width: min(540px, 100%);
  max-width: 100%;
}
.ui-block-card > .ui-block-content {
  container: ui-block / inline-size;
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-4) var(--openbot-space-4) var(--openbot-space-3);
}
.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;
  gap: var(--openbot-space-3);
}
.ui-block-heading {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: var(--openbot-space-0-5);
}
.ui-block-title {
  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);
  letter-spacing: var(--openbot-tracking-tight);
  overflow-wrap: anywhere;
}
.ui-block-subtitle {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.ui-block-header:has(> .ui-block-status) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--openbot-space-3);
  row-gap: var(--openbot-space-0-5);
}
.ui-block-header:has(> .ui-block-status) > .ui-block-heading {
  display: contents;
}
.ui-block-header:has(> .ui-block-status):has(> .ui-block-icon) {
  grid-template-columns: auto minmax(0, 1fr) auto;
}
.ui-block-header:has(> .ui-block-status) > .ui-block-icon {
  grid-row: 1 / span 2;
  grid-column: 1;
}
.ui-block-header:has(> .ui-block-status):has(> .ui-block-icon):not(:has(.ui-block-subtitle)) > :is(.ui-block-icon, .ui-block-status) {
  grid-row: 1;
  align-self: center;
}
.ui-block-header:has(> .ui-block-status) .ui-block-title {
  grid-row: 1;
  grid-column: -3 / -2;
  align-self: center;
}
.ui-block-header:has(> .ui-block-status) .ui-block-subtitle {
  grid-column: -3 / -1;
}
.ui-block-status {
  grid-row: 1;
  grid-column: -2 / -1;
  align-self: start;
}
.ui-block-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--openbot-space-3);
}
.ui-block-body:empty {
  display: none;
}
.ui-block-card-footer {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--openbot-space-2);
}
.ui-block-footer-select {
  width: auto;
  max-width: 100%;
  flex: none;
}
.ui-block-footer-select > .ui-select-trigger {
  width: auto;
  max-width: 100%;
}
.ui-block-card[data-inline-actions] > .ui-block-content {
  flex-flow: row wrap;
  align-items: center;
  column-gap: var(--openbot-space-4);
  padding-block: var(--openbot-space-3);
}
.ui-block-card[data-inline-actions] > .ui-block-content > .ui-block-header {
  flex: 1 1 240px;
}
.ui-block-card[data-inline-actions] > .ui-block-content > .ui-block-card-footer {
  flex: none;
  margin-inline-start: auto;
}
.ui-block-card[data-inline-actions] > .ui-block-content > :is(.ui-block-body, .ui-block-error, .ui-block-outcome) {
  flex-basis: 100%;
  order: 1;
}
.ui-block-card[data-inline-actions] .ui-block-header:has(> .ui-block-status):has(.ui-block-subtitle) > :is(.ui-block-icon, .ui-block-status) {
  grid-row: 1 / span 2;
  align-self: center;
}
.ui-block-card[data-inline-actions] .ui-block-header:has(> .ui-block-status):has(.ui-block-subtitle) .ui-block-subtitle {
  grid-row: 2;
  grid-column: -3 / -2;
}
.ui-block-card[data-inline-actions] > .ui-block-content > .ui-block-header {
  min-height: calc(var(--openbot-leading-lg) + var(--openbot-space-0-5) + var(--openbot-leading-md));
}
.ui-block-card[data-settled] .ui-block-header > .ui-block-status {
  animation: ui-block-status-in var(--openbot-duration-overlay) var(--openbot-ease-out) both;
}
@keyframes ui-block-status-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}
.ui-block-card[data-inline-actions] .ui-block-header > .ui-block-status {
  height: var(--openbot-control-md);
  padding-inline: var(--openbot-space-4);
  border-radius: var(--openbot-radius-pill);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.ui-block-card[data-inline-actions][data-status="answered"] .ui-block-header > .ui-block-status {
  border-color: transparent;
  background: var(--openbot-success);
  color: var(--openbot-text-on-light);
}
:root[data-openbot-color-scheme="light"] .ui-block-card[data-inline-actions][data-status="answered"] .ui-block-header > .ui-block-status {
  background: var(--openbot-success-text);
}
.ui-block-card[data-danger][data-status="pending"] > .ui-block-content {
  border-color: var(--openbot-danger-border);
}
.ui-block-outcome {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.ui-block-outcome[data-status="answered"] {
  color: var(--openbot-text-secondary);
}
.ui-block-outcome svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
}
.ui-block-outcome-check {
  color: var(--openbot-success-text);
}
.ui-block-outcome-text {
  min-width: 0;
  overflow-wrap: anywhere;
}
.ui-block-error {
  min-width: 0;
  margin: 0;
  color: var(--openbot-danger-text);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  overflow-wrap: anywhere;
}
.ui-block-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--openbot-space-2);
}
.ui-block-card-footer > .ui-block-actions {
  justify-content: flex-end;
  margin-inline-start: auto;
}
.ui-block-card-footer > .ui-block-actions > .ui-button {
  flex-grow: 1;
}
.ui-block-card .ui-block-actions .ui-button {
  border-radius: var(--openbot-radius-pill);
  padding-inline: var(--openbot-space-4);
  font-size: var(--openbot-text-md);
}
.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-confirm-step > .ui-block-actions {
  justify-content: flex-end;
}
.ui-block-hint, .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 {
  max-height: 16em;
  overflow-y: auto;
  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[data-expanded="true"] {
  max-height: none;
}
.ui-block-preview[data-clamped="true"] {
  position: relative;
  overflow: clip;
}
.ui-block-preview[data-clamped="true"]::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2.5em;
  background: linear-gradient(to bottom, transparent, var(--openbot-bg-surface-raised));
  pointer-events: none;
}
.ui-block-preview-toggle {
  align-self: flex-start;
  margin-top: calc(var(--openbot-space-2) * -1);
}
.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;
}
:dir(rtl) .ui-block-hold-fill {
  transform-origin: right;
}
.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 {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-0-5);
  margin: 0 calc(-1 * var(--openbot-space-2));
  padding: 0;
  border: 0;
}
.ui-block-option {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 40px;
  grid-template-columns: 22px minmax(0, 1fr) fit-content(40%);
  align-items: center;
  gap: var(--openbot-space-3);
  border-radius: var(--openbot-radius-md);
  padding: var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  cursor: pointer;
  transition: background-color var(--openbot-duration-fast) ease-out;
}
.ui-block-option:hover:not([data-disabled]) {
  background: var(--openbot-question-option-soft);
}
.ui-block-option[data-checked] {
  background: var(--openbot-question-option-hover);
}
.ui-block-option:active:not([data-disabled]) {
  background: var(--openbot-question-option-pressed);
}
.ui-block-option[data-disabled] {
  cursor: default;
}
.ui-block-option[data-disabled]:not([data-checked]) {
  opacity: 0.5;
}
.ui-block-option:has(.ui-block-option-input:focus-visible) {
  background: var(--openbot-question-option-soft);
  box-shadow: inset 0 0 0 1px var(--openbot-question-option);
}
.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.ui-kbd {
  width: 22px;
  min-width: 22px;
  height: 22px;
  border-color: transparent;
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-question-badge-soft);
  color: var(--openbot-question-badge-text);
  font-family: var(--openbot-font-sans);
  font-weight: var(--openbot-weight-semibold);
  transition: background-color var(--openbot-duration-fast) ease-out, color var(--openbot-duration-fast) ease-out;
}
.ui-block-option[data-checked] .ui-block-option-key.ui-kbd {
  background: var(--openbot-question-option);
  color: var(--openbot-text-on-status);
}
.ui-block-option-label {
  min-width: 0;
  overflow-wrap: anywhere;
}
.ui-block-option-meta {
  min-width: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.ui-block-option-custom {
  cursor: text;
}
.ui-block-option-custom:focus-within {
  background: var(--openbot-question-option-soft);
}
.ui-block-option-custom-input.ui-input {
  width: 100%;
  min-width: 0;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  color: var(--openbot-text-primary);
  font: inherit;
}
.ui-block-option-custom-input.ui-input::placeholder {
  color: var(--openbot-text-muted);
}
.ui-block-option-custom-input.ui-input:focus, .ui-block-option-custom-input.ui-input:focus-visible {
  outline: 0;
  box-shadow: none;
}
.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);
}
.ui-block-header:has(> .ui-block-icon) {
  align-items: center;
}
.ui-block-answer-rows {
  display: flex;
  min-width: 0;
  flex-direction: column;
  margin: 0;
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-canvas);
}
.ui-block-answer-row {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--openbot-space-4);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.ui-block-answer-row + .ui-block-answer-row {
  border-top: 1px solid var(--openbot-border-grouped);
}
.ui-block-answer-row > dt {
  flex: none;
  color: var(--openbot-text-muted);
}
.ui-block-answer-row > dd {
  min-width: 0;
  margin: 0;
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
  text-align: end;
}
.ui-block-answer-value {
  overflow-wrap: anywhere;
}
.ui-block-answer-hidden {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  color: var(--openbot-text-dim);
  vertical-align: top;
}
.ui-block-answer-hidden > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: none;
  color: var(--openbot-text-muted);
}
@media (prefers-reduced-motion: reduce) {
  .ui-block-option, .ui-block-option-key.ui-kbd, .ui-block-hold-fill {
    transition: none;
  }
  .ui-block-card[data-settled] .ui-block-header > .ui-block-status {
    animation: none;
  }
}
@container ui-block (width < 360px) {
  .ui-block-card.ui-bubble > .ui-block-content > .ui-block-header:has(> .ui-block-status) {
    grid-template-columns: minmax(0, 1fr);
  }
  .ui-block-card.ui-bubble > .ui-block-content > .ui-block-header:has(> .ui-block-status):has(> .ui-block-icon) {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .ui-block-card.ui-bubble > .ui-block-content > .ui-block-header:has(> .ui-block-status) .ui-block-title {
    grid-row: 1;
    grid-column: -2 / -1;
  }
  .ui-block-card.ui-bubble > .ui-block-content > .ui-block-header:has(> .ui-block-status) .ui-block-subtitle {
    grid-row: 2;
    grid-column: -2 / -1;
  }
  .ui-block-card.ui-bubble > .ui-block-content > .ui-block-header:has(> .ui-block-status) > .ui-block-icon {
    grid-row: 1 / span 2;
    grid-column: 1;
    align-self: start;
  }
  .ui-block-card.ui-bubble > .ui-block-content > .ui-block-header:has(> .ui-block-status) > .ui-block-status {
    grid-row: 3;
    grid-column: -2 / -1;
    justify-self: start;
    align-self: start;
    margin-top: var(--openbot-space-1);
  }
  .ui-block-card.ui-bubble[data-inline-actions] > .ui-block-content > .ui-block-header:has(> .ui-block-status) > .ui-block-status {
    justify-self: end;
  }
  .ui-block-card.ui-bubble > .ui-block-content > .ui-block-card-footer > .ui-block-actions {
    flex: 1 1 100%;
    flex-wrap: wrap;
  }
  .ui-block-card.ui-bubble > .ui-block-content > .ui-block-card-footer > .ui-block-actions > .ui-button {
    flex: 1 1 auto;
  }
}
.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 {
  flex: 1 1 auto;
  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-close {
  border-radius: var(--openbot-radius-sm);
}
.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-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-lg);
}
.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);
  inset-inline-end: 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);
  color: var(--openbot-text-primary);
}
.browser-secret-card .ui-block-subtitle {
  overflow-wrap: anywhere;
}
.browser-secret-fields {
  display: grid;
  min-width: 0;
}
.browser-secret-card[data-variant="island"] {
  display: grid;
  gap: var(--openbot-space-4);
  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-inline-start: 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-save-option {
  display: grid;
  gap: var(--openbot-space-0-5);
}
.browser-secret-save {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  font-size: var(--openbot-text-sm);
}
.browser-secret-save-server {
  font-weight: var(--openbot-weight-medium);
}
.browser-secret-save-hint {
  margin: 0;
  padding-inline-start: calc(var(--openbot-icon-sm) + var(--openbot-space-1-5));
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.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-card .ui-block-card-footer > .browser-secret-private {
  flex: 1 1 12rem;
}
.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;
}
:root[data-surface="browser-dock"], :root[data-surface="browser-dock"] body, :root[data-surface="browser-dock"] #root {
  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);
  inset-inline-end: var(--openbot-space-4);
  display: flex;
  width: min(560px, calc(100% - 2 * var(--openbot-space-4)));
  flex-direction: column;
  align-items: flex-end;
  gap: var(--openbot-space-2);
  isolation: isolate;
}
.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-tab 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"], [data-mode="prompt"], [data-mode="approval"]) {
  width: 100%;
  border-radius: var(--openbot-radius-lg);
}
.browser-dock-island:is([data-mode="secret"], [data-mode="prompt"], [data-mode="approval"]) {
  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[data-mode="secret"] {
  width: min(100%, 420px);
}
.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-card {
  display: grid;
  max-height: 420px;
  gap: var(--openbot-space-2);
  overflow: auto;
  padding: var(--openbot-space-3);
  color: var(--openbot-text-primary);
}
.browser-dock-island-card :is(.question-prompt-bubble, .ui-bubble-content, .approval-card) {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
}
.browser-dock-island-card > * {
  margin: 0;
}
.browser-dock-island-activity {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  padding-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-2) var(--openbot-space-1);
  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-inline-start: auto;
  border-radius: var(--openbot-radius-pill);
}
.browser-dock-island-reply {
  display: grid;
  gap: var(--openbot-space-1-5);
  padding-block: var(--openbot-space-2) var(--openbot-space-3);
  padding-inline: var(--openbot-space-3) var(--openbot-space-2);
  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-inline-start: auto;
}
.browser-dock-reply-body {
  max-height: 160px;
  padding-inline-end: 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-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-2) var(--openbot-space-1);
}
.browser-dock-avatar {
  width: 20px;
  height: 20px;
  flex: none;
}
.browser-dock[data-glassless] .browser-dock-composer {
  border-color: transparent;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
}
.browser-dock-hide {
  border-radius: var(--openbot-radius-pill);
}
.browser-dock .browser-dock-tab {
  position: absolute;
  bottom: 0;
  overflow: hidden;
  max-width: min(360px, 100%);
  height: auto;
  box-sizing: border-box;
  justify-content: flex-start;
  padding-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-2) var(--openbot-space-3);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: inherit;
  gap: var(--openbot-space-2);
  inset-inline-end: 0;
  line-height: 1;
  white-space: nowrap;
}
.browser-dock:is([data-tucked], [data-phase="showing"]) > :not(.browser-dock-tab, .browser-dock-tuck-glass) {
  visibility: hidden;
}
.browser-dock:not([data-tucked]) > .browser-dock-tab {
  visibility: hidden;
}
.browser-dock .browser-dock-glass.browser-dock-tab:hover {
  background: var(--openbot-bg-glass);
}
.browser-dock-tab-avatar {
  position: relative;
  display: flex;
  height: 28px;
  flex: none;
  align-items: center;
}
.browser-dock-tab-avatar[data-working]::after {
  position: absolute;
  border: 1.5px solid transparent;
  border-radius: var(--openbot-radius-pill);
  border-top-color: var(--openbot-accent);
  border-right-color: var(--openbot-accent);
  animation: ui-spin 900ms linear infinite;
  content: "";
  inset: 3px -1px;
}
.browser-dock-tab-avatar[data-unread]::after {
  position: absolute;
  top: 3px;
  right: -2px;
  width: 7px;
  height: 7px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
  content: "";
}
.browser-dock-tab-label {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
}
.browser-dock .browser-dock-tab .browser-dock-tab-chevron {
  flex: none;
  color: var(--openbot-text-secondary);
  transition: translate var(--openbot-duration-normal) var(--openbot-ease-out);
}
.browser-dock-tab:hover .browser-dock-tab-chevron {
  translate: 0 -2px;
}
.browser-dock-tuck-glass {
  z-index: 0;
  border-radius: var(--openbot-radius-pill);
}
.browser-dock:is([data-tucked], [data-phase="showing"]) {
  width: var(--browser-dock-open-width, min(560px, calc(100% - 2 * var(--openbot-space-4))));
  pointer-events: none;
}
.browser-dock[data-tucked] > .browser-dock-tab {
  pointer-events: auto;
}
.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-block: 0;
  padding-inline: var(--openbot-space-1-5) var(--openbot-space-2);
  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;
  }
  .browser-dock-tab-avatar[data-working]::after {
    animation: none;
  }
}
body[data-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-frame);
  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;
  direction: ltr;
  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-chip[data-profile-color]::after {
  position: absolute;
  right: var(--openbot-space-2);
  bottom: 2px;
  left: var(--openbot-space-2);
  height: 2px;
  border-radius: var(--openbot-radius-pill);
  background: var(--browser-profile-color);
  content: "";
  pointer-events: none;
}
.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 {
  position: relative;
  width: var(--openbot-space-8);
  height: var(--openbot-space-8);
  flex-shrink: 0;
  border-radius: var(--openbot-radius-pill);
}
.channel-avatar-cluster {
  --channel-avatar-size: var(--agent-row-avatar-size, 36px);
  --channel-avatar-pitch: calc(var(--channel-avatar-size) * 0.38);
  --channel-avatar-face: calc(var(--channel-avatar-size) * 0.54);
  --agent-avatar-outline-width: 2px;
  --channel-avatar-ring-outline: 2px;
  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 .agent-avatar-custom {
  --channel-avatar-face: calc(var(--channel-avatar-size) * 0.46);
}
.channel-avatar:where(:not(.channel-avatar-cluster)) .agent-avatar + .agent-avatar {
  margin-inline-start: calc(-1 * var(--openbot-space-4));
}
.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) ~ :last-child {
  grid-column: 1 / span 2;
}
.sidebar .channel-avatar-cluster {
  --agent-avatar-outline-width: 3.5px;
  --channel-avatar-ring-outline: 3px;
}
.agent-row.sidebar-pinned-row .channel-avatar-cluster {
  --channel-avatar-size: var(--sidebar-pinned-avatar-size, 56px);
}
.agent-row.sidebar-pinned-row .channel-avatar-cluster .agent-avatar {
  width: var(--channel-avatar-face);
  height: var(--channel-avatar-face);
}
.channel-avatar-count {
  --felt-box: calc(var(--channel-avatar-size) * 0.46);
  position: relative;
  display: grid;
  box-sizing: border-box;
  min-width: var(--felt-box);
  height: var(--felt-box);
  isolation: isolate;
  padding-inline: 4px;
  place-items: center;
  border-radius: var(--openbot-radius-pill);
  outline: var(--channel-avatar-ring-outline) solid var(--agent-avatar-outline, transparent);
  box-shadow: 0 0 0 var(--agent-avatar-outline-width) var(--agent-avatar-outline, transparent);
  background: linear-gradient(to bottom, var(--openbot-felt-plum-top), var(--openbot-felt-plum-bottom));
  color: var(--openbot-felt-cream);
  font-size: var(--openbot-text-sm);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
:is(.channel-avatar-count, .agent-row-unread-count) {
  font-weight: 800;
  paint-order: stroke fill;
  -webkit-text-stroke: 0.7px var(--openbot-felt-cream-stroke);
}
:is(.channel-avatar-count, .agent-row-agent-status-unread, .agent-row-agent-status-waiting)::before {
  --felt-slice: calc(var(--felt-box) / 1.62);
  --felt-edge: calc(var(--felt-slice) * 0.19);
  position: absolute;
  z-index: -1;
  inset: calc(-1 * var(--felt-edge));
  border: var(--felt-slice) solid transparent;
  border-image: url("/@fs/home/ubuntu/openbot/packages/ui/src/assets/plush/felt-pill-lilac.webp") 49% fill / var(--felt-slice) stretch;
  clip-path: inset(calc(var(--felt-edge) + 0.25px) round calc(var(--felt-box) / 2 - 0.25px));
  filter: brightness(0.52) saturate(1.35) contrast(1.1);
  content: "";
}
.agent-row-agent-status-waiting::before {
  border-image-source: url("/@fs/home/ubuntu/openbot/packages/ui/src/assets/plush/felt-pill-amber.webp");
  filter: none;
}
.sidebar .channel-avatar-cluster .channel-avatar-count {
  translate: 0 1.5px;
}
.sidebar .channel-avatar-cluster .agent-avatar:has(> .bloub-avatar-svg image) {
  filter: url("#sidebar-plush-ring");
}
.sidebar .channel-avatar-cluster .agent-avatar:has(> .bloub-avatar-svg image) > .bloub-avatar-svg {
  filter: none;
}
.sidebar :is(.agent-row:hover, .agent-row-active) .channel-avatar-cluster .agent-avatar:has(> .bloub-avatar-svg image) {
  filter: url("#sidebar-plush-ring-raised");
}
@media (hover: hover) and (pointer: fine) and (min-width: 601px) {
  .sidebar .agent-row:hover .channel-avatar-cluster .agent-avatar:has(> .bloub-avatar-svg image) {
    filter: url("#sidebar-plush-ring-hover");
  }
}
:root[data-openbot-color-scheme="light"] .sidebar .agent-row-active .channel-avatar-cluster .agent-avatar:has(> .bloub-avatar-svg image) {
  filter: url("#sidebar-plush-ring-selected");
}
.sidebar .agent-list[data-sidebar-dragging] .agent-row:hover:not(.agent-row-active) .channel-avatar-cluster .agent-avatar:has(> .bloub-avatar-svg image) {
  filter: url("#sidebar-plush-ring");
}
.channel-avatar-picture {
  width: var(--channel-avatar-size, var(--openbot-space-8));
  min-width: var(--channel-avatar-size, var(--openbot-space-8));
  height: var(--channel-avatar-size, var(--openbot-space-8));
}
.channel-picture {
  display: grid;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  place-items: center;
  overflow: hidden;
  border-radius: var(--openbot-radius-sm);
  background: var(--channel-picture-hue);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in oklab, var(--channel-picture-hue) 26%, var(--openbot-bg-control));
  }
  color: var(--channel-picture-hue);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, var(--channel-picture-hue) 78%, var(--openbot-text-primary));
  }
}
.channel-picture > svg {
  width: 55%;
  height: 55%;
}
.channel-picture-image {
  object-fit: cover;
  background: var(--openbot-bg-control);
}
.channel-icon-grid .channel-picture {
  width: 32px;
  height: 32px;
}
.channel-icon-grid .channel-picture > svg {
  width: 18px;
  height: 18px;
}
.channel-avatar-cluster .channel-picture {
  border-radius: var(--openbot-radius-lg);
}
.channel-picture-trigger .channel-picture {
  border-radius: var(--openbot-radius-xl);
}
.channel-picture-editor .avatar-image-upload-preview .channel-picture {
  width: 100%;
  height: 100%;
}
.agent-row.sidebar-pinned-row .channel-avatar-cluster .channel-picture {
  border-radius: var(--openbot-radius-xl);
}
.channel-picture-trigger {
  --agent-row-avatar-size: 62px;
  position: relative;
  display: grid;
  width: 62px;
  height: 62px;
  margin: 0;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-xl);
  background: transparent;
}
.channel-picture-trigger:hover {
  filter: brightness(1.08);
}
.channel-picture-editor .avatar-image-upload-preview {
  border-radius: var(--openbot-radius-md);
}
.channel-picture-editor .channel-icon-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.channel-icon-grid .channel-icon-choice {
  height: 44px;
}
.channel-picture-editor .channel-icon-color-grid {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}
.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: start;
  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 .channel-avatar-picture {
  --channel-avatar-size: 20px;
}
.channel-title .agent-avatar {
  --agent-avatar-optical-offset: -2px;
  width: 18px;
  height: 18px;
}
.channel-title .channel-avatar .agent-avatar + .agent-avatar {
  margin-inline-start: -8px;
}
.channel-title, .channel-empty {
  --agent-avatar-outline: var(--openbot-bg-canvas);
}
@media (hover: hover) and (pointer: fine) and (min-width: 601px) {
  .conversation-header .channel-title:hover:not(:disabled) {
    --agent-avatar-outline: var(--openbot-bg-control-hover);
  }
}
.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-inline-start: var(--openbot-space-0-5);
}
.channel-activity-faces {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}
.channel-activity-faces .agent-activity-avatar {
  transition: transform var(--openbot-duration-overlay) var(--openbot-ease-out), opacity var(--openbot-duration-overlay) var(--openbot-ease-out), margin-inline-end var(--openbot-duration-overlay) var(--openbot-ease-in-out);
}
.channel-activity-faces .agent-activity-avatar + .agent-activity-avatar {
  margin-inline-start: calc(-1 * var(--openbot-space-2));
}
.channel-activity-faces .channel-activity-face-leaving {
  margin-inline-end: calc(-1 * var(--openbot-space-6));
  opacity: 0;
  transform: translateY(4px) scale(0.6);
}
@media (prefers-reduced-motion: reduce) {
  .channel-activity-faces .agent-activity-avatar {
    transition: none;
  }
}
.channel-activity-names {
  flex: 0 1 auto;
  min-width: 0;
  margin-inline-start: var(--openbot-space-2);
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.channel-activity-name {
  color: var(--channel-activity-name-color, var(--openbot-text-muted));
}
.channel-activity-content .agent-activity-label {
  flex-shrink: 0;
}
.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-text {
  min-width: 0;
  flex: 1 1 24ch;
}
.channel-paused-task-subject {
  margin: 0;
  overflow: hidden;
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.channel-paused-task-reason {
  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);
}
.channel-context-actions .ui-item-description {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
.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-actions .header-panel-toggle > svg:dir(rtl), .diagram-inspector .header-panel-toggle > svg:dir(rtl) {
  transform: scaleX(-1);
}
.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-inline-start: auto;
}
.diagram-view-body {
  --diagram-inspector-width: 340px;
  position: relative;
  display: flex;
  min-height: 0;
  flex: 1;
  transition: padding-inline-end var(--panel-resize-duration, var(--openbot-duration-overlay)) cubic-bezier(0.22, 1, 0.36, 1);
}
.diagram-view-body[data-inspector="open"] {
  padding-inline-end: var(--diagram-inspector-width);
}
.diagram-view-canvas {
  position: relative;
  display: flex;
  min-width: 0;
  flex: 1;
}
.diagram-view-chat {
  position: absolute;
  bottom: var(--openbot-space-4);
  inset-inline-start: 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;
  direction: ltr;
  transform-origin: 0 0;
}
.diagram-board-world[data-settling] {
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.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% - var(--diagram-new-agent-height, 188px) - var(--openbot-space-2)) );
  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;
}
.diagram-new-agent-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-1);
}
.diagram-board-zoom {
  position: absolute;
  inset-inline-end: 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;
  inset-inline-end: 0;
  bottom: 0;
  display: flex;
  width: var(--diagram-inspector-width);
  min-height: 0;
  flex-direction: column;
  border-inline-start: 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: start;
}
.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-inline-start: 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-block: var(--openbot-space-2);
  padding-inline: var(--openbot-space-3) var(--openbot-space-2);
}
.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;
  }
}
.diagram-empty {
  container-type: inline-size;
}
.diagram-empty-viewport {
  display: grid;
  background-image: none;
  cursor: default;
}
.diagram-empty-backdrop {
  position: relative;
  grid-area: 1 / 1;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  opacity: 0.62;
  mask-image: radial-gradient(ellipse 30% 30% at 50% 50%, var(--openbot-transparent) 55%, var(--openbot-text-primary) 100%), radial-gradient(ellipse 80% 85% at 50% 50%, var(--openbot-text-primary) 55%, var(--openbot-transparent) 100%);
  mask-composite: intersect;
}
.diagram-empty-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, var(--openbot-border-strong) 1px, var(--openbot-transparent) 0);
  background-size: 24px 24px;
}
.diagram-empty-world {
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  transform-origin: center;
  scale: var(--diagram-empty-scale);
  transition: opacity 900ms var(--openbot-ease-out), filter 900ms var(--openbot-ease-out);
}
.diagram-empty-backdrop[data-leaving] .diagram-empty-world {
  opacity: 0;
  filter: blur(4px);
}
.diagram-empty-node {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(12px) scale(0.96);
  transition: opacity 700ms var(--openbot-ease-out), filter 700ms var(--openbot-ease-out), transform 700ms var(--openbot-ease-out);
}
.diagram-empty-node[data-shown] {
  opacity: 1;
  filter: blur(0);
  transform: none;
}
.diagram-empty-node .diagram-node {
  cursor: default;
}
.diagram-empty .diagram-empty-edge[data-state="idle"] .diagram-edge-line {
  stroke-dasharray: 1600;
  stroke-dashoffset: 1600;
  transition: stroke-dashoffset 900ms var(--openbot-ease-in-out) 350ms;
}
.diagram-empty .diagram-empty-edge[data-drawn] .diagram-edge-line {
  stroke-dashoffset: 0;
}
.diagram-empty .diagram-empty-edge[data-state] .diagram-edge-arrow {
  opacity: 0;
  transition: opacity 300ms var(--openbot-ease-out) 1100ms;
}
.diagram-empty .diagram-empty-edge[data-drawn] .diagram-edge-arrow {
  opacity: 1;
}
.diagram-empty-pulse {
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: var(--openbot-radius-pill);
  background: var(--diagram-routine-color, var(--openbot-accent));
  outline: 4px solid var(--diagram-routine-soft, var(--openbot-accent-soft));
  offset-rotate: 0deg;
  animation: diagram-empty-pulse 900ms var(--openbot-ease-in-out) both;
}
@keyframes diagram-empty-pulse {
  0% {
    offset-distance: 0%;
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}
.diagram-empty-pitch {
  z-index: 1;
  display: grid;
  grid-area: 1 / 1;
  max-width: 34rem;
  place-self: center;
  justify-items: center;
  gap: var(--openbot-space-4);
  padding: var(--openbot-space-6);
  text-align: center;
}
.diagram-empty-title {
  margin: 0;
  font-size: var(--openbot-text-display);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.diagram-empty-title > span {
  display: block;
}
.diagram-empty-lead {
  color: var(--openbot-text-muted);
}
.diagram-empty-title .diagram-empty-hand {
  display: inline;
  color: var(--openbot-accent-text);
  font-family: "Bradley Hand", "Noteworthy", "Segoe Print", cursive;
  font-size-adjust: 0.62;
  font-weight: var(--openbot-weight-semibold);
  line-height: 1;
  clip-path: inset(-0.4em 100% -0.4em -0.2em);
  animation: diagram-empty-write 520ms linear 500ms forwards;
}
@keyframes diagram-empty-write {
  to {
    clip-path: inset(-0.4em -0.2em -0.4em -0.2em);
  }
}
.diagram-empty-lines {
  display: grid;
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-xl);
  line-height: 1.5;
}
.diagram-empty-action.ui-button {
  width: 100%;
  max-width: 22rem;
  height: var(--openbot-control-lg);
  margin-top: var(--openbot-space-2);
}
@container (max-width: 720px) {
  .diagram-empty-title {
    font-size: var(--openbot-text-3xl);
  }
  .diagram-empty-lines {
    font-size: var(--openbot-text-lg);
  }
  .diagram-empty-backdrop {
    opacity: 0.45;
  }
}
.diagram-empty[data-still] :is(.diagram-empty-world, .diagram-empty-node, .diagram-empty-hand), .diagram-empty[data-still] .diagram-empty-edge[data-state] path {
  animation: none;
  transition: none;
  clip-path: none;
}
.diagram-empty[data-still] .diagram-empty-pulse {
  display: none;
}
:where(.wfn-stage, .wfn-menu, .wfn-popover) {
  --wfn-card: var(--openbot-bg-canvas);
  --wfn-field: var(--openbot-bg-surface-raised);
  --wfn-ring: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --wfn-ring: color-mix(in srgb, var(--openbot-text-primary) 6%, transparent);
  }
  --wfn-ring-strong: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --wfn-ring-strong: color-mix(in srgb, var(--openbot-text-primary) 10%, transparent);
  }
  --wfn-hover: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --wfn-hover: color-mix(in srgb, var(--openbot-text-primary) 6%, transparent);
  }
  --wfn-port: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --wfn-port: color-mix(in srgb, var(--openbot-text-primary) 10%, var(--openbot-bg-canvas));
  }
  --wfn-glass: var(--openbot-bg-surface-raised);
  @supports (color: color-mix(in lab, red, red)) {
    --wfn-glass: color-mix(in srgb, var(--openbot-bg-surface-raised) 75%, transparent);
  }
  --wfn-glass-blur: blur(40px) saturate(1.4);
  --wfn-radius-card: calc(var(--openbot-radius-lg) + var(--openbot-space-1));
  --wfn-small: calc(var(--openbot-text-sm) - 1px);
  --wfn-radius-row: calc(var(--openbot-radius-sm) + var(--openbot-space-1));
  --wfn-radius-run: calc(var(--openbot-radius-md) + 2px);
  --wfn-text-title: calc(var(--openbot-text-display) * 1.25);
  --openbot-focus-ring: 0 0 0 1px var(--openbot-text-muted);
}
:root[data-openbot-color-scheme="light"] :where(.wfn-stage, .wfn-menu, .wfn-popover) {
  --wfn-card: var(--openbot-bg-surface);
  --wfn-field: var(--openbot-bg-control-hover);
}
.wfn-node {
  position: relative;
  display: grid;
  gap: var(--openbot-space-1-5);
  width: var(--wfn-width);
  transition: width var(--openbot-duration-slow) var(--openbot-ease-out);
}
.wfn-node[data-kind="prompt"] {
  --wfn-width: 296px;
  --wfn-height: 151px;
}
.wfn-node[data-kind="agent"], .wfn-node[data-kind="llm"] {
  --wfn-width: 350px;
}
.wfn-node[data-kind="image"] {
  --wfn-width: 300px;
}
.wfn-node[data-kind="asset"] {
  --wfn-width: 240px;
}
.wfn-label {
  display: flex;
  gap: var(--openbot-space-1);
  align-items: center;
  color: var(--openbot-text-muted);
  font-size: var(--wfn-small);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-sm);
  user-select: none;
}
.wfn-label svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.wfn-card {
  position: relative;
  display: grid;
  gap: var(--openbot-space-2);
  align-content: start;
  min-height: var(--wfn-height, auto);
  padding: var(--openbot-space-2);
  border-radius: var(--wfn-radius-card);
  background: var(--wfn-card);
  box-shadow: 0 0 0 1px var(--wfn-ring);
  transition: box-shadow var(--openbot-duration-hover) var(--openbot-ease-out);
}
.wfn-card[data-media] {
  aspect-ratio: var(--wfn-aspect, auto);
  padding: 0;
  overflow: hidden;
}
.wfn-field {
  display: grid;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-3);
  border-radius: var(--openbot-radius-md);
  background: var(--wfn-field);
  transition: box-shadow var(--openbot-duration-hover) var(--openbot-ease-out);
}
.wfn-field:focus-within {
  box-shadow: inset 0 0 0 1px var(--wfn-ring-strong);
}
.wfn-field-fill {
  min-height: calc(var(--wfn-height) - var(--openbot-space-4));
}
.wfn-field-task {
  grid-template-rows: 1fr auto;
  min-height: 150px;
}
.wfn-stage .wfn-input {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  resize: none;
  field-sizing: content;
}
.wfn-stage .wfn-input::placeholder, .wfn-stage .wfn-text-input::placeholder {
  color: var(--openbot-text-muted);
}
.wfn-stage .wfn-input:focus-visible {
  outline: none;
  box-shadow: none;
}
.wfn-field-fill .wfn-input {
  height: 100%;
}
.wfn-field-foot {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}
.wfn-field-result p {
  max-height: 120px;
  margin: 0;
  overflow-y: auto;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.wfn-field-result p[data-failed] {
  color: var(--openbot-text-muted);
}
.wfn-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: calc(var(--openbot-space-1) * -1) 0;
  color: var(--openbot-text-muted);
  font-size: var(--wfn-small);
  font-weight: var(--openbot-weight-semibold);
}
.wfn-stage .wfn-pill {
  gap: var(--openbot-space-1-5);
  min-width: 0;
  height: 20px;
  padding: 0 var(--openbot-space-1);
  border: 0;
  border-radius: var(--openbot-radius-pill);
  background: transparent;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.wfn-stage .wfn-model-pill {
  flex-shrink: 1;
}
.wfn-stage .wfn-agent-pill:has(+ .wfn-model-pill) {
  max-width: calc(100% - 96px - var(--openbot-space-2));
}
.wfn-stage .wfn-field-foot .provider-model-trigger {
  gap: var(--openbot-space-1);
  height: 20px;
  padding: 0 var(--openbot-space-1);
  border: 0;
  background: transparent;
  box-shadow: none;
}
.wfn-stage .wfn-field-foot .provider-model-trigger-name {
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
}
.wfn-stage .wfn-field-foot .provider-model-trigger:is(:hover, [aria-expanded="true"]), .wfn-stage .wfn-pill:hover {
  background: var(--wfn-hover);
}
.wfn-pill > svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  color: var(--openbot-text-muted);
}
.wfn-pill > svg.wfn-model-logo, .wfn-menu.ui-action-menu [role="menuitem"] > svg.wfn-model-logo {
  flex: none;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-primary);
  fill: currentcolor;
  stroke: none;
}
.wfn-avatar.agent-avatar {
  --agent-avatar-optical-offset: -2px;
  flex: none;
  width: 16px;
  height: 16px;
}
.wfn-stage .wfn-run {
  height: var(--openbot-control-lg);
  border-radius: var(--wfn-radius-run);
  font-weight: var(--openbot-weight-semibold);
}
.wfn-ports {
  position: absolute;
  top: 50%;
  display: grid;
  gap: 10px;
  translate: 0 calc(-50% + 11px);
}
.wfn-ports[data-side="in"] {
  right: calc(100% + var(--openbot-space-3));
}
.wfn-ports[data-side="out"] {
  left: calc(100% + var(--openbot-space-3));
}
.wfn-port-slot {
  position: relative;
  display: grid;
}
.wfn-stage .wfn-port {
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
  border-radius: var(--openbot-radius-pill);
  background: var(--wfn-port);
  box-shadow: 0 0 0 1px var(--wfn-ring);
  color: var(--openbot-text-secondary);
  opacity: 0;
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out), scale var(--openbot-duration-fast) var(--openbot-ease-out), background-color var(--openbot-duration-hover) var(--openbot-ease-out);
}
.wfn-port svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.wfn-node:is(:hover, :focus-within, [data-selected]) .wfn-port {
  opacity: 1;
}
.wfn-stage .wfn-port:hover {
  background: var(--openbot-text-primary);
  color: var(--openbot-bg-canvas);
}
.wfn-port-chip {
  position: absolute;
  top: 50%;
  padding: calc((1lh - 1cap) / 2 + 2px) var(--openbot-space-2);
  text-box: trim-both cap alphabetic;
  border-radius: var(--openbot-radius-sm);
  background: var(--wfn-card);
  box-shadow: 0 0 0 1px var(--wfn-ring-strong);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  translate: 0 -50%;
  transition: opacity var(--openbot-duration-hover) var(--openbot-ease-out);
}
.wfn-port-slot[data-side="out"] .wfn-port-chip {
  left: calc(100% + var(--openbot-space-2));
}
.wfn-port-slot[data-side="in"] .wfn-port-chip {
  right: calc(100% + var(--openbot-space-2));
}
.wfn-port-slot:has(.wfn-port:is(:hover, :focus-visible)) .wfn-port-chip {
  opacity: 1;
}
.wfn-toolbar {
  position: absolute;
  bottom: calc(100% + var(--openbot-space-3) / var(--wfn-scale, 1));
  left: round(50%, 1px);
  z-index: 2;
  display: flex;
  gap: var(--openbot-space-0-5);
  align-items: center;
  padding: var(--openbot-space-1);
  border-radius: var(--openbot-radius-pill);
  white-space: nowrap;
  background: var(--wfn-glass);
  box-shadow: 0 0 0 1px var(--wfn-ring-strong);
  translate: calc(round(-50%, 1px) + var(--wfn-snap-x, 0px) / var(--wfn-scale, 1)) calc(var(--wfn-snap-y, 0px) / var(--wfn-scale, 1));
  transform-origin: bottom center;
  scale: calc(1 / var(--wfn-scale, 1));
  backdrop-filter: var(--wfn-glass-blur);
}
.wfn-toolbar[data-side="below"] {
  top: calc(100% + var(--openbot-space-3) / var(--wfn-scale, 1));
  bottom: auto;
  transform-origin: top center;
}
.wfn-toolbar[data-side="below"][data-strip] {
  top: calc(100% + (8px + 52px + var(--openbot-space-2)) / var(--wfn-scale, 1));
}
.wfn-stage .wfn-toolbar :is(.ui-button, .wfn-toolbar-select) {
  border-radius: var(--openbot-radius-pill);
  box-shadow: none;
  color: var(--openbot-text-secondary);
}
.wfn-stage .wfn-toolbar :is(.ui-button, .wfn-toolbar-select):is(:hover, :focus-visible, [aria-pressed="true"]) {
  background: var(--wfn-hover);
  color: var(--openbot-text-primary);
}
.wfn-stage .wfn-toolbar .wfn-tool-action {
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  padding: 0;
}
.wfn-stage .wfn-toolbar .wfn-tool-action svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.wfn-stage .wfn-toolbar .wfn-tool-action[data-tone="danger"]:is(:hover, :focus-visible) {
  background: var(--openbot-danger);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-danger) 16%, transparent);
  }
  color: var(--openbot-danger-text);
}
.wfn-toolbar-separator {
  width: 1px;
  height: 16px;
  margin: 0 var(--openbot-space-1);
  background: var(--wfn-ring-strong);
}
.wfn-toolbar-separator:first-child {
  display: none;
}
.wfn-stage .wfn-toolbar-select {
  gap: var(--openbot-space-1);
  height: var(--openbot-control-md);
  padding-inline: var(--openbot-space-2);
  font-size: var(--openbot-text-sm);
}
.wfn-toolbar-select svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  color: var(--openbot-text-muted);
}
.wfn-text {
  width: auto;
  min-width: 120px;
}
.wfn-stage .wfn-text-input {
  min-height: 0;
  padding: var(--openbot-space-1) var(--openbot-space-1-5);
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  box-shadow: none;
  color: var(--wfn-text-ink, var(--openbot-text-primary));
  font-size: var(--openbot-text-lg);
  line-height: 1.4;
  resize: none;
  field-sizing: content;
}
.wfn-stage .wfn-text-input[data-font="mono"] {
  font-family: var(--openbot-font-mono);
}
.wfn-stage .wfn-text-input[data-text-size="lg"] {
  font-size: var(--openbot-text-3xl);
  letter-spacing: var(--openbot-tracking-tight);
}
.wfn-stage .wfn-text-input[data-text-size="xl"] {
  font-size: var(--wfn-text-title);
  letter-spacing: var(--openbot-tracking-tight);
}
.wfn-stage .wfn-text-input[data-bold] {
  font-weight: var(--openbot-weight-bold);
}
.wfn-stage .wfn-text-input:focus-visible {
  outline: none;
  box-shadow: none;
}
.wfn-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wfn-card[data-media] > .wfn-media {
  position: absolute;
  inset: 0;
}
.wfn-media-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--openbot-text-primary) 14%, transparent);
  }
}
.wfn-media-empty svg {
  width: 40px;
  height: 40px;
  stroke-width: 1.25;
}
.wfn-overlay {
  position: absolute;
  inset: auto 0 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--openbot-space-1);
  max-height: 100%;
  padding: var(--openbot-space-2);
  opacity: 0;
  translate: 0 4px;
  transition: opacity var(--openbot-duration-normal) var(--openbot-ease-out), translate var(--openbot-duration-normal) var(--openbot-ease-out);
}
.wfn-node:is(:hover, :focus-within, [data-selected]) .wfn-overlay {
  opacity: 1;
  translate: 0 0;
}
.wfn-overlay-bar {
  display: flex;
  gap: var(--openbot-space-1);
  align-items: center;
}
.wfn-stage .wfn-chip {
  display: inline-flex;
  gap: var(--openbot-space-1);
  align-items: center;
  height: var(--openbot-control-xs);
  padding: 0 var(--openbot-space-1-5);
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: var(--wfn-glass);
  box-shadow: inset 0 0 0 1px var(--wfn-ring-strong);
  color: var(--openbot-text-primary);
  font-size: var(--wfn-small);
  font-weight: var(--openbot-weight-medium);
  backdrop-filter: var(--wfn-glass-blur);
  cursor: pointer;
}
.wfn-chip svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.wfn-stage .wfn-collapse {
  margin-left: auto;
  border-radius: var(--openbot-radius-sm);
  color: var(--openbot-text-primary);
}
.wfn-panel {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--openbot-space-2);
  min-height: 0;
  padding: 10px;
  border-radius: var(--openbot-radius-md);
  background: var(--wfn-glass);
  box-shadow: inset 0 0 0 1px var(--wfn-ring);
  backdrop-filter: var(--wfn-glass-blur);
}
.wfn-panel .wfn-input {
  max-height: calc(var(--openbot-leading-sm) * 3);
  overflow-y: auto;
  font-weight: var(--openbot-weight-medium);
  scrollbar-width: none;
}
.wfn-stage .wfn-run-pill {
  gap: var(--openbot-space-1);
  height: var(--openbot-control-xs);
  padding: 0 10px 0 var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-pill);
  font-size: var(--openbot-text-sm);
}
.wfn-run-pill svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.wfn-stage .wfn-run-pill[aria-busy="true"] svg {
  display: none;
}
.wfn-stage .wfn-asset-trigger {
  display: grid;
  width: 100%;
  min-height: 120px;
  padding: 0;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: var(--wfn-field);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.wfn-node[data-kind="asset"] .wfn-card {
  align-content: stretch;
}
.wfn-node[data-height] .wfn-card[data-media] {
  aspect-ratio: auto;
  height: var(--wfn-height);
}
.wfn-node[data-height] .wfn-card[data-media] .wfn-asset-trigger > .wfn-media {
  position: absolute;
  inset: 0;
}
.wfn-card[data-media] .wfn-asset-trigger {
  position: absolute;
  inset: 0;
  border-radius: 0;
}
.wfn-asset-trigger:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 1px var(--openbot-text-muted);
}
.wfn-stage .wfn-asset-trigger[data-dropping] {
  background: var(--wfn-hover);
}
.wfn-asset-empty {
  display: grid;
  gap: var(--openbot-space-2);
  place-content: center;
  justify-items: center;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.wfn-asset-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--openbot-radius-pill);
  background: var(--wfn-hover);
  box-shadow: inset 0 0 0 1px var(--wfn-ring-strong);
  transition: background-color var(--openbot-duration-hover) var(--openbot-ease-out);
}
.wfn-asset-icon svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.wfn-asset-trigger:is(:hover, [data-dropping]) .wfn-asset-icon {
  background: var(--wfn-ring-strong);
}
.wfn-asset-caption {
  position: absolute;
  bottom: var(--openbot-space-2);
  left: var(--openbot-space-2);
  max-width: calc(100% - var(--openbot-space-4));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wfn-asset-file {
  display: flex;
  gap: var(--openbot-space-3);
  align-items: center;
  min-width: 0;
  padding: var(--openbot-space-3);
  text-align: left;
}
.wfn-asset-glyph {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 48px;
  border-radius: var(--openbot-radius-sm);
  background: var(--wfn-hover);
  box-shadow: inset 0 0 0 1px var(--wfn-ring-strong);
  color: var(--openbot-text-muted);
}
.wfn-asset-glyph svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  translate: 0 -4px;
}
.wfn-asset-glyph span {
  position: absolute;
  bottom: var(--openbot-space-1);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-glyph-sm);
  font-weight: var(--openbot-weight-bold);
  letter-spacing: var(--openbot-tracking-wide);
}
.wfn-asset-text {
  display: grid;
  min-width: 0;
}
.wfn-asset-name {
  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;
}
.wfn-asset-meta {
  color: var(--openbot-text-muted);
  font-size: var(--wfn-small);
  line-height: var(--openbot-leading-sm);
}
.wfn-menu {
  --ui-menu-bg: var(--wfn-glass);
  --ui-menu-panel-shadow: 0 0 0 1px var(--wfn-ring-strong);
  --ui-menu-item-hover: var(--wfn-hover);
  --ui-menu-radius: var(--openbot-radius-lg);
  backdrop-filter: var(--wfn-glass-blur);
}
.wfn-picker.ui-action-menu {
  --ui-menu-radius: var(--wfn-radius-card);
  display: flex;
  flex-direction: column;
  min-width: 232px;
  max-width: min(320px, calc(100vw - var(--openbot-space-4)));
  max-height: min(440px, var(--kb-popper-content-available-height, 440px));
  padding: 0;
}
.wfn-picker-search {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: 0 var(--openbot-space-3);
  border-bottom: 1px solid var(--wfn-ring-strong);
}
.wfn-picker.ui-action-menu .wfn-picker-search > svg {
  flex: none;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
}
.wfn-picker .wfn-picker-field {
  flex: 1;
  min-width: 0;
  height: var(--openbot-control-lg);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
}
.wfn-picker .wfn-picker-field::placeholder {
  color: var(--openbot-text-muted);
}
.wfn-picker .wfn-picker-field:focus-visible {
  outline: none;
  box-shadow: none;
}
.wfn-picker-list {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--openbot-space-1-5);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
fieldset.wfn-picker-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.wfn-picker-group + .wfn-picker-group {
  margin-top: var(--openbot-space-1-5);
}
.wfn-picker-heading {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  padding: var(--openbot-space-1-5) var(--openbot-space-2) var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--wfn-small);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
}
.wfn-picker.ui-action-menu .wfn-picker-heading > svg {
  flex: none;
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  fill: currentcolor;
}
.wfn-picker.ui-action-menu .wfn-picker-row:is([role^="menuitem"]) {
  height: auto;
  min-height: calc(var(--openbot-control-md) + var(--openbot-space-2));
  gap: calc(var(--openbot-space-2) + var(--openbot-space-0-5));
  padding-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-1) var(--openbot-space-2);
  border-radius: var(--wfn-radius-row);
  white-space: normal;
}
.wfn-picker.ui-action-menu .wfn-picker-row:is([role^="menuitem"])[data-checked] {
  background: var(--wfn-hover);
}
.wfn-picker.ui-action-menu .wfn-picker-row:is([role^="menuitem"])[data-checked]:is(:hover, :focus-visible, [data-highlighted]) {
  background: var(--wfn-ring-strong);
}
.wfn-picker-tile {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  overflow: hidden;
  border-radius: var(--openbot-radius-sm);
  background: var(--wfn-field);
  box-shadow: inset 0 0 0 1px var(--wfn-ring);
  color: var(--openbot-text-secondary);
  transition: color var(--openbot-duration-fast) var(--openbot-ease-out);
}
.wfn-picker-tile[data-kind] {
  --wfn-kind: var(--openbot-text-secondary);
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  background: none;
  box-shadow: none;
  color: var(--wfn-kind);
}
.wfn-picker.ui-action-menu:has(.wfn-picker-tile[data-kind]) {
  max-height: min(560px, var(--kb-popper-content-available-height, 560px));
}
.wfn-picker.ui-action-menu .wfn-picker-row:has(> .wfn-picker-tile[data-kind]) {
  min-height: var(--openbot-control-md);
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-1) var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
}
.wfn-picker-row[data-checked] .wfn-picker-tile {
  box-shadow: inset 0 0 0 1px var(--wfn-ring-strong);
  color: var(--openbot-text-primary);
}
:is(.wfn-picker.ui-action-menu, .wfn-drop-menu) .wfn-picker-tile > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: var(--openbot-icon-stroke);
}
.wfn-picker.ui-action-menu .wfn-picker-tile > svg.wfn-model-logo, .wfn-picker.ui-action-menu .wfn-picker-chip > svg.wfn-model-logo {
  fill: currentcolor;
  stroke: none;
}
.wfn-picker-tile > .wfn-swatch {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.wfn-picker-tile:has(> .agent-avatar), .wfn-picker-row[data-checked] .wfn-picker-tile:has(> .agent-avatar) {
  overflow: visible;
  background: none;
  box-shadow: none;
}
.wfn-picker-tile > .agent-avatar {
  --agent-avatar-optical-offset: calc(var(--openbot-control-sm) * -0.14);
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
}
.wfn-picker-tile > .wfn-font-sample {
  font-size: var(--openbot-text-lg);
}
.wfn-picker-tile > .wfn-font-sample[data-step="1"] {
  font-size: var(--openbot-text-sm);
}
.wfn-picker-tile > .wfn-font-sample[data-step="3"] {
  font-size: var(--openbot-text-2xl);
}
.wfn-picker-tile > .wfn-font-sample[data-step="4"] {
  font-size: var(--openbot-text-3xl);
}
.wfn-picker-aspect {
  width: calc(var(--openbot-icon-md) * var(--wfn-aspect-w));
  height: calc(var(--openbot-icon-md) * var(--wfn-aspect-h));
  border: 1.5px solid currentcolor;
  border-radius: var(--openbot-radius-xs);
}
.wfn-picker-meter {
  display: flex;
  align-items: flex-end;
  gap: var(--openbot-space-0-5);
  height: var(--openbot-icon-md);
}
.wfn-picker-meter > i {
  width: 3px;
  border-radius: var(--openbot-radius-pill);
  background: var(--wfn-ring-strong);
}
.wfn-picker-meter > i[data-on] {
  background: currentcolor;
}
.wfn-picker-meter > i:nth-child(1) {
  height: 20%;
}
.wfn-picker-meter > i:nth-child(2) {
  height: 40%;
}
.wfn-picker-meter > i:nth-child(3) {
  height: 60%;
}
.wfn-picker-meter > i:nth-child(4) {
  height: 80%;
}
.wfn-picker-meter > i:nth-child(5) {
  height: 100%;
}
.wfn-picker-body {
  display: grid;
  flex: 1;
  gap: var(--openbot-space-1);
  min-width: 0;
}
.wfn-picker-name {
  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;
}
.wfn-picker-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-1);
}
.wfn-picker-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  height: 18px;
  padding: 0 var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-xs);
  background: var(--wfn-hover);
  color: var(--openbot-text-secondary);
  font-size: var(--wfn-small);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}
.wfn-picker.ui-action-menu .wfn-picker-chip > svg {
  flex: none;
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.wfn-picker.ui-action-menu .wfn-picker-row > svg.wfn-picker-check {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  margin-inline-start: auto;
  color: var(--openbot-text-primary);
}
.wfn-picker-empty {
  margin: 0;
  padding: var(--openbot-space-4) var(--openbot-space-3);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-align: center;
}
.wfn-model-picker.wfn-picker.ui-action-menu {
  width: min(360px, calc(100vw - var(--openbot-space-4)));
  max-width: none;
}
.wfn-model-layout {
  display: flex;
  min-height: 0;
  max-height: inherit;
}
.wfn-model-rail {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-2);
  border-inline-end: 1px solid var(--wfn-ring-strong);
}
.wfn-model-tab-hint {
  display: flex;
}
.wfn-model-tab {
  display: grid;
  place-items: center;
  width: var(--openbot-control-lg);
  height: var(--openbot-control-lg);
  padding: 0;
  border: 0;
  border-radius: var(--openbot-radius-md);
  outline: 0;
  background: transparent;
  color: var(--openbot-text-primary);
  cursor: pointer;
  transition: background-color var(--openbot-duration-hover) var(--openbot-ease-out);
}
.wfn-model-tab:hover {
  background: var(--wfn-hover);
}
.wfn-model-tab[data-selected] {
  background: var(--wfn-hover);
  box-shadow: inset 0 0 0 1px var(--wfn-ring-strong);
}
.wfn-model-picker .wfn-model-tab:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--openbot-text-muted);
}
.wfn-model-tab > .wfn-model-mark {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  fill: currentcolor;
  opacity: 0.48;
  transition: opacity var(--openbot-duration-hover) var(--openbot-ease-out);
}
.wfn-model-tab:hover > .wfn-model-mark {
  opacity: 0.8;
}
.wfn-model-tab[data-selected] > .wfn-model-mark {
  opacity: 1;
}
.wfn-model-panel {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.wfn-model-heading {
  overflow: hidden;
  padding: var(--openbot-space-3) var(--openbot-space-3) var(--openbot-space-1);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wfn-model-list {
  margin: 0;
  list-style: none;
}
.wfn-model-list .wfn-picker-row[role="option"] {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  min-height: calc(var(--openbot-control-md) + var(--openbot-space-2));
  padding-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-1-5) var(--openbot-space-2);
  border-radius: var(--wfn-radius-row);
  outline: 0;
  color: var(--openbot-text-primary);
  cursor: pointer;
  transition: background-color var(--openbot-duration-hover) var(--openbot-ease-out);
}
.wfn-model-list .wfn-picker-row[role="option"]:is(:hover, [data-highlighted], [data-selected]) {
  background: var(--wfn-hover);
}
.wfn-model-list .wfn-picker-row[role="option"][data-selected]:is(:hover, [data-highlighted]) {
  background: var(--wfn-ring-strong);
}
.ui-popover-menu-surface.wfn-popover {
  display: grid;
  gap: var(--openbot-space-3);
  width: 344px;
  padding: var(--openbot-space-3);
  border-radius: var(--wfn-radius-card);
  background: var(--wfn-glass);
  box-shadow: 0 0 0 1px var(--wfn-ring-strong);
  backdrop-filter: var(--wfn-glass-blur);
}
.wfn-popover-head {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
  justify-content: space-between;
  margin-block: calc(var(--openbot-space-1) * -1);
}
.wfn-popover-head .ui-button {
  font-size: var(--openbot-text-sm);
}
.wfn-popover-title {
  margin: 0;
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
}
.wfn-library {
  display: grid;
  gap: var(--openbot-space-3);
}
.wfn-popover .wfn-library-tabs {
  padding: 0;
  background: transparent;
}
.wfn-popover .wfn-library-tabs .ui-sliding-tabs-trigger {
  border-radius: var(--openbot-radius-pill);
  font-size: var(--openbot-text-sm);
}
.wfn-popover .wfn-library-tabs .ui-sliding-tabs-pill {
  top: 0;
  border-radius: var(--openbot-radius-pill);
  background: var(--wfn-ring-strong);
}
.wfn-library-search {
  display: flex;
  gap: var(--openbot-space-1-5);
  align-items: center;
  height: var(--openbot-control-md);
  padding: 0 var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
  background: var(--wfn-field);
  transition: box-shadow var(--openbot-duration-hover) var(--openbot-ease-out);
}
.wfn-library-search:focus-within {
  box-shadow: inset 0 0 0 1px var(--wfn-ring-strong);
}
.wfn-library-search > svg {
  flex: none;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
}
.wfn-popover .wfn-library-search .ui-input {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: var(--openbot-text-sm);
}
.wfn-popover .wfn-library-search .ui-input:focus-visible {
  outline: none;
  box-shadow: none;
}
.wfn-scroll {
  position: relative;
}
.wfn-library-scroll {
  max-height: 280px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.wfn-library-scroll::-webkit-scrollbar {
  display: none;
}
.wfn-library-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--openbot-space-2);
}
.wfn-library-empty {
  margin: 0;
  padding: var(--openbot-space-6) var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-align: center;
  text-wrap: pretty;
}
.wfn-scroll-track {
  position: absolute;
  top: 0;
  right: calc(-1 * var(--openbot-space-3));
  bottom: 0;
  width: var(--openbot-space-3);
}
.wfn-scroll-thumb {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--openbot-space-1);
  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) 24%, transparent);
  }
  opacity: 0;
  transition-property: opacity, width, background-color;
  transition-duration: var(--openbot-duration-fast);
  transition-timing-function: var(--openbot-ease-out);
}
.wfn-scroll:is(:hover, :focus-within) .wfn-scroll-thumb, .wfn-scroll-track[data-dragging] .wfn-scroll-thumb {
  opacity: 1;
}
.wfn-scroll-track:hover .wfn-scroll-thumb, .wfn-scroll-track[data-dragging] .wfn-scroll-thumb {
  width: var(--openbot-space-1-5);
  background: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-primary) 40%, transparent);
  }
}
.wfn-popover .wfn-library-tile {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--openbot-space-1);
  height: auto;
  padding: var(--openbot-space-1);
  border-radius: var(--openbot-radius-md);
  text-align: start;
}
.wfn-popover .wfn-library-tile[aria-pressed="true"] {
  box-shadow: inset 0 0 0 1px var(--openbot-text-primary);
}
.wfn-popover .wfn-library-tile:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--openbot-text-primary) 40%, transparent);
  }
}
.wfn-popover .wfn-library-tile[aria-pressed="true"]:focus-visible {
  box-shadow: inset 0 0 0 2px var(--openbot-text-primary);
}
.wfn-library-thumb {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--openbot-radius-sm);
  background: var(--wfn-hover);
}
.wfn-library-name {
  overflow: hidden;
  color: var(--openbot-text-secondary);
  font-size: var(--wfn-small);
  font-weight: var(--openbot-weight-regular);
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .wfn-overlay {
    translate: 0 0;
  }
}
.wfn-stage :is(.wfn-node, .wfn-text) {
  z-index: 1;
}
.wfn-edges {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: visible;
  pointer-events: none;
}
.wfn-edge {
  --wfn-edge: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --wfn-edge: color-mix(in srgb, var(--openbot-text-primary) 32%, transparent);
  }
  color: var(--wfn-edge);
}
.wfn-edge[data-tone="done"] {
  --wfn-edge: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --wfn-edge: color-mix(in srgb, var(--openbot-text-primary) 60%, transparent);
  }
}
.wfn-edge[data-tone="run"] {
  --wfn-edge: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --wfn-edge: color-mix(in srgb, var(--openbot-text-primary) 72%, transparent);
  }
}
.wfn-edge[data-selected] {
  --wfn-edge: var(--openbot-text-primary);
}
.wfn-edge[data-removing] {
  --wfn-edge: var(--openbot-danger);
}
.wfn-edge-line, .wfn-edge-comet, .wfn-edge-draft {
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
}
.wfn-edge-line {
  stroke-width: 1.5;
  stroke-dasharray: 5 5;
  transition: color var(--openbot-duration-hover) var(--openbot-ease-out);
}
.wfn-edge:is([data-tone="done"], [data-selected]) .wfn-edge-line {
  stroke-dasharray: none;
}
.wfn-edge[data-motion] .wfn-edge-line {
  animation: wfn-march 1.2s linear infinite;
}
.wfn-edge:is([data-tone="done"], [data-selected]) .wfn-edge-line {
  animation: none;
}
@keyframes wfn-march {
  to {
    stroke-dashoffset: -10;
  }
}
.wfn-edge-comet {
  stroke: var(--openbot-text-primary);
  stroke-width: 3;
  stroke-dasharray: 0.12 1;
  animation: wfn-comet 1.1s var(--openbot-ease-out) infinite;
}
@keyframes wfn-comet {
  from {
    stroke-dashoffset: 0.12;
  }
  to {
    stroke-dashoffset: -1;
  }
}
.wfn-edge-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 14;
  pointer-events: stroke;
  cursor: pointer;
}
.wfn-edge-draft {
  color: var(--openbot-text-muted);
  stroke-width: 2;
  stroke-dasharray: 5 5;
  transition: color var(--openbot-duration-hover) var(--openbot-ease-out);
}
.wfn-edge-draft[data-state="ok"] {
  color: var(--openbot-text-primary);
  stroke-dasharray: none;
}
.wfn-edge-draft[data-state="refused"] {
  color: var(--openbot-danger);
}
.wfn-edge-draft[data-state="loop"] {
  color: var(--openbot-warning);
  stroke-dasharray: none;
}
.wfn-draft-reason {
  position: absolute;
  z-index: 3;
  padding: 2px var(--openbot-space-2);
  border-radius: var(--openbot-radius-sm);
  background: var(--wfn-card);
  box-shadow: 0 0 0 1px var(--openbot-danger-border);
  color: var(--openbot-danger-text);
  font-size: var(--openbot-text-sm);
  white-space: nowrap;
  pointer-events: none;
  transform-origin: 0 0;
  translate: calc(14px / var(--wfn-scale, 1)) calc(14px / var(--wfn-scale, 1));
  scale: calc(1 / var(--wfn-scale, 1));
}
.wfn-draft-reason[data-tone="loop"] {
  box-shadow: 0 0 0 1px var(--openbot-warning);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--openbot-warning) 45%, transparent);
  }
  color: var(--openbot-warning-text);
}
.wfn-edge-actions {
  position: absolute;
  z-index: 2;
  display: flex;
  transform-origin: 0 0;
  translate: calc(-50% / var(--wfn-scale, 1)) calc(-50% / var(--wfn-scale, 1));
  scale: calc(1 / var(--wfn-scale, 1));
}
.wfn-stage .wfn-edge-actions .wfn-edge-remove {
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-danger);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-danger) 14%, var(--wfn-card));
  }
  box-shadow: 0 0 0 1px var(--openbot-danger-border);
  color: var(--openbot-danger-text);
  opacity: 1;
  scale: 1;
  transition-property: opacity, scale, background-color;
  transition-duration: var(--openbot-duration-fast);
  transition-timing-function: var(--openbot-ease-out);
}
.wfn-stage .wfn-edge-actions .wfn-edge-remove:hover {
  background: var(--openbot-danger);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-danger) 28%, var(--wfn-card));
  }
  color: var(--openbot-danger-text);
}
@starting-style {
  .wfn-stage .wfn-edge-actions .wfn-edge-remove {
    opacity: 0;
    scale: 0.6;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wfn-stage .wfn-edge-actions .wfn-edge-remove {
    transition: none;
  }
}
.wfn-stage .wfn-port[data-connected] {
  opacity: 1;
}
.wfn-stage .wfn-port:is([data-armed], [data-target]) {
  background: var(--openbot-text-primary);
  color: var(--openbot-bg-canvas);
  opacity: 1;
}
.wfn-stage .wfn-port[data-dim] {
  opacity: 0.25;
}
.wfn-stage .wfn-port[data-refused] {
  background: var(--openbot-danger);
  color: var(--openbot-text-primary);
  opacity: 1;
}
.wfn-stage .wfn-node:not(:hover, :focus-within, [data-selected]) .wfn-port:not([data-connected], [data-armed], [data-target], [data-dim], [data-refused], [data-missing]) {
  scale: 0.5;
}
.wfn-node[data-status="running"] .wfn-card {
  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) 16%, transparent);
  }
}
.wfn-node[data-status="running"] .wfn-card-frame::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: -1.5px;
  padding: 1.5px;
  --wfn-radius-ring: calc(var(--wfn-radius-card) + 1.5px);
  border-radius: var(--wfn-radius-ring);
  background: conic-gradient( from var(--wfn-sweep), transparent 0turn 0.45turn, var(--openbot-text-primary) 0.72turn, var(--openbot-text-primary) 0.9turn, var(--openbot-text-primary) 0.985turn, transparent 1turn );
  @supports (color: color-mix(in lab, red, red)) {
    background: conic-gradient( from var(--wfn-sweep), transparent 0turn 0.45turn, color-mix(in srgb, var(--openbot-text-primary) 24%, transparent) 0.72turn, color-mix(in srgb, var(--openbot-text-primary) 72%, transparent) 0.9turn, var(--openbot-text-primary) 0.985turn, transparent 1turn );
  }
  mask: linear-gradient(var(--openbot-text-primary) 0 0) content-box, linear-gradient(var(--openbot-text-primary) 0 0);
  mask-composite: exclude;
  pointer-events: none;
  animation: wfn-sweep 1.6s linear infinite;
}
@property --wfn-sweep {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0turn;
}
@keyframes wfn-sweep {
  to {
    --wfn-sweep: 1turn;
  }
}
.wfn-run-time {
  display: inline-flex;
  gap: var(--openbot-space-1);
  align-items: center;
  margin-inline-start: auto;
  color: var(--openbot-text-secondary);
  font-weight: var(--openbot-weight-medium);
  font-variant-numeric: tabular-nums;
  transition: opacity var(--openbot-duration-hover) var(--openbot-ease-out);
  @starting-style {
    opacity: 0;
  }
}
.wfn-run-time[data-done] {
  color: var(--openbot-success-text);
  animation: wfn-run-time-out 1.8s var(--openbot-ease-out) forwards;
}
.wfn-run-time[data-failed] {
  color: var(--openbot-danger-text);
}
@keyframes wfn-run-time-out {
  0%, 70% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.wfn-result-pending {
  display: grid;
  gap: var(--openbot-space-2);
  padding-block: var(--openbot-space-1);
}
.wfn-result-pending .ui-skeleton {
  min-height: var(--openbot-space-2);
  background: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-primary) 9%, transparent);
  }
}
.wfn-result-pending .ui-skeleton:nth-child(2) {
  width: 88%;
  animation-delay: 120ms;
}
.wfn-result-pending .ui-skeleton:nth-child(3) {
  width: 56%;
  animation-delay: 240ms;
}
.wfn-result-body {
  position: relative;
}
.wfn-result-body[data-running] p {
  visibility: hidden;
}
.wfn-result-body p + .wfn-result-pending {
  position: absolute;
  inset: 0;
  align-content: start;
  overflow: hidden;
}
.wfn-node[data-status="running"] .wfn-card[data-media]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient( 100deg, transparent 30%, var(--openbot-text-primary) 50%, transparent 70% );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient( 100deg, transparent 30%, color-mix(in srgb, var(--openbot-text-primary) 12%, transparent) 50%, transparent 70% );
  }
  background-size: 250% 100%;
  pointer-events: none;
  animation: wfn-sheen 1.4s var(--openbot-ease-in-out) infinite;
}
@keyframes wfn-sheen {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0% 0;
  }
}
.wfn-art-layer {
  --wfn-art-spring: cubic-bezier(0.34, 1.35, 0.64, 1);
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transition-property: rotate, translate, scale, opacity;
  transition-duration: var(--openbot-duration-slow);
  transition-timing-function: var(--wfn-art-spring);
}
.wfn-art-color {
  fill: var(--wfn-art-color);
}
.wfn-art-face-light {
  fill: var(--wfn-art-light);
}
.wfn-art-face-dark {
  fill: var(--wfn-art-dark);
}
.wfn-art-gloss {
  fill: var(--openbot-paper);
  @supports (color: color-mix(in lab, red, red)) {
    fill: color-mix(in srgb, var(--openbot-paper) 55%, transparent);
  }
}
.wfn-art-wood {
  fill: var(--wfn-art-wood-color);
}
.wfn-art-wood-shade {
  fill: var(--wfn-art-wood-color);
  @supports (color: color-mix(in lab, red, red)) {
    fill: color-mix(in srgb, var(--wfn-art-wood-color) 84%, var(--openbot-paper-text));
  }
}
.wfn-art-rubber {
  fill: var(--openbot-file-pink);
}
.wfn-art-rubber-shade {
  fill: var(--openbot-file-pink);
  @supports (color: color-mix(in lab, red, red)) {
    fill: color-mix(in srgb, var(--openbot-file-pink) 80%, var(--openbot-paper-text));
  }
}
.wfn-art-metal {
  fill: var(--wfn-art-metal-color);
}
.wfn-art-metal-groove {
  fill: var(--wfn-art-metal-color);
  @supports (color: color-mix(in lab, red, red)) {
    fill: color-mix(in srgb, var(--wfn-art-metal-color) 70%, var(--openbot-paper-text));
  }
}
.wfn-art-tint-back {
  fill: var(--wfn-art-base);
  @supports (color: color-mix(in lab, red, red)) {
    fill: color-mix(in srgb, var(--wfn-art-base) 36%, var(--wfn-card));
  }
}
.wfn-art-tint-middle {
  fill: var(--wfn-art-base);
  @supports (color: color-mix(in lab, red, red)) {
    fill: color-mix(in srgb, var(--wfn-art-base) 62%, var(--wfn-card));
  }
}
.wfn-art-curl {
  fill: var(--wfn-art-light);
}
.wfn-art-stop-light {
  stop-color: var(--wfn-art-light);
}
.wfn-art-stop-color {
  stop-color: var(--wfn-art-base);
}
.wfn-art-stop-edge {
  stop-color: var(--openbot-paper);
  @supports (color: color-mix(in lab, red, red)) {
    stop-color: color-mix(in srgb, var(--openbot-paper) 70%, transparent);
  }
}
.wfn-art-stop-clear {
  stop-color: transparent;
}
.wfn-art-cut {
  stroke: var(--openbot-bg-surface-raised);
  @supports (color: color-mix(in lab, red, red)) {
    stroke: color-mix(in srgb, var(--openbot-bg-surface-raised) 75%, var(--wfn-card));
  }
  stroke-width: 2;
  stroke-linejoin: round;
  paint-order: stroke;
}
.wfn-art-edge {
  fill: none;
  stroke-width: 0.8;
  stroke-linejoin: round;
}
.wfn-tool-art [data-layer="eraser"], .wfn-tool-art[data-eraser] [data-layer="pen"] {
  opacity: 0;
  scale: 0.25;
}
.wfn-tool-art[data-eraser] [data-layer="eraser"] {
  opacity: 1;
  scale: 1;
}
.wfn-tool-art [data-layer="back"] {
  rotate: -10deg;
}
.wfn-tool-art [data-layer="middle"] {
  rotate: 6deg;
}
.wfn-menu :is([role="menuitem"], [role="menuitemcheckbox"]) .wfn-keys {
  margin-inline-start: auto;
  padding-inline-start: var(--openbot-space-4);
}
.wfn-keys {
  display: inline-flex;
  gap: 2px;
  align-items: center;
}
.wfn-keys .ui-kbd {
  min-width: 18px;
  height: 18px;
  border: 0;
  background: var(--wfn-hover);
  color: var(--openbot-text-muted);
  font-family: inherit;
  font-size: var(--wfn-small);
}
.wfn-hint {
  display: inline-flex;
  gap: var(--openbot-space-2);
  align-items: center;
}
.ui-tooltip.wfn-tooltip {
  border-radius: var(--openbot-radius-md);
  box-shadow: 0 0 0 1px var(--openbot-border-strong);
  font-weight: var(--openbot-weight-medium);
}
.ui-tooltip.wfn-tooltip:has(.wfn-keys) {
  padding-inline-end: var(--openbot-space-1-5);
}
.wfn-strip {
  position: absolute;
  top: calc(100% + 8px / var(--wfn-scale, 1));
  left: round(50%, 1px);
  transform-origin: top center;
  scale: calc(1 / var(--wfn-scale, 1));
  z-index: 2;
  display: flex;
  gap: var(--openbot-space-1);
  align-items: center;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--openbot-text-secondary);
  translate: calc(round(-50%, 1px) + var(--wfn-snap-x, 0px) / var(--wfn-scale, 1)) calc(var(--wfn-snap-y, 0px) / var(--wfn-scale, 1));
}
.wfn-strip-list {
  display: flex;
  gap: var(--openbot-space-1-5);
  align-items: center;
  max-width: calc(7 * 36px + 6 * var(--openbot-space-1-5) + 16px);
  height: 52px;
  overflow-x: auto;
  padding: 0 var(--openbot-space-1);
  scrollbar-width: none;
}
.wfn-strip-item {
  --wfn-strip-size: 36px;
  display: grid;
  flex: none;
  place-items: center;
  width: var(--wfn-strip-size);
  height: var(--wfn-strip-size);
  overflow: hidden;
  padding: 2px;
  border: 2px solid var(--wfn-kind);
  @supports (color: color-mix(in lab, red, red)) {
    border: 2px solid color-mix(in srgb, var(--wfn-kind) 40%, transparent);
  }
  border-radius: var(--openbot-radius-pill);
  background: var(--wfn-glass);
  color: var(--openbot-text-secondary);
  font-size: var(--wfn-small);
  font-variant-numeric: tabular-nums;
  font-weight: var(--openbot-weight-semibold);
  cursor: pointer;
  backdrop-filter: var(--wfn-glass-blur);
  transition-property: width, height, border-color, color, scale;
  transition-duration: var(--openbot-duration-fast);
  transition-timing-function: var(--openbot-ease-out);
}
.wfn-strip-item:hover {
  border-color: var(--wfn-kind);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--wfn-kind) 72%, transparent);
  }
  color: var(--openbot-text-primary);
}
.wfn-strip-item[aria-pressed="true"] {
  --wfn-strip-size: 44px;
  border-color: var(--wfn-kind);
  color: var(--openbot-text-primary);
}
.wfn-strip-item:active {
  scale: 0.96;
}
.wfn-strip-item:focus-visible {
  outline: 2px solid var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    outline: 2px solid color-mix(in srgb, var(--openbot-text-primary) 40%, transparent);
  }
  outline-offset: 1px;
}
.wfn-strip-item img {
  width: 100%;
  height: 100%;
  border-radius: var(--openbot-radius-pill);
  object-fit: cover;
}
.wfn-strip-item[data-failed] {
  color: var(--openbot-danger-text);
}
.wfn-strip-failed {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
:is(.wfn-menu-icon, .wfn-picker-tile, .wfn-node, .wfn-minimap-node)[data-kind="text"] {
  --wfn-kind: var(--openbot-file-teal);
}
:is(.wfn-menu-icon, .wfn-picker-tile, .wfn-node, .wfn-minimap-node)[data-kind="prompt"] {
  --wfn-kind: var(--openbot-file-blue);
}
:is(.wfn-menu-icon, .wfn-picker-tile, .wfn-node, .wfn-minimap-node)[data-kind="asset"] {
  --wfn-kind: var(--openbot-file-orange);
}
:is(.wfn-menu-icon, .wfn-picker-tile, .wfn-node, .wfn-minimap-node)[data-kind="llm"] {
  --wfn-kind: var(--openbot-chart-storage-downloads);
}
:is(.wfn-menu-icon, .wfn-picker-tile, .wfn-node, .wfn-minimap-node)[data-kind="agent"] {
  --wfn-kind: var(--openbot-file-green);
}
:is(.wfn-menu-icon, .wfn-picker-tile, .wfn-node, .wfn-minimap-node)[data-kind="image"] {
  --wfn-kind: var(--openbot-file-pink);
}
@media (prefers-reduced-motion: reduce) {
  .wfn-node[data-status="running"] .wfn-card-frame::before {
    background: var(--openbot-text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--openbot-text-primary) 56%, transparent);
    }
    animation: none;
  }
  .wfn-node[data-status="running"] .wfn-card[data-media]::after {
    background-position: 50% 0;
    animation: none;
  }
  .wfn-run-time[data-done] {
    animation: none;
  }
}
.wfn-card-frame {
  position: relative;
  display: grid;
}
.wfn-node {
  --wfn-select-line: calc(1.5px / var(--wfn-scale, 1));
  --wfn-select-gap: calc(3px / var(--wfn-scale, 1));
}
.wfn-node .wfn-card {
  outline: var(--wfn-select-line) solid transparent;
  outline-offset: var(--wfn-select-gap);
  transition-property: box-shadow, outline-color, min-height, height;
  transition-duration: var(--openbot-duration-hover), var(--openbot-duration-hover), var(--openbot-duration-slow), var(--openbot-duration-slow);
  transition-timing-function: var(--openbot-ease-out);
}
.wfn-node:not([data-selected]) .wfn-card-frame:hover .wfn-card {
  box-shadow: 0 0 0 1px var(--wfn-ring-strong);
}
.wfn-node[data-selected] .wfn-card {
  outline-color: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    outline-color: color-mix(in srgb, var(--openbot-text-primary) 40%, transparent);
  }
}
.wfn-text {
  --wfn-select-line: calc(1px / var(--wfn-scale, 1));
  --wfn-select-gap: calc(4px / var(--wfn-scale, 1));
}
.wfn-text[data-selected] .wfn-text-input {
  outline: var(--wfn-select-line) solid var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    outline: var(--wfn-select-line) solid color-mix(in srgb, var(--openbot-text-primary) 32%, transparent);
  }
  outline-offset: var(--wfn-select-gap);
}
.wfn-grip {
  --wfn-grip-size: calc(18px / var(--wfn-scale, 1));
  --wfn-grip-line: calc(3px / var(--wfn-scale, 1));
  --wfn-grip-out: calc(var(--wfn-select-gap) + var(--wfn-select-line) / 2 + var(--wfn-grip-line) / 2);
  --wfn-grip-radius: calc(var(--wfn-radius-card) + var(--wfn-grip-out));
  --wfn-grip-arc: var(--wfn-grip-line) solid var(--wfn-grip-color, transparent);
  --wfn-grip-band: calc(12px / var(--wfn-scale, 1));
  --wfn-grip-band-out: calc(var(--wfn-grip-out) * -1 - var(--wfn-grip-band) / 2);
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
  width: var(--wfn-grip-size);
  height: var(--wfn-grip-size);
  transition: border-color var(--openbot-duration-fast) var(--openbot-ease-out);
}
.wfn-grip::after {
  position: absolute;
  inset: calc(-6px / var(--wfn-scale, 1));
  content: "";
}
.wfn-grip[data-corner="nw"] {
  top: calc(var(--wfn-grip-out) * -1);
  left: calc(var(--wfn-grip-out) * -1);
}
.wfn-grip[data-corner="ne"] {
  top: calc(var(--wfn-grip-out) * -1);
  right: calc(var(--wfn-grip-out) * -1);
}
.wfn-grip[data-corner="se"] {
  right: calc(var(--wfn-grip-out) * -1);
  bottom: calc(var(--wfn-grip-out) * -1);
  border-right: var(--wfn-grip-arc);
  border-bottom: var(--wfn-grip-arc);
  border-bottom-right-radius: var(--wfn-grip-radius);
}
.wfn-grip[data-corner="sw"] {
  bottom: calc(var(--wfn-grip-out) * -1);
  left: calc(var(--wfn-grip-out) * -1);
}
.wfn-grip[data-side] {
  z-index: 1;
  width: auto;
  height: auto;
}
.wfn-grip[data-side]::after {
  display: none;
}
.wfn-grip:is([data-corner="n"], [data-corner="s"]) {
  right: var(--wfn-grip-size);
  left: var(--wfn-grip-size);
  height: var(--wfn-grip-band);
}
.wfn-grip:is([data-corner="e"], [data-corner="w"]) {
  top: var(--wfn-grip-size);
  bottom: var(--wfn-grip-size);
  width: var(--wfn-grip-band);
}
.wfn-grip[data-corner="n"] {
  top: var(--wfn-grip-band-out);
}
.wfn-grip[data-corner="s"] {
  bottom: var(--wfn-grip-band-out);
}
.wfn-grip[data-corner="e"] {
  right: var(--wfn-grip-band-out);
}
.wfn-grip[data-corner="w"] {
  left: var(--wfn-grip-band-out);
}
.wfn-ports {
  z-index: 1;
}
.wfn-text .wfn-grip {
  --wfn-grip-size: calc(12px / var(--wfn-scale, 1));
  --wfn-grip-line: calc(2px / var(--wfn-scale, 1));
  --wfn-grip-radius: calc(var(--openbot-radius-sm) + var(--wfn-grip-out));
}
.wfn-node:is(:hover, [data-selected]) .wfn-grip {
  --wfn-grip-color: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --wfn-grip-color: color-mix(in srgb, var(--openbot-text-primary) 32%, transparent);
  }
}
.wfn-node[data-selected] .wfn-grip, .wfn-node[data-resizing] .wfn-grip, .wfn-grip:hover {
  --wfn-grip-color: var(--openbot-text-primary);
}
.wfn-node[data-doomed] .wfn-card {
  outline-color: var(--openbot-danger);
}
.wfn-text[data-doomed] .wfn-text-input {
  outline: var(--wfn-select-line) solid var(--openbot-danger);
  outline-offset: var(--wfn-select-gap);
}
.wfn-node[data-doomed] .wfn-grip {
  --wfn-grip-color: var(--openbot-danger);
}
.wfn-grip[data-cursor="ew"] {
  cursor: ew-resize;
}
.wfn-grip[data-cursor="ns"] {
  cursor: ns-resize;
}
.wfn-grip[data-cursor="nwse"] {
  cursor: nwse-resize;
}
.wfn-grip[data-cursor="nesw"] {
  cursor: nesw-resize;
}
.wfn-node[data-height] .wfn-card:has(> .wfn-field-task) {
  grid-template-rows: 1fr;
}
.wfn-node[data-locked] :is(.wfn-label, .wfn-card) {
  cursor: default;
}
.wfn-lock-badge {
  display: inline-flex;
  color: var(--openbot-text-muted);
}
.wfn-lock-badge svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.wfn-text[data-sized] .wfn-text-input {
  width: 100%;
}
.wfn-node:focus-visible {
  outline: none;
}
.wfn-node:not(.wfn-text):focus-visible:not([data-selected]) .wfn-card {
  outline-color: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    outline-color: color-mix(in srgb, var(--openbot-text-primary) 40%, transparent);
  }
}
.wfn-hud-spin {
  animation: wfn-spin 1s linear infinite;
}
@keyframes wfn-spin {
  to {
    rotate: 360deg;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wfn-hud-spin {
    animation: none;
  }
  .wfn-art-layer {
    transition: none;
  }
  .wfn-node, .wfn-node .wfn-card, .wfn-stage .wfn-port, .wfn-grip {
    transition: none;
  }
}
@property --wfn-fade-start {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --wfn-fade-end {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@supports (animation-timeline: scroll()) {
  .wfn-node :is(textarea, .wfn-field-result p), .wfn-strip-list {
    --wfn-fade-size: var(--openbot-space-4);
    --wfn-fade-side: to bottom;
    mask-image: linear-gradient( var(--wfn-fade-side), transparent, var(--openbot-text-primary) var(--wfn-fade-start), var(--openbot-text-primary) calc(100% - var(--wfn-fade-end)), transparent );
    animation: wfn-fade-start linear both, wfn-fade-end linear both;
    animation-timeline: scroll(self block), scroll(self block);
    animation-range: 0 var(--wfn-fade-size), calc(100% - var(--wfn-fade-size)) 100%;
  }
  .wfn-strip-list {
    --wfn-fade-size: var(--openbot-space-6);
    --wfn-fade-side: to right;
    animation-timeline: scroll(self inline), scroll(self inline);
  }
}
@keyframes wfn-fade-start {
  from {
    --wfn-fade-start: 0px;
  }
  to {
    --wfn-fade-start: var(--wfn-fade-size);
  }
}
@keyframes wfn-fade-end {
  from {
    --wfn-fade-end: var(--wfn-fade-size);
  }
  to {
    --wfn-fade-end: 0px;
  }
}
.wfn-node[data-kind="trigger"], .wfn-node[data-kind="output"] {
  --wfn-width: 280px;
}
.wfn-node[data-kind="condition"], .wfn-node[data-kind="approval"] {
  --wfn-width: 300px;
}
.wfn-node[data-kind="note"] {
  --wfn-width: 240px;
  --wfn-height: 240px;
}
.wfn-node[data-kind="shape"] {
  --wfn-width: 208px;
  --wfn-height: 128px;
  --wfn-radius-card: var(--openbot-radius-md);
}
:is(.wfn-menu-icon, .wfn-picker-tile, .wfn-node, .wfn-minimap-node)[data-kind="trigger"] {
  --wfn-kind: var(--openbot-file-yellow);
}
:is(.wfn-menu-icon, .wfn-picker-tile, .wfn-node, .wfn-minimap-node)[data-kind="condition"] {
  --wfn-kind: var(--openbot-chart-series-codex);
}
:is(.wfn-menu-icon, .wfn-picker-tile, .wfn-node, .wfn-minimap-node)[data-kind="output"] {
  --wfn-kind: var(--openbot-chart-storage-workspaces);
}
:is(.wfn-menu-icon, .wfn-picker-tile, .wfn-node, .wfn-minimap-node)[data-kind="approval"] {
  --wfn-kind: var(--openbot-chart-storage-files);
}
:is(.wfn-menu-icon, .wfn-picker-tile, .wfn-node, .wfn-minimap-node)[data-kind="note"] {
  --wfn-kind: var(--openbot-file-yellow);
}
:is(.wfn-menu-icon, .wfn-picker-tile, .wfn-node, .wfn-minimap-node)[data-kind="shape"] {
  --wfn-kind: var(--openbot-text-secondary);
}
.wfn-stage .wfn-block-field > .wfn-pill {
  justify-self: start;
}
.wfn-block-field > .wfn-field-foot {
  justify-content: flex-start;
}
.wfn-block-field > .wfn-condition-foot {
  justify-content: space-between;
}
.wfn-block-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--openbot-space-2);
}
.wfn-github-mark {
  flex: none;
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  fill: currentcolor;
}
.wfn-settings {
  --wfn-settings-gap: 2px;
  display: grid;
  gap: var(--wfn-settings-gap);
  padding: var(--openbot-space-1);
  border-radius: var(--openbot-radius-md);
  background: var(--wfn-field);
}
.wfn-settings-head:not(:last-child) {
  padding-bottom: var(--openbot-space-1);
  border-bottom: 1px solid var(--wfn-ring);
  margin-bottom: calc(var(--openbot-space-1) - var(--wfn-settings-gap));
}
.wfn-settings-foot {
  padding-top: var(--openbot-space-1);
  border-top: 1px solid var(--wfn-ring);
  margin-top: calc(var(--openbot-space-1) - var(--wfn-settings-gap));
}
.wfn-settings > .ui-button {
  justify-self: start;
  margin: var(--openbot-space-1);
}
.wfn-settings > .wfn-alert {
  margin: var(--openbot-space-1);
}
.wfn-settings-block {
  padding: var(--openbot-space-1) var(--openbot-space-2);
}
.wfn-row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  gap: var(--openbot-space-2);
  align-items: center;
  width: 100%;
  min-height: 36px;
  padding: var(--openbot-space-1) var(--openbot-space-2);
  border: 0;
  border-radius: var(--wfn-radius-row);
  background: transparent;
  color: var(--openbot-text-primary);
  font: inherit;
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--openbot-duration-hover) var(--openbot-ease-out);
}
.wfn-row:not([data-static]):is(:hover, [aria-expanded="true"]) {
  background: var(--wfn-hover);
}
.wfn-row:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--wfn-ring-strong);
}
.wfn-row[data-static] {
  cursor: default;
}
.wfn-row:disabled {
  cursor: default;
  opacity: 0.6;
}
.wfn-row-name {
  color: var(--openbot-text-muted);
}
.wfn-row-value {
  display: flex;
  gap: var(--openbot-space-1-5);
  align-items: center;
  min-width: 0;
  font-weight: var(--openbot-weight-medium);
}
.wfn-row-value:has(> .wfn-tag) {
  flex-wrap: wrap;
}
.wfn-row-value[data-empty] {
  color: var(--openbot-text-secondary);
  font-weight: var(--openbot-weight-regular);
}
.wfn-row-value > svg {
  flex: none;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-secondary);
}
.wfn-row-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wfn-row-arrow {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  color: var(--openbot-text-muted);
  transition: opacity var(--openbot-duration-hover) var(--openbot-ease-out);
}
:is(.wfn-settings, .wfn-settings-foot) > .wfn-row:not(:hover, :focus-visible, [aria-expanded="true"]) .wfn-row-arrow {
  opacity: 0;
}
.wfn-settings-head .wfn-row {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 40px;
}
.wfn-settings-head .wfn-row-value {
  font-weight: var(--openbot-weight-semibold);
}
.wfn-settings-head .wfn-row-name {
  display: none;
}
.wfn-settings-head .wfn-row-value > svg {
  box-sizing: content-box;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  padding: var(--openbot-space-1);
  border-radius: var(--openbot-radius-sm);
  background: var(--wfn-kind);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--wfn-kind) 16%, transparent);
  }
  box-shadow: inset 0 0 0 1px var(--wfn-kind);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wfn-kind) 14%, transparent);
  }
  color: var(--wfn-kind);
}
.wfn-row[data-input] {
  cursor: text;
}
.wfn-row[data-input]:focus-within {
  box-shadow: inset 0 0 0 1px var(--wfn-ring-strong);
}
.wfn-stage .wfn-row-input {
  grid-column: 2 / -1;
  min-width: 0;
  height: auto;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.wfn-stage .wfn-row-input:focus, .wfn-stage .wfn-row-input:focus-visible {
  outline: none;
  box-shadow: none;
}
.wfn-row-code {
  display: block;
  overflow: hidden;
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wfn-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  min-width: 0;
  max-width: 100%;
  height: 22px;
  padding: 0 var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
  background: var(--wfn-hover);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  white-space: nowrap;
}
.wfn-tag-text {
  overflow: hidden;
  text-overflow: ellipsis;
}
.wfn-tag > svg {
  flex: none;
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.wfn-tag[data-warning] {
  color: var(--openbot-warning-text);
}
.wfn-tag[data-tone] {
  background: var(--wfn-tone);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--wfn-tone) 16%, transparent);
  }
  box-shadow: inset 0 0 0 1px var(--wfn-tone);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wfn-tone) 24%, transparent);
  }
  color: var(--wfn-tone);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--wfn-tone) 80%, var(--openbot-text-primary));
  }
}
.wfn-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--openbot-radius-pill);
  background: var(--wfn-tone);
}
.wfn-row-value[data-one-line] {
  flex-wrap: nowrap;
}
.wfn-row-value[data-one-line] > .wfn-row-text {
  flex: 1 1 auto;
}
.wfn-row-value[data-one-line] > .wfn-tag {
  flex: none;
}
.wfn-branch {
  position: relative;
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
  min-height: var(--openbot-control-sm);
  padding: 0 var(--openbot-space-3);
  border-radius: var(--openbot-radius-md);
  background: var(--wfn-field);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  transition: opacity var(--openbot-duration-hover) var(--openbot-ease-out);
}
.wfn-branch[data-skipped] {
  opacity: 0.5;
}
.wfn-branch-check {
  display: inline-grid;
  margin-left: auto;
  color: var(--openbot-success);
}
.wfn-branch-check svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.wfn-branch-port {
  position: absolute;
  top: 50%;
  left: calc(100% + var(--openbot-space-2) + 6px);
  translate: 0 -50%;
}
.wfn-edge-label {
  position: absolute;
  z-index: 1;
  padding: 0 var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-pill);
  background: var(--wfn-card);
  box-shadow: 0 0 0 1px var(--wfn-ring-strong);
  color: var(--openbot-text-secondary);
  font-size: var(--wfn-small);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
  text-transform: capitalize;
  pointer-events: none;
  translate: -50% -50%;
}
.wfn-edge-loop {
  position: absolute;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  padding: 0 var(--openbot-space-2) 0 var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-pill);
  background: var(--wfn-card);
  box-shadow: 0 0 0 1px var(--wfn-ring-strong);
  color: var(--openbot-text-secondary);
  font-size: var(--wfn-small);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
  white-space: nowrap;
  pointer-events: none;
  translate: -50% -50%;
}
.wfn-edge-loop svg {
  width: 0.875em;
  height: 0.875em;
}
.wfn-edge-loop[data-endless] {
  background: linear-gradient(var(--openbot-warning-soft) 0 0), var(--wfn-card);
  box-shadow: 0 0 0 1px var(--openbot-warning);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--openbot-warning) 45%, transparent);
  }
  color: var(--openbot-warning-text);
}
:is(.wfn-node, .wfn-ghost)[data-kind="note"] {
  --wfn-note-paper: oklch(from var(--wfn-note) 0.88 calc(c * 0.5) h);
  --wfn-note-edge: oklch(from var(--wfn-note) 0.76 calc(c * 0.6) h);
}
.wfn-node[data-kind="note"] .wfn-card {
  grid-template-rows: minmax(0, 1fr) auto;
  align-content: stretch;
  height: var(--wfn-height);
  padding: var(--openbot-space-4) var(--openbot-space-4) var(--openbot-space-3);
  background: var(--wfn-note-paper);
  box-shadow: 0 0 0 1px var(--wfn-note-edge);
}
.wfn-stage .wfn-note-input {
  height: 100%;
  overflow-y: auto;
  color: var(--wfn-note-ink);
  font-size: var(--openbot-text-2xl);
  font-weight: var(--openbot-weight-medium);
  line-height: 1.35;
  text-wrap: pretty;
  field-sizing: fixed;
  scrollbar-width: none;
}
.wfn-stage .wfn-note-input::placeholder {
  color: var(--openbot-paper-text-dim);
}
.wfn-stage .wfn-note-input[data-font="mono"] {
  font-family: var(--openbot-font-mono);
}
.wfn-stage .wfn-note-input[data-text-size="lg"] {
  font-size: var(--openbot-text-lg);
}
.wfn-stage .wfn-note-input[data-text-size="3xl"] {
  font-size: var(--openbot-text-3xl);
  letter-spacing: var(--openbot-tracking-tight);
}
.wfn-stage .wfn-note-input[data-text-size="display"] {
  font-size: var(--openbot-text-display);
  line-height: 1.2;
  letter-spacing: var(--openbot-tracking-tight);
}
.wfn-stage .wfn-note-input[data-bold] {
  font-weight: var(--openbot-weight-bold);
}
.wfn-note-author {
  overflow: hidden;
  color: var(--openbot-paper-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
  white-space: nowrap;
  text-overflow: ellipsis;
  user-select: none;
}
.wfn-font-sample {
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
  line-height: 1;
}
.wfn-font-sample[data-font="mono"] {
  font-family: var(--openbot-font-mono);
}
.wfn-swatch {
  flex: none;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  border-radius: var(--openbot-radius-pill);
  background: var(--wfn-swatch);
  box-shadow: inset 0 0 0 1px var(--wfn-ring-strong);
}
.wfn-alert {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: var(--openbot-space-1-5) var(--openbot-space-2) var(--openbot-space-1-5) var(--openbot-space-3);
  border-radius: var(--openbot-radius-md);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  transition: opacity var(--openbot-duration-hover) var(--openbot-ease-out);
}
.wfn-alert > svg {
  flex: none;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.wfn-alert-text {
  display: -webkit-box;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.wfn-alert[data-tone="danger"] {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger-text);
}
.wfn-alert[data-tone="warning"] {
  background: var(--openbot-warning-soft);
  color: var(--openbot-warning-text);
}
.wfn-alert[data-tone="success"] {
  background: var(--openbot-success-soft);
  color: var(--openbot-success-text);
}
.wfn-alert[data-stale] {
  opacity: 0.5;
}
.wfn-alert[data-pending] {
  background: var(--wfn-field);
}
.wfn-alert[data-pending] .ui-skeleton {
  width: 64%;
  min-height: var(--openbot-space-2);
  margin-block: var(--openbot-space-1);
  background: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-primary) 9%, transparent);
  }
}
.wfn-stage .wfn-alert .ui-button {
  flex: none;
  color: inherit;
}
.wfn-node[data-status="approval"] .wfn-card {
  box-shadow: 0 0 0 1px var(--openbot-warning);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--openbot-warning) 64%, transparent);
  }
}
.wfn-stage .wfn-port[data-missing]:not([data-target], [data-armed]) {
  opacity: 1;
}
.wfn-stage .wfn-pill[data-missing] {
  color: var(--openbot-warning-text);
}
.wfn-stage .wfn-pill[data-missing] > svg:first-child {
  color: inherit;
}
.wfn-pill-action {
  color: var(--openbot-text-muted);
}
.wfn-stage :is(.wfn-field-task, .wfn-field-fill, .wfn-field-system, .wfn-block-field) .wfn-input {
  max-height: 200px;
  overflow-y: auto;
}
.wfn-stage .wfn-node[data-height] :is(.wfn-field-task, .wfn-field-fill) .wfn-input {
  max-height: none;
}
.wfn-stage .wfn-pill > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wfn-stage .wfn-pill > :is(svg, .wfn-avatar) {
  flex: none;
}
.wfn-label[data-bare] {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: var(--openbot-space-1-5);
}
.wfn-stage .wfn-node[data-kind="shape"] .wfn-card {
  grid-template-rows: none;
  align-content: center;
  place-items: center;
  height: var(--wfn-height);
  padding: var(--openbot-space-3);
  background: transparent;
  box-shadow: none;
}
.wfn-stage .wfn-node[data-kind="shape"]:not([data-selected]) .wfn-card-frame:hover .wfn-card {
  box-shadow: none;
}
.wfn-shape-surface {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
span.wfn-shape-surface {
  border-radius: var(--wfn-radius-card);
  background: var(--wfn-shape);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--wfn-shape) 16%, transparent);
  }
  box-shadow: inset 0 0 0 2px var(--wfn-shape);
}
span.wfn-shape-surface:is([data-shape="circle"], [data-shape="oval"]) {
  border-radius: var(--openbot-radius-pill);
}
svg.wfn-shape-surface {
  fill: var(--wfn-shape);
  @supports (color: color-mix(in lab, red, red)) {
    fill: color-mix(in srgb, var(--wfn-shape) 16%, transparent);
  }
  stroke: var(--wfn-shape);
  stroke-width: 2;
  stroke-linejoin: round;
}
:root[data-openbot-color-scheme="light"] span.wfn-shape-surface[data-color="ink"] {
  background: var(--wfn-shape);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--wfn-shape) 5%, transparent);
  }
  box-shadow: inset 0 0 0 1.5px var(--wfn-shape);
}
:root[data-openbot-color-scheme="light"] svg.wfn-shape-surface[data-color="ink"] {
  fill: var(--wfn-shape);
  @supports (color: color-mix(in lab, red, red)) {
    fill: color-mix(in srgb, var(--wfn-shape) 5%, transparent);
  }
  stroke-width: 1.5;
}
.wfn-stage .wfn-shape-input {
  position: relative;
  width: 100%;
  max-height: 100%;
  overflow: hidden;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
  text-align: center;
  field-sizing: content;
}
.wfn-shape-icon {
  flex: none;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.wfn-stage .wfn-toolbar-select :is(.wfn-shape-icon, .wfn-swatch) {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-primary);
}
@media (prefers-reduced-motion: reduce) {
  .wfn-branch {
    transition: none;
  }
}
.wfn-emoji {
  display: inline-flex;
  flex: none;
  justify-content: center;
  width: var(--openbot-icon-xs);
}
.wfn-peer-cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  display: flex;
  width: max-content;
  align-items: flex-start;
  pointer-events: none;
  transform-origin: 0 0;
  scale: calc(1 / var(--wfn-scale, 1));
  transition: translate var(--wfn-peer-feed) var(--wfn-peer-ease, linear), opacity var(--openbot-duration-normal) var(--openbot-ease-out);
  animation: wfn-fade-in var(--openbot-duration-normal) var(--openbot-ease-out);
}
.wfn-peer-cursor[data-leaving] {
  opacity: 0;
}
.wfn-slot[data-build="unbuilt"], .wfn-edge[data-build="unbuilt"], .wfn-edge-label[data-build="unbuilt"] {
  visibility: hidden;
}
.wfn-slot[data-build="arrived"] {
  animation: wfn-build-arrive var(--openbot-duration-slow) var(--openbot-ease-out);
}
.wfn-edge[data-build="arrived"], .wfn-edge-label[data-build="arrived"] {
  animation: wfn-fade-in var(--openbot-duration-slow) var(--openbot-ease-out);
}
@keyframes wfn-build-arrive {
  from {
    opacity: 0;
    scale: 0.94;
  }
}
.wfn-peer-arrow {
  flex: none;
  width: 19px;
  height: 20px;
  fill: var(--wfn-peer);
  stroke: var(--openbot-paper);
  stroke-width: 3;
  stroke-linejoin: round;
  paint-order: stroke;
}
.wfn-peer-name, .wfn-peer-tag {
  padding: 1px var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-xs);
  background: var(--wfn-peer);
  color: var(--openbot-paper-text);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: 18px;
  white-space: nowrap;
}
.wfn-peer-name {
  margin: 17px 0 0 -11px;
  padding: 2px var(--openbot-space-2);
  border-radius: var(--openbot-radius-sm);
  outline: 1.5px solid var(--openbot-paper);
  font-weight: var(--openbot-weight-bold);
}
.wfn-slot[data-peer] .wfn-node:not([data-selected]) .wfn-card {
  outline-color: var(--wfn-peer);
}
.wfn-slot[data-peer] .wfn-text:not([data-selected]) .wfn-text-input {
  outline: var(--wfn-select-line) solid var(--wfn-peer);
  outline-offset: var(--wfn-select-gap);
}
.wfn-peer-tag {
  position: absolute;
  top: calc(100% + var(--openbot-space-2) / var(--wfn-scale, 1));
  left: 0;
  z-index: 2;
  pointer-events: none;
  transform-origin: 0 0;
  scale: calc(1 / var(--wfn-scale, 1));
  animation: wfn-fade-in var(--openbot-duration-normal) var(--openbot-ease-out);
}
.wfn-slot:has(> [data-selected]) .wfn-peer-tag {
  display: none;
}
.wfn-stage .wfn-hud-button.wfn-presence-person, .wfn-presence-self {
  display: grid;
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  padding: 0;
  place-items: center;
  border-radius: var(--openbot-radius-pill);
}
.wfn-presence-person .person-avatar {
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
  overflow: hidden;
  border-radius: var(--openbot-radius-pill);
  background: var(--wfn-peer, var(--openbot-text-primary));
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--wfn-peer, var(--openbot-text-primary)) 16%, transparent);
  }
}
.wfn-stage .wfn-hud-presence .wfn-presence-person .person-avatar-generated > svg {
  width: 100%;
  height: 100%;
}
.wfn-presence-person .person-avatar > i {
  display: none;
}
.wfn-presence-person[aria-pressed="true"] .person-avatar {
  outline: 2px solid var(--wfn-peer);
  outline-offset: 0;
}
.wfn-follow-frame {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  border: 2px solid var(--wfn-peer);
  pointer-events: none;
  animation: wfn-fade-in var(--openbot-duration-normal) var(--openbot-ease-out);
}
.wfn-follow-name {
  height: fit-content;
  padding: 1px var(--openbot-space-2) var(--openbot-space-0-5);
  border-radius: 0 0 var(--openbot-radius-sm) var(--openbot-radius-sm);
  background: var(--wfn-peer);
  color: var(--openbot-paper-text);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: 18px;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .wfn-peer-cursor {
    transition: none;
  }
  .wfn-peer-cursor, .wfn-peer-tag, .wfn-follow-frame, .wfn-slot[data-build], .wfn-edge[data-build], .wfn-edge-label[data-build] {
    animation: none;
  }
}
:where(.wfn-stage) {
  --wfn-tool-radius: calc(var(--openbot-radius-grouped) - var(--openbot-space-1-5));
  --wfn-card-inner-radius: calc(var(--openbot-radius-card) - 1px);
}
.wfn-stage {
  display: flex;
  flex-wrap: wrap;
  gap: 120px;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 120px var(--openbot-space-8);
  background-color: var(--openbot-bg-frame);
  background-image: radial-gradient( var(--openbot-text-primary) 1px, transparent 1px );
  @supports (color: color-mix(in lab, red, red)) {
    background-image: radial-gradient( color-mix(in srgb, var(--openbot-text-primary) 9%, transparent) 1px, transparent 1px );
  }
  background-size: 20px 20px;
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
}
.wfn-menu-text {
  font-size: var(--openbot-text-sm);
}
.wfn-menu-meta {
  color: var(--openbot-text-muted);
  font-size: var(--wfn-small);
}
.wfn-menu-check {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  margin-inline-start: auto;
  color: var(--openbot-text-primary);
}
.wfn-stage {
  position: relative;
}
.wfn-stage.wfn-canvas {
  display: block;
  height: 100vh;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background-image: none;
}
.wfn-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: default;
  touch-action: none;
}
.wfn-viewport::after {
  --wfn-edge-fade: var(--openbot-space-8);
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background: linear-gradient(to right, var(--openbot-bg-frame), transparent) left / var(--wfn-edge-fade) 100% no-repeat, linear-gradient(to left, var(--openbot-bg-frame), transparent) right / var(--wfn-edge-fade) 100% no-repeat, linear-gradient(to bottom, var(--openbot-bg-frame), transparent) top / 100% var(--wfn-edge-fade) no-repeat, linear-gradient(to top, var(--openbot-bg-frame), transparent) bottom / 100% var(--wfn-edge-fade) no-repeat;
  pointer-events: none;
}
.wfn-dots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  mask-image: radial-gradient(ellipse 85% 75% at 50% 50%, var(--openbot-text-primary) 45%, transparent 100%);
  pointer-events: none;
}
.wfn-dots circle {
  fill: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    fill: color-mix(in srgb, var(--openbot-text-primary) 15%, transparent);
  }
}
.wfn-viewport[data-space] {
  cursor: grab;
}
.wfn-viewport:is([data-panning], [data-dragging]) {
  cursor: grabbing;
  user-select: none;
}
.wfn-world {
  position: absolute;
  top: 0;
  left: 0;
  direction: ltr;
  transform-origin: 0 0;
  interpolate-size: allow-keywords;
}
.wfn-viewport[data-camera-moving] .wfn-world {
  pointer-events: none;
}
.wfn-slot {
  position: absolute;
  width: max-content;
  cursor: default;
}
.wfn-slot :is(.wfn-label, .wfn-card) {
  cursor: grab;
}
.wfn-viewport[data-dragging] .wfn-slot :is(.wfn-label, .wfn-card) {
  cursor: grabbing;
}
.wfn-canvas {
  --wfn-hud-inset: var(--openbot-space-4);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.wfn-hud {
  position: absolute;
  z-index: 3;
  display: flex;
  gap: 2px;
  align-items: center;
  height: calc(var(--openbot-control-md) + var(--openbot-space-2));
  padding: var(--openbot-space-1);
  border-radius: var(--openbot-radius-lg);
  background: var(--wfn-glass);
  box-shadow: 0 0 0 1px var(--wfn-ring-strong);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  backdrop-filter: var(--wfn-glass-blur);
}
.wfn-hud-top {
  position: absolute;
  top: var(--openbot-space-4);
  inset-inline-end: var(--openbot-space-4);
  inset-inline-start: var(--openbot-space-4);
  z-index: 3;
  display: flex;
  gap: var(--openbot-space-2);
  align-items: flex-start;
  justify-content: space-between;
  pointer-events: none;
}
.wfn-hud-top .wfn-hud {
  position: relative;
  pointer-events: auto;
}
.wfn-hud-group {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
}
.wfn-hud-tools {
  bottom: var(--wfn-hud-inset);
  left: round(50%, 1px);
  translate: round(-50%, 1px) 0;
}
.wfn-stage .wfn-hud-add-button {
  margin-inline-start: var(--openbot-space-1);
}
.wfn-stage .wfn-hud .wfn-hud-tool[aria-pressed="true"] {
  background: var(--wfn-hover);
  color: var(--openbot-text-primary);
}
.wfn-stage .wfn-hud .wfn-hud-tool svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.wfn-stage .wfn-hud-title .wfn-hud-switcher {
  gap: var(--openbot-space-1-5);
  min-width: 0;
  padding-inline: var(--openbot-space-3) calc(var(--openbot-space-2) + var(--openbot-space-0-5));
}
.wfn-stage .wfn-hud-switcher-name {
  overflow: hidden;
  max-width: 40ch;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wfn-stage .wfn-hud-switcher .wfn-hud-chevron {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  color: var(--openbot-text-muted);
}
.wfn-canvas[data-frame="window"] > * {
  pointer-events: auto;
}
.wfn-canvas:is([data-tool="draw"], [data-tool="note"], [data-tool="shape"]) .wfn-world * {
  pointer-events: none;
}
.wfn-canvas[data-tool="pan"] .wfn-viewport, .wfn-canvas[data-tool="pan"] .wfn-slot :is(.wfn-label, .wfn-card, .wfn-card *) {
  cursor: grab;
}
.wfn-canvas[data-tool="pan"] .wfn-viewport[data-panning], .wfn-canvas[data-tool="pan"] .wfn-viewport[data-panning] * {
  cursor: grabbing;
}
.wfn-canvas[data-tool="draw"] .wfn-viewport {
  cursor: crosshair;
}
.wfn-canvas[data-draw="eraser"] .wfn-viewport {
  cursor: none;
}
.wfn-hud.wfn-hud-sub {
  right: 0;
  bottom: calc(var(--wfn-hud-inset) + var(--openbot-control-lg) + var(--openbot-space-3) + var(--openbot-space-2));
  left: 0;
  gap: var(--openbot-space-1);
  width: fit-content;
  margin-inline: auto;
}
.wfn-stage .wfn-hud-sub .wfn-hud-tool {
  width: var(--openbot-control-md);
}
.wfn-stage .wfn-hud-sub .wfn-shape-icon {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.wfn-stage .wfn-hud .wfn-hud-fill {
  gap: var(--openbot-space-1);
  padding-inline: var(--openbot-space-2) var(--openbot-space-1-5);
}
.wfn-stage .wfn-hud-fill .wfn-hud-chevron {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  color: var(--openbot-text-muted);
}
.wfn-ghost {
  position: absolute;
  z-index: 3;
  opacity: 0.5;
  translate: -50% -50%;
  pointer-events: none;
  animation: wfn-fade-in var(--openbot-duration-fast) var(--openbot-ease-out);
}
.wfn-ghost[data-drawn] {
  translate: none;
  animation: none;
}
.wfn-ghost[data-kind="note"] {
  border-radius: var(--wfn-radius-card);
  background: var(--wfn-note-paper);
  box-shadow: 0 0 0 1px var(--wfn-note-edge);
}
.wfn-ghost span.wfn-shape-surface {
  background: var(--wfn-shape);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--wfn-shape) 16%, transparent);
  }
  box-shadow: none;
  outline: 1px dashed var(--wfn-shape);
  outline-offset: -1px;
}
.wfn-ghost svg.wfn-shape-surface {
  stroke-dasharray: 4 3;
  stroke-width: 1;
}
.wfn-ink-dot {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  border-radius: var(--openbot-radius-pill);
  background: var(--wfn-ink);
  box-shadow: inset 0 0 0 1px var(--wfn-ring-strong);
  transition-property: box-shadow;
  transition-duration: var(--openbot-duration-fast);
  transition-timing-function: var(--openbot-ease-out);
}
.wfn-stage .wfn-hud .wfn-ink-swatch[aria-pressed="true"] {
  background: transparent;
}
.wfn-ink-swatch[aria-pressed="true"] .wfn-ink-dot {
  box-shadow: 0 0 0 2px var(--wfn-glass), 0 0 0 3.5px var(--openbot-text-primary);
}
.wfn-ink {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 1px;
  height: 1px;
  overflow: visible;
  pointer-events: none;
}
.wfn-ink-line {
  fill: none;
  stroke: var(--wfn-ink);
  stroke-linecap: round;
  stroke-linejoin: round;
  transition-property: opacity;
  transition-duration: var(--openbot-duration-fast);
  transition-timing-function: var(--openbot-ease-out);
}
.wfn-ink-line[data-brush="marker"] {
  stroke-opacity: 0.45;
}
.wfn-ink-line[data-erasing] {
  opacity: 0.25;
}
.wfn-eraser {
  position: absolute;
  z-index: 3;
  width: var(--openbot-space-4);
  height: var(--openbot-space-4);
  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) 8%, transparent);
  }
  box-shadow: inset 0 0 0 1px var(--openbot-text-primary);
  translate: -50% -50%;
  pointer-events: none;
}
.wfn-canvas[data-hud-hidden] :is(.wfn-hud, .wfn-hud-top) {
  visibility: hidden;
  opacity: 0;
}
.wfn-stage .wfn-hud-show {
  position: absolute;
  inset-inline-end: var(--wfn-hud-inset);
  bottom: var(--wfn-hud-inset);
  z-index: 3;
  gap: var(--openbot-space-1-5);
  animation: wfn-fade-in var(--openbot-duration-normal) var(--openbot-ease-out);
}
.wfn-hud-zoom {
  bottom: var(--wfn-hud-inset);
  inset-inline-start: var(--wfn-hud-inset);
}
.wfn-hud-separator {
  width: 1px;
  height: var(--openbot-space-4);
  margin: 0 var(--openbot-space-1);
  background: var(--wfn-ring-strong);
}
.wfn-stage .wfn-hud .ui-button {
  border-radius: var(--openbot-radius-md);
}
.wfn-stage :is(.wfn-hud, .wfn-toolbar) .ui-button {
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  transition-property: background-color, color, opacity, scale;
  transition-duration: var(--openbot-duration-fast);
  transition-timing-function: var(--openbot-ease-out);
}
.wfn-stage :is(.wfn-hud, .wfn-toolbar) .ui-button:active:not(:disabled) {
  scale: 0.96;
}
.wfn-stage .wfn-hud .ui-button-variant-ghost {
  color: var(--openbot-text-secondary);
}
.wfn-stage .wfn-hud .ui-button-variant-ghost:hover:not(:disabled), .wfn-stage .wfn-hud .ui-button-variant-ghost[data-expanded] {
  background: var(--wfn-hover);
  color: var(--openbot-text-primary);
}
.wfn-stage .wfn-hud-button {
  gap: var(--openbot-space-1-5);
  height: var(--openbot-control-md);
  padding-inline: var(--openbot-space-3);
}
.wfn-stage .wfn-hud-button:has(> svg:first-child) {
  padding-inline-start: calc(var(--openbot-space-2) + var(--openbot-space-0-5));
}
.wfn-stage .wfn-hud-button svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.wfn-stage .wfn-hud-tools {
  gap: var(--openbot-space-1-5);
  height: calc(var(--openbot-control-lg) + var(--openbot-space-3));
  padding: var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-grouped);
}
.wfn-stage .wfn-hud-tools .ui-button {
  height: var(--openbot-control-lg);
  border-radius: var(--wfn-tool-radius);
}
.wfn-stage .wfn-hud-tools .wfn-hud-tool {
  width: var(--openbot-control-lg);
}
.wfn-stage .wfn-hud-tools .wfn-hud-tool svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  stroke-width: var(--openbot-icon-stroke-lg);
}
.wfn-stage .wfn-hud-tools .wfn-hud-add-button svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: var(--openbot-icon-stroke);
}
.wfn-stage .wfn-hud-tools {
  overflow: clip;
}
.wfn-stage .wfn-hud-tools .wfn-hud-tool[data-art] {
  position: relative;
  width: calc(var(--openbot-control-lg) + var(--openbot-space-2));
  padding: 0;
  overflow: visible;
}
.wfn-stage .wfn-hud-tools .wfn-hud-tool:is([data-art="note"], [data-art="shape"]) {
  width: calc(var(--openbot-control-lg) + var(--openbot-space-4));
}
.wfn-stage .wfn-hud .wfn-hud-tool[data-art]:is(:hover, [aria-pressed="true"]) {
  background: transparent;
}
.wfn-stage .wfn-hud-tools .wfn-hud-tool[data-art] .wfn-tool-art {
  --wfn-art-base: var(--wfn-art-color);
  --wfn-art-light: var(--wfn-art-color);
  @supports (color: color-mix(in lab, red, red)) {
    --wfn-art-light: color-mix(in srgb, var(--wfn-art-color) 58%, var(--openbot-paper));
  }
  --wfn-art-dark: var(--wfn-art-color);
  @supports (color: color-mix(in lab, red, red)) {
    --wfn-art-dark: color-mix(in srgb, var(--wfn-art-color) 72%, var(--openbot-paper-text));
  }
  --wfn-art-wood-color: var(--openbot-file-orange);
  @supports (color: color-mix(in lab, red, red)) {
    --wfn-art-wood-color: color-mix(in srgb, var(--openbot-file-orange) 38%, var(--openbot-paper));
  }
  --wfn-art-metal-color: var(--openbot-paper);
  @supports (color: color-mix(in lab, red, red)) {
    --wfn-art-metal-color: color-mix(in srgb, var(--openbot-paper) 78%, var(--openbot-paper-text));
  }
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  overflow: visible;
}
:root[data-openbot-color-scheme="light"] .wfn-stage .wfn-hud-tools .wfn-hud-tool[data-art] .wfn-tool-art {
  --wfn-art-base: oklch(from var(--wfn-art-color) 0.82 calc(c * 0.75) h);
  --wfn-art-light: oklch(from var(--wfn-art-color) 0.93 calc(c * 0.35) h);
}
.wfn-hud-tool[data-art="draw"]:is(:hover, [aria-pressed="true"]) .wfn-art-layer {
  translate: 0 calc(var(--openbot-space-1-5) * -1);
}
.wfn-hud-tool[data-art="note"]:is(:hover, [aria-pressed="true"]) [data-layer="back"] {
  rotate: -15deg;
  translate: calc(var(--openbot-space-1) * -1) calc(var(--openbot-space-0-5) * -1);
}
.wfn-hud-tool[data-art="note"]:is(:hover, [aria-pressed="true"]) [data-layer="middle"] {
  rotate: 4deg;
  translate: 0 calc(var(--openbot-space-1) * -1);
}
.wfn-hud-tool[data-art="note"]:is(:hover, [aria-pressed="true"]) [data-layer="front"] {
  rotate: 4deg;
  translate: var(--openbot-space-1) calc(var(--openbot-space-1-5) * -1);
}
.wfn-hud-tool[data-art="shape"]:is(:hover, [aria-pressed="true"]) [data-layer="back"] {
  rotate: -17deg;
  translate: calc(var(--openbot-space-1) * -1) calc(var(--openbot-space-0-5) * -1);
  scale: 1.06;
}
.wfn-hud-tool[data-art="shape"]:is(:hover, [aria-pressed="true"]) [data-layer="middle"] {
  rotate: 12deg;
  translate: var(--openbot-space-1) var(--openbot-space-0-5);
}
.wfn-hud-tool[data-art="shape"]:is(:hover, [aria-pressed="true"]) [data-layer="front"] {
  rotate: 6deg;
  translate: var(--openbot-space-0-5) calc(var(--openbot-space-1-5) * -1);
}
.wfn-hud-tools .wfn-hud-separator {
  height: calc(var(--openbot-space-4) + var(--openbot-space-1));
  margin: 0 var(--openbot-space-0-5);
}
.wfn-hud-icon {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  border-radius: var(--openbot-radius-md);
  background: var(--wfn-hover);
  color: var(--openbot-text-secondary);
}
.wfn-stage .wfn-hud-icon svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.wfn-stage .wfn-hud-name {
  field-sizing: content;
  min-width: 8ch;
  max-width: 40ch;
  height: var(--openbot-control-md);
  padding: 0 var(--openbot-space-2);
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  box-shadow: none;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  text-overflow: ellipsis;
  transition-property: background-color, box-shadow;
  transition-duration: var(--openbot-duration-fast);
}
.wfn-stage .wfn-hud-name:hover {
  background: var(--wfn-hover);
}
.wfn-stage .wfn-hud-name:focus-visible {
  outline: none;
  background: var(--wfn-hover);
  box-shadow: inset 0 0 0 1px var(--wfn-ring-strong);
}
.wfn-hud-viewing {
  gap: var(--openbot-space-1-5);
  padding-inline-start: var(--openbot-space-3);
  font-variant-numeric: tabular-nums;
}
.wfn-stage .wfn-hud-viewing > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
}
.wfn-hud[hidden] {
  display: none;
}
.wfn-hud-version {
  bottom: var(--wfn-hud-inset);
  left: round(50%, 1px);
  gap: var(--openbot-space-1-5);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  translate: round(-50%, 1px) 0;
}
.wfn-hud-lock {
  display: inline-flex;
  gap: var(--openbot-space-1);
  align-items: center;
  margin-inline-end: var(--openbot-space-1);
  color: var(--openbot-text-muted);
}
.wfn-hud-lock-icon {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.wfn-canvas[data-preview] .wfn-viewport {
  cursor: grab;
}
.wfn-canvas[data-preview] .wfn-viewport[data-panning] {
  cursor: grabbing;
}
.wfn-hud-label {
  font-weight: var(--openbot-weight-medium);
}
.wfn-hud-meta {
  margin-inline-end: var(--openbot-space-1);
  color: var(--openbot-text-muted);
}
.wfn-hud-count {
  min-width: var(--openbot-space-4);
  padding: 0 var(--openbot-space-1);
  border-radius: var(--openbot-radius-xs);
  background: var(--wfn-hover);
  color: var(--openbot-text-muted);
  font-size: var(--wfn-small);
  font-variant-numeric: tabular-nums;
  line-height: var(--openbot-leading-sm);
  text-align: center;
}
.wfn-hud-progress {
  display: inline-flex;
  gap: var(--openbot-space-1-5);
  align-items: center;
  padding: 0 var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-variant-numeric: tabular-nums;
  animation: wfn-fade-in var(--openbot-duration-fast) var(--openbot-ease-out);
}
.wfn-hud-progress .wfn-hud-ring {
  --ui-radial-progress-color: var(--openbot-text-primary);
  width: var(--openbot-icon-md);
}
.wfn-stage .wfn-hud-stop {
  animation: wfn-fade-in var(--openbot-duration-fast) var(--openbot-ease-out);
}
.wfn-stage .wfn-hud-stop svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  fill: currentColor;
}
@keyframes wfn-fade-in {
  from {
    opacity: 0;
  }
}
.wfn-stage .wfn-zoom-value {
  justify-content: center;
  min-width: 6ch;
  padding-inline: var(--openbot-space-1);
  font-variant-numeric: tabular-nums;
}
.wfn-zoom-menu {
  min-width: 200px;
}
.wfn-zoom-menu .wfn-menu-text {
  margin-inline-end: auto;
}
.wfn-zoom-presets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
.wfn-zoom-menu.ui-action-menu .wfn-zoom-presets .wfn-zoom-preset {
  justify-content: center;
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
.wfn-zoom-menu.ui-action-menu .wfn-zoom-presets .wfn-zoom-preset[data-current] {
  background: var(--wfn-hover);
  color: var(--openbot-text-primary);
}
.wfn-menu-glyph {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  color: var(--openbot-text-secondary);
}
.wfn-menu-glyph svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.wfn-menu .ui-action-menu-danger .wfn-menu-glyph {
  color: var(--openbot-danger);
}
.wfn-hud.wfn-search {
  bottom: calc(var(--wfn-hud-inset) + var(--openbot-control-md) + var(--openbot-space-2) + var(--openbot-space-2));
  left: round(50%, 1px);
  display: grid;
  gap: var(--openbot-space-1);
  align-items: stretch;
  width: min(480px, calc(100% - var(--openbot-space-8)));
  height: auto;
  translate: round(-50%, 1px) 0;
}
.wfn-search-field {
  display: flex;
  gap: var(--openbot-space-1);
  align-items: center;
  padding-inline-start: var(--openbot-space-2);
  border-radius: var(--wfn-tool-radius);
}
.wfn-search-field:has(.wfn-search-input:focus-visible) {
  box-shadow: inset 0 0 0 1px var(--openbot-border-focus);
}
.wfn-stage .wfn-search-icon {
  flex: 0 0 auto;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
}
.wfn-stage .wfn-search-input {
  flex: 1 1 auto;
  height: var(--openbot-control-md);
  padding: 0 var(--openbot-space-1);
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: var(--openbot-text-sm);
}
.wfn-stage .wfn-search-input:focus-visible {
  outline: none;
  box-shadow: none;
}
.wfn-search-empty {
  margin: 0;
  padding: var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-3);
  border-top: 1px solid var(--wfn-ring);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-wrap: pretty;
}
.wfn-search-results {
  display: grid;
  gap: 2px;
  max-height: 320px;
  margin: 0;
  padding: var(--openbot-space-1) 0 0;
  overflow-y: auto;
  border-top: 1px solid var(--wfn-ring);
  list-style: none;
}
.wfn-stage .wfn-hud .wfn-search-result {
  justify-content: flex-start;
  gap: var(--openbot-space-2);
  width: 100%;
  height: auto;
  min-height: var(--openbot-control-md);
  padding: var(--openbot-space-1) var(--openbot-space-2);
  color: var(--openbot-text-primary);
  text-align: start;
}
.wfn-search-result .wfn-menu-text {
  flex: 0 0 auto;
}
.wfn-hud.wfn-search.wfn-drop-menu {
  position: relative;
  bottom: auto;
  left: auto;
  width: 240px;
  translate: none;
}
.wfn-hud.wfn-drop-menu .wfn-search-results {
  display: block;
  max-height: min(560px, calc(100vh - var(--openbot-space-8)));
  padding: var(--openbot-space-1) 0 0;
}
.wfn-drop-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wfn-drop-menu:has(.wfn-search-input:focus) .wfn-search-result[data-first] {
  background: var(--wfn-hover);
}
.wfn-search-snippet {
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--wfn-small);
  font-weight: var(--openbot-weight-regular);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wfn-hud.wfn-minimap {
  bottom: calc(var(--wfn-hud-inset) + var(--openbot-control-md) + var(--openbot-space-2) + var(--openbot-space-2));
  inset-inline-start: var(--wfn-hud-inset);
  height: auto;
  padding: 0;
  overflow: hidden;
}
.wfn-minimap svg {
  display: block;
  cursor: pointer;
  touch-action: none;
}
.wfn-minimap-node {
  fill: var(--wfn-kind, var(--openbot-text-primary));
  @supports (color: color-mix(in lab, red, red)) {
    fill: color-mix(in srgb, var(--wfn-kind, var(--openbot-text-primary)) 40%, transparent);
  }
}
.wfn-minimap-node[data-selected] {
  fill: var(--openbot-text-primary);
}
.wfn-minimap-line {
  fill: none;
  stroke: var(--wfn-ink);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wfn-minimap-line[data-brush="marker"] {
  stroke-opacity: 0.45;
}
.wfn-minimap-view {
  fill: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    fill: color-mix(in srgb, var(--openbot-text-primary) 4%, transparent);
  }
  stroke: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    stroke: color-mix(in srgb, var(--openbot-text-primary) 64%, transparent);
  }
  stroke-width: 1.5;
}
.wfn-results-menu {
  min-width: 220px;
}
.wfn-results-menu .wfn-menu-text {
  margin-inline-end: auto;
}
.wfn-results-menu .wfn-menu-meta {
  font-variant-numeric: tabular-nums;
}
.wfn-results-menu .wfn-menu-check {
  margin-inline-start: 0;
}
.wfn-menu-check[data-off] {
  visibility: hidden;
}
.wfn-menu-icon {
  --wfn-kind: var(--openbot-text-secondary);
  display: inline-grid;
  flex: none;
  place-items: center;
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  margin-inline-start: calc(var(--openbot-space-1) * -1);
  border-radius: var(--openbot-radius-sm);
  background: var(--wfn-kind);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--wfn-kind) 16%, transparent);
  }
  box-shadow: inset 0 0 0 1px var(--wfn-kind);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wfn-kind) 14%, transparent);
  }
  color: var(--wfn-kind);
}
:is(.wfn-menu, .wfn-search) .wfn-menu-icon svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: inherit;
  stroke-width: var(--openbot-icon-stroke);
}
@media (prefers-reduced-motion: reduce) {
  .wfn-edge-line, .wfn-edge-comet, .wfn-hud-progress, .wfn-stage .wfn-hud-stop {
    animation: none;
  }
  .wfn-stage :is(.wfn-hud, .wfn-toolbar) .ui-button:active:not(:disabled) {
    scale: 1;
  }
}
.wfn-world[data-group] .wfn-grip {
  display: none;
}
.wfn-viewport:is([data-resizing], [data-dragging]) .wfn-node:not([data-resizing], [data-selected]) .wfn-grip {
  --wfn-grip-color: transparent;
}
.wfn-viewport[data-resizing], .wfn-viewport[data-resizing] .wfn-slot :is(.wfn-label, .wfn-card, .wfn-grip) {
  cursor: ew-resize;
  user-select: none;
}
.wfn-viewport[data-resizing="ns"], .wfn-viewport[data-resizing="ns"] .wfn-slot :is(.wfn-label, .wfn-card, .wfn-grip) {
  cursor: ns-resize;
}
.wfn-viewport[data-resizing="nwse"], .wfn-viewport[data-resizing="nwse"] .wfn-slot :is(.wfn-label, .wfn-card, .wfn-grip) {
  cursor: nwse-resize;
}
.wfn-viewport[data-resizing="nesw"], .wfn-viewport[data-resizing="nesw"] .wfn-slot :is(.wfn-label, .wfn-card, .wfn-grip) {
  cursor: nesw-resize;
}
.wfn-viewport[data-resizing] .wfn-slot :is(.wfn-node, .wfn-card) {
  transition: none;
}
.wfn-empty {
  position: absolute;
  inset: 0;
  display: grid;
  gap: var(--openbot-space-3);
  place-content: center;
  justify-items: center;
  pointer-events: none;
  animation: wfn-fade-in var(--openbot-duration-normal) var(--openbot-ease-out);
}
.wfn-empty > * {
  pointer-events: auto;
}
.wfn-stage .wfn-empty-icon {
  width: var(--openbot-control-lg);
  height: var(--openbot-control-lg);
  border-radius: var(--openbot-radius-lg);
}
.wfn-stage .wfn-empty-icon svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.wfn-empty-title {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  text-wrap: balance;
}
.wfn-marquee {
  position: absolute;
  z-index: 3;
  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) 4%, transparent);
  }
  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) 32%, transparent);
  }
  pointer-events: none;
}
.wfn-group {
  position: absolute;
  z-index: 2;
  border-radius: var(--wfn-radius-card);
  outline: calc(1px / var(--wfn-scale, 1)) dashed var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    outline: calc(1px / var(--wfn-scale, 1)) dashed color-mix(in srgb, var(--openbot-text-primary) 24%, transparent);
  }
  outline-offset: calc(12px / var(--wfn-scale, 1));
  pointer-events: none;
}
.wfn-group .wfn-group-bar {
  bottom: calc(100% + (12px + var(--openbot-space-3)) / var(--wfn-scale, 1));
  pointer-events: auto;
}
.wfn-group-count {
  padding: 0 var(--openbot-space-1) 0 var(--openbot-space-3);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.wfn-viewport[data-dragging] .wfn-group-bar {
  opacity: 0;
}
.wfn-guide {
  position: absolute;
  z-index: 3;
  background: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-primary) 22%, transparent);
  }
  pointer-events: none;
  opacity: 1;
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}
@starting-style {
  .wfn-guide {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wfn-guide {
    transition: none;
  }
}
.wfn-guide[data-axis="x"] {
  width: calc(1px / var(--wfn-scale, 1));
  translate: calc(-0.5px / var(--wfn-scale, 1)) 0;
}
.wfn-guide[data-axis="y"] {
  height: calc(1px / var(--wfn-scale, 1));
  translate: 0 calc(-0.5px / var(--wfn-scale, 1));
}
.wfn-hud-live {
  display: contents;
}
.wfn-stage .wfn-hud-step {
  gap: var(--openbot-space-1-5);
  max-width: 360px;
  font-variant-numeric: tabular-nums;
}
.wfn-stage .wfn-hud .wfn-hud-step > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: none;
  color: var(--openbot-text-muted);
}
.wfn-stage .wfn-hud-status[data-status="failed"] .wfn-hud-step > svg {
  color: var(--openbot-danger-text);
}
.wfn-hud-step .wfn-hud-meta {
  margin-inline-end: 0;
}
.wfn-hud-step-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .wfn-ghost {
    animation: none;
  }
}
.wfn-stage[data-deleted] {
  visibility: hidden;
}
.wfn-undo-toast-tile {
  display: grid;
  place-items: center;
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-control);
  box-shadow: inset 0 0 0 1px var(--openbot-border);
  color: var(--openbot-text-secondary);
}
.wfn-undo-toast-icon {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.app-window.wfn-app {
  height: 100vh;
}
.wfn-stage.wfn-canvas[data-frame="window"] {
  --wfn-hud-inset: var(--openbot-space-2);
  height: 100%;
  background: transparent;
}
.wfn-canvas[data-frame="window"] :is(.wfn-viewport, .wfn-empty) {
  top: var(--left-header-height);
}
.wfn-canvas[data-frame="window"] .wfn-viewport {
  border-radius: var(--wfn-card-inner-radius);
  background: var(--openbot-bg-frame);
}
.wfn-canvas[data-frame="window"] .wfn-follow-frame {
  top: var(--left-header-height);
  border-radius: var(--wfn-card-inner-radius);
}
.wfn-app .sidebar-marketplace-button {
  display: none;
}
.wfn-canvas[data-frame="window"] .wfn-hud-top {
  top: 0;
  inset-inline-end: var(--openbot-space-3);
  inset-inline-start: calc(var(--left-panel-width) + var(--openbot-space-3));
  height: var(--left-header-height);
  align-items: center;
}
.wfn-canvas[data-frame="window"] .wfn-hud-top .wfn-hud {
  height: auto;
  padding: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.wfn-canvas[data-frame="window"] .wfn-hud-top .wfn-hud-button {
  height: var(--openbot-control-xs);
  padding-inline: var(--openbot-space-2);
  font-size: var(--openbot-text-lg);
}
.wfn-canvas[data-frame="window"] .wfn-hud-top .wfn-hud-button svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.wfn-canvas[data-frame="window"][data-hud-hidden] .wfn-hud-top, .wfn-canvas[data-frame="window"][data-hud-hidden] .wfn-hud-top .wfn-hud {
  visibility: visible;
  opacity: 1;
}
.wfs-menu.ui-action-menu {
  --ui-menu-panel-shadow: inset 0 1px 0 var(--ui-menu-highlight), 0 0 0 1px var(--ui-menu-edge);
  min-width: 260px;
  max-width: min(320px, calc(100vw - var(--openbot-space-4)));
  max-height: min(520px, var(--kb-popper-content-available-height, 520px));
  overflow-y: auto;
}
.wfs-menu .wfs-name {
  flex: 1 1 auto;
}
.wfs-menu .ui-menu-trailing {
  flex: none;
  font-variant-numeric: tabular-nums;
}
.wfn-hud-version .wfn-hud-button > svg[class~="lucide-arrow-left"]:dir(rtl) {
  transform: scaleX(-1);
}
.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: normal;
  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: wrap;
  gap: var(--openbot-space-4) calc(var(--openbot-space-6) * 2);
  max-height: calc(var(--openbot-leading-sm) + var(--openbot-space-1) + var(--openbot-leading-xl));
  margin-top: var(--openbot-space-4);
  overflow: hidden;
}
.agent-usage-totals dt {
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-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);
  line-height: var(--openbot-leading-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: end;
  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: start;
  padding-inline-start: 0;
  white-space: normal;
}
.agent-usage-table td:last-child {
  padding-inline-end: 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-table td.agent-usage-table-empty {
  padding-inline-start: 0;
  text-align: start;
  white-space: normal;
  color: var(--openbot-text-muted);
}
.agent-usage-breakdown {
  position: relative;
}
.agent-usage-breakdown > .ui-sliding-tabs-content:not([data-selected]) {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.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;
}
.usage-machine-icon {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex-shrink: 0;
}
.usage-machine-trigger {
  flex-shrink: 0;
  gap: var(--openbot-space-3);
  color: var(--openbot-text-muted);
}
.usage-machine-item {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
}
.usage-machine-value {
  font-variant-numeric: tabular-nums;
}
.usage-machine-ring {
  width: var(--openbot-icon-md);
  --ui-radial-progress-color: var(--openbot-text-secondary);
}
.usage-machine-ring .ui-radial-progress-track, .usage-machine-ring .ui-radial-progress-indicator {
  stroke-width: 6;
}
.usage-machine-ring .ui-radial-progress-track {
  stroke: var(--openbot-text-dim);
  stroke-opacity: 0.35;
}
.usage-machine-item[data-tone="warning"] {
  color: var(--openbot-warning-text);
}
.usage-machine-item[data-tone="danger"] {
  color: var(--openbot-danger-text);
}
.ui-popover-menu-surface.usage-machine-popover {
  animation: ui-select-content-in var(--openbot-duration-dialog) var(--openbot-ease-out) both;
}
@media (prefers-reduced-motion: reduce) {
  .ui-popover-menu-surface.usage-machine-popover {
    animation-name: ui-select-content-fade-in;
  }
}
.usage-machine-popover .usage-machine-detail {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1-5);
}
.usage-machine-popover .usage-machine-detail-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.usage-machine-popover .usage-machine-detail-name {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.usage-machine-popover .usage-machine-icon {
  color: var(--openbot-text-secondary);
}
.usage-machine-popover .usage-machine-detail-value {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  color: var(--openbot-text-secondary);
  font-variant-numeric: tabular-nums;
}
.usage-machine-popover [data-tone="warning"] .usage-machine-detail-value {
  color: var(--openbot-warning-text);
}
.usage-machine-popover [data-tone="danger"] .usage-machine-detail-value {
  color: var(--openbot-danger-text);
}
.usage-machine-popover .usage-machine-bar .ui-progress-track {
  height: 6px;
}
.usage-machine-popover [data-tone="warning"] .ui-progress-fill {
  background: var(--openbot-warning);
}
.usage-machine-popover [data-tone="danger"] .ui-progress-fill {
  background: var(--openbot-danger);
}
.usage-machine-popover .context-meter-action.usage-machine-storage {
  height: auto;
  flex-direction: column;
  align-items: stretch;
  gap: var(--openbot-space-1-5);
  padding-block: var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-weight: inherit;
  text-align: start;
}
.usage-machine-popover .usage-machine-storage .usage-machine-chevron {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
}
.usage-machine-popover .usage-machine-detail-size {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
.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-inline-start: calc(-1 * var(--openbot-space-2));
}
.agent-usage-identity > .ui-icon-button > svg:dir(rtl) {
  transform: scaleX(-1);
}
.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-inline-start: 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: 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-inline-start: 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;
}
.app-window > .app-loading {
  position: fixed;
}
.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-inline-start: calc(-1 * var(--openbot-space-2));
}
.tasks-page-header svg:is([class~="lucide-arrow-left"], [class~="lucide-panel-left"]):dir(rtl) {
  transform: scaleX(-1);
}
.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-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-inline-start: 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-agent-menu.ui-action-menu {
  --tasks-agent-max: min(420px, calc(100dvh - 16px), var(--kb-popper-content-available-height, 420px));
  display: flex;
  width: 240px;
  max-height: var(--tasks-agent-max);
  flex-direction: column;
}
.tasks-page-agent-picker {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--ui-menu-padding);
}
.tasks-page-agent-search {
  display: flex;
  height: var(--openbot-control-md);
  flex: none;
  align-items: center;
  gap: var(--openbot-space-2);
  border-radius: var(--ui-menu-item-radius);
  background: var(--ui-menu-item-hover);
  padding-inline: var(--ui-menu-inset);
  cursor: text;
}
.tasks-page-agent-search > svg {
  width: 18px;
  height: var(--openbot-icon-sm);
  flex: none;
  color: var(--openbot-text-muted);
  stroke-width: var(--openbot-icon-stroke);
}
.tasks-page-agent-search .tasks-page-agent-search-input {
  min-width: 0;
  height: 100%;
  flex: 1;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  color: var(--openbot-text-primary);
  font: inherit;
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
.tasks-page-agent-search .tasks-page-agent-search-input:focus-visible {
  outline: 0;
  box-shadow: none;
}
.tasks-page-agent-search-input::placeholder {
  color: var(--openbot-text-muted);
}
.tasks-page-agent-list {
  height: min( calc(var(--tasks-agent-rows, 0) * var(--openbot-control-md)), calc(var(--tasks-agent-max) - var(--openbot-control-md) - 3 * var(--ui-menu-padding)) );
  min-height: 0;
  flex: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  outline: 0;
  padding: 0;
  scrollbar-width: none;
  transition: height var(--openbot-duration-slow) var(--ui-menu-ease);
}
.tasks-page-agent-list::-webkit-scrollbar {
  display: none;
}
.tasks-page-agent-option {
  display: flex;
  height: var(--openbot-control-md);
  align-items: center;
  gap: var(--openbot-space-2);
  border-radius: var(--ui-menu-item-radius);
  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;
}
.tasks-page-agent-option > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.tasks-page-agent-option[data-highlighted] {
  background: var(--ui-menu-item-hover);
}
.tasks-page-agent-name {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tasks-page-agent-name b {
  font-weight: var(--openbot-weight-semibold);
}
.tasks-page-agent-empty {
  margin: 0;
  padding: var(--openbot-space-1) var(--ui-menu-inset) var(--openbot-space-1-5) calc(var(--ui-menu-inset) + 18px + var(--openbot-space-2));
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  overflow-wrap: anywhere;
  transition: opacity var(--openbot-duration-normal) var(--openbot-ease-out) var(--openbot-duration-fast);
  @starting-style {
    opacity: 0;
  }
}
.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: start;
  --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 var(--tasks-page-side-width, 420px);
  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);
}
html.panel-resizing .tasks-page-side {
  transition: none;
}
.tasks-page-side[data-closing] > .panel-resizer {
  visibility: hidden;
}
.tasks-page-side-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}
.tasks-page-side-content {
  position: absolute;
  inset-block: 0;
  inset-inline: 0 auto;
  display: flex;
  width: var(--tasks-page-side-width, 420px);
  --browser-panel-width: 100%;
}
.tasks-page-side-content > * {
  flex: 1;
  min-width: 0;
}
.tasks-panel .file-preview-header {
  --task-list-glyph: 16px;
}
.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);
  }
}
.tasks-page[data-empty] .tasks-page-column {
  min-height: 100%;
}
.tasks-page[data-empty] .tasks-page-composer.composer-wrap {
  position: static;
}
.tasks-page-empty-pitch {
  display: grid;
  justify-items: center;
  gap: var(--openbot-space-3);
  margin-top: auto;
  padding: 0 var(--openbot-space-2) var(--openbot-space-6);
  text-align: center;
}
.tasks-page-empty-title {
  --tasks-page-empty-hand-size: calc(var(--openbot-text-display) * 1.2);
  display: grid;
  margin: 0;
  font-size: var(--openbot-text-display);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.tasks-page-empty-lead {
  color: var(--openbot-text-muted);
}
.tasks-page-empty-word {
  color: var(--openbot-accent-text);
  font-family: "Bradley Hand", "Noteworthy", "Segoe Print", cursive;
  font-size: var(--tasks-page-empty-hand-size);
  clip-path: inset(-0.4em 100% -0.4em -0.2em);
  animation: tasks-page-empty-write 640ms linear 500ms forwards;
}
@keyframes tasks-page-empty-write {
  to {
    clip-path: inset(-0.4em -0.2em -0.4em -0.2em);
  }
}
.tasks-page-empty-lines {
  display: grid;
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-lg);
  line-height: 1.5;
}
.tasks-page-empty-board {
  --tasks-page-empty-head: 1.75rem;
  --tasks-page-empty-block: calc(var(--tasks-page-empty-head) + var(--openbot-control-lg) + var(--openbot-space-4));
  position: relative;
  display: grid;
  grid-template-rows: repeat(3, var(--tasks-page-empty-block));
  margin: var(--openbot-space-2) 0 auto;
  padding-bottom: var(--openbot-space-8);
  opacity: 0.6;
  pointer-events: none;
  user-select: none;
  mask-image: radial-gradient( ellipse 80% 100% at 50% 45%, var(--openbot-text-primary) 45%, var(--openbot-transparent) 100% );
}
.tasks-page-empty-section.tasks-page-section {
  margin-top: 0;
}
.tasks-page-empty-section .tasks-page-section-heading {
  height: var(--tasks-page-empty-head);
}
.tasks-page-empty-rows {
  position: absolute;
  inset: 0;
}
.tasks-page-empty-row {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  transform: translateY( calc( var(--tasks-page-empty-slot) * var(--tasks-page-empty-block) + var(--tasks-page-empty-head) + var(--openbot-space-0-5) ) );
  transition: transform 760ms var(--openbot-ease-out), opacity 600ms var(--openbot-ease-out), filter 600ms var(--openbot-ease-out), translate 600ms var(--openbot-ease-out);
  animation: tasks-page-empty-arrive 620ms var(--openbot-ease-out) both;
}
@keyframes tasks-page-empty-arrive {
  from {
    opacity: 0;
    filter: blur(4px);
    translate: 0 10px;
    scale: 0.97;
  }
}
.tasks-page-empty-row[data-age="3"] {
  opacity: 0;
  filter: blur(3px);
  translate: 0 -8px;
}
@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], .tasks-page-empty-row {
    animation: none;
  }
  .tasks-page-empty-word {
    clip-path: none;
    animation: none;
  }
  .tasks-page-side, .tasks-page-agent-chevron, .tasks-page-agent-list, .tasks-page-agent-empty, .tasks-page-empty-row {
    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: end;
}
.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: end;
}
.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-lg);
}
.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: start;
  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-row-chevron:dir(rtl) {
  transform: scaleX(-1);
}
.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%;
  inset-inline-start: 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-inline-start: 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-lg);
}
.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-inline-end: 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: start;
  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);
}
.machine-resources-metrics, .machine-resources-settings {
  margin: 0;
  padding: 0;
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-grouped);
  list-style: none;
}
.machine-resources-metric {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 96px 44px;
  align-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3) var(--openbot-space-4);
}
.machine-resources-metric + .machine-resources-metric {
  border-top: 1px solid var(--openbot-border-grouped);
}
.machine-resources-icon {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-secondary);
}
.machine-resources-metric[data-tone="warning"] .machine-resources-icon {
  color: var(--openbot-warning);
}
.machine-resources-metric[data-tone="danger"] .machine-resources-icon {
  color: var(--openbot-danger);
}
.machine-resources-copy {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-0-5);
}
.machine-resources-title {
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.machine-resources-meta {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.machine-resources-bar {
  position: relative;
  display: flex;
  align-items: center;
}
.machine-resources-bar .ui-progress-track {
  height: 6px;
}
.machine-resources-metric[data-tone="warning"] .ui-progress-fill {
  background: var(--openbot-warning);
}
.machine-resources-metric[data-tone="danger"] .ui-progress-fill {
  background: var(--openbot-danger);
}
.machine-resources-threshold {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-secondary);
}
.machine-resources-value {
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  text-align: end;
}
.storage-message.machine-resources-alert .storage-message-icon {
  color: var(--openbot-warning);
}
.machine-resources-settings {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
  padding: var(--openbot-space-4);
}
.machine-resources-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-4);
}
.machine-resources-select {
  flex: 0 0 220px;
}
@container (max-width: 520px) {
  .machine-resources-metric {
    grid-template-columns: auto minmax(0, 1fr) 44px;
  }
  .machine-resources-bar {
    display: none;
  }
  .machine-resources-setting {
    flex-direction: column;
    align-items: stretch;
  }
  .machine-resources-select {
    flex-basis: auto;
  }
}
.library-frame {
  position: relative;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.library-page {
  position: relative;
  display: flex;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  gap: var(--openbot-space-4);
  overflow-y: auto;
  padding: var(--openbot-space-8) var(--openbot-space-8) var(--openbot-space-6);
}
.library-frame[data-pill] .library-page {
  padding-bottom: calc(var(--openbot-space-8) * 3);
}
.library-page[data-marquee] {
  cursor: default;
  user-select: none;
}
.library-marquee {
  position: absolute;
  z-index: 2;
  border: 1px solid var(--openbot-accent);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-accent-soft);
  pointer-events: none;
}
.library-pill {
  position: absolute;
  z-index: 5;
  bottom: var(--openbot-space-6);
  left: 50%;
  display: flex;
  box-sizing: border-box;
  height: 44px;
  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);
  box-shadow: inset 0 0 0 1px var(--openbot-shadow-ring);
  color: var(--openbot-text-primary);
  translate: -50% 0;
  transition: background-color var(--openbot-duration-normal) var(--openbot-ease-out), border-color var(--openbot-duration-normal) var(--openbot-ease-out);
}
.library-pill[data-tone="danger"] {
  border-color: var(--openbot-danger-border);
  background: linear-gradient(var(--openbot-danger-soft), var(--openbot-danger-soft)), var(--openbot-bg-surface-raised);
}
.library-pill-face {
  position: relative;
  display: flex;
  width: max-content;
  flex: none;
  align-items: center;
  gap: var(--openbot-space-1);
  padding-inline: var(--openbot-space-1-5);
  white-space: nowrap;
}
.library-pill-progress {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  background: var(--openbot-accent-soft);
  transition: width var(--openbot-duration-slow) var(--openbot-ease-out);
}
.library-pill-count, .library-pill-text {
  display: inline-flex;
  overflow: hidden;
  align-items: center;
  gap: var(--openbot-space-1-5);
  padding-inline: var(--openbot-space-2);
  font-size: var(--openbot-text-sm);
  font-weight: 620;
  font-variant-numeric: tabular-nums;
}
.library-pill-count > span {
  display: inline-block;
}
.library-pill-status {
  padding-inline: var(--openbot-space-3);
}
.ui-button.library-pill-button {
  border-radius: var(--openbot-radius-pill);
}
.library-pill-rule {
  width: 1px;
  height: 18px;
  margin-inline: var(--openbot-space-0-5);
  background: var(--openbot-border);
}
@media (prefers-reduced-motion: reduce) {
  .library-pill, .library-pill-progress {
    transition: none;
  }
}
.library-truncate {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.library-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
}
.library-title {
  margin: 0;
  font-size: var(--openbot-text-2xl);
  font-weight: var(--openbot-weight-semibold);
}
.library-tools {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
}
.library-views {
  display: flex;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
  gap: var(--openbot-space-0-5);
}
.library-views [aria-pressed="true"] {
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
}
.library-search {
  width: min(320px, 40vw);
}
.library-grid {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 4 220px;
  column-gap: var(--openbot-space-3);
}
.library-tile {
  position: relative;
  margin-bottom: var(--openbot-space-3);
  break-inside: avoid;
}
.ui-button.library-picture, .ui-button.library-file-card {
  display: block;
  width: 100%;
  height: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-surface);
  color: inherit;
  font: inherit;
  text-align: start;
  white-space: normal;
  cursor: pointer;
}
.library-picture img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto 1 / 1;
}
.ui-button.library-file-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3);
}
.library-file-name {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  min-width: 0;
  padding-inline-end: var(--openbot-space-6);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.library-file-source {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.library-file-source:empty {
  display: none;
}
.library-tile-menu {
  position: absolute;
  top: var(--openbot-space-2);
  inset-inline-end: var(--openbot-space-2);
  opacity: 0;
}
.library-tile[data-kind="image"] .library-tile-menu {
  background: var(--openbot-bg-overlay);
}
.library-tile:is(:hover, :focus-within) .library-tile-menu, .library-tile-menu[data-expanded] {
  opacity: 1;
}
.file-select-mark {
  display: inline-flex;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  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;
}
.file-select-mark[data-selected] {
  border-color: var(--openbot-accent);
  background: var(--openbot-accent);
  color: var(--openbot-text-on-accent);
}
.file-select-mark svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  stroke-width: 2.5;
}
.file-row[data-selected] {
  background: var(--openbot-accent-soft);
}
.library-tile-mark {
  position: absolute;
  top: var(--openbot-space-2);
  inset-inline-end: var(--openbot-space-2);
  pointer-events: none;
}
.library-tile[data-kind="image"] .library-tile-mark:not([data-selected]) {
  background: var(--openbot-bg-overlay);
}
.library-tile[data-selected] :is(.library-picture, .library-file-card).ui-button {
  border-color: var(--openbot-accent);
  outline: 1px solid var(--openbot-accent);
}
@media (hover: hover) {
  .ui-button.library-picture:hover, .ui-button.library-file-card:hover {
    border-color: var(--openbot-border-strong);
    background: var(--openbot-bg-surface);
    color: inherit;
  }
}
@media (max-width: 720px) {
  .library-page {
    padding: var(--openbot-space-4);
  }
  .library-head {
    flex-wrap: wrap;
  }
  .library-search {
    width: auto;
    flex: 1;
  }
}
.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;
  inset-inline-start: 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-folder:not([data-selected]) {
  display: none;
}
.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-block: var(--openbot-space-2);
  padding-inline: var(--openbot-space-3) var(--openbot-space-2);
  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-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-3) var(--openbot-space-1);
  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: start;
  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-lg);
}
.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-lg);
}
.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-inline-start: -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);
}
.agent-import-sources {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.agent-import-source .agent-import-picker-copy {
  flex: 1;
}
.agent-import-source-logo {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  flex: 0 0 auto;
  color: var(--openbot-text-primary);
  fill: currentColor;
}
.agent-import-back.ui-button {
  align-self: flex-start;
}
.agent-import-back.ui-button svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.agent-import-back.ui-button > svg[class~="lucide-arrow-left"]:dir(rtl) {
  transform: scaleX(-1);
}
.hermes-logo-tile {
  fill: var(--openbot-text-primary);
}
.hermes-logo-mark {
  fill: var(--openbot-bg-canvas);
}
.agent-import-source-label {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
}
.agent-import-source-label-logo {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
}
.agent-import-profile {
  gap: var(--openbot-space-2);
}
.agent-import-profile-head {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
}
.agent-import-profile-name {
  margin: 0;
}
.agent-import-chevron {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.agent-import-chevron-open {
  transform: rotate(180deg);
}
.agent-import-rerun {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-grouped);
}
.agent-import-items[data-muted="true"] {
  opacity: 0.5;
}
.agent-import-item {
  align-items: flex-start;
}
.agent-import-allow {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--openbot-space-1-5);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  cursor: pointer;
}
.agent-import-command {
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  overflow-wrap: anywhere;
  white-space: normal;
}
.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-flow-arrow:dir(rtl), .instance-transfer-back > svg[class~="lucide-chevron-left"]:dir(rtl) {
  transform: scaleX(-1);
}
.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: start;
  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: start;
  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]):hover {
    background: var(--openbot-hover);
    color: var(--openbot-text-primary);
  }
}
.settings-modal-nav-item > svg:first-child {
  color: var(--openbot-text-muted);
}
.settings-modal-nav-item:is([aria-current], [data-selected], :focus-visible) > svg:first-child {
  color: var(--openbot-text-primary);
}
@media (hover: hover) and (pointer: fine) {
  .settings-modal-nav-item:hover > svg:first-child {
    color: var(--openbot-text-primary);
  }
}
.settings-modal-main {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  background: var(--openbot-bg-canvas);
}
.settings-modal-footer {
  display: contents;
}
.settings-page-path {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-1-5);
  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);
  white-space: nowrap;
}
.settings-page-path .settings-page-path-parent {
  flex: 0 1 auto;
  min-width: 0;
  margin-inline: calc(-1 * var(--openbot-space-2) - 1px) calc(-1 * var(--openbot-space-1));
  overflow: hidden;
  border-color: transparent;
  background: transparent;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-page-path .settings-page-path-parent:focus-visible {
  border-color: var(--openbot-border);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-primary);
}
@media (hover: hover) and (pointer: fine) {
  .settings-page-path .settings-page-path-parent:hover:not(:disabled) {
    border-color: var(--openbot-border);
    background: var(--openbot-bg-control);
    color: var(--openbot-text-primary);
  }
}
.settings-page-path-separator {
  flex: 0 0 auto;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
}
.settings-page-path-separator:dir(rtl) {
  transform: scaleX(-1);
}
.settings-page-path-current {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font: inherit;
  text-overflow: ellipsis;
}
.settings-page-description {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.settings-modal-scroll-frame {
  position: relative;
  min-height: 0;
  overflow: hidden;
}
.settings-modal-scroll-frame::before, .settings-modal-scroll-frame::after {
  position: absolute;
  inset-inline-end: var(--openbot-space-2);
  inset-inline-start: 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-on-accent);
}
.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-on-accent);
}
.settings-modal .ui-switch[data-checked] {
  background: var(--openbot-accent);
}
.settings-modal .ui-switch-thumb[data-checked] {
  background: var(--openbot-text-on-accent);
}
@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-on-accent);
  }
}
: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-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-block: 0 var(--openbot-space-3);
  padding-inline: 54px 0;
}
.provider-picker-embedded .provider-picker-accounts {
  margin-top: calc(-1 * var(--openbot-space-2));
  padding-block: 0 var(--openbot-space-2);
  padding-inline: 54px 0;
}
.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-inline-end: 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-link-select {
  width: 220px;
}
.ui-select-item.settings-modal-select-group-end {
  margin-bottom: var(--openbot-space-1);
  border-bottom: 1px solid var(--openbot-border);
}
.settings-modal-link-command {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: var(--openbot-space-2);
}
.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: end;
  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-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-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: start;
  }
  .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-mobile-dialog-footer svg:is([class~="lucide-arrow-left"], [class~="lucide-arrow-right"]):dir(rtl) {
  transform: scaleX(-1);
}
.settings-modal-page > .settings-modal-main > .settings-modal-scroll-frame > .settings-modal-content {
  padding-top: var(--openbot-space-6);
}
.settings-provider-section {
  display: grid;
  gap: var(--openbot-space-2);
}
.settings-dynamic-island-size > .ui-slider-field, .settings-dynamic-island-preview, .settings-agent-dock-size {
  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-agent-dock-avatar {
  width: 32px;
  height: 32px;
}
.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-model-actions {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.settings-voice-key-field > .ui-input {
  width: 100%;
}
.settings-modal-row .settings-voice-needs-key {
  color: var(--openbot-warning-text);
}
.settings-voice-toast-progress {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-top: var(--openbot-space-1);
}
.settings-voice-toast-progress > .ui-progress {
  flex: 1;
}
.settings-voice-toast-percent {
  font-variant-numeric: tabular-nums;
}
.custom-provider-dialog.voice-server-dialog {
  width: min(640px, 100%);
}
.voice-server-dialog .voice-server-line {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) minmax(0, 2fr) auto;
  gap: var(--openbot-space-2) var(--openbot-space-3);
  align-items: center;
  padding: var(--openbot-space-3) var(--openbot-space-4);
}
.voice-server-dialog .voice-server-name {
  display: grid;
  grid-column: 1;
  min-width: 0;
}
.voice-server-dialog .voice-server-model {
  grid-column: 2;
  min-width: 0;
}
.voice-server-dialog .voice-server-wide {
  grid-column: 2 / 4;
}
.voice-server-dialog .voice-server-voice {
  grid-column: 3;
  min-width: 0;
}
.voice-server-dialog .voice-server-end {
  display: flex;
  grid-column: 4;
  justify-content: flex-end;
}
.voice-server-dialog .voice-server-line .settings-modal-select {
  width: 100%;
}
.window-rail {
  position: relative;
  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-logo {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  height: var(--left-header-height, 38px);
  align-items: center;
  justify-content: center;
  padding-top: 2px;
}
.window-rail-logo .app-logo {
  display: block;
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
}
.window-rail-logo-link {
  display: flex;
  border-radius: var(--openbot-radius-logo);
  -webkit-app-region: no-drag;
}
.window-rail-logo-link:focus-visible {
  outline: 0;
  box-shadow: var(--openbot-focus-ring);
}
.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 {
  --openbot-icon-stroke: var(--openbot-icon-stroke-lg);
  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);
  inset-inline-end: 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);
}
.window-rail-button .window-rail-agent-usage-logo {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.window-rail-agent-usage {
  display: grid;
  padding-inline: var(--openbot-space-1);
  gap: var(--openbot-space-1);
}
.window-rail-agent-usage-text {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.window-rail-more-menu .window-rail-more-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--openbot-control-md);
  align-items: center;
  border-radius: var(--ui-menu-item-radius);
  transition: background-color var(--openbot-duration-hover) var(--openbot-ease-out);
}
.ui-action-menu.window-rail-more-menu .window-rail-more-row:is(:hover, :has([data-highlighted])) {
  background: var(--ui-menu-item-hover);
}
.ui-action-menu.window-rail-more-menu .window-rail-more-row :is([role="menuitem"], [role="menuitemcheckbox"]):is(:hover, :focus-visible, [data-highlighted]) {
  background: transparent;
}
.ui-action-menu.window-rail-more-menu .window-rail-more-pin[role="menuitemcheckbox"] {
  justify-content: center;
  padding: 0;
  opacity: 0;
}
.ui-action-menu.window-rail-more-menu .window-rail-more-row:is([data-pinned], :hover, :focus-within) .window-rail-more-pin {
  opacity: 1;
}
@media (hover: none) {
  .ui-action-menu.window-rail-more-menu .window-rail-more-pin[role="menuitemcheckbox"] {
    opacity: 1;
  }
}
.window-rail-more-menu .window-rail-more-row[data-pinned] .window-rail-more-pin > .agent-context-icon {
  color: var(--openbot-text-primary);
}
.ui-action-menu.window-rail-more-menu .window-rail-more-row:is(:hover, :has([data-highlighted])) > [role="menuitem"] > .agent-context-icon {
  color: var(--openbot-text-primary);
}
.app-window {
  --window-frame: var(--openbot-bg-frame);
  --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;
  }
  .app-frame .tasks-page-header > .side-panel-toggle {
    display: none;
  }
}
.app-window > :is(.web-app-frame, .app-frame:not(.app-frame-platform-darwin)):not(.app-frame-with-server-rail) > .sidebar:not(.sidebar-compact) .sidebar-topbar {
  padding-inline-start: var(--openbot-space-3);
}
@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, .web-app-frame) > .sidebar:not(.sidebar-compact) .sidebar-topbar {
    padding-inline-start: var(--openbot-space-6);
  }
  .app-window > .app-frame-edge {
    position: relative;
    isolation: isolate;
    padding-block: 0 calc(var(--window-edge) + 1px);
    padding-inline: 0 calc(var(--window-edge) + 1px);
    background: var(--window-frame);
  }
  .app-window > .app-frame-edge::before {
    position: absolute;
    z-index: -1;
    inset-block: calc(var(--left-header-height) - 1px) var(--window-edge);
    inset-inline: 0 var(--window-edge);
    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 {
    inset-inline-start: var(--server-rail-width);
  }
  .app-window > .app-frame-edge.app-frame-agent-dock {
    --agent-dock-column: calc(64px - var(--window-edge) - 1px);
    padding-inline-end: calc(var(--window-edge) + 1px + var(--agent-dock-column));
  }
  .app-window > .app-frame-edge.app-frame-agent-dock::before {
    inset-inline-end: calc(var(--window-edge) + var(--agent-dock-column));
  }
  .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 > .sidebar {
    --agent-avatar-outline: var(--openbot-bg-canvas);
  }
  .app-window > .app-frame-edge .channel-title {
    --agent-avatar-outline: var(--window-frame);
  }
  .app-window > .app-frame-edge :is(.conversation-panel, .direct-conversation)::before {
    content: none;
  }
  .app-window > .app-frame-edge > .sidebar::before {
    inset-block: var(--left-header-height) 0;
    inset-inline: auto 0;
    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)::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 {
    inset-inline-end: 0;
  }
  .app-window > .app-frame-edge :is(.settings-panel, .browser-panel) {
    border-inline-start: 0;
  }
  .app-window > .app-frame-edge :is(.settings-panel, .browser-panel)::before {
    inset-block: calc(var(--left-header-height) - 1px) 0;
    inset-inline: 0 auto;
    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) {
    position: relative;
  }
  .app-window > .app-frame-edge :is(.settings-panel, .browser-panel) > :is(.settings-panel-header, .file-preview-header)::before {
    inset-inline-start: 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)::before {
    content: none;
  }
  .app-window > .app-frame-edge .side-panel-maximized > :is(.settings-panel, .browser-panel) {
    border-end-end-radius: calc(var(--openbot-radius-card) - 1px);
    background: var(--openbot-bg-canvas);
  }
  .app-window > .app-frame-edge .diagram-view-body {
    border-top: 0;
    border-inline-end: 0;
    border-radius: 0;
    border-end-end-radius: calc(var(--openbot-radius-card) - 1px);
  }
  .app-window > .app-frame-edge .conversation-header-actions {
    gap: var(--openbot-space-2);
  }
  .app-window > .app-frame-edge :is(.conversation-header, .tasks-page-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 :is(.conversation-header, .tasks-page-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 :is(.conversation-header, .tasks-page-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-inline-start: calc(var(--openbot-space-2) + 1px);
    overflow: visible;
  }
  .app-window > .app-frame-edge .conversation-header-actions > .side-panel-toggle::before {
    position: absolute;
    top: 50%;
    inset-inline-start: 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) {
    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-inline-start: 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 .routine-planner-empty {
    min-height: 0;
    overflow-y: auto;
    grid-template-rows: minmax(0, 1fr);
  }
  .app-window > .app-frame-edge > .window-page :is(.routine-planner-empty-board, .routine-planner-empty-board > *) {
    min-height: 0;
    overflow: hidden;
  }
  .app-window > .app-frame-edge > .window-page .routine-planner-empty-board {
    grid-template-rows: minmax(0, 1fr);
  }
  @container (max-width: 920px) {
    .app-window > .app-frame-edge > .window-page .routine-planner-empty {
      grid-template-rows: none;
    }
  }
  .app-window > .app-frame-edge > .app-frame-panes .tasks-page {
    position: relative;
    box-sizing: border-box;
    padding-top: var(--left-header-height);
    background: transparent;
  }
  .app-window > .app-frame-edge > .app-frame-panes .tasks-page-header {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: var(--left-header-height);
    padding: 0 var(--openbot-space-3);
    -webkit-app-region: drag;
  }
  .app-window > .app-frame-edge > .app-frame-panes .tasks-page-header h2 {
    font-size: var(--openbot-text-md);
    font-weight: var(--openbot-weight-medium);
    white-space: nowrap;
  }
  .app-window > .app-frame-edge > .app-frame-panes .tasks-page-header > .ui-icon-button, .app-window > .app-frame-edge > .app-frame-panes .tasks-page-header > h2 > span {
    display: none;
  }
  .app-frame-edge > .app-frame-panes .tasks-page-header h2:focus {
    outline: none;
  }
  .app-window > .app-frame-edge > .app-frame-panes .tasks-page-column {
    padding-top: var(--openbot-space-6);
  }
  .app-window > .app-frame-edge > .app-frame-panes .tasks-page-side {
    border-end-end-radius: calc(var(--openbot-radius-card) - 1px);
  }
  .app-frame-edge.app-frame-sidebar-hidden > .sidebar > :not(.sidebar-topbar), .app-frame-edge.app-frame-sidebar-hidden > .left-panel-resizer {
    visibility: hidden;
  }
  .app-frame-edge.app-frame-sidebar-hidden > .sidebar .sidebar-new-button, .app-frame-edge.app-frame-sidebar-hidden > .sidebar::before {
    display: none;
  }
  .app-window > .app-frame-edge.app-frame-sidebar-hidden > .app-frame-panes {
    position: absolute;
    grid-row: 1 / -1;
    grid-column: -4 / -1;
    inset: 0;
    pointer-events: none;
  }
  .app-window > .app-frame-edge.app-frame-sidebar-hidden > .app-frame-panes .tasks-page-header {
    inset-inline-start: var(--left-panel-width);
  }
  .app-window > .app-frame-edge.app-frame-sidebar-hidden > .app-frame-panes :is(.tasks-page-scroll, .tasks-page-side) {
    pointer-events: auto;
  }
  .app-frame-edge:not([data-window-page-kind="agents"]) > .window-page {
    position: absolute;
    grid-row: 1 / -1;
    grid-column: 1 / -1;
    inset-block: 0;
    inset-inline: 1px 0;
  }
  .app-frame-edge[data-window-page-kind="settings"] > .window-page {
    pointer-events: none;
  }
  .app-frame-edge[data-window-page-kind="settings"] > .window-page > .settings-page {
    grid-template-rows: var(--left-header-height) minmax(0, 1fr);
  }
  .app-frame-edge[data-window-page-kind="settings"] > .window-page > .settings-page > .settings-page-nav {
    grid-row: 2;
  }
  .app-frame-edge[data-window-page-kind="settings"] > .window-page > .settings-page :is(.settings-page-nav, .settings-page-content, .settings-page-path) {
    pointer-events: auto;
    -webkit-app-region: no-drag;
  }
  .app-frame-edge[data-window-page-kind="settings"] > .window-page > .settings-page > .settings-page-path-row {
    padding: 0 var(--openbot-space-3);
    -webkit-app-region: drag;
  }
  .app-frame-edge[data-window-page-kind="settings"] > .window-page > .settings-page > .settings-page-path-row > .settings-page-path {
    width: auto;
    flex: 0 1 auto;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
  }
  .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 {
    inset-inline-start: 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-inline-start: 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, .routine-planner-empty, .routine-planner-error, .marketplace-heading, .marketplace-nav, .skills-marketplace-body ) {
    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-heading {
    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) > .ui-icon-button, .app-window > .app-frame-edge > .window-page :is(.agent-usage-identity, .routine-planner-identity) > h2 > span {
    display: none;
  }
  .app-frame-edge > .window-page :is(.agent-usage-identity, .routine-planner-identity) 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);
  grid-template-rows: auto minmax(0, 1fr);
}
.settings-page-path-row {
  display: flex;
  min-width: 0;
  grid-column: 2;
  grid-row: 1;
  align-items: center;
  padding: var(--openbot-space-4) 0 0;
}
.settings-page-path-row:empty {
  display: none;
}
.settings-page-path-row > .settings-page-path {
  width: 100%;
  max-width: 784px;
  margin-inline: auto;
  padding-inline: var(--openbot-space-8);
}
.settings-page-nav {
  display: flex;
  grid-row: 1 / -1;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  gap: var(--openbot-space-1);
  overflow: hidden;
  border-inline-end: 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);
}
@property --settings-page-fade-start {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --settings-page-fade-end {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@supports (animation-timeline: scroll()) {
  .settings-page-sections, .settings-page-results {
    --settings-page-fade-size: var(--openbot-space-6);
    mask-image: linear-gradient( to bottom, transparent, var(--openbot-text-primary) var(--settings-page-fade-start), var(--openbot-text-primary) calc(100% - var(--settings-page-fade-end)), transparent );
    animation: settings-page-fade-start linear both, settings-page-fade-end linear both;
    animation-timeline: scroll(self block), scroll(self block);
    animation-range: 0 var(--settings-page-fade-size), calc(100% - var(--settings-page-fade-size)) 100%;
  }
}
@keyframes settings-page-fade-start {
  from {
    --settings-page-fade-start: 0px;
  }
  to {
    --settings-page-fade-start: var(--settings-page-fade-size);
  }
}
@keyframes settings-page-fade-end {
  from {
    --settings-page-fade-end: var(--settings-page-fade-size);
  }
  to {
    --settings-page-fade-end: 0px;
  }
}
.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;
  margin-bottom: var(--openbot-space-2);
  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-footer {
  flex: none;
  margin-inline: calc(-1 * var(--openbot-space-3));
  --settings-page-switch-radius: calc(var(--openbot-radius-card) - var(--openbot-space-1));
  border-top: 1px solid var(--openbot-border);
  padding: var(--openbot-space-1);
}
.settings-page-footer:empty {
  display: none;
}
.settings-page-footer > .settings-page-switch {
  min-height: var(--openbot-control-xl);
  border-radius: var(--settings-page-switch-radius);
  padding-inline: var(--openbot-space-3) calc(var(--openbot-space-3) - var(--openbot-icon-md) / 3);
  font-size: var(--openbot-text-md);
  font-weight: inherit;
}
.settings-page-switch .server-menu-mark, .settings-page-switch-avatar {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.settings-page-switch-avatar {
  display: block;
  overflow: hidden;
  border-radius: var(--openbot-radius-pill);
}
.settings-page-switch-avatar > img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  outline: 1px solid var(--openbot-image-outline);
  outline-offset: -1px;
}
.settings-page-switch-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-page-switch-chevron {
  color: var(--openbot-text-muted);
}
.settings-page-switch-chevron:dir(rtl) {
  transform: scaleX(-1);
}
.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: start;
  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-inline-start: 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;
  grid-column: 2;
  grid-row: 2;
  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 .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 auto minmax(0, 1fr);
  }
  .settings-page-path-row {
    grid-column: 1;
    grid-row: 2;
  }
  .settings-page-path-row > .settings-page-path {
    padding-inline: var(--openbot-space-4);
  }
  .settings-page-content {
    grid-column: 1;
    grid-row: 3;
  }
  .settings-page-nav {
    grid-column: 1;
    grid-row: 1;
    border-inline-end: 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);
  }
}
.app-window > .app-frame.app-frame-chat-window {
  grid-template-columns: 0 0 minmax(0, 1fr);
}
.app-frame-chat-window > .left-panel-resizer {
  display: none;
}
.app-frame-chat-window.app-frame-platform-darwin .conversation-header {
  padding-inline-start: 76px;
}
.quit-shortcut-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--openbot-layer-tooltip);
  display: grid;
  place-items: center;
  background: var(--openbot-dialog-overlay);
  backdrop-filter: blur(var(--openbot-space-2));
  pointer-events: none;
  animation: quit-shortcut-in var(--openbot-duration-fast) var(--openbot-ease-out);
}
.quit-shortcut-hint {
  --agent-avatar-outline: var(--openbot-bg-surface-raised);
  display: flex;
  align-items: center;
  gap: var(--openbot-space-4);
  max-width: calc(100vw - 2 * var(--openbot-space-4));
  padding: var(--openbot-space-3) var(--openbot-space-8) var(--openbot-space-3) var(--openbot-space-3);
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-primary);
}
.quit-shortcut-avatars {
  display: flex;
  flex: none;
  align-items: center;
}
.quit-shortcut-avatars .agent-avatar {
  --agent-avatar-optical-offset: -5px;
  width: 40px;
  height: 40px;
}
.quit-shortcut-avatars .agent-avatar + .agent-avatar {
  margin-inline-start: calc(-1 * var(--openbot-space-2));
}
.quit-shortcut-copy {
  display: grid;
  gap: var(--openbot-space-0-5);
  min-width: 0;
}
.quit-shortcut-agents {
  font-size: var(--openbot-text-xl);
  font-weight: 500;
  line-height: var(--openbot-leading-xl);
  text-wrap: balance;
}
.quit-shortcut-instruction {
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
  white-space: nowrap;
}
@keyframes quit-shortcut-in {
  from {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .quit-shortcut-backdrop {
    animation: none;
  }
}
.library-panel {
  display: grid;
  height: 100%;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr);
}
.library-panel > * {
  grid-row: 1;
  grid-column: 1;
  min-height: 0;
}
@media (min-width: 721px) {
  .app-frame-edge[data-window-page-kind="titled"] > .window-page > .library-panel {
    grid-template-rows: var(--left-header-height) minmax(0, 1fr);
  }
  .app-frame-edge[data-window-page-kind="titled"] > .window-page > .library-panel > * {
    grid-row: 2;
    pointer-events: auto;
  }
}
.library-panel-content[inert] {
  visibility: hidden;
}
.library-viewer {
  position: relative;
  overflow: hidden;
  border-end-start-radius: calc(var(--openbot-radius-card) - 1px);
  border-end-end-radius: calc(var(--openbot-radius-card) - 1px);
  outline: none;
}
.library-viewer .browser-panel {
  width: 100%;
  border-inline-start: 0;
}
.library-viewer :is(.browser-panel, .file-preview-header)::before {
  content: none;
}
.library-viewer .right-panel-resizer {
  display: none;
}
.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-inline-end: 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-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-qr-platform {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}
.settings-mobile-app-qr-logo {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}
.settings-mobile-qr {
  display: grid;
  justify-items: center;
  gap: var(--openbot-space-2);
}
.settings-mobile-qr .ui-qr-code {
  overflow: hidden;
  border-radius: var(--openbot-radius-md);
}
.settings-mobile-qr-code {
  animation: settings-mobile-qr-in var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.settings-mobile-qr-slot {
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--openbot-space-2);
  border: 1px dashed var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
}
.settings-mobile-qr-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  min-height: 24px;
  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);
  font-weight: var(--openbot-weight-medium);
  white-space: nowrap;
}
.settings-mobile-qr-tag > svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: 0 0 auto;
}
.settings-mobile-qr-tag[data-kind="signin"] {
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
}
.settings-mobile-qr-tag[data-kind="permanent"] {
  background: var(--openbot-warning-soft);
  color: var(--openbot-warning-text);
}
.settings-mobile-qr-tag[data-kind="success"] {
  background: var(--openbot-success-soft);
  color: var(--openbot-success-text);
}
.settings-mobile-qr-tag-time {
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
}
.settings-mobile-link-warning {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  color: var(--openbot-warning-text);
}
.settings-mobile-link-warning > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.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-phones {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--openbot-space-2);
}
.settings-mobile-phones-empty {
  grid-column: 1 / -1;
  display: grid;
  justify-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-8) var(--openbot-space-6);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  text-align: center;
}
.settings-mobile-phones-empty > .ui-button {
  margin-top: var(--openbot-space-2);
}
.settings-mobile-phones-empty-title, .settings-mobile-phone-name {
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-semibold);
}
.settings-mobile-phones-empty-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--openbot-space-1);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
}
.settings-mobile-phones-empty-icon > svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
}
.settings-mobile-phone-card {
  display: flex;
  align-items: flex-start;
  gap: var(--openbot-space-3);
  min-width: 0;
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  transition: opacity var(--openbot-duration-overlay) var(--openbot-ease-out);
}
@starting-style {
  .settings-mobile-phone-card {
    opacity: 0;
  }
}
.settings-mobile-phone-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-secondary);
}
.settings-mobile-phone-icon[data-active] {
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
}
.settings-mobile-phone-icon > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.settings-mobile-phone-copy {
  min-width: 0;
  display: grid;
  flex: 1;
  gap: var(--openbot-space-0-5);
}
.settings-mobile-phone-via {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  margin-top: var(--openbot-space-1);
  color: var(--openbot-text-dim);
  font-size: var(--openbot-text-sm);
}
.settings-mobile-phone-via > svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.settings-mobile-link-card-slot {
  display: grid;
  gap: var(--openbot-space-1);
}
.settings-mobile-link-card.ui-button {
  height: auto;
  justify-content: flex-start;
  border-style: dashed;
  font-weight: var(--openbot-weight-regular);
  text-align: start;
  white-space: normal;
}
.settings-mobile-link-card-hint {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.settings-mobile-link-card-actions {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
}
.settings-mobile-route-chip.ui-button > svg:last-child {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  color: var(--openbot-text-dim);
}
.settings-mobile-route-popover.ui-popover-menu-surface {
  width: 340px;
  display: grid;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-3);
}
.settings-mobile-route-popover-title {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
}
.settings-mobile-route-popover-description {
  margin: 0 0 var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.settings-mobile-dialog.ui-dialog-content {
  width: min(460px, 100%);
  display: grid;
  overflow: hidden;
  outline: 0;
  background: var(--openbot-bg-sidebar);
}
.settings-mobile-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--openbot-space-4) 0;
  padding-inline: var(--openbot-space-6) var(--openbot-space-4);
}
.settings-mobile-dialog-title {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-xl);
  font-weight: var(--openbot-weight-semibold);
}
.settings-mobile-dialog-body {
  min-height: 300px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--openbot-space-4);
  padding: var(--openbot-space-4) var(--openbot-space-6) var(--openbot-space-6);
  text-align: center;
}
.settings-mobile-dialog-note {
  max-width: 320px;
}
.settings-mobile-dialog-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border-top: 1px solid var(--openbot-border);
}
.settings-mobile-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-2);
}
.settings-mobile-choices {
  width: 100%;
  display: grid;
  gap: var(--openbot-space-2);
}
.settings-mobile-choice.ui-button {
  height: auto;
  justify-content: flex-start;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3) var(--openbot-space-4);
  text-align: start;
  white-space: normal;
}
.settings-mobile-choice.ui-button > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  color: var(--openbot-text-secondary);
}
.settings-mobile-choice-text {
  display: grid;
  gap: var(--openbot-space-0-5);
}
.settings-mobile-choice-title {
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-semibold);
}
.settings-mobile-choice-hint {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
}
.settings-mobile-steps {
  display: grid;
  gap: var(--openbot-space-1-5);
  margin: 0;
  padding-inline-start: var(--openbot-space-4);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-align: start;
}
.settings-mobile-steps > li::marker {
  color: var(--openbot-text-dim);
  font-variant-numeric: tabular-nums;
}
.settings-mobile-link-intro, .settings-mobile-link-code {
  max-width: 340px;
  display: grid;
  justify-items: center;
  gap: var(--openbot-space-2);
}
.settings-mobile-link-intro > .ui-button, .settings-mobile-link-code > .settings-mobile-dialog-actions {
  margin-top: var(--openbot-space-2);
}
.settings-mobile-link-code > .settings-mobile-qr {
  margin-bottom: var(--openbot-space-2);
}
.settings-mobile-link-warning-title {
  color: inherit;
  font-weight: var(--openbot-weight-semibold);
}
.settings-mobile-enter {
  animation: settings-mobile-enter var(--openbot-duration-slow) var(--openbot-ease-out);
}
@keyframes settings-mobile-enter {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}
@keyframes settings-mobile-qr-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}
@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 (prefers-reduced-motion: reduce) {
  .settings-mobile-connect-qr-stage .ui-qr-code, .settings-mobile-phone-card {
    transition: none;
  }
  .settings-mobile-enter, .settings-mobile-qr-code, .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-route-choice {
  display: grid;
  gap: var(--openbot-space-2);
}
.settings-mobile-route-option {
  display: flex;
  min-width: 0;
}
.settings-mobile-route-card {
  display: flex;
  flex: 1;
  align-items: flex-start;
  gap: var(--openbot-space-3);
  min-width: 0;
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  box-shadow: inset 0 0 0 1px var(--openbot-border);
  cursor: pointer;
  transition-property: background-color, box-shadow;
  transition-duration: var(--openbot-duration-hover), var(--openbot-duration-normal);
  transition-timing-function: var(--openbot-ease-out);
}
.settings-mobile-route-card:hover {
  background: var(--openbot-bg-control-hover);
}
.settings-mobile-route-card[data-disabled] {
  cursor: default;
}
.settings-mobile-route-card[data-checked] {
  box-shadow: inset 0 0 0 1.5px var(--openbot-accent), 0 1px 3px var(--openbot-shadow-popover-ambient);
}
.settings-mobile-route-dot {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  margin-top: 1px;
  border-radius: var(--openbot-radius-pill);
  box-shadow: inset 0 0 0 1.5px var(--openbot-text-muted);
  transition: box-shadow var(--openbot-duration-normal) var(--openbot-ease-out);
}
.settings-mobile-route-dot::after {
  width: 8px;
  height: 8px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
  content: "";
  transform: scale(0);
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.settings-mobile-route-card[data-checked] .settings-mobile-route-dot {
  box-shadow: inset 0 0 0 1.5px var(--openbot-accent);
}
.settings-mobile-route-card[data-checked] .settings-mobile-route-dot::after {
  transform: scale(1);
}
.settings-mobile-route-option:has(:focus-visible) .settings-mobile-route-card {
  box-shadow: var(--openbot-focus-ring);
}
.settings-mobile-route-text {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  min-width: 0;
}
.settings-mobile-route-name {
  display: flex;
  flex-wrap: wrap;
  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-mobile-route-hint {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.hosted-sites-overview {
  display: grid;
  gap: var(--openbot-space-1);
}
.hosted-sites-usage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.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: start;
}
.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%;
  stroke-width: var(--openbot-icon-stroke-lg);
}
.integration-logo-tile > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.integration-logo-tile > .connector-brand-tile {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.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-page {
  display: grid;
  gap: var(--openbot-space-6);
}
.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-name {
  display: inline-flex;
  gap: var(--openbot-space-1-5);
  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-body:empty {
  display: none;
}
.integration-wizard-form {
  display: grid;
  gap: var(--openbot-space-4);
}
.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[data-wide] {
  width: min(720px, calc(100vw - var(--openbot-space-6) * 2));
}
:is(.integration-dialog-backdrop, .integration-wizard-dialog)[data-nested] {
  z-index: calc(var(--openbot-layer-dialog-host) + 2);
}
.integration-wizard-dialog h2 {
  margin: 0;
}
.integration-dialog-close {
  position: absolute;
  top: var(--openbot-space-3);
  inset-inline-end: 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);
}
.integration-card-body {
  display: grid;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3) var(--openbot-space-4);
}
.integration-card-body :where(.ui-input) {
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
.integration-card-note {
  padding: var(--openbot-space-3) var(--openbot-space-4);
}
.integration-card-note[data-tone="danger"] {
  color: var(--openbot-danger-text);
}
.integration-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);
}
.integration-effects li {
  display: flex;
  gap: var(--openbot-space-3);
  align-items: center;
  padding: var(--openbot-space-2);
}
.integration-effects li + li {
  border-top: 1px solid var(--openbot-border);
}
.integration-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);
}
.integration-effects .integration-effect-icon > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.integration-effects li[data-tone="danger"] .integration-effect-icon {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger-text);
}
.integration-effects li[data-tone="success"] .integration-effect-icon {
  background: var(--openbot-success-soft);
  color: var(--openbot-success);
}
.integration-confirm.ui-button-variant-destructive {
  color: var(--openbot-danger-text);
}
.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-border-focus);
  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-chevron:dir(rtl) {
  transform: scaleX(-1);
}
.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 {
  --integrations-agent-face-size: 32px;
  display: inline-block;
  flex: none;
  width: var(--integrations-agent-face-size);
  height: var(--integrations-agent-face-size);
}
.integrations-agent-face[data-size="sm"] {
  --integrations-agent-face-size: 24px;
}
.ui-item-group:has(.integrations-agent-face:not([data-size="sm"])) .ui-item-media > svg {
  margin-inline: calc((32px - var(--openbot-icon-lg)) / 2);
}
.integrations-agent-face > * {
  --agent-avatar-optical-offset: calc(var(--integrations-agent-face-size) * -0.14);
  width: 100%;
  height: 100%;
}
.provider-settings-stack {
  display: grid;
  gap: var(--openbot-space-6);
}
.provider-settings-select {
  width: 168px;
}
.provider-settings-select .ui-select-value, .provider-settings-select-option {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.provider-settings-logo-off {
  opacity: 0.44;
}
.provider-settings-stack .ui-item-description.provider-settings-warning {
  color: var(--openbot-warning-text);
}
.provider-settings-stack .ui-item-description.provider-settings-error {
  color: var(--openbot-danger-text);
}
.provider-settings-account.ui-item {
  align-items: flex-start;
}
.provider-settings-account .ui-item-content {
  gap: var(--openbot-space-1);
}
.provider-settings-account .provider-picker-account-rename {
  max-width: 280px;
}
.provider-settings-usage-badge {
  cursor: pointer;
  font: inherit;
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
}
.provider-settings-usage-badge:focus-visible {
  outline: 2px solid var(--openbot-focus-ring);
  outline-offset: 2px;
}
.provider-settings-progress {
  max-width: 320px;
}
.provider-settings-models.settings-modal-card {
  max-height: 360px;
  padding: 0;
  overflow-y: auto;
}
.provider-settings-models-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--openbot-space-1) 0;
  list-style: none;
}
.provider-settings-models-row {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  min-height: 32px;
  padding: 0 var(--openbot-space-3);
}
.provider-settings-models-row:hover {
  background: var(--openbot-bg-control-hover);
}
.provider-settings-models-name {
  display: flex;
  flex: 1;
  align-items: baseline;
  gap: var(--openbot-space-2);
  min-width: 0;
}
.provider-settings-models-name > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.provider-settings-models-name > :first-child {
  flex: none;
  max-width: 70%;
}
.provider-settings-models-id {
  min-width: 0;
  font-family: var(--openbot-font-mono);
}
.provider-settings-models-empty {
  display: block;
  padding: var(--openbot-space-3);
}
.provider-settings-models-error {
  color: var(--openbot-danger-text);
}
.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-search {
  position: relative;
  display: flex;
  align-items: center;
}
.github-connector-search > svg {
  position: absolute;
  inset-inline-start: 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-inline-start: calc(var(--openbot-space-3) * 2 + var(--openbot-icon-sm));
}
.github-connector-repository-list {
  display: grid;
  max-height: 260px;
  margin: 0 calc(var(--openbot-space-2) * -1);
  padding: 0;
  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;
}
.vault-secret-form {
  display: flex;
  align-items: flex-end;
  gap: var(--openbot-space-3);
}
.vault-secret-form > .ui-field {
  flex: 1;
  min-width: 0;
}
.vault-secret-actions {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
}
.bitwarden-connector-host-form {
  display: grid;
  gap: var(--openbot-space-3);
}
.bitwarden-connector-actions {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
}
.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);
}
.channel-stack {
  display: grid;
  gap: var(--openbot-space-0-5);
  justify-items: start;
}
.channel-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);
}
.channel-checklist li {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
}
.channel-checklist li[data-state="done"] {
  color: var(--openbot-text-secondary);
}
.channel-checklist li[data-state="done"] svg {
  color: var(--openbot-success);
}
.channel-checklist-dot {
  width: 14px;
  height: 14px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
}
.channel-waiting {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
  justify-content: center;
}
.channel-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);
}
.channel-orchestrator-model {
  display: grid;
  gap: var(--openbot-space-1);
}
.discord-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;
}
.discord-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;
}
.discord-role-row:hover {
  background: var(--openbot-bg-control-hover);
}
.discord-role-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whatsapp-choice {
  display: grid;
  gap: var(--openbot-space-2);
}
.whatsapp-choice[data-layout="row"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.whatsapp-choice-option {
  display: flex;
  min-width: 0;
}
.whatsapp-choice-card {
  display: flex;
  flex: 1;
  align-items: flex-start;
  gap: var(--openbot-space-3);
  min-width: 0;
  padding: var(--openbot-space-2) var(--openbot-space-3);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  box-shadow: inset 0 0 0 1px var(--openbot-border);
  cursor: pointer;
  transition-property: background-color, box-shadow;
  transition-duration: var(--openbot-duration-hover), var(--openbot-duration-normal);
  transition-timing-function: var(--openbot-ease-out);
}
.whatsapp-choice-card:hover {
  background: var(--openbot-bg-control-hover);
}
.whatsapp-choice-card[data-disabled] {
  cursor: default;
}
.whatsapp-choice-card[data-checked] {
  box-shadow: inset 0 0 0 1.5px var(--openbot-accent);
}
.whatsapp-choice-option:has(:focus-visible) .whatsapp-choice-card {
  box-shadow: var(--openbot-focus-ring);
}
.whatsapp-choice-dot {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  margin-top: 1px;
  border-radius: var(--openbot-radius-pill);
  box-shadow: inset 0 0 0 1.5px var(--openbot-text-muted);
  transition: box-shadow var(--openbot-duration-normal) var(--openbot-ease-out);
}
.whatsapp-choice-dot::after {
  width: 8px;
  height: 8px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
  content: "";
  transform: scale(0);
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.whatsapp-choice-card[data-checked] .whatsapp-choice-dot {
  box-shadow: inset 0 0 0 1.5px var(--openbot-accent);
}
.whatsapp-choice-card[data-checked] .whatsapp-choice-dot::after {
  transform: scale(1);
}
.whatsapp-choice-text {
  display: grid;
  gap: var(--openbot-space-0-5);
  min-width: 0;
}
.whatsapp-choice-name {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.whatsapp-choice-hint {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.whatsapp-link-qr {
  display: grid;
  gap: var(--openbot-space-3);
  justify-items: center;
}
.whatsapp-link-qr > .channel-checklist {
  justify-self: stretch;
}
.whatsapp-link-step-index {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.whatsapp-pairing-code {
  display: flex;
  gap: var(--openbot-space-3);
  align-items: center;
  justify-content: center;
  padding: var(--openbot-space-3);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
}
.whatsapp-pairing-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);
}
.whatsapp-groups {
  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;
}
.whatsapp-group-row {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
  justify-content: space-between;
  padding: var(--openbot-space-1) var(--openbot-space-2);
  border-radius: var(--openbot-radius-sm);
}
.whatsapp-group-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 {
  direction: ltr;
  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-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-bar-fill:dir(rtl) {
    transform-origin: right center;
  }
  .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-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;
  stroke-width: var(--openbot-icon-stroke);
  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: start;
}
.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;
}
:root[data-surface="computer-use-highlight"], :root[data-surface="computer-use-highlight"] body, :root[data-surface="computer-use-highlight"] #root {
  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: start;
}
.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-inline-start: 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);
  inset-inline-end: 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-publish-setting.ui-switch-field {
  padding: var(--openbot-space-3) var(--openbot-space-4);
}
.server-settings-publish-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: end;
  user-select: text;
}
.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-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%;
  inset-inline-start: 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-inline-start: 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: end;
}
.server-settings-desktop-hint {
  max-width: 220px;
  text-align: end;
}
.server-settings-desktop-status {
  margin-top: var(--openbot-space-1);
}
@media (max-width: 720px) {
  .server-settings-readonly-name {
    align-items: flex-start;
    flex-direction: column;
  }
  .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: start;
  }
  .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-inline-start: 52px;
    justify-items: start;
    text-align: start;
  }
}
@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-invites-empty {
  display: grid;
}
.server-invites-empty > * {
  grid-area: 1 / 1;
}
.server-invites-empty-board {
  min-height: calc(4 * 3.75rem);
  display: grid;
  align-content: start;
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
  mask-image: radial-gradient(ellipse 46% 72% at 50% 50%, var(--openbot-transparent) 58%, var(--openbot-text-primary) 100%), linear-gradient(var(--openbot-text-primary) 70%, var(--openbot-transparent));
  mask-composite: intersect;
}
.server-invites-empty-row {
  animation: server-invites-empty-land 560ms var(--openbot-ease-out) both;
}
.server-invites-empty-row > .ui-item {
  padding: var(--openbot-space-3) var(--openbot-space-4);
}
.server-invites-empty-row + .server-invites-empty-row {
  position: relative;
}
.server-invites-empty-row + .server-invites-empty-row::before {
  position: absolute;
  top: 0;
  right: var(--openbot-space-4);
  left: var(--openbot-space-4);
  height: 1px;
  background: var(--openbot-border);
  content: "";
}
.server-invites-empty-board[data-leaving] .server-invites-empty-row {
  animation: server-invites-empty-leave 700ms var(--openbot-ease-out) both;
}
@keyframes server-invites-empty-land {
  from {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(10px) scale(0.98);
  }
}
@keyframes server-invites-empty-leave {
  to {
    opacity: 0;
    filter: blur(3px);
    transform: translateY(-4px);
  }
}
.server-invites-empty-pitch {
  z-index: 1;
  width: 100%;
  max-width: 30rem;
  display: grid;
  place-self: center;
  justify-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-8) var(--openbot-space-6);
  text-align: center;
}
.server-invites-empty-title {
  display: grid;
  font-size: var(--openbot-text-3xl);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.server-invites-empty-quiet {
  color: var(--openbot-text-muted);
}
.server-invites-empty-hand {
  display: inline-block;
  color: var(--openbot-accent-text);
  font-family: "Bradley Hand", "Noteworthy", "Segoe Print", cursive;
  line-height: 1;
  clip-path: inset(-0.4em 100% -0.4em -0.2em);
  animation: server-invites-empty-write 560ms linear 450ms forwards;
}
@keyframes server-invites-empty-write {
  to {
    clip-path: inset(-0.4em -0.2em -0.4em -0.2em);
  }
}
.server-invites-empty-action {
  width: 100%;
  max-width: 20rem;
  height: var(--openbot-control-lg);
  margin-top: var(--openbot-space-2);
}
@media (prefers-reduced-motion: reduce) {
  .server-invites-empty-row, .server-invites-empty-hand {
    animation: none;
    clip-path: none;
  }
}
.server-settings-timezone-pending {
  width: 200px;
  min-height: var(--openbot-control-sm);
}
.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;
  }
}
.custom-provider-dialog.company-sign-in-dialog {
  width: min(520px, 100%);
}
.company-sign-in-copy-row {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-top: var(--openbot-space-2);
}
.company-sign-in-copy-row > .ui-input, .company-sign-in-copy-row > input {
  flex: 1;
  min-width: 0;
}
.company-sign-in-passed {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
}
.company-sign-in-passed svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-success);
}
.company-sign-in-secondary {
  display: flex;
  justify-content: center;
  gap: var(--openbot-space-2);
}
.skills-marketplace {
  --marketplace-inset: var(--openbot-space-6);
  display: grid;
  grid-template-columns: max(var(--left-panel-width, 280px), 220px) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: var(--openbot-text-primary);
}
.marketplace-menu {
  z-index: calc(var(--openbot-layer-dialog-host) + 1);
}
body[data-skills-marketplace] :is(.integration-dialog-backdrop, .integration-wizard-dialog):not([data-nested]) {
  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);
  grid-column: 1 / -1;
  min-height: 48px;
  padding-block: var(--openbot-space-2);
  padding-inline: var(--marketplace-inset) var(--openbot-space-2);
  border-bottom: 1px solid var(--openbot-border);
}
.marketplace-nav {
  display: flex;
  grid-row: 2;
  grid-column: 1;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  gap: var(--openbot-space-1);
  overflow-y: auto;
  padding: var(--openbot-space-4) var(--openbot-space-3) var(--openbot-space-3);
  border-inline-end: 1px solid var(--openbot-border);
}
.marketplace-nav-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);
}
.marketplace-nav-title:focus {
  outline: none;
}
.marketplace-nav-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.marketplace-nav-item {
  grid-template-columns: var(--openbot-icon-lg) minmax(0, 1fr) auto;
}
.ui-button.marketplace-nav-item {
  font: inherit;
  font-size: var(--openbot-text-md);
  white-space: normal;
}
.ui-button.marketplace-nav-item[aria-current] {
  font-weight: var(--openbot-weight-medium);
}
.marketplace-nav-item[aria-current="location"] {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}
.marketplace-nav-item > svg:first-child {
  justify-self: center;
}
.marketplace-nav-count {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
  font-variant-numeric: tabular-nums;
}
.marketplace-nav-heading {
  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);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
}
.marketplace-nav-mark {
  display: grid;
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  place-items: center;
  overflow: hidden;
  border-radius: var(--openbot-radius-xs);
}
.marketplace-nav-mark > :is(svg, img) {
  width: 100%;
  height: 100%;
  stroke-width: var(--openbot-icon-stroke-lg);
}
.marketplace-nav-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.marketplace-nav-item > .marketplace-nav-warning {
  color: var(--openbot-warning-text);
}
.skills-marketplace-body {
  position: relative;
  grid-row: 2;
  grid-column: 2;
  overflow: auto;
  scrollbar-gutter: stable;
}
.marketplace-frame {
  padding: calc(var(--openbot-space-8) + var(--openbot-space-2)) var(--marketplace-inset) var(--openbot-space-8);
}
.marketplace-frame > * {
  width: min(100%, 880px);
  margin-inline: auto;
}
.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-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-3) var(--openbot-space-1);
  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-heading {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--openbot-space-1-5);
  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;
  margin-inline: calc(-1 * var(--openbot-space-2) - 1px) calc(-1 * var(--openbot-space-1));
  overflow: hidden;
  border-color: transparent;
  background: transparent;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.skills-marketplace .marketplace-crumb-parent:focus-visible {
  border-color: var(--openbot-border);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-primary);
}
@media (hover: hover) and (pointer: fine) {
  .skills-marketplace .marketplace-crumb-parent:hover:not(:disabled) {
    border-color: var(--openbot-border);
    background: var(--openbot-bg-control);
    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-crumb-separator:dir(rtl), .marketplace-skill-group-head .ui-button > svg[class~="lucide-chevron-right"]:dir(rtl) {
  transform: scaleX(-1);
}
.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-app-reason {
  white-space: normal;
}
.marketplace-command {
  overflow-wrap: anywhere;
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
}
.marketplace-browse {
  gap: var(--openbot-space-8);
}
.marketplace-browse-head {
  display: grid;
  gap: var(--openbot-space-6);
}
.marketplace-browse-copy {
  display: grid;
  gap: var(--openbot-space-1);
}
.marketplace-browse-copy > p {
  margin: 0;
}
.marketplace-browse-title {
  margin: 0;
  font-size: var(--openbot-text-3xl);
}
.marketplace-toolbar {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.marketplace-search {
  position: relative;
  flex: 1;
  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;
  stroke-width: var(--openbot-icon-stroke-lg);
}
.marketplace-skill-mark[data-kind="icon"] > img {
  width: 100%;
  height: 100%;
}
.marketplace-skill-mark[data-kind="none"] > * {
  width: 60%;
  height: 60%;
}
.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: var(--marketplace-done-icon, 14px);
  height: var(--marketplace-done-icon, 14px);
  color: var(--marketplace-done-mark, currentColor);
}
.marketplace-app-group {
  display: grid;
  gap: var(--openbot-space-3);
  padding-top: var(--openbot-space-4);
  border-top: 1px solid var(--openbot-border);
}
.marketplace-app-group-title {
  display: flex;
  align-items: baseline;
  gap: var(--openbot-space-2);
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
}
.marketplace-app-group-count {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-regular);
  font-variant-numeric: tabular-nums;
}
.marketplace-app-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  column-gap: var(--openbot-space-6);
  row-gap: var(--openbot-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.marketplace-app-row {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-2);
  border-radius: var(--openbot-radius-lg);
}
@media (hover: hover) and (pointer: fine) {
  .marketplace-app-row:hover {
    background: var(--openbot-bg-control-hover);
  }
  .marketplace-app-row:hover .marketplace-app-action[data-variant="secondary"]:not([data-disabled]) {
    background: var(--openbot-bg-control-active);
  }
}
.skills-marketplace .marketplace-app-row-hit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border-radius: inherit;
  background: transparent;
}
.skills-marketplace .marketplace-app-row-hit:hover:not(:disabled) {
  background: transparent;
}
.marketplace-app-row > .integration-logo-tile {
  --integration-tile: 40px;
  pointer-events: none;
}
.marketplace-app-row-copy {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: var(--openbot-space-0-5);
  pointer-events: none;
}
.marketplace-app-row-name {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.marketplace-app-row-tagline {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.marketplace-app-row-status {
  position: relative;
  display: inline-flex;
  flex: none;
}
.marketplace-app-row-status > .marketplace-done {
  height: var(--openbot-control-md);
  gap: var(--openbot-space-1-5);
  padding-inline: var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  --marketplace-done-icon: var(--openbot-icon-md);
  --marketplace-done-mark: var(--openbot-success);
}
.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;
  font-size: var(--openbot-text-md);
}
.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-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-plush {
  display: block;
  width: 160px;
  aspect-ratio: 1;
  pointer-events: none;
  user-select: none;
}
.marketplace-empty-plush > img, .marketplace-empty-plush > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.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);
}
.marketplace-skill-attention {
  color: var(--openbot-text-secondary);
}
.marketplace-skill-row > .marketplace-skill-mark {
  pointer-events: none;
}
.marketplace-skill-row-actions {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.marketplace-skill-group-head {
  display: flex;
  min-height: var(--openbot-control-md);
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.marketplace-skill-empty {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  border: 1px dashed var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  padding: var(--openbot-space-4);
}
:is(.marketplace-skill-picker-search, .marketplace-skill-page-search) > svg {
  width: var(--openbot-space-4);
  height: var(--openbot-space-4);
  flex: none;
}
.marketplace-skill-agents-trigger {
  gap: var(--openbot-space-1-5);
}
.marketplace-skill-stack {
  display: inline-flex;
}
.marketplace-skill-stack > :not(:first-child) {
  margin-inline-start: calc(var(--openbot-space-1) * -1);
}
.marketplace-skill-picker {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  font-size: var(--openbot-text-md);
}
.marketplace-skill-picker-search {
  margin-block-end: var(--openbot-space-1);
}
.marketplace-skill-picker-list {
  --marketplace-skill-fade-top: 0px;
  --marketplace-skill-fade-bottom: 0px;
  display: flex;
  max-height: calc(var(--openbot-space-1) * 90);
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex-direction: column;
  list-style: none;
  scrollbar-width: none;
  mask-image: linear-gradient( to bottom, var(--openbot-transparent), var(--openbot-text-primary) var(--marketplace-skill-fade-top), var(--openbot-text-primary) calc(100% - var(--marketplace-skill-fade-bottom)), var(--openbot-transparent) );
}
.marketplace-skill-picker-list::-webkit-scrollbar {
  display: none;
}
.marketplace-skill-picker-list.scroll-fade-top {
  --marketplace-skill-fade-top: calc(var(--openbot-space-1) * 6);
}
.marketplace-skill-picker-list.scroll-fade-bottom {
  --marketplace-skill-fade-bottom: calc(var(--openbot-space-1) * 6);
}
.marketplace-skill-picker-list:has(label.marketplace-skill-picker-row) {
  user-select: none;
}
.marketplace-skill-picker-row {
  display: flex;
  width: 100%;
  min-height: calc(var(--openbot-space-1) * 9);
  align-items: center;
  justify-content: flex-start;
  gap: var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
  padding-inline: var(--openbot-space-2);
  cursor: pointer;
  font-weight: inherit;
  text-align: start;
}
label.marketplace-skill-picker-row:hover {
  background: var(--openbot-hover);
}
.marketplace-skill-picker-list[data-dragging] label.marketplace-skill-picker-row:hover {
  background: none;
}
.marketplace-skill-picker-row[aria-current="true"] {
  background: var(--openbot-bg-control-active);
}
.marketplace-skill-picker-all {
  border-block-end: 1px solid var(--openbot-border);
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}
.marketplace-skill-picker-name {
  min-width: 0;
  overflow: hidden;
  flex: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.marketplace-skill-picker-agent {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: var(--openbot-space-1);
}
.marketplace-skill-picker-agent: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) - var(--openbot-space-1))) minmax(var(--agent-role-badge-collapsed-width), 1fr);
}
.marketplace-skill-picker-none {
  padding: var(--openbot-space-2);
}
.marketplace-skill-dialog-head {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-3);
  margin-block: calc(var(--openbot-space-2) * -1) calc(var(--openbot-space-1) * -1);
}
.marketplace-skill-dialog-head h2 {
  min-width: 0;
  overflow: hidden;
  flex: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.integration-wizard-dialog.marketplace-skill-agents-dialog {
  overflow: hidden;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
}
.marketplace-skill-agents-dialog .integration-wizard-form {
  min-height: 0;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
}
.marketplace-skill-agents-dialog .integration-wizard-body {
  display: flex;
  min-height: 0;
  flex-direction: column;
}
.marketplace-skill-agents-dialog .marketplace-skill-picker {
  min-height: 0;
}
.marketplace-skill-agents-dialog .marketplace-skill-picker-list {
  min-height: 0;
  flex: 1 1 auto;
}
.marketplace-skill-agents-dialog .integration-wizard-foot > .ui-button {
  flex-shrink: 0;
}
.marketplace-skill-agents-dialog .integration-wizard-foot > .marketplace-skill-dialog-submit {
  min-width: 0;
  flex-shrink: 1;
}
.marketplace-skill-dialog-submit > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.marketplace-skill-page-search {
  width: calc(var(--openbot-space-1) * 56);
}
.marketplace-skill-name {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
  min-width: 0;
}
.marketplace-skill-verified {
  flex: none;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-secondary);
}
.marketplace-skill-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--openbot-space-4);
}
.marketplace-skill-source .ui-sliding-tabs-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  white-space: nowrap;
}
.marketplace-skill-group-page {
  display: grid;
  align-content: start;
  gap: var(--openbot-space-4);
}
.marketplace-skill-group-bar {
  position: sticky;
  z-index: 1;
  top: 0;
  padding-block: var(--openbot-space-3);
  border-bottom: 1px solid var(--openbot-border);
  background: var(--openbot-bg-canvas);
}
.marketplace-skill-group-list {
  display: grid;
  gap: var(--openbot-space-3);
}
.marketplace-skill-featured {
  display: grid;
  gap: var(--openbot-space-3);
}
.marketplace-skill-featured-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--openbot-space-3);
}
.marketplace-skill-feature {
  isolation: isolate;
  grid-template-rows: auto auto 1fr auto;
  padding: var(--openbot-space-3);
}
.marketplace-skill-feature > :not(.marketplace-hitarea, .marketplace-skill-feature-art) {
  padding-inline: var(--openbot-space-1);
}
.marketplace-skill-feature-art {
  position: relative;
  display: grid;
  place-items: center;
  height: calc(var(--openbot-space-1) * 24);
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--openbot-radius-xl);
}
.marketplace-skill-feature-art > :not(.skill-preview-gradient) {
  position: relative;
}
.marketplace-skill-feature .marketplace-skill-verified {
  display: inline-block;
  margin-inline-start: var(--openbot-space-1);
  vertical-align: text-bottom;
}
.marketplace-agent-feature {
  isolation: isolate;
  grid-template-rows: auto auto 1fr auto;
}
.marketplace-agent-feature .marketplace-card-head {
  justify-content: space-between;
}
.marketplace-agent-feature-copy {
  display: grid;
  gap: var(--openbot-space-0-5);
  min-width: 0;
}
.marketplace-agent-feature .marketplace-card-body {
  align-self: start;
  min-height: 2lh;
}
.marketplace-agent-feature .marketplace-skill-verified {
  display: inline-block;
  margin-inline-start: var(--openbot-space-1);
  vertical-align: text-bottom;
}
.marketplace-agent-by {
  flex: 0 100 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.marketplace-agent-row .marketplace-skill-name {
  align-items: baseline;
}
.marketplace-agent-row .marketplace-app-row-name {
  min-width: 0;
}
.marketplace-agent-row .marketplace-skill-verified {
  align-self: center;
}
.marketplace-agent-trust {
  display: flex;
  gap: var(--openbot-space-1-5);
  align-items: center;
}
.marketplace-agent-trust svg {
  flex: none;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
html:active-view-transition-type(marketplace-forward, marketplace-back, marketplace-tab, marketplace-swap) {
  --marketplace-skill-blur: calc(var(--openbot-space-0-5) * 1.5);
  --marketplace-skill-blur-small: var(--openbot-space-0-5);
}
html:active-view-transition-type(marketplace-forward, marketplace-back, marketplace-tab, marketplace-swap) .skills-marketplace-body {
  view-transition-name: marketplace-page;
}
html:active-view-transition-type(marketplace-forward, marketplace-back, marketplace-tab, marketplace-swap) .skills-marketplace .marketplace-heading {
  view-transition-name: marketplace-crumbs;
}
html:active-view-transition-type(marketplace-swap) .marketplace-skill-source {
  view-transition-name: marketplace-skill-source;
}
html:active-view-transition-type( marketplace-forward, marketplace-back, marketplace-tab, marketplace-swap )::view-transition-group(root), ::view-transition-group(marketplace-page), ::view-transition-group(marketplace-crumbs) {
  animation-duration: var(--openbot-duration-overlay);
  animation-timing-function: var(--openbot-ease-out);
}
html:active-view-transition-type(marketplace-forward)::view-transition-old(marketplace-page) {
  --marketplace-skill-to: calc(var(--openbot-space-2) * -1);
  animation: marketplace-skill-page-out var(--openbot-duration-normal) var(--openbot-ease-out) both;
}
html:active-view-transition-type(marketplace-forward)::view-transition-new(marketplace-page) {
  --marketplace-skill-from: var(--openbot-space-2);
  animation: marketplace-skill-page-in var(--openbot-duration-overlay) var(--openbot-ease-out) both;
}
html:active-view-transition-type(marketplace-back)::view-transition-old(marketplace-page) {
  --marketplace-skill-to: var(--openbot-space-2);
  animation: marketplace-skill-page-out var(--openbot-duration-normal) var(--openbot-ease-out) both;
}
html:active-view-transition-type(marketplace-back)::view-transition-new(marketplace-page) {
  --marketplace-skill-from: calc(var(--openbot-space-2) * -1);
  animation: marketplace-skill-page-in var(--openbot-duration-overlay) var(--openbot-ease-out) both;
}
html:dir(rtl):active-view-transition-type(marketplace-forward)::view-transition-old(marketplace-page) {
  --marketplace-skill-to: var(--openbot-space-2);
}
html:dir(rtl):active-view-transition-type(marketplace-forward)::view-transition-new(marketplace-page) {
  --marketplace-skill-from: calc(var(--openbot-space-2) * -1);
}
html:dir(rtl):active-view-transition-type(marketplace-back)::view-transition-old(marketplace-page) {
  --marketplace-skill-to: calc(var(--openbot-space-2) * -1);
}
html:dir(rtl):active-view-transition-type(marketplace-back)::view-transition-new(marketplace-page) {
  --marketplace-skill-from: var(--openbot-space-2);
}
html:active-view-transition-type(marketplace-tab)::view-transition-old(marketplace-page) {
  animation: marketplace-skill-blur-out var(--openbot-duration-normal) var(--openbot-ease-out) both;
}
html:active-view-transition-type(marketplace-tab)::view-transition-new(marketplace-page) {
  animation: marketplace-skill-rise-in var(--openbot-duration-overlay) var(--openbot-ease-out) both;
}
html:active-view-transition-type(marketplace-swap)::view-transition-old(marketplace-page) {
  animation: marketplace-skill-blur-out var(--openbot-duration-fast) var(--openbot-ease-out) both;
}
html:active-view-transition-type(marketplace-swap)::view-transition-new(marketplace-page) {
  animation: marketplace-skill-blur-in var(--openbot-duration-normal) var(--openbot-ease-out) both;
}
::view-transition-old(marketplace-skill-source) {
  animation: none;
  opacity: 0;
}
::view-transition-new(marketplace-skill-source) {
  animation: none;
}
html:active-view-transition-type(marketplace-group) [data-marketplace-shared] :is(.marketplace-app-group-title, .marketplace-browse-title) {
  view-transition-name: marketplace-group-title;
}
html:active-view-transition-type(marketplace-group) [data-marketplace-shared] .marketplace-app-row:nth-child(1) {
  view-transition-name: marketplace-group-row-1;
}
html:active-view-transition-type(marketplace-group) [data-marketplace-shared] .marketplace-app-row:nth-child(2) {
  view-transition-name: marketplace-group-row-2;
}
html:active-view-transition-type(marketplace-group) [data-marketplace-shared] .marketplace-app-row:nth-child(3) {
  view-transition-name: marketplace-group-row-3;
}
html:active-view-transition-type(marketplace-group) [data-marketplace-shared] .marketplace-app-row:nth-child(4) {
  view-transition-name: marketplace-group-row-4;
}
html:active-view-transition-type(marketplace-group) [data-marketplace-shared] .marketplace-app-row:nth-child(5) {
  view-transition-name: marketplace-group-row-5;
}
html:active-view-transition-type(marketplace-group) [data-marketplace-shared] .marketplace-app-row:nth-child(6) {
  view-transition-name: marketplace-group-row-6;
}
::view-transition-group(marketplace-group-title), ::view-transition-group(marketplace-group-row-1), ::view-transition-group(marketplace-group-row-2), ::view-transition-group(marketplace-group-row-3), ::view-transition-group(marketplace-group-row-4), ::view-transition-group(marketplace-group-row-5), ::view-transition-group(marketplace-group-row-6) {
  animation-duration: var(--openbot-duration-overlay);
  animation-timing-function: var(--openbot-ease-out);
}
::view-transition-old(marketplace-group-title), ::view-transition-new(marketplace-group-title) {
  width: auto;
  height: 100%;
}
::view-transition-old(marketplace-group-title) {
  animation: marketplace-skill-blur-out var(--openbot-duration-fast) var(--openbot-ease-out) both;
}
::view-transition-new(marketplace-group-title) {
  animation: marketplace-skill-blur-in var(--openbot-duration-normal) var(--openbot-ease-out) both;
}
::view-transition-old(marketplace-group-row-1), ::view-transition-old(marketplace-group-row-2), ::view-transition-old(marketplace-group-row-3), ::view-transition-old(marketplace-group-row-4), ::view-transition-old(marketplace-group-row-5), ::view-transition-old(marketplace-group-row-6) {
  animation: none;
}
::view-transition-new(marketplace-group-row-1), ::view-transition-new(marketplace-group-row-2), ::view-transition-new(marketplace-group-row-3), ::view-transition-new(marketplace-group-row-4), ::view-transition-new(marketplace-group-row-5), ::view-transition-new(marketplace-group-row-6) {
  animation: marketplace-skill-blur-in var(--openbot-duration-overlay) var(--openbot-ease-out) both;
}
::view-transition-old(marketplace-crumbs) {
  animation: marketplace-skill-blur-out var(--openbot-duration-fast) var(--openbot-ease-out) both;
}
::view-transition-new(marketplace-crumbs) {
  animation: marketplace-skill-blur-in var(--openbot-duration-normal) var(--openbot-ease-out) both;
}
@keyframes marketplace-skill-page-out {
  to {
    opacity: 0;
    transform: translateX(var(--marketplace-skill-to));
    filter: blur(var(--marketplace-skill-blur));
  }
}
@keyframes marketplace-skill-page-in {
  from {
    opacity: 0;
    transform: translateX(var(--marketplace-skill-from));
    filter: blur(var(--marketplace-skill-blur));
  }
}
@keyframes marketplace-skill-rise-in {
  from {
    opacity: 0;
    transform: translateY(var(--openbot-space-2));
    filter: blur(var(--marketplace-skill-blur));
  }
}
@keyframes marketplace-skill-blur-out {
  to {
    opacity: 0;
    filter: blur(var(--marketplace-skill-blur-small));
  }
}
@keyframes marketplace-skill-blur-in {
  from {
    opacity: 0;
    filter: blur(var(--marketplace-skill-blur-small));
  }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(marketplace-page), ::view-transition-group(marketplace-crumbs), ::view-transition-old(marketplace-page), ::view-transition-new(marketplace-page), ::view-transition-old(marketplace-crumbs), ::view-transition-new(marketplace-crumbs), ::view-transition-group(marketplace-group-title), ::view-transition-old(marketplace-group-title), ::view-transition-new(marketplace-group-title), ::view-transition-group(marketplace-group-row-1), ::view-transition-group(marketplace-group-row-2), ::view-transition-group(marketplace-group-row-3), ::view-transition-group(marketplace-group-row-4), ::view-transition-group(marketplace-group-row-5), ::view-transition-group(marketplace-group-row-6), ::view-transition-new(marketplace-group-row-1), ::view-transition-new(marketplace-group-row-2), ::view-transition-new(marketplace-group-row-3), ::view-transition-new(marketplace-group-row-4), ::view-transition-new(marketplace-group-row-5), ::view-transition-new(marketplace-group-row-6) {
    animation: none;
  }
}
@media (max-width: 720px) {
  .skills-marketplace {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
  }
  .marketplace-nav {
    grid-row: 2;
    overflow-x: auto;
    padding: var(--openbot-space-2) var(--openbot-space-3);
    border-inline-end: 0;
    border-bottom: 1px solid var(--openbot-border);
  }
  .marketplace-nav-title, .marketplace-nav-group {
    display: none;
  }
  .marketplace-nav-list {
    grid-auto-columns: max-content;
    grid-auto-flow: column;
  }
  .skills-marketplace-body {
    grid-row: 3;
    grid-column: 1;
  }
}
@media (max-width: 860px) {
  .skills-marketplace {
    --marketplace-inset: var(--openbot-space-4);
  }
  .marketplace-head {
    flex-wrap: wrap;
  }
}
.skills-marketplace .ui-button > svg, .marketplace-search > svg {
  width: 16px;
  height: 16px;
}
.marketplace-app-action[data-status="attention"] > svg {
  color: var(--openbot-warning-text);
}
:is(.marketplace-skill-agents-trigger, .marketplace-skill-picker-row) .agent-avatar > svg {
  width: 128%;
  height: 128%;
}
.marketplace-skill-source .ui-sliding-tabs-trigger svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: none;
}
.marketplace-agent-update-frame {
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  overflow: hidden;
}
.ui-confirm-dialog-body .marketplace-agent-update-list {
  --marketplace-agent-update-fade-top: 0px;
  --marketplace-agent-update-fade-bottom: 0px;
  display: flex;
  max-height: calc(var(--openbot-space-8) * 7);
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  flex-direction: column;
  list-style: none;
  scrollbar-width: none;
  mask-image: linear-gradient( to bottom, var(--openbot-transparent), var(--openbot-text-primary) var(--marketplace-agent-update-fade-top), var(--openbot-text-primary) calc(100% - var(--marketplace-agent-update-fade-bottom)), var(--openbot-transparent) );
}
.marketplace-agent-update-list::-webkit-scrollbar {
  display: none;
}
.marketplace-agent-update-list.scroll-fade-top {
  --marketplace-agent-update-fade-top: calc(var(--openbot-space-1) * 6);
}
.marketplace-agent-update-list.scroll-fade-bottom {
  --marketplace-agent-update-fade-bottom: calc(var(--openbot-space-1) * 6);
}
.marketplace-agent-update-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-2) var(--openbot-space-3);
}
.marketplace-agent-update-row + .marketplace-agent-update-row {
  border-top: 1px solid var(--openbot-border);
}
.marketplace-agent-update-text {
  display: grid;
  min-width: 0;
}
.marketplace-agent-update-name {
  overflow: hidden;
  color: var(--openbot-text-secondary);
  font-weight: var(--openbot-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.marketplace-agent-update-state {
  color: var(--openbot-text-dim);
  font-size: var(--openbot-text-sm);
}
.marketplace-agent-update-row[data-replace] .marketplace-agent-update-state {
  color: var(--openbot-warning-text);
}
.marketplace-agent-update-choice {
  display: inline-flex;
  flex: none;
  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;
}
.marketplace-agent-update-option {
  display: grid;
}
.marketplace-agent-update-option-label {
  display: inline-flex;
  height: var(--openbot-control-sm);
  align-items: center;
  border-radius: var(--openbot-radius-sm);
  padding: 0 var(--openbot-space-3);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--openbot-duration-fast) ease, color var(--openbot-duration-fast) ease;
}
.marketplace-agent-update-option-label:hover, .marketplace-agent-update-option[data-checked] .marketplace-agent-update-option-label {
  color: var(--openbot-text-primary);
}
.marketplace-agent-update-option[data-checked] .marketplace-agent-update-option-label {
  background: var(--openbot-tabs-pill-bg);
}
.marketplace-agent-update-option:has(input:focus-visible) .marketplace-agent-update-option-label {
  box-shadow: var(--openbot-focus-ring);
}
.marketplace-agent-update-option[data-choice="replace"][data-checked] .marketplace-agent-update-option-label {
  color: var(--openbot-warning-text);
}
.marketplace-agent-update-others {
  margin: var(--openbot-space-2) 0 0;
  color: var(--openbot-text-dim);
  font-size: var(--openbot-text-sm);
}
.chat-color-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  margin-inline-start: auto;
  border-radius: var(--openbot-radius-pill);
  background: var(--chat-color-value);
  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) 18%, transparent);
  }
}
.chat-color-dot.chat-color-dot-open {
  outline: 1px solid var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    outline: 1px solid color-mix(in srgb, var(--openbot-text-primary) 40%, transparent);
  }
  outline-offset: 2px;
}
.chat-color-own-trigger .chat-color-dot {
  margin-inline: 0 var(--openbot-space-2);
}
.chat-color-own-trigger .ui-select-value {
  flex: 1 1 auto;
  text-align: start;
}
.chat-color-popover {
  --chat-color-shift: -6px;
  position: fixed;
  z-index: var(--openbot-layer-popover);
  padding: var(--openbot-space-3);
  border-radius: var(--ui-menu-radius);
  background: var(--ui-menu-bg);
  box-shadow: 0 0 0 1px var(--ui-menu-edge);
  color: var(--openbot-text-primary);
  animation: chat-color-popover-in var(--openbot-duration-normal) var(--openbot-ease-out) both;
}
@keyframes chat-color-popover-in {
  from {
    opacity: 0;
    transform: translateY(var(--chat-color-shift)) scale(0.96);
  }
}
.chat-color-picker, .chat-color-picker-presets {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}
.chat-color-picker {
  --chat-color-edge: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --chat-color-edge: color-mix(in srgb, var(--openbot-text-primary) 11%, transparent);
  }
  --chat-color-edge-hover: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --chat-color-edge-hover: color-mix(in srgb, var(--openbot-text-primary) 20%, transparent);
  }
  --chat-color-inset: inset 0 0 0 1px var(--openbot-color-picker-dark);
  @supports (color: color-mix(in lab, red, red)) {
    --chat-color-inset: inset 0 0 0 1px color-mix(in srgb, var(--openbot-color-picker-dark) 10%, transparent);
  }
  position: relative;
  display: grid;
  width: 264px;
  gap: var(--openbot-space-3);
}
.chat-color-picker-row {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
}
.chat-color-picker-area, .chat-color-picker-hue, .chat-color-picker-row.chat-color-picker-fields {
  direction: ltr;
}
.chat-color-picker-row.chat-color-picker-fields {
  gap: var(--openbot-space-1-5);
}
.chat-color-picker-area {
  position: relative;
  height: 160px;
  border-radius: var(--openbot-radius-lg);
  background: linear-gradient(to top, var(--openbot-color-picker-dark), transparent), linear-gradient(to right, var(--openbot-color-picker-light), var(--chat-color-pure));
  cursor: crosshair;
  touch-action: none;
}
.chat-color-picker-ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--chat-color-inset);
  pointer-events: none;
}
.chat-color-picker-track {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.chat-color-picker-thumb {
  position: absolute;
  border: 0;
  padding: 0;
  top: calc(var(--chat-color-y) * 1%);
  left: calc(var(--chat-color-x) * 1%);
  width: 18px;
  height: 18px;
  border-radius: var(--openbot-radius-pill);
  background: transparent;
  outline: 0;
  pointer-events: auto;
  translate: -50% -50%;
  transition: top var(--chat-color-layout-duration) var(--chat-color-layout-ease), left var(--chat-color-layout-duration) var(--chat-color-layout-ease);
}
.chat-color-picker-hue .chat-color-picker-thumb {
  top: 50%;
}
.chat-color-picker-dragging .chat-color-picker-thumb {
  transition: none;
}
.chat-color-picker-thumb:focus-visible {
  outline: 2px solid var(--openbot-text-primary);
  outline-offset: 2px;
}
.chat-color-picker-thumb-dot {
  position: absolute;
  inset: 0;
  border: 3px solid var(--openbot-color-picker-light);
  border-radius: inherit;
  background: var(--chat-color-value);
  box-shadow: 0 0 0 1px var(--openbot-color-picker-dark);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--openbot-color-picker-dark) 12%, transparent);
  }
  transition: scale var(--chat-color-press-duration) var(--chat-color-press-ease);
}
.chat-color-picker-dragging .chat-color-picker-thumb-dot {
  scale: 0.78;
}
.chat-color-picker-loupe {
  position: absolute;
  z-index: 1;
  bottom: calc(100% + 12px);
  left: 50%;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  transform: rotate(var(--chat-color-tilt));
  transform-origin: 50% 130%;
  transition: transform 220ms var(--openbot-ease-out);
  animation: chat-color-loupe-lift var(--chat-color-lift-duration) var(--chat-color-lift-ease) both;
}
.chat-color-picker-loupe-drop {
  position: absolute;
  inset: 0;
  border: 3px solid var(--openbot-color-picker-light);
  border-radius: var(--openbot-radius-pill) var(--openbot-radius-pill) var(--openbot-radius-pill) 0;
  background: var(--chat-color-value);
  box-shadow: 0 0 0 1px var(--openbot-color-picker-dark);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--openbot-color-picker-dark) 10%, transparent);
  }
  rotate: -45deg;
}
@keyframes chat-color-loupe-lift {
  from {
    opacity: 0;
    translate: 0 16px;
    scale: 0.3;
  }
}
.chat-color-picker-hue {
  position: relative;
  height: 14px;
  flex: 1 1 auto;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-color-picker-spectrum);
  cursor: pointer;
  touch-action: none;
}
.chat-color-picker-hue-rail {
  position: absolute;
  inset: 0 9px;
}
.chat-color-picker-icon-button, .chat-color-picker-format {
  display: inline-grid;
  height: var(--openbot-control-lg);
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--chat-color-edge);
  border-radius: var(--openbot-radius-md);
  outline: 0;
  background: transparent;
  padding: 0;
  color: var(--openbot-text-muted);
  transition: color var(--openbot-duration-hover) var(--openbot-ease-out), border-color var(--openbot-duration-hover) var(--openbot-ease-out), scale var(--chat-color-press-duration) var(--chat-color-press-ease);
}
.chat-color-picker-icon-button {
  width: var(--openbot-control-lg);
}
.chat-color-picker-format {
  width: 48px;
  overflow: hidden;
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.chat-color-picker-icon-button:hover, .chat-color-picker-format:hover {
  color: var(--openbot-text-primary);
}
.chat-color-picker-icon-button:active {
  scale: 0.92;
}
.chat-color-picker-icon-button:focus-visible, .chat-color-picker-format:focus-visible {
  border-color: var(--chat-color-edge-hover);
  color: var(--openbot-text-primary);
}
.chat-color-picker-icon-button > svg {
  width: 16px;
  height: 16px;
}
.chat-color-picker-format-label {
  grid-area: 1 / 1;
  animation: chat-color-format-in var(--chat-color-press-duration) var(--chat-color-press-ease) both;
}
@keyframes chat-color-format-in {
  from {
    opacity: 0;
    translate: 0 10px;
  }
}
.chat-color-picker-hex {
  position: relative;
  min-width: 0;
  flex: 1 1 auto;
}
.chat-color-picker-hex-hash {
  position: absolute;
  top: 50%;
  left: var(--openbot-space-3);
  translate: 0 -50%;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-lg);
  pointer-events: none;
}
.chat-color-picker-field {
  width: 100%;
  height: var(--openbot-control-lg);
  min-width: 0;
  border: 1px solid var(--chat-color-edge);
  border-radius: var(--openbot-radius-md);
  outline: 0;
  background: transparent;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-variant-numeric: tabular-nums;
  transition: border-color var(--openbot-duration-hover) var(--openbot-ease-out);
}
.chat-color-picker-field:focus-visible {
  border-color: var(--chat-color-edge-hover);
}
.chat-color-picker-field.chat-color-picker-hex-input {
  padding: 0 var(--openbot-space-3) 0 var(--openbot-space-6);
  font-family: var(--openbot-font-mono);
  text-transform: uppercase;
}
.chat-color-picker-field.chat-color-picker-hex-input::placeholder {
  color: var(--openbot-text-placeholder);
  text-transform: none;
}
.chat-color-picker-channels {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  gap: var(--openbot-space-1-5);
}
.chat-color-picker-channel {
  position: relative;
  min-width: 0;
  flex: 1 1 0;
}
.chat-color-picker-field.chat-color-picker-channel-input {
  padding: 0 var(--openbot-space-2) 0 var(--openbot-space-6);
}
.chat-color-picker-channel-label {
  position: absolute;
  top: 50%;
  left: var(--openbot-space-3);
  translate: 0 -50%;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  pointer-events: none;
}
.chat-color-picker-swatch {
  width: var(--openbot-control-lg);
  height: var(--openbot-control-lg);
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-md);
  background: var(--chat-color-value);
  box-shadow: var(--chat-color-inset);
  transition: background-color 150ms var(--openbot-ease-out);
}
.chat-color-picker-presets {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 24px);
  justify-content: space-between;
  row-gap: var(--openbot-space-2);
  padding: var(--openbot-space-1) var(--openbot-space-0-5) 0;
}
.chat-color-picker-preset {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  outline: 0;
  background: var(--chat-color-value);
  box-shadow: var(--chat-color-inset);
  padding: 0;
  cursor: pointer;
  transition: scale var(--chat-color-press-duration) var(--chat-color-press-ease);
}
.chat-color-picker-preset:active {
  scale: 0.88;
}
.chat-color-picker-preset:focus-visible {
  outline: 2px solid var(--openbot-text-primary);
  outline-offset: 3px;
}
.chat-color-picker-preset-ring {
  position: absolute;
  top: -3px;
  left: -3px;
  width: 30px;
  height: 30px;
  border: 2px solid var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    border: 2px solid color-mix(in srgb, var(--openbot-text-primary) 70%, transparent);
  }
  border-radius: var(--openbot-radius-pill);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}
.chat-color-picker-preset-ring[data-visible="true"] {
  opacity: 1;
}
.chat-color-dot.chat-color-none, .chat-color-picker-swatch.chat-color-none, .chat-color-picker-preset.chat-color-none {
  background: linear-gradient( to top right, transparent calc(50% - 1px), var(--openbot-text-muted) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px) ), var(--openbot-bg-control);
  box-shadow: inset 0 0 0 1px var(--chat-color-edge, var(--ui-menu-edge));
}
@media (prefers-reduced-motion: reduce) {
  .chat-color-picker .chat-color-picker-loupe, .chat-color-picker .chat-color-picker-format-label {
    animation: none;
  }
  .chat-color-popover {
    animation-name: ui-select-content-fade-in;
  }
  .chat-color-picker .chat-color-picker-thumb, .chat-color-picker .chat-color-picker-thumb-dot, .chat-color-picker .chat-color-picker-preset, .chat-color-picker .chat-color-picker-preset-ring, .chat-color-picker .chat-color-picker-icon-button, .chat-color-picker .chat-color-picker-format {
    transition: none;
  }
}
.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);
}
.ui-select-item-label:has(.sound-choice-item) {
  flex: 1;
}
.sound-choice-item {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.sound-choice-item-play {
  flex: none;
}
.sound-choice-item-name {
  overflow: hidden;
  text-overflow: ellipsis;
}
.notification-scope-title {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.notification-matrix {
  display: grid;
  gap: var(--openbot-space-3);
}
.notification-matrix-server-mark {
  --server-gradient-logo-size: 32px;
  --server-gradient-logo-radius: var(--openbot-radius-md);
}
.notification-matrix-server-mark > img {
  width: 32px;
  height: 32px;
  border-radius: var(--openbot-radius-md);
}
.notification-matrix-agent > .ui-item-media {
  width: 32px;
  justify-content: center;
}
.notification-matrix-level {
  min-width: 72px;
}
.notification-matrix-add {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--openbot-space-4);
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border: 0;
  background: transparent;
  color: var(--openbot-text-muted);
  font: inherit;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
  text-align: start;
  cursor: pointer;
}
.notification-matrix-add:hover, .notification-matrix-add[data-expanded] {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}
.notification-matrix-add:focus-visible {
  outline: 1px solid var(--openbot-border-strong);
  outline-offset: -1px;
}
.notification-matrix-add-icon {
  display: inline-flex;
  width: 32px;
  height: 32px;
  flex: none;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
}
.notification-matrix-add-icon > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.ui-item-description.notification-matrix-notes {
  white-space: normal;
}
.plan-start-popover {
  display: grid;
  width: 260px;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-3);
}
.plan-start-popover-title, .plan-start-popover-note {
  margin: 0;
}
.plan-start-popover-title {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: 500;
}
.plan-start-popover-controls {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.plan-start-amount {
  width: 56px;
  text-align: end;
}
.plan-start-popover-note {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.plan-start-popover-note[data-invalid] {
  color: var(--openbot-danger);
}
.plan-start-popover-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
}
.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-inline-end: 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-inline-start: 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-docs {
  position: absolute;
  top: var(--openbot-space-3);
  inset-inline-end: 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-docs > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.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);
}
.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-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);
}
:is(.integration-wizard-body, .provider-code-login-body) > :is(.mcp-sign-in-relay-open, .mcp-sign-in-relay-form) {
  margin-top: 0;
}
.integration-wizard-body > .mcp-sign-in-relay-open {
  justify-self: start;
}
.mcp-sign-in-relay-row {
  display: flex;
  gap: var(--openbot-space-2);
}
.mcp-sign-in-relay-row > .ui-input {
  flex: 1;
  min-width: 0;
}
.provider-update-toast-logo {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  overflow: visible;
  fill: var(--openbot-provider-current);
}
.ui-toaster [data-sonner-toast] [data-action]:has(.provider-update-toast-action[data-idle="true"]) {
  display: none;
}
.ui-toaster .provider-update-toast[data-sonner-toast][data-styled="true"]:has(.provider-update-toast-action[data-idle="true"]) {
  padding-bottom: var(--openbot-space-3);
}
.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);
}
.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-mark > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.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-row-inputs.custom-provider-row-triple {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.6fr) auto;
}
.custom-provider-row-inputs.custom-provider-row-quad {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(9ch, 0.8fr) minmax(9ch, 0.8fr) auto;
}
.custom-provider-efforts {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--openbot-space-1) var(--openbot-space-2);
}
.custom-provider-effort {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  cursor: pointer;
}
.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-provider-preset-chevron:dir(rtl), .custom-provider-header .ui-icon-button > svg[class~="lucide-arrow-left"]:dir(rtl) {
  transform: scaleX(-1);
}
.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;
}
.custom-provider-harness {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.custom-provider-harness-item .ui-select-item-label {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--openbot-space-3);
}
.custom-provider-harness-item[data-action]:not([data-selected]) {
  padding-inline-end: var(--openbot-space-1-5);
}
.custom-provider-harness-action {
  margin-inline-start: auto;
}
.custom-provider-harness-button {
  gap: var(--openbot-space-1);
  font-size: inherit;
  pointer-events: none;
}
.custom-provider-harness-item .custom-provider-harness-button svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.custom-provider-harness-value {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--openbot-space-3);
}
.custom-provider-harness-progress {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  margin-inline-start: auto;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.browser-profiles-panel {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-3);
}
.browser-profiles-row {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: var(--openbot-space-2);
}
.browser-profiles-name {
  min-width: 0;
  flex: 1;
}
.ui-select-item.browser-profile-select-new {
  margin-top: calc(var(--openbot-space-1) * 2 + 1px);
}
.ui-select-item.browser-profile-select-new::before {
  position: absolute;
  top: calc(-1 * var(--openbot-space-1) - 1px);
  right: calc(-1 * var(--openbot-space-1));
  left: calc(-1 * var(--openbot-space-1));
  border-top: 1px solid var(--openbot-border);
  content: "";
}
.ui-select-item.browser-profile-select-new[hidden] {
  display: none;
}
.browser-profile-select-option .ui-select-item-label, .browser-profile-select-value {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
}
.browser-profile-select-proxy {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-1);
  color: var(--openbot-text-muted);
}
.browser-profile-select-proxy svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
}
.browser-profile-select-proxy span {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser-profile-select-mark {
  display: inline-flex;
  width: var(--openbot-icon-sm);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}
.browser-profile-select-mark svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.browser-profile-shared-mark {
  display: inline-flex;
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  align-items: center;
  justify-content: center;
}
.browser-profile-color-trigger .browser-profile-dot {
  width: 12px;
  height: 12px;
}
.browser-profile-color-option {
  gap: var(--openbot-space-2);
}
.browser-profile-color-option > span:not(.browser-profile-dot) {
  flex: 1 1 auto;
}
.browser-profile-select-form {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
}
.browser-profile-select-form .browser-profiles-name {
  font-size: var(--openbot-text-sm);
}
.browser-profile-select-form .ui-text {
  padding-inline: var(--openbot-space-2);
}
.browser-profiles-panel:has(> .ui-settings-section) {
  gap: var(--openbot-space-6);
}
.browser-profiles-panel > .ui-settings-section {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-3);
}
.browser-profiles-panel > .ui-settings-section .browser-profiles-row {
  flex: none;
}
.browser-proxy-badge svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.browser-proxy-icon {
  display: inline-flex;
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  align-items: center;
  justify-content: center;
  color: var(--openbot-text-muted);
}
.browser-proxy-icon svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.browser-proxy-submenu-chevron {
  margin-inline-start: auto;
  color: var(--openbot-text-muted);
}
.vault-panel {
  display: grid;
  gap: var(--openbot-space-6);
  min-width: 0;
}
.vault-truncate, .ui-item-content > .vault-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vault-icon {
  display: inline-grid;
  flex: none;
  place-items: center;
}
.vault-icon svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.vault-letter {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
}
.vault-card-logo {
  display: inline-grid;
  flex: none;
  width: var(--integration-tile, 36px);
  height: calc(var(--integration-tile, 36px) * 2 / 3);
  place-items: center;
  border: 1px solid var(--openbot-paper-border);
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-paper);
  color: var(--openbot-paper-text);
}
.vault-card-logo > svg {
  width: 70%;
  height: 70%;
}
.vault-avatar {
  display: inline-grid;
  flex: none;
  width: var(--integration-tile, 36px);
  height: var(--integration-tile, 36px);
  place-items: center;
  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);
}
.vault-avatar > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.vault-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-3);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--openbot-space-1);
}
.vault-count {
  margin-inline-start: var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
  font-variant-numeric: tabular-nums;
}
.vault-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--openbot-space-3) var(--openbot-space-4);
}
.vault-wide {
  grid-column: 1 / -1;
}
.vault-fill-sites {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}
.vault-fill-sites > .ui-label {
  margin-block-end: var(--openbot-space-1-5);
  padding: 0;
}
.vault-sites {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.vault-site {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  min-width: 0;
}
.vault-secret {
  position: relative;
  display: flex;
  align-items: center;
}
.vault-secret .ui-input {
  flex: 1;
  padding-inline-end: var(--openbot-space-8);
}
.vault-secret .ui-icon-button {
  position: absolute;
  inset-inline-end: var(--openbot-space-1);
}
.vault-toolbar .server-settings-search {
  align-self: stretch;
}
.vault-toolbar .server-settings-search .ui-input {
  height: 100%;
  border-color: var(--openbot-transparent);
  font-size: var(--openbot-text-md);
}
.vault-toolbar .server-settings-search .ui-input:focus-visible {
  border-color: var(--openbot-border-focus);
}
.vault-dialog.ui-confirm-dialog {
  width: min(520px, 100%);
}
.vault-dialog-form {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.vault-dialog-header {
  display: flex;
  gap: var(--openbot-space-3);
  align-items: center;
  padding-block: var(--openbot-space-4) 0;
  padding-inline: var(--openbot-space-6) var(--openbot-space-4);
}
.vault-dialog-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vault-dialog-body {
  display: grid;
  gap: var(--openbot-space-3);
  min-height: 0;
  overflow-y: auto;
  padding: var(--openbot-space-4) var(--openbot-space-6) var(--openbot-space-6);
}
.vault-link-accounts {
  display: grid;
  gap: var(--openbot-space-2);
  margin-bottom: var(--openbot-space-3);
}
.vault-group-label {
  padding: 0 var(--openbot-space-3);
}
.vault-link-logo > svg {
  width: 92%;
  height: 92%;
}
.ui-item-content > .vault-link-error {
  color: var(--openbot-danger-text);
}
.vault-request {
  max-width: 520px;
}
.vault-request-logo {
  display: flex;
  flex: none;
}
.vault-two-step-digits {
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-lg);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--openbot-text-primary);
}
.vault-two-step-timer.ui-radial-progress {
  width: var(--openbot-icon-md);
}
.vault-two-step-code {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.vault-two-step-code[data-size="lg"] {
  gap: var(--openbot-space-3);
  justify-content: center;
  padding: var(--openbot-space-4) 0;
}
.vault-two-step-code[data-size="lg"] .vault-two-step-digits {
  font-size: var(--openbot-text-3xl);
}
.vault-two-step-code[data-size="lg"] .vault-two-step-timer.ui-radial-progress {
  width: var(--openbot-icon-lg, 20px);
}
.vault-two-step-row-code {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-2);
  height: auto;
  border-radius: var(--openbot-radius-sm);
  padding: var(--openbot-space-1) var(--openbot-space-2);
  color: inherit;
}
.vault-two-step-setup {
  display: grid;
  gap: var(--openbot-space-3);
}
.vault-two-step-or {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.vault-two-step-or::before, .vault-two-step-or::after {
  flex: 1;
  height: 1px;
  background: var(--openbot-border);
  content: "";
}
.vault-two-step-check {
  text-align: center;
}
.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-template-row > svg[class~="lucide-chevron-right"]:dir(rtl), .agent-template-skill-toggle > svg[class~="lucide-chevron-right"]:dir(rtl), .agent-template-detail-header .ui-icon-button > svg[class~="lucide-arrow-left"]:dir(rtl) {
  transform: scaleX(-1);
}
.agent-delete-undo-toast-host {
  width: var(--width);
}
.agent-delete-undo-toast {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--openbot-space-3);
  overflow: hidden;
  padding: var(--openbot-space-3) var(--openbot-space-4) var(--openbot-space-2);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-surface-raised);
  box-shadow: 0 0 0 1px var(--openbot-border);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
}
.agent-delete-undo-toast-actions {
  grid-column: 1 / -1;
}
.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;
}
.github-star-toast-host {
  width: var(--width);
}
.github-star-toast {
  position: relative;
  display: grid;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-4);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-surface-raised);
  box-shadow: 0 0 0 1px var(--openbot-border);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.github-star-toast:has(.github-star-toast-actions) {
  padding-bottom: var(--openbot-space-2);
}
.github-star-toast-head {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  padding-inline-end: var(--openbot-space-1);
}
.github-star-toast-head > strong {
  font-weight: var(--openbot-weight-semibold);
  text-wrap: balance;
}
.github-star-toast-mark {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  flex: none;
}
.github-star-toast-star {
  color: var(--openbot-star-edge);
  fill: var(--openbot-star);
}
.github-star-toast-body {
  margin: 0;
  padding-inline-start: calc(var(--openbot-icon-lg) + var(--openbot-space-2));
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-wrap: pretty;
}
.github-star-toast-actions {
  margin-top: var(--openbot-space-1);
}
.social-follow-toast-host {
  width: var(--width);
}
.social-follow-toast {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: var(--openbot-space-3);
  padding: var(--openbot-space-4);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-surface-raised);
  box-shadow: 0 0 0 1px var(--openbot-border);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
}
.social-follow-toast-plush {
  position: relative;
  display: inline-flex;
  animation: social-follow-plush-hop 560ms var(--openbot-ease-out) 120ms both;
}
.social-follow-plush {
  --ui-plush-size: 56px;
  display: inline-flex;
  flex: none;
  transition: rotate var(--openbot-duration-normal) var(--openbot-ease-out), translate var(--openbot-duration-normal) var(--openbot-ease-out);
}
.social-follow-toast-plush[data-face="wide"] .social-follow-plush {
  rotate: 6deg;
  translate: 2px -2px;
}
.social-follow-toast-plush[data-face="happy"] .social-follow-plush {
  animation: social-follow-plush-bounce 520ms var(--openbot-ease-out);
}
.social-follow-toast-main {
  display: grid;
  gap: var(--openbot-space-3);
  min-width: 0;
}
.social-follow-toast-copy {
  display: grid;
  gap: var(--openbot-space-0-5);
  padding-inline-end: var(--openbot-space-1);
}
.social-follow-toast-copy strong {
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  font-weight: var(--openbot-weight-semibold);
  text-wrap: balance;
}
.social-follow-toast-copy p {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-wrap: pretty;
}
.social-follow-toast-copy[data-thanks] {
  animation: social-follow-rise var(--openbot-duration-overlay) var(--openbot-ease-out) both;
}
.social-follow-networks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.social-follow-networks li {
  animation: social-follow-rise var(--openbot-duration-overlay) var(--openbot-ease-out) both;
}
.social-follow-networks li:nth-child(1) {
  animation-delay: 160ms;
}
.social-follow-networks li:nth-child(2) {
  animation-delay: 190ms;
}
.social-follow-networks li:nth-child(3) {
  animation-delay: 220ms;
}
.social-follow-networks li:nth-child(4) {
  animation-delay: 250ms;
}
.social-follow-networks li:nth-child(5) {
  animation-delay: 280ms;
}
.social-follow-networks li:nth-child(6) {
  animation-delay: 310ms;
}
.social-follow-networks li:nth-child(7) {
  animation-delay: 340ms;
}
.social-follow-toast .social-follow-toast-follow {
  justify-content: flex-start;
  margin-inline-end: 0;
  animation: social-follow-rise var(--openbot-duration-overlay) var(--openbot-ease-out) 120ms both;
}
.social-follow-toast .social-follow-network {
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-secondary);
  transition: background var(--openbot-duration-fast) var(--openbot-ease-out), color var(--openbot-duration-fast) var(--openbot-ease-out), translate var(--openbot-duration-normal) var(--openbot-ease-out), scale var(--openbot-duration-fast) var(--openbot-ease-out);
}
.social-follow-toast .social-follow-network:hover {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
  translate: 0 -2px;
}
.social-follow-toast .social-follow-network:active {
  scale: 0.92;
}
.social-follow-mark {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: none;
}
.social-follow-hearts {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.social-follow-heart {
  position: absolute;
  fill: currentColor;
  top: 0;
  left: 50%;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-beam-pink);
  opacity: 0;
  animation: social-follow-heart 1100ms var(--openbot-ease-out) forwards;
}
.social-follow-heart[data-index="0"] {
  --social-follow-heart-x: -18px;
  animation-delay: 80ms;
}
.social-follow-heart[data-index="1"] {
  --social-follow-heart-x: 2px;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.social-follow-heart[data-index="2"] {
  --social-follow-heart-x: 18px;
  animation-delay: 180ms;
}
@keyframes social-follow-plush-hop {
  0% {
    opacity: 0;
    translate: 0 10px;
    scale: 0.7;
    rotate: -10deg;
  }
  60% {
    opacity: 1;
    translate: 0 -3px;
    scale: 1.04;
    rotate: 3deg;
  }
}
@keyframes social-follow-plush-bounce {
  30% {
    translate: 0 -5px;
    scale: 1.06 0.96;
  }
  60% {
    translate: 0 0;
    scale: 0.97 1.03;
  }
}
@keyframes social-follow-rise {
  from {
    opacity: 0;
    translate: 0 6px;
  }
}
@keyframes social-follow-heart {
  0% {
    opacity: 0;
    translate: -50% 8px;
    scale: 0.4;
  }
  25% {
    opacity: 1;
    scale: 1;
  }
  100% {
    opacity: 0;
    translate: calc(-50% + var(--social-follow-heart-x)) -30px;
    scale: 0.9;
  }
}
@media (prefers-reduced-motion: reduce) {
  .social-follow-toast-plush, .social-follow-toast-plush[data-face="happy"] .social-follow-plush, .social-follow-toast-copy[data-thanks], .social-follow-toast-follow, .social-follow-networks li {
    animation: none;
  }
  .social-follow-toast-plush[data-face="wide"] .social-follow-plush, .social-follow-toast .social-follow-network:hover {
    rotate: none;
    translate: none;
  }
  .social-follow-heart {
    display: none;
  }
}
.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;
  stroke-width: var(--openbot-icon-stroke-lg);
}
.billing-license-row .ui-item-actions {
  gap: var(--openbot-space-2);
}
.billing-license-menu.ui-action-menu {
  z-index: var(--openbot-layer-dialog-host);
}
.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-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-1) var(--openbot-space-1-5);
  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:is([data-kind="tab"], [data-kind="thread"]) {
  max-width: min(260px, 100%);
}
.reference-chip[data-kind="quote"] {
  max-width: min(240px, 100%);
  font-weight: 450;
}
.reference-chip[data-kind="agent"]:hover, button.reference-chip:is([data-kind="quote"], [data-kind="tab"], [data-kind="thread"]):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-request .ui-icon-button > svg[class~="lucide-arrow-right"]:dir(rtl) {
  transform: scaleX(-1);
}
.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:dir(rtl) .t-page[data-page-id="1"] {
  --t-page-from-x: var(--page-slide-distance);
}
.t-page-slide:dir(rtl) .t-page[data-page-id="2"] {
  --t-page-from-x: calc(var(--page-slide-distance) * -1);
}
.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[data-openbot-window-glass] {
  --window-glass-frame: var(--openbot-bg-frame);
  @supports (color: color-mix(in lab, red, red)) {
    --window-glass-frame: color-mix(in srgb, var(--openbot-bg-frame) 20%, transparent);
  }
  --window-glass-card: var(--openbot-bg-canvas);
  @supports (color: color-mix(in lab, red, red)) {
    --window-glass-card: color-mix(in srgb, var(--openbot-bg-canvas) 30%, transparent);
  }
  --window-glass-canvas: var(--openbot-bg-canvas);
  @supports (color: color-mix(in lab, red, red)) {
    --window-glass-canvas: color-mix(in srgb, var(--openbot-bg-canvas) 25%, transparent);
  }
  --window-glass-sidebar: var(--openbot-bg-sidebar);
  @supports (color: color-mix(in lab, red, red)) {
    --window-glass-sidebar: color-mix(in srgb, var(--openbot-bg-sidebar) 25%, transparent);
  }
  --window-glass-frame-fill: var(--openbot-bg-frame);
  @supports (color: color-mix(in lab, red, red)) {
    --window-glass-frame-fill: color-mix(in srgb, var(--openbot-bg-frame) 30%, transparent);
  }
  --window-glass-sheet: var(--openbot-bg-sheet);
  @supports (color: color-mix(in lab, red, red)) {
    --window-glass-sheet: color-mix(in srgb, var(--openbot-bg-sheet) 35%, transparent);
  }
  --window-glass-sheet-inset: var(--openbot-bg-sheet-inset);
  @supports (color: color-mix(in lab, red, red)) {
    --window-glass-sheet-inset: color-mix(in srgb, var(--openbot-bg-sheet-inset) 25%, transparent);
  }
  --window-glass-grouped: var(--openbot-bg-grouped);
  @supports (color: color-mix(in lab, red, red)) {
    --window-glass-grouped: color-mix(in srgb, var(--openbot-bg-grouped) 35%, transparent);
  }
  --window-glass-surface: var(--openbot-bg-surface);
  @supports (color: color-mix(in lab, red, red)) {
    --window-glass-surface: color-mix(in srgb, var(--openbot-bg-surface) 35%, transparent);
  }
  --window-glass-surface-raised: var(--openbot-bg-surface-raised);
  @supports (color: color-mix(in lab, red, red)) {
    --window-glass-surface-raised: color-mix(in srgb, var(--openbot-bg-surface-raised) 40%, transparent);
  }
  --window-glass-control: var(--openbot-bg-control);
  @supports (color: color-mix(in lab, red, red)) {
    --window-glass-control: color-mix(in srgb, var(--openbot-bg-control) 35%, transparent);
  }
  --window-glass-control-hover: var(--openbot-bg-control-hover);
  @supports (color: color-mix(in lab, red, red)) {
    --window-glass-control-hover: color-mix(in srgb, var(--openbot-bg-control-hover) 45%, transparent);
  }
  --window-glass-control-active: var(--openbot-bg-control-active);
  @supports (color: color-mix(in lab, red, red)) {
    --window-glass-control-active: color-mix(in srgb, var(--openbot-bg-control-active) 55%, transparent);
  }
  --window-glass-tabs-bar: var(--openbot-tabs-bar-bg);
  @supports (color: color-mix(in lab, red, red)) {
    --window-glass-tabs-bar: color-mix(in srgb, var(--openbot-tabs-bar-bg) 35%, transparent);
  }
  --window-glass-tabs-pill: var(--openbot-tabs-pill-bg);
  @supports (color: color-mix(in lab, red, red)) {
    --window-glass-tabs-pill: color-mix(in srgb, var(--openbot-tabs-pill-bg) 45%, transparent);
  }
  --window-solid-canvas: var(--openbot-bg-canvas);
  --window-solid-sidebar: var(--openbot-bg-sidebar);
  --window-solid-frame: var(--openbot-bg-frame);
  --window-solid-sheet: var(--openbot-bg-sheet);
  --window-solid-sheet-inset: var(--openbot-bg-sheet-inset);
  --window-solid-grouped: var(--openbot-bg-grouped);
  --window-solid-surface: var(--openbot-bg-surface);
  --window-solid-surface-raised: var(--openbot-bg-surface-raised);
  --window-solid-control: var(--openbot-bg-control);
  --window-solid-control-hover: var(--openbot-bg-control-hover);
  --window-solid-control-active: var(--openbot-bg-control-active);
  --window-solid-tabs-bar: var(--openbot-tabs-bar-bg);
  --window-solid-tabs-pill: var(--openbot-tabs-pill-bg);
}
:root[data-openbot-window-glass] .app-window {
  --openbot-bg-canvas: var(--window-glass-canvas);
  --openbot-bg-sidebar: var(--window-glass-sidebar);
  --openbot-bg-frame: var(--window-glass-frame-fill);
  --openbot-bg-sheet: var(--window-glass-sheet);
  --openbot-bg-sheet-inset: var(--window-glass-sheet-inset);
  --openbot-bg-grouped: var(--window-glass-grouped);
  --openbot-bg-surface: var(--window-glass-surface);
  --openbot-bg-surface-raised: var(--window-glass-surface-raised);
  --openbot-bg-control: var(--window-glass-control);
  --openbot-bg-control-hover: var(--window-glass-control-hover);
  --openbot-bg-control-active: var(--window-glass-control-active);
  --openbot-tabs-bar-bg: var(--window-glass-tabs-bar);
  --openbot-tabs-pill-bg: var(--window-glass-tabs-pill);
  --openbot-queue-surface: var(--openbot-bg-surface);
  --background: var(--openbot-bg-canvas);
  --surface: var(--openbot-bg-surface);
}
:root[data-openbot-window-glass] .app-window :is( [data-popper-positioner], [role="dialog"], [role="alertdialog"], [role="menu"], [role="listbox"], [role="tooltip"], .ui-popover-menu-surface, .sidebar-agent-drag-preview, .sidebar-person-drag-preview, .sidebar-section-drag-preview ) {
  --openbot-bg-canvas: var(--window-solid-canvas);
  --openbot-bg-sidebar: var(--window-solid-sidebar);
  --openbot-bg-frame: var(--window-solid-frame);
  --openbot-bg-sheet: var(--window-solid-sheet);
  --openbot-bg-sheet-inset: var(--window-solid-sheet-inset);
  --openbot-bg-grouped: var(--window-solid-grouped);
  --openbot-bg-surface: var(--window-solid-surface);
  --openbot-bg-surface-raised: var(--window-solid-surface-raised);
  --openbot-bg-control: var(--window-solid-control);
  --openbot-bg-control-hover: var(--window-solid-control-hover);
  --openbot-bg-control-active: var(--window-solid-control-active);
  --openbot-tabs-bar-bg: var(--window-solid-tabs-bar);
  --openbot-tabs-pill-bg: var(--window-solid-tabs-pill);
  --openbot-queue-surface: var(--openbot-bg-surface);
  --background: var(--openbot-bg-canvas);
  --surface: var(--openbot-bg-surface);
}
:root[data-openbot-window-glass] body {
  background: transparent;
}
:root[data-openbot-window-glass] .app-window {
  --window-frame: var(--window-glass-frame);
}
@media (max-width: 720px) {
  :root[data-openbot-window-glass] .app-window > .app-frame-edge {
    background: var(--window-glass-card);
  }
}
@media (min-width: 721px) {
  :root[data-openbot-window-glass] .app-window > .app-frame-edge, :root[data-openbot-window-glass] .app-window > .app-frame-edge > .server-rail {
    background: transparent;
  }
  :root[data-openbot-window-glass] .app-window > .app-frame-edge::before, :root[data-openbot-window-glass] .app-window > .app-frame-edge .side-panel-maximized > :is(.settings-panel, .browser-panel), :root[data-openbot-window-glass] .app-frame-edge .diagram-view-body {
    background: var(--window-glass-card);
  }
}
:root[data-openbot-window-glass] .app-window > .app-frame-edge > .sidebar, :root[data-openbot-window-glass] .app-window > .app-frame-edge :is(.channel-empty, .channel-title), :root[data-openbot-window-glass] .app-window > .app-frame-edge > .sidebar :is(.sidebar-section-agent-drop-target, .sidebar-pinned-group-agent-drop-target) > * {
  --agent-avatar-outline: transparent;
}
:root[data-openbot-window-glass] .app-window > .app-frame-edge > .sidebar .agent-row:not(:hover, .agent-row-active) .channel-avatar-cluster .agent-avatar:has(> .bloub-avatar-svg image), :root[data-openbot-window-glass] .app-window > .app-frame-edge > .sidebar .agent-list[data-sidebar-dragging] .agent-row:hover:not(.agent-row-active) .channel-avatar-cluster .agent-avatar:has(> .bloub-avatar-svg image) {
  filter: none;
}
:root[data-openbot-window-glass] .app-window > .app-frame-edge :is(.channel-empty, .channel-title) .channel-avatar .agent-avatar + .agent-avatar {
  margin-inline-start: 0;
}
:root[data-openbot-window-glass] .app-window :is(.schedule-pane, .agent-usage, .tasks-page, .diagram-view, .settings-page-content .agent-files-view) {
  background: transparent;
}
:root[data-openbot-window-glass] .app-window .diagram-board-viewport {
  background-color: transparent;
}
:root[data-openbot-window-glass] .app-window .tasks-page-composer.composer-wrap {
  background: var(--window-glass-card);
}
:root[data-openbot-window-glass] .app-window .settings-page-content .settings-modal-scroll-frame::before {
  background: linear-gradient(to bottom, var(--window-glass-card) 28%, transparent 100%);
}
:root[data-openbot-window-glass] .app-window .settings-page-content .settings-modal-scroll-frame::after {
  background: linear-gradient(to top, var(--window-glass-card) 28%, transparent 100%);
}
:root[data-openbot-window-glass] .app-window :is( .sidebar-folder > header, .marketplace-skill-group-bar, .agent-instructions-bar, .trace-row[data-parent], .trace-axis-row ) {
  backdrop-filter: blur(var(--openbot-space-4));
}
:root[data-openbot-window-glass] .app-window .wfn-stage {
  --wfn-card: var(--window-solid-canvas);
  --wfn-field: var(--window-solid-surface-raised);
  --wfn-port: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --wfn-port: color-mix(in srgb, var(--openbot-text-primary) 10%, var(--window-solid-canvas));
  }
}
:root[data-openbot-window-glass][data-openbot-color-scheme="light"] .app-window .wfn-stage {
  --wfn-card: var(--window-solid-surface);
  --wfn-field: var(--window-solid-control-hover);
}
:root[data-openbot-window-glass] .browser-full-view {
  background: var(--window-glass-frame);
}
:root[data-openbot-window-glass] .app-window .ui-bubble.message-bubble-colored > .ui-bubble-content {
  --openbot-bg-canvas: var(--window-glass-canvas);
  --openbot-bg-sidebar: var(--window-glass-sidebar);
  --openbot-bg-surface: var(--window-glass-surface);
  --openbot-bg-surface-raised: var(--window-glass-surface-raised);
  --openbot-bg-control: var(--window-glass-control);
  --openbot-bg-control-hover: var(--window-glass-control-hover);
  --openbot-bg-control-active: var(--window-glass-control-active);
}
:root[data-openbot-window-glass] .app-window .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, color-mix(in srgb, var(--message-author-color, var(--openbot-accent)) 22%, var(--window-solid-surface-raised)) 40%, transparent );
  }
}
:root[data-openbot-window-glass] .app-window .message-entry-agent .ui-bubble-variant-muted.message-bubble-colored > .ui-bubble-content {
  background: var(--message-chat-color);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix( in srgb, color-mix(in srgb, var(--message-chat-color) var(--message-bubble-tint-amount), var(--window-solid-surface)) 35%, transparent );
  }
}
:root[data-openbot-window-glass] .app-window .message-entry-user .ui-bubble.message-bubble-colored > .ui-bubble-content {
  background: var(--message-chat-color);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix( in srgb, color-mix(in srgb, var(--message-chat-color) var(--message-bubble-tint-amount), var(--window-solid-surface-raised)) 40%, transparent );
  }
}
:root[data-openbot-color-scheme="dark"][data-openbot-chat-background-dark] {
  --chat-background: oklch(from var(--openbot-chat-background-dark) min(l, 0.3) min(c, 0.05) h);
}
:root[data-openbot-color-scheme="light"][data-openbot-chat-background-light] {
  --chat-background: oklch(from var(--openbot-chat-background-light) max(l, 0.95) min(c, 0.02) h);
}
:root[data-openbot-color-scheme="dark"][data-openbot-chat-background-dark] :is(.conversation-panel:not(.window-page), .direct-conversation), :root[data-openbot-color-scheme="light"][data-openbot-chat-background-light] :is(.conversation-panel:not(.window-page), .direct-conversation) {
  --openbot-bg-canvas: var(--chat-background);
  --openbot-bg-canvas-clear: oklch(from var(--chat-background) l c h / 0);
}
:root[data-openbot-color-scheme="light"][data-openbot-chat-background-light] :is(.conversation-panel:not(.window-page), .direct-conversation) {
  --openbot-scroll-edge-overlay: oklch(from var(--chat-background) l c h / 0.72);
}
:root[data-openbot-window-glass][data-openbot-color-scheme="dark"][data-openbot-chat-background-dark] .app-window :is(.conversation-panel:not(.window-page), .direct-conversation), :root[data-openbot-window-glass][data-openbot-color-scheme="light"][data-openbot-chat-background-light] .app-window :is(.conversation-panel:not(.window-page), .direct-conversation) {
  --openbot-bg-canvas: var(--chat-background);
  @supports (color: color-mix(in lab, red, red)) {
    --openbot-bg-canvas: color-mix(in srgb, var(--chat-background) 25%, transparent);
  }
}
@media (min-width: 721px) {
  :root[data-openbot-color-scheme="dark"][data-openbot-chat-background-dark] .app-window > .app-frame-edge :is(.conversation-panel:not(.window-page), .direct-conversation)::before, :root[data-openbot-color-scheme="light"][data-openbot-chat-background-light] .app-window > .app-frame-edge :is(.conversation-panel:not(.window-page), .direct-conversation)::before {
    position: absolute;
    z-index: -1;
    inset: var(--left-header-height) 0 0;
    border-start-end-radius: calc(var(--openbot-radius-card) - 1px);
    border-end-end-radius: calc(var(--openbot-radius-card) - 1px);
    background: var(--openbot-bg-canvas);
    content: "";
    pointer-events: none;
  }
}
: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;
      --agent-list-stuck-height: 0px;
      --agent-list-fade-top: initial;
      --agent-list-fade-bottom: initial;
      --hosted-upsell-beam-angle: 0deg;
      --wfn-sweep: 0turn;
      --wfn-fade-start: 0px;
      --wfn-fade-end: 0px;
      --settings-page-fade-start: 0px;
      --settings-page-fade-end: 0px;
    }
  }
}


/* /@fs//home/ubuntu/openbot/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%;
}

/* `AppLogo` starts each blink. A loop over the whole period, with the eyes still for most of it, makes
   the page draw a frame on every display refresh, because Chromium runs SVG animations on the main thread. */
.app-logo[data-animation="blink"]:where([data-blink]) .app-logo-eye {
  animation: app-logo-blink 192ms cubic-bezier(0.77, 0, 0.175, 1);
}

.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%,
  100% {
    transform: scaleY(1);
  }

  50% {
    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//home/ubuntu/openbot/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);
}

/* A Lucide icon keeps width="24" when the caller sets no size, which is too large next to button
   text. These rules have no specificity, so a size prop or a feature rule still wins. */
:where(.ui-button > svg[width="24"]) {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}

:where(.ui-button-size-xs > svg[width="24"], .ui-button-size-sm > svg[width="24"]) {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

: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)[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;
  inset-inline-end: -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-inline-start: var(--openbot-space-1-5);
}

:where(.z-badge):has(> [data-icon="inline-end"]) {
  padding-inline-end: 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);
}

/* Every Lucide icon takes the shared line. Without this rule, an icon outside a `.ui-button` and without a
 * feature rule keeps the Lucide line of 2 and looks heavier than the icons beside it. The rule has no
 * specificity, so a feature rule that sets a different line still wins. */
:where(svg.lucide) {
  stroke-width: var(--openbot-icon-stroke);
}

/* 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%;
}

.ui-textarea-resizable {
  position: relative;
  display: grid;
}

/* The grip sits inside the bottom-right corner. It changes only the height. */
.ui-textarea-resizer {
  --ui-textarea-grip: var(--openbot-text-dim);

  position: absolute;
  inset-inline-end: 1px;
  bottom: 1px;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 0;
  border-end-end-radius: var(--openbot-radius-md);
  padding: 0;
  background-image: linear-gradient(
    135deg,
    transparent 48%,
    var(--ui-textarea-grip) 48% 56%,
    transparent 56% 68%,
    var(--ui-textarea-grip) 68% 76%,
    transparent 76%
  );
  background-repeat: no-repeat;
  background-position: right 3px bottom 3px;
  background-size: 12px 12px;
  cursor: ns-resize;
  touch-action: none;
  user-select: none;
}

.ui-textarea-resizer:hover,
.ui-textarea-resizer:focus-visible,
.ui-textarea-resizer[data-active] {
  --ui-textarea-grip: var(--openbot-text-primary);
}

.ui-textarea-resizer:focus-visible {
  outline: 0;
}

/* In a right-to-left page the grip sits in the bottom-left corner, so its lines turn with it. */
.ui-textarea-resizer:dir(rtl) {
  scale: -1 1;
}

html.ui-textarea-resizing {
  cursor: ns-resize;
  user-select: none;
}

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

/* A focused field gets a neutral border and no ring. */
:where(.ui-input, .ui-textarea, .ui-native-select):focus-visible {
  border-color: var(--openbot-border-focus);
}

: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-block: var(--openbot-space-2);
  padding-inline: 10px var(--openbot-space-2);
  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: start;
  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-focus);
  outline: 0;
}

.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;
}

/* The search field stays at the top; only the rows scroll, so Kobalte scrolls the listbox. */
.ui-search-select-content {
  display: flex;
  flex-direction: column;
  width: max(var(--kb-popper-anchor-width, 0px), 240px);
  overflow: hidden;
  transform-origin: var(--kb-popover-content-transform-origin);
}

.ui-search-select-search {
  position: relative;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--openbot-border);
  padding: var(--openbot-space-1);
}

.ui-search-select-search > svg {
  position: absolute;
  top: 50%;
  inset-inline-start: var(--openbot-space-3);
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
  transform: translateY(-50%);
  pointer-events: none;
}

.ui-search-select-input {
  width: 100%;
  padding-inline-start: var(--openbot-space-8);
}

.ui-search-select-root {
  min-height: 0;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.ui-search-select-content .ui-select-listbox {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
}

.ui-search-select-empty {
  margin: 0;
  padding: var(--openbot-space-2) var(--openbot-space-3);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.ui-select-footer {
  border-top: 1px solid var(--openbot-border);
  padding: var(--openbot-space-1);
}

.ui-select-section {
  padding: var(--openbot-space-2) 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);
  list-style: none;
}

.ui-select-item {
  position: relative;
  display: flex;
  align-items: center;
  cursor: default;
  user-select: none;
  border-radius: var(--openbot-radius-sm);
  outline: 0;
  padding-block: var(--openbot-space-1-5);
  padding-inline: var(--openbot-space-2) var(--openbot-space-8);
  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;
  inset-inline-end: 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-inline-start: 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-field-limit {
  display: grid;
  gap: var(--openbot-space-0-5);
}

.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);
}

/* An icon in the media slot stands beside a title and a description, so it is a large icon with the line of
 * the large icons. The selector is weak, so a feature can set a different size and line. */
:where(.ui-item-media) > svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  stroke-width: var(--openbot-icon-stroke-lg);
}

.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-paper-text);
  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-progress-fill[data-indeterminate]:dir(rtl) {
  animation-name: ui-progress-travel-rtl;
}

@keyframes ui-progress-travel-rtl {
  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);
}

/* Both themes: Sonner sets its own colors under `[data-sonner-theme]`, so this keeps the same weight. */
.ui-toaster[data-sonner-toaster][data-sonner-theme] {
  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-card);
}

/* Four columns and two rows: the mark, the words, and an action row under them, with the secondary
   action before the main one. 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 actions on their own row gives the words the full
   width and puts the main action at the end, 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);
  /* Sonner pulls the icon 1px to the side; the mark sits on the padding edge instead. */
  --toast-svg-margin-start: 0px;
  --toast-svg-margin-end: 0px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) max-content max-content;
  align-items: start;
  column-gap: 0;
  row-gap: var(--openbot-space-3);
  min-height: var(--openbot-control-xl);
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border-color: transparent;
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-surface-raised);
  box-shadow: 0 0 0 1px var(--openbot-border);
  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);
}

/* The button row sits 8px from the bottom and end edges, so the 6px button radius plus that space
   gives the 14px card radius. */
.ui-toaster [data-sonner-toast][data-styled="true"]:has([data-button]) {
  padding-bottom: var(--openbot-space-2);
}

.ui-toaster [data-sonner-toast][data-styled="true"] [data-content] {
  grid-area: 1 / 2 / 2 / -1;
  gap: var(--openbot-space-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: 3;
  justify-self: end;
}

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

.ui-toaster [data-sonner-toast][data-styled="true"]:has([data-cancel]) [data-action] {
  margin-inline-start: var(--openbot-space-1);
}

/* The close control sits on the top right corner, mostly outside the card, so the words keep only a
   small space from it. */
.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-inline-end: var(--openbot-space-1);
}

.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);
  text-wrap: balance;
}

.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-block: 1px 0;
  margin-inline: 0 var(--openbot-space-3);
}

.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;
}

/* The action that continues the flow has the light fill of the default Button. The action that only
   closes or undoes is text. */
.ui-toaster [data-sonner-toast][data-styled="true"] [data-button] {
  height: var(--openbot-control-sm);
  margin: 0;
  border: 1px solid transparent;
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-surface-light);
  box-shadow: none;
  padding-inline: var(--openbot-space-3);
  color: var(--openbot-text-on-light);
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  transition:
    background-color var(--openbot-duration-hover) ease,
    color var(--openbot-duration-hover) ease,
    transform var(--openbot-duration-normal) var(--openbot-ease-out);
}

/* The last button is 8px from the end edge, not at the 16px padding of the words. */
.ui-toaster [data-sonner-toast][data-styled="true"] [data-button]:last-of-type {
  margin-inline-end: calc(var(--openbot-space-2) - var(--openbot-space-4));
}

/* Sonner fills the cancel button in its dark theme with a selector of the same weight as the rules
   above, so this one names the theme too. */
.ui-toaster[data-sonner-toaster][data-sonner-theme] [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,
.ui-toast-card-close:focus-visible {
  outline: 0;
  box-shadow:
    inset 0 0 0 1px var(--openbot-border-strong),
    0 0 0 2px var(--openbot-border-strong);
}

/* A small round button on the top right corner of the card, with 6px of it outside the card. The 1px
   ring separates it from the card; it has no drop shadow. A toast that its caller draws (an unstyled
   sonner toast) uses the same control with the `ui-toast-card-close` class. */
.ui-toaster [data-sonner-toast][data-styled="true"] [data-close-button],
.ui-toast-card-close {
  position: absolute;
  top: calc(-1 * var(--openbot-space-1-5));
  inset-inline-end: calc(-1 * var(--openbot-space-1-5));
  inset-inline-start: auto;
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  border: 0;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface-raised);
  box-shadow: 0 0 0 1px var(--openbot-border-strong);
  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,
.ui-toast-card-close::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],
  .ui-toast-card-close {
    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,
  [data-sonner-toast]:hover .ui-toast-card-close,
  [data-sonner-toast]:focus-within .ui-toast-card-close {
    pointer-events: auto;
    opacity: 1;
  }

  .ui-toaster [data-sonner-toast][data-styled="true"] [data-action]:hover {
    background: color-mix(in srgb, var(--openbot-surface-light) 82%, transparent);
  }

  .ui-toaster[data-sonner-toaster][data-sonner-theme] [data-sonner-toast][data-styled="true"] [data-cancel]:hover {
    background: var(--openbot-bg-control-hover);
    color: var(--openbot-text-primary);
  }

  /* Close is a calm action, not a destructive one. */
  .ui-toaster [data-sonner-toast][data-styled="true"] [data-close-button]:hover:not(:focus-visible),
  .ui-toast-card-close:hover:not(:focus-visible) {
    background: var(--openbot-bg-control-active);
    color: var(--openbot-text-primary);
  }
}

@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,
.ui-toast-card-close:active {
  transform: scale(0.96);
}

/* A toast that its caller draws (an unstyled sonner toast) uses the buttons of the shared toast. The
   card has 16px of end padding; the button row sits 8px from the end edge. */
.ui-toast-card-close > svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}

.ui-toast-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--openbot-space-1);
  margin-inline-end: calc(var(--openbot-space-2) - var(--openbot-space-4));
}

/* The Button transitions, with the press scale added. */
.ui-toast-card-actions .ui-button {
  height: var(--openbot-control-sm);
  border-radius: var(--openbot-radius-sm);
  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,
    transform var(--openbot-duration-normal) var(--openbot-ease-out);
}

.ui-toast-card-actions .ui-button-variant-ghost {
  color: var(--openbot-text-secondary);
}

.ui-toast-card-actions .ui-button:active {
  transform: scale(0.96);
}

@media (hover: hover) and (pointer: fine) {
  .ui-toast-card-actions .ui-button-variant-ghost:hover {
    background: var(--openbot-bg-control-hover);
    color: var(--openbot-text-primary);
  }
}

.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);
  }
}

/*
 * The plush loader: the lilac plush watches three felt balls bounce in a wave, and its eyes follow
 * the ball in the air. The parent sets --ui-plush-size, the width of the plush. With reduced motion
 * the plush and the balls stay still.
 */
.ui-plush-loader {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: flex-end;
  gap: calc(var(--ui-plush-size) * 0.18);
}

.ui-plush-loader[data-layout="stack"] {
  flex-direction: column;
  align-items: center;
  gap: calc(var(--ui-plush-size) * 0.3);
}

.ui-plush-mascot {
  --ui-plush-look: calc(var(--ui-plush-size) * 0.035);
  position: relative;
  display: block;
  width: var(--ui-plush-size);
  flex: 0 0 auto;
}

.ui-plush-body {
  position: relative;
  display: block;
  transform-origin: 50% 100%;
}

.ui-plush-body-image,
.ui-plush-ball {
  display: block;
  width: 100%;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Each eye layer covers the whole body. Each eye turns about its own centre. */
.ui-plush-eyes,
.ui-plush-eye {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}

.ui-plush-eye {
  transform-origin: 35.6% 48.1%;
  transition: scale var(--openbot-duration-overlay) var(--openbot-ease-out);
}

.ui-plush-eye[data-side="right"] {
  transform-origin: 64.4% 48.1%;
}

.ui-plush-mascot[data-face="wide"] .ui-plush-eye {
  scale: 1.18;
}

.ui-plush-balls {
  display: flex;
  gap: calc(var(--ui-plush-size) * 0.08);
  padding-bottom: calc(var(--ui-plush-size) * 0.04);
}

.ui-plush-ball {
  width: calc(var(--ui-plush-size) * 0.24);
  transform-origin: 50% 100%;
}

.ui-plush-loader[data-layout="stack"] .ui-plush-balls {
  padding-bottom: 0;
}

.ui-plush-loader[data-layout="stack"] .ui-plush-ball {
  width: calc(var(--ui-plush-size) * 0.2);
}

@media (prefers-reduced-motion: no-preference) {
  .ui-plush-body {
    animation: ui-plush-breathe 3.2s ease-in-out 600ms infinite;
  }

  .ui-plush-eye {
    animation: ui-plush-blink 5.2s ease-in-out 1.8s infinite;
  }

  .ui-plush-eyes {
    animation: ui-plush-look 6s ease-in-out 2.2s infinite;
  }

  .ui-plush-mascot[data-face="wink"] .ui-plush-eye[data-side="left"] {
    animation: ui-plush-wink 600ms var(--openbot-ease-out);
  }

  .ui-plush-mascot[data-face="happy"] .ui-plush-eye {
    animation: ui-plush-squint 220ms var(--openbot-ease-out) forwards;
  }

  .ui-plush-loader > .ui-plush-mascot {
    animation: ui-plush-pop-in 520ms var(--openbot-ease-out) both;
  }

  .ui-plush-loader .ui-plush-eyes {
    animation: ui-plush-follow 1.2s ease-in-out 700ms infinite;
  }

  .ui-plush-ball {
    animation:
      ui-plush-pop-in 360ms var(--openbot-ease-out) 300ms backwards,
      ui-plush-ball-bounce 1.2s ease-in-out 700ms infinite;
  }

  .ui-plush-ball:nth-child(2) {
    animation-delay: 380ms, 850ms;
  }

  .ui-plush-ball:nth-child(3) {
    animation-delay: 460ms, 1s;
  }
}

@keyframes ui-plush-pop-in {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
}

@keyframes ui-plush-breathe {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.012, 0.978);
  }
}

@keyframes ui-plush-blink {
  0%,
  93%,
  100% {
    transform: scaleY(1);
  }
  96% {
    transform: scaleY(0.1);
  }
}

@keyframes ui-plush-wink {
  0%,
  100% {
    transform: scaleY(1);
  }
  30%,
  60% {
    transform: scaleY(0.1);
  }
}

@keyframes ui-plush-squint {
  to {
    transform: translateY(-1.5%) scaleY(0.35);
  }
}

@keyframes ui-plush-look {
  0%,
  28%,
  86%,
  100% {
    transform: translate(0, 0);
  }
  34%,
  50% {
    transform: translate(calc(var(--ui-plush-look) * -1), calc(var(--ui-plush-look) * 0.2));
  }
  58%,
  78% {
    transform: translate(var(--ui-plush-look), calc(var(--ui-plush-look) * -0.3));
  }
}

@keyframes ui-plush-follow {
  0%,
  18% {
    transform: translate(calc(var(--ui-plush-look) * -0.9), calc(var(--ui-plush-look) * 0.6));
  }
  32% {
    transform: translate(0, calc(var(--ui-plush-look) * 0.6));
  }
  46%,
  70% {
    transform: translate(calc(var(--ui-plush-look) * 0.9), calc(var(--ui-plush-look) * 0.6));
  }
  100% {
    transform: translate(calc(var(--ui-plush-look) * -0.9), calc(var(--ui-plush-look) * 0.6));
  }
}

@keyframes ui-plush-ball-bounce {
  0%,
  60%,
  100% {
    transform: translateY(0) scale(1);
  }
  22% {
    transform: translateY(-110%) scale(0.95, 1.06);
  }
  42% {
    transform: translateY(0) scale(1.14, 0.84);
  }
  50% {
    transform: translateY(0) scale(1);
  }
}

.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;
  }
}

/* An icon that points along the line points the other way in a right-to-left page, as the layout
   does: a submenu chevron points to the side its submenu opens on, and Back points to the start.
   A key in a shortcut hint is the key on the keyboard, so it stays as it is. `:where` keeps the rule
   weaker than the transform of a component, such as the turn of an open disclosure chevron. */
:where(
  svg:is(
    [class~="lucide-chevron-left"],
    [class~="lucide-chevron-right"],
    [class~="lucide-chevrons-left"],
    [class~="lucide-chevrons-right"],
    [class~="lucide-arrow-left"],
    [class~="lucide-arrow-right"],
    [class~="lucide-arrow-right-to-line"],
    [class~="lucide-panel-left"],
    [class~="lucide-panel-right"],
    [class~="lucide-undo-2"],
    [class~="lucide-redo-2"],
    [class~="lucide-log-in"],
    [class~="lucide-log-out"],
    [class~="lucide-corner-down-left"],
    [class~="lucide-message-square-reply"],
    .ui-rtl-mirror
  ):dir(rtl):not(.ui-kbd *)
) {
  transform: scaleX(-1);
}

.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;
  /* A shortcut such as "⌘F" keeps its key order in a right-to-left page. */
  direction: ltr;
  unicode-bidi: isolate;
}

.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;
  }
}
/* A window that Chromium draws on the CPU (no GPU, a blocked GPU or a failed one) has this root
 * attribute. There a backdrop blur repaints all that is under it on each frame: an open dialog
 * dropped frames of more than 100 ms. So no surface blurs its backdrop. The rule wins over each
 * blur, `-webkit-backdrop-filter` included, because that name is an alias in Chromium. */
:root[data-openbot-software-rendering] *,
:root[data-openbot-software-rendering] *::before,
:root[data-openbot-software-rendering] *::after {
  backdrop-filter: none !important;
}
/* 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 {
  --agent-avatar-outline: var(--openbot-bg-sidebar);

  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-lg);
}

.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-block: var(--openbot-space-3);
  padding-inline: var(--openbot-space-8) var(--openbot-space-4);
  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: start;
  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-inline-start-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 {
  inset-inline-start: var(--openbot-space-3);
}

.ui-bubble-reactions-align-end {
  inset-inline-end: 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;
}

/* The toasts float over areas that move the window: the window headers, and the full window on the
 * sign-in, setup, onboarding and loading screens. The window swallows mouse events over a
 * `-webkit-app-region: drag` area, so a pointer on a toast left the stack and collapsed it, and only its
 * buttons, which are `no-drag`, could be reached. The `::after` is the strip Sonner puts in the gap
 * between expanded toasts, so the pointer can cross it. */
.ui-toaster [data-sonner-toast],
.ui-toaster [data-sonner-toast]::after {
  -webkit-app-region: no-drag;
}


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

.otp-input-fieldset {
  position: relative;
  /* A code reads left to right in every language; the focus ring moves by slot index from the left. */
  direction: ltr;
  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//home/ubuntu/openbot/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);
  }
}

/* The digits are flex items, so the group lays them out left to right in every page direction.
   `DigitRuns` puts the runs of a right-to-left value in the order they show in. */
.t-digit-group {
  display: inline-flex;
  align-items: baseline;
  direction: ltr;
  unicode-bidi: isolate;
}
.t-digit-run {
  display: inline-flex;
  align-items: baseline;
}
/* A flex item drops the spaces at its ends; they are the gap between the number and its unit. */
.t-digit-word {
  white-space: pre;
}
.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);
}
/* Right to left, the first page comes from the right and the second from the left. */
.t-page-slide .t-page[data-page-id="1"]:dir(rtl) {
  --t-page-from-x: var(--page-slide-distance);
}
.t-page-slide .t-page[data-page-id="2"]:dir(rtl) {
  --t-page-from-x: calc(var(--page-slide-distance) * -1);
}
.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//home/ubuntu/openbot/src/renderer/src/styles/theme-sweep.css */
/* The theme change sweep (`theme-sweep.ts`). The old theme stays whole under the new one. The new one
   shows inside an ellipse at the bottom middle of the window, or at the top middle for a change
   from dark to light. The script's SVG filter makes a ripple
   at the front. The script grows the ellipse, so no picture animates. */
.theme-sweep-canvas {
  position: fixed;
  inset: 0;
  inline-size: 100vw;
  block-size: 100vh;
  pointer-events: none;
  view-transition-name: theme-sweep;
}

/* The ring from `beam`. It is not part of a view transition, so it stays above the live interface. */
.theme-sweep-beam {
  position: fixed;
  inset: 0;
  z-index: calc(var(--openbot-layer-tooltip) + 1);
  inline-size: 100vw;
  block-size: 100vh;
  pointer-events: none;
}

.theme-sweep-ripple {
  position: absolute;
  inline-size: 0;
  block-size: 0;
}

html:active-view-transition-type(theme-sweep)::view-transition-group(*),
html:active-view-transition-type(theme-sweep)::view-transition-old(*),
html:active-view-transition-type(theme-sweep)::view-transition-new(*) {
  animation: none;
}

html:active-view-transition-type(theme-sweep)::view-transition-new(root) {
  mix-blend-mode: normal;
  mask-image: radial-gradient(
    100% var(--theme-sweep-radius) at 50% var(--theme-sweep-origin, 100%),
    var(--openbot-text-primary) var(--theme-sweep-reveal-from),
    var(--openbot-transparent) var(--theme-sweep-reveal-to)
  );
}

html:active-view-transition-type(theme-sweep)::view-transition-image-pair(root) {
  filter: url("#theme-sweep-ripple");
}

html:active-view-transition-type(theme-sweep)::view-transition-new(theme-sweep) {
  mix-blend-mode: normal;
}


/* /@fs//home/ubuntu/openbot/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//home/ubuntu/openbot/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: var(--openbot-shadow-menu);
  --ui-menu-item-hover: color-mix(in srgb, var(--openbot-text-primary) 6%, transparent);
  --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: start;
  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;
  /* Muted at rest, as the page rail icons, so the change on the highlighted row is clear. */
  color: var(--openbot-text-muted);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The icon of the highlighted row, and of the row of an open submenu, takes the primary text color with its
 * label. It stays an outline, with the same line: a filled icon is too heavy beside the row text. The swap has
 * no transition. This rule must outrank the item icon rule above; the danger and trailing icon rules below have
 * the same specificity and come later, so they keep their colors. */
.ui-action-menu:not([data-menu-layout="grid"])
  :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]):is(
    :hover,
    :focus-visible,
    [data-highlighted],
    [aria-expanded="true"]
  )
  > svg {
  color: var(--openbot-text-primary);
}

/* A disabled item does not react to the pointer, so its icon stays muted with its label. */
.ui-action-menu:not([data-menu-layout="grid"])
  :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"])[data-disabled]
  > svg {
  color: var(--openbot-text-muted);
}

/* 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-inline-start: 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);
}

/* 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//home/ubuntu/openbot/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%);
  /* The compact ears and shoulders are placed by physical side and measured by the motion script, so
     the compact bar keeps one layout in every language. The expanded panel mirrors. */
  direction: ltr;
}

.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//home/ubuntu/openbot/packages/ui/src/features/dynamic-island/dynamic-island-surface.css */
/*
 * The idle greeting emojis, cut from Noto Color Emoji (SIL Open Font License 1.1; see
 * noto-greeting-emoji-OFL.txt). A Linux desktop or server with no emoji font shows them with it.
 * It is last in the font list, so a system emoji font comes first.
 */
@font-face {
  font-family: "OpenBot Greeting Emoji";
  src: url("/@fs/home/ubuntu/openbot/packages/ui/src/assets/fonts/noto-greeting-emoji.woff2") format("woff2");
  unicode-range: U+2728, U+1F44B, U+1F44F, U+1F604, U+1F60A, U+1F64C, U+1FAF6;
  font-display: block;
}

:root[data-surface="dynamic-island"],
:root[data-surface="dynamic-island"] body,
:root[data-surface="dynamic-island"] #root {
  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", "Noto Color Emoji", "OpenBot Greeting 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;
}

/* The island is above every app all day. Its spinner turns only while the user looks at it. */
.openbot-dynamic-island-transition-root[data-ambient-motion="paused"] .ui-spinner {
  animation-play-state: paused;
}

.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: start;
  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);
}

.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-inline-end: calc(var(--openbot-control-sm) + var(--openbot-space-2));
}

.dynamic-island-surface-row-stop {
  position: absolute;
  top: 50%;
  inset-inline-end: 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-inline-end: calc(var(--openbot-control-md) + var(--openbot-space-1));
  padding-inline-start: 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);
  inset-inline-end: 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-inline-start: 1px solid var(--openbot-warning);
  padding-block: 2px;
  padding-inline: 10px 0;
}

.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: end;
}

.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: start;
  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-block: 0;
  margin-inline: 0 auto;
  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;
  /* The step count reads "2 / 5" in any language, so the digit stack stays before the total. */
  direction: ltr;
  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-inline-end: 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//home/ubuntu/openbot/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-inline-end: 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);
}

/* The storage card uses the same card. At "full" the card uses the danger tone, and the ring follows the level. */
.sidebar-storage[data-level="full"] {
  border-color: var(--openbot-danger-border);
  background: var(--openbot-danger-soft);
}

.sidebar-storage-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-3);
}

.sidebar-storage-row > .sidebar-mobile-app-dismiss {
  align-self: start;
}

.sidebar-storage-ring {
  width: 48px;
}

.sidebar-storage-percent {
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  font-weight: var(--openbot-weight-semibold);
  line-height: 1;
}

.sidebar-storage-text {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-0-5);
}

.sidebar-storage-text > strong {
  font-weight: var(--openbot-weight-semibold);
}


/* /@fs//home/ubuntu/openbot/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//home/ubuntu/openbot/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: start;
}

.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;
}

/* The lock line and any fine print under it read as one footer. */
.account-login-footer {
  display: grid;
  gap: 4px;
}

.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-inline-end: 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);
}

.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: start;
  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-language {
  align-self: center;
  width: auto;
  margin-top: var(--openbot-space-6);
  color: var(--openbot-text-muted);
}

.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: start;
}

@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: start;
  -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-inline-start: 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-inline-end: 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-lg);
}

.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: start;
  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-lg);
}

.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);
}

/* Right to left, the onboarding styles mirror the arrow, so the hover nudge keeps the mirror. */
.setup-route-button:hover .setup-route-arrow:dir(rtl) {
  transform: translateX(-2px) scaleX(-1);
}

.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-block: 8px;
  padding-inline: 12px 0;
  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-inline-end: 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-lg);
}

.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-block: 0 8px;
  padding-inline: 66px 0;
  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-block: 0 8px;
  padding-inline: 66px 0;
}

.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-inline-end: 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-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-3) var(--openbot-space-1);
}

.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: start;
  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:is([data-auth-panel="code"], [data-auth-panel="company"]) {
    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;
  }

  /* A right-to-left page moves forward to the left. */
  .account-login:dir(rtl)[data-transition="forward"] :is(.account-login-title, .account-login-description) {
    animation-name: account-login-copy-back;
  }

  .account-login:dir(rtl)[data-transition="back"] :is(.account-login-title, .account-login-description) {
    animation-name: account-login-copy-forward;
  }

  .account-login:dir(rtl)[data-transition="forward"] .account-login-form[data-auth-panel="code"] {
    animation-name: account-login-panel-back;
  }

  .account-login:dir(rtl)[data-transition="back"] .account-login-form[data-auth-panel="email"] {
    animation-name: account-login-panel-forward;
  }

  @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:not(.ui-input):focus-visible,
textarea:not(.ui-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%
  );
}

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);
}

/* Change email goes back, so its arrow follows the reading direction. */
.account-login-code-action-change > svg[class~="lucide-arrow-left"]:dir(rtl) {
  transform: scaleX(-1);
}


/* /@fs//home/ubuntu/openbot/packages/ui/src/features/account/app-loading-screen.css */
/*
 * The app loading screen. In the `pile` scene, Web Animations from a recorded simulation move each
 * plush; CSS only places the pit over the whole screen and fades the screen. When the app is ready,
 * the crew hop out while the screen fades. When the app is ready very soon, the screen only fades.
 * The component sets --app-loading-at, the age of the run, so a second screen does not show again,
 * and --app-loading-exit-delay, the time before the fade, which waits for the rest of the rain.
 */

.app-loading {
  --app-loading-at: 0s;
  --app-loading-exit-delay: 300ms;
  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;
}

/* The crew fill the screen. */
.app-loading[data-scene="pile"] .app-loading-stage {
  position: absolute;
  inset: 0;
  justify-content: center;
}

.app-loading-pit-frame {
  position: absolute;
  inset: 0;
}

/* The pit keeps its floor on the bottom of the screen, also when the window changes size. */
.app-loading-pit {
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
  transform-origin: 50% 100%;
}

.app-loading-plush {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}

.app-loading-squash {
  width: 100%;
  height: 100%;
  will-change: transform;
}

.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;
}

/* The fade also runs with reduced motion: its animationend removes the screen. */
.app-loading:is([data-phase="fade"], [data-phase="exit"]) {
  animation: app-loading-exit var(--openbot-duration-overlay) var(--openbot-ease-in-out) forwards;
}

@media (prefers-reduced-motion: no-preference) {
  /* The app fades in while the crew hop out. The heavy views mounted before the hop. */
  .app-loading[data-phase="exit"] {
    animation-duration: 1100ms;
    animation-delay: var(--app-loading-exit-delay);
  }

  /* 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;
  }

  .app-loading-line {
    animation: app-loading-line-in 280ms var(--openbot-ease-out);
  }

  .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-line-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@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;
}
/* The toast of a long first load, like the GitHub star toast: a raised card with the 1px ring only.
   The buttons sit 8px from the bottom edge. */
.server-connection-toast-host {
  width: var(--width);
}
.server-connection-toast {
  position: relative;
  display: grid;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-4) var(--openbot-space-4) var(--openbot-space-2);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-surface-raised);
  box-shadow: 0 0 0 1px var(--openbot-border);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
/* The close control sits on the corner, mostly outside the card, so the title keeps a small space. */
.server-connection-toast-title {
  padding-right: var(--openbot-space-1);
  font-weight: var(--openbot-weight-semibold);
  text-wrap: balance;
}
.server-connection-toast-body {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  font-variant-numeric: tabular-nums;
  text-wrap: pretty;
}
/* Retry is last, in the corner. With the grid gap, the button row is 12px below the words. */
.server-connection-toast-actions {
  margin-top: var(--openbot-space-1);
}
.server-connection-content {
  position: relative;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.server-connection-content[hidden] {
  display: none;
}


/* /@fs//home/ubuntu/openbot/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%;
  inset-inline-start: 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);
  stroke-width: var(--openbot-icon-stroke-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);
  stroke-width: var(--openbot-icon-stroke-lg);
}

.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;
}

/* Right to left, the arrow points and moves the other way. */
.language-wheel-continue svg:dir(rtl) {
  transform: scaleX(-1);
}

.language-wheel-continue:is(:hover, :focus-visible):not(:disabled) svg:dir(rtl) {
  translate: calc(var(--openbot-space-1) * -1) 0;
}

.language-wheel-continue:active:not(:disabled) svg:dir(rtl) {
  translate: calc(var(--openbot-space-2) * -1) 0;
}

@media (prefers-reduced-motion: reduce) {
  .language-wheel-item,
  .language-wheel-name,
  .language-wheel-continue svg {
    transition: none;
  }
}


/* /@fs//home/ubuntu/openbot/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: start;
}

.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-paper-border);
  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-paper-border);
  stroke-width: 1;
}

.onboarding-computer-window-bar,
.onboarding-computer-window-bar-fill {
  fill: var(--openbot-paper-text-muted);
  opacity: 0.24;
}

.onboarding-computer-window-bar {
  stroke: var(--openbot-paper-border);
  stroke-width: 1;
}

.onboarding-computer-window-pane {
  fill: var(--openbot-paper-text-dim);
  opacity: 0.18;
}

.onboarding-computer-window-card {
  fill: var(--openbot-paper-text-dim);
  opacity: 0.24;
}

.onboarding-computer-window-line {
  fill: var(--openbot-paper-text-dim);
  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-paper-text);
  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;
  inset-inline-end: 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 {
  inset-inline-end: auto;
  inset-inline-start: calc(100% + 10px);
  align-items: flex-end;
  text-align: end;
}

.provider-picker-callout-end .provider-picker-callout-arrow {
  align-self: flex-start;
  transform: scaleX(-1);
}

/* Right to left, the notes change sides, so each arrow points the other way. */
.provider-picker-callout:dir(rtl) .provider-picker-callout-arrow {
  transform: scaleX(-1);
}

.provider-picker-callout-end:dir(rtl) .provider-picker-callout-arrow {
  transform: none;
}

/* The arrows of the setup routes and the choice rows point to the reading direction. */
:is(.setup-route-arrow, .first-run-choice-row-chevron):dir(rtl) {
  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) {
  left: 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: start;
  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);
}

/* The product analytics choice is the last line of the answer list, lighter than the answers. */
.first-run-choice-improve {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  border-top: 1px solid var(--openbot-border-grouped);
  padding: var(--openbot-space-3) var(--openbot-space-4);
  text-align: start;
  cursor: pointer;
}

.first-run-choice-improve-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.first-run-choice-improve-text strong {
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}

/* Three of the team rise beside the title line, which is short, so they never cover the detail. */
.first-run-choice-improve-pop {
  position: absolute;
  top: var(--openbot-space-2);
  inset-inline-end: var(--openbot-space-4);
  display: flex;
  align-items: flex-end;
  gap: var(--openbot-space-1);
  pointer-events: none;
}

.first-run-choice-improve-agent.agent-avatar {
  width: 20px;
  height: 20px;
  animation: first-run-improve-pop 1600ms var(--openbot-ease-out) both;
}

.first-run-choice-improve-agent:nth-child(2) {
  animation-delay: 90ms;
}

.first-run-choice-improve-agent:nth-child(3) {
  animation-delay: 180ms;
}

@keyframes first-run-improve-pop {
  0% {
    opacity: 0;
    translate: 0 14px;
    scale: 0.4;
  }
  20% {
    opacity: 1;
    translate: 0 -6px;
    scale: 1;
  }
  32% {
    translate: 0 0;
  }
  80% {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
  100% {
    opacity: 0;
    translate: 0 14px;
    scale: 0.6;
  }
}

.first-run-consent-notice {
  width: min(100%, 440px);
  margin: var(--openbot-space-4) 0 0;
  color: var(--openbot-text-muted);
  text-align: center;
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.first-run-consent-notice .first-run-consent-link {
  display: inline;
  vertical-align: baseline;
  font: inherit;
  color: var(--openbot-text-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@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 title still says thanks, and the toast still shows. */
  .first-run-choice-improve-pop {
    display: 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//home/ubuntu/openbot/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;
}

/* The fur paints past the avatar box and over the color row. Only the box takes the pointer, so a
   click there reaches the color under it. */
.first-agent-live-avatar .agent-avatar > svg {
  pointer-events: none;
}

.first-agent-avatar-fieldset {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

/* The automatic color and 17 colors: two full rows of 9, as in the agent settings. */
.first-agent-color-options {
  display: grid;
  grid-template-columns: repeat(9, 28px);
  justify-content: center;
  gap: var(--openbot-space-1);
}

.first-agent-face-options {
  display: flex;
  align-items: center;
  justify-content: center;
  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-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);
}

/* The swatch draws its own ring, so the ring and the dot share one box and stay concentric. */
.first-agent-color-choice[aria-pressed="true"] .first-agent-color-swatch {
  outline: 1px solid var(--openbot-accent-text);
  outline-offset: 4px;
}

.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;
}

.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: start;
  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//home/ubuntu/openbot/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 - 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-block: 0;
  padding-inline: var(--openbot-space-4) var(--openbot-space-2);
  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: calc(var(--openbot-icon-lg) * -0.14);

  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: 148px;
}

/* "No results" is under the plush. */
.global-search-empty {
  flex-direction: column;
  padding-block: var(--openbot-space-3);
  animation: global-search-fade-in var(--openbot-duration-normal) var(--openbot-ease-out) both;
}

/* The plush tilts on its bottom edge. Its eyes follow the caret, -1 to 1 on each axis. */
.global-search-plush {
  --ui-plush-size: 56px;
  display: block;
  transform-origin: 50% 100%;
}

.global-search-plush[data-gaze="follow"] .ui-plush-eyes {
  animation: none;
  translate: calc(var(--global-search-gaze-x) * var(--ui-plush-size) * 0.07)
    calc(var(--global-search-gaze-y) * var(--ui-plush-size) * 0.05);
  transition: translate var(--openbot-duration-fast) var(--openbot-ease-out);
}

@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-inline-start: 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);
  inset-inline-end: 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%;
  inset-inline-start: -7px;
  width: 3px;
  height: 0;
  border-start-start-radius: 0;
  border-start-end-radius: var(--openbot-radius-xs);
  border-end-end-radius: var(--openbot-radius-xs);
  border-end-start-radius: 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-lg);
}

.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;
  inset-inline-start: 0;
  height: auto;
}

.app-frame > * {
  min-height: 0;
}

.panel-edge {
  border-inline-end: 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);
  /* The logo of the page rail (`page-rail.css`) has the same top padding, to stay on this center line. */
  padding-block: 2px 0;
  padding-inline: 10px 3px;
}

/* 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-inline-end: 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 {
    --agent-avatar-optical-offset: calc(26px * -0.14);

    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 {
    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-inline-end: auto;
  border-radius: var(--openbot-radius-pill);
  padding-block: 0;
  padding-inline: var(--openbot-space-1) var(--openbot-space-2);
  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: start;
  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 past 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-inline-start: 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-inline-start: 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-lg);
}

.sidebar-history-button > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: var(--openbot-icon-stroke);
}

/* No chat to open in that direction. The arrow stays in its place, so the bar does not move. */
.sidebar-history-button:disabled,
.sidebar-history-button:disabled:hover {
  background: transparent;
  color: var(--openbot-text-muted);
  cursor: default;
  opacity: 0.4;
}

.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-lg);
}

.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);
}

/* The tint is clear, so the outline takes the colour the tint makes over the surface under it. A
   color-mix blends a clear colour and does not lay it over the other, but for a tint of alpha a, a share
   of 1 / (2 - a) made opaque gives the same colour. 54% is within two steps of that for the 12% and
   16% tints. A row with its own fill sets the outline again. */
:is(.sidebar-section-agent-drop-target, .sidebar-pinned-group-agent-drop-target) {
  --agent-avatar-outline-tinted: color-mix(
    in srgb,
    var(--openbot-accent-soft) 54%,
    var(--agent-avatar-outline, transparent)
  );
}

:is(.sidebar-section-agent-drop-target, .sidebar-pinned-group-agent-drop-target) > * {
  --agent-avatar-outline: color(from var(--agent-avatar-outline-tinted) srgb r g b / 1);
}

.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);
}

/* A closed section points to the reading direction. */
.sidebar-section-chevron-collapsed:dir(rtl) {
  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;
}

/* "Unread" uses the "Needs you" heading with a neutral count: the warning colour belongs to waits. */
.sidebar-unread-group .sidebar-waiting-group-count {
  background: var(--openbot-bg-control);
  color: var(--openbot-text-readable);
}

.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-block: 0;
  padding-inline: 8px 32px;
  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%;
  inset-inline-end: 9px;
  color: var(--openbot-text-muted);
  pointer-events: none;
  transform: translateY(-50%);
}

.sidebar-section-draft {
  min-height: 36px;
}

/* ---------------------------------------------------------------- folders */

/* A custom section is a folder. Folders do not indent: a folder in a folder names its parent before
   its own name. Folder headers stay at the top of the list while the chats under them scroll. */

/* The header needs a solid fill so the rows do not show through it. It sticks 4px higher, over the
   list's top padding, so no row shows above it. It keeps the 32px height of a section header. */
.sidebar:not(.sidebar-compact) .sidebar-folder > header {
  position: sticky;
  top: -4px;
  z-index: 2;
  background: var(--openbot-bg-sidebar);
}

/* Each header sticks below the 32px headers of its parents. */
.sidebar:not(.sidebar-compact) .sidebar-folder[data-depth="1"] > header {
  top: calc(-4px + 32px);
  z-index: 3;
}

.sidebar:not(.sidebar-compact) .sidebar-folder[data-depth="2"] > header {
  top: calc(-4px + 64px);
  z-index: 4;
}

/* The rows fade in under the folder headers that stay at the top, so no row is cut at a header's
   edge. `--agent-list-stuck-height` is the bottom of those headers, or 0 when none is at the top.
   These properties do not inherit: the list sets them while it scrolls, and an inherited change
   restyles every row under it (issue 6019). */
@property --agent-list-stuck-height {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --agent-list-fade-top {
  syntax: "*";
  inherits: false;
}

@property --agent-list-fade-bottom {
  syntax: "*";
  inherits: false;
}

.sidebar .agent-list:is(.scroll-fade-top, .scroll-fade-bottom) {
  --agent-list-fade-top: linear-gradient(var(--openbot-text-primary), var(--openbot-text-primary));
  --agent-list-fade-bottom: linear-gradient(var(--openbot-text-primary), var(--openbot-text-primary));
  -webkit-mask-image: var(--agent-list-fade-top), var(--agent-list-fade-bottom);
  mask-image: var(--agent-list-fade-top), var(--agent-list-fade-bottom);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.sidebar .agent-list.scroll-fade-top {
  --agent-list-fade-top: linear-gradient(
    to bottom,
    var(--openbot-text-primary) var(--agent-list-stuck-height),
    transparent var(--agent-list-stuck-height),
    var(--openbot-text-primary) calc(var(--agent-list-stuck-height) + var(--agent-list-fade-size, 18px))
  );
}

.sidebar .agent-list.scroll-fade-bottom {
  --agent-list-fade-bottom: linear-gradient(
    to bottom,
    var(--openbot-text-primary) calc(100% - var(--agent-list-fade-size, 18px)),
    transparent 100%
  );
}

/* The folder name starts in line with the avatars and the folder icon ends in line with the dates
   (7px padding and the 1px button border). On hover, the header gets the fill of a row. */
.sidebar-folder > header .sidebar-section-toggle {
  padding-inline: calc(var(--openbot-space-2) - 1px);
  color: var(--openbot-text-primary);
}

.sidebar-folder > header .sidebar-section-toggle:hover,
.sidebar-folder > header .sidebar-section-toggle:focus-visible {
  background: var(--openbot-bg-control);
  color: var(--openbot-text-primary);
}

.sidebar-folder > header .sidebar-section-name {
  font-weight: 600;
}

/* A folder in a folder has a lighter name, so the top folder stays the strongest line. */
.sidebar-folder:not([data-depth="0"]) > header .sidebar-section-name {
  font-weight: 500;
}

.sidebar-folder-parent {
  color: var(--openbot-text-muted);
  font-weight: 500;
}

.sidebar-folder-end {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--openbot-space-2);
}

.sidebar-folder-icon {
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
}

.sidebar-folder > header .sidebar-section-toggle:hover .sidebar-folder-icon {
  color: var(--openbot-text-secondary);
}

.sidebar-folder-unread {
  min-width: 18px;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

/* The collapse grid has one column. Without a zero minimum, long names in a folder in a folder make
   the column wider than the list. */
.sidebar-folder > .sidebar-section-collapse {
  grid-template-columns: minmax(0, 1fr);
}

/* A folder body holds the chats of the folder first, then its folders. It clips instead of hiding
   the overflow, so the headers of the folders in it can still stick. The spaces are those of a
   section: 4px between rows, and 6px above a folder, as between sections. */
.sidebar-folder > .sidebar-section-collapse > .sidebar-section-body {
  min-width: 0;
  overflow: clip;
}

.sidebar:not(.sidebar-compact) .sidebar-folder > .sidebar-section-collapse > .sidebar-section-body > .sidebar-folder {
  margin-top: var(--openbot-space-1-5);
}

/* A folder that a drop goes into keeps the tint of a section drop target on its headers too: the
   tint lies over their solid fill, so the rows under them still do not show. The outline lies over
   the sticky headers. */
.sidebar-folder.sidebar-section-agent-drop-target header {
  background: linear-gradient(var(--openbot-accent-soft), var(--openbot-accent-soft)), var(--openbot-bg-sidebar);
}

.sidebar-folder.sidebar-section-agent-drop-target:not(.sidebar-section-drop-after)::after {
  position: absolute;
  z-index: 5;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--openbot-accent-strong);
  content: "";
  pointer-events: none;
}

.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 {
  --agent-avatar-outline: var(--openbot-bg-surface-raised);

  background: var(--openbot-bg-surface-raised);
  transition: none;
}

.agent-row.sidebar-person-drag-preview {
  --agent-avatar-outline: var(--openbot-bg-surface-raised);

  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: 112px;
  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 {
  --sidebar-pinned-avatar-size: 56px;

  width: 72px;
  height: 102px;
  min-height: 102px;
  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: var(--sidebar-pinned-avatar-size);
  height: var(--sidebar-pinned-avatar-size);
  flex-basis: var(--sidebar-pinned-avatar-size);
}

.agent-row.sidebar-pinned-row .agent-avatar,
.agent-row.sidebar-pinned-row.person-row .person-avatar {
  width: var(--sidebar-pinned-avatar-size);
  height: var(--sidebar-pinned-avatar-size);
}

.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.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;
}

.agent-row {
  --agent-row-avatar-size: 46px;

  display: flex;
  width: 100%;
  height: 62px;
  min-height: 62px;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  padding: 8px;
  color: inherit;
  text-align: start;
  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 {
  --agent-avatar-outline: var(--openbot-bg-surface);

  background: var(--openbot-bg-surface);
}

.agent-row-avatar {
  position: relative;
  display: grid;
  width: var(--agent-row-avatar-size);
  height: var(--agent-row-avatar-size);
  flex: 0 0 var(--agent-row-avatar-size);
  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;
  inset-inline-end: -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);
}

/* In the light theme, a surface card on the light sidebar is hard to see (issue 4715), so the selected
   row has an ink fill, and keeps it on hover. The dark theme keeps the card, and so does the first
   agent button, which is the only row and needs its hover fill. The sidebar holds the colour,
   because the ring filter of the channel faces reads it there (`SidebarFrame`). */
:root[data-openbot-color-scheme="light"] .sidebar {
  --sidebar-row-selected: color-mix(in srgb, var(--openbot-text-primary) 10%, var(--openbot-bg-sidebar));
}

:root[data-openbot-color-scheme="light"] .sidebar .agent-row.agent-row-active:not(.sidebar-first-agent-action) {
  --agent-avatar-outline: var(--sidebar-row-selected);

  background: var(--sidebar-row-selected);
}

:root[data-openbot-color-scheme="light"] .sidebar .agent-row-active .agent-row-agent-status {
  border-color: var(--sidebar-row-selected);
}

/* The working badge, with its felt balls, is in `@openbot/ui/features/sidebar/sidebar-working-badge.css`. */

/* The unread count, the failed routine mark and the badge of an agent that waits for the user are
   felt too, with their transitions, in `@openbot/ui/features/sidebar/sidebar-felt-badges.css`. */

.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-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;
}

/* 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-block: 1px;
  padding-inline: 5px 7px;
  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-inline-start: 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);
}

/* The outline: a ring in the colour of the surface under the avatar, so a face that overlaps another
   face, a badge or a row edge reads as cut out of it. The surface sets `--agent-avatar-outline` where
   it sets its background; under any other the ring stays transparent, because a ring that misses the
   colour behind it shows as a halo. The ring is a stroke on the silhouette the Bloub paints first, the
   paper under its eyes. It is drawn behind that fill, so only the outer half shows, and it does not
   scale with the drawing, so the width is in pixels at every avatar size. */
.bloub-avatar-svg > g:nth-of-type(2) > path:first-child {
  stroke: var(--agent-avatar-outline, transparent);
  stroke-width: calc(var(--agent-avatar-outline-width, 1.5px) * 2);
  stroke-linejoin: round;
  paint-order: stroke fill;
  vector-effect: non-scaling-stroke;
}

/* The plush body is a picture, not a path, so the same ring follows its edge as four offset shadows
   in the surface colour. They sit on the whole drawing, in pixels, so the width matches the stroke.
   Bloub nests the body in groups whose depth changes between versions, so any image selects it. */
.bloub-avatar-svg:has(image) {
  --agent-avatar-ring-color: var(--agent-avatar-outline, transparent);
  --agent-avatar-ring-width: var(--agent-avatar-outline-width, 1.5px);

  filter: drop-shadow(var(--agent-avatar-ring-width) 0 0 var(--agent-avatar-ring-color))
    drop-shadow(calc(-1 * var(--agent-avatar-ring-width)) 0 0 var(--agent-avatar-ring-color))
    drop-shadow(0 var(--agent-avatar-ring-width) 0 var(--agent-avatar-ring-color))
    drop-shadow(0 calc(-1 * var(--agent-avatar-ring-width)) 0 var(--agent-avatar-ring-color));
}

/* A photo shows as the mobile app shows it: the image cropped to a circle, with no ring, border or
   background added, so its edge and colours stay as the person chose them. */
.agent-avatar-custom {
  overflow: hidden;
}

.agent-avatar-custom > img,
.composer-mention-avatar > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A photo has no face to move, so a busy agent's photo breathes: a slow scale of the whole circle.
   The generated plush shows each mood on its own face and felt pieces, and gets none of this. The
   custom property rides with the attribute, so a resting row starts no infinite animation. */
.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));
  }
}

/* A photo cannot close its eyes, so an asleep agent's photo fades instead. */
.agent-avatar[data-avatar="image"][data-mood="asleep"] {
  opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
  .agent-avatar[data-breathe] {
    animation: none;
  }
}

.agent-row .agent-avatar {
  --agent-avatar-optical-offset: calc(var(--agent-row-avatar-size) * -0.14);

  width: var(--agent-row-avatar-size);
  height: var(--agent-row-avatar-size);
}

.person-row .person-avatar {
  width: var(--agent-row-avatar-size);
  height: var(--agent-row-avatar-size);
}

.avatar-editor {
  position: relative;
  z-index: var(--openbot-layer-popover);
  width: min(284px, calc(var(--settings-panel-width, 360px) - 30px));
  max-width: calc(100vw - 24px);
  max-height: var(--kb-popper-content-available-height, none);
  margin: 0;
  overflow: hidden auto;
  overscroll-behavior: contain;
  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-block: 7px 3px;
  padding-inline: 13px 10px;
  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-heading-end {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}

/* The heading is upper case. The style tabs keep the case of other tabs. */
.avatar-style-tabs {
  text-transform: none;
  letter-spacing: normal;
}

.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;
}

/* The height follows the text: a hint that wraps to two lines must stay inside the padding. */
.avatar-image-upload {
  display: grid;
  width: calc(100% - 20px);
  height: auto;
  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: start;
  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-lg);
}

.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;
}

/* Balanced, so the hint breaks into two even lines and no "·" is left alone at a line end. */
.avatar-image-upload small {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 15px;
  text-wrap: balance;
}

.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: 4px;
  padding: 4px 10px 12px;
}

/* Ten shapes fill two rows of five. */
.avatar-shape-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.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: 44px;
}

.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);
}

/* The drawing keeps room above the body for the thinking dots, so the body sits low in its box.
   The optical offset lifts it to the middle of the tile and of its selected outline. */
.avatar-face-choice .agent-avatar {
  --agent-avatar-optical-offset: calc(30px * -0.14);

  width: 30px;
  height: 30px;
}

/* The eyes are the only change in this grid, so its faces are larger. */
.avatar-eyes-grid .avatar-face-choice {
  height: 46px;
}

.avatar-eyes-grid .agent-avatar {
  --agent-avatar-optical-offset: calc(38px * -0.14);

  width: 38px;
  height: 38px;
}

.avatar-color-grid {
  display: grid;
  min-width: 0;
  margin: 0;
  border: 0;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 2px;
  padding: 4px 10px 12px;
}

/* Automatic and the 17 colours fill two rows of nine. A column is narrower than the button
   padding, so the tile has none; with it, each tile overflowed onto the next one's ring. */
.avatar-color-choice {
  width: 100%;
  height: 32px;
  padding: 0;
}

.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: 600;
  line-height: 1;
}

.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;
}

/* At the default width and below, the wait chip keeps only its icon so that a long name keeps its
   space. The row's label and tooltip still name the action. The chip is then an 18px circle. */
@container (max-width: 300px) {
  .agent-row-wait-chip:has(.agent-row-wait-chip-label) {
    width: 18px;
    height: 18px;
    justify-content: center;
    padding: 0;
  }

  .agent-row-wait-chip:has(.agent-row-wait-chip-label) svg {
    width: 12px;
    height: 12px;
  }

  .agent-row-wait-chip-label {
    display: none;
  }
}

/* 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 62px row and 46px 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(340px, 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. A long window label is cut
   before the bar gets narrower than its minimum. */
.account-usage-providers {
  display: grid;
  margin: 0;
  padding: 0;
  grid-template-columns: auto minmax(0, max-content) minmax(var(--openbot-space-8), 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-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-usage-window-reset {
  text-align: end;
}

.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: end;
}

.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 {
  /* An 18px fade is too short for a 64px row: a cut avatar looks like a hard edge. Half a row fades. */
  --agent-list-fade-size: 32px;

  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;
}

/* The avatar and the gap after it are wider than the 48px inside a compact row, so the centred
   content starts 3px early. The offset puts the 46px avatar in the middle of the 64px row. */
.sidebar-compact .agent-row-avatar {
  transform: translateX(4px);
}

.sidebar-compact .agent-row.sidebar-pinned-row {
  --sidebar-pinned-avatar-size: 48px;

  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);
}

/* Right to left, the compact offsets above go the other way. `:dir()` keeps the specificity under the
 * macOS rules for the compact top row. */
.sidebar-compact .sidebar-new-button:dir(rtl) {
  transform: translateX(-6px) scale(0.92);
}

.sidebar-compact .sidebar-toggle-button:dir(rtl) {
  transform: translateX(-13px);
}

.sidebar-compact .sidebar-toggle-button:dir(rtl):active {
  transform: translateX(-13px) scale(0.96);
}

.sidebar-compact .search-field:dir(rtl) {
  transform: translateX(8px);
}

.sidebar-compact .agent-row-avatar:dir(rtl) {
  transform: translateX(-4px);
}

.sidebar-compact .agent-row-copy:dir(rtl) {
  transform: translateX(8px);
}

.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);
}

.sidebar {
  --agent-avatar-outline: 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);
}

.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-button[aria-expanded="true"],
.composer-attachment > button: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 {
  --agent-avatar-outline: var(--openbot-bg-control);

  background: var(--openbot-bg-control);
}

/* A row is a ghost button. With a fine pointer, the ghost hover fill wins over the row fill
   (`primitives.css`), so the avatar ring takes that fill too. */
@media (hover: hover) and (pointer: fine) and (min-width: 601px) {
  .agent-row:hover {
    --agent-avatar-outline: var(--openbot-bg-control-hover);
  }
}

.agent-list[data-sidebar-dragging] .agent-row:hover {
  --agent-avatar-outline: inherit;

  background: transparent;
}

.agent-list[data-sidebar-dragging] .agent-row.agent-row-active,
.agent-list[data-sidebar-dragging] .agent-row.agent-row-active:hover {
  --agent-avatar-outline: var(--openbot-bg-surface);

  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);
}

.composer-mention-token,
.remote-desktop-empty-mark {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-secondary);
}
.server-rail-muted {
  position: absolute;
  inset-inline-end: 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//home/ubuntu/openbot/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;
}

/* Back and forward follow the reading direction. */
.sidebar-history-button > svg:dir(rtl) {
  transform: scaleX(-1);
}


/* /@fs//home/ubuntu/openbot/packages/ui/src/features/sidebar/sidebar-working-badge.css */
/* The badge of a sidebar agent that works: three felt balls hop in a wave inside a pill.
   The thread tabs show the same dots in a smaller pill, so the ball rules apply to this badge only. */

.agent-row-agent-status-working {
  width: 30px;
  height: 16px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface);
  /* A shadow makes a halo on the dark sidebar. */
  box-shadow: none;
}

/* The balls stand on a line as high as one ball, so a ball at rest is on the centre of the pill. */
.agent-row-agent-status-working .agent-row-thinking-dots {
  align-items: flex-end;
  gap: 1px;
  height: 7px;
}

.agent-row-agent-status-working .agent-row-thinking-dots i {
  width: 7px;
  height: 7px;
  border-radius: var(--openbot-radius-pill);
  background: url("/@fs/home/ubuntu/openbot/packages/ui/src/assets/plush/ball-lilac.webp") center / contain no-repeat;
  transform-origin: 50% 100%;
  animation: none;
}

.agent-row-agent-status-working .agent-row-thinking-dots i:nth-child(2) {
  background-image: url("/@fs/home/ubuntu/openbot/packages/ui/src/assets/plush/ball-mint.webp");
}

.agent-row-agent-status-working .agent-row-thinking-dots i:nth-child(3) {
  background-image: url("/@fs/home/ubuntu/openbot/packages/ui/src/assets/plush/ball-pink.webp");
}

@media (prefers-reduced-motion: no-preference) {
  .agent-row-agent-status-working .agent-row-thinking-dots i {
    animation: agent-row-ball-hop 960ms cubic-bezier(0.5, 0, 0.5, 1) infinite;
  }

  .agent-row-agent-status-working .agent-row-thinking-dots i:nth-child(2) {
    animation-delay: 130ms;
  }

  .agent-row-agent-status-working .agent-row-thinking-dots i:nth-child(3) {
    animation-delay: 260ms;
  }
}

/* A low hop with a soft squash, so each ball stays inside the pill border. */
@keyframes agent-row-ball-hop {
  0%,
  62%,
  100% {
    translate: 0 0;
    scale: 1 1;
  }

  8% {
    scale: 1.1 0.9;
  }

  26% {
    translate: 0 -1.75px;
    scale: 0.94 1.06;
  }

  44% {
    translate: 0 0;
    scale: 1.08 0.92;
  }

  54% {
    scale: 0.98 1.02;
  }
}


/* /@fs//home/ubuntu/openbot/packages/ui/src/features/sidebar/sidebar-felt-badges.css */
/* The felt badges of a sidebar avatar: the unread count, cream yarn digits on a plum felt pill, the
   failed routine mark, a raspberry felt ball with a cream felt X, and the badge of an agent that waits
   for the user, an amber felt ball with a cream yarn icon. No badge has a drop shadow.

   The badges share one anchor and one felt height, so a one-digit count is the same round ball as
   the failed mark, and a longer count grows to the left from the same right end. The waiting ball is
   2px larger, so it is the first badge the eye finds in a busy list. The felt box is the
   16px of the badge before it. The ring around it is in the colour of the row under the avatar, the
   same colour as the outline of the faces, and is 3.5px wide. Chrome rounds a border width down to
   whole pixels, so the border takes the 3 whole pixels and a solid ring shadow adds the half pixel.
   The ring grows outwards, so the felt stays where the shipped badge was. The badge fills its padding
   box with the felt colour, which snaps to the device pixels with the ring, so the ring is the same
   width on all four sides. The felt texture is a separate box at a fractional offset, so it lands up
   to one device pixel off; it stays 0.25px inside the fill and never covers the ring. The base badge
   rules are in `app-shell.css`; the doubled class wins over its active row border. */

.agent-row-agent-status:is(
  .agent-row-agent-status-unread,
  .agent-row-agent-status-routine-failed,
  .agent-row-agent-status-waiting
) {
  --sidebar-felt-ring: var(--agent-avatar-outline, var(--openbot-bg-sidebar));
  --sidebar-felt-ring-width: 3.5px;
  --sidebar-felt-ring-border: 3px;
  --sidebar-felt-box: 16px;

  /* The shipped badge sat 3px past the avatar, plus its ring. */
  inset-inline-end: calc(-3px - var(--sidebar-felt-ring-border));
  bottom: calc(-1px - var(--sidebar-felt-ring-border));
  box-sizing: border-box;
  min-width: calc(var(--sidebar-felt-box) + 2 * var(--sidebar-felt-ring-border));
  height: calc(var(--sidebar-felt-box) + 2 * var(--sidebar-felt-ring-border));
  isolation: isolate;
  border: var(--sidebar-felt-ring-border) solid var(--sidebar-felt-ring);
  border-radius: var(--openbot-radius-pill);
  background: var(--sidebar-felt-under) padding-box;
  box-shadow: 0 0 0 calc(var(--sidebar-felt-ring-width) - var(--sidebar-felt-ring-border)) var(--sidebar-felt-ring);
}

.agent-row-agent-status-unread {
  --sidebar-felt-under: linear-gradient(to bottom, var(--openbot-felt-plum-top), var(--openbot-felt-plum-bottom));
  --felt-box: var(--sidebar-felt-box);

  /* The digits roll in and out inside the felt, as on a counter. The clip is the rounded padding box,
     so it cuts no part of the ring or the felt. */
  overflow: clip;
  padding: 0 3px;
  color: var(--openbot-felt-cream);
  font-size: var(--openbot-text-lg);
  line-height: 16px;
}

/* The felt pill and the cream digit stroke are the same as on the "+N" count of a channel cluster,
   so `channel-avatar.css` holds them for both badges. */

/* The letter spacing also adds space after the last digit. The negative end margin removes it, so
   the digits are on the centre of the pill. The yarn look is CSS only, so Chrome and Firefox draw
   the same digits: an SVG filter is not safe at this size, because Firefox rounds a 0.35px dilate up
   to 1px and the digits fuse. */
.agent-row-unread-count {
  position: relative;
  margin-inline-end: -0.06em;
  letter-spacing: 0.06em;
}

/* The failed mark: a raspberry felt ball with two cream felt pills crossed on it. The ball is opaque
   to a radius of 0.45 of the art, so the ball is opaque past the clip 0.25px inside the felt box, on
   a raspberry fill, as on the pill. The mark sits 2px further in than the count, closer to the face. */
.agent-row-agent-status.agent-row-agent-status-routine-failed {
  --sidebar-felt-under: linear-gradient(
    to bottom,
    var(--openbot-felt-raspberry-top),
    var(--openbot-felt-raspberry-bottom)
  );

  inset-inline-end: calc(-1px - var(--sidebar-felt-ring-border));
  bottom: calc(1px - var(--sidebar-felt-ring-border));
  width: calc(var(--sidebar-felt-box) + 2 * var(--sidebar-felt-ring-border));
}

.agent-row-agent-status-routine-failed::before {
  position: absolute;
  z-index: -1;
  inset: -0.75px;
  background: url("/@fs/home/ubuntu/openbot/packages/ui/src/assets/plush/felt-x-ball.webp") center / 100% 100% no-repeat;
  clip-path: circle(calc(50% - 1px));
  content: "";
}

.agent-row-agent-status-routine-failed svg {
  display: none;
}

/* The waiting badge: an amber felt ball with the icon of the wait reason in cream yarn. The fill and
   the felt art are in `channel-avatar.css` with the unread pill. The thick round stroke makes the icon
   read as yarn at this size. */
.agent-row-agent-status.agent-row-agent-status-waiting {
  --sidebar-felt-box: 18px;
  --sidebar-felt-under: linear-gradient(to bottom, var(--openbot-felt-amber-top), var(--openbot-felt-amber-bottom));
  --felt-box: var(--sidebar-felt-box);

  width: calc(var(--sidebar-felt-box) + 2 * var(--sidebar-felt-ring-border));
  color: var(--openbot-felt-cream);
}

.agent-row-agent-status-waiting svg {
  width: 12px;
  height: 12px;
  stroke-width: 2.75;
}

/* Transitions. A felt badge lands with a squash, bounces and rolls its digits when the count changes,
   and shrinks away when it closes; the pill also animates to its new width (`SidebarAgentIndicator`).
   The X lands, then shakes "no" once. The badge squashes on the avatar, so it scales from its bottom
   edge. With reduced motion, the component sets none of these classes and the badge changes at once. */
.agent-row-agent-status:is(
  .agent-row-agent-status-unread,
  .agent-row-agent-status-routine-failed,
  .agent-row-agent-status-waiting
) {
  transform-origin: 50% 100%;
}

/* The old count lies on top of the new one while it rolls away. */
.agent-row-unread-count.agent-row-unread-count-old {
  position: absolute;
  inset: 0;
  display: grid;
  margin: 0;
  place-items: center;
}

.agent-row-unread-count.agent-row-unread-count-roll-gone {
  visibility: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  .agent-row-agent-status:is(
    .agent-row-agent-status-unread,
    .agent-row-agent-status-routine-failed,
    .agent-row-agent-status-waiting
  ).agent-row-agent-status-entering {
    animation: sidebar-felt-in var(--openbot-duration-slow) cubic-bezier(0.2, 0, 0, 1) both;
  }

  .agent-row-agent-status-unread.agent-row-agent-status-bumping {
    animation: sidebar-felt-bump 360ms ease-out;
  }

  .agent-row-agent-status-unread.agent-row-agent-status-bumping-b {
    animation: sidebar-felt-bump-b 360ms ease-out;
  }

  .agent-row-agent-status:is(
    .agent-row-agent-status-unread,
    .agent-row-agent-status-routine-failed
  ).agent-row-agent-status-leaving {
    animation: sidebar-felt-out var(--openbot-duration-overlay) cubic-bezier(0.5, 0, 0.75, 0) both;
  }

  .agent-row-unread-count.agent-row-unread-count-roll-in {
    animation: sidebar-felt-roll-in 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .agent-row-unread-count.agent-row-unread-count-roll-in-b {
    animation: sidebar-felt-roll-in-b 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .agent-row-unread-count.agent-row-unread-count-roll-out {
    animation: sidebar-felt-roll-out 200ms ease-in both;
  }

  .agent-row-unread-count.agent-row-unread-count-roll-out-b {
    animation: sidebar-felt-roll-out-b 200ms ease-in both;
  }
}

/* A felt badge fades in and grows a little, with no bounce: the sidebar changes often. */
@keyframes sidebar-felt-in {
  from {
    opacity: 0;
    scale: 0.7;
  }
}

/* Two names for one bounce: a change during a bounce changes the name, which starts it again. */
@keyframes sidebar-felt-bump {
  35% {
    scale: 1.12 0.88;
  }

  65% {
    scale: 0.97 1.04;
  }
}

@keyframes sidebar-felt-bump-b {
  35% {
    scale: 1.12 0.88;
  }

  65% {
    scale: 0.97 1.04;
  }
}

@keyframes sidebar-felt-out {
  30% {
    scale: 1.1 0.9;
  }

  100% {
    opacity: 0;
    scale: 0.2;
  }
}

@keyframes sidebar-felt-roll-in {
  from {
    opacity: 0;
    translate: 0 65%;
  }
}

@keyframes sidebar-felt-roll-in-b {
  from {
    opacity: 0;
    translate: 0 65%;
  }
}

@keyframes sidebar-felt-roll-out {
  to {
    opacity: 0;
    translate: 0 -65%;
  }
}

@keyframes sidebar-felt-roll-out-b {
  to {
    opacity: 0;
    translate: 0 -65%;
  }
}

/* The filter definitions of the channel faces take no space. They stay rendered: Firefox does not
   apply a filter from an SVG that is not displayed. */
.sidebar-plush-ring-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}


/* /@fs//home/ubuntu/openbot/packages/ui/src/features/agent-dock/agent-dock.css */
/* The liquid agent dock on the right edge of the window. See `AgentDock.tsx`. */

/* The stage sits on the right edge, centred in the window. It lets clicks through where it is empty. */
.agent-dock {
  /* The liquid has the window frame colour, so the dock reads as part of the frame. The glass window
     has a clear frame; overlapping clear shapes would show their seams, so the dock stays solid. */
  --agent-dock-fill: var(--window-solid-frame, var(--openbot-bg-frame));
  /* The seat badges are cut out of the dock, as the sidebar badges are cut out of the sidebar. */
  --agent-avatar-outline: var(--agent-dock-fill);
  --agent-row-avatar-size: 40px;

  position: fixed;
  z-index: var(--openbot-layer-dropdown);
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  /* The motion loop springs `--agent-dock-tuck` when the dock slides into the edge. */
  translate: var(--agent-dock-tuck, 0px) 0;
  pointer-events: none;
}

/* On the left edge the stage is mirrored. */
.agent-dock[data-side="left"] {
  right: auto;
  left: 0;
  transform: translateY(-50%) scaleX(-1);
  translate: calc(-1 * var(--agent-dock-tuck, 0px)) 0;
}

/* The dock body between the seats. It takes the pointer; only the handle below moves the dock. */
.agent-dock-hit {
  position: absolute;
  pointer-events: auto;
}

/* The handle below the dock: an arc in the dock colour beside the bottom tail. It shows only on a dock
   that the user can move. */
.agent-dock-handle {
  position: absolute;
  top: -40px;
  left: -40px;
  overflow: visible;
  fill: none;
}

.agent-dock:not([data-draggable]) .agent-dock-handle {
  display: none;
}

.agent-dock-handle-arc {
  stroke: var(--agent-dock-fill);
  stroke-linecap: round;
  transition:
    stroke-width var(--openbot-duration-normal) var(--openbot-ease-out),
    translate var(--openbot-duration-normal) var(--openbot-ease-out);
}

/* The handle answers the pointer: it gets thicker and comes nearer to the dock, more while it drags. */
.agent-dock-handle:has(.agent-dock-handle-hit:hover) .agent-dock-handle-arc {
  stroke-width: 5.5px;
  translate: 0 -2px;
}

.agent-dock[data-dragging] .agent-dock-handle .agent-dock-handle-arc {
  stroke-width: 6px;
  translate: 0 -3px;
}

.agent-dock-handle-hit {
  stroke: var(--openbot-transparent);
  stroke-linecap: round;
  pointer-events: stroke;
  cursor: grab;
}

.agent-dock-handle-hit:active {
  cursor: grabbing;
}

.agent-dock-filter {
  position: absolute;
}

/* The liquid. It runs past the window edge, so the filter does not round the edge off. */
.agent-dock-liquid {
  position: absolute;
  inset: -40px -60px -40px -40px;
}

.agent-dock-liquid > * {
  position: absolute;
  background: var(--agent-dock-fill);
}

.agent-dock-liquid > .agent-dock-shapes {
  top: 0;
  left: 0;
  overflow: visible;
  background: var(--openbot-transparent);
  fill: var(--agent-dock-fill);
}

.agent-dock-edge {
  position: absolute;
  top: -40px;
  left: -40px;
  overflow: visible;
  fill: var(--agent-dock-fill);
}

.agent-dock-panel-body {
  margin-left: 40px;
  margin-top: 40px;
  opacity: 0;
}

.agent-dock-drop {
  top: 40px;
  left: 40px;
  width: 44px;
  height: 44px;
  border-radius: var(--openbot-radius-pill);
  transform: scale(0);
}

/* Seats and the add button. */
.agent-dock-seats {
  position: absolute;
  inset: 0;
}

.agent-dock-seat {
  position: absolute;
  top: 0;
  width: 44px;
  height: 44px;
  pointer-events: auto;
  transform-origin: 50% 50%;
}

/* The seats scroll when the dock is full. The motion loop sets the top and the height. */
.agent-dock-seat-scroll {
  position: absolute;
  top: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  pointer-events: auto;
  scrollbar-width: none;
  --agent-dock-seat-fade-top: 0px;
  --agent-dock-seat-fade-bottom: 0px;
}

.agent-dock-seat-scroll::-webkit-scrollbar {
  display: none;
}

/* The motion loop sets the height, which springs down when a seat goes. */
.agent-dock-seat-list {
  position: relative;
  overflow: clip;
}

/* An edge with more seats behind it fades out. The selectors outrank the global .scroll-fade-* masks. */
.agent-dock-seats .agent-dock-seat-scroll:is(.scroll-fade-top, .scroll-fade-bottom) {
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent,
    var(--openbot-text-primary) var(--agent-dock-seat-fade-top),
    var(--openbot-text-primary) calc(100% - var(--agent-dock-seat-fade-bottom)),
    transparent
  );
  mask-image: linear-gradient(
    to bottom,
    transparent,
    var(--openbot-text-primary) var(--agent-dock-seat-fade-top),
    var(--openbot-text-primary) calc(100% - var(--agent-dock-seat-fade-bottom)),
    transparent
  );
}

.agent-dock-seat-scroll.scroll-fade-top {
  --agent-dock-seat-fade-top: var(--agent-dock-seat-fade);
}

.agent-dock-seat-scroll.scroll-fade-bottom {
  --agent-dock-seat-fade-bottom: var(--agent-dock-seat-fade);
}

.agent-dock-seat-button {
  position: relative;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  padding: 0;
  background: var(--openbot-transparent);
  color: var(--openbot-text-muted);
  cursor: pointer;
  transition:
    color var(--openbot-duration-normal) var(--openbot-ease-out),
    transform var(--openbot-duration-normal) var(--openbot-ease-out);
}

/* The avatar drawing runs past the seat. Only the seat takes the pointer, so a press between the
   seats lands on the dock body and drags it. */
.agent-dock-seat-button * {
  pointer-events: none;
}

.agent-dock-seat-button:hover {
  color: var(--openbot-text-primary);
  transform: scale(1.06);
}

.agent-dock-seat-button:active {
  transform: scale(0.92);
}

.agent-dock-seat-button:focus-visible {
  outline: 1px solid var(--openbot-border-focus);
  outline-offset: 2px;
}

/* The open agent is a little larger; the liquid neck marks it too. */
.agent-dock-seat-button[data-open] {
  transform: scale(1.12);
}

/* A dragged seat is lifted above the other seats, which make room for it. */
.agent-dock-seat[data-dragging] {
  z-index: 1;
}

.agent-dock-seat[data-dragging] .agent-dock-seat-button {
  color: var(--openbot-text-primary);
  cursor: grabbing;
  transform: scale(1.12);
}

.agent-dock-seat-button .agent-avatar {
  /* The plush art sits low in its box. Every app surface lifts it by 14% of the face size. */
  --agent-avatar-optical-offset: calc(40px * -0.14);

  width: 40px;
  height: 40px;
}

/* The sidebar badge, with the dock colour for its cut-out border. */
.agent-dock-seat-button .agent-row-agent-status {
  border-color: var(--agent-dock-fill);
}

.agent-dock-add svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}

/* The add menu lists every agent that is not on the dock. With many agents it is taller than the dock
 * window, so it fits the space left and only the agent rows scroll. The search field and Dock
 * settings stay in place. The rows fade at an edge with more agents behind it (the shared
 * .scroll-fade-* masks). */
.agent-dock-add-menu.ui-action-menu {
  display: flex;
  max-height: min(560px, calc(100dvh - 16px), var(--kb-popper-content-available-height, 560px));
  flex-direction: column;
}

/* A fixed width, so the menu does not change size while a search removes rows. */
.agent-dock-add-menu-search.ui-action-menu {
  width: 232px;
}

/* The list reaches the panel edges, so the separator before the channels does not overflow it. */
.agent-dock-add-list {
  min-height: 0;
  flex: 1 1 auto;
  margin-inline: calc(var(--ui-menu-padding) * -1);
  padding-inline: var(--ui-menu-padding);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

/* A Bloub drawing is larger than its avatar box. Without the clip, the last row overflows the list by a
 * few pixels, so a short list scrolls and shows the bottom fade. The list already cut that part. */
.agent-dock-add-list > [role="menuitem"] {
  overflow-y: clip;
}

.agent-dock-add-list::-webkit-scrollbar {
  display: none;
}

/* Kobalte draws the separator as an hr. The menu rule styles only a direct hr, so this one uses the same line. */
.agent-dock-add-list > hr {
  height: 1px;
  margin: var(--ui-menu-padding) calc(var(--ui-menu-padding) * -1);
  border: 0;
  background: var(--openbot-border);
}

/* The shared search select row. Its line goes from edge to edge of the menu, as the separator does. */
.agent-dock-add-search {
  margin: calc(var(--ui-menu-padding) * -1) calc(var(--ui-menu-padding) * -1) var(--openbot-space-1);
}

/* The field takes the focus each time the menu opens, so it shows no border or focus ring. */
.agent-dock-add-search .agent-dock-add-search-input {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.agent-dock-add-search .agent-dock-add-search-input:focus-visible {
  outline: none;
  box-shadow: none;
}

.agent-dock-menu-avatar.agent-avatar {
  width: 20px;
  height: 20px;
}

.agent-dock-menu-channel {
  display: inline-flex;
}

.agent-dock-menu-channel .channel-avatar-cluster {
  --channel-avatar-size: 20px;
  --agent-avatar-outline-width: 1px;
}

/* The chat, over the liquid panel. */
.agent-dock-panel {
  position: absolute;
  top: 0;
  color: var(--openbot-text-primary);
  opacity: 0;
  transform-origin: 100% 50%;
}

.agent-dock-panel[data-open] {
  pointer-events: auto;
}

.agent-dock-chat {
  display: flex;
  height: 100%;
  flex-direction: column;
  animation: agent-dock-swap var(--openbot-duration-island-content) var(--openbot-ease-out);
}

@keyframes agent-dock-swap {
  from {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(8px);
  }
}

.agent-dock-chat-header {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-3) var(--openbot-space-3) var(--openbot-space-2) var(--openbot-space-4);
}

.agent-dock-chat-avatar.agent-avatar {
  --agent-avatar-optical-offset: calc(34px * -0.14);

  width: 34px;
  height: 34px;
  flex: 0 0 auto;
}

.agent-dock-chat-channel {
  display: inline-flex;
  flex: 0 0 auto;
}

.agent-dock-chat-channel .channel-avatar-cluster {
  --channel-avatar-size: 34px;
}

.agent-dock-chat-title {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  line-height: var(--openbot-leading-sm);
}

.agent-dock-chat-title strong {
  overflow: hidden;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-dock-chat-title span {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-dock-icon {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  padding: 0;
  background: var(--openbot-transparent);
  color: var(--openbot-text-muted);
  cursor: pointer;
}

.agent-dock-icon:hover {
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-primary);
}

.agent-dock-icon svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}

/* The log and its scroll thumb. The thumb stays outside the faded edges of the log. */
.agent-dock-log {
  position: relative;
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}

/* The system scrollbar stays hidden: the faded edges and the thumb show where the reader is. */
.agent-dock-messages {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  padding: var(--openbot-space-2) var(--openbot-space-4) var(--openbot-space-3);
  scrollbar-width: none;
  --agent-dock-fade-top: 0px;
  --agent-dock-fade-bottom: 0px;
}

.agent-dock-messages::-webkit-scrollbar {
  display: none;
}

.agent-dock-messages-content {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  gap: var(--openbot-space-2);
}

.agent-dock-scroll-thumb {
  position: absolute;
  top: 0;
  right: 3px;
  width: 3px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-muted);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--openbot-duration-overlay) var(--openbot-ease-out);
}

.agent-dock-scroll-thumb[data-scrollable][data-shown] {
  opacity: 0.5;
}

/* An edge with more messages behind it fades out. The selectors outrank the global .scroll-fade-* masks. */
.agent-dock-chat .agent-dock-messages:is(.scroll-fade-top, .scroll-fade-bottom) {
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent,
    var(--openbot-text-primary) var(--agent-dock-fade-top),
    var(--openbot-text-primary) calc(100% - var(--agent-dock-fade-bottom)),
    transparent
  );
  mask-image: linear-gradient(
    to bottom,
    transparent,
    var(--openbot-text-primary) var(--agent-dock-fade-top),
    var(--openbot-text-primary) calc(100% - var(--agent-dock-fade-bottom)),
    transparent
  );
}

.agent-dock-messages.scroll-fade-top {
  --agent-dock-fade-top: 32px;
}

.agent-dock-messages.scroll-fade-bottom {
  --agent-dock-fade-bottom: 32px;
}

.agent-dock-empty {
  margin: auto 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  text-align: center;
}

.agent-dock-bubble {
  max-width: 85%;
  flex: none;
  font-size: var(--openbot-text-md);
  overflow-wrap: anywhere;
}

.agent-dock-bubble[data-pending] {
  opacity: 0.6;
}

.agent-dock-bubble[data-error] {
  color: var(--openbot-danger-text);
}

/* The author of a channel message from someone else. */
.agent-dock-author {
  display: block;
  margin-block-end: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: 500;
}

.agent-dock-text {
  margin: 0;
  white-space: pre-wrap;
}

/* The chat's Markdown, a size down to fit the panel. */
.agent-dock-markdown {
  min-width: 0;
  font-size: var(--openbot-text-md);
}

.agent-dock-typing {
  display: flex;
  padding-block: var(--openbot-space-1);
}

.agent-dock-typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.agent-dock-typing-dots i {
  width: 6px;
  height: 6px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-muted);
  animation: agent-dock-dot 1s var(--openbot-ease-in-out) infinite;
}

.agent-dock-typing-dots i:nth-child(2) {
  animation-delay: 0.15s;
}

.agent-dock-typing-dots i:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes agent-dock-dot {
  50% {
    opacity: 0.3;
    transform: translateY(-3px);
  }
}

.agent-dock-sr {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The agent waits for the user. The answer controls are in the main window. */
.agent-dock-wait {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin: 0 var(--openbot-space-3);
  border-radius: var(--openbot-radius-lg);
  padding: var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-3);
  background: var(--openbot-bg-surface);
  font-size: var(--openbot-text-sm);
}

.agent-dock-wait-icon {
  display: grid;
  flex: none;
  place-items: center;
  color: var(--openbot-text-muted);
}

.agent-dock-wait-icon svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

.agent-dock-wait-title {
  min-width: 0;
  flex: 1;
}

.agent-dock-error {
  margin: var(--openbot-space-2) var(--openbot-space-4) 0;
  color: var(--openbot-danger-text);
  font-size: var(--openbot-text-sm);
}

/* The composer's wrap places the mention picker above the composer, in the panel. The composer has its
   own margins, and the editor keeps the dock's height limit. */
.agent-dock-composer-wrap.composer-wrap {
  --composer-editor-limit: initial;

  padding: 0;
}

/* As in the main chat, the picker is 12px narrower on each side than the composer. */
.agent-dock-composer-wrap .mention-picker {
  --mention-picker-side-inset: calc(var(--openbot-space-3) + 12px);
}

/* The app's compact composer, as the side-question and diagram chat panels use it. */
.agent-dock-composer.composer[data-compact] {
  grid-template-columns: minmax(0, 1fr) auto;
  margin: var(--openbot-space-2) var(--openbot-space-3) var(--openbot-space-3);
}

/* Panel radius 24 = composer radius 12 + gap 12, so the corners are concentric. A focus halo would
   make the gap 9 px at the corner; the border alone shows focus. */
.agent-dock-composer.composer[data-compact]:focus-within {
  box-shadow: none;
}

.agent-dock-composer.composer[data-compact] > .composer-input-label {
  grid-column: 1;
}

/* The finished-work shelf beside the dock. See `AgentDockShelf.tsx`. The results drip out of the dock
   and stand on the line between the last agent and the add button. */
.agent-dock-shelf {
  /* The side the results come from and go back to: the dock. */
  --agent-dock-shelf-toward: 1;

  position: absolute;
  display: grid;
  justify-items: end;
  gap: var(--openbot-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.agent-dock-shelf[hidden] {
  display: none;
}

.agent-dock-shelf-item {
  animation: agent-dock-shelf-drip 560ms cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
  transition:
    opacity var(--openbot-duration-normal) ease-out,
    translate var(--openbot-duration-normal) ease-out;
}

.agent-dock-shelf-item[data-leaving] {
  opacity: 0;
  translate: calc(var(--agent-dock-shelf-toward) * 24px) 0;
}

@keyframes agent-dock-shelf-drip {
  from {
    opacity: 0;
    scale: 0.6;
    translate: calc(var(--agent-dock-shelf-toward) * 32px) 0;
  }
}

/* Over the shared button: its font, gap, hover fill and focus ring are not the shelf look. */
.agent-dock-shelf :is(.agent-dock-result, .agent-dock-shelf-more) {
  gap: 0;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  background: var(--agent-dock-fill);
  font: inherit;
  font-size: var(--openbot-text-sm);
  white-space: nowrap;
  pointer-events: auto;
  cursor: pointer;
}

.agent-dock-shelf :is(.agent-dock-result, .agent-dock-shelf-more):focus-visible {
  outline: 1px solid var(--openbot-border-focus);
  outline-offset: 2px;
  box-shadow: none;
}

.agent-dock-shelf :is(.agent-dock-result, .agent-dock-shelf-more):hover:not(:disabled) {
  background: var(--agent-dock-fill);
}

.agent-dock-result {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 var(--openbot-space-4) 0 var(--openbot-space-1);
  color: var(--openbot-text-primary);
  transition: translate var(--openbot-duration-normal) cubic-bezier(0.34, 1.56, 0.64, 1);
}

.agent-dock-result:hover {
  translate: calc(var(--agent-dock-shelf-toward) * -4px) 0;
}

.agent-dock-result .agent-avatar {
  --agent-avatar-optical-offset: calc(32px * -0.14);

  flex: none;
  width: 32px;
  height: 32px;
}

.agent-dock-result > svg {
  flex: none;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  margin-left: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
}

.agent-dock-result-label {
  max-width: 240px;
  overflow: hidden;
  margin-left: var(--openbot-space-2);
  font-weight: var(--openbot-weight-medium);
  text-overflow: ellipsis;
}

.agent-dock-shelf-more {
  height: 28px;
  padding: 0 var(--openbot-space-3);
  color: var(--openbot-text-secondary);
  font-variant-numeric: tabular-nums;
}

.agent-dock-shelf-more:hover {
  color: var(--openbot-text-primary);
}

/* On the left edge the seats and the chat are mirrored back, so they read as usual. */
.agent-dock[data-side="left"] .agent-dock-seat,
.agent-dock[data-side="left"] .agent-dock-panel {
  scale: -1 1;
}

.agent-dock[data-side="left"] .agent-dock-panel {
  transform-origin: 50% 50%;
}

/* The shelf is mirrored back too. Its results then come from the left, where the dock is. */
.agent-dock[data-side="left"] .agent-dock-shelf {
  --agent-dock-shelf-toward: -1;

  justify-items: start;
  scale: -1 1;
}

/* The dock is above the other apps. Its loops run only while the user uses the dock. */
.agent-dock[data-ambient-motion="paused"] :is(.ui-spinner, .agent-row-thinking-dots i) {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .agent-dock-handle-arc,
  .agent-dock-scroll-thumb {
    transition: none;
  }

  .agent-dock-chat,
  .agent-dock-typing-dots i {
    animation: none;
  }

  .agent-dock-seat-button,
  .agent-dock-result {
    transition: none;
  }

  .agent-dock-shelf-item {
    animation: none;
  }
}

/* The dock window at the right edge of the screen: the apps under it show through all of it but the dock. */
:root[data-surface="agent-dock"],
:root[data-surface="agent-dock"] body,
:root[data-surface="agent-dock"] #root {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
}

/* The screen edge is the frame there, so the strip of frame on the right of the dock is past the window. */
:root[data-surface="agent-dock"] .agent-dock {
  right: -5px;
}

/* A channel draws its member cluster in the square of an agent face. It is last so that it
 * outranks the face sizes of the rules above. */
.agent-dock-seat-button .channel-avatar-cluster .agent-avatar,
.agent-dock-chat-channel .channel-avatar-cluster .agent-avatar,
.agent-dock-menu-channel .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);
}


/* /@fs//home/ubuntu/openbot/src/renderer/src/features/agent-dock/agent-dock.css */
/* The strip at the screen edge while the agent dock is in the edge. See `AgentDockEdgeStrip.tsx`.

   It has the dock fill, so it reads as the tip of the dock. `--agent-dock-strip-near` goes from 0 to 1
   as the pointer comes near: the strip grows toward the shape of the dock, and the dock then slides out
   over it. */
.agent-dock-strip {
  --agent-dock-strip-near: 0;

  position: fixed;
  /* Under the dock, so the dock comes out of the strip and covers it. */
  z-index: calc(var(--openbot-layer-dropdown) - 1);
  top: 50%;
  right: 0;
  width: calc(var(--agent-dock-strip-width) + 22px * var(--agent-dock-strip-near));
  height: calc(
    var(--agent-dock-strip-height, 240px) *
    (var(--agent-dock-strip-rest) + (1 - var(--agent-dock-strip-rest)) * var(--agent-dock-strip-near))
  );
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--openbot-radius-pill) 0 0 var(--openbot-radius-pill);
  background: var(--window-solid-frame, var(--openbot-bg-frame));
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
  /* The strip stays a moment while the dock comes out over it. */
  transition:
    width var(--openbot-duration-fast) var(--openbot-ease-out),
    height var(--openbot-duration-fast) var(--openbot-ease-out),
    opacity var(--openbot-duration-fast) var(--openbot-ease-out) var(--openbot-duration-fast);
}

.agent-dock-strip[data-side="left"] {
  right: auto;
  left: 0;
  border-radius: 0 var(--openbot-radius-pill) var(--openbot-radius-pill) 0;
}

/* The strip comes back after the dock is in the edge. */
.agent-dock-strip[data-shown] {
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
  transition:
    width var(--openbot-duration-fast) var(--openbot-ease-out),
    height var(--openbot-duration-fast) var(--openbot-ease-out),
    opacity var(--openbot-duration-fast) var(--openbot-ease-out) var(--openbot-duration-normal);
}

/* Over the shared button: the strip keeps the dock fill on hover, and has the dock focus line. */
.agent-dock-strip:hover:not(:disabled):not([data-disabled]) {
  background: var(--window-solid-frame, var(--openbot-bg-frame));
}

.agent-dock-strip:focus-visible {
  outline: 1px solid var(--openbot-border-focus);
  outline-offset: 1px;
  box-shadow: none;
}

/* An agent asks you something: the wash front of the theme change goes up through the dark strip. The
   band waits below the strip, and only `translate` moves, so the wave runs on the compositor. */
.agent-dock-strip::after {
  position: absolute;
  inset: 0 -4px;
  content: "";
  background: var(--openbot-wash-front);
  opacity: 0;
  pointer-events: none;
  translate: 0 110%;
  transition: opacity var(--openbot-duration-normal) var(--openbot-ease-out);
}

.agent-dock-strip[data-asks]::after {
  opacity: 1;
}

/* One wave is two fronts. `AgentDockEdgeStrip` removes it at its end and starts the next after a rest.
   A front has no pause at its end: the window draws each frame while the animation runs, also when
   nothing moves. */
.agent-dock-strip[data-asks][data-wave]::after {
  animation: agent-dock-strip-wave 2.24s cubic-bezier(0.45, 0, 0.25, 1) 2;
}

@keyframes agent-dock-strip-wave {
  0% {
    translate: 0 105%;
  }

  100% {
    translate: 0 -105%;
  }
}

/* With reduced motion the wash fills the strip and does not move. */
@media (prefers-reduced-motion: reduce) {
  .agent-dock-strip[data-asks]::after,
  .agent-dock-strip[data-asks][data-wave]::after {
    animation: none;
    translate: none;
  }
}


/* /@fs//home/ubuntu/openbot/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-block: 0;
  padding-inline: var(--openbot-space-2) var(--openbot-space-3);
  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: start;
}

.account-update-island__progress-value {
  display: inline-grid;
  align-items: baseline;
  grid-template-columns: 3ch max-content;
  /* "45%" in every page direction, as the percent of the locale. */
  direction: ltr;
  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-block: var(--openbot-space-1-5);
  padding-inline: var(--openbot-space-3) var(--openbot-space-1-5);
}


/* /@fs//home/ubuntu/openbot/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);
}

.join-server-close {
  position: absolute;
  top: var(--openbot-space-6);
  inset-inline-end: 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);
    inset-inline-end: 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//home/ubuntu/openbot/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);
}

/* The "Other options" button is wider than the close button. The same padding on the two sides keeps
 * the title in the centre, with space for the longest translation of the button. */
.add-server-dialog:has(.add-server-other) .add-server-intro .ui-heading {
  padding-inline: 160px;
}

.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%;
  inset-inline-start: 0;
  width: auto;
  flex: 0 0 auto;
  transform: translateY(-50%);
}

/* The account pays in one currency, so the code is text: the same height as the select, no chevron. */
.hosted-currency-locked {
  display: inline-flex;
  align-items: center;
  height: var(--openbot-control-md);
  padding-inline: 10px;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}

/* With a license offer: personal or work use at the left, the currency and billing at the right. */
.add-server-bar[data-license] {
  justify-content: flex-end;
  padding-inline: 0;
}

.add-server-bar[data-license] .hosted-use {
  margin-inline-end: auto;
}

.add-server-bar[data-license] .hosted-currency {
  position: static;
  transform: none;
}

/* 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;
  inset-inline-start: 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,
.hosted-billing[data-use="work"]::before {
  transform: translateX(100%);
}

.hosted-billing:dir(rtl):is([data-billing="yearly"], [data-use="work"])::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;
}

/* The saving changes between personal and work use; equal digit widths keep the switch in place. */
.add-server-bar[data-license] .hosted-billing-save {
  font-variant-numeric: tabular-nums;
}

/* 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-inline-start: 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-inline-end: 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-inline-start: 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 bundle discount of a server with its license, in place of the "Best value" badge. */
.hosted-plan-bundle {
  padding: 0 var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success-soft);
  color: var(--openbot-success-text);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-md);
  white-space: nowrap;
}

/* For work, the price includes the license: the line has the success color of the bundle and an icon. */
.hosted-plan-summary[data-license] {
  display: flex;
  align-items: baseline;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}

/* The icon bottom is on the baseline of the first line. It moves down so that its middle is on the
 * middle of the capital letters. */
.hosted-plan-summary svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  translate: 0 calc((var(--openbot-icon-sm) - 1cap) / 2);
  color: var(--openbot-success-text);
}

/* The personal and work summaries differ in length; two lines for both, so the buttons stay in place. */
.hosted-plans[data-license] .hosted-plan-summary {
  min-height: 2lh;
}

/* The price line breaks for all counts or for none. LongestPrice measures the longest price. */
.hosted-plans[data-license] .hosted-plan-price {
  position: relative;
}

.hosted-plan-longest {
  position: absolute;
  inset: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  visibility: hidden;
  pointer-events: none;
}

/* Only the visible price: the copy must not change the width that it measures. */
.hosted-plans[data-stacked] .hosted-plan-price > .hosted-plan-was[data-shown] {
  flex-basis: 100%;
}

/* The people row closes the frame of the plans. It stays for personal use, disabled, so nothing moves. */
.hosted-plans[data-license] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.hosted-license-people {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3) var(--openbot-space-6);
  border: 1px solid var(--openbot-border);
  border-top: 0;
  border-radius: 0 0 var(--openbot-radius-card) var(--openbot-radius-card);
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  transition: color var(--openbot-duration-normal) var(--openbot-ease-out);
}

.hosted-license-people[data-disabled] {
  color: var(--openbot-text-muted);
}

.hosted-license-people > span {
  white-space: nowrap;
}

.hosted-license-stepper {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin: 0;
  padding: 0;
  border: 0;
  font-variant-numeric: tabular-nums;
}

/* As wide as "10 members", so the buttons stay in place while the count changes. */
.hosted-license-stepper > span {
  min-width: 11ch;
  text-align: center;
  white-space: nowrap;
}

.hosted-license-stepper .ui-icon-button {
  border-radius: var(--openbot-radius-pill);
}

/* The buttons line up when the summaries wrap to different lengths. */
.hosted-plan-choose.ui-button {
  margin-top: auto;
}

/* With the people row, the summaries have one height, and a work plan has one fact less: the
 * buttons follow the summary, so they stay on one line. */
.hosted-plans[data-license] .hosted-plan-choose.ui-button {
  margin-top: 0;
}

.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;
}

/* The ways to add a server without a plan, across from the close button of the shell. */
.add-server-other {
  position: absolute;
  top: var(--openbot-space-6);
  inset-inline-start: var(--openbot-space-6);
  z-index: 2;
}

.add-server-other .ui-button {
  color: var(--openbot-text-muted);
}

/* The menu opens over the dialog, which is on a higher layer than menus. */
.ui-action-menu.add-server-other-menu {
  z-index: calc(var(--openbot-layer-dialog) + 1);
}

/* 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-inline-start: 0;
  }
}

@media (max-width: 560px) {
  .add-server-intro .ui-heading {
    font-size: var(--openbot-text-2xl);
    line-height: var(--openbot-leading-2xl);
  }

  /* The title goes under the row of the "Other options" button and the close button. */
  .add-server-dialog:has(.add-server-other) .add-server-intro {
    padding-top: calc(var(--openbot-control-md) + var(--openbot-space-1));
  }

  .add-server-dialog:has(.add-server-other) .add-server-intro .ui-heading {
    padding-inline: 0;
  }

  .add-server-other {
    top: var(--openbot-space-3);
    inset-inline-start: var(--openbot-space-3);
  }

  .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;
  }

  /* Personal or work use and the currency on one line, the billing under them. */
  .add-server-bar[data-license] {
    flex-wrap: wrap;
    padding-top: 0;
  }

  .add-server-bar[data-license] .hosted-billing:not(.hosted-use) {
    flex: 1 1 100%;
  }

  .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,
  .hosted-license-people,
  .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//home/ubuntu/openbot/packages/ui/src/features/servers/create-local-server-dialog.css */
/*
 * The name of a new server on this computer. The same small dialog as the OpenCode key dialog:
 * a left-aligned title, one description line, one field.
 */

.create-local-server-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: create-local-server-dialog-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}

.create-local-server-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--openbot-space-1);
}

.create-local-server-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);
}

.create-local-server-description {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}

.create-local-server-form {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
  margin: var(--openbot-space-4) 0 0;
}

.create-local-server-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
}

@keyframes create-local-server-dialog-in {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
}


/* /@fs//home/ubuntu/openbot/packages/ui/src/features/servers/install-server-dialog.css */
.install-server-dialog.join-server-dialog {
  width: min(560px, 100%);
}

.install-server-page {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--openbot-space-4) + var(--openbot-space-1));
}

.install-server-block {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
}

.install-server-block[data-expired] .message-code-block pre {
  opacity: 0.5;
}

.install-server-code-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}

.install-server-status,
.install-server-placeholder {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  min-height: var(--openbot-control-sm);
}

.install-server-placeholder {
  flex-direction: column;
  justify-content: center;
  min-height: 120px;
  text-align: center;
}

.install-server-status svg,
.install-server-placeholder svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.install-server-spin {
  color: var(--openbot-text-muted);
  animation: install-server-spin 1s linear infinite;
}

.install-server-ok {
  color: var(--openbot-success);
}

.install-server-warning {
  color: var(--openbot-warning);
}

.install-server-danger {
  color: var(--openbot-danger);
}

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

@media (prefers-reduced-motion: reduce) {
  .install-server-spin {
    animation: none;
  }
}


/* /@fs//home/ubuntu/openbot/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;
  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 {
  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//home/ubuntu/openbot/packages/ui/src/features/servers/server-upgrade-dialog.css */
/* The offer of the next plan when the disk of a hosted server is almost full. It uses the hosted
 * upsell modal, a little wider for three actions. */
.server-upgrade-modal {
  width: min(480px, 100%);
}

.server-upgrade-meter {
  display: grid;
  gap: var(--openbot-space-1-5);
  margin: var(--openbot-space-1) 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}

.server-upgrade-meter .ui-progress-fill {
  background: var(--openbot-warning);
}

.server-upgrade-meter[data-level="full"] .ui-progress-fill {
  background: var(--openbot-danger);
}

.server-upgrade-compare {
  width: 100%;
  margin-top: var(--openbot-space-2);
  border-collapse: collapse;
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}

.server-upgrade-compare th,
.server-upgrade-compare td {
  padding: var(--openbot-space-2) 0;
  border-bottom: 1px solid var(--openbot-border);
  text-align: start;
}

.server-upgrade-compare thead th {
  color: var(--openbot-text-muted);
  font-weight: var(--openbot-weight-medium);
}

.server-upgrade-compare tbody th {
  color: var(--openbot-text-secondary);
  font-weight: var(--openbot-weight-regular);
}

.server-upgrade-compare tbody td:last-child {
  font-weight: var(--openbot-weight-semibold);
}

.server-upgrade-compare tbody tr:last-child > * {
  border-bottom: 0;
}

.server-upgrade-error {
  margin: 0;
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
}

/* Three actions do not fit at phone width, so they go to a second line. */
.server-upgrade-modal .hosted-upsell-modal-actions {
  flex-wrap: wrap;
}


/* /@fs//home/ubuntu/openbot/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//home/ubuntu/openbot/packages/ui/src/features/servers/server-roles.css */
/* Server Settings > Roles, and the role menu of a member row. */

.server-roles-icon {
  color: var(--openbot-text-secondary);
}

.server-roles-member-count {
  min-width: 72px;
  text-align: end;
}

.server-roles-level {
  min-width: 128px;
}

/* Wide enough for "Can manage · Everyone", so the levels of a role page line up. */
.server-roles-agent-level {
  min-width: 176px;
}

.server-roles-name-row {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}

.server-roles-member-trigger {
  max-width: 240px;
}

.server-roles-member-summary {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A Lucide icon in a text button renders at 24px; there is no shared size rule for it. */
:is(.server-roles-create, .server-roles-member-trigger) > svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

/* "· Everyone" after the level of a role row: Everyone gives the agent that level. */
.server-roles-level-source {
  color: var(--openbot-text-secondary);
}

.server-roles-level-menu {
  min-width: 176px;
}

.server-roles-level-menu .server-roles-open-everyone {
  margin-top: var(--openbot-space-1);
  border-top: 1px solid var(--openbot-border);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}


/* /@fs//home/ubuntu/openbot/packages/ui/src/features/servers/server-audit-log.css */
.server-audit-controls {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}

.server-audit-time {
  white-space: nowrap;
}

/* The words between keywords step back, so the keywords carry the line. */
.server-audit-row .server-audit-title {
  color: var(--openbot-text-secondary);
  font-weight: var(--openbot-weight-regular);
}

.server-audit-key {
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}

/* The danger tone takes access away, success lets the member chat, warning gives full control. */
.server-audit-key[data-level="none"] {
  color: var(--openbot-danger);
}

.server-audit-key[data-level="chat"] {
  color: var(--openbot-success);
}

.server-audit-key[data-level="manage"] {
  color: var(--openbot-warning);
}

.server-audit-arrow svg {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-inline: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  vertical-align: -2px;
}

/* The old value comes first in the reading direction, so the arrow points to the new one. */
.server-audit-arrow svg:dir(rtl) {
  transform: scaleX(-1);
}

/* The change mark at the start of the row: success adds, danger takes away, accent changes. */
.server-audit-mark {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: var(--openbot-radius-md);
}

.server-audit-mark svg {
  width: 16px;
  height: 16px;
}

.server-audit-mark[data-tone="success"] {
  background: var(--openbot-success-soft);
  color: var(--openbot-success);
}

.server-audit-mark[data-tone="danger"] {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
}

.server-audit-mark[data-tone="accent"] {
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
}


/* /@fs//home/ubuntu/openbot/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//home/ubuntu/openbot/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;
  inset-inline-end: 0;
  bottom: 0;
  display: flex;
  width: var(--settings-panel-width, 360px);
  flex-direction: column;
  border-inline-start: 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;
}

/* The panel sits at the inline end, so in right-to-left text it slides in from the left. */
.settings-panel:dir(rtl) {
  animation-name: settings-panel-in-rtl;
}

@keyframes settings-panel-in-rtl {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.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);
}

/* Back and forward follow the reading direction. The mirrored back chevron keeps its nudge. */
.settings-back-icon:dir(rtl) {
  transform: scaleX(-1) translateX(-0.5px);
}

.settings-forward-icon:dir(rtl),
.settings-link-value > svg[class~="lucide-chevron-right"]:dir(rtl) {
  transform: scaleX(-1);
}

.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-block: 0 6px;
  margin-inline: 8px 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  line-height: 18px;
}

/* The count and error under a field, after its control rather than above it like the label. */
.settings-field > .ui-field-limit {
  display: grid;
  margin-block: var(--openbot-space-1-5) 0;
  margin-inline: var(--openbot-space-2) 0;
}

.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 while the user types, so the rows below do not move.
   The grip in the corner sets a taller height. */
.settings-field .settings-instructions-input {
  field-sizing: fixed;
  height: 120px;
  min-height: 120px;
  max-height: none;
  resize: none;
}

/* The description is one or two sentences, so its field starts lower than the instructions. */
.settings-field .settings-description-input {
  height: 72px;
  min-height: 72px;
}

/* Agent settings > Instructions. The bar names the file and stays at the top while the rules scroll. */
.agent-instructions-bar {
  position: sticky;
  z-index: 1;
  top: calc(var(--openbot-space-6) * -1);
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-top: calc(var(--openbot-space-6) * -1);
  border-bottom: 1px solid var(--openbot-border);
  background: var(--openbot-bg-canvas);
  padding: var(--openbot-space-6) 0 var(--openbot-space-3);
}

/* The file icon covers the two lines of the name and the folder. */
.agent-instructions-bar-icon {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  flex: none;
  color: var(--openbot-text-muted);
  stroke-width: var(--openbot-icon-stroke-lg);
}

.agent-instructions-bar-file {
  display: grid;
  min-width: 0;
  flex: 1;
}

.agent-instructions-bar-name {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}

.agent-instructions-bar-folder {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  overflow-wrap: anywhere;
  user-select: text;
}

/* Each heading starts a section with space above it. The first-level heading is the title of the file. */
.agent-instructions-text {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-lg);
  overflow-wrap: anywhere;
}

.agent-instructions-text .message-markdown-heading[data-level] {
  margin: var(--openbot-space-6) 0 var(--openbot-space-1-5);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-md);
}

.agent-instructions-text .message-markdown-heading[data-level="1"] {
  font-size: var(--openbot-text-xl);
  line-height: var(--openbot-leading-2xl);
}

.agent-instructions-text > .message-markdown-heading:first-child {
  margin-top: 0;
}

.agent-instructions-text :is(ul, ol) {
  margin: 0;
  padding-inline-start: var(--openbot-space-4);
}

.agent-instructions-text li + li {
  margin-top: var(--openbot-space-1);
}

.agent-instructions-empty {
  margin: 0;
  color: var(--openbot-text-muted);
}

/* The page scrolls, so the field grows with the whole file. */
.agent-memories-field.agent-instructions-field {
  max-height: none;
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-lg);
}

.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[aria-invalid="true"],
.settings-field textarea[aria-invalid="true"] {
  border-color: var(--openbot-danger);
}

.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;
  /* Both sides can shrink, so a long value shares the row with the label and never covers it. */
  grid-template-columns: minmax(0, auto) minmax(0, max-content);
  justify-content: space-between;
  align-items: center;
  gap: var(--openbot-space-3);
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 var(--openbot-space-1);
  text-align: start;
  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;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}

/* Truncated text clips at its line box; this line height keeps descenders inside it. */
.settings-link-text {
  line-height: var(--openbot-leading-md);
}

.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-block: 0;
  margin-inline: var(--openbot-space-1) 0;
  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//home/ubuntu/openbot/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-inline-end: 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;
  gap: var(--openbot-space-3);
  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-inline-start: 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);
  inset-inline-end: var(--openbot-space-3);
}

@keyframes provider-code-login-dialog-in {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
}


/* /@fs//home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_AMS-Regular.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_AMS-Regular.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Bold.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Bold.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Regular.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Regular.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Fraktur-Bold.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Fraktur-Bold.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Fraktur-Regular.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Fraktur-Regular.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Main-Bold.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Main-Bold.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Main-BoldItalic.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Main-BoldItalic.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Main-Italic.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Main-Italic.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Main-Regular.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Main-Regular.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Math-BoldItalic.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Math-BoldItalic.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Math-Italic.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Math-Italic.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_SansSerif-Bold.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_SansSerif-Bold.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_SansSerif-Italic.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_SansSerif-Italic.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_SansSerif-Regular.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_SansSerif-Regular.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Script-Regular.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Script-Regular.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Size1-Regular.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Size1-Regular.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Size2-Regular.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Size2-Regular.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Size3-Regular.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Size3-Regular.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Size4-Regular.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Size4-Regular.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Typewriter-Regular.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Typewriter-Regular.woff) format("woff"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Typewriter-Regular.ttf) format("truetype")}.katex{font:normal 1.21em KaTeX_Main,math,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.19.0"}.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-inline-end var(--panel-resize-duration, var(--openbot-duration-overlay))
    cubic-bezier(0.22, 1, 0.36, 1);
  --conversation-column-width: clamp(1440px, 65vw, 1920px);
}

/*
 * On a very wide screen the chat stops at a column and centers in the pane, so a reply and the
 * user's message stay near each other. The column grows with the window from 1440px to 1920px. It
 * uses the window width, not a percentage, because a percentage refers to a different box in the
 * message list and in the composer padding. A laptop window is narrower than the column and shows the
 * chat at full width. The scroll area and the composer keep the pane width, so the scroll bar stays
 * at the pane edge. The live content under the messages, such as the working row and a pending
 * question, stays in the same column.
 */
.conversation-panel > .conversation-scroll > :is(.virtual-chat-list, .conversation-live) {
  max-width: var(--conversation-column-width);
  margin-inline: auto;
}

/*
 * The composer is 6px wider on each side than the messages, as at full width. The padding holds the
 * composer and the notices above it in the column, and keeps their own side margins. A percentage
 * padding is relative to the panel, so the settings panel width is subtracted where it shows.
 */
.conversation-panel > .composer-wrap {
  padding-inline: max(var(--openbot-space-1-5), calc((100% - var(--conversation-column-width) - 12px) / 2));
}

.conversation-panel[data-settings-panel] > .composer-wrap {
  padding-inline: max(
    var(--openbot-space-1-5),
    calc((100% - var(--settings-panel-width, 360px) - var(--conversation-column-width) - 12px) / 2)
  );
}

/*
 * An open side thread covers the agent's own chat and its message box. They leave the layout but stay
 * at the pane width, so their rows, scroll position and draft are there again on the way back. Their
 * content is not rendered: a selected sliding tab, such as a code preview, sets its own visibility.
 * The content keeps the size that the browser remembers from its last render, so the scroll area keeps
 * its height and position. Without containment, the remembered size changes nothing.
 */
.conversation-panel > .conversation-covered {
  position: absolute;
  inset: 0;
  visibility: hidden;
}

.conversation-panel > :is(.conversation-scroll, .composer-wrap) > * {
  contain-intrinsic-size: auto none;
}

.conversation-panel > .conversation-covered > * {
  content-visibility: hidden;
}

.conversation-panel > .composer-wrap.conversation-covered {
  top: auto;
}

/*
 * The mention picker is positioned in the composer wrap and is 12px narrower on each side than the
 * composer. Here a percentage is relative to the composer wrap.
 */
.conversation-panel > .composer-wrap .mention-picker {
  --mention-picker-side-inset: max(
    calc(var(--openbot-space-1-5) + 12px),
    calc((100% - var(--conversation-column-width) + 12px) / 2)
  );
}

.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: calc(30px * -0.14);

  width: 30px;
  height: 30px;
  border-radius: var(--openbot-radius-md);
}

.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-block: 6px;
  padding-inline: 13px 7px;
  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-block: 0;
  padding-inline: 8px 12px;
  background: transparent;
}

.conversation-heading-group {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.chat-search {
  position: absolute;
  z-index: 13;
  top: 19px;
  inset-inline-end: 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-inline-start: 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-inline-end: 3px;
}

::highlight(openbot-chat-search-results) {
  background: var(--openbot-accent-soft);
}

::highlight(openbot-chat-search-current) {
  background: var(--openbot-warning);
  color: var(--openbot-paper-text);
}

.conversation-title[aria-label="View agent settings"]:hover {
  color: var(--openbot-text-primary);
}

.browser-panel {
  position: absolute;
  z-index: 14;
  top: 0;
  inset-inline-end: 0;
  bottom: 0;
  display: flex;
  width: var(--browser-panel-width, 380px);
  flex-direction: column;
  border-inline-start: 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 end 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-block: 0;
  padding-inline: 11px 7px;
}

.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: start;
}

.file-preview-spreadsheet-table th,
.file-preview-spreadsheet-table td {
  border-top: 1px solid var(--openbot-border);
  border-inline-end: 1px solid var(--openbot-border);
  padding: 8px 12px;
  text-align: start;
  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-inline-end: 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: start;
}

.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;
}

/* In RTL the panel is on the left edge, so it enters from the left. */
:dir(rtl) .file-preview-panel.t-panel-slide {
  --panel-translate-x: -24px;
}

/* Back points to the start side. */
:dir(rtl) .file-preview-header svg[class~="lucide-arrow-left"] {
  transform: scaleX(-1);
}
.conversation-panel.browser-panel-active {
  padding-inline-end: 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-block: 0;
  padding-inline: 0 8px;
  background: var(--openbot-bg-sidebar);
}

.remote-desktop-workspace-darwin .remote-desktop-header {
  /* The macOS traffic lights are at the inline start in every language. */
  padding-inline-start: 84px;
}

.remote-desktop-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  flex: 0 1 auto;
  justify-content: flex-end;
  gap: 4px;
  margin-inline-start: 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-lg);
}

.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;
  inset-inline-end: 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-profile-status,
.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-profile-status {
  min-width: 0;
  max-width: 240px;
  flex-shrink: 1;
  background: var(--openbot-bg-control);
  color: var(--openbot-text-secondary);
}

/* The color of a profile: in its toolbar label, the agent select and the server settings. */
.browser-profile-dot {
  display: block;
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-pill);
}

.browser-profile-dot-shared {
  background: var(--openbot-text-muted);
}

.browser-profile-status-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.browser-profile-status svg,
.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%;
}

/* A photo keeps its own colours, as on mobile, so only a generated face lights up. */
.agent-settings-avatar:hover:not(:has(.agent-avatar-custom)) {
  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;
  inset-inline-end: -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: var(--openbot-space-2);
}

/* One card for each routine: the row opens the routine, and the switch at the end pauses it. */
.agent-routine-list-item {
  display: grid;
  min-height: 52px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--openbot-space-3);
  align-items: center;
  padding-inline-end: var(--openbot-space-4);
}

.agent-routine-row {
  display: grid;
  width: 100%;
  height: auto;
  align-self: stretch;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: var(--openbot-space-3);
  align-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding-block: var(--openbot-space-2);
  padding-inline: var(--openbot-space-4) 0;
  text-align: start;
}

.agent-routine-row:focus-visible {
  outline: none;
}

.agent-routine-card {
  transition: background-color var(--openbot-duration-hover) ease;
}

.agent-routine-card:has(.agent-routine-row:focus-visible) {
  border-color: var(--openbot-border-strong);
}

.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: 16px;
  height: 16px;
  stroke-width: var(--openbot-icon-stroke);
}

/*
 * Only the card shows hover. The ghost button hover would paint the row a second colour, so the row
 * and the switch area would not match.
 */
@media (hover: hover) and (pointer: fine) {
  .agent-routine-card:has(.agent-routine-row:hover) {
    background: var(--openbot-hover);
  }

  .agent-routine-list-item > .agent-routine-row:hover:not(:disabled) {
    background: transparent;
  }
}

.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;
}

/* The switch label starts where the labels of the fields above it start. */
.agent-routine-run-in {
  padding-inline-start: var(--openbot-space-2);
}

.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-routines-footer {
  flex: none;
  padding: 0 15px 15px;
}

.agent-routines-footer:empty {
  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;
}

/* What a field misses, under its control, where the field limit goes. */
.agent-routine-field-error {
  margin-block: var(--openbot-space-1-5) 0;
  margin-inline: var(--openbot-space-2) 0;
}

/* Schedule or webhook: two equal choices above the trigger. */
.agent-routine-trigger-kind {
  display: grid;
  min-width: 0;
  grid-template-columns: 1fr 1fr;
  gap: var(--openbot-space-1);
  margin: 0 0 var(--openbot-space-2);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  padding: var(--openbot-space-0-5);
}

.agent-routine-trigger-kind-icon {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

/* The schedule and history are fields, so their headings match the field labels. */
.agent-routine-when h3,
.agent-routine-history h3 {
  margin-block: 0 var(--openbot-space-1-5);
  margin-inline: var(--openbot-space-2) 0;
  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: start;
}

.ui-button.agent-routine-run-link {
  cursor: pointer;
}

/* The time, then a muted note: an ignored webhook request, skipped runs, a late start, or why a run failed. */
.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-block: var(--openbot-space-2);
  padding-inline: var(--openbot-space-3) var(--openbot-space-2);
}

.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-body {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: var(--openbot-space-2);
}

.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: start;
}

.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-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);
}

/*
 * Agent settings > Memories. It covers the settings in the pane. A wide pane keeps the page in one
 * column of reading width.
 */
.agent-memories-view {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

/* A memory title is up to 100 characters; the header has the height of one line. */
.agent-memories-view .settings-panel-header h2 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-memories-page {
  display: grid;
  width: min(100%, 680px);
  gap: var(--openbot-space-6);
  margin-inline: auto;
}

.agent-memories-page .settings-link-group,
.agent-memories-page :is(.agent-memory-state, .agent-memory-limit, .agent-memory-error) {
  margin: 0;
}

/* The search field has the size of a list row, and its icon and text line up with the New memory row. */
.agent-memories-search {
  position: relative;
  min-width: 0;
}

.agent-memories-search-icon {
  position: absolute;
  top: 50%;
  inset-inline-start: calc(var(--openbot-space-3) + 1px);
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
  pointer-events: none;
  stroke-width: var(--openbot-icon-stroke);
  transform: translateY(-50%);
}

.agent-memories-search .agent-memories-search-input {
  width: 100%;
  height: 42px;
  padding-inline: calc(var(--openbot-space-3) + var(--openbot-icon-sm) + var(--openbot-space-2)) var(--openbot-space-3);
  border-color: var(--openbot-border);
  background: var(--openbot-bg-surface);
  font-size: var(--openbot-text-md);
}

.agent-memories-search-input::-webkit-search-cancel-button {
  display: none;
}

.agent-memories-reading {
  display: grid;
  gap: var(--openbot-space-3);
}

.agent-memories-text {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-xl);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.agent-memories-meta {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.agent-memories-actions,
.agent-memories-clear {
  display: flex;
  gap: var(--openbot-space-2);
}

.agent-memories-editor {
  display: grid;
  gap: var(--openbot-space-2);
}

.agent-memories-field {
  min-height: 0;
  max-height: 320px;
  field-sizing: content;
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-xl);
}

.agent-memories-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
}

/* The empty state fills the height the dialog gave it. */
.agent-memories-view-empty {
  display: flex;
  min-height: 456px;
  flex-direction: column;
}

/*
 * The page before its first memory: a faint copy of the list above the pitch. The newest sample
 * writes itself in handwriting; when the next one comes, it becomes a typed row and steps back.
 */
.agent-memories-empty {
  display: grid;
  flex: 1;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) auto;
}

.agent-memories-empty-list {
  min-width: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  mask-image: linear-gradient(var(--openbot-text-primary) 45%, var(--openbot-transparent));
  transition:
    opacity 700ms var(--openbot-ease-out),
    filter 700ms var(--openbot-ease-out);
}

.agent-memories-empty-list[data-clearing] {
  opacity: 0;
  filter: blur(3px);
}

/* A new row opens from no height, so the rows under it move down. */
.agent-memories-empty-item {
  display: grid;
  grid-template-rows: 1fr;
  animation: agent-memories-empty-open 520ms var(--openbot-ease-out) both;
  transition: opacity 640ms var(--openbot-ease-out);
}

.agent-memories-empty-item > *,
.agent-memories-empty-fold > * {
  min-height: 0;
  overflow: hidden;
}

@keyframes agent-memories-empty-open {
  from {
    grid-template-rows: 0fr;
    opacity: 0;
  }
}

.agent-memories-empty-item[data-age="1"] {
  opacity: 0.6;
}

.agent-memories-empty-item[data-age="2"] {
  opacity: 0.4;
}

.agent-memories-empty-item[data-age="3"] {
  opacity: 0.25;
}

/* The sample rows keep the real row styles, with no fixed height. */
.agent-memories-empty-row {
  min-height: 0;
}

.agent-memories-empty-row .agent-memory-row-main {
  height: auto;
}

/* The two texts of a row: the handwriting folds away and the typed text opens when the ink is dry. */
.agent-memories-empty-fold {
  display: grid;
  transition:
    grid-template-rows 640ms var(--openbot-ease-out),
    opacity 640ms var(--openbot-ease-out);
}

.agent-memories-empty-fold-hand {
  grid-template-rows: 1fr;
}

.agent-memories-empty-fold-typed {
  grid-template-rows: 0fr;
  opacity: 0;
}

.agent-memories-empty-item[data-dry] .agent-memories-empty-fold-hand {
  grid-template-rows: 0fr;
  opacity: 0;
}

.agent-memories-empty-item[data-dry] .agent-memories-empty-fold-typed {
  grid-template-rows: 1fr;
  opacity: 1;
}

/* Handwriting. The app has no hand font, so it uses the one of the system. */
.agent-memories-hand {
  color: var(--openbot-accent-text);
  font-family: "Bradley Hand", "Noteworthy", "Segoe Print", cursive;
  font-weight: var(--openbot-weight-semibold);
}

.agent-memories-empty-hand {
  display: grid;
  padding-block: var(--openbot-space-0-5);
  font-size: var(--openbot-text-xl);
  line-height: 1.3;
  transform: rotate(-0.6deg);
  transform-origin: left top;
}

/* Each line writes itself from left to right, at the speed of its length. */
.agent-memories-empty-line {
  white-space: nowrap;
  clip-path: inset(-0.4em calc(100% + 0.2em) -0.4em -0.2em);
  animation: agent-memories-empty-write var(--agent-memories-empty-length) linear var(--agent-memories-empty-delay)
    forwards;
}

@keyframes agent-memories-empty-write {
  to {
    clip-path: inset(-0.4em -0.2em -0.4em -0.2em);
  }
}

/* In right-to-left text, each line writes itself from right to left. */
:dir(rtl) .agent-memories-empty-hand {
  transform-origin: right top;
}

:dir(rtl) .agent-memories-empty-line {
  clip-path: inset(-0.4em -0.2em -0.4em calc(100% + 0.2em));
}

.agent-memories-empty-meta {
  opacity: 0;
  animation: agent-memories-empty-show 360ms var(--openbot-ease-out) var(--agent-memories-empty-delay) forwards;
}

@keyframes agent-memories-empty-show {
  to {
    opacity: 1;
  }
}

.agent-memories-empty-pitch {
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3) var(--openbot-space-4);
  text-align: center;
}

.agent-memories-empty-title {
  display: grid;
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-3xl);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.agent-memories-empty-title > .agent-memories-empty-lead {
  color: var(--openbot-text-muted);
}

/* The one handwritten word of the title. It writes itself once. */
/* Inline, not inline-block: a reader then hears "remember." with no space before the full stop. */
.agent-memories-empty-word {
  line-height: 1;
  clip-path: inset(-0.4em calc(100% + 0.2em) -0.4em -0.2em);
  animation: agent-memories-empty-write 640ms linear 400ms forwards;
}

.agent-memories-empty-lines {
  display: grid;
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}

.agent-memories-empty-action {
  margin-top: var(--openbot-space-1);
}

/* Less motion: one still frame with the full list. */
.agent-memories-empty[data-still]
:is(
  .agent-memories-empty-item,
  .agent-memories-empty-fold,
  .agent-memories-empty-line,
  .agent-memories-empty-meta,
  .agent-memories-empty-word
) {
  animation: none;
  transition: none;
  clip-path: none;
}

.agent-memories-empty[data-still]
  :is(.agent-memories-empty-line, .agent-memories-empty-meta, .agent-memories-empty-word) {
  opacity: 1;
}

.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-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: start;
}

.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-on-accent);
}

.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-inline-start: 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;
}

/* A provider setting: its row, then the notes under it. The row rounds with the card at an end. */
.agent-session-setting > .ui-select,
.agent-session-setting .agent-settings-runtime-row {
  border-radius: inherit;
}

.agent-session-setting-notes {
  display: grid;
  justify-items: start;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-2) var(--openbot-space-3);
}

.agent-session-setting > .agent-session-setting-notes {
  padding-top: 0;
}

.agent-session-setting-notes:empty {
  display: none;
}

.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: start;
}

.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;
}

/* The Folders row sits in the Rules group after Permissions. The + opens the folder picker; the rest
   of the row opens the Folders page. */
.agent-folders-entry {
  position: relative;
}

/* The + sits over an empty slot in the row, between the count and the chevron; a button cannot hold a button. */
.agent-folders-entry-add-slot {
  flex: none;
  width: 24px;
}

.agent-folders-entry-add {
  position: absolute;
  top: 50%;
  inset-inline-end: calc(var(--openbot-space-3) + 14px + var(--openbot-space-2));
  color: var(--openbot-text-muted);
  transform: translateY(-50%);
}

/* The + is 24px; the row is 40px tall, so it takes a 40px target. */
.agent-folders-entry-add::before {
  position: absolute;
  inset: -8px;
  content: "";
}

/* The count changes as folders come and go; its digits keep one width. */
.agent-folders-count,
.agent-folders-lost {
  font-variant-numeric: tabular-nums;
}

/* A folder that is no longer on the disk shows on the row, so the user does not have to open the page. */
.agent-folders-lost {
  color: var(--openbot-warning-text);
}

/* The value holds the count, a dot, then the warning; the row's 8px gap is too wide around a dot. */
.agent-folders-dot {
  margin-inline: calc(var(--openbot-space-1) * -1);
}

/* While a folder is dragged over the side panel, the Folders row and the Added group show where it goes. */
.agent-folders-entry,
.agent-folders-drop-target {
  outline: 1px dashed transparent;
  outline-offset: -1px;
  transition:
    outline-color var(--openbot-duration-fast) var(--openbot-ease-out),
    background-color var(--openbot-duration-fast) var(--openbot-ease-out);
}

.agent-folders-entry[data-dragging],
.agent-folders-drop-target[data-dragging] {
  outline-color: var(--openbot-text-muted);
  background-color: var(--openbot-hover);
}

.agent-folders-page {
  display: grid;
  gap: var(--openbot-space-4);
}

/* Icon, text, then the actions the row has: Locate… for a missing folder, then X. */
.agent-folders-row {
  display: grid;
  grid-auto-columns: auto;
  grid-auto-flow: column;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--openbot-space-2);
  min-height: 48px;
  padding-block: var(--openbot-space-1-5);
  padding-inline: var(--openbot-space-3) var(--openbot-space-1-5);
}

.agent-folders-text {
  display: grid;
  min-width: 0;
}

.agent-folders-name {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-folders-path {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-folders-row[data-missing] .settings-link-icon,
.agent-folders-row[data-missing] .agent-folders-path {
  color: var(--openbot-warning-text);
}

/* The note on the Folders page when the agent can change all files. */
.agent-folders-access {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-2);
  padding-block: var(--openbot-space-2);
  padding-inline: var(--openbot-space-3) var(--openbot-space-2);
}

.agent-folders-access-text {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  text-wrap: pretty;
}

.agent-folders-remove {
  position: relative;
  color: var(--openbot-text-muted);
}

/* The button is 32px; the row is 48px tall, so it can take a 44px target. */
.agent-folders-remove::before {
  position: absolute;
  inset: -6px;
  content: "";
}

.agent-folders-add {
  color: var(--openbot-text-secondary);
}

.agent-folders-drop-target[data-dragging] .agent-folders-add {
  color: var(--openbot-text-primary);
}

/* A folder the user just added comes in under the others. */
@media (prefers-reduced-motion: no-preference) {
  .agent-folders-row[data-fresh] {
    animation: agent-folders-row-in var(--openbot-duration-normal) var(--openbot-ease-out) both;
  }

  .agent-folders-chat-drop {
    animation: agent-folders-fade-in var(--openbot-duration-fast) var(--openbot-ease-out) both;
  }

  /* The user tried to add a folder that this row already gives: the row shows itself once. */
  .agent-folders-row[data-flash],
  .agent-folders-entry[data-flash] {
    animation: agent-folders-row-flash 900ms var(--openbot-ease-out);
  }
}

/* Without motion the row stays marked a moment and the mark goes at once. */
@media (prefers-reduced-motion: reduce) {
  .agent-folders-row[data-flash],
  .agent-folders-entry[data-flash] {
    animation: agent-folders-row-flash 900ms steps(1, end);
  }
}

@keyframes agent-folders-row-flash {
  from,
  40% {
    background-color: var(--openbot-hover);
  }
}

@keyframes agent-folders-row-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

@keyframes agent-folders-fade-in {
  from {
    opacity: 0;
  }
}

/* The chat's drop overlay in two halves. It takes the place of the chat's own overlay for a local
   agent in Workspace only mode; with wider access a folder gives nothing new, so files only attach. */
.agent-folders-chat-drop {
  position: absolute;
  z-index: 60;
  inset: var(--openbot-space-3);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--openbot-space-3);
  border-radius: var(--openbot-radius-lg);
  background: color-mix(in srgb, var(--background) 70%, transparent);
  pointer-events: none;
  backdrop-filter: blur(3px);
}

/* The settings panel takes its own drops, so the overlay stops at its edge. */
.conversation-panel[data-settings-panel] .agent-folders-chat-drop {
  inset-inline-end: calc(var(--settings-panel-width, 360px) + var(--openbot-space-3));
}

.agent-folders-chat-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-6);
  border: 1px dashed var(--openbot-text-muted);
  border-radius: var(--openbot-radius-lg);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
  text-align: center;
  text-wrap: balance;
  transition:
    border-color var(--openbot-duration-fast) var(--openbot-ease-out),
    background-color var(--openbot-duration-fast) var(--openbot-ease-out);
}

.agent-folders-chat-zone > span {
  max-width: 28ch;
}

.agent-folders-chat-zone-folder {
  pointer-events: auto;
}

.agent-folders-chat-zone[data-dragging] {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--openbot-text-primary));
  background: var(--openbot-hover);
}

.agent-folders-chat-zone svg {
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--openbot-text-secondary);
  transition: color var(--openbot-duration-fast) var(--openbot-ease-out);
}

.agent-folders-chat-zone[data-dragging] svg {
  color: var(--openbot-text-primary);
}

/* The folder picker for an agent on another computer. It uses the frame of the "More providers"
   dialog: a title, a close button and one plain list, here with the places, the path and the buttons. */
.host-folder-picker-places {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-1);
  padding: 0 var(--openbot-space-3) var(--openbot-space-2);
}

.host-folder-picker-path {
  margin: 0;
  padding: 0 var(--openbot-space-3) var(--openbot-space-2);
  overflow-wrap: anywhere;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

.host-folder-picker .provider-more-list {
  flex: 1 1 auto;
  min-height: 160px;
}

.host-folder-picker-note {
  margin: 0;
  padding: var(--openbot-space-2) var(--openbot-space-3);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

.host-folder-picker-footer {
  display: flex;
  flex-shrink: 0;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-2) var(--openbot-space-1) var(--openbot-space-1);
}

/* 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-inline-start: 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-inline-start: 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-separator {
  color: var(--openbot-text-muted);
}

.routine-segmented {
  display: flex;
  margin-inline-start: 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-block: var(--openbot-space-2) var(--openbot-space-1);
  padding-inline: var(--openbot-space-3) var(--openbot-space-1);
}

.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-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-3) var(--openbot-space-1);
}

: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-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-3) var(--openbot-space-1);
  color: inherit;
  font: inherit;
  text-align: start;
}

.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,
.routine-webhook-actions > .ui-icon-button {
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
}

/* The secret row can have two actions. They share the last column, which grows to fit them. */
.routine-webhook-field:has(> .routine-webhook-actions) {
  grid-template-columns: minmax(84px, auto) minmax(0, 1fr) minmax(var(--openbot-control-sm), auto);
}

.routine-webhook-actions {
  display: flex;
  align-items: center;
}

/* 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);
}

/* In a chat card the rows are one block, so the card gap does not split them, and they line up
 * with the card title. */
.routine-webhook-card-endpoint {
  display: grid;
  border-bottom: 1px solid var(--openbot-border);
}

.routine-webhook-card-endpoint > .routine-webhook-field,
.routine-webhook-card-endpoint > .routine-webhook-note {
  padding-inline-start: 0;
}

/* The setup steps: a number, or a check when done, beside each step. */
.routine-webhook-steps {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.routine-webhook-steps > li {
  display: grid;
  grid-template-columns: var(--openbot-control-sm) minmax(0, 1fr);
  gap: var(--openbot-space-2);
  border-top: 1px solid var(--openbot-border);
  padding: var(--openbot-space-3);
}

.routine-webhook-step-body {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-1-5);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.routine-webhook-step-body > strong {
  font-weight: var(--openbot-weight-medium);
}

.routine-webhook-steps > li[data-disabled] .routine-webhook-step-body > strong {
  color: var(--openbot-text-muted);
}

.routine-webhook-step-marker {
  display: inline-grid;
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
  place-items: 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);
}

.routine-webhook-step-marker[data-done] {
  border-color: var(--openbot-success);
  background: var(--openbot-success-soft);
  color: var(--openbot-success-text);
}

.routine-webhook-step-check {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

/* A value row inside a step has its own border. */
.routine-webhook-inset {
  min-width: 0;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-sm);
}

.routine-webhook-inset > .routine-webhook-field {
  border-top: 0;
}

.routine-webhook-step-button {
  justify-self: start;
}

.routine-webhook-disclosure {
  justify-self: start;
  margin-inline-start: calc(var(--openbot-space-2) * -1);
  padding-inline: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: inherit;
}

.routine-webhook-disclosure-icon {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}

.routine-webhook-filter {
  display: grid;
  gap: var(--openbot-space-1);
}

.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-inline-start: 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-block: 0 var(--openbot-space-1);
  margin-inline: var(--openbot-space-1) 0;
  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. It is taller than a short
 * window, so it fits the space left and scrolls; the webhook row stays reachable. */
.routine-trigger-menu {
  width: 300px;
  max-height: min(560px, calc(100dvh - 16px), var(--kb-popper-content-available-height, 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);
}

/* The previous and next months, and the closed disclosures, point the other way in RTL. */
:dir(rtl) .routine-calendar-header :is(svg[class~="lucide-chevron-left"], svg[class~="lucide-chevron-right"]),
:dir(rtl) .routine-webhook-events-toggle > svg[class~="lucide-chevron-right"],
:dir(rtl) svg[class~="lucide-chevron-right"].routine-webhook-disclosure-icon {
  transform: scaleX(-1);
}
/* 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-inline-start: 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-inline-start: 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-inline-start: 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: start;
  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: start;
}

.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);
}

/*
 * The calendar before its first routine: a faint month behind the pitch. The month and the pitch
 * share one grid cell. Sample runs land on the month one at a time and write a note.
 */
.routine-planner-empty,
.routine-planner-empty-board {
  display: grid;
  min-width: 0;
}

.routine-planner-empty > *,
.routine-planner-empty-board > * {
  grid-area: 1 / 1;
}

.routine-planner-empty-board {
  pointer-events: none;
  user-select: none;
}

.routine-planner-empty-cells,
.routine-planner-empty-runs {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: 10rem;
}

/* Only hairlines. They clear behind the pitch and fade towards every edge. */
.routine-planner-empty-cells {
  mask-image:
    radial-gradient(ellipse 36% 36% at 50% 50%, var(--openbot-transparent) 68%, var(--openbot-text-primary) 100%),
    radial-gradient(ellipse 72% 78% at 50% 50%, var(--openbot-text-primary) 50%, var(--openbot-transparent) 100%);
  mask-composite: intersect;
}

.routine-planner-empty-cell {
  border-top: 1px solid var(--openbot-border);
  border-inline-start: 1px solid var(--openbot-border);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  color: var(--openbot-text-dim);
  font-size: var(--openbot-text-md);
}

.routine-planner-empty-cell[data-outside] {
  opacity: 0.45;
}

.routine-planner-empty-cell[data-today] {
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-semibold);
}

/* A run lands, writes its note, holds, then fades. The animation is `LIFE` steps of `STEP_MS`. */
.routine-planner-empty-run {
  display: grid;
  min-width: 0;
  align-self: start;
  justify-items: start;
  gap: var(--openbot-space-2);
  grid-row: var(--routine-planner-empty-row);
  grid-column: var(--routine-planner-empty-column);
  margin-top: calc(var(--openbot-space-8) + var(--openbot-space-1));
  padding-inline: var(--openbot-space-2);
  animation: routine-planner-empty-life var(--routine-planner-empty-life) var(--openbot-ease-out) both;
}

.routine-planner-empty-run > .routine-planner-run {
  width: 100%;
}

.routine-planner-empty-day {
  display: none;
}

.routine-planner-empty-check {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  opacity: 0;
  animation: routine-planner-empty-draw 420ms var(--openbot-ease-out) 380ms forwards;
}

@keyframes routine-planner-empty-life {
  0% {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(10px) scale(0.96);
  }

  8%,
  88% {
    opacity: 1;
    filter: blur(0);
    transform: none;
  }

  100% {
    opacity: 0;
    filter: blur(3px);
    transform: translateY(-4px);
  }
}

@keyframes routine-planner-empty-draw {
  from {
    opacity: 1;
  }

  to {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

/* Handwriting. The app has no hand font, so it uses the one of the system. */
.routine-planner-hand {
  color: var(--openbot-accent-text);
  font-family: "Bradley Hand", "Noteworthy", "Segoe Print", cursive;
  font-weight: var(--openbot-weight-semibold);
}

.routine-planner-empty-note {
  display: grid;
  width: fit-content;
  padding-inline: var(--openbot-space-1);
  font-size: var(--openbot-text-xl);
  line-height: 1.3;
  transform: rotate(-1.5deg);
  transform-origin: left top;
}

/* Each line writes itself from left to right, at the speed of its length. */
.routine-planner-empty-line {
  clip-path: inset(-0.4em 100% -0.4em -0.2em);
  animation: routine-planner-empty-write var(--routine-planner-empty-length) linear var(--routine-planner-empty-delay)
    forwards;
}

@keyframes routine-planner-empty-write {
  to {
    clip-path: inset(-0.4em -0.2em -0.4em -0.2em);
  }
}

.routine-planner-empty-underline {
  width: 100%;
  height: var(--openbot-space-2);
  overflow: visible;
}

.routine-planner-empty-underline path {
  fill: none;
  stroke: currentColor;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
  opacity: 0;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  animation: routine-planner-empty-draw 520ms var(--openbot-ease-out) var(--routine-planner-empty-delay) forwards;
}

.routine-planner-empty-pitch {
  z-index: 1;
  display: grid;
  max-width: 34rem;
  place-self: center;
  justify-items: center;
  gap: var(--openbot-space-4);
  padding: var(--openbot-space-6);
  text-align: center;
}

.routine-planner-empty-title {
  display: grid;
  font-size: var(--openbot-text-display);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.routine-planner-empty-title > .routine-planner-empty-lead {
  color: var(--openbot-text-muted);
}

/* The one handwritten word of the title. It writes itself once. */
/* Inline, not inline-block: a reader then hears "done." with no space before the full stop. */
.routine-planner-empty-done {
  clip-path: inset(-0.4em 100% -0.4em -0.2em);
  animation: routine-planner-empty-write 520ms linear 500ms forwards;
}

.routine-planner-empty-lines {
  display: grid;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-xl);
  line-height: 1.5;
}

.routine-planner-empty-action.ui-button {
  width: 100%;
  max-width: 22rem;
  height: var(--openbot-control-lg);
  margin-top: var(--openbot-space-2);
}

.routine-planner-empty-menu {
  min-width: 14rem;
  max-height: min(520px, calc(100dvh - 16px), var(--kb-popper-content-available-height, 520px));
  overflow-y: auto;
}

/* Less motion: one still frame with three runs and their notes. */
.routine-planner-empty[data-still]
:is(
  .routine-planner-empty-run,
  .routine-planner-empty-check,
  .routine-planner-empty-line,
  .routine-planner-empty-underline path,
  .routine-planner-empty-done
) {
  animation: none;
  clip-path: none;
  stroke-dashoffset: 0;
  opacity: 1;
}

.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;
  }

  /* The pitch comes first, then one row for each run on screen. */
  .routine-planner-empty > .routine-planner-empty-board {
    grid-area: 2 / 1;
  }

  .routine-planner-empty-pitch {
    padding-inline: 0;
  }

  .routine-planner-empty-title {
    font-size: var(--openbot-text-3xl);
  }

  .routine-planner-empty-lines {
    font-size: var(--openbot-text-lg);
  }

  .routine-planner-empty-cells {
    display: none;
  }

  .routine-planner-empty-runs {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(3, 8rem);
    grid-auto-rows: 0;
  }

  .routine-planner-empty-run {
    width: 100%;
    grid-row: var(--routine-planner-empty-slot);
    grid-column: 1;
    margin-top: 0;
    padding-inline: 0;
  }

  .routine-planner-empty-day {
    display: block;
    color: var(--openbot-text-dim);
    font-size: var(--openbot-text-sm);
  }

  .routine-planner-empty-note {
    font-size: var(--openbot-text-lg);
  }
}

/* In right-to-left text, each line writes itself from right to left. */
:dir(rtl) .routine-planner-empty-note {
  transform-origin: right top;
}

:dir(rtl) .routine-planner-empty-line {
  clip-path: inset(-0.4em -0.2em -0.4em 100%);
}

/* Back and the previous and next steps point the other way in RTL. */
:dir(rtl) .routine-planner-identity svg[class~="lucide-arrow-left"],
:dir(rtl) .routine-planner-nav :is(svg[class~="lucide-chevron-left"], svg[class~="lucide-chevron-right"]) {
  transform: scaleX(-1);
}
/* 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-inline-start: 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;
}

/* Open points to the end side. */
:dir(rtl) .chat-action-card-open svg[class~="lucide-chevron-right"] {
  transform: scaleX(-1);
}
/* Marketplace suggestion: an app or skill an agent suggests in the chat, with its connect action. */

/* The frame is a UiBlockCard (ui-blocks.css). */
.marketplace-suggestion.ui-block-card {
  max-width: 520px;
}

/* 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);
  flex: none;
  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 .marketplace-suggestion-icon > .connector-brand-tile {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

/* The name and the tagline keep one line each, so the card stays short. */
.marketplace-suggestion .ui-block-title,
.marketplace-suggestion .ui-block-subtitle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketplace-suggestion .marketplace-suggestion-name {
  display: inline-block;
  height: auto;
  max-width: 100%;
  overflow: hidden;
  padding: 0;
  color: inherit;
  font: inherit;
  text-overflow: ellipsis;
  vertical-align: top;
  white-space: nowrap;
}

/* Skip and the action sit in the actions of the card; the wrapper only carries their state. */
.marketplace-suggestion-controls {
  display: contents;
}

/* A question to answer with the action: all of it, in the body of the card, with the action in the footer. */
.marketplace-suggestion-question {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  overflow-wrap: anywhere;
}

.marketplace-suggestion-action {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
}

/*
 * Connect, its busy step and Connected are one button. Both labels share one grid cell; the stage
 * takes the width of the label on screen, and the cell keeps that width, so the wider label
 * overflows on both sides instead of pushing the other one off-centre.
 */
.marketplace-suggestion .marketplace-suggestion-button {
  overflow: clip;
}

/* Connected is a status: the success fill holds under the pointer. On-light text keeps AA on the dark-theme fill. */
.marketplace-suggestion .marketplace-suggestion-button.ui-button[data-state="connected"],
.marketplace-suggestion .marketplace-suggestion-button.ui-button[data-state="connected"]:hover {
  border-color: transparent;
  background: var(--openbot-success);
  color: var(--openbot-text-on-light);
  cursor: default;
}

/* On-light text on the light-theme success fill is 3:1. The darker success-text fill keeps AA. */
:root[data-openbot-color-scheme="light"]
  .marketplace-suggestion
  .marketplace-suggestion-button.ui-button[data-state="connected"] {
  background: var(--openbot-success-text);
}

.marketplace-suggestion-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  justify-items: center;
}

.marketplace-suggestion-layer {
  display: inline-flex;
  grid-area: 1 / 1;
  align-items: center;
  gap: var(--openbot-space-1-5);
  white-space: nowrap;
}

.marketplace-suggestion-button[data-state="connected"] [data-layer="start"],
.marketplace-suggestion-button:not([data-state="connected"]) [data-layer="done"] {
  opacity: 0;
}

.marketplace-suggestion-layer > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

/* The spinner takes no room until the step is busy. */
.marketplace-suggestion-spinner {
  display: inline-flex;
  width: 0;
  margin-inline-end: calc(-1 * var(--openbot-space-1-5));
  opacity: 0;
}

.marketplace-suggestion-button[data-state="busy"] .marketplace-suggestion-spinner {
  width: auto;
  margin-inline-end: 0;
  opacity: 1;
}

.marketplace-suggestion-controls[data-state="connected"] .marketplace-suggestion-dismiss {
  width: 0;
  min-width: 0;
  margin-inline-start: calc(-1 * var(--openbot-space-2));
  overflow: hidden;
  border-width: 0;
  padding: 0;
  opacity: 0;
  visibility: hidden;
}

/*
 * The motion of a change the user started. With reduced motion, only the fill and the labels fade.
 * The busy step: the spinner grows in and the button widens. Connected: the success fill comes in, the
 * old label lifts away as the new one rises, the check draws from its short stroke, and Dismiss
 * folds so the button glides to the edge.
 */
.marketplace-suggestion-controls[data-motion] .marketplace-suggestion-button.ui-button {
  transition:
    background-color var(--openbot-duration-slow) var(--openbot-ease-out),
    color var(--openbot-duration-slow) var(--openbot-ease-out),
    opacity var(--openbot-duration-normal) var(--openbot-ease-out);
}

.marketplace-suggestion-controls[data-motion] .marketplace-suggestion-layer {
  transition: opacity var(--openbot-duration-normal) var(--openbot-ease-out);
}

@media (prefers-reduced-motion: no-preference) {
  .marketplace-suggestion-controls[data-motion] .marketplace-suggestion-stage {
    transition: width var(--openbot-duration-slow) var(--openbot-ease-out);
  }

  .marketplace-suggestion-controls[data-motion] .marketplace-suggestion-layer {
    transition:
      opacity var(--openbot-duration-normal) var(--openbot-ease-out),
      transform var(--openbot-duration-slow) var(--openbot-ease-out);
  }

  .marketplace-suggestion-button[data-state="connected"] [data-layer="start"] {
    transform: translateY(-40%);
  }

  .marketplace-suggestion-button:not([data-state="connected"]) [data-layer="done"] {
    transform: translateY(40%);
  }

  .marketplace-suggestion-controls[data-motion] .marketplace-suggestion-layer > svg path {
    stroke-dasharray: 24 24;
    stroke-dashoffset: -24;
    transition: stroke-dashoffset var(--openbot-duration-overlay) var(--openbot-ease-out) var(--openbot-duration-fast);
  }

  .marketplace-suggestion-controls[data-motion] .marketplace-suggestion-button[data-state="connected"] svg path {
    stroke-dashoffset: 0;
  }

  .marketplace-suggestion-controls[data-motion] .marketplace-suggestion-spinner {
    transform: scale(0.6);
    transition:
      opacity var(--openbot-duration-normal) var(--openbot-ease-out),
      transform var(--openbot-duration-normal) var(--openbot-ease-out);
  }

  .marketplace-suggestion-controls[data-motion]
    .marketplace-suggestion-button[data-state="busy"]
    .marketplace-suggestion-spinner {
    transform: none;
  }

  .marketplace-suggestion-controls[data-motion] .marketplace-suggestion-dismiss {
    transition:
      opacity var(--openbot-duration-fast) var(--openbot-ease-out),
      width var(--openbot-duration-slow) var(--openbot-ease-out),
      margin var(--openbot-duration-slow) var(--openbot-ease-out),
      visibility 0s linear var(--openbot-duration-slow);
  }
}

.marketplace-suggestion-unavailable {
  display: flex;
  margin: 0;
  gap: var(--openbot-space-2);
  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);
}

/* Server install card: the loader waits in the icon tile, then the new server's logo pops in. */

.server-install-card[data-step="expired"] .server-install-card-status {
  color: var(--openbot-warning);
}

.server-install-card-status-text {
  display: inline-block;
}

.server-install-card-tile {
  --server-install-size: var(--openbot-control-lg);
  --server-install-radius: var(--openbot-radius-md);
  --server-install-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  display: grid;
  flex: 0 0 auto;
  width: var(--server-install-size);
  height: var(--server-install-size);
  place-items: center;
  border-radius: var(--server-install-radius);
}

.server-install-card-tile[data-step="expired"] {
  box-sizing: border-box;
  border: 1px solid var(--openbot-border);
  background: var(--openbot-bg-surface-raised);
}

.server-install-card-tile > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}

.server-install-card-tile[data-step] .server-install-card-face {
  display: grid;
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  place-items: center;
  border-radius: var(--server-install-radius);
}

.server-install-card-tile[data-step] .server-install-card-logo {
  --server-gradient-logo-size: var(--server-install-size);
  --server-gradient-logo-radius: var(--server-install-radius);
  position: relative;
  overflow: hidden;
  animation: server-install-pop-in 520ms var(--server-install-spring) 380ms backwards;
}

.server-install-card-logo > img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

/* When the server signs in, the plush squints with its happy face, hops, and shrinks away. */
.server-install-card-tile:is([data-step="starting"], [data-step="connected"], [data-step="offline"]) .ui-plush-eye {
  animation: ui-plush-squint 220ms var(--openbot-ease-out) forwards;
}

.server-install-card-tile:is([data-step="starting"], [data-step="connected"], [data-step="offline"])
  .server-install-card-loader {
  animation: server-install-pop-out 420ms var(--openbot-ease-out) 200ms forwards;
}

/* The first animation in each list stays the same, so that the pop does not play again. */
.server-install-card-tile[data-step="starting"] .server-install-card-logo {
  animation:
    server-install-pop-in 520ms var(--server-install-spring) 380ms backwards,
    server-install-breathe 1.8s ease-in-out 900ms infinite;
}

.server-install-card-tile[data-step="connected"] .server-install-card-logo {
  animation:
    server-install-pop-in 520ms var(--server-install-spring) 380ms backwards,
    server-install-settle 420ms var(--server-install-spring);
}

/* The badge: a spinner while the server starts, then a check that draws itself. */
.server-install-card-badge {
  position: absolute;
  right: -5px;
  bottom: -5px;
  display: grid;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  place-items: center;
  border: 2px solid var(--openbot-bg-canvas);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-muted);
  transition:
    background-color var(--openbot-duration-normal) var(--openbot-ease-out),
    color var(--openbot-duration-normal) var(--openbot-ease-out);
  animation: server-install-badge-in 360ms var(--server-install-spring) 640ms backwards;
}

.server-install-card-badge[data-step="connected"] {
  background: var(--openbot-success);
  color: var(--openbot-bg-canvas);
}

.server-install-card-badge > svg {
  width: 10px;
  height: 10px;
}

.server-install-card-check * {
  stroke-dasharray: 20;
  animation: server-install-draw 360ms var(--openbot-ease-out) 80ms backwards;
}

.server-install-card-status-text,
.server-install-card-action {
  animation: server-install-text-in var(--openbot-duration-slow) var(--openbot-ease-out);
}

/* The card showed first with the server signed in: the logo is already in place. */
.server-install-card-tile[data-revealed][data-step] .server-install-card-face,
.server-install-card-tile[data-revealed] .server-install-card-badge,
.server-install-card-tile[data-revealed] .server-install-card-check * {
  animation: none;
}

.server-install-card-tile[data-revealed][data-step="starting"] .server-install-card-logo {
  animation: server-install-breathe 1.8s ease-in-out infinite;
}

@keyframes server-install-pop-out {
  30% {
    opacity: 1;
    transform: translateY(-3px) scale(1.06);
  }
  100% {
    opacity: 0;
    transform: scale(0.4);
  }
}

@keyframes server-install-pop-in {
  from {
    opacity: 0;
    transform: scale(0.3);
  }
}

@keyframes server-install-breathe {
  50% {
    opacity: 0.6;
    transform: scale(0.94);
  }
}

@keyframes server-install-settle {
  from {
    opacity: 0.7;
    transform: scale(0.92);
  }
}

@keyframes server-install-badge-in {
  from {
    transform: scale(0);
  }
}

@keyframes server-install-draw {
  from {
    stroke-dashoffset: 20;
  }
}

@keyframes server-install-text-in {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .server-install-card .server-install-card-tile[data-step] .server-install-card-face,
  .server-install-card .server-install-card-badge,
  .server-install-card .server-install-card-check *,
  .server-install-card .server-install-card-status-text,
  .server-install-card .server-install-card-action {
    animation: none;
    transition: none;
  }

  .server-install-card
    .server-install-card-tile:is([data-step="starting"], [data-step="connected"], [data-step="offline"])
    .server-install-card-loader {
    opacity: 0;
  }
}

.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-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-3) var(--openbot-space-2);
}

.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;
}

/* The frame is a UiBlockCard (ui-blocks.css). */
.usage-limit-ask-card {
  max-width: 560px;
  margin: var(--openbot-space-4) 0 0;
}

.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);
}

/* 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: start;
}

.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);
}

/* The closed chevron points to the end side: right in LTR, left in RTL. */
:dir(rtl) .task-list-chevron {
  transform: rotate(90deg);
}

.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);
}

:dir(rtl) .task-list-item {
  transform-origin: right top;
}

.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);
}

/* The strike-through grows from the start of the text. */
:dir(rtl) .task-list-item-text::after {
  transform-origin: right center;
}

.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-inline-start: 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: start;
}

/* 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 dock: while the reader is away from a card whose subagents work, its header hangs under the
 * chat header, in the chat column and as wide as the card. The dock takes no height, so the chat
 * does not move when the bar shows.
 */
.subagents-dock {
  position: relative;
  z-index: 3;
  width: calc(100% - 2 * var(--openbot-space-3));
  max-width: var(--conversation-column-width, none);
  height: 0;
  flex: 0 0 auto;
  margin-inline: auto;
}

.subagents-dock .subagents-dock-bar {
  position: absolute;
  top: var(--openbot-space-1);
  inset-inline-start: 0;
  display: flex;
  width: var(--message-wide-bubble-width);
  height: auto;
  align-items: center;
  gap: var(--openbot-space-2);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-canvas);
  padding: var(--openbot-space-1-5) var(--openbot-space-3);
  color: inherit;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-md);
  text-align: start;
}

.subagents-dock .subagents-dock-bar:hover {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-canvas);
}

.subagents-dock-live {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
}

.subagents-dock-chevron {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  rotate: 90deg;
}

/* The list: one quiet card, as wide as the agent's message bubble. */

.subagents-list {
  display: flex;
  width: var(--message-wide-bubble-width);
  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: start;
  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-inline-start: 2px solid var(--openbot-border-strong);
  padding-inline-start: 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;
  }
}

/* In RTL the right chevron points left, so the open group turns it the other way to point down. */
:dir(rtl) svg[class~="lucide-chevron-right"].subagents-group-chevron {
  transform: scaleX(-1);
}

:dir(rtl) .subagents-group-header[aria-expanded="true"] svg[class~="lucide-chevron-right"].subagents-group-chevron {
  rotate: -90deg;
}

:dir(rtl) svg[class~="lucide-chevron-right"].subagents-row-chevron {
  transform: scaleX(-1);
}

/*
 * 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-inline-end: var(--openbot-space-2);
  color: var(--openbot-text-muted);
}

.awaiting-replies-item {
  align-items: center;
}

.awaiting-replies-avatar {
  --agent-avatar-optical-offset: calc(var(--openbot-icon-md) * -0.14);

  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);
}

/* An agent that was asked waits for the user or for its plan, so its work does not go on. */
.awaiting-replies-item[data-wait] .awaiting-replies-state-label {
  color: var(--openbot-warning-text);
}

.awaiting-replies-open,
.awaiting-replies-steer,
.awaiting-replies-stop {
  flex: 0 0 auto;
}

.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: start;
  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;
}

/* The model change that waits for the running turn to end. */
.conversation-model-pending {
  flex: none;
  gap: 4px;
}

.conversation-model-pending svg {
  width: 12px;
  height: 12px;
}

.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-block: 0;
  padding-inline: 8px 9px;
  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-border-focus);
  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-inline-end: var(--openbot-space-1-5);
  content: "·";
}

/* In the chat header the picker text has the size of the tab labels. When the thread tabs do not
   fit, the picker gets smaller: first the effort closes, then the model name. Each part slides closed
   and fades. The tooltip and the accessible name of the picker keep both. */
.conversation-header .provider-model-trigger {
  interpolate-size: allow-keywords;
}

.conversation-header .provider-model-trigger :is(.provider-model-trigger-name, .provider-model-trigger-effort) {
  overflow: hidden;
  font-size: var(--openbot-text-sm);
  transition:
    width var(--openbot-duration-normal) var(--openbot-ease-out),
    margin var(--openbot-duration-normal) var(--openbot-ease-out),
    opacity var(--openbot-duration-normal) var(--openbot-ease-out);
}

/* A closed part also takes back the gap before it, so the picker has no blank space. When the thread
   tabs become one button, the picker shows only its icon, so the button has room for the thread title. */
.conversation-header[data-model-fit] .provider-model-trigger-effort,
.conversation-header[data-model-fit="icon"] .provider-model-trigger-name,
.conversation-header:where(:has(.agent-threads-header:not([data-mode="tabs"])))
  .provider-model-trigger
  :is(.provider-model-trigger-name, .provider-model-trigger-effort) {
  width: 0;
  margin-inline-start: calc(var(--openbot-space-1-5) * -1);
  opacity: 0;
}

/* While the tabs measure a step, the picker shows it at once. */
.conversation-header[data-model-measure]
  .provider-model-trigger
  :is(.provider-model-trigger-name, .provider-model-trigger-effort) {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .conversation-header .provider-model-trigger :is(.provider-model-trigger-name, .provider-model-trigger-effort) {
    transition: none;
  }
}

/* The Fast chip gets its own room, so the model name keeps the width it has without it. A form field
   keeps the width of its row. `:where()` keeps the specificity low, so the narrow header rule below
   still wins. */
.provider-model-trigger:where(:not(.provider-model-trigger-field)):has(.provider-model-trigger-fast) {
  max-width: 296px;
}

.provider-model-trigger-fast svg {
  width: 12px;
  height: 12px;
  margin-inline-end: 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;
  inset-inline-start: 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-block: 0;
  padding-inline: 12px 11px;
  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-inline-start: 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-sheet-inset);
  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-inline-end: 1px solid var(--openbot-border);
  background: var(--provider-model-rail-bg);
  padding: 9px 7px;
}

/* Many providers or accounts scroll here, so the add button below stays in the panel. The padding
 * keeps the focus outline and the account badges, which sit across the button corner, inside the
 * scroll box. */
.provider-model-rail-tabs {
  display: flex;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-1);
  overflow-y: auto;
  scrollbar-width: none;
  margin: -5px;
  padding: 5px;
}

/* 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);
  inset-inline-end: 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. The API key
 * account shows a key, as it bills API credit and not the provider's plan. */
.provider-model-rail-account {
  position: absolute;
  inset-inline-end: -3px;
  bottom: -3px;
  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-rail-account svg {
  width: 11px;
  height: 11px;
  stroke-width: 2.75;
}

.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 end inset lives on the text, not the row, so the action button can line its end edge up
   * with the search field and the model rows below it. */
  padding-block: var(--openbot-space-1-5) var(--openbot-space-2);
  padding-inline: var(--ui-menu-inset) 0;
}

.provider-model-heading-text {
  flex: 1 1 auto;
  min-width: 0;
  padding-inline-end: 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;
}

/* A spent plan window: the chip shares the first line with the provider name, and the version stays
 * on the second. The chip shortens with an ellipsis, so the heading keeps its height. */
.provider-model-heading-limited {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--openbot-space-1-5);
}

.provider-model-heading-limited > span {
  grid-column: 1 / -1;
}

/* A Badge, at the height of the row tags (default, Free, New) so the heading keeps its height. */
.provider-model-limit {
  display: block;
  justify-self: start;
  max-width: 100%;
  height: auto;
  padding: 1px var(--openbot-space-1-5);
  color: var(--openbot-danger-text);
  line-height: 15px;
  text-overflow: ellipsis;
}

/* 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;
  /* A long model name must not widen its row past the panel. */
  grid-template-columns: minmax(0, 1fr);
  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-block: var(--ui-menu-padding) 0;
  padding-inline: calc(var(--ui-menu-padding) + var(--ui-menu-inset)) var(--ui-menu-padding);
  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;
}

.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-inline-start: 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);
}

/* Each speed has a name and a description, so the list is wider than the select, and wraps. */
.provider-model-speed-content {
  width: 300px;
}

.provider-model-speed-item .ui-select-item-label {
  display: flex;
  flex-direction: column;
  white-space: normal;
}

.provider-model-speed-name {
  color: var(--openbot-text-primary);
}

/* 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-block: var(--openbot-space-1-5);
  padding-inline: calc(var(--ui-menu-inset) + var(--openbot-icon-md) + var(--openbot-space-2)) var(--ui-menu-inset);
  color: var(--openbot-text-primary);
  cursor: pointer;
  text-align: start;
  transition:
    background-color var(--openbot-duration-hover) ease,
    color var(--openbot-duration-hover) ease;
}

.provider-model-option::before {
  position: absolute;
  top: 50%;
  inset-inline-start: 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;
}

/* A long name, such as a Fusion model of Devin, goes to a second line so that it shows in full. */
.provider-model-option-name > span {
  overflow-wrap: anywhere;
  text-wrap: pretty;
  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 fold row at the end of a provider's list: the models that the host's default hides. */
.provider-model-older {
  color: var(--openbot-text-secondary);
}

/* The fold row is not a model, so it has no selection circle. */
.provider-model-older::before {
  content: none;
}

/* The fold row is a Button, but it keeps the height and the font of a model row. */
.provider-model-older.ui-button {
  height: auto;
  font: inherit;
}

.provider-model-older[aria-expanded="true"] .provider-model-chevron {
  transform: rotate(180deg);
}

/* The settings that a Cursor model value fixes, such as "256k · High · Fast". */
.provider-model-option-name > .provider-model-option-settings {
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  white-space: nowrap;
}

/* The tick sits in the filled circle, cut out of it in the panel color. */
.provider-model-check {
  position: absolute;
  top: 50%;
  inset-inline-start: 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. A form
     field has the room of its row. */
  .provider-model-trigger:not(.provider-model-trigger-field) .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 {
    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;
  inset-inline-end: 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%;
}

/* While the chat moves up under the working face, a new message comes up from behind the face line. */
.virtual-chat-list[data-pushing] {
  overflow-y: clip;
}

.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 12px past the chat column, which is
 * the edge of the scroll area below the column width, 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-lg);
}

/* 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: start;
}

.unread-messages-mark-read {
  position: relative;
  z-index: 1;
  margin-inline-start: 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;
}

/* A new NEW line: the badge comes in first, then each line grows out from it. */
.unread-messages-divider[data-arrive] span {
  animation: unread-divider-badge-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}

.unread-messages-divider[data-arrive] hr {
  animation: unread-divider-line-in var(--openbot-duration-toast-enter) var(--openbot-ease-out) 60ms both;
}

.unread-messages-divider[data-arrive] hr:first-child {
  transform-origin: right center;
}

.unread-messages-divider[data-arrive] hr:last-child {
  transform-origin: left center;
}

@keyframes unread-divider-badge-in {
  from {
    opacity: 0;
    transform: scale(0.9);
    filter: blur(2px);
  }
}

@keyframes unread-divider-line-in {
  from {
    opacity: 0;
    transform: scaleX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .unread-messages-divider[data-arrive] :is(hr, span) {
    animation: none;
  }
}

/* The time stands in the middle of the space between two messages. The row above it already has
   12px of padding at its top, so the time gets less margin above than under it. */
.time-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 656px;
  height: 24px;
  margin: var(--openbot-space-2) auto var(--openbot-space-4);
  padding: 4px 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
  text-align: center;
}

/* The two lines grow out from the badge. In RTL the first line is on the right. */
:dir(rtl) .unread-messages-divider[data-arrive] hr:first-child {
  transform-origin: left center;
}

:dir(rtl) .unread-messages-divider[data-arrive] hr:last-child {
  transform-origin: right center;
}

/*
 * Where the reader is in a long chat, on the end edge of the transcript (right in LTR, left in RTL).
 *
 * One tick per message the reader wrote, at the same spacing for each. The ticks the reader has passed
 * are stronger, and the tick of the current section is the longest. With a mouse, the ticks fade in
 * small when the pointer comes near, and grow when it is on the rail. Pointing at a tick brings in a
 * card through a blur, over a blur of the transcript, with the message and the start of its reply.
 *
 * 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 {
  --chat-scroll-rail-pitch: var(--openbot-space-2);
  --chat-scroll-rail-hit: clamp(12px, var(--chat-scroll-rail-inset, 20px), 20px);
  --chat-scroll-rail-ease: var(--openbot-ease-out);
  --chat-scroll-rail-quick: var(--openbot-duration-overlay);

  position: sticky;
  z-index: 3;
  top: 0;
  pointer-events: none;
}

/* Only the ticks take the pointer, so the messages beside them stay selectable. The nav reaches into
   the container's side padding, so the ticks stand beside the messages. It is wider than the hit areas
   by the room a tick takes when it grows. */
.chat-scroll-rail-nav {
  position: absolute;
  top: 50%;
  inset-inline-end: calc(-1 * var(--chat-scroll-rail-inset, 0px));
  width: calc(var(--chat-scroll-rail-hit) + var(--openbot-space-2));
  height: min(64%, 600px);
  display: flex;
  flex-direction: column;
  transform: translateY(-50%);
}

/* A chat with more sections than the rail holds scrolls the ticks inside the rail, so every section
   stays in reach; the track keeps the current one in view. */
.chat-scroll-rail-track {
  position: relative;
  transition: opacity var(--chat-scroll-rail-quick) ease;
  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;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chat-scroll-rail-item {
  flex: none;
  height: var(--chat-scroll-rail-pitch);
  display: flex;
}

/* A hit area as tall as the spacing and as wide as the side padding, so it does not cover the edge of
   a message. */
.chat-scroll-rail .chat-scroll-rail-link {
  position: relative;
  flex: none;
  width: var(--chat-scroll-rail-hit);
  height: auto;
  margin-inline-start: auto;
  padding: 0;
  /* The button's border would move the ticks out of the side padding. */
  border: 0;
  border-radius: 0;
  outline: none;
  pointer-events: auto;
}

/* With a mouse, the ticks show only when the pointer is near the rail or a tick has focus. */
@media (hover: hover) {
  .chat-scroll-rail:not([data-near]) .chat-scroll-rail-nav:not(:has(:focus-visible)) .chat-scroll-rail-track {
    opacity: 0;
  }
}

/* The ticks are small until the pointer or the focus is on the rail. */
.chat-scroll-rail-tick {
  position: absolute;
  top: 50%;
  inset-inline-end: var(--openbot-space-1);
  width: var(--openbot-space-1);
  height: 2px;
  border-radius: var(--openbot-radius-pill);
  background: color-mix(in srgb, var(--openbot-text-primary) 18%, transparent);
  transform: translateY(-50%);
  transition:
    width var(--chat-scroll-rail-quick) var(--chat-scroll-rail-ease),
    background-color var(--chat-scroll-rail-quick) ease;
}

.chat-scroll-rail-item[data-state="read"] .chat-scroll-rail-tick {
  background: color-mix(in srgb, var(--openbot-text-primary) 36%, transparent);
}

.chat-scroll-rail-item[data-state="active"] .chat-scroll-rail-tick {
  width: var(--openbot-space-2);
  background: var(--openbot-text-secondary);
}

.chat-scroll-rail-nav:is(:hover, :has(:focus-visible)) .chat-scroll-rail-tick {
  width: var(--openbot-space-2);
}

/* The ticks beside the one under the pointer grow a little, less the farther they are. */
.chat-scroll-rail-nav:is(:hover, :has(:focus-visible))
  :is(.chat-scroll-rail-item[data-open] + * + *, .chat-scroll-rail-item:has(+ * + [data-open]))
  .chat-scroll-rail-tick {
  width: 10px;
}

.chat-scroll-rail-nav:is(:hover, :has(:focus-visible))
  :is(
    .chat-scroll-rail-item[data-state="active"],
    .chat-scroll-rail-item[data-open] + *,
    .chat-scroll-rail-item:has(+ [data-open])
  )
  .chat-scroll-rail-tick {
  width: var(--openbot-space-3);
}

.chat-scroll-rail-nav:is(:hover, :has(:focus-visible)) .chat-scroll-rail-item[data-open] .chat-scroll-rail-tick {
  width: var(--openbot-space-4);
  background: var(--openbot-text-primary);
}

/* The card stands level with its tick, toward the transcript. It is in a portal, because the mask that
   fades the transcript's edges stops the blur of the messages under it. It comes in through a blur of
   its own. */
.chat-scroll-rail-card {
  --chat-scroll-rail-quick: var(--openbot-duration-overlay);
  --chat-scroll-rail-ease: var(--openbot-ease-out);

  position: fixed;
  z-index: var(--openbot-layer-tooltip);
  top: var(--chat-scroll-rail-card-top);
  right: calc(100vw - var(--chat-scroll-rail-card-left) + var(--openbot-space-2));
  width: max-content;
  max-width: min(300px, 60vw);
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-3);
  border: 1px solid color-mix(in srgb, var(--openbot-text-primary) 8%, transparent);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-glass);
  backdrop-filter: blur(var(--openbot-space-4));
  font-size: var(--openbot-text-md);
  line-height: 18px;
  pointer-events: none;
  opacity: 0;
  filter: blur(var(--openbot-space-1));
  transform: translateY(-50%) translateX(var(--openbot-space-1));
  transition:
    opacity var(--chat-scroll-rail-quick) ease,
    filter var(--chat-scroll-rail-quick) ease,
    transform var(--chat-scroll-rail-quick) var(--chat-scroll-rail-ease);
}

:dir(rtl) .chat-scroll-rail-card {
  right: auto;
  left: calc(var(--chat-scroll-rail-card-right) + var(--openbot-space-2));
  transform: translateY(-50%) translateX(calc(-1 * var(--openbot-space-1)));
}

.chat-scroll-rail-card[data-open] {
  opacity: 1;
  filter: blur(0);
  transform: translateY(-50%);
}

.chat-scroll-rail-card-title {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-scroll-rail-card-reply {
  display: -webkit-box;
  overflow: hidden;
  color: var(--openbot-text-muted);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* The rules above name their own transitions, which outrank the global reduced-motion rule, so the
   card would still blur in. */
@media (prefers-reduced-motion: reduce) {
  .chat-scroll-rail .chat-scroll-rail-track,
  .chat-scroll-rail .chat-scroll-rail-tick,
  .chat-scroll-rail-card.chat-scroll-rail-card {
    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. The face is a
   little shorter than a one-line bubble, so it reads at the size of the sidebar faces. */
.message-entry-with-author,
.message-author-gutter,
.chat-visual-with-author {
  --message-author-face-size: var(--openbot-space-8);
  --message-author-column: calc(var(--message-author-face-size) + var(--openbot-space-1));
}

.message-entry-with-author {
  display: grid;
  grid-template-columns: var(--message-author-column) 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-author-avatar {
  width: var(--message-author-column);
  height: var(--message-author-column);
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  overflow: visible;
  border: 0;
  background: transparent;
}

.message-author-avatar .agent-avatar {
  --agent-avatar-optical-offset: -4px;

  width: var(--message-author-face-size);
  height: var(--message-author-face-size);
}

.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: var(--message-author-column);
  flex: 0 0 var(--message-author-column);
}

.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.
 */
/* The row is as wide as the chat, so each bubble grows from its own side and does not move toward the middle. */
.message-entry-animated {
  transform-origin: left bottom;
  animation: message-bubble-in 280ms cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
}

.message-entry-animated.message-entry-user {
  transform-origin: right bottom;
}

@media (prefers-reduced-motion: no-preference) {
  .message-entry-animated.message-entry-user {
    animation: message-sent-in 240ms 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;
}

/* A person's images stand above the bubble, outside it, with a small gap. */
.message-stack {
  display: grid;
  width: 100%;
  min-width: 0;
  justify-items: end;
  gap: var(--openbot-space-1);
}

.message-media-before {
  width: min(420px, 100%);
}

.message-media-before:has(.image-gallery) {
  width: min(520px, 100%);
}

.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;
}

/* A channel shows an agent's actions beside the bubble, in the same line. They go under the bubble
   only when the line has no room, so only a long answer keeps space for them. */
.message-entry-actions-beside .message-shell {
  flex-wrap: wrap;
  row-gap: var(--openbot-space-1);
}

/* The face stays at the end of the bubble when the actions go under it. */
/* Each row scopes its anchor name, so an engine with no anchor-scope keeps the face in the flow. */
@supports (position-anchor: --message-bubble) and (anchor-scope: --message-bubble) {
  .message-entry-actions-beside {
    anchor-scope: --message-bubble;
  }

  .message-entry-actions-beside .message-shell .ui-bubble {
    anchor-name: --message-bubble;
  }

  .message-entry-actions-beside .message-author-avatar {
    position: absolute;
    bottom: anchor(--message-bubble bottom);
    left: 0;
  }
}

/* The steps of the turn: a quiet summary at the end of the action row, shown with the actions. */
.message-steps {
  min-width: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--openbot-duration-hover) ease;
}

.message-steps > .agent-steps {
  margin-bottom: 0;
}

/* The general steps row rules load later, so these name the steps block too. */
/* The steps button matches the action buttons beside it: their height, and their hover as one unit. */
.message-steps .agent-steps .agent-steps-header {
  height: 24px;
  margin-inline-start: 0;
  padding-block: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  transition:
    background var(--openbot-duration-hover) ease,
    color var(--openbot-duration-hover) ease;
}

.message-steps .agent-steps .agent-steps-header:is(:hover, :focus-visible) {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
  outline: none;
}

.message-steps .agent-steps-header :is(.agent-steps-duration, .agent-steps-chevron) {
  color: inherit;
  transition:
    color var(--openbot-duration-hover) ease,
    rotate var(--openbot-duration-fast) var(--openbot-ease-out);
}

.message-steps .agent-steps-summary {
  font-weight: var(--openbot-weight-regular);
}

.message-entry:hover .message-steps,
.message-entry:focus-within .message-steps,
.message-entry:has(.message-actions-open) .message-steps {
  opacity: 1;
  pointer-events: auto;
}

@media (hover: none), (pointer: coarse) {
  .message-actions,
  .message-time,
  .message-steps {
    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 {
  --message-bubble-tint: var(--message-author-color, var(--openbot-accent));
  --message-bubble-tint-amount: 22%;
}

/*
 * A chat color tints the bubble: the reader's own, an agent's, or another person's. The author sets
 * it in Settings or in the agent settings, and everyone in the chat sees the same tint.
 */
.ui-bubble.message-bubble-colored {
  --message-bubble-tint: var(--message-chat-color);
  --message-bubble-tint-amount: 30%;
}

/* 22% of a color on the dark surface is dull, so the dark theme takes more of a chat color. */
:root[data-openbot-color-scheme="light"] .ui-bubble.message-bubble-colored {
  --message-bubble-tint-amount: 22%;
}

/*
 * The bubble keeps the plain surface values, because its content sets the same tokens again and a
 * token cannot refer to itself. A tinted bubble mixes the tint into the raised surface; an agent's
 * muted bubble mixes it into the surface.
 */
.ui-bubble:is(.message-bubble-member, .message-bubble-colored) {
  --message-plain-canvas: var(--openbot-bg-canvas);
  --message-plain-sidebar: var(--openbot-bg-sidebar);
  --message-plain-surface: var(--openbot-bg-surface);
  --message-plain-surface-raised: var(--openbot-bg-surface-raised);
  --message-plain-control: var(--openbot-bg-control);
  --message-plain-control-hover: var(--openbot-bg-control-hover);
  --message-plain-control-active: var(--openbot-bg-control-active);
  --message-bubble-base: var(--openbot-bg-surface-raised);
}

.message-entry-agent .ui-bubble-variant-muted.message-bubble-colored {
  --message-bubble-base: var(--openbot-bg-surface);
}

.ui-bubble.message-bubble-member > .ui-bubble-content {
  background: color-mix(
    in srgb,
    var(--message-bubble-tint) var(--message-bubble-tint-amount),
    var(--message-bubble-base)
  );
}

/*
 * Code, tables, quotes, file chips and cards in a bubble with a chat color take the same tint as the bubble, so
 * they do not stand on it as neutral panels. Each surface keeps its step from the next one, as in a
 * plain bubble, and a little of the text colour lifts them all from the bubble: lighter in the dark
 * theme, darker in the light theme. Without the lift, a block on a tinted bubble shows only its
 * border.
 */
.message-entry-user .ui-bubble.message-bubble-colored > .ui-bubble-content,
.message-entry-agent .ui-bubble-variant-muted.message-bubble-colored > .ui-bubble-content {
  --message-surface-lift: 5%;
  --openbot-bg-canvas: color-mix(
    in srgb,
    var(--openbot-text-primary) var(--message-surface-lift),
    color-mix(in srgb, var(--message-bubble-tint) var(--message-bubble-tint-amount), var(--message-plain-canvas))
  );
  --openbot-bg-sidebar: color-mix(
    in srgb,
    var(--openbot-text-primary) var(--message-surface-lift),
    color-mix(in srgb, var(--message-bubble-tint) var(--message-bubble-tint-amount), var(--message-plain-sidebar))
  );
  --openbot-bg-surface: color-mix(
    in srgb,
    var(--openbot-text-primary) var(--message-surface-lift),
    color-mix(in srgb, var(--message-bubble-tint) var(--message-bubble-tint-amount), var(--message-plain-surface))
  );
  --openbot-bg-surface-raised: color-mix(
    in srgb,
    var(--openbot-text-primary) var(--message-surface-lift),
    color-mix(
      in srgb,
      var(--message-bubble-tint) var(--message-bubble-tint-amount),
      var(--message-plain-surface-raised)
    )
  );
  --openbot-bg-control: color-mix(
    in srgb,
    var(--openbot-text-primary) var(--message-surface-lift),
    color-mix(in srgb, var(--message-bubble-tint) var(--message-bubble-tint-amount), var(--message-plain-control))
  );
  --openbot-bg-control-hover: color-mix(
    in srgb,
    var(--openbot-text-primary) var(--message-surface-lift),
    color-mix(in srgb, var(--message-bubble-tint) var(--message-bubble-tint-amount), var(--message-plain-control-hover))
  );
  --openbot-bg-control-active: color-mix(
    in srgb,
    var(--openbot-text-primary) var(--message-surface-lift),
    color-mix(
      in srgb,
      var(--message-bubble-tint) var(--message-bubble-tint-amount),
      var(--message-plain-control-active)
    )
  );

  background: color-mix(
    in srgb,
    var(--message-bubble-tint) var(--message-bubble-tint-amount),
    var(--message-bubble-base)
  );
}

/* A menu, a tooltip or a popover that opens in a bubble with a chat color covers the chat, so it stays plain. */
.ui-bubble.message-bubble-colored
:is([data-popper-positioner], [role="dialog"], [role="menu"], [role="listbox"], [role="tooltip"]) {
  --openbot-bg-canvas: var(--message-plain-canvas);
  --openbot-bg-sidebar: var(--message-plain-sidebar);
  --openbot-bg-surface: var(--message-plain-surface);
  --openbot-bg-surface-raised: var(--message-plain-surface-raised);
  --openbot-bg-control: var(--message-plain-control);
  --openbot-bg-control-hover: var(--message-plain-control-hover);
  --openbot-bg-control-active: var(--message-plain-control-active);
}

/*
 * A file icon tile is a clear tint of the file colour. On a chat color that tint would mix with the
 * chat color, so the tile lays it on the plain control and keeps its own colour. An audio or video
 * card keeps its neutral control tile, which takes the tint of the bubble as the other cards do.
 */
:is(
  .message-entry-user .ui-bubble.message-bubble-colored > .ui-bubble-content,
  .message-entry-agent .ui-bubble-variant-muted.message-bubble-colored > .ui-bubble-content
) :is(.attachment-file-visual, .attachment-reference-visual):not(.message-attachment[data-media] *) {
  background: linear-gradient(var(--file-reference-soft) 0 0), var(--message-plain-control);
}

.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;
}

/* Every button of the row, the reaction trigger too, takes the hover of a ghost button. */
.message-action-button:hover,
.message-action-button:focus-visible,
.message-action-button[aria-expanded="true"] {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
  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-inline-end: 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%;
  transform-origin: left bottom;
  animation: message-bubble-in 280ms cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
}

/* The line's padding, the 32px face, and its lower padding. */
.agent-activity-slot[data-reserved="true"] {
  min-height: 52px;
}

.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;
}

/* The slot keeps the room of a plain line, so that line enters and leaves in place: only its face and
   text animate, and the messages above do not move. A line with steps is taller, so it still opens. */
.agent-activity-slot[data-reserved="true"] > .agent-activity-entry[data-plain="true"],
.agent-activity-slot[data-reserved="true"] > .agent-activity-entry[data-plain="true"][data-state="exiting"] {
  grid-template-rows: 1fr;
  transition: none;
}

.agent-activity-content {
  min-height: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: clip;
  overflow-clip-margin: var(--openbot-space-3);
  /* The working face's felt dots reach about 10px above it. The top padding keeps them in this line,
     so they do not cover the message above. */
  padding-block: var(--openbot-space-3) 8px;
  padding-inline: 8px 0;
  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: calc(32px * -0.14);

  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;
}

/* The face of a working agent pops in from half size, rises from its lower edge, and settles with a
   small bounce, as a new bubble does. `backwards`, so the exit transition can shrink it afterwards. */
.agent-activity-entry .agent-activity-avatar {
  transform-origin: center bottom;
  animation: agent-activity-avatar-in 420ms cubic-bezier(0.34, 1.45, 0.64, 1) backwards;
}

@keyframes agent-activity-avatar-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.5);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* The face leaves the way it came: it shrinks to its lower edge while the line fades. */
.agent-activity-entry[data-state="exiting"] .agent-activity-avatar {
  transform: translateY(4px) scale(0.6);
}

.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;
}

/* A wait for the provider is not work, so its label does not shine. */
.agent-activity-entry[data-waiting="true"] .agent-activity-label {
  animation: none;
  background: none;
  color: var(--openbot-text-secondary);
  -webkit-text-fill-color: currentColor;
}

/* The plain line draws a label as Grok Bot does: each new step label rises 5px into place in 350ms,
   with no exit, and a soft light runs over it in 60 steps. */
.agent-activity-entry[data-plain="true"]:not([data-waiting="true"]) .agent-activity-label {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--openbot-text-primary) 40%, transparent) 0%,
    color-mix(in srgb, var(--openbot-text-primary) 40%, transparent) 25%,
    var(--openbot-text-primary) 60%,
    color-mix(in srgb, var(--openbot-text-primary) 40%, transparent) 75%,
    color-mix(in srgb, var(--openbot-text-primary) 40%, transparent) 100%
  );
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  animation:
    agent-activity-label-enter 350ms cubic-bezier(0.2, 0.8, 0.3, 1) backwards,
    agent-activity-label-shine 2.2s steps(60, end) infinite;
}

.agent-activity-entry[data-plain="true"][data-waiting="true"] .agent-activity-label {
  animation: agent-activity-label-enter 350ms cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
}

@keyframes agent-activity-label-enter {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
}

@keyframes agent-activity-label-shine {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

@keyframes agent-activity-label-fade {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .agent-activity-entry[data-plain="true"] .agent-activity-label,
  .agent-activity-entry[data-plain="true"]:not([data-waiting="true"]) .agent-activity-label {
    animation: agent-activity-label-fade 120ms ease-out backwards;
  }
}

.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);
}

/* The link to the routine's own thread, where the run's answer and work are. */
.ui-button.chat-action-routine-thread {
  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: start;
}

.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: start;
  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);
}

/* The members of a routing row, as one list: each name keeps its pill, and the list's own words sit
   between them. In a narrow pane the list wraps at a separator rather than cutting a name. */
.chat-action-routing-targets {
  display: inline-flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

/* The pill's own padding stands after each name, so the separator moves back by that padding: the
   comma then follows the name as it does in text. */
.chat-action-routing-separator {
  margin-inline-start: calc(-1 * var(--openbot-space-1-5));
  white-space: pre;
}

.chat-action-target-entering {
  transform-origin: left center;
  animation: message-bubble-in 280ms cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
}

/* 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,
.chat-action-marker-channel-change .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);
}

/* The open text of an agent message reads as a chat message under its centred marker. */
.chat-action-message-text {
  align-self: stretch;
  margin-block: var(--openbot-space-2);
  text-align: start;
}

.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-inline-start: -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;
}

/*
 * Bubbles grow with the chat column, between a minimum and a maximum, so a big screen shows more of a
 * reply and a narrow pane is not wasted. A percentage refers to the message row. An agent reply, code,
 * and a table use the wide width; a person's message uses the narrow width, and leaves a gap at the
 * other side on a narrow pane.
 */
:root {
  --message-wide-bubble-width: min(100%, max(720px, 70%), 1200px);
  --message-narrow-bubble-width: min(92%, max(420px, 50%), 800px);
}

.message-entry-agent .ui-bubble {
  max-width: var(--message-wide-bubble-width);
}

/* An image keeps its size in a person's bubble too: the bubble does not shrink to the text. */
.message-entry .ui-bubble:has(.image-generation) {
  width: min(420px, 100%);
  max-width: min(420px, 100%);
}

.message-entry .ui-bubble:has(.image-gallery) {
  width: min(520px, 100%);
  max-width: min(520px, 100%);
}

.message-entry-agent
  .ui-bubble-variant-ghost:has(:is(.image-generation, .image-gallery, .message-code-block, .message-data-table-scroll))
  > .ui-bubble-content {
  width: 100%;
}

.message-entry-user .ui-bubble:has(:is(.image-generation, .image-gallery)) > .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;
  inset-inline-end: 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: start;
}

.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;
  inset-inline-end: 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 failed send, beside the time under the bubble. A send in flight leaves it empty. */
.pending-send-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.pending-send-label {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  color: var(--openbot-danger-text);
}

.pending-send-label:not(:empty) {
  margin-inline-end: var(--openbot-space-1);
}

.pending-send-label > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: none;
}

.pending-send-error {
  color: var(--openbot-text-muted);
  overflow-wrap: anywhere;
}

.pending-send-error::before {
  content: "·";
  margin-inline-end: var(--openbot-space-1);
}

/*
 * The reader's own actions stand before the bubble, in the same line. The stack takes the width of
 * the bubble, not the line, so the actions fit beside it. A message with images keeps the full
 * line, and its actions go under it.
 */
.message-entry-user.message-entry-actions-beside .message-stack:not(:has(.message-media-before)) {
  width: auto;
  max-width: min(80%, 720px);
  flex: 0 1 auto;
}

.message-entry-user.message-entry-actions-beside .message-stack:not(:has(.message-media-before)) > .ui-bubble {
  max-width: 100%;
}

.message-entry-user.message-entry-actions-beside .message-stack:not(:has(.message-media-before)) + .message-action-row {
  order: -1;
}

/*
 * A run of messages by one sender reads as one block: where two bubbles of the run meet, their
 * corners on the sender's side are small, at the start for an agent and at the end for the reader.
 * Only a row that the timeline groups with the row above it, and that starts with its message (no
 * marker or steps above it), joins the bubble above.
 */
.virtual-chat-row[data-grouped="sender"]
  > .message-entry-agent:first-child
  .message-shell
  > .ui-bubble
  > .ui-bubble-content {
  border-start-start-radius: var(--openbot-radius-sm);
}

.virtual-chat-row[data-grouped="sender"]
  > .message-entry-user:first-child
  .message-stack
  > .ui-bubble:first-child
  > .ui-bubble-content {
  border-start-end-radius: var(--openbot-radius-sm);
}

.virtual-chat-row:has(+ .virtual-chat-row[data-grouped="sender"] > .message-entry-agent:first-child)
  > .message-entry-agent:last-child
  .message-shell
  > .ui-bubble
  > .ui-bubble-content {
  border-end-start-radius: var(--openbot-radius-sm);
}

.virtual-chat-row:has(+ .virtual-chat-row[data-grouped="sender"] > .message-entry-user:first-child)
  > .message-entry-user:last-child
  .message-stack
  > .ui-bubble:last-child
  > .ui-bubble-content {
  border-end-end-radius: var(--openbot-radius-sm);
}

/* The steps of an agent's turn: under the activity line while it runs, above the answer after. */

/* The working rings reach about 10px past a face, and the channel's faces sit 2px from the edge.
   The clip margin keeps the rings whole. It goes when the line leaves, so open steps do not show
   below the closing row. */
.agent-activity-body {
  min-height: 0;
  overflow: clip;
  overflow-clip-margin: var(--openbot-space-3);
}

.agent-activity-entry[data-state="exiting"] .agent-activity-body {
  overflow-clip-margin: 0;
}

/* The entry ignores the pointer so the chat scrolls under it; its controls take it back. */
.agent-activity-content .agent-steps-toggle,
.agent-activity-steps {
  pointer-events: auto;
}

.agent-activity-content .agent-steps-toggle {
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
}

/* The open list is not a lit toggle, so the chevron has no fill. */
.agent-activity-content .agent-steps-toggle[aria-expanded="true"]:not(:hover) {
  background: transparent;
}

.agent-activity-steps {
  padding-block: 0 var(--openbot-space-2);
  padding-inline: var(--openbot-space-6) 0;
}

.agent-steps-chevron {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  transition: rotate var(--openbot-duration-fast) var(--openbot-ease-out);
}

.agent-steps-toggle[aria-expanded="true"] .agent-steps-chevron {
  rotate: 180deg;
}

/* The row's chevron points right, as the subagents header's does, and down when its list is open. */
.agent-steps-header[aria-expanded="true"] .agent-steps-chevron {
  rotate: 90deg;
}

.agent-steps {
  display: grid;
  justify-items: start;
  margin-bottom: var(--openbot-space-1);
}

/* The row looks like the header of the subagents above it. */
.agent-steps .agent-steps-header {
  display: flex;
  height: auto;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-inline-start: 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: start;
}

/* The open list is not a lit toggle, so the header has no fill. */
.agent-steps .agent-steps-header[aria-expanded="true"]:not(:hover) {
  background: transparent;
  color: inherit;
}

.agent-step-icon {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
}

.agent-steps-summary {
  overflow: hidden;
  font-weight: var(--openbot-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-steps-failed {
  flex: 0 0 auto;
  color: var(--openbot-danger-text);
  font-variant-numeric: tabular-nums;
}

.agent-steps-duration {
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}

.agent-steps-panel {
  display: grid;
  width: 100%;
  grid-template-rows: 1fr;
  opacity: 1;
  transition:
    grid-template-rows var(--openbot-duration-overlay) var(--openbot-ease-out),
    opacity var(--openbot-duration-normal) var(--openbot-ease-out);
}

/* The panel exists only while the row is open, so it opens from its first frame. */
@starting-style {
  .agent-steps-panel {
    grid-template-rows: 0fr;
    opacity: 0;
  }
}

.agent-steps-viewport {
  max-height: 220px;
  overflow: hidden;
  padding-inline-start: var(--openbot-space-3);
  border-inline-start: 1px solid var(--openbot-border);
}

.agent-steps-viewport[data-scrolls] {
  overflow-y: auto;
}

.agent-steps-panel > .agent-steps-viewport {
  min-height: 0;
  margin-inline-start: var(--openbot-space-3);
}

.agent-steps-list {
  display: grid;
  gap: var(--openbot-space-1);
  margin: 0;
  padding: var(--openbot-space-1-5) 0;
  list-style: none;
  transition: transform var(--openbot-duration-overlay) var(--openbot-ease-out);
}

.agent-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;
  animation: message-in var(--openbot-duration-normal) var(--openbot-ease-out) both;
}

/* The step that the user picked in the trace lights up, then fades back. A colour change is not
 * motion, so it stays with reduced motion. */
.agent-step[data-focused] {
  border-radius: var(--openbot-radius-xs);
  animation: agent-step-picked calc(var(--openbot-duration-overlay) * 6) var(--openbot-ease-out) both;
}

@keyframes agent-step-picked {
  from {
    background: var(--openbot-hover);
  }

  to {
    background: transparent;
  }
}

.agent-step .agent-step-icon {
  margin-top: 2px;
}

.agent-step[data-kind="thinking"] .agent-step-text {
  color: var(--openbot-text-muted);
  font-style: italic;
}

.agent-step-text.agent-activity-label {
  display: inline;
  -webkit-line-clamp: unset;
}

.agent-step-memory {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0 var(--openbot-space-2);
  color: var(--openbot-text-primary);
}

.agent-step-memory-action,
.agent-step-memory-previous,
.agent-step-memory[data-action="forgotten"] s {
  color: var(--openbot-text-muted);
}

/* A failed tool step: its line, a toggle as quiet as the steps header, and the error it opens. */
.agent-step-failed {
  display: grid;
  min-width: 0;
  flex: 1 1 auto;
  justify-items: start;
}

.agent-step .agent-step-error-toggle {
  display: inline-flex;
  height: auto;
  align-items: center;
  gap: var(--openbot-space-1);
  margin-inline-start: calc(-1 * var(--openbot-space-1));
  border-radius: var(--openbot-radius-xs);
  padding: 0 var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: inherit;
  font-weight: var(--openbot-weight-regular);
  line-height: inherit;
}

.agent-step-error-toggle[aria-expanded="true"] .agent-steps-chevron {
  rotate: 90deg;
}

.agent-step-error {
  max-height: 160px;
  justify-self: stretch;
  margin: var(--openbot-space-1) 0 0;
  overflow: auto;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
  .agent-steps-chevron,
  .agent-steps-panel,
  .agent-steps-list {
    transition: none;
  }

  .agent-step {
    animation: none;
  }
}

/* In RTL the right chevron points left, so the open row turns it the other way to point down. */
:dir(rtl) svg[class~="lucide-chevron-right"].agent-steps-chevron {
  transform: scaleX(-1);
}

:dir(rtl) .agent-steps-header[aria-expanded="true"] svg[class~="lucide-chevron-right"].agent-steps-chevron,
:dir(rtl) .agent-step-error-toggle[aria-expanded="true"] svg[class~="lucide-chevron-right"].agent-steps-chevron {
  rotate: -90deg;
}

/* The trace of an agent run: the totals, then one timeline row for each span. */

.trace {
  --trace-surface: var(--openbot-bg-surface);
  /* `cqw` resolves where these are used, inside the scroll body, so a narrow trace keeps its timeline. */
  --trace-name-width: min(260px, 45cqw);
  /* Room on the right of the timeline for the label after the last bar. */
  --trace-label-room: min(150px, 25cqw);
  --trace-lane-pad: var(--openbot-space-3);
  --trace-row-height: 36px;
  --trace-bar-height: 16px;
  /* The colour of the agent that did a span. The top agent and its own calls stay neutral. */
  --trace-hue: var(--openbot-text-muted);
  display: flex;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  background: var(--trace-surface);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.trace-header {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  padding-block: var(--openbot-space-2);
  padding-inline: var(--openbot-space-4) var(--openbot-space-2);
  border-bottom: 1px solid var(--openbot-border);
}

.trace-title {
  flex: 1 1 auto;
  margin: 0;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-md);
}

/* The speed menu is compact: it holds one short value. */
.ui-select.trace-select {
  width: auto;
  flex: 0 0 auto;
}

.trace-select .trace-select-trigger {
  width: auto;
  gap: var(--openbot-space-1);
  padding-inline: var(--openbot-space-2) var(--openbot-space-1-5);
  font-variant-numeric: tabular-nums;
}

.trace-search {
  position: relative;
  width: min(240px, 100%);
}

.trace-search-icon {
  position: absolute;
  top: 50%;
  inset-inline-start: var(--openbot-space-2);
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  color: var(--openbot-text-muted);
  translate: 0 -50%;
  pointer-events: none;
}

.trace-search .trace-search-input {
  width: 100%;
  padding-inline: calc(var(--openbot-space-2) * 2 + var(--openbot-icon-xs)) var(--openbot-space-8);
}

/* A focused field gets a neutral border only, as the other fields of the app. */
.trace-search .trace-search-input:focus-visible {
  border-color: var(--openbot-text-muted);
  box-shadow: none;
  outline: none;
}

/* The browser's own clear button would sit under the shortcut hint. */
.trace-search-input::-webkit-search-cancel-button {
  display: none;
}

.trace-search-kbd {
  position: absolute;
  top: 50%;
  inset-inline-end: var(--openbot-space-1-5);
  translate: 0 -50%;
  pointer-events: none;
}

.trace-totals {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  /* The last total in each line puts its end border outside the trace, where it is clipped. */
  margin-block: 0;
  margin-inline: 0 -1px;
}

.trace-total {
  display: grid;
  flex: 1 1 96px;
  gap: var(--openbot-space-0-5);
  min-width: 0;
  padding: var(--openbot-space-2) var(--openbot-space-3);
  border-inline-end: 1px solid var(--openbot-border);
  border-bottom: 1px solid var(--openbot-border);
}

.trace-total-label {
  overflow: hidden;
  color: var(--openbot-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The same roll as the task list: the digits that change lift in and sharpen. */
.trace-total-value {
  --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);

  margin: 0;
  font-size: var(--openbot-text-lg);
  font-variant-numeric: tabular-nums;
  line-height: var(--openbot-leading-lg);
}

.trace-body {
  --trace-fade: var(--openbot-space-6);
  /* No edge is faded until the list scrolls: one opaque layer for each edge. */
  --trace-mask-top: linear-gradient(var(--openbot-text-primary), var(--openbot-text-primary));
  --trace-mask-bottom: linear-gradient(var(--openbot-text-primary), var(--openbot-text-primary));
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  container-type: inline-size;
  scrollbar-width: none;
  /* A time axis: the name column, the lanes and the bars keep their LTR places in RTL too. */
  direction: ltr;
}

.trace-body::-webkit-scrollbar {
  display: none;
}

.trace-body.scroll-fade-top,
.trace-body.scroll-fade-bottom {
  mask-image: var(--trace-mask-top), var(--trace-mask-bottom);
  mask-composite: intersect;
}

/* The rows fade in under the rows that stay at the top. */
.trace-body.scroll-fade-top {
  --trace-mask-top: linear-gradient(
    to bottom,
    var(--openbot-text-primary) var(--trace-stack),
    transparent var(--trace-stack),
    var(--openbot-text-primary) calc(var(--trace-stack) + var(--trace-fade))
  );
}

.trace-body.scroll-fade-bottom {
  --trace-mask-bottom: linear-gradient(
    to bottom,
    var(--openbot-text-primary) calc(100% - var(--trace-fade)),
    transparent
  );
}

.trace-grid {
  position: relative;
  z-index: 0;
}

.trace-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.trace-row {
  display: grid;
  height: var(--trace-row-height);
  box-sizing: border-box;
  grid-template-columns: var(--trace-name-width) minmax(0, 1fr);
  border-bottom: 1px solid var(--openbot-border);
}

/* The rows under a parent slide closed when it folds and open when it unfolds. `clip`, not `hidden`:
 * a scroll container here would stop the parent rows inside from staying at the top. */
.trace-branch-children {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--openbot-duration-slow) var(--openbot-ease-out);
}

.trace-branch-children[data-open] {
  grid-template-rows: 1fr;
}

.trace-branch-clip {
  min-height: 0;
  overflow: clip;
  opacity: 0;
  transition: opacity var(--openbot-duration-slow) var(--openbot-ease-out);
}

.trace-branch-children[data-open] > .trace-branch-clip {
  opacity: 1;
}

/* A row that a search or a replay adds fades in. */
.trace-row {
  transition: opacity var(--openbot-duration-slow) var(--openbot-ease-out);
}

@starting-style {
  .trace-row {
    opacity: 0;
  }
}

/* A parent row stays under the rows above it while its own rows scroll. Its item ends with its last
 * row, so the next parent row takes its place. */
.trace-row[data-parent] {
  position: sticky;
  top: calc((var(--trace-depth) + 1) * var(--trace-row-height));
  z-index: 4;
  background: var(--trace-surface);
}

/* Five agent colours. The calls of an agent take its colour through `--trace-hue`. */
.trace-row[data-hue="1"],
.trace-handoff[data-hue="1"] {
  --trace-hue: var(--openbot-chart-storage-downloads);
}

.trace-row[data-hue="2"],
.trace-handoff[data-hue="2"] {
  --trace-hue: var(--openbot-chart-storage-files);
}

.trace-row[data-hue="3"],
.trace-handoff[data-hue="3"] {
  --trace-hue: var(--openbot-chart-storage-chats);
}

.trace-row[data-hue="4"],
.trace-handoff[data-hue="4"] {
  --trace-hue: var(--openbot-chart-storage-workspaces);
}

.trace-row[data-hue="5"],
.trace-handoff[data-hue="5"] {
  --trace-hue: var(--openbot-chart-storage-runtimes);
}

.trace-name {
  position: sticky;
  left: 0;
  z-index: 3;
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-1-5);
  --trace-indent: var(--openbot-space-4);
  --trace-guide-at: calc(var(--openbot-control-xs) / 2);
  padding-inline: calc(var(--openbot-space-2) + var(--trace-depth, 0) * var(--trace-indent)) var(--openbot-space-2);
  border-right: 1px solid var(--openbot-border);
  /* The tint of a row under the pointer, then one guide line for each tree level above the row,
   * under the chevron of that level. */
  background:
    linear-gradient(var(--trace-row-tint), var(--trace-row-tint)),
    repeating-linear-gradient(
      to right,
      transparent 0 var(--trace-guide-at),
      var(--openbot-border) var(--trace-guide-at) calc(var(--trace-guide-at) + 1px),
      transparent calc(var(--trace-guide-at) + 1px) var(--trace-indent)
    )
    var(--openbot-space-2) 0 / calc(var(--trace-depth, 0) * var(--trace-indent)) 100% no-repeat,
    var(--trace-surface);
}

/* The row under the pointer or the keyboard lights up, and so does the piece of its parent's lane
 * that stands for it. A piece under the pointer lights up its row. */
.trace-row {
  --trace-row-tint: transparent;
}

.trace-row[data-hovered],
.trace-row:has(.trace-name-button:focus-visible) {
  --trace-row-tint: var(--openbot-hover);
}

.trace-row[data-hovered] .trace-bar:not(.trace-segment),
.trace-segment[data-hovered] {
  outline: 1px solid var(--openbot-text-secondary);
  outline-offset: 1px;
}

/* The name of a row is its keyboard stop, and a click on it shows the step in the chat. */
.trace-name .trace-name-button.ui-button {
  height: auto;
  min-width: 0;
  flex: 1 1 auto;
  justify-content: flex-start;
  gap: var(--openbot-space-1-5);
  padding: 0;
  border-radius: var(--openbot-radius-xs);
  background: transparent;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-align: start;
  cursor: default;
}

.trace-row[data-selectable] .trace-name-button.ui-button {
  cursor: pointer;
}

/* The row's tint shows the keyboard stop, so the name gets a thin neutral ring and no halo. */
.trace-name .trace-name-button.ui-button:focus-visible {
  box-shadow: none;
  outline: 1px solid var(--openbot-text-muted);
  outline-offset: 1px;
}

.trace-axis-row {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--trace-surface);
}

.trace-axis-name {
  color: var(--openbot-text-muted);
}

/* An open row is not a lit toggle, so the chevron has no fill. */
.trace-name .trace-toggle[aria-expanded="true"]:not(:hover) {
  background: transparent;
}

.trace-toggle-icon {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  transition: rotate var(--openbot-duration-fast) var(--openbot-ease-out);
}

.trace-toggle[aria-expanded="false"] .trace-toggle-icon {
  rotate: -90deg;
}

.trace-toggle-space {
  width: var(--openbot-control-xs);
  flex: 0 0 auto;
}

.trace-icon {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
}

/* The icon of a row sits on a quiet tile. An agent's icon has the agent's colour. */
.trace-glyph {
  display: grid;
  width: 22px;
  height: 22px;
  box-sizing: border-box;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-sm);
  background: color-mix(in srgb, var(--openbot-text-primary) 4%, var(--trace-surface));
  color: var(--openbot-text-secondary);
}

.trace-glyph[data-agent] {
  color: var(--trace-hue);
}

.trace-row:not([data-hue]) .trace-glyph[data-agent] {
  color: var(--openbot-text-primary);
}

.trace-glyph[data-failed] {
  color: var(--openbot-danger-text);
}

.trace-glyph-icon {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}

.trace-spinner {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  animation: ui-spin 1s linear infinite;
}

.trace-span-name {
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trace-row[data-parent] .trace-span-name {
  font-weight: var(--openbot-weight-semibold);
}

.trace-row[data-failed] .trace-span-name {
  color: var(--openbot-danger-text);
}

/* The error of a failed tool row, under the row. It covers the lines of the timeline behind it. */
.trace-span-error-row {
  position: relative;
  z-index: 2;
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  padding-inline-start: calc(var(--openbot-space-2) + (var(--trace-depth, 0) + 1) * var(--openbot-space-4));
  border-bottom: 1px solid var(--openbot-border);
  background: var(--trace-surface);
}

.trace-span-error {
  max-height: 160px;
  margin: 0;
  overflow: auto;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* A light moves along the name of a running step. It repaints the text on each frame, so only the
 * few running rows have it. */
.trace-row[data-running] .trace-span-name {
  background:
    linear-gradient(
      90deg,
      var(--openbot-text-muted) 0%,
      var(--openbot-text-muted) 35%,
      var(--openbot-text-primary) 50%,
      var(--openbot-text-muted) 65%,
      var(--openbot-text-muted) 100%
    )
    0 0 / 300% 100%;
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: trace-shine 2s linear infinite;
}

@keyframes trace-shine {
  from {
    background-position: 100% 0;
  }

  to {
    background-position: 0 0;
  }
}

.trace-span-detail {
  /* The detail takes only the room after the name, so the name stays readable. */
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The timeline of a row. Each time sits at `--trace-at`, from 0 to 1, between the left pad and the
 * label room. The overlay of grid lines uses the same scale. */
.trace-lane {
  --trace-scale: calc(100% - var(--trace-lane-pad) - var(--trace-label-room));
  position: relative;
  z-index: 1;
  min-width: 0;
}

.trace-row[data-hovered] .trace-lane {
  background: var(--trace-row-tint);
}

.trace-overlay {
  --trace-scale: calc(100% - var(--trace-lane-pad) - var(--trace-label-room));
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: var(--trace-name-width);
  pointer-events: none;
}

.trace-tick,
.trace-gridline,
.trace-now,
.trace-now-dot,
.trace-bar,
.trace-handoff,
.trace-bar-label {
  position: absolute;
  left: calc(var(--trace-lane-pad) + var(--trace-scale) * var(--trace-at));
}

.trace-tick {
  top: 50%;
  padding-left: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-variant-numeric: tabular-nums;
  translate: 0 -50%;
  white-space: nowrap;
}

.trace-gridline,
.trace-now {
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--openbot-border);
}

.trace-now {
  z-index: 2;
  background: var(--openbot-text-dim);
}

.trace-now-dot {
  bottom: 0;
  width: 7px;
  height: 7px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-primary);
  translate: -3px 50%;
}

/* A new bar grows from its start. A replay moves bars on each frame, so their position has no
 * transition. */
.trace-bar {
  transform-origin: left center;
  transition: scale var(--openbot-duration-overlay) var(--openbot-ease-out);
}

@starting-style {
  .trace-bar {
    scale: 0 1;
  }
}

.trace-bar {
  top: 50%;
  display: grid;
  width: max(3px, calc(var(--trace-scale) * var(--trace-width)));
  height: var(--trace-bar-height);
  box-sizing: border-box;
  place-items: center;
  overflow: hidden;
  border-radius: var(--openbot-radius-xs);
  translate: 0 -50%;
}

/* A model call has the full agent colour and a tool call a dim one. */
.trace-bar[data-kind="model"],
.trace-swatch[data-kind="model"] {
  background-color: var(--trace-hue);
}

.trace-bar[data-kind="tool"],
.trace-swatch[data-kind="tool"] {
  background-color: color-mix(in srgb, var(--trace-hue) 45%, var(--trace-surface));
}

.trace-bar[data-kind="waiting"],
.trace-swatch[data-kind="waiting"] {
  border: 1px solid color-mix(in srgb, var(--trace-hue) 60%, transparent);
  background: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--trace-hue) 60%, transparent) 0 1px,
    transparent 1px 5px
  );
}

.trace-bar[data-kind="handoff"] {
  border: 1px solid var(--trace-hue);
  background-color: transparent;
}

.trace-bar[data-failed],
.trace-swatch[data-failed] {
  border: 0;
  background: var(--openbot-danger);
}

.trace-bar.trace-track {
  border: 0;
  background: color-mix(in srgb, var(--trace-hue) 16%, transparent);
}

/* A light moves along a bar that still runs. */
.trace-bar[data-running]:not([data-kind="waiting"]) {
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--openbot-text-primary) 35%, transparent) 50%,
    transparent 100%
  );
  background-repeat: no-repeat;
  background-size: 50% 100%;
  animation: trace-bar-shine 1.6s linear infinite;
}

@keyframes trace-bar-shine {
  from {
    background-position: -100% 0;
  }

  to {
    background-position: 200% 0;
  }
}

.trace-bar-icon {
  width: 12px;
  height: 12px;
  color: var(--openbot-text-on-accent);
}

/* The line from a parent row down to its subagents' bars. It starts under the parent's lane and ends
 * at the top of the last subagent's row. A line has the colour of the agent that hands off, so the
 * rows that draw parts of it do not give it their own colour. */
.trace-handoff {
  --trace-elbow: var(--openbot-space-2);
  --trace-line-top: calc((var(--trace-from) + 1.5) * var(--trace-row-height) + var(--trace-bar-height) / 2);
  --trace-line-rows: calc(var(--trace-to) - var(--trace-from) - 0.5);
  /* An open error moves the rows under it, so the line moves and grows by the errors along it. */
  top: calc(var(--trace-line-top) + var(--trace-from-shift, 0px));
  width: var(--trace-elbow);
  height: calc(var(--trace-line-rows) * var(--trace-row-height) - var(--trace-bar-height) / 2 + var(--trace-grow, 0px));
  box-sizing: border-box;
  border-left: 2px dotted var(--trace-hue);
  translate: calc(-1 * var(--trace-elbow)) 0;
  /* The rows slide when a parent folds, so the line follows them at the same pace. */
  transition:
    top var(--openbot-duration-slow) var(--openbot-ease-out),
    height var(--openbot-duration-slow) var(--openbot-ease-out);
}

.trace-handoff:not([data-hue]) {
  --trace-hue: var(--openbot-text-muted);
}

/* The branch into a subagent's bar. The line goes on past it to the next subagent, and turns into the
 * bar of the last one. */
.trace-handoff.trace-handoff-end {
  top: 0;
  height: 50%;
  border-bottom: 2px dotted var(--trace-hue);
  border-left: 0;
}

.trace-handoff.trace-handoff-end[data-last] {
  border-left: 2px dotted var(--trace-hue);
  border-bottom-left-radius: var(--openbot-radius-xs);
}

/* A parent row is opaque while it stays at the top, so it draws the part of a line that passes it. */
.trace-handoff.trace-handoff-pass {
  top: 0;
  height: 100%;
}

.trace-bar-label {
  top: 50%;
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  padding-left: var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
  font-variant-numeric: tabular-nums;
  translate: 0 -50%;
  white-space: nowrap;
}

.trace-empty {
  display: grid;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-8) var(--openbot-space-4);
  text-align: center;
}

.trace-empty-title,
.trace-empty-description {
  margin: 0;
}

.trace-empty-title {
  font-weight: var(--openbot-weight-medium);
}

.trace-empty-description {
  color: var(--openbot-text-muted);
}

.trace-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2) var(--openbot-space-4);
  padding-block: var(--openbot-space-2);
  padding-inline: var(--openbot-space-4) var(--openbot-space-2);
  border-top: 1px solid var(--openbot-border);
}

/* Each key is a small bar in the shape of the bars above it. The top agent's neutral colour is too dim here,
 * so the keys use the secondary text colour. */
.trace-legend {
  --trace-hue: var(--openbot-text-secondary);
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-1) var(--openbot-space-4);
  margin: 0;
  padding: 0;
  color: var(--openbot-text-muted);
  list-style: none;
}

.trace-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-2);
}

.trace-swatch {
  width: 16px;
  height: 8px;
  flex: none;
  box-sizing: border-box;
  border-radius: var(--openbot-radius-xs);
}

/* The handoff key is a piece of the dotted line that goes down to a subagent. */
.trace-swatch[data-kind="handoff"] {
  height: 2px;
  border-top: 2px dotted var(--trace-hue);
  border-radius: 0;
}

.trace-replay {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
}

.trace-replay .trace-play {
  border-radius: var(--openbot-radius-pill);
}

.trace-replay .trace-select {
  margin-inline-start: var(--openbot-space-1);
}

.ui-dialog-content.trace-dialog {
  width: min(1040px, 100%);
  max-height: min(680px, calc(100dvh - 2 * var(--openbot-space-6)));
  display: flex;
  overflow: hidden;
  outline: 0;
  background: var(--openbot-bg-surface);
}

.trace.trace-in-dialog {
  border: 0;
  border-radius: 0;
}

@media (prefers-reduced-motion: reduce) {
  .trace-branch-children,
  .trace-branch-clip,
  .trace-row,
  .trace-bar,
  .trace-handoff {
    transition: none;
  }

  .trace-spinner,
  .trace-row[data-running] .trace-span-name,
  .trace-bar[data-running] {
    animation: none;
  }

  .trace-toggle-icon {
    transition: none;
  }
}

/* A direct chat before its first message: the agent, its line, and a faint sample turn below.
   It fills the scroll area and no more, so the chat cannot open scrolled past the title: on a
   short window, the turn row gets only the height that is left. */
.agent-chat-empty {
  box-sizing: border-box;
  height: 100%;
  display: grid;
  grid-auto-rows: auto minmax(0, 21rem);
  align-content: center;
  justify-items: center;
  gap: var(--openbot-space-6);
  padding: var(--openbot-space-6) 0;
  container-type: inline-size;
}

.agent-chat-empty-pitch {
  --agent-chat-empty-title-size: var(--openbot-text-display);
  --agent-chat-empty-hand-size: calc(var(--agent-chat-empty-title-size) * 1.2);
  display: grid;
  justify-items: center;
  gap: var(--openbot-space-2);
  text-align: center;
}

.agent-chat-empty-avatar.agent-avatar {
  width: calc(var(--openbot-control-xl) * 1.6);
  height: calc(var(--openbot-control-xl) * 1.6);
  margin-bottom: var(--openbot-space-2);
}

.agent-chat-empty-title {
  margin: 0;
  font-size: var(--agent-chat-empty-title-size);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.agent-chat-empty-title > span {
  display: block;
}

.agent-chat-empty-ready,
.agent-chat-empty-description {
  color: var(--openbot-text-muted);
}

.agent-chat-empty-description {
  max-width: 30rem;
  margin: 0;
  font-size: var(--openbot-text-xl);
  line-height: 1.5;
  text-wrap: balance;
}

/* The one handwritten word. It writes itself once, from the start side. The brand has no hand
   font, so the system ones stand in. */
.agent-chat-empty-hand {
  display: inline-block;
  color: var(--openbot-accent-text);
  font-family: "Bradley Hand", "Noteworthy", "Segoe Print", cursive;
  font-size: var(--agent-chat-empty-hand-size);
  line-height: 1;
  transform: rotate(-2deg);
  clip-path: inset(-0.4em 100% -0.4em -0.2em);
  animation: agent-chat-empty-write calc(var(--openbot-duration-slow) * 2.8) linear
    calc(var(--openbot-duration-slow) * 2.5) forwards;
}

@keyframes agent-chat-empty-write {
  to {
    clip-path: inset(-0.4em -0.2em -0.4em -0.2em);
  }
}

/* In right-to-left text, the word writes itself from right to left. */
:dir(rtl) .agent-chat-empty-hand {
  clip-path: inset(-0.4em -0.2em -0.4em 100%);
}

/* The faint turn, in a column of chat width. Its rows are the chat's own. */
.agent-chat-empty-turn {
  width: min(100%, 40rem);
  min-height: 0;
  overflow: hidden;
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
  mask-image: radial-gradient(ellipse 70% 90% at 50% 20%, var(--openbot-text-primary) 45%, var(--openbot-transparent));
}

.agent-chat-empty-row {
  padding-top: var(--openbot-chat-entry-gap);
}

.agent-chat-empty-showing {
  transition:
    opacity calc(var(--openbot-duration-slow) * 3.5) var(--openbot-ease-out),
    filter calc(var(--openbot-duration-slow) * 3.5) var(--openbot-ease-out),
    transform calc(var(--openbot-duration-slow) * 3.5) var(--openbot-ease-out);
}

.agent-chat-empty-showing[data-leaving] {
  opacity: 0;
  filter: blur(3px);
  transform: translateY(-6px);
}

@container (max-width: 520px) {
  .agent-chat-empty-pitch {
    --agent-chat-empty-title-size: var(--openbot-text-3xl);
  }

  .agent-chat-empty-description {
    font-size: var(--openbot-text-lg);
  }
}

.agent-chat-empty[data-still] .agent-chat-empty-hand {
  animation: none;
  clip-path: none;
}

.message-entry-user .ui-bubble {
  max-width: var(--message-narrow-bubble-width);
}

/* A table needs the width of an agent table. The bubble still fits a short table. */
.message-entry-user .ui-bubble:has(.message-markdown-table-scroll) {
  max-width: var(--message-wide-bubble-width);
}

.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;
}

/* Each line of a block takes its direction and its start side from its own text, so a Hebrew
   line after a line break aligns right in an English paragraph. A table cell keeps the table's
   direction, so its borders stay on the same side in each cell. */
.message-markdown :is(p, li, h1, h2, h3, h4, h5, h6, th, td) {
  unicode-bidi: plaintext;
}

.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-inline-start: 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-inline-start: var(--openbot-space-0-5) solid var(--openbot-border-strong);
  padding-inline-start: 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);
}

/* Each column keeps the data table minimum, so a narrow message scrolls sideways and does not
   break words. */
.message-markdown-table {
  width: 100%;
  min-width: calc(var(--message-markdown-table-columns) * 112px);
  border-collapse: collapse;
  background: var(--openbot-bg-canvas);
  color: var(--openbot-data-table-text);
}

.message-markdown-table :is(th, td) {
  border-inline-end: 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: start;
  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-inline-end: 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-paper-text);
}

.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-block: 0;
  padding-inline: 11px 10px;
  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);
}

/* Hidden parts slide toward the start side. */
:dir(rtl) :is(.selection-actions-form-shell-hidden, .selection-actions-presets-hidden) {
  transform: translateX(8px);
}

.selection-actions-more-presets {
  max-width: 0;
  gap: 2px;
  margin-inline-start: 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-inline-start var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1);
}

.selection-actions-presets-expanded .selection-actions-more-presets {
  max-width: 262px;
  margin-inline-start: 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-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-inline-start: 1px;
}

.selection-actions-expand svg {
  transition: transform var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1);
}

/* The chevron points to the end side, where the extra presets open. `scale` mirrors it and keeps the
   open state's `transform` rotation. */
:dir(rtl) .selection-actions-expand svg {
  scale: -1 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-inline-start: 2px solid var(--openbot-accent);
  border-start-start-radius: 0;
  border-start-end-radius: var(--openbot-radius-sm);
  border-end-end-radius: var(--openbot-radius-sm);
  border-end-start-radius: 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-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-show-full {
  justify-self: start;
}

.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: var(--message-wide-bubble-width);
  max-width: var(--message-wide-bubble-width);
}

.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-block: 4px;
  padding-inline: 10px 6px;
}

.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%;
  display: block;
  font: inherit;
}

.message-code-line {
  min-height: 19px;
  display: flex;
}

.message-code-line-number {
  width: 40px;
  flex: none;
  padding-inline-end: 8px;
  color: var(--openbot-text-dim);
  font-size: var(--openbot-text-sm);
  text-align: end;
  user-select: none;
}

.message-code-line-source {
  min-width: 0;
  padding-inline-end: 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.message-code-caret {
  width: 2px;
  height: 13px;
  display: inline-block;
  margin-inline-start: 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: start;
  vertical-align: top;
  /* A cell's text takes its own direction, and the cell keeps the table's for its borders. */
  unicode-bidi: plaintext;
}

.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-inline-end: 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-inline-end: 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: start;
  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-inline-start: -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-inline-start: 2px solid var(--openbot-text-dim);
  padding-inline-start: 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;
}

/*
 * The quoted message, rendered as Markdown and cut to four lines. The full body is parsed before
 * the cut, so an open code fence or a long heading cannot spill into the message under it.
 */
.message-reply-quote {
  max-height: 60px;
  overflow: hidden;
  font-size: var(--openbot-text-sm);
  line-height: 15px;
  overflow-wrap: anywhere;
}

/*
 * Only a quote that the cut shortens fades out. A mask reads only alpha, and the text colour can be
 * translucent, so the mask uses an opaque token.
 */
.message-reply-quote[data-clipped] {
  mask-image: linear-gradient(to bottom, var(--openbot-text-primary) 45px, transparent 60px);
}

.message-reply-quote blockquote > :not(:first-child) {
  margin-top: var(--openbot-space-1);
}

.message-reply-quote > .message-markdown > :not(:first-child) {
  margin-top: var(--openbot-space-1);
}

.message-reply-quote .message-markdown-heading {
  font-size: inherit;
  line-height: inherit;
}

.message-reply-quote :not(pre) > code {
  padding-block: 0;
  font-size: inherit;
}

.message-reply-quote .message-markdown-excerpt-code {
  font-family: var(--openbot-font-mono);
  white-space: pre-wrap;
}

[data-slot="bubble"][data-author="user"] .message-reply-context {
  border-inline-start-color: var(--openbot-border-strong);
  color: var(--openbot-text-readable);
}

/* A quote that opens its original. The button lies over the whole quote, its start mark included. */
.message-reply-context[data-opens] {
  position: relative;
  transition: border-inline-start-color var(--openbot-duration-hover) var(--openbot-ease-out);
}

/* The spinner takes the end column; the author and the text flow into the start 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-inline-start-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-block: 0;
  inset-inline: -2px 0;
  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-inline-start-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;
}

/* No optical offset: the inline face's margin below already lifts the plush body to the chip's centre. */
.message-agent-tag .agent-avatar {
  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-block: 1px;
  padding-inline: 3px 6px;
  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,
  .side-panel-file-badge
)[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,
  .side-panel-file-badge
)[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,
  .side-panel-file-badge
)[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,
  .side-panel-file-badge
)[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,
  .side-panel-file-badge
)[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,
  .side-panel-file-badge
)[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,
  .side-panel-file-badge
)[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-lg);
}

/* 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-inline-end: 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 to the start and up. */
.reference-chip.message-reference-chip .agent-avatar > svg {
  margin-block: -14% 0;
  margin-inline: -14% 0;
}

.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-block: var(--openbot-space-2);
  padding-inline: var(--openbot-space-4) var(--openbot-space-2);
  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. Both stay dark in the light
     theme: a frame and a page with different schemes get an opaque canvas. The colors come from
     the theme variables, which follow the palette. */
  color-scheme: dark;
}

/*
 * A page in the chat starts at the edge of the agent's reply below it and is as wide as a wide agent
 * bubble, which grows with the chat.
 */
.chat-visual-reply {
  max-width: var(--message-wide-bubble-width);
}

/* In a chat with agent faces, the page starts after the face column, as the agent's bubbles do. */
.chat-visual-with-author {
  padding-inline-start: calc(var(--message-author-column) + var(--openbot-space-2));
}

/* 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);
}

/*
 * The box that holds a page in the chat. It is a manual popover, so full screen can put it in the top
 * layer without a move in the document. Until then it has none of the browser's popover styles.
 */
.chat-visual-box {
  position: relative;
  min-width: 0;
}

.chat-visual-box[popover]:not(:popover-open) {
  position: relative;
  inset: auto;
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
}

.chat-visual-box-fill {
  height: 100%;
}

/* In the chat the surface adds no box, so the frame keeps its place and size. */
.chat-visual-box:not(:popover-open) > .chat-visual-surface {
  display: contents;
}

/* Full screen: the page fills a dialog card on the dim layer that app dialogs use. */
.chat-visual-box:popover-open {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  display: grid;
  place-items: center;
  margin: 0;
  border: 0;
  padding: var(--openbot-space-6);
  background: var(--openbot-dialog-overlay);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--openbot-text-primary);
  -webkit-app-region: no-drag;
}

.chat-visual-box:popover-open::backdrop {
  background: transparent;
}

.chat-visual-box:popover-open > .chat-visual-surface {
  width: min(1100px, 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--openbot-radius-xl);
  background: var(--openbot-bg-control);
  box-shadow: 0 0 0 1px var(--openbot-dialog-ring);
}

.chat-visual-box:popover-open .chat-visual-frame {
  min-height: 0;
  flex: 1;
  background: var(--openbot-bg-sidebar);
}

/* The page buttons show when the pointer or the focus is on the page. */
.chat-visual-actions {
  position: absolute;
  top: var(--openbot-space-2);
  inset-inline-end: var(--openbot-space-2);
  display: flex;
  gap: var(--openbot-space-1);
  opacity: 0;
  transition: opacity var(--openbot-duration-hover) var(--openbot-ease-out);
}

.chat-visual-actions svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}

.chat-visual-box:popover-open > .chat-visual-actions {
  display: none;
}

.chat-visual-box:hover > .chat-visual-actions,
.chat-visual-box:focus-within > .chat-visual-actions {
  opacity: 1;
}

@media (hover: none) {
  .chat-visual-actions {
    opacity: 1;
  }
}

.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-block: 6px;
  padding-inline: 12px 8px;
  box-shadow: 0 7px 22px var(--openbot-shadow-popover-ambient);
}

.composer-reply-preview > div {
  min-width: 0;
  flex: 1;
}

.composer-reply-preview > div > span {
  display: block;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: 550;
  line-height: 14px;
}

.composer-reply-preview .message-reply-quote {
  margin: 1px 0 0;
  color: var(--openbot-text-secondary);
}

.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 {
  /* Grok Bot's composer height curve (300ms): fast at the start, then a long, soft stop. */
  --composer-resize-duration: 300ms;
  --composer-resize-ease: linear(
    0,
    0.01588 2%,
    0.05618 4%,
    0.11201 6%,
    0.1768 8%,
    0.2458 10%,
    0.31562 12%,
    0.38392 14%,
    0.44914 16%,
    0.51029 18%,
    0.56683 20%,
    0.61852 22%,
    0.66534 24%,
    0.70743 26%,
    0.74501 28%,
    0.77838 30%,
    0.80788 32%,
    0.83383 34%,
    0.85658 36%,
    0.87645 38%,
    0.89376 40%,
    0.92183 44%,
    0.94282 48%,
    0.95838 52%,
    0.96984 56%,
    0.97823 60%,
    0.98435 64%,
    0.98878 68%,
    0.99198 72%,
    0.99594 80%,
    0.99829 90%,
    1
  );
  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),
    height var(--composer-resize-duration) var(--composer-resize-ease);
}

.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);
  /* Muted at rest, as the other icon buttons. The send button sets its own color. */
  color: var(--openbot-text-muted);
  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 {
  inset-inline-end: 46px;
  width: 28px;
  transition: width var(--voice-morph-exit-duration) var(--openbot-ease-out);
}

.voice-morph-send-blob,
.voice-morph-finish-blob {
  inset-inline-end: 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);
}

:dir(rtl) .voice-morph[data-recording] .voice-morph-finish-blob {
  transform: translateX(34px) scale(0.8);
}

/* 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-block: 0;
  padding-inline: 12px 3px;
  color: var(--openbot-text-secondary);
  animation: voice-morph-content-in var(--openbot-duration-slow) var(--openbot-ease-out) var(--openbot-duration-fast)
    both;
}

/* The last seconds before the time limit: the bar widens for the time left. */
.voice-morph[data-countdown] {
  --voice-bar-width: 188px;
}

.voice-recording-status[data-tone="warning"] {
  color: var(--openbot-warning-text);
}

.voice-recording-remaining {
  flex: 0 0 auto;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}

.voice-recording-status[data-tone="warning"] .voice-recording-remaining {
  color: var(--openbot-warning-text);
}

.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);
  /* A time axis: the newest sample is at the right in every language. */
  direction: ltr;
}

.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: var(--composer-editor-limit, max(48px, 33dvh));
}

/* The chat composer shows at most 6 lines (120px and the 10px padding), as Grok Bot's does. A longer
   draft scrolls inside the editor, so the chat keeps its space. */
.composer-wrap {
  --composer-editor-limit: max(48px, min(130px, 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;
}

/*
 * A chip is 24px and the editor line is 20px, so the first chip made the one-line composer 4px
 * taller. With a chip, the line is as tall as the chip and the padding is 2px less on each side, so
 * the composer keeps its height and the text stays in place.
 */
.composer[data-compact] .composer-editor-surface:has(.composer-mention-token) {
  padding-block: 2px;
  line-height: 24px;
}

.composer[data-compact] .composer-editor-placeholder {
  top: 4px;
  inset-inline-start: 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;
  /* Each line takes its direction and its start side from its own text. The surface keeps the
     interface direction, so an empty draft puts the caret on the placeholder's side. */
  unicode-bidi: plaintext;
}

.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-inline-start: 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;
  inset-inline-start: 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;
  inset-inline-start: 0;
}

/* The box comes from `.reference-chip`; this token only loses the chip fill and gains the outline. */
/*
 * `composer-resize.ts` sets a pixel height only while the composer moves between its one-line and
 * full layouts. The text keeps its place at the top and the toolbar rides the bottom edge, as in
 * Grok Bot. The one-line row rides the bottom edge when the composer closes.
 */
.composer[data-resizing] {
  min-height: 0;
  overflow: clip;
}

.composer[data-resizing][data-compact] {
  align-content: end;
}

.composer[data-resizing]:not([data-compact]) .composer-input-label {
  min-height: 0;
  align-items: flex-start;
  overflow: clip;
}

@media (prefers-reduced-motion: reduce) {
  .composer {
    --composer-resize-duration: 120ms;
    --composer-resize-ease: ease;
  }
}

.composer-mention-token.composer-tag-unavailable {
  border: 1px dashed var(--openbot-border-strong);
  background: transparent;
  /* No leading icon, so the start inset matches the end one. */
  padding-inline-start: var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
}

.composer-file-reference {
  height: 24px;
  cursor: pointer;
  user-select: none;
}

.composer-file-reference-image {
  width: var(--openbot-space-4);
  height: var(--openbot-space-4);
  flex: none;
  border-radius: var(--openbot-radius-sm);
  object-fit: cover;
}

.composer-file-reference-size {
  flex: none;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
  font-variant-numeric: tabular-nums;
}

/*
 * 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 {
  --mention-picker-title-height: 24px;
  --mention-picker-section-gap: var(--openbot-space-1);

  position: relative;
  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 and section title has a fixed height, so the list states the height it needs and
   * the panel has its full height in the first frame, also while the query narrows it.
   */
  height: calc(
    var(--mention-picker-rows, 0) *
    var(--mention-picker-row-height) +
    var(--mention-picker-sections, 0) *
    var(--mention-picker-title-height) +
    max(var(--mention-picker-sections, 0) - 1, 0) *
    var(--mention-picker-section-gap) +
    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;
  /* A key press scrolls the active row clear of the scroll fade. */
  scroll-padding-block: var(--openbot-space-4);
  /*
   * The panel stands on the composer, so a height that travels moves its top edge and every row
   * slides with it. The list takes its new height in one frame; only the rows that come back fade in.
   */
  transition: none;
}

/* The title of a section of the `@` list, with its count. A list with one section has no title. */
.mention-picker-section {
  display: flex;
  height: var(--mention-picker-title-height);
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 8px 4px;
  color: var(--openbot-queue-action);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}

.mention-picker-section-count {
  font-variant-numeric: tabular-nums;
}

.mention-picker-option + .mention-picker-section {
  margin-top: var(--mention-picker-section-gap);
}

/* One highlight slides under the active row (see `trackPickerHighlight`), so a row has no background of its own. */
.mention-picker-highlight {
  position: absolute;
  top: 0;
  right: var(--mention-picker-gutter);
  left: var(--mention-picker-gutter);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-hover);
  pointer-events: none;
  transition:
    transform var(--openbot-duration-fast) var(--openbot-ease-out),
    height var(--openbot-duration-fast) var(--openbot-ease-out);
}

.mention-picker-highlight[data-instant] {
  transition: none;
}

.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. */
  position: relative;
  z-index: 1;
  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: start;
}

.mention-picker-file-option .attachment-reference-visual {
  width: 20px;
  height: 20px;
}

/* A row that the query brings back fades in; the rows that stay do not move. */
.mention-picker-option[data-entering] {
  animation: mention-picker-row-in var(--openbot-duration-fast) var(--openbot-ease-out) both;
}

@keyframes mention-picker-row-in {
  from {
    opacity: 0;
  }
}

.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;
  /* Unset outside a filter, so the name keeps the row color. */
  color: var(--mention-picker-name-color);
  max-width: 50%;
  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;
}

/* While the user filters, the matched text stands out from the rest, as in the search dialog. */
.mention-picker-option[data-filtering] {
  --mention-picker-name-color: var(--openbot-queue-action);
}

.mention-picker-match {
  background: transparent;
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}

.mention-picker-badge {
  margin-inline-start: auto;
  flex: 0 0 auto;
  color: var(--openbot-queue-action);
}

.mention-picker-badge > svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}

.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-block: 7px;
  padding-inline: 8px 12px;
}

.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;
}

/* An image that opens in the image viewer. */
.composer-attachment-preview.ui-button {
  border: 0;
  padding: 0;
  cursor: zoom-in;
}

/* A pasted image that is still importing: its local preview, dimmed, under a spinner. */
.composer-attachment[data-pending] .composer-attachment-preview img {
  opacity: 0.5;
}

.composer-attachment[data-pending] > .ui-spinner {
  position: absolute;
  inset: 0;
  margin: auto;
}

/* A file on its way to the server. The dashed edge says that it is not there yet; the ring takes
   the place of the extension badge. */
.composer-attachment[data-upload="uploading"] {
  border-style: dashed;
}

.composer-attachment[data-upload="failed"] {
  border-color: var(--openbot-danger);
}

.composer-attachment[data-upload="failed"] .composer-attachment-copy small {
  color: var(--openbot-danger-text);
}

.composer-upload-ring {
  width: 28px;
}

.composer-upload-failed-icon {
  width: 18px;
  height: 18px;
  color: var(--openbot-danger-text);
}

.composer-upload-retry {
  flex: none;
  margin-inline-end: -4px;
  color: var(--openbot-danger-text);
}

.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: start;
}

.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);
  }
}

/* While a file from a joined server downloads, its download button shows the progress and stops it. */
.attachment-download-ring {
  --ui-radial-progress-color: var(--openbot-text-primary);

  width: var(--openbot-control-xs);
}

/* The card sizes every button icon; the ring chart fills its own box instead. */
.attachment-download-stop .ui-radial-progress-chart {
  width: 100%;
  height: 100%;
}

.attachment-download-stop .ui-radial-progress-content {
  padding: 0;
}

.attachment-download-stop .ui-radial-progress-content svg {
  width: var(--openbot-glyph-sm);
  height: var(--openbot-glyph-sm);
  fill: currentcolor;
  stroke: none;
}

.message-attachment[data-download] small {
  overflow: hidden;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-attachment[data-download="failed"] small {
  color: var(--openbot-danger);
}

.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-block: var(--queue-row-gutter) 0;
  padding-inline: var(--queue-row-inset-start) var(--queue-row-inset-end);
  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);
}

/* Over the image until it loads: a remote image arrives only after its last byte. It shows after a
 * delay, so an image that loads at once does not flash a spinner. */
.image-gallery-tile-loading {
  position: relative;
  z-index: 1;
  display: grid;
  grid-area: 1 / 1;
  animation: image-gallery-loading-in 0s 400ms both;
}

@keyframes image-gallery-loading-in {
  from {
    visibility: hidden;
  }
}

.image-gallery-tile img {
  grid-area: 1 / 1;
  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);
}

/* The macOS traffic lights take x 12..71 (`src/main/main-window.ts`), as in `browser-full-view.css`.
   They are at the inline start in every language, so the inset is too. */
.image-lightbox-mac-controls .image-lightbox-toolbar {
  padding-inline-start: 82px;
}

.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);
}

/* The copy and check glyphs draw as the download and close glyphs beside them. */
.image-lightbox-copy svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
}

.image-lightbox-zoom {
  display: flex;
  align-items: center;
}

:where(.ui-button).image-lightbox-zoom-level {
  min-width: 56px;
  font-variant-numeric: tabular-nums;
}

.image-lightbox-stage {
  position: relative;
  min-height: 0;
  /* A sideways swipe steps the images, and a pinch or a drag moves the zoom, all from script. */
  touch-action: none;
}

/* A zoomed image stays inside the stage, clear of the toolbar and the strip. */
.image-lightbox-stage[data-zoomed] {
  overflow: hidden;
}

/* 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;
  /* A drag moves a zoomed image; the browser must not start a drag of the file. */
  -webkit-user-drag: none;
}

/* A layer of its own would scale the fitted bitmap, so the zoomed image draws again, sharp. */
.image-lightbox-image[data-zoomed] {
  will-change: auto;
  cursor: grab;
}

.image-lightbox-stage[data-dragging] .image-lightbox-image {
  cursor: grabbing;
}

.image-lightbox-image[data-settling] {
  transition:
    scale var(--openbot-duration-slow) var(--openbot-ease-out),
    translate var(--openbot-duration-slow) var(--openbot-ease-out);
}

/* 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;
  /* The slides, the step buttons, the arrow keys and the swipe go left to right in every language
     (`ImageLightbox.tsx`), so the thumbnails keep that order too. */
  direction: ltr;
}

.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;
  }
}

.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-block: var(--queue-row-gutter);
  padding-inline: var(--queue-row-inset-start) var(--queue-row-inset-end);
  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-block: 0;
  inset-inline: calc(var(--queue-row-gutter) - var(--queue-row-inset-start))
    calc(var(--queue-row-gutter) - var(--queue-row-inset-end));
  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-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 state glyph of a task on the Tasks page. */
.agent-tasks-mark {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  --task-list-glyph: 14px;
}
/* The threads of an agent: tabs, a menu and a rename field in the chat header. */

/*
 * The tabs take the free width of the header and scroll when they do not fit. The margin keeps "+"
 * apart from the model picker in a narrow header; it is the gap between the header actions.
 */
.conversation-heading-group:has(.agent-threads-header) {
  min-width: 0;
  flex: 1 1 0;
  margin-inline-end: 6px;
}

/* The same gap as between two tabs, so "+" and the thread list read as part of the tab row. */
.agent-threads-header {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 3px;
  margin-inline-start: 4px;
}

/* The agent's name is the first tab, for the agent's own chat, with the shape of the thread tabs. */
.conversation-title.ui-button[data-tab] {
  height: var(--openbot-control-sm);
  gap: var(--openbot-space-1-5);
  padding-block: 0;
  padding-inline: var(--openbot-space-1-5) var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
  color: var(--openbot-text-secondary);
}

.conversation-title.ui-button[data-tab] h1 {
  color: inherit;
  font-size: var(--openbot-text-sm);
}

.conversation-title.ui-button[data-tab]:hover {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}

.conversation-title.ui-button[data-tab][data-selected] {
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
}

/* The gap after the name tab is the gap between two tabs, with the same divider in it: this margin and
   the padding of the tab list. The gap of the heading group does not apply. */
.conversation-heading-group:has(> .conversation-title[data-tab] + .agent-threads-header) {
  gap: 0;
}

.conversation-heading-group:has(.conversation-title[data-tab]) .agent-threads-header {
  margin-inline-start: 1px;
}

/*
 * Only the two icon buttons are left, and they cannot be narrower. The agent name gives way instead:
 * when it does not fit, only its avatar shows, and the name stays for a screen reader. Then "+" goes,
 * because the thread list also starts a thread. The row measures the name at its full width in this
 * mode, so the hidden name cannot change the mode.
 */
.agent-threads-header[data-mode="minimal"] {
  flex-shrink: 0;
}

.conversation-heading-group:has(.agent-threads-header[data-mode="minimal"]) .conversation-title {
  min-width: 0;
  flex-shrink: 1;
}

.conversation-heading-group:has(.agent-threads-header[data-fold]) .conversation-title {
  position: relative;
  flex-shrink: 0;
  padding-inline-end: var(--openbot-space-1-5);
}

.conversation-heading-group:has(.agent-threads-header[data-fold]) .conversation-title h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* With no room for the avatar and both buttons, "+" goes and the model picker drops its chevron. Then
   the list button goes, and last the avatar, so no part of the row covers the picker. A hidden part
   keeps its size, so the row can still measure it. */
.conversation-heading-group:has(.agent-threads-header[data-fold]:not([data-fold="name"])) {
  overflow: clip;
}

.conversation-header:has(.agent-threads-header[data-fold]:not([data-fold="name"]))
  .provider-model-trigger
  > .provider-model-chevron {
  display: none;
}

.agent-threads-header:is([data-fold="list"], [data-fold="all"]),
.conversation-heading-group:has(.agent-threads-header[data-fold="all"]) .conversation-title {
  visibility: hidden;
}

.agent-threads-tabs-area {
  position: relative;
  display: flex;
  min-width: 0;
}

.agent-threads-tabs-trigger,
.agent-threads-tabs-root {
  display: flex;
  min-width: 0;
}

/* The field has no frame of its own: the tab is its frame. It takes the place of the tab title. */
.agent-threads-rename.ui-input {
  position: absolute;
  top: 50%;
  z-index: 2;
  height: var(--openbot-control-sm);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: var(--openbot-text-sm);
  transform: translateY(-50%);
}

/* The shared sliding tabs, without the bar: in the header only the selected tab has a fill. */
.agent-threads-tabs.ui-sliding-tabs {
  min-width: 0;
  max-width: 100%;
  /* "+" and the thread list follow the last tab directly. */
  padding-inline-end: 0;
  overflow-x: auto;
  gap: var(--openbot-space-1);
  background: transparent;
  box-shadow: none;
  scrollbar-width: none;
  /* The soft edges, the fill, the drag and the scroll into view measure `scrollLeft` and `offsetLeft`
     from the left edge (`ThreadTabs.tsx`), so the tabs keep the left-to-right order in every language. */
  direction: ltr;
}

/* A soft edge where more tabs are out of view. */
.agent-threads-tabs[data-more-before] {
  mask-image: linear-gradient(to right, transparent, var(--openbot-text-primary) 24px);
}

.agent-threads-tabs[data-more-after] {
  mask-image: linear-gradient(to left, transparent, var(--openbot-text-primary) 24px);
}

.agent-threads-tabs[data-more-before][data-more-after] {
  mask-image: linear-gradient(
    to right,
    transparent,
    var(--openbot-text-primary) 24px,
    var(--openbot-text-primary) calc(100% - 24px),
    transparent
  );
}

/* The fill of the selected tab, as in the side panel tabs. */
.agent-threads-tabs .agent-threads-fill {
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control-active);
}

/* The trigger that keeps the agent's own chat selected in the tabs. It never shows. */
.agent-threads-tabs .agent-threads-main-key {
  display: none;
}

/* A tab has the shape of a side panel tab: the icon slot, then the title. All tabs have the same width,
   so a short title does not make a small tab. When the tabs do not fit, they get narrower together, and
   below the smallest width they scroll. A side panel thread tab has the same widths. */
.agent-threads-tab.ui-sliding-tabs-trigger {
  display: inline-flex;
  /* A width, not only a flex basis: the tab row takes its width from the widths of its tabs. */
  width: 140px;
  min-width: 96px;
  max-width: 140px;
  flex: 0 1 auto;
  align-items: center;
  gap: var(--openbot-space-1-5);
  padding-block: 0;
  padding-inline: var(--openbot-space-1-5) var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
  animation: agent-threads-tab-in var(--openbot-duration-normal) var(--openbot-ease-out);
  /* The other tabs slide when a tab moves past them. */
  transition:
    color var(--sliding-tabs-duration) var(--sliding-tabs-ease),
    transform var(--sliding-tabs-duration) var(--sliding-tabs-ease);
}

.agent-threads-tab-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A cut title that ends in a number, as " #2" of a branch, loses its middle, not the number. */
.agent-threads-title-numbered {
  display: flex;
  white-space: nowrap;
}

.agent-threads-title-root {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agent-threads-title-number {
  flex: none;
  white-space: pre;
}

/* A tab whose title the user edits has the fill of a selected tab and a thin border, so it reads as
   a field. Its own title hides under the field, and the icon slot stays. */
.agent-threads-tab.ui-sliding-tabs-trigger[data-renaming] {
  outline: 1px solid var(--openbot-border-focus);
  outline-offset: -1px;
  background-color: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
}

.agent-threads-tab[data-renaming] .agent-threads-tab-title {
  visibility: hidden;
}

/* The selected tab is on the fill, which the tabs measure. The tab of an open right-click menu
   looks hovered, so the user sees which tab the menu acts on. A tab in rename keeps its own fill. */
.agent-threads-tab.ui-sliding-tabs-trigger:not([aria-selected="true"], [data-renaming]):is(:hover, [data-menu-open]) {
  background-color: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}

/* The icon slot. On hover, a round fill and an X replace the icon, as in a side panel tab. */
.agent-threads-tab-close {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  border-radius: var(--openbot-radius-pill);
}

.agent-threads-tab-icon,
.agent-threads-tab-x {
  grid-area: 1 / 1;
}

.agent-threads-tab-icon {
  display: grid;
  opacity: 0.7;
}

.agent-threads-tab-icon > svg,
.agent-threads-tab-x {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

.agent-threads-tab-x {
  opacity: 0;
}

/* A tab in rename keeps its icon: the pointer is there to edit the title, not to close the tab. */
.agent-threads-tab:hover:where(:not([data-renaming])) .agent-threads-tab-close {
  background: var(--openbot-bg-control-hover);
}

.agent-threads-tab:hover:where(:not([data-renaming])) .agent-threads-tab-icon {
  opacity: 0;
}

.agent-threads-tab:hover:where(:not([data-renaming])) .agent-threads-tab-x {
  opacity: 1;
}

.agent-threads-tab-close:hover {
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
}

.agent-threads-tab[data-renaming] .agent-threads-tab-close {
  pointer-events: none;
}

/* The state badge of the thread takes the icon slot at its own size. */
.agent-threads-tab-close:has(.agent-threads-state) {
  width: auto;
  min-width: var(--openbot-icon-md);
  height: auto;
  min-height: var(--openbot-icon-md);
}

.agent-threads-tab:not(:hover) .agent-threads-tab-icon:has(.agent-threads-state) {
  opacity: 1;
}

/* As tall as a tab and with its corners, so a hover fill on "+" matches the tab fill. */
.agent-threads-icon-button.ui-button {
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-sm);
  color: var(--openbot-text-muted);
}

/* A narrow header: the open thread as one button, with the shape, fill and type of a selected tab.
   The chevron says that it opens the thread list. */
.agent-threads-switcher.ui-button {
  min-width: 0;
  max-width: 200px;
  height: var(--openbot-control-sm);
  flex: 0 1 auto;
  gap: var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-md);
  background-color: var(--openbot-bg-control-active);
  padding-block: 0;
  padding-inline: var(--openbot-space-1-5) var(--openbot-space-1);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
}

.agent-threads-switcher.ui-button:hover,
.agent-threads-switcher.ui-button[aria-expanded="true"] {
  background-color: var(--openbot-bg-control-hover);
}

.agent-threads-switcher-icon {
  display: grid;
  flex: none;
  place-items: center;
  min-width: var(--openbot-icon-md);
  min-height: var(--openbot-icon-md);
}

.agent-threads-switcher-icon > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  opacity: 0.7;
}

.agent-threads-switcher-chevron {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: none;
  color: var(--openbot-text-muted);
}

.agent-threads-menu {
  width: 320px;
}

/* The list scrolls without a scrollbar. An edge with more threads behind it fades out. The
 * selectors outrank the global .scroll-fade-* masks. */
.agent-threads-menu-list {
  --agent-threads-fade-top: 0px;
  --agent-threads-fade-bottom: 0px;
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: none;
}

.agent-threads-menu .agent-threads-menu-list:is(.scroll-fade-top, .scroll-fade-bottom) {
  mask-image: linear-gradient(
    to bottom,
    transparent,
    var(--openbot-text-primary) var(--agent-threads-fade-top),
    var(--openbot-text-primary) calc(100% - var(--agent-threads-fade-bottom)),
    transparent
  );
}

.agent-threads-menu-list.scroll-fade-top {
  --agent-threads-fade-top: 24px;
}

.agent-threads-menu-list.scroll-fade-bottom {
  --agent-threads-fade-bottom: 24px;
}

.agent-threads-menu-item {
  gap: 8px;
}

/* The open thread has the hover color, in place of a check. */
.agent-threads-menu .agent-threads-menu-list .agent-threads-menu-item[aria-current] {
  background: var(--ui-menu-item-hover);
}

/* The tree lines of a branch under its source thread. The stem fills the full height of the row, so
 * the line of one level continues from row to row. The line of the last branch ends in a curve. */
.agent-threads-menu-stem {
  display: flex;
  flex: none;
  align-self: stretch;
  margin-block: calc(var(--openbot-space-1-5) * -1);
}

.agent-threads-stem-rail,
.agent-threads-stem-elbow {
  position: relative;
  width: 16px;
}

.agent-threads-stem-line::before,
.agent-threads-stem-elbow::before,
.agent-threads-stem-elbow::after {
  position: absolute;
  inset-inline-start: 7px;
  border: 0 solid color-mix(in srgb, var(--openbot-text-muted) 60%, transparent);
  content: "";
}

.agent-threads-stem-line::before,
.agent-threads-stem-elbow::before {
  inset-block: 0;
  border-inline-start-width: 1px;
}

.agent-threads-stem-elbow::after {
  top: 50%;
  inset-inline-end: 0;
  border-top-width: 1px;
}

.agent-threads-stem-last::before {
  inset-inline-end: 0;
  bottom: 50%;
  border-bottom-width: 1px;
  border-end-start-radius: 6px;
}

.agent-threads-stem-last::after {
  content: none;
}

.agent-threads-menu-title {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The time shows in full, also on a 12-hour clock. Its minimum width keeps the badges in one column,
 * on whole pixels, so their icons stay centred. */
.agent-threads-menu-time {
  min-width: 44px;
  flex: 0 0 auto;
  white-space: nowrap;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  text-align: end;
}

/* A state badge, as on a sidebar row. */
.agent-threads-state {
  display: inline-flex;
  height: 16px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: var(--openbot-radius-pill);
}

/* Agent messages that the user has not read: a dot in the color of the "new messages" mark of the
   timeline. A state badge outranks it. */
.agent-threads-unread {
  width: 8px;
  height: 8px;
  background: var(--openbot-unread-surface);
}

/* The pill of the sidebar badge, with the dots while the agent works. */
.agent-threads-state-working {
  width: 24px;
  background: var(--openbot-bg-control);
  color: var(--openbot-text-secondary);
}

@keyframes agent-threads-tab-in {
  from {
    opacity: 0;
    transform: translateY(2px);
  }
}

/* A tab that needs the user wears a soft tint of its badge, at 40% of the badge strength, so the
   badge stays the strongest mark. The tint is an image layer, so it also shows over the selection
   fill and on a moving tab. */
.agent-threads-tab[data-attention],
.agent-threads-switcher[data-attention],
.side-panel-thread-tab[data-attention] {
  background-image: linear-gradient(var(--agent-threads-tint), var(--agent-threads-tint));
}

:is(.agent-threads-tab, .agent-threads-switcher, .side-panel-thread-tab)[data-attention="waiting"] {
  --agent-threads-tint: color-mix(in srgb, var(--openbot-warning-soft) 40%, var(--openbot-transparent));
}

:is(.agent-threads-tab, .agent-threads-switcher, .side-panel-thread-tab)[data-attention="failed"] {
  --agent-threads-tint: color-mix(in srgb, var(--openbot-danger-soft) 40%, var(--openbot-transparent));
}

/* The tabs measure their own fill. Kobalte's fill stays hidden. */
.agent-threads-tabs .ui-sliding-tabs-pill:not(.agent-threads-fill) {
  display: none;
}

/* A line in the middle of the gap between two tabs, as in the side panel. It hides next to the
   selected or hovered tab, as the fill marks it. */
.agent-threads-tab + .agent-threads-tab::before,
:where(.conversation-heading-group:has(.conversation-title[data-tab]))
  .agent-threads-main-key
  + .agent-threads-tab::before {
  position: absolute;
  top: 50%;
  inset-inline-start: calc(var(--openbot-space-1) / -2 - 0.5px);
  width: 1px;
  height: var(--openbot-icon-lg);
  background: var(--openbot-border-strong);
  content: "";
  transform: translateY(-50%);
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}

:where(.conversation-heading-group:has(.conversation-title:is([data-selected], :hover)))
  .agent-threads-main-key
  + .agent-threads-tab::before {
  opacity: 0;
}

.agent-threads-tab[aria-selected="true"]::before,
.agent-threads-tab[aria-selected="true"] + .agent-threads-tab::before,
.agent-threads-tab[data-attention]::before,
.agent-threads-tab[data-attention] + .agent-threads-tab::before,
.agent-threads-tab:hover::before,
.agent-threads-tab:hover + .agent-threads-tab::before {
  opacity: 0;
}

/* A tab that the pointer moves follows the pointer directly. The dividers and the close control
   hide until it is in its new place. */
.agent-threads-tabs[data-dragging] {
  cursor: grabbing;
  user-select: none;
}

.agent-threads-tabs[data-dragging] .agent-threads-tab {
  cursor: grabbing;
}

/* The moving tab wears the fill itself, so it covers the tabs that it passes. */
.agent-threads-tab.ui-sliding-tabs-trigger[data-dragged=""] {
  z-index: 2;
  background-color: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
  transition: color var(--sliding-tabs-duration) var(--sliding-tabs-ease);
}

/* Over the side panel, the tab goes back to its place, faded, and a copy follows the pointer. */
.agent-threads-tab.ui-sliding-tabs-trigger[data-dragged="away"] {
  opacity: 0.4;
}

.agent-threads-tabs[data-dragging] .agent-threads-fill {
  transition: none;
}

.agent-threads-tabs[data-dragging] .agent-threads-tab::before,
.agent-threads-tabs[data-dragging] .agent-threads-tab-x {
  opacity: 0;
}

.agent-threads-tabs[data-dragging] .agent-threads-tab-close {
  background: transparent;
}

.agent-threads-tabs[data-dragging] .agent-threads-tab-icon {
  opacity: 0.7;
}

.agent-threads-tabs[data-dragging] .agent-threads-tab-icon:has(.agent-threads-state) {
  opacity: 1;
}

/* Where a side panel tab goes when the pointer lets it go over the chat. */
.agent-threads-header[data-drop-target] {
  border-radius: var(--openbot-radius-md);
  outline: 1px dashed var(--openbot-text-secondary);
  outline-offset: 2px;
  background: var(--openbot-bg-control-hover);
}

/* Marks after the title in the thread menu, as in a sidebar row. A mark opens and closes in width, and the negative
   margin takes back the gap before it, so a tab changes width smoothly. */
.agent-threads-tab-mark-slot {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: 0fr;
  margin-inline-start: -4px;
  opacity: 0;
  transition:
    grid-template-columns var(--sliding-tabs-duration) var(--sliding-tabs-ease),
    margin-inline-start var(--sliding-tabs-duration) var(--sliding-tabs-ease),
    opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}

.agent-threads-tab-mark-slot[data-open] {
  grid-template-columns: 1fr;
  margin-inline-start: 0;
  opacity: 1;
}

.agent-threads-tab-mark {
  min-width: 0;
  overflow-x: clip;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  color: var(--openbot-text-secondary);
}

/* In the menu, the badges share one centred column. */
.agent-threads-menu-item .agent-threads-tab-mark {
  width: 24px;
  justify-content: center;
}

/* An icon in a circle with a soft tint of its hue, as the wait chip of a sidebar row. The 12px icon
   has 4px on each side, so it stays on whole pixels. */
.agent-threads-state-icon {
  width: 20px;
  height: 20px;
  background: var(--openbot-bg-control);
  color: var(--openbot-text-muted);
}

.agent-threads-state-icon svg {
  width: 12px;
  height: 12px;
}

.agent-threads-tab-mark[data-kind="waiting"] .agent-threads-state-icon {
  background: var(--openbot-warning-soft);
  color: var(--openbot-warning-text);
}

.agent-threads-tab-mark[data-kind="failed"] .agent-threads-state-icon {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger-text);
}

.agent-thread-origin {
  margin: 0;
  padding-top: var(--openbot-chat-entry-gap);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

/* The line after the messages that a branch copied: "Branched from" and the source, between two rules. */
.agent-thread-branch-divider {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--openbot-space-2);
  margin: var(--openbot-space-2) 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.agent-thread-branch-divider hr {
  height: 1px;
  flex: 1;
  border: 0;
  background: var(--openbot-border);
}

.agent-thread-branch-text,
.agent-thread-branch-divider .agent-thread-branch-link {
  display: inline-flex;
  flex: 0 1 auto;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-1);
  color: inherit;
  font-size: inherit;
}

.agent-thread-branch-text svg,
.agent-thread-branch-link svg {
  width: 14px;
  height: 14px;
  flex: none;
}

.agent-thread-branch-text span,
.agent-thread-branch-link span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-thread-queued {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  padding-top: var(--openbot-chat-entry-gap);
}

.agent-thread-queued-text {
  margin: 0;
  overflow: hidden;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The hint holds the thread title, which can be long. It stays on the one line of the compact box. */
.agent-thread-composer .composer-editor-placeholder {
  inset-inline-end: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .agent-threads-tab.ui-sliding-tabs-trigger {
    animation: none;
    transition: none;
  }

  .agent-threads-tab-mark-slot {
    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-lg);
}

.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-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-2) var(--openbot-space-1);
  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;
}

/* The speed is text: the size of the player time, and the same width of each digit. */
.voice-panel-speed {
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}

@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;
}

/* A pill of fixed width, so that it does not move when its speed changes. */
.voice-player-speed {
  flex: none;
  width: calc(var(--openbot-space-6) * 2);
  padding-inline: 0;
  border-radius: var(--openbot-radius-pill);
  font-variant-numeric: tabular-nums;
}
/*
 * The panels set these attributes on the conversation panel (`SettingsPanel`, `BrowserPreviewSidebar`,
 * `FilePreviewPanel`). A `:has()` on the conversation panel would make the browser restyle the whole
 * chat each time it adds a message.
 */
.conversation-panel[data-settings-panel] .conversation-header,
.conversation-panel[data-settings-panel] .conversation-scroll,
.conversation-panel[data-settings-panel] .composer-wrap {
  width: calc(100% - var(--settings-panel-width, 360px));
}

.conversation-panel[data-settings-panel] .chat-search {
  inset-inline-end: calc(var(--settings-panel-width, 360px) + 16px);
  max-width: calc(100% - var(--settings-panel-width, 360px) - 32px);
}

.conversation-panel[data-browser-side-panel] .chat-search,
.conversation-panel[data-file-preview-panel] .chat-search {
  inset-inline-end: calc(var(--browser-panel-width, 380px) + 16px);
  max-width: calc(100% - var(--browser-panel-width, 380px) - 32px);
}

.conversation-panel[data-browser-side-panel] .conversation-header,
.conversation-panel[data-browser-side-panel] .conversation-scroll,
.conversation-panel[data-browser-side-panel] .composer-wrap,
.conversation-panel[data-file-preview-panel] .conversation-header,
.conversation-panel[data-file-preview-panel] .conversation-scroll,
.conversation-panel[data-file-preview-panel] .composer-wrap {
  width: 100%;
}

@keyframes message-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* A new chat bubble rises 8px and grows from 97% as Grok Bot's do. The timing curve passes 100% a
   little and comes back, so the bubble settles with a small bounce. */
@keyframes message-bubble-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* The user's own message rises 12px, as Grok Bot's does when it is sent. A tall message that also
   grew from 97% would move its top edge far, so it only rises. */
@keyframes message-sent-in {
  from {
    transform: translateY(12px);
  }
  to {
    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,
  .message-entry-animated,
  .chat-action-entry-animated,
  .chat-action-target-entering,
  .agent-activity-entry,
  .agent-activity-content,
  .agent-activity-avatar,
  .agent-activity-entry .agent-activity-avatar,
  .agent-row-thinking-dots i,
  .agent-row-agent-status-responded,
  .agent-row-agent-status-unread,
  .mention-picker,
  .mention-picker-list,
  .mention-picker-highlight,
  .mention-picker-option[data-entering],
  .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;
  inset-inline-end: 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%;
  inset-inline-start: 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;
  /* A tab drag measures `offsetLeft` from the left edge (`SidePanel.tsx`, `BrowserTabStrip.tsx`), so
     the tabs keep the left-to-right order in every language. */
  direction: ltr;
}

.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-block: 0;
  padding-inline: var(--openbot-space-1-5) var(--openbot-space-2);
  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%;
  inset-inline-start: 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;
}

/* A file-type badge of three or four letters is wider than a tab icon, so the slot grows to hold it. */
.side-panel-file-tab .side-panel-tab-close {
  width: auto;
  min-width: var(--openbot-icon-md);
}

.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]) {
    width: auto;
    min-width: 0;
    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);
}

/* A file tab shows the file-type badge of a file link at its size in the chat. A file name is longer
 * than a pane name, so it shrinks and ends in an ellipsis. A file tab slides when it drags, as a thread
 * tab does. */
.side-panel-file-tab {
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}

.side-panel-file-badge {
  display: inline-flex;
}

.side-panel-file-badge > .attachment-reference-visual > svg {
  width: 12px;
  height: 12px;
}

.side-panel-file-tab .side-panel-tab-select {
  flex: 0 1 auto;
}

/* In the dock, the file tab names the file. The title keeps its place, so the file actions stay at
 * the end of the toolbar. The file comes in with its tab, as the other panes do, without a slide. */
.side-panel-docked .file-preview-header > .file-preview-file-icon {
  display: none;
}

.side-panel-docked .file-preview-header > h2 {
  visibility: hidden;
}

.side-panel-docked > .file-preview-panel.t-panel-slide {
  transition: none;
}

/* A thread tab: the state badge of the thread takes the icon slot at its own size, and the X shows
 * over it on hover. A thread that needs the user wears the tint of its badge, as in the chat header. */
.side-panel-tab-close:has(.agent-threads-state) {
  width: auto;
  min-width: var(--openbot-icon-md);
  height: auto;
  min-height: var(--openbot-icon-md);
}

.side-panel-tab:not(:hover, :focus-within) .side-panel-tab-icon:has(.agent-threads-state) {
  opacity: 1;
}

.side-panel-tab-icon .agent-threads-state-icon svg {
  width: 12px;
  height: 12px;
}

/* A thread tab has the widths of a tab in the chat header, so a thread keeps its size when it moves
 * between the two rows. Its title takes the free width of the tab and starts after the icon. */
.side-panel-thread-tab {
  flex: 0 1 auto;
  width: 140px;
  min-width: 96px;
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}

.side-panel-thread-tab .side-panel-tab-select {
  flex: 1;
  text-align: start;
}

/* A thread or file tab that the pointer moves follows the pointer and wears the selection fill, so it covers
 * the tabs that it passes. The dividers and the X hide until the drop. Over the chat, the tab goes
 * back to its place, faded, and a copy follows the pointer. */
.side-panel-tabs[data-dragging],
.side-panel-tabs[data-dragging] .side-panel-tab-select {
  cursor: grabbing;
  user-select: none;
}

.side-panel-tabs[data-dragging] > :is(.side-panel-thread-tab, .side-panel-file-tab)[data-dragged=""] {
  z-index: 2;
  background-color: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
  transition: none;
}

.side-panel-tabs[data-dragging] > .side-panel-thread-tab[data-dragged="away"] {
  opacity: 0.4;
}

.side-panel-tabs[data-dragging] > .side-panel-tab::before,
.side-panel-tabs[data-dragging] .side-panel-tab-x {
  opacity: 0;
}

.side-panel-tabs[data-dragging] .side-panel-tab-close {
  background: transparent;
}

.side-panel-tabs[data-dragging] .side-panel-tab-icon {
  opacity: 0.7;
}

.side-panel-tabs[data-dragging] .side-panel-tab-icon:has(.agent-threads-state) {
  opacity: 1;
}

/* The copy of a thread tab that the pointer takes from one tab row to the other. */
.thread-tab-ghost {
  position: fixed;
  z-index: 1000;
  max-width: 140px;
  white-space: nowrap;
  border: 1px solid var(--openbot-border);
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
  pointer-events: none;
  translate: -50% -50%;
}

.thread-tab-ghost .side-panel-tab-label {
  overflow: hidden;
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
}

/* Where a thread tab of the chat header goes when the pointer lets it go over the side panel. */
.side-panel-drop {
  position: absolute;
  z-index: 17;
  top: calc(var(--left-header-height, 38px) + var(--openbot-space-2));
  inset-inline-end: var(--openbot-space-2);
  bottom: var(--openbot-space-2);
  display: grid;
  width: calc(var(--side-panel-width, 380px) - 2 * var(--openbot-space-2));
  place-items: start center;
  padding-top: var(--openbot-space-6);
  border: 1px dashed var(--openbot-text-secondary);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .side-panel-thread-tab,
  .side-panel-file-tab {
    transition: none;
  }
}

/*
 * 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-block: var(--notice-inset) calc(var(--notice-inset) + var(--notice-composer-overlap));
  padding-inline: 12px var(--notice-inset);
  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-inline-end: 12px;
}

.composer-notice-icon {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--notice-accent);
  stroke-width: var(--openbot-icon-stroke-lg);
}

/* 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 and Compact rows sit under a full-width divider, in the shape of menu items. */
.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-action {
  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-action:is(:hover, :focus-visible):not(:disabled) {
  background: var(--ui-menu-item-hover);
}

.context-meter-action > 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);
  /* A meter: the script places the compaction tick with a physical `left`, so the bar stays LTR. */
  direction: ltr;
}

.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);
  stroke-width: var(--openbot-icon-stroke);
}

.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;
}

/*
 * Everything above the input is one card: the waiting block, the open waits, the queue, the reply
 * and the notices. The stack draws the one border and the one radius, and tucks its lower edge
 * under the input the way the queue did on its own. The cards inside keep their content, but lose
 * their own margins, corners and tucks, so they sit flush with a hairline between them.
 *
 * Each card pulls up by 1px over its own top line. The first card's line goes under the clip, so
 * the stack's own border is the only edge at the top, and every later line divides two cards.
 *
 * The stack only has a frame when something shows in it: the queue slot stays in the DOM while
 * closed, and a frame round an empty slot would be a line over the input.
 */
.composer-stack {
  --composer-stack-inset: var(--openbot-space-3);
}

/* A narrow pane gives the rows the width the side margins took. */
@media (max-width: 620px) {
  .composer-stack {
    --composer-stack-inset: 2px;
  }
}

.composer-stack:has(> :not(.agent-queue-slot), > .agent-queue-slot > .agent-queue-slot-inner > *) {
  --composer-stack-overlap: 14px;

  position: relative;
  z-index: 10;
  overflow: hidden;
  margin: 0 var(--composer-stack-inset) calc(-1 * var(--composer-stack-overlap));
  border: 1px solid var(--openbot-queue-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-queue-surface);
  padding-bottom: var(--composer-stack-overlap);
}

.composer-stack :is(.awaiting-replies, .agent-queue-panel, .composer-notice, .composer-reply-preview) {
  z-index: auto;
  margin: -1px 0 0;
  border: 0;
  border-top: 1px solid var(--openbot-queue-border);
  border-radius: 0;
  box-shadow: none;
}

/* The stack tucks under the input now, so no card inside keeps room for a tuck of its own. */
.composer-stack :is(.awaiting-replies, .agent-queue-panel) {
  padding-bottom: 0;
}

.composer-stack .composer-notice {
  padding-bottom: var(--notice-inset);
}

/*
 * A compaction notice that leaves when it is the only card takes the frame with it: the frame drops
 * behind the input the way the notice did on its own. The notice keeps its own exit animation,
 * because its `onAnimationEnd` removes it. With reduced motion the notice fades in 1ms, so the frame
 * does not move.
 */
@media (prefers-reduced-motion: no-preference) {
  .composer-stack:has(> .context-compaction-notice[data-leaving]):not(
    :has(> :not(.agent-queue-slot, [data-leaving]), > .agent-queue-slot > .agent-queue-slot-inner > *)
  ) {
    animation: context-compaction-notice-out var(--openbot-duration-toast-exit) var(--openbot-ease-in-out) forwards;
  }
}
.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;
  }
}

/* The frame is a UiBlockCard (ui-blocks.css); the page preview is its body. */
.browser-takeover-card {
  width: min(540px, 100%);
  margin: var(--openbot-space-3) 0 var(--openbot-space-6);
  animation: browser-takeover-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}

.browser-takeover-preview {
  min-width: 0;
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  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);
  /* Raised over the card, as the details of an approval. */
  background: var(--openbot-bg-surface-raised);
  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-lg);
}

.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;
}

@keyframes browser-takeover-in {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.99);
  }

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

.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-button {
  border-radius: var(--openbot-radius-pill);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-regular);
}

/* The details of a request, as the draft of a confirm block (ui-blocks.css): raised over the bubble. */
.approval-command-block,
.approval-detail-row,
.approval-permissions {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface-raised);
}

.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;
}

@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;
  }
}

/* The agent's offer to send feedback to the OpenBot team, and the thank-you after Send. */
.feedback-offer {
  align-items: center;
  gap: var(--openbot-space-3);
  text-align: center;
}

.feedback-offer-emoji {
  font-size: var(--openbot-text-display);
  line-height: 1;
  animation: feedback-offer-wiggle 900ms var(--openbot-ease-out) 200ms both;
}

.feedback-offer-headline {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-xl);
  font-weight: var(--openbot-weight-semibold);
}

.feedback-offer-quote {
  display: grid;
  width: 100%;
  box-sizing: border-box;
  gap: var(--openbot-space-1);
  margin: 0;
  border-inline-start: 3px solid var(--openbot-border);
  color: var(--openbot-text-secondary);
  padding-inline-start: var(--openbot-space-3);
  text-align: start;
}

.feedback-offer-quote strong {
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
  overflow-wrap: anywhere;
}

.feedback-offer-quote p {
  margin: 0;
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.feedback-offer-actions {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--openbot-space-2);
}

.feedback-offer-actions > :last-child {
  flex: 1;
}

.feedback-sent {
  gap: var(--openbot-space-3);
}

.feedback-sent > * {
  animation: feedback-sent-in 320ms var(--openbot-ease-out) 80ms both;
}

.feedback-sent-badge {
  animation: feedback-sent-pop 420ms var(--openbot-ease-out) 260ms both;
}

.feedback-sent-body {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}

.feedback-sent-footer {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  border-top: 1px solid var(--openbot-border);
  padding-top: var(--openbot-space-3);
}

.feedback-sent-footer > a {
  margin-inline-start: auto;
}

.feedback-sent-title {
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes feedback-offer-wiggle {
  0% {
    opacity: 0;
    transform: scale(0.6) rotate(0);
  }

  40% {
    opacity: 1;
    transform: scale(1.1) rotate(-10deg);
  }

  70% {
    transform: rotate(8deg);
  }

  100% {
    transform: rotate(0);
  }
}

@keyframes feedback-sent-in {
  from {
    opacity: 0;
    transform: translateY(6px);
    filter: blur(2px);
  }

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

@keyframes feedback-sent-pop {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }

  60% {
    opacity: 1;
    transform: scale(1.08);
  }

  100% {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .feedback-offer-emoji,
  .feedback-sent > *,
  .feedback-sent-badge {
    animation: none;
  }
}

/* Question prompt: one bubble, one question at a time. The open page moves and fades in; the others
   wait to the start (done) or to the end (later). The stage height follows the open page. */

.question-prompt-bubble.ui-bubble {
  width: min(540px, 100%);
  max-width: 100%;
}

.question-prompt-bubble[data-entrance] {
  animation: question-prompt-in var(--page-slide-dur) var(--page-slide-ease) both;
}

@keyframes question-prompt-in {
  from {
    opacity: 0;
    transform: translateY(var(--page-slide-distance));
    filter: blur(var(--page-blur));
  }
}

.question-prompt-bubble > .ui-bubble-content {
  width: 100%;
  padding: var(--openbot-space-4) var(--openbot-space-2) var(--openbot-space-2);
}

.question-prompt-form.ui-questionnaire {
  position: relative;
  gap: 0;
}

.question-prompt-cancel.ui-button {
  position: absolute;
  z-index: 2;
  inset-block-start: calc(-1 * var(--openbot-space-2));
  inset-inline-end: 0;
  color: var(--openbot-text-muted);
}

.question-prompt-stage {
  display: grid;
  overflow: hidden;
  outline: 0;
  transition: height var(--page-slide-dur) var(--page-slide-ease);
}

.question-prompt-page {
  grid-area: 1 / 1;
  align-self: start;
  min-width: 0;
  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),
    visibility 0s linear var(--page-slide-dur);
}

.question-prompt-page[data-pos="prev"],
.question-prompt-page[data-pos="next"] {
  opacity: 0;
  filter: blur(var(--page-blur));
  visibility: hidden;
}

.question-prompt-page[data-pos="prev"] {
  transform: translateX(calc(-1 * var(--page-slide-distance)));
}

.question-prompt-page[data-pos="next"] {
  transform: translateX(var(--page-slide-distance));
}

:dir(rtl) .question-prompt-page[data-pos="prev"] {
  transform: translateX(var(--page-slide-distance));
}

:dir(rtl) .question-prompt-page[data-pos="next"] {
  transform: translateX(calc(-1 * var(--page-slide-distance)));
}

.question-prompt-page[data-pos="current"] {
  transition-delay: 0s, 0s, 0s, 0s;
}

/* The footer folds away when the answers are sent. */
.question-prompt-fold {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--acc-collapse) var(--acc-ease);
}

.question-prompt-fold[data-open="true"] {
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--acc-expand) var(--acc-ease);
}

.question-prompt-fold-inner {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  filter: blur(var(--text-swap-blur));
  transition:
    opacity var(--acc-collapse) var(--acc-ease),
    filter var(--acc-collapse) var(--acc-ease);
}

.question-prompt-fold[data-open="true"] .question-prompt-fold-inner {
  opacity: 1;
  filter: blur(0);
  transition:
    opacity var(--acc-expand) var(--acc-ease),
    filter var(--acc-expand) var(--acc-ease);
}

/* Question ------------------------------------------------------------------------------------ */

.question-prompt-header {
  display: grid;
  gap: var(--openbot-space-0-5);
  padding: 0 var(--openbot-space-2) var(--openbot-space-2);
}

.question-prompt-page:not(.question-prompt-summary) .question-prompt-header {
  padding-inline-end: var(--openbot-space-8);
}

.question-prompt-title {
  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);
  letter-spacing: var(--openbot-tracking-tight);
  overflow-wrap: anywhere;
}

.question-prompt-detail {
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}

.question-prompt-options {
  gap: var(--openbot-space-0-5);
}

.question-prompt-options > .question-prompt-option {
  position: relative;
  min-width: 0;
  min-height: 40px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: var(--openbot-space-3);
  border-radius: var(--openbot-radius-md);
  padding: var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  cursor: pointer;
  transition: background-color var(--openbot-duration-fast) ease-out;
}

.question-prompt-option:hover:not([data-disabled]),
.question-prompt-custom:focus-within {
  background: var(--openbot-question-option-soft);
}

.question-prompt-option[data-checked] {
  background: var(--openbot-question-option-hover);
}

.question-prompt-option:active:not([data-disabled]) {
  background: var(--openbot-question-option-pressed);
}

/* The stage clips, so the keyboard ring sits inside the row. */
.question-prompt-option.ui-questionnaire-choice:focus-within {
  outline: 0;
}

.question-prompt-option:has(.ui-questionnaire-choice-input:focus-visible) {
  background: var(--openbot-question-option-soft);
  box-shadow: inset 0 0 0 1px var(--openbot-question-option);
}

.question-prompt-option-text {
  min-width: 0;
  display: grid;
}

.question-prompt-option-label {
  overflow-wrap: anywhere;
}

.question-prompt-option-description {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  overflow-wrap: anywhere;
}

/* Letter badge: a question tint; solid when picked, with a small pop; success tint once answered. */
.question-prompt-letter.ui-kbd {
  width: 22px;
  min-width: 22px;
  height: 22px;
  border-color: transparent;
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-question-badge-soft);
  color: var(--openbot-question-badge-text);
  font-family: var(--openbot-font-sans);
  font-weight: var(--openbot-weight-semibold);
  transition:
    background-color var(--openbot-duration-fast) ease-out,
    color var(--openbot-duration-fast) ease-out;
}

.question-prompt-answer-skipped .question-prompt-letter.ui-kbd {
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-muted);
}

.question-prompt-option[data-checked] .question-prompt-letter.ui-kbd {
  background: var(--openbot-question-option);
  color: var(--openbot-text-on-status);
  animation: question-prompt-badge-pop var(--openbot-duration-slow) var(--openbot-ease-out);
}

.question-prompt-letter[data-answered].ui-kbd {
  background: var(--openbot-success);
  color: var(--openbot-text-on-status);
}

.question-prompt-bubble[data-entrance][data-state="done"] .question-prompt-letter[data-answered].ui-kbd {
  animation: question-prompt-badge-pop var(--openbot-duration-slow) var(--openbot-ease-out) var(--openbot-duration-fast)
    both;
}

@keyframes question-prompt-badge-pop {
  from {
    transform: scale(0.8);
  }
}

.question-prompt-custom {
  cursor: text;
}

.question-prompt-custom-input.ui-input {
  width: 100%;
  min-width: 0;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  color: var(--openbot-text-primary);
  font: inherit;
}

.question-prompt-custom-input.ui-input::placeholder {
  color: var(--openbot-text-muted);
}

.question-prompt-custom-input.ui-input:focus,
.question-prompt-custom-input.ui-input:focus-visible {
  outline: 0;
  box-shadow: none;
}

/* Footer: progress, then Back, Skip and Next. ------------------------------------------------ */

.question-prompt-footer {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  padding-block: var(--openbot-space-3) var(--openbot-space-1);
  padding-inline: var(--openbot-space-2) var(--openbot-space-1);
}

.question-prompt-progress.ui-questionnaire-progress {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
}

.question-prompt-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-dim);
  transition:
    width var(--page-slide-dur) var(--page-slide-ease),
    background-color var(--page-slide-dur) var(--page-slide-ease),
    opacity var(--page-slide-dur) var(--page-slide-ease);
}

.question-prompt-dot[data-state="done"] {
  background: var(--openbot-question-badge-text);
  opacity: 0.55;
}

/* The current question is a wide pill. It moves along as the questions open. */
.question-prompt-dot[data-state="current"] {
  width: 18px;
  background: var(--openbot-question-option);
}

.question-prompt-actions {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-inline-start: auto;
}

.question-prompt-pill.ui-button {
  border-radius: var(--openbot-radius-pill);
  padding-inline: var(--openbot-space-4);
  font-size: var(--openbot-text-md);
}

/* Summary ------------------------------------------------------------------------------------- */

.question-prompt-summary {
  display: grid;
}

.question-prompt-section .question-prompt-title {
  padding: 0 var(--openbot-space-2) var(--openbot-space-1);
  color: var(--openbot-text-muted);
}

.question-prompt-section + .question-prompt-section {
  margin-top: var(--openbot-space-2);
  border-top: 1px solid var(--openbot-border);
  padding-top: var(--openbot-space-3);
}

.question-prompt-answers {
  display: grid;
  gap: var(--openbot-space-1);
  margin: 0;
  list-style: none;
}

.question-prompt-answers,
.question-prompt-answer-skipped {
  padding: var(--openbot-space-0-5) var(--openbot-space-2) var(--openbot-space-2);
}

.question-prompt-answer {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: var(--openbot-space-3);
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  overflow-wrap: anywhere;
}

.question-prompt-answer-skipped {
  color: var(--openbot-text-muted);
}

.question-prompt-closed {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin: 0;
  padding: 0 var(--openbot-space-2) var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}

.question-prompt-closed svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.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-footer {
    flex-wrap: wrap;
  }

  .question-prompt-pill.ui-button {
    padding-inline: var(--openbot-space-3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .question-prompt-bubble[data-entrance],
  .question-prompt-letter.ui-kbd,
  .question-prompt-option[data-checked] .question-prompt-letter.ui-kbd,
  .question-prompt-bubble[data-entrance][data-state="done"] .question-prompt-letter[data-answered].ui-kbd {
    animation: none;
  }

  :is(
    .question-prompt-stage,
    .question-prompt-page,
    .question-prompt-fold,
    .question-prompt-fold-inner,
    .question-prompt-letter,
    .question-prompt-dot,
    .question-prompt-option
  ) {
    transition: none;
  }
}

/* Interactive blocks an agent draws: confirm, choice, quick replies and form. Tokens only. */

/* The frame of confirm, choice and form blocks: a muted bubble with the look of an agent question
   (question-prompt.css). */
.ui-block-card.ui-bubble {
  width: min(540px, 100%);
  max-width: 100%;
}

/* The card has a fixed width, so its content can be a size container for the narrow layout below. */
.ui-block-card > .ui-block-content {
  container: ui-block / inline-size;
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-4) var(--openbot-space-4) var(--openbot-space-3);
}

.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;
  gap: var(--openbot-space-3);
}

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

.ui-block-title {
  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);
  letter-spacing: var(--openbot-tracking-tight);
  overflow-wrap: anywhere;
}

.ui-block-subtitle {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}

/* The status badge of a block: "Waiting for you", or the outcome of a frozen block that shows it in
   the header (interaction-cards.css draws it). It sits on the title row, so the subtitle keeps the
   full width of the card. */
.ui-block-header:has(> .ui-block-status) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--openbot-space-3);
  row-gap: var(--openbot-space-0-5);
}

.ui-block-header:has(> .ui-block-status) > .ui-block-heading {
  display: contents;
}

.ui-block-header:has(> .ui-block-status):has(> .ui-block-icon) {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.ui-block-header:has(> .ui-block-status) > .ui-block-icon {
  grid-row: 1 / span 2;
  grid-column: 1;
}

/* With no subtitle, the icon, the title and the badge share one centered row. */
.ui-block-header:has(> .ui-block-status):has(> .ui-block-icon):not(:has(.ui-block-subtitle))
> :is(.ui-block-icon, .ui-block-status) {
  grid-row: 1;
  align-self: center;
}

/* Counted from the end, so the same lines fit a header with and without an icon. */
.ui-block-header:has(> .ui-block-status) .ui-block-title {
  grid-row: 1;
  grid-column: -3 / -2;
  align-self: center;
}

.ui-block-header:has(> .ui-block-status) .ui-block-subtitle {
  grid-column: -3 / -1;
}

.ui-block-status {
  grid-row: 1;
  grid-column: -2 / -1;
  align-self: start;
}

.ui-block-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--openbot-space-3);
}

.ui-block-body:empty {
  display: none;
}

/* The footer of an open block: Skip and the block's buttons at the end, the main one last. */
.ui-block-card-footer {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--openbot-space-2);
}

/* A small choice at the start of the footer keeps its own width; the buttons go to the next line first. */
.ui-block-footer-select {
  width: auto;
  max-width: 100%;
  flex: none;
}

.ui-block-footer-select > .ui-select-trigger {
  width: auto;
  max-width: 100%;
}

/* A short block: the buttons share the title row, and go under it when the card is narrow. A body,
   an error or an outcome line goes under that row. */
.ui-block-card[data-inline-actions] > .ui-block-content {
  flex-flow: row wrap;
  align-items: center;
  column-gap: var(--openbot-space-4);
  padding-block: var(--openbot-space-3);
}

.ui-block-card[data-inline-actions] > .ui-block-content > .ui-block-header {
  flex: 1 1 240px;
}

.ui-block-card[data-inline-actions] > .ui-block-content > .ui-block-card-footer {
  flex: none;
  margin-inline-start: auto;
}

.ui-block-card[data-inline-actions] > .ui-block-content > :is(.ui-block-body, .ui-block-error, .ui-block-outcome) {
  flex-basis: 100%;
  order: 1;
}

/* The badge of a short block takes the place of the buttons: the icon and the badge are centered on
   the title and the subtitle, and the subtitle stops before the badge. */
.ui-block-card[data-inline-actions]
  .ui-block-header:has(> .ui-block-status):has(.ui-block-subtitle)
  > :is(.ui-block-icon, .ui-block-status) {
  grid-row: 1 / span 2;
  align-self: center;
}

.ui-block-card[data-inline-actions]
  .ui-block-header:has(> .ui-block-status):has(.ui-block-subtitle)
  .ui-block-subtitle {
  grid-row: 2;
  grid-column: -3 / -2;
}

/* A short block keeps the height of a title and a subtitle, so it does not get shorter when a closed
   block loses its subtitle. */
.ui-block-card[data-inline-actions] > .ui-block-content > .ui-block-header {
  min-height: calc(var(--openbot-leading-lg) + var(--openbot-space-0-5) + var(--openbot-leading-md));
}

/* The badge that replaces the buttons when the person answers or closes the block. */
.ui-block-card[data-settled] .ui-block-header > .ui-block-status {
  animation: ui-block-status-in var(--openbot-duration-overlay) var(--openbot-ease-out) both;
}

@keyframes ui-block-status-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}

/* The outcome of a short block takes the place of its buttons, so it has their size and shape, as the
   Connected button of a Marketplace suggestion. */
.ui-block-card[data-inline-actions] .ui-block-header > .ui-block-status {
  height: var(--openbot-control-md);
  padding-inline: var(--openbot-space-4);
  border-radius: var(--openbot-radius-pill);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}

/* An answer is a status: the same success fill as Connected. On-light text keeps AA on the dark-theme fill. */
.ui-block-card[data-inline-actions][data-status="answered"] .ui-block-header > .ui-block-status {
  border-color: transparent;
  background: var(--openbot-success);
  color: var(--openbot-text-on-light);
}

/* On-light text on the light-theme success fill is 3:1. The darker success-text fill keeps AA. */
:root[data-openbot-color-scheme="light"]
  .ui-block-card[data-inline-actions][data-status="answered"]
  .ui-block-header
  > .ui-block-status {
  background: var(--openbot-success-text);
}

/* Only an open block warns: a closed one has nothing left to press. */
.ui-block-card[data-danger][data-status="pending"] > .ui-block-content {
  border-color: var(--openbot-danger-border);
}

/* The line a frozen block ends with. */
/* One quiet line: the answer, or why there is none. The icon carries the color. */
.ui-block-outcome {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}

.ui-block-outcome[data-status="answered"] {
  color: var(--openbot-text-secondary);
}

.ui-block-outcome svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
}

.ui-block-outcome-check {
  color: var(--openbot-success-text);
}

.ui-block-outcome-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ui-block-error {
  min-width: 0;
  margin: 0;
  color: var(--openbot-danger-text);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  overflow-wrap: anywhere;
}

.ui-block-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--openbot-space-2);
}

/* The buttons stay on one row while they fit. When they do not fit, they fill each row, so the main
   button does not stand alone at the end of the next row. A row that fits gives them no space to fill. */
.ui-block-card-footer > .ui-block-actions {
  justify-content: flex-end;
  margin-inline-start: auto;
}

.ui-block-card-footer > .ui-block-actions > .ui-button {
  flex-grow: 1;
}

/* Every button of a block is a pill, also one that a block wraps in its own element. */
.ui-block-card .ui-block-actions .ui-button {
  border-radius: var(--openbot-radius-pill);
  padding-inline: var(--openbot-space-4);
  font-size: var(--openbot-text-md);
}

.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-confirm-step > .ui-block-actions {
  justify-content: flex-end;
}

.ui-block-hint,
.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;
}

/* A long draft stops at a fixed height. "Show all" under it opens the rest. */
.ui-block-preview {
  max-height: 16em;
  overflow-y: auto;
  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[data-expanded="true"] {
  max-height: none;
}

/* A cut-off draft does not scroll, so the chat is the only part that scrolls. `clip` also stops
   focus, find and selection from scrolling the box to a place that the user cannot scroll back from. */
.ui-block-preview[data-clamped="true"] {
  position: relative;
  overflow: clip;
}

/* The fade over the last line shows that the draft goes on. The border stays. */
.ui-block-preview[data-clamped="true"]::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2.5em;
  background: linear-gradient(to bottom, transparent, var(--openbot-bg-surface-raised));
  pointer-events: none;
}

/* The control that opens the rest of a long draft sits under it, at the start of the line. */
.ui-block-preview-toggle {
  align-self: flex-start;
  margin-top: calc(var(--openbot-space-2) * -1);
}

.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;
}

/* The hold fill grows from the start side. */
:dir(rtl) .ui-block-hold-fill {
  transform-origin: right;
}

.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: the option rows of an agent question. The rows reach into the padding, so their text
   lines up with the title. */
.ui-block-options {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-0-5);
  margin: 0 calc(-1 * var(--openbot-space-2));
  padding: 0;
  border: 0;
}

.ui-block-option {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 40px;
  /* A long meta wraps in its own column; it never takes the label's width. */
  grid-template-columns: 22px minmax(0, 1fr) fit-content(40%);
  align-items: center;
  gap: var(--openbot-space-3);
  border-radius: var(--openbot-radius-md);
  padding: var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  cursor: pointer;
  transition: background-color var(--openbot-duration-fast) ease-out;
}

.ui-block-option:hover:not([data-disabled]) {
  background: var(--openbot-question-option-soft);
}

.ui-block-option[data-checked] {
  background: var(--openbot-question-option-hover);
}

.ui-block-option:active:not([data-disabled]) {
  background: var(--openbot-question-option-pressed);
}

.ui-block-option[data-disabled] {
  cursor: default;
}

.ui-block-option[data-disabled]:not([data-checked]) {
  opacity: 0.5;
}

.ui-block-option:has(.ui-block-option-input:focus-visible) {
  background: var(--openbot-question-option-soft);
  box-shadow: inset 0 0 0 1px var(--openbot-question-option);
}

.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.ui-kbd {
  width: 22px;
  min-width: 22px;
  height: 22px;
  border-color: transparent;
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-question-badge-soft);
  color: var(--openbot-question-badge-text);
  font-family: var(--openbot-font-sans);
  font-weight: var(--openbot-weight-semibold);
  transition:
    background-color var(--openbot-duration-fast) ease-out,
    color var(--openbot-duration-fast) ease-out;
}

.ui-block-option[data-checked] .ui-block-option-key.ui-kbd {
  background: var(--openbot-question-option);
  color: var(--openbot-text-on-status);
}

.ui-block-option-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ui-block-option-meta {
  min-width: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* The last row of an old quick reply block takes an answer in words. */
.ui-block-option-custom {
  cursor: text;
}

.ui-block-option-custom:focus-within {
  background: var(--openbot-question-option-soft);
}

.ui-block-option-custom-input.ui-input {
  width: 100%;
  min-width: 0;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  color: var(--openbot-text-primary);
  font: inherit;
}

.ui-block-option-custom-input.ui-input::placeholder {
  color: var(--openbot-text-muted);
}

.ui-block-option-custom-input.ui-input:focus,
.ui-block-option-custom-input.ui-input:focus-visible {
  outline: 0;
  box-shadow: none;
}

/* 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);
}

/* An answered form that asked for a secret: a key before the title, and the answer as rows in one
   inset group, not as disabled inputs. */
.ui-block-header:has(> .ui-block-icon) {
  align-items: center;
}

.ui-block-answer-rows {
  display: flex;
  min-width: 0;
  flex-direction: column;
  margin: 0;
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-canvas);
}

.ui-block-answer-row {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--openbot-space-4);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}

.ui-block-answer-row + .ui-block-answer-row {
  border-top: 1px solid var(--openbot-border-grouped);
}

.ui-block-answer-row > dt {
  flex: none;
  color: var(--openbot-text-muted);
}

.ui-block-answer-row > dd {
  min-width: 0;
  margin: 0;
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
  text-align: end;
}

.ui-block-answer-value {
  overflow-wrap: anywhere;
}

.ui-block-answer-hidden {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  color: var(--openbot-text-dim);
  vertical-align: top;
}

.ui-block-answer-hidden > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: none;
  color: var(--openbot-text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .ui-block-option,
  .ui-block-option-key.ui-kbd,
  .ui-block-hold-fill {
    transition: none;
  }

  .ui-block-card[data-settled] .ui-block-header > .ui-block-status {
    animation: none;
  }
}

/* A narrow card: the badge goes on its own row under the subtitle, so the title keeps the width of the
   card, and the buttons fill the rows of the footer, so the main one is not alone at the end. */
@container ui-block (width < 360px) {
  .ui-block-card.ui-bubble > .ui-block-content > .ui-block-header:has(> .ui-block-status) {
    grid-template-columns: minmax(0, 1fr);
  }

  .ui-block-card.ui-bubble > .ui-block-content > .ui-block-header:has(> .ui-block-status):has(> .ui-block-icon) {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .ui-block-card.ui-bubble > .ui-block-content > .ui-block-header:has(> .ui-block-status) .ui-block-title {
    grid-row: 1;
    grid-column: -2 / -1;
  }

  .ui-block-card.ui-bubble > .ui-block-content > .ui-block-header:has(> .ui-block-status) .ui-block-subtitle {
    grid-row: 2;
    grid-column: -2 / -1;
  }

  .ui-block-card.ui-bubble > .ui-block-content > .ui-block-header:has(> .ui-block-status) > .ui-block-icon {
    grid-row: 1 / span 2;
    grid-column: 1;
    align-self: start;
  }

  .ui-block-card.ui-bubble > .ui-block-content > .ui-block-header:has(> .ui-block-status) > .ui-block-status {
    grid-row: 3;
    grid-column: -2 / -1;
    justify-self: start;
    align-self: start;
    margin-top: var(--openbot-space-1);
  }

  /* The outcome of a short block stays at the end, where its buttons were. */
  .ui-block-card.ui-bubble[data-inline-actions]
    > .ui-block-content
    > .ui-block-header:has(> .ui-block-status)
    > .ui-block-status {
    justify-self: end;
  }

  .ui-block-card.ui-bubble > .ui-block-content > .ui-block-card-footer > .ui-block-actions {
    flex: 1 1 100%;
    flex-wrap: wrap;
  }

  .ui-block-card.ui-bubble > .ui-block-content > .ui-block-card-footer > .ui-block-actions > .ui-button {
    flex: 1 1 auto;
  }
}
.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);
}

/* A short list fills the panel, so the effort row stays at the bottom, as high as the provider rail. */
.provider-model-scroll {
  flex: 1 1 auto;
  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-close {
  border-radius: var(--openbot-radius-sm);
}

.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-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-lg);
}

.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);
  inset-inline-end: 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 is a block, 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);

  color: var(--openbot-text-primary);
}

/* The site is never cut: the user checks it before the value goes there. */
.browser-secret-card .ui-block-subtitle {
  overflow-wrap: anywhere;
}

.browser-secret-fields {
  display: grid;
  min-width: 0;
}

.browser-secret-card[data-variant="island"] {
  display: grid;
  gap: var(--openbot-space-4);
  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-inline-start: 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-save-option {
  display: grid;
  gap: var(--openbot-space-0-5);
}

.browser-secret-save {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  font-size: var(--openbot-text-sm);
}

.browser-secret-save-server {
  font-weight: var(--openbot-weight-medium);
}

/* Under the label, past the box. */
.browser-secret-save-hint {
  margin: 0;
  padding-inline-start: calc(var(--openbot-icon-sm) + var(--openbot-space-1-5));
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

.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);
}

/* The note keeps a readable width; the buttons go to the next row first. */
.browser-secret-card .ui-block-card-footer > .browser-secret-private {
  flex: 1 1 12rem;
}

.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. */
:root[data-surface="browser-dock"],
:root[data-surface="browser-dock"] body,
:root[data-surface="browser-dock"] #root {
  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. The dock is at the bottom of the page on
 * the end side, so the middle of the page, where most controls are, stays clear.
 */
.browser-dock {
  position: absolute;
  bottom: var(--openbot-space-4);
  inset-inline-end: var(--openbot-space-4);
  display: flex;
  width: min(560px, calc(100% - 2 * var(--openbot-space-4)));
  flex-direction: column;
  align-items: flex-end;
  gap: var(--openbot-space-2);
  isolation: isolate;
}

.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-tab 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"], [data-mode="prompt"], [data-mode="approval"]) {
  width: 100%;
  border-radius: var(--openbot-radius-lg);
}

/* The code card, the questions and the approval have a denser glass, so that the page under them does not
   show through as dark shapes behind the text. The code card is narrower than the reply. */
.browser-dock-island:is([data-mode="secret"], [data-mode="prompt"], [data-mode="approval"]) {
  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[data-mode="secret"] {
  width: min(100%, 420px);
}

.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 questions or the approval of the agent, as in the chat. A long card scrolls, so the page stays in view.
   The limit is not in vh: over a local page, the viewport is the overlay, which is only as tall as the dock. */
.browser-dock-island-card {
  display: grid;
  max-height: 420px;
  gap: var(--openbot-space-2);
  overflow: auto;
  padding: var(--openbot-space-3);
  color: var(--openbot-text-primary);
}

.browser-dock-island-card :is(.question-prompt-bubble, .ui-bubble-content, .approval-card) {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
}

.browser-dock-island-card > * {
  margin: 0;
}

/* 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-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-2) var(--openbot-space-1);
  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-inline-start: auto;
  border-radius: var(--openbot-radius-pill);
}

.browser-dock-island-reply {
  display: grid;
  gap: var(--openbot-space-1-5);
  padding-block: var(--openbot-space-2) var(--openbot-space-3);
  padding-inline: var(--openbot-space-3) var(--openbot-space-2);
  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-inline-start: auto;
}

.browser-dock-reply-body {
  max-height: 160px;
  padding-inline-end: 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-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-2) var(--openbot-space-1);
}

.browser-dock-avatar {
  width: 20px;
  height: 20px;
  flex: none;
}

/*
 * The user hid the box: a tab with the agent stays at the bottom edge, at the end of the box, clear of the
 * page. It has the height, the bottom line and the avatar inset of the field, so the glass of the field
 * shrinks into it and grows out of it.
 */
/* While the copy of its glass moves, the field draws no glass of its own. */
.browser-dock[data-glassless] .browser-dock-composer {
  border-color: transparent;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
}

.browser-dock-hide {
  border-radius: var(--openbot-radius-pill);
}

.browser-dock .browser-dock-tab {
  position: absolute;
  bottom: 0;
  overflow: hidden;
  max-width: min(360px, 100%);
  height: auto;
  box-sizing: border-box;
  justify-content: flex-start;
  padding-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-2) var(--openbot-space-3);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: inherit;
  gap: var(--openbot-space-2);
  inset-inline-end: 0;
  line-height: 1;
  white-space: nowrap;
}

/* Only the box, or only the tab, shows. */
.browser-dock:is([data-tucked], [data-phase="showing"]) > :not(.browser-dock-tab, .browser-dock-tuck-glass) {
  visibility: hidden;
}

.browser-dock:not([data-tucked]) > .browser-dock-tab {
  visibility: hidden;
}

/* The ghost button would draw its solid hover colour over the glass, and the tab would not match the box. */
.browser-dock .browser-dock-glass.browser-dock-tab:hover {
  background: var(--openbot-bg-glass);
}

/* As high as the send button, so the tab is as high as the field. */
.browser-dock-tab-avatar {
  position: relative;
  display: flex;
  height: 28px;
  flex: none;
  align-items: center;
}

/* A ring turns around the avatar while the agent works on the page. */
.browser-dock-tab-avatar[data-working]::after {
  position: absolute;
  border: 1.5px solid transparent;
  border-radius: var(--openbot-radius-pill);
  border-top-color: var(--openbot-accent);
  border-right-color: var(--openbot-accent);
  animation: ui-spin 900ms linear infinite;
  content: "";
  inset: 3px -1px;
}

/* A dot marks a reply or a question that the user did not see. */
.browser-dock-tab-avatar[data-unread]::after {
  position: absolute;
  top: 3px;
  right: -2px;
  width: 7px;
  height: 7px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
  content: "";
}

.browser-dock-tab-label {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
}

.browser-dock .browser-dock-tab .browser-dock-tab-chevron {
  flex: none;
  color: var(--openbot-text-secondary);
  transition: translate var(--openbot-duration-normal) var(--openbot-ease-out);
}

.browser-dock-tab:hover .browser-dock-tab-chevron {
  translate: 0 -2px;
}

/* The copy of the glass of the field, on its way between the field and the tab, under the field. */
.browser-dock-tuck-glass {
  z-index: 0;
  border-radius: var(--openbot-radius-pill);
}

/*
 * A hidden box keeps the width that it had open. The overlay over a page is only as wide as the tab, and
 * without this the box would get narrow too, so the field would grow into the wrong place.
 */
.browser-dock:is([data-tucked], [data-phase="showing"]) {
  width: var(--browser-dock-open-width, min(560px, calc(100% - 2 * var(--openbot-space-4))));
  /* The page under the hidden box gets the clicks where no overlay shrinks, as over a remote live view. */
  pointer-events: none;
}

.browser-dock[data-tucked] > .browser-dock-tab {
  pointer-events: auto;
}

.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-block: 0;
  padding-inline: var(--openbot-space-1-5) var(--openbot-space-2);
  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;
  }

  .browser-dock-tab-avatar[data-working]::after {
    animation: 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. `BrowserFullView` sets the body
 * attribute: a `body:has()` rule makes the browser restyle the whole page on each change in the chat.
 */
body[data-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-frame);
  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.
 * In a right-to-left language the group is at the top right (`src/main/window-buttons.ts`), so
 * the inset is at the inline start.
 */
.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;
  /* The fades, the drag and the scroll into view measure `scrollLeft` from the left edge
     (`BrowserTabStrip.tsx`), so the row keeps the left-to-right order in every language. */
  direction: ltr;
  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);
}

/* A tab of a named profile has a line in the profile's color under its title. */
.browser-full-chip[data-profile-color]::after {
  position: absolute;
  right: var(--openbot-space-2);
  bottom: 2px;
  left: var(--openbot-space-2);
  height: 2px;
  border-radius: var(--openbot-radius-pill);
  background: var(--browser-profile-color);
  content: "";
  pointer-events: none;
}

/* 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//home/ubuntu/openbot/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 {
  /* The optical lift paints a face's drawing like a positioned box. A photo has no drawing, so the
     face itself is positioned, and each face paints over the one before it in order. */
  position: relative;
  width: var(--openbot-space-8);
  height: var(--openbot-space-8);
  flex-shrink: 0;
  border-radius: var(--openbot-radius-pill);
}
/*
 * 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.54 draws 0.63 of the square: the faces overlap by the
 * difference from the 0.38 pitch, and the pair still ends inside the square. Each face is outlined
 * in the colour of the surface, and a later face is painted over an earlier one, so the outline cuts
 * the face below it. The overflow count takes the last cell and overlaps the face beside it; a
 * count of two digits takes the bottom row. In the sidebar, the ring is the 3.5px ring of the felt
 * badges.
 */
.channel-avatar-cluster {
  /* A sidebar row sets the size it gives an agent avatar; a cluster outside a row keeps 36px. */
  --channel-avatar-size: var(--agent-row-avatar-size, 36px);
  --channel-avatar-pitch: calc(var(--channel-avatar-size) * 0.38);
  --channel-avatar-face: calc(var(--channel-avatar-size) * 0.54);
  --agent-avatar-outline-width: 2px;
  /* Chrome rounds an outline width down to whole pixels, so the count draws the whole pixels of the
     ring as its outline and the rest as a solid ring shadow. */
  --channel-avatar-ring-outline: 2px;

  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;
}
/* A photo fills its whole box, so it takes the size of the count disc, which matches the faces. */
.channel-avatar-cluster .agent-avatar-custom {
  --channel-avatar-face: calc(var(--channel-avatar-size) * 0.46);
}
/* The row layout overlaps its faces. `:where` keeps the cluster out at no weight, so a surface
   that sets its own overlap wins. */
.channel-avatar:where(:not(.channel-avatar-cluster)) .agent-avatar + .agent-avatar {
  margin-inline-start: calc(-1 * var(--openbot-space-4));
}
/* One member is the channel's whole face. Two sit side by side, and three read as a triangle; a
   count of two digits takes the third place. */
.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) ~ :last-child {
  grid-column: 1 / span 2;
}
.sidebar .channel-avatar-cluster {
  --agent-avatar-outline-width: 3.5px;
  --channel-avatar-ring-outline: 3px;
}
/* The pinned rail draws the same cluster at the size it gives an agent avatar, with the same ring. */
.agent-row.sidebar-pinned-row .channel-avatar-cluster {
  --channel-avatar-size: var(--sidebar-pinned-avatar-size, 56px);
}
.agent-row.sidebar-pinned-row .channel-avatar-cluster .agent-avatar {
  width: var(--channel-avatar-face);
  height: var(--channel-avatar-face);
}
/* The count of the members the cluster does not show: the felt pill of the sidebar unread count,
   with its cream yarn digits. The count is a bare text node, so it takes the digit styles itself. It
   paints its own felt colour under the pill. */
.channel-avatar-count {
  --felt-box: calc(var(--channel-avatar-size) * 0.46);

  /* The optical lift translates the face's drawing, which paints it like a positioned box. The
     count is positioned too, so it paints over the face before it. */
  position: relative;
  display: grid;
  /* A face's drawing fills about 0.42 of the square; a disc of the face box (0.54) is larger, so it
     ends past the faces and pulls the cluster off centre. 0.46 matches the faces. Two digits do
     not fit the disc, so the disc grows into a pill, centred on the bottom row. */
  box-sizing: border-box;
  min-width: var(--felt-box);
  height: var(--felt-box);
  isolation: isolate;
  padding-inline: 4px;
  place-items: center;
  border-radius: var(--openbot-radius-pill);
  outline: var(--channel-avatar-ring-outline) solid var(--agent-avatar-outline, transparent);
  box-shadow: 0 0 0 var(--agent-avatar-outline-width) var(--agent-avatar-outline, transparent);
  background: linear-gradient(to bottom, var(--openbot-felt-plum-top), var(--openbot-felt-plum-bottom));
  color: var(--openbot-felt-cream);
  /* 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 on the disc at both cluster sizes. */
  font-size: var(--openbot-text-sm);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
/* The cream yarn digits of the "+N" count and of the sidebar unread count. The stroke makes the
   digits fat. */
:is(.channel-avatar-count, .agent-row-unread-count) {
  font-weight: 800;
  paint-order: stroke fill;
  -webkit-text-stroke: 0.7px var(--openbot-felt-cream-stroke);
}
/* The felt pill of the "+N" count and of the sidebar unread count (`sidebar-felt-badges.css`): a
   9-slice of the round lilac ball, so its ends stay round at any width. Each badge sets `--felt-box`,
   the height of its felt. The art is the left half of the ball and its mirror image, so both ends are
   the same. The felt is opaque from 0.19 of the slice on all four sides. It goes out by that much past
   the felt box, and the clip cuts it 0.25px inside the box, on the felt fill. The slice is half of the
   felt height, so the ends stay round: 2 × slice = box + 2 × 0.19 × slice, thus slice = box / 1.62.
   The filter darkens the lilac to plum. The badge of a waiting agent is the same felt, dyed amber. */
:is(.channel-avatar-count, .agent-row-agent-status-unread, .agent-row-agent-status-waiting)::before {
  --felt-slice: calc(var(--felt-box) / 1.62);
  --felt-edge: calc(var(--felt-slice) * 0.19);

  position: absolute;
  z-index: -1;
  inset: calc(-1 * var(--felt-edge));
  border: var(--felt-slice) solid transparent;
  border-image: url("/@fs/home/ubuntu/openbot/packages/ui/src/assets/plush/felt-pill-lilac.webp") 49% fill / var(--felt-slice) stretch;
  clip-path: inset(calc(var(--felt-edge) + 0.25px) round calc(var(--felt-box) / 2 - 0.25px));
  filter: brightness(0.52) saturate(1.35) contrast(1.1);
  content: "";
}
.agent-row-agent-status-waiting::before {
  border-image-source: url("/@fs/home/ubuntu/openbot/packages/ui/src/assets/plush/felt-pill-amber.webp");
  filter: none;
}
/* With the 3.5px ring, the count sits 1.5px lower than the cell centre, so its ring meets the faces
   above it at the same gap as the ring between the faces. */
.sidebar .channel-avatar-cluster .channel-avatar-count {
  translate: 0 1.5px;
}
/*
 * The plush faces of a sidebar cluster get the ring of the "+N" count. The ring of the drop shadows
 * copies the soft fur edge, so it shows as a faint, uneven gap. The filters that `SidebarFrame` holds
 * cut each face to a smooth outline of its fur and paint the face on that outline grown by the ring
 * width, in the row colour: a solid, smooth ring, as the outline of the count. A filter cannot read
 * the row colour, so the hover and selected rows take the filter of their own colour. A drop target
 * tints its rows while an agent is dragged; its faces keep the sidebar ring until the drop.
 */
.sidebar .channel-avatar-cluster .agent-avatar:has(> .bloub-avatar-svg image) {
  filter: url("#sidebar-plush-ring");
}
.sidebar .channel-avatar-cluster .agent-avatar:has(> .bloub-avatar-svg image) > .bloub-avatar-svg {
  filter: none;
}
.sidebar :is(.agent-row:hover, .agent-row-active) .channel-avatar-cluster .agent-avatar:has(> .bloub-avatar-svg image) {
  filter: url("#sidebar-plush-ring-raised");
}
/* With a fine pointer, a hovered row takes the ghost button hover fill (`primitives.css`). */
@media (hover: hover) and (pointer: fine) and (min-width: 601px) {
  .sidebar .agent-row:hover .channel-avatar-cluster .agent-avatar:has(> .bloub-avatar-svg image) {
    filter: url("#sidebar-plush-ring-hover");
  }
}
/* The light theme gives a selected row its own fill, which it keeps on hover (`app-shell.css`). */
:root[data-openbot-color-scheme="light"]
  .sidebar
  .agent-row-active
  .channel-avatar-cluster
  .agent-avatar:has(> .bloub-avatar-svg image) {
  filter: url("#sidebar-plush-ring-selected");
}
/* While an agent is dragged, the hovered row is not filled. */
.sidebar
  .agent-list[data-sidebar-dragging]
  .agent-row:hover:not(.agent-row-active)
  .channel-avatar-cluster
  .agent-avatar:has(> .bloub-avatar-svg image) {
  filter: url("#sidebar-plush-ring");
}
/*
 * A channel picture: an uploaded image, or an icon on the channel colour. It takes the square the
 * faces take. Agents are round, so a channel picture is a rounded square: a channel with a picture
 * does not look like an agent.
 */
.channel-avatar-picture {
  width: var(--channel-avatar-size, var(--openbot-space-8));
  min-width: var(--channel-avatar-size, var(--openbot-space-8));
  height: var(--channel-avatar-size, var(--openbot-space-8));
}
.channel-picture {
  display: grid;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  place-items: center;
  overflow: hidden;
  border-radius: var(--openbot-radius-sm);
  background: color-mix(in oklab, var(--channel-picture-hue) 26%, var(--openbot-bg-control));
  color: color-mix(in oklab, var(--channel-picture-hue) 78%, var(--openbot-text-primary));
}
.channel-picture > svg {
  width: 55%;
  height: 55%;
}
.channel-picture-image {
  object-fit: cover;
  background: var(--openbot-bg-control);
}
/* Biome wants these in rising specificity; later rules win on the elements they share. */
.channel-icon-grid .channel-picture {
  width: 32px;
  height: 32px;
}
.channel-icon-grid .channel-picture > svg {
  width: 18px;
  height: 18px;
}
.channel-avatar-cluster .channel-picture {
  border-radius: var(--openbot-radius-lg);
}
.channel-picture-trigger .channel-picture {
  border-radius: var(--openbot-radius-xl);
}
.channel-picture-editor .avatar-image-upload-preview .channel-picture {
  width: 100%;
  height: 100%;
}
.agent-row.sidebar-pinned-row .channel-avatar-cluster .channel-picture {
  border-radius: var(--openbot-radius-xl);
}

/* The picture at the top of channel settings. The badge is the one of the agent settings. */
.channel-picture-trigger {
  --agent-row-avatar-size: 62px;

  position: relative;
  display: grid;
  width: 62px;
  height: 62px;
  margin: 0;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-xl);
  background: transparent;
}
.channel-picture-trigger:hover {
  filter: brightness(1.08);
}

/* The editor is the agent avatar editor: the same headings, upload row and colour grid. */
.channel-picture-editor .avatar-image-upload-preview {
  border-radius: var(--openbot-radius-md);
}
/* The agent editor grids load later at the same weight, so the editor scopes these. */
.channel-picture-editor .channel-icon-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.channel-icon-grid .channel-icon-choice {
  height: 44px;
}
/* Eight colours and no automatic one: an icon always has a colour. */
.channel-picture-editor .channel-icon-color-grid {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}


/* /@fs//home/ubuntu/openbot/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: start;
  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;
}
/* A square picture looks smaller than a round face of the same box, so it takes 20px. */
.channel-title .channel-avatar-picture {
  --channel-avatar-size: 20px;
}
.channel-title .agent-avatar {
  --agent-avatar-optical-offset: -2px;

  width: 18px;
  height: 18px;
}
.channel-title .channel-avatar .agent-avatar + .agent-avatar {
  margin-inline-start: -8px;
}
/* The faces overlap, and each outline cuts the face below it in the colour of the page. The framed
   window puts the title on the top row instead (window.css). */
.channel-title,
.channel-empty {
  --agent-avatar-outline: var(--openbot-bg-canvas);
}
@media (hover: hover) and (pointer: fine) and (min-width: 601px) {
  /* The title is a ghost button, so its hover fill is under the faces. */
  .conversation-header .channel-title:hover:not(:disabled) {
    --agent-avatar-outline: var(--openbot-bg-control-hover);
  }
}
.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//home/ubuntu/openbot/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-inline-start: var(--openbot-space-0-5);
}

.channel-activity-faces {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}
.channel-activity-faces .agent-activity-avatar {
  transition:
    transform var(--openbot-duration-overlay) var(--openbot-ease-out),
    opacity var(--openbot-duration-overlay) var(--openbot-ease-out),
    margin-inline-end var(--openbot-duration-overlay) var(--openbot-ease-in-out);
}
.channel-activity-faces .agent-activity-avatar + .agent-activity-avatar {
  margin-inline-start: calc(-1 * var(--openbot-space-2));
}
/* A member that stops while others work: its face shrinks to its lower edge, as the whole line's face
   does on exit, and its stacked width (32px less the 8px overlap) closes, so the faces after it slide
   into its place. */
.channel-activity-faces .channel-activity-face-leaving {
  margin-inline-end: calc(-1 * var(--openbot-space-6));
  opacity: 0;
  transform: translateY(4px) scale(0.6);
}
@media (prefers-reduced-motion: reduce) {
  .channel-activity-faces .agent-activity-avatar {
    transition: none;
  }
}

/* Who works, before what the work is. Each name takes its agent's message colour. */
.channel-activity-names {
  flex: 0 1 auto;
  min-width: 0;
  margin-inline-start: var(--openbot-space-2);
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.channel-activity-name {
  color: var(--channel-activity-name-color, var(--openbot-text-muted));
}
/* In a narrow pane, long names end in an ellipsis before the short label wraps. */
.channel-activity-content .agent-activity-label {
  flex-shrink: 0;
}

/* 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-text {
  min-width: 0;
  flex: 1 1 24ch;
}
.channel-paused-task-subject {
  margin: 0;
  overflow: hidden;
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.channel-paused-task-reason {
  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//home/ubuntu/openbot/packages/ui/src/features/channels/channel-context-actions.css */
/* Each description says what the action does to the members, so it wraps instead of ending in an
   ellipsis, as in the settings window. */
.channel-context-actions .ui-item-description {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}


/* /@fs//home/ubuntu/openbot/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);
}

/* The run panel is at the inline end, so its toggle and Back chevrons follow the reading direction. */
.diagram-view-actions .header-panel-toggle > svg:dir(rtl),
.diagram-inspector .header-panel-toggle > svg:dir(rtl) {
  transform: scaleX(-1);
}

.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-inline-start: 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-inline-end var(--panel-resize-duration, var(--openbot-duration-overlay))
    cubic-bezier(0.22, 1, 0.36, 1);
}

.diagram-view-body[data-inspector="open"] {
  padding-inline-end: var(--diagram-inspector-width);
}

/* The board, or the empty canvas, and the chat panel over it. The panel keeps to this box. */
.diagram-view-canvas {
  position: relative;
  display: flex;
  min-width: 0;
  flex: 1;
}

.diagram-view-chat {
  position: absolute;
  bottom: var(--openbot-space-4);
  inset-inline-start: 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;
  /* The world is a coordinate space, so it stays left to right in right-to-left text. */
  direction: ltr;
  transform-origin: 0 0;
}

.diagram-board-world[data-settling] {
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}

/* 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% - var(--diagram-new-agent-height, 188px) - var(--openbot-space-2))
  );
  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;
}

.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;
  inset-inline-end: 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;
  inset-inline-end: 0;
  bottom: 0;
  display: flex;
  width: var(--diagram-inspector-width);
  min-height: 0;
  flex-direction: column;
  border-inline-start: 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: start;
}

.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-inline-start: 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-block: var(--openbot-space-2);
  padding-inline: var(--openbot-space-3) var(--openbot-space-2);
}

.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;
  }
}

/*
 * The canvas before its first routine: a faint sample diagram builds itself behind the pitch, one
 * run passes through it, and it fades and starts again. The dots move into the backdrop, so they
 * clear behind the pitch with the cards.
 */
.diagram-empty {
  container-type: inline-size;
}

.diagram-empty-viewport {
  display: grid;
  background-image: none;
  cursor: default;
}

.diagram-empty-backdrop {
  position: relative;
  grid-area: 1 / 1;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  opacity: 0.62;
  mask-image:
    radial-gradient(ellipse 30% 30% at 50% 50%, var(--openbot-transparent) 55%, var(--openbot-text-primary) 100%),
    radial-gradient(ellipse 80% 85% at 50% 50%, var(--openbot-text-primary) 55%, var(--openbot-transparent) 100%);
  mask-composite: intersect;
}

.diagram-empty-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, var(--openbot-border-strong) 1px, var(--openbot-transparent) 0);
  background-size: 24px 24px;
}

.diagram-empty-world {
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  transform-origin: center;
  scale: var(--diagram-empty-scale);
  transition:
    opacity 900ms var(--openbot-ease-out),
    filter 900ms var(--openbot-ease-out);
}

.diagram-empty-backdrop[data-leaving] .diagram-empty-world {
  opacity: 0;
  filter: blur(4px);
}

/* A card lands: it rises out of a blur. */
.diagram-empty-node {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(12px) scale(0.96);
  transition:
    opacity 700ms var(--openbot-ease-out),
    filter 700ms var(--openbot-ease-out),
    transform 700ms var(--openbot-ease-out);
}

.diagram-empty-node[data-shown] {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

.diagram-empty-node .diagram-node {
  cursor: default;
}

/* A connection draws from its output to its input, after the card it enters has landed. */
.diagram-empty .diagram-empty-edge[data-state="idle"] .diagram-edge-line {
  stroke-dasharray: 1600;
  stroke-dashoffset: 1600;
  transition: stroke-dashoffset 900ms var(--openbot-ease-in-out) 350ms;
}

.diagram-empty .diagram-empty-edge[data-drawn] .diagram-edge-line {
  stroke-dashoffset: 0;
}

.diagram-empty .diagram-empty-edge[data-state] .diagram-edge-arrow {
  opacity: 0;
  transition: opacity 300ms var(--openbot-ease-out) 1100ms;
}

.diagram-empty .diagram-empty-edge[data-drawn] .diagram-edge-arrow {
  opacity: 1;
}

/* The run pulse rides one connection, once, in the colour of the routine that fired. */
.diagram-empty-pulse {
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: var(--openbot-radius-pill);
  background: var(--diagram-routine-color, var(--openbot-accent));
  outline: 4px solid var(--diagram-routine-soft, var(--openbot-accent-soft));
  offset-rotate: 0deg;
  animation: diagram-empty-pulse 900ms var(--openbot-ease-in-out) both;
}

@keyframes diagram-empty-pulse {
  0% {
    offset-distance: 0%;
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  85% {
    opacity: 1;
  }

  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}

.diagram-empty-pitch {
  z-index: 1;
  display: grid;
  grid-area: 1 / 1;
  max-width: 34rem;
  place-self: center;
  justify-items: center;
  gap: var(--openbot-space-4);
  padding: var(--openbot-space-6);
  text-align: center;
}

.diagram-empty-title {
  margin: 0;
  font-size: var(--openbot-text-display);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.diagram-empty-title > span {
  display: block;
}

.diagram-empty-lead {
  color: var(--openbot-text-muted);
}

/* The one handwritten word of the title. It writes itself once. The app has no hand font, so it
   uses the system ones; their small x-height is brought up to the title's. */
.diagram-empty-title .diagram-empty-hand {
  display: inline;
  color: var(--openbot-accent-text);
  font-family: "Bradley Hand", "Noteworthy", "Segoe Print", cursive;
  font-size-adjust: 0.62;
  font-weight: var(--openbot-weight-semibold);
  line-height: 1;
  clip-path: inset(-0.4em 100% -0.4em -0.2em);
  animation: diagram-empty-write 520ms linear 500ms forwards;
}

@keyframes diagram-empty-write {
  to {
    clip-path: inset(-0.4em -0.2em -0.4em -0.2em);
  }
}

.diagram-empty-lines {
  display: grid;
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-xl);
  line-height: 1.5;
}

.diagram-empty-action.ui-button {
  width: 100%;
  max-width: 22rem;
  height: var(--openbot-control-lg);
  margin-top: var(--openbot-space-2);
}

/* A narrow pane: a smaller title, and a stronger fade so the cards stay behind the words. */
@container (max-width: 720px) {
  .diagram-empty-title {
    font-size: var(--openbot-text-3xl);
  }

  .diagram-empty-lines {
    font-size: var(--openbot-text-lg);
  }

  .diagram-empty-backdrop {
    opacity: 0.45;
  }
}

/* Less motion: a still frame with the finished run. */
.diagram-empty[data-still] :is(.diagram-empty-world, .diagram-empty-node, .diagram-empty-hand),
.diagram-empty[data-still] .diagram-empty-edge[data-state] path {
  animation: none;
  transition: none;
  clip-path: none;
}

.diagram-empty[data-still] .diagram-empty-pulse {
  display: none;
}


/* /@fs//home/ubuntu/openbot/packages/ui/src/features/workflows/workflow-nodes.css */
/*
 * Workflow node components: the node chrome, the step and control nodes, ports, connections, the
 * result strip, the picker menus and the asset library. The values follow the Higgsfield canvas
 * measurements: the card is one step lighter than the canvas, an inner field is one step lighter
 * than the card, and every edge is a 1px ring, not a shadow. The canvas, its HUD and the story frame
 * keep their own styles.
 */

:where(.wfn-stage, .wfn-menu, .wfn-popover) {
  --wfn-card: var(--openbot-bg-canvas);
  --wfn-field: var(--openbot-bg-surface-raised);
  --wfn-ring: color-mix(in srgb, var(--openbot-text-primary) 6%, transparent);
  --wfn-ring-strong: color-mix(in srgb, var(--openbot-text-primary) 10%, transparent);
  --wfn-hover: color-mix(in srgb, var(--openbot-text-primary) 6%, transparent);
  --wfn-port: color-mix(in srgb, var(--openbot-text-primary) 10%, var(--openbot-bg-canvas));
  --wfn-glass: color-mix(in srgb, var(--openbot-bg-surface-raised) 75%, transparent);
  --wfn-glass-blur: blur(40px) saturate(1.4);
  --wfn-radius-card: calc(var(--openbot-radius-lg) + var(--openbot-space-1));
  --wfn-small: calc(var(--openbot-text-sm) - 1px);
  /* Ten pixels: one step over the control radius, so a row sits concentric in its menu. */
  --wfn-radius-row: calc(var(--openbot-radius-sm) + var(--openbot-space-1));
  --wfn-radius-run: calc(var(--openbot-radius-md) + 2px);
  /* The Title size: 40px, one step over the display size. */
  --wfn-text-title: calc(var(--openbot-text-display) * 1.25);
  /* Focus is a neutral 1px ring, not the accent halo of the shared token. */
  --openbot-focus-ring: 0 0 0 1px var(--openbot-text-muted);
}

/*
 * The light palette puts a raised surface only a little above the canvas, so a field on a card
 * almost disappears. There the card is the light surface, and a field is one step darker.
 */
:root[data-openbot-color-scheme="light"] :where(.wfn-stage, .wfn-menu, .wfn-popover) {
  --wfn-card: var(--openbot-bg-surface);
  --wfn-field: var(--openbot-bg-control-hover);
}

/* ---------------------------------------------------------------- Node */

.wfn-node {
  position: relative;
  display: grid;
  gap: var(--openbot-space-1-5);
  width: var(--wfn-width);
  transition: width var(--openbot-duration-slow) var(--openbot-ease-out);
}

.wfn-node[data-kind="prompt"] {
  --wfn-width: 296px;
  --wfn-height: 151px;
}

.wfn-node[data-kind="agent"],
.wfn-node[data-kind="llm"] {
  --wfn-width: 350px;
}

.wfn-node[data-kind="image"] {
  --wfn-width: 300px;
}

.wfn-node[data-kind="asset"] {
  --wfn-width: 240px;
}

.wfn-label {
  display: flex;
  gap: var(--openbot-space-1);
  align-items: center;
  color: var(--openbot-text-muted);
  font-size: var(--wfn-small);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-sm);
  user-select: none;
}

.wfn-label svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}

.wfn-card {
  position: relative;
  display: grid;
  gap: var(--openbot-space-2);
  align-content: start;
  min-height: var(--wfn-height, auto);
  padding: var(--openbot-space-2);
  border-radius: var(--wfn-radius-card);
  background: var(--wfn-card);
  box-shadow: 0 0 0 1px var(--wfn-ring);
  transition: box-shadow var(--openbot-duration-hover) var(--openbot-ease-out);
}

.wfn-card[data-media] {
  aspect-ratio: var(--wfn-aspect, auto);
  padding: 0;
  overflow: hidden;
}

/* --------------------------------------------------------------- Field */

.wfn-field {
  display: grid;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-3);
  border-radius: var(--openbot-radius-md);
  background: var(--wfn-field);
  transition: box-shadow var(--openbot-duration-hover) var(--openbot-ease-out);
}

.wfn-field:focus-within {
  box-shadow: inset 0 0 0 1px var(--wfn-ring-strong);
}

.wfn-field-fill {
  min-height: calc(var(--wfn-height) - var(--openbot-space-4));
}

.wfn-field-task {
  grid-template-rows: 1fr auto;
  min-height: 150px;
}

.wfn-stage .wfn-input {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  resize: none;
  field-sizing: content;
}

.wfn-stage .wfn-input::placeholder,
.wfn-stage .wfn-text-input::placeholder {
  color: var(--openbot-text-muted);
}

/* The field box shows the focus, so the shared accent outline goes. */
.wfn-stage .wfn-input:focus-visible {
  outline: none;
  box-shadow: none;
}

.wfn-field-fill .wfn-input {
  height: 100%;
}

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

.wfn-field-result p {
  max-height: 120px;
  margin: 0;
  overflow-y: auto;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

/* Why a failed run stopped, in place of its result. The Failed mark and the results carry the colour. */
.wfn-field-result p[data-failed] {
  color: var(--openbot-text-muted);
}

.wfn-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: calc(var(--openbot-space-1) * -1) 0;
  color: var(--openbot-text-muted);
  font-size: var(--wfn-small);
  font-weight: var(--openbot-weight-semibold);
}

/* A pill in a field: an agent, a model. Flat until hover, as the Higgsfield model button. */
.wfn-stage .wfn-pill {
  gap: var(--openbot-space-1-5);
  min-width: 0;
  height: 20px;
  padding: 0 var(--openbot-space-1);
  border: 0;
  border-radius: var(--openbot-radius-pill);
  background: transparent;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}

/* A long model name gives up its room first and ends with "…", so it stays in the field. */
.wfn-stage .wfn-model-pill {
  flex-shrink: 1;
}

/* An agent next to a model keeps its full name, but leaves 96px: the model logo, a few letters and the arrow. */
.wfn-stage .wfn-agent-pill:has(+ .wfn-model-pill) {
  max-width: calc(100% - 96px - var(--openbot-space-2));
}

.wfn-stage .wfn-field-foot .provider-model-trigger {
  gap: var(--openbot-space-1);
  height: 20px;
  padding: 0 var(--openbot-space-1);
  border: 0;
  background: transparent;
  box-shadow: none;
}

.wfn-stage .wfn-field-foot .provider-model-trigger-name {
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
}

.wfn-stage .wfn-field-foot .provider-model-trigger:is(:hover, [aria-expanded="true"]),
.wfn-stage .wfn-pill:hover {
  background: var(--wfn-hover);
}

.wfn-pill > svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  color: var(--openbot-text-muted);
}

/* A provider logo is a filled mark, so it overrides the outline paint of the menu icons. */
.wfn-pill > svg.wfn-model-logo,
.wfn-menu.ui-action-menu [role="menuitem"] > svg.wfn-model-logo {
  flex: none;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-primary);
  fill: currentcolor;
  stroke: none;
}

.wfn-avatar.agent-avatar {
  --agent-avatar-optical-offset: -2px;

  flex: none;
  width: 16px;
  height: 16px;
}

.wfn-stage .wfn-run {
  height: var(--openbot-control-lg);
  border-radius: var(--wfn-radius-run);
  font-weight: var(--openbot-weight-semibold);
}

/* --------------------------------------------------------------- Ports */

.wfn-ports {
  position: absolute;
  top: 50%;
  display: grid;
  gap: 10px;
  translate: 0 calc(-50% + 11px);
}

.wfn-ports[data-side="in"] {
  right: calc(100% + var(--openbot-space-3));
}

.wfn-ports[data-side="out"] {
  left: calc(100% + var(--openbot-space-3));
}

.wfn-port-slot {
  position: relative;
  display: grid;
}

.wfn-stage .wfn-port {
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
  border-radius: var(--openbot-radius-pill);
  background: var(--wfn-port);
  box-shadow: 0 0 0 1px var(--wfn-ring);
  color: var(--openbot-text-secondary);
  opacity: 0;
  transition:
    opacity var(--openbot-duration-fast) var(--openbot-ease-out),
    scale var(--openbot-duration-fast) var(--openbot-ease-out),
    background-color var(--openbot-duration-hover) var(--openbot-ease-out);
}

.wfn-port svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

.wfn-node:is(:hover, :focus-within, [data-selected]) .wfn-port {
  opacity: 1;
}

.wfn-stage .wfn-port:hover {
  background: var(--openbot-text-primary);
  color: var(--openbot-bg-canvas);
}

/*
 * The port name shows next to the port on hover, as the Higgsfield "Text" chip. The text box is
 * trimmed to the capitals, so a name with no descender is at the vertical centre. The chip keeps
 * its height of one line and 2px above and below.
 */
.wfn-port-chip {
  position: absolute;
  top: 50%;
  padding: calc((1lh - 1cap) / 2 + 2px) var(--openbot-space-2);
  text-box: trim-both cap alphabetic;
  border-radius: var(--openbot-radius-sm);
  background: var(--wfn-card);
  box-shadow: 0 0 0 1px var(--wfn-ring-strong);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  translate: 0 -50%;
  transition: opacity var(--openbot-duration-hover) var(--openbot-ease-out);
}

.wfn-port-slot[data-side="out"] .wfn-port-chip {
  left: calc(100% + var(--openbot-space-2));
}

.wfn-port-slot[data-side="in"] .wfn-port-chip {
  right: calc(100% + var(--openbot-space-2));
}

.wfn-port-slot:has(.wfn-port:is(:hover, :focus-visible)) .wfn-port-chip {
  opacity: 1;
}

/* ------------------------------------------------------------- Toolbar */

/*
 * The toolbar keeps its screen size at every zoom, as the results strip does. Its shape follows the
 * Infeld IconActionList: a round bar of round icon buttons, muted until the pointer or the focus is
 * on them. Each name shows in a tooltip. A ring, not a shadow, sets it off the canvas.
 */
.wfn-toolbar {
  position: absolute;
  bottom: calc(100% + var(--openbot-space-3) / var(--wfn-scale, 1));
  left: round(50%, 1px);
  z-index: 2;
  display: flex;
  gap: var(--openbot-space-0-5);
  align-items: center;
  padding: var(--openbot-space-1);
  border-radius: var(--openbot-radius-pill);
  white-space: nowrap;
  background: var(--wfn-glass);
  box-shadow: 0 0 0 1px var(--wfn-ring-strong);
  translate: calc(round(-50%, 1px) + var(--wfn-snap-x, 0px) / var(--wfn-scale, 1))
    calc(var(--wfn-snap-y, 0px) / var(--wfn-scale, 1));
  transform-origin: bottom center;
  scale: calc(1 / var(--wfn-scale, 1));
  backdrop-filter: var(--wfn-glass-blur);
}

/*
 * Above the node, the toolbar can cover a node that is near. Then it goes under the node, and under the
 * results strip when the node shows one: 8px gap, 52px strip, 8px gap, as the canvas measures it.
 */
.wfn-toolbar[data-side="below"] {
  top: calc(100% + var(--openbot-space-3) / var(--wfn-scale, 1));
  bottom: auto;
  transform-origin: top center;
}

.wfn-toolbar[data-side="below"][data-strip] {
  top: calc(100% + (8px + 52px + var(--openbot-space-2)) / var(--wfn-scale, 1));
}

/* The fill shows the focus, as the hover does, so the toolbar has no focus ring. */
.wfn-stage .wfn-toolbar :is(.ui-button, .wfn-toolbar-select) {
  border-radius: var(--openbot-radius-pill);
  box-shadow: none;
  color: var(--openbot-text-secondary);
}

.wfn-stage .wfn-toolbar :is(.ui-button, .wfn-toolbar-select):is(:hover, :focus-visible, [aria-pressed="true"]) {
  background: var(--wfn-hover);
  color: var(--openbot-text-primary);
}

.wfn-stage .wfn-toolbar .wfn-tool-action {
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  padding: 0;
}

.wfn-stage .wfn-toolbar .wfn-tool-action svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}

/* Delete takes the danger colour under the pointer or the focus, as are the nodes and the lines that it removes. */
.wfn-stage .wfn-toolbar .wfn-tool-action[data-tone="danger"]:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--openbot-danger) 16%, transparent);
  color: var(--openbot-danger-text);
}

.wfn-toolbar-separator {
  width: 1px;
  height: 16px;
  margin: 0 var(--openbot-space-1);
  background: var(--wfn-ring-strong);
}

/* A node with no actions of its own and no Duplicate starts its toolbar with Lock. */
.wfn-toolbar-separator:first-child {
  display: none;
}

.wfn-stage .wfn-toolbar-select {
  gap: var(--openbot-space-1);
  height: var(--openbot-control-md);
  padding-inline: var(--openbot-space-2);
  font-size: var(--openbot-text-sm);
}

.wfn-toolbar-select svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  color: var(--openbot-text-muted);
}

/* ---------------------------------------------------------------- Text */

.wfn-text {
  width: auto;
  min-width: 120px;
}

.wfn-stage .wfn-text-input {
  min-height: 0;
  padding: var(--openbot-space-1) var(--openbot-space-1-5);
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  box-shadow: none;
  color: var(--wfn-text-ink, var(--openbot-text-primary));
  font-size: var(--openbot-text-lg);
  line-height: 1.4;
  resize: none;
  field-sizing: content;
}

.wfn-stage .wfn-text-input[data-font="mono"] {
  font-family: var(--openbot-font-mono);
}

.wfn-stage .wfn-text-input[data-text-size="lg"] {
  font-size: var(--openbot-text-3xl);
  letter-spacing: var(--openbot-tracking-tight);
}

.wfn-stage .wfn-text-input[data-text-size="xl"] {
  font-size: var(--wfn-text-title);
  letter-spacing: var(--openbot-tracking-tight);
}

.wfn-stage .wfn-text-input[data-bold] {
  font-weight: var(--openbot-weight-bold);
}

.wfn-stage .wfn-text-input:focus-visible {
  outline: none;
  box-shadow: none;
}

/* --------------------------------------------------------------- Media */

.wfn-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wfn-card[data-media] > .wfn-media {
  position: absolute;
  inset: 0;
}

.wfn-media-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  height: 100%;
  color: color-mix(in srgb, var(--openbot-text-primary) 14%, transparent);
}

.wfn-media-empty svg {
  width: 40px;
  height: 40px;
  stroke-width: 1.25;
}

/*
 * The glass layer on an image: hidden at rest, shown on hover, focus or selection. It never grows
 * past the card, as on Higgsfield: the prompt stops at three lines and scrolls, and on a short card
 * it gives up more of its height.
 */
.wfn-overlay {
  position: absolute;
  inset: auto 0 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--openbot-space-1);
  max-height: 100%;
  padding: var(--openbot-space-2);
  opacity: 0;
  translate: 0 4px;
  transition:
    opacity var(--openbot-duration-normal) var(--openbot-ease-out),
    translate var(--openbot-duration-normal) var(--openbot-ease-out);
}

.wfn-node:is(:hover, :focus-within, [data-selected]) .wfn-overlay {
  opacity: 1;
  translate: 0 0;
}

.wfn-overlay-bar {
  display: flex;
  gap: var(--openbot-space-1);
  align-items: center;
}

.wfn-stage .wfn-chip {
  display: inline-flex;
  gap: var(--openbot-space-1);
  align-items: center;
  height: var(--openbot-control-xs);
  padding: 0 var(--openbot-space-1-5);
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: var(--wfn-glass);
  box-shadow: inset 0 0 0 1px var(--wfn-ring-strong);
  color: var(--openbot-text-primary);
  font-size: var(--wfn-small);
  font-weight: var(--openbot-weight-medium);
  backdrop-filter: var(--wfn-glass-blur);
  cursor: pointer;
}

.wfn-chip svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}

.wfn-stage .wfn-collapse {
  margin-left: auto;
  border-radius: var(--openbot-radius-sm);
  color: var(--openbot-text-primary);
}

.wfn-panel {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--openbot-space-2);
  min-height: 0;
  padding: 10px;
  border-radius: var(--openbot-radius-md);
  background: var(--wfn-glass);
  box-shadow: inset 0 0 0 1px var(--wfn-ring);
  backdrop-filter: var(--wfn-glass-blur);
}

.wfn-panel .wfn-input {
  max-height: calc(var(--openbot-leading-sm) * 3);
  overflow-y: auto;
  font-weight: var(--openbot-weight-medium);
  scrollbar-width: none;
}

.wfn-stage .wfn-run-pill {
  gap: var(--openbot-space-1);
  height: var(--openbot-control-xs);
  padding: 0 10px 0 var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-pill);
  font-size: var(--openbot-text-sm);
}

.wfn-run-pill svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}

/* The spinner takes the place of the play icon, so the pill keeps its width. */
.wfn-stage .wfn-run-pill[aria-busy="true"] svg {
  display: none;
}

/* --------------------------------------------------------------- Asset */

.wfn-stage .wfn-asset-trigger {
  display: grid;
  width: 100%;
  min-height: 120px;
  padding: 0;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: var(--wfn-field);
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* A taller asset card stretches its file button, and the file row stays in the middle. */
.wfn-node[data-kind="asset"] .wfn-card {
  align-content: stretch;
}

/* An image asset with a height the user set fills the card and crops the image. */
.wfn-node[data-height] .wfn-card[data-media] {
  aspect-ratio: auto;
  height: var(--wfn-height);
}

.wfn-node[data-height] .wfn-card[data-media] .wfn-asset-trigger > .wfn-media {
  position: absolute;
  inset: 0;
}

.wfn-card[data-media] .wfn-asset-trigger {
  position: absolute;
  inset: 0;
  border-radius: 0;
}

.wfn-asset-trigger:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 1px var(--openbot-text-muted);
}

/* A file from the computer over the card: the card takes the hover fill. */
.wfn-stage .wfn-asset-trigger[data-dropping] {
  background: var(--wfn-hover);
}

.wfn-asset-empty {
  display: grid;
  gap: var(--openbot-space-2);
  place-content: center;
  justify-items: center;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}

.wfn-asset-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--openbot-radius-pill);
  background: var(--wfn-hover);
  box-shadow: inset 0 0 0 1px var(--wfn-ring-strong);
  transition: background-color var(--openbot-duration-hover) var(--openbot-ease-out);
}

.wfn-asset-icon svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}

.wfn-asset-trigger:is(:hover, [data-dropping]) .wfn-asset-icon {
  background: var(--wfn-ring-strong);
}

.wfn-asset-caption {
  position: absolute;
  bottom: var(--openbot-space-2);
  left: var(--openbot-space-2);
  max-width: calc(100% - var(--openbot-space-4));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wfn-asset-file {
  display: flex;
  gap: var(--openbot-space-3);
  align-items: center;
  min-width: 0;
  padding: var(--openbot-space-3);
  text-align: left;
}

.wfn-asset-glyph {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 48px;
  border-radius: var(--openbot-radius-sm);
  background: var(--wfn-hover);
  box-shadow: inset 0 0 0 1px var(--wfn-ring-strong);
  color: var(--openbot-text-muted);
}

.wfn-asset-glyph svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  translate: 0 -4px;
}

.wfn-asset-glyph span {
  position: absolute;
  bottom: var(--openbot-space-1);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-glyph-sm);
  font-weight: var(--openbot-weight-bold);
  letter-spacing: var(--openbot-tracking-wide);
}

.wfn-asset-text {
  display: grid;
  min-width: 0;
}

.wfn-asset-name {
  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;
}

.wfn-asset-meta {
  color: var(--openbot-text-muted);
  font-size: var(--wfn-small);
  line-height: var(--openbot-leading-sm);
}

/* ------------------------------------------------------ Menus, library */

.wfn-menu {
  --ui-menu-bg: var(--wfn-glass);
  --ui-menu-panel-shadow: 0 0 0 1px var(--wfn-ring-strong);
  --ui-menu-item-hover: var(--wfn-hover);
  --ui-menu-radius: var(--openbot-radius-lg);

  backdrop-filter: var(--wfn-glass-blur);
}

/* ------------------------------------------------------------- Picker */

/*
 * Every choice list on the canvas has this one style: a search field over a divider, group
 * headings, and rows with an icon tile, the name and small chips. The panel, the row and the tile
 * radii are concentric.
 */
.wfn-picker.ui-action-menu {
  --ui-menu-radius: var(--wfn-radius-card);

  display: flex;
  flex-direction: column;
  min-width: 232px;
  max-width: min(320px, calc(100vw - var(--openbot-space-4)));
  max-height: min(440px, var(--kb-popper-content-available-height, 440px));
  padding: 0;
}

.wfn-picker-search {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: 0 var(--openbot-space-3);
  border-bottom: 1px solid var(--wfn-ring-strong);
}

.wfn-picker.ui-action-menu .wfn-picker-search > svg {
  flex: none;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
}

.wfn-picker .wfn-picker-field {
  flex: 1;
  min-width: 0;
  height: var(--openbot-control-lg);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
}

.wfn-picker .wfn-picker-field::placeholder {
  color: var(--openbot-text-muted);
}

/*
 * The field takes the focus each time the menu opens, so a focus colour on the divider would always
 * show. The caret shows where typing goes, as in the shared search select.
 */
.wfn-picker .wfn-picker-field:focus-visible {
  outline: none;
  box-shadow: none;
}

.wfn-picker-list {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--openbot-space-1-5);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

/* An action list groups its rows in a fieldset, which has the group role. */
fieldset.wfn-picker-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.wfn-picker-group + .wfn-picker-group {
  margin-top: var(--openbot-space-1-5);
}

.wfn-picker-heading {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  padding: var(--openbot-space-1-5) var(--openbot-space-2) var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--wfn-small);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
}

.wfn-picker.ui-action-menu .wfn-picker-heading > svg {
  flex: none;
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  fill: currentcolor;
}

.wfn-picker.ui-action-menu .wfn-picker-row:is([role^="menuitem"]) {
  height: auto;
  min-height: calc(var(--openbot-control-md) + var(--openbot-space-2));
  gap: calc(var(--openbot-space-2) + var(--openbot-space-0-5));
  padding-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-1) var(--openbot-space-2);
  border-radius: var(--wfn-radius-row);
  white-space: normal;
}

.wfn-picker.ui-action-menu .wfn-picker-row:is([role^="menuitem"])[data-checked] {
  background: var(--wfn-hover);
}

.wfn-picker.ui-action-menu
  .wfn-picker-row:is([role^="menuitem"])[data-checked]:is(:hover, :focus-visible, [data-highlighted]) {
  background: var(--wfn-ring-strong);
}

/* The tile holds the mark of a choice: a logo, an avatar, a swatch or a sample. */
.wfn-picker-tile {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  overflow: hidden;
  border-radius: var(--openbot-radius-sm);
  background: var(--wfn-field);
  box-shadow: inset 0 0 0 1px var(--wfn-ring);
  color: var(--openbot-text-secondary);
  transition: color var(--openbot-duration-fast) var(--openbot-ease-out);
}

/*
 * A node kind in an add menu is only its icon in the colour of the kind, with no tile, so the
 * twelve kinds fit in short rows. A kind with no colour of its own has a neutral icon.
 */
.wfn-picker-tile[data-kind] {
  --wfn-kind: var(--openbot-text-secondary);

  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  background: none;
  box-shadow: none;
  color: var(--wfn-kind);
}

/* The add menu is a little taller than the other lists, so all its kinds show with no scroll. */
.wfn-picker.ui-action-menu:has(.wfn-picker-tile[data-kind]) {
  max-height: min(560px, var(--kb-popper-content-available-height, 560px));
}

.wfn-picker.ui-action-menu .wfn-picker-row:has(> .wfn-picker-tile[data-kind]) {
  min-height: var(--openbot-control-md);
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-1) var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
}

.wfn-picker-row[data-checked] .wfn-picker-tile {
  box-shadow: inset 0 0 0 1px var(--wfn-ring-strong);
  color: var(--openbot-text-primary);
}

:is(.wfn-picker.ui-action-menu, .wfn-drop-menu) .wfn-picker-tile > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: var(--openbot-icon-stroke);
}

/* A provider logo is a filled mark. */
.wfn-picker.ui-action-menu .wfn-picker-tile > svg.wfn-model-logo,
.wfn-picker.ui-action-menu .wfn-picker-chip > svg.wfn-model-logo {
  fill: currentcolor;
  stroke: none;
}

.wfn-picker-tile > .wfn-swatch {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}

/* An avatar has its own shape, so it has no tile box. The offset centres the face, as elsewhere. */
.wfn-picker-tile:has(> .agent-avatar),
.wfn-picker-row[data-checked] .wfn-picker-tile:has(> .agent-avatar) {
  overflow: visible;
  background: none;
  box-shadow: none;
}

.wfn-picker-tile > .agent-avatar {
  --agent-avatar-optical-offset: calc(var(--openbot-control-sm) * -0.14);

  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
}

.wfn-picker-tile > .wfn-font-sample {
  font-size: var(--openbot-text-lg);
}

/* A text size shows "Aa" at a size that grows with the choice. */
.wfn-picker-tile > .wfn-font-sample[data-step="1"] {
  font-size: var(--openbot-text-sm);
}

.wfn-picker-tile > .wfn-font-sample[data-step="3"] {
  font-size: var(--openbot-text-2xl);
}

.wfn-picker-tile > .wfn-font-sample[data-step="4"] {
  font-size: var(--openbot-text-3xl);
}

/* An aspect ratio shows its frame. The longer side is one icon long. */
.wfn-picker-aspect {
  width: calc(var(--openbot-icon-md) * var(--wfn-aspect-w));
  height: calc(var(--openbot-icon-md) * var(--wfn-aspect-h));
  border: 1.5px solid currentcolor;
  border-radius: var(--openbot-radius-xs);
}

/* An effort shows five bars. The bars up to the level are lit. */
.wfn-picker-meter {
  display: flex;
  align-items: flex-end;
  gap: var(--openbot-space-0-5);
  height: var(--openbot-icon-md);
}

.wfn-picker-meter > i {
  width: 3px;
  border-radius: var(--openbot-radius-pill);
  background: var(--wfn-ring-strong);
}

.wfn-picker-meter > i[data-on] {
  background: currentcolor;
}

.wfn-picker-meter > i:nth-child(1) {
  height: 20%;
}

.wfn-picker-meter > i:nth-child(2) {
  height: 40%;
}

.wfn-picker-meter > i:nth-child(3) {
  height: 60%;
}

.wfn-picker-meter > i:nth-child(4) {
  height: 80%;
}

.wfn-picker-meter > i:nth-child(5) {
  height: 100%;
}

.wfn-picker-body {
  display: grid;
  flex: 1;
  gap: var(--openbot-space-1);
  min-width: 0;
}

.wfn-picker-name {
  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;
}

.wfn-picker-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-1);
}

.wfn-picker-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  height: 18px;
  padding: 0 var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-xs);
  background: var(--wfn-hover);
  /* Muted text on the chip's own fill is under 4.5:1 in the light theme. */
  color: var(--openbot-text-secondary);
  font-size: var(--wfn-small);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

.wfn-picker.ui-action-menu .wfn-picker-chip > svg {
  flex: none;
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}

.wfn-picker.ui-action-menu .wfn-picker-row > svg.wfn-picker-check {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  margin-inline-start: auto;
  color: var(--openbot-text-primary);
}

.wfn-picker-empty {
  margin: 0;
  padding: var(--openbot-space-4) var(--openbot-space-3);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-align: center;
}

/*
 * The model picker keeps the layout of the one in the conversation header: a rail of provider logos
 * on the left, and the panel of the chosen provider. The panel has the picker style.
 */
.wfn-model-picker.wfn-picker.ui-action-menu {
  width: min(360px, calc(100vw - var(--openbot-space-4)));
  max-width: none;
}

.wfn-model-layout {
  display: flex;
  min-height: 0;
  max-height: inherit;
}

.wfn-model-rail {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-2);
  border-inline-end: 1px solid var(--wfn-ring-strong);
}

.wfn-model-tab-hint {
  display: flex;
}

/* The panel radius less the rail padding, so the tab and the panel corners are concentric. */
.wfn-model-tab {
  display: grid;
  place-items: center;
  width: var(--openbot-control-lg);
  height: var(--openbot-control-lg);
  padding: 0;
  border: 0;
  border-radius: var(--openbot-radius-md);
  outline: 0;
  background: transparent;
  color: var(--openbot-text-primary);
  cursor: pointer;
  transition: background-color var(--openbot-duration-hover) var(--openbot-ease-out);
}

.wfn-model-tab:hover {
  background: var(--wfn-hover);
}

.wfn-model-tab[data-selected] {
  background: var(--wfn-hover);
  box-shadow: inset 0 0 0 1px var(--wfn-ring-strong);
}

/* The shared accent focus outline goes; a neutral ring inside the tab shows the focus. */
.wfn-model-picker .wfn-model-tab:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--openbot-text-muted);
}

.wfn-model-tab > .wfn-model-mark {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  fill: currentcolor;
  opacity: 0.48;
  transition: opacity var(--openbot-duration-hover) var(--openbot-ease-out);
}

.wfn-model-tab:hover > .wfn-model-mark {
  opacity: 0.8;
}

.wfn-model-tab[data-selected] > .wfn-model-mark {
  opacity: 1;
}

.wfn-model-panel {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.wfn-model-heading {
  overflow: hidden;
  padding: var(--openbot-space-3) var(--openbot-space-3) var(--openbot-space-1);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wfn-model-list {
  margin: 0;
  list-style: none;
}

.wfn-model-list .wfn-picker-row[role="option"] {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  min-height: calc(var(--openbot-control-md) + var(--openbot-space-2));
  /* With the list padding, the name starts on the line of the heading and the search icon. */
  padding-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-1-5) var(--openbot-space-2);
  border-radius: var(--wfn-radius-row);
  outline: 0;
  color: var(--openbot-text-primary);
  cursor: pointer;
  transition: background-color var(--openbot-duration-hover) var(--openbot-ease-out);
}

.wfn-model-list .wfn-picker-row[role="option"]:is(:hover, [data-highlighted], [data-selected]) {
  background: var(--wfn-hover);
}

.wfn-model-list .wfn-picker-row[role="option"][data-selected]:is(:hover, [data-highlighted]) {
  background: var(--wfn-ring-strong);
}

.ui-popover-menu-surface.wfn-popover {
  display: grid;
  gap: var(--openbot-space-3);
  width: 344px;
  padding: var(--openbot-space-3);
  border-radius: var(--wfn-radius-card);
  background: var(--wfn-glass);
  box-shadow: 0 0 0 1px var(--wfn-ring-strong);
  backdrop-filter: var(--wfn-glass-blur);
}

/* The title of a popover, with one action at the end, such as Upload. */
.wfn-popover-head {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
  justify-content: space-between;
  margin-block: calc(var(--openbot-space-1) * -1);
}

/* The action has the size of the title text. */
.wfn-popover-head .ui-button {
  font-size: var(--openbot-text-sm);
}

.wfn-popover-title {
  margin: 0;
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
}

.wfn-library {
  display: grid;
  gap: var(--openbot-space-3);
}

/* Filter pills, as the Higgsfield library: a full pill, light text at half strength until active. */
.wfn-popover .wfn-library-tabs {
  padding: 0;
  background: transparent;
}

.wfn-popover .wfn-library-tabs .ui-sliding-tabs-trigger {
  border-radius: var(--openbot-radius-pill);
  font-size: var(--openbot-text-sm);
}

.wfn-popover .wfn-library-tabs .ui-sliding-tabs-pill {
  top: 0;
  border-radius: var(--openbot-radius-pill);
  background: var(--wfn-ring-strong);
}

/* The search field: the quiet fill of the node fields, and the same 1px ring on focus. */
.wfn-library-search {
  display: flex;
  gap: var(--openbot-space-1-5);
  align-items: center;
  height: var(--openbot-control-md);
  padding: 0 var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
  background: var(--wfn-field);
  transition: box-shadow var(--openbot-duration-hover) var(--openbot-ease-out);
}

.wfn-library-search:focus-within {
  box-shadow: inset 0 0 0 1px var(--wfn-ring-strong);
}

.wfn-library-search > svg {
  flex: none;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
}

.wfn-popover .wfn-library-search .ui-input {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: var(--openbot-text-sm);
}

.wfn-popover .wfn-library-search .ui-input:focus-visible {
  outline: none;
  box-shadow: none;
}

/* The scroll area: the shared fades mask its edges, and the native bar gives way to the thumb. */
.wfn-scroll {
  position: relative;
}

.wfn-library-scroll {
  max-height: 280px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.wfn-library-scroll::-webkit-scrollbar {
  display: none;
}

.wfn-library-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--openbot-space-2);
}

.wfn-library-empty {
  margin: 0;
  padding: var(--openbot-space-6) var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-align: center;
  text-wrap: pretty;
}

/* The thumb sits in the popover padding, so it never covers a tile. The track is 12px for the pointer. */
.wfn-scroll-track {
  position: absolute;
  top: 0;
  right: calc(-1 * var(--openbot-space-3));
  bottom: 0;
  width: var(--openbot-space-3);
}

.wfn-scroll-thumb {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--openbot-space-1);
  border-radius: var(--openbot-radius-pill);
  background: color-mix(in srgb, var(--openbot-text-primary) 24%, transparent);
  opacity: 0;
  transition-property: opacity, width, background-color;
  transition-duration: var(--openbot-duration-fast);
  transition-timing-function: var(--openbot-ease-out);
}

.wfn-scroll:is(:hover, :focus-within) .wfn-scroll-thumb,
.wfn-scroll-track[data-dragging] .wfn-scroll-thumb {
  opacity: 1;
}

.wfn-scroll-track:hover .wfn-scroll-thumb,
.wfn-scroll-track[data-dragging] .wfn-scroll-thumb {
  width: var(--openbot-space-1-5);
  background: color-mix(in srgb, var(--openbot-text-primary) 40%, transparent);
}

/* One full column: a short name must not shrink the thumb. */
.wfn-popover .wfn-library-tile {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--openbot-space-1);
  height: auto;
  padding: var(--openbot-space-1);
  border-radius: var(--openbot-radius-md);
  text-align: start;
}

.wfn-popover .wfn-library-tile[aria-pressed="true"] {
  box-shadow: inset 0 0 0 1px var(--openbot-text-primary);
}

/* An inset ring, so the scroll area does not clip it, in the text colour and not the accent. */
.wfn-popover .wfn-library-tile:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--openbot-text-primary) 40%, transparent);
}

.wfn-popover .wfn-library-tile[aria-pressed="true"]:focus-visible {
  box-shadow: inset 0 0 0 2px var(--openbot-text-primary);
}

.wfn-library-thumb {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--openbot-radius-sm);
  background: var(--wfn-hover);
}

.wfn-library-name {
  overflow: hidden;
  color: var(--openbot-text-secondary);
  font-size: var(--wfn-small);
  font-weight: var(--openbot-weight-regular);
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .wfn-overlay {
    translate: 0 0;
  }
}

/* ---------------------------------------------------------- Connections */

.wfn-stage :is(.wfn-node, .wfn-text) {
  z-index: 1;
}

.wfn-edges {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: visible;
  pointer-events: none;
}

.wfn-edge {
  --wfn-edge: color-mix(in srgb, var(--openbot-text-primary) 32%, transparent);

  color: var(--wfn-edge);
}

.wfn-edge[data-tone="done"] {
  --wfn-edge: color-mix(in srgb, var(--openbot-text-primary) 60%, transparent);
}

.wfn-edge[data-tone="run"] {
  --wfn-edge: color-mix(in srgb, var(--openbot-text-primary) 72%, transparent);
}

/* A selected edge is solid and bright, like the selected node ring. */
.wfn-edge[data-selected] {
  --wfn-edge: var(--openbot-text-primary);
}

.wfn-edge[data-removing] {
  --wfn-edge: var(--openbot-danger);
}

.wfn-edge-line,
.wfn-edge-comet,
.wfn-edge-draft {
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
}

/* A connected edge is a thin dashed line, as on the Higgsfield canvas. */
.wfn-edge-line {
  stroke-width: 1.5;
  stroke-dasharray: 5 5;
  transition: color var(--openbot-duration-hover) var(--openbot-ease-out);
}

.wfn-edge:is([data-tone="done"], [data-selected]) .wfn-edge-line {
  stroke-dasharray: none;
}

.wfn-edge[data-motion] .wfn-edge-line {
  animation: wfn-march 1.2s linear infinite;
}

.wfn-edge:is([data-tone="done"], [data-selected]) .wfn-edge-line {
  animation: none;
}

@keyframes wfn-march {
  to {
    stroke-dashoffset: -10;
  }
}

/* The comet carries the answer of a done step into the step that runs now. */
.wfn-edge-comet {
  stroke: var(--openbot-text-primary);
  stroke-width: 3;
  stroke-dasharray: 0.12 1;
  animation: wfn-comet 1.1s var(--openbot-ease-out) infinite;
}

@keyframes wfn-comet {
  from {
    stroke-dashoffset: 0.12;
  }

  to {
    stroke-dashoffset: -1;
  }
}

.wfn-edge-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 14;
  pointer-events: stroke;
  cursor: pointer;
}

.wfn-edge-draft {
  color: var(--openbot-text-muted);
  stroke-width: 2;
  stroke-dasharray: 5 5;
  transition: color var(--openbot-duration-hover) var(--openbot-ease-out);
}

/* On a port that can take it, the line snaps to the port and turns solid. */
.wfn-edge-draft[data-state="ok"] {
  color: var(--openbot-text-primary);
  stroke-dasharray: none;
}

.wfn-edge-draft[data-state="refused"] {
  color: var(--openbot-danger);
}

/* A line back to an earlier node can end here too: it makes a loop. */
.wfn-edge-draft[data-state="loop"] {
  color: var(--openbot-warning);
  stroke-dasharray: none;
}

/*
 * Why the line cannot end here, or that it makes a loop, next to the pointer. It keeps its screen
 * size at every zoom.
 */
.wfn-draft-reason {
  position: absolute;
  z-index: 3;
  padding: 2px var(--openbot-space-2);
  border-radius: var(--openbot-radius-sm);
  background: var(--wfn-card);
  box-shadow: 0 0 0 1px var(--openbot-danger-border);
  color: var(--openbot-danger-text);
  font-size: var(--openbot-text-sm);
  white-space: nowrap;
  pointer-events: none;
  transform-origin: 0 0;
  translate: calc(14px / var(--wfn-scale, 1)) calc(14px / var(--wfn-scale, 1));
  scale: calc(1 / var(--wfn-scale, 1));
}

.wfn-draft-reason[data-tone="loop"] {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--openbot-warning) 45%, transparent);
  color: var(--openbot-warning-text);
}

/*
 * The remove button of a connection sits on the line at the point nearest to the pointer, and keeps
 * its screen size at every zoom. It takes the danger colour, and so does the line while the pointer is on it.
 */
.wfn-edge-actions {
  position: absolute;
  z-index: 2;
  display: flex;
  transform-origin: 0 0;
  translate: calc(-50% / var(--wfn-scale, 1)) calc(-50% / var(--wfn-scale, 1));
  scale: calc(1 / var(--wfn-scale, 1));
}

.wfn-stage .wfn-edge-actions .wfn-edge-remove {
  border-radius: var(--openbot-radius-pill);
  background: color-mix(in srgb, var(--openbot-danger) 14%, var(--wfn-card));
  box-shadow: 0 0 0 1px var(--openbot-danger-border);
  color: var(--openbot-danger-text);
  opacity: 1;
  scale: 1;
  transition-property: opacity, scale, background-color;
  transition-duration: var(--openbot-duration-fast);
  transition-timing-function: var(--openbot-ease-out);
}

.wfn-stage .wfn-edge-actions .wfn-edge-remove:hover {
  background: color-mix(in srgb, var(--openbot-danger) 28%, var(--wfn-card));
  color: var(--openbot-danger-text);
}

@starting-style {
  .wfn-stage .wfn-edge-actions .wfn-edge-remove {
    opacity: 0;
    scale: 0.6;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wfn-stage .wfn-edge-actions .wfn-edge-remove {
    transition: none;
  }
}

/* A connected port stays visible; while you connect, the ports that cannot take the line dim. */
.wfn-stage .wfn-port[data-connected] {
  opacity: 1;
}

.wfn-stage .wfn-port:is([data-armed], [data-target]) {
  background: var(--openbot-text-primary);
  color: var(--openbot-bg-canvas);
  opacity: 1;
}

.wfn-stage .wfn-port[data-dim] {
  opacity: 0.25;
}

.wfn-stage .wfn-port[data-refused] {
  background: var(--openbot-danger);
  color: var(--openbot-text-primary);
  opacity: 1;
}

/* A hidden port waits at half size, so it grows in when it shows, as on Higgsfield. */
.wfn-stage
  .wfn-node:not(:hover, :focus-within, [data-selected])
  .wfn-port:not([data-connected], [data-armed], [data-target], [data-dim], [data-refused], [data-missing]) {
  scale: 0.5;
}

/*
 * A step that runs: a faint ring, and a bright arc that goes round the edge of the card, as a comet
 * goes along an edge. The arc is a conic gradient in a 1px frame over the ring; it has no glow.
 */
.wfn-node[data-status="running"] .wfn-card {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--openbot-text-primary) 16%, transparent);
}

.wfn-node[data-status="running"] .wfn-card-frame::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: -1.5px;
  padding: 1.5px;
  /* Resolved here, so the ring follows the card radius of each node size. */
  --wfn-radius-ring: calc(var(--wfn-radius-card) + 1.5px);
  border-radius: var(--wfn-radius-ring);
  background: conic-gradient(
    from var(--wfn-sweep),
    transparent 0turn 0.45turn,
    color-mix(in srgb, var(--openbot-text-primary) 24%, transparent) 0.72turn,
    color-mix(in srgb, var(--openbot-text-primary) 72%, transparent) 0.9turn,
    var(--openbot-text-primary) 0.985turn,
    transparent 1turn
  );
  mask:
    linear-gradient(var(--openbot-text-primary) 0 0) content-box,
    linear-gradient(var(--openbot-text-primary) 0 0);
  mask-composite: exclude;
  pointer-events: none;
  animation: wfn-sweep 1.6s linear infinite;
}

@property --wfn-sweep {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0turn;
}

@keyframes wfn-sweep {
  to {
    --wfn-sweep: 1turn;
  }
}

/* The time of the run, at the end of the label row. When the run ends, it fades out after a moment. */
.wfn-run-time {
  display: inline-flex;
  gap: var(--openbot-space-1);
  align-items: center;
  margin-inline-start: auto;
  color: var(--openbot-text-secondary);
  font-weight: var(--openbot-weight-medium);
  font-variant-numeric: tabular-nums;
  transition: opacity var(--openbot-duration-hover) var(--openbot-ease-out);

  @starting-style {
    opacity: 0;
  }
}

.wfn-run-time[data-done] {
  color: var(--openbot-success-text);
  animation: wfn-run-time-out 1.8s var(--openbot-ease-out) forwards;
}

/* A failed step keeps its mark until it runs again. */
.wfn-run-time[data-failed] {
  color: var(--openbot-danger-text);
}

@keyframes wfn-run-time-out {
  0%,
  70% {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/* Lines that pulse in the result field stand for the result that the run makes. Each line takes the
   height of one line of text (8 + 8 = 16 px), so a result of three lines does not change the size of
   the card. */
.wfn-result-pending {
  display: grid;
  gap: var(--openbot-space-2);
  padding-block: var(--openbot-space-1);
}

.wfn-result-pending .ui-skeleton {
  min-height: var(--openbot-space-2);
  background: color-mix(in srgb, var(--openbot-text-primary) 9%, transparent);
}

.wfn-result-pending .ui-skeleton:nth-child(2) {
  width: 88%;
  animation-delay: 120ms;
}

.wfn-result-pending .ui-skeleton:nth-child(3) {
  width: 56%;
  animation-delay: 240ms;
}

/* When there is a last result, the lines cover it and it keeps its space. */
.wfn-result-body {
  position: relative;
}

.wfn-result-body[data-running] p {
  visibility: hidden;
}

.wfn-result-body p + .wfn-result-pending {
  position: absolute;
  inset: 0;
  align-content: start;
  overflow: hidden;
}

/* An image step that runs: a soft light goes across the picture, or across the empty frame. */
.wfn-node[data-status="running"] .wfn-card[data-media]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 30%,
    color-mix(in srgb, var(--openbot-text-primary) 12%, transparent) 50%,
    transparent 70%
  );
  background-size: 250% 100%;
  pointer-events: none;
  animation: wfn-sheen 1.4s var(--openbot-ease-in-out) infinite;
}

@keyframes wfn-sheen {
  from {
    background-position: 100% 0;
  }

  to {
    background-position: 0% 0;
  }
}

/* --------------------------------------------------------------- Canvas */

/* The spring goes a little past its end and comes back. The palette has no spring ease. */
.wfn-art-layer {
  --wfn-art-spring: cubic-bezier(0.34, 1.35, 0.64, 1);
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transition-property: rotate, translate, scale, opacity;
  transition-duration: var(--openbot-duration-slow);
  transition-timing-function: var(--wfn-art-spring);
}

.wfn-art-color {
  fill: var(--wfn-art-color);
}

.wfn-art-face-light {
  fill: var(--wfn-art-light);
}

.wfn-art-face-dark {
  fill: var(--wfn-art-dark);
}

.wfn-art-gloss {
  fill: color-mix(in srgb, var(--openbot-paper) 55%, transparent);
}

.wfn-art-wood {
  fill: var(--wfn-art-wood-color);
}

.wfn-art-wood-shade {
  fill: color-mix(in srgb, var(--wfn-art-wood-color) 84%, var(--openbot-paper-text));
}

.wfn-art-rubber {
  fill: var(--openbot-file-pink);
}

.wfn-art-rubber-shade {
  fill: color-mix(in srgb, var(--openbot-file-pink) 80%, var(--openbot-paper-text));
}

.wfn-art-metal {
  fill: var(--wfn-art-metal-color);
}

.wfn-art-metal-groove {
  fill: color-mix(in srgb, var(--wfn-art-metal-color) 70%, var(--openbot-paper-text));
}

.wfn-art-tint-back {
  fill: color-mix(in srgb, var(--wfn-art-base) 36%, var(--wfn-card));
}

.wfn-art-tint-middle {
  fill: color-mix(in srgb, var(--wfn-art-base) 62%, var(--wfn-card));
}

.wfn-art-curl {
  fill: var(--wfn-art-light);
}

.wfn-art-stop-light {
  stop-color: var(--wfn-art-light);
}

.wfn-art-stop-color {
  stop-color: var(--wfn-art-base);
}

.wfn-art-stop-edge {
  stop-color: color-mix(in srgb, var(--openbot-paper) 70%, transparent);
}

.wfn-art-stop-clear {
  stop-color: transparent;
}

/* A cut in the bar colour around each layer keeps the layers apart without a shadow. */
.wfn-art-cut {
  stroke: color-mix(in srgb, var(--openbot-bg-surface-raised) 75%, var(--wfn-card));
  stroke-width: 2;
  stroke-linejoin: round;
  paint-order: stroke;
}

.wfn-art-edge {
  fill: none;
  stroke-width: 0.8;
  stroke-linejoin: round;
}

/* The pen and the eraser change places with a small zoom, as the icon of the other mode. */
.wfn-tool-art [data-layer="eraser"],
.wfn-tool-art[data-eraser] [data-layer="pen"] {
  opacity: 0;
  scale: 0.25;
}

.wfn-tool-art[data-eraser] [data-layer="eraser"] {
  opacity: 1;
  scale: 1;
}

/* At rest the layers at the back turn a little, so the stack reads as a stack. */
.wfn-tool-art [data-layer="back"] {
  rotate: -10deg;
}

.wfn-tool-art [data-layer="middle"] {
  rotate: 6deg;
}

.wfn-menu :is([role="menuitem"], [role="menuitemcheckbox"]) .wfn-keys {
  margin-inline-start: auto;
  padding-inline-start: var(--openbot-space-4);
}

/* ------------------------------------------------------------ Minimap */

/* Shortcut keys, in tooltips and in menus. */
.wfn-keys {
  display: inline-flex;
  gap: 2px;
  align-items: center;
}

.wfn-keys .ui-kbd {
  min-width: 18px;
  height: 18px;
  border: 0;
  background: var(--wfn-hover);
  color: var(--openbot-text-muted);
  font-family: inherit;
  font-size: var(--wfn-small);
}

.wfn-hint {
  display: inline-flex;
  gap: var(--openbot-space-2);
  align-items: center;
}

/* The canvas tooltips have the 1px ring of the HUD and no shadow. */
.ui-tooltip.wfn-tooltip {
  border-radius: var(--openbot-radius-md);
  box-shadow: 0 0 0 1px var(--openbot-border-strong);
  font-weight: var(--openbot-weight-medium);
}

.ui-tooltip.wfn-tooltip:has(.wfn-keys) {
  padding-inline-end: var(--openbot-space-1-5);
}

/* The results of the selected step, oldest first, under its card, as on the Higgsfield canvas. The
 * result on view is larger and has a full ring in the colour of its kind. The strip keeps its screen
 * size at every zoom, as the selection frame does. */
.wfn-strip {
  position: absolute;
  top: calc(100% + 8px / var(--wfn-scale, 1));
  left: round(50%, 1px);
  transform-origin: top center;
  scale: calc(1 / var(--wfn-scale, 1));
  z-index: 2;
  display: flex;
  gap: var(--openbot-space-1);
  align-items: center;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--openbot-text-secondary);
  translate: calc(round(-50%, 1px) + var(--wfn-snap-x, 0px) / var(--wfn-scale, 1))
    calc(var(--wfn-snap-y, 0px) / var(--wfn-scale, 1));
}

/* Seven results fit. More scroll, and the arrows move through all of them. */
.wfn-strip-list {
  display: flex;
  gap: var(--openbot-space-1-5);
  align-items: center;
  max-width: calc(7 * 36px + 6 * var(--openbot-space-1-5) + 16px);
  height: 52px;
  overflow-x: auto;
  padding: 0 var(--openbot-space-1);
  scrollbar-width: none;
}

.wfn-strip-item {
  --wfn-strip-size: 36px;

  display: grid;
  flex: none;
  place-items: center;
  width: var(--wfn-strip-size);
  height: var(--wfn-strip-size);
  overflow: hidden;
  padding: 2px;
  border: 2px solid color-mix(in srgb, var(--wfn-kind) 40%, transparent);
  border-radius: var(--openbot-radius-pill);
  background: var(--wfn-glass);
  color: var(--openbot-text-secondary);
  font-size: var(--wfn-small);
  font-variant-numeric: tabular-nums;
  font-weight: var(--openbot-weight-semibold);
  cursor: pointer;
  backdrop-filter: var(--wfn-glass-blur);
  transition-property: width, height, border-color, color, scale;
  transition-duration: var(--openbot-duration-fast);
  transition-timing-function: var(--openbot-ease-out);
}

.wfn-strip-item:hover {
  border-color: color-mix(in srgb, var(--wfn-kind) 72%, transparent);
  color: var(--openbot-text-primary);
}

.wfn-strip-item[aria-pressed="true"] {
  --wfn-strip-size: 44px;

  border-color: var(--wfn-kind);
  color: var(--openbot-text-primary);
}

.wfn-strip-item:active {
  scale: 0.96;
}

.wfn-strip-item:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--openbot-text-primary) 40%, transparent);
  outline-offset: 1px;
}

.wfn-strip-item img {
  width: 100%;
  height: 100%;
  border-radius: var(--openbot-radius-pill);
  object-fit: cover;
}

/* A failed run has no result, so its item shows a cross in place of an image or a number. */
.wfn-strip-item[data-failed] {
  color: var(--openbot-danger-text);
}

.wfn-strip-failed {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

:is(.wfn-menu-icon, .wfn-picker-tile, .wfn-node, .wfn-minimap-node)[data-kind="text"] {
  --wfn-kind: var(--openbot-file-teal);
}

:is(.wfn-menu-icon, .wfn-picker-tile, .wfn-node, .wfn-minimap-node)[data-kind="prompt"] {
  --wfn-kind: var(--openbot-file-blue);
}

:is(.wfn-menu-icon, .wfn-picker-tile, .wfn-node, .wfn-minimap-node)[data-kind="asset"] {
  --wfn-kind: var(--openbot-file-orange);
}

:is(.wfn-menu-icon, .wfn-picker-tile, .wfn-node, .wfn-minimap-node)[data-kind="llm"] {
  --wfn-kind: var(--openbot-chart-storage-downloads);
}

:is(.wfn-menu-icon, .wfn-picker-tile, .wfn-node, .wfn-minimap-node)[data-kind="agent"] {
  --wfn-kind: var(--openbot-file-green);
}

:is(.wfn-menu-icon, .wfn-picker-tile, .wfn-node, .wfn-minimap-node)[data-kind="image"] {
  --wfn-kind: var(--openbot-file-pink);
}

@media (prefers-reduced-motion: reduce) {
  /* The arc stops and becomes a full ring; the light on an image stays at the centre. */
  .wfn-node[data-status="running"] .wfn-card-frame::before {
    background: color-mix(in srgb, var(--openbot-text-primary) 56%, transparent);
    animation: none;
  }

  .wfn-node[data-status="running"] .wfn-card[data-media]::after {
    background-position: 50% 0;
    animation: none;
  }

  .wfn-run-time[data-done] {
    animation: none;
  }
}

/* ------------------------------------------------------------ Selection */

.wfn-card-frame {
  position: relative;
  display: grid;
}

/*
 * Selection is a neutral ring 3px outside the card, not a colour: the kind colours and the run ring
 * keep their meaning. An outline follows the card radius, so the ring stays concentric. The canvas
 * sets --wfn-scale, so the ring and the grip keep their size at every zoom.
 */
.wfn-node {
  --wfn-select-line: calc(1.5px / var(--wfn-scale, 1));
  --wfn-select-gap: calc(3px / var(--wfn-scale, 1));
}

/* A height that changes at once, as a reset or an undo, eases to its place, as the width does. */
.wfn-node .wfn-card {
  outline: var(--wfn-select-line) solid transparent;
  outline-offset: var(--wfn-select-gap);
  transition-property: box-shadow, outline-color, min-height, height;
  transition-duration:
    var(--openbot-duration-hover), var(--openbot-duration-hover), var(--openbot-duration-slow),
    var(--openbot-duration-slow);
  transition-timing-function: var(--openbot-ease-out);
}

.wfn-node:not([data-selected]) .wfn-card-frame:hover .wfn-card {
  box-shadow: 0 0 0 1px var(--wfn-ring-strong);
}

.wfn-node[data-selected] .wfn-card {
  outline-color: color-mix(in srgb, var(--openbot-text-primary) 40%, transparent);
}

.wfn-text {
  --wfn-select-line: calc(1px / var(--wfn-scale, 1));
  --wfn-select-gap: calc(4px / var(--wfn-scale, 1));
}

.wfn-text[data-selected] .wfn-text-input {
  outline: var(--wfn-select-line) solid color-mix(in srgb, var(--openbot-text-primary) 32%, transparent);
  outline-offset: var(--wfn-select-gap);
}

/*
 * The resize grips: every corner and side resizes, but only the bottom-right corner shows a mark, a
 * short arc on the ring, concentric with the card (card radius + gap). So the card edge stays calm.
 */
.wfn-grip {
  --wfn-grip-size: calc(18px / var(--wfn-scale, 1));
  --wfn-grip-line: calc(3px / var(--wfn-scale, 1));
  --wfn-grip-out: calc(var(--wfn-select-gap) + var(--wfn-select-line) / 2 + var(--wfn-grip-line) / 2);
  --wfn-grip-radius: calc(var(--wfn-radius-card) + var(--wfn-grip-out));
  --wfn-grip-arc: var(--wfn-grip-line) solid var(--wfn-grip-color, transparent);
  /* The band of a side, centred on the selection ring. */
  --wfn-grip-band: calc(12px / var(--wfn-scale, 1));
  --wfn-grip-band-out: calc(var(--wfn-grip-out) * -1 - var(--wfn-grip-band) / 2);

  position: absolute;
  z-index: 2;
  box-sizing: border-box;
  width: var(--wfn-grip-size);
  height: var(--wfn-grip-size);
  transition: border-color var(--openbot-duration-fast) var(--openbot-ease-out);
}

/* A larger target than the arc. */
.wfn-grip::after {
  position: absolute;
  inset: calc(-6px / var(--wfn-scale, 1));
  content: "";
}

/* The top corners and the bottom-left corner have no mark: the cursor shows the resize. */
.wfn-grip[data-corner="nw"] {
  top: calc(var(--wfn-grip-out) * -1);
  left: calc(var(--wfn-grip-out) * -1);
}

.wfn-grip[data-corner="ne"] {
  top: calc(var(--wfn-grip-out) * -1);
  right: calc(var(--wfn-grip-out) * -1);
}

.wfn-grip[data-corner="se"] {
  right: calc(var(--wfn-grip-out) * -1);
  bottom: calc(var(--wfn-grip-out) * -1);
  border-right: var(--wfn-grip-arc);
  border-bottom: var(--wfn-grip-arc);
  border-bottom-right-radius: var(--wfn-grip-radius);
}

.wfn-grip[data-corner="sw"] {
  bottom: calc(var(--wfn-grip-out) * -1);
  left: calc(var(--wfn-grip-out) * -1);
}

/* A side has no mark: the selection ring is the edge, and the cursor shows the resize. */
.wfn-grip[data-side] {
  z-index: 1;
  width: auto;
  height: auto;
}

.wfn-grip[data-side]::after {
  display: none;
}

.wfn-grip:is([data-corner="n"], [data-corner="s"]) {
  right: var(--wfn-grip-size);
  left: var(--wfn-grip-size);
  height: var(--wfn-grip-band);
}

.wfn-grip:is([data-corner="e"], [data-corner="w"]) {
  top: var(--wfn-grip-size);
  bottom: var(--wfn-grip-size);
  width: var(--wfn-grip-band);
}

.wfn-grip[data-corner="n"] {
  top: var(--wfn-grip-band-out);
}

.wfn-grip[data-corner="s"] {
  bottom: var(--wfn-grip-band-out);
}

.wfn-grip[data-corner="e"] {
  right: var(--wfn-grip-band-out);
}

.wfn-grip[data-corner="w"] {
  left: var(--wfn-grip-band-out);
}

/* The ports sit over the side bands, so a press on a port connects and does not resize. */
.wfn-ports {
  z-index: 1;
}

/* A text node is small and has no card, so its ring and grip are lighter and shorter. */
.wfn-text .wfn-grip {
  --wfn-grip-size: calc(12px / var(--wfn-scale, 1));
  --wfn-grip-line: calc(2px / var(--wfn-scale, 1));
  --wfn-grip-radius: calc(var(--openbot-radius-sm) + var(--wfn-grip-out));
}

.wfn-node:is(:hover, [data-selected]) .wfn-grip {
  --wfn-grip-color: color-mix(in srgb, var(--openbot-text-primary) 32%, transparent);
}

.wfn-node[data-selected] .wfn-grip,
.wfn-node[data-resizing] .wfn-grip,
.wfn-grip:hover {
  --wfn-grip-color: var(--openbot-text-primary);
}

/*
 * While a Delete control points at nodes, or the confirmation is open, the nodes that go have a danger
 * ring, and their connections take it too.
 */
.wfn-node[data-doomed] .wfn-card {
  outline-color: var(--openbot-danger);
}

.wfn-text[data-doomed] .wfn-text-input {
  outline: var(--wfn-select-line) solid var(--openbot-danger);
  outline-offset: var(--wfn-select-gap);
}

.wfn-node[data-doomed] .wfn-grip {
  --wfn-grip-color: var(--openbot-danger);
}

.wfn-grip[data-cursor="ew"] {
  cursor: ew-resize;
}

.wfn-grip[data-cursor="ns"] {
  cursor: ns-resize;
}

.wfn-grip[data-cursor="nwse"] {
  cursor: nwse-resize;
}

.wfn-grip[data-cursor="nesw"] {
  cursor: nesw-resize;
}

/* A step with a height that the user set gives the extra room to its task. */
.wfn-node[data-height] .wfn-card:has(> .wfn-field-task) {
  grid-template-rows: 1fr;
}

/* A locked node shows a lock after its label and takes no drag. */
.wfn-node[data-locked] :is(.wfn-label, .wfn-card) {
  cursor: default;
}

.wfn-lock-badge {
  display: inline-flex;
  color: var(--openbot-text-muted);
}

.wfn-lock-badge svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}

.wfn-text[data-sized] .wfn-text-input {
  width: 100%;
}

/* The ring of a selected node shows the focus from the keyboard too. */
.wfn-node:focus-visible {
  outline: none;
}

.wfn-node:not(.wfn-text):focus-visible:not([data-selected]) .wfn-card {
  outline-color: color-mix(in srgb, var(--openbot-text-primary) 40%, transparent);
}

/* ------------------------------------------------------------ Run status */

.wfn-hud-spin {
  animation: wfn-spin 1s linear infinite;
}

@keyframes wfn-spin {
  to {
    rotate: 360deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wfn-hud-spin {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wfn-art-layer {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wfn-node,
  .wfn-node .wfn-card,
  .wfn-stage .wfn-port,
  .wfn-grip {
    transition: none;
  }
}

/* ---------------------------------------------------------- Scroll fades */

/*
 * Content that scrolls fades out at an edge where more of it is. Each fade grows over the first or the
 * last fade size of the scroll, so an edge at the start or the end stays sharp. The ranges are lengths,
 * not parts of the scroll range: content that fits gets no fade, also where the engine puts a timeline
 * with no scroll range at its end. A browser without scroll timelines shows no fade: there the animation
 * runs on the clock, ends at once, and keeps the start fade on content that does not scroll.
 */
@property --wfn-fade-start {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --wfn-fade-end {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@supports (animation-timeline: scroll()) {
  .wfn-node :is(textarea, .wfn-field-result p),
  .wfn-strip-list {
    --wfn-fade-size: var(--openbot-space-4);
    --wfn-fade-side: to bottom;

    mask-image: linear-gradient(
      var(--wfn-fade-side),
      transparent,
      var(--openbot-text-primary) var(--wfn-fade-start),
      var(--openbot-text-primary) calc(100% - var(--wfn-fade-end)),
      transparent
    );
    animation:
      wfn-fade-start linear both,
      wfn-fade-end linear both;
    animation-timeline: scroll(self block), scroll(self block);
    animation-range:
      0 var(--wfn-fade-size),
      calc(100% - var(--wfn-fade-size)) 100%;
  }

  .wfn-strip-list {
    --wfn-fade-size: var(--openbot-space-6);
    --wfn-fade-side: to right;

    animation-timeline: scroll(self inline), scroll(self inline);
  }
}

@keyframes wfn-fade-start {
  from {
    --wfn-fade-start: 0px;
  }

  to {
    --wfn-fade-start: var(--wfn-fade-size);
  }
}

@keyframes wfn-fade-end {
  from {
    --wfn-fade-end: var(--wfn-fade-size);
  }

  to {
    --wfn-fade-end: 0px;
  }
}

/* ---------------------------------------------------------------- Size */

.wfn-node[data-kind="trigger"],
.wfn-node[data-kind="output"] {
  --wfn-width: 280px;
}

.wfn-node[data-kind="condition"],
.wfn-node[data-kind="approval"] {
  --wfn-width: 300px;
}

.wfn-node[data-kind="note"] {
  --wfn-width: 240px;
  --wfn-height: 240px;
}

/* The edge of a rectangle, the selection ring and the resize arc share one radius, so they stay
 * concentric. */
.wfn-node[data-kind="shape"] {
  --wfn-width: 208px;
  --wfn-height: 128px;
  --wfn-radius-card: var(--openbot-radius-md);
}

/* --------------------------------------------------------------- Kinds */

:is(.wfn-menu-icon, .wfn-picker-tile, .wfn-node, .wfn-minimap-node)[data-kind="trigger"] {
  --wfn-kind: var(--openbot-file-yellow);
}

:is(.wfn-menu-icon, .wfn-picker-tile, .wfn-node, .wfn-minimap-node)[data-kind="condition"] {
  --wfn-kind: var(--openbot-chart-series-codex);
}

:is(.wfn-menu-icon, .wfn-picker-tile, .wfn-node, .wfn-minimap-node)[data-kind="output"] {
  --wfn-kind: var(--openbot-chart-storage-workspaces);
}

:is(.wfn-menu-icon, .wfn-picker-tile, .wfn-node, .wfn-minimap-node)[data-kind="approval"] {
  --wfn-kind: var(--openbot-chart-storage-files);
}

:is(.wfn-menu-icon, .wfn-picker-tile, .wfn-node, .wfn-minimap-node)[data-kind="note"] {
  --wfn-kind: var(--openbot-file-yellow);
}

:is(.wfn-menu-icon, .wfn-picker-tile, .wfn-node, .wfn-minimap-node)[data-kind="shape"] {
  --wfn-kind: var(--openbot-text-secondary);
}

/* -------------------------------------------------------------- Fields */

/* A pill alone on its row keeps its own width. */
.wfn-stage .wfn-block-field > .wfn-pill {
  justify-self: start;
}

.wfn-block-field > .wfn-field-foot {
  justify-content: flex-start;
}

/* The model of a condition starts its row, and the effort ends it, as in an LLM step. */
.wfn-block-field > .wfn-condition-foot {
  justify-content: space-between;
}

.wfn-block-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--openbot-space-2);
}

/* -------------------------------------------------------- Setting rows */

.wfn-github-mark {
  flex: none;
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  fill: currentcolor;
}

/* The settings of a card: a list of full-width rows on the field colour. */
.wfn-settings {
  --wfn-settings-gap: 2px;

  display: grid;
  gap: var(--wfn-settings-gap);
  padding: var(--openbot-space-1);
  border-radius: var(--openbot-radius-md);
  background: var(--wfn-field);
}

/* The type or target is the first row; its settings follow under a hairline. The margin less the grid gap
   puts the hairline midway between two rows. */
.wfn-settings-head:not(:last-child) {
  padding-bottom: var(--openbot-space-1);
  border-bottom: 1px solid var(--wfn-ring);
  margin-bottom: calc(var(--openbot-space-1) - var(--wfn-settings-gap));
}

/* The last event closes the settings under a hairline. */
.wfn-settings-foot {
  padding-top: var(--openbot-space-1);
  border-top: 1px solid var(--wfn-ring);
  margin-top: calc(var(--openbot-space-1) - var(--wfn-settings-gap));
}

.wfn-settings > .ui-button {
  justify-self: start;
  margin: var(--openbot-space-1);
}

.wfn-settings > .wfn-alert {
  margin: var(--openbot-space-1);
}

/* A control of its own layout among the rows, such as the schedule picker or a webhook secret. */
.wfn-settings-block {
  padding: var(--openbot-space-1) var(--openbot-space-2);
}

.wfn-row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  gap: var(--openbot-space-2);
  align-items: center;
  width: 100%;
  min-height: 36px;
  padding: var(--openbot-space-1) var(--openbot-space-2);
  border: 0;
  border-radius: var(--wfn-radius-row);
  background: transparent;
  color: var(--openbot-text-primary);
  font: inherit;
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--openbot-duration-hover) var(--openbot-ease-out);
}

.wfn-row:not([data-static]):is(:hover, [aria-expanded="true"]) {
  background: var(--wfn-hover);
}

.wfn-row:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--wfn-ring-strong);
}

.wfn-row[data-static] {
  cursor: default;
}

.wfn-row:disabled {
  cursor: default;
  opacity: 0.6;
}

.wfn-row-name {
  color: var(--openbot-text-muted);
}

.wfn-row-value {
  display: flex;
  gap: var(--openbot-space-1-5);
  align-items: center;
  min-width: 0;
  font-weight: var(--openbot-weight-medium);
}

/* Tags wrap to more lines; one value ends with "…". */
.wfn-row-value:has(> .wfn-tag) {
  flex-wrap: wrap;
}

.wfn-row-value[data-empty] {
  color: var(--openbot-text-secondary);
  font-weight: var(--openbot-weight-regular);
}

.wfn-row-value > svg {
  flex: none;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-secondary);
}

.wfn-row-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wfn-row-arrow {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  color: var(--openbot-text-muted);
  transition: opacity var(--openbot-duration-hover) var(--openbot-ease-out);
}

/* A setting row shows its arrow on hover, so the values read as one column. The type row always shows it. */
:is(.wfn-settings, .wfn-settings-foot) > .wfn-row:not(:hover, :focus-visible, [aria-expanded="true"]) .wfn-row-arrow {
  opacity: 0;
}

/* The type row has no name: its icon sits on a tile of the kind colour, as in the add menu. */
.wfn-settings-head .wfn-row {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 40px;
}

.wfn-settings-head .wfn-row-value {
  font-weight: var(--openbot-weight-semibold);
}

.wfn-settings-head .wfn-row-name {
  display: none;
}

.wfn-settings-head .wfn-row-value > svg {
  box-sizing: content-box;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  padding: var(--openbot-space-1);
  border-radius: var(--openbot-radius-sm);
  background: color-mix(in srgb, var(--wfn-kind) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wfn-kind) 14%, transparent);
  color: var(--wfn-kind);
}

/* A row that the user types in: the field fills the value and arrow columns, with no border of its own. */
.wfn-row[data-input] {
  cursor: text;
}

.wfn-row[data-input]:focus-within {
  box-shadow: inset 0 0 0 1px var(--wfn-ring-strong);
}

.wfn-stage .wfn-row-input {
  grid-column: 2 / -1;
  min-width: 0;
  height: auto;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}

.wfn-stage .wfn-row-input:focus,
.wfn-stage .wfn-row-input:focus-visible {
  outline: none;
  box-shadow: none;
}

/* An address to copy, such as the URL of a webhook. */
.wfn-row-code {
  display: block;
  overflow: hidden;
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A value in a list row, such as a label. A GitHub label has its own colour on a tint of it. */
.wfn-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  min-width: 0;
  max-width: 100%;
  height: 22px;
  padding: 0 var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
  background: var(--wfn-hover);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  white-space: nowrap;
}

/* A long name ends with "…" inside its tag, so the tag stays in the value column. */
.wfn-tag-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.wfn-tag > svg {
  flex: none;
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}

/* A repository that sends no events. */
.wfn-tag[data-warning] {
  color: var(--openbot-warning-text);
}

.wfn-tag[data-tone] {
  background: color-mix(in srgb, var(--wfn-tone) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wfn-tone) 24%, transparent);
  color: color-mix(in srgb, var(--wfn-tone) 80%, var(--openbot-text-primary));
}

/* The colour of a label in its menu. */
.wfn-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--openbot-radius-pill);
  background: var(--wfn-tone);
}

/* A value with a count tag at its end, such as the events row: the text ends with "…", the tag stays. */
.wfn-row-value[data-one-line] {
  flex-wrap: nowrap;
}

.wfn-row-value[data-one-line] > .wfn-row-text {
  flex: 1 1 auto;
}

.wfn-row-value[data-one-line] > .wfn-tag {
  flex: none;
}

/* ------------------------------------------------------------ Branches */

/* Each branch row holds its output port on the right edge of the card, as a node holds its output. */
.wfn-branch {
  position: relative;
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
  min-height: var(--openbot-control-sm);
  padding: 0 var(--openbot-space-3);
  border-radius: var(--openbot-radius-md);
  background: var(--wfn-field);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  transition: opacity var(--openbot-duration-hover) var(--openbot-ease-out);
}

.wfn-branch[data-skipped] {
  opacity: 0.5;
}

.wfn-branch-check {
  display: inline-grid;
  margin-left: auto;
  color: var(--openbot-success);
}

.wfn-branch-check svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

.wfn-branch-port {
  position: absolute;
  top: 50%;
  left: calc(100% + var(--openbot-space-2) + 6px);
  translate: 0 -50%;
}

/* The name of a branch rides on its line, at the middle. */
.wfn-edge-label {
  position: absolute;
  z-index: 1;
  padding: 0 var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-pill);
  background: var(--wfn-card);
  box-shadow: 0 0 0 1px var(--wfn-ring-strong);
  color: var(--openbot-text-secondary);
  font-size: var(--wfn-small);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
  text-transform: capitalize;
  pointer-events: none;
  translate: -50% -50%;
}

/*
 * A loop shows where it goes back under its nodes. With no condition to end it, it takes the warning
 * colour: the run repeats it until the user stops the run.
 */
.wfn-edge-loop {
  position: absolute;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  padding: 0 var(--openbot-space-2) 0 var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-pill);
  background: var(--wfn-card);
  box-shadow: 0 0 0 1px var(--wfn-ring-strong);
  color: var(--openbot-text-secondary);
  font-size: var(--wfn-small);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
  white-space: nowrap;
  pointer-events: none;
  translate: -50% -50%;
}

.wfn-edge-loop svg {
  width: 0.875em;
  height: 0.875em;
}

.wfn-edge-loop[data-endless] {
  /* The soft warning is translucent, so the card under it hides the line. */
  background: linear-gradient(var(--openbot-warning-soft) 0 0), var(--wfn-card);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--openbot-warning) 45%, transparent);
  color: var(--openbot-warning-text);
}

/* ---------------------------------------------------------------- Note */

/*
 * A note is coloured paper, as on Higgsfield. The paper keeps the hue of the note colour at a fixed
 * lightness, so a note is the same pastel in the dark and the light theme, where the palette
 * darkens each colour for text. A 1px edge in a deeper tint frames it.
 */
:is(.wfn-node, .wfn-ghost)[data-kind="note"] {
  --wfn-note-paper: oklch(from var(--wfn-note) 0.88 calc(c * 0.5) h);
  --wfn-note-edge: oklch(from var(--wfn-note) 0.76 calc(c * 0.6) h);
}

.wfn-node[data-kind="note"] .wfn-card {
  grid-template-rows: minmax(0, 1fr) auto;
  align-content: stretch;
  height: var(--wfn-height);
  padding: var(--openbot-space-4) var(--openbot-space-4) var(--openbot-space-3);
  background: var(--wfn-note-paper);
  box-shadow: 0 0 0 1px var(--wfn-note-edge);
}

.wfn-stage .wfn-note-input {
  height: 100%;
  overflow-y: auto;
  color: var(--wfn-note-ink);
  font-size: var(--openbot-text-2xl);
  font-weight: var(--openbot-weight-medium);
  line-height: 1.35;
  text-wrap: pretty;
  field-sizing: fixed;
  scrollbar-width: none;
}

.wfn-stage .wfn-note-input::placeholder {
  color: var(--openbot-paper-text-dim);
}

.wfn-stage .wfn-note-input[data-font="mono"] {
  font-family: var(--openbot-font-mono);
}

.wfn-stage .wfn-note-input[data-text-size="lg"] {
  font-size: var(--openbot-text-lg);
}

.wfn-stage .wfn-note-input[data-text-size="3xl"] {
  font-size: var(--openbot-text-3xl);
  letter-spacing: var(--openbot-tracking-tight);
}

.wfn-stage .wfn-note-input[data-text-size="display"] {
  font-size: var(--openbot-text-display);
  line-height: 1.2;
  letter-spacing: var(--openbot-tracking-tight);
}

.wfn-stage .wfn-note-input[data-bold] {
  font-weight: var(--openbot-weight-bold);
}

.wfn-note-author {
  overflow: hidden;
  color: var(--openbot-paper-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
  white-space: nowrap;
  text-overflow: ellipsis;
  user-select: none;
}

/* The font menu shows each font in itself. */
.wfn-font-sample {
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
  line-height: 1;
}

.wfn-font-sample[data-font="mono"] {
  font-family: var(--openbot-font-mono);
}

.wfn-swatch {
  flex: none;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  border-radius: var(--openbot-radius-pill);
  background: var(--wfn-swatch);
  box-shadow: inset 0 0 0 1px var(--wfn-ring-strong);
}

/* -------------------------------------------------------------- States */

.wfn-alert {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: var(--openbot-space-1-5) var(--openbot-space-2) var(--openbot-space-1-5) var(--openbot-space-3);
  border-radius: var(--openbot-radius-md);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  transition: opacity var(--openbot-duration-hover) var(--openbot-ease-out);
}

.wfn-alert > svg {
  flex: none;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

.wfn-alert-text {
  display: -webkit-box;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

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

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

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

/* The last answer stays in its place while the step runs again, so the card does not change size. */
.wfn-alert[data-stale] {
  opacity: 0.5;
}

/* Before the first answer, a line that pulses holds the place of the answer at the same height. */
.wfn-alert[data-pending] {
  background: var(--wfn-field);
}

.wfn-alert[data-pending] .ui-skeleton {
  width: 64%;
  min-height: var(--openbot-space-2);
  margin-block: var(--openbot-space-1);
  background: color-mix(in srgb, var(--openbot-text-primary) 9%, transparent);
}

.wfn-stage .wfn-alert .ui-button {
  flex: none;
  color: inherit;
}

.wfn-node[data-status="approval"] .wfn-card {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--openbot-warning) 64%, transparent);
}

/* A required input with no line stays visible, in the colour of the other ports. */
.wfn-stage .wfn-port[data-missing]:not([data-target], [data-armed]) {
  opacity: 1;
}

/* An agent that the user deleted. */
.wfn-stage .wfn-pill[data-missing] {
  color: var(--openbot-warning-text);
}

.wfn-stage .wfn-pill[data-missing] > svg:first-child {
  color: inherit;
}

.wfn-pill-action {
  color: var(--openbot-text-muted);
}

/* ----------------------------------------------------------- Long text */

/* Long text scrolls inside its field, so the node keeps its layout. */
.wfn-stage :is(.wfn-field-task, .wfn-field-fill, .wfn-field-system, .wfn-block-field) .wfn-input {
  max-height: 200px;
  overflow-y: auto;
}

/* A card with a height that the user set gives all its room to the main field. */
.wfn-stage .wfn-node[data-height] :is(.wfn-field-task, .wfn-field-fill) .wfn-input {
  max-height: none;
}

.wfn-stage .wfn-pill > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wfn-stage .wfn-pill > :is(svg, .wfn-avatar) {
  flex: none;
}

/* --------------------------------------------------------------- Shape */

/* A shape has no label. The lock badge of a locked shape sits above its top-left corner. */
.wfn-label[data-bare] {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: var(--openbot-space-1-5);
}

.wfn-stage .wfn-node[data-kind="shape"] .wfn-card {
  grid-template-rows: none;
  align-content: center;
  place-items: center;
  height: var(--wfn-height);
  padding: var(--openbot-space-3);
  background: transparent;
  box-shadow: none;
}

/* The outline of the shape shows the hover, not the ring of the card. */
.wfn-stage .wfn-node[data-kind="shape"]:not([data-selected]) .wfn-card-frame:hover .wfn-card {
  box-shadow: none;
}

.wfn-shape-surface {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

span.wfn-shape-surface {
  border-radius: var(--wfn-radius-card);
  background: color-mix(in srgb, var(--wfn-shape) 16%, transparent);
  box-shadow: inset 0 0 0 2px var(--wfn-shape);
}

span.wfn-shape-surface:is([data-shape="circle"], [data-shape="oval"]) {
  border-radius: var(--openbot-radius-pill);
}

svg.wfn-shape-surface {
  fill: color-mix(in srgb, var(--wfn-shape) 16%, transparent);
  stroke: var(--wfn-shape);
  stroke-width: 2;
  stroke-linejoin: round;
}

/* In the light theme, ink is near the darkest tone. A Default shape takes a soft fill and a thinner edge there. */
:root[data-openbot-color-scheme="light"] span.wfn-shape-surface[data-color="ink"] {
  background: color-mix(in srgb, var(--wfn-shape) 5%, transparent);
  box-shadow: inset 0 0 0 1.5px var(--wfn-shape);
}

:root[data-openbot-color-scheme="light"] svg.wfn-shape-surface[data-color="ink"] {
  fill: color-mix(in srgb, var(--wfn-shape) 5%, transparent);
  stroke-width: 1.5;
}

/* The words sit at the centre of the shape, and the field grows with them. */
.wfn-stage .wfn-shape-input {
  position: relative;
  width: 100%;
  max-height: 100%;
  overflow: hidden;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
  text-align: center;
  field-sizing: content;
}

.wfn-shape-icon {
  flex: none;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

.wfn-stage .wfn-toolbar-select :is(.wfn-shape-icon, .wfn-swatch) {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-primary);
}

@media (prefers-reduced-motion: reduce) {
  .wfn-branch {
    transition: none;
  }
}

/* The emoji of a Discord or Telegram reaction, in the place of an icon. */
.wfn-emoji {
  display: inline-flex;
  flex: none;
  justify-content: center;
  width: var(--openbot-icon-xs);
}

/* ------------------------------------------------------------ Presence */

/*
 * Another person's cursor: a soft arrowhead with a notch, and a name in the colour of the person's
 * avatar. A ring in paper colour keeps both apart from any canvas or node under them. It is in world
 * pixels, so it pans and zooms with the canvas, and it keeps its screen size at every zoom, as the
 * remove button of a connection does. The cursor eases between two places from the presence feed.
 */
.wfn-peer-cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  display: flex;
  width: max-content;
  align-items: flex-start;
  pointer-events: none;
  transform-origin: 0 0;
  scale: calc(1 / var(--wfn-scale, 1));
  transition:
    translate var(--wfn-peer-feed) var(--wfn-peer-ease, linear),
    opacity var(--openbot-duration-normal) var(--openbot-ease-out);
  animation: wfn-fade-in var(--openbot-duration-normal) var(--openbot-ease-out);
}

/* The cursor of an agent glides from node to node and fades out when the play of its change ends. */
.wfn-peer-cursor[data-leaving] {
  opacity: 0;
}

/*
 * While the canvas plays an agent's change, a node or connection that the agent has not reached yet
 * is hidden. It keeps its size, so the view fits the whole change. One that just showed grows in.
 */
.wfn-slot[data-build="unbuilt"],
.wfn-edge[data-build="unbuilt"],
.wfn-edge-label[data-build="unbuilt"] {
  visibility: hidden;
}

.wfn-slot[data-build="arrived"] {
  animation: wfn-build-arrive var(--openbot-duration-slow) var(--openbot-ease-out);
}

.wfn-edge[data-build="arrived"],
.wfn-edge-label[data-build="arrived"] {
  animation: wfn-fade-in var(--openbot-duration-slow) var(--openbot-ease-out);
}

@keyframes wfn-build-arrive {
  from {
    opacity: 0;
    scale: 0.94;
  }
}

/* The ring is the stroke under the fill, so half of it shows outside the arrow. */
.wfn-peer-arrow {
  flex: none;
  width: 19px;
  height: 20px;
  fill: var(--wfn-peer);
  stroke: var(--openbot-paper);
  stroke-width: 3;
  stroke-linejoin: round;
  paint-order: stroke;
}

.wfn-peer-name,
.wfn-peer-tag {
  padding: 1px var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-xs);
  background: var(--wfn-peer);
  color: var(--openbot-paper-text);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: 18px;
  white-space: nowrap;
}

/* The name sits under the arrow, a little to the right of its point. */
.wfn-peer-name {
  margin: 17px 0 0 -11px;
  padding: 2px var(--openbot-space-2);
  border-radius: var(--openbot-radius-sm);
  outline: 1.5px solid var(--openbot-paper);
  font-weight: var(--openbot-weight-bold);
}

/* The node that another person selected has a ring in that person's colour, and their name under it. */
.wfn-slot[data-peer] .wfn-node:not([data-selected]) .wfn-card {
  outline-color: var(--wfn-peer);
}

.wfn-slot[data-peer] .wfn-text:not([data-selected]) .wfn-text-input {
  outline: var(--wfn-select-line) solid var(--wfn-peer);
  outline-offset: var(--wfn-select-gap);
}

.wfn-peer-tag {
  position: absolute;
  top: calc(100% + var(--openbot-space-2) / var(--wfn-scale, 1));
  left: 0;
  z-index: 2;
  pointer-events: none;
  transform-origin: 0 0;
  scale: calc(1 / var(--wfn-scale, 1));
  animation: wfn-fade-in var(--openbot-duration-normal) var(--openbot-ease-out);
}

/* Your own selection comes first: the results strip of the node takes the place of the tag. */
.wfn-slot:has(> [data-selected]) .wfn-peer-tag {
  display: none;
}

/*
 * The avatars of the people on the canvas: round, each on a tint of its cursor colour. The button and
 * your own avatar have the same 32px box, and the avatar is centred in it. A photo fills the circle.
 */
.wfn-stage .wfn-hud-button.wfn-presence-person,
.wfn-presence-self {
  display: grid;
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  padding: 0;
  place-items: center;
  border-radius: var(--openbot-radius-pill);
}

.wfn-presence-person .person-avatar {
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
  overflow: hidden;
  border-radius: var(--openbot-radius-pill);
  background: color-mix(in srgb, var(--wfn-peer, var(--openbot-text-primary)) 16%, transparent);
}

/* The generated face fills its circle. The bar button rule would make it the size of an icon. */
.wfn-stage .wfn-hud-presence .wfn-presence-person .person-avatar-generated > svg {
  width: 100%;
  height: 100%;
}

.wfn-presence-person .person-avatar > i {
  display: none;
}

/* The person you follow has a ring in their colour around the avatar. */
.wfn-presence-person[aria-pressed="true"] .person-avatar {
  outline: 2px solid var(--wfn-peer);
  outline-offset: 0;
}

/* While you follow a person, a frame in their colour holds the view, with their name at the top. */
.wfn-follow-frame {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  border: 2px solid var(--wfn-peer);
  pointer-events: none;
  animation: wfn-fade-in var(--openbot-duration-normal) var(--openbot-ease-out);
}

.wfn-follow-name {
  height: fit-content;
  padding: 1px var(--openbot-space-2) var(--openbot-space-0-5);
  border-radius: 0 0 var(--openbot-radius-sm) var(--openbot-radius-sm);
  background: var(--wfn-peer);
  color: var(--openbot-paper-text);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: 18px;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .wfn-peer-cursor {
    transition: none;
  }

  .wfn-peer-cursor,
  .wfn-peer-tag,
  .wfn-follow-frame,
  .wfn-slot[data-build],
  .wfn-edge[data-build],
  .wfn-edge-label[data-build] {
    animation: none;
  }
}


/* /@fs//home/ubuntu/openbot/packages/ui/src/features/workflows/workflows.css */
/*
 * The workflow canvas: the stage, the HUD, the tool bar, the search, the minimap, the zoom, the version
 * bar, the Undo toast of a delete and the in-app frame. The nodes use workflow-nodes.css.
 */

:where(.wfn-stage) {
  /* A control in the tool bar: the bar radius less the bar padding. */
  --wfn-tool-radius: calc(var(--openbot-radius-grouped) - var(--openbot-space-1-5));
  /* The canvas inside the window card: the card radius less its 1px border. */
  --wfn-card-inner-radius: calc(var(--openbot-radius-card) - 1px);
}

.wfn-stage {
  display: flex;
  flex-wrap: wrap;
  gap: 120px;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 120px var(--openbot-space-8);
  background-color: var(--openbot-bg-frame);
  background-image: radial-gradient(
    color-mix(in srgb, var(--openbot-text-primary) 9%, transparent) 1px,
    transparent 1px
  );
  background-size: 20px 20px;
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
}

/* ------------------------------------------------------ Menus, library */

.wfn-menu-text {
  font-size: var(--openbot-text-sm);
}

.wfn-menu-meta {
  color: var(--openbot-text-muted);
  font-size: var(--wfn-small);
}

.wfn-menu-check {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  margin-inline-start: auto;
  color: var(--openbot-text-primary);
}

/* ---------------------------------------------------------- Connections */

.wfn-stage {
  position: relative;
}

/* --------------------------------------------------------------- Canvas */

.wfn-stage.wfn-canvas {
  display: block;
  height: 100vh;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background-image: none;
}

.wfn-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: default;
  touch-action: none;
}

/*
 * The canvas fades out at the edges of the view, so a node that the view cuts does not end on a hard
 * line. The fade is over the world and under the bars, the cursors and the selection box.
 */
.wfn-viewport::after {
  --wfn-edge-fade: var(--openbot-space-8);

  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background:
    linear-gradient(to right, var(--openbot-bg-frame), transparent) left / var(--wfn-edge-fade) 100% no-repeat,
    linear-gradient(to left, var(--openbot-bg-frame), transparent) right / var(--wfn-edge-fade) 100% no-repeat,
    linear-gradient(to bottom, var(--openbot-bg-frame), transparent) top / 100% var(--wfn-edge-fade) no-repeat,
    linear-gradient(to top, var(--openbot-bg-frame), transparent) bottom / 100% var(--wfn-edge-fade) no-repeat;
  pointer-events: none;
}

/* The dot grid fades out toward the edges of the view, as on the Higgsfield canvas. A mask reads only
 * the alpha, so any opaque colour serves. */
.wfn-dots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  mask-image: radial-gradient(ellipse 85% 75% at 50% 50%, var(--openbot-text-primary) 45%, transparent 100%);
  pointer-events: none;
}

.wfn-dots circle {
  fill: color-mix(in srgb, var(--openbot-text-primary) 15%, transparent);
}

/* A drag on the empty canvas draws a selection box; Space held turns it into a pan. */
.wfn-viewport[data-space] {
  cursor: grab;
}

.wfn-viewport:is([data-panning], [data-dragging]) {
  cursor: grabbing;
  user-select: none;
}

/* A size that goes back to its default eases there too. The world is a coordinate space, so it stays
 * left to right in right-to-left text; the tool bars around it mirror. */
.wfn-world {
  position: absolute;
  top: 0;
  left: 0;
  direction: ltr;
  transform-origin: 0 0;
  interpolate-size: allow-keywords;
}

/* While the camera glides, the nodes that pass under a still pointer show no hover. */
.wfn-viewport[data-camera-moving] .wfn-world {
  pointer-events: none;
}

/* The world has no width, so a slot sizes to its content and free text does not wrap. */
.wfn-slot {
  position: absolute;
  width: max-content;
  cursor: default;
}

.wfn-slot :is(.wfn-label, .wfn-card) {
  cursor: grab;
}

.wfn-viewport[data-dragging] .wfn-slot :is(.wfn-label, .wfn-card) {
  cursor: grabbing;
}

/*
 * The HUD: every bar over the canvas is one glass bar, 40px high, with a 4px inset. Controls inside
 * are 32px with an 8px radius, so the bar radius is 8 + 4 = 12. The bars come in one after another.
 */
.wfn-canvas {
  /* The space between the bottom bars and the edges of the canvas. */
  --wfn-hud-inset: var(--openbot-space-4);

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.wfn-hud {
  position: absolute;
  z-index: 3;
  display: flex;
  gap: 2px;
  align-items: center;
  height: calc(var(--openbot-control-md) + var(--openbot-space-2));
  padding: var(--openbot-space-1);
  border-radius: var(--openbot-radius-lg);
  background: var(--wfn-glass);
  box-shadow: 0 0 0 1px var(--wfn-ring-strong);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  backdrop-filter: var(--wfn-glass-blur);
}

.wfn-hud-top {
  position: absolute;
  top: var(--openbot-space-4);
  inset-inline-end: var(--openbot-space-4);
  inset-inline-start: var(--openbot-space-4);
  z-index: 3;
  display: flex;
  gap: var(--openbot-space-2);
  align-items: flex-start;
  justify-content: space-between;
  pointer-events: none;
}

.wfn-hud-top .wfn-hud {
  position: relative;
  pointer-events: auto;
}

.wfn-hud-group {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
}

/* The tool bar: tools, then Search, then Add node as the one primary action. */
.wfn-hud-tools {
  bottom: var(--wfn-hud-inset);
  left: round(50%, 1px);
  translate: round(-50%, 1px) 0;
}

.wfn-stage .wfn-hud-add-button {
  margin-inline-start: var(--openbot-space-1);
}

/* A pressed tool, such as Select or an open minimap: a quiet fill, not a colour. */
.wfn-stage .wfn-hud .wfn-hud-tool[aria-pressed="true"] {
  background: var(--wfn-hover);
  color: var(--openbot-text-primary);
}

.wfn-stage .wfn-hud .wfn-hud-tool svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}

/* The workflow switcher: the name and a small chevron in one button. The name has the type of the other page titles. */
.wfn-stage .wfn-hud-title .wfn-hud-switcher {
  gap: var(--openbot-space-1-5);
  min-width: 0;
  padding-inline: var(--openbot-space-3) calc(var(--openbot-space-2) + var(--openbot-space-0-5));
}

.wfn-stage .wfn-hud-switcher-name {
  overflow: hidden;
  max-width: 40ch;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wfn-stage .wfn-hud-switcher .wfn-hud-chevron {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  color: var(--openbot-text-muted);
}

/* In the desktop window, the page lets clicks through to the server menu in the top row. The parts of the canvas take
 * them back; the top row of the canvas starts after the server menu. */
.wfn-canvas[data-frame="window"] > * {
  pointer-events: auto;
}

/* The Draw tool draws over the nodes, and Sticky note and Shapes place over them, so the nodes do not take a press. */
.wfn-canvas:is([data-tool="draw"], [data-tool="note"], [data-tool="shape"]) .wfn-world * {
  pointer-events: none;
}

/* The pan tool takes every press on the canvas, nodes too. */
.wfn-canvas[data-tool="pan"] .wfn-viewport,
.wfn-canvas[data-tool="pan"] .wfn-slot :is(.wfn-label, .wfn-card, .wfn-card *) {
  cursor: grab;
}

.wfn-canvas[data-tool="pan"] .wfn-viewport[data-panning],
.wfn-canvas[data-tool="pan"] .wfn-viewport[data-panning] * {
  cursor: grabbing;
}

.wfn-canvas[data-tool="draw"] .wfn-viewport {
  cursor: crosshair;
}

.wfn-canvas[data-draw="eraser"] .wfn-viewport {
  cursor: none;
}

/* The options of the Draw, Sticky note and Shapes tools sit above the tool bar, at its centre. */
.wfn-hud.wfn-hud-sub {
  right: 0;
  bottom: calc(var(--wfn-hud-inset) + var(--openbot-control-lg) + var(--openbot-space-3) + var(--openbot-space-2));
  left: 0;
  gap: var(--openbot-space-1);
  width: fit-content;
  margin-inline: auto;
}

.wfn-stage .wfn-hud-sub .wfn-hud-tool {
  width: var(--openbot-control-md);
}

.wfn-stage .wfn-hud-sub .wfn-shape-icon {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}

/* The shape colour: the picked colour and a chevron, as the colour button of Higgsfield. */
.wfn-stage .wfn-hud .wfn-hud-fill {
  gap: var(--openbot-space-1);
  padding-inline: var(--openbot-space-2) var(--openbot-space-1-5);
}

.wfn-stage .wfn-hud-fill .wfn-hud-chevron {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  color: var(--openbot-text-muted);
}

/*
 * The item that Sticky note or Shapes puts down shows at half strength under the pointer, at its
 * size on the canvas, with its centre on the pointer.
 */
.wfn-ghost {
  position: absolute;
  z-index: 3;
  opacity: 0.5;
  translate: -50% -50%;
  pointer-events: none;
  animation: wfn-fade-in var(--openbot-duration-fast) var(--openbot-ease-out);
}

/* A shape that a drag draws grows from the corner where the drag started. */
.wfn-ghost[data-drawn] {
  translate: none;
  animation: none;
}

.wfn-ghost[data-kind="note"] {
  border-radius: var(--wfn-radius-card);
  background: var(--wfn-note-paper);
  box-shadow: 0 0 0 1px var(--wfn-note-edge);
}

.wfn-ghost span.wfn-shape-surface {
  background: color-mix(in srgb, var(--wfn-shape) 16%, transparent);
  box-shadow: none;
  outline: 1px dashed var(--wfn-shape);
  outline-offset: -1px;
}

.wfn-ghost svg.wfn-shape-surface {
  stroke-dasharray: 4 3;
  stroke-width: 1;
}

.wfn-ink-dot {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  border-radius: var(--openbot-radius-pill);
  background: var(--wfn-ink);
  box-shadow: inset 0 0 0 1px var(--wfn-ring-strong);
  transition-property: box-shadow;
  transition-duration: var(--openbot-duration-fast);
  transition-timing-function: var(--openbot-ease-out);
}

/* The picked colour has a ring in the text colour, with a gap of the bar colour. */
.wfn-stage .wfn-hud .wfn-ink-swatch[aria-pressed="true"] {
  background: transparent;
}

.wfn-ink-swatch[aria-pressed="true"] .wfn-ink-dot {
  box-shadow:
    0 0 0 2px var(--wfn-glass),
    0 0 0 3.5px var(--openbot-text-primary);
}

/* The lines: in canvas units, so a zoom scales them with the nodes. */
.wfn-ink {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 1px;
  height: 1px;
  overflow: visible;
  pointer-events: none;
}

.wfn-ink-line {
  fill: none;
  stroke: var(--wfn-ink);
  stroke-linecap: round;
  stroke-linejoin: round;
  transition-property: opacity;
  transition-duration: var(--openbot-duration-fast);
  transition-timing-function: var(--openbot-ease-out);
}

.wfn-ink-line[data-brush="marker"] {
  stroke-opacity: 0.45;
}

/* A line that the eraser touched shows faint until the release removes it. */
.wfn-ink-line[data-erasing] {
  opacity: 0.25;
}

.wfn-eraser {
  position: absolute;
  z-index: 3;
  width: var(--openbot-space-4);
  height: var(--openbot-space-4);
  border-radius: var(--openbot-radius-pill);
  background: color-mix(in srgb, var(--openbot-text-primary) 8%, transparent);
  box-shadow: inset 0 0 0 1px var(--openbot-text-primary);
  translate: -50% -50%;
  pointer-events: none;
}

/* Hide interface keeps only the canvas and one way back. */
.wfn-canvas[data-hud-hidden] :is(.wfn-hud, .wfn-hud-top) {
  visibility: hidden;
  opacity: 0;
}

.wfn-stage .wfn-hud-show {
  position: absolute;
  inset-inline-end: var(--wfn-hud-inset);
  bottom: var(--wfn-hud-inset);
  z-index: 3;
  gap: var(--openbot-space-1-5);
  animation: wfn-fade-in var(--openbot-duration-normal) var(--openbot-ease-out);
}

.wfn-hud-zoom {
  bottom: var(--wfn-hud-inset);
  inset-inline-start: var(--wfn-hud-inset);
}

.wfn-hud-separator {
  width: 1px;
  height: var(--openbot-space-4);
  margin: 0 var(--openbot-space-1);
  background: var(--wfn-ring-strong);
}

/* Every control in a bar, and in a node toolbar: 32px and a press scale. Bar controls have radius 8. */
.wfn-stage .wfn-hud .ui-button {
  border-radius: var(--openbot-radius-md);
}

.wfn-stage :is(.wfn-hud, .wfn-toolbar) .ui-button {
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  transition-property: background-color, color, opacity, scale;
  transition-duration: var(--openbot-duration-fast);
  transition-timing-function: var(--openbot-ease-out);
}

.wfn-stage :is(.wfn-hud, .wfn-toolbar) .ui-button:active:not(:disabled) {
  scale: 0.96;
}

.wfn-stage .wfn-hud .ui-button-variant-ghost {
  color: var(--openbot-text-secondary);
}

.wfn-stage .wfn-hud .ui-button-variant-ghost:hover:not(:disabled),
.wfn-stage .wfn-hud .ui-button-variant-ghost[data-expanded] {
  background: var(--wfn-hover);
  color: var(--openbot-text-primary);
}

.wfn-stage .wfn-hud-button {
  gap: var(--openbot-space-1-5);
  height: var(--openbot-control-md);
  padding-inline: var(--openbot-space-3);
}

/* An icon has space of its own at its edge, so the side with the icon gets less padding. Then the two sides look equal. */
.wfn-stage .wfn-hud-button:has(> svg:first-child) {
  padding-inline-start: calc(var(--openbot-space-2) + var(--openbot-space-0-5));
}

.wfn-stage .wfn-hud-button svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

/*
 * The tool bar is one size up from the other bars, as on Higgsfield: 48px high, 36px controls with
 * 20px icons. The control radius is 16 - 6 = 10, so the corners stay concentric.
 */
.wfn-stage .wfn-hud-tools {
  gap: var(--openbot-space-1-5);
  height: calc(var(--openbot-control-lg) + var(--openbot-space-3));
  padding: var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-grouped);
}

.wfn-stage .wfn-hud-tools .ui-button {
  height: var(--openbot-control-lg);
  border-radius: var(--wfn-tool-radius);
}

.wfn-stage .wfn-hud-tools .wfn-hud-tool {
  width: var(--openbot-control-lg);
}

.wfn-stage .wfn-hud-tools .wfn-hud-tool svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  stroke-width: var(--openbot-icon-stroke-lg);
}

.wfn-stage .wfn-hud-tools .wfn-hud-add-button svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: var(--openbot-icon-stroke);
}

/*
 * The Draw, Sticky note and Shapes tools show a picture in the bar. The pen stands on the bar and
 * the bar cuts its foot; the notes and the shapes sit in the centre of the button. On hover and when
 * the tool is on, each layer moves on its own with a small spring, as on Higgsfield.
 */
.wfn-stage .wfn-hud-tools {
  overflow: clip;
}

.wfn-stage .wfn-hud-tools .wfn-hud-tool[data-art] {
  position: relative;
  width: calc(var(--openbot-control-lg) + var(--openbot-space-2));
  padding: 0;
  overflow: visible;
}

.wfn-stage .wfn-hud-tools .wfn-hud-tool:is([data-art="note"], [data-art="shape"]) {
  width: calc(var(--openbot-control-lg) + var(--openbot-space-4));
}

.wfn-stage .wfn-hud .wfn-hud-tool[data-art]:is(:hover, [aria-pressed="true"]) {
  background: transparent;
}

/*
 * The art colours. Each picture mixes its colour with paper for a lit face and with paper text for
 * a face in shade, so a picture reads the same in the dark and the light theme. The front of a note
 * or a shape goes from the lit face to the base colour.
 */
.wfn-stage .wfn-hud-tools .wfn-hud-tool[data-art] .wfn-tool-art {
  --wfn-art-base: var(--wfn-art-color);
  --wfn-art-light: color-mix(in srgb, var(--wfn-art-color) 58%, var(--openbot-paper));
  --wfn-art-dark: color-mix(in srgb, var(--wfn-art-color) 72%, var(--openbot-paper-text));
  --wfn-art-wood-color: color-mix(in srgb, var(--openbot-file-orange) 38%, var(--openbot-paper));
  --wfn-art-metal-color: color-mix(in srgb, var(--openbot-paper) 78%, var(--openbot-paper-text));
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  overflow: visible;
}

/*
 * The light palette darkens each colour for text. A note or a shape keeps the hue at a fixed light
 * tone there, as the note paper does, so it is bright and clean. The ink colour becomes a light neutral tone.
 */
:root[data-openbot-color-scheme="light"] .wfn-stage .wfn-hud-tools .wfn-hud-tool[data-art] .wfn-tool-art {
  --wfn-art-base: oklch(from var(--wfn-art-color) 0.82 calc(c * 0.75) h);
  --wfn-art-light: oklch(from var(--wfn-art-color) 0.93 calc(c * 0.35) h);
}

/* The pen comes up out of the bar. */
.wfn-hud-tool[data-art="draw"]:is(:hover, [aria-pressed="true"]) .wfn-art-layer {
  translate: 0 calc(var(--openbot-space-1-5) * -1);
}

/* The notes fan out: the back note goes to the left, the front note goes up and to the right. */
.wfn-hud-tool[data-art="note"]:is(:hover, [aria-pressed="true"]) [data-layer="back"] {
  rotate: -15deg;
  translate: calc(var(--openbot-space-1) * -1) calc(var(--openbot-space-0-5) * -1);
}

.wfn-hud-tool[data-art="note"]:is(:hover, [aria-pressed="true"]) [data-layer="middle"] {
  rotate: 4deg;
  translate: 0 calc(var(--openbot-space-1) * -1);
}

.wfn-hud-tool[data-art="note"]:is(:hover, [aria-pressed="true"]) [data-layer="front"] {
  rotate: 4deg;
  translate: var(--openbot-space-1) calc(var(--openbot-space-1-5) * -1);
}

/* The square grows and turns to the left, the circle rolls to the right, the next shape lifts. */
.wfn-hud-tool[data-art="shape"]:is(:hover, [aria-pressed="true"]) [data-layer="back"] {
  rotate: -17deg;
  translate: calc(var(--openbot-space-1) * -1) calc(var(--openbot-space-0-5) * -1);
  scale: 1.06;
}

.wfn-hud-tool[data-art="shape"]:is(:hover, [aria-pressed="true"]) [data-layer="middle"] {
  rotate: 12deg;
  translate: var(--openbot-space-1) var(--openbot-space-0-5);
}

.wfn-hud-tool[data-art="shape"]:is(:hover, [aria-pressed="true"]) [data-layer="front"] {
  rotate: 6deg;
  translate: var(--openbot-space-0-5) calc(var(--openbot-space-1-5) * -1);
}

.wfn-hud-tools .wfn-hud-separator {
  height: calc(var(--openbot-space-4) + var(--openbot-space-1));
  margin: 0 var(--openbot-space-0-5);
}

/* The icon of a HUD bar, such as the version bar. */
.wfn-hud-icon {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  border-radius: var(--openbot-radius-md);
  background: var(--wfn-hover);
  color: var(--openbot-text-secondary);
}

.wfn-stage .wfn-hud-icon svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

.wfn-stage .wfn-hud-name {
  field-sizing: content;
  min-width: 8ch;
  max-width: 40ch;
  height: var(--openbot-control-md);
  padding: 0 var(--openbot-space-2);
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  box-shadow: none;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  text-overflow: ellipsis;
  transition-property: background-color, box-shadow;
  transition-duration: var(--openbot-duration-fast);
}

.wfn-stage .wfn-hud-name:hover {
  background: var(--wfn-hover);
}

.wfn-stage .wfn-hud-name:focus-visible {
  outline: none;
  background: var(--wfn-hover);
  box-shadow: inset 0 0 0 1px var(--wfn-ring-strong);
}

/* A past run on view. */
.wfn-hud-viewing {
  gap: var(--openbot-space-1-5);
  padding-inline-start: var(--openbot-space-3);
  font-variant-numeric: tabular-nums;
}

.wfn-stage .wfn-hud-viewing > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
}

/* The tools bar gives its place to the version bar while a version shows. */
.wfn-hud[hidden] {
  display: none;
}

/* A version that shows, read-only, in place of the tools: its time, Back, and Make current. */
.wfn-hud-version {
  bottom: var(--wfn-hud-inset);
  left: round(50%, 1px);
  gap: var(--openbot-space-1-5);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  translate: round(-50%, 1px) 0;
}

.wfn-hud-lock {
  display: inline-flex;
  gap: var(--openbot-space-1);
  align-items: center;
  margin-inline-end: var(--openbot-space-1);
  color: var(--openbot-text-muted);
}

.wfn-hud-lock-icon {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}

/* Any drag on a version pans. */
.wfn-canvas[data-preview] .wfn-viewport {
  cursor: grab;
}

.wfn-canvas[data-preview] .wfn-viewport[data-panning] {
  cursor: grabbing;
}

.wfn-hud-label {
  font-weight: var(--openbot-weight-medium);
}

.wfn-hud-meta {
  margin-inline-end: var(--openbot-space-1);
  color: var(--openbot-text-muted);
}

.wfn-hud-count {
  min-width: var(--openbot-space-4);
  padding: 0 var(--openbot-space-1);
  border-radius: var(--openbot-radius-xs);
  background: var(--wfn-hover);
  color: var(--openbot-text-muted);
  font-size: var(--wfn-small);
  font-variant-numeric: tabular-nums;
  line-height: var(--openbot-leading-sm);
  text-align: center;
}

/* The run: a primary button, or progress and Stop while it runs. */
.wfn-hud-progress {
  display: inline-flex;
  gap: var(--openbot-space-1-5);
  align-items: center;
  padding: 0 var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-variant-numeric: tabular-nums;
  animation: wfn-fade-in var(--openbot-duration-fast) var(--openbot-ease-out);
}

.wfn-hud-progress .wfn-hud-ring {
  --ui-radial-progress-color: var(--openbot-text-primary);

  width: var(--openbot-icon-md);
}

.wfn-stage .wfn-hud-stop {
  animation: wfn-fade-in var(--openbot-duration-fast) var(--openbot-ease-out);
}

.wfn-stage .wfn-hud-stop svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  fill: currentColor;
}

@keyframes wfn-fade-in {
  from {
    opacity: 0;
  }
}

/* Zoom: the value opens the zoom menu. */
.wfn-stage .wfn-zoom-value {
  justify-content: center;
  min-width: 6ch;
  padding-inline: var(--openbot-space-1);
  font-variant-numeric: tabular-nums;
}

.wfn-zoom-menu {
  min-width: 200px;
}

.wfn-zoom-menu .wfn-menu-text {
  margin-inline-end: auto;
}

/* The zoom levels: a 3 by 2 grid above the zoom commands, as on the Higgsfield canvas. */
.wfn-zoom-presets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}

.wfn-zoom-menu.ui-action-menu .wfn-zoom-presets .wfn-zoom-preset {
  justify-content: center;
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}

.wfn-zoom-menu.ui-action-menu .wfn-zoom-presets .wfn-zoom-preset[data-current] {
  background: var(--wfn-hover);
  color: var(--openbot-text-primary);
}

/* Context menu icons sit in one column, so the labels align. */
.wfn-menu-glyph {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  color: var(--openbot-text-secondary);
}

.wfn-menu-glyph svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

/* The shared danger colour reaches only a direct icon, so the column icon takes it here. */
.wfn-menu .ui-action-menu-danger .wfn-menu-glyph {
  color: var(--openbot-danger);
}

/* ------------------------------------------------------------- Search */

/*
 * Search opens above the tool bar, as on the Higgsfield canvas. It is one glass panel: the field,
 * then the empty line or the results. The panel radius is the field radius + its 4px inset.
 */
.wfn-hud.wfn-search {
  bottom: calc(var(--wfn-hud-inset) + var(--openbot-control-md) + var(--openbot-space-2) + var(--openbot-space-2));
  left: round(50%, 1px);
  display: grid;
  gap: var(--openbot-space-1);
  align-items: stretch;
  width: min(480px, calc(100% - var(--openbot-space-8)));
  height: auto;
  translate: round(-50%, 1px) 0;
}

.wfn-search-field {
  display: flex;
  gap: var(--openbot-space-1);
  align-items: center;
  padding-inline-start: var(--openbot-space-2);
  border-radius: var(--wfn-tool-radius);
}

/* The field has no border, so a 1px ring in the focus colour shows where typing goes. */
.wfn-search-field:has(.wfn-search-input:focus-visible) {
  box-shadow: inset 0 0 0 1px var(--openbot-border-focus);
}

.wfn-stage .wfn-search-icon {
  flex: 0 0 auto;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
}

.wfn-stage .wfn-search-input {
  flex: 1 1 auto;
  height: var(--openbot-control-md);
  padding: 0 var(--openbot-space-1);
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: var(--openbot-text-sm);
}

.wfn-stage .wfn-search-input:focus-visible {
  outline: none;
  box-shadow: none;
}

.wfn-search-empty {
  margin: 0;
  padding: var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-3);
  border-top: 1px solid var(--wfn-ring);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-wrap: pretty;
}

.wfn-search-results {
  display: grid;
  gap: 2px;
  max-height: 320px;
  margin: 0;
  padding: var(--openbot-space-1) 0 0;
  overflow-y: auto;
  border-top: 1px solid var(--wfn-ring);
  list-style: none;
}

.wfn-stage .wfn-hud .wfn-search-result {
  justify-content: flex-start;
  gap: var(--openbot-space-2);
  width: 100%;
  height: auto;
  min-height: var(--openbot-control-md);
  padding: var(--openbot-space-1) var(--openbot-space-2);
  color: var(--openbot-text-primary);
  text-align: start;
}

.wfn-search-result .wfn-menu-text {
  flex: 0 0 auto;
}

/*
 * A connection dropped on the empty canvas opens the same panel at the end of the line, with only the
 * kinds that can take it. The first kind is what Enter adds, so it shows the hover fill while the
 * field has focus.
 */
/* The popover places the menu, so it does not take the place of the search bar. */
.wfn-hud.wfn-search.wfn-drop-menu {
  position: relative;
  bottom: auto;
  left: auto;
  width: 240px;
  translate: none;
}

/* Its groups and rows are those of the add menu: the icon of the kind and its name. */
.wfn-hud.wfn-drop-menu .wfn-search-results {
  display: block;
  max-height: min(560px, calc(100vh - var(--openbot-space-8)));
  padding: var(--openbot-space-1) 0 0;
}

.wfn-drop-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wfn-drop-menu:has(.wfn-search-input:focus) .wfn-search-result[data-first] {
  background: var(--wfn-hover);
}

.wfn-search-snippet {
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--wfn-small);
  font-weight: var(--openbot-weight-regular);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ------------------------------------------------------------ Minimap */

/* The minimap sits over the zoom bar. Nodes are kind-tinted blocks; the view is a bright frame. */
.wfn-hud.wfn-minimap {
  bottom: calc(var(--wfn-hud-inset) + var(--openbot-control-md) + var(--openbot-space-2) + var(--openbot-space-2));
  inset-inline-start: var(--wfn-hud-inset);
  height: auto;
  padding: 0;
  overflow: hidden;
}

.wfn-minimap svg {
  display: block;
  cursor: pointer;
  touch-action: none;
}

.wfn-minimap-node {
  fill: color-mix(in srgb, var(--wfn-kind, var(--openbot-text-primary)) 40%, transparent);
}

.wfn-minimap-node[data-selected] {
  fill: var(--openbot-text-primary);
}

/* A drawn line, thin at every size, so it does not cover the nodes. */
.wfn-minimap-line {
  fill: none;
  stroke: var(--wfn-ink);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wfn-minimap-line[data-brush="marker"] {
  stroke-opacity: 0.45;
}

.wfn-minimap-view {
  fill: color-mix(in srgb, var(--openbot-text-primary) 4%, transparent);
  stroke: color-mix(in srgb, var(--openbot-text-primary) 64%, transparent);
  stroke-width: 1.5;
}

.wfn-results-menu {
  min-width: 220px;
}

.wfn-results-menu .wfn-menu-text {
  margin-inline-end: auto;
}

.wfn-results-menu .wfn-menu-meta {
  font-variant-numeric: tabular-nums;
}

.wfn-results-menu .wfn-menu-check {
  margin-inline-start: 0;
}

.wfn-menu-check[data-off] {
  visibility: hidden;
}

/* Each node kind has one colour, for its menu tile and its results strip. The tile is a soft wash of
 * that colour behind the icon. */
.wfn-menu-icon {
  --wfn-kind: var(--openbot-text-secondary);

  display: inline-grid;
  flex: none;
  place-items: center;
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  margin-inline-start: calc(var(--openbot-space-1) * -1);
  border-radius: var(--openbot-radius-sm);
  background: color-mix(in srgb, var(--wfn-kind) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wfn-kind) 14%, transparent);
  color: var(--wfn-kind);
}

:is(.wfn-menu, .wfn-search) .wfn-menu-icon svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: inherit;
  stroke-width: var(--openbot-icon-stroke);
}

@media (prefers-reduced-motion: reduce) {
  .wfn-edge-line,
  .wfn-edge-comet,
  .wfn-hud-progress,
  .wfn-stage .wfn-hud-stop {
    animation: none;
  }

  .wfn-stage :is(.wfn-hud, .wfn-toolbar) .ui-button:active:not(:disabled) {
    scale: 1;
  }
}

/* ------------------------------------------------------------ Selection */

/* In a group, each node keeps its ring, and only one node at a time resizes. */
.wfn-world[data-group] .wfn-grip {
  display: none;
}

/* While a node moves or resizes, the nodes under the pointer show no handles. */
.wfn-viewport:is([data-resizing], [data-dragging]) .wfn-node:not([data-resizing], [data-selected]) .wfn-grip {
  --wfn-grip-color: transparent;
}

/* The cursor of the handle stays while the pointer moves over other nodes. */
.wfn-viewport[data-resizing],
.wfn-viewport[data-resizing] .wfn-slot :is(.wfn-label, .wfn-card, .wfn-grip) {
  cursor: ew-resize;
  user-select: none;
}

.wfn-viewport[data-resizing="ns"],
.wfn-viewport[data-resizing="ns"] .wfn-slot :is(.wfn-label, .wfn-card, .wfn-grip) {
  cursor: ns-resize;
}

.wfn-viewport[data-resizing="nwse"],
.wfn-viewport[data-resizing="nwse"] .wfn-slot :is(.wfn-label, .wfn-card, .wfn-grip) {
  cursor: nwse-resize;
}

.wfn-viewport[data-resizing="nesw"],
.wfn-viewport[data-resizing="nesw"] .wfn-slot :is(.wfn-label, .wfn-card, .wfn-grip) {
  cursor: nesw-resize;
}

/* A live resize follows the pointer with no delay. */
.wfn-viewport[data-resizing] .wfn-slot :is(.wfn-node, .wfn-card) {
  transition: none;
}

/* ------------------------------------------------------- Empty canvas */

/* An empty workflow asks for its trigger in the middle of the canvas. The canvas stays usable. */
.wfn-empty {
  position: absolute;
  inset: 0;
  display: grid;
  gap: var(--openbot-space-3);
  place-content: center;
  justify-items: center;
  pointer-events: none;
  animation: wfn-fade-in var(--openbot-duration-normal) var(--openbot-ease-out);
}

.wfn-empty > * {
  pointer-events: auto;
}

.wfn-stage .wfn-empty-icon {
  width: var(--openbot-control-lg);
  height: var(--openbot-control-lg);
  border-radius: var(--openbot-radius-lg);
}

.wfn-stage .wfn-empty-icon svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}

.wfn-empty-title {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  text-wrap: balance;
}

/* ------------------------------------------------------------ Selection */

/* The selection box: a quiet fill and a 1px ring, not a colour. */
.wfn-marquee {
  position: absolute;
  z-index: 3;
  border-radius: var(--openbot-radius-xs);
  background: color-mix(in srgb, var(--openbot-text-primary) 4%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--openbot-text-primary) 32%, transparent);
  pointer-events: none;
}

/* A selection of more than one node: one frame around all of it and one toolbar. */
.wfn-group {
  position: absolute;
  z-index: 2;
  border-radius: var(--wfn-radius-card);
  outline: calc(1px / var(--wfn-scale, 1)) dashed color-mix(in srgb, var(--openbot-text-primary) 24%, transparent);
  outline-offset: calc(12px / var(--wfn-scale, 1));
  pointer-events: none;
}

.wfn-group .wfn-group-bar {
  bottom: calc(100% + (12px + var(--openbot-space-3)) / var(--wfn-scale, 1));
  pointer-events: auto;
}

.wfn-group-count {
  padding: 0 var(--openbot-space-1) 0 var(--openbot-space-3);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.wfn-viewport[data-dragging] .wfn-group-bar {
  opacity: 0;
}

/* Alignment guides: 1px at every zoom, a faint tint of the text colour that fades in. */
.wfn-guide {
  position: absolute;
  z-index: 3;
  background: color-mix(in srgb, var(--openbot-text-primary) 22%, transparent);
  pointer-events: none;
  opacity: 1;
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}

@starting-style {
  .wfn-guide {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wfn-guide {
    transition: none;
  }
}

.wfn-guide[data-axis="x"] {
  width: calc(1px / var(--wfn-scale, 1));
  translate: calc(-0.5px / var(--wfn-scale, 1)) 0;
}

.wfn-guide[data-axis="y"] {
  height: calc(1px / var(--wfn-scale, 1));
  translate: 0 calc(-0.5px / var(--wfn-scale, 1));
}

/* ------------------------------------------------------------ Run status */

.wfn-hud-live {
  display: contents;
}

.wfn-stage .wfn-hud-step {
  gap: var(--openbot-space-1-5);
  max-width: 360px;
  font-variant-numeric: tabular-nums;
}

.wfn-stage .wfn-hud .wfn-hud-step > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: none;
  color: var(--openbot-text-muted);
}

.wfn-stage .wfn-hud-status[data-status="failed"] .wfn-hud-step > svg {
  color: var(--openbot-danger-text);
}

.wfn-hud-step .wfn-hud-meta {
  margin-inline-end: 0;
}

.wfn-hud-step-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .wfn-ghost {
    animation: none;
  }
}

/* A deleted workflow hides until its Undo toast closes. */
.wfn-stage[data-deleted] {
  visibility: hidden;
}

/* The workflow mark of the Undo toast, in the place of the agent avatar. */
.wfn-undo-toast-tile {
  display: grid;
  place-items: center;
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-control);
  box-shadow: inset 0 0 0 1px var(--openbot-border);
  color: var(--openbot-text-secondary);
}

.wfn-undo-toast-icon {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

/* --------------------------------------------------------------- In app */

/* The story has no root that sizes the window, so the window takes the screen. */
.app-window.wfn-app {
  height: 100vh;
}

/*
 * In the desktop window, the canvas fills the pane. The window frame shows through the top row, which
 * holds the canvas bar, and the canvas paints only the card below it, inside the card's border and corners.
 */
.wfn-stage.wfn-canvas[data-frame="window"] {
  --wfn-hud-inset: var(--openbot-space-2);

  height: 100%;
  background: transparent;
}

.wfn-canvas[data-frame="window"] :is(.wfn-viewport, .wfn-empty) {
  top: var(--left-header-height);
}

.wfn-canvas[data-frame="window"] .wfn-viewport {
  border-radius: var(--wfn-card-inner-radius);
  background: var(--openbot-bg-frame);
}

/* The follow frame holds the card, not the top row. */
.wfn-canvas[data-frame="window"] .wfn-follow-frame {
  top: var(--left-header-height);
  border-radius: var(--wfn-card-inner-radius);
}

/* The workflow page does not need the Marketplace button that the sidebar keeps in the top row. */
.wfn-app .sidebar-marketplace-button {
  display: none;
}

/* The server menu keeps the start of the top row, so the bar starts after it. */
.wfn-canvas[data-frame="window"] .wfn-hud-top {
  top: 0;
  inset-inline-end: var(--openbot-space-3);
  inset-inline-start: calc(var(--left-panel-width) + var(--openbot-space-3));
  height: var(--left-header-height);
  align-items: center;
}

/* In the top row, the bars are plain groups of controls, as in the other pages' top rows. */
.wfn-canvas[data-frame="window"] .wfn-hud-top .wfn-hud {
  height: auto;
  padding: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

/* The buttons of the top row have the size of the buttons in the other pages' top rows, such as Run now in Routines. */
.wfn-canvas[data-frame="window"] .wfn-hud-top .wfn-hud-button {
  height: var(--openbot-control-xs);
  padding-inline: var(--openbot-space-2);
  font-size: var(--openbot-text-lg);
}

.wfn-canvas[data-frame="window"] .wfn-hud-top .wfn-hud-button svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}

/* The window's top row stays when the interface is hidden: only the bars on the canvas go. */
.wfn-canvas[data-frame="window"][data-hud-hidden] .wfn-hud-top,
.wfn-canvas[data-frame="window"][data-hud-hidden] .wfn-hud-top .wfn-hud {
  visibility: visible;
  opacity: 1;
}

/* ------------------------------------------------------------ Switcher */

/*
 * The workflow switcher in the menu of the app. The panel keeps the sheet colour, the edge and the top
 * highlight of the shared menu, but not its drop shadow.
 */

.wfs-menu.ui-action-menu {
  --ui-menu-panel-shadow: inset 0 1px 0 var(--ui-menu-highlight), 0 0 0 1px var(--ui-menu-edge);

  min-width: 260px;
  max-width: min(320px, calc(100vw - var(--openbot-space-4)));
  max-height: min(520px, var(--kb-popper-content-available-height, 520px));
  overflow-y: auto;
}

.wfs-menu .wfs-name {
  flex: 1 1 auto;
}

/* The step count at the end of a row keeps its numbers in line from row to row. */
.wfs-menu .ui-menu-trailing {
  flex: none;
  font-variant-numeric: tabular-nums;
}

/* Back to the live canvas follows the reading direction. */
.wfn-hud-version .wfn-hud-button > svg[class~="lucide-arrow-left"]:dir(rtl) {
  transform: scaleX(-1);
}


/* /@fs//home/ubuntu/openbot/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;
  /* A total too wide for the column breaks after the currency, never inside the number. */
  overflow-wrap: normal;
  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. The
   entries that do not fit wrap below the one-row height and are clipped whole, so the
   drop follows the width of the labels in each language, not a fixed breakpoint. */
.agent-usage-totals {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-4) calc(var(--openbot-space-6) * 2);
  max-height: calc(var(--openbot-leading-sm) + var(--openbot-space-1) + var(--openbot-leading-xl));
  margin-top: var(--openbot-space-4);
  overflow: hidden;
}
.agent-usage-totals dt {
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-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);
  line-height: var(--openbot-leading-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: end;
  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: start;
  padding-inline-start: 0;
  white-space: normal;
}
.agent-usage-table td:last-child {
  padding-inline-end: 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-table td.agent-usage-table-empty {
  padding-inline-start: 0;
  text-align: start;
  white-space: normal;
  color: var(--openbot-text-muted);
}
/* The open table alone sets the height. A hidden table, such as the 30 rows of Day, adds no
   empty space under a short one, and it still fades out over the open one. */
.agent-usage-breakdown {
  position: relative;
}
.agent-usage-breakdown > .ui-sliding-tabs-content:not([data-selected]) {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.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//home/ubuntu/openbot/packages/ui/src/features/usage/usage-machine-meter.css */
/* The machine use of the server in the Usage header, and the details that a click opens. */

.usage-machine-icon {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex-shrink: 0;
}

.usage-machine-trigger {
  flex-shrink: 0;
  gap: var(--openbot-space-3);
  color: var(--openbot-text-muted);
}

.usage-machine-item {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
}

.usage-machine-value {
  font-variant-numeric: tabular-nums;
}

.usage-machine-ring {
  width: var(--openbot-icon-md);
  --ui-radial-progress-color: var(--openbot-text-secondary);
}

.usage-machine-ring .ui-radial-progress-track,
.usage-machine-ring .ui-radial-progress-indicator {
  stroke-width: 6;
}

/* The default track is almost invisible on the dark header, so a part-full ring looks like a spinner. */
.usage-machine-ring .ui-radial-progress-track {
  stroke: var(--openbot-text-dim);
  stroke-opacity: 0.35;
}

/* Above an alert level, as Storage colours the metric. */
.usage-machine-item[data-tone="warning"] {
  color: var(--openbot-warning-text);
}

.usage-machine-item[data-tone="danger"] {
  color: var(--openbot-danger-text);
}

/* The open motion of the filter selects beside it: it moves down 8px and grows from 95%. */
.ui-popover-menu-surface.usage-machine-popover {
  animation: ui-select-content-in var(--openbot-duration-dialog) var(--openbot-ease-out) both;
}

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

.usage-machine-popover .usage-machine-detail {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1-5);
}

.usage-machine-popover .usage-machine-detail-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}

.usage-machine-popover .usage-machine-detail-name {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-2);
}

.usage-machine-popover .usage-machine-icon {
  color: var(--openbot-text-secondary);
}

.usage-machine-popover .usage-machine-detail-value {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  color: var(--openbot-text-secondary);
  font-variant-numeric: tabular-nums;
}

.usage-machine-popover [data-tone="warning"] .usage-machine-detail-value {
  color: var(--openbot-warning-text);
}

.usage-machine-popover [data-tone="danger"] .usage-machine-detail-value {
  color: var(--openbot-danger-text);
}

.usage-machine-popover .usage-machine-bar .ui-progress-track {
  height: 6px;
}

.usage-machine-popover [data-tone="warning"] .ui-progress-fill {
  background: var(--openbot-warning);
}

.usage-machine-popover [data-tone="danger"] .ui-progress-fill {
  background: var(--openbot-danger);
}

/* The disk row is the action of the popover: a full-width row that opens Storage. */
.usage-machine-popover .context-meter-action.usage-machine-storage {
  height: auto;
  flex-direction: column;
  align-items: stretch;
  gap: var(--openbot-space-1-5);
  padding-block: var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-weight: inherit;
  text-align: start;
}

.usage-machine-popover .usage-machine-storage .usage-machine-chevron {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
}

.usage-machine-popover .usage-machine-detail-size {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}


/* /@fs//home/ubuntu/openbot/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-inline-start: calc(-1 * var(--openbot-space-2));
}
/* The back arrow points to the start of the reading direction. */
.agent-usage-identity > .ui-icon-button > svg:dir(rtl) {
  transform: scaleX(-1);
}
.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-inline-start: 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: 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-inline-start: 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;
}
/* The first load covers the whole window: the page rail, the server rail and the sidebar too. The frame
 * is a size container, so the screen is a child of the window and not of the frame. */
.app-window > .app-loading {
  position: fixed;
}


/* /@fs//home/ubuntu/openbot/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//home/ubuntu/openbot/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-inline-start: calc(-1 * var(--openbot-space-2));
}

/* Back and the agents panel toggle follow the reading direction. */
.tasks-page-header svg:is([class~="lucide-arrow-left"], [class~="lucide-panel-left"]):dir(rtl) {
  transform: scaleX(-1);
}

.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-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-inline-start: 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);
}

/*
 * The agent menu: a search field and the agents under it. A server can have more agents than the
 * window has rows, so the list fits the space left under the trigger and scrolls. The panel keeps the
 * menu padding on all sides, so the field and the rows have the same inset and concentric corners.
 * A fixed width keeps the panel still while a search changes the names.
 */
.tasks-page-agent-menu.ui-action-menu {
  --tasks-agent-max: min(420px, calc(100dvh - 16px), var(--kb-popper-content-available-height, 420px));

  display: flex;
  width: 240px;
  max-height: var(--tasks-agent-max);
  flex-direction: column;
}

.tasks-page-agent-picker {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--ui-menu-padding);
}

/*
 * The search field looks as the one in the model picker: a filled row with the radius of a menu row.
 * The field takes the focus each time the menu opens, so it shows no focus ring; the caret shows
 * where typing goes.
 */
.tasks-page-agent-search {
  display: flex;
  height: var(--openbot-control-md);
  flex: none;
  align-items: center;
  gap: var(--openbot-space-2);
  border-radius: var(--ui-menu-item-radius);
  background: var(--ui-menu-item-hover);
  padding-inline: var(--ui-menu-inset);
  cursor: text;
}

/* The icon takes the width of a row avatar, so the text starts where the names start. */
.tasks-page-agent-search > svg {
  width: 18px;
  height: var(--openbot-icon-sm);
  flex: none;
  color: var(--openbot-text-muted);
  stroke-width: var(--openbot-icon-stroke);
}

.tasks-page-agent-search .tasks-page-agent-search-input {
  min-width: 0;
  height: 100%;
  flex: 1;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  color: var(--openbot-text-primary);
  font: inherit;
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}

.tasks-page-agent-search .tasks-page-agent-search-input:focus-visible {
  outline: 0;
  box-shadow: none;
}

.tasks-page-agent-search-input::placeholder {
  color: var(--openbot-text-muted);
}

/*
 * The list is as high as its rows, up to what the panel has left under the field. A search that
 * adds or removes rows eases the height, so the panel does not jump. The edge fades come from the
 * shared .scroll-fade-* masks, so the list shows no scroll bar.
 */
.tasks-page-agent-list {
  height: min(
    calc(var(--tasks-agent-rows, 0) * var(--openbot-control-md)),
    calc(var(--tasks-agent-max) - var(--openbot-control-md) - 3 * var(--ui-menu-padding))
  );
  min-height: 0;
  flex: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  outline: 0;
  padding: 0;
  scrollbar-width: none;
  transition: height var(--openbot-duration-slow) var(--ui-menu-ease);
}

.tasks-page-agent-list::-webkit-scrollbar {
  display: none;
}

/* A row looks as a row of the other menus. */
.tasks-page-agent-option {
  display: flex;
  height: var(--openbot-control-md);
  align-items: center;
  gap: var(--openbot-space-2);
  border-radius: var(--ui-menu-item-radius);
  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;
}

.tasks-page-agent-option > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}

.tasks-page-agent-option[data-highlighted] {
  background: var(--ui-menu-item-hover);
}

.tasks-page-agent-name {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tasks-page-agent-name b {
  font-weight: var(--openbot-weight-semibold);
}

/* The empty text starts where the names start, and fades in after the list closes. */
.tasks-page-agent-empty {
  margin: 0;
  padding: var(--openbot-space-1) var(--ui-menu-inset) var(--openbot-space-1-5)
    calc(var(--ui-menu-inset) + 18px + var(--openbot-space-2));
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  overflow-wrap: anywhere;
  transition: opacity var(--openbot-duration-normal) var(--openbot-ease-out) var(--openbot-duration-fast);

  @starting-style {
    opacity: 0;
  }
}

.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: start;
  --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 var(--tasks-page-side-width, 420px);
  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);
}

/* The user draws the panel wider or narrower: the width follows the pointer with no transition. */
html.panel-resizing .tasks-page-side {
  transition: none;
}

.tasks-page-side[data-closing] > .panel-resizer {
  visibility: hidden;
}

/* The clip of the opening and closing panel. The edge handle is outside it, so it stays whole. */
.tasks-page-side-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}

.tasks-page-side-content {
  position: absolute;
  inset-block: 0;
  inset-inline: 0 auto;
  display: flex;
  width: var(--tasks-page-side-width, 420px);
  --browser-panel-width: 100%;
}

.tasks-page-side-content > * {
  flex: 1;
  min-width: 0;
}

.tasks-panel .file-preview-header {
  --task-list-glyph: 16px;
}

/* 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);
  }
}

/*
 * The page before the first task: the pitch, the composer and a faint list in the middle of the
 * column. The first start shows the real list, and the composer goes back to the top.
 */
.tasks-page[data-empty] .tasks-page-column {
  min-height: 100%;
}

.tasks-page[data-empty] .tasks-page-composer.composer-wrap {
  position: static;
}

.tasks-page-empty-pitch {
  display: grid;
  justify-items: center;
  gap: var(--openbot-space-3);
  margin-top: auto;
  padding: 0 var(--openbot-space-2) var(--openbot-space-6);
  text-align: center;
}

.tasks-page-empty-title {
  --tasks-page-empty-hand-size: calc(var(--openbot-text-display) * 1.2);
  display: grid;
  margin: 0;
  font-size: var(--openbot-text-display);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.tasks-page-empty-lead {
  color: var(--openbot-text-muted);
}

/* The one handwritten word of the title. It writes itself once. The app has no hand font, so it uses
 * the one of the system. Inline, not inline-block: a reader then hears "answer." with no space. */
.tasks-page-empty-word {
  color: var(--openbot-accent-text);
  font-family: "Bradley Hand", "Noteworthy", "Segoe Print", cursive;
  font-size: var(--tasks-page-empty-hand-size);
  clip-path: inset(-0.4em 100% -0.4em -0.2em);
  animation: tasks-page-empty-write 640ms linear 500ms forwards;
}

@keyframes tasks-page-empty-write {
  to {
    clip-path: inset(-0.4em -0.2em -0.4em -0.2em);
  }
}

.tasks-page-empty-lines {
  display: grid;
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-lg);
  line-height: 1.5;
}

/* The faint list. Each section is one fixed block, so a row moves to the next section by its position
 * only. It fades towards every edge. */
.tasks-page-empty-board {
  --tasks-page-empty-head: 1.75rem;
  --tasks-page-empty-block: calc(var(--tasks-page-empty-head) + var(--openbot-control-lg) + var(--openbot-space-4));

  position: relative;
  display: grid;
  grid-template-rows: repeat(3, var(--tasks-page-empty-block));
  margin: var(--openbot-space-2) 0 auto;
  padding-bottom: var(--openbot-space-8);
  opacity: 0.6;
  pointer-events: none;
  user-select: none;
  mask-image: radial-gradient(
    ellipse 80% 100% at 50% 45%,
    var(--openbot-text-primary) 45%,
    var(--openbot-transparent) 100%
  );
}

.tasks-page-empty-section.tasks-page-section {
  margin-top: 0;
}

.tasks-page-empty-section .tasks-page-section-heading {
  height: var(--tasks-page-empty-head);
}

.tasks-page-empty-rows {
  position: absolute;
  inset: 0;
}

.tasks-page-empty-row {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  transform: translateY(
    calc(
      var(--tasks-page-empty-slot) *
      var(--tasks-page-empty-block) +
      var(--tasks-page-empty-head) +
      var(--openbot-space-0-5)
    )
  );
  transition:
    transform 760ms var(--openbot-ease-out),
    opacity 600ms var(--openbot-ease-out),
    filter 600ms var(--openbot-ease-out),
    translate 600ms var(--openbot-ease-out);
  animation: tasks-page-empty-arrive 620ms var(--openbot-ease-out) both;
}

/* A row arrives in Waiting, as the row of a real start does. */
@keyframes tasks-page-empty-arrive {
  from {
    opacity: 0;
    filter: blur(4px);
    translate: 0 10px;
    scale: 0.97;
  }
}

/* An answered task leaves to make room for the next one. */
.tasks-page-empty-row[data-age="3"] {
  opacity: 0;
  filter: blur(3px);
  translate: 0 -8px;
}

@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],
  .tasks-page-empty-row {
    animation: none;
  }

  /* Less motion: the title word shows whole, and the list keeps one task in each section. */
  .tasks-page-empty-word {
    clip-path: none;
    animation: none;
  }

  .tasks-page-side,
  .tasks-page-agent-chevron,
  .tasks-page-agent-list,
  .tasks-page-agent-empty,
  .tasks-page-empty-row {
    transition: none;
  }
}


/* /@fs//home/ubuntu/openbot/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: end;
}
.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//home/ubuntu/openbot/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: end;
}

/* 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-lg);
}

.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: start;
  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);
}

/* Right to left, the arrow points the other way. */
.storage-row-chevron:dir(rtl) {
  transform: scaleX(-1);
}

.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%;
  inset-inline-start: 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-inline-start: 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-lg);
}

.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-inline-end: 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: start;
  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);
}

/* Machine use, at the top of Storage -------------------------------------- */

.machine-resources-metrics,
.machine-resources-settings {
  margin: 0;
  padding: 0;
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-grouped);
  list-style: none;
}

.machine-resources-metric {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 96px 44px;
  align-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3) var(--openbot-space-4);
}

.machine-resources-metric + .machine-resources-metric {
  border-top: 1px solid var(--openbot-border-grouped);
}

.machine-resources-icon {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-secondary);
}

.machine-resources-metric[data-tone="warning"] .machine-resources-icon {
  color: var(--openbot-warning);
}

.machine-resources-metric[data-tone="danger"] .machine-resources-icon {
  color: var(--openbot-danger);
}

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

.machine-resources-title {
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}

.machine-resources-meta {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

.machine-resources-bar {
  position: relative;
  display: flex;
  align-items: center;
}

.machine-resources-bar .ui-progress-track {
  height: 6px;
}

.machine-resources-metric[data-tone="warning"] .ui-progress-fill {
  background: var(--openbot-warning);
}

.machine-resources-metric[data-tone="danger"] .ui-progress-fill {
  background: var(--openbot-danger);
}

/* The alert level of the metric, on its bar. */
.machine-resources-threshold {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-secondary);
}

.machine-resources-value {
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  text-align: end;
}

.storage-message.machine-resources-alert .storage-message-icon {
  color: var(--openbot-warning);
}

.machine-resources-settings {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
  padding: var(--openbot-space-4);
}

.machine-resources-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-4);
}

.machine-resources-select {
  flex: 0 0 220px;
}

@container (max-width: 520px) {
  .machine-resources-metric {
    grid-template-columns: auto minmax(0, 1fr) 44px;
  }

  .machine-resources-bar {
    display: none;
  }

  .machine-resources-setting {
    flex-direction: column;
    align-items: stretch;
  }

  .machine-resources-select {
    flex-basis: auto;
  }
}

/* Library ----------------------------------------------------------------------- */

/* The files and pictures of every chat of a server. The page fills the space that its caller gives it. */
/* Holds the scrolled page and the selection pill over its bottom edge. */
.library-frame {
  position: relative;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.library-page {
  position: relative;
  display: flex;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  gap: var(--openbot-space-4);
  overflow-y: auto;
  padding: var(--openbot-space-8) var(--openbot-space-8) var(--openbot-space-6);
}

/* The last row can scroll up above the pill. */
.library-frame[data-pill] .library-page {
  padding-bottom: calc(var(--openbot-space-8) * 3);
}

.library-page[data-marquee] {
  cursor: default;
  user-select: none;
}

/* The rectangle that a drag draws over the files to select them. */
.library-marquee {
  position: absolute;
  z-index: 2;
  border: 1px solid var(--openbot-accent);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-accent-soft);
  pointer-events: none;
}

/* The selection pill has the surface of the jump-to-latest pill, with its ring and no drop shadow. */
.library-pill {
  position: absolute;
  z-index: 5;
  bottom: var(--openbot-space-6);
  left: 50%;
  display: flex;
  box-sizing: border-box;
  height: 44px;
  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);
  box-shadow: inset 0 0 0 1px var(--openbot-shadow-ring);
  color: var(--openbot-text-primary);
  translate: -50% 0;
  transition:
    background-color var(--openbot-duration-normal) var(--openbot-ease-out),
    border-color var(--openbot-duration-normal) var(--openbot-ease-out);
}

.library-pill[data-tone="danger"] {
  border-color: var(--openbot-danger-border);
  /* The soft danger color is translucent: lay it over the opaque surface. */
  background: linear-gradient(var(--openbot-danger-soft), var(--openbot-danger-soft)), var(--openbot-bg-surface-raised);
}

/* The content keeps its own width; the pill clips it while it springs to that width. */
.library-pill-face {
  position: relative;
  display: flex;
  width: max-content;
  flex: none;
  align-items: center;
  gap: var(--openbot-space-1);
  padding-inline: var(--openbot-space-1-5);
  white-space: nowrap;
}

.library-pill-progress {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  background: var(--openbot-accent-soft);
  transition: width var(--openbot-duration-slow) var(--openbot-ease-out);
}

.library-pill-count,
.library-pill-text {
  display: inline-flex;
  overflow: hidden;
  align-items: center;
  gap: var(--openbot-space-1-5);
  padding-inline: var(--openbot-space-2);
  font-size: var(--openbot-text-sm);
  font-weight: 620;
  font-variant-numeric: tabular-nums;
}

.library-pill-count > span {
  display: inline-block;
}

.library-pill-status {
  padding-inline: var(--openbot-space-3);
}

.ui-button.library-pill-button {
  border-radius: var(--openbot-radius-pill);
}

.library-pill-rule {
  width: 1px;
  height: 18px;
  margin-inline: var(--openbot-space-0-5);
  background: var(--openbot-border);
}

@media (prefers-reduced-motion: reduce) {
  .library-pill,
  .library-pill-progress {
    transition: none;
  }
}

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

.library-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
}

.library-title {
  margin: 0;
  font-size: var(--openbot-text-2xl);
  font-weight: var(--openbot-weight-semibold);
}

.library-tools {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
}

.library-views {
  display: flex;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
  gap: var(--openbot-space-0-5);
}

.library-views [aria-pressed="true"] {
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
}

.library-search {
  width: min(320px, 40vw);
}

.library-grid {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 4 220px;
  column-gap: var(--openbot-space-3);
}

.library-tile {
  position: relative;
  margin-bottom: var(--openbot-space-3);
  break-inside: avoid;
}

.ui-button.library-picture,
.ui-button.library-file-card {
  display: block;
  width: 100%;
  height: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-surface);
  color: inherit;
  font: inherit;
  text-align: start;
  white-space: normal;
  cursor: pointer;
}

.library-picture img {
  display: block;
  width: 100%;
  height: auto;
  /* A square until the picture loads, so a picture below the fold does not load at once. */
  aspect-ratio: auto 1 / 1;
}

.ui-button.library-file-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3);
}

.library-file-name {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  min-width: 0;
  padding-inline-end: var(--openbot-space-6);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}

.library-file-source {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}

.library-file-source:empty {
  display: none;
}

.library-tile-menu {
  position: absolute;
  top: var(--openbot-space-2);
  inset-inline-end: var(--openbot-space-2);
  opacity: 0;
}

.library-tile[data-kind="image"] .library-tile-menu {
  background: var(--openbot-bg-overlay);
}

.library-tile:is(:hover, :focus-within) .library-tile-menu,
.library-tile-menu[data-expanded] {
  opacity: 1;
}

/* The check mark of a file that can be picked for a delete. The tile or row button holds the state. */
.file-select-mark {
  display: inline-flex;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  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;
}

.file-select-mark[data-selected] {
  border-color: var(--openbot-accent);
  background: var(--openbot-accent);
  color: var(--openbot-text-on-accent);
}

.file-select-mark svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  stroke-width: 2.5;
}

.file-row[data-selected] {
  background: var(--openbot-accent-soft);
}

.library-tile-mark {
  position: absolute;
  top: var(--openbot-space-2);
  inset-inline-end: var(--openbot-space-2);
  pointer-events: none;
}

.library-tile[data-kind="image"] .library-tile-mark:not([data-selected]) {
  background: var(--openbot-bg-overlay);
}

.library-tile[data-selected] :is(.library-picture, .library-file-card).ui-button {
  border-color: var(--openbot-accent);
  outline: 1px solid var(--openbot-accent);
}

@media (hover: hover) {
  .ui-button.library-picture:hover,
  .ui-button.library-file-card:hover {
    border-color: var(--openbot-border-strong);
    background: var(--openbot-bg-surface);
    color: inherit;
  }
}

@media (max-width: 720px) {
  .library-page {
    padding: var(--openbot-space-4);
  }

  .library-head {
    flex-wrap: wrap;
  }

  .library-search {
    width: auto;
    flex: 1;
  }
}


/* /@fs//home/ubuntu/openbot/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;
  inset-inline-start: 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%;
}

/* The folder panel is the tallest and has no steps after it, so when it is hidden it takes no space.
   The panels that do have steps after them share one height, so steps 2 and 3 never move. */
.agent-import-setup-folder:not([data-selected]) {
  display: none;
}

.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-block: var(--openbot-space-2);
  padding-inline: var(--openbot-space-3) var(--openbot-space-2);
  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-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-3) var(--openbot-space-1);
  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: start;
  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-lg);
}

.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-lg);
}

.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-inline-start: -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);
}

/* The first screen: one large button for each place the agents can be now. */
.agent-import-sources {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.agent-import-source .agent-import-picker-copy {
  flex: 1;
}

.agent-import-source-logo {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  flex: 0 0 auto;
  color: var(--openbot-text-primary);
  fill: currentColor;
}

.agent-import-back.ui-button {
  align-self: flex-start;
}

.agent-import-back.ui-button svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

/* Right to left, the arrow points the other way. */
.agent-import-back.ui-button > svg[class~="lucide-arrow-left"]:dir(rtl) {
  transform: scaleX(-1);
}

/* The Hermes app icon: a light tile on a dark theme and a dark one on a light theme, as Hermes ships both. */
.hermes-logo-tile {
  fill: var(--openbot-text-primary);
}

.hermes-logo-mark {
  fill: var(--openbot-bg-canvas);
}

.agent-import-source-label {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
}

.agent-import-source-label-logo {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
}

/* A Hermes profile: its head row, then every item it holds. */
.agent-import-profile {
  gap: var(--openbot-space-2);
}

.agent-import-profile-head {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
}

.agent-import-profile-name {
  margin: 0;
}

.agent-import-chevron {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

.agent-import-chevron-open {
  transform: rotate(180deg);
}

.agent-import-rerun {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-grouped);
}

.agent-import-items[data-muted="true"] {
  opacity: 0.5;
}

.agent-import-item {
  align-items: flex-start;
}

.agent-import-allow {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--openbot-space-1-5);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  cursor: pointer;
}

/* A command is the exact text to type, so it reads as code and wraps rather than hides its end. */
.agent-import-command {
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  overflow-wrap: anywhere;
  white-space: normal;
}


/* /@fs//home/ubuntu/openbot/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);
}

/* Right to left, the arrow points the other way. */
.instance-transfer-flow-arrow:dir(rtl),
.instance-transfer-back > svg[class~="lucide-chevron-left"]:dir(rtl) {
  transform: scaleX(-1);
}

.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: start;
  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//home/ubuntu/openbot/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: start;
  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]):hover {
    background: var(--openbot-hover);
    color: var(--openbot-text-primary);
  }
}

/* The leading icon of a section is muted at rest, as in menus and on the page rail. It takes the primary text
 * color with the label on hover, on keyboard focus and on the open section. The line does not change. Other
 * icons in the row, such as the warning of a marketplace app, keep their own colors. */
.settings-modal-nav-item > svg:first-child {
  color: var(--openbot-text-muted);
}

.settings-modal-nav-item:is([aria-current], [data-selected], :focus-visible) > svg:first-child {
  color: var(--openbot-text-primary);
}

@media (hover: hover) and (pointer: fine) {
  .settings-modal-nav-item:hover > svg:first-child {
    color: var(--openbot-text-primary);
  }
}

.settings-modal-main {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  background: var(--openbot-bg-canvas);
}

.settings-modal-footer {
  display: contents;
}

/*
 * The path to an open detail page, such as `Providers › ChatGPT`. It looks as the path of a Marketplace page
 * does. The parent goes back to the section: it is plain text until the pointer is on it, and the margins cancel
 * the padding and border of its chip, so the text stays on the inset.
 */
.settings-page-path {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-1-5);
  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);
  white-space: nowrap;
}

.settings-page-path .settings-page-path-parent {
  flex: 0 1 auto;
  min-width: 0;
  margin-inline: calc(-1 * var(--openbot-space-2) - 1px) calc(-1 * var(--openbot-space-1));
  overflow: hidden;
  border-color: transparent;
  background: transparent;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-page-path .settings-page-path-parent:focus-visible {
  border-color: var(--openbot-border);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-primary);
}

@media (hover: hover) and (pointer: fine) {
  .settings-page-path .settings-page-path-parent:hover:not(:disabled) {
    border-color: var(--openbot-border);
    background: var(--openbot-bg-control);
    color: var(--openbot-text-primary);
  }
}

.settings-page-path-separator {
  flex: 0 0 auto;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
}

/* The separator points to the reading direction. */
.settings-page-path-separator:dir(rtl) {
  transform: scaleX(-1);
}

.settings-page-path-current {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font: inherit;
  text-overflow: ellipsis;
}

/* The top row has no room for the description of the section, so only screen readers read it. */
.settings-page-description {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.settings-modal-scroll-frame {
  position: relative;
  min-height: 0;
  overflow: hidden;
}

.settings-modal-scroll-frame::before,
.settings-modal-scroll-frame::after {
  position: absolute;
  inset-inline-end: var(--openbot-space-2);
  inset-inline-start: 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 section
   * title above the panel, when the window does not put that title in its top row. 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-on-accent);
}

.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-on-accent);
}

.settings-modal .ui-switch[data-checked] {
  background: var(--openbot-accent);
}

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

@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-on-accent);
  }
}

: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-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-block: 0 var(--openbot-space-3);
  padding-inline: 54px 0;
}

.provider-picker-embedded .provider-picker-accounts {
  margin-top: calc(-1 * var(--openbot-space-2));
  padding-block: 0 var(--openbot-space-2);
  padding-inline: 54px 0;
}

.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-inline-end: 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;
}

/* "Open external links in": browser names are longer than the other choices. */
.app-settings-modal-shell .settings-modal-link-select {
  width: 220px;
}

/* A line between the two fixed places and the browsers. */
.ui-select-item.settings-modal-select-group-end {
  margin-bottom: var(--openbot-space-1);
  border-bottom: 1px solid var(--openbot-border);
}

/* The command field under the link list on Linux and Windows. */
.settings-modal-link-command {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: var(--openbot-space-2);
}

.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: end;
  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-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-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: start;
  }

  .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%;
}

/* Back and Continue of the phone dialog follow the reading direction. */
.settings-mobile-dialog-footer svg:is([class~="lucide-arrow-left"], [class~="lucide-arrow-right"]):dir(rtl) {
  transform: scaleX(-1);
}

/*
 * The title of a settings page is in the top row of the window, so the panel itself keeps the space
 * above its first row. The rule is last because it must outweigh every padding rule of the panel above.
 */
.settings-modal-page > .settings-modal-main > .settings-modal-scroll-frame > .settings-modal-content {
  padding-top: var(--openbot-space-6);
}


/* /@fs//home/ubuntu/openbot/src/renderer/src/features/settings/settings-modal.css */
/*
 * Settings modal rules for markup that only the renderer draws: the provider section, the Dynamic
 * Island tab and the voice key 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.
 */

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

.settings-dynamic-island-size > .ui-slider-field,
.settings-dynamic-island-preview,
.settings-agent-dock-size {
  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);
}

/* An agent in the agent dock list, at the size of the server marks. */
.settings-agent-dock-avatar {
  width: 32px;
  height: 32px;
}

.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;
}

/* The Model and key rows of the Voice tab: the buttons stay before the menu or the key field. */
.settings-voice-model-actions {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}

.settings-voice-key-field > .ui-input {
  width: 100%;
}

/* A cloud model needs a key: the text says so in the warning color, with no outline or fill. */
.settings-modal-row .settings-voice-needs-key {
  color: var(--openbot-warning-text);
}

.settings-voice-toast-progress {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-top: var(--openbot-space-1);
}

.settings-voice-toast-progress > .ui-progress {
  flex: 1;
}

.settings-voice-toast-percent {
  font-variant-numeric: tabular-nums;
}

/* The voice server dialog is wider than the provider dialog, so each route fits on one line. */
.custom-provider-dialog.voice-server-dialog {
  width: min(640px, 100%);
}

/* One route on one line: name, model, voice, and its switch. The card draws the line between routes. */
.voice-server-dialog .voice-server-line {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) minmax(0, 2fr) auto;
  gap: var(--openbot-space-2) var(--openbot-space-3);
  align-items: center;
  padding: var(--openbot-space-3) var(--openbot-space-4);
}

.voice-server-dialog .voice-server-name {
  display: grid;
  grid-column: 1;
  min-width: 0;
}

.voice-server-dialog .voice-server-model {
  grid-column: 2;
  min-width: 0;
}

/* Dictation has no voice, so its model takes the voice column too. */
.voice-server-dialog .voice-server-wide {
  grid-column: 2 / 4;
}

.voice-server-dialog .voice-server-voice {
  grid-column: 3;
  min-width: 0;
}

.voice-server-dialog .voice-server-end {
  display: flex;
  grid-column: 4;
  justify-content: flex-end;
}

.voice-server-dialog .voice-server-line .settings-modal-select {
  width: 100%;
}


/* /@fs//home/ubuntu/openbot/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. Other
 * windows can show the OpenBot logo there. */
.window-rail {
  position: relative;
  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;
}

/* The logo has the size of a rail icon, in the column of the icons. Its top padding is the same as
 * the top padding of `.sidebar-topbar`, so it is on the center line of the server logo. */
.window-rail-logo {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  height: var(--left-header-height, 38px);
  align-items: center;
  justify-content: center;
  padding-top: 2px;
}

.window-rail-logo .app-logo {
  display: block;
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
}

.window-rail-logo-link {
  display: flex;
  border-radius: var(--openbot-radius-logo);
  -webkit-app-region: no-drag;
}

.window-rail-logo-link:focus-visible {
  outline: 0;
  box-shadow: var(--openbot-focus-ring);
}

.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;
}

/* A rail icon is 20px, so it takes the line of the large icons. The line does not change on hover or on
 * the open page; only the color does. */
.window-rail-button {
  --openbot-icon-stroke: var(--openbot-icon-stroke-lg);

  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);
  inset-inline-end: 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);
}

/* The usage of a custom agent: its logo with no ring, at the size of a rail icon. The hover card
 * shows the answer of the agent as it wrote it. */
.window-rail-button .window-rail-agent-usage-logo {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}

.window-rail-agent-usage {
  display: grid;
  padding-inline: var(--openbot-space-1);
  gap: var(--openbot-space-1);
}

.window-rail-agent-usage-text {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* A row of the More menu: the page, then its pin. */
.window-rail-more-menu .window-rail-more-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--openbot-control-md);
  align-items: center;
  border-radius: var(--ui-menu-item-radius);
  transition: background-color var(--openbot-duration-hover) var(--openbot-ease-out);
}

/* The whole line highlights, for the page and for its pin. The items have no background of their own. */
.ui-action-menu.window-rail-more-menu .window-rail-more-row:is(:hover, :has([data-highlighted])) {
  background: var(--ui-menu-item-hover);
}

.ui-action-menu.window-rail-more-menu
  .window-rail-more-row
  :is([role="menuitem"], [role="menuitemcheckbox"]):is(:hover, :focus-visible, [data-highlighted]) {
  background: transparent;
}

/* The pin shows on a pinned page, and on the row under the pointer or the keyboard. The shared
 * .ui-action-menu item rule outranks a single class, so this rule names the role to center the pin. */
.ui-action-menu.window-rail-more-menu .window-rail-more-pin[role="menuitemcheckbox"] {
  justify-content: center;
  padding: 0;
  opacity: 0;
}

.ui-action-menu.window-rail-more-menu
  .window-rail-more-row:is([data-pinned], :hover, :focus-within)
  .window-rail-more-pin {
  opacity: 1;
}

/* A touch screen has no hover, so each pin shows. */
@media (hover: none) {
  .ui-action-menu.window-rail-more-menu .window-rail-more-pin[role="menuitemcheckbox"] {
    opacity: 1;
  }
}

/* A pinned page has a pin in the primary text color, as a highlighted icon. Icons stay outlines. */
.window-rail-more-menu .window-rail-more-row[data-pinned] .window-rail-more-pin > .agent-context-icon {
  color: var(--openbot-text-primary);
}

/* The page icon takes the primary text color with its row, also when the pin is highlighted. */
.ui-action-menu.window-rail-more-menu
  .window-rail-more-row:is(:hover, :has([data-highlighted]))
  > [role="menuitem"]
  > .agent-context-icon {
  color: var(--openbot-text-primary);
}


/* /@fs//home/ubuntu/openbot/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: var(--openbot-bg-frame);
  /* 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;
  }

  /* The agent list stays beside the Tasks page here, so the page has no button to hide it. */
  .app-frame .tasks-page-header > .side-panel-toggle {
    display: none;
  }
}

/* A window with no macOS window buttons starts the server menu at the left edge of the search field
 * and the rows below it, at all widths. The web frame has the macOS class but no buttons. The
 * selector must out-rank the macOS rule below, which also matches the web frame. */
.app-window
  > :is(.web-app-frame, .app-frame:not(.app-frame-platform-darwin)):not(.app-frame-with-server-rail)
  > .sidebar:not(.sidebar-compact)
  .sidebar-topbar {
  padding-inline-start: var(--openbot-space-3);
}

@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. The window buttons are at the inline start in every language (`window-buttons.ts`).
   * The web frame has no window buttons; the rule above sets its inset. */
  .app-window
    > .app-frame-platform-darwin:not(.app-frame-with-server-rail, .web-app-frame)
    > .sidebar:not(.sidebar-compact)
    .sidebar-topbar {
    padding-inline-start: 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-block: 0 calc(var(--window-edge) + 1px);
    padding-inline: 0 calc(var(--window-edge) + 1px);
    background: var(--window-frame);
  }

  .app-window > .app-frame-edge::before {
    position: absolute;
    z-index: -1;
    inset-block: calc(var(--left-header-height) - 1px) var(--window-edge);
    inset-inline: 0 var(--window-edge);
    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 {
    inset-inline-start: var(--server-rail-width);
  }

  /* The agent dock in the window has its column at the right edge, as wide as the dock
   * (`DOCK_WIDTH` in `agent-dock-motion.ts`), so it does not cover the card. */
  .app-window > .app-frame-edge.app-frame-agent-dock {
    --agent-dock-column: calc(64px - var(--window-edge) - 1px);
    padding-inline-end: calc(var(--window-edge) + 1px + var(--agent-dock-column));
  }

  .app-window > .app-frame-edge.app-frame-agent-dock::before {
    inset-inline-end: calc(var(--window-edge) + var(--agent-dock-column));
  }

  .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;
  }

  /* The sidebar shows the card, and the channel title sits on the top row, so an avatar outline takes
   * the colour of the one it is on. */
  .app-window > .app-frame-edge > .sidebar {
    --agent-avatar-outline: var(--openbot-bg-canvas);
  }

  .app-window > .app-frame-edge .channel-title {
    --agent-avatar-outline: var(--window-frame);
  }

  .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-block: var(--left-header-height) 0;
    inset-inline: auto 0;
    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)::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 {
    inset-inline-end: 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-inline-start: 0;
  }

  .app-window > .app-frame-edge :is(.settings-panel, .browser-panel)::before {
    inset-block: calc(var(--left-header-height) - 1px) 0;
    inset-inline: 0 auto;
    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) {
    position: relative;
  }

  .app-window
    > .app-frame-edge
    :is(.settings-panel, .browser-panel)
    > :is(.settings-panel-header, .file-preview-header)::before {
    inset-inline-start: 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)::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-end-end-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-inline-end: 0;
    border-radius: 0;
    border-end-end-radius: calc(var(--openbot-radius-card) - 1px);
  }

  /* 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
    :is(.conversation-header, .tasks-page-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 :is(.conversation-header, .tasks-page-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
      :is(.conversation-header, .tasks-page-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-inline-start: calc(var(--openbot-space-2) + 1px);
    overflow: visible;
  }

  .app-window > .app-frame-edge .conversation-header-actions > .side-panel-toggle::before {
    position: absolute;
    top: 50%;
    inset-inline-start: 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) {
    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-inline-start: 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 empty month fills the card and clips at its bottom edge, so the pitch stays in the middle of
   * what the user sees. A pitch taller than the card scrolls. */
  .app-window > .app-frame-edge > .window-page .routine-planner-empty {
    min-height: 0;
    overflow-y: auto;
    grid-template-rows: minmax(0, 1fr);
  }

  .app-window > .app-frame-edge > .window-page :is(.routine-planner-empty-board, .routine-planner-empty-board > *) {
    min-height: 0;
    overflow: hidden;
  }

  .app-window > .app-frame-edge > .window-page .routine-planner-empty-board {
    grid-template-rows: minmax(0, 1fr);
  }

  /* A narrow card puts the runs below the pitch, so both rows keep their height and scroll. */
  @container (max-width: 920px) {
    .app-window > .app-frame-edge > .window-page .routine-planner-empty {
      grid-template-rows: none;
    }
  }

  /* The Tasks page sits in the middle pane beside the agent list, as the routine canvas does. Its title
   * goes in the top row, as the chat header does. The list and the task panel go in the card below it.
   * The card draws the surface, so the page has no background of its own. */
  .app-window > .app-frame-edge > .app-frame-panes .tasks-page {
    position: relative;
    box-sizing: border-box;
    padding-top: var(--left-header-height);
    background: transparent;
  }

  /* The header spans the top row of the pane, and its title is plain text, so the whole row moves the
   * window. */
  .app-window > .app-frame-edge > .app-frame-panes .tasks-page-header {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: var(--left-header-height);
    padding: 0 var(--openbot-space-3);
    -webkit-app-region: drag;
  }

  .app-window > .app-frame-edge > .app-frame-panes .tasks-page-header h2 {
    font-size: var(--openbot-text-md);
    font-weight: var(--openbot-weight-medium);
    white-space: nowrap;
  }

  /* The rail and the agent list are the way back, so the title has no Back button and no server name. */
  .app-window > .app-frame-edge > .app-frame-panes .tasks-page-header > .ui-icon-button,
  .app-window > .app-frame-edge > .app-frame-panes .tasks-page-header > h2 > span {
    display: none;
  }

  .app-frame-edge > .app-frame-panes .tasks-page-header h2:focus {
    outline: none;
  }

  .app-window > .app-frame-edge > .app-frame-panes .tasks-page-column {
    padding-top: var(--openbot-space-6);
  }

  .app-window > .app-frame-edge > .app-frame-panes .tasks-page-side {
    border-end-end-radius: calc(var(--openbot-radius-card) - 1px);
  }

  /* The Tasks page opens with the agent list hidden. Its header button shows the list. Until then the
   * page spans the sidebar, as the schedule page does. The server menu stays in the top row, and the
   * page lets clicks through to it. */
  .app-frame-edge.app-frame-sidebar-hidden > .sidebar > :not(.sidebar-topbar),
  .app-frame-edge.app-frame-sidebar-hidden > .left-panel-resizer {
    visibility: hidden;
  }

  .app-frame-edge.app-frame-sidebar-hidden > .sidebar .sidebar-new-button,
  .app-frame-edge.app-frame-sidebar-hidden > .sidebar::before {
    display: none;
  }

  /* Out of the grid flow, as the schedule page is: a grid cell would push the sidebar to a second row. */
  .app-window > .app-frame-edge.app-frame-sidebar-hidden > .app-frame-panes {
    position: absolute;
    grid-row: 1 / -1;
    grid-column: -4 / -1;
    inset: 0;
    pointer-events: none;
  }

  .app-window > .app-frame-edge.app-frame-sidebar-hidden > .app-frame-panes .tasks-page-header {
    inset-inline-start: var(--left-panel-width);
  }

  .app-window > .app-frame-edge.app-frame-sidebar-hidden > .app-frame-panes :is(.tasks-page-scroll, .tasks-page-side) {
    pointer-events: auto;
  }

  /* 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, 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-block: 0;
    inset-inline: 1px 0;
  }

  /* The schedule, usage and Marketplace titles, and the path to an open settings detail page, 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. The section list and
   * the panel of a settings page start below the top row. The page covers the server menu and inherits
   * `-webkit-app-region`, so the frame must not drag: a drag region over the menu takes its clicks. */
  .app-frame-edge[data-window-page-kind="settings"] > .window-page {
    pointer-events: none;
  }

  .app-frame-edge[data-window-page-kind="settings"] > .window-page > .settings-page {
    grid-template-rows: var(--left-header-height) minmax(0, 1fr);
  }

  .app-frame-edge[data-window-page-kind="settings"] > .window-page > .settings-page > .settings-page-nav {
    grid-row: 2;
  }

  .app-frame-edge[data-window-page-kind="settings"]
    > .window-page
    > .settings-page
    :is(.settings-page-nav, .settings-page-content, .settings-page-path) {
    pointer-events: auto;
    -webkit-app-region: no-drag;
  }

  .app-frame-edge[data-window-page-kind="settings"] > .window-page > .settings-page > .settings-page-path-row {
    padding: 0 var(--openbot-space-3);
    -webkit-app-region: drag;
  }

  .app-frame-edge[data-window-page-kind="settings"]
    > .window-page
    > .settings-page
    > .settings-page-path-row
    > .settings-page-path {
    /* Only the path text stops the drag, so the rest of the top row still moves the window. */
    width: auto;
    flex: 0 1 auto;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
  }

  .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 {
    inset-inline-start: 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-inline-start: 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,
      .routine-planner-empty,
      .routine-planner-error,
      .marketplace-heading,
      .marketplace-nav,
      .skills-marketplace-body
    ) {
    pointer-events: auto;
  }

  /* The Marketplace page: the path of a page goes in the top row, as the usage title does. The side panel and the
   * list are 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-heading {
    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) > .ui-icon-button,
  .app-window > .app-frame-edge > .window-page :is(.agent-usage-identity, .routine-planner-identity) > h2 > span {
    display: none;
  }

  .app-frame-edge > .window-page :is(.agent-usage-identity, .routine-planner-identity) h2:focus {
    outline: none;
  }
}

/* The settings page: the nav at the width of the sidebar, and the path to an open detail page above the panel. */
.settings-page {
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 0;
  grid-template-columns: max(var(--left-panel-width, 280px), 220px) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
}

.settings-page-path-row {
  display: flex;
  min-width: 0;
  grid-column: 2;
  grid-row: 1;
  align-items: center;
  padding: var(--openbot-space-4) 0 0;
}

.settings-page-path-row:empty {
  display: none;
}

/* Below the top row, the path takes the column and the inline padding of the panel, so both start on one edge. */
.settings-page-path-row > .settings-page-path {
  width: 100%;
  max-width: 784px;
  margin-inline: auto;
  padding-inline: var(--openbot-space-8);
}

.settings-page-nav {
  display: flex;
  grid-row: 1 / -1;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  gap: var(--openbot-space-1);
  overflow: hidden;
  border-inline-end: 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);
}

/* An edge of the list fades when more sections are past it, so the footer row does not cut a
   section in half. The fade follows the scroll position. */
@property --settings-page-fade-start {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --settings-page-fade-end {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@supports (animation-timeline: scroll()) {
  .settings-page-sections,
  .settings-page-results {
    --settings-page-fade-size: var(--openbot-space-6);

    mask-image: linear-gradient(
      to bottom,
      transparent,
      var(--openbot-text-primary) var(--settings-page-fade-start),
      var(--openbot-text-primary) calc(100% - var(--settings-page-fade-end)),
      transparent
    );
    animation:
      settings-page-fade-start linear both,
      settings-page-fade-end linear both;
    animation-timeline: scroll(self block), scroll(self block);
    animation-range:
      0 var(--settings-page-fade-size),
      calc(100% - var(--settings-page-fade-size)) 100%;
  }
}

@keyframes settings-page-fade-start {
  from {
    --settings-page-fade-start: 0px;
  }

  to {
    --settings-page-fade-start: var(--settings-page-fade-size);
  }
}

@keyframes settings-page-fade-end {
  from {
    --settings-page-fade-end: var(--settings-page-fade-size);
  }

  to {
    --settings-page-fade-end: 0px;
  }
}

.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 */
/* The search has more space below it than the gap of the nav, so it does not look like a section row. */
.settings-page-search {
  flex: none;
  margin-bottom: var(--openbot-space-2);
  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);
}

/* The row to the other settings page: below the section list, apart from it, at the end of the column. */
.settings-page-footer {
  flex: none;
  margin-inline: calc(-1 * var(--openbot-space-3));
  --settings-page-switch-radius: calc(var(--openbot-radius-card) - var(--openbot-space-1));
  border-top: 1px solid var(--openbot-border);
  padding: var(--openbot-space-1);
}

.settings-page-footer:empty {
  display: none;
}

/* The row fills the footer with the same space on each side. Its corners are concentric with the
   corner of the window below it. The space around the icons is the same on all sides: the chevron
   glyph leaves a third of its box empty at its end, so the end padding is that much smaller. */
.settings-page-footer > .settings-page-switch {
  min-height: var(--openbot-control-xl);
  border-radius: var(--settings-page-switch-radius);
  padding-inline: var(--openbot-space-3) calc(var(--openbot-space-3) - var(--openbot-icon-md) / 3);
  /* A section row, not a button: the text of the shared button is larger and heavier. */
  font-size: var(--openbot-text-md);
  font-weight: inherit;
}

.settings-page-switch .server-menu-mark,
.settings-page-switch-avatar {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}

.settings-page-switch-avatar {
  display: block;
  overflow: hidden;
  border-radius: var(--openbot-radius-pill);
}

.settings-page-switch-avatar > img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  outline: 1px solid var(--openbot-image-outline);
  outline-offset: -1px;
}

.settings-page-switch-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-page-switch-chevron {
  color: var(--openbot-text-muted);
}

/* The chevron points to the reading direction. */
.settings-page-switch-chevron:dir(rtl) {
  transform: scaleX(-1);
}

.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: start;
  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-inline-start: 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;
  grid-column: 2;
  grid-row: 2;
  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 .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 auto minmax(0, 1fr);
  }

  /* The path of an open detail page is between the sections and the panel. */
  .settings-page-path-row {
    grid-column: 1;
    grid-row: 2;
  }

  .settings-page-path-row > .settings-page-path {
    padding-inline: var(--openbot-space-4);
  }

  .settings-page-content {
    grid-column: 1;
    grid-row: 3;
  }

  .settings-page-nav {
    grid-column: 1;
    grid-row: 1;
    border-inline-end: 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);
  }
}

/* A window that shows one chat has no sidebar and no resizer, so the chat takes the whole
 * frame. Its header starts after the macOS window buttons. */
.app-window > .app-frame.app-frame-chat-window {
  grid-template-columns: 0 0 minmax(0, 1fr);
}

.app-frame-chat-window > .left-panel-resizer {
  display: none;
}

.app-frame-chat-window.app-frame-platform-darwin .conversation-header {
  padding-inline-start: 76px;
}

/* The hint that one press of Cmd + Q does not quit. The window behind it is dimmed and blurred, as
 * behind a dialog, so the hint is clear on every page. It is over every page and dialog of the page.
 * A browser tab is a native view, so the conversation hides it while the hint shows. A click goes
 * through the hint to the page below. */
.quit-shortcut-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--openbot-layer-tooltip);
  display: grid;
  place-items: center;
  background: var(--openbot-dialog-overlay);
  backdrop-filter: blur(var(--openbot-space-2));
  pointer-events: none;
  animation: quit-shortcut-in var(--openbot-duration-fast) var(--openbot-ease-out);
}

/* The hint names the agents that the quit stops, beside their working faces. */
.quit-shortcut-hint {
  --agent-avatar-outline: var(--openbot-bg-surface-raised);

  display: flex;
  align-items: center;
  gap: var(--openbot-space-4);
  max-width: calc(100vw - 2 * var(--openbot-space-4));
  padding: var(--openbot-space-3) var(--openbot-space-8) var(--openbot-space-3) var(--openbot-space-3);
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-primary);
}

.quit-shortcut-avatars {
  display: flex;
  flex: none;
  align-items: center;
}

/* The plush sits low in its box, as in a sidebar row, so the same optical offset centres it. */
.quit-shortcut-avatars .agent-avatar {
  --agent-avatar-optical-offset: -5px;

  width: 40px;
  height: 40px;
}

.quit-shortcut-avatars .agent-avatar + .agent-avatar {
  margin-inline-start: calc(-1 * var(--openbot-space-2));
}

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

.quit-shortcut-agents {
  font-size: var(--openbot-text-xl);
  font-weight: 500;
  line-height: var(--openbot-leading-xl);
  text-wrap: balance;
}

.quit-shortcut-instruction {
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
  white-space: nowrap;
}

@keyframes quit-shortcut-in {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .quit-shortcut-backdrop {
    animation: none;
  }
}


/* /@fs//home/ubuntu/openbot/src/renderer/src/features/files/library.css */
/* The Library page of the desktop window. The page and the file viewer share one cell; the viewer
   covers the page. */
.library-panel {
  display: grid;
  height: 100%;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr);
}

.library-panel > * {
  grid-row: 1;
  grid-column: 1;
  min-height: 0;
}

@media (min-width: 721px) {
  /* The top row stays empty and lets clicks through to the server menu, as on the other titled pages. */
  .app-frame-edge[data-window-page-kind="titled"] > .window-page > .library-panel {
    grid-template-rows: var(--left-header-height) minmax(0, 1fr);
  }

  .app-frame-edge[data-window-page-kind="titled"] > .window-page > .library-panel > * {
    grid-row: 2;
    pointer-events: auto;
  }
}

/* The window card shows through the viewer, so the viewer keeps the card's border and rounded corners.
   The Library under it does not show. */
.library-panel-content[inert] {
  visibility: hidden;
}

.library-viewer {
  position: relative;
  overflow: hidden;
  border-end-start-radius: calc(var(--openbot-radius-card) - 1px);
  border-end-end-radius: calc(var(--openbot-radius-card) - 1px);
  outline: none;
}

/* The panel fills the viewer, as a maximized side panel fills the chat. */
.library-viewer .browser-panel {
  width: 100%;
  border-inline-start: 0;
}

/* The window gives a side panel a line to the chat and a short line in its header. The viewer has no
   chat beside it. */
.library-viewer :is(.browser-panel, .file-preview-header)::before {
  content: none;
}

.library-viewer .right-panel-resizer {
  display: none;
}


/* /@fs//home/ubuntu/openbot/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-inline-end: 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//home/ubuntu/openbot/src/renderer/src/features/settings/settings-mobile-connect.css */
/* Mobile Connect: the phones as cards, with the permanent link as one more card. "Add phone" and
 * the permanent link open a dialog that shows one code at a time, so a phone camera cannot catch
 * the wrong code. */
.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-qr-platform {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.settings-mobile-app-qr-logo {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

/* A code and the tag that says what it does. */
.settings-mobile-qr {
  display: grid;
  justify-items: center;
  gap: var(--openbot-space-2);
}

.settings-mobile-qr .ui-qr-code {
  overflow: hidden;
  border-radius: var(--openbot-radius-md);
}

/* A new code settles in, so a change of code reads as a new code. */
.settings-mobile-qr-code {
  animation: settings-mobile-qr-in var(--openbot-duration-overlay) var(--openbot-ease-out);
}

.settings-mobile-qr-slot {
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--openbot-space-2);
  border: 1px dashed var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
}

.settings-mobile-qr-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  min-height: 24px;
  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);
  font-weight: var(--openbot-weight-medium);
  white-space: nowrap;
}

.settings-mobile-qr-tag > svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: 0 0 auto;
}

.settings-mobile-qr-tag[data-kind="signin"] {
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
}

.settings-mobile-qr-tag[data-kind="permanent"] {
  background: var(--openbot-warning-soft);
  color: var(--openbot-warning-text);
}

.settings-mobile-qr-tag[data-kind="success"] {
  background: var(--openbot-success-soft);
  color: var(--openbot-success-text);
}

.settings-mobile-qr-tag-time {
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
}

.settings-mobile-link-warning {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  color: var(--openbot-warning-text);
}

.settings-mobile-link-warning > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

.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-phones {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--openbot-space-2);
}

.settings-mobile-phones-empty {
  grid-column: 1 / -1;
  display: grid;
  justify-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-8) var(--openbot-space-6);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  text-align: center;
}

.settings-mobile-phones-empty > .ui-button {
  margin-top: var(--openbot-space-2);
}

.settings-mobile-phones-empty-title,
.settings-mobile-phone-name {
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-semibold);
}

.settings-mobile-phones-empty-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--openbot-space-1);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
}

.settings-mobile-phones-empty-icon > svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
}

.settings-mobile-phone-card {
  display: flex;
  align-items: flex-start;
  gap: var(--openbot-space-3);
  min-width: 0;
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  /* A phone that signs in while the tab is open fades into the grid. */
  transition: opacity var(--openbot-duration-overlay) var(--openbot-ease-out);
}

@starting-style {
  .settings-mobile-phone-card {
    opacity: 0;
  }
}

.settings-mobile-phone-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-secondary);
}

.settings-mobile-phone-icon[data-active] {
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
}

.settings-mobile-phone-icon > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

.settings-mobile-phone-copy {
  min-width: 0;
  display: grid;
  flex: 1;
  gap: var(--openbot-space-0-5);
}

.settings-mobile-phone-via {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  margin-top: var(--openbot-space-1);
  color: var(--openbot-text-dim);
  font-size: var(--openbot-text-sm);
}

.settings-mobile-phone-via > svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}

.settings-mobile-link-card-slot {
  display: grid;
  gap: var(--openbot-space-1);
}

/* No permanent link yet: a dashed card that opens the explanation. */
.settings-mobile-link-card.ui-button {
  height: auto;
  justify-content: flex-start;
  border-style: dashed;
  font-weight: var(--openbot-weight-regular);
  text-align: start;
  white-space: normal;
}

.settings-mobile-link-card-hint {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

.settings-mobile-link-card-actions {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
}

/* How devices connect: the current route as a chip, and both routes in a popover. */
.settings-mobile-route-chip.ui-button > svg:last-child {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  color: var(--openbot-text-dim);
}

.settings-mobile-route-popover.ui-popover-menu-surface {
  width: 340px;
  display: grid;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-3);
}

.settings-mobile-route-popover-title {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
}

.settings-mobile-route-popover-description {
  margin: 0 0 var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

/* The dialogs: one code per screen. */
.settings-mobile-dialog.ui-dialog-content {
  width: min(460px, 100%);
  display: grid;
  overflow: hidden;
  outline: 0;
  background: var(--openbot-bg-sidebar);
}

.settings-mobile-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--openbot-space-4) 0;
  padding-inline: var(--openbot-space-6) var(--openbot-space-4);
}

.settings-mobile-dialog-title {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-xl);
  font-weight: var(--openbot-weight-semibold);
}

.settings-mobile-dialog-body {
  min-height: 300px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--openbot-space-4);
  padding: var(--openbot-space-4) var(--openbot-space-6) var(--openbot-space-6);
  text-align: center;
}

.settings-mobile-dialog-note {
  max-width: 320px;
}

.settings-mobile-dialog-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border-top: 1px solid var(--openbot-border);
}

.settings-mobile-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-2);
}

.settings-mobile-choices {
  width: 100%;
  display: grid;
  gap: var(--openbot-space-2);
}

.settings-mobile-choice.ui-button {
  height: auto;
  justify-content: flex-start;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3) var(--openbot-space-4);
  text-align: start;
  white-space: normal;
}

.settings-mobile-choice.ui-button > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  color: var(--openbot-text-secondary);
}

.settings-mobile-choice-text {
  display: grid;
  gap: var(--openbot-space-0-5);
}

.settings-mobile-choice-title {
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-semibold);
}

.settings-mobile-choice-hint {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
}

.settings-mobile-steps {
  display: grid;
  gap: var(--openbot-space-1-5);
  margin: 0;
  padding-inline-start: var(--openbot-space-4);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-align: start;
}

.settings-mobile-steps > li::marker {
  color: var(--openbot-text-dim);
  font-variant-numeric: tabular-nums;
}

.settings-mobile-link-intro,
.settings-mobile-link-code {
  max-width: 340px;
  display: grid;
  justify-items: center;
  gap: var(--openbot-space-2);
}

.settings-mobile-link-intro > .ui-button,
.settings-mobile-link-code > .settings-mobile-dialog-actions {
  margin-top: var(--openbot-space-2);
}

.settings-mobile-link-code > .settings-mobile-qr {
  margin-bottom: var(--openbot-space-2);
}

.settings-mobile-link-warning-title {
  color: inherit;
  font-weight: var(--openbot-weight-semibold);
}

.settings-mobile-enter {
  animation: settings-mobile-enter var(--openbot-duration-slow) var(--openbot-ease-out);
}

@keyframes settings-mobile-enter {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

@keyframes settings-mobile-qr-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}

@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 (prefers-reduced-motion: reduce) {
  .settings-mobile-connect-qr-stage .ui-qr-code,
  .settings-mobile-phone-card {
    transition: none;
  }

  .settings-mobile-enter,
  .settings-mobile-qr-code,
  .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;
  }
}

/* How devices connect: two cards with a radio dot, as in the sound theme picker. */
.settings-mobile-route-choice {
  display: grid;
  gap: var(--openbot-space-2);
}

.settings-mobile-route-option {
  display: flex;
  min-width: 0;
}

.settings-mobile-route-card {
  display: flex;
  flex: 1;
  align-items: flex-start;
  gap: var(--openbot-space-3);
  min-width: 0;
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  box-shadow: inset 0 0 0 1px var(--openbot-border);
  cursor: pointer;
  transition-property: background-color, box-shadow;
  transition-duration: var(--openbot-duration-hover), var(--openbot-duration-normal);
  transition-timing-function: var(--openbot-ease-out);
}

.settings-mobile-route-card:hover {
  background: var(--openbot-bg-control-hover);
}

.settings-mobile-route-card[data-disabled] {
  cursor: default;
}

.settings-mobile-route-card[data-checked] {
  box-shadow:
    inset 0 0 0 1.5px var(--openbot-accent),
    0 1px 3px var(--openbot-shadow-popover-ambient);
}

/* A ring, filled when the route is selected. */
.settings-mobile-route-dot {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  margin-top: 1px;
  border-radius: var(--openbot-radius-pill);
  box-shadow: inset 0 0 0 1.5px var(--openbot-text-muted);
  transition: box-shadow var(--openbot-duration-normal) var(--openbot-ease-out);
}

.settings-mobile-route-dot::after {
  width: 8px;
  height: 8px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
  content: "";
  transform: scale(0);
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}

.settings-mobile-route-card[data-checked] .settings-mobile-route-dot {
  box-shadow: inset 0 0 0 1.5px var(--openbot-accent);
}

.settings-mobile-route-card[data-checked] .settings-mobile-route-dot::after {
  transform: scale(1);
}

.settings-mobile-route-option:has(:focus-visible) .settings-mobile-route-card {
  box-shadow: var(--openbot-focus-ring);
}

.settings-mobile-route-text {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  min-width: 0;
}

.settings-mobile-route-name {
  display: flex;
  flex-wrap: wrap;
  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-mobile-route-hint {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}


/* /@fs//home/ubuntu/openbot/packages/ui/src/features/settings/settings-hosted-sites.css */
.hosted-sites-overview {
  display: grid;
  gap: var(--openbot-space-1);
}

.hosted-sites-usage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}

.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: start;
}

.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//home/ubuntu/openbot/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%;
  stroke-width: var(--openbot-icon-stroke-lg);
}

/* An app icon fills its tile. */
.integration-logo-tile > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* A connector's icon is a brand tile, so it fills its tile as an app icon does. */
.integration-logo-tile > .connector-brand-tile {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.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 */

/* One gap between every part of an integration page. */
.integration-page {
  display: grid;
  gap: var(--openbot-space-6);
}

.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;
}

/* A mark after the name, such as a shield, sits on the name's centre line. */
.integration-detail-name {
  display: inline-flex;
  gap: var(--openbot-space-1-5);
  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);
}

/* A body whose parts are all hidden, such as a plugin dialog before a failure, takes no gap. */
.integration-wizard-body:empty {
  display: none;
}

.integration-wizard-form {
  display: grid;
  gap: var(--openbot-space-4);
}

.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%);
}

/* A page drawn in the dialog, such as a joined server's sign-in page, needs room to type in. */
.integration-wizard-dialog[data-wide] {
  width: min(720px, calc(100vw - var(--openbot-space-6) * 2));
}

/* Over the Marketplace window and the menus it opens. Both portals are children of `body`, so the
   order of insertion alone cannot put this one on top. */
:is(.integration-dialog-backdrop, .integration-wizard-dialog)[data-nested] {
  z-index: calc(var(--openbot-layer-dialog-host) + 2);
}

.integration-wizard-dialog h2 {
  margin: 0;
}

.integration-dialog-close {
  position: absolute;
  top: var(--openbot-space-3);
  inset-inline-end: 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);
}

/* ------------------------------------------------ card content */

/* Content of a card that is not rows: a form, a list, information. One body, so no row divider cuts it. */
.integration-card-body {
  display: grid;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3) var(--openbot-space-4);
}

/* A field in a card has the size of the buttons beside it, as in Server settings. */
.integration-card-body :where(.ui-input) {
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}

/* The last line of a card: what the rows above it mean. */
.integration-card-note {
  padding: var(--openbot-space-3) var(--openbot-space-4);
}

/* On the card fill, the danger tone needs its text step for contrast. */
.integration-card-note[data-tone="danger"] {
  color: var(--openbot-danger-text);
}

/* ------------------------------------------------ disconnect dialog */

/* What a disconnect removes and what it keeps, one line each. */
.integration-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);
}

.integration-effects li {
  display: flex;
  gap: var(--openbot-space-3);
  align-items: center;
  padding: var(--openbot-space-2);
}

.integration-effects li + li {
  border-top: 1px solid var(--openbot-border);
}

.integration-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);
}

.integration-effects .integration-effect-icon > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

.integration-effects li[data-tone="danger"] .integration-effect-icon {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger-text);
}

.integration-effects li[data-tone="success"] .integration-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. */
.integration-confirm.ui-button-variant-destructive {
  color: var(--openbot-danger-text);
}

/* ------------------------------------------------ linked rows */

/* 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-border-focus);
  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);
}

/* Right to left, the arrow points the other way. */
.integrations-hub-chevron:dir(rtl) {
  transform: scaleX(-1);
}

.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 {
  --integrations-agent-face-size: 32px;
  display: inline-block;
  flex: none;
  width: var(--integrations-agent-face-size);
  height: var(--integrations-agent-face-size);
}

.integrations-agent-face[data-size="sm"] {
  --integrations-agent-face-size: 24px;
}

/* In a list that also has agent faces, an icon stays in the middle of the same column, so the titles align. */
.ui-item-group:has(.integrations-agent-face:not([data-size="sm"])) .ui-item-media > svg {
  margin-inline: calc((32px - var(--openbot-icon-lg)) / 2);
}

/* An agent avatar stands low in its box. Lift it to the middle, as the marketplace avatar does. */
.integrations-agent-face > * {
  --agent-avatar-optical-offset: calc(var(--integrations-agent-face-size) * -0.14);
  width: 100%;
  height: 100%;
}


/* /@fs//home/ubuntu/openbot/packages/ui/src/features/settings/provider-settings-page.css */
/* Settings > Providers. The settings card and row classes do the layout; these rules add only what
   they do not have. */

.provider-settings-stack {
  display: grid;
  gap: var(--openbot-space-6);
}

/* The select value is a block; the logo and the name center in it. */
.provider-settings-select {
  width: 168px;
}

.provider-settings-select .ui-select-value,
.provider-settings-select-option {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}

.provider-settings-logo-off {
  opacity: 0.44;
}

.provider-settings-stack .ui-item-description.provider-settings-warning {
  color: var(--openbot-warning-text);
}

.provider-settings-stack .ui-item-description.provider-settings-error {
  color: var(--openbot-danger-text);
}

/* An account with two lines of text keeps its buttons on the title line. */
.provider-settings-account.ui-item {
  align-items: flex-start;
}

.provider-settings-account .ui-item-content {
  gap: var(--openbot-space-1);
}

.provider-settings-account .provider-picker-account-rename {
  max-width: 280px;
}

/* The usage badge is a shared badge that opens the usage popover of the app. */
.provider-settings-usage-badge {
  cursor: pointer;
  font: inherit;
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
}

.provider-settings-usage-badge:focus-visible {
  outline: 2px solid var(--openbot-focus-ring);
  outline-offset: 2px;
}

.provider-settings-progress {
  max-width: 320px;
}

/* Models: one compact row for each model, with a scroll for the long lists of OpenCode. */
.provider-settings-models.settings-modal-card {
  max-height: 360px;
  padding: 0;
  overflow-y: auto;
}

.provider-settings-models-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--openbot-space-1) 0;
  list-style: none;
}

.provider-settings-models-row {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  min-height: 32px;
  padding: 0 var(--openbot-space-3);
}

.provider-settings-models-row:hover {
  background: var(--openbot-bg-control-hover);
}

.provider-settings-models-name {
  display: flex;
  flex: 1;
  align-items: baseline;
  gap: var(--openbot-space-2);
  min-width: 0;
}

.provider-settings-models-name > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.provider-settings-models-name > :first-child {
  flex: none;
  max-width: 70%;
}

.provider-settings-models-id {
  min-width: 0;
  font-family: var(--openbot-font-mono);
}

.provider-settings-models-empty {
  display: block;
  padding: var(--openbot-space-3);
}

.provider-settings-models-error {
  color: var(--openbot-danger-text);
}


/* /@fs//home/ubuntu/openbot/packages/ui/src/features/settings/github-connector.css */
/* 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-search {
  position: relative;
  display: flex;
  align-items: center;
}

.github-connector-search > svg {
  position: absolute;
  inset-inline-start: 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-inline-start: 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. The rows' hover fill goes past
   the text, so the names line up with the search field. */
.github-connector-repository-list {
  display: grid;
  max-height: 260px;
  margin: 0 calc(var(--openbot-space-2) * -1);
  padding: 0;
  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;
}


/* /@fs//home/ubuntu/openbot/packages/ui/src/features/settings/onepassword-connector.css */
/* A vault secret: the labelled field, and its buttons in line with the field, not with the label. */
.vault-secret-form {
  display: flex;
  align-items: flex-end;
  gap: var(--openbot-space-3);
}

.vault-secret-form > .ui-field {
  flex: 1;
  min-width: 0;
}

.vault-secret-actions {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
}

/* A joined server's Bitwarden form: one field per row, the buttons under them. */
.bitwarden-connector-host-form {
  display: grid;
  gap: var(--openbot-space-3);
}

.bitwarden-connector-actions {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
}

/* 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//home/ubuntu/openbot/packages/ui/src/features/settings/slack-integration.css */
/* Marketplace > Apps > Slack, Discord, Telegram and WhatsApp: the channel pages (ChannelParts.tsx). */

.channel-stack {
  display: grid;
  gap: var(--openbot-space-0-5);
  justify-items: start;
}

/* ------------------------------------------------ connect dialog */

.channel-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);
}

.channel-checklist li {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
}

.channel-checklist li[data-state="done"] {
  color: var(--openbot-text-secondary);
}

.channel-checklist li[data-state="done"] svg {
  color: var(--openbot-success);
}

.channel-checklist-dot {
  width: 14px;
  height: 14px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
}

.channel-waiting {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
  justify-content: center;
}

.channel-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);
}

.channel-orchestrator-model {
  display: grid;
  gap: var(--openbot-space-1);
}

/* ------------------------------------------------ Discord roles dialog */

.discord-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;
}

.discord-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;
}

.discord-role-row:hover {
  background: var(--openbot-bg-control-hover);
}

.discord-role-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ------------------------------------------------ WhatsApp link dialog */

/* What the number is and how the phone links: cards with a radio dot, as in the mobile route choice. */
.whatsapp-choice {
  display: grid;
  gap: var(--openbot-space-2);
}

.whatsapp-choice[data-layout="row"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.whatsapp-choice-option {
  display: flex;
  min-width: 0;
}

.whatsapp-choice-card {
  display: flex;
  flex: 1;
  align-items: flex-start;
  gap: var(--openbot-space-3);
  min-width: 0;
  padding: var(--openbot-space-2) var(--openbot-space-3);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  box-shadow: inset 0 0 0 1px var(--openbot-border);
  cursor: pointer;
  transition-property: background-color, box-shadow;
  transition-duration: var(--openbot-duration-hover), var(--openbot-duration-normal);
  transition-timing-function: var(--openbot-ease-out);
}

.whatsapp-choice-card:hover {
  background: var(--openbot-bg-control-hover);
}

.whatsapp-choice-card[data-disabled] {
  cursor: default;
}

.whatsapp-choice-card[data-checked] {
  box-shadow: inset 0 0 0 1.5px var(--openbot-accent);
}

.whatsapp-choice-option:has(:focus-visible) .whatsapp-choice-card {
  box-shadow: var(--openbot-focus-ring);
}

/* A ring, filled when the option is selected. */
.whatsapp-choice-dot {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  margin-top: 1px;
  border-radius: var(--openbot-radius-pill);
  box-shadow: inset 0 0 0 1.5px var(--openbot-text-muted);
  transition: box-shadow var(--openbot-duration-normal) var(--openbot-ease-out);
}

.whatsapp-choice-dot::after {
  width: 8px;
  height: 8px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
  content: "";
  transform: scale(0);
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}

.whatsapp-choice-card[data-checked] .whatsapp-choice-dot {
  box-shadow: inset 0 0 0 1.5px var(--openbot-accent);
}

.whatsapp-choice-card[data-checked] .whatsapp-choice-dot::after {
  transform: scale(1);
}

.whatsapp-choice-text {
  display: grid;
  gap: var(--openbot-space-0-5);
  min-width: 0;
}

.whatsapp-choice-name {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}

.whatsapp-choice-hint {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

/* The QR code above the steps on the phone. */
.whatsapp-link-qr {
  display: grid;
  gap: var(--openbot-space-3);
  justify-items: center;
}

.whatsapp-link-qr > .channel-checklist {
  justify-self: stretch;
}

.whatsapp-link-step-index {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}

/* The pairing code, large enough to type on the phone from this screen. */
.whatsapp-pairing-code {
  display: flex;
  gap: var(--openbot-space-3);
  align-items: center;
  justify-content: center;
  padding: var(--openbot-space-3);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
}

.whatsapp-pairing-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);
}

/* ------------------------------------------------ WhatsApp group dialog */

.whatsapp-groups {
  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;
}

.whatsapp-group-row {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
  justify-content: space-between;
  padding: var(--openbot-space-1) var(--openbot-space-2);
  border-radius: var(--openbot-radius-sm);
}

.whatsapp-group-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* /@fs//home/ubuntu/openbot/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//home/ubuntu/openbot/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 {
  /* A time axis: the weeks run from the oldest on the left in every language. */
  direction: ltr;
  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);
  }

  .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);
  }

  /* The fill starts at the right edge of a right-to-left track, so it grows from there. */
  .profile-bar-fill:dir(rtl) {
    transform-origin: right center;
  }

  .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-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//home/ubuntu/openbot/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;
  /* A 16px icon in an item row keeps the line of the small icons. */
  stroke-width: var(--openbot-icon-stroke);
  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: start;
}

.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.
 */
:root[data-surface="computer-use-highlight"],
:root[data-surface="computer-use-highlight"] body,
:root[data-surface="computer-use-highlight"] #root {
  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: start;
}

.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-inline-start: 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);
  inset-inline-end: 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//home/ubuntu/openbot/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-publish-setting.ui-switch-field {
  padding: var(--openbot-space-3) var(--openbot-space-4);
}

.server-settings-publish-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: end;
  user-select: text;
}

.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-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%;
  inset-inline-start: 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-inline-start: 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: end;
}

.server-settings-desktop-hint {
  max-width: 220px;
  text-align: end;
}

.server-settings-desktop-status {
  margin-top: var(--openbot-space-1);
}

@media (max-width: 720px) {
  .server-settings-readonly-name {
    align-items: flex-start;
    flex-direction: column;
  }

  .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: start;
  }

  .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-inline-start: 52px;
    justify-items: start;
    text-align: start;
  }
}

@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);
}

/* The empty pending list: sample invitations land behind the invite action. Both share one cell. */
.server-invites-empty {
  display: grid;
}

.server-invites-empty > * {
  grid-area: 1 / 1;
}

/* The middle of the faint list clears for the action, and the list fades out at the bottom. */
.server-invites-empty-board {
  min-height: calc(4 * 3.75rem);
  display: grid;
  align-content: start;
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
  mask-image:
    radial-gradient(ellipse 46% 72% at 50% 50%, var(--openbot-transparent) 58%, var(--openbot-text-primary) 100%),
    linear-gradient(var(--openbot-text-primary) 70%, var(--openbot-transparent));
  mask-composite: intersect;
}

.server-invites-empty-row {
  animation: server-invites-empty-land 560ms var(--openbot-ease-out) both;
}

.server-invites-empty-row > .ui-item {
  padding: var(--openbot-space-3) var(--openbot-space-4);
}

.server-invites-empty-row + .server-invites-empty-row {
  position: relative;
}

.server-invites-empty-row + .server-invites-empty-row::before {
  position: absolute;
  top: 0;
  right: var(--openbot-space-4);
  left: var(--openbot-space-4);
  height: 1px;
  background: var(--openbot-border);
  content: "";
}

.server-invites-empty-board[data-leaving] .server-invites-empty-row {
  animation: server-invites-empty-leave 700ms var(--openbot-ease-out) both;
}

@keyframes server-invites-empty-land {
  from {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(10px) scale(0.98);
  }
}

@keyframes server-invites-empty-leave {
  to {
    opacity: 0;
    filter: blur(3px);
    transform: translateY(-4px);
  }
}

.server-invites-empty-pitch {
  z-index: 1;
  width: 100%;
  max-width: 30rem;
  display: grid;
  place-self: center;
  justify-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-8) var(--openbot-space-6);
  text-align: center;
}

.server-invites-empty-title {
  display: grid;
  font-size: var(--openbot-text-3xl);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.server-invites-empty-quiet {
  color: var(--openbot-text-muted);
}

/* The one handwritten word writes itself once. The app has no hand font, so it uses the system's. */
.server-invites-empty-hand {
  display: inline-block;
  color: var(--openbot-accent-text);
  font-family: "Bradley Hand", "Noteworthy", "Segoe Print", cursive;
  line-height: 1;
  clip-path: inset(-0.4em 100% -0.4em -0.2em);
  animation: server-invites-empty-write 560ms linear 450ms forwards;
}

@keyframes server-invites-empty-write {
  to {
    clip-path: inset(-0.4em -0.2em -0.4em -0.2em);
  }
}

.server-invites-empty-action {
  width: 100%;
  max-width: 20rem;
  height: var(--openbot-control-lg);
  margin-top: var(--openbot-space-2);
}

@media (prefers-reduced-motion: reduce) {
  .server-invites-empty-row,
  .server-invites-empty-hand {
    animation: none;
    clip-path: none;
  }
}

/* The width of the zone list, which shows the long "Automatic (zone)" label of most hosts. */
.server-settings-timezone-pending {
  width: 200px;
  min-height: var(--openbot-control-sm);
}


/* /@fs//home/ubuntu/openbot/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//home/ubuntu/openbot/src/renderer/src/features/servers/server-company-sign-in.css */
/* Company sign-in in Members: the setup dialog and the one-time SCIM token. */

.custom-provider-dialog.company-sign-in-dialog {
  width: min(520px, 100%);
}

.company-sign-in-copy-row {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-top: var(--openbot-space-2);
}

.company-sign-in-copy-row > .ui-input,
.company-sign-in-copy-row > input {
  flex: 1;
  min-width: 0;
}

.company-sign-in-passed {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
}

.company-sign-in-passed svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-success);
}

.company-sign-in-secondary {
  display: flex;
  justify-content: center;
  gap: var(--openbot-space-2);
}


/* /@fs//home/ubuntu/openbot/packages/ui/src/features/marketplace/marketplace.css */
/* The Marketplace window: agents, apps and skills, and a page for each. Tokens only. */

/* ---------------------------------------------------------------- window */

/* A page of the window: the window card draws the surface, the line and the corner. */
.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;
  /* The side panel has the width of the settings page nav. The top row is above both columns. */
  grid-template-columns: max(var(--left-panel-width, 280px), 220px) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: var(--openbot-text-primary);
}

/* Menus and the connect and confirm dialogs open over the window. */
.marketplace-menu {
  z-index: calc(var(--openbot-layer-dialog-host) + 1);
}

/* `MarketplacePage` sets the body attribute; a `body:has()` rule restyles the whole page on each chat change. */
body[data-skills-marketplace] :is(.integration-dialog-backdrop, .integration-wizard-dialog):not([data-nested]) {
  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);
  grid-column: 1 / -1;
  min-height: 48px;
  padding-block: var(--openbot-space-2);
  padding-inline: var(--marketplace-inset) var(--openbot-space-2);
  border-bottom: 1px solid var(--openbot-border);
}

/* ---------------------------------------------------------------- side panel */

/* As the settings page nav: the title and the kinds, then the apps that the user connected. */
.marketplace-nav {
  display: flex;
  grid-row: 2;
  grid-column: 1;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  gap: var(--openbot-space-1);
  overflow-y: auto;
  padding: var(--openbot-space-4) var(--openbot-space-3) var(--openbot-space-3);
  border-inline-end: 1px solid var(--openbot-border);
}

.marketplace-nav-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 title takes the focus when the page opens, only so a screen reader reads it. */
.marketplace-nav-title:focus {
  outline: none;
}

.marketplace-nav-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The icon column holds an app logo, which has its own margin, so it is one step bigger than a line icon. The kind
   icons stay at their size in its center, so all names start at the same place. */
.marketplace-nav-item {
  grid-template-columns: var(--openbot-icon-lg) minmax(0, 1fr) auto;
}

/* A row is a shared Button: it keeps the text of a settings row, not the larger text of a button. */
.ui-button.marketplace-nav-item {
  font: inherit;
  font-size: var(--openbot-text-md);
  white-space: normal;
}

.ui-button.marketplace-nav-item[aria-current] {
  font-weight: var(--openbot-weight-medium);
}

/* The kind that holds the open page is selected, as the page itself is. */
.marketplace-nav-item[aria-current="location"] {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}

.marketplace-nav-item > svg:first-child {
  justify-self: center;
}

.marketplace-nav-count {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
  font-variant-numeric: tabular-nums;
}

.marketplace-nav-heading {
  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);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
}

.marketplace-nav-mark {
  display: grid;
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  place-items: center;
  overflow: hidden;
  border-radius: var(--openbot-radius-xs);
}

.marketplace-nav-mark > :is(svg, img) {
  width: 100%;
  height: 100%;
  stroke-width: var(--openbot-icon-stroke-lg);
}

.marketplace-nav-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketplace-nav-item > .marketplace-nav-warning {
  color: var(--openbot-warning-text);
}

.skills-marketplace-body {
  position: relative;
  grid-row: 2;
  grid-column: 2;
  overflow: auto;
  scrollbar-gutter: stable;
}

/* Each list and page has one width, so the content does not move when a page opens. The large list title needs more
   space below the top bar than the inset gives. */
.marketplace-frame {
  padding: calc(var(--openbot-space-8) + var(--openbot-space-2)) var(--marketplace-inset) var(--openbot-space-8);
}

.marketplace-frame > * {
  width: min(100%, 880px);
  margin-inline: auto;
}

.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-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-3) var(--openbot-space-1);
  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;
}

/* ---------------------------------------------------------------- heading */

.marketplace-heading {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--openbot-space-1-5);
  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;
}

/*
 * A parent in the path is plain text until the pointer is on it: then it shows the outline button chip, as the parent
 * in the path did before. The start margin cancels the chip's padding and border, so the text stays on the inset. The
 * end margin cancels less, so the chip does not touch the separator.
 */
.skills-marketplace .marketplace-crumb-parent {
  flex: 0 1 auto;
  min-width: 0;
  margin-inline: calc(-1 * var(--openbot-space-2) - 1px) calc(-1 * var(--openbot-space-1));
  overflow: hidden;
  border-color: transparent;
  background: transparent;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skills-marketplace .marketplace-crumb-parent:focus-visible {
  border-color: var(--openbot-border);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-primary);
}

@media (hover: hover) and (pointer: fine) {
  .skills-marketplace .marketplace-crumb-parent:hover:not(:disabled) {
    border-color: var(--openbot-border);
    background: var(--openbot-bg-control);
    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);
}

/* Right to left, the arrow points the other way. */
.marketplace-crumb-separator:dir(rtl),
.marketplace-skill-group-head .ui-button > svg[class~="lucide-chevron-right"]:dir(rtl) {
  transform: scaleX(-1);
}

/* 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);
}

/* Why an app does not connect here: it wraps, as cut to one line it would lose what to do. */
.marketplace-app-reason {
  white-space: normal;
}

.marketplace-command {
  overflow-wrap: anywhere;
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
}

/* The head of a list: its title and one line, then the search and the filter on one row. */
.marketplace-browse {
  gap: var(--openbot-space-8);
}

.marketplace-browse-head {
  display: grid;
  gap: var(--openbot-space-6);
}

.marketplace-browse-copy {
  display: grid;
  gap: var(--openbot-space-1);
}

.marketplace-browse-copy > p {
  margin: 0;
}

.marketplace-browse-title {
  margin: 0;
  font-size: var(--openbot-text-3xl);
}

.marketplace-toolbar {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}

.marketplace-search {
  position: relative;
  flex: 1;
  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;
  stroke-width: var(--openbot-icon-stroke-lg);
}

.marketplace-skill-mark[data-kind="icon"] > img {
  width: 100%;
  height: 100%;
}

.marketplace-skill-mark[data-kind="none"] > * {
  width: 60%;
  height: 60%;
}

/* ---------------------------------------------------------------- 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: var(--marketplace-done-icon, 14px);
  height: var(--marketplace-done-icon, 14px);
  color: var(--marketplace-done-mark, currentColor);
}

/* ---------------------------------------------------------------- app list */

.marketplace-app-group {
  display: grid;
  gap: var(--openbot-space-3);
  padding-top: var(--openbot-space-4);
  border-top: 1px solid var(--openbot-border);
}

.marketplace-app-group-title {
  display: flex;
  align-items: baseline;
  gap: var(--openbot-space-2);
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
}

.marketplace-app-group-count {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-regular);
  font-variant-numeric: tabular-nums;
}

.marketplace-app-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  column-gap: var(--openbot-space-6);
  row-gap: var(--openbot-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The row opens the app page; the status control sits above the hit area. */
.marketplace-app-row {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-2);
  border-radius: var(--openbot-radius-lg);
}

@media (hover: hover) and (pointer: fine) {
  .marketplace-app-row:hover {
    background: var(--openbot-bg-control-hover);
  }

  /* The row hover has the color of the Connect button, so on a hovered row the button is one step lighter. */
  .marketplace-app-row:hover .marketplace-app-action[data-variant="secondary"]:not([data-disabled]) {
    background: var(--openbot-bg-control-active);
  }
}

.skills-marketplace .marketplace-app-row-hit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border-radius: inherit;
  background: transparent;
}

/* The row draws the hover. The shared ghost hover would cover the text above the hit area. */
.skills-marketplace .marketplace-app-row-hit:hover:not(:disabled) {
  background: transparent;
}

/* A little bigger than the settings tile, so that a logo with its own margin still reads. */
.marketplace-app-row > .integration-logo-tile {
  --integration-tile: 40px;
  pointer-events: none;
}

.marketplace-app-row-copy {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: var(--openbot-space-0-5);
  pointer-events: none;
}

.marketplace-app-row-name {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketplace-app-row-tagline {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketplace-app-row-status {
  position: relative;
  display: inline-flex;
  flex: none;
}

/* As tall as a button, so the rows keep one height. The check has the success color; the word stays quiet. */
.marketplace-app-row-status > .marketplace-done {
  height: var(--openbot-control-md);
  gap: var(--openbot-space-1-5);
  padding-inline: var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  --marketplace-done-icon: var(--openbot-icon-md);
  --marketplace-done-mark: var(--openbot-success);
}

/* ---------------------------------------------------------------- pages */

/* `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 size of the other values in the list. */
  font-size: var(--openbot-text-md);
}

/* 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;
}

/* ---------------------------------------------------------------- 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;
}

/* The fishing plush of the "no match" state. */
.marketplace-empty-plush {
  display: block;
  width: 160px;
  aspect-ratio: 1;
  pointer-events: none;
  user-select: none;
}

.marketplace-empty-plush > img,
.marketplace-empty-plush > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.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 */

/* A narrow window puts the kinds in a row above the list. The connected apps are in the list. */
/* ---------------------------------------------------------------- skills */

/* A state that needs the user: "Off", "Update available", "Changed by you", "Needs repair". */
.marketplace-skill-attention {
  color: var(--openbot-text-secondary);
}

/* The skill mark sits under the row's hit area, as an app logo does. */
.marketplace-skill-row > .marketplace-skill-mark {
  pointer-events: none;
}

.marketplace-skill-row-actions {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}

/* The head keeps the height of its "See all" button, so the rows do not move when a search hides it. */
.marketplace-skill-group-head {
  display: flex;
  min-height: var(--openbot-control-md);
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}

.marketplace-skill-empty {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  border: 1px dashed var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  padding: var(--openbot-space-4);
}

/* The search icon, as in the Marketplace search. */
:is(.marketplace-skill-picker-search, .marketplace-skill-page-search) > svg {
  width: var(--openbot-space-4);
  height: var(--openbot-space-4);
  flex: none;
}

.marketplace-skill-agents-trigger {
  gap: var(--openbot-space-1-5);
}

.marketplace-skill-stack {
  display: inline-flex;
}

.marketplace-skill-stack > :not(:first-child) {
  margin-inline-start: calc(var(--openbot-space-1) * -1);
}

/* The agent picker in the agents dialog. */
.marketplace-skill-picker {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  font-size: var(--openbot-text-md);
}

.marketplace-skill-picker-search {
  margin-block-end: var(--openbot-space-1);
}

/* Many agents do not fit: the list scrolls under the search field. */
.marketplace-skill-picker-list {
  --marketplace-skill-fade-top: 0px;
  --marketplace-skill-fade-bottom: 0px;
  display: flex;
  max-height: calc(var(--openbot-space-1) * 90);
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex-direction: column;
  list-style: none;
  scrollbar-width: none;
  mask-image: linear-gradient(
    to bottom,
    var(--openbot-transparent),
    var(--openbot-text-primary) var(--marketplace-skill-fade-top),
    var(--openbot-text-primary) calc(100% - var(--marketplace-skill-fade-bottom)),
    var(--openbot-transparent)
  );
}

/* No scroll bar: the fades show that more rows are above or below. */
.marketplace-skill-picker-list::-webkit-scrollbar {
  display: none;
}

.marketplace-skill-picker-list.scroll-fade-top {
  --marketplace-skill-fade-top: calc(var(--openbot-space-1) * 6);
}

.marketplace-skill-picker-list.scroll-fade-bottom {
  --marketplace-skill-fade-bottom: calc(var(--openbot-space-1) * 6);
}

/* A drag over the rows sets them all, so it must not select their text. */
.marketplace-skill-picker-list:has(label.marketplace-skill-picker-row) {
  user-select: none;
}

.marketplace-skill-picker-row {
  display: flex;
  width: 100%;
  min-height: calc(var(--openbot-space-1) * 9);
  align-items: center;
  justify-content: flex-start;
  gap: var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
  padding-inline: var(--openbot-space-2);
  cursor: pointer;
  font-weight: inherit;
  text-align: start;
}

label.marketplace-skill-picker-row:hover {
  background: var(--openbot-hover);
}

/* While a drag runs, the row under the pointer does not light up: the check boxes show the range. */
.marketplace-skill-picker-list[data-dragging] label.marketplace-skill-picker-row:hover {
  background: none;
}

.marketplace-skill-picker-row[aria-current="true"] {
  background: var(--openbot-bg-control-active);
}

.marketplace-skill-picker-all {
  border-block-end: 1px solid var(--openbot-border);
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}

.marketplace-skill-picker-name {
  min-width: 0;
  overflow: hidden;
  flex: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The name and the title of an agent stay together; the note stays at the end of the row. */
.marketplace-skill-picker-agent {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: var(--openbot-space-1);
}

/* As in the sidebar, a long title gets smaller before the name does, to two characters. */
.marketplace-skill-picker-agent: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) - var(--openbot-space-1)))
    minmax(var(--agent-role-badge-collapsed-width), 1fr);
}

.marketplace-skill-picker-none {
  padding: var(--openbot-space-2);
}

/* The agents dialog names the skill, as a row does: its mark and its name. */
.marketplace-skill-dialog-head {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-3);
  margin-block: calc(var(--openbot-space-2) * -1) calc(var(--openbot-space-1) * -1);
}

.marketplace-skill-dialog-head h2 {
  min-width: 0;
  overflow: hidden;
  flex: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The dialog stays inside the window: the list takes the height that is left, and it scrolls. */
.integration-wizard-dialog.marketplace-skill-agents-dialog {
  overflow: hidden;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
}

.marketplace-skill-agents-dialog .integration-wizard-form {
  min-height: 0;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
}

.marketplace-skill-agents-dialog .integration-wizard-body {
  display: flex;
  min-height: 0;
  flex-direction: column;
}

.marketplace-skill-agents-dialog .marketplace-skill-picker {
  min-height: 0;
}

.marketplace-skill-agents-dialog .marketplace-skill-picker-list {
  min-height: 0;
  flex: 1 1 auto;
}

/* A long list of agent names stops at the button edge; the title gives the full text. */
.marketplace-skill-agents-dialog .integration-wizard-foot > .ui-button {
  flex-shrink: 0;
}

.marketplace-skill-agents-dialog .integration-wizard-foot > .marketplace-skill-dialog-submit {
  min-width: 0;
  flex-shrink: 1;
}

.marketplace-skill-dialog-submit > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The skill page: a search over the agents that have the skill. */
.marketplace-skill-page-search {
  width: calc(var(--openbot-space-1) * 56);
}

/* The skill name and, for a skill that OpenBot checked, the verified mark after it. */
.marketplace-skill-name {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
  min-width: 0;
}

.marketplace-skill-verified {
  flex: none;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-secondary);
}

/* The title on the left and the source switch (All, Verified, Public) on the right. */
.marketplace-skill-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--openbot-space-4);
}

.marketplace-skill-source .ui-sliding-tabs-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  white-space: nowrap;
}

/* A group page: the title, then the search and the sort, which stay at the top while the list scrolls. */
.marketplace-skill-group-page {
  display: grid;
  align-content: start;
  gap: var(--openbot-space-4);
}

.marketplace-skill-group-bar {
  position: sticky;
  z-index: 1;
  top: 0;
  padding-block: var(--openbot-space-3);
  border-bottom: 1px solid var(--openbot-border);
  background: var(--openbot-bg-canvas);
}

.marketplace-skill-group-list {
  display: grid;
  gap: var(--openbot-space-3);
}

/* The highlights of a group: three cards over their artwork, so the page does not start as a flat list. */
.marketplace-skill-featured {
  display: grid;
  gap: var(--openbot-space-3);
}

.marketplace-skill-featured-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--openbot-space-3);
}

/* Its own stack, so "Add" above the hit area stays under the sticky search bar. */
.marketplace-skill-feature {
  isolation: isolate;
  grid-template-rows: auto auto 1fr auto;
  padding: var(--openbot-space-3);
}

.marketplace-skill-feature > :not(.marketplace-hitarea, .marketplace-skill-feature-art) {
  padding-inline: var(--openbot-space-1);
}

.marketplace-skill-feature-art {
  position: relative;
  display: grid;
  place-items: center;
  height: calc(var(--openbot-space-1) * 24);
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--openbot-radius-xl);
}

.marketplace-skill-feature-art > :not(.skill-preview-gradient) {
  position: relative;
}

/* The mark stays beside the last word when a long name wraps. */
.marketplace-skill-feature .marketplace-skill-verified {
  display: inline-block;
  margin-inline-start: var(--openbot-space-1);
  vertical-align: text-bottom;
}

/* ---------------------------------------------------------------- agents */

/* A featured agent: avatar and action, name and creator, two lines of text, then what it brings. The
   avatar carries the color, so the card has no artwork. Its own stack keeps "Add" under the sticky bar. */
.marketplace-agent-feature {
  isolation: isolate;
  grid-template-rows: auto auto 1fr auto;
}

.marketplace-agent-feature .marketplace-card-head {
  justify-content: space-between;
}

.marketplace-agent-feature-copy {
  display: grid;
  gap: var(--openbot-space-0-5);
  min-width: 0;
}

/* The two lines of text keep their room, so the last line lines up across a row of cards. */
.marketplace-agent-feature .marketplace-card-body {
  align-self: start;
  min-height: 2lh;
}

.marketplace-agent-feature .marketplace-skill-verified {
  display: inline-block;
  margin-inline-start: var(--openbot-space-1);
  vertical-align: text-bottom;
}

/* The creator after the name and the shield. It shrinks first, so the name stays. */
.marketplace-agent-by {
  flex: 0 100 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The name and the creator share a baseline; the shield stays centred on the name. */
.marketplace-agent-row .marketplace-skill-name {
  align-items: baseline;
}

.marketplace-agent-row .marketplace-app-row-name {
  min-width: 0;
}

.marketplace-agent-row .marketplace-skill-verified {
  align-self: center;
}

/* Who made the agent and whether OpenBot reviewed it, under the page header. */
.marketplace-agent-trust {
  display: flex;
  gap: var(--openbot-space-1-5);
  align-items: center;
}

.marketplace-agent-trust svg {
  flex: none;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

/* ---------------------------------------------------------------- view transitions */

/* View changes run in a view transition (`moveView`). The page slides a little in the way the
   user goes: a deeper view comes in from the end, back comes in from the start. Blur and fade
   carry the change, not travel. The old page leaves faster than the new one arrives. The names
   apply only during a Marketplace transition, so other transitions of the app do not capture them. */
html:active-view-transition-type(marketplace-forward, marketplace-back, marketplace-tab, marketplace-swap) {
  --marketplace-skill-blur: calc(var(--openbot-space-0-5) * 1.5);
  --marketplace-skill-blur-small: var(--openbot-space-0-5);
}

html:active-view-transition-type(marketplace-forward, marketplace-back, marketplace-tab, marketplace-swap)
  .skills-marketplace-body {
  view-transition-name: marketplace-page;
}

html:active-view-transition-type(marketplace-forward, marketplace-back, marketplace-tab, marketplace-swap)
  .skills-marketplace
  .marketplace-heading {
  view-transition-name: marketplace-crumbs;
}

/* Another source keeps the switch live, so its pill slides and does not fade over a copy. */
html:active-view-transition-type(marketplace-swap) .marketplace-skill-source {
  view-transition-name: marketplace-skill-source;
}

html:active-view-transition-type(
  marketplace-forward,
  marketplace-back,
  marketplace-tab,
  marketplace-swap
)::view-transition-group(root),
::view-transition-group(marketplace-page),
::view-transition-group(marketplace-crumbs) {
  animation-duration: var(--openbot-duration-overlay);
  animation-timing-function: var(--openbot-ease-out);
}

html:active-view-transition-type(marketplace-forward)::view-transition-old(marketplace-page) {
  --marketplace-skill-to: calc(var(--openbot-space-2) * -1);
  animation: marketplace-skill-page-out var(--openbot-duration-normal) var(--openbot-ease-out) both;
}

html:active-view-transition-type(marketplace-forward)::view-transition-new(marketplace-page) {
  --marketplace-skill-from: var(--openbot-space-2);
  animation: marketplace-skill-page-in var(--openbot-duration-overlay) var(--openbot-ease-out) both;
}

html:active-view-transition-type(marketplace-back)::view-transition-old(marketplace-page) {
  --marketplace-skill-to: var(--openbot-space-2);
  animation: marketplace-skill-page-out var(--openbot-duration-normal) var(--openbot-ease-out) both;
}

html:active-view-transition-type(marketplace-back)::view-transition-new(marketplace-page) {
  --marketplace-skill-from: calc(var(--openbot-space-2) * -1);
  animation: marketplace-skill-page-in var(--openbot-duration-overlay) var(--openbot-ease-out) both;
}

/* A right-to-left page steps the other way. */
html:dir(rtl):active-view-transition-type(marketplace-forward)::view-transition-old(marketplace-page) {
  --marketplace-skill-to: var(--openbot-space-2);
}

html:dir(rtl):active-view-transition-type(marketplace-forward)::view-transition-new(marketplace-page) {
  --marketplace-skill-from: calc(var(--openbot-space-2) * -1);
}

html:dir(rtl):active-view-transition-type(marketplace-back)::view-transition-old(marketplace-page) {
  --marketplace-skill-to: calc(var(--openbot-space-2) * -1);
}

html:dir(rtl):active-view-transition-type(marketplace-back)::view-transition-new(marketplace-page) {
  --marketplace-skill-from: var(--openbot-space-2);
}

/* Another kind in the side panel is a new list, not a step: it rises a little into place. */
html:active-view-transition-type(marketplace-tab)::view-transition-old(marketplace-page) {
  animation: marketplace-skill-blur-out var(--openbot-duration-normal) var(--openbot-ease-out) both;
}

html:active-view-transition-type(marketplace-tab)::view-transition-new(marketplace-page) {
  animation: marketplace-skill-rise-in var(--openbot-duration-overlay) var(--openbot-ease-out) both;
}

/* Another source or sort is the same list with other rows: the rows change through a blur in place. */
html:active-view-transition-type(marketplace-swap)::view-transition-old(marketplace-page) {
  animation: marketplace-skill-blur-out var(--openbot-duration-fast) var(--openbot-ease-out) both;
}

html:active-view-transition-type(marketplace-swap)::view-transition-new(marketplace-page) {
  animation: marketplace-skill-blur-in var(--openbot-duration-normal) var(--openbot-ease-out) both;
}

::view-transition-old(marketplace-skill-source) {
  animation: none;
  opacity: 0;
}

::view-transition-new(marketplace-skill-source) {
  animation: none;
}

/* "See all" and back on the Apps tab: the category title and its first rows are on both views, so
   they move to their new place and do not fade with the page. The rows are the same, so the new row
   comes in over the old one: an icon that loads late shows the old icon until it is ready. */
html:active-view-transition-type(marketplace-group)
  [data-marketplace-shared]
  :is(.marketplace-app-group-title, .marketplace-browse-title) {
  view-transition-name: marketplace-group-title;
}

html:active-view-transition-type(marketplace-group) [data-marketplace-shared] .marketplace-app-row:nth-child(1) {
  view-transition-name: marketplace-group-row-1;
}

html:active-view-transition-type(marketplace-group) [data-marketplace-shared] .marketplace-app-row:nth-child(2) {
  view-transition-name: marketplace-group-row-2;
}

html:active-view-transition-type(marketplace-group) [data-marketplace-shared] .marketplace-app-row:nth-child(3) {
  view-transition-name: marketplace-group-row-3;
}

html:active-view-transition-type(marketplace-group) [data-marketplace-shared] .marketplace-app-row:nth-child(4) {
  view-transition-name: marketplace-group-row-4;
}

html:active-view-transition-type(marketplace-group) [data-marketplace-shared] .marketplace-app-row:nth-child(5) {
  view-transition-name: marketplace-group-row-5;
}

html:active-view-transition-type(marketplace-group) [data-marketplace-shared] .marketplace-app-row:nth-child(6) {
  view-transition-name: marketplace-group-row-6;
}

::view-transition-group(marketplace-group-title),
::view-transition-group(marketplace-group-row-1),
::view-transition-group(marketplace-group-row-2),
::view-transition-group(marketplace-group-row-3),
::view-transition-group(marketplace-group-row-4),
::view-transition-group(marketplace-group-row-5),
::view-transition-group(marketplace-group-row-6) {
  animation-duration: var(--openbot-duration-overlay);
  animation-timing-function: var(--openbot-ease-out);
}

/* The title changes its size: both copies keep their shape and grow from the start edge. */
::view-transition-old(marketplace-group-title),
::view-transition-new(marketplace-group-title) {
  width: auto;
  height: 100%;
}

::view-transition-old(marketplace-group-title) {
  animation: marketplace-skill-blur-out var(--openbot-duration-fast) var(--openbot-ease-out) both;
}

::view-transition-new(marketplace-group-title) {
  animation: marketplace-skill-blur-in var(--openbot-duration-normal) var(--openbot-ease-out) both;
}

::view-transition-old(marketplace-group-row-1),
::view-transition-old(marketplace-group-row-2),
::view-transition-old(marketplace-group-row-3),
::view-transition-old(marketplace-group-row-4),
::view-transition-old(marketplace-group-row-5),
::view-transition-old(marketplace-group-row-6) {
  animation: none;
}

::view-transition-new(marketplace-group-row-1),
::view-transition-new(marketplace-group-row-2),
::view-transition-new(marketplace-group-row-3),
::view-transition-new(marketplace-group-row-4),
::view-transition-new(marketplace-group-row-5),
::view-transition-new(marketplace-group-row-6) {
  animation: marketplace-skill-blur-in var(--openbot-duration-overlay) var(--openbot-ease-out) both;
}

/* The crumbs change their last name in place. */
::view-transition-old(marketplace-crumbs) {
  animation: marketplace-skill-blur-out var(--openbot-duration-fast) var(--openbot-ease-out) both;
}

::view-transition-new(marketplace-crumbs) {
  animation: marketplace-skill-blur-in var(--openbot-duration-normal) var(--openbot-ease-out) both;
}

@keyframes marketplace-skill-page-out {
  to {
    opacity: 0;
    transform: translateX(var(--marketplace-skill-to));
    filter: blur(var(--marketplace-skill-blur));
  }
}

@keyframes marketplace-skill-page-in {
  from {
    opacity: 0;
    transform: translateX(var(--marketplace-skill-from));
    filter: blur(var(--marketplace-skill-blur));
  }
}

@keyframes marketplace-skill-rise-in {
  from {
    opacity: 0;
    transform: translateY(var(--openbot-space-2));
    filter: blur(var(--marketplace-skill-blur));
  }
}

@keyframes marketplace-skill-blur-out {
  to {
    opacity: 0;
    filter: blur(var(--marketplace-skill-blur-small));
  }
}

@keyframes marketplace-skill-blur-in {
  from {
    opacity: 0;
    filter: blur(var(--marketplace-skill-blur-small));
  }
}

/* `moveView` skips the transition with reduced motion. This guard also stops one that starts. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(marketplace-page),
  ::view-transition-group(marketplace-crumbs),
  ::view-transition-old(marketplace-page),
  ::view-transition-new(marketplace-page),
  ::view-transition-old(marketplace-crumbs),
  ::view-transition-new(marketplace-crumbs),
  ::view-transition-group(marketplace-group-title),
  ::view-transition-old(marketplace-group-title),
  ::view-transition-new(marketplace-group-title),
  ::view-transition-group(marketplace-group-row-1),
  ::view-transition-group(marketplace-group-row-2),
  ::view-transition-group(marketplace-group-row-3),
  ::view-transition-group(marketplace-group-row-4),
  ::view-transition-group(marketplace-group-row-5),
  ::view-transition-group(marketplace-group-row-6),
  ::view-transition-new(marketplace-group-row-1),
  ::view-transition-new(marketplace-group-row-2),
  ::view-transition-new(marketplace-group-row-3),
  ::view-transition-new(marketplace-group-row-4),
  ::view-transition-new(marketplace-group-row-5),
  ::view-transition-new(marketplace-group-row-6) {
    animation: none;
  }
}

@media (max-width: 720px) {
  .skills-marketplace {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
  }

  .marketplace-nav {
    grid-row: 2;
    overflow-x: auto;
    padding: var(--openbot-space-2) var(--openbot-space-3);
    border-inline-end: 0;
    border-bottom: 1px solid var(--openbot-border);
  }

  .marketplace-nav-title,
  .marketplace-nav-group {
    display: none;
  }

  .marketplace-nav-list {
    grid-auto-columns: max-content;
    grid-auto-flow: column;
  }

  .skills-marketplace-body {
    grid-row: 3;
    grid-column: 1;
  }
}

@media (max-width: 860px) {
  .skills-marketplace {
    --marketplace-inset: var(--openbot-space-4);
  }

  .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;
}

/* After the icon size rule, so that the warning color wins. */
.marketplace-app-action[data-status="attention"] > svg {
  color: var(--openbot-warning-text);
}

/* After the icon size rule: an agent avatar draws past its box, so a button must not shrink it. */
:is(.marketplace-skill-agents-trigger, .marketplace-skill-picker-row) .agent-avatar > svg {
  width: 128%;
  height: 128%;
}

/* After the icon size rule: the source switch icons are small. */
.marketplace-skill-source .ui-sliding-tabs-trigger svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: none;
}

/* The agent update dialog: the skills with local changes, each with a Replace box. */
.marketplace-agent-update-frame {
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  overflow: hidden;
}

.ui-confirm-dialog-body .marketplace-agent-update-list {
  --marketplace-agent-update-fade-top: 0px;
  --marketplace-agent-update-fade-bottom: 0px;
  display: flex;
  max-height: calc(var(--openbot-space-8) * 7);
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  flex-direction: column;
  list-style: none;
  scrollbar-width: none;
  mask-image: linear-gradient(
    to bottom,
    var(--openbot-transparent),
    var(--openbot-text-primary) var(--marketplace-agent-update-fade-top),
    var(--openbot-text-primary) calc(100% - var(--marketplace-agent-update-fade-bottom)),
    var(--openbot-transparent)
  );
}

/* No scroll bar: the fades show that more rows are above or below. */
.marketplace-agent-update-list::-webkit-scrollbar {
  display: none;
}

.marketplace-agent-update-list.scroll-fade-top {
  --marketplace-agent-update-fade-top: calc(var(--openbot-space-1) * 6);
}

.marketplace-agent-update-list.scroll-fade-bottom {
  --marketplace-agent-update-fade-bottom: calc(var(--openbot-space-1) * 6);
}

.marketplace-agent-update-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-2) var(--openbot-space-3);
}

.marketplace-agent-update-row + .marketplace-agent-update-row {
  border-top: 1px solid var(--openbot-border);
}

.marketplace-agent-update-text {
  display: grid;
  min-width: 0;
}

.marketplace-agent-update-name {
  overflow: hidden;
  color: var(--openbot-text-secondary);
  font-weight: var(--openbot-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketplace-agent-update-state {
  color: var(--openbot-text-dim);
  font-size: var(--openbot-text-sm);
}

.marketplace-agent-update-row[data-replace] .marketplace-agent-update-state {
  color: var(--openbot-warning-text);
}

/* Keep or Replace for one skill: the look of the window's sliding tabs, as a radio group. */
.marketplace-agent-update-choice {
  display: inline-flex;
  flex: none;
  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;
}

.marketplace-agent-update-option {
  display: grid;
}

.marketplace-agent-update-option-label {
  display: inline-flex;
  height: var(--openbot-control-sm);
  align-items: center;
  border-radius: var(--openbot-radius-sm);
  padding: 0 var(--openbot-space-3);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--openbot-duration-fast) ease,
    color var(--openbot-duration-fast) ease;
}

.marketplace-agent-update-option-label:hover,
.marketplace-agent-update-option[data-checked] .marketplace-agent-update-option-label {
  color: var(--openbot-text-primary);
}

.marketplace-agent-update-option[data-checked] .marketplace-agent-update-option-label {
  background: var(--openbot-tabs-pill-bg);
}

.marketplace-agent-update-option:has(input:focus-visible) .marketplace-agent-update-option-label {
  box-shadow: var(--openbot-focus-ring);
}

/* Replace loses the user's files, so the chosen Replace wears the warning color. */
.marketplace-agent-update-option[data-choice="replace"][data-checked] .marketplace-agent-update-option-label {
  color: var(--openbot-warning-text);
}

.marketplace-agent-update-others {
  margin: var(--openbot-space-2) 0 0;
  color: var(--openbot-text-dim);
  font-size: var(--openbot-text-sm);
}


/* /@fs//home/ubuntu/openbot/packages/ui/src/features/settings/chat-color-picker.css */
/* The chat color setting: the color dot, the popup and the picker (a port of the beUI motion color picker,
 * ChatColorPicker.tsx). The popup has a 1px ring and no shadow. */

/* ---------------------------------------------------------------------------------------------
 * The color dot of the row
 * ------------------------------------------------------------------------------------------- */

.chat-color-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  margin-inline-start: auto;
  border-radius: var(--openbot-radius-pill);
  background: var(--chat-color-value);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--openbot-text-primary) 18%, transparent);
}

/* While the popup is open, a ring marks the dot that it came from. */
.chat-color-dot.chat-color-dot-open {
  outline: 1px solid color-mix(in srgb, var(--openbot-text-primary) 40%, transparent);
  outline-offset: 2px;
}

/* The own row: the dot sits where a select shows its value text, before the name. */
.chat-color-own-trigger .chat-color-dot {
  margin-inline: 0 var(--openbot-space-2);
}

.chat-color-own-trigger .ui-select-value {
  flex: 1 1 auto;
  text-align: start;
}

/* ---------------------------------------------------------------------------------------------
 * The popup. It opens as the select menus of the app do: a short scale and fade toward the row,
 * from the color dot. The script sets the origin and the 6px shift.
 * ------------------------------------------------------------------------------------------- */

.chat-color-popover {
  --chat-color-shift: -6px;
  position: fixed;
  z-index: var(--openbot-layer-popover);
  padding: var(--openbot-space-3);
  border-radius: var(--ui-menu-radius);
  background: var(--ui-menu-bg);
  box-shadow: 0 0 0 1px var(--ui-menu-edge);
  color: var(--openbot-text-primary);
  animation: chat-color-popover-in var(--openbot-duration-normal) var(--openbot-ease-out) both;
}

@keyframes chat-color-popover-in {
  from {
    opacity: 0;
    transform: translateY(var(--chat-color-shift)) scale(0.96);
  }
}

/* ---------------------------------------------------------------------------------------------
 * The picker. Sizes follow beUI: a 264px column, 36px fields with an 8px radius, a 160px area with
 * a 12px radius, an 18px thumb with a 3px light rim and 24px presets. Where beUI has a drop
 * shadow, the port keeps only its 1px ring.
 * ------------------------------------------------------------------------------------------- */

.chat-color-picker,
.chat-color-picker-presets {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

.chat-color-picker {
  --chat-color-edge: color-mix(in srgb, var(--openbot-text-primary) 11%, transparent);
  --chat-color-edge-hover: color-mix(in srgb, var(--openbot-text-primary) 20%, transparent);
  --chat-color-inset: inset 0 0 0 1px color-mix(in srgb, var(--openbot-color-picker-dark) 10%, transparent);
  position: relative;
  display: grid;
  width: 264px;
  gap: var(--openbot-space-3);
}

.chat-color-picker-row {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
}

/* The area, the hue and the fields are left to right in each language, as the color models are. */
.chat-color-picker-area,
.chat-color-picker-hue,
.chat-color-picker-row.chat-color-picker-fields {
  direction: ltr;
}

.chat-color-picker-row.chat-color-picker-fields {
  gap: var(--openbot-space-1-5);
}

/* Saturation and brightness */

.chat-color-picker-area {
  position: relative;
  height: 160px;
  border-radius: var(--openbot-radius-lg);
  background:
    linear-gradient(to top, var(--openbot-color-picker-dark), transparent),
    linear-gradient(to right, var(--openbot-color-picker-light), var(--chat-color-pure));
  cursor: crosshair;
  touch-action: none;
}

.chat-color-picker-ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--chat-color-inset);
  pointer-events: none;
}

.chat-color-picker-track {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.chat-color-picker-thumb {
  position: absolute;
  border: 0;
  padding: 0;
  top: calc(var(--chat-color-y) * 1%);
  left: calc(var(--chat-color-x) * 1%);
  width: 18px;
  height: 18px;
  border-radius: var(--openbot-radius-pill);
  background: transparent;
  outline: 0;
  pointer-events: auto;
  translate: -50% -50%;
  transition:
    top var(--chat-color-layout-duration) var(--chat-color-layout-ease),
    left var(--chat-color-layout-duration) var(--chat-color-layout-ease);
}

.chat-color-picker-hue .chat-color-picker-thumb {
  top: 50%;
}

.chat-color-picker-dragging .chat-color-picker-thumb {
  transition: none;
}

.chat-color-picker-thumb:focus-visible {
  outline: 2px solid var(--openbot-text-primary);
  outline-offset: 2px;
}

/* The rim and the color shrink together while the thumb is held, as in beUI. */
.chat-color-picker-thumb-dot {
  position: absolute;
  inset: 0;
  border: 3px solid var(--openbot-color-picker-light);
  border-radius: inherit;
  background: var(--chat-color-value);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--openbot-color-picker-dark) 12%, transparent);
  transition: scale var(--chat-color-press-duration) var(--chat-color-press-ease);
}

.chat-color-picker-dragging .chat-color-picker-thumb-dot {
  scale: 0.78;
}

/* The loupe above the thumb shows the color under it, and swings against the drag. */
.chat-color-picker-loupe {
  position: absolute;
  z-index: 1;
  bottom: calc(100% + 12px);
  left: 50%;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  transform: rotate(var(--chat-color-tilt));
  transform-origin: 50% 130%;
  transition: transform 220ms var(--openbot-ease-out);
  animation: chat-color-loupe-lift var(--chat-color-lift-duration) var(--chat-color-lift-ease) both;
}

.chat-color-picker-loupe-drop {
  position: absolute;
  inset: 0;
  border: 3px solid var(--openbot-color-picker-light);
  border-radius: var(--openbot-radius-pill) var(--openbot-radius-pill) var(--openbot-radius-pill) 0;
  background: var(--chat-color-value);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--openbot-color-picker-dark) 10%, transparent);
  rotate: -45deg;
}

@keyframes chat-color-loupe-lift {
  from {
    opacity: 0;
    translate: 0 16px;
    scale: 0.3;
  }
}

/* Hue */

.chat-color-picker-hue {
  position: relative;
  height: 14px;
  flex: 1 1 auto;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-color-picker-spectrum);
  cursor: pointer;
  touch-action: none;
}

/* Inset by half a thumb, so the thumb never leaves the rounded track. */
.chat-color-picker-hue-rail {
  position: absolute;
  inset: 0 9px;
}

/* The eye dropper, the format switch, the fields and the swatch: 36px boxes with a 1px edge. */

.chat-color-picker-icon-button,
.chat-color-picker-format {
  display: inline-grid;
  height: var(--openbot-control-lg);
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--chat-color-edge);
  border-radius: var(--openbot-radius-md);
  outline: 0;
  background: transparent;
  padding: 0;
  color: var(--openbot-text-muted);
  transition:
    color var(--openbot-duration-hover) var(--openbot-ease-out),
    border-color var(--openbot-duration-hover) var(--openbot-ease-out),
    scale var(--chat-color-press-duration) var(--chat-color-press-ease);
}

.chat-color-picker-icon-button {
  width: var(--openbot-control-lg);
}

.chat-color-picker-format {
  width: 48px;
  overflow: hidden;
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}

.chat-color-picker-icon-button:hover,
.chat-color-picker-format:hover {
  color: var(--openbot-text-primary);
}

.chat-color-picker-icon-button:active {
  scale: 0.92;
}

.chat-color-picker-icon-button:focus-visible,
.chat-color-picker-format:focus-visible {
  border-color: var(--chat-color-edge-hover);
  color: var(--openbot-text-primary);
}

.chat-color-picker-icon-button > svg {
  width: 16px;
  height: 16px;
}

.chat-color-picker-format-label {
  grid-area: 1 / 1;
  animation: chat-color-format-in var(--chat-color-press-duration) var(--chat-color-press-ease) both;
}

@keyframes chat-color-format-in {
  from {
    opacity: 0;
    translate: 0 10px;
  }
}

.chat-color-picker-hex {
  position: relative;
  min-width: 0;
  flex: 1 1 auto;
}

.chat-color-picker-hex-hash {
  position: absolute;
  top: 50%;
  left: var(--openbot-space-3);
  translate: 0 -50%;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-lg);
  pointer-events: none;
}

.chat-color-picker-field {
  width: 100%;
  height: var(--openbot-control-lg);
  min-width: 0;
  border: 1px solid var(--chat-color-edge);
  border-radius: var(--openbot-radius-md);
  outline: 0;
  background: transparent;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-variant-numeric: tabular-nums;
  transition: border-color var(--openbot-duration-hover) var(--openbot-ease-out);
}

.chat-color-picker-field:focus-visible {
  border-color: var(--chat-color-edge-hover);
}

.chat-color-picker-field.chat-color-picker-hex-input {
  padding: 0 var(--openbot-space-3) 0 var(--openbot-space-6);
  font-family: var(--openbot-font-mono);
  text-transform: uppercase;
}

.chat-color-picker-field.chat-color-picker-hex-input::placeholder {
  color: var(--openbot-text-placeholder);
  text-transform: none;
}

.chat-color-picker-channels {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  gap: var(--openbot-space-1-5);
}

/* The channel letter sits in the field, as the # of the hex field, so the row keeps its height. */
.chat-color-picker-channel {
  position: relative;
  min-width: 0;
  flex: 1 1 0;
}

.chat-color-picker-field.chat-color-picker-channel-input {
  padding: 0 var(--openbot-space-2) 0 var(--openbot-space-6);
}

.chat-color-picker-channel-label {
  position: absolute;
  top: 50%;
  left: var(--openbot-space-3);
  translate: 0 -50%;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  pointer-events: none;
}

.chat-color-picker-swatch {
  width: var(--openbot-control-lg);
  height: var(--openbot-control-lg);
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-md);
  background: var(--chat-color-value);
  box-shadow: var(--chat-color-inset);
  transition: background-color 150ms var(--openbot-ease-out);
}

/* Presets. The ring hops between them (see Presets in the picker). */

/* The empty choice and the 11 chat colors fill two rows of 6. */
.chat-color-picker-presets {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 24px);
  justify-content: space-between;
  row-gap: var(--openbot-space-2);
  padding: var(--openbot-space-1) var(--openbot-space-0-5) 0;
}

.chat-color-picker-preset {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  outline: 0;
  background: var(--chat-color-value);
  box-shadow: var(--chat-color-inset);
  padding: 0;
  cursor: pointer;
  transition: scale var(--chat-color-press-duration) var(--chat-color-press-ease);
}

.chat-color-picker-preset:active {
  scale: 0.88;
}

.chat-color-picker-preset:focus-visible {
  outline: 2px solid var(--openbot-text-primary);
  outline-offset: 3px;
}

.chat-color-picker-preset-ring {
  position: absolute;
  top: -3px;
  left: -3px;
  width: 30px;
  height: 30px;
  border: 2px solid color-mix(in srgb, var(--openbot-text-primary) 70%, transparent);
  border-radius: var(--openbot-radius-pill);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}

.chat-color-picker-preset-ring[data-visible="true"] {
  opacity: 1;
}

/* No color: a slash, as the beUI "none" swatch. */
.chat-color-dot.chat-color-none,
.chat-color-picker-swatch.chat-color-none,
.chat-color-picker-preset.chat-color-none {
  background:
    linear-gradient(
      to top right,
      transparent calc(50% - 1px),
      var(--openbot-text-muted) calc(50% - 1px) calc(50% + 1px),
      transparent calc(50% + 1px)
    ),
    var(--openbot-bg-control);
  box-shadow: inset 0 0 0 1px var(--chat-color-edge, var(--ui-menu-edge));
}

@media (prefers-reduced-motion: reduce) {
  .chat-color-picker .chat-color-picker-loupe,
  .chat-color-picker .chat-color-picker-format-label {
    animation: none;
  }

  .chat-color-popover {
    animation-name: ui-select-content-fade-in;
  }

  .chat-color-picker .chat-color-picker-thumb,
  .chat-color-picker .chat-color-picker-thumb-dot,
  .chat-color-picker .chat-color-picker-preset,
  .chat-color-picker .chat-color-picker-preset-ring,
  .chat-color-picker .chat-color-picker-icon-button,
  .chat-color-picker .chat-color-picker-format {
    transition: none;
  }
}


/* /@fs//home/ubuntu/openbot/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//home/ubuntu/openbot/packages/ui/src/features/settings/sound-choice-select.css */
/* A play icon before each sound name. The menu portals out of the row, so the rules use the item classes. */
.ui-select-item-label:has(.sound-choice-item) {
  flex: 1;
}

.sound-choice-item {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}

.sound-choice-item-play {
  flex: none;
}

.sound-choice-item-name {
  overflow: hidden;
  text-overflow: ellipsis;
}


/* /@fs//home/ubuntu/openbot/packages/ui/src/features/settings/notification-matrix.css */
/* The notification levels of every server and agent: one card for each server (NotificationMatrix.tsx). */

.notification-scope-title {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-2);
}

.notification-matrix {
  display: grid;
  gap: var(--openbot-space-3);
}

.notification-matrix-server-mark {
  --server-gradient-logo-size: 32px;
  --server-gradient-logo-radius: var(--openbot-radius-md);
}

.notification-matrix-server-mark > img {
  width: 32px;
  height: 32px;
  border-radius: var(--openbot-radius-md);
}

/* Every row of a card starts at the same edge: the agent avatar stands in the 32px column of the server logo. */
.notification-matrix-agent > .ui-item-media {
  width: 32px;
  justify-content: center;
}

.notification-matrix-level {
  min-width: 72px;
}

/* The last row of a card is one button as wide as the card. Its "+" stands in the column of the server logo. */
.notification-matrix-add {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--openbot-space-4);
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border: 0;
  background: transparent;
  color: var(--openbot-text-muted);
  font: inherit;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
  text-align: start;
  cursor: pointer;
}

.notification-matrix-add:hover,
.notification-matrix-add[data-expanded] {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}

.notification-matrix-add:focus-visible {
  outline: 1px solid var(--openbot-border-strong);
  outline-offset: -1px;
}

.notification-matrix-add-icon {
  display: inline-flex;
  width: 32px;
  height: 32px;
  flex: none;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
}

.notification-matrix-add-icon > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

/* The notes of a server tell what its card can do, so they wrap and are never cut. */
.ui-item-description.notification-matrix-notes {
  white-space: normal;
}


/* /@fs//home/ubuntu/openbot/packages/ui/src/features/settings/plan-start.css */
/* Settings › Agents › Show the plan before long tasks: the Custom panel of "Start the work". */
.plan-start-popover {
  display: grid;
  width: 260px;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-3);
}

.plan-start-popover-title,
.plan-start-popover-note {
  margin: 0;
}

.plan-start-popover-title {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: 500;
}

.plan-start-popover-controls {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}

.plan-start-amount {
  width: 56px;
  text-align: end;
}

.plan-start-popover-note {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}

.plan-start-popover-note[data-invalid] {
  color: var(--openbot-danger);
}

.plan-start-popover-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
}


/* /@fs//home/ubuntu/openbot/packages/ui/src/features/settings/mcp-connect-dialog.css */
/*
 * The content of the plugin connect dialogs. The frame is the shared connect dialog,
 * `WizardDialog` in `integration-layout.css`: the two logos, the title, and the buttons.
 */

/* 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-inline-end: 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-inline-start: 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);
}

/* 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);
  inset-inline-end: 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);
}

/* The mark that says the link leaves the app. It reads beside the words rather than over them,
   so it is the size of every other external-link mark in the marketplace. */
.mcp-connect-docs > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}

.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);
}

/* A joined server's sign-in page, drawn from the host's browser. The page keeps the shape of the host's frame. */
.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-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);
}

/* In the connect and provider sign-in dialogs, the body's gap spaces them. In the connect dialog, the
   open button keeps the width of its words. */
:is(.integration-wizard-body, .provider-code-login-body) > :is(.mcp-sign-in-relay-open, .mcp-sign-in-relay-form) {
  margin-top: 0;
}

.integration-wizard-body > .mcp-sign-in-relay-open {
  justify-self: start;
}

.mcp-sign-in-relay-row {
  display: flex;
  gap: var(--openbot-space-2);
}

.mcp-sign-in-relay-row > .ui-input {
  flex: 1;
  min-width: 0;
}


/* /@fs//home/ubuntu/openbot/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);
}

/* 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;
}

/* With the button out of the layout there is no button row, so the card keeps its full bottom
   padding. */
.ui-toaster
.provider-update-toast[data-sonner-toast][data-styled="true"]:has(.provider-update-toast-action[data-idle="true"]) {
  padding-bottom: var(--openbot-space-3);
}

/* 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);
}

.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//home/ubuntu/openbot/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);
}

/* The tile has a margin around its icon, as an avatar has. */
.custom-provider-mark > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}

.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;
}

/* A token count is short, so the context window column is narrower than the ID and the name. */
.custom-provider-row-inputs.custom-provider-row-triple {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.6fr) auto;
}

/* Two token counts next to the ID and the name. Each count keeps room for a value such as 131,072. */
.custom-provider-row-inputs.custom-provider-row-quad {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(9ch, 0.8fr) minmax(9ch, 0.8fr) auto;
}

/* The efforts of one model, under its fields. They wrap on a narrow dialog. */
.custom-provider-efforts {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--openbot-space-1) var(--openbot-space-2);
}

.custom-provider-effort {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  cursor: pointer;
}

.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);
}

/* Right to left, the arrow points the other way. */
.custom-provider-preset-chevron:dir(rtl),
.custom-provider-header .ui-icon-button > svg[class~="lucide-arrow-left"]:dir(rtl) {
  transform: scaleX(-1);
}

/* 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;
}

/* "Runs on": the logo and the name of the provider that runs the endpoint. */
.custom-provider-harness {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}

/* A provider to download keeps its action at the end of the row. */
.custom-provider-harness-item .ui-select-item-label {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--openbot-space-3);
}

/* With no check mark to make room for, the action reaches the end of the row. */
.custom-provider-harness-item[data-action]:not([data-selected]) {
  padding-inline-end: var(--openbot-space-1-5);
}

.custom-provider-harness-action {
  margin-inline-start: auto;
}

.custom-provider-harness-button {
  gap: var(--openbot-space-1);
  font-size: inherit;
  pointer-events: none;
}

.custom-provider-harness-item .custom-provider-harness-button svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

/* The closed field: the chosen provider, and its download at the end. */
.custom-provider-harness-value {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--openbot-space-3);
}

.custom-provider-harness-progress {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  margin-inline-start: auto;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}


/* /@fs//home/ubuntu/openbot/packages/ui/src/features/browser/browser-profiles.css */
/* The browser profiles section of the server settings: the list, then the new profile form. */
.browser-profiles-panel {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-3);
}

/* The name field row of the new profile form and of an inline rename. */
.browser-profiles-row {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: var(--openbot-space-2);
}

.browser-profiles-name {
  min-width: 0;
  flex: 1;
}

/* "New profile" closes the list of the agent settings select, under a line. */
.ui-select-item.browser-profile-select-new {
  margin-top: calc(var(--openbot-space-1) * 2 + 1px);
}

.ui-select-item.browser-profile-select-new::before {
  position: absolute;
  top: calc(-1 * var(--openbot-space-1) - 1px);
  right: calc(-1 * var(--openbot-space-1));
  left: calc(-1 * var(--openbot-space-1));
  border-top: 1px solid var(--openbot-border);
  content: "";
}

.ui-select-item.browser-profile-select-new[hidden] {
  display: none;
}

.browser-profile-select-option .ui-select-item-label,
.browser-profile-select-value {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
}

/* The proxy of the profile, after its name. */
.browser-profile-select-proxy {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-1);
  color: var(--openbot-text-muted);
}

.browser-profile-select-proxy svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
}

.browser-profile-select-proxy span {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The column of the profile colors and the "New profile" plus. */
.browser-profile-select-mark {
  display: inline-flex;
  width: var(--openbot-icon-sm);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}

.browser-profile-select-mark svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

/* In the settings the dot is the button that opens the colors. */
/* The shared profile has no color menu. Its dot takes the place of the menu button. */
.browser-profile-shared-mark {
  display: inline-flex;
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  align-items: center;
  justify-content: center;
}

.browser-profile-color-trigger .browser-profile-dot {
  width: 12px;
  height: 12px;
}

.browser-profile-color-option {
  gap: var(--openbot-space-2);
}

.browser-profile-color-option > span:not(.browser-profile-dot) {
  flex: 1 1 auto;
}

/* The name field takes the place of "New profile". Its text lines up with the option labels. */
.browser-profile-select-form {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
}

.browser-profile-select-form .browser-profiles-name {
  font-size: var(--openbot-text-sm);
}

.browser-profile-select-form .ui-text {
  padding-inline: var(--openbot-space-2);
}

/* With proxies, the panel has two sections: the proxies, then the profiles. */
.browser-profiles-panel:has(> .ui-settings-section) {
  gap: var(--openbot-space-6);
}

.browser-profiles-panel > .ui-settings-section {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-3);
}

.browser-profiles-panel > .ui-settings-section .browser-profiles-row {
  flex: none;
}

/* The proxy of a named profile, before its menu. */
.browser-proxy-badge svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}

/* The proxy icon takes the place of the color button of a profile row. */
.browser-proxy-icon {
  display: inline-flex;
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  align-items: center;
  justify-content: center;
  color: var(--openbot-text-muted);
}

.browser-proxy-icon svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

.browser-proxy-submenu-chevron {
  margin-inline-start: auto;
  color: var(--openbot-text-muted);
}


/* /@fs//home/ubuntu/openbot/packages/ui/src/features/vault/vault.css */
/* The Vault page of the server settings. */

.vault-panel {
  display: grid;
  gap: var(--openbot-space-6);
  min-width: 0;
}

.vault-truncate,
.ui-item-content > .vault-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vault-icon {
  display: inline-grid;
  flex: none;
  place-items: center;
}

.vault-icon svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}

/* Item logos. A site gets a letter tile: no icon is fetched from it. */
.vault-letter {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
}

/* Card brands sit on light paper, as their artwork expects. */
.vault-card-logo {
  display: inline-grid;
  flex: none;
  width: var(--integration-tile, 36px);
  height: calc(var(--integration-tile, 36px) * 2 / 3);
  place-items: center;
  border: 1px solid var(--openbot-paper-border);
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-paper);
  color: var(--openbot-paper-text);
}

.vault-card-logo > svg {
  width: 70%;
  height: 70%;
}

.vault-avatar {
  display: inline-grid;
  flex: none;
  width: var(--integration-tile, 36px);
  height: var(--integration-tile, 36px);
  place-items: center;
  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);
}

.vault-avatar > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}

.vault-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-3);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--openbot-space-1);
}

.vault-count {
  margin-inline-start: var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
  font-variant-numeric: tabular-nums;
}

.vault-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--openbot-space-3) var(--openbot-space-4);
}

.vault-wide {
  grid-column: 1 / -1;
}

.vault-fill-sites {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

.vault-fill-sites > .ui-label {
  margin-block-end: var(--openbot-space-1-5);
  padding: 0;
}

.vault-sites {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.vault-secret {
  position: relative;
  display: flex;
  align-items: center;
}

.vault-secret .ui-input {
  flex: 1;
  padding-inline-end: var(--openbot-space-8);
}

.vault-secret .ui-icon-button {
  position: absolute;
  inset-inline-end: var(--openbot-space-1);
}

/* The search matches the tab bar beside it: same height, fill and text size, no border until focus. */
.vault-toolbar .server-settings-search {
  align-self: stretch;
}

.vault-toolbar .server-settings-search .ui-input {
  height: 100%;
  border-color: var(--openbot-transparent);
  font-size: var(--openbot-text-md);
}

.vault-toolbar .server-settings-search .ui-input:focus-visible {
  border-color: var(--openbot-border-focus);
}

.vault-dialog.ui-confirm-dialog {
  width: min(520px, 100%);
}

.vault-dialog-form {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.vault-dialog-header {
  display: flex;
  gap: var(--openbot-space-3);
  align-items: center;
  padding-block: var(--openbot-space-4) 0;
  padding-inline: var(--openbot-space-6) var(--openbot-space-4);
}

.vault-dialog-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vault-dialog-body {
  display: grid;
  gap: var(--openbot-space-3);
  min-height: 0;
  overflow-y: auto;
  padding: var(--openbot-space-4) var(--openbot-space-6) var(--openbot-space-6);
}

/* The Payment accounts group above the saved cards. */
.vault-link-accounts {
  display: grid;
  gap: var(--openbot-space-2);
  margin-bottom: var(--openbot-space-3);
}

.vault-group-label {
  padding: 0 var(--openbot-space-3);
}

.vault-link-logo > svg {
  width: 92%;
  height: 92%;
}

.ui-item-content > .vault-link-error {
  color: var(--openbot-danger-text);
}

/* The chat card that asks for a Vault item. The frame is a UiBlockCard (ui-blocks.css). */
.vault-request {
  max-width: 520px;
}

.vault-request-logo {
  display: flex;
  flex: none;
}

/* Two-step codes: the live code of a login and the setup steps of its key. */

.vault-two-step-digits {
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-lg);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--openbot-text-primary);
}

.vault-two-step-timer.ui-radial-progress {
  width: var(--openbot-icon-md);
}

.vault-two-step-code {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-2);
}

.vault-two-step-code[data-size="lg"] {
  gap: var(--openbot-space-3);
  justify-content: center;
  padding: var(--openbot-space-4) 0;
}

.vault-two-step-code[data-size="lg"] .vault-two-step-digits {
  font-size: var(--openbot-text-3xl);
}

.vault-two-step-code[data-size="lg"] .vault-two-step-timer.ui-radial-progress {
  width: var(--openbot-icon-lg, 20px);
}

/* The code in a list row sits above the row's hit area, as the ⋯ menu does. */
.vault-two-step-row-code {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-2);
  height: auto;
  border-radius: var(--openbot-radius-sm);
  padding: var(--openbot-space-1) var(--openbot-space-2);
  color: inherit;
}

.vault-two-step-setup {
  display: grid;
  gap: var(--openbot-space-3);
}

.vault-two-step-or {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

.vault-two-step-or::before,
.vault-two-step-or::after {
  flex: 1;
  height: 1px;
  background: var(--openbot-border);
  content: "";
}

.vault-two-step-check {
  text-align: center;
}


/* /@fs//home/ubuntu/openbot/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;
}

/* Back, the row chevrons and the closed skill chevron follow the reading direction. */
.agent-template-row > svg[class~="lucide-chevron-right"]:dir(rtl),
.agent-template-skill-toggle > svg[class~="lucide-chevron-right"]:dir(rtl),
.agent-template-detail-header .ui-icon-button > svg[class~="lucide-arrow-left"]:dir(rtl) {
  transform: scaleX(-1);
}


/* /@fs//home/ubuntu/openbot/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 raised toast surface with the 1px ring only. Undo sits on its own row, 8px from the bottom and
   end edges, as in the shared toast. The bar runs along the bottom edge below it. */
.agent-delete-undo-toast {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--openbot-space-3);
  overflow: hidden;
  padding: var(--openbot-space-3) var(--openbot-space-4) var(--openbot-space-2);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-surface-raised);
  box-shadow: 0 0 0 1px var(--openbot-border);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
}

.agent-delete-undo-toast-actions {
  grid-column: 1 / -1;
}

/* 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//home/ubuntu/openbot/packages/ui/src/features/github-star/github-star-toast.css */
/* Sonner gives an unstyled toast no width, so the host takes the toaster width. */
.github-star-toast-host {
  width: var(--width);
}

/* The raised toast surface with the 1px ring only. */
.github-star-toast {
  position: relative;
  display: grid;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-4);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-surface-raised);
  box-shadow: 0 0 0 1px var(--openbot-border);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}

/* The buttons sit 8px from the bottom edge. The thank-you state has no buttons and keeps even padding. */
.github-star-toast:has(.github-star-toast-actions) {
  padding-bottom: var(--openbot-space-2);
}

/* The close control sits on the corner, mostly outside the card, so the title keeps a small space. */
.github-star-toast-head {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  padding-inline-end: var(--openbot-space-1);
}

.github-star-toast-head > strong {
  font-weight: var(--openbot-weight-semibold);
  text-wrap: balance;
}

.github-star-toast-mark {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  flex: none;
}

/* A full star fill with a darker edge, so the star also reads on the light main button. */
.github-star-toast-star {
  color: var(--openbot-star-edge);
  fill: var(--openbot-star);
}

/* The words start in one column after the mark, as in the shared toast. */
.github-star-toast-body {
  margin: 0;
  padding-inline-start: calc(var(--openbot-icon-lg) + var(--openbot-space-2));
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-wrap: pretty;
}

/* With the grid gap, the button row is 12px below the words. */
.github-star-toast-actions {
  margin-top: var(--openbot-space-1);
}


/* /@fs//home/ubuntu/openbot/packages/ui/src/features/social-follow/social-follow-toast.css */
/* Sonner gives an unstyled toast no width, so the host takes the toaster width. */
.social-follow-toast-host {
  width: var(--width);
}

/* The raised toast surface with the 1px ring only, as the GitHub star toast. */
.social-follow-toast {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: var(--openbot-space-3);
  padding: var(--openbot-space-4);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-surface-raised);
  box-shadow: 0 0 0 1px var(--openbot-border);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
}

/* The plush hops in after the card, leans toward a network under the pointer, and bounces on thanks. */
.social-follow-toast-plush {
  position: relative;
  display: inline-flex;
  animation: social-follow-plush-hop 560ms var(--openbot-ease-out) 120ms both;
}

.social-follow-plush {
  --ui-plush-size: 56px;
  display: inline-flex;
  flex: none;
  transition:
    rotate var(--openbot-duration-normal) var(--openbot-ease-out),
    translate var(--openbot-duration-normal) var(--openbot-ease-out);
}

.social-follow-toast-plush[data-face="wide"] .social-follow-plush {
  rotate: 6deg;
  translate: 2px -2px;
}

.social-follow-toast-plush[data-face="happy"] .social-follow-plush {
  animation: social-follow-plush-bounce 520ms var(--openbot-ease-out);
}

.social-follow-toast-main {
  display: grid;
  gap: var(--openbot-space-3);
  min-width: 0;
}

.social-follow-toast-copy {
  display: grid;
  gap: var(--openbot-space-0-5);
  /* The close control sits on the corner, mostly outside the card, so the title keeps a small space. */
  padding-inline-end: var(--openbot-space-1);
}

.social-follow-toast-copy strong {
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  font-weight: var(--openbot-weight-semibold);
  text-wrap: balance;
}

.social-follow-toast-copy p {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-wrap: pretty;
}

.social-follow-toast-copy[data-thanks] {
  animation: social-follow-rise var(--openbot-duration-overlay) var(--openbot-ease-out) both;
}

/* The network row: filled round chips, aligned with the text. Seven chips fit in the text column. */
.social-follow-networks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.social-follow-networks li {
  animation: social-follow-rise var(--openbot-duration-overlay) var(--openbot-ease-out) both;
}

.social-follow-networks li:nth-child(1) {
  animation-delay: 160ms;
}

.social-follow-networks li:nth-child(2) {
  animation-delay: 190ms;
}

.social-follow-networks li:nth-child(3) {
  animation-delay: 220ms;
}

.social-follow-networks li:nth-child(4) {
  animation-delay: 250ms;
}

.social-follow-networks li:nth-child(5) {
  animation-delay: 280ms;
}

.social-follow-networks li:nth-child(6) {
  animation-delay: 310ms;
}

.social-follow-networks li:nth-child(7) {
  animation-delay: 340ms;
}

/* The follow request: one main button with the network mark, below the thanks. It uses the shared
   toast button row, but starts at the words, not at the end edge. */
.social-follow-toast .social-follow-toast-follow {
  justify-content: flex-start;
  margin-inline-end: 0;
  animation: social-follow-rise var(--openbot-duration-overlay) var(--openbot-ease-out) 120ms both;
}

.social-follow-toast .social-follow-network {
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-secondary);
  transition:
    background var(--openbot-duration-fast) var(--openbot-ease-out),
    color var(--openbot-duration-fast) var(--openbot-ease-out),
    translate var(--openbot-duration-normal) var(--openbot-ease-out),
    scale var(--openbot-duration-fast) var(--openbot-ease-out);
}

.social-follow-toast .social-follow-network:hover {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
  translate: 0 -2px;
}

.social-follow-toast .social-follow-network:active {
  scale: 0.92;
}

.social-follow-mark {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: none;
}

/* Thanks: three hearts float up from the plush once. */
.social-follow-hearts {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.social-follow-heart {
  position: absolute;
  fill: currentColor;
  top: 0;
  left: 50%;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-beam-pink);
  opacity: 0;
  animation: social-follow-heart 1100ms var(--openbot-ease-out) forwards;
}

.social-follow-heart[data-index="0"] {
  --social-follow-heart-x: -18px;
  animation-delay: 80ms;
}

.social-follow-heart[data-index="1"] {
  --social-follow-heart-x: 2px;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}

.social-follow-heart[data-index="2"] {
  --social-follow-heart-x: 18px;
  animation-delay: 180ms;
}

@keyframes social-follow-plush-hop {
  0% {
    opacity: 0;
    translate: 0 10px;
    scale: 0.7;
    rotate: -10deg;
  }
  60% {
    opacity: 1;
    translate: 0 -3px;
    scale: 1.04;
    rotate: 3deg;
  }
}

@keyframes social-follow-plush-bounce {
  30% {
    translate: 0 -5px;
    scale: 1.06 0.96;
  }
  60% {
    translate: 0 0;
    scale: 0.97 1.03;
  }
}

@keyframes social-follow-rise {
  from {
    opacity: 0;
    translate: 0 6px;
  }
}

@keyframes social-follow-heart {
  0% {
    opacity: 0;
    translate: -50% 8px;
    scale: 0.4;
  }
  25% {
    opacity: 1;
    scale: 1;
  }
  100% {
    opacity: 0;
    translate: calc(-50% + var(--social-follow-heart-x)) -30px;
    scale: 0.9;
  }
}

@media (prefers-reduced-motion: reduce) {
  .social-follow-toast-plush,
  .social-follow-toast-plush[data-face="happy"] .social-follow-plush,
  .social-follow-toast-copy[data-thanks],
  .social-follow-toast-follow,
  .social-follow-networks li {
    animation: none;
  }

  .social-follow-toast-plush[data-face="wide"] .social-follow-plush,
  .social-follow-toast .social-follow-network:hover {
    rotate: none;
    translate: none;
  }

  .social-follow-heart {
    display: none;
  }
}


/* /@fs//home/ubuntu/openbot/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//home/ubuntu/openbot/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;
  stroke-width: var(--openbot-icon-stroke-lg);
}

.billing-license-row .ui-item-actions {
  gap: var(--openbot-space-2);
}

/* Billing opens on the dialog-host layer on the web, so the menu must open above it. */
.billing-license-menu.ui-action-menu {
  z-index: var(--openbot-layer-dialog-host);
}

.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//home/ubuntu/openbot/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-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-1) var(--openbot-space-1-5);
  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 page title can be long: a tab and a thread stop at a width, and the title shows all of it. */
.reference-chip:is([data-kind="tab"], [data-kind="thread"]) {
  max-width: min(260px, 100%);
}

/* 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:is([data-kind="quote"], [data-kind="tab"], [data-kind="thread"]):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//home/ubuntu/openbot/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;
}

/* Try points to the end of the reading direction. */
.skill-preview-request .ui-icon-button > svg[class~="lucide-arrow-right"]:dir(rtl) {
  transform: scaleX(-1);
}
.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);
}
/* The next page comes in from the end of the reading direction. */
.t-page-slide:dir(rtl) .t-page[data-page-id="1"] {
  --t-page-from-x: var(--page-slide-distance);
}
.t-page-slide:dir(rtl) .t-page[data-page-id="2"] {
  --t-page-from-x: calc(var(--page-slide-distance) * -1);
}
.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//home/ubuntu/openbot/src/renderer/src/styles/window-glass.css */
/* The transparent window on macOS. Main gives the main window the system blur and a clear
 * background, and sets `data-openbot-window-glass` on the root. The frame, the content card and the
 * pages that fill the card are clear tints. In the window, the surface tokens are translucent too,
 * so the bubbles, tables, code blocks, cards, controls and the composer show the blur. Dialogs, menus,
 * tooltips and toasts open outside `.app-window`, or in a popper inside it, and stay solid. A browser
 * tab, an iframe or a canvas stays opaque: CSS cannot make a native view clear. */
:root[data-openbot-window-glass] {
  --window-glass-frame: color-mix(in srgb, var(--openbot-bg-frame) 20%, transparent);
  --window-glass-card: color-mix(in srgb, var(--openbot-bg-canvas) 30%, transparent);

  /* The root resolves these from the solid tokens, and from a theme palette's inline tokens. */
  --window-glass-canvas: color-mix(in srgb, var(--openbot-bg-canvas) 25%, transparent);
  --window-glass-sidebar: color-mix(in srgb, var(--openbot-bg-sidebar) 25%, transparent);
  --window-glass-frame-fill: color-mix(in srgb, var(--openbot-bg-frame) 30%, transparent);
  --window-glass-sheet: color-mix(in srgb, var(--openbot-bg-sheet) 35%, transparent);
  --window-glass-sheet-inset: color-mix(in srgb, var(--openbot-bg-sheet-inset) 25%, transparent);
  --window-glass-grouped: color-mix(in srgb, var(--openbot-bg-grouped) 35%, transparent);
  --window-glass-surface: color-mix(in srgb, var(--openbot-bg-surface) 35%, transparent);
  --window-glass-surface-raised: color-mix(in srgb, var(--openbot-bg-surface-raised) 40%, transparent);
  --window-glass-control: color-mix(in srgb, var(--openbot-bg-control) 35%, transparent);
  --window-glass-control-hover: color-mix(in srgb, var(--openbot-bg-control-hover) 45%, transparent);
  --window-glass-control-active: color-mix(in srgb, var(--openbot-bg-control-active) 55%, transparent);
  --window-glass-tabs-bar: color-mix(in srgb, var(--openbot-tabs-bar-bg) 35%, transparent);
  --window-glass-tabs-pill: color-mix(in srgb, var(--openbot-tabs-pill-bg) 45%, transparent);

  /* The solid values, for the floating surfaces that open inside the window. */
  --window-solid-canvas: var(--openbot-bg-canvas);
  --window-solid-sidebar: var(--openbot-bg-sidebar);
  --window-solid-frame: var(--openbot-bg-frame);
  --window-solid-sheet: var(--openbot-bg-sheet);
  --window-solid-sheet-inset: var(--openbot-bg-sheet-inset);
  --window-solid-grouped: var(--openbot-bg-grouped);
  --window-solid-surface: var(--openbot-bg-surface);
  --window-solid-surface-raised: var(--openbot-bg-surface-raised);
  --window-solid-control: var(--openbot-bg-control);
  --window-solid-control-hover: var(--openbot-bg-control-hover);
  --window-solid-control-active: var(--openbot-bg-control-active);
  --window-solid-tabs-bar: var(--openbot-tabs-bar-bg);
  --window-solid-tabs-pill: var(--openbot-tabs-pill-bg);
}

/* A token that the root derives from a surface token resolves there, so the window sets it again. */
:root[data-openbot-window-glass] .app-window {
  --openbot-bg-canvas: var(--window-glass-canvas);
  --openbot-bg-sidebar: var(--window-glass-sidebar);
  --openbot-bg-frame: var(--window-glass-frame-fill);
  --openbot-bg-sheet: var(--window-glass-sheet);
  --openbot-bg-sheet-inset: var(--window-glass-sheet-inset);
  --openbot-bg-grouped: var(--window-glass-grouped);
  --openbot-bg-surface: var(--window-glass-surface);
  --openbot-bg-surface-raised: var(--window-glass-surface-raised);
  --openbot-bg-control: var(--window-glass-control);
  --openbot-bg-control-hover: var(--window-glass-control-hover);
  --openbot-bg-control-active: var(--window-glass-control-active);
  --openbot-tabs-bar-bg: var(--window-glass-tabs-bar);
  --openbot-tabs-pill-bg: var(--window-glass-tabs-pill);
  --openbot-queue-surface: var(--openbot-bg-surface);
  --background: var(--openbot-bg-canvas);
  --surface: var(--openbot-bg-surface);
}

/* A popper, a menu, a tooltip or a drag preview covers the chat, so it stays solid in the window. */
:root[data-openbot-window-glass]
  .app-window
  :is(
    [data-popper-positioner],
    [role="dialog"],
    [role="alertdialog"],
    [role="menu"],
    [role="listbox"],
    [role="tooltip"],
    .ui-popover-menu-surface,
    .sidebar-agent-drag-preview,
    .sidebar-person-drag-preview,
    .sidebar-section-drag-preview
  ) {
  --openbot-bg-canvas: var(--window-solid-canvas);
  --openbot-bg-sidebar: var(--window-solid-sidebar);
  --openbot-bg-frame: var(--window-solid-frame);
  --openbot-bg-sheet: var(--window-solid-sheet);
  --openbot-bg-sheet-inset: var(--window-solid-sheet-inset);
  --openbot-bg-grouped: var(--window-solid-grouped);
  --openbot-bg-surface: var(--window-solid-surface);
  --openbot-bg-surface-raised: var(--window-solid-surface-raised);
  --openbot-bg-control: var(--window-solid-control);
  --openbot-bg-control-hover: var(--window-solid-control-hover);
  --openbot-bg-control-active: var(--window-solid-control-active);
  --openbot-tabs-bar-bg: var(--window-solid-tabs-bar);
  --openbot-tabs-pill-bg: var(--window-solid-tabs-pill);
  --openbot-queue-surface: var(--openbot-bg-surface);
  --background: var(--openbot-bg-canvas);
  --surface: var(--openbot-bg-surface);
}

:root[data-openbot-window-glass] body {
  background: transparent;
}

:root[data-openbot-window-glass] .app-window {
  --window-frame: var(--window-glass-frame);
}

/* The narrow window has no card: the panes sit on the frame. */
@media (max-width: 720px) {
  :root[data-openbot-window-glass] .app-window > .app-frame-edge {
    background: var(--window-glass-card);
  }
}

@media (min-width: 721px) {
  /* The window paints the frame once. Opaque, these layers repeat its color; translucent, each one
   * would add its tint again, and the top row would show darker than the page rail. */
  :root[data-openbot-window-glass] .app-window > .app-frame-edge,
  :root[data-openbot-window-glass] .app-window > .app-frame-edge > .server-rail {
    background: transparent;
  }

  :root[data-openbot-window-glass] .app-window > .app-frame-edge::before,
  :root[data-openbot-window-glass]
    .app-window
    > .app-frame-edge
    .side-panel-maximized
    > :is(.settings-panel, .browser-panel),
  :root[data-openbot-window-glass] .app-frame-edge .diagram-view-body {
    background: var(--window-glass-card);
  }
}

/* The sidebar, the card and the top row are clear, so no ring colour matches what shows through them:
 * an avatar outline there would be a halo. A row that paints its own hover or selected fill sets the
 * outline again. */
:root[data-openbot-window-glass] .app-window > .app-frame-edge > .sidebar,
:root[data-openbot-window-glass] .app-window > .app-frame-edge :is(.channel-empty, .channel-title),
:root[data-openbot-window-glass]
  .app-window
  > .app-frame-edge
  > .sidebar
  :is(.sidebar-section-agent-drop-target, .sidebar-pinned-group-agent-drop-target)
  > * {
  --agent-avatar-outline: transparent;
}

/* The ring filter of the sidebar faces floods the sidebar colour, which would be a halo on the clear
 * sidebar. A row with its own hover or selected fill keeps the filter of that fill; a row under a drag
 * has no hover fill. */
:root[data-openbot-window-glass]
  .app-window
  > .app-frame-edge
  > .sidebar
  .agent-row:not(:hover, .agent-row-active)
  .channel-avatar-cluster
  .agent-avatar:has(> .bloub-avatar-svg image),
:root[data-openbot-window-glass]
  .app-window
  > .app-frame-edge
  > .sidebar
  .agent-list[data-sidebar-dragging]
  .agent-row:hover:not(.agent-row-active)
  .channel-avatar-cluster
  .agent-avatar:has(> .bloub-avatar-svg image) {
  filter: none;
}

/* With no outline, faces that overlap would merge into one shape, so the channel title and the empty
 * state put them side by side. This also covers the title's hover fill, which has no clear part. */
:root[data-openbot-window-glass]
  .app-window
  > .app-frame-edge
  :is(.channel-empty, .channel-title)
  .channel-avatar
  .agent-avatar
  + .agent-avatar {
  margin-inline-start: 0;
}

/* The pages in the card are clear, so the card's tint shows once and not twice. */
:root[data-openbot-window-glass]
  .app-window
  :is(.schedule-pane, .agent-usage, .tasks-page, .diagram-view, .settings-page-content .agent-files-view) {
  background: transparent;
}

:root[data-openbot-window-glass] .app-window .diagram-board-viewport {
  background-color: transparent;
}

/* The composer at the top of the tasks list and the Settings fades cover the rows that scroll under
 * them, so they take the card's tint. */
:root[data-openbot-window-glass] .app-window .tasks-page-composer.composer-wrap {
  background: var(--window-glass-card);
}

:root[data-openbot-window-glass] .app-window .settings-page-content .settings-modal-scroll-frame::before {
  background: linear-gradient(to bottom, var(--window-glass-card) 28%, transparent 100%);
}

:root[data-openbot-window-glass] .app-window .settings-page-content .settings-modal-scroll-frame::after {
  background: linear-gradient(to top, var(--window-glass-card) 28%, transparent 100%);
}

/* A sticky bar covers the rows that scroll under it. It keeps its clear tint and blurs the rows, so
 * their text does not mix with its own. */
:root[data-openbot-window-glass]
  .app-window
  :is(
    .sidebar-folder > header,
    .marketplace-skill-group-bar,
    .agent-instructions-bar,
    .trace-row[data-parent],
    .trace-axis-row
  ) {
  backdrop-filter: blur(var(--openbot-space-4));
}

/* A workflow node covers the connections and the nodes under it, so the node cards stay solid on the
 * clear canvas. */
:root[data-openbot-window-glass] .app-window .wfn-stage {
  --wfn-card: var(--window-solid-canvas);
  --wfn-field: var(--window-solid-surface-raised);
  --wfn-port: color-mix(in srgb, var(--openbot-text-primary) 10%, var(--window-solid-canvas));
}

:root[data-openbot-window-glass][data-openbot-color-scheme="light"] .app-window .wfn-stage {
  --wfn-card: var(--window-solid-surface);
  --wfn-field: var(--window-solid-control-hover);
}

/* The full-bleed browser covers the window with its own frame and card. */
:root[data-openbot-window-glass] .browser-full-view {
  background: var(--window-glass-frame);
}

/* The surfaces in a bubble with a chat colour are clear here, so the tint of the bubble shows through them
 * already. They keep the clear values; a mix with the chat colour would tint them twice. */
:root[data-openbot-window-glass] .app-window .ui-bubble.message-bubble-colored > .ui-bubble-content {
  --openbot-bg-canvas: var(--window-glass-canvas);
  --openbot-bg-sidebar: var(--window-glass-sidebar);
  --openbot-bg-surface: var(--window-glass-surface);
  --openbot-bg-surface-raised: var(--window-glass-surface-raised);
  --openbot-bg-control: var(--window-glass-control);
  --openbot-bg-control-hover: var(--window-glass-control-hover);
  --openbot-bg-control-active: var(--window-glass-control-active);
}

/* A chat colour is solid, so a mix with the clear surface would make the bubble less clear than the
 * others. The window mixes the colour into the solid surface, then gives the result the same alpha as
 * the plain bubble of that kind. */
:root[data-openbot-window-glass] .app-window .ui-bubble.message-bubble-member > .ui-bubble-content {
  background: color-mix(
    in srgb,
    color-mix(in srgb, var(--message-author-color, var(--openbot-accent)) 22%, var(--window-solid-surface-raised)) 40%,
    transparent
  );
}

:root[data-openbot-window-glass]
  .app-window
  .message-entry-agent
  .ui-bubble-variant-muted.message-bubble-colored
  > .ui-bubble-content {
  background: color-mix(
    in srgb,
    color-mix(in srgb, var(--message-chat-color) var(--message-bubble-tint-amount), var(--window-solid-surface)) 35%,
    transparent
  );
}

:root[data-openbot-window-glass]
  .app-window
  .message-entry-user
  .ui-bubble.message-bubble-colored
  > .ui-bubble-content {
  background: color-mix(
    in srgb,
    color-mix(in srgb, var(--message-chat-color) var(--message-bubble-tint-amount), var(--window-solid-surface-raised))
      40%,
    transparent
  );
}


/* /@fs//home/ubuntu/openbot/src/renderer/src/styles/chat-background.css */
/* The chat background that the user picks for each scheme in Settings › General. `chat-background.ts`
 * sets both colors on the root; the one of the scheme that the window shows replaces the canvas in
 * conversations only, not in the pages of the window. Bubbles, the composer and code blocks keep their
 * own surfaces over it.
 *
 * A color that makes text hard to read is made darker in Dark and lighter in Light. In Dark, an OKLCH
 * lightness of at most 0.30 keeps `--openbot-text-muted` at about 4.5:1; the default canvas is 0.22.
 * In Light, at least 0.95 keeps `--openbot-text-muted` at about 4.5:1; the default canvas is 0.97.
 * The chroma limit keeps each hue at that lightness in sRGB. A color out of sRGB is clipped, and the
 * clip makes it lighter: the most saturated sRGB color at hue 29 gave 3.6:1 in Dark. The presets are
 * under the limit. */
:root[data-openbot-color-scheme="dark"][data-openbot-chat-background-dark] {
  --chat-background: oklch(from var(--openbot-chat-background-dark) min(l, 0.3) min(c, 0.05) h);
}

:root[data-openbot-color-scheme="light"][data-openbot-chat-background-light] {
  --chat-background: oklch(from var(--openbot-chat-background-light) max(l, 0.95) min(c, 0.02) h);
}

:root[data-openbot-color-scheme="dark"][data-openbot-chat-background-dark]
  :is(.conversation-panel:not(.window-page), .direct-conversation),
:root[data-openbot-color-scheme="light"][data-openbot-chat-background-light]
  :is(.conversation-panel:not(.window-page), .direct-conversation) {
  --openbot-bg-canvas: var(--chat-background);
  --openbot-bg-canvas-clear: oklch(from var(--chat-background) l c h / 0);
}

/* The light scroll edge fades into the canvas; the dark one does not use the canvas. */
:root[data-openbot-color-scheme="light"][data-openbot-chat-background-light]
:is(.conversation-panel:not(.window-page), .direct-conversation) {
  --openbot-scroll-edge-overlay: oklch(from var(--chat-background) l c h / 0.72);
}

/* The transparent window keeps its blur: the color is a tint, as the default canvas is there. */
:root[data-openbot-window-glass][data-openbot-color-scheme="dark"][data-openbot-chat-background-dark]
  .app-window
  :is(.conversation-panel:not(.window-page), .direct-conversation),
:root[data-openbot-window-glass][data-openbot-color-scheme="light"][data-openbot-chat-background-light]
  .app-window
  :is(.conversation-panel:not(.window-page), .direct-conversation) {
  --openbot-bg-canvas: color-mix(in srgb, var(--chat-background) 25%, transparent);
}

/* In the window, the pane is transparent over the card that the agent list shares, and its header is
 * in the top row. A layer under the pane paints the card part of the chat, with the card's right
 * corners. A side panel in the chat is on it too, as it uses the chat canvas. */
@media (min-width: 721px) {
  :root[data-openbot-color-scheme="dark"][data-openbot-chat-background-dark]
    .app-window
    > .app-frame-edge
    :is(.conversation-panel:not(.window-page), .direct-conversation)::before,
  :root[data-openbot-color-scheme="light"][data-openbot-chat-background-light]
    .app-window
    > .app-frame-edge
    :is(.conversation-panel:not(.window-page), .direct-conversation)::before {
    position: absolute;
    z-index: -1;
    inset: var(--left-header-height) 0 0;
    border-start-end-radius: calc(var(--openbot-radius-card) - 1px);
    border-end-end-radius: calc(var(--openbot-radius-card) - 1px);
    background: var(--openbot-bg-canvas);
    content: "";
    pointer-events: none;
  }
}


/* /@fs//home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_AMS-Regular.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_AMS-Regular.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Bold.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Bold.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Regular.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Regular.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Fraktur-Bold.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Fraktur-Bold.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Fraktur-Regular.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Fraktur-Regular.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Main-Bold.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Main-Bold.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Main-BoldItalic.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Main-BoldItalic.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Main-Italic.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Main-Italic.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Main-Regular.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Main-Regular.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Math-BoldItalic.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Math-BoldItalic.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Math-Italic.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Math-Italic.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_SansSerif-Bold.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_SansSerif-Bold.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_SansSerif-Italic.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_SansSerif-Italic.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_SansSerif-Regular.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_SansSerif-Regular.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Script-Regular.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Script-Regular.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Size1-Regular.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Size1-Regular.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Size2-Regular.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Size2-Regular.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Size3-Regular.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Size3-Regular.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Size4-Regular.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Size4-Regular.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Typewriter-Regular.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Typewriter-Regular.woff) format("woff"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Typewriter-Regular.ttf) format("truetype")}.katex{font:normal 1.21em KaTeX_Main,math,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.19.0"}.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//home/ubuntu/openbot/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-inline-end var(--panel-resize-duration, var(--openbot-duration-overlay))
    cubic-bezier(0.22, 1, 0.36, 1);
  --conversation-column-width: clamp(1440px, 65vw, 1920px);
}

/*
 * On a very wide screen the chat stops at a column and centers in the pane, so a reply and the
 * user's message stay near each other. The column grows with the window from 1440px to 1920px. It
 * uses the window width, not a percentage, because a percentage refers to a different box in the
 * message list and in the composer padding. A laptop window is narrower than the column and shows the
 * chat at full width. The scroll area and the composer keep the pane width, so the scroll bar stays
 * at the pane edge. The live content under the messages, such as the working row and a pending
 * question, stays in the same column.
 */
.conversation-panel > .conversation-scroll > :is(.virtual-chat-list, .conversation-live) {
  max-width: var(--conversation-column-width);
  margin-inline: auto;
}

/*
 * The composer is 6px wider on each side than the messages, as at full width. The padding holds the
 * composer and the notices above it in the column, and keeps their own side margins. A percentage
 * padding is relative to the panel, so the settings panel width is subtracted where it shows.
 */
.conversation-panel > .composer-wrap {
  padding-inline: max(var(--openbot-space-1-5), calc((100% - var(--conversation-column-width) - 12px) / 2));
}

.conversation-panel[data-settings-panel] > .composer-wrap {
  padding-inline: max(
    var(--openbot-space-1-5),
    calc((100% - var(--settings-panel-width, 360px) - var(--conversation-column-width) - 12px) / 2)
  );
}

/*
 * An open side thread covers the agent's own chat and its message box. They leave the layout but stay
 * at the pane width, so their rows, scroll position and draft are there again on the way back. Their
 * content is not rendered: a selected sliding tab, such as a code preview, sets its own visibility.
 * The content keeps the size that the browser remembers from its last render, so the scroll area keeps
 * its height and position. Without containment, the remembered size changes nothing.
 */
.conversation-panel > .conversation-covered {
  position: absolute;
  inset: 0;
  visibility: hidden;
}

.conversation-panel > :is(.conversation-scroll, .composer-wrap) > * {
  contain-intrinsic-size: auto none;
}

.conversation-panel > .conversation-covered > * {
  content-visibility: hidden;
}

.conversation-panel > .composer-wrap.conversation-covered {
  top: auto;
}

/*
 * The mention picker is positioned in the composer wrap and is 12px narrower on each side than the
 * composer. Here a percentage is relative to the composer wrap.
 */
.conversation-panel > .composer-wrap .mention-picker {
  --mention-picker-side-inset: max(
    calc(var(--openbot-space-1-5) + 12px),
    calc((100% - var(--conversation-column-width) + 12px) / 2)
  );
}

.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: calc(30px * -0.14);

  width: 30px;
  height: 30px;
  border-radius: var(--openbot-radius-md);
}

.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-block: 6px;
  padding-inline: 13px 7px;
  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//home/ubuntu/openbot/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-block: 0;
  padding-inline: 8px 12px;
  background: transparent;
}

.conversation-heading-group {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.chat-search {
  position: absolute;
  z-index: 13;
  top: 19px;
  inset-inline-end: 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-inline-start: 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-inline-end: 3px;
}

::highlight(openbot-chat-search-results) {
  background: var(--openbot-accent-soft);
}

::highlight(openbot-chat-search-current) {
  background: var(--openbot-warning);
  color: var(--openbot-paper-text);
}

.conversation-title[aria-label="View agent settings"]:hover {
  color: var(--openbot-text-primary);
}

.browser-panel {
  position: absolute;
  z-index: 14;
  top: 0;
  inset-inline-end: 0;
  bottom: 0;
  display: flex;
  width: var(--browser-panel-width, 380px);
  flex-direction: column;
  border-inline-start: 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//home/ubuntu/openbot/packages/ui/src/features/conversation/styles/file-preview.css */
/* transitions.dev panel reveal for the file preview. The panel enters from
   the end 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-block: 0;
  padding-inline: 11px 7px;
}

.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: start;
}

.file-preview-spreadsheet-table th,
.file-preview-spreadsheet-table td {
  border-top: 1px solid var(--openbot-border);
  border-inline-end: 1px solid var(--openbot-border);
  padding: 8px 12px;
  text-align: start;
  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-inline-end: 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: start;
}

.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;
}

/* In RTL the panel is on the left edge, so it enters from the left. */
:dir(rtl) .file-preview-panel.t-panel-slide {
  --panel-translate-x: -24px;
}

/* Back points to the start side. */
:dir(rtl) .file-preview-header svg[class~="lucide-arrow-left"] {
  transform: scaleX(-1);
}


/* /@fs//home/ubuntu/openbot/packages/ui/src/features/conversation/styles/remote-desktop.css */
.conversation-panel.browser-panel-active {
  padding-inline-end: 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-block: 0;
  padding-inline: 0 8px;
  background: var(--openbot-bg-sidebar);
}

.remote-desktop-workspace-darwin .remote-desktop-header {
  /* The macOS traffic lights are at the inline start in every language. */
  padding-inline-start: 84px;
}

.remote-desktop-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  flex: 0 1 auto;
  justify-content: flex-end;
  gap: 4px;
  margin-inline-start: 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-lg);
}

.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;
  inset-inline-end: 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//home/ubuntu/openbot/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-profile-status,
.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-profile-status {
  min-width: 0;
  max-width: 240px;
  flex-shrink: 1;
  background: var(--openbot-bg-control);
  color: var(--openbot-text-secondary);
}

/* The color of a profile: in its toolbar label, the agent select and the server settings. */
.browser-profile-dot {
  display: block;
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-pill);
}

.browser-profile-dot-shared {
  background: var(--openbot-text-muted);
}

.browser-profile-status-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.browser-profile-status svg,
.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//home/ubuntu/openbot/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%;
}

/* A photo keeps its own colours, as on mobile, so only a generated face lights up. */
.agent-settings-avatar:hover:not(:has(.agent-avatar-custom)) {
  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;
  inset-inline-end: -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: var(--openbot-space-2);
}

/* One card for each routine: the row opens the routine, and the switch at the end pauses it. */
.agent-routine-list-item {
  display: grid;
  min-height: 52px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--openbot-space-3);
  align-items: center;
  padding-inline-end: var(--openbot-space-4);
}

.agent-routine-row {
  display: grid;
  width: 100%;
  height: auto;
  align-self: stretch;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: var(--openbot-space-3);
  align-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding-block: var(--openbot-space-2);
  padding-inline: var(--openbot-space-4) 0;
  text-align: start;
}

.agent-routine-row:focus-visible {
  outline: none;
}

.agent-routine-card {
  transition: background-color var(--openbot-duration-hover) ease;
}

.agent-routine-card:has(.agent-routine-row:focus-visible) {
  border-color: var(--openbot-border-strong);
}

.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: 16px;
  height: 16px;
  stroke-width: var(--openbot-icon-stroke);
}

/*
 * Only the card shows hover. The ghost button hover would paint the row a second colour, so the row
 * and the switch area would not match.
 */
@media (hover: hover) and (pointer: fine) {
  .agent-routine-card:has(.agent-routine-row:hover) {
    background: var(--openbot-hover);
  }

  .agent-routine-list-item > .agent-routine-row:hover:not(:disabled) {
    background: transparent;
  }
}

.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;
}

/* The switch label starts where the labels of the fields above it start. */
.agent-routine-run-in {
  padding-inline-start: var(--openbot-space-2);
}

.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-routines-footer {
  flex: none;
  padding: 0 15px 15px;
}

.agent-routines-footer:empty {
  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;
}

/* What a field misses, under its control, where the field limit goes. */
.agent-routine-field-error {
  margin-block: var(--openbot-space-1-5) 0;
  margin-inline: var(--openbot-space-2) 0;
}

/* Schedule or webhook: two equal choices above the trigger. */
.agent-routine-trigger-kind {
  display: grid;
  min-width: 0;
  grid-template-columns: 1fr 1fr;
  gap: var(--openbot-space-1);
  margin: 0 0 var(--openbot-space-2);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  padding: var(--openbot-space-0-5);
}

.agent-routine-trigger-kind-icon {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

/* The schedule and history are fields, so their headings match the field labels. */
.agent-routine-when h3,
.agent-routine-history h3 {
  margin-block: 0 var(--openbot-space-1-5);
  margin-inline: var(--openbot-space-2) 0;
  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: start;
}

.ui-button.agent-routine-run-link {
  cursor: pointer;
}

/* The time, then a muted note: an ignored webhook request, skipped runs, a late start, or why a run failed. */
.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-block: var(--openbot-space-2);
  padding-inline: var(--openbot-space-3) var(--openbot-space-2);
}

.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-body {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: var(--openbot-space-2);
}

.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: start;
}

.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-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);
}

/*
 * Agent settings > Memories. It covers the settings in the pane. A wide pane keeps the page in one
 * column of reading width.
 */
.agent-memories-view {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

/* A memory title is up to 100 characters; the header has the height of one line. */
.agent-memories-view .settings-panel-header h2 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-memories-page {
  display: grid;
  width: min(100%, 680px);
  gap: var(--openbot-space-6);
  margin-inline: auto;
}

.agent-memories-page .settings-link-group,
.agent-memories-page :is(.agent-memory-state, .agent-memory-limit, .agent-memory-error) {
  margin: 0;
}

/* The search field has the size of a list row, and its icon and text line up with the New memory row. */
.agent-memories-search {
  position: relative;
  min-width: 0;
}

.agent-memories-search-icon {
  position: absolute;
  top: 50%;
  inset-inline-start: calc(var(--openbot-space-3) + 1px);
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
  pointer-events: none;
  stroke-width: var(--openbot-icon-stroke);
  transform: translateY(-50%);
}

.agent-memories-search .agent-memories-search-input {
  width: 100%;
  height: 42px;
  padding-inline: calc(var(--openbot-space-3) + var(--openbot-icon-sm) + var(--openbot-space-2)) var(--openbot-space-3);
  border-color: var(--openbot-border);
  background: var(--openbot-bg-surface);
  font-size: var(--openbot-text-md);
}

.agent-memories-search-input::-webkit-search-cancel-button {
  display: none;
}

.agent-memories-reading {
  display: grid;
  gap: var(--openbot-space-3);
}

.agent-memories-text {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-xl);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.agent-memories-meta {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.agent-memories-actions,
.agent-memories-clear {
  display: flex;
  gap: var(--openbot-space-2);
}

.agent-memories-editor {
  display: grid;
  gap: var(--openbot-space-2);
}

.agent-memories-field {
  min-height: 0;
  max-height: 320px;
  field-sizing: content;
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-xl);
}

.agent-memories-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
}

/* The empty state fills the height the dialog gave it. */
.agent-memories-view-empty {
  display: flex;
  min-height: 456px;
  flex-direction: column;
}

/*
 * The page before its first memory: a faint copy of the list above the pitch. The newest sample
 * writes itself in handwriting; when the next one comes, it becomes a typed row and steps back.
 */
.agent-memories-empty {
  display: grid;
  flex: 1;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) auto;
}

.agent-memories-empty-list {
  min-width: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  mask-image: linear-gradient(var(--openbot-text-primary) 45%, var(--openbot-transparent));
  transition:
    opacity 700ms var(--openbot-ease-out),
    filter 700ms var(--openbot-ease-out);
}

.agent-memories-empty-list[data-clearing] {
  opacity: 0;
  filter: blur(3px);
}

/* A new row opens from no height, so the rows under it move down. */
.agent-memories-empty-item {
  display: grid;
  grid-template-rows: 1fr;
  animation: agent-memories-empty-open 520ms var(--openbot-ease-out) both;
  transition: opacity 640ms var(--openbot-ease-out);
}

.agent-memories-empty-item > *,
.agent-memories-empty-fold > * {
  min-height: 0;
  overflow: hidden;
}

@keyframes agent-memories-empty-open {
  from {
    grid-template-rows: 0fr;
    opacity: 0;
  }
}

.agent-memories-empty-item[data-age="1"] {
  opacity: 0.6;
}

.agent-memories-empty-item[data-age="2"] {
  opacity: 0.4;
}

.agent-memories-empty-item[data-age="3"] {
  opacity: 0.25;
}

/* The sample rows keep the real row styles, with no fixed height. */
.agent-memories-empty-row {
  min-height: 0;
}

.agent-memories-empty-row .agent-memory-row-main {
  height: auto;
}

/* The two texts of a row: the handwriting folds away and the typed text opens when the ink is dry. */
.agent-memories-empty-fold {
  display: grid;
  transition:
    grid-template-rows 640ms var(--openbot-ease-out),
    opacity 640ms var(--openbot-ease-out);
}

.agent-memories-empty-fold-hand {
  grid-template-rows: 1fr;
}

.agent-memories-empty-fold-typed {
  grid-template-rows: 0fr;
  opacity: 0;
}

.agent-memories-empty-item[data-dry] .agent-memories-empty-fold-hand {
  grid-template-rows: 0fr;
  opacity: 0;
}

.agent-memories-empty-item[data-dry] .agent-memories-empty-fold-typed {
  grid-template-rows: 1fr;
  opacity: 1;
}

/* Handwriting. The app has no hand font, so it uses the one of the system. */
.agent-memories-hand {
  color: var(--openbot-accent-text);
  font-family: "Bradley Hand", "Noteworthy", "Segoe Print", cursive;
  font-weight: var(--openbot-weight-semibold);
}

.agent-memories-empty-hand {
  display: grid;
  padding-block: var(--openbot-space-0-5);
  font-size: var(--openbot-text-xl);
  line-height: 1.3;
  transform: rotate(-0.6deg);
  transform-origin: left top;
}

/* Each line writes itself from left to right, at the speed of its length. */
.agent-memories-empty-line {
  white-space: nowrap;
  clip-path: inset(-0.4em calc(100% + 0.2em) -0.4em -0.2em);
  animation: agent-memories-empty-write var(--agent-memories-empty-length) linear var(--agent-memories-empty-delay)
    forwards;
}

@keyframes agent-memories-empty-write {
  to {
    clip-path: inset(-0.4em -0.2em -0.4em -0.2em);
  }
}

/* In right-to-left text, each line writes itself from right to left. */
:dir(rtl) .agent-memories-empty-hand {
  transform-origin: right top;
}

:dir(rtl) .agent-memories-empty-line {
  clip-path: inset(-0.4em -0.2em -0.4em calc(100% + 0.2em));
}

.agent-memories-empty-meta {
  opacity: 0;
  animation: agent-memories-empty-show 360ms var(--openbot-ease-out) var(--agent-memories-empty-delay) forwards;
}

@keyframes agent-memories-empty-show {
  to {
    opacity: 1;
  }
}

.agent-memories-empty-pitch {
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3) var(--openbot-space-4);
  text-align: center;
}

.agent-memories-empty-title {
  display: grid;
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-3xl);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.agent-memories-empty-title > .agent-memories-empty-lead {
  color: var(--openbot-text-muted);
}

/* The one handwritten word of the title. It writes itself once. */
/* Inline, not inline-block: a reader then hears "remember." with no space before the full stop. */
.agent-memories-empty-word {
  line-height: 1;
  clip-path: inset(-0.4em calc(100% + 0.2em) -0.4em -0.2em);
  animation: agent-memories-empty-write 640ms linear 400ms forwards;
}

.agent-memories-empty-lines {
  display: grid;
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}

.agent-memories-empty-action {
  margin-top: var(--openbot-space-1);
}

/* Less motion: one still frame with the full list. */
.agent-memories-empty[data-still]
:is(
  .agent-memories-empty-item,
  .agent-memories-empty-fold,
  .agent-memories-empty-line,
  .agent-memories-empty-meta,
  .agent-memories-empty-word
) {
  animation: none;
  transition: none;
  clip-path: none;
}

.agent-memories-empty[data-still]
  :is(.agent-memories-empty-line, .agent-memories-empty-meta, .agent-memories-empty-word) {
  opacity: 1;
}

.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-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: start;
}

.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-on-accent);
}

.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-inline-start: 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;
}

/* A provider setting: its row, then the notes under it. The row rounds with the card at an end. */
.agent-session-setting > .ui-select,
.agent-session-setting .agent-settings-runtime-row {
  border-radius: inherit;
}

.agent-session-setting-notes {
  display: grid;
  justify-items: start;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-2) var(--openbot-space-3);
}

.agent-session-setting > .agent-session-setting-notes {
  padding-top: 0;
}

.agent-session-setting-notes:empty {
  display: none;
}

.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: start;
}

.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//home/ubuntu/openbot/packages/ui/src/features/conversation/styles/agent-folders.css */
/* The Folders row sits in the Rules group after Permissions. The + opens the folder picker; the rest
   of the row opens the Folders page. */
.agent-folders-entry {
  position: relative;
}

/* The + sits over an empty slot in the row, between the count and the chevron; a button cannot hold a button. */
.agent-folders-entry-add-slot {
  flex: none;
  width: 24px;
}

.agent-folders-entry-add {
  position: absolute;
  top: 50%;
  inset-inline-end: calc(var(--openbot-space-3) + 14px + var(--openbot-space-2));
  color: var(--openbot-text-muted);
  transform: translateY(-50%);
}

/* The + is 24px; the row is 40px tall, so it takes a 40px target. */
.agent-folders-entry-add::before {
  position: absolute;
  inset: -8px;
  content: "";
}

/* The count changes as folders come and go; its digits keep one width. */
.agent-folders-count,
.agent-folders-lost {
  font-variant-numeric: tabular-nums;
}

/* A folder that is no longer on the disk shows on the row, so the user does not have to open the page. */
.agent-folders-lost {
  color: var(--openbot-warning-text);
}

/* The value holds the count, a dot, then the warning; the row's 8px gap is too wide around a dot. */
.agent-folders-dot {
  margin-inline: calc(var(--openbot-space-1) * -1);
}

/* While a folder is dragged over the side panel, the Folders row and the Added group show where it goes. */
.agent-folders-entry,
.agent-folders-drop-target {
  outline: 1px dashed transparent;
  outline-offset: -1px;
  transition:
    outline-color var(--openbot-duration-fast) var(--openbot-ease-out),
    background-color var(--openbot-duration-fast) var(--openbot-ease-out);
}

.agent-folders-entry[data-dragging],
.agent-folders-drop-target[data-dragging] {
  outline-color: var(--openbot-text-muted);
  background-color: var(--openbot-hover);
}

.agent-folders-page {
  display: grid;
  gap: var(--openbot-space-4);
}

/* Icon, text, then the actions the row has: Locate… for a missing folder, then X. */
.agent-folders-row {
  display: grid;
  grid-auto-columns: auto;
  grid-auto-flow: column;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--openbot-space-2);
  min-height: 48px;
  padding-block: var(--openbot-space-1-5);
  padding-inline: var(--openbot-space-3) var(--openbot-space-1-5);
}

.agent-folders-text {
  display: grid;
  min-width: 0;
}

.agent-folders-name {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-folders-path {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-folders-row[data-missing] .settings-link-icon,
.agent-folders-row[data-missing] .agent-folders-path {
  color: var(--openbot-warning-text);
}

/* The note on the Folders page when the agent can change all files. */
.agent-folders-access {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-2);
  padding-block: var(--openbot-space-2);
  padding-inline: var(--openbot-space-3) var(--openbot-space-2);
}

.agent-folders-access-text {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  text-wrap: pretty;
}

.agent-folders-remove {
  position: relative;
  color: var(--openbot-text-muted);
}

/* The button is 32px; the row is 48px tall, so it can take a 44px target. */
.agent-folders-remove::before {
  position: absolute;
  inset: -6px;
  content: "";
}

.agent-folders-add {
  color: var(--openbot-text-secondary);
}

.agent-folders-drop-target[data-dragging] .agent-folders-add {
  color: var(--openbot-text-primary);
}

/* A folder the user just added comes in under the others. */
@media (prefers-reduced-motion: no-preference) {
  .agent-folders-row[data-fresh] {
    animation: agent-folders-row-in var(--openbot-duration-normal) var(--openbot-ease-out) both;
  }

  .agent-folders-chat-drop {
    animation: agent-folders-fade-in var(--openbot-duration-fast) var(--openbot-ease-out) both;
  }

  /* The user tried to add a folder that this row already gives: the row shows itself once. */
  .agent-folders-row[data-flash],
  .agent-folders-entry[data-flash] {
    animation: agent-folders-row-flash 900ms var(--openbot-ease-out);
  }
}

/* Without motion the row stays marked a moment and the mark goes at once. */
@media (prefers-reduced-motion: reduce) {
  .agent-folders-row[data-flash],
  .agent-folders-entry[data-flash] {
    animation: agent-folders-row-flash 900ms steps(1, end);
  }
}

@keyframes agent-folders-row-flash {
  from,
  40% {
    background-color: var(--openbot-hover);
  }
}

@keyframes agent-folders-row-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

@keyframes agent-folders-fade-in {
  from {
    opacity: 0;
  }
}

/* The chat's drop overlay in two halves. It takes the place of the chat's own overlay for a local
   agent in Workspace only mode; with wider access a folder gives nothing new, so files only attach. */
.agent-folders-chat-drop {
  position: absolute;
  z-index: 60;
  inset: var(--openbot-space-3);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--openbot-space-3);
  border-radius: var(--openbot-radius-lg);
  background: color-mix(in srgb, var(--background) 70%, transparent);
  pointer-events: none;
  backdrop-filter: blur(3px);
}

/* The settings panel takes its own drops, so the overlay stops at its edge. */
.conversation-panel[data-settings-panel] .agent-folders-chat-drop {
  inset-inline-end: calc(var(--settings-panel-width, 360px) + var(--openbot-space-3));
}

.agent-folders-chat-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-6);
  border: 1px dashed var(--openbot-text-muted);
  border-radius: var(--openbot-radius-lg);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
  text-align: center;
  text-wrap: balance;
  transition:
    border-color var(--openbot-duration-fast) var(--openbot-ease-out),
    background-color var(--openbot-duration-fast) var(--openbot-ease-out);
}

.agent-folders-chat-zone > span {
  max-width: 28ch;
}

.agent-folders-chat-zone-folder {
  pointer-events: auto;
}

.agent-folders-chat-zone[data-dragging] {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--openbot-text-primary));
  background: var(--openbot-hover);
}

.agent-folders-chat-zone svg {
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--openbot-text-secondary);
  transition: color var(--openbot-duration-fast) var(--openbot-ease-out);
}

.agent-folders-chat-zone[data-dragging] svg {
  color: var(--openbot-text-primary);
}

/* The folder picker for an agent on another computer. It uses the frame of the "More providers"
   dialog: a title, a close button and one plain list, here with the places, the path and the buttons. */
.host-folder-picker-places {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-1);
  padding: 0 var(--openbot-space-3) var(--openbot-space-2);
}

.host-folder-picker-path {
  margin: 0;
  padding: 0 var(--openbot-space-3) var(--openbot-space-2);
  overflow-wrap: anywhere;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

.host-folder-picker .provider-more-list {
  flex: 1 1 auto;
  min-height: 160px;
}

.host-folder-picker-note {
  margin: 0;
  padding: var(--openbot-space-2) var(--openbot-space-3);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

.host-folder-picker-footer {
  display: flex;
  flex-shrink: 0;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-2) var(--openbot-space-1) var(--openbot-space-1);
}


/* /@fs//home/ubuntu/openbot/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-inline-start: 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-inline-start: 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-separator {
  color: var(--openbot-text-muted);
}

.routine-segmented {
  display: flex;
  margin-inline-start: 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-block: var(--openbot-space-2) var(--openbot-space-1);
  padding-inline: var(--openbot-space-3) var(--openbot-space-1);
}

.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-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-3) var(--openbot-space-1);
}

: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-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-3) var(--openbot-space-1);
  color: inherit;
  font: inherit;
  text-align: start;
}

.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,
.routine-webhook-actions > .ui-icon-button {
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
}

/* The secret row can have two actions. They share the last column, which grows to fit them. */
.routine-webhook-field:has(> .routine-webhook-actions) {
  grid-template-columns: minmax(84px, auto) minmax(0, 1fr) minmax(var(--openbot-control-sm), auto);
}

.routine-webhook-actions {
  display: flex;
  align-items: center;
}

/* 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);
}

/* In a chat card the rows are one block, so the card gap does not split them, and they line up
 * with the card title. */
.routine-webhook-card-endpoint {
  display: grid;
  border-bottom: 1px solid var(--openbot-border);
}

.routine-webhook-card-endpoint > .routine-webhook-field,
.routine-webhook-card-endpoint > .routine-webhook-note {
  padding-inline-start: 0;
}

/* The setup steps: a number, or a check when done, beside each step. */
.routine-webhook-steps {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.routine-webhook-steps > li {
  display: grid;
  grid-template-columns: var(--openbot-control-sm) minmax(0, 1fr);
  gap: var(--openbot-space-2);
  border-top: 1px solid var(--openbot-border);
  padding: var(--openbot-space-3);
}

.routine-webhook-step-body {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-1-5);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.routine-webhook-step-body > strong {
  font-weight: var(--openbot-weight-medium);
}

.routine-webhook-steps > li[data-disabled] .routine-webhook-step-body > strong {
  color: var(--openbot-text-muted);
}

.routine-webhook-step-marker {
  display: inline-grid;
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
  place-items: 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);
}

.routine-webhook-step-marker[data-done] {
  border-color: var(--openbot-success);
  background: var(--openbot-success-soft);
  color: var(--openbot-success-text);
}

.routine-webhook-step-check {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

/* A value row inside a step has its own border. */
.routine-webhook-inset {
  min-width: 0;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-sm);
}

.routine-webhook-inset > .routine-webhook-field {
  border-top: 0;
}

.routine-webhook-step-button {
  justify-self: start;
}

.routine-webhook-disclosure {
  justify-self: start;
  margin-inline-start: calc(var(--openbot-space-2) * -1);
  padding-inline: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: inherit;
}

.routine-webhook-disclosure-icon {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}

.routine-webhook-filter {
  display: grid;
  gap: var(--openbot-space-1);
}

.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-inline-start: 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-block: 0 var(--openbot-space-1);
  margin-inline: var(--openbot-space-1) 0;
  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. It is taller than a short
 * window, so it fits the space left and scrolls; the webhook row stays reachable. */
.routine-trigger-menu {
  width: 300px;
  max-height: min(560px, calc(100dvh - 16px), var(--kb-popper-content-available-height, 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);
}

/* The previous and next months, and the closed disclosures, point the other way in RTL. */
:dir(rtl) .routine-calendar-header :is(svg[class~="lucide-chevron-left"], svg[class~="lucide-chevron-right"]),
:dir(rtl) .routine-webhook-events-toggle > svg[class~="lucide-chevron-right"],
:dir(rtl) svg[class~="lucide-chevron-right"].routine-webhook-disclosure-icon {
  transform: scaleX(-1);
}


/* /@fs//home/ubuntu/openbot/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-inline-start: 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-inline-start: 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-inline-start: 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: start;
  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: start;
}

.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);
}

/*
 * The calendar before its first routine: a faint month behind the pitch. The month and the pitch
 * share one grid cell. Sample runs land on the month one at a time and write a note.
 */
.routine-planner-empty,
.routine-planner-empty-board {
  display: grid;
  min-width: 0;
}

.routine-planner-empty > *,
.routine-planner-empty-board > * {
  grid-area: 1 / 1;
}

.routine-planner-empty-board {
  pointer-events: none;
  user-select: none;
}

.routine-planner-empty-cells,
.routine-planner-empty-runs {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: 10rem;
}

/* Only hairlines. They clear behind the pitch and fade towards every edge. */
.routine-planner-empty-cells {
  mask-image:
    radial-gradient(ellipse 36% 36% at 50% 50%, var(--openbot-transparent) 68%, var(--openbot-text-primary) 100%),
    radial-gradient(ellipse 72% 78% at 50% 50%, var(--openbot-text-primary) 50%, var(--openbot-transparent) 100%);
  mask-composite: intersect;
}

.routine-planner-empty-cell {
  border-top: 1px solid var(--openbot-border);
  border-inline-start: 1px solid var(--openbot-border);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  color: var(--openbot-text-dim);
  font-size: var(--openbot-text-md);
}

.routine-planner-empty-cell[data-outside] {
  opacity: 0.45;
}

.routine-planner-empty-cell[data-today] {
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-semibold);
}

/* A run lands, writes its note, holds, then fades. The animation is `LIFE` steps of `STEP_MS`. */
.routine-planner-empty-run {
  display: grid;
  min-width: 0;
  align-self: start;
  justify-items: start;
  gap: var(--openbot-space-2);
  grid-row: var(--routine-planner-empty-row);
  grid-column: var(--routine-planner-empty-column);
  margin-top: calc(var(--openbot-space-8) + var(--openbot-space-1));
  padding-inline: var(--openbot-space-2);
  animation: routine-planner-empty-life var(--routine-planner-empty-life) var(--openbot-ease-out) both;
}

.routine-planner-empty-run > .routine-planner-run {
  width: 100%;
}

.routine-planner-empty-day {
  display: none;
}

.routine-planner-empty-check {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  opacity: 0;
  animation: routine-planner-empty-draw 420ms var(--openbot-ease-out) 380ms forwards;
}

@keyframes routine-planner-empty-life {
  0% {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(10px) scale(0.96);
  }

  8%,
  88% {
    opacity: 1;
    filter: blur(0);
    transform: none;
  }

  100% {
    opacity: 0;
    filter: blur(3px);
    transform: translateY(-4px);
  }
}

@keyframes routine-planner-empty-draw {
  from {
    opacity: 1;
  }

  to {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

/* Handwriting. The app has no hand font, so it uses the one of the system. */
.routine-planner-hand {
  color: var(--openbot-accent-text);
  font-family: "Bradley Hand", "Noteworthy", "Segoe Print", cursive;
  font-weight: var(--openbot-weight-semibold);
}

.routine-planner-empty-note {
  display: grid;
  width: fit-content;
  padding-inline: var(--openbot-space-1);
  font-size: var(--openbot-text-xl);
  line-height: 1.3;
  transform: rotate(-1.5deg);
  transform-origin: left top;
}

/* Each line writes itself from left to right, at the speed of its length. */
.routine-planner-empty-line {
  clip-path: inset(-0.4em 100% -0.4em -0.2em);
  animation: routine-planner-empty-write var(--routine-planner-empty-length) linear var(--routine-planner-empty-delay)
    forwards;
}

@keyframes routine-planner-empty-write {
  to {
    clip-path: inset(-0.4em -0.2em -0.4em -0.2em);
  }
}

.routine-planner-empty-underline {
  width: 100%;
  height: var(--openbot-space-2);
  overflow: visible;
}

.routine-planner-empty-underline path {
  fill: none;
  stroke: currentColor;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
  opacity: 0;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  animation: routine-planner-empty-draw 520ms var(--openbot-ease-out) var(--routine-planner-empty-delay) forwards;
}

.routine-planner-empty-pitch {
  z-index: 1;
  display: grid;
  max-width: 34rem;
  place-self: center;
  justify-items: center;
  gap: var(--openbot-space-4);
  padding: var(--openbot-space-6);
  text-align: center;
}

.routine-planner-empty-title {
  display: grid;
  font-size: var(--openbot-text-display);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.routine-planner-empty-title > .routine-planner-empty-lead {
  color: var(--openbot-text-muted);
}

/* The one handwritten word of the title. It writes itself once. */
/* Inline, not inline-block: a reader then hears "done." with no space before the full stop. */
.routine-planner-empty-done {
  clip-path: inset(-0.4em 100% -0.4em -0.2em);
  animation: routine-planner-empty-write 520ms linear 500ms forwards;
}

.routine-planner-empty-lines {
  display: grid;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-xl);
  line-height: 1.5;
}

.routine-planner-empty-action.ui-button {
  width: 100%;
  max-width: 22rem;
  height: var(--openbot-control-lg);
  margin-top: var(--openbot-space-2);
}

.routine-planner-empty-menu {
  min-width: 14rem;
  max-height: min(520px, calc(100dvh - 16px), var(--kb-popper-content-available-height, 520px));
  overflow-y: auto;
}

/* Less motion: one still frame with three runs and their notes. */
.routine-planner-empty[data-still]
:is(
  .routine-planner-empty-run,
  .routine-planner-empty-check,
  .routine-planner-empty-line,
  .routine-planner-empty-underline path,
  .routine-planner-empty-done
) {
  animation: none;
  clip-path: none;
  stroke-dashoffset: 0;
  opacity: 1;
}

.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;
  }

  /* The pitch comes first, then one row for each run on screen. */
  .routine-planner-empty > .routine-planner-empty-board {
    grid-area: 2 / 1;
  }

  .routine-planner-empty-pitch {
    padding-inline: 0;
  }

  .routine-planner-empty-title {
    font-size: var(--openbot-text-3xl);
  }

  .routine-planner-empty-lines {
    font-size: var(--openbot-text-lg);
  }

  .routine-planner-empty-cells {
    display: none;
  }

  .routine-planner-empty-runs {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(3, 8rem);
    grid-auto-rows: 0;
  }

  .routine-planner-empty-run {
    width: 100%;
    grid-row: var(--routine-planner-empty-slot);
    grid-column: 1;
    margin-top: 0;
    padding-inline: 0;
  }

  .routine-planner-empty-day {
    display: block;
    color: var(--openbot-text-dim);
    font-size: var(--openbot-text-sm);
  }

  .routine-planner-empty-note {
    font-size: var(--openbot-text-lg);
  }
}

/* In right-to-left text, each line writes itself from right to left. */
:dir(rtl) .routine-planner-empty-note {
  transform-origin: right top;
}

:dir(rtl) .routine-planner-empty-line {
  clip-path: inset(-0.4em -0.2em -0.4em 100%);
}

/* Back and the previous and next steps point the other way in RTL. */
:dir(rtl) .routine-planner-identity svg[class~="lucide-arrow-left"],
:dir(rtl) .routine-planner-nav :is(svg[class~="lucide-chevron-left"], svg[class~="lucide-chevron-right"]) {
  transform: scaleX(-1);
}


/* /@fs//home/ubuntu/openbot/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-inline-start: 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;
}

/* Open points to the end side. */
:dir(rtl) .chat-action-card-open svg[class~="lucide-chevron-right"] {
  transform: scaleX(-1);
}


/* /@fs//home/ubuntu/openbot/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. */

/* The frame is a UiBlockCard (ui-blocks.css). */
.marketplace-suggestion.ui-block-card {
  max-width: 520px;
}

/* 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);
  flex: none;
  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 .marketplace-suggestion-icon > .connector-brand-tile {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

/* The name and the tagline keep one line each, so the card stays short. */
.marketplace-suggestion .ui-block-title,
.marketplace-suggestion .ui-block-subtitle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketplace-suggestion .marketplace-suggestion-name {
  display: inline-block;
  height: auto;
  max-width: 100%;
  overflow: hidden;
  padding: 0;
  color: inherit;
  font: inherit;
  text-overflow: ellipsis;
  vertical-align: top;
  white-space: nowrap;
}

/* Skip and the action sit in the actions of the card; the wrapper only carries their state. */
.marketplace-suggestion-controls {
  display: contents;
}

/* A question to answer with the action: all of it, in the body of the card, with the action in the footer. */
.marketplace-suggestion-question {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  overflow-wrap: anywhere;
}

.marketplace-suggestion-action {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
}

/*
 * Connect, its busy step and Connected are one button. Both labels share one grid cell; the stage
 * takes the width of the label on screen, and the cell keeps that width, so the wider label
 * overflows on both sides instead of pushing the other one off-centre.
 */
.marketplace-suggestion .marketplace-suggestion-button {
  overflow: clip;
}

/* Connected is a status: the success fill holds under the pointer. On-light text keeps AA on the dark-theme fill. */
.marketplace-suggestion .marketplace-suggestion-button.ui-button[data-state="connected"],
.marketplace-suggestion .marketplace-suggestion-button.ui-button[data-state="connected"]:hover {
  border-color: transparent;
  background: var(--openbot-success);
  color: var(--openbot-text-on-light);
  cursor: default;
}

/* On-light text on the light-theme success fill is 3:1. The darker success-text fill keeps AA. */
:root[data-openbot-color-scheme="light"]
  .marketplace-suggestion
  .marketplace-suggestion-button.ui-button[data-state="connected"] {
  background: var(--openbot-success-text);
}

.marketplace-suggestion-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  justify-items: center;
}

.marketplace-suggestion-layer {
  display: inline-flex;
  grid-area: 1 / 1;
  align-items: center;
  gap: var(--openbot-space-1-5);
  white-space: nowrap;
}

.marketplace-suggestion-button[data-state="connected"] [data-layer="start"],
.marketplace-suggestion-button:not([data-state="connected"]) [data-layer="done"] {
  opacity: 0;
}

.marketplace-suggestion-layer > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

/* The spinner takes no room until the step is busy. */
.marketplace-suggestion-spinner {
  display: inline-flex;
  width: 0;
  margin-inline-end: calc(-1 * var(--openbot-space-1-5));
  opacity: 0;
}

.marketplace-suggestion-button[data-state="busy"] .marketplace-suggestion-spinner {
  width: auto;
  margin-inline-end: 0;
  opacity: 1;
}

.marketplace-suggestion-controls[data-state="connected"] .marketplace-suggestion-dismiss {
  width: 0;
  min-width: 0;
  margin-inline-start: calc(-1 * var(--openbot-space-2));
  overflow: hidden;
  border-width: 0;
  padding: 0;
  opacity: 0;
  visibility: hidden;
}

/*
 * The motion of a change the user started. With reduced motion, only the fill and the labels fade.
 * The busy step: the spinner grows in and the button widens. Connected: the success fill comes in, the
 * old label lifts away as the new one rises, the check draws from its short stroke, and Dismiss
 * folds so the button glides to the edge.
 */
.marketplace-suggestion-controls[data-motion] .marketplace-suggestion-button.ui-button {
  transition:
    background-color var(--openbot-duration-slow) var(--openbot-ease-out),
    color var(--openbot-duration-slow) var(--openbot-ease-out),
    opacity var(--openbot-duration-normal) var(--openbot-ease-out);
}

.marketplace-suggestion-controls[data-motion] .marketplace-suggestion-layer {
  transition: opacity var(--openbot-duration-normal) var(--openbot-ease-out);
}

@media (prefers-reduced-motion: no-preference) {
  .marketplace-suggestion-controls[data-motion] .marketplace-suggestion-stage {
    transition: width var(--openbot-duration-slow) var(--openbot-ease-out);
  }

  .marketplace-suggestion-controls[data-motion] .marketplace-suggestion-layer {
    transition:
      opacity var(--openbot-duration-normal) var(--openbot-ease-out),
      transform var(--openbot-duration-slow) var(--openbot-ease-out);
  }

  .marketplace-suggestion-button[data-state="connected"] [data-layer="start"] {
    transform: translateY(-40%);
  }

  .marketplace-suggestion-button:not([data-state="connected"]) [data-layer="done"] {
    transform: translateY(40%);
  }

  .marketplace-suggestion-controls[data-motion] .marketplace-suggestion-layer > svg path {
    stroke-dasharray: 24 24;
    stroke-dashoffset: -24;
    transition: stroke-dashoffset var(--openbot-duration-overlay) var(--openbot-ease-out) var(--openbot-duration-fast);
  }

  .marketplace-suggestion-controls[data-motion] .marketplace-suggestion-button[data-state="connected"] svg path {
    stroke-dashoffset: 0;
  }

  .marketplace-suggestion-controls[data-motion] .marketplace-suggestion-spinner {
    transform: scale(0.6);
    transition:
      opacity var(--openbot-duration-normal) var(--openbot-ease-out),
      transform var(--openbot-duration-normal) var(--openbot-ease-out);
  }

  .marketplace-suggestion-controls[data-motion]
    .marketplace-suggestion-button[data-state="busy"]
    .marketplace-suggestion-spinner {
    transform: none;
  }

  .marketplace-suggestion-controls[data-motion] .marketplace-suggestion-dismiss {
    transition:
      opacity var(--openbot-duration-fast) var(--openbot-ease-out),
      width var(--openbot-duration-slow) var(--openbot-ease-out),
      margin var(--openbot-duration-slow) var(--openbot-ease-out),
      visibility 0s linear var(--openbot-duration-slow);
  }
}

.marketplace-suggestion-unavailable {
  display: flex;
  margin: 0;
  gap: var(--openbot-space-2);
  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//home/ubuntu/openbot/packages/ui/src/features/conversation/styles/server-install-card.css */
/* Server install card: the loader waits in the icon tile, then the new server's logo pops in. */

.server-install-card[data-step="expired"] .server-install-card-status {
  color: var(--openbot-warning);
}

.server-install-card-status-text {
  display: inline-block;
}

.server-install-card-tile {
  --server-install-size: var(--openbot-control-lg);
  --server-install-radius: var(--openbot-radius-md);
  --server-install-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  display: grid;
  flex: 0 0 auto;
  width: var(--server-install-size);
  height: var(--server-install-size);
  place-items: center;
  border-radius: var(--server-install-radius);
}

.server-install-card-tile[data-step="expired"] {
  box-sizing: border-box;
  border: 1px solid var(--openbot-border);
  background: var(--openbot-bg-surface-raised);
}

.server-install-card-tile > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}

.server-install-card-tile[data-step] .server-install-card-face {
  display: grid;
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  place-items: center;
  border-radius: var(--server-install-radius);
}

.server-install-card-tile[data-step] .server-install-card-logo {
  --server-gradient-logo-size: var(--server-install-size);
  --server-gradient-logo-radius: var(--server-install-radius);
  position: relative;
  overflow: hidden;
  animation: server-install-pop-in 520ms var(--server-install-spring) 380ms backwards;
}

.server-install-card-logo > img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

/* When the server signs in, the plush squints with its happy face, hops, and shrinks away. */
.server-install-card-tile:is([data-step="starting"], [data-step="connected"], [data-step="offline"]) .ui-plush-eye {
  animation: ui-plush-squint 220ms var(--openbot-ease-out) forwards;
}

.server-install-card-tile:is([data-step="starting"], [data-step="connected"], [data-step="offline"])
  .server-install-card-loader {
  animation: server-install-pop-out 420ms var(--openbot-ease-out) 200ms forwards;
}

/* The first animation in each list stays the same, so that the pop does not play again. */
.server-install-card-tile[data-step="starting"] .server-install-card-logo {
  animation:
    server-install-pop-in 520ms var(--server-install-spring) 380ms backwards,
    server-install-breathe 1.8s ease-in-out 900ms infinite;
}

.server-install-card-tile[data-step="connected"] .server-install-card-logo {
  animation:
    server-install-pop-in 520ms var(--server-install-spring) 380ms backwards,
    server-install-settle 420ms var(--server-install-spring);
}

/* The badge: a spinner while the server starts, then a check that draws itself. */
.server-install-card-badge {
  position: absolute;
  right: -5px;
  bottom: -5px;
  display: grid;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  place-items: center;
  border: 2px solid var(--openbot-bg-canvas);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-muted);
  transition:
    background-color var(--openbot-duration-normal) var(--openbot-ease-out),
    color var(--openbot-duration-normal) var(--openbot-ease-out);
  animation: server-install-badge-in 360ms var(--server-install-spring) 640ms backwards;
}

.server-install-card-badge[data-step="connected"] {
  background: var(--openbot-success);
  color: var(--openbot-bg-canvas);
}

.server-install-card-badge > svg {
  width: 10px;
  height: 10px;
}

.server-install-card-check * {
  stroke-dasharray: 20;
  animation: server-install-draw 360ms var(--openbot-ease-out) 80ms backwards;
}

.server-install-card-status-text,
.server-install-card-action {
  animation: server-install-text-in var(--openbot-duration-slow) var(--openbot-ease-out);
}

/* The card showed first with the server signed in: the logo is already in place. */
.server-install-card-tile[data-revealed][data-step] .server-install-card-face,
.server-install-card-tile[data-revealed] .server-install-card-badge,
.server-install-card-tile[data-revealed] .server-install-card-check * {
  animation: none;
}

.server-install-card-tile[data-revealed][data-step="starting"] .server-install-card-logo {
  animation: server-install-breathe 1.8s ease-in-out infinite;
}

@keyframes server-install-pop-out {
  30% {
    opacity: 1;
    transform: translateY(-3px) scale(1.06);
  }
  100% {
    opacity: 0;
    transform: scale(0.4);
  }
}

@keyframes server-install-pop-in {
  from {
    opacity: 0;
    transform: scale(0.3);
  }
}

@keyframes server-install-breathe {
  50% {
    opacity: 0.6;
    transform: scale(0.94);
  }
}

@keyframes server-install-settle {
  from {
    opacity: 0.7;
    transform: scale(0.92);
  }
}

@keyframes server-install-badge-in {
  from {
    transform: scale(0);
  }
}

@keyframes server-install-draw {
  from {
    stroke-dashoffset: 20;
  }
}

@keyframes server-install-text-in {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .server-install-card .server-install-card-tile[data-step] .server-install-card-face,
  .server-install-card .server-install-card-badge,
  .server-install-card .server-install-card-check *,
  .server-install-card .server-install-card-status-text,
  .server-install-card .server-install-card-action {
    animation: none;
    transition: none;
  }

  .server-install-card
    .server-install-card-tile:is([data-step="starting"], [data-step="connected"], [data-step="offline"])
    .server-install-card-loader {
    opacity: 0;
  }
}


/* /@fs//home/ubuntu/openbot/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-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-3) var(--openbot-space-2);
}

.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;
}

/* The frame is a UiBlockCard (ui-blocks.css). */
.usage-limit-ask-card {
  max-width: 560px;
  margin: var(--openbot-space-4) 0 0;
}

.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);
}


/* /@fs//home/ubuntu/openbot/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: start;
}

.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);
}

/* The closed chevron points to the end side: right in LTR, left in RTL. */
:dir(rtl) .task-list-chevron {
  transform: rotate(90deg);
}

.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);
}

:dir(rtl) .task-list-item {
  transform-origin: right top;
}

.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);
}

/* The strike-through grows from the start of the text. */
:dir(rtl) .task-list-item-text::after {
  transform-origin: right center;
}

.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//home/ubuntu/openbot/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-inline-start: 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: start;
}

/* 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 dock: while the reader is away from a card whose subagents work, its header hangs under the
 * chat header, in the chat column and as wide as the card. The dock takes no height, so the chat
 * does not move when the bar shows.
 */
.subagents-dock {
  position: relative;
  z-index: 3;
  width: calc(100% - 2 * var(--openbot-space-3));
  max-width: var(--conversation-column-width, none);
  height: 0;
  flex: 0 0 auto;
  margin-inline: auto;
}

.subagents-dock .subagents-dock-bar {
  position: absolute;
  top: var(--openbot-space-1);
  inset-inline-start: 0;
  display: flex;
  width: var(--message-wide-bubble-width);
  height: auto;
  align-items: center;
  gap: var(--openbot-space-2);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-canvas);
  padding: var(--openbot-space-1-5) var(--openbot-space-3);
  color: inherit;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-md);
  text-align: start;
}

.subagents-dock .subagents-dock-bar:hover {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-canvas);
}

.subagents-dock-live {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
}

.subagents-dock-chevron {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  rotate: 90deg;
}

/* The list: one quiet card, as wide as the agent's message bubble. */

.subagents-list {
  display: flex;
  width: var(--message-wide-bubble-width);
  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: start;
  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-inline-start: 2px solid var(--openbot-border-strong);
  padding-inline-start: 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;
  }
}

/* In RTL the right chevron points left, so the open group turns it the other way to point down. */
:dir(rtl) svg[class~="lucide-chevron-right"].subagents-group-chevron {
  transform: scaleX(-1);
}

:dir(rtl) .subagents-group-header[aria-expanded="true"] svg[class~="lucide-chevron-right"].subagents-group-chevron {
  rotate: -90deg;
}

:dir(rtl) svg[class~="lucide-chevron-right"].subagents-row-chevron {
  transform: scaleX(-1);
}


/* /@fs//home/ubuntu/openbot/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-inline-end: var(--openbot-space-2);
  color: var(--openbot-text-muted);
}

.awaiting-replies-item {
  align-items: center;
}

.awaiting-replies-avatar {
  --agent-avatar-optical-offset: calc(var(--openbot-icon-md) * -0.14);

  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);
}

/* An agent that was asked waits for the user or for its plan, so its work does not go on. */
.awaiting-replies-item[data-wait] .awaiting-replies-state-label {
  color: var(--openbot-warning-text);
}

.awaiting-replies-open,
.awaiting-replies-steer,
.awaiting-replies-stop {
  flex: 0 0 auto;
}

.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//home/ubuntu/openbot/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//home/ubuntu/openbot/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: start;
  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;
}

/* The model change that waits for the running turn to end. */
.conversation-model-pending {
  flex: none;
  gap: 4px;
}

.conversation-model-pending svg {
  width: 12px;
  height: 12px;
}

.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-block: 0;
  padding-inline: 8px 9px;
  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-border-focus);
  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-inline-end: var(--openbot-space-1-5);
  content: "·";
}

/* In the chat header the picker text has the size of the tab labels. When the thread tabs do not
   fit, the picker gets smaller: first the effort closes, then the model name. Each part slides closed
   and fades. The tooltip and the accessible name of the picker keep both. */
.conversation-header .provider-model-trigger {
  interpolate-size: allow-keywords;
}

.conversation-header .provider-model-trigger :is(.provider-model-trigger-name, .provider-model-trigger-effort) {
  overflow: hidden;
  font-size: var(--openbot-text-sm);
  transition:
    width var(--openbot-duration-normal) var(--openbot-ease-out),
    margin var(--openbot-duration-normal) var(--openbot-ease-out),
    opacity var(--openbot-duration-normal) var(--openbot-ease-out);
}

/* A closed part also takes back the gap before it, so the picker has no blank space. When the thread
   tabs become one button, the picker shows only its icon, so the button has room for the thread title. */
.conversation-header[data-model-fit] .provider-model-trigger-effort,
.conversation-header[data-model-fit="icon"] .provider-model-trigger-name,
.conversation-header:where(:has(.agent-threads-header:not([data-mode="tabs"])))
  .provider-model-trigger
  :is(.provider-model-trigger-name, .provider-model-trigger-effort) {
  width: 0;
  margin-inline-start: calc(var(--openbot-space-1-5) * -1);
  opacity: 0;
}

/* While the tabs measure a step, the picker shows it at once. */
.conversation-header[data-model-measure]
  .provider-model-trigger
  :is(.provider-model-trigger-name, .provider-model-trigger-effort) {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .conversation-header .provider-model-trigger :is(.provider-model-trigger-name, .provider-model-trigger-effort) {
    transition: none;
  }
}

/* The Fast chip gets its own room, so the model name keeps the width it has without it. A form field
   keeps the width of its row. `:where()` keeps the specificity low, so the narrow header rule below
   still wins. */
.provider-model-trigger:where(:not(.provider-model-trigger-field)):has(.provider-model-trigger-fast) {
  max-width: 296px;
}

.provider-model-trigger-fast svg {
  width: 12px;
  height: 12px;
  margin-inline-end: 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;
  inset-inline-start: 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-block: 0;
  padding-inline: 12px 11px;
  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-inline-start: 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-sheet-inset);
  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-inline-end: 1px solid var(--openbot-border);
  background: var(--provider-model-rail-bg);
  padding: 9px 7px;
}

/* Many providers or accounts scroll here, so the add button below stays in the panel. The padding
 * keeps the focus outline and the account badges, which sit across the button corner, inside the
 * scroll box. */
.provider-model-rail-tabs {
  display: flex;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-1);
  overflow-y: auto;
  scrollbar-width: none;
  margin: -5px;
  padding: 5px;
}

/* 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);
  inset-inline-end: 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. The API key
 * account shows a key, as it bills API credit and not the provider's plan. */
.provider-model-rail-account {
  position: absolute;
  inset-inline-end: -3px;
  bottom: -3px;
  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-rail-account svg {
  width: 11px;
  height: 11px;
  stroke-width: 2.75;
}

.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 end inset lives on the text, not the row, so the action button can line its end edge up
   * with the search field and the model rows below it. */
  padding-block: var(--openbot-space-1-5) var(--openbot-space-2);
  padding-inline: var(--ui-menu-inset) 0;
}

.provider-model-heading-text {
  flex: 1 1 auto;
  min-width: 0;
  padding-inline-end: 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;
}

/* A spent plan window: the chip shares the first line with the provider name, and the version stays
 * on the second. The chip shortens with an ellipsis, so the heading keeps its height. */
.provider-model-heading-limited {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--openbot-space-1-5);
}

.provider-model-heading-limited > span {
  grid-column: 1 / -1;
}

/* A Badge, at the height of the row tags (default, Free, New) so the heading keeps its height. */
.provider-model-limit {
  display: block;
  justify-self: start;
  max-width: 100%;
  height: auto;
  padding: 1px var(--openbot-space-1-5);
  color: var(--openbot-danger-text);
  line-height: 15px;
  text-overflow: ellipsis;
}

/* 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;
  /* A long model name must not widen its row past the panel. */
  grid-template-columns: minmax(0, 1fr);
  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-block: var(--ui-menu-padding) 0;
  padding-inline: calc(var(--ui-menu-padding) + var(--ui-menu-inset)) var(--ui-menu-padding);
  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;
}

.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-inline-start: 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);
}

/* Each speed has a name and a description, so the list is wider than the select, and wraps. */
.provider-model-speed-content {
  width: 300px;
}

.provider-model-speed-item .ui-select-item-label {
  display: flex;
  flex-direction: column;
  white-space: normal;
}

.provider-model-speed-name {
  color: var(--openbot-text-primary);
}

/* 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-block: var(--openbot-space-1-5);
  padding-inline: calc(var(--ui-menu-inset) + var(--openbot-icon-md) + var(--openbot-space-2)) var(--ui-menu-inset);
  color: var(--openbot-text-primary);
  cursor: pointer;
  text-align: start;
  transition:
    background-color var(--openbot-duration-hover) ease,
    color var(--openbot-duration-hover) ease;
}

.provider-model-option::before {
  position: absolute;
  top: 50%;
  inset-inline-start: 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;
}

/* A long name, such as a Fusion model of Devin, goes to a second line so that it shows in full. */
.provider-model-option-name > span {
  overflow-wrap: anywhere;
  text-wrap: pretty;
  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 fold row at the end of a provider's list: the models that the host's default hides. */
.provider-model-older {
  color: var(--openbot-text-secondary);
}

/* The fold row is not a model, so it has no selection circle. */
.provider-model-older::before {
  content: none;
}

/* The fold row is a Button, but it keeps the height and the font of a model row. */
.provider-model-older.ui-button {
  height: auto;
  font: inherit;
}

.provider-model-older[aria-expanded="true"] .provider-model-chevron {
  transform: rotate(180deg);
}

/* The settings that a Cursor model value fixes, such as "256k · High · Fast". */
.provider-model-option-name > .provider-model-option-settings {
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  white-space: nowrap;
}

/* The tick sits in the filled circle, cut out of it in the panel color. */
.provider-model-check {
  position: absolute;
  top: 50%;
  inset-inline-start: 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. A form
     field has the room of its row. */
  .provider-model-trigger:not(.provider-model-trigger-field) .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 {
    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;
  inset-inline-end: 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//home/ubuntu/openbot/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%;
}

/* While the chat moves up under the working face, a new message comes up from behind the face line. */
.virtual-chat-list[data-pushing] {
  overflow-y: clip;
}

.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 12px past the chat column, which is
 * the edge of the scroll area below the column width, 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-lg);
}

/* 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: start;
}

.unread-messages-mark-read {
  position: relative;
  z-index: 1;
  margin-inline-start: 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;
}

/* A new NEW line: the badge comes in first, then each line grows out from it. */
.unread-messages-divider[data-arrive] span {
  animation: unread-divider-badge-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}

.unread-messages-divider[data-arrive] hr {
  animation: unread-divider-line-in var(--openbot-duration-toast-enter) var(--openbot-ease-out) 60ms both;
}

.unread-messages-divider[data-arrive] hr:first-child {
  transform-origin: right center;
}

.unread-messages-divider[data-arrive] hr:last-child {
  transform-origin: left center;
}

@keyframes unread-divider-badge-in {
  from {
    opacity: 0;
    transform: scale(0.9);
    filter: blur(2px);
  }
}

@keyframes unread-divider-line-in {
  from {
    opacity: 0;
    transform: scaleX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .unread-messages-divider[data-arrive] :is(hr, span) {
    animation: none;
  }
}

/* The time stands in the middle of the space between two messages. The row above it already has
   12px of padding at its top, so the time gets less margin above than under it. */
.time-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 656px;
  height: 24px;
  margin: var(--openbot-space-2) auto var(--openbot-space-4);
  padding: 4px 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
  text-align: center;
}

/* The two lines grow out from the badge. In RTL the first line is on the right. */
:dir(rtl) .unread-messages-divider[data-arrive] hr:first-child {
  transform-origin: left center;
}

:dir(rtl) .unread-messages-divider[data-arrive] hr:last-child {
  transform-origin: right center;
}


/* /@fs//home/ubuntu/openbot/packages/ui/src/features/conversation/styles/scroll-rail.css */
/*
 * Where the reader is in a long chat, on the end edge of the transcript (right in LTR, left in RTL).
 *
 * One tick per message the reader wrote, at the same spacing for each. The ticks the reader has passed
 * are stronger, and the tick of the current section is the longest. With a mouse, the ticks fade in
 * small when the pointer comes near, and grow when it is on the rail. Pointing at a tick brings in a
 * card through a blur, over a blur of the transcript, with the message and the start of its reply.
 *
 * 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 {
  --chat-scroll-rail-pitch: var(--openbot-space-2);
  --chat-scroll-rail-hit: clamp(12px, var(--chat-scroll-rail-inset, 20px), 20px);
  --chat-scroll-rail-ease: var(--openbot-ease-out);
  --chat-scroll-rail-quick: var(--openbot-duration-overlay);

  position: sticky;
  z-index: 3;
  top: 0;
  pointer-events: none;
}

/* Only the ticks take the pointer, so the messages beside them stay selectable. The nav reaches into
   the container's side padding, so the ticks stand beside the messages. It is wider than the hit areas
   by the room a tick takes when it grows. */
.chat-scroll-rail-nav {
  position: absolute;
  top: 50%;
  inset-inline-end: calc(-1 * var(--chat-scroll-rail-inset, 0px));
  width: calc(var(--chat-scroll-rail-hit) + var(--openbot-space-2));
  height: min(64%, 600px);
  display: flex;
  flex-direction: column;
  transform: translateY(-50%);
}

/* A chat with more sections than the rail holds scrolls the ticks inside the rail, so every section
   stays in reach; the track keeps the current one in view. */
.chat-scroll-rail-track {
  position: relative;
  transition: opacity var(--chat-scroll-rail-quick) ease;
  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;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chat-scroll-rail-item {
  flex: none;
  height: var(--chat-scroll-rail-pitch);
  display: flex;
}

/* A hit area as tall as the spacing and as wide as the side padding, so it does not cover the edge of
   a message. */
.chat-scroll-rail .chat-scroll-rail-link {
  position: relative;
  flex: none;
  width: var(--chat-scroll-rail-hit);
  height: auto;
  margin-inline-start: auto;
  padding: 0;
  /* The button's border would move the ticks out of the side padding. */
  border: 0;
  border-radius: 0;
  outline: none;
  pointer-events: auto;
}

/* With a mouse, the ticks show only when the pointer is near the rail or a tick has focus. */
@media (hover: hover) {
  .chat-scroll-rail:not([data-near]) .chat-scroll-rail-nav:not(:has(:focus-visible)) .chat-scroll-rail-track {
    opacity: 0;
  }
}

/* The ticks are small until the pointer or the focus is on the rail. */
.chat-scroll-rail-tick {
  position: absolute;
  top: 50%;
  inset-inline-end: var(--openbot-space-1);
  width: var(--openbot-space-1);
  height: 2px;
  border-radius: var(--openbot-radius-pill);
  background: color-mix(in srgb, var(--openbot-text-primary) 18%, transparent);
  transform: translateY(-50%);
  transition:
    width var(--chat-scroll-rail-quick) var(--chat-scroll-rail-ease),
    background-color var(--chat-scroll-rail-quick) ease;
}

.chat-scroll-rail-item[data-state="read"] .chat-scroll-rail-tick {
  background: color-mix(in srgb, var(--openbot-text-primary) 36%, transparent);
}

.chat-scroll-rail-item[data-state="active"] .chat-scroll-rail-tick {
  width: var(--openbot-space-2);
  background: var(--openbot-text-secondary);
}

.chat-scroll-rail-nav:is(:hover, :has(:focus-visible)) .chat-scroll-rail-tick {
  width: var(--openbot-space-2);
}

/* The ticks beside the one under the pointer grow a little, less the farther they are. */
.chat-scroll-rail-nav:is(:hover, :has(:focus-visible))
  :is(.chat-scroll-rail-item[data-open] + * + *, .chat-scroll-rail-item:has(+ * + [data-open]))
  .chat-scroll-rail-tick {
  width: 10px;
}

.chat-scroll-rail-nav:is(:hover, :has(:focus-visible))
  :is(
    .chat-scroll-rail-item[data-state="active"],
    .chat-scroll-rail-item[data-open] + *,
    .chat-scroll-rail-item:has(+ [data-open])
  )
  .chat-scroll-rail-tick {
  width: var(--openbot-space-3);
}

.chat-scroll-rail-nav:is(:hover, :has(:focus-visible)) .chat-scroll-rail-item[data-open] .chat-scroll-rail-tick {
  width: var(--openbot-space-4);
  background: var(--openbot-text-primary);
}

/* The card stands level with its tick, toward the transcript. It is in a portal, because the mask that
   fades the transcript's edges stops the blur of the messages under it. It comes in through a blur of
   its own. */
.chat-scroll-rail-card {
  --chat-scroll-rail-quick: var(--openbot-duration-overlay);
  --chat-scroll-rail-ease: var(--openbot-ease-out);

  position: fixed;
  z-index: var(--openbot-layer-tooltip);
  top: var(--chat-scroll-rail-card-top);
  right: calc(100vw - var(--chat-scroll-rail-card-left) + var(--openbot-space-2));
  width: max-content;
  max-width: min(300px, 60vw);
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-3);
  border: 1px solid color-mix(in srgb, var(--openbot-text-primary) 8%, transparent);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-glass);
  backdrop-filter: blur(var(--openbot-space-4));
  font-size: var(--openbot-text-md);
  line-height: 18px;
  pointer-events: none;
  opacity: 0;
  filter: blur(var(--openbot-space-1));
  transform: translateY(-50%) translateX(var(--openbot-space-1));
  transition:
    opacity var(--chat-scroll-rail-quick) ease,
    filter var(--chat-scroll-rail-quick) ease,
    transform var(--chat-scroll-rail-quick) var(--chat-scroll-rail-ease);
}

:dir(rtl) .chat-scroll-rail-card {
  right: auto;
  left: calc(var(--chat-scroll-rail-card-right) + var(--openbot-space-2));
  transform: translateY(-50%) translateX(calc(-1 * var(--openbot-space-1)));
}

.chat-scroll-rail-card[data-open] {
  opacity: 1;
  filter: blur(0);
  transform: translateY(-50%);
}

.chat-scroll-rail-card-title {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-scroll-rail-card-reply {
  display: -webkit-box;
  overflow: hidden;
  color: var(--openbot-text-muted);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* The rules above name their own transitions, which outrank the global reduced-motion rule, so the
   card would still blur in. */
@media (prefers-reduced-motion: reduce) {
  .chat-scroll-rail .chat-scroll-rail-track,
  .chat-scroll-rail .chat-scroll-rail-tick,
  .chat-scroll-rail-card.chat-scroll-rail-card {
    transition: none;
  }
}


/* /@fs//home/ubuntu/openbot/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. The face is a
   little shorter than a one-line bubble, so it reads at the size of the sidebar faces. */
.message-entry-with-author,
.message-author-gutter,
.chat-visual-with-author {
  --message-author-face-size: var(--openbot-space-8);
  --message-author-column: calc(var(--message-author-face-size) + var(--openbot-space-1));
}

.message-entry-with-author {
  display: grid;
  grid-template-columns: var(--message-author-column) 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-author-avatar {
  width: var(--message-author-column);
  height: var(--message-author-column);
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  overflow: visible;
  border: 0;
  background: transparent;
}

.message-author-avatar .agent-avatar {
  --agent-avatar-optical-offset: -4px;

  width: var(--message-author-face-size);
  height: var(--message-author-face-size);
}

.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: var(--message-author-column);
  flex: 0 0 var(--message-author-column);
}

.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.
 */
/* The row is as wide as the chat, so each bubble grows from its own side and does not move toward the middle. */
.message-entry-animated {
  transform-origin: left bottom;
  animation: message-bubble-in 280ms cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
}

.message-entry-animated.message-entry-user {
  transform-origin: right bottom;
}

@media (prefers-reduced-motion: no-preference) {
  .message-entry-animated.message-entry-user {
    animation: message-sent-in 240ms 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;
}

/* A person's images stand above the bubble, outside it, with a small gap. */
.message-stack {
  display: grid;
  width: 100%;
  min-width: 0;
  justify-items: end;
  gap: var(--openbot-space-1);
}

.message-media-before {
  width: min(420px, 100%);
}

.message-media-before:has(.image-gallery) {
  width: min(520px, 100%);
}

.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;
}

/* A channel shows an agent's actions beside the bubble, in the same line. They go under the bubble
   only when the line has no room, so only a long answer keeps space for them. */
.message-entry-actions-beside .message-shell {
  flex-wrap: wrap;
  row-gap: var(--openbot-space-1);
}

/* The face stays at the end of the bubble when the actions go under it. */
/* Each row scopes its anchor name, so an engine with no anchor-scope keeps the face in the flow. */
@supports (position-anchor: --message-bubble) and (anchor-scope: --message-bubble) {
  .message-entry-actions-beside {
    anchor-scope: --message-bubble;
  }

  .message-entry-actions-beside .message-shell .ui-bubble {
    anchor-name: --message-bubble;
  }

  .message-entry-actions-beside .message-author-avatar {
    position: absolute;
    bottom: anchor(--message-bubble bottom);
    left: 0;
  }
}

/* The steps of the turn: a quiet summary at the end of the action row, shown with the actions. */
.message-steps {
  min-width: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--openbot-duration-hover) ease;
}

.message-steps > .agent-steps {
  margin-bottom: 0;
}

/* The general steps row rules load later, so these name the steps block too. */
/* The steps button matches the action buttons beside it: their height, and their hover as one unit. */
.message-steps .agent-steps .agent-steps-header {
  height: 24px;
  margin-inline-start: 0;
  padding-block: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  transition:
    background var(--openbot-duration-hover) ease,
    color var(--openbot-duration-hover) ease;
}

.message-steps .agent-steps .agent-steps-header:is(:hover, :focus-visible) {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
  outline: none;
}

.message-steps .agent-steps-header :is(.agent-steps-duration, .agent-steps-chevron) {
  color: inherit;
  transition:
    color var(--openbot-duration-hover) ease,
    rotate var(--openbot-duration-fast) var(--openbot-ease-out);
}

.message-steps .agent-steps-summary {
  font-weight: var(--openbot-weight-regular);
}

.message-entry:hover .message-steps,
.message-entry:focus-within .message-steps,
.message-entry:has(.message-actions-open) .message-steps {
  opacity: 1;
  pointer-events: auto;
}

@media (hover: none), (pointer: coarse) {
  .message-actions,
  .message-time,
  .message-steps {
    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 {
  --message-bubble-tint: var(--message-author-color, var(--openbot-accent));
  --message-bubble-tint-amount: 22%;
}

/*
 * A chat color tints the bubble: the reader's own, an agent's, or another person's. The author sets
 * it in Settings or in the agent settings, and everyone in the chat sees the same tint.
 */
.ui-bubble.message-bubble-colored {
  --message-bubble-tint: var(--message-chat-color);
  --message-bubble-tint-amount: 30%;
}

/* 22% of a color on the dark surface is dull, so the dark theme takes more of a chat color. */
:root[data-openbot-color-scheme="light"] .ui-bubble.message-bubble-colored {
  --message-bubble-tint-amount: 22%;
}

/*
 * The bubble keeps the plain surface values, because its content sets the same tokens again and a
 * token cannot refer to itself. A tinted bubble mixes the tint into the raised surface; an agent's
 * muted bubble mixes it into the surface.
 */
.ui-bubble:is(.message-bubble-member, .message-bubble-colored) {
  --message-plain-canvas: var(--openbot-bg-canvas);
  --message-plain-sidebar: var(--openbot-bg-sidebar);
  --message-plain-surface: var(--openbot-bg-surface);
  --message-plain-surface-raised: var(--openbot-bg-surface-raised);
  --message-plain-control: var(--openbot-bg-control);
  --message-plain-control-hover: var(--openbot-bg-control-hover);
  --message-plain-control-active: var(--openbot-bg-control-active);
  --message-bubble-base: var(--openbot-bg-surface-raised);
}

.message-entry-agent .ui-bubble-variant-muted.message-bubble-colored {
  --message-bubble-base: var(--openbot-bg-surface);
}

.ui-bubble.message-bubble-member > .ui-bubble-content {
  background: color-mix(
    in srgb,
    var(--message-bubble-tint) var(--message-bubble-tint-amount),
    var(--message-bubble-base)
  );
}

/*
 * Code, tables, quotes, file chips and cards in a bubble with a chat color take the same tint as the bubble, so
 * they do not stand on it as neutral panels. Each surface keeps its step from the next one, as in a
 * plain bubble, and a little of the text colour lifts them all from the bubble: lighter in the dark
 * theme, darker in the light theme. Without the lift, a block on a tinted bubble shows only its
 * border.
 */
.message-entry-user .ui-bubble.message-bubble-colored > .ui-bubble-content,
.message-entry-agent .ui-bubble-variant-muted.message-bubble-colored > .ui-bubble-content {
  --message-surface-lift: 5%;
  --openbot-bg-canvas: color-mix(
    in srgb,
    var(--openbot-text-primary) var(--message-surface-lift),
    color-mix(in srgb, var(--message-bubble-tint) var(--message-bubble-tint-amount), var(--message-plain-canvas))
  );
  --openbot-bg-sidebar: color-mix(
    in srgb,
    var(--openbot-text-primary) var(--message-surface-lift),
    color-mix(in srgb, var(--message-bubble-tint) var(--message-bubble-tint-amount), var(--message-plain-sidebar))
  );
  --openbot-bg-surface: color-mix(
    in srgb,
    var(--openbot-text-primary) var(--message-surface-lift),
    color-mix(in srgb, var(--message-bubble-tint) var(--message-bubble-tint-amount), var(--message-plain-surface))
  );
  --openbot-bg-surface-raised: color-mix(
    in srgb,
    var(--openbot-text-primary) var(--message-surface-lift),
    color-mix(
      in srgb,
      var(--message-bubble-tint) var(--message-bubble-tint-amount),
      var(--message-plain-surface-raised)
    )
  );
  --openbot-bg-control: color-mix(
    in srgb,
    var(--openbot-text-primary) var(--message-surface-lift),
    color-mix(in srgb, var(--message-bubble-tint) var(--message-bubble-tint-amount), var(--message-plain-control))
  );
  --openbot-bg-control-hover: color-mix(
    in srgb,
    var(--openbot-text-primary) var(--message-surface-lift),
    color-mix(in srgb, var(--message-bubble-tint) var(--message-bubble-tint-amount), var(--message-plain-control-hover))
  );
  --openbot-bg-control-active: color-mix(
    in srgb,
    var(--openbot-text-primary) var(--message-surface-lift),
    color-mix(
      in srgb,
      var(--message-bubble-tint) var(--message-bubble-tint-amount),
      var(--message-plain-control-active)
    )
  );

  background: color-mix(
    in srgb,
    var(--message-bubble-tint) var(--message-bubble-tint-amount),
    var(--message-bubble-base)
  );
}

/* A menu, a tooltip or a popover that opens in a bubble with a chat color covers the chat, so it stays plain. */
.ui-bubble.message-bubble-colored
:is([data-popper-positioner], [role="dialog"], [role="menu"], [role="listbox"], [role="tooltip"]) {
  --openbot-bg-canvas: var(--message-plain-canvas);
  --openbot-bg-sidebar: var(--message-plain-sidebar);
  --openbot-bg-surface: var(--message-plain-surface);
  --openbot-bg-surface-raised: var(--message-plain-surface-raised);
  --openbot-bg-control: var(--message-plain-control);
  --openbot-bg-control-hover: var(--message-plain-control-hover);
  --openbot-bg-control-active: var(--message-plain-control-active);
}

/*
 * A file icon tile is a clear tint of the file colour. On a chat color that tint would mix with the
 * chat color, so the tile lays it on the plain control and keeps its own colour. An audio or video
 * card keeps its neutral control tile, which takes the tint of the bubble as the other cards do.
 */
:is(
  .message-entry-user .ui-bubble.message-bubble-colored > .ui-bubble-content,
  .message-entry-agent .ui-bubble-variant-muted.message-bubble-colored > .ui-bubble-content
) :is(.attachment-file-visual, .attachment-reference-visual):not(.message-attachment[data-media] *) {
  background: linear-gradient(var(--file-reference-soft) 0 0), var(--message-plain-control);
}

.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;
}

/* Every button of the row, the reaction trigger too, takes the hover of a ghost button. */
.message-action-button:hover,
.message-action-button:focus-visible,
.message-action-button[aria-expanded="true"] {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
  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-inline-end: 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%;
  transform-origin: left bottom;
  animation: message-bubble-in 280ms cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
}

/* The line's padding, the 32px face, and its lower padding. */
.agent-activity-slot[data-reserved="true"] {
  min-height: 52px;
}

.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;
}

/* The slot keeps the room of a plain line, so that line enters and leaves in place: only its face and
   text animate, and the messages above do not move. A line with steps is taller, so it still opens. */
.agent-activity-slot[data-reserved="true"] > .agent-activity-entry[data-plain="true"],
.agent-activity-slot[data-reserved="true"] > .agent-activity-entry[data-plain="true"][data-state="exiting"] {
  grid-template-rows: 1fr;
  transition: none;
}

.agent-activity-content {
  min-height: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: clip;
  overflow-clip-margin: var(--openbot-space-3);
  /* The working face's felt dots reach about 10px above it. The top padding keeps them in this line,
     so they do not cover the message above. */
  padding-block: var(--openbot-space-3) 8px;
  padding-inline: 8px 0;
  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: calc(32px * -0.14);

  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;
}

/* The face of a working agent pops in from half size, rises from its lower edge, and settles with a
   small bounce, as a new bubble does. `backwards`, so the exit transition can shrink it afterwards. */
.agent-activity-entry .agent-activity-avatar {
  transform-origin: center bottom;
  animation: agent-activity-avatar-in 420ms cubic-bezier(0.34, 1.45, 0.64, 1) backwards;
}

@keyframes agent-activity-avatar-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.5);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* The face leaves the way it came: it shrinks to its lower edge while the line fades. */
.agent-activity-entry[data-state="exiting"] .agent-activity-avatar {
  transform: translateY(4px) scale(0.6);
}

.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;
}

/* A wait for the provider is not work, so its label does not shine. */
.agent-activity-entry[data-waiting="true"] .agent-activity-label {
  animation: none;
  background: none;
  color: var(--openbot-text-secondary);
  -webkit-text-fill-color: currentColor;
}

/* The plain line draws a label as Grok Bot does: each new step label rises 5px into place in 350ms,
   with no exit, and a soft light runs over it in 60 steps. */
.agent-activity-entry[data-plain="true"]:not([data-waiting="true"]) .agent-activity-label {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--openbot-text-primary) 40%, transparent) 0%,
    color-mix(in srgb, var(--openbot-text-primary) 40%, transparent) 25%,
    var(--openbot-text-primary) 60%,
    color-mix(in srgb, var(--openbot-text-primary) 40%, transparent) 75%,
    color-mix(in srgb, var(--openbot-text-primary) 40%, transparent) 100%
  );
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  animation:
    agent-activity-label-enter 350ms cubic-bezier(0.2, 0.8, 0.3, 1) backwards,
    agent-activity-label-shine 2.2s steps(60, end) infinite;
}

.agent-activity-entry[data-plain="true"][data-waiting="true"] .agent-activity-label {
  animation: agent-activity-label-enter 350ms cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
}

@keyframes agent-activity-label-enter {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
}

@keyframes agent-activity-label-shine {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

@keyframes agent-activity-label-fade {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .agent-activity-entry[data-plain="true"] .agent-activity-label,
  .agent-activity-entry[data-plain="true"]:not([data-waiting="true"]) .agent-activity-label {
    animation: agent-activity-label-fade 120ms ease-out backwards;
  }
}

.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);
}

/* The link to the routine's own thread, where the run's answer and work are. */
.ui-button.chat-action-routine-thread {
  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: start;
}

.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: start;
  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);
}

/* The members of a routing row, as one list: each name keeps its pill, and the list's own words sit
   between them. In a narrow pane the list wraps at a separator rather than cutting a name. */
.chat-action-routing-targets {
  display: inline-flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

/* The pill's own padding stands after each name, so the separator moves back by that padding: the
   comma then follows the name as it does in text. */
.chat-action-routing-separator {
  margin-inline-start: calc(-1 * var(--openbot-space-1-5));
  white-space: pre;
}

.chat-action-target-entering {
  transform-origin: left center;
  animation: message-bubble-in 280ms cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
}

/* 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,
.chat-action-marker-channel-change .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);
}

/* The open text of an agent message reads as a chat message under its centred marker. */
.chat-action-message-text {
  align-self: stretch;
  margin-block: var(--openbot-space-2);
  text-align: start;
}

.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-inline-start: -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;
}

/*
 * Bubbles grow with the chat column, between a minimum and a maximum, so a big screen shows more of a
 * reply and a narrow pane is not wasted. A percentage refers to the message row. An agent reply, code,
 * and a table use the wide width; a person's message uses the narrow width, and leaves a gap at the
 * other side on a narrow pane.
 */
:root {
  --message-wide-bubble-width: min(100%, max(720px, 70%), 1200px);
  --message-narrow-bubble-width: min(92%, max(420px, 50%), 800px);
}

.message-entry-agent .ui-bubble {
  max-width: var(--message-wide-bubble-width);
}

/* An image keeps its size in a person's bubble too: the bubble does not shrink to the text. */
.message-entry .ui-bubble:has(.image-generation) {
  width: min(420px, 100%);
  max-width: min(420px, 100%);
}

.message-entry .ui-bubble:has(.image-gallery) {
  width: min(520px, 100%);
  max-width: min(520px, 100%);
}

.message-entry-agent
  .ui-bubble-variant-ghost:has(:is(.image-generation, .image-gallery, .message-code-block, .message-data-table-scroll))
  > .ui-bubble-content {
  width: 100%;
}

.message-entry-user .ui-bubble:has(:is(.image-generation, .image-gallery)) > .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;
  inset-inline-end: 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: start;
}

.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;
  inset-inline-end: 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 failed send, beside the time under the bubble. A send in flight leaves it empty. */
.pending-send-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.pending-send-label {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  color: var(--openbot-danger-text);
}

.pending-send-label:not(:empty) {
  margin-inline-end: var(--openbot-space-1);
}

.pending-send-label > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: none;
}

.pending-send-error {
  color: var(--openbot-text-muted);
  overflow-wrap: anywhere;
}

.pending-send-error::before {
  content: "·";
  margin-inline-end: var(--openbot-space-1);
}

/*
 * The reader's own actions stand before the bubble, in the same line. The stack takes the width of
 * the bubble, not the line, so the actions fit beside it. A message with images keeps the full
 * line, and its actions go under it.
 */
.message-entry-user.message-entry-actions-beside .message-stack:not(:has(.message-media-before)) {
  width: auto;
  max-width: min(80%, 720px);
  flex: 0 1 auto;
}

.message-entry-user.message-entry-actions-beside .message-stack:not(:has(.message-media-before)) > .ui-bubble {
  max-width: 100%;
}

.message-entry-user.message-entry-actions-beside .message-stack:not(:has(.message-media-before)) + .message-action-row {
  order: -1;
}

/*
 * A run of messages by one sender reads as one block: where two bubbles of the run meet, their
 * corners on the sender's side are small, at the start for an agent and at the end for the reader.
 * Only a row that the timeline groups with the row above it, and that starts with its message (no
 * marker or steps above it), joins the bubble above.
 */
.virtual-chat-row[data-grouped="sender"]
  > .message-entry-agent:first-child
  .message-shell
  > .ui-bubble
  > .ui-bubble-content {
  border-start-start-radius: var(--openbot-radius-sm);
}

.virtual-chat-row[data-grouped="sender"]
  > .message-entry-user:first-child
  .message-stack
  > .ui-bubble:first-child
  > .ui-bubble-content {
  border-start-end-radius: var(--openbot-radius-sm);
}

.virtual-chat-row:has(+ .virtual-chat-row[data-grouped="sender"] > .message-entry-agent:first-child)
  > .message-entry-agent:last-child
  .message-shell
  > .ui-bubble
  > .ui-bubble-content {
  border-end-start-radius: var(--openbot-radius-sm);
}

.virtual-chat-row:has(+ .virtual-chat-row[data-grouped="sender"] > .message-entry-user:first-child)
  > .message-entry-user:last-child
  .message-stack
  > .ui-bubble:last-child
  > .ui-bubble-content {
  border-end-end-radius: var(--openbot-radius-sm);
}


/* /@fs//home/ubuntu/openbot/packages/ui/src/features/conversation/styles/agent-steps.css */
/* The steps of an agent's turn: under the activity line while it runs, above the answer after. */

/* The working rings reach about 10px past a face, and the channel's faces sit 2px from the edge.
   The clip margin keeps the rings whole. It goes when the line leaves, so open steps do not show
   below the closing row. */
.agent-activity-body {
  min-height: 0;
  overflow: clip;
  overflow-clip-margin: var(--openbot-space-3);
}

.agent-activity-entry[data-state="exiting"] .agent-activity-body {
  overflow-clip-margin: 0;
}

/* The entry ignores the pointer so the chat scrolls under it; its controls take it back. */
.agent-activity-content .agent-steps-toggle,
.agent-activity-steps {
  pointer-events: auto;
}

.agent-activity-content .agent-steps-toggle {
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
}

/* The open list is not a lit toggle, so the chevron has no fill. */
.agent-activity-content .agent-steps-toggle[aria-expanded="true"]:not(:hover) {
  background: transparent;
}

.agent-activity-steps {
  padding-block: 0 var(--openbot-space-2);
  padding-inline: var(--openbot-space-6) 0;
}

.agent-steps-chevron {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  transition: rotate var(--openbot-duration-fast) var(--openbot-ease-out);
}

.agent-steps-toggle[aria-expanded="true"] .agent-steps-chevron {
  rotate: 180deg;
}

/* The row's chevron points right, as the subagents header's does, and down when its list is open. */
.agent-steps-header[aria-expanded="true"] .agent-steps-chevron {
  rotate: 90deg;
}

.agent-steps {
  display: grid;
  justify-items: start;
  margin-bottom: var(--openbot-space-1);
}

/* The row looks like the header of the subagents above it. */
.agent-steps .agent-steps-header {
  display: flex;
  height: auto;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-inline-start: 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: start;
}

/* The open list is not a lit toggle, so the header has no fill. */
.agent-steps .agent-steps-header[aria-expanded="true"]:not(:hover) {
  background: transparent;
  color: inherit;
}

.agent-step-icon {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
}

.agent-steps-summary {
  overflow: hidden;
  font-weight: var(--openbot-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-steps-failed {
  flex: 0 0 auto;
  color: var(--openbot-danger-text);
  font-variant-numeric: tabular-nums;
}

.agent-steps-duration {
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}

.agent-steps-panel {
  display: grid;
  width: 100%;
  grid-template-rows: 1fr;
  opacity: 1;
  transition:
    grid-template-rows var(--openbot-duration-overlay) var(--openbot-ease-out),
    opacity var(--openbot-duration-normal) var(--openbot-ease-out);
}

/* The panel exists only while the row is open, so it opens from its first frame. */
@starting-style {
  .agent-steps-panel {
    grid-template-rows: 0fr;
    opacity: 0;
  }
}

.agent-steps-viewport {
  max-height: 220px;
  overflow: hidden;
  padding-inline-start: var(--openbot-space-3);
  border-inline-start: 1px solid var(--openbot-border);
}

.agent-steps-viewport[data-scrolls] {
  overflow-y: auto;
}

.agent-steps-panel > .agent-steps-viewport {
  min-height: 0;
  margin-inline-start: var(--openbot-space-3);
}

.agent-steps-list {
  display: grid;
  gap: var(--openbot-space-1);
  margin: 0;
  padding: var(--openbot-space-1-5) 0;
  list-style: none;
  transition: transform var(--openbot-duration-overlay) var(--openbot-ease-out);
}

.agent-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;
  animation: message-in var(--openbot-duration-normal) var(--openbot-ease-out) both;
}

/* The step that the user picked in the trace lights up, then fades back. A colour change is not
 * motion, so it stays with reduced motion. */
.agent-step[data-focused] {
  border-radius: var(--openbot-radius-xs);
  animation: agent-step-picked calc(var(--openbot-duration-overlay) * 6) var(--openbot-ease-out) both;
}

@keyframes agent-step-picked {
  from {
    background: var(--openbot-hover);
  }

  to {
    background: transparent;
  }
}

.agent-step .agent-step-icon {
  margin-top: 2px;
}

.agent-step[data-kind="thinking"] .agent-step-text {
  color: var(--openbot-text-muted);
  font-style: italic;
}

.agent-step-text.agent-activity-label {
  display: inline;
  -webkit-line-clamp: unset;
}

.agent-step-memory {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0 var(--openbot-space-2);
  color: var(--openbot-text-primary);
}

.agent-step-memory-action,
.agent-step-memory-previous,
.agent-step-memory[data-action="forgotten"] s {
  color: var(--openbot-text-muted);
}

/* A failed tool step: its line, a toggle as quiet as the steps header, and the error it opens. */
.agent-step-failed {
  display: grid;
  min-width: 0;
  flex: 1 1 auto;
  justify-items: start;
}

.agent-step .agent-step-error-toggle {
  display: inline-flex;
  height: auto;
  align-items: center;
  gap: var(--openbot-space-1);
  margin-inline-start: calc(-1 * var(--openbot-space-1));
  border-radius: var(--openbot-radius-xs);
  padding: 0 var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: inherit;
  font-weight: var(--openbot-weight-regular);
  line-height: inherit;
}

.agent-step-error-toggle[aria-expanded="true"] .agent-steps-chevron {
  rotate: 90deg;
}

.agent-step-error {
  max-height: 160px;
  justify-self: stretch;
  margin: var(--openbot-space-1) 0 0;
  overflow: auto;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
  .agent-steps-chevron,
  .agent-steps-panel,
  .agent-steps-list {
    transition: none;
  }

  .agent-step {
    animation: none;
  }
}

/* In RTL the right chevron points left, so the open row turns it the other way to point down. */
:dir(rtl) svg[class~="lucide-chevron-right"].agent-steps-chevron {
  transform: scaleX(-1);
}

:dir(rtl) .agent-steps-header[aria-expanded="true"] svg[class~="lucide-chevron-right"].agent-steps-chevron,
:dir(rtl) .agent-step-error-toggle[aria-expanded="true"] svg[class~="lucide-chevron-right"].agent-steps-chevron {
  rotate: -90deg;
}


/* /@fs//home/ubuntu/openbot/packages/ui/src/features/conversation/styles/trace-waterfall.css */
/* The trace of an agent run: the totals, then one timeline row for each span. */

.trace {
  --trace-surface: var(--openbot-bg-surface);
  /* `cqw` resolves where these are used, inside the scroll body, so a narrow trace keeps its timeline. */
  --trace-name-width: min(260px, 45cqw);
  /* Room on the right of the timeline for the label after the last bar. */
  --trace-label-room: min(150px, 25cqw);
  --trace-lane-pad: var(--openbot-space-3);
  --trace-row-height: 36px;
  --trace-bar-height: 16px;
  /* The colour of the agent that did a span. The top agent and its own calls stay neutral. */
  --trace-hue: var(--openbot-text-muted);
  display: flex;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  background: var(--trace-surface);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.trace-header {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  padding-block: var(--openbot-space-2);
  padding-inline: var(--openbot-space-4) var(--openbot-space-2);
  border-bottom: 1px solid var(--openbot-border);
}

.trace-title {
  flex: 1 1 auto;
  margin: 0;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-md);
}

/* The speed menu is compact: it holds one short value. */
.ui-select.trace-select {
  width: auto;
  flex: 0 0 auto;
}

.trace-select .trace-select-trigger {
  width: auto;
  gap: var(--openbot-space-1);
  padding-inline: var(--openbot-space-2) var(--openbot-space-1-5);
  font-variant-numeric: tabular-nums;
}

.trace-search {
  position: relative;
  width: min(240px, 100%);
}

.trace-search-icon {
  position: absolute;
  top: 50%;
  inset-inline-start: var(--openbot-space-2);
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  color: var(--openbot-text-muted);
  translate: 0 -50%;
  pointer-events: none;
}

.trace-search .trace-search-input {
  width: 100%;
  padding-inline: calc(var(--openbot-space-2) * 2 + var(--openbot-icon-xs)) var(--openbot-space-8);
}

/* A focused field gets a neutral border only, as the other fields of the app. */
.trace-search .trace-search-input:focus-visible {
  border-color: var(--openbot-text-muted);
  box-shadow: none;
  outline: none;
}

/* The browser's own clear button would sit under the shortcut hint. */
.trace-search-input::-webkit-search-cancel-button {
  display: none;
}

.trace-search-kbd {
  position: absolute;
  top: 50%;
  inset-inline-end: var(--openbot-space-1-5);
  translate: 0 -50%;
  pointer-events: none;
}

.trace-totals {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  /* The last total in each line puts its end border outside the trace, where it is clipped. */
  margin-block: 0;
  margin-inline: 0 -1px;
}

.trace-total {
  display: grid;
  flex: 1 1 96px;
  gap: var(--openbot-space-0-5);
  min-width: 0;
  padding: var(--openbot-space-2) var(--openbot-space-3);
  border-inline-end: 1px solid var(--openbot-border);
  border-bottom: 1px solid var(--openbot-border);
}

.trace-total-label {
  overflow: hidden;
  color: var(--openbot-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The same roll as the task list: the digits that change lift in and sharpen. */
.trace-total-value {
  --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);

  margin: 0;
  font-size: var(--openbot-text-lg);
  font-variant-numeric: tabular-nums;
  line-height: var(--openbot-leading-lg);
}

.trace-body {
  --trace-fade: var(--openbot-space-6);
  /* No edge is faded until the list scrolls: one opaque layer for each edge. */
  --trace-mask-top: linear-gradient(var(--openbot-text-primary), var(--openbot-text-primary));
  --trace-mask-bottom: linear-gradient(var(--openbot-text-primary), var(--openbot-text-primary));
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  container-type: inline-size;
  scrollbar-width: none;
  /* A time axis: the name column, the lanes and the bars keep their LTR places in RTL too. */
  direction: ltr;
}

.trace-body::-webkit-scrollbar {
  display: none;
}

.trace-body.scroll-fade-top,
.trace-body.scroll-fade-bottom {
  mask-image: var(--trace-mask-top), var(--trace-mask-bottom);
  mask-composite: intersect;
}

/* The rows fade in under the rows that stay at the top. */
.trace-body.scroll-fade-top {
  --trace-mask-top: linear-gradient(
    to bottom,
    var(--openbot-text-primary) var(--trace-stack),
    transparent var(--trace-stack),
    var(--openbot-text-primary) calc(var(--trace-stack) + var(--trace-fade))
  );
}

.trace-body.scroll-fade-bottom {
  --trace-mask-bottom: linear-gradient(
    to bottom,
    var(--openbot-text-primary) calc(100% - var(--trace-fade)),
    transparent
  );
}

.trace-grid {
  position: relative;
  z-index: 0;
}

.trace-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.trace-row {
  display: grid;
  height: var(--trace-row-height);
  box-sizing: border-box;
  grid-template-columns: var(--trace-name-width) minmax(0, 1fr);
  border-bottom: 1px solid var(--openbot-border);
}

/* The rows under a parent slide closed when it folds and open when it unfolds. `clip`, not `hidden`:
 * a scroll container here would stop the parent rows inside from staying at the top. */
.trace-branch-children {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--openbot-duration-slow) var(--openbot-ease-out);
}

.trace-branch-children[data-open] {
  grid-template-rows: 1fr;
}

.trace-branch-clip {
  min-height: 0;
  overflow: clip;
  opacity: 0;
  transition: opacity var(--openbot-duration-slow) var(--openbot-ease-out);
}

.trace-branch-children[data-open] > .trace-branch-clip {
  opacity: 1;
}

/* A row that a search or a replay adds fades in. */
.trace-row {
  transition: opacity var(--openbot-duration-slow) var(--openbot-ease-out);
}

@starting-style {
  .trace-row {
    opacity: 0;
  }
}

/* A parent row stays under the rows above it while its own rows scroll. Its item ends with its last
 * row, so the next parent row takes its place. */
.trace-row[data-parent] {
  position: sticky;
  top: calc((var(--trace-depth) + 1) * var(--trace-row-height));
  z-index: 4;
  background: var(--trace-surface);
}

/* Five agent colours. The calls of an agent take its colour through `--trace-hue`. */
.trace-row[data-hue="1"],
.trace-handoff[data-hue="1"] {
  --trace-hue: var(--openbot-chart-storage-downloads);
}

.trace-row[data-hue="2"],
.trace-handoff[data-hue="2"] {
  --trace-hue: var(--openbot-chart-storage-files);
}

.trace-row[data-hue="3"],
.trace-handoff[data-hue="3"] {
  --trace-hue: var(--openbot-chart-storage-chats);
}

.trace-row[data-hue="4"],
.trace-handoff[data-hue="4"] {
  --trace-hue: var(--openbot-chart-storage-workspaces);
}

.trace-row[data-hue="5"],
.trace-handoff[data-hue="5"] {
  --trace-hue: var(--openbot-chart-storage-runtimes);
}

.trace-name {
  position: sticky;
  left: 0;
  z-index: 3;
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-1-5);
  --trace-indent: var(--openbot-space-4);
  --trace-guide-at: calc(var(--openbot-control-xs) / 2);
  padding-inline: calc(var(--openbot-space-2) + var(--trace-depth, 0) * var(--trace-indent)) var(--openbot-space-2);
  border-right: 1px solid var(--openbot-border);
  /* The tint of a row under the pointer, then one guide line for each tree level above the row,
   * under the chevron of that level. */
  background:
    linear-gradient(var(--trace-row-tint), var(--trace-row-tint)),
    repeating-linear-gradient(
      to right,
      transparent 0 var(--trace-guide-at),
      var(--openbot-border) var(--trace-guide-at) calc(var(--trace-guide-at) + 1px),
      transparent calc(var(--trace-guide-at) + 1px) var(--trace-indent)
    )
    var(--openbot-space-2) 0 / calc(var(--trace-depth, 0) * var(--trace-indent)) 100% no-repeat,
    var(--trace-surface);
}

/* The row under the pointer or the keyboard lights up, and so does the piece of its parent's lane
 * that stands for it. A piece under the pointer lights up its row. */
.trace-row {
  --trace-row-tint: transparent;
}

.trace-row[data-hovered],
.trace-row:has(.trace-name-button:focus-visible) {
  --trace-row-tint: var(--openbot-hover);
}

.trace-row[data-hovered] .trace-bar:not(.trace-segment),
.trace-segment[data-hovered] {
  outline: 1px solid var(--openbot-text-secondary);
  outline-offset: 1px;
}

/* The name of a row is its keyboard stop, and a click on it shows the step in the chat. */
.trace-name .trace-name-button.ui-button {
  height: auto;
  min-width: 0;
  flex: 1 1 auto;
  justify-content: flex-start;
  gap: var(--openbot-space-1-5);
  padding: 0;
  border-radius: var(--openbot-radius-xs);
  background: transparent;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-align: start;
  cursor: default;
}

.trace-row[data-selectable] .trace-name-button.ui-button {
  cursor: pointer;
}

/* The row's tint shows the keyboard stop, so the name gets a thin neutral ring and no halo. */
.trace-name .trace-name-button.ui-button:focus-visible {
  box-shadow: none;
  outline: 1px solid var(--openbot-text-muted);
  outline-offset: 1px;
}

.trace-axis-row {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--trace-surface);
}

.trace-axis-name {
  color: var(--openbot-text-muted);
}

/* An open row is not a lit toggle, so the chevron has no fill. */
.trace-name .trace-toggle[aria-expanded="true"]:not(:hover) {
  background: transparent;
}

.trace-toggle-icon {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  transition: rotate var(--openbot-duration-fast) var(--openbot-ease-out);
}

.trace-toggle[aria-expanded="false"] .trace-toggle-icon {
  rotate: -90deg;
}

.trace-toggle-space {
  width: var(--openbot-control-xs);
  flex: 0 0 auto;
}

.trace-icon {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
}

/* The icon of a row sits on a quiet tile. An agent's icon has the agent's colour. */
.trace-glyph {
  display: grid;
  width: 22px;
  height: 22px;
  box-sizing: border-box;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-sm);
  background: color-mix(in srgb, var(--openbot-text-primary) 4%, var(--trace-surface));
  color: var(--openbot-text-secondary);
}

.trace-glyph[data-agent] {
  color: var(--trace-hue);
}

.trace-row:not([data-hue]) .trace-glyph[data-agent] {
  color: var(--openbot-text-primary);
}

.trace-glyph[data-failed] {
  color: var(--openbot-danger-text);
}

.trace-glyph-icon {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}

.trace-spinner {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  animation: ui-spin 1s linear infinite;
}

.trace-span-name {
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trace-row[data-parent] .trace-span-name {
  font-weight: var(--openbot-weight-semibold);
}

.trace-row[data-failed] .trace-span-name {
  color: var(--openbot-danger-text);
}

/* The error of a failed tool row, under the row. It covers the lines of the timeline behind it. */
.trace-span-error-row {
  position: relative;
  z-index: 2;
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  padding-inline-start: calc(var(--openbot-space-2) + (var(--trace-depth, 0) + 1) * var(--openbot-space-4));
  border-bottom: 1px solid var(--openbot-border);
  background: var(--trace-surface);
}

.trace-span-error {
  max-height: 160px;
  margin: 0;
  overflow: auto;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* A light moves along the name of a running step. It repaints the text on each frame, so only the
 * few running rows have it. */
.trace-row[data-running] .trace-span-name {
  background:
    linear-gradient(
      90deg,
      var(--openbot-text-muted) 0%,
      var(--openbot-text-muted) 35%,
      var(--openbot-text-primary) 50%,
      var(--openbot-text-muted) 65%,
      var(--openbot-text-muted) 100%
    )
    0 0 / 300% 100%;
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: trace-shine 2s linear infinite;
}

@keyframes trace-shine {
  from {
    background-position: 100% 0;
  }

  to {
    background-position: 0 0;
  }
}

.trace-span-detail {
  /* The detail takes only the room after the name, so the name stays readable. */
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The timeline of a row. Each time sits at `--trace-at`, from 0 to 1, between the left pad and the
 * label room. The overlay of grid lines uses the same scale. */
.trace-lane {
  --trace-scale: calc(100% - var(--trace-lane-pad) - var(--trace-label-room));
  position: relative;
  z-index: 1;
  min-width: 0;
}

.trace-row[data-hovered] .trace-lane {
  background: var(--trace-row-tint);
}

.trace-overlay {
  --trace-scale: calc(100% - var(--trace-lane-pad) - var(--trace-label-room));
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: var(--trace-name-width);
  pointer-events: none;
}

.trace-tick,
.trace-gridline,
.trace-now,
.trace-now-dot,
.trace-bar,
.trace-handoff,
.trace-bar-label {
  position: absolute;
  left: calc(var(--trace-lane-pad) + var(--trace-scale) * var(--trace-at));
}

.trace-tick {
  top: 50%;
  padding-left: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-variant-numeric: tabular-nums;
  translate: 0 -50%;
  white-space: nowrap;
}

.trace-gridline,
.trace-now {
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--openbot-border);
}

.trace-now {
  z-index: 2;
  background: var(--openbot-text-dim);
}

.trace-now-dot {
  bottom: 0;
  width: 7px;
  height: 7px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-primary);
  translate: -3px 50%;
}

/* A new bar grows from its start. A replay moves bars on each frame, so their position has no
 * transition. */
.trace-bar {
  transform-origin: left center;
  transition: scale var(--openbot-duration-overlay) var(--openbot-ease-out);
}

@starting-style {
  .trace-bar {
    scale: 0 1;
  }
}

.trace-bar {
  top: 50%;
  display: grid;
  width: max(3px, calc(var(--trace-scale) * var(--trace-width)));
  height: var(--trace-bar-height);
  box-sizing: border-box;
  place-items: center;
  overflow: hidden;
  border-radius: var(--openbot-radius-xs);
  translate: 0 -50%;
}

/* A model call has the full agent colour and a tool call a dim one. */
.trace-bar[data-kind="model"],
.trace-swatch[data-kind="model"] {
  background-color: var(--trace-hue);
}

.trace-bar[data-kind="tool"],
.trace-swatch[data-kind="tool"] {
  background-color: color-mix(in srgb, var(--trace-hue) 45%, var(--trace-surface));
}

.trace-bar[data-kind="waiting"],
.trace-swatch[data-kind="waiting"] {
  border: 1px solid color-mix(in srgb, var(--trace-hue) 60%, transparent);
  background: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--trace-hue) 60%, transparent) 0 1px,
    transparent 1px 5px
  );
}

.trace-bar[data-kind="handoff"] {
  border: 1px solid var(--trace-hue);
  background-color: transparent;
}

.trace-bar[data-failed],
.trace-swatch[data-failed] {
  border: 0;
  background: var(--openbot-danger);
}

.trace-bar.trace-track {
  border: 0;
  background: color-mix(in srgb, var(--trace-hue) 16%, transparent);
}

/* A light moves along a bar that still runs. */
.trace-bar[data-running]:not([data-kind="waiting"]) {
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--openbot-text-primary) 35%, transparent) 50%,
    transparent 100%
  );
  background-repeat: no-repeat;
  background-size: 50% 100%;
  animation: trace-bar-shine 1.6s linear infinite;
}

@keyframes trace-bar-shine {
  from {
    background-position: -100% 0;
  }

  to {
    background-position: 200% 0;
  }
}

.trace-bar-icon {
  width: 12px;
  height: 12px;
  color: var(--openbot-text-on-accent);
}

/* The line from a parent row down to its subagents' bars. It starts under the parent's lane and ends
 * at the top of the last subagent's row. A line has the colour of the agent that hands off, so the
 * rows that draw parts of it do not give it their own colour. */
.trace-handoff {
  --trace-elbow: var(--openbot-space-2);
  --trace-line-top: calc((var(--trace-from) + 1.5) * var(--trace-row-height) + var(--trace-bar-height) / 2);
  --trace-line-rows: calc(var(--trace-to) - var(--trace-from) - 0.5);
  /* An open error moves the rows under it, so the line moves and grows by the errors along it. */
  top: calc(var(--trace-line-top) + var(--trace-from-shift, 0px));
  width: var(--trace-elbow);
  height: calc(var(--trace-line-rows) * var(--trace-row-height) - var(--trace-bar-height) / 2 + var(--trace-grow, 0px));
  box-sizing: border-box;
  border-left: 2px dotted var(--trace-hue);
  translate: calc(-1 * var(--trace-elbow)) 0;
  /* The rows slide when a parent folds, so the line follows them at the same pace. */
  transition:
    top var(--openbot-duration-slow) var(--openbot-ease-out),
    height var(--openbot-duration-slow) var(--openbot-ease-out);
}

.trace-handoff:not([data-hue]) {
  --trace-hue: var(--openbot-text-muted);
}

/* The branch into a subagent's bar. The line goes on past it to the next subagent, and turns into the
 * bar of the last one. */
.trace-handoff.trace-handoff-end {
  top: 0;
  height: 50%;
  border-bottom: 2px dotted var(--trace-hue);
  border-left: 0;
}

.trace-handoff.trace-handoff-end[data-last] {
  border-left: 2px dotted var(--trace-hue);
  border-bottom-left-radius: var(--openbot-radius-xs);
}

/* A parent row is opaque while it stays at the top, so it draws the part of a line that passes it. */
.trace-handoff.trace-handoff-pass {
  top: 0;
  height: 100%;
}

.trace-bar-label {
  top: 50%;
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  padding-left: var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
  font-variant-numeric: tabular-nums;
  translate: 0 -50%;
  white-space: nowrap;
}

.trace-empty {
  display: grid;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-8) var(--openbot-space-4);
  text-align: center;
}

.trace-empty-title,
.trace-empty-description {
  margin: 0;
}

.trace-empty-title {
  font-weight: var(--openbot-weight-medium);
}

.trace-empty-description {
  color: var(--openbot-text-muted);
}

.trace-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2) var(--openbot-space-4);
  padding-block: var(--openbot-space-2);
  padding-inline: var(--openbot-space-4) var(--openbot-space-2);
  border-top: 1px solid var(--openbot-border);
}

/* Each key is a small bar in the shape of the bars above it. The top agent's neutral colour is too dim here,
 * so the keys use the secondary text colour. */
.trace-legend {
  --trace-hue: var(--openbot-text-secondary);
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-1) var(--openbot-space-4);
  margin: 0;
  padding: 0;
  color: var(--openbot-text-muted);
  list-style: none;
}

.trace-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-2);
}

.trace-swatch {
  width: 16px;
  height: 8px;
  flex: none;
  box-sizing: border-box;
  border-radius: var(--openbot-radius-xs);
}

/* The handoff key is a piece of the dotted line that goes down to a subagent. */
.trace-swatch[data-kind="handoff"] {
  height: 2px;
  border-top: 2px dotted var(--trace-hue);
  border-radius: 0;
}

.trace-replay {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
}

.trace-replay .trace-play {
  border-radius: var(--openbot-radius-pill);
}

.trace-replay .trace-select {
  margin-inline-start: var(--openbot-space-1);
}

.ui-dialog-content.trace-dialog {
  width: min(1040px, 100%);
  max-height: min(680px, calc(100dvh - 2 * var(--openbot-space-6)));
  display: flex;
  overflow: hidden;
  outline: 0;
  background: var(--openbot-bg-surface);
}

.trace.trace-in-dialog {
  border: 0;
  border-radius: 0;
}

@media (prefers-reduced-motion: reduce) {
  .trace-branch-children,
  .trace-branch-clip,
  .trace-row,
  .trace-bar,
  .trace-handoff {
    transition: none;
  }

  .trace-spinner,
  .trace-row[data-running] .trace-span-name,
  .trace-bar[data-running] {
    animation: none;
  }

  .trace-toggle-icon {
    transition: none;
  }
}


/* /@fs//home/ubuntu/openbot/packages/ui/src/features/conversation/styles/agent-chat-empty.css */
/* A direct chat before its first message: the agent, its line, and a faint sample turn below.
   It fills the scroll area and no more, so the chat cannot open scrolled past the title: on a
   short window, the turn row gets only the height that is left. */
.agent-chat-empty {
  box-sizing: border-box;
  height: 100%;
  display: grid;
  grid-auto-rows: auto minmax(0, 21rem);
  align-content: center;
  justify-items: center;
  gap: var(--openbot-space-6);
  padding: var(--openbot-space-6) 0;
  container-type: inline-size;
}

.agent-chat-empty-pitch {
  --agent-chat-empty-title-size: var(--openbot-text-display);
  --agent-chat-empty-hand-size: calc(var(--agent-chat-empty-title-size) * 1.2);
  display: grid;
  justify-items: center;
  gap: var(--openbot-space-2);
  text-align: center;
}

.agent-chat-empty-avatar.agent-avatar {
  width: calc(var(--openbot-control-xl) * 1.6);
  height: calc(var(--openbot-control-xl) * 1.6);
  margin-bottom: var(--openbot-space-2);
}

.agent-chat-empty-title {
  margin: 0;
  font-size: var(--agent-chat-empty-title-size);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.agent-chat-empty-title > span {
  display: block;
}

.agent-chat-empty-ready,
.agent-chat-empty-description {
  color: var(--openbot-text-muted);
}

.agent-chat-empty-description {
  max-width: 30rem;
  margin: 0;
  font-size: var(--openbot-text-xl);
  line-height: 1.5;
  text-wrap: balance;
}

/* The one handwritten word. It writes itself once, from the start side. The brand has no hand
   font, so the system ones stand in. */
.agent-chat-empty-hand {
  display: inline-block;
  color: var(--openbot-accent-text);
  font-family: "Bradley Hand", "Noteworthy", "Segoe Print", cursive;
  font-size: var(--agent-chat-empty-hand-size);
  line-height: 1;
  transform: rotate(-2deg);
  clip-path: inset(-0.4em 100% -0.4em -0.2em);
  animation: agent-chat-empty-write calc(var(--openbot-duration-slow) * 2.8) linear
    calc(var(--openbot-duration-slow) * 2.5) forwards;
}

@keyframes agent-chat-empty-write {
  to {
    clip-path: inset(-0.4em -0.2em -0.4em -0.2em);
  }
}

/* In right-to-left text, the word writes itself from right to left. */
:dir(rtl) .agent-chat-empty-hand {
  clip-path: inset(-0.4em -0.2em -0.4em 100%);
}

/* The faint turn, in a column of chat width. Its rows are the chat's own. */
.agent-chat-empty-turn {
  width: min(100%, 40rem);
  min-height: 0;
  overflow: hidden;
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
  mask-image: radial-gradient(ellipse 70% 90% at 50% 20%, var(--openbot-text-primary) 45%, var(--openbot-transparent));
}

.agent-chat-empty-row {
  padding-top: var(--openbot-chat-entry-gap);
}

.agent-chat-empty-showing {
  transition:
    opacity calc(var(--openbot-duration-slow) * 3.5) var(--openbot-ease-out),
    filter calc(var(--openbot-duration-slow) * 3.5) var(--openbot-ease-out),
    transform calc(var(--openbot-duration-slow) * 3.5) var(--openbot-ease-out);
}

.agent-chat-empty-showing[data-leaving] {
  opacity: 0;
  filter: blur(3px);
  transform: translateY(-6px);
}

@container (max-width: 520px) {
  .agent-chat-empty-pitch {
    --agent-chat-empty-title-size: var(--openbot-text-3xl);
  }

  .agent-chat-empty-description {
    font-size: var(--openbot-text-lg);
  }
}

.agent-chat-empty[data-still] .agent-chat-empty-hand {
  animation: none;
  clip-path: none;
}


/* /@fs//home/ubuntu/openbot/packages/ui/src/features/conversation/styles/message-content.css */
.message-entry-user .ui-bubble {
  max-width: var(--message-narrow-bubble-width);
}

/* A table needs the width of an agent table. The bubble still fits a short table. */
.message-entry-user .ui-bubble:has(.message-markdown-table-scroll) {
  max-width: var(--message-wide-bubble-width);
}

.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;
}

/* Each line of a block takes its direction and its start side from its own text, so a Hebrew
   line after a line break aligns right in an English paragraph. A table cell keeps the table's
   direction, so its borders stay on the same side in each cell. */
.message-markdown :is(p, li, h1, h2, h3, h4, h5, h6, th, td) {
  unicode-bidi: plaintext;
}

.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-inline-start: 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-inline-start: var(--openbot-space-0-5) solid var(--openbot-border-strong);
  padding-inline-start: 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);
}

/* Each column keeps the data table minimum, so a narrow message scrolls sideways and does not
   break words. */
.message-markdown-table {
  width: 100%;
  min-width: calc(var(--message-markdown-table-columns) * 112px);
  border-collapse: collapse;
  background: var(--openbot-bg-canvas);
  color: var(--openbot-data-table-text);
}

.message-markdown-table :is(th, td) {
  border-inline-end: 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: start;
  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-inline-end: 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-paper-text);
}

.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-block: 0;
  padding-inline: 11px 10px;
  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);
}

/* Hidden parts slide toward the start side. */
:dir(rtl) :is(.selection-actions-form-shell-hidden, .selection-actions-presets-hidden) {
  transform: translateX(8px);
}

.selection-actions-more-presets {
  max-width: 0;
  gap: 2px;
  margin-inline-start: 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-inline-start var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1);
}

.selection-actions-presets-expanded .selection-actions-more-presets {
  max-width: 262px;
  margin-inline-start: 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-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-inline-start: 1px;
}

.selection-actions-expand svg {
  transition: transform var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1);
}

/* The chevron points to the end side, where the extra presets open. `scale` mirrors it and keeps the
   open state's `transform` rotation. */
:dir(rtl) .selection-actions-expand svg {
  scale: -1 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-inline-start: 2px solid var(--openbot-accent);
  border-start-start-radius: 0;
  border-start-end-radius: var(--openbot-radius-sm);
  border-end-end-radius: var(--openbot-radius-sm);
  border-end-start-radius: 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-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-show-full {
  justify-self: start;
}

.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: var(--message-wide-bubble-width);
  max-width: var(--message-wide-bubble-width);
}

.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-block: 4px;
  padding-inline: 10px 6px;
}

.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%;
  display: block;
  font: inherit;
}

.message-code-line {
  min-height: 19px;
  display: flex;
}

.message-code-line-number {
  width: 40px;
  flex: none;
  padding-inline-end: 8px;
  color: var(--openbot-text-dim);
  font-size: var(--openbot-text-sm);
  text-align: end;
  user-select: none;
}

.message-code-line-source {
  min-width: 0;
  padding-inline-end: 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.message-code-caret {
  width: 2px;
  height: 13px;
  display: inline-block;
  margin-inline-start: 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: start;
  vertical-align: top;
  /* A cell's text takes its own direction, and the cell keeps the table's for its borders. */
  unicode-bidi: plaintext;
}

.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-inline-end: 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-inline-end: 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: start;
  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-inline-start: -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-inline-start: 2px solid var(--openbot-text-dim);
  padding-inline-start: 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;
}

/*
 * The quoted message, rendered as Markdown and cut to four lines. The full body is parsed before
 * the cut, so an open code fence or a long heading cannot spill into the message under it.
 */
.message-reply-quote {
  max-height: 60px;
  overflow: hidden;
  font-size: var(--openbot-text-sm);
  line-height: 15px;
  overflow-wrap: anywhere;
}

/*
 * Only a quote that the cut shortens fades out. A mask reads only alpha, and the text colour can be
 * translucent, so the mask uses an opaque token.
 */
.message-reply-quote[data-clipped] {
  mask-image: linear-gradient(to bottom, var(--openbot-text-primary) 45px, transparent 60px);
}

.message-reply-quote blockquote > :not(:first-child) {
  margin-top: var(--openbot-space-1);
}

.message-reply-quote > .message-markdown > :not(:first-child) {
  margin-top: var(--openbot-space-1);
}

.message-reply-quote .message-markdown-heading {
  font-size: inherit;
  line-height: inherit;
}

.message-reply-quote :not(pre) > code {
  padding-block: 0;
  font-size: inherit;
}

.message-reply-quote .message-markdown-excerpt-code {
  font-family: var(--openbot-font-mono);
  white-space: pre-wrap;
}

[data-slot="bubble"][data-author="user"] .message-reply-context {
  border-inline-start-color: var(--openbot-border-strong);
  color: var(--openbot-text-readable);
}

/* A quote that opens its original. The button lies over the whole quote, its start mark included. */
.message-reply-context[data-opens] {
  position: relative;
  transition: border-inline-start-color var(--openbot-duration-hover) var(--openbot-ease-out);
}

/* The spinner takes the end column; the author and the text flow into the start 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-inline-start-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-block: 0;
  inset-inline: -2px 0;
  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-inline-start-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;
}

/* No optical offset: the inline face's margin below already lifts the plush body to the chip's centre. */
.message-agent-tag .agent-avatar {
  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-block: 1px;
  padding-inline: 3px 6px;
  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,
  .side-panel-file-badge
)[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,
  .side-panel-file-badge
)[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,
  .side-panel-file-badge
)[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,
  .side-panel-file-badge
)[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,
  .side-panel-file-badge
)[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,
  .side-panel-file-badge
)[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,
  .side-panel-file-badge
)[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-lg);
}

/* 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-inline-end: 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 to the start and up. */
.reference-chip.message-reference-chip .agent-avatar > svg {
  margin-block: -14% 0;
  margin-inline: -14% 0;
}

.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//home/ubuntu/openbot/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//home/ubuntu/openbot/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-block: var(--openbot-space-2);
  padding-inline: var(--openbot-space-4) var(--openbot-space-2);
  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//home/ubuntu/openbot/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. Both stay dark in the light
     theme: a frame and a page with different schemes get an opaque canvas. The colors come from
     the theme variables, which follow the palette. */
  color-scheme: dark;
}

/*
 * A page in the chat starts at the edge of the agent's reply below it and is as wide as a wide agent
 * bubble, which grows with the chat.
 */
.chat-visual-reply {
  max-width: var(--message-wide-bubble-width);
}

/* In a chat with agent faces, the page starts after the face column, as the agent's bubbles do. */
.chat-visual-with-author {
  padding-inline-start: calc(var(--message-author-column) + var(--openbot-space-2));
}

/* 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);
}

/*
 * The box that holds a page in the chat. It is a manual popover, so full screen can put it in the top
 * layer without a move in the document. Until then it has none of the browser's popover styles.
 */
.chat-visual-box {
  position: relative;
  min-width: 0;
}

.chat-visual-box[popover]:not(:popover-open) {
  position: relative;
  inset: auto;
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
}

.chat-visual-box-fill {
  height: 100%;
}

/* In the chat the surface adds no box, so the frame keeps its place and size. */
.chat-visual-box:not(:popover-open) > .chat-visual-surface {
  display: contents;
}

/* Full screen: the page fills a dialog card on the dim layer that app dialogs use. */
.chat-visual-box:popover-open {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  display: grid;
  place-items: center;
  margin: 0;
  border: 0;
  padding: var(--openbot-space-6);
  background: var(--openbot-dialog-overlay);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--openbot-text-primary);
  -webkit-app-region: no-drag;
}

.chat-visual-box:popover-open::backdrop {
  background: transparent;
}

.chat-visual-box:popover-open > .chat-visual-surface {
  width: min(1100px, 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--openbot-radius-xl);
  background: var(--openbot-bg-control);
  box-shadow: 0 0 0 1px var(--openbot-dialog-ring);
}

.chat-visual-box:popover-open .chat-visual-frame {
  min-height: 0;
  flex: 1;
  background: var(--openbot-bg-sidebar);
}

/* The page buttons show when the pointer or the focus is on the page. */
.chat-visual-actions {
  position: absolute;
  top: var(--openbot-space-2);
  inset-inline-end: var(--openbot-space-2);
  display: flex;
  gap: var(--openbot-space-1);
  opacity: 0;
  transition: opacity var(--openbot-duration-hover) var(--openbot-ease-out);
}

.chat-visual-actions svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}

.chat-visual-box:popover-open > .chat-visual-actions {
  display: none;
}

.chat-visual-box:hover > .chat-visual-actions,
.chat-visual-box:focus-within > .chat-visual-actions {
  opacity: 1;
}

@media (hover: none) {
  .chat-visual-actions {
    opacity: 1;
  }
}


/* /@fs//home/ubuntu/openbot/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-block: 6px;
  padding-inline: 12px 8px;
  box-shadow: 0 7px 22px var(--openbot-shadow-popover-ambient);
}

.composer-reply-preview > div {
  min-width: 0;
  flex: 1;
}

.composer-reply-preview > div > span {
  display: block;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: 550;
  line-height: 14px;
}

.composer-reply-preview .message-reply-quote {
  margin: 1px 0 0;
  color: var(--openbot-text-secondary);
}

.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 {
  /* Grok Bot's composer height curve (300ms): fast at the start, then a long, soft stop. */
  --composer-resize-duration: 300ms;
  --composer-resize-ease: linear(
    0,
    0.01588 2%,
    0.05618 4%,
    0.11201 6%,
    0.1768 8%,
    0.2458 10%,
    0.31562 12%,
    0.38392 14%,
    0.44914 16%,
    0.51029 18%,
    0.56683 20%,
    0.61852 22%,
    0.66534 24%,
    0.70743 26%,
    0.74501 28%,
    0.77838 30%,
    0.80788 32%,
    0.83383 34%,
    0.85658 36%,
    0.87645 38%,
    0.89376 40%,
    0.92183 44%,
    0.94282 48%,
    0.95838 52%,
    0.96984 56%,
    0.97823 60%,
    0.98435 64%,
    0.98878 68%,
    0.99198 72%,
    0.99594 80%,
    0.99829 90%,
    1
  );
  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),
    height var(--composer-resize-duration) var(--composer-resize-ease);
}

.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);
  /* Muted at rest, as the other icon buttons. The send button sets its own color. */
  color: var(--openbot-text-muted);
  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 {
  inset-inline-end: 46px;
  width: 28px;
  transition: width var(--voice-morph-exit-duration) var(--openbot-ease-out);
}

.voice-morph-send-blob,
.voice-morph-finish-blob {
  inset-inline-end: 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);
}

:dir(rtl) .voice-morph[data-recording] .voice-morph-finish-blob {
  transform: translateX(34px) scale(0.8);
}

/* 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-block: 0;
  padding-inline: 12px 3px;
  color: var(--openbot-text-secondary);
  animation: voice-morph-content-in var(--openbot-duration-slow) var(--openbot-ease-out) var(--openbot-duration-fast)
    both;
}

/* The last seconds before the time limit: the bar widens for the time left. */
.voice-morph[data-countdown] {
  --voice-bar-width: 188px;
}

.voice-recording-status[data-tone="warning"] {
  color: var(--openbot-warning-text);
}

.voice-recording-remaining {
  flex: 0 0 auto;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}

.voice-recording-status[data-tone="warning"] .voice-recording-remaining {
  color: var(--openbot-warning-text);
}

.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);
  /* A time axis: the newest sample is at the right in every language. */
  direction: ltr;
}

.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: var(--composer-editor-limit, max(48px, 33dvh));
}

/* The chat composer shows at most 6 lines (120px and the 10px padding), as Grok Bot's does. A longer
   draft scrolls inside the editor, so the chat keeps its space. */
.composer-wrap {
  --composer-editor-limit: max(48px, min(130px, 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;
}

/*
 * A chip is 24px and the editor line is 20px, so the first chip made the one-line composer 4px
 * taller. With a chip, the line is as tall as the chip and the padding is 2px less on each side, so
 * the composer keeps its height and the text stays in place.
 */
.composer[data-compact] .composer-editor-surface:has(.composer-mention-token) {
  padding-block: 2px;
  line-height: 24px;
}

.composer[data-compact] .composer-editor-placeholder {
  top: 4px;
  inset-inline-start: 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;
  /* Each line takes its direction and its start side from its own text. The surface keeps the
     interface direction, so an empty draft puts the caret on the placeholder's side. */
  unicode-bidi: plaintext;
}

.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-inline-start: 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;
  inset-inline-start: 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;
  inset-inline-start: 0;
}

/* The box comes from `.reference-chip`; this token only loses the chip fill and gains the outline. */
/*
 * `composer-resize.ts` sets a pixel height only while the composer moves between its one-line and
 * full layouts. The text keeps its place at the top and the toolbar rides the bottom edge, as in
 * Grok Bot. The one-line row rides the bottom edge when the composer closes.
 */
.composer[data-resizing] {
  min-height: 0;
  overflow: clip;
}

.composer[data-resizing][data-compact] {
  align-content: end;
}

.composer[data-resizing]:not([data-compact]) .composer-input-label {
  min-height: 0;
  align-items: flex-start;
  overflow: clip;
}

@media (prefers-reduced-motion: reduce) {
  .composer {
    --composer-resize-duration: 120ms;
    --composer-resize-ease: ease;
  }
}

.composer-mention-token.composer-tag-unavailable {
  border: 1px dashed var(--openbot-border-strong);
  background: transparent;
  /* No leading icon, so the start inset matches the end one. */
  padding-inline-start: var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
}

.composer-file-reference {
  height: 24px;
  cursor: pointer;
  user-select: none;
}

.composer-file-reference-image {
  width: var(--openbot-space-4);
  height: var(--openbot-space-4);
  flex: none;
  border-radius: var(--openbot-radius-sm);
  object-fit: cover;
}

.composer-file-reference-size {
  flex: none;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
  font-variant-numeric: tabular-nums;
}

/*
 * 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 {
  --mention-picker-title-height: 24px;
  --mention-picker-section-gap: var(--openbot-space-1);

  position: relative;
  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 and section title has a fixed height, so the list states the height it needs and
   * the panel has its full height in the first frame, also while the query narrows it.
   */
  height: calc(
    var(--mention-picker-rows, 0) *
    var(--mention-picker-row-height) +
    var(--mention-picker-sections, 0) *
    var(--mention-picker-title-height) +
    max(var(--mention-picker-sections, 0) - 1, 0) *
    var(--mention-picker-section-gap) +
    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;
  /* A key press scrolls the active row clear of the scroll fade. */
  scroll-padding-block: var(--openbot-space-4);
  /*
   * The panel stands on the composer, so a height that travels moves its top edge and every row
   * slides with it. The list takes its new height in one frame; only the rows that come back fade in.
   */
  transition: none;
}

/* The title of a section of the `@` list, with its count. A list with one section has no title. */
.mention-picker-section {
  display: flex;
  height: var(--mention-picker-title-height);
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 8px 4px;
  color: var(--openbot-queue-action);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}

.mention-picker-section-count {
  font-variant-numeric: tabular-nums;
}

.mention-picker-option + .mention-picker-section {
  margin-top: var(--mention-picker-section-gap);
}

/* One highlight slides under the active row (see `trackPickerHighlight`), so a row has no background of its own. */
.mention-picker-highlight {
  position: absolute;
  top: 0;
  right: var(--mention-picker-gutter);
  left: var(--mention-picker-gutter);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-hover);
  pointer-events: none;
  transition:
    transform var(--openbot-duration-fast) var(--openbot-ease-out),
    height var(--openbot-duration-fast) var(--openbot-ease-out);
}

.mention-picker-highlight[data-instant] {
  transition: none;
}

.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. */
  position: relative;
  z-index: 1;
  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: start;
}

.mention-picker-file-option .attachment-reference-visual {
  width: 20px;
  height: 20px;
}

/* A row that the query brings back fades in; the rows that stay do not move. */
.mention-picker-option[data-entering] {
  animation: mention-picker-row-in var(--openbot-duration-fast) var(--openbot-ease-out) both;
}

@keyframes mention-picker-row-in {
  from {
    opacity: 0;
  }
}

.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;
  /* Unset outside a filter, so the name keeps the row color. */
  color: var(--mention-picker-name-color);
  max-width: 50%;
  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;
}

/* While the user filters, the matched text stands out from the rest, as in the search dialog. */
.mention-picker-option[data-filtering] {
  --mention-picker-name-color: var(--openbot-queue-action);
}

.mention-picker-match {
  background: transparent;
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}

.mention-picker-badge {
  margin-inline-start: auto;
  flex: 0 0 auto;
  color: var(--openbot-queue-action);
}

.mention-picker-badge > svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}

.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-block: 7px;
  padding-inline: 8px 12px;
}

.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;
}

/* An image that opens in the image viewer. */
.composer-attachment-preview.ui-button {
  border: 0;
  padding: 0;
  cursor: zoom-in;
}

/* A pasted image that is still importing: its local preview, dimmed, under a spinner. */
.composer-attachment[data-pending] .composer-attachment-preview img {
  opacity: 0.5;
}

.composer-attachment[data-pending] > .ui-spinner {
  position: absolute;
  inset: 0;
  margin: auto;
}

/* A file on its way to the server. The dashed edge says that it is not there yet; the ring takes
   the place of the extension badge. */
.composer-attachment[data-upload="uploading"] {
  border-style: dashed;
}

.composer-attachment[data-upload="failed"] {
  border-color: var(--openbot-danger);
}

.composer-attachment[data-upload="failed"] .composer-attachment-copy small {
  color: var(--openbot-danger-text);
}

.composer-upload-ring {
  width: 28px;
}

.composer-upload-failed-icon {
  width: 18px;
  height: 18px;
  color: var(--openbot-danger-text);
}

.composer-upload-retry {
  flex: none;
  margin-inline-end: -4px;
  color: var(--openbot-danger-text);
}


/* /@fs//home/ubuntu/openbot/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: start;
}

.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);
  }
}

/* While a file from a joined server downloads, its download button shows the progress and stops it. */
.attachment-download-ring {
  --ui-radial-progress-color: var(--openbot-text-primary);

  width: var(--openbot-control-xs);
}

/* The card sizes every button icon; the ring chart fills its own box instead. */
.attachment-download-stop .ui-radial-progress-chart {
  width: 100%;
  height: 100%;
}

.attachment-download-stop .ui-radial-progress-content {
  padding: 0;
}

.attachment-download-stop .ui-radial-progress-content svg {
  width: var(--openbot-glyph-sm);
  height: var(--openbot-glyph-sm);
  fill: currentcolor;
  stroke: none;
}

.message-attachment[data-download] small {
  overflow: hidden;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-attachment[data-download="failed"] small {
  color: var(--openbot-danger);
}

.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-block: var(--queue-row-gutter) 0;
  padding-inline: var(--queue-row-inset-start) var(--queue-row-inset-end);
  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//home/ubuntu/openbot/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);
}

/* Over the image until it loads: a remote image arrives only after its last byte. It shows after a
 * delay, so an image that loads at once does not flash a spinner. */
.image-gallery-tile-loading {
  position: relative;
  z-index: 1;
  display: grid;
  grid-area: 1 / 1;
  animation: image-gallery-loading-in 0s 400ms both;
}

@keyframes image-gallery-loading-in {
  from {
    visibility: hidden;
  }
}

.image-gallery-tile img {
  grid-area: 1 / 1;
  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);
}

/* The macOS traffic lights take x 12..71 (`src/main/main-window.ts`), as in `browser-full-view.css`.
   They are at the inline start in every language, so the inset is too. */
.image-lightbox-mac-controls .image-lightbox-toolbar {
  padding-inline-start: 82px;
}

.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);
}

/* The copy and check glyphs draw as the download and close glyphs beside them. */
.image-lightbox-copy svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
}

.image-lightbox-zoom {
  display: flex;
  align-items: center;
}

:where(.ui-button).image-lightbox-zoom-level {
  min-width: 56px;
  font-variant-numeric: tabular-nums;
}

.image-lightbox-stage {
  position: relative;
  min-height: 0;
  /* A sideways swipe steps the images, and a pinch or a drag moves the zoom, all from script. */
  touch-action: none;
}

/* A zoomed image stays inside the stage, clear of the toolbar and the strip. */
.image-lightbox-stage[data-zoomed] {
  overflow: hidden;
}

/* 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;
  /* A drag moves a zoomed image; the browser must not start a drag of the file. */
  -webkit-user-drag: none;
}

/* A layer of its own would scale the fitted bitmap, so the zoomed image draws again, sharp. */
.image-lightbox-image[data-zoomed] {
  will-change: auto;
  cursor: grab;
}

.image-lightbox-stage[data-dragging] .image-lightbox-image {
  cursor: grabbing;
}

.image-lightbox-image[data-settling] {
  transition:
    scale var(--openbot-duration-slow) var(--openbot-ease-out),
    translate var(--openbot-duration-slow) var(--openbot-ease-out);
}

/* 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;
  /* The slides, the step buttons, the arrow keys and the swipe go left to right in every language
     (`ImageLightbox.tsx`), so the thumbnails keep that order too. */
  direction: ltr;
}

.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//home/ubuntu/openbot/packages/ui/src/features/conversation/styles/queue.css */
.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-block: var(--queue-row-gutter);
  padding-inline: var(--queue-row-inset-start) var(--queue-row-inset-end);
  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-block: 0;
  inset-inline: calc(var(--queue-row-gutter) - var(--queue-row-inset-start))
    calc(var(--queue-row-gutter) - var(--queue-row-inset-end));
  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-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//home/ubuntu/openbot/packages/ui/src/features/conversation/styles/agent-tasks.css */
/* The state glyph of a task on the Tasks page. */
.agent-tasks-mark {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  --task-list-glyph: 14px;
}


/* /@fs//home/ubuntu/openbot/packages/ui/src/features/conversation/styles/agent-threads.css */
/* The threads of an agent: tabs, a menu and a rename field in the chat header. */

/*
 * The tabs take the free width of the header and scroll when they do not fit. The margin keeps "+"
 * apart from the model picker in a narrow header; it is the gap between the header actions.
 */
.conversation-heading-group:has(.agent-threads-header) {
  min-width: 0;
  flex: 1 1 0;
  margin-inline-end: 6px;
}

/* The same gap as between two tabs, so "+" and the thread list read as part of the tab row. */
.agent-threads-header {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 3px;
  margin-inline-start: 4px;
}

/* The agent's name is the first tab, for the agent's own chat, with the shape of the thread tabs. */
.conversation-title.ui-button[data-tab] {
  height: var(--openbot-control-sm);
  gap: var(--openbot-space-1-5);
  padding-block: 0;
  padding-inline: var(--openbot-space-1-5) var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
  color: var(--openbot-text-secondary);
}

.conversation-title.ui-button[data-tab] h1 {
  color: inherit;
  font-size: var(--openbot-text-sm);
}

.conversation-title.ui-button[data-tab]:hover {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}

.conversation-title.ui-button[data-tab][data-selected] {
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
}

/* The gap after the name tab is the gap between two tabs, with the same divider in it: this margin and
   the padding of the tab list. The gap of the heading group does not apply. */
.conversation-heading-group:has(> .conversation-title[data-tab] + .agent-threads-header) {
  gap: 0;
}

.conversation-heading-group:has(.conversation-title[data-tab]) .agent-threads-header {
  margin-inline-start: 1px;
}

/*
 * Only the two icon buttons are left, and they cannot be narrower. The agent name gives way instead:
 * when it does not fit, only its avatar shows, and the name stays for a screen reader. Then "+" goes,
 * because the thread list also starts a thread. The row measures the name at its full width in this
 * mode, so the hidden name cannot change the mode.
 */
.agent-threads-header[data-mode="minimal"] {
  flex-shrink: 0;
}

.conversation-heading-group:has(.agent-threads-header[data-mode="minimal"]) .conversation-title {
  min-width: 0;
  flex-shrink: 1;
}

.conversation-heading-group:has(.agent-threads-header[data-fold]) .conversation-title {
  position: relative;
  flex-shrink: 0;
  padding-inline-end: var(--openbot-space-1-5);
}

.conversation-heading-group:has(.agent-threads-header[data-fold]) .conversation-title h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* With no room for the avatar and both buttons, "+" goes and the model picker drops its chevron. Then
   the list button goes, and last the avatar, so no part of the row covers the picker. A hidden part
   keeps its size, so the row can still measure it. */
.conversation-heading-group:has(.agent-threads-header[data-fold]:not([data-fold="name"])) {
  overflow: clip;
}

.conversation-header:has(.agent-threads-header[data-fold]:not([data-fold="name"]))
  .provider-model-trigger
  > .provider-model-chevron {
  display: none;
}

.agent-threads-header:is([data-fold="list"], [data-fold="all"]),
.conversation-heading-group:has(.agent-threads-header[data-fold="all"]) .conversation-title {
  visibility: hidden;
}

.agent-threads-tabs-area {
  position: relative;
  display: flex;
  min-width: 0;
}

.agent-threads-tabs-trigger,
.agent-threads-tabs-root {
  display: flex;
  min-width: 0;
}

/* The field has no frame of its own: the tab is its frame. It takes the place of the tab title. */
.agent-threads-rename.ui-input {
  position: absolute;
  top: 50%;
  z-index: 2;
  height: var(--openbot-control-sm);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: var(--openbot-text-sm);
  transform: translateY(-50%);
}

/* The shared sliding tabs, without the bar: in the header only the selected tab has a fill. */
.agent-threads-tabs.ui-sliding-tabs {
  min-width: 0;
  max-width: 100%;
  /* "+" and the thread list follow the last tab directly. */
  padding-inline-end: 0;
  overflow-x: auto;
  gap: var(--openbot-space-1);
  background: transparent;
  box-shadow: none;
  scrollbar-width: none;
  /* The soft edges, the fill, the drag and the scroll into view measure `scrollLeft` and `offsetLeft`
     from the left edge (`ThreadTabs.tsx`), so the tabs keep the left-to-right order in every language. */
  direction: ltr;
}

/* A soft edge where more tabs are out of view. */
.agent-threads-tabs[data-more-before] {
  mask-image: linear-gradient(to right, transparent, var(--openbot-text-primary) 24px);
}

.agent-threads-tabs[data-more-after] {
  mask-image: linear-gradient(to left, transparent, var(--openbot-text-primary) 24px);
}

.agent-threads-tabs[data-more-before][data-more-after] {
  mask-image: linear-gradient(
    to right,
    transparent,
    var(--openbot-text-primary) 24px,
    var(--openbot-text-primary) calc(100% - 24px),
    transparent
  );
}

/* The fill of the selected tab, as in the side panel tabs. */
.agent-threads-tabs .agent-threads-fill {
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control-active);
}

/* The trigger that keeps the agent's own chat selected in the tabs. It never shows. */
.agent-threads-tabs .agent-threads-main-key {
  display: none;
}

/* A tab has the shape of a side panel tab: the icon slot, then the title. All tabs have the same width,
   so a short title does not make a small tab. When the tabs do not fit, they get narrower together, and
   below the smallest width they scroll. A side panel thread tab has the same widths. */
.agent-threads-tab.ui-sliding-tabs-trigger {
  display: inline-flex;
  /* A width, not only a flex basis: the tab row takes its width from the widths of its tabs. */
  width: 140px;
  min-width: 96px;
  max-width: 140px;
  flex: 0 1 auto;
  align-items: center;
  gap: var(--openbot-space-1-5);
  padding-block: 0;
  padding-inline: var(--openbot-space-1-5) var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
  animation: agent-threads-tab-in var(--openbot-duration-normal) var(--openbot-ease-out);
  /* The other tabs slide when a tab moves past them. */
  transition:
    color var(--sliding-tabs-duration) var(--sliding-tabs-ease),
    transform var(--sliding-tabs-duration) var(--sliding-tabs-ease);
}

.agent-threads-tab-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A cut title that ends in a number, as " #2" of a branch, loses its middle, not the number. */
.agent-threads-title-numbered {
  display: flex;
  white-space: nowrap;
}

.agent-threads-title-root {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agent-threads-title-number {
  flex: none;
  white-space: pre;
}

/* A tab whose title the user edits has the fill of a selected tab and a thin border, so it reads as
   a field. Its own title hides under the field, and the icon slot stays. */
.agent-threads-tab.ui-sliding-tabs-trigger[data-renaming] {
  outline: 1px solid var(--openbot-border-focus);
  outline-offset: -1px;
  background-color: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
}

.agent-threads-tab[data-renaming] .agent-threads-tab-title {
  visibility: hidden;
}

/* The selected tab is on the fill, which the tabs measure. The tab of an open right-click menu
   looks hovered, so the user sees which tab the menu acts on. A tab in rename keeps its own fill. */
.agent-threads-tab.ui-sliding-tabs-trigger:not([aria-selected="true"], [data-renaming]):is(:hover, [data-menu-open]) {
  background-color: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}

/* The icon slot. On hover, a round fill and an X replace the icon, as in a side panel tab. */
.agent-threads-tab-close {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  border-radius: var(--openbot-radius-pill);
}

.agent-threads-tab-icon,
.agent-threads-tab-x {
  grid-area: 1 / 1;
}

.agent-threads-tab-icon {
  display: grid;
  opacity: 0.7;
}

.agent-threads-tab-icon > svg,
.agent-threads-tab-x {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}

.agent-threads-tab-x {
  opacity: 0;
}

/* A tab in rename keeps its icon: the pointer is there to edit the title, not to close the tab. */
.agent-threads-tab:hover:where(:not([data-renaming])) .agent-threads-tab-close {
  background: var(--openbot-bg-control-hover);
}

.agent-threads-tab:hover:where(:not([data-renaming])) .agent-threads-tab-icon {
  opacity: 0;
}

.agent-threads-tab:hover:where(:not([data-renaming])) .agent-threads-tab-x {
  opacity: 1;
}

.agent-threads-tab-close:hover {
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
}

.agent-threads-tab[data-renaming] .agent-threads-tab-close {
  pointer-events: none;
}

/* The state badge of the thread takes the icon slot at its own size. */
.agent-threads-tab-close:has(.agent-threads-state) {
  width: auto;
  min-width: var(--openbot-icon-md);
  height: auto;
  min-height: var(--openbot-icon-md);
}

.agent-threads-tab:not(:hover) .agent-threads-tab-icon:has(.agent-threads-state) {
  opacity: 1;
}

/* As tall as a tab and with its corners, so a hover fill on "+" matches the tab fill. */
.agent-threads-icon-button.ui-button {
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-sm);
  color: var(--openbot-text-muted);
}

/* A narrow header: the open thread as one button, with the shape, fill and type of a selected tab.
   The chevron says that it opens the thread list. */
.agent-threads-switcher.ui-button {
  min-width: 0;
  max-width: 200px;
  height: var(--openbot-control-sm);
  flex: 0 1 auto;
  gap: var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-md);
  background-color: var(--openbot-bg-control-active);
  padding-block: 0;
  padding-inline: var(--openbot-space-1-5) var(--openbot-space-1);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
}

.agent-threads-switcher.ui-button:hover,
.agent-threads-switcher.ui-button[aria-expanded="true"] {
  background-color: var(--openbot-bg-control-hover);
}

.agent-threads-switcher-icon {
  display: grid;
  flex: none;
  place-items: center;
  min-width: var(--openbot-icon-md);
  min-height: var(--openbot-icon-md);
}

.agent-threads-switcher-icon > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  opacity: 0.7;
}

.agent-threads-switcher-chevron {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: none;
  color: var(--openbot-text-muted);
}

.agent-threads-menu {
  width: 320px;
}

/* The list scrolls without a scrollbar. An edge with more threads behind it fades out. The
 * selectors outrank the global .scroll-fade-* masks. */
.agent-threads-menu-list {
  --agent-threads-fade-top: 0px;
  --agent-threads-fade-bottom: 0px;
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: none;
}

.agent-threads-menu .agent-threads-menu-list:is(.scroll-fade-top, .scroll-fade-bottom) {
  mask-image: linear-gradient(
    to bottom,
    transparent,
    var(--openbot-text-primary) var(--agent-threads-fade-top),
    var(--openbot-text-primary) calc(100% - var(--agent-threads-fade-bottom)),
    transparent
  );
}

.agent-threads-menu-list.scroll-fade-top {
  --agent-threads-fade-top: 24px;
}

.agent-threads-menu-list.scroll-fade-bottom {
  --agent-threads-fade-bottom: 24px;
}

.agent-threads-menu-item {
  gap: 8px;
}

/* The open thread has the hover color, in place of a check. */
.agent-threads-menu .agent-threads-menu-list .agent-threads-menu-item[aria-current] {
  background: var(--ui-menu-item-hover);
}

/* The tree lines of a branch under its source thread. The stem fills the full height of the row, so
 * the line of one level continues from row to row. The line of the last branch ends in a curve. */
.agent-threads-menu-stem {
  display: flex;
  flex: none;
  align-self: stretch;
  margin-block: calc(var(--openbot-space-1-5) * -1);
}

.agent-threads-stem-rail,
.agent-threads-stem-elbow {
  position: relative;
  width: 16px;
}

.agent-threads-stem-line::before,
.agent-threads-stem-elbow::before,
.agent-threads-stem-elbow::after {
  position: absolute;
  inset-inline-start: 7px;
  border: 0 solid color-mix(in srgb, var(--openbot-text-muted) 60%, transparent);
  content: "";
}

.agent-threads-stem-line::before,
.agent-threads-stem-elbow::before {
  inset-block: 0;
  border-inline-start-width: 1px;
}

.agent-threads-stem-elbow::after {
  top: 50%;
  inset-inline-end: 0;
  border-top-width: 1px;
}

.agent-threads-stem-last::before {
  inset-inline-end: 0;
  bottom: 50%;
  border-bottom-width: 1px;
  border-end-start-radius: 6px;
}

.agent-threads-stem-last::after {
  content: none;
}

.agent-threads-menu-title {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The time shows in full, also on a 12-hour clock. Its minimum width keeps the badges in one column,
 * on whole pixels, so their icons stay centred. */
.agent-threads-menu-time {
  min-width: 44px;
  flex: 0 0 auto;
  white-space: nowrap;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  text-align: end;
}

/* A state badge, as on a sidebar row. */
.agent-threads-state {
  display: inline-flex;
  height: 16px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: var(--openbot-radius-pill);
}

/* Agent messages that the user has not read: a dot in the color of the "new messages" mark of the
   timeline. A state badge outranks it. */
.agent-threads-unread {
  width: 8px;
  height: 8px;
  background: var(--openbot-unread-surface);
}

/* The pill of the sidebar badge, with the dots while the agent works. */
.agent-threads-state-working {
  width: 24px;
  background: var(--openbot-bg-control);
  color: var(--openbot-text-secondary);
}

@keyframes agent-threads-tab-in {
  from {
    opacity: 0;
    transform: translateY(2px);
  }
}

/* A tab that needs the user wears a soft tint of its badge, at 40% of the badge strength, so the
   badge stays the strongest mark. The tint is an image layer, so it also shows over the selection
   fill and on a moving tab. */
.agent-threads-tab[data-attention],
.agent-threads-switcher[data-attention],
.side-panel-thread-tab[data-attention] {
  background-image: linear-gradient(var(--agent-threads-tint), var(--agent-threads-tint));
}

:is(.agent-threads-tab, .agent-threads-switcher, .side-panel-thread-tab)[data-attention="waiting"] {
  --agent-threads-tint: color-mix(in srgb, var(--openbot-warning-soft) 40%, var(--openbot-transparent));
}

:is(.agent-threads-tab, .agent-threads-switcher, .side-panel-thread-tab)[data-attention="failed"] {
  --agent-threads-tint: color-mix(in srgb, var(--openbot-danger-soft) 40%, var(--openbot-transparent));
}

/* The tabs measure their own fill. Kobalte's fill stays hidden. */
.agent-threads-tabs .ui-sliding-tabs-pill:not(.agent-threads-fill) {
  display: none;
}

/* A line in the middle of the gap between two tabs, as in the side panel. It hides next to the
   selected or hovered tab, as the fill marks it. */
.agent-threads-tab + .agent-threads-tab::before,
:where(.conversation-heading-group:has(.conversation-title[data-tab]))
  .agent-threads-main-key
  + .agent-threads-tab::before {
  position: absolute;
  top: 50%;
  inset-inline-start: calc(var(--openbot-space-1) / -2 - 0.5px);
  width: 1px;
  height: var(--openbot-icon-lg);
  background: var(--openbot-border-strong);
  content: "";
  transform: translateY(-50%);
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}

:where(.conversation-heading-group:has(.conversation-title:is([data-selected], :hover)))
  .agent-threads-main-key
  + .agent-threads-tab::before {
  opacity: 0;
}

.agent-threads-tab[aria-selected="true"]::before,
.agent-threads-tab[aria-selected="true"] + .agent-threads-tab::before,
.agent-threads-tab[data-attention]::before,
.agent-threads-tab[data-attention] + .agent-threads-tab::before,
.agent-threads-tab:hover::before,
.agent-threads-tab:hover + .agent-threads-tab::before {
  opacity: 0;
}

/* A tab that the pointer moves follows the pointer directly. The dividers and the close control
   hide until it is in its new place. */
.agent-threads-tabs[data-dragging] {
  cursor: grabbing;
  user-select: none;
}

.agent-threads-tabs[data-dragging] .agent-threads-tab {
  cursor: grabbing;
}

/* The moving tab wears the fill itself, so it covers the tabs that it passes. */
.agent-threads-tab.ui-sliding-tabs-trigger[data-dragged=""] {
  z-index: 2;
  background-color: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
  transition: color var(--sliding-tabs-duration) var(--sliding-tabs-ease);
}

/* Over the side panel, the tab goes back to its place, faded, and a copy follows the pointer. */
.agent-threads-tab.ui-sliding-tabs-trigger[data-dragged="away"] {
  opacity: 0.4;
}

.agent-threads-tabs[data-dragging] .agent-threads-fill {
  transition: none;
}

.agent-threads-tabs[data-dragging] .agent-threads-tab::before,
.agent-threads-tabs[data-dragging] .agent-threads-tab-x {
  opacity: 0;
}

.agent-threads-tabs[data-dragging] .agent-threads-tab-close {
  background: transparent;
}

.agent-threads-tabs[data-dragging] .agent-threads-tab-icon {
  opacity: 0.7;
}

.agent-threads-tabs[data-dragging] .agent-threads-tab-icon:has(.agent-threads-state) {
  opacity: 1;
}

/* Where a side panel tab goes when the pointer lets it go over the chat. */
.agent-threads-header[data-drop-target] {
  border-radius: var(--openbot-radius-md);
  outline: 1px dashed var(--openbot-text-secondary);
  outline-offset: 2px;
  background: var(--openbot-bg-control-hover);
}

/* Marks after the title in the thread menu, as in a sidebar row. A mark opens and closes in width, and the negative
   margin takes back the gap before it, so a tab changes width smoothly. */
.agent-threads-tab-mark-slot {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: 0fr;
  margin-inline-start: -4px;
  opacity: 0;
  transition:
    grid-template-columns var(--sliding-tabs-duration) var(--sliding-tabs-ease),
    margin-inline-start var(--sliding-tabs-duration) var(--sliding-tabs-ease),
    opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}

.agent-threads-tab-mark-slot[data-open] {
  grid-template-columns: 1fr;
  margin-inline-start: 0;
  opacity: 1;
}

.agent-threads-tab-mark {
  min-width: 0;
  overflow-x: clip;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  color: var(--openbot-text-secondary);
}

/* In the menu, the badges share one centred column. */
.agent-threads-menu-item .agent-threads-tab-mark {
  width: 24px;
  justify-content: center;
}

/* An icon in a circle with a soft tint of its hue, as the wait chip of a sidebar row. The 12px icon
   has 4px on each side, so it stays on whole pixels. */
.agent-threads-state-icon {
  width: 20px;
  height: 20px;
  background: var(--openbot-bg-control);
  color: var(--openbot-text-muted);
}

.agent-threads-state-icon svg {
  width: 12px;
  height: 12px;
}

.agent-threads-tab-mark[data-kind="waiting"] .agent-threads-state-icon {
  background: var(--openbot-warning-soft);
  color: var(--openbot-warning-text);
}

.agent-threads-tab-mark[data-kind="failed"] .agent-threads-state-icon {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger-text);
}

.agent-thread-origin {
  margin: 0;
  padding-top: var(--openbot-chat-entry-gap);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

/* The line after the messages that a branch copied: "Branched from" and the source, between two rules. */
.agent-thread-branch-divider {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--openbot-space-2);
  margin: var(--openbot-space-2) 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}

.agent-thread-branch-divider hr {
  height: 1px;
  flex: 1;
  border: 0;
  background: var(--openbot-border);
}

.agent-thread-branch-text,
.agent-thread-branch-divider .agent-thread-branch-link {
  display: inline-flex;
  flex: 0 1 auto;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-1);
  color: inherit;
  font-size: inherit;
}

.agent-thread-branch-text svg,
.agent-thread-branch-link svg {
  width: 14px;
  height: 14px;
  flex: none;
}

.agent-thread-branch-text span,
.agent-thread-branch-link span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-thread-queued {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  padding-top: var(--openbot-chat-entry-gap);
}

.agent-thread-queued-text {
  margin: 0;
  overflow: hidden;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The hint holds the thread title, which can be long. It stays on the one line of the compact box. */
.agent-thread-composer .composer-editor-placeholder {
  inset-inline-end: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .agent-threads-tab.ui-sliding-tabs-trigger {
    animation: none;
    transition: none;
  }

  .agent-threads-tab-mark-slot {
    transition: none;
  }
}


/* /@fs//home/ubuntu/openbot/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-lg);
}

.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//home/ubuntu/openbot/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-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-2) var(--openbot-space-1);
  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;
}

/* The speed is text: the size of the player time, and the same width of each digit. */
.voice-panel-speed {
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}

@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;
}

/* A pill of fixed width, so that it does not move when its speed changes. */
.voice-player-speed {
  flex: none;
  width: calc(var(--openbot-space-6) * 2);
  padding-inline: 0;
  border-radius: var(--openbot-radius-pill);
  font-variant-numeric: tabular-nums;
}


/* /@fs//home/ubuntu/openbot/packages/ui/src/features/conversation/styles/panel-layout.css */
/*
 * The panels set these attributes on the conversation panel (`SettingsPanel`, `BrowserPreviewSidebar`,
 * `FilePreviewPanel`). A `:has()` on the conversation panel would make the browser restyle the whole
 * chat each time it adds a message.
 */
.conversation-panel[data-settings-panel] .conversation-header,
.conversation-panel[data-settings-panel] .conversation-scroll,
.conversation-panel[data-settings-panel] .composer-wrap {
  width: calc(100% - var(--settings-panel-width, 360px));
}

.conversation-panel[data-settings-panel] .chat-search {
  inset-inline-end: calc(var(--settings-panel-width, 360px) + 16px);
  max-width: calc(100% - var(--settings-panel-width, 360px) - 32px);
}

.conversation-panel[data-browser-side-panel] .chat-search,
.conversation-panel[data-file-preview-panel] .chat-search {
  inset-inline-end: calc(var(--browser-panel-width, 380px) + 16px);
  max-width: calc(100% - var(--browser-panel-width, 380px) - 32px);
}

.conversation-panel[data-browser-side-panel] .conversation-header,
.conversation-panel[data-browser-side-panel] .conversation-scroll,
.conversation-panel[data-browser-side-panel] .composer-wrap,
.conversation-panel[data-file-preview-panel] .conversation-header,
.conversation-panel[data-file-preview-panel] .conversation-scroll,
.conversation-panel[data-file-preview-panel] .composer-wrap {
  width: 100%;
}

@keyframes message-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* A new chat bubble rises 8px and grows from 97% as Grok Bot's do. The timing curve passes 100% a
   little and comes back, so the bubble settles with a small bounce. */
@keyframes message-bubble-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* The user's own message rises 12px, as Grok Bot's does when it is sent. A tall message that also
   grew from 97% would move its top edge far, so it only rises. */
@keyframes message-sent-in {
  from {
    transform: translateY(12px);
  }
  to {
    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,
  .message-entry-animated,
  .chat-action-entry-animated,
  .chat-action-target-entering,
  .agent-activity-entry,
  .agent-activity-content,
  .agent-activity-avatar,
  .agent-activity-entry .agent-activity-avatar,
  .agent-row-thinking-dots i,
  .agent-row-agent-status-responded,
  .agent-row-agent-status-unread,
  .mention-picker,
  .mention-picker-list,
  .mention-picker-highlight,
  .mention-picker-option[data-entering],
  .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//home/ubuntu/openbot/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;
  inset-inline-end: 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%;
  inset-inline-start: 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;
  /* A tab drag measures `offsetLeft` from the left edge (`SidePanel.tsx`, `BrowserTabStrip.tsx`), so
     the tabs keep the left-to-right order in every language. */
  direction: ltr;
}

.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-block: 0;
  padding-inline: var(--openbot-space-1-5) var(--openbot-space-2);
  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%;
  inset-inline-start: 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;
}

/* A file-type badge of three or four letters is wider than a tab icon, so the slot grows to hold it. */
.side-panel-file-tab .side-panel-tab-close {
  width: auto;
  min-width: var(--openbot-icon-md);
}

.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]) {
    width: auto;
    min-width: 0;
    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);
}

/* A file tab shows the file-type badge of a file link at its size in the chat. A file name is longer
 * than a pane name, so it shrinks and ends in an ellipsis. A file tab slides when it drags, as a thread
 * tab does. */
.side-panel-file-tab {
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}

.side-panel-file-badge {
  display: inline-flex;
}

.side-panel-file-badge > .attachment-reference-visual > svg {
  width: 12px;
  height: 12px;
}

.side-panel-file-tab .side-panel-tab-select {
  flex: 0 1 auto;
}

/* In the dock, the file tab names the file. The title keeps its place, so the file actions stay at
 * the end of the toolbar. The file comes in with its tab, as the other panes do, without a slide. */
.side-panel-docked .file-preview-header > .file-preview-file-icon {
  display: none;
}

.side-panel-docked .file-preview-header > h2 {
  visibility: hidden;
}

.side-panel-docked > .file-preview-panel.t-panel-slide {
  transition: none;
}

/* A thread tab: the state badge of the thread takes the icon slot at its own size, and the X shows
 * over it on hover. A thread that needs the user wears the tint of its badge, as in the chat header. */
.side-panel-tab-close:has(.agent-threads-state) {
  width: auto;
  min-width: var(--openbot-icon-md);
  height: auto;
  min-height: var(--openbot-icon-md);
}

.side-panel-tab:not(:hover, :focus-within) .side-panel-tab-icon:has(.agent-threads-state) {
  opacity: 1;
}

.side-panel-tab-icon .agent-threads-state-icon svg {
  width: 12px;
  height: 12px;
}

/* A thread tab has the widths of a tab in the chat header, so a thread keeps its size when it moves
 * between the two rows. Its title takes the free width of the tab and starts after the icon. */
.side-panel-thread-tab {
  flex: 0 1 auto;
  width: 140px;
  min-width: 96px;
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}

.side-panel-thread-tab .side-panel-tab-select {
  flex: 1;
  text-align: start;
}

/* A thread or file tab that the pointer moves follows the pointer and wears the selection fill, so it covers
 * the tabs that it passes. The dividers and the X hide until the drop. Over the chat, the tab goes
 * back to its place, faded, and a copy follows the pointer. */
.side-panel-tabs[data-dragging],
.side-panel-tabs[data-dragging] .side-panel-tab-select {
  cursor: grabbing;
  user-select: none;
}

.side-panel-tabs[data-dragging] > :is(.side-panel-thread-tab, .side-panel-file-tab)[data-dragged=""] {
  z-index: 2;
  background-color: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
  transition: none;
}

.side-panel-tabs[data-dragging] > .side-panel-thread-tab[data-dragged="away"] {
  opacity: 0.4;
}

.side-panel-tabs[data-dragging] > .side-panel-tab::before,
.side-panel-tabs[data-dragging] .side-panel-tab-x {
  opacity: 0;
}

.side-panel-tabs[data-dragging] .side-panel-tab-close {
  background: transparent;
}

.side-panel-tabs[data-dragging] .side-panel-tab-icon {
  opacity: 0.7;
}

.side-panel-tabs[data-dragging] .side-panel-tab-icon:has(.agent-threads-state) {
  opacity: 1;
}

/* The copy of a thread tab that the pointer takes from one tab row to the other. */
.thread-tab-ghost {
  position: fixed;
  z-index: 1000;
  max-width: 140px;
  white-space: nowrap;
  border: 1px solid var(--openbot-border);
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
  pointer-events: none;
  translate: -50% -50%;
}

.thread-tab-ghost .side-panel-tab-label {
  overflow: hidden;
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
}

/* Where a thread tab of the chat header goes when the pointer lets it go over the side panel. */
.side-panel-drop {
  position: absolute;
  z-index: 17;
  top: calc(var(--left-header-height, 38px) + var(--openbot-space-2));
  inset-inline-end: var(--openbot-space-2);
  bottom: var(--openbot-space-2);
  display: grid;
  width: calc(var(--side-panel-width, 380px) - 2 * var(--openbot-space-2));
  place-items: start center;
  padding-top: var(--openbot-space-6);
  border: 1px dashed var(--openbot-text-secondary);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .side-panel-thread-tab,
  .side-panel-file-tab {
    transition: none;
  }
}


/* /@fs//home/ubuntu/openbot/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-block: var(--notice-inset) calc(var(--notice-inset) + var(--notice-composer-overlap));
  padding-inline: 12px var(--notice-inset);
  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-inline-end: 12px;
}

.composer-notice-icon {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--notice-accent);
  stroke-width: var(--openbot-icon-stroke-lg);
}

/* 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//home/ubuntu/openbot/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 and Compact rows sit under a full-width divider, in the shape of menu items. */
.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-action {
  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-action:is(:hover, :focus-visible):not(:disabled) {
  background: var(--ui-menu-item-hover);
}

.context-meter-action > 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);
  /* A meter: the script places the compaction tick with a physical `left`, so the bar stays LTR. */
  direction: ltr;
}

.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);
  stroke-width: var(--openbot-icon-stroke);
}

.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//home/ubuntu/openbot/packages/ui/src/features/conversation/styles/composer-stack.css */
/*
 * Everything above the input is one card: the waiting block, the open waits, the queue, the reply
 * and the notices. The stack draws the one border and the one radius, and tucks its lower edge
 * under the input the way the queue did on its own. The cards inside keep their content, but lose
 * their own margins, corners and tucks, so they sit flush with a hairline between them.
 *
 * Each card pulls up by 1px over its own top line. The first card's line goes under the clip, so
 * the stack's own border is the only edge at the top, and every later line divides two cards.
 *
 * The stack only has a frame when something shows in it: the queue slot stays in the DOM while
 * closed, and a frame round an empty slot would be a line over the input.
 */
.composer-stack {
  --composer-stack-inset: var(--openbot-space-3);
}

/* A narrow pane gives the rows the width the side margins took. */
@media (max-width: 620px) {
  .composer-stack {
    --composer-stack-inset: 2px;
  }
}

.composer-stack:has(> :not(.agent-queue-slot), > .agent-queue-slot > .agent-queue-slot-inner > *) {
  --composer-stack-overlap: 14px;

  position: relative;
  z-index: 10;
  overflow: hidden;
  margin: 0 var(--composer-stack-inset) calc(-1 * var(--composer-stack-overlap));
  border: 1px solid var(--openbot-queue-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-queue-surface);
  padding-bottom: var(--composer-stack-overlap);
}

.composer-stack :is(.awaiting-replies, .agent-queue-panel, .composer-notice, .composer-reply-preview) {
  z-index: auto;
  margin: -1px 0 0;
  border: 0;
  border-top: 1px solid var(--openbot-queue-border);
  border-radius: 0;
  box-shadow: none;
}

/* The stack tucks under the input now, so no card inside keeps room for a tuck of its own. */
.composer-stack :is(.awaiting-replies, .agent-queue-panel) {
  padding-bottom: 0;
}

.composer-stack .composer-notice {
  padding-bottom: var(--notice-inset);
}

/*
 * A compaction notice that leaves when it is the only card takes the frame with it: the frame drops
 * behind the input the way the notice did on its own. The notice keeps its own exit animation,
 * because its `onAnimationEnd` removes it. With reduced motion the notice fades in 1ms, so the frame
 * does not move.
 */
@media (prefers-reduced-motion: no-preference) {
  .composer-stack:has(> .context-compaction-notice[data-leaving]):not(
    :has(> :not(.agent-queue-slot, [data-leaving]), > .agent-queue-slot > .agent-queue-slot-inner > *)
  ) {
    animation: context-compaction-notice-out var(--openbot-duration-toast-exit) var(--openbot-ease-in-out) forwards;
  }
}


/* /@fs//home/ubuntu/openbot/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//home/ubuntu/openbot/packages/ui/src/features/conversation/styles/browser-takeover.css */
/* The frame is a UiBlockCard (ui-blocks.css); the page preview is its body. */
.browser-takeover-card {
  width: min(540px, 100%);
  margin: var(--openbot-space-3) 0 var(--openbot-space-6);
  animation: browser-takeover-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}

.browser-takeover-preview {
  min-width: 0;
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  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);
  /* Raised over the card, as the details of an approval. */
  background: var(--openbot-bg-surface-raised);
  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-lg);
}

.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;
}

@keyframes browser-takeover-in {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.99);
  }

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

.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-button {
  border-radius: var(--openbot-radius-pill);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-regular);
}

/* The details of a request, as the draft of a confirm block (ui-blocks.css): raised over the bubble. */
.approval-command-block,
.approval-detail-row,
.approval-permissions {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface-raised);
}

.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;
}

@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//home/ubuntu/openbot/packages/ui/src/features/conversation/styles/feedback-card.css */
/* The agent's offer to send feedback to the OpenBot team, and the thank-you after Send. */
.feedback-offer {
  align-items: center;
  gap: var(--openbot-space-3);
  text-align: center;
}

.feedback-offer-emoji {
  font-size: var(--openbot-text-display);
  line-height: 1;
  animation: feedback-offer-wiggle 900ms var(--openbot-ease-out) 200ms both;
}

.feedback-offer-headline {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-xl);
  font-weight: var(--openbot-weight-semibold);
}

.feedback-offer-quote {
  display: grid;
  width: 100%;
  box-sizing: border-box;
  gap: var(--openbot-space-1);
  margin: 0;
  border-inline-start: 3px solid var(--openbot-border);
  color: var(--openbot-text-secondary);
  padding-inline-start: var(--openbot-space-3);
  text-align: start;
}

.feedback-offer-quote strong {
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
  overflow-wrap: anywhere;
}

.feedback-offer-quote p {
  margin: 0;
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.feedback-offer-actions {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--openbot-space-2);
}

.feedback-offer-actions > :last-child {
  flex: 1;
}

.feedback-sent {
  gap: var(--openbot-space-3);
}

.feedback-sent > * {
  animation: feedback-sent-in 320ms var(--openbot-ease-out) 80ms both;
}

.feedback-sent-badge {
  animation: feedback-sent-pop 420ms var(--openbot-ease-out) 260ms both;
}

.feedback-sent-body {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}

.feedback-sent-footer {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  border-top: 1px solid var(--openbot-border);
  padding-top: var(--openbot-space-3);
}

.feedback-sent-footer > a {
  margin-inline-start: auto;
}

.feedback-sent-title {
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes feedback-offer-wiggle {
  0% {
    opacity: 0;
    transform: scale(0.6) rotate(0);
  }

  40% {
    opacity: 1;
    transform: scale(1.1) rotate(-10deg);
  }

  70% {
    transform: rotate(8deg);
  }

  100% {
    transform: rotate(0);
  }
}

@keyframes feedback-sent-in {
  from {
    opacity: 0;
    transform: translateY(6px);
    filter: blur(2px);
  }

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

@keyframes feedback-sent-pop {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }

  60% {
    opacity: 1;
    transform: scale(1.08);
  }

  100% {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .feedback-offer-emoji,
  .feedback-sent > *,
  .feedback-sent-badge {
    animation: none;
  }
}


/* /@fs//home/ubuntu/openbot/packages/ui/src/features/conversation/styles/question-prompt.css */
/* Question prompt: one bubble, one question at a time. The open page moves and fades in; the others
   wait to the start (done) or to the end (later). The stage height follows the open page. */

.question-prompt-bubble.ui-bubble {
  width: min(540px, 100%);
  max-width: 100%;
}

.question-prompt-bubble[data-entrance] {
  animation: question-prompt-in var(--page-slide-dur) var(--page-slide-ease) both;
}

@keyframes question-prompt-in {
  from {
    opacity: 0;
    transform: translateY(var(--page-slide-distance));
    filter: blur(var(--page-blur));
  }
}

.question-prompt-bubble > .ui-bubble-content {
  width: 100%;
  padding: var(--openbot-space-4) var(--openbot-space-2) var(--openbot-space-2);
}

.question-prompt-form.ui-questionnaire {
  position: relative;
  gap: 0;
}

.question-prompt-cancel.ui-button {
  position: absolute;
  z-index: 2;
  inset-block-start: calc(-1 * var(--openbot-space-2));
  inset-inline-end: 0;
  color: var(--openbot-text-muted);
}

.question-prompt-stage {
  display: grid;
  overflow: hidden;
  outline: 0;
  transition: height var(--page-slide-dur) var(--page-slide-ease);
}

.question-prompt-page {
  grid-area: 1 / 1;
  align-self: start;
  min-width: 0;
  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),
    visibility 0s linear var(--page-slide-dur);
}

.question-prompt-page[data-pos="prev"],
.question-prompt-page[data-pos="next"] {
  opacity: 0;
  filter: blur(var(--page-blur));
  visibility: hidden;
}

.question-prompt-page[data-pos="prev"] {
  transform: translateX(calc(-1 * var(--page-slide-distance)));
}

.question-prompt-page[data-pos="next"] {
  transform: translateX(var(--page-slide-distance));
}

:dir(rtl) .question-prompt-page[data-pos="prev"] {
  transform: translateX(var(--page-slide-distance));
}

:dir(rtl) .question-prompt-page[data-pos="next"] {
  transform: translateX(calc(-1 * var(--page-slide-distance)));
}

.question-prompt-page[data-pos="current"] {
  transition-delay: 0s, 0s, 0s, 0s;
}

/* The footer folds away when the answers are sent. */
.question-prompt-fold {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--acc-collapse) var(--acc-ease);
}

.question-prompt-fold[data-open="true"] {
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--acc-expand) var(--acc-ease);
}

.question-prompt-fold-inner {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  filter: blur(var(--text-swap-blur));
  transition:
    opacity var(--acc-collapse) var(--acc-ease),
    filter var(--acc-collapse) var(--acc-ease);
}

.question-prompt-fold[data-open="true"] .question-prompt-fold-inner {
  opacity: 1;
  filter: blur(0);
  transition:
    opacity var(--acc-expand) var(--acc-ease),
    filter var(--acc-expand) var(--acc-ease);
}

/* Question ------------------------------------------------------------------------------------ */

.question-prompt-header {
  display: grid;
  gap: var(--openbot-space-0-5);
  padding: 0 var(--openbot-space-2) var(--openbot-space-2);
}

.question-prompt-page:not(.question-prompt-summary) .question-prompt-header {
  padding-inline-end: var(--openbot-space-8);
}

.question-prompt-title {
  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);
  letter-spacing: var(--openbot-tracking-tight);
  overflow-wrap: anywhere;
}

.question-prompt-detail {
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}

.question-prompt-options {
  gap: var(--openbot-space-0-5);
}

.question-prompt-options > .question-prompt-option {
  position: relative;
  min-width: 0;
  min-height: 40px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: var(--openbot-space-3);
  border-radius: var(--openbot-radius-md);
  padding: var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  cursor: pointer;
  transition: background-color var(--openbot-duration-fast) ease-out;
}

.question-prompt-option:hover:not([data-disabled]),
.question-prompt-custom:focus-within {
  background: var(--openbot-question-option-soft);
}

.question-prompt-option[data-checked] {
  background: var(--openbot-question-option-hover);
}

.question-prompt-option:active:not([data-disabled]) {
  background: var(--openbot-question-option-pressed);
}

/* The stage clips, so the keyboard ring sits inside the row. */
.question-prompt-option.ui-questionnaire-choice:focus-within {
  outline: 0;
}

.question-prompt-option:has(.ui-questionnaire-choice-input:focus-visible) {
  background: var(--openbot-question-option-soft);
  box-shadow: inset 0 0 0 1px var(--openbot-question-option);
}

.question-prompt-option-text {
  min-width: 0;
  display: grid;
}

.question-prompt-option-label {
  overflow-wrap: anywhere;
}

.question-prompt-option-description {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  overflow-wrap: anywhere;
}

/* Letter badge: a question tint; solid when picked, with a small pop; success tint once answered. */
.question-prompt-letter.ui-kbd {
  width: 22px;
  min-width: 22px;
  height: 22px;
  border-color: transparent;
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-question-badge-soft);
  color: var(--openbot-question-badge-text);
  font-family: var(--openbot-font-sans);
  font-weight: var(--openbot-weight-semibold);
  transition:
    background-color var(--openbot-duration-fast) ease-out,
    color var(--openbot-duration-fast) ease-out;
}

.question-prompt-answer-skipped .question-prompt-letter.ui-kbd {
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-muted);
}

.question-prompt-option[data-checked] .question-prompt-letter.ui-kbd {
  background: var(--openbot-question-option);
  color: var(--openbot-text-on-status);
  animation: question-prompt-badge-pop var(--openbot-duration-slow) var(--openbot-ease-out);
}

.question-prompt-letter[data-answered].ui-kbd {
  background: var(--openbot-success);
  color: var(--openbot-text-on-status);
}

.question-prompt-bubble[data-entrance][data-state="done"] .question-prompt-letter[data-answered].ui-kbd {
  animation: question-prompt-badge-pop var(--openbot-duration-slow) var(--openbot-ease-out) var(--openbot-duration-fast)
    both;
}

@keyframes question-prompt-badge-pop {
  from {
    transform: scale(0.8);
  }
}

.question-prompt-custom {
  cursor: text;
}

.question-prompt-custom-input.ui-input {
  width: 100%;
  min-width: 0;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  color: var(--openbot-text-primary);
  font: inherit;
}

.question-prompt-custom-input.ui-input::placeholder {
  color: var(--openbot-text-muted);
}

.question-prompt-custom-input.ui-input:focus,
.question-prompt-custom-input.ui-input:focus-visible {
  outline: 0;
  box-shadow: none;
}

/* Footer: progress, then Back, Skip and Next. ------------------------------------------------ */

.question-prompt-footer {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  padding-block: var(--openbot-space-3) var(--openbot-space-1);
  padding-inline: var(--openbot-space-2) var(--openbot-space-1);
}

.question-prompt-progress.ui-questionnaire-progress {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
}

.question-prompt-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-dim);
  transition:
    width var(--page-slide-dur) var(--page-slide-ease),
    background-color var(--page-slide-dur) var(--page-slide-ease),
    opacity var(--page-slide-dur) var(--page-slide-ease);
}

.question-prompt-dot[data-state="done"] {
  background: var(--openbot-question-badge-text);
  opacity: 0.55;
}

/* The current question is a wide pill. It moves along as the questions open. */
.question-prompt-dot[data-state="current"] {
  width: 18px;
  background: var(--openbot-question-option);
}

.question-prompt-actions {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-inline-start: auto;
}

.question-prompt-pill.ui-button {
  border-radius: var(--openbot-radius-pill);
  padding-inline: var(--openbot-space-4);
  font-size: var(--openbot-text-md);
}

/* Summary ------------------------------------------------------------------------------------- */

.question-prompt-summary {
  display: grid;
}

.question-prompt-section .question-prompt-title {
  padding: 0 var(--openbot-space-2) var(--openbot-space-1);
  color: var(--openbot-text-muted);
}

.question-prompt-section + .question-prompt-section {
  margin-top: var(--openbot-space-2);
  border-top: 1px solid var(--openbot-border);
  padding-top: var(--openbot-space-3);
}

.question-prompt-answers {
  display: grid;
  gap: var(--openbot-space-1);
  margin: 0;
  list-style: none;
}

.question-prompt-answers,
.question-prompt-answer-skipped {
  padding: var(--openbot-space-0-5) var(--openbot-space-2) var(--openbot-space-2);
}

.question-prompt-answer {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: var(--openbot-space-3);
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  overflow-wrap: anywhere;
}

.question-prompt-answer-skipped {
  color: var(--openbot-text-muted);
}

.question-prompt-closed {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin: 0;
  padding: 0 var(--openbot-space-2) var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}

.question-prompt-closed svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.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-footer {
    flex-wrap: wrap;
  }

  .question-prompt-pill.ui-button {
    padding-inline: var(--openbot-space-3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .question-prompt-bubble[data-entrance],
  .question-prompt-letter.ui-kbd,
  .question-prompt-option[data-checked] .question-prompt-letter.ui-kbd,
  .question-prompt-bubble[data-entrance][data-state="done"] .question-prompt-letter[data-answered].ui-kbd {
    animation: none;
  }

  :is(
    .question-prompt-stage,
    .question-prompt-page,
    .question-prompt-fold,
    .question-prompt-fold-inner,
    .question-prompt-letter,
    .question-prompt-dot,
    .question-prompt-option
  ) {
    transition: none;
  }
}


/* /@fs//home/ubuntu/openbot/packages/ui/src/features/conversation/styles/ui-blocks.css */
/* Interactive blocks an agent draws: confirm, choice, quick replies and form. Tokens only. */

/* The frame of confirm, choice and form blocks: a muted bubble with the look of an agent question
   (question-prompt.css). */
.ui-block-card.ui-bubble {
  width: min(540px, 100%);
  max-width: 100%;
}

/* The card has a fixed width, so its content can be a size container for the narrow layout below. */
.ui-block-card > .ui-block-content {
  container: ui-block / inline-size;
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-4) var(--openbot-space-4) var(--openbot-space-3);
}

.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;
  gap: var(--openbot-space-3);
}

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

.ui-block-title {
  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);
  letter-spacing: var(--openbot-tracking-tight);
  overflow-wrap: anywhere;
}

.ui-block-subtitle {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}

/* The status badge of a block: "Waiting for you", or the outcome of a frozen block that shows it in
   the header (interaction-cards.css draws it). It sits on the title row, so the subtitle keeps the
   full width of the card. */
.ui-block-header:has(> .ui-block-status) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--openbot-space-3);
  row-gap: var(--openbot-space-0-5);
}

.ui-block-header:has(> .ui-block-status) > .ui-block-heading {
  display: contents;
}

.ui-block-header:has(> .ui-block-status):has(> .ui-block-icon) {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.ui-block-header:has(> .ui-block-status) > .ui-block-icon {
  grid-row: 1 / span 2;
  grid-column: 1;
}

/* With no subtitle, the icon, the title and the badge share one centered row. */
.ui-block-header:has(> .ui-block-status):has(> .ui-block-icon):not(:has(.ui-block-subtitle))
> :is(.ui-block-icon, .ui-block-status) {
  grid-row: 1;
  align-self: center;
}

/* Counted from the end, so the same lines fit a header with and without an icon. */
.ui-block-header:has(> .ui-block-status) .ui-block-title {
  grid-row: 1;
  grid-column: -3 / -2;
  align-self: center;
}

.ui-block-header:has(> .ui-block-status) .ui-block-subtitle {
  grid-column: -3 / -1;
}

.ui-block-status {
  grid-row: 1;
  grid-column: -2 / -1;
  align-self: start;
}

.ui-block-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--openbot-space-3);
}

.ui-block-body:empty {
  display: none;
}

/* The footer of an open block: Skip and the block's buttons at the end, the main one last. */
.ui-block-card-footer {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--openbot-space-2);
}

/* A small choice at the start of the footer keeps its own width; the buttons go to the next line first. */
.ui-block-footer-select {
  width: auto;
  max-width: 100%;
  flex: none;
}

.ui-block-footer-select > .ui-select-trigger {
  width: auto;
  max-width: 100%;
}

/* A short block: the buttons share the title row, and go under it when the card is narrow. A body,
   an error or an outcome line goes under that row. */
.ui-block-card[data-inline-actions] > .ui-block-content {
  flex-flow: row wrap;
  align-items: center;
  column-gap: var(--openbot-space-4);
  padding-block: var(--openbot-space-3);
}

.ui-block-card[data-inline-actions] > .ui-block-content > .ui-block-header {
  flex: 1 1 240px;
}

.ui-block-card[data-inline-actions] > .ui-block-content > .ui-block-card-footer {
  flex: none;
  margin-inline-start: auto;
}

.ui-block-card[data-inline-actions] > .ui-block-content > :is(.ui-block-body, .ui-block-error, .ui-block-outcome) {
  flex-basis: 100%;
  order: 1;
}

/* The badge of a short block takes the place of the buttons: the icon and the badge are centered on
   the title and the subtitle, and the subtitle stops before the badge. */
.ui-block-card[data-inline-actions]
  .ui-block-header:has(> .ui-block-status):has(.ui-block-subtitle)
  > :is(.ui-block-icon, .ui-block-status) {
  grid-row: 1 / span 2;
  align-self: center;
}

.ui-block-card[data-inline-actions]
  .ui-block-header:has(> .ui-block-status):has(.ui-block-subtitle)
  .ui-block-subtitle {
  grid-row: 2;
  grid-column: -3 / -2;
}

/* A short block keeps the height of a title and a subtitle, so it does not get shorter when a closed
   block loses its subtitle. */
.ui-block-card[data-inline-actions] > .ui-block-content > .ui-block-header {
  min-height: calc(var(--openbot-leading-lg) + var(--openbot-space-0-5) + var(--openbot-leading-md));
}

/* The badge that replaces the buttons when the person answers or closes the block. */
.ui-block-card[data-settled] .ui-block-header > .ui-block-status {
  animation: ui-block-status-in var(--openbot-duration-overlay) var(--openbot-ease-out) both;
}

@keyframes ui-block-status-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}

/* The outcome of a short block takes the place of its buttons, so it has their size and shape, as the
   Connected button of a Marketplace suggestion. */
.ui-block-card[data-inline-actions] .ui-block-header > .ui-block-status {
  height: var(--openbot-control-md);
  padding-inline: var(--openbot-space-4);
  border-radius: var(--openbot-radius-pill);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}

/* An answer is a status: the same success fill as Connected. On-light text keeps AA on the dark-theme fill. */
.ui-block-card[data-inline-actions][data-status="answered"] .ui-block-header > .ui-block-status {
  border-color: transparent;
  background: var(--openbot-success);
  color: var(--openbot-text-on-light);
}

/* On-light text on the light-theme success fill is 3:1. The darker success-text fill keeps AA. */
:root[data-openbot-color-scheme="light"]
  .ui-block-card[data-inline-actions][data-status="answered"]
  .ui-block-header
  > .ui-block-status {
  background: var(--openbot-success-text);
}

/* Only an open block warns: a closed one has nothing left to press. */
.ui-block-card[data-danger][data-status="pending"] > .ui-block-content {
  border-color: var(--openbot-danger-border);
}

/* The line a frozen block ends with. */
/* One quiet line: the answer, or why there is none. The icon carries the color. */
.ui-block-outcome {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}

.ui-block-outcome[data-status="answered"] {
  color: var(--openbot-text-secondary);
}

.ui-block-outcome svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
}

.ui-block-outcome-check {
  color: var(--openbot-success-text);
}

.ui-block-outcome-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ui-block-error {
  min-width: 0;
  margin: 0;
  color: var(--openbot-danger-text);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  overflow-wrap: anywhere;
}

.ui-block-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--openbot-space-2);
}

/* The buttons stay on one row while they fit. When they do not fit, they fill each row, so the main
   button does not stand alone at the end of the next row. A row that fits gives them no space to fill. */
.ui-block-card-footer > .ui-block-actions {
  justify-content: flex-end;
  margin-inline-start: auto;
}

.ui-block-card-footer > .ui-block-actions > .ui-button {
  flex-grow: 1;
}

/* Every button of a block is a pill, also one that a block wraps in its own element. */
.ui-block-card .ui-block-actions .ui-button {
  border-radius: var(--openbot-radius-pill);
  padding-inline: var(--openbot-space-4);
  font-size: var(--openbot-text-md);
}

.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-confirm-step > .ui-block-actions {
  justify-content: flex-end;
}

.ui-block-hint,
.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;
}

/* A long draft stops at a fixed height. "Show all" under it opens the rest. */
.ui-block-preview {
  max-height: 16em;
  overflow-y: auto;
  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[data-expanded="true"] {
  max-height: none;
}

/* A cut-off draft does not scroll, so the chat is the only part that scrolls. `clip` also stops
   focus, find and selection from scrolling the box to a place that the user cannot scroll back from. */
.ui-block-preview[data-clamped="true"] {
  position: relative;
  overflow: clip;
}

/* The fade over the last line shows that the draft goes on. The border stays. */
.ui-block-preview[data-clamped="true"]::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2.5em;
  background: linear-gradient(to bottom, transparent, var(--openbot-bg-surface-raised));
  pointer-events: none;
}

/* The control that opens the rest of a long draft sits under it, at the start of the line. */
.ui-block-preview-toggle {
  align-self: flex-start;
  margin-top: calc(var(--openbot-space-2) * -1);
}

.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;
}

/* The hold fill grows from the start side. */
:dir(rtl) .ui-block-hold-fill {
  transform-origin: right;
}

.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: the option rows of an agent question. The rows reach into the padding, so their text
   lines up with the title. */
.ui-block-options {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-0-5);
  margin: 0 calc(-1 * var(--openbot-space-2));
  padding: 0;
  border: 0;
}

.ui-block-option {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 40px;
  /* A long meta wraps in its own column; it never takes the label's width. */
  grid-template-columns: 22px minmax(0, 1fr) fit-content(40%);
  align-items: center;
  gap: var(--openbot-space-3);
  border-radius: var(--openbot-radius-md);
  padding: var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  cursor: pointer;
  transition: background-color var(--openbot-duration-fast) ease-out;
}

.ui-block-option:hover:not([data-disabled]) {
  background: var(--openbot-question-option-soft);
}

.ui-block-option[data-checked] {
  background: var(--openbot-question-option-hover);
}

.ui-block-option:active:not([data-disabled]) {
  background: var(--openbot-question-option-pressed);
}

.ui-block-option[data-disabled] {
  cursor: default;
}

.ui-block-option[data-disabled]:not([data-checked]) {
  opacity: 0.5;
}

.ui-block-option:has(.ui-block-option-input:focus-visible) {
  background: var(--openbot-question-option-soft);
  box-shadow: inset 0 0 0 1px var(--openbot-question-option);
}

.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.ui-kbd {
  width: 22px;
  min-width: 22px;
  height: 22px;
  border-color: transparent;
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-question-badge-soft);
  color: var(--openbot-question-badge-text);
  font-family: var(--openbot-font-sans);
  font-weight: var(--openbot-weight-semibold);
  transition:
    background-color var(--openbot-duration-fast) ease-out,
    color var(--openbot-duration-fast) ease-out;
}

.ui-block-option[data-checked] .ui-block-option-key.ui-kbd {
  background: var(--openbot-question-option);
  color: var(--openbot-text-on-status);
}

.ui-block-option-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ui-block-option-meta {
  min-width: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* The last row of an old quick reply block takes an answer in words. */
.ui-block-option-custom {
  cursor: text;
}

.ui-block-option-custom:focus-within {
  background: var(--openbot-question-option-soft);
}

.ui-block-option-custom-input.ui-input {
  width: 100%;
  min-width: 0;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  color: var(--openbot-text-primary);
  font: inherit;
}

.ui-block-option-custom-input.ui-input::placeholder {
  color: var(--openbot-text-muted);
}

.ui-block-option-custom-input.ui-input:focus,
.ui-block-option-custom-input.ui-input:focus-visible {
  outline: 0;
  box-shadow: none;
}

/* 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);
}

/* An answered form that asked for a secret: a key before the title, and the answer as rows in one
   inset group, not as disabled inputs. */
.ui-block-header:has(> .ui-block-icon) {
  align-items: center;
}

.ui-block-answer-rows {
  display: flex;
  min-width: 0;
  flex-direction: column;
  margin: 0;
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-canvas);
}

.ui-block-answer-row {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--openbot-space-4);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}

.ui-block-answer-row + .ui-block-answer-row {
  border-top: 1px solid var(--openbot-border-grouped);
}

.ui-block-answer-row > dt {
  flex: none;
  color: var(--openbot-text-muted);
}

.ui-block-answer-row > dd {
  min-width: 0;
  margin: 0;
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
  text-align: end;
}

.ui-block-answer-value {
  overflow-wrap: anywhere;
}

.ui-block-answer-hidden {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  color: var(--openbot-text-dim);
  vertical-align: top;
}

.ui-block-answer-hidden > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: none;
  color: var(--openbot-text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .ui-block-option,
  .ui-block-option-key.ui-kbd,
  .ui-block-hold-fill {
    transition: none;
  }

  .ui-block-card[data-settled] .ui-block-header > .ui-block-status {
    animation: none;
  }
}

/* A narrow card: the badge goes on its own row under the subtitle, so the title keeps the width of the
   card, and the buttons fill the rows of the footer, so the main one is not alone at the end. */
@container ui-block (width < 360px) {
  .ui-block-card.ui-bubble > .ui-block-content > .ui-block-header:has(> .ui-block-status) {
    grid-template-columns: minmax(0, 1fr);
  }

  .ui-block-card.ui-bubble > .ui-block-content > .ui-block-header:has(> .ui-block-status):has(> .ui-block-icon) {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .ui-block-card.ui-bubble > .ui-block-content > .ui-block-header:has(> .ui-block-status) .ui-block-title {
    grid-row: 1;
    grid-column: -2 / -1;
  }

  .ui-block-card.ui-bubble > .ui-block-content > .ui-block-header:has(> .ui-block-status) .ui-block-subtitle {
    grid-row: 2;
    grid-column: -2 / -1;
  }

  .ui-block-card.ui-bubble > .ui-block-content > .ui-block-header:has(> .ui-block-status) > .ui-block-icon {
    grid-row: 1 / span 2;
    grid-column: 1;
    align-self: start;
  }

  .ui-block-card.ui-bubble > .ui-block-content > .ui-block-header:has(> .ui-block-status) > .ui-block-status {
    grid-row: 3;
    grid-column: -2 / -1;
    justify-self: start;
    align-self: start;
    margin-top: var(--openbot-space-1);
  }

  /* The outcome of a short block stays at the end, where its buttons were. */
  .ui-block-card.ui-bubble[data-inline-actions]
    > .ui-block-content
    > .ui-block-header:has(> .ui-block-status)
    > .ui-block-status {
    justify-self: end;
  }

  .ui-block-card.ui-bubble > .ui-block-content > .ui-block-card-footer > .ui-block-actions {
    flex: 1 1 100%;
    flex-wrap: wrap;
  }

  .ui-block-card.ui-bubble > .ui-block-content > .ui-block-card-footer > .ui-block-actions > .ui-button {
    flex: 1 1 auto;
  }
}


/* /@fs//home/ubuntu/openbot/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);
}

/* A short list fills the panel, so the effort row stays at the bottom, as high as the provider rail. */
.provider-model-scroll {
  flex: 1 1 auto;
  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//home/ubuntu/openbot/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-close {
  border-radius: var(--openbot-radius-sm);
}

.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-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-lg);
}

.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);
  inset-inline-end: 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 is a block, 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);

  color: var(--openbot-text-primary);
}

/* The site is never cut: the user checks it before the value goes there. */
.browser-secret-card .ui-block-subtitle {
  overflow-wrap: anywhere;
}

.browser-secret-fields {
  display: grid;
  min-width: 0;
}

.browser-secret-card[data-variant="island"] {
  display: grid;
  gap: var(--openbot-space-4);
  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-inline-start: 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-save-option {
  display: grid;
  gap: var(--openbot-space-0-5);
}

.browser-secret-save {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  font-size: var(--openbot-text-sm);
}

.browser-secret-save-server {
  font-weight: var(--openbot-weight-medium);
}

/* Under the label, past the box. */
.browser-secret-save-hint {
  margin: 0;
  padding-inline-start: calc(var(--openbot-icon-sm) + var(--openbot-space-1-5));
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}

.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);
}

/* The note keeps a readable width; the buttons go to the next row first. */
.browser-secret-card .ui-block-card-footer > .browser-secret-private {
  flex: 1 1 12rem;
}

.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//home/ubuntu/openbot/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. */
:root[data-surface="browser-dock"],
:root[data-surface="browser-dock"] body,
:root[data-surface="browser-dock"] #root {
  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. The dock is at the bottom of the page on
 * the end side, so the middle of the page, where most controls are, stays clear.
 */
.browser-dock {
  position: absolute;
  bottom: var(--openbot-space-4);
  inset-inline-end: var(--openbot-space-4);
  display: flex;
  width: min(560px, calc(100% - 2 * var(--openbot-space-4)));
  flex-direction: column;
  align-items: flex-end;
  gap: var(--openbot-space-2);
  isolation: isolate;
}

.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-tab 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"], [data-mode="prompt"], [data-mode="approval"]) {
  width: 100%;
  border-radius: var(--openbot-radius-lg);
}

/* The code card, the questions and the approval have a denser glass, so that the page under them does not
   show through as dark shapes behind the text. The code card is narrower than the reply. */
.browser-dock-island:is([data-mode="secret"], [data-mode="prompt"], [data-mode="approval"]) {
  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[data-mode="secret"] {
  width: min(100%, 420px);
}

.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 questions or the approval of the agent, as in the chat. A long card scrolls, so the page stays in view.
   The limit is not in vh: over a local page, the viewport is the overlay, which is only as tall as the dock. */
.browser-dock-island-card {
  display: grid;
  max-height: 420px;
  gap: var(--openbot-space-2);
  overflow: auto;
  padding: var(--openbot-space-3);
  color: var(--openbot-text-primary);
}

.browser-dock-island-card :is(.question-prompt-bubble, .ui-bubble-content, .approval-card) {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
}

.browser-dock-island-card > * {
  margin: 0;
}

/* 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-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-2) var(--openbot-space-1);
  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-inline-start: auto;
  border-radius: var(--openbot-radius-pill);
}

.browser-dock-island-reply {
  display: grid;
  gap: var(--openbot-space-1-5);
  padding-block: var(--openbot-space-2) var(--openbot-space-3);
  padding-inline: var(--openbot-space-3) var(--openbot-space-2);
  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-inline-start: auto;
}

.browser-dock-reply-body {
  max-height: 160px;
  padding-inline-end: 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-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-2) var(--openbot-space-1);
}

.browser-dock-avatar {
  width: 20px;
  height: 20px;
  flex: none;
}

/*
 * The user hid the box: a tab with the agent stays at the bottom edge, at the end of the box, clear of the
 * page. It has the height, the bottom line and the avatar inset of the field, so the glass of the field
 * shrinks into it and grows out of it.
 */
/* While the copy of its glass moves, the field draws no glass of its own. */
.browser-dock[data-glassless] .browser-dock-composer {
  border-color: transparent;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
}

.browser-dock-hide {
  border-radius: var(--openbot-radius-pill);
}

.browser-dock .browser-dock-tab {
  position: absolute;
  bottom: 0;
  overflow: hidden;
  max-width: min(360px, 100%);
  height: auto;
  box-sizing: border-box;
  justify-content: flex-start;
  padding-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-2) var(--openbot-space-3);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: inherit;
  gap: var(--openbot-space-2);
  inset-inline-end: 0;
  line-height: 1;
  white-space: nowrap;
}

/* Only the box, or only the tab, shows. */
.browser-dock:is([data-tucked], [data-phase="showing"]) > :not(.browser-dock-tab, .browser-dock-tuck-glass) {
  visibility: hidden;
}

.browser-dock:not([data-tucked]) > .browser-dock-tab {
  visibility: hidden;
}

/* The ghost button would draw its solid hover colour over the glass, and the tab would not match the box. */
.browser-dock .browser-dock-glass.browser-dock-tab:hover {
  background: var(--openbot-bg-glass);
}

/* As high as the send button, so the tab is as high as the field. */
.browser-dock-tab-avatar {
  position: relative;
  display: flex;
  height: 28px;
  flex: none;
  align-items: center;
}

/* A ring turns around the avatar while the agent works on the page. */
.browser-dock-tab-avatar[data-working]::after {
  position: absolute;
  border: 1.5px solid transparent;
  border-radius: var(--openbot-radius-pill);
  border-top-color: var(--openbot-accent);
  border-right-color: var(--openbot-accent);
  animation: ui-spin 900ms linear infinite;
  content: "";
  inset: 3px -1px;
}

/* A dot marks a reply or a question that the user did not see. */
.browser-dock-tab-avatar[data-unread]::after {
  position: absolute;
  top: 3px;
  right: -2px;
  width: 7px;
  height: 7px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
  content: "";
}

.browser-dock-tab-label {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
}

.browser-dock .browser-dock-tab .browser-dock-tab-chevron {
  flex: none;
  color: var(--openbot-text-secondary);
  transition: translate var(--openbot-duration-normal) var(--openbot-ease-out);
}

.browser-dock-tab:hover .browser-dock-tab-chevron {
  translate: 0 -2px;
}

/* The copy of the glass of the field, on its way between the field and the tab, under the field. */
.browser-dock-tuck-glass {
  z-index: 0;
  border-radius: var(--openbot-radius-pill);
}

/*
 * A hidden box keeps the width that it had open. The overlay over a page is only as wide as the tab, and
 * without this the box would get narrow too, so the field would grow into the wrong place.
 */
.browser-dock:is([data-tucked], [data-phase="showing"]) {
  width: var(--browser-dock-open-width, min(560px, calc(100% - 2 * var(--openbot-space-4))));
  /* The page under the hidden box gets the clicks where no overlay shrinks, as over a remote live view. */
  pointer-events: none;
}

.browser-dock[data-tucked] > .browser-dock-tab {
  pointer-events: auto;
}

.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-block: 0;
  padding-inline: var(--openbot-space-1-5) var(--openbot-space-2);
  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;
  }

  .browser-dock-tab-avatar[data-working]::after {
    animation: none;
  }
}


/* /@fs//home/ubuntu/openbot/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. `BrowserFullView` sets the body
 * attribute: a `body:has()` rule makes the browser restyle the whole page on each change in the chat.
 */
body[data-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-frame);
  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.
 * In a right-to-left language the group is at the top right (`src/main/window-buttons.ts`), so
 * the inset is at the inline start.
 */
.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;
  /* The fades, the drag and the scroll into view measure `scrollLeft` from the left edge
     (`BrowserTabStrip.tsx`), so the row keeps the left-to-right order in every language. */
  direction: ltr;
  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);
}

/* A tab of a named profile has a line in the profile's color under its title. */
.browser-full-chip[data-profile-color]::after {
  position: absolute;
  right: var(--openbot-space-2);
  bottom: 2px;
  left: var(--openbot-space-2);
  height: 2px;
  border-radius: var(--openbot-radius-pill);
  background: var(--browser-profile-color);
  content: "";
  pointer-events: none;
}

/* 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//home/ubuntu/openbot/packages/ui/src/features/billing/order-form.css */
/*
 * The order form of the pricing page and of Billing. The public site does not load the app's primitives or
 * transitions, so this file styles its own digits, buttons and hidden text. Every rule is scoped under `.order-form`.
 */

.order-form {
  /* The colour of the order. The pricing page sets it from the size of the order. */
  --order-accent: var(--openbot-accent);
  --order-spring: cubic-bezier(0.34, 1.36, 0.64, 1);
  --order-move: 300ms;
  --order-glow: 600ms;
  --order-pad: clamp(24px, 3vw, 36px);
  --order-radius-frame: 24px;
  --order-text-price: clamp(34px, 3.2vw, 44px);
  --order-text-choice-price: 26px;
  --order-text-line: 22px;
  --order-text-title: 20px;
  --order-text-label: 15px;
  --order-text-saving: 11px;
  --order-text-badge: 10px;
  /* The rolling digits of the app (`transitions.css`). */
  --order-digit-dur: 500ms;
  --order-digit-distance: 12px;
  --order-digit-stagger: 70ms;
  --order-digit-blur: 2px;
  --order-digit-ease: cubic-bezier(0.34, 1.45, 0.64, 1);
  container: order-form / inline-size;
}

/* The heading slot on the left and the switches on the right. */
.order-form-top {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 48px;
}

.order-form-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-inline-start: auto;
}

/* Month or year, and the currency: the same pill switch as the app's billing switch. */
.order-form-segment {
  position: relative;
  display: inline-grid;
  grid-template-columns: repeat(var(--order-count, 2), minmax(0, 1fr));
  min-width: 0;
  padding: 3px;
  /* Frosted glass: the glow behind it shows through, blurred. */
  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),
    0 8px 24px -12px var(--openbot-glass-shadow);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}

/* The light pill under the chosen option. It slides with a spring. */
.order-form-segment::before {
  position: absolute;
  top: 3px;
  bottom: 3px;
  inset-inline-start: 3px;
  width: calc((100% - 6px) / var(--order-count, 2));
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-surface-light);
  content: "";
  transform: translateX(calc(var(--order-index, 0) * 100%));
  transition: transform var(--order-move) var(--order-spring);
}

.order-form-segment:dir(rtl)::before {
  transform: translateX(calc(var(--order-index, 0) * -100%));
}

.order-form-segment[data-disabled] {
  opacity: 0.6;
}

.order-form-segment-option {
  position: relative;
  z-index: 1;
  display: grid;
}

.order-form-segment-label {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border-radius: var(--openbot-radius-pill);
  /* Primary text: the glow behind the glass can be bright. */
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--openbot-duration-slow) ease;
}

.order-form-segment-option[data-checked] .order-form-segment-label {
  color: var(--openbot-text-on-light);
}

.order-form-segment[data-disabled] .order-form-segment-label {
  cursor: not-allowed;
}

.order-form-segment-option:has(input:focus-visible) .order-form-segment-label {
  outline: 2px solid var(--openbot-accent-strong);
  outline-offset: 2px;
}

@keyframes order-form-pop {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

.order-form-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 9px;
  border-radius: var(--openbot-radius-pill);
  background: color-mix(in srgb, var(--order-accent) 18%, var(--openbot-transparent));
  /* The text mixes in the text colour, so a dark accent stays readable. */
  color: color-mix(in srgb, var(--order-accent) 65%, var(--openbot-text-primary));
  font-family: var(--openbot-font-mono);
  font-size: var(--order-text-badge);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    background-color var(--order-move) ease,
    color var(--order-move) ease;
}

.order-form-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin: 0;
}

.order-form-price-amount {
  color: var(--openbot-text-primary);
  font-size: var(--order-text-price);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.order-form-price-unit {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-lg);
}

/* Rolling digits, as the app's `t-digit` transition. A rise comes up from below; a fall comes down from above. */
@keyframes order-form-digit-in {
  0% {
    transform: translateY(calc(var(--order-digit-distance) * var(--digit-dir-y, 1)));
    opacity: 0;
    filter: blur(var(--order-digit-blur));
  }

  100% {
    transform: translateY(0);
    opacity: 1;
    filter: blur(0);
  }
}

.order-form .t-digit-group {
  display: inline-flex;
  /* The digits are flex items: a right-to-left page would put them in reverse order. */
  direction: ltr;
}

.order-form .t-digit-run {
  display: inline-flex;
}

.order-form .t-digit-word {
  white-space: pre;
}

.order-form .t-digit {
  display: inline-block;
}

/* `backwards`, not `both`: the group keeps `is-animating`, and a kept end frame (a transform and a blur filter)
   puts the digits on their own layer. Firefox then snaps them to another pixel row than the "€" beside them. */
.order-form .t-digit-group.is-animating .t-digit {
  animation: order-form-digit-in var(--order-digit-dur) var(--order-digit-ease) backwards;
}

.order-form .t-digit-group.is-animating .t-digit[data-stagger="1"] {
  animation-delay: var(--order-digit-stagger);
}

.order-form .t-digit-group.is-animating .t-digit[data-stagger="2"] {
  animation-delay: calc(var(--order-digit-stagger) * 2);
}

/* The colour of the order lights the edge of the form and spills under it as a glow. */
.order-form-frame {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(32px, 4vw, 48px);
  border: 1px solid color-mix(in srgb, var(--order-accent) 40%, var(--openbot-transparent));
  border-radius: var(--order-radius-frame);
  background: var(--openbot-bg-surface);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--order-accent) 12%, var(--openbot-transparent)),
    0 -1px 0 color-mix(in srgb, var(--order-accent) 60%, var(--openbot-transparent)),
    0 30px 120px -40px color-mix(in srgb, var(--order-accent) 55%, var(--openbot-transparent));
  overflow: hidden;
  transition:
    border-color var(--order-glow) var(--openbot-ease-out),
    box-shadow var(--order-glow) var(--openbot-ease-out);
}

/* A hairline of the accent colour along the top edge. */
.order-form-frame::after {
  position: absolute;
  top: 0;
  right: 20%;
  left: 20%;
  height: 1px;
  background: linear-gradient(90deg, var(--openbot-transparent), var(--order-accent), var(--openbot-transparent));
  content: "";
}

.order-form-half {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: var(--order-pad);
}

.order-form-half + .order-form-half {
  border-inline-start: 1px solid var(--openbot-border);
}

/* The yearly discount: a success-toned pill by the heading, lit when yearly billing is on. */
.order-form-half-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.order-form-half h2 {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--order-text-title);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.order-form-half-summary {
  margin: 8px 0 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-lg);
  line-height: 1.45;
}

.order-form-yearly,
.order-form-trial {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: var(--openbot-radius-pill);
  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: var(--openbot-text-sm);
  font-weight: 600;
  white-space: nowrap;
  transition: background-color var(--openbot-duration-slow) ease;
}

.order-form-trial {
  background: color-mix(in srgb, var(--openbot-success) 14%, var(--openbot-transparent));
}

.order-form-yearly[data-active] {
  background: color-mix(in srgb, var(--openbot-success) 14%, var(--openbot-transparent));
  animation: order-form-pop var(--order-move) var(--order-spring) 80ms both;
}

.order-form-saving {
  min-height: 20px;
  padding: 0 8px;
  font-size: var(--order-text-saving);
}

.order-form-choices {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}

.order-form-choice {
  position: relative;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-surface);
  transition:
    border-color var(--openbot-duration-slow) ease,
    background-color var(--openbot-duration-slow) ease;
}

.order-form-choice:hover {
  border-color: var(--openbot-border-strong);
}

/* The chosen row: four corner marks in the accent colour close in around it, like a selection in a game. */
.order-form-choice[data-checked] {
  border-color: color-mix(in srgb, var(--order-accent) 25%, var(--openbot-transparent));
  background-color: color-mix(in srgb, var(--order-accent) 5%, var(--openbot-bg-surface));
}

.order-form-choice::before {
  --order-mark: linear-gradient(var(--order-accent) 0 0);
  position: absolute;
  inset: -5px;
  background:
    var(--order-mark) top left / 14px 2px,
    var(--order-mark) top left / 2px 14px,
    var(--order-mark) top right / 14px 2px,
    var(--order-mark) top right / 2px 14px,
    var(--order-mark) bottom left / 14px 2px,
    var(--order-mark) bottom left / 2px 14px,
    var(--order-mark) bottom right / 14px 2px,
    var(--order-mark) bottom right / 2px 14px;
  background-repeat: no-repeat;
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: scale(1.04);
  transition:
    opacity var(--openbot-duration-slow) ease,
    transform var(--order-move) var(--order-spring);
}

.order-form-choice[data-checked]::before {
  opacity: 1;
  transform: scale(1);
}

.order-form-choice:has(> input:focus-visible) {
  outline: 2px solid var(--openbot-accent-strong);
  outline-offset: 2px;
}

.order-form-choice-label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  cursor: pointer;
}

.order-form-choice[data-disabled] {
  opacity: 0.5;
}

.order-form-choice[data-disabled] .order-form-choice-label {
  cursor: not-allowed;
}

.order-form-choice-dot {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
  transition: border-color var(--openbot-duration-slow) ease;
}

.order-form-choice-dot::after {
  position: absolute;
  inset: 3px;
  border-radius: var(--openbot-radius-pill);
  background: var(--order-accent);
  content: "";
  transform: scale(0);
  transition: transform var(--order-move) var(--order-spring);
}

.order-form-choice[data-checked] .order-form-choice-dot {
  border-color: var(--order-accent);
}

.order-form-choice[data-checked] .order-form-choice-dot::after {
  transform: scale(1);
}

.order-form-row-name {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.order-form-row-name strong {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-xl);
}

.order-form-row-name span:last-child {
  flex-basis: 100%;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: 1.4;
}

.order-form-choice-price {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: end;
}

.order-form-choice-amount {
  display: inline-flex;
  align-items: center;
  color: var(--openbot-text-primary);
  font-size: var(--order-text-choice-price);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.order-form-choice-price .order-form-price-unit {
  font-size: var(--openbot-text-sm);
}

/* The monthly price, struck through in yearly billing. It opens to its own width, so the price beside it moves smoothly. */
.order-form-was {
  display: inline-grid;
  grid-template-columns: 0fr;
  opacity: 0;
  transition:
    grid-template-columns var(--order-move) ease,
    opacity var(--openbot-duration-slow) ease;
}

.order-form-was[data-shown] {
  grid-template-columns: 1fr;
  opacity: 1;
}

.order-form-was > span {
  min-width: 0;
  overflow: hidden;
}

.order-form-was s {
  display: inline-block;
  margin-inline-end: 8px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-xl);
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.order-form-stepper {
  position: relative;
  display: flex;
  min-width: 0;
  margin: 0;
  border: 0;
  align-items: center;
  gap: 12px;
  padding-block: 0 16px;
  padding-inline: 50px 18px;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-variant-numeric: tabular-nums;
}

.order-form-stepper > span {
  min-width: 84px;
  text-align: center;
}

.order-form-stepper .order-form-step {
  display: inline-grid;
  width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-primary);
  font: inherit;
  font-size: var(--openbot-text-xl);
  cursor: pointer;
  transition:
    background-color var(--openbot-duration-fast) ease,
    opacity var(--openbot-duration-fast) ease,
    transform var(--openbot-duration-fast) ease;
}

.order-form-stepper .order-form-step:hover:not(:disabled) {
  background: var(--openbot-bg-surface-raised);
}

.order-form-stepper .order-form-step:active:not(:disabled) {
  transform: scale(0.94);
}

.order-form-stepper .order-form-step:disabled {
  opacity: 0.4;
  cursor: default;
}

.order-form-stepper .order-form-step:focus-visible {
  outline: 2px solid var(--openbot-accent-strong);
  outline-offset: 2px;
}

/* The summary: each part under its own half, then the total and the buttons in one row under both. */
.order-form-summary {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--openbot-border);
}

/* Without server plans the license fills the form. */
.order-form:not([data-servers]) .order-form-frame,
.order-form:not([data-servers]) .order-form-summary {
  grid-template-columns: minmax(0, 1fr);
}

.order-form-summary-lines {
  display: grid;
  grid-row: 1;
  align-content: start;
  margin: 0;
  padding: 14px var(--order-pad);
  list-style: none;
  transition: padding var(--order-move) ease;
}

/* A half with nothing chosen takes no room. */
.order-form-summary-lines:not(:has([data-open])) {
  padding-block: 0;
}

.order-form-summary-server {
  grid-column: 1;
}

.order-form-summary-license {
  grid-column: 2;
}

.order-form-summary-license:has([data-open]) {
  border-inline-start: 1px solid var(--openbot-border);
}

.order-form:not([data-servers]) .order-form-summary-license {
  grid-column: 1;
  border-inline-start: 0;
}

.order-form-summary-personal {
  grid-column: 1 / -1;
}

/* A line opens to its own height and closes to none, so the total moves smoothly. */
.order-form-summary-line {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows var(--order-move) ease,
    opacity var(--openbot-duration-slow) ease;
}

.order-form-summary-line[data-open] {
  grid-template-rows: 1fr;
  opacity: 1;
}

.order-form-summary-line > div {
  min-height: 0;
  overflow: hidden;
}

.order-form-summary-line > div > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 6px 0;
  color: var(--openbot-text-secondary);
  font-size: var(--order-text-label);
}

.order-form-summary-line > div > div > span:last-child {
  color: var(--openbot-text-primary);
  font-size: var(--order-text-line);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Discounts are smaller, success-toned lines under the part that they come off. */
.order-form-summary-line[data-minus] > div > div {
  padding: 2px 0;
  font-size: var(--openbot-text-lg);
}

.order-form-summary-line[data-minus] > div > div > span:last-child {
  color: var(--openbot-success);
  font-size: var(--openbot-text-lg);
  font-weight: 400;
  letter-spacing: 0;
}

/* A gap after the minus sign, so its bar does not run into the bars of "€". */
.order-form-summary-line[data-minus] .t-digit-group {
  margin-left: 0.12em;
}

.order-form-total {
  display: flex;
  grid-column: 1 / -1;
  grid-row: 2;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  padding: 20px var(--order-pad);
  border-top: 1px solid var(--openbot-border);
  background: var(--openbot-bg-surface-raised);
}

.order-form-total-label {
  color: var(--openbot-text-secondary);
  font-size: var(--order-text-label);
  font-weight: 500;
}

.order-form-total .order-form-price {
  margin-inline-end: auto;
}

.order-form-action {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@container order-form (max-width: 760px) {
  .order-form-controls {
    justify-content: flex-start;
    margin-inline-start: 0;
  }

  .order-form-frame,
  .order-form-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .order-form-half + .order-form-half {
    border-top: 1px solid var(--openbot-border);
    border-inline-start: 0;
  }

  .order-form-summary-lines {
    grid-column: 1;
    grid-row: auto;
  }

  .order-form-summary-license:has([data-open]) {
    border-top: 1px solid var(--openbot-border);
    border-inline-start: 0;
  }

  .order-form-total {
    grid-row: auto;
  }

  .order-form-action {
    width: 100%;
  }

  .order-form-choice-label {
    padding: 14px;
  }

  .order-form-choice-amount {
    flex-direction: column;
    align-items: flex-end;
  }

  .order-form-was s {
    margin-inline-end: 0;
    font-size: var(--openbot-text-md);
  }

  .order-form-choice-price .order-form-price-unit {
    max-width: 84px;
  }

  .order-form-stepper {
    padding-block: 0 14px;
    padding-inline: 46px 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .order-form-segment::before,
  .order-form-segment-label,
  .order-form-frame,
  .order-form-choice,
  .order-form-choice::before,
  .order-form-choice-dot::after,
  .order-form-summary-lines,
  .order-form-summary-line,
  .order-form-yearly,
  .order-form-was,
  .order-form-stepper .order-form-step {
    transition: none;
  }

  .order-form-yearly[data-active],
  .order-form .t-digit-group.is-animating .t-digit {
    animation: none;
  }
}


/* /@fs//home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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-in: cubic-bezier(0.4, 0, 1, 1);
    --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;
  }
  .relative {
    position: relative;
  }
  .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;
  }
  .h-1 {
    height: var(--spacing);
  }
  .h-2 {
    height: calc(var(--spacing) * 2);
  }
  .h-3 {
    height: calc(var(--spacing) * 3);
  }
  .h-4 {
    height: calc(var(--spacing) * 4);
  }
  .h-5 {
    height: calc(var(--spacing) * 5);
  }
  .h-6 {
    height: calc(var(--spacing) * 6);
  }
  .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;
  }
  .italic {
    font-style: italic;
  }
  .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) !important;
    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,) !important;
  }
  .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 {
    --tw-ease: var(--ease-in);
    transition-timing-function: var(--ease-in);
  }
  .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-frame: #0d0d0d;
  --openbot-bg-sheet-inset: #101010;
  --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-wash-front: linear-gradient(
    to top,
    rgba(111, 255, 196, 0),
    #6fffc4 20%,
    #6db8ff 38%,
    #bb66ff 56%,
    #ff66c0 74%,
    #ffb875 88%,
    rgba(255, 184, 117, 0)
  );
  --openbot-color-picker-light: #ffffff;
  --openbot-color-picker-dark: #000000;
  --openbot-color-picker-spectrum: linear-gradient(
    to right,
    #ff0000,
    #ffff00,
    #00ff00,
    #00ffff,
    #0000ff,
    #ff00ff,
    #ff0000
  );
  --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: var(--openbot-text-muted);
  --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-paper: #f0f0f0;
  --openbot-paper-text: #141414;
  --openbot-paper-text-muted: rgba(20, 20, 20, 0.52);
  --openbot-paper-text-dim: rgba(20, 20, 20, 0.36);
  --openbot-paper-border: rgba(20, 20, 20, 0.14);
  --openbot-onboarding-desktop-mist: #dbe9ff;
  --openbot-onboarding-desktop-blue: #7eb4f2;
  --openbot-onboarding-desktop-indigo: #6f7de8;
  --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-felt-plum-top: rgb(112 80 131);
  --openbot-felt-plum-bottom: rgb(74 40 92);
  --openbot-felt-raspberry-top: rgb(245 32 112);
  --openbot-felt-raspberry-bottom: rgb(180 6 65);
  --openbot-felt-amber-top: rgb(255 149 17);
  --openbot-felt-amber-bottom: rgb(203 104 12);
  --openbot-felt-cream: #f6efe2;
  --openbot-felt-cream-stroke: #efe4d2;
  --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-star: #facc15;
  --openbot-star-edge: #ca8a04;
  --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-menu: rgba(0, 0, 0, 0.45);
  --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-default: "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Arabic", sans-serif;
  --openbot-font-mono-default: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
  --openbot-font-sans: var(--openbot-font-sans-default);
  --openbot-font-mono: var(--openbot-font-mono-default);
  --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, 3.5cqi, 2.75rem);
  --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: 2;
  --openbot-icon-stroke-lg: 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-show-delay: 750ms;
  --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 1px var(--openbot-border-focus);
  --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="kimi"] {
  --openbot-provider-current: var(--openbot-text-primary);
}
[data-provider="devin"] {
  --openbot-provider-current: var(--openbot-text-primary);
}
[data-provider="copilot"] {
  --openbot-provider-current: var(--openbot-text-primary);
}
[data-provider="mistral"] {
  --openbot-provider-current: var(--openbot-text-primary);
}
[data-provider="acp"] {
  --openbot-provider-current: var(--openbot-text-primary);
}
:root[data-openbot-color-scheme="light"] {
  color-scheme: light;
  --openbot-bg-canvas: #f5f5f6;
  --openbot-bg-canvas-clear: rgba(245, 245, 246, 0);
  --openbot-bg-frame: #e8e8eb;
  --openbot-bg-sidebar: #f5f5f6;
  --openbot-bg-native-sidebar: #f5f5f6;
  --openbot-bg-sheet: #ffffff;
  --openbot-bg-sheet-inset: #f0f0f2;
  --openbot-bg-grouped: #ffffff;
  --openbot-text-grouped-secondary: #6b6b70;
  --openbot-border-grouped: #e3e3e6;
  --openbot-marketplace-detail-bg: #ececee;
  --openbot-bg-surface: #ffffff;
  --openbot-bg-surface-raised: #fcfcfc;
  --openbot-bg-control: #ffffff;
  --openbot-bg-control-hover: #f0f0f2;
  --openbot-bg-control-active: #e8e8eb;
  --openbot-tabs-bar-bg: #ececee;
  --openbot-tabs-pill-bg: #ffffff;
  --openbot-bg-overlay: rgba(245, 245, 246, 0.92);
  --openbot-dialog-overlay: rgba(20, 20, 20, 0.12);
  --openbot-dialog-ring: rgba(20, 20, 20, 0.1);
  --openbot-bg-glass: rgba(255, 255, 255, 0.76);
  --openbot-glass-surface: rgba(20, 20, 20, 0.04);
  --openbot-glass-surface-hover: rgba(20, 20, 20, 0.07);
  --openbot-glass-border: rgba(20, 20, 20, 0.12);
  --openbot-glass-highlight: rgba(255, 255, 255, 0.6);
  --openbot-glass-shadow: transparent;
  --openbot-scroll-edge-overlay: rgba(245, 245, 246, 0.72);
  --openbot-border: rgba(20, 20, 20, 0.07);
  --openbot-border-strong: rgba(20, 20, 20, 0.1);
  --openbot-image-outline: rgba(20, 20, 20, 0.1);
  --openbot-hover: rgba(20, 20, 20, 0.05);
  --openbot-text-primary: #141414;
  --openbot-text-secondary: #3a3a3c;
  --openbot-text-muted: #6b6b70;
  --openbot-text-dim: #8e8e93;
  --openbot-text-placeholder: #5c5c61;
  --openbot-text-readable: rgba(20, 20, 20, 0.6);
  --openbot-settings-text-muted: rgba(20, 20, 20, 0.6);
  --openbot-surface-light: #1c1c1e;
  --openbot-text-on-light: #ffffff;
  --openbot-text-muted-on-light: rgba(255, 255, 255, 0.64);
  --openbot-text-dim-on-light: rgba(255, 255, 255, 0.4);
  --openbot-border-on-light: rgba(255, 255, 255, 0.16);
  --openbot-accent-hover: #006ad4;
  --openbot-accent-text: #0064c8;
  --openbot-accent-soft: rgba(0, 124, 247, 0.12);
  --openbot-accent-strong: rgba(0, 124, 247, 0.26);
  --openbot-chart-series-codex: #8e4fc0;
  --openbot-chart-series-grok: #16849b;
  --openbot-chart-storage-workspaces: #2f74c9;
  --openbot-chart-storage-files: #c64d1d;
  --openbot-chart-storage-chats: #148a61;
  --openbot-chart-storage-downloads: #6f62d6;
  --openbot-chart-storage-runtimes: #a86f00;
  --openbot-success: #1fa85a;
  --openbot-success-text: #187a41;
  --openbot-success-soft: rgba(31, 168, 90, 0.12);
  --openbot-success-wash: rgba(31, 168, 90, 0.06);
  --openbot-warning: #f08a00;
  --openbot-warning-text: #9c5200;
  --openbot-warning-soft: rgba(240, 138, 0, 0.14);
  --openbot-approval-badge-soft: rgba(240, 138, 0, 0.18);
  --openbot-danger: #e8222d;
  --openbot-danger-hover: #f04a53;
  --openbot-danger-text: #c0141d;
  --openbot-danger-soft: rgba(232, 34, 45, 0.12);
  --openbot-danger-soft-hover: rgba(232, 34, 45, 0.2);
  --openbot-danger-focus: rgba(232, 34, 45, 0.36);
  --openbot-danger-border: rgba(232, 34, 45, 0.45);
  --openbot-question-option: #16849b;
  --openbot-question-option-soft: rgba(22, 132, 155, 0.12);
  --openbot-question-option-hover: rgba(22, 132, 155, 0.18);
  --openbot-question-option-pressed: rgba(22, 132, 155, 0.24);
  --openbot-question-badge-text: #0f6a7d;
  --openbot-question-badge-soft: rgba(22, 132, 155, 0.14);
  --openbot-message-badge-text: #0a5fb8;
  --openbot-message-badge-soft: rgba(0, 124, 247, 0.12);
  --openbot-badge-new: #e0004a;
  --openbot-badge-new-soft: rgba(224, 0, 74, 0.12);
  --openbot-file-blue: #1a66c4;
  --openbot-file-blue-soft: rgba(31, 111, 209, 0.12);
  --openbot-file-yellow: #9c5200;
  --openbot-file-yellow-soft: rgba(240, 138, 0, 0.14);
  --openbot-file-orange: #a8521a;
  --openbot-file-orange-soft: rgba(181, 90, 31, 0.12);
  --openbot-file-teal: #127589;
  --openbot-file-teal-soft: rgba(22, 132, 155, 0.12);
  --openbot-file-green: #187a41;
  --openbot-file-green-soft: rgba(31, 168, 90, 0.12);
  --openbot-file-red: #c0141d;
  --openbot-file-red-soft: rgba(232, 34, 45, 0.12);
  --openbot-file-pink: #a3478f;
  --openbot-file-pink-soft: rgba(163, 71, 143, 0.12);
  --openbot-file-default: #0064c8;
  --openbot-file-default-soft: rgba(0, 124, 247, 0.12);
  --openbot-data-table-border: #e3e3e6;
  --openbot-data-table-header-text: #6b6b70;
  --openbot-data-table-text: #1c1c1e;
  --openbot-data-table-outer-border: rgba(20, 20, 20, 0);
  --openbot-data-table-ring: rgba(20, 20, 20, 0.1);
  --openbot-shadow-popover-ambient: transparent;
  --openbot-shadow-dialog: transparent;
  --openbot-shadow-menu: transparent;
  --openbot-shadow-ring: rgba(20, 20, 20, 0.04);
  --openbot-shadow-overlay: 0 0 0 transparent;
}
.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"]:where([data-blink]) .app-logo-eye {
  animation: app-logo-blink 192ms cubic-bezier(0.77, 0, 0.175, 1);
}
.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%, 100% {
    transform: scaleY(1);
  }
  50% {
    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 > svg[width="24"]) {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
:where(.ui-button-size-xs > svg[width="24"], .ui-button-size-sm > svg[width="24"]) {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
: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)[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;
  inset-inline-end: -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-inline-start: var(--openbot-space-1-5);
}
:where(.z-badge):has(> [data-icon="inline-end"]) {
  padding-inline-end: 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(svg.lucide) {
  stroke-width: var(--openbot-icon-stroke);
}
: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%;
}
.ui-textarea-resizable {
  position: relative;
  display: grid;
}
.ui-textarea-resizer {
  --ui-textarea-grip: var(--openbot-text-dim);
  position: absolute;
  inset-inline-end: 1px;
  bottom: 1px;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 0;
  border-end-end-radius: var(--openbot-radius-md);
  padding: 0;
  background-image: linear-gradient( 135deg, transparent 48%, var(--ui-textarea-grip) 48% 56%, transparent 56% 68%, var(--ui-textarea-grip) 68% 76%, transparent 76% );
  background-repeat: no-repeat;
  background-position: right 3px bottom 3px;
  background-size: 12px 12px;
  cursor: ns-resize;
  touch-action: none;
  user-select: none;
}
.ui-textarea-resizer:hover, .ui-textarea-resizer:focus-visible, .ui-textarea-resizer[data-active] {
  --ui-textarea-grip: var(--openbot-text-primary);
}
.ui-textarea-resizer:focus-visible {
  outline: 0;
}
.ui-textarea-resizer:dir(rtl) {
  scale: -1 1;
}
html.ui-textarea-resizing {
  cursor: ns-resize;
  user-select: none;
}
: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);
}
: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-block: var(--openbot-space-2);
  padding-inline: 10px var(--openbot-space-2);
  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: start;
  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-focus);
  outline: 0;
}
.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-search-select-content {
  display: flex;
  flex-direction: column;
  width: max(var(--kb-popper-anchor-width, 0px), 240px);
  overflow: hidden;
  transform-origin: var(--kb-popover-content-transform-origin);
}
.ui-search-select-search {
  position: relative;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--openbot-border);
  padding: var(--openbot-space-1);
}
.ui-search-select-search > svg {
  position: absolute;
  top: 50%;
  inset-inline-start: var(--openbot-space-3);
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
  transform: translateY(-50%);
  pointer-events: none;
}
.ui-search-select-input {
  width: 100%;
  padding-inline-start: var(--openbot-space-8);
}
.ui-search-select-root {
  min-height: 0;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}
.ui-search-select-content .ui-select-listbox {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
}
.ui-search-select-empty {
  margin: 0;
  padding: var(--openbot-space-2) var(--openbot-space-3);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.ui-select-footer {
  border-top: 1px solid var(--openbot-border);
  padding: var(--openbot-space-1);
}
.ui-select-section {
  padding: var(--openbot-space-2) 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);
  list-style: none;
}
.ui-select-item {
  position: relative;
  display: flex;
  align-items: center;
  cursor: default;
  user-select: none;
  border-radius: var(--openbot-radius-sm);
  outline: 0;
  padding-block: var(--openbot-space-1-5);
  padding-inline: var(--openbot-space-2) var(--openbot-space-8);
  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;
  inset-inline-end: 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-inline-start: 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-field-limit {
  display: grid;
  gap: var(--openbot-space-0-5);
}
.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);
}
:where(.ui-item-media) > svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  stroke-width: var(--openbot-icon-stroke-lg);
}
.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-paper-text);
  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-progress-fill[data-indeterminate]:dir(rtl) {
  animation-name: ui-progress-travel-rtl;
}
@keyframes ui-progress-travel-rtl {
  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] {
  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-card);
}
.ui-toaster [data-sonner-toast][data-styled="true"] {
  --ui-toast-tone: transparent;
  --ui-toast-motion-duration: var(--openbot-duration-toast-enter);
  --toast-svg-margin-start: 0px;
  --toast-svg-margin-end: 0px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) max-content max-content;
  align-items: start;
  column-gap: 0;
  row-gap: var(--openbot-space-3);
  min-height: var(--openbot-control-xl);
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border-color: transparent;
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-surface-raised);
  box-shadow: 0 0 0 1px var(--openbot-border);
  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"]:has([data-button]) {
  padding-bottom: var(--openbot-space-2);
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-content] {
  grid-area: 1 / 2 / 2 / -1;
  gap: var(--openbot-space-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: 3;
  justify-self: end;
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-action] {
  grid-column: 4;
}
.ui-toaster [data-sonner-toast][data-styled="true"]:has([data-cancel]) [data-action] {
  margin-inline-start: var(--openbot-space-1);
}
.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-inline-end: var(--openbot-space-1);
}
.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);
  text-wrap: balance;
}
.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-block: 1px 0;
  margin-inline: 0 var(--openbot-space-3);
}
.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-sm);
  margin: 0;
  border: 1px solid transparent;
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-surface-light);
  box-shadow: none;
  padding-inline: var(--openbot-space-3);
  color: var(--openbot-text-on-light);
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  transition: background-color var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease, transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.ui-toaster [data-sonner-toast][data-styled="true"] [data-button]:last-of-type {
  margin-inline-end: calc(var(--openbot-space-2) - var(--openbot-space-4));
}
.ui-toaster[data-sonner-toaster][data-sonner-theme] [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, .ui-toast-card-close: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], .ui-toast-card-close {
  position: absolute;
  top: calc(-1 * var(--openbot-space-1-5));
  inset-inline-end: calc(-1 * var(--openbot-space-1-5));
  inset-inline-start: auto;
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  border: 0;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface-raised);
  box-shadow: 0 0 0 1px var(--openbot-border-strong);
  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, .ui-toast-card-close::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], .ui-toast-card-close {
    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, [data-sonner-toast]:hover .ui-toast-card-close, [data-sonner-toast]:focus-within .ui-toast-card-close {
    pointer-events: auto;
    opacity: 1;
  }
  .ui-toaster [data-sonner-toast][data-styled="true"] [data-action]:hover {
    background: var(--openbot-surface-light);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--openbot-surface-light) 82%, transparent);
    }
  }
  .ui-toaster[data-sonner-toaster][data-sonner-theme] [data-sonner-toast][data-styled="true"] [data-cancel]:hover {
    background: var(--openbot-bg-control-hover);
    color: var(--openbot-text-primary);
  }
  .ui-toaster [data-sonner-toast][data-styled="true"] [data-close-button]:hover:not(:focus-visible), .ui-toast-card-close:hover:not(:focus-visible) {
    background: var(--openbot-bg-control-active);
    color: var(--openbot-text-primary);
  }
}
@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, .ui-toast-card-close:active {
  transform: scale(0.96);
}
.ui-toast-card-close > svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.ui-toast-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--openbot-space-1);
  margin-inline-end: calc(var(--openbot-space-2) - var(--openbot-space-4));
}
.ui-toast-card-actions .ui-button {
  height: var(--openbot-control-sm);
  border-radius: var(--openbot-radius-sm);
  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, transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.ui-toast-card-actions .ui-button-variant-ghost {
  color: var(--openbot-text-secondary);
}
.ui-toast-card-actions .ui-button:active {
  transform: scale(0.96);
}
@media (hover: hover) and (pointer: fine) {
  .ui-toast-card-actions .ui-button-variant-ghost:hover {
    background: var(--openbot-bg-control-hover);
    color: var(--openbot-text-primary);
  }
}
.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-plush-loader {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: flex-end;
  gap: calc(var(--ui-plush-size) * 0.18);
}
.ui-plush-loader[data-layout="stack"] {
  flex-direction: column;
  align-items: center;
  gap: calc(var(--ui-plush-size) * 0.3);
}
.ui-plush-mascot {
  --ui-plush-look: calc(var(--ui-plush-size) * 0.035);
  position: relative;
  display: block;
  width: var(--ui-plush-size);
  flex: 0 0 auto;
}
.ui-plush-body {
  position: relative;
  display: block;
  transform-origin: 50% 100%;
}
.ui-plush-body-image, .ui-plush-ball {
  display: block;
  width: 100%;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}
.ui-plush-eyes, .ui-plush-eye {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}
.ui-plush-eye {
  transform-origin: 35.6% 48.1%;
  transition: scale var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.ui-plush-eye[data-side="right"] {
  transform-origin: 64.4% 48.1%;
}
.ui-plush-mascot[data-face="wide"] .ui-plush-eye {
  scale: 1.18;
}
.ui-plush-balls {
  display: flex;
  gap: calc(var(--ui-plush-size) * 0.08);
  padding-bottom: calc(var(--ui-plush-size) * 0.04);
}
.ui-plush-ball {
  width: calc(var(--ui-plush-size) * 0.24);
  transform-origin: 50% 100%;
}
.ui-plush-loader[data-layout="stack"] .ui-plush-balls {
  padding-bottom: 0;
}
.ui-plush-loader[data-layout="stack"] .ui-plush-ball {
  width: calc(var(--ui-plush-size) * 0.2);
}
@media (prefers-reduced-motion: no-preference) {
  .ui-plush-body {
    animation: ui-plush-breathe 3.2s ease-in-out 600ms infinite;
  }
  .ui-plush-eye {
    animation: ui-plush-blink 5.2s ease-in-out 1.8s infinite;
  }
  .ui-plush-eyes {
    animation: ui-plush-look 6s ease-in-out 2.2s infinite;
  }
  .ui-plush-mascot[data-face="wink"] .ui-plush-eye[data-side="left"] {
    animation: ui-plush-wink 600ms var(--openbot-ease-out);
  }
  .ui-plush-mascot[data-face="happy"] .ui-plush-eye {
    animation: ui-plush-squint 220ms var(--openbot-ease-out) forwards;
  }
  .ui-plush-loader > .ui-plush-mascot {
    animation: ui-plush-pop-in 520ms var(--openbot-ease-out) both;
  }
  .ui-plush-loader .ui-plush-eyes {
    animation: ui-plush-follow 1.2s ease-in-out 700ms infinite;
  }
  .ui-plush-ball {
    animation: ui-plush-pop-in 360ms var(--openbot-ease-out) 300ms backwards, ui-plush-ball-bounce 1.2s ease-in-out 700ms infinite;
  }
  .ui-plush-ball:nth-child(2) {
    animation-delay: 380ms, 850ms;
  }
  .ui-plush-ball:nth-child(3) {
    animation-delay: 460ms, 1s;
  }
}
@keyframes ui-plush-pop-in {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
}
@keyframes ui-plush-breathe {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.012, 0.978);
  }
}
@keyframes ui-plush-blink {
  0%, 93%, 100% {
    transform: scaleY(1);
  }
  96% {
    transform: scaleY(0.1);
  }
}
@keyframes ui-plush-wink {
  0%, 100% {
    transform: scaleY(1);
  }
  30%, 60% {
    transform: scaleY(0.1);
  }
}
@keyframes ui-plush-squint {
  to {
    transform: translateY(-1.5%) scaleY(0.35);
  }
}
@keyframes ui-plush-look {
  0%, 28%, 86%, 100% {
    transform: translate(0, 0);
  }
  34%, 50% {
    transform: translate(calc(var(--ui-plush-look) * -1), calc(var(--ui-plush-look) * 0.2));
  }
  58%, 78% {
    transform: translate(var(--ui-plush-look), calc(var(--ui-plush-look) * -0.3));
  }
}
@keyframes ui-plush-follow {
  0%, 18% {
    transform: translate(calc(var(--ui-plush-look) * -0.9), calc(var(--ui-plush-look) * 0.6));
  }
  32% {
    transform: translate(0, calc(var(--ui-plush-look) * 0.6));
  }
  46%, 70% {
    transform: translate(calc(var(--ui-plush-look) * 0.9), calc(var(--ui-plush-look) * 0.6));
  }
  100% {
    transform: translate(calc(var(--ui-plush-look) * -0.9), calc(var(--ui-plush-look) * 0.6));
  }
}
@keyframes ui-plush-ball-bounce {
  0%, 60%, 100% {
    transform: translateY(0) scale(1);
  }
  22% {
    transform: translateY(-110%) scale(0.95, 1.06);
  }
  42% {
    transform: translateY(0) scale(1.14, 0.84);
  }
  50% {
    transform: translateY(0) scale(1);
  }
}
.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;
  }
}
:where( svg:is( [class~="lucide-chevron-left"], [class~="lucide-chevron-right"], [class~="lucide-chevrons-left"], [class~="lucide-chevrons-right"], [class~="lucide-arrow-left"], [class~="lucide-arrow-right"], [class~="lucide-arrow-right-to-line"], [class~="lucide-panel-left"], [class~="lucide-panel-right"], [class~="lucide-undo-2"], [class~="lucide-redo-2"], [class~="lucide-log-in"], [class~="lucide-log-out"], [class~="lucide-corner-down-left"], [class~="lucide-message-square-reply"], .ui-rtl-mirror ):dir(rtl):not(.ui-kbd *) ) {
  transform: scaleX(-1);
}
.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;
  direction: ltr;
  unicode-bidi: isolate;
}
.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;
  }
}
:root[data-openbot-software-rendering] *, :root[data-openbot-software-rendering] *::before, :root[data-openbot-software-rendering] *::after {
  backdrop-filter: none !important;
}
.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 {
  --agent-avatar-outline: var(--openbot-bg-sidebar);
  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-lg);
}
.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-block: var(--openbot-space-3);
  padding-inline: var(--openbot-space-8) var(--openbot-space-4);
  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: start;
  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-inline-start-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 {
  inset-inline-start: var(--openbot-space-3);
}
.ui-bubble-reactions-align-end {
  inset-inline-end: 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;
}
.ui-toaster [data-sonner-toast], .ui-toaster [data-sonner-toast]::after {
  -webkit-app-region: no-drag;
}
.otp-input {
  display: grid;
  gap: 10px;
  justify-items: center;
}
.otp-input-fieldset {
  position: relative;
  direction: ltr;
  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;
  direction: ltr;
  unicode-bidi: isolate;
}
.t-digit-run {
  display: inline-flex;
  align-items: baseline;
}
.t-digit-word {
  white-space: pre;
}
.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[data-page-id="1"]:dir(rtl) {
  --t-page-from-x: var(--page-slide-distance);
}
.t-page-slide .t-page[data-page-id="2"]:dir(rtl) {
  --t-page-from-x: calc(var(--page-slide-distance) * -1);
}
.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;
  }
}
.theme-sweep-canvas {
  position: fixed;
  inset: 0;
  inline-size: 100vw;
  block-size: 100vh;
  pointer-events: none;
  view-transition-name: theme-sweep;
}
.theme-sweep-beam {
  position: fixed;
  inset: 0;
  z-index: calc(var(--openbot-layer-tooltip) + 1);
  inline-size: 100vw;
  block-size: 100vh;
  pointer-events: none;
}
.theme-sweep-ripple {
  position: absolute;
  inline-size: 0;
  block-size: 0;
}
html:active-view-transition-type(theme-sweep)::view-transition-group(*), html:active-view-transition-type(theme-sweep)::view-transition-old(*), html:active-view-transition-type(theme-sweep)::view-transition-new(*) {
  animation: none;
}
html:active-view-transition-type(theme-sweep)::view-transition-new(root) {
  mix-blend-mode: normal;
  mask-image: radial-gradient( 100% var(--theme-sweep-radius) at 50% var(--theme-sweep-origin, 100%), var(--openbot-text-primary) var(--theme-sweep-reveal-from), var(--openbot-transparent) var(--theme-sweep-reveal-to) );
}
html:active-view-transition-type(theme-sweep)::view-transition-image-pair(root) {
  filter: url("#theme-sweep-ripple");
}
html:active-view-transition-type(theme-sweep)::view-transition-new(theme-sweep) {
  mix-blend-mode: normal;
}
.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-shadow-menu);
  --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-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: start;
  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-muted);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ui-action-menu:not([data-menu-layout="grid"]) :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]):is( :hover, :focus-visible, [data-highlighted], [aria-expanded="true"] ) > svg {
  color: var(--openbot-text-primary);
}
.ui-action-menu:not([data-menu-layout="grid"]) :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"])[data-disabled] > svg {
  color: var(--openbot-text-muted);
}
.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-inline-start: 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-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%);
  direction: ltr;
}
.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;
}
@font-face {
  font-family: "OpenBot Greeting Emoji";
  src: url("/@fs/home/ubuntu/openbot/packages/ui/src/assets/fonts/noto-greeting-emoji.woff2") format("woff2");
  unicode-range: U+2728, U+1F44B, U+1F44F, U+1F604, U+1F60A, U+1F64C, U+1FAF6;
  font-display: block;
}
:root[data-surface="dynamic-island"], :root[data-surface="dynamic-island"] body, :root[data-surface="dynamic-island"] #root {
  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", "Noto Color Emoji", "OpenBot Greeting 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;
}
.openbot-dynamic-island-transition-root[data-ambient-motion="paused"] .ui-spinner {
  animation-play-state: paused;
}
.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: start;
  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);
}
.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-inline-end: calc(var(--openbot-control-sm) + var(--openbot-space-2));
}
.dynamic-island-surface-row-stop {
  position: absolute;
  top: 50%;
  inset-inline-end: 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-inline-end: calc(var(--openbot-control-md) + var(--openbot-space-1));
  padding-inline-start: 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);
  inset-inline-end: 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-inline-start: 1px solid var(--openbot-warning);
  padding-block: 2px;
  padding-inline: 10px 0;
}
.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: end;
}
.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: start;
  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-block: 0;
  margin-inline: 0 auto;
  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;
  direction: ltr;
  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-inline-end: 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-inline-end: 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);
}
.sidebar-storage[data-level="full"] {
  border-color: var(--openbot-danger-border);
  background: var(--openbot-danger-soft);
}
.sidebar-storage-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-3);
}
.sidebar-storage-row > .sidebar-mobile-app-dismiss {
  align-self: start;
}
.sidebar-storage-ring {
  width: 48px;
}
.sidebar-storage-percent {
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  font-weight: var(--openbot-weight-semibold);
  line-height: 1;
}
.sidebar-storage-text {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-0-5);
}
.sidebar-storage-text > strong {
  font-weight: var(--openbot-weight-semibold);
}
* {
  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;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.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: start;
}
.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-footer {
  display: grid;
  gap: 4px;
}
.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-inline-end: 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);
}
.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: start;
  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-language {
  align-self: center;
  width: auto;
  margin-top: var(--openbot-space-6);
  color: var(--openbot-text-muted);
}
.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: start;
}
@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: start;
  -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-inline-start: 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-inline-end: 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-lg);
}
.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: start;
  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-lg);
}
.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-route-button:hover .setup-route-arrow:dir(rtl) {
  transform: translateX(-2px) scaleX(-1);
}
.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-block: 8px;
  padding-inline: 12px 0;
  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-inline-end: 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-lg);
}
.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-block: 0 8px;
  padding-inline: 66px 0;
  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-block: 0 8px;
  padding-inline: 66px 0;
}
.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-inline-end: 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-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-3) var(--openbot-space-1);
}
.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: start;
  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:is([data-auth-panel="code"], [data-auth-panel="company"]) {
    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;
  }
  .account-login:dir(rtl)[data-transition="forward"] :is(.account-login-title, .account-login-description) {
    animation-name: account-login-copy-back;
  }
  .account-login:dir(rtl)[data-transition="back"] :is(.account-login-title, .account-login-description) {
    animation-name: account-login-copy-forward;
  }
  .account-login:dir(rtl)[data-transition="forward"] .account-login-form[data-auth-panel="code"] {
    animation-name: account-login-panel-back;
  }
  .account-login:dir(rtl)[data-transition="back"] .account-login-form[data-auth-panel="email"] {
    animation-name: account-login-panel-forward;
  }
  @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:not(.ui-input):focus-visible, textarea:not(.ui-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% );
}
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);
}
.account-login-code-action-change > svg[class~="lucide-arrow-left"]:dir(rtl) {
  transform: scaleX(-1);
}
.app-loading {
  --app-loading-at: 0s;
  --app-loading-exit-delay: 300ms;
  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[data-scene="pile"] .app-loading-stage {
  position: absolute;
  inset: 0;
  justify-content: center;
}
.app-loading-pit-frame {
  position: absolute;
  inset: 0;
}
.app-loading-pit {
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
  transform-origin: 50% 100%;
}
.app-loading-plush {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}
.app-loading-squash {
  width: 100%;
  height: 100%;
  will-change: transform;
}
.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;
}
.app-loading:is([data-phase="fade"], [data-phase="exit"]) {
  animation: app-loading-exit var(--openbot-duration-overlay) var(--openbot-ease-in-out) forwards;
}
@media (prefers-reduced-motion: no-preference) {
  .app-loading[data-phase="exit"] {
    animation-duration: 1100ms;
    animation-delay: var(--app-loading-exit-delay);
  }
  .app-loading-stage {
    animation: app-loading-enter var(--openbot-duration-overlay) var(--openbot-ease-out) calc(250ms - var(--app-loading-at)) both;
  }
  .app-loading-line {
    animation: app-loading-line-in 280ms var(--openbot-ease-out);
  }
  .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-line-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
@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-toast-host {
  width: var(--width);
}
.server-connection-toast {
  position: relative;
  display: grid;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-4) var(--openbot-space-4) var(--openbot-space-2);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-surface-raised);
  box-shadow: 0 0 0 1px var(--openbot-border);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.server-connection-toast-title {
  padding-right: var(--openbot-space-1);
  font-weight: var(--openbot-weight-semibold);
  text-wrap: balance;
}
.server-connection-toast-body {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  font-variant-numeric: tabular-nums;
  text-wrap: pretty;
}
.server-connection-toast-actions {
  margin-top: var(--openbot-space-1);
}
.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%;
  inset-inline-start: 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);
  stroke-width: var(--openbot-icon-stroke-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);
  stroke-width: var(--openbot-icon-stroke-lg);
}
.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;
}
.language-wheel-continue svg:dir(rtl) {
  transform: scaleX(-1);
}
.language-wheel-continue:is(:hover, :focus-visible):not(:disabled) svg:dir(rtl) {
  translate: calc(var(--openbot-space-1) * -1) 0;
}
.language-wheel-continue:active:not(:disabled) svg:dir(rtl) {
  translate: calc(var(--openbot-space-2) * -1) 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: start;
}
.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-paper-border);
  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-paper-border);
  stroke-width: 1;
}
.onboarding-computer-window-bar, .onboarding-computer-window-bar-fill {
  fill: var(--openbot-paper-text-muted);
  opacity: 0.24;
}
.onboarding-computer-window-bar {
  stroke: var(--openbot-paper-border);
  stroke-width: 1;
}
.onboarding-computer-window-pane {
  fill: var(--openbot-paper-text-dim);
  opacity: 0.18;
}
.onboarding-computer-window-card {
  fill: var(--openbot-paper-text-dim);
  opacity: 0.24;
}
.onboarding-computer-window-line {
  fill: var(--openbot-paper-text-dim);
  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-paper-text);
  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;
  inset-inline-end: 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 {
  inset-inline-end: auto;
  inset-inline-start: calc(100% + 10px);
  align-items: flex-end;
  text-align: end;
}
.provider-picker-callout-end .provider-picker-callout-arrow {
  align-self: flex-start;
  transform: scaleX(-1);
}
.provider-picker-callout:dir(rtl) .provider-picker-callout-arrow {
  transform: scaleX(-1);
}
.provider-picker-callout-end:dir(rtl) .provider-picker-callout-arrow {
  transform: none;
}
:is(.setup-route-arrow, .first-run-choice-row-chevron):dir(rtl) {
  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) {
  left: 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: start;
  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);
}
.first-run-choice-improve {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  border-top: 1px solid var(--openbot-border-grouped);
  padding: var(--openbot-space-3) var(--openbot-space-4);
  text-align: start;
  cursor: pointer;
}
.first-run-choice-improve-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.first-run-choice-improve-text strong {
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}
.first-run-choice-improve-pop {
  position: absolute;
  top: var(--openbot-space-2);
  inset-inline-end: var(--openbot-space-4);
  display: flex;
  align-items: flex-end;
  gap: var(--openbot-space-1);
  pointer-events: none;
}
.first-run-choice-improve-agent.agent-avatar {
  width: 20px;
  height: 20px;
  animation: first-run-improve-pop 1600ms var(--openbot-ease-out) both;
}
.first-run-choice-improve-agent:nth-child(2) {
  animation-delay: 90ms;
}
.first-run-choice-improve-agent:nth-child(3) {
  animation-delay: 180ms;
}
@keyframes first-run-improve-pop {
  0% {
    opacity: 0;
    translate: 0 14px;
    scale: 0.4;
  }
  20% {
    opacity: 1;
    translate: 0 -6px;
    scale: 1;
  }
  32% {
    translate: 0 0;
  }
  80% {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
  100% {
    opacity: 0;
    translate: 0 14px;
    scale: 0.6;
  }
}
.first-run-consent-notice {
  width: min(100%, 440px);
  margin: var(--openbot-space-4) 0 0;
  color: var(--openbot-text-muted);
  text-align: center;
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.first-run-consent-notice .first-run-consent-link {
  display: inline;
  vertical-align: baseline;
  font: inherit;
  color: var(--openbot-text-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
@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;
  }
  .first-run-choice-improve-pop {
    display: 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);
}
.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-live-avatar .agent-avatar > svg {
  pointer-events: none;
}
.first-agent-avatar-fieldset {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}
.first-agent-color-options {
  display: grid;
  grid-template-columns: repeat(9, 28px);
  justify-content: center;
  gap: var(--openbot-space-1);
}
.first-agent-face-options {
  display: flex;
  align-items: center;
  justify-content: center;
  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-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-color-choice[aria-pressed="true"] .first-agent-color-swatch {
  outline: 1px solid var(--openbot-accent-text);
  outline-offset: 4px;
}
.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;
}
.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: start;
  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-block: 0;
  padding-inline: var(--openbot-space-4) var(--openbot-space-2);
  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: calc(var(--openbot-icon-lg) * -0.14);
  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: 148px;
}
.global-search-empty {
  flex-direction: column;
  padding-block: var(--openbot-space-3);
  animation: global-search-fade-in var(--openbot-duration-normal) var(--openbot-ease-out) both;
}
.global-search-plush {
  --ui-plush-size: 56px;
  display: block;
  transform-origin: 50% 100%;
}
.global-search-plush[data-gaze="follow"] .ui-plush-eyes {
  animation: none;
  translate: calc(var(--global-search-gaze-x) * var(--ui-plush-size) * 0.07) calc(var(--global-search-gaze-y) * var(--ui-plush-size) * 0.05);
  transition: translate var(--openbot-duration-fast) var(--openbot-ease-out);
}
@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-inline-start: 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);
  inset-inline-end: 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%;
  inset-inline-start: -7px;
  width: 3px;
  height: 0;
  border-start-start-radius: 0;
  border-start-end-radius: var(--openbot-radius-xs);
  border-end-end-radius: var(--openbot-radius-xs);
  border-end-start-radius: 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-lg);
}
.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;
  inset-inline-start: 0;
  height: auto;
}
.app-frame > * {
  min-height: 0;
}
.panel-edge {
  border-inline-end: 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-block: 2px 0;
  padding-inline: 10px 3px;
}
@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-inline-end: 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 {
    --agent-avatar-optical-offset: calc(26px * -0.14);
    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 {
    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-inline-end: auto;
  border-radius: var(--openbot-radius-pill);
  padding-block: 0;
  padding-inline: var(--openbot-space-1) var(--openbot-space-2);
  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: start;
  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-inline-start: 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-inline-start: 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-lg);
}
.sidebar-history-button > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: var(--openbot-icon-stroke);
}
.sidebar-history-button:disabled, .sidebar-history-button:disabled:hover {
  background: transparent;
  color: var(--openbot-text-muted);
  cursor: default;
  opacity: 0.4;
}
.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-lg);
}
.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);
}
:is(.sidebar-section-agent-drop-target, .sidebar-pinned-group-agent-drop-target) {
  --agent-avatar-outline-tinted: var(--openbot-accent-soft);
  @supports (color: color-mix(in lab, red, red)) {
    --agent-avatar-outline-tinted: color-mix(
    in srgb,
    var(--openbot-accent-soft) 54%,
    var(--agent-avatar-outline, transparent)
  );
  }
}
:is(.sidebar-section-agent-drop-target, .sidebar-pinned-group-agent-drop-target) > * {
  --agent-avatar-outline: color(from var(--agent-avatar-outline-tinted) srgb r g b / 1);
}
.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-chevron-collapsed:dir(rtl) {
  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-unread-group .sidebar-waiting-group-count {
  background: var(--openbot-bg-control);
  color: var(--openbot-text-readable);
}
.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-block: 0;
  padding-inline: 8px 32px;
  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%;
  inset-inline-end: 9px;
  color: var(--openbot-text-muted);
  pointer-events: none;
  transform: translateY(-50%);
}
.sidebar-section-draft {
  min-height: 36px;
}
.sidebar:not(.sidebar-compact) .sidebar-folder > header {
  position: sticky;
  top: -4px;
  z-index: 2;
  background: var(--openbot-bg-sidebar);
}
.sidebar:not(.sidebar-compact) .sidebar-folder[data-depth="1"] > header {
  top: calc(-4px + 32px);
  z-index: 3;
}
.sidebar:not(.sidebar-compact) .sidebar-folder[data-depth="2"] > header {
  top: calc(-4px + 64px);
  z-index: 4;
}
@property --agent-list-stuck-height {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --agent-list-fade-top {
  syntax: "*";
  inherits: false;
}
@property --agent-list-fade-bottom {
  syntax: "*";
  inherits: false;
}
.sidebar .agent-list:is(.scroll-fade-top, .scroll-fade-bottom) {
  --agent-list-fade-top: linear-gradient(var(--openbot-text-primary), var(--openbot-text-primary));
  --agent-list-fade-bottom: linear-gradient(var(--openbot-text-primary), var(--openbot-text-primary));
  -webkit-mask-image: var(--agent-list-fade-top), var(--agent-list-fade-bottom);
  mask-image: var(--agent-list-fade-top), var(--agent-list-fade-bottom);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.sidebar .agent-list.scroll-fade-top {
  --agent-list-fade-top: linear-gradient(
    to bottom,
    var(--openbot-text-primary) var(--agent-list-stuck-height),
    transparent var(--agent-list-stuck-height),
    var(--openbot-text-primary) calc(var(--agent-list-stuck-height) + var(--agent-list-fade-size, 18px))
  );
}
.sidebar .agent-list.scroll-fade-bottom {
  --agent-list-fade-bottom: linear-gradient(
    to bottom,
    var(--openbot-text-primary) calc(100% - var(--agent-list-fade-size, 18px)),
    transparent 100%
  );
}
.sidebar-folder > header .sidebar-section-toggle {
  padding-inline: calc(var(--openbot-space-2) - 1px);
  color: var(--openbot-text-primary);
}
.sidebar-folder > header .sidebar-section-toggle:hover, .sidebar-folder > header .sidebar-section-toggle:focus-visible {
  background: var(--openbot-bg-control);
  color: var(--openbot-text-primary);
}
.sidebar-folder > header .sidebar-section-name {
  font-weight: 600;
}
.sidebar-folder:not([data-depth="0"]) > header .sidebar-section-name {
  font-weight: 500;
}
.sidebar-folder-parent {
  color: var(--openbot-text-muted);
  font-weight: 500;
}
.sidebar-folder-end {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--openbot-space-2);
}
.sidebar-folder-icon {
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
}
.sidebar-folder > header .sidebar-section-toggle:hover .sidebar-folder-icon {
  color: var(--openbot-text-secondary);
}
.sidebar-folder-unread {
  min-width: 18px;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}
.sidebar-folder > .sidebar-section-collapse {
  grid-template-columns: minmax(0, 1fr);
}
.sidebar-folder > .sidebar-section-collapse > .sidebar-section-body {
  min-width: 0;
  overflow: clip;
}
.sidebar:not(.sidebar-compact) .sidebar-folder > .sidebar-section-collapse > .sidebar-section-body > .sidebar-folder {
  margin-top: var(--openbot-space-1-5);
}
.sidebar-folder.sidebar-section-agent-drop-target header {
  background: linear-gradient(var(--openbot-accent-soft), var(--openbot-accent-soft)), var(--openbot-bg-sidebar);
}
.sidebar-folder.sidebar-section-agent-drop-target:not(.sidebar-section-drop-after)::after {
  position: absolute;
  z-index: 5;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--openbot-accent-strong);
  content: "";
  pointer-events: none;
}
.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 {
  --agent-avatar-outline: var(--openbot-bg-surface-raised);
  background: var(--openbot-bg-surface-raised);
  transition: none;
}
.agent-row.sidebar-person-drag-preview {
  --agent-avatar-outline: var(--openbot-bg-surface-raised);
  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: 112px;
  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 {
  --sidebar-pinned-avatar-size: 56px;
  width: 72px;
  height: 102px;
  min-height: 102px;
  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: var(--sidebar-pinned-avatar-size);
  height: var(--sidebar-pinned-avatar-size);
  flex-basis: var(--sidebar-pinned-avatar-size);
}
.agent-row.sidebar-pinned-row .agent-avatar, .agent-row.sidebar-pinned-row.person-row .person-avatar {
  width: var(--sidebar-pinned-avatar-size);
  height: var(--sidebar-pinned-avatar-size);
}
.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.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;
}
.agent-row {
  --agent-row-avatar-size: 46px;
  display: flex;
  width: 100%;
  height: 62px;
  min-height: 62px;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  padding: 8px;
  color: inherit;
  text-align: start;
  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 {
  --agent-avatar-outline: var(--openbot-bg-surface);
  background: var(--openbot-bg-surface);
}
.agent-row-avatar {
  position: relative;
  display: grid;
  width: var(--agent-row-avatar-size);
  height: var(--agent-row-avatar-size);
  flex: 0 0 var(--agent-row-avatar-size);
  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;
  inset-inline-end: -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);
}
:root[data-openbot-color-scheme="light"] .sidebar {
  --sidebar-row-selected: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --sidebar-row-selected: color-mix(in srgb, var(--openbot-text-primary) 10%, var(--openbot-bg-sidebar));
  }
}
:root[data-openbot-color-scheme="light"] .sidebar .agent-row.agent-row-active:not(.sidebar-first-agent-action) {
  --agent-avatar-outline: var(--sidebar-row-selected);
  background: var(--sidebar-row-selected);
}
:root[data-openbot-color-scheme="light"] .sidebar .agent-row-active .agent-row-agent-status {
  border-color: var(--sidebar-row-selected);
}
.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-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-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-block: 1px;
  padding-inline: 5px 7px;
  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-inline-start: 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);
}
.bloub-avatar-svg > g:nth-of-type(2) > path:first-child {
  stroke: var(--agent-avatar-outline, transparent);
  stroke-width: calc(var(--agent-avatar-outline-width, 1.5px) * 2);
  stroke-linejoin: round;
  paint-order: stroke fill;
  vector-effect: non-scaling-stroke;
}
.bloub-avatar-svg:has(image) {
  --agent-avatar-ring-color: var(--agent-avatar-outline, transparent);
  --agent-avatar-ring-width: var(--agent-avatar-outline-width, 1.5px);
  filter: drop-shadow(var(--agent-avatar-ring-width) 0 0 var(--agent-avatar-ring-color)) drop-shadow(calc(-1 * var(--agent-avatar-ring-width)) 0 0 var(--agent-avatar-ring-color)) drop-shadow(0 var(--agent-avatar-ring-width) 0 var(--agent-avatar-ring-color)) drop-shadow(0 calc(-1 * var(--agent-avatar-ring-width)) 0 var(--agent-avatar-ring-color));
}
.agent-avatar-custom {
  overflow: hidden;
}
.agent-avatar-custom > img, .composer-mention-avatar > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.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-avatar="image"][data-mood="asleep"] {
  opacity: 0.6;
}
@media (prefers-reduced-motion: reduce) {
  .agent-avatar[data-breathe] {
    animation: none;
  }
}
.agent-row .agent-avatar {
  --agent-avatar-optical-offset: calc(var(--agent-row-avatar-size) * -0.14);
  width: var(--agent-row-avatar-size);
  height: var(--agent-row-avatar-size);
}
.person-row .person-avatar {
  width: var(--agent-row-avatar-size);
  height: var(--agent-row-avatar-size);
}
.avatar-editor {
  position: relative;
  z-index: var(--openbot-layer-popover);
  width: min(284px, calc(var(--settings-panel-width, 360px) - 30px));
  max-width: calc(100vw - 24px);
  max-height: var(--kb-popper-content-available-height, none);
  margin: 0;
  overflow: hidden auto;
  overscroll-behavior: contain;
  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-block: 7px 3px;
  padding-inline: 13px 10px;
  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-heading-end {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.avatar-style-tabs {
  text-transform: none;
  letter-spacing: normal;
}
.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);
  height: auto;
  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: start;
  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-lg);
}
.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: 15px;
  text-wrap: balance;
}
.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: 4px;
  padding: 4px 10px 12px;
}
.avatar-shape-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.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: 44px;
}
.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 {
  --agent-avatar-optical-offset: calc(30px * -0.14);
  width: 30px;
  height: 30px;
}
.avatar-eyes-grid .avatar-face-choice {
  height: 46px;
}
.avatar-eyes-grid .agent-avatar {
  --agent-avatar-optical-offset: calc(38px * -0.14);
  width: 38px;
  height: 38px;
}
.avatar-color-grid {
  display: grid;
  min-width: 0;
  margin: 0;
  border: 0;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 2px;
  padding: 4px 10px 12px;
}
.avatar-color-choice {
  width: 100%;
  height: 32px;
  padding: 0;
}
.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: 600;
  line-height: 1;
}
.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: 300px) {
  .agent-row-wait-chip:has(.agent-row-wait-chip-label) {
    width: 18px;
    height: 18px;
    justify-content: center;
    padding: 0;
  }
  .agent-row-wait-chip:has(.agent-row-wait-chip-label) svg {
    width: 12px;
    height: 12px;
  }
  .agent-row-wait-chip-label {
    display: none;
  }
}
@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(340px, 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 minmax(0, max-content) minmax(var(--openbot-space-8), 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-label {
  overflow: hidden;
  text-overflow: ellipsis;
}
.account-usage-window-reset {
  text-align: end;
}
.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: end;
}
.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 {
  --agent-list-fade-size: 32px;
  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(4px);
}
.sidebar-compact .agent-row.sidebar-pinned-row {
  --sidebar-pinned-avatar-size: 48px;
  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);
}
.sidebar-compact .sidebar-new-button:dir(rtl) {
  transform: translateX(-6px) scale(0.92);
}
.sidebar-compact .sidebar-toggle-button:dir(rtl) {
  transform: translateX(-13px);
}
.sidebar-compact .sidebar-toggle-button:dir(rtl):active {
  transform: translateX(-13px) scale(0.96);
}
.sidebar-compact .search-field:dir(rtl) {
  transform: translateX(8px);
}
.sidebar-compact .agent-row-avatar:dir(rtl) {
  transform: translateX(-4px);
}
.sidebar-compact .agent-row-copy:dir(rtl) {
  transform: translateX(8px);
}
.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);
}
.sidebar {
  --agent-avatar-outline: 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);
}
.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-button[aria-expanded="true"], .composer-attachment > button: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 {
  --agent-avatar-outline: var(--openbot-bg-control);
  background: var(--openbot-bg-control);
}
@media (hover: hover) and (pointer: fine) and (min-width: 601px) {
  .agent-row:hover {
    --agent-avatar-outline: var(--openbot-bg-control-hover);
  }
}
.agent-list[data-sidebar-dragging] .agent-row:hover {
  --agent-avatar-outline: inherit;
  background: transparent;
}
.agent-list[data-sidebar-dragging] .agent-row.agent-row-active, .agent-list[data-sidebar-dragging] .agent-row.agent-row-active:hover {
  --agent-avatar-outline: var(--openbot-bg-surface);
  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);
}
.composer-mention-token, .remote-desktop-empty-mark {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-secondary);
}
.server-rail-muted {
  position: absolute;
  inset-inline-end: 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;
}
.sidebar-history-button > svg:dir(rtl) {
  transform: scaleX(-1);
}
.agent-row-agent-status-working {
  width: 30px;
  height: 16px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface);
  box-shadow: none;
}
.agent-row-agent-status-working .agent-row-thinking-dots {
  align-items: flex-end;
  gap: 1px;
  height: 7px;
}
.agent-row-agent-status-working .agent-row-thinking-dots i {
  width: 7px;
  height: 7px;
  border-radius: var(--openbot-radius-pill);
  background: url("/@fs/home/ubuntu/openbot/packages/ui/src/assets/plush/ball-lilac.webp") center / contain no-repeat;
  transform-origin: 50% 100%;
  animation: none;
}
.agent-row-agent-status-working .agent-row-thinking-dots i:nth-child(2) {
  background-image: url("/@fs/home/ubuntu/openbot/packages/ui/src/assets/plush/ball-mint.webp");
}
.agent-row-agent-status-working .agent-row-thinking-dots i:nth-child(3) {
  background-image: url("/@fs/home/ubuntu/openbot/packages/ui/src/assets/plush/ball-pink.webp");
}
@media (prefers-reduced-motion: no-preference) {
  .agent-row-agent-status-working .agent-row-thinking-dots i {
    animation: agent-row-ball-hop 960ms cubic-bezier(0.5, 0, 0.5, 1) infinite;
  }
  .agent-row-agent-status-working .agent-row-thinking-dots i:nth-child(2) {
    animation-delay: 130ms;
  }
  .agent-row-agent-status-working .agent-row-thinking-dots i:nth-child(3) {
    animation-delay: 260ms;
  }
}
@keyframes agent-row-ball-hop {
  0%, 62%, 100% {
    translate: 0 0;
    scale: 1 1;
  }
  8% {
    scale: 1.1 0.9;
  }
  26% {
    translate: 0 -1.75px;
    scale: 0.94 1.06;
  }
  44% {
    translate: 0 0;
    scale: 1.08 0.92;
  }
  54% {
    scale: 0.98 1.02;
  }
}
.agent-row-agent-status:is( .agent-row-agent-status-unread, .agent-row-agent-status-routine-failed, .agent-row-agent-status-waiting ) {
  --sidebar-felt-ring: var(--agent-avatar-outline, var(--openbot-bg-sidebar));
  --sidebar-felt-ring-width: 3.5px;
  --sidebar-felt-ring-border: 3px;
  --sidebar-felt-box: 16px;
  inset-inline-end: calc(-3px - var(--sidebar-felt-ring-border));
  bottom: calc(-1px - var(--sidebar-felt-ring-border));
  box-sizing: border-box;
  min-width: calc(var(--sidebar-felt-box) + 2 * var(--sidebar-felt-ring-border));
  height: calc(var(--sidebar-felt-box) + 2 * var(--sidebar-felt-ring-border));
  isolation: isolate;
  border: var(--sidebar-felt-ring-border) solid var(--sidebar-felt-ring);
  border-radius: var(--openbot-radius-pill);
  background: var(--sidebar-felt-under) padding-box;
  box-shadow: 0 0 0 calc(var(--sidebar-felt-ring-width) - var(--sidebar-felt-ring-border)) var(--sidebar-felt-ring);
}
.agent-row-agent-status-unread {
  --sidebar-felt-under: linear-gradient(to bottom, var(--openbot-felt-plum-top), var(--openbot-felt-plum-bottom));
  --felt-box: var(--sidebar-felt-box);
  overflow: clip;
  padding: 0 3px;
  color: var(--openbot-felt-cream);
  font-size: var(--openbot-text-lg);
  line-height: 16px;
}
.agent-row-unread-count {
  position: relative;
  margin-inline-end: -0.06em;
  letter-spacing: 0.06em;
}
.agent-row-agent-status.agent-row-agent-status-routine-failed {
  --sidebar-felt-under: linear-gradient(
    to bottom,
    var(--openbot-felt-raspberry-top),
    var(--openbot-felt-raspberry-bottom)
  );
  inset-inline-end: calc(-1px - var(--sidebar-felt-ring-border));
  bottom: calc(1px - var(--sidebar-felt-ring-border));
  width: calc(var(--sidebar-felt-box) + 2 * var(--sidebar-felt-ring-border));
}
.agent-row-agent-status-routine-failed::before {
  position: absolute;
  z-index: -1;
  inset: -0.75px;
  background: url("/@fs/home/ubuntu/openbot/packages/ui/src/assets/plush/felt-x-ball.webp") center / 100% 100% no-repeat;
  clip-path: circle(calc(50% - 1px));
  content: "";
}
.agent-row-agent-status-routine-failed svg {
  display: none;
}
.agent-row-agent-status.agent-row-agent-status-waiting {
  --sidebar-felt-box: 18px;
  --sidebar-felt-under: linear-gradient(to bottom, var(--openbot-felt-amber-top), var(--openbot-felt-amber-bottom));
  --felt-box: var(--sidebar-felt-box);
  width: calc(var(--sidebar-felt-box) + 2 * var(--sidebar-felt-ring-border));
  color: var(--openbot-felt-cream);
}
.agent-row-agent-status-waiting svg {
  width: 12px;
  height: 12px;
  stroke-width: 2.75;
}
.agent-row-agent-status:is( .agent-row-agent-status-unread, .agent-row-agent-status-routine-failed, .agent-row-agent-status-waiting ) {
  transform-origin: 50% 100%;
}
.agent-row-unread-count.agent-row-unread-count-old {
  position: absolute;
  inset: 0;
  display: grid;
  margin: 0;
  place-items: center;
}
.agent-row-unread-count.agent-row-unread-count-roll-gone {
  visibility: hidden;
}
@media (prefers-reduced-motion: no-preference) {
  .agent-row-agent-status:is( .agent-row-agent-status-unread, .agent-row-agent-status-routine-failed, .agent-row-agent-status-waiting ).agent-row-agent-status-entering {
    animation: sidebar-felt-in var(--openbot-duration-slow) cubic-bezier(0.2, 0, 0, 1) both;
  }
  .agent-row-agent-status-unread.agent-row-agent-status-bumping {
    animation: sidebar-felt-bump 360ms ease-out;
  }
  .agent-row-agent-status-unread.agent-row-agent-status-bumping-b {
    animation: sidebar-felt-bump-b 360ms ease-out;
  }
  .agent-row-agent-status:is( .agent-row-agent-status-unread, .agent-row-agent-status-routine-failed ).agent-row-agent-status-leaving {
    animation: sidebar-felt-out var(--openbot-duration-overlay) cubic-bezier(0.5, 0, 0.75, 0) both;
  }
  .agent-row-unread-count.agent-row-unread-count-roll-in {
    animation: sidebar-felt-roll-in 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .agent-row-unread-count.agent-row-unread-count-roll-in-b {
    animation: sidebar-felt-roll-in-b 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .agent-row-unread-count.agent-row-unread-count-roll-out {
    animation: sidebar-felt-roll-out 200ms ease-in both;
  }
  .agent-row-unread-count.agent-row-unread-count-roll-out-b {
    animation: sidebar-felt-roll-out-b 200ms ease-in both;
  }
}
@keyframes sidebar-felt-in {
  from {
    opacity: 0;
    scale: 0.7;
  }
}
@keyframes sidebar-felt-bump {
  35% {
    scale: 1.12 0.88;
  }
  65% {
    scale: 0.97 1.04;
  }
}
@keyframes sidebar-felt-bump-b {
  35% {
    scale: 1.12 0.88;
  }
  65% {
    scale: 0.97 1.04;
  }
}
@keyframes sidebar-felt-out {
  30% {
    scale: 1.1 0.9;
  }
  100% {
    opacity: 0;
    scale: 0.2;
  }
}
@keyframes sidebar-felt-roll-in {
  from {
    opacity: 0;
    translate: 0 65%;
  }
}
@keyframes sidebar-felt-roll-in-b {
  from {
    opacity: 0;
    translate: 0 65%;
  }
}
@keyframes sidebar-felt-roll-out {
  to {
    opacity: 0;
    translate: 0 -65%;
  }
}
@keyframes sidebar-felt-roll-out-b {
  to {
    opacity: 0;
    translate: 0 -65%;
  }
}
.sidebar-plush-ring-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}
.agent-dock {
  --agent-dock-fill: var(--window-solid-frame, var(--openbot-bg-frame));
  --agent-avatar-outline: var(--agent-dock-fill);
  --agent-row-avatar-size: 40px;
  position: fixed;
  z-index: var(--openbot-layer-dropdown);
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  translate: var(--agent-dock-tuck, 0px) 0;
  pointer-events: none;
}
.agent-dock[data-side="left"] {
  right: auto;
  left: 0;
  transform: translateY(-50%) scaleX(-1);
  translate: calc(-1 * var(--agent-dock-tuck, 0px)) 0;
}
.agent-dock-hit {
  position: absolute;
  pointer-events: auto;
}
.agent-dock-handle {
  position: absolute;
  top: -40px;
  left: -40px;
  overflow: visible;
  fill: none;
}
.agent-dock:not([data-draggable]) .agent-dock-handle {
  display: none;
}
.agent-dock-handle-arc {
  stroke: var(--agent-dock-fill);
  stroke-linecap: round;
  transition: stroke-width var(--openbot-duration-normal) var(--openbot-ease-out), translate var(--openbot-duration-normal) var(--openbot-ease-out);
}
.agent-dock-handle:has(.agent-dock-handle-hit:hover) .agent-dock-handle-arc {
  stroke-width: 5.5px;
  translate: 0 -2px;
}
.agent-dock[data-dragging] .agent-dock-handle .agent-dock-handle-arc {
  stroke-width: 6px;
  translate: 0 -3px;
}
.agent-dock-handle-hit {
  stroke: var(--openbot-transparent);
  stroke-linecap: round;
  pointer-events: stroke;
  cursor: grab;
}
.agent-dock-handle-hit:active {
  cursor: grabbing;
}
.agent-dock-filter {
  position: absolute;
}
.agent-dock-liquid {
  position: absolute;
  inset: -40px -60px -40px -40px;
}
.agent-dock-liquid > * {
  position: absolute;
  background: var(--agent-dock-fill);
}
.agent-dock-liquid > .agent-dock-shapes {
  top: 0;
  left: 0;
  overflow: visible;
  background: var(--openbot-transparent);
  fill: var(--agent-dock-fill);
}
.agent-dock-edge {
  position: absolute;
  top: -40px;
  left: -40px;
  overflow: visible;
  fill: var(--agent-dock-fill);
}
.agent-dock-panel-body {
  margin-left: 40px;
  margin-top: 40px;
  opacity: 0;
}
.agent-dock-drop {
  top: 40px;
  left: 40px;
  width: 44px;
  height: 44px;
  border-radius: var(--openbot-radius-pill);
  transform: scale(0);
}
.agent-dock-seats {
  position: absolute;
  inset: 0;
}
.agent-dock-seat {
  position: absolute;
  top: 0;
  width: 44px;
  height: 44px;
  pointer-events: auto;
  transform-origin: 50% 50%;
}
.agent-dock-seat-scroll {
  position: absolute;
  top: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  pointer-events: auto;
  scrollbar-width: none;
  --agent-dock-seat-fade-top: 0px;
  --agent-dock-seat-fade-bottom: 0px;
}
.agent-dock-seat-scroll::-webkit-scrollbar {
  display: none;
}
.agent-dock-seat-list {
  position: relative;
  overflow: clip;
}
.agent-dock-seats .agent-dock-seat-scroll:is(.scroll-fade-top, .scroll-fade-bottom) {
  -webkit-mask-image: linear-gradient( to bottom, transparent, var(--openbot-text-primary) var(--agent-dock-seat-fade-top), var(--openbot-text-primary) calc(100% - var(--agent-dock-seat-fade-bottom)), transparent );
  mask-image: linear-gradient( to bottom, transparent, var(--openbot-text-primary) var(--agent-dock-seat-fade-top), var(--openbot-text-primary) calc(100% - var(--agent-dock-seat-fade-bottom)), transparent );
}
.agent-dock-seat-scroll.scroll-fade-top {
  --agent-dock-seat-fade-top: var(--agent-dock-seat-fade);
}
.agent-dock-seat-scroll.scroll-fade-bottom {
  --agent-dock-seat-fade-bottom: var(--agent-dock-seat-fade);
}
.agent-dock-seat-button {
  position: relative;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  padding: 0;
  background: var(--openbot-transparent);
  color: var(--openbot-text-muted);
  cursor: pointer;
  transition: color var(--openbot-duration-normal) var(--openbot-ease-out), transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.agent-dock-seat-button * {
  pointer-events: none;
}
.agent-dock-seat-button:hover {
  color: var(--openbot-text-primary);
  transform: scale(1.06);
}
.agent-dock-seat-button:active {
  transform: scale(0.92);
}
.agent-dock-seat-button:focus-visible {
  outline: 1px solid var(--openbot-border-focus);
  outline-offset: 2px;
}
.agent-dock-seat-button[data-open] {
  transform: scale(1.12);
}
.agent-dock-seat[data-dragging] {
  z-index: 1;
}
.agent-dock-seat[data-dragging] .agent-dock-seat-button {
  color: var(--openbot-text-primary);
  cursor: grabbing;
  transform: scale(1.12);
}
.agent-dock-seat-button .agent-avatar {
  --agent-avatar-optical-offset: calc(40px * -0.14);
  width: 40px;
  height: 40px;
}
.agent-dock-seat-button .agent-row-agent-status {
  border-color: var(--agent-dock-fill);
}
.agent-dock-add svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.agent-dock-add-menu.ui-action-menu {
  display: flex;
  max-height: min(560px, calc(100dvh - 16px), var(--kb-popper-content-available-height, 560px));
  flex-direction: column;
}
.agent-dock-add-menu-search.ui-action-menu {
  width: 232px;
}
.agent-dock-add-list {
  min-height: 0;
  flex: 1 1 auto;
  margin-inline: calc(var(--ui-menu-padding) * -1);
  padding-inline: var(--ui-menu-padding);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.agent-dock-add-list > [role="menuitem"] {
  overflow-y: clip;
}
.agent-dock-add-list::-webkit-scrollbar {
  display: none;
}
.agent-dock-add-list > hr {
  height: 1px;
  margin: var(--ui-menu-padding) calc(var(--ui-menu-padding) * -1);
  border: 0;
  background: var(--openbot-border);
}
.agent-dock-add-search {
  margin: calc(var(--ui-menu-padding) * -1) calc(var(--ui-menu-padding) * -1) var(--openbot-space-1);
}
.agent-dock-add-search .agent-dock-add-search-input {
  border: 0;
  background: transparent;
  box-shadow: none;
}
.agent-dock-add-search .agent-dock-add-search-input:focus-visible {
  outline: none;
  box-shadow: none;
}
.agent-dock-menu-avatar.agent-avatar {
  width: 20px;
  height: 20px;
}
.agent-dock-menu-channel {
  display: inline-flex;
}
.agent-dock-menu-channel .channel-avatar-cluster {
  --channel-avatar-size: 20px;
  --agent-avatar-outline-width: 1px;
}
.agent-dock-panel {
  position: absolute;
  top: 0;
  color: var(--openbot-text-primary);
  opacity: 0;
  transform-origin: 100% 50%;
}
.agent-dock-panel[data-open] {
  pointer-events: auto;
}
.agent-dock-chat {
  display: flex;
  height: 100%;
  flex-direction: column;
  animation: agent-dock-swap var(--openbot-duration-island-content) var(--openbot-ease-out);
}
@keyframes agent-dock-swap {
  from {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(8px);
  }
}
.agent-dock-chat-header {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-3) var(--openbot-space-3) var(--openbot-space-2) var(--openbot-space-4);
}
.agent-dock-chat-avatar.agent-avatar {
  --agent-avatar-optical-offset: calc(34px * -0.14);
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
}
.agent-dock-chat-channel {
  display: inline-flex;
  flex: 0 0 auto;
}
.agent-dock-chat-channel .channel-avatar-cluster {
  --channel-avatar-size: 34px;
}
.agent-dock-chat-title {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  line-height: var(--openbot-leading-sm);
}
.agent-dock-chat-title strong {
  overflow: hidden;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-dock-chat-title span {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-dock-icon {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  padding: 0;
  background: var(--openbot-transparent);
  color: var(--openbot-text-muted);
  cursor: pointer;
}
.agent-dock-icon:hover {
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-primary);
}
.agent-dock-icon svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.agent-dock-log {
  position: relative;
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}
.agent-dock-messages {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  padding: var(--openbot-space-2) var(--openbot-space-4) var(--openbot-space-3);
  scrollbar-width: none;
  --agent-dock-fade-top: 0px;
  --agent-dock-fade-bottom: 0px;
}
.agent-dock-messages::-webkit-scrollbar {
  display: none;
}
.agent-dock-messages-content {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  gap: var(--openbot-space-2);
}
.agent-dock-scroll-thumb {
  position: absolute;
  top: 0;
  right: 3px;
  width: 3px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-muted);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.agent-dock-scroll-thumb[data-scrollable][data-shown] {
  opacity: 0.5;
}
.agent-dock-chat .agent-dock-messages:is(.scroll-fade-top, .scroll-fade-bottom) {
  -webkit-mask-image: linear-gradient( to bottom, transparent, var(--openbot-text-primary) var(--agent-dock-fade-top), var(--openbot-text-primary) calc(100% - var(--agent-dock-fade-bottom)), transparent );
  mask-image: linear-gradient( to bottom, transparent, var(--openbot-text-primary) var(--agent-dock-fade-top), var(--openbot-text-primary) calc(100% - var(--agent-dock-fade-bottom)), transparent );
}
.agent-dock-messages.scroll-fade-top {
  --agent-dock-fade-top: 32px;
}
.agent-dock-messages.scroll-fade-bottom {
  --agent-dock-fade-bottom: 32px;
}
.agent-dock-empty {
  margin: auto 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  text-align: center;
}
.agent-dock-bubble {
  max-width: 85%;
  flex: none;
  font-size: var(--openbot-text-md);
  overflow-wrap: anywhere;
}
.agent-dock-bubble[data-pending] {
  opacity: 0.6;
}
.agent-dock-bubble[data-error] {
  color: var(--openbot-danger-text);
}
.agent-dock-author {
  display: block;
  margin-block-end: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: 500;
}
.agent-dock-text {
  margin: 0;
  white-space: pre-wrap;
}
.agent-dock-markdown {
  min-width: 0;
  font-size: var(--openbot-text-md);
}
.agent-dock-typing {
  display: flex;
  padding-block: var(--openbot-space-1);
}
.agent-dock-typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.agent-dock-typing-dots i {
  width: 6px;
  height: 6px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-muted);
  animation: agent-dock-dot 1s var(--openbot-ease-in-out) infinite;
}
.agent-dock-typing-dots i:nth-child(2) {
  animation-delay: 0.15s;
}
.agent-dock-typing-dots i:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes agent-dock-dot {
  50% {
    opacity: 0.3;
    transform: translateY(-3px);
  }
}
.agent-dock-sr {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  white-space: nowrap;
}
.agent-dock-wait {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin: 0 var(--openbot-space-3);
  border-radius: var(--openbot-radius-lg);
  padding: var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-3);
  background: var(--openbot-bg-surface);
  font-size: var(--openbot-text-sm);
}
.agent-dock-wait-icon {
  display: grid;
  flex: none;
  place-items: center;
  color: var(--openbot-text-muted);
}
.agent-dock-wait-icon svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.agent-dock-wait-title {
  min-width: 0;
  flex: 1;
}
.agent-dock-error {
  margin: var(--openbot-space-2) var(--openbot-space-4) 0;
  color: var(--openbot-danger-text);
  font-size: var(--openbot-text-sm);
}
.agent-dock-composer-wrap.composer-wrap {
  --composer-editor-limit: initial;
  padding: 0;
}
.agent-dock-composer-wrap .mention-picker {
  --mention-picker-side-inset: calc(var(--openbot-space-3) + 12px);
}
.agent-dock-composer.composer[data-compact] {
  grid-template-columns: minmax(0, 1fr) auto;
  margin: var(--openbot-space-2) var(--openbot-space-3) var(--openbot-space-3);
}
.agent-dock-composer.composer[data-compact]:focus-within {
  box-shadow: none;
}
.agent-dock-composer.composer[data-compact] > .composer-input-label {
  grid-column: 1;
}
.agent-dock-shelf {
  --agent-dock-shelf-toward: 1;
  position: absolute;
  display: grid;
  justify-items: end;
  gap: var(--openbot-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.agent-dock-shelf[hidden] {
  display: none;
}
.agent-dock-shelf-item {
  animation: agent-dock-shelf-drip 560ms cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
  transition: opacity var(--openbot-duration-normal) ease-out, translate var(--openbot-duration-normal) ease-out;
}
.agent-dock-shelf-item[data-leaving] {
  opacity: 0;
  translate: calc(var(--agent-dock-shelf-toward) * 24px) 0;
}
@keyframes agent-dock-shelf-drip {
  from {
    opacity: 0;
    scale: 0.6;
    translate: calc(var(--agent-dock-shelf-toward) * 32px) 0;
  }
}
.agent-dock-shelf :is(.agent-dock-result, .agent-dock-shelf-more) {
  gap: 0;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  background: var(--agent-dock-fill);
  font: inherit;
  font-size: var(--openbot-text-sm);
  white-space: nowrap;
  pointer-events: auto;
  cursor: pointer;
}
.agent-dock-shelf :is(.agent-dock-result, .agent-dock-shelf-more):focus-visible {
  outline: 1px solid var(--openbot-border-focus);
  outline-offset: 2px;
  box-shadow: none;
}
.agent-dock-shelf :is(.agent-dock-result, .agent-dock-shelf-more):hover:not(:disabled) {
  background: var(--agent-dock-fill);
}
.agent-dock-result {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 var(--openbot-space-4) 0 var(--openbot-space-1);
  color: var(--openbot-text-primary);
  transition: translate var(--openbot-duration-normal) cubic-bezier(0.34, 1.56, 0.64, 1);
}
.agent-dock-result:hover {
  translate: calc(var(--agent-dock-shelf-toward) * -4px) 0;
}
.agent-dock-result .agent-avatar {
  --agent-avatar-optical-offset: calc(32px * -0.14);
  flex: none;
  width: 32px;
  height: 32px;
}
.agent-dock-result > svg {
  flex: none;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  margin-left: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
}
.agent-dock-result-label {
  max-width: 240px;
  overflow: hidden;
  margin-left: var(--openbot-space-2);
  font-weight: var(--openbot-weight-medium);
  text-overflow: ellipsis;
}
.agent-dock-shelf-more {
  height: 28px;
  padding: 0 var(--openbot-space-3);
  color: var(--openbot-text-secondary);
  font-variant-numeric: tabular-nums;
}
.agent-dock-shelf-more:hover {
  color: var(--openbot-text-primary);
}
.agent-dock[data-side="left"] .agent-dock-seat, .agent-dock[data-side="left"] .agent-dock-panel {
  scale: -1 1;
}
.agent-dock[data-side="left"] .agent-dock-panel {
  transform-origin: 50% 50%;
}
.agent-dock[data-side="left"] .agent-dock-shelf {
  --agent-dock-shelf-toward: -1;
  justify-items: start;
  scale: -1 1;
}
.agent-dock[data-ambient-motion="paused"] :is(.ui-spinner, .agent-row-thinking-dots i) {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .agent-dock-handle-arc, .agent-dock-scroll-thumb {
    transition: none;
  }
  .agent-dock-chat, .agent-dock-typing-dots i {
    animation: none;
  }
  .agent-dock-seat-button, .agent-dock-result {
    transition: none;
  }
  .agent-dock-shelf-item {
    animation: none;
  }
}
:root[data-surface="agent-dock"], :root[data-surface="agent-dock"] body, :root[data-surface="agent-dock"] #root {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
}
:root[data-surface="agent-dock"] .agent-dock {
  right: -5px;
}
.agent-dock-seat-button .channel-avatar-cluster .agent-avatar, .agent-dock-chat-channel .channel-avatar-cluster .agent-avatar, .agent-dock-menu-channel .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);
}
.agent-dock-strip {
  --agent-dock-strip-near: 0;
  position: fixed;
  z-index: calc(var(--openbot-layer-dropdown) - 1);
  top: 50%;
  right: 0;
  width: calc(var(--agent-dock-strip-width) + 22px * var(--agent-dock-strip-near));
  height: calc( var(--agent-dock-strip-height, 240px) * (var(--agent-dock-strip-rest) + (1 - var(--agent-dock-strip-rest)) * var(--agent-dock-strip-near)) );
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--openbot-radius-pill) 0 0 var(--openbot-radius-pill);
  background: var(--window-solid-frame, var(--openbot-bg-frame));
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
  transition: width var(--openbot-duration-fast) var(--openbot-ease-out), height var(--openbot-duration-fast) var(--openbot-ease-out), opacity var(--openbot-duration-fast) var(--openbot-ease-out) var(--openbot-duration-fast);
}
.agent-dock-strip[data-side="left"] {
  right: auto;
  left: 0;
  border-radius: 0 var(--openbot-radius-pill) var(--openbot-radius-pill) 0;
}
.agent-dock-strip[data-shown] {
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
  transition: width var(--openbot-duration-fast) var(--openbot-ease-out), height var(--openbot-duration-fast) var(--openbot-ease-out), opacity var(--openbot-duration-fast) var(--openbot-ease-out) var(--openbot-duration-normal);
}
.agent-dock-strip:hover:not(:disabled):not([data-disabled]) {
  background: var(--window-solid-frame, var(--openbot-bg-frame));
}
.agent-dock-strip:focus-visible {
  outline: 1px solid var(--openbot-border-focus);
  outline-offset: 1px;
  box-shadow: none;
}
.agent-dock-strip::after {
  position: absolute;
  inset: 0 -4px;
  content: "";
  background: var(--openbot-wash-front);
  opacity: 0;
  pointer-events: none;
  translate: 0 110%;
  transition: opacity var(--openbot-duration-normal) var(--openbot-ease-out);
}
.agent-dock-strip[data-asks]::after {
  opacity: 1;
}
.agent-dock-strip[data-asks][data-wave]::after {
  animation: agent-dock-strip-wave 2.24s cubic-bezier(0.45, 0, 0.25, 1) 2;
}
@keyframes agent-dock-strip-wave {
  0% {
    translate: 0 105%;
  }
  100% {
    translate: 0 -105%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .agent-dock-strip[data-asks]::after, .agent-dock-strip[data-asks][data-wave]::after {
    animation: none;
    translate: 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-block: 0;
  padding-inline: var(--openbot-space-2) var(--openbot-space-3);
  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: start;
}
.account-update-island__progress-value {
  display: inline-grid;
  align-items: baseline;
  grid-template-columns: 3ch max-content;
  direction: ltr;
  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-block: var(--openbot-space-1-5);
  padding-inline: var(--openbot-space-3) var(--openbot-space-1-5);
}
.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);
}
.join-server-close {
  position: absolute;
  top: var(--openbot-space-6);
  inset-inline-end: 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);
    inset-inline-end: 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-dialog:has(.add-server-other) .add-server-intro .ui-heading {
  padding-inline: 160px;
}
.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%;
  inset-inline-start: 0;
  width: auto;
  flex: 0 0 auto;
  transform: translateY(-50%);
}
.hosted-currency-locked {
  display: inline-flex;
  align-items: center;
  height: var(--openbot-control-md);
  padding-inline: 10px;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.add-server-bar[data-license] {
  justify-content: flex-end;
  padding-inline: 0;
}
.add-server-bar[data-license] .hosted-use {
  margin-inline-end: auto;
}
.add-server-bar[data-license] .hosted-currency {
  position: static;
  transform: none;
}
.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;
  inset-inline-start: 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, .hosted-billing[data-use="work"]::before {
  transform: translateX(100%);
}
.hosted-billing:dir(rtl):is([data-billing="yearly"], [data-use="work"])::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;
}
.add-server-bar[data-license] .hosted-billing-save {
  font-variant-numeric: tabular-nums;
}
.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-inline-start: 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-inline-end: 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-inline-start: 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-bundle {
  padding: 0 var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-success-soft);
  color: var(--openbot-success-text);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-md);
  white-space: nowrap;
}
.hosted-plan-summary[data-license] {
  display: flex;
  align-items: baseline;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}
.hosted-plan-summary svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  translate: 0 calc((var(--openbot-icon-sm) - 1cap) / 2);
  color: var(--openbot-success-text);
}
.hosted-plans[data-license] .hosted-plan-summary {
  min-height: 2lh;
}
.hosted-plans[data-license] .hosted-plan-price {
  position: relative;
}
.hosted-plan-longest {
  position: absolute;
  inset: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  visibility: hidden;
  pointer-events: none;
}
.hosted-plans[data-stacked] .hosted-plan-price > .hosted-plan-was[data-shown] {
  flex-basis: 100%;
}
.hosted-plans[data-license] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.hosted-license-people {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3) var(--openbot-space-6);
  border: 1px solid var(--openbot-border);
  border-top: 0;
  border-radius: 0 0 var(--openbot-radius-card) var(--openbot-radius-card);
  background: var(--openbot-bg-canvas);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  transition: color var(--openbot-duration-normal) var(--openbot-ease-out);
}
.hosted-license-people[data-disabled] {
  color: var(--openbot-text-muted);
}
.hosted-license-people > span {
  white-space: nowrap;
}
.hosted-license-stepper {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin: 0;
  padding: 0;
  border: 0;
  font-variant-numeric: tabular-nums;
}
.hosted-license-stepper > span {
  min-width: 11ch;
  text-align: center;
  white-space: nowrap;
}
.hosted-license-stepper .ui-icon-button {
  border-radius: var(--openbot-radius-pill);
}
.hosted-plan-choose.ui-button {
  margin-top: auto;
}
.hosted-plans[data-license] .hosted-plan-choose.ui-button {
  margin-top: 0;
}
.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-other {
  position: absolute;
  top: var(--openbot-space-6);
  inset-inline-start: var(--openbot-space-6);
  z-index: 2;
}
.add-server-other .ui-button {
  color: var(--openbot-text-muted);
}
.ui-action-menu.add-server-other-menu {
  z-index: calc(var(--openbot-layer-dialog) + 1);
}
.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-inline-start: 0;
  }
}
@media (max-width: 560px) {
  .add-server-intro .ui-heading {
    font-size: var(--openbot-text-2xl);
    line-height: var(--openbot-leading-2xl);
  }
  .add-server-dialog:has(.add-server-other) .add-server-intro {
    padding-top: calc(var(--openbot-control-md) + var(--openbot-space-1));
  }
  .add-server-dialog:has(.add-server-other) .add-server-intro .ui-heading {
    padding-inline: 0;
  }
  .add-server-other {
    top: var(--openbot-space-3);
    inset-inline-start: var(--openbot-space-3);
  }
  .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-bar[data-license] {
    flex-wrap: wrap;
    padding-top: 0;
  }
  .add-server-bar[data-license] .hosted-billing:not(.hosted-use) {
    flex: 1 1 100%;
  }
  .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, .hosted-license-people, .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;
  }
}
.create-local-server-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: create-local-server-dialog-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}
.create-local-server-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--openbot-space-1);
}
.create-local-server-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);
}
.create-local-server-description {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.create-local-server-form {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
  margin: var(--openbot-space-4) 0 0;
}
.create-local-server-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
}
@keyframes create-local-server-dialog-in {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
}
.install-server-dialog.join-server-dialog {
  width: min(560px, 100%);
}
.install-server-page {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--openbot-space-4) + var(--openbot-space-1));
}
.install-server-block {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
}
.install-server-block[data-expired] .message-code-block pre {
  opacity: 0.5;
}
.install-server-code-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.install-server-status, .install-server-placeholder {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  min-height: var(--openbot-control-sm);
}
.install-server-placeholder {
  flex-direction: column;
  justify-content: center;
  min-height: 120px;
  text-align: center;
}
.install-server-status svg, .install-server-placeholder svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
.install-server-spin {
  color: var(--openbot-text-muted);
  animation: install-server-spin 1s linear infinite;
}
.install-server-ok {
  color: var(--openbot-success);
}
.install-server-warning {
  color: var(--openbot-warning);
}
.install-server-danger {
  color: var(--openbot-danger);
}
@keyframes install-server-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .install-server-spin {
    animation: none;
  }
}
.hosted-upsell-notice {
  flex: none;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  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 {
  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;
}
.server-upgrade-modal {
  width: min(480px, 100%);
}
.server-upgrade-meter {
  display: grid;
  gap: var(--openbot-space-1-5);
  margin: var(--openbot-space-1) 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.server-upgrade-meter .ui-progress-fill {
  background: var(--openbot-warning);
}
.server-upgrade-meter[data-level="full"] .ui-progress-fill {
  background: var(--openbot-danger);
}
.server-upgrade-compare {
  width: 100%;
  margin-top: var(--openbot-space-2);
  border-collapse: collapse;
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
.server-upgrade-compare th, .server-upgrade-compare td {
  padding: var(--openbot-space-2) 0;
  border-bottom: 1px solid var(--openbot-border);
  text-align: start;
}
.server-upgrade-compare thead th {
  color: var(--openbot-text-muted);
  font-weight: var(--openbot-weight-medium);
}
.server-upgrade-compare tbody th {
  color: var(--openbot-text-secondary);
  font-weight: var(--openbot-weight-regular);
}
.server-upgrade-compare tbody td:last-child {
  font-weight: var(--openbot-weight-semibold);
}
.server-upgrade-compare tbody tr:last-child > * {
  border-bottom: 0;
}
.server-upgrade-error {
  margin: 0;
  color: var(--openbot-danger);
  font-size: var(--openbot-text-sm);
}
.server-upgrade-modal .hosted-upsell-modal-actions {
  flex-wrap: wrap;
}
.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-roles-icon {
  color: var(--openbot-text-secondary);
}
.server-roles-member-count {
  min-width: 72px;
  text-align: end;
}
.server-roles-level {
  min-width: 128px;
}
.server-roles-agent-level {
  min-width: 176px;
}
.server-roles-name-row {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.server-roles-member-trigger {
  max-width: 240px;
}
.server-roles-member-summary {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:is(.server-roles-create, .server-roles-member-trigger) > svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}
.server-roles-level-source {
  color: var(--openbot-text-secondary);
}
.server-roles-level-menu {
  min-width: 176px;
}
.server-roles-level-menu .server-roles-open-everyone {
  margin-top: var(--openbot-space-1);
  border-top: 1px solid var(--openbot-border);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.server-audit-controls {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.server-audit-time {
  white-space: nowrap;
}
.server-audit-row .server-audit-title {
  color: var(--openbot-text-secondary);
  font-weight: var(--openbot-weight-regular);
}
.server-audit-key {
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}
.server-audit-key[data-level="none"] {
  color: var(--openbot-danger);
}
.server-audit-key[data-level="chat"] {
  color: var(--openbot-success);
}
.server-audit-key[data-level="manage"] {
  color: var(--openbot-warning);
}
.server-audit-arrow svg {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-inline: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  vertical-align: -2px;
}
.server-audit-arrow svg:dir(rtl) {
  transform: scaleX(-1);
}
.server-audit-mark {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: var(--openbot-radius-md);
}
.server-audit-mark svg {
  width: 16px;
  height: 16px;
}
.server-audit-mark[data-tone="success"] {
  background: var(--openbot-success-soft);
  color: var(--openbot-success);
}
.server-audit-mark[data-tone="danger"] {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger);
}
.server-audit-mark[data-tone="accent"] {
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
}
.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;
  inset-inline-end: 0;
  bottom: 0;
  display: flex;
  width: var(--settings-panel-width, 360px);
  flex-direction: column;
  border-inline-start: 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:dir(rtl) {
  animation-name: settings-panel-in-rtl;
}
@keyframes settings-panel-in-rtl {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.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-back-icon:dir(rtl) {
  transform: scaleX(-1) translateX(-0.5px);
}
.settings-forward-icon:dir(rtl), .settings-link-value > svg[class~="lucide-chevron-right"]:dir(rtl) {
  transform: scaleX(-1);
}
.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-block: 0 6px;
  margin-inline: 8px 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  line-height: 18px;
}
.settings-field > .ui-field-limit {
  display: grid;
  margin-block: var(--openbot-space-1-5) 0;
  margin-inline: var(--openbot-space-2) 0;
}
.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: none;
  resize: none;
}
.settings-field .settings-description-input {
  height: 72px;
  min-height: 72px;
}
.agent-instructions-bar {
  position: sticky;
  z-index: 1;
  top: calc(var(--openbot-space-6) * -1);
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-top: calc(var(--openbot-space-6) * -1);
  border-bottom: 1px solid var(--openbot-border);
  background: var(--openbot-bg-canvas);
  padding: var(--openbot-space-6) 0 var(--openbot-space-3);
}
.agent-instructions-bar-icon {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  flex: none;
  color: var(--openbot-text-muted);
  stroke-width: var(--openbot-icon-stroke-lg);
}
.agent-instructions-bar-file {
  display: grid;
  min-width: 0;
  flex: 1;
}
.agent-instructions-bar-name {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.agent-instructions-bar-folder {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  overflow-wrap: anywhere;
  user-select: text;
}
.agent-instructions-text {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-lg);
  overflow-wrap: anywhere;
}
.agent-instructions-text .message-markdown-heading[data-level] {
  margin: var(--openbot-space-6) 0 var(--openbot-space-1-5);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-md);
}
.agent-instructions-text .message-markdown-heading[data-level="1"] {
  font-size: var(--openbot-text-xl);
  line-height: var(--openbot-leading-2xl);
}
.agent-instructions-text > .message-markdown-heading:first-child {
  margin-top: 0;
}
.agent-instructions-text :is(ul, ol) {
  margin: 0;
  padding-inline-start: var(--openbot-space-4);
}
.agent-instructions-text li + li {
  margin-top: var(--openbot-space-1);
}
.agent-instructions-empty {
  margin: 0;
  color: var(--openbot-text-muted);
}
.agent-memories-field.agent-instructions-field {
  max-height: none;
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-lg);
}
.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[aria-invalid="true"], .settings-field textarea[aria-invalid="true"] {
  border-color: var(--openbot-danger);
}
.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, auto) minmax(0, max-content);
  justify-content: space-between;
  align-items: center;
  gap: var(--openbot-space-3);
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 var(--openbot-space-1);
  text-align: start;
  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;
  min-width: 0;
  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-text {
  line-height: var(--openbot-leading-md);
}
.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-block: 0;
  margin-inline: var(--openbot-space-1) 0;
  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-inline-end: 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;
  gap: var(--openbot-space-3);
  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-inline-start: 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);
  inset-inline-end: 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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_AMS-Regular.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_AMS-Regular.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Bold.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Bold.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Regular.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Regular.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Fraktur-Bold.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Fraktur-Bold.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Fraktur-Regular.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Fraktur-Regular.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Main-Bold.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Main-Bold.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Main-BoldItalic.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Main-BoldItalic.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Main-Italic.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Main-Italic.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Main-Regular.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Main-Regular.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Math-BoldItalic.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Math-BoldItalic.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Math-Italic.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Math-Italic.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_SansSerif-Bold.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_SansSerif-Bold.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_SansSerif-Italic.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_SansSerif-Italic.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_SansSerif-Regular.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_SansSerif-Regular.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Script-Regular.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Script-Regular.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Size1-Regular.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Size1-Regular.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Size2-Regular.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Size2-Regular.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Size3-Regular.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Size3-Regular.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Size4-Regular.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Size4-Regular.woff) format("woff"),url(/@fs/home/ubuntu/openbot/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/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Typewriter-Regular.woff2) format("woff2"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Typewriter-Regular.woff) format("woff"),url(/@fs/home/ubuntu/openbot/node_modules/katex/dist/fonts/KaTeX_Typewriter-Regular.ttf) format("truetype");
}
.katex {
  font: normal 1.21em KaTeX_Main,math,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.19.0";
}
.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-inline-end var(--panel-resize-duration, var(--openbot-duration-overlay)) cubic-bezier(0.22, 1, 0.36, 1);
  --conversation-column-width: clamp(1440px, 65vw, 1920px);
}
.conversation-panel > .conversation-scroll > :is(.virtual-chat-list, .conversation-live) {
  max-width: var(--conversation-column-width);
  margin-inline: auto;
}
.conversation-panel > .composer-wrap {
  padding-inline: max(var(--openbot-space-1-5), calc((100% - var(--conversation-column-width) - 12px) / 2));
}
.conversation-panel[data-settings-panel] > .composer-wrap {
  padding-inline: max( var(--openbot-space-1-5), calc((100% - var(--settings-panel-width, 360px) - var(--conversation-column-width) - 12px) / 2) );
}
.conversation-panel > .conversation-covered {
  position: absolute;
  inset: 0;
  visibility: hidden;
}
.conversation-panel > :is(.conversation-scroll, .composer-wrap) > * {
  contain-intrinsic-size: auto none;
}
.conversation-panel > .conversation-covered > * {
  content-visibility: hidden;
}
.conversation-panel > .composer-wrap.conversation-covered {
  top: auto;
}
.conversation-panel > .composer-wrap .mention-picker {
  --mention-picker-side-inset: max(
    calc(var(--openbot-space-1-5) + 12px),
    calc((100% - var(--conversation-column-width) + 12px) / 2)
  );
}
.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: calc(30px * -0.14);
  width: 30px;
  height: 30px;
  border-radius: var(--openbot-radius-md);
}
.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-block: 6px;
  padding-inline: 13px 7px;
  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-block: 0;
  padding-inline: 8px 12px;
  background: transparent;
}
.conversation-heading-group {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}
.chat-search {
  position: absolute;
  z-index: 13;
  top: 19px;
  inset-inline-end: 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-inline-start: 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-inline-end: 3px;
}
::highlight(openbot-chat-search-results) {
  background: var(--openbot-accent-soft);
}
::highlight(openbot-chat-search-current) {
  background: var(--openbot-warning);
  color: var(--openbot-paper-text);
}
.conversation-title[aria-label="View agent settings"]:hover {
  color: var(--openbot-text-primary);
}
.browser-panel {
  position: absolute;
  z-index: 14;
  top: 0;
  inset-inline-end: 0;
  bottom: 0;
  display: flex;
  width: var(--browser-panel-width, 380px);
  flex-direction: column;
  border-inline-start: 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-block: 0;
  padding-inline: 11px 7px;
}
.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: start;
}
.file-preview-spreadsheet-table th, .file-preview-spreadsheet-table td {
  border-top: 1px solid var(--openbot-border);
  border-inline-end: 1px solid var(--openbot-border);
  padding: 8px 12px;
  text-align: start;
  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-inline-end: 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: start;
}
.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;
}
:dir(rtl) .file-preview-panel.t-panel-slide {
  --panel-translate-x: -24px;
}
:dir(rtl) .file-preview-header svg[class~="lucide-arrow-left"] {
  transform: scaleX(-1);
}
.conversation-panel.browser-panel-active {
  padding-inline-end: 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-block: 0;
  padding-inline: 0 8px;
  background: var(--openbot-bg-sidebar);
}
.remote-desktop-workspace-darwin .remote-desktop-header {
  padding-inline-start: 84px;
}
.remote-desktop-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  flex: 0 1 auto;
  justify-content: flex-end;
  gap: 4px;
  margin-inline-start: 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-lg);
}
.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;
  inset-inline-end: 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-profile-status, .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-profile-status {
  min-width: 0;
  max-width: 240px;
  flex-shrink: 1;
  background: var(--openbot-bg-control);
  color: var(--openbot-text-secondary);
}
.browser-profile-dot {
  display: block;
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-pill);
}
.browser-profile-dot-shared {
  background: var(--openbot-text-muted);
}
.browser-profile-status-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser-profile-status svg, .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:not(:has(.agent-avatar-custom)) {
  filter: brightness(1.08);
}
.agent-settings-avatar-badge {
  position: absolute;
  inset-inline-end: -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: var(--openbot-space-2);
}
.agent-routine-list-item {
  display: grid;
  min-height: 52px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--openbot-space-3);
  align-items: center;
  padding-inline-end: var(--openbot-space-4);
}
.agent-routine-row {
  display: grid;
  width: 100%;
  height: auto;
  align-self: stretch;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: var(--openbot-space-3);
  align-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding-block: var(--openbot-space-2);
  padding-inline: var(--openbot-space-4) 0;
  text-align: start;
}
.agent-routine-row:focus-visible {
  outline: none;
}
.agent-routine-card {
  transition: background-color var(--openbot-duration-hover) ease;
}
.agent-routine-card:has(.agent-routine-row:focus-visible) {
  border-color: var(--openbot-border-strong);
}
.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: 16px;
  height: 16px;
  stroke-width: var(--openbot-icon-stroke);
}
@media (hover: hover) and (pointer: fine) {
  .agent-routine-card:has(.agent-routine-row:hover) {
    background: var(--openbot-hover);
  }
  .agent-routine-list-item > .agent-routine-row:hover:not(:disabled) {
    background: transparent;
  }
}
.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-run-in {
  padding-inline-start: var(--openbot-space-2);
}
.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-routines-footer {
  flex: none;
  padding: 0 15px 15px;
}
.agent-routines-footer:empty {
  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-field-error {
  margin-block: var(--openbot-space-1-5) 0;
  margin-inline: var(--openbot-space-2) 0;
}
.agent-routine-trigger-kind {
  display: grid;
  min-width: 0;
  grid-template-columns: 1fr 1fr;
  gap: var(--openbot-space-1);
  margin: 0 0 var(--openbot-space-2);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-md);
  padding: var(--openbot-space-0-5);
}
.agent-routine-trigger-kind-icon {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.agent-routine-when h3, .agent-routine-history h3 {
  margin-block: 0 var(--openbot-space-1-5);
  margin-inline: var(--openbot-space-2) 0;
  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: start;
}
.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-block: var(--openbot-space-2);
  padding-inline: var(--openbot-space-3) var(--openbot-space-2);
}
.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-body {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: var(--openbot-space-2);
}
.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: start;
}
.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-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);
}
.agent-memories-view {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
}
.agent-memories-view .settings-panel-header h2 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-memories-page {
  display: grid;
  width: min(100%, 680px);
  gap: var(--openbot-space-6);
  margin-inline: auto;
}
.agent-memories-page .settings-link-group, .agent-memories-page :is(.agent-memory-state, .agent-memory-limit, .agent-memory-error) {
  margin: 0;
}
.agent-memories-search {
  position: relative;
  min-width: 0;
}
.agent-memories-search-icon {
  position: absolute;
  top: 50%;
  inset-inline-start: calc(var(--openbot-space-3) + 1px);
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
  pointer-events: none;
  stroke-width: var(--openbot-icon-stroke);
  transform: translateY(-50%);
}
.agent-memories-search .agent-memories-search-input {
  width: 100%;
  height: 42px;
  padding-inline: calc(var(--openbot-space-3) + var(--openbot-icon-sm) + var(--openbot-space-2)) var(--openbot-space-3);
  border-color: var(--openbot-border);
  background: var(--openbot-bg-surface);
  font-size: var(--openbot-text-md);
}
.agent-memories-search-input::-webkit-search-cancel-button {
  display: none;
}
.agent-memories-reading {
  display: grid;
  gap: var(--openbot-space-3);
}
.agent-memories-text {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-xl);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.agent-memories-meta {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.agent-memories-actions, .agent-memories-clear {
  display: flex;
  gap: var(--openbot-space-2);
}
.agent-memories-editor {
  display: grid;
  gap: var(--openbot-space-2);
}
.agent-memories-field {
  min-height: 0;
  max-height: 320px;
  field-sizing: content;
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-xl);
}
.agent-memories-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
}
.agent-memories-view-empty {
  display: flex;
  min-height: 456px;
  flex-direction: column;
}
.agent-memories-empty {
  display: grid;
  flex: 1;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) auto;
}
.agent-memories-empty-list {
  min-width: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  mask-image: linear-gradient(var(--openbot-text-primary) 45%, var(--openbot-transparent));
  transition: opacity 700ms var(--openbot-ease-out), filter 700ms var(--openbot-ease-out);
}
.agent-memories-empty-list[data-clearing] {
  opacity: 0;
  filter: blur(3px);
}
.agent-memories-empty-item {
  display: grid;
  grid-template-rows: 1fr;
  animation: agent-memories-empty-open 520ms var(--openbot-ease-out) both;
  transition: opacity 640ms var(--openbot-ease-out);
}
.agent-memories-empty-item > *, .agent-memories-empty-fold > * {
  min-height: 0;
  overflow: hidden;
}
@keyframes agent-memories-empty-open {
  from {
    grid-template-rows: 0fr;
    opacity: 0;
  }
}
.agent-memories-empty-item[data-age="1"] {
  opacity: 0.6;
}
.agent-memories-empty-item[data-age="2"] {
  opacity: 0.4;
}
.agent-memories-empty-item[data-age="3"] {
  opacity: 0.25;
}
.agent-memories-empty-row {
  min-height: 0;
}
.agent-memories-empty-row .agent-memory-row-main {
  height: auto;
}
.agent-memories-empty-fold {
  display: grid;
  transition: grid-template-rows 640ms var(--openbot-ease-out), opacity 640ms var(--openbot-ease-out);
}
.agent-memories-empty-fold-hand {
  grid-template-rows: 1fr;
}
.agent-memories-empty-fold-typed {
  grid-template-rows: 0fr;
  opacity: 0;
}
.agent-memories-empty-item[data-dry] .agent-memories-empty-fold-hand {
  grid-template-rows: 0fr;
  opacity: 0;
}
.agent-memories-empty-item[data-dry] .agent-memories-empty-fold-typed {
  grid-template-rows: 1fr;
  opacity: 1;
}
.agent-memories-hand {
  color: var(--openbot-accent-text);
  font-family: "Bradley Hand", "Noteworthy", "Segoe Print", cursive;
  font-weight: var(--openbot-weight-semibold);
}
.agent-memories-empty-hand {
  display: grid;
  padding-block: var(--openbot-space-0-5);
  font-size: var(--openbot-text-xl);
  line-height: 1.3;
  transform: rotate(-0.6deg);
  transform-origin: left top;
}
.agent-memories-empty-line {
  white-space: nowrap;
  clip-path: inset(-0.4em calc(100% + 0.2em) -0.4em -0.2em);
  animation: agent-memories-empty-write var(--agent-memories-empty-length) linear var(--agent-memories-empty-delay) forwards;
}
@keyframes agent-memories-empty-write {
  to {
    clip-path: inset(-0.4em -0.2em -0.4em -0.2em);
  }
}
:dir(rtl) .agent-memories-empty-hand {
  transform-origin: right top;
}
:dir(rtl) .agent-memories-empty-line {
  clip-path: inset(-0.4em -0.2em -0.4em calc(100% + 0.2em));
}
.agent-memories-empty-meta {
  opacity: 0;
  animation: agent-memories-empty-show 360ms var(--openbot-ease-out) var(--agent-memories-empty-delay) forwards;
}
@keyframes agent-memories-empty-show {
  to {
    opacity: 1;
  }
}
.agent-memories-empty-pitch {
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3) var(--openbot-space-4);
  text-align: center;
}
.agent-memories-empty-title {
  display: grid;
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-3xl);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.agent-memories-empty-title > .agent-memories-empty-lead {
  color: var(--openbot-text-muted);
}
.agent-memories-empty-word {
  line-height: 1;
  clip-path: inset(-0.4em calc(100% + 0.2em) -0.4em -0.2em);
  animation: agent-memories-empty-write 640ms linear 400ms forwards;
}
.agent-memories-empty-lines {
  display: grid;
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
.agent-memories-empty-action {
  margin-top: var(--openbot-space-1);
}
.agent-memories-empty[data-still] :is( .agent-memories-empty-item, .agent-memories-empty-fold, .agent-memories-empty-line, .agent-memories-empty-meta, .agent-memories-empty-word ) {
  animation: none;
  transition: none;
  clip-path: none;
}
.agent-memories-empty[data-still] :is(.agent-memories-empty-line, .agent-memories-empty-meta, .agent-memories-empty-word) {
  opacity: 1;
}
.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-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: start;
}
.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-on-accent);
}
.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-inline-start: 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-session-setting > .ui-select, .agent-session-setting .agent-settings-runtime-row {
  border-radius: inherit;
}
.agent-session-setting-notes {
  display: grid;
  justify-items: start;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-2) var(--openbot-space-3);
}
.agent-session-setting > .agent-session-setting-notes {
  padding-top: 0;
}
.agent-session-setting-notes:empty {
  display: none;
}
.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: start;
}
.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;
}
.agent-folders-entry {
  position: relative;
}
.agent-folders-entry-add-slot {
  flex: none;
  width: 24px;
}
.agent-folders-entry-add {
  position: absolute;
  top: 50%;
  inset-inline-end: calc(var(--openbot-space-3) + 14px + var(--openbot-space-2));
  color: var(--openbot-text-muted);
  transform: translateY(-50%);
}
.agent-folders-entry-add::before {
  position: absolute;
  inset: -8px;
  content: "";
}
.agent-folders-count, .agent-folders-lost {
  font-variant-numeric: tabular-nums;
}
.agent-folders-lost {
  color: var(--openbot-warning-text);
}
.agent-folders-dot {
  margin-inline: calc(var(--openbot-space-1) * -1);
}
.agent-folders-entry, .agent-folders-drop-target {
  outline: 1px dashed transparent;
  outline-offset: -1px;
  transition: outline-color var(--openbot-duration-fast) var(--openbot-ease-out), background-color var(--openbot-duration-fast) var(--openbot-ease-out);
}
.agent-folders-entry[data-dragging], .agent-folders-drop-target[data-dragging] {
  outline-color: var(--openbot-text-muted);
  background-color: var(--openbot-hover);
}
.agent-folders-page {
  display: grid;
  gap: var(--openbot-space-4);
}
.agent-folders-row {
  display: grid;
  grid-auto-columns: auto;
  grid-auto-flow: column;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--openbot-space-2);
  min-height: 48px;
  padding-block: var(--openbot-space-1-5);
  padding-inline: var(--openbot-space-3) var(--openbot-space-1-5);
}
.agent-folders-text {
  display: grid;
  min-width: 0;
}
.agent-folders-name {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-folders-path {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-folders-row[data-missing] .settings-link-icon, .agent-folders-row[data-missing] .agent-folders-path {
  color: var(--openbot-warning-text);
}
.agent-folders-access {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--openbot-space-2);
  padding-block: var(--openbot-space-2);
  padding-inline: var(--openbot-space-3) var(--openbot-space-2);
}
.agent-folders-access-text {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  text-wrap: pretty;
}
.agent-folders-remove {
  position: relative;
  color: var(--openbot-text-muted);
}
.agent-folders-remove::before {
  position: absolute;
  inset: -6px;
  content: "";
}
.agent-folders-add {
  color: var(--openbot-text-secondary);
}
.agent-folders-drop-target[data-dragging] .agent-folders-add {
  color: var(--openbot-text-primary);
}
@media (prefers-reduced-motion: no-preference) {
  .agent-folders-row[data-fresh] {
    animation: agent-folders-row-in var(--openbot-duration-normal) var(--openbot-ease-out) both;
  }
  .agent-folders-chat-drop {
    animation: agent-folders-fade-in var(--openbot-duration-fast) var(--openbot-ease-out) both;
  }
  .agent-folders-row[data-flash], .agent-folders-entry[data-flash] {
    animation: agent-folders-row-flash 900ms var(--openbot-ease-out);
  }
}
@media (prefers-reduced-motion: reduce) {
  .agent-folders-row[data-flash], .agent-folders-entry[data-flash] {
    animation: agent-folders-row-flash 900ms steps(1, end);
  }
}
@keyframes agent-folders-row-flash {
  from, 40% {
    background-color: var(--openbot-hover);
  }
}
@keyframes agent-folders-row-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}
@keyframes agent-folders-fade-in {
  from {
    opacity: 0;
  }
}
.agent-folders-chat-drop {
  position: absolute;
  z-index: 60;
  inset: var(--openbot-space-3);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--openbot-space-3);
  border-radius: var(--openbot-radius-lg);
  background: var(--background);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--background) 70%, transparent);
  }
  pointer-events: none;
  backdrop-filter: blur(3px);
}
.conversation-panel[data-settings-panel] .agent-folders-chat-drop {
  inset-inline-end: calc(var(--settings-panel-width, 360px) + var(--openbot-space-3));
}
.agent-folders-chat-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-6);
  border: 1px dashed var(--openbot-text-muted);
  border-radius: var(--openbot-radius-lg);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
  text-align: center;
  text-wrap: balance;
  transition: border-color var(--openbot-duration-fast) var(--openbot-ease-out), background-color var(--openbot-duration-fast) var(--openbot-ease-out);
}
.agent-folders-chat-zone > span {
  max-width: 28ch;
}
.agent-folders-chat-zone-folder {
  pointer-events: auto;
}
.agent-folders-chat-zone[data-dragging] {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 70%, var(--openbot-text-primary));
  }
  background: var(--openbot-hover);
}
.agent-folders-chat-zone svg {
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--openbot-text-secondary);
  transition: color var(--openbot-duration-fast) var(--openbot-ease-out);
}
.agent-folders-chat-zone[data-dragging] svg {
  color: var(--openbot-text-primary);
}
.host-folder-picker-places {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-1);
  padding: 0 var(--openbot-space-3) var(--openbot-space-2);
}
.host-folder-picker-path {
  margin: 0;
  padding: 0 var(--openbot-space-3) var(--openbot-space-2);
  overflow-wrap: anywhere;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.host-folder-picker .provider-more-list {
  flex: 1 1 auto;
  min-height: 160px;
}
.host-folder-picker-note {
  margin: 0;
  padding: var(--openbot-space-2) var(--openbot-space-3);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.host-folder-picker-footer {
  display: flex;
  flex-shrink: 0;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-2) var(--openbot-space-1) var(--openbot-space-1);
}
.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-inline-start: 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-inline-start: 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-separator {
  color: var(--openbot-text-muted);
}
.routine-segmented {
  display: flex;
  margin-inline-start: 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-block: var(--openbot-space-2) var(--openbot-space-1);
  padding-inline: var(--openbot-space-3) var(--openbot-space-1);
}
.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-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-3) var(--openbot-space-1);
}
: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-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-3) var(--openbot-space-1);
  color: inherit;
  font: inherit;
  text-align: start;
}
.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, .routine-webhook-actions > .ui-icon-button {
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
}
.routine-webhook-field:has(> .routine-webhook-actions) {
  grid-template-columns: minmax(84px, auto) minmax(0, 1fr) minmax(var(--openbot-control-sm), auto);
}
.routine-webhook-actions {
  display: flex;
  align-items: center;
}
.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-card-endpoint {
  display: grid;
  border-bottom: 1px solid var(--openbot-border);
}
.routine-webhook-card-endpoint > .routine-webhook-field, .routine-webhook-card-endpoint > .routine-webhook-note {
  padding-inline-start: 0;
}
.routine-webhook-steps {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.routine-webhook-steps > li {
  display: grid;
  grid-template-columns: var(--openbot-control-sm) minmax(0, 1fr);
  gap: var(--openbot-space-2);
  border-top: 1px solid var(--openbot-border);
  padding: var(--openbot-space-3);
}
.routine-webhook-step-body {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-1-5);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.routine-webhook-step-body > strong {
  font-weight: var(--openbot-weight-medium);
}
.routine-webhook-steps > li[data-disabled] .routine-webhook-step-body > strong {
  color: var(--openbot-text-muted);
}
.routine-webhook-step-marker {
  display: inline-grid;
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
  place-items: 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);
}
.routine-webhook-step-marker[data-done] {
  border-color: var(--openbot-success);
  background: var(--openbot-success-soft);
  color: var(--openbot-success-text);
}
.routine-webhook-step-check {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.routine-webhook-inset {
  min-width: 0;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-sm);
}
.routine-webhook-inset > .routine-webhook-field {
  border-top: 0;
}
.routine-webhook-step-button {
  justify-self: start;
}
.routine-webhook-disclosure {
  justify-self: start;
  margin-inline-start: calc(var(--openbot-space-2) * -1);
  padding-inline: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: inherit;
}
.routine-webhook-disclosure-icon {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  stroke-width: var(--openbot-icon-stroke);
}
.routine-webhook-filter {
  display: grid;
  gap: var(--openbot-space-1);
}
.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-inline-start: 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-block: 0 var(--openbot-space-1);
  margin-inline: var(--openbot-space-1) 0;
  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(560px, calc(100dvh - 16px), var(--kb-popper-content-available-height, 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);
}
:dir(rtl) .routine-calendar-header :is(svg[class~="lucide-chevron-left"], svg[class~="lucide-chevron-right"]), :dir(rtl) .routine-webhook-events-toggle > svg[class~="lucide-chevron-right"], :dir(rtl) svg[class~="lucide-chevron-right"].routine-webhook-disclosure-icon {
  transform: scaleX(-1);
}
.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-inline-start: 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-inline-start: 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-inline-start: 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: start;
  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: start;
}
.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, .routine-planner-empty-board {
  display: grid;
  min-width: 0;
}
.routine-planner-empty > *, .routine-planner-empty-board > * {
  grid-area: 1 / 1;
}
.routine-planner-empty-board {
  pointer-events: none;
  user-select: none;
}
.routine-planner-empty-cells, .routine-planner-empty-runs {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: 10rem;
}
.routine-planner-empty-cells {
  mask-image: radial-gradient(ellipse 36% 36% at 50% 50%, var(--openbot-transparent) 68%, var(--openbot-text-primary) 100%), radial-gradient(ellipse 72% 78% at 50% 50%, var(--openbot-text-primary) 50%, var(--openbot-transparent) 100%);
  mask-composite: intersect;
}
.routine-planner-empty-cell {
  border-top: 1px solid var(--openbot-border);
  border-inline-start: 1px solid var(--openbot-border);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  color: var(--openbot-text-dim);
  font-size: var(--openbot-text-md);
}
.routine-planner-empty-cell[data-outside] {
  opacity: 0.45;
}
.routine-planner-empty-cell[data-today] {
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-semibold);
}
.routine-planner-empty-run {
  display: grid;
  min-width: 0;
  align-self: start;
  justify-items: start;
  gap: var(--openbot-space-2);
  grid-row: var(--routine-planner-empty-row);
  grid-column: var(--routine-planner-empty-column);
  margin-top: calc(var(--openbot-space-8) + var(--openbot-space-1));
  padding-inline: var(--openbot-space-2);
  animation: routine-planner-empty-life var(--routine-planner-empty-life) var(--openbot-ease-out) both;
}
.routine-planner-empty-run > .routine-planner-run {
  width: 100%;
}
.routine-planner-empty-day {
  display: none;
}
.routine-planner-empty-check {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  opacity: 0;
  animation: routine-planner-empty-draw 420ms var(--openbot-ease-out) 380ms forwards;
}
@keyframes routine-planner-empty-life {
  0% {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(10px) scale(0.96);
  }
  8%, 88% {
    opacity: 1;
    filter: blur(0);
    transform: none;
  }
  100% {
    opacity: 0;
    filter: blur(3px);
    transform: translateY(-4px);
  }
}
@keyframes routine-planner-empty-draw {
  from {
    opacity: 1;
  }
  to {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}
.routine-planner-hand {
  color: var(--openbot-accent-text);
  font-family: "Bradley Hand", "Noteworthy", "Segoe Print", cursive;
  font-weight: var(--openbot-weight-semibold);
}
.routine-planner-empty-note {
  display: grid;
  width: fit-content;
  padding-inline: var(--openbot-space-1);
  font-size: var(--openbot-text-xl);
  line-height: 1.3;
  transform: rotate(-1.5deg);
  transform-origin: left top;
}
.routine-planner-empty-line {
  clip-path: inset(-0.4em 100% -0.4em -0.2em);
  animation: routine-planner-empty-write var(--routine-planner-empty-length) linear var(--routine-planner-empty-delay) forwards;
}
@keyframes routine-planner-empty-write {
  to {
    clip-path: inset(-0.4em -0.2em -0.4em -0.2em);
  }
}
.routine-planner-empty-underline {
  width: 100%;
  height: var(--openbot-space-2);
  overflow: visible;
}
.routine-planner-empty-underline path {
  fill: none;
  stroke: currentColor;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
  opacity: 0;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  animation: routine-planner-empty-draw 520ms var(--openbot-ease-out) var(--routine-planner-empty-delay) forwards;
}
.routine-planner-empty-pitch {
  z-index: 1;
  display: grid;
  max-width: 34rem;
  place-self: center;
  justify-items: center;
  gap: var(--openbot-space-4);
  padding: var(--openbot-space-6);
  text-align: center;
}
.routine-planner-empty-title {
  display: grid;
  font-size: var(--openbot-text-display);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.routine-planner-empty-title > .routine-planner-empty-lead {
  color: var(--openbot-text-muted);
}
.routine-planner-empty-done {
  clip-path: inset(-0.4em 100% -0.4em -0.2em);
  animation: routine-planner-empty-write 520ms linear 500ms forwards;
}
.routine-planner-empty-lines {
  display: grid;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-xl);
  line-height: 1.5;
}
.routine-planner-empty-action.ui-button {
  width: 100%;
  max-width: 22rem;
  height: var(--openbot-control-lg);
  margin-top: var(--openbot-space-2);
}
.routine-planner-empty-menu {
  min-width: 14rem;
  max-height: min(520px, calc(100dvh - 16px), var(--kb-popper-content-available-height, 520px));
  overflow-y: auto;
}
.routine-planner-empty[data-still] :is( .routine-planner-empty-run, .routine-planner-empty-check, .routine-planner-empty-line, .routine-planner-empty-underline path, .routine-planner-empty-done ) {
  animation: none;
  clip-path: none;
  stroke-dashoffset: 0;
  opacity: 1;
}
.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;
  }
  .routine-planner-empty > .routine-planner-empty-board {
    grid-area: 2 / 1;
  }
  .routine-planner-empty-pitch {
    padding-inline: 0;
  }
  .routine-planner-empty-title {
    font-size: var(--openbot-text-3xl);
  }
  .routine-planner-empty-lines {
    font-size: var(--openbot-text-lg);
  }
  .routine-planner-empty-cells {
    display: none;
  }
  .routine-planner-empty-runs {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(3, 8rem);
    grid-auto-rows: 0;
  }
  .routine-planner-empty-run {
    width: 100%;
    grid-row: var(--routine-planner-empty-slot);
    grid-column: 1;
    margin-top: 0;
    padding-inline: 0;
  }
  .routine-planner-empty-day {
    display: block;
    color: var(--openbot-text-dim);
    font-size: var(--openbot-text-sm);
  }
  .routine-planner-empty-note {
    font-size: var(--openbot-text-lg);
  }
}
:dir(rtl) .routine-planner-empty-note {
  transform-origin: right top;
}
:dir(rtl) .routine-planner-empty-line {
  clip-path: inset(-0.4em -0.2em -0.4em 100%);
}
:dir(rtl) .routine-planner-identity svg[class~="lucide-arrow-left"], :dir(rtl) .routine-planner-nav :is(svg[class~="lucide-chevron-left"], svg[class~="lucide-chevron-right"]) {
  transform: scaleX(-1);
}
.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-inline-start: 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;
}
:dir(rtl) .chat-action-card-open svg[class~="lucide-chevron-right"] {
  transform: scaleX(-1);
}
.marketplace-suggestion.ui-block-card {
  max-width: 520px;
}
.marketplace-suggestion .marketplace-suggestion-icon {
  width: var(--openbot-control-lg);
  height: var(--openbot-control-lg);
  flex: none;
  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 .marketplace-suggestion-icon > .connector-brand-tile {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.marketplace-suggestion .ui-block-title, .marketplace-suggestion .ui-block-subtitle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.marketplace-suggestion .marketplace-suggestion-name {
  display: inline-block;
  height: auto;
  max-width: 100%;
  overflow: hidden;
  padding: 0;
  color: inherit;
  font: inherit;
  text-overflow: ellipsis;
  vertical-align: top;
  white-space: nowrap;
}
.marketplace-suggestion-controls {
  display: contents;
}
.marketplace-suggestion-question {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  overflow-wrap: anywhere;
}
.marketplace-suggestion-action {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
}
.marketplace-suggestion .marketplace-suggestion-button {
  overflow: clip;
}
.marketplace-suggestion .marketplace-suggestion-button.ui-button[data-state="connected"], .marketplace-suggestion .marketplace-suggestion-button.ui-button[data-state="connected"]:hover {
  border-color: transparent;
  background: var(--openbot-success);
  color: var(--openbot-text-on-light);
  cursor: default;
}
:root[data-openbot-color-scheme="light"] .marketplace-suggestion .marketplace-suggestion-button.ui-button[data-state="connected"] {
  background: var(--openbot-success-text);
}
.marketplace-suggestion-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  justify-items: center;
}
.marketplace-suggestion-layer {
  display: inline-flex;
  grid-area: 1 / 1;
  align-items: center;
  gap: var(--openbot-space-1-5);
  white-space: nowrap;
}
.marketplace-suggestion-button[data-state="connected"] [data-layer="start"], .marketplace-suggestion-button:not([data-state="connected"]) [data-layer="done"] {
  opacity: 0;
}
.marketplace-suggestion-layer > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.marketplace-suggestion-spinner {
  display: inline-flex;
  width: 0;
  margin-inline-end: calc(-1 * var(--openbot-space-1-5));
  opacity: 0;
}
.marketplace-suggestion-button[data-state="busy"] .marketplace-suggestion-spinner {
  width: auto;
  margin-inline-end: 0;
  opacity: 1;
}
.marketplace-suggestion-controls[data-state="connected"] .marketplace-suggestion-dismiss {
  width: 0;
  min-width: 0;
  margin-inline-start: calc(-1 * var(--openbot-space-2));
  overflow: hidden;
  border-width: 0;
  padding: 0;
  opacity: 0;
  visibility: hidden;
}
.marketplace-suggestion-controls[data-motion] .marketplace-suggestion-button.ui-button {
  transition: background-color var(--openbot-duration-slow) var(--openbot-ease-out), color var(--openbot-duration-slow) var(--openbot-ease-out), opacity var(--openbot-duration-normal) var(--openbot-ease-out);
}
.marketplace-suggestion-controls[data-motion] .marketplace-suggestion-layer {
  transition: opacity var(--openbot-duration-normal) var(--openbot-ease-out);
}
@media (prefers-reduced-motion: no-preference) {
  .marketplace-suggestion-controls[data-motion] .marketplace-suggestion-stage {
    transition: width var(--openbot-duration-slow) var(--openbot-ease-out);
  }
  .marketplace-suggestion-controls[data-motion] .marketplace-suggestion-layer {
    transition: opacity var(--openbot-duration-normal) var(--openbot-ease-out), transform var(--openbot-duration-slow) var(--openbot-ease-out);
  }
  .marketplace-suggestion-button[data-state="connected"] [data-layer="start"] {
    transform: translateY(-40%);
  }
  .marketplace-suggestion-button:not([data-state="connected"]) [data-layer="done"] {
    transform: translateY(40%);
  }
  .marketplace-suggestion-controls[data-motion] .marketplace-suggestion-layer > svg path {
    stroke-dasharray: 24 24;
    stroke-dashoffset: -24;
    transition: stroke-dashoffset var(--openbot-duration-overlay) var(--openbot-ease-out) var(--openbot-duration-fast);
  }
  .marketplace-suggestion-controls[data-motion] .marketplace-suggestion-button[data-state="connected"] svg path {
    stroke-dashoffset: 0;
  }
  .marketplace-suggestion-controls[data-motion] .marketplace-suggestion-spinner {
    transform: scale(0.6);
    transition: opacity var(--openbot-duration-normal) var(--openbot-ease-out), transform var(--openbot-duration-normal) var(--openbot-ease-out);
  }
  .marketplace-suggestion-controls[data-motion] .marketplace-suggestion-button[data-state="busy"] .marketplace-suggestion-spinner {
    transform: none;
  }
  .marketplace-suggestion-controls[data-motion] .marketplace-suggestion-dismiss {
    transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out), width var(--openbot-duration-slow) var(--openbot-ease-out), margin var(--openbot-duration-slow) var(--openbot-ease-out), visibility 0s linear var(--openbot-duration-slow);
  }
}
.marketplace-suggestion-unavailable {
  display: flex;
  margin: 0;
  gap: var(--openbot-space-2);
  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);
}
.server-install-card[data-step="expired"] .server-install-card-status {
  color: var(--openbot-warning);
}
.server-install-card-status-text {
  display: inline-block;
}
.server-install-card-tile {
  --server-install-size: var(--openbot-control-lg);
  --server-install-radius: var(--openbot-radius-md);
  --server-install-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  display: grid;
  flex: 0 0 auto;
  width: var(--server-install-size);
  height: var(--server-install-size);
  place-items: center;
  border-radius: var(--server-install-radius);
}
.server-install-card-tile[data-step="expired"] {
  box-sizing: border-box;
  border: 1px solid var(--openbot-border);
  background: var(--openbot-bg-surface-raised);
}
.server-install-card-tile > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.server-install-card-tile[data-step] .server-install-card-face {
  display: grid;
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  place-items: center;
  border-radius: var(--server-install-radius);
}
.server-install-card-tile[data-step] .server-install-card-logo {
  --server-gradient-logo-size: var(--server-install-size);
  --server-gradient-logo-radius: var(--server-install-radius);
  position: relative;
  overflow: hidden;
  animation: server-install-pop-in 520ms var(--server-install-spring) 380ms backwards;
}
.server-install-card-logo > img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.server-install-card-tile:is([data-step="starting"], [data-step="connected"], [data-step="offline"]) .ui-plush-eye {
  animation: ui-plush-squint 220ms var(--openbot-ease-out) forwards;
}
.server-install-card-tile:is([data-step="starting"], [data-step="connected"], [data-step="offline"]) .server-install-card-loader {
  animation: server-install-pop-out 420ms var(--openbot-ease-out) 200ms forwards;
}
.server-install-card-tile[data-step="starting"] .server-install-card-logo {
  animation: server-install-pop-in 520ms var(--server-install-spring) 380ms backwards, server-install-breathe 1.8s ease-in-out 900ms infinite;
}
.server-install-card-tile[data-step="connected"] .server-install-card-logo {
  animation: server-install-pop-in 520ms var(--server-install-spring) 380ms backwards, server-install-settle 420ms var(--server-install-spring);
}
.server-install-card-badge {
  position: absolute;
  right: -5px;
  bottom: -5px;
  display: grid;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  place-items: center;
  border: 2px solid var(--openbot-bg-canvas);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-muted);
  transition: background-color var(--openbot-duration-normal) var(--openbot-ease-out), color var(--openbot-duration-normal) var(--openbot-ease-out);
  animation: server-install-badge-in 360ms var(--server-install-spring) 640ms backwards;
}
.server-install-card-badge[data-step="connected"] {
  background: var(--openbot-success);
  color: var(--openbot-bg-canvas);
}
.server-install-card-badge > svg {
  width: 10px;
  height: 10px;
}
.server-install-card-check * {
  stroke-dasharray: 20;
  animation: server-install-draw 360ms var(--openbot-ease-out) 80ms backwards;
}
.server-install-card-status-text, .server-install-card-action {
  animation: server-install-text-in var(--openbot-duration-slow) var(--openbot-ease-out);
}
.server-install-card-tile[data-revealed][data-step] .server-install-card-face, .server-install-card-tile[data-revealed] .server-install-card-badge, .server-install-card-tile[data-revealed] .server-install-card-check * {
  animation: none;
}
.server-install-card-tile[data-revealed][data-step="starting"] .server-install-card-logo {
  animation: server-install-breathe 1.8s ease-in-out infinite;
}
@keyframes server-install-pop-out {
  30% {
    opacity: 1;
    transform: translateY(-3px) scale(1.06);
  }
  100% {
    opacity: 0;
    transform: scale(0.4);
  }
}
@keyframes server-install-pop-in {
  from {
    opacity: 0;
    transform: scale(0.3);
  }
}
@keyframes server-install-breathe {
  50% {
    opacity: 0.6;
    transform: scale(0.94);
  }
}
@keyframes server-install-settle {
  from {
    opacity: 0.7;
    transform: scale(0.92);
  }
}
@keyframes server-install-badge-in {
  from {
    transform: scale(0);
  }
}
@keyframes server-install-draw {
  from {
    stroke-dashoffset: 20;
  }
}
@keyframes server-install-text-in {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .server-install-card .server-install-card-tile[data-step] .server-install-card-face, .server-install-card .server-install-card-badge, .server-install-card .server-install-card-check *, .server-install-card .server-install-card-status-text, .server-install-card .server-install-card-action {
    animation: none;
    transition: none;
  }
  .server-install-card .server-install-card-tile:is([data-step="starting"], [data-step="connected"], [data-step="offline"]) .server-install-card-loader {
    opacity: 0;
  }
}
.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-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-3) var(--openbot-space-2);
}
.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 {
  max-width: 560px;
  margin: var(--openbot-space-4) 0 0;
}
.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);
}
.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: start;
}
.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);
}
:dir(rtl) .task-list-chevron {
  transform: rotate(90deg);
}
.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);
}
:dir(rtl) .task-list-item {
  transform-origin: right top;
}
.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);
}
:dir(rtl) .task-list-item-text::after {
  transform-origin: right center;
}
.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-inline-start: 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: start;
}
.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-dock {
  position: relative;
  z-index: 3;
  width: calc(100% - 2 * var(--openbot-space-3));
  max-width: var(--conversation-column-width, none);
  height: 0;
  flex: 0 0 auto;
  margin-inline: auto;
}
.subagents-dock .subagents-dock-bar {
  position: absolute;
  top: var(--openbot-space-1);
  inset-inline-start: 0;
  display: flex;
  width: var(--message-wide-bubble-width);
  height: auto;
  align-items: center;
  gap: var(--openbot-space-2);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-canvas);
  padding: var(--openbot-space-1-5) var(--openbot-space-3);
  color: inherit;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-regular);
  line-height: var(--openbot-leading-md);
  text-align: start;
}
.subagents-dock .subagents-dock-bar:hover {
  border-color: var(--openbot-border-strong);
  background: var(--openbot-bg-canvas);
}
.subagents-dock-live {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
}
.subagents-dock-chevron {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  rotate: 90deg;
}
.subagents-list {
  display: flex;
  width: var(--message-wide-bubble-width);
  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: start;
  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-inline-start: 2px solid var(--openbot-border-strong);
  padding-inline-start: 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;
  }
}
:dir(rtl) svg[class~="lucide-chevron-right"].subagents-group-chevron {
  transform: scaleX(-1);
}
:dir(rtl) .subagents-group-header[aria-expanded="true"] svg[class~="lucide-chevron-right"].subagents-group-chevron {
  rotate: -90deg;
}
:dir(rtl) svg[class~="lucide-chevron-right"].subagents-row-chevron {
  transform: scaleX(-1);
}
.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-inline-end: var(--openbot-space-2);
  color: var(--openbot-text-muted);
}
.awaiting-replies-item {
  align-items: center;
}
.awaiting-replies-avatar {
  --agent-avatar-optical-offset: calc(var(--openbot-icon-md) * -0.14);
  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-wait] .awaiting-replies-state-label {
  color: var(--openbot-warning-text);
}
.awaiting-replies-open, .awaiting-replies-steer, .awaiting-replies-stop {
  flex: 0 0 auto;
}
.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: start;
  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;
}
.conversation-model-pending {
  flex: none;
  gap: 4px;
}
.conversation-model-pending svg {
  width: 12px;
  height: 12px;
}
.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-block: 0;
  padding-inline: 8px 9px;
  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-border-focus);
  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-inline-end: var(--openbot-space-1-5);
  content: "·";
}
.conversation-header .provider-model-trigger {
  interpolate-size: allow-keywords;
}
.conversation-header .provider-model-trigger :is(.provider-model-trigger-name, .provider-model-trigger-effort) {
  overflow: hidden;
  font-size: var(--openbot-text-sm);
  transition: width var(--openbot-duration-normal) var(--openbot-ease-out), margin var(--openbot-duration-normal) var(--openbot-ease-out), opacity var(--openbot-duration-normal) var(--openbot-ease-out);
}
.conversation-header[data-model-fit] .provider-model-trigger-effort, .conversation-header[data-model-fit="icon"] .provider-model-trigger-name, .conversation-header:where(:has(.agent-threads-header:not([data-mode="tabs"]))) .provider-model-trigger :is(.provider-model-trigger-name, .provider-model-trigger-effort) {
  width: 0;
  margin-inline-start: calc(var(--openbot-space-1-5) * -1);
  opacity: 0;
}
.conversation-header[data-model-measure] .provider-model-trigger :is(.provider-model-trigger-name, .provider-model-trigger-effort) {
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .conversation-header .provider-model-trigger :is(.provider-model-trigger-name, .provider-model-trigger-effort) {
    transition: none;
  }
}
.provider-model-trigger:where(:not(.provider-model-trigger-field)):has(.provider-model-trigger-fast) {
  max-width: 296px;
}
.provider-model-trigger-fast svg {
  width: 12px;
  height: 12px;
  margin-inline-end: 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;
  inset-inline-start: 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-block: 0;
  padding-inline: 12px 11px;
  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-inline-start: 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-sheet-inset);
  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-inline-end: 1px solid var(--openbot-border);
  background: var(--provider-model-rail-bg);
  padding: 9px 7px;
}
.provider-model-rail-tabs {
  display: flex;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-1);
  overflow-y: auto;
  scrollbar-width: none;
  margin: -5px;
  padding: 5px;
}
.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);
  inset-inline-end: 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;
  inset-inline-end: -3px;
  bottom: -3px;
  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-rail-account svg {
  width: 11px;
  height: 11px;
  stroke-width: 2.75;
}
.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-block: var(--openbot-space-1-5) var(--openbot-space-2);
  padding-inline: var(--ui-menu-inset) 0;
}
.provider-model-heading-text {
  flex: 1 1 auto;
  min-width: 0;
  padding-inline-end: 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-heading-limited {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--openbot-space-1-5);
}
.provider-model-heading-limited > span {
  grid-column: 1 / -1;
}
.provider-model-limit {
  display: block;
  justify-self: start;
  max-width: 100%;
  height: auto;
  padding: 1px var(--openbot-space-1-5);
  color: var(--openbot-danger-text);
  line-height: 15px;
  text-overflow: ellipsis;
}
.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;
  grid-template-columns: minmax(0, 1fr);
  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-block: var(--ui-menu-padding) 0;
  padding-inline: calc(var(--ui-menu-padding) + var(--ui-menu-inset)) var(--ui-menu-padding);
  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-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-inline-start: 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-speed-content {
  width: 300px;
}
.provider-model-speed-item .ui-select-item-label {
  display: flex;
  flex-direction: column;
  white-space: normal;
}
.provider-model-speed-name {
  color: var(--openbot-text-primary);
}
.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-block: var(--openbot-space-1-5);
  padding-inline: calc(var(--ui-menu-inset) + var(--openbot-icon-md) + var(--openbot-space-2)) var(--ui-menu-inset);
  color: var(--openbot-text-primary);
  cursor: pointer;
  text-align: start;
  transition: background-color var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease;
}
.provider-model-option::before {
  position: absolute;
  top: 50%;
  inset-inline-start: 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-wrap: anywhere;
  text-wrap: pretty;
  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-older {
  color: var(--openbot-text-secondary);
}
.provider-model-older::before {
  content: none;
}
.provider-model-older.ui-button {
  height: auto;
  font: inherit;
}
.provider-model-older[aria-expanded="true"] .provider-model-chevron {
  transform: rotate(180deg);
}
.provider-model-option-name > .provider-model-option-settings {
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  white-space: nowrap;
}
.provider-model-check {
  position: absolute;
  top: 50%;
  inset-inline-start: 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:not(.provider-model-trigger-field) .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 {
    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;
  inset-inline-end: 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-list[data-pushing] {
  overflow-y: clip;
}
.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-lg);
}
.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: start;
}
.unread-messages-mark-read {
  position: relative;
  z-index: 1;
  margin-inline-start: 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;
}
.unread-messages-divider[data-arrive] span {
  animation: unread-divider-badge-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}
.unread-messages-divider[data-arrive] hr {
  animation: unread-divider-line-in var(--openbot-duration-toast-enter) var(--openbot-ease-out) 60ms both;
}
.unread-messages-divider[data-arrive] hr:first-child {
  transform-origin: right center;
}
.unread-messages-divider[data-arrive] hr:last-child {
  transform-origin: left center;
}
@keyframes unread-divider-badge-in {
  from {
    opacity: 0;
    transform: scale(0.9);
    filter: blur(2px);
  }
}
@keyframes unread-divider-line-in {
  from {
    opacity: 0;
    transform: scaleX(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .unread-messages-divider[data-arrive] :is(hr, span) {
    animation: none;
  }
}
.time-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 656px;
  height: 24px;
  margin: var(--openbot-space-2) auto var(--openbot-space-4);
  padding: 4px 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 16px;
  text-align: center;
}
:dir(rtl) .unread-messages-divider[data-arrive] hr:first-child {
  transform-origin: left center;
}
:dir(rtl) .unread-messages-divider[data-arrive] hr:last-child {
  transform-origin: right center;
}
.chat-scroll-rail {
  --chat-scroll-rail-pitch: var(--openbot-space-2);
  --chat-scroll-rail-hit: clamp(12px, var(--chat-scroll-rail-inset, 20px), 20px);
  --chat-scroll-rail-ease: var(--openbot-ease-out);
  --chat-scroll-rail-quick: var(--openbot-duration-overlay);
  position: sticky;
  z-index: 3;
  top: 0;
  pointer-events: none;
}
.chat-scroll-rail-nav {
  position: absolute;
  top: 50%;
  inset-inline-end: calc(-1 * var(--chat-scroll-rail-inset, 0px));
  width: calc(var(--chat-scroll-rail-hit) + var(--openbot-space-2));
  height: min(64%, 600px);
  display: flex;
  flex-direction: column;
  transform: translateY(-50%);
}
.chat-scroll-rail-track {
  position: relative;
  transition: opacity var(--chat-scroll-rail-quick) ease;
  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;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.chat-scroll-rail-item {
  flex: none;
  height: var(--chat-scroll-rail-pitch);
  display: flex;
}
.chat-scroll-rail .chat-scroll-rail-link {
  position: relative;
  flex: none;
  width: var(--chat-scroll-rail-hit);
  height: auto;
  margin-inline-start: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: none;
  pointer-events: auto;
}
@media (hover: hover) {
  .chat-scroll-rail:not([data-near]) .chat-scroll-rail-nav:not(:has(:focus-visible)) .chat-scroll-rail-track {
    opacity: 0;
  }
}
.chat-scroll-rail-tick {
  position: absolute;
  top: 50%;
  inset-inline-end: var(--openbot-space-1);
  width: var(--openbot-space-1);
  height: 2px;
  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) 18%, transparent);
  }
  transform: translateY(-50%);
  transition: width var(--chat-scroll-rail-quick) var(--chat-scroll-rail-ease), background-color var(--chat-scroll-rail-quick) ease;
}
.chat-scroll-rail-item[data-state="read"] .chat-scroll-rail-tick {
  background: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-primary) 36%, transparent);
  }
}
.chat-scroll-rail-item[data-state="active"] .chat-scroll-rail-tick {
  width: var(--openbot-space-2);
  background: var(--openbot-text-secondary);
}
.chat-scroll-rail-nav:is(:hover, :has(:focus-visible)) .chat-scroll-rail-tick {
  width: var(--openbot-space-2);
}
.chat-scroll-rail-nav:is(:hover, :has(:focus-visible)) :is(.chat-scroll-rail-item[data-open] + * + *, .chat-scroll-rail-item:has(+ * + [data-open])) .chat-scroll-rail-tick {
  width: 10px;
}
.chat-scroll-rail-nav:is(:hover, :has(:focus-visible)) :is( .chat-scroll-rail-item[data-state="active"], .chat-scroll-rail-item[data-open] + *, .chat-scroll-rail-item:has(+ [data-open]) ) .chat-scroll-rail-tick {
  width: var(--openbot-space-3);
}
.chat-scroll-rail-nav:is(:hover, :has(:focus-visible)) .chat-scroll-rail-item[data-open] .chat-scroll-rail-tick {
  width: var(--openbot-space-4);
  background: var(--openbot-text-primary);
}
.chat-scroll-rail-card {
  --chat-scroll-rail-quick: var(--openbot-duration-overlay);
  --chat-scroll-rail-ease: var(--openbot-ease-out);
  position: fixed;
  z-index: var(--openbot-layer-tooltip);
  top: var(--chat-scroll-rail-card-top);
  right: calc(100vw - var(--chat-scroll-rail-card-left) + var(--openbot-space-2));
  width: max-content;
  max-width: min(300px, 60vw);
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-3);
  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) 8%, transparent);
  }
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-glass);
  backdrop-filter: blur(var(--openbot-space-4));
  font-size: var(--openbot-text-md);
  line-height: 18px;
  pointer-events: none;
  opacity: 0;
  filter: blur(var(--openbot-space-1));
  transform: translateY(-50%) translateX(var(--openbot-space-1));
  transition: opacity var(--chat-scroll-rail-quick) ease, filter var(--chat-scroll-rail-quick) ease, transform var(--chat-scroll-rail-quick) var(--chat-scroll-rail-ease);
}
:dir(rtl) .chat-scroll-rail-card {
  right: auto;
  left: calc(var(--chat-scroll-rail-card-right) + var(--openbot-space-2));
  transform: translateY(-50%) translateX(calc(-1 * var(--openbot-space-1)));
}
.chat-scroll-rail-card[data-open] {
  opacity: 1;
  filter: blur(0);
  transform: translateY(-50%);
}
.chat-scroll-rail-card-title {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-scroll-rail-card-reply {
  display: -webkit-box;
  overflow: hidden;
  color: var(--openbot-text-muted);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
@media (prefers-reduced-motion: reduce) {
  .chat-scroll-rail .chat-scroll-rail-track, .chat-scroll-rail .chat-scroll-rail-tick, .chat-scroll-rail-card.chat-scroll-rail-card {
    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, .message-author-gutter, .chat-visual-with-author {
  --message-author-face-size: var(--openbot-space-8);
  --message-author-column: calc(var(--message-author-face-size) + var(--openbot-space-1));
}
.message-entry-with-author {
  display: grid;
  grid-template-columns: var(--message-author-column) 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-author-avatar {
  width: var(--message-author-column);
  height: var(--message-author-column);
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  overflow: visible;
  border: 0;
  background: transparent;
}
.message-author-avatar .agent-avatar {
  --agent-avatar-optical-offset: -4px;
  width: var(--message-author-face-size);
  height: var(--message-author-face-size);
}
.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: var(--message-author-column);
  flex: 0 0 var(--message-author-column);
}
.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 {
  transform-origin: left bottom;
  animation: message-bubble-in 280ms cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
}
.message-entry-animated.message-entry-user {
  transform-origin: right bottom;
}
@media (prefers-reduced-motion: no-preference) {
  .message-entry-animated.message-entry-user {
    animation: message-sent-in 240ms 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-stack {
  display: grid;
  width: 100%;
  min-width: 0;
  justify-items: end;
  gap: var(--openbot-space-1);
}
.message-media-before {
  width: min(420px, 100%);
}
.message-media-before:has(.image-gallery) {
  width: min(520px, 100%);
}
.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;
}
.message-entry-actions-beside .message-shell {
  flex-wrap: wrap;
  row-gap: var(--openbot-space-1);
}
@supports (position-anchor: --message-bubble) and (anchor-scope: --message-bubble) {
  .message-entry-actions-beside {
    anchor-scope: --message-bubble;
  }
  .message-entry-actions-beside .message-shell .ui-bubble {
    anchor-name: --message-bubble;
  }
  .message-entry-actions-beside .message-author-avatar {
    position: absolute;
    bottom: anchor(--message-bubble bottom);
    left: 0;
  }
}
.message-steps {
  min-width: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--openbot-duration-hover) ease;
}
.message-steps > .agent-steps {
  margin-bottom: 0;
}
.message-steps .agent-steps .agent-steps-header {
  height: 24px;
  margin-inline-start: 0;
  padding-block: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  transition: background var(--openbot-duration-hover) ease, color var(--openbot-duration-hover) ease;
}
.message-steps .agent-steps .agent-steps-header:is(:hover, :focus-visible) {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
  outline: none;
}
.message-steps .agent-steps-header :is(.agent-steps-duration, .agent-steps-chevron) {
  color: inherit;
  transition: color var(--openbot-duration-hover) ease, rotate var(--openbot-duration-fast) var(--openbot-ease-out);
}
.message-steps .agent-steps-summary {
  font-weight: var(--openbot-weight-regular);
}
.message-entry:hover .message-steps, .message-entry:focus-within .message-steps, .message-entry:has(.message-actions-open) .message-steps {
  opacity: 1;
  pointer-events: auto;
}
@media (hover: none), (pointer: coarse) {
  .message-actions, .message-time, .message-steps {
    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 {
  --message-bubble-tint: var(--message-author-color, var(--openbot-accent));
  --message-bubble-tint-amount: 22%;
}
.ui-bubble.message-bubble-colored {
  --message-bubble-tint: var(--message-chat-color);
  --message-bubble-tint-amount: 30%;
}
:root[data-openbot-color-scheme="light"] .ui-bubble.message-bubble-colored {
  --message-bubble-tint-amount: 22%;
}
.ui-bubble:is(.message-bubble-member, .message-bubble-colored) {
  --message-plain-canvas: var(--openbot-bg-canvas);
  --message-plain-sidebar: var(--openbot-bg-sidebar);
  --message-plain-surface: var(--openbot-bg-surface);
  --message-plain-surface-raised: var(--openbot-bg-surface-raised);
  --message-plain-control: var(--openbot-bg-control);
  --message-plain-control-hover: var(--openbot-bg-control-hover);
  --message-plain-control-active: var(--openbot-bg-control-active);
  --message-bubble-base: var(--openbot-bg-surface-raised);
}
.message-entry-agent .ui-bubble-variant-muted.message-bubble-colored {
  --message-bubble-base: var(--openbot-bg-surface);
}
.ui-bubble.message-bubble-member > .ui-bubble-content {
  background: var(--message-bubble-tint);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix( in srgb, var(--message-bubble-tint) var(--message-bubble-tint-amount), var(--message-bubble-base) );
  }
}
.message-entry-user .ui-bubble.message-bubble-colored > .ui-bubble-content, .message-entry-agent .ui-bubble-variant-muted.message-bubble-colored > .ui-bubble-content {
  --message-surface-lift: 5%;
  --openbot-bg-canvas: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --openbot-bg-canvas: color-mix(
    in srgb,
    var(--openbot-text-primary) var(--message-surface-lift),
    color-mix(in srgb, var(--message-bubble-tint) var(--message-bubble-tint-amount), var(--message-plain-canvas))
  );
  }
  --openbot-bg-sidebar: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --openbot-bg-sidebar: color-mix(
    in srgb,
    var(--openbot-text-primary) var(--message-surface-lift),
    color-mix(in srgb, var(--message-bubble-tint) var(--message-bubble-tint-amount), var(--message-plain-sidebar))
  );
  }
  --openbot-bg-surface: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --openbot-bg-surface: color-mix(
    in srgb,
    var(--openbot-text-primary) var(--message-surface-lift),
    color-mix(in srgb, var(--message-bubble-tint) var(--message-bubble-tint-amount), var(--message-plain-surface))
  );
  }
  --openbot-bg-surface-raised: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --openbot-bg-surface-raised: color-mix(
    in srgb,
    var(--openbot-text-primary) var(--message-surface-lift),
    color-mix(
      in srgb,
      var(--message-bubble-tint) var(--message-bubble-tint-amount),
      var(--message-plain-surface-raised)
    )
  );
  }
  --openbot-bg-control: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --openbot-bg-control: color-mix(
    in srgb,
    var(--openbot-text-primary) var(--message-surface-lift),
    color-mix(in srgb, var(--message-bubble-tint) var(--message-bubble-tint-amount), var(--message-plain-control))
  );
  }
  --openbot-bg-control-hover: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --openbot-bg-control-hover: color-mix(
    in srgb,
    var(--openbot-text-primary) var(--message-surface-lift),
    color-mix(in srgb, var(--message-bubble-tint) var(--message-bubble-tint-amount), var(--message-plain-control-hover))
  );
  }
  --openbot-bg-control-active: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --openbot-bg-control-active: color-mix(
    in srgb,
    var(--openbot-text-primary) var(--message-surface-lift),
    color-mix(
      in srgb,
      var(--message-bubble-tint) var(--message-bubble-tint-amount),
      var(--message-plain-control-active)
    )
  );
  }
  background: var(--message-bubble-tint);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix( in srgb, var(--message-bubble-tint) var(--message-bubble-tint-amount), var(--message-bubble-base) );
  }
}
.ui-bubble.message-bubble-colored :is([data-popper-positioner], [role="dialog"], [role="menu"], [role="listbox"], [role="tooltip"]) {
  --openbot-bg-canvas: var(--message-plain-canvas);
  --openbot-bg-sidebar: var(--message-plain-sidebar);
  --openbot-bg-surface: var(--message-plain-surface);
  --openbot-bg-surface-raised: var(--message-plain-surface-raised);
  --openbot-bg-control: var(--message-plain-control);
  --openbot-bg-control-hover: var(--message-plain-control-hover);
  --openbot-bg-control-active: var(--message-plain-control-active);
}
:is( .message-entry-user .ui-bubble.message-bubble-colored > .ui-bubble-content, .message-entry-agent .ui-bubble-variant-muted.message-bubble-colored > .ui-bubble-content ) :is(.attachment-file-visual, .attachment-reference-visual):not(.message-attachment[data-media] *) {
  background: linear-gradient(var(--file-reference-soft) 0 0), var(--message-plain-control);
}
.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-bg-control-hover);
  color: var(--openbot-text-primary);
  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-inline-end: 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%;
  transform-origin: left bottom;
  animation: message-bubble-in 280ms cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
}
.agent-activity-slot[data-reserved="true"] {
  min-height: 52px;
}
.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-slot[data-reserved="true"] > .agent-activity-entry[data-plain="true"], .agent-activity-slot[data-reserved="true"] > .agent-activity-entry[data-plain="true"][data-state="exiting"] {
  grid-template-rows: 1fr;
  transition: none;
}
.agent-activity-content {
  min-height: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: clip;
  overflow-clip-margin: var(--openbot-space-3);
  padding-block: var(--openbot-space-3) 8px;
  padding-inline: 8px 0;
  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: calc(32px * -0.14);
  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;
}
.agent-activity-entry .agent-activity-avatar {
  transform-origin: center bottom;
  animation: agent-activity-avatar-in 420ms cubic-bezier(0.34, 1.45, 0.64, 1) backwards;
}
@keyframes agent-activity-avatar-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.5);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.agent-activity-entry[data-state="exiting"] .agent-activity-avatar {
  transform: translateY(4px) scale(0.6);
}
.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-entry[data-waiting="true"] .agent-activity-label {
  animation: none;
  background: none;
  color: var(--openbot-text-secondary);
  -webkit-text-fill-color: currentColor;
}
.agent-activity-entry[data-plain="true"]:not([data-waiting="true"]) .agent-activity-label {
  background: linear-gradient( 90deg, var(--openbot-text-primary) 0%, var(--openbot-text-primary) 25%, var(--openbot-text-primary) 60%, var(--openbot-text-primary) 75%, var(--openbot-text-primary) 100% );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient( 90deg, color-mix(in srgb, var(--openbot-text-primary) 40%, transparent) 0%, color-mix(in srgb, var(--openbot-text-primary) 40%, transparent) 25%, var(--openbot-text-primary) 60%, color-mix(in srgb, var(--openbot-text-primary) 40%, transparent) 75%, color-mix(in srgb, var(--openbot-text-primary) 40%, transparent) 100% );
  }
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  animation: agent-activity-label-enter 350ms cubic-bezier(0.2, 0.8, 0.3, 1) backwards, agent-activity-label-shine 2.2s steps(60, end) infinite;
}
.agent-activity-entry[data-plain="true"][data-waiting="true"] .agent-activity-label {
  animation: agent-activity-label-enter 350ms cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
}
@keyframes agent-activity-label-enter {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
}
@keyframes agent-activity-label-shine {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}
@keyframes agent-activity-label-fade {
  from {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .agent-activity-entry[data-plain="true"] .agent-activity-label, .agent-activity-entry[data-plain="true"]:not([data-waiting="true"]) .agent-activity-label {
    animation: agent-activity-label-fade 120ms ease-out backwards;
  }
}
.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);
}
.ui-button.chat-action-routine-thread {
  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: start;
}
.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: start;
  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-routing-targets {
  display: inline-flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.chat-action-routing-separator {
  margin-inline-start: calc(-1 * var(--openbot-space-1-5));
  white-space: pre;
}
.chat-action-target-entering {
  transform-origin: left center;
  animation: message-bubble-in 280ms cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
}
.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, .chat-action-marker-channel-change .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-message-text {
  align-self: stretch;
  margin-block: var(--openbot-space-2);
  text-align: start;
}
.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-inline-start: -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;
}
:root {
  --message-wide-bubble-width: min(100%, max(720px, 70%), 1200px);
  --message-narrow-bubble-width: min(92%, max(420px, 50%), 800px);
}
.message-entry-agent .ui-bubble {
  max-width: var(--message-wide-bubble-width);
}
.message-entry .ui-bubble:has(.image-generation) {
  width: min(420px, 100%);
  max-width: min(420px, 100%);
}
.message-entry .ui-bubble:has(.image-gallery) {
  width: min(520px, 100%);
  max-width: min(520px, 100%);
}
.message-entry-agent .ui-bubble-variant-ghost:has(:is(.image-generation, .image-gallery, .message-code-block, .message-data-table-scroll)) > .ui-bubble-content {
  width: 100%;
}
.message-entry-user .ui-bubble:has(:is(.image-generation, .image-gallery)) > .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;
  inset-inline-end: 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: start;
}
.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;
  inset-inline-end: 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;
  }
}
.pending-send-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.pending-send-label {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  color: var(--openbot-danger-text);
}
.pending-send-label:not(:empty) {
  margin-inline-end: var(--openbot-space-1);
}
.pending-send-label > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: none;
}
.pending-send-error {
  color: var(--openbot-text-muted);
  overflow-wrap: anywhere;
}
.pending-send-error::before {
  content: "·";
  margin-inline-end: var(--openbot-space-1);
}
.message-entry-user.message-entry-actions-beside .message-stack:not(:has(.message-media-before)) {
  width: auto;
  max-width: min(80%, 720px);
  flex: 0 1 auto;
}
.message-entry-user.message-entry-actions-beside .message-stack:not(:has(.message-media-before)) > .ui-bubble {
  max-width: 100%;
}
.message-entry-user.message-entry-actions-beside .message-stack:not(:has(.message-media-before)) + .message-action-row {
  order: -1;
}
.virtual-chat-row[data-grouped="sender"] > .message-entry-agent:first-child .message-shell > .ui-bubble > .ui-bubble-content {
  border-start-start-radius: var(--openbot-radius-sm);
}
.virtual-chat-row[data-grouped="sender"] > .message-entry-user:first-child .message-stack > .ui-bubble:first-child > .ui-bubble-content {
  border-start-end-radius: var(--openbot-radius-sm);
}
.virtual-chat-row:has(+ .virtual-chat-row[data-grouped="sender"] > .message-entry-agent:first-child) > .message-entry-agent:last-child .message-shell > .ui-bubble > .ui-bubble-content {
  border-end-start-radius: var(--openbot-radius-sm);
}
.virtual-chat-row:has(+ .virtual-chat-row[data-grouped="sender"] > .message-entry-user:first-child) > .message-entry-user:last-child .message-stack > .ui-bubble:last-child > .ui-bubble-content {
  border-end-end-radius: var(--openbot-radius-sm);
}
.agent-activity-body {
  min-height: 0;
  overflow: clip;
  overflow-clip-margin: var(--openbot-space-3);
}
.agent-activity-entry[data-state="exiting"] .agent-activity-body {
  overflow-clip-margin: 0;
}
.agent-activity-content .agent-steps-toggle, .agent-activity-steps {
  pointer-events: auto;
}
.agent-activity-content .agent-steps-toggle {
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
}
.agent-activity-content .agent-steps-toggle[aria-expanded="true"]:not(:hover) {
  background: transparent;
}
.agent-activity-steps {
  padding-block: 0 var(--openbot-space-2);
  padding-inline: var(--openbot-space-6) 0;
}
.agent-steps-chevron {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  transition: rotate var(--openbot-duration-fast) var(--openbot-ease-out);
}
.agent-steps-toggle[aria-expanded="true"] .agent-steps-chevron {
  rotate: 180deg;
}
.agent-steps-header[aria-expanded="true"] .agent-steps-chevron {
  rotate: 90deg;
}
.agent-steps {
  display: grid;
  justify-items: start;
  margin-bottom: var(--openbot-space-1);
}
.agent-steps .agent-steps-header {
  display: flex;
  height: auto;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-inline-start: 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: start;
}
.agent-steps .agent-steps-header[aria-expanded="true"]:not(:hover) {
  background: transparent;
  color: inherit;
}
.agent-step-icon {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
}
.agent-steps-summary {
  overflow: hidden;
  font-weight: var(--openbot-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-steps-failed {
  flex: 0 0 auto;
  color: var(--openbot-danger-text);
  font-variant-numeric: tabular-nums;
}
.agent-steps-duration {
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
.agent-steps-panel {
  display: grid;
  width: 100%;
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows var(--openbot-duration-overlay) var(--openbot-ease-out), opacity var(--openbot-duration-normal) var(--openbot-ease-out);
}
@starting-style {
  .agent-steps-panel {
    grid-template-rows: 0fr;
    opacity: 0;
  }
}
.agent-steps-viewport {
  max-height: 220px;
  overflow: hidden;
  padding-inline-start: var(--openbot-space-3);
  border-inline-start: 1px solid var(--openbot-border);
}
.agent-steps-viewport[data-scrolls] {
  overflow-y: auto;
}
.agent-steps-panel > .agent-steps-viewport {
  min-height: 0;
  margin-inline-start: var(--openbot-space-3);
}
.agent-steps-list {
  display: grid;
  gap: var(--openbot-space-1);
  margin: 0;
  padding: var(--openbot-space-1-5) 0;
  list-style: none;
  transition: transform var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.agent-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;
  animation: message-in var(--openbot-duration-normal) var(--openbot-ease-out) both;
}
.agent-step[data-focused] {
  border-radius: var(--openbot-radius-xs);
  animation: agent-step-picked calc(var(--openbot-duration-overlay) * 6) var(--openbot-ease-out) both;
}
@keyframes agent-step-picked {
  from {
    background: var(--openbot-hover);
  }
  to {
    background: transparent;
  }
}
.agent-step .agent-step-icon {
  margin-top: 2px;
}
.agent-step[data-kind="thinking"] .agent-step-text {
  color: var(--openbot-text-muted);
  font-style: italic;
}
.agent-step-text.agent-activity-label {
  display: inline;
  -webkit-line-clamp: unset;
}
.agent-step-memory {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0 var(--openbot-space-2);
  color: var(--openbot-text-primary);
}
.agent-step-memory-action, .agent-step-memory-previous, .agent-step-memory[data-action="forgotten"] s {
  color: var(--openbot-text-muted);
}
.agent-step-failed {
  display: grid;
  min-width: 0;
  flex: 1 1 auto;
  justify-items: start;
}
.agent-step .agent-step-error-toggle {
  display: inline-flex;
  height: auto;
  align-items: center;
  gap: var(--openbot-space-1);
  margin-inline-start: calc(-1 * var(--openbot-space-1));
  border-radius: var(--openbot-radius-xs);
  padding: 0 var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: inherit;
  font-weight: var(--openbot-weight-regular);
  line-height: inherit;
}
.agent-step-error-toggle[aria-expanded="true"] .agent-steps-chevron {
  rotate: 90deg;
}
.agent-step-error {
  max-height: 160px;
  justify-self: stretch;
  margin: var(--openbot-space-1) 0 0;
  overflow: auto;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
@media (prefers-reduced-motion: reduce) {
  .agent-steps-chevron, .agent-steps-panel, .agent-steps-list {
    transition: none;
  }
  .agent-step {
    animation: none;
  }
}
:dir(rtl) svg[class~="lucide-chevron-right"].agent-steps-chevron {
  transform: scaleX(-1);
}
:dir(rtl) .agent-steps-header[aria-expanded="true"] svg[class~="lucide-chevron-right"].agent-steps-chevron, :dir(rtl) .agent-step-error-toggle[aria-expanded="true"] svg[class~="lucide-chevron-right"].agent-steps-chevron {
  rotate: -90deg;
}
.trace {
  --trace-surface: var(--openbot-bg-surface);
  --trace-name-width: min(260px, 45cqw);
  --trace-label-room: min(150px, 25cqw);
  --trace-lane-pad: var(--openbot-space-3);
  --trace-row-height: 36px;
  --trace-bar-height: 16px;
  --trace-hue: var(--openbot-text-muted);
  display: flex;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  background: var(--trace-surface);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.trace-header {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  padding-block: var(--openbot-space-2);
  padding-inline: var(--openbot-space-4) var(--openbot-space-2);
  border-bottom: 1px solid var(--openbot-border);
}
.trace-title {
  flex: 1 1 auto;
  margin: 0;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-md);
}
.ui-select.trace-select {
  width: auto;
  flex: 0 0 auto;
}
.trace-select .trace-select-trigger {
  width: auto;
  gap: var(--openbot-space-1);
  padding-inline: var(--openbot-space-2) var(--openbot-space-1-5);
  font-variant-numeric: tabular-nums;
}
.trace-search {
  position: relative;
  width: min(240px, 100%);
}
.trace-search-icon {
  position: absolute;
  top: 50%;
  inset-inline-start: var(--openbot-space-2);
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  color: var(--openbot-text-muted);
  translate: 0 -50%;
  pointer-events: none;
}
.trace-search .trace-search-input {
  width: 100%;
  padding-inline: calc(var(--openbot-space-2) * 2 + var(--openbot-icon-xs)) var(--openbot-space-8);
}
.trace-search .trace-search-input:focus-visible {
  border-color: var(--openbot-text-muted);
  box-shadow: none;
  outline: none;
}
.trace-search-input::-webkit-search-cancel-button {
  display: none;
}
.trace-search-kbd {
  position: absolute;
  top: 50%;
  inset-inline-end: var(--openbot-space-1-5);
  translate: 0 -50%;
  pointer-events: none;
}
.trace-totals {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  margin-block: 0;
  margin-inline: 0 -1px;
}
.trace-total {
  display: grid;
  flex: 1 1 96px;
  gap: var(--openbot-space-0-5);
  min-width: 0;
  padding: var(--openbot-space-2) var(--openbot-space-3);
  border-inline-end: 1px solid var(--openbot-border);
  border-bottom: 1px solid var(--openbot-border);
}
.trace-total-label {
  overflow: hidden;
  color: var(--openbot-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trace-total-value {
  --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);
  margin: 0;
  font-size: var(--openbot-text-lg);
  font-variant-numeric: tabular-nums;
  line-height: var(--openbot-leading-lg);
}
.trace-body {
  --trace-fade: var(--openbot-space-6);
  --trace-mask-top: linear-gradient(var(--openbot-text-primary), var(--openbot-text-primary));
  --trace-mask-bottom: linear-gradient(var(--openbot-text-primary), var(--openbot-text-primary));
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  container-type: inline-size;
  scrollbar-width: none;
  direction: ltr;
}
.trace-body::-webkit-scrollbar {
  display: none;
}
.trace-body.scroll-fade-top, .trace-body.scroll-fade-bottom {
  mask-image: var(--trace-mask-top), var(--trace-mask-bottom);
  mask-composite: intersect;
}
.trace-body.scroll-fade-top {
  --trace-mask-top: linear-gradient(
    to bottom,
    var(--openbot-text-primary) var(--trace-stack),
    transparent var(--trace-stack),
    var(--openbot-text-primary) calc(var(--trace-stack) + var(--trace-fade))
  );
}
.trace-body.scroll-fade-bottom {
  --trace-mask-bottom: linear-gradient(
    to bottom,
    var(--openbot-text-primary) calc(100% - var(--trace-fade)),
    transparent
  );
}
.trace-grid {
  position: relative;
  z-index: 0;
}
.trace-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}
.trace-row {
  display: grid;
  height: var(--trace-row-height);
  box-sizing: border-box;
  grid-template-columns: var(--trace-name-width) minmax(0, 1fr);
  border-bottom: 1px solid var(--openbot-border);
}
.trace-branch-children {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--openbot-duration-slow) var(--openbot-ease-out);
}
.trace-branch-children[data-open] {
  grid-template-rows: 1fr;
}
.trace-branch-clip {
  min-height: 0;
  overflow: clip;
  opacity: 0;
  transition: opacity var(--openbot-duration-slow) var(--openbot-ease-out);
}
.trace-branch-children[data-open] > .trace-branch-clip {
  opacity: 1;
}
.trace-row {
  transition: opacity var(--openbot-duration-slow) var(--openbot-ease-out);
}
@starting-style {
  .trace-row {
    opacity: 0;
  }
}
.trace-row[data-parent] {
  position: sticky;
  top: calc((var(--trace-depth) + 1) * var(--trace-row-height));
  z-index: 4;
  background: var(--trace-surface);
}
.trace-row[data-hue="1"], .trace-handoff[data-hue="1"] {
  --trace-hue: var(--openbot-chart-storage-downloads);
}
.trace-row[data-hue="2"], .trace-handoff[data-hue="2"] {
  --trace-hue: var(--openbot-chart-storage-files);
}
.trace-row[data-hue="3"], .trace-handoff[data-hue="3"] {
  --trace-hue: var(--openbot-chart-storage-chats);
}
.trace-row[data-hue="4"], .trace-handoff[data-hue="4"] {
  --trace-hue: var(--openbot-chart-storage-workspaces);
}
.trace-row[data-hue="5"], .trace-handoff[data-hue="5"] {
  --trace-hue: var(--openbot-chart-storage-runtimes);
}
.trace-name {
  position: sticky;
  left: 0;
  z-index: 3;
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-1-5);
  --trace-indent: var(--openbot-space-4);
  --trace-guide-at: calc(var(--openbot-control-xs) / 2);
  padding-inline: calc(var(--openbot-space-2) + var(--trace-depth, 0) * var(--trace-indent)) var(--openbot-space-2);
  border-right: 1px solid var(--openbot-border);
  background: linear-gradient(var(--trace-row-tint), var(--trace-row-tint)), repeating-linear-gradient( to right, transparent 0 var(--trace-guide-at), var(--openbot-border) var(--trace-guide-at) calc(var(--trace-guide-at) + 1px), transparent calc(var(--trace-guide-at) + 1px) var(--trace-indent) ) var(--openbot-space-2) 0 / calc(var(--trace-depth, 0) * var(--trace-indent)) 100% no-repeat, var(--trace-surface);
}
.trace-row {
  --trace-row-tint: transparent;
}
.trace-row[data-hovered], .trace-row:has(.trace-name-button:focus-visible) {
  --trace-row-tint: var(--openbot-hover);
}
.trace-row[data-hovered] .trace-bar:not(.trace-segment), .trace-segment[data-hovered] {
  outline: 1px solid var(--openbot-text-secondary);
  outline-offset: 1px;
}
.trace-name .trace-name-button.ui-button {
  height: auto;
  min-width: 0;
  flex: 1 1 auto;
  justify-content: flex-start;
  gap: var(--openbot-space-1-5);
  padding: 0;
  border-radius: var(--openbot-radius-xs);
  background: transparent;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-align: start;
  cursor: default;
}
.trace-row[data-selectable] .trace-name-button.ui-button {
  cursor: pointer;
}
.trace-name .trace-name-button.ui-button:focus-visible {
  box-shadow: none;
  outline: 1px solid var(--openbot-text-muted);
  outline-offset: 1px;
}
.trace-axis-row {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--trace-surface);
}
.trace-axis-name {
  color: var(--openbot-text-muted);
}
.trace-name .trace-toggle[aria-expanded="true"]:not(:hover) {
  background: transparent;
}
.trace-toggle-icon {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  transition: rotate var(--openbot-duration-fast) var(--openbot-ease-out);
}
.trace-toggle[aria-expanded="false"] .trace-toggle-icon {
  rotate: -90deg;
}
.trace-toggle-space {
  width: var(--openbot-control-xs);
  flex: 0 0 auto;
}
.trace-icon {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
}
.trace-glyph {
  display: grid;
  width: 22px;
  height: 22px;
  box-sizing: border-box;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-primary) 4%, var(--trace-surface));
  }
  color: var(--openbot-text-secondary);
}
.trace-glyph[data-agent] {
  color: var(--trace-hue);
}
.trace-row:not([data-hue]) .trace-glyph[data-agent] {
  color: var(--openbot-text-primary);
}
.trace-glyph[data-failed] {
  color: var(--openbot-danger-text);
}
.trace-glyph-icon {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.trace-spinner {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: 0 0 auto;
  color: var(--openbot-text-muted);
  animation: ui-spin 1s linear infinite;
}
.trace-span-name {
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trace-row[data-parent] .trace-span-name {
  font-weight: var(--openbot-weight-semibold);
}
.trace-row[data-failed] .trace-span-name {
  color: var(--openbot-danger-text);
}
.trace-span-error-row {
  position: relative;
  z-index: 2;
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  padding-inline-start: calc(var(--openbot-space-2) + (var(--trace-depth, 0) + 1) * var(--openbot-space-4));
  border-bottom: 1px solid var(--openbot-border);
  background: var(--trace-surface);
}
.trace-span-error {
  max-height: 160px;
  margin: 0;
  overflow: auto;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-bg-control);
  padding: var(--openbot-space-1-5) var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.trace-row[data-running] .trace-span-name {
  background: linear-gradient( 90deg, var(--openbot-text-muted) 0%, var(--openbot-text-muted) 35%, var(--openbot-text-primary) 50%, var(--openbot-text-muted) 65%, var(--openbot-text-muted) 100% ) 0 0 / 300% 100%;
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: trace-shine 2s linear infinite;
}
@keyframes trace-shine {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0 0;
  }
}
.trace-span-detail {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trace-lane {
  --trace-scale: calc(100% - var(--trace-lane-pad) - var(--trace-label-room));
  position: relative;
  z-index: 1;
  min-width: 0;
}
.trace-row[data-hovered] .trace-lane {
  background: var(--trace-row-tint);
}
.trace-overlay {
  --trace-scale: calc(100% - var(--trace-lane-pad) - var(--trace-label-room));
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: var(--trace-name-width);
  pointer-events: none;
}
.trace-tick, .trace-gridline, .trace-now, .trace-now-dot, .trace-bar, .trace-handoff, .trace-bar-label {
  position: absolute;
  left: calc(var(--trace-lane-pad) + var(--trace-scale) * var(--trace-at));
}
.trace-tick {
  top: 50%;
  padding-left: var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-variant-numeric: tabular-nums;
  translate: 0 -50%;
  white-space: nowrap;
}
.trace-gridline, .trace-now {
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--openbot-border);
}
.trace-now {
  z-index: 2;
  background: var(--openbot-text-dim);
}
.trace-now-dot {
  bottom: 0;
  width: 7px;
  height: 7px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-primary);
  translate: -3px 50%;
}
.trace-bar {
  transform-origin: left center;
  transition: scale var(--openbot-duration-overlay) var(--openbot-ease-out);
}
@starting-style {
  .trace-bar {
    scale: 0 1;
  }
}
.trace-bar {
  top: 50%;
  display: grid;
  width: max(3px, calc(var(--trace-scale) * var(--trace-width)));
  height: var(--trace-bar-height);
  box-sizing: border-box;
  place-items: center;
  overflow: hidden;
  border-radius: var(--openbot-radius-xs);
  translate: 0 -50%;
}
.trace-bar[data-kind="model"], .trace-swatch[data-kind="model"] {
  background-color: var(--trace-hue);
}
.trace-bar[data-kind="tool"], .trace-swatch[data-kind="tool"] {
  background-color: var(--trace-hue);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--trace-hue) 45%, var(--trace-surface));
  }
}
.trace-bar[data-kind="waiting"], .trace-swatch[data-kind="waiting"] {
  border: 1px solid var(--trace-hue);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--trace-hue) 60%, transparent);
  }
  background: repeating-linear-gradient( -45deg, var(--trace-hue) 0 1px, transparent 1px 5px );
  @supports (color: color-mix(in lab, red, red)) {
    background: repeating-linear-gradient( -45deg, color-mix(in srgb, var(--trace-hue) 60%, transparent) 0 1px, transparent 1px 5px );
  }
}
.trace-bar[data-kind="handoff"] {
  border: 1px solid var(--trace-hue);
  background-color: transparent;
}
.trace-bar[data-failed], .trace-swatch[data-failed] {
  border: 0;
  background: var(--openbot-danger);
}
.trace-bar.trace-track {
  border: 0;
  background: var(--trace-hue);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--trace-hue) 16%, transparent);
  }
}
.trace-bar[data-running]:not([data-kind="waiting"]) {
  background-image: linear-gradient( 90deg, transparent 0%, var(--openbot-text-primary) 50%, transparent 100% );
  @supports (color: color-mix(in lab, red, red)) {
    background-image: linear-gradient( 90deg, transparent 0%, color-mix(in srgb, var(--openbot-text-primary) 35%, transparent) 50%, transparent 100% );
  }
  background-repeat: no-repeat;
  background-size: 50% 100%;
  animation: trace-bar-shine 1.6s linear infinite;
}
@keyframes trace-bar-shine {
  from {
    background-position: -100% 0;
  }
  to {
    background-position: 200% 0;
  }
}
.trace-bar-icon {
  width: 12px;
  height: 12px;
  color: var(--openbot-text-on-accent);
}
.trace-handoff {
  --trace-elbow: var(--openbot-space-2);
  --trace-line-top: calc((var(--trace-from) + 1.5) * var(--trace-row-height) + var(--trace-bar-height) / 2);
  --trace-line-rows: calc(var(--trace-to) - var(--trace-from) - 0.5);
  top: calc(var(--trace-line-top) + var(--trace-from-shift, 0px));
  width: var(--trace-elbow);
  height: calc(var(--trace-line-rows) * var(--trace-row-height) - var(--trace-bar-height) / 2 + var(--trace-grow, 0px));
  box-sizing: border-box;
  border-left: 2px dotted var(--trace-hue);
  translate: calc(-1 * var(--trace-elbow)) 0;
  transition: top var(--openbot-duration-slow) var(--openbot-ease-out), height var(--openbot-duration-slow) var(--openbot-ease-out);
}
.trace-handoff:not([data-hue]) {
  --trace-hue: var(--openbot-text-muted);
}
.trace-handoff.trace-handoff-end {
  top: 0;
  height: 50%;
  border-bottom: 2px dotted var(--trace-hue);
  border-left: 0;
}
.trace-handoff.trace-handoff-end[data-last] {
  border-left: 2px dotted var(--trace-hue);
  border-bottom-left-radius: var(--openbot-radius-xs);
}
.trace-handoff.trace-handoff-pass {
  top: 0;
  height: 100%;
}
.trace-bar-label {
  top: 50%;
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  padding-left: var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
  font-variant-numeric: tabular-nums;
  translate: 0 -50%;
  white-space: nowrap;
}
.trace-empty {
  display: grid;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-8) var(--openbot-space-4);
  text-align: center;
}
.trace-empty-title, .trace-empty-description {
  margin: 0;
}
.trace-empty-title {
  font-weight: var(--openbot-weight-medium);
}
.trace-empty-description {
  color: var(--openbot-text-muted);
}
.trace-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2) var(--openbot-space-4);
  padding-block: var(--openbot-space-2);
  padding-inline: var(--openbot-space-4) var(--openbot-space-2);
  border-top: 1px solid var(--openbot-border);
}
.trace-legend {
  --trace-hue: var(--openbot-text-secondary);
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-1) var(--openbot-space-4);
  margin: 0;
  padding: 0;
  color: var(--openbot-text-muted);
  list-style: none;
}
.trace-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.trace-swatch {
  width: 16px;
  height: 8px;
  flex: none;
  box-sizing: border-box;
  border-radius: var(--openbot-radius-xs);
}
.trace-swatch[data-kind="handoff"] {
  height: 2px;
  border-top: 2px dotted var(--trace-hue);
  border-radius: 0;
}
.trace-replay {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
}
.trace-replay .trace-play {
  border-radius: var(--openbot-radius-pill);
}
.trace-replay .trace-select {
  margin-inline-start: var(--openbot-space-1);
}
.ui-dialog-content.trace-dialog {
  width: min(1040px, 100%);
  max-height: min(680px, calc(100dvh - 2 * var(--openbot-space-6)));
  display: flex;
  overflow: hidden;
  outline: 0;
  background: var(--openbot-bg-surface);
}
.trace.trace-in-dialog {
  border: 0;
  border-radius: 0;
}
@media (prefers-reduced-motion: reduce) {
  .trace-branch-children, .trace-branch-clip, .trace-row, .trace-bar, .trace-handoff {
    transition: none;
  }
  .trace-spinner, .trace-row[data-running] .trace-span-name, .trace-bar[data-running] {
    animation: none;
  }
  .trace-toggle-icon {
    transition: none;
  }
}
.agent-chat-empty {
  box-sizing: border-box;
  height: 100%;
  display: grid;
  grid-auto-rows: auto minmax(0, 21rem);
  align-content: center;
  justify-items: center;
  gap: var(--openbot-space-6);
  padding: var(--openbot-space-6) 0;
  container-type: inline-size;
}
.agent-chat-empty-pitch {
  --agent-chat-empty-title-size: var(--openbot-text-display);
  --agent-chat-empty-hand-size: calc(var(--agent-chat-empty-title-size) * 1.2);
  display: grid;
  justify-items: center;
  gap: var(--openbot-space-2);
  text-align: center;
}
.agent-chat-empty-avatar.agent-avatar {
  width: calc(var(--openbot-control-xl) * 1.6);
  height: calc(var(--openbot-control-xl) * 1.6);
  margin-bottom: var(--openbot-space-2);
}
.agent-chat-empty-title {
  margin: 0;
  font-size: var(--agent-chat-empty-title-size);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.agent-chat-empty-title > span {
  display: block;
}
.agent-chat-empty-ready, .agent-chat-empty-description {
  color: var(--openbot-text-muted);
}
.agent-chat-empty-description {
  max-width: 30rem;
  margin: 0;
  font-size: var(--openbot-text-xl);
  line-height: 1.5;
  text-wrap: balance;
}
.agent-chat-empty-hand {
  display: inline-block;
  color: var(--openbot-accent-text);
  font-family: "Bradley Hand", "Noteworthy", "Segoe Print", cursive;
  font-size: var(--agent-chat-empty-hand-size);
  line-height: 1;
  transform: rotate(-2deg);
  clip-path: inset(-0.4em 100% -0.4em -0.2em);
  animation: agent-chat-empty-write calc(var(--openbot-duration-slow) * 2.8) linear calc(var(--openbot-duration-slow) * 2.5) forwards;
}
@keyframes agent-chat-empty-write {
  to {
    clip-path: inset(-0.4em -0.2em -0.4em -0.2em);
  }
}
:dir(rtl) .agent-chat-empty-hand {
  clip-path: inset(-0.4em -0.2em -0.4em 100%);
}
.agent-chat-empty-turn {
  width: min(100%, 40rem);
  min-height: 0;
  overflow: hidden;
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
  mask-image: radial-gradient(ellipse 70% 90% at 50% 20%, var(--openbot-text-primary) 45%, var(--openbot-transparent));
}
.agent-chat-empty-row {
  padding-top: var(--openbot-chat-entry-gap);
}
.agent-chat-empty-showing {
  transition: opacity calc(var(--openbot-duration-slow) * 3.5) var(--openbot-ease-out), filter calc(var(--openbot-duration-slow) * 3.5) var(--openbot-ease-out), transform calc(var(--openbot-duration-slow) * 3.5) var(--openbot-ease-out);
}
.agent-chat-empty-showing[data-leaving] {
  opacity: 0;
  filter: blur(3px);
  transform: translateY(-6px);
}
@container (max-width: 520px) {
  .agent-chat-empty-pitch {
    --agent-chat-empty-title-size: var(--openbot-text-3xl);
  }
  .agent-chat-empty-description {
    font-size: var(--openbot-text-lg);
  }
}
.agent-chat-empty[data-still] .agent-chat-empty-hand {
  animation: none;
  clip-path: none;
}
.message-entry-user .ui-bubble {
  max-width: var(--message-narrow-bubble-width);
}
.message-entry-user .ui-bubble:has(.message-markdown-table-scroll) {
  max-width: var(--message-wide-bubble-width);
}
.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 :is(p, li, h1, h2, h3, h4, h5, h6, th, td) {
  unicode-bidi: plaintext;
}
.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-inline-start: 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-inline-start: var(--openbot-space-0-5) solid var(--openbot-border-strong);
  padding-inline-start: 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%;
  min-width: calc(var(--message-markdown-table-columns) * 112px);
  border-collapse: collapse;
  background: var(--openbot-bg-canvas);
  color: var(--openbot-data-table-text);
}
.message-markdown-table :is(th, td) {
  border-inline-end: 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: start;
  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-inline-end: 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-paper-text);
}
.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-block: 0;
  padding-inline: 11px 10px;
  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);
}
:dir(rtl) :is(.selection-actions-form-shell-hidden, .selection-actions-presets-hidden) {
  transform: translateX(8px);
}
.selection-actions-more-presets {
  max-width: 0;
  gap: 2px;
  margin-inline-start: 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-inline-start var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1);
}
.selection-actions-presets-expanded .selection-actions-more-presets {
  max-width: 262px;
  margin-inline-start: 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-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-inline-start: 1px;
}
.selection-actions-expand svg {
  transition: transform var(--openbot-duration-overlay) cubic-bezier(0.23, 1, 0.32, 1);
}
:dir(rtl) .selection-actions-expand svg {
  scale: -1 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-inline-start: 2px solid var(--openbot-accent);
  border-start-start-radius: 0;
  border-start-end-radius: var(--openbot-radius-sm);
  border-end-end-radius: var(--openbot-radius-sm);
  border-end-start-radius: 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-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-show-full {
  justify-self: start;
}
.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: var(--message-wide-bubble-width);
  max-width: var(--message-wide-bubble-width);
}
.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-block: 4px;
  padding-inline: 10px 6px;
}
.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%;
  display: block;
  font: inherit;
}
.message-code-line {
  min-height: 19px;
  display: flex;
}
.message-code-line-number {
  width: 40px;
  flex: none;
  padding-inline-end: 8px;
  color: var(--openbot-text-dim);
  font-size: var(--openbot-text-sm);
  text-align: end;
  user-select: none;
}
.message-code-line-source {
  min-width: 0;
  padding-inline-end: 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.message-code-caret {
  width: 2px;
  height: 13px;
  display: inline-block;
  margin-inline-start: 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: start;
  vertical-align: top;
  unicode-bidi: plaintext;
}
.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-inline-end: 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-inline-end: 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: start;
  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-inline-start: -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-inline-start: 2px solid var(--openbot-text-dim);
  padding-inline-start: 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-quote {
  max-height: 60px;
  overflow: hidden;
  font-size: var(--openbot-text-sm);
  line-height: 15px;
  overflow-wrap: anywhere;
}
.message-reply-quote[data-clipped] {
  mask-image: linear-gradient(to bottom, var(--openbot-text-primary) 45px, transparent 60px);
}
.message-reply-quote blockquote > :not(:first-child) {
  margin-top: var(--openbot-space-1);
}
.message-reply-quote > .message-markdown > :not(:first-child) {
  margin-top: var(--openbot-space-1);
}
.message-reply-quote .message-markdown-heading {
  font-size: inherit;
  line-height: inherit;
}
.message-reply-quote :not(pre) > code {
  padding-block: 0;
  font-size: inherit;
}
.message-reply-quote .message-markdown-excerpt-code {
  font-family: var(--openbot-font-mono);
  white-space: pre-wrap;
}
[data-slot="bubble"][data-author="user"] .message-reply-context {
  border-inline-start-color: var(--openbot-border-strong);
  color: var(--openbot-text-readable);
}
.message-reply-context[data-opens] {
  position: relative;
  transition: border-inline-start-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-inline-start-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-block: 0;
  inset-inline: -2px 0;
  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-inline-start-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 {
  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-block: 1px;
  padding-inline: 3px 6px;
  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, .side-panel-file-badge )[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, .side-panel-file-badge )[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, .side-panel-file-badge )[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, .side-panel-file-badge )[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, .side-panel-file-badge )[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, .side-panel-file-badge )[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, .side-panel-file-badge )[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-lg);
}
.reference-chip.message-reference-chip .reference-chip-icon, .message-file-reference .attachment-reference-visual {
  display: inline-block;
  margin-inline-end: 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-block: -14% 0;
  margin-inline: -14% 0;
}
.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-block: var(--openbot-space-2);
  padding-inline: var(--openbot-space-4) var(--openbot-space-2);
  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: var(--message-wide-bubble-width);
}
.chat-visual-with-author {
  padding-inline-start: calc(var(--message-author-column) + var(--openbot-space-2));
}
.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);
}
.chat-visual-box {
  position: relative;
  min-width: 0;
}
.chat-visual-box[popover]:not(:popover-open) {
  position: relative;
  inset: auto;
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
}
.chat-visual-box-fill {
  height: 100%;
}
.chat-visual-box:not(:popover-open) > .chat-visual-surface {
  display: contents;
}
.chat-visual-box:popover-open {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  display: grid;
  place-items: center;
  margin: 0;
  border: 0;
  padding: var(--openbot-space-6);
  background: var(--openbot-dialog-overlay);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--openbot-text-primary);
  -webkit-app-region: no-drag;
}
.chat-visual-box:popover-open::backdrop {
  background: transparent;
}
.chat-visual-box:popover-open > .chat-visual-surface {
  width: min(1100px, 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--openbot-radius-xl);
  background: var(--openbot-bg-control);
  box-shadow: 0 0 0 1px var(--openbot-dialog-ring);
}
.chat-visual-box:popover-open .chat-visual-frame {
  min-height: 0;
  flex: 1;
  background: var(--openbot-bg-sidebar);
}
.chat-visual-actions {
  position: absolute;
  top: var(--openbot-space-2);
  inset-inline-end: var(--openbot-space-2);
  display: flex;
  gap: var(--openbot-space-1);
  opacity: 0;
  transition: opacity var(--openbot-duration-hover) var(--openbot-ease-out);
}
.chat-visual-actions svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.chat-visual-box:popover-open > .chat-visual-actions {
  display: none;
}
.chat-visual-box:hover > .chat-visual-actions, .chat-visual-box:focus-within > .chat-visual-actions {
  opacity: 1;
}
@media (hover: none) {
  .chat-visual-actions {
    opacity: 1;
  }
}
.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-block: 6px;
  padding-inline: 12px 8px;
  box-shadow: 0 7px 22px var(--openbot-shadow-popover-ambient);
}
.composer-reply-preview > div {
  min-width: 0;
  flex: 1;
}
.composer-reply-preview > div > span {
  display: block;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: 550;
  line-height: 14px;
}
.composer-reply-preview .message-reply-quote {
  margin: 1px 0 0;
  color: var(--openbot-text-secondary);
}
.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 {
  --composer-resize-duration: 300ms;
  --composer-resize-ease: linear(
    0,
    0.01588 2%,
    0.05618 4%,
    0.11201 6%,
    0.1768 8%,
    0.2458 10%,
    0.31562 12%,
    0.38392 14%,
    0.44914 16%,
    0.51029 18%,
    0.56683 20%,
    0.61852 22%,
    0.66534 24%,
    0.70743 26%,
    0.74501 28%,
    0.77838 30%,
    0.80788 32%,
    0.83383 34%,
    0.85658 36%,
    0.87645 38%,
    0.89376 40%,
    0.92183 44%,
    0.94282 48%,
    0.95838 52%,
    0.96984 56%,
    0.97823 60%,
    0.98435 64%,
    0.98878 68%,
    0.99198 72%,
    0.99594 80%,
    0.99829 90%,
    1
  );
  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), height var(--composer-resize-duration) var(--composer-resize-ease);
}
.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-muted);
  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 {
  inset-inline-end: 46px;
  width: 28px;
  transition: width var(--voice-morph-exit-duration) var(--openbot-ease-out);
}
.voice-morph-send-blob, .voice-morph-finish-blob {
  inset-inline-end: 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);
}
:dir(rtl) .voice-morph[data-recording] .voice-morph-finish-blob {
  transform: translateX(34px) scale(0.8);
}
.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-block: 0;
  padding-inline: 12px 3px;
  color: var(--openbot-text-secondary);
  animation: voice-morph-content-in var(--openbot-duration-slow) var(--openbot-ease-out) var(--openbot-duration-fast) both;
}
.voice-morph[data-countdown] {
  --voice-bar-width: 188px;
}
.voice-recording-status[data-tone="warning"] {
  color: var(--openbot-warning-text);
}
.voice-recording-remaining {
  flex: 0 0 auto;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
.voice-recording-status[data-tone="warning"] .voice-recording-remaining {
  color: var(--openbot-warning-text);
}
.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);
  direction: ltr;
}
.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: var(--composer-editor-limit, max(48px, 33dvh));
}
.composer-wrap {
  --composer-editor-limit: max(48px, min(130px, 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-surface:has(.composer-mention-token) {
  padding-block: 2px;
  line-height: 24px;
}
.composer[data-compact] .composer-editor-placeholder {
  top: 4px;
  inset-inline-start: 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;
  unicode-bidi: plaintext;
}
.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-inline-start: 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;
  inset-inline-start: 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;
  inset-inline-start: 0;
}
.composer[data-resizing] {
  min-height: 0;
  overflow: clip;
}
.composer[data-resizing][data-compact] {
  align-content: end;
}
.composer[data-resizing]:not([data-compact]) .composer-input-label {
  min-height: 0;
  align-items: flex-start;
  overflow: clip;
}
@media (prefers-reduced-motion: reduce) {
  .composer {
    --composer-resize-duration: 120ms;
    --composer-resize-ease: ease;
  }
}
.composer-mention-token.composer-tag-unavailable {
  border: 1px dashed var(--openbot-border-strong);
  background: transparent;
  padding-inline-start: var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
}
.composer-file-reference {
  height: 24px;
  cursor: pointer;
  user-select: none;
}
.composer-file-reference-image {
  width: var(--openbot-space-4);
  height: var(--openbot-space-4);
  flex: none;
  border-radius: var(--openbot-radius-sm);
  object-fit: cover;
}
.composer-file-reference-size {
  flex: none;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
  font-variant-numeric: tabular-nums;
}
.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 {
  --mention-picker-title-height: 24px;
  --mention-picker-section-gap: var(--openbot-space-1);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  height: calc( var(--mention-picker-rows, 0) * var(--mention-picker-row-height) + var(--mention-picker-sections, 0) * var(--mention-picker-title-height) + max(var(--mention-picker-sections, 0) - 1, 0) * var(--mention-picker-section-gap) + 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;
  scroll-padding-block: var(--openbot-space-4);
  transition: none;
}
.mention-picker-section {
  display: flex;
  height: var(--mention-picker-title-height);
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 8px 4px;
  color: var(--openbot-queue-action);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.mention-picker-section-count {
  font-variant-numeric: tabular-nums;
}
.mention-picker-option + .mention-picker-section {
  margin-top: var(--mention-picker-section-gap);
}
.mention-picker-highlight {
  position: absolute;
  top: 0;
  right: var(--mention-picker-gutter);
  left: var(--mention-picker-gutter);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-hover);
  pointer-events: none;
  transition: transform var(--openbot-duration-fast) var(--openbot-ease-out), height var(--openbot-duration-fast) var(--openbot-ease-out);
}
.mention-picker-highlight[data-instant] {
  transition: none;
}
.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%;
  position: relative;
  z-index: 1;
  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: start;
}
.mention-picker-file-option .attachment-reference-visual {
  width: 20px;
  height: 20px;
}
.mention-picker-option[data-entering] {
  animation: mention-picker-row-in var(--openbot-duration-fast) var(--openbot-ease-out) both;
}
@keyframes mention-picker-row-in {
  from {
    opacity: 0;
  }
}
.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;
  color: var(--mention-picker-name-color);
  max-width: 50%;
  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-option[data-filtering] {
  --mention-picker-name-color: var(--openbot-queue-action);
}
.mention-picker-match {
  background: transparent;
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}
.mention-picker-badge {
  margin-inline-start: auto;
  flex: 0 0 auto;
  color: var(--openbot-queue-action);
}
.mention-picker-badge > svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.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-block: 7px;
  padding-inline: 8px 12px;
}
.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;
}
.composer-attachment-preview.ui-button {
  border: 0;
  padding: 0;
  cursor: zoom-in;
}
.composer-attachment[data-pending] .composer-attachment-preview img {
  opacity: 0.5;
}
.composer-attachment[data-pending] > .ui-spinner {
  position: absolute;
  inset: 0;
  margin: auto;
}
.composer-attachment[data-upload="uploading"] {
  border-style: dashed;
}
.composer-attachment[data-upload="failed"] {
  border-color: var(--openbot-danger);
}
.composer-attachment[data-upload="failed"] .composer-attachment-copy small {
  color: var(--openbot-danger-text);
}
.composer-upload-ring {
  width: 28px;
}
.composer-upload-failed-icon {
  width: 18px;
  height: 18px;
  color: var(--openbot-danger-text);
}
.composer-upload-retry {
  flex: none;
  margin-inline-end: -4px;
  color: var(--openbot-danger-text);
}
.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: start;
}
.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);
  }
}
.attachment-download-ring {
  --ui-radial-progress-color: var(--openbot-text-primary);
  width: var(--openbot-control-xs);
}
.attachment-download-stop .ui-radial-progress-chart {
  width: 100%;
  height: 100%;
}
.attachment-download-stop .ui-radial-progress-content {
  padding: 0;
}
.attachment-download-stop .ui-radial-progress-content svg {
  width: var(--openbot-glyph-sm);
  height: var(--openbot-glyph-sm);
  fill: currentcolor;
  stroke: none;
}
.message-attachment[data-download] small {
  overflow: hidden;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.message-attachment[data-download="failed"] small {
  color: var(--openbot-danger);
}
.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-block: var(--queue-row-gutter) 0;
  padding-inline: var(--queue-row-inset-start) var(--queue-row-inset-end);
  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-loading {
  position: relative;
  z-index: 1;
  display: grid;
  grid-area: 1 / 1;
  animation: image-gallery-loading-in 0s 400ms both;
}
@keyframes image-gallery-loading-in {
  from {
    visibility: hidden;
  }
}
.image-gallery-tile img {
  grid-area: 1 / 1;
  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-mac-controls .image-lightbox-toolbar {
  padding-inline-start: 82px;
}
.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-copy svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
}
.image-lightbox-zoom {
  display: flex;
  align-items: center;
}
:where(.ui-button).image-lightbox-zoom-level {
  min-width: 56px;
  font-variant-numeric: tabular-nums;
}
.image-lightbox-stage {
  position: relative;
  min-height: 0;
  touch-action: none;
}
.image-lightbox-stage[data-zoomed] {
  overflow: hidden;
}
.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;
  -webkit-user-drag: none;
}
.image-lightbox-image[data-zoomed] {
  will-change: auto;
  cursor: grab;
}
.image-lightbox-stage[data-dragging] .image-lightbox-image {
  cursor: grabbing;
}
.image-lightbox-image[data-settling] {
  transition: scale var(--openbot-duration-slow) var(--openbot-ease-out), translate var(--openbot-duration-slow) var(--openbot-ease-out);
}
.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;
  direction: ltr;
}
.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;
  }
}
.agent-queue-panel-list {
  max-height: calc(7 * var(--queue-row-height) + 2 * var(--queue-row-gutter));
  overflow-y: auto;
  padding-block: var(--queue-row-gutter);
  padding-inline: var(--queue-row-inset-start) var(--queue-row-inset-end);
  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-block: 0;
  inset-inline: calc(var(--queue-row-gutter) - var(--queue-row-inset-start)) calc(var(--queue-row-gutter) - var(--queue-row-inset-end));
  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-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;
}
.conversation-heading-group:has(.agent-threads-header) {
  min-width: 0;
  flex: 1 1 0;
  margin-inline-end: 6px;
}
.agent-threads-header {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 3px;
  margin-inline-start: 4px;
}
.conversation-title.ui-button[data-tab] {
  height: var(--openbot-control-sm);
  gap: var(--openbot-space-1-5);
  padding-block: 0;
  padding-inline: var(--openbot-space-1-5) var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
  color: var(--openbot-text-secondary);
}
.conversation-title.ui-button[data-tab] h1 {
  color: inherit;
  font-size: var(--openbot-text-sm);
}
.conversation-title.ui-button[data-tab]:hover {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}
.conversation-title.ui-button[data-tab][data-selected] {
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
}
.conversation-heading-group:has(> .conversation-title[data-tab] + .agent-threads-header) {
  gap: 0;
}
.conversation-heading-group:has(.conversation-title[data-tab]) .agent-threads-header {
  margin-inline-start: 1px;
}
.agent-threads-header[data-mode="minimal"] {
  flex-shrink: 0;
}
.conversation-heading-group:has(.agent-threads-header[data-mode="minimal"]) .conversation-title {
  min-width: 0;
  flex-shrink: 1;
}
.conversation-heading-group:has(.agent-threads-header[data-fold]) .conversation-title {
  position: relative;
  flex-shrink: 0;
  padding-inline-end: var(--openbot-space-1-5);
}
.conversation-heading-group:has(.agent-threads-header[data-fold]) .conversation-title h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.conversation-heading-group:has(.agent-threads-header[data-fold]:not([data-fold="name"])) {
  overflow: clip;
}
.conversation-header:has(.agent-threads-header[data-fold]:not([data-fold="name"])) .provider-model-trigger > .provider-model-chevron {
  display: none;
}
.agent-threads-header:is([data-fold="list"], [data-fold="all"]), .conversation-heading-group:has(.agent-threads-header[data-fold="all"]) .conversation-title {
  visibility: hidden;
}
.agent-threads-tabs-area {
  position: relative;
  display: flex;
  min-width: 0;
}
.agent-threads-tabs-trigger, .agent-threads-tabs-root {
  display: flex;
  min-width: 0;
}
.agent-threads-rename.ui-input {
  position: absolute;
  top: 50%;
  z-index: 2;
  height: var(--openbot-control-sm);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: var(--openbot-text-sm);
  transform: translateY(-50%);
}
.agent-threads-tabs.ui-sliding-tabs {
  min-width: 0;
  max-width: 100%;
  padding-inline-end: 0;
  overflow-x: auto;
  gap: var(--openbot-space-1);
  background: transparent;
  box-shadow: none;
  scrollbar-width: none;
  direction: ltr;
}
.agent-threads-tabs[data-more-before] {
  mask-image: linear-gradient(to right, transparent, var(--openbot-text-primary) 24px);
}
.agent-threads-tabs[data-more-after] {
  mask-image: linear-gradient(to left, transparent, var(--openbot-text-primary) 24px);
}
.agent-threads-tabs[data-more-before][data-more-after] {
  mask-image: linear-gradient( to right, transparent, var(--openbot-text-primary) 24px, var(--openbot-text-primary) calc(100% - 24px), transparent );
}
.agent-threads-tabs .agent-threads-fill {
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control-active);
}
.agent-threads-tabs .agent-threads-main-key {
  display: none;
}
.agent-threads-tab.ui-sliding-tabs-trigger {
  display: inline-flex;
  width: 140px;
  min-width: 96px;
  max-width: 140px;
  flex: 0 1 auto;
  align-items: center;
  gap: var(--openbot-space-1-5);
  padding-block: 0;
  padding-inline: var(--openbot-space-1-5) var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
  animation: agent-threads-tab-in var(--openbot-duration-normal) var(--openbot-ease-out);
  transition: color var(--sliding-tabs-duration) var(--sliding-tabs-ease), transform var(--sliding-tabs-duration) var(--sliding-tabs-ease);
}
.agent-threads-tab-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agent-threads-title-numbered {
  display: flex;
  white-space: nowrap;
}
.agent-threads-title-root {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agent-threads-title-number {
  flex: none;
  white-space: pre;
}
.agent-threads-tab.ui-sliding-tabs-trigger[data-renaming] {
  outline: 1px solid var(--openbot-border-focus);
  outline-offset: -1px;
  background-color: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
}
.agent-threads-tab[data-renaming] .agent-threads-tab-title {
  visibility: hidden;
}
.agent-threads-tab.ui-sliding-tabs-trigger:not([aria-selected="true"], [data-renaming]):is(:hover, [data-menu-open]) {
  background-color: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}
.agent-threads-tab-close {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  border-radius: var(--openbot-radius-pill);
}
.agent-threads-tab-icon, .agent-threads-tab-x {
  grid-area: 1 / 1;
}
.agent-threads-tab-icon {
  display: grid;
  opacity: 0.7;
}
.agent-threads-tab-icon > svg, .agent-threads-tab-x {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.agent-threads-tab-x {
  opacity: 0;
}
.agent-threads-tab:hover:where(:not([data-renaming])) .agent-threads-tab-close {
  background: var(--openbot-bg-control-hover);
}
.agent-threads-tab:hover:where(:not([data-renaming])) .agent-threads-tab-icon {
  opacity: 0;
}
.agent-threads-tab:hover:where(:not([data-renaming])) .agent-threads-tab-x {
  opacity: 1;
}
.agent-threads-tab-close:hover {
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
}
.agent-threads-tab[data-renaming] .agent-threads-tab-close {
  pointer-events: none;
}
.agent-threads-tab-close:has(.agent-threads-state) {
  width: auto;
  min-width: var(--openbot-icon-md);
  height: auto;
  min-height: var(--openbot-icon-md);
}
.agent-threads-tab:not(:hover) .agent-threads-tab-icon:has(.agent-threads-state) {
  opacity: 1;
}
.agent-threads-icon-button.ui-button {
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-sm);
  color: var(--openbot-text-muted);
}
.agent-threads-switcher.ui-button {
  min-width: 0;
  max-width: 200px;
  height: var(--openbot-control-sm);
  flex: 0 1 auto;
  gap: var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-md);
  background-color: var(--openbot-bg-control-active);
  padding-block: 0;
  padding-inline: var(--openbot-space-1-5) var(--openbot-space-1);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
}
.agent-threads-switcher.ui-button:hover, .agent-threads-switcher.ui-button[aria-expanded="true"] {
  background-color: var(--openbot-bg-control-hover);
}
.agent-threads-switcher-icon {
  display: grid;
  flex: none;
  place-items: center;
  min-width: var(--openbot-icon-md);
  min-height: var(--openbot-icon-md);
}
.agent-threads-switcher-icon > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  opacity: 0.7;
}
.agent-threads-switcher-chevron {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: none;
  color: var(--openbot-text-muted);
}
.agent-threads-menu {
  width: 320px;
}
.agent-threads-menu-list {
  --agent-threads-fade-top: 0px;
  --agent-threads-fade-bottom: 0px;
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: none;
}
.agent-threads-menu .agent-threads-menu-list:is(.scroll-fade-top, .scroll-fade-bottom) {
  mask-image: linear-gradient( to bottom, transparent, var(--openbot-text-primary) var(--agent-threads-fade-top), var(--openbot-text-primary) calc(100% - var(--agent-threads-fade-bottom)), transparent );
}
.agent-threads-menu-list.scroll-fade-top {
  --agent-threads-fade-top: 24px;
}
.agent-threads-menu-list.scroll-fade-bottom {
  --agent-threads-fade-bottom: 24px;
}
.agent-threads-menu-item {
  gap: 8px;
}
.agent-threads-menu .agent-threads-menu-list .agent-threads-menu-item[aria-current] {
  background: var(--ui-menu-item-hover);
}
.agent-threads-menu-stem {
  display: flex;
  flex: none;
  align-self: stretch;
  margin-block: calc(var(--openbot-space-1-5) * -1);
}
.agent-threads-stem-rail, .agent-threads-stem-elbow {
  position: relative;
  width: 16px;
}
.agent-threads-stem-line::before, .agent-threads-stem-elbow::before, .agent-threads-stem-elbow::after {
  position: absolute;
  inset-inline-start: 7px;
  border: 0 solid var(--openbot-text-muted);
  @supports (color: color-mix(in lab, red, red)) {
    border: 0 solid color-mix(in srgb, var(--openbot-text-muted) 60%, transparent);
  }
  content: "";
}
.agent-threads-stem-line::before, .agent-threads-stem-elbow::before {
  inset-block: 0;
  border-inline-start-width: 1px;
}
.agent-threads-stem-elbow::after {
  top: 50%;
  inset-inline-end: 0;
  border-top-width: 1px;
}
.agent-threads-stem-last::before {
  inset-inline-end: 0;
  bottom: 50%;
  border-bottom-width: 1px;
  border-end-start-radius: 6px;
}
.agent-threads-stem-last::after {
  content: none;
}
.agent-threads-menu-title {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-threads-menu-time {
  min-width: 44px;
  flex: 0 0 auto;
  white-space: nowrap;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  text-align: end;
}
.agent-threads-state {
  display: inline-flex;
  height: 16px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: var(--openbot-radius-pill);
}
.agent-threads-unread {
  width: 8px;
  height: 8px;
  background: var(--openbot-unread-surface);
}
.agent-threads-state-working {
  width: 24px;
  background: var(--openbot-bg-control);
  color: var(--openbot-text-secondary);
}
@keyframes agent-threads-tab-in {
  from {
    opacity: 0;
    transform: translateY(2px);
  }
}
.agent-threads-tab[data-attention], .agent-threads-switcher[data-attention], .side-panel-thread-tab[data-attention] {
  background-image: linear-gradient(var(--agent-threads-tint), var(--agent-threads-tint));
}
:is(.agent-threads-tab, .agent-threads-switcher, .side-panel-thread-tab)[data-attention="waiting"] {
  --agent-threads-tint: var(--openbot-warning-soft);
  @supports (color: color-mix(in lab, red, red)) {
    --agent-threads-tint: color-mix(in srgb, var(--openbot-warning-soft) 40%, var(--openbot-transparent));
  }
}
:is(.agent-threads-tab, .agent-threads-switcher, .side-panel-thread-tab)[data-attention="failed"] {
  --agent-threads-tint: var(--openbot-danger-soft);
  @supports (color: color-mix(in lab, red, red)) {
    --agent-threads-tint: color-mix(in srgb, var(--openbot-danger-soft) 40%, var(--openbot-transparent));
  }
}
.agent-threads-tabs .ui-sliding-tabs-pill:not(.agent-threads-fill) {
  display: none;
}
.agent-threads-tab + .agent-threads-tab::before, :where(.conversation-heading-group:has(.conversation-title[data-tab])) .agent-threads-main-key + .agent-threads-tab::before {
  position: absolute;
  top: 50%;
  inset-inline-start: calc(var(--openbot-space-1) / -2 - 0.5px);
  width: 1px;
  height: var(--openbot-icon-lg);
  background: var(--openbot-border-strong);
  content: "";
  transform: translateY(-50%);
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}
:where(.conversation-heading-group:has(.conversation-title:is([data-selected], :hover))) .agent-threads-main-key + .agent-threads-tab::before {
  opacity: 0;
}
.agent-threads-tab[aria-selected="true"]::before, .agent-threads-tab[aria-selected="true"] + .agent-threads-tab::before, .agent-threads-tab[data-attention]::before, .agent-threads-tab[data-attention] + .agent-threads-tab::before, .agent-threads-tab:hover::before, .agent-threads-tab:hover + .agent-threads-tab::before {
  opacity: 0;
}
.agent-threads-tabs[data-dragging] {
  cursor: grabbing;
  user-select: none;
}
.agent-threads-tabs[data-dragging] .agent-threads-tab {
  cursor: grabbing;
}
.agent-threads-tab.ui-sliding-tabs-trigger[data-dragged=""] {
  z-index: 2;
  background-color: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
  transition: color var(--sliding-tabs-duration) var(--sliding-tabs-ease);
}
.agent-threads-tab.ui-sliding-tabs-trigger[data-dragged="away"] {
  opacity: 0.4;
}
.agent-threads-tabs[data-dragging] .agent-threads-fill {
  transition: none;
}
.agent-threads-tabs[data-dragging] .agent-threads-tab::before, .agent-threads-tabs[data-dragging] .agent-threads-tab-x {
  opacity: 0;
}
.agent-threads-tabs[data-dragging] .agent-threads-tab-close {
  background: transparent;
}
.agent-threads-tabs[data-dragging] .agent-threads-tab-icon {
  opacity: 0.7;
}
.agent-threads-tabs[data-dragging] .agent-threads-tab-icon:has(.agent-threads-state) {
  opacity: 1;
}
.agent-threads-header[data-drop-target] {
  border-radius: var(--openbot-radius-md);
  outline: 1px dashed var(--openbot-text-secondary);
  outline-offset: 2px;
  background: var(--openbot-bg-control-hover);
}
.agent-threads-tab-mark-slot {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: 0fr;
  margin-inline-start: -4px;
  opacity: 0;
  transition: grid-template-columns var(--sliding-tabs-duration) var(--sliding-tabs-ease), margin-inline-start var(--sliding-tabs-duration) var(--sliding-tabs-ease), opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}
.agent-threads-tab-mark-slot[data-open] {
  grid-template-columns: 1fr;
  margin-inline-start: 0;
  opacity: 1;
}
.agent-threads-tab-mark {
  min-width: 0;
  overflow-x: clip;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  color: var(--openbot-text-secondary);
}
.agent-threads-menu-item .agent-threads-tab-mark {
  width: 24px;
  justify-content: center;
}
.agent-threads-state-icon {
  width: 20px;
  height: 20px;
  background: var(--openbot-bg-control);
  color: var(--openbot-text-muted);
}
.agent-threads-state-icon svg {
  width: 12px;
  height: 12px;
}
.agent-threads-tab-mark[data-kind="waiting"] .agent-threads-state-icon {
  background: var(--openbot-warning-soft);
  color: var(--openbot-warning-text);
}
.agent-threads-tab-mark[data-kind="failed"] .agent-threads-state-icon {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger-text);
}
.agent-thread-origin {
  margin: 0;
  padding-top: var(--openbot-chat-entry-gap);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.agent-thread-branch-divider {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--openbot-space-2);
  margin: var(--openbot-space-2) 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.agent-thread-branch-divider hr {
  height: 1px;
  flex: 1;
  border: 0;
  background: var(--openbot-border);
}
.agent-thread-branch-text, .agent-thread-branch-divider .agent-thread-branch-link {
  display: inline-flex;
  flex: 0 1 auto;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-1);
  color: inherit;
  font-size: inherit;
}
.agent-thread-branch-text svg, .agent-thread-branch-link svg {
  width: 14px;
  height: 14px;
  flex: none;
}
.agent-thread-branch-text span, .agent-thread-branch-link span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-thread-queued {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  padding-top: var(--openbot-chat-entry-gap);
}
.agent-thread-queued-text {
  margin: 0;
  overflow: hidden;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-thread-composer .composer-editor-placeholder {
  inset-inline-end: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .agent-threads-tab.ui-sliding-tabs-trigger {
    animation: none;
    transition: none;
  }
  .agent-threads-tab-mark-slot {
    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-lg);
}
.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-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-2) var(--openbot-space-1);
  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;
}
.voice-panel-speed {
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
@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;
}
.voice-player-speed {
  flex: none;
  width: calc(var(--openbot-space-6) * 2);
  padding-inline: 0;
  border-radius: var(--openbot-radius-pill);
  font-variant-numeric: tabular-nums;
}
.conversation-panel[data-settings-panel] .conversation-header, .conversation-panel[data-settings-panel] .conversation-scroll, .conversation-panel[data-settings-panel] .composer-wrap {
  width: calc(100% - var(--settings-panel-width, 360px));
}
.conversation-panel[data-settings-panel] .chat-search {
  inset-inline-end: calc(var(--settings-panel-width, 360px) + 16px);
  max-width: calc(100% - var(--settings-panel-width, 360px) - 32px);
}
.conversation-panel[data-browser-side-panel] .chat-search, .conversation-panel[data-file-preview-panel] .chat-search {
  inset-inline-end: calc(var(--browser-panel-width, 380px) + 16px);
  max-width: calc(100% - var(--browser-panel-width, 380px) - 32px);
}
.conversation-panel[data-browser-side-panel] .conversation-header, .conversation-panel[data-browser-side-panel] .conversation-scroll, .conversation-panel[data-browser-side-panel] .composer-wrap, .conversation-panel[data-file-preview-panel] .conversation-header, .conversation-panel[data-file-preview-panel] .conversation-scroll, .conversation-panel[data-file-preview-panel] .composer-wrap {
  width: 100%;
}
@keyframes message-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes message-bubble-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes message-sent-in {
  from {
    transform: translateY(12px);
  }
  to {
    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, .message-entry-animated, .chat-action-entry-animated, .chat-action-target-entering, .agent-activity-entry, .agent-activity-content, .agent-activity-avatar, .agent-activity-entry .agent-activity-avatar, .agent-row-thinking-dots i, .agent-row-agent-status-responded, .agent-row-agent-status-unread, .mention-picker, .mention-picker-list, .mention-picker-highlight, .mention-picker-option[data-entering], .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;
  inset-inline-end: 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%;
  inset-inline-start: 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;
  direction: ltr;
}
.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-block: 0;
  padding-inline: var(--openbot-space-1-5) var(--openbot-space-2);
  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%;
  inset-inline-start: 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-file-tab .side-panel-tab-close {
  width: auto;
  min-width: var(--openbot-icon-md);
}
.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]) {
    width: auto;
    min-width: 0;
    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);
}
.side-panel-file-tab {
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.side-panel-file-badge {
  display: inline-flex;
}
.side-panel-file-badge > .attachment-reference-visual > svg {
  width: 12px;
  height: 12px;
}
.side-panel-file-tab .side-panel-tab-select {
  flex: 0 1 auto;
}
.side-panel-docked .file-preview-header > .file-preview-file-icon {
  display: none;
}
.side-panel-docked .file-preview-header > h2 {
  visibility: hidden;
}
.side-panel-docked > .file-preview-panel.t-panel-slide {
  transition: none;
}
.side-panel-tab-close:has(.agent-threads-state) {
  width: auto;
  min-width: var(--openbot-icon-md);
  height: auto;
  min-height: var(--openbot-icon-md);
}
.side-panel-tab:not(:hover, :focus-within) .side-panel-tab-icon:has(.agent-threads-state) {
  opacity: 1;
}
.side-panel-tab-icon .agent-threads-state-icon svg {
  width: 12px;
  height: 12px;
}
.side-panel-thread-tab {
  flex: 0 1 auto;
  width: 140px;
  min-width: 96px;
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.side-panel-thread-tab .side-panel-tab-select {
  flex: 1;
  text-align: start;
}
.side-panel-tabs[data-dragging], .side-panel-tabs[data-dragging] .side-panel-tab-select {
  cursor: grabbing;
  user-select: none;
}
.side-panel-tabs[data-dragging] > :is(.side-panel-thread-tab, .side-panel-file-tab)[data-dragged=""] {
  z-index: 2;
  background-color: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
  transition: none;
}
.side-panel-tabs[data-dragging] > .side-panel-thread-tab[data-dragged="away"] {
  opacity: 0.4;
}
.side-panel-tabs[data-dragging] > .side-panel-tab::before, .side-panel-tabs[data-dragging] .side-panel-tab-x {
  opacity: 0;
}
.side-panel-tabs[data-dragging] .side-panel-tab-close {
  background: transparent;
}
.side-panel-tabs[data-dragging] .side-panel-tab-icon {
  opacity: 0.7;
}
.side-panel-tabs[data-dragging] .side-panel-tab-icon:has(.agent-threads-state) {
  opacity: 1;
}
.thread-tab-ghost {
  position: fixed;
  z-index: 1000;
  max-width: 140px;
  white-space: nowrap;
  border: 1px solid var(--openbot-border);
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
  pointer-events: none;
  translate: -50% -50%;
}
.thread-tab-ghost .side-panel-tab-label {
  overflow: hidden;
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
}
.side-panel-drop {
  position: absolute;
  z-index: 17;
  top: calc(var(--left-header-height, 38px) + var(--openbot-space-2));
  inset-inline-end: var(--openbot-space-2);
  bottom: var(--openbot-space-2);
  display: grid;
  width: calc(var(--side-panel-width, 380px) - 2 * var(--openbot-space-2));
  place-items: start center;
  padding-top: var(--openbot-space-6);
  border: 1px dashed var(--openbot-text-secondary);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .side-panel-thread-tab, .side-panel-file-tab {
    transition: none;
  }
}
.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-block: var(--notice-inset) calc(var(--notice-inset) + var(--notice-composer-overlap));
  padding-inline: 12px var(--notice-inset);
  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-inline-end: 12px;
}
.composer-notice-icon {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--notice-accent);
  stroke-width: var(--openbot-icon-stroke-lg);
}
.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-action {
  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-action:is(:hover, :focus-visible):not(:disabled) {
  background: var(--ui-menu-item-hover);
}
.context-meter-action > 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);
  direction: ltr;
}
.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);
  stroke-width: var(--openbot-icon-stroke);
}
.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;
}
.composer-stack {
  --composer-stack-inset: var(--openbot-space-3);
}
@media (max-width: 620px) {
  .composer-stack {
    --composer-stack-inset: 2px;
  }
}
.composer-stack:has(> :not(.agent-queue-slot), > .agent-queue-slot > .agent-queue-slot-inner > *) {
  --composer-stack-overlap: 14px;
  position: relative;
  z-index: 10;
  overflow: hidden;
  margin: 0 var(--composer-stack-inset) calc(-1 * var(--composer-stack-overlap));
  border: 1px solid var(--openbot-queue-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-queue-surface);
  padding-bottom: var(--composer-stack-overlap);
}
.composer-stack :is(.awaiting-replies, .agent-queue-panel, .composer-notice, .composer-reply-preview) {
  z-index: auto;
  margin: -1px 0 0;
  border: 0;
  border-top: 1px solid var(--openbot-queue-border);
  border-radius: 0;
  box-shadow: none;
}
.composer-stack :is(.awaiting-replies, .agent-queue-panel) {
  padding-bottom: 0;
}
.composer-stack .composer-notice {
  padding-bottom: var(--notice-inset);
}
@media (prefers-reduced-motion: no-preference) {
  .composer-stack:has(> .context-compaction-notice[data-leaving]):not( :has(> :not(.agent-queue-slot, [data-leaving]), > .agent-queue-slot > .agent-queue-slot-inner > *) ) {
    animation: context-compaction-notice-out var(--openbot-duration-toast-exit) var(--openbot-ease-in-out) forwards;
  }
}
.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 {
  width: min(540px, 100%);
  margin: var(--openbot-space-3) 0 var(--openbot-space-6);
  animation: browser-takeover-in var(--openbot-duration-slow) var(--openbot-ease-out) both;
}
.browser-takeover-preview {
  min-width: 0;
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  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-surface-raised);
  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-lg);
}
.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;
}
@keyframes browser-takeover-in {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.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-button {
  border-radius: var(--openbot-radius-pill);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-regular);
}
.approval-command-block, .approval-detail-row, .approval-permissions {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface-raised);
}
.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;
}
@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;
  }
}
.feedback-offer {
  align-items: center;
  gap: var(--openbot-space-3);
  text-align: center;
}
.feedback-offer-emoji {
  font-size: var(--openbot-text-display);
  line-height: 1;
  animation: feedback-offer-wiggle 900ms var(--openbot-ease-out) 200ms both;
}
.feedback-offer-headline {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-xl);
  font-weight: var(--openbot-weight-semibold);
}
.feedback-offer-quote {
  display: grid;
  width: 100%;
  box-sizing: border-box;
  gap: var(--openbot-space-1);
  margin: 0;
  border-inline-start: 3px solid var(--openbot-border);
  color: var(--openbot-text-secondary);
  padding-inline-start: var(--openbot-space-3);
  text-align: start;
}
.feedback-offer-quote strong {
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
  overflow-wrap: anywhere;
}
.feedback-offer-quote p {
  margin: 0;
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.feedback-offer-actions {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--openbot-space-2);
}
.feedback-offer-actions > :last-child {
  flex: 1;
}
.feedback-sent {
  gap: var(--openbot-space-3);
}
.feedback-sent > * {
  animation: feedback-sent-in 320ms var(--openbot-ease-out) 80ms both;
}
.feedback-sent-badge {
  animation: feedback-sent-pop 420ms var(--openbot-ease-out) 260ms both;
}
.feedback-sent-body {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
.feedback-sent-footer {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  border-top: 1px solid var(--openbot-border);
  padding-top: var(--openbot-space-3);
}
.feedback-sent-footer > a {
  margin-inline-start: auto;
}
.feedback-sent-title {
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
@keyframes feedback-offer-wiggle {
  0% {
    opacity: 0;
    transform: scale(0.6) rotate(0);
  }
  40% {
    opacity: 1;
    transform: scale(1.1) rotate(-10deg);
  }
  70% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes feedback-sent-in {
  from {
    opacity: 0;
    transform: translateY(6px);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}
@keyframes feedback-sent-pop {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  60% {
    opacity: 1;
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .feedback-offer-emoji, .feedback-sent > *, .feedback-sent-badge {
    animation: none;
  }
}
.question-prompt-bubble.ui-bubble {
  width: min(540px, 100%);
  max-width: 100%;
}
.question-prompt-bubble[data-entrance] {
  animation: question-prompt-in var(--page-slide-dur) var(--page-slide-ease) both;
}
@keyframes question-prompt-in {
  from {
    opacity: 0;
    transform: translateY(var(--page-slide-distance));
    filter: blur(var(--page-blur));
  }
}
.question-prompt-bubble > .ui-bubble-content {
  width: 100%;
  padding: var(--openbot-space-4) var(--openbot-space-2) var(--openbot-space-2);
}
.question-prompt-form.ui-questionnaire {
  position: relative;
  gap: 0;
}
.question-prompt-cancel.ui-button {
  position: absolute;
  z-index: 2;
  inset-block-start: calc(-1 * var(--openbot-space-2));
  inset-inline-end: 0;
  color: var(--openbot-text-muted);
}
.question-prompt-stage {
  display: grid;
  overflow: hidden;
  outline: 0;
  transition: height var(--page-slide-dur) var(--page-slide-ease);
}
.question-prompt-page {
  grid-area: 1 / 1;
  align-self: start;
  min-width: 0;
  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), visibility 0s linear var(--page-slide-dur);
}
.question-prompt-page[data-pos="prev"], .question-prompt-page[data-pos="next"] {
  opacity: 0;
  filter: blur(var(--page-blur));
  visibility: hidden;
}
.question-prompt-page[data-pos="prev"] {
  transform: translateX(calc(-1 * var(--page-slide-distance)));
}
.question-prompt-page[data-pos="next"] {
  transform: translateX(var(--page-slide-distance));
}
:dir(rtl) .question-prompt-page[data-pos="prev"] {
  transform: translateX(var(--page-slide-distance));
}
:dir(rtl) .question-prompt-page[data-pos="next"] {
  transform: translateX(calc(-1 * var(--page-slide-distance)));
}
.question-prompt-page[data-pos="current"] {
  transition-delay: 0s, 0s, 0s, 0s;
}
.question-prompt-fold {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--acc-collapse) var(--acc-ease);
}
.question-prompt-fold[data-open="true"] {
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--acc-expand) var(--acc-ease);
}
.question-prompt-fold-inner {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  filter: blur(var(--text-swap-blur));
  transition: opacity var(--acc-collapse) var(--acc-ease), filter var(--acc-collapse) var(--acc-ease);
}
.question-prompt-fold[data-open="true"] .question-prompt-fold-inner {
  opacity: 1;
  filter: blur(0);
  transition: opacity var(--acc-expand) var(--acc-ease), filter var(--acc-expand) var(--acc-ease);
}
.question-prompt-header {
  display: grid;
  gap: var(--openbot-space-0-5);
  padding: 0 var(--openbot-space-2) var(--openbot-space-2);
}
.question-prompt-page:not(.question-prompt-summary) .question-prompt-header {
  padding-inline-end: var(--openbot-space-8);
}
.question-prompt-title {
  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);
  letter-spacing: var(--openbot-tracking-tight);
  overflow-wrap: anywhere;
}
.question-prompt-detail {
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.question-prompt-options {
  gap: var(--openbot-space-0-5);
}
.question-prompt-options > .question-prompt-option {
  position: relative;
  min-width: 0;
  min-height: 40px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: var(--openbot-space-3);
  border-radius: var(--openbot-radius-md);
  padding: var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  cursor: pointer;
  transition: background-color var(--openbot-duration-fast) ease-out;
}
.question-prompt-option:hover:not([data-disabled]), .question-prompt-custom:focus-within {
  background: var(--openbot-question-option-soft);
}
.question-prompt-option[data-checked] {
  background: var(--openbot-question-option-hover);
}
.question-prompt-option:active:not([data-disabled]) {
  background: var(--openbot-question-option-pressed);
}
.question-prompt-option.ui-questionnaire-choice:focus-within {
  outline: 0;
}
.question-prompt-option:has(.ui-questionnaire-choice-input:focus-visible) {
  background: var(--openbot-question-option-soft);
  box-shadow: inset 0 0 0 1px var(--openbot-question-option);
}
.question-prompt-option-text {
  min-width: 0;
  display: grid;
}
.question-prompt-option-label {
  overflow-wrap: anywhere;
}
.question-prompt-option-description {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  overflow-wrap: anywhere;
}
.question-prompt-letter.ui-kbd {
  width: 22px;
  min-width: 22px;
  height: 22px;
  border-color: transparent;
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-question-badge-soft);
  color: var(--openbot-question-badge-text);
  font-family: var(--openbot-font-sans);
  font-weight: var(--openbot-weight-semibold);
  transition: background-color var(--openbot-duration-fast) ease-out, color var(--openbot-duration-fast) ease-out;
}
.question-prompt-answer-skipped .question-prompt-letter.ui-kbd {
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-muted);
}
.question-prompt-option[data-checked] .question-prompt-letter.ui-kbd {
  background: var(--openbot-question-option);
  color: var(--openbot-text-on-status);
  animation: question-prompt-badge-pop var(--openbot-duration-slow) var(--openbot-ease-out);
}
.question-prompt-letter[data-answered].ui-kbd {
  background: var(--openbot-success);
  color: var(--openbot-text-on-status);
}
.question-prompt-bubble[data-entrance][data-state="done"] .question-prompt-letter[data-answered].ui-kbd {
  animation: question-prompt-badge-pop var(--openbot-duration-slow) var(--openbot-ease-out) var(--openbot-duration-fast) both;
}
@keyframes question-prompt-badge-pop {
  from {
    transform: scale(0.8);
  }
}
.question-prompt-custom {
  cursor: text;
}
.question-prompt-custom-input.ui-input {
  width: 100%;
  min-width: 0;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  color: var(--openbot-text-primary);
  font: inherit;
}
.question-prompt-custom-input.ui-input::placeholder {
  color: var(--openbot-text-muted);
}
.question-prompt-custom-input.ui-input:focus, .question-prompt-custom-input.ui-input:focus-visible {
  outline: 0;
  box-shadow: none;
}
.question-prompt-footer {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  padding-block: var(--openbot-space-3) var(--openbot-space-1);
  padding-inline: var(--openbot-space-2) var(--openbot-space-1);
}
.question-prompt-progress.ui-questionnaire-progress {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
}
.question-prompt-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-dim);
  transition: width var(--page-slide-dur) var(--page-slide-ease), background-color var(--page-slide-dur) var(--page-slide-ease), opacity var(--page-slide-dur) var(--page-slide-ease);
}
.question-prompt-dot[data-state="done"] {
  background: var(--openbot-question-badge-text);
  opacity: 0.55;
}
.question-prompt-dot[data-state="current"] {
  width: 18px;
  background: var(--openbot-question-option);
}
.question-prompt-actions {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-inline-start: auto;
}
.question-prompt-pill.ui-button {
  border-radius: var(--openbot-radius-pill);
  padding-inline: var(--openbot-space-4);
  font-size: var(--openbot-text-md);
}
.question-prompt-summary {
  display: grid;
}
.question-prompt-section .question-prompt-title {
  padding: 0 var(--openbot-space-2) var(--openbot-space-1);
  color: var(--openbot-text-muted);
}
.question-prompt-section + .question-prompt-section {
  margin-top: var(--openbot-space-2);
  border-top: 1px solid var(--openbot-border);
  padding-top: var(--openbot-space-3);
}
.question-prompt-answers {
  display: grid;
  gap: var(--openbot-space-1);
  margin: 0;
  list-style: none;
}
.question-prompt-answers, .question-prompt-answer-skipped {
  padding: var(--openbot-space-0-5) var(--openbot-space-2) var(--openbot-space-2);
}
.question-prompt-answer {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: var(--openbot-space-3);
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  overflow-wrap: anywhere;
}
.question-prompt-answer-skipped {
  color: var(--openbot-text-muted);
}
.question-prompt-closed {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin: 0;
  padding: 0 var(--openbot-space-2) var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.question-prompt-closed svg {
  width: 16px;
  height: 16px;
  flex: none;
}
.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-footer {
    flex-wrap: wrap;
  }
  .question-prompt-pill.ui-button {
    padding-inline: var(--openbot-space-3);
  }
}
@media (prefers-reduced-motion: reduce) {
  .question-prompt-bubble[data-entrance], .question-prompt-letter.ui-kbd, .question-prompt-option[data-checked] .question-prompt-letter.ui-kbd, .question-prompt-bubble[data-entrance][data-state="done"] .question-prompt-letter[data-answered].ui-kbd {
    animation: none;
  }
  :is( .question-prompt-stage, .question-prompt-page, .question-prompt-fold, .question-prompt-fold-inner, .question-prompt-letter, .question-prompt-dot, .question-prompt-option ) {
    transition: none;
  }
}
.ui-block-card.ui-bubble {
  width: min(540px, 100%);
  max-width: 100%;
}
.ui-block-card > .ui-block-content {
  container: ui-block / inline-size;
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-4) var(--openbot-space-4) var(--openbot-space-3);
}
.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;
  gap: var(--openbot-space-3);
}
.ui-block-heading {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: var(--openbot-space-0-5);
}
.ui-block-title {
  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);
  letter-spacing: var(--openbot-tracking-tight);
  overflow-wrap: anywhere;
}
.ui-block-subtitle {
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.ui-block-header:has(> .ui-block-status) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--openbot-space-3);
  row-gap: var(--openbot-space-0-5);
}
.ui-block-header:has(> .ui-block-status) > .ui-block-heading {
  display: contents;
}
.ui-block-header:has(> .ui-block-status):has(> .ui-block-icon) {
  grid-template-columns: auto minmax(0, 1fr) auto;
}
.ui-block-header:has(> .ui-block-status) > .ui-block-icon {
  grid-row: 1 / span 2;
  grid-column: 1;
}
.ui-block-header:has(> .ui-block-status):has(> .ui-block-icon):not(:has(.ui-block-subtitle)) > :is(.ui-block-icon, .ui-block-status) {
  grid-row: 1;
  align-self: center;
}
.ui-block-header:has(> .ui-block-status) .ui-block-title {
  grid-row: 1;
  grid-column: -3 / -2;
  align-self: center;
}
.ui-block-header:has(> .ui-block-status) .ui-block-subtitle {
  grid-column: -3 / -1;
}
.ui-block-status {
  grid-row: 1;
  grid-column: -2 / -1;
  align-self: start;
}
.ui-block-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--openbot-space-3);
}
.ui-block-body:empty {
  display: none;
}
.ui-block-card-footer {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--openbot-space-2);
}
.ui-block-footer-select {
  width: auto;
  max-width: 100%;
  flex: none;
}
.ui-block-footer-select > .ui-select-trigger {
  width: auto;
  max-width: 100%;
}
.ui-block-card[data-inline-actions] > .ui-block-content {
  flex-flow: row wrap;
  align-items: center;
  column-gap: var(--openbot-space-4);
  padding-block: var(--openbot-space-3);
}
.ui-block-card[data-inline-actions] > .ui-block-content > .ui-block-header {
  flex: 1 1 240px;
}
.ui-block-card[data-inline-actions] > .ui-block-content > .ui-block-card-footer {
  flex: none;
  margin-inline-start: auto;
}
.ui-block-card[data-inline-actions] > .ui-block-content > :is(.ui-block-body, .ui-block-error, .ui-block-outcome) {
  flex-basis: 100%;
  order: 1;
}
.ui-block-card[data-inline-actions] .ui-block-header:has(> .ui-block-status):has(.ui-block-subtitle) > :is(.ui-block-icon, .ui-block-status) {
  grid-row: 1 / span 2;
  align-self: center;
}
.ui-block-card[data-inline-actions] .ui-block-header:has(> .ui-block-status):has(.ui-block-subtitle) .ui-block-subtitle {
  grid-row: 2;
  grid-column: -3 / -2;
}
.ui-block-card[data-inline-actions] > .ui-block-content > .ui-block-header {
  min-height: calc(var(--openbot-leading-lg) + var(--openbot-space-0-5) + var(--openbot-leading-md));
}
.ui-block-card[data-settled] .ui-block-header > .ui-block-status {
  animation: ui-block-status-in var(--openbot-duration-overlay) var(--openbot-ease-out) both;
}
@keyframes ui-block-status-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}
.ui-block-card[data-inline-actions] .ui-block-header > .ui-block-status {
  height: var(--openbot-control-md);
  padding-inline: var(--openbot-space-4);
  border-radius: var(--openbot-radius-pill);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.ui-block-card[data-inline-actions][data-status="answered"] .ui-block-header > .ui-block-status {
  border-color: transparent;
  background: var(--openbot-success);
  color: var(--openbot-text-on-light);
}
:root[data-openbot-color-scheme="light"] .ui-block-card[data-inline-actions][data-status="answered"] .ui-block-header > .ui-block-status {
  background: var(--openbot-success-text);
}
.ui-block-card[data-danger][data-status="pending"] > .ui-block-content {
  border-color: var(--openbot-danger-border);
}
.ui-block-outcome {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.ui-block-outcome[data-status="answered"] {
  color: var(--openbot-text-secondary);
}
.ui-block-outcome svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
}
.ui-block-outcome-check {
  color: var(--openbot-success-text);
}
.ui-block-outcome-text {
  min-width: 0;
  overflow-wrap: anywhere;
}
.ui-block-error {
  min-width: 0;
  margin: 0;
  color: var(--openbot-danger-text);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  overflow-wrap: anywhere;
}
.ui-block-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--openbot-space-2);
}
.ui-block-card-footer > .ui-block-actions {
  justify-content: flex-end;
  margin-inline-start: auto;
}
.ui-block-card-footer > .ui-block-actions > .ui-button {
  flex-grow: 1;
}
.ui-block-card .ui-block-actions .ui-button {
  border-radius: var(--openbot-radius-pill);
  padding-inline: var(--openbot-space-4);
  font-size: var(--openbot-text-md);
}
.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-confirm-step > .ui-block-actions {
  justify-content: flex-end;
}
.ui-block-hint, .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 {
  max-height: 16em;
  overflow-y: auto;
  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[data-expanded="true"] {
  max-height: none;
}
.ui-block-preview[data-clamped="true"] {
  position: relative;
  overflow: clip;
}
.ui-block-preview[data-clamped="true"]::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2.5em;
  background: linear-gradient(to bottom, transparent, var(--openbot-bg-surface-raised));
  pointer-events: none;
}
.ui-block-preview-toggle {
  align-self: flex-start;
  margin-top: calc(var(--openbot-space-2) * -1);
}
.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;
}
:dir(rtl) .ui-block-hold-fill {
  transform-origin: right;
}
.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 {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-0-5);
  margin: 0 calc(-1 * var(--openbot-space-2));
  padding: 0;
  border: 0;
}
.ui-block-option {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 40px;
  grid-template-columns: 22px minmax(0, 1fr) fit-content(40%);
  align-items: center;
  gap: var(--openbot-space-3);
  border-radius: var(--openbot-radius-md);
  padding: var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  cursor: pointer;
  transition: background-color var(--openbot-duration-fast) ease-out;
}
.ui-block-option:hover:not([data-disabled]) {
  background: var(--openbot-question-option-soft);
}
.ui-block-option[data-checked] {
  background: var(--openbot-question-option-hover);
}
.ui-block-option:active:not([data-disabled]) {
  background: var(--openbot-question-option-pressed);
}
.ui-block-option[data-disabled] {
  cursor: default;
}
.ui-block-option[data-disabled]:not([data-checked]) {
  opacity: 0.5;
}
.ui-block-option:has(.ui-block-option-input:focus-visible) {
  background: var(--openbot-question-option-soft);
  box-shadow: inset 0 0 0 1px var(--openbot-question-option);
}
.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.ui-kbd {
  width: 22px;
  min-width: 22px;
  height: 22px;
  border-color: transparent;
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-question-badge-soft);
  color: var(--openbot-question-badge-text);
  font-family: var(--openbot-font-sans);
  font-weight: var(--openbot-weight-semibold);
  transition: background-color var(--openbot-duration-fast) ease-out, color var(--openbot-duration-fast) ease-out;
}
.ui-block-option[data-checked] .ui-block-option-key.ui-kbd {
  background: var(--openbot-question-option);
  color: var(--openbot-text-on-status);
}
.ui-block-option-label {
  min-width: 0;
  overflow-wrap: anywhere;
}
.ui-block-option-meta {
  min-width: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.ui-block-option-custom {
  cursor: text;
}
.ui-block-option-custom:focus-within {
  background: var(--openbot-question-option-soft);
}
.ui-block-option-custom-input.ui-input {
  width: 100%;
  min-width: 0;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  color: var(--openbot-text-primary);
  font: inherit;
}
.ui-block-option-custom-input.ui-input::placeholder {
  color: var(--openbot-text-muted);
}
.ui-block-option-custom-input.ui-input:focus, .ui-block-option-custom-input.ui-input:focus-visible {
  outline: 0;
  box-shadow: none;
}
.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);
}
.ui-block-header:has(> .ui-block-icon) {
  align-items: center;
}
.ui-block-answer-rows {
  display: flex;
  min-width: 0;
  flex-direction: column;
  margin: 0;
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-canvas);
}
.ui-block-answer-row {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--openbot-space-4);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.ui-block-answer-row + .ui-block-answer-row {
  border-top: 1px solid var(--openbot-border-grouped);
}
.ui-block-answer-row > dt {
  flex: none;
  color: var(--openbot-text-muted);
}
.ui-block-answer-row > dd {
  min-width: 0;
  margin: 0;
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
  text-align: end;
}
.ui-block-answer-value {
  overflow-wrap: anywhere;
}
.ui-block-answer-hidden {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  color: var(--openbot-text-dim);
  vertical-align: top;
}
.ui-block-answer-hidden > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: none;
  color: var(--openbot-text-muted);
}
@media (prefers-reduced-motion: reduce) {
  .ui-block-option, .ui-block-option-key.ui-kbd, .ui-block-hold-fill {
    transition: none;
  }
  .ui-block-card[data-settled] .ui-block-header > .ui-block-status {
    animation: none;
  }
}
@container ui-block (width < 360px) {
  .ui-block-card.ui-bubble > .ui-block-content > .ui-block-header:has(> .ui-block-status) {
    grid-template-columns: minmax(0, 1fr);
  }
  .ui-block-card.ui-bubble > .ui-block-content > .ui-block-header:has(> .ui-block-status):has(> .ui-block-icon) {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .ui-block-card.ui-bubble > .ui-block-content > .ui-block-header:has(> .ui-block-status) .ui-block-title {
    grid-row: 1;
    grid-column: -2 / -1;
  }
  .ui-block-card.ui-bubble > .ui-block-content > .ui-block-header:has(> .ui-block-status) .ui-block-subtitle {
    grid-row: 2;
    grid-column: -2 / -1;
  }
  .ui-block-card.ui-bubble > .ui-block-content > .ui-block-header:has(> .ui-block-status) > .ui-block-icon {
    grid-row: 1 / span 2;
    grid-column: 1;
    align-self: start;
  }
  .ui-block-card.ui-bubble > .ui-block-content > .ui-block-header:has(> .ui-block-status) > .ui-block-status {
    grid-row: 3;
    grid-column: -2 / -1;
    justify-self: start;
    align-self: start;
    margin-top: var(--openbot-space-1);
  }
  .ui-block-card.ui-bubble[data-inline-actions] > .ui-block-content > .ui-block-header:has(> .ui-block-status) > .ui-block-status {
    justify-self: end;
  }
  .ui-block-card.ui-bubble > .ui-block-content > .ui-block-card-footer > .ui-block-actions {
    flex: 1 1 100%;
    flex-wrap: wrap;
  }
  .ui-block-card.ui-bubble > .ui-block-content > .ui-block-card-footer > .ui-block-actions > .ui-button {
    flex: 1 1 auto;
  }
}
.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 {
  flex: 1 1 auto;
  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-close {
  border-radius: var(--openbot-radius-sm);
}
.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-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-lg);
}
.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);
  inset-inline-end: 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);
  color: var(--openbot-text-primary);
}
.browser-secret-card .ui-block-subtitle {
  overflow-wrap: anywhere;
}
.browser-secret-fields {
  display: grid;
  min-width: 0;
}
.browser-secret-card[data-variant="island"] {
  display: grid;
  gap: var(--openbot-space-4);
  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-inline-start: 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-save-option {
  display: grid;
  gap: var(--openbot-space-0-5);
}
.browser-secret-save {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  font-size: var(--openbot-text-sm);
}
.browser-secret-save-server {
  font-weight: var(--openbot-weight-medium);
}
.browser-secret-save-hint {
  margin: 0;
  padding-inline-start: calc(var(--openbot-icon-sm) + var(--openbot-space-1-5));
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.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-card .ui-block-card-footer > .browser-secret-private {
  flex: 1 1 12rem;
}
.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;
}
:root[data-surface="browser-dock"], :root[data-surface="browser-dock"] body, :root[data-surface="browser-dock"] #root {
  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);
  inset-inline-end: var(--openbot-space-4);
  display: flex;
  width: min(560px, calc(100% - 2 * var(--openbot-space-4)));
  flex-direction: column;
  align-items: flex-end;
  gap: var(--openbot-space-2);
  isolation: isolate;
}
.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-tab 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"], [data-mode="prompt"], [data-mode="approval"]) {
  width: 100%;
  border-radius: var(--openbot-radius-lg);
}
.browser-dock-island:is([data-mode="secret"], [data-mode="prompt"], [data-mode="approval"]) {
  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[data-mode="secret"] {
  width: min(100%, 420px);
}
.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-card {
  display: grid;
  max-height: 420px;
  gap: var(--openbot-space-2);
  overflow: auto;
  padding: var(--openbot-space-3);
  color: var(--openbot-text-primary);
}
.browser-dock-island-card :is(.question-prompt-bubble, .ui-bubble-content, .approval-card) {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
}
.browser-dock-island-card > * {
  margin: 0;
}
.browser-dock-island-activity {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  padding-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-2) var(--openbot-space-1);
  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-inline-start: auto;
  border-radius: var(--openbot-radius-pill);
}
.browser-dock-island-reply {
  display: grid;
  gap: var(--openbot-space-1-5);
  padding-block: var(--openbot-space-2) var(--openbot-space-3);
  padding-inline: var(--openbot-space-3) var(--openbot-space-2);
  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-inline-start: auto;
}
.browser-dock-reply-body {
  max-height: 160px;
  padding-inline-end: 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-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-2) var(--openbot-space-1);
}
.browser-dock-avatar {
  width: 20px;
  height: 20px;
  flex: none;
}
.browser-dock[data-glassless] .browser-dock-composer {
  border-color: transparent;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
}
.browser-dock-hide {
  border-radius: var(--openbot-radius-pill);
}
.browser-dock .browser-dock-tab {
  position: absolute;
  bottom: 0;
  overflow: hidden;
  max-width: min(360px, 100%);
  height: auto;
  box-sizing: border-box;
  justify-content: flex-start;
  padding-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-2) var(--openbot-space-3);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: inherit;
  gap: var(--openbot-space-2);
  inset-inline-end: 0;
  line-height: 1;
  white-space: nowrap;
}
.browser-dock:is([data-tucked], [data-phase="showing"]) > :not(.browser-dock-tab, .browser-dock-tuck-glass) {
  visibility: hidden;
}
.browser-dock:not([data-tucked]) > .browser-dock-tab {
  visibility: hidden;
}
.browser-dock .browser-dock-glass.browser-dock-tab:hover {
  background: var(--openbot-bg-glass);
}
.browser-dock-tab-avatar {
  position: relative;
  display: flex;
  height: 28px;
  flex: none;
  align-items: center;
}
.browser-dock-tab-avatar[data-working]::after {
  position: absolute;
  border: 1.5px solid transparent;
  border-radius: var(--openbot-radius-pill);
  border-top-color: var(--openbot-accent);
  border-right-color: var(--openbot-accent);
  animation: ui-spin 900ms linear infinite;
  content: "";
  inset: 3px -1px;
}
.browser-dock-tab-avatar[data-unread]::after {
  position: absolute;
  top: 3px;
  right: -2px;
  width: 7px;
  height: 7px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
  content: "";
}
.browser-dock-tab-label {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
}
.browser-dock .browser-dock-tab .browser-dock-tab-chevron {
  flex: none;
  color: var(--openbot-text-secondary);
  transition: translate var(--openbot-duration-normal) var(--openbot-ease-out);
}
.browser-dock-tab:hover .browser-dock-tab-chevron {
  translate: 0 -2px;
}
.browser-dock-tuck-glass {
  z-index: 0;
  border-radius: var(--openbot-radius-pill);
}
.browser-dock:is([data-tucked], [data-phase="showing"]) {
  width: var(--browser-dock-open-width, min(560px, calc(100% - 2 * var(--openbot-space-4))));
  pointer-events: none;
}
.browser-dock[data-tucked] > .browser-dock-tab {
  pointer-events: auto;
}
.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-block: 0;
  padding-inline: var(--openbot-space-1-5) var(--openbot-space-2);
  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;
  }
  .browser-dock-tab-avatar[data-working]::after {
    animation: none;
  }
}
body[data-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-frame);
  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;
  direction: ltr;
  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-chip[data-profile-color]::after {
  position: absolute;
  right: var(--openbot-space-2);
  bottom: 2px;
  left: var(--openbot-space-2);
  height: 2px;
  border-radius: var(--openbot-radius-pill);
  background: var(--browser-profile-color);
  content: "";
  pointer-events: none;
}
.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 {
  position: relative;
  width: var(--openbot-space-8);
  height: var(--openbot-space-8);
  flex-shrink: 0;
  border-radius: var(--openbot-radius-pill);
}
.channel-avatar-cluster {
  --channel-avatar-size: var(--agent-row-avatar-size, 36px);
  --channel-avatar-pitch: calc(var(--channel-avatar-size) * 0.38);
  --channel-avatar-face: calc(var(--channel-avatar-size) * 0.54);
  --agent-avatar-outline-width: 2px;
  --channel-avatar-ring-outline: 2px;
  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 .agent-avatar-custom {
  --channel-avatar-face: calc(var(--channel-avatar-size) * 0.46);
}
.channel-avatar:where(:not(.channel-avatar-cluster)) .agent-avatar + .agent-avatar {
  margin-inline-start: calc(-1 * var(--openbot-space-4));
}
.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) ~ :last-child {
  grid-column: 1 / span 2;
}
.sidebar .channel-avatar-cluster {
  --agent-avatar-outline-width: 3.5px;
  --channel-avatar-ring-outline: 3px;
}
.agent-row.sidebar-pinned-row .channel-avatar-cluster {
  --channel-avatar-size: var(--sidebar-pinned-avatar-size, 56px);
}
.agent-row.sidebar-pinned-row .channel-avatar-cluster .agent-avatar {
  width: var(--channel-avatar-face);
  height: var(--channel-avatar-face);
}
.channel-avatar-count {
  --felt-box: calc(var(--channel-avatar-size) * 0.46);
  position: relative;
  display: grid;
  box-sizing: border-box;
  min-width: var(--felt-box);
  height: var(--felt-box);
  isolation: isolate;
  padding-inline: 4px;
  place-items: center;
  border-radius: var(--openbot-radius-pill);
  outline: var(--channel-avatar-ring-outline) solid var(--agent-avatar-outline, transparent);
  box-shadow: 0 0 0 var(--agent-avatar-outline-width) var(--agent-avatar-outline, transparent);
  background: linear-gradient(to bottom, var(--openbot-felt-plum-top), var(--openbot-felt-plum-bottom));
  color: var(--openbot-felt-cream);
  font-size: var(--openbot-text-sm);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
:is(.channel-avatar-count, .agent-row-unread-count) {
  font-weight: 800;
  paint-order: stroke fill;
  -webkit-text-stroke: 0.7px var(--openbot-felt-cream-stroke);
}
:is(.channel-avatar-count, .agent-row-agent-status-unread, .agent-row-agent-status-waiting)::before {
  --felt-slice: calc(var(--felt-box) / 1.62);
  --felt-edge: calc(var(--felt-slice) * 0.19);
  position: absolute;
  z-index: -1;
  inset: calc(-1 * var(--felt-edge));
  border: var(--felt-slice) solid transparent;
  border-image: url("/@fs/home/ubuntu/openbot/packages/ui/src/assets/plush/felt-pill-lilac.webp") 49% fill / var(--felt-slice) stretch;
  clip-path: inset(calc(var(--felt-edge) + 0.25px) round calc(var(--felt-box) / 2 - 0.25px));
  filter: brightness(0.52) saturate(1.35) contrast(1.1);
  content: "";
}
.agent-row-agent-status-waiting::before {
  border-image-source: url("/@fs/home/ubuntu/openbot/packages/ui/src/assets/plush/felt-pill-amber.webp");
  filter: none;
}
.sidebar .channel-avatar-cluster .channel-avatar-count {
  translate: 0 1.5px;
}
.sidebar .channel-avatar-cluster .agent-avatar:has(> .bloub-avatar-svg image) {
  filter: url("#sidebar-plush-ring");
}
.sidebar .channel-avatar-cluster .agent-avatar:has(> .bloub-avatar-svg image) > .bloub-avatar-svg {
  filter: none;
}
.sidebar :is(.agent-row:hover, .agent-row-active) .channel-avatar-cluster .agent-avatar:has(> .bloub-avatar-svg image) {
  filter: url("#sidebar-plush-ring-raised");
}
@media (hover: hover) and (pointer: fine) and (min-width: 601px) {
  .sidebar .agent-row:hover .channel-avatar-cluster .agent-avatar:has(> .bloub-avatar-svg image) {
    filter: url("#sidebar-plush-ring-hover");
  }
}
:root[data-openbot-color-scheme="light"] .sidebar .agent-row-active .channel-avatar-cluster .agent-avatar:has(> .bloub-avatar-svg image) {
  filter: url("#sidebar-plush-ring-selected");
}
.sidebar .agent-list[data-sidebar-dragging] .agent-row:hover:not(.agent-row-active) .channel-avatar-cluster .agent-avatar:has(> .bloub-avatar-svg image) {
  filter: url("#sidebar-plush-ring");
}
.channel-avatar-picture {
  width: var(--channel-avatar-size, var(--openbot-space-8));
  min-width: var(--channel-avatar-size, var(--openbot-space-8));
  height: var(--channel-avatar-size, var(--openbot-space-8));
}
.channel-picture {
  display: grid;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  place-items: center;
  overflow: hidden;
  border-radius: var(--openbot-radius-sm);
  background: var(--channel-picture-hue);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in oklab, var(--channel-picture-hue) 26%, var(--openbot-bg-control));
  }
  color: var(--channel-picture-hue);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, var(--channel-picture-hue) 78%, var(--openbot-text-primary));
  }
}
.channel-picture > svg {
  width: 55%;
  height: 55%;
}
.channel-picture-image {
  object-fit: cover;
  background: var(--openbot-bg-control);
}
.channel-icon-grid .channel-picture {
  width: 32px;
  height: 32px;
}
.channel-icon-grid .channel-picture > svg {
  width: 18px;
  height: 18px;
}
.channel-avatar-cluster .channel-picture {
  border-radius: var(--openbot-radius-lg);
}
.channel-picture-trigger .channel-picture {
  border-radius: var(--openbot-radius-xl);
}
.channel-picture-editor .avatar-image-upload-preview .channel-picture {
  width: 100%;
  height: 100%;
}
.agent-row.sidebar-pinned-row .channel-avatar-cluster .channel-picture {
  border-radius: var(--openbot-radius-xl);
}
.channel-picture-trigger {
  --agent-row-avatar-size: 62px;
  position: relative;
  display: grid;
  width: 62px;
  height: 62px;
  margin: 0;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: var(--openbot-radius-xl);
  background: transparent;
}
.channel-picture-trigger:hover {
  filter: brightness(1.08);
}
.channel-picture-editor .avatar-image-upload-preview {
  border-radius: var(--openbot-radius-md);
}
.channel-picture-editor .channel-icon-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.channel-icon-grid .channel-icon-choice {
  height: 44px;
}
.channel-picture-editor .channel-icon-color-grid {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}
.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: start;
  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 .channel-avatar-picture {
  --channel-avatar-size: 20px;
}
.channel-title .agent-avatar {
  --agent-avatar-optical-offset: -2px;
  width: 18px;
  height: 18px;
}
.channel-title .channel-avatar .agent-avatar + .agent-avatar {
  margin-inline-start: -8px;
}
.channel-title, .channel-empty {
  --agent-avatar-outline: var(--openbot-bg-canvas);
}
@media (hover: hover) and (pointer: fine) and (min-width: 601px) {
  .conversation-header .channel-title:hover:not(:disabled) {
    --agent-avatar-outline: var(--openbot-bg-control-hover);
  }
}
.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-inline-start: var(--openbot-space-0-5);
}
.channel-activity-faces {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}
.channel-activity-faces .agent-activity-avatar {
  transition: transform var(--openbot-duration-overlay) var(--openbot-ease-out), opacity var(--openbot-duration-overlay) var(--openbot-ease-out), margin-inline-end var(--openbot-duration-overlay) var(--openbot-ease-in-out);
}
.channel-activity-faces .agent-activity-avatar + .agent-activity-avatar {
  margin-inline-start: calc(-1 * var(--openbot-space-2));
}
.channel-activity-faces .channel-activity-face-leaving {
  margin-inline-end: calc(-1 * var(--openbot-space-6));
  opacity: 0;
  transform: translateY(4px) scale(0.6);
}
@media (prefers-reduced-motion: reduce) {
  .channel-activity-faces .agent-activity-avatar {
    transition: none;
  }
}
.channel-activity-names {
  flex: 0 1 auto;
  min-width: 0;
  margin-inline-start: var(--openbot-space-2);
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.channel-activity-name {
  color: var(--channel-activity-name-color, var(--openbot-text-muted));
}
.channel-activity-content .agent-activity-label {
  flex-shrink: 0;
}
.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-text {
  min-width: 0;
  flex: 1 1 24ch;
}
.channel-paused-task-subject {
  margin: 0;
  overflow: hidden;
  font-size: var(--openbot-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.channel-paused-task-reason {
  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);
}
.channel-context-actions .ui-item-description {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
.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-actions .header-panel-toggle > svg:dir(rtl), .diagram-inspector .header-panel-toggle > svg:dir(rtl) {
  transform: scaleX(-1);
}
.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-inline-start: auto;
}
.diagram-view-body {
  --diagram-inspector-width: 340px;
  position: relative;
  display: flex;
  min-height: 0;
  flex: 1;
  transition: padding-inline-end var(--panel-resize-duration, var(--openbot-duration-overlay)) cubic-bezier(0.22, 1, 0.36, 1);
}
.diagram-view-body[data-inspector="open"] {
  padding-inline-end: var(--diagram-inspector-width);
}
.diagram-view-canvas {
  position: relative;
  display: flex;
  min-width: 0;
  flex: 1;
}
.diagram-view-chat {
  position: absolute;
  bottom: var(--openbot-space-4);
  inset-inline-start: 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;
  direction: ltr;
  transform-origin: 0 0;
}
.diagram-board-world[data-settling] {
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.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% - var(--diagram-new-agent-height, 188px) - var(--openbot-space-2)) );
  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;
}
.diagram-new-agent-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-1);
}
.diagram-board-zoom {
  position: absolute;
  inset-inline-end: 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;
  inset-inline-end: 0;
  bottom: 0;
  display: flex;
  width: var(--diagram-inspector-width);
  min-height: 0;
  flex-direction: column;
  border-inline-start: 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: start;
}
.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-inline-start: 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-block: var(--openbot-space-2);
  padding-inline: var(--openbot-space-3) var(--openbot-space-2);
}
.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;
  }
}
.diagram-empty {
  container-type: inline-size;
}
.diagram-empty-viewport {
  display: grid;
  background-image: none;
  cursor: default;
}
.diagram-empty-backdrop {
  position: relative;
  grid-area: 1 / 1;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  opacity: 0.62;
  mask-image: radial-gradient(ellipse 30% 30% at 50% 50%, var(--openbot-transparent) 55%, var(--openbot-text-primary) 100%), radial-gradient(ellipse 80% 85% at 50% 50%, var(--openbot-text-primary) 55%, var(--openbot-transparent) 100%);
  mask-composite: intersect;
}
.diagram-empty-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, var(--openbot-border-strong) 1px, var(--openbot-transparent) 0);
  background-size: 24px 24px;
}
.diagram-empty-world {
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  transform-origin: center;
  scale: var(--diagram-empty-scale);
  transition: opacity 900ms var(--openbot-ease-out), filter 900ms var(--openbot-ease-out);
}
.diagram-empty-backdrop[data-leaving] .diagram-empty-world {
  opacity: 0;
  filter: blur(4px);
}
.diagram-empty-node {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(12px) scale(0.96);
  transition: opacity 700ms var(--openbot-ease-out), filter 700ms var(--openbot-ease-out), transform 700ms var(--openbot-ease-out);
}
.diagram-empty-node[data-shown] {
  opacity: 1;
  filter: blur(0);
  transform: none;
}
.diagram-empty-node .diagram-node {
  cursor: default;
}
.diagram-empty .diagram-empty-edge[data-state="idle"] .diagram-edge-line {
  stroke-dasharray: 1600;
  stroke-dashoffset: 1600;
  transition: stroke-dashoffset 900ms var(--openbot-ease-in-out) 350ms;
}
.diagram-empty .diagram-empty-edge[data-drawn] .diagram-edge-line {
  stroke-dashoffset: 0;
}
.diagram-empty .diagram-empty-edge[data-state] .diagram-edge-arrow {
  opacity: 0;
  transition: opacity 300ms var(--openbot-ease-out) 1100ms;
}
.diagram-empty .diagram-empty-edge[data-drawn] .diagram-edge-arrow {
  opacity: 1;
}
.diagram-empty-pulse {
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: var(--openbot-radius-pill);
  background: var(--diagram-routine-color, var(--openbot-accent));
  outline: 4px solid var(--diagram-routine-soft, var(--openbot-accent-soft));
  offset-rotate: 0deg;
  animation: diagram-empty-pulse 900ms var(--openbot-ease-in-out) both;
}
@keyframes diagram-empty-pulse {
  0% {
    offset-distance: 0%;
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}
.diagram-empty-pitch {
  z-index: 1;
  display: grid;
  grid-area: 1 / 1;
  max-width: 34rem;
  place-self: center;
  justify-items: center;
  gap: var(--openbot-space-4);
  padding: var(--openbot-space-6);
  text-align: center;
}
.diagram-empty-title {
  margin: 0;
  font-size: var(--openbot-text-display);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.diagram-empty-title > span {
  display: block;
}
.diagram-empty-lead {
  color: var(--openbot-text-muted);
}
.diagram-empty-title .diagram-empty-hand {
  display: inline;
  color: var(--openbot-accent-text);
  font-family: "Bradley Hand", "Noteworthy", "Segoe Print", cursive;
  font-size-adjust: 0.62;
  font-weight: var(--openbot-weight-semibold);
  line-height: 1;
  clip-path: inset(-0.4em 100% -0.4em -0.2em);
  animation: diagram-empty-write 520ms linear 500ms forwards;
}
@keyframes diagram-empty-write {
  to {
    clip-path: inset(-0.4em -0.2em -0.4em -0.2em);
  }
}
.diagram-empty-lines {
  display: grid;
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-xl);
  line-height: 1.5;
}
.diagram-empty-action.ui-button {
  width: 100%;
  max-width: 22rem;
  height: var(--openbot-control-lg);
  margin-top: var(--openbot-space-2);
}
@container (max-width: 720px) {
  .diagram-empty-title {
    font-size: var(--openbot-text-3xl);
  }
  .diagram-empty-lines {
    font-size: var(--openbot-text-lg);
  }
  .diagram-empty-backdrop {
    opacity: 0.45;
  }
}
.diagram-empty[data-still] :is(.diagram-empty-world, .diagram-empty-node, .diagram-empty-hand), .diagram-empty[data-still] .diagram-empty-edge[data-state] path {
  animation: none;
  transition: none;
  clip-path: none;
}
.diagram-empty[data-still] .diagram-empty-pulse {
  display: none;
}
:where(.wfn-stage, .wfn-menu, .wfn-popover) {
  --wfn-card: var(--openbot-bg-canvas);
  --wfn-field: var(--openbot-bg-surface-raised);
  --wfn-ring: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --wfn-ring: color-mix(in srgb, var(--openbot-text-primary) 6%, transparent);
  }
  --wfn-ring-strong: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --wfn-ring-strong: color-mix(in srgb, var(--openbot-text-primary) 10%, transparent);
  }
  --wfn-hover: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --wfn-hover: color-mix(in srgb, var(--openbot-text-primary) 6%, transparent);
  }
  --wfn-port: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --wfn-port: color-mix(in srgb, var(--openbot-text-primary) 10%, var(--openbot-bg-canvas));
  }
  --wfn-glass: var(--openbot-bg-surface-raised);
  @supports (color: color-mix(in lab, red, red)) {
    --wfn-glass: color-mix(in srgb, var(--openbot-bg-surface-raised) 75%, transparent);
  }
  --wfn-glass-blur: blur(40px) saturate(1.4);
  --wfn-radius-card: calc(var(--openbot-radius-lg) + var(--openbot-space-1));
  --wfn-small: calc(var(--openbot-text-sm) - 1px);
  --wfn-radius-row: calc(var(--openbot-radius-sm) + var(--openbot-space-1));
  --wfn-radius-run: calc(var(--openbot-radius-md) + 2px);
  --wfn-text-title: calc(var(--openbot-text-display) * 1.25);
  --openbot-focus-ring: 0 0 0 1px var(--openbot-text-muted);
}
:root[data-openbot-color-scheme="light"] :where(.wfn-stage, .wfn-menu, .wfn-popover) {
  --wfn-card: var(--openbot-bg-surface);
  --wfn-field: var(--openbot-bg-control-hover);
}
.wfn-node {
  position: relative;
  display: grid;
  gap: var(--openbot-space-1-5);
  width: var(--wfn-width);
  transition: width var(--openbot-duration-slow) var(--openbot-ease-out);
}
.wfn-node[data-kind="prompt"] {
  --wfn-width: 296px;
  --wfn-height: 151px;
}
.wfn-node[data-kind="agent"], .wfn-node[data-kind="llm"] {
  --wfn-width: 350px;
}
.wfn-node[data-kind="image"] {
  --wfn-width: 300px;
}
.wfn-node[data-kind="asset"] {
  --wfn-width: 240px;
}
.wfn-label {
  display: flex;
  gap: var(--openbot-space-1);
  align-items: center;
  color: var(--openbot-text-muted);
  font-size: var(--wfn-small);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-sm);
  user-select: none;
}
.wfn-label svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.wfn-card {
  position: relative;
  display: grid;
  gap: var(--openbot-space-2);
  align-content: start;
  min-height: var(--wfn-height, auto);
  padding: var(--openbot-space-2);
  border-radius: var(--wfn-radius-card);
  background: var(--wfn-card);
  box-shadow: 0 0 0 1px var(--wfn-ring);
  transition: box-shadow var(--openbot-duration-hover) var(--openbot-ease-out);
}
.wfn-card[data-media] {
  aspect-ratio: var(--wfn-aspect, auto);
  padding: 0;
  overflow: hidden;
}
.wfn-field {
  display: grid;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-3);
  border-radius: var(--openbot-radius-md);
  background: var(--wfn-field);
  transition: box-shadow var(--openbot-duration-hover) var(--openbot-ease-out);
}
.wfn-field:focus-within {
  box-shadow: inset 0 0 0 1px var(--wfn-ring-strong);
}
.wfn-field-fill {
  min-height: calc(var(--wfn-height) - var(--openbot-space-4));
}
.wfn-field-task {
  grid-template-rows: 1fr auto;
  min-height: 150px;
}
.wfn-stage .wfn-input {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  resize: none;
  field-sizing: content;
}
.wfn-stage .wfn-input::placeholder, .wfn-stage .wfn-text-input::placeholder {
  color: var(--openbot-text-muted);
}
.wfn-stage .wfn-input:focus-visible {
  outline: none;
  box-shadow: none;
}
.wfn-field-fill .wfn-input {
  height: 100%;
}
.wfn-field-foot {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}
.wfn-field-result p {
  max-height: 120px;
  margin: 0;
  overflow-y: auto;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
}
.wfn-field-result p[data-failed] {
  color: var(--openbot-text-muted);
}
.wfn-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: calc(var(--openbot-space-1) * -1) 0;
  color: var(--openbot-text-muted);
  font-size: var(--wfn-small);
  font-weight: var(--openbot-weight-semibold);
}
.wfn-stage .wfn-pill {
  gap: var(--openbot-space-1-5);
  min-width: 0;
  height: 20px;
  padding: 0 var(--openbot-space-1);
  border: 0;
  border-radius: var(--openbot-radius-pill);
  background: transparent;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.wfn-stage .wfn-model-pill {
  flex-shrink: 1;
}
.wfn-stage .wfn-agent-pill:has(+ .wfn-model-pill) {
  max-width: calc(100% - 96px - var(--openbot-space-2));
}
.wfn-stage .wfn-field-foot .provider-model-trigger {
  gap: var(--openbot-space-1);
  height: 20px;
  padding: 0 var(--openbot-space-1);
  border: 0;
  background: transparent;
  box-shadow: none;
}
.wfn-stage .wfn-field-foot .provider-model-trigger-name {
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
}
.wfn-stage .wfn-field-foot .provider-model-trigger:is(:hover, [aria-expanded="true"]), .wfn-stage .wfn-pill:hover {
  background: var(--wfn-hover);
}
.wfn-pill > svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  color: var(--openbot-text-muted);
}
.wfn-pill > svg.wfn-model-logo, .wfn-menu.ui-action-menu [role="menuitem"] > svg.wfn-model-logo {
  flex: none;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-primary);
  fill: currentcolor;
  stroke: none;
}
.wfn-avatar.agent-avatar {
  --agent-avatar-optical-offset: -2px;
  flex: none;
  width: 16px;
  height: 16px;
}
.wfn-stage .wfn-run {
  height: var(--openbot-control-lg);
  border-radius: var(--wfn-radius-run);
  font-weight: var(--openbot-weight-semibold);
}
.wfn-ports {
  position: absolute;
  top: 50%;
  display: grid;
  gap: 10px;
  translate: 0 calc(-50% + 11px);
}
.wfn-ports[data-side="in"] {
  right: calc(100% + var(--openbot-space-3));
}
.wfn-ports[data-side="out"] {
  left: calc(100% + var(--openbot-space-3));
}
.wfn-port-slot {
  position: relative;
  display: grid;
}
.wfn-stage .wfn-port {
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
  border-radius: var(--openbot-radius-pill);
  background: var(--wfn-port);
  box-shadow: 0 0 0 1px var(--wfn-ring);
  color: var(--openbot-text-secondary);
  opacity: 0;
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out), scale var(--openbot-duration-fast) var(--openbot-ease-out), background-color var(--openbot-duration-hover) var(--openbot-ease-out);
}
.wfn-port svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.wfn-node:is(:hover, :focus-within, [data-selected]) .wfn-port {
  opacity: 1;
}
.wfn-stage .wfn-port:hover {
  background: var(--openbot-text-primary);
  color: var(--openbot-bg-canvas);
}
.wfn-port-chip {
  position: absolute;
  top: 50%;
  padding: calc((1lh - 1cap) / 2 + 2px) var(--openbot-space-2);
  text-box: trim-both cap alphabetic;
  border-radius: var(--openbot-radius-sm);
  background: var(--wfn-card);
  box-shadow: 0 0 0 1px var(--wfn-ring-strong);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  translate: 0 -50%;
  transition: opacity var(--openbot-duration-hover) var(--openbot-ease-out);
}
.wfn-port-slot[data-side="out"] .wfn-port-chip {
  left: calc(100% + var(--openbot-space-2));
}
.wfn-port-slot[data-side="in"] .wfn-port-chip {
  right: calc(100% + var(--openbot-space-2));
}
.wfn-port-slot:has(.wfn-port:is(:hover, :focus-visible)) .wfn-port-chip {
  opacity: 1;
}
.wfn-toolbar {
  position: absolute;
  bottom: calc(100% + var(--openbot-space-3) / var(--wfn-scale, 1));
  left: round(50%, 1px);
  z-index: 2;
  display: flex;
  gap: var(--openbot-space-0-5);
  align-items: center;
  padding: var(--openbot-space-1);
  border-radius: var(--openbot-radius-pill);
  white-space: nowrap;
  background: var(--wfn-glass);
  box-shadow: 0 0 0 1px var(--wfn-ring-strong);
  translate: calc(round(-50%, 1px) + var(--wfn-snap-x, 0px) / var(--wfn-scale, 1)) calc(var(--wfn-snap-y, 0px) / var(--wfn-scale, 1));
  transform-origin: bottom center;
  scale: calc(1 / var(--wfn-scale, 1));
  backdrop-filter: var(--wfn-glass-blur);
}
.wfn-toolbar[data-side="below"] {
  top: calc(100% + var(--openbot-space-3) / var(--wfn-scale, 1));
  bottom: auto;
  transform-origin: top center;
}
.wfn-toolbar[data-side="below"][data-strip] {
  top: calc(100% + (8px + 52px + var(--openbot-space-2)) / var(--wfn-scale, 1));
}
.wfn-stage .wfn-toolbar :is(.ui-button, .wfn-toolbar-select) {
  border-radius: var(--openbot-radius-pill);
  box-shadow: none;
  color: var(--openbot-text-secondary);
}
.wfn-stage .wfn-toolbar :is(.ui-button, .wfn-toolbar-select):is(:hover, :focus-visible, [aria-pressed="true"]) {
  background: var(--wfn-hover);
  color: var(--openbot-text-primary);
}
.wfn-stage .wfn-toolbar .wfn-tool-action {
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  padding: 0;
}
.wfn-stage .wfn-toolbar .wfn-tool-action svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.wfn-stage .wfn-toolbar .wfn-tool-action[data-tone="danger"]:is(:hover, :focus-visible) {
  background: var(--openbot-danger);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-danger) 16%, transparent);
  }
  color: var(--openbot-danger-text);
}
.wfn-toolbar-separator {
  width: 1px;
  height: 16px;
  margin: 0 var(--openbot-space-1);
  background: var(--wfn-ring-strong);
}
.wfn-toolbar-separator:first-child {
  display: none;
}
.wfn-stage .wfn-toolbar-select {
  gap: var(--openbot-space-1);
  height: var(--openbot-control-md);
  padding-inline: var(--openbot-space-2);
  font-size: var(--openbot-text-sm);
}
.wfn-toolbar-select svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  color: var(--openbot-text-muted);
}
.wfn-text {
  width: auto;
  min-width: 120px;
}
.wfn-stage .wfn-text-input {
  min-height: 0;
  padding: var(--openbot-space-1) var(--openbot-space-1-5);
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: transparent;
  box-shadow: none;
  color: var(--wfn-text-ink, var(--openbot-text-primary));
  font-size: var(--openbot-text-lg);
  line-height: 1.4;
  resize: none;
  field-sizing: content;
}
.wfn-stage .wfn-text-input[data-font="mono"] {
  font-family: var(--openbot-font-mono);
}
.wfn-stage .wfn-text-input[data-text-size="lg"] {
  font-size: var(--openbot-text-3xl);
  letter-spacing: var(--openbot-tracking-tight);
}
.wfn-stage .wfn-text-input[data-text-size="xl"] {
  font-size: var(--wfn-text-title);
  letter-spacing: var(--openbot-tracking-tight);
}
.wfn-stage .wfn-text-input[data-bold] {
  font-weight: var(--openbot-weight-bold);
}
.wfn-stage .wfn-text-input:focus-visible {
  outline: none;
  box-shadow: none;
}
.wfn-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wfn-card[data-media] > .wfn-media {
  position: absolute;
  inset: 0;
}
.wfn-media-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--openbot-text-primary) 14%, transparent);
  }
}
.wfn-media-empty svg {
  width: 40px;
  height: 40px;
  stroke-width: 1.25;
}
.wfn-overlay {
  position: absolute;
  inset: auto 0 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--openbot-space-1);
  max-height: 100%;
  padding: var(--openbot-space-2);
  opacity: 0;
  translate: 0 4px;
  transition: opacity var(--openbot-duration-normal) var(--openbot-ease-out), translate var(--openbot-duration-normal) var(--openbot-ease-out);
}
.wfn-node:is(:hover, :focus-within, [data-selected]) .wfn-overlay {
  opacity: 1;
  translate: 0 0;
}
.wfn-overlay-bar {
  display: flex;
  gap: var(--openbot-space-1);
  align-items: center;
}
.wfn-stage .wfn-chip {
  display: inline-flex;
  gap: var(--openbot-space-1);
  align-items: center;
  height: var(--openbot-control-xs);
  padding: 0 var(--openbot-space-1-5);
  border: 0;
  border-radius: var(--openbot-radius-sm);
  background: var(--wfn-glass);
  box-shadow: inset 0 0 0 1px var(--wfn-ring-strong);
  color: var(--openbot-text-primary);
  font-size: var(--wfn-small);
  font-weight: var(--openbot-weight-medium);
  backdrop-filter: var(--wfn-glass-blur);
  cursor: pointer;
}
.wfn-chip svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.wfn-stage .wfn-collapse {
  margin-left: auto;
  border-radius: var(--openbot-radius-sm);
  color: var(--openbot-text-primary);
}
.wfn-panel {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--openbot-space-2);
  min-height: 0;
  padding: 10px;
  border-radius: var(--openbot-radius-md);
  background: var(--wfn-glass);
  box-shadow: inset 0 0 0 1px var(--wfn-ring);
  backdrop-filter: var(--wfn-glass-blur);
}
.wfn-panel .wfn-input {
  max-height: calc(var(--openbot-leading-sm) * 3);
  overflow-y: auto;
  font-weight: var(--openbot-weight-medium);
  scrollbar-width: none;
}
.wfn-stage .wfn-run-pill {
  gap: var(--openbot-space-1);
  height: var(--openbot-control-xs);
  padding: 0 10px 0 var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-pill);
  font-size: var(--openbot-text-sm);
}
.wfn-run-pill svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.wfn-stage .wfn-run-pill[aria-busy="true"] svg {
  display: none;
}
.wfn-stage .wfn-asset-trigger {
  display: grid;
  width: 100%;
  min-height: 120px;
  padding: 0;
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: var(--wfn-field);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.wfn-node[data-kind="asset"] .wfn-card {
  align-content: stretch;
}
.wfn-node[data-height] .wfn-card[data-media] {
  aspect-ratio: auto;
  height: var(--wfn-height);
}
.wfn-node[data-height] .wfn-card[data-media] .wfn-asset-trigger > .wfn-media {
  position: absolute;
  inset: 0;
}
.wfn-card[data-media] .wfn-asset-trigger {
  position: absolute;
  inset: 0;
  border-radius: 0;
}
.wfn-asset-trigger:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 1px var(--openbot-text-muted);
}
.wfn-stage .wfn-asset-trigger[data-dropping] {
  background: var(--wfn-hover);
}
.wfn-asset-empty {
  display: grid;
  gap: var(--openbot-space-2);
  place-content: center;
  justify-items: center;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.wfn-asset-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--openbot-radius-pill);
  background: var(--wfn-hover);
  box-shadow: inset 0 0 0 1px var(--wfn-ring-strong);
  transition: background-color var(--openbot-duration-hover) var(--openbot-ease-out);
}
.wfn-asset-icon svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.wfn-asset-trigger:is(:hover, [data-dropping]) .wfn-asset-icon {
  background: var(--wfn-ring-strong);
}
.wfn-asset-caption {
  position: absolute;
  bottom: var(--openbot-space-2);
  left: var(--openbot-space-2);
  max-width: calc(100% - var(--openbot-space-4));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wfn-asset-file {
  display: flex;
  gap: var(--openbot-space-3);
  align-items: center;
  min-width: 0;
  padding: var(--openbot-space-3);
  text-align: left;
}
.wfn-asset-glyph {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 48px;
  border-radius: var(--openbot-radius-sm);
  background: var(--wfn-hover);
  box-shadow: inset 0 0 0 1px var(--wfn-ring-strong);
  color: var(--openbot-text-muted);
}
.wfn-asset-glyph svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  translate: 0 -4px;
}
.wfn-asset-glyph span {
  position: absolute;
  bottom: var(--openbot-space-1);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-glyph-sm);
  font-weight: var(--openbot-weight-bold);
  letter-spacing: var(--openbot-tracking-wide);
}
.wfn-asset-text {
  display: grid;
  min-width: 0;
}
.wfn-asset-name {
  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;
}
.wfn-asset-meta {
  color: var(--openbot-text-muted);
  font-size: var(--wfn-small);
  line-height: var(--openbot-leading-sm);
}
.wfn-menu {
  --ui-menu-bg: var(--wfn-glass);
  --ui-menu-panel-shadow: 0 0 0 1px var(--wfn-ring-strong);
  --ui-menu-item-hover: var(--wfn-hover);
  --ui-menu-radius: var(--openbot-radius-lg);
  backdrop-filter: var(--wfn-glass-blur);
}
.wfn-picker.ui-action-menu {
  --ui-menu-radius: var(--wfn-radius-card);
  display: flex;
  flex-direction: column;
  min-width: 232px;
  max-width: min(320px, calc(100vw - var(--openbot-space-4)));
  max-height: min(440px, var(--kb-popper-content-available-height, 440px));
  padding: 0;
}
.wfn-picker-search {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--openbot-space-2);
  padding: 0 var(--openbot-space-3);
  border-bottom: 1px solid var(--wfn-ring-strong);
}
.wfn-picker.ui-action-menu .wfn-picker-search > svg {
  flex: none;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
}
.wfn-picker .wfn-picker-field {
  flex: 1;
  min-width: 0;
  height: var(--openbot-control-lg);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
}
.wfn-picker .wfn-picker-field::placeholder {
  color: var(--openbot-text-muted);
}
.wfn-picker .wfn-picker-field:focus-visible {
  outline: none;
  box-shadow: none;
}
.wfn-picker-list {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--openbot-space-1-5);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
fieldset.wfn-picker-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.wfn-picker-group + .wfn-picker-group {
  margin-top: var(--openbot-space-1-5);
}
.wfn-picker-heading {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  padding: var(--openbot-space-1-5) var(--openbot-space-2) var(--openbot-space-1);
  color: var(--openbot-text-muted);
  font-size: var(--wfn-small);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
}
.wfn-picker.ui-action-menu .wfn-picker-heading > svg {
  flex: none;
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  fill: currentcolor;
}
.wfn-picker.ui-action-menu .wfn-picker-row:is([role^="menuitem"]) {
  height: auto;
  min-height: calc(var(--openbot-control-md) + var(--openbot-space-2));
  gap: calc(var(--openbot-space-2) + var(--openbot-space-0-5));
  padding-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-1) var(--openbot-space-2);
  border-radius: var(--wfn-radius-row);
  white-space: normal;
}
.wfn-picker.ui-action-menu .wfn-picker-row:is([role^="menuitem"])[data-checked] {
  background: var(--wfn-hover);
}
.wfn-picker.ui-action-menu .wfn-picker-row:is([role^="menuitem"])[data-checked]:is(:hover, :focus-visible, [data-highlighted]) {
  background: var(--wfn-ring-strong);
}
.wfn-picker-tile {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  overflow: hidden;
  border-radius: var(--openbot-radius-sm);
  background: var(--wfn-field);
  box-shadow: inset 0 0 0 1px var(--wfn-ring);
  color: var(--openbot-text-secondary);
  transition: color var(--openbot-duration-fast) var(--openbot-ease-out);
}
.wfn-picker-tile[data-kind] {
  --wfn-kind: var(--openbot-text-secondary);
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  background: none;
  box-shadow: none;
  color: var(--wfn-kind);
}
.wfn-picker.ui-action-menu:has(.wfn-picker-tile[data-kind]) {
  max-height: min(560px, var(--kb-popper-content-available-height, 560px));
}
.wfn-picker.ui-action-menu .wfn-picker-row:has(> .wfn-picker-tile[data-kind]) {
  min-height: var(--openbot-control-md);
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-1) var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
}
.wfn-picker-row[data-checked] .wfn-picker-tile {
  box-shadow: inset 0 0 0 1px var(--wfn-ring-strong);
  color: var(--openbot-text-primary);
}
:is(.wfn-picker.ui-action-menu, .wfn-drop-menu) .wfn-picker-tile > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: var(--openbot-icon-stroke);
}
.wfn-picker.ui-action-menu .wfn-picker-tile > svg.wfn-model-logo, .wfn-picker.ui-action-menu .wfn-picker-chip > svg.wfn-model-logo {
  fill: currentcolor;
  stroke: none;
}
.wfn-picker-tile > .wfn-swatch {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.wfn-picker-tile:has(> .agent-avatar), .wfn-picker-row[data-checked] .wfn-picker-tile:has(> .agent-avatar) {
  overflow: visible;
  background: none;
  box-shadow: none;
}
.wfn-picker-tile > .agent-avatar {
  --agent-avatar-optical-offset: calc(var(--openbot-control-sm) * -0.14);
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
}
.wfn-picker-tile > .wfn-font-sample {
  font-size: var(--openbot-text-lg);
}
.wfn-picker-tile > .wfn-font-sample[data-step="1"] {
  font-size: var(--openbot-text-sm);
}
.wfn-picker-tile > .wfn-font-sample[data-step="3"] {
  font-size: var(--openbot-text-2xl);
}
.wfn-picker-tile > .wfn-font-sample[data-step="4"] {
  font-size: var(--openbot-text-3xl);
}
.wfn-picker-aspect {
  width: calc(var(--openbot-icon-md) * var(--wfn-aspect-w));
  height: calc(var(--openbot-icon-md) * var(--wfn-aspect-h));
  border: 1.5px solid currentcolor;
  border-radius: var(--openbot-radius-xs);
}
.wfn-picker-meter {
  display: flex;
  align-items: flex-end;
  gap: var(--openbot-space-0-5);
  height: var(--openbot-icon-md);
}
.wfn-picker-meter > i {
  width: 3px;
  border-radius: var(--openbot-radius-pill);
  background: var(--wfn-ring-strong);
}
.wfn-picker-meter > i[data-on] {
  background: currentcolor;
}
.wfn-picker-meter > i:nth-child(1) {
  height: 20%;
}
.wfn-picker-meter > i:nth-child(2) {
  height: 40%;
}
.wfn-picker-meter > i:nth-child(3) {
  height: 60%;
}
.wfn-picker-meter > i:nth-child(4) {
  height: 80%;
}
.wfn-picker-meter > i:nth-child(5) {
  height: 100%;
}
.wfn-picker-body {
  display: grid;
  flex: 1;
  gap: var(--openbot-space-1);
  min-width: 0;
}
.wfn-picker-name {
  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;
}
.wfn-picker-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-1);
}
.wfn-picker-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  height: 18px;
  padding: 0 var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-xs);
  background: var(--wfn-hover);
  color: var(--openbot-text-secondary);
  font-size: var(--wfn-small);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}
.wfn-picker.ui-action-menu .wfn-picker-chip > svg {
  flex: none;
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.wfn-picker.ui-action-menu .wfn-picker-row > svg.wfn-picker-check {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  margin-inline-start: auto;
  color: var(--openbot-text-primary);
}
.wfn-picker-empty {
  margin: 0;
  padding: var(--openbot-space-4) var(--openbot-space-3);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-align: center;
}
.wfn-model-picker.wfn-picker.ui-action-menu {
  width: min(360px, calc(100vw - var(--openbot-space-4)));
  max-width: none;
}
.wfn-model-layout {
  display: flex;
  min-height: 0;
  max-height: inherit;
}
.wfn-model-rail {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-2);
  border-inline-end: 1px solid var(--wfn-ring-strong);
}
.wfn-model-tab-hint {
  display: flex;
}
.wfn-model-tab {
  display: grid;
  place-items: center;
  width: var(--openbot-control-lg);
  height: var(--openbot-control-lg);
  padding: 0;
  border: 0;
  border-radius: var(--openbot-radius-md);
  outline: 0;
  background: transparent;
  color: var(--openbot-text-primary);
  cursor: pointer;
  transition: background-color var(--openbot-duration-hover) var(--openbot-ease-out);
}
.wfn-model-tab:hover {
  background: var(--wfn-hover);
}
.wfn-model-tab[data-selected] {
  background: var(--wfn-hover);
  box-shadow: inset 0 0 0 1px var(--wfn-ring-strong);
}
.wfn-model-picker .wfn-model-tab:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--openbot-text-muted);
}
.wfn-model-tab > .wfn-model-mark {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  fill: currentcolor;
  opacity: 0.48;
  transition: opacity var(--openbot-duration-hover) var(--openbot-ease-out);
}
.wfn-model-tab:hover > .wfn-model-mark {
  opacity: 0.8;
}
.wfn-model-tab[data-selected] > .wfn-model-mark {
  opacity: 1;
}
.wfn-model-panel {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.wfn-model-heading {
  overflow: hidden;
  padding: var(--openbot-space-3) var(--openbot-space-3) var(--openbot-space-1);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
  line-height: var(--openbot-leading-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wfn-model-list {
  margin: 0;
  list-style: none;
}
.wfn-model-list .wfn-picker-row[role="option"] {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  min-height: calc(var(--openbot-control-md) + var(--openbot-space-2));
  padding-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-1-5) var(--openbot-space-2);
  border-radius: var(--wfn-radius-row);
  outline: 0;
  color: var(--openbot-text-primary);
  cursor: pointer;
  transition: background-color var(--openbot-duration-hover) var(--openbot-ease-out);
}
.wfn-model-list .wfn-picker-row[role="option"]:is(:hover, [data-highlighted], [data-selected]) {
  background: var(--wfn-hover);
}
.wfn-model-list .wfn-picker-row[role="option"][data-selected]:is(:hover, [data-highlighted]) {
  background: var(--wfn-ring-strong);
}
.ui-popover-menu-surface.wfn-popover {
  display: grid;
  gap: var(--openbot-space-3);
  width: 344px;
  padding: var(--openbot-space-3);
  border-radius: var(--wfn-radius-card);
  background: var(--wfn-glass);
  box-shadow: 0 0 0 1px var(--wfn-ring-strong);
  backdrop-filter: var(--wfn-glass-blur);
}
.wfn-popover-head {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
  justify-content: space-between;
  margin-block: calc(var(--openbot-space-1) * -1);
}
.wfn-popover-head .ui-button {
  font-size: var(--openbot-text-sm);
}
.wfn-popover-title {
  margin: 0;
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-semibold);
}
.wfn-library {
  display: grid;
  gap: var(--openbot-space-3);
}
.wfn-popover .wfn-library-tabs {
  padding: 0;
  background: transparent;
}
.wfn-popover .wfn-library-tabs .ui-sliding-tabs-trigger {
  border-radius: var(--openbot-radius-pill);
  font-size: var(--openbot-text-sm);
}
.wfn-popover .wfn-library-tabs .ui-sliding-tabs-pill {
  top: 0;
  border-radius: var(--openbot-radius-pill);
  background: var(--wfn-ring-strong);
}
.wfn-library-search {
  display: flex;
  gap: var(--openbot-space-1-5);
  align-items: center;
  height: var(--openbot-control-md);
  padding: 0 var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
  background: var(--wfn-field);
  transition: box-shadow var(--openbot-duration-hover) var(--openbot-ease-out);
}
.wfn-library-search:focus-within {
  box-shadow: inset 0 0 0 1px var(--wfn-ring-strong);
}
.wfn-library-search > svg {
  flex: none;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
}
.wfn-popover .wfn-library-search .ui-input {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: var(--openbot-text-sm);
}
.wfn-popover .wfn-library-search .ui-input:focus-visible {
  outline: none;
  box-shadow: none;
}
.wfn-scroll {
  position: relative;
}
.wfn-library-scroll {
  max-height: 280px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.wfn-library-scroll::-webkit-scrollbar {
  display: none;
}
.wfn-library-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--openbot-space-2);
}
.wfn-library-empty {
  margin: 0;
  padding: var(--openbot-space-6) var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-align: center;
  text-wrap: pretty;
}
.wfn-scroll-track {
  position: absolute;
  top: 0;
  right: calc(-1 * var(--openbot-space-3));
  bottom: 0;
  width: var(--openbot-space-3);
}
.wfn-scroll-thumb {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--openbot-space-1);
  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) 24%, transparent);
  }
  opacity: 0;
  transition-property: opacity, width, background-color;
  transition-duration: var(--openbot-duration-fast);
  transition-timing-function: var(--openbot-ease-out);
}
.wfn-scroll:is(:hover, :focus-within) .wfn-scroll-thumb, .wfn-scroll-track[data-dragging] .wfn-scroll-thumb {
  opacity: 1;
}
.wfn-scroll-track:hover .wfn-scroll-thumb, .wfn-scroll-track[data-dragging] .wfn-scroll-thumb {
  width: var(--openbot-space-1-5);
  background: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-primary) 40%, transparent);
  }
}
.wfn-popover .wfn-library-tile {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--openbot-space-1);
  height: auto;
  padding: var(--openbot-space-1);
  border-radius: var(--openbot-radius-md);
  text-align: start;
}
.wfn-popover .wfn-library-tile[aria-pressed="true"] {
  box-shadow: inset 0 0 0 1px var(--openbot-text-primary);
}
.wfn-popover .wfn-library-tile:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--openbot-text-primary) 40%, transparent);
  }
}
.wfn-popover .wfn-library-tile[aria-pressed="true"]:focus-visible {
  box-shadow: inset 0 0 0 2px var(--openbot-text-primary);
}
.wfn-library-thumb {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--openbot-radius-sm);
  background: var(--wfn-hover);
}
.wfn-library-name {
  overflow: hidden;
  color: var(--openbot-text-secondary);
  font-size: var(--wfn-small);
  font-weight: var(--openbot-weight-regular);
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .wfn-overlay {
    translate: 0 0;
  }
}
.wfn-stage :is(.wfn-node, .wfn-text) {
  z-index: 1;
}
.wfn-edges {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: visible;
  pointer-events: none;
}
.wfn-edge {
  --wfn-edge: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --wfn-edge: color-mix(in srgb, var(--openbot-text-primary) 32%, transparent);
  }
  color: var(--wfn-edge);
}
.wfn-edge[data-tone="done"] {
  --wfn-edge: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --wfn-edge: color-mix(in srgb, var(--openbot-text-primary) 60%, transparent);
  }
}
.wfn-edge[data-tone="run"] {
  --wfn-edge: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --wfn-edge: color-mix(in srgb, var(--openbot-text-primary) 72%, transparent);
  }
}
.wfn-edge[data-selected] {
  --wfn-edge: var(--openbot-text-primary);
}
.wfn-edge[data-removing] {
  --wfn-edge: var(--openbot-danger);
}
.wfn-edge-line, .wfn-edge-comet, .wfn-edge-draft {
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
}
.wfn-edge-line {
  stroke-width: 1.5;
  stroke-dasharray: 5 5;
  transition: color var(--openbot-duration-hover) var(--openbot-ease-out);
}
.wfn-edge:is([data-tone="done"], [data-selected]) .wfn-edge-line {
  stroke-dasharray: none;
}
.wfn-edge[data-motion] .wfn-edge-line {
  animation: wfn-march 1.2s linear infinite;
}
.wfn-edge:is([data-tone="done"], [data-selected]) .wfn-edge-line {
  animation: none;
}
@keyframes wfn-march {
  to {
    stroke-dashoffset: -10;
  }
}
.wfn-edge-comet {
  stroke: var(--openbot-text-primary);
  stroke-width: 3;
  stroke-dasharray: 0.12 1;
  animation: wfn-comet 1.1s var(--openbot-ease-out) infinite;
}
@keyframes wfn-comet {
  from {
    stroke-dashoffset: 0.12;
  }
  to {
    stroke-dashoffset: -1;
  }
}
.wfn-edge-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 14;
  pointer-events: stroke;
  cursor: pointer;
}
.wfn-edge-draft {
  color: var(--openbot-text-muted);
  stroke-width: 2;
  stroke-dasharray: 5 5;
  transition: color var(--openbot-duration-hover) var(--openbot-ease-out);
}
.wfn-edge-draft[data-state="ok"] {
  color: var(--openbot-text-primary);
  stroke-dasharray: none;
}
.wfn-edge-draft[data-state="refused"] {
  color: var(--openbot-danger);
}
.wfn-edge-draft[data-state="loop"] {
  color: var(--openbot-warning);
  stroke-dasharray: none;
}
.wfn-draft-reason {
  position: absolute;
  z-index: 3;
  padding: 2px var(--openbot-space-2);
  border-radius: var(--openbot-radius-sm);
  background: var(--wfn-card);
  box-shadow: 0 0 0 1px var(--openbot-danger-border);
  color: var(--openbot-danger-text);
  font-size: var(--openbot-text-sm);
  white-space: nowrap;
  pointer-events: none;
  transform-origin: 0 0;
  translate: calc(14px / var(--wfn-scale, 1)) calc(14px / var(--wfn-scale, 1));
  scale: calc(1 / var(--wfn-scale, 1));
}
.wfn-draft-reason[data-tone="loop"] {
  box-shadow: 0 0 0 1px var(--openbot-warning);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--openbot-warning) 45%, transparent);
  }
  color: var(--openbot-warning-text);
}
.wfn-edge-actions {
  position: absolute;
  z-index: 2;
  display: flex;
  transform-origin: 0 0;
  translate: calc(-50% / var(--wfn-scale, 1)) calc(-50% / var(--wfn-scale, 1));
  scale: calc(1 / var(--wfn-scale, 1));
}
.wfn-stage .wfn-edge-actions .wfn-edge-remove {
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-danger);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-danger) 14%, var(--wfn-card));
  }
  box-shadow: 0 0 0 1px var(--openbot-danger-border);
  color: var(--openbot-danger-text);
  opacity: 1;
  scale: 1;
  transition-property: opacity, scale, background-color;
  transition-duration: var(--openbot-duration-fast);
  transition-timing-function: var(--openbot-ease-out);
}
.wfn-stage .wfn-edge-actions .wfn-edge-remove:hover {
  background: var(--openbot-danger);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-danger) 28%, var(--wfn-card));
  }
  color: var(--openbot-danger-text);
}
@starting-style {
  .wfn-stage .wfn-edge-actions .wfn-edge-remove {
    opacity: 0;
    scale: 0.6;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wfn-stage .wfn-edge-actions .wfn-edge-remove {
    transition: none;
  }
}
.wfn-stage .wfn-port[data-connected] {
  opacity: 1;
}
.wfn-stage .wfn-port:is([data-armed], [data-target]) {
  background: var(--openbot-text-primary);
  color: var(--openbot-bg-canvas);
  opacity: 1;
}
.wfn-stage .wfn-port[data-dim] {
  opacity: 0.25;
}
.wfn-stage .wfn-port[data-refused] {
  background: var(--openbot-danger);
  color: var(--openbot-text-primary);
  opacity: 1;
}
.wfn-stage .wfn-node:not(:hover, :focus-within, [data-selected]) .wfn-port:not([data-connected], [data-armed], [data-target], [data-dim], [data-refused], [data-missing]) {
  scale: 0.5;
}
.wfn-node[data-status="running"] .wfn-card {
  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) 16%, transparent);
  }
}
.wfn-node[data-status="running"] .wfn-card-frame::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: -1.5px;
  padding: 1.5px;
  --wfn-radius-ring: calc(var(--wfn-radius-card) + 1.5px);
  border-radius: var(--wfn-radius-ring);
  background: conic-gradient( from var(--wfn-sweep), transparent 0turn 0.45turn, var(--openbot-text-primary) 0.72turn, var(--openbot-text-primary) 0.9turn, var(--openbot-text-primary) 0.985turn, transparent 1turn );
  @supports (color: color-mix(in lab, red, red)) {
    background: conic-gradient( from var(--wfn-sweep), transparent 0turn 0.45turn, color-mix(in srgb, var(--openbot-text-primary) 24%, transparent) 0.72turn, color-mix(in srgb, var(--openbot-text-primary) 72%, transparent) 0.9turn, var(--openbot-text-primary) 0.985turn, transparent 1turn );
  }
  mask: linear-gradient(var(--openbot-text-primary) 0 0) content-box, linear-gradient(var(--openbot-text-primary) 0 0);
  mask-composite: exclude;
  pointer-events: none;
  animation: wfn-sweep 1.6s linear infinite;
}
@property --wfn-sweep {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0turn;
}
@keyframes wfn-sweep {
  to {
    --wfn-sweep: 1turn;
  }
}
.wfn-run-time {
  display: inline-flex;
  gap: var(--openbot-space-1);
  align-items: center;
  margin-inline-start: auto;
  color: var(--openbot-text-secondary);
  font-weight: var(--openbot-weight-medium);
  font-variant-numeric: tabular-nums;
  transition: opacity var(--openbot-duration-hover) var(--openbot-ease-out);
  @starting-style {
    opacity: 0;
  }
}
.wfn-run-time[data-done] {
  color: var(--openbot-success-text);
  animation: wfn-run-time-out 1.8s var(--openbot-ease-out) forwards;
}
.wfn-run-time[data-failed] {
  color: var(--openbot-danger-text);
}
@keyframes wfn-run-time-out {
  0%, 70% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.wfn-result-pending {
  display: grid;
  gap: var(--openbot-space-2);
  padding-block: var(--openbot-space-1);
}
.wfn-result-pending .ui-skeleton {
  min-height: var(--openbot-space-2);
  background: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-primary) 9%, transparent);
  }
}
.wfn-result-pending .ui-skeleton:nth-child(2) {
  width: 88%;
  animation-delay: 120ms;
}
.wfn-result-pending .ui-skeleton:nth-child(3) {
  width: 56%;
  animation-delay: 240ms;
}
.wfn-result-body {
  position: relative;
}
.wfn-result-body[data-running] p {
  visibility: hidden;
}
.wfn-result-body p + .wfn-result-pending {
  position: absolute;
  inset: 0;
  align-content: start;
  overflow: hidden;
}
.wfn-node[data-status="running"] .wfn-card[data-media]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient( 100deg, transparent 30%, var(--openbot-text-primary) 50%, transparent 70% );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient( 100deg, transparent 30%, color-mix(in srgb, var(--openbot-text-primary) 12%, transparent) 50%, transparent 70% );
  }
  background-size: 250% 100%;
  pointer-events: none;
  animation: wfn-sheen 1.4s var(--openbot-ease-in-out) infinite;
}
@keyframes wfn-sheen {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0% 0;
  }
}
.wfn-art-layer {
  --wfn-art-spring: cubic-bezier(0.34, 1.35, 0.64, 1);
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transition-property: rotate, translate, scale, opacity;
  transition-duration: var(--openbot-duration-slow);
  transition-timing-function: var(--wfn-art-spring);
}
.wfn-art-color {
  fill: var(--wfn-art-color);
}
.wfn-art-face-light {
  fill: var(--wfn-art-light);
}
.wfn-art-face-dark {
  fill: var(--wfn-art-dark);
}
.wfn-art-gloss {
  fill: var(--openbot-paper);
  @supports (color: color-mix(in lab, red, red)) {
    fill: color-mix(in srgb, var(--openbot-paper) 55%, transparent);
  }
}
.wfn-art-wood {
  fill: var(--wfn-art-wood-color);
}
.wfn-art-wood-shade {
  fill: var(--wfn-art-wood-color);
  @supports (color: color-mix(in lab, red, red)) {
    fill: color-mix(in srgb, var(--wfn-art-wood-color) 84%, var(--openbot-paper-text));
  }
}
.wfn-art-rubber {
  fill: var(--openbot-file-pink);
}
.wfn-art-rubber-shade {
  fill: var(--openbot-file-pink);
  @supports (color: color-mix(in lab, red, red)) {
    fill: color-mix(in srgb, var(--openbot-file-pink) 80%, var(--openbot-paper-text));
  }
}
.wfn-art-metal {
  fill: var(--wfn-art-metal-color);
}
.wfn-art-metal-groove {
  fill: var(--wfn-art-metal-color);
  @supports (color: color-mix(in lab, red, red)) {
    fill: color-mix(in srgb, var(--wfn-art-metal-color) 70%, var(--openbot-paper-text));
  }
}
.wfn-art-tint-back {
  fill: var(--wfn-art-base);
  @supports (color: color-mix(in lab, red, red)) {
    fill: color-mix(in srgb, var(--wfn-art-base) 36%, var(--wfn-card));
  }
}
.wfn-art-tint-middle {
  fill: var(--wfn-art-base);
  @supports (color: color-mix(in lab, red, red)) {
    fill: color-mix(in srgb, var(--wfn-art-base) 62%, var(--wfn-card));
  }
}
.wfn-art-curl {
  fill: var(--wfn-art-light);
}
.wfn-art-stop-light {
  stop-color: var(--wfn-art-light);
}
.wfn-art-stop-color {
  stop-color: var(--wfn-art-base);
}
.wfn-art-stop-edge {
  stop-color: var(--openbot-paper);
  @supports (color: color-mix(in lab, red, red)) {
    stop-color: color-mix(in srgb, var(--openbot-paper) 70%, transparent);
  }
}
.wfn-art-stop-clear {
  stop-color: transparent;
}
.wfn-art-cut {
  stroke: var(--openbot-bg-surface-raised);
  @supports (color: color-mix(in lab, red, red)) {
    stroke: color-mix(in srgb, var(--openbot-bg-surface-raised) 75%, var(--wfn-card));
  }
  stroke-width: 2;
  stroke-linejoin: round;
  paint-order: stroke;
}
.wfn-art-edge {
  fill: none;
  stroke-width: 0.8;
  stroke-linejoin: round;
}
.wfn-tool-art [data-layer="eraser"], .wfn-tool-art[data-eraser] [data-layer="pen"] {
  opacity: 0;
  scale: 0.25;
}
.wfn-tool-art[data-eraser] [data-layer="eraser"] {
  opacity: 1;
  scale: 1;
}
.wfn-tool-art [data-layer="back"] {
  rotate: -10deg;
}
.wfn-tool-art [data-layer="middle"] {
  rotate: 6deg;
}
.wfn-menu :is([role="menuitem"], [role="menuitemcheckbox"]) .wfn-keys {
  margin-inline-start: auto;
  padding-inline-start: var(--openbot-space-4);
}
.wfn-keys {
  display: inline-flex;
  gap: 2px;
  align-items: center;
}
.wfn-keys .ui-kbd {
  min-width: 18px;
  height: 18px;
  border: 0;
  background: var(--wfn-hover);
  color: var(--openbot-text-muted);
  font-family: inherit;
  font-size: var(--wfn-small);
}
.wfn-hint {
  display: inline-flex;
  gap: var(--openbot-space-2);
  align-items: center;
}
.ui-tooltip.wfn-tooltip {
  border-radius: var(--openbot-radius-md);
  box-shadow: 0 0 0 1px var(--openbot-border-strong);
  font-weight: var(--openbot-weight-medium);
}
.ui-tooltip.wfn-tooltip:has(.wfn-keys) {
  padding-inline-end: var(--openbot-space-1-5);
}
.wfn-strip {
  position: absolute;
  top: calc(100% + 8px / var(--wfn-scale, 1));
  left: round(50%, 1px);
  transform-origin: top center;
  scale: calc(1 / var(--wfn-scale, 1));
  z-index: 2;
  display: flex;
  gap: var(--openbot-space-1);
  align-items: center;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--openbot-text-secondary);
  translate: calc(round(-50%, 1px) + var(--wfn-snap-x, 0px) / var(--wfn-scale, 1)) calc(var(--wfn-snap-y, 0px) / var(--wfn-scale, 1));
}
.wfn-strip-list {
  display: flex;
  gap: var(--openbot-space-1-5);
  align-items: center;
  max-width: calc(7 * 36px + 6 * var(--openbot-space-1-5) + 16px);
  height: 52px;
  overflow-x: auto;
  padding: 0 var(--openbot-space-1);
  scrollbar-width: none;
}
.wfn-strip-item {
  --wfn-strip-size: 36px;
  display: grid;
  flex: none;
  place-items: center;
  width: var(--wfn-strip-size);
  height: var(--wfn-strip-size);
  overflow: hidden;
  padding: 2px;
  border: 2px solid var(--wfn-kind);
  @supports (color: color-mix(in lab, red, red)) {
    border: 2px solid color-mix(in srgb, var(--wfn-kind) 40%, transparent);
  }
  border-radius: var(--openbot-radius-pill);
  background: var(--wfn-glass);
  color: var(--openbot-text-secondary);
  font-size: var(--wfn-small);
  font-variant-numeric: tabular-nums;
  font-weight: var(--openbot-weight-semibold);
  cursor: pointer;
  backdrop-filter: var(--wfn-glass-blur);
  transition-property: width, height, border-color, color, scale;
  transition-duration: var(--openbot-duration-fast);
  transition-timing-function: var(--openbot-ease-out);
}
.wfn-strip-item:hover {
  border-color: var(--wfn-kind);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--wfn-kind) 72%, transparent);
  }
  color: var(--openbot-text-primary);
}
.wfn-strip-item[aria-pressed="true"] {
  --wfn-strip-size: 44px;
  border-color: var(--wfn-kind);
  color: var(--openbot-text-primary);
}
.wfn-strip-item:active {
  scale: 0.96;
}
.wfn-strip-item:focus-visible {
  outline: 2px solid var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    outline: 2px solid color-mix(in srgb, var(--openbot-text-primary) 40%, transparent);
  }
  outline-offset: 1px;
}
.wfn-strip-item img {
  width: 100%;
  height: 100%;
  border-radius: var(--openbot-radius-pill);
  object-fit: cover;
}
.wfn-strip-item[data-failed] {
  color: var(--openbot-danger-text);
}
.wfn-strip-failed {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
:is(.wfn-menu-icon, .wfn-picker-tile, .wfn-node, .wfn-minimap-node)[data-kind="text"] {
  --wfn-kind: var(--openbot-file-teal);
}
:is(.wfn-menu-icon, .wfn-picker-tile, .wfn-node, .wfn-minimap-node)[data-kind="prompt"] {
  --wfn-kind: var(--openbot-file-blue);
}
:is(.wfn-menu-icon, .wfn-picker-tile, .wfn-node, .wfn-minimap-node)[data-kind="asset"] {
  --wfn-kind: var(--openbot-file-orange);
}
:is(.wfn-menu-icon, .wfn-picker-tile, .wfn-node, .wfn-minimap-node)[data-kind="llm"] {
  --wfn-kind: var(--openbot-chart-storage-downloads);
}
:is(.wfn-menu-icon, .wfn-picker-tile, .wfn-node, .wfn-minimap-node)[data-kind="agent"] {
  --wfn-kind: var(--openbot-file-green);
}
:is(.wfn-menu-icon, .wfn-picker-tile, .wfn-node, .wfn-minimap-node)[data-kind="image"] {
  --wfn-kind: var(--openbot-file-pink);
}
@media (prefers-reduced-motion: reduce) {
  .wfn-node[data-status="running"] .wfn-card-frame::before {
    background: var(--openbot-text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--openbot-text-primary) 56%, transparent);
    }
    animation: none;
  }
  .wfn-node[data-status="running"] .wfn-card[data-media]::after {
    background-position: 50% 0;
    animation: none;
  }
  .wfn-run-time[data-done] {
    animation: none;
  }
}
.wfn-card-frame {
  position: relative;
  display: grid;
}
.wfn-node {
  --wfn-select-line: calc(1.5px / var(--wfn-scale, 1));
  --wfn-select-gap: calc(3px / var(--wfn-scale, 1));
}
.wfn-node .wfn-card {
  outline: var(--wfn-select-line) solid transparent;
  outline-offset: var(--wfn-select-gap);
  transition-property: box-shadow, outline-color, min-height, height;
  transition-duration: var(--openbot-duration-hover), var(--openbot-duration-hover), var(--openbot-duration-slow), var(--openbot-duration-slow);
  transition-timing-function: var(--openbot-ease-out);
}
.wfn-node:not([data-selected]) .wfn-card-frame:hover .wfn-card {
  box-shadow: 0 0 0 1px var(--wfn-ring-strong);
}
.wfn-node[data-selected] .wfn-card {
  outline-color: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    outline-color: color-mix(in srgb, var(--openbot-text-primary) 40%, transparent);
  }
}
.wfn-text {
  --wfn-select-line: calc(1px / var(--wfn-scale, 1));
  --wfn-select-gap: calc(4px / var(--wfn-scale, 1));
}
.wfn-text[data-selected] .wfn-text-input {
  outline: var(--wfn-select-line) solid var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    outline: var(--wfn-select-line) solid color-mix(in srgb, var(--openbot-text-primary) 32%, transparent);
  }
  outline-offset: var(--wfn-select-gap);
}
.wfn-grip {
  --wfn-grip-size: calc(18px / var(--wfn-scale, 1));
  --wfn-grip-line: calc(3px / var(--wfn-scale, 1));
  --wfn-grip-out: calc(var(--wfn-select-gap) + var(--wfn-select-line) / 2 + var(--wfn-grip-line) / 2);
  --wfn-grip-radius: calc(var(--wfn-radius-card) + var(--wfn-grip-out));
  --wfn-grip-arc: var(--wfn-grip-line) solid var(--wfn-grip-color, transparent);
  --wfn-grip-band: calc(12px / var(--wfn-scale, 1));
  --wfn-grip-band-out: calc(var(--wfn-grip-out) * -1 - var(--wfn-grip-band) / 2);
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
  width: var(--wfn-grip-size);
  height: var(--wfn-grip-size);
  transition: border-color var(--openbot-duration-fast) var(--openbot-ease-out);
}
.wfn-grip::after {
  position: absolute;
  inset: calc(-6px / var(--wfn-scale, 1));
  content: "";
}
.wfn-grip[data-corner="nw"] {
  top: calc(var(--wfn-grip-out) * -1);
  left: calc(var(--wfn-grip-out) * -1);
}
.wfn-grip[data-corner="ne"] {
  top: calc(var(--wfn-grip-out) * -1);
  right: calc(var(--wfn-grip-out) * -1);
}
.wfn-grip[data-corner="se"] {
  right: calc(var(--wfn-grip-out) * -1);
  bottom: calc(var(--wfn-grip-out) * -1);
  border-right: var(--wfn-grip-arc);
  border-bottom: var(--wfn-grip-arc);
  border-bottom-right-radius: var(--wfn-grip-radius);
}
.wfn-grip[data-corner="sw"] {
  bottom: calc(var(--wfn-grip-out) * -1);
  left: calc(var(--wfn-grip-out) * -1);
}
.wfn-grip[data-side] {
  z-index: 1;
  width: auto;
  height: auto;
}
.wfn-grip[data-side]::after {
  display: none;
}
.wfn-grip:is([data-corner="n"], [data-corner="s"]) {
  right: var(--wfn-grip-size);
  left: var(--wfn-grip-size);
  height: var(--wfn-grip-band);
}
.wfn-grip:is([data-corner="e"], [data-corner="w"]) {
  top: var(--wfn-grip-size);
  bottom: var(--wfn-grip-size);
  width: var(--wfn-grip-band);
}
.wfn-grip[data-corner="n"] {
  top: var(--wfn-grip-band-out);
}
.wfn-grip[data-corner="s"] {
  bottom: var(--wfn-grip-band-out);
}
.wfn-grip[data-corner="e"] {
  right: var(--wfn-grip-band-out);
}
.wfn-grip[data-corner="w"] {
  left: var(--wfn-grip-band-out);
}
.wfn-ports {
  z-index: 1;
}
.wfn-text .wfn-grip {
  --wfn-grip-size: calc(12px / var(--wfn-scale, 1));
  --wfn-grip-line: calc(2px / var(--wfn-scale, 1));
  --wfn-grip-radius: calc(var(--openbot-radius-sm) + var(--wfn-grip-out));
}
.wfn-node:is(:hover, [data-selected]) .wfn-grip {
  --wfn-grip-color: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --wfn-grip-color: color-mix(in srgb, var(--openbot-text-primary) 32%, transparent);
  }
}
.wfn-node[data-selected] .wfn-grip, .wfn-node[data-resizing] .wfn-grip, .wfn-grip:hover {
  --wfn-grip-color: var(--openbot-text-primary);
}
.wfn-node[data-doomed] .wfn-card {
  outline-color: var(--openbot-danger);
}
.wfn-text[data-doomed] .wfn-text-input {
  outline: var(--wfn-select-line) solid var(--openbot-danger);
  outline-offset: var(--wfn-select-gap);
}
.wfn-node[data-doomed] .wfn-grip {
  --wfn-grip-color: var(--openbot-danger);
}
.wfn-grip[data-cursor="ew"] {
  cursor: ew-resize;
}
.wfn-grip[data-cursor="ns"] {
  cursor: ns-resize;
}
.wfn-grip[data-cursor="nwse"] {
  cursor: nwse-resize;
}
.wfn-grip[data-cursor="nesw"] {
  cursor: nesw-resize;
}
.wfn-node[data-height] .wfn-card:has(> .wfn-field-task) {
  grid-template-rows: 1fr;
}
.wfn-node[data-locked] :is(.wfn-label, .wfn-card) {
  cursor: default;
}
.wfn-lock-badge {
  display: inline-flex;
  color: var(--openbot-text-muted);
}
.wfn-lock-badge svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.wfn-text[data-sized] .wfn-text-input {
  width: 100%;
}
.wfn-node:focus-visible {
  outline: none;
}
.wfn-node:not(.wfn-text):focus-visible:not([data-selected]) .wfn-card {
  outline-color: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    outline-color: color-mix(in srgb, var(--openbot-text-primary) 40%, transparent);
  }
}
.wfn-hud-spin {
  animation: wfn-spin 1s linear infinite;
}
@keyframes wfn-spin {
  to {
    rotate: 360deg;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wfn-hud-spin {
    animation: none;
  }
  .wfn-art-layer {
    transition: none;
  }
  .wfn-node, .wfn-node .wfn-card, .wfn-stage .wfn-port, .wfn-grip {
    transition: none;
  }
}
@property --wfn-fade-start {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --wfn-fade-end {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@supports (animation-timeline: scroll()) {
  .wfn-node :is(textarea, .wfn-field-result p), .wfn-strip-list {
    --wfn-fade-size: var(--openbot-space-4);
    --wfn-fade-side: to bottom;
    mask-image: linear-gradient( var(--wfn-fade-side), transparent, var(--openbot-text-primary) var(--wfn-fade-start), var(--openbot-text-primary) calc(100% - var(--wfn-fade-end)), transparent );
    animation: wfn-fade-start linear both, wfn-fade-end linear both;
    animation-timeline: scroll(self block), scroll(self block);
    animation-range: 0 var(--wfn-fade-size), calc(100% - var(--wfn-fade-size)) 100%;
  }
  .wfn-strip-list {
    --wfn-fade-size: var(--openbot-space-6);
    --wfn-fade-side: to right;
    animation-timeline: scroll(self inline), scroll(self inline);
  }
}
@keyframes wfn-fade-start {
  from {
    --wfn-fade-start: 0px;
  }
  to {
    --wfn-fade-start: var(--wfn-fade-size);
  }
}
@keyframes wfn-fade-end {
  from {
    --wfn-fade-end: var(--wfn-fade-size);
  }
  to {
    --wfn-fade-end: 0px;
  }
}
.wfn-node[data-kind="trigger"], .wfn-node[data-kind="output"] {
  --wfn-width: 280px;
}
.wfn-node[data-kind="condition"], .wfn-node[data-kind="approval"] {
  --wfn-width: 300px;
}
.wfn-node[data-kind="note"] {
  --wfn-width: 240px;
  --wfn-height: 240px;
}
.wfn-node[data-kind="shape"] {
  --wfn-width: 208px;
  --wfn-height: 128px;
  --wfn-radius-card: var(--openbot-radius-md);
}
:is(.wfn-menu-icon, .wfn-picker-tile, .wfn-node, .wfn-minimap-node)[data-kind="trigger"] {
  --wfn-kind: var(--openbot-file-yellow);
}
:is(.wfn-menu-icon, .wfn-picker-tile, .wfn-node, .wfn-minimap-node)[data-kind="condition"] {
  --wfn-kind: var(--openbot-chart-series-codex);
}
:is(.wfn-menu-icon, .wfn-picker-tile, .wfn-node, .wfn-minimap-node)[data-kind="output"] {
  --wfn-kind: var(--openbot-chart-storage-workspaces);
}
:is(.wfn-menu-icon, .wfn-picker-tile, .wfn-node, .wfn-minimap-node)[data-kind="approval"] {
  --wfn-kind: var(--openbot-chart-storage-files);
}
:is(.wfn-menu-icon, .wfn-picker-tile, .wfn-node, .wfn-minimap-node)[data-kind="note"] {
  --wfn-kind: var(--openbot-file-yellow);
}
:is(.wfn-menu-icon, .wfn-picker-tile, .wfn-node, .wfn-minimap-node)[data-kind="shape"] {
  --wfn-kind: var(--openbot-text-secondary);
}
.wfn-stage .wfn-block-field > .wfn-pill {
  justify-self: start;
}
.wfn-block-field > .wfn-field-foot {
  justify-content: flex-start;
}
.wfn-block-field > .wfn-condition-foot {
  justify-content: space-between;
}
.wfn-block-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--openbot-space-2);
}
.wfn-github-mark {
  flex: none;
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  fill: currentcolor;
}
.wfn-settings {
  --wfn-settings-gap: 2px;
  display: grid;
  gap: var(--wfn-settings-gap);
  padding: var(--openbot-space-1);
  border-radius: var(--openbot-radius-md);
  background: var(--wfn-field);
}
.wfn-settings-head:not(:last-child) {
  padding-bottom: var(--openbot-space-1);
  border-bottom: 1px solid var(--wfn-ring);
  margin-bottom: calc(var(--openbot-space-1) - var(--wfn-settings-gap));
}
.wfn-settings-foot {
  padding-top: var(--openbot-space-1);
  border-top: 1px solid var(--wfn-ring);
  margin-top: calc(var(--openbot-space-1) - var(--wfn-settings-gap));
}
.wfn-settings > .ui-button {
  justify-self: start;
  margin: var(--openbot-space-1);
}
.wfn-settings > .wfn-alert {
  margin: var(--openbot-space-1);
}
.wfn-settings-block {
  padding: var(--openbot-space-1) var(--openbot-space-2);
}
.wfn-row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  gap: var(--openbot-space-2);
  align-items: center;
  width: 100%;
  min-height: 36px;
  padding: var(--openbot-space-1) var(--openbot-space-2);
  border: 0;
  border-radius: var(--wfn-radius-row);
  background: transparent;
  color: var(--openbot-text-primary);
  font: inherit;
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--openbot-duration-hover) var(--openbot-ease-out);
}
.wfn-row:not([data-static]):is(:hover, [aria-expanded="true"]) {
  background: var(--wfn-hover);
}
.wfn-row:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--wfn-ring-strong);
}
.wfn-row[data-static] {
  cursor: default;
}
.wfn-row:disabled {
  cursor: default;
  opacity: 0.6;
}
.wfn-row-name {
  color: var(--openbot-text-muted);
}
.wfn-row-value {
  display: flex;
  gap: var(--openbot-space-1-5);
  align-items: center;
  min-width: 0;
  font-weight: var(--openbot-weight-medium);
}
.wfn-row-value:has(> .wfn-tag) {
  flex-wrap: wrap;
}
.wfn-row-value[data-empty] {
  color: var(--openbot-text-secondary);
  font-weight: var(--openbot-weight-regular);
}
.wfn-row-value > svg {
  flex: none;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-secondary);
}
.wfn-row-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wfn-row-arrow {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  color: var(--openbot-text-muted);
  transition: opacity var(--openbot-duration-hover) var(--openbot-ease-out);
}
:is(.wfn-settings, .wfn-settings-foot) > .wfn-row:not(:hover, :focus-visible, [aria-expanded="true"]) .wfn-row-arrow {
  opacity: 0;
}
.wfn-settings-head .wfn-row {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 40px;
}
.wfn-settings-head .wfn-row-value {
  font-weight: var(--openbot-weight-semibold);
}
.wfn-settings-head .wfn-row-name {
  display: none;
}
.wfn-settings-head .wfn-row-value > svg {
  box-sizing: content-box;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  padding: var(--openbot-space-1);
  border-radius: var(--openbot-radius-sm);
  background: var(--wfn-kind);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--wfn-kind) 16%, transparent);
  }
  box-shadow: inset 0 0 0 1px var(--wfn-kind);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wfn-kind) 14%, transparent);
  }
  color: var(--wfn-kind);
}
.wfn-row[data-input] {
  cursor: text;
}
.wfn-row[data-input]:focus-within {
  box-shadow: inset 0 0 0 1px var(--wfn-ring-strong);
}
.wfn-stage .wfn-row-input {
  grid-column: 2 / -1;
  min-width: 0;
  height: auto;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.wfn-stage .wfn-row-input:focus, .wfn-stage .wfn-row-input:focus-visible {
  outline: none;
  box-shadow: none;
}
.wfn-row-code {
  display: block;
  overflow: hidden;
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wfn-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  min-width: 0;
  max-width: 100%;
  height: 22px;
  padding: 0 var(--openbot-space-2);
  border-radius: var(--openbot-radius-pill);
  background: var(--wfn-hover);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  white-space: nowrap;
}
.wfn-tag-text {
  overflow: hidden;
  text-overflow: ellipsis;
}
.wfn-tag > svg {
  flex: none;
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.wfn-tag[data-warning] {
  color: var(--openbot-warning-text);
}
.wfn-tag[data-tone] {
  background: var(--wfn-tone);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--wfn-tone) 16%, transparent);
  }
  box-shadow: inset 0 0 0 1px var(--wfn-tone);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wfn-tone) 24%, transparent);
  }
  color: var(--wfn-tone);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--wfn-tone) 80%, var(--openbot-text-primary));
  }
}
.wfn-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--openbot-radius-pill);
  background: var(--wfn-tone);
}
.wfn-row-value[data-one-line] {
  flex-wrap: nowrap;
}
.wfn-row-value[data-one-line] > .wfn-row-text {
  flex: 1 1 auto;
}
.wfn-row-value[data-one-line] > .wfn-tag {
  flex: none;
}
.wfn-branch {
  position: relative;
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
  min-height: var(--openbot-control-sm);
  padding: 0 var(--openbot-space-3);
  border-radius: var(--openbot-radius-md);
  background: var(--wfn-field);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  transition: opacity var(--openbot-duration-hover) var(--openbot-ease-out);
}
.wfn-branch[data-skipped] {
  opacity: 0.5;
}
.wfn-branch-check {
  display: inline-grid;
  margin-left: auto;
  color: var(--openbot-success);
}
.wfn-branch-check svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.wfn-branch-port {
  position: absolute;
  top: 50%;
  left: calc(100% + var(--openbot-space-2) + 6px);
  translate: 0 -50%;
}
.wfn-edge-label {
  position: absolute;
  z-index: 1;
  padding: 0 var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-pill);
  background: var(--wfn-card);
  box-shadow: 0 0 0 1px var(--wfn-ring-strong);
  color: var(--openbot-text-secondary);
  font-size: var(--wfn-small);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
  text-transform: capitalize;
  pointer-events: none;
  translate: -50% -50%;
}
.wfn-edge-loop {
  position: absolute;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  padding: 0 var(--openbot-space-2) 0 var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-pill);
  background: var(--wfn-card);
  box-shadow: 0 0 0 1px var(--wfn-ring-strong);
  color: var(--openbot-text-secondary);
  font-size: var(--wfn-small);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
  white-space: nowrap;
  pointer-events: none;
  translate: -50% -50%;
}
.wfn-edge-loop svg {
  width: 0.875em;
  height: 0.875em;
}
.wfn-edge-loop[data-endless] {
  background: linear-gradient(var(--openbot-warning-soft) 0 0), var(--wfn-card);
  box-shadow: 0 0 0 1px var(--openbot-warning);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--openbot-warning) 45%, transparent);
  }
  color: var(--openbot-warning-text);
}
:is(.wfn-node, .wfn-ghost)[data-kind="note"] {
  --wfn-note-paper: oklch(from var(--wfn-note) 0.88 calc(c * 0.5) h);
  --wfn-note-edge: oklch(from var(--wfn-note) 0.76 calc(c * 0.6) h);
}
.wfn-node[data-kind="note"] .wfn-card {
  grid-template-rows: minmax(0, 1fr) auto;
  align-content: stretch;
  height: var(--wfn-height);
  padding: var(--openbot-space-4) var(--openbot-space-4) var(--openbot-space-3);
  background: var(--wfn-note-paper);
  box-shadow: 0 0 0 1px var(--wfn-note-edge);
}
.wfn-stage .wfn-note-input {
  height: 100%;
  overflow-y: auto;
  color: var(--wfn-note-ink);
  font-size: var(--openbot-text-2xl);
  font-weight: var(--openbot-weight-medium);
  line-height: 1.35;
  text-wrap: pretty;
  field-sizing: fixed;
  scrollbar-width: none;
}
.wfn-stage .wfn-note-input::placeholder {
  color: var(--openbot-paper-text-dim);
}
.wfn-stage .wfn-note-input[data-font="mono"] {
  font-family: var(--openbot-font-mono);
}
.wfn-stage .wfn-note-input[data-text-size="lg"] {
  font-size: var(--openbot-text-lg);
}
.wfn-stage .wfn-note-input[data-text-size="3xl"] {
  font-size: var(--openbot-text-3xl);
  letter-spacing: var(--openbot-tracking-tight);
}
.wfn-stage .wfn-note-input[data-text-size="display"] {
  font-size: var(--openbot-text-display);
  line-height: 1.2;
  letter-spacing: var(--openbot-tracking-tight);
}
.wfn-stage .wfn-note-input[data-bold] {
  font-weight: var(--openbot-weight-bold);
}
.wfn-note-author {
  overflow: hidden;
  color: var(--openbot-paper-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
  white-space: nowrap;
  text-overflow: ellipsis;
  user-select: none;
}
.wfn-font-sample {
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
  line-height: 1;
}
.wfn-font-sample[data-font="mono"] {
  font-family: var(--openbot-font-mono);
}
.wfn-swatch {
  flex: none;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  border-radius: var(--openbot-radius-pill);
  background: var(--wfn-swatch);
  box-shadow: inset 0 0 0 1px var(--wfn-ring-strong);
}
.wfn-alert {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: var(--openbot-space-1-5) var(--openbot-space-2) var(--openbot-space-1-5) var(--openbot-space-3);
  border-radius: var(--openbot-radius-md);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  transition: opacity var(--openbot-duration-hover) var(--openbot-ease-out);
}
.wfn-alert > svg {
  flex: none;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.wfn-alert-text {
  display: -webkit-box;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.wfn-alert[data-tone="danger"] {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger-text);
}
.wfn-alert[data-tone="warning"] {
  background: var(--openbot-warning-soft);
  color: var(--openbot-warning-text);
}
.wfn-alert[data-tone="success"] {
  background: var(--openbot-success-soft);
  color: var(--openbot-success-text);
}
.wfn-alert[data-stale] {
  opacity: 0.5;
}
.wfn-alert[data-pending] {
  background: var(--wfn-field);
}
.wfn-alert[data-pending] .ui-skeleton {
  width: 64%;
  min-height: var(--openbot-space-2);
  margin-block: var(--openbot-space-1);
  background: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-primary) 9%, transparent);
  }
}
.wfn-stage .wfn-alert .ui-button {
  flex: none;
  color: inherit;
}
.wfn-node[data-status="approval"] .wfn-card {
  box-shadow: 0 0 0 1px var(--openbot-warning);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--openbot-warning) 64%, transparent);
  }
}
.wfn-stage .wfn-port[data-missing]:not([data-target], [data-armed]) {
  opacity: 1;
}
.wfn-stage .wfn-pill[data-missing] {
  color: var(--openbot-warning-text);
}
.wfn-stage .wfn-pill[data-missing] > svg:first-child {
  color: inherit;
}
.wfn-pill-action {
  color: var(--openbot-text-muted);
}
.wfn-stage :is(.wfn-field-task, .wfn-field-fill, .wfn-field-system, .wfn-block-field) .wfn-input {
  max-height: 200px;
  overflow-y: auto;
}
.wfn-stage .wfn-node[data-height] :is(.wfn-field-task, .wfn-field-fill) .wfn-input {
  max-height: none;
}
.wfn-stage .wfn-pill > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wfn-stage .wfn-pill > :is(svg, .wfn-avatar) {
  flex: none;
}
.wfn-label[data-bare] {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: var(--openbot-space-1-5);
}
.wfn-stage .wfn-node[data-kind="shape"] .wfn-card {
  grid-template-rows: none;
  align-content: center;
  place-items: center;
  height: var(--wfn-height);
  padding: var(--openbot-space-3);
  background: transparent;
  box-shadow: none;
}
.wfn-stage .wfn-node[data-kind="shape"]:not([data-selected]) .wfn-card-frame:hover .wfn-card {
  box-shadow: none;
}
.wfn-shape-surface {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
span.wfn-shape-surface {
  border-radius: var(--wfn-radius-card);
  background: var(--wfn-shape);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--wfn-shape) 16%, transparent);
  }
  box-shadow: inset 0 0 0 2px var(--wfn-shape);
}
span.wfn-shape-surface:is([data-shape="circle"], [data-shape="oval"]) {
  border-radius: var(--openbot-radius-pill);
}
svg.wfn-shape-surface {
  fill: var(--wfn-shape);
  @supports (color: color-mix(in lab, red, red)) {
    fill: color-mix(in srgb, var(--wfn-shape) 16%, transparent);
  }
  stroke: var(--wfn-shape);
  stroke-width: 2;
  stroke-linejoin: round;
}
:root[data-openbot-color-scheme="light"] span.wfn-shape-surface[data-color="ink"] {
  background: var(--wfn-shape);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--wfn-shape) 5%, transparent);
  }
  box-shadow: inset 0 0 0 1.5px var(--wfn-shape);
}
:root[data-openbot-color-scheme="light"] svg.wfn-shape-surface[data-color="ink"] {
  fill: var(--wfn-shape);
  @supports (color: color-mix(in lab, red, red)) {
    fill: color-mix(in srgb, var(--wfn-shape) 5%, transparent);
  }
  stroke-width: 1.5;
}
.wfn-stage .wfn-shape-input {
  position: relative;
  width: 100%;
  max-height: 100%;
  overflow: hidden;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
  text-align: center;
  field-sizing: content;
}
.wfn-shape-icon {
  flex: none;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.wfn-stage .wfn-toolbar-select :is(.wfn-shape-icon, .wfn-swatch) {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-primary);
}
@media (prefers-reduced-motion: reduce) {
  .wfn-branch {
    transition: none;
  }
}
.wfn-emoji {
  display: inline-flex;
  flex: none;
  justify-content: center;
  width: var(--openbot-icon-xs);
}
.wfn-peer-cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  display: flex;
  width: max-content;
  align-items: flex-start;
  pointer-events: none;
  transform-origin: 0 0;
  scale: calc(1 / var(--wfn-scale, 1));
  transition: translate var(--wfn-peer-feed) var(--wfn-peer-ease, linear), opacity var(--openbot-duration-normal) var(--openbot-ease-out);
  animation: wfn-fade-in var(--openbot-duration-normal) var(--openbot-ease-out);
}
.wfn-peer-cursor[data-leaving] {
  opacity: 0;
}
.wfn-slot[data-build="unbuilt"], .wfn-edge[data-build="unbuilt"], .wfn-edge-label[data-build="unbuilt"] {
  visibility: hidden;
}
.wfn-slot[data-build="arrived"] {
  animation: wfn-build-arrive var(--openbot-duration-slow) var(--openbot-ease-out);
}
.wfn-edge[data-build="arrived"], .wfn-edge-label[data-build="arrived"] {
  animation: wfn-fade-in var(--openbot-duration-slow) var(--openbot-ease-out);
}
@keyframes wfn-build-arrive {
  from {
    opacity: 0;
    scale: 0.94;
  }
}
.wfn-peer-arrow {
  flex: none;
  width: 19px;
  height: 20px;
  fill: var(--wfn-peer);
  stroke: var(--openbot-paper);
  stroke-width: 3;
  stroke-linejoin: round;
  paint-order: stroke;
}
.wfn-peer-name, .wfn-peer-tag {
  padding: 1px var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-xs);
  background: var(--wfn-peer);
  color: var(--openbot-paper-text);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: 18px;
  white-space: nowrap;
}
.wfn-peer-name {
  margin: 17px 0 0 -11px;
  padding: 2px var(--openbot-space-2);
  border-radius: var(--openbot-radius-sm);
  outline: 1.5px solid var(--openbot-paper);
  font-weight: var(--openbot-weight-bold);
}
.wfn-slot[data-peer] .wfn-node:not([data-selected]) .wfn-card {
  outline-color: var(--wfn-peer);
}
.wfn-slot[data-peer] .wfn-text:not([data-selected]) .wfn-text-input {
  outline: var(--wfn-select-line) solid var(--wfn-peer);
  outline-offset: var(--wfn-select-gap);
}
.wfn-peer-tag {
  position: absolute;
  top: calc(100% + var(--openbot-space-2) / var(--wfn-scale, 1));
  left: 0;
  z-index: 2;
  pointer-events: none;
  transform-origin: 0 0;
  scale: calc(1 / var(--wfn-scale, 1));
  animation: wfn-fade-in var(--openbot-duration-normal) var(--openbot-ease-out);
}
.wfn-slot:has(> [data-selected]) .wfn-peer-tag {
  display: none;
}
.wfn-stage .wfn-hud-button.wfn-presence-person, .wfn-presence-self {
  display: grid;
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  padding: 0;
  place-items: center;
  border-radius: var(--openbot-radius-pill);
}
.wfn-presence-person .person-avatar {
  width: var(--openbot-control-sm);
  height: var(--openbot-control-sm);
  overflow: hidden;
  border-radius: var(--openbot-radius-pill);
  background: var(--wfn-peer, var(--openbot-text-primary));
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--wfn-peer, var(--openbot-text-primary)) 16%, transparent);
  }
}
.wfn-stage .wfn-hud-presence .wfn-presence-person .person-avatar-generated > svg {
  width: 100%;
  height: 100%;
}
.wfn-presence-person .person-avatar > i {
  display: none;
}
.wfn-presence-person[aria-pressed="true"] .person-avatar {
  outline: 2px solid var(--wfn-peer);
  outline-offset: 0;
}
.wfn-follow-frame {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  border: 2px solid var(--wfn-peer);
  pointer-events: none;
  animation: wfn-fade-in var(--openbot-duration-normal) var(--openbot-ease-out);
}
.wfn-follow-name {
  height: fit-content;
  padding: 1px var(--openbot-space-2) var(--openbot-space-0-5);
  border-radius: 0 0 var(--openbot-radius-sm) var(--openbot-radius-sm);
  background: var(--wfn-peer);
  color: var(--openbot-paper-text);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  line-height: 18px;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .wfn-peer-cursor {
    transition: none;
  }
  .wfn-peer-cursor, .wfn-peer-tag, .wfn-follow-frame, .wfn-slot[data-build], .wfn-edge[data-build], .wfn-edge-label[data-build] {
    animation: none;
  }
}
:where(.wfn-stage) {
  --wfn-tool-radius: calc(var(--openbot-radius-grouped) - var(--openbot-space-1-5));
  --wfn-card-inner-radius: calc(var(--openbot-radius-card) - 1px);
}
.wfn-stage {
  display: flex;
  flex-wrap: wrap;
  gap: 120px;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 120px var(--openbot-space-8);
  background-color: var(--openbot-bg-frame);
  background-image: radial-gradient( var(--openbot-text-primary) 1px, transparent 1px );
  @supports (color: color-mix(in lab, red, red)) {
    background-image: radial-gradient( color-mix(in srgb, var(--openbot-text-primary) 9%, transparent) 1px, transparent 1px );
  }
  background-size: 20px 20px;
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
}
.wfn-menu-text {
  font-size: var(--openbot-text-sm);
}
.wfn-menu-meta {
  color: var(--openbot-text-muted);
  font-size: var(--wfn-small);
}
.wfn-menu-check {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  margin-inline-start: auto;
  color: var(--openbot-text-primary);
}
.wfn-stage {
  position: relative;
}
.wfn-stage.wfn-canvas {
  display: block;
  height: 100vh;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background-image: none;
}
.wfn-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: default;
  touch-action: none;
}
.wfn-viewport::after {
  --wfn-edge-fade: var(--openbot-space-8);
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background: linear-gradient(to right, var(--openbot-bg-frame), transparent) left / var(--wfn-edge-fade) 100% no-repeat, linear-gradient(to left, var(--openbot-bg-frame), transparent) right / var(--wfn-edge-fade) 100% no-repeat, linear-gradient(to bottom, var(--openbot-bg-frame), transparent) top / 100% var(--wfn-edge-fade) no-repeat, linear-gradient(to top, var(--openbot-bg-frame), transparent) bottom / 100% var(--wfn-edge-fade) no-repeat;
  pointer-events: none;
}
.wfn-dots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  mask-image: radial-gradient(ellipse 85% 75% at 50% 50%, var(--openbot-text-primary) 45%, transparent 100%);
  pointer-events: none;
}
.wfn-dots circle {
  fill: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    fill: color-mix(in srgb, var(--openbot-text-primary) 15%, transparent);
  }
}
.wfn-viewport[data-space] {
  cursor: grab;
}
.wfn-viewport:is([data-panning], [data-dragging]) {
  cursor: grabbing;
  user-select: none;
}
.wfn-world {
  position: absolute;
  top: 0;
  left: 0;
  direction: ltr;
  transform-origin: 0 0;
  interpolate-size: allow-keywords;
}
.wfn-viewport[data-camera-moving] .wfn-world {
  pointer-events: none;
}
.wfn-slot {
  position: absolute;
  width: max-content;
  cursor: default;
}
.wfn-slot :is(.wfn-label, .wfn-card) {
  cursor: grab;
}
.wfn-viewport[data-dragging] .wfn-slot :is(.wfn-label, .wfn-card) {
  cursor: grabbing;
}
.wfn-canvas {
  --wfn-hud-inset: var(--openbot-space-4);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.wfn-hud {
  position: absolute;
  z-index: 3;
  display: flex;
  gap: 2px;
  align-items: center;
  height: calc(var(--openbot-control-md) + var(--openbot-space-2));
  padding: var(--openbot-space-1);
  border-radius: var(--openbot-radius-lg);
  background: var(--wfn-glass);
  box-shadow: 0 0 0 1px var(--wfn-ring-strong);
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  backdrop-filter: var(--wfn-glass-blur);
}
.wfn-hud-top {
  position: absolute;
  top: var(--openbot-space-4);
  inset-inline-end: var(--openbot-space-4);
  inset-inline-start: var(--openbot-space-4);
  z-index: 3;
  display: flex;
  gap: var(--openbot-space-2);
  align-items: flex-start;
  justify-content: space-between;
  pointer-events: none;
}
.wfn-hud-top .wfn-hud {
  position: relative;
  pointer-events: auto;
}
.wfn-hud-group {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
}
.wfn-hud-tools {
  bottom: var(--wfn-hud-inset);
  left: round(50%, 1px);
  translate: round(-50%, 1px) 0;
}
.wfn-stage .wfn-hud-add-button {
  margin-inline-start: var(--openbot-space-1);
}
.wfn-stage .wfn-hud .wfn-hud-tool[aria-pressed="true"] {
  background: var(--wfn-hover);
  color: var(--openbot-text-primary);
}
.wfn-stage .wfn-hud .wfn-hud-tool svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.wfn-stage .wfn-hud-title .wfn-hud-switcher {
  gap: var(--openbot-space-1-5);
  min-width: 0;
  padding-inline: var(--openbot-space-3) calc(var(--openbot-space-2) + var(--openbot-space-0-5));
}
.wfn-stage .wfn-hud-switcher-name {
  overflow: hidden;
  max-width: 40ch;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wfn-stage .wfn-hud-switcher .wfn-hud-chevron {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  color: var(--openbot-text-muted);
}
.wfn-canvas[data-frame="window"] > * {
  pointer-events: auto;
}
.wfn-canvas:is([data-tool="draw"], [data-tool="note"], [data-tool="shape"]) .wfn-world * {
  pointer-events: none;
}
.wfn-canvas[data-tool="pan"] .wfn-viewport, .wfn-canvas[data-tool="pan"] .wfn-slot :is(.wfn-label, .wfn-card, .wfn-card *) {
  cursor: grab;
}
.wfn-canvas[data-tool="pan"] .wfn-viewport[data-panning], .wfn-canvas[data-tool="pan"] .wfn-viewport[data-panning] * {
  cursor: grabbing;
}
.wfn-canvas[data-tool="draw"] .wfn-viewport {
  cursor: crosshair;
}
.wfn-canvas[data-draw="eraser"] .wfn-viewport {
  cursor: none;
}
.wfn-hud.wfn-hud-sub {
  right: 0;
  bottom: calc(var(--wfn-hud-inset) + var(--openbot-control-lg) + var(--openbot-space-3) + var(--openbot-space-2));
  left: 0;
  gap: var(--openbot-space-1);
  width: fit-content;
  margin-inline: auto;
}
.wfn-stage .wfn-hud-sub .wfn-hud-tool {
  width: var(--openbot-control-md);
}
.wfn-stage .wfn-hud-sub .wfn-shape-icon {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.wfn-stage .wfn-hud .wfn-hud-fill {
  gap: var(--openbot-space-1);
  padding-inline: var(--openbot-space-2) var(--openbot-space-1-5);
}
.wfn-stage .wfn-hud-fill .wfn-hud-chevron {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  color: var(--openbot-text-muted);
}
.wfn-ghost {
  position: absolute;
  z-index: 3;
  opacity: 0.5;
  translate: -50% -50%;
  pointer-events: none;
  animation: wfn-fade-in var(--openbot-duration-fast) var(--openbot-ease-out);
}
.wfn-ghost[data-drawn] {
  translate: none;
  animation: none;
}
.wfn-ghost[data-kind="note"] {
  border-radius: var(--wfn-radius-card);
  background: var(--wfn-note-paper);
  box-shadow: 0 0 0 1px var(--wfn-note-edge);
}
.wfn-ghost span.wfn-shape-surface {
  background: var(--wfn-shape);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--wfn-shape) 16%, transparent);
  }
  box-shadow: none;
  outline: 1px dashed var(--wfn-shape);
  outline-offset: -1px;
}
.wfn-ghost svg.wfn-shape-surface {
  stroke-dasharray: 4 3;
  stroke-width: 1;
}
.wfn-ink-dot {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  border-radius: var(--openbot-radius-pill);
  background: var(--wfn-ink);
  box-shadow: inset 0 0 0 1px var(--wfn-ring-strong);
  transition-property: box-shadow;
  transition-duration: var(--openbot-duration-fast);
  transition-timing-function: var(--openbot-ease-out);
}
.wfn-stage .wfn-hud .wfn-ink-swatch[aria-pressed="true"] {
  background: transparent;
}
.wfn-ink-swatch[aria-pressed="true"] .wfn-ink-dot {
  box-shadow: 0 0 0 2px var(--wfn-glass), 0 0 0 3.5px var(--openbot-text-primary);
}
.wfn-ink {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 1px;
  height: 1px;
  overflow: visible;
  pointer-events: none;
}
.wfn-ink-line {
  fill: none;
  stroke: var(--wfn-ink);
  stroke-linecap: round;
  stroke-linejoin: round;
  transition-property: opacity;
  transition-duration: var(--openbot-duration-fast);
  transition-timing-function: var(--openbot-ease-out);
}
.wfn-ink-line[data-brush="marker"] {
  stroke-opacity: 0.45;
}
.wfn-ink-line[data-erasing] {
  opacity: 0.25;
}
.wfn-eraser {
  position: absolute;
  z-index: 3;
  width: var(--openbot-space-4);
  height: var(--openbot-space-4);
  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) 8%, transparent);
  }
  box-shadow: inset 0 0 0 1px var(--openbot-text-primary);
  translate: -50% -50%;
  pointer-events: none;
}
.wfn-canvas[data-hud-hidden] :is(.wfn-hud, .wfn-hud-top) {
  visibility: hidden;
  opacity: 0;
}
.wfn-stage .wfn-hud-show {
  position: absolute;
  inset-inline-end: var(--wfn-hud-inset);
  bottom: var(--wfn-hud-inset);
  z-index: 3;
  gap: var(--openbot-space-1-5);
  animation: wfn-fade-in var(--openbot-duration-normal) var(--openbot-ease-out);
}
.wfn-hud-zoom {
  bottom: var(--wfn-hud-inset);
  inset-inline-start: var(--wfn-hud-inset);
}
.wfn-hud-separator {
  width: 1px;
  height: var(--openbot-space-4);
  margin: 0 var(--openbot-space-1);
  background: var(--wfn-ring-strong);
}
.wfn-stage .wfn-hud .ui-button {
  border-radius: var(--openbot-radius-md);
}
.wfn-stage :is(.wfn-hud, .wfn-toolbar) .ui-button {
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  transition-property: background-color, color, opacity, scale;
  transition-duration: var(--openbot-duration-fast);
  transition-timing-function: var(--openbot-ease-out);
}
.wfn-stage :is(.wfn-hud, .wfn-toolbar) .ui-button:active:not(:disabled) {
  scale: 0.96;
}
.wfn-stage .wfn-hud .ui-button-variant-ghost {
  color: var(--openbot-text-secondary);
}
.wfn-stage .wfn-hud .ui-button-variant-ghost:hover:not(:disabled), .wfn-stage .wfn-hud .ui-button-variant-ghost[data-expanded] {
  background: var(--wfn-hover);
  color: var(--openbot-text-primary);
}
.wfn-stage .wfn-hud-button {
  gap: var(--openbot-space-1-5);
  height: var(--openbot-control-md);
  padding-inline: var(--openbot-space-3);
}
.wfn-stage .wfn-hud-button:has(> svg:first-child) {
  padding-inline-start: calc(var(--openbot-space-2) + var(--openbot-space-0-5));
}
.wfn-stage .wfn-hud-button svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.wfn-stage .wfn-hud-tools {
  gap: var(--openbot-space-1-5);
  height: calc(var(--openbot-control-lg) + var(--openbot-space-3));
  padding: var(--openbot-space-1-5);
  border-radius: var(--openbot-radius-grouped);
}
.wfn-stage .wfn-hud-tools .ui-button {
  height: var(--openbot-control-lg);
  border-radius: var(--wfn-tool-radius);
}
.wfn-stage .wfn-hud-tools .wfn-hud-tool {
  width: var(--openbot-control-lg);
}
.wfn-stage .wfn-hud-tools .wfn-hud-tool svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  stroke-width: var(--openbot-icon-stroke-lg);
}
.wfn-stage .wfn-hud-tools .wfn-hud-add-button svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  stroke-width: var(--openbot-icon-stroke);
}
.wfn-stage .wfn-hud-tools {
  overflow: clip;
}
.wfn-stage .wfn-hud-tools .wfn-hud-tool[data-art] {
  position: relative;
  width: calc(var(--openbot-control-lg) + var(--openbot-space-2));
  padding: 0;
  overflow: visible;
}
.wfn-stage .wfn-hud-tools .wfn-hud-tool:is([data-art="note"], [data-art="shape"]) {
  width: calc(var(--openbot-control-lg) + var(--openbot-space-4));
}
.wfn-stage .wfn-hud .wfn-hud-tool[data-art]:is(:hover, [aria-pressed="true"]) {
  background: transparent;
}
.wfn-stage .wfn-hud-tools .wfn-hud-tool[data-art] .wfn-tool-art {
  --wfn-art-base: var(--wfn-art-color);
  --wfn-art-light: var(--wfn-art-color);
  @supports (color: color-mix(in lab, red, red)) {
    --wfn-art-light: color-mix(in srgb, var(--wfn-art-color) 58%, var(--openbot-paper));
  }
  --wfn-art-dark: var(--wfn-art-color);
  @supports (color: color-mix(in lab, red, red)) {
    --wfn-art-dark: color-mix(in srgb, var(--wfn-art-color) 72%, var(--openbot-paper-text));
  }
  --wfn-art-wood-color: var(--openbot-file-orange);
  @supports (color: color-mix(in lab, red, red)) {
    --wfn-art-wood-color: color-mix(in srgb, var(--openbot-file-orange) 38%, var(--openbot-paper));
  }
  --wfn-art-metal-color: var(--openbot-paper);
  @supports (color: color-mix(in lab, red, red)) {
    --wfn-art-metal-color: color-mix(in srgb, var(--openbot-paper) 78%, var(--openbot-paper-text));
  }
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  overflow: visible;
}
:root[data-openbot-color-scheme="light"] .wfn-stage .wfn-hud-tools .wfn-hud-tool[data-art] .wfn-tool-art {
  --wfn-art-base: oklch(from var(--wfn-art-color) 0.82 calc(c * 0.75) h);
  --wfn-art-light: oklch(from var(--wfn-art-color) 0.93 calc(c * 0.35) h);
}
.wfn-hud-tool[data-art="draw"]:is(:hover, [aria-pressed="true"]) .wfn-art-layer {
  translate: 0 calc(var(--openbot-space-1-5) * -1);
}
.wfn-hud-tool[data-art="note"]:is(:hover, [aria-pressed="true"]) [data-layer="back"] {
  rotate: -15deg;
  translate: calc(var(--openbot-space-1) * -1) calc(var(--openbot-space-0-5) * -1);
}
.wfn-hud-tool[data-art="note"]:is(:hover, [aria-pressed="true"]) [data-layer="middle"] {
  rotate: 4deg;
  translate: 0 calc(var(--openbot-space-1) * -1);
}
.wfn-hud-tool[data-art="note"]:is(:hover, [aria-pressed="true"]) [data-layer="front"] {
  rotate: 4deg;
  translate: var(--openbot-space-1) calc(var(--openbot-space-1-5) * -1);
}
.wfn-hud-tool[data-art="shape"]:is(:hover, [aria-pressed="true"]) [data-layer="back"] {
  rotate: -17deg;
  translate: calc(var(--openbot-space-1) * -1) calc(var(--openbot-space-0-5) * -1);
  scale: 1.06;
}
.wfn-hud-tool[data-art="shape"]:is(:hover, [aria-pressed="true"]) [data-layer="middle"] {
  rotate: 12deg;
  translate: var(--openbot-space-1) var(--openbot-space-0-5);
}
.wfn-hud-tool[data-art="shape"]:is(:hover, [aria-pressed="true"]) [data-layer="front"] {
  rotate: 6deg;
  translate: var(--openbot-space-0-5) calc(var(--openbot-space-1-5) * -1);
}
.wfn-hud-tools .wfn-hud-separator {
  height: calc(var(--openbot-space-4) + var(--openbot-space-1));
  margin: 0 var(--openbot-space-0-5);
}
.wfn-hud-icon {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  border-radius: var(--openbot-radius-md);
  background: var(--wfn-hover);
  color: var(--openbot-text-secondary);
}
.wfn-stage .wfn-hud-icon svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.wfn-stage .wfn-hud-name {
  field-sizing: content;
  min-width: 8ch;
  max-width: 40ch;
  height: var(--openbot-control-md);
  padding: 0 var(--openbot-space-2);
  border: 0;
  border-radius: var(--openbot-radius-md);
  background: transparent;
  box-shadow: none;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  text-overflow: ellipsis;
  transition-property: background-color, box-shadow;
  transition-duration: var(--openbot-duration-fast);
}
.wfn-stage .wfn-hud-name:hover {
  background: var(--wfn-hover);
}
.wfn-stage .wfn-hud-name:focus-visible {
  outline: none;
  background: var(--wfn-hover);
  box-shadow: inset 0 0 0 1px var(--wfn-ring-strong);
}
.wfn-hud-viewing {
  gap: var(--openbot-space-1-5);
  padding-inline-start: var(--openbot-space-3);
  font-variant-numeric: tabular-nums;
}
.wfn-stage .wfn-hud-viewing > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
}
.wfn-hud[hidden] {
  display: none;
}
.wfn-hud-version {
  bottom: var(--wfn-hud-inset);
  left: round(50%, 1px);
  gap: var(--openbot-space-1-5);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  translate: round(-50%, 1px) 0;
}
.wfn-hud-lock {
  display: inline-flex;
  gap: var(--openbot-space-1);
  align-items: center;
  margin-inline-end: var(--openbot-space-1);
  color: var(--openbot-text-muted);
}
.wfn-hud-lock-icon {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.wfn-canvas[data-preview] .wfn-viewport {
  cursor: grab;
}
.wfn-canvas[data-preview] .wfn-viewport[data-panning] {
  cursor: grabbing;
}
.wfn-hud-label {
  font-weight: var(--openbot-weight-medium);
}
.wfn-hud-meta {
  margin-inline-end: var(--openbot-space-1);
  color: var(--openbot-text-muted);
}
.wfn-hud-count {
  min-width: var(--openbot-space-4);
  padding: 0 var(--openbot-space-1);
  border-radius: var(--openbot-radius-xs);
  background: var(--wfn-hover);
  color: var(--openbot-text-muted);
  font-size: var(--wfn-small);
  font-variant-numeric: tabular-nums;
  line-height: var(--openbot-leading-sm);
  text-align: center;
}
.wfn-hud-progress {
  display: inline-flex;
  gap: var(--openbot-space-1-5);
  align-items: center;
  padding: 0 var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-variant-numeric: tabular-nums;
  animation: wfn-fade-in var(--openbot-duration-fast) var(--openbot-ease-out);
}
.wfn-hud-progress .wfn-hud-ring {
  --ui-radial-progress-color: var(--openbot-text-primary);
  width: var(--openbot-icon-md);
}
.wfn-stage .wfn-hud-stop {
  animation: wfn-fade-in var(--openbot-duration-fast) var(--openbot-ease-out);
}
.wfn-stage .wfn-hud-stop svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  fill: currentColor;
}
@keyframes wfn-fade-in {
  from {
    opacity: 0;
  }
}
.wfn-stage .wfn-zoom-value {
  justify-content: center;
  min-width: 6ch;
  padding-inline: var(--openbot-space-1);
  font-variant-numeric: tabular-nums;
}
.wfn-zoom-menu {
  min-width: 200px;
}
.wfn-zoom-menu .wfn-menu-text {
  margin-inline-end: auto;
}
.wfn-zoom-presets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
.wfn-zoom-menu.ui-action-menu .wfn-zoom-presets .wfn-zoom-preset {
  justify-content: center;
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
.wfn-zoom-menu.ui-action-menu .wfn-zoom-presets .wfn-zoom-preset[data-current] {
  background: var(--wfn-hover);
  color: var(--openbot-text-primary);
}
.wfn-menu-glyph {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  color: var(--openbot-text-secondary);
}
.wfn-menu-glyph svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.wfn-menu .ui-action-menu-danger .wfn-menu-glyph {
  color: var(--openbot-danger);
}
.wfn-hud.wfn-search {
  bottom: calc(var(--wfn-hud-inset) + var(--openbot-control-md) + var(--openbot-space-2) + var(--openbot-space-2));
  left: round(50%, 1px);
  display: grid;
  gap: var(--openbot-space-1);
  align-items: stretch;
  width: min(480px, calc(100% - var(--openbot-space-8)));
  height: auto;
  translate: round(-50%, 1px) 0;
}
.wfn-search-field {
  display: flex;
  gap: var(--openbot-space-1);
  align-items: center;
  padding-inline-start: var(--openbot-space-2);
  border-radius: var(--wfn-tool-radius);
}
.wfn-search-field:has(.wfn-search-input:focus-visible) {
  box-shadow: inset 0 0 0 1px var(--openbot-border-focus);
}
.wfn-stage .wfn-search-icon {
  flex: 0 0 auto;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
}
.wfn-stage .wfn-search-input {
  flex: 1 1 auto;
  height: var(--openbot-control-md);
  padding: 0 var(--openbot-space-1);
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: var(--openbot-text-sm);
}
.wfn-stage .wfn-search-input:focus-visible {
  outline: none;
  box-shadow: none;
}
.wfn-search-empty {
  margin: 0;
  padding: var(--openbot-space-2) var(--openbot-space-2) var(--openbot-space-3);
  border-top: 1px solid var(--wfn-ring);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  text-wrap: pretty;
}
.wfn-search-results {
  display: grid;
  gap: 2px;
  max-height: 320px;
  margin: 0;
  padding: var(--openbot-space-1) 0 0;
  overflow-y: auto;
  border-top: 1px solid var(--wfn-ring);
  list-style: none;
}
.wfn-stage .wfn-hud .wfn-search-result {
  justify-content: flex-start;
  gap: var(--openbot-space-2);
  width: 100%;
  height: auto;
  min-height: var(--openbot-control-md);
  padding: var(--openbot-space-1) var(--openbot-space-2);
  color: var(--openbot-text-primary);
  text-align: start;
}
.wfn-search-result .wfn-menu-text {
  flex: 0 0 auto;
}
.wfn-hud.wfn-search.wfn-drop-menu {
  position: relative;
  bottom: auto;
  left: auto;
  width: 240px;
  translate: none;
}
.wfn-hud.wfn-drop-menu .wfn-search-results {
  display: block;
  max-height: min(560px, calc(100vh - var(--openbot-space-8)));
  padding: var(--openbot-space-1) 0 0;
}
.wfn-drop-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wfn-drop-menu:has(.wfn-search-input:focus) .wfn-search-result[data-first] {
  background: var(--wfn-hover);
}
.wfn-search-snippet {
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--wfn-small);
  font-weight: var(--openbot-weight-regular);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wfn-hud.wfn-minimap {
  bottom: calc(var(--wfn-hud-inset) + var(--openbot-control-md) + var(--openbot-space-2) + var(--openbot-space-2));
  inset-inline-start: var(--wfn-hud-inset);
  height: auto;
  padding: 0;
  overflow: hidden;
}
.wfn-minimap svg {
  display: block;
  cursor: pointer;
  touch-action: none;
}
.wfn-minimap-node {
  fill: var(--wfn-kind, var(--openbot-text-primary));
  @supports (color: color-mix(in lab, red, red)) {
    fill: color-mix(in srgb, var(--wfn-kind, var(--openbot-text-primary)) 40%, transparent);
  }
}
.wfn-minimap-node[data-selected] {
  fill: var(--openbot-text-primary);
}
.wfn-minimap-line {
  fill: none;
  stroke: var(--wfn-ink);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wfn-minimap-line[data-brush="marker"] {
  stroke-opacity: 0.45;
}
.wfn-minimap-view {
  fill: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    fill: color-mix(in srgb, var(--openbot-text-primary) 4%, transparent);
  }
  stroke: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    stroke: color-mix(in srgb, var(--openbot-text-primary) 64%, transparent);
  }
  stroke-width: 1.5;
}
.wfn-results-menu {
  min-width: 220px;
}
.wfn-results-menu .wfn-menu-text {
  margin-inline-end: auto;
}
.wfn-results-menu .wfn-menu-meta {
  font-variant-numeric: tabular-nums;
}
.wfn-results-menu .wfn-menu-check {
  margin-inline-start: 0;
}
.wfn-menu-check[data-off] {
  visibility: hidden;
}
.wfn-menu-icon {
  --wfn-kind: var(--openbot-text-secondary);
  display: inline-grid;
  flex: none;
  place-items: center;
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  margin-inline-start: calc(var(--openbot-space-1) * -1);
  border-radius: var(--openbot-radius-sm);
  background: var(--wfn-kind);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--wfn-kind) 16%, transparent);
  }
  box-shadow: inset 0 0 0 1px var(--wfn-kind);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wfn-kind) 14%, transparent);
  }
  color: var(--wfn-kind);
}
:is(.wfn-menu, .wfn-search) .wfn-menu-icon svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: inherit;
  stroke-width: var(--openbot-icon-stroke);
}
@media (prefers-reduced-motion: reduce) {
  .wfn-edge-line, .wfn-edge-comet, .wfn-hud-progress, .wfn-stage .wfn-hud-stop {
    animation: none;
  }
  .wfn-stage :is(.wfn-hud, .wfn-toolbar) .ui-button:active:not(:disabled) {
    scale: 1;
  }
}
.wfn-world[data-group] .wfn-grip {
  display: none;
}
.wfn-viewport:is([data-resizing], [data-dragging]) .wfn-node:not([data-resizing], [data-selected]) .wfn-grip {
  --wfn-grip-color: transparent;
}
.wfn-viewport[data-resizing], .wfn-viewport[data-resizing] .wfn-slot :is(.wfn-label, .wfn-card, .wfn-grip) {
  cursor: ew-resize;
  user-select: none;
}
.wfn-viewport[data-resizing="ns"], .wfn-viewport[data-resizing="ns"] .wfn-slot :is(.wfn-label, .wfn-card, .wfn-grip) {
  cursor: ns-resize;
}
.wfn-viewport[data-resizing="nwse"], .wfn-viewport[data-resizing="nwse"] .wfn-slot :is(.wfn-label, .wfn-card, .wfn-grip) {
  cursor: nwse-resize;
}
.wfn-viewport[data-resizing="nesw"], .wfn-viewport[data-resizing="nesw"] .wfn-slot :is(.wfn-label, .wfn-card, .wfn-grip) {
  cursor: nesw-resize;
}
.wfn-viewport[data-resizing] .wfn-slot :is(.wfn-node, .wfn-card) {
  transition: none;
}
.wfn-empty {
  position: absolute;
  inset: 0;
  display: grid;
  gap: var(--openbot-space-3);
  place-content: center;
  justify-items: center;
  pointer-events: none;
  animation: wfn-fade-in var(--openbot-duration-normal) var(--openbot-ease-out);
}
.wfn-empty > * {
  pointer-events: auto;
}
.wfn-stage .wfn-empty-icon {
  width: var(--openbot-control-lg);
  height: var(--openbot-control-lg);
  border-radius: var(--openbot-radius-lg);
}
.wfn-stage .wfn-empty-icon svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.wfn-empty-title {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  text-wrap: balance;
}
.wfn-marquee {
  position: absolute;
  z-index: 3;
  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) 4%, transparent);
  }
  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) 32%, transparent);
  }
  pointer-events: none;
}
.wfn-group {
  position: absolute;
  z-index: 2;
  border-radius: var(--wfn-radius-card);
  outline: calc(1px / var(--wfn-scale, 1)) dashed var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    outline: calc(1px / var(--wfn-scale, 1)) dashed color-mix(in srgb, var(--openbot-text-primary) 24%, transparent);
  }
  outline-offset: calc(12px / var(--wfn-scale, 1));
  pointer-events: none;
}
.wfn-group .wfn-group-bar {
  bottom: calc(100% + (12px + var(--openbot-space-3)) / var(--wfn-scale, 1));
  pointer-events: auto;
}
.wfn-group-count {
  padding: 0 var(--openbot-space-1) 0 var(--openbot-space-3);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.wfn-viewport[data-dragging] .wfn-group-bar {
  opacity: 0;
}
.wfn-guide {
  position: absolute;
  z-index: 3;
  background: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-primary) 22%, transparent);
  }
  pointer-events: none;
  opacity: 1;
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}
@starting-style {
  .wfn-guide {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wfn-guide {
    transition: none;
  }
}
.wfn-guide[data-axis="x"] {
  width: calc(1px / var(--wfn-scale, 1));
  translate: calc(-0.5px / var(--wfn-scale, 1)) 0;
}
.wfn-guide[data-axis="y"] {
  height: calc(1px / var(--wfn-scale, 1));
  translate: 0 calc(-0.5px / var(--wfn-scale, 1));
}
.wfn-hud-live {
  display: contents;
}
.wfn-stage .wfn-hud-step {
  gap: var(--openbot-space-1-5);
  max-width: 360px;
  font-variant-numeric: tabular-nums;
}
.wfn-stage .wfn-hud .wfn-hud-step > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: none;
  color: var(--openbot-text-muted);
}
.wfn-stage .wfn-hud-status[data-status="failed"] .wfn-hud-step > svg {
  color: var(--openbot-danger-text);
}
.wfn-hud-step .wfn-hud-meta {
  margin-inline-end: 0;
}
.wfn-hud-step-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .wfn-ghost {
    animation: none;
  }
}
.wfn-stage[data-deleted] {
  visibility: hidden;
}
.wfn-undo-toast-tile {
  display: grid;
  place-items: center;
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-bg-control);
  box-shadow: inset 0 0 0 1px var(--openbot-border);
  color: var(--openbot-text-secondary);
}
.wfn-undo-toast-icon {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.app-window.wfn-app {
  height: 100vh;
}
.wfn-stage.wfn-canvas[data-frame="window"] {
  --wfn-hud-inset: var(--openbot-space-2);
  height: 100%;
  background: transparent;
}
.wfn-canvas[data-frame="window"] :is(.wfn-viewport, .wfn-empty) {
  top: var(--left-header-height);
}
.wfn-canvas[data-frame="window"] .wfn-viewport {
  border-radius: var(--wfn-card-inner-radius);
  background: var(--openbot-bg-frame);
}
.wfn-canvas[data-frame="window"] .wfn-follow-frame {
  top: var(--left-header-height);
  border-radius: var(--wfn-card-inner-radius);
}
.wfn-app .sidebar-marketplace-button {
  display: none;
}
.wfn-canvas[data-frame="window"] .wfn-hud-top {
  top: 0;
  inset-inline-end: var(--openbot-space-3);
  inset-inline-start: calc(var(--left-panel-width) + var(--openbot-space-3));
  height: var(--left-header-height);
  align-items: center;
}
.wfn-canvas[data-frame="window"] .wfn-hud-top .wfn-hud {
  height: auto;
  padding: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.wfn-canvas[data-frame="window"] .wfn-hud-top .wfn-hud-button {
  height: var(--openbot-control-xs);
  padding-inline: var(--openbot-space-2);
  font-size: var(--openbot-text-lg);
}
.wfn-canvas[data-frame="window"] .wfn-hud-top .wfn-hud-button svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.wfn-canvas[data-frame="window"][data-hud-hidden] .wfn-hud-top, .wfn-canvas[data-frame="window"][data-hud-hidden] .wfn-hud-top .wfn-hud {
  visibility: visible;
  opacity: 1;
}
.wfs-menu.ui-action-menu {
  --ui-menu-panel-shadow: inset 0 1px 0 var(--ui-menu-highlight), 0 0 0 1px var(--ui-menu-edge);
  min-width: 260px;
  max-width: min(320px, calc(100vw - var(--openbot-space-4)));
  max-height: min(520px, var(--kb-popper-content-available-height, 520px));
  overflow-y: auto;
}
.wfs-menu .wfs-name {
  flex: 1 1 auto;
}
.wfs-menu .ui-menu-trailing {
  flex: none;
  font-variant-numeric: tabular-nums;
}
.wfn-hud-version .wfn-hud-button > svg[class~="lucide-arrow-left"]:dir(rtl) {
  transform: scaleX(-1);
}
.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: normal;
  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: wrap;
  gap: var(--openbot-space-4) calc(var(--openbot-space-6) * 2);
  max-height: calc(var(--openbot-leading-sm) + var(--openbot-space-1) + var(--openbot-leading-xl));
  margin-top: var(--openbot-space-4);
  overflow: hidden;
}
.agent-usage-totals dt {
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-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);
  line-height: var(--openbot-leading-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: end;
  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: start;
  padding-inline-start: 0;
  white-space: normal;
}
.agent-usage-table td:last-child {
  padding-inline-end: 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-table td.agent-usage-table-empty {
  padding-inline-start: 0;
  text-align: start;
  white-space: normal;
  color: var(--openbot-text-muted);
}
.agent-usage-breakdown {
  position: relative;
}
.agent-usage-breakdown > .ui-sliding-tabs-content:not([data-selected]) {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.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;
}
.usage-machine-icon {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex-shrink: 0;
}
.usage-machine-trigger {
  flex-shrink: 0;
  gap: var(--openbot-space-3);
  color: var(--openbot-text-muted);
}
.usage-machine-item {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
}
.usage-machine-value {
  font-variant-numeric: tabular-nums;
}
.usage-machine-ring {
  width: var(--openbot-icon-md);
  --ui-radial-progress-color: var(--openbot-text-secondary);
}
.usage-machine-ring .ui-radial-progress-track, .usage-machine-ring .ui-radial-progress-indicator {
  stroke-width: 6;
}
.usage-machine-ring .ui-radial-progress-track {
  stroke: var(--openbot-text-dim);
  stroke-opacity: 0.35;
}
.usage-machine-item[data-tone="warning"] {
  color: var(--openbot-warning-text);
}
.usage-machine-item[data-tone="danger"] {
  color: var(--openbot-danger-text);
}
.ui-popover-menu-surface.usage-machine-popover {
  animation: ui-select-content-in var(--openbot-duration-dialog) var(--openbot-ease-out) both;
}
@media (prefers-reduced-motion: reduce) {
  .ui-popover-menu-surface.usage-machine-popover {
    animation-name: ui-select-content-fade-in;
  }
}
.usage-machine-popover .usage-machine-detail {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1-5);
}
.usage-machine-popover .usage-machine-detail-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.usage-machine-popover .usage-machine-detail-name {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.usage-machine-popover .usage-machine-icon {
  color: var(--openbot-text-secondary);
}
.usage-machine-popover .usage-machine-detail-value {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  color: var(--openbot-text-secondary);
  font-variant-numeric: tabular-nums;
}
.usage-machine-popover [data-tone="warning"] .usage-machine-detail-value {
  color: var(--openbot-warning-text);
}
.usage-machine-popover [data-tone="danger"] .usage-machine-detail-value {
  color: var(--openbot-danger-text);
}
.usage-machine-popover .usage-machine-bar .ui-progress-track {
  height: 6px;
}
.usage-machine-popover [data-tone="warning"] .ui-progress-fill {
  background: var(--openbot-warning);
}
.usage-machine-popover [data-tone="danger"] .ui-progress-fill {
  background: var(--openbot-danger);
}
.usage-machine-popover .context-meter-action.usage-machine-storage {
  height: auto;
  flex-direction: column;
  align-items: stretch;
  gap: var(--openbot-space-1-5);
  padding-block: var(--openbot-space-2);
  color: var(--openbot-text-primary);
  font-weight: inherit;
  text-align: start;
}
.usage-machine-popover .usage-machine-storage .usage-machine-chevron {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
}
.usage-machine-popover .usage-machine-detail-size {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
}
.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-inline-start: calc(-1 * var(--openbot-space-2));
}
.agent-usage-identity > .ui-icon-button > svg:dir(rtl) {
  transform: scaleX(-1);
}
.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-inline-start: 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: 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-inline-start: 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;
}
.app-window > .app-loading {
  position: fixed;
}
.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-inline-start: calc(-1 * var(--openbot-space-2));
}
.tasks-page-header svg:is([class~="lucide-arrow-left"], [class~="lucide-panel-left"]):dir(rtl) {
  transform: scaleX(-1);
}
.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-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-inline-start: 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-agent-menu.ui-action-menu {
  --tasks-agent-max: min(420px, calc(100dvh - 16px), var(--kb-popper-content-available-height, 420px));
  display: flex;
  width: 240px;
  max-height: var(--tasks-agent-max);
  flex-direction: column;
}
.tasks-page-agent-picker {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--ui-menu-padding);
}
.tasks-page-agent-search {
  display: flex;
  height: var(--openbot-control-md);
  flex: none;
  align-items: center;
  gap: var(--openbot-space-2);
  border-radius: var(--ui-menu-item-radius);
  background: var(--ui-menu-item-hover);
  padding-inline: var(--ui-menu-inset);
  cursor: text;
}
.tasks-page-agent-search > svg {
  width: 18px;
  height: var(--openbot-icon-sm);
  flex: none;
  color: var(--openbot-text-muted);
  stroke-width: var(--openbot-icon-stroke);
}
.tasks-page-agent-search .tasks-page-agent-search-input {
  min-width: 0;
  height: 100%;
  flex: 1;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  color: var(--openbot-text-primary);
  font: inherit;
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
.tasks-page-agent-search .tasks-page-agent-search-input:focus-visible {
  outline: 0;
  box-shadow: none;
}
.tasks-page-agent-search-input::placeholder {
  color: var(--openbot-text-muted);
}
.tasks-page-agent-list {
  height: min( calc(var(--tasks-agent-rows, 0) * var(--openbot-control-md)), calc(var(--tasks-agent-max) - var(--openbot-control-md) - 3 * var(--ui-menu-padding)) );
  min-height: 0;
  flex: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  outline: 0;
  padding: 0;
  scrollbar-width: none;
  transition: height var(--openbot-duration-slow) var(--ui-menu-ease);
}
.tasks-page-agent-list::-webkit-scrollbar {
  display: none;
}
.tasks-page-agent-option {
  display: flex;
  height: var(--openbot-control-md);
  align-items: center;
  gap: var(--openbot-space-2);
  border-radius: var(--ui-menu-item-radius);
  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;
}
.tasks-page-agent-option > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.tasks-page-agent-option[data-highlighted] {
  background: var(--ui-menu-item-hover);
}
.tasks-page-agent-name {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tasks-page-agent-name b {
  font-weight: var(--openbot-weight-semibold);
}
.tasks-page-agent-empty {
  margin: 0;
  padding: var(--openbot-space-1) var(--ui-menu-inset) var(--openbot-space-1-5) calc(var(--ui-menu-inset) + 18px + var(--openbot-space-2));
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  overflow-wrap: anywhere;
  transition: opacity var(--openbot-duration-normal) var(--openbot-ease-out) var(--openbot-duration-fast);
  @starting-style {
    opacity: 0;
  }
}
.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: start;
  --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 var(--tasks-page-side-width, 420px);
  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);
}
html.panel-resizing .tasks-page-side {
  transition: none;
}
.tasks-page-side[data-closing] > .panel-resizer {
  visibility: hidden;
}
.tasks-page-side-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}
.tasks-page-side-content {
  position: absolute;
  inset-block: 0;
  inset-inline: 0 auto;
  display: flex;
  width: var(--tasks-page-side-width, 420px);
  --browser-panel-width: 100%;
}
.tasks-page-side-content > * {
  flex: 1;
  min-width: 0;
}
.tasks-panel .file-preview-header {
  --task-list-glyph: 16px;
}
.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);
  }
}
.tasks-page[data-empty] .tasks-page-column {
  min-height: 100%;
}
.tasks-page[data-empty] .tasks-page-composer.composer-wrap {
  position: static;
}
.tasks-page-empty-pitch {
  display: grid;
  justify-items: center;
  gap: var(--openbot-space-3);
  margin-top: auto;
  padding: 0 var(--openbot-space-2) var(--openbot-space-6);
  text-align: center;
}
.tasks-page-empty-title {
  --tasks-page-empty-hand-size: calc(var(--openbot-text-display) * 1.2);
  display: grid;
  margin: 0;
  font-size: var(--openbot-text-display);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.tasks-page-empty-lead {
  color: var(--openbot-text-muted);
}
.tasks-page-empty-word {
  color: var(--openbot-accent-text);
  font-family: "Bradley Hand", "Noteworthy", "Segoe Print", cursive;
  font-size: var(--tasks-page-empty-hand-size);
  clip-path: inset(-0.4em 100% -0.4em -0.2em);
  animation: tasks-page-empty-write 640ms linear 500ms forwards;
}
@keyframes tasks-page-empty-write {
  to {
    clip-path: inset(-0.4em -0.2em -0.4em -0.2em);
  }
}
.tasks-page-empty-lines {
  display: grid;
  margin: 0;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-lg);
  line-height: 1.5;
}
.tasks-page-empty-board {
  --tasks-page-empty-head: 1.75rem;
  --tasks-page-empty-block: calc(var(--tasks-page-empty-head) + var(--openbot-control-lg) + var(--openbot-space-4));
  position: relative;
  display: grid;
  grid-template-rows: repeat(3, var(--tasks-page-empty-block));
  margin: var(--openbot-space-2) 0 auto;
  padding-bottom: var(--openbot-space-8);
  opacity: 0.6;
  pointer-events: none;
  user-select: none;
  mask-image: radial-gradient( ellipse 80% 100% at 50% 45%, var(--openbot-text-primary) 45%, var(--openbot-transparent) 100% );
}
.tasks-page-empty-section.tasks-page-section {
  margin-top: 0;
}
.tasks-page-empty-section .tasks-page-section-heading {
  height: var(--tasks-page-empty-head);
}
.tasks-page-empty-rows {
  position: absolute;
  inset: 0;
}
.tasks-page-empty-row {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  transform: translateY( calc( var(--tasks-page-empty-slot) * var(--tasks-page-empty-block) + var(--tasks-page-empty-head) + var(--openbot-space-0-5) ) );
  transition: transform 760ms var(--openbot-ease-out), opacity 600ms var(--openbot-ease-out), filter 600ms var(--openbot-ease-out), translate 600ms var(--openbot-ease-out);
  animation: tasks-page-empty-arrive 620ms var(--openbot-ease-out) both;
}
@keyframes tasks-page-empty-arrive {
  from {
    opacity: 0;
    filter: blur(4px);
    translate: 0 10px;
    scale: 0.97;
  }
}
.tasks-page-empty-row[data-age="3"] {
  opacity: 0;
  filter: blur(3px);
  translate: 0 -8px;
}
@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], .tasks-page-empty-row {
    animation: none;
  }
  .tasks-page-empty-word {
    clip-path: none;
    animation: none;
  }
  .tasks-page-side, .tasks-page-agent-chevron, .tasks-page-agent-list, .tasks-page-agent-empty, .tasks-page-empty-row {
    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: end;
}
.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: end;
}
.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-lg);
}
.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: start;
  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-row-chevron:dir(rtl) {
  transform: scaleX(-1);
}
.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%;
  inset-inline-start: 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-inline-start: 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-lg);
}
.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-inline-end: 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: start;
  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);
}
.machine-resources-metrics, .machine-resources-settings {
  margin: 0;
  padding: 0;
  border: 1px solid var(--openbot-border-grouped);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-grouped);
  list-style: none;
}
.machine-resources-metric {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 96px 44px;
  align-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3) var(--openbot-space-4);
}
.machine-resources-metric + .machine-resources-metric {
  border-top: 1px solid var(--openbot-border-grouped);
}
.machine-resources-icon {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-secondary);
}
.machine-resources-metric[data-tone="warning"] .machine-resources-icon {
  color: var(--openbot-warning);
}
.machine-resources-metric[data-tone="danger"] .machine-resources-icon {
  color: var(--openbot-danger);
}
.machine-resources-copy {
  display: grid;
  min-width: 0;
  gap: var(--openbot-space-0-5);
}
.machine-resources-title {
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.machine-resources-meta {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.machine-resources-bar {
  position: relative;
  display: flex;
  align-items: center;
}
.machine-resources-bar .ui-progress-track {
  height: 6px;
}
.machine-resources-metric[data-tone="warning"] .ui-progress-fill {
  background: var(--openbot-warning);
}
.machine-resources-metric[data-tone="danger"] .ui-progress-fill {
  background: var(--openbot-danger);
}
.machine-resources-threshold {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-text-secondary);
}
.machine-resources-value {
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  text-align: end;
}
.storage-message.machine-resources-alert .storage-message-icon {
  color: var(--openbot-warning);
}
.machine-resources-settings {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-4);
  padding: var(--openbot-space-4);
}
.machine-resources-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-4);
}
.machine-resources-select {
  flex: 0 0 220px;
}
@container (max-width: 520px) {
  .machine-resources-metric {
    grid-template-columns: auto minmax(0, 1fr) 44px;
  }
  .machine-resources-bar {
    display: none;
  }
  .machine-resources-setting {
    flex-direction: column;
    align-items: stretch;
  }
  .machine-resources-select {
    flex-basis: auto;
  }
}
.library-frame {
  position: relative;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.library-page {
  position: relative;
  display: flex;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  gap: var(--openbot-space-4);
  overflow-y: auto;
  padding: var(--openbot-space-8) var(--openbot-space-8) var(--openbot-space-6);
}
.library-frame[data-pill] .library-page {
  padding-bottom: calc(var(--openbot-space-8) * 3);
}
.library-page[data-marquee] {
  cursor: default;
  user-select: none;
}
.library-marquee {
  position: absolute;
  z-index: 2;
  border: 1px solid var(--openbot-accent);
  border-radius: var(--openbot-radius-sm);
  background: var(--openbot-accent-soft);
  pointer-events: none;
}
.library-pill {
  position: absolute;
  z-index: 5;
  bottom: var(--openbot-space-6);
  left: 50%;
  display: flex;
  box-sizing: border-box;
  height: 44px;
  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);
  box-shadow: inset 0 0 0 1px var(--openbot-shadow-ring);
  color: var(--openbot-text-primary);
  translate: -50% 0;
  transition: background-color var(--openbot-duration-normal) var(--openbot-ease-out), border-color var(--openbot-duration-normal) var(--openbot-ease-out);
}
.library-pill[data-tone="danger"] {
  border-color: var(--openbot-danger-border);
  background: linear-gradient(var(--openbot-danger-soft), var(--openbot-danger-soft)), var(--openbot-bg-surface-raised);
}
.library-pill-face {
  position: relative;
  display: flex;
  width: max-content;
  flex: none;
  align-items: center;
  gap: var(--openbot-space-1);
  padding-inline: var(--openbot-space-1-5);
  white-space: nowrap;
}
.library-pill-progress {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  background: var(--openbot-accent-soft);
  transition: width var(--openbot-duration-slow) var(--openbot-ease-out);
}
.library-pill-count, .library-pill-text {
  display: inline-flex;
  overflow: hidden;
  align-items: center;
  gap: var(--openbot-space-1-5);
  padding-inline: var(--openbot-space-2);
  font-size: var(--openbot-text-sm);
  font-weight: 620;
  font-variant-numeric: tabular-nums;
}
.library-pill-count > span {
  display: inline-block;
}
.library-pill-status {
  padding-inline: var(--openbot-space-3);
}
.ui-button.library-pill-button {
  border-radius: var(--openbot-radius-pill);
}
.library-pill-rule {
  width: 1px;
  height: 18px;
  margin-inline: var(--openbot-space-0-5);
  background: var(--openbot-border);
}
@media (prefers-reduced-motion: reduce) {
  .library-pill, .library-pill-progress {
    transition: none;
  }
}
.library-truncate {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.library-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
}
.library-title {
  margin: 0;
  font-size: var(--openbot-text-2xl);
  font-weight: var(--openbot-weight-semibold);
}
.library-tools {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
}
.library-views {
  display: flex;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
  gap: var(--openbot-space-0-5);
}
.library-views [aria-pressed="true"] {
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-primary);
}
.library-search {
  width: min(320px, 40vw);
}
.library-grid {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 4 220px;
  column-gap: var(--openbot-space-3);
}
.library-tile {
  position: relative;
  margin-bottom: var(--openbot-space-3);
  break-inside: avoid;
}
.ui-button.library-picture, .ui-button.library-file-card {
  display: block;
  width: 100%;
  height: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-surface);
  color: inherit;
  font: inherit;
  text-align: start;
  white-space: normal;
  cursor: pointer;
}
.library-picture img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto 1 / 1;
}
.ui-button.library-file-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3);
}
.library-file-name {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  min-width: 0;
  padding-inline-end: var(--openbot-space-6);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
}
.library-file-source {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.library-file-source:empty {
  display: none;
}
.library-tile-menu {
  position: absolute;
  top: var(--openbot-space-2);
  inset-inline-end: var(--openbot-space-2);
  opacity: 0;
}
.library-tile[data-kind="image"] .library-tile-menu {
  background: var(--openbot-bg-overlay);
}
.library-tile:is(:hover, :focus-within) .library-tile-menu, .library-tile-menu[data-expanded] {
  opacity: 1;
}
.file-select-mark {
  display: inline-flex;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: 0 0 auto;
  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;
}
.file-select-mark[data-selected] {
  border-color: var(--openbot-accent);
  background: var(--openbot-accent);
  color: var(--openbot-text-on-accent);
}
.file-select-mark svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  stroke-width: 2.5;
}
.file-row[data-selected] {
  background: var(--openbot-accent-soft);
}
.library-tile-mark {
  position: absolute;
  top: var(--openbot-space-2);
  inset-inline-end: var(--openbot-space-2);
  pointer-events: none;
}
.library-tile[data-kind="image"] .library-tile-mark:not([data-selected]) {
  background: var(--openbot-bg-overlay);
}
.library-tile[data-selected] :is(.library-picture, .library-file-card).ui-button {
  border-color: var(--openbot-accent);
  outline: 1px solid var(--openbot-accent);
}
@media (hover: hover) {
  .ui-button.library-picture:hover, .ui-button.library-file-card:hover {
    border-color: var(--openbot-border-strong);
    background: var(--openbot-bg-surface);
    color: inherit;
  }
}
@media (max-width: 720px) {
  .library-page {
    padding: var(--openbot-space-4);
  }
  .library-head {
    flex-wrap: wrap;
  }
  .library-search {
    width: auto;
    flex: 1;
  }
}
.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;
  inset-inline-start: 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-folder:not([data-selected]) {
  display: none;
}
.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-block: var(--openbot-space-2);
  padding-inline: var(--openbot-space-3) var(--openbot-space-2);
  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-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-3) var(--openbot-space-1);
  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: start;
  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-lg);
}
.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-lg);
}
.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-inline-start: -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);
}
.agent-import-sources {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.agent-import-source .agent-import-picker-copy {
  flex: 1;
}
.agent-import-source-logo {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  flex: 0 0 auto;
  color: var(--openbot-text-primary);
  fill: currentColor;
}
.agent-import-back.ui-button {
  align-self: flex-start;
}
.agent-import-back.ui-button svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.agent-import-back.ui-button > svg[class~="lucide-arrow-left"]:dir(rtl) {
  transform: scaleX(-1);
}
.hermes-logo-tile {
  fill: var(--openbot-text-primary);
}
.hermes-logo-mark {
  fill: var(--openbot-bg-canvas);
}
.agent-import-source-label {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
}
.agent-import-source-label-logo {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
}
.agent-import-profile {
  gap: var(--openbot-space-2);
}
.agent-import-profile-head {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
}
.agent-import-profile-name {
  margin: 0;
}
.agent-import-chevron {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.agent-import-chevron-open {
  transform: rotate(180deg);
}
.agent-import-rerun {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-2) var(--openbot-space-3);
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-grouped);
}
.agent-import-items[data-muted="true"] {
  opacity: 0.5;
}
.agent-import-item {
  align-items: flex-start;
}
.agent-import-allow {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--openbot-space-1-5);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  cursor: pointer;
}
.agent-import-command {
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
  overflow-wrap: anywhere;
  white-space: normal;
}
.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-flow-arrow:dir(rtl), .instance-transfer-back > svg[class~="lucide-chevron-left"]:dir(rtl) {
  transform: scaleX(-1);
}
.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: start;
  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: start;
  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]):hover {
    background: var(--openbot-hover);
    color: var(--openbot-text-primary);
  }
}
.settings-modal-nav-item > svg:first-child {
  color: var(--openbot-text-muted);
}
.settings-modal-nav-item:is([aria-current], [data-selected], :focus-visible) > svg:first-child {
  color: var(--openbot-text-primary);
}
@media (hover: hover) and (pointer: fine) {
  .settings-modal-nav-item:hover > svg:first-child {
    color: var(--openbot-text-primary);
  }
}
.settings-modal-main {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  background: var(--openbot-bg-canvas);
}
.settings-modal-footer {
  display: contents;
}
.settings-page-path {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-1-5);
  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);
  white-space: nowrap;
}
.settings-page-path .settings-page-path-parent {
  flex: 0 1 auto;
  min-width: 0;
  margin-inline: calc(-1 * var(--openbot-space-2) - 1px) calc(-1 * var(--openbot-space-1));
  overflow: hidden;
  border-color: transparent;
  background: transparent;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-page-path .settings-page-path-parent:focus-visible {
  border-color: var(--openbot-border);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-primary);
}
@media (hover: hover) and (pointer: fine) {
  .settings-page-path .settings-page-path-parent:hover:not(:disabled) {
    border-color: var(--openbot-border);
    background: var(--openbot-bg-control);
    color: var(--openbot-text-primary);
  }
}
.settings-page-path-separator {
  flex: 0 0 auto;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-muted);
}
.settings-page-path-separator:dir(rtl) {
  transform: scaleX(-1);
}
.settings-page-path-current {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font: inherit;
  text-overflow: ellipsis;
}
.settings-page-description {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.settings-modal-scroll-frame {
  position: relative;
  min-height: 0;
  overflow: hidden;
}
.settings-modal-scroll-frame::before, .settings-modal-scroll-frame::after {
  position: absolute;
  inset-inline-end: var(--openbot-space-2);
  inset-inline-start: 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-on-accent);
}
.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-on-accent);
}
.settings-modal .ui-switch[data-checked] {
  background: var(--openbot-accent);
}
.settings-modal .ui-switch-thumb[data-checked] {
  background: var(--openbot-text-on-accent);
}
@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-on-accent);
  }
}
: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-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-block: 0 var(--openbot-space-3);
  padding-inline: 54px 0;
}
.provider-picker-embedded .provider-picker-accounts {
  margin-top: calc(-1 * var(--openbot-space-2));
  padding-block: 0 var(--openbot-space-2);
  padding-inline: 54px 0;
}
.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-inline-end: 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-link-select {
  width: 220px;
}
.ui-select-item.settings-modal-select-group-end {
  margin-bottom: var(--openbot-space-1);
  border-bottom: 1px solid var(--openbot-border);
}
.settings-modal-link-command {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: var(--openbot-space-2);
}
.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: end;
  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-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-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: start;
  }
  .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-mobile-dialog-footer svg:is([class~="lucide-arrow-left"], [class~="lucide-arrow-right"]):dir(rtl) {
  transform: scaleX(-1);
}
.settings-modal-page > .settings-modal-main > .settings-modal-scroll-frame > .settings-modal-content {
  padding-top: var(--openbot-space-6);
}
.settings-provider-section {
  display: grid;
  gap: var(--openbot-space-2);
}
.settings-dynamic-island-size > .ui-slider-field, .settings-dynamic-island-preview, .settings-agent-dock-size {
  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-agent-dock-avatar {
  width: 32px;
  height: 32px;
}
.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-model-actions {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.settings-voice-key-field > .ui-input {
  width: 100%;
}
.settings-modal-row .settings-voice-needs-key {
  color: var(--openbot-warning-text);
}
.settings-voice-toast-progress {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-top: var(--openbot-space-1);
}
.settings-voice-toast-progress > .ui-progress {
  flex: 1;
}
.settings-voice-toast-percent {
  font-variant-numeric: tabular-nums;
}
.custom-provider-dialog.voice-server-dialog {
  width: min(640px, 100%);
}
.voice-server-dialog .voice-server-line {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) minmax(0, 2fr) auto;
  gap: var(--openbot-space-2) var(--openbot-space-3);
  align-items: center;
  padding: var(--openbot-space-3) var(--openbot-space-4);
}
.voice-server-dialog .voice-server-name {
  display: grid;
  grid-column: 1;
  min-width: 0;
}
.voice-server-dialog .voice-server-model {
  grid-column: 2;
  min-width: 0;
}
.voice-server-dialog .voice-server-wide {
  grid-column: 2 / 4;
}
.voice-server-dialog .voice-server-voice {
  grid-column: 3;
  min-width: 0;
}
.voice-server-dialog .voice-server-end {
  display: flex;
  grid-column: 4;
  justify-content: flex-end;
}
.voice-server-dialog .voice-server-line .settings-modal-select {
  width: 100%;
}
.window-rail {
  position: relative;
  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-logo {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  height: var(--left-header-height, 38px);
  align-items: center;
  justify-content: center;
  padding-top: 2px;
}
.window-rail-logo .app-logo {
  display: block;
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
}
.window-rail-logo-link {
  display: flex;
  border-radius: var(--openbot-radius-logo);
  -webkit-app-region: no-drag;
}
.window-rail-logo-link:focus-visible {
  outline: 0;
  box-shadow: var(--openbot-focus-ring);
}
.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 {
  --openbot-icon-stroke: var(--openbot-icon-stroke-lg);
  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);
  inset-inline-end: 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);
}
.window-rail-button .window-rail-agent-usage-logo {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.window-rail-agent-usage {
  display: grid;
  padding-inline: var(--openbot-space-1);
  gap: var(--openbot-space-1);
}
.window-rail-agent-usage-text {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.window-rail-more-menu .window-rail-more-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--openbot-control-md);
  align-items: center;
  border-radius: var(--ui-menu-item-radius);
  transition: background-color var(--openbot-duration-hover) var(--openbot-ease-out);
}
.ui-action-menu.window-rail-more-menu .window-rail-more-row:is(:hover, :has([data-highlighted])) {
  background: var(--ui-menu-item-hover);
}
.ui-action-menu.window-rail-more-menu .window-rail-more-row :is([role="menuitem"], [role="menuitemcheckbox"]):is(:hover, :focus-visible, [data-highlighted]) {
  background: transparent;
}
.ui-action-menu.window-rail-more-menu .window-rail-more-pin[role="menuitemcheckbox"] {
  justify-content: center;
  padding: 0;
  opacity: 0;
}
.ui-action-menu.window-rail-more-menu .window-rail-more-row:is([data-pinned], :hover, :focus-within) .window-rail-more-pin {
  opacity: 1;
}
@media (hover: none) {
  .ui-action-menu.window-rail-more-menu .window-rail-more-pin[role="menuitemcheckbox"] {
    opacity: 1;
  }
}
.window-rail-more-menu .window-rail-more-row[data-pinned] .window-rail-more-pin > .agent-context-icon {
  color: var(--openbot-text-primary);
}
.ui-action-menu.window-rail-more-menu .window-rail-more-row:is(:hover, :has([data-highlighted])) > [role="menuitem"] > .agent-context-icon {
  color: var(--openbot-text-primary);
}
.app-window {
  --window-frame: var(--openbot-bg-frame);
  --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;
  }
  .app-frame .tasks-page-header > .side-panel-toggle {
    display: none;
  }
}
.app-window > :is(.web-app-frame, .app-frame:not(.app-frame-platform-darwin)):not(.app-frame-with-server-rail) > .sidebar:not(.sidebar-compact) .sidebar-topbar {
  padding-inline-start: var(--openbot-space-3);
}
@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, .web-app-frame) > .sidebar:not(.sidebar-compact) .sidebar-topbar {
    padding-inline-start: var(--openbot-space-6);
  }
  .app-window > .app-frame-edge {
    position: relative;
    isolation: isolate;
    padding-block: 0 calc(var(--window-edge) + 1px);
    padding-inline: 0 calc(var(--window-edge) + 1px);
    background: var(--window-frame);
  }
  .app-window > .app-frame-edge::before {
    position: absolute;
    z-index: -1;
    inset-block: calc(var(--left-header-height) - 1px) var(--window-edge);
    inset-inline: 0 var(--window-edge);
    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 {
    inset-inline-start: var(--server-rail-width);
  }
  .app-window > .app-frame-edge.app-frame-agent-dock {
    --agent-dock-column: calc(64px - var(--window-edge) - 1px);
    padding-inline-end: calc(var(--window-edge) + 1px + var(--agent-dock-column));
  }
  .app-window > .app-frame-edge.app-frame-agent-dock::before {
    inset-inline-end: calc(var(--window-edge) + var(--agent-dock-column));
  }
  .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 > .sidebar {
    --agent-avatar-outline: var(--openbot-bg-canvas);
  }
  .app-window > .app-frame-edge .channel-title {
    --agent-avatar-outline: var(--window-frame);
  }
  .app-window > .app-frame-edge :is(.conversation-panel, .direct-conversation)::before {
    content: none;
  }
  .app-window > .app-frame-edge > .sidebar::before {
    inset-block: var(--left-header-height) 0;
    inset-inline: auto 0;
    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)::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 {
    inset-inline-end: 0;
  }
  .app-window > .app-frame-edge :is(.settings-panel, .browser-panel) {
    border-inline-start: 0;
  }
  .app-window > .app-frame-edge :is(.settings-panel, .browser-panel)::before {
    inset-block: calc(var(--left-header-height) - 1px) 0;
    inset-inline: 0 auto;
    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) {
    position: relative;
  }
  .app-window > .app-frame-edge :is(.settings-panel, .browser-panel) > :is(.settings-panel-header, .file-preview-header)::before {
    inset-inline-start: 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)::before {
    content: none;
  }
  .app-window > .app-frame-edge .side-panel-maximized > :is(.settings-panel, .browser-panel) {
    border-end-end-radius: calc(var(--openbot-radius-card) - 1px);
    background: var(--openbot-bg-canvas);
  }
  .app-window > .app-frame-edge .diagram-view-body {
    border-top: 0;
    border-inline-end: 0;
    border-radius: 0;
    border-end-end-radius: calc(var(--openbot-radius-card) - 1px);
  }
  .app-window > .app-frame-edge .conversation-header-actions {
    gap: var(--openbot-space-2);
  }
  .app-window > .app-frame-edge :is(.conversation-header, .tasks-page-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 :is(.conversation-header, .tasks-page-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 :is(.conversation-header, .tasks-page-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-inline-start: calc(var(--openbot-space-2) + 1px);
    overflow: visible;
  }
  .app-window > .app-frame-edge .conversation-header-actions > .side-panel-toggle::before {
    position: absolute;
    top: 50%;
    inset-inline-start: 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) {
    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-inline-start: 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 .routine-planner-empty {
    min-height: 0;
    overflow-y: auto;
    grid-template-rows: minmax(0, 1fr);
  }
  .app-window > .app-frame-edge > .window-page :is(.routine-planner-empty-board, .routine-planner-empty-board > *) {
    min-height: 0;
    overflow: hidden;
  }
  .app-window > .app-frame-edge > .window-page .routine-planner-empty-board {
    grid-template-rows: minmax(0, 1fr);
  }
  @container (max-width: 920px) {
    .app-window > .app-frame-edge > .window-page .routine-planner-empty {
      grid-template-rows: none;
    }
  }
  .app-window > .app-frame-edge > .app-frame-panes .tasks-page {
    position: relative;
    box-sizing: border-box;
    padding-top: var(--left-header-height);
    background: transparent;
  }
  .app-window > .app-frame-edge > .app-frame-panes .tasks-page-header {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: var(--left-header-height);
    padding: 0 var(--openbot-space-3);
    -webkit-app-region: drag;
  }
  .app-window > .app-frame-edge > .app-frame-panes .tasks-page-header h2 {
    font-size: var(--openbot-text-md);
    font-weight: var(--openbot-weight-medium);
    white-space: nowrap;
  }
  .app-window > .app-frame-edge > .app-frame-panes .tasks-page-header > .ui-icon-button, .app-window > .app-frame-edge > .app-frame-panes .tasks-page-header > h2 > span {
    display: none;
  }
  .app-frame-edge > .app-frame-panes .tasks-page-header h2:focus {
    outline: none;
  }
  .app-window > .app-frame-edge > .app-frame-panes .tasks-page-column {
    padding-top: var(--openbot-space-6);
  }
  .app-window > .app-frame-edge > .app-frame-panes .tasks-page-side {
    border-end-end-radius: calc(var(--openbot-radius-card) - 1px);
  }
  .app-frame-edge.app-frame-sidebar-hidden > .sidebar > :not(.sidebar-topbar), .app-frame-edge.app-frame-sidebar-hidden > .left-panel-resizer {
    visibility: hidden;
  }
  .app-frame-edge.app-frame-sidebar-hidden > .sidebar .sidebar-new-button, .app-frame-edge.app-frame-sidebar-hidden > .sidebar::before {
    display: none;
  }
  .app-window > .app-frame-edge.app-frame-sidebar-hidden > .app-frame-panes {
    position: absolute;
    grid-row: 1 / -1;
    grid-column: -4 / -1;
    inset: 0;
    pointer-events: none;
  }
  .app-window > .app-frame-edge.app-frame-sidebar-hidden > .app-frame-panes .tasks-page-header {
    inset-inline-start: var(--left-panel-width);
  }
  .app-window > .app-frame-edge.app-frame-sidebar-hidden > .app-frame-panes :is(.tasks-page-scroll, .tasks-page-side) {
    pointer-events: auto;
  }
  .app-frame-edge:not([data-window-page-kind="agents"]) > .window-page {
    position: absolute;
    grid-row: 1 / -1;
    grid-column: 1 / -1;
    inset-block: 0;
    inset-inline: 1px 0;
  }
  .app-frame-edge[data-window-page-kind="settings"] > .window-page {
    pointer-events: none;
  }
  .app-frame-edge[data-window-page-kind="settings"] > .window-page > .settings-page {
    grid-template-rows: var(--left-header-height) minmax(0, 1fr);
  }
  .app-frame-edge[data-window-page-kind="settings"] > .window-page > .settings-page > .settings-page-nav {
    grid-row: 2;
  }
  .app-frame-edge[data-window-page-kind="settings"] > .window-page > .settings-page :is(.settings-page-nav, .settings-page-content, .settings-page-path) {
    pointer-events: auto;
    -webkit-app-region: no-drag;
  }
  .app-frame-edge[data-window-page-kind="settings"] > .window-page > .settings-page > .settings-page-path-row {
    padding: 0 var(--openbot-space-3);
    -webkit-app-region: drag;
  }
  .app-frame-edge[data-window-page-kind="settings"] > .window-page > .settings-page > .settings-page-path-row > .settings-page-path {
    width: auto;
    flex: 0 1 auto;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
  }
  .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 {
    inset-inline-start: 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-inline-start: 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, .routine-planner-empty, .routine-planner-error, .marketplace-heading, .marketplace-nav, .skills-marketplace-body ) {
    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-heading {
    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) > .ui-icon-button, .app-window > .app-frame-edge > .window-page :is(.agent-usage-identity, .routine-planner-identity) > h2 > span {
    display: none;
  }
  .app-frame-edge > .window-page :is(.agent-usage-identity, .routine-planner-identity) 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);
  grid-template-rows: auto minmax(0, 1fr);
}
.settings-page-path-row {
  display: flex;
  min-width: 0;
  grid-column: 2;
  grid-row: 1;
  align-items: center;
  padding: var(--openbot-space-4) 0 0;
}
.settings-page-path-row:empty {
  display: none;
}
.settings-page-path-row > .settings-page-path {
  width: 100%;
  max-width: 784px;
  margin-inline: auto;
  padding-inline: var(--openbot-space-8);
}
.settings-page-nav {
  display: flex;
  grid-row: 1 / -1;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  gap: var(--openbot-space-1);
  overflow: hidden;
  border-inline-end: 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);
}
@property --settings-page-fade-start {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --settings-page-fade-end {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@supports (animation-timeline: scroll()) {
  .settings-page-sections, .settings-page-results {
    --settings-page-fade-size: var(--openbot-space-6);
    mask-image: linear-gradient( to bottom, transparent, var(--openbot-text-primary) var(--settings-page-fade-start), var(--openbot-text-primary) calc(100% - var(--settings-page-fade-end)), transparent );
    animation: settings-page-fade-start linear both, settings-page-fade-end linear both;
    animation-timeline: scroll(self block), scroll(self block);
    animation-range: 0 var(--settings-page-fade-size), calc(100% - var(--settings-page-fade-size)) 100%;
  }
}
@keyframes settings-page-fade-start {
  from {
    --settings-page-fade-start: 0px;
  }
  to {
    --settings-page-fade-start: var(--settings-page-fade-size);
  }
}
@keyframes settings-page-fade-end {
  from {
    --settings-page-fade-end: var(--settings-page-fade-size);
  }
  to {
    --settings-page-fade-end: 0px;
  }
}
.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;
  margin-bottom: var(--openbot-space-2);
  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-footer {
  flex: none;
  margin-inline: calc(-1 * var(--openbot-space-3));
  --settings-page-switch-radius: calc(var(--openbot-radius-card) - var(--openbot-space-1));
  border-top: 1px solid var(--openbot-border);
  padding: var(--openbot-space-1);
}
.settings-page-footer:empty {
  display: none;
}
.settings-page-footer > .settings-page-switch {
  min-height: var(--openbot-control-xl);
  border-radius: var(--settings-page-switch-radius);
  padding-inline: var(--openbot-space-3) calc(var(--openbot-space-3) - var(--openbot-icon-md) / 3);
  font-size: var(--openbot-text-md);
  font-weight: inherit;
}
.settings-page-switch .server-menu-mark, .settings-page-switch-avatar {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.settings-page-switch-avatar {
  display: block;
  overflow: hidden;
  border-radius: var(--openbot-radius-pill);
}
.settings-page-switch-avatar > img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  outline: 1px solid var(--openbot-image-outline);
  outline-offset: -1px;
}
.settings-page-switch-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-page-switch-chevron {
  color: var(--openbot-text-muted);
}
.settings-page-switch-chevron:dir(rtl) {
  transform: scaleX(-1);
}
.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: start;
  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-inline-start: 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;
  grid-column: 2;
  grid-row: 2;
  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 .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 auto minmax(0, 1fr);
  }
  .settings-page-path-row {
    grid-column: 1;
    grid-row: 2;
  }
  .settings-page-path-row > .settings-page-path {
    padding-inline: var(--openbot-space-4);
  }
  .settings-page-content {
    grid-column: 1;
    grid-row: 3;
  }
  .settings-page-nav {
    grid-column: 1;
    grid-row: 1;
    border-inline-end: 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);
  }
}
.app-window > .app-frame.app-frame-chat-window {
  grid-template-columns: 0 0 minmax(0, 1fr);
}
.app-frame-chat-window > .left-panel-resizer {
  display: none;
}
.app-frame-chat-window.app-frame-platform-darwin .conversation-header {
  padding-inline-start: 76px;
}
.quit-shortcut-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--openbot-layer-tooltip);
  display: grid;
  place-items: center;
  background: var(--openbot-dialog-overlay);
  backdrop-filter: blur(var(--openbot-space-2));
  pointer-events: none;
  animation: quit-shortcut-in var(--openbot-duration-fast) var(--openbot-ease-out);
}
.quit-shortcut-hint {
  --agent-avatar-outline: var(--openbot-bg-surface-raised);
  display: flex;
  align-items: center;
  gap: var(--openbot-space-4);
  max-width: calc(100vw - 2 * var(--openbot-space-4));
  padding: var(--openbot-space-3) var(--openbot-space-8) var(--openbot-space-3) var(--openbot-space-3);
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface-raised);
  color: var(--openbot-text-primary);
}
.quit-shortcut-avatars {
  display: flex;
  flex: none;
  align-items: center;
}
.quit-shortcut-avatars .agent-avatar {
  --agent-avatar-optical-offset: -5px;
  width: 40px;
  height: 40px;
}
.quit-shortcut-avatars .agent-avatar + .agent-avatar {
  margin-inline-start: calc(-1 * var(--openbot-space-2));
}
.quit-shortcut-copy {
  display: grid;
  gap: var(--openbot-space-0-5);
  min-width: 0;
}
.quit-shortcut-agents {
  font-size: var(--openbot-text-xl);
  font-weight: 500;
  line-height: var(--openbot-leading-xl);
  text-wrap: balance;
}
.quit-shortcut-instruction {
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
  white-space: nowrap;
}
@keyframes quit-shortcut-in {
  from {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .quit-shortcut-backdrop {
    animation: none;
  }
}
.library-panel {
  display: grid;
  height: 100%;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr);
}
.library-panel > * {
  grid-row: 1;
  grid-column: 1;
  min-height: 0;
}
@media (min-width: 721px) {
  .app-frame-edge[data-window-page-kind="titled"] > .window-page > .library-panel {
    grid-template-rows: var(--left-header-height) minmax(0, 1fr);
  }
  .app-frame-edge[data-window-page-kind="titled"] > .window-page > .library-panel > * {
    grid-row: 2;
    pointer-events: auto;
  }
}
.library-panel-content[inert] {
  visibility: hidden;
}
.library-viewer {
  position: relative;
  overflow: hidden;
  border-end-start-radius: calc(var(--openbot-radius-card) - 1px);
  border-end-end-radius: calc(var(--openbot-radius-card) - 1px);
  outline: none;
}
.library-viewer .browser-panel {
  width: 100%;
  border-inline-start: 0;
}
.library-viewer :is(.browser-panel, .file-preview-header)::before {
  content: none;
}
.library-viewer .right-panel-resizer {
  display: none;
}
.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-inline-end: 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-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-qr-platform {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}
.settings-mobile-app-qr-logo {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}
.settings-mobile-qr {
  display: grid;
  justify-items: center;
  gap: var(--openbot-space-2);
}
.settings-mobile-qr .ui-qr-code {
  overflow: hidden;
  border-radius: var(--openbot-radius-md);
}
.settings-mobile-qr-code {
  animation: settings-mobile-qr-in var(--openbot-duration-overlay) var(--openbot-ease-out);
}
.settings-mobile-qr-slot {
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--openbot-space-2);
  border: 1px dashed var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
}
.settings-mobile-qr-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  min-height: 24px;
  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);
  font-weight: var(--openbot-weight-medium);
  white-space: nowrap;
}
.settings-mobile-qr-tag > svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  flex: 0 0 auto;
}
.settings-mobile-qr-tag[data-kind="signin"] {
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
}
.settings-mobile-qr-tag[data-kind="permanent"] {
  background: var(--openbot-warning-soft);
  color: var(--openbot-warning-text);
}
.settings-mobile-qr-tag[data-kind="success"] {
  background: var(--openbot-success-soft);
  color: var(--openbot-success-text);
}
.settings-mobile-qr-tag-time {
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
}
.settings-mobile-link-warning {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  color: var(--openbot-warning-text);
}
.settings-mobile-link-warning > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.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-phones {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--openbot-space-2);
}
.settings-mobile-phones-empty {
  grid-column: 1 / -1;
  display: grid;
  justify-items: center;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-8) var(--openbot-space-6);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  text-align: center;
}
.settings-mobile-phones-empty > .ui-button {
  margin-top: var(--openbot-space-2);
}
.settings-mobile-phones-empty-title, .settings-mobile-phone-name {
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-semibold);
}
.settings-mobile-phones-empty-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--openbot-space-1);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
}
.settings-mobile-phones-empty-icon > svg {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
}
.settings-mobile-phone-card {
  display: flex;
  align-items: flex-start;
  gap: var(--openbot-space-3);
  min-width: 0;
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
  transition: opacity var(--openbot-duration-overlay) var(--openbot-ease-out);
}
@starting-style {
  .settings-mobile-phone-card {
    opacity: 0;
  }
}
.settings-mobile-phone-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--openbot-radius-md);
  background: var(--openbot-bg-control-active);
  color: var(--openbot-text-secondary);
}
.settings-mobile-phone-icon[data-active] {
  background: var(--openbot-accent-soft);
  color: var(--openbot-accent-text);
}
.settings-mobile-phone-icon > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.settings-mobile-phone-copy {
  min-width: 0;
  display: grid;
  flex: 1;
  gap: var(--openbot-space-0-5);
}
.settings-mobile-phone-via {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  margin-top: var(--openbot-space-1);
  color: var(--openbot-text-dim);
  font-size: var(--openbot-text-sm);
}
.settings-mobile-phone-via > svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.settings-mobile-link-card-slot {
  display: grid;
  gap: var(--openbot-space-1);
}
.settings-mobile-link-card.ui-button {
  height: auto;
  justify-content: flex-start;
  border-style: dashed;
  font-weight: var(--openbot-weight-regular);
  text-align: start;
  white-space: normal;
}
.settings-mobile-link-card-hint {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.settings-mobile-link-card-actions {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
}
.settings-mobile-route-chip.ui-button > svg:last-child {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
  color: var(--openbot-text-dim);
}
.settings-mobile-route-popover.ui-popover-menu-surface {
  width: 340px;
  display: grid;
  gap: var(--openbot-space-1);
  padding: var(--openbot-space-3);
}
.settings-mobile-route-popover-title {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
}
.settings-mobile-route-popover-description {
  margin: 0 0 var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.settings-mobile-dialog.ui-dialog-content {
  width: min(460px, 100%);
  display: grid;
  overflow: hidden;
  outline: 0;
  background: var(--openbot-bg-sidebar);
}
.settings-mobile-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--openbot-space-4) 0;
  padding-inline: var(--openbot-space-6) var(--openbot-space-4);
}
.settings-mobile-dialog-title {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-xl);
  font-weight: var(--openbot-weight-semibold);
}
.settings-mobile-dialog-body {
  min-height: 300px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--openbot-space-4);
  padding: var(--openbot-space-4) var(--openbot-space-6) var(--openbot-space-6);
  text-align: center;
}
.settings-mobile-dialog-note {
  max-width: 320px;
}
.settings-mobile-dialog-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border-top: 1px solid var(--openbot-border);
}
.settings-mobile-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--openbot-space-2);
}
.settings-mobile-choices {
  width: 100%;
  display: grid;
  gap: var(--openbot-space-2);
}
.settings-mobile-choice.ui-button {
  height: auto;
  justify-content: flex-start;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3) var(--openbot-space-4);
  text-align: start;
  white-space: normal;
}
.settings-mobile-choice.ui-button > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  color: var(--openbot-text-secondary);
}
.settings-mobile-choice-text {
  display: grid;
  gap: var(--openbot-space-0-5);
}
.settings-mobile-choice-title {
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-semibold);
}
.settings-mobile-choice-hint {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
}
.settings-mobile-steps {
  display: grid;
  gap: var(--openbot-space-1-5);
  margin: 0;
  padding-inline-start: var(--openbot-space-4);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-align: start;
}
.settings-mobile-steps > li::marker {
  color: var(--openbot-text-dim);
  font-variant-numeric: tabular-nums;
}
.settings-mobile-link-intro, .settings-mobile-link-code {
  max-width: 340px;
  display: grid;
  justify-items: center;
  gap: var(--openbot-space-2);
}
.settings-mobile-link-intro > .ui-button, .settings-mobile-link-code > .settings-mobile-dialog-actions {
  margin-top: var(--openbot-space-2);
}
.settings-mobile-link-code > .settings-mobile-qr {
  margin-bottom: var(--openbot-space-2);
}
.settings-mobile-link-warning-title {
  color: inherit;
  font-weight: var(--openbot-weight-semibold);
}
.settings-mobile-enter {
  animation: settings-mobile-enter var(--openbot-duration-slow) var(--openbot-ease-out);
}
@keyframes settings-mobile-enter {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}
@keyframes settings-mobile-qr-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}
@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 (prefers-reduced-motion: reduce) {
  .settings-mobile-connect-qr-stage .ui-qr-code, .settings-mobile-phone-card {
    transition: none;
  }
  .settings-mobile-enter, .settings-mobile-qr-code, .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-route-choice {
  display: grid;
  gap: var(--openbot-space-2);
}
.settings-mobile-route-option {
  display: flex;
  min-width: 0;
}
.settings-mobile-route-card {
  display: flex;
  flex: 1;
  align-items: flex-start;
  gap: var(--openbot-space-3);
  min-width: 0;
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  box-shadow: inset 0 0 0 1px var(--openbot-border);
  cursor: pointer;
  transition-property: background-color, box-shadow;
  transition-duration: var(--openbot-duration-hover), var(--openbot-duration-normal);
  transition-timing-function: var(--openbot-ease-out);
}
.settings-mobile-route-card:hover {
  background: var(--openbot-bg-control-hover);
}
.settings-mobile-route-card[data-disabled] {
  cursor: default;
}
.settings-mobile-route-card[data-checked] {
  box-shadow: inset 0 0 0 1.5px var(--openbot-accent), 0 1px 3px var(--openbot-shadow-popover-ambient);
}
.settings-mobile-route-dot {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  margin-top: 1px;
  border-radius: var(--openbot-radius-pill);
  box-shadow: inset 0 0 0 1.5px var(--openbot-text-muted);
  transition: box-shadow var(--openbot-duration-normal) var(--openbot-ease-out);
}
.settings-mobile-route-dot::after {
  width: 8px;
  height: 8px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
  content: "";
  transform: scale(0);
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.settings-mobile-route-card[data-checked] .settings-mobile-route-dot {
  box-shadow: inset 0 0 0 1.5px var(--openbot-accent);
}
.settings-mobile-route-card[data-checked] .settings-mobile-route-dot::after {
  transform: scale(1);
}
.settings-mobile-route-option:has(:focus-visible) .settings-mobile-route-card {
  box-shadow: var(--openbot-focus-ring);
}
.settings-mobile-route-text {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  min-width: 0;
}
.settings-mobile-route-name {
  display: flex;
  flex-wrap: wrap;
  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-mobile-route-hint {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.hosted-sites-overview {
  display: grid;
  gap: var(--openbot-space-1);
}
.hosted-sites-usage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.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: start;
}
.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%;
  stroke-width: var(--openbot-icon-stroke-lg);
}
.integration-logo-tile > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.integration-logo-tile > .connector-brand-tile {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.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-page {
  display: grid;
  gap: var(--openbot-space-6);
}
.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-name {
  display: inline-flex;
  gap: var(--openbot-space-1-5);
  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-body:empty {
  display: none;
}
.integration-wizard-form {
  display: grid;
  gap: var(--openbot-space-4);
}
.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[data-wide] {
  width: min(720px, calc(100vw - var(--openbot-space-6) * 2));
}
:is(.integration-dialog-backdrop, .integration-wizard-dialog)[data-nested] {
  z-index: calc(var(--openbot-layer-dialog-host) + 2);
}
.integration-wizard-dialog h2 {
  margin: 0;
}
.integration-dialog-close {
  position: absolute;
  top: var(--openbot-space-3);
  inset-inline-end: 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);
}
.integration-card-body {
  display: grid;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-3) var(--openbot-space-4);
}
.integration-card-body :where(.ui-input) {
  font-size: var(--openbot-text-lg);
  line-height: var(--openbot-leading-lg);
}
.integration-card-note {
  padding: var(--openbot-space-3) var(--openbot-space-4);
}
.integration-card-note[data-tone="danger"] {
  color: var(--openbot-danger-text);
}
.integration-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);
}
.integration-effects li {
  display: flex;
  gap: var(--openbot-space-3);
  align-items: center;
  padding: var(--openbot-space-2);
}
.integration-effects li + li {
  border-top: 1px solid var(--openbot-border);
}
.integration-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);
}
.integration-effects .integration-effect-icon > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.integration-effects li[data-tone="danger"] .integration-effect-icon {
  background: var(--openbot-danger-soft);
  color: var(--openbot-danger-text);
}
.integration-effects li[data-tone="success"] .integration-effect-icon {
  background: var(--openbot-success-soft);
  color: var(--openbot-success);
}
.integration-confirm.ui-button-variant-destructive {
  color: var(--openbot-danger-text);
}
.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-border-focus);
  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-chevron:dir(rtl) {
  transform: scaleX(-1);
}
.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 {
  --integrations-agent-face-size: 32px;
  display: inline-block;
  flex: none;
  width: var(--integrations-agent-face-size);
  height: var(--integrations-agent-face-size);
}
.integrations-agent-face[data-size="sm"] {
  --integrations-agent-face-size: 24px;
}
.ui-item-group:has(.integrations-agent-face:not([data-size="sm"])) .ui-item-media > svg {
  margin-inline: calc((32px - var(--openbot-icon-lg)) / 2);
}
.integrations-agent-face > * {
  --agent-avatar-optical-offset: calc(var(--integrations-agent-face-size) * -0.14);
  width: 100%;
  height: 100%;
}
.provider-settings-stack {
  display: grid;
  gap: var(--openbot-space-6);
}
.provider-settings-select {
  width: 168px;
}
.provider-settings-select .ui-select-value, .provider-settings-select-option {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.provider-settings-logo-off {
  opacity: 0.44;
}
.provider-settings-stack .ui-item-description.provider-settings-warning {
  color: var(--openbot-warning-text);
}
.provider-settings-stack .ui-item-description.provider-settings-error {
  color: var(--openbot-danger-text);
}
.provider-settings-account.ui-item {
  align-items: flex-start;
}
.provider-settings-account .ui-item-content {
  gap: var(--openbot-space-1);
}
.provider-settings-account .provider-picker-account-rename {
  max-width: 280px;
}
.provider-settings-usage-badge {
  cursor: pointer;
  font: inherit;
  font-size: var(--openbot-text-sm);
  font-variant-numeric: tabular-nums;
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
}
.provider-settings-usage-badge:focus-visible {
  outline: 2px solid var(--openbot-focus-ring);
  outline-offset: 2px;
}
.provider-settings-progress {
  max-width: 320px;
}
.provider-settings-models.settings-modal-card {
  max-height: 360px;
  padding: 0;
  overflow-y: auto;
}
.provider-settings-models-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--openbot-space-1) 0;
  list-style: none;
}
.provider-settings-models-row {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  min-height: 32px;
  padding: 0 var(--openbot-space-3);
}
.provider-settings-models-row:hover {
  background: var(--openbot-bg-control-hover);
}
.provider-settings-models-name {
  display: flex;
  flex: 1;
  align-items: baseline;
  gap: var(--openbot-space-2);
  min-width: 0;
}
.provider-settings-models-name > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.provider-settings-models-name > :first-child {
  flex: none;
  max-width: 70%;
}
.provider-settings-models-id {
  min-width: 0;
  font-family: var(--openbot-font-mono);
}
.provider-settings-models-empty {
  display: block;
  padding: var(--openbot-space-3);
}
.provider-settings-models-error {
  color: var(--openbot-danger-text);
}
.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-search {
  position: relative;
  display: flex;
  align-items: center;
}
.github-connector-search > svg {
  position: absolute;
  inset-inline-start: 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-inline-start: calc(var(--openbot-space-3) * 2 + var(--openbot-icon-sm));
}
.github-connector-repository-list {
  display: grid;
  max-height: 260px;
  margin: 0 calc(var(--openbot-space-2) * -1);
  padding: 0;
  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;
}
.vault-secret-form {
  display: flex;
  align-items: flex-end;
  gap: var(--openbot-space-3);
}
.vault-secret-form > .ui-field {
  flex: 1;
  min-width: 0;
}
.vault-secret-actions {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
}
.bitwarden-connector-host-form {
  display: grid;
  gap: var(--openbot-space-3);
}
.bitwarden-connector-actions {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
}
.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);
}
.channel-stack {
  display: grid;
  gap: var(--openbot-space-0-5);
  justify-items: start;
}
.channel-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);
}
.channel-checklist li {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
}
.channel-checklist li[data-state="done"] {
  color: var(--openbot-text-secondary);
}
.channel-checklist li[data-state="done"] svg {
  color: var(--openbot-success);
}
.channel-checklist-dot {
  width: 14px;
  height: 14px;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-pill);
}
.channel-waiting {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
  justify-content: center;
}
.channel-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);
}
.channel-orchestrator-model {
  display: grid;
  gap: var(--openbot-space-1);
}
.discord-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;
}
.discord-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;
}
.discord-role-row:hover {
  background: var(--openbot-bg-control-hover);
}
.discord-role-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whatsapp-choice {
  display: grid;
  gap: var(--openbot-space-2);
}
.whatsapp-choice[data-layout="row"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.whatsapp-choice-option {
  display: flex;
  min-width: 0;
}
.whatsapp-choice-card {
  display: flex;
  flex: 1;
  align-items: flex-start;
  gap: var(--openbot-space-3);
  min-width: 0;
  padding: var(--openbot-space-2) var(--openbot-space-3);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  box-shadow: inset 0 0 0 1px var(--openbot-border);
  cursor: pointer;
  transition-property: background-color, box-shadow;
  transition-duration: var(--openbot-duration-hover), var(--openbot-duration-normal);
  transition-timing-function: var(--openbot-ease-out);
}
.whatsapp-choice-card:hover {
  background: var(--openbot-bg-control-hover);
}
.whatsapp-choice-card[data-disabled] {
  cursor: default;
}
.whatsapp-choice-card[data-checked] {
  box-shadow: inset 0 0 0 1.5px var(--openbot-accent);
}
.whatsapp-choice-option:has(:focus-visible) .whatsapp-choice-card {
  box-shadow: var(--openbot-focus-ring);
}
.whatsapp-choice-dot {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  margin-top: 1px;
  border-radius: var(--openbot-radius-pill);
  box-shadow: inset 0 0 0 1.5px var(--openbot-text-muted);
  transition: box-shadow var(--openbot-duration-normal) var(--openbot-ease-out);
}
.whatsapp-choice-dot::after {
  width: 8px;
  height: 8px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-accent);
  content: "";
  transform: scale(0);
  transition: transform var(--openbot-duration-normal) var(--openbot-ease-out);
}
.whatsapp-choice-card[data-checked] .whatsapp-choice-dot {
  box-shadow: inset 0 0 0 1.5px var(--openbot-accent);
}
.whatsapp-choice-card[data-checked] .whatsapp-choice-dot::after {
  transform: scale(1);
}
.whatsapp-choice-text {
  display: grid;
  gap: var(--openbot-space-0-5);
  min-width: 0;
}
.whatsapp-choice-name {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.whatsapp-choice-hint {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.whatsapp-link-qr {
  display: grid;
  gap: var(--openbot-space-3);
  justify-items: center;
}
.whatsapp-link-qr > .channel-checklist {
  justify-self: stretch;
}
.whatsapp-link-step-index {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.whatsapp-pairing-code {
  display: flex;
  gap: var(--openbot-space-3);
  align-items: center;
  justify-content: center;
  padding: var(--openbot-space-3);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-surface);
}
.whatsapp-pairing-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);
}
.whatsapp-groups {
  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;
}
.whatsapp-group-row {
  display: flex;
  gap: var(--openbot-space-2);
  align-items: center;
  justify-content: space-between;
  padding: var(--openbot-space-1) var(--openbot-space-2);
  border-radius: var(--openbot-radius-sm);
}
.whatsapp-group-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 {
  direction: ltr;
  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-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-bar-fill:dir(rtl) {
    transform-origin: right center;
  }
  .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-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;
  stroke-width: var(--openbot-icon-stroke);
  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: start;
}
.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;
}
:root[data-surface="computer-use-highlight"], :root[data-surface="computer-use-highlight"] body, :root[data-surface="computer-use-highlight"] #root {
  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: start;
}
.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-inline-start: 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);
  inset-inline-end: 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-publish-setting.ui-switch-field {
  padding: var(--openbot-space-3) var(--openbot-space-4);
}
.server-settings-publish-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: end;
  user-select: text;
}
.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-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%;
  inset-inline-start: 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-inline-start: 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: end;
}
.server-settings-desktop-hint {
  max-width: 220px;
  text-align: end;
}
.server-settings-desktop-status {
  margin-top: var(--openbot-space-1);
}
@media (max-width: 720px) {
  .server-settings-readonly-name {
    align-items: flex-start;
    flex-direction: column;
  }
  .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: start;
  }
  .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-inline-start: 52px;
    justify-items: start;
    text-align: start;
  }
}
@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-invites-empty {
  display: grid;
}
.server-invites-empty > * {
  grid-area: 1 / 1;
}
.server-invites-empty-board {
  min-height: calc(4 * 3.75rem);
  display: grid;
  align-content: start;
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
  mask-image: radial-gradient(ellipse 46% 72% at 50% 50%, var(--openbot-transparent) 58%, var(--openbot-text-primary) 100%), linear-gradient(var(--openbot-text-primary) 70%, var(--openbot-transparent));
  mask-composite: intersect;
}
.server-invites-empty-row {
  animation: server-invites-empty-land 560ms var(--openbot-ease-out) both;
}
.server-invites-empty-row > .ui-item {
  padding: var(--openbot-space-3) var(--openbot-space-4);
}
.server-invites-empty-row + .server-invites-empty-row {
  position: relative;
}
.server-invites-empty-row + .server-invites-empty-row::before {
  position: absolute;
  top: 0;
  right: var(--openbot-space-4);
  left: var(--openbot-space-4);
  height: 1px;
  background: var(--openbot-border);
  content: "";
}
.server-invites-empty-board[data-leaving] .server-invites-empty-row {
  animation: server-invites-empty-leave 700ms var(--openbot-ease-out) both;
}
@keyframes server-invites-empty-land {
  from {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(10px) scale(0.98);
  }
}
@keyframes server-invites-empty-leave {
  to {
    opacity: 0;
    filter: blur(3px);
    transform: translateY(-4px);
  }
}
.server-invites-empty-pitch {
  z-index: 1;
  width: 100%;
  max-width: 30rem;
  display: grid;
  place-self: center;
  justify-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-8) var(--openbot-space-6);
  text-align: center;
}
.server-invites-empty-title {
  display: grid;
  font-size: var(--openbot-text-3xl);
  font-weight: var(--openbot-weight-semibold);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.server-invites-empty-quiet {
  color: var(--openbot-text-muted);
}
.server-invites-empty-hand {
  display: inline-block;
  color: var(--openbot-accent-text);
  font-family: "Bradley Hand", "Noteworthy", "Segoe Print", cursive;
  line-height: 1;
  clip-path: inset(-0.4em 100% -0.4em -0.2em);
  animation: server-invites-empty-write 560ms linear 450ms forwards;
}
@keyframes server-invites-empty-write {
  to {
    clip-path: inset(-0.4em -0.2em -0.4em -0.2em);
  }
}
.server-invites-empty-action {
  width: 100%;
  max-width: 20rem;
  height: var(--openbot-control-lg);
  margin-top: var(--openbot-space-2);
}
@media (prefers-reduced-motion: reduce) {
  .server-invites-empty-row, .server-invites-empty-hand {
    animation: none;
    clip-path: none;
  }
}
.server-settings-timezone-pending {
  width: 200px;
  min-height: var(--openbot-control-sm);
}
.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;
  }
}
.custom-provider-dialog.company-sign-in-dialog {
  width: min(520px, 100%);
}
.company-sign-in-copy-row {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  margin-top: var(--openbot-space-2);
}
.company-sign-in-copy-row > .ui-input, .company-sign-in-copy-row > input {
  flex: 1;
  min-width: 0;
}
.company-sign-in-passed {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
}
.company-sign-in-passed svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-success);
}
.company-sign-in-secondary {
  display: flex;
  justify-content: center;
  gap: var(--openbot-space-2);
}
.skills-marketplace {
  --marketplace-inset: var(--openbot-space-6);
  display: grid;
  grid-template-columns: max(var(--left-panel-width, 280px), 220px) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: var(--openbot-text-primary);
}
.marketplace-menu {
  z-index: calc(var(--openbot-layer-dialog-host) + 1);
}
body[data-skills-marketplace] :is(.integration-dialog-backdrop, .integration-wizard-dialog):not([data-nested]) {
  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);
  grid-column: 1 / -1;
  min-height: 48px;
  padding-block: var(--openbot-space-2);
  padding-inline: var(--marketplace-inset) var(--openbot-space-2);
  border-bottom: 1px solid var(--openbot-border);
}
.marketplace-nav {
  display: flex;
  grid-row: 2;
  grid-column: 1;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  gap: var(--openbot-space-1);
  overflow-y: auto;
  padding: var(--openbot-space-4) var(--openbot-space-3) var(--openbot-space-3);
  border-inline-end: 1px solid var(--openbot-border);
}
.marketplace-nav-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);
}
.marketplace-nav-title:focus {
  outline: none;
}
.marketplace-nav-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.marketplace-nav-item {
  grid-template-columns: var(--openbot-icon-lg) minmax(0, 1fr) auto;
}
.ui-button.marketplace-nav-item {
  font: inherit;
  font-size: var(--openbot-text-md);
  white-space: normal;
}
.ui-button.marketplace-nav-item[aria-current] {
  font-weight: var(--openbot-weight-medium);
}
.marketplace-nav-item[aria-current="location"] {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
  font-weight: var(--openbot-weight-medium);
}
.marketplace-nav-item > svg:first-child {
  justify-self: center;
}
.marketplace-nav-count {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-regular);
  font-variant-numeric: tabular-nums;
}
.marketplace-nav-heading {
  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);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-sm);
}
.marketplace-nav-mark {
  display: grid;
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  place-items: center;
  overflow: hidden;
  border-radius: var(--openbot-radius-xs);
}
.marketplace-nav-mark > :is(svg, img) {
  width: 100%;
  height: 100%;
  stroke-width: var(--openbot-icon-stroke-lg);
}
.marketplace-nav-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.marketplace-nav-item > .marketplace-nav-warning {
  color: var(--openbot-warning-text);
}
.skills-marketplace-body {
  position: relative;
  grid-row: 2;
  grid-column: 2;
  overflow: auto;
  scrollbar-gutter: stable;
}
.marketplace-frame {
  padding: calc(var(--openbot-space-8) + var(--openbot-space-2)) var(--marketplace-inset) var(--openbot-space-8);
}
.marketplace-frame > * {
  width: min(100%, 880px);
  margin-inline: auto;
}
.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-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-3) var(--openbot-space-1);
  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-heading {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--openbot-space-1-5);
  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;
  margin-inline: calc(-1 * var(--openbot-space-2) - 1px) calc(-1 * var(--openbot-space-1));
  overflow: hidden;
  border-color: transparent;
  background: transparent;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.skills-marketplace .marketplace-crumb-parent:focus-visible {
  border-color: var(--openbot-border);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-primary);
}
@media (hover: hover) and (pointer: fine) {
  .skills-marketplace .marketplace-crumb-parent:hover:not(:disabled) {
    border-color: var(--openbot-border);
    background: var(--openbot-bg-control);
    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-crumb-separator:dir(rtl), .marketplace-skill-group-head .ui-button > svg[class~="lucide-chevron-right"]:dir(rtl) {
  transform: scaleX(-1);
}
.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-app-reason {
  white-space: normal;
}
.marketplace-command {
  overflow-wrap: anywhere;
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-sm);
}
.marketplace-browse {
  gap: var(--openbot-space-8);
}
.marketplace-browse-head {
  display: grid;
  gap: var(--openbot-space-6);
}
.marketplace-browse-copy {
  display: grid;
  gap: var(--openbot-space-1);
}
.marketplace-browse-copy > p {
  margin: 0;
}
.marketplace-browse-title {
  margin: 0;
  font-size: var(--openbot-text-3xl);
}
.marketplace-toolbar {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.marketplace-search {
  position: relative;
  flex: 1;
  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;
  stroke-width: var(--openbot-icon-stroke-lg);
}
.marketplace-skill-mark[data-kind="icon"] > img {
  width: 100%;
  height: 100%;
}
.marketplace-skill-mark[data-kind="none"] > * {
  width: 60%;
  height: 60%;
}
.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: var(--marketplace-done-icon, 14px);
  height: var(--marketplace-done-icon, 14px);
  color: var(--marketplace-done-mark, currentColor);
}
.marketplace-app-group {
  display: grid;
  gap: var(--openbot-space-3);
  padding-top: var(--openbot-space-4);
  border-top: 1px solid var(--openbot-border);
}
.marketplace-app-group-title {
  display: flex;
  align-items: baseline;
  gap: var(--openbot-space-2);
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-semibold);
}
.marketplace-app-group-count {
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-regular);
  font-variant-numeric: tabular-nums;
}
.marketplace-app-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  column-gap: var(--openbot-space-6);
  row-gap: var(--openbot-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.marketplace-app-row {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-2);
  border-radius: var(--openbot-radius-lg);
}
@media (hover: hover) and (pointer: fine) {
  .marketplace-app-row:hover {
    background: var(--openbot-bg-control-hover);
  }
  .marketplace-app-row:hover .marketplace-app-action[data-variant="secondary"]:not([data-disabled]) {
    background: var(--openbot-bg-control-active);
  }
}
.skills-marketplace .marketplace-app-row-hit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border-radius: inherit;
  background: transparent;
}
.skills-marketplace .marketplace-app-row-hit:hover:not(:disabled) {
  background: transparent;
}
.marketplace-app-row > .integration-logo-tile {
  --integration-tile: 40px;
  pointer-events: none;
}
.marketplace-app-row-copy {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: var(--openbot-space-0-5);
  pointer-events: none;
}
.marketplace-app-row-name {
  overflow: hidden;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-weight: var(--openbot-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.marketplace-app-row-tagline {
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.marketplace-app-row-status {
  position: relative;
  display: inline-flex;
  flex: none;
}
.marketplace-app-row-status > .marketplace-done {
  height: var(--openbot-control-md);
  gap: var(--openbot-space-1-5);
  padding-inline: var(--openbot-space-2);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  --marketplace-done-icon: var(--openbot-icon-md);
  --marketplace-done-mark: var(--openbot-success);
}
.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;
  font-size: var(--openbot-text-md);
}
.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-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-plush {
  display: block;
  width: 160px;
  aspect-ratio: 1;
  pointer-events: none;
  user-select: none;
}
.marketplace-empty-plush > img, .marketplace-empty-plush > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.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);
}
.marketplace-skill-attention {
  color: var(--openbot-text-secondary);
}
.marketplace-skill-row > .marketplace-skill-mark {
  pointer-events: none;
}
.marketplace-skill-row-actions {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.marketplace-skill-group-head {
  display: flex;
  min-height: var(--openbot-control-md);
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
}
.marketplace-skill-empty {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  border: 1px dashed var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  padding: var(--openbot-space-4);
}
:is(.marketplace-skill-picker-search, .marketplace-skill-page-search) > svg {
  width: var(--openbot-space-4);
  height: var(--openbot-space-4);
  flex: none;
}
.marketplace-skill-agents-trigger {
  gap: var(--openbot-space-1-5);
}
.marketplace-skill-stack {
  display: inline-flex;
}
.marketplace-skill-stack > :not(:first-child) {
  margin-inline-start: calc(var(--openbot-space-1) * -1);
}
.marketplace-skill-picker {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
  font-size: var(--openbot-text-md);
}
.marketplace-skill-picker-search {
  margin-block-end: var(--openbot-space-1);
}
.marketplace-skill-picker-list {
  --marketplace-skill-fade-top: 0px;
  --marketplace-skill-fade-bottom: 0px;
  display: flex;
  max-height: calc(var(--openbot-space-1) * 90);
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex-direction: column;
  list-style: none;
  scrollbar-width: none;
  mask-image: linear-gradient( to bottom, var(--openbot-transparent), var(--openbot-text-primary) var(--marketplace-skill-fade-top), var(--openbot-text-primary) calc(100% - var(--marketplace-skill-fade-bottom)), var(--openbot-transparent) );
}
.marketplace-skill-picker-list::-webkit-scrollbar {
  display: none;
}
.marketplace-skill-picker-list.scroll-fade-top {
  --marketplace-skill-fade-top: calc(var(--openbot-space-1) * 6);
}
.marketplace-skill-picker-list.scroll-fade-bottom {
  --marketplace-skill-fade-bottom: calc(var(--openbot-space-1) * 6);
}
.marketplace-skill-picker-list:has(label.marketplace-skill-picker-row) {
  user-select: none;
}
.marketplace-skill-picker-row {
  display: flex;
  width: 100%;
  min-height: calc(var(--openbot-space-1) * 9);
  align-items: center;
  justify-content: flex-start;
  gap: var(--openbot-space-2);
  border-radius: var(--openbot-radius-md);
  padding-inline: var(--openbot-space-2);
  cursor: pointer;
  font-weight: inherit;
  text-align: start;
}
label.marketplace-skill-picker-row:hover {
  background: var(--openbot-hover);
}
.marketplace-skill-picker-list[data-dragging] label.marketplace-skill-picker-row:hover {
  background: none;
}
.marketplace-skill-picker-row[aria-current="true"] {
  background: var(--openbot-bg-control-active);
}
.marketplace-skill-picker-all {
  border-block-end: 1px solid var(--openbot-border);
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}
.marketplace-skill-picker-name {
  min-width: 0;
  overflow: hidden;
  flex: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.marketplace-skill-picker-agent {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: var(--openbot-space-1);
}
.marketplace-skill-picker-agent: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) - var(--openbot-space-1))) minmax(var(--agent-role-badge-collapsed-width), 1fr);
}
.marketplace-skill-picker-none {
  padding: var(--openbot-space-2);
}
.marketplace-skill-dialog-head {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-3);
  margin-block: calc(var(--openbot-space-2) * -1) calc(var(--openbot-space-1) * -1);
}
.marketplace-skill-dialog-head h2 {
  min-width: 0;
  overflow: hidden;
  flex: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.integration-wizard-dialog.marketplace-skill-agents-dialog {
  overflow: hidden;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
}
.marketplace-skill-agents-dialog .integration-wizard-form {
  min-height: 0;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
}
.marketplace-skill-agents-dialog .integration-wizard-body {
  display: flex;
  min-height: 0;
  flex-direction: column;
}
.marketplace-skill-agents-dialog .marketplace-skill-picker {
  min-height: 0;
}
.marketplace-skill-agents-dialog .marketplace-skill-picker-list {
  min-height: 0;
  flex: 1 1 auto;
}
.marketplace-skill-agents-dialog .integration-wizard-foot > .ui-button {
  flex-shrink: 0;
}
.marketplace-skill-agents-dialog .integration-wizard-foot > .marketplace-skill-dialog-submit {
  min-width: 0;
  flex-shrink: 1;
}
.marketplace-skill-dialog-submit > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.marketplace-skill-page-search {
  width: calc(var(--openbot-space-1) * 56);
}
.marketplace-skill-name {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1);
  min-width: 0;
}
.marketplace-skill-verified {
  flex: none;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-text-secondary);
}
.marketplace-skill-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--openbot-space-4);
}
.marketplace-skill-source .ui-sliding-tabs-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  white-space: nowrap;
}
.marketplace-skill-group-page {
  display: grid;
  align-content: start;
  gap: var(--openbot-space-4);
}
.marketplace-skill-group-bar {
  position: sticky;
  z-index: 1;
  top: 0;
  padding-block: var(--openbot-space-3);
  border-bottom: 1px solid var(--openbot-border);
  background: var(--openbot-bg-canvas);
}
.marketplace-skill-group-list {
  display: grid;
  gap: var(--openbot-space-3);
}
.marketplace-skill-featured {
  display: grid;
  gap: var(--openbot-space-3);
}
.marketplace-skill-featured-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--openbot-space-3);
}
.marketplace-skill-feature {
  isolation: isolate;
  grid-template-rows: auto auto 1fr auto;
  padding: var(--openbot-space-3);
}
.marketplace-skill-feature > :not(.marketplace-hitarea, .marketplace-skill-feature-art) {
  padding-inline: var(--openbot-space-1);
}
.marketplace-skill-feature-art {
  position: relative;
  display: grid;
  place-items: center;
  height: calc(var(--openbot-space-1) * 24);
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--openbot-radius-xl);
}
.marketplace-skill-feature-art > :not(.skill-preview-gradient) {
  position: relative;
}
.marketplace-skill-feature .marketplace-skill-verified {
  display: inline-block;
  margin-inline-start: var(--openbot-space-1);
  vertical-align: text-bottom;
}
.marketplace-agent-feature {
  isolation: isolate;
  grid-template-rows: auto auto 1fr auto;
}
.marketplace-agent-feature .marketplace-card-head {
  justify-content: space-between;
}
.marketplace-agent-feature-copy {
  display: grid;
  gap: var(--openbot-space-0-5);
  min-width: 0;
}
.marketplace-agent-feature .marketplace-card-body {
  align-self: start;
  min-height: 2lh;
}
.marketplace-agent-feature .marketplace-skill-verified {
  display: inline-block;
  margin-inline-start: var(--openbot-space-1);
  vertical-align: text-bottom;
}
.marketplace-agent-by {
  flex: 0 100 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.marketplace-agent-row .marketplace-skill-name {
  align-items: baseline;
}
.marketplace-agent-row .marketplace-app-row-name {
  min-width: 0;
}
.marketplace-agent-row .marketplace-skill-verified {
  align-self: center;
}
.marketplace-agent-trust {
  display: flex;
  gap: var(--openbot-space-1-5);
  align-items: center;
}
.marketplace-agent-trust svg {
  flex: none;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
html:active-view-transition-type(marketplace-forward, marketplace-back, marketplace-tab, marketplace-swap) {
  --marketplace-skill-blur: calc(var(--openbot-space-0-5) * 1.5);
  --marketplace-skill-blur-small: var(--openbot-space-0-5);
}
html:active-view-transition-type(marketplace-forward, marketplace-back, marketplace-tab, marketplace-swap) .skills-marketplace-body {
  view-transition-name: marketplace-page;
}
html:active-view-transition-type(marketplace-forward, marketplace-back, marketplace-tab, marketplace-swap) .skills-marketplace .marketplace-heading {
  view-transition-name: marketplace-crumbs;
}
html:active-view-transition-type(marketplace-swap) .marketplace-skill-source {
  view-transition-name: marketplace-skill-source;
}
html:active-view-transition-type( marketplace-forward, marketplace-back, marketplace-tab, marketplace-swap )::view-transition-group(root), ::view-transition-group(marketplace-page), ::view-transition-group(marketplace-crumbs) {
  animation-duration: var(--openbot-duration-overlay);
  animation-timing-function: var(--openbot-ease-out);
}
html:active-view-transition-type(marketplace-forward)::view-transition-old(marketplace-page) {
  --marketplace-skill-to: calc(var(--openbot-space-2) * -1);
  animation: marketplace-skill-page-out var(--openbot-duration-normal) var(--openbot-ease-out) both;
}
html:active-view-transition-type(marketplace-forward)::view-transition-new(marketplace-page) {
  --marketplace-skill-from: var(--openbot-space-2);
  animation: marketplace-skill-page-in var(--openbot-duration-overlay) var(--openbot-ease-out) both;
}
html:active-view-transition-type(marketplace-back)::view-transition-old(marketplace-page) {
  --marketplace-skill-to: var(--openbot-space-2);
  animation: marketplace-skill-page-out var(--openbot-duration-normal) var(--openbot-ease-out) both;
}
html:active-view-transition-type(marketplace-back)::view-transition-new(marketplace-page) {
  --marketplace-skill-from: calc(var(--openbot-space-2) * -1);
  animation: marketplace-skill-page-in var(--openbot-duration-overlay) var(--openbot-ease-out) both;
}
html:dir(rtl):active-view-transition-type(marketplace-forward)::view-transition-old(marketplace-page) {
  --marketplace-skill-to: var(--openbot-space-2);
}
html:dir(rtl):active-view-transition-type(marketplace-forward)::view-transition-new(marketplace-page) {
  --marketplace-skill-from: calc(var(--openbot-space-2) * -1);
}
html:dir(rtl):active-view-transition-type(marketplace-back)::view-transition-old(marketplace-page) {
  --marketplace-skill-to: calc(var(--openbot-space-2) * -1);
}
html:dir(rtl):active-view-transition-type(marketplace-back)::view-transition-new(marketplace-page) {
  --marketplace-skill-from: var(--openbot-space-2);
}
html:active-view-transition-type(marketplace-tab)::view-transition-old(marketplace-page) {
  animation: marketplace-skill-blur-out var(--openbot-duration-normal) var(--openbot-ease-out) both;
}
html:active-view-transition-type(marketplace-tab)::view-transition-new(marketplace-page) {
  animation: marketplace-skill-rise-in var(--openbot-duration-overlay) var(--openbot-ease-out) both;
}
html:active-view-transition-type(marketplace-swap)::view-transition-old(marketplace-page) {
  animation: marketplace-skill-blur-out var(--openbot-duration-fast) var(--openbot-ease-out) both;
}
html:active-view-transition-type(marketplace-swap)::view-transition-new(marketplace-page) {
  animation: marketplace-skill-blur-in var(--openbot-duration-normal) var(--openbot-ease-out) both;
}
::view-transition-old(marketplace-skill-source) {
  animation: none;
  opacity: 0;
}
::view-transition-new(marketplace-skill-source) {
  animation: none;
}
html:active-view-transition-type(marketplace-group) [data-marketplace-shared] :is(.marketplace-app-group-title, .marketplace-browse-title) {
  view-transition-name: marketplace-group-title;
}
html:active-view-transition-type(marketplace-group) [data-marketplace-shared] .marketplace-app-row:nth-child(1) {
  view-transition-name: marketplace-group-row-1;
}
html:active-view-transition-type(marketplace-group) [data-marketplace-shared] .marketplace-app-row:nth-child(2) {
  view-transition-name: marketplace-group-row-2;
}
html:active-view-transition-type(marketplace-group) [data-marketplace-shared] .marketplace-app-row:nth-child(3) {
  view-transition-name: marketplace-group-row-3;
}
html:active-view-transition-type(marketplace-group) [data-marketplace-shared] .marketplace-app-row:nth-child(4) {
  view-transition-name: marketplace-group-row-4;
}
html:active-view-transition-type(marketplace-group) [data-marketplace-shared] .marketplace-app-row:nth-child(5) {
  view-transition-name: marketplace-group-row-5;
}
html:active-view-transition-type(marketplace-group) [data-marketplace-shared] .marketplace-app-row:nth-child(6) {
  view-transition-name: marketplace-group-row-6;
}
::view-transition-group(marketplace-group-title), ::view-transition-group(marketplace-group-row-1), ::view-transition-group(marketplace-group-row-2), ::view-transition-group(marketplace-group-row-3), ::view-transition-group(marketplace-group-row-4), ::view-transition-group(marketplace-group-row-5), ::view-transition-group(marketplace-group-row-6) {
  animation-duration: var(--openbot-duration-overlay);
  animation-timing-function: var(--openbot-ease-out);
}
::view-transition-old(marketplace-group-title), ::view-transition-new(marketplace-group-title) {
  width: auto;
  height: 100%;
}
::view-transition-old(marketplace-group-title) {
  animation: marketplace-skill-blur-out var(--openbot-duration-fast) var(--openbot-ease-out) both;
}
::view-transition-new(marketplace-group-title) {
  animation: marketplace-skill-blur-in var(--openbot-duration-normal) var(--openbot-ease-out) both;
}
::view-transition-old(marketplace-group-row-1), ::view-transition-old(marketplace-group-row-2), ::view-transition-old(marketplace-group-row-3), ::view-transition-old(marketplace-group-row-4), ::view-transition-old(marketplace-group-row-5), ::view-transition-old(marketplace-group-row-6) {
  animation: none;
}
::view-transition-new(marketplace-group-row-1), ::view-transition-new(marketplace-group-row-2), ::view-transition-new(marketplace-group-row-3), ::view-transition-new(marketplace-group-row-4), ::view-transition-new(marketplace-group-row-5), ::view-transition-new(marketplace-group-row-6) {
  animation: marketplace-skill-blur-in var(--openbot-duration-overlay) var(--openbot-ease-out) both;
}
::view-transition-old(marketplace-crumbs) {
  animation: marketplace-skill-blur-out var(--openbot-duration-fast) var(--openbot-ease-out) both;
}
::view-transition-new(marketplace-crumbs) {
  animation: marketplace-skill-blur-in var(--openbot-duration-normal) var(--openbot-ease-out) both;
}
@keyframes marketplace-skill-page-out {
  to {
    opacity: 0;
    transform: translateX(var(--marketplace-skill-to));
    filter: blur(var(--marketplace-skill-blur));
  }
}
@keyframes marketplace-skill-page-in {
  from {
    opacity: 0;
    transform: translateX(var(--marketplace-skill-from));
    filter: blur(var(--marketplace-skill-blur));
  }
}
@keyframes marketplace-skill-rise-in {
  from {
    opacity: 0;
    transform: translateY(var(--openbot-space-2));
    filter: blur(var(--marketplace-skill-blur));
  }
}
@keyframes marketplace-skill-blur-out {
  to {
    opacity: 0;
    filter: blur(var(--marketplace-skill-blur-small));
  }
}
@keyframes marketplace-skill-blur-in {
  from {
    opacity: 0;
    filter: blur(var(--marketplace-skill-blur-small));
  }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(marketplace-page), ::view-transition-group(marketplace-crumbs), ::view-transition-old(marketplace-page), ::view-transition-new(marketplace-page), ::view-transition-old(marketplace-crumbs), ::view-transition-new(marketplace-crumbs), ::view-transition-group(marketplace-group-title), ::view-transition-old(marketplace-group-title), ::view-transition-new(marketplace-group-title), ::view-transition-group(marketplace-group-row-1), ::view-transition-group(marketplace-group-row-2), ::view-transition-group(marketplace-group-row-3), ::view-transition-group(marketplace-group-row-4), ::view-transition-group(marketplace-group-row-5), ::view-transition-group(marketplace-group-row-6), ::view-transition-new(marketplace-group-row-1), ::view-transition-new(marketplace-group-row-2), ::view-transition-new(marketplace-group-row-3), ::view-transition-new(marketplace-group-row-4), ::view-transition-new(marketplace-group-row-5), ::view-transition-new(marketplace-group-row-6) {
    animation: none;
  }
}
@media (max-width: 720px) {
  .skills-marketplace {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
  }
  .marketplace-nav {
    grid-row: 2;
    overflow-x: auto;
    padding: var(--openbot-space-2) var(--openbot-space-3);
    border-inline-end: 0;
    border-bottom: 1px solid var(--openbot-border);
  }
  .marketplace-nav-title, .marketplace-nav-group {
    display: none;
  }
  .marketplace-nav-list {
    grid-auto-columns: max-content;
    grid-auto-flow: column;
  }
  .skills-marketplace-body {
    grid-row: 3;
    grid-column: 1;
  }
}
@media (max-width: 860px) {
  .skills-marketplace {
    --marketplace-inset: var(--openbot-space-4);
  }
  .marketplace-head {
    flex-wrap: wrap;
  }
}
.skills-marketplace .ui-button > svg, .marketplace-search > svg {
  width: 16px;
  height: 16px;
}
.marketplace-app-action[data-status="attention"] > svg {
  color: var(--openbot-warning-text);
}
:is(.marketplace-skill-agents-trigger, .marketplace-skill-picker-row) .agent-avatar > svg {
  width: 128%;
  height: 128%;
}
.marketplace-skill-source .ui-sliding-tabs-trigger svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: none;
}
.marketplace-agent-update-frame {
  border: 1px solid var(--openbot-border);
  border-radius: var(--openbot-radius-lg);
  background: var(--openbot-bg-control);
  overflow: hidden;
}
.ui-confirm-dialog-body .marketplace-agent-update-list {
  --marketplace-agent-update-fade-top: 0px;
  --marketplace-agent-update-fade-bottom: 0px;
  display: flex;
  max-height: calc(var(--openbot-space-8) * 7);
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  flex-direction: column;
  list-style: none;
  scrollbar-width: none;
  mask-image: linear-gradient( to bottom, var(--openbot-transparent), var(--openbot-text-primary) var(--marketplace-agent-update-fade-top), var(--openbot-text-primary) calc(100% - var(--marketplace-agent-update-fade-bottom)), var(--openbot-transparent) );
}
.marketplace-agent-update-list::-webkit-scrollbar {
  display: none;
}
.marketplace-agent-update-list.scroll-fade-top {
  --marketplace-agent-update-fade-top: calc(var(--openbot-space-1) * 6);
}
.marketplace-agent-update-list.scroll-fade-bottom {
  --marketplace-agent-update-fade-bottom: calc(var(--openbot-space-1) * 6);
}
.marketplace-agent-update-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-3);
  padding: var(--openbot-space-2) var(--openbot-space-3);
}
.marketplace-agent-update-row + .marketplace-agent-update-row {
  border-top: 1px solid var(--openbot-border);
}
.marketplace-agent-update-text {
  display: grid;
  min-width: 0;
}
.marketplace-agent-update-name {
  overflow: hidden;
  color: var(--openbot-text-secondary);
  font-weight: var(--openbot-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.marketplace-agent-update-state {
  color: var(--openbot-text-dim);
  font-size: var(--openbot-text-sm);
}
.marketplace-agent-update-row[data-replace] .marketplace-agent-update-state {
  color: var(--openbot-warning-text);
}
.marketplace-agent-update-choice {
  display: inline-flex;
  flex: none;
  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;
}
.marketplace-agent-update-option {
  display: grid;
}
.marketplace-agent-update-option-label {
  display: inline-flex;
  height: var(--openbot-control-sm);
  align-items: center;
  border-radius: var(--openbot-radius-sm);
  padding: 0 var(--openbot-space-3);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--openbot-duration-fast) ease, color var(--openbot-duration-fast) ease;
}
.marketplace-agent-update-option-label:hover, .marketplace-agent-update-option[data-checked] .marketplace-agent-update-option-label {
  color: var(--openbot-text-primary);
}
.marketplace-agent-update-option[data-checked] .marketplace-agent-update-option-label {
  background: var(--openbot-tabs-pill-bg);
}
.marketplace-agent-update-option:has(input:focus-visible) .marketplace-agent-update-option-label {
  box-shadow: var(--openbot-focus-ring);
}
.marketplace-agent-update-option[data-choice="replace"][data-checked] .marketplace-agent-update-option-label {
  color: var(--openbot-warning-text);
}
.marketplace-agent-update-others {
  margin: var(--openbot-space-2) 0 0;
  color: var(--openbot-text-dim);
  font-size: var(--openbot-text-sm);
}
.chat-color-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  margin-inline-start: auto;
  border-radius: var(--openbot-radius-pill);
  background: var(--chat-color-value);
  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) 18%, transparent);
  }
}
.chat-color-dot.chat-color-dot-open {
  outline: 1px solid var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    outline: 1px solid color-mix(in srgb, var(--openbot-text-primary) 40%, transparent);
  }
  outline-offset: 2px;
}
.chat-color-own-trigger .chat-color-dot {
  margin-inline: 0 var(--openbot-space-2);
}
.chat-color-own-trigger .ui-select-value {
  flex: 1 1 auto;
  text-align: start;
}
.chat-color-popover {
  --chat-color-shift: -6px;
  position: fixed;
  z-index: var(--openbot-layer-popover);
  padding: var(--openbot-space-3);
  border-radius: var(--ui-menu-radius);
  background: var(--ui-menu-bg);
  box-shadow: 0 0 0 1px var(--ui-menu-edge);
  color: var(--openbot-text-primary);
  animation: chat-color-popover-in var(--openbot-duration-normal) var(--openbot-ease-out) both;
}
@keyframes chat-color-popover-in {
  from {
    opacity: 0;
    transform: translateY(var(--chat-color-shift)) scale(0.96);
  }
}
.chat-color-picker, .chat-color-picker-presets {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}
.chat-color-picker {
  --chat-color-edge: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --chat-color-edge: color-mix(in srgb, var(--openbot-text-primary) 11%, transparent);
  }
  --chat-color-edge-hover: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --chat-color-edge-hover: color-mix(in srgb, var(--openbot-text-primary) 20%, transparent);
  }
  --chat-color-inset: inset 0 0 0 1px var(--openbot-color-picker-dark);
  @supports (color: color-mix(in lab, red, red)) {
    --chat-color-inset: inset 0 0 0 1px color-mix(in srgb, var(--openbot-color-picker-dark) 10%, transparent);
  }
  position: relative;
  display: grid;
  width: 264px;
  gap: var(--openbot-space-3);
}
.chat-color-picker-row {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
}
.chat-color-picker-area, .chat-color-picker-hue, .chat-color-picker-row.chat-color-picker-fields {
  direction: ltr;
}
.chat-color-picker-row.chat-color-picker-fields {
  gap: var(--openbot-space-1-5);
}
.chat-color-picker-area {
  position: relative;
  height: 160px;
  border-radius: var(--openbot-radius-lg);
  background: linear-gradient(to top, var(--openbot-color-picker-dark), transparent), linear-gradient(to right, var(--openbot-color-picker-light), var(--chat-color-pure));
  cursor: crosshair;
  touch-action: none;
}
.chat-color-picker-ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--chat-color-inset);
  pointer-events: none;
}
.chat-color-picker-track {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.chat-color-picker-thumb {
  position: absolute;
  border: 0;
  padding: 0;
  top: calc(var(--chat-color-y) * 1%);
  left: calc(var(--chat-color-x) * 1%);
  width: 18px;
  height: 18px;
  border-radius: var(--openbot-radius-pill);
  background: transparent;
  outline: 0;
  pointer-events: auto;
  translate: -50% -50%;
  transition: top var(--chat-color-layout-duration) var(--chat-color-layout-ease), left var(--chat-color-layout-duration) var(--chat-color-layout-ease);
}
.chat-color-picker-hue .chat-color-picker-thumb {
  top: 50%;
}
.chat-color-picker-dragging .chat-color-picker-thumb {
  transition: none;
}
.chat-color-picker-thumb:focus-visible {
  outline: 2px solid var(--openbot-text-primary);
  outline-offset: 2px;
}
.chat-color-picker-thumb-dot {
  position: absolute;
  inset: 0;
  border: 3px solid var(--openbot-color-picker-light);
  border-radius: inherit;
  background: var(--chat-color-value);
  box-shadow: 0 0 0 1px var(--openbot-color-picker-dark);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--openbot-color-picker-dark) 12%, transparent);
  }
  transition: scale var(--chat-color-press-duration) var(--chat-color-press-ease);
}
.chat-color-picker-dragging .chat-color-picker-thumb-dot {
  scale: 0.78;
}
.chat-color-picker-loupe {
  position: absolute;
  z-index: 1;
  bottom: calc(100% + 12px);
  left: 50%;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  transform: rotate(var(--chat-color-tilt));
  transform-origin: 50% 130%;
  transition: transform 220ms var(--openbot-ease-out);
  animation: chat-color-loupe-lift var(--chat-color-lift-duration) var(--chat-color-lift-ease) both;
}
.chat-color-picker-loupe-drop {
  position: absolute;
  inset: 0;
  border: 3px solid var(--openbot-color-picker-light);
  border-radius: var(--openbot-radius-pill) var(--openbot-radius-pill) var(--openbot-radius-pill) 0;
  background: var(--chat-color-value);
  box-shadow: 0 0 0 1px var(--openbot-color-picker-dark);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--openbot-color-picker-dark) 10%, transparent);
  }
  rotate: -45deg;
}
@keyframes chat-color-loupe-lift {
  from {
    opacity: 0;
    translate: 0 16px;
    scale: 0.3;
  }
}
.chat-color-picker-hue {
  position: relative;
  height: 14px;
  flex: 1 1 auto;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-color-picker-spectrum);
  cursor: pointer;
  touch-action: none;
}
.chat-color-picker-hue-rail {
  position: absolute;
  inset: 0 9px;
}
.chat-color-picker-icon-button, .chat-color-picker-format {
  display: inline-grid;
  height: var(--openbot-control-lg);
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--chat-color-edge);
  border-radius: var(--openbot-radius-md);
  outline: 0;
  background: transparent;
  padding: 0;
  color: var(--openbot-text-muted);
  transition: color var(--openbot-duration-hover) var(--openbot-ease-out), border-color var(--openbot-duration-hover) var(--openbot-ease-out), scale var(--chat-color-press-duration) var(--chat-color-press-ease);
}
.chat-color-picker-icon-button {
  width: var(--openbot-control-lg);
}
.chat-color-picker-format {
  width: 48px;
  overflow: hidden;
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
}
.chat-color-picker-icon-button:hover, .chat-color-picker-format:hover {
  color: var(--openbot-text-primary);
}
.chat-color-picker-icon-button:active {
  scale: 0.92;
}
.chat-color-picker-icon-button:focus-visible, .chat-color-picker-format:focus-visible {
  border-color: var(--chat-color-edge-hover);
  color: var(--openbot-text-primary);
}
.chat-color-picker-icon-button > svg {
  width: 16px;
  height: 16px;
}
.chat-color-picker-format-label {
  grid-area: 1 / 1;
  animation: chat-color-format-in var(--chat-color-press-duration) var(--chat-color-press-ease) both;
}
@keyframes chat-color-format-in {
  from {
    opacity: 0;
    translate: 0 10px;
  }
}
.chat-color-picker-hex {
  position: relative;
  min-width: 0;
  flex: 1 1 auto;
}
.chat-color-picker-hex-hash {
  position: absolute;
  top: 50%;
  left: var(--openbot-space-3);
  translate: 0 -50%;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-lg);
  pointer-events: none;
}
.chat-color-picker-field {
  width: 100%;
  height: var(--openbot-control-lg);
  min-width: 0;
  border: 1px solid var(--chat-color-edge);
  border-radius: var(--openbot-radius-md);
  outline: 0;
  background: transparent;
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-lg);
  font-variant-numeric: tabular-nums;
  transition: border-color var(--openbot-duration-hover) var(--openbot-ease-out);
}
.chat-color-picker-field:focus-visible {
  border-color: var(--chat-color-edge-hover);
}
.chat-color-picker-field.chat-color-picker-hex-input {
  padding: 0 var(--openbot-space-3) 0 var(--openbot-space-6);
  font-family: var(--openbot-font-mono);
  text-transform: uppercase;
}
.chat-color-picker-field.chat-color-picker-hex-input::placeholder {
  color: var(--openbot-text-placeholder);
  text-transform: none;
}
.chat-color-picker-channels {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  gap: var(--openbot-space-1-5);
}
.chat-color-picker-channel {
  position: relative;
  min-width: 0;
  flex: 1 1 0;
}
.chat-color-picker-field.chat-color-picker-channel-input {
  padding: 0 var(--openbot-space-2) 0 var(--openbot-space-6);
}
.chat-color-picker-channel-label {
  position: absolute;
  top: 50%;
  left: var(--openbot-space-3);
  translate: 0 -50%;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
  font-weight: var(--openbot-weight-medium);
  pointer-events: none;
}
.chat-color-picker-swatch {
  width: var(--openbot-control-lg);
  height: var(--openbot-control-lg);
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-md);
  background: var(--chat-color-value);
  box-shadow: var(--chat-color-inset);
  transition: background-color 150ms var(--openbot-ease-out);
}
.chat-color-picker-presets {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 24px);
  justify-content: space-between;
  row-gap: var(--openbot-space-2);
  padding: var(--openbot-space-1) var(--openbot-space-0-5) 0;
}
.chat-color-picker-preset {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border: 0;
  border-radius: var(--openbot-radius-pill);
  outline: 0;
  background: var(--chat-color-value);
  box-shadow: var(--chat-color-inset);
  padding: 0;
  cursor: pointer;
  transition: scale var(--chat-color-press-duration) var(--chat-color-press-ease);
}
.chat-color-picker-preset:active {
  scale: 0.88;
}
.chat-color-picker-preset:focus-visible {
  outline: 2px solid var(--openbot-text-primary);
  outline-offset: 3px;
}
.chat-color-picker-preset-ring {
  position: absolute;
  top: -3px;
  left: -3px;
  width: 30px;
  height: 30px;
  border: 2px solid var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    border: 2px solid color-mix(in srgb, var(--openbot-text-primary) 70%, transparent);
  }
  border-radius: var(--openbot-radius-pill);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--openbot-duration-fast) var(--openbot-ease-out);
}
.chat-color-picker-preset-ring[data-visible="true"] {
  opacity: 1;
}
.chat-color-dot.chat-color-none, .chat-color-picker-swatch.chat-color-none, .chat-color-picker-preset.chat-color-none {
  background: linear-gradient( to top right, transparent calc(50% - 1px), var(--openbot-text-muted) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px) ), var(--openbot-bg-control);
  box-shadow: inset 0 0 0 1px var(--chat-color-edge, var(--ui-menu-edge));
}
@media (prefers-reduced-motion: reduce) {
  .chat-color-picker .chat-color-picker-loupe, .chat-color-picker .chat-color-picker-format-label {
    animation: none;
  }
  .chat-color-popover {
    animation-name: ui-select-content-fade-in;
  }
  .chat-color-picker .chat-color-picker-thumb, .chat-color-picker .chat-color-picker-thumb-dot, .chat-color-picker .chat-color-picker-preset, .chat-color-picker .chat-color-picker-preset-ring, .chat-color-picker .chat-color-picker-icon-button, .chat-color-picker .chat-color-picker-format {
    transition: none;
  }
}
.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);
}
.ui-select-item-label:has(.sound-choice-item) {
  flex: 1;
}
.sound-choice-item {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.sound-choice-item-play {
  flex: none;
}
.sound-choice-item-name {
  overflow: hidden;
  text-overflow: ellipsis;
}
.notification-scope-title {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.notification-matrix {
  display: grid;
  gap: var(--openbot-space-3);
}
.notification-matrix-server-mark {
  --server-gradient-logo-size: 32px;
  --server-gradient-logo-radius: var(--openbot-radius-md);
}
.notification-matrix-server-mark > img {
  width: 32px;
  height: 32px;
  border-radius: var(--openbot-radius-md);
}
.notification-matrix-agent > .ui-item-media {
  width: 32px;
  justify-content: center;
}
.notification-matrix-level {
  min-width: 72px;
}
.notification-matrix-add {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--openbot-space-4);
  padding: var(--openbot-space-3) var(--openbot-space-4);
  border: 0;
  background: transparent;
  color: var(--openbot-text-muted);
  font: inherit;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  line-height: var(--openbot-leading-md);
  text-align: start;
  cursor: pointer;
}
.notification-matrix-add:hover, .notification-matrix-add[data-expanded] {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
}
.notification-matrix-add:focus-visible {
  outline: 1px solid var(--openbot-border-strong);
  outline-offset: -1px;
}
.notification-matrix-add-icon {
  display: inline-flex;
  width: 32px;
  height: 32px;
  flex: none;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--openbot-border-strong);
  border-radius: var(--openbot-radius-md);
}
.notification-matrix-add-icon > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.ui-item-description.notification-matrix-notes {
  white-space: normal;
}
.plan-start-popover {
  display: grid;
  width: 260px;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-3);
}
.plan-start-popover-title, .plan-start-popover-note {
  margin: 0;
}
.plan-start-popover-title {
  color: var(--openbot-text-primary);
  font-size: var(--openbot-text-md);
  font-weight: 500;
}
.plan-start-popover-controls {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.plan-start-amount {
  width: 56px;
  text-align: end;
}
.plan-start-popover-note {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
}
.plan-start-popover-note[data-invalid] {
  color: var(--openbot-danger);
}
.plan-start-popover-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--openbot-space-2);
}
.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-inline-end: 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-inline-start: 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-docs {
  position: absolute;
  top: var(--openbot-space-3);
  inset-inline-end: 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-docs > svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
  stroke-width: var(--openbot-icon-stroke);
}
.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);
}
.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-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);
}
:is(.integration-wizard-body, .provider-code-login-body) > :is(.mcp-sign-in-relay-open, .mcp-sign-in-relay-form) {
  margin-top: 0;
}
.integration-wizard-body > .mcp-sign-in-relay-open {
  justify-self: start;
}
.mcp-sign-in-relay-row {
  display: flex;
  gap: var(--openbot-space-2);
}
.mcp-sign-in-relay-row > .ui-input {
  flex: 1;
  min-width: 0;
}
.provider-update-toast-logo {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  overflow: visible;
  fill: var(--openbot-provider-current);
}
.ui-toaster [data-sonner-toast] [data-action]:has(.provider-update-toast-action[data-idle="true"]) {
  display: none;
}
.ui-toaster .provider-update-toast[data-sonner-toast][data-styled="true"]:has(.provider-update-toast-action[data-idle="true"]) {
  padding-bottom: var(--openbot-space-3);
}
.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);
}
.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-mark > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.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-row-inputs.custom-provider-row-triple {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.6fr) auto;
}
.custom-provider-row-inputs.custom-provider-row-quad {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(9ch, 0.8fr) minmax(9ch, 0.8fr) auto;
}
.custom-provider-efforts {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--openbot-space-1) var(--openbot-space-2);
}
.custom-provider-effort {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-1);
  cursor: pointer;
}
.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-provider-preset-chevron:dir(rtl), .custom-provider-header .ui-icon-button > svg[class~="lucide-arrow-left"]:dir(rtl) {
  transform: scaleX(-1);
}
.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;
}
.custom-provider-harness {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.custom-provider-harness-item .ui-select-item-label {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--openbot-space-3);
}
.custom-provider-harness-item[data-action]:not([data-selected]) {
  padding-inline-end: var(--openbot-space-1-5);
}
.custom-provider-harness-action {
  margin-inline-start: auto;
}
.custom-provider-harness-button {
  gap: var(--openbot-space-1);
  font-size: inherit;
  pointer-events: none;
}
.custom-provider-harness-item .custom-provider-harness-button svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.custom-provider-harness-value {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--openbot-space-3);
}
.custom-provider-harness-progress {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-1-5);
  margin-inline-start: auto;
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.browser-profiles-panel {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-3);
}
.browser-profiles-row {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: var(--openbot-space-2);
}
.browser-profiles-name {
  min-width: 0;
  flex: 1;
}
.ui-select-item.browser-profile-select-new {
  margin-top: calc(var(--openbot-space-1) * 2 + 1px);
}
.ui-select-item.browser-profile-select-new::before {
  position: absolute;
  top: calc(-1 * var(--openbot-space-1) - 1px);
  right: calc(-1 * var(--openbot-space-1));
  left: calc(-1 * var(--openbot-space-1));
  border-top: 1px solid var(--openbot-border);
  content: "";
}
.ui-select-item.browser-profile-select-new[hidden] {
  display: none;
}
.browser-profile-select-option .ui-select-item-label, .browser-profile-select-value {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-2);
}
.browser-profile-select-proxy {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: var(--openbot-space-1);
  color: var(--openbot-text-muted);
}
.browser-profile-select-proxy svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  flex: 0 0 auto;
}
.browser-profile-select-proxy span {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser-profile-select-mark {
  display: inline-flex;
  width: var(--openbot-icon-sm);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}
.browser-profile-select-mark svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.browser-profile-shared-mark {
  display: inline-flex;
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  align-items: center;
  justify-content: center;
}
.browser-profile-color-trigger .browser-profile-dot {
  width: 12px;
  height: 12px;
}
.browser-profile-color-option {
  gap: var(--openbot-space-2);
}
.browser-profile-color-option > span:not(.browser-profile-dot) {
  flex: 1 1 auto;
}
.browser-profile-select-form {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-1);
}
.browser-profile-select-form .browser-profiles-name {
  font-size: var(--openbot-text-sm);
}
.browser-profile-select-form .ui-text {
  padding-inline: var(--openbot-space-2);
}
.browser-profiles-panel:has(> .ui-settings-section) {
  gap: var(--openbot-space-6);
}
.browser-profiles-panel > .ui-settings-section {
  display: flex;
  flex-direction: column;
  gap: var(--openbot-space-3);
}
.browser-profiles-panel > .ui-settings-section .browser-profiles-row {
  flex: none;
}
.browser-proxy-badge svg {
  width: var(--openbot-icon-xs);
  height: var(--openbot-icon-xs);
}
.browser-proxy-icon {
  display: inline-flex;
  width: var(--openbot-control-md);
  height: var(--openbot-control-md);
  align-items: center;
  justify-content: center;
  color: var(--openbot-text-muted);
}
.browser-proxy-icon svg {
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
}
.browser-proxy-submenu-chevron {
  margin-inline-start: auto;
  color: var(--openbot-text-muted);
}
.vault-panel {
  display: grid;
  gap: var(--openbot-space-6);
  min-width: 0;
}
.vault-truncate, .ui-item-content > .vault-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vault-icon {
  display: inline-grid;
  flex: none;
  place-items: center;
}
.vault-icon svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.vault-letter {
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-semibold);
}
.vault-card-logo {
  display: inline-grid;
  flex: none;
  width: var(--integration-tile, 36px);
  height: calc(var(--integration-tile, 36px) * 2 / 3);
  place-items: center;
  border: 1px solid var(--openbot-paper-border);
  border-radius: var(--openbot-radius-xs);
  background: var(--openbot-paper);
  color: var(--openbot-paper-text);
}
.vault-card-logo > svg {
  width: 70%;
  height: 70%;
}
.vault-avatar {
  display: inline-grid;
  flex: none;
  width: var(--integration-tile, 36px);
  height: var(--integration-tile, 36px);
  place-items: center;
  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);
}
.vault-avatar > svg {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.vault-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-3);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--openbot-space-1);
}
.vault-count {
  margin-inline-start: var(--openbot-space-1-5);
  color: var(--openbot-text-muted);
  font-variant-numeric: tabular-nums;
}
.vault-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--openbot-space-3) var(--openbot-space-4);
}
.vault-wide {
  grid-column: 1 / -1;
}
.vault-fill-sites {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}
.vault-fill-sites > .ui-label {
  margin-block-end: var(--openbot-space-1-5);
  padding: 0;
}
.vault-sites {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.vault-site {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openbot-space-2);
  min-width: 0;
}
.vault-secret {
  position: relative;
  display: flex;
  align-items: center;
}
.vault-secret .ui-input {
  flex: 1;
  padding-inline-end: var(--openbot-space-8);
}
.vault-secret .ui-icon-button {
  position: absolute;
  inset-inline-end: var(--openbot-space-1);
}
.vault-toolbar .server-settings-search {
  align-self: stretch;
}
.vault-toolbar .server-settings-search .ui-input {
  height: 100%;
  border-color: var(--openbot-transparent);
  font-size: var(--openbot-text-md);
}
.vault-toolbar .server-settings-search .ui-input:focus-visible {
  border-color: var(--openbot-border-focus);
}
.vault-dialog.ui-confirm-dialog {
  width: min(520px, 100%);
}
.vault-dialog-form {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.vault-dialog-header {
  display: flex;
  gap: var(--openbot-space-3);
  align-items: center;
  padding-block: var(--openbot-space-4) 0;
  padding-inline: var(--openbot-space-6) var(--openbot-space-4);
}
.vault-dialog-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: var(--openbot-text-md);
  font-weight: var(--openbot-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vault-dialog-body {
  display: grid;
  gap: var(--openbot-space-3);
  min-height: 0;
  overflow-y: auto;
  padding: var(--openbot-space-4) var(--openbot-space-6) var(--openbot-space-6);
}
.vault-link-accounts {
  display: grid;
  gap: var(--openbot-space-2);
  margin-bottom: var(--openbot-space-3);
}
.vault-group-label {
  padding: 0 var(--openbot-space-3);
}
.vault-link-logo > svg {
  width: 92%;
  height: 92%;
}
.ui-item-content > .vault-link-error {
  color: var(--openbot-danger-text);
}
.vault-request {
  max-width: 520px;
}
.vault-request-logo {
  display: flex;
  flex: none;
}
.vault-two-step-digits {
  font-family: var(--openbot-font-mono);
  font-size: var(--openbot-text-lg);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--openbot-text-primary);
}
.vault-two-step-timer.ui-radial-progress {
  width: var(--openbot-icon-md);
}
.vault-two-step-code {
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-2);
}
.vault-two-step-code[data-size="lg"] {
  gap: var(--openbot-space-3);
  justify-content: center;
  padding: var(--openbot-space-4) 0;
}
.vault-two-step-code[data-size="lg"] .vault-two-step-digits {
  font-size: var(--openbot-text-3xl);
}
.vault-two-step-code[data-size="lg"] .vault-two-step-timer.ui-radial-progress {
  width: var(--openbot-icon-lg, 20px);
}
.vault-two-step-row-code {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--openbot-space-2);
  height: auto;
  border-radius: var(--openbot-radius-sm);
  padding: var(--openbot-space-1) var(--openbot-space-2);
  color: inherit;
}
.vault-two-step-setup {
  display: grid;
  gap: var(--openbot-space-3);
}
.vault-two-step-or {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-3);
  color: var(--openbot-text-muted);
  font-size: var(--openbot-text-sm);
}
.vault-two-step-or::before, .vault-two-step-or::after {
  flex: 1;
  height: 1px;
  background: var(--openbot-border);
  content: "";
}
.vault-two-step-check {
  text-align: center;
}
.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-template-row > svg[class~="lucide-chevron-right"]:dir(rtl), .agent-template-skill-toggle > svg[class~="lucide-chevron-right"]:dir(rtl), .agent-template-detail-header .ui-icon-button > svg[class~="lucide-arrow-left"]:dir(rtl) {
  transform: scaleX(-1);
}
.agent-delete-undo-toast-host {
  width: var(--width);
}
.agent-delete-undo-toast {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--openbot-space-3);
  overflow: hidden;
  padding: var(--openbot-space-3) var(--openbot-space-4) var(--openbot-space-2);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-surface-raised);
  box-shadow: 0 0 0 1px var(--openbot-border);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
}
.agent-delete-undo-toast-actions {
  grid-column: 1 / -1;
}
.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;
}
.github-star-toast-host {
  width: var(--width);
}
.github-star-toast {
  position: relative;
  display: grid;
  gap: var(--openbot-space-2);
  padding: var(--openbot-space-4);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-surface-raised);
  box-shadow: 0 0 0 1px var(--openbot-border);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
}
.github-star-toast:has(.github-star-toast-actions) {
  padding-bottom: var(--openbot-space-2);
}
.github-star-toast-head {
  display: flex;
  align-items: center;
  gap: var(--openbot-space-2);
  padding-inline-end: var(--openbot-space-1);
}
.github-star-toast-head > strong {
  font-weight: var(--openbot-weight-semibold);
  text-wrap: balance;
}
.github-star-toast-mark {
  width: var(--openbot-icon-lg);
  height: var(--openbot-icon-lg);
  flex: none;
}
.github-star-toast-star {
  color: var(--openbot-star-edge);
  fill: var(--openbot-star);
}
.github-star-toast-body {
  margin: 0;
  padding-inline-start: calc(var(--openbot-icon-lg) + var(--openbot-space-2));
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-wrap: pretty;
}
.github-star-toast-actions {
  margin-top: var(--openbot-space-1);
}
.social-follow-toast-host {
  width: var(--width);
}
.social-follow-toast {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: var(--openbot-space-3);
  padding: var(--openbot-space-4);
  border-radius: var(--openbot-radius-card);
  background: var(--openbot-bg-surface-raised);
  box-shadow: 0 0 0 1px var(--openbot-border);
  color: var(--openbot-text-primary);
  font-family: var(--openbot-font-sans);
}
.social-follow-toast-plush {
  position: relative;
  display: inline-flex;
  animation: social-follow-plush-hop 560ms var(--openbot-ease-out) 120ms both;
}
.social-follow-plush {
  --ui-plush-size: 56px;
  display: inline-flex;
  flex: none;
  transition: rotate var(--openbot-duration-normal) var(--openbot-ease-out), translate var(--openbot-duration-normal) var(--openbot-ease-out);
}
.social-follow-toast-plush[data-face="wide"] .social-follow-plush {
  rotate: 6deg;
  translate: 2px -2px;
}
.social-follow-toast-plush[data-face="happy"] .social-follow-plush {
  animation: social-follow-plush-bounce 520ms var(--openbot-ease-out);
}
.social-follow-toast-main {
  display: grid;
  gap: var(--openbot-space-3);
  min-width: 0;
}
.social-follow-toast-copy {
  display: grid;
  gap: var(--openbot-space-0-5);
  padding-inline-end: var(--openbot-space-1);
}
.social-follow-toast-copy strong {
  font-size: var(--openbot-text-md);
  line-height: var(--openbot-leading-md);
  font-weight: var(--openbot-weight-semibold);
  text-wrap: balance;
}
.social-follow-toast-copy p {
  margin: 0;
  color: var(--openbot-text-secondary);
  font-size: var(--openbot-text-sm);
  line-height: var(--openbot-leading-sm);
  text-wrap: pretty;
}
.social-follow-toast-copy[data-thanks] {
  animation: social-follow-rise var(--openbot-duration-overlay) var(--openbot-ease-out) both;
}
.social-follow-networks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--openbot-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.social-follow-networks li {
  animation: social-follow-rise var(--openbot-duration-overlay) var(--openbot-ease-out) both;
}
.social-follow-networks li:nth-child(1) {
  animation-delay: 160ms;
}
.social-follow-networks li:nth-child(2) {
  animation-delay: 190ms;
}
.social-follow-networks li:nth-child(3) {
  animation-delay: 220ms;
}
.social-follow-networks li:nth-child(4) {
  animation-delay: 250ms;
}
.social-follow-networks li:nth-child(5) {
  animation-delay: 280ms;
}
.social-follow-networks li:nth-child(6) {
  animation-delay: 310ms;
}
.social-follow-networks li:nth-child(7) {
  animation-delay: 340ms;
}
.social-follow-toast .social-follow-toast-follow {
  justify-content: flex-start;
  margin-inline-end: 0;
  animation: social-follow-rise var(--openbot-duration-overlay) var(--openbot-ease-out) 120ms both;
}
.social-follow-toast .social-follow-network {
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-control);
  color: var(--openbot-text-secondary);
  transition: background var(--openbot-duration-fast) var(--openbot-ease-out), color var(--openbot-duration-fast) var(--openbot-ease-out), translate var(--openbot-duration-normal) var(--openbot-ease-out), scale var(--openbot-duration-fast) var(--openbot-ease-out);
}
.social-follow-toast .social-follow-network:hover {
  background: var(--openbot-bg-control-hover);
  color: var(--openbot-text-primary);
  translate: 0 -2px;
}
.social-follow-toast .social-follow-network:active {
  scale: 0.92;
}
.social-follow-mark {
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
  flex: none;
}
.social-follow-hearts {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.social-follow-heart {
  position: absolute;
  fill: currentColor;
  top: 0;
  left: 50%;
  width: var(--openbot-icon-sm);
  height: var(--openbot-icon-sm);
  color: var(--openbot-beam-pink);
  opacity: 0;
  animation: social-follow-heart 1100ms var(--openbot-ease-out) forwards;
}
.social-follow-heart[data-index="0"] {
  --social-follow-heart-x: -18px;
  animation-delay: 80ms;
}
.social-follow-heart[data-index="1"] {
  --social-follow-heart-x: 2px;
  width: var(--openbot-icon-md);
  height: var(--openbot-icon-md);
}
.social-follow-heart[data-index="2"] {
  --social-follow-heart-x: 18px;
  animation-delay: 180ms;
}
@keyframes social-follow-plush-hop {
  0% {
    opacity: 0;
    translate: 0 10px;
    scale: 0.7;
    rotate: -10deg;
  }
  60% {
    opacity: 1;
    translate: 0 -3px;
    scale: 1.04;
    rotate: 3deg;
  }
}
@keyframes social-follow-plush-bounce {
  30% {
    translate: 0 -5px;
    scale: 1.06 0.96;
  }
  60% {
    translate: 0 0;
    scale: 0.97 1.03;
  }
}
@keyframes social-follow-rise {
  from {
    opacity: 0;
    translate: 0 6px;
  }
}
@keyframes social-follow-heart {
  0% {
    opacity: 0;
    translate: -50% 8px;
    scale: 0.4;
  }
  25% {
    opacity: 1;
    scale: 1;
  }
  100% {
    opacity: 0;
    translate: calc(-50% + var(--social-follow-heart-x)) -30px;
    scale: 0.9;
  }
}
@media (prefers-reduced-motion: reduce) {
  .social-follow-toast-plush, .social-follow-toast-plush[data-face="happy"] .social-follow-plush, .social-follow-toast-copy[data-thanks], .social-follow-toast-follow, .social-follow-networks li {
    animation: none;
  }
  .social-follow-toast-plush[data-face="wide"] .social-follow-plush, .social-follow-toast .social-follow-network:hover {
    rotate: none;
    translate: none;
  }
  .social-follow-heart {
    display: none;
  }
}
.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;
  stroke-width: var(--openbot-icon-stroke-lg);
}
.billing-license-row .ui-item-actions {
  gap: var(--openbot-space-2);
}
.billing-license-menu.ui-action-menu {
  z-index: var(--openbot-layer-dialog-host);
}
.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-block: var(--openbot-space-1);
  padding-inline: var(--openbot-space-1) var(--openbot-space-1-5);
  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:is([data-kind="tab"], [data-kind="thread"]) {
  max-width: min(260px, 100%);
}
.reference-chip[data-kind="quote"] {
  max-width: min(240px, 100%);
  font-weight: 450;
}
.reference-chip[data-kind="agent"]:hover, button.reference-chip:is([data-kind="quote"], [data-kind="tab"], [data-kind="thread"]):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-request .ui-icon-button > svg[class~="lucide-arrow-right"]:dir(rtl) {
  transform: scaleX(-1);
}
.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:dir(rtl) .t-page[data-page-id="1"] {
  --t-page-from-x: var(--page-slide-distance);
}
.t-page-slide:dir(rtl) .t-page[data-page-id="2"] {
  --t-page-from-x: calc(var(--page-slide-distance) * -1);
}
.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[data-openbot-window-glass] {
  --window-glass-frame: var(--openbot-bg-frame);
  @supports (color: color-mix(in lab, red, red)) {
    --window-glass-frame: color-mix(in srgb, var(--openbot-bg-frame) 20%, transparent);
  }
  --window-glass-card: var(--openbot-bg-canvas);
  @supports (color: color-mix(in lab, red, red)) {
    --window-glass-card: color-mix(in srgb, var(--openbot-bg-canvas) 30%, transparent);
  }
  --window-glass-canvas: var(--openbot-bg-canvas);
  @supports (color: color-mix(in lab, red, red)) {
    --window-glass-canvas: color-mix(in srgb, var(--openbot-bg-canvas) 25%, transparent);
  }
  --window-glass-sidebar: var(--openbot-bg-sidebar);
  @supports (color: color-mix(in lab, red, red)) {
    --window-glass-sidebar: color-mix(in srgb, var(--openbot-bg-sidebar) 25%, transparent);
  }
  --window-glass-frame-fill: var(--openbot-bg-frame);
  @supports (color: color-mix(in lab, red, red)) {
    --window-glass-frame-fill: color-mix(in srgb, var(--openbot-bg-frame) 30%, transparent);
  }
  --window-glass-sheet: var(--openbot-bg-sheet);
  @supports (color: color-mix(in lab, red, red)) {
    --window-glass-sheet: color-mix(in srgb, var(--openbot-bg-sheet) 35%, transparent);
  }
  --window-glass-sheet-inset: var(--openbot-bg-sheet-inset);
  @supports (color: color-mix(in lab, red, red)) {
    --window-glass-sheet-inset: color-mix(in srgb, var(--openbot-bg-sheet-inset) 25%, transparent);
  }
  --window-glass-grouped: var(--openbot-bg-grouped);
  @supports (color: color-mix(in lab, red, red)) {
    --window-glass-grouped: color-mix(in srgb, var(--openbot-bg-grouped) 35%, transparent);
  }
  --window-glass-surface: var(--openbot-bg-surface);
  @supports (color: color-mix(in lab, red, red)) {
    --window-glass-surface: color-mix(in srgb, var(--openbot-bg-surface) 35%, transparent);
  }
  --window-glass-surface-raised: var(--openbot-bg-surface-raised);
  @supports (color: color-mix(in lab, red, red)) {
    --window-glass-surface-raised: color-mix(in srgb, var(--openbot-bg-surface-raised) 40%, transparent);
  }
  --window-glass-control: var(--openbot-bg-control);
  @supports (color: color-mix(in lab, red, red)) {
    --window-glass-control: color-mix(in srgb, var(--openbot-bg-control) 35%, transparent);
  }
  --window-glass-control-hover: var(--openbot-bg-control-hover);
  @supports (color: color-mix(in lab, red, red)) {
    --window-glass-control-hover: color-mix(in srgb, var(--openbot-bg-control-hover) 45%, transparent);
  }
  --window-glass-control-active: var(--openbot-bg-control-active);
  @supports (color: color-mix(in lab, red, red)) {
    --window-glass-control-active: color-mix(in srgb, var(--openbot-bg-control-active) 55%, transparent);
  }
  --window-glass-tabs-bar: var(--openbot-tabs-bar-bg);
  @supports (color: color-mix(in lab, red, red)) {
    --window-glass-tabs-bar: color-mix(in srgb, var(--openbot-tabs-bar-bg) 35%, transparent);
  }
  --window-glass-tabs-pill: var(--openbot-tabs-pill-bg);
  @supports (color: color-mix(in lab, red, red)) {
    --window-glass-tabs-pill: color-mix(in srgb, var(--openbot-tabs-pill-bg) 45%, transparent);
  }
  --window-solid-canvas: var(--openbot-bg-canvas);
  --window-solid-sidebar: var(--openbot-bg-sidebar);
  --window-solid-frame: var(--openbot-bg-frame);
  --window-solid-sheet: var(--openbot-bg-sheet);
  --window-solid-sheet-inset: var(--openbot-bg-sheet-inset);
  --window-solid-grouped: var(--openbot-bg-grouped);
  --window-solid-surface: var(--openbot-bg-surface);
  --window-solid-surface-raised: var(--openbot-bg-surface-raised);
  --window-solid-control: var(--openbot-bg-control);
  --window-solid-control-hover: var(--openbot-bg-control-hover);
  --window-solid-control-active: var(--openbot-bg-control-active);
  --window-solid-tabs-bar: var(--openbot-tabs-bar-bg);
  --window-solid-tabs-pill: var(--openbot-tabs-pill-bg);
}
:root[data-openbot-window-glass] .app-window {
  --openbot-bg-canvas: var(--window-glass-canvas);
  --openbot-bg-sidebar: var(--window-glass-sidebar);
  --openbot-bg-frame: var(--window-glass-frame-fill);
  --openbot-bg-sheet: var(--window-glass-sheet);
  --openbot-bg-sheet-inset: var(--window-glass-sheet-inset);
  --openbot-bg-grouped: var(--window-glass-grouped);
  --openbot-bg-surface: var(--window-glass-surface);
  --openbot-bg-surface-raised: var(--window-glass-surface-raised);
  --openbot-bg-control: var(--window-glass-control);
  --openbot-bg-control-hover: var(--window-glass-control-hover);
  --openbot-bg-control-active: var(--window-glass-control-active);
  --openbot-tabs-bar-bg: var(--window-glass-tabs-bar);
  --openbot-tabs-pill-bg: var(--window-glass-tabs-pill);
  --openbot-queue-surface: var(--openbot-bg-surface);
  --background: var(--openbot-bg-canvas);
  --surface: var(--openbot-bg-surface);
}
:root[data-openbot-window-glass] .app-window :is( [data-popper-positioner], [role="dialog"], [role="alertdialog"], [role="menu"], [role="listbox"], [role="tooltip"], .ui-popover-menu-surface, .sidebar-agent-drag-preview, .sidebar-person-drag-preview, .sidebar-section-drag-preview ) {
  --openbot-bg-canvas: var(--window-solid-canvas);
  --openbot-bg-sidebar: var(--window-solid-sidebar);
  --openbot-bg-frame: var(--window-solid-frame);
  --openbot-bg-sheet: var(--window-solid-sheet);
  --openbot-bg-sheet-inset: var(--window-solid-sheet-inset);
  --openbot-bg-grouped: var(--window-solid-grouped);
  --openbot-bg-surface: var(--window-solid-surface);
  --openbot-bg-surface-raised: var(--window-solid-surface-raised);
  --openbot-bg-control: var(--window-solid-control);
  --openbot-bg-control-hover: var(--window-solid-control-hover);
  --openbot-bg-control-active: var(--window-solid-control-active);
  --openbot-tabs-bar-bg: var(--window-solid-tabs-bar);
  --openbot-tabs-pill-bg: var(--window-solid-tabs-pill);
  --openbot-queue-surface: var(--openbot-bg-surface);
  --background: var(--openbot-bg-canvas);
  --surface: var(--openbot-bg-surface);
}
:root[data-openbot-window-glass] body {
  background: transparent;
}
:root[data-openbot-window-glass] .app-window {
  --window-frame: var(--window-glass-frame);
}
@media (max-width: 720px) {
  :root[data-openbot-window-glass] .app-window > .app-frame-edge {
    background: var(--window-glass-card);
  }
}
@media (min-width: 721px) {
  :root[data-openbot-window-glass] .app-window > .app-frame-edge, :root[data-openbot-window-glass] .app-window > .app-frame-edge > .server-rail {
    background: transparent;
  }
  :root[data-openbot-window-glass] .app-window > .app-frame-edge::before, :root[data-openbot-window-glass] .app-window > .app-frame-edge .side-panel-maximized > :is(.settings-panel, .browser-panel), :root[data-openbot-window-glass] .app-frame-edge .diagram-view-body {
    background: var(--window-glass-card);
  }
}
:root[data-openbot-window-glass] .app-window > .app-frame-edge > .sidebar, :root[data-openbot-window-glass] .app-window > .app-frame-edge :is(.channel-empty, .channel-title), :root[data-openbot-window-glass] .app-window > .app-frame-edge > .sidebar :is(.sidebar-section-agent-drop-target, .sidebar-pinned-group-agent-drop-target) > * {
  --agent-avatar-outline: transparent;
}
:root[data-openbot-window-glass] .app-window > .app-frame-edge > .sidebar .agent-row:not(:hover, .agent-row-active) .channel-avatar-cluster .agent-avatar:has(> .bloub-avatar-svg image), :root[data-openbot-window-glass] .app-window > .app-frame-edge > .sidebar .agent-list[data-sidebar-dragging] .agent-row:hover:not(.agent-row-active) .channel-avatar-cluster .agent-avatar:has(> .bloub-avatar-svg image) {
  filter: none;
}
:root[data-openbot-window-glass] .app-window > .app-frame-edge :is(.channel-empty, .channel-title) .channel-avatar .agent-avatar + .agent-avatar {
  margin-inline-start: 0;
}
:root[data-openbot-window-glass] .app-window :is(.schedule-pane, .agent-usage, .tasks-page, .diagram-view, .settings-page-content .agent-files-view) {
  background: transparent;
}
:root[data-openbot-window-glass] .app-window .diagram-board-viewport {
  background-color: transparent;
}
:root[data-openbot-window-glass] .app-window .tasks-page-composer.composer-wrap {
  background: var(--window-glass-card);
}
:root[data-openbot-window-glass] .app-window .settings-page-content .settings-modal-scroll-frame::before {
  background: linear-gradient(to bottom, var(--window-glass-card) 28%, transparent 100%);
}
:root[data-openbot-window-glass] .app-window .settings-page-content .settings-modal-scroll-frame::after {
  background: linear-gradient(to top, var(--window-glass-card) 28%, transparent 100%);
}
:root[data-openbot-window-glass] .app-window :is( .sidebar-folder > header, .marketplace-skill-group-bar, .agent-instructions-bar, .trace-row[data-parent], .trace-axis-row ) {
  backdrop-filter: blur(var(--openbot-space-4));
}
:root[data-openbot-window-glass] .app-window .wfn-stage {
  --wfn-card: var(--window-solid-canvas);
  --wfn-field: var(--window-solid-surface-raised);
  --wfn-port: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --wfn-port: color-mix(in srgb, var(--openbot-text-primary) 10%, var(--window-solid-canvas));
  }
}
:root[data-openbot-window-glass][data-openbot-color-scheme="light"] .app-window .wfn-stage {
  --wfn-card: var(--window-solid-surface);
  --wfn-field: var(--window-solid-control-hover);
}
:root[data-openbot-window-glass] .browser-full-view {
  background: var(--window-glass-frame);
}
:root[data-openbot-window-glass] .app-window .ui-bubble.message-bubble-colored > .ui-bubble-content {
  --openbot-bg-canvas: var(--window-glass-canvas);
  --openbot-bg-sidebar: var(--window-glass-sidebar);
  --openbot-bg-surface: var(--window-glass-surface);
  --openbot-bg-surface-raised: var(--window-glass-surface-raised);
  --openbot-bg-control: var(--window-glass-control);
  --openbot-bg-control-hover: var(--window-glass-control-hover);
  --openbot-bg-control-active: var(--window-glass-control-active);
}
:root[data-openbot-window-glass] .app-window .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, color-mix(in srgb, var(--message-author-color, var(--openbot-accent)) 22%, var(--window-solid-surface-raised)) 40%, transparent );
  }
}
:root[data-openbot-window-glass] .app-window .message-entry-agent .ui-bubble-variant-muted.message-bubble-colored > .ui-bubble-content {
  background: var(--message-chat-color);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix( in srgb, color-mix(in srgb, var(--message-chat-color) var(--message-bubble-tint-amount), var(--window-solid-surface)) 35%, transparent );
  }
}
:root[data-openbot-window-glass] .app-window .message-entry-user .ui-bubble.message-bubble-colored > .ui-bubble-content {
  background: var(--message-chat-color);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix( in srgb, color-mix(in srgb, var(--message-chat-color) var(--message-bubble-tint-amount), var(--window-solid-surface-raised)) 40%, transparent );
  }
}
:root[data-openbot-color-scheme="dark"][data-openbot-chat-background-dark] {
  --chat-background: oklch(from var(--openbot-chat-background-dark) min(l, 0.3) min(c, 0.05) h);
}
:root[data-openbot-color-scheme="light"][data-openbot-chat-background-light] {
  --chat-background: oklch(from var(--openbot-chat-background-light) max(l, 0.95) min(c, 0.02) h);
}
:root[data-openbot-color-scheme="dark"][data-openbot-chat-background-dark] :is(.conversation-panel:not(.window-page), .direct-conversation), :root[data-openbot-color-scheme="light"][data-openbot-chat-background-light] :is(.conversation-panel:not(.window-page), .direct-conversation) {
  --openbot-bg-canvas: var(--chat-background);
  --openbot-bg-canvas-clear: oklch(from var(--chat-background) l c h / 0);
}
:root[data-openbot-color-scheme="light"][data-openbot-chat-background-light] :is(.conversation-panel:not(.window-page), .direct-conversation) {
  --openbot-scroll-edge-overlay: oklch(from var(--chat-background) l c h / 0.72);
}
:root[data-openbot-window-glass][data-openbot-color-scheme="dark"][data-openbot-chat-background-dark] .app-window :is(.conversation-panel:not(.window-page), .direct-conversation), :root[data-openbot-window-glass][data-openbot-color-scheme="light"][data-openbot-chat-background-light] .app-window :is(.conversation-panel:not(.window-page), .direct-conversation) {
  --openbot-bg-canvas: var(--chat-background);
  @supports (color: color-mix(in lab, red, red)) {
    --openbot-bg-canvas: color-mix(in srgb, var(--chat-background) 25%, transparent);
  }
}
@media (min-width: 721px) {
  :root[data-openbot-color-scheme="dark"][data-openbot-chat-background-dark] .app-window > .app-frame-edge :is(.conversation-panel:not(.window-page), .direct-conversation)::before, :root[data-openbot-color-scheme="light"][data-openbot-chat-background-light] .app-window > .app-frame-edge :is(.conversation-panel:not(.window-page), .direct-conversation)::before {
    position: absolute;
    z-index: -1;
    inset: var(--left-header-height) 0 0;
    border-start-end-radius: calc(var(--openbot-radius-card) - 1px);
    border-end-end-radius: calc(var(--openbot-radius-card) - 1px);
    background: var(--openbot-bg-canvas);
    content: "";
    pointer-events: none;
  }
}
: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-list-context-trigger, .openbot-playground-root .sidebar-chat-group > header {
    display: none;
  }
  .openbot-playground-root .sidebar {
    grid-column: 1;
    grid-row: 1;
    flex-direction: row;
    border-inline-end: 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 .agent-list-content, .openbot-playground-root .sidebar-chat-group, .openbot-playground-root .sidebar-section-collapse, .openbot-playground-root .sidebar-section-body {
    display: flex;
    align-items: center;
    gap: var(--openbot-space-1-5);
    margin: 0;
  }
  .openbot-playground-root .agent-row, .openbot-playground-root .sidebar-compact .agent-row {
    --agent-row-avatar-size: 36px;
    --sidebar-pinned-avatar-size: 36px;
    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 .app-frame-panes, .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;
      --agent-list-stuck-height: 0px;
      --agent-list-fade-top: initial;
      --agent-list-fade-bottom: initial;
      --hosted-upsell-beam-angle: 0deg;
      --wfn-sweep: 0turn;
      --wfn-fade-start: 0px;
      --wfn-fade-end: 0px;
      --settings-page-fade-start: 0px;
      --settings-page-fade-end: 0px;
    }
  }
}


/* /@fs//home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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/home/ubuntu/openbot/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;
    --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;
  }
  .relative {
    position: relative;
  }
  .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;
  }
  .h-1 {
    height: var(--spacing);
  }
  .h-2 {
    height: calc(var(--spacing) * 2);
  }
  .h-3 {
    height: calc(var(--spacing) * 3);
  }
  .h-4 {
    height: calc(var(--spacing) * 4);
  }
  .h-5 {
    height: calc(var(--spacing) * 5);
  }
  .h-6 {
    height: calc(var(--spacing) * 6);
  }
  .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-frame: #0d0d0d;
  --openbot-bg-sheet-inset: #101010;
  --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-wash-front: linear-gradient(
    to top,
    rgba(111, 255, 196, 0),
    #6fffc4 20%,
    #6db8ff 38%,
    #bb66ff 56%,
    #ff66c0 74%,
    #ffb875 88%,
    rgba(255, 184, 117, 0)
  );
  --openbot-color-picker-light: #ffffff;
  --openbot-color-picker-dark: #000000;
  --openbot-color-picker-spectrum: linear-gradient(
    to right,
    #ff0000,
    #ffff00,
    #00ff00,
    #00ffff,
    #0000ff,
    #ff00ff,
    #ff0000
  );
  --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: var(--openbot-text-muted);
  --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-paper: #f0f0f0;
  --openbot-paper-text: #141414;
  --openbot-paper-text-muted: rgba(20, 20, 20, 0.52);
  --openbot-paper-text-dim: rgba(20, 20, 20, 0.36);
  --openbot-paper-border: rgba(20, 20, 20, 0.14);
  --openbot-onboarding-desktop-mist: #dbe9ff;
  --openbot-onboarding-desktop-blue: #7eb4f2;
  --openbot-onboarding-desktop-indigo: #6f7de8;
  --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-felt-plum-top: rgb(112 80 131);
  --openbot-felt-plum-bottom: rgb(74 40 92);
  --openbot-felt-raspberry-top: rgb(245 32 112);
  --openbot-felt-raspberry-bottom: rgb(180 6 65);
  --openbot-felt-amber-top: rgb(255 149 17);
  --openbot-felt-amber-bottom: rgb(203 104 12);
  --openbot-felt-cream: #f6efe2;
  --openbot-felt-cream-stroke: #efe4d2;
  --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-star: #facc15;
  --openbot-star-edge: #ca8a04;
  --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-menu: rgba(0, 0, 0, 0.45);
  --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-default: "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Arabic", sans-serif;
  --openbot-font-mono-default: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
  --openbot-font-sans: var(--openbot-font-sans-default);
  --openbot-font-mono: var(--openbot-font-mono-default);
  --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, 3.5cqi, 2.75rem);
  --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: 2;
  --openbot-icon-stroke-lg: 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-show-delay: 750ms;
  --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 1px var(--openbot-border-focus);
  --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="kimi"] {
  --openbot-provider-current: var(--openbot-text-primary);
}
[data-provider="devin"] {
  --openbot-provider-current: var(--openbot-text-primary);
}
[data-provider="copilot"] {
  --openbot-provider-current: var(--openbot-text-primary);
}
[data-provider="mistral"] {
  --openbot-provider-current: var(--openbot-text-primary);
}
[data-provider="acp"] {
  --openbot-provider-current: var(--openbot-text-primary);
}
:root[data-openbot-color-scheme="light"] {
  color-scheme: light;
  --openbot-bg-canvas: #f5f5f6;
  --openbot-bg-canvas-clear: rgba(245, 245, 246, 0);
  --openbot-bg-frame: #e8e8eb;
  --openbot-bg-sidebar: #f5f5f6;
  --openbot-bg-native-sidebar: #f5f5f6;
  --openbot-bg-sheet: #ffffff;
  --openbot-bg-sheet-inset: #f0f0f2;
  --openbot-bg-grouped: #ffffff;
  --openbot-text-grouped-secondary: #6b6b70;
  --openbot-border-grouped: #e3e3e6;
  --openbot-marketplace-detail-bg: #ececee;
  --openbot-bg-surface: #ffffff;
  --openbot-bg-surface-raised: #fcfcfc;
  --openbot-bg-control: #ffffff;
  --openbot-bg-control-hover: #f0f0f2;
  --openbot-bg-control-active: #e8e8eb;
  --openbot-tabs-bar-bg: #ececee;
  --openbot-tabs-pill-bg: #ffffff;
  --openbot-bg-overlay: rgba(245, 245, 246, 0.92);
  --openbot-dialog-overlay: rgba(20, 20, 20, 0.12);
  --openbot-dialog-ring: rgba(20, 20, 20, 0.1);
  --openbot-bg-glass: rgba(255, 255, 255, 0.76);
  --openbot-glass-surface: rgba(20, 20, 20, 0.04);
  --openbot-glass-surface-hover: rgba(20, 20, 20, 0.07);
  --openbot-glass-border: rgba(20, 20, 20, 0.12);
  --openbot-glass-highlight: rgba(255, 255, 255, 0.6);
  --openbot-glass-shadow: transparent;
  --openbot-scroll-edge-overlay: rgba(245, 245, 246, 0.72);
  --openbot-border: rgba(20, 20, 20, 0.07);
  --openbot-border-strong: rgba(20, 20, 20, 0.1);
  --openbot-image-outline: rgba(20, 20, 20, 0.1);
  --openbot-hover: rgba(20, 20, 20, 0.05);
  --openbot-text-primary: #141414;
  --openbot-text-secondary: #3a3a3c;
  --openbot-text-muted: #6b6b70;
  --openbot-text-dim: #8e8e93;
  --openbot-text-placeholder: #5c5c61;
  --openbot-text-readable: rgba(20, 20, 20, 0.6);
  --openbot-settings-text-muted: rgba(20, 20, 20, 0.6);
  --openbot-surface-light: #1c1c1e;
  --openbot-text-on-light: #ffffff;
  --openbot-text-muted-on-light: rgba(255, 255, 255, 0.64);
  --openbot-text-dim-on-light: rgba(255, 255, 255, 0.4);
  --openbot-border-on-light: rgba(255, 255, 255, 0.16);
  --openbot-accent-hover: #006ad4;
  --openbot-accent-text: #0064c8;
  --openbot-accent-soft: rgba(0, 124, 247, 0.12);
  --openbot-accent-strong: rgba(0, 124, 247, 0.26);
  --openbot-chart-series-codex: #8e4fc0;
  --openbot-chart-series-grok: #16849b;
  --openbot-chart-storage-workspaces: #2f74c9;
  --openbot-chart-storage-files: #c64d1d;
  --openbot-chart-storage-chats: #148a61;
  --openbot-chart-storage-downloads: #6f62d6;
  --openbot-chart-storage-runtimes: #a86f00;
  --openbot-success: #1fa85a;
  --openbot-success-text: #187a41;
  --openbot-success-soft: rgba(31, 168, 90, 0.12);
  --openbot-success-wash: rgba(31, 168, 90, 0.06);
  --openbot-warning: #f08a00;
  --openbot-warning-text: #9c5200;
  --openbot-warning-soft: rgba(240, 138, 0, 0.14);
  --openbot-approval-badge-soft: rgba(240, 138, 0, 0.18);
  --openbot-danger: #e8222d;
  --openbot-danger-hover: #f04a53;
  --openbot-danger-text: #c0141d;
  --openbot-danger-soft: rgba(232, 34, 45, 0.12);
  --openbot-danger-soft-hover: rgba(232, 34, 45, 0.2);
  --openbot-danger-focus: rgba(232, 34, 45, 0.36);
  --openbot-danger-border: rgba(232, 34, 45, 0.45);
  --openbot-question-option: #16849b;
  --openbot-question-option-soft: rgba(22, 132, 155, 0.12);
  --openbot-question-option-hover: rgba(22, 132, 155, 0.18);
  --openbot-question-option-pressed: rgba(22, 132, 155, 0.24);
  --openbot-question-badge-text: #0f6a7d;
  --openbot-question-badge-soft: rgba(22, 132, 155, 0.14);
  --openbot-message-badge-text: #0a5fb8;
  --openbot-message-badge-soft: rgba(0, 124, 247, 0.12);
  --openbot-badge-new: #e0004a;
  --openbot-badge-new-soft: rgba(224, 0, 74, 0.12);
  --openbot-file-blue: #1a66c4;
  --openbot-file-blue-soft: rgba(31, 111, 209, 0.12);
  --openbot-file-yellow: #9c5200;
  --openbot-file-yellow-soft: rgba(240, 138, 0, 0.14);
  --openbot-file-orange: #a8521a;
  --openbot-file-orange-soft: rgba(181, 90, 31, 0.12);
  --openbot-file-teal: #127589;
  --openbot-file-teal-soft: rgba(22, 132, 155, 0.12);
  --openbot-file-green: #187a41;
  --openbot-file-green-soft: rgba(31, 168, 90, 0.12);
  --openbot-file-red: #c0141d;
  --openbot-file-red-soft: rgba(232, 34, 45, 0.12);
  --openbot-file-pink: #a3478f;
  --openbot-file-pink-soft: rgba(163, 71, 143, 0.12);
  --openbot-file-default: #0064c8;
  --openbot-file-default-soft: rgba(0, 124, 247, 0.12);
  --openbot-data-table-border: #e3e3e6;
  --openbot-data-table-header-text: #6b6b70;
  --openbot-data-table-text: #1c1c1e;
  --openbot-data-table-outer-border: rgba(20, 20, 20, 0);
  --openbot-data-table-ring: rgba(20, 20, 20, 0.1);
  --openbot-shadow-popover-ambient: transparent;
  --openbot-shadow-dialog: transparent;
  --openbot-shadow-menu: transparent;
  --openbot-shadow-ring: rgba(20, 20, 20, 0.04);
  --openbot-shadow-overlay: 0 0 0 transparent;
}
: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;
  }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
@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", "Noto Sans Arabic",
    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"], .site-panel[data-kind="resources"] {
  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(--openbot-duration-slow) var(--openbot-ease-out);
  will-change: transform;
}
.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-resource-icon {
  width: 20px;
  height: 20px;
}
.site-panel-resource-logo {
  background: none;
  box-shadow: none;
}
.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;
}
.site-language-menu {
  position: relative;
}
.site-language-list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 2;
  min-width: 200px;
  margin: 0;
  padding: 6px;
  border-radius: 14px;
  background: rgba(22, 22, 22, 0.8);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07);
  list-style: none;
  backdrop-filter: blur(40px) saturate(180%);
}
.site-language-list[hidden] {
  display: none;
}
.site-language-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 9px;
  color: var(--openbot-text-primary);
  font-size: 14px;
}
.site-language-list a:hover, .site-language-list a:focus-visible {
  outline: 0;
  background: rgba(255, 255, 255, 0.05);
}
.site-language-flag {
  display: inline-flex;
  flex: 0 0 auto;
  width: 20px;
  height: 14px;
  overflow: hidden;
  border-radius: 3px;
}
.site-language-flag svg {
  width: 100%;
  height: 100%;
}
.site-language-name {
  flex: 1 1 auto;
  white-space: nowrap;
}
.site-language-check {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--openbot-text-secondary);
}
@media (min-width: 1101px) and (max-width: 1280px) {
  .landing-header {
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    padding-inline: 24px;
  }
  .site-nav {
    justify-self: center;
  }
  .site-nav-trigger {
    padding: 0 7px 0 10px;
  }
  .site-nav-link {
    padding: 0 10px;
  }
}
@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 (max-width: 1100px) {
  .landing-header {
    display: flex;
    justify-content: space-between;
  }
  .site-nav, .site-header-actions > .site-header-secondary {
    display: none;
  }
  .site-header-actions {
    position: relative;
  }
  .site-language-menu {
    position: static;
  }
  .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");
}
.landing-button[data-icon="copy"]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 3h11a2 2 0 0 1 2 2v11h-2V5H8V3Zm-3 4h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2Zm0 2v10h10V9H5Z'/%3E%3C/svg%3E");
}
.landing-button[data-icon="check"]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17Z'/%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;
}
.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-actions[hidden] {
  display: none;
}
.join-card-actions-full {
  grid-template-columns: 1fr;
}
.join-card-alternatives {
  margin: 16px 0 0;
  color: var(--openbot-text-secondary);
  font-size: 14px;
  line-height: 1.5;
}
.join-card-alternatives a {
  color: var(--openbot-text-primary);
  text-decoration: underline;
  text-decoration-color: var(--openbot-text-muted);
  text-underline-offset: 3px;
}
.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;
}
@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);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
}
.site-header-actions > .landing-button-glass, .landing-availability {
  border-color: rgba(255, 255, 255, 0.14);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(255, 255, 255, 0.04), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}
.landing-button[data-beam-source] {
  position: relative;
}
.landing-button[data-beam-source]::after {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: 0 0 8px 1px rgba(var(--landing-beam-rim, 164, 108, 245), 0.55);
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--openbot-duration-normal) var(--openbot-ease-out);
}
.landing-button[data-beam-struck]::after {
  opacity: 1;
}
.landing-button:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--openbot-accent-strong);
}
.landing-button:active {
  transform: scale(0.97);
}
.site-language-trigger {
  gap: 6px;
  padding: 0 12px;
  cursor: pointer;
}
.site-language-trigger::before {
  content: none;
}
.site-language-trigger svg {
  width: 14px;
  height: 14px;
}
@media (max-width: 1280px) {
  .site-language-trigger {
    width: 38px;
    height: 38px;
    padding: 0;
    justify-content: center;
  }
  .site-language-trigger > :not(:first-child) {
    display: none;
  }
  .site-language-trigger svg {
    width: 18px;
    height: 18px;
  }
}
.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-beam {
  position: absolute;
  z-index: 0;
  top: -76px;
  bottom: 0;
  left: 50%;
  width: 100vw;
  pointer-events: none;
  transform: translateX(-50%);
  mask-image: linear-gradient(var(--openbot-transparent), var(--openbot-mask-solid) 120px);
}
.landing-beam[data-source] {
  mask-image: none;
}
.landing-beam-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.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-width: 1px;
  border-style: solid;
  border-radius: var(--openbot-radius-pill);
  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: inset 0 1px var(--openbot-glass-highlight);
}
.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-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
  margin: 0;
  padding: 0;
  color: var(--openbot-text-secondary);
  font-size: clamp(16px, 1.8vw, 18px);
  line-height: 1.5;
  list-style: none;
}
.landing-pricing-facts li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.landing-pricing-fact-icon {
  flex: none;
  width: 18px;
  height: 18px;
}
.landing-pricing-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 36px;
}
.landing-pricing [data-revealed="false"] {
  opacity: 0;
}
.landing-pricing-eyebrow[data-revealed="true"], .landing-pricing-facts[data-revealed="true"], .landing-pricing-actions[data-revealed="true"] {
  animation: landing-download-reveal 760ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.landing-pricing-facts[data-revealed="true"] {
  animation-delay: 320ms;
}
.landing-pricing-actions[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="multiplayer"] {
  grid-column: 1 / 9;
  grid-row: 3;
}
.landing-feature[data-feature="persist"] {
  grid-column: 1 / 9;
  grid-row: 4;
}
.landing-feature[data-feature="workflows"] {
  grid-column: 9 / 13;
  grid-row: 3 / 5;
}
.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:is([data-feature="team"], [data-feature="multiplayer"], [data-feature="persist"]) p {
  max-width: 64ch;
}
.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;
  align-items: stretch;
  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="multiplayer"] .landing-feature-visual {
  display: flex;
  padding: 36px 0 0 36px;
}
.landing-multiplayer-window .landing-team-stack {
  padding-right: 0;
}
.landing-multiplayer-window .landing-team-stack > * + * {
  margin-left: 4px;
}
.landing-feature .landing-face {
  overflow: hidden;
  background: var(--landing-face-background);
}
.landing-face-art {
  display: block;
  width: 100%;
  height: 100%;
}
.landing-face-skin {
  fill: var(--landing-face-skin);
}
.landing-face-shade {
  fill: var(--landing-face-shade);
}
.landing-face-hair {
  fill: var(--landing-face-hair);
}
.landing-face-shirt {
  fill: var(--landing-face-shirt);
}
.landing-face-brow {
  fill: none;
  stroke: var(--landing-face-brow);
  stroke-linecap: round;
  stroke-width: 1.1;
}
.landing-face-ink {
  fill: #3a2a24;
}
.landing-face-blush {
  fill: #ff7f8a;
  opacity: 0.35;
}
.landing-face-freckle {
  fill: #d98a5f;
}
.landing-face-glasses {
  fill: none;
  stroke: #3a2a24;
  stroke-width: 0.85;
}
.landing-face-mouth {
  fill: #c9524f;
  stroke: #3a2a24;
  stroke-linejoin: round;
  stroke-width: 0.7;
}
.landing-face[data-person="maya"] {
  --landing-face-background: #ffd6df;
  --landing-face-skin: #f8d2b4;
  --landing-face-shade: #ecb994;
  --landing-face-hair: #c56d3e;
  --landing-face-brow: #9c4f28;
  --landing-face-shirt: #8b7cf6;
}
.landing-face[data-person="sam"] {
  --landing-face-background: #cdeeff;
  --landing-face-skin: #ebbb94;
  --landing-face-shade: #d9a07a;
  --landing-face-hair: #8a5634;
  --landing-face-brow: #6e4127;
  --landing-face-shirt: #ffb547;
}
.landing-face[data-person="theo"] {
  --landing-face-background: #d6f5cc;
  --landing-face-skin: #fde3cf;
  --landing-face-shade: #f3c9ab;
  --landing-face-hair: #ef8a45;
  --landing-face-brow: #c8692d;
  --landing-face-shirt: #5b95f7;
}
.landing-multiplayer-joined {
  display: flex;
  justify-content: flex-end;
  width: 0;
  opacity: 0;
  transform: scale(0.6);
  transition: width 360ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease, transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}
.landing-multiplayer-window .landing-team-stack > .landing-multiplayer-joined {
  margin-left: 0;
}
.landing-feature[data-feature="multiplayer"]:hover .landing-multiplayer-joined {
  width: 32px;
  opacity: 1;
  transform: none;
  transition-delay: 160ms;
}
.landing-multiplayer-invite {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  margin-right: 24px;
  padding: 5px 10px;
  border: 1px solid var(--landing-card-border);
  border-radius: var(--openbot-radius-pill);
  color: var(--openbot-text-secondary);
  font-size: 12px;
  font-weight: 500;
  transition: border-color 200ms ease;
}
.landing-feature[data-feature="multiplayer"]:hover .landing-multiplayer-invite {
  border-color: var(--landing-card-border-hover);
}
.landing-multiplayer-invite-icon {
  width: 14px;
  height: 14px;
}
.landing-feature[data-feature="workflows"] .landing-feature-visual {
  container: landing-workflow / inline-size;
  place-items: center stretch;
  padding: 36px 32px 4px;
}
.landing-workflow {
  --landing-workflow-line: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --landing-workflow-line: color-mix(in srgb, var(--openbot-text-primary) 26%, transparent);
  }
  --landing-workflow-line-done: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --landing-workflow-line-done: color-mix(in srgb, var(--openbot-text-primary) 66%, transparent);
  }
  position: relative;
}
.landing-workflow-edges {
  --landing-workflow-clip: inset(-4px 100% -4px 0);
  --landing-workflow-clip-end: inset(-4px 0);
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.landing-workflow-edges-tall {
  --landing-workflow-clip: inset(0 -4px 100% -4px);
  --landing-workflow-clip-end: inset(0 -4px);
  display: none;
}
.landing-workflow-edge, .landing-workflow-edge-run {
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.landing-workflow-edge {
  stroke: var(--landing-workflow-line);
  stroke-dasharray: 4 5;
}
.landing-workflow-edge-run {
  stroke: var(--landing-workflow-line-done);
  clip-path: var(--landing-workflow-clip);
}
.landing-feature[data-feature="workflows"]:hover .landing-workflow-edge-run {
  animation: landing-workflow-draw var(--landing-workflow-edge) ease-in-out var(--landing-workflow-start) both;
}
.landing-workflow-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  column-gap: 8%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.landing-workflow-node {
  position: relative;
  grid-column: var(--landing-workflow-column);
  grid-row: 1 / -1;
  min-width: 0;
  display: grid;
  align-items: center;
  padding-block: 9px;
}
.landing-workflow-node[data-lane] {
  align-items: stretch;
}
.landing-workflow-node[data-lane="0"] {
  grid-row: 1;
}
.landing-workflow-node[data-lane="1"] {
  grid-row: 2;
}
.landing-workflow-node:not([data-step="trigger"])::before, .landing-workflow-node:not([data-step="approval"])::after {
  content: "";
  position: absolute;
  top: 50%;
  z-index: 1;
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--landing-workflow-line);
  border-radius: 50%;
  background: var(--openbot-bg-canvas);
  translate: 0 -50%;
}
.landing-workflow-node::before {
  left: -4.5px;
}
.landing-workflow-node::after {
  right: -4.5px;
}
.landing-feature[data-feature="workflows"]:hover .landing-workflow-node::before {
  animation: landing-workflow-port 200ms ease var(--landing-workflow-start) both;
}
.landing-feature[data-feature="workflows"]:hover .landing-workflow-node::after {
  animation: landing-workflow-port 200ms ease calc(var(--landing-workflow-start) + var(--landing-workflow-run)) both;
}
.landing-workflow-card {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  padding: 11px 12px 13px;
  border: 1px solid var(--landing-card-border);
  border-radius: 14px;
  background: var(--openbot-bg-canvas);
}
.landing-workflow-card::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(var(--openbot-text-secondary), var(--openbot-text-secondary)) left / 0 100% no-repeat;
}
.landing-feature[data-feature="workflows"]:hover .landing-workflow-card {
  animation: landing-workflow-active var(--landing-workflow-run) var(--landing-workflow-start);
}
.landing-feature[data-feature="workflows"]:hover .landing-workflow-card::after {
  animation: landing-workflow-progress var(--landing-workflow-run) linear var(--landing-workflow-start) both;
}
.landing-workflow-head {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--openbot-text-primary);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}
.landing-workflow-head .landing-team-avatar-small {
  --landing-team-avatar-size: 22px;
  box-shadow: none;
}
.landing-workflow-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.landing-workflow-badge {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--openbot-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--openbot-text-primary) 9%, transparent);
  }
  color: var(--openbot-text-secondary);
}
.landing-workflow-icon {
  flex: none;
  width: 13px;
  height: 13px;
}
.landing-workflow-provider {
  flex: none;
  width: 14px;
  height: 14px;
}
.landing-workflow-status {
  flex: none;
  display: grid;
  width: 16px;
  height: 16px;
  margin-left: auto;
}
.landing-workflow-spinner, .landing-workflow-done {
  grid-area: 1 / 1;
  width: 16px;
  height: 16px;
  border-radius: 50%;
}
.landing-workflow-spinner {
  border: 1.5px solid var(--landing-workflow-line);
}
.landing-feature[data-feature="workflows"]:hover .landing-workflow-spinner {
  animation: landing-workflow-spin 700ms linear infinite, landing-workflow-running var(--landing-workflow-run) var(--landing-workflow-start), landing-workflow-out 1ms calc(var(--landing-workflow-start) + var(--landing-workflow-run)) forwards;
}
.landing-workflow-done {
  padding: 2.5px;
  background: var(--openbot-text-primary);
  color: var(--openbot-bg-canvas);
  opacity: 0;
}
.landing-feature[data-feature="workflows"]:hover .landing-workflow-done {
  animation: landing-workflow-pop 360ms cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--landing-workflow-start) + var(--landing-workflow-run)) both;
}
.landing-workflow-text {
  color: var(--openbot-text-secondary);
  font-size: 13px;
  line-height: 1.45;
}
.landing-workflow-decision {
  display: grid;
}
.landing-workflow-approve, .landing-workflow-approved {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--openbot-radius-pill);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.landing-workflow-approve {
  background: var(--openbot-text-primary);
  color: var(--openbot-text-on-light);
}
.landing-workflow-approved {
  padding-inline: 0;
  color: var(--openbot-text-primary);
  opacity: 0;
}
.landing-feature[data-feature="workflows"]:hover .landing-workflow-approve {
  animation: landing-workflow-press 240ms ease calc(var(--landing-workflow-start) + var(--landing-workflow-run) - 240ms), landing-workflow-out 160ms ease calc(var(--landing-workflow-start) + var(--landing-workflow-run)) forwards;
}
.landing-feature[data-feature="workflows"]:hover .landing-workflow-approved {
  animation: landing-workflow-rise 300ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--landing-workflow-start) + var(--landing-workflow-run) + 80ms) both;
}
@keyframes landing-workflow-draw {
  from {
    clip-path: var(--landing-workflow-clip);
  }
  to {
    clip-path: var(--landing-workflow-clip-end);
  }
}
@keyframes landing-workflow-port {
  from {
    border-color: var(--landing-workflow-line);
    background: var(--openbot-bg-canvas);
  }
  to {
    border-color: var(--landing-workflow-line-done);
    background: var(--landing-workflow-line-done);
  }
}
@keyframes landing-workflow-active {
  from, to {
    border-color: var(--landing-workflow-line-done);
  }
}
@keyframes landing-workflow-progress {
  from {
    background-size: 0 100%;
  }
  to {
    background-size: 100% 100%;
  }
}
@keyframes landing-workflow-spin {
  to {
    rotate: 360deg;
  }
}
@keyframes landing-workflow-running {
  from, to {
    border-top-color: var(--openbot-text-primary);
  }
}
@keyframes landing-workflow-out {
  to {
    opacity: 0;
  }
}
@keyframes landing-workflow-pop {
  from {
    opacity: 0;
    scale: 0.5;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}
@keyframes landing-workflow-press {
  50% {
    scale: 0.9;
  }
}
@keyframes landing-workflow-rise {
  from {
    opacity: 0;
    translate: 0 6px;
  }
  to {
    opacity: 1;
    translate: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .landing-feature[data-feature="workflows"]:hover .landing-workflow-spinner {
    animation: landing-workflow-running var(--landing-workflow-run) var(--landing-workflow-start), landing-workflow-out 1ms calc(var(--landing-workflow-start) + var(--landing-workflow-run)) forwards;
  }
  .landing-feature[data-feature="workflows"]:hover .landing-workflow-done {
    animation-timing-function: step-start;
  }
  .landing-feature[data-feature="workflows"]:hover .landing-workflow-approve {
    animation: landing-workflow-out 1ms calc(var(--landing-workflow-start) + var(--landing-workflow-run)) forwards;
  }
  .landing-feature[data-feature="workflows"]:hover .landing-workflow-approved {
    animation-timing-function: step-start;
  }
}
@container landing-workflow (max-width: 640px) {
  .landing-workflow-card {
    padding-inline: 10px;
  }
  .landing-workflow-head {
    gap: 6px;
  }
  .landing-workflow-edges-wide {
    display: none;
  }
  .landing-workflow-edges-tall {
    display: block;
  }
  .landing-workflow-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
    column-gap: 0;
  }
  .landing-workflow-node {
    grid-column: 1 / -1;
    grid-row: var(--landing-workflow-column);
    justify-items: center;
    padding-block: 12px;
  }
  .landing-workflow-node[data-lane] {
    align-items: center;
    justify-items: stretch;
    padding-inline: 5px;
  }
  .landing-workflow-node[data-lane="0"] {
    grid-column: 1;
    grid-row: var(--landing-workflow-column);
  }
  .landing-workflow-node[data-lane="1"] {
    grid-column: 2;
    grid-row: var(--landing-workflow-column);
  }
  .landing-workflow-node:not([data-lane]) .landing-workflow-card {
    width: min(72%, 300px);
  }
  .landing-workflow-node:not([data-step="trigger"])::before, .landing-workflow-node:not([data-step="approval"])::after {
    content: none;
  }
}
.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-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="workflows"]) {
    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-feature[data-feature="multiplayer"] .landing-feature-visual {
    padding: 24px 0 0 20px;
  }
  .landing-faq-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .landing-faq-heading {
    position: static;
  }
}
@media (max-width: 600px) {
  .landing-feature[data-feature="workflows"] .landing-feature-visual {
    padding: 28px 16px 0;
  }
  .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;
  flex-wrap: wrap;
  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-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);
  }
  .site-header-actions > .landing-button-glass:hover {
    border-color: rgba(255, 255, 255, 0.22);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06));
  }
  .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: 1100px) {
  .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-pricing-facts {
    flex-direction: column;
    align-items: center;
  }
  .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 {
    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;
}
.landing-faq-body .compare-faq-answer a {
  color: var(--openbot-text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--openbot-duration-normal) ease;
}
.landing-faq-body .compare-faq-answer a:hover, .landing-faq-body .compare-faq-answer a:focus-visible {
  color: var(--openbot-logo-production);
}
.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);
}
.provider-adds-grid.plugin-uses {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0;
}
.plugin-uses .provider-add:first-child {
  border-color: var(--openbot-border);
  background: var(--openbot-bg-surface);
}
.plugin-uses .provider-add-title {
  margin-top: 0;
}
.provider-steps.plugin-connect {
  margin-top: 0;
}
.plugin-connect-fields {
  display: grid;
  gap: 6px;
  max-width: 68ch;
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--openbot-text-secondary);
  font-size: 15px;
  line-height: 1.6;
}
.plugin-connect-field-label {
  color: var(--openbot-text-primary);
  font-weight: 500;
}
@media (max-width: 640px) {
  .provider-adds-grid.plugin-uses {
    grid-template-columns: minmax(0, 1fr);
  }
}
@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-store[data-state="skipped"] {
  color: var(--openbot-text-dim);
}
.changelog-store[data-state="skipped"] .changelog-store-dot {
  background: transparent;
  box-shadow: inset 0 0 0 1px currentColor;
}
.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);
}
.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;
}
.brand-hero-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 32px;
  padding: clamp(32px, 4vw, 56px) 0 clamp(36px, 4.5vw, 56px);
}
.brand-hero-text {
  min-width: 0;
  max-width: 640px;
}
.brand-hero-title {
  margin-top: 0;
}
.brand-hero-intro {
  margin-top: 12px;
}
.brand-hero {
  padding-top: clamp(20px, 3vw, 36px);
}
.brand-stage {
  display: grid;
  place-items: center;
  aspect-ratio: 21 / 8;
  border-radius: var(--openbot-radius-modal);
  background: var(--openbot-logo-production);
}
.brand-stage-logo {
  width: auto;
  height: 82%;
}
.brand-stage .app-logo-background {
  visibility: hidden;
}
.brand-stage:has(.app-logo[data-easter-egg="party"]) {
  animation: brand-stage-party 1.2s cubic-bezier(0.77, 0, 0.175, 1) both;
}
@keyframes brand-stage-party {
  0%, 100% {
    background-color: var(--openbot-logo-production);
  }
  22% {
    background-color: var(--openbot-logo-dev);
  }
  48% {
    background-color: var(--openbot-logo-preview);
  }
  74% {
    background-color: var(--openbot-logo-production);
  }
}
.brand-stage .app-logo[data-interactive="true"]:focus-visible {
  box-shadow: none;
}
.brand-stage:has(.app-logo:focus-visible) {
  outline: 2px solid var(--openbot-text-primary);
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .brand-stage {
    cursor: pointer;
  }
}
@media (prefers-reduced-motion: reduce) {
  .brand-stage:has(.app-logo[data-easter-egg]) {
    animation: none;
  }
}
@media (max-width: 560px) {
  .brand-stage {
    aspect-ratio: 4 / 3;
  }
}
.site-logo-trigger {
  display: contents;
}
.site-logo-menu {
  z-index: 60;
  min-width: 236px;
  border-radius: 14px;
  background: rgba(22, 22, 22, 0.8);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(40px) saturate(180%);
  padding: 6px;
  outline: 0;
}
.site-logo-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 9px;
  padding: 8px 10px;
  color: var(--openbot-text-primary);
  font-size: 14px;
  cursor: default;
  outline: 0;
}
.site-logo-menu-item[data-highlighted] {
  background: rgba(255, 255, 255, 0.05);
}
.site-logo-menu-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--openbot-text-secondary);
}
.site-logo-menu-separator {
  margin: 6px 4px;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.brand-card-art[data-surface="dark"] {
  background: var(--openbot-bg-frame);
}
.brand-card-art[data-surface="light"] {
  background: var(--openbot-surface-light);
}
.brand-groups {
  display: grid;
  gap: clamp(40px, 5vw, 64px);
}
.brand-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 18px;
}
.brand-group-title {
  margin: 0;
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 600;
  letter-spacing: -0.03em;
}
.brand-space-toggle {
  margin-bottom: 0;
}
.brand-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.brand-cards[data-wide="true"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.brand-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--openbot-border-strong);
  border-radius: var(--openbot-radius-xl);
  background: var(--openbot-bg-surface);
}
.brand-card-art {
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  padding: 12%;
}
.brand-card-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: 100%;
}
.brand-cards[data-wide="true"] .brand-card-image {
  width: 100%;
  height: auto;
}
.brand-card-body {
  display: grid;
  gap: 14px;
  padding: 18px 20px 20px;
}
.brand-card-name {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
}
.brand-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
@media (max-width: 900px) {
  .brand-cards, .brand-cards[data-wide="true"] {
    grid-template-columns: minmax(0, 1fr);
  }
}
.marketplace-site a {
  text-decoration: none;
}
.marketplace-site-intro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
}
.marketplace-site-switch {
  display: flex;
  gap: 2px;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface);
  padding: 4px;
}
.marketplace-site-switch-option {
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  height: 36px;
  border-radius: var(--openbot-radius-pill);
  padding: 0 20px;
  color: var(--openbot-text-secondary);
  font-size: 14px;
  font-weight: 500;
  transition: background-color var(--openbot-duration-normal) ease, color var(--openbot-duration-normal) ease;
}
.marketplace-site-switch-option[aria-current="page"] {
  background: var(--openbot-surface-light);
  color: var(--openbot-text-on-light);
}
.marketplace-site-search {
  position: relative;
  margin-bottom: clamp(28px, 3.4vw, 40px);
}
.marketplace-site-search-icon {
  position: absolute;
  top: 50%;
  left: 18px;
  width: 17px;
  height: 17px;
  color: var(--openbot-text-dim);
  transform: translateY(-50%);
  pointer-events: none;
}
.marketplace-site-search-input {
  width: 100%;
  height: 48px;
  border: 1px solid transparent;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface);
  padding: 0 20px 0 46px;
  color: var(--openbot-text-primary);
  font: inherit;
  font-size: 15px;
}
.marketplace-site-search-input::placeholder {
  color: var(--openbot-text-dim);
}
.marketplace-site-search-input:focus-visible {
  border-color: var(--openbot-border-strong);
  outline: 0;
}
.marketplace-site-switch-option:focus-visible, .marketplace-site-crumb:focus-visible, .marketplace-site-view-all:focus-visible, .marketplace-site-row:focus-visible, .marketplace-site-feature:focus-visible {
  outline: 2px solid var(--openbot-border-strong);
  outline-offset: 2px;
}
.marketplace-site-list {
  margin-top: clamp(24px, 3vw, 36px);
}
.marketplace-site-categories .plugin-tag-button[aria-current="page"] {
  border-color: var(--openbot-surface-light);
  background: var(--openbot-surface-light);
  color: var(--openbot-text-on-light);
}
.marketplace-site-empty {
  padding: clamp(32px, 5vw, 56px) 0;
}
.marketplace-site-name {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  min-width: 0;
}
.marketplace-site-verified {
  flex: 0 0 auto;
  width: 0.9em;
  height: 0.9em;
  color: var(--openbot-text-dim);
}
.marketplace-site-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--openbot-accent-text);
  pointer-events: none;
}
.marketplace-site-avatar-art, .marketplace-site-avatar-art > svg {
  display: block;
  width: 100%;
  height: 100%;
}
.marketplace-site-avatar .bloub-avatar-svg {
  scale: calc(1.45 / 1.15);
}
.marketplace-site-glyph {
  position: relative;
  width: auto;
  height: 28%;
  color: var(--openbot-text-primary);
}
.marketplace-site-trust {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 0;
  color: var(--openbot-text-dim);
  font-size: 14px;
  line-height: 1.45;
}
.marketplace-site-trust > svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}
.marketplace-site-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
}
.marketplace-site-actions .plugin-actions-row {
  justify-content: flex-start;
}
.marketplace-site-missing {
  max-width: 34em;
}
.marketplace-site-missing-actions {
  display: flex;
  margin: 28px 0 clamp(80px, 12vw, 160px);
}
.marketplace-site-group + .marketplace-site-group {
  margin-top: clamp(40px, 5vw, 56px);
}
.marketplace-site-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.marketplace-site-group-title {
  margin: 0;
  color: var(--openbot-text-primary);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.marketplace-site-view-all {
  color: var(--openbot-text-dim);
  font-size: 14px;
  transition: color var(--openbot-duration-normal) ease;
}
.marketplace-site-features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.marketplace-site-feature {
  display: grid;
  justify-items: center;
  gap: 4px;
  height: 100%;
  border-radius: 16px;
  background: var(--openbot-bg-surface);
  padding: 22px 16px 20px;
  color: var(--openbot-text-primary);
  text-align: center;
  transition: background-color var(--openbot-duration-normal) ease;
}
.marketplace-site-feature-mark {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  margin-bottom: 12px;
}
.marketplace-site-feature-name {
  display: block;
  font-size: 15px;
  font-weight: 500;
  text-wrap: balance;
}
.marketplace-site-feature-name .marketplace-site-verified {
  display: inline;
  margin-left: 0.3em;
  vertical-align: -0.1em;
}
.marketplace-site-feature-by {
  color: var(--openbot-text-dim);
  font-size: 13px;
}
.marketplace-site-rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px clamp(24px, 4vw, 56px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.marketplace-site-row {
  display: flex;
  align-items: center;
  gap: 14px;
  border-radius: 14px;
  padding: 12px;
  margin-inline: -12px;
  color: var(--openbot-text-primary);
  transition: background-color var(--openbot-duration-normal) ease;
}
.marketplace-site-row-mark {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 44px;
  height: 44px;
}
.marketplace-site-row-text {
  display: grid;
  flex: 1 1 auto;
  gap: 2px;
  min-width: 0;
}
.marketplace-site-row-title, .marketplace-site-row-line {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.marketplace-site-row-title {
  font-size: 15px;
  font-weight: 500;
}
.marketplace-site-row-by {
  color: var(--openbot-text-secondary);
  font-weight: 400;
}
.marketplace-site-row-line {
  color: var(--openbot-text-dim);
  font-size: 14px;
}
.marketplace-site-row-add {
  flex: 0 0 auto;
  border-radius: var(--openbot-radius-pill);
  background: var(--openbot-bg-surface);
  padding: 7px 16px;
  color: var(--openbot-text-primary);
  font-size: 14px;
  font-weight: 500;
  transition: background-color var(--openbot-duration-normal) ease;
}
.marketplace-site-skill-icon {
  display: block;
  width: 88%;
  height: 88%;
  border-radius: 22%;
}
.marketplace-site-detail-head {
  padding-bottom: clamp(32px, 4vw, 44px);
  border-bottom: 1px solid var(--openbot-border-strong);
}
.marketplace-site-crumbs {
  margin-top: clamp(28px, 3.5vw, 50px);
}
.marketplace-site-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}
.marketplace-site-crumbs li + li::before {
  content: "/";
  margin-inline: 8px;
  color: var(--openbot-text-dim);
}
.marketplace-site-crumb {
  color: var(--openbot-text-dim);
  transition: color var(--openbot-duration-normal) ease;
}
.marketplace-site-detail-row {
  align-items: flex-start;
  margin-top: clamp(24px, 3vw, 32px);
}
.marketplace-site-detail-row .plugin-hero-heading {
  flex: 1 1 0;
  align-items: flex-start;
  min-width: min(100%, 440px);
}
.marketplace-site-detail-row .marketplace-site-actions {
  margin-top: 0;
}
.marketplace-site-detail-mark {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 96px;
  height: 96px;
}
.marketplace-site-detail-title {
  margin: 0;
}
.marketplace-site-detail-title .marketplace-site-name {
  display: inline;
}
.marketplace-site-detail-title .marketplace-site-verified {
  display: inline;
  margin-left: 0.25em;
  vertical-align: -0.08em;
}
.marketplace-site-detail-by {
  margin: 6px 0 0;
  color: var(--openbot-text-secondary);
  font-size: 15px;
}
.marketplace-site-detail-head .marketplace-site-trust {
  margin-top: 8px;
}
.marketplace-site-detail-description {
  max-width: 46em;
  margin: clamp(20px, 2.4vw, 28px) 0 0;
  color: var(--openbot-text-readable);
  font-size: 17px;
  line-height: 1.6;
}
.marketplace-site-detail-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  padding-top: clamp(32px, 4vw, 44px);
}
.marketplace-site-detail-main:empty {
  display: none;
}
.marketplace-site-detail-rows {
  grid-template-columns: minmax(0, 1fr);
}
.marketplace-site-detail-rows .marketplace-site-row-line {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
}
.marketplace-site-routine-mark {
  display: grid;
  place-items: center;
  width: 88%;
  height: 88%;
  border-radius: 22%;
  background: var(--openbot-bg-surface);
  color: var(--openbot-text-secondary);
}
.marketplace-site-routine-mark > svg {
  width: 45%;
  height: 45%;
}
.marketplace-site-facts .plugin-fact {
  grid-template-columns: 96px minmax(0, 1fr);
}
@media (hover: hover) and (pointer: fine) {
  .marketplace-site-view-all:hover, .marketplace-site-crumb:hover, .marketplace-site-switch-option:not([aria-current="page"]):hover {
    color: var(--openbot-text-primary);
  }
  a.marketplace-site-row:hover, .marketplace-site-feature:hover {
    background: var(--openbot-bg-surface);
  }
  .marketplace-site-feature:hover, a.marketplace-site-row:hover .marketplace-site-row-add {
    background: var(--openbot-bg-surface-raised);
  }
}
@media (max-width: 900px) {
  .marketplace-site-detail-body {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 640px) {
  .marketplace-site-switch {
    flex: 1 1 100%;
  }
  .marketplace-site-categories {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: -20px;
    padding-inline: 20px;
    scrollbar-width: none;
  }
  .marketplace-site-categories > * {
    flex: 0 0 auto;
  }
  .marketplace-site-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .marketplace-site-feature-mark {
    width: 72px;
    height: 72px;
  }
  .marketplace-site-rows {
    grid-template-columns: minmax(0, 1fr);
  }
  .marketplace-site-detail-mark {
    width: 72px;
    height: 72px;
  }
  .marketplace-site-detail-title {
    font-size: 26px;
  }
  .marketplace-site-actions, .marketplace-site-actions .plugin-actions-row, .marketplace-site-missing-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .marketplace-site-detail-row .marketplace-site-actions {
    flex: 1 1 100%;
  }
}
@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//home/ubuntu/openbot/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);
  stroke-width: var(--openbot-icon-stroke-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);
  stroke-width: var(--openbot-icon-stroke-lg);
}

.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: end;
  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: start;
  }
}

.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/home/ubuntu/openbot/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);
  stroke-width: var(--openbot-icon-stroke-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);
  stroke-width: var(--openbot-icon-stroke-lg);
}

.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: end;
  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: start;
  }
}

.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;
  }
}