/* Astryx 0.7.11 visual language, mapped to Rlly's native controls.
   Rlly Warm extends @astryxdesign/theme-stone (MIT; vendor/astryx/LICENSE).
   Bot palettes and avatar geometry deliberately remain in their own stylesheets. */
:root, :root[data-theme='dark'] {
  --bg: var(--color-background-body);
  --surface: var(--color-background-surface);
  --sidebar: var(--color-background-body);
  --subtle: var(--color-background-muted);
  --selected: var(--color-background-muted);
  --text: var(--color-text-primary);
  --muted: var(--color-text-secondary);
  --ghost: var(--color-text-secondary);
  --line: var(--color-border);
  --accent: var(--color-accent);
  --on-accent: var(--color-on-accent);
  --focus: var(--color-accent);
  --danger: var(--color-error);
  --warning: var(--color-warning);
  --shadow: var(--shadow-high);
  --control-border: var(--color-border-emphasized);
  --radius-control: var(--radius-element);
  font-family: var(--font-family-body);
}
.wordmark span { color: var(--rlly-wordmark-dot); }
#home-panel > .inline-notice { margin-bottom: 24px; }
body { background: var(--bg); }
h1, h2, h3 { text-wrap: pretty; }
.sidebar { border-right-color: var(--line); }
.nav-item { border-radius: var(--radius-control); font-weight: 500; }
.nav-item.active { font-weight: 600; }
.crew-heading { letter-spacing: .06em; font-size: 11px; }
.bot-row { border-radius: var(--radius-control); }
.button { border-radius: 999px; padding-inline: 16px; font-weight: 600; }
.button.settings-subpage-row { border-radius: var(--radius-control); }
.icon-button { border-radius: 50%; }
.button-outline { border-color: var(--line); }
.primary:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 84%, var(--surface)); }
.button:active:not(:disabled), .icon-button:active:not(:disabled) { filter: brightness(.94); }
.button:disabled { opacity: .45; }
.bot-search, .field input, .field select, .field textarea,
.chat-model select { border-radius: var(--radius-control); border-color: var(--control-border); }
/* Controller-owned search fields use one Astryx token treatment across surfaces. */
.bot-search {
  box-sizing: border-box; min-width: 0; min-height: calc(var(--spacing-12) + 2 * var(--border-width)); max-width: 30rem;
  display: flex; align-items: center; gap: var(--spacing-2);
  margin: 0; padding: var(--spacing-2) var(--spacing-3);
  border: var(--border-width) solid var(--color-border-emphasized);
  border-radius: var(--radius-element); background: var(--color-background-surface);
  color: var(--color-icon-secondary);
}
.bot-search > svg, .bot-search > .icon { flex: none; width: var(--spacing-4); height: var(--spacing-4); }
.bot-search > input {
  min-width: 0; width: 100%; min-height: 0; height: auto; padding: 0;
  border: 0; box-shadow: none; background: transparent;
  color: var(--color-text-primary); font: inherit; font-size: var(--font-size-base); line-height: 1.5;
}
.bot-search > input:focus-visible { outline: none; }
:root:not([data-input="pointer"]) .bot-search:has(input:focus-visible) { outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color); outline-offset: var(--focus-outline-offset); }
.bot-search:has(> input:disabled) { opacity: .6; }
.marketplace-search-label { flex: 1 1 30rem; }
.documents-toolbar .bot-search { width: 100%; }
.sidebar .brand-row #sidebar-bot-search { min-height: var(--size-element-lg); }
:is(#chat-delivery-preference, #theme-preference) [role="radio"] { all: revert-layer; }
.settings-card .settings-select-row { --rlly-select-area: 1 / 2; }
@media (max-width: 800px) { .settings-card .settings-select-row { --rlly-select-area: 2 / 1; } }
.field:has(> .sr-only) { --rlly-select-area: 1 / 1; }

.sidebar .brand-row #sidebar-bot-search,
.deals-content .deals-tools .bot-search { border-color: var(--control-border); }
.field input, .field select, .field textarea { background: var(--surface); }
/* Keep native form pickers; inset Astryx's chevronDown glyph in their grid row. */
.field > select:not([multiple]):not([size]) { appearance: none; grid-area: var(--rlly-select-area, 2 / 1); padding-inline-end: var(--spacing-10); }
.field:has(> select:not([multiple]):not([size]))::after { content: ""; grid-area: var(--rlly-select-area, 2 / 1); justify-self: end; align-self: center; margin-inline-end: var(--spacing-3); width: var(--spacing-4); height: var(--spacing-4); background: var(--color-icon-secondary); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; pointer-events: none; }
@media (forced-colors: active) {
  .field > select:not([multiple]):not([size]) { appearance: auto; }
  .field:has(> select:not([multiple]):not([size]))::after { display: none; }
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--muted); }
:root:not([data-input="pointer"]) .composer:has(textarea:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.composer { border-radius: 20px; border-color: var(--control-border); background: var(--surface); box-shadow: 0 2px 12px #0a131708; }
/* Inline setup inputs share the rounded composer's focus ring, like chat. */
:root:not([data-input="pointer"]) .composer[data-workspace-form]:has(> input:focus-visible) {
  outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
  outline-offset: var(--focus-outline-offset);
}
.composer[data-workspace-form]:has(> input:focus-visible) > input:focus-visible { outline: none; }
.compose-toolbar .text-button { border-radius: 999px; }
.send-button { border-radius: 50%; background: var(--accent); color: var(--on-accent); }
.prompt { border-radius: 999px; background: var(--subtle); border-color: transparent; }
.prompt:hover { background: var(--selected); }
.from-user { border-radius: 18px 18px 4px 18px; background: var(--subtle); }
.day-divider { color: var(--muted); }
.detail-panel, .settings-dialog, .bot-editor-modal, .deal-editor-modal,
.sign-in-modal { border-radius: var(--radius-container); box-shadow: var(--shadow); }
.composer-menu-panel { border-radius: var(--radius-control); box-shadow: var(--shadow); }
.composer-menu-panel .text-button { border-radius: 8px; }
.status-badge, .count { border-radius: 999px; }
.deal-card, .chat-action-card.proposal-item { border-radius: var(--radius-container); background: var(--surface); }
.deal-card:hover { border-color: var(--muted); }
.home-content { padding-top: 32px; }
.home-columns { gap: 48px; }
.home-section h2 { font-weight: 600; letter-spacing: -.3px; }
.home-conversation { border-radius: var(--radius-control); padding-inline: 12px; }
.home-conversation + .home-conversation { border-top-color: transparent; }
.home-reviews { margin-top: 40px; }
.home-review-item { padding: 20px; margin-top: 12px; border: 1px solid var(--line); border-radius: var(--radius-container); }
.home-payload summary .home-review-heading { margin-bottom: 0; }
.home-payload[open] summary .home-review-heading { margin-bottom: 16px; }
.empty-state > .icon { color: var(--muted); }
input[type='checkbox'], input[type='radio'] { accent-color: var(--accent); }
@container (width < 720px) {
  .sidebar { width: 64px; padding-inline: 8px; scrollbar-gutter: auto; }
  .sidebar .sidebar-footer { flex-direction: column; gap: 8px; align-items: center; }
  .home-columns { gap: 32px; }
  .home-reviews { margin-top: 32px; }
  .home-review-item { padding: 16px; }
  .button { min-height: 44px; }
  .field input, .field select, .field textarea, .composer textarea { font-size: 16px; }
}
@media (prefers-reduced-motion: no-preference) {
  .button, .icon-button, .nav-item, .bot-row, .deal-card {
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
  }
}
@media (forced-colors: active) {
  .nav-item.active, .bot-row.selected { outline: 1px solid Highlight; outline-offset: -2px; }
}

/* Notifications use Astryx's informational Banner, not an inverted text pill. */
#toast { background: transparent; color: var(--text); padding: 0; border-radius: 0; box-shadow: none; width: min(440px, calc(100vw - 32px)); pointer-events: auto; }
#toast:not(.visible) { pointer-events: none; }
.deal-card .text-button { padding-inline: 12px; text-align: center; }

/* General Chat uses Astryx Card, List and ListItem with the existing routing controller. */
.general-screen.general-start { width: min(100%, 800px); min-height: 0; padding: 48px 32px 32px; }
.astryx-general-launcher { display: grid; gap: 24px; }
.astryx-general-heading h2 { margin: 0 0 8px; font-size: 26px; line-height: 1.25; letter-spacing: -.65px; }
.astryx-general-heading p { margin: 0; color: var(--muted); font-size: 14px; }
.astryx-general-actions { overflow: hidden; }
.astryx-action-row { min-height: 76px; }
.astryx-action-row svg { color: var(--muted); }
.astryx-action-description { display: block; font-size: 13px; line-height: 1.5; color: var(--muted); }
.general-chat-view:has(.general-start) .composer-wrap { width: min(100%, 800px); padding-inline: 32px; }
.general-chat-view:has(.general-start) .composer { border-radius: 16px; }
@container (width < 720px) {
  .general-screen.general-start { padding: 28px 20px; }
  .general-chat-view:has(.general-start) .composer-wrap { padding-inline: 20px; }
  .astryx-action-row { min-height: 76px; }
}

/* The full queue has one modal, with exact payloads below each action summary. */
.review-queue-modal { width: min(840px, calc(100% - 48px)); height: min(760px, calc(100% - 48px)); }
.review-queue-modal > .standard-page { min-height: 0; flex: 1; }
.review-queue-modal .page-header { min-height: 0; border: 0; padding: 0 24px; justify-content: flex-end; }
.review-queue-modal .page-header h1 { display: none; }
.review-queue-modal .page-content { padding: 16px 24px 24px; max-width: none; }
.review-queue-modal .tabs { margin: 0 0 20px; }
.review-preview-label { padding: 12px 24px 0; margin: 0; color: var(--muted); font-size: 12px; }
.review-queue-item > summary { cursor: pointer; padding: 16px 0; }
.review-queue-item > summary h2, .review-queue-item > summary h3 { display: inline; font-size: 15px; }
.review-queue-item > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.home-review-heading h3 { margin: 0; }
.home-review-heading p { margin: 4px 0 0; }
.general-chat-view:has(.general-start) .composer { transition: padding 260ms ease; }
.general-chat-view:has(.general-start) .composer textarea { transition: min-height 260ms ease; }
.general-chat-view:has(.general-start) .compose-toolbar { transition: max-height 260ms ease, opacity 180ms ease, min-height 260ms ease; }

/* Library navigation and modal shells retain the controller's native content. */
.astryx-workspace-nav { width: 100%; height: auto; background: transparent; }
.astryx-workspace-nav .nav-item { min-height: 40px; }
dialog.astryx-workspace-dialog { position: fixed; inset: 0; margin: auto; transform: none; max-width: calc(100vw - 48px); border: 1px solid var(--line); padding: 0; }
dialog.astryx-workspace-dialog::backdrop { background: #0006; }
.astryx-panel-header { padding: 24px; flex-shrink: 0; }
.astryx-panel-header .astryx-dialog-header { align-items: center; }
.astryx-panel-content { min-height: 0; display: flex; flex-direction: column; overflow: auto; }
.astryx-panel-source { min-height: 0; display: flex; flex-direction: column; }
.astryx-panel-source > .panel-body { overflow: visible; }
@container (width < 720px) {
  .astryx-workspace-nav .nav-item { justify-content: center; padding-inline: 0; }
  .astryx-workspace-nav .nav-item [data-slot="label"] { display: none; }
}

.sign-in-wordmark.wordmark { font-size: 40px; }
dialog #toast { position: sticky; top: 0; bottom: auto; width: auto; max-width: calc(100% - 48px); margin: 16px 24px; flex-shrink: 0; }
dialog #toast:not(.visible) { display: none; }
.astryx-workspace-dialog .bot-wardrobe .panel-bottom { bottom: 0; padding-block: 12px; }
@media (prefers-reduced-motion: reduce) {
  .general-chat-view:has(.general-start) :is(.composer, .composer textarea, .compose-toolbar) { transition: none; }
}

/* Max's native meeting state uses the same components and semantic palette. */
[data-astryx-call-control] { display: inline-flex; min-width: 0; }
[data-astryx-meeting-prompt] { margin: 16px; }
.astryx-meeting-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.meeting-call-bar { height: auto; padding: 2px; gap: 2px; background: var(--subtle); border-color: var(--line); color: var(--text); }
.meeting-call-bar .recording-dot { background: var(--danger); box-shadow: none; animation: none; }
.meeting-call-bar .muted { color: var(--warning); background: var(--subtle); }
.meeting-call-bar .call-end { color: var(--on-accent); background: var(--danger); }
.live-call-message { border-left: 0; padding-left: 0; }
.live-call-error { color: var(--danger); }

.company-preview-host { width: 100%; min-width: 0; margin-block: var(--spacing-2) var(--spacing-3); }
.company-preview-icon { width: var(--spacing-10); height: var(--spacing-10); flex: none; border-radius: var(--radius-full); background: var(--color-background-muted); }
.company-preview-icon img { width: var(--spacing-6); height: var(--spacing-6); object-fit: contain; }
.company-preview-host h3 { font-size: var(--text-heading-3-size); font-weight: var(--font-weight-medium); line-height: var(--text-heading-3-leading); }
.company-preview-site { min-width: 0; flex: 1; }

/* Native button resets must not replace the library variants in this island. */
.onboarding-next-action .astryx-button { background: revert-layer; color: revert-layer; border: revert-layer; }

/* Native bot rows retain their own avatar/work DOM beside library action menus. */
#crew-list { display: grid; grid-template-columns: minmax(0, 1fr) var(--size-element-md); align-content: start; column-gap: var(--spacing-1); }
#crew-list > :not(.bot-row):not(.bot-row-menu) { grid-column: 1 / -1; }
#crew-list > .bot-row { grid-column: 1; }
.bot-row-menu { grid-column: 2; align-self: center; min-width: 0; }
.bot-row-menu button { all: revert-layer; }
@media (forced-colors: active) {
  .astryx-more-menu[role="menu"] { outline: var(--border-width) solid CanvasText; }
}

:root[data-input="pointer"] .field :is(input, textarea):focus { border-color: var(--color-border-emphasized); }

[data-page-path] { min-width: 0; }
[data-page-path] button { all: revert-layer; }

.pipeline-chips { display: flex; flex: 1 1 100%; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--color-border-emphasized) transparent; gap: var(--spacing-2); padding: var(--spacing-1); }
.pipeline-chips > button { flex: none; max-inline-size: calc(var(--spacing-20) * 3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }