/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@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-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-font-weight: initial;
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --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;
    }
  }
}

@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: .25rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-xl: 36rem;
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 12px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --color-ink: oklch(22% .02 264);
    --color-ink-soft: oklch(30% .02 264);
    --color-muted: oklch(50% .015 264);
    --color-paper: oklch(99.7% .002 75);
    --color-page: oklch(98.5% .004 75);
    --color-console: oklch(97.3% .005 75);
    --color-line: oklch(90% .008 75);
    --color-line-soft: oklch(93% .006 75);
    --color-brand: oklch(36% .09 268);
    --color-brand-dark: oklch(30% .09 268);
    --color-brand-soft: oklch(94% .012 268);
    --color-brand-ring: oklch(45% .09 268);
    --color-gold: #a37b12;
    --color-ok: oklch(32% .09 155);
    --color-ok-bg: oklch(92% .04 155);
    --color-ok-line: oklch(82% .06 155);
    --color-warn: oklch(36% .09 65);
    --color-warn-bg: oklch(92% .05 80);
    --color-warn-soft: oklch(96% .03 80);
    --color-warn-line: oklch(84% .07 80);
    --color-stop: oklch(40% .13 35);
    --color-stop-bg: oklch(92% .04 45);
    --color-stop-soft: oklch(96% .025 45);
    --color-stop-line: oklch(83% .07 40);
    --color-danger: oklch(55% .2 25);
    --color-danger-dark: oklch(47% .19 25);
    --font-thai: "Noto Sans Thai Variable", "Noto Sans Thai", "Sarabun", "IBM Plex Sans Thai",
    "Leelawadee UI", system-ui, -apple-system, "Segoe UI", sans-serif;
    --text-meta: .8125rem;
    --text-body: 1rem;
    --text-body--line-height: 1.8;
    --text-lead: 1.0625rem;
    --text-display: 1.875rem;
    --shadow-pop: 0 2px 6px oklch(22% .02 264 / .08),
    0 12px 28px oklch(22% .02 264 / .14);
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    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;
    -webkit-text-decoration: 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 {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.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 {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :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)) {
      ::placeholder {
        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 {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-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"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])), [hidden] {
    display: none !important;
  }

  html {
    font-family: var(--font-thai);
    word-break: normal;
    overflow-wrap: break-word;
    -webkit-text-size-adjust: 100%;
  }

  body {
    background-color: var(--color-page);
    min-height: 100dvh;
    color: var(--color-ink);
    font-size: var(--text-body);
    line-height: var(--text-body--line-height);
    margin: 0;
  }

  button, input, textarea {
    font: inherit;
    color: inherit;
  }

  :where(a, button, input, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--color-gold);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
  }

  h1, h2, h3 {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    margin: 0;
  }

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

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

  .skip-link {
    left: calc(var(--spacing) * 3);
    z-index: 50;
    --tw-translate-y: calc(var(--spacing) * -20);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    border-radius: var(--radius-md);
    background-color: var(--color-brand);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-paper);
    text-decoration-line: none;
    transition: transform .15s;
    position: absolute;
  }

  .skip-link:focus-visible {
    --tw-translate-y: calc(var(--spacing) * 3);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .icon {
    vertical-align: -.18em;
    flex: none;
    display: inline-block;
  }

  .badge {
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-sm);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-line);
    background-color: var(--color-brand-soft);
    width: fit-content;
    padding-inline: calc(var(--spacing) * 2);
    padding-block: var(--spacing);
    color: var(--color-brand-dark);
    font-size: var(--text-meta);
    display: inline-flex;
  }

  .empty {
    color: var(--color-muted);
    font-size: var(--text-meta);
  }

  button:not(.unstyled) {
    cursor: pointer;
  }

  .composer-send, .primary, .danger {
    min-height: calc(var(--spacing) * 11);
    justify-content: center;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    background-color: var(--color-brand);
    padding-inline: calc(var(--spacing) * 5);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-paper);
    border-width: 1px;
    border-color: #0000;
    transition: background-color .15s, transform .15s;
    display: inline-flex;
  }

  .composer-send:hover, .primary:hover {
    background-color: var(--color-brand-dark);
  }

  .composer-send:disabled, .primary:disabled, .secondary:disabled, .danger:disabled {
    cursor: not-allowed;
    opacity: .45;
  }

  .danger {
    background-color: var(--color-danger);
  }

  .danger:hover {
    background-color: var(--color-danger-dark);
  }

  .secondary, .retry {
    min-height: calc(var(--spacing) * 11);
    justify-content: center;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-line);
    background-color: var(--color-paper);
    padding-inline: calc(var(--spacing) * 4);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-ink);
    transition: border-color .15s, background-color .15s;
    display: inline-flex;
  }

  .secondary:hover, .retry:hover {
    border-color: var(--color-brand);
    background-color: var(--color-brand-soft);
  }

  @keyframes fade-in-up {
    from {
      opacity: 0;
      transform: translateY(8px);
    }

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

  @keyframes float-orb {
    0%, 100% {
      transform: translate(0);
    }

    33% {
      transform: translate(12px, -16px);
    }

    66% {
      transform: translate(-10px, 10px);
    }
  }

  .animate-fade-in-up {
    animation: .4s cubic-bezier(.16, 1, .3, 1) both fade-in-up;
  }

  .ambient-bg {
    isolation: isolate;
    position: relative;
  }

  .ambient-bg:before {
    content: "";
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(60% 40% at 50% 0, oklch(50% .09 268 / .06), #0000 70%), radial-gradient(40% 30% at 90% 100%, oklch(60% .1 185 / .04), #0000 60%), radial-gradient(35% 25% at 10% 80%, oklch(55% .14 130 / .03), #0000 60%);
    position: absolute;
    inset: 0;
  }

  .ambient-orb {
    filter: blur(40px);
    opacity: .6;
    z-index: -1;
    border-radius: 50%;
    animation: 12s ease-in-out infinite float-orb;
    position: absolute;
  }

  kbd {
    border-radius: var(--radius-xs);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-line);
    background-color: var(--color-console);
    padding-inline: var(--spacing);
    padding-block: calc(var(--spacing) * .5);
    font-family: ui-monospace, Cascadia Mono, Consolas, monospace;
    font-size: .6rem;
  }

  @media (prefers-reduced-motion: reduce) {
    .animate-fade-in-up, .ambient-orb {
      animation-duration: .01ms;
      animation-iteration-count: 1;
    }
  }

  .app-frame {
    grid-template-columns: 16rem minmax(0, 1fr);
    width: 100%;
    height: 100dvh;
    display: grid;
  }

  @media (min-width: 1024px) {
    .app-frame {
      grid-template-columns: 18rem minmax(0, 1fr);
    }
  }

  .app-frame.collapsed {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidebar-backdrop {
    display: none;
  }

  @media (max-width: 900px) {
    .app-frame {
      grid-template-columns: minmax(0, 1fr);
    }

    .app-frame .sidebar {
      z-index: 40;
      width: calc(var(--spacing) * 72);
      box-shadow: var(--shadow-pop);
      inset-block: 0;
      position: fixed;
      left: 0;
    }

    .sidebar-backdrop {
      z-index: 30;
      cursor: default;
      border-style: var(--tw-border-style);
      background: oklch(22% .02 264 / .35);
      border-width: 0;
      padding: 0;
      display: block;
      position: fixed;
      inset: 0;
    }
  }

  .sidebar {
    gap: calc(var(--spacing) * 3);
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
    border-color: var(--color-line);
    background-color: var(--color-console);
    padding: calc(var(--spacing) * 4);
    flex-direction: column;
    height: 100dvh;
    display: flex;
    position: sticky;
    top: 0;
    overflow-y: auto;
  }

  .sidebar-brand {
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding-bottom: var(--spacing);
    display: flex;
  }

  .brand-badge {
    height: calc(var(--spacing) * 10);
    width: calc(var(--spacing) * 10);
    border-radius: var(--radius-lg);
    background-color: var(--color-brand);
    color: var(--color-paper);
    flex: none;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .brand-name {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    font-size: var(--text-lead);
    letter-spacing: -.01em;
    display: grid;
  }

  .brand-sub {
    --tw-font-weight: var(--font-weight-normal);
    min-width: 0;
    font-weight: var(--font-weight-normal);
    color: var(--color-muted);
    font-size: var(--text-meta);
    display: grid;
  }

  .brand-sub > span {
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
  }

  .brand-identity {
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    display: flex;
  }

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

  .brand-role {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-line);
    padding-inline: calc(var(--spacing) * 1.5);
    border-radius: 3.40282e38px;
    flex: none;
    font-size: .65rem;
  }

  .sidebar-new {
    width: 100%;
  }

  .sidebar-search {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-line);
    background-color: var(--color-paper);
    padding-inline: calc(var(--spacing) * 3);
    display: flex;
  }

  .sidebar-search .icon {
    color: var(--color-muted);
    flex: none;
  }

  .sidebar-search:focus-within {
    border-color: #40528766;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .sidebar-search:focus-within {
      border-color: color-mix(in oklab, var(--color-brand-ring) 40%, transparent);
    }
  }

  .sidebar-search:focus-within {
    box-shadow: 0 0 0 1px var(--color-brand);
  }

  .sidebar-search input {
    min-height: calc(var(--spacing) * 10);
    border-style: var(--tw-border-style);
    width: 100%;
    font-size: var(--text-meta);
    background-color: #0000;
    border-width: 0;
    outline: none;
  }

  .history {
    min-height: 0;
    padding-top: var(--spacing);
    flex: 1;
    overflow-y: auto;
  }

  .history-group + .history-group {
    margin-top: calc(var(--spacing) * 3);
  }

  .history-label {
    margin-top: 0;
    margin-bottom: var(--spacing);
    padding-inline: var(--spacing);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-muted);
    font-size: .75rem;
  }

  .history-item {
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    width: 100%;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    text-align: left;
    color: var(--color-ink-soft);
    font-size: var(--text-meta);
    background-color: #0000;
    border-width: 0;
    transition: background-color .12s;
    display: block;
    overflow: hidden;
  }

  .history-item:hover {
    background-color: var(--color-brand-soft);
  }

  .history-item[aria-current="true"] {
    background-color: var(--color-brand-soft);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-brand-dark);
  }

  .history-empty {
    padding-inline: var(--spacing);
    color: var(--color-muted);
    font-size: var(--text-meta);
    margin: 0;
  }

  .sidebar-foot {
    gap: calc(var(--spacing) * 2);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-line);
    padding-top: calc(var(--spacing) * 3);
    display: grid;
  }

  .sidebar-links {
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    display: flex;
  }

  .sidebar-link {
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-style: var(--tw-border-style);
    padding-inline: var(--spacing);
    color: var(--color-muted);
    background-color: #0000;
    border-width: 0;
    font-size: .65rem;
    text-decoration: none;
    display: inline-flex;
  }

  .sidebar-link:hover {
    color: var(--color-ink);
  }

  .main-pane {
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-width: 0;
    height: 100dvh;
    display: grid;
  }

  .chat-page {
    --surface-ground: var(--color-page);
  }

  .admin-page {
    --surface-ground: var(--color-console);
  }

  .topbar {
    height: calc(var(--spacing) * 14);
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-line);
    padding-inline: calc(var(--spacing) * 3);
    display: flex;
  }

  @media (min-width: 40rem) {
    .topbar {
      padding-inline: calc(var(--spacing) * 4);
    }
  }

  .topbar {
    background: var(--surface-ground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .topbar {
      background: color-mix(in oklab, var(--surface-ground) 80%, transparent);
    }
  }

  .topbar {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }

  .pill {
    align-items: center;
    gap: var(--spacing);
    border-style: var(--tw-border-style);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * .5);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    border-width: 1px;
    border-radius: 3.40282e38px;
    font-size: .75rem;
    display: inline-flex;
  }

  .pill-sm {
    font-size: .65rem;
  }

  .pill-brand {
    border-color: #4052874d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .pill-brand {
      border-color: color-mix(in oklab, var(--color-brand-ring) 30%, transparent);
    }
  }

  .pill-brand {
    background-color: var(--color-brand-soft);
    color: var(--color-brand);
  }

  .pill-warn {
    border-color: var(--color-warn-line);
    background-color: var(--color-warn-soft);
    color: var(--color-warn);
  }

  .pill-stop {
    border-color: var(--color-stop-line);
    background-color: var(--color-stop-soft);
    color: var(--color-stop);
  }

  .pill-neutral {
    border-color: var(--color-line);
    background-color: var(--color-brand-soft);
    color: var(--color-brand-dark);
  }

  .topbar-ident {
    align-items: center;
    gap: calc(var(--spacing) * 3);
    min-width: 0;
    display: flex;
  }

  .icon-button {
    padding-inline: calc(var(--spacing) * 2.5);
    flex: none;
    min-height: 2.5rem;
  }

  .topbar-title {
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-lead);
    max-width: 44ch;
    margin: 0;
    overflow: hidden;
  }

  .topbar-heading {
    min-width: 0;
    display: grid;
  }

  .topbar-sub {
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-muted);
    font-size: var(--text-meta);
    margin: 0;
    line-height: 1.4;
    overflow: hidden;
  }

  .topbar-tools {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    flex: none;
    display: flex;
  }

  .topbar-staff {
    padding-inline: calc(var(--spacing) * 3);
    min-height: 2.5rem;
    font-size: var(--text-meta);
  }

  .main-pane .messages {
    width: 100%;
    overflow-y: auto;
  }

  .messages-inner {
    width: 100%;
    padding-inline: calc(var(--spacing) * 5);
    max-width: 52rem;
    margin-inline: auto;
  }

  .main-pane .messages, .history, .console-body, .sidebar .queue {
    scrollbar-width: thin;
    scrollbar-color: var(--color-line) transparent;
  }

  .composer-zone {
    width: 100%;
    padding-inline: calc(var(--spacing) * 5);
    padding-top: var(--spacing);
    padding-bottom: calc(var(--spacing) * 4);
    max-width: 52rem;
    margin-inline: auto;
  }

  .composer-hint {
    margin-inline: 0;
    margin-top: calc(var(--spacing) * 2);
    text-align: center;
    color: var(--color-muted);
    margin-bottom: 0;
    font-size: .75rem;
  }

  .chat-page {
    background-color: var(--color-page);
  }

  .messages {
    padding-block: calc(var(--spacing) * 6);
    flex-direction: column;
    display: flex;
  }

  #empty-state {
    padding-top: calc(var(--spacing) * 10);
    padding-bottom: calc(var(--spacing) * 4);
    text-align: center;
    flex-direction: column;
    align-items: center;
    display: flex;
  }

  .hero-badge-wrap {
    margin-bottom: calc(var(--spacing) * 5);
    display: inline-flex;
    position: relative;
  }

  .hero-badge-glow {
    border-radius: var(--radius-xl);
    background-color: #29396c33;
    position: absolute;
    inset: 0;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .hero-badge-glow {
      background-color: color-mix(in oklab, var(--color-brand) 20%, transparent);
    }
  }

  .hero-badge-glow {
    z-index: -1;
    filter: blur(24px);
  }

  .hero-badge {
    height: calc(var(--spacing) * 16);
    width: calc(var(--spacing) * 16);
    border-radius: var(--radius-xl);
    background-color: var(--color-brand);
    color: var(--color-paper);
    box-shadow: var(--shadow-pop);
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .hero-stats {
    margin-top: calc(var(--spacing) * 5);
    justify-content: center;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    flex-wrap: wrap;
    display: flex;
  }

  .hero-stat {
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    display: flex;
  }

  .hero-stat .icon {
    color: var(--color-muted);
  }

  .hero-stat-value {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
  }

  .hero-stat-label {
    color: var(--color-muted);
    font-size: var(--text-meta);
  }

  .hero-divider {
    height: calc(var(--spacing) * 4);
    background-color: var(--color-line);
    width: 1px;
  }

  .knowledge-list {
    margin-top: calc(var(--spacing) * 3);
    gap: calc(var(--spacing) * 1.5);
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: 34rem;
    display: grid;
  }

  .knowledge-row {
    align-items: center;
    gap: calc(var(--spacing) * 2.5);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-line-soft);
    background-color: #fffefd99;
    display: flex;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .knowledge-row {
      background-color: color-mix(in oklab, var(--color-paper) 60%, transparent);
    }
  }

  .knowledge-row {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    text-align: left;
  }

  .knowledge-icon {
    height: calc(var(--spacing) * 6);
    width: calc(var(--spacing) * 6);
    border-radius: var(--radius-sm);
    background-color: #29396c1a;
    flex: none;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .knowledge-icon {
      background-color: color-mix(in oklab, var(--color-brand) 10%, transparent);
    }
  }

  .knowledge-icon {
    color: var(--color-brand);
  }

  .knowledge-title {
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    color: var(--color-ink-soft);
    flex: 1;
    font-size: .75rem;
    overflow: hidden;
  }

  .knowledge-year {
    border-radius: var(--radius-sm);
    background-color: var(--color-console);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * .5);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
    flex: none;
    font-size: .6rem;
  }

  .empty-title {
    font-size: var(--text-display);
    letter-spacing: -.015em;
    margin-top: 0;
    margin-bottom: 0;
  }

  .empty-lede {
    margin-top: calc(var(--spacing) * 3);
    max-width: 58ch;
    color: var(--color-ink-soft);
    font-size: var(--text-lead);
    margin-bottom: 0;
  }

  .examples-label {
    margin-top: calc(var(--spacing) * 8);
    align-items: center;
    gap: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-brand);
    font-size: var(--text-meta);
    margin-bottom: 0;
    display: inline-flex;
  }

  .example-grid {
    margin-top: calc(var(--spacing) * 3);
    gap: calc(var(--spacing) * 3);
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    display: grid;
  }

  @media (min-width: 40rem) {
    .example-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .example-grid {
    max-width: 52rem;
  }

  .example-q {
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-line);
    background-color: var(--color-paper);
    width: 100%;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    transition: border-color .15s, background-color .15s;
    display: flex;
  }

  .example-q:hover {
    border-color: var(--color-brand);
    background-color: var(--color-brand-soft);
  }

  .example-icon {
    height: calc(var(--spacing) * 9);
    width: calc(var(--spacing) * 9);
    border-radius: var(--radius-md);
    background-color: var(--color-brand-soft);
    color: var(--color-brand-dark);
    flex: none;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .example-body {
    gap: calc(var(--spacing) * .5);
    flex: 1;
    min-width: 0;
    display: grid;
  }

  .example-tag {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-brand);
    font-size: .75rem;
  }

  .example-text {
    color: var(--color-ink-soft);
    font-size: var(--text-meta);
    line-height: 1.65;
  }

  .example-arrow {
    color: var(--color-muted);
    flex: none;
  }

  .message {
    gap: calc(var(--spacing) * 3);
    width: 100%;
    padding-block: calc(var(--spacing) * 2);
    animation: .4s cubic-bezier(.16, 1, .3, 1) both fade-in-up;
    display: flex;
  }

  .message.user {
    flex-direction: row-reverse;
  }

  .avatar {
    height: calc(var(--spacing) * 8);
    width: calc(var(--spacing) * 8);
    background-color: var(--color-brand);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-paper);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    border-radius: 3.40282e38px;
    flex: none;
    justify-content: center;
    align-items: center;
    font-size: .7rem;
    display: flex;
  }

  .message.user .avatar {
    background-color: var(--color-console);
    color: var(--color-ink-soft);
  }

  .avatar.avatar-operator {
    background-color: var(--color-warn-soft);
    color: var(--color-warn);
  }

  .message-body {
    gap: calc(var(--spacing) * 2);
    flex-direction: column;
    min-width: 0;
    max-width: min(46rem, 85%);
    display: flex;
  }

  .message.user .message-body {
    align-items: flex-end;
    max-width: min(32rem, 85%);
  }

  .message-name {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    font-size: .75rem;
    display: flex;
  }

  .bubble {
    white-space: pre-wrap;
  }

  .message.user .bubble {
    background-color: var(--color-brand);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2.5);
    color: var(--color-paper);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    border-radius: var(--radius-xl) var(--radius-xs) var(--radius-xl) var(--radius-xl);
    font-size: .95rem;
    line-height: 1.75;
  }

  .message.assistant .bubble {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-line);
    background-color: var(--color-paper);
    width: 100%;
    min-width: 0;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    border-radius: var(--radius-xs) var(--radius-xl) var(--radius-xl) var(--radius-xl);
  }

  .message.assistant .bubble.bubble-operator {
    border-color: var(--color-warn-line);
    background-color: var(--color-warn-soft);
  }

  .message.assistant .bubble.bubble-error {
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    flex-direction: column;
    display: flex;
  }

  .error-text {
    align-items: flex-start;
    gap: calc(var(--spacing) * 2);
    color: var(--color-stop);
    font-size: var(--text-meta);
    margin: 0;
    display: flex;
  }

  .error-text .icon {
    margin-top: calc(var(--spacing) * .5);
    flex: none;
  }

  .answer-actions {
    align-items: center;
    gap: var(--spacing);
    display: flex;
  }

  .answer-action {
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-sm);
    border-style: var(--tw-border-style);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.5);
    color: var(--color-muted);
    background-color: #0000;
    border-width: 0;
    font-size: .75rem;
    transition: background-color .12s, color .12s;
    display: inline-flex;
  }

  .answer-action:hover {
    background-color: var(--color-console);
    color: var(--color-ink);
  }

  .bubble p {
    margin-block: 0;
  }

  .bubble p + p {
    margin-top: calc(var(--spacing) * 3);
  }

  .confidence {
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-style: var(--tw-border-style);
    width: fit-content;
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * .5);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    border-width: 1px;
    border-radius: 3.40282e38px;
    margin: 0;
    font-size: .7rem;
    display: inline-flex;
  }

  .confidence-dot {
    height: calc(var(--spacing) * 2);
    width: calc(var(--spacing) * 2);
    background-color: currentColor;
    border-radius: 3.40282e38px;
    flex: none;
    display: inline-block;
  }

  .confidence-green {
    border-color: var(--color-ok-line);
    background-color: var(--color-ok-bg);
    color: var(--color-ok);
  }

  .confidence-yellow {
    border-color: var(--color-warn-line);
    background-color: var(--color-warn-bg);
    color: var(--color-warn);
  }

  .confidence-red {
    border-color: var(--color-stop-line);
    background-color: var(--color-stop-bg);
    color: var(--color-stop);
  }

  .cite-marker {
    margin-inline: calc(var(--spacing) * .5);
    height: calc(var(--spacing) * 5);
    min-width: calc(var(--spacing) * 5);
    border-radius: var(--radius-xs);
    border-style: var(--tw-border-style);
    background-color: var(--color-brand-soft);
    padding-inline: var(--spacing);
    vertical-align: baseline;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-brand-dark);
    font-variant-numeric: tabular-nums;
    border-width: 0;
    justify-content: center;
    align-items: center;
    font-size: .7rem;
    transition: transform .15s, background-color .15s, color .15s;
    display: inline-flex;
    transform: translateY(-.15em);
  }

  .cite-marker:hover, .cite-marker.active {
    background-color: var(--color-brand);
    color: var(--color-paper);
    transform: translateY(-.15em) scale(1.1);
  }

  .sources {
    min-width: 0;
  }

  .sources-heading {
    margin-top: 0;
    margin-bottom: calc(var(--spacing) * 1.5);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-muted);
    font-size: .75rem;
  }

  .sources-grid {
    gap: calc(var(--spacing) * 1.5);
    display: grid;
  }

  @media (min-width: 40rem) {
    .sources-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .source-card {
    align-items: flex-start;
    gap: calc(var(--spacing) * 2.5);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-line);
    background-color: var(--color-paper);
    width: 100%;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2.5);
    text-align: left;
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    border-radius: var(--radius-md);
    transition: border-color .15s;
    display: flex;
  }

  .source-card.active {
    border-color: var(--color-brand);
  }

  .source-index {
    margin-top: calc(var(--spacing) * .5);
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
    border-radius: var(--radius-xs);
    background-color: var(--color-brand-soft);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-brand-dark);
    font-variant-numeric: tabular-nums;
    flex: none;
    justify-content: center;
    align-items: center;
    font-size: .7rem;
    display: flex;
  }

  .source-main {
    gap: calc(var(--spacing) * .5);
    min-width: 0;
    display: grid;
  }

  .source-title {
    align-items: flex-start;
    gap: calc(var(--spacing) * 1.5);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-ink);
    font-size: .75rem;
    line-height: 1.55;
    display: flex;
  }

  .source-title .icon {
    margin-top: calc(var(--spacing) * .5);
    color: var(--color-brand);
    flex: none;
  }

  .source-sections {
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
    font-size: .7rem;
  }

  .banner-text {
    margin-top: calc(var(--spacing) * 3);
    border-left-style: var(--tw-border-style);
    border-left-width: 2px;
    border-color: var(--color-warn-line);
    padding-left: calc(var(--spacing) * 3);
    color: var(--color-muted);
    font-size: var(--text-meta);
  }

  .bubble.typing {
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    display: flex;
  }

  .dot {
    height: calc(var(--spacing) * 1.5);
    width: calc(var(--spacing) * 1.5);
    background-color: var(--color-brand);
    opacity: .4;
    border-radius: 3.40282e38px;
    animation: 1.2s ease-in-out infinite pulse-dot;
    display: inline-block;
  }

  .dot:nth-child(2) {
    animation-delay: .15s;
  }

  .dot:nth-child(3) {
    animation-delay: .3s;
  }

  @keyframes pulse-dot {
    0%, 100% {
      opacity: .25;
      transform: translateY(0);
    }

    50% {
      opacity: .9;
      transform: translateY(-2px);
    }
  }

  .system-notice {
    margin-block: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-line);
    background-color: var(--color-console);
    padding-inline: calc(var(--spacing) * 3.5);
    padding-block: var(--spacing);
    text-align: center;
    color: var(--color-muted);
    font-size: var(--text-meta);
    align-self: center;
  }

  .messages .system-notice {
    align-self: center;
  }

  .composer {
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-line);
    background-color: var(--color-paper);
    box-shadow: var(--shadow-pop);
    transition: border-color .15s;
    position: relative;
  }

  .composer:focus-within {
    border-color: #40528766;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .composer:focus-within {
      border-color: color-mix(in oklab, var(--color-brand-ring) 40%, transparent);
    }
  }

  .composer:focus-within {
    box-shadow: 0 0 0 1px var(--color-brand), 0 0 24px -4px oklch(50% .09 268 / .15);
  }

  .composer textarea {
    resize: none;
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    width: 100%;
    padding-inline: calc(var(--spacing) * 4);
    padding-top: calc(var(--spacing) * 3.5);
    padding-bottom: calc(var(--spacing) * 12);
    background-color: #0000;
    border-width: 0;
    outline: none;
    min-height: 3rem;
    max-height: 10rem;
    font-size: .95rem;
    line-height: 1.75;
    display: block;
  }

  .composer-actions {
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 2);
    inset-inline: 0;
    display: flex;
    position: absolute;
    bottom: 0;
  }

  .composer-hints {
    align-items: center;
    gap: var(--spacing);
    padding-left: var(--spacing);
    color: var(--color-muted);
    display: none;
  }

  @media (min-width: 40rem) {
    .composer-hints {
      display: flex;
    }
  }

  .composer-hints {
    font-size: .65rem;
  }

  .composer-attach {
    height: calc(var(--spacing) * 8);
    width: calc(var(--spacing) * 8);
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    color: var(--color-muted);
    background-color: #0000;
    border-width: 0;
    justify-content: center;
    align-items: center;
    display: inline-flex;
  }

  .composer-attach:disabled {
    cursor: not-allowed;
    opacity: .45;
  }

  .composer-send {
    min-height: 2rem;
    height: calc(var(--spacing) * 8);
    width: calc(var(--spacing) * 8);
    border-radius: var(--radius-md);
    padding: 0;
  }

  .relay-strip {
    margin-bottom: calc(var(--spacing) * 2);
    justify-content: center;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-warn-line);
    background-color: var(--color-warn-soft);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    color: var(--color-warn);
    font-size: var(--text-meta);
    display: flex;
  }

  .relay-strip.offline {
    border-color: var(--color-stop-line);
    background-color: var(--color-stop-soft);
    color: var(--color-stop);
  }

  .quick-replies {
    margin-bottom: calc(var(--spacing) * 2);
    gap: calc(var(--spacing) * 1.5);
    flex-wrap: wrap;
    display: flex;
  }

  .quick-reply {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-line);
    background-color: var(--color-paper);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: var(--spacing);
    color: var(--color-ink-soft);
    border-radius: 3.40282e38px;
    font-size: .75rem;
    transition: border-color .12s, background-color .12s;
  }

  .quick-reply:hover {
    border-color: var(--color-brand);
    background-color: var(--color-brand-soft);
  }

  .quick-reply:disabled {
    cursor: not-allowed;
    opacity: .45;
  }

  @media (min-width: 1024px) {
    .message.user .bubble {
      max-width: 52ch;
    }
  }

  .admin-page {
    background-color: var(--color-console);
  }

  .queue {
    gap: calc(var(--spacing) * 2);
    display: grid;
  }

  .queue-search {
    min-height: calc(var(--spacing) * 10);
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-line);
    background-color: var(--color-paper);
    padding-inline: calc(var(--spacing) * 3);
    display: flex;
  }

  .queue-search .icon {
    color: var(--color-muted);
    flex: none;
  }

  .queue-search:focus-within {
    border-color: #40528766;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .queue-search:focus-within {
      border-color: color-mix(in oklab, var(--color-brand-ring) 40%, transparent);
    }
  }

  .queue-search:focus-within {
    box-shadow: 0 0 0 1px var(--color-brand);
  }

  .queue-search input {
    border-style: var(--tw-border-style);
    min-width: 0;
    font-size: var(--text-meta);
    background-color: #0000;
    border-width: 0;
    outline: none;
    flex: 1;
  }

  .queue-limit-note {
    border-radius: var(--radius-md);
    background-color: var(--color-brand-soft);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.5);
    color: var(--color-brand-dark);
    margin: 0;
    font-size: .7rem;
  }

  .queue-group {
    gap: calc(var(--spacing) * 2);
    display: grid;
  }

  .queue-group + .queue-group {
    margin-top: var(--spacing);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-line);
    padding-top: calc(var(--spacing) * 3);
  }

  .ticket {
    gap: var(--spacing);
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-line);
    background-color: var(--color-paper);
    width: 100%;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2.5);
    text-align: left;
    transition: border-color .15s, background-color .15s;
    display: grid;
  }

  .ticket:hover, .ticket[aria-current="true"] {
    border-color: var(--color-brand);
    background-color: var(--color-brand-soft);
  }

  .ticket[aria-current="true"] .ticket-title {
    color: var(--color-brand-dark);
  }

  .ticket-head {
    justify-content: space-between;
    align-items: baseline;
    gap: calc(var(--spacing) * 2);
    display: flex;
  }

  .ticket-title {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    font-size: var(--text-meta);
  }

  .meta {
    column-gap: calc(var(--spacing) * 2);
    row-gap: calc(var(--spacing) * .5);
    color: var(--color-muted);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    font-size: .75rem;
    display: grid;
  }

  .meta-cell {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .ticket-owner {
    color: var(--color-muted);
    font-size: .75rem;
  }

  .ticket-owner.mine {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-brand);
  }

  .ticket-owner.other {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-muted);
  }

  .conversation-empty {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    --tw-border-style: dashed;
    border-style: dashed;
    border-width: 1px;
    border-color: var(--color-line);
    background-color: var(--color-paper);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 10);
    text-align: center;
  }

  .viewer-notice {
    max-width: var(--container-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-line);
    background-color: var(--color-paper);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2.5);
    text-align: center;
    color: var(--color-muted);
    font-size: var(--text-meta);
    border-radius: 3.40282e38px;
    margin-block: auto;
    margin-inline: auto;
  }

  .mode-note {
    border-left-style: var(--tw-border-style);
    border-left-width: 2px;
    border-color: var(--color-warn-line);
    background-color: var(--color-warn-soft);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-ink-soft);
    font-size: var(--text-meta);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    margin: 0;
  }

  .mode-note.stop {
    border-color: var(--color-stop-line);
    background-color: var(--color-stop-soft);
    color: var(--color-stop);
  }

  .danger-text {
    color: var(--color-danger);
  }

  .inline-form {
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-line);
    background-color: var(--color-console);
    padding: calc(var(--spacing) * 3);
    display: grid;
  }

  .inline-form-title {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    font-size: var(--text-meta);
    margin: 0;
  }

  .chips {
    gap: calc(var(--spacing) * 2);
    flex-wrap: wrap;
    display: flex;
  }

  .chip {
    min-height: calc(var(--spacing) * 11);
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-line);
    background-color: var(--color-paper);
    padding-inline: calc(var(--spacing) * 3);
    font-size: var(--text-meta);
    display: inline-flex;
  }

  .chip:has(input:checked) {
    border-color: var(--color-brand);
    background-color: var(--color-brand-soft);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  .chip:has(input:focus-visible) {
    outline: 3px solid var(--color-gold);
    outline-offset: 2px;
  }

  .inline-form input[type="text"], .inline-form input:not([type]) {
    min-height: calc(var(--spacing) * 11);
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-line);
    background-color: var(--color-paper);
    padding-inline: calc(var(--spacing) * 3);
  }

  .inline-form-actions {
    gap: calc(var(--spacing) * 2);
    flex-wrap: wrap;
    display: flex;
  }

  .console-status {
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-line);
    padding-bottom: calc(var(--spacing) * 2);
    display: flex;
  }

  .console-status-text {
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    color: var(--color-muted);
    font-size: .7rem;
    overflow: hidden;
  }

  .console-status-error {
    color: var(--color-stop);
  }

  .console-status-error:empty {
    display: none;
  }

  .sidebar .queue {
    flex: 1;
    align-content: flex-start;
    min-height: 0;
    overflow-y: auto;
  }

  .queue-heading {
    margin-top: 0;
    margin-bottom: var(--spacing);
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    padding-inline: var(--spacing);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-muted);
    font-size: .75rem;
    display: flex;
  }

  .queue-heading .icon {
    flex: none;
  }

  .console-body {
    gap: calc(var(--spacing) * 2);
    width: 100%;
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 4);
    flex-direction: column;
    max-width: 52rem;
    min-height: 0;
    margin-inline: auto;
    display: flex;
    overflow-y: auto;
  }

  .console-empty {
    padding: calc(var(--spacing) * 6);
    flex: 1;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .conversation-messages {
    gap: calc(var(--spacing) * 3);
    padding-block: var(--spacing);
    flex-direction: column;
    display: flex;
  }

  .relay-message {
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    width: 100%;
    animation: .4s cubic-bezier(.16, 1, .3, 1) both fade-in-up;
    display: flex;
  }

  .relay-message.operator {
    flex-direction: row-reverse;
  }

  .relay-content {
    gap: var(--spacing);
    flex-direction: column;
    min-width: 0;
    max-width: min(46rem, 85%);
    display: flex;
  }

  .relay-message.operator .relay-content {
    align-items: flex-end;
    max-width: min(32rem, 85%);
  }

  .relay-meta {
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    padding-inline: var(--spacing);
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
    font-size: .75rem;
    display: flex;
  }

  .relay-body {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2.5);
    white-space: pre-wrap;
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    margin: 0;
    font-size: .95rem;
    line-height: 1.75;
  }

  .relay-message.user .relay-body {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-line);
    background-color: var(--color-paper);
    padding-block: calc(var(--spacing) * 3);
    border-radius: var(--radius-xs) var(--radius-xl) var(--radius-xl) var(--radius-xl);
  }

  .relay-message.operator .relay-body {
    background-color: var(--color-brand);
    color: var(--color-paper);
    border-radius: var(--radius-xl) var(--radius-xs) var(--radius-xl) var(--radius-xl);
  }

  .relay-system-message {
    max-width: var(--container-xl);
    gap: var(--spacing);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-line);
    background-color: var(--color-console);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    text-align: center;
    color: var(--color-muted);
    font-size: var(--text-meta);
    margin-inline: auto;
    display: grid;
  }

  .relay-system-meta {
    justify-content: center;
    align-items: center;
    gap: var(--spacing);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-ink-soft);
    margin: 0;
    font-size: .7rem;
    display: flex;
  }

  .relay-system-body {
    white-space: pre-wrap;
    margin: 0;
  }

  .badge.delivery-pending {
    border-color: var(--color-warn-line);
    background-color: var(--color-warn-bg);
    color: var(--color-warn);
  }

  .badge.delivery-failed {
    border-color: var(--color-stop-line);
    background-color: var(--color-stop-bg);
    color: var(--color-stop);
  }

  .composer-block-hint {
    margin: 0;
    margin-bottom: calc(var(--spacing) * 2);
    text-align: center;
    color: var(--color-muted);
    font-size: var(--text-meta);
  }

  .conversation-composer {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-line);
    background-color: var(--color-paper);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    box-shadow: var(--shadow-pop);
    transition: border-color .15s;
    display: flex;
  }

  .conversation-composer:focus-within {
    border-color: #40528766;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .conversation-composer:focus-within {
      border-color: color-mix(in oklab, var(--color-brand-ring) 40%, transparent);
    }
  }

  .conversation-composer:focus-within {
    box-shadow: 0 0 0 1px var(--color-brand), 0 0 24px -4px oklch(50% .09 268 / .15);
  }

  .conversation-composer input {
    min-height: calc(var(--spacing) * 9);
    border-style: var(--tw-border-style);
    padding-inline: var(--spacing);
    background-color: #0000;
    border-width: 0;
    outline: none;
    flex: 1;
    font-size: .95rem;
  }

  .conversation-composer input:disabled {
    cursor: not-allowed;
    color: var(--color-muted);
  }

  .gate-wrap {
    min-height: 100dvh;
    padding: calc(var(--spacing) * 4);
    background: var(--surface-ground);
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .gate-card {
    width: 100%;
    max-width: var(--container-sm);
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-line);
    background-color: var(--color-paper);
    padding: calc(var(--spacing) * 6);
    box-shadow: var(--shadow-pop);
    display: grid;
  }

  .gate-badge {
    height: calc(var(--spacing) * 12);
    width: calc(var(--spacing) * 12);
    border-radius: var(--radius-xl);
    background-color: var(--color-brand);
    color: var(--color-paper);
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .gate-ident {
    gap: calc(var(--spacing) * .5);
    display: grid;
  }

  .gate-title {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    margin: 0;
  }

  .gate-sub {
    color: var(--color-muted);
    margin: 0;
    font-size: .7rem;
  }

  .gate-label {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-muted);
    font-size: var(--text-meta);
  }

  .gate-card input {
    min-height: calc(var(--spacing) * 11);
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-line);
    background-color: var(--color-paper);
    width: 100%;
    padding-inline: calc(var(--spacing) * 3);
  }

  .gate-hint {
    color: var(--color-muted);
    margin: 0;
    font-size: .7rem;
  }
}

@layer utilities {
  .collapse {
    visibility: collapse;
  }

  .visible {
    visibility: visible;
  }

  .sr-only {
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .mx-1 {
    margin-inline: var(--spacing);
  }

  .block {
    display: block;
  }

  .flex {
    display: flex;
  }

  .inline {
    display: inline;
  }

  .inline-block {
    display: inline-block;
  }

  .table {
    display: table;
  }

  .w-full {
    width: 100%;
  }

  .items-center {
    align-items: center;
  }

  .justify-center {
    justify-content: center;
  }

  .gap-1 {
    gap: var(--spacing);
  }

  .bg-brand\/20 {
    background-color: #29396c33;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-brand\/20 {
      background-color: color-mix(in oklab, var(--color-brand) 20%, transparent);
    }
  }

  .bg-ok-line\/20 {
    background-color: #a6d0b333;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-ok-line\/20 {
      background-color: color-mix(in oklab, var(--color-ok-line) 20%, transparent);
    }
  }

  .align-\[-2px\] {
    vertical-align: -2px;
  }

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

@font-face {
  font-family: Noto Sans Thai Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/assets/noto-sans-thai-thai-wght-normal-CtQSZ1tK.woff2") format("woff2-variations");
  unicode-range: U+2D7, U+303, U+331, U+E01-E5B, U+200C-200D, U+25CC;
}

@font-face {
  font-family: Noto Sans Thai Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/assets/noto-sans-thai-latin-ext-wght-normal-DH1q_yQ5.woff2") format("woff2-variations");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, 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: Noto Sans Thai Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/assets/noto-sans-thai-latin-wght-normal-Bi3VDbYN.woff2") format("woff2-variations");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@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-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@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: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
/*$vite$:1*/