/*
  styles.css
  ----------
  Camada base do app:
  - layout e estrutura dos componentes
  - espaçamento, fluxo, sizing e comportamento estrutural
  - sem “skin” de tema quando possível

  Regras visuais fortes do mockup/glass/theme ficam em mockup-v2-theme.css.
*/

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --color-navy: #0A2540;
  --bg-tint-navy: #F4F7F9;
  --color-blue: #2979FF;
  --bg-tint-blue: #F0F5FF;
  --color-teal: #00ACC1;
  --bg-tint-teal: #EBF9FA;
  --color-blue-grey: #607D8B;
  --bg-tint-blue-grey: #F0F4F8;
  --color-orange: #FF7043;
  --bg-tint-orange: #FFF6F3;
  --color-green: #8BC34A;
  --bg-tint-green: #F4F9F0;
  --navy: #0A2540;
  --navy-2: #0D2F4E;
  --surface: #F7F9FC;
  --surface-2: #EEF2F7;
  --border: #DDE3EC;
  --border-2: #C8D3DF;
  --text-1: #0A2540;
  --text-2: #607D8B;
  --text-3: #90A4B0;
  --white: #FFFFFF;
  --coral: #FF7043;
  --green: #2E7D32;
  --green-bg: #E8F5E9;
  --green-bd: #A5D6A7;
  --c1: #0A2540;
  --c2: #2979FF;
  --c3: #607D8B;
  --c4: #00ACC1;
  --c5: #FF7043;
  --c6: #8BC34A;
  --stage-color: #2979FF;
  --stage-light: rgba(41, 121, 255, 0.08);
  --stage-border: rgba(41, 121, 255, 0.22);
  --stage-bg-tint: #F0F5FF;
  --font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --mono: "DM Mono", monospace;
  --shadow: 0 2px 12px rgba(10, 37, 64, 0.08), 0 1px 3px rgba(10, 37, 64, 0.05);
  --shadow-lg: 0 8px 40px rgba(10, 37, 64, 0.13), 0 2px 8px rgba(10, 37, 64, 0.07);
  --agent-stack-gap: 18px;
}

html,
body {
  height: 100%;
  overflow: hidden;
  font-family: var(--font);
  background: var(--surface);
  color: var(--text-1);
}

[hidden] {
  display: none !important;
}

button,
input,
textarea {
  font: inherit;
}

button {
  appearance: none;
}

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  background: var(--surface);
  transition: opacity 0.25s, transform 0.25s;
  will-change: transform, opacity;
}

#screen-agent {
  background: var(--stage-bg-tint, var(--surface));
}

.screen.hidden {
  opacity: 0;
  pointer-events: none;
}

#screen-home.hidden {
  transform: translateX(-24px);
}

#screen-agent.hidden {
  transform: translateX(24px);
}

.topbar {
  background: var(--navy);
  height: 43px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  flex-shrink: 0;
  z-index: 10;
}

.logo,
.logo-button {
  font-size: 15px;
  font-weight: 500;
  font-family: var(--font-serif);
  color: #fff;
  letter-spacing: 0.01em;
  cursor: pointer;
}

.logo-button {
  border: none;
  background: transparent;
}

.home-logo-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 112px;
  min-height: 28px;
  padding: 0;
}

.topbar-logo-wordmark {
  display: block;
  width: auto;
  height: 15px;
  max-width: min(140px, 28vw);
  object-fit: contain;
}

.agent-top-left .logo-button {
  max-width: clamp(180px, 42vw, 620px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-right,
.agent-top-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar-user {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}

.avatar-button {
  cursor: pointer;
}

.back-btn {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition:
    color 0.15s ease,
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.back-btn:hover,
.avatar-button:hover,
.logo-button:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.new-proj-btn {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 7px;
  background: var(--c2);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: filter 0.15s;
}

.new-proj-btn:hover {
  filter: brightness(1.1);
}

.new-proj-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: none;
}

.logout-btn {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 7px;
  background: transparent;
  color: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(255, 255, 255, 0.18);
  cursor: pointer;
  transition:
    color 0.15s ease,
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.logout-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.agent-badge {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}

#screen-agent .agent-badge,
#screen-agent #agentUserLabel {
  display: none !important;
}

.home-body {
  flex: 1;
  overflow-y: auto;
  padding: 32px 40px 64px;
  width: 100%;
}

.screen-disclaimer,
.login-disclaimer {
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-3);
}

.screen-disclaimer {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid rgba(144, 164, 176, 0.18);
}

.home-disclaimer {
  max-width: 780px;
}

.login-disclaimer {
  margin-top: 16px;
  text-align: left;
}

.home-body::-webkit-scrollbar,
.chat-scroll::-webkit-scrollbar,
.form-body::-webkit-scrollbar,
.u-form-shell-body::-webkit-scrollbar,
.understanding-page::-webkit-scrollbar,
.panel-body::-webkit-scrollbar,
.debug-log-list::-webkit-scrollbar {
  width: 5px;
}

.home-body::-webkit-scrollbar-thumb,
.chat-scroll::-webkit-scrollbar-thumb,
.form-body::-webkit-scrollbar-thumb,
.u-form-shell-body::-webkit-scrollbar-thumb,
.understanding-page::-webkit-scrollbar-thumb,
.panel-body::-webkit-scrollbar-thumb,
.debug-log-list::-webkit-scrollbar-thumb {
  background: var(--border-2);
  border-radius: 4px;
}

.chat-scroll,
.form-body,
.u-form-shell-body,
.panel-body,
.understanding-page,
.debug-log-list {
  scrollbar-width: thin;
  scrollbar-color: var(--border-2) transparent;
  scrollbar-gutter: stable;
}

.sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.sec-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
}

.sec-count {
  font-size: 13px;
  color: var(--text-3);
}

.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 32px 0;
}

.proj-grid {
  display: grid;
  grid-template-columns: repeat(var(--proj-cols, 2), 1fr);
  gap: 16px;
  grid-auto-rows: 1fr;
  align-items: stretch;
}

.proj-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 26px 28px;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease,
    opacity 0.18s ease;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  overflow: hidden;
  min-width: 0;
  height: 100%;
}

.proj-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--sc, var(--c2));
  border-radius: 14px 14px 0 0;
}

.proj-card:hover {
  border-color: var(--border-2);
  box-shadow: 0 6px 24px rgba(10, 37, 64, 0.1);
  transform: translateY(-1px);
}

.proj-card.done {
  opacity: 0.72;
}

.proj-card.done:hover {
  opacity: 1;
}

.proj-card-top,
.proj-meta,
.form-header,
.panel-head,
.ph-left,
.ph-right,
.modal-btns,
.debug-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.proj-card-top {
  align-items: flex-start;
}

.proj-card-top > :first-child,
.stage-progress,
.proj-meta,
.proj-date {
  min-width: 0;
}

.proj-card-top > :first-child {
  flex: 1 1 auto;
}

.proj-name {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-1);
  line-height: 1.4;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.proj-client {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 4px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.proj-inline-edit {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.proj-inline-input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--white);
  color: var(--text-1);
  padding: 8px 10px;
  outline: none;
}

.proj-inline-name {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}

.proj-inline-client {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-2);
}

.proj-inline-input:focus {
  border-color: var(--stage-border);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sc, var(--stage-color)) 12%, transparent);
}

.status-badge {
  font-size: 11px;
  font-weight: 500;
  padding: 4px 11px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}

.badge-active {
  background: rgba(41, 121, 255, 0.08);
  color: #2979FF;
  border: 1px solid rgba(41, 121, 255, 0.2);
}

.badge-done {
  background: color-mix(in srgb, var(--green) 20%, rgba(255, 255, 255, 0.92));
  color: color-mix(in srgb, var(--green) 82%, #1b4332);
  border: 1px solid color-mix(in srgb, var(--green) 42%, rgba(255, 255, 255, 0.4));
}

.stage-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stage-track {
  display: flex;
  gap: 3px;
}

.stage-seg {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--surface-2);
  transition: background 0.2s;
}

.stage-seg.s-done {
  background: var(--sc, var(--c2));
  opacity: 0.5;
}

.stage-seg.s-active {
  background: var(--sc, var(--c2));
}

.stage-lbl {
  font-size: 12px;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 6px;
}

.stage-lbl strong {
  color: var(--text-2);
  font-weight: 500;
}

.sdot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sc, var(--c2));
}

.proj-open-btn {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  padding: 7px 16px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text-2);
  cursor: pointer;
  transition:
    color 0.15s ease,
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  flex-shrink: 0;
}

.proj-open-btn:hover {
  border-color: var(--sc, var(--c2));
  color: var(--sc, var(--c2));
}

.agent-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.agent-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease,
    opacity 0.15s ease;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.agent-card:hover {
  border-color: var(--border-2);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

#supportToolsGrid .agent-card,
#supportToolsGrid .agent-card:visited,
#supportToolsGrid .agent-card:hover,
#supportToolsGrid .agent-card:active,
#supportToolsGrid .agent-card:focus {
  color: inherit;
  text-decoration: none;
}

#supportToolsGrid .agent-card .agent-name,
#supportToolsGrid .agent-card .agent-desc {
  text-decoration: none;
}

.agent-icon {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--text-2);
}

.admin-analytics-value {
  margin-top: 8px;
  font-size: 24px;
  font-weight: 600;
  color: var(--text-1);
}

.admin-analytics-desc {
  margin-top: 8px;
}

.admin-analytics-line {
  margin-top: 6px;
}

.agent-name {
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-serif);
  background: color-mix(in srgb, var(--stage-bg-tint) 72%, white);
  color: #18324b;
  margin-bottom: 4px;
}

.agent-desc {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.55;
}

.toggle-done {
  font-size: 12px;
  color: var(--text-3);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  user-select: none;
  transition: color 0.15s;
  border: none;
  background: transparent;
}

.toggle-done:hover {
  color: var(--text-2);
}

.tgl-ico {
  font-size: 10px;
  transition: transform 0.2s;
  display: inline-block;
}

.tgl-ico.open {
  transform: rotate(90deg);
}

.done-section {
  overflow: hidden;
  transition: max-height 0.3s ease;
  max-height: 0;
}

.done-section.open {
  max-height: 800px;
}

.stage-nav {
  background: var(--navy);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  padding: 0 24px;
  display: flex;
  align-items: stretch;
  height: 36px;
  flex-shrink: 0;
}

.sn-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 13px;
  font-size: 11px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.3);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  user-select: none;
  background: transparent;
  border-top: none;
  border-left: none;
  border-right: none;
  outline: none;
}

.sn-item:disabled {
  cursor: default;
}

.sn-item.clickable {
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.sn-item.clickable:hover {
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.04);
}

.sn {
  font-size: 10px;
  opacity: 0.6;
}

.sn-index {
  font-family: var(--font);
}

.sn-label {
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 500;
  opacity: 1;
}

.sn-item.done {
  color: rgba(255, 255, 255, 0.48);
}

.sn-item.active {
  color: #fff;
  font-weight: 500;
  border-bottom-color: var(--stage-color);
}

.sn-item.current-stage:not(.active) {
  color: rgba(255, 255, 255, 0.82);
  font-weight: 500;
}

.sn-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--stage-color);
  display: none;
  box-shadow: 0 0 0 2px rgba(41, 121, 255, 0.3);
}

.sn-item.active .sn-dot {
  display: inline-block;
}

.sn-item.current-stage .sn-dot {
  display: inline-block;
}

.sn-check {
  min-width: 10px;
  font-size: 10px;
  font-weight: 700;
  color: #7dd3a3;
  opacity: 0;
}

.sn-item.done .sn-check {
  opacity: 1;
}

.ctx-bar {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  min-height: 34px;
  display: flex;
  align-items: center;
  font-size: 11px;
  flex-shrink: 0;
  height: 42px;
}

.ctx-seg {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--text-3);
}

.ctx-seg strong {
  color: var(--text-2);
  font-weight: 500;
}

.ctx-sep {
  margin: 0 10px;
  color: var(--border-2);
}

.ctx-procs {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: none;
}

.ctx-procs::-webkit-scrollbar {
  display: none;
}

.proc-chip-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  position: relative;
}

