:root {
  /* Original prototype tokens (--aw-*, light theme); the shell's own names alias them. */
  --aw-ink: #16161c;
  --aw-sub: #54545e;
  --aw-muted: #686a75;
  --aw-line: #16161c14;
  --aw-border: #16161c26;
  --aw-bg: #ffffff;
  --aw-subtle: #eff0f2;
  --aw-elevated: #f8f8fa;
  --aw-canvas: #eeeef0;
  --aw-accent: #7d3eda;
  --aw-accent-bg: #f0ebff;
  --aw-accent-bg-hover: #e4d9fb;
  --aw-primary: #7d3eda;
  --aw-primary-hover: #6b2cc4;
  --aw-orange: #ff5a00;
  --aw-orange-bg: #fff1e8;
  --aw-green: #166534;
  --aw-green-bg: #f0fdf4;
  --aw-shade: #16161c24;
  --font-mono: 'JetBrains Mono';
  --bg: var(--aw-canvas);
  --bg-sub: var(--aw-subtle);
  --surface: var(--aw-bg);
  --selected: var(--aw-accent-bg);
  --border: var(--aw-border);
  --border-sub: var(--aw-line);
  --muted: var(--aw-muted);
  --text-sub: var(--aw-sub);
  --text: var(--aw-ink);
  --interactive: var(--aw-accent);
  --warning-fg: var(--aw-orange);
  --warning-bg: var(--aw-orange-bg);
  --success-fg: var(--aw-green);
  --success-bg: var(--aw-green-bg);
  --radius: 4px;
  --toolbar-h: 44px;
  --dock-h: 120px;
  font-family: Figtree, sans-serif;
  font-size: 13px;
  line-height: 20px;
  color: var(--text);
  background: var(--bg);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  color-scheme: light;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
  border: 0;
  background: none;
  padding: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
svg {
  width: 16px;
  height: 16px;
  flex: none;
}
:focus-visible {
  outline: 2px solid var(--interactive);
  outline-offset: 2px;
}
h1,
h2,
h3,
h4,
p {
  margin: 0;
}
kbd {
  font:
    500 11px/16px Inter,
    sans-serif;
  color: var(--muted);
}
.muted {
  color: var(--muted);
}
.warn-text {
  color: var(--warning-fg) !important;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: 8px;
  top: -40px;
  z-index: 50;
  background: var(--surface);
  padding: 6px 10px;
  border-radius: var(--radius);
}
.skip-link:focus {
  top: 8px;
}
.resizing,
.resizing * {
  cursor: col-resize !important;
  user-select: none;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--border-sub);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-sub);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  white-space: nowrap;
}
.chip:hover {
  border-color: var(--border);
  color: var(--text);
}
.chip[aria-pressed='true'] {
  background: var(--selected);
  border-color: var(--selected);
  color: var(--text);
}
.count {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.empty strong {
  color: var(--text);
  font-weight: 600;
}
.review-bar {
  position: sticky;
  top: 0;
  z-index: 25;
  height: 32px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 14px;
  border-bottom: 1px solid var(--border-sub);
  background: var(--bg-sub);
  color: var(--muted);
  font-size: 12px;
}
.review-bar strong {
  color: var(--text-sub);
  font-weight: 600;
}
.review-note {
  margin-left: auto;
}
.review-bar a,
.review-bar button {
  color: var(--interactive);
  font-weight: 500;
  white-space: nowrap;
}
.review-bar button:hover {
  text-decoration: underline;
}
#app {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  min-height: calc(100dvh - 32px);
}
.main-col {
  grid-column: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.canvas {
  flex: 1;
  min-width: 0;
  padding: 8px 12px 12px;
}
.sidebar {
  position: sticky;
  top: 32px;
  align-self: start;
  width: 232px;
  height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  padding: 6px 10px 10px;
  background: var(--bg-sub);
  border-right: 1px solid var(--border-sub);
  overflow-y: auto;
}
.sidebar[hidden] {
  display: none;
}
.sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 0 0 0 6px;
}
.brand,
.toolbar-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.brand strong {
  font-size: 18px;
}
.toolbar-logo strong {
  font-size: 15px;
}
.brand-logo {
  width: 17px;
  height: 19px;
}
.nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 12px;
}
.nav-group {
  margin: 16px 8px 4px;
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  color: var(--muted);
}
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 6px 8px;
  border-radius: var(--radius);
  color: var(--text-sub);
  font-weight: 500;
}
.nav-item > span:not(.count) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-item:hover {
  background: var(--surface);
  color: var(--text);
}
.nav-item[aria-current='page'] {
  background: var(--surface);
  color: var(--text);
}
.nav-item[aria-current='page']::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: var(--text);
}
.profile {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 6px 0;
  border-top: 1px solid var(--border-sub);
  font-size: 12px;
  font-weight: 500;
}
.profile small {
  display: block;
  color: var(--muted);
  font-weight: 400;
}
.avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--border-sub);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-sub);
  flex: none;
}
.scrim {
  display: none;
}
.toolbar {
  position: sticky;
  top: 32px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 12px 6px 8px;
  background: var(--bg);
  border-bottom: 1px solid var(--border-sub);
}
.toolbar h1,
.toolbar-title {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.toolbar-logo {
  margin: 0 4px 0 4px;
}
.caption {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.segmented {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: var(--radius);
  background: var(--bg-sub);
}
.segmented button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 8px;
  border-radius: 4px;
  color: var(--text-sub);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.segmented button[aria-pressed='true'] {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 0 0 1px var(--border-sub);
}
.tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
.search {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 240px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
}
.search:focus-within {
  outline: 2px solid var(--interactive);
  outline-offset: -1px;
}
.search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  color: var(--text);
  font-size: 13px;
}
.picker {
  position: relative;
  display: inline-flex;
}
.glyph {
  color: var(--text);
}
.popover {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(6, 32px);
  gap: 2px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px #17181c1f;
}
.popover button {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  color: var(--text-sub);
}
.popover button:hover {
  background: var(--bg-sub);
  color: var(--text);
}
.popover button[aria-checked='true'] {
  background: var(--selected);
  color: var(--text);
}
.home {
  max-width: 1120px;
  margin: 0 auto;
  padding: 16px 12px 24px;
}
.home-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.home-head h1 {
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.home-head p {
  color: var(--text-sub);
  margin-top: 2px;
}
.home-head strong {
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.section-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
}
.routine-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.routine {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-sub);
  border-radius: 8px;
}
.routine:hover {
  border-color: var(--border);
}
.routine > .picker {
  position: absolute;
  top: 10px;
  left: 10px;
}
.routine-main {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 12px 10px 50px;
}
.routine-name {
  display: flex;
  flex-direction: column;
  min-height: 32px;
  justify-content: center;
}
.routine-name strong {
  font-weight: 600;
}
.routine-name span {
  color: var(--muted);
  font-size: 12px;
  line-height: 16px;
}
.routine-figures {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-left: -38px;
}
.routine-figures strong {
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.routine-figures span {
  color: var(--muted);
  font-size: 12px;
}
.routine-figures em {
  margin-left: auto;
  font-style: normal;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.due-strip {
  display: flex;
  align-items: end;
  gap: 2px;
  height: 24px;
  margin-left: -38px;
  border-bottom: 1px solid var(--border-sub);
}
.due-strip i {
  flex: 1;
  height: var(--h);
  background: var(--bg-sub);
  border-radius: 1px 1px 0 0;
}
.due-strip i.has {
  background: var(--border);
}
.due-strip i.today {
  background: var(--text-sub);
}
.routine-rule {
  margin-left: -38px;
  color: var(--muted);
  font-size: 12px;
  line-height: 16px;
}
.routine-rule b {
  color: var(--text-sub);
  font-weight: 600;
}
.routine-workflow .routine-main {
  flex: 1;
  gap: 8px;
  padding-bottom: 12px;
}
.routine-controls {
  display: grid;
  gap: 9px;
  margin-left: -38px;
  padding-top: 8px;
  border-top: 1px solid var(--border-sub);
}
.routine-control-group + .routine-control-group {
  padding-top: 8px;
  border-top: 1px solid var(--border-sub);
}
.routine-control-heading {
  display: block;
  color: var(--muted);
  font-size: 11px;
  line-height: 16px;
  margin-bottom: 3px;
}
.routine-control-group ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.routine-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(42px, 29%, 132px) min-content;
  align-items: center;
  gap: 8px;
  min-height: 23px;
}
.routine-control .af-domain-badge {
  font-size: 12px;
  line-height: 18px;
}
.routine-control .af-domain-badge svg {
  width: 14px;
  height: 14px;
}
.routine-control-chart {
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--aw-subtle);
}
.routine-control-chart i {
  display: block;
  width: var(--share);
  height: 100%;
  border-radius: inherit;
  background: var(--aw-muted);
}
.routine-control[data-tone='attention'] .routine-control-chart i {
  background: var(--aw-orange);
}
.routine-control[data-tone='positive'] .routine-control-chart i {
  background: var(--aw-green);
}
.routine-control strong {
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.routine-control strong small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
}
.routine-workflow-open {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--interactive);
  font-size: 12px;
  font-weight: 500;
}
.routine-workflow-open svg {
  width: 13px;
  height: 13px;
}
.routine-peek {
  list-style: none;
  margin: auto 0 0;
  padding: 4px;
  border-top: 1px solid var(--border-sub);
}
.routine-peek a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  min-height: 28px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}
.routine-peek a:hover {
  background: var(--bg-sub);
}
.peek-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.peek-due {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.peek-amount {
  min-width: 84px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.routine-peek a.peek-more {
  display: block;
  color: var(--interactive);
  font-weight: 500;
}
.workspace {
  --detail-w: 460px;
  --workspace-head-h: 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--detail-w);
  gap: 8px;
  align-items: start;
}
.list-pane,
.side {
  background: var(--surface);
  border: 1px solid var(--border-sub);
  border-radius: 8px;
  min-width: 0;
}
.list-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border-radius: 8px;
}
.list-columns,
.row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 100px 108px 168px;
  gap: 12px;
  align-items: center;
  min-width: 620px;
  padding: 0 12px;
}
.list-columns {
  height: var(--workspace-head-h);
  border-bottom: 1px solid var(--border-sub);
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}
.rows {
  list-style: none;
  margin: 0;
  padding: 0;
}
.row {
  position: relative;
  min-height: 44px;
  border-bottom: 1px solid var(--border-sub);
}
.rows li:last-child .row {
  border-bottom: 0;
}
.row:hover {
  background: var(--bg);
}
.row[aria-current='true'] {
  background: var(--selected);
}
.row[aria-current='true']::before {
  content: '';
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 2px;
  background: var(--interactive);
}
.row:focus-visible {
  outline-offset: -2px;
}
.cell-main {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  padding: 12px 0;
}
.cell-main strong {
  font-weight: 600;
  white-space: nowrap;
}
.cell-main span {
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cell-due {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}
.cell-due span {
  color: var(--muted);
}
.cell-amount {
  text-align: right;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.side {
  position: sticky;
  top: calc(32px + var(--toolbar-h) + 8px);
  display: flex;
  flex-direction: column;
  height: calc(100dvh - 32px - var(--toolbar-h) - 20px);
  min-height: 360px;
}
.split {
  position: absolute;
  left: -8px;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: col-resize;
  touch-action: none;
}
.split::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  border-radius: 2px;
}
.split:hover::after,
.split:focus-visible::after {
  background: var(--interactive);
}
.split:focus-visible {
  outline: none;
}
.side-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--workspace-head-h);
  padding: 0 12px;
  border-bottom: 1px solid var(--border-sub);
  flex: none;
}
.side-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.side-title strong {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.detail-pos {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.thread {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px;
  background: var(--bg);
}
.messages {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 4px 4px;
}
.messages:empty {
  display: none;
}
.membership-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}
.chip-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 8px 0 6px;
  border: 1px solid var(--border-sub);
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-sub);
}
.chip-link svg {
  width: 13px;
  height: 13px;
}
.chip-link:hover {
  border-color: var(--border);
  color: var(--text);
}
.chip-link.here {
  background: var(--selected);
  border-color: var(--selected);
  color: var(--text);
}
.mobile-only {
  display: none;
}
.composer-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.side > .composer-block {
  flex: none;
  padding: 8px 10px 10px;
  border-top: 1px solid var(--border-sub);
  border-radius: 0 0 8px 8px;
}
.suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.suggestion {
  height: 24px;
  padding: 0 9px;
  border: 1px solid var(--border-sub);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text-sub);
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.suggestion:hover {
  border-color: var(--border);
  color: var(--text);
}
.composer {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 6px 6px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.composer:focus-within {
  outline: 2px solid var(--interactive);
  outline-offset: -1px;
}
.composer textarea {
  width: 100%;
  min-height: 24px;
  max-height: 160px;
  padding: 4px 0 0;
  border: 0;
  outline: 0;
  resize: none;
  background: none;
  line-height: 20px;
  field-sizing: content;
}
.composer textarea::placeholder {
  color: var(--muted);
}
.composer-row {
  display: flex;
  align-items: end;
  gap: 8px;
}
.composer-row .send {
  margin-left: auto;
}
.note {
  color: var(--muted);
  font-size: 11px;
  line-height: 16px;
  text-align: right;
}
.dock {
  position: sticky;
  bottom: 0;
  z-index: 15;
  background: var(--bg);
  padding: 4px 12px 8px;
}
.dock-inner {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dock-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
}
.dock-meta [data-toggle-log] {
  margin-left: auto;
}
.scope {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-sub);
  font-size: 12px;
  font-weight: 500;
  min-width: 0;
}
.scope svg {
  color: var(--interactive);
  width: 14px;
  height: 14px;
}
.dock .composer {
  flex-direction: row;
  align-items: end;
}
.dock .composer textarea {
  flex: 1;
  padding: 6px 0;
}
.dock .composer-row {
  flex: none;
}
.msg p {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.msg.user {
  align-self: flex-end;
  max-width: 85%;
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--selected);
}
.msg-ctx {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-sub);
  font-size: 11px;
}
.msg-ctx svg {
  width: 12px;
  height: 12px;
}
.msg-author {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-sub);
  margin-bottom: 2px;
}
.msg-author svg {
  width: 14px;
  height: 14px;
  color: var(--interactive);
}
.msg-author em {
  font-style: normal;
  font-weight: 500;
  color: var(--muted);
}
@media (max-width: 1180px) {
  .routine-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .search {
    width: 180px;
  }
}
@media (max-width: 899px) {
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    height: 100dvh;
    z-index: 40;
    box-shadow: 8px 0 32px #17181c29;
  }
  .scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 35;
    background: #17181c33;
  }
  .toolbar {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .tools {
    flex-basis: 100%;
  }
  .search {
    flex: 1;
    width: auto;
  }
  .caption {
    display: none;
  }
}
@media (max-width: 800px) {
  .review-note {
    display: none;
  }
  .review-bar a {
    margin-left: auto;
  }
  .review-bar > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .canvas {
    padding: 8px;
  }
  .home {
    padding: 8px 4px 16px;
  }
  .home-head {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .routine-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .segmented {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .workspace {
    display: block;
  }
  .side {
    display: none;
  }
  .has-item .list-pane {
    display: none;
  }
  .has-item .side {
    display: flex;
  }
  .split {
    display: none;
  }
  .mobile-only {
    display: inline-flex;
  }
  .dock {
    padding: 4px 8px 8px;
  }
  .msg.user {
    max-width: 92%;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

/* ---------- Original prototype components ----------
   Source of truth: prototypes/chat-layouts/reference/index.html as published at
   https://awa-chat-layouts.vercel.app/ (rules under #awa-inbox-conversations). Values follow the
   live computed styles there: lucide icons render at 16px with a 1.5 stroke. */
.lucide {
  display: block;
  width: 16px;
  height: 16px;
  flex: none;
  margin: 0;
  stroke-width: 1.5;
}
.af-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 11px;
  min-height: 34px;
  border: 1px solid var(--aw-border);
  border-radius: 4px;
  background: var(--aw-bg);
  color: var(--aw-ink);
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
  white-space: nowrap;
}
.af-button:hover {
  background: var(--aw-subtle);
}
.af-button:focus-visible {
  outline: 2px solid var(--aw-accent);
  outline-offset: 2px;
}
.af-icon {
  width: 30px;
  min-height: 30px;
  padding: 0;
  flex-shrink: 0;
}
.af-ghost {
  background: var(--aw-subtle);
  border-color: transparent;
  color: var(--aw-sub);
}
.af-ghost:hover:not(:disabled) {
  background: var(--aw-border);
}
.af-icon.af-ghost {
  background: transparent;
}
.af-icon.af-ghost:hover {
  background: var(--aw-subtle);
  color: var(--aw-ink);
}
.af-primary {
  background: var(--aw-primary);
  border-color: transparent;
  color: #fff;
}
.af-primary:hover:not(:disabled) {
  background: var(--aw-primary-hover);
}
.af-source-button {
  font-size: 11px;
  line-height: 18px;
  min-height: 30px;
  padding: 0 8px;
  margin-top: 10px;
  background: transparent;
}
.af-mono {
  font-family: var(--font-mono), monospace;
  font-size: 11px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}
.af-good {
  color: var(--aw-green);
}
.af-warn {
  color: var(--aw-orange);
}
.af-muted {
  color: var(--aw-muted);
}
.af-domain-badge {
  --status-icon-color: var(--aw-muted);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--aw-subtle);
  color: var(--aw-sub);
  font-size: 10px;
  line-height: 17px;
  white-space: nowrap;
}
.af-domain-badge[data-tone='attention'] {
  --status-icon-color: var(--aw-orange);
  background: var(--aw-orange-bg);
  color: var(--aw-orange);
}
.af-domain-badge[data-tone='positive'] {
  --status-icon-color: var(--aw-green);
  background: var(--aw-green-bg);
  color: var(--aw-green);
}
.af-domain-badge[data-variant='inline'] {
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--aw-ink);
}
.af-domain-badge[data-variant='inline'] svg {
  color: var(--status-icon-color);
}
.af-detail-body {
  padding: 18px;
  font-size: 13px;
  line-height: 20px;
}
.af-detail-body h2 {
  margin: 11px 0 0;
  font-size: 20px;
  line-height: 27px;
  font-weight: 500;
}
.af-detail-body .af-auxiliary-title {
  margin: 0 0 18px;
}
.af-object-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.af-object-eyebrow > .af-mono {
  color: var(--aw-muted);
}
.af-domain-description {
  margin-top: 12px;
  font-size: 12px;
  line-height: 20px;
  color: var(--aw-sub);
  overflow-wrap: anywhere;
}
.af-value-label {
  margin-top: 22px;
  font-size: 11px;
  line-height: 16px;
  color: var(--aw-muted);
}
.af-value {
  margin-top: 18px;
  font-size: 24px;
  line-height: 30px;
  letter-spacing: -0.025em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.af-value-label + .af-value {
  margin-top: 4px;
  font-size: 27px;
  line-height: 34px;
}
.af-domain-alert {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 16px;
  color: var(--aw-ink);
  font-size: 12px;
  line-height: 19px;
}
.af-domain-alert svg {
  color: var(--aw-orange);
}
.af-domain-props {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr);
  gap: 10px 12px;
  margin: 20px 0 0;
  font-size: 12px;
  line-height: 18px;
}
.af-domain-props dt {
  color: var(--aw-muted);
}
.af-domain-props dd {
  margin: 0;
  min-width: 0;
  text-align: right;
  overflow-wrap: anywhere;
}
.af-detail-section {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--aw-line);
}
.af-detail-section h3 {
  margin: 0 0 11px;
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
}
.af-detail-section .af-domain-props {
  margin-top: 0;
}
.af-artifact-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--aw-line);
  background: transparent;
  color: var(--aw-ink);
  text-align: left;
  font-size: 13px;
  line-height: 20px;
}
.af-artifact-link > svg:first-child {
  color: var(--aw-accent);
}
.af-artifact-link > span {
  flex: 1;
  min-width: 0;
}
.af-artifact-link strong {
  display: block;
  font-size: 12px;
  line-height: 19px;
  font-weight: 500;
}
.af-artifact-link small {
  display: block;
  font-size: 11px;
  line-height: 18px;
  color: var(--aw-muted);
  overflow-wrap: anywhere;
}
.af-artifact-link > svg:last-child {
  color: var(--aw-muted);
}
.af-artifact-link:hover {
  background: var(--aw-elevated);
}
.af-checklist {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.af-checklist li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  line-height: 18px;
}
.af-checklist small {
  margin-left: auto;
  color: var(--aw-muted);
  font-size: 10px;
}
.af-missing {
  margin-top: 8px;
  color: var(--aw-muted);
  font-size: 11px;
  line-height: 19px;
}
.af-meta {
  margin-top: 14px;
  color: var(--aw-muted);
  font-size: 11px;
  line-height: 16px;
}
.af-code-value {
  font-family: var(--font-mono), monospace;
  font-size: 11px;
  line-height: 20px;
  color: var(--aw-sub);
  overflow-wrap: anywhere;
}
.af-detail-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 8px;
  border-bottom: 1px solid var(--aw-line);
  color: var(--aw-muted);
  font-size: 11px;
  line-height: 20px;
}
.af-detail-head > .af-icon {
  width: 32px;
  height: 32px;
  min-height: 32px;
}
.af-detail-head > span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.af-detail-foot {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--aw-line);
}
.af-document-preview {
  padding: 20px;
  border: 1px solid var(--aw-border);
}
.af-preview-stamp {
  display: block;
  margin-bottom: 18px;
  color: var(--aw-muted);
  font-size: 10px;
  line-height: 18px;
  letter-spacing: 0.05em;
}
.af-document-preview h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 500;
}
.af-mail-header .af-domain-props {
  margin-top: 0;
}
.af-mail-body {
  margin-top: 14px;
  font-size: 12px;
  line-height: 20px;
}
.af-timeline {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 11px;
  line-height: 18px;
}
.af-timeline li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.af-timeline time {
  color: var(--aw-muted);
  white-space: nowrap;
}

/* The card that holds these components inside the right pane's single scroller. */
.card {
  background: var(--aw-bg);
  border: 1px solid var(--aw-line);
  border-radius: 5px;
}
.af-more {
  margin-top: 22px;
  border-top: 1px solid var(--aw-line);
}
.af-more > summary {
  padding-top: 12px;
  cursor: pointer;
  color: var(--aw-sub);
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
}
.af-more > summary:hover {
  color: var(--aw-ink);
}
.af-more > .af-detail-section:first-of-type {
  margin-top: 12px;
}
.msg-refs {
  max-width: 560px;
  margin-top: 8px;
  padding: 0 12px;
  background: var(--aw-bg);
  border: 1px solid var(--aw-line);
  border-radius: 5px;
}
.msg-refs .af-artifact-link:last-child {
  border-bottom: 0;
}
.msg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.af-source-button + .af-source-button {
  margin-left: 6px;
}
.af-button.mobile-only {
  display: none;
}
@media (max-width: 800px) {
  .af-button.mobile-only {
    display: inline-flex;
  }
}

/* Home conversation: part of the page, below the routines, read with the page scroll. */
.home-thread {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 880px;
  margin: 28px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--aw-line);
}
.home-thread .msg.user {
  max-width: 70%;
}

/* ---------- Surfaces and spacing (this iteration) ---------- */
/* A lighter page backdrop than the original canvas; surfaces stay white. */
:root {
  --bg: #f4f4f6;
  --toolbar-bottom: 84px;
}
.canvas {
  padding: 12px 12px 12px;
}

/* Toolbar: one lean row on a white contained surface, like the original prototype. The outline
   paints the page backdrop around it so content scrolling underneath never shows through. */
.toolbar {
  top: 40px;
  margin: 8px 12px 0;
  padding: 6px 10px 6px 6px;
  background: var(--aw-bg);
  border: 1px solid var(--aw-line);
  border-radius: 6px;
  outline: 8px solid var(--bg);
}

/* Menu: flush with the left edge, with even inner spacing. */
.sidebar {
  padding: 8px 8px 10px;
}
.sidebar-head {
  padding: 0 0 0 8px;
}

/* Home conversation reads across the page; routines stay reachable through the menu. */
.home-thread {
  gap: 16px;
}
.dock-inner {
  gap: 8px;
}

/* Dense list: every row is a single line; urgency sits beside the date. */
.list-columns,
.row {
  grid-template-columns: minmax(180px, 1fr) 128px 108px 168px;
  min-width: 640px;
}
.row {
  min-height: 42px;
}
.cell-main {
  padding: 11px 0;
}
.cell-due {
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}
.cell-due small {
  color: var(--aw-muted);
  font-size: 11px;
}

/* Right pane: a white floating surface; the card and the reply box float inside it. */
.side {
  top: calc(var(--toolbar-bottom) + 12px);
  height: calc(100dvh - var(--toolbar-bottom) - 24px);
  background: var(--aw-bg);
  border-color: var(--aw-line);
  border-radius: 8px;
  box-shadow:
    0 1px 2px #16161c0a,
    0 6px 20px #16161c0a;
}
.thread {
  background: var(--aw-bg);
  padding: 12px 14px 8px;
}
.thread > .card {
  border-color: var(--aw-line);
  border-radius: 6px;
  box-shadow:
    0 1px 3px #16161c14,
    0 8px 22px #16161c0d;
}
.side > .composer-block {
  padding: 6px 14px 14px;
  border-top: 0;
  background: var(--aw-bg);
}

/* Composer: tools above, then the reply box (text and send on one line). */
.composer-block {
  gap: 0;
}
.composer-tools {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}
.suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.suggestion {
  height: auto;
  min-height: 26px;
  padding: 3px 10px;
  border-radius: 13px;
  line-height: 18px;
  white-space: normal;
  text-align: left;
}
.chip[aria-pressed='true'] {
  background: var(--aw-accent-bg);
  border-color: var(--aw-accent);
  color: var(--aw-accent);
}
.composer {
  flex-direction: row;
  align-items: flex-end;
  gap: 8px;
  padding: 6px 6px 6px 12px;
  border-color: var(--aw-border);
  box-shadow:
    0 1px 2px #16161c0f,
    0 4px 14px #16161c0d;
}
.composer textarea {
  flex: 1;
  min-height: 32px;
  padding: 6px 0;
}
.dock .note {
  margin-top: 6px;
}

@media (max-width: 800px) {
  .toolbar {
    margin: 8px 8px 0;
  }
  .canvas {
    padding: 10px 8px 8px;
  }
  .side > .composer-block {
    padding: 6px 10px 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
  }
}

/* ---------- Scope picker: "+" inside the reply box ---------- */
.composer {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 8px 8px 8px 12px;
}
.composer textarea {
  width: 100%;
  padding: 4px 0;
}
.composer-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.composer-row .send {
  margin-left: auto;
}
.dock .composer {
  flex-direction: row;
  align-items: flex-end;
}
.dock .composer textarea {
  flex: 1;
  padding: 6px 0;
}
.scope {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.scope-add {
  margin-left: -4px;
  color: var(--aw-sub);
}
.scope-add[aria-expanded='true'] {
  background: var(--aw-accent-bg);
  color: var(--aw-accent);
}
.scope-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  max-width: 100%;
  padding: 2px 4px 2px 7px;
  border-radius: 4px;
  background: var(--aw-subtle);
  color: var(--aw-sub);
  font-size: 11px;
  line-height: 18px;
}
.scope-chip > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scope-chip:not([data-kind='whole']) {
  background: var(--aw-accent-bg);
  color: var(--aw-accent);
}
.scope-chip .lucide {
  width: 14px;
  height: 14px;
}
.scope-chip button {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  color: inherit;
}
.scope-chip button:hover {
  background: var(--aw-accent-bg-hover);
}
.scope-chip button .lucide {
  width: 12px;
  height: 12px;
}
.scope-chip[data-kind='whole'] {
  padding-right: 7px;
}
.scope-menu {
  position: absolute;
  left: -4px;
  bottom: calc(100% + 10px);
  z-index: 30;
  width: min(340px, calc(100vw - 40px));
  max-height: min(420px, 60vh);
  overflow-y: auto;
  padding: 6px 12px 8px;
  background: var(--aw-bg);
  border: 1px solid var(--aw-border);
  border-radius: 6px;
  box-shadow: 0 8px 28px #16161c24;
}
.scope-group-label {
  margin: 8px 0 0;
  color: var(--aw-muted);
  font-size: 10px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.scope-group .af-missing {
  margin: 4px 0 6px;
}
.scope-item {
  padding: 8px 0;
}
.scope-item:last-child {
  border-bottom: 0;
}
.scope-item > .lucide:last-child,
.scope-check {
  width: 16px;
  height: 16px;
  color: var(--aw-accent);
}
.scope-item[aria-checked='true'] strong {
  color: var(--aw-accent);
}
.scope-item:focus-visible {
  outline: 2px solid var(--aw-accent);
  outline-offset: -2px;
}
.scope-item > .scope-check {
  flex: none;
}

/* ---------- List: supplier, fiscal document, links; multi-selection ---------- */
/* One grid for the header and every row, so columns stay aligned at every width. */
.list-columns,
.row {
  grid-template-columns: 16px minmax(120px, 1fr) 104px 92px 124px 96px 144px;
  gap: 10px;
  min-width: 784px;
}
.row {
  min-height: 48px;
}
.rows > .row:last-child {
  border-bottom: 0;
}
.row > * {
  min-width: 0;
}
.cell-main {
  padding: 0;
}
.cell-main strong {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cell-main span {
  flex: 1 1 0;
  min-width: 0;
}
/* The row link is stretched over the row; checkbox and link icons sit above it. */
.row-link::after {
  content: '';
  position: absolute;
  inset: 0;
}
.row-link:focus-visible {
  outline: none;
}
.row:has(.row-link:focus-visible) {
  outline: 2px solid var(--aw-accent);
  outline-offset: -2px;
}
.row[data-selected] {
  background: var(--aw-accent-bg);
}
.row[data-current] {
  background: var(--selected);
}
.row[data-current]::before {
  content: '';
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 2px;
  background: var(--interactive);
}
.cell-check {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  align-self: stretch;
  cursor: pointer;
}
.cell-check input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--aw-primary);
  cursor: pointer;
}
.rows .cell-check input:not(:checked) {
  opacity: 0.55;
}
.row:hover .cell-check input,
.cell-check input:focus-visible {
  opacity: 1;
}
.cell-doc {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cell-doc > span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.cell-doc small {
  color: var(--aw-muted);
  font-size: 11px;
}
.cell-links {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  width: max-content;
}
.link-icon {
  display: grid;
  place-items: center;
  width: 18px;
  height: 24px;
  border-radius: 4px;
  color: var(--aw-muted);
}
.link-icon .lucide {
  width: 14px;
  height: 14px;
}
.link-icon:hover {
  background: var(--aw-subtle);
  color: var(--aw-ink);
}
.link-icon:focus-visible {
  outline: 2px solid var(--aw-accent);
  outline-offset: 0;
}
.link-none {
  font-size: 12px;
}

/* Selection actions: a floating bar under the list, composed of af-button actions. */
.bulk-bar {
  position: sticky;
  bottom: 12px;
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 8px;
  padding: 6px 6px 6px 12px;
  background: var(--aw-bg);
  border: 1px solid var(--aw-border);
  border-radius: 8px;
  box-shadow:
    0 1px 2px #16161c0f,
    0 4px 14px #16161c0d;
}
.bulk-count {
  color: var(--aw-sub);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bulk-count strong {
  color: var(--aw-ink);
  font-weight: 600;
}
.bulk-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.bulk-actions .af-button:not(.af-icon) {
  min-height: 30px;
}
.bulk-n {
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
}
.bulk-actions .af-button .lucide-chevron-down {
  width: 14px;
  height: 14px;
  margin-left: -3px;
}
.menu-anchor {
  position: relative;
  display: inline-flex;
}
.export-menu {
  left: 0;
  width: min(300px, calc(100vw - 40px));
}

/* Item headings keep document kinds as written (NF-e, not NF-E). */
.scope-group-label.is-item {
  color: var(--aw-sub);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  overflow-wrap: anywhere;
}

/* Group context and the compact context control in the right pane. */
.group-more > summary {
  padding-top: 10px;
}
.context-float {
  position: absolute;
  top: calc(var(--workspace-head-h) + 10px);
  right: 22px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  max-width: calc(100% - 44px);
}
.context-float[hidden] {
  display: none;
}
.context-toggle {
  min-height: 30px;
  padding: 0 8px;
  gap: 6px;
  box-shadow:
    0 1px 2px #16161c0f,
    0 4px 14px #16161c0d;
}
.context-toggle .lucide {
  width: 14px;
  height: 14px;
  color: var(--aw-sub);
}
.context-toggle[aria-expanded='true'] .lucide-chevron-down {
  transform: rotate(180deg);
}
.context-panel {
  position: static;
  margin-top: 6px;
  width: min(340px, calc(100vw - 48px));
  max-height: min(440px, 55vh);
}
.context-foot {
  display: flex;
  justify-content: flex-end;
  padding-top: 8px;
}
.context-foot .af-button {
  min-height: 28px;
}

/* Dry-run preview: the source-view card as a modal dialog. */
.dry-run {
  width: min(520px, calc(100vw - 32px));
  max-height: min(680px, calc(100dvh - 48px));
  padding: 0;
  background: var(--aw-bg);
  color: var(--aw-ink);
  font-family: Figtree, sans-serif;
  font-size: 13px;
  line-height: 20px;
  box-shadow: 0 16px 48px #16161c33;
}
.dry-run[open] {
  display: flex;
  flex-direction: column;
}
.dry-run::backdrop {
  background: #17181c33;
}
.dry-run .af-detail-body {
  overflow-y: auto;
}
.preview-row {
  cursor: default;
}
.preview-row:hover {
  background: transparent;
}

@media (max-width: 800px) {
  .bulk-bar {
    margin: 6px;
  }
  .bulk-actions {
    margin-left: 0;
  }
}

/* ---------- OpenUI answers in the right pane ---------- */
/* The renderer outputs the same af-* primitives used throughout the prototype. */
.side > .composer-block .ui-note {
  margin-top: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-slot[data-pending] > p {
  color: var(--aw-sub);
}
.ui-slot[data-pending='loading']::after {
  content: 'Carregando renderizador…';
  display: block;
  margin-top: 4px;
  color: var(--aw-muted);
  font-size: 11px;
}
.ui-slot[data-pending='failed']::after {
  content: 'Renderizador indisponível; mostrando o texto da resposta.';
  display: block;
  margin-top: 4px;
  color: var(--aw-orange);
  font-size: 11px;
}
.ui-narrative {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.ui-scope {
  color: var(--aw-sub);
  font-size: 11px;
  overflow-wrap: anywhere;
}
.ui-summary-title {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 500;
  overflow-wrap: anywhere;
}
/* OpenUI: prose first, then a one-line context strip and a short list of cited sources. */
.ui-reply {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ui-summary {
  padding: 10px 12px;
  background: var(--aw-bg);
  border: 1px solid var(--aw-line);
  border-radius: 5px;
}
.ui-summary-figures {
  display: block;
  color: var(--aw-muted);
  font-size: 11px;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
}
.ui-cited {
  padding: 0 12px;
  background: var(--aw-bg);
  border: 1px solid var(--aw-line);
  border-radius: 5px;
}
.ui-cited h3 {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
}
.ui-cited .af-artifact-link:last-of-type {
  border-bottom: 0;
}
.ui-cited .af-missing {
  margin: 0 0 10px;
}
.ui-reply > .af-source-button {
  align-self: flex-start;
  margin-top: 0;
}
.ui-payload {
  margin-top: 6px;
  border-top: 0;
}
.ui-payload > summary {
  padding-top: 0;
  color: var(--aw-muted);
  font-size: 11px;
}
.ui-payload pre {
  max-height: 240px;
  margin: 6px 0 0;
  padding: 8px 10px;
  overflow: auto;
  background: var(--aw-elevated);
  border: 1px solid var(--aw-line);
  border-radius: 4px;
  color: var(--aw-sub);
  font:
    11px/16px var(--font-mono),
    monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* The list keeps one-line rows and scrolls sideways when the pane is narrow (for example with the
   menu open); a soft edge shows which side still has columns out of view. */
.list-frame {
  position: relative;
  container-type: inline-size;
}
/* When the pane is too narrow for the columns anyway, give them room instead of squeezing the
   supplier: the list scrolls sideways and the header scrolls with it. */
@container (max-width: 783px) {
  .list-columns,
  .row {
    grid-template-columns: 16px minmax(200px, 1fr) 112px 96px 124px 104px 152px;
    min-width: 900px;
  }
}
.list-frame::before,
.list-frame::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 3;
  width: 24px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms;
}
.list-frame::before {
  left: 0;
  border-radius: 8px 0 0 8px;
  background: linear-gradient(to right, var(--aw-shade), transparent);
}
.list-frame::after {
  right: 0;
  border-radius: 0 8px 8px 0;
  background: linear-gradient(to left, var(--aw-shade), transparent);
}
.list-frame[data-overflow~='start']::before,
.list-frame[data-overflow~='end']::after {
  opacity: 1;
}
.list-scroll {
  scrollbar-width: thin;
}
@media (max-width: 899px) {
  .tools .search {
    min-width: 0;
  }
  .tools {
    gap: 4px;
  }
  .tools .search {
    flex: 1 1 0;
  }
}

/* ---------- Appearance: dark theme ----------
   The same Awa tokens with dark values; every surface, border, status tone and focus ring reads
   them, so components are not recoloured one by one. Purple stays the primary action colour and
   orange stays attention. Light is the default; index.html sets data-theme before the first paint. */
:root[data-theme='dark'] {
  --aw-ink: #f3f3f7;
  --aw-sub: #c8cad4;
  --aw-muted: #a5a8b7;
  --aw-line: #ffffff26;
  --aw-border: #ffffff3d;
  --aw-bg: #08090d;
  --aw-subtle: #1b1d25;
  --aw-elevated: #20222b;
  --aw-canvas: #252730;
  --aw-accent: #b690f7;
  --aw-accent-bg: #2d2445;
  --aw-accent-bg-hover: #3b2f5c;
  --aw-primary: #7d3eda;
  --aw-primary-hover: #8f55e6;
  --aw-orange: #ff7a33;
  --aw-orange-bg: #3a2216;
  --aw-green: #5ad08a;
  --aw-green-bg: #15291e;
  --aw-shade: #00000073;
  --bg: var(--aw-canvas);
  color-scheme: dark;
}
/* Shadows lose contrast on dark surfaces; a hairline keeps floating surfaces apart. */
:root[data-theme='dark'] .dry-run {
  border-color: var(--aw-border);
}

/* ---------- Configurações ----------
   An agent page like Home: the same head, grid, page conversation and docked composer. A settings
   tile is a routine card with a static glyph where the routine has its icon picker, a button as
   the main area (it opens the conversation) and a footer in place of the peek list. */
.setting-glyph {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--text);
  pointer-events: none;
}
button.routine-main {
  width: 100%;
  text-align: left;
  border-radius: 8px 8px 0 0;
}
button.routine-main:focus-visible {
  outline-offset: -2px;
}
.setting[data-active] {
  border-color: var(--interactive);
}
.setting-foot {
  display: flex;
  align-items: center;
  min-height: 41px;
  margin-top: auto;
  padding: 6px 12px;
  border-top: 1px solid var(--border-sub);
}
.setting-foot .af-domain-badge {
  font-size: 11px;
}
.theme-switch .lucide {
  width: 14px;
  height: 14px;
}
.scope-chip[data-kind='topic'] {
  align-self: center;
  max-width: 180px;
}

/* Sidebar foot: Configurações and the theme switch, apart from the routine navigation. */
.sidebar-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 16px;
}
.sidebar-foot .nav {
  margin-top: 0;
}
.sidebar-foot .theme-switch {
  display: flex;
  margin: 0 2px 2px;
  box-shadow: inset 0 0 0 1px var(--border-sub);
}
.sidebar-foot .theme-switch button {
  flex: 1;
  justify-content: center;
}
.sidebar-foot ~ .profile {
  margin-top: 10px;
}

/* ---------- Simulated entry and guided onboarding ---------- */
#app[data-entry] {
  display: block;
}
.entry-shell {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 32px);
  background: var(--bg);
}
.entry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 0 clamp(16px, 4vw, 56px);
  border-bottom: 1px solid var(--border-sub);
  background: var(--surface);
}
.entry-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 17px;
  font-weight: 700;
}
.entry-brand .brand-logo {
  width: 20px;
  height: 23px;
}
.entry-header > span,
.entry-footer {
  color: var(--muted);
  font-size: 11px;
}
.entry-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  width: 100%;
}
.entry-footer {
  padding: 14px 16px;
  text-align: center;
}
.entry-auth {
  width: min(100% - 32px, 460px);
  margin: auto;
  padding: 56px 0;
}
.entry-kicker {
  display: inline-flex;
  align-items: center;
  color: var(--interactive);
  font-size: 12px;
  font-weight: 600;
}
.entry-auth h1,
.entry-onboarding-head h1 {
  margin-top: 8px;
  font-size: clamp(27px, 3vw, 36px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.035em;
}
.entry-lead {
  margin-top: 14px;
  color: var(--text-sub);
  font-size: 14px;
  line-height: 1.6;
}
.entry-auth-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 32px;
  padding: 24px;
  border: 1px solid var(--border-sub);
  border-radius: 8px;
  background: var(--surface);
}
.entry-auth-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.entry-auth-heading svg {
  color: var(--interactive);
}
.entry-auth-card > .af-button {
  display: flex;
  justify-content: center;
  min-height: 44px;
  gap: 9px;
  font-size: 14px;
}
.entry-auth-card > p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.entry-google {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
}
.entry-google:hover {
  background: var(--bg-sub);
}
.entry-google-mark {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}
.entry-switch {
  margin-top: 22px;
  color: var(--text-sub);
  text-align: center;
}
.entry-switch a,
.entry-back {
  color: var(--interactive);
  font-weight: 600;
}
.entry-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 34px;
}
.entry-back svg {
  width: 14px;
  height: 14px;
}
.entry-onboarding {
  display: flex;
  flex: 1;
  flex-direction: column;
  width: min(100% - 32px, 760px);
  min-height: calc(100dvh - 130px);
  margin: 0 auto;
  padding-top: 34px;
}
.entry-onboarding-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.entry-onboarding-head > div > p {
  margin-top: 8px;
  color: var(--muted);
}
.entry-progress-label {
  align-self: end;
  color: var(--text-sub);
  font-size: 12px;
  white-space: nowrap;
}
.entry-progress {
  height: 3px;
  margin: 22px 0 30px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--bg-sub);
}
.entry-progress > span {
  display: block;
  height: 100%;
  background: var(--interactive);
  transition: width 240ms ease;
}
.entry-chat {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 22px;
  padding: 0 4px 36px;
}
.onboarding-agent {
  max-width: 620px;
  scroll-margin-top: 56px;
  scroll-margin-bottom: 180px;
}
.onboarding-agent .ui-reply {
  max-width: 590px;
}
.onboarding-answer {
  max-width: 78%;
}
.entry-domain-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(100%, 420px);
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--border-sub);
  border-radius: 7px;
  background: var(--surface);
}
.entry-domain-card > div:nth-child(2) {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}
.entry-domain-card strong {
  font-size: 13px;
}
.entry-domain-card small {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.entry-domain-card > svg {
  color: var(--muted);
}
.entry-domain-logo {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  overflow: hidden;
  border-radius: 6px;
  background: var(--selected);
  color: var(--interactive);
  font-weight: 700;
}
.entry-demo-link {
  display: inline-flex;
  margin-top: 14px;
  color: var(--interactive);
  font-weight: 600;
  text-decoration: none;
}
.entry-demo-link:hover {
  text-decoration: underline;
}
.entry-review-grid {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
.entry-org-review {
  margin-top: 16px;
}
.entry-review-card,
.entry-secure-card,
.entry-expiry-list {
  border: 1px solid var(--border-sub);
  border-radius: 8px;
  background: var(--surface);
}
.entry-review-card {
  padding: 14px 16px;
}
.entry-review-card-head,
.entry-secure-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.entry-review-card-head > svg,
.entry-secure-head > svg {
  flex: none;
  color: var(--interactive);
}
.entry-review-card-head > strong {
  flex: 1;
}
.entry-review-card-head > span {
  color: var(--muted);
  font-size: 11px;
}
.entry-review-card dl {
  display: grid;
  gap: 6px;
  margin: 12px 0 0;
}
.entry-review-card dl > div {
  display: grid;
  grid-template-columns: 145px minmax(0, 1fr);
  gap: 8px;
}
.entry-review-card dt {
  color: var(--muted);
}
.entry-review-card dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}
.entry-review-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border-sub);
  cursor: pointer;
}
.entry-review-check input {
  accent-color: var(--interactive);
}
.entry-stage-button {
  margin-top: 12px;
}
.entry-secure-card {
  display: grid;
  gap: 14px;
  margin-top: 16px;
  padding: 16px;
}
.entry-secure-head > div {
  display: grid;
}
.entry-secure-head span,
.entry-secure-card > p,
.entry-secure-note {
  color: var(--muted);
  font-size: 12px;
}
.entry-secure-card label {
  display: grid;
  gap: 6px;
  font-weight: 600;
}
.entry-secure-card input {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.entry-secure-card input:focus-visible {
  outline: 2px solid var(--interactive);
  outline-offset: 2px;
}
.entry-stage-actions,
.entry-alert-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.entry-stage-actions > .af-primary {
  margin-left: auto;
}
.entry-expiry-list {
  margin-top: 16px;
  padding: 4px 14px;
}
.entry-expiry-list > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
}
.entry-expiry-list > div + div {
  border-top: 1px solid var(--border-sub);
}
.entry-expiry-list span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.entry-expiry-list svg {
  color: var(--interactive);
}
.entry-expiry-list strong {
  flex: none;
}
.entry-alert-options {
  margin-top: 14px;
}
.entry-alert-skip {
  margin-top: 8px;
}
.entry-upload-cue,
.entry-answer-file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 9px;
  color: var(--text-sub);
  font-size: 12px;
}
.entry-upload-cue svg,
.entry-answer-file svg {
  width: 14px;
  height: 14px;
}
.entry-dock {
  position: sticky;
  bottom: 0;
  z-index: 10;
  padding: 12px 0 16px;
  background: var(--bg);
}
.entry-dock-inline {
  position: static;
}
.entry-composer-block {
  gap: 10px;
}
.entry-composer-block .suggestions {
  gap: 8px;
}
.entry-composer-block .composer {
  padding: 10px 12px;
}
.entry-composer-block .composer textarea {
  min-height: 44px;
}
.entry-composer-block .composer-row {
  flex-wrap: wrap;
  align-items: center;
}
.entry-composer-block input[type='file'] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.entry-attach {
  cursor: pointer;
}
.entry-attach:focus-within {
  outline: 2px solid var(--interactive);
}
.entry-skip {
  margin-left: auto;
}
.entry-file-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  max-width: 100%;
  padding: 3px 6px;
  border-radius: 4px;
  background: var(--bg-sub);
  color: var(--text-sub);
}
.entry-file-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.entry-summary {
  padding: 18px;
  border: 1px solid var(--border-sub);
  border-radius: 8px;
  background: var(--surface);
}
.entry-summary-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.entry-summary-head > svg {
  width: 23px;
  height: 23px;
  color: var(--success-fg);
}
.entry-summary-head > div {
  display: flex;
  flex-direction: column;
}
.entry-summary-head span {
  color: var(--muted);
}
.entry-summary dl {
  display: grid;
  gap: 0;
  margin: 18px 0;
  border-top: 1px solid var(--border-sub);
}
.entry-summary dl > div {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-sub);
}
.entry-summary dt {
  color: var(--muted);
}
.entry-summary dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}
.entry-summary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
@media (max-width: 800px) {
  .review-bar {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .review-bar > * {
    flex: none;
  }
  .review-bar > span:first-child {
    max-width: 140px;
  }
  .review-bar a {
    margin-left: 0;
  }
  .entry-header {
    min-height: 56px;
  }
  .entry-onboarding {
    width: min(100% - 24px, 760px);
    padding-top: 24px;
  }
  .entry-onboarding-head h1 {
    font-size: 26px;
  }
  .entry-onboarding-head > div > p {
    overflow-wrap: anywhere;
  }
  .entry-progress-label {
    display: none;
  }
  .entry-composer-block .composer-row {
    gap: 6px;
  }
  .entry-skip {
    margin-left: 0;
  }
  .entry-send {
    margin-left: auto;
  }
  .entry-summary dl > div {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .entry-review-card dl > div {
    grid-template-columns: 1fr;
    gap: 1px;
  }
  .entry-stage-actions > .af-primary {
    margin-left: 0;
  }
}