/* Atlassian DESIGN.md 0.0.7: token values and component recipes. */
:root {
    --text: #292A2E;
    --text-subtle: #505258;
    --text-subtlest: #6B6E76;
    --surface: #FFFFFF;
    --surface-sunken: #F8F8F8;
    --border: #0B120E24;
    --border-input: #8C8F97;
    --border-focused: #4688EC;
    --border-selected: #1868DB;
    --link: #1868DB;
    --background-neutral-hovered: #0515240F;
    --background-neutral-pressed: #0B120E24;
    --background-selected: #E9F2FE;
    --background-brand-bold: #1868DB;
    --background-brand-bold-hovered: #1558BC;
    --background-brand-bold-pressed: #144794;
    --background-danger: #FFECEB;
    --border-danger: #E2483D;
    --text-danger: #AE2E24;
    --background-warning: #FFF5DB;
    --border-warning: #E06C00;
    --text-warning: #9E4C00;
    --background-success: #EFFFD6;
    --border-success: #6A9A23;
    --text-success: #4C6B1F;
    --background-information: #E9F2FE;
    --border-information: #357DE8;
    --text-information: #1558BC;
    --radius-small: .25rem;
    --radius-medium: .375rem;
    --radius-large: .5rem;
    --radius-xlarge: .75rem;
    --space-025: .125rem;
    --space-050: .25rem;
    --space-075: .375rem;
    --space-100: .5rem;
    --space-150: .75rem;
    --space-200: 1rem;
    --space-250: 1.25rem;
    --space-300: 1.5rem;
    --space-400: 2rem;
    --space-500: 2.5rem;
    --space-600: 3rem;
    --weight-medium: 500;
    --weight-bold: 653;
    --font-body: 'Atlassian Sans', ui-sans-serif, system-ui, sans-serif;
    --font-code: 'Atlassian Mono', ui-monospace, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--surface); color: var(--text); }