.proc-chip {
  font-size: 10px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 20px;
  border: 1px solid var(--border);
  color: var(--text-3);
  background: var(--surface);
  white-space: nowrap;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    color 0.15s ease,
    background-color 0.15s ease,
    opacity 0.15s ease;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.proc-chip:hover {
  border-color: var(--stage-border);
  color: var(--stage-color);
}

.proc-chip.done {
  border-color: var(--green-bd);
  color: var(--green);
  background: var(--green-bg);
}

.proc-chip.active {
  border-color: var(--stage-border);
  color: var(--stage-color);
  background: var(--stage-light);
}

.proc-chip.pending {
  opacity: 0.6;
}

.proc-chip-edit {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    background-color 0.15s ease;
}

.proc-chip-wrap:hover .proc-chip-edit,
.proc-chip-edit:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

.proc-chip-edit:hover {
  color: var(--stage-color);
  border-color: var(--stage-border);
  background: var(--stage-light);
}

.proc-chip-edit svg {
  width: 10px;
  height: 10px;
  display: block;
}

.add-proc {
  font-size: 10px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 20px;
  border: 1px dashed var(--border-2);
  color: var(--text-3);
  background: transparent;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    color 0.15s ease,
    background-color 0.15s ease;
  font-family: var(--font);
}

.add-proc:hover {
  border-color: var(--stage-color);
  color: var(--stage-color);
}

.agent-main {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  height: 100%;
}

.col-left {
  width: 42%;
  min-width: 200px;
  min-height: 0;
  height: 100%;
  flex-shrink: 0;
  background: var(--stage-bg-tint);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  --agent-bubble-bg: var(--stage-color);
  --agent-bubble-fg: #ffffff;
  --agent-bubble-border: rgba(10, 37, 64, 0.12);
  --chat-pattern:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23d9cebd' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' opacity='0.55'%3E%3Ccircle cx='34' cy='36' r='14'/%3E%3Cpath d='M74 28h20a8 8 0 0 1 8 8v12a8 8 0 0 1-8 8H84l-10 9v-9h-2a8 8 0 0 1-8-8V36a8 8 0 0 1 8-8Z'/%3E%3Cpath d='M164 22l7 14 15 2-11 10 3 15-14-8-14 8 3-15-11-10 15-2 7-14Z'/%3E%3Cpath d='M26 122c10-14 34-14 44 0 7 10 3 25-22 42-25-17-29-32-22-42Z'/%3E%3Cpath d='M112 116h24m-12-12v24'/%3E%3Cpath d='M170 106c11 0 20 8 20 18 0 11-9 19-20 19h-17l-11 9v-9h-3c-11 0-20-8-20-19 0-10 9-18 20-18Z'/%3E%3Cpath d='M50 196l16-16m0 16-16-16'/%3E%3Cpath d='M120 180c10 0 18 8 18 18s-8 18-18 18-18-8-18-18 8-18 18-18Z'/%3E%3Cpath d='M112 198h16'/%3E%3Cpath d='M120 190v16'/%3E%3Ctext x='168' y='204' font-size='16' font-family='Segoe UI, Arial, sans-serif' fill='%23d9cebd'%3Eproc%3C/text%3E%3C/g%3E%3C/svg%3E");
}

.screen.stage-understanding .col-left {
  --agent-bubble-bg: #0A2540;
  --agent-bubble-fg: #ffffff;
  --agent-bubble-border: rgba(10, 37, 64, 0.2);
  --chat-pattern:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='228' height='228' viewBox='0 0 228 228'%3E%3Cg fill='none' stroke='%23d6c9bb' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.68'%3E%3Cpath d='M26 40c17-21 43-21 60 0-17 21-43 21-60 0Z'/%3E%3Ccircle cx='56' cy='40' r='7'/%3E%3Cpath d='M128 24h34l12 12v46a8 8 0 0 1-8 8h-38a8 8 0 0 1-8-8V32a8 8 0 0 1 8-8Z'/%3E%3Cpath d='M162 24v16h16'/%3E%3Ccircle cx='54' cy='146' r='18'/%3E%3Ccircle cx='54' cy='146' r='8'/%3E%3Cpath d='M54 128v-10M54 174v-10M36 146H26M82 146H72'/%3E%3Cpath d='M138 136l12-12 12 12-12 12-12-12Z'/%3E%3Cpath d='M150 112v-12M150 160v12M126 136h-12M174 136h12'/%3E%3Cpath d='M108 190h60M108 202h44'/%3E%3C/g%3E%3C/svg%3E");
}

.screen.stage-mapping .col-left {
  --agent-bubble-bg: #2979FF;
  --agent-bubble-fg: #ffffff;
  --agent-bubble-border: rgba(41, 121, 255, 0.24);
  --chat-pattern:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='228' height='228' viewBox='0 0 228 228'%3E%3Cg fill='none' stroke='%23d2c4b4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.68'%3E%3Crect x='24' y='28' width='38' height='18' rx='6'/%3E%3Cpath d='M62 37h26'/%3E%3Crect x='88' y='28' width='40' height='18' rx='6'/%3E%3Cpath d='M128 37h24m-8-6 8 6-8 6'/%3E%3Crect x='152' y='28' width='42' height='18' rx='6'/%3E%3Cpath d='M46 116h42a6 6 0 0 1 6 6v22a6 6 0 0 1-6 6H46a6 6 0 0 1-6-6v-22a6 6 0 0 1 6-6ZM94 127h22m-6-6 6 6-6 6'/%3E%3Cpath d='M138 110l16 16-16 16-16-16 16-16Z'/%3E%3Cpath d='M138 142v18M138 92V74M122 126h-18M154 126h18'/%3E%3Cpath d='M38 188h34M38 198h20M126 188h58M126 198h40'/%3E%3C/g%3E%3C/svg%3E");
}

.screen.stage-mapping .msg-agent .bubble {
  font-weight: 400;
  font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.screen.stage-mapping .msg-agent .bubble strong,
.screen.stage-mapping .msg-agent .bubble b {
  font-weight: 500;
}

.screen.stage-mapping .msg-user .bubble,
.screen.stage-mapping .file-chip {
  font-weight: 400;
  font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.screen.stage-mapping .msg-agent .bubble,
.screen.stage-mapping .msg-user .bubble {
  padding: 7px 9px;
  font-size: 12px;
  line-height: 17px;
  border-radius: 10px;
  max-width: min(70%, 640px);
}

.screen.stage-mapping .msg-agent.msg-context-summary .bubble {
  padding: 9px 11px 9px 12px;
  max-width: min(68%, 600px);
  font-weight: 400;
}

.screen.stage-mapping .msg-agent.msg-context-summary .bubble p,
.screen.stage-mapping .msg-agent.msg-context-summary .bubble li,
.screen.stage-mapping .msg-agent.msg-context-summary .bubble strong,
.screen.stage-mapping .msg-agent.msg-context-summary .bubble b {
  font-weight: 400;
}

.screen.stage-mapping .msg-agent.msg-context-summary .bubble p:first-child strong:first-child,
.screen.stage-mapping .msg-agent.msg-context-summary .bubble p:first-child b:first-child,
.screen.stage-mapping .msg-agent.msg-context-summary .bubble > strong:first-child,
.screen.stage-mapping .msg-agent.msg-context-summary .bubble > b:first-child {
  font-weight: 700;
}

.screen.stage-mapping .file-chip {
  padding: 7px 9px;
  font-size: 11.9px;
  border-radius: 10px;
  max-width: 70%;
}

.screen.stage-diagnostico .col-left {
  --agent-bubble-bg: #607D8B;
  --agent-bubble-fg: #ffffff;
  --agent-bubble-border: rgba(96, 125, 139, 0.24);
  --chat-pattern:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='228' height='228' viewBox='0 0 228 228'%3E%3Cg fill='none' stroke='%23d0c7bf' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round' opacity='0.68'%3E%3Cpath d='M32 38h42M32 50h28'/%3E%3Ccircle cx='36' cy='112' r='18'/%3E%3Cpath d='M36 100v12l8 8'/%3E%3Cpath d='M110 28h64v38h-64Z'/%3E%3Cpath d='M110 47h64'/%3E%3Cpath d='M132 28v38M154 28v38'/%3E%3Crect x='112' y='108' width='58' height='34' rx='8'/%3E%3Cpath d='M122 124h38M122 134h24'/%3E%3Cpath d='M38 188h52M38 200h34'/%3E%3Cpath d='M126 186l14-14 14 14-14 14-14-14Z'/%3E%3Cpath d='M176 180h20M176 192h12'/%3E%3C/g%3E%3C/svg%3E");
}

.screen.stage-redesenho .col-left {
  --agent-bubble-bg: #00ACC1;
  --agent-bubble-fg: #ffffff;
  --agent-bubble-border: rgba(0, 172, 193, 0.24);
}

.screen.stage-implementacao .col-left {
  --agent-bubble-bg: #FF7043;
  --agent-bubble-fg: #ffffff;
  --agent-bubble-border: rgba(255, 112, 67, 0.24);
}

.screen.stage-operacao .col-left {
  --agent-bubble-bg: #8BC34A;
  --agent-bubble-fg: #ffffff;
  --agent-bubble-border: rgba(139, 195, 74, 0.24);
}

.chat-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-behavior: smooth;
  background-color: color-mix(in srgb, var(--stage-bg-tint) 92%, #efeae2);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.34)),
    var(--chat-pattern);
  background-size: auto, 240px 240px;
}

.msg {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.msg-agent {
  align-items: flex-start;
  width: 100%;
}

.msg-agent .bubble {
  position: relative;
  background: var(--agent-bubble-bg);
  border: 1px solid var(--agent-bubble-border);
  box-shadow: 0 1px 1px rgba(11, 20, 26, 0.08);
  color: var(--agent-bubble-fg);
  border-radius: 12px;
  max-width: min(78%, 720px);
  padding: 9px 11px;
  font-size: 14.2px;
  line-height: 20px;
  font-family: var(--font-serif);
  overflow-wrap: break-word;
  overflow: hidden;
  background-clip: padding-box;
}

.msg-agent .bubble::before {
  content: none !important;
  display: none !important;
}

.msg-agent .bubble a,
.msg-agent .bubble strong {
  color: inherit;
}

.msg-agent .bubble p,
.msg-agent .bubble ul,
.msg-agent .bubble ol {
  margin: 0 0 7px;
}

.msg-agent .bubble p:last-child,
.msg-agent .bubble ul:last-child,
.msg-agent .bubble ol:last-child {
  margin-bottom: 0;
}

.msg-agent.msg-context-summary .bubble {
  background: color-mix(in srgb, var(--stage-color) 10%, white);
  border-color: var(--stage-border);
  border-left: 4px solid var(--stage-color);
  border-radius: 12px;
  padding: 11px 13px 11px 14px;
  max-width: min(72%, 680px);
  color: var(--text-1);
  overflow: hidden;
  background-clip: padding-box;
}

.msg-agent.msg-context-summary .bubble::before {
  content: none !important;
  display: none !important;
}

.msg-agent.msg-context-summary .bubble p:first-child {
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--stage-color);
  text-transform: uppercase;
}

.msg-agent.msg-context-summary .bubble ul {
  margin-top: 6px;
  padding-left: 17px;
}

.msg-agent.msg-context-summary .bubble li {
  margin-bottom: 4px;
}

.msg-user {
  align-items: flex-end;
}

.msg-user .bubble {
  position: relative;
  background: #d9fdd3;
  color: #111b21;
  border-radius: 12px;
  max-width: 72%;
  padding: 9px 11px;
  font-size: 14.2px;
  line-height: 20px;
  font-weight: 400;
  overflow-wrap: break-word;
  box-shadow: 0 1px 1px rgba(11, 20, 26, 0.08);
  overflow: hidden;
  background-clip: padding-box;
}

.msg-user .bubble::after {
  content: none !important;
  display: none !important;
}

.file-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  position: relative;
  background: #d9fdd3;
  border: none;
  border-radius: 12px;
  padding: 9px 11px;
  font-size: 14px;
  max-width: 72%;
  color: #111b21;
  box-shadow: 0 1px 1px rgba(11, 20, 26, 0.08);
  overflow: hidden;
  background-clip: padding-box;
}

.file-chip::after {
  content: none !important;
  display: none !important;
}

.file-chip-icon {
  color: #075e54;
  display: inline-flex;
  flex-shrink: 0;
}

.file-chip-main {
  min-width: 0;
}

.file-chip-name {
  font-weight: 500;
  color: var(--text-1);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-chip-size {
  color: var(--text-3);
  font-size: 12px;
}

.upload-zone {
  border: 1px dashed rgba(84, 101, 111, 0.28);
  border-radius: 12px;
  padding: 16px 14px;
  text-align: center;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease,
    box-shadow 0.15s ease;
  background: rgba(255, 255, 255, 0.86);
  margin: 4px 0;
  box-shadow: 0 1px 1px rgba(11, 20, 26, 0.06);
}

.upload-zone:hover,
.upload-zone.drag-over {
  border-color: var(--stage-color);
  background: var(--stage-light);
}

.uz-inline-actions {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.uz-inline-btn {
  border: none;
  background: rgba(255, 255, 255, 0.74);
  color: var(--stage-color);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: filter 0.15s, background 0.15s;
}

.uz-inline-btn:hover {
  background: #fff;
  filter: brightness(0.98);
}

.uz-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  margin-bottom: 3px;
}

.uz-sub {
  font-size: 11px;
  color: var(--text-3);
}

.typing {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 2px 0;
}

.typing span {
  animation: blink 1.2s ease-in-out infinite;
}

.typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-3);
}

.typing span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes blink {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

.tools-strip {
  padding: 10px 13px 8px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: #f0f2f5;
}

.tools-lbl {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 7px;
}

.tools-row {
  display: flex;
  gap: 5px;
}

.transcript-tools-row {
  margin-top: 6px;
}

.tools-hint {
  min-height: 14px;
  margin-top: 6px;
  font-size: 10px;
  color: var(--text-3);
}

.tool-btn {
  flex: 1;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  padding: 6px 5px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text-2);
  cursor: pointer;
  transition:
    color 0.15s ease,
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    opacity 0.15s ease;
  white-space: nowrap;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.tool-btn:hover:not(:disabled) {
  border-color: var(--stage-color);
  color: var(--stage-color);
  background: var(--stage-light);
}

.tool-btn.active {
  border-color: var(--stage-color);
  color: var(--stage-color);
  background: var(--stage-light);
}

.tool-btn.done {
  border-color: var(--green-bd);
  color: var(--green);
  background: var(--green-bg);
}

.tool-btn:disabled,
.f-btn:disabled,
.advance-btn:disabled,
.copy-btn:disabled,
.send-btn:disabled {
  opacity: 0.28;
  cursor: not-allowed;
}

.advance-wrap {
  padding: 0;
  flex-shrink: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  display: block;
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 18;
  width: auto;
  height: 0;
  overflow: visible;
  pointer-events: none;
}

.advance-btn {
  width: 100%;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  padding: 11px 18px;
  min-height: 46px;
  border-radius: 10px;
  background: var(--advance-color, var(--stage-color));
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition:
    color 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    opacity 0.18s ease;
  box-shadow: 0 8px 20px rgba(10, 37, 64, 0.1);
  opacity: 0.42;
  pointer-events: none;
}

.advance-btn.ready {
  opacity: 1;
  pointer-events: all;
}

.advance-btn.warnable {
  opacity: 0.58;
  pointer-events: all;
  cursor: pointer;
}

#understandingAdvanceBtn {
  --advance-color: #2979FF;
}

#advanceBtn {
  --advance-color: #607D8B;
}

#diagnosticoAdvanceBtn {
  --advance-color: #00ACC1;
}

#redesenhoAdvanceBtn {
  --advance-color: #FF7043;
}

#implementacaoAdvanceBtn,
#monitoramentoAdvanceBtn {
  --advance-color: #8BC34A;
}

#understandingAdvanceBar,
#diagnosticoAdvanceBar,
#redesenhoAdvanceBar,
#implementacaoAdvanceBar,
#monitoramentoAdvanceBar {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  min-height: 0 !important;
}

.advance-btn.ready:hover {
  filter: none;
}

.advance-btn.ready:hover .arr {
  transform: none;
}

.advance-btn.done-s {
  background: var(--green);
  opacity: 1;
  pointer-events: all;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(46, 125, 50, 0.18);
}

.advance-btn.done-s:hover {
  filter: brightness(1.04);
}

.advance-hint {
  font-size: 10px;
  color: var(--text-3);
  text-align: center;
  margin-top: 6px;
  padding-bottom: 2px;
}

.chat-input-wrap {
  padding: 10px 16px 16px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: #f0f2f5;
}

.input-inner {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: #ffffff;
  border: 1px solid rgba(84, 101, 111, 0.18);
  border-radius: 24px;
  padding: 8px 10px 8px 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-shadow: 0 1px 1px rgba(11, 20, 26, 0.06);
}

.input-inner:focus-within {
  border-color: #c3d6c6;
  box-shadow: 0 0 0 3px rgba(0, 168, 132, 0.08);
}

.chat-ta {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--font);
  font-size: 14px;
  color: #111b21;
  resize: none;
  outline: none;
  line-height: 1.5;
  min-height: 22px;
  max-height: 80px;
}

.chat-ta::placeholder {
  color: #667781;
}

.send-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #00a884;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: filter 0.15s;
}

.send-btn:hover:not(:disabled) {
  filter: brightness(1.05);
}

.send-btn svg {
  width: 14px;
  height: 14px;
  fill: white;
}

.resize-handle {
  width: 5px;
  background: transparent;
  cursor: col-resize;
  flex-shrink: 0;
  position: relative;
  transition: background 0.15s;
  z-index: 5;
}

.resize-handle:hover,
.resize-handle.dragging {
  background: var(--stage-color);
}

.resize-handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 32px;
  width: 3px;
  border-radius: 2px;
  background: var(--border-2);
  transition: background 0.15s;
}

.resize-handle:hover::after,
.resize-handle.dragging::after {
  background: var(--stage-color);
}

.col-right {
  flex: 1;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  background: var(--stage-bg-tint);
}

.form-header {
  padding: 14px 26px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--white);
  position: relative;
  z-index: 2;
}

.form-title {
  font-size: 15px;
  font-weight: 500;
  font-family: var(--font-serif);
  color: var(--text-1);
}

.form-meta {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 2px;
}

.form-meta strong {
  color: var(--stage-color);
  font-weight: 500;
}

.form-btns {
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}

.f-btn {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  padding: 7px 14px;
  min-height: 36px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text-2);
  cursor: pointer;
  transition:
    color 0.15s ease,
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    opacity 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-align: center;
  line-height: 1;
  vertical-align: middle;
}

.f-btn span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.f-btn.is-loading .btn-icon svg,
.tool-btn.is-loading .btn-icon svg,
.understanding-shell .btn.is-loading .btn-icon svg {
  animation: procella-spin 0.9s linear infinite;
}

@keyframes procella-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.f-btn:hover:not(:disabled) {
  border-color: var(--border-2);
  color: var(--text-1);
}

.f-btn.confirm {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

.f-btn.confirm:hover:not(:disabled) {
  filter: none;
}

.f-btn.export {
  background: var(--stage-color);
  color: #fff;
  border-color: var(--stage-color);
}

#screen-agent .f-btn.export:not(.icon-only) {
  min-height: 34px;
  padding: 6px 12px;
  font-size: 11px;
}

.f-btn.export:hover:not(:disabled) {
  filter: none;
}

.f-btn.icon-only {
  width: 44px;
  min-width: 44px;
  height: 36px;
  padding-left: 0;
  padding-right: 0;
  gap: 0;
}

.f-btn.confirm-success {
  background: #8BC34A;
  color: #fff;
  border-color: #8BC34A;
}

.f-btn.confirm-success:hover:not(:disabled) {
  filter: none;
}

.f-btn-subtle {
  background: transparent;
}

.form-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 22px 26px 26px;
  position: relative;
}

.lousa-preview,
.lousa {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--text-1);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px 24px;
  width: 100%;
  min-height: calc(100vh - 260px);
}

.lousa {
  resize: none;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}

.lousa-preview {
  overflow: auto;
  white-space: normal;
  outline: none;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.lousa-preview.editing {
  background: var(--white);
  border-color: var(--stage-color);
  box-shadow: 0 0 0 3px rgba(41, 121, 255, 0.08);
  caret-color: var(--stage-color);
}

.lousa-preview[contenteditable="true"] {
  cursor: text;
}

.lousa:focus {
  border-color: var(--stage-color);
  background: var(--white);
}

.markdown-surface h1,
.markdown-surface h2,
.markdown-surface h3 {
  font-family: var(--font);
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-1);
}

.markdown-surface h1 {
  font-size: 18px;
  margin-bottom: 14px;
}

.markdown-surface h2 {
  font-size: 14px;
  margin: 18px 0 8px;
}

.markdown-surface h3 {
  font-size: 12px;
  margin: 14px 0 6px;
  color: var(--text-2);
}

.markdown-surface p,
.markdown-surface li {
  color: var(--text-1);
}

.markdown-surface p + p {
  margin-top: 10px;
}

.markdown-surface ul,
.markdown-surface ol {
  padding-left: 22px;
  margin: 8px 0 14px;
}

.markdown-surface li + li {
  margin-top: 4px;
}

.markdown-surface strong {
  color: var(--text-1);
}

.markdown-surface pre {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  overflow: auto;
  margin-top: 12px;
}

.markdown-surface code {
  font-family: var(--mono);
}

.understanding-benchmark-content {
  background:
    radial-gradient(circle at top right, rgba(41, 121, 255, 0.08), transparent 34%),
    linear-gradient(180deg, #fcfeff 0%, #f4f8fc 100%);
  border: 1px solid rgba(10, 37, 64, 0.08);
  border-radius: 18px;
  padding: 24px 26px;
  box-shadow: 0 10px 24px rgba(10, 37, 64, 0.05);
}

.understanding-benchmark-content h1,
.understanding-benchmark-content h2,
.understanding-benchmark-content h3 {
  font-family: var(--font-serif);
  letter-spacing: -0.01em;
  color: #0a2540;
}

.understanding-benchmark-content h1 {
  font-size: 1.78rem;
  line-height: 1.15;
  margin-bottom: 18px;
}

.understanding-benchmark-content h2 {
  font-size: 1.29rem;
  margin-top: 24px;
  margin-bottom: 10px;
  padding: 10px 14px;
  border: 1px solid rgba(10, 37, 64, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
}

.understanding-benchmark-content h3 {
  font-size: 1.13rem;
  margin-top: 18px;
  margin-bottom: 8px;
  color: #15395b;
}

.understanding-benchmark-content p,
.understanding-benchmark-content li {
  font-size: 12.75px;
  line-height: 1.68;
  color: #19324b;
}

.understanding-benchmark-content > p:first-of-type {
  font-size: 12.75px;
  line-height: 1.68;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
}

.understanding-benchmark-content strong {
  color: #0a2540;
  font-weight: 700;
}

.understanding-benchmark-content ul,
.understanding-benchmark-content ol {
  margin-top: 10px;
  padding-left: 20px;
}

.understanding-benchmark-content li + li {
  margin-top: 8px;
}

.understanding-benchmark-content hr {
  margin: 20px 0;
  border: 0;
  border-top: 1px solid rgba(10, 37, 64, 0.08);
}

.edit-status {
  margin-top: 9px;
  font-size: 11px;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 6px;
}

.edit-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--coral);
  flex-shrink: 0;
}

.edit-status.saved .edit-dot {
  background: var(--green);
}

.right-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px;
}

.rs-icon {
  width: 44px;
  height: 44px;
  margin-bottom: 13px;
  opacity: 0.5;
  color: var(--text-2);
}

.rs-icon svg {
  width: 100%;
  height: 100%;
}

.rs-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  margin-bottom: 6px;
}

.rs-desc {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-3);
  max-width: 260px;
}

.panel {
  position: absolute;
  top: 13px;
  right: 13px;
  width: 384px;
  max-height: calc(100% - 26px);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 13px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 20;
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}

.panel.open {
  opacity: 1;
  transform: none;
  pointer-events: all;
}

.panel-head {
  padding: 12px 13px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}

.panel-title {
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-serif);
  color: var(--text-1);
}

.panel-tag {
  font-size: 10px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 20px;
  background: var(--stage-light);
  color: var(--stage-color);
  border: 1px solid var(--stage-border);
}

.copy-btn {
  width: 44px;
  min-width: 44px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  color: var(--text-3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    color 0.15s ease,
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    opacity 0.15s ease;
  gap: 0;
}

.copy-btn:hover:not(:disabled) {
  border-color: var(--border-2);
  color: var(--text-1);
  background: var(--surface-2);
}

.copy-btn.copied {
  border-color: var(--green-bd);
  color: var(--green);
  background: var(--green-bg);
}

.panel-close {
  width: 44px;
  min-width: 44px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  color: var(--text-3);
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.panel-close:hover {
  background: var(--surface-2);
  border-color: var(--border-2);
  color: var(--text-1);
}

.panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 13px 15px 16px;
}

.p-sec {
  margin-bottom: 15px;
}

.p-sec-title {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 7px;
}

.p-item {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-1);
  padding: 8px 11px;
  border-radius: 7px;
  margin-bottom: 5px;
  background: var(--surface);
  border-left: 3px solid transparent;
}

.p-item.stage {
  border-left-color: var(--stage-color);
}

.p-item.coral {
  border-left-color: var(--coral);
}

.p-item.blue {
  border-left-color: #2979FF;
}

.p-item.mono {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.9;
  white-space: pre-wrap;
}

.p-item.error {
  border-left-color: var(--coral);
  color: #B54731;
}

.p-item.empty {
  color: var(--text-3);
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 37, 64, 0.38);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

.modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.modal {
  background: var(--white);
  border-radius: 13px;
  padding: 26px 28px;
  width: 380px;
  box-shadow: 0 16px 48px rgba(10, 37, 64, 0.18);
}

.modal-confirm {
  width: min(420px, calc(100vw - 32px));
}

.modal-debug {
  width: min(1180px, 92vw);
  height: min(82vh, 900px);
  display: flex;
  flex-direction: column;
}

.modal-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-1);
  margin-bottom: 5px;
}

.modal-desc {
  font-size: 12px;
  color: var(--text-3);
  margin-bottom: 20px;
  line-height: 1.6;
}

.modal-lbl {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-2);
  margin-bottom: 6px;
}

.modal-input {
  width: 100%;
  font-family: var(--font);
  font-size: 13px;
  color: var(--text-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  outline: none;
  transition: border-color 0.15s;
  margin-bottom: 13px;
}

#projCompanySizeInput,
#projCompanySegmentInput,
#projCompanySizeInput option,
#projCompanySegmentInput option {
  color: #000;
}

.modal-input:focus {
  border-color: var(--stage-color);
}

.password-input-wrap {
  position: relative;
}

.password-input-wrap .modal-input {
  padding-right: 48px;
}

.password-toggle-btn {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, opacity 0.16s ease;
}

.password-toggle-btn:hover {
  background: rgba(10, 37, 64, 0.08);
  color: var(--text-1);
}

.password-toggle-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--stage-color) 18%, transparent);
}

.password-toggle-btn.is-active {
  color: var(--stage-color);
}

.modal-btn {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 7px;
  cursor: pointer;
  transition:
    color 0.15s ease,
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    opacity 0.15s ease;
}

.modal-btn.cancel {
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text-2);
}

.modal-btn.cancel:hover {
  border-color: var(--border-2);
  color: var(--text-1);
}

.modal-btn.go {
  border: none;
  background: var(--stage-color);
  color: #fff;
}

.modal-btn.go:hover {
  filter: brightness(1.08);
}

.modal-btn.go.danger {
  background: #b91c1c;
}

.modal-btn.go.danger:hover {
  filter: brightness(1.04);
}

.modal-confirm-project-name {
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(185, 28, 28, 0.12);
  background: rgba(254, 242, 242, 0.92);
  color: #7f1d1d;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.debug-head {
  align-items: flex-start;
  margin-bottom: 16px;
}

.debug-log-list {
  overflow: auto;
  display: grid;
  gap: 14px;
  min-height: 0;
  padding-right: 4px;
}

.debug-entry {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  background: var(--surface);
}

.debug-entry-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.debug-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.debug-meta span {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--text-2);
}

.debug-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.debug-block {
  min-width: 0;
}

.debug-block h3 {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 6px;
}

.debug-block pre {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  max-height: 260px;
  overflow: auto;
}

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--navy);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 9px 20px;
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
  pointer-events: none;
  z-index: 600;
  white-space: nowrap;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.login-gate {
  position: fixed;
  inset: 0;
  z-index: 900;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at top left, rgba(41, 121, 255, 0.2), transparent 34%),
    radial-gradient(circle at bottom right, rgba(0, 172, 193, 0.2), transparent 30%),
    linear-gradient(180deg, #0A2540 0%, #112f4f 100%);
  background-size: 130% 130%, 130% 130%, 100% 100%;
  animation: loginGradientShift 18s ease-in-out infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.tab-lock-gate {
  position: fixed;
  inset: 0;
  z-index: 890;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at top left, rgba(41, 121, 255, 0.16), transparent 34%),
    radial-gradient(circle at bottom right, rgba(0, 172, 193, 0.16), transparent 30%),
    rgba(10, 37, 64, 0.72);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.login-gate::before,
.login-gate::after,
.tab-lock-gate::before,
.tab-lock-gate::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(18px);
  opacity: 0.5;
  z-index: -1;
  pointer-events: none;
}

.login-gate::before,
.tab-lock-gate::before {
  width: 260px;
  height: 260px;
  top: 8%;
  left: 10%;
  background: radial-gradient(circle, rgba(41, 121, 255, 0.52) 0%, rgba(41, 121, 255, 0.08) 68%, transparent 100%);
  animation: loginOrbFloatA 11s ease-in-out infinite;
}

.login-gate::after,
.tab-lock-gate::after {
  width: 320px;
  height: 320px;
  right: 10%;
  bottom: 6%;
  background: radial-gradient(circle, rgba(0, 172, 193, 0.46) 0%, rgba(0, 172, 193, 0.08) 70%, transparent 100%);
  animation: loginOrbFloatB 13s ease-in-out infinite;
}

.login-card {
  position: relative;
  width: min(440px, 100%);
  overflow: hidden;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.72));
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 24px;
  box-shadow:
    0 28px 70px rgba(10, 37, 64, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(24px) saturate(1.08);
  -webkit-backdrop-filter: blur(24px) saturate(1.08);
  padding: 26px 28px 24px;
  animation:
    loginCardEnter 480ms cubic-bezier(0.2, 0.8, 0.2, 1) both,
    loginBreathingPulse 1.74s ease-in-out infinite 520ms;
}

.tab-lock-card {
  position: relative;
  width: min(460px, 100%);
  overflow: hidden;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.7));
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 24px;
  box-shadow:
    0 28px 70px rgba(10, 37, 64, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.38);
  backdrop-filter: blur(24px) saturate(1.05);
  -webkit-backdrop-filter: blur(24px) saturate(1.05);
  padding: 30px 28px 26px;
  animation: loginCardEnter 480ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.login-card::before,
.tab-lock-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.22), transparent 38%, rgba(255, 255, 255, 0.08) 62%, transparent 100%);
  opacity: 0.8;
  pointer-events: none;
}

.login-card::after,
.tab-lock-card::after {
  content: "";
  position: absolute;
  inset: -45%;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.3) 48%, rgba(255, 255, 255, 0.08) 56%, transparent 68%);
  transform: translateX(-58%) rotate(8deg);
  opacity: 0.7;
  pointer-events: none;
  animation: loginGlassSweep 8.5s ease-in-out infinite;
}

.login-brand-shell {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.login-brand-shell-lock {
  margin-bottom: 16px;
}

.login-logo {
  width: min(250px, 100%);
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 20px rgba(10, 37, 64, 0.12));
  transform-origin: center left;
  animation:
    loginLogoEnter 620ms cubic-bezier(0.2, 0.8, 0.2, 1) both,
    loginLogoGlow 6.4s ease-in-out infinite 680ms;
}

.login-brand-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #607D8B;
}

.login-title {
  font-size: 24px;
  line-height: 1.2;
  font-weight: 600;
  font-family: var(--font-serif);
  color: var(--text-1);
  margin-bottom: 8px;
}

.login-desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-3);
  margin-bottom: 20px;
}

.login-error {
  margin: 6px 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 112, 67, 0.1);
  border: 1px solid rgba(255, 112, 67, 0.22);
  color: #b54731;
  font-size: 12px;
  line-height: 1.5;
}

.login-submit {
  width: 100%;
  margin-top: 6px;
  justify-content: center;
  background: var(--stage-color) !important;
  background-image: none !important;
  border-color: var(--stage-color) !important;
  box-shadow: none !important;
}

.login-submit:disabled {
  opacity: 0.45;
}

.login-secondary-actions {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.login-link-btn {
  border: none;
  background: transparent;
  color: var(--color-blue-grey);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
  transition: color 0.15s ease, opacity 0.15s ease;
}

.login-link-btn:hover:not(:disabled) {
  color: var(--text-1);
}

.login-link-btn:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.login-help-text,
.auth-help-note {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.55;
  color: var(--text-2);
}

.auth-inline-error {
  margin-top: 10px;
  margin-bottom: 0;
}

@keyframes loginCardEnter {
  from {
    opacity: 0;
    transform: translateY(22px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes loginBreathingPulse {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
    box-shadow:
      0 28px 70px rgba(10, 37, 64, 0.34),
      inset 0 1px 0 rgba(255, 255, 255, 0.42);
  }
  50% {
    transform: translate3d(0, 0, 0) scale(1.018);
    box-shadow:
      0 34px 84px rgba(10, 37, 64, 0.38),
      0 0 0 1px rgba(255, 255, 255, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.46);
  }
}

@keyframes loginOrbFloatA {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(18px, -20px, 0) scale(1.1);
  }
}

@keyframes loginOrbFloatB {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(-22px, 14px, 0) scale(1.1);
  }
}

@keyframes loginGradientShift {
  0%, 100% {
    background-position: 0% 0%, 100% 100%, 50% 50%;
  }
  50% {
    background-position: 8% 6%, 92% 94%, 50% 50%;
  }
}

@keyframes loginGlassSweep {
  0%, 100% {
    transform: translateX(-58%) rotate(8deg);
    opacity: 0;
  }
  15% {
    opacity: 0.28;
  }
  45% {
    transform: translateX(16%) rotate(8deg);
    opacity: 0.5;
  }
  60% {
    opacity: 0;
  }
}

@keyframes loginLogoEnter {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes loginLogoGlow {
  0%, 100% {
    transform: translateY(0px) scale(1);
    filter: drop-shadow(0 10px 20px rgba(10, 37, 64, 0.12));
  }
  50% {
    transform: translateY(-3px) scale(1.012);
    filter: drop-shadow(0 16px 28px rgba(41, 121, 255, 0.18));
  }
}

.fi {
  animation: fadein 0.26s ease forwards;
}

@keyframes fadein {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.empty-card {
  border: 1px dashed var(--border-2);
  border-radius: 14px;
  padding: 22px 24px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--text-3);
  line-height: 1.6;
}

.hidden {
  display: none !important;
}

.screen.stage-understanding .topbar {
  height: 50px;
  padding: 0 28px;
}

.screen.stage-understanding .stage-nav {
  height: 36px;
  padding: 0 28px;
}

#agentTopbar {
  gap: 14px;
}

.agent-stage-nav {
  flex: 1 1 auto;
  min-width: 0;
  height: auto;
  padding: 0;
  border-bottom: 0;
}

.agent-stage-nav .sn-item {
  min-height: 34px;
}

.screen.stage-understanding .sn-item.active {
  border-bottom-color: rgba(255, 255, 255, 0.92);
}

.screen.stage-understanding .sn-item.active .sn-dot {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18);
}

.understanding-shell {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  background: var(--stage-bg-tint);
  overflow: hidden;
}

#mappingShell {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  height: 100%;
  background: var(--stage-bg-tint);
  overflow: hidden;
}

.diagnostico-shell {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  background: var(--stage-bg-tint);
  overflow: hidden;
}

.understanding-page {
  flex: 1;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  padding: 28px 24px 24px;
  max-width: min(1360px, calc(100vw - 56px));
  width: 100%;
  margin: 0 auto;
  background: transparent;
}

.diagnostico-page {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 24px 24px 18px;
  max-width: min(1360px, calc(100vw - 56px));
  width: 100%;
  margin: 0 auto;
  background: transparent;
}

.understanding-page::-webkit-scrollbar {
  width: 5px;
}

