@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
/* Design system Ray para fragmentos HTML do renderizador LLM (escopado sob .shell). */
@import url('./ray-design-tokens.css');

:host {
  font-family: "Spectral", Georgia, "Times New Roman", serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

html {
  --wa-global-ui-scale: 0.85;
  font-size: calc(16px * var(--wa-global-ui-scale));
  --wa-sticky-top-default: 3.25rem;
  --wa-sticky-max-height-default: calc(100vh - 5rem);
  --wa-steps-sidebar-sticky-top: var(--wa-sticky-top-default);
  --wa-steps-sidebar-sticky-max-height: var(--wa-sticky-max-height-default);
  --wa-admin-sidebar-list-indent-inline-start: 0.22rem;
  --wa-admin-sidebar-list-item-indent-inline-start: 0.22rem;
  --wa-admin-sidebar-list-text-color: #000000;
  --wa-shell-bg: linear-gradient(180deg, #f8f3eb 0%, #f3ecdf 100%);
  --wa-shell-header-bg: rgba(255, 255, 255, 0.82);
  --wa-shell-navbar-gap-bg: #f8f3eb;
  --wa-shell-footer-bg: rgba(255, 255, 255, 0.72);
  --wa-shell-user-bg: rgba(255, 255, 255, 0.62);
  --wa-shell-user-bg-hover: rgba(255, 255, 255, 0.86);
  --wa-shell-surface: rgba(255, 255, 255, 0.4);
  --wa-shell-surface-hover: rgba(255, 255, 255, 0.58);
  --wa-shell-border: #e8dfcf;
  --wa-shell-divider: rgba(32, 26, 17, 0.08);
  --wa-shell-text: #201a11;
  --wa-shell-text-muted: #6d6558;
  --wa-shell-text-soft: #8b816f;
  --wa-shell-badge-bg: rgba(255, 255, 255, 0.55);
  --wa-shell-badge-bg-hover: rgba(255, 255, 255, 0.68);
  --wa-shell-selected-bg: linear-gradient(155deg, #4a3f2f 0%, #241f18 55%, #14110c 100%);
  --wa-shell-selected-bg-hover: linear-gradient(155deg, #574a37 0%, #2c261c 55%, #1a160f 100%);
  --wa-shell-selected-border: #1e1a15;
  --wa-shell-selected-text: #fff7ea;
  --wa-shell-selected-text-muted: rgba(255, 247, 234, 0.76);
  --wa-shell-selected-badge-bg: rgba(255, 247, 234, 0.12);
  --wa-shell-accent: #3f6f9f;
  --wa-shell-accent-soft: rgba(63, 111, 159, 0.14);
  --wa-shell-focus-ring: rgba(63, 111, 159, 0.34);
  --wa-shell-shadow: 0 18px 40px -28px rgba(20, 17, 10, 0.34);
  --wa-shell-hover-shadow: 0 14px 32px -24px rgba(20, 17, 10, 0.42);
}

html[theme~="dark"] {
  --wa-shell-bg: linear-gradient(180deg, #101823 0%, #0b1119 100%);
  --wa-shell-header-bg: rgba(8, 13, 20, 0.88);
  --wa-shell-navbar-gap-bg: #0b1119;
  --wa-shell-footer-bg: rgba(10, 16, 24, 0.82);
  --wa-shell-user-bg: rgba(21, 31, 46, 0.9);
  --wa-shell-user-bg-hover: rgba(27, 41, 61, 0.96);
  --wa-shell-surface: rgba(19, 29, 43, 0.88);
  --wa-shell-surface-hover: rgba(25, 38, 58, 0.96);
  --wa-shell-border: rgba(122, 151, 190, 0.2);
  --wa-shell-divider: rgba(188, 205, 229, 0.12);
  --wa-shell-text: #edf3ff;
  --wa-shell-text-muted: #b3c2da;
  --wa-shell-text-soft: #8fa5c8;
  --wa-shell-badge-bg: rgba(120, 169, 255, 0.12);
  --wa-shell-badge-bg-hover: rgba(120, 169, 255, 0.2);
  --wa-shell-selected-bg: linear-gradient(180deg, #18283e 0%, #132235 100%);
  --wa-shell-selected-bg-hover: linear-gradient(180deg, #1b2f49 0%, #16304a 100%);
  --wa-shell-selected-border: rgba(120, 169, 255, 0.38);
  --wa-shell-selected-text: #f5f9ff;
  --wa-shell-selected-text-muted: #bfd1ea;
  --wa-shell-selected-badge-bg: rgba(120, 169, 255, 0.2);
  --wa-shell-accent: #78a9ff;
  --wa-shell-accent-soft: rgba(120, 169, 255, 0.16);
  --wa-shell-focus-ring: rgba(120, 169, 255, 0.34);
  --wa-shell-shadow: 0 20px 46px -28px rgba(2, 7, 15, 0.78);
  --wa-shell-hover-shadow: 0 18px 38px -24px rgba(2, 7, 15, 0.9);
}

h1, h2, h3 {
  color: var(--lumo-primary-text-color);
}

.wa-app-header {
  box-sizing: border-box;
  padding: 0.1rem 1rem;
  min-height: 0;
  width: 100%;
  align-self: stretch;
  border-bottom: 1px solid var(--wa-shell-divider);
  background: var(--wa-shell-header-bg);
  backdrop-filter: blur(12px);
}

/* Menu (hambúrguer) mais compacto, para abaixar a altura da navbar. */
.wa-app-header vaadin-drawer-toggle {
  width: 2rem;
  height: 2rem;
  min-height: 2rem;
}

/* Botão de voltar no navbar */
.wa-navbar-back-btn {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  padding: 0;
  color: var(--lumo-body-text-color);
  flex-shrink: 0;
}
.wa-navbar-back-btn::part(button) {
  padding: 0;
  border-radius: 50%;
  color: var(--lumo-body-text-color);
}
.wa-navbar-back-btn:hover::part(button) {
  background: rgba(20, 17, 10, 0.07);
}

/* Breadcrumb na navbar (ao lado do menu), no lugar do título "Chat".
   Estrutura: Workspaces / workspace / cliente / análise — igual ao topbar
   do mockup. Só aparece na tela de chat; demais telas mostram o título. */
.wa-app-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  overflow: hidden;
  font-size: 0.9rem;
  color: #14110a;
}

.wa-app-breadcrumb-item {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--lumo-secondary-text-color);
  font-weight: 400;
}

.wa-app-breadcrumb-sep {
  color: var(--lumo-tertiary-text-color);
  font-size: 0.8rem;
  flex-shrink: 0;
}

.wa-app-breadcrumb-link {
  color: var(--lumo-tertiary-text-color);
  cursor: pointer;
  flex-shrink: 0;
}

.wa-app-breadcrumb-link:hover {
  color: #14110a;
}

.wa-app-breadcrumb-current {
  color: #14110a;
  font-weight: 700;
  flex-shrink: 1;
}

.wa-drawer-shell {
  background: var(--wa-shell-bg);
  border-right: 1px solid var(--wa-shell-border);
  box-shadow: var(--wa-shell-shadow);
}

vaadin-app-layout::part(navbar) {
  background: var(--wa-shell-header-bg);
  border-bottom: 1px solid var(--wa-shell-divider);
  backdrop-filter: blur(12px);
}

vaadin-app-layout::part(drawer) {
  background: var(--wa-shell-bg);
  border-right: 1px solid var(--wa-shell-border);
}

vaadin-app-layout {
  --vaadin-app-layout-drawer-width: 320px;
}

.wa-tenant-chip {
  font-size: 0.8rem;
  color: var(--wa-shell-text-muted);
  padding: 0.15rem 0.5rem;
  border-radius: var(--lumo-border-radius-m);
  border: 1px solid var(--wa-shell-divider);
  background: var(--wa-shell-badge-bg);
}

.wa-drawer-brand {
  box-sizing: border-box;
  padding: 1.25rem 1.1rem 1rem;
  border-bottom: 1px solid var(--wa-shell-divider);
  background: var(--wa-shell-header-bg);
  justify-content: flex-start;
  cursor: pointer;
  transition: background-color 160ms ease, box-shadow 160ms ease;
}

.wa-drawer-brand:hover,
.wa-drawer-brand:focus {
  background: var(--wa-shell-surface);
  box-shadow: inset 0 0 0 1px var(--wa-shell-divider);
  outline: none;
}

.wa-drawer-brand-toggle {
  position: absolute;
  top: 0.35rem;
  right: 0.6rem;
  z-index: 2;
  width: 25px;
  height: 25px;
  min-width: 25px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wa-shell-text-soft, #8b816f);
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.15s ease, color 0.15s ease;
}

.wa-drawer-brand-toggle::part(button) {
  cursor: pointer;
  background: transparent;
  box-shadow: none;
}

.wa-drawer-brand-toggle:hover {
  background: var(--wa-shell-accent-soft, rgba(63, 111, 159, 0.14));
}

.wa-drawer-brand-toggle vaadin-icon {
  width: 19px;
  height: 19px;
}

.wa-drawer-brand-toggle::part(label) {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
}

.wa-drawer-brand-toggle:hover {
  color: var(--wa-shell-accent, #0c447c);
}

.wa-brand-version-tag {
  margin-left: auto;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a39b89;
  font-family: 'SF Mono', 'Monaco', 'Menlo', 'Consolas', monospace;
  white-space: nowrap;
  flex-shrink: 0;
}

.wa-brand-logo {
  display: block;
  width: min(100%, 7.5rem);
  height: auto;
}

.wa-brand-logo-dark {
  display: none;
}

html[theme~="dark"] .wa-brand-logo-light {
  display: none;
}

html[theme~="dark"] .wa-brand-logo-dark {
  display: block;
}

.wa-login-view {
  box-sizing: border-box;
  background:
    linear-gradient(135deg, rgba(7, 20, 34, 0.58), rgba(11, 35, 58, 0.38)),
    url("img/fundo_aegis.jpg") center center / cover no-repeat;
}

.wa-login-card {
  box-sizing: border-box;
  width: min(100%, 420px);
  padding: clamp(1.5rem, 4vw, 2rem);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--lumo-border-radius-l);
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 18px 45px rgba(6, 18, 32, 0.22);
  backdrop-filter: blur(10px);
}

.wa-login-brand {
  margin-bottom: 0.5rem;
}

.wa-login-version {
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.2);
}

html[theme~="dark"] .wa-login-view {
  background:
    linear-gradient(135deg, rgba(5, 12, 20, 0.76), rgba(10, 30, 48, 0.56)),
    url("img/fundo_aegis.jpg") center center / cover no-repeat;
}

html[theme~="dark"] .wa-login-card {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(18, 24, 38, 0.84);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
}

.wa-drawer-body {
  box-sizing: border-box;
  gap: 1.1rem;
  padding: 0.95rem 0.8rem 1rem;
}

.wa-section-title {
  padding: 0;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--wa-shell-text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wa-primary-nav-slot {
  gap: 1rem;
}

.wa-nav-section {
  gap: 0.55rem;
}

.wa-nav-section-title {
  padding: 0 0.3rem;
}

.wa-nav-list {
  gap: 0.45rem;
}

.wa-nav-item {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0.7rem 0.7rem;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.7rem;
  border-radius: 0.95rem;
  cursor: pointer;
  color: var(--wa-shell-text);
  border: 1px solid var(--wa-shell-divider);
  background: var(--wa-shell-surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.wa-nav-item:hover,
.wa-nav-item:focus {
  background: var(--wa-shell-surface-hover);
  border-color: var(--wa-shell-border);
  box-shadow: 0 0 0 1px var(--wa-shell-focus-ring), var(--wa-shell-hover-shadow);
  transform: translateY(-1px);
  outline: none;
}

.wa-nav-item:hover .wa-nav-item-title,
.wa-nav-item:focus .wa-nav-item-title,
.wa-nav-item:hover .wa-nav-item-subtitle,
.wa-nav-item:focus .wa-nav-item-subtitle,
.wa-nav-item:hover .wa-nav-item-meta,
.wa-nav-item:focus .wa-nav-item-meta,
.wa-nav-item:hover .wa-nav-item-index,
.wa-nav-item:focus .wa-nav-item-index {
  color: var(--wa-shell-text);
}

.wa-nav-item:hover .wa-nav-item-index,
.wa-nav-item:focus .wa-nav-item-index {
  background: var(--wa-shell-badge-bg-hover);
}

.wa-nav-item:hover .wa-nav-item-meta,
.wa-nav-item:focus .wa-nav-item-meta {
  background: var(--wa-shell-badge-bg-hover);
}

.wa-nav-item-selected {
  background: var(--wa-shell-selected-bg);
  border-color: var(--wa-shell-selected-border);
  color: var(--wa-shell-selected-text);
  box-shadow:
    0 0 0 1px var(--wa-shell-selected-border),
    0 10px 18px -10px rgba(10, 8, 5, 0.55),
    0 2px 4px rgba(10, 8, 5, 0.3);
  transform: translateY(-1px);
}

.wa-nav-item-selected:hover,
.wa-nav-item-selected:focus {
  background: var(--wa-shell-selected-bg-hover);
  border-color: var(--wa-shell-selected-border);
  color: var(--wa-shell-selected-text);
  box-shadow:
    0 0 0 1px var(--wa-shell-selected-border),
    0 12px 20px -10px rgba(10, 8, 5, 0.6),
    0 2px 4px rgba(10, 8, 5, 0.32);
  transform: translateY(-1px);
}

.wa-nav-item-selected:hover .wa-nav-item-title,
.wa-nav-item-selected:focus .wa-nav-item-title,
.wa-nav-item-selected:hover .wa-nav-item-subtitle,
.wa-nav-item-selected:focus .wa-nav-item-subtitle,
.wa-nav-item-selected:hover .wa-nav-item-meta,
.wa-nav-item-selected:focus .wa-nav-item-meta,
.wa-nav-item-selected:hover .wa-nav-item-index,
.wa-nav-item-selected:focus .wa-nav-item-index {
  color: var(--wa-shell-selected-text);
}

.wa-nav-item-selected:hover .wa-nav-item-index,
.wa-nav-item-selected:focus .wa-nav-item-index,
.wa-nav-item-selected:hover .wa-nav-item-meta,
.wa-nav-item-selected:focus .wa-nav-item-meta {
  background: var(--wa-shell-selected-badge-bg);
}

.wa-nav-item-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.35rem;
  border-radius: 0.55rem;
  background: var(--wa-workspace-badge-bg, var(--wa-shell-badge-bg));
  color: var(--wa-workspace-badge-color, var(--wa-shell-text-muted));
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  flex: 0 0 auto;
  box-shadow: 0 1px 2px rgba(20, 17, 10, 0.06);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.wa-nav-item-selected .wa-nav-item-index {
  background: var(--wa-shell-selected-badge-bg);
  color: var(--wa-shell-selected-text);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 1px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 247, 234, 0.22),
    0 5px 12px -3px rgba(0, 0, 0, 0.6);
  transform: scale(1.08);
}

.wa-nav-item-icon-svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.wa-nav-item-content {
  min-width: 0;
  gap: 0.12rem;
  align-items: stretch;
}

.wa-nav-item-title {
  color: inherit;
  font-size: 0.98rem;
  font-weight: 400;
  line-height: 1.2;
}

.wa-nav-item-selected .wa-nav-item-title {
  font-weight: 700;
  letter-spacing: 0.01em;
}

.wa-nav-item-subtitle {
  color: var(--wa-shell-text-muted);
  font-size: 0.78rem;
  line-height: 1.3;
  white-space: normal;
}

.wa-nav-item-selected .wa-nav-item-subtitle {
  color: var(--wa-shell-selected-text-muted);
}

.wa-nav-item-meta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-top: 0.05rem;
  padding: 0.14rem 0.38rem;
  border-radius: 0.35rem;
  background: var(--wa-shell-badge-bg);
  color: var(--wa-shell-text-soft);
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  flex: 0 0 auto;
}

.wa-nav-item-selected .wa-nav-item-meta {
  background: var(--wa-shell-selected-badge-bg);
  color: var(--wa-shell-selected-text);
}

.wa-drawer-nav {
  padding-top: 0;
}

.wa-drawer-nav vaadin-side-nav-item::part(link) {
  border-radius: var(--lumo-border-radius-m);
}

.wa-drawer-nav vaadin-side-nav-item[current]::part(link) {
  background: var(--lumo-primary-color-10pct);
  font-weight: 600;
}

.wa-workspace-nav {
  box-sizing: border-box;
  gap: var(--lumo-space-xs);
}

.wa-workspace-nav-slot {
  box-sizing: border-box;
}

.wa-workspace-row {
  box-sizing: border-box;
  gap: 1.1rem;
  padding: 0;
}

.wa-drawer-nav-divider {
  width: 100%;
  height: 1px;
  margin: 0;
  border: none;
  background: var(--wa-shell-divider);
  opacity: 0.6;
}

/* Permite quebras de linha (\n) nos tooltips de custo/tokens do cabeçalho do chat. */
vaadin-tooltip-overlay::part(overlay) {
  white-space: pre-line;
}

.wa-workspace-row-title {
  white-space: normal;
}

.wa-workspace-row-items {
  box-sizing: border-box;
  gap: 0.45rem;
  align-items: stretch;
  padding: 0;
}

vaadin-button.wa-workspace-chip::part(button) {
  border-radius: 999px;
  padding: 0.25rem 0.5rem;
}

vaadin-button.wa-workspace-chip-selected::part(button) {
  background: var(--lumo-primary-color-10pct);
  font-weight: 600;
}

.wa-workspace-empty {
  padding: 0.35rem 0.3rem;
  font-size: 0.85rem;
  color: var(--wa-shell-text-muted);
}

.wa-workspace-shortcut {
  align-items: flex-start;
}

.wa-workspace-shortcut-icon {
  color: #6d6558;
  flex: 0 0 auto;
}

.wa-workspace-shortcut-label {
  min-width: 0;
  flex: 1 1 auto;
  text-align: left;
}

.wa-workspace-shortcut-selected {
  font-weight: 600;
}

.wa-workspace-shortcut-selected .wa-workspace-shortcut-icon {
  color: #fff7ea;
}

.wa-chat-history {
  box-sizing: border-box;
  background: var(--lumo-contrast-5pct);
  border: 1px solid var(--lumo-contrast-10pct);
  border-radius: var(--lumo-border-radius-m);
  box-shadow: var(--lumo-box-shadow-xs);
}

.wa-chat-history-items {
  gap: var(--lumo-space-xs);
}

.wa-chat-history-item::part(button) {
  justify-content: flex-start;
  background: transparent;
  border-radius: var(--lumo-border-radius-m);
  transition: background-color 120ms ease, box-shadow 120ms ease;
}

.wa-chat-history-item:hover::part(button),
.wa-chat-history-item:focus-visible::part(button) {
  background: var(--lumo-contrast-10pct);
  box-shadow: inset 0 0 0 1px var(--lumo-contrast-20pct);
}

.wa-chat-select::part(input-field) {
  min-height: 3rem;
}

.wa-chat-toolbar {
  align-items: center;
  min-height: 4.2rem;
  overflow: visible;
  /* Barra fixa no topo, ocupando 100% da largura (topbar do mockup) */
  position: sticky;
  top: 0;
  z-index: 20;
  width: 100%;
  box-sizing: border-box;
  /* Fundo branco do mockup (bg-card), sobrepondo o estilo inline para garantir
     o contraste com a área de conversa bege */
  background: var(--wa-card-bg, #ffffff) !important;
  border-bottom: 0.5px solid var(--wa-card-border, rgba(20, 17, 10, 0.12));
}

/* Cabeçalho rico do chat (igual ao .chat-header do mockup): colado imediatamente
   acima da .wa-chat-toolbar, ocupando 100% do container. Escopado apenas a
   .wa-chat-view para não afetar nenhuma outra tela. */
/* ============== HEADER RICO (VERTICAL STRUCTURE) ============== */
.wa-chat-view .wa-chat-rich-header {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  background: var(--wa-card-bg, #ffffff);
  position: sticky;
  top: 0;
  z-index: 21;
}

/* Wrapper vertical que contém: header compacto + pipeline-bar + live-block */
.wa-chat-view .wa-chat-rich-header-vertical {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
}

/* Header compacto: container vertical que agrupa a linha topo + barra de steps */
.wa-chat-view .wa-chat-rich-header-compact {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  background: var(--wa-card-bg, #ffffff);
  border-bottom: 0.5px solid var(--wa-card-border, rgba(20, 17, 10, 0.12));
}

/* Linha de topo do compacto: ícone + info + ações */
.wa-chat-view .wa-chat-rich-header-compact-top {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
  padding: 14px 1.25rem;
}

.wa-chat-view .wa-chat-rich-header-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #e1f5ee;
  color: #0f6e56;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wa-chat-view .wa-chat-rich-header-icon vaadin-icon {
  width: 20px;
  height: 20px;
}

.wa-chat-view .wa-chat-rich-header-info {
  flex: 1 1 auto;
  min-width: 0;
  gap: 4px;
}

.wa-chat-view .wa-chat-rich-header-nome-row {
  align-items: center;
}

.wa-chat-view .wa-chat-rich-header-nome {
  font-family: var(--wa-serif);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: #14110a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wa-chat-view .wa-chat-rich-header-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 3px;
  text-transform: uppercase;
}

.wa-chat-view .wa-chat-rich-header-status::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.wa-chat-view .wa-chat-rich-header-status-success {
  background: #e1f5ee;
  color: #0f6e56;
}

.wa-chat-view .wa-chat-rich-header-status-running {
  background: var(--lumo-primary-color-10pct);
  color: var(--lumo-primary-text-color);
}

.wa-chat-view .wa-chat-rich-header-status-error {
  background: var(--lumo-error-color-10pct);
  color: var(--lumo-error-text-color);
}

.wa-chat-view .wa-chat-rich-header-status-neutral {
  background: var(--lumo-contrast-10pct);
  color: var(--lumo-secondary-text-color);
}

.wa-chat-view .wa-chat-rich-header-meta {
  font-size: 12px;
  color: var(--lumo-secondary-text-color);
}

.wa-chat-view .wa-chat-rich-header-meta-item:empty {
  display: none;
}

/* Pills de tokens/custo no cabeçalho do chat: ícone + texto com hover discreto. */
.wa-chat-view .wa-chat-rich-header-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  border-radius: 0.4rem;
  padding: 0.1rem 0.3rem;
  transition: background 0.15s ease, color 0.15s ease;
}

.wa-chat-view .wa-chat-rich-header-meta-icon {
  width: 13px;
  height: 13px;
  color: var(--lumo-secondary-text-color);
  transition: color 0.15s ease;
}

.wa-chat-view .wa-chat-rich-header-meta-text {
  transition: font-weight 0.1s ease;
}

.wa-chat-view .wa-chat-rich-header-meta-pill:hover {
  background: var(--wa-shell-accent-soft, rgba(63, 111, 159, 0.14));
}

.wa-chat-view .wa-chat-rich-header-meta-pill:hover .wa-chat-rich-header-meta-icon {
  color: var(--wa-shell-accent, #0c447c);
}

.wa-chat-view .wa-chat-rich-header-meta-pill:hover .wa-chat-rich-header-meta-text {
  font-weight: 700;
  color: var(--wa-shell-accent, #0c447c);
}

/* Popover de detalhamento de tokens/custo — fundo bege do app, pills coloridas. */
.wa-chat-cost-popover::part(overlay),
vaadin-popover-overlay::part(overlay) {
  background: var(--wa-shell-navbar-gap-bg, #f8f3eb);
  border: 1px solid var(--wa-shell-border, #e8dfcf);
  border-radius: 0.6rem;
  box-shadow: var(--wa-shell-shadow, 0 18px 40px -28px rgba(20, 17, 10, 0.34));
  max-width: 260px;
  width: max-content;
}

.wa-chat-meta-popover {
  width: 230px;
  max-width: 230px;
  padding: 0.85rem 1rem;
  gap: 0.5rem;
  color: var(--wa-shell-text, #201a11);
  box-sizing: border-box;
}

.wa-chat-meta-popover-titulo {
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 0.35rem;
}

.wa-chat-meta-popover-titulo-icone {
  width: 15px;
  height: 15px;
  color: var(--wa-shell-accent, #0c447c);
}

.wa-chat-meta-popover-linha {
  padding: 0.15rem 0;
}

.wa-chat-meta-popover-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 0.4rem;
  padding: 0.12rem 0.5rem;
  font-size: 0.76rem;
  font-weight: 600;
}

.wa-chat-meta-popover-pill-entrada {
  background: #e6f1fb;
  color: #0c447c;
}

.wa-chat-meta-popover-pill-saida {
  background: #faeeda;
  color: #854f0b;
}

.wa-chat-meta-popover-pill-estimado {
  background: rgba(109, 101, 88, 0.12);
  color: var(--wa-shell-text-muted, #6d6558);
}

.wa-chat-meta-popover-valor {
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--wa-shell-text, #201a11);
}

.wa-chat-meta-popover-divisor {
  width: 100%;
  height: 1px;
  margin: 0.4rem 0;
  border: none;
  background: var(--wa-shell-divider, rgba(32, 26, 17, 0.14));
}

.wa-chat-meta-popover-total-rotulo {
  font-weight: 700;
  font-size: 0.85rem;
}

.wa-chat-meta-popover-total-valor {
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--wa-shell-accent, #0c447c);
}

.wa-chat-meta-popover-nota {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.68rem;
  line-height: 1.35;
  color: var(--wa-shell-text-muted, #6d6558);
  font-style: italic;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
}

.wa-chat-view .wa-chat-rich-header-actions {
  flex-shrink: 0;
}

.wa-chat-view .wa-chat-rich-header-btn::part(button) {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--wa-card-border, rgba(20, 17, 10, 0.12));
  color: var(--lumo-secondary-text-color);
  font-weight: 500;
}

.wa-chat-view .wa-chat-rich-header-btn:hover::part(button) {
  background: var(--lumo-contrast-5pct);
  color: var(--lumo-body-text-color);
}

/* Botões "•••" e colapsar: ícone PRETO e pequeno, sem caixa/borda — discretos
   como o chevron do mockup. Fundo transparente; leve contraste só no hover.
   O `color` aqui é o que pinta o ícone de preto (a vaadin-icon usa currentColor). */
.wa-chat-view .wa-chat-rich-header-btn-icon,
.wa-chat-view .wa-chat-rich-header-btn-icon::part(button) {
  cursor: pointer;
}

.wa-chat-view .wa-chat-rich-header-btn-icon::part(button) {
  background: transparent;
  box-shadow: none;
  color: #14110a;
  padding: 4px;
  border-radius: 4px;
}

/* Sem fundo em nenhum estado (rest/hover/focus/active). O feedback de clicável
   é só o cursor de mãozinha; no hover o ícone escurece levemente. */
.wa-chat-view .wa-chat-rich-header-btn-icon:hover::part(button),
.wa-chat-view .wa-chat-rich-header-btn-icon:focus::part(button),
.wa-chat-view .wa-chat-rich-header-btn-icon:active::part(button) {
  background: transparent;
  box-shadow: none;
  color: #000000;
}

.wa-chat-view .wa-chat-rich-header-btn-icon vaadin-icon {
  width: 16px;
  height: 16px;
  color: #14110a;
  fill: #14110a;
}

/* Itens do menu "•••" do cabeçalho rico do chat: cursor de mãozinha (deixa claro
   que é clicável) e o ícone muda de cor no hover/foco, igual ao restante do app. */
vaadin-context-menu-item:has(.wa-chat-rich-header-menu-item) {
  cursor: pointer;
}

vaadin-context-menu-item:hover .wa-chat-rich-header-menu-icon,
vaadin-context-menu-item:focus .wa-chat-rich-header-menu-icon {
  color: var(--lumo-primary-text-color) !important;
}


/* ============== HEADER AREA CONTAINER ============== */
.wa-chat-view .wa-chat-header-area {
  flex-shrink: 0;
  background: var(--wa-card-bg, #ffffff);
}

/* Quando .wa-collapsed está ativo, esconde header expandido e pipeline-bar */
.wa-chat-view .wa-chat-header-area.wa-collapsed .wa-chat-header,
.wa-chat-view .wa-chat-header-area.wa-collapsed .wa-chat-pipeline-bar {
  display: none;
}

/* Quando .wa-collapsed está ativo, mostra a barra fina */
.wa-chat-view .wa-chat-header-area.wa-collapsed .wa-chat-header-bar {
  display: flex;
}

/* ============== BARRA COLAPSADA (chat-header-bar) ============== */
.wa-chat-view .wa-chat-header-bar {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: var(--wa-card-bg, #ffffff);
  border-bottom: 0.5px solid var(--wa-card-border, rgba(20, 17, 10, 0.12));
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.15s;
}

.wa-chat-view .wa-chat-header-bar:hover {
  background: var(--wa-bg-soft, #f5f1e5);
}

.wa-chat-view .wa-chat-header-bar-icon {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: var(--wa-success-bg, #e1f5ee);
  color: var(--wa-success, #0f6e56);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  flex-shrink: 0;
}

.wa-chat-view .wa-chat-header-bar-icon vaadin-icon {
  width: 13px;
  height: 13px;
}

.wa-chat-view .wa-chat-header-bar-name {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--wa-shell-text, #201a11);
}

.wa-chat-view .wa-chat-header-bar-meta {
  font-size: 11.5px;
  color: var(--wa-shell-text-soft, #8b816f);
  flex: 1;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.wa-chat-view .wa-chat-header-bar-meta span {
  display: flex;
  align-items: center;
}

.wa-chat-view .wa-chat-header-bar-chevron {
  color: var(--wa-shell-text-soft, #8b816f);
  font-size: 14px;
  flex-shrink: 0;
  transition: transform 0.15s;
}

/* Status pill da barra recolhida (running/success) */
.wa-chat-view .wa-status-pill {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 3px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--wa-bg-soft, #f5f1e5);
  color: var(--wa-shell-text-soft, #6b6557);
  flex-shrink: 0;
}

.wa-chat-view .wa-status-pill-running {
  background: var(--wa-info-bg, #e6f1fb);
  color: var(--wa-shell-accent, #0c447c);
}

.wa-chat-view .wa-status-pill-success {
  background: var(--wa-success-bg, #e1f5ee);
  color: var(--wa-success, #0f6e56);
}

.wa-chat-view .wa-status-pill-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.wa-chat-view .wa-status-pill-running .wa-status-pill-dot {
  animation: wa-pulse-dot 1.4s ease-in-out infinite;
}

/* Mini-steps na barra recolhida */
.wa-chat-view .wa-chat-header-bar-progress {
  display: flex;
  gap: 2px;
  align-items: center;
}

.wa-chat-view .wa-mini-step {
  width: 14px;
  height: 4px;
  border-radius: 99px;
  background: var(--wa-bg-sunken, #f0ece1);
}

.wa-chat-view .wa-mini-step.wa-done {
  background: var(--wa-success, #0f6e56);
}

.wa-chat-view .wa-mini-step.wa-running {
  background: var(--wa-shell-accent, #0c447c);
  animation: wa-pulse-dot 1.4s ease-in-out infinite;
}

@keyframes wa-pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.wa-chat-toolbar .wa-chat-projeto {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(60vw, 52rem);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.wa-chat-toolbar .wa-chat-toolbar-actions {
  margin-left: 0;
  z-index: 1;
}

.wa-chat-toolbar vaadin-combo-box.wa-chat-select {
  flex: 1 1 12rem;
}

.wa-chat-contexto-processual {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--lumo-space-xs);
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--lumo-contrast-10pct);
  border-radius: var(--lumo-border-radius-m);
  background: var(--lumo-base-color);
  box-shadow: var(--lumo-box-shadow-xs);
}

.wa-chat-contexto-processual-linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.5rem 0.8rem;
  align-items: center;
}

.wa-chat-contexto-processual-campo {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}

.wa-chat-contexto-processual-rotulo {
  font-size: var(--lumo-font-size-xs);
  font-weight: 700;
  color: var(--lumo-secondary-text-color);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.wa-chat-contexto-processual-valor {
  min-width: 0;
  font-size: var(--lumo-font-size-s);
  font-weight: 600;
  color: var(--lumo-body-text-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wa-chat-plus-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wa-chat-plus-menu::part(menu-bar-button) {
  min-width: 2.9rem;
  width: 2.9rem;
  height: 2.9rem;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--lumo-contrast-20pct);
  background: var(--lumo-primary-color-10pct);
  color: var(--lumo-primary-color);
  transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.wa-chat-plus-menu::part(menu-bar-button):hover,
.wa-chat-plus-menu::part(menu-bar-button):focus-visible {
  background: var(--lumo-primary-color-20pct);
  color: var(--lumo-primary-text-color);
  box-shadow: inset 0 0 0 1px var(--lumo-primary-color-30pct);
}

.wa-chat-plus-menu vaadin-icon {
  width: 1.35rem;
  height: 1.35rem;
}

vaadin-combo-box-overlay::part(content) {
  max-height: 70vh;
  font-size: var(--lumo-font-size-m);
}

vaadin-combo-box-overlay vaadin-combo-box-item {
  min-height: 2.6rem;
}

.wa-chat-view {
  /* Texto do chat: 19.2px (16px + 20%, ajuste de produto). */
  --wa-chat-text-size: 1.2rem;
  --wa-chat-meta-size: 0.76rem;
  --wa-chat-line-height: 1.64;
  --wa-chat-assistant-bg: #f1ede4;
  --wa-chat-assistant-border: #d8d1c4;
  /* Fundo da área de conversa = bg-page do mockup (bege claro), não branco */
  --wa-chat-canvas-bg: #faf8f2;

  /* === Paleta do mockup (fonte única de estilo dos blocos de step) === */
  --wa-card-bg: #ffffff;            /* fundo branco do card (run-block) */
  --wa-soft-bg: #f5f1e5;            /* container marrom claro (faixa/header e dados) */
  --wa-card-border: rgba(20, 17, 10, 0.12);
  --wa-card-border-soft: rgba(20, 17, 10, 0.07);
  --wa-ink: #14110a;               /* texto/título escuro */
  --wa-ink-faint: #a39b89;         /* meta esmaecida */
  --wa-serif: "Spectral", Georgia, "Times New Roman", serif;

  /* Fundo da TELA inteira do chat = bg-page marrom do mockup (body).
     Sem isto, o padding da raiz deixa o branco do AppLayout vazar como uma
     moldura branca em volta da conversa. Header/composer/cards pintam o
     branco por cima; o resto fica marrom, exatamente como o mockup. */
  background: var(--wa-chat-canvas-bg, #faf8f2);
}

/* ============================================================
   Spectral — fine-tuning para aproximar da Tiempos Text
   ============================================================ */
[style*="Spectral"],
.wa-serif,
*[class*="wa-"] {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Aplica tweaks em todos os elementos que usam a font-family Spectral via variável */
*:where([style*="font-family"], h1, h2, h3, h4, h5, h6) {
  font-optical-sizing: auto;
}

/* Bloco base de ajuste fino da Spectral quando usada como serif do sistema */
:where(
  .wa-modal-novo-chat-title,
  .wa-modal-novo-chat-card-nome,
  .wa-modal-step-num,
  [class*="wa-"][class*="title"],
  [class*="wa-"][class*="nome"],
  [class*="wa-"][class*="header"]
) {
  font-family: var(--wa-serif);
  letter-spacing: -0.015em;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
}

html[theme~="dark"] .wa-chat-view {
  /* Escurece o balão no tema escuro sem perder a paleta azul */
  --wa-chat-assistant-bg: rgba(22, 33, 46, 0.82);
  --wa-chat-assistant-border: rgba(120, 169, 255, 0.32);
  --wa-chat-canvas-bg: var(--lumo-base-color);

  /* Equivalentes escuros para os blocos de step */
  --wa-card-bg: var(--lumo-base-color);
  --wa-soft-bg: rgba(255, 255, 255, 0.05);
  --wa-card-border: var(--lumo-contrast-20pct);
  --wa-card-border-soft: var(--lumo-contrast-10pct);
  --wa-ink: var(--lumo-header-text-color);
  --wa-ink-faint: var(--lumo-tertiary-text-color);
}

/* Fundo da área de conversa (scroller) = bg-page bege do mockup.
   Aplicado via CSS para não depender de estilo inline do Java.
   Sem borda/cantos aqui: o fundo é único e contínuo (igual ao mockup);
   só os blocos de step (run-block) têm card branco com cantos arredondados. */
.wa-chat-view vaadin-scroller,
.wa-chat-view vaadin-scroller::part(content) {
  background: var(--wa-chat-canvas-bg, #faf8f2) !important;
}

.wa-chat-view vaadin-scroller::part(content) {
  padding: 0 32px;
}

.wa-chat-view .wa-chat-msg-row {
  column-gap: var(--lumo-space-s);
  padding: 0 16px;
  box-sizing: border-box;
}

.wa-chat-view .wa-chat-msg-bubble {
  font-family: "Spectral", Georgia, "Times New Roman", serif;
  row-gap: 0.25rem;
}

.wa-chat-view .wa-chat-msg-bubble-assistant {
  background: var(--wa-chat-assistant-bg) !important;
  border-color: var(--wa-chat-assistant-border) !important;
}

/* =====================================================================
   MENSAGEM "CRUA" DO USUÁRIO (pergunta digitada no chat)
   Balão compacto à direita, sem avatar, sem nome/agente/modelo no
   cabeçalho — só o texto e a hora de envio. Igual ao .user-msg do mockup.
   ===================================================================== */
.wa-chat-view .wa-chat-msg-bubble-user-simple {
  background: var(--wa-soft-bg, #f5f1e5) !important;
  border: none !important;
  border-radius: 14px 14px 4px 14px !important;
  padding: 0.7rem 1rem !important;
}

.wa-chat-view .wa-chat-msg-bubble-user-simple .wa-chat-msg-text,
.wa-chat-view .wa-chat-msg-bubble-user-simple vaadin-markdown.wa-chat-markdown {
  font-family: "Spectral", Georgia, "Times New Roman", serif;
  font-size: var(--wa-chat-text-size); /* 19.2px */
  line-height: 1.5;
  color: var(--wa-ink);
}

.wa-chat-view .wa-chat-msg-header-user-simple {
  margin-top: 0.25rem;
  margin-bottom: 0;
}

.wa-chat-view .wa-chat-msg-header-user-simple .wa-chat-msg-timestamp {
  font-size: 0.68rem;
  font-family: "SF Mono", "Monaco", "Menlo", Consolas, monospace;
  color: var(--wa-ink-faint);
}

/* =====================================================================
   RESPOSTA LIVRE DO ASSISTENTE (fora de um step)
   Card branco (igual ao .assistant-msg do mockup) em vez do tom
   bege/verde antigo, com cabeçalho mostrando o nome do agente e o
   modelo que respondeu (pill colorida), para deixar claro quem e o quê
   gerou a resposta.
   ===================================================================== */
.wa-chat-view .wa-chat-msg-bubble-assistant-free {
  background: var(--wa-card-bg, #ffffff) !important;
  border: 0.5px solid var(--wa-card-border, rgba(20, 17, 10, 0.12)) !important;
  border-radius: 14px 14px 14px 4px !important;
  padding: 0.85rem 1.1rem !important;
}

.wa-chat-view .wa-chat-msg-header-assistant-free {
  margin-bottom: 0.5rem;
  column-gap: 0.5rem;
}

.wa-chat-view .wa-chat-msg-author-free-icon {
  width: 0.85rem;
  height: 0.85rem;
  color: #0f6e56;
  flex-shrink: 0;
}

.wa-chat-view .wa-chat-msg-author-free {
  font-family: var(--wa-serif);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.003em;
  color: var(--wa-ink);
}

.wa-chat-view .wa-chat-msg-model-pill {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
}

.wa-chat-view .wa-chat-msg-model-pill-success { background: #e1f5ee; color: #0f6e56; }
.wa-chat-view .wa-chat-msg-model-pill-info { background: #e6f1fb; color: #0c447c; }
.wa-chat-view .wa-chat-msg-model-pill-warn { background: #faeeda; color: #854f0b; }
.wa-chat-view .wa-chat-msg-model-pill-brand { background: #ede9f7; color: #241854; }

html[theme~="dark"] .wa-chat-view .wa-chat-msg-model-pill-success { background: rgba(15, 110, 86, 0.22); color: #6fd9b8; }
html[theme~="dark"] .wa-chat-view .wa-chat-msg-model-pill-info { background: rgba(12, 68, 124, 0.28); color: #8fc3f0; }
html[theme~="dark"] .wa-chat-view .wa-chat-msg-model-pill-warn { background: rgba(133, 79, 11, 0.28); color: #f0c98a; }
html[theme~="dark"] .wa-chat-view .wa-chat-msg-model-pill-brand { background: rgba(36, 24, 84, 0.32); color: #c2b6f0; }

.wa-chat-view .wa-chat-msg-header {
  margin-bottom: 0.3rem;
  row-gap: 0.2rem;
  column-gap: 0.45rem;
  flex-wrap: wrap;
}

.wa-chat-view .wa-chat-msg-author {
  font-size: var(--wa-chat-meta-size);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--lumo-header-text-color);
}

.wa-chat-view .wa-chat-msg-timestamp,
.wa-chat-view .wa-chat-msg-meta {
  font-size: var(--wa-chat-meta-size);
  line-height: 1.35;
  color: var(--lumo-secondary-text-color);
}

.wa-chat-view .wa-chat-msg-meta {
  font-weight: 500;
}

.wa-chat-view .wa-chat-msg-step-badge {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--lumo-secondary-text-color);
  background: var(--lumo-contrast-5pct);
  border: 1px solid var(--lumo-contrast-20pct);
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
}

.wa-chat-view .wa-chat-msg-text {
  font-size: var(--wa-chat-text-size);
  line-height: var(--wa-chat-line-height);
  color: var(--lumo-tertiary-text-color);
}

.wa-chat-view .wa-chat-msg-file-title-row {
  gap: var(--lumo-space-xs);
}

.wa-chat-view .wa-chat-msg-file-content {
  row-gap: 0.2rem;
}

.wa-chat-view .wa-chat-msg-file-title {
  font-size: var(--wa-chat-text-size);
  font-weight: 600;
  color: var(--lumo-header-text-color);
}

.wa-chat-view .wa-chat-msg-file-description {
  font-size: var(--wa-chat-meta-size);
  line-height: 1.45;
  color: var(--lumo-secondary-text-color);
}

.wa-chat-view .wa-chat-msg-rag-status {
  font-size: var(--wa-chat-meta-size);
  line-height: 1.45;
  color: var(--lumo-secondary-text-color);
}

.wa-chat-view .wa-chat-msg-empty {
  color: var(--lumo-secondary-text-color);
  font-size: var(--wa-chat-text-size);
  line-height: var(--wa-chat-line-height);
}

.wa-chat-view .wa-chat-input-status-row {
  min-height: 1.4rem;
  margin-top: 0.25rem;
  font-size: var(--lumo-font-size-s);
}

.wa-chat-view .wa-chat-input-status {
  color: var(--lumo-error-color);
  font-weight: 600;
}

html[theme~="dark"] .wa-chat-input-status {
  color: var(--lumo-error-color);
}

/* Composer (área de digitação) — caixa arredondada com botão de enviar
   circular, seguindo o padrão do mockup .composer-box. */
.wa-chat-view .wa-chat-composer-box {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  background: transparent;
  border: 0.5px solid var(--wa-card-border, var(--lumo-contrast-20pct));
  border-radius: 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.wa-chat-view .wa-chat-composer-box:focus-within {
  border-color: var(--lumo-primary-color);
  box-shadow: 0 0 0 3px var(--lumo-primary-color-10pct);
}

.wa-chat-view .wa-chat-composer-input,
.wa-chat-view .wa-chat-composer-input::part(input-field) {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0;
}

/* Altura do campo igual ao mockup (.composer-input min-height 22px): reduz o
   tamanho-base do text-field do Lumo (que por padrão é ~36px) e a min-height
   do input-field, para a caixa não ficar alta. */
.wa-chat-view .wa-chat-composer-input {
  --lumo-text-field-size: 1.75rem;
}

.wa-chat-view .wa-chat-composer-input::part(input-field) {
  padding: 2px 0;
  min-height: 1.5rem;
}

.wa-chat-view .wa-chat-composer-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.wa-chat-view .wa-chat-composer-meta-toggle {
  flex-shrink: 0;
  width: 25px;
  height: 25px;
  min-width: 25px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: var(--wa-shell-text-soft, #8b816f);
}

.wa-chat-view .wa-chat-composer-meta-toggle vaadin-icon,
.wa-chat-view .wa-chat-composer-meta-toggle iron-icon {
  width: 15px;
  height: 15px;
}

.wa-chat-view .wa-chat-composer-meta-toggle::part(button) {
  background: transparent;
  box-shadow: none;
  border: none;
  padding: 0;
  min-width: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wa-chat-view .wa-chat-composer-meta-toggle:hover {
  color: var(--wa-shell-accent, #0c447c);
}

/* Some junto com o resto do composer enquanto o pipeline está rodando —
   não há nada pra alternar nesse momento. */
.wa-chat-view .wa-chat-composer.wa-pipeline-running .wa-chat-composer-meta-toggle {
  display: none;
}

.wa-chat-view .wa-chat-composer-send-btn {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 6px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wa-soft-bg, #f5f1e5) !important;
  color: var(--wa-ink-faint, #a39b89) !important;
  transition: background-color 0.15s, color 0.15s;
}

.wa-chat-view .wa-chat-composer-send-btn.wa-chat-composer-send-btn-active {
  background: #1f3a5f !important;
  color: #ffffff !important;
}

.wa-chat-view .wa-chat-composer-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 100%;
  width: 100%;
  margin: 8px auto 0;
  box-sizing: border-box;
}

/* Grupo da esquerda da meta: pill do modelo + dica de atalhos (igual ao
   .composer-meta-left do mockup). */
.wa-chat-view .wa-chat-composer-meta-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.wa-chat-view .wa-chat-composer-model-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  background: var(--wa-soft-bg, #f5f1e5);
  border-radius: 3px;
  font-size: 10px;
  font-weight: 500;
  color: var(--lumo-secondary-text-color);
  white-space: nowrap;
}

.wa-chat-view .wa-chat-composer-hint {
  font-size: 10.5px;
  color: var(--wa-ink-faint, var(--lumo-tertiary-text-color));
  white-space: nowrap;
}

/* Status do composer: oculto por padrão, visível apenas durante pipeline */
.wa-chat-view .wa-composer-status {
  display: none;
}

/* Composer desabilitado durante pipeline rodando */
.wa-chat-view .wa-chat-composer.wa-pipeline-running {
  background: #e6f1fb;
  padding: 12px 32px !important;
}

.wa-chat-view .wa-chat-composer.wa-pipeline-running .wa-chat-composer-box,
.wa-chat-view .wa-chat-composer.wa-pipeline-running .wa-chat-composer-meta {
  display: none;
}

.wa-chat-view .wa-chat-composer.wa-pipeline-running .wa-composer-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #e6f1fb;
  color: #0c447c;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 500;
}

.wa-chat-view .wa-composer-status-spinner {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: wa-spin 0.7s linear infinite;
}

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

/* Contador de caracteres à direita. */
.wa-chat-view .wa-chat-input-token-estimate {
  flex-shrink: 0;
  font-size: 10.5px;
  color: var(--wa-ink-faint, var(--lumo-tertiary-text-color));
  white-space: nowrap;
}

.wa-chat-view vaadin-markdown.wa-chat-markdown {
  display: block;
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: "Spectral", Georgia, "Times New Roman", serif;
  line-height: var(--wa-chat-line-height);
  font-size: var(--wa-chat-text-size);
  color: var(--lumo-body-text-color);
  letter-spacing: 0.003em;
}

/* Documento HTML completo (relatório executivo do renderizador LLM):
   renderizado isolado em iframe srcdoc para o <style> do documento não
   vazar no tema do chat. A altura é auto-ajustada via JS no componente. */
.wa-chat-view .wa-chat-html-doc {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--lumo-border-radius-m);
  background: #ffffff;
  border: 1px solid var(--lumo-contrast-10pct);
}

.wa-chat-view .wa-chat-html-doc iframe {
  display: block;
  width: 100%;
  border: none;
  min-height: 320px;
  background: #ffffff;
}

/* Fragmento HTML do design system Ray (<div class="shell">): renderizado
   inline via com.vaadin.flow.component.Html, estilizado pelo CSS global
   ray-design-tokens.css (escopado sob .shell). O container garante fundo
   claro consistente (inclusive no tema escuro) e contenção de overflow. */
.wa-chat-view .wa-chat-html-fragment {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: var(--lumo-border-radius-m);
  background: #faf7ef;
  border: 1px solid var(--lumo-contrast-10pct);
  padding: 0 20px;
  box-sizing: border-box;
}

.wa-chat-view .wa-chat-html-fragment .shell {
  width: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-break: break-word;
}

.wa-chat-view vaadin-markdown.wa-chat-markdown::part(content) {
  font-family: inherit;
  line-height: inherit;
  font-size: inherit;
  color: inherit;
}

.wa-chat-view vaadin-markdown.wa-chat-markdown :is(h1, h2, h3, h4, h5, h6) {
  margin: 0.6rem 0 0.32rem;
  line-height: 1.32;
  letter-spacing: 0.004em;
  color: #000000;
  font-weight: 700;
}

html[theme~="dark"] .wa-chat-view vaadin-markdown.wa-chat-markdown :is(h1, h2, h3, h4, h5, h6) {
  color: var(--lumo-primary-text-color);
}

.wa-chat-view vaadin-markdown.wa-chat-markdown h1 {
  font-size: clamp(1.08rem, 0.35vw + 0.95rem, 1.22rem);
}

.wa-chat-view vaadin-markdown.wa-chat-markdown h2 {
  font-size: clamp(1.02rem, 0.26vw + 0.93rem, 1.14rem);
}

.wa-chat-view vaadin-markdown.wa-chat-markdown h3 {
  font-size: clamp(0.98rem, 0.2vw + 0.9rem, 1.07rem);
}

.wa-chat-view vaadin-markdown.wa-chat-markdown :is(p, li, td, th, blockquote) {
  font-size: var(--wa-chat-text-size);
  line-height: var(--wa-chat-line-height);
}

.wa-chat-view vaadin-markdown.wa-chat-markdown :is(ul, ol) {
  margin: 0.22rem 0 0.46rem 1.1rem;
  padding: 0;
}

.wa-chat-view vaadin-markdown.wa-chat-markdown :is(table) {
  width: 100%;
  border-collapse: collapse;
  margin: 0.42rem 0 0.58rem;
  font-size: clamp(0.86rem, 0.16vw + 0.81rem, 0.95rem);
}

.wa-chat-view vaadin-markdown.wa-chat-markdown :is(th, td) {
  padding: 0.3rem 0.38rem;
  border-bottom: 1px solid var(--lumo-contrast-10pct);
  text-align: left;
  vertical-align: top;
}

/* Tipografia fixa do chat (definição de produto, +20%):
   texto = 19.2px (via --wa-chat-text-size no .wa-chat-view);
   títulos = 16.8px com negrito. */
.wa-chat-view vaadin-markdown.wa-chat-markdown :is(h1, h2, h3, h4, h5, h6) {
  font-size: 1.05rem; /* 16.8px (14px + 20%) */
  font-weight: 700;
}

.wa-chat-view vaadin-markdown.wa-chat-markdown :is(table) {
  font-size: var(--wa-chat-text-size); /* 19.2px */
}

/* =====================================================================
   BLOCO DE STEP (run-block do mockup)
   Aplica-se ao balão do assistente que carrega um badge de step.
   Card branco + faixa marrom no topo + título serifado + dados em
   container marrom. Só afeta os steps do chat; demais mensagens e
   outras telas ficam intactas.
   ===================================================================== */

/* Card branco com borda e cantos arredondados (substitui o balão bege) */
.wa-chat-view .wa-chat-msg-bubble-assistant:has(.wa-chat-msg-step-badge) {
  background: var(--wa-card-bg) !important;
  border-color: var(--wa-card-border) !important;
  border-radius: 10px;
  overflow: hidden;
  padding: 0 !important;
  row-gap: 0;
}

/* Faixa marrom do cabeçalho do step */
.wa-chat-view .wa-chat-msg-bubble-assistant:has(.wa-chat-msg-step-badge) .wa-chat-msg-header {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  background: var(--wa-soft-bg);
  border-bottom: 0.5px solid var(--wa-card-border-soft);
  padding: 12px 18px;
  margin: 0;
  align-items: center;
  column-gap: 0.6rem;
}

/* O badge vira o TÍTULO do step: círculo numerado + nome serifado.
   Ocupa todo o espaço da linha, empurrando a meta (agente/modelo/tokens)
   para a direita do cabeçalho. */
.wa-chat-view .wa-chat-msg-bubble-assistant:has(.wa-chat-msg-step-badge) .wa-chat-msg-step-badge {
  order: -1;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

/* Círculo preto com o número em branco */
.wa-chat-view .wa-chat-msg-bubble-assistant:has(.wa-chat-msg-step-badge) .wa-chat-msg-step-num {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--wa-ink);
  color: #ffffff;
  font-family: "Spectral", Georgia, "Times New Roman", serif;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
}

/* Título do step: serifado, maior, sem truncar o espaço disponível */
.wa-chat-view .wa-chat-msg-bubble-assistant:has(.wa-chat-msg-step-badge) .wa-chat-msg-step-title {
  font-family: var(--wa-serif);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--wa-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Autor/horário ocupavam espaço redundante com o título do step: ocultos
   aqui (continuam normais nas demais mensagens do chat). */
.wa-chat-view .wa-chat-msg-bubble-assistant:has(.wa-chat-msg-step-badge) .wa-chat-msg-author,
.wa-chat-view .wa-chat-msg-bubble-assistant:has(.wa-chat-msg-step-badge) .wa-chat-msg-timestamp {
  display: none;
}

/* Meta (agente/modelo) fica como informação secundária esmaecida, à direita */
.wa-chat-view .wa-chat-msg-bubble-assistant:has(.wa-chat-msg-step-badge) .wa-chat-msg-meta {
  font-size: 0.66rem;
  color: var(--wa-ink-faint);
  font-weight: 500;
  margin-left: auto;
  flex-shrink: 0;
}

/* Meta do step no padrão do mockup (.run-block-meta): pill colorida do modelo +
   tokens, alinhados à direita do cabeçalho do step. */
.wa-chat-view .wa-chat-msg-bubble-assistant:has(.wa-chat-msg-step-badge) .wa-chat-msg-step-meta {
  margin-left: auto;
  flex-shrink: 0;
  align-items: center;
  gap: 0.5rem;
}

.wa-chat-view .wa-chat-msg-bubble-assistant:has(.wa-chat-msg-step-badge) .wa-chat-msg-step-meta-item {
  font-size: 0.66rem;
  color: var(--wa-ink-faint);
  font-weight: 500;
  font-family: "SF Mono", "Monaco", "Menlo", "Consolas", monospace;
  white-space: nowrap;
  cursor: pointer;
  border-radius: 0.35rem;
  padding: 0.1rem 0.3rem;
  transition: background 0.15s ease, color 0.15s ease;
}

.wa-chat-view .wa-chat-msg-bubble-assistant:has(.wa-chat-msg-step-badge) .wa-chat-msg-step-meta-item:hover {
  background: var(--wa-shell-accent-soft, rgba(63, 111, 159, 0.14));
  color: var(--wa-shell-accent, #0c447c);
  font-weight: 700;
}

/* Conteúdo branco com respiro lateral (run-block-content).
   box-sizing: border-box é essencial aqui: sem ele, o padding lateral soma
   à largura 100% do componente e o texto ultrapassa a borda direita do card. */
.wa-chat-view .wa-chat-msg-bubble-assistant:has(.wa-chat-msg-step-badge) > *:not(.wa-chat-msg-header) {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding-left: 20px;
  padding-right: 20px;
}
.wa-chat-view .wa-chat-msg-bubble-assistant:has(.wa-chat-msg-step-badge) > vaadin-markdown,
.wa-chat-view .wa-chat-msg-bubble-assistant:has(.wa-chat-msg-step-badge) > .wa-chat-step-content-wrapper,
.wa-chat-view .wa-chat-msg-bubble-assistant:has(.wa-chat-msg-step-badge) > .wa-chat-step-data-grid {
  padding-top: 16px;
  padding-bottom: 16px;
}
.wa-chat-view .wa-chat-msg-bubble-assistant:has(.wa-chat-msg-step-badge) > vaadin-markdown::part(content) {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

/* Dados estruturados (listas) dentro do step = container marrom (run-data-grid) */
.wa-chat-view .wa-chat-msg-bubble-assistant:has(.wa-chat-msg-step-badge) vaadin-markdown :is(ul, ol) {
  background: var(--wa-soft-bg);
  border-radius: 8px;
  margin: 0.6rem 0;
  padding: 0.7rem 0.9rem 0.7rem 2rem;
}

/* Rótulos em negrito dentro dos dados = chave esmaecida em caixa alta leve */
.wa-chat-view .wa-chat-msg-bubble-assistant:has(.wa-chat-msg-step-badge) vaadin-markdown li strong {
  color: var(--wa-ink);
}

/* =====================================================================
   GRADE DE DADOS (run-data-grid do mockup)
   Usada quando o conteúdo do step é uma lista "**Rótulo**: Valor":
   2 colunas, rótulo esmaecido em cima, valor em mono embaixo. Texto comum
   e listas que não seguem esse padrão (ex.: bullets de teses de defesa)
   continuam renderizando como markdown normal, sem nenhuma alteração.
   ===================================================================== */
.wa-chat-view .wa-chat-step-content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.wa-chat-view .wa-chat-step-data-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.55rem 1.25rem;
  padding: 0.9rem 1rem;
  background: var(--wa-soft-bg);
  border-radius: 8px;
  margin: 0.6rem 0;
}

.wa-chat-view .wa-chat-step-data-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.wa-chat-view .wa-chat-step-data-key {
  font-size: 0.66rem;
  color: var(--wa-ink-faint);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
}

.wa-chat-view .wa-chat-step-data-val {
  font-family: "SF Mono", "Monaco", "Menlo", Consolas, monospace;
  font-size: 0.8rem;
  color: var(--lumo-secondary-text-color);
  overflow-wrap: anywhere;
}

/* =====================================================================
   PIPELINE AO VIVO DENTRO DO CHAT (Fase 3)
   Barra segmentada de steps + run-blocks em streaming (efeito ChatGPT).
   Elementos efemeros: existem so durante a execucao; no evento done sao
   substituidos pelas mensagens canonicas (listarMensagens).
   ===================================================================== */
.wa-chat-view .wa-chat-pipeline-bar {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  gap: 4px;
  padding: 0 1rem 12px;
  background: transparent;
  /* border-bottom herdada do wa-chat-rich-header-compact pai */
}
.wa-chat-view .wa-chat-pipeline-seg {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.wa-chat-view .wa-chat-pipeline-seg-bar {
  height: 3px;
  background: var(--wa-soft-bg, #f0ece1);
  border-radius: 999px;
  overflow: hidden;
}
.wa-chat-view .wa-chat-pipeline-seg-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: #0f6e56;
  transition: width 0.3s ease;
}
.wa-chat-view .wa-chat-pipeline-seg-done .wa-chat-pipeline-seg-fill { width: 100%; background: #0f6e56; }
.wa-chat-view .wa-chat-pipeline-seg-running .wa-chat-pipeline-seg-fill {
  width: 60%;
  background: #0c447c;
  animation: wa-pl-run 2s ease-in-out infinite;
}
.wa-chat-view .wa-chat-pipeline-seg-error .wa-chat-pipeline-seg-fill { width: 100%; background: #791f1f; }
@keyframes wa-pl-run { 0% { width: 5%; } 50% { width: 75%; } 100% { width: 95%; } }
@keyframes wa-pl-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes wa-pl-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
.wa-chat-view .wa-chat-pipeline-seg-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  color: var(--lumo-tertiary-text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wa-chat-view .wa-chat-pipeline-seg-done .wa-chat-pipeline-seg-label,
.wa-chat-view .wa-chat-pipeline-seg-running .wa-chat-pipeline-seg-label {
  color: var(--lumo-secondary-text-color);
}
.wa-chat-view .wa-chat-pipeline-seg-done .wa-chat-pipeline-seg-label::before { content: '\2713'; color: #0f6e56; font-weight: 700; }
.wa-chat-view .wa-chat-pipeline-seg-running .wa-chat-pipeline-seg-label::before { content: '\25CF'; color: #0c447c; animation: wa-pl-pulse 1.4s ease-in-out infinite; }
.wa-chat-view .wa-chat-pipeline-seg-pending .wa-chat-pipeline-seg-label::before { content: '\25CB'; color: var(--lumo-tertiary-text-color); }
.wa-chat-view .wa-chat-pipeline-seg-error .wa-chat-pipeline-seg-label::before { content: '!'; color: #791f1f; font-weight: 700; }

/* Run-block ao vivo */
.wa-chat-view .wa-chat-live-run {
  width: calc(100% - 32px);
  margin: 0 16px;
  background: var(--wa-card-bg, #ffffff);
  border: 0.5px solid var(--wa-card-border, rgba(20, 17, 10, 0.12));
  border-radius: 10px;
  overflow: hidden;
  box-sizing: border-box;
}
.wa-chat-view .wa-chat-live-run-streaming {
  border-color: #0c447c;
  box-shadow: 0 0 0 1px #0c447c, 0 4px 16px -8px rgba(12, 68, 124, 0.25);
}
.wa-chat-view .wa-chat-live-run-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--wa-soft-bg, #f5f1e5);
  border-bottom: 0.5px solid var(--wa-card-border-soft, rgba(20, 17, 10, 0.07));
}
.wa-chat-view .wa-chat-live-run-streaming .wa-chat-live-run-header { background: #e6f1fb; }
.wa-chat-view .wa-chat-live-run-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #14110a;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--wa-serif);
  font-size: 12px;
  flex-shrink: 0;
}
.wa-chat-view .wa-chat-live-run-streaming .wa-chat-live-run-num { background: #0c447c; animation: wa-pl-pulse 1.4s ease-in-out infinite; }
.wa-chat-view .wa-chat-live-run-title {
  flex: 1;
  font-family: var(--wa-serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--wa-ink, #14110a);
}
.wa-chat-view .wa-chat-live-run-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  border-radius: 3px;
  background: #0c447c;
  color: #fff;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.wa-chat-view .wa-chat-live-run-badge::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  animation: wa-pl-pulse 1.2s ease-in-out infinite;
}
.wa-chat-view .wa-chat-live-run-content {
  padding: 16px 20px;
  font-size: var(--wa-chat-text-size, 0.875rem);
  line-height: 1.65;
  color: var(--lumo-tertiary-text-color);
  white-space: pre-wrap;
  word-break: break-word;
}
/* Card ao vivo em streaming: altura flexível com mínimo e máximo + scroll interno */
.wa-chat-view .wa-chat-live-run-streaming .wa-chat-live-run-content {
  min-height: 200px;
  max-height: calc(55vh - 160px);
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
/* Cursor piscante so enquanto o run esta em streaming */
.wa-chat-view .wa-chat-live-run-streaming .wa-chat-live-run-content::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 14px;
  background: #0c447c;
  vertical-align: middle;
  margin-left: 2px;
  animation: wa-pl-blink 1s step-end infinite;
}

/* Run-block pendente (aguardando execução) */
.wa-chat-view .wa-chat-live-run-pending {
  border-color: rgba(20, 17, 10, 0.07);
  background: #f5f1e5;
  opacity: 0.8;
}
.wa-chat-view .wa-chat-live-run-pending .wa-chat-live-run-header {
  background: transparent;
}
.wa-chat-view .wa-chat-live-run-pending .wa-chat-live-run-num {
  background: #d4c8b3;
  color: #6b6557;
}
.wa-chat-view .wa-chat-live-run-pending .wa-chat-live-run-title {
  color: #a39b89;
}
.wa-chat-view .wa-pending-text {
  font-size: 12px;
  color: #a39b89;
  font-style: italic;
}

/* =====================================================================
   FASE 3B — refinamentos visuais (apenas CSS, sem mudar lógica/fluxo)
   ===================================================================== */

/* Run-block surge com leve fade + slide (microanimacao ao aparecer) */
.wa-chat-view .wa-chat-live-run {
  animation: wa-live-in 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes wa-live-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Transicoes suaves entre estados (pending -> running -> done) */
.wa-chat-view .wa-chat-live-run,
.wa-chat-view .wa-chat-live-run-header,
.wa-chat-view .wa-chat-live-run-num,
.wa-chat-view .wa-chat-live-run-badge {
  transition: background 0.25s ease, border-color 0.25s ease,
              box-shadow 0.25s ease, color 0.25s ease, opacity 0.2s ease;
}
.wa-chat-view .wa-chat-pipeline-seg-fill {
  transition: width 0.3s ease, background 0.25s ease;
}
.wa-chat-view .wa-chat-pipeline-seg-label {
  transition: color 0.25s ease;
}

/* Pipeline-bar dentro do compact header: alinhamento dos segmentos */
.wa-chat-view .wa-chat-pipeline-bar {
  padding: 2px 1.25rem 14px;
  align-items: stretch;
}

/* Titulo do run ao vivo com o mesmo tracking serifado do mockup (.run-block-title) */
.wa-chat-view .wa-chat-live-run-title {
  letter-spacing: -0.005em;
}

/* Barra COMPACTA quando o header rico esta colapsado: segmentos viram tracos
   finos sem rotulo, equivalente ao .chat-header-bar-progress (mini-steps).
   pipeline-bar agora é filha de wa-chat-rich-header-compact, então usa descendant. */
.wa-chat-view .wa-chat-rich-header-collapsed .wa-chat-pipeline-bar {
  padding: 4px 1rem 6px;
  gap: 3px;
  transition: padding 0.2s ease;
}
.wa-chat-view .wa-chat-rich-header-collapsed .wa-chat-pipeline-bar .wa-chat-pipeline-seg-label {
  display: none;
}
.wa-chat-view .wa-chat-rich-header-collapsed .wa-chat-pipeline-bar .wa-chat-pipeline-seg-bar {
  height: 4px;
}

/* Responsividade: telas estreitas compactam a barra e os run-blocks */
@media (max-width: 640px) {
  .wa-chat-view .wa-chat-pipeline-bar {
    padding: 10px 0.75rem 12px;
    gap: 3px;
  }
  .wa-chat-view .wa-chat-pipeline-seg-label {
    font-size: 9.5px;
  }
  .wa-chat-view .wa-chat-live-run-header {
    padding: 10px 14px;
  }
  .wa-chat-view .wa-chat-live-run-content {
    padding: 14px 14px;
  }
}

.wa-drawer-footer {
  box-sizing: border-box;
  gap: 9px;
  padding: 10px 12px;
  border-top: 0.5px solid rgba(20, 17, 10, 0.12);
  background: #ffffff;
}

.wa-user-summary {
  box-sizing: border-box;
  gap: 9px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  cursor: default;
  box-shadow: none;
}

.wa-user-summary:hover,
.wa-user-summary:focus {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  outline: none;
}

.wa-user-text {
  gap: 0;
}

.wa-user-name {
  font-size: 0.82rem;
  font-weight: 500;
  color: #14110a;
}

.wa-user-role {
  display: none;
}

.wa-user-email {
  font-size: 0.68rem;
  color: #a39b89;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 1;
}

.wa-user-gear-btn {
  flex-shrink: 0;
  padding: 7px 9px !important;
  border: 0.5px solid rgba(20, 17, 10, 0.12) !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: #6b6557 !important;
  box-shadow: none !important;
  transition: background 150ms ease, color 150ms ease !important;
}

.wa-user-gear-btn:hover {
  background: #f5f1e5 !important;
  color: #14110a !important;
}

.wa-user-menu-indicator {
  color: var(--wa-shell-text-muted);
  font-size: 0.95rem;
}

.wa-footer-menu-item {
  min-width: 11rem;
}

html[theme~="dark"] vaadin-context-menu-overlay::part(content) {
  border: 1px solid var(--wa-shell-border);
  border-radius: 1rem;
  background: linear-gradient(180deg, #111a27 0%, #0c141f 100%);
  color: var(--wa-shell-text);
  box-shadow: var(--wa-shell-shadow);
}

html[theme~="dark"] vaadin-context-menu-overlay vaadin-context-menu-item {
  color: var(--wa-shell-text);
}

html[theme~="dark"] vaadin-context-menu-overlay vaadin-context-menu-item[focused] {
  background: var(--wa-shell-surface-hover);
}

vaadin-context-menu-overlay vaadin-context-menu-item::part(content) {
  cursor: pointer;
}

html:not([theme~="dark"]) vaadin-context-menu-overlay vaadin-context-menu-item[focused]::part(content) {
  background: #f5f1e5;
}

html:not([theme~="dark"]) vaadin-context-menu-overlay vaadin-context-menu-item[focused] {
  color: #14110a;
}

.wa-crud-view {
  gap: var(--lumo-space-m);
}

.wa-clientes-view.wa-crud-view,
.wa-llms-view.wa-crud-view,
.wa-atalhos-view.wa-crud-view {
  gap: var(--lumo-space-s);
}

.wa-crud-secao-titulo {
  margin: 0 0 0.35rem;
  font-family: "Spectral", Georgia, "Times New Roman", serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.wa-crud-secao-divisor {
  display: block;
  align-self: stretch;
  height: 1px;
  border: 0;
  padding: 0;
  margin: var(--lumo-space-m) 0;
  background-color: var(--lumo-contrast-10pct);
}

.wa-crud-config-titulo {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 500;
  color: #a39b89;
}

.wa-llms-config-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1.4rem;
  margin-bottom: 0.4rem;
}

.wa-llms-config-titulo {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 500;
  color: #a39b89;
}

.wa-llms-pill-selecionada {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: #f3e6cf;
  color: #14110a;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
}

.wa-llms-pill-selecionada span {
  line-height: 1;
}

.wa-llms-pill-selecionada vaadin-icon {
  font-size: 0.95rem;
  color: #8a6d3f;
  flex-shrink: 0;
}

.wa-llms-subtitulo {
  margin: 0 0 0.35rem;
  font-family: "Spectral", Georgia, "Times New Roman", serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.wa-llms-divisor {
  display: block;
  align-self: stretch;
  height: 1px;
  border: 0;
  padding: 0;
  margin: var(--lumo-space-s) 0;
  background-color: var(--lumo-contrast-10pct);
}

.wa-crud-title {
  margin: 0;
}

.wa-breadcrumb {
  box-sizing: border-box;
  margin: 0;
  padding: 0 0 var(--lumo-space-xs) 0;
  gap: var(--lumo-space-xs);
  flex-wrap: wrap;
  color: var(--lumo-secondary-text-color);
  font-size: var(--lumo-font-size-s);
  line-height: 1.2;
}

.wa-breadcrumb vaadin-button::part(button) {
  min-height: 1.35rem;
  padding: 0;
  font-size: var(--lumo-font-size-s);
}

.wa-breadcrumb-separator {
  color: var(--lumo-secondary-text-color);
  font-size: var(--lumo-font-size-s);
}

.wa-breadcrumb-current {
  color: var(--lumo-body-text-color);
  font-size: var(--lumo-font-size-s);
}

.wa-crud-toolbar {
  box-sizing: border-box;
  gap: var(--lumo-space-s);
  padding: var(--lumo-space-s);
  border: 1px solid var(--lumo-contrast-10pct);
  border-radius: var(--lumo-border-radius-m);
  background: var(--lumo-base-color);
  box-shadow: var(--lumo-box-shadow-xs);
  flex-wrap: wrap;
}

/* TEMP: padrão único de botão pra TODAS as toolbars administrativas (Tenants, Usuários,
   Clientes, Atalhos, LLMs, Workspaces, Billing...). Antes só existia escopado em
   .wa-workspace-project-toolbar — botão primário preto (não azul), hover creme nos
   secundários, elevação leve no hover, "afunda" no clique. */
.wa-crud-toolbar vaadin-button[theme~="primary"] {
  --lumo-primary-color: #14110a;
  --lumo-primary-contrast-color: #ffffff;
  --lumo-primary-color-50pct: rgba(20, 17, 10, 0.5);
}

/* Cor PARADA (sem hover) do texto/ícone dos botões secundários — sem isso eles ficam com o
   azul padrão do Lumo, que é exatamente o problema reportado (Novo/Editar/Excluir/Atualizar
   apareciam com letra e ícone azul mesmo sem mouse em cima). */
.wa-crud-toolbar vaadin-button:not([theme~="primary"]):not([theme~="error"])::part(button) {
  color: #14110a !important;
}

.wa-crud-toolbar vaadin-button:not([theme~="primary"]):not([theme~="error"]) vaadin-icon {
  color: #14110a !important;
}

.wa-crud-toolbar vaadin-button {
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease,
              box-shadow 140ms ease, transform 140ms ease;
}

.wa-crud-toolbar vaadin-button:hover,
.wa-crud-toolbar vaadin-button:focus-visible {
  transform: translateY(-2px);
}

.wa-crud-toolbar vaadin-button:not([theme~="primary"]):hover,
.wa-crud-toolbar vaadin-button:not([theme~="primary"]):focus-visible {
  background: #f5f1e5;
  color: #14110a;
  box-shadow: 0 4px 12px -5px rgba(20, 17, 10, 0.35),
              inset 0 0 0 1px rgba(32, 26, 17, 0.28);
}

.wa-crud-toolbar vaadin-button[theme~="primary"]:hover {
  box-shadow: 0 6px 14px -5px rgba(20, 17, 10, 0.55);
}

.wa-crud-toolbar vaadin-button:active {
  transform: translateY(0) scale(0.97);
}

/* TEMP: mesmo padrão de botão primário preto (em vez do azul padrão do Lumo) aplicado a
   QUALQUER Dialog do sistema. vaadin-dialog-overlay é anexado direto no <body> (fora da
   árvore normal do componente), então nenhuma classe de escopo de view/toolbar alcança
   os botões lá dentro via CSS descendente — precisa de uma regra própria, sem escopo. */
vaadin-dialog-overlay vaadin-button[theme~="primary"] {
  --lumo-primary-color: #14110a;
  --lumo-primary-contrast-color: #ffffff;
  --lumo-primary-color-50pct: rgba(20, 17, 10, 0.5);
}

.wa-toolbar-separator {
  display: inline-block;
  width: 1px;
  height: 1.6rem;
  background: var(--lumo-contrast-20pct);
  margin: 0 calc(var(--lumo-space-s) / 2);
}

/* TEMP: mesmo padrão de botão primário preto (em vez de azul) aplicado às telas que têm
   botão de ação mas NÃO usam .wa-crud-toolbar (não são toolbar de lista, são botão avulso
   em formulário/fluxo): Login, AgenteBuilder, AgenteSteps, ChatPipelineExecucao. */
.wa-login-view vaadin-button[theme~="primary"],
.wa-agente-builder-view vaadin-button[theme~="primary"],
.wa-agentes-steps-view vaadin-button[theme~="primary"],
.wa-chat-pipeline-page vaadin-button[theme~="primary"] {
  --lumo-primary-color: #14110a;
  --lumo-primary-contrast-color: #ffffff;
  --lumo-primary-color-50pct: rgba(20, 17, 10, 0.5);
}

.wa-login-view vaadin-button[theme~="primary"],
.wa-agente-builder-view vaadin-button[theme~="primary"],
.wa-agentes-steps-view vaadin-button[theme~="primary"],
.wa-chat-pipeline-page vaadin-button[theme~="primary"] {
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease,
              box-shadow 140ms ease, transform 140ms ease;
}

.wa-login-view vaadin-button[theme~="primary"]:hover,
.wa-agente-builder-view vaadin-button[theme~="primary"]:hover,
.wa-agentes-steps-view vaadin-button[theme~="primary"]:hover,
.wa-chat-pipeline-page vaadin-button[theme~="primary"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px -5px rgba(20, 17, 10, 0.55);
}

.wa-login-view vaadin-button[theme~="primary"]:active,
.wa-agente-builder-view vaadin-button[theme~="primary"]:active,
.wa-agentes-steps-view vaadin-button[theme~="primary"]:active,
.wa-chat-pipeline-page vaadin-button[theme~="primary"]:active {
  transform: translateY(0) scale(0.97);
}

.wa-crud-form-shell {
  box-sizing: border-box;
  padding: var(--lumo-space-m);
  border: 1px solid var(--lumo-contrast-10pct);
  border-radius: var(--lumo-border-radius-m);
  background: var(--lumo-base-color);
  box-shadow: var(--lumo-box-shadow-xs);
}

.wa-crud-form {
  width: 100%;
}

.wa-campo-toggle-visivel {
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.15s ease;
}

.wa-campo-toggle-visivel:not([disabled]):hover {
  background: var(--lumo-contrast-10pct);
}

.wa-campo-toggle-visivel vaadin-icon {
  transition: transform 0.15s ease;
}

.wa-campo-toggle-visivel:not([disabled]):hover vaadin-icon {
  transform: scale(1.25);
}

.wa-campo-toggle-visivel[disabled] {
  cursor: default;
}

/* Mesma caixa beige do padrão do sistema (ver .wa-builder-toggle-box) — não cinza Lumo genérico.
   box-sizing/width explícitos: sem isso o padding soma fora dos 100% da coluna do FormLayout e
   a caixa estoura pra fora do card (mesmo bug já visto em notaOrdem). */
.wa-switch-painel {
  background: #f5f1e5;
  border-radius: 7px;
  padding: 0.25rem 1rem;
  box-sizing: border-box;
  width: 100%;
}

.wa-switch-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0;
  border-top: 1px solid rgba(20, 17, 10, 0.08);
}

.wa-switch-controle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.wa-switch-estado {
  font-size: 12px;
  font-weight: 500;
  color: #9a9789;
  min-width: 4.5rem;
  text-align: right;
}

.wa-switch-estado.wa-switch-estado-ativo {
  color: #14110a;
}

.wa-switch-linha:first-child {
  border-top: none;
}

.wa-switch-titulo {
  font-size: 13px;
  font-weight: 500;
  color: #14110a;
}

.wa-switch-descricao {
  font-size: 12px;
  color: #6b6557;
  margin-top: 0.15rem;
}

.wa-switch-trilho {
  width: 2.25rem;
  height: 1.25rem;
  border-radius: 1rem;
  background: #ddd8c8;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.wa-switch-trilho:hover {
  background: #cfc9b6;
}

.wa-switch-trilho.wa-switch-ativo {
  background: #14110a;
}

.wa-switch-trilho.wa-switch-ativo:hover {
  opacity: 0.85;
}

.wa-switch-bolinha {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: #ffffff;
  transition: left 0.15s ease;
}

.wa-switch-trilho.wa-switch-ativo .wa-switch-bolinha {
  left: 1.1rem;
}

.wa-crud-grid {
  min-height: 20rem;
  border: 1px solid var(--lumo-contrast-10pct);
  border-radius: var(--lumo-border-radius-m);
  overflow: hidden;
  background: var(--lumo-base-color);
}

vaadin-grid {
  --wa-grid-selected-row-bg: var(--lumo-primary-color-10pct);
  --wa-grid-selected-row-accent: var(--lumo-primary-color-50pct);
}

vaadin-grid::part(selected-row),
vaadin-grid::part(selected-row-cell) {
  background: var(--wa-grid-selected-row-bg) !important;
  color: var(--lumo-primary-text-color);
  font-weight: 600;
}

vaadin-grid::part(selected-row) {
  box-shadow: inset 0.2rem 0 0 var(--wa-grid-selected-row-accent);
}

.wa-crud-footer {
  font-weight: 600;
  color: var(--lumo-secondary-text-color);
}

.wa-chat-central-view {
  box-sizing: border-box;
  min-height: 0;
}

.wa-chat-central-view .wa-chat-central-toolbar {
  justify-content: flex-start;
  flex-wrap: nowrap;
}

.wa-chat-central-left,
.wa-chat-central-right,
.wa-chat-central-upload {
  box-sizing: border-box;
  min-height: 0;
}

.wa-chat-central-card-scroller,
.wa-chat-central-card-list {
  width: 100%;
  min-height: 0;
}

.wa-chat-central-left {
  padding-right: var(--lumo-space-s);
}

.wa-chat-central-right {
  padding-left: var(--lumo-space-s);
}

.wa-chat-central-title {
  font-weight: 700;
  color: var(--lumo-primary-text-color);
}

.wa-chat-central-card-list {
  gap: var(--lumo-space-s);
  align-items: stretch;
}

.wa-chat-central-card {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--lumo-space-s);
  padding: 0.95rem 1rem;
  border: 1px solid var(--lumo-contrast-10pct);
  border-radius: calc(var(--lumo-border-radius-l) + 0.05rem);
  background: linear-gradient(180deg, var(--lumo-base-color), var(--lumo-contrast-5pct));
  box-shadow: var(--lumo-box-shadow-xs);
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.wa-chat-central-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--lumo-box-shadow-s);
}

.wa-chat-central-card-selected {
  border-color: var(--lumo-primary-color);
  box-shadow: inset 0 0 0 1px var(--lumo-primary-color-30pct);
}

.wa-chat-central-card-success {
  border-color: var(--lumo-success-color-30pct);
}

.wa-chat-central-card-danger {
  border-color: var(--lumo-error-color-30pct);
}

/* Chat inativado: fundo acinzentado, opacidade reduzida e borda laranja */
.wa-chat-central-card-inactive {
  opacity: 0.72;
  border-color: var(--lumo-warning-color-30pct, #e8a000);
  background: var(--lumo-contrast-5pct);
}

.wa-chat-central-card-empty {
  cursor: default;
  color: var(--lumo-secondary-text-color);
  background: var(--lumo-contrast-5pct);
}

.wa-chat-central-card-header {
  display: flex;
  align-items: center;
  gap: var(--lumo-space-s);
}


.wa-chat-central-card-icon {
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--lumo-border-radius-m);
  background: linear-gradient(180deg, var(--lumo-primary-color-10pct), var(--lumo-primary-color-5pct));
  color: var(--lumo-primary-text-color);
  flex-shrink: 0;
}

.wa-chat-central-card-body {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 0.2rem;
}

.wa-chat-central-card-title {
  font-size: var(--lumo-font-size-m);
  font-weight: 700;
  color: var(--lumo-header-text-color);
}

.wa-chat-central-card-meta {
  color: var(--lumo-secondary-text-color);
  font-size: var(--lumo-font-size-s);
}

.wa-chat-central-card-selector {
  width: 1.35rem;
  height: 1.35rem;
  margin-left: auto;
  margin-top: 0.15rem;
  border-radius: 999px;
  border: 2px solid var(--lumo-contrast-20pct);
  background: var(--lumo-base-color);
  flex-shrink: 0;
}

.wa-chat-central-card-selector-active {
  border-color: var(--lumo-primary-color);
  box-shadow: inset 0 0 0 0.28rem var(--lumo-primary-color);
}

.wa-chat-central-card-description {
  margin: 0;
  color: var(--lumo-body-text-color);
  font-size: var(--lumo-font-size-m);
  line-height: 1.4;
}

.wa-chat-central-card-badge {
  width: fit-content;
  max-width: 100%;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  font-size: var(--lumo-font-size-s);
  font-weight: 700;
}

.wa-chat-central-card-badge-success {
  color: var(--lumo-success-text-color);
  background: var(--lumo-success-color-10pct);
}

.wa-chat-central-card-badge-danger {
  color: var(--lumo-error-text-color);
  background: var(--lumo-error-color-10pct);
}

.wa-chat-central-card-badge-neutral {
  color: var(--lumo-secondary-text-color);
  background: var(--lumo-contrast-10pct);
}

/* Badge de chat inativado: tom laranja/warning para diferenciar de chat deletado */
.wa-chat-central-card-badge-warning {
  color: #7a4800;
  background: #fff3cc;
}

html[theme~="dark"] .wa-chat-central-card-badge-warning {
  color: #ffd166;
  background: rgba(255, 190, 0, 0.15);
}

.wa-chat-central-card-status-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.wa-chat-central-card-step {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--lumo-contrast-10pct);
  background: var(--lumo-contrast-5pct);
  color: var(--lumo-secondary-text-color);
  font-size: var(--lumo-font-size-s);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.wa-chat-central-card-details {
  color: var(--lumo-secondary-text-color);
  font-size: var(--lumo-font-size-s);
  line-height: 1.3;
}

.wa-chat-central-upload-header {
  box-sizing: border-box;
  border: 1px solid var(--lumo-contrast-10pct);
  border-radius: var(--lumo-border-radius-l);
  padding: 0.9rem 1rem;
  background: linear-gradient(180deg, var(--lumo-base-color), var(--lumo-contrast-5pct));
  box-shadow: var(--lumo-box-shadow-xs);
}

.wa-chat-central-upload-header-left {
  gap: 0.2rem;
}

.wa-chat-central-upload-subtitle {
  color: var(--lumo-secondary-text-color);
  font-size: var(--lumo-font-size-s);
}

.wa-chat-central-upload-header-right {
  color: var(--lumo-secondary-text-color);
  font-weight: 700;
  white-space: nowrap;
}

.wa-chat-central-upload-header-right span[theme~="success"] {
  color: var(--lumo-success-text-color);
}

.wa-chat-central-upload-progress-bar {
  --vaadin-progress-value-color: var(--lumo-success-color);
}

.wa-chat-central-files {
  gap: var(--lumo-space-s);
  align-items: stretch;
}

.wa-chat-central-file-card {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lumo-space-s);
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--lumo-contrast-10pct);
  border-radius: var(--lumo-border-radius-m);
  background: var(--lumo-base-color);
}

.wa-chat-central-file-left {
  display: flex;
  align-items: center;
  gap: var(--lumo-space-s);
  min-width: 0;
  flex: 1;
}

.wa-chat-central-file-type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.2rem;
  height: 1.7rem;
  padding: 0 0.4rem;
  border-radius: calc(var(--lumo-border-radius-s) + 0.1rem);
  background: #fbeaec;
  color: #a33642;
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  flex-shrink: 0;
}

.wa-chat-central-file-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.1rem;
}

.wa-chat-central-file-title {
  color: var(--lumo-header-text-color);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wa-chat-central-file-meta {
  color: var(--lumo-secondary-text-color);
  font-size: var(--lumo-font-size-s);
}

.wa-chat-central-file-status {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 600;
  flex-shrink: 0;
}

.wa-chat-central-file-status-icon {
  width: 0.95rem;
  height: 0.95rem;
}

.wa-chat-central-file-status-success {
  color: #0c447c;
}

.wa-chat-central-file-status-pending {
  color: var(--lumo-secondary-text-color);
}

.wa-file-processing-spinner {
  border-radius: 50%;
  border: 2px solid rgba(20, 17, 10, 0.12);
  border-top-color: #6b6557;
  animation: wa-file-spin 0.75s linear infinite;
  flex-shrink: 0;
}

@keyframes wa-file-spin {
  to { transform: rotate(360deg); }
}

.wa-chat-central-file-status-error {
  color: var(--lumo-error-text-color);
}

.wa-chat-central-file-empty {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0.85rem 0.95rem;
  border-radius: var(--lumo-border-radius-m);
  border: 1px dashed var(--lumo-contrast-20pct);
  color: var(--lumo-secondary-text-color);
  background: var(--lumo-contrast-5pct);
}

.wa-chat-central-steps-dialog {
  --lumo-dialog-border-radius: var(--lumo-border-radius-l);
}

.wa-chat-central-steps-shell {
  gap: var(--lumo-space-s);
}

.wa-chat-central-steps-title {
  font-size: var(--lumo-font-size-l);
  font-weight: 700;
  color: var(--lumo-header-text-color);
}

.wa-chat-central-steps-meta {
  color: var(--lumo-secondary-text-color);
  font-size: var(--lumo-font-size-s);
}

.wa-chat-central-steps-status {
  color: var(--lumo-primary-text-color);
  font-weight: 600;
}

.wa-chat-central-steps-progress {
  --vaadin-progress-value-color: var(--lumo-primary-color);
}

.wa-chat-central-steps-list {
  max-height: min(48vh, 26rem);
  overflow: auto;
  border: 1px solid var(--lumo-contrast-10pct);
  border-radius: var(--lumo-border-radius-m);
  background: var(--lumo-base-color);
  padding: var(--lumo-space-s);
  box-sizing: border-box;
}

.wa-chat-central-steps-row {
  box-sizing: border-box;
  border: 1px solid var(--lumo-contrast-10pct);
  border-radius: var(--lumo-border-radius-m);
  padding: 0.55rem 0.7rem;
  background: linear-gradient(180deg, var(--lumo-base-color), var(--lumo-contrast-5pct));
}

.wa-chat-central-steps-row-done {
  border-color: var(--lumo-success-color-30pct);
}

.wa-chat-central-steps-row-pending {
  border-color: var(--lumo-contrast-20pct);
}

.wa-chat-central-steps-icon-done {
  color: var(--lumo-success-color);
}

.wa-chat-central-steps-icon-pending {
  color: var(--lumo-secondary-text-color);
}

.wa-chat-central-steps-label {
  font-weight: 600;
  color: var(--lumo-body-text-color);
}

.wa-chat-central-steps-state {
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  font-size: var(--lumo-font-size-xs);
  font-weight: 700;
}

.wa-chat-central-steps-state-done {
  color: var(--lumo-success-text-color);
  background: var(--lumo-success-color-10pct);
}

.wa-chat-central-steps-state-pending {
  color: var(--lumo-secondary-text-color);
  background: var(--lumo-contrast-10pct);
}

.wa-chat-pipeline-page {
  box-sizing: border-box;
}

.wa-chat-pipeline-shell {
  box-sizing: border-box;
  width: min(100%, 82rem);
  margin: 0 auto;
  padding: var(--lumo-space-m);
  gap: var(--lumo-space-m);
}

.wa-chat-pipeline-header {
  box-sizing: border-box;
  gap: var(--lumo-space-s);
  flex-wrap: wrap;
}

.wa-chat-pipeline-heading {
  gap: 0.3rem;
}

.wa-chat-pipeline-title {
  font-size: clamp(1.3rem, 2vw, 1.85rem);
  font-weight: 700;
  color: var(--lumo-header-text-color);
}

.wa-chat-pipeline-subtitle {
  color: var(--lumo-secondary-text-color);
}

.wa-chat-pipeline-actions {
  justify-content: flex-start;
  flex-wrap: wrap;
  row-gap: var(--lumo-space-xs);
}

.wa-chat-pipeline-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  grid-auto-rows: min-content;
  gap: var(--lumo-space-s);
  width: 100%;
  flex-shrink: 0;
}

.wa-chat-pipeline-metrics-grid .wa-chat-pipeline-metric-card {
  min-width: 0;
}

.wa-chat-pipeline-metric-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  min-height: auto;
  min-width: 0;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--lumo-contrast-10pct);
  border-radius: var(--lumo-border-radius-m);
  background: linear-gradient(180deg, var(--lumo-base-color), var(--lumo-contrast-5pct));
}

.wa-chat-pipeline-metric-label {
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--lumo-secondary-text-color);
  overflow-wrap: anywhere;
}

.wa-chat-pipeline-metric-value {
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  font-weight: 700;
  color: var(--lumo-header-text-color);
  overflow-wrap: anywhere;
}

.wa-chat-pipeline-metric-hint {
  font-size: var(--lumo-font-size-xs);
  color: var(--lumo-secondary-text-color);
  overflow-wrap: anywhere;
}

.wa-chat-pipeline-runs-panel {
  box-sizing: border-box;
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--lumo-space-m);
  border: 1px solid var(--lumo-contrast-10pct);
  border-radius: var(--lumo-border-radius-l);
  background: linear-gradient(180deg, var(--lumo-base-color), var(--lumo-contrast-5pct));
}

.wa-chat-pipeline-meta {
  color: var(--lumo-secondary-text-color);
  font-size: var(--lumo-font-size-s);
}

.wa-chat-pipeline-summary {
  color: var(--lumo-header-text-color);
  font-weight: 700;
}

.wa-chat-pipeline-status {
  color: var(--lumo-primary-text-color);
  font-weight: 600;
}

.wa-chat-pipeline-progress {
  --vaadin-progress-value-color: var(--lumo-primary-color);
}

.wa-chat-pipeline-runs-list {
  box-sizing: border-box;
  min-height: 0;
  overflow: auto;
  padding-right: 0.2rem;
}

.wa-chat-pipeline-run-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  padding: 0.8rem;
  border-radius: var(--lumo-border-radius-m);
  border: 1px solid var(--lumo-contrast-15pct);
  background: var(--lumo-base-color);
}

.wa-chat-pipeline-run-done {
  border-color: var(--lumo-success-color-30pct);
}

.wa-chat-pipeline-run-live {
  border-color: var(--lumo-primary-color-50pct);
}

.wa-chat-pipeline-run-error {
  border-color: var(--lumo-error-color-50pct);
}

.wa-chat-pipeline-run-pending {
  border-color: var(--lumo-contrast-20pct);
}

.wa-chat-pipeline-run-label {
  font-size: var(--lumo-font-size-xs);
  color: var(--lumo-secondary-text-color);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.wa-chat-pipeline-run-badge {
  border-radius: 999px;
  padding: 0.16rem 0.55rem;
  font-size: var(--lumo-font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
}

.wa-chat-pipeline-run-badge-done {
  color: var(--lumo-success-text-color);
  background: var(--lumo-success-color-10pct);
}

.wa-chat-pipeline-run-badge-live {
  color: var(--lumo-primary-text-color);
  background: var(--lumo-primary-color-10pct);
}

.wa-chat-pipeline-run-badge-error {
  color: var(--lumo-error-text-color);
  background: var(--lumo-error-color-10pct);
}

.wa-chat-pipeline-run-badge-pending {
  color: var(--lumo-secondary-text-color);
  background: var(--lumo-contrast-10pct);
}

.wa-chat-pipeline-run-title {
  font-size: var(--lumo-font-size-m);
  font-weight: 700;
  color: var(--lumo-header-text-color);
}

.wa-chat-pipeline-run-description {
  color: var(--lumo-secondary-text-color);
  font-size: var(--lumo-font-size-s);
}

.wa-chat-pipeline-empty {
  color: var(--lumo-secondary-text-color);
  font-size: var(--lumo-font-size-s);
}

.wa-readonly-field::part(input-field) {
  background: var(--lumo-contrast-5pct);
}

/* TEMP: avatar central (opção 1) — círculo bege com badge de câmera sobreposto no canto,
   substitui o antigo "Upload File..." + drop zone + avatar solto embaixo, que ficava torto. */
.wa-avatar-circle-wrap {
  position: relative;
  width: 6rem;
  height: 6rem;
}

/* TEMP: agora é vaadin-avatar (não <img>), tamanho controlado por --vaadin-avatar-size,
   não por width/height comuns. Sem foto real, mostra iniciais/ícone sozinho. */
.wa-user-photo-preview {
  --vaadin-avatar-size: 6rem;
  --vaadin-avatar-background: #f3e6cf;
  --vaadin-avatar-color: #8a6d3f;
}

.wa-avatar-upload-input {
  position: absolute;
  bottom: 0;
  right: 0;
  width: auto;
}

.wa-avatar-upload-input vaadin-upload-file-list {
  display: none;
}

.wa-avatar-camera-btn {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 999px;
  background: var(--lumo-base-color);
  border: 1px solid var(--ray-line, #e8e3d6);
  box-shadow: 0 2px 6px rgba(20, 17, 10, 0.18);
}

.wa-avatar-support {
  gap: 6px;
  margin: 0 auto;
}

/* TEMP: mesmo estilo dos botões brancos da toolbar (.wa-crud-toolbar) — preto parado,
   hover creme com sombra igual. Fica fora da toolbar (embaixo do avatar), então precisa
   da própria cópia da regra, escopada só nesse botão. */
.wa-avatar-remover-btn {
  font-size: 12px;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease,
              box-shadow 140ms ease, transform 140ms ease;
}

.wa-avatar-remover-btn::part(button) {
  color: #14110a !important;
}

.wa-avatar-remover-btn vaadin-icon {
  color: #14110a !important;
}

/* TEMP: layout largo "opção 3" (tela Usuários, card >=1380px) — aplicado a um Div puro
   controlado pelo servidor (UsuariosView.aplicarLayoutPorLargura), NÃO ao vaadin-form-layout.
   O motor interno do vaadin-form-layout (modo setResponsiveSteps) é flexbox dentro do Shadow
   DOM, então grid-column/grid-row nunca funcionariam nele — por isso o layout largo é um
   contêiner próprio. Sem !important e sem @media aqui: quem decide qual dos dois contêineres
   fica visível é o Java, não o CSS.

   2 blocos INDEPENDENTES lado a lado (flex), não mais um grid só com item atravessando várias
   linhas — foi exatamente isso que causava o vão vazio gigante: um item alto (cartão do avatar)
   atravessando 4 linhas de grid inflava a altura da primeira linha inteira pra caber ele.
   Separando em dois blocos, a altura de um nunca afeta a altura do outro. */
.wa-usuario-form-wide {
  display: flex;
  align-items: flex-start;
  gap: var(--lumo-space-l);
}

/* Bloco 1: cartão de perfil (avatar + Remover foto + Personalidade + preview) — largura fixa,
   não cresce nem encolhe, altura só a que o próprio conteúdo precisar.
   280px (não 200px): com 200px o texto do preview markdown quebrava palavra por palavra,
   virando uma coluna altíssima de uma palavra por linha. */
.wa-usuario-cartao-perfil {
  flex: 0 0 280px;
  width: 280px;
  box-sizing: border-box;
  border-right: 1px solid var(--ray-line, #e8e3d6);
  padding: var(--lumo-space-m) var(--lumo-space-l) var(--lumo-space-m) var(--lumo-space-s);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* O textarea precisa ocupar a largura do cartão — sem isso o Vaadin usa a largura padrão do
   campo e ele fica desalinhado dentro da coluna. */
.wa-usuario-cartao-perfil > * {
  width: 100%;
}

/* Foto maior só dentro do cartão da tela larga (escopado pelo ancestral .wa-usuario-cartao-perfil)
   — a tela pequena usa o mesmo .wa-avatar-circle-wrap/.wa-user-photo-preview sem essa regra,
   então continua exatamente do tamanho de sempre lá. */
.wa-usuario-cartao-perfil .wa-avatar-circle-wrap {
  width: 9rem;
  height: 9rem;
}

.wa-usuario-cartao-perfil .wa-user-photo-preview {
  --vaadin-avatar-size: 9rem;
}

/* Bloco 2: os 7 campos restantes — é um vaadin-form-layout NATIVO (2 colunas via
   setResponsiveSteps no Java), então NÃO se escreve grid aqui. Ele dimensiona os próprios
   campos internamente; a única coisa que o CSS faz é deixá-lo ocupar o espaço restante. */
.wa-usuario-campos-direita {
  flex: 1 1 auto;
  min-width: 0;
}

.wa-avatar-remover-btn:hover,
.wa-avatar-remover-btn:focus-visible {
  transform: translateY(-2px);
  background: #f5f1e5;
  box-shadow: 0 4px 12px -5px rgba(20, 17, 10, 0.35),
              inset 0 0 0 1px rgba(32, 26, 17, 0.28);
}

.wa-avatar-remover-btn:hover::part(button),
.wa-avatar-remover-btn:focus-visible::part(button) {
  color: #14110a !important;
}

.wa-avatar-remover-btn:active {
  transform: translateY(0) scale(0.97);
}

/* TEMP: nome do usuário selecionado, mesma cor do título "Usuarios" (#a39b89), embaixo
   do avatar. Só existe no layout quando há usuário selecionado (setVisible no Java) —
   sem seleção, o componente simplesmente não é renderizado, sem pill vazia sobrando. */
.wa-avatar-nome-selecionado {
  display: inline-block;
  color: #6b5f43;
  background: #f3e6cf;
  font-family: "Spectral", Georgia, "Times New Roman", serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  margin-top: 6px;
  padding: 4px 16px;
  border-radius: 999px;
}

.wa-dashboard-view {
  box-sizing: border-box;
  gap: var(--lumo-space-l);
  background:
    linear-gradient(180deg, rgba(247, 250, 253, 0.78), rgba(247, 250, 253, 0.92)),
    url("img/fundo_aegis.jpg") center center / cover no-repeat fixed;
}

html[theme~="dark"] .wa-dashboard-view {
  background: linear-gradient(180deg, rgba(7, 18, 31, 0.88), rgba(7, 18, 31, 0.96));
}

.wa-dashboard-shell {
  box-sizing: border-box;
  width: min(100%, 76rem);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--lumo-space-l);
}

.wa-dashboard-view .wa-metric-card,
.wa-dashboard-view .wa-dashboard-chart {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(6px);
}

html[theme~="dark"] .wa-dashboard-view .wa-metric-card,
html[theme~="dark"] .wa-dashboard-view .wa-dashboard-chart {
  background: rgba(17, 25, 40, 0.86);
}

.wa-dashboard-hero {
  box-sizing: border-box;
  gap: var(--lumo-space-m);
  padding: clamp(1rem, 2vw, 1.5rem);
  border: 1px solid var(--lumo-contrast-10pct);
  border-radius: var(--lumo-border-radius-l);
  background: linear-gradient(180deg, var(--lumo-primary-color-5pct), var(--lumo-base-color));
  box-shadow: var(--lumo-box-shadow-xs);
}

.wa-dashboard-eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lumo-secondary-text-color);
}

.wa-dashboard-title {
  margin: 0;
  font-size: clamp(1.5rem, 2vw, 2rem);
}

.wa-dashboard-subtitle {
  margin: 0;
  max-width: 52rem;
  color: var(--lumo-secondary-text-color);
  line-height: 1.6;
}

.wa-dashboard-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lumo-space-s);
}

.wa-dashboard-chip {
  box-sizing: border-box;
  min-width: min(100%, 14rem);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--lumo-contrast-10pct);
  border-radius: var(--lumo-border-radius-m);
  background: var(--lumo-base-color);
}

.wa-dashboard-chip-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--lumo-secondary-text-color);
}

.wa-dashboard-chip-value {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.wa-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--lumo-space-m);
  align-items: stretch;
}

.wa-metric-card {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 10rem;
  height: 100%;
  gap: var(--lumo-space-s);
  padding: var(--lumo-space-m);
  border: 1px solid var(--lumo-contrast-10pct);
  border-radius: var(--lumo-border-radius-m);
  background: var(--lumo-base-color);
  box-shadow: var(--lumo-box-shadow-xs);
}

.wa-metric-card-label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lumo-secondary-text-color);
}

.wa-metric-card-value {
  margin: 0;
  font-size: clamp(2rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--lumo-primary-text-color);
}

.wa-metric-card-caption {
  margin: 0;
  color: var(--lumo-secondary-text-color);
  line-height: 1.45;
}

.wa-dashboard-chart {
  box-sizing: border-box;
  width: min(100%, 56rem);
  margin: 0 auto;
  gap: var(--lumo-space-s);
  padding: clamp(1rem, 2vw, 1.25rem);
  border: 1px solid var(--lumo-contrast-10pct);
  border-radius: var(--lumo-border-radius-l);
  background: var(--lumo-base-color);
  box-shadow: var(--lumo-box-shadow-xs);
}

.wa-dashboard-chart-title {
  align-self: center;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  color: var(--lumo-primary-text-color);
}

.wa-dashboard-chart-subtitle {
  margin: 0;
  text-align: center;
  color: var(--lumo-secondary-text-color);
  line-height: 1.5;
}

.wa-dashboard-chart-plot {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--lumo-space-m);
  overflow-x: auto;
  padding: var(--lumo-space-s) 0 var(--lumo-space-xs);
}

.wa-dashboard-chart-empty {
  width: 100%;
  padding: 1rem;
  border-radius: var(--lumo-border-radius-m);
  background: var(--lumo-contrast-5pct);
  color: var(--lumo-secondary-text-color);
  text-align: center;
}

.wa-dashboard-bar {
  box-sizing: border-box;
  flex: 0 0 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--lumo-space-s);
}

.wa-dashboard-bar-value {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--lumo-secondary-text-color);
}

.wa-dashboard-bar-track {
  width: 100%;
  height: 14rem;
  display: flex;
  align-items: flex-end;
  padding: 0.25rem;
  border: 1px solid var(--lumo-contrast-10pct);
  border-radius: calc(var(--lumo-border-radius-m) + 0.125rem);
  background: linear-gradient(180deg, var(--lumo-contrast-5pct), var(--lumo-contrast-10pct));
}

.wa-dashboard-bar-fill {
  width: 100%;
  height: max(0.4rem, calc(var(--wa-dashboard-bar-scale, 0) * 100%));
  border-radius: var(--lumo-border-radius-m);
  background: linear-gradient(180deg, var(--lumo-primary-color-50pct), var(--lumo-primary-color));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.wa-dashboard-bar-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--lumo-secondary-text-color);
}

@media (max-width: 640px) {
  .wa-dashboard-chart {
    width: 100%;
  }

  .wa-dashboard-chart-plot {
    justify-content: flex-start;
  }

  .wa-dashboard-bar {
    flex-basis: 3.5rem;
  }
}

.wa-agent-topology-view {
  gap: var(--lumo-space-m);
}

.wa-agent-topology-summary-shell,
.wa-agent-topology-section {
  box-sizing: border-box;
  width: 100%;
  padding: var(--lumo-space-m);
  border: 1px solid var(--lumo-contrast-10pct);
  border-radius: var(--lumo-border-radius-m);
  background: var(--lumo-base-color);
  box-shadow: var(--lumo-box-shadow-xs);
}

.wa-agent-topology-summary {
  display: block;
  line-height: 1.6;
  color: var(--lumo-body-text-color);
}

.wa-agent-topology-section-title {
  margin: 0 0 0.35rem;
  font-size: 1rem;
}

.wa-agent-topology-section-text,
.wa-agent-topology-tree-hint {
  display: block;
  margin-bottom: var(--lumo-space-s);
  color: var(--lumo-secondary-text-color);
  line-height: 1.5;
}

.wa-agent-topology-row {
  width: 100%;
}

.wa-agent-topology-card-wrap {
  gap: var(--lumo-space-s);
  align-items: stretch;
}

.wa-agent-card {
  box-sizing: border-box;
  width: min(100%, 18rem);
  min-height: 8.5rem;
  display: flex;
  flex-direction: column;
  gap: var(--lumo-space-s);
  padding: 0.9rem 1rem;
  border: 1px solid var(--lumo-contrast-10pct);
  border-radius: var(--lumo-border-radius-m);
  background: linear-gradient(180deg, var(--lumo-base-color), var(--lumo-contrast-5pct));
}

.wa-agent-card-primary {
  border-color: var(--lumo-primary-color-30pct);
  background: linear-gradient(180deg, var(--lumo-primary-color-5pct), var(--lumo-base-color));
}

.wa-agent-card-review {
  border-color: rgba(165, 42, 42, 0.25);
}

.wa-agent-card-empty {
  width: 100%;
  min-height: auto;
  color: var(--lumo-secondary-text-color);
  background: var(--lumo-contrast-5pct);
}

.wa-agent-card-chips {
  gap: 0.35rem;
}

.wa-agent-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: var(--lumo-contrast-10pct);
  font-size: 0.75rem;
  color: var(--lumo-secondary-text-color);
}

.wa-agent-chip-role {
  background: var(--lumo-primary-color-10pct);
  color: var(--lumo-primary-text-color);
  font-weight: 600;
}

.wa-agent-card-title {
  font-weight: 700;
  line-height: 1.4;
  color: var(--lumo-primary-text-color);
}

.wa-agent-card-subtitle {
  color: var(--lumo-secondary-text-color);
  font-size: 0.9rem;
}

.wa-agent-topology-tree-shell {
  display: flex;
  flex-direction: column;
  gap: var(--lumo-space-s);
}

.wa-agent-topology-tree {
  min-height: 18rem;
}

/* Ray Home mock style kit (Vaadin) */
.ray-home-view {
  --ray-ink: #14110a;
  --ray-ink-soft: #6b6557;
  --ray-line: #e8e3d6;
  --ray-line-soft: #f0ece1;
  --ray-bg: #faf8f2;
  --ray-bg-card: #ffffff;
  --ray-brand: #241854;
  --ray-brand-soft: #ede9f7;
  --ray-success: #0f6e56;
  --ray-warning: #b54708;
  --ray-info: #1e3a8a;
  --ray-danger: #9b1c1c;
  min-height: 100vh;
  box-sizing: border-box;
  padding: var(--lumo-space-l);
  gap: clamp(1rem, 2.5vw, 2.5rem);
  background: var(--ray-bg);
  color: var(--ray-ink);
  font-family: "Spectral", Georgia, "Times New Roman", serif;
}

html:not([theme~="dark"]) .wa-dashboard-view.ray-home-view {
  --lumo-primary-text-color: #14110a;
  --lumo-primary-color: #14110a;
  --lumo-primary-color-50pct: rgba(20, 17, 10, 0.5);
  --ray-brand: #14110a;
  --ray-brand-soft: #f3eee2;
  --ray-info: #4a4537;
}

html:not([theme~="dark"]) .wa-dashboard-view .ray-home-user-avatar {
  background: linear-gradient(135deg, #201a11 0%, #4a4537 100%);
}

html:not([theme~="dark"]) .wa-dashboard-view .ray-home-chip--info {
  color: #3b3528;
  background: #eeece4;
}

html:not([theme~="dark"]) .wa-usuarios-view.ray-home-view,
html:not([theme~="dark"]) .wa-clientes-view.ray-home-view,
html:not([theme~="dark"]) .wa-configuracoes-view.ray-home-view,
html:not([theme~="dark"]) .wa-perfil-view.ray-home-view,
html:not([theme~="dark"]) .wa-lancamentos-view.ray-home-view,
html:not([theme~="dark"]) .wa-atalhos-view.ray-home-view,
html:not([theme~="dark"]) .wa-memoria-workspace-view.ray-home-view,
html:not([theme~="dark"]) .wa-projeto-riscos-view.ray-home-view,
html:not([theme~="dark"]) .wa-registros-acesso-view.ray-home-view,
html:not([theme~="dark"]) .wa-projeto-documento-view.ray-home-view,
html:not([theme~="dark"]) .wa-workspace-view.ray-home-view {
  --lumo-primary-text-color: #14110a;
  --lumo-header-text-color: #14110a;
  --lumo-body-text-color: #2f291d;
  --lumo-primary-color: #14110a;
  --lumo-primary-color-50pct: rgba(20, 17, 10, 0.5);
  --ray-brand: #14110a;
  --ray-brand-soft: #f3eee2;
  --ray-info: #4a4537;
  --ray-bg: #f8f5ee;
  --ray-bg-card: #ffffff;
  --ray-line: #e4dece;
  --ray-line-soft: #ede7d9;
}

html:not([theme~="dark"]) .wa-tenants-view.ray-home-view {
  --lumo-primary-text-color: #14110a;
  --lumo-header-text-color: #14110a;
  --lumo-body-text-color: #2f291d;
  --lumo-primary-color: #14110a;
  --lumo-primary-color-50pct: rgba(20, 17, 10, 0.5);
  --ray-brand: #14110a;
  --ray-brand-soft: #f3eee2;
  --ray-info: #4a4537;
  --ray-bg: #f8f5ee;
  --ray-bg-card: #ffffff;
  --ray-line: #e4dece;
  --ray-line-soft: #ede7d9;
}

html:not([theme~="dark"]) .wa-workspaces-view.ray-home-view {
  --lumo-primary-text-color: #14110a;
  --lumo-header-text-color: #14110a;
  --lumo-body-text-color: #2f291d;
  --lumo-primary-color: #14110a;
  --lumo-primary-color-50pct: rgba(20, 17, 10, 0.5);
  --ray-brand: #14110a;
  --ray-brand-soft: #f3eee2;
  --ray-info: #4a4537;
  --ray-bg: #f8f5ee;
  --ray-bg-card: #ffffff;
  --ray-line: #e4dece;
  --ray-line-soft: #ede7d9;
}

html:not([theme~="dark"]) .wa-projetos-view.ray-home-view {
  --lumo-primary-text-color: #14110a;
  --lumo-header-text-color: #14110a;
  --lumo-body-text-color: #2f291d;
  --lumo-primary-color: #14110a;
  --lumo-primary-color-50pct: rgba(20, 17, 10, 0.5);
  --ray-brand: #14110a;
  --ray-brand-soft: #f3eee2;
  --ray-info: #4a4537;
  --ray-bg: #f8f5ee;
  --ray-bg-card: #ffffff;
  --ray-line: #e4dece;
  --ray-line-soft: #ede7d9;
}

html:not([theme~="dark"]) .wa-projetos-view .ray-home-project-row:hover {
  box-shadow: 0 4px 18px rgba(0,0,0,.06);
  border-color: rgba(20,17,10,.18);
}

html:not([theme~="dark"]) .wa-projetos-view .ray-home-chip--info {
  color: #0c447c;
  background: #e6f1fb;
}

html:not([theme~="dark"]) .wa-projetos-view .wa-admin-summary-card,
html:not([theme~="dark"]) .wa-projetos-view .wa-admin-card,
html:not([theme~="dark"]) .wa-projetos-view .wa-admin-toolbar,
html:not([theme~="dark"]) .wa-projetos-view .wa-admin-grid-shell .wa-crud-grid {
  background: rgba(255, 255, 255, 0.94);
}

/* Lista de projetos sem card branco — fundo bege da página (igual ao workspace) */
html:not([theme~="dark"]) .wa-projetos-view .ray-home-project-list {
  background: transparent;
}

/* Espaçamento do bloco de filtros: menos em cima, mais embaixo (antes dos cards) */
.wa-projetos-bloco {
  margin-top: -10px;
}

.wa-projetos-bloco .ray-home-filters {
  margin-bottom: 16px;
}

html:not([theme~="dark"]) .wa-projetos-view .ray-home-project-row {
  border-color: #e8e2d3;
}

html:not([theme~="dark"]) .wa-projetos-view .wa-admin-card-subtitle,
html:not([theme~="dark"]) .wa-projetos-view .wa-admin-summary-helper {
  color: #5f5749;
}

html:not([theme~="dark"]) .wa-projetos-view .ray-home-stat-value {
  color: #3b3528;
}

html:not([theme~="dark"]) .wa-projetos-view .ray-home-code-chip {
  color: #3b3528;
  background: #f2eee4;
}

html:not([theme~="dark"]) .wa-projeto-cadastro-view.ray-home-view {
  --lumo-primary-text-color: #14110a;
  --lumo-header-text-color: #14110a;
  --lumo-body-text-color: #2f291d;
  --lumo-primary-color: #14110a;
  --lumo-primary-color-50pct: rgba(20, 17, 10, 0.5);
  --ray-brand: #14110a;
  --ray-brand-soft: #f3eee2;
  --ray-info: #4a4537;
  --ray-bg: #f8f5ee;
  --ray-bg-card: #ffffff;
  --ray-line: #e4dece;
  --ray-line-soft: #ede7d9;
}

html:not([theme~="dark"]) .wa-projeto-cadastro-view :is(
  .wa-projeto-cadastro-toolbar,
  .wa-projeto-cadastro-meta-card,
  .wa-projeto-cadastro-card,
  .wa-chat-central-card,
  .wa-chat-central-file-card
) {
  background: rgba(255, 255, 255, 0.94);
}

html:not([theme~="dark"]) .wa-projeto-cadastro-view .wa-projeto-cadastro-card-title,
html:not([theme~="dark"]) .wa-projeto-cadastro-view .wa-projeto-cadastro-meta-value,
html:not([theme~="dark"]) .wa-projeto-cadastro-view .wa-chat-central-card-title,
html:not([theme~="dark"]) .wa-projeto-cadastro-view .wa-chat-central-file-title {
  color: #14110a;
}

html:not([theme~="dark"]) .wa-projeto-cadastro-view .wa-projeto-cadastro-card-subtitle,
html:not([theme~="dark"]) .wa-projeto-cadastro-view .wa-projeto-cadastro-meta-label,
html:not([theme~="dark"]) .wa-projeto-cadastro-view .wa-projeto-cadastro-file-meta-row,
html:not([theme~="dark"]) .wa-projeto-cadastro-view .wa-chat-central-card-meta,
html:not([theme~="dark"]) .wa-projeto-cadastro-view .wa-chat-central-card-details {
  color: #5f5749;
}


html:not([theme~="dark"]) .wa-projeto-cadastro-view :is(.wa-projeto-cadastro-toolbar, .wa-projeto-cadastro-file-actions)
  vaadin-button:not([theme~="primary"]):not([theme~="success"]):not([theme~="error"]):not([theme~="contrast"])::part(button) {
  color: #3b3528;
  transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

html:not([theme~="dark"]) .wa-projeto-cadastro-view :is(.wa-projeto-cadastro-toolbar, .wa-projeto-cadastro-file-actions)
  vaadin-button:not([theme~="primary"]):not([theme~="success"]):not([theme~="error"]):not([theme~="contrast"]):hover::part(button),
html:not([theme~="dark"]) .wa-projeto-cadastro-view :is(.wa-projeto-cadastro-toolbar, .wa-projeto-cadastro-file-actions)
  vaadin-button:not([theme~="primary"]):not([theme~="success"]):not([theme~="error"]):not([theme~="contrast"]):focus-visible::part(button) {
  color: #1f1a10;
  background: #eeece4;
  box-shadow: inset 0 0 0 1px #c8c0ae;
}

html:not([theme~="dark"]) .wa-agentes-view.ray-home-view {
  --lumo-primary-text-color: #14110a;
  --lumo-primary-color: #14110a;
  --lumo-primary-color-50pct: rgba(20, 17, 10, 0.5);
  --ray-brand: #14110a;
  --ray-brand-soft: #f3eee2;
  --ray-info: #4a4537;
}

html:not([theme~="dark"]) .wa-agentes-view .ray-home-chip--info {
  color: #3b3528;
  background: #eeece4;
}

/* Tela de LLMs no mesmo padrão visual do Home/Workspace/Agentes: fundo creme,
   tinta escura, botões primários pretos em vez do azul padrão do Lumo. */
html:not([theme~="dark"]) .wa-llms-view.ray-home-view {
  --lumo-primary-text-color: #14110a;
  --lumo-primary-color: #14110a;
  --lumo-primary-color-50pct: rgba(20, 17, 10, 0.5);
  --ray-brand: #14110a;
  --ray-brand-soft: #f3eee2;
  --ray-info: #4a4537;
}

html:not([theme~="dark"]) .wa-agentes-view .wa-admin-grid-shell .wa-crud-grid {
  background: rgba(255, 255, 255, 0.94);
}

.wa-agentes-view.ray-home-view.wa-admin-view {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.wa-agentes-view .wa-agentes-shell {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.wa-agentes-view .wa-agentes-content-shell {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

/* Ocupa a área vertical restante (hero + resumo já consumiram o topo). */
.wa-agentes-view .wa-agentes-main-split {
  flex: 1 1 auto;
  min-height: max(12rem, calc(100vh - 11rem));
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.wa-agentes-view .wa-agentes-content-scroller {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.wa-agentes-view .wa-agentes-content-pane {
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

@supports (height: 100dvh) {
  .wa-agentes-view .wa-agentes-main-split {
    min-height: max(12rem, calc(100dvh - 11rem));
  }
}

/*
 * Estratégia com SplitLayout:
 * - coluna da lista de agentes separada à esquerda;
 * - largura máxima do painel: 234px.
 */
.wa-agentes-view .wa-agentes-sidebar {
  flex: 0 0 auto;
  width: 234px;
  min-width: 234px;
  max-width: 234px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.wa-agentes-view .wa-agentes-sidebar-card {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  height: 100%;
  max-height: none;
  overflow: hidden;
}

.wa-agentes-view .wa-agentes-sidebar-card .wa-admin-card-header {
  flex-shrink: 0;
}

/* Remover margens do bloco lateral "Agentes" */
.wa-agentes-view .wa-agentes-sidebar,
.wa-agentes-view .wa-agentes-sidebar-card,
.wa-agentes-view .wa-agentes-sidebar-card .wa-admin-card-header,
.wa-agentes-view .wa-agentes-sidebar-card .wa-admin-card-heading,
.wa-agentes-view .wa-agentes-sidebar-card .wa-admin-card-title,
.wa-agentes-view .wa-agentes-sidebar-card .wa-admin-card-subtitle,
.wa-agentes-view .wa-agentes-sidebar-card .wa-agentes-sidebar-list-shell {
  margin: 0;
}

/* Shell da lista lateral — mesmo padrão visual que a lista de Steps (list-box com borda). */
.wa-agentes-view .wa-agentes-sidebar-list-shell {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.wa-agentes-view .wa-agentes-sidebar-list-col {
  flex: 1 1 auto;
  min-height: 0;
}

.wa-agentes-view .wa-agentes-sidebar-list-col vaadin-list-box.wa-pipeline-steps-list {
  flex: 1 1 auto;
  min-height: min(12rem, 40vh);
  max-height: none;
}

.wa-agentes-view vaadin-list-box.wa-agentes-sidebar-list-grow {
  flex: 1 1 auto;
  min-height: 0;
}

/* Tipografia responsiva do card lateral Agentes (reduzida adicionalmente) */
.wa-agentes-view .wa-agentes-sidebar-card .wa-admin-card-title {
  font-size: clamp(0.64rem, 0.592rem + 0.224vw, 0.864rem);
  line-height: 1.25;
}

.wa-agentes-view .wa-agentes-sidebar-card .wa-admin-card-subtitle {
  font-size: clamp(0.488rem, 0.448rem + 0.144vw, 0.576rem);
  line-height: 1.45;
}


.wa-agentes-view .wa-admin-hero .ray-home-subtitle {
  font-size: clamp(0.82rem, 0.76rem + 0.28vw, 1rem);
}

.wa-agentes-view .wa-agentes-bloco-fullwidth {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

.wa-agentes-view .wa-agentes-bloco-fullwidth .wa-admin-grid-shell {
  width: 100%;
}

.wa-agentes-view .wa-agentes-bloco-fullwidth .wa-crud-grid {
  width: 100%;
}

.wa-agentes-view .wa-agentes-main-split {
  width: 100%;
}

.wa-agentes-view .wa-agentes-sidebar {
  flex: 0 0 auto;
  width: min(100%, 17rem);
  min-width: min(100%, 12rem);
}

.wa-agentes-view .wa-agentes-sidebar-list-shell {
  max-height: min(70vh, 36rem);
  overflow: auto;
}

/* Lista de agentes (lateral): mantém largura base */
:is(.wa-agentes-view, .wa-agentes-steps-view)
  .wa-pipeline-steps-sidebar.wa-agentes-sidebar-list-col {
  flex-shrink: 0;
  width: min(100%, 17rem);
  max-width: 18rem;
}

/* Lista de Steps: +20% em relação a 17rem / 18rem */
:is(.wa-agentes-view, .wa-agentes-steps-view)
  .wa-pipeline-steps-sidebar:not(.wa-agentes-sidebar-list-col) {
  flex-shrink: 0;
  width: min(100%, 20.4rem);
  max-width: 21.6rem;
}

.wa-agentes-steps-view .wa-pipeline-steps-sidebar:not(.wa-agentes-sidebar-list-col) {
  --wa-sticky-top: var(--wa-steps-sidebar-sticky-top);
  --wa-sticky-max-height: var(--wa-steps-sidebar-sticky-max-height);
}

.wa-sticky-panel {
  position: sticky;
  top: var(--wa-sticky-top, var(--wa-sticky-top-default));
  align-self: flex-start;
  max-height: var(--wa-sticky-max-height, var(--wa-sticky-max-height-default));
  overflow: auto;
}

.wa-agentes-view .wa-pipeline-steps-list-caption {
  display: block;
  font-weight: 600;
  font-size: var(--lumo-font-size-xs);
  color: var(--lumo-secondary-text-color);
}

.wa-agentes-view vaadin-list-box.wa-pipeline-steps-list {
  width: 100%;
  min-height: 10rem;
  max-height: min(32rem, 52vh);
  border: 1px solid var(--lumo-contrast-10pct);
  border-radius: var(--lumo-border-radius-m);
  box-sizing: border-box;
}

html:not([theme~="dark"]) .wa-projetos-view .wa-admin-card-title,
html:not([theme~="dark"]) .wa-agentes-view .wa-admin-card-title {
  color: #14110a;
  font-weight: 500;
}

html:not([theme~="dark"]) .wa-projetos-view .ray-home-project-name,
html:not([theme~="dark"]) .wa-chat-central-view .wa-chat-central-title,
html:not([theme~="dark"]) .wa-chat-central-view .wa-chat-central-card-title,
html:not([theme~="dark"]) .wa-chat-central-view .wa-chat-central-file-title,
html:not([theme~="dark"]) .wa-chat-central-view .wa-chat-central-steps-title {
  color: #14110a;
}

html:not([theme~="dark"]) .wa-agentes-view :is(.wa-admin-toolbar, .wa-admin-hero-actions) vaadin-button:not([theme~="primary"]):not([theme~="success"]):not([theme~="error"])::part(button),
html:not([theme~="dark"]) .wa-projetos-view :is(.wa-admin-toolbar, .wa-admin-hero-actions) vaadin-button:not([theme~="primary"]):not([theme~="success"]):not([theme~="error"])::part(button),
html:not([theme~="dark"]) .wa-chat-central-view .wa-crud-toolbar vaadin-button:not([theme~="primary"]):not([theme~="success"]):not([theme~="error"])::part(button),
html:not([theme~="dark"]) .wa-chat-view .wa-chat-toolbar vaadin-button:not([theme~="primary"]):not([theme~="success"]):not([theme~="error"])::part(button) {
  color: #3b3528;
  transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

html:not([theme~="dark"]) .wa-agentes-view :is(.wa-admin-toolbar, .wa-admin-hero-actions) vaadin-button:not([theme~="primary"]):not([theme~="success"]):not([theme~="error"]):hover::part(button),
html:not([theme~="dark"]) .wa-agentes-view :is(.wa-admin-toolbar, .wa-admin-hero-actions) vaadin-button:not([theme~="primary"]):not([theme~="success"]):not([theme~="error"]):focus-visible::part(button),
html:not([theme~="dark"]) .wa-projetos-view :is(.wa-admin-toolbar, .wa-admin-hero-actions) vaadin-button:not([theme~="primary"]):not([theme~="success"]):not([theme~="error"]):hover::part(button),
html:not([theme~="dark"]) .wa-projetos-view :is(.wa-admin-toolbar, .wa-admin-hero-actions) vaadin-button:not([theme~="primary"]):not([theme~="success"]):not([theme~="error"]):focus-visible::part(button),
html:not([theme~="dark"]) .wa-chat-central-view .wa-crud-toolbar vaadin-button:not([theme~="primary"]):not([theme~="success"]):not([theme~="error"]):hover::part(button),
html:not([theme~="dark"]) .wa-chat-central-view .wa-crud-toolbar vaadin-button:not([theme~="primary"]):not([theme~="success"]):not([theme~="error"]):focus-visible::part(button),
html:not([theme~="dark"]) .wa-chat-view .wa-chat-toolbar vaadin-button:not([theme~="primary"]):not([theme~="success"]):not([theme~="error"]):hover::part(button),
html:not([theme~="dark"]) .wa-chat-view .wa-chat-toolbar vaadin-button:not([theme~="primary"]):not([theme~="success"]):not([theme~="error"]):focus-visible::part(button) {
  color: #1f1a10;
  background: #eeece4;
  box-shadow: inset 0 0 0 1px #c8c0ae;
}

html:not([theme~="dark"]) .wa-chat-view .wa-chat-history-item::part(label) {
  color: #1f1a10;
}

html:not([theme~="dark"]) .wa-chat-view .wa-chat-history-item::part(prefix) {
  color: #6b6557;
}

html:not([theme~="dark"]) .wa-chat-view .wa-chat-history-item:hover::part(button),
html:not([theme~="dark"]) .wa-chat-view .wa-chat-history-item:focus-visible::part(button) {
  background: #eeece4;
  box-shadow: inset 0 0 0 1px #c8c0ae;
}

.ray-home-shell {
  width: min(100%, 80rem);
  margin: 0 auto;
}

.ray-home-display {
  font-family: "Spectral", Georgia, "Times New Roman", serif;
  letter-spacing: -0.02em;
}

.ray-home-topbar {
  box-sizing: border-box;
  width: 100%;
  padding: 0.7rem 1.2rem;
  border: 1px solid var(--ray-line);
  border-radius: calc(var(--lumo-border-radius-l) + 0.1rem);
  background: rgba(250, 248, 242, 0.9);
  backdrop-filter: blur(8px);
}

html[theme~="dark"] .ray-home-topbar {
  background: color-mix(in srgb, var(--ray-bg-card) 92%, transparent);
  border-color: var(--ray-line);
}

.ray-home-topbar-row {
  display: flex;
  align-items: center;
  gap: var(--lumo-space-m);
  flex-wrap: wrap;
}

.ray-home-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-width: max-content;
}

.ray-home-brand-mark {
  width: 2rem;
  height: 2rem;
  border-radius: 0.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ray-brand);
  color: #fff;
  font-size: 1.1rem;
  font-family: "Spectral", Georgia, "Times New Roman", serif;
  font-style: italic;
}

.ray-home-brand-beta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.35rem;
  padding: 0.1rem 0.45rem;
  background: var(--ray-brand-soft);
  color: var(--ray-brand);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ray-home-brand-name {
  font-size: 1.4rem;
}

vaadin-text-field.ray-home-search {
  min-width: min(100%, 26rem);
  max-width: 32rem;
  flex: 1 1 16rem;
}

vaadin-text-field.ray-home-search::part(input-field) {
  border: 1px solid var(--ray-line);
  border-radius: 0.55rem;
  background: #fff;
  min-height: 2.45rem;
  box-shadow: none;
}

vaadin-text-field.ray-home-search::part(input-field):hover {
  border-color: #d7d0bf;
}

vaadin-text-field.ray-home-search::part(input-field):focus-within {
  border-color: var(--ray-brand);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ray-brand) 42%, #fff);
}

vaadin-text-field.ray-home-search::part(value) {
  color: var(--ray-ink);
  font-size: 0.85rem;
}

html[theme~="dark"] vaadin-text-field.ray-home-search::part(input-field) {
  background: var(--ray-bg-card);
  border-color: var(--ray-line);
}

html[theme~="dark"] vaadin-text-field.ray-home-search::part(input-field):hover {
  border-color: rgba(255, 255, 255, 0.22);
}

html[theme~="dark"] vaadin-text-field.ray-home-search::part(input-field):focus-within {
  border-color: var(--ray-brand);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ray-brand) 48%, transparent);
}

.ray-home-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  padding: 0.15rem 0.4rem;
  border: 1px solid var(--ray-line);
  border-radius: 0.35rem;
  background: var(--ray-bg);
  color: var(--ray-ink-soft);
  font-size: 0.72rem;
}

.ray-home-topbar-right {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.ray-home-icon-btn {
  color: var(--ray-ink-soft);
}

.ray-home-user-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  border: 1px solid var(--ray-line);
  border-radius: 999px;
  background: #fff;
  padding: 0.2rem 0.65rem 0.2rem 0.2rem;
}

.ray-home-user-avatar {
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #241854 0%, #6b2c91 100%);
}

.ray-home-user-name {
  font-size: 0.82rem;
  font-weight: 500;
}

.ray-home-greeting {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--lumo-space-l);
}

.ray-home-eyebrow {
  font-size: 0.74rem;
  color: var(--ray-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ray-home-title {
  margin: 0.15rem 0 0;
  font-size: 30px;
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #a39b89 !important;
}

.ray-home-subtitle {
  margin: 0.75rem 0 0;
  max-width: 38rem;
  color: var(--ray-ink-soft);
  line-height: 1.55;
}

/* ── Dropzone ──────────────────────────────────────────────────────────── */

.ray-home-dropzone {
  background: #ffffff;
  border: 1.5px dashed rgba(20, 17, 10, 0.15);
  border-radius: 14px;
  padding: 24px 28px;
  display: flex;
  align-items: center;
  gap: 22px;
  transition: border-color 0.15s, background 0.15s;
  margin-bottom: 0.5rem;
}

.ray-home-dropzone:hover {
  border-color: #6b6557;
  background: rgba(20, 17, 10, 0.012);
}

.ray-home-dropzone-icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  border-radius: 14px;
  background: #f5f1e5;
  color: #6b6557;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ray-home-dropzone-icon vaadin-icon {
  width: 26px;
  height: 26px;
}

.ray-home-dropzone-info {
  flex: 1;
  min-width: 0;
}

.ray-home-dropzone-title {
  font-size: 1.08rem !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em;
  margin: 0 0 4px !important;
  line-height: 1.3 !important;
  color: #14110a;
}

.ray-home-dropzone-desc {
  font-size: 0.82rem;
  color: #6b6557;
  line-height: 1.5;
  margin: 0;
}

.ray-home-dropzone-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
  margin-left: 20px;
}

vaadin-button.ray-home-dropzone-btn-primary::part(button) {
  padding: 7px 14px;
  background: #14110a;
  color: #ffffff;
  border: none;
  border-radius: 7px;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: none;
  transition: background 0.15s;
}

vaadin-button.ray-home-dropzone-btn-primary:hover::part(button) {
  background: #f5f1e5;
  color: #14110a;
}

vaadin-button.ray-home-dropzone-btn-outline::part(button) {
  padding: 7px 14px;
  background: #ffffff;
  color: #14110a;
  border: 0.5px solid rgba(20, 17, 10, 0.18);
  border-radius: 7px;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: none;
  transition: background 0.15s, color 0.15s;
}

vaadin-button.ray-home-dropzone-btn-outline:hover::part(button) {
  background: #f5f1e5;
  color: #14110a;
}

vaadin-button.ray-home-primary::part(button) {
  border-radius: 0.55rem;
  padding: 0.65rem 1rem;
  border: 1px solid var(--ray-brand);
  background: var(--ray-brand);
  color: #fff;
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(20, 17, 10, 0.08);
}

vaadin-button.ray-home-primary::part(button):hover {
  background: #1d1245;
}

.ray-home-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--ray-line);
  border-radius: 0.8rem;
  overflow: hidden;
  background: var(--ray-line);
}

.ray-home-stat-card {
  box-sizing: border-box;
  padding: 1rem 1.15rem;
  background: var(--ray-bg-card);
}

.ray-home-stat-label {
  font-size: 0.74rem;
  color: var(--ray-ink-soft);
  margin-bottom: 0.55rem;
}

.ray-home-stat-value {
  margin: 0;
  font-family: "Spectral", Georgia, "Times New Roman", serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.02em;
}

.ray-home-delta {
  display: inline-flex;
  margin-left: 0.5rem;
  padding: 0.14rem 0.4rem;
  border-radius: 0.3rem;
  font-size: 0.7rem;
  font-weight: 600;
}

.ray-home-delta--up {
  color: var(--ray-success);
  background: #e8f5ef;
}

.ray-home-delta--down {
  color: var(--ray-danger);
  background: #fde9e9;
}

.ray-home-delta--flat {
  color: var(--ray-ink-soft);
  background: #f3eee2;
}

.ray-home-section-head {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 1rem;
}

.ray-home-section-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: nowrap;
  width: 100%;
}

.ray-home-section-title {
  margin: 0;
  font-family: "Spectral", Georgia, "Times New Roman", serif;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.ray-home-section-subtitle {
  margin: 0.25rem 0 0;
  color: var(--ray-ink-soft);
  font-size: 13px;
}

.ray-home-workspaces-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.ray-home-workspace-card {
  --ray-accent: var(--ray-success);
  --ray-accent-soft: #e8f5ef;
  position: relative;
  box-sizing: border-box;
  border-radius: 0.85rem;
  border: 1px solid var(--ray-line);
  padding: 1.3rem 1.25rem 1.15rem;
  background: var(--ray-bg-card);
  cursor: pointer;
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms ease, border-color 220ms ease;
}

.ray-home-workspace-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  border-radius: 0.85rem 0.85rem 0 0;
  background: var(--ray-accent);
}

.ray-home-workspace-card:hover {
  transform: translateY(-2px);
  border-color: var(--ray-accent);
  box-shadow: 0 12px 28px -12px rgba(20, 17, 10, 0.14), 0 2px 6px -2px rgba(20, 17, 10, 0.06);
}

.ray-home-workspace-glyph {
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 0.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ray-accent-soft);
  color: var(--ray-accent);
  font-size: 1.2rem;
  margin-bottom: 0.9rem;
}

.ray-home-workspace-title {
  margin: 0 0 0.25rem;
  font-family: "Spectral", Georgia, "Times New Roman", serif;
  font-size: 1.1rem;
}

.ray-home-workspace-description {
  margin: 0 0 1rem;
  color: var(--ray-ink-soft);
  font-size: 0.82rem;
  line-height: 1.5;
}

.ray-home-workspace-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.8rem;
  border-top: 1px solid var(--ray-line-soft);
}

.ray-home-workspace-counters {
  display: inline-flex;
  align-items: stretch;
  gap: 0.85rem;
}

.ray-home-workspace-metric {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.ray-home-workspace-metric-label {
  font-size: 0.7rem;
  color: var(--ray-ink-soft);
}

.ray-home-workspace-metric-value {
  font-family: "Spectral", Georgia, "Times New Roman", serif;
  font-size: 1rem;
  font-weight: 500;
}

.ray-home-workspace-arrow {
  transition: transform 200ms ease;
}

.ray-home-workspace-card:hover .ray-home-workspace-arrow {
  transform: translateX(3px);
}

.ray-home-workspace-agent {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.8rem;
  color: var(--ray-ink-soft);
  font-size: 0.72rem;
}

.ray-home-workspace-agent-dot {
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 50%;
}

.wa-workspace-shell {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.5rem);
}

.wa-workspaces-view .wa-workspaces-layout {
  display: grid;
  grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
  gap: clamp(0.9rem, 1.8vw, 1.35rem);
  align-items: start;
}

.wa-workspaces-view .wa-workspaces-sidebar {
  min-width: 0;
  position: sticky;
  top: var(--wa-sticky-top-default);
  align-self: start;
  max-height: var(--wa-sticky-max-height-default);
}

.wa-workspaces-view .wa-workspaces-sidebar-card {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #e8e3d6;
  border-radius: 12px;
}

html[theme~="dark"] .wa-workspaces-view .wa-workspaces-sidebar-card {
  background: var(--lumo-contrast-5pct);
  border-color: var(--lumo-contrast-15pct);
}

.wa-workspaces-view .wa-workspaces-sidebar-card .wa-admin-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
  flex-shrink: 0;
}

.wa-workspaces-view .wa-workspaces-sidebar-card .wa-admin-card-title {
  font-family: var(--lumo-font-family);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: normal;
}

.wa-workspaces-view .wa-workspaces-sidebar-card vaadin-text-field::part(input-field) {
  background: #f7f4ec;
}

/* Mesmo bege do resto da tela (não o cinza padrão do Lumo) nos campos do formulário de
   Adicionar/Editar campo customizado — escopado só nesse form via wa-campo-customizado-form. */
.wa-campo-customizado-form vaadin-text-field::part(input-field),
.wa-campo-customizado-form vaadin-text-area::part(input-field),
.wa-campo-customizado-form vaadin-combo-box::part(input-field) {
  background: #f7f4ec;
}

.wa-workspaces-view .wa-workspaces-sidebar-page-indicator {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: #ede9f7;
  color: #241854;
  font-size: 0.72rem;
  font-weight: 500;
}

html[theme~="dark"] .wa-workspaces-view .wa-workspaces-sidebar-page-indicator {
  background: rgba(175, 169, 236, 0.22);
  color: #ded9fb;
}

.wa-workspaces-view .wa-workspaces-sidebar-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 0;
  flex: 1 1 auto;
}

.wa-workspaces-view .wa-workspaces-sidebar-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  position: relative;
  padding: 0.14rem 0.28rem;
  scrollbar-width: thin;
  scrollbar-color: var(--lumo-contrast-40pct) transparent;
}

.wa-workspaces-view .wa-workspaces-sidebar-list::-webkit-scrollbar {
  width: 0.52rem;
}

.wa-workspaces-view .wa-workspaces-sidebar-list::-webkit-scrollbar-track {
  background: transparent;
}

.wa-workspaces-view .wa-workspaces-sidebar-list::-webkit-scrollbar-thumb {
  background-color: var(--lumo-contrast-30pct);
  border-radius: 999px;
}

.wa-workspaces-view .wa-workspaces-sidebar-list::-webkit-scrollbar-thumb:hover {
  background-color: var(--lumo-contrast-50pct);
}

.wa-workspaces-view .wa-workspaces-sidebar-item {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  margin: 0;
  text-align: left;
  border-radius: 0.5rem;
  padding: 0.5rem 0.7rem;
  cursor: pointer;
  transition: background-color 0.12s ease;
  outline: none;
}

.wa-workspaces-view .wa-workspaces-sidebar-item:not(.is-selected):hover,
.wa-workspaces-view .wa-workspaces-sidebar-item:not(.is-selected):focus-visible {
  background: #f3e6cf;
}

.wa-workspaces-view .wa-workspaces-sidebar-item-label {
  display: block;
  width: 100%;
  text-align: left;
  color: var(--wa-admin-sidebar-list-text-color);
}

.wa-workspaces-view .wa-workspaces-sidebar-card .wa-admin-card-title {
  color: var(--wa-admin-sidebar-list-text-color);
}

.wa-workspaces-view .wa-workspaces-sidebar-item.is-selected {
  background: #f3e6cf;
  font-weight: 500;
}

html[theme~="dark"] .wa-workspaces-view .wa-workspaces-sidebar-item.is-selected {
  background: rgba(243, 230, 207, 0.16);
  color: #f6f3ea;
}

.wa-workspaces-view .wa-workspaces-sidebar-item.is-selected .wa-workspaces-sidebar-item-label {
  font-weight: 500;
  color: #14110a;
}

.wa-workspaces-view .wa-workspaces-sidebar-item.is-selected .wa-workspaces-sidebar-item-label::before {
  content: "\2713";
  display: inline-block;
  margin-inline-end: 0.4rem;
  color: #27500a;
  font-weight: 700;
}

html[theme~="dark"] .wa-workspaces-view .wa-workspaces-sidebar-item.is-selected .wa-workspaces-sidebar-item-label {
  color: #f6f3ea;
}

html[theme~="dark"] .wa-workspaces-view .wa-workspaces-sidebar-item.is-selected .wa-workspaces-sidebar-item-label::before {
  color: #97c459;
}

.wa-workspaces-view .wa-workspaces-sidebar-highlight {
  font-weight: 700;
  background-color: var(--lumo-primary-color-10pct);
  border-radius: 0.22rem;
  padding: 0 0.08rem;
}

html[theme~="dark"] .wa-workspaces-view .wa-workspaces-sidebar-highlight {
  background-color: rgba(110, 168, 255, 0.24);
}

/* Padrão canônico: botões Vaadin usados como listas devem manter alinhamento à esquerda. */
:is(
  .wa-workspaces-view .wa-workspaces-sidebar-item,
  .wa-chat-view .wa-chat-history-item,
  .wa-agente-builder-view .wa-builder-agente-open-btn,
  .wa-agente-builder-view .wa-builder-step-open-btn,
  .wa-agente-builder-view .wa-builder-conversa-open-btn
) {
  text-align: left !important;
}

:is(
  .wa-workspaces-view .wa-workspaces-sidebar-item,
  .wa-chat-view .wa-chat-history-item,
  .wa-agente-builder-view .wa-builder-agente-open-btn,
  .wa-agente-builder-view .wa-builder-step-open-btn,
  .wa-agente-builder-view .wa-builder-conversa-open-btn
)::part(button) {
  justify-content: flex-start;
  text-align: left !important;
}

:is(
  .wa-workspaces-view .wa-workspaces-sidebar-item,
  .wa-chat-view .wa-chat-history-item,
  .wa-agente-builder-view .wa-builder-agente-open-btn,
  .wa-agente-builder-view .wa-builder-step-open-btn,
  .wa-agente-builder-view .wa-builder-conversa-open-btn
)::part(label) {
  width: 100%;
  text-align: left !important;
}

.wa-workspaces-view .wa-workspaces-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.9rem, 1.8vw, 1.35rem);
}

.wa-workspaces-view .wa-workspaces-paginacao-wrapper {
  margin-top: 0.85rem;
}

@media (max-width: 1100px) {
  .wa-workspaces-view .wa-workspaces-layout {
    grid-template-columns: 1fr;
  }

  .wa-workspaces-view .wa-workspaces-sidebar {
    position: static;
    max-height: none;
  }
}

/* Tema claro: alinhar títulos ao ink ray-home. No escuro não forçar — senão h1–h3 ficam ilegíveis (#14110a). */
html:not([theme~="dark"]) .wa-workspace-view {
  --lumo-primary-text-color: #14110a;
}

.wa-workspace-hero {
  padding-bottom: 0.25rem;
}

.wa-workspace-hero-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.wa-workspace-agent-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

/* Telas estreitas: 1 card por linha */
@media (max-width: 720px) {
  .wa-workspace-agent-grid {
    grid-template-columns: 1fr;
  }
}

/* Modo lista: uma coluna, cards empilhados em largura total */
.wa-workspace-agent-grid--lista {
  grid-template-columns: 1fr;
}

/* Grade: card vertical */
.wa-workspace-agent-card {
  width: 100%;
  min-height: 15rem;
  display: flex;
  flex-direction: column;
}

/* ── Modo lista ─────────────────────────────────────────────── */
.wa-workspace-agent-card--lista {
  min-height: 0;
}

/* Topo: identidade | meta | status */
.wa-workspace-agent-lista-top {
  display: flex;
  align-items: center;
  gap: 20px;
}

.wa-workspace-agent-identidade {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.wa-workspace-agent-identidade-textos {
  min-width: 0;
}

.wa-workspace-agent-identidade-textos .ray-home-workspace-description {
  margin: 2px 0 0;
}

.wa-workspace-agent-card--lista .wa-workspace-agent-metarow,
.wa-workspace-agent-card--lista .wa-workspace-agent-status {
  flex-shrink: 0;
}

/* Base: steps | documentos, lado a lado */
.wa-workspace-agent-lista-bottom {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.wa-workspace-agent-lista-bottom .wa-workspace-agent-steps {
  flex: 1;
  min-width: 0;
  margin-top: 0;
}

.wa-workspace-agent-lista-bottom .wa-workspace-agent-docs {
  width: 300px;
  flex-shrink: 0;
}

.wa-workspace-agent-lista-bottom .wa-workspace-agent-steps + .wa-workspace-agent-docs {
  border-left: 0.5px solid rgba(20, 17, 10, 0.10);
  padding-left: 24px;
}

/* Cabeçalho de seção: título à esquerda, toggle à direita (mesma linha) */
.wa-workspace-secao-titulo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Toggle de visualização (grade ↔ lista) — só ícones, sem fundo/borda */
.wa-workspace-view-toggle {
  display: inline-flex;
  gap: 2px;
  flex-shrink: 0;
}

.wa-workspace-view-toggle-btn {
  min-width: 0 !important;
  width: 36px;
  height: 32px;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: #6b6557 !important;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}

.wa-workspace-view-toggle-btn vaadin-icon {
  width: 22px;
  height: 22px;
}

.wa-workspace-view-toggle-btn:hover {
  background: #f5f1e5 !important;
}

.wa-workspace-view-toggle-btn--ativo {
  color: #ffffff !important;
  background: #14110a !important;
}

.wa-workspace-view-toggle-btn--ativo:hover {
  background: #14110a !important;
}

/* Remove a barra colorida grossa do topo (sem função) nos cards de agente */
.wa-workspace-agent-card::before {
  display: none;
}

/* Hover neutro (padrão do projeto): borda escurece levemente, sem cor de accent */
.wa-workspace-agent-card:hover {
  border-color: rgba(20, 17, 10, 0.2);
}

/* Feedback de clique: leve afundada */
.wa-workspace-agent-card:active {
  transform: translateY(-1px) scale(0.992);
}

/* 2) Realce da sequência de steps quando passa o mouse no card inteiro */
.wa-workspace-agent-card:hover .wa-workspace-agent-pipeline-pill {
  background: #efe8d6;
}

.wa-workspace-agent-card:hover .wa-workspace-agent-pipeline-arrow {
  color: #6b6557;
}

/* 3) Entrada suave e escalonada dos cards ao carregar */
@keyframes wa-agent-card-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.wa-workspace-agent-card {
  animation: wa-agent-card-in 340ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.wa-workspace-agent-grid .wa-workspace-agent-card:nth-child(1) { animation-delay: 0ms; }
.wa-workspace-agent-grid .wa-workspace-agent-card:nth-child(2) { animation-delay: 70ms; }
.wa-workspace-agent-grid .wa-workspace-agent-card:nth-child(3) { animation-delay: 140ms; }
.wa-workspace-agent-grid .wa-workspace-agent-card:nth-child(4) { animation-delay: 210ms; }
.wa-workspace-agent-grid .wa-workspace-agent-card:nth-child(5) { animation-delay: 280ms; }
.wa-workspace-agent-grid .wa-workspace-agent-card:nth-child(n+6) { animation-delay: 340ms; }

@media (prefers-reduced-motion: reduce) {
  .wa-workspace-agent-card { animation: none; }
}

/* Meta-infos do card de agente (modelo · steps · temperatura · tokens) — estilo do modal */
.wa-workspace-agent-metarow {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.wa-workspace-agent-metaitem {
  font-size: 13px;
  color: #6b6557;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: transform 140ms cubic-bezier(0.16, 1, 0.3, 1), color 140ms ease;
}

.wa-workspace-agent-metaitem:hover {
  transform: translateY(-2px);
  color: #14110a;
}

.wa-workspace-agent-metaitem-icon {
  display: inline-flex;
  align-items: center;
}

.wa-workspace-agent-metaitem-icon svg {
  width: 15px;
  height: 15px;
}

/* Seção Steps — abaixo da meta, com título próprio */
.wa-workspace-agent-steps {
  margin-top: 14px;
}

/* Pipeline: pills numeradas com seta — igual ao modal de novo chat */
.wa-workspace-agent-pipeline-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.wa-workspace-agent-pipeline-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: #f5f1e5;
  border-radius: 4px;
  font-size: 12.5px;
  color: #6b6557;
  white-space: nowrap;
  transition: transform 140ms cubic-bezier(0.16, 1, 0.3, 1),
              background 140ms ease, box-shadow 140ms ease;
}

.wa-workspace-agent-pipeline-pill:hover {
  transform: translateY(-2px);
  background: #efe8d6;
  box-shadow: 0 4px 10px -4px rgba(20, 17, 10, 0.22);
}

.wa-workspace-agent-pipeline-num {
  font-family: var(--wa-serif, Georgia, serif);
  font-style: italic;
  font-weight: 500;
  color: #14110a;
  font-size: 13px;
  margin-right: 2px;
}

.wa-workspace-agent-pipeline-arrow {
  font-size: 13px;
  color: #a39b89;
  margin: 0 1px;
}

.wa-workspace-agent-pipeline-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 12.5rem;
}

/* Divisor entre as seções Projetos e Agentes */
.wa-workspace-secao-divisor {
  border: none;
  border-top: 0.5px solid rgba(20, 17, 10, 0.10);
  background: none;
  height: 0;
  margin: 0;
}

/* Topo do card: glyph + nome + status na mesma linha */
.wa-workspace-agent-toprow {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wa-workspace-agent-title {
  flex: 1;
  min-width: 0;
  margin: 0;
}

/* Status do agente sempre roxo (independente do valor) */
.wa-workspace-view .wa-workspace-agent-status {
  flex-shrink: 0;
  background: #ede9f7 !important;
  color: #3c3489 !important;
}

/* Pills arredondadas nas linhas de projeto (fase, tag, chip) */
.wa-workspace-view .ray-home-fase-badge,
.wa-workspace-view .ray-home-project-workspace-tag,
.wa-workspace-view .ray-home-chip {
  border-radius: 999px;
}


/* Chip do tipo de execução (Pipeline / Single run) */
.wa-workspace-agent-modo {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 500;
  color: #0f6e56;
  background: #e8f5ef;
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

/* Divisor interno do card — só a linha clara (neutraliza a linha padrão do Lumo Hr) */
.wa-workspace-agent-divisor {
  border: none;
  border-top: 0.5px solid rgba(20, 17, 10, 0.10);
  background: none;
  height: 0;
  margin: 14px 0;
}

/* Título de seção do card (STEPS / DOCUMENTOS REQUERIDOS) */
.wa-workspace-agent-secao-label {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #a39b89;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.wa-workspace-agent-docs-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.wa-workspace-agent-docs-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
  cursor: default;
  transition: transform 140ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 140ms ease;
}

.wa-workspace-agent-docs-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px -4px rgba(20, 17, 10, 0.20);
}

.wa-workspace-agent-docs-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: currentColor;
}

/* Vermelho = obrigatório */
.wa-workspace-agent-docs-pill--obrigatorio {
  background: #fcebeb;
  color: #a32d2d;
}

/* Verde = opcional */
.wa-workspace-agent-docs-pill--opcional {
  background: #eaf3de;
  color: #3b6d11;
}

.wa-workspace-project-toolbar {
  flex-wrap: wrap;
}
/* Botão preto + hover/clique: agora padrão global em .wa-crud-toolbar (ver acima),
   removido daqui pra não duplicar — .wa-workspace-project-toolbar sempre coexiste
   com .wa-crud-toolbar no mesmo elemento (CrudViewSupport.createToolbar()). */

/* Cards de projeto: elevação no hover + feedback de clique (escopo workspace) */
.wa-workspace-view .ray-home-project-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -10px rgba(20, 17, 10, 0.22),
              0 2px 6px -3px rgba(20, 17, 10, 0.10);
}

.wa-workspace-view .ray-home-project-row:active {
  transform: translateY(-1px) scale(0.995);
}

.wa-workspace-project-shell {
  padding: 1rem 0 0;
}

.wa-workspace-project-shell .ray-home-project-list {
  border-radius: 0.8rem;
  margin-bottom: 0;
}

.wa-workspace-project-shell .wa-crud-footer {
  display: inline-flex;
  margin-top: 0.85rem;
}

.wa-workspace-empty-state,
.wa-workspace-empty-card {
  width: 100%;
}

@media (max-width: 900px) {
  .wa-workspace-project-shell {
    padding: 0.8rem 0;
  }
}

/* ── Project list ────────────────────────────────────── */
.ray-home-project-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 36px;
}

/* ── Project card (matches ray_home.html .project-card) ─ */
.ray-home-project-row {
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  background: #ffffff;
  border: 0.5px solid rgba(20,17,10,.12);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
  width: 100%;
}

.ray-home-project-row:hover {
  border-color: rgba(20,17,10,.2);
  background: rgba(20,17,10,.015);
}

/* Accent bar removida a pedido */
.ray-home-project-accent {
  display: none;
}

/* Body: icon + info + chevron */
.ray-home-project-body {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px 12px;
  min-width: 0;
}

/* Icon 40×40 */
.ray-home-project-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Spectral", Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: 500;
  flex-shrink: 0;
}

/* Info column */
.ray-home-project-info {
  flex: 1;
  min-width: 0;
}

/* Name row: name · status badge · workspace tag */
.ray-home-project-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
  flex-wrap: wrap;
}

.ray-home-project-name {
  font-family: "Spectral", Georgia, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: #14110a;
  margin: 0;
}

/* Status badge with dot */
.ray-home-fase-badge {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.ray-home-badge-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* Badge tones por status */
.ray-home-fase-badge--aguardando { background: #faeeda; color: #854f0b; } /* laranja */
.ray-home-fase-badge--andamento  { background: #ede9f7; color: #3c3489; } /* roxo */
.ray-home-fase-badge--concluido  { background: #e1f5ee; color: #0f6e56; } /* verde */
/* legado (fallback) */
.ray-home-fase-badge--processing { background: #ede9f7; color: #3c3489; }
.ray-home-fase-badge--completed  { background: #e1f5ee; color: #0f6e56; }
.ray-home-fase-badge--warning    { background: #faeeda; color: #854f0b; }
.ray-home-fase-badge--neutral    { background: #faeeda; color: #854f0b; }

/* Workspace/type mono tag */
.ray-home-project-workspace-tag {
  font-size: 10.5px;
  color: #a39b89;
  font-family: 'SF Mono', Monaco, Menlo, Consolas, monospace;
  background: #f5f1e5;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Extra chips */
.ray-home-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 500;
  white-space: nowrap;
}
.ray-home-chip--danger   { color: #791f1f; background: #fceaea; }
.ray-home-chip--warning  { color: #854f0b; background: #faeeda; }
.ray-home-chip--info     { color: #0c447c; background: #e6f1fb; }
.ray-home-chip--neutral  { color: #6b6557; background: #f5f1e5; }
.ray-home-chip--processing { color: #0c447c; background: #e6f1fb; }

/* Description — 2-line clamp */
.ray-home-project-desc {
  font-size: 13px;
  color: #6b6557;
  line-height: 1.5;
  margin: 3px 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Stats/metrics row */
.ray-home-project-metrics {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  font-size: 11.5px;
}

.ray-home-project-stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ray-home-project-stat .ray-home-stat-label {
  font-size: 9.5px;
  color: #a39b89;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 0;
}

.ray-home-project-stat .ray-home-stat-value {
  font-size: 12.5px;
  font-weight: 500;
  font-family: 'SF Mono', Monaco, Menlo, Consolas, monospace;
  color: #14110a;
  margin: 0;
}

/* Métrica de custo com popover de detalhamento: mesmo tratamento de hover
   das pills de meta do cabeçalho do chat (cursor de mão + destaque de cor). */
.ray-home-project-stat .ray-home-stat-value--custo {
  display: inline-block;
  cursor: pointer;
  border-radius: 0.35rem;
  padding: 0.05rem 0.3rem;
  margin: 0 -0.3rem;
  transition: background 0.15s ease, color 0.15s ease;
}

.ray-home-project-stat .ray-home-stat-value--custo:hover {
  background: var(--wa-shell-accent-soft, rgba(63, 111, 159, 0.14));
  color: var(--wa-shell-accent, #0c447c);
  font-weight: 700;
}

/* Chevron → */
.ray-home-project-chevron {
  color: #a39b89;
  font-size: 14px;
  margin-top: 8px;
  flex-shrink: 0;
}

/* Legacy alias for code chip */
.ray-home-code-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 3px;
  background: #f5f1e5;
  font-family: 'SF Mono', Monaco, Menlo, Consolas, monospace;
  font-size: 10.5px;
  color: #6b6557;
}

.ray-home-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--lumo-space-s);
  flex-wrap: wrap;
  margin-top: 1.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ray-line);
  color: var(--ray-ink-soft);
  font-size: 0.72rem;
}

.ray-home-footer-left {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.ray-home-footer-dot {
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: #0f6e56;
}

.ray-home-footer-brand {
  font-style: italic;
}

.ray-home-link-btn {
  color: var(--ray-ink-soft);
  font-size: 0.82rem;
  font-weight: 600;
}

.ray-home-filters {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ray-home-filter-btn {
  border-radius: 99px !important;
  color: var(--ray-ink-soft);
  font-size: 0.78rem;
  font-weight: 500;
}

.ray-home-filter-btn-selected {
  background: var(--ray-ink) !important;
  color: #fff !important;
}

vaadin-button.ray-home-filter-btn::part(button) {
  padding: 4px 12px;
  border-radius: 99px;
  font-size: 0.77rem;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  border: 0.5px solid var(--ray-line);
  box-shadow: none;
  color: var(--ray-ink-soft);
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  min-height: 0;
}

vaadin-button.ray-home-filter-btn {
  cursor: pointer;
}

vaadin-button.ray-home-filter-btn:hover::part(button) {
  background: rgba(20, 17, 10, 0.06);
  color: var(--ray-ink);
  font-weight: 700;
  cursor: pointer;
}

vaadin-button.ray-home-filter-btn.ray-home-filter-btn-selected::part(button) {
  background: var(--ray-ink) !important;
  color: #fff !important;
  border-color: var(--ray-ink);
}

/* Hover + elevação no HOST do botão de filtro (vaadin-button não tem part "button") */
vaadin-button.ray-home-filter-btn {
  transition: transform 140ms cubic-bezier(0.16, 1, 0.3, 1),
              background 140ms ease, box-shadow 140ms ease, color 140ms ease;
}

vaadin-button.ray-home-filter-btn:hover {
  transform: translateY(-2px);
  background: rgba(20, 17, 10, 0.06);
  color: var(--ray-ink);
  box-shadow: 0 4px 12px -5px rgba(20, 17, 10, 0.35);
}

vaadin-button.ray-home-filter-btn:active {
  transform: translateY(0) scale(0.97);
}

/* ── Dashboard (home): interações ─────────────────────────────── */

/* Cards de projeto: elevação no hover + feedback de clique */
.wa-dashboard-view .ray-home-project-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -10px rgba(20, 17, 10, 0.22),
              0 2px 6px -3px rgba(20, 17, 10, 0.10);
}

.wa-dashboard-view .ray-home-project-row:active {
  transform: translateY(-1px) scale(0.995);
}


/* Badge de contagem: cor FIXA (não usa var(--ray-brand)/--ray-brand-soft) de propósito.
   Várias telas (Projetos, LLMs, Agentes, Home, ProjetoCadastro) redefinem essas variáveis
   pra um tema "tinta escura" (bege+preto) só pra aquela página — se o badge seguisse essas
   variáveis, ficaria roxo nuas telas e bege/escuro em outras. Cor fixa garante o mesmo
   visual em qualquer tela que usar a classe. */
.ray-home-section-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  background: #ede9f7;
  color: #241854;
  font-size: 10px;
  font-weight: 600;
  border-radius: 4px;
  padding: 0 4px;
  margin-left: 6px;
  vertical-align: middle;
  font-style: normal;
  font-family: 'SF Mono', Monaco, Menlo, monospace;
  transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}

/* Variante maior do badge de contagem, usada em títulos de card (não no hero) onde o
   badge pequeno de 10px ficava ilegível. Mantém a mesma cor fixa, só aumenta a área. */
.ray-home-section-count.wa-count-badge-lg {
  min-width: 26px;
  height: 24px;
  font-size: 13px;
  padding: 0 8px;
  border-radius: 6px;
  margin-left: 8px;
}

/* Badge de contagem: padrão único de hover, igual em TODAS as telas que usam a classe. */
.ray-home-section-count:hover {
  background: #241854;
  color: #ffffff;
  transform: translateY(-1px);
  cursor: default;
}

.ray-home-cta-wrap {
  margin-top: 0.75rem;
  display: flex;
  justify-content: center;
}

.ray-home-cta-button {
  border: 1px dashed var(--ray-line);
  border-radius: 0.5rem;
  color: var(--ray-ink-soft);
  padding: 0.35rem 0.65rem;
}

@keyframes rayRiseIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ray-rise {
  animation: rayRiseIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.ray-rise-1 {
  animation-delay: 0.05s;
}

.ray-rise-2 {
  animation-delay: 0.12s;
}

.ray-rise-3 {
  animation-delay: 0.2s;
}

.ray-rise-4 {
  animation-delay: 0.28s;
}

@media (max-width: 1100px) {
  .ray-home-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ray-home-workspaces-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .ray-home-project-metrics {
    gap: 12px;
  }
  .ray-home-project-stat {
    flex: 0 0 calc(33% - 8px);
  }
  .ray-home-project-body {
    gap: 10px;
    padding: 14px 16px;
  }
  .ray-home-project-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    font-size: 14px;
  }
}

@media (max-width: 640px) {
  .ray-home-view {
    padding: var(--lumo-space-m);
  }

  .ray-home-stats-grid,
  .ray-home-workspaces-grid {
    grid-template-columns: 1fr;
  }
}

html[theme~="dark"] .ray-home-view {
  --ray-ink: #ebe7dd;
  --ray-ink-soft: #c2bcad;
  --ray-line: rgba(255, 255, 255, 0.12);
  --ray-line-soft: rgba(255, 255, 255, 0.08);
  --ray-bg: #171510;
  --ray-bg-card: #211e18;
  --ray-brand-soft: #2f2747;
}

html[theme~="dark"] .ray-home-user-pill {
  background: #2a241d;
}

/* Documento do projeto */
.wa-projeto-documento-view {
  box-sizing: border-box;
}

.wa-projeto-documento-title {
  font-size: clamp(1.45rem, 2.2vw, 1.95rem);
  line-height: 1.15;
}

.wa-projeto-documento-subtitle {
  line-height: 1.5;
}

.wa-projeto-documento-section-title {
  width: 100%;
  text-align: center;
  font-size: var(--lumo-font-size-m);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--lumo-secondary-text-color);
}

.wa-projeto-documento-item-headline {
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  font-weight: 700;
  color: var(--lumo-header-text-color);
  letter-spacing: 0;
}

.wa-projeto-documento-split {
  box-sizing: border-box;
  border: 1px solid var(--ray-line);
  border-radius: 1.1rem;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 18px 40px rgba(39, 28, 14, 0.08);
}

.wa-projeto-documento-pane {
  box-sizing: border-box;
  padding: var(--lumo-space-m);
  background: linear-gradient(180deg, var(--lumo-base-color), var(--lumo-contrast-5pct));
}

.wa-projeto-documento-grid {
  background: var(--lumo-base-color);
}

.wa-projeto-documento-detail-content {
  box-shadow: var(--lumo-box-shadow-xs);
}

.wa-projeto-documento-item {
  padding: 0.3rem 0.35rem;
  border-radius: var(--lumo-border-radius-m);
  transition: background-color 120ms ease;
}

.wa-projeto-documento-item:hover {
  background: var(--lumo-contrast-5pct);
}

.wa-projeto-documento-item-title {
  color: var(--lumo-header-text-color);
  font-size: var(--lumo-font-size-s);
  font-weight: 600;
  line-height: 1.45;
  width: 100%;
  overflow-wrap: anywhere;
}

.wa-projeto-documento-item-meta,
.wa-projeto-documento-meta,
.wa-projeto-documento-footer {
  color: var(--lumo-secondary-text-color);
}

html:not([theme~="dark"]) .wa-projeto-documento-view {
  --lumo-primary-text-color: #14110a;
  --lumo-header-text-color: #14110a;
  --lumo-body-text-color: #2f291d;
}

html:not([theme~="dark"]) .wa-projeto-documento-view .wa-projeto-documento-subtitle,
html:not([theme~="dark"]) .wa-projeto-documento-view .wa-projeto-documento-meta,
html:not([theme~="dark"]) .wa-projeto-documento-view .wa-projeto-documento-item-meta,
html:not([theme~="dark"]) .wa-projeto-documento-view .wa-projeto-documento-footer {
  color: #5f5749;
}

html:not([theme~="dark"]) .wa-projeto-documento-view .wa-crud-toolbar {
  background: rgba(255, 255, 255, 0.9);
}

html:not([theme~="dark"]) .wa-projeto-documento-view .wa-crud-toolbar
  vaadin-button:not([theme~="primary"]):not([theme~="success"]):not([theme~="error"]):not([theme~="contrast"])::part(button) {
  color: #3b3528;
}

html:not([theme~="dark"]) .wa-projeto-documento-view .wa-crud-toolbar
  vaadin-button:not([theme~="primary"]):not([theme~="success"]):not([theme~="error"]):not([theme~="contrast"]):hover::part(button),
html:not([theme~="dark"]) .wa-projeto-documento-view .wa-crud-toolbar
  vaadin-button:not([theme~="primary"]):not([theme~="success"]):not([theme~="error"]):not([theme~="contrast"]):focus-visible::part(button) {
  color: #1f1a10;
  background: #eeece4;
  box-shadow: inset 0 0 0 1px #c8c0ae;
}

html[theme~="dark"] .wa-projeto-documento-view :is(
  .wa-crud-toolbar,
  .wa-projeto-documento-split,
  .wa-projeto-documento-pane,
  .wa-projeto-documento-grid,
  .wa-projeto-documento-detail-content
) {
  background: rgba(24, 28, 38, 0.86);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}

html[theme~="dark"] .wa-projeto-documento-view .wa-projeto-documento-split {
  border-color: rgba(148, 163, 184, 0.35);
}

/* ── Toolbar do ProjetoCadastroView ──────────────────────────────────── */
.wa-projeto-cadastro-toolbar vaadin-button::part(button) {
  border-radius: 8px;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  transition: background-color 150ms ease, color 150ms ease,
              box-shadow 150ms ease, transform 150ms ease;
}

/* ── Hover global dos botões da página: leve aumentada + negrito ─────── */
.wa-projeto-cadastro-view vaadin-button::part(button) {
  transition: background-color 150ms ease, color 150ms ease,
              box-shadow 150ms ease, transform 150ms ease;
}

.wa-projeto-cadastro-view vaadin-button:hover::part(button),
.wa-projeto-cadastro-view vaadin-button:focus-visible::part(button) {
  transform: scale(1.06);
}

.wa-projeto-cadastro-view vaadin-button::part(label) {
  transition: color 150ms ease, font-weight 150ms ease;
}

.wa-projeto-cadastro-view vaadin-button:hover::part(label),
.wa-projeto-cadastro-view vaadin-button:focus-visible::part(label) {
  font-weight: 700;
}

.wa-projeto-cadastro-toolbar vaadin-button::part(prefix) {
  font-size: 1rem;
  width: 1rem;
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Botões normais — light */
html:not([theme~="dark"]) .wa-projeto-cadastro-toolbar
  vaadin-button:not([theme~="primary"]):not([theme~="error"])::part(button) {
  box-shadow: inset 0 0 0 1px rgba(32, 26, 17, 0.18);
}

html:not([theme~="dark"]) .wa-projeto-cadastro-toolbar
  vaadin-button:not([theme~="primary"]):not([theme~="error"])::part(label) {
  color: #3b3528;
  font-weight: 400;
}

html:not([theme~="dark"]) .wa-projeto-cadastro-toolbar
  vaadin-button:not([theme~="primary"]):not([theme~="error"])::part(prefix) {
  color: #3b3528;
}

html:not([theme~="dark"]) .wa-projeto-cadastro-toolbar
  vaadin-button:not([theme~="primary"]):not([theme~="error"]):hover::part(button),
html:not([theme~="dark"]) .wa-projeto-cadastro-toolbar
  vaadin-button:not([theme~="primary"]):not([theme~="error"]):focus-visible::part(button) {
  background: #eeece4;
  box-shadow: inset 0 0 0 1px rgba(32, 26, 17, 0.55);
}

html:not([theme~="dark"]) .wa-projeto-cadastro-toolbar
  vaadin-button:not([theme~="primary"]):not([theme~="error"]):hover::part(label),
html:not([theme~="dark"]) .wa-projeto-cadastro-toolbar
  vaadin-button:not([theme~="primary"]):not([theme~="error"]):focus-visible::part(label) {
  color: #1f1a10;
  font-weight: 700;
}

html:not([theme~="dark"]) .wa-projeto-cadastro-toolbar
  vaadin-button:not([theme~="primary"]):not([theme~="error"]):hover::part(prefix),
html:not([theme~="dark"]) .wa-projeto-cadastro-toolbar
  vaadin-button:not([theme~="primary"]):not([theme~="error"]):focus-visible::part(prefix) {
  color: #1f1a10;
}

/* Botão error (Delete) — light */
html:not([theme~="dark"]) .wa-projeto-cadastro-toolbar
  vaadin-button[theme~="error"]::part(label) {
  font-weight: 400;
}

html:not([theme~="dark"]) .wa-projeto-cadastro-toolbar
  vaadin-button[theme~="error"]:hover::part(button),
html:not([theme~="dark"]) .wa-projeto-cadastro-toolbar
  vaadin-button[theme~="error"]:focus-visible::part(button) {
  box-shadow: inset 0 0 0 1px #d9534f;
}

html:not([theme~="dark"]) .wa-projeto-cadastro-toolbar
  vaadin-button[theme~="error"]:hover::part(label),
html:not([theme~="dark"]) .wa-projeto-cadastro-toolbar
  vaadin-button[theme~="error"]:focus-visible::part(label) {
  font-weight: 700;
}

/* Botão primary (Novo Chat) — light */
html:not([theme~="dark"]) .wa-projeto-cadastro-toolbar
  vaadin-button[theme~="primary"]::part(label) {
  font-weight: 400;
}

html:not([theme~="dark"]) .wa-projeto-cadastro-toolbar
  vaadin-button[theme~="primary"]:hover::part(label),
html:not([theme~="dark"]) .wa-projeto-cadastro-toolbar
  vaadin-button[theme~="primary"]:focus-visible::part(label) {
  font-weight: 700;
}

/* Dark mode */
html[theme~="dark"] .wa-projeto-cadastro-toolbar
  vaadin-button:not([theme~="primary"]):not([theme~="error"])::part(button) {
  box-shadow: inset 0 0 0 1px rgba(188, 205, 229, 0.22);
}

html[theme~="dark"] .wa-projeto-cadastro-toolbar
  vaadin-button:not([theme~="primary"]):not([theme~="error"])::part(label) {
  color: #b3c2da;
  font-weight: 400;
}

html[theme~="dark"] .wa-projeto-cadastro-toolbar
  vaadin-button:not([theme~="primary"]):not([theme~="error"])::part(prefix) {
  color: #b3c2da;
}

html[theme~="dark"] .wa-projeto-cadastro-toolbar
  vaadin-button:not([theme~="primary"]):not([theme~="error"]):hover::part(button),
html[theme~="dark"] .wa-projeto-cadastro-toolbar
  vaadin-button:not([theme~="primary"]):not([theme~="error"]):focus-visible::part(button) {
  background: rgba(120, 169, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(120, 169, 255, 0.55);
}

html[theme~="dark"] .wa-projeto-cadastro-toolbar
  vaadin-button:not([theme~="primary"]):not([theme~="error"]):hover::part(label),
html[theme~="dark"] .wa-projeto-cadastro-toolbar
  vaadin-button:not([theme~="primary"]):not([theme~="error"]):focus-visible::part(label) {
  color: #edf3ff;
  font-weight: 700;
}

html[theme~="dark"] .wa-projeto-cadastro-toolbar
  vaadin-button:not([theme~="primary"]):not([theme~="error"]):hover::part(prefix),
html[theme~="dark"] .wa-projeto-cadastro-toolbar
  vaadin-button:not([theme~="primary"]):not([theme~="error"]):focus-visible::part(prefix) {
  color: #edf3ff;
}

html[theme~="dark"] .wa-projeto-cadastro-toolbar
  vaadin-button[theme~="error"]::part(label),
html[theme~="dark"] .wa-projeto-cadastro-toolbar
  vaadin-button[theme~="primary"]::part(label) {
  font-weight: 400;
}

html[theme~="dark"] .wa-projeto-cadastro-toolbar
  vaadin-button[theme~="error"]:hover::part(label),
html[theme~="dark"] .wa-projeto-cadastro-toolbar
  vaadin-button[theme~="primary"]:hover::part(label),
html[theme~="dark"] .wa-projeto-cadastro-toolbar
  vaadin-button[theme~="error"]:focus-visible::part(label),
html[theme~="dark"] .wa-projeto-cadastro-toolbar
  vaadin-button[theme~="primary"]:focus-visible::part(label) {
  font-weight: 700;
}
/* ───────────────────────────────────────────────────────────────────── */

.wa-projeto-analise-view {
  box-sizing: border-box;
  --wa-analise-aderencia-faixa-otima-bg: #7cb342;
  --wa-analise-aderencia-faixa-boa-bg: #a5d6a7;
  --wa-analise-aderencia-faixa-atencao-bg: #ffe082;
  --wa-analise-aderencia-faixa-critica-bg: #ef9a9a;
  --wa-analise-aderencia-nao-localizado-bg: #ffebee;
  --wa-analise-aderencia-nao-localizado-text: #b71c1c;
}

.wa-projeto-analise-view .wa-projeto-analise-toolbar {
  position: sticky;
  top: 0;
  z-index: 20;
  justify-content: flex-start;
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
}

.wa-projeto-riscos-view .wa-projeto-riscos-toolbar {
  position: sticky;
  top: 0;
  z-index: 25;
  justify-content: flex-start;
  align-items: center;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
}

.wa-projeto-analise-view .wa-projeto-analise-agente {
  min-width: min(100%, 18rem);
}

html[theme~="dark"] .wa-projeto-analise-view .wa-projeto-analise-toolbar {
  background: rgba(24, 28, 38, 0.92);
}

html[theme~="dark"] .wa-projeto-riscos-view .wa-projeto-riscos-toolbar {
  background: rgba(24, 28, 38, 0.94);
}

.wa-riscos-conclusao-content {
  box-sizing: border-box;
  width: 100%;
  gap: var(--lumo-space-m);
}

.wa-riscos-conclusao-gauge-card {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--lumo-space-l);
  width: 100%;
  padding: var(--lumo-space-m);
  border: 1px solid var(--lumo-contrast-10pct);
  border-radius: 14px;
  background: var(--lumo-contrast-5pct);
}

.wa-riscos-conclusao-gauge {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 7.25rem;
  height: 7.25rem;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--lumo-contrast-10pct);
}

.wa-riscos-conclusao-gauge-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 5.25rem;
  height: 5.25rem;
  border-radius: 999px;
  background: var(--lumo-base-color);
  box-shadow: var(--lumo-box-shadow-xs);
}

.wa-riscos-conclusao-gauge-score {
  font-size: var(--lumo-font-size-xl);
  font-weight: 800;
  line-height: 1;
  color: var(--lumo-body-text-color);
}

.wa-riscos-conclusao-gauge-label {
  margin-top: 0.15rem;
  font-size: var(--lumo-font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--lumo-secondary-text-color);
}

.wa-riscos-conclusao-gauge-summary {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.25rem;
}

.wa-riscos-conclusao-gauge-title {
  font-size: var(--lumo-font-size-l);
  font-weight: 800;
  color: var(--lumo-body-text-color);
}

.wa-riscos-conclusao-gauge-risk {
  font-weight: 700;
  color: var(--lumo-primary-text-color);
}

.wa-riscos-conclusao-gauge-detail {
  color: var(--lumo-secondary-text-color);
}

.wa-riscos-conclusao-blocos {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--lumo-space-m);
  width: 100%;
}

.wa-riscos-conclusao-bloco {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  padding: var(--lumo-space-m);
  border: 1px solid var(--lumo-contrast-10pct);
  border-radius: 14px;
  background: var(--lumo-contrast-5pct);
}

.wa-riscos-conclusao-bloco-titulo {
  display: block;
  margin-bottom: var(--lumo-space-s);
  font-weight: 800;
  color: var(--lumo-body-text-color);
}

.wa-riscos-conclusao-bloco-corpo {
  white-space: pre-line;
  line-height: 1.45;
  color: var(--lumo-secondary-text-color);
  overflow-wrap: break-word;
  word-break: break-word;
}

@media (max-width: 900px) {
  .wa-riscos-conclusao-blocos {
    grid-template-columns: 1fr;
  }

  .wa-riscos-conclusao-gauge-card {
    align-items: flex-start;
    flex-direction: column;
  }
}

html[theme~="dark"] .wa-projeto-analise-view {
  --wa-analise-aderencia-faixa-otima-bg: #45691f;
  --wa-analise-aderencia-faixa-boa-bg: #4f6c52;
  --wa-analise-aderencia-faixa-atencao-bg: #8a6a2b;
  --wa-analise-aderencia-faixa-critica-bg: #7b3f40;
  --wa-analise-aderencia-nao-localizado-bg: #5a2b2f;
  --wa-analise-aderencia-nao-localizado-text: #ffb4b8;
}

.wa-projeto-analise-view .wa-projeto-analise-grid::part(wa-aderencia-cell),
.wa-projeto-analise-view .wa-projeto-analise-grid .wa-aderencia-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 700;
  border-radius: 0;
  padding: 4px 8px;
  min-width: 4.5rem;
}

/* Fallback sem contexto explícito: paleta da criticidade. */
.wa-projeto-analise-view .wa-projeto-analise-grid::part(wa-aderencia-baixa),
.wa-projeto-analise-view .wa-projeto-analise-grid .wa-aderencia-baixa {
  background-color: #70ad47;
  color: #ffffff;
}

.wa-projeto-analise-view .wa-projeto-analise-grid::part(wa-aderencia-media),
.wa-projeto-analise-view .wa-projeto-analise-grid .wa-aderencia-media {
  background-color: #ffc000;
  color: #000000;
}

.wa-projeto-analise-view .wa-projeto-analise-grid::part(wa-aderencia-alta),
.wa-projeto-analise-view .wa-projeto-analise-grid .wa-aderencia-alta {
  background-color: #ed7d31;
  color: #ffffff;
}

.wa-projeto-analise-view .wa-projeto-analise-grid::part(wa-aderencia-critica),
.wa-projeto-analise-view .wa-projeto-analise-grid .wa-aderencia-critica {
  background-color: #c00000;
  color: #ffffff;
}

.wa-projeto-analise-view .wa-projeto-analise-grid::part(wa-aderencia-impacto-baixo),
.wa-projeto-analise-view .wa-projeto-analise-grid .wa-aderencia-impacto-baixo {
  background-color: #c6efce;
  color: #006100;
}

.wa-projeto-analise-view .wa-projeto-analise-grid::part(wa-aderencia-impacto-medio),
.wa-projeto-analise-view .wa-projeto-analise-grid .wa-aderencia-impacto-medio {
  background-color: #f4b183;
  color: #000000;
}

.wa-projeto-analise-view .wa-projeto-analise-grid::part(wa-aderencia-impacto-alto),
.wa-projeto-analise-view .wa-projeto-analise-grid .wa-aderencia-impacto-alto {
  background-color: #ffc7ce;
  color: #9c0006;
}

/* Probabilidade: baixa/media/alta usam semáforo específico. */
.wa-projeto-analise-view .wa-projeto-analise-grid::part(wa-aderencia-probabilidade-baixa),
.wa-projeto-analise-view .wa-projeto-analise-grid .wa-aderencia-probabilidade-baixa {
  background-color: #c6efce;
  color: #006100;
}

.wa-projeto-analise-view .wa-projeto-analise-grid::part(wa-aderencia-probabilidade-media),
.wa-projeto-analise-view .wa-projeto-analise-grid .wa-aderencia-probabilidade-media {
  background-color: #ffeb9c;
  color: #7f6000;
}

.wa-projeto-analise-view .wa-projeto-analise-grid::part(wa-aderencia-probabilidade-alta),
.wa-projeto-analise-view .wa-projeto-analise-grid .wa-aderencia-probabilidade-alta {
  background-color: #ffc7ce;
  color: #9c0006;
}

/* Criticidade: escala completa com classe crítica dedicada. */
.wa-projeto-analise-view .wa-projeto-analise-grid::part(wa-aderencia-criticidade-baixa),
.wa-projeto-analise-view .wa-projeto-analise-grid .wa-aderencia-criticidade-baixa {
  background-color: #70ad47;
  color: #ffffff;
}

.wa-projeto-analise-view .wa-projeto-analise-grid::part(wa-aderencia-criticidade-media),
.wa-projeto-analise-view .wa-projeto-analise-grid .wa-aderencia-criticidade-media {
  background-color: #ffc000;
  color: #000000;
}

.wa-projeto-analise-view .wa-projeto-analise-grid::part(wa-aderencia-criticidade-alta),
.wa-projeto-analise-view .wa-projeto-analise-grid .wa-aderencia-criticidade-alta {
  background-color: #ed7d31;
  color: #ffffff;
}

.wa-projeto-analise-view .wa-projeto-analise-grid::part(wa-aderencia-criticidade-critica),
.wa-projeto-analise-view .wa-projeto-analise-grid .wa-aderencia-criticidade-critica {
  background-color: #c00000;
  color: #ffffff;
}

.wa-projeto-analise-view .wa-projeto-analise-ultima-regeracao {
  width: 100%;
  text-align: right;
  font-size: 0.82rem;
  color: var(--lumo-secondary-text-color);
}

.wa-projeto-analise-view .wa-projeto-analise-premissa-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

.wa-projeto-analise-view .wa-projeto-analise-badge-auto-sugerido {
  display: inline-flex;
  align-items: center;
  border: 1px solid #2e7d32;
  border-radius: 999px;
  padding: 0.12rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.25;
  background: rgba(46, 125, 50, 0.1);
  color: #1b5e20;
}

html[theme~="dark"] .wa-projeto-analise-view .wa-projeto-analise-badge-auto-sugerido {
  border-color: rgba(125, 211, 142, 0.7);
  background: rgba(74, 222, 128, 0.16);
  color: #bbf7d0;
}

/* Badge de auditoria — Texto Sugerido editado manualmente pelo usuário (âmbar) */
.wa-projeto-analise-view .wa-projeto-analise-badge-editado-manualmente {
  display: inline-flex;
  align-items: center;
  border: 1px solid #b45309;
  border-radius: 999px;
  padding: 0.12rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.25;
  background: rgba(180, 83, 9, 0.1);
  color: #92400e;
}

html[theme~="dark"] .wa-projeto-analise-view .wa-projeto-analise-badge-editado-manualmente {
  border-color: rgba(251, 191, 36, 0.7);
  background: rgba(251, 191, 36, 0.14);
  color: #fde68a;
}

.wa-projeto-analise-view .wa-projeto-analise-diff-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lumo-space-m);
  width: 100%;
}

.wa-projeto-analise-view .wa-projeto-analise-diff-column {
  min-width: 0;
}

.wa-projeto-analise-view .wa-projeto-analise-diff-title {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 600;
}

.wa-projeto-analise-view .wa-projeto-analise-diff-content {
  border: 1px solid var(--ray-line);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.82);
  min-height: 200px;
  max-height: 18rem;
  overflow-y: auto;
  padding: 0.55rem 0.65rem;
  font-family: var(--lumo-font-family-monospace);
  font-size: 0.82rem;
  line-height: 1.45;
}

.wa-projeto-analise-view .wa-projeto-analise-diff-line {
  white-space: pre-wrap;
  word-break: break-word;
  border-radius: 0.35rem;
  padding: 0.1rem 0.2rem;
}

.wa-projeto-analise-view .wa-projeto-analise-diff-line-changed {
  background: rgba(255, 193, 7, 0.18);
}

/* Palavra removida (coluna Antes) — vermelho */
.wa-projeto-analise-view .wa-projeto-analise-diff-word-removed {
  background: rgba(239, 68, 68, 0.22);
  color: #b91c1c;
  border-radius: 0.25rem;
  padding: 0 0.12rem;
  text-decoration: line-through;
  text-decoration-color: rgba(185, 28, 28, 0.6);
}

/* Palavra adicionada (coluna Depois) — verde */
.wa-projeto-analise-view .wa-projeto-analise-diff-word-added {
  background: rgba(34, 197, 94, 0.22);
  color: #15803d;
  border-radius: 0.25rem;
  padding: 0 0.12rem;
}

/* Mantém a classe legada como alias de "removida" para compatibilidade futura */
.wa-projeto-analise-view .wa-projeto-analise-diff-word-changed {
  background: rgba(239, 68, 68, 0.22);
  border-radius: 0.25rem;
  padding: 0 0.12rem;
}

/* Badge âmbar na coluna Ação indicando que há snapshot de diff disponível */
.wa-projeto-analise-view .wa-log-diff-badge {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f59e0b;
  margin-right: 6px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Sub-popup de diff: garante scroll mínimo para cláusulas longas */
.wa-diff-subdialog .wa-projeto-analise-diff-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lumo-space-m);
  width: 100%;
}

.wa-diff-subdialog .wa-projeto-analise-diff-content {
  min-height: 200px;
  max-height: 22rem;
  overflow-y: auto;
}

/* ---- Legenda do diff (Removido / Adicionado) ---- */
.wa-diff-legenda-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--lumo-font-size-xs);
  color: var(--lumo-secondary-text-color);
  user-select: none;
}

.wa-diff-legenda-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.wa-diff-legenda-dot--removed {
  background: #dc2626;
}

.wa-diff-legenda-dot--added {
  background: #16a34a;
}

.wa-diff-legenda-label {
  line-height: 1;
}

/* ---- Barra de progresso de exportação PDF/DOCX ---- */
/* Exibida apenas durante a geração (visibility controlada pelo Java). */
.wa-diff-export-progress {
  height: 6px;
  border-radius: 3px;
  margin-bottom: 4px;
}

/* ---- Cabeçalho da coluna com botão copiar ---- */
.wa-diff-col-header {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 0.35rem;
  padding: 0;
  width: 100%;
}

/* Botão de cópia — pequeno, sem borda, ícone discreto */
.wa-diff-copy-btn {
  flex-shrink: 0;
  color: var(--lumo-secondary-text-color) !important;
  opacity: 0.65;
  transition: opacity 0.15s;
}

.wa-diff-copy-btn:hover {
  opacity: 1;
  color: var(--lumo-primary-color) !important;
}

html[theme~="dark"] .wa-projeto-analise-view .wa-projeto-analise-diff-content {
  background: rgba(19, 24, 33, 0.85);
  border-color: rgba(148, 163, 184, 0.35);
}

html[theme~="dark"] .wa-projeto-analise-view .wa-projeto-analise-diff-line-changed {
  background: rgba(255, 193, 7, 0.12);
}

html[theme~="dark"] .wa-projeto-analise-view .wa-projeto-analise-diff-word-removed {
  background: rgba(239, 68, 68, 0.25);
  color: #fca5a5;
}

html[theme~="dark"] .wa-projeto-analise-view .wa-projeto-analise-diff-word-added {
  background: rgba(34, 197, 94, 0.2);
  color: #86efac;
}

html[theme~="dark"] .wa-projeto-analise-view .wa-projeto-analise-diff-word-changed {
  background: rgba(255, 112, 67, 0.3);
}

.wa-projeto-cadastro-view {
  box-sizing: border-box;
}

.wa-projeto-cadastro-shell {
  display: flex;
  flex-direction: column;
  gap: var(--lumo-space-l);
}

.wa-projeto-cadastro-toolbar {
  position: sticky;
  top: 0;
  z-index: 25;
}

/* Drawer em modo overlay (tela pequena): menu fica por cima da toolbar */
vaadin-app-layout[overlay] .wa-projeto-cadastro-toolbar {
  z-index: 0;
}

.wa-projeto-cadastro-toolbar {
  justify-content: flex-start;
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
}

.wa-projeto-cadastro-hero {
  align-items: flex-start;
  gap: var(--lumo-space-l);
}

html body .wa-projeto-cadastro-view .wa-projeto-cadastro-hero .ray-home-title {
  font-size: 30px !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
  margin: 0.15rem 0 0 !important;
  color: #a39b89 !important;
}

html body .wa-projeto-cadastro-view .wa-projeto-cadastro-hero .ray-home-title.wa-projeto-cadastro-titulo-vazio {
  color: #c9c0b4 !important;
  font-style: italic !important;
}

.wa-projeto-cadastro-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--lumo-space-s);
  margin-left: auto;
  min-width: min(100%, 24rem);
}

.wa-projeto-cadastro-meta-card {
  box-sizing: border-box;
  padding: 0.9rem 1rem;
  border: 0.5px solid var(--ray-line);
  border-radius: 10px;
  background: #ffffff;
}

.wa-projeto-cadastro-meta-label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ray-ink-soft);
}

.wa-projeto-cadastro-meta-value {
  display: block;
  margin-top: 0.3rem;
  font-weight: 600;
  color: var(--ray-ink);
}

.wa-projeto-cadastro-grid {
  display: flex;
  gap: 20px;
  align-items: start;
  margin-bottom: 24px;
}

/* Inner 2×2 grid: card1=card2 e card3=card4 em altura — col3 não interfere */
.wa-projeto-cadastro-cards-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  flex: 2;
  align-content: start;
  min-width: 0;
}



/* cards filhos diretos do grid herdam alinhamento de linha automaticamente */
.wa-projeto-cadastro-grid > * {
  min-width: 0;
}

.wa-projeto-cadastro-grid-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-self: start;
  min-width: 0;
  position: sticky;
  top: 24px;
  margin-top: 22px;
}

.wa-projeto-cadastro-grid-dados-gerais,
.wa-projeto-cadastro-grid-partes,
.wa-projeto-cadastro-grid-documentos,
.wa-projeto-cadastro-grid-processo,
.wa-projeto-cadastro-grid-analise,
.wa-projeto-cadastro-grid-atividade,
.wa-projeto-cadastro-grid-chats,
.wa-projeto-cadastro-grid-campos-customizados {
  min-width: 0;
}

.wa-projeto-cadastro-grid-campos-customizados {
  grid-column: 1 / -1;
}

.wa-projeto-cadastro-campos-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
  width: 100%;
}

.wa-projeto-cadastro-campos-item {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.wa-projeto-cadastro-campos-item .wa-projeto-cadastro-card {
  flex: 1;
}

.wa-projeto-cadastro-card {
  box-sizing: border-box;
  padding: 22px 24px;
  border: 0.5px solid var(--ray-line);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 2px 12px rgba(39, 28, 14, 0.06);
}

.wa-projeto-cadastro-card-header {
  margin-bottom: 1rem;
}

.wa-projeto-cadastro-card-header-with-action {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

/* Card de chats e atividade: sem fundo branco, sem padding, sem sombra */
.wa-projeto-cadastro-grid-chats.wa-projeto-cadastro-card,
.wa-projeto-cadastro-grid-atividade.wa-projeto-cadastro-card {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
}

/* Título da seção chats e atividade menor, igual ao mockup (18px) */
.wa-projeto-cadastro-grid-chats .wa-projeto-cadastro-card-title,
.wa-projeto-cadastro-grid-atividade .wa-projeto-cadastro-card-title {
  font-size: 18px;
  letter-spacing: -0.01em;
}

/* Subtítulo da seção chats — cor correta */
.wa-projeto-cadastro-grid-chats .wa-projeto-cadastro-card-subtitle {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #fffbe6;
  border: 1px solid #ffe58f;
  border-radius: 6px;
  padding: 5px 10px;
  margin-top: 6px;
  color: #000;
  font-size: 12.5px;
}

.wa-projeto-cadastro-chat-aviso-icon {
  width: 14px;
  height: 14px;
  color: #d48806;
  flex-shrink: 0;
}

/* Botão + Novo Chat maior */
.wa-projeto-cadastro-grid-chats vaadin-button {
  --lumo-button-size: 2.4rem;
}

.wa-chats-empty-state {
  background: #f5f1e5;
  border: 1px dashed rgba(20, 17, 10, 0.12);
  border-radius: 10px;
  padding: 32px 24px;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}
.wa-chats-empty-state-icon {
  font-size: 28px;
  color: #a39b89;
  margin-bottom: 10px;
}
.wa-chats-empty-state-title {
  font-size: 14px;
  color: #14110a;
  font-weight: 500;
  margin: 0 0 4px;
}
.wa-chats-empty-state-text {
  font-size: 12.5px;
  color: #6b6557;
  line-height: 1.55;
  margin: 0 auto;
  max-width: 440px;
}

.wa-projeto-cadastro-secao-dados {
  width: 100%;
}
.wa-projeto-cadastro-secao-divisor,
.wa-projeto-cadastro-agente-divisor {
  display: block;
  border: none !important;
  border-top: 0.5px solid rgba(20, 17, 10, 0.10) !important;
  background: none !important;
  color: transparent !important;
  height: 0 !important;
  margin: 0 0 32px;
  width: 100%;
}

.wa-projeto-cadastro-agente-divisor {
  margin: 14px 0 0;
}
.wa-projeto-cadastro-secao-header {
  margin-bottom: 14px;
}
.wa-projeto-cadastro-card-title.wa-projeto-cadastro-secao-titulo {
  font-size: 18px;
  letter-spacing: -0.01em;
}
.wa-projeto-cadastro-secao-header .wa-projeto-cadastro-card-subtitle {
  color: #a39b89;
  font-size: 12.5px;
  margin-top: 4px;
}

.wa-projeto-cadastro-card-title {
  margin: 0;
  font-family: "Hoefler Text", Garamond, Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #14110a;
}

.wa-projeto-cadastro-grid-campos-customizados .wa-projeto-cadastro-card-title {
  font-size: 15px;
  letter-spacing: 0;
}

.wa-projeto-cadastro-card-subtitle {
  margin: 0.35rem 0 0;
  color: #6b6557;
  line-height: 1.5;
  font-size: 0.85rem;
}

.wa-projeto-cadastro-arquivos-body {
  gap: 1rem;
}

.wa-projeto-cadastro-chats-body {
  gap: 1rem;
}

.wa-projeto-cadastro-chats-wrapper,
.wa-projeto-cadastro-grid-chats,
.wa-projeto-cadastro-grid-atividade,
.wa-projeto-cadastro-chats-body,
.wa-projeto-cadastro-agente-highlight {
  width: 100%;
  box-sizing: border-box;
}

/* Side cards: fundo transparente (herda beige da página), sem sombra */
.wa-projeto-cadastro-side-card,
.wa-projeto-cadastro-side-card .wa-projeto-cadastro-card {
  padding: 14px 16px;
  border-radius: 8px;
  box-shadow: none;
  background: transparent;
  height: auto;
}

/* Side card title → side-label estilo (igual ao HTML de referência) */
.wa-projeto-cadastro-side-card .wa-projeto-cadastro-card-title,
.wa-projeto-cadastro-side-card.wa-projeto-cadastro-card .wa-projeto-cadastro-card-title {
  font-family: "Spectral", Georgia, "Times New Roman", serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a39b89;
}

/* Side card header: sem margem excessiva */
.wa-projeto-cadastro-side-card .wa-projeto-cadastro-card-header,
.wa-projeto-cadastro-side-card.wa-projeto-cadastro-card .wa-projeto-cadastro-card-header {
  margin-bottom: 12px;
}

.wa-projeto-cadastro-documentos-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 100%;
}

.wa-projeto-cadastro-agente-highlight {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0.5rem;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.wa-projeto-cadastro-agente-highlight-title {
  display: block;
  font-family: "Spectral", Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ray-ink, #14110a);
}

.wa-projeto-cadastro-agente-highlight-subtitle {
  font-size: 12.5px;
  color: var(--ray-ink-faint, #a39b89);
  line-height: 1.5;
  margin-bottom: 0.3rem;
}

.wa-projeto-cadastro-agente-combobox {
  max-width: 360px;
  width: 100%;
}

.wa-projeto-cadastro-agente-combobox::part(label) {
  display: none;
}

.wa-projeto-cadastro-agente-combobox::part(input-field) {
  background: #ffffff;
  border: 0.5px solid rgba(20, 17, 10, 0.2);
  box-shadow: none;
  font-weight: 400;
}

/* ── Inputs escopados na view de cadastro de projeto ── */
.wa-projeto-cadastro-view vaadin-text-field::part(input-field),
.wa-projeto-cadastro-view vaadin-text-area::part(input-field),
.wa-projeto-cadastro-view vaadin-combo-box::part(input-field),
.wa-projeto-cadastro-view vaadin-date-picker::part(input-field),
.wa-projeto-cadastro-view vaadin-select::part(input-field) {
  border: 0.5px solid rgba(20, 17, 10, 0.2);
  border-radius: 6px;
  font-size: 13px;
  padding: 0 12px;
  min-height: 36px;
  background: #ffffff;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.wa-projeto-cadastro-view vaadin-text-field::part(input-field):focus-within,
.wa-projeto-cadastro-view vaadin-text-area::part(input-field):focus-within,
.wa-projeto-cadastro-view vaadin-combo-box::part(input-field):focus-within,
.wa-projeto-cadastro-view vaadin-date-picker::part(input-field):focus-within,
.wa-projeto-cadastro-view vaadin-select::part(input-field):focus-within {
  border-color: #241854;
  box-shadow: 0 0 0 2px rgba(36, 24, 84, 0.12);
}

.wa-projeto-cadastro-view vaadin-text-field::part(label),
.wa-projeto-cadastro-view vaadin-text-area::part(label),
.wa-projeto-cadastro-view vaadin-combo-box::part(label),
.wa-projeto-cadastro-view vaadin-date-picker::part(label),
.wa-projeto-cadastro-view vaadin-select::part(label) {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b6557;
}

.wa-projeto-cadastro-documentos-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0;
  flex-wrap: wrap;
}

.wa-projeto-cadastro-documentos-title-row {
  gap: 0.45rem;
  margin: 0;
}

.wa-projeto-cadastro-documentos-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  background: var(--ray-brand-soft);
  color: var(--ray-brand);
  font-size: 10px;
  font-weight: 600;
  border-radius: 4px;
  padding: 0 4px;
  margin-left: 4px;
  vertical-align: middle;
  font-style: normal;
}

.wa-projeto-cadastro-documentos-add {
  border-radius: 0.85rem;
}

.wa-projeto-cadastro-file-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.wa-projeto-cadastro-file-list--multi {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Menu lateral aberto → documentos 1 por linha (col3 fica estreita) */
vaadin-app-layout[drawer-opened] .wa-projeto-cadastro-file-list--multi {
  grid-template-columns: 1fr;
}


.wa-upload-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 22px 16px;
  background: #f5f1e5;
  border: 1.5px dashed rgba(20, 17, 10, 0.18);
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.wa-upload-dropzone:hover {
  border-color: #1e3a8a;
  background: #e6f1fb;
}
.wa-upload-dropzone-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a39b89;
  margin-bottom: 2px;
}
.wa-upload-dropzone-text {
  font-size: 13px;
  color: #6b6557;
  line-height: 1.4;
}
.wa-upload-dropzone-text strong {
  color: #14110a;
  font-weight: 500;
}
.wa-upload-dropzone-hint {
  font-size: 10.5px;
  color: #a39b89;
}
.wa-upload-dropzone-note {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  color: #a39b89;
  line-height: 1.5;
}

/* ── Próximos Passos ── */
.wa-projeto-cadastro-proximospassos-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wa-projeto-cadastro-proximospassos-step {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.wa-projeto-cadastro-proximospassos-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}
.wa-projeto-cadastro-proximospassos-num-ativo {
  background: #e6f1fb;
  color: #0c447c;
}
.wa-projeto-cadastro-proximospassos-num-inativo {
  background: #f5f1e5;
  color: #a39b89;
}
.wa-projeto-cadastro-proximospassos-num-feito {
  background: #d4edda;
  color: #155724;
  font-size: 10px;
}
.wa-projeto-cadastro-proximospassos-num-aviso {
  background: #fff3cd;
  color: #856404;
}
.wa-projeto-cadastro-proximospassos-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.wa-projeto-cadastro-proximospassos-title {
  font-size: 14px;
  line-height: 1.5;
  display: block;
}
.wa-projeto-cadastro-proximospassos-title-ativo {
  color: #14110a;
  font-weight: 500;
}
.wa-projeto-cadastro-proximospassos-title-inativo {
  color: #6b6557;
  font-weight: 500;
}
.wa-projeto-cadastro-proximospassos-sub {
  font-size: 12px;
  color: #a39b89;
  display: block;
}

/* Inline Upload dropzone — estilos do shadow DOM aplicados via executeJs em ProjetoCadastroView */
.wa-inline-upload-dropzone {
  width: 100%;
}

/* ── Lista de chats no projeto ── */
.wa-projeto-cadastro-chat-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  border: 0.5px solid rgba(20, 17, 10, 0.12);
  border-radius: 10px;
  overflow: hidden;
  background: #ffffff;
}

.wa-projeto-cadastro-chat-card {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 0.6rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.2rem;
  border-bottom: 0.5px solid rgba(20, 17, 10, 0.07);
  cursor: pointer;
  transition: background-color 170ms ease;
}

.wa-projeto-cadastro-chat-card:last-child {
  border-bottom: none;
}

html:not([theme~="dark"]) .wa-projeto-cadastro-chat-card:hover {
  background: #f5f1e5;
}

.wa-projeto-cadastro-chat-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--ray-success, #0f6e56);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ray-success, #0f6e56) 16%, transparent);
}

.wa-projeto-cadastro-chat-dot-inativo {
  background: #a39b89;
  box-shadow: 0 0 0 3px color-mix(in srgb, #a39b89 16%, transparent);
}

.wa-projeto-cadastro-chat-dot-erro {
  background: #c0392b;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.16);
}

.wa-projeto-cadastro-chat-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wa-projeto-cadastro-chat-title {
  font-family: "Spectral", Georgia, "Times New Roman", serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #14110a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wa-projeto-cadastro-chat-meta-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.wa-projeto-cadastro-chat-agent-chip {
  font-size: 11px;
  font-weight: 500;
  padding: 1px 7px;
  border-radius: 3px;
  background: rgba(133, 79, 11, 0.08);
  color: #854f0b;
}

.wa-projeto-cadastro-chat-status-chip {
  font-size: 11px;
  color: #6b6557;
}

.wa-projeto-cadastro-chat-right {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.wa-projeto-cadastro-chat-usuario {
  font-size: 11px;
  font-weight: 500;
  color: #4a4537;
  background: #eeece4;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
}

.wa-projeto-cadastro-chat-valor {
  font-size: 11px;
  font-weight: 600;
  color: #0c447c;
  background: #e6f1fb;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
}

.wa-projeto-cadastro-chat-date {
  font-size: 11px;
  color: #a39b89;
  font-family: "SF Mono", "Monaco", "Menlo", monospace;
  white-space: nowrap;
}

.wa-projeto-cadastro-chat-workspace-chip {
  font-size: 11px;
  font-weight: 600;
  color: #0f6e56;
  padding: 1px 6px;
  border-radius: 3px;
  background: #e1f5ee;
}

.wa-projeto-cadastro-file-card-shell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
}

.wa-projeto-cadastro-file-card-shell .wa-chat-central-file-title {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: #3b3528;
  padding: 0 4px;
}

.wa-projeto-cadastro-file-row-tipo-chip {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.wa-projeto-cadastro-file-card-shell .wa-projeto-cadastro-file-meta-row {
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0.3rem 0.5rem;
  white-space: nowrap;
}

.wa-projeto-cadastro-file-card-shell .wa-projeto-cadastro-file-meta-segment::before {
  margin-right: 0.5rem;
}

.wa-projeto-cadastro-file-status-centralizado {
  justify-content: center;
  width: 100%;
  display: flex;
  margin-top: 6px;
}

.wa-projeto-cadastro-file-status-centralizado.wa-chat-central-file-status-success {
  background: #e6f1fb;
  color: #0c447c;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.wa-projeto-cadastro-file-status-centralizado.wa-chat-central-file-status-success .wa-chat-central-file-status-icon {
  width: 14px;
  height: 14px;
  color: #0c447c;
}

.wa-projeto-cadastro-file-date-icon {
  width: 13px;
  height: 13px;
  color: #a39b89;
  cursor: default;
  display: block;
  margin: 2px auto 0;
}

.wa-projeto-cadastro-file-main {
  display: flex;
  align-items: flex-start;
  gap: 0.95rem;
  width: 100%;
}

.wa-projeto-cadastro-file-content {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 0.45rem;
}

.wa-projeto-cadastro-file-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem 0.8rem;
  color: var(--lumo-secondary-text-color);
  font-size: var(--lumo-font-size-s);
}

.wa-projeto-cadastro-file-meta-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  border-radius: 0.45rem;
  background: color-mix(in srgb, var(--lumo-primary-color) 10%, var(--lumo-base-color));
  color: var(--lumo-primary-text-color);
  font-weight: 600;
}

.wa-projeto-cadastro-file-meta-segment {
  display: inline-flex;
  align-items: center;
  color: var(--lumo-secondary-text-color);
}

.wa-projeto-cadastro-file-meta-segment::before {
  content: "•";
  margin-right: 0.8rem;
  color: var(--lumo-disabled-text-color);
}

.wa-projeto-cadastro-file-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.wa-projeto-cadastro-file-card-shell .wa-chat-central-file-title {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wa-projeto-cadastro-file-actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap;
  gap: 0;
  justify-content: center !important;
  align-items: center;
  width: 100%;
}

.wa-projeto-cadastro-file-actions [last-start-child] {
  margin-left: 0 !important;
  margin-inline-start: 0 !important;
}

/* ── Modo com labels (≤ 3 docs) ── */
.wa-projeto-cadastro-file-actions--com-labels {
  gap: 4px !important;
  align-items: flex-end !important;
}

.wa-arquivo-acao-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: 1;
  cursor: pointer;
}

.wa-arquivo-acao-item .wa-arquivo-acao-btn::part(button) {
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease;
}

.wa-arquivo-acao-item .wa-arquivo-acao-btn vaadin-icon {
  width: 25px;
  height: 25px;
  color: #a39b89;
  transition: color 120ms ease, width 120ms ease, height 120ms ease;
}

/* Hover no item inteiro (botão OU label): ícone escurece e cresce de 25px → 30px */
.wa-arquivo-acao-item:hover .wa-arquivo-acao-btn vaadin-icon,
.wa-arquivo-acao-item .wa-arquivo-acao-btn:focus-visible vaadin-icon {
  color: #1f1a10;
  width: 30px;
  height: 30px;
}

.wa-arquivo-acao-item:hover .wa-arquivo-acao-btn::part(button),
.wa-arquivo-acao-item .wa-arquivo-acao-btn:focus-visible::part(button) {
  background: #eeece4;
  box-shadow: inset 0 0 0 1px rgba(32,26,17,0.18);
}

/* ícone de data: mesmo tamanho e padding dos botões */
.wa-arquivo-acao-item .wa-projeto-cadastro-file-date-icon {
  width: 20px;
  height: 20px;
  color: #a39b89;
  padding: 8px;
  box-sizing: content-box;
  transition: color 120ms ease;
}

/* label normal */
.wa-arquivo-acao-label {
  font-size: 10px;
  font-weight: 500;
  color: #a39b89;
  text-align: center;
  white-space: nowrap;
  line-height: 1.2;
  transition: color 120ms ease, font-weight 120ms ease;
}

/* hover: label fica escura e negrito */
.wa-arquivo-acao-item:hover .wa-arquivo-acao-label {
  color: #1f1a10;
  font-weight: 700;
}

.wa-arquivo-acao-item:hover .wa-projeto-cadastro-file-date-icon {
  color: #1f1a10;
}

/* Sidebar: file card com fundo beige (#f5f1e5), igual ao dropzone de upload */
.wa-projeto-cadastro-side-card .wa-chat-central-file-card {
  background: #f5f1e5 !important;
  border: 1px solid rgba(20,17,10,0.07) !important;
  box-shadow: none !important;
  border-radius: 6px;
  padding: 10px 10px 8px;
  align-items: center;
  justify-content: center;
}

.wa-projeto-cadastro-side-card .wa-chat-central-file-card:hover {
  background: #ede9df !important;
}

.wa-projeto-cadastro-file-actions vaadin-button {
  margin: 0;
}

.wa-projeto-cadastro-file-actions vaadin-button::part(button) {
  color: #a39b89;
  padding: 6px;
  cursor: pointer;
}

.wa-projeto-cadastro-file-actions vaadin-button:hover::part(button) {
  color: #14110a;
  background: #eeece4;
  border-radius: 6px;
}

.wa-projeto-cadastro-file-actions vaadin-button vaadin-icon {
  color: #a39b89;
  width: 25px;
  height: 25px;
  transition: color 120ms ease, width 120ms ease, height 120ms ease;
}

.wa-projeto-cadastro-file-actions vaadin-button:hover vaadin-icon {
  color: #14110a;
  width: 30px;
  height: 30px;
}

.wa-projeto-cadastro-file-date-icon.wa-projeto-cadastro-file-date-icon {
  width: 20px;
  height: 20px;
  color: #c8c0ae;
  margin: 0 4px;
}

.wa-projeto-cadastro-file-date-icon {
  color: #a39b89;
}

.wa-projeto-cadastro-file-date-icon:hover {
  color: #14110a;
  transform: scale(1.2);
}

.wa-projeto-cadastro-atividade-fullwidth {
  width: 100%;
  box-sizing: border-box;
  margin-top: 0;
}

.wa-projeto-cadastro-atividade-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.wa-projeto-cadastro-atividade-card {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.2rem;
  border-bottom: 0.5px solid rgba(20, 17, 10, 0.07);
  cursor: pointer !important;
  transition: background-color 170ms ease;
}

.wa-projeto-cadastro-atividade-card * {
  cursor: pointer !important;
}

.wa-projeto-cadastro-atividade-card:last-child {
  border-bottom: none;
}

.wa-projeto-cadastro-atividade-card:hover {
  background: #f5f1e5;
}

.wa-projeto-cadastro-atividade-card-success {
  /* herança de border-bottom */
}

.wa-projeto-cadastro-atividade-card-danger {
  /* herança de border-bottom */
}

.wa-projeto-cadastro-atividade-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  background: transparent;
  color: #a39b89;
  flex-shrink: 0;
  font-size: 16px;
}

.wa-projeto-cadastro-atividade-icon vaadin-icon {
  color: #a39b89 !important;
  width: 24px !important;
  height: 24px !important;
  --lumo-icon-size-m: 24px !important;
}

.wa-projeto-cadastro-atividade-icon svg {
  width: 24px !important;
  height: 24px !important;
  stroke: #a39b89 !important;
  color: #a39b89 !important;
  stroke-width: 1.5 !important;
  fill: none !important;
}

.wa-projeto-cadastro-atividade-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wa-projeto-cadastro-atividade-title {
  font-family: "Spectral", Georgia, "Times New Roman", serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #14110a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wa-projeto-cadastro-atividade-description {
  color: #6b6557;
  font-size: 11px;
  font-weight: 500;
}

.wa-projeto-cadastro-atividade-meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  font-size: 11px;
  font-family: "SF Mono", "Monaco", "Menlo", monospace;
  color: #a39b89;
  white-space: nowrap;
  text-align: right;
}

.wa-projetos-list-shell {
  width: 100%;
}

/* Campo de busca por nome (substitui os cards de resumo) */
.wa-projetos-busca {
  width: 100%;
}

.wa-projetos-busca-input {
  width: 100%;
}

.wa-projetos-busca-input::part(input-field) {
  background: #ffffff;
  border: 0.5px solid var(--ray-line);
  border-radius: 10px;
  height: 46px;
  box-shadow: 0 1px 3px rgba(20, 17, 10, 0.04);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.wa-projetos-busca-input:hover::part(input-field) {
  border-color: rgba(20, 17, 10, 0.2);
}

.wa-projetos-busca-input[focused]::part(input-field) {
  border-color: #14110a;
  box-shadow: 0 0 0 3px rgba(20, 17, 10, 0.06);
}

.wa-projetos-list-shell .ray-home-project-list {
  width: 100%;
}

.wa-admin-view {
  box-sizing: border-box;
  /* TEMP: "min-height: 100%" foi removido — colidia com ".ray-home-view { min-height: 100vh }"
     (mesma especificidade, essa regra vinha depois e vencia), capando o fundo bege na altura
     do container pai e deixando o restante do conteúdo com fundo branco padrão do Vaadin.
     Afetava todas as telas com a classe wa-admin-view: Tenants, Usuários, Workspaces,
     Registros de Acesso, Billing, Agentes, MemoriaWorkspace, WorkspaceSkills, ChatContexto,
     Projetos. */
}

.wa-admin-shell {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.5rem);
}

.wa-admin-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--lumo-space-l);
}

.wa-admin-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--lumo-space-s);
}

.wa-admin-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--lumo-space-s);
  width: min(100%, 38rem);
  margin-left: auto;
}

.wa-admin-meta-card {
  box-sizing: border-box;
  min-width: 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--ray-line);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 16px 34px rgba(39, 28, 14, 0.06);
}

.wa-admin-meta-label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ray-ink-soft);
}

.wa-admin-meta-value {
  display: block;
  margin-top: 0.3rem;
  font-weight: 600;
  color: var(--ray-ink);
  overflow-wrap: anywhere;
}

.wa-admin-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--lumo-space-m);
}

.wa-admin-pies-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--lumo-space-m);
}

.wa-admin-pie-card {
  box-sizing: border-box;
  padding: 1rem 1.1rem;
  border: 1px solid var(--ray-line);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 16px 36px rgba(39, 28, 14, 0.06);
}

.wa-admin-pie-title {
  display: block;
  margin-bottom: 0.8rem;
  font-weight: 700;
  color: var(--ray-ink);
}

.wa-admin-pie-content {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.wa-admin-pie-chart {
  width: 7.8rem;
  height: 7.8rem;
  border-radius: 50%;
  background: conic-gradient(#e5e7eb 0% 100%);
  border: 1px solid rgba(15, 23, 42, 0.08);
  flex: 0 0 auto;
}

.wa-admin-pie-legend {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
  width: 100%;
}

.wa-admin-pie-legend-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.wa-admin-pie-dot {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  flex: 0 0 auto;
}

.wa-admin-pie-legend-text {
  color: var(--ray-ink-soft);
  font-size: 0.81rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.wa-admin-pie-empty {
  color: var(--ray-ink-soft);
  font-size: 0.84rem;
}

html[theme~="dark"] .wa-admin-pie-card {
  background: rgba(15, 23, 42, 0.78);
  border-color: rgba(148, 163, 184, 0.35);
  box-shadow: 0 18px 34px rgba(2, 6, 23, 0.45);
}

html[theme~="dark"] .wa-admin-pie-title {
  color: #f8fafc;
}

html[theme~="dark"] .wa-admin-pie-chart {
  border-color: rgba(148, 163, 184, 0.35);
}

html[theme~="dark"] .wa-admin-pie-legend-text {
  color: #e2e8f0;
}

html[theme~="dark"] .wa-admin-pie-empty {
  color: #cbd5e1;
}

@media (max-width: 1180px) {
  .wa-admin-pies-row {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  }
}

.wa-admin-summary-card {
  box-sizing: border-box;
  min-width: 0;
  padding: 1rem 1.1rem;
  border: 1px solid var(--ray-line);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 16px 36px rgba(39, 28, 14, 0.06);
}

.wa-admin-summary-label {
  display: block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ray-ink-soft);
}

.wa-admin-summary-value {
  display: block;
  margin-top: 0.55rem;
  color: var(--ray-ink);
  font-family: "Spectral", Georgia, "Times New Roman", serif;
  font-size: clamp(1.55rem, 2vw, 2rem);
  line-height: 1.1;
}

.wa-admin-summary-helper {
  display: block;
  margin-top: 0.35rem;
  color: var(--ray-ink-soft);
  font-size: 0.82rem;
  line-height: 1.5;
}

.wa-admin-content-grid {
  display: grid;
  gap: var(--lumo-space-l);
}

/* TEMP: card sem fundo branco/sombra — os componentes (form, grid) ficam direto sobre o
   fundo bege da página, sem o "cartão" destacado. Afeta todas as telas administrativas
   que usam essa classe (Usuários, Tenants, Clientes, Atalhos, LLMs, Workspaces, etc).
   Padding igualado ao do .wa-crud-toolbar (var(--lumo-space-s)) — antes o card tinha
   padding maior (clamp 1-1.35rem), então o título/texto ficava mais recuado que os
   botões da toolbar acima, desalinhando as bordas esquerda/direita visualmente. */
.wa-admin-card {
  box-sizing: border-box;
  padding: var(--lumo-space-s);
  background: transparent;
  border: none;
  box-shadow: none;
}

.wa-admin-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

.wa-admin-card-heading {
  min-width: 0;
}

.wa-admin-card-title {
  margin: 0;
  font-size: 1.35rem;
  color: var(--ray-ink);
}

/* Memória do Workspace: títulos pretos no tema claro e azuis no tema escuro */
html:not([theme~="dark"]) .wa-memoria-workspace-view .wa-admin-card-title {
  color: #000000;
}

html[theme~="dark"] .wa-memoria-workspace-view :is(.ray-home-title, .wa-admin-card-title) {
  color: #6ea8ff;
}

.wa-admin-card-subtitle {
  margin: 0.35rem 0 0;
  color: var(--ray-ink-soft);
  line-height: 1.5;
}

.wa-admin-toolbar {
  margin: 0;
  background: rgba(255, 255, 255, 0.82);
}

.wa-admin-grid-shell {
  display: flex;
  flex-direction: column;
  gap: var(--lumo-space-s);
}

.wa-admin-grid-shell .wa-crud-grid {
  min-height: 24rem;
  background: rgba(255, 255, 255, 0.92);
}

.wa-admin-grid-shell .wa-crud-footer {
  margin-top: 0.15rem;
}

.wa-registros-acesso-view .ray-home-shell {
  height: 100%;
  overflow-y: auto;
}

.wa-registros-acesso-view .wa-registros-acesso-card {
  display: flex;
  flex-direction: column;
}

.wa-registros-acesso-view .wa-registros-acesso-conteudo {
  display: flex;
  flex-direction: column;
  gap: var(--lumo-space-s);
}

.wa-registros-acesso-view .wa-registros-acesso-grid-shell {
  flex: 0 0 auto;
}

.wa-registros-acesso-view .wa-registros-acesso-grid-shell .wa-crud-grid {
  /* cabeçalho ~44px + 20 linhas compactas ~34px cada = ~724px */
  height: 724px;
  min-height: 200px;
}

/* Painel do mapa OSM embed — acima do grid, aparece ao selecionar linha com coordenadas */
.wa-mapa-painel {
  border: 1px solid var(--lumo-contrast-20pct);
  border-radius: var(--lumo-border-radius-m);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--lumo-base-color);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.wa-mapa-titulo {
  font-size: var(--lumo-font-size-s);
  font-weight: 600;
  color: var(--lumo-secondary-text-color);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--lumo-space-s) var(--lumo-space-m) 0;
}

.wa-mapa-info {
  font-size: var(--lumo-font-size-s);
  color: var(--lumo-primary-color);
  padding: var(--lumo-space-xs) var(--lumo-space-m);
  font-weight: 500;
}

.wa-mapa-iframe {
  width: 100%;
  height: 320px;
  border: none;
  display: block;
}

html[theme~="dark"] .wa-mapa-painel {
  background: var(--lumo-base-color);
  border-color: var(--lumo-contrast-10pct);
}

html[theme~="dark"] .wa-mapa-titulo {
  color: var(--lumo-secondary-text-color);
}

.wa-admin-form .wa-crud-form {
  gap: var(--lumo-space-s);
}

.wa-admin-highlight {
  color: var(--ray-brand);
  font-style: italic;
}

/* Col3: flex item independente — nunca afeta alturas dos 4 cards */
.wa-projeto-cadastro-col3 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}


@media (max-width: 900px) {
  .wa-projeto-cadastro-grid {
    flex-direction: column;
  }

  .wa-projeto-cadastro-cards-inner {
    grid-template-columns: 1fr;
  }

  .wa-projeto-cadastro-campos-grid {
    grid-template-columns: 1fr;
  }

  .wa-projeto-cadastro-meta {
    grid-template-columns: 1fr;
    margin-left: 0;
    width: 100%;
  }

  .wa-projeto-cadastro-arquivos-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .wa-projeto-cadastro-toolbar {
    top: 0;
  }

  .wa-projeto-cadastro-documentos-header {
    flex-direction: column;
    align-items: stretch;
  }

  .wa-projeto-cadastro-file-card-shell {
    flex-direction: column;
  }

  .wa-projeto-cadastro-file-main,
  .wa-projeto-cadastro-file-footer {
    width: 100%;
    justify-content: flex-start;
  }

  .wa-admin-meta-grid {
    margin-left: 0;
    width: 100%;
  }

  .wa-admin-card-header {
    flex-direction: column;
  }
}

html[theme~="dark"] .wa-projeto-cadastro-meta-card,
html[theme~="dark"] .wa-projeto-cadastro-card {
  background: rgba(24, 28, 38, 0.86);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}


html[theme~="dark"] .wa-projeto-cadastro-toolbar {
  background: rgba(24, 28, 38, 0.92);
}

html[theme~="dark"] .wa-projeto-cadastro-atividade-card {
  background: rgba(24, 28, 38, 0.78);
}

html[theme~="dark"] .wa-admin-meta-card,
html[theme~="dark"] .wa-admin-summary-card,
html[theme~="dark"] .wa-admin-card,
html[theme~="dark"] .wa-admin-toolbar,
html[theme~="dark"] .wa-admin-grid-shell .wa-crud-grid {
  background: rgba(24, 28, 38, 0.86);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}

/* Tema claro: títulos sempre em preto */
html:not([theme~="dark"]) :is(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .ray-home-title,
  .ray-home-section-title,
  .ray-home-workspace-title,
  .wa-crud-title,
  .wa-admin-card-title,
  .wa-admin-pie-title,
  .wa-dashboard-title,
  .wa-dashboard-chart-title,
  .wa-chat-central-title,
  .wa-chat-central-card-title,
  .wa-chat-central-file-title,
  .wa-chat-central-steps-title,
  .wa-chat-pipeline-title,
  .wa-chat-pipeline-run-title,
  .wa-agent-card-title,
  .wa-agent-topology-section-title,
  .wa-projeto-cadastro-card-title,
  .wa-projeto-cadastro-atividade-title
) {
  color: #000000;
}

/* Tema escuro: títulos sempre em azul clara */
html[theme~="dark"] :is(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .ray-home-title,
  .ray-home-section-title,
  .ray-home-workspace-title,
  .wa-crud-title,
  .wa-admin-card-title,
  .wa-admin-pie-title,
  .wa-dashboard-title,
  .wa-dashboard-chart-title,
  .wa-chat-central-title,
  .wa-chat-central-card-title,
  .wa-chat-central-file-title,
  .wa-chat-central-steps-title,
  .wa-chat-pipeline-title,
  .wa-chat-pipeline-run-title,
  .wa-agent-card-title,
  .wa-agent-topology-section-title,
  .wa-projeto-cadastro-card-title,
  .wa-projeto-cadastro-atividade-title
) {
  color: #6ea8ff;
}

/* ── Página Sobre ─────────────────────────────────────────────────────── */

.wa-sobre-separator {
  width: 100%;
  max-width: 680px;
  border: none;
  border-top: 1px solid var(--wa-shell-border, var(--lumo-contrast-20pct));
  margin: 0;
}

.wa-sobre-view .wa-sobre-richtext {
  width: 100%;
  color: var(--lumo-secondary-text-color);
  font-size: 0.9rem;
  line-height: 1.72;
}

.wa-sobre-view .wa-sobre-richtext h3,
.wa-sobre-view .wa-sobre-richtext h4 {
  margin: 0;
}

.wa-sobre-view .wa-sobre-richtext h3 {
  margin-bottom: 0.6rem;
}

.wa-sobre-view .wa-sobre-richtext h4 {
  margin-top: 1rem;
  margin-bottom: 0.35rem;
  font-size: 1rem;
  line-height: 1.35;
}

.wa-sobre-view .wa-sobre-richtext p {
  margin: 0.35rem 0;
}

.wa-sobre-view .wa-sobre-richtext ul {
  margin: 0.35rem 0 0.35rem 1.25rem;
  padding: 0;
}

.wa-sobre-view .wa-sobre-richtext li {
  margin: 0.1rem 0;
}

.wa-sobre-view .wa-sobre-richtext .wa-sobre-table-wrap {
  width: 100%;
  overflow-x: auto;
  margin: 0.55rem 0 0.75rem;
  border: 1px solid var(--wa-shell-border, var(--lumo-contrast-20pct));
  border-radius: 10px;
  background: var(--lumo-base-color);
}

.wa-sobre-view .wa-sobre-richtext .wa-sobre-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 520px;
}

.wa-sobre-view .wa-sobre-richtext .wa-sobre-table th,
.wa-sobre-view .wa-sobre-richtext .wa-sobre-table td {
  padding: 0.58rem 0.72rem;
  border-bottom: 1px solid var(--wa-shell-border, var(--lumo-contrast-10pct));
  text-align: left;
  vertical-align: top;
  font-size: 0.84rem;
  line-height: 1.45;
}

.wa-sobre-view .wa-sobre-richtext .wa-sobre-table th {
  background: var(--lumo-contrast-5pct);
  font-weight: 700;
  color: var(--lumo-body-text-color);
}

.wa-sobre-view .wa-sobre-richtext .wa-sobre-table tbody tr:last-child td {
  border-bottom: none;
}

/* Tema claro: títulos pretos, versão e borda do card em azul da marca */
html:not([theme~="dark"]) .wa-sobre-view .wa-sobre-heading {
  color: #000000;
}

html:not([theme~="dark"]) .wa-sobre-view .wa-sobre-release-versao {
  color: #14110a;
}

html:not([theme~="dark"]) .wa-sobre-view .wa-sobre-release-card {
  border-left-color: var(--wa-shell-accent);
}

/* Tema escuro: títulos em azul claro (#6ea8ff), versão e borda em acento do shell */
html[theme~="dark"] .wa-sobre-view .wa-sobre-heading {
  color: #6ea8ff;
}

html[theme~="dark"] .wa-sobre-view .wa-sobre-release-versao {
  color: var(--wa-shell-text);
}

html[theme~="dark"] .wa-sobre-view .wa-sobre-release-card {
  border-left-color: #6ea8ff;
  background: var(--wa-shell-surface);
}

html[theme~="dark"] .wa-sobre-view .wa-sobre-richtext {
  color: var(--wa-shell-text-muted, var(--lumo-secondary-text-color));
}

html[theme~="dark"] .wa-sobre-view .wa-sobre-richtext .wa-sobre-table-wrap {
  background: rgba(17, 27, 40, 0.86);
  border-color: rgba(120, 147, 183, 0.28);
}

html[theme~="dark"] .wa-sobre-view .wa-sobre-richtext .wa-sobre-table th {
  background: rgba(110, 168, 255, 0.12);
  color: #eaf2ff;
}

html[theme~="dark"] .wa-sobre-view .wa-sobre-richtext .wa-sobre-table th,
html[theme~="dark"] .wa-sobre-view .wa-sobre-richtext .wa-sobre-table td {
  border-bottom-color: rgba(120, 147, 183, 0.2);
}

/* ── Aderencia visual global (menus, titulos, cards, labels e grids) ─── */

.wa-main-layout {
  --vaadin-app-layout-drawer-width: 320px;
}

.wa-version-footer {
  margin-top: 0.55rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--wa-shell-divider);
  gap: 0.08rem;
  opacity: 0.92;
}

.wa-version-footer-main {
  font-size: 0.75rem;
  line-height: 1.25;
  color: var(--wa-shell-text-muted);
}

.wa-version-footer-date {
  font-size: 0.68rem;
  line-height: 1.2;
  color: var(--wa-shell-text-soft);
  opacity: 0.86;
}

.wa-step-actions-menubar-wrap {
  display: flex;
  justify-content: flex-start;
}

.wa-step-actions-menubar {
  margin: 0;
  border-radius: 0.8rem;
  background: transparent;
}

.wa-step-actions-menubar::part(container) {
  display: flex;
  gap: 0.32rem;
  flex-wrap: wrap;
  align-items: center;
}

.wa-step-actions-menubar vaadin-button::part(button) {
  border-radius: 0.64rem;
}

.wa-projeto-operacao-view :is(vaadin-text-field, vaadin-number-field, vaadin-integer-field, vaadin-combo-box, vaadin-text-area)::part(label) {
  font-weight: 600;
  color: var(--wa-shell-text-muted);
}

.wa-projeto-operacao-view :is(vaadin-grid, .wa-crud-grid) {
  border: 1px solid var(--wa-shell-border);
  border-radius: 0.92rem;
  overflow: clip;
  background: rgba(255, 255, 255, 0.9);
}

.wa-projeto-operacao-view :is(h2, h3, .wa-admin-card-title) {
  color: var(--wa-shell-text);
}

html[theme~="dark"] .wa-version-footer-main {
  color: var(--wa-shell-text-muted);
}

html[theme~="dark"] .wa-version-footer-date {
  color: var(--wa-shell-text-soft);
}

html[theme~="dark"] .wa-projeto-operacao-view :is(vaadin-grid, .wa-crud-grid) {
  background: rgba(17, 27, 40, 0.9);
  border-color: rgba(120, 147, 183, 0.34);
}

/* ── Builder full-page mode: oculta navbar e drawer do AppLayout ──────── */

vaadin-app-layout.wa-builder-mode::part(navbar) {
  display: none;
  height: 0;
}

vaadin-app-layout.wa-builder-mode::part(drawer) {
  display: none;
  width: 0;
}

vaadin-app-layout.wa-builder-mode {
  --vaadin-app-layout-navbar-offset-top: 0px;
  --vaadin-app-layout-drawer-offset-left: 0px;
}

/* ── Dashboard mode: oculta navbar, sidebar sempre visível ─────────────── */

vaadin-app-layout.wa-dashboard-mode::part(navbar) {
  display: none;
  height: 0;
}

vaadin-app-layout.wa-dashboard-mode {
  --vaadin-app-layout-navbar-offset-top: 0px;
  --vaadin-app-layout-drawer-overlay: false;
}

/* ── AgenteBuilder ───────────────────────────────────────────────────── */

.wa-agente-builder-view {
  background: #faf8f2;
  color: #14110a;
  font-family: var(--wa-builder-font-family-sans, "Spectral", Georgia, "Times New Roman", serif);
  --wa-builder-font-family-sans: "Spectral", Georgia, "Times New Roman", serif;
  --wa-builder-font-family-serif: "Spectral", Georgia, "Times New Roman", serif;
  --wa-builder-font-family-mono: "SF Mono", "Monaco", "Menlo", "Consolas", monospace;
  --wa-builder-font-size-label: 12px;
  --wa-builder-font-size-body: 13px;
  --wa-builder-font-size-body-sm: 12.5px;
  --wa-builder-font-size-caption: 10.5px;
  --wa-builder-font-size-title: 14px;
  --wa-builder-font-size-hero-title: clamp(20px, 1.3vw + 13px, 23px);
  --wa-builder-space-row-gap: 0.625rem;
  --wa-builder-space-row-padding-y: 0.5625rem;
  --wa-builder-space-row-padding-x: 0.625rem;
  --wa-builder-space-row-margin-x: 0.75rem;
  --wa-builder-space-row-margin-bottom: 0.0625rem;
  --wa-builder-space-hero-gap: 1rem;
  --wa-builder-space-hero-padding-bottom: 1.25rem;
  --wa-builder-space-hero-margin-bottom: 1.5rem;
  --wa-builder-space-card-gap: 0.9rem;
  --wa-builder-space-card-padding-y: 1.25rem;
  --wa-builder-space-card-padding-x: 1.375rem;
  --wa-builder-space-form-gap: 0.875rem;
  --wa-builder-radius-row: 0.375rem;
  --wa-builder-radius-icon: 0.3125rem;
  --wa-builder-radius-card: 0.625rem;
  --wa-builder-radius-soft-card: 0.4375rem;
}

/* Linha compacta de badges sob "Configuração geral": oculta em telas grandes,
   aparece só em telas baixas (fusão com o resumo do topo). */
.wa-agente-builder-view .wa-builder-agent-meta-compact {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  padding: 0.15rem 0.75rem 0.4rem 2.6rem;
}

/* Em telas baixas (notebooks 1366×768), encolhe só o hero decorativo do conteúdo
   para recuperar altura sem apertar os cards. Cards/fontes funcionais ficam intactos. */
@media (max-height: 800px) {
  .wa-agente-builder-view {
    --wa-builder-font-size-hero-title: 18px;
    --wa-builder-space-hero-margin-bottom: 0.75rem;
    --wa-builder-space-hero-padding-bottom: 0.6rem;
  }

  /* Funde o resumo do topo com a Configuração geral: esconde o duplicado de cima
     e mostra os badges sob a linha do agente. */
  .wa-agente-builder-view .wa-builder-agent-summary-top {
    display: none;
  }
  .wa-agente-builder-view .wa-builder-agent-meta-compact {
    display: flex;
  }
}

.wa-agente-builder-topbar {
  box-sizing: border-box;
  min-height: 3.1rem;
  padding: 0.75rem 2rem;
  gap: 0.5rem;
  border-bottom: 1px solid var(--wa-shell-divider);
  background: var(--wa-shell-header-bg);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 6;
}

/* Hamburger + 3 pontos: estilo no host (vaadin-button não tem ::part(button)).
   Ícone escuro, fundo branco, borda sólida; hover beige (igual aos botões, sem dashed). */
.wa-agente-builder-view .wa-builder-topbar-back-btn,
.wa-agente-builder-view .wa-builder-topbar-menu-btn,
.wa-agente-builder-view .wa-builder-topbar-more-btn {
  width: 1.95rem !important;
  min-width: 1.95rem !important;
  height: 1.95rem !important;
  padding: 0 !important;
  border: 0.5px solid rgba(20, 17, 10, 0.18) !important;
  border-radius: 0.38rem !important;
  background: #ffffff !important;
  box-shadow: none !important;
  color: #14110a !important;
  cursor: pointer !important;
  transition: background 0.15s, border-color 0.15s;
}

.wa-agente-builder-view .wa-builder-topbar-back-btn:hover,
.wa-agente-builder-view .wa-builder-topbar-menu-btn:hover,
.wa-agente-builder-view .wa-builder-topbar-more-btn:hover {
  background: #f5f1e5 !important;
  border-color: rgba(20, 17, 10, 0.4) !important;
}

.wa-agente-builder-view .wa-builder-topbar-back-btn vaadin-icon,
.wa-agente-builder-view .wa-builder-topbar-menu-btn vaadin-icon,
.wa-agente-builder-view .wa-builder-topbar-more-btn vaadin-icon {
  color: #14110a !important;
  width: 1.05rem;
  height: 1.05rem;
}

.wa-agente-builder-view .wa-builder-topbar-breadcrumb {
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: var(--lumo-secondary-text-color);
}

.wa-agente-builder-view .wa-builder-topbar-version {
  display: inline-flex;
  align-items: center;
  border: none;
  border-radius: 0.25rem;
  padding: 0.2rem 0.5rem;
  font-size: var(--wa-builder-font-size-caption);
  font-family: var(--wa-builder-font-family-mono);
  font-weight: 500;
  color: #6b6557;
  background: #f5f1e5;
}

.wa-agente-builder-view .wa-builder-topbar-save-status {
  font-size: 0.75rem;
  font-weight: 500;
  color: #6b6557;
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
}

.wa-agente-builder-view .wa-builder-topbar-save-status::before {
  content: "";
  width: 0.36rem;
  height: 0.36rem;
  border-radius: 999px;
  background: #0f6e56;
}

.wa-agente-builder-view .wa-builder-topbar-save-status.is-unsaved {
  color: #854f0b;
}

.wa-agente-builder-view .wa-builder-topbar-save-status.is-unsaved::before {
  background: #854f0b;
}

/* Salvar: branco, texto cinza escuro, borda sólida, hover beige (não azul). Estilo no host. */
.wa-agente-builder-view .wa-builder-topbar-save-btn {
  border-radius: 0.38rem !important;
  border: 0.5px solid rgba(20, 17, 10, 0.18) !important;
  background: #ffffff !important;
  box-shadow: none !important;
  color: #14110a !important;
  padding-inline: 0.92rem !important;
  min-height: 1.95rem !important;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer !important;
  transition: background 0.15s, border-color 0.15s;
}

.wa-agente-builder-view .wa-builder-topbar-save-btn:hover {
  background: #f5f1e5 !important;
  border-color: rgba(20, 17, 10, 0.4) !important;
}

.wa-agente-builder-body {
  min-height: 0;
}

.wa-agente-builder-sidebar {
  box-sizing: border-box;
  padding: 0;
  gap: 0;
  border-right: 0.5px solid rgba(20, 17, 10, 0.12);
  background: #ffffff;
  backdrop-filter: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.wa-agente-builder-view .wa-builder-sidebar-divider {
  height: 0.5px;
  background: rgba(20, 17, 10, 0.07);
  margin: 0.375rem 0.75rem;
  flex-shrink: 0;
}

.wa-agente-builder-view .wa-builder-sidebar-agent-card {
  box-sizing: border-box;
  gap: 0.3rem;
  padding: 1rem 1rem 0.75rem;
  border: none;
  border-radius: 0;
  border-bottom: 0.5px solid rgba(20, 17, 10, 0.12);
  background: #ffffff;
  box-shadow: none;
  margin: 0;
}

.wa-agente-builder-view .wa-builder-sidebar-agent-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.32rem;
  background: #211646;
  color: #ffffff;
}

.wa-agente-builder-view .wa-builder-sidebar-agent-icon vaadin-icon {
  width: 0.75rem;
  height: 0.75rem;
}

.wa-agente-builder-view .wa-builder-sidebar-agent-name {
  display: block;
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.25;
}

.wa-agente-builder-view .wa-builder-sidebar-agent-version {
  font-size: var(--wa-builder-font-size-caption);
  color: #a39b89;
  font-family: var(--wa-builder-font-family-mono);
}

.wa-agente-builder-view .wa-builder-sidebar-agent-badges {
  flex-wrap: wrap;
  gap: 0.375rem;
  justify-content: flex-start !important;
}

.wa-agente-builder-view .wa-builder-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 0.56rem;
  padding: 0.08rem 0.45rem;
  font-size: 0.65625rem;
  font-weight: 500;
  border: 1px solid transparent;
}

.wa-agente-builder-view .wa-builder-chip.is-status {
  border-color: rgba(24, 123, 77, 0.34);
  background: rgba(24, 123, 77, 0.11);
  color: #136142;
}

.wa-agente-builder-view .wa-builder-chip.is-mode {
  border-color: var(--wa-shell-border);
  background: rgba(255, 255, 255, 0.7);
  color: var(--wa-shell-text-muted);
}

.wa-agente-builder-view .wa-builder-sidebar-block-title {
  margin-top: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03125rem;
  text-transform: uppercase;
  color: #a39b89;
  padding: 0.875rem 0.75rem 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
}

.wa-agente-builder-view .wa-builder-sidebar-block-title:first-child {
  padding-top: 0.25rem;
}

.wa-agente-builder-view .wa-builder-steps-scroll-area {
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  scrollbar-gutter: stable both-edges;
  padding-bottom: 0.75rem;
}

/* Esconde a scrollbar quando não há overflow — aparece só ao rolar. */
.wa-agente-builder-view .wa-builder-steps-scroll-area:not(:hover) {
  scrollbar-color: transparent transparent;
}
.wa-agente-builder-view .wa-builder-steps-scroll-area:hover {
  scrollbar-color: rgba(20, 17, 10, 0.22) transparent;
}
.wa-agente-builder-view .wa-builder-steps-scroll-area::-webkit-scrollbar {
  width: 4px;
}
.wa-agente-builder-view .wa-builder-steps-scroll-area::-webkit-scrollbar-track {
  background: transparent;
}
.wa-agente-builder-view .wa-builder-steps-scroll-area::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 4px;
  transition: background 0.2s;
}
.wa-agente-builder-view .wa-builder-steps-scroll-area:hover::-webkit-scrollbar-thumb {
  background: rgba(20, 17, 10, 0.22);
}

/* Quando steps ficam na parte inferior da sidebar, expandem para preencher o espaço restante. */
.wa-agente-builder-view .wa-builder-steps-scroll-area--expand {
  flex: 1 1 0;
  min-height: 0;
}

.wa-agente-builder-view .wa-builder-agente-row {
  width: calc(100% - 1.5rem);
  max-width: calc(100% - 1.5rem);
  gap: 0.625rem;
  align-items: center;
  border-radius: 0.375rem;
  border: 0.5px solid transparent;
  box-sizing: border-box;
  padding: 0.5625rem 0.625rem;
  margin: 0 0.75rem 0.0625rem;
  overflow: hidden;
}

.wa-agente-builder-view .wa-builder-agente-row.is-selected {
  border-color: rgba(36, 24, 84, 0.18);
  background: #ede9f7;
}

.wa-agente-builder-view .wa-builder-agente-row:hover {
  background: #f5f1e5;
}

.wa-agente-builder-view .wa-builder-agente-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: var(--wa-builder-radius-icon);
  background: #241854;
  color: #ffffff;
  flex-shrink: 0;
}

.wa-agente-builder-view .wa-builder-agente-icon vaadin-icon {
  width: 0.8125rem;
  height: 0.8125rem;
}

.wa-agente-builder-view .wa-builder-agente-main {
  gap: 0.0625rem;
  align-items: flex-start;
  min-width: 0;
}

.wa-agente-builder-view .wa-builder-agente-open-btn::part(button) {
  width: 100%;
  justify-content: flex-start;
  border: none;
  background: transparent;
  min-height: auto;
  padding: 0;
  margin: 0;
  text-align: left;
}

.wa-agente-builder-view .wa-builder-agente-open-btn::part(label) {
  width: 100%;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #14110a;
}

.wa-agente-builder-view .wa-builder-agente-subtitle {
  font-size: var(--wa-builder-font-size-caption);
  line-height: 1.2;
  color: #a39b89;
}

/* "+ STEP" — estilo no host (vaadin-button não tem ::part(button)). */
.wa-agente-builder-view .wa-builder-steps-add-top-btn {
  cursor: pointer !important;
  border-radius: 0.25rem !important;
  border: 1px solid rgba(20, 17, 10, 0.3) !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #6b6557 !important;
  font-size: 11px;
  font-weight: 700;
  min-height: auto !important;
  padding: 0.125rem 0.4375rem !important;
  letter-spacing: 0;
  text-transform: none;
  gap: 0.25rem;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.wa-agente-builder-view .wa-builder-steps-add-top-btn:hover {
  background: #f5f1e5 !important;
  color: #14110a !important;
  border-style: dashed !important;
  border-color: rgba(20, 17, 10, 0.5) !important;
}

.wa-agente-builder-view .wa-builder-steps-add-top-btn vaadin-icon {
  width: 1.1rem;
  height: 1.1rem;
  padding: 0.18rem;
  border-radius: 999px;
  background: #f0ece1;
  box-sizing: border-box;
  color: inherit !important;
  transition: background 0.15s, color 0.15s;
}

.wa-agente-builder-view .wa-builder-steps-add-top-btn:hover vaadin-icon {
  background: #241854;
  color: #ffffff !important;
}

/* Hint genérico de lista vazia — usado em steps e documentos requeridos */
.wa-agente-builder-view .wa-builder-list-empty-hint {
  width: calc(100% - 1.5rem);
  margin: 0.25rem 0.75rem 0.125rem 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  border: 1px dashed rgba(20, 17, 10, 0.15);
  background: rgba(20, 17, 10, 0.02);
  box-sizing: border-box;
}

.wa-agente-builder-view .wa-builder-list-empty-hint-label {
  font-size: 0.75rem;
  font-style: italic;
  color: rgba(20, 17, 10, 0.4);
  letter-spacing: 0;
}

/* Variação do hint dentro do painel de docs requeridos (mais espaçamento lateral) */
.wa-agente-builder-view .wa-builder-docs-empty-hint {
  width: 100%;
  margin: 0.375rem 0 0.25rem 0;
}

.wa-agente-builder-view .wa-builder-step-row {
  width: calc(100% - 1.5rem);
  max-width: calc(100% - 1.5rem);
  gap: 0.625rem;
  align-items: center;
  padding: 0.5625rem 0.625rem;
  border-radius: 0.375rem;
  border: 0.5px solid transparent;
  box-sizing: border-box;
  margin: 0 0.75rem 0.0625rem;
  overflow: visible;
  transition: background-color 0.12s;
}

.wa-agente-builder-view .wa-builder-step-row.is-selected {
  border-color: rgba(36, 24, 84, 0.18);
  background: #ede9f7;
  box-shadow: none;
}

.wa-agente-builder-view .wa-builder-step-row:hover {
  background: #f5f1e5;
}

.wa-agente-builder-view .wa-builder-step-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.625rem;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 0.3125rem;
  background: #f0ece1;
  color: #6b6557;
  font-size: 0.75rem;
  font-family: var(--wa-builder-font-family-mono);
  font-weight: 600;
  line-height: 1;
  flex-shrink: 0;
}

.wa-agente-builder-view .wa-builder-step-row.is-selected .wa-builder-step-index {
  background: #241854;
  color: #ffffff;
}

.wa-agente-builder-view .wa-builder-step-main {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.wa-agente-builder-view .wa-builder-step-title {
  display: block;
  width: 100%;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #14110a;
  margin: 0 0 0.0625rem;
}

.wa-agente-builder-view .wa-builder-step-meta {
  display: flex;
  gap: 0.3125rem;
  align-items: center;
  min-width: 0;
}

.wa-agente-builder-view .wa-builder-step-open-btn::part(button) {
  width: 100%;
  justify-content: flex-start;
  border: none;
  background: transparent;
  min-height: auto;
  padding: 0;
  margin: 0;
  text-align: left;
}

.wa-agente-builder-view .wa-builder-step-open-btn::part(label) {
  width: 100%;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #14110a;
}

.wa-agente-builder-view .wa-builder-step-open-btn.is-selected::part(label) {
  color: #14110a;
}

.wa-agente-builder-view .wa-builder-step-model-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 0.1875rem;
  padding: 0 0.3125rem;
  font-size: 0.625rem;
  font-weight: 500;
  font-family: var(--wa-builder-font-family-mono);
  letter-spacing: 0;
  line-height: 1.35;
}

.wa-agente-builder-view .wa-builder-step-model-chip.is-groq {
  background: #f3e8d0;
  color: #6b4f0b;
}

.wa-agente-builder-view .wa-builder-step-model-chip.is-sonnet {
  background: #e6f1fb;
  color: #0c447c;
}

.wa-agente-builder-view .wa-builder-step-model-chip.is-opus {
  background: #ede9f7;
  color: #241854;
}

.wa-agente-builder-view .wa-builder-step-model-chip.is-gpt {
  background: #e5f3ed;
  color: #0f6e56;
}

.wa-agente-builder-view .wa-builder-step-model-chip.is-default {
  background: #f0ece1;
  color: #6b6557;
}

/* Coluna de setas de reordenação — alinhada dentro do row sem overflow */
.wa-agente-builder-view .wa-builder-step-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.0625rem;
  flex-shrink: 0;
  width: 1rem;
  opacity: 0.4;
  transition: opacity 0.15s;
}

.wa-agente-builder-view .wa-builder-step-row:hover .wa-builder-step-actions,
.wa-agente-builder-view .wa-builder-step-row.is-selected .wa-builder-step-actions {
  opacity: 1;
}

/* Botões de seta: cor escura e visível dentro do card */
.wa-agente-builder-view .wa-builder-step-move-btn::part(button) {
  min-width: 1rem;
  width: 1rem;
  height: 0.875rem;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #a39b89;
  padding: 0;
  font-size: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wa-agente-builder-view .wa-builder-step-move-btn:enabled:hover::part(button) {
  color: #14110a;
  background: rgba(20, 17, 10, 0.08);
}

/* Botão desabilitado: seta visível mas atenuada */
.wa-agente-builder-view .wa-builder-step-move-btn:disabled::part(button) {
  color: #c8bfb0;
}

.wa-agente-builder-view .wa-builder-step-add-wide-wrap {
  width: 100%;
  padding: 0.5rem 0.75rem 0.5rem;
  box-sizing: border-box;
}

/* Estilo no host (vaadin-button não tem ::part(button)).
   Normal: borda sólida. Hover: borda pontilhada + fundo beige. */
.wa-agente-builder-view .wa-builder-step-add-wide-btn {
  width: 100%;
  justify-content: center;
  gap: 0.375rem;
  min-height: 2.5rem;
  border: 1px solid rgba(20, 17, 10, 0.3) !important;
  border-radius: 0.375rem !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #6b6557 !important;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer !important;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.wa-agente-builder-view .wa-builder-step-add-wide-btn:hover {
  background: #f5f1e5 !important;
  color: #14110a !important;
  border-style: dashed !important;
  border-color: rgba(20, 17, 10, 0.5) !important;
}

.wa-agente-builder-view .wa-builder-step-add-wide-btn vaadin-icon {
  width: 1.45rem;
  height: 1.45rem;
  padding: 0.25rem;
  border-radius: 999px;
  background: #f0ece1;
  box-sizing: border-box;
  color: inherit !important;
  transition: background 0.15s, color 0.15s;
}

.wa-agente-builder-view .wa-builder-step-add-wide-btn:hover vaadin-icon {
  background: #241854;
  color: #ffffff !important;
}

.wa-agente-builder-view .wa-builder-conversa-row {
  width: calc(100% - 1.5rem);
  max-width: calc(100% - 1.5rem);
  gap: 0.625rem;
  align-items: center;
  border-radius: 0.375rem;
  border: 0.5px solid transparent;
  box-sizing: border-box;
  padding: 0.5625rem 0.625rem;
  margin: 0 0.75rem 0.0625rem;
  overflow: hidden;
}

.wa-agente-builder-view .wa-builder-conversa-row.is-selected {
  border-color: rgba(36, 24, 84, 0.18);
  background: #ede9f7;
  box-shadow: none;
}

.wa-agente-builder-view .wa-builder-conversa-row:hover {
  background: #f5f1e5;
}

.wa-agente-builder-view .wa-builder-conversa-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 0.3125rem;
  border: 0.5px solid rgba(12, 68, 124, 0.2);
  background: #e6f1fb;
  color: #0c447c;
}

.wa-agente-builder-view .wa-builder-conversa-icon vaadin-icon {
  width: 0.875rem;
  height: 0.875rem;
}

.wa-agente-builder-view .wa-builder-conversa-open-btn::part(button) {
  width: 100%;
  justify-content: flex-start;
  border: none;
  background: transparent;
  min-height: auto;
  padding: 0;
  margin: 0;
  text-align: left;
}

.wa-agente-builder-view .wa-builder-conversa-open-btn::part(label) {
  width: 100%;
  font-size: 0.8125rem;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #14110a;
}

html:not([theme~="dark"]) .wa-agente-builder-view .wa-builder-step-title,
html:not([theme~="dark"]) .wa-agente-builder-view .wa-builder-step-open-btn::part(label),
html:not([theme~="dark"]) .wa-agente-builder-view .wa-builder-conversa-open-btn::part(label),
html:not([theme~="dark"]) .wa-agente-builder-view .wa-builder-steps-add-top-btn::part(button),
html:not([theme~="dark"]) .wa-agente-builder-view .wa-builder-step-add-wide-btn::part(button),
html:not([theme~="dark"]) .wa-agente-builder-view .wa-builder-steps-add-top-btn::part(label),
html:not([theme~="dark"]) .wa-agente-builder-view .wa-builder-step-add-wide-btn::part(label),
html:not([theme~="dark"]) .wa-agente-builder-view .wa-builder-steps-add-top-btn::part(prefix),
html:not([theme~="dark"]) .wa-agente-builder-view .wa-builder-step-add-wide-btn::part(prefix) {
  color: #14110a;
}

html:not([theme~="dark"]) .wa-agente-builder-view .wa-builder-steps-add-top-btn::part(button),
html:not([theme~="dark"]) .wa-agente-builder-view .wa-builder-step-add-wide-btn::part(button) {
  border-color: rgba(20, 17, 10, 0.35) !important;
}

html:not([theme~="dark"]) .wa-agente-builder-view .wa-builder-step-add-wide-btn vaadin-icon {
  color: #6b6557;
  background: #f0ece1;
}

/* Hover do ícone (azul do agente + "+" branco) — mesma especificidade do override acima p/ vencer */
html:not([theme~="dark"]) .wa-agente-builder-view .wa-builder-step-add-wide-btn:hover vaadin-icon,
html:not([theme~="dark"]) .wa-agente-builder-view .wa-builder-doc-add-wide-btn:hover vaadin-icon,
html:not([theme~="dark"]) .wa-agente-builder-view .wa-builder-steps-add-top-btn:hover vaadin-icon {
  color: #ffffff !important;
  background: #241854 !important;
}

.wa-agente-builder-view .wa-builder-conversa-meta {
  gap: 0.3125rem;
  margin-top: 0.04rem;
}

.wa-agente-builder-view .wa-builder-conversa-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 0.1875rem;
  padding: 0 0.3125rem;
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.35;
  font-family: var(--wa-builder-font-family-mono);
}

.wa-agente-builder-view .wa-builder-conversa-chip.is-sonnet {
  background: #e6f1fb;
  color: #0c447c;
}

.wa-agente-builder-view .wa-builder-conversa-chip.is-opus {
  background: #ede9f7;
  color: #241854;
}

.wa-agente-builder-view .wa-builder-conversa-chip.is-gpt {
  background: #e5f3ed;
  color: #0f6e56;
}

.wa-agente-builder-view .wa-builder-conversa-chip.is-groq {
  background: #f3e8d0;
  color: #6b4f0b;
}

.wa-agente-builder-view .wa-builder-conversa-chip.is-default {
  background: #f0ece1;
  color: #6b6557;
}

.wa-agente-builder-view .wa-builder-conversa-status {
  font-size: var(--wa-builder-font-size-caption);
  line-height: 1.2;
  color: #a39b89;
}

.wa-agente-builder-content {
  padding: 1.75rem 2.25rem 5.5rem !important;
  background: transparent;
}

.wa-agente-builder-view .wa-builder-main-scroller::part(content) {
  display: flex;
  justify-content: center;
}

.wa-agente-builder-view .wa-builder-content-section {
  width: min(1180px, 100%);
  margin-inline: auto;
  gap: 1.125rem;
  padding-bottom: 4rem;
}

.wa-agente-builder-view .wa-builder-hero {
  align-items: flex-start;
  padding: 0 0 var(--wa-builder-space-hero-padding-bottom);
  border-bottom: 0.5px solid rgba(20, 17, 10, 0.12);
  margin-bottom: var(--wa-builder-space-hero-margin-bottom);
  gap: var(--wa-builder-space-hero-gap);
}

.wa-agente-builder-view .wa-builder-hero-texts {
  gap: 0.08rem;
}

.wa-agente-builder-view .wa-builder-hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.5rem;
  background: #241854;
  color: #ffffff;
  flex-shrink: 0;
}

.wa-agente-builder-view .wa-builder-hero-icon.is-step {
  background: #14110a;
  font-family: var(--wa-builder-font-family-mono);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1;
}

.wa-agente-builder-view .wa-builder-hero-icon.is-conv {
  background: #0c447c;
}

.wa-agente-builder-view .wa-builder-hero-icon vaadin-icon {
  width: 1.125rem;
  height: 1.125rem;
}

/* Lixeira de excluir step no canto direito do hero — discreta, fica vermelha no hover.
   Sem theme variant: estilo todo via ::part() com !important para vencer o shadow DOM do Lumo. */
.wa-agente-builder-view .wa-builder-hero-delete-btn {
  flex-shrink: 0;
  cursor: pointer !important;
  margin: 0;
  align-self: center;
  background: transparent !important;
}

.wa-agente-builder-view .wa-builder-hero-delete-btn::part(button) {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  color: #8a8270 !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  transition: color 0.15s;
}

.wa-agente-builder-view .wa-builder-hero-delete-btn:hover::part(button) {
  color: #791f1f !important;
}

.wa-agente-builder-view .wa-builder-hero-delete-btn vaadin-icon {
  width: 36px;
  height: 36px;
  color: #8a8270 !important;
}

.wa-agente-builder-view .wa-builder-hero-delete-btn:hover vaadin-icon {
  color: #791f1f !important;
}

/* ===== Danger zone do agente (rodapé da seção) — layout do mockup ===== */
.wa-agente-builder-view .wa-builder-danger-zone {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
  padding: 16px 20px;
  background: #fceaea;                          /* --danger-bg */
  border: 0.5px solid rgba(121, 31, 31, 0.2);
  border-radius: 10px;
}

.wa-agente-builder-view .wa-builder-danger-zone-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wa-agente-builder-view .wa-builder-danger-zone-title {
  font-size: 13px;
  font-weight: 600;
  color: #791f1f;                               /* --danger */
}

.wa-agente-builder-view .wa-builder-danger-zone-desc {
  font-size: 12.5px;
  line-height: 1.45;
  color: #791f1f;
  opacity: 0.85;
}

.wa-agente-builder-view .wa-builder-danger-zone-btn {
  flex-shrink: 0;
  margin: 0;
  /* Cursor de mãozinha no Vaadin: a forma canônica é a variável do Lumo,
     além do cursor no host (vaadin-button) e no ::part. */
  --lumo-clickable-cursor: pointer;
  cursor: pointer !important;
}

.wa-agente-builder-view .wa-builder-danger-zone-btn::part(button) {
  background: #ffffff;                          /* --bg-card */
  color: #791f1f !important;                    /* texto vermelho */
  border: 1px solid #791f1f !important;         /* borda na MESMA cor do texto */
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer !important;
  transition: background 0.15s, color 0.15s, border 0.15s;
}

/* Garante o texto (label) e o ícone do prefixo em vermelho */
.wa-agente-builder-view .wa-builder-danger-zone-btn::part(label),
.wa-agente-builder-view .wa-builder-danger-zone-btn::part(prefix) {
  color: #791f1f !important;
  cursor: pointer !important;
}

/* Hover: fundo vermelho mais claro + borda tracejada num vermelho mais claro.
   Declaro a borda como shorthand para sobrepor o tema padrão do vaadin-button. */
.wa-agente-builder-view .wa-builder-danger-zone-btn:hover::part(button) {
  background: #fdf0f0 !important;               /* vermelho bem mais claro */
  border: 1px dashed #b23b3b !important;        /* borda vermelho mais claro */
  color: #b23b3b !important;
}

.wa-agente-builder-view .wa-builder-danger-zone-btn:hover::part(label),
.wa-agente-builder-view .wa-builder-danger-zone-btn:hover::part(prefix) {
  color: #b23b3b !important;
}

/* Ícone maior no estado padrão */
.wa-agente-builder-view .wa-builder-danger-zone-btn vaadin-icon {
  width: 19px;
  height: 19px;
  color: #791f1f !important;
}

/* Ícone ainda maior + vermelho mais claro no hover */
.wa-agente-builder-view .wa-builder-danger-zone-btn:hover vaadin-icon {
  width: 22px;
  height: 22px;
  color: #b23b3b !important;
}

html[theme~="dark"] .wa-agente-builder-view .wa-builder-danger-zone {
  background: rgba(121, 31, 31, 0.16);
  border-color: rgba(220, 120, 120, 0.32);
}

html[theme~="dark"] .wa-agente-builder-view .wa-builder-danger-zone-title,
html[theme~="dark"] .wa-agente-builder-view .wa-builder-danger-zone-desc,
html[theme~="dark"] .wa-agente-builder-view .wa-builder-danger-zone-btn vaadin-icon {
  color: #f3b4b4;
}

html[theme~="dark"] .wa-agente-builder-view .wa-builder-danger-zone-btn::part(button) {
  background: transparent;
  color: #f3b4b4;
  border-color: rgba(220, 120, 120, 0.4);
}

.wa-agente-builder-view .wa-builder-hero-eyebrow {
  font-size: var(--wa-builder-font-size-caption);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #a39b89;
}

.wa-agente-builder-view .wa-builder-hero-title {
  font-family: var(--wa-builder-font-family-serif);
  font-size: var(--wa-builder-font-size-hero-title);
  line-height: 1.2;
  font-weight: 600;
  color: #14110a;
}

.wa-agente-builder-view .wa-builder-hero-description {
  margin-top: 0.12rem;
  font-size: var(--wa-builder-font-size-title);
  color: #6b6557;
  max-width: 46.25rem;
}

.wa-agente-builder-view .wa-builder-main-card {
  gap: var(--wa-builder-space-card-gap);
  border-radius: var(--wa-builder-radius-card);
  border: 0.5px solid rgba(20, 17, 10, 0.12);
  background: #ffffff;
  box-shadow: none;
  padding: var(--wa-builder-space-card-padding-y) var(--wa-builder-space-card-padding-x);
}

.wa-agente-builder-view .wa-builder-main-card-title {
  margin: 0;
  font-size: var(--wa-builder-font-size-title);
  font-weight: 600;
  line-height: 1.25;
  color: #14110a;
}

.wa-agente-builder-view .wa-builder-main-card-subtitle {
  margin: 0;
  font-size: var(--wa-builder-font-size-body-sm);
  color: #6b6557;
}

.wa-agente-builder-view .wa-builder-form-grid {
  gap: var(--wa-builder-space-form-gap);
}

.wa-agente-builder-view .wa-builder-form-grid vaadin-text-field,
.wa-agente-builder-view .wa-builder-form-grid vaadin-integer-field,
.wa-agente-builder-view .wa-builder-form-grid vaadin-number-field,
.wa-agente-builder-view .wa-builder-form-grid vaadin-text-area,
.wa-agente-builder-view .wa-builder-form-grid vaadin-combo-box {
  font-size: var(--wa-builder-font-size-body);
}

.wa-agente-builder-view .wa-builder-form-grid vaadin-text-field::part(label),
.wa-agente-builder-view .wa-builder-form-grid vaadin-integer-field::part(label),
.wa-agente-builder-view .wa-builder-form-grid vaadin-number-field::part(label),
.wa-agente-builder-view .wa-builder-form-grid vaadin-text-area::part(label),
.wa-agente-builder-view .wa-builder-form-grid vaadin-combo-box::part(label) {
  font-size: var(--wa-builder-font-size-label);
  font-weight: 500;
}

.wa-agente-builder-view .wa-builder-padrao-row {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.75rem;
  background: var(--bg-soft, #f5f1e5);
  border-radius: 0.4375rem;
  border: 0.5px solid transparent;
  box-sizing: border-box;
}

.wa-agente-builder-view .wa-builder-padrao-row vaadin-checkbox::part(label) {
  font-size: 13px;
  font-weight: 500;
  color: #14110a;
}

/* Descrição abaixo do checkbox, alinhada com o texto (recuo do tamanho da caixa) */
.wa-agente-builder-view .wa-builder-padrao-desc {
  font-size: 12px;
  color: #6b6557;
  padding-left: 28px;
}

/* ── Danger zone — Excluir agente ─────────────────────────────── */
.wa-agente-builder-view .wa-builder-danger-zone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1rem 1.25rem;
  background: #fceaea;
  border: 0.5px solid rgba(121, 31, 31, 0.2);
  border-radius: 0.625rem;
  box-sizing: border-box;
  margin-top: 0.5rem;
}

.wa-agente-builder-view .wa-builder-danger-zone-info {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  flex: 1;
}

.wa-agente-builder-view .wa-builder-danger-zone-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #791f1f;
  display: block;
}

.wa-agente-builder-view .wa-builder-danger-zone-desc {
  font-size: 0.78125rem;
  color: #791f1f;
  opacity: 0.85;
  display: block;
}

.wa-agente-builder-view .wa-builder-danger-btn::part(button) {
  background: #ffffff;
  color: #791f1f;
  border: 0.5px solid rgba(121, 31, 31, 0.3);
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.375rem 0.875rem;
  gap: 0.375rem;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.wa-agente-builder-view .wa-builder-danger-btn::part(button):hover {
  background: #fceaea;
  border-color: rgba(121, 31, 31, 0.5);
}

.wa-agente-builder-view .wa-builder-danger-btn::part(label) {
  color: #791f1f;
  font-weight: 500;
}

.wa-agente-builder-view .wa-builder-danger-btn [slot="prefix"] {
  color: #791f1f;
}

.wa-agente-builder-view :is(
  vaadin-text-field,
  vaadin-number-field,
  vaadin-integer-field,
  vaadin-combo-box,
  vaadin-text-area
)::part(input-field) {
  border-radius: 0.375rem;
  border: 0.5px solid rgba(20, 17, 10, 0.12);
  background: #ffffff;
  box-shadow: none;
}

.wa-agente-builder-view :is(
  vaadin-text-field,
  vaadin-number-field,
  vaadin-integer-field,
  vaadin-combo-box,
  vaadin-text-area
)::part(label) {
  font-size: var(--wa-builder-font-size-label);
  font-weight: 500;
  color: #6b6557;
}

.wa-agente-builder-view .wa-builder-docs-card,
.wa-agente-builder-view .wa-builder-output-card,
.wa-agente-builder-view .wa-builder-provider-accordion {
  border-radius: var(--wa-builder-radius-soft-card);
  border: 0.5px solid rgba(20, 17, 10, 0.12);
  background: #ffffff;
  padding: 0.95rem;
}

.wa-agente-builder-view .wa-builder-agent-docs-card {
  border-radius: var(--wa-builder-radius-card);
  border: 0.5px solid rgba(20, 17, 10, 0.12);
  background: #ffffff;
  padding: var(--wa-builder-space-card-padding-y) var(--wa-builder-space-card-padding-x);
}

.wa-agente-builder-view .wa-builder-docs-title,
.wa-agente-builder-view .wa-builder-output-title {
  font-size: var(--wa-builder-font-size-title);
  font-weight: 600;
  color: #14110a;
}

.wa-agente-builder-view .wa-builder-docs-header {
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.wa-agente-builder-view .wa-builder-docs-add-btn::part(button) {
  border-radius: 0.375rem;
  border: 1px dashed rgba(20, 17, 10, 0.12);
  color: #6b6557;
  font-size: 0.75rem;
}

.wa-agente-builder-view .wa-builder-doc-row {
  gap: 0.4rem;
  align-items: flex-end;
  padding: 0.38rem 0;
  border-top: 1px solid rgba(32, 26, 17, 0.06);
  flex-wrap: nowrap;
}

/* Fonte reduzida para caber todos os campos do documento numa linha só */
.wa-agente-builder-view .wa-builder-doc-row vaadin-text-field,
.wa-agente-builder-view .wa-builder-doc-row vaadin-integer-field,
.wa-agente-builder-view .wa-builder-doc-row vaadin-combo-box {
  font-size: 11.5px;
  min-width: 0;
}

.wa-agente-builder-view .wa-builder-doc-row vaadin-text-field::part(label),
.wa-agente-builder-view .wa-builder-doc-row vaadin-integer-field::part(label),
.wa-agente-builder-view .wa-builder-doc-row vaadin-combo-box::part(label) {
  font-size: 10.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* vaadin-button NÃO tem ::part(button): estilo vai no próprio host. */
.wa-agente-builder-view .wa-builder-doc-remove-btn {
  align-self: flex-end;
  height: calc(var(--lumo-size-m) + 2px) !important;
  min-height: calc(var(--lumo-size-m) + 2px) !important;
  width: calc(var(--lumo-size-m) + 2px) !important;
  min-width: calc(var(--lumo-size-m) + 2px) !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0.5rem !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #8a8270 !important;
  cursor: pointer !important;
  transition: color 0.15s, background 0.15s;
}

.wa-agente-builder-view .wa-builder-doc-remove-btn:hover {
  color: #c0392b !important;
  background: transparent !important;
}

.wa-agente-builder-view .wa-builder-doc-remove-btn vaadin-icon {
  color: inherit !important;
}

/* Botão "Adicionar tipo de documento" — full-width pontilhado (estilo no host, vaadin-button não tem ::part(button)) */
.wa-agente-builder-view .wa-builder-doc-add-wide-btn {
  width: 100%;
  justify-content: center;
  gap: 0.375rem;
  margin-top: 0.75rem;
  min-height: 2.5rem;
  border: 1px dashed rgba(20, 17, 10, 0.3) !important;
  border-radius: 0.375rem !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #6b6557 !important;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer !important;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.wa-agente-builder-view .wa-builder-doc-add-wide-btn:hover {
  background: #f5f1e5 !important;
  color: #14110a !important;
  border-color: rgba(20, 17, 10, 0.5) !important;
}

/* Subtítulo do modal "Adicionar step ao pipeline" (overlay global, classe única). */
.wa-builder-novo-step-sub {
  display: block;
  font-size: 12.5px;
  color: #6b6557;
  margin-bottom: 0.25rem;
}

/* Botões dos modais de exclusão (ConfirmDialog vive fora da view; escopo pelos nomes de tema
   únicos). Padronizado: cursor pointer nos dois; Excluir fica vermelho no hover, Cancelar beige. */
vaadin-button[theme~="danger-hover"],
vaadin-button[theme~="cancel-hover"] {
  cursor: pointer !important;
}

vaadin-button[theme~="danger-hover"]:hover {
  background-color: #c0392b !important;
  border-color: #c0392b !important;
  color: #ffffff !important;
}

vaadin-button[theme~="cancel-hover"]:hover {
  background-color: #f0ece1 !important;
  color: #14110a !important;
}

.wa-agente-builder-view .wa-builder-doc-add-wide-btn vaadin-icon {
  width: 1.45rem;
  height: 1.45rem;
  padding: 0.25rem;
  border-radius: 999px;
  background: #f0ece1;
  box-sizing: border-box;
  color: inherit !important;
  transition: background 0.15s, color 0.15s;
}

.wa-agente-builder-view .wa-builder-doc-add-wide-btn:hover vaadin-icon {
  background: #241854;
  color: #ffffff !important;
}

.wa-agente-builder-view .wa-builder-output-options::part(group-field) {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.5rem;
}

.wa-agente-builder-view .wa-builder-output-options vaadin-radio-button {
  width: auto;
  min-width: 0;
  flex: 1 1 0;
  align-self: stretch;
}

/* Garante que a label ocupe toda a altura do radio button para nivelar os cards */
.wa-agente-builder-view .wa-builder-output-options vaadin-radio-button::part(label) {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: stretch;
}

/* Cards de opção de formato de saída com altura igual em toda a linha */
.wa-agente-builder-view .wa-builder-output-option-card {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  gap: 0.28rem;
  border: 0.5px solid rgba(20, 17, 10, 0.12);
  border-radius: 0.4375rem;
  background: #f5f1e5;
  padding: 0.78rem;
}

.wa-agente-builder-view .wa-builder-output-option-title {
  font-size: 0.8125rem;
  font-weight: 500;
}

.wa-agente-builder-view .wa-builder-output-option-description {
  font-size: 0.71875rem;
  color: #6b6557;
}

.wa-agente-builder-view .wa-builder-output-options vaadin-radio-button[checked] .wa-builder-output-option-card {
  border-color: rgba(73, 56, 131, 0.36) !important;
  background: rgba(110, 89, 178, 0.12) !important;
}

.wa-agente-builder-view .wa-builder-provider-content {
  padding-top: 0.25rem;
  background: #f5f1e5;
  border-radius: 0.4375rem;
  width: 100%;
  box-sizing: border-box;
  padding: 0.85rem;
}

.wa-agente-builder-view .wa-builder-provider-accordion {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0.55rem 0.75rem;
}

.wa-agente-builder-view .wa-builder-provider-accordion summary {
  font-size: 0.78125rem;
  font-weight: 500;
}

html[theme~="dark"] .wa-agente-builder-view .wa-builder-topbar-menu-btn::part(button),
html[theme~="dark"] .wa-agente-builder-view .wa-builder-topbar-more-btn::part(button),
html[theme~="dark"] .wa-agente-builder-view .wa-builder-topbar-back-btn::part(button),
html[theme~="dark"] .wa-agente-builder-view .wa-builder-topbar-exit-btn::part(button) {
  background: rgba(17, 29, 44, 0.92);
}

/* Setas de reordenação: fundo transparente e cor clara no dark mode */
html[theme~="dark"] .wa-agente-builder-view .wa-builder-step-move-btn::part(button) {
  background: transparent;
  color: #b0a898;
}

html[theme~="dark"] .wa-agente-builder-view .wa-builder-step-move-btn:enabled:hover::part(button) {
  color: #e8e0d0;
  background: rgba(255, 255, 255, 0.1);
}

/* No modo escuro o ícone do menu/more fica branco para contraste */
html[theme~="dark"] .wa-agente-builder-view .wa-builder-topbar-menu-btn::part(button),
html[theme~="dark"] .wa-agente-builder-view .wa-builder-topbar-more-btn::part(button) {
  color: #ffffff !important;
}

html[theme~="dark"] .wa-agente-builder-topbar {
  background: rgba(17, 27, 40, 0.96);
  border-bottom-color: rgba(120, 147, 183, 0.34);
}

html[theme~="dark"] .wa-agente-builder-sidebar,
html[theme~="dark"] .wa-agente-builder-view .wa-builder-main-card,
html[theme~="dark"] .wa-agente-builder-view .wa-builder-sidebar-agent-card,
html[theme~="dark"] .wa-agente-builder-view .wa-builder-docs-card,
html[theme~="dark"] .wa-agente-builder-view .wa-builder-output-card,
html[theme~="dark"] .wa-agente-builder-view .wa-builder-provider-accordion {
  background: rgba(17, 27, 40, 0.9);
}

html[theme~="dark"] .wa-agente-builder-view .wa-builder-hero-title,
html[theme~="dark"] .wa-agente-builder-view .wa-builder-main-card-title,
html[theme~="dark"] .wa-agente-builder-view .wa-builder-docs-title,
html[theme~="dark"] .wa-agente-builder-view .wa-builder-output-title {
  color: #eaf2ff;
}

html[theme~="dark"] .wa-agente-builder-view .wa-builder-topbar-breadcrumb,
html[theme~="dark"] .wa-agente-builder-view .wa-builder-topbar-version,
html[theme~="dark"] .wa-agente-builder-view .wa-builder-topbar-save-status,
html[theme~="dark"] .wa-agente-builder-view .wa-builder-main-card-subtitle,
html[theme~="dark"] .wa-agente-builder-view .wa-builder-hero-description,
html[theme~="dark"] .wa-agente-builder-view .wa-builder-agente-subtitle {
  color: #b8c9de;
}

html[theme~="dark"] .wa-agente-builder-view .wa-builder-chip.is-status {
  border-color: rgba(106, 199, 159, 0.45);
  background: rgba(51, 128, 99, 0.2);
  color: #9be9c8;
}

html[theme~="dark"] .wa-agente-builder-view .wa-builder-agente-row.is-selected {
  border-color: rgba(180, 159, 247, 0.42);
  background: rgba(160, 132, 241, 0.2);
}

html[theme~="dark"] .wa-agente-builder-view .wa-builder-step-row.is-selected,
html[theme~="dark"] .wa-agente-builder-view .wa-builder-conversa-row.is-selected {
  background: rgba(158, 132, 226, 0.26);
  box-shadow: inset 0 0 0 1px rgba(182, 164, 236, 0.34);
}

html[theme~="dark"] .wa-agente-builder-view :is(
  vaadin-text-field,
  vaadin-number-field,
  vaadin-integer-field,
  vaadin-combo-box,
  vaadin-text-area
)::part(input-field) {
  background: rgba(13, 21, 31, 0.94);
  border-color: rgba(122, 151, 190, 0.28);
}

@media (max-width: 1100px) {
  .wa-agente-builder-sidebar {
    width: 280px !important;
    min-width: 280px;
  }
}

@media (max-width: 820px) {
  .wa-agente-builder-view .wa-builder-topbar-breadcrumb {
    display: none;
  }

  .wa-agente-builder-content {
    padding-inline: 0.75rem;
  }
}

/* ============================================================
   wa-lista-agentes — tela de lista de cards de agentes
   Mapeado do HTML de referência 20260502_2.1_ray-agentes-lista
   ============================================================ */

.wa-lista-agentes-view {
  background: #faf8f2;
  min-height: 100%;
}

.wa-lista-agentes-body {
  padding: 28px 32px 80px;
  max-width: 1480px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Header editorial */
.wa-lista-agentes-eyebrow {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a39b89;
  font-weight: 500;
  margin-bottom: 8px;
  display: block;
}

.wa-lista-agentes-title {
  font-family: 'Hoefler Text', 'Garamond', 'Georgia', serif;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #14110a;
  margin: 0;
}

html[theme~="dark"] .wa-lista-agentes-title {
  color: #edf3ff;
}

.wa-lista-agentes-desc {
  margin: 10px 0 0;
  font-size: 14px;
  color: #6b6557;
  line-height: 1.6;
  max-width: 720px;
}

html[theme~="dark"] .wa-lista-agentes-desc {
  color: #b3c2da;
}

/* Filtros */
.wa-lista-agentes-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.wa-lista-agentes-search::part(input-field) {
  background: #ffffff;
  border: 0.5px solid rgba(20, 17, 10, 0.12);
  border-radius: 7px;
  min-width: 300px;
  color: #14110a;
}

.wa-lista-agentes-select::part(input-field) {
  background: #ffffff;
  border: 0.5px solid rgba(20, 17, 10, 0.12);
  border-radius: 7px;
  color: #14110a;
}

html[theme~="dark"] .wa-lista-agentes-search::part(input-field),
html[theme~="dark"] .wa-lista-agentes-select::part(input-field) {
  background: rgba(19, 29, 43, 0.88);
  border-color: rgba(122, 151, 190, 0.2);
}

/* Botão "Novo agente" — preto (ink), texto branco, hover levemente mais claro (igual ao mockup).
   Estilo no host: vaadin-button não tem ::part(button). */
.wa-lista-agentes-view .wa-lista-agentes-novo-btn {
  background: #14110a !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 6px !important;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer !important;
  transition: background 0.15s;
}

.wa-lista-agentes-view .wa-lista-agentes-novo-btn:hover {
  background: #2a2620 !important;
}

.wa-lista-agentes-view .wa-lista-agentes-novo-btn vaadin-icon {
  color: #ffffff !important;
}

/* Lista de cards */
.wa-lista-agentes-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Card individual de agente — Div clicável, sem Shadow DOM */
.wa-lista-agentes-view .wa-agent-card {
  /* Sobrescreve o bloco antigo (width: min(100%, 18rem)) */
  width: 100% !important;
  min-width: 0;
  max-width: none;
  min-height: auto;
  box-sizing: border-box;

  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 14px;

  background: #ffffff;
  border: 0.5px solid rgba(20, 17, 10, 0.12);
  border-radius: 10px;
  padding: 18px 20px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  text-align: left;
  color: #14110a;
  overflow: hidden;
}

.wa-lista-agentes-view .wa-agent-card:hover {
  border-color: rgba(20, 17, 10, 0.22);
  background: rgba(20, 17, 10, 0.018);
  box-shadow: 0 2px 8px rgba(20, 17, 10, 0.06);
}

.wa-lista-agentes-view .wa-agent-card:focus-visible {
  outline: 2px solid #1e3a8a;
  outline-offset: 2px;
}

html[theme~="dark"] .wa-lista-agentes-view .wa-agent-card {
  background: rgba(19, 29, 43, 0.88);
  border-color: rgba(122, 151, 190, 0.2);
  color: #edf3ff;
}

html[theme~="dark"] .wa-lista-agentes-view .wa-agent-card:hover {
  background: rgba(25, 38, 58, 0.96);
  border-color: rgba(122, 151, 190, 0.38);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* Área de informações do card — flex:1 com contenção de overflow */
.wa-lista-agentes-view .wa-agent-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* Linha de nome + badges */
.wa-lista-agentes-view .wa-agent-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
  min-width: 0;
}

/* Ícone do agente */
.wa-lista-agentes-view .wa-agent-icon {
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #e1f5ee;
  color: #0f6e56;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Hoefler Text', 'Garamond', 'Georgia', serif;
  font-size: 20px;
  flex-shrink: 0;
  line-height: 1;
}

.wa-lista-agentes-view .wa-agent-icon.draft {
  background: #f5f1e5;
  color: #a39b89;
}

html[theme~="dark"] .wa-lista-agentes-view .wa-agent-icon {
  background: rgba(15, 110, 86, 0.25);
  color: #6dd9b4;
}

html[theme~="dark"] .wa-lista-agentes-view .wa-agent-icon.draft {
  background: rgba(32, 26, 17, 0.4);
  color: #8b816f;
}

/* Nome do agente */
.wa-lista-agentes-view .wa-agent-name {
  font-family: 'Hoefler Text', 'Garamond', 'Georgia', serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.24;
  color: #14110a;
  overflow-wrap: break-word;
  word-break: break-word;
}

html[theme~="dark"] .wa-lista-agentes-view .wa-agent-name {
  color: #edf3ff;
}

.wa-lista-agentes-view .wa-agent-name.draft {
  color: #6b6557;
}

/* Versão */
.wa-lista-agentes-view .wa-agent-version {
  font-size: 11px;
  color: #8e8575;
  font-family: 'SF Mono', 'Monaco', 'Menlo', 'Consolas', monospace;
}

/* Tag Padrão */
.wa-lista-agentes-view .wa-agent-default-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: 3px;
  background: #ede9f7;
  color: #241854;
  text-transform: uppercase;
}

html[theme~="dark"] .wa-lista-agentes-view .wa-agent-default-tag {
  background: rgba(160, 132, 241, 0.2);
  color: #b4a3f4;
}

/* Status */
.wa-lista-agentes-view .wa-agent-status {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 3px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.wa-lista-agentes-view .wa-agent-status.active {
  background: #e1f5ee;
  color: #0f6e56;
}

.wa-lista-agentes-view .wa-agent-status.draft {
  background: #f5f1e5;
  color: #6b6557;
}

html[theme~="dark"] .wa-lista-agentes-view .wa-agent-status.active {
  background: rgba(15, 110, 86, 0.22);
  color: #6dd9b4;
}

html[theme~="dark"] .wa-lista-agentes-view .wa-agent-status.draft {
  background: rgba(32, 26, 17, 0.4);
  color: #8fa5c8;
}

.wa-lista-agentes-view .wa-agent-status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  flex-shrink: 0;
}

/* Descrição */
.wa-lista-agentes-view .wa-agent-desc {
  font-size: 13px;
  color: #584f41;
  line-height: 1.55;
  margin: 4px 0 12px;
  max-width: 760px;
  overflow-wrap: break-word;
  word-break: break-word;
  /* reset margens do vaadin Paragraph */
  padding: 0;
}

html[theme~="dark"] .wa-lista-agentes-view .wa-agent-desc {
  color: #b3c2da;
}

/* Stats */
.wa-lista-agentes-view .wa-agent-stats {
  display: flex;
  flex-direction: row;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 11.5px;
  min-width: 0;
  overflow: hidden;
}

.wa-lista-agentes-view .wa-agent-stat-label {
  font-size: 10px;
  color: #877e70;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  display: block;
}

html[theme~="dark"] .wa-lista-agentes-view .wa-agent-stat-label {
  color: #8fa5c8;
}

.wa-lista-agentes-view .wa-agent-stat-value {
  font-size: 12.5px;
  font-weight: 500;
  font-family: 'SF Mono', 'Monaco', 'Menlo', 'Consolas', monospace;
  color: #14110a;
  display: block;
  line-height: 1.25;
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 200px;
}

html[theme~="dark"] .wa-lista-agentes-view .wa-agent-stat-value {
  color: #edf3ff;
}

.wa-lista-agentes-view .wa-agent-stat-value.sans {
  font-family: "Spectral", Georgia, "Times New Roman", serif;
}

/* Seta */
.wa-lista-agentes-view .wa-agent-chevron {
  color: #a39b89;
  font-size: 16px;
  margin-top: 6px;
  flex-shrink: 0;
  align-self: flex-start;
}

html[theme~="dark"] .wa-lista-agentes-view .wa-agent-chevron {
  color: #8fa5c8;
}

/* Rodapé informativo */
.wa-lista-agentes-footer-help {
  margin-top: 24px;
  padding: 14px 18px;
  background: #e6f1fb;
  border-radius: 8px;
  font-size: 12.5px;
  color: #0c447c;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

html[theme~="dark"] .wa-lista-agentes-footer-help {
  background: rgba(12, 68, 124, 0.2);
  color: #78a9ff;
}

/* Estado vazio */
.wa-lista-agentes-empty {
  text-align: center;
  padding: 60px 20px;
  color: #a39b89;
  font-size: 14px;
}

/* -------------------------------------------------------
   wa-lista-agentes — barra de paginação
   ------------------------------------------------------- */

.wa-lista-agentes-paginacao-wrapper {
  margin-top: 12px;
}

/* Linha principal: contador à esquerda, botões à direita */
.wa-lista-agentes-paginacao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-top: 1px solid rgba(20, 17, 10, 0.08);
  gap: 12px;
  flex-wrap: wrap;
}

/* Contador de resultados ex. "16–30 de 47 agentes" */
.wa-paginacao-contador {
  font-size: 12.5px;
  color: #6b6557;
  white-space: nowrap;
}

/* Agrupa: Anterior + numericos + Próximo */
.wa-paginacao-botoes {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Agrupa somente os botões numéricos */
.wa-paginacao-numericos {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Botão individual (numérico, anterior, próximo) */
.wa-paginacao-btn::part(button) {
  min-width: 2rem;
  width: 2rem;
  height: 2rem;
  border: 0.5px solid rgba(20, 17, 10, 0.14);
  border-radius: 0.375rem;
  background: #ffffff;
  color: #3d3829;
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.wa-paginacao-btn:not([disabled]):hover::part(button) {
  background: #f5f1e5;
  border-color: rgba(20, 17, 10, 0.22);
}

/* Página ativa: destaque em roxo */
.wa-paginacao-btn.is-active::part(button) {
  background: #241854;
  border-color: #241854;
  color: #ffffff;
  font-weight: 700;
}

/* Botões anterior/próximo desabilitados */
.wa-paginacao-btn[disabled]::part(button) {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Reticências entre blocos de páginas */
.wa-paginacao-ellipsis {
  font-size: 0.8125rem;
  color: #a39b89;
  padding: 0 4px;
  user-select: none;
}

/* Dark mode */
html[theme~="dark"] .wa-lista-agentes-paginacao {
  border-top-color: rgba(255, 255, 255, 0.1);
}

html[theme~="dark"] .wa-paginacao-contador {
  color: #a39b89;
}

html[theme~="dark"] .wa-paginacao-btn::part(button) {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: #d4cfc7;
}

html[theme~="dark"] .wa-paginacao-btn:not([disabled]):hover::part(button) {
  background: rgba(255, 255, 255, 0.12);
}

html[theme~="dark"] .wa-paginacao-btn.is-active::part(button) {
  background: #6e59b2;
  border-color: #6e59b2;
  color: #ffffff;
}

html[theme~="dark"] .wa-lista-agentes-empty {
  color: #8fa5c8;
}

@media (max-width: 820px) {
  .wa-lista-agentes-body {
    padding: 20px 16px 60px;
  }

  .wa-lista-agentes-title {
    font-size: 24px;
  }

  .wa-lista-agentes-view .wa-agent-card {
    padding: 14px 14px;
    gap: 10px;
  }

  .wa-lista-agentes-view .wa-agent-stats {
    gap: 12px;
  }

  .wa-lista-agentes-view .wa-agent-stat-value {
    max-width: 140px;
  }

  .wa-lista-agentes-view .wa-agent-desc {
    max-width: 100%;
  }
}

/* ── AgenteBuilder — Step blocks: Formato de Saída, Dependências, Prompts, Cache ─── */

.wa-agente-builder-view .wa-builder-section-label-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.125rem;
}

.wa-agente-builder-view .wa-builder-section-label {
  font-size: var(--wa-builder-font-size-title);
  font-weight: 600;
  color: #14110a;
  letter-spacing: 0.01em;
}

.wa-agente-builder-view .wa-builder-info-tag {
  font-size: 0.6875rem;
  font-weight: 500;
  color: #6b6650;
  background: rgba(107, 102, 80, 0.08);
  border-radius: 0.25rem;
  padding: 0.125rem 0.375rem;
  font-family: ui-monospace, monospace;
}

.wa-agente-builder-view .wa-builder-section-desc {
  font-size: var(--wa-builder-font-size-body-sm);
  color: #6b6650;
  display: block;
  margin-bottom: 0.625rem;
}

/* Formato de Saída — grid 3 colunas */
.wa-agente-builder-view .wa-builder-format-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.5rem;
  width: 100%;
  margin-top: 0.5rem;
}

.wa-agente-builder-view .wa-builder-format-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem 1rem;
  background: #f5f1e5;
  border: 0.5px solid transparent;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.wa-agente-builder-view .wa-builder-format-card:hover {
  background: #f0ece1;
}

.wa-agente-builder-view .wa-builder-format-card.selected {
  background: #ffffff;
  border-color: #241854;
  box-shadow: 0 0 0 2px rgba(36, 24, 84, 0.1);
}

.wa-agente-builder-view .wa-builder-format-card.selected:hover {
  background: #ffffff;
}

.wa-agente-builder-view .wa-builder-format-card-title {
  font-size: 13px;
  font-weight: 500;
  color: #14110a;
  font-family: ui-monospace, monospace;
}

.wa-agente-builder-view .wa-builder-format-card-desc {
  font-size: 11.5px;
  color: #6b6557;
  line-height: 1.4;
}

.wa-agente-builder-view .wa-builder-mono-textarea::part(label) {
  font-size: 12px;
  font-weight: 500;
}

/* A caixa visível do TextArea é o input-field; o background fica aqui, não no textarea nativo */
.wa-agente-builder-view .wa-builder-mono-textarea::part(input-field) {
  background: #f5f1e5;
  border-radius: 6px;
}

.wa-agente-builder-view .wa-builder-mono-textarea::part(textarea) {
  font-family: ui-monospace, monospace;
  font-size: 12.5px;
  line-height: 1.5;
  resize: vertical;
  overflow-y: auto;
}

/* Dependências */
.wa-agente-builder-view .wa-builder-dep-card {
  margin-top: 0.25rem;
}

.wa-agente-builder-view .wa-builder-dep-sublabel {
  font-size: 12px;
  font-weight: 500;
  color: #6b6557;
  display: block;
  margin-top: 1rem;
  padding-top: 0.75rem;
  margin-bottom: 0.5rem;
  border-top: 1px solid rgba(20, 17, 10, 0.06);
}

/* Remove separador do primeiro sub-bloco (não há bloco acima) */
.wa-agente-builder-view .wa-builder-dep-sublabel:first-of-type {
  margin-top: 0.25rem;
  padding-top: 0;
  border-top: none;
}

.wa-agente-builder-view .wa-builder-dep-sublabel-desc {
  font-size: 11.5px;
  color: #a39b89;
  display: block;
  margin-top: -0.125rem;
  margin-bottom: 0.375rem;
}

.wa-agente-builder-view .wa-builder-dep-list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  width: 100%;
}

.wa-agente-builder-view .wa-builder-dep-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 9px 12px;
  border-radius: 6px;
  width: 100%;
  background: #f5f1e5;
  border: 0.5px solid transparent;
  box-sizing: border-box;
  transition: background 0.12s ease, border-color 0.12s ease;
  cursor: pointer;
}

/* Hover: feedback visual ao passar o mouse */
.wa-agente-builder-view .wa-builder-dep-item:hover {
  background: #f0ece1;
}

/* Checked state: destaca itens selecionados */
.wa-agente-builder-view .wa-builder-dep-item:has(vaadin-checkbox[checked]) {
  background: #f0ece1;
  border-color: rgba(20, 17, 10, 0.1);
}

.wa-agente-builder-view .wa-builder-dep-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  color: #6b6557;
  text-align: center;
  background: #ffffff;
  border-radius: 4px;
}

.wa-agente-builder-view .wa-builder-dep-name {
  font-size: 13px;
  color: #14110a;
  font-weight: 500;
  flex: 1;
}

.wa-agente-builder-view .wa-builder-dep-meta {
  font-size: 11.5px;
  color: #a39b89;
}

.wa-agente-builder-view .wa-builder-dep-empty {
  font-size: 12px;
  color: #a39b89;
  font-style: italic;
  padding: 0.25rem 0;
}

/* Toggle box (Consome contexto inicial) — caixa beige igual ao mockup */
.wa-agente-builder-view .wa-builder-toggle-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  margin-top: 0.625rem;
  background: #f5f1e5;
  border-radius: 7px;
  box-sizing: border-box;
  width: 100%;
}

.wa-agente-builder-view .wa-builder-toggle-box vaadin-checkbox::part(label) {
  font-size: 13px;
  font-weight: 500;
  color: #14110a;
}

/* Dentro da caixa a descrição cola no checkbox (sem margens negativas/borda) */
.wa-agente-builder-view .wa-builder-toggle-box .wa-builder-dep-sublabel-desc {
  margin: 0;
  padding-left: 28px;
  font-size: 12px;
  color: #6b6557;
}

/* Prompts */
.wa-agente-builder-view .wa-builder-prompts-card {
  margin-top: 0.25rem;
}

.wa-agente-builder-view .wa-builder-prompt-meta {
  font-size: 0.75rem;
  color: #6b6650;
  display: block;
  margin-top: -0.25rem;
  margin-bottom: 0.75rem;
}

/* Cache */
.wa-agente-builder-view .wa-builder-cache-card {
  margin-top: 0.25rem;
}

.wa-agente-builder-view .wa-builder-cache-insight {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 10px 12px;
  background: #e6f1fb;
  border: none;
  border-left: 3px solid #0c447c;
  border-radius: 4px;
  margin-bottom: 0.75rem;
  font-size: 12px;
  color: #0c447c;
  line-height: 1.4;
}

.wa-agente-builder-view .wa-builder-cache-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0.625rem;
  border-radius: 0.375rem;
  border: 0.5px solid transparent;
  margin-bottom: 0.375rem;
  background: #f5f1e5;
  width: 100%;
  box-sizing: border-box;
  transition: background 0.12s ease, border-color 0.12s ease;
  cursor: pointer;
}

/* Hover: feedback visual consistente com bloco Dependências */
.wa-agente-builder-view .wa-builder-cache-row:hover {
  background: #f0ece1;
}

/* Checked state: destaca o card quando o cache está ativado */
.wa-agente-builder-view .wa-builder-cache-row:has(vaadin-checkbox[checked]) {
  background: #f0ece1;
  border-color: rgba(20, 17, 10, 0.1);
}

/* Hover sobre item já marcado mantém o estado ativo visível, sem regredir ao fundo padrão */
.wa-agente-builder-view .wa-builder-cache-row:has(vaadin-checkbox[checked]):hover {
  background: #f0ece1;
}

/* Checkbox branco quando NÃO selecionado (o estado marcado mantém o azul padrão do Vaadin) */
.wa-agente-builder-view .wa-builder-cache-row vaadin-checkbox:not([checked])::part(checkbox) {
  background: #ffffff;
  border: 1px solid rgba(20, 17, 10, 0.25);
}

/* Combobox desabilitado visualmente quando o checkbox está desmarcado */
.wa-agente-builder-view .wa-builder-cache-row:not(:has(vaadin-checkbox[checked])) .wa-builder-cache-tempo {
  opacity: 0.4;
  pointer-events: none;
}

.wa-agente-builder-view .wa-builder-cache-row-toggle {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  flex: 1;
}

.wa-agente-builder-view .wa-builder-cache-row-info {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.wa-agente-builder-view .wa-builder-cache-row-title {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #14110a;
}

.wa-agente-builder-view .wa-builder-cache-row-desc {
  font-size: 0.75rem;
  color: #6b6650;
}

/* flex-shrink: 0 garante que o combobox de tempo nunca seja comprimido;
   cursor: default sobrescreve o cursor: pointer do row pai, evitando confusão no combobox */
.wa-agente-builder-view .wa-builder-cache-tempo {
  min-width: 5rem;
  max-width: 5rem;
  flex-shrink: 0;
  cursor: default;
}

/* ---- Indicador visual de token no ComboBox de Modelo do Step ---- */

/*
 * O overlay do vaadin-combo-box é renderizado fora do componente pai no DOM,
 * então as regras dos itens precisam ser globais (sem escopo de view).
 */

/* Item com token configurado → texto verde no dropdown */
vaadin-combo-box-item.llm-token-ok {
  color: #15803d;
}

/* Item sem token → texto vermelho no dropdown */
vaadin-combo-box-item.llm-token-ausente {
  color: #b91c1c;
}

/* Borda do campo quando o modelo selecionado tem token → verde discreto */
.wa-agente-builder-view vaadin-combo-box.llm-token-ok::part(input-field) {
  border-color: rgba(21, 128, 61, 0.5);
}

/* Borda do campo quando o modelo selecionado não tem token → vermelho discreto */
.wa-agente-builder-view vaadin-combo-box.llm-token-ausente::part(input-field) {
  border-color: rgba(185, 28, 28, 0.5);
}

/* ================================================================
   Seção: Conversação pós-pipeline — novos blocos
   ================================================================ */

/* Toggle de habilitação — ocupa linha inteira com fundo suave */
.wa-agente-builder-view .wa-conv-toggle-bloco {
  width: 100%;
  padding: 0.5rem 0;
}

.wa-agente-builder-view .wa-conv-toggle-row {
  width: 100%;
  font-size: 0.875rem;
  font-weight: 500;
  color: #14110a;
}

.wa-agente-builder-view .wa-conv-toggle-desc {
  font-size: 0.75rem;
  color: #6b6557;
  margin-top: 0.125rem;
  display: block;
  padding-left: 1.75rem;
}

/* Sublabels dos sub-blocos dentro do card de contexto */
.wa-agente-builder-view .wa-conv-sublabel {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #14110a;
  margin-top: 0.75rem;
  margin-bottom: 0.375rem;
}

/* Separador visual para o segundo sub-bloco em diante */
.wa-agente-builder-view .wa-conv-sublabel-sep {
  padding-top: 0.75rem;
  border-top: 1px solid rgba(20, 17, 10, 0.06);
  margin-top: 1rem;
}

/* Lista de dependências (docs e steps) na conversação */
.wa-agente-builder-view .wa-conv-dep-list {
  width: 100%;
  gap: 0.125rem;
}

/* Cada item (checkbox) da lista de dependências */
.wa-agente-builder-view .wa-conv-dep-item {
  width: 100%;
  box-sizing: border-box;
  padding: 0.375rem 0.5rem;
  border-radius: 0.375rem;
  border: 0.5px solid transparent;
  background: rgba(20, 17, 10, 0.02);
  transition: background 0.12s ease, border-color 0.12s ease;
  cursor: pointer;
}

.wa-agente-builder-view .wa-conv-dep-item:hover {
  background: rgba(20, 17, 10, 0.05);
  border-color: rgba(20, 17, 10, 0.08);
}

.wa-agente-builder-view .wa-conv-dep-item:has(vaadin-checkbox[checked]) {
  background: rgba(20, 17, 10, 0.07);
  border-color: rgba(20, 17, 10, 0.15);
}

.wa-agente-builder-view .wa-conv-dep-item:has(vaadin-checkbox[checked]):hover {
  background: rgba(20, 17, 10, 0.10);
}

/* Mensagem de lista vazia na conversação */
.wa-agente-builder-view .wa-conv-hint-vazio {
  font-size: 0.75rem;
  color: rgba(20, 17, 10, 0.4);
  font-style: italic;
  padding: 0.25rem 0.5rem;
  display: block;
}

/* Card de cache da conversação */
.wa-agente-builder-view .wa-conv-cache-card {
  margin-top: 0;
}

/* Insight estratégico de cache */
.wa-agente-builder-view .wa-conv-cache-insight {
  padding: 0.625rem 0.875rem;
  background: rgba(59, 130, 246, 0.05);
  border: 0.5px solid rgba(59, 130, 246, 0.18);
  border-radius: 0.375rem;
  margin-bottom: 0.875rem;
}

.wa-agente-builder-view .wa-conv-cache-insight-texto {
  font-size: 0.78125rem;
  color: #1e3a5f;
  line-height: 1.5;
  display: block;
}

/* Linha de cache da conversação */
.wa-agente-builder-view .wa-conv-cache-row {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.5rem 0.625rem;
  border-radius: 0.375rem;
  border: 0.5px solid rgba(20, 17, 10, 0.07);
  margin-bottom: 0.375rem;
  background: rgba(20, 17, 10, 0.02);
  width: 100%;
  box-sizing: border-box;
  transition: background 0.12s ease, border-color 0.12s ease;
  cursor: pointer;
}

.wa-agente-builder-view .wa-conv-cache-row:hover {
  background: rgba(20, 17, 10, 0.05);
  border-color: rgba(20, 17, 10, 0.12);
}

.wa-agente-builder-view .wa-conv-cache-row:has(vaadin-checkbox[checked]) {
  background: rgba(20, 17, 10, 0.05);
  border-color: rgba(20, 17, 10, 0.15);
}

.wa-agente-builder-view .wa-conv-cache-row:has(vaadin-checkbox[checked]):hover {
  background: rgba(20, 17, 10, 0.09);
}

/* Checkbox dentro da linha de cache */
.wa-agente-builder-view .wa-conv-cache-chk {
  flex-shrink: 0;
}

/* Título da linha de cache */
.wa-agente-builder-view .wa-conv-cache-row-title {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #14110a;
  display: block;
}

/* Descrição da linha de cache */
.wa-agente-builder-view .wa-conv-cache-row-desc {
  font-size: 0.75rem;
  color: #6b6557;
  display: block;
  margin-top: 0.125rem;
}

/* ComboBox de TTL na linha de cache da conversação */
.wa-agente-builder-view .wa-conv-cache-tempo {
  flex-shrink: 0;
  cursor: default;
}

/* Disabled state do combobox de TTL quando cache inativo */
.wa-agente-builder-view .wa-conv-cache-row:not(:has(vaadin-checkbox[checked])) .wa-conv-cache-tempo {
  opacity: 0.4;
}

/* Card de contexto da conversação */
.wa-agente-builder-view .wa-conv-contexto-card {
  margin-top: 0;
}

/* ============================================================
   wa-auditor-view — Auditor de Contexto de Conversação
   ============================================================ */

.wa-auditor-view {
  background: var(--lumo-base-color);
  min-height: 100%;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* ---- Topbar ---- */
.wa-auditor-topbar {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem 1.5rem 1rem;
  background: var(--lumo-contrast-5pct);
  border-bottom: 1px solid var(--lumo-contrast-10pct);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.wa-auditor-btn-voltar {
  align-self: flex-start;
  font-size: 0.8125rem;
  color: var(--lumo-secondary-text-color) !important;
}

.wa-auditor-title-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.wa-auditor-titulo {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--lumo-header-text-color);
  white-space: nowrap;
}

html[theme~="dark"] .wa-auditor-titulo {
  color: #6ea8ff;
}

.wa-auditor-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.625rem;
  border-radius: 1rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.wa-auditor-badge--origin {
  background: #1e3a5f;
  color: #90caf9;
}

html[theme~="dark"] .wa-auditor-badge--origin {
  background: #0d2540;
  color: #6ea8ff;
}

.wa-auditor-subtitulo {
  width: 100%;
  margin: 0;
  font-size: 0.8125rem;
  color: var(--lumo-secondary-text-color);
}

/* ---- Área de conteúdo ---- */
.wa-auditor-conteudo {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem 1.5rem 2rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* ---- Seção individual ---- */
.wa-auditor-secao {
  background: var(--lumo-contrast-5pct);
  border: 1px solid var(--lumo-contrast-10pct);
  border-radius: 0.625rem;
  padding: 1rem 1.125rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  width: 100%;
  box-sizing: border-box;
}

html[theme~="dark"] .wa-auditor-secao {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.09);
}

.wa-auditor-secao-header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.wa-auditor-secao-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: #1e3a5f;
  color: #90caf9;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
}

html[theme~="dark"] .wa-auditor-secao-num {
  background: #0d2540;
  color: #6ea8ff;
}

.wa-auditor-secao-header-texto {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.wa-auditor-secao-titulo {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--lumo-body-text-color);
  line-height: 1.4;
}

html[theme~="dark"] .wa-auditor-secao-titulo {
  color: #e8f0fe;
}

.wa-auditor-secao-desc {
  font-size: 0.75rem;
  color: var(--lumo-secondary-text-color);
  line-height: 1.4;
}

.wa-auditor-secao-nota {
  margin: 0;
  padding: 0.5rem 0.625rem;
  border-left: 3px solid #356aa0;
  border-radius: 0.25rem;
  background: rgba(53, 106, 160, 0.08);
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--lumo-secondary-text-color);
}

html[theme~="dark"] .wa-auditor-secao-nota {
  border-left-color: #6ea8ff;
  background: rgba(110, 168, 255, 0.12);
  color: #c8d8ff;
}

.wa-auditor-secao--smart-top {
  border-color: rgba(118, 89, 163, 0.35);
  background: rgba(118, 89, 163, 0.06);
}

html[theme~="dark"] .wa-auditor-secao--smart-top {
  border-color: rgba(185, 160, 230, 0.45);
  background: rgba(118, 89, 163, 0.18);
}

.wa-auditor-smart-top-header {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

/* Markdown dentro de seção */
.wa-auditor-markdown {
  width: 100%;
  min-height: 8rem;
  height: auto;
  max-height: none;
  border-radius: 0.625rem;
  padding: 0.65rem 0.875rem;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(12, 28, 45, 0.14);
  color: var(--lumo-body-text-color);
  font-family: var(--lumo-font-family-monospace, "Roboto Mono", "Courier New", monospace) !important;
  font-size: 0.8125rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.wa-auditor-markdown::part(content) {
  max-width: 100%;
  min-width: 0;
  white-space: normal;
}

.wa-auditor-markdown :is(h1, h2, h3, h4, h5, h6) {
  margin: 0.25rem 0 0.5rem;
  font-size: 0.95rem;
  color: inherit;
}

.wa-auditor-markdown p {
  margin: 0.25rem 0 0.5rem;
}

.wa-auditor-markdown :is(ul, ol) {
  margin: 0.25rem 0 0.5rem 1rem;
  padding: 0;
}

.wa-auditor-markdown code {
  background: rgba(255, 255, 255, 0.72);
  padding: 0.08rem 0.25rem;
  border-radius: 0.25rem;
}

.wa-auditor-markdown :is(pre, code) {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.wa-auditor-markdown pre {
  white-space: pre-wrap;
  margin: 0.25rem 0 0.5rem;
}

html[theme~="dark"] .wa-auditor-markdown {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.24);
  color: #f0f4ff;
}

html[theme~="dark"] .wa-auditor-markdown code {
  background: rgba(255, 255, 255, 0.22);
}

.wa-auditor-markdown--vazio {
  color: var(--lumo-disabled-text-color);
  font-style: italic;
}

.wa-auditor-token-info {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: 0.15rem;
  padding: 0.18rem 0.5rem;
  border-radius: 0.45rem;
  border: 1px solid rgba(90, 149, 216, 0.35);
  background: rgba(90, 149, 216, 0.08);
  color: var(--lumo-secondary-text-color);
  font-size: 0.72rem;
  font-weight: 600;
}

html[theme~="dark"] .wa-auditor-token-info {
  border-color: rgba(144, 202, 249, 0.4);
  background: rgba(30, 58, 95, 0.35);
  color: #b9d7ff;
}

.wa-auditor-secao--tokens .wa-auditor-token-total {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--lumo-body-text-color);
}

.wa-auditor-secao--tokens .wa-auditor-token-detail {
  margin: 0;
  font-size: 0.78rem;
  color: var(--lumo-secondary-text-color);
  font-family: var(--lumo-font-family-monospace, "Roboto Mono", "Courier New", monospace);
}

/* Cores por seção (referência do canvas) */
.wa-auditor-secao--n1 .wa-auditor-secao-num,
.wa-auditor-secao--n2 .wa-auditor-secao-num {
  background: #5a95d8;
  color: #e7f3ff;
}

.wa-auditor-secao--n1 .wa-auditor-secao-titulo,
.wa-auditor-secao--n2 .wa-auditor-secao-titulo {
  color: #5a95d8;
}

.wa-auditor-secao--n3 .wa-auditor-secao-num {
  background: #5e855f;
  color: #ecf8ec;
}

.wa-auditor-secao--n3 .wa-auditor-secao-titulo {
  color: #6fae72;
}

.wa-auditor-secao--n4 .wa-auditor-secao-num {
  background: #7e5e95;
  color: #f2ebff;
}

.wa-auditor-secao--n4 .wa-auditor-secao-titulo {
  color: #b996d6;
}

.wa-auditor-secao--n5 .wa-auditor-secao-num {
  background: #6f8faa;
  color: #eef7ff;
}

.wa-auditor-secao--n5 .wa-auditor-secao-titulo {
  color: #9bbdd8;
}

.wa-auditor-secao--n6 .wa-auditor-secao-num {
  background: #947441;
  color: #fff4dc;
}

.wa-auditor-secao--n6 .wa-auditor-secao-titulo {
  color: #d7b279;
}

.wa-auditor-secao--n7 .wa-auditor-secao-num {
  background: #7659a3;
  color: #f3edff;
}

.wa-auditor-secao--n7 .wa-auditor-secao-titulo {
  color: #b9a0e6;
}

/* ---- Seção de metadados ---- */
.wa-auditor-secao--meta {
  background: var(--lumo-contrast-5pct);
}

html[theme~="dark"] .wa-auditor-secao--meta {
  background: rgba(255, 255, 255, 0.03);
}

.wa-auditor-meta-titulo {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--lumo-secondary-text-color);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.wa-auditor-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 0.625rem 1.25rem;
  margin-top: 0.625rem;
}

.wa-auditor-meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
  overflow: hidden;
}

.wa-auditor-meta-chave {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--lumo-secondary-text-color);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.wa-auditor-meta-valor {
  font-family: var(--lumo-font-family-monospace, "Roboto Mono", "Courier New", monospace);
  font-size: 0.8125rem;
  color: var(--lumo-body-text-color);
  overflow-wrap: break-word;
  word-break: break-all;
}

.wa-auditor-meta-link {
  text-decoration: underline;
  text-decoration-color: rgba(90, 149, 216, 0.55);
  text-underline-offset: 2px;
}

.wa-auditor-meta-link:hover {
  color: #5a95d8;
}

html[theme~="dark"] .wa-auditor-meta-valor {
  color: #bdd0ff;
}

/* ============================================================
   wa-agente-publico-view — Página somente leitura do agente
   ============================================================ */

.wa-agente-publico-view {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 1.25rem 1.5rem 2rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
  box-sizing: border-box;
}

.wa-agente-publico-card {
  width: min(100%, 44rem);
  max-width: 100%;
  min-width: 0;
  margin: 0 auto;
  background: var(--lumo-base-color);
  border: 1px solid var(--lumo-contrast-10pct);
  border-radius: 0.9rem;
  padding: 1.4rem 1.5rem 1.6rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.45rem;
}

html[theme~="dark"] .wa-agente-publico-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.16);
}

.wa-agente-publico-foto {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(90, 149, 216, 0.4);
  margin-bottom: 0.2rem;
}

.wa-agente-publico-nome {
  margin: 0;
  font-size: 1.22rem;
  font-weight: 700;
  color: var(--lumo-header-text-color);
}

.wa-agente-publico-descricao {
  margin: 0.15rem auto 0;
  max-width: 36rem;
  color: var(--lumo-secondary-text-color);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.wa-agente-publico-id {
  margin: 0.45rem 0 0;
  color: var(--lumo-tertiary-text-color);
  font-size: 0.78rem;
  font-family: var(--lumo-font-family-monospace, "Roboto Mono", "Courier New", monospace);
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ================================================================
   MODAL NOVO CHAT — seleção de agente do workspace
   ================================================================ */

vaadin-dialog.wa-modal-novo-chat::part(overlay) {
  border-radius: 14px;
  padding: 0;
  box-shadow: 0 24px 64px -12px rgba(20, 17, 10, 0.40);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: calc(100vh - 48px);
}

vaadin-dialog.wa-modal-novo-chat::part(content) {
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

/* --- Header --- */
.wa-modal-novo-chat-header {
  position: relative;
  padding: 20px 24px 16px;
  border-bottom: 0.5px solid rgba(20, 17, 10, 0.12);
  flex-shrink: 0;
}

.wa-modal-eyebrow {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a39b89;
  font-weight: 500;
  margin-bottom: 4px;
}

.wa-modal-novo-chat-title {
  margin: 0;
  font-family: var(--wa-serif, Georgia, serif);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: #14110a;
}

.wa-modal-novo-chat-sub {
  margin: 6px 0 0;
  font-size: 13px;
  color: #6b6557;
  line-height: 1.55;
}

.wa-modal-novo-chat-close {
  position: absolute;
  top: 16px;
  right: 16px;
  min-width: 0 !important;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 6px;
  color: #a39b89;
  background: transparent;
  border: none;
  cursor: pointer;
}

.wa-modal-novo-chat-close:hover {
  background: #f5f1e5;
  color: #14110a;
}

/* --- Body --- */
.wa-modal-novo-chat-body {
  padding: 18px 24px;
  overflow-y: auto;
  flex: 1;
  gap: 0 !important;
}

.wa-modal-section-label {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a39b89;
  font-weight: 500;
  margin-bottom: 10px;
}

/* --- Agent list & cards --- */
.wa-modal-novo-chat-agent-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wa-modal-novo-chat-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  background: #ffffff;
  border: 1.5px solid rgba(20, 17, 10, 0.12);
  border-radius: 10px;
  cursor: pointer !important;
  transition: border-color 0.15s, background 0.15s;
  width: 100%;
  box-sizing: border-box;
  user-select: none;
}

.wa-modal-novo-chat-card * {
  cursor: pointer !important;
}

.wa-modal-novo-chat-card:hover {
  border-color: rgba(20, 17, 10, 0.20);
  background: rgba(20, 17, 10, 0.015);
}

.wa-modal-novo-chat-card.wa-modal-card-selecionado {
  border-color: #14110a;
  background: rgba(20, 17, 10, 0.025);
}

/* Radio circle */
.wa-modal-novo-chat-radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(20, 17, 10, 0.12);
  flex-shrink: 0;
  margin-top: 2px;
  box-sizing: border-box;
  transition: all 0.15s;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wa-modal-novo-chat-card.wa-modal-card-selecionado .wa-modal-novo-chat-radio {
  border-color: #14110a;
  background: #14110a;
  box-shadow: inset 0 0 0 3px #14110a, inset 0 0 0 4.5px #ffffff, inset 0 0 0 9px #14110a;
}

/* Card content */
.wa-modal-novo-chat-card-info {
  flex: 1;
  min-width: 0;
}

.wa-modal-novo-chat-card-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.wa-modal-novo-chat-card-nome {
  font-family: var(--wa-serif, Georgia, serif);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: #14110a;
}

.wa-modal-padrao-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: 3px;
  background: #ede9f7;
  color: #241854;
  text-transform: uppercase;
}

.wa-modal-novo-chat-card-desc {
  font-size: 12.5px;
  color: #6b6557;
  line-height: 1.5;
  display: block;
  margin-bottom: 10px;
}

.wa-modal-novo-chat-card-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.wa-modal-meta-item {
  font-size: 10.5px;
  color: #a39b89;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Pipeline pills */
.wa-modal-novo-chat-pipeline {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 0.5px solid rgba(20, 17, 10, 0.07);
}

.wa-modal-step-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: #f5f1e5;
  border-radius: 4px;
  font-size: 10.5px;
  color: #6b6557;
  white-space: nowrap;
}

.wa-modal-step-num {
  font-family: var(--wa-serif, Georgia, serif);
  font-style: italic;
  font-weight: 500;
  color: #14110a;
  font-size: 11px;
  margin-right: 2px;
}

.wa-modal-step-arrow {
  font-size: 11px;
  color: #a39b89;
  margin: 0 1px;
}

/* --- Docs section --- */
.wa-modal-novo-chat-docs {
  margin-top: 18px;
  padding: 14px 16px;
  background: #f5f1e5;
  border-radius: 10px;
}

.wa-modal-novo-chat-docs .wa-modal-section-label {
  margin-bottom: 8px;
}

.wa-modal-docs-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 0;
}

.wa-modal-docs-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  padding: 5px 0;
}

.wa-modal-docs-dot {
  color: #a39b89;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
}

.wa-modal-docs-nome {
  color: #14110a;
}

.wa-modal-docs-stat {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: #6b6557;
  padding-top: 10px;
  border-top: 0.5px solid rgba(20, 17, 10, 0.07);
  margin-top: 12px;
}

.wa-modal-docs-stat-aviso {
  color: #791f1f;
}

/* --- Empty state --- */
.wa-modal-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2.5rem 1.5rem;
  gap: 0.6rem;
}

.wa-modal-empty-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #6b6557;
}

.wa-modal-empty-desc {
  margin: 0;
  font-size: 0.85rem;
  color: #a39b89;
  max-width: 28rem;
}

/* --- Footer --- */
.wa-modal-novo-chat-footer {
  padding: 14px 24px;
  border-top: 0.5px solid rgba(20, 17, 10, 0.12);
  background: #f5f1e5;
  border-radius: 0 0 14px 14px;
  flex-shrink: 0;
  box-sizing: border-box;
}

vaadin-button.wa-modal-btn-cancelar {
  --lumo-button-text-color: #6b6557;
  font-size: 13px;
}

vaadin-button.wa-modal-btn-criar {
  min-width: 220px;
  border-radius: 7px;
  font-size: 13px;
  --lumo-primary-color: #14110a;
  --lumo-primary-contrast-color: #ffffff;
  --lumo-primary-color-50pct: rgba(20, 17, 10, 0.5);
}

vaadin-button.wa-modal-btn-criar[disabled] {
  --lumo-primary-color: #f5dfc0;
  --lumo-primary-contrast-color: #854f0b;
  opacity: 1;
  cursor: not-allowed;
}

/* =====================================================
   Modal novo chat — Painel documentos requeridos
   ===================================================== */
.wa-modal-docs-panel {
  width: 100%;
}

.wa-modal-docs-check {
  background: #f5f1e5;
  border-radius: 10px;
  margin-top: 18px;
  padding: 14px 16px;
}

.wa-modal-docs-label {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #a39b89;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.wa-modal-docs-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.wa-modal-docs-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.wa-modal-docs-icon {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
}

.wa-modal-docs-icon-ok {
  background: #0f6e56;
  color: #fff;
}

.wa-modal-docs-icon-miss {
  background: #854f0b;
  color: #fff;
}

.wa-modal-docs-icon-opt {
  background: #b0a88a;
  color: #fff;
}

.wa-modal-docs-row-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.wa-modal-docs-row-label {
  font-size: 0.82rem;
  font-weight: 500;
  color: #3b3526;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wa-modal-docs-badge-ob {
  font-size: 0.68rem;
  font-weight: 600;
  color: #854f0b;
  background: #f5dfc0;
  border-radius: 0.25rem;
  padding: 0.05rem 0.35rem;
  white-space: nowrap;
}

.wa-modal-docs-badge-opt {
  font-size: 0.68rem;
  font-weight: 600;
  color: #7a6e56;
  background: #e8e2d3;
  border-radius: 0.25rem;
  padding: 0.05rem 0.35rem;
  white-space: nowrap;
}

.wa-modal-docs-estado-ok {
  font-size: 0.78rem;
  color: #0f6e56;
  font-weight: 500;
  white-space: nowrap;
  margin-left: auto;
}

.wa-modal-docs-estado-miss {
  font-size: 0.78rem;
  color: #854f0b;
  font-weight: 500;
  white-space: nowrap;
  margin-left: auto;
}

.wa-modal-docs-stats {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 0.5px solid rgba(20, 17, 10, 0.07);
  font-size: 11.5px;
  color: #6b6557;
}

.wa-modal-docs-aviso {
  font-size: 0.8rem;
  color: #854f0b;
  font-weight: 600;
}

.wa-modal-docs-cmb-arquivo {
  margin-left: auto;
  width: 180px;
  flex-shrink: 0;
}

.wa-modal-docs-cmb-arquivo::part(input-field) {
  font-size: 0.78rem;
  min-height: 1.8rem;
  height: 1.8rem;
  padding: 0 0.4rem;
  background: #fff;
  border: 1px solid #c8bfa8;
  border-radius: 0.3rem;
}

.wa-modal-docs-cmb-arquivo::part(label) {
  display: none;
}

/* ── Compacto quando menu lateral aberto ─────────────────────────────── */
vaadin-app-layout[drawer-opened] .wa-projeto-cadastro-grid {
  gap: 12px;
}

vaadin-app-layout[drawer-opened] .wa-projeto-cadastro-cards-inner {
  gap: 12px;
}

vaadin-app-layout[drawer-opened] .wa-projeto-cadastro-card {
  padding: 14px 16px;
}

vaadin-app-layout[drawer-opened] .wa-projeto-cadastro-card-header {
  margin-bottom: 10px;
}

vaadin-app-layout[drawer-opened] .wa-projeto-cadastro-card-title {
  font-size: 15px;
}

vaadin-app-layout[drawer-opened] .wa-projeto-cadastro-card-subtitle {
  font-size: 11px;
}

vaadin-app-layout[drawer-opened] .wa-projeto-cadastro-view vaadin-text-field::part(input-field),
vaadin-app-layout[drawer-opened] .wa-projeto-cadastro-view vaadin-text-area::part(input-field),
vaadin-app-layout[drawer-opened] .wa-projeto-cadastro-view vaadin-combo-box::part(input-field),
vaadin-app-layout[drawer-opened] .wa-projeto-cadastro-view vaadin-date-picker::part(input-field),
vaadin-app-layout[drawer-opened] .wa-projeto-cadastro-view vaadin-select::part(input-field) {
  font-size: 12px;
  min-height: 30px;
  padding: 0 8px;
}

vaadin-app-layout[drawer-opened] .wa-projeto-cadastro-view vaadin-text-field::part(label),
vaadin-app-layout[drawer-opened] .wa-projeto-cadastro-view vaadin-text-area::part(label),
vaadin-app-layout[drawer-opened] .wa-projeto-cadastro-view vaadin-combo-box::part(label),
vaadin-app-layout[drawer-opened] .wa-projeto-cadastro-view vaadin-date-picker::part(label),
vaadin-app-layout[drawer-opened] .wa-projeto-cadastro-view vaadin-select::part(label) {
  font-size: 10px;
}

/* ── Compacto para telas pequenas (notebook 1366x768) — mesmo padrão do drawer-opened ── */
@media (max-width: 1440px) {
  .wa-projeto-cadastro-grid,
  .wa-projeto-cadastro-cards-inner {
    gap: 12px;
  }

  .wa-projeto-cadastro-card {
    padding: 14px 16px;
  }

  .wa-projeto-cadastro-card-header {
    margin-bottom: 10px;
  }

  .wa-projeto-cadastro-card-title {
    font-size: 15px;
  }

  .wa-projeto-cadastro-card-subtitle {
    font-size: 11px;
  }

  .wa-projeto-cadastro-view vaadin-text-field::part(input-field),
  .wa-projeto-cadastro-view vaadin-text-area::part(input-field),
  .wa-projeto-cadastro-view vaadin-combo-box::part(input-field),
  .wa-projeto-cadastro-view vaadin-date-picker::part(input-field),
  .wa-projeto-cadastro-view vaadin-select::part(input-field) {
    font-size: 12px;
    min-height: 30px;
    padding: 0 8px;
  }

  .wa-projeto-cadastro-view vaadin-text-field::part(label),
  .wa-projeto-cadastro-view vaadin-text-area::part(label),
  .wa-projeto-cadastro-view vaadin-combo-box::part(label),
  .wa-projeto-cadastro-view vaadin-date-picker::part(label),
  .wa-projeto-cadastro-view vaadin-select::part(label) {
    font-size: 10px;
  }

  .wa-projeto-cadastro-side-card,
  .wa-projeto-cadastro-side-card .wa-projeto-cadastro-card {
    padding: 12px 14px;
  }

  .wa-chat-central-file-card {
    padding: 10px 12px;
  }
}

/* TEMP: tela de Perfil enriquecida — identidade (avatar+nome+badges), pills de métrica
   (branco, contraste com o fundo bege da página), chips de workspace (roxo claro, mesmo
   padrão de Usuários), personalidade em itálico serifado, rodapé com e-mail. Sem cards
   brancos tipo "BI painel" — tudo em pill/etiqueta, no tom editorial do resto do sistema. */
.wa-perfil-identidade {
  margin: 4px 0 16px;
}

.wa-perfil-avatar {
  --vaadin-avatar-size: 80px;
  --vaadin-avatar-background: #f3e6cf;
  --vaadin-avatar-color: #8a6d3f;
}

.wa-perfil-nome-bloco {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wa-perfil-nome {
  font-family: "Spectral", Georgia, "Times New Roman", serif;
  font-size: 20px;
  color: #14110a;
}

.wa-perfil-badges {
  flex-wrap: wrap;
}

.wa-perfil-badge-perfil {
  background: #ede9f7;
  color: #241854;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
}

.wa-perfil-badge-status {
  background: #eaf3de;
  color: #3b6d11;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
}

.wa-perfil-metricas {
  flex-wrap: wrap;
  margin-bottom: 16px;
}

/* Pill de fundo branco com borda — contraste com o bege da página (não usar bege aqui). */
.wa-perfil-pill-metrica {
  gap: 6px;
  background: #ffffff;
  border: 1px solid #e8e3d6;
  color: #3b3528;
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 999px;
}

.wa-perfil-pill-icon {
  font-size: 13px;
  color: #6b6557;
}

.wa-perfil-secao {
  margin-bottom: 16px;
}

.wa-perfil-secao-titulo {
  display: block;
  font-size: 12px;
  color: #8a8272;
  margin-bottom: 6px;
}

.wa-perfil-workspaces-chips {
  flex-wrap: wrap;
}

.wa-perfil-workspace-chip {
  background: #ede9f7;
  color: #241854;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 999px;
}

.wa-perfil-personalidade {
  font-family: "Spectral", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 14px;
  line-height: 1.6;
  color: #3b3528;
  margin: 0;
}

.wa-perfil-rodape {
  border-top: 1px solid #e8e3d6;
  padding-top: 14px;
}

.wa-perfil-rodape-email {
  font-size: 13px;
  color: #6b6557;
}

/* Workspaces: abas substituindo os 3 cards empilhados (Cadastro/Campos/Lista) por navegação horizontal. */
.wa-workspaces-view .wa-workspaces-sidebar-page-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  padding-top: 0.6rem;
  margin-top: 0.3rem;
  border-top: 1px solid #e8e3d6;
  flex-shrink: 0;
}

.wa-workspaces-view .wa-workspaces-sidebar-page-footer .wa-workspaces-sidebar-page-indicator {
  margin: 0;
}

.wa-workspaces-view .wa-workspaces-sidebar-page-btn {
  width: 1.9rem;
  height: 1.9rem;
  min-width: 0;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #14110a;
  padding: 0;
  transition: background-color 0.12s ease, transform 0.12s ease;
}

.wa-workspaces-view .wa-workspaces-sidebar-page-btn vaadin-icon,
.wa-workspaces-view .wa-workspaces-sidebar-page-btn::part(icon) {
  color: #14110a !important;
  transition: color 0.12s ease;
}

.wa-workspaces-view .wa-workspaces-sidebar-page-btn:not([disabled]) {
  cursor: pointer;
}

.wa-workspaces-view .wa-workspaces-sidebar-page-btn:not([disabled]):hover {
  background: #14110a;
  transform: scale(1.1);
}

.wa-workspaces-view .wa-workspaces-sidebar-page-btn:not([disabled]):hover vaadin-icon,
.wa-workspaces-view .wa-workspaces-sidebar-page-btn:not([disabled]):hover::part(icon) {
  color: #ffffff !important;
}

.wa-workspaces-view .wa-workspaces-sidebar-page-btn[disabled] {
  border-color: #d8d1c4;
  opacity: 0.5;
}

.wa-workspaces-view .wa-workspaces-coluna-principal {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.wa-workspaces-view .wa-workspaces-linha-selecionado {
  margin-bottom: 0.75rem;
}

.wa-workspaces-view .wa-workspaces-pill-selecionado {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #f3e6cf;
  color: #14110a;
  font-family: "Spectral", Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}

.wa-workspaces-view .wa-workspaces-pill-selecionado:hover {
  background: #eddcb4;
  box-shadow: 0 4px 12px rgba(20, 17, 10, 0.16);
  transform: translateY(-2px);
}

.wa-workspaces-view .wa-workspaces-pill-selecionado vaadin-icon {
  font-size: 0.95rem;
  color: #8a6d3f;
}

.wa-workspaces-view .wa-workspaces-resumo-faixa {
  margin-top: 0 !important;
}

.wa-workspaces-view .wa-workspaces-tabs {
  min-width: 0;
}

.wa-workspaces-view .wa-admin-toolbar {
  margin-bottom: 1.1rem;
}

.wa-workspaces-view .wa-workspaces-tabs::part(tabs) {
  margin-bottom: 0.75rem;
}

.wa-workspaces-view .wa-workspaces-tabs vaadin-tab {
  font-weight: 500;
}

/* Faixa de resumo compacta no hero, substituindo os 3 cards grandes de resumo. */
.wa-workspaces-view .wa-workspaces-resumo-faixa {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.6rem;
}

.wa-workspaces-view .wa-workspaces-resumo-item {
  background: #ffffff;
  border: 1px solid #e8e3d6;
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  gap: 0.4rem;
  font-size: 0.82rem;
}

.wa-workspaces-view .wa-workspaces-resumo-icon {
  font-size: 0.7rem;
  color: #8a6d3f;
}

.wa-workspaces-view .wa-workspaces-resumo-label {
  color: var(--lumo-secondary-text-color);
}

.wa-workspaces-view .wa-workspaces-resumo-valor {
  font-weight: 500;
  color: #14110a;
}

html[theme~="dark"] .wa-workspaces-view .wa-workspaces-resumo-item {
  background: var(--lumo-contrast-5pct);
  border-color: var(--lumo-contrast-15pct);
}

html[theme~="dark"] .wa-workspaces-view .wa-workspaces-resumo-valor {
  color: inherit;
}

/* Status Ativo: pill e ícone verdes. Qualquer outro status: pill e ícone vermelhos. */
.wa-workspaces-view .wa-workspaces-resumo-faixa.wa-workspaces-resumo-ativo .wa-workspaces-resumo-item {
  background: #eaf3de;
  border-color: #c0dd97;
}

.wa-workspaces-view .wa-workspaces-resumo-faixa.wa-workspaces-resumo-ativo .wa-workspaces-resumo-icon,
.wa-workspaces-view .wa-workspaces-resumo-faixa.wa-workspaces-resumo-ativo .wa-workspaces-resumo-valor {
  color: #27500a;
}

.wa-workspaces-view .wa-workspaces-resumo-faixa.wa-workspaces-resumo-inativo .wa-workspaces-resumo-item {
  background: #fcebeb;
  border-color: #f09595;
}

.wa-workspaces-view .wa-workspaces-resumo-faixa.wa-workspaces-resumo-inativo .wa-workspaces-resumo-icon,
.wa-workspaces-view .wa-workspaces-resumo-faixa.wa-workspaces-resumo-inativo .wa-workspaces-resumo-valor {
  color: #791f1f;
}

/* Cards de ferramentas do workspace (Agentes/FAQ/Memória/Skills), substituindo os botões extras da toolbar. */
.wa-workspaces-view .wa-workspaces-ferramentas-aviso {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #f5f1e5;
  border: 1px solid #e8e3d6;
  border-radius: var(--lumo-border-radius-m);
  padding: 0.6rem 0.85rem;
  margin-bottom: 0.85rem;
  color: #5f5749;
  font-size: 0.85rem;
}

.wa-workspaces-view .wa-workspaces-ferramentas-aviso vaadin-icon {
  font-size: 1.1rem;
  color: #8a6d3f;
  flex-shrink: 0;
}

.wa-workspaces-view .wa-workspaces-ferramentas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0.75rem;
}

.wa-workspaces-view .wa-workspaces-ferramenta-card {
  height: auto;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 1.1rem 0.75rem;
  border: 1px solid #e8e3d6;
  border-radius: var(--lumo-border-radius-l);
  background: transparent;
  color: #14110a !important;
  font-weight: 500;
}

.wa-workspaces-view .wa-workspaces-ferramenta-card::part(button) {
  flex-direction: column;
  gap: 0.4rem;
}

.wa-workspaces-view .wa-workspaces-ferramenta-card:not([disabled]):hover {
  background: #f3e6cf;
  border-color: #f3e6cf;
}

.wa-workspaces-view .wa-workspaces-ferramenta-card vaadin-icon {
  font-size: 1.4rem;
  color: #14110a !important;
}

/* Modal "Variáveis do workspace" (AgenteBuilderView) — pills clicáveis agrupadas por bloco,
   estilo aprovado em mockup: label em negrito + chave técnica em mono abaixo, fundo azul escuro. */
.wa-builder-variavel-bloco-titulo {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--lumo-secondary-text-color);
  margin: 0.9rem 0 0.4rem;
}

.wa-builder-variavel-bloco-titulo:first-of-type {
  margin-top: 0;
}

.wa-builder-variavel-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.wa-builder-variavel-pill {
  cursor: pointer;
  background: #e8f0fc;
  color: #1a3d6e;
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  transition: background-color 120ms ease, transform 120ms ease;
}

.wa-builder-variavel-pill:hover {
  background: #d3e2f9;
  transform: translateY(-1px);
}

.wa-builder-variavel-pill:active {
  transform: translateY(0) scale(0.98);
}

.wa-builder-variavel-pill-label {
  display: block;
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1.2;
}

.wa-builder-variavel-pill-chave {
  display: block;
  font-family: 'SF Mono', Monaco, Menlo, monospace;
  font-size: 0.72rem;
  color: #4a6fa5;
  line-height: 1.2;
}

/* Cabeçalho do campo com botão "Inserir variável": label recriado (o nativo do TextArea foi
   removido) + botão, lado a lado, em fluxo normal — margem real garantida, sem position:absolute. */
.wa-builder-textarea-variavel-label {
  font-size: var(--lumo-font-size-s);
  font-weight: 500;
  color: var(--lumo-body-text-color);
}

.wa-builder-textarea-variavel-header {
  margin-bottom: 0.4rem;
}

/* ===== Assistente Inteligente — botão flutuante + drawer lateral direito ===== */
/* Paleta do próprio sistema (marrom/preto + bege) — sem azul do Lumo padrão.
   Sobrescrever --lumo-primary-* aqui já retinta automaticamente todo botão
   Lumo (inclusive variantes "tertiary", que herdam --lumo-primary-text-color)
   dentro deste componente, sem precisar customizar botão por botão. */
.wa-assistente-widget {
  --lumo-primary-color: #4a3f2f;
  --lumo-primary-color-50pct: rgba(74, 63, 47, 0.5);
  --lumo-primary-color-10pct: rgba(74, 63, 47, 0.1);
  --lumo-primary-text-color: #4a3f2f;
  --lumo-primary-contrast-color: #fff7ea;
}

.wa-assistente-botao-wrapper {
  position: fixed;
  right: var(--lumo-space-l);
  bottom: var(--lumo-space-l);
  z-index: 9000;
}

/*
 * O fundo vai no host (vaadin-button), não em ::part(button) — esse part não existe no
 * vaadin-button; o próprio host é o botão. Seletor elemento+classe para vencer o Lumo.
 */
vaadin-button.wa-assistente-botao-flutuante {
  width: 56px;
  height: 56px;
  min-width: 56px;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  /* Verde-petróleo da marca, no lugar do preto padrão do tema. */
  background: linear-gradient(135deg, #0f6e56 0%, #04342c 100%);
  border: 1px solid rgba(159, 225, 203, 0.35);
  box-shadow: var(--wa-shell-shadow, var(--lumo-box-shadow-m));
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}

vaadin-button.wa-assistente-botao-flutuante:hover {
  transform: scale(1.06);
  box-shadow: 0 6px 20px rgba(4, 52, 44, 0.45);
}

vaadin-button.wa-assistente-botao-flutuante:active {
  transform: scale(0.97);
}

/* O PNG já tem fundo transparente e o desenho ocupa ~98% do canvas (sem sobra
   embutida) — por isso o ícone pode chegar perto do tamanho do botão (56px). */
.wa-assistente-botao-logo {
  width: 46px;
  height: 46px;
  object-fit: contain;
  pointer-events: none;
}

.wa-assistente-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 400px;
  max-width: 100vw;
  background: #f8f3eb;
  color: #201a11;
  box-shadow: var(--wa-shell-shadow, var(--lumo-box-shadow-xl));
  z-index: 9001;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.2s ease-in-out;
}

.wa-assistente-drawer-aberto {
  transform: translateX(0);
}

.wa-assistente-cabecalho {
  padding: var(--lumo-space-m) var(--lumo-space-m);
  border-bottom: 1px solid #e8dfcf;
  background: #f3ecdf;
  flex: 0 0 auto;
}

/* Marca do Ray antes do título, no cabeçalho de fundo claro do Drawer. */
.wa-assistente-cabecalho-logo {
  width: 26px;
  height: 26px;
  object-fit: contain;
  flex: 0 0 auto;
}

.wa-assistente-titulo {
  font-weight: 600;
  font-size: var(--lumo-font-size-m);
  color: #201a11;
}

/* Botões de ícone do cabeçalho (histórico / nova conversa / fechar): cresce o ícone,
   muda de cor e ganha borda pontilhada ao passar o mouse. */
.wa-assistente-cabecalho vaadin-button {
  cursor: pointer;
  border-radius: var(--lumo-border-radius-m);
  transition: border-color 0.15s ease, background 0.15s ease;
  border: 1px dashed transparent;
}

.wa-assistente-cabecalho vaadin-button:hover {
  border-color: #4a3f2f;
  background: #ece3d1;
}

.wa-assistente-cabecalho vaadin-button:hover vaadin-icon {
  transform: scale(1.2);
  color: #4a3f2f;
}

.wa-assistente-cabecalho vaadin-icon {
  transition: transform 0.15s ease, color 0.15s ease;
}

.wa-assistente-scroller {
  flex: 1 1 auto;
  min-height: 0;
}

.wa-assistente-corpo {
  padding: var(--lumo-space-m);
}

.wa-assistente-boas-vindas {
  display: flex;
  flex-direction: column;
  gap: var(--lumo-space-m);
}

.wa-assistente-saudacao {
  color: #6d6558;
}

.wa-assistente-sugestoes {
  gap: 0.25rem;
}

.wa-assistente-sugestao-item {
  justify-content: flex-start;
  text-align: left;
  width: 100%;
}

.wa-assistente-bolha-usuario {
  align-self: flex-end;
  background: linear-gradient(155deg, #4a3f2f 0%, #241f18 55%, #14110c 100%);
  color: #fff7ea;
  border-radius: var(--lumo-border-radius-l);
  padding: 0.5rem 0.9rem;
  margin-left: 20%;
  margin-bottom: var(--lumo-space-s);
}

.wa-assistente-bolha-assistente {
  background: #fffcf6;
  border: 1px solid #e8dfcf;
  box-shadow: 0 1px 3px rgba(32, 26, 17, 0.06);
  color: #201a11;
  border-radius: var(--lumo-border-radius-l);
  padding: 0.6rem 0.9rem;
  margin-right: 10%;
  margin-bottom: var(--lumo-space-s);
}

.wa-assistente-acoes-rapidas {
  margin-top: 0.35rem;
}

.wa-assistente-carregando {
  margin: 0 var(--lumo-space-m);
}

.wa-assistente-rodape {
  padding: var(--lumo-space-m);
  border-top: 1px solid #e8dfcf;
  background: #f3ecdf;
  flex: 0 0 auto;
}

/* Botão de enviar: só muda de cor no hover, sem borda pontilhada (não é um ícone
   discreto de cabeçalho, é a ação principal do rodapé). */
.wa-assistente-rodape vaadin-button {
  cursor: pointer;
  transition: background 0.15s ease;
}

.wa-assistente-rodape vaadin-button:hover {
  background: #241f18;
}

.wa-assistente-campo-pergunta {
  --lumo-contrast-10pct: rgba(32, 26, 17, 0.1);
}

/* Dialogs (histórico / ver documentação) são renderizados fora da árvore do
   widget pelo Vaadin — precisam da mesma sobrescrita de paleta em separado. */
.wa-assistente-dialog::part(overlay) {
  --lumo-primary-color: #4a3f2f;
  --lumo-primary-color-50pct: rgba(74, 63, 47, 0.5);
  --lumo-primary-color-10pct: rgba(74, 63, 47, 0.1);
  --lumo-primary-text-color: #4a3f2f;
  --lumo-primary-contrast-color: #fff7ea;
  background: #f8f3eb;
  color: #201a11;
}

.wa-assistente-dialog::part(header) {
  border-bottom: 1px solid #e8dfcf;
}

.wa-assistente-dialog::part(footer) {
  border-top: 1px solid #e8dfcf;
}

.wa-assistente-historico-scroller {
  /* ~8 itens visíveis (linha + hora ≈ 2.6rem cada) antes de rolar */
  max-height: 21rem;
  width: 100%;
}

.wa-assistente-historico-item {
  padding: 0.4rem 0.3rem 0.4rem 0.6rem;
  border-radius: var(--lumo-border-radius-m);
  cursor: pointer;
}

.wa-assistente-historico-item:hover {
  background: #f3ecdf;
}

.wa-assistente-historico-titulo {
  color: #201a11;
  font-size: var(--lumo-font-size-s);
}

.wa-assistente-historico-tempo {
  color: #6d6558;
  font-size: var(--lumo-font-size-xs);
}

.wa-assistente-dialog hr {
  border: none;
  border-top: 1px solid #e8dfcf;
  margin: 0.25rem 0;
}

@media (max-width: 480px) {
  .wa-assistente-drawer {
    width: 100vw;
  }
}

/* =====================================================================
   BRIEFING DE DEFESA DE PROCESSO (RF0005)
   Mesma linguagem visual dos run-blocks do chat: canvas quente, card
   branco com faixa marrom no cabeçalho, número em círculo escuro e
   título serifado. Tokens replicados de .wa-chat-view (que é escopado
   e não alcança esta tela).
   ===================================================================== */

.wa-briefing-page {
  --wa-serif: "Spectral", Georgia, "Times New Roman", serif;
  --wa-ink: #14110a;
  --wa-ink-faint: #a39b89;
  --wa-card-bg: #ffffff;
  --wa-soft-bg: #f5f1e5;
  --wa-card-border: rgba(20, 17, 10, 0.12);
  --wa-card-border-soft: rgba(20, 17, 10, 0.07);
  --wa-canvas-bg: #faf8f2;
  --wa-accent: #0c447c;
  --wa-accent-soft: rgba(63, 111, 159, 0.14);
  gap: 1rem;
  background: var(--wa-canvas-bg);
}

/* ---------- Cabeçalho ---------- */

.wa-briefing-header {
  box-sizing: border-box;
  padding: 14px 18px;
  border: 1px solid var(--wa-card-border);
  border-radius: 10px;
  background: var(--wa-card-bg);
  gap: 12px;
}

/* Botão primário no preto do sistema: o override de --lumo-primary-color é
   declarado por escopo de view no tema, e esta tela não entra naqueles seletores. */
.wa-briefing-page {
  --lumo-primary-color: #14110a;
  --lumo-primary-text-color: #14110a;
  --lumo-primary-color-50pct: rgba(20, 17, 10, 0.5);
  --lumo-primary-color-10pct: rgba(20, 17, 10, 0.1);
}

.wa-briefing-header-titulo {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wa-briefing-header-projeto {
  font-family: var(--wa-serif);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--wa-ink-faint);
}

/* Rótulo do seletor de versão: preto e em caixa alta, para não se confundir com
   os chips cinza da mesma linha. */
.wa-briefing-header-versao-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wa-ink);
  white-space: nowrap;
}

/* ---------- Ações do cabeçalho (••• e recolher) ---------- */

/* Mesmo visual do "•••"/chevron do chat: sem fundo em nenhum estado, o feedback
   de clicável é o cursor e o escurecimento do ícone. Estilo vai no HOST
   vaadin-button — o part "button" não existe (só prefix/label/suffix). */
.wa-briefing-header-btn-icon {
  cursor: pointer;
  flex-shrink: 0;
  min-width: 0;
  width: 28px;
  height: 28px;
  padding: 4px;
  margin: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 4px;
  color: var(--wa-ink);
}

.wa-briefing-header-btn-icon:hover,
.wa-briefing-header-btn-icon:focus,
.wa-briefing-header-btn-icon:active {
  background: transparent;
  box-shadow: none;
  color: #000000;
}

.wa-briefing-header-btn-icon vaadin-icon {
  width: 16px;
  height: 16px;
  color: inherit;
  fill: currentColor;
}

/* O menu abre em overlay fora da view, então o seletor não pode depender de
   .wa-briefing-page (mesmo motivo do overlay do dialog). */
vaadin-context-menu-item:has(.wa-briefing-header-menu-item) {
  cursor: pointer;
}

.wa-briefing-header-menu-icon {
  color: var(--lumo-secondary-text-color);
}

vaadin-context-menu-item:hover .wa-briefing-header-menu-icon,
vaadin-context-menu-item:focus .wa-briefing-header-menu-icon {
  color: #14110a;
}

/* ---------- Colapso do cabeçalho ---------- */

.wa-briefing-header-area {
  flex-shrink: 0;
}

.wa-briefing-header-area.wa-collapsed .wa-briefing-header {
  display: none;
}

.wa-briefing-header-area.wa-collapsed .wa-briefing-header-bar {
  display: flex;
}

.wa-briefing-header-bar {
  display: none;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  padding: 8px 16px;
  border: 1px solid var(--wa-card-border);
  border-radius: 10px;
  background: var(--wa-card-bg);
  cursor: pointer;
  transition: background 0.15s ease;
}

.wa-briefing-header-bar:hover {
  background: var(--wa-soft-bg);
}

.wa-briefing-header-bar-icon {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: #e1f5ee;
  color: #0f6e56;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wa-briefing-header-bar-icon vaadin-icon {
  width: 13px;
  height: 13px;
}

.wa-briefing-header-bar-name {
  font-family: var(--wa-serif);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--wa-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wa-briefing-header-bar-meta {
  flex: 1;
  display: flex;
  gap: 10px;
  font-size: 11.5px;
  color: var(--wa-ink-faint);
  white-space: nowrap;
}

.wa-briefing-header-bar-chevron {
  flex-shrink: 0;
  min-width: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  margin: 0;
  background: transparent;
  box-shadow: none;
  color: var(--wa-ink-faint);
  pointer-events: none;
}

.wa-briefing-header-bar-chevron vaadin-icon {
  width: 14px;
  height: 14px;
}

.wa-briefing-header-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #e1f5ee;
  color: #0f6e56;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wa-briefing-header-nome {
  font-family: var(--wa-serif);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--wa-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mesma pílula de status do cabeçalho do chat, inclusive o ponto colorido antes
   do texto (wa-chat-rich-header-status). */
.wa-briefing-header-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 3px;
  text-transform: uppercase;
  flex-shrink: 0;
}

.wa-briefing-header-status::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.wa-briefing-header-status-ok {
  background: #e1f5ee;
  color: #0f6e56;
}

.wa-briefing-header-status-gerando {
  background: #e6f1fb;
  color: #0c447c;
}

.wa-briefing-header-status-erro {
  background: #fbeaec;
  color: #a33642;
}

.wa-briefing-header-meta {
  font-size: 11px;
  color: var(--wa-ink-faint);
  min-width: 0;
  overflow: hidden;
  flex-wrap: nowrap;
}

/* flex-shrink:0 + nowrap: sem isso o flex espreme cada chip e o texto quebra em
   duas linhas quando a barra fica cheia. */
.wa-briefing-header-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
  white-space: nowrap;
  cursor: help;
  border-radius: 0.4rem;
  padding: 0.1rem 0.35rem;
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
}

.wa-briefing-header-pill:hover {
  background: var(--wa-accent-soft);
  color: var(--wa-accent);
}

.wa-briefing-header-pill-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.wa-briefing-subtitle {
  color: var(--wa-ink-faint);
  font-size: 12px;
}

/* ---------- Estado vazio ---------- */

.wa-briefing-vazio {
  padding: 2.5rem;
  text-align: center;
  color: var(--wa-ink-faint);
  font-family: var(--wa-serif);
  font-size: 15px;
  border: 1px dashed var(--wa-card-border);
  border-radius: 10px;
  background: var(--wa-card-bg);
}

/* ---------- Barra de execução ---------- */

.wa-briefing-progress-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1rem;
  border-radius: 10px;
  background: var(--wa-soft-bg);
  border: 1px solid var(--wa-card-border-soft);
}

.wa-briefing-progress-spinner {
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  border: 2px solid rgba(20, 17, 10, 0.12);
  border-top-color: var(--wa-accent);
  animation: wa-briefing-spin 0.8s linear infinite;
  flex-shrink: 0;
}

@keyframes wa-briefing-spin {
  to { transform: rotate(360deg); }
}

.wa-briefing-progress-label {
  color: var(--wa-ink);
  font-size: 12px;
  font-weight: 500;
}

/* ---------- Card de seção (espelha o run-block do chat) ---------- */

.wa-briefing-secoes {
  gap: 1rem;
  /* Respiro depois da última seção: sem isso o card final encosta no fim da página
     e ainda briga com o botão flutuante do assistente. */
  padding-bottom: 2.5rem;
}

.wa-briefing-secao-card {
  box-sizing: border-box;
  width: 100%;
  padding: 0;
  border: 1px solid var(--wa-card-border);
  border-radius: 10px;
  background: var(--wa-card-bg);
  overflow: hidden;
  /* Respiro ao rolar automaticamente para a seção em geração (scrollIntoView). */
  scroll-margin-top: 12px;
}

.wa-briefing-secao-header {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 12px 18px;
  background: var(--wa-soft-bg);
  border-bottom: 0.5px solid var(--wa-card-border-soft);
}

.wa-briefing-secao-ordem {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--wa-ink);
  color: #ffffff;
  font-family: var(--wa-serif);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
}

.wa-briefing-secao-titulo {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: var(--wa-serif);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--wa-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wa-briefing-secao-tokens {
  flex-shrink: 0;
  font-family: "SF Mono", "Monaco", "Menlo", "Consolas", monospace;
  font-size: 10.5px;
  color: var(--wa-ink-faint);
}

.wa-briefing-meta-popover-linha-total {
  border-top: 1px solid var(--wa-card-border);
  margin-top: 0.25rem;
  padding-top: 0.4rem;
}

.wa-briefing-secao-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.wa-briefing-secao-badge-pendente {
  background: rgba(20, 17, 10, 0.06);
  color: var(--wa-ink-faint);
}

.wa-briefing-secao-badge-gerando {
  background: var(--wa-accent);
  color: #ffffff;
}

.wa-briefing-secao-badge-gerando::before {
  content: "●";
  animation: wa-briefing-blink 1s ease-in-out infinite;
}

.wa-briefing-secao-badge-ok {
  background: var(--wa-accent-soft);
  color: var(--wa-accent);
}

.wa-briefing-secao-badge-erro {
  background: #fbeaec;
  color: #a33642;
}

@keyframes wa-briefing-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

.wa-briefing-secao-body {
  box-sizing: border-box;
  width: 100%;
  padding: 16px 20px;
  background: var(--wa-card-bg);
}

.wa-briefing-secao-conteudo {
  color: var(--wa-ink);
  font-size: 14px;
  line-height: 1.64;
}

/* Listas do markdown viram o container marrom, igual aos dados do step no chat */
.wa-briefing-secao-conteudo :is(ul, ol) {
  background: var(--wa-soft-bg);
  border-radius: 8px;
  margin: 0.6rem 0;
  padding: 0.7rem 0.9rem 0.7rem 2rem;
}

.wa-briefing-secao-conteudo :is(h1, h2, h3, h4) {
  font-family: var(--wa-serif);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--wa-ink);
}

.wa-briefing-secao-conteudo strong {
  color: var(--wa-ink);
}

.wa-briefing-secao-erro {
  color: #a33642;
  font-size: 13px;
}

/* Estados da geração ao vivo */

.wa-briefing-secao-pendente {
  opacity: 0.6;
}

.wa-briefing-secao-pendente .wa-briefing-secao-body {
  display: none;
}

.wa-briefing-secao-gerando {
  border-color: var(--wa-accent);
}

/* ---------- Fontes consultadas ---------- */

.wa-briefing-citacoes {
  margin-top: 0.9rem;
  padding-top: 0.75rem;
  border-top: 0.5px solid var(--wa-card-border-soft);
}

.wa-briefing-citacoes-header {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}

.wa-briefing-citacoes-rotulo {
  font-size: 10px;
  font-weight: 600;
  color: var(--wa-ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.wa-briefing-citacoes-ajuda {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  background: rgba(20, 17, 10, 0.06);
  color: var(--wa-ink-faint);
  font-size: 10px;
  font-weight: 700;
  cursor: help;
  flex-shrink: 0;
}

.wa-briefing-citacoes-chips {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.wa-briefing-citacao-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 100%;
  min-width: 0;
  padding: 0.35rem 0.65rem;
  border-radius: 8px;
  background: var(--wa-soft-bg);
  border: 0.5px solid var(--wa-card-border-soft);
  font-size: 12px;
  cursor: help;
  transition: border-color 0.15s ease;
}

.wa-briefing-citacao-item:hover {
  border-color: var(--wa-accent);
}

.wa-briefing-citacao-tipo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.1rem;
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
  background: #fbeaec;
  color: #a33642;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.wa-briefing-citacao-nome {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--wa-ink);
  font-weight: 500;
}

.wa-briefing-citacao-meta {
  color: var(--wa-ink-faint);
  white-space: nowrap;
  flex-shrink: 0;
  font-family: "SF Mono", "Monaco", "Menlo", "Consolas", monospace;
  font-size: 11px;
}

/* ---------- Popovers ---------- */

.wa-briefing-fonte-popover-body {
  max-width: 460px;
  max-height: 420px;
  overflow-y: auto;
  padding: 0.25rem;
}

.wa-briefing-fonte-popover-titulo {
  display: block;
  font-family: var(--wa-serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--wa-ink);
}

.wa-briefing-fonte-popover-arquivo {
  display: block;
  margin-top: 0.15rem;
  color: var(--wa-ink-faint);
  font-size: 10.5px;
  word-break: break-all;
  line-height: 1.4;
}

.wa-briefing-fonte-popover-contagem {
  display: block;
  margin-top: 0.35rem;
  color: var(--wa-ink-faint);
  font-size: 11px;
}

.wa-briefing-fonte-popover-trecho {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 0.5px solid var(--wa-card-border-soft);
}

.wa-briefing-fonte-popover-trecho-titulo {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--wa-accent);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.wa-briefing-fonte-popover-trecho-texto {
  display: block;
  color: var(--wa-ink);
  font-family: var(--wa-serif);
  font-size: 13px;
  line-height: 1.6;
}

.wa-briefing-meta-popover-body {
  min-width: 240px;
  max-width: 400px;
  padding: 0.25rem;
}

.wa-briefing-meta-popover-titulo {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--wa-serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--wa-ink);
}

.wa-briefing-meta-popover-linha {
  display: flex;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 0.3rem 0;
  border-top: 0.5px solid var(--wa-card-border-soft);
  font-size: 12px;
  color: var(--wa-ink);
}

.wa-briefing-meta-popover-linha:first-of-type {
  border-top: none;
}

.wa-briefing-meta-popover-valor {
  white-space: nowrap;
  flex-shrink: 0;
  color: var(--wa-ink-faint);
}

.wa-briefing-meta-popover-linha-erro .wa-briefing-meta-popover-valor {
  color: #a33642;
}

.wa-briefing-meta-popover-detalhe {
  padding: 0.2rem 0 0.35rem;
  font-size: 11px;
  color: var(--wa-ink-faint);
  line-height: 1.5;
}

.wa-briefing-dialog-aviso {
  color: var(--lumo-secondary-text-color);
  font-size: var(--lumo-font-size-s);
}

/* ---------- Modal "Gerar nova versão" ----------
   O Dialog renderiza em overlay FORA da árvore de .wa-briefing-page, então as
   variáveis de cor precisam ser declaradas aqui também — senão o botão primário
   volta ao azul padrão do Lumo em vez do preto do sistema. */

vaadin-dialog-overlay.wa-briefing-modal {
  --lumo-primary-color: #14110a;
  --lumo-primary-text-color: #14110a;
  --lumo-primary-color-50pct: rgba(20, 17, 10, 0.5);
  --lumo-primary-color-10pct: rgba(20, 17, 10, 0.1);
}

vaadin-dialog-overlay.wa-briefing-modal::part(overlay) {
  border-radius: 14px;
  box-shadow: 0 24px 64px -12px rgba(20, 17, 10, 0.40);
}

.wa-briefing-modal-header {
  margin: -0.5rem 0 1rem;
}

.wa-briefing-modal-eyebrow {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a39b89;
  font-weight: 500;
  margin-bottom: 4px;
}

.wa-briefing-modal-titulo {
  display: block;
  font-family: "Spectral", Georgia, "Times New Roman", serif;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: #14110a;
}

.wa-briefing-modal-corpo {
  gap: 0.75rem;
}

.wa-briefing-modal-rotulo {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a39b89;
  margin-bottom: 0.4rem;
}

.wa-briefing-modal-agente {
  padding: 0.85rem 1rem;
  border: 1px solid rgba(20, 17, 10, 0.12);
  border-radius: 10px;
  background: #f5f1e5;
}

.wa-briefing-modal-agente-linha {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.wa-briefing-modal-agente-icone {
  width: 16px;
  height: 16px;
  color: #0f6e56;
  flex-shrink: 0;
}

.wa-briefing-modal-agente-nome {
  flex: 1;
  min-width: 0;
  font-family: "Spectral", Georgia, serif;
  font-size: 15px;
  font-weight: 500;
  color: #14110a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wa-briefing-modal-agente-tag {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 3px;
  background: #e1f5ee;
  color: #0f6e56;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.wa-briefing-modal-steps {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.wa-briefing-modal-step {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  background: #ffffff;
  border: 0.5px solid rgba(20, 17, 10, 0.07);
}

.wa-briefing-modal-step-ordem {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #14110a;
  color: #ffffff;
  font-family: "Spectral", Georgia, serif;
  font-size: 11px;
  font-weight: 700;
}

.wa-briefing-modal-step-nome {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: #14110a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wa-briefing-modal-step-modelo {
  flex-shrink: 0;
  font-family: "SF Mono", "Monaco", "Menlo", "Consolas", monospace;
  font-size: 10.5px;
  color: #a39b89;
}

.wa-briefing-modal-steps-vazio {
  display: block;
  font-size: 12px;
  color: #a33642;
  line-height: 1.5;
}