body { margin: 0; font: 400 .875rem/1.25rem var(--font-body); }
a { color: var(--link); text-decoration-thickness: .0625rem; text-underline-offset: .125rem; }
a:hover { color: var(--background-brand-bold-hovered); }
p { margin: 0 0 var(--space-200); color: var(--text); }
h1, h2, h3, h4 { font-weight: var(--weight-bold); margin: 0 0 var(--space-200); overflow-wrap: anywhere; }
h1 { font-size: 1.5rem; line-height: 1.75rem; }
h2 { font-size: 1.25rem; line-height: 1.5rem; }
h3 { font-size: 1rem; line-height: 1.25rem; }
button, input, textarea, select { font: inherit; color: inherit; }
input, textarea, select { min-inline-size: 0; max-inline-size: 100%; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: .125rem solid var(--border-focused); outline-offset: .125rem; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible, summary:focus-visible { border-radius: var(--radius-medium); }
[hidden] { display: none !important; }
strong, b { font-weight: var(--weight-bold); }
.skip-link { position: fixed; inset-block-start: var(--space-100); inset-inline-start: var(--space-100); z-index: 10; background: var(--surface); padding: var(--space-100) var(--space-200); transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
.sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; inline-size: 15rem; border-inline-end: .0625rem solid var(--border); display: flex; flex-direction: column; padding: var(--space-300) var(--space-150); background: var(--surface); z-index: 2; }
.brand { display: block; text-decoration: none; color: var(--text); font-weight: var(--weight-bold); font-size: 1.25rem; line-height: 1.5rem; }
.brand:hover { color: var(--text); }
.brand span { display: block; font-size: .75rem; line-height: 1rem; color: var(--text-subtle); font-weight: 400; margin-block-start: var(--space-050); }
.sidebar > .brand { margin: 0 var(--space-150) var(--space-400); }
.primary-nav { display: grid; gap: var(--space-050); }
.primary-nav a { color: var(--text-subtle); border-inline-start: .125rem solid transparent; padding: var(--space-100) var(--space-150); border-radius: var(--radius-medium); text-decoration: none; font-weight: var(--weight-medium); min-block-size: 2.5rem; display: flex; align-items: center; }
.primary-nav a:hover { background: var(--background-neutral-hovered); }
.primary-nav a[aria-current] { color: var(--border-selected); border-color: var(--border-selected); background: var(--background-selected); }
.sidebar__account { margin-block-start: auto; border-block-start: .0625rem solid var(--border); padding: var(--space-200) var(--space-150) 0; overflow-wrap: anywhere; }
.sidebar__account form { margin-block-start: var(--space-150); }
.account-name { font-weight: var(--weight-medium); }
.mobile-header { display: none; }
.main { margin-inline-start: 15rem; padding: var(--space-400); max-inline-size: 112rem; }
.main:focus { outline: none; }
.page-header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-200); margin-block-end: var(--space-150); }
.page-header h1 { margin: 0; }
.page-description { margin-block-end: var(--space-300); }
.meta, .label { color: var(--text-subtle); font-size: .75rem; line-height: 1rem; }
.hint { color: var(--text-subtlest); font-size: .75rem; line-height: 1rem; margin: var(--space-050) 0 0; }
.mono { font-family: var(--font-code); overflow-wrap: anywhere; }
.nowrap { white-space: nowrap; }
.section { margin-block-start: var(--space-400); }
.section-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-150); margin-block-end: var(--space-200); }
.section-heading h2, .section-heading h3 { margin: 0; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: var(--space-075); min-block-size: 2.25rem; padding: var(--space-075) var(--space-150); color: var(--text-subtle); background: transparent; border: .0625rem solid var(--border); border-radius: var(--radius-medium); font-weight: var(--weight-medium); text-decoration: none; cursor: pointer; transition: background-color 150ms cubic-bezier(.4, 0, 0, 1), border-color 150ms cubic-bezier(.4, 0, 0, 1); line-height: 1.25rem; text-align: center; }
.button:hover { color: var(--text-subtle); background: var(--background-neutral-hovered); }
.button:active { background: var(--background-neutral-pressed); }
.button--primary { color: var(--surface); background: var(--background-brand-bold); border-color: transparent; }
.button--primary:hover { color: var(--surface); background: var(--background-brand-bold-hovered); }
.button--primary:active { background: var(--background-brand-bold-pressed); }
.button--subtle { border-color: transparent; }
.button--compact { padding: var(--space-025) var(--space-100); min-block-size: 2rem; }
.button--full { inline-size: 100%; }
.button:disabled { background: #0515240F; color: #080F214A; border-color: #0515240F; cursor: not-allowed; }
.stack { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-200); }
.stack > .button { align-self: flex-start; }
.stack > .button--full { align-self: stretch; }
.field { display: flex; flex-direction: column; gap: var(--space-075); min-inline-size: 0; }
.field > label, .checkbox-label { font-weight: var(--weight-medium); color: var(--text-subtle); }
.field input:not([type=checkbox]), .field textarea, .field select { display: block; inline-size: 100%; border: .0625rem solid var(--border-input); border-radius: var(--radius-medium); padding: var(--space-100); min-block-size: 2.5rem; background: var(--surface); transition: background-color 150ms, border-color 150ms; }
.field textarea { resize: vertical; line-height: 1.5rem; }
.field input:hover, .field textarea:hover, .field select:hover { background: var(--surface-sunken); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--border-focused); background: var(--surface); }
.field [aria-invalid=true] { border-color: var(--border-danger); }
.field input::placeholder, .field textarea::placeholder { color: var(--text-subtlest); }
.field--grow { flex: 1 1 16rem; }
.checkbox-label { display: flex; align-items: center; gap: var(--space-100); min-block-size: 2rem; cursor: pointer; }
.checkbox-label input { inline-size: 1rem; block-size: 1rem; flex: 0 0 1rem; margin: 0; accent-color: var(--background-brand-bold); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-200); }
.form-actions, .source__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-100); }
.form-section { padding-block-end: var(--space-300); border-block-end: .0625rem solid var(--border); }
.form-section h2 { margin: 0; }
.narrow-form { max-inline-size: 44rem; }
.settings-form { max-inline-size: 48rem; }
.settings-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: var(--space-400); }
.settings-columns form { min-inline-size: 0; }
.preview-column { min-inline-size: 0; }
.preview { position: sticky; inset-block-start: var(--space-300); }
.panel { background: var(--surface); border: .0625rem solid var(--border); border-radius: var(--radius-large); padding: var(--space-300); }
.preview h2 { font-size: 1rem; line-height: 1.25rem; }
.preview__message { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface-sunken); padding: var(--space-200); border-radius: var(--radius-large); min-block-size: 6rem; }
.preview__buttons { display: grid; gap: var(--space-050); margin-block-start: var(--space-100); }
.preview__button { display: block; text-align: center; border: .0625rem solid var(--border); padding: var(--space-100); border-radius: var(--radius-medium); color: var(--link); overflow-wrap: anywhere; }
.preview .hint { margin-block-start: var(--space-150); }
.capability-note { margin-block-start: var(--space-200); padding-inline: var(--space-100); }
.token-buttons { display: flex; flex-wrap: wrap; gap: var(--space-050); }
.advanced { border: .0625rem solid var(--border); border-radius: var(--radius-large); padding: var(--space-200); }
summary { cursor: pointer; min-block-size: 2rem; font-weight: var(--weight-medium); padding-block: var(--space-050); }
details[open] > summary { margin-block-end: var(--space-200); }
.advanced .form-grid { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.readonly-field { display: flex; flex-direction: column; gap: var(--space-100); padding-block: var(--space-100); }
.provider-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--space-300); margin-block-end: var(--space-400); }
.provider h2 { font-size: 1rem; line-height: 1.25rem; }
.provider__model { margin-block: var(--space-150); }
.provider .hint { margin-block-start: var(--space-150); }
.tabs { display: flex; border-block-end: .0625rem solid var(--border); gap: var(--space-300); margin-block-end: var(--space-300); overflow-x: auto; }
.tabs a { text-decoration: none; padding-block: var(--space-150); color: var(--text-subtle); border-block-end: .125rem solid transparent; font-weight: var(--weight-medium); white-space: nowrap; }
.tabs a[aria-current] { color: var(--border-selected); border-color: var(--border-selected); }
.notice, .error-summary { display: flex; align-items: flex-start; gap: var(--space-150); padding: var(--space-200); border-radius: var(--radius-large); background: var(--background-information); margin-block-end: var(--space-300); }
.notice p { margin: 0; }
.notice__icon { flex: 0 0 1rem; margin-block-start: var(--space-025); }
.notice--information .notice__icon { color: #357DE8; }
.notice--success .notice__icon { color: #6A9A23; }
.notice--danger .notice__icon { color: #C9372C; }
.notice--warning .notice__icon { color: #E06C00; }
.notice--success { background: var(--background-success); }
.notice--danger, .error-summary { background: var(--background-danger); }
.notice--warning { background: var(--background-warning); }
.error-summary { display: block; border: .0625rem solid var(--border-danger); }
.error-summary p { margin: var(--space-050) 0 0; }
.lozenge { display: inline-block; border: .0625rem solid var(--border-input); border-radius: var(--radius-small); padding: var(--space-025) var(--space-050); background: #F0F1F2; color: var(--text-subtle); font-weight: var(--weight-bold); font-size: .75rem; line-height: 1rem; max-inline-size: 100%; }
.lozenge--success { background: var(--background-success); color: var(--text-success); border-color: var(--border-success); }
.lozenge--warning { background: var(--background-warning); color: var(--text-warning); border-color: var(--border-warning); }
.lozenge--danger { background: var(--background-danger); color: var(--text-danger); border-color: var(--border-danger); }
.lozenge--information { background: var(--background-information); color: var(--text-information); border-color: var(--border-information); }
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); border: .0625rem solid var(--border); border-radius: var(--radius-large); }
.metric { display: flex; flex-direction: column; gap: var(--space-100); padding: var(--space-200); color: var(--text); text-decoration: none; border-inline-end: .0625rem solid var(--border); }
.metric:last-child { border-inline-end: 0; }
.metric:hover { color: var(--text); background: var(--background-neutral-hovered); }
.metric span { color: var(--text-subtle); }
.metric strong { font-size: 1.5rem; line-height: 1.75rem; }
.table-region { max-inline-size: 100%; overflow-x: auto; border: .0625rem solid var(--border); border-radius: var(--radius-large); }
table { inline-size: 100%; border-collapse: collapse; text-align: start; }
th, td { padding: var(--space-150) var(--space-200); border-block-end: .0625rem solid var(--border); vertical-align: top; text-align: start; }
th { color: var(--text-subtle); font-weight: var(--weight-bold); font-size: .75rem; line-height: 1rem; white-space: nowrap; }
td { font-size: .875rem; line-height: 1.25rem; }
tbody tr:last-child td { border-block-end: 0; }
tbody tr:hover { background: var(--background-neutral-hovered); }
td .meta { margin-block-start: var(--space-050); }
.cell-excerpt { max-inline-size: 28rem; min-inline-size: 12rem; overflow-wrap: anywhere; }
.filter-bar { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--space-150); margin-block-end: var(--space-300); }
.log-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: var(--space-200); align-items: end; margin-block-end: var(--space-300); }
.log-filters .field--grow { grid-column: span 2; }
.log-filters .form-actions { grid-column: span 2; }
.log-message { min-inline-size: 15rem; max-inline-size: 28rem; overflow-wrap: anywhere; }
.pagination { display: flex; flex-wrap: wrap; gap: var(--space-150); align-items: center; justify-content: flex-end; margin-block-start: var(--space-200); }
.empty-state { padding: var(--space-400) var(--space-200); border: .0625rem solid var(--border); border-radius: var(--radius-large); }
.empty-state h2 { font-size: 1rem; line-height: 1.25rem; margin-block-end: var(--space-100); }
.empty-state p { max-inline-size: 40rem; }
.event-list { border-block-start: .0625rem solid var(--border); }
.event-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-300); padding-block: var(--space-200); border-block-end: .0625rem solid var(--border); }
.event-row > div { overflow-wrap: anywhere; }
.event-row time { white-space: nowrap; color: var(--text-subtle); }
.identity-row { display: flex; align-items: center; gap: var(--space-200); }
.identity-row h2 { margin-block-end: var(--space-050); }
.avatar { flex: 0 0 3rem; inline-size: 3rem; block-size: 3rem; border-radius: 624.9375rem; display: grid; place-items: center; background: #F0F1F2; color: var(--text-subtle); font-size: 1.25rem; }
.facts { display: flex; flex-wrap: wrap; gap: var(--space-300); margin-block: var(--space-300); }
.facts > div { min-inline-size: 8rem; }
.facts dt { color: var(--text-subtle); font-size: .75rem; line-height: 1rem; margin-block-end: var(--space-050); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.facts--compact { gap: var(--space-200); margin-block: var(--space-200); }
.conversation-list { display: flex; gap: var(--space-150); flex-wrap: wrap; }
.conversation-link { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-100); border: .0625rem solid var(--border); border-radius: var(--radius-medium); padding: var(--space-100) var(--space-150); text-decoration: none; }
.conversation-link[aria-current] { border-color: var(--border-selected); border-width: .125rem; padding: var(--space-075) var(--space-150); background: var(--background-selected); color: var(--border-selected); }
.message-pagination { display: flex; flex-wrap: wrap; gap: var(--space-100); margin-block-end: var(--space-200); }
.thread { list-style: none; padding: var(--space-200); margin: 0; background: var(--surface-sunken); border-radius: var(--radius-large); display: flex; flex-direction: column; gap: var(--space-200); }
.message { background: var(--surface); border: .0625rem solid var(--border); border-radius: var(--radius-large); padding: var(--space-200); max-inline-size: 60rem; }
.message--bot { margin-inline-start: var(--space-400); }
.message__header { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-150); margin-block-end: var(--space-150); }
.message__header time { color: var(--text-subtle); font-size: .75rem; line-height: 1rem; }
.message__text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5rem; }
.message__answer { margin-block-start: var(--space-200); padding-block-start: var(--space-200); border-block-start: .0625rem solid var(--border); }
.message__answer strong { display: block; margin-block-end: var(--space-100); }
.processing-details { margin-block-start: var(--space-200); }
.row-edit + .row-edit { margin-block-start: var(--space-100); }
.row-edit[open] { min-inline-size: 17rem; }
.row-actions { min-inline-size: 12rem; }
.add-panel { margin-block-end: var(--space-300); }
.add-panel > summary { color: var(--link); }
.source-list { border-block-start: .0625rem solid var(--border); }
.source { padding-block: var(--space-300); border-block-end: .0625rem solid var(--border); }
.source .section-heading { margin-block-end: var(--space-100); }
.source__location { overflow-wrap: anywhere; }
.source-edit { margin-block-start: var(--space-200); }
.job-error { margin-block: var(--space-100); min-inline-size: 14rem; }
.event-details { min-inline-size: 9rem; }
.event-details[open] { min-inline-size: 24rem; }
pre { font: .875rem/1.25rem var(--font-code); white-space: pre-wrap; overflow-wrap: anywhere; max-inline-size: 44rem; padding: var(--space-100); background: var(--surface-sunken); border-radius: var(--radius-large); }
.is-anonymous .main { margin: 0; padding: var(--space-400) var(--space-200); max-inline-size: none; min-block-size: 100dvh; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.is-anonymous .error-summary, .is-anonymous .notice { inline-size: min(100%, 26rem); }
.login-panel { inline-size: min(100%, 26rem); border: .0625rem solid var(--border); border-radius: var(--radius-large); padding: var(--space-400); }
.login-panel > .brand { margin-block-end: var(--space-400); }
.login-panel h1 { margin-block-end: var(--space-150); }
.login-help { margin-block-start: var(--space-300); }
@media (max-width: 75rem) {
    .main { padding: var(--space-300); }
    .settings-columns { grid-template-columns: minmax(0, 1fr); }
    .preview-column { grid-row: 1; }
    .preview { position: static; }
    .preview__message { min-block-size: auto; }
    .metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .metric:nth-child(3) { border-inline-end: 0; }
    .metric:nth-child(-n+3) { border-block-end: .0625rem solid var(--border); }
}
@media (max-width: 53rem) {
    .sidebar { position: static; inline-size: auto; border-inline-end: 0; border-block-end: .0625rem solid var(--border); padding: var(--space-150); }
    .has-js .sidebar { display: none; }
    .mobile-header > .button { display: none; }
    .has-js .mobile-header > .button { display: inline-flex; }
    .sidebar.is-open { display: flex; }
    .sidebar > .brand { display: none; }
    .sidebar__account { padding: var(--space-150); margin-block-start: var(--space-150); }
    .mobile-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-200); padding: var(--space-200); border-block-end: .0625rem solid var(--border); }
    .main { margin-inline-start: 0; padding: var(--space-300) var(--space-200); }
    .page-header { align-items: flex-start; }
    .page-header > .meta { max-inline-size: 8rem; text-align: end; }
}
@media (max-width: 35rem) {
    .page-header { flex-direction: column; gap: var(--space-100); }
    .page-header > .meta { max-inline-size: none; text-align: start; }
    .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .metric:nth-child(3) { border-inline-end: .0625rem solid var(--border); }
    .metric:nth-child(even) { border-inline-end: 0; }
    .metric:nth-child(4) { border-block-end: .0625rem solid var(--border); }
    .metric:last-child { grid-column: 1 / -1; border-inline-end: 0; }
    .form-grid, .provider-grid, .log-filters { grid-template-columns: minmax(0, 1fr); }
    .log-filters .field--grow, .log-filters .form-actions { grid-column: auto; }
    .tabs { gap: var(--space-200); }
    .form-actions { align-items: stretch; }
    .form-actions > * { flex: 1 1 auto; }
    .button { white-space: normal; }
    .panel { padding: var(--space-200); }
    .section { margin-block-start: var(--space-300); }
    .event-row { flex-direction: column; gap: var(--space-100); }
    .thread { padding: var(--space-100); }
    .message { padding: var(--space-150); }
    .message--bot { margin-inline-start: var(--space-100); }
    .login-panel { padding: var(--space-300); }
    .is-anonymous .main { justify-content: flex-start; padding-block-start: var(--space-400); }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}