.understanding-page::-webkit-scrollbar-thumb {
  background: var(--border-2);
  border-radius: 4px;
}

.page-label {
  display: none !important;
}

.understanding-entry-grid,
#screen-agent.stage-mapping #mappingEntryArea .understanding-entry-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}

.understanding-shell .entry-card {
  background: var(--white);
  border: 1.5px dashed var(--border-2);
  border-radius: 12px;
  padding: 26px 20px;
  text-align: center;
  cursor: pointer;
  transition:
    color 0.12s ease,
    background-color 0.12s ease,
    border-color 0.12s ease,
    box-shadow 0.18s ease;
  box-shadow: 0 2px 12px rgba(10, 37, 64, 0.08);
  border-style: dashed;
}

/* Mapear: estrutura dos 3 cards iniciais. Visual fica no tema. */
#screen-agent.stage-mapping #mappingShell .mapping-entry-card {
  appearance: none;
  -webkit-appearance: none;
  border-radius: 12px;
  padding: 26px 20px;
  text-align: center;
  cursor: pointer;
  transition:
    color 0.12s ease,
    background-color 0.12s ease,
    border-color 0.12s ease,
    box-shadow 0.18s ease,
    backdrop-filter 0.18s ease;
  font: inherit;
}

.understanding-shell .entry-card:hover,
.understanding-shell .entry-card.selected {
  border-color: var(--stage-color);
  border-style: solid;
  background: var(--stage-light);
  transform: none;
}

.entry-icon {
  margin-bottom: 10px;
  color: var(--text-3);
  display: flex;
  justify-content: center;
}

.understanding-shell .entry-card:hover .entry-icon,
.understanding-shell .entry-card.selected .entry-icon {
  color: var(--text-1);
}

.entry-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  margin-bottom: 4px;
}

.understanding-shell .entry-card:hover .entry-title,
.understanding-shell .entry-card.selected .entry-title {
  color: var(--text-1);
}

.entry-sub {
  font-size: 12px;
  color: var(--text-3);
}

.understanding-paste-area {
  position: relative;
}

.understanding-paste-area textarea {
  width: 100%;
  min-height: 180px;
  font-family: var(--font);
  font-size: 13px;
  color: var(--text-1);
  border: 1.5px solid var(--navy);
  border-radius: 12px;
  padding: 14px 16px;
  outline: none;
  resize: vertical;
  line-height: 1.6;
  background: var(--white);
  box-shadow: 0 2px 12px rgba(10, 37, 64, 0.08);
}

.understanding-paste-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

.understanding-shell .btn,
#screen-agent.stage-mapping #mappingShell .btn {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  padding: 9px 16px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text-2);
  cursor: pointer;
  transition:
    color 0.15s ease,
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    opacity 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.understanding-shell .btn:hover:not(:disabled),
#screen-agent.stage-mapping #mappingShell .btn:hover:not(:disabled) {
  border-color: var(--border-2);
  color: var(--text-1);
}

.understanding-shell .btn:disabled,
#screen-agent.stage-mapping #mappingShell .btn:disabled {
  opacity: 0.32;
  cursor: not-allowed;
}

.understanding-shell .btn-navy,
#screen-agent.stage-mapping #mappingShell .btn-navy {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

.understanding-shell .btn-navy:hover:not(:disabled),
#screen-agent.stage-mapping #mappingShell .btn-navy:hover:not(:disabled) {
  background: var(--navy-2);
}

.understanding-shell .btn-stage,
#screen-agent.stage-mapping #mappingShell .btn-stage {
  background: var(--stage-color);
  color: #fff;
  border-color: var(--stage-color);
}

.understanding-shell .btn-stage:hover:not(:disabled),
#screen-agent.stage-mapping #mappingShell .btn-stage:hover:not(:disabled) {
  filter: brightness(1.08);
}

.understanding-shell .btn-sm,
#screen-agent.stage-mapping #mappingShell .btn-sm {
  font-size: 11px;
  padding: 4px 10px;
  min-height: 34px;
}

.understanding-content-area {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: var(--agent-stack-gap);
}

#screen-agent.stage-mapping #mappingShell #mappingMainColumn,
#screen-agent.stage-mapping #mappingShell .mapping-derived-area,
#diagnosticoPage,
#redesenhoPage,
#implementacaoPage,
#monitoramentoPage,
.diagnostico-result-stack,
.implementacao-entrada-wrap,
.implementacao-plano-wrap,
.implementacao-analise-wrap,
.redesenho-fase2-wrap {
  display: grid;
  align-content: start;
  gap: var(--agent-stack-gap);
}

.diagnostico-entry-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.diagnostico-entry-notice {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.diagnostico-entry-block {
  min-width: 0;
}

.diagnostico-entry-grid,
.diagnostico-output-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.diagnostico-output-grid-single {
  grid-template-columns: 1fr;
}

.diagnostico-input-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  padding: 16px;
  min-width: 0;
}

.diagnostico-input-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.diagnostico-input-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
}

.diagnostico-input-sub {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 3px;
}

.diagnostico-file-state {
  font-size: 11px;
  color: var(--text-2);
  margin-top: 10px;
  min-height: 18px;
  word-break: break-word;
}

.diagnostico-input-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.diagnostico-file-input-visible {
  flex: 1;
  min-width: 240px;
  font: inherit;
  font-size: 12px;
  color: var(--text-2);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 12px;
}

.diagnostico-file-input-visible::file-selector-button {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--stage-color);
  background: var(--stage-light);
  border: 1px solid var(--stage-border);
  border-radius: 8px;
  padding: 7px 12px;
  margin-right: 10px;
  cursor: pointer;
}

.diagnostico-upload-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.diagnostico-upload-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(46, 125, 50, 0.18);
  background: rgba(232, 245, 233, 0.95);
  color: #2e7d32;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
}

.diagnostico-chip-remove {
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 999px;
  background: rgba(46, 125, 50, 0.12);
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 11px;
  line-height: 1;
  flex: 0 0 18px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.diagnostico-chip-remove svg {
  width: 10px;
  height: 10px;
  display: block;
}

.diagnostico-chip-remove:hover {
  background: rgba(46, 125, 50, 0.2);
  transform: scale(1.04);
}

.diagnostico-chip-remove:disabled {
  opacity: 0.6;
  cursor: wait;
  transform: none;
}

.diagnostico-upload-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #2e7d32;
  color: #fff;
  font-size: 10px;
  flex: 0 0 auto;
}

.diagnostico-textarea {
  width: 100%;
  min-height: 180px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 13px 14px;
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-1);
  background: #fff;
  resize: vertical;
}

.diagnostico-textarea:focus {
  outline: none;
  border-color: var(--stage-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--stage-color) 14%, white);
}

.diagnostico-textarea-readonly {
  background: var(--surface);
  color: var(--text-2);
  resize: none;
  cursor: default;
}

.diagnostico-textarea-sm {
  min-height: 136px;
}

.diagnostico-textarea-quant {
  min-height: 68px;
}

.diagnostico-textarea-xs {
  min-height: 90px;
  margin-top: 12px;
}

.diagnostico-section-label {
  color: var(--stage-color);
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

.diagnostico-result-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.diagnostico-analysis-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.diagnostico-no-quant-card {
  border: 1px solid color-mix(in srgb, #f59e0b 38%, var(--border));
  background: linear-gradient(180deg, color-mix(in srgb, #fff7e6 92%, white), color-mix(in srgb, #fff2cc 68%, white));
}

.diagnostico-no-quant-body {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.diagnostico-no-quant-icon {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f59e0b;
  color: #ffffff;
  font-size: 16px;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(245, 158, 11, 0.18);
}

.diagnostico-no-quant-content {
  display: grid;
  gap: 4px;
}

.diagnostico-no-quant-title {
  font-size: 13px;
  font-weight: 700;
  color: #8a5200;
}

.diagnostico-no-quant-text {
  font-size: 12px;
  line-height: 1.55;
  color: #734200;
}

.diagnostico-indicator-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.diagnostico-indicator-box {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  padding: 12px 14px;
}

.diagnostico-indicator-name {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  margin-bottom: 6px;
}

.diagnostico-indicator-value {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: 8px;
}

.diagnostico-indicator-comment {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-2);
}

.diagnostico-list-section .u-bullet-list {
  margin-top: 4px;
}

.diagnostico-list-section .u-bullet-list li {
  font-size: 11px;
  line-height: 1.55;
}

.diagnostico-table-wrap {
  width: 100%;
  overflow: auto;
}

.diagnostico-table {
  width: 100%;
  min-width: 1120px;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.diagnostico-table th,
.diagnostico-table td {
  border: 1px solid color-mix(in srgb, var(--stage-color) 22%, var(--border));
  padding: 9px 10px;
  vertical-align: top;
  text-align: left;
}

.diagnostico-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: color-mix(in srgb, var(--surface) 88%, white);
  color: color-mix(in srgb, var(--stage-color) 52%, #16324f);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.diagnostico-table td {
  font-size: 12px;
  line-height: 1.5;
  background: var(--surface);
  color: #18324b;
  white-space: pre-wrap;
}

.diagnostico-slides-content {
  white-space: pre-wrap;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--text-1);
}

.diagnostico-page .u-card.fi {
  overflow: visible;
}

.diagnostico-page .u-card.fi .u-card-body {
  overflow: visible;
}

.diagnostico-advance-bar {
  flex: 0 0 auto;
  justify-content: flex-end;
  align-items: center;
  gap: 0;
  border-top: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
  backdrop-filter: none;
  position: absolute;
  right: 24px;
  bottom: 18px;
  z-index: 18;
  width: auto;
  height: 0;
  overflow: visible;
  pointer-events: none;
}

.diagnostico-advance-bar .advance-bar-info {
  display: none;
}

.diagnostico-advance-bar .advance-btn {
  width: min(420px, 100%);
  min-width: 300px;
  margin-left: auto;
}

.understanding-processing {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: rgba(10, 37, 64, 0.07);
  border: 1px solid rgba(10, 37, 64, 0.18);
  border-radius: 12px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--navy);
}

.understanding-processing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--navy);
  animation: blink 1s ease-in-out infinite;
  flex-shrink: 0;
}

.u-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(10, 37, 64, 0.08), 0 1px 3px rgba(10, 37, 64, 0.04);
  margin-bottom: 16px;
  overflow: hidden;
}

.u-card.locked .u-card-body {
  opacity: 0.45;
  pointer-events: none;
}

.u-card-header {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
}

.u-form-card {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 290px);
}

.u-form-shell-header {
  flex-shrink: 0;
}

.u-form-shell-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 22px 26px 26px;
}

.u-form-shell-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
  align-items: center;
}

.u-card-header-left,
.u-card-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.u-card-header-left {
  flex: 1;
  min-width: 0;
}

.u-card-title {
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-serif);
  color: var(--text-1);
}

.u-card-badge {
  font-size: 10px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 20px;
}

.u-badge-done {
  background: color-mix(in srgb, var(--green) 20%, rgba(255, 255, 255, 0.92));
  color: color-mix(in srgb, var(--green) 82%, #1b4332);
  border: 1px solid color-mix(in srgb, var(--green) 42%, rgba(255, 255, 255, 0.4));
}

.u-badge-locked {
  background: var(--surface-2);
  color: var(--text-3);
  border: 1px solid var(--border);
}

.u-badge-ai {
  background: rgba(10, 37, 64, 0.07);
  color: var(--navy);
  border: 1px solid rgba(10, 37, 64, 0.18);
}

.u-badge-stale {
  background: #FFF3E0;
  color: #E65100;
  border: 1px solid #FFCC80;
}

.u-badge-stage-accent {
  background: color-mix(in srgb, var(--stage-color) 14%, white);
  color: var(--stage-color);
  border: 1px solid color-mix(in srgb, var(--stage-color) 34%, white);
}

.u-card-body {
  padding: 20px;
}

.u-card-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
}

.u-status-note {
  font-size: 11px;
  color: rgb(16, 36, 62);
}

.u-status-note-warning {
  color: #b45309;
}

.u-status-note-warning-strong {
  color: #b8860b;
  font-weight: 700;
}

.u-status-note-top-gap-sm {
  margin-top: 6px;
}

.u-status-note-top-gap-md {
  margin-top: 8px;
}

.u-status-note-bottom-gap-md {
  margin-bottom: 8px;
}

.u-status-note-compact {
  font-size: 0.78rem;
  opacity: 0.7;
}

.u-status-note-inline {
  margin: 0;
}

.u-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.u-status-dot.unsaved {
  background: var(--coral);
}

.u-status-dot.saved {
  background: var(--green);
}

.u-status-text {
  font-size: 11px;
  color: var(--text-3);
}

.u-spacer {
  flex: 1;
}

.u-edit-toggle {
  font-size: 11px;
  font-weight: 500;
  color: var(--navy);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font);
}

.u-edit-toggle:hover {
  text-decoration: underline;
}

.u-form-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.u-form-grid.cols-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

.u-form-grid.cols-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.u-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.u-field-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.u-field-value {
  font-size: 13px;
  color: var(--text-1);
  line-height: 1.6;
  white-space: pre-wrap;
}

.u-bullet-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.u-bullet-list li {
  margin: 0;
}

.u-scope-value {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.u-scope-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.u-scope-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
}

.u-scope-empty {
  color: var(--text-3);
}

.u-field-input {
  font-family: var(--font);
  font-size: 13px;
  color: var(--text-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  outline: none;
  transition: border-color 0.15s;
  resize: vertical;
  min-height: 60px;
  width: 100%;
  line-height: 1.6;
}

.u-field-input.short {
  min-height: auto;
  resize: none;
}

.u-field-input:focus {
  border-color: var(--navy);
}

#screen-agent.stage-understanding .u-form-card .u-field-label,
#screen-agent.stage-understanding .u-form-card .u-section-label,
#screen-agent.stage-understanding .u-form-card .u-scope-title,
#screen-agent.stage-understanding .u-form-card .u-cronograma-head div,
#screen-agent.stage-understanding .u-form-card .u-cronograma-row-label {
  color: color-mix(in srgb, var(--stage-color) 58%, #10243e);
}

#screen-agent.stage-understanding .u-form-card .u-field-value,
#screen-agent.stage-understanding .u-form-card .u-scope-value,
#screen-agent.stage-understanding .u-form-card .u-cronograma-row-value {
  background: color-mix(in srgb, var(--stage-color) 10%, rgba(255, 255, 255, 0.82));
  border: 1px solid color-mix(in srgb, var(--stage-color) 16%, rgba(16, 36, 62, 0.18));
  border-radius: 12px;
  padding: 11px 14px;
  color: #4b6279;
}

#screen-agent.stage-understanding .u-form-card .u-field-input,
#screen-agent.stage-understanding .u-form-card .u-cronograma-row-input {
  background: rgba(255, 255, 255, 0.99);
  border-color: color-mix(in srgb, var(--stage-color) 28%, rgba(16, 36, 62, 0.18));
  color: #10243e;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 0 0 1px color-mix(in srgb, var(--stage-color) 8%, transparent);
}

#screen-agent.stage-understanding .u-form-card .u-field-input:focus,
#screen-agent.stage-understanding .u-form-card .u-cronograma-row-input:focus {
  border-color: var(--stage-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--stage-color) 16%, transparent);
}

#screen-agent.stage-understanding .u-form-card .u-bullet-list li,
#screen-agent.stage-understanding .u-form-card .u-field-value {
  color: #31475f;
}

.mapping-form-fields {
  min-height: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  padding: 20px 24px;
}

.mapping-form-fields.editing {
  border-color: var(--stage-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--stage-color) 12%, transparent);
}

.sipoc-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.sipoc-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  border: 1px solid color-mix(in srgb, var(--stage-color) 16%, var(--border));
  border-radius: 10px;
  overflow: hidden;
  background: color-mix(in srgb, var(--stage-bg-tint) 88%, white);
}

.sipoc-table th,
.sipoc-table td {
  border: 1px solid color-mix(in srgb, var(--stage-color) 22%, var(--border));
  vertical-align: top;
}

.sipoc-table th {
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--stage-color) 62%, #16324f);
  background: color-mix(in srgb, var(--stage-color) 10%, white);
}

.sipoc-table td {
  padding: 8px 10px;
  background: color-mix(in srgb, var(--stage-bg-tint) 72%, white);
  color: #18324b;
}

.sipoc-input {
  min-height: 58px;
  border: none;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

.sipoc-input:focus {
  border: none;
}

.sipoc-value {
  min-height: 44px;
}

.u-section-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 10px 0 2px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

.u-section-label:first-of-type {
  border-top: none;
  margin-top: 0;
}

.u-cronograma {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.u-cronograma-head,
.u-cronograma-row {
  display: grid;
  grid-template-columns: 140px 1fr;
}

.u-cronograma-head {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.u-cronograma-head div,
.u-cronograma-row-label,
.u-cronograma-row-value,
.u-cronograma-row-input {
  padding: 8px 12px;
  font-size: 12px;
}

.u-cronograma-head div {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-2);
}

.u-cronograma-head div + div,
.u-cronograma-row-value,
.u-cronograma-row-input {
  border-left: 1px solid var(--border);
}

.u-cronograma-row:not(:last-child) {
  border-bottom: 1px solid var(--border);
}

.u-cronograma-row-label {
  color: var(--text-2);
}

.u-cronograma-row-value {
  color: var(--text-1);
}

.u-cronograma-row-input {
  border: none;
  border-left: 1px solid var(--border);
  outline: none;
  font-family: var(--font);
  color: var(--text-1);
  background: transparent;
}

.u-gen-content {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--text-1);
  white-space: pre-wrap;
}

.u-gen-content.markdown-surface {
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.6;
  white-space: normal;
}

.u-gen-notice {
  font-size: 11px;
  color: var(--text-3);
  font-style: italic;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.u-gen-notice-reset {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.u-gen-notice-inline {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.u-gen-notice-strong {
  font-style: normal;
  color: var(--text-1);
}

.u-gen-notice-slot {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--stage-color) 18%, rgba(255, 255, 255, 0.3));
  background: color-mix(in srgb, var(--stage-bg-tint, #f6f9fb) 68%, rgba(255, 255, 255, 0.9));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-1);
}

.u-gen-notice-slot::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.u-gen-notice-slot-loading::before {
  background: var(--stage-color);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--stage-color) 14%, transparent);
  transform-origin: center;
  will-change: transform, opacity, box-shadow;
  animation: statusDotBreath 1.8s ease-in-out infinite;
}

@keyframes statusDotBreath {
  0%, 100% {
    transform: scale(1);
    opacity: 0.88;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--stage-color) 12%, transparent);
  }

  50% {
    transform: scale(1.2);
    opacity: 1;
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--stage-color) 18%, transparent);
  }
}

.u-gen-notice-slot-error {
  border-color: rgba(180, 83, 9, 0.24);
  background: rgba(255, 247, 237, 0.92);
  color: #92400e;
}

.u-gen-notice-slot-error::before {
  background: #f59e0b;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.14);
}

.u-processing-inline {
  margin: 0;
}

.u-card-stack-md {
  margin-bottom: 16px;
}

.u-card-stack-lg {
  margin-bottom: 1rem;
}

.u-top-gap-md {
  margin-top: 16px;
}

.u-card-title-sm {
  font-size: 0.85rem;
}

.u-status-text-sm {
  font-size: 13px;
}

.u-status-text-md {
  font-size: 13px;
}

.u-inline-actions-end {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.u-inline-actions-end.u-inline-actions-lg {
  margin-top: 1rem;
}

.u-inline-actions-end.u-inline-actions-sm {
  margin-top: 0.5rem;
}

.diagnostico-input-actions-top {
  margin-top: 10px;
}

.redesenho-chat-history-compact {
  max-height: 200px;
  overflow-y: auto;
  margin-top: 0.5rem;
}

.redesenho-table-cell-center {
  text-align: center;
}

.redesenho-cenario-actions-row {
  justify-content: space-between;
  align-items: center;
}

.redesenho-cenario-hint {
  font-size: 12px;
  color: var(--text-3);
}

.understanding-content-area .u-status-text,
.understanding-content-area .u-gen-notice {
  color: rgb(16, 36, 62);
}

.u-sources-block {
  margin-top: 16px;
  padding: 16px 18px 0;
  border-top: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.58);
  border-radius: 14px;
}

.u-sources-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.u-sources-list {
  list-style: none;
  display: grid;
  gap: 8px;
  min-width: 0;
}

.u-source-item {
  display: block;
  min-width: 0;
  max-width: 100%;
  padding: 8px 10px;
  border: 1px solid rgba(10, 37, 64, 0.07);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
}

.u-source-index {
  display: none;
}

.u-source-link,
.u-source-text {
  font-size: 12px;
  line-height: 1.35;
  word-break: break-word;
  overflow-wrap: anywhere;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--stage-border);
  background: var(--stage-light);
}

.u-source-link {
  color: var(--stage-color);
  text-decoration: none;
}

.u-source-text {
  color: var(--text-2);
}

.u-source-link:hover {
  text-decoration: none;
  filter: brightness(0.98);
}

.u-sources-empty {
  font-size: 12px;
  color: var(--text-3);
}

.understanding-advance-bar {
  display: flex;
  flex: 0 0 auto;
  justify-content: flex-end;
  align-items: center;
  gap: 0;
  border-top: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
  backdrop-filter: none;
  position: absolute;
  right: 24px;
  bottom: 18px;
  z-index: 18;
  width: auto;
  height: 0;
  overflow: visible;
  pointer-events: none;
}

.understanding-advance-bar .advance-bar-info {
  display: none;
}

.understanding-advance-bar .advance-btn {
  width: min(420px, 100%);
  min-width: 320px;
}

.mapping-advance-bar {
  display: flex;
  flex: 0 0 auto;
  justify-content: flex-end;
  align-items: center;
  gap: 0;
  border-top: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
  backdrop-filter: none;
  position: absolute;
  right: 24px;
  bottom: 18px;
  z-index: 18;
  width: auto;
  height: 0;
  overflow: visible;
  pointer-events: none;
}

.mapping-advance-bar .advance-bar-info {
  display: none;
}

.mapping-advance-bar .advance-btn {
  pointer-events: auto;
  width: min(420px, 100%);
  min-width: 320px;
  margin-left: auto;
}

.advance-btn {
  padding: 9px 16px;
  min-height: 39px;
}

.u-form-shell-actions,
.form-btns {
  gap: 14px;
  row-gap: 10px;
  margin-left: auto;
  flex-shrink: 0;
}

.u-card-header-left {
  min-width: 0;
  gap: 12px;
}

.transcript-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: auto;
  max-width: none;
  margin: 14px 26px 0;
  padding: 8px 18px;
  border: 1px solid color-mix(in srgb, var(--stage-color) 10%, var(--border));
  border-top-color: color-mix(in srgb, var(--stage-color) 10%, var(--border));
  border-bottom-color: color-mix(in srgb, var(--stage-color) 14%, var(--border));
  border-radius: 22px;
  background: color-mix(in srgb, var(--surface) 88%, white);
  box-sizing: border-box;
  box-shadow: 0 10px 24px rgba(10, 37, 64, 0.05);
}

.understanding-transcript-bar {
  gap: 10px;
  margin: 10px 26px 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  align-items: center;
  justify-content: flex-end;
}

.understanding-transcript-bar .transcript-action-copy {
  flex: 0 1 440px;
  display: flex;
  align-items: center;
  min-height: 0;
  justify-content: flex-end;
  text-align: right;
  margin-left: auto;
  max-width: 460px;
}

.mapping-transcript-inline {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  width: auto;
  max-width: none;
  margin: 14px 26px 0;
  padding: 0;
  box-sizing: border-box;
}

.mapping-transcript-inline .transcript-action-copy {
  flex: 0 1 520px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-align: right;
  min-height: 0;
  margin-left: auto;
  max-width: 540px;
}

.mapping-transcript-inline .transcript-action-hint {
  margin-top: 0;
  text-align: right;
}

.mapping-transcript-inline .transcript-action-buttons {
  flex: 0 0 auto;
  gap: 8px;
}

.mapping-form-secondary-actions {
  justify-content: flex-end;
  gap: 10px;
  padding: 0 26px 16px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

#screen-agent.stage-mapping #mappingShell .form-header {
  align-items: flex-start;
  gap: 24px;
  justify-content: space-between;
}

#screen-agent.stage-mapping #mappingShell .form-header > :first-child {
  min-width: 0;
  padding-right: 16px;
}

#screen-agent.stage-mapping #mappingShell .form-header > :first-child > div {
  min-width: 0;
}

#screen-agent.stage-mapping #mappingShell .form-btns {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  column-gap: 6px;
  row-gap: 8px;
  gap: 6px;
  flex: 0 0 auto;
  white-space: nowrap;
}

#screen-agent.stage-mapping #mappingShell .form-btns .f-btn {
  min-width: auto;
  justify-content: center;
  margin: 0 !important;
  flex: 0 0 auto;
}

#screen-agent.stage-mapping #mappingShell .form-btns .f-btn.icon-only {
  width: 44px;
  min-width: 44px;
  padding-left: 0;
  padding-right: 0;
}

#screen-agent.stage-mapping #mappingShell .mapping-form-secondary-actions {
  justify-content: flex-end;
  gap: 10px;
  padding: 0 26px 16px;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  align-items: center;
}

#screen-agent.stage-mapping #mappingShell .mapping-form-secondary-actions .f-btn {
  margin: 0 !important;
}

#screen-agent.stage-mapping #mappingShell .mapping-form-fields {
  border-radius: 0;
  border: 0;
  background: transparent;
  padding: 0;
  min-height: auto !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  display: block !important;
}

#screen-agent.stage-mapping #mappingShell .col-right {
  overflow-y: auto;
  overflow-x: hidden;
}

#screen-agent.stage-mapping #mappingShell .form-body {
  flex: 0 0 auto;
  min-height: auto;
  overflow: visible;
}

#screen-agent.stage-mapping #mappingShell .u-section-label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.07em;
  color: var(--navy);
}

#screen-agent.stage-mapping #mappingShell .u-field-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-2);
}

#screen-agent.stage-mapping #mappingShell .u-field-value,
#screen-agent.stage-mapping #mappingShell .sipoc-value {
  font-size: 13px;
  line-height: 1.6;
}

#screen-agent.stage-mapping #mappingShell .panel-body .p-sec-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: 0.01em;
}

.understanding-transcript-bar .transcript-action-hint {
  margin-top: 0;
  color: var(--text-2);
  text-align: right;
}

#screen-agent.stage-understanding .u-status-note,
#screen-agent.stage-understanding .entry-sub,
#screen-agent.stage-understanding .tools-hint,
#screen-agent.stage-understanding .transcript-action-hint {
  color: rgb(16, 36, 62) !important;
}

.understanding-transcript-bar .transcript-action-buttons {
  gap: 8px;
  flex: 0 0 auto;
}

.understanding-shell .entry-card.is-loading {
  opacity: 0.92;
  border-color: color-mix(in srgb, var(--stage-color) 34%, white);
}

#screen-agent.stage-mapping #mappingShell .mapping-entry-card.is-loading {
  opacity: 0.92;
  border-color: var(--border-2);
}

.understanding-shell .entry-card.is-loading .entry-sub::after {
  content: " · processando";
  font-weight: 600;
}

#screen-agent.stage-mapping #mappingShell .mapping-entry-card.is-loading .entry-sub::after {
  content: " · processando";
  font-weight: 600;
}

.transcript-action-copy {
  min-width: 0;
  flex: 1;
}

.transcript-action-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.transcript-action-hint {
  margin-top: 0;
  font-size: 11px;
  color: var(--text-3);
}

#mappingTranscriptActions {
  min-height: 56px;
  align-items: center;
}

#mappingTranscriptActions .transcript-action-copy {
  display: flex;
  align-items: center;
  min-height: 34px;
}

#mappingTranscriptActions .transcript-action-buttons {
  align-items: center;
}

.transcript-action-buttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.right-state-actions,
.u-message-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.transcript-action-btn.active,
.transcript-cancel-btn {
  border-color: var(--stage-border);
  color: var(--stage-color);
  background: var(--stage-light);
}

.transcript-cancel-btn.hidden,
.transcript-action-bar.hidden {
  display: none;
}

.proj-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.proj-meta {
  align-items: flex-end;
  flex-wrap: wrap;
}

.proj-date {
  flex: 1 1 120px;
  overflow-wrap: anywhere;
  font-size: 8.5px;
  line-height: 1.15;
}

.proj-action-btn {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    color 0.15s ease,
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.proj-action-btn svg {
  width: 13px;
  height: 13px;
  display: block;
}

.proj-action-btn:hover {
  border-color: var(--stage-border);
  color: var(--stage-color);
  background: var(--stage-light);
}

.proj-action-btn.danger:hover {
  border-color: rgba(185, 28, 28, 0.22);
  color: #b91c1c;
  background: rgba(254, 242, 242, 0.98);
}

@media (max-width: 980px) {
  .transcript-action-bar {
    flex-direction: column;
    align-items: stretch;
    margin: 12px 14px 0;
  }

  .transcript-action-buttons {
    justify-content: flex-start;
  }
}

.understanding-form-header {
  align-items: flex-start;
  gap: 24px;
  justify-content: space-between;
}

.understanding-form-actions {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  justify-content: flex-end;
  column-gap: 6px !important;
  gap: 6px !important;
  row-gap: 8px !important;
  padding-left: 0;
  white-space: nowrap;
  flex: 0 0 auto;
}

.understanding-form-header .u-card-header-left {
  padding-right: 16px;
  min-width: 0;
}

.understanding-form-header .u-card-header-left > div {
  min-width: 0;
}

.understanding-form-actions .f-btn {
  min-width: auto;
  justify-content: center;
  margin: 0 !important;
  flex: 0 0 auto;
}

.understanding-form-actions .f-btn.icon-only {
  width: 44px;
  min-width: 44px;
  padding-left: 0;
  padding-right: 0;
}

.understanding-form-actions .f-btn + .f-btn {
  margin-left: 0 !important;
}

@media (max-width: 1280px) {
  .understanding-form-actions {
    flex-wrap: wrap !important;
    justify-content: flex-end;
  }
}

@media (max-width: 1180px) {
  .panel {
    width: min(360px, calc(100% - 26px));
  }
}

@media (max-width: 980px) {
  .agent-main {
    flex-direction: column;
  }

  .col-left {
    width: 100% !important;
    min-width: 0;
    min-height: 42%;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .resize-handle {
    display: none;
  }

  .panel {
    position: fixed;
    inset: auto 12px 12px 12px;
    width: auto;
    max-height: 50vh;
  }

  .debug-grid {
    grid-template-columns: 1fr;
  }
}

/* ===========================================================
   REDESENHO
   =========================================================== */

.redesenho-shell {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  background: var(--stage-bg-tint);
  overflow: hidden;
}

.redesenho-page {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 24px 24px 18px;
  max-width: min(1360px, calc(100vw - 56px));
  width: 100%;
  margin: 0 auto;
  background: transparent;
}

/* Fase 1 — Cenários */

.redesenho-fase1-wrap,
.redesenho-fase2-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--agent-stack-gap);
}

.redesenho-fase2-wrap > * {
  flex: 0 0 auto;
}

.redesenho-chat-card .u-card-body {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.redesenho-chat-history {
  max-height: 260px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0;
}

.redesenho-chat-empty {
  font-size: 12px;
  color: var(--text-3);
  padding: 8px 0;
}

.chat-entry {
  display: flex;
}

.chat-entry-user {
  justify-content: flex-end;
}

.chat-entry-agent {
  justify-content: flex-start;
}

.chat-bubble {
  max-width: 80%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 12.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.bubble-user {
  background: #dcf8c6;
  color: #1a1a1a;
  border-bottom-right-radius: 4px;
}

.bubble-agent {
  background: color-mix(in srgb, var(--stage-color) 12%, white);
  color: var(--text-1);
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--stage-color) 20%, transparent);
  font-family: var(--font-serif);
  overflow: hidden;
  background-clip: padding-box;
}

/* Cards de cenário */

.redesenho-cenarios-grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 6px 0;
}

.redesenho-cenario-item,
.redesenho-cenario-selecionado {
  border: 1px solid color-mix(in srgb, var(--stage-color) 18%, var(--border));
  border-radius: 16px;
  padding: 18px 20px;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--stage-color) 6%, rgba(255, 255, 255, 0.9)) 0%,
      rgba(255, 255, 255, 0.84) 28%,
      rgba(255, 255, 255, 0.8) 100%
    );
  box-shadow: 0 10px 24px rgba(0, 172, 193, 0.08);
  transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(18px) saturate(1.02);
  -webkit-backdrop-filter: blur(18px) saturate(1.02);
  background-clip: padding-box;
}

.redesenho-cenario-item:hover,
.redesenho-cenario-selecionado:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--stage-color) 34%, var(--border));
  box-shadow: 0 14px 28px rgba(0, 172, 193, 0.12);
}

.redesenho-cenario-item::before,
.redesenho-cenario-selecionado::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--stage-color) 0%, color-mix(in srgb, var(--stage-color) 45%, #fff) 100%);
}

.redesenho-cenario-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}

.redesenho-cenario-titulo {
  font-size: 17px;
  line-height: 1.25;
  font-weight: 600;
  font-family: var(--font-serif);
  color: var(--text-1);
}

.redesenho-cenario-desc {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.65;
  margin-bottom: 14px;
}

.redesenho-cenario-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

.redesenho-cenario-col-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
  margin-bottom: 6px;
}

.redesenho-cenario-col {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.88);
  padding: 10px 12px;
}

.redesenho-cenario-col ul {
  margin: 0;
  padding-left: 16px;
}

.redesenho-cenario-col li {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.55;
  margin-bottom: 4px;
}

.redesenho-cenario-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.redesenho-cenario-summary-item {
  border: 1px solid color-mix(in srgb, var(--stage-color) 16%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--stage-color) 6%, white);
  padding: 10px 12px;
  min-height: 72px;
}

.redesenho-cenario-summary-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  margin-bottom: 6px;
}

.redesenho-cenario-summary-value {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-1);
  line-height: 1.4;
}

.redesenho-cenario-placeholder {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-3);
}

.redesenho-cenario-projecao {
  font-size: 12px;
  color: var(--text-2);
  background: color-mix(in srgb, var(--stage-color) 9%, white);
  border: 1px solid color-mix(in srgb, var(--stage-color) 18%, var(--border));
  border-radius: 10px;
  padding: 9px 11px;
  margin-bottom: 14px;
  line-height: 1.55;
}

.redesenho-cenario-projecao-muted {
  color: var(--text-3);
}

.redesenho-cenario-badges {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.redesenho-cenario-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 2px;
}

.redesenho-cenario-actions .u-status-note {
  font-size: 11px;
}

.redesenho-output-card .u-status-note {
  margin: 0 16px 8px;
}

/* Business case card (fase 1 — entre cenários) */
.redesenho-business-case-card {
  min-height: 120px;
}

.redesenho-business-case-card .u-status-note {
  margin: 0 16px 8px;
}

/* Cenário selecionado (fase 2) */

.redesenho-cenario-selecionado {
  margin-bottom: 0;
}

.redesenho-cenario-header-selected {
  margin-bottom: 10px;
}

.redesenho-cenario-header-left,
.redesenho-cenario-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.redesenho-cenario-header-left {
  flex: 1;
  min-width: 0;
}

.redesenho-cenario-selected-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.redesenho-cenario-selected-body > * {
  margin: 0;
}

.redesenho-cenario-header-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.redesenho-cenario-eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
}

.redesenho-cenario-history {
  margin-top: 4px;
}

.redesenho-cenario-history summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--text-3);
  list-style: none;
}

.redesenho-cenario-history summary::-webkit-details-marker {
  display: none;
}

.redesenho-cenario-history summary::before {
  content: "▸ ";
}

.redesenho-cenario-history[open] summary::before {
  content: "▾ ";
}

/* Grid de outputs */

.redesenho-outputs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 16px;
  row-gap: var(--agent-stack-gap);
}

.redesenho-fase2-wrap > .redesenho-outputs-grid {
  margin-top: 0;
}

.redesenho-output-card {
  min-width: 0;
  min-height: 186px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 0 0 auto;
}

.redesenho-output-card .u-card-body {
  flex: 1;
  min-width: 0;
}

/* Redesenho: os cards precisam crescer livremente com o conteúdo. */
#screen-agent.stage-redesenho .redesenho-page {
  padding-bottom: 104px;
  overflow-y: auto !important;
  overflow-x: visible !important;
}

#screen-agent.stage-redesenho .redesenho-fase2-wrap,
#screen-agent.stage-redesenho .redesenho-outputs-grid,
#screen-agent.stage-redesenho .redesenho-outputs-grid > * {
  overflow: visible !important;
}

#screen-agent.stage-redesenho .redesenho-fase2-wrap > *,
#screen-agent.stage-redesenho .redesenho-output-card,
#screen-agent.stage-redesenho .redesenho-cenario-selecionado,
#screen-agent.stage-redesenho .redesenho-outputs-grid {
  flex-shrink: 0 !important;
}

#screen-agent.stage-redesenho .redesenho-output-card {
  display: flex !important;
  flex-direction: column !important;
  min-height: auto !important;
  height: auto !important;
  overflow: hidden !important;
}

#screen-agent.stage-redesenho .redesenho-output-card .u-card-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

#screen-agent.stage-redesenho .u-card-body.redesenho-cenarios-grid {
  display: block !important;
  flex: none !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

#screen-agent.stage-redesenho .redesenho-cenario-item,
#screen-agent.stage-redesenho .redesenho-cenario-selecionado,
#screen-agent.stage-redesenho .redesenho-cenario-history,
#screen-agent.stage-redesenho .redesenho-cenario-history[open] {
  overflow: hidden !important;
}

/* Tabelas estruturadas */

.redesenho-table-wrap {
  width: 100%;
  overflow-x: auto;
  margin-top: 4px;
}

.redesenho-table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  background: color-mix(in srgb, var(--stage-bg-tint) 88%, white);
  border: 1px solid color-mix(in srgb, var(--stage-color) 24%, var(--border));
  font-size: 12px;
}

.redesenho-table th,
.redesenho-table td {
  border: 1px solid color-mix(in srgb, var(--stage-color) 22%, var(--border));
  padding: 8px 10px;
  vertical-align: top;
  text-align: left;
}

.redesenho-table th {
  background: color-mix(in srgb, var(--stage-color) 10%, white);
  color: color-mix(in srgb, var(--stage-color) 62%, #16324f);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.redesenho-table td {
  background: color-mix(in srgb, var(--stage-bg-tint) 72%, white);
  color: #18324b;
  line-height: 1.45;
  white-space: pre-wrap;
}

/* RACI cores */
.redesenho-table td.raci-r,
.raci-r { background: #e8f5e9 !important; color: #2e7d32 !important; font-weight: 700; text-align: center; }
.redesenho-table td.raci-a,
.raci-a { background: #fff3e0 !important; color: #e65100 !important; font-weight: 700; text-align: center; }
.redesenho-table td.raci-c,
.raci-c { background: #e3f2fd !important; color: #1565c0 !important; font-weight: 700; text-align: center; }
.redesenho-table td.raci-i,
.raci-i { background: #f3e5f5 !important; color: #6a1b9a !important; font-weight: 700; text-align: center; }
.redesenho-table td.raci-processo,
.raci-processo { font-weight: 600; color: #46617c !important; background: color-mix(in srgb, var(--stage-color) 6%, white) !important; }

.raci-legenda {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 6px;
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
}

.raci-legenda span {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 10px;
}

/* BPMN TO-BE */
.redesenho-output-pre {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  color: var(--text-1);
  margin: 0;
  padding: 4px 0;
}

#screen-agent.stage-implementacao #implXlsxBtn {
  min-height: 36px;
  height: 36px;
  padding-top: 0;
  padding-bottom: 0;
}

/* Voltar */
.redesenho-voltar-wrap {
  padding: 4px 0 16px;
  display: flex;
  justify-content: flex-start;
}

/* Advance bar */
.redesenho-advance-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  border-top: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
  backdrop-filter: none;
  position: absolute;
  right: 24px;
  bottom: 18px;
  z-index: 18;
  width: auto;
  height: 0;
  overflow: visible;
  pointer-events: none;
}

.redesenho-advance-bar .advance-bar-info {
  display: none;
}

.redesenho-advance-bar .advance-btn {
  width: min(340px, 100%);
  min-width: 220px;
  margin-left: auto;
}

#backProjectsBtn.back-btn {
  color: rgba(191, 198, 207, 0.94) !important;
}

@media (max-width: 900px) {
  .redesenho-outputs-grid {
    grid-template-columns: 1fr;
  }
  .redesenho-cenario-metrics {
    grid-template-columns: 1fr;
  }
}

/* ===========================================================
   FIM REDESENHO
   =========================================================== */

/* ===========================================================
   IMPLEMENTACAO
   =========================================================== */

.implementacao-shell {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  background: var(--stage-bg-tint);
  overflow: hidden;
}

.implementacao-page {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 24px 24px 18px;
  max-width: min(1360px, calc(100vw - 56px));
  width: 100%;
  margin: 0 auto;
  background: transparent;
}

.implementacao-entrada-wrap,
.implementacao-plano-wrap,
.implementacao-analise-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Cartão de entrada */

.implementacao-entry-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.implementacao-entry-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.implementacao-cidade-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.implementacao-cidade-input {
  width: 100%;
  max-width: 320px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-1);
  background: #fff;
  outline: none;
  transition: border-color 0.15s;
}

.implementacao-cidade-input:focus {
  border-color: var(--stage-color);
}

.implementacao-entry-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* Iteration textarea (menor que o principal) */
.implementacao-iter-textarea {
  min-height: 72px !important;
}

/* Tabela do plano */

.implementacao-table-wrap {
  width: 100%;
  overflow-x: auto;
  margin-top: 4px;
}

.implementacao-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  background: color-mix(in srgb, var(--stage-bg-tint) 72%, rgba(255, 255, 255, 0.82));
  border: 1px solid color-mix(in srgb, var(--stage-color) 16%, var(--border));
  font-size: 12px;
}

.implementacao-table th,
.implementacao-table td {
  border: 1px solid color-mix(in srgb, var(--stage-color) 14%, var(--border));
  padding: 8px 10px;
  vertical-align: top;
  text-align: left;
}

.implementacao-table th {
  background: color-mix(in srgb, var(--stage-color) 10%, white);
  color: color-mix(in srgb, var(--stage-color) 62%, #16324f);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.implementacao-table td {
  background: color-mix(in srgb, var(--stage-bg-tint) 58%, rgba(255, 255, 255, 0.78));
  color: #18324b;
  line-height: 1.45;
  white-space: pre-wrap;
}

.impl-date {
  white-space: nowrap;
  font-size: 11.5px;
  color: var(--text-2);
}

/* Status badges */
.impl-status {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.impl-status-pending  { background: #f5f5f5; color: #555; }
.impl-status-progress { background: #e3f2fd; color: #1565c0; }
.impl-status-done     { background: #e8f5e9; color: #2e7d32; }
.impl-status-late     { background: #fce4ec; color: #b71c1c; }

/* Feriados card */
.implementacao-feriados-card .u-card-header {
  padding-bottom: 4px;
}

/* Análise (markdown) */
.implementacao-analise-content {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-1);
}

.implementacao-analise-content h2,
.implementacao-analise-content h3,
.implementacao-analise-content h4 {
  margin: 14px 0 6px;
  color: var(--text-1);
}

.implementacao-analise-content ul {
  padding-left: 18px;
  margin: 4px 0;
}

.implementacao-analise-content li {
  margin-bottom: 3px;
}

.implementacao-analise-content strong {
  color: var(--text-1);
}

/* Processing */
.implementacao-processing-card .u-card-body {
  display: flex;
  align-items: center;
  gap: 12px;
}

.implementacao-processing-msg {
  font-size: 13px;
  color: var(--text-2);
}

/* Advance bar */
.implementacao-advance-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  border-top: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
  backdrop-filter: none;
  position: absolute;
  right: 24px;
  bottom: 18px;
  z-index: 18;
  width: auto;
  height: 0;
  overflow: visible;
  pointer-events: none;
}

.implementacao-advance-bar .advance-bar-info {
  display: none;
}

.implementacao-advance-bar .advance-btn {
  width: min(420px, 100%);
  min-width: 300px;
  margin-left: auto;
}

@media (max-width: 900px) {
  .implementacao-table {
    min-width: 600px;
  }
}

/* ===========================================================
   FIM IMPLEMENTACAO
   =========================================================== */

/* ===========================================================
   OPERACAO E MONITORAMENTO
   =========================================================== */

.monitoramento-shell {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  background: var(--stage-bg-tint);
  overflow: hidden;
}

.monitoramento-page {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 24px 24px 108px;
  max-width: min(1360px, calc(100vw - 56px));
  width: 100%;
  margin: 0 auto;
  background: transparent;
}

.monitoramento-plan-card,
.monitoramento-plan-body {
  overflow: visible;
}

.monitoramento-page .u-card.fi,
.monitoramento-page .u-card.fi .u-card-body {
  min-height: auto;
  height: auto;
  overflow: visible;
}

.monitoramento-plan-body {
  min-height: auto;
}

.monitoramento-entry-body,
.monitoramento-plan-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.monitoramento-entry-card,
.monitoramento-entry-body,
.monitoramento-entry-grid,
.monitoramento-entry-grid > * {
  min-height: auto;
  height: auto;
}

.monitoramento-entry-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.monitoramento-entry-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.monitoramento-entry-block-wide {
  min-width: 0;
}

.monitoramento-entry-block-full {
  grid-column: 1 / -1;
}

.monitoramento-bpmn-actions,
.monitoramento-section-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.form-btns > .f-btn,
.form-btns > .tool-btn,
.form-btns > .copy-btn,
.u-form-shell-actions > .f-btn,
.u-form-shell-actions > .tool-btn,
.u-form-shell-actions > .copy-btn,
.transcript-action-buttons > .f-btn,
.transcript-action-buttons > .tool-btn,
.transcript-action-buttons > .copy-btn,
.implementacao-entry-actions > .f-btn,
.implementacao-entry-actions > .tool-btn,
.implementacao-entry-actions > .copy-btn,
.monitoramento-bpmn-actions > .f-btn,
.monitoramento-bpmn-actions > .tool-btn,
.monitoramento-bpmn-actions > .copy-btn,
.monitoramento-section-actions > .f-btn,
.monitoramento-section-actions > .tool-btn,
.monitoramento-section-actions > .copy-btn {
  height: 36px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

.form-btns > .f-btn:not(.icon-only),
.form-btns > .tool-btn:not(.icon-only),
.form-btns > .copy-btn:not(.icon-only),
.u-form-shell-actions > .f-btn:not(.icon-only),
.u-form-shell-actions > .tool-btn:not(.icon-only),
.u-form-shell-actions > .copy-btn:not(.icon-only),
.u-card-header-right > .f-btn:not(.icon-only),
.transcript-action-buttons > .f-btn:not(.icon-only),
.transcript-action-buttons > .tool-btn:not(.icon-only),
.transcript-action-buttons > .copy-btn:not(.icon-only),
.implementacao-entry-actions > .f-btn:not(.icon-only),
.implementacao-entry-actions > .tool-btn:not(.icon-only),
.implementacao-entry-actions > .copy-btn:not(.icon-only),
.monitoramento-bpmn-actions > .f-btn:not(.icon-only),
.monitoramento-bpmn-actions > .tool-btn:not(.icon-only),
.monitoramento-bpmn-actions > .copy-btn:not(.icon-only),
.monitoramento-section-actions > .f-btn:not(.icon-only),
.monitoramento-section-actions > .tool-btn:not(.icon-only),
.monitoramento-section-actions > .copy-btn:not(.icon-only) {
  min-width: 168px;
}

.understanding-gamma-link {
  min-height: 36px;
  height: 36px;
  padding-top: 0;
  padding-bottom: 0;
  text-decoration: none;
}

.monitoramento-select,
.monitoramento-input,
.monitoramento-textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text-1);
  font-size: 13px;
  padding: 9px 10px;
  outline: none;
}

.monitoramento-select:focus,
.monitoramento-input:focus,
.monitoramento-textarea:focus {
  border-color: var(--stage-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--stage-color) 12%, transparent);
}

.monitoramento-textarea {
  min-height: 72px;
  resize: vertical;
}

.monitoramento-context-preview {
  min-height: 260px;
  max-height: 420px;
  overflow-y: auto;
  resize: vertical;
  line-height: 1.55;
}

.monitoramento-bpmn-readonly {
  min-height: 132px;
  background: color-mix(in srgb, var(--stage-color) 4%, white);
  color: var(--text-2);
}

.monitoramento-inline-alert {
  border: 1px solid color-mix(in srgb, var(--stage-color) 18%, transparent);
  background: color-mix(in srgb, var(--stage-color) 8%, white);
  color: var(--text-2);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px;
}

.monitoramento-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.monitoramento-id-grid,
.monitoramento-indicator-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.monitoramento-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.monitoramento-field-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.monitoramento-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.monitoramento-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  background: color-mix(in srgb, var(--stage-bg-tint) 88%, white);
  border: 1px solid color-mix(in srgb, var(--stage-color) 24%, var(--border));
  font-size: 12px;
}

.monitoramento-table th,
.monitoramento-table td {
  border: 1px solid color-mix(in srgb, var(--stage-color) 22%, var(--border));
  padding: 8px 10px;
  vertical-align: top;
  text-align: left;
}

.monitoramento-table th {
  background: color-mix(in srgb, var(--stage-color) 12%, white);
  color: color-mix(in srgb, var(--stage-color) 60%, #16324f);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.monitoramento-table td {
  background: color-mix(in srgb, var(--stage-bg-tint) 72%, white);
  color: #18324b;
}

.monitoramento-row-actions {
  width: 50px;
  text-align: center;
}

.monitoramento-remove-btn {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.monitoramento-remove-btn:hover {
  border-color: var(--stage-border);
  color: var(--stage-color);
  background: var(--stage-light);
}

.monitoramento-indicator-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.monitoramento-indicator-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  padding: 16px;
}

.monitoramento-indicator-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.monitoramento-indicator-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
}

.monitoramento-plan-footer {
  border-top: 1px solid var(--border);
  padding-top: 2px;
}

.monitoramento-processing-msg {
  font-size: 13px;
  color: var(--text-2);
}

.monitoramento-advance-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  border-top: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
  backdrop-filter: none;
  position: absolute;
  right: 24px;
  bottom: 18px;
  z-index: 18;
  width: auto;
  height: 0;
  overflow: visible;
  pointer-events: none;
}

.advance-wrap .advance-btn,
.understanding-advance-bar .advance-btn,
.diagnostico-advance-bar .advance-btn,
.redesenho-advance-bar .advance-btn,
.implementacao-advance-bar .advance-btn,
.monitoramento-advance-bar .advance-btn {
  pointer-events: auto;
}

#mappingShell .col-left {
  position: relative;
}

.monitoramento-advance-bar .advance-bar-info {
  display: none;
}

.monitoramento-advance-bar .advance-btn {
  width: min(420px, 100%);
  min-width: 280px;
  margin-left: auto;
}

@media (max-width: 980px) {
  .monitoramento-entry-grid,
  .monitoramento-id-grid,
  .monitoramento-indicator-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .redesenho-cenario-summary-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ===========================================================
   FIM OPERACAO E MONITORAMENTO
   =========================================================== */

@media (max-width: 720px) {
  .home-body {
    padding: 20px 16px 48px;
  }

  .topbar,
  .stage-nav,
  .ctx-bar,
  .form-header {
    padding-left: 14px;
    padding-right: 14px;
  }

  .chat-scroll,
  .chat-input-wrap,
  .tools-strip,
  .advance-wrap,
  .form-body {
    padding-left: 14px;
    padding-right: 14px;
  }

  .agent-grid,
  .proj-grid {
    grid-template-columns: 1fr !important;
  }

  .ctx-bar {
    gap: 8px;
    align-items: flex-start;
    min-height: 44px;
    padding-top: 6px;
    padding-bottom: 6px;
  }
}

.back-btn:hover,
.avatar-button:hover,
.logo-button:hover,
.add-proc:hover,
.tool-btn:hover:not(:disabled),
.f-btn:hover:not(:disabled),
.understanding-shell .btn:hover:not(:disabled),
.proj-open-btn:hover,
.new-proj-btn:hover,
.logout-btn:hover,
.modal-btn:hover,
.login-submit:hover,
.u-edit-toggle:hover,
.proj-action-btn:hover {
  transform: none !important;
}


#mappingShell {
  position: relative;
}

#screen-agent.stage-mapping #mappingShell .tools-strip,
#screen-agent.stage-mapping #mappingShell .resize-handle,
#screen-agent.stage-mapping #mappingShell .panel {
  display: none !important;
}

#screen-agent.stage-mapping #mappingShell .mapping-agent-main {
  align-items: stretch;
  gap: 20px;
}

#screen-agent.stage-mapping #mappingShell .col-right,
#screen-agent.stage-mapping #mappingShell #mappingMainColumn {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
}

#screen-agent.stage-mapping #mappingShell .mapping-chat-panel {
  width: 0;
  flex: 0 0 0;
  max-width: 0;
  min-width: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-24px);
  transition: flex-basis 0.32s ease, max-width 0.32s ease, opacity 0.22s ease, transform 0.32s ease;
}

#screen-agent.stage-mapping #mappingShell.chat-open .mapping-chat-panel {
  width: 50%;
  flex: 0 0 50%;
  max-width: 50%;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

#screen-agent.stage-mapping #mappingShell .mapping-chat-card {
  height: 100%;
  min-height: calc(100vh - 260px);
  display: flex;
  flex-direction: column;
}

#screen-agent.stage-mapping #mappingShell .mapping-chat-card-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  flex: 1 1 auto;
}

#screen-agent.stage-mapping #mappingShell .mapping-chat-card .chat-scroll {
  flex: 1 1 auto;
  min-height: 280px;
}

#screen-agent.stage-mapping #mappingShell #mappingMainColumn {
  flex: 1 1 auto;
  min-width: 0;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 0 84px;
  width: 100%;
  max-width: min(1360px, calc(100vw - 56px));
  margin: 0 auto;
}

#screen-agent.stage-mapping #mappingShell #mappingEntryArea {
  margin-bottom: 20px;
  width: 100%;
}

#screen-agent.stage-mapping #mappingShell .mapping-form-card {
  margin-bottom: 20px;
  overflow: visible;
  min-height: auto !important;
  height: auto !important;
  display: block !important;
  width: 100%;
}

#screen-agent.stage-mapping #mappingShell .mapping-form-card .form-header {
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border);
}

#screen-agent.stage-mapping #mappingShell .mapping-form-card .u-card-header-left {
  padding-right: 16px;
  min-width: 0;
}

#screen-agent.stage-mapping #mappingShell .mapping-form-card .u-card-header-left > div {
  min-width: 0;
}

#screen-agent.stage-mapping #mappingShell .mapping-form-card .right-state {
  margin: 0 20px 20px;
}

#screen-agent.stage-mapping #mappingShell .mapping-form-card .form-header.hidden {
  display: none !important;
}

#screen-agent.stage-mapping #mappingShell .mapping-form-card .form-body {
  padding: 22px 26px 26px !important;
  overflow: visible;
  min-height: auto !important;
  height: auto !important;
  flex: 0 0 auto !important;
}

#screen-agent.stage-mapping #mappingShell .mapping-form-card.u-form-card,
#screen-agent.stage-mapping #mappingShell .mapping-form-card .u-form-shell-body,
#screen-agent.stage-mapping #mappingShell .mapping-form-card .u-card-body {
  min-height: auto !important;
  height: auto !important;
  flex: 0 0 auto !important;
  overflow: visible !important;
}

#screen-agent.stage-mapping #mappingShell .mapping-form-card .lousa-preview,
#screen-agent.stage-mapping #mappingShell .mapping-form-card #lousaPreview {
  overflow: visible !important;
  min-height: auto !important;
  height: auto !important;
  max-height: none !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  outline: none !important;
}

#screen-agent.stage-mapping #mappingShell .mapping-form-card .lousa-preview.editing,
#screen-agent.stage-mapping #mappingShell .mapping-form-card #lousaPreview.editing,
#screen-agent.stage-mapping #mappingShell .mapping-form-fields.editing {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

#screen-agent.stage-mapping #mappingShell .mapping-form-secondary-actions {
  padding: 0 20px 16px;
}

#screen-agent.stage-mapping #mappingShell .mapping-chat-toggle-btn {
  width: auto !important;
  min-width: 0 !important;
  height: 36px !important;
  padding: 0 14px !important;
  border-radius: 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

#screen-agent.stage-mapping #mappingShell .mapping-entry-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  margin-top: 0;
  margin-bottom: 18px;
}

#screen-agent.stage-mapping #mappingShell .mapping-entry-status {
  margin: 0 0 18px;
}

#screen-agent.stage-mapping #mappingShell .mapping-entry-grid .entry-sub {
  font-size: 12px;
  line-height: 1.5;
  color: rgb(16, 36, 62);
}

#screen-agent.stage-mapping #mappingShell .mapping-entry-grid .entry-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  line-height: 1.15;
  letter-spacing: 0;
}

#screen-agent.stage-mapping #mappingShell .mapping-artifact-card .u-card-title,
#screen-agent.stage-mapping #mappingShell .mapping-form-card .u-card-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  line-height: 1.15;
  letter-spacing: 0;
}

#screen-agent.stage-mapping #mappingShell .mapping-form-card .u-card-subtitle,
#screen-agent.stage-mapping #mappingShell .mapping-artifact-card .u-status-text,
#screen-agent.stage-mapping #mappingShell .mapping-artifact-card .u-gen-notice {
  color: rgb(16, 36, 62);
}

#screen-agent.stage-mapping #mappingShell .mapping-form-card .form-meta,
#screen-agent.stage-mapping #mappingShell .mapping-form-card .u-card-subtitle {
  font-size: 11px;
  line-height: 1.35;
  margin-top: 2px;
  color: rgb(16, 36, 62);
}

#screen-agent.stage-mapping #mappingShell .mapping-artifact-card .u-card-header,
#screen-agent.stage-mapping #mappingShell .mapping-form-card .u-card-header {
  align-items: flex-start;
}

#screen-agent.stage-mapping #mappingShell .mapping-artifact-card .u-card-body {
  padding: 22px 26px 26px;
}

#screen-agent.stage-mapping #mappingShell .mapping-artifact-card .u-card-header {
  align-items: center;
}

#screen-agent.stage-mapping #mappingShell .mapping-artifact-card .u-card-title {
  margin-right: 8px;
}

#screen-agent.stage-mapping #mappingShell .mapping-artifact-card .u-card-body {
  padding: 20px 22px 22px;
}

#screen-agent.stage-mapping #mappingShell .mapping-artifact-card {
  margin-top: 0;
}

#screen-agent.stage-mapping #mappingShell .mapping-analysis-card-content .p-sec:first-child,
#screen-agent.stage-mapping #mappingShell .mapping-bpmn-card-text > *:first-child {
  margin-top: 0;
}

#screen-agent.stage-mapping #mappingShell .mapping-analysis-sections,
#screen-agent.stage-mapping #mappingShell .mapping-analysis-card-content {
  display: grid;
  gap: 18px;
}

#screen-agent.stage-mapping #mappingShell .mapping-analysis-section {
  display: grid;
  gap: 10px;
}

#screen-agent.stage-mapping #mappingShell .mapping-analysis-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-1);
  line-height: 1.3;
}

#screen-agent.stage-mapping #mappingShell .mapping-analysis-items {
  display: grid;
  gap: 10px;
}

#screen-agent.stage-mapping #mappingShell .mapping-analysis-item {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--stage-color) 14%, var(--border));
  background: color-mix(in srgb, var(--stage-bg-tint) 74%, white);
  color: rgb(16, 36, 62);
  line-height: 1.6;
  font-size: 13px;
}

#screen-agent.stage-mapping #mappingShell .mapping-bpmn-layout {
  display: grid;
  gap: 18px;
}

#screen-agent.stage-mapping #mappingShell .mapping-bpmn-section {
  display: grid;
  gap: 12px;
}

#screen-agent.stage-mapping #mappingShell .mapping-bpmn-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-1);
  line-height: 1.3;
}

#screen-agent.stage-mapping #mappingShell .mapping-bpmn-meta {
  display: grid;
  gap: 4px;
}

#screen-agent.stage-mapping #mappingShell .mapping-bpmn-meta-item {
  font-size: 12.5px;
  color: color-mix(in srgb, var(--stage-color) 48%, rgb(16, 36, 62));
  line-height: 1.45;
}

#screen-agent.stage-mapping #mappingShell .mapping-bpmn-outline {
  display: grid;
  gap: 12px;
  padding: 4px 0 0;
}

#screen-agent.stage-mapping #mappingShell .mapping-bpmn-outline-plain {
  gap: 14px;
}

#screen-agent.stage-mapping #mappingShell .mapping-bpmn-block {
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--stage-color) 14%, var(--border));
  background: color-mix(in srgb, var(--stage-bg-tint) 76%, white);
  overflow: auto;
}

#screen-agent.stage-mapping #mappingShell .mapping-bpmn-plain {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: "Oxygen", var(--font), sans-serif;
  font-size: 13px;
  line-height: 1.7;
  color: rgb(16, 36, 62);
}

#screen-agent.stage-mapping #mappingShell .mapping-bpmn-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--stage-color) 14%, rgba(16, 36, 62, 0.08));
}

#screen-agent.stage-mapping #mappingShell .mapping-bpmn-row:last-child {
  border-bottom: none;
}

#screen-agent.stage-mapping #mappingShell .mapping-bpmn-row-number {
  font-size: 12px;
  font-weight: 700;
  color: color-mix(in srgb, var(--stage-color) 54%, rgb(16, 36, 62));
  letter-spacing: 0.03em;
  text-align: right;
  padding-top: 1px;
}

#screen-agent.stage-mapping #mappingShell .mapping-bpmn-row-text {
  min-width: 0;
  color: rgb(16, 36, 62);
  line-height: 1.72;
  white-space: normal;
  word-break: break-word;
}

#screen-agent.stage-mapping #mappingShell .mapping-bpmn-row.depth-2 .mapping-bpmn-row-text {
  padding-left: 14px;
}

#screen-agent.stage-mapping #mappingShell .mapping-bpmn-row.depth-3 .mapping-bpmn-row-text {
  padding-left: 28px;
}

#screen-agent.stage-mapping #mappingShell .mapping-bpmn-row.depth-4 .mapping-bpmn-row-text {
  padding-left: 42px;
}

#screen-agent.stage-mapping #mappingShell .mapping-bpmn-notes {
  display: grid;
  gap: 10px;
}

#screen-agent.stage-mapping #mappingShell .mapping-bpmn-note {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--stage-color) 14%, var(--border));
  background: color-mix(in srgb, var(--stage-bg-tint) 74%, white);
  color: rgb(16, 36, 62);
  line-height: 1.6;
  font-size: 13px;
}

#screen-agent.stage-mapping #mappingShell .mapping-warning-card .u-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#screen-agent.stage-mapping #mappingShell .mapping-derived-area {
  display: grid;
  gap: 20px;
  padding-bottom: 20px;
}

#screen-agent.stage-mapping #mappingShell .mapping-derived-area > .u-card {
  overflow: visible;
}

#screen-agent.stage-mapping #mappingShell .mapping-artifact-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

#screen-agent.stage-mapping #mappingShell .mapping-artifact-download-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

#screen-agent.stage-mapping #mappingShell .mapping-artifact-download-actions .f-btn {
  white-space: nowrap;
}

#screen-agent.stage-mapping #mappingShell .mapping-bpmn-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

#screen-agent.stage-mapping #mappingShell .mapping-bpmn-toolbar-downloads,
#screen-agent.stage-mapping #mappingShell .mapping-bpmn-toolbar-utils {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

#screen-agent.stage-mapping #mappingShell .mapping-bpmn-toolbar-utils {
  margin-left: auto;
}

.experimental-export-note {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(96, 125, 139, 0.18);
  background: rgba(96, 125, 139, 0.08);
  color: #607D8B;
  font-size: 12px;
  line-height: 1.55;
}

#screen-agent.stage-mapping #mappingShell .experimental-export-note {
  margin-bottom: 14px;
}

#screen-agent.stage-mapping #mappingShell .mapping-artifact-body {
  padding: 20px;
}

#screen-agent.stage-mapping #mappingShell .mapping-artifact-body .p-sec + .p-sec {
  margin-top: 18px;
}

#screen-agent.stage-mapping #mappingShell .mapping-artifact-cta {
  margin-top: 16px;
}

#screen-agent.stage-mapping #mappingShell .mapping-bpmn-card-text {
  white-space: normal;
}

#screen-agent.stage-mapping #mappingShell .mapping-bpmn-card-text pre {
  white-space: pre-wrap;
}

#screen-agent.stage-mapping #mappingShell .mapping-artifact-clear,
#screen-agent.stage-mapping #mappingShell .mapping-artifact-actions .copy-btn,
#screen-agent.stage-mapping #mappingShell .mapping-artifact-actions .f-btn.icon-only,
#screen-agent.stage-mapping #mappingShell .mapping-bpmn-toolbar .copy-btn,
#screen-agent.stage-mapping #mappingShell .mapping-bpmn-toolbar .f-btn.icon-only {
  width: 44px;
  min-width: 44px;
  height: 36px;
}

@media (max-width: 860px) {
  #screen-agent.stage-mapping #mappingShell .mapping-bpmn-toolbar-utils {
    margin-left: 0;
  }
}

#redesenhoOutputCard_bpmnTobe .u-card-header {
  align-items: center;
}

#redesenhoOutputCard_bpmnTobe .u-card-header-left {
  padding-right: 0;
}

.redesenho-bpmn-toolbar {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.redesenho-bpmn-toolbar-main,
.redesenho-bpmn-toolbar-downloads {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.redesenho-bpmn-toolbar-utils {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.redesenho-bpmn-toolbar-main .f-btn:not(.icon-only),
.redesenho-bpmn-toolbar-downloads .f-btn:not(.icon-only) {
  min-width: 0;
  white-space: nowrap;
}

@media (max-width: 860px) {
  .redesenho-bpmn-toolbar-utils {
    margin-left: 0;
  }
}

#screen-agent.stage-mapping #mappingAdvanceBar {
  position: absolute;
  right: 24px;
  bottom: 18px;
  z-index: 18;
}

.chat-ta {
  min-height: 24px !important;
  max-height: 72px !important;
  height: 24px;
  line-height: 1.45 !important;
  padding: 10px 14px !important;
  overflow-y: hidden !important;
  resize: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Global card radius policy: keep card corners in one place only. */
#screen-home .proj-card,
#screen-home .agent-card,
#screen-home .empty-card,
#screen-agent .u-card,
#screen-agent .mapping-chat-card,
#screen-agent .mapping-form-card,
#screen-agent .mapping-artifact-card,
#screen-agent .diagnostico-input-card,
#screen-agent .modal,
#screen-agent .login-card,
#screen-agent .tab-lock-card,
#screen-agent .redesenho-cenario-item,
#screen-agent .monitoramento-indicator-card,
#screen-agent .agent-card,
#screen-agent .empty-card,
#screen-agent .right-state,
#screen-agent .panel,
#screen-agent.stage-understanding .entry-card {
  border-radius: 12px !important;
  border-top-left-radius: 12px !important;
  border-top-right-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
  border-bottom-left-radius: 12px !important;
}

.app-version-badge {
  display: block;
  margin-top: 8px;
  padding: 0;
  pointer-events: none;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
  text-align: left;
}

/* 2026-03-29 · perfil, loading e polimento visual dos agentes */
.profile-popover {
  position: fixed;
  z-index: 1400;
}

.profile-popover.hidden {
  display: none;
}

.profile-popover-card {
  width: 248px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(20, 24, 31, 0.96);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
  color: #f5f7fb;
}

.profile-popover-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.profile-popover-avatar {
  cursor: default;
}

.profile-popover-meta {
  min-width: 0;
}

.profile-popover-name {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
}

.profile-popover-id {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.68);
}

.profile-popover-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.profile-popover-btn {
  min-height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: #f5f7fb;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.profile-popover-btn:hover {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.1);
}

.profile-popover-btn.danger {
  color: #ffd4d4;
  border-color: rgba(255, 150, 150, 0.18);
}

.modal-profile {
  width: min(560px, calc(100vw - 32px));
}

.modal-support {
  width: min(640px, calc(100vw - 32px));
}

select.modal-input,
.modal-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--white);
  background-image: none;
  cursor: pointer;
}

select.modal-input option,
.modal-select option {
  color: #000;
}

.modal-select-wrap {
  position: relative;
  margin-bottom: 13px;
}

.modal-select-wrap::after {
  content: "▾";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #607D8B;
  font-size: 15px;
  line-height: 1;
  pointer-events: none;
}

.modal-select-wrap::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 36px;
  transform: translateY(-50%);
  width: 1px;
  height: 22px;
  background: rgba(96, 125, 139, 0.28);
  pointer-events: none;
}

.modal-select-wrap > select.modal-input,
.modal-select-wrap > .modal-select {
  margin-bottom: 0;
  padding-right: 44px;
}

.modal-textarea {
  width: 100%;
  min-height: 120px;
  resize: vertical;
  font-family: var(--font);
  font-size: 13px;
  color: var(--text-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--white);
  margin-bottom: 16px;
  outline: none;
}

.modal-textarea:focus {
  border-color: var(--stage-color);
}

.modal-textarea-readonly {
  background: rgba(244, 247, 249, 0.96);
  color: #607D8B;
}

.support-topbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.profile-edit-grid {
  display: grid;
  gap: 18px;
  margin-bottom: 16px;
}

.avatar-preset-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.avatar-preset-option {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font: inherit;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}

.avatar-preset-option.active {
  border-color: rgba(41, 121, 255, 0.48);
  box-shadow: 0 0 0 1px rgba(41, 121, 255, 0.24);
  background: rgba(41, 121, 255, 0.12);
}

.avatar.avatar-has-glyph {
  font-size: 15px;
}

.avatar.avatar-preset-initials {
  background: rgba(255, 255, 255, 0.1);
}

.avatar.avatar-preset-student {
  background: linear-gradient(145deg, rgba(87, 113, 255, 0.48), rgba(40, 62, 164, 0.68));
}

.avatar.avatar-preset-rocket {
  background: linear-gradient(145deg, rgba(0, 172, 193, 0.48), rgba(7, 104, 132, 0.68));
}

.avatar.avatar-preset-book {
  background: linear-gradient(145deg, rgba(255, 112, 67, 0.48), rgba(165, 64, 32, 0.68));
}

.avatar.avatar-preset-spark {
  background: linear-gradient(145deg, rgba(139, 195, 74, 0.52), rgba(78, 132, 26, 0.68));
}

.u-processing-inline {
  margin: 0 0 16px;
  display: flex;
  align-items: flex-start;
}

.u-processing-inline .u-gen-notice {
  margin: 0;
}

#understandingPage.autohide-scrollbar,
#mappingShell .col-right.autohide-scrollbar,
#diagnosticoPage.autohide-scrollbar,
#redesenhoPage.autohide-scrollbar,
#implementacaoPage.autohide-scrollbar,
#monitoramentoPage.autohide-scrollbar {
  overflow-y: scroll !important;
  scrollbar-gutter: stable both-edges !important;
}

.u-card-badge,
.u-badge-done,
.u-badge-ai,
.u-badge-stale {
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.u-badge-done {
  background: color-mix(in srgb, var(--green) 28%, rgba(255, 255, 255, 0.96));
  color: color-mix(in srgb, var(--green) 88%, #1b4332);
  border-color: color-mix(in srgb, var(--green) 52%, rgba(255, 255, 255, 0.5));
}

.u-badge-ai {
  background: rgba(10, 37, 64, 0.12);
  color: #17385a;
  border-color: rgba(10, 37, 64, 0.26);
}

#screen-agent .copy-btn,
#screen-agent .f-btn.icon-only.f-btn-subtle {
  width: 44px;
  min-width: 44px;
  height: 36px;
  border-radius: 10px;
}

#screen-agent .copy-btn svg,
#screen-agent .f-btn.icon-only .btn-icon svg,
#screen-agent .f-btn.icon-only svg {
  width: 14px;
  height: 14px;
}

#screen-agent .generate-action-btn:not(.icon-only) {
  min-height: 32px;
  height: 32px;
  min-width: auto;
  padding: 4px 11px;
  font-size: 10.5px;
}

#screen-agent.stage-understanding .u-form-card .u-field-label,
#screen-agent.stage-understanding .u-form-card .u-section-label,
#screen-agent.stage-understanding .u-form-card .u-scope-title,
#screen-agent.stage-understanding .u-form-card .u-cronograma-head div,
#screen-agent.stage-understanding .u-form-card .u-cronograma-row-label {
  color: color-mix(in srgb, var(--stage-color) 62%, #10243e);
}

#screen-agent.stage-understanding .u-form-card .u-field-value,
#screen-agent.stage-understanding .u-form-card .u-scope-value,
#screen-agent.stage-understanding .u-form-card .u-cronograma-row-value {
  background: color-mix(in srgb, var(--stage-color) 14%, rgba(244, 248, 252, 0.98));
  border: 1px solid color-mix(in srgb, var(--stage-color) 18%, rgba(16, 36, 62, 0.18));
  color: #5f7388;
}

#screen-agent.stage-understanding .u-form-card .u-field-input,
#screen-agent.stage-understanding .u-form-card .u-cronograma-row-input {
  background: rgba(255, 255, 255, 0.995);
  border-color: color-mix(in srgb, var(--stage-color) 36%, rgba(16, 36, 62, 0.2));
  color: #10243e;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 0 0 1px color-mix(in srgb, var(--stage-color) 11%, transparent);
}

#screen-agent.stage-mapping #mappingShell .u-section-label,
#screen-agent.stage-mapping #mappingShell .u-field-label {
  font-weight: 700 !important;
  color: rgb(16, 36, 62) !important;
}

#screen-agent.stage-mapping #mappingShell .sipoc-table th {
  color: rgb(16, 36, 62) !important;
}

#screen-agent.stage-mapping #mappingShell .mapping-chat-toggle-btn {
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 8px 20px rgba(0, 0, 0, 0.08) !important;
}

#screen-agent.stage-mapping #mappingShell .mapping-chat-toggle-btn .btn-label {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

#screen-agent.stage-mapping #mappingShell .mapping-chat-toggle-btn .btn-icon svg,
#screen-agent.stage-mapping #mappingShell .mapping-chat-toggle-btn svg {
  width: 15px;
  height: 15px;
}

#screen-agent.stage-mapping #mappingShell .mapping-entry-card.is-disabled,
#screen-agent.stage-understanding .entry-card.is-disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

.diagnostico-slides-hint {
  color: rgb(16, 36, 62) !important;
}

.diagnostico-table th,
.diagnostico-table td,
.sipoc-table th,
.sipoc-table td,
.redesenho-table th,
.redesenho-table td,
.implementacao-table th,
.implementacao-table td,
.monitoramento-table th,
.monitoramento-table td {
  border-color: color-mix(in srgb, var(--stage-color) 32%, rgba(16, 36, 62, 0.18));
}

.u-processing-inline {
  display: inline-flex !important;
  width: auto !important;
  max-width: 100%;
  align-items: flex-start;
}

.u-processing-inline .u-gen-notice,
.u-processing-inline .u-gen-notice-reset {
  width: auto !important;
  max-width: 100%;
}

#screen-agent .u-card-badge,
#screen-agent .u-badge-done,
#screen-agent .u-badge-ai,
#screen-agent .u-badge-stale {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    0 6px 16px rgba(0, 0, 0, 0.08);
}

#screen-agent .u-badge-done {
  background: color-mix(in srgb, var(--green) 34%, rgba(255, 255, 255, 0.98));
  color: color-mix(in srgb, var(--green) 92%, #1b4332);
  border-color: color-mix(in srgb, var(--green) 58%, rgba(255, 255, 255, 0.46));
}

#screen-agent .u-badge-ai {
  background: rgba(16, 36, 62, 0.14);
  color: rgb(16, 36, 62);
  border-color: rgba(16, 36, 62, 0.26);
}

#screen-agent .u-badge-stale {
  background: color-mix(in srgb, #2979ff 18%, rgba(255, 255, 255, 0.95));
  border-color: color-mix(in srgb, #2979ff 34%, rgba(255, 255, 255, 0.42));
  color: #1f4f99;
}

#screen-agent .u-field-value,
#screen-agent .u-field-value *,
#screen-agent .u-scope-title,
#screen-agent .u-scope-title *,
#screen-agent .u-bullet-list li,
#screen-agent .u-bullet-list li *,
#screen-agent .u-cronograma-row-value,
#screen-agent .u-cronograma-row-value *,
#screen-agent textarea[readonly],
#screen-agent input[readonly],
#screen-agent .diagnostico-textarea-readonly,
#screen-agent .diagnostico-textarea-readonly *,
#screen-agent .monitoramento-bpmn-readonly,
#screen-agent .monitoramento-bpmn-readonly *,
#screen-agent .sipoc-value,
#screen-agent .sipoc-value * {
  color: rgb(96, 116, 135) !important;
}

#screen-agent.stage-mapping #mappingShell .mapping-analysis-card-content,
#screen-agent.stage-mapping #mappingShell .mapping-analysis-card-content *,
#screen-agent.stage-mapping #mappingShell .mapping-analysis-item,
#screen-agent.stage-mapping #mappingShell .mapping-analysis-item * {
  font-family: "Oxygen", var(--font), sans-serif !important;
}

#screen-agent.stage-mapping #mappingShell .mapping-bpmn-item.stage {
  padding-left: 16px;
  border-left: 3px solid color-mix(in srgb, var(--stage-color) 24%, rgba(16, 36, 62, 0.14));
  line-height: 1.8;
}

#screen-agent.stage-mapping #mappingShell .mapping-bpmn-item.stage.depth-1 {
  padding-left: 14px;
}

#screen-agent.stage-mapping #mappingShell .mapping-bpmn-item.stage.depth-2 {
  padding-left: 28px;
}

#screen-agent.stage-mapping #mappingShell .mapping-bpmn-item.stage.depth-3 {
  padding-left: 42px;
}

#screen-agent.stage-mapping #mappingShell .mapping-bpmn-item.stage.depth-4,
#screen-agent.stage-mapping #mappingShell .mapping-bpmn-item.stage.depth-5,
#screen-agent.stage-mapping #mappingShell .mapping-bpmn-item.stage.depth-6 {
  padding-left: 56px;
}

.diagnostico-table th,
.diagnostico-table td,
.sipoc-table th,
.sipoc-table td,
.redesenho-table th,
.redesenho-table td,
.implementacao-table th,
.implementacao-table td,
.monitoramento-table th,
.monitoramento-table td {
  border-color: rgba(16, 36, 62, 0.42) !important;
}

.onboarding-layer {
  position: fixed;
  inset: 0;
  z-index: 240;
  pointer-events: none;
}

.onboarding-highlight {
  position: fixed;
  border-radius: 18px;
  border: 2px solid color-mix(in srgb, var(--stage-color, #2979ff) 72%, rgba(255, 255, 255, 0.65));
  background: transparent;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.22),
    0 14px 28px rgba(0, 0, 0, 0.22);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.onboarding-card {
  position: fixed;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(380px, calc(100vw - 32px));
  padding: 16px 16px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(10, 18, 30, 0.96);
  box-shadow:
    0 24px 54px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: #f3f7fb;
  pointer-events: none;
}

.onboarding-card[data-mode="home-intro"] {
  background: rgba(16, 36, 62, 0.97);
}

.onboarding-badge {
  align-self: flex-start;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: color-mix(in srgb, var(--stage-color, #2979ff) 22%, rgba(255, 255, 255, 0.08));
  color: rgba(255, 255, 255, 0.94);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.onboarding-title {
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
}

.onboarding-text {
  color: rgba(230, 237, 246, 0.92);
  font-size: 14px;
  line-height: 1.55;
}

.onboarding-progress {
  color: rgba(191, 198, 207, 0.94);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.onboarding-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 2px;
  pointer-events: auto;
}

.onboarding-btn {
  min-height: 34px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
}

.onboarding-btn.secondary {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(241, 245, 250, 0.94);
}

.onboarding-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.28);
}

.onboarding-btn.primary {
  background: color-mix(in srgb, var(--stage-color, #2979ff) 76%, white 10%);
  border-color: color-mix(in srgb, var(--stage-color, #2979ff) 54%, rgba(255, 255, 255, 0.26));
  color: #ffffff;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--stage-color, #2979ff) 24%, transparent);
}

.onboarding-btn.primary:hover {
  background: color-mix(in srgb, var(--stage-color, #2979ff) 84%, white 8%);